/* ============================================================
   LYNCS PORTAL DESIGN KIT v1 (2026-08-15)
   Extracted from the lyncs.ai design system for portal.lyncs.ai.
   RULE: this file is the ONLY stylesheet. If a style is needed
   that is not here, add it HERE as a component, never inline.
   Companion usage guide: portal-design-guide.md
   ============================================================ */

/* ---- reset + tokens ---- */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#EFEADD;          /* page background, warm bone */
  --panel:#E7E0CF;        /* sidebar / panel background */
  --surface:#F7F3E9;      /* card surface */
  --surface-2:#EFEADD;    /* lifted / input surface */
  --deep:#E1D9C5;         /* deepest surface, bar tracks */
  --fg:#1B1712;           /* body ink */
  --mut:rgba(27,23,18,.66);
  --dim:rgba(27,23,18,.55);
  --faint:rgba(27,23,18,.22);
  --line:rgba(27,23,18,.14);
  --line-b:rgba(27,23,18,.28);
  --slate:#91a1c7;        /* structural primary: kickers, links, chips */
  --blue:#6679a5;         /* structural secondary: hovers, emphasis */
  --verm:#D6401C;         /* spark: danger, hot warn, internal marker */
  --kraft:#c7b791;        /* action primary background */
  --kraft-hi:#d0c19c;     /* action highlight */
  --kraft-lo:#b09f7c;     /* action shadow */
  --kraft-ink:#4f493a;    /* action text, warm umber */
  --slate-ink:#2b3450;    /* blue-family dark ink: text on slate surfaces (btn-blue, cta card) */
  --slate-hi:#a3b1d2;     /* blue-family hover highlight */
  --ok:#5a7d5a;           /* success / paid / closed */
  --warn:#b07d2e;         /* amber warn (70%+) */
  --r:14px;               /* card radius */
  --r-s:9px;              /* small radius */
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--ink);color:var(--fg);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- app frame: topbar + sidebar + main ---- */
.topbar{
  display:flex;align-items:center;gap:16px;height:58px;
  padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.topbar .logo{height:30px;display:block}
.topbar .who{margin-left:auto;font-size:12px;color:var(--dim)}
.topbar .who b{color:var(--fg)}
.app{display:flex;min-height:calc(100vh - 58px)}
.side{
  width:208px;flex-shrink:0;background:var(--panel);
  border-right:1px solid var(--line);padding:20px 12px;
}
.side a{
  display:block;padding:9px 12px;border-radius:var(--r-s);
  color:var(--mut);font-size:13.5px;margin-bottom:2px;
}
.side a:hover{text-decoration:none;color:var(--fg)}
.side a.on{background:var(--surface);color:var(--fg);font-weight:600;border:1px solid var(--line)}
.side .grp{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:18px 12px 6px;font-weight:700;
}
.side .grp:first-child{margin-top:0}
main.content{flex:1;padding:24px 28px;max-width:1120px;min-width:0}

/* ---- breadcrumb ---- */
.crumb{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:4px;color:var(--dim)}
.crumb a{color:var(--blue)}

/* ---- page headings ---- */
.page-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.page-head h1.page{margin-bottom:0}
h1.page{font-size:21px;letter-spacing:-.02em;margin-bottom:4px}
p.page-sub{font-size:13px;color:var(--dim);margin-bottom:22px}
.kicker{
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);font-weight:700;
}

/* ---- KPI cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.kpi .n{font-size:22px;font-weight:700;letter-spacing:-.02em}
.kpi .n small{font-size:12px;color:var(--dim);font-weight:400}
.kpi .l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-top:3px}
.kpi .d{font-size:11.5px;color:var(--mut);margin-top:6px}
.kpi .d.warn{color:var(--warn)}
/* clickable KPI card + call-to-action variant (hover state only, no motion) */
a.kpi{display:block;color:inherit}
a.kpi:hover{text-decoration:none;border-color:var(--kraft-ink)}
.kpi.cta{border-color:var(--line-b);background:var(--deep);display:flex;flex-direction:column}  /* variant E (Adrian 2026-08-21, mockup cta-card-proof): quiet beige body, kraft action strip below */
.kpi.cta .n{color:var(--fg)}
.kpi.cta .n small{font-size:15px;font-weight:600;color:var(--fg);letter-spacing:-.01em}  /* the unit must be readable — a dim 12px 'h' disappeared on the old gradient */
.kpi.cta .l{color:var(--fg)}
.kpi.cta .d{color:var(--mut)}
/* the action line is a kraft footer strip - the kit's action language, same voice as btn-primary */
.kpi.cta .go{display:block;margin:auto -17px -15px;padding:10px 17px;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--kraft-ink);background:var(--kraft);box-shadow:inset 0 1px 0 var(--kraft-hi);border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px)}
a.kpi.cta:hover .go{background:var(--kraft-hi)}
a.kpi.cta:hover{border-color:var(--kraft-ink)}  /* same hover as a.kpi */

