/* ============================================================================
   Kylosys Suite — design system
   Values are derived from Kylosys-Suite-UI.pdf. The deck mockup is 1125pt wide
   and its type resolves to a clean 1.28 factor, so the app canvas is 1440px and
   every measurement below is the deck's pt value x 1.28.
   ============================================================================ */

:root{
  /* brand palette (deck p14 "UI kit") */
  --plum:#2a1e3a;
  --pickup:#1e9e64;
  --deep:#0e7a4c;
  --sunny:#ffb938;
  --coral:#f26b5b;
  --oat:#fff6ea;
  --mist:#e9f4ec;
  --blush:#ffd9cc;

  /* surfaces + lines */
  --sand:#f3ede2;
  --cream:#fff6dd;
  --amber:#fff0cc;
  --lilac:#ede6f6;
  --paper:#fffcf6;          /* hover / inset surface */
  --line:#ede3d3;
  --line-2:#cfc4b3;

  /* text */
  --ink:#2a1e3a;
  --muted:#5b5166;
  --muted-2:#9a90a4;
  --nav:#cfc4da;
  --nav-label:#8e82a0;
  --pill:#3d2f50;

  /* semantic */
  --ok:#0e7a4c;
  --ok-soft:#e9f4ec;
  --warn:#7a5200;
  --warn-soft:#fff0cc;
  --bad:#a6352a;
  --bad-soft:#fde3df;
  --gold:#ffe3a0;

  /* radii — deck p14: 12 / 16 / 20 / 26 / pill */
  --r-1:15.4px;   /* 12 */
  --r-2:20.5px;   /* 16 */
  --r-3:25.6px;   /* 20 */
  --r-4:33.3px;   /* 26 */
  --r-ico:8.5px;
  --r-pill:999px;

  /* layout */
  --side:215px;
  --pad:23.1px;
  --gap:14.3px;
  --topbar:62.5px;

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,monospace;

  --shadow-1:0 1px 2px rgba(42,30,58,.05);
  --shadow-2:0 12px 32px rgba(42,30,58,.14);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  font-size:15.4px;
  line-height:1.45;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--pickup);outline-offset:2px;border-radius:4px}

/* ============================================================================
   Shell
   ============================================================================ */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}

.side{
  background:var(--plum);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.side__brand{padding:23px 28.3px 0}
.side__brand img{height:33px;width:auto;max-width:100%}
/* The wordmark is what every width shows except the 72px tablet rail, which swaps in
   the square app icon — see the 981–1099px block at the foot of this file. Two elements
   rather than one, because swapping a replaced element's source from CSS is not
   something to rely on cross-browser. */
.side__brand-mark{display:none}
.side__biz{
  margin:26px 15.4px 0;width:calc(100% - 30.8px);
  display:flex;align-items:center;gap:9px;
  background:var(--pill);border-radius:var(--r-1);
  padding:10.5px 12.8px;color:var(--oat);text-align:left;
}
/* The chip's badge is a <span> too — `#bizAv`, the first child of the button — so
   naming every span in here reached it and set `display:block` on it. That beat
   `.av`'s `display:grid` on specificity, 0,1,1 against 0,1,0, so the letters sat at
   the left-hand edge of the circle and a little above centre: measured in a 24px
   badge, 4.76px off across and 4.5px off down, at both widths. The block is named
   now, and the badge keeps the rule that makes it a circle. */
.side__biz__text{display:block}
.side__biz__text b{font-size:13.4px;font-weight:600}
.side__biz__text span{display:block;font-size:11px;color:var(--nav);margin-top:1px}
.side__biz svg{margin-left:auto;flex:none}
.side__nav{flex:1;overflow-y:auto;padding:20px 15.4px 16px}
.side__nav::-webkit-scrollbar{width:0}
.side__label{
  font-family:var(--font-mono);font-size:10.6px;letter-spacing:.09em;
  color:var(--nav-label);padding:0 13px;margin:17.5px 0 6.4px;
}
.side__label:first-child{margin-top:0}
.nav-item{
  display:flex;align-items:center;gap:15.3px;
  height:35.6px;padding:0 13px;border-radius:var(--r-1);
  color:var(--nav);font-size:13.9px;font-weight:600;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:var(--oat)}
.nav-item.is-on{background:var(--pill);color:var(--oat)}
/* The user-agent's own [hidden]{display:none} loses to any author rule that sets
   display, and .nav-item sets display:flex — so hiding a nav item did nothing until
   this existed. After .is-on, so a screen that is both hidden and current stays
   hidden. */
.nav-item[hidden]{display:none}
.nav-item svg{flex:none;width:14.3px;height:14.3px}
.nav-item .n-badge{
  margin-left:auto;font-size:11px;font-weight:700;
  background:var(--sunny);color:var(--plum);
  height:16.4px;min-width:16.4px;padding:0 5.8px;
  border-radius:var(--r-pill);display:grid;place-items:center;
}
.nav-item .n-badge--live{background:var(--pickup);color:#fff;padding:0 7px}

.side__me{
  margin:0 15.4px 20px;width:calc(100% - 30.8px);
  background:var(--pill);border-radius:var(--r-1);
  display:flex;align-items:center;gap:11.5px;padding:11.5px;
  text-align:left;color:var(--oat);
}
.side__me:hover{background:#463757}
.side__me .who{min-width:0}
.side__me b{display:block;font-size:12.5px;font-weight:600}
.side__me small{display:flex;align-items:center;gap:5.8px;font-size:12.5px;color:var(--nav)}

.main{display:flex;flex-direction:column;min-width:0;background:#fff;min-height:100vh}

.topbar{
  display:flex;align-items:center;gap:16px;
  height:var(--topbar);flex:none;
  padding:0 var(--pad);border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#fff;z-index:20;
}
.topbar__title{font-family:var(--font-display);font-weight:800;font-size:22.1px;letter-spacing:-.018em}
.topbar__jump{margin-left:auto;display:flex;align-items:center;gap:2.8px}
.topbar__search{
  display:flex;align-items:center;gap:9px;
  width:267.9px;height:36.5px;padding:0 14px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--muted-2);font-size:13.4px;
}
.topbar__search span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__bell{
  position:relative;width:34.6px;height:34.6px;border-radius:var(--r-1);
  display:grid;place-items:center;color:var(--ink);flex:none;
}
.topbar__bell:hover{background:var(--paper)}
.topbar__bell i{
  position:absolute;top:5.5px;right:5.5px;width:8.7px;height:8.7px;
  border-radius:50%;background:var(--coral);
}
.kbd{
  font-family:var(--font-mono);font-size:11px;color:var(--muted-2);
  background:#fff;border:1px solid var(--line);border-radius:6px;
  height:17.3px;padding:0 5.5px;display:inline-flex;align-items:center;gap:1px;
}
.status{
  display:flex;align-items:center;gap:6.4px;height:27.9px;padding:0 11.5px;
  background:var(--mist);border-radius:var(--r-pill);
  color:var(--deep);font-size:12.5px;font-weight:600;white-space:nowrap;
}
.status i{width:8.7px;height:8.7px;border-radius:50%;background:var(--pickup);flex:none}
.topbar__me{
  width:34.6px;height:34.6px;border-radius:50%;background:var(--sunny);
  color:var(--plum);font-family:var(--font-display);font-weight:800;font-size:11.5px;
  display:grid;place-items:center;flex:none;
}

.view{padding:19px var(--pad) 30px}
.view[hidden]{display:none}
.view__head{display:flex;align-items:flex-start;gap:var(--gap);margin-bottom:0}
.view__head h2{font-family:var(--font-display);font-weight:800;font-size:26.9px;line-height:1.1;letter-spacing:-.02em}
.view__sub{color:var(--muted);font-size:15.4px;margin-top:6px}
.view__acts{margin-left:auto;display:flex;gap:8px}

/* ============================================================================
   Buttons
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:34.6px;padding:0 17.3px;border-radius:var(--r-pill);
  font-size:13.4px;font-weight:700;white-space:nowrap;
  border:1px solid transparent;transition:background .15s,border-color .15s;
}
.btn--primary{background:var(--deep);color:#fff}
.btn--primary:hover{background:#0b6640}
.btn--sec{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--sec:hover{background:var(--paper)}
.btn--quiet{background:transparent;color:var(--muted);padding:0 11.5px}
.btn--quiet:hover{background:var(--paper);color:var(--ink)}
.btn--celebrate{background:var(--sunny);color:var(--plum)}
.btn--celebrate:hover{background:#ffc95f}
.btn--bad{background:var(--coral);color:#fff}
.btn--sm{height:29.7px;padding:0 13px;font-size:12.5px;border-radius:var(--r-pill)}
.btn--xs{height:24px;padding:0 10px;font-size:11.5px}
.btn--ghost{background:var(--paper);border-color:var(--line-2);color:var(--ink)}
.btn--block{width:100%}

/* ============================================================================
   Badges, chips, avatars
   ============================================================================ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  height:21.1px;padding:0 9.6px;border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
}
.badge--ok{background:var(--ok-soft);color:var(--ok)}
.badge--bad{background:var(--bad-soft);color:var(--bad)}
.badge--warn{background:var(--amber);color:var(--warn)}
.badge--sun{background:var(--sunny);color:var(--plum)}
.badge--live{background:var(--pickup);color:#fff}
.badge--mut{background:var(--sand);color:var(--muted)}
.badge--plum{background:var(--plum);color:var(--oat)}

.av{
  width:28.8px;height:28.8px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:10.6px;color:var(--plum);
  background:var(--mist);
}
.av--lg{width:36.5px;height:36.5px;font-size:12.8px}
.av--xl{width:57.6px;height:57.6px;font-size:19.2px}
.av--sm{width:24px;height:24px;font-size:9.6px}
.av--a{background:var(--mist)}      .av--b{background:var(--blush)}
.av--c{background:var(--amber)}     .av--d{background:var(--lilac)}
.av--e{background:var(--gold)}      .av--f{background:var(--sand)}
.av--sun{background:var(--sunny)}
/* A logo drawn inside a badge. `inherit` is what keeps it round: the rule above is
   an id-free class on the container, and a picture that only filled the box would be
   a square inside a circle. */
.av__img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av-stack{display:flex}
.av-stack .av+.av{margin-left:-7.5px;box-shadow:0 0 0 2px #fff}

.dot{width:8.7px;height:8.7px;border-radius:50%;flex:none;background:var(--pickup)}
.dot--bad{background:var(--coral)}
.dot--away{background:var(--muted-2)}
.dot--warn{background:var(--sunny)}

/* ============================================================================
   Cards & panels
   ============================================================================ */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-1);
  padding:14.1px 17.7px;min-width:0;
}
.card--flush{padding:0;overflow:hidden}
.card__head{display:flex;align-items:center;gap:9.3px;margin-bottom:7.9px}
.card__head h3{font-family:var(--font-display);font-weight:800;font-size:16.3px;letter-spacing:-.01em}
.card__head svg{width:11.5px;height:11.5px;color:var(--ink);flex:none}
.card__head .badge{margin-left:auto}
.card__link{
  margin-left:auto;color:var(--ok);font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.card__link:hover{text-decoration:underline}
.card__sub{color:var(--muted-2);font-size:12px}
.card__body{padding:14.1px 17.7px}

.grid{display:grid;gap:var(--gap)}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.row{display:flex;align-items:center;gap:11.5px}

/* ============================================================================
   Stat tiles
   ============================================================================ */
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-1);
  padding:13.9px 17.8px;min-height:113.3px;
}
.stat__top{display:flex;align-items:center;gap:9.9px}
.stat__ico{width:36.5px;height:36.5px;border-radius:var(--r-ico);display:grid;place-items:center;flex:none}
.stat__label{color:var(--muted);font-size:13.4px;font-weight:600}
.stat__row{display:flex;align-items:center;gap:9.9px;margin-top:12.5px}
.stat__val{font-family:var(--font-display);font-weight:800;font-size:30.7px;letter-spacing:-.02em;line-height:1}
.stat__hint{color:var(--muted-2);font-size:12px}

/* ============================================================================
   Lists, rows, tables
   ============================================================================ */
.list{display:flex;flex-direction:column}
.list>*+*{border-top:1px solid var(--line)}
.li{display:flex;align-items:center;gap:11.5px;padding:11px 0;min-width:0}
.li--pad{padding:11px 17.7px}
.li:hover{background:var(--paper)}
.li__main{min-width:0;flex:1}
.li__t{font-size:13.4px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li__s{color:var(--muted-2);font-size:12px;margin-top:2px}
.li__meta{color:var(--muted-2);font-family:var(--font-mono);font-size:12px;flex:none}
.li__end{margin-left:auto;flex:none;display:flex;align-items:center;gap:8px}

.tbl{width:100%;border-collapse:collapse}
.tbl th{
  text-align:left;font-family:var(--font-mono);font-size:10.6px;letter-spacing:.09em;
  color:var(--muted-2);font-weight:400;padding:0 0 10px;border-bottom:1px solid var(--line);
}
.tbl td{padding:12.5px 0;border-bottom:1px solid var(--line);font-size:13.4px;vertical-align:middle}
.tbl tr:hover td{background:var(--paper)}
.tbl .num{font-family:var(--font-mono);font-size:12px;color:var(--muted-2)}
.tbl__t{font-weight:600;color:var(--ink)}
.tbl__t:hover{color:var(--deep);text-decoration:underline}

/* queue / inbox rows */
.q-row{
  display:flex;align-items:center;gap:11.5px;
  padding:9.6px;border-radius:var(--r-1);
  border:1px solid transparent;min-height:55.7px;
}
.q-row--hot{background:var(--cream)}
.q-row--plain{background:var(--paper);border-color:var(--line-2)}
.q-row .li__t{font-size:13.4px}

/* ============================================================================
   Messages / conversation
   ============================================================================ */
.thread{display:flex;flex-direction:column;gap:14px}
.msg{max-width:78%;padding:11.5px 14.1px;border-radius:var(--r-2);font-size:13.9px;line-height:1.5}
.msg--in{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start}
.msg--out{background:var(--plum);color:var(--oat);border-bottom-right-radius:6px;align-self:flex-end}
.msg--note{
  background:var(--amber);border:1px dashed #e0c98a;color:var(--warn);
  border-radius:var(--r-1);align-self:stretch;max-width:100%;font-size:12.5px;
}
.msg__meta{font-size:11.5px;color:var(--muted-2);margin-bottom:4px}
.composer{
  border:1px solid var(--line);border-radius:var(--r-2);padding:11.5px 14.1px;
  display:flex;align-items:center;gap:11.5px;background:#fff;
}
.composer input{border:0;outline:0;flex:1;font:inherit;font-size:13.9px;background:none}

/* ============================================================================
   Forms
   ============================================================================ */
.field{display:block}
.field span{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
.input,.select,.textarea{
  width:100%;height:36.5px;padding:0 13px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-1);
  font:inherit;font-size:13.4px;color:var(--ink);
}
.textarea{height:auto;min-height:86px;padding:11.5px 13px;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted-2) 50%),linear-gradient(135deg,var(--muted-2) 50%,transparent 50%);background-position:calc(100% - 17px) 16px,calc(100% - 12px) 16px;background-size:5px 5px;background-repeat:no-repeat}
.input:focus,.select:focus,.textarea:focus{border-color:var(--pickup);outline:0;box-shadow:0 0 0 3px var(--mist)}
.toggle{
  width:41px;height:23px;border-radius:var(--r-pill);background:var(--line);
  position:relative;flex:none;transition:background .15s;
}
.toggle::after{
  content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:var(--shadow-1);
}
.toggle[aria-pressed="true"]{background:var(--pickup)}
.toggle[aria-pressed="true"]::after{transform:translateX(18px)}
.seg{display:inline-flex;background:var(--sand);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg button{padding:6.5px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-1)}
.check{display:flex;align-items:center;gap:11.5px;font-size:13.4px}
.check i{
  width:15.4px;height:15.4px;border-radius:50%;border:1.6px solid var(--line-2);flex:none;
}
.check.is-done i{background:var(--deep);border-color:var(--deep);position:relative}
.check.is-done i::after{
  content:"";position:absolute;left:4.4px;top:3.2px;width:4.6px;height:7.6px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg);
}
.check.is-done span{color:var(--muted-2);text-decoration:line-through}