/* ---- panel (card with header) ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px;overflow:hidden}
.panel>h3,.panel>summary>h3{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);
  font-weight:700;padding:13px 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.panel>h3 .right,.panel>summary>h3 .right{margin-left:auto;font-size:11.5px;color:var(--blue);font-weight:600;letter-spacing:0;text-transform:none}

/* a panel holding a type-ahead or date picker must not clip its popover */
.panel:has(.tw),.panel:has(.dtp){overflow:visible}

/* ---- collapsible panel: <details class="panel"><summary><h3>…</h3></summary>… ---- */
details.panel>summary{list-style:none;cursor:pointer;user-select:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel:not([open])>summary>h3{border-bottom:0}
.chev{display:inline-block;font-size:10px;color:var(--dim)}
details[open]>summary .chev{transform:rotate(90deg)}

/* ---- drag-reorder zones (app behavior; JS toggles .dragging) ---- */
[data-dragzone]>.panel[draggable]{cursor:grab}
.dragging{opacity:.55;outline:2px dashed var(--slate);outline-offset:2px}
.panel .pad{padding:16px 18px}
.panel .empty{padding:22px 18px;font-size:13px;color:var(--dim)}
/* sections inside .pad: divider + kicker heading */
.pad .sec,.pop-body .sec{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.pad .kicker{display:block;margin-bottom:8px}

/* ---- tables ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  text-align:left;padding:10px 18px;border-bottom:1px solid var(--line);font-weight:700;
}
.tbl td{padding:12px 18px;border-bottom:1px solid var(--line);color:var(--mut);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(27,23,18,.025)}
.tbl td b{color:var(--fg);font-weight:600}
.tbl .sub{font-size:11.5px;color:var(--dim)}

/* ---- BUTTON KIT (preflight-safe; keep these fixes, they are load-bearing) ----
   THE PAIRING RULE: a filled button never uses neutral black. Each surface pairs
   with the dark ink of ITS OWN family:
     kraft  + kraft-ink   btn-primary  the one main action per view
     slate  + slate-ink   btn-blue     billing / management / secondary-filled
     verm   + white       btn-danger   destructive, always behind a confirm
     ghost (line + fg)    btn-ghost    everything else
   New filled variants add a family ink token first, then the button. ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-size:12.5px;font-weight:600;
  padding:9px 18px;border-radius:10px;cursor:pointer;text-decoration:none;
  appearance:none;-webkit-appearance:none;border:0 solid transparent;
  background-clip:padding-box;white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn-primary{
  background:var(--kraft);color:var(--kraft-ink);
  box-shadow:inset 0 1px 0 var(--kraft-hi),0 1px 0 var(--kraft-lo);
}
.btn-primary:hover{background:var(--kraft-hi)}
.btn-ghost{background:transparent;color:var(--kraft-ink);border:1px solid var(--line-b)}
.btn-ghost:hover{border-color:var(--kraft-ink)}
/* filled secondary — account / billing management actions. Use when the primary
   action is a MANAGEMENT step rather than a create/commit ("Manage plan"), so the
   kraft btn-primary stays the one "do the thing" signal per view. */
.btn-blue{background:var(--slate);color:var(--slate-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 var(--blue)}
.btn-blue:hover{background:var(--slate-hi)}
.btn-danger{background:transparent;color:var(--verm);border:1px solid rgba(214,64,28,.4)}
.btn-sm{font-size:11.5px;padding:6px 12px;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
a:has(button){text-decoration:none}

/* ---- chips ---- */
.chip{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.chip-open{background:rgba(102,121,165,.14);color:var(--blue);border:1px solid rgba(102,121,165,.3)}
.chip-progress{background:rgba(199,183,145,.4);color:var(--kraft-ink)}
.chip-waiting{color:var(--warn);border:1px solid rgba(176,125,46,.4)}
.chip-closed,.chip-ok,.chip-paid{background:rgba(90,125,90,.14);color:var(--ok)}
.chip-tier{background:rgba(145,161,199,.2);color:var(--blue)}
.chip-internal{background:rgba(214,64,28,.1);color:var(--verm)}
.chip-demo{color:var(--dim);border:1px dashed var(--line-b)}
.chip-partner{background:rgba(145,161,199,.16);color:var(--blue)} /* note visibility marker — distinct from status chips */

/* ---- hours bar ---- */
.hbar{width:140px;max-width:100%;height:7px;background:var(--deep);border-radius:99px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px}
.hbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--slate))}
.hbar.warn i{background:linear-gradient(90deg,var(--warn),#c9993f)}   /* 70 to 89% */
.hbar.hot i{background:linear-gradient(90deg,var(--warn),var(--verm))} /* 90%+ */
.hnum{font-size:12px;color:var(--dim)}
.hnum b{color:var(--fg)}

/* ---- forms ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:13.5px;color:var(--fg);
  background:var(--surface-2);border:1px solid var(--line-b);border-radius:var(--r-s);
  padding:9px 12px;appearance:none;-webkit-appearance:none;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid rgba(145,161,199,.5);outline-offset:1px;border-color:var(--slate)}
/* scrollable checkbox picker list */
.picklist{max-height:170px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-s);padding:6px 10px;background:var(--surface-2);margin-top:6px}
.picklist .check{margin:6px 0}
/* checkboxes/radios keep their native rendering (appearance:none erases them) */
.field input[type=checkbox],.field input[type=radio],.check input{appearance:auto;-webkit-appearance:auto;width:auto;padding:0;border:0;background:none}
/* date/time inputs: dim segment prompt when empty (data-has toggled by layout JS), ink when filled */
input[type=date],input[type=datetime-local]{appearance:none;-webkit-appearance:none;font-variant-numeric:tabular-nums;color:var(--fg)}
input[type=datetime-local]:not([data-has]):not(:focus)::-webkit-datetime-edit,
input[type=date]:not([data-has]):not(:focus)::-webkit-datetime-edit{color:var(--dim)}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* filter bar: fields in a row, button(s) aligned to the field bottoms */
.filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.filter-row .field{margin:0;flex:1;min-width:140px}
/* filter labels stay SHORT (title only) — put the 'type to search' hint in the input's
   placeholder instead. A hint in the label wraps at narrow widths and knocks the row's
   label baseline out of line (or overlaps its neighbour if forced nowrap). */
.filter-row .field.wide{flex:2;min-width:180px}
.filter-row .btn{margin-bottom:1px}
.form-err{font-size:12.5px;color:var(--verm);margin:8px 0}
/* inline checkbox group */
.check-row{display:flex;gap:16px;margin:2px 0 6px}
.check,.field .check,.field label.check{display:flex;gap:6px;align-items:center;font-size:13.5px;color:var(--fg);text-transform:none;letter-spacing:.01em;font-weight:400;margin-bottom:0}
.check input{width:auto;margin:0}

/* ---- ticket conversation ---- */
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.split>*{min-width:0}
.note{padding:13px 16px;border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--mut)}
.note:first-of-type{border-top:0}
.note .meta{font-size:11px;color:var(--dim);margin-bottom:5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.note .meta b{color:var(--fg)}
.note.internal{background:rgba(214,64,28,.035)}
.meta-row{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;font-size:12.5px;border-bottom:1px solid var(--line);color:var(--mut)}
.meta-row:last-child{border-bottom:0}
.meta-row b{color:var(--fg);font-weight:600;text-align:right}

/* ---- inline form: input + button on one line (log time, link #id) ---- */
.inline-form{display:flex;gap:10px;align-items:center}
.inline-form input,.inline-form select{
  flex:1;min-width:0;font:inherit;font-size:13.5px;color:var(--fg);
  background:var(--surface-2);border:1px solid var(--line-b);border-radius:var(--r-s);
  padding:9px 12px;appearance:none;-webkit-appearance:none;
}
.inline-form input:focus,.inline-form select:focus{outline:2px solid rgba(145,161,199,.5);outline-offset:1px;border-color:var(--slate)}

/* ---- hint: muted helper sentence under a control or panel section ---- */
.hint{font-size:11.5px;color:var(--dim);margin-top:8px;line-height:1.5}
.field label .hint{display:inline;margin:0;text-transform:none;letter-spacing:0;font-weight:400}
.hint.lead{margin:0 0 8px}   /* hint that introduces the control below it */
.hint.warn{color:var(--warn);font-weight:600}   /* pod nearly used up */
.hint.hot{color:var(--verm);font-weight:700}    /* pod exhausted */

/* ---- note body (pre-wrap message text inside .note) ---- */
.nbody{font-size:13.5px;line-height:1.6;white-space:pre-wrap;color:var(--mut)}

/* ---- mini charts: labeled hour rows + monthly history columns (billing) ---- */
.hrow{margin:0 0 12px}
.hrow .hlbl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.hrow .htrack{height:10px;background:var(--deep);border-radius:6px;overflow:hidden}
.hrow .htrack i{display:block;height:100%;background:var(--slate);border-radius:6px}
.histo{display:flex;gap:14px;align-items:flex-end;height:120px;margin:16px 4px 6px}
.histo .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.histo .colbars{display:flex;gap:3px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.histo .bar-a{width:34%;background:var(--deep);border-radius:4px 4px 0 0}
.histo .bar-u{width:34%;background:var(--kraft);border-radius:4px 4px 0 0}
.histo .mlbl{font-size:10.5px;letter-spacing:.05em;color:var(--mut);text-transform:uppercase}
.legend{display:flex;gap:14px;font-size:11px;color:var(--mut)}
.legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px}
.legend .sw.a{background:var(--deep)}
.legend .sw.u{background:var(--kraft)}

/* ---- principles: numbered rationale cards for explainers ---- */
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.principle{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px}
.principle .num{font-size:20px;font-weight:700;color:var(--slate);letter-spacing:-.02em;line-height:1;margin-bottom:6px}
.principle b{display:block;font-size:12.5px;margin-bottom:4px;color:var(--fg)}
.principle p{font-size:12px;color:var(--mut);line-height:1.55;margin:0}

/* ---- callout: bordered aside inside a panel (.internal = Lyncs-only, vermilion) ---- */
.callout{border-left:3px solid var(--slate);background:var(--surface-2);border-radius:0 var(--r-s) var(--r-s) 0;padding:10px 12px;font-size:12.5px;line-height:1.55;white-space:pre-wrap;margin-top:10px}
.callout.internal{border-left-color:var(--verm);background:rgba(214,64,28,.035)}
.callout .ct{display:block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:4px;color:var(--blue)}
.callout.internal .ct{color:var(--verm)}

/* ---- chip-x: removable pill (unlink, unassign) ---- */
.chip-x{display:inline-block;font-size:11px;letter-spacing:.5px;padding:4px 10px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);border-radius:999px;cursor:pointer;font:inherit;margin:2px 6px 2px 0;white-space:nowrap}
.chip-x:hover{border-color:var(--verm);color:var(--verm)}
.chip-x.pod{background:rgba(199,183,145,.4);border-color:var(--kraft);color:var(--kraft-ink)}

/* ---- actions: a row of buttons (wraps on desktop, stacks on mobile) ---- */
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.actions input{font:inherit;font-size:12.5px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line-b);border-radius:var(--r-s);padding:8px 10px;width:180px}

/* ---- tabs: panel-top view switcher (e.g. partner conversation vs internal) ---- */
.tabs{display:flex;gap:4px;padding:12px 18px 0;background:var(--surface)}
.tabs .tab{padding:8px 16px;font-size:12px;font-weight:600;border:1px solid var(--line);border-bottom:0;border-radius:var(--r-s) var(--r-s) 0 0;background:var(--deep);color:var(--mut);position:relative;top:1px}
.tabs .tab:hover{text-decoration:none;color:var(--fg)}
.tabs .tab.on{background:var(--surface-2);color:var(--fg);z-index:1}
.tcount{display:inline-block;font-size:10px;font-weight:700;background:var(--line);border-radius:999px;padding:1px 7px;margin-left:6px;color:var(--dim)}
.tab.on .tcount{background:var(--slate);color:var(--surface)}
.tabpanel{border-top:1px solid var(--line);background:var(--surface-2);padding:14px 16px}

/* ---- status setter buttons (current state disabled + ringed) ---- */
.btn-st{background:transparent;border:1px solid var(--line-b);color:var(--mut);margin:0 6px 6px 0}
.btn-st.st-open{color:var(--blue);border-color:var(--slate)}
.btn-st.st-progress{color:var(--kraft-ink);border-color:var(--kraft)}
.btn-st.st-waiting{color:var(--warn);border-color:var(--warn)}
.btn-st.st-closed{color:var(--dim)}
.btn-st[disabled]{opacity:1;outline:2px solid currentColor;outline-offset:1px}

/* ---- priority setter buttons (same ring pattern; amber=high, blue=low) ---- */
.btn-pr{background:transparent;border:1px solid var(--line-b);margin:0 6px 6px 0}
.btn-pr.pr-high{color:var(--warn);border-color:var(--warn)}
.btn-pr.pr-normal{color:var(--kraft-ink);border-color:var(--kraft)}
.btn-pr.pr-low{color:var(--blue);border-color:var(--slate)}
.btn-pr[disabled]{opacity:1;outline:2px solid currentColor;outline-offset:1px}

/* ---- popover: <details class="popover"><summary class="btn …">…</summary><form|div class="pop-body"> ---- */
.popover{position:relative;display:inline-block;vertical-align:middle}
.popover>summary{list-style:none;cursor:pointer}
.popover>summary::-webkit-details-marker{display:none}
summary.btn{display:inline-flex}
.popover[open]>form,.popover[open]>.pop-body{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:22px 14px 14px;min-width:280px;z-index:9;box-shadow:0 6px 24px rgba(27,23,18,.12)}
.pop-x{position:absolute;top:4px;right:10px;font-size:18px;line-height:1;color:var(--dim);font-weight:700}
.pop-x:hover{color:var(--verm);text-decoration:none}

/* ---- history timeline row ---- */
.hist-row{position:relative;font-size:12px;line-height:1.5;padding:6px 0 6px 16px;border-left:2px solid var(--line);margin-left:5px;color:var(--mut)}
.hist-row::before{content:"";position:absolute;left:-5px;top:11px;width:8px;height:8px;border-radius:99px;background:var(--slate);border:2px solid var(--surface)}
.hist-row.warn::before{background:var(--verm)}
.hist-row b{color:var(--fg)}

/* ---- attachment chip ---- */
.att-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:4px 11px;margin:8px 6px 0 0;color:var(--blue)}
.att-chip:hover{border-color:var(--slate);text-decoration:none}
.att-chip .sz{color:var(--dim);font-size:10.5px;font-weight:400}

/* ---- composer toolbar (markdown-lite: **bold** *italic* `code` - list) ---- */
.toolbar{display:flex;gap:6px;margin-bottom:6px}
.toolbar button{font:inherit;font-size:11.5px;font-weight:700;padding:4px 10px;border:1px solid var(--line-b);border-radius:7px;background:var(--surface-2);color:var(--mut);cursor:pointer}
.toolbar button:hover{color:var(--fg);border-color:var(--kraft-ink)}
.nbody code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--deep);border-radius:4px;padding:1px 5px}
/* ---- rich composer: contenteditable WYSIWYG surface (serializes to markdown-lite on submit) ---- */
.editor{width:100%;min-height:76px;font:inherit;font-size:13.5px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line-b);border-radius:var(--r-s);padding:9px 12px;white-space:pre-wrap;line-height:1.55;overflow-y:auto;max-height:320px}
.editor:focus{outline:2px solid rgba(145,161,199,.5);outline-offset:1px;border-color:var(--slate)}
.editor:empty::before{content:attr(data-placeholder);color:var(--dim)}
.editor ul,.editor ol{margin:4px 0 4px 20px;white-space:normal}
.editor code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--deep);border-radius:4px;padding:1px 5px}

/* ---- collapsed older replies in a thread ---- */
.thread-more>summary{padding:10px 16px;font-size:12px;color:var(--blue);font-weight:600;cursor:pointer;border-top:1px solid var(--line);list-style:none;user-select:none}
.thread-more>summary::-webkit-details-marker{display:none}
.thread-more>summary .chev{margin-right:6px}