/* ============================================================================
   Multi-pane screens (inbox, ticket, contact, call)
   ============================================================================ */
.view--flush{padding:0;height:calc(100vh - var(--topbar));overflow:hidden}
.view--scroll{padding:19px var(--pad) 30px}
.split{display:grid;height:100%;min-height:0}
.split--inbox{grid-template-columns:296.6px minmax(0,1fr) 297.6px}
.split--2{grid-template-columns:minmax(0,1fr) 341px}
.split--phone{grid-template-columns:minmax(0,1fr) 381px}
.pane{min-width:0;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.pane--list{background:var(--paper);border-right:1px solid var(--line)}
.pane--side{background:var(--paper);border-left:1px solid var(--line)}
.pane--plain{background:#fff;border-left:1px solid var(--line)}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:5.5px;padding:15.3px 11.5px 12px}
.chip{
  height:26.9px;padding:0 12.5px;border-radius:10px;background:#f1ece4;
  color:var(--muted);font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.chip.is-on{background:var(--mist);color:var(--deep)}

/* conversation list */
.conv{padding:0 11.5px 11.5px;display:flex;flex-direction:column;gap:0}
.conv__i{
  display:flex;gap:11.5px;padding:11.5px;border-radius:11.4px;
  align-items:flex-start;cursor:pointer;text-align:left;width:100%;
}
.conv__i:hover{background:#f6f1e8}
.conv__i.is-on{background:var(--mist)}
.conv__i .av{width:38.4px;height:38.4px;font-size:12.5px;margin-top:1px}
.conv__m{min-width:0;flex:1}
.conv__m b{display:block;font-size:13.9px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv__m span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv__e{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.conv__e time{color:var(--muted-2);font-size:11.5px}
.conv__tags{display:flex;gap:5px;align-items:center}
.conv__ico{color:var(--muted-2);display:flex;gap:4px;align-items:center}

/* thread */
.conv-head{
  display:flex;align-items:center;gap:11.5px;flex:none;
  padding:17.3px 23.1px;border-bottom:1px solid var(--line);
}
.conv-head .av{width:42.2px;height:42.2px;font-size:14.4px}
.conv-head h2{font-family:var(--font-display);font-weight:800;font-size:16.3px;line-height:1.1}
.conv-head p{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-top:3px}
.conv-head .acts{margin-left:auto;display:flex;gap:5.5px}
.conv-body{flex:1;overflow-y:auto;padding:23.1px;display:flex;flex-direction:column;gap:15.4px}
.conv-foot{flex:none;border-top:1px solid var(--line);padding:11.5px 23.1px 17.3px}
.daybar{display:flex;justify-content:center}
.daybar span{
  background:#f1ece4;border-radius:7.8px;height:21.1px;padding:0 11.5px;
  display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--muted);
}
.msg{max-width:409px;padding:12.2px 15.3px;border-radius:15.4px;font-size:13.9px;line-height:1.55}
.msg--in{background:var(--sand);align-self:flex-start;color:var(--ink)}
.msg--out{background:var(--plum);color:var(--oat);align-self:flex-end}
.msg--full{max-width:100%;align-self:stretch}
.msg--rec{
  background:var(--cream);border-radius:13.9px;align-self:stretch;max-width:100%;
  padding:13.4px 15.3px;display:flex;gap:11.5px;align-items:flex-start;
}
.msg--rec .play{
  width:29.7px;height:29.7px;border-radius:50%;background:var(--deep);color:#fff;
  display:grid;place-items:center;flex:none;
}
.msg--note{
  background:var(--amber);border-radius:13.9px;align-self:stretch;max-width:100%;
  padding:11.5px 15.3px;font-size:13px;color:var(--warn);
}
.msg__t{font-size:11.5px;color:var(--muted-2);margin-bottom:5px}
.composer-tabs{display:flex;gap:17.5px;margin-bottom:9.6px}
.composer-tabs button{font-size:12px;font-weight:700;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.composer-tabs button.is-on{color:var(--deep)}
.composer-row{display:flex;gap:11.5px;align-items:center}
.composer-row .input{height:42.2px;border-radius:15.4px}
.tpl{display:flex;gap:5.5px;margin-top:9.6px;flex-wrap:wrap}
.tpl button{
  font-size:11.5px;font-weight:600;color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11.5px;
}

/* contact side panel */
.side-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:19px 17.7px 14.1px}
.side-head .av{width:69.1px;height:69.1px;font-size:23px}
.side-head h3{font-family:var(--font-display);font-weight:800;font-size:20.2px;margin-top:9.6px;line-height:1.1}
.side-head p{color:var(--muted);font-size:13px;margin-top:5px}
.tagrow{display:flex;gap:5.5px;justify-content:center;flex-wrap:wrap;margin-top:11.5px}
.tag{height:21.1px;padding:0 10.5px;border-radius:7.8px;display:inline-flex;align-items:center;font-size:12px;font-weight:700}
.tag--ok{background:var(--mist);color:var(--deep)}
.tag--vip{background:var(--lilac);color:#553c85}
.tag--mut{background:#f1ece4;color:var(--muted)}
.side-sec{padding:0 17.7px 17.7px}
.side-sec h4{
  font-family:var(--font-display);font-weight:800;font-size:14.4px;
  margin:0 0 11.5px;display:flex;align-items:center;gap:8px;
}
.side-card{background:#fff;border:1px solid var(--line);border-radius:15.1px;padding:13.4px 17.7px}
.mini{display:flex;justify-content:space-between;gap:11.5px;font-size:13px;padding:6.9px 0}
.mini dt{color:var(--muted-2)}
.mini dd{margin:0;text-align:right}
.tl{display:flex;flex-direction:column;gap:0}
.tl li{display:flex;gap:9.6px;align-items:center;font-size:12.5px;color:var(--muted);padding:5.5px 0}

/* ============================================================================
   Live call + call log
   ============================================================================ */
.split--live{grid-template-columns:263.7px minmax(0,1fr) 300px}
.rail{background:var(--paper);border-right:1px solid var(--line);padding:17.3px 11.5px;display:flex;flex-direction:column;gap:15.4px}
.rail h3{
  font-family:var(--font-display);font-weight:800;font-size:16.3px;
  padding:0 5.8px;display:flex;align-items:center;gap:8px;
}
.rail h3 .badge{margin-left:auto}
.qcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-1);
  padding:11.5px;display:flex;gap:9.6px;align-items:center;
}
.qcard--hot{background:var(--cream)}
.qcard .av{width:34.6px;height:34.6px;font-size:11.5px}
.qcard .li__t{font-size:13.4px}
.linecard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-1);
  padding:11.5px 13.4px;display:flex;align-items:center;gap:9.6px;
}
.linecard b{font-size:13.4px;display:block}
.linecard small{display:block;font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2);margin-top:2px}
.teamrow{display:flex;align-items:center;gap:9.6px;padding:7.5px 5.8px}
.teamrow .av{width:24px;height:24px;font-size:9.6px}
.teamrow b{font-size:13.4px;font-weight:600;flex:1}

.livecard{
  background:var(--plum);color:var(--oat);border-radius:var(--r-2);
  padding:23.1px;display:flex;flex-direction:column;gap:17.3px;
}
.livecard__t{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--nav)}
.livecard__clock{font-family:var(--font-display);font-weight:800;font-size:42.2px;color:var(--sunny);line-height:1}
.livecard__who{display:flex;align-items:center;gap:17.3px}
.livecard__who h2{font-family:var(--font-display);font-weight:800;font-size:32.6px;color:var(--oat);line-height:1.05}
.livecard__who p{color:var(--nav);font-size:15.4px;margin-top:5px}
.livecard__who .av{width:57.6px;height:57.6px;font-size:19.2px}
.ctl{display:flex;flex-wrap:wrap;gap:9.6px}
.ctl button{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:rgba(255,255,255,.1);color:var(--oat);border-radius:15.4px;
  padding:11.5px 13.4px;min-width:69.1px;font-size:12px;font-weight:600;
}
.ctl button:hover{background:rgba(255,255,255,.2)}
.ctl button.is-end{background:var(--coral);color:#fff}
.tr{display:flex;gap:9.6px;align-items:flex-start;padding:6.9px 0;font-size:13.4px}
.tr time{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);width:34.6px;flex:none;padding-top:2px}
.tr b{flex:none;width:34.6px}
.tr--jo b{color:var(--ok)}
.tr--dev b{color:#7b5ea7}
.notes li{display:flex;gap:9.6px;font-size:13.4px;padding:6.9px 0}
.notes li::before{
  content:"";width:5.8px;height:5.8px;border-radius:50%;
  background:var(--line-2);margin-top:8px;flex:none;
}
/* The number is an <input> in the live page, not the <div> the copies in
   `_backup/_suite/` still ship, so it needs the house field's box drawn for it.
   Without one the browser draws its own: no radius, 2px of padding and the user
   agent's border, square, beside a keypad of 15.4px-rounded keys. Its height is
   the keypad's own so the field and the keys sit on one rhythm. */
.dialnum{
  width:100%;height:52.8px;padding:0 15.4px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-1);
  font-family:var(--font-mono);font-weight:500;font-size:25px;
  text-align:right;letter-spacing:.02em;color:var(--ink);
}
.dialnum:focus{border-color:var(--pickup);outline:0;box-shadow:0 0 0 3px var(--mist)}
/* The hint is not a number, so it gets neither the number's size nor its right
   edge: at 25px, right-aligned, "The number to call" was a clipped shout. */
.dialnum::placeholder{color:var(--muted-2);font-size:15.4px;letter-spacing:0;text-align:left}
.pane--dialer{background:var(--paper);border-left:1px solid var(--line);padding:17.3px 23.1px;gap:17.3px}
.vmcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-1);padding:13.4px}
.vmcard b{font-size:13px;display:block}
.vmcard p{font-size:12px;color:var(--muted);margin-top:5px}