/* ---- @mention highlight in notes ---- */
.mention{background:rgba(145,161,199,.2);border-radius:4px;padding:0 4px;color:var(--blue);font-weight:600}
.note-tools{margin-top:6px}
.note-tools a{font-size:11px;color:var(--dim);cursor:pointer}
.note-tools a:hover{color:var(--blue);text-decoration:none}

/* ---- file attach: enhancer wraps input[type=file] in .att-tog/.filedrop ---- */
input[type=file]{border:1.5px dashed var(--line-b);background:var(--surface-2);padding:9px 12px;font-size:12.5px;color:var(--mut);border-radius:var(--r-s);width:100%}
input[type=file]::file-selector-button{background:var(--deep);border:1px solid var(--line);border-radius:5px;padding:4px 10px;margin-right:10px;font:inherit;font-size:11.5px;font-weight:600;color:var(--kraft-ink);cursor:pointer}
.att-block{margin:4px 0 12px}
.att-block .share-url{margin-top:8px}
.att-tog summary{cursor:pointer;font-size:12.5px;color:var(--blue);font-weight:700;list-style:none;user-select:none}
.att-tog summary::-webkit-details-marker{display:none}
.att-tog summary::before{content:"▸  "}
.att-tog[open] summary::before{content:"▾  "}
.filedrop{border:1.5px dashed var(--line-b);border-radius:var(--r-s);padding:10px 12px;background:var(--surface-2);margin:8px 0 0}
.filedrop.drag{border-color:var(--kraft);background:var(--deep)}
.filedrop input[type=file]{border:0;padding:0;background:transparent}
.fd-hint{font-size:11.5px;color:var(--dim);margin-top:4px}