/* ============================================================================
   Tables with toolbars (contacts, tickets, calls)
   ============================================================================ */
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:14.1px;flex-wrap:wrap}
.toolbar .input{width:236px;height:34.6px}
.toolbar .spacer{margin-left:auto}
.tablecard{background:#fff;border:1px solid var(--line);border-radius:var(--r-1);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.tablecard .tbl th{padding:13.4px 17.7px;background:var(--paper)}
.tablecard .tbl td{padding:13.4px 17.7px}
.tablecard .tbl th:first-child,.tablecard .tbl td:first-child{padding-left:23.1px}
.tablecard .tbl th:last-child,.tablecard .tbl td:last-child{padding-right:23.1px}
.tablecard .tbl tr:last-child td{border-bottom:0}
.cellwho{display:flex;align-items:center;gap:11.5px}
.cellwho b{font-weight:700}

/* bulk action bar + pager */
.bulkbar{
  background:var(--plum);color:var(--oat);border-radius:var(--r-1);
  display:flex;align-items:center;gap:17.3px;padding:11.5px 17.7px;font-size:13.4px;
  flex-wrap:wrap;
}
.bulkbar b{font-weight:700}
.bulkbar button{
  color:var(--oat);font-size:13.4px;display:inline-flex;gap:6px;align-items:center;opacity:.92;
}
.bulkbar button:hover{opacity:1;text-decoration:underline}
.bulkbar .spacer{margin-left:auto}
.pager{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12.5px;padding:14.1px 0 0}
.pager div{display:flex;gap:11.5px}

/* contact profile */
.profile-head{display:flex;align-items:flex-start;gap:17.3px;flex-wrap:wrap}
.profile-head .av{width:55.7px;height:55.7px;font-size:22px}
.profile-head h2{font-family:var(--font-display);font-weight:800;font-size:30.7px;line-height:1.05}
.profile-head .sub{color:var(--muted);font-size:15.4px;margin-top:6px}
.tl2 li{display:flex;gap:14.1px;padding:14.1px 0;border-top:1px solid var(--line)}
.tl2 li:first-child{border-top:0;padding-top:6px}
.tl2__i{
  width:29.7px;height:29.7px;border-radius:50%;background:var(--mist);color:var(--deep);
  display:grid;place-items:center;flex:none;
}
.tl2__b{flex:1;min-width:0}
.tl2__h{display:flex;align-items:baseline;gap:11.5px;flex-wrap:wrap}
.tl2__h b{font-size:13.9px}
.tl2__h time{margin-left:auto;font-size:12px;color:var(--muted-2);font-family:var(--font-mono)}
.tl2__b p{font-size:13px;color:var(--muted);margin-top:5px}
.tl2__m{
  margin-top:9.6px;font-size:12px;font-weight:700;color:var(--muted);
  display:inline-flex;gap:6px;align-items:center;
}
.tl2__m:hover{color:var(--ink)}
.note-box{
  border:1px solid var(--line);border-radius:var(--r-2);
  padding:12.5px 15.3px;display:flex;align-items:center;gap:11.5px;flex-wrap:wrap;
}
.note-box input{border:0;outline:0;flex:1;min-width:200px;font:inherit;font-size:13.9px;background:none}
.tabs2{display:flex;gap:17.3px;border-bottom:1px solid var(--line);margin:17.3px 0 0;flex-wrap:wrap}
.tabs2 button{padding:0 0 11.5px;font-size:13.4px;font-weight:600;color:var(--muted-2);border-bottom:2px solid transparent}
.tabs2 button.is-on{color:var(--ink);border-bottom-color:var(--plum)}

/* ============================================================================
   Kanban (deals)
   ============================================================================ */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14.4px;align-items:start}
.kcol{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-1);padding:12.5px}
.kcol__h{display:flex;align-items:center;gap:8px;margin-bottom:11.5px}
.kcol__h b{font-family:var(--font-display);font-size:14.4px;font-weight:800}
.kcol__h span{color:var(--muted-2);font-family:var(--font-mono);font-size:12px}
.kcol__h em{margin-left:auto;font-style:normal;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.kcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-1);padding:12.5px;margin-bottom:9.6px}
.kcard b{display:block;font-size:13.9px;font-weight:700}
.kcard .amt{font-family:var(--font-display);font-weight:800;font-size:16.3px;margin-top:6px}
.kcard__h{display:flex;align-items:center;gap:8px}
.kcard__h b{flex:1;font-size:13.9px}
.kcard__s{font-size:12.5px;color:var(--muted);margin-top:4px}
.kcard__r{display:flex;align-items:baseline;gap:8px;margin-top:9.6px}
.kcard__r b{font-family:var(--font-display);font-weight:800;font-size:17.3px}
.kcard__r span{margin-left:auto;font-size:12px;color:var(--muted)}
.kcard__chip{
  display:inline-flex;margin-top:9.6px;font-size:12px;font-weight:600;
  color:var(--deep);background:var(--mist);border-radius:var(--r-pill);padding:4px 10.5px;
}
.kcard__won{color:var(--ok);font-size:12px;font-weight:700;display:inline-flex;gap:5px;align-items:center}
.kadd{font-size:12.5px;font-weight:600;color:var(--muted-2);padding:9.6px;width:100%;text-align:left;border-radius:11.4px}
.kadd:hover{background:#fff;color:var(--ink)}

/* progress + horizontal bars */
.bar{background:var(--sand);border-radius:var(--r-pill);overflow:hidden;display:block;height:9.6px}
.bar i{display:block;height:100%;background:var(--pickup);border-radius:var(--r-pill)}
.bar--a i{background:#8a6fb8}
.hbar__r > span:first-child{display:flex;flex-direction:column;gap:2px}

/* ticket detail */
.thead{display:flex;align-items:center;gap:11.5px;flex-wrap:wrap}
.thead h1{font-family:var(--font-display);font-weight:800;font-size:25px;line-height:1.15;margin:11.5px 0 0}
.thread{overflow-y:auto;padding:6px 0 14.1px}
.tmsg{display:flex;gap:17.3px;padding:14.1px 0}
.tmsg>.av{width:21px;height:21px;font-size:8.6px;margin-top:3px}
.tmsg__b{font-size:13.9px;line-height:1.65;margin-top:6px}
.tmsg__h{font-size:15.4px;font-weight:700}
.tmsg__h span{font-size:12.5px;color:var(--muted-2);font-weight:400}
.tmsg--note{margin-left:15.4px;padding-left:23.1px;border-left:2px solid var(--amber)}
.tmsg--note .tmsg__h span{color:var(--warn)}
.rec{background:var(--cream);border-radius:13.9px;padding:9.6px 15.3px;margin-top:9.6px;font-size:13px}
.composer2{border:1px solid var(--line);border-radius:var(--r-2);padding:12.5px 17.7px;flex:none;background:#fff}
.composer2__tabs{display:flex;gap:17.3px;font-size:12px;font-weight:700;flex-wrap:wrap}
.composer2__tabs button{color:var(--muted)}
.composer2__tabs button.is-on{color:var(--deep)}
.composer2__tabs .r{margin-left:auto;display:flex;gap:17.3px}
.composer2 textarea{
  border:0;outline:0;width:100%;font:inherit;font-size:13.9px;line-height:1.6;
  resize:none;margin-top:11.5px;background:none;color:var(--ink);height:61px;
}
.prop{display:flex;justify-content:space-between;align-items:center;gap:11.5px;padding:9.6px 0;border-bottom:1px solid var(--line)}
.prop:last-child{border-bottom:0}
.prop dt{font-size:11.5px;color:var(--muted-2)}
.prop dd{margin:0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.sla{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0}
.sla b{font-family:var(--font-mono);font-weight:400}

/* reports */
.chartcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-1);padding:17.7px}
.chartcard h3{font-family:var(--font-display);font-weight:800;font-size:16.3px}
.lb{display:flex;align-items:center;gap:11.5px;padding:9.6px 0;border-bottom:1px solid var(--line);font-size:13.4px}
.lb:last-child{border-bottom:0}
.lb .rk{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);width:20px}
.lb .av{width:25px;height:25px;font-size:9.6px}
.lb b{margin-left:auto;font-family:var(--font-display);font-size:15.4px}
.chart{display:flex;gap:11.5px;margin-top:17.3px}
.chart__y{
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:11.6px;color:var(--muted-2);font-family:var(--font-mono);
  padding-bottom:22px;text-align:right;flex:none;
}
.bars{flex:1}
.bars .pair{flex:1;display:flex;align-items:flex-end;gap:3px;width:100%}
.bars .pair i{flex:1}
.frail{background:var(--paper);border-right:1px solid var(--line);padding:17.3px 11.5px;display:flex;flex-direction:column}
.frail__g{
  font-family:var(--font-mono);font-size:10.6px;color:var(--nav-label);
  letter-spacing:.09em;padding:13.4px 11.5px 6px;
}
.frail button{
  display:flex;align-items:center;gap:8px;padding:7.5px 11.5px;border-radius:10px;
  font-size:13.4px;font-weight:600;color:var(--muted);width:100%;text-align:left;
}
.frail button b{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--muted-2)}
.frail button:hover{background:#f6f1e8}
.frail button.is-on{background:var(--mist);color:var(--deep)}
.frail__stats{margin-top:23.1px;background:#fff;border:1px solid var(--line);border-radius:var(--r-1);padding:13.4px}
.frail__stats .mini{padding:4px 0}
/* The settings rail and the settings pane share one screen, and the pages in the
   pane are cards with no outer spacing of their own — so the pane carries the
   gutter. 17.3px on top lines the first card up with the rail's own heading. */
#settingsPane{padding:17.3px var(--pad) 30px}
.prio{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12px}
.prio--urgent{color:var(--bad)} .prio--high{color:var(--warn)}
.prio--normal{color:var(--muted)} .prio--low{color:var(--muted-2)}
.via{display:inline-flex;align-items:center;gap:5px;color:var(--muted-2);font-size:12px}

/* ============================================================================
   Phone / dialer
   ============================================================================ */
.dialpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9.6px;max-width:264px}
.dialpad button{
  height:52.8px;border-radius:15.4px;background:var(--paper);border:1px solid var(--line);
  font-family:var(--font-display);font-size:19.2px;font-weight:800;
}
.dialpad button:hover{background:var(--mist)}
.dialpad button small{display:block;font-family:var(--font-body);font-size:9.6px;font-weight:600;color:var(--muted-2);letter-spacing:.1em}
.callcard{
  background:var(--plum);color:var(--oat);border-radius:var(--r-2);
  padding:23.1px;display:flex;flex-direction:column;gap:17.3px;
}
.callcard .av{width:69.1px;height:69.1px;font-size:23px}
.wave{display:flex;align-items:center;gap:3px;height:34.6px}
.wave i{width:3px;border-radius:2px;background:var(--pickup);height:30%}
.wave i:nth-child(3n){height:70%}
.wave i:nth-child(3n+1){height:45%}
.wave i:nth-child(4n){height:100%}
.wave i:nth-child(5n){height:60%}
.callctl{display:flex;gap:11.5px}
.callctl button{
  width:46.1px;height:46.1px;border-radius:50%;background:rgba(255,255,255,.12);
  color:var(--oat);display:grid;place-items:center;
}
.callctl button:hover{background:rgba(255,255,255,.2)}
.callctl button.is-end{background:var(--coral);color:#fff;width:auto;padding:0 20.5px;border-radius:var(--r-pill);gap:8px}

/* ============================================================================
   Charts (reports)
   ============================================================================ */
.bars{display:flex;align-items:flex-end;gap:8px;height:168px}
.bars>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.bars i{width:100%;border-radius:6px 6px 0 0;background:var(--mist);display:block}
.bars i.g{background:var(--pickup)}
.bars i.p{background:#8a6fb8}
.bars i.a{background:var(--sunny)}
.bars small{font-size:10.6px;color:var(--muted-2);font-family:var(--font-mono)}
.legend{display:flex;gap:14.4px;flex-wrap:wrap;margin-top:11.5px}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.legend i{width:9.6px;height:9.6px;border-radius:3px}
.donut{width:132px;height:132px;border-radius:50%;flex:none;position:relative}
.donut::after{content:"";position:absolute;inset:26px;border-radius:50%;background:#fff}
.hbar{display:flex;flex-direction:column;gap:11.5px}
.hbar__r{display:grid;grid-template-columns:110px minmax(0,1fr) 48px;gap:11.5px;align-items:center;font-size:12.5px}
.hbar__r .bar{height:9.6px}
.hbar__r b{text-align:right;font-family:var(--font-mono);font-size:12px}

/* ============================================================================
   Flow builder (settings)
   ============================================================================ */
.flow{display:flex;flex-direction:column;gap:0;align-items:flex-start}
.node{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-1);
  padding:12.5px 15.3px;min-width:264px;position:relative;
}
.node b{font-size:13.9px;font-weight:700;display:block}
.node small{display:block;color:var(--muted-2);font-size:11.5px;margin-top:3px}
.node--start{border-color:var(--pickup);background:var(--mist)}
.node--end{background:var(--plum);color:var(--oat);border-color:var(--plum)}
.node--end small{color:var(--nav)}
.connector{width:2px;height:19.2px;background:var(--line-2);margin-left:29.7px}
.branch{margin-left:29.7px;padding-left:23.1px;border-left:2px dashed var(--line-2);display:flex;flex-direction:column;gap:11.5px;margin-top:11.5px}
.branch__lbl{font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2)}
.flowcanvas{padding:17.3px 23.1px;overflow-y:auto}
.flowrow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:23.1px;align-items:start;width:100%}
.noderow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14.4px;width:100%}
.node--c{align-items:center;text-align:center}
.node--c b,.node--c small{text-align:center}
.node__h{display:flex;align-items:center;justify-content:space-between;gap:11.5px}
.node__h small{margin:0}
.tipbox{
  background:var(--amber);border-radius:var(--r-1);padding:13.4px;
  font-size:13px;color:var(--warn);margin-top:17.3px;
}
.tipbox b{font-weight:700}
.toggle{
  width:36.5px;height:21.1px;border-radius:var(--r-pill);background:var(--line-2);
  position:relative;flex:none;transition:background .15s;
}
.toggle::after{
  content:"";position:absolute;top:2.4px;left:2.4px;width:16.3px;height:16.3px;
  border-radius:50%;background:#fff;transition:transform .15s;
}
/* This block is the one that wins — it comes later than the other .toggle
   definition, so its geometry is what is on screen. Both state markers are
   honoured here because the two halves of the app disagree about which one
   they set: the router writes aria-pressed, and screens that predate it write
   is-on. Keying only one of them left the knob sitting still. */
.toggle.is-on,.toggle[aria-pressed="true"]{background:var(--pickup)}
.toggle.is-on::after,.toggle[aria-pressed="true"]::after{transform:translateX(15.4px)}
.avmini{display:inline-flex;align-items:center;gap:5px;background:var(--mist);color:var(--deep);
  border-radius:var(--r-pill);padding:2px 8px;font-size:12px;font-weight:700}
.avmini i{width:15.4px;height:15.4px;border-radius:50%;background:var(--sunny);color:var(--plum);
  display:grid;place-items:center;font-size:7.7px;font-style:normal;font-weight:800}

/* ============================================================================
   Mobile frames (screen 13)
   ============================================================================ */
.phones{display:flex;gap:34.6px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.phone{
  width:264px;background:var(--plum);border-radius:33.3px;padding:9.6px;
  box-shadow:var(--shadow-2);flex:none;
}
.phone__s{background:#fff;border-radius:25.6px;overflow:hidden;height:558px;display:flex;flex-direction:column}
.phone__bar{height:29.7px;display:flex;align-items:center;justify-content:center;flex:none}
.phone__bar i{width:69.1px;height:5.8px;border-radius:3px;background:rgba(255,255,255,.35)}
.phone__body{flex:1;overflow:hidden;padding:0}
.phone__nav{display:flex;justify-content:space-around;padding:9.6px 0;border-top:1px solid var(--line)}
.phone__top{flex:1;overflow:hidden;padding:14.1px}
.pstat{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 14.1px 4px;font-size:12px;font-weight:700;flex:none;
}
.pstat span{letter-spacing:.06em;font-size:10.6px}
.phone__nav{font-size:10.6px;font-weight:700;color:var(--muted-2)}
.phone__nav b{color:var(--ink)}
.phone + .mcap,.mcap{text-align:center;font-family:var(--font-display);font-weight:800;font-size:16.3px;margin-top:17.3px}
.mstat{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.mstat + b{font-family:var(--font-display);font-size:23px;font-weight:800;display:block;margin-top:2px}
.mcard{
  background:var(--paper);border:1px solid var(--line);border-radius:11.4px;
  padding:8px 11.5px;font-size:12.5px;margin-top:8px;line-height:1.45;
}
.mlist>*{
  display:flex;gap:8px;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;
}
.mlist>*:last-child{border-bottom:0}
.mlist .m{flex:1;min-width:0}
.mlist b{display:block;font-size:13px;font-weight:700}
.mlist .m span{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlist time{color:var(--muted-2);font-size:10.6px}
.mlist .av{width:24px;height:24px;font-size:9.6px}
.mphone-head{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:12.5px 14.1px;border-bottom:1px solid var(--line)}
.mphone-head .mono{color:var(--muted-2)}

/* ============================================================================
   UI kit (screen 14)
   ============================================================================ */
.kitgrid{display:grid;gap:14.4px}
.kitbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-1);padding:17.7px}
.kitbox h4{
  font-family:var(--font-display);font-size:16.3px;font-weight:800;
  color:var(--ink);margin-bottom:12.5px;letter-spacing:0;
}
.stack{display:flex;flex-direction:column;gap:14.4px}
.iconrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11.5px}
.iconrow span{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:10.6px;color:var(--muted-2);border:1px solid var(--line);
  border-radius:11.4px;padding:11.5px 6px;
}
.iconrow svg{width:16px;height:16px;color:var(--ink)}
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11.5px}
.swatch{border-radius:11.4px;overflow:hidden;border:1px solid var(--line)}
.swatch i{display:block;height:52.8px}
.swatch b{display:block;padding:8px 9.6px;font-size:11.5px}
.swatch small{display:block;padding:0 9.6px 9.6px;font-family:var(--font-mono);font-size:10.6px;color:var(--muted-2)}
.btn--celebrate{background:var(--sunny);color:var(--plum)}
.btn--end{background:var(--coral);color:#fff}
.rbox{
  display:inline-flex;align-items:center;justify-content:center;background:var(--paper);
  border:1px solid var(--line);font-family:var(--font-mono);font-size:11.5px;
  color:var(--muted);width:61px;height:44.2px;
}
.rbox--1{border-radius:12px} .rbox--2{border-radius:16px}
.rbox--3{border-radius:20px} .rbox--4{border-radius:26px}
.rbox--p{border-radius:999px;width:100px}
.kitline{display:flex;align-items:center;gap:17.3px;flex-wrap:wrap;font-size:13.4px;color:var(--muted)}
.selcard{border:2px solid var(--pickup);background:var(--mist);border-radius:var(--r-1);padding:11.5px 15.3px;font-size:13.4px}
.emptycard{border:1px dashed var(--line-2);border-radius:var(--r-1);padding:17.3px;text-align:center;color:var(--muted-2);font-size:13px}
.kv{display:flex;justify-content:space-between;gap:14px;font-size:13.4px;padding:7.5px 0}
.kv dt{color:var(--muted-2)}
.kv dd{margin:0;font-weight:600;text-align:right}
.note{background:var(--mist);border-radius:var(--r-1);padding:11.5px 14.1px;font-size:12.5px;color:var(--deep)}
.warnbox{background:var(--bad-soft);border-radius:var(--r-1);padding:11.5px 14.1px;font-size:12.5px;color:var(--bad)}
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs a{padding:0 0 11.5px;font-size:13.4px;font-weight:600;color:var(--muted-2);border-bottom:2px solid transparent}
.tabs a.is-on{color:var(--ink);border-bottom-color:var(--plum)}
.avatar-lg{width:57.6px;height:57.6px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:19.2px;color:var(--plum);background:var(--amber);flex:none}
.empty{text-align:center;padding:40px 20px;color:var(--muted-2)}
.empty b{display:block;color:var(--ink);font-family:var(--font-display);font-size:16.3px;margin-bottom:6px}
.bar{height:7px;border-radius:var(--r-pill);background:var(--sand);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--pickup)}
.spark{display:flex;align-items:flex-end;gap:6px;height:52px}
.spark i{flex:1;background:var(--mist);border-radius:4px 4px 0 0;min-height:4px}
.spark i.is-on{background:var(--pickup)}