/* ---- type-ahead wrap (enhancer replaces datalist with .tw-menu) ---- */
.tw{position:relative;display:flex;flex:1 1 auto;min-width:0;align-items:center}
.tw>input{flex:1 1 auto;min-width:0;padding-right:26px}
.tw-x{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:15px;line-height:1;padding:2px 4px}
.tw.has .tw-x{display:block}
.tw-x:hover{color:var(--verm);text-decoration:none}
.tw-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:0 10px 26px rgba(27,23,18,.14);z-index:40;max-height:250px;overflow-y:auto;padding:4px}
.tw-it{padding:8px 10px;font-size:13.5px;border-radius:6px;cursor:pointer;color:var(--fg)}
.tw-it:hover,.tw-it.on{background:var(--deep)}

/* ---- quick-filter chips row ---- */
.quick-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.quick-chips a{font-size:12px;font-weight:600;letter-spacing:.03em;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--mut)}
.quick-chips a:hover{color:var(--fg);border-color:var(--slate);text-decoration:none}
.quick-chips a.on{background:var(--slate);color:var(--surface);border-color:var(--slate)}

/* ---- date-time picker (kit-styled, identical in every browser; /static/kit-datetime.js) ---- */
.dtp{position:relative;display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.dtp .dtp-src{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;border:0;padding:0}
.dtp input.dtp-display{flex:1 1 auto;min-width:0;width:100%;font:inherit;font-size:13.5px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line-b);border-radius:var(--r-s);padding:9px 12px;appearance:none;-webkit-appearance:none;font-variant-numeric:tabular-nums}
.dtp input.dtp-display:focus{outline:2px solid rgba(145,161,199,.5);outline-offset:1px;border-color:var(--slate)}
.dtp-btn{flex:0 0 auto;display:inline-flex;align-items:center;line-height:1;padding:8px 10px;border:1px solid var(--line-b);border-radius:var(--r-s);background:var(--surface);cursor:pointer;color:var(--kraft-ink)}
.dtp-btn:hover{border-color:var(--kraft-ink)}
.dtp-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:var(--surface);border:1px solid var(--line-b);border-radius:var(--r-s);box-shadow:0 10px 26px rgba(27,23,18,.16);padding:12px;min-width:272px}
.dtp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.dtp-head b{font-size:12.5px}
.dtp-nav{font:inherit;font-size:13px;line-height:1;padding:4px 9px;border:1px solid var(--line-b);border-radius:7px;background:var(--surface-2);cursor:pointer;color:var(--kraft-ink)}
.dtp-nav:hover{border-color:var(--kraft-ink)}
.dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dtp-dow{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700;text-align:center;padding:4px 0}
.dtp-day{font:inherit;font-size:12px;padding:7px 0;border:0;border-radius:6px;background:transparent;color:var(--fg);cursor:pointer;font-variant-numeric:tabular-nums}
.dtp-day:hover{background:var(--deep)}
.dtp-day.today{outline:1px solid var(--slate);outline-offset:-1px}
.dtp-day.on{background:var(--slate);color:var(--surface);font-weight:700}
.dtp-day.off{cursor:default;background:none}
.dtp-time{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.dtp-time select{font:inherit;font-size:12.5px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line-b);border-radius:7px;padding:6px 8px;appearance:none;-webkit-appearance:none}
.dtp-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}