/* ============================================================================
   Responsive — the deck's canvas is 1440; below that we fold the sidebar and
   let dense grids collapse so nothing ever scrolls sideways.
   ============================================================================ */
@media (max-width:1180px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--pad:16px;--side:0px}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{
    position:fixed;left:0;top:0;width:264px;z-index:60;
    transform:translateX(-100%);transition:transform .2s ease;
  }
  .side.is-open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(42,30,58,.44);z-index:50}
  .scrim[hidden]{display:none}
  .burger{display:grid!important}
  .grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .topbar__search{width:auto;flex:1;min-width:0}
  .topbar__search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .status span{display:none}
}
@media (max-width:620px){
  .grid--4{grid-template-columns:minmax(0,1fr)}
  .view__head{flex-direction:column;align-items:stretch}
  .view__acts{margin-left:0}
  .topbar{gap:8px}
  .hide-sm{display:none!important}
}
.burger{
  display:none;width:34.6px;height:34.6px;border-radius:var(--r-1);
  place-items:center;border:1px solid var(--line);flex:none;
}

/* ============================================================================
   Command palette + popover menus
   ============================================================================ */
.pal{
  position:fixed;inset:0;z-index:80;background:rgba(42,30,58,.34);
  display:flex;justify-content:center;align-items:flex-start;padding:88px 16px 16px;
}
.pal[hidden]{display:none}
.pal__box{
  width:min(560px,100%);background:#fff;border-radius:var(--r-2);
  box-shadow:var(--shadow-2);overflow:hidden;
}
.pal__field{
  display:flex;align-items:center;gap:11.5px;padding:14.1px 17.7px;
  border-bottom:1px solid var(--line);color:var(--muted-2);
}
.pal__field input{flex:1;border:0;outline:0;font:inherit;font-size:15.4px;color:var(--ink);background:none}
.pal__list{max-height:340px;overflow:auto;padding:6px}
.pal__list button{
  width:100%;display:flex;align-items:center;gap:11.5px;
  padding:10.5px 12.8px;border-radius:var(--r-1);
  font-size:13.9px;font-weight:600;text-align:left;color:var(--ink);
}
.pal__list button svg{margin-left:auto;color:var(--muted-2)}
.pal__list button:hover{background:var(--paper)}
.pal__none{padding:16px;color:var(--muted-2);font-size:13.4px;text-align:center}

.menu{
  position:fixed;z-index:90;min-width:236px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-2);
  box-shadow:var(--shadow-2);padding:6px;overflow:hidden;
}
.menu button{
  width:100%;display:flex;align-items:center;gap:10.5px;
  padding:9.6px 11.5px;border-radius:var(--r-1);text-align:left;
  font-size:13.4px;font-weight:600;color:var(--ink);
}
.menu button:hover{background:var(--paper)}
.menu button.is-on{background:var(--mist);color:var(--deep)}
.menu button small{display:block;font-weight:400;font-size:11.5px;color:var(--muted-2)}
.menu button svg:last-child{margin-left:auto;color:var(--deep)}
.menu__foot{
  border-top:1px solid var(--line);margin-top:6px;padding-top:11.5px!important;
  color:var(--deep)!important;
}


/* ============================================================================
   Account menu (real session from /api/auth/me)
   ============================================================================ */
/* Pinned to the rail's own 15.4px gutters rather than sized off --side. That coupling
   was fine while every width's --side was a real column width, and wrong as soon as one
   width set --side:0px: calc(0px - 30.8px) is a negative width, and what a browser makes
   of it is the padding — a 16px-wide menu, measured, inside a 264px drawer. The two
   forms agree at every other width (215px rail: 184.2px either way). */
.acct{
  position:absolute;left:15.4px;right:15.4px;bottom:76px;
  background:#fff;border-radius:var(--r-2);
  box-shadow:var(--shadow-2);padding:8px;z-index:45;
}
.acct[hidden]{display:none}
.acct__head{padding:8px 10px 11px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct__head b{display:block;font-size:13.4px}
.acct__head span{display:block;font-size:11.4px;color:var(--muted);margin-top:3px;word-break:break-all;line-height:1.35}
.acct__item{
  display:block;width:100%;padding:9px 10px;border-radius:var(--r-1);
  font-size:13.4px;font-weight:600;color:var(--ink);text-align:left;
}
.acct__item:hover{background:var(--paper)}
.acct__item--bad{color:var(--bad)}
/* Same reason as .nav-item[hidden]: .acct__item sets display:block, which outranks the
   user agent's [hidden] rule. This is what keeps the operator console out of a
   customer's menu rather than merely marked hidden. */
.acct__item[hidden]{display:none}

/* ============================================================================
   Empty states — what a real customer sees before they have any data
   ============================================================================ */
.ky-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:44px 24px;gap:5px;
}
.ky-empty__mark{
  width:46px;height:46px;border-radius:var(--r-2);
  background:var(--mist);color:var(--deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:9px;
}
.ky-empty__mark svg{width:20px;height:20px}
.ky-empty h3{font-family:var(--font-display);font-size:16.4px;font-weight:700;color:var(--ink)}
.ky-empty p{font-size:13.4px;color:var(--muted);max-width:40ch;line-height:1.5}
.ky-empty__acts{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap;justify-content:center}
.ky-empty__hint{font-size:11.6px;color:var(--muted-2);margin-top:9px}
.ky-emptyrow td{padding:32px 12px;text-align:center;color:var(--muted);font-size:13.4px;line-height:1.5}
.ky-emptyrow b{display:block;color:var(--ink);font-family:var(--font-display);font-size:14.4px;margin-bottom:3px}

/* ============================================================================
   Account area (profile, business, security, API keys)
   ============================================================================ */
.acc{max-width:940px}
.acc__head{margin-bottom:20px}
.acc__head h2{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.01em}
.acc__head p{font-size:13.8px;color:var(--muted);margin-top:5px}
.acc__tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.acc__tab{
  padding:9px 14px;font-size:13.4px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;white-space:nowrap;
}
.acc__tab:hover{color:var(--ink)}
.acc__tab.is-on{color:var(--deep);border-bottom-color:var(--pickup)}
.acc__pane[hidden]{display:none}
.acc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.acc__grid{grid-template-columns:minmax(0,1fr)}}
.acc__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-2);padding:20px}
.acc__card--wide{grid-column:1/-1}
.acc__card h3{font-family:var(--font-display);font-size:15.4px;font-weight:700;margin-bottom:3px}
.acc__card > p.sub{font-size:12.6px;color:var(--muted);margin-bottom:15px;line-height:1.5}
.acc__rows{display:flex;flex-direction:column;gap:13px}
.acc__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13.4px}
.acc__row:last-child{border-bottom:0}
.acc__row b{font-weight:600}
.acc__row small{display:block;color:var(--muted);font-size:11.8px;margin-top:2px}
.acc__acts{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap;align-items:center}
.acc__msg{margin-top:13px}
/* The logo card: the picture on the left, the way to change it on the right, and the
   two stack at a phone width because the frame is fixed and the form is not. */
.acc__logo{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.acc__logo__frame{flex:none;width:132px;height:74px;border:1px solid var(--line);
  border-radius:var(--r-2);display:grid;place-items:center;overflow:hidden;background:#fff}
.acc__logo__frame[data-empty]{border-style:dashed}
.acc__logo__img{width:100%;height:100%;object-fit:contain;display:block}
.acc__logo__initials{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--muted)}
.acc__logo__form{flex:1 1 240px;min-width:0}
.acc__foot{font-size:11.8px;color:var(--muted-2);margin-top:14px;line-height:1.55}
.acc__key{
  font-family:var(--font-mono);font-size:12.4px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-1);padding:11px 12px;
  word-break:break-all;display:block;margin-top:6px;color:var(--ink);
}
.acc__pill{display:inline-flex;align-items:center;gap:5px;font-size:11.4px;font-weight:600;
  padding:3px 8px;border-radius:var(--r-pill);background:var(--mist);color:var(--deep)}
.acc__pill--off{background:var(--sand);color:var(--muted)}
.acc__label{display:block;font-size:12.4px;font-weight:600;color:var(--ink);margin-bottom:6px}
.acc__hint{display:block;font-size:11.4px;color:var(--muted-2);margin-top:6px}

/* Inline messages inside the account area (mirrors the auth pages) */
.a-msg{margin-top:13px;padding:10px 13px;border-radius:var(--r-1);font-size:12.8px;line-height:1.5}
.a-msg--ok{background:var(--mist);color:var(--deep)}
.a-msg--err{background:var(--blush);color:#8a2b1d}
.a-msg--info{background:var(--sand);color:var(--muted)}
.a-msg b{display:block;margin-bottom:5px}
.a-msg .acc__key{margin-top:8px}

/* ============================================================================
   Mobile hardening
   Nothing in the user area may push the page sideways: long emails, key
   prefixes, device strings and unbroken endpoint paths all have to wrap.
   ============================================================================ */
.acc{width:100%}
.acc__head h2,.acc__head p{overflow-wrap:anywhere}
.acc__tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.acc__tabs::-webkit-scrollbar{height:0}
.acc__tab{flex:none;white-space:nowrap}
.acc__card{overflow-wrap:anywhere}
.acc__rows{min-width:0}
.acc__row{flex-wrap:wrap;align-items:flex-start}
.acc__row > *{min-width:0;overflow-wrap:anywhere}
.acc__row > :last-child{margin-left:auto;text-align:right}
.acc__key,.acc__msg,.a-msg{max-width:100%;overflow-wrap:anywhere}
.acc input,.acc select,.acc textarea,
.quickadd input,.quickadd select,
.tlform input,.tlform select{min-width:0;max-width:100%}
.prof__head h2,.prof__head p,.tl__body b,.tl__body span,.dealcard b{overflow-wrap:anywhere}

@media (max-width:620px){
  .acc__card{padding:15px}
  .acc__row{flex-direction:column;gap:2px}
  .acc__row > :last-child{margin-left:0;text-align:left}
  .acc__acts{gap:7px}
  .acc__acts .btn{flex:1 1 auto;justify-content:center}
  .prof__head h2{font-size:19px}
  .prof__acts{margin-left:0;width:100%}
  .tlform .field{min-width:100%}
  .tlform .select{width:100%}
  .quickadd__grid{grid-template-columns:minmax(0,1fr)}
  .quickadd{padding:14px}
  .board{grid-auto-columns:minmax(210px,1fr)}
  .topbar{gap:6px}
  .topbar__title{font-size:17.5px}
  .topbar__jump{flex:1;min-width:0}
  .toolbar{flex-wrap:wrap}
  .seg{flex-wrap:wrap}
}

@media (max-width:760px){
  /* wide data tables scroll inside their card instead of squashing the page */
  .tablecard .tbl{min-width:640px}
}

/* ============================================================================
   CRM — deal pipeline board and quick-add forms
   ============================================================================ */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(238px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.board__col{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);padding:12px;min-height:130px}
.board__head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11.6px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.board__head b{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 7px;font-size:10.6px;color:var(--ink)}
.board__sum{font-family:var(--font-mono);font-size:10.6px;color:var(--muted-2);text-transform:none;letter-spacing:0}
.dealcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-1);padding:11px 12px;margin-bottom:9px}
.dealcard b{display:block;font-size:13.4px;font-weight:600;color:var(--ink)}
.dealcard span{display:block;font-size:11.6px;color:var(--muted);margin-top:4px}
.dealcard em{display:block;font-family:var(--font-mono);font-size:12.4px;color:var(--deep);margin-top:8px;font-style:normal}
.quickadd{border:1px solid var(--line);background:#fff;border-radius:var(--r-2);padding:16px;margin-bottom:14px}
.quickadd h3{font-family:var(--font-display);font-size:14.4px;font-weight:700;margin-bottom:12px}
.quickadd__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:12px}
.quickadd[hidden]{display:none}