/* ---- person card: one roster entry, identical on the Lyncs bench and MSP staff pages ----
   Header carries a brand-slate tint so each person reads as a distinct block; the name is
   the loudest thing in it. Access columns pin their assign form to the bottom so the two
   inputs line up no matter how many chips each column holds. */
.panel.person>h3{background:rgba(145,161,199,.14);text-transform:none;letter-spacing:0;font-size:14px;color:var(--fg);padding:12px 18px;flex-wrap:wrap}
.panel.person>h3 .nm{font-size:15.5px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.panel.person>h3 .right{font-size:11.5px}
.access-col>.kicker{min-height:2.2em}   /* keeps both column headings on the same baseline when one wraps */
.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:stretch}
.access-col{display:flex;flex-direction:column;min-width:0}
.access-col>.chips{flex:1 1 auto;margin:7px 0 10px}
.access-col>form:last-child,.access-col>p:last-child{margin-top:auto}
.access-col .empty-chip{display:block;font-size:11.5px;color:var(--dim);padding:2px 0}

/* ---- dispatch lanes: week x per-tech schedule board (scrolls horizontally) ---- */
.lanes{width:100%;min-width:860px;border-collapse:collapse;font-size:12px}
.lanes th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700;text-align:center;padding:8px 4px;border-bottom:1px solid var(--line)}
.lanes th.lane-h{text-align:left;padding-left:18px;width:170px}
.lanes th.today{color:var(--blue)}
.lanes td{border:1px solid var(--line);border-left:0;border-right:0;vertical-align:top;padding:6px;height:76px;width:12%}
.lanes td.today{background:rgba(145,161,199,.06)}
.lanes .lane-name{border-left:0;padding:10px 18px;width:170px;background:var(--surface-2);vertical-align:middle}
.lanes .lane-name b{display:block;font-size:12.5px;color:var(--fg);line-height:1.3}
.lanes .lane-name .sub{display:block;font-size:10.5px;line-height:1.4}
.lanes .lane-name.free b{color:var(--dim);font-weight:400}
.lane-chip{display:block;font-size:10.5px;line-height:1.35;padding:4px 6px;margin-bottom:4px;border-radius:6px;background:var(--surface-2);border-left:3px solid var(--slate);color:var(--mut)}
.lane-chip:hover{text-decoration:none;border-color:var(--blue);background:var(--deep)}
.lane-chip b{display:block;color:var(--fg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-chip .t{color:var(--dim)}
.lane-chip.high{border-left-color:var(--warn)}
.lane-chip.over{border-left-color:var(--verm)}
.lane-chip.unassigned{border-left-style:dashed}
.lane-load{display:block;margin-top:3px;font-size:10px;color:var(--dim);font-weight:600;letter-spacing:.04em}

/* ---- calendar (tickets calendars) ---- */
.cal table{table-layout:fixed;width:100%;border-collapse:collapse}
.cal th{text-align:center;padding:6px 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700;border-bottom:1px solid var(--line)}
.cal td{height:76px;vertical-align:top;padding:6px;border:1px solid var(--line);font-size:12px}
.cal td.off{background:var(--ink);border-color:transparent}
.cal .dnum{font-weight:700;font-size:12px;color:var(--dim)}
.cal td.today{outline:2px solid var(--slate);outline-offset:-2px;border-radius:4px}
.cal a.day{display:block;height:100%;color:inherit}
.cal a.day:hover{text-decoration:none}
.cal .cd{display:block;font-size:10.5px;line-height:1.5;white-space:nowrap}
.cal .cd.op{color:var(--blue)}
.cal .cd.cl{color:var(--dim)}
.cal .cd.hr{color:var(--ok);font-weight:600}
.cal .cd.sd{color:var(--verm);font-weight:700}

/* ---- calendar controls: tz picker + segmented prev/today/next ---- */
.tzp{display:inline-flex;gap:6px;align-items:center}
.tzp select{width:auto;font:inherit;font-size:12px;color:var(--fg);background:var(--surface-2);border:1px solid var(--line-b);border-radius:8px;padding:6px 26px 6px 10px;appearance:none;-webkit-appearance:none}
.calnav{display:inline-flex;align-items:stretch}
.calnav .btn{border-radius:0;border-right-width:0;white-space:nowrap;flex:0 0 auto}
.calnav .btn:first-child{border-radius:8px 0 0 8px}
.calnav .btn:last-child{border-radius:0 8px 8px 0;border-right-width:1px}

/* ---- auth shell (login page, no sidebar) ---- */
.auth{max-width:440px;margin:0 auto;padding:28px 20px}
.auth .auth-logo{width:130px;display:block;margin:10px auto 18px}
.provider{display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-b);background:var(--surface);padding:11px 14px;margin-bottom:10px;font-size:13.5px;font-weight:600;color:var(--fg);border-radius:var(--r-s)}
.provider:hover{background:var(--surface-2);text-decoration:none}
.or-line{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--dim);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
.btn.wide{width:100%;padding:12px 18px}

/* ---- flash message (post-action confirmation / error) ---- */
.flash{background:var(--deep);border-left:3px solid var(--slate);padding:12px 16px;margin-bottom:18px;font-size:13.5px;border-radius:0 var(--r-s) var(--r-s) 0}
.flash.err{border-left-color:var(--verm)}

/* ---- sidebar end: sign-out zone at the bottom of .side ---- */
.side-end{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}

/* ---- footnote ---- */
.foot{margin-top:26px;font-size:11.5px;color:var(--dim)}

/* ============================================================
   MOBILE (breakpoints: 900px sidebar collapse, 620px density)
   Pattern mirrors lyncs.ai: sidebar becomes a slide-down panel
   under the topbar, toggled by .menu-btn. JS toggles .open on
   .side; CSS below handles the rest.
   ============================================================ */
.menu-btn{
  display:none;font:inherit;font-size:26px;line-height:1;background:transparent;
  border:0;color:var(--fg);cursor:pointer;padding:9px 12px;
  appearance:none;-webkit-appearance:none;
}
@media (max-width:900px){
  .menu-btn{display:block}
  .app{display:block}
  .side{
    display:none;width:100%;border-right:0;border-bottom:1px solid var(--line);
    position:sticky;top:58px;z-index:40;
  }
  .side.open{display:block}
  main.content{padding:18px 16px}
  .split{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .access-grid{grid-template-columns:1fr}
  .filter-row .field,.filter-row .field.wide{flex:1 1 100%}
  .filter-row .btn{flex:1 1 auto}
  /* tables: allow horizontal scroll instead of squeezing (tw panels included --
     their suggestion menu escapes the scroll clip as a fixed overlay below) */
  .panel{overflow-x:auto}
  .panel:has(.tw),.panel:has(.dtp){overflow-x:auto}
  /* <details> ignores overflow on itself (Chrome): layout JS wraps its tables in .tblwrap */
  .tblwrap{overflow-x:auto;min-width:0;max-width:100%}
  .tw-menu{position:fixed;left:12px;right:12px;top:auto;max-height:40vh;z-index:70}
  table.tbl{min-width:560px}
}
@media (max-width:620px){
  .cards{grid-template-columns:1fr 1fr}
  .kpi .n{font-size:19px}
  h1.page{font-size:18px}
  .topbar{padding:0 14px}
  .tbl th,.tbl td{padding:9px 12px}
  .hbar{width:96px}
  /* buttons may wrap their label instead of forcing width */
  .btn{white-space:normal}
  /* inline forms wrap; the input keeps flexing */
  .inline-form{flex-wrap:wrap}
  .inline-form input,.inline-form select{flex:1 1 140px}
  /* action rows stack full-width (calnav stays one segmented bar) */
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%}
  .actions .calnav{width:100%}
  .actions .calnav .btn{width:auto;flex:1 1 0}
  /* date picker becomes a bottom sheet too */
  .dtp-pop{position:fixed;left:12px;right:12px;bottom:12px;top:auto;min-width:0;max-height:80vh;overflow-y:auto;z-index:70;box-shadow:0 -8px 34px rgba(27,23,18,.28);border-radius:12px}
  .dtp-day{padding:10px 0}
  /* popovers become bottom sheets */
  .popover[open]>form,.popover[open]>.pop-body{position:fixed;left:12px;right:12px;bottom:12px;top:auto;min-width:0;max-height:72vh;overflow-y:auto;z-index:70;box-shadow:0 -8px 34px rgba(27,23,18,.28);border-radius:12px}
}
/* ---- print: clean branded output (reports use body.print-bill to isolate bill panels) ---- */
.print-brand{display:none}
@media print{
  .topbar,.side,footer,form,.tabs,.btn,.no-print,.menu-btn,.toolbar,.editor{display:none!important}
  body{background:#fff}
  .app{display:block}
  main.content{padding:0;max-width:100%}
  .panel,details.panel{border:0;overflow:visible;margin-bottom:10px}
  details.panel:not([open]){display:none}
  .chev{display:none}
  body.print-bill .panel:not(.bill-card){display:none!important}
  body.print-bill h1.page,body.print-bill p.page-sub{display:none!important}
  .print-brand{display:flex!important;align-items:center;justify-content:space-between;border-bottom:3px solid var(--slate);padding-bottom:12px;margin-bottom:18px}
  .print-brand img{width:130px;height:auto}
  .print-brand .pb-r{text-align:right;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:600;line-height:1.8}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- v35 · credential-request card + composer token + Bitwarden popover ---- */
.credblock{white-space:normal;border:1px solid var(--line-b);border-left:3px solid var(--slate);background:var(--surface);margin:10px 0 2px;max-width:520px}
.credblock .cb-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line)}
.credblock .cb-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--blue)}
.credblock .cb-body{padding:8px 12px 10px;font-size:13px;line-height:1.55;color:var(--fg)}
.credblock ul.cb-steps{margin:0;padding:0;list-style:none}
.credblock ul.cb-steps li{margin:0;padding:3px 0 3px 22px;position:relative;line-height:1.5}
.credblock ul.cb-steps li::before{content:attr(data-n);position:absolute;left:0;top:3px;width:15px;height:15px;border:1px solid var(--slate);border-radius:50%;font-size:9px;font-weight:700;color:var(--blue);display:flex;align-items:center;justify-content:center}
.credblock details{border-top:1px dashed var(--line);margin-top:8px;padding-top:6px}
.credblock summary{cursor:pointer;font-size:11.5px;color:var(--mut);font-weight:600}
.credblock details[open] summary{margin-bottom:4px}
.credblock .cb-fine{font-size:12px;color:var(--mut);line-height:1.55;margin:2px 0 0}
.cred-token{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--slate);background:var(--surface);color:var(--blue);font-size:12px;font-weight:600;padding:4px 10px;border-radius:3px;user-select:none}
.cred-token .tk-x{cursor:pointer;color:var(--mut);font-weight:400}
.credpop .pop-body{width:min(440px,88vw)}
.credpop summary{white-space:nowrap}
.panel:has(.credpop[open]){overflow:visible}
@media (max-width:700px){.credpop[open] .pop-body{position:fixed;left:12px;right:12px;top:14vh;width:auto;max-height:70vh;overflow-y:auto}}