/* contact profile + activity timeline */
.prof{display:grid;gap:17px}
.prof__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prof__head h2{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.01em}
.prof__head p{color:var(--muted);font-size:13px;margin-top:2px}
.prof__acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.prof__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(285px,100%),1fr));gap:16px;align-items:start}
.timeline{display:grid;gap:2px}
.tl{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.tl:last-child{border-bottom:0}
.tl__kind{flex:none;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;
  background:var(--mist);color:var(--deep);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.tl__body{min-width:0}
.tl__body b{display:block;font-size:13.4px;font-weight:600}
.tl__body span{display:block;font-size:12.4px;color:var(--muted);margin-top:3px;line-height:1.5}
.tl__when{flex:none;font-family:var(--font-mono);font-size:11px;color:var(--muted-2);margin-left:auto;padding-left:10px}
.tlform{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.tlform .field{flex:1;min-width:170px}
.tlform .select{flex:none;width:120px}

/* moving a deal between stages */
.dealcard{cursor:pointer}
.dealcard__moves{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.dealcard__moves button{font-size:10.6px;padding:3px 8px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.dealcard__moves button:hover{border-color:var(--deep);color:var(--deep)}
.dealcard__moves button[disabled]{opacity:.45;cursor:default}

/* ------------------------------------------- record editor, custom, tasks */
.editor{border:1px solid var(--line);background:#fff;border-radius:var(--r-2);padding:20px}
.quickadd .editor{border:0;padding:0;background:none}
.editor__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.editor__head h2{margin:0;font-size:19px}
.editor__acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.editgroup{margin:0 0 18px;min-width:0}
.editgroup:last-of-type{margin-bottom:6px}
.editgroup__t{margin:0 0 8px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.field--wide{grid-column:1/-1}
.field--check{display:flex;flex-direction:row;align-items:center;gap:8px}
.field--check .acc__hint{margin:0}
.field--tight{max-width:190px}
.acc__label--gap{margin-top:16px}
.acc__note{margin:4px 0 0;font-size:14px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.customrows{display:flex;flex-direction:column;gap:8px}
.customrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.customrow .input{flex:1 1 170px;min-width:0}
.customrow .input--key{flex:0 1 220px}
.tasklist{display:flex;flex-direction:column;margin-bottom:14px}
.taskitem{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);min-width:0}
.taskitem:last-child{border-bottom:0}
.taskitem__box{margin:3px 0 0;flex:0 0 auto}
.taskitem__body{display:flex;flex-direction:column;flex:1;min-width:0}
.taskitem__body b{font-weight:600;overflow-wrap:anywhere}
.taskitem__body small{color:var(--muted);font-size:12.5px}
.taskitem--done .taskitem__body b{text-decoration:line-through;color:var(--muted)}
.taskitem .btn{flex:0 0 auto}
.taskform{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.taskform .field{flex:1 1 210px;min-width:0}
.taskform .btn{flex:0 0 auto}
@media (max-width:620px){
  .editor{padding:15px}
  .editor__acts{margin-left:0;width:100%}
  .editor__acts .btn{flex:1 1 auto}
  .customrow .input,.customrow .input--key{flex:1 1 100%}
  .taskform .field,.taskform .btn{flex:1 1 100%}
  .field--tight{max-width:none}
}

/* ------------------------------------------------------------- helpdesk */
.hd{display:flex;flex-direction:column;gap:16px;min-width:0}
.hd__head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;min-width:0}
.hd__title{min-width:0}
.hd__title h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:21.1px;overflow-wrap:anywhere}
.hd__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.hd__acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.hd__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;min-width:0}
.hd__main,.hd__side{display:flex;flex-direction:column;gap:14px;min-width:0}
.hd-id{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--muted)}
.hd-sub{display:block;font-weight:600;overflow-wrap:anywhere}
.hd-sub__who{display:block;color:var(--muted);font-size:12.5px;margin-top:3px;overflow-wrap:anywhere}
.hd-dim{color:var(--muted);font-size:12.5px}
.hd-count{display:inline-block;margin-left:7px;font-size:11.5px;font-weight:700;color:var(--muted)}
.hdthread{display:flex;flex-direction:column;gap:12px;min-width:0}
.hmsg{border:1px solid var(--line);border-radius:var(--r-1);padding:12px 14px;background:#fff;min-width:0}
.hmsg--out{background:var(--mist);border-color:transparent}
.hmsg--note{background:var(--sunny);border-color:transparent}
.hmsg__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.hmsg__head b{font-size:13.4px}
.hmsg__kind{font-size:11.5px;font-weight:600;color:var(--muted)}
.hmsg__when{margin-left:auto;font-size:11.5px;color:var(--muted-2)}
.hmsg__body{font-size:13.6px;line-height:1.6;overflow-wrap:anywhere}
.hdcomposer,.hdnew,.hdreplies{border:1px solid var(--line);background:#fff;border-radius:var(--r-2);padding:16px;margin-bottom:14px}
.hdcomposer{display:flex;flex-direction:column;gap:10px}
.hdcomposer__mode{align-self:flex-start}
.hdnew__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.hdnew__head h3{margin:0;font-size:17px}
.hdnew__head .btn{margin-left:auto}
.hdnew__mode{margin-bottom:12px}
.hdnew__form .acc__acts{margin-top:12px}
.hdprops{display:flex;flex-direction:column;gap:9px}
.hdreplies__list{margin-bottom:12px}
.hdreplies__body{flex:1;min-width:0;color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.hdreplies__form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.hdreplies__form .field{flex:1 1 170px;min-width:0}
.hd-name{margin:2px 0 9px;font-weight:700;font-size:15px}
.select--sm{padding:5px 8px;font-size:12.5px}
@media (max-width:900px){.hd__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){
  .hd__acts{margin-left:0;width:100%}
  .hd__acts .btn{flex:1 1 auto}
  .hdcomposer,.hdnew,.hdreplies{padding:13px}
  .hdreplies__form .field{flex:1 1 100%}
  .hdnew__head{flex-wrap:wrap}
}

/* ==========================================================================
   Phone shell — implements Kylosys-Mobile-App.pdf
   Breakpoints: <768 phone · 768–1099 tablet · >=1100 desktop.
   Rules: 16px page gutter, cards 12–14px padding, tap targets >= 44x44 with
   8px between them, body text 14–15px, inputs 16px, safe-area aware tab bar,
   no horizontal page scroll (chip rows scroll instead).
   ========================================================================== */
.tabbar,.fab,.chiprow,.cardlist,.sheetwrap,.searchscreen{display:none}

/* --- tablet: icon-only sidebar -------------------------------------------
   This is the 72px strip at 981–1099px and nothing else. It used to be a bare
   max-width:1099 block, which also caught every width below 981 — where .side is not a
   rail at all but the 264px off-canvas drawer from the 980px block above. There the
   icon-only rules hid every name (.nav-item{font-size:0}), the section labels, the
   business chip and the signed-in user, and drew the 1671x420 wordmark at 32x33 because
   it set a width while the base rule's height:33px stayed. The drawer now keeps the full
   navigation, exactly as the desktop rail and the admin console's own drawer do. */
@media (min-width:981px) and (max-width:1099px){
  :root{--side:72px}
  .side{padding-left:0;padding-right:0;align-items:center}
  /* A 72px column cannot hold a 1671x420 wordmark, and squashing one into it is what
     this rule used to do: hence the square app icon, the same asset the homepage's
     final call to action shows as .tile. Written with two classes so it outweighs
     .side__brand img above. */
  .side__brand{padding:23px 0 0;display:flex;justify-content:center}
  .side__brand-word{display:none}
  .side__brand img.side__brand-mark{display:block;width:32px;height:32px}
  .side__biz,.side__me .who,.side__label{display:none}
  .side__nav{width:100%}
  .nav-item{font-size:0;justify-content:center;padding:13px 0;gap:0}
  .nav-item svg{width:19px;height:19px}
  .nav-item .n-badge{font-size:10px;position:absolute;right:22px}
  .side__me{justify-content:center}
}

/* --- phone --------------------------------------------------------------- */
@media (max-width:767px){
  :root{--pad:16px;--topbar:auto}
  .app{grid-template-columns:minmax(0,1fr)}
  /* The sidebar must not be display:none here. The burger stays visible on
     phones (its !important rule beats the .burger{display:none} below), so
     hiding the sidebar left the button tappable but revealing nothing. Not
     setting display here lets the base .side rule and the off-canvas drawer
     from the 980px block apply all the way down. */
  .main{min-height:100vh;padding-bottom:calc(70px + env(safe-area-inset-bottom))}

  /* top app bar: avatar (More) or back · one-line 24px title · max 2 icons */
  .topbar{gap:10px;padding:11px 16px}
  .burger{display:none}
  .topbar__title{font-size:24px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar__jump{flex:1;min-width:0}
  .topbar__jump .kbd{display:none}
  .topbar__search{width:44px;height:44px;justify-content:center;padding:0;flex:none}
  .topbar__search span{display:none}
  #newBtn,.topbar__bell{display:none}
  .topbar__me{width:44px;height:44px}

  /* one screen at a time */
  .view{padding:16px 16px 24px}
  .view--flush{padding:0;height:auto;overflow:visible}
  .split,.split--2,.split--inbox,.split--live,.split--phone{grid-template-columns:minmax(0,1fr);height:auto}
  /* the designed markup carries inline column widths (e.g. the tickets rail);
     on a phone those must not survive or the body is squeezed into a column */
  #views .split,#views .split--2,#views .split--inbox,#views .split--live,
  #views .split--phone{grid-template-columns:minmax(0,1fr)!important;height:auto!important}
  #views .pane{padding:14px 16px 0!important}
  .pane{overflow:visible;border:0}
  .pane--side,.pane--plain,.pane--list{border:0;background:none}
  #view-tickets .pane{padding:14px 16px 0!important}
  #view-ticket [data-module="ticket"]{padding:14px 16px 0!important}
  /* body text is never under 12px on a phone */
  .acc__hint,.acc__note,.hd-sub__who,.hd-dim,.mini dt,.mini dd,.sheet__hint,
  .sres__r small,.acc__row .acc__label{font-size:12.5px}

  /* views/teams rail becomes chips above the list */
  .frail{display:none}
  .chiprow{display:flex;overflow-x:auto;gap:8px;padding:0 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chiprow::-webkit-scrollbar{display:none}
  .chiprow button{flex:none;min-height:44px;padding:0 14px;border-radius:999px;background:var(--sand);
    color:var(--ink);font-weight:600;font-size:13.5px;white-space:nowrap;display:inline-flex;
    align-items:center;gap:7px;border:1px solid transparent}
  .chiprow button.is-on{background:var(--plum);color:var(--oat)}
  .chiprow .hd-count{margin:0;color:inherit;opacity:.72}

  /* tables become cards: title, subtitle, 1–2 chips, time on the right */
  .tablecard{display:none}
  .cardlist{display:flex;flex-direction:column;gap:10px;padding-bottom:16px}
  .card{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;background:#fff;
    border:1px solid var(--line);border-radius:var(--r-1);padding:13px 14px;min-height:44px;
    font:inherit;color:var(--ink);cursor:pointer}
  .card__top{display:flex;align-items:flex-start;gap:10px}
  .card__title{flex:1;min-width:0;font-weight:700;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
  .card__time{flex:none;font-size:12px;color:var(--muted);white-space:nowrap}
  .card__sub{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
  .card__chips{display:flex;flex-wrap:wrap;gap:6px}
  .card--empty{color:var(--muted);font-size:13.5px;cursor:default;background:var(--paper)}

  /* one filter button instead of a toolbar of them */
  #view-tickets .toolbar{flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none}
  #view-tickets .toolbar::-webkit-scrollbar{display:none}
  #view-tickets .toolbar h2{font-size:19px;white-space:nowrap}
  #view-tickets .toolbar .spacer{margin-left:auto}
  #view-tickets .toolbar .btn--ghost{display:none}
  #view-tickets .toolbar .btn--primary{display:none}
  #view-tickets .toolbar .filterbtn{display:none}
  #view-tickets .toolbar .filterbtn{display:inline-flex}
  #view-tickets .toolbar .input{width:auto;flex:1;min-width:0;height:44px}
  /* anything else that would push the page sideways scrolls or wraps instead */
  .view__acts,.acc__acts,.hd__acts{flex-wrap:wrap;gap:8px}
  .view__acts .btn,.acc__acts .btn,.hd__acts .btn{max-width:100%;min-width:0}
  .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar .btn,.toolbar .seg,.toolbar .input{flex:none}
  .seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none}
  /* the pipeline becomes stage chips, one stage of cards at a time */
  .board{display:none}
  .chiprow--stages,.chiprow--profile{margin:0 0 12px}
  #view-contact .chiprow--profile{margin:0 -16px 12px;padding:0 16px}
  .chiprow button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .chiprow button.is-quiet{opacity:.55}
  #views [hidden]{display:none!important}

  /* sheets */
  .sheetwrap{display:block;position:fixed;inset:0;z-index:60;background:rgba(42,30,58,.42)}
  .sheetwrap[hidden]{display:none}
  .sheet{position:absolute;inset:auto 0 0;background:#fff;border-radius:20px 20px 0 0;max-height:88vh;
    overflow-y:auto;padding:10px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(42,30,58,.22)}
  .sheet__grip{width:40px;height:4px;border-radius:99px;background:var(--line);margin:2px auto 12px}
  .sheet__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
  .sheet__head h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:20px}
  .sheet__x{margin-left:auto;min-height:44px;padding:0 4px;background:none;border:0;color:var(--muted);
    font-weight:600;font-size:14px}
  .sheet__who{display:flex;align-items:center;gap:11px;padding:8px 0 12px;border-bottom:1px solid var(--line)}
  .sheet__who b{display:block;font-size:15px}
  .sheet__who small{color:var(--muted);font-size:12.5px}
  .sheet__group{margin:16px 0 4px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted-2);font-weight:700}
  .sheet__row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 2px;
    border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:15px;
    text-align:left;color:var(--ink);text-decoration:none}
  .sheet__row:last-child{border-bottom:0}
  .sheet__row>svg:first-child{width:18px;height:18px;color:var(--muted);flex:none}
  .sheet__row span{flex:1;min-width:0}
  .sheet__hint{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
  .sheet__chev{width:14px;height:14px;color:var(--muted-2);flex:none}
  .sheet__out{margin-top:8px}
  .sheet__row--out{color:var(--bad);justify-content:center}
  .sheet .hd__side{display:flex;flex-direction:column;gap:14px}
  .sheet__acts{display:flex;gap:10px;margin-top:18px}
  .sheet__acts .btn{flex:1}
  .sheet .chips{padding:0 0 4px}
  .taskquick{display:flex;flex-direction:column;gap:10px}

  /* full-screen search */
  .searchscreen{display:block;position:fixed;inset:0;z-index:60;background:#fff;overflow-y:auto;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom))}
  .searchscreen[hidden]{display:none}
  .searchbar{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding-bottom:6px}
  .searchbar input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;min-height:44px}
  .sres__g{margin:16px 0 2px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted-2);font-weight:700}
  .sres__r{display:block;width:100%;text-align:left;min-height:48px;padding:11px 0;background:none;
    border:0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:inherit}
  .sres__r b{display:block;font-size:14.5px;overflow-wrap:anywhere}
  .sres__r small{color:var(--muted);font-size:12.5px}

  /* one floating + button */
  .fab{display:flex;position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));
    width:54px;height:54px;border-radius:50%;background:var(--plum);color:var(--oat);border:0;
    align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(42,30,58,.3);z-index:40}

  /* bottom tab bar, always visible, safe-area aware */
  .tabbar{display:flex;position:fixed;inset:auto 0 0;z-index:45;background:#fff;
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:48px;background:none;border:0;font:inherit;font-size:10.5px;font-weight:600;
    color:var(--muted);text-decoration:none;position:relative;padding:0}
  .tabbar a.is-on,.tabbar button.is-on{color:var(--plum)}
  .tabbar a svg,.tabbar button svg{width:21px;height:21px}
  .tabbar .n-badge{position:absolute;top:2px;left:50%;margin-left:4px;height:16px;min-width:16px;
    padding:0 5px;border-radius:999px;background:var(--pickup);color:#fff;font-size:9.5px;
    font-weight:700;display:inline-flex;align-items:center;justify-content:center}

  /* ticket screen: sticky reply box, details in a sheet */
  .hdcomposer{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:20;
    margin-bottom:12px;box-shadow:0 -8px 22px rgba(42,30,58,.10)}
  .hd__grid{grid-template-columns:minmax(0,1fr)}
  .hd__side{display:none}
  .hd__acts{width:100%;margin-left:0}
  .hd__acts .btn{flex:1 1 auto}
  .hmsg{padding:11px 12px}
  .hdthread{gap:10px}

  /* touch and type */
  .btn{min-height:44px}
  .btn--sm{min-height:42px}
  .input,.select,textarea,input[type="search"],input[type="email"],input[type="date"]{font-size:16px}
  .input,.select{min-height:44px}
  .field{gap:6px}
  h1,h2,h3{overflow-wrap:anywhere}
  .ky-empty{padding:26px 16px}
}

/* quick feedback after an action, with undo */
.toast{position:fixed;left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:70;
  display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--oat);border-radius:14px;
  padding:13px 16px;min-height:48px;box-shadow:0 12px 30px rgba(42,30,58,.3);opacity:0;
  transform:translateY(8px);transition:opacity .18s,transform .18s;font-size:14px}
.toast[hidden]{display:none}
.toast.is-on{opacity:1;transform:translateY(0)}
.toast span{flex:1;min-width:0}
.toast button{background:none;border:0;color:var(--sunny);font-weight:700;font-size:14px;min-height:44px;padding:0}
@media (min-width:768px){.toast{left:auto;right:24px;bottom:24px;max-width:340px}}

/* the + and tab bar must never cover a sheet or the search screen */
.sheet-open .tabbar,.sheet-open .fab{display:none}

/* an uploaded greeting: dashed while nothing is there, so an empty slot reads
   as optional rather than as something that failed to load */
.clip{margin-top:9px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-1);background:var(--paper)}
.clip__line{display:flex;flex-wrap:wrap;gap:3px 10px;align-items:baseline;font-size:13.4px}
.clip__line strong{color:var(--ink);overflow-wrap:anywhere}
.clip__meta{color:var(--muted-2);font-size:11.8px}
.clip__audio{display:block;width:100%;max-width:340px;height:34px;margin-top:10px}
.clip__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.clip__hint{margin:8px 0 0;font-size:11.4px;color:var(--muted-2);line-height:1.5}
/* Kept in the layout and merely made invisible, rather than given the hidden
   attribute: Safari on a phone will not open a file picker from a programmatic
   click on an input that is display:none, and this is the one input where that
   click has to work. */
.clip__file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;pointer-events:none;overflow:hidden}

/* ------------------------------------------------- settings pages, as a list */
/* One navigation in two forms: a list on a desktop rail, a dropdown on a phone.
   Exactly one of them is on screen — the list above 767px, the pick below it.
   A dropdown was chosen for the phone because a row of pills has to be swiped
   sideways there, and a page you cannot see all of is a page you do not use. That
   reasoning is about the phone: the rail is 205px wide and tall enough for all nine
   pages, so on a desktop a dropdown only hides eight of them behind a click. The id
   selector outranks the 767px rule that hides .frail. */
#settingsRail{display:flex}
#settingsRail .frail__list{display:flex;flex-direction:column;gap:2px}
#settingsRail .frail__pick{display:none}
#settingsRail .frail__pick-label{font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2)}
#settingsRail select{width:100%}
@media (max-width:767px){
  /* Stacked above the page on a phone, so the divider belongs underneath. */
  #settingsRail{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px;gap:10px}
  #settingsRail .frail__list{display:none}
  #settingsRail .frail__pick{display:flex;flex-direction:column;gap:6px}
}

/* -------------------------------------------------------- the centered popup
   The dashboard's Dial, New ticket and New contact buttons open one of these. It
   stays centered at every width rather than becoming a bottom sheet on a phone,
   because a centered popup is what was asked for; the card takes the width it is
   given and scrolls inside itself. z-index 65 puts it over the sidebar and the
   phone tab bar, and under the toast (70) and the menus (90).

   Both `[hidden]` rules are deliberate. This file sets `display` on both elements,
   and the user agent's own `[hidden]{display:none}` loses to any author rule — the
   trap that has caught this stylesheet before, most recently in the workspace. */
.popwrap{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(42,30,58,.44)}
.popwrap[hidden]{display:none}
.pop{position:relative;display:flex;flex-direction:column;width:min(560px,100%);
  max-height:min(86vh,760px);background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(42,30,58,.34);overflow:hidden}
.pop__head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.pop__head h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:18px}
.pop__x{margin-left:auto;min-height:36px;padding:0 6px;background:none;border:0;color:var(--muted);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pop__x:hover{color:var(--ink)}
.pop__body{padding:18px;overflow-y:auto}
body.pop-open{overflow:hidden}
body.pop-open .tabbar,body.pop-open .fab{display:none}

/* The dialer is drawn as a pane beside the call log, and helpdesk's form as a card in
   the ticket queue. In the popup each one is the whole of what you see, so the frame
   it wears in its own screen comes off. */
.pop__body .pane--dialer{width:100%;background:none;border:0;padding:0;gap:15px}
.pop__body .hdnew{border:0;background:none;padding:0;margin:0}
@media (max-width:767px){
  .popwrap{padding:12px}
  .pop__body{padding:15px}
}

/* ============================================================================
   Projects
   A board of columns that scrolls sideways, three other readings of the same
   cards, and the task screen. Two rules in here are deliberate and worth saying
   out loud:

     - `.pjcols` scrolls horizontally rather than wrapping. A board whose columns
       wrap is not a board: the whole point is that one column sits beside another
       so a card can be moved between them on sight.
     - The calendar is seven columns on a desktop and two on a phone, where the
       days of other months are hidden. Two columns of seven is not a calendar,
       and a month you cannot read is worse than a month you page through.

   Nothing here is a table, so nothing here is turned off below 760px by the rule
   that hides `.tablecard` - which is the trap the Numbers pane fell into.
   ========================================================================== */
.pjfind{display:flex;align-items:center;gap:6px;color:var(--muted)}
.pjfind .input{width:200px;height:34.6px}
.pjstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;margin-bottom:16px}
.pjstats[hidden]{display:none}
.pjstat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;display:flex;flex-direction:column;gap:2px}
.pjstat[role="button"]{cursor:pointer}
.pjstat[role="button"]:hover{border-color:var(--pickup)}
.pjstat__val{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.1}
.pjstat__label{font-size:12px;font-weight:600;color:var(--muted)}
.pjstat__hint{font-size:11.5px;color:var(--muted-2)}
.pjgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.pjtile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.pjtile__top{display:flex;align-items:center;gap:8px}
.pjtile__name{margin:0;font-family:var(--font-display);font-weight:800;font-size:15.5px;flex:1;min-width:0;overflow-wrap:anywhere}
.pjtile__meta{margin:0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.pjtile__foot{margin:0;display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.pjtile__acts{display:flex;gap:7px}
.pjdot{width:9px;height:9px;border-radius:50%;flex:none}
.pjcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;font-weight:700;color:var(--deep);background:var(--mist);padding:1.5px 6px;border-radius:6px;text-decoration:none;white-space:nowrap}
.pjlate{color:var(--coral);font-weight:700}
.pjblocked{color:#8a6fb8;font-weight:700}
.pjmuted{color:var(--muted-2);font-size:12px}

/* My work and a project's list are the same row in two places. */
.pjgroup{margin-bottom:18px}
.pjgroup__head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.pjgroup__head h3{margin:0;font-family:var(--font-display);font-size:14.5px;font-weight:800}
.pjgroup__count{background:var(--sand);border-radius:var(--r-pill);padding:1px 8px;font-size:12px;font-weight:700;color:var(--muted)}
.pjrows{display:flex;flex-direction:column;gap:6px}
.pjrow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 13px}
.pjrow__main{flex:1;min-width:0}
.pjrow__title{font-weight:600;font-size:13.6px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.pjrow__title:hover{text-decoration:underline}
.pjrow__meta{margin:2px 0 4px;font-size:12px;color:var(--muted)}
.pjrow__who{flex:none}
.pjcheck{width:22px;height:22px;flex:none;border-radius:7px;border:1.6px solid var(--line-2);background:#fff;color:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pjcheck[aria-pressed="true"]{background:var(--pickup);border-color:var(--pickup);color:#fff}
.pjcheck--lg{width:27px;height:27px;border-radius:9px}
.pjchip{display:inline-block;height:19px;line-height:19px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:700;color:var(--plum);margin:0 4px 4px 0}

/* One project. */
.pjhead__top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pjhead__top h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:21px;overflow-wrap:anywhere}
.pjhead__acts{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.pjhead__meta{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.6px;color:var(--muted)}
.pjhead__meta b{color:var(--ink);font-weight:600}
.pjhead__bar{margin-top:11px;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.pjhead__bar .bar{flex:1;min-width:120px;max-width:320px}
.pjhead__note{margin:10px 0 14px;font-size:13px;color:var(--muted);max-width:70ch}
.pjcols{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.pjcol{flex:0 0 268px;background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:10px}
.pjcol__head{display:flex;align-items:center;gap:6px;padding:2px 4px 8px}
.pjcol__name{margin:0;font-size:12.4px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.pjcol__count{font-size:11.5px;color:var(--muted-2)}
.pjcol__body{display:flex;flex-direction:column;gap:8px;min-height:26px;border-radius:11px}
.pjcol__body.is-over{outline:2px dashed var(--pickup);outline-offset:2px}
.pjcol__empty{margin:0;padding:8px 4px;font-size:12px;color:var(--muted-2)}
.pjcol__add{width:100%;margin-top:8px;background:none;border:0;text-align:left;padding:6px;font:inherit;font-size:12.4px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:9px}
.pjcol__add:hover{background:#fff;color:var(--ink)}
.pjcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 11px 9px;cursor:pointer}
.pjcard:hover{border-color:var(--line-2)}
.pjcard.is-dragging{opacity:.55}
.pjcard__cover{display:block;height:6px;border-radius:6px;margin:-4px 0 8px}
.pjcard__labels{margin-bottom:5px}
.pjcard h4{margin:0;font-size:13.4px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.pjcard__meta{margin:5px 0 0;font-size:11.6px;color:var(--muted)}
.pjcard__foot{display:flex;align-items:center;gap:6px;margin-top:8px}
.pjcard__spacer{margin-left:auto}
.pjpill{background:var(--sand);border-radius:var(--r-pill);padding:1px 7px;font-size:11px;font-weight:700;color:var(--muted)}
.pjpri--urgent{color:var(--coral)}
.pjpri--high{color:#b07d18}
.pjcard__moves{display:flex;gap:4px;margin-top:7px;opacity:.6}
.pjcard:hover .pjcard__moves,.pjcard:focus-within .pjcard__moves{opacity:1}
.pjmove{min-width:22px;height:22px;padding:0 5px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-size:13px;line-height:1;cursor:pointer}
.pjmove:hover{color:var(--ink);border-color:var(--line-2)}

/* The calendar is a month of days, each holding what is due on it. */
.pjcal__bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pjcal__head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;font-size:11.5px;font-weight:700;color:var(--muted-2);margin-bottom:4px}
.pjcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.pjcal__day{min-height:92px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:6px}
.pjcal__day.is-out{background:var(--paper)}
.pjcal__day.is-today{border-color:var(--pickup);box-shadow:0 0 0 2px var(--mist)}
.pjcal__num{font-size:11.5px;font-weight:700;color:var(--muted)}
.pjcal__task{display:block;margin-top:4px;font-size:11.4px;background:var(--mist);color:var(--deep);border-radius:7px;padding:3px 6px;text-decoration:none;overflow-wrap:anywhere}
.pjcal__task.is-done{background:var(--sand);color:var(--muted);text-decoration:line-through}
.pjcal__task.is-late{background:var(--blush);color:#8c2f22}
.pjcal__undated{margin-top:10px}

/* Workload: what each person is carrying. */
.pjload{display:flex;flex-direction:column;gap:9px}
.pjload__row{background:#fff;border:1px solid var(--line);border-radius:13px;padding:11px 14px;display:grid;grid-template-columns:200px minmax(80px,1fr);gap:8px 14px;align-items:center}
.pjload__who{display:flex;align-items:center;gap:8px;font-size:13.4px;min-width:0}
.pjload__nums{margin:0;grid-column:1/-1;font-size:12px;color:var(--muted)}

/* One task: what it is on the left, how it is set up on the right. */
.pjd{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:16px;align-items:start}
.pjd__main{min-width:0;display:flex;flex-direction:column;gap:14px}
.pjd__head{display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap}
.pjd__head h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:20.5px;line-height:1.25;flex:1;min-width:0;overflow-wrap:anywhere}
.pjd__head h2.is-done{text-decoration:line-through;color:var(--muted)}
.pjd__acts{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.pjd__meta{margin:0;font-size:12.4px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pjd__notes{margin:0;font-size:13.6px;color:var(--ink);white-space:pre-wrap;line-height:1.55}
.pjd__block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.pjd__blockhead{display:flex;align-items:center;gap:9px;margin:0 0 9px;flex-wrap:wrap}
.pjd__blockhead h3{margin:0;font-family:var(--font-display);font-size:14.4px;font-weight:800}
.pjd__blockhead .pjmuted,.pjd__blockhead .btn{margin-left:auto}
.pjd__side{display:flex;flex-direction:column;gap:12px;position:sticky;top:12px}
.pjd__side .field{margin-bottom:9px}
.pjsubs,.pjcomments,.pjtimes,.pjdeps{list-style:none;margin:0 0 9px;padding:0;display:flex;flex-direction:column;gap:5px}
.pjsub{display:flex;align-items:center;gap:8px;font-size:13.2px}
.pjsub>span{flex:1;min-width:0}
.pjsub.is-done>span{color:var(--muted);text-decoration:line-through}
.pjchecklist{border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin-bottom:9px}
.pjchecklist__head{display:flex;align-items:center;gap:8px;font-size:12.8px}
.pjchecklist__head b{overflow-wrap:anywhere}
.pjchecklist ul{list-style:none;margin:6px 0 0;padding:0}
.pjchecklist li{display:flex;align-items:center;gap:8px;font-size:13px;padding:3px 0}
.pjchecklist li span{flex:1;min-width:0}
.pjitem.is-done span{color:var(--muted);text-decoration:line-through}
.pjchecklist label{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.pjinline{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:8px}
.pjinline .input{flex:1;min-width:150px;height:33px}
.pjinline--tall{align-items:flex-start}
.pjinline--tall .input{width:100%}
.pjcomment{display:flex;gap:9px;font-size:13.2px}
.pjcomment__who{margin:0;font-size:12px;color:var(--muted)}
.pjcomment__body{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.pjdep{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.pjdep a{color:var(--deep);text-decoration:none}
.pjdep.is-done a{color:var(--muted);text-decoration:line-through}
.pjtime{font-size:12.8px;color:var(--muted)}
.pjtime b{color:var(--ink)}
.pjfeed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pjfeed__item p{margin:0;font-size:13px}
.pjfeed__item time{font-size:11.4px;color:var(--muted-2)}
.pjfeed--tight .pjfeed__item p{font-size:12.4px}
.pjlabels{display:flex;flex-wrap:wrap;gap:8px}
.pjlabelpick{display:inline-flex;align-items:center;gap:6px;font-size:12.4px}
.pjnew{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:13px}
.pjnew .field{margin-bottom:9px}
.pjnew__acts{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}

@media (max-width:900px){
  .pjd{grid-template-columns:minmax(0,1fr)}
  .pjd__side{position:static}
  .pjload__row{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pjstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pjgrid{grid-template-columns:minmax(0,1fr)}
  .pjfind{flex:1 1 100%}
  .pjfind .input{width:100%}
  .pjhead__acts{margin-left:0}
  .pjcol{flex:0 0 244px}
  .pjcal__head{display:none}
  .pjcal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pjcal__day.is-out{display:none}
}