/* ---- v41 · help menu map: the role's sidebar rendered as numbered, clickable pills ---- */
.helpnav{display:flex;flex-wrap:wrap;gap:8px}
.helpnav .hn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);font-size:13px;color:var(--fg);cursor:pointer;font-weight:600;user-select:none}
.helpnav .hn:hover{border-color:var(--slate);text-decoration:none;color:var(--fg);background:var(--surface)}
.helpnav .hn .num{font-size:9.5px;font-weight:700;color:var(--slate);letter-spacing:.06em}

/* ---- v42 · page-head action slot: meta-actions (rename, cancel) pin top-right.
   Entry buttons stay quiet ghosts; destructive color appears only on the
   confirm step inside the popover (vermilion at the destructive moment). ---- */
.page-actions{margin-left:auto;display:flex;gap:8px;align-items:flex-start}

/* ---- v44 · help figures: a captioned diorama built from REAL kit primitives
   (chips, bars, toolbars) — never a screenshot, so it cannot rot when the UI
   moves. One per Help section; sits inside the searchable panel. ---- */
.help-fig{border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);margin:10px 0 4px;overflow:hidden}
.help-fig .fig-stage{padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.help-fig .fig-cap{font-size:11px;color:var(--dim);padding:7px 16px;border-top:1px solid var(--line);background:var(--surface);line-height:1.5}
.help-fig .fig-cap b{color:var(--mut);font-weight:600}
.help-fig .mini-tb{display:inline-flex;gap:4px;flex-wrap:wrap}
.help-fig .mini-tb span{border:1px solid var(--line-b);border-radius:6px;padding:2px 8px;font-size:11px;color:var(--mut);background:var(--surface)}
.help-fig .mini-bar{width:140px;height:8px;border-radius:99px;background:var(--deep);overflow:hidden;flex-shrink:0}
.help-fig .mini-bar i{display:block;height:100%;border-radius:99px}
.help-fig .fig-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.help-fig .fig-lbl{font-size:11.5px;color:var(--mut)}