:root {
  --bg: #0f172a;
  --bg-soft: #1e293b;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-soft: #475569;
  --muted: #94a3b8;
  --line: var(--border-subtle);
  --line-dark: #334155;
  --brand: #2563eb;
  --brand-soft: #dbeafe;
  --accent: #2563eb;   /* timer "active/tracking" controls (was undefined → invisible) */
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --purple: #7c3aed;
  --shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 8px 24px rgba(15, 23, 42, .08);
  --radius: 10px;
  /* The one band of chrome above the work. Named because more than one rule
     depends on it — a hand-carried 56 in a calc() is how a panel ends up
     hanging past the bottom of the window. */
  --topbar-h: 52px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg-surface-hover);
  font-size: 14px;
}
a { cursor: pointer; text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---- top bar ---- */
/* White, slim, and quiet. The bar was a navy block with five filled controls
   on it, which made it the loudest thing on a screen whose subject is the
   work underneath. Now it is a line of text and a rule: the only fill left is
   the search field and the notification dot. */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.brand b { font-weight: 700; }
.logo {
  width: 30px; height: 30px; border-radius: 8px; background: var(--brand);
  display: grid; place-items: center; font-weight: 800; font-size: 18px;
}
/* The mark is navy, so on a white bar it needs no badge behind it. */
.brand-mark { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; }
.topbar-spacer { flex: 1; }
/* Centred on the WINDOW, not on the space left over: with a spacer either
   side it lands mid-gap, and the gap is lopsided because the controls on the
   right weigh more than the brand on the left — 53px out, measured. Taken out
   of the flow it is centred on the header itself. Below 1100 it goes back in
   line, where there is no room to float it without hitting something. */
.search-wrap { position: absolute; left: 50%; transform: translateX(-50%);
  width: min(380px, 34vw); display: flex; }
@media (max-width: 1100px) {
  .search-wrap { position: relative; left: auto; transform: none; flex: 0 1 300px; width: auto; }
}
.search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.search-wrap input {
  background: var(--bg-inset); border: 1px solid transparent; color: var(--ink);
  border-radius: 9px; padding: 7px 12px 7px 32px; width: 100%; outline: none; font-size: 13px;
}
.search-wrap input:focus { background: var(--bg-surface); border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft); }
.search-wrap input::placeholder { color: var(--muted); }
.icon-btn {
  position: relative; background: none; border: 0;
  color: var(--ink-soft); width: 32px; height: 32px; border-radius: 8px; font-size: 15px;
}
.icon-btn:hover { background: var(--bg-surface-hover); }
.badge {
  position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff;
  border-radius: 10px; font-size: 11px; min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center; font-weight: 700;
}
.me-wrap { display: flex; align-items: center; gap: 8px; }
.me-wrap label { color: var(--muted); font-size: 12px; }
.me-wrap select {
  background: var(--bg-surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; outline: none; font-size: 12.5px;
}

/* ---- layout ---- */
.body { display: flex; height: calc(100vh - var(--topbar-h)); }
.sidenav {
  width: 196px; background: var(--bg-surface); border-right: 1px solid var(--line);
  padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 1px; flex-shrink: 0;
  /* The nav is a fixed-height flex child. Once the inbox views expand it is
     taller than the viewport, and without this the extra items spill out
     past the white panel — the background appears to stop mid-list. */
  overflow-y: auto;
}
.navlink {
  padding: 7px 10px; border-radius: 8px; color: var(--ink-soft); font-weight: 500;
  font-size: 13.5px; display: flex; align-items: center; gap: 9px;
}
.navlink:hover { background: var(--bg-surface-hover); }
.navlink.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav-sep { font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--muted);
  padding: 14px 10px 5px; letter-spacing: .08em; }
.sidenav > .nav-sep:first-child { padding-top: 4px; }
/* Inbox views, under the Inbox link while the Inbox is open. No rule and no
   indent: they are the Work list continued, not a footnote to it. */
.nav-views { margin: 1px 0 2px; padding: 0; border: 0; }
.nav-views .nav-sep { padding: 12px 10px 4px; }
/* Settings, Help and Feedback are places you visit, not places you work, so
   they sit at the foot of the nav as one bordered group rather than three
   more rows of the list. Line icons rather than emoji: at this size an emoji
   is a small colour blob that pulls the eye away from the counts above it,
   which are the thing worth looking at. */
.nav-utility { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; justify-content: center; }
/* Full width of the column, three equal cells. Centring a narrower box
   only looks centred until the nav grows a scrollbar and takes 15px off one
   side of it. */
.nav-utilbox { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.nav-util {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 4px; border: 0; border-radius: 0; background: none; cursor: pointer;
  font-size: 10px; font-weight: 500; line-height: 1; color: var(--muted); text-align: center;
}
.nav-util svg { width: 18px; height: 18px; flex: none; }
.nav-util:hover, .nav-util.active { background: var(--brand-soft); color: var(--brand); }
.nv-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 8px; border-radius: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-soft); background: none; border: 0; text-align: left;
}
.nv-item:hover { background: var(--bg-surface-hover); }
.nv-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nv-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-count { font-size: 10.5px; color: var(--muted); background: var(--bg-inset); border-radius: 999px; padding: 1px 6px; }
.nv-item.active .nv-count { background: rgba(255, 255, 255, .5); color: inherit; }
.nv-shared { font-size: 10px; opacity: .65; }
.nv-x { opacity: 0; font-size: 11px; color: var(--muted); padding: 0 2px; }
.nv-item:hover .nv-x { opacity: 1; }
.nv-add { color: var(--brand); font-weight: 500; }
/* Ticket tags */
.tk-tags { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 6px; }
.tk-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  background: var(--bg-inset); color: var(--ink-soft); border-radius: 999px; padding: 2px 8px;
}
.tk-tag button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 12px; line-height: 1; padding: 0; }
.tk-tag button:hover { color: var(--danger); }
.tk-tag-add { font-size: 11px; color: var(--brand); background: none; border: 1px dashed var(--line); border-radius: 999px; padding: 2px 9px; cursor: pointer; }
.tk-tag-add:hover { border-color: var(--brand); }
.tk-item-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tk-item-tags span { font-size: 10px; background: var(--bg-inset); color: var(--muted); border-radius: 999px; padding: 1px 6px; }
/* Conversation overview */
.ov-chart { display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 4px; }
.ov-bar { flex: 1; min-width: 2px; height: 100%; display: flex; align-items: flex-end; }
.ov-bar-stack { width: 100%; background: var(--brand-soft); border-radius: 3px 3px 0 0; display: flex; align-items: flex-end; min-height: 1px; }
.ov-bar-out { width: 100%; background: var(--brand); border-radius: 3px 3px 0 0; }
.ov-table { width: 100%; font-size: 12.5px; }
.ov-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding-bottom: 5px; }
.ov-table td { padding: 4px 0; border-top: 1px solid var(--line); }
.ov-table td:not(:first-child), .ov-table th:not(:first-child) { text-align: right; }
/* Collapsible sidebar sections */
.tk-sec-head { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 5px 0; cursor: pointer; text-align: left; }
.tk-sec-head:hover .tk-cust-label { color: var(--ink-soft); }
.tk-sec-arrow { font-size: 9px; color: var(--muted); width: 9px; }
.tk-sec-body { margin-top: 5px; }
/* Timeline */
.tk-tl-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 5px 0; font-size: 11.5px; }
.tk-tl-icon { font-size: 10px; }
.tk-tl-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-tl-when { font-size: 10px; white-space: nowrap; }
/* Knowledge-base panel */
.kb-sec { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 9px; }
.kb-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.kb-sec-head b { flex: 1; }
.kb-sec-text { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); white-space: pre-wrap; max-height: 190px; overflow-y: auto; }
/* A reply queued to go out later */
.tk-scheduled {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 16px; padding: 8px 12px; border-radius: 8px;
  background: var(--info-soft); border: 1px solid var(--accent-line); color: var(--accent); font-size: 12.5px;
}
.tk-scheduled .btn { margin-left: auto; }
/* Snooze */
.tk-snoozed-note { font-size: 11.5px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 7px; padding: 5px 9px; margin-top: 6px; }
main { flex: 1; overflow-y: auto; padding: 12px 20px; }

/* ---- shared ---- */
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.page-head h1 { font-size: 20px; margin: 0; }
.page-head .sub { color: var(--ink-soft); font-size: 13px; }
.spacer { flex: 1; }
.btn {
  background: var(--brand); color: #fff; border: none; padding: 9px 14px;
  border-radius: 8px; font-weight: 600; font-size: 13px;
}
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--bg-surface); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg-inset); }
.btn.subtle { background: var(--bg-surface-hover); color: var(--ink); }
.btn.danger { background: var(--red); }
.btn.green { background: var(--green); }
.btn.sm { padding: 6px 10px; font-size: 12px; }

/* ---- filter chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  padding: 7px 12px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft); font-weight: 600;
}
.chip:hover { border-color: var(--brand); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .n { opacity: .7; margin-left: 4px; }
.chip .n.zero { opacity: .35; }
.chip.more-toggle { cursor: pointer; color: var(--brand); border-style: dashed; }
/* grouped filters revealed under "More ▾" */
.chip-groups { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; padding: 4px 2px 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip-group-title { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); opacity: .65; margin-right: 2px; }

/* ---- table ---- */
.card { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line); font-weight: 700;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-inset); cursor: pointer; }
.order-no { font-weight: 700; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
td.cb, th.cb { width: 36px; text-align: center; padding-left: 10px; padding-right: 0; }
.row-cb, #selAll { width: 16px; height: 16px; cursor: pointer; }
tbody tr.sel { background: var(--info-soft); }
tbody tr.sel:hover { background: var(--accent-soft); }
.qf-select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-surface); font-family: inherit; font-size: 13px; outline: none; max-width: 220px; }
.qf-select:focus { border-color: var(--brand); }
.bulk-bar {
  position: sticky; bottom: 0; margin-top: 14px; z-index: 15;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  /* inverse surface, like the toast: readable on either theme's ground */
  background: var(--text-primary); color: var(--bg-surface); padding: 12px 16px; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,.25);
}
.bulk-bar b { margin-right: 4px; }
.bulk-bar .qf-select { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--bg-surface) 40%, transparent); }
.muted { color: var(--ink-soft); }
.mini { font-size: 12px; color: var(--muted); }
.prod-cell { line-height: 1.35; }

/* ---- badges ---- */
.tag {
  display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 11.5px;
  font-weight: 700; white-space: nowrap;
}
.tag.ws-Unassigned { background: var(--bg-surface-hover); color: var(--ink-soft); }
.tag.ws-Claimed { background: var(--info-soft); color: var(--accent); }
.tag.ws-In.Progress, .tag.ws-In-Progress { background: #dbeafe; color: #1d4ed8; }
.tag.ws-Needs.Help, .tag.ws-Needs-Help { background: var(--warn-soft); color: var(--warn); }
.tag.ws-On.Hold, .tag.ws-On-Hold { background: var(--purple-soft); color: var(--purple); }
.tag.ws-Resolved { background: var(--ok-soft); color: var(--ok); }
.tag.issue { background: var(--bg-surface-hover); color: var(--ink-soft); }
.tag.pri-Low { background: var(--bg-surface-hover); color: var(--ink-soft); }
.tag.pri-Normal { background: var(--info-soft); color: var(--accent); }
.tag.pri-High { background: var(--warn-soft); color: var(--warn); }
.tag.pri-Urgent { background: var(--danger-soft); color: var(--danger); }
.tag.overdue { background: var(--danger-soft); color: var(--danger); }

.avatar {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 11px; margin-right: 6px;
}
.handler { display: inline-flex; align-items: center; }
.empty-state { padding: 40px; text-align: center; color: var(--muted); }
.table-more { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }

/* ---- drawer ---- */
/* z-index 120: above the always-present Ask launcher/widget (98/99) and legacy
   modal overlay (100) so the order/card drawer and its backdrop are never
   painted through by that chrome, but below the ui.js dialog scrim (200) so a
   UI.confirm opened from inside a drawer still layers on top. */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(1100px, 94vw);
  background: var(--bg-inset); box-shadow: -8px 0 40px rgba(0,0,0,.2); overflow-y: auto;
  animation: slidein .18s ease;
}
@keyframes slidein { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.drawer-head {
  position: sticky; top: 0; background: var(--bg-surface); border-bottom: 1px solid var(--line);
  padding: 16px 22px; display: flex; align-items: center; gap: 14px; z-index: 2;
}
.drawer-head h2 { margin: 0; font-size: 18px; }
.close-x { margin-left: auto; background: var(--bg-surface-hover); border: none; width: 34px; height: 34px; border-radius: 8px; font-size: 18px; }

/* Order Detail: a real page (App.view='order') since 2026-09-10, not a
   slide-in drawer any more — #main already pads the page, so this grid
   doesn't add its own edge padding on top of that. */
.order-back { margin-bottom: 6px; }
.order-back a { color: var(--muted); font-size: 13px; text-decoration: none; }
.order-back a:hover { color: var(--ink); text-decoration: underline; }
.order-page-head { flex-wrap: wrap; }
/* 2026-09-11 redesign: the center Items workspace is the operational heart of
   this page and must dominate — was an even 1fr/1.1fr/1fr split that left the
   items table cramped and everything else swimming in unused space. Also
   stretches (not "start") so the right Activity column fills the SAME height
   as however tall the left+center columns turn out to be, and gets a real
   min-height tied to the viewport so it isn't just as short as its own
   content on a big monitor. */
.detail-grid { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(600px, 2.2fr) minmax(300px, 1fr);
  gap: 16px; padding: 0; align-items: stretch; margin-top: 14px;
  min-height: calc(100vh - var(--topbar-h, 56px) - 230px); }
/* Grid children default to a content-based min-width, so a wide table (the
   Items tab) forces its own column — and the whole page — wider than the
   viewport instead of scrolling inside .tbl-wrap where it belongs. */
.detail-grid > * { min-width: 0; }
.col { display: flex; flex-direction: column; gap: 16px; }
/* Right column: Activity & Notes as a real full-height timeline, not a
   shallow box with a fixed max-height leaving the rest of the panel blank. */
.order-activity-col { display: flex; flex-direction: column; min-height: 0; }
.order-activity-col .feed { flex: 1 1 auto; max-height: none; min-height: 0; }
.order-activity-col .composer { flex: none; }
/* Per-tab progress summary, now living INSIDE the Items tab (center column)
   instead of stretched across the full page above every column — compact
   cards with a real progress bar, not a shallow full-width strip. */
.op-progress-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.op-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-surface-raised); }
.op-card-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.op-card-value { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.op-bar { height: 5px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; }
.op-bar-fill { height: 100%; background: var(--brand); border-radius: 999px; }
.op-card.attention { border-color: var(--danger); background: var(--danger-soft); }
.op-card.attention .op-card-value { color: var(--danger); }
.items-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.items-head h3 { margin: 0; font-size: 14px; }
.items-head p { margin: 2px 0 0; }
/* Concise ServicePoints reconciliation card (left column) — the detailed
   per-item quote/supplier/tracking data moved to each item's own inspector
   (public/app.js's openItemInspector), not duplicated here. */
.sp-summary-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.sp-summary-row:last-of-type { border-bottom: none; }
.sp-summary-row b { font-variant-numeric: tabular-nums; }
@media (max-width: 1400px) {
  .detail-grid { grid-template-columns: minmax(230px, 0.75fr) minmax(480px, 2fr) minmax(260px, 0.9fr); }
}
/* Medium/tablet: three columns no longer fit comfortably — the right
   Activity column becomes an on-demand overlay (same rail-toggle pattern
   already used by the Inbox's customer-context rail) instead of squeezing. */
@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); min-height: 0; }
  .order-activity-col { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); z-index: 60;
    background: var(--bg-surface); box-shadow: -8px 0 24px rgba(0,0,0,.18); transform: translateX(100%);
    transition: transform .18s ease; padding: 0; }
  .order-activity-col.open { transform: translateX(0); }
  .order-activity-rail-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 59; }
  .order-activity-rail-scrim.open { display: block; }
  .order-activity-toggle { display: inline-flex !important; }
}
.order-activity-toggle { display: none; }
/* Small screens: true drill-in, one workspace at a time — never squeeze the
   left summary column and the items table side by side. */
@media (max-width: 760px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid .col { order: 2; }
  .detail-grid .drawer-center { order: 1; }
}
.litem { display: flex; gap: 10px; padding: 8px; border-bottom: 1px solid var(--line); }
.litem:last-child { border-bottom: none; }
.litem-img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex-shrink: 0; background: var(--bg-surface-hover); }
.litem-noimg { display: grid; place-items: center; color: var(--muted); }
.litem-body { min-width: 0; }
.litem-name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.litem-name a { color: var(--brand); }
.litem-name a:hover { text-decoration: underline; }
.litem-body { flex: 1; }
.litem.litem-requote { background: var(--warn-soft); border-left: 3px solid var(--amber, #d97706); }
.litem-sup { margin-top: 4px; }
.litem-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.litem-actions .qf-select { font-size: 12px; padding: 4px 7px; max-width: 160px; }
.litem-actions .btn.sm { padding: 4px 9px; font-size: 12px; }
.panel { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel h3 { margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.panel-body { padding: 14px 16px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--muted); font-size: 12.5px; flex-shrink: 0; }
.kv .v { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 5px; font-weight: 600; }
.field select, .field input, .field textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 13px; outline: none;
}
.field select:focus, .field input:focus, .field textarea:focus { border-color: var(--brand); }
.inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- activity / chat ---- */
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.feed-seg button { padding: 4px 10px; font-size: 11.5px; }
.feed-more { align-self: center; border: 1px solid var(--line); background: var(--bg-surface); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; margin-bottom: 4px; }
.feed-more:hover { background: var(--bg); color: var(--ink); }
.feed { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 14px 16px; }
.naro-b { max-width: 80%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; }
.naro-b .naro-bh { font-size: 11px; opacity: .75; margin-bottom: 3px; }
.naro-b .naro-bt { white-space: pre-wrap; }
.naro-b.out { align-self: flex-end; background: var(--brand); color: #fff; }
.naro-b.in { align-self: flex-start; background: var(--bg-surface); border: 1px solid var(--line); color: var(--ink); }
.naro-img { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; margin-top: 6px; border: 1px solid rgba(0,0,0,.1); }

.msg { display: flex; gap: 9px; align-items: flex-start; }
.msg .bubble { background: var(--bg-surface-hover); border-radius: 12px; padding: 8px 11px; max-width: 80%; }
/* my own messages sit on the right in brand colour (Google-chat style) */
.msg.mine { flex-direction: row-reverse; }
.msg.mine .bubble { background: var(--brand); color: #fff; border-radius: 12px 12px 4px 12px; }
.msg.mine .bubble .when { color: rgba(255, 255, 255, .8); }
.msg.mine .text .mention { color: #fff; text-decoration: underline; }
.msg.mine .att-file { background: rgba(255, 255, 255, .2); color: #fff; }
.msg.mine .msg-tool:hover { background: rgba(255, 255, 255, .25); }
/* notes stay yellow even when they're mine */
.msg.note .bubble { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--ink); border-radius: 12px; }
.msg.note .bubble .when { color: var(--muted); }
.msg .who { font-weight: 700; font-size: 12.5px; }
.msg .when { color: var(--muted); font-size: 11px; margin-left: 6px; font-weight: 500; }
.msg .text { margin-top: 2px; white-space: pre-wrap; line-height: 1.4; }
.msg .text .mention { color: var(--brand); font-weight: 700; }
.atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.att-img { max-width: 170px; max-height: 150px; border-radius: 8px; border: 1px solid var(--line); display: block; }
.att-img:hover { filter: brightness(.95); }
.att-file { font-size: 12.5px; color: var(--brand); font-weight: 600; background: var(--info-soft); padding: 5px 9px; border-radius: 7px; }
#fileName { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys {
  text-align: center; font-size: 11.5px; color: var(--muted); padding: 3px 0;
}
.sys span { background: var(--bg-inset); padding: 3px 10px; border-radius: 999px; }
.composer { border-top: 1px solid var(--line); padding: 12px 16px; position: relative; }
.msg-head { display: flex; align-items: center; gap: 6px; }
.msg-tools { margin-left: auto; display: flex; gap: 1px; opacity: 0; transition: opacity .1s; }
.msg:hover .msg-tools { opacity: 1; }
.msg-tool { border: none; background: transparent; cursor: pointer; font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 5px; }
.msg-tool:hover { background: var(--border-subtle); }
.mention-box { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 8px); background: var(--bg-surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 6; max-height: 200px; overflow-y: auto; }
.mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 11px; cursor: pointer; font-size: 13px; }
.mention-item .avatar { width: 24px; height: 24px; margin: 0; }
.mention-item.active, .mention-item:hover { background: var(--brand-soft); }
.composer textarea { width: 100%; resize: vertical; min-height: 56px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-family: inherit; font-size: 13px; }
.composer .row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: none; background: var(--bg-surface); padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.seg button.active { background: var(--brand); color: #fff; }

/* ---- dashboard ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.stat .n { font-size: 28px; font-weight: 800; }
.stat .l { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.stat .l .stat-sub { color: var(--ink-soft); opacity: .7; font-size: 11px; }
.stat.warn .n { color: var(--amber); }
.stat.danger .n { color: var(--red); }
.stat.good .n { color: var(--green); }
.danger-zone { border-color: var(--danger); background: var(--danger-soft); }
.pw-text { font-size: 13px; font-family: ui-monospace, monospace; background: var(--bg);
  padding: 1px 6px; border-radius: 4px; user-select: all; color: var(--ink); }
/* help / guide page */
.guide { padding: 22px 26px; max-width: 860px; line-height: 1.55; }
.guide h2 { font-size: 17px; margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.guide h2:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.guide p { margin: 6px 0; color: var(--ink); }
.guide ul, .guide ol { margin: 6px 0 6px 4px; padding-left: 22px; }
.guide li { margin: 4px 0; }
.guide code { background: var(--brand-soft); color: var(--brand); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 4px; font-size: 12.5px; font-weight: 600;
  font-family: ui-monospace, monospace; }
/* daily summary card */
.sum-card { padding: 4px 0 8px; margin-bottom: 18px; }
.sum-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.sum-head b { font-size: 14px; }
.sum-row { display: flex; align-items: flex-start; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.sum-row:last-child { border-bottom: none; }
.sum-row.zero { opacity: .55; }
.sum-label { width: 220px; flex-shrink: 0; font-weight: 600; color: var(--ink-soft); }
.sum-label:hover { color: var(--brand); text-decoration: underline; }
.sum-count { width: 34px; flex-shrink: 0; text-align: center; font-weight: 800; font-size: 15px; color: var(--muted); }
.sum-count.hot { color: var(--red); }
.sum-orders { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ochip { background: var(--bg-surface-hover); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.ochip:hover { border-color: var(--brand); color: var(--brand); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.bar-row .lbl { width: 150px; font-size: 12.5px; color: var(--ink-soft); flex-shrink: 0; }
.bar-track { flex: 1; background: var(--bg-surface-hover); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--brand); border-radius: 6px; }
.bar-row .val { width: 30px; text-align: right; font-weight: 700; font-size: 12.5px; }

/* ---- best sellers ---- */
.best-toolbar { display: flex; align-items: end; gap: 18px; padding: 13px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.best-toolbar label { display: block; color: var(--ink-soft); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.best-toolbar select, .best-toolbar input { border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; color: var(--ink); background: var(--bg-surface); min-width: 180px; }
.best-toolbar-note { margin-left: auto; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.best-toolbar-note span { color: var(--muted); font-size: 11px; }
.bs-stats { margin-bottom: 16px; }
.bs-revenue { font-size: 20px !important; line-height: 1.2; word-break: break-word; }
.best-table-card { overflow: hidden; }
.best-table-head { padding: 13px 16px; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.best-table-head b { display: block; }
.best-table-head span { color: var(--ink-soft); font-size: 12px; }
.best-table-scroll { overflow-x: auto; }
.best-table-card table { min-width: 850px; }
.bs-rank { color: var(--brand); font-size: 14px; }
.bs-new, .bs-up, .bs-down { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 7px; }
.bs-new { color: var(--brand); background: var(--brand-soft); }
.bs-up { color: var(--ok); background: var(--ok-soft); }
.bs-down { color: var(--danger); background: var(--danger-soft); }
.best-footnote { margin: 10px 2px 0; }
.bs-copy { margin-left: 8px; padding: 2px 7px; font-size: 12px; vertical-align: middle; }
.bs-tabs { margin-bottom: 14px; }
@media (max-width: 700px) { .best-toolbar-note { width: 100%; margin-left: 0; } }

/* ---- COG scan ---- */
.cog-product-row { cursor: pointer; }
.cog-product-row:hover { background: var(--bg-inset); }
.cog-caret { display: inline-block; font-size: 11px; color: var(--ink-soft); transition: transform .12s; }
.cog-product-row.open .cog-caret { transform: rotate(0deg); }
.cog-variant-row td { background: var(--bg-inset); border-top: 1px dashed var(--line); }
.cog-variant-cell { padding-left: 28px !important; }
.cog-edit { white-space: nowrap; }

/* ---- operations alert center ---- */
.ops-stats { margin-bottom: 16px; }
.ops-toolbar { justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ops-toolbar-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.ops-thresholds { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.ops-tools { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ops-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-filters .chip { padding: 6px 10px; }
.ops-filters .chip .n { margin-left: 5px; color: var(--muted); }
.ops-search { min-width: 220px; margin-left: auto; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-surface); color: inherit; }
.ops-count small { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.ops-empty-state { grid-column: 1 / -1; padding: 38px 20px; text-align: center; color: var(--muted); }
.ops-empty-state strong { display: block; color: var(--text-primary); font-size: 16px; margin-bottom: 5px; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.ops-section { padding: 0; overflow: hidden; border-top: 3px solid var(--line); }
.ops-section.ops-danger { border-top-color: var(--red); }
.ops-section.ops-warn { border-top-color: var(--amber); }
.ops-section.ops-info { border-top-color: var(--brand); }
.ops-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.ops-section-head b { display: block; font-size: 13.5px; }
.ops-section-head .mini { display: block; margin-top: 2px; }
.ops-count { font-weight: 800; font-size: 18px; color: var(--muted); flex-shrink: 0; }
.ops-count.hot { color: var(--red); }
.ops-section-body { max-height: 320px; overflow-y: auto; }
.ops-row { padding: 9px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ops-row:last-child { border-bottom: none; }
.ops-row:hover { background: var(--bg-inset); }
.ops-row-top { display: flex; align-items: center; gap: 8px; }
.ops-row-sub { margin-top: 2px; }
.ops-empty { padding: 16px; text-align: center; }
.ops-hero{display:flex;align-items:center;gap:16px;margin:4px 0 22px}.ops-hero h1{margin:0;font-size:30px}.ops-hero p{margin:3px 0 0;color:var(--muted)}.ops-hero-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:14px;background:#7d293d;color:#ffd0d8;font-size:35px;font-weight:800}.ops-live{margin-left:auto;color:#39c98a;text-align:right;font-size:12px}.ops-live small{color:var(--muted)}
.ops-summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.ops-summary-card{display:flex;align-items:center;gap:14px;text-align:left;padding:18px;border:1px solid var(--line);border-radius:11px;background:var(--bg-surface);color:inherit;cursor:pointer}.ops-summary-card:hover{border-color:var(--brand)}.ops-summary-card>span{display:grid;place-items:center;width:43px;height:43px;border-radius:10px;font-size:23px;background:#27384e}.ops-summary-card.email>span{background:#713146}.ops-summary-card.order>span{background:#75411e}.ops-summary-card.alert>span{background:#70541d}.ops-summary-card.task>span{background:#45326e}.ops-summary-card small,.ops-summary-card em{display:block;color:var(--muted);font-style:normal}.ops-summary-card b{display:block;font-size:26px}.ops-controlbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.ops-controlbar .ops-search{margin-left:auto}.ops-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:11px;background:var(--bg-surface)}.ops-table{width:100%;border-collapse:collapse;min-width:900px}.ops-table th,.ops-table td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}.ops-table th{color:var(--muted);font-weight:600}.ops-table-row{cursor:pointer}.ops-table-row:hover{background:var(--bg-inset)}.ops-table td:nth-child(2){min-width:260px}.ops-table td:nth-child(2) small{display:block;color:var(--muted);margin-top:4px;max-width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ops-type-icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;margin-right:9px;background:#293c53}.ops-type-icon.ops-ticket{background:#713146}.ops-type-icon.ops-product{background:#70541d}.ops-store-pill{display:inline-block;padding:6px 9px;border-radius:15px;background:var(--bg-inset);white-space:nowrap}.ops-priority{display:inline-block;padding:6px 11px;border-radius:15px;font-weight:700}.ops-priority-high{background:#55283a;color:#ff9eae}.ops-priority-medium{background:#55421b;color:#ffd166}.ops-priority-low{background:#193861;color:#82b5ff}.ops-table tfoot td{color:var(--muted)}.ops-pagination{float:right}.ops-pagination button{margin-left:5px;border:1px solid var(--line);background:transparent;color:inherit;border-radius:6px;padding:5px 9px}.ops-pagination button.active{border-color:var(--brand);color:var(--brand)}.ops-insight{display:flex;align-items:center;gap:14px;margin-top:16px;padding:16px 20px;border:1px solid var(--line);border-radius:10px;background:var(--bg-surface)}.ops-insight>span{font-size:24px;color:#65a9ff}.ops-insight p{margin:0;color:var(--muted);flex:1}.ops-insight b{color:var(--brand)}
@media(max-width:900px){.ops-summary-cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.ops-summary-cards{grid-template-columns:1fr}.ops-controlbar{flex-wrap:wrap}.ops-controlbar .ops-search{margin-left:0;width:100%}.ops-hero{align-items:flex-start}.ops-live{font-size:10px}}
@media (max-width: 700px) { .ops-toolbar { flex-direction: column; align-items: stretch; } .ops-toolbar-top, .ops-tools { flex-direction: column; align-items: stretch; } .ops-toolbar .best-toolbar-note { margin-left: 0; } .ops-search { min-width: 0; margin-left: 0; } }

/* ---- admin tables / forms ---- */
.admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px; align-items: end; padding: 14px 16px; border-bottom: 1px solid var(--line); }
/* drop the field's bottom margin inside the add-form so inputs + the Add button line up at the bottom */
.admin-form .field { margin-bottom: 0; }
.admin-form .btn { height: 38px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.slink { color: var(--brand); cursor: pointer; }
.slink:hover { text-decoration: underline; }

/* ---- popover / toast ---- */
.popover {
  position: fixed; top: 58px; right: 130px; width: 340px; background: var(--bg-surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 50;
  max-height: 70vh; overflow-y: auto;
}
.popover .ph { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; font-weight: 700; }
.notif-item { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.notif-item.unread { background: var(--info-soft); }
.notif-item .nb { font-size: 13px; }
.notif-item .nt { font-size: 11px; color: var(--muted); margin-top: 2px; }
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  /* inverse surface: navy-on-light in light, light-on-navy text in dark */
  background: var(--text-primary); color: var(--bg-surface); padding: 11px 18px; border-radius: 10px;
  z-index: 60; box-shadow: var(--shadow); font-weight: 600; font-size: 13px;
}
.requote-box { background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 12.5px; }

/* identity chip + login screen */
.me-wrap { display: flex; align-items: center; gap: 8px; }
.who-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; font-size: 12.5px; }
.who-chip .avatar { width: 24px; height: 24px; margin: 0; }
.who-chip .mini { color: var(--muted); }
.login-overlay { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 100; }
.login-overlay.hidden { display: none; }
/* Like login-overlay, but a translucent backdrop so the dashboard stays visible
   behind it — used for the feedback popup and other in-app modals. */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: grid; place-items: center; z-index: 100; }
.modal-overlay.hidden { display: none; }

/* ---- customer inbox ---- */
.demo-banner { border: 1px dashed var(--brand); background: var(--info-soft); }
.demo-banner .link, .link { color: var(--brand); cursor: pointer; text-decoration: underline; }
tr.inbox-unread { background: var(--info-soft); }
tr.inbox-unread b { font-weight: 700; }
.inbox-subjcell { max-width: 640px; }
.inbox-subj { font-weight: 600; }
.inbox-snippet { margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-when { margin-top: 4px; font-size: 11px; color: var(--muted); }
.inbox-open { white-space: nowrap; }
.tag.awaiting { background: var(--danger-soft); color: var(--danger); }

/* ---- ticket workspace (Zendesk-style: list left, conversation right) ---- */
/* ---- customer inbox ------------------------------------------------------
   Two cards side by side inside the page: the conversation list, and the
   conversation. Everything is white on a light ground with one blue accent —
   status is the only other colour, so a red dot in a quiet list reads as work
   from across the room. */
/* Four columns across the window: nav, the list, the conversation, and who you
   are talking to. The middle one gets whatever is left, because that is the one
   being read. */
.tk-wrap { display: grid; grid-template-columns: 376px minmax(0, 1fr) 272px; gap: 14px;
  height: calc(100vh - var(--topbar-h) - 24px); min-height: 420px; }
/* Nothing selected: no rail, and the conversation column takes its width. */
.tk-wrap.norail { grid-template-columns: 376px minmax(0, 1fr); }

/* The Inbox is a workspace, not a document, so it runs to the edges of the
   window: no page padding, no rounded corners floating on grey, and a 1px
   grid gap that shows the wrapper through as a hairline rule instead of a
   14px gutter. Every other view keeps its padded page — main.flush is added
   by paintInbox and taken off again on the way out. */
/* A column: the page tabs (and any banner) take their own height and the
   workspace fills what is left. It used to be height:100% of main while
   sitting BELOW the tabs, so the bottom of the conversation column — the
   composer's AI draft / Polish / More / Send row — fell under main's edge and
   overflow:hidden cut it off (reported 2026-09-07). */
main.flush { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
main.flush > * { flex: none; }
main.flush .tk-wrap { height: auto; flex: 1 1 auto; min-height: 0; gap: 1px; background: var(--line); }
main.flush .tk-list, main.flush .tk-convo { border: 0; border-radius: 0; box-shadow: none; background: var(--bg-surface); }
main.flush .tk-tabs { border-radius: 0; }
.tk-list { display: flex; flex-direction: column; overflow: hidden; }
.tk-convo { display: flex; flex-direction: column; overflow: hidden; }

/* Tabs read as tabs: a label with a count beside it and a rule under the one
   you are on. They used to be filled buttons, which made four of them look
   like four primary actions. */
/* Search and the whole-inbox controls, at the top of the list they act on.
   A 376px column will not hold four labelled controls, so Overview and Refresh
   keep their glyph and drop their word — the tooltip carries the name, and
   these two are reached far less often than the search beside them. */
.tk-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; background: var(--bg-surface); }
.tk-toolbar #tkSearch { flex: 1; min-width: 0; }
/* One height for everything in the row, so the two glyph buttons do not sit a
   few pixels lower than the field beside them. */
.tk-toolbar > * { height: 30px; box-sizing: border-box; }
.tk-toolbar .qf-select { padding: 0 8px; font-size: 11.5px; }
.tk-toolbar .btn.sm { padding: 0 8px; font-size: 12px; }
.tk-iconbtn { flex: none; width: 30px; padding: 0 !important; display: grid; place-items: center; }

/* Five tabs have to fit on one line, counts and all — "Solved 184" is wider
   than it looks. They wrap rather than scroll if a count ever outgrows the
   column: a second line is honest, and a hidden horizontal scrollbar just
   cuts the last tab in half without saying so. */
.tk-tabs { display: flex; flex-wrap: wrap; gap: 1px; border-bottom: 1px solid var(--line);
  padding: 0 4px; background: var(--bg-surface); }
.tk-tabs button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 12px 7px 10px; border: 0; background: none; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tk-tabs button:hover { color: var(--ink); }
.tk-tabs button.active { color: var(--brand); border-bottom-color: var(--brand); }
.tk-count { display: inline-block; min-width: 16px; text-align: center; padding: 1px 5px;
  border-radius: 999px; background: var(--bg-inset); color: var(--muted);
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-tabs button.active .tk-count { background: var(--brand-soft); color: var(--brand); }

/* Filter + sort, on their own line so the tabs stay a single row of statuses. */
.tk-listbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); }
.tk-listbar .qf-select { font-size: 12px; padding: 5px 8px; }
.tk-sort { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 9px; font-size: 13px; color: var(--muted); cursor: pointer; line-height: 1; }
.tk-sort:hover { border-color: var(--brand); color: var(--brand); }

.tk-items { flex: 1; overflow-y: auto; padding: 4px; }
.tk-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px;
  padding: 11px 10px; border-radius: 11px; cursor: pointer; }
.tk-item + .tk-item { box-shadow: 0 -1px 0 var(--line); }
.tk-item:hover { background: var(--bg-inset); box-shadow: none; }
.tk-item:hover + .tk-item { box-shadow: none; }
.tk-item.sel { background: var(--brand-soft); box-shadow: none; }
.tk-item.sel + .tk-item { box-shadow: none; }

/* Initials rather than a generic silhouette: at a glance down the column the
   shapes and colours are what you actually recognise a conversation by. */
.tk-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; user-select: none; }
.tk-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-top { display: flex; align-items: center; gap: 7px; }
.tk-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tk-dot.open { background: #dc2626; }
.tk-dot.pending { background: #2563eb; }
.tk-dot.solved { background: #16a34a; }
.tk-dot.snoozed { background: var(--warn); }
/* Gmail-style read/unread: bold+dark only while genuinely unread (see
   .tk-unread below) — a read row settles back to a lighter weight instead of
   every row looking identically "important" regardless of whether anyone's
   actually seen it. */
.tk-cust { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.tk-msgs { display: inline-block; min-width: 18px; text-align: center; border-radius: 999px;
  background: var(--bg-inset); color: var(--muted); font-size: 10.5px; font-weight: 700; padding: 1px 6px;
  font-variant-numeric: tabular-nums; }
.tk-subj { font-weight: 400; font-size: 12.5px; color: var(--ink-soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tk-item.tk-unread .tk-cust { font-weight: 700; color: var(--ink); }
.tk-item.tk-unread .tk-subj { font-weight: 700; color: var(--ink); }
.tk-item.tk-unread { position: relative; }
.tk-item.tk-unread::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.tk-snip { font-size: 12px; color: var(--ink-soft); line-height: 1.45; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tk-meta { margin-top: 4px; font-size: 11.5px; }
.tk-mine { color: var(--brand); font-weight: 600; }
.tk-susp { color: var(--warn); }
.tk-item-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.tk-item-tags span { font-size: 10px; background: var(--bg-inset); color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.tk-listend { text-align: center; color: var(--muted); font-size: 12px; padding: 18px 0 22px; }

/* ---- conversation ---- */
/* Two rows: the subject with its status, then everything else about the
   conversation on one meta line — sender, store, order, mailbox and tags.
   Tags used to take a third row of their own, which is 30px of header on
   every conversation for something most of them do not have. */
.tk-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.tk-head-main { min-width: 0; flex: 1; }
.tk-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-head h2 { margin: 0; font-size: 16px; line-height: 1.3; }
/* The status says itself once, in words, next to the subject — the segmented
   control beside it is for changing it, not for reading it. */
.tk-statuspill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tk-statuspill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; font-style: normal; }
.tk-statuspill.open { background: var(--danger-soft); color: var(--danger); }
.tk-statuspill.pending { background: var(--brand-soft); color: var(--brand); }
.tk-statuspill.solved { background: var(--ok-soft); color: var(--ok); }
.tk-statuspill.snoozed { background: var(--warn-soft); color: var(--warn); }
.tk-subline { margin-top: 4px; line-height: 1.7; }
.tk-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Four plain words. They had a border each AND a border around the group,
   because the element also carried .seg — a box drawn inside a box. Only the
   one you are on is marked, in the colour of the state it sets. */
.tk-statusseg { display: inline-flex; gap: 2px; }
.tk-statusseg button { border: 0; background: none; border-radius: 8px;
  padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.tk-statusseg button:hover { background: var(--bg-surface-hover); color: var(--ink); }
.tk-statusseg button.active.st-open { background: var(--danger-soft); color: var(--danger); }
.tk-statusseg button.active.st-pending { background: var(--brand-soft); color: var(--brand); }
.tk-statusseg button.active.st-snoozed { background: var(--warn-soft); color: var(--warn); }
.tk-statusseg button.active.st-solved { background: var(--ok-soft); color: var(--ok); }

/* The rail is a reference column and a fixed one: it needs enough width to
   read a summary and a money figure, and nothing beyond that belongs to it.
   Everything else the window has goes to the conversation. */
/* The stream is the conversation column's own scroller, and the only thing
   between its header and its composer. There is no wrapper around it: one
   less nested box, and the composer below it is exactly as wide. */
.tk-stream { flex: 1; min-height: 72px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 14px; padding: 18px 22px; }
/* A short thread sat at the top with the rest of the panel blank under it.
   Pushing the first message down puts the newest one against the composer —
   where the reply is being written, and where the eye already is. A thread
   long enough to scroll is unaffected: auto margins collapse once the
   content fills the box. */
.tk-stream > :first-child { margin-top: auto; }

/* A message is an avatar and a bubble; ours sits on the right with the avatar
   after it. Both bubbles are light — a solid brand-blue block of text was the
   loudest thing on a page whose job is reading. */
/* Capped in both directions: a percentage alone leaves a 60-character line on a
   narrow pane and a 140-character one on a wide monitor, and neither is a
   comfortable read. */
/* 2026-09-10: was min(78%, 660px) regardless of how wide the reader pane
   actually was — a 1000px-wide center column still capped every message at
   660px, which is most of the "unused space beside a narrow email" complaint
   by itself. The bubble now genuinely uses the pane; the READING measure
   (comfortable line length for prose) is a separate, narrower max-width on
   .tk-prose below, not on the bubble itself — so a bubble that is mostly a
   quoted address block or a link is free to be as wide as the bubble allows,
   while running paragraph text still wraps at a comfortable width inside it. */
.tk-msgrow { display: flex; gap: 10px; align-items: flex-start; max-width: min(94%, 980px); min-width: 0; }
.tk-msgrow.out { flex-direction: row-reverse; align-self: flex-end; }
.tk-msgav { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid;
  place-items: center; font-size: 10.5px; font-weight: 700; margin-top: 2px; }
.naro-b { border-radius: 14px; padding: 11px 14px; font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; min-width: 0; max-width: 100%; }
.naro-b.in { background: var(--bg-inset); color: var(--ink); }
.naro-b.out { background: var(--info-soft); color: var(--ink); }
.naro-bh { display: flex; gap: 10px; align-items: baseline; font-size: 11px; color: var(--muted);
  margin-bottom: 5px; }
.naro-bh .when { margin-left: auto; white-space: nowrap; }
.naro-bt { white-space: pre-wrap; }
/* The running text of the message: a comfortable reading measure (~78
   characters) even inside a much wider bubble — long paragraphs don't
   stretch edge to edge on a wide monitor, but nothing here stops a link or
   an address line (styled separately below) from using the rest of the
   bubble's width when it needs to. */
.tk-prose { max-width: 62ch; overflow-wrap: anywhere; word-break: break-word; }
/* A URL rendered on its own line. overflow-wrap + inline-block lets it wrap
   like a normal word instead of forcing the whole row (and the bubble under
   min-width:0) wider than the pane — the exact failure in the screenshot
   this was built from: one long Google Maps URL pushing a horizontal
   scrollbar under the whole conversation. */
.tk-prose a, .qm-b a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.tk-prose a.tk-maplink { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; }
.tk-prose a.tk-maplink:hover { text-decoration: underline; }
.tk-prose a:hover, .qm-b a:hover { opacity: .85; }

.tk-note { align-self: stretch; background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 12px;
  padding: 12px 14px; font-size: 13px; }
.tk-note-h { display: flex; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--warn);
  margin-bottom: 6px; }
.tk-note-h .when { margin-left: auto; color: var(--warn); }
.tk-note-by { margin-top: 8px; font-size: 11.5px; color: var(--warn); }

/* ---- the rail beside the conversation ---- */
/* The rail is a reference column, not a page: every section is one line until
   you want it, so what matters stays above the fold instead of being scrolled
   for. */
/* Its own column, its own scrollbar, floor to ceiling. The hairline beside it
   is the grid gap showing the wrapper through, so it needs no border of its
   own — one would double it. */
/* The right rail is a CONTEXTUAL side panel of the same product — an inset
   surface, not a second white application (refinement 2026-09-07). */
.tk-ai-summary { background: var(--bg-inset); padding: 14px 14px 18px; min-height: 0;
  overflow-y: auto; font-size: 12.5px; line-height: 1.5; }
.tk-ai-card { background: var(--info-soft); border: 1px solid var(--accent-line); border-radius: 11px; padding: 11px 12px; }
.tk-ai-summary-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font-size: 12.5px; }
.tk-ai-summary-text { white-space: pre-wrap; margin-bottom: 7px; color: var(--ink); }
.tk-ai-card .btn { width: 100%; margin-top: 8px; }

.tk-cust-card { margin-top: 14px; }
.tk-cust-who { display: flex; gap: 10px; align-items: center; margin: 8px 0 10px; }
.tk-cust-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px;
  color: var(--muted); margin-bottom: 10px; }
.tk-cust-who .tk-av { width: 34px; height: 34px; }
.tk-cust-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.tk-cust-mail { font-size: 11.5px; color: var(--brand); overflow: hidden; text-overflow: ellipsis; }
.tk-cust-sec { border-top: 1px solid var(--line); }
.tk-cust-label { font-weight: 600; font-size: 12px; color: var(--ink); }
.tk-sec-head { display: flex; align-items: center; gap: 8px; width: 100%; background: none;
  border: 0; padding: 9px 0; cursor: pointer; text-align: left; }
.tk-sec-head:hover .tk-cust-label { color: var(--brand); }
.tk-sec-arrow { font-size: 9px; color: var(--muted); width: 9px; }
.tk-sec-val { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tk-sec-body { padding: 0 0 9px; }
.tk-cust-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 3px 0; font-size: 12px; }
.tk-cust-row .muted { font-size: 11px; }
.tk-cust-row a.link { cursor: pointer; color: var(--brand); }
.tk-cust-row.is-current { background: var(--warn-soft); border-radius: 6px; padding: 4px 6px; margin: 0 -6px; }
.tk-cust-tag { font-size: 10px; background: var(--brand); color: #fff; border-radius: 20px; padding: 1px 7px; }
.tk-tl-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px;
  align-items: baseline; padding: 3px 0; font-size: 11.5px; }
.tk-tl-icon { font-size: 10px; }
.tk-tl-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-tl-when { font-size: 10px; white-space: nowrap; }

/* ---- tags ---- */
.tk-tags { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center;
  margin: 0 0 0 6px; vertical-align: middle; }
.tk-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  background: var(--bg-inset); color: var(--ink-soft); border-radius: 999px; padding: 3px 9px; }
.tk-tag button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 12px; line-height: 1; padding: 0; }
.tk-tag button:hover { color: var(--danger); }
.tk-tag-add { font-size: 11px; color: var(--brand); background: var(--brand-soft); border: 0;
  border-radius: 999px; padding: 2px 9px; cursor: pointer; font-weight: 600; }
.tk-tag-add:hover { filter: brightness(.96); }

/* ---- composer ---- */
/* Every band here is as tall as its contents and no taller. The box starts
   at three rows because an empty reply does not need more, and it is still
   drag-resizable — that height is remembered per person. */
.tk-composer { border-top: 1px solid var(--line); padding: 9px 16px 10px; position: relative;
  display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }   /* shrinks before it can overflow the column */
.tk-composer.note-mode { background: var(--warn-soft); }
.tk-ctop { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; flex-wrap: wrap; }
/* Sits at the end of the composer's top row, beside the mailbox it sends from. */
.tk-aicost { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tk-aicost::before { content: "·"; margin: 0 6px; color: var(--line-dark); opacity: .5; }
.tk-modeseg { display: inline-flex; gap: 6px; }
.tk-modeseg button { border: 1px solid var(--line); background: var(--bg-surface); border-radius: 8px;
  padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.tk-modeseg button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Capped so a reply box dragged tall can never push the tool row (AI draft ·
   Polish · More · Send) under the column's edge, where overflow:hidden would
   swallow it — the remembered height is reapplied on every repaint. */
.tk-composer textarea { width: 100%; resize: vertical; flex: 0 1 auto; min-height: 80px; max-height: 34vh; border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 12px; font-family: inherit; font-size: 13.5px; line-height: 1.5; }
.tk-composer textarea:focus { border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft); }
.tk-composer.note-mode textarea { border-color: var(--warn-line); background: var(--warn-soft); }
.tk-composer .row { display: flex; gap: 5px; margin-top: 7px; align-items: center; flex-wrap: wrap; }
/* The tool buttons are a row of equals and read better small; the send group
   keeps the standard size, because that is the one being aimed at. */
.tk-composer .row .btn.sm { padding: 6px 10px; font-size: 12px; }
.tk-composer .tk-sendgroup .btn.sm { padding: 7px 13px; font-size: 12.5px; }
/* The send group stays together on the right, so the destructive-looking
   "solve" never sits where the eye expects plain "send". */
.tk-sendgroup { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.tk-scheduled { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--warn);
  background: var(--warn-soft); border-top: 1px solid var(--warn-line); padding: 9px 18px; }
.tk-scheduled .btn { margin-left: auto; }
.tk-snoozed-note { font-size: 11.5px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.tk-load-body { margin-top: 8px; }
.tk-translate { margin-top: 8px; }
/* Was ALWAYS both — the original above, then the full translation stacked
   right under it, permanently, on every non-English message. A toggle
   (2026-09-10): translated is the default view when one exists, "View
   original" swaps the SAME bubble's text rather than showing a second copy. */
.tk-translation { margin-top: 9px; padding: 9px 11px; border-left: 3px solid var(--purple);
  background: var(--purple-soft); color: var(--ink); border-radius: 0 8px 8px 0;
  font-size: 12.5px; line-height: 1.45; }
.tk-translation .tk-prose { max-width: none; }
.tk-translation-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tk-translation-h b { color: var(--purple); font-size: 11px; font-weight: 700; }
.tk-translation-toggle { margin-left: auto; background: none; border: 0; padding: 0; color: var(--purple);
  font-size: 11px; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* A 13-inch laptop is 1280 wide: at full size the side columns leave the
   conversation narrower than either of them, which is the wrong way round.
   They give a little back before the 1100px layout takes over. */
@media (max-width: 1400px) {
  .tk-wrap { grid-template-columns: 344px minmax(0, 1fr) 262px; }
  .tk-wrap.norail { grid-template-columns: 344px minmax(0, 1fr); }
  /* The four status buttons and the assignee are what push the header onto a
     third row here. Trimmed, they sit beside the subject instead. */
  .tk-statusseg button { padding: 5px 9px; font-size: 11.5px; }
  .tk-controls { gap: 6px; }
  /* Same for the five list tabs: a narrower column, so they give up padding
     rather than a line — taking the width off the conversation instead would
     be paying for the tabs with the thing being read. */
  .tk-tabs button { padding: 12px 5px 10px; font-size: 12px; }
}
/* A 768px-tall laptop has ~630px of panel: at that size the composer is a
   quarter of it before a word is typed. Dragging it taller still wins — that
   sets an inline height, which beats this. */
@media (max-height: 820px) {
  .tk-composer { padding: 8px 16px 9px; }
  .tk-composer textarea { height: 68px; min-height: 68px; }
}
/* Under 1366px (the common laptop) three columns leave the conversation ~420px
   wide: the header wraps to a dozen lines and the composer is squeezed out of
   the column. So the rail leaves the grid and comes back on demand through
   the 👤 toggle (the overlay rule below). */
@media (max-width: 1366px) {
  .tk-wrap, .tk-wrap.norail { grid-template-columns: 330px minmax(0, 1fr); }
  .tk-wrap .tk-ai-summary { display: none; }
}
/* Too narrow for three columns side by side. They used to stack into one long
   scroll (the list, then the whole conversation, one under the other) — a
   real drill-in instead: the list OR the open conversation, one screen at a
   time, like the list-then-detail pattern every mail app on a phone uses.
   .reading is added to .tk-wrap by paintInbox whenever a ticket is open. */
@media (max-width: 800px) {
  .tk-wrap, .tk-wrap.norail { grid-template-columns: 1fr; height: calc(100vh - var(--topbar-h) - 24px); }
  main.flush .tk-wrap { height: auto; flex: 1 1 auto; }
  main.flush { overflow: hidden; }
  .tk-ai-summary { max-height: 260px; }
  .tk-wrap.reading .tk-list { display: none; }
  .tk-wrap:not(.reading) .tk-convo { display: none; }
  .tk-back { display: inline-flex !important; }
}
/* Hidden by default (desktop/tablet show both columns, so there is nothing to
   go "back" from); the rule above turns it on only under 800px. */
.tk-back { display: none; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 2px;
  margin-right: 4px; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; flex: none; }

/* Reply box in the order drawer's Customer emails panel */
.drawer-reply textarea { width: 100%; resize: vertical; min-height: 60px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13px; }
.drawer-reply textarea:focus { border-color: var(--brand); outline: none; }

/* Settings → Email support team checklist */
.support-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; }
.support-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.support-row:hover { border-color: var(--brand); background: var(--bg-inset); }
.support-row input { accent-color: var(--brand); width: 15px; height: 15px; }

/* spinner + import progress */
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
.btn .spinner { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.import-progress { margin-top: 14px; }
.import-progress .bar { height: 8px; background: var(--bg-inset); border-radius: 999px; overflow: hidden; }
.import-progress .fill { height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width .25s ease; }
.nav-badge { margin-left: auto; background: var(--red); color: #fff; border-radius: 10px; font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; font-weight: 700; }
/* ---- time tracking ---- */
.tt-wrap { max-width: 860px; }
.tt-wrap .card { padding: 18px; margin-bottom: 16px; }
.tt-timer { font-size: 48px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 6px 0 2px; color: var(--ink); }
.tt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 6px; vertical-align: 1px; }
.tt-dot.live { background: var(--green); box-shadow: 0 0 0 4px rgba(22,163,74,.18); }
.tt-dot.brk { background: var(--amber); box-shadow: 0 0 0 4px rgba(217,119,6,.18); }
.btn.amber { background: var(--amber); color: #fff; }
.tt-clockbtns { display: flex; justify-content: center; gap: 10px; }
.tt-clockbtns .btn { padding: 12px 24px; font-size: 15px; }
/* "command center" dark clock card */
.tt-clock-card { background: radial-gradient(120% 150% at 50% -25%, #21315c 0%, #131d35 45%, #0b1020 100%); border-color: #2a3756 !important; color: #e8edff; box-shadow: 0 14px 44px rgba(11,16,32,.35); position: relative; overflow: hidden; }
.tt-clock-card .mini { color: #9fb0d6; }
.tt-clock-card #ttCurrent b, .tt-greet-sub b, .tt-digest b { color: #fff; }
.tt-greet { font-size: 19px; font-weight: 700; letter-spacing: -.2px; color: #fff; }
.tt-greet-sub { font-size: 13px; color: #aebbdc; margin-top: 4px; min-height: 18px; }
.tt-reveal { animation: ttReveal .5s ease both; }
@keyframes ttReveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.tt-clock-card .tt-timer { color: #fff; text-shadow: 0 0 22px rgba(91,140,255,.5); }
.tt-clock-card .tt-dot { background: #6b7a9c; box-shadow: none; }
.tt-clock-card .tt-dot.live { background: #2bd47d; animation: ttPulse 1.7s ease-in-out infinite; }
.tt-clock-card .tt-dot.brk { background: var(--amber); box-shadow: 0 0 0 4px rgba(217,119,6,.22); }
@keyframes ttPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(43,212,125,.22), 0 0 10px rgba(43,212,125,.45); } 50% { box-shadow: 0 0 0 7px rgba(43,212,125,.10), 0 0 20px rgba(43,212,125,.85); } }
.tt-digest { font-size: 12.5px; color: #9fb0d6; margin-top: 16px; border-top: 1px solid rgba(255,255,255,.09); padding-top: 12px; }
.tt-nova { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #cfe0ff; background: rgba(91,140,255,.18); border: 1px solid rgba(91,140,255,.35); padding: 1px 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 10px rgba(91,140,255,.25); }
/* app-wide top-bar greeting */
.topbar-greet { color: var(--ink-soft); font-size: 12.5px; font-weight: 500; white-space: nowrap; margin-left: 4px; }
@media (max-width: 920px) { .topbar-greet { display: none; } }

/* ---- Time page: My Tasks + What (left column) | Time + Report (far right) ---- */
.tt-layout { display: flex; gap: 24px; align-items: flex-start; }
.tt-tasks { flex: 1 1 460px; min-width: 0; }                            /* My Tasks — left, fills the space */
.tt-layout .tt-wrap { flex: 0 1 720px; }                               /* Time + Report + What — right */
.tt-tasks .card { padding: 16px; margin-bottom: 16px; }
.tt-tasks .card h3 { font-size: 15px; }
.tt-day-input { width: 100%; padding: 11px 12px; font-size: 14px; line-height: 1.4; font-family: inherit; border: 1px solid var(--line); border-radius: 8px; outline: none; box-sizing: border-box; resize: vertical; min-height: 48px; }
.tt-day-input:focus { border-color: var(--brand); }
.tt-task { display: block; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 7px; cursor: pointer; }
.tt-task:hover { border-color: var(--brand); background: var(--bg-inset); }
@media (max-width: 1100px) { .tt-layout { flex-direction: column; } .tt-tasks { flex: none; width: 100%; max-width: 720px; } .tt-layout .tt-wrap { flex: none; width: 100%; margin-left: 0; } }

/* ---- task board ---- */
.kb-board { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 14px; align-items: flex-start; scrollbar-width: auto; scrollbar-color: #b8c2d0 transparent; overscroll-behavior-x: contain; }
.kb-board::-webkit-scrollbar { height: 12px; }
.kb-board::-webkit-scrollbar-track { background: transparent; }
.kb-board::-webkit-scrollbar-thumb { background: #c3ccd8; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.kb-board::-webkit-scrollbar-thumb:hover { background: #a2aebd; background-clip: padding-box; }
.kb-list { flex: 0 0 280px; width: 280px; background: var(--bg-inset); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 180px); }
.kb-list-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; padding: 2px 4px 8px; }
.kb-count { background: var(--bg-surface); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; font-size: 11px; padding: 0 7px; font-weight: 600; }
.kb-recur { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #7c3aed; background: var(--purple-soft); border: 1px solid #ddd6fe; border-radius: 5px; padding: 1px 5px; }
.kb-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 8px; }
.kb-card { background: var(--bg-surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; box-shadow: 0 1px 2px rgba(15,23,42,.06); cursor: pointer; }
.kb-card:hover { border-color: var(--brand); }
.kb-card.kb-dragging { opacity: .4; }
.kb-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.kb-label { display: inline-flex; align-items: center; gap: 3px; color: #fff; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.kb-ctitle { font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.kb-ctitle.kb-done { color: var(--muted); }
.kb-done-dot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; font-size: 10px; font-weight: 800; vertical-align: 1px; }
.kb-complete { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-surface); color: var(--ink-soft); border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 13px; cursor: pointer; }
.kb-complete:hover { border-color: var(--green); color: var(--green); }
.kb-complete.done { background: var(--green); border-color: var(--green); color: #fff; }
.kb-d-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.kb-timer { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-surface); color: var(--ink-soft); border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: 13px; cursor: pointer; }
.kb-timer:hover { border-color: var(--accent); color: var(--accent); }
.kb-timer.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.kb-tracked { font-size: 12px; color: var(--muted); font-weight: 600; }
.tt-task-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 6px; }
.tt-task-row .tt-task { flex: 1; margin: 0; }
.tt-task-go { flex: 0 0 auto; align-self: center; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg-surface); color: var(--accent); border-radius: 8px; font-size: 12px; line-height: 1; cursor: pointer; }
.tt-task-go:hover, .tt-task-go.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tt-task-check { flex: 0 0 auto; width: 22px; height: 22px; align-self: center; border: 1.5px solid var(--line); border-radius: 50%; background: var(--bg-surface); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; display: grid; place-items: center; }
.tt-task-check:hover { border-color: var(--green); }
.tt-task-check.on { background: var(--green); border-color: var(--green); }
.tt-task-done { text-decoration: line-through; color: var(--muted); }
.tt-idle-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: none; align-items: center; justify-content: center; z-index: 210; }
.tt-idle-box { background: var(--bg-surface); border-radius: 14px; padding: 22px 24px; max-width: 420px; width: calc(100% - 40px); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.tt-idle-title { font-weight: 800; font-size: 16px; color: #7c3aed; margin-bottom: 8px; }
.tt-idle-msg { font-size: 13.5px; color: var(--ink-soft, #334155); line-height: 1.5; margin: 0 0 16px; }
.tt-idle-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.tt-idle-btns .btn { flex: 1; min-width: 130px; justify-content: center; }
/* My Tasks → quick checklist popup */
.tt-chk-box { background: var(--bg-surface); border-radius: 14px; padding: 18px 20px; max-width: 460px; width: calc(100% - 40px); max-height: 82vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.tt-chk-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.tt-chk-head b { font-size: 15px; }
.tt-chk-head .close-x { margin-left: auto; }
.tt-chk-list { display: flex; flex-direction: column; gap: 2px; }
.tt-day-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.tt-day-row:last-of-type { border-bottom: none; }
.tt-day-text { flex: 1; font-size: 13.5px; }
.tt-day-recur { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7c3aed; background: var(--purple-soft); border: 1px solid #ddd6fe; border-radius: 5px; padding: 1px 5px; }
.tt-day-x { border: none; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; padding: 0 4px; border-radius: 5px; }
.tt-day-row:hover .tt-day-x { opacity: .7; }
.tt-day-x:hover { opacity: 1; background: var(--danger-soft); color: var(--danger); }
.kb-order-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--bg-surface-hover); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.kb-order-chip a { color: var(--brand); font-weight: 700; cursor: pointer; }
.kb-order-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 200px; overflow: auto; }
.kb-order-res { text-align: left; border: 1px solid var(--line); background: var(--bg-surface); border-radius: 7px; padding: 6px 9px; font-size: 12.5px; cursor: pointer; }
.kb-order-res:hover { border-color: var(--accent); background: var(--bg-inset); }
.tt-nova-note { font-size: 12.5px; color: #7c3aed; background: var(--purple-soft); border: 1px solid #ddd6fe; border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; font-weight: 600; }
.kb-nova-banner { font-size: 13px; color: #7c3aed; background: var(--purple-soft); border: 1px solid #ddd6fe; border-radius: 9px; padding: 9px 13px; margin-bottom: 12px; font-weight: 600; }
.kb-status { font-size: 11px; font-weight: 700; border: 1px solid transparent; border-radius: 6px; padding: 2px 4px; cursor: pointer; appearance: none; -webkit-appearance: none; }
.kb-st-InProgress { background: #dbeafe; color: #1d4ed8; }
.kb-st-Hold { background: var(--warn-soft); color: var(--warn); }
.kb-st-Done { background: var(--ok-soft); color: var(--ok); }
.kb-st-None { background: var(--bg-surface-hover); color: #64748b; }
.kb-d-actions .kb-status { font-size: 13px; padding: 7px 10px; }
.kb-card { position: relative; }
.kb-card-tools { position: absolute; top: 3px; right: 3px; display: flex; gap: 2px; opacity: 0; }
.kb-card:hover .kb-card-tools { opacity: 1; }
.kb-card-copy, .kb-card-del { border: none; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.kb-card-copy:hover { background: var(--border-subtle); color: var(--ink); }
.kb-card-del { font-size: 15px; }
.kb-card-del:hover { background: var(--danger-soft); color: var(--danger); }
.kb-chk-handle { cursor: grab; color: var(--muted); user-select: none; font-size: 12px; flex: 0 0 auto; }
.kb-chk-handle:active { cursor: grabbing; }
.kb-chk-dragging { opacity: .5; }
.kb-list-head { display: flex; align-items: center; gap: 6px; }
.kb-list-name { cursor: pointer; }
.kb-list-name:hover { text-decoration: underline dotted; }
.kb-list-edit-input { font-size: 14px; font-weight: 700; color: var(--ink); border: 1px solid var(--brand); border-radius: 6px; padding: 2px 7px; width: 150px; max-width: 70%; outline: none; }
.kb-board-edit-input { font-size: 13px; font-weight: 600; color: var(--ink); border: 1px solid var(--brand); border-radius: 7px; padding: 5px 9px; width: 160px; outline: none; }
.kb-list-edit { border: none; background: transparent; color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; padding: 0 4px; border-radius: 5px; }
.kb-list:hover .kb-list-edit { opacity: .65; }
.kb-list-edit:hover { opacity: 1; background: var(--border-subtle); color: var(--ink); }
.kb-list-del { border: none; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; padding: 0 5px; border-radius: 5px; }
.kb-list:hover .kb-list-del { opacity: .65; }
.kb-list-del:hover { opacity: 1; background: var(--danger-soft); color: var(--danger); }
.kb-prog { height: 5px; background: var(--border-subtle); border-radius: 6px; overflow: hidden; margin-top: 7px; }
.kb-prog > span { display: block; height: 100%; background: var(--green); }
.kb-prog.big { height: 7px; margin: 4px 0 10px; }
.kb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.kb-badge { font-size: 10.5px; color: var(--ink-soft); background: var(--bg-surface-hover); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.kb-badge.over { background: var(--danger-soft); color: var(--danger); }
.kb-badge.done { background: var(--ok-soft); color: var(--ok); }
.kb-badge.pri-High { background: var(--warn-soft); color: var(--warn); }
.kb-badge.pri-Urgent { background: var(--danger-soft); color: var(--danger); }
.kb-av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 9px; font-weight: 700; margin-left: -4px; border: 2px solid #fff; }
.kb-addcard { margin-top: 8px; background: transparent; border: 0; color: var(--ink-soft); text-align: left; padding: 7px 6px; border-radius: 7px; font-weight: 600; cursor: pointer; }
.kb-addcard:hover { background: var(--border-subtle); color: var(--ink); }
.kb-addlist { background: rgba(255,255,255,.55); }
.kb-addlist-btn { width: 100%; background: transparent; border: 0; color: var(--ink-soft); font-weight: 600; padding: 8px; cursor: pointer; }
.kb-newcard-box { background: var(--bg-surface); border: 1px solid var(--brand); border-radius: 9px; padding: 8px; }
.kb-newcard { width: 100%; border: 0; outline: 0; resize: vertical; font: inherit; margin-bottom: 6px; }

/* card drawer */
.drawer-panel.kb-drawer { width: min(760px, 96vw); padding: 22px 24px; }
.kb-d-head { display: flex; align-items: flex-start; gap: 10px; }
.kb-d-title { flex: 1; font-size: 19px; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; color: var(--ink); }
.kb-d-title:hover, .kb-d-title:focus { border-color: var(--line); background: var(--bg-surface); outline: none; }
.kb-d-grid { display: grid; grid-template-columns: 1fr 290px; gap: 22px; margin-top: 8px; }
.kb-d-side { border-left: 1px solid var(--line); padding-left: 20px; }
.kb-d-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin: 16px 0 6px; }
.kb-d-desc { width: 100%; min-height: 80px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; font: inherit; resize: vertical; }
.kb-chk { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.kb-chk span.done { text-decoration: line-through; color: var(--muted); }
.kb-chk-x { margin-left: auto; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.kb-comments { display: flex; flex-direction: column; gap: 10px; }
.kb-comment { display: flex; gap: 9px; }
.kb-comment .avatar { flex: 0 0 auto; }
.kb-activity { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.kb-act { font-size: 12px; color: var(--ink-soft); }
.kb-asg-list { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; }
.kb-asg { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.kb-d-labels { display: flex; flex-wrap: wrap; gap: 5px; }
.kb-label-x { border: 0; background: transparent; color: rgba(255,255,255,.85); cursor: pointer; padding: 0 0 0 2px; }
.kb-palette { display: flex; align-items: center; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.kb-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); cursor: pointer; }
@media (max-width: 760px) { .kb-d-grid { grid-template-columns: 1fr; } .kb-d-side { border-left: 0; padding-left: 0; } }
.tt-acts { display: flex; flex-direction: column; gap: 6px; }
.tt-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-surface); cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.tt-act:hover { border-color: var(--brand); background: var(--bg-inset); }
.tt-act.active, .tt-act.active:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.tt-act-name { display: flex; align-items: center; min-width: 0; }
.tt-act-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tt-act .tt-t { font-variant-numeric: tabular-nums; opacity: .9; font-size: 12.5px; }
.tt-summary { border: 1px solid var(--line); border-radius: 10px; padding: 12px; font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); background: var(--bg-inset); resize: vertical; }
.tt-edit-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 5px; font-size: 12.5px; background: var(--bg-surface); }
.tt-edit-row span { flex: 1; }
.tt-edit-x { flex: 0 0 auto; border: none; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; padding: 2px 7px; border-radius: 6px; }
.tt-edit-x:hover { background: var(--danger-soft); color: var(--danger); }
.tt-edit-row.marked { background: var(--danger-soft); border-color: var(--danger); }
.tt-edit-row.marked span { text-decoration: line-through; color: var(--muted); }
.tt-x { border: 0; background: transparent; color: inherit; opacity: .55; cursor: pointer; font-size: 14px; padding: 0 2px; }
.tt-x:hover { opacity: 1; }
.email-item { border-left: 3px solid var(--line); padding: 6px 0 6px 10px; margin: 8px 0; }
.email-item.inbound { border-left-color: var(--brand); }
.email-item.outbound { border-left-color: #94a3b8; }
.email-item .email-meta { display: flex; gap: 8px; align-items: center; }
.email-item .email-subj { font-weight: 600; margin: 2px 0; }
.login-card { background: var(--bg-surface); border-radius: 14px; padding: 28px 26px; width: 340px; box-shadow: var(--shadow); text-align: center; }
.login-card h2 { font-size: 20px; }
.login-card .field { text-align: left; }
.login-logo { display: flex; justify-content: center; margin-bottom: 6px; }
.login-logo img { max-width: 260px; width: 100%; height: auto; }
.login-err { color: var(--red); font-size: 12.5px; min-height: 18px; text-align: left; margin: 2px 0; }

/* import drop zone */
.dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 26px 18px; text-align: center; color: var(--ink-soft); background: var(--info-soft); transition: border-color .12s, background .12s; }
.dropzone.drag { border-color: var(--brand); background: var(--brand-soft); }

/* NARO inbox — Zendesk-style two-pane helpdesk */
.naro-wrap { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; height: calc(100vh - 185px); min-height: 440px; background: var(--panel); box-shadow: var(--shadow); }
.naro-list { width: 330px; flex: none; border-right: 1px solid var(--line); overflow: auto; }
.naro-li { padding: 11px 13px; border-bottom: 1px solid var(--line); cursor: pointer; }
.naro-li:hover { background: var(--bg-surface-hover); }
.naro-li.active { background: var(--brand-soft); }
.naro-li .l1 { display: flex; align-items: center; gap: 6px; }
.naro-li .who { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.naro-li .udot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-left: auto; flex: none; }
.naro-li .snip { color: var(--ink-soft); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naro-li .meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
.naro-conv { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.naro-chead { padding: 11px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.naro-chead b { font-size: 15px; }
.naro-thread { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-inset); }
.nbub { max-width: 74%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; box-shadow: var(--shadow); }
.nbub .nbh { font-size: 11px; opacity: .8; margin-bottom: 3px; }
.nbub.in { align-self: flex-start; background: var(--bg-surface); border: 1px solid var(--line); color: var(--ink); }
.nbub.out { align-self: flex-end; background: var(--brand); color: #fff; }
.naro-composer { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-end; }
.naro-composer textarea { flex: 1; min-height: 42px; max-height: 150px; resize: vertical; padding: 9px 11px; border-radius: 8px; background: var(--bg-surface); color: var(--ink); border: 1px solid var(--line); font-family: inherit; font-size: 14px; }
.naro-blank { flex: 1; display: grid; place-items: center; color: var(--muted); padding: 30px; text-align: center; }
.naro-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); }
@media (max-width: 760px) { .naro-wrap { flex-direction: column; height: auto; } .naro-list { width: auto; max-height: 230px; } }

/* ---- market scan ---- */
tr.scan-bad { background: var(--danger-soft); }
tr.scan-bad:hover { background: var(--danger-soft); }
tr.scan-fallback { background: var(--warn-soft); }
tr.scan-fallback:hover { background: var(--warn-soft); }

/* Collapsed quoted history inside an email bubble */
.tk-quoted { margin-top: 8px; }
.tk-quoted summary { cursor: pointer; color: var(--muted); font-size: 12px; user-select: none; list-style: none; }
.tk-quoted summary::-webkit-details-marker { display: none; }
.tk-quoted summary:hover { color: var(--brand); }
.tk-quoted > div { margin-top: 6px; padding: 8px 10px; border-left: 3px solid var(--line); color: var(--ink-soft); font-size: 12.5px; white-space: pre-wrap; }

/* Sub-orders. One Shopify order is often several ServicePoints sub-orders
   (the -A-/-B-/-C- codes), each quoted and shipped on its own. They read as
   lines belonging to the order above rather than as orders in their own
   right: no top border, so the group holds together, and a rule down the
   left of the number column to carry the eye. */
tr.has-subs > td { border-bottom: none; }
/* NOT --bg-soft: that token is #1e293b, the dark slate the bulk bar uses, and
   it painted a black band under this table's dark ink. The tint here has to
   stay in the same family as --line (var(--border-subtle)) against the white --panel. */
tr.sub-row > td { border-bottom: none; padding-top: 3px; padding-bottom: 3px; background: var(--bg-inset); color: var(--ink); }
tr.sub-row:last-child > td { border-bottom: 1px solid var(--line); }
tr.sub-row .order-no.sub { font-weight: 600; font-size: 12.5px; color: var(--ink-soft); padding-left: 14px; border-left: 2px solid var(--line); display: inline-block; }
tr.sub-row .prod-cell { font-size: 13px; }

/* Sub-order heading inside the drawer Items panel. */
.sub-head { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px;
  padding: 5px 8px; border-radius: 6px; background: var(--bg-surface-hover); color: var(--ink); }
.sub-head:first-child { margin-top: 0; }
.sub-head b { font-size: 12.5px; letter-spacing: .02em; }
.sub-head .tag { margin-left: auto; }

/* Files staged on a reply, and files that went out with a sent one. */
.tk-atts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 0; }
.tk-att { display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
  padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-inset); font-size: 12.5px; color: var(--ink); }
.tk-att-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-att-x { border: 0; background: none; cursor: pointer; color: var(--ink-soft);
  font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 999px; }
.tk-att-x:hover { background: var(--line); color: var(--red); }
.tk-sent-atts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }

/* Quoted history, one card per message. The whole point is telling at a
   glance whose words you are reading, so the side is carried by a coloured
   rail and a word, not by colour alone. */
.qm { border-left: 3px solid var(--line); border-radius: 0 8px 8px 0;
  padding: 8px 12px; margin: 10px 0; background: var(--bg-inset); }
.qm:first-child { margin-top: 4px; }
.qm-us { border-left-color: var(--brand); background: var(--info-soft); }
.qm-them { border-left-color: #cbd5e1; }
.qm-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.qm-h b { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.qm-side { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; }
.qm-us .qm-side { background: var(--brand-soft); color: #1d4ed8; }
.qm-them .qm-side { background: var(--border-subtle); color: #475569; }
.qm-when { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.qm-b { font-size: 13px; line-height: 1.5; color: var(--ink-soft); white-space: pre-wrap;
  overflow-wrap: anywhere; }

/* The outbound bubble is var(--info-soft) — a PALE BLUE panel, not a dark one. Rules
   written as though it were dark painted white text onto it: the "earlier
   messages" toggle on our own replies, the quoted text under it and the
   attachment chips were all near-invisible. They inherit the normal dark ink
   now, which is what the bubble was always light enough for. */
.naro-b.out .tk-quoted summary { color: var(--ink-soft); }
.naro-b.out .tk-quoted > div { border-left-color: rgba(15,23,42,.15); color: var(--ink-soft); }

/* Risk flags. Colour carries the level, but never alone — every badge also
   says the word, so it survives a colour-blind reader and a bad monitor. */
.tk-risk { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; }
.tk-risk-critical { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.tk-risk-high     { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.tk-risk-watch    { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.tk-risk-why { margin-left: 6px; font-size: 11.5px; color: var(--ink-soft); }
/* the rail rows */
.nv-item.nv-risk .nv-label { font-weight: 600; }
.nv-count-risk { background: var(--danger-soft); color: var(--danger); font-weight: 700; }

/* Tag picker. The tags already in use are buttons; typing is the fallback. */
.tagpick { position: absolute; z-index: 60; width: 268px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); color: var(--ink); }
.tagpick-h { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.tagpick-list { display: flex; flex-direction: column; gap: 3px;
  max-height: 210px; overflow-y: auto; margin-bottom: 8px; }
.tagpick-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 7px;
  background: none; cursor: pointer; font-size: 13px; color: var(--ink); }
.tagpick-opt:hover { background: var(--brand-soft); }
.tagpick-new { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.tagpick-new input { flex: 1; min-width: 0; }

/* Ask HQ. Question and answer read as a conversation, but plainly — this is
   a colleague answering, not a chat product. */
.ask-log { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; overflow-y: auto; }
.ask-q { align-self: flex-end; max-width: 78%; padding: 8px 12px; border-radius: 12px 12px 2px 12px;
  background: var(--brand-soft); color: var(--ink); font-size: 13.5px; }
.ask-a { align-self: flex-start; max-width: 88%; padding: 8px 12px; border-radius: 12px 12px 12px 2px;
  background: var(--bg-inset); border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; line-height: 1.55; }

/* ---- Ask HQ chat widget -------------------------------------------------
   A launcher on every view, the way a website's chat button works, so asking
   a question never costs you the page you were reading. Both the widget and
   the Ask HQ page render App._ask, so it is one conversation seen twice.
   Kept under the modal layer (z-index 100) so dialogs still cover it. */
.ask-launcher {
  position: fixed; right: 22px; bottom: 22px; width: 52px; height: 52px;
  border-radius: 50%; border: none; cursor: pointer; z-index: 98;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .18), 0 12px 28px rgba(37, 99, 235, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ask-launcher svg { width: 24px; height: 24px; }
.ask-launcher:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15, 23, 42, .2), 0 16px 34px rgba(37, 99, 235, .34); }
.ask-launcher:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; }
.ask-launcher.is-open { transform: scale(.92); opacity: .85; }

/* A full-height side panel, not a popup — the companion stays with you while
   you work (Lumo is the reference). Slides in from the right. */
.ask-widget {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 99;
  width: 400px; max-width: calc(100vw - 16px);
  background: var(--panel); color: var(--ink);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(15, 23, 42, .18);
  display: flex; flex-direction: column; overflow: hidden;
  animation: ask-slide .18s ease-out;
}
@keyframes ask-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.ask-widget.hidden { display: none; }

/* While the companion is open the page slides over rather than being covered,
   so the panel can stay open while you work. Only where there is room — on a
   narrow screen the panel goes full-width and covering is correct. */
#main { transition: margin-right .18s ease; }
@media (min-width: 1100px) {
  body.ask-open #main { margin-right: 400px; }
}
[data-motion="off"] #main { transition: none; }

.ask-widget-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 10px 12px 16px;
  background: var(--brand); color: #fff; flex: 0 0 auto;
}
.ask-widget-title { font-weight: 700; font-size: 14px; }
.ask-widget-sub { font-size: 12px; opacity: .8; }
.ask-widget-head .spacer { flex: 1; }
.ask-widget-x {
  width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer;
  background: transparent; color: #fff; display: grid; place-items: center;
}
.ask-widget-x svg { width: 16px; height: 16px; }
.ask-widget-x:hover { background: rgba(255, 255, 255, .18); }

.ask-widget-log { flex: 1 1 auto; overflow-y: auto; padding: 14px; background: var(--bg-inset); }
/* The page's .ask-log caps itself at 52vh and scrolls itself. Inside the
   widget the panel already scrolls, so leaving those on nests two scrollbars
   and squashes the log into the top half of the panel. */
.ask-widget-log .ask-log { display: flex; flex-direction: column; gap: 10px; max-height: none; overflow: visible; }

.ask-widget-foot {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
  padding: 10px; border-top: 1px solid var(--line); background: var(--panel);
}
.ask-widget-foot input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 19px; font-size: 13px;
  background: var(--bg-surface); color: var(--ink);
}
.ask-widget-foot input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ask-widget-send {
  width: 38px; height: 38px; flex: 0 0 auto; border: none; border-radius: 50%;
  background: var(--brand); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.ask-widget-send svg { width: 18px; height: 18px; }
.ask-widget-send:disabled { opacity: .5; cursor: default; }

/* On a phone the panel takes the screen — a 370px card pinned to a corner is
   unusable at that width. */
@media (max-width: 560px) {
  .ask-widget { left: 0; right: 0; width: auto; }
  .ask-launcher { right: 14px; bottom: 14px; }
}

/* Internal notes as an always-open rail card (boss ask 2026-09-05): every
   note visible at a glance, stacked newest-first, no clicking to find them. */
.tk-rail-notes { border-left: 3px solid var(--warn); }
.tk-rail-notes-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.tk-rail-note { background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: 8px; padding: 8px 10px; }
.tk-rail-note-t { font-size: 12.5px; white-space: pre-wrap; word-break: break-word; margin-bottom: 3px; }

/* Edit/delete on internal notes — quiet until hovered, author-or-admin only. */
.tk-rail-note-b { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tk-note-tools { display: inline-flex; gap: 2px; }
.tk-note-tools button { border: none; background: none; cursor: pointer; font-size: 11px; color: var(--text-muted); padding: 1px 4px; border-radius: 4px; }
.tk-note-tools button:hover { background: var(--warn-line); color: var(--warn); }

/* ---- dark mode -------------------------------------------------------------
   Token overrides plus the surfaces that hard-code white/light-gray. Toggled
   by data-theme="dark" on <html> — set in Settings → Appearance → Theme, or by asking
   your companion. Warm highlight boxes (notes, amber warnings) deliberately
   keep their tint: they are meant to stand out on either ground. */
:root[data-theme="dark"] {
  --panel: #16202f;
  --ink: #e6edf6;
  --ink-soft: #b6c2d2;
  --muted: #8494a9;
  --line: #263650;   /* quieter hairlines (refinement 2026-09-07; was #2b3a51) */
  --line-dark: #43536b;
  --brand-soft: #17314f;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] body { background: #0b1220; color: var(--ink); }
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .sidenav,
:root[data-theme="dark"] .nav-utilbox,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .btn.ghost,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .qf-select,
:root[data-theme="dark"] .drawer-head,
:root[data-theme="dark"] .feed-more,
:root[data-theme="dark"] .naro-b.in,
:root[data-theme="dark"] .mention-box,
:root[data-theme="dark"] .seg button,
:root[data-theme="dark"] .kb-card,
:root[data-theme="dark"] main.flush .tk-list,
:root[data-theme="dark"] main.flush .tk-convo,
:root[data-theme="dark"] .me-wrap select,
:root[data-theme="dark"] .search-wrap input:focus,
:root[data-theme="dark"] .ask-widget,
:root[data-theme="dark"] .login-card {
  background: var(--panel);
  color: var(--ink);
}
:root[data-theme="dark"] .drawer-panel { background: #101a2b; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: #0d1626; color: var(--ink); border-color: var(--line);
}
:root[data-theme="dark"] thead th { background: var(--panel); color: var(--muted); }
:root[data-theme="dark"] tbody tr:hover { background: #1a2740; }
:root[data-theme="dark"] tbody tr.sel,
:root[data-theme="dark"] tbody tr.sel:hover { background: #1c3252; }
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .navlink:hover,
:root[data-theme="dark"] .nv-item:hover,
:root[data-theme="dark"] .btn.ghost:hover { background: #1a2740; }
:root[data-theme="dark"] .btn.subtle,
:root[data-theme="dark"] .close-x,
:root[data-theme="dark"] .ochip,
:root[data-theme="dark"] .litem-img,
:root[data-theme="dark"] .msg .bubble,
:root[data-theme="dark"] .tag.ws-Unassigned,
:root[data-theme="dark"] .tag.issue,
:root[data-theme="dark"] .tag.pri-Low { background: var(--bg-surface-raised); color: var(--ink-soft); }
:root[data-theme="dark"] .tk-ai-card { background: var(--bg-inset); border-color: var(--border-subtle); }
:root[data-theme="dark"] .tk-rail-note { background: var(--warn-soft); border-color: var(--warn-line); }
:root[data-theme="dark"] .tk-note-tools button:hover { background: var(--warn-line); color: var(--warn); }
:root[data-theme="dark"] .msg.note .bubble,
:root[data-theme="dark"] .tk-snoozed-note { background: var(--warn-soft); border-color: var(--warn-line); }

/* ---- companion avatar ---- */
.cmp-avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-soft, #dbeafe);
  display: grid; place-items: center; font-size: 26px; cursor: pointer; overflow: hidden; flex: 0 0 auto; border: 2px solid var(--line); }
.cmp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cmp-avatar-edit { position: absolute; inset: auto 0 0 0; background: rgba(15, 23, 42, .55); color: #fff;
  font-size: 11px; text-align: center; padding: 1px 0 2px; opacity: 0; transition: opacity .15s; }
.cmp-avatar:hover .cmp-avatar-edit { opacity: 1; }
.ask-av { border-radius: 50%; object-fit: cover; vertical-align: -5px; margin-right: 2px; }
.ask-a-row { display: flex; gap: 7px; align-items: flex-start; }
.ask-a-row .ask-av { flex: 0 0 auto; margin-top: 2px; }
.ask-launcher.has-avatar { background-size: cover; background-position: center; }
.ask-launcher.has-avatar svg { display: none; }

/* ---- companion panel: pinned brief + quick chips (Lumo reference) -------- */
.ask-brief {
  flex: 0 0 auto; margin: 10px 12px 0; padding: 10px 12px;
  background: var(--brand-soft); border: 1px solid rgba(37, 99, 235, .25);
  border-radius: 10px; font-size: 12.5px; max-height: 132px; overflow-y: auto;
}
.ask-brief b { display: block; margin-bottom: 3px; }
.ask-brief .ask-brief-t { white-space: pre-wrap; word-break: break-word; }
:root[data-theme="dark"] .ask-brief { background: var(--bg-inset); border-color: var(--border-subtle); }
.ask-chips { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 2px; }
.ask-chips button {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
.ask-chips button:hover { border-color: var(--brand); color: var(--brand); }

/* ---- visual quieting pass -------------------------------------------------
   Fewer hard lines, softer depth, more air — same layout, calmer page. */
:root {
  --radius: 12px;
  --line: #e8edf4;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .05);
}
thead th { background: transparent; font-size: 10.5px; letter-spacing: .07em; }
.card, .panel, .stat { border-color: var(--line); }
.page-head { margin-bottom: 18px; }
.page-head h1 { letter-spacing: -.02em; }
td { padding-top: 11px; padding-bottom: 11px; }
.btn { border-radius: 9px; }

/* Dark mode: sub-order rows hard-coded a light ground (var(--bg-inset)) that turned
   unreadable with the dark theme's light text — reported with order #1791. */
:root[data-theme="dark"] tr.sub-row > td { background: #121c2e; color: var(--ink); }
:root[data-theme="dark"] tr.sub-row .prod-cell,
:root[data-theme="dark"] tr.sub-row .order-no.sub { color: var(--ink-soft); }

/* Dark mode: the full sweep of light-gray grounds (var(--bg-surface-hover) / var(--bg-inset) /
   var(--info-soft)) that read as glowing white slabs against the dark theme. One
   grouped override per tone: surfaces slightly above the page ground,
   hovers slightly above that, selection tinted brand-dark. */
:root[data-theme="dark"] .cog-variant-row td,
:root[data-theme="dark"] .tt-summary,
:root[data-theme="dark"] .naro-thread,
:root[data-theme="dark"] .ask-widget-log,
:root[data-theme="dark"] .ask-a,
:root[data-theme="dark"] .kb-order-chip,
:root[data-theme="dark"] .kb-st-None,
:root[data-theme="dark"] .kb-badge,
:root[data-theme="dark"] .bar-track,
:root[data-theme="dark"] .att-file { background: #121c2e; color: var(--ink-soft); }
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .navlink:hover,
:root[data-theme="dark"] .nv-item:hover,
:root[data-theme="dark"] .tk-statusseg button:hover,
:root[data-theme="dark"] .naro-li:hover,
:root[data-theme="dark"] .cog-product-row:hover,
:root[data-theme="dark"] .ops-row:hover,
:root[data-theme="dark"] .support-row:hover,
:root[data-theme="dark"] .tt-task:hover,
:root[data-theme="dark"] .tt-act:hover,
:root[data-theme="dark"] .kb-order-res:hover { background: #1a2740; }
:root[data-theme="dark"] tbody tr.sel { background: #1c3252; }
:root[data-theme="dark"] .notif-item.unread { background: var(--bg-surface-raised); }

/* Companion card section headers, Lumo-style. */
.cmp-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.cmp-sec:first-of-type { border-top: none; padding-top: 0; margin-top: 10px; }

/* ---- Lumo-style Settings: section menu + integration cards --------------- */
.settings-wrap { display: flex; gap: 20px; align-items: flex-start; }
.settings-menu { flex: 0 0 205px; position: sticky; top: calc(var(--topbar-h) + 14px);
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.settings-menu .nv-item { width: 100%; text-align: left; border: none; background: none;
  padding: 9px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.settings-menu .nv-item.active { background: var(--brand); color: #fff; }
.settings-body { flex: 1; min-width: 0; }
@media (max-width: 800px) { .settings-wrap { flex-direction: column; } .settings-menu { position: static; flex-direction: row; flex-wrap: wrap; width: 100%; } }
.intg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; max-width: 1000px; }
.intg-card { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.intg-head { display: flex; gap: 10px; align-items: center; }
.intg-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft); display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; }
.intg-head .mini { letter-spacing: .06em; font-size: 10px; }

/* ---- command-center skin (dark) ------------------------------------------
   The reference is Lumo: near-black navy ground, cyan-blue accents, a quiet
   neon glow on the things that matter — active nav, primary buttons, the
   companion. Light mode stays the calm professional theme. */
:root[data-theme="dark"] {
  --brand: #3b82f6;
  --accent: #38bdf8;
}
:root[data-theme="dark"] body { background: #090f1c; }
:root[data-theme="dark"] .sidenav .navlink.active,
:root[data-theme="dark"] .settings-menu .nv-item.active {
  background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff;
  box-shadow: 0 0 14px rgba(56, 189, 248, .35);
}
:root[data-theme="dark"] .btn:not(.ghost):not(.subtle):not(.danger) {
  box-shadow: 0 0 12px rgba(37, 99, 235, .35);
}
:root[data-theme="dark"] .ask-launcher {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .4), 0 0 18px rgba(56, 189, 248, .45), 0 8px 24px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .ask-widget { border-left-color: rgba(56, 189, 248, .3); box-shadow: -12px 0 48px rgba(2, 8, 20, .8); }
:root[data-theme="dark"] .ask-widget-head { background: linear-gradient(135deg, #1d4ed8, #0284c7); }
:root[data-theme="dark"] .cmp-avatar { border-color: rgba(56, 189, 248, .5); box-shadow: 0 0 12px rgba(56, 189, 248, .35); }
:root[data-theme="dark"] .card:hover, :root[data-theme="dark"] .intg-card:hover { border-color: #2f4668; }
:root[data-theme="dark"] .stat .n { color: #7dd3fc; }
:root[data-theme="dark"] .intg-ic { background: #12233c; box-shadow: inset 0 0 10px rgba(56, 189, 248, .15); }

/* Lumo-style preference rows + toggle switches. */
.pref-rows { margin-top: 12px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line); }
.pref-row b { font-size: 13px; }
.tswitch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; }
.tswitch input { opacity: 0; width: 0; height: 0; }
.tswitch i { position: absolute; inset: 0; background: var(--line-dark, #94a3b8); border-radius: 999px;
  transition: background .15s; }
.tswitch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--bg-surface); transition: transform .15s; }
.tswitch input:checked + i { background: var(--brand); }
.tswitch input:checked + i::after { transform: translateX(18px); }
:root[data-theme="dark"] .tswitch input:checked + i { box-shadow: 0 0 10px rgba(56, 189, 248, .4); }

/* Lumo-style API key rows + scope docs. */
.ak-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.ak-row:first-child { border-top: none; }
.ak-revoked { opacity: .55; }
.scope-doc { padding: 8px 0; }
.scope-doc code { font-weight: 700; }

/* Appearance switches, token-driven exactly like Lumo:
   data-glow / data-motion / data-density on <html>. */
:root[data-glow="off"] .ask-launcher,
:root[data-glow="off"] .btn,
:root[data-glow="off"] .sidenav .navlink.active,
:root[data-glow="off"] .settings-menu .nv-item.active,
:root[data-glow="off"] .cmp-avatar,
:root[data-glow="off"] .tswitch input:checked + i { box-shadow: none !important; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}
:root[data-density="compact"] td { padding-top: 6px; padding-bottom: 6px; }
:root[data-density="compact"] .stat { padding: 10px 12px; }
:root[data-density="compact"] .page-head { margin-bottom: 10px; }
:root[data-density="compact"] .card > .panel-body, :root[data-density="compact"] .panel-body { padding-top: 8px; padding-bottom: 8px; }
:root[data-density="compact"] .kv { padding-top: 3px; padding-bottom: 3px; }

/* Dark mode: the purple-tinted surfaces (English-translation box, quoted
   thread cards, Nova banners, recurring badges) hard-coded light lilac
   grounds — light text on light lilac was unreadable. Reported 2026-09-05. */
:root[data-theme="dark"] .tk-translation { background: #201a38; border-left-color: #7c5cff; }
:root[data-theme="dark"] .tk-translation b { color: #c4b5fd; }
:root[data-theme="dark"] .qm-us { background: #142440; }
:root[data-theme="dark"] .qm-us .qm-side { color: #93c5fd; }
:root[data-theme="dark"] .qm-them .qm-side { background: #26344a; color: #b6c2d2; }
:root[data-theme="dark"] .kb-recur,
:root[data-theme="dark"] .tt-day-recur,
:root[data-theme="dark"] .tt-nova-note,
:root[data-theme="dark"] .kb-nova-banner { background: #201a38; border-color: #443a75; color: #c4b5fd; }
:root[data-theme="dark"] .tag.ws-On.Hold, :root[data-theme="dark"] .tag.ws-On-Hold { background: #2b2352; color: #c4b5fd; }

/* ---- HOME / COMMAND CENTER (redesign Phase 2) ---------------------------
   Everything on tokens, so light and dark both come out of the same rules;
   the few fixed colours below get explicit dark overrides at the end. */
.home { max-width: 1240px; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.home-head h1 { margin: 0 0 3px; letter-spacing: -.02em; }
.home-clock { cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; }
.home-clock:hover { border-color: var(--brand); color: var(--brand); }

.home-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.home-quick button { border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.home-quick button:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

.home-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin-bottom: 16px; position: relative; }
.hm-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  box-shadow: var(--shadow); }
.hm-kpi:hover { border-color: var(--brand); }
.hm-kpi-n { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.hm-kpi-l { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.hm-kpi-hot .hm-kpi-n { color: var(--red); }
.hm-delta.good { color: var(--green); font-weight: 600; }
.hm-delta.bad { color: var(--red); font-weight: 600; }
.hm-kpi-since { position: absolute; right: 0; bottom: -16px; }

.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.home-card { padding: 14px 16px; display: flex; flex-direction: column; min-height: 120px; }
.home-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.home-card-h b { font-size: 13.5px; }
.home-more { font-size: 12px; color: var(--brand); cursor: pointer; font-weight: 600; white-space: nowrap; }
.home-attn { grid-column: 1 / -1; }
.home-trend { grid-column: span 2; }
.home-health { grid-column: span 3; }

/* The Lumo ask bar (Pattern B): visually a QUESTION, not a search — brand
   tint, a ✦, italic invitation copy — while the neutral topbar search stays
   the find/navigate tool. The bar holds no data; only the unread-brief dot. */
.home-ask { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: 999px;
  background: color-mix(in srgb, var(--brand-soft) 40%, var(--panel)); cursor: text;
  transition: box-shadow .15s ease, border-color .15s ease; }
.home-ask:hover, .home-ask:focus-within { border-color: var(--brand);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--brand) 22%, transparent); }
.home-ask-star { color: var(--brand); font-size: 15px; flex: none; }
.home-ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); font-size: 13.5px; }
.home-ask input::placeholder { color: color-mix(in srgb, var(--brand) 45%, var(--muted)); font-style: italic; }
.home-ask-dot { flex: none; border: 0; cursor: pointer; font-size: 11.5px; font-weight: 700;
  color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 4px 11px; }
/* The global [data-motion="off"] kill-switch already silences this. */
.home-ask-dot { animation: hm-dot-pulse 2.4s ease-in-out infinite; }
@keyframes hm-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.hm-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-radius: 8px; cursor: pointer;
  font-size: 13px; min-width: 0; }
.hm-row:hover { background: var(--brand-soft); }
.hm-row b { font-weight: 600; }
.hm-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.hm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.hm-dot.bad { background: var(--red); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.hm-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(217, 119, 6, .12); }
.hm-dot.ok { background: var(--green); }
.hm-dot.idle { background: var(--muted); }
.hm-attn-what { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--red); flex: none; }
.hm-attn-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.hm-rank { width: 18px; height: 18px; border-radius: 6px; background: var(--brand-soft); color: var(--brand);
  font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }

.seg-sm button { padding: 3px 9px; font-size: 11.5px; }

.hm-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: 18px; }
.hm-bar-w { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 4px; min-width: 0; }
.hm-bar { width: 100%; max-width: 46px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 55%, transparent)); }
.hm-bar.hot { background: linear-gradient(180deg, var(--red), color-mix(in srgb, var(--red) 55%, transparent)); }
.hm-bar-v { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.hm-bar-d { font-size: 10.5px; color: var(--muted); }

.hm-health-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-pill { border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.hm-pill.ok { background: var(--ok-soft); color: var(--ok); }
.hm-pill.warn { background: var(--warn-soft); color: var(--warn); }
.hm-pill.bad { background: var(--danger-soft); color: var(--danger); }
.hm-health-rows { margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 14px; }

@media (max-width: 1000px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-attn, .home-trend, .home-health { grid-column: auto; }
}

/* Dark theme: only the fixed-colour pills need help — everything else rides
   the tokens. */
:root[data-theme="dark"] .hm-pill.ok { background: #113123; color: #6ee7a0; }
:root[data-theme="dark"] .hm-pill.warn { background: #33260f; color: #fcd34d; }
:root[data-theme="dark"] .hm-pill.bad { background: #371518; color: #fda4af; }
:root[data-theme="dark"] .hm-kpi:hover, :root[data-theme="dark"] .home-quick button:hover { background: #12233c; }
:root[data-theme="dark"] .hm-row:hover { background: #12233c; }
/* The dark theme's global input ground would paint a box inside the pill,
   and the light-tuned placeholder mix reads too dim on it. */
:root[data-theme="dark"] .home-ask input { background: transparent; border: 0; }
:root[data-theme="dark"] .home-ask input::placeholder { color: #8fb0e6; }

/* ---- PRODUCTS design system (Phase 3) -----------------------------------
   Instrument Panel structure + Ledger table typography + Lumo polish, per
   docs/mockups/products-design-mockup.html. Scoped to #bestSellerRoot and
   #gmcRoot so no other page's tables change. */
.pt-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.pt-tabs a { position: relative; padding: 9px 14px 11px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; }
.pt-tabs a:hover { color: var(--ink-soft); }
.pt-tabs a.on { color: var(--ink); }
.pt-tabs a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--brand); border-radius: 2px; }
:root[data-theme="dark"] .pt-tabs a.on::after { box-shadow: 0 0 12px rgba(56, 189, 248, .5); }
/* Order Detail drawer's center-column tabs (Items / Actions & Workflow /
   Customer Emails) — same look as .pt-tabs above, just <button> instead of
   <a> since there is no URL for one of these. */
.drawer-tabs { padding: 0 14px; overflow-x: auto; flex-wrap: nowrap; }
.drawer-tabs button { position: relative; padding: 9px 14px 11px; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; background: none; border: 0; white-space: nowrap; flex: none; }
.drawer-tabs button:hover { color: var(--ink-soft); }
.drawer-tabs button.on { color: var(--ink); }
.drawer-tabs button.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--brand); border-radius: 2px; }
.drawer-center { padding: 0; }
.drawer-center .drawer-tab-body { padding: 0; }
.drawer-tab-body[hidden] { display: none; }

.pt-ctx { display: flex; align-items: center; gap: 8px; padding: 12px 0; flex-wrap: wrap; }
.pt-ctx .sp { flex: 1; }
.pt-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); font-size: 11.5px; color: var(--muted); }
.pt-chip b { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink); }
.pt-chip.warn b { color: var(--amber); }
.pt-chip.bad b { color: var(--red); }
.pt-chip.ok b { color: var(--green); }

.pt-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--panel); }
.pt-seg button { padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; border: 0; border-right: 1px solid var(--line); background: none; }
.pt-seg button:last-child { border-right: 0; }
.pt-seg button.on { color: var(--brand); background: var(--brand-soft); }
.pt-seg button .n { font-variant-numeric: tabular-nums; font-size: 10.5px; opacity: .8; margin-left: 4px; }
.pt-seg button.hot.on, .pt-seg button.hot { color: var(--red); }
.pt-seg button.hot.on { background: var(--danger-soft); }
:root[data-theme="dark"] .pt-seg button.hot.on { background: #31151b; }

/* Ledger table typography, without touching row markup. */
#bestSellerRoot table th, #gmcRoot table th {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); background: transparent; }
#bestSellerRoot table td, #gmcRoot table td { font-variant-numeric: tabular-nums; }
#bestSellerRoot tbody tr:hover, #gmcRoot tbody tr:hover { background: var(--brand-soft); }
:root[data-theme="dark"] #bestSellerRoot tbody tr:hover,
:root[data-theme="dark"] #gmcRoot tbody tr:hover { background: #12233c; }

.pt-handoff { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow); font-size: 12.5px; }
.pt-handoff b { color: var(--red); }

.pt-zone { margin-top: 22px; }
.pt-zone-h { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.pt-zone-h h3 { margin: 0; font-size: 13px; letter-spacing: .02em; }
.pt-zone-h .ln { flex: 1; height: 1px; background: var(--line); }

details.pt-tools summary { cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600;
  list-style: none; }
details.pt-tools summary::-webkit-details-marker { display: none; }
details.pt-tools summary::before { content: "▸ "; }
details.pt-tools[open] summary::before { content: "▾ "; }

.pt-batch { border-left: 2px solid var(--brand); margin: 4px 0 10px; padding: 6px 12px;
  font-size: 12px; color: var(--ink-soft); background: var(--brand-soft); border-radius: 0 8px 8px 0; }

/* COG & Margin: numeric columns + the P/R/S tier lean (amendment 2026-09-06). */
#bestSellerRoot td.num, #bestSellerRoot th.num { text-align: right; white-space: nowrap; }
.prs { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.prs button { border: 0; background: none; padding: 3px 7px; font-size: 10.5px; font-weight: 700;
  color: var(--muted); cursor: pointer; border-right: 1px solid var(--line); }
.prs button:last-child { border-right: 0; }
.prs button.on { color: var(--brand); background: var(--brand-soft); }
.prs-cell { color: var(--muted); }
.prs-cell.prs-on { color: var(--ink); font-weight: 700;
  background: color-mix(in srgb, var(--brand-soft) 55%, transparent); }

/* Companion operational answers (Phase 4): fenced tables/commands render as
   monospace panels with a copy control; Tier-2 confirms as a distinct button. */
.ask-pre-wrap { position: relative; margin: 8px 0; }
.ask-pre { margin: 0; padding: 10px 34px 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); font-size: 11.5px; line-height: 1.5; overflow-x: auto;
  font-variant-numeric: tabular-nums; white-space: pre; }
:root[data-theme="dark"] .ask-pre { background: #0c1424; }
.ask-pre-copy { position: absolute; top: 6px; right: 6px; border: 0; background: none;
  cursor: pointer; font-size: 12px; opacity: .55; }
.ask-pre-copy:hover { opacity: 1; }
.ask-act { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent); }
/* The structured create-task confirm card (2026-09-09): the COMPLETE task,
   exactly as parsed, shown above the one button that can create it. */
.ask-task-card { background: var(--bg-inset); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }

/* ============================================================
   PHASE 4 — INBOX (2026-09-10). Instrument Panel structure, Ledger
   readability: the two front tabs, the composer's progressive
   disclosure, the flattened rail, the narrow-screen rail toggle,
   and the six avatar hue tokens that replace the hardcoded light
   pastels (the "white avatars in dark mode" bug). Tokens only.
   ============================================================ */
.tk-pagetabs { display: flex; gap: 2px; padding: 8px 18px 0; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface); position: sticky; top: 0; z-index: 4; }
.tk-pagetabs button { border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 12.5px;
  padding: 8px 14px 9px; cursor: pointer; border-bottom: 2px solid transparent; }
.tk-pagetabs button:hover { color: var(--text-primary); }
.tk-pagetabs button.on { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--accent); }
main.flush .tk-pagetabs { margin: 0; }
main:not(.flush) .tk-pagetabs { margin: -6px -6px 14px; }

/* avatar hues: light pairs here, dark pairs below — never hardcoded again */
:root { --av1-bg: #e8f1fe; --av1-fg: #2159c7; --av2-bg: #fdeaea; --av2-fg: #c4342b; --av3-bg: #e6f4ec; --av3-fg: #16794c;
  --av4-bg: #f3effe; --av4-fg: #6d28d9; --av5-bg: #fdf3e2; --av5-fg: #b45309; --av6-bg: #e5f3f5; --av6-fg: #0f6068; }
:root[data-theme="dark"] { --av1-bg: #1b2f52; --av1-fg: #8db4f5; --av2-bg: #3a1c1a; --av2-fg: #f0958d; --av3-bg: #143024; --av3-fg: #6fd3a0;
  --av4-bg: #2a1f4a; --av4-fg: #c4b0ff; --av5-bg: #3a2a10; --av5-fg: #f0c060; --av6-bg: #102e33; --av6-fg: #7fd0d8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --av1-bg: #1b2f52; --av1-fg: #8db4f5; --av2-bg: #3a1c1a; --av2-fg: #f0958d; --av3-bg: #143024; --av3-fg: #6fd3a0;
    --av4-bg: #2a1f4a; --av4-fg: #c4b0ff; --av5-bg: #3a2a10; --av5-fg: #f0c060; --av6-bg: #102e33; --av6-fg: #7fd0d8; }
}

/* composer: one primary action, the rest one click away */
.tk-more-wrap { position: relative; }
.tk-more-pop { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 232px; background: var(--bg-surface-raised);
  border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  padding: 6px; z-index: 30; }
.tk-more-pop button { display: flex; width: 100%; gap: 8px; align-items: center; border: 0; background: none;
  color: var(--text-primary); padding: 7px 9px; font: inherit; font-size: 12.5px; border-radius: 7px; cursor: pointer; text-align: left; }
.tk-more-pop button:hover:not(:disabled) { background: var(--bg-surface-hover); }
.tk-more-pop button:disabled { opacity: .45; cursor: not-allowed; }
.tk-more-pop .d { color: var(--text-muted); font-size: 10.5px; margin-left: auto; }
.tk-sendsplit { display: inline-flex; }
.tk-sendsplit .btn:first-child { border-radius: 7px 0 0 7px; }
.tk-sendsplit .tk-sendmore { border-radius: 0 7px 7px 0; padding: 4px 8px; margin-left: -1px;
  border-left: 1px solid color-mix(in srgb, var(--bg-surface) 40%, transparent); }
.tk-send-pop { left: auto; right: 0; }

/* rail: one flat column — hairlines, not stacked cards */
.tk-ai-card, .tk-cust-card { background: var(--bg-inset); border-color: var(--border-subtle); }
.tk-ai-card + .tk-ai-card, .tk-ai-card + .tk-cust-card { border-top: 0; margin-top: 0; }
/* ≤1366px: the rail leaves the grid (see the Inbox media rule) and slides over the thread on demand */
.tk-railtoggle { display: none; }
@media (max-width: 1366px) {
  .tk-railtoggle { display: inline-flex; }
  .tk-wrap.rail-open .tk-ai-summary { display: block; position: fixed; right: 0; top: 52px; bottom: 0; width: min(320px, 92vw);
    overflow: auto; z-index: 25; box-shadow: -12px 0 30px rgba(0, 0, 0, .3); background: var(--bg-surface); }
}

/* ============================================================
   SEMANTIC THEME TOKENS — refinement pass 2026-09-07.
   One design language: surfaces read these NAMES; light defines
   them here, dark redefines the same names below, and the legacy
   tokens (--panel, --line, --ink…) become aliases. Hardcoded hex
   surfaces were swept onto these, so dark mode now works by
   definition instead of by enumerating overrides. The older
   enumerated dark rules above remain (they agree with these
   values); retiring the redundant ones is Phase 7 cleanup.
   ============================================================ */
:root {
  --bg-app: #f4f6fa;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-surface-hover: #f1f5f9;
  --bg-inset: #f8fafc;
  --border-subtle: #e8edf4;
  --border-strong: #cbd5e1;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --accent-line: #cfdef8;
  --ok: #16a34a;      --ok-soft: #e6f4ec;
  --warn: #d97706;    --warn-soft: #fdf3e2;  --warn-line: #f0d98c;
  --danger: #dc2626;  --danger-soft: #fdeaea;
  --info-soft: #eef4ff;
  --purple-soft: #f5f3ff;
  /* legacy names → semantic, so every existing rule inherits */
  --panel: var(--bg-surface);
  --line: var(--border-subtle);
  --line-dark: var(--border-strong);
  --ink: var(--text-primary);
  --ink-soft: var(--text-secondary);
  --muted: var(--text-muted);
  --brand: var(--accent);
  --brand-soft: var(--accent-soft);
  --green: var(--ok);
  --amber: var(--warn);
  --red: var(--danger);
}
:root[data-theme="dark"] {
  /* deep-navy workspace — matches the values the enumerated dark
     rules already use, so nothing that worked changes shade */
  --bg-app: #090f1c;
  --bg-surface: #16202f;
  --bg-surface-raised: #1a2740;
  --bg-surface-hover: #1a2740;
  --bg-inset: #0d1626;
  --border-subtle: #263650;
  --border-strong: #43536b;
  --text-primary: #e6edf6;
  --text-secondary: #b6c2d2;
  --text-muted: #8494a9;
  --accent: #3b82f6;
  --accent-soft: #17314f;
  --accent-line: #24466e;
  --ok: #34d17b;      --ok-soft: #113123;
  --warn: #f0b350;    --warn-soft: #33260f;  --warn-line: #4a4423;
  --danger: #ff6b7a;  --danger-soft: #371518;
  --info-soft: #12233c;
  --purple: #b9a5f8;  --purple-soft: #201a38;
}

/* ---- system-wide finish (refinement 2026-09-07) -------------------------- */
/* Scrollbars follow the theme instead of flashing OS-white in dark. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

/* One focus language everywhere. */
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }

/* Calmer chrome: hierarchy over outlines. Cards keep a hairline but lean on
   elevation; the ground is faintly tinted so surfaces read as layers. */
body { background: var(--bg-app); }
.card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .04); }
:root[data-theme="dark"] .card { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .25); }
.page-head h1 { font-weight: 750; }
thead th { font-weight: 700; }
tbody td { border-bottom-color: var(--border-subtle); }


/* ============================================================
   MISSION CONTROL SKIN — 2026-09-07.
   The layout and tokens of ServicePoint Mission Control (the
   sister app's design.md) applied to SP HQ. Same data, same
   functions, same view ids; only the look changes. Appended
   last on purpose: equal-specificity rules here win, so the
   older skin blocks above need no edits. Light stays the
   default; dark is the command-center skin from the design.
   ============================================================ */
:root {
  --font-display: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, ui-monospace, monospace;
  --bg-app: #f1f5f9;
  --bg-surface-hover: #f8fafc;
  --bg-inset: #f8fafc;
  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(15,23,42,.12), 0 8px 24px rgba(15,23,42,.08);
  --topbar-h: 52px;
}
:root[data-theme="dark"] {
  --bg-app: #0f172a;
  --bg-surface: #1e293b;
  --bg-surface-raised: #243044;
  --bg-surface-hover: #243044;
  --bg-inset: #172033;
  --border-subtle: #334155;
  --border-strong: #475569;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --accent: #60a5fa;
  --brand: #60a5fa;
  --accent-soft: rgba(96,165,250,.16);
  --brand-soft: rgba(96,165,250,.16);
  --accent-line: rgba(96,165,250,.35);
  --info-soft: rgba(96,165,250,.12);
  --ok: #4ade80;      --ok-soft: rgba(74,222,128,.14);
  --warn: #fbbf24;    --warn-soft: rgba(251,191,36,.14);  --warn-line: rgba(251,191,36,.35);
  --danger: #f87171;  --danger-soft: rgba(248,113,113,.14);
  --purple: #c4b5fd;  --purple-soft: rgba(196,181,253,.14);
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --panel: var(--bg-surface); --line: var(--border-subtle); --line-dark: var(--border-strong);
  --ink: var(--text-primary); --ink-soft: var(--text-secondary); --muted: var(--text-muted);
  --green: var(--ok); --amber: var(--warn); --red: var(--danger);
}
:root[data-theme="dark"] body { background: var(--bg-app); }
body { font-family: var(--font-display); font-size: 13.5px; -webkit-font-smoothing: antialiased; }
.mono, .order-no, .mc-eyebrow, .eyebrow { font-family: var(--font-mono); }

/* Treatment, not glow: the design's dark skin is hairlines and a lighter
   surface, never neon. These undo the cyan glows of the earlier skin. */
:root[data-theme="dark"] .sidenav .navlink.active,
:root[data-theme="dark"] .settings-menu .nv-item.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
:root[data-theme="dark"] .btn:not(.ghost):not(.subtle):not(.danger),
:root[data-theme="dark"] .tswitch input:checked + i,
:root[data-theme="dark"] .cmp-avatar { box-shadow: none; }
:root[data-theme="dark"] .ask-launcher { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
:root[data-theme="dark"] .ask-widget-head { background: var(--bg-surface-raised); }
:root[data-theme="dark"] .card { box-shadow: var(--shadow); }
:root[data-theme="dark"] .stat .n { color: var(--text-primary); }
:root[data-theme="dark"] tr.sub-row > td,
:root[data-theme="dark"] .cog-variant-row td, :root[data-theme="dark"] .tt-summary, :root[data-theme="dark"] .ask-widget-log,
:root[data-theme="dark"] .ask-a, :root[data-theme="dark"] .kb-order-chip, :root[data-theme="dark"] .kb-badge,
:root[data-theme="dark"] .bar-track, :root[data-theme="dark"] .att-file { background: var(--bg-inset); }
:root[data-theme="dark"] .icon-btn:hover, :root[data-theme="dark"] .navlink:hover, :root[data-theme="dark"] .nv-item:hover,
:root[data-theme="dark"] .hm-kpi:hover, :root[data-theme="dark"] .home-quick button:hover, :root[data-theme="dark"] .hm-row:hover { background: var(--bg-surface-hover); }
:root[data-theme="dark"] tbody tr.sel { background: var(--accent-soft); }

/* ---- shell: sidebar with the brand on top, mono section eyebrows ---- */
.sidenav { width: 208px; padding: 14px 10px 12px; gap: 2px; }
.sidenav .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; cursor: pointer; font-size: inherit; font-weight: inherit; }
.sidenav .brand .brand-mark { width: 28px; height: 28px; border-radius: 7px; }
.sidenav .brand .brand-t { font-weight: 600; font-size: 14px; line-height: 1.1; color: var(--ink); }
.sidenav .brand .brand-s { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.nav-sep { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 10px 4px; }
.navlink { padding: 7px 10px; border-radius: 8px; gap: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.navlink > svg { width: 16px; height: 16px; flex: none; }
.navlink.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.navlink .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); background: var(--bg-inset); border-radius: 999px; padding: 1px 7px; }
.navlink .cnt:empty { display: none; }
.navlink.active .cnt { color: var(--accent); background: transparent; }
.nav-badge { margin-left: auto; }
.navlink .cnt + .nav-badge, .navlink .nav-badge + .cnt { margin-left: 6px; }

/* ---- top bar: page title left, search centred, quiet controls right ---- */
.topbar { height: var(--topbar-h); padding: 0 22px; gap: 12px; }
.topbar-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; flex: none; }
.topbar-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.topbar-title h1 { font-size: 15px; font-weight: 600; margin: 0; white-space: nowrap; }
.topbar-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.topbar-sub:empty { display: none; }
.topbar-greet { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.icon-btn { border: 1px solid transparent; }
.icon-btn:hover { border-color: var(--line); }
.icon-btn > svg { width: 16px; height: 16px; }
.me-wrap label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 1100px) { .topbar-sub, .topbar-greet { display: none; } }

/* ---- page chrome ---- */
main { padding: 22px 22px 60px; }
.page-head { align-items: baseline; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.page-head .sub { color: var(--ink-soft); font-size: 13.5px; }
.card { border-radius: var(--radius); box-shadow: var(--shadow); }
.btn { border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; border: 1px solid var(--accent); }
.btn.ghost { border-color: var(--line); }
.btn.subtle { border-color: transparent; }
.btn.danger { border-color: transparent; background: var(--danger-soft); color: var(--danger); }
.btn.green { border-color: transparent; }
.btn.sm { padding: 3px 9px; font-size: 11.5px; }
.qf-select, .field select, .field input, .field textarea, .admin-form input, .admin-form select {
  background: var(--bg-surface); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-family: inherit; font-size: 12.5px; }
.qf-select:focus, .field select:focus, .field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }

/* ---- filter chips (the queue's quick views) ---- */
.chips { gap: 6px; margin-bottom: 0; }
.chip { padding: 4px 11px; font-size: 12px; font-weight: 500; color: var(--ink-soft); background: var(--bg-surface); border: 1px solid var(--line); }
.chip:hover { border-color: var(--border-strong); }
.chip.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.chip .n { font-family: var(--font-mono); font-size: 10.5px; margin-left: 5px; opacity: 1; }
.chip.active .n { color: var(--accent); }
.mc-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.mc-filters .qf-select { max-width: 200px; }
.mc-filters .spacer { flex: 1; }

/* ---- tables ---- */
.tbl-wrap { overflow-x: auto; }
thead th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 8px 10px; }
tbody td { padding: 9px 10px; font-size: 13px; }
.order-no { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.order-no.sub { color: var(--muted); }
.mini { font-size: 12px; }
.mini.mono { font-family: var(--font-mono); font-size: 11.5px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.ell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-more { padding: 12px 14px; }

/* ---- tags: pills, status-coloured ---- */
.tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--bg-inset); color: var(--ink-soft); border: 1px solid var(--line); }
.tag.ws-Unassigned { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.ws-Claimed, .tag.ws-In.Progress, .tag.ws-In-Progress { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tag.ws-Needs.Help, .tag.ws-Needs-Help { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag.ws-On.Hold, .tag.ws-On-Hold { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
.tag.ws-Resolved { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tag.issue { background: var(--bg-inset); color: var(--ink-soft); }
.tag.issue.is-good { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tag.issue.is-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.issue.is-bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag.issue.is-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* Activity & Notes feed: which line item (or the whole order) an entry is
   about — see feedItem() in app.js. Kept visually quiet (this is metadata,
   not the point of the entry) but always present, never guessed. */
.tag.order-badge { background: var(--bg-inset); color: var(--muted); }
.tag.item-badge { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tag.pri-Low { background: var(--bg-inset); color: var(--ink-soft); }
.tag.pri-Normal { background: var(--bg-inset); color: var(--ink-soft); }
.tag.pri-High { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.pri-Urgent, .tag.overdue { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag.good { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.tag.violet { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
:root[data-theme="dark"] .tag.ws-In.Progress, :root[data-theme="dark"] .tag.ws-In-Progress { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .tag.ws-On.Hold, :root[data-theme="dark"] .tag.ws-On-Hold { background: var(--purple-soft); color: var(--purple); }
select.tag { cursor: pointer; font-family: inherit; }
.avatar { width: 22px; height: 22px; font-size: 10px; background: var(--accent-soft); color: var(--accent); }

/* ---- the Mission Control components: eyebrow · chip · stat · bar · grids ---- */
.mc-eyebrow, .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.mc-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mc-card-h .mc-eyebrow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-card-h .more { font-size: 12px; color: var(--accent); font-weight: 500; cursor: pointer; }
.mc-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mc-chip.live { color: var(--accent); border-color: transparent; background: var(--accent-soft); }
.mc-chip.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: mcPulse 2.4s infinite; }
@keyframes mcPulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.45); } 70% { box-shadow: 0 0 0 7px rgba(37,99,235,0); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } }
.mc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.mc-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mc-stat { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); color: var(--ink); font-family: inherit; min-width: 0; }
.mc-stat:hover { border-color: var(--border-strong); }
.mc-stat[disabled], .mc-stat.static { cursor: default; }
.mc-num { font-size: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-num.text { font-size: 26px; }
.mc-delta { color: var(--ink-soft); font-size: 12.5px; }
.mc-delta b { color: var(--ink); font-weight: 600; }
.bar { height: 6px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; min-width: 80px; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: var(--accent); }
.bar i.good { background: var(--ok); } .bar i.warn { background: var(--warn); } .bar i.bad { background: var(--danger); }
.mc-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mc-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mc-card { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; min-width: 0; }
.mc-card table td { padding: 6px 8px; }
.mc-card table td:first-child { padding-left: 0; }
.mc-card table tr:last-child td { border-bottom: 0; }
.mc-card tbody tr:hover { background: transparent; cursor: default; }
.mc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.mc-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.mc-sec { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.mc-sec .mc-eyebrow { display: block; margin-bottom: 6px; }
.mc-sec .btn.sm { margin: 4px 4px 0 0; }
.mc-meta { color: var(--muted); font-size: 12px; margin-top: 8px; }
.mc-meta a { color: var(--accent); }
.mc-add { margin-bottom: 14px; }
.mc-add .admin-form { border-bottom: 0; padding: 0; }

/* Motion: cards fade up once on enter (design.md, section 4). data-motion="off" kills it. */
@keyframes mcIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mc-stat, .mc-card { animation: mcIn .4s ease both; }
.mc-kpis > :nth-child(2), .mc-grid3 > :nth-child(2), .mc-grid2 > :nth-child(2) { animation-delay: 40ms; }
.mc-kpis > :nth-child(3), .mc-grid3 > :nth-child(3) { animation-delay: 80ms; }
.mc-kpis > :nth-child(4), .mc-grid3 > :nth-child(4) { animation-delay: 120ms; }
.mc-kpis > :nth-child(5), .mc-grid3 > :nth-child(5) { animation-delay: 160ms; }
.mc-kpis > :nth-child(6), .mc-grid3 > :nth-child(6) { animation-delay: 200ms; }

/* Home KPIs and the older .stat cards read like the new stat cards. */
.hm-kpi, .stat { border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.hm-kpi-n, .stat .n { font-size: 34px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hm-kpi-l, .stat .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.home-card-h b, .panel h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.admin-form { gap: 10px 12px; }
.bulk-bar { border-radius: 10px; }

@media (max-width: 1280px) { .mc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mc-kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mc-kpis, .mc-kpis.four, .mc-grid3, .mc-grid2 { grid-template-columns: 1fr; } .sidenav { width: 180px; } }

/* Home: the companion bar is the heading (greeting + invitation), date under it. */
.home-head { align-items: center; }
.home-head-main { flex: 1; min-width: 0; }
.home-head-main .home-ask { margin: 0 0 6px; padding: 12px 18px; }
.home-head-main .home-ask input { font-size: 16px; font-weight: 500; }
.home-head-main .home-ask input::placeholder { font-style: normal; color: var(--ink); opacity: .9; }
.home-head-main .mini { padding-left: 4px; }

/* Home → "Needs a human": the Mission Control exceptions table. */
.hm-attn-right { display: flex; align-items: center; gap: 10px; }
.hm-attn-table th:first-child, .hm-attn-table td:first-child { width: 14px; padding-right: 0; }
.hm-attn-table td { padding: 8px 10px; }
.hm-attn-table tbody tr { cursor: pointer; }
.hm-attn-table .ell { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--muted); }
.dot.bad { background: var(--danger); } .dot.warn { background: var(--warn); } .dot.good { background: var(--ok); }

/* ============================================================
   TASK HUB (TH-A, 2026-09-11). Huly-like workspace feel, SP HQ
   identity: Ledger rows not cards, hairlines not borders, chips in
   semantic tokens, one accent, dense but readable. Tokens only.
   ============================================================ */
/* ---- Task Hub — workspace shell (R1/R2, 2026-09-07) ---------------------
   Constant frame: navigator · view · peek. Rows not cards in list views,
   hairlines not borders, one accent, the Situation-style colours only for
   state. Tokens only; dark by definition. */
.th-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; min-height: calc(100vh - var(--topbar-h) - 82px); margin: -22px -22px -60px; }
.th-shell.peeking { grid-template-columns: 200px minmax(0, 1fr) 400px; }
.th-nav { background: var(--bg-inset); border-right: 1px solid var(--border-subtle); padding: 14px 8px; display: flex; flex-direction: column; gap: 2px; }
.th-nav-sec { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 6px 10px 4px; }
.th-nav-a { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; color: var(--text-secondary); font-size: 12.5px; text-align: left; width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }
.th-nav-a:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.th-nav-a.on { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 1px rgba(15, 23, 42, .05); }
.th-nav-n { margin-left: auto; font-size: 11px; color: var(--text-muted); font-weight: 500; }
.th-ico { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.th-ask { margin-top: auto; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--border-subtle); background: var(--bg-surface); border-radius: 8px; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.th-ask:hover { color: var(--text-primary); border-color: var(--border-strong); }
.th-main { min-width: 0; padding: 14px 22px 24px; }
.th-vh { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.th-vh h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.th-line { color: var(--text-muted); font-size: 12px; margin-left: 6px; }
.th-line b { color: var(--text-secondary); font-weight: 600; }
.th-line .d { color: var(--danger); font-weight: 600; }
.th-vh .sp, .th-pf .sp, .th-pk-top .sp, .th-pk-foot .sp { flex: 1; }
.th-vh .btn.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.th-vh .btn .n { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 1px 5px; line-height: 1.2; }
.th-searchrow { margin: 4px 0 8px; }
.th-searchrow input { width: min(360px, 100%); }
.th-ctl { position: relative; }
.th-pop { position: absolute; top: 32px; right: 0; z-index: 12; width: 300px; background: var(--bg-surface-raised); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; }
.th-ph { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 6px 8px 4px; }
.th-pr { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12.5px; color: var(--text-secondary); }
.th-pr > span { width: 74px; flex: none; }
.th-pr .qf-select { flex: 1; min-width: 0; padding: 5px 8px; font-size: 12px; }
.th-pr-chk { gap: 9px; padding: 8px; }
.th-pf { display: flex; gap: 6px; padding: 8px 8px 2px; align-items: center; }
.th-chips { display: flex; gap: 6px; align-items: center; margin: 2px 0 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.th-fchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font: inherit; font-size: 12px; font-weight: 500; border: 0; cursor: pointer; }
.th-fchip s { text-decoration: none; opacity: .7; font-weight: 400; }
.th-sec { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin: 14px 0 2px; }
.th-sec .th-hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); font-size: 12px; margin-left: 8px; }
.th-gh { display: flex; align-items: center; gap: 8px; height: 30px; margin-top: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; cursor: pointer; user-select: none; }
.th-gh.danger { color: var(--danger); }
.th-gh .th-n { color: var(--text-muted); font-weight: 500; letter-spacing: 0; }
.th-gh .th-hint { color: var(--text-muted); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 12px; }
.th-chev { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; color: var(--text-muted); transition: transform .15s; }
.th-gh.closed .th-chev { transform: rotate(-90deg); }
.th-rows { border-top: 1px solid var(--border-subtle); }
.th-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; height: 36px; padding: 0 8px 0 6px; border-bottom: 1px solid var(--border-subtle); cursor: default; }
.th-row:hover { background: var(--bg-surface-hover); }
.th-row.sel { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.th-row:focus-visible { outline: none; background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.th-row.done .th-t { color: var(--text-muted); text-decoration: line-through; }
.th-chk { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg-surface); padding: 0; cursor: pointer; }
.th-chk:hover { border-color: var(--ok); }
.th-chk.on { background: var(--ok); border-color: var(--ok); }
.th-rm { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.th-t { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-c { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 44%; }
.th-td { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 5px 1px 0; background: var(--text-muted); }
.th-td.dev { background: var(--purple); } .th-td.sup { background: var(--teal, #0f6068); } .th-td.ops { background: var(--ok); } .th-td.mk { background: var(--warn); } .th-td.em { background: var(--accent); }
.th-rx { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.th-hov { opacity: 0; transition: opacity .12s; }
.th-row:hover .th-hov, .th-row.sel .th-hov, .th-row:focus-visible .th-hov { opacity: 1; }
.th-pri { font-size: 10px; width: 12px; text-align: center; display: inline-block; }
.th-pri.high { color: var(--warn); } .th-pri.urgent { color: var(--danger); } .th-pri.low { color: var(--text-muted); }
.th-due { min-width: 58px; text-align: right; }
.th-due.today { color: var(--text-primary); font-weight: 600; } .th-due.over { color: var(--danger); font-weight: 600; } .th-due.none { color: var(--text-muted); }
.th-av { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.th-un { width: 20px; height: 20px; border-radius: 50%; border: 1px dashed var(--border-strong); display: inline-block; }
.th-take { height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--bg-surface); font: inherit; font-size: 12px; color: var(--accent); font-weight: 600; cursor: pointer; }
.th-take:hover { background: var(--accent-soft); }
.th-empty { padding: 26px 0; color: var(--text-muted); text-align: center; }
.th-empty-row { padding: 10px 8px; color: var(--text-muted); font-size: 12.5px; border-bottom: 1px solid var(--border-subtle); }
.th-personal { padding: 6px 0 2px; }
.th-personal .card { border: 0; padding: 0; box-shadow: none; background: none; }
.th-kbd { display: flex; gap: 12px; padding: 14px 0 0; font-size: 11.5px; color: var(--text-muted); }
.th-kbd kbd { font: 11px/1 ui-monospace, Menlo, monospace; border: 1px solid var(--border-strong); border-radius: 4px; padding: 2px 5px; color: var(--text-secondary); background: var(--bg-inset); margin-right: 2px; }
.th-report summary { cursor: pointer; color: var(--text-secondary); font-size: 12px; padding: 6px 2px; }
/* peek */
.th-peek { background: var(--bg-surface); border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; min-height: 0; position: sticky; top: 0; max-height: calc(100vh - var(--topbar-h)); }
.th-pk-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--text-muted); font-size: 11.5px; border-bottom: 1px solid var(--border-subtle); }
.th-pk-top button { color: var(--text-muted); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; border: 0; background: none; cursor: pointer; font: inherit; }
.th-pk-top button:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.th-pk-body { overflow: auto; padding: 14px 16px 16px; min-height: 0; flex: 1; }
.th-pk-title { width: 100%; border: 1px solid transparent; background: none; font: 600 16px/1.3 inherit; font-family: inherit; color: var(--text-primary); padding: 4px 6px; margin: -4px -6px 8px; border-radius: 6px; }
.th-pk-title:hover { border-color: var(--border-subtle); } .th-pk-title:focus { outline: none; border-color: var(--accent); background: var(--bg-surface); }
.th-props { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.th-prop { height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--bg-inset); font: inherit; font-size: 12px; color: var(--text-secondary); }
.th-prop.st-InProgress { color: var(--accent); } .th-prop.st-Hold { color: var(--warn); } .th-prop.st-Done { color: var(--ok); }
.th-prop.pri-high { color: var(--warn); font-weight: 600; } .th-prop.pri-urgent { color: var(--danger); font-weight: 600; }
.th-prop-due { display: inline-flex; align-items: center; padding: 0 4px; }
.th-prop-due input { border: 0; background: none; font: inherit; font-size: 12px; color: inherit; }
.th-prop-due.today { color: var(--text-primary); font-weight: 600; } .th-prop-due.over { color: var(--danger); font-weight: 600; }
.th-props .btn.on { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.th-pk-sec { margin-top: 14px; }
.th-pk-sh { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.th-pk-sh .n { font-weight: 500; letter-spacing: 0; }
.th-pk-sh .r { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--accent); cursor: pointer; }
.th-asg { display: flex; flex-wrap: wrap; gap: 4px; }
.th-asg-b { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 3px; border-radius: 13px; border: 1px solid var(--border-subtle); background: none; font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.th-asg-b.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }
.th-pk-desc { width: 100%; min-height: 64px; resize: vertical; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-inset); }
.th-pk-desc:focus { outline: none; border-color: var(--accent); background: var(--bg-surface); color: var(--text-primary); }
.th-chkl { display: flex; flex-direction: column; gap: 2px; }
.th-chkl label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.th-chkl label.d span { color: var(--text-muted); text-decoration: line-through; }
.th-chkl label span { flex: 1; }
.th-chkl label button { border: 0; background: none; color: var(--text-muted); cursor: pointer; opacity: 0; font-size: 14px; }
.th-chkl label:hover button { opacity: .7; }
.th-chk-add { display: flex; gap: 6px; margin-top: 6px; }
.th-chk-add input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: 6px; font: inherit; font-size: 12.5px; background: var(--bg-surface); color: var(--text-primary); }
.th-links { display: flex; flex-wrap: wrap; gap: 6px; }
.th-lk { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--bg-surface); font: inherit; font-size: 12px; color: var(--text-secondary); }
.th-lk.go { cursor: pointer; } .th-lk.go:hover { border-color: var(--accent-line); color: var(--accent); }
.th-lk .k { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.th-cm { display: grid; grid-template-columns: 20px 1fr; gap: 8px; margin-bottom: 10px; }
.th-cm .who { font-size: 12px; font-weight: 600; } .th-cm .who small { color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.th-cm .b { font-size: 12.5px; color: var(--text-primary); line-height: 1.5; white-space: pre-wrap; }
.th-cm-box { display: flex; gap: 6px; align-items: flex-end; margin-top: 6px; }
.th-cm-box textarea { flex: 1; min-width: 0; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12.5px; background: var(--bg-surface); color: var(--text-primary); resize: vertical; }
.th-act summary { list-style: none; cursor: pointer; } .th-act summary::-webkit-details-marker { display: none; }
.th-act-row { font-size: 12px; color: var(--text-muted); padding: 3px 0; } .th-act-row b { color: var(--text-secondary); font-weight: 600; }
.th-pk-foot { border-top: 1px solid var(--border-subtle); padding: 10px 14px; display: flex; gap: 8px; align-items: center; }
.th-pk-foot .btn.danger { color: var(--danger); }
/* the Board inside the hub: page head hidden, cleaner cards (R2) */
#thBody .page-head h1 { display: none; }
#thBody .kb-card { background: var(--bg-surface-raised); border: 1px solid var(--border-subtle); box-shadow: none; padding: 10px 12px 9px; }
#thBody .kb-card:hover { border-color: var(--border-strong); }
#thBody .kb-card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kb-ctx { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }
.kb-foot .sp { flex: 1; }
.kb-foot .th-av { width: 20px; height: 20px; }
.kb-foot .th-due.over, .kb-foot .th-due.today { min-width: 0; }
@media (max-width: 1100px) { .th-shell, .th-shell.peeking { grid-template-columns: minmax(0, 1fr); } .th-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--border-subtle); padding: 8px; } .th-ask { margin-top: 0; margin-left: auto; } .th-peek { position: fixed; right: 0; top: var(--topbar-h); bottom: 0; width: min(400px, 94vw); z-index: 30; box-shadow: -12px 0 30px rgba(0,0,0,.25); max-height: none; } }
#timePanel { width: 360px; }

/* ---- Settings → Companion · Notifications (S1, 2026-09-07) ---------------
   Personal pages carry a green eyebrow, admin pages an amber one — the
   boundary between "my companion" and "the company's notification rules" is
   structural, not a label. Tokens only; dark by definition. */
.sec-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: 2px 8px; border-radius: 5px; }
.sec-eyebrow.personal { color: var(--ok); background: var(--ok-soft); }
.sec-eyebrow.admin { color: var(--warn); background: var(--warn-soft); }
.sec-bound { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border-subtle); border-left: 3px solid var(--ok); background: var(--bg-surface); border-radius: 8px; padding: 9px 12px; font-size: 12.5px; color: var(--text-secondary); max-width: 760px; margin-bottom: 14px; }
.sec-bound.admin { border-left-color: var(--warn); }
.sec-bound b { color: var(--text-primary); }
.cmp-card { padding: 16px 18px; max-width: 760px; margin-bottom: 14px; }
.cmp-card h3 { font-size: 13.5px; }
.cmp-watch { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-subtle); }
.cmp-watch:first-child { border-top: 0; }
.cmp-watch.off .cmp-wmain { opacity: .55; }
.cmp-wmain { flex: 1; min-width: 0; }
.cmp-wmain b { display: block; font-size: 13px; font-weight: 500; }
.cmp-wmain .mini { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-wdays { font: inherit; font-size: 12px; padding: 1px 4px; border: 1px solid var(--border-subtle); border-radius: 5px; background: var(--bg-inset); color: var(--text-primary); }
.cmp-wscope button { padding: 2px 8px; font-size: 11px; }
.cmp-wchip { height: 22px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--bg-inset); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.cmp-wchip.on { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.cmp-wchip.na { opacity: .45; cursor: not-allowed; }
.cmp-wx { color: var(--text-muted); font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 5px; border: 0; background: none; opacity: .6; }
.cmp-wx:hover { opacity: 1; background: var(--danger-soft); color: var(--danger); }
.cmp-last { margin-top: 10px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 12px; background: var(--bg-inset); }
.cmp-last summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary); }
.nf-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-subtle); margin: -4px 0 14px; }
.nf-tab { border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 12.5px; padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.nf-tab.on { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--accent); }
.nf-lock { color: var(--text-muted); font-size: 11px; }
.nf-bar { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; flex-wrap: wrap; }
.nf-bar .sp { flex: 1; }
.nf-chip { height: 26px; padding: 0 10px; border-radius: 13px; border: 1px solid var(--border-subtle); background: none; font: inherit; font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.nf-chip.on { background: var(--text-primary); color: var(--bg-surface); border-color: var(--text-primary); }
.nf-chip .n { opacity: .6; }
.nf-row { display: grid; grid-template-columns: 8px 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px 9px 4px; border-bottom: 1px solid var(--border-subtle); cursor: default; flex-wrap: wrap; }
.nf-row:hover { background: var(--bg-surface-hover); }
.nf-row.unread .nf-t { font-weight: 600; }
.nf-row.unread .nf-dot { background: var(--accent); }
.nf-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.nf-ty { width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center; font-size: 12px; flex: none; background: var(--bg-inset); color: var(--text-secondary); }
.nf-ty.tasks { background: var(--accent-soft); color: var(--accent); }
.nf-ty.conversations { background: var(--purple-soft); color: var(--purple); }
.nf-ty.alerts { background: var(--warn-soft); color: var(--warn); }
.nf-ty.companion { background: var(--purple-soft); color: var(--purple); }
.nf-main { min-width: 0; }
.nf-t { font-size: 13px; color: var(--text-primary); white-space: pre-line; }
.nf-s { display: flex; gap: 6px; align-items: center; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.nf-flow { color: var(--ok); font-weight: 600; font-size: 11.5px; }
.nf-rx { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.nf-hov { display: inline-flex; gap: 6px; opacity: 0; transition: opacity .12s; }
.nf-row:hover .nf-hov, .nf-row:focus-within .nf-hov { opacity: 1; }
.nf-mk { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding: 6px 0 2px 34px; }
.nf-mk-t { flex: 1; min-width: 200px; padding: 6px 9px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-surface); font: inherit; font-size: 13px; color: var(--text-primary); }
.notif-item { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.notif-item .nf-ty { margin-top: 1px; }
.notif-all { display: block; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--border-subtle); background: none; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; text-align: center; }
.notif-all:hover { background: var(--bg-surface-hover); }
/* Operational notifications (the catalog, C1) + Notification Activity — admin pages under Notifications */
.nc-cat { max-width: 860px; margin-bottom: 18px; }
.nc-cat h3 { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.nc-cat h3 .n { color: var(--text-muted); font-weight: 500; letter-spacing: 0; }
.nc-list { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 10px; }
.nc-ev { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px 240px; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--border-subtle); }
.nc-ev:first-child { border-top: 0; }
.nc-ev.off .nc-t, .nc-ev.off .nc-m { color: var(--text-muted); }
.nc-g { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-inset); color: var(--text-secondary); font-size: 14px; }
.nc-t { font-size: 13px; font-weight: 600; }
.nc-m { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.nc-sent { color: var(--text-muted); }
.nc-days { font: inherit; font-size: 12px; font-weight: 600; padding: 0 4px; border: 1px solid var(--border-subtle); border-radius: 5px; background: var(--bg-inset); color: var(--text-primary); }
.nc-rcp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-inset); font: inherit; font-size: 12px; color: var(--text-primary); max-width: 240px; cursor: pointer; }
.nc-rcp:hover { border-color: var(--border-strong); }
.nc-rcp .nc-who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-rcp .k { color: var(--text-muted); }
.nc-rcp.fixed { border-style: dashed; color: var(--text-secondary); background: none; cursor: default; }
.nc-avs { display: inline-flex; }
.nc-avs .th-av { width: 18px; height: 18px; font-size: 8.5px; margin-left: -5px; border: 2px solid var(--bg-inset); }
.nc-avs .th-av:first-child { margin-left: 0; }
.nc-pop { position: absolute; right: 12px; top: 46px; width: 320px; background: var(--bg-surface-raised); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; z-index: 30; }
.nc-ph { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 6px 8px 4px; }
.nc-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.nc-opt:hover { background: var(--bg-surface-hover); }
.nc-opt.on { background: var(--accent-soft); }
.nc-opt small { margin-left: auto; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.nc-sub { padding: 2px 8px 6px 30px; display: flex; flex-wrap: wrap; gap: 4px; }
.nc-chip { height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid var(--border-subtle); background: none; font: inherit; font-size: 11.5px; color: var(--text-secondary); cursor: pointer; }
.nc-chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.nc-pop hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 6px 0; }
.nc-chk { display: flex; align-items: center; gap: 9px; padding: 7px 8px; font-size: 12.5px; cursor: pointer; }
.nc-foot { display: flex; gap: 6px; padding: 8px 8px 2px; align-items: center; }
.nc-impact { font-size: 11.5px; color: var(--text-muted); flex: 1; }
.na-stat { display: flex; gap: 26px; margin: 10px 0 14px; font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; }
.na-stat b { font-size: 16px; font-weight: 600; color: var(--text-primary); display: block; font-variant-numeric: tabular-nums; }
.na-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 260px; gap: 12px; align-items: center; padding: 11px 8px; border-bottom: 1px solid var(--border-subtle); }
.na-row.go { cursor: pointer; }
.na-row.go:hover, .na-row.go:focus-visible { background: var(--bg-surface-hover); outline: none; }
.na-t { font-size: 13px; font-weight: 600; }
.na-about { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.na-sent { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 6px; align-items: center; }
.na-sent .th-av { width: 18px; height: 18px; font-size: 8.5px; }
.na-trail { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.na-tick { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.na-tick i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.na-tick.no { color: var(--text-muted); } .na-tick.no i { background: var(--border-strong); }
.na-tick.wait i { background: var(--warn); }
/* ---- Task Hub R3–R5: situation, links, chat, planner, workstreams -------- */
.th-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: auto; }
.th-hash { color: var(--text-muted); font-weight: 500; width: 10px; display: inline-block; }
.th-thread { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; padding: 6px 10px; border-radius: 6px; align-items: start; text-align: left; border: 0; background: none; font: inherit; cursor: pointer; width: 100%; }
.th-thread:hover { background: var(--bg-surface-hover); }
.th-thread .tt { min-width: 0; display: flex; flex-direction: column; }
.th-thread .t { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-thread .l { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-thread .w { font-size: 10.5px; color: var(--text-muted); }
.th-sit { border: 1px solid var(--border-subtle); border-left: 3px solid var(--warn); border-radius: 8px; background: var(--bg-inset); padding: 9px 11px; }
.th-sit.empty { border-left-color: var(--border-strong); color: var(--text-muted); font-size: 12.5px; }
.th-sit .l { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.th-sit .l i { width: 7px; height: 7px; border-radius: 50%; flex: none; position: relative; top: -1px; background: var(--text-muted); }
.th-sit .l i.danger { background: var(--danger); } .th-sit .l i.warn { background: var(--warn); } .th-sit .l i.ok { background: var(--ok); }
.th-sit .src { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.th-lk-x { font-style: normal; color: var(--text-muted); margin-left: 2px; cursor: pointer; opacity: 0; }
.th-lk:hover .th-lk-x { opacity: .8; } .th-lk-x:hover { color: var(--danger); }
.th-linkpop { position: absolute; left: 0; right: auto; top: 26px; width: 320px; }
.th-pk-sec { position: relative; }
.th-lk-in { width: 100%; padding: 6px 9px; border: 1px solid var(--border-subtle); border-radius: 6px; font: inherit; font-size: 12.5px; background: var(--bg-surface); color: var(--text-primary); }
.th-lk-res { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; margin-top: 6px; }
.th-lk-res button { text-align: left; padding: 6px 8px; border-radius: 6px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text-primary); cursor: pointer; }
.th-lk-res button:hover { background: var(--bg-surface-hover); }
.th-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.th-plan { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.th-plan input { padding: 4px 6px; border: 1px solid var(--border-subtle); border-radius: 6px; font: inherit; font-size: 12px; background: var(--bg-surface); color: var(--text-primary); }
.th-av.comp { background: var(--purple-soft); color: var(--purple); }
.th-av.lg { width: 26px; height: 26px; font-size: 11px; }
.th-cm.lumo .b { background: var(--purple-soft); border-radius: 0 8px 8px 8px; padding: 8px 10px; }
.th-cm.lumo .who { color: var(--purple); }
.th-cm .b .at, .th-msg .b .at { color: var(--accent); font-weight: 600; }
/* chat */
.th-main.chatting { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - var(--topbar-h) - 24px); padding-bottom: 12px; }
.th-ch { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.th-ch h2 { margin: 0; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.th-msgs { flex: 1; min-height: 0; overflow: auto; padding: 14px 0; display: flex; flex-direction: column; gap: 14px; }
.th-daysep { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11px; }
.th-daysep:before, .th-daysep:after { content: ""; flex: 1; border-top: 1px solid var(--border-subtle); }
.th-msg { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.th-msg .who { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.th-msg .who small { color: var(--text-muted); font-weight: 400; }
.th-msg .b { font-size: 13px; color: var(--text-primary); margin-top: 1px; line-height: 1.5; white-space: pre-wrap; }
.th-msg.lumo .who { color: var(--purple); }
.th-msg.lumo .b { background: var(--purple-soft); border-radius: 0 8px 8px 8px; padding: 8px 10px; display: inline-block; }
.th-msg-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; opacity: 0; font-size: 14px; }
.th-msg:hover .th-msg-x { opacity: .7; }
.th-prep { margin-top: 8px; max-width: 520px; border: 1px solid var(--accent-line); background: var(--bg-surface-raised); border-radius: 10px; padding: 10px 12px; }
.th-prep .pt { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--purple); font-weight: 600; letter-spacing: .02em; margin-bottom: 4px; }
.th-prep .pt small { color: var(--text-muted); font-weight: 400; margin-left: auto; }
.th-prep .acts { display: flex; gap: 8px; margin-top: 9px; }
.th-prep.done { border-color: var(--border-subtle); background: none; padding: 6px 0 0; display: flex; gap: 8px; align-items: center; }
.th-prep .ask-task-card { margin: 0; }
.th-composer { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); padding: 8px 10px; position: relative; }
.th-composer textarea { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-primary); resize: vertical; min-height: 40px; }
.th-composer textarea:focus { outline: none; }
/* planner */
.th-pl { display: grid; grid-template-columns: 220px 1fr; gap: 14px; margin-top: 8px; }
.th-tray { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-inset); padding: 10px; align-self: start; }
.th-pill { display: flex; align-items: center; gap: 8px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 7px; padding: 7px 9px; margin-bottom: 6px; font-size: 12.5px; cursor: grab; }
.th-pill .g { color: var(--text-muted); font-size: 12px; } .th-pill .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .th-pill .c { color: var(--text-muted); font-size: 11px; }
.th-pill.dragging, .th-slot.dragging { opacity: .4; }
.th-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.th-day { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); padding: 10px; min-height: 420px; }
.th-day.today { border-color: var(--accent-line); background: var(--bg-surface-raised); }
.th-day.over { border-color: var(--accent); background: var(--accent-soft); }
.th-day .dh { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 600; }
.th-day .dh .h { margin-left: auto; color: var(--text-muted); font-weight: 500; font-size: 11.5px; }
.th-day .load { height: 3px; background: var(--border-subtle); border-radius: 2px; margin: 8px 0 10px; overflow: hidden; }
.th-day .load i { display: block; height: 100%; background: var(--accent); } .th-day .load i.w { background: var(--warn); }
.th-slot { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 7px 8px; margin-bottom: 6px; font-size: 12px; cursor: pointer; }
.th-slot .tm { font-size: 10.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.th-slot .x { margin-left: auto; border: 0; background: none; color: var(--text-muted); cursor: pointer; opacity: 0; }
.th-slot:hover .x { opacity: .8; }
.th-slot.sup { border-color: var(--teal, #0f6068); background: var(--teal-soft, var(--bg-inset)); } .th-slot.mk { border-color: var(--warn); background: var(--warn-soft); } .th-slot.ops { border-color: var(--ok); background: var(--ok-soft); } .th-slot.dev { border-color: var(--purple); background: var(--purple-soft); }
.th-slot.done { opacity: .55; text-decoration: line-through; }
.th-drop { border: 1px dashed var(--border-strong); border-radius: 6px; padding: 8px; text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }
/* workstreams */
.th-ws { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); margin-bottom: 8px; }
.th-ws-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 90px 110px 26px; gap: 16px; align-items: center; padding: 11px 12px; cursor: pointer; }
.th-ws-row:hover { background: var(--bg-surface-hover); }
.th-ws-row .t { font-weight: 600; font-size: 13px; } .th-ws-row .s { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.th-bar { height: 5px; background: var(--border-subtle); border-radius: 3px; overflow: hidden; } .th-bar i { display: block; height: 100%; background: var(--ok); }
.th-ws-row .pct { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.th-ws-row .tg { font-size: 12px; color: var(--text-secondary); } .th-ws-row .tg.over { color: var(--danger); font-weight: 600; }
.th-ws-row .risk { font-size: 12px; color: var(--warn); font-weight: 600; }
.th-wsx { border-top: 1px solid var(--border-subtle); background: var(--bg-inset); padding: 6px 12px 10px; }
.th-wsx .wsh { display: flex; align-items: center; gap: 14px; padding: 6px 0 4px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.th-wsx .wsh .sp { flex: 1; }
/* saved views */
.th-view { padding: 2px 4px; }
.th-view-apply { flex: 1; text-align: left; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--text-primary); padding: 6px 6px; border-radius: 6px; cursor: pointer; }
.th-view-apply:hover { background: var(--bg-surface-hover); }
.th-view-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.th-view-x:hover { color: var(--danger); }

/* ---- Task Hub — make the real thing match the prototype (2026-09-07) ----- */
.topbar-new { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.topbar-new svg { width: 14px; height: 14px; }
.topbar-new:hover { filter: brightness(1.08); }
.clock-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 15px; border: 1px dashed var(--border-strong); background: none; color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.clock-chip.live { border-style: solid; border-color: var(--border-subtle); background: var(--bg-inset); color: var(--text-primary); }
.clock-chip.live i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.clock-chip.brk i { background: var(--warn); }
.clock-chip:hover { border-color: var(--accent-line); color: var(--text-primary); }
.th-vh h2, .th-pk-title, .th-ch h2 { font-family: "Inter Tight", Inter, -apple-system, "Segoe UI", sans-serif; }
.th-vh h2 { font-size: 19px; }
.th-nav { width: 232px; padding: 14px 8px; }
.th-shell { grid-template-columns: 232px minmax(0, 1fr); }
.th-shell.peeking { grid-template-columns: 232px minmax(0, 1fr) 400px; }
.th-nav-sec { display: flex; align-items: center; }
.th-nav-sec .plus { margin-left: auto; color: var(--text-muted); font-size: 14px; line-height: 1; }
.th-nav-a .th-hash { width: 10px; text-align: center; font-weight: 500; }
.th-hash.dev { color: var(--purple); } .th-hash.sup { color: var(--teal, #0f6068); } .th-hash.ops { color: var(--ok); } .th-hash.mk { color: var(--warn); } .th-hash.em { color: var(--accent); }
/* avatars carry a person's own colour, like the prototype */
.th-av.a1 { background: var(--av1-bg); color: var(--av1-fg); } .th-av.a2 { background: var(--av2-bg); color: var(--av2-fg); } .th-av.a3 { background: var(--av3-bg); color: var(--av3-fg); }
.th-av.a4 { background: var(--av4-bg); color: var(--av4-fg); } .th-av.a5 { background: var(--av5-bg); color: var(--av5-fg); } .th-av.a6 { background: var(--av6-bg); color: var(--av6-fg); }
/* workstreams: a flat table with a header row, the open stream inset */
.th-ws { border: 0; border-radius: 0; background: none; margin: 0; }
.th-ws-row { padding: 0 8px; height: 48px; border-bottom: 1px solid var(--border-subtle); grid-template-columns: minmax(0, 1fr) 150px 110px 90px 26px; }
.th-ws-head { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px 90px 26px; gap: 16px; padding: 0 8px; height: 30px; align-items: center; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border-subtle); }
.th-wsx { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-inset); padding: 6px 12px 10px; margin: 10px 0 14px; }
.th-wsx .wsh b { color: var(--text-primary); font-weight: 600; }
.th-wsx .th-rows { border-top: 0; }
/* the Board inside the hub: its own compact header, the prototype's columns and cards */
#thBody .page-head, #thBody .pt-ctx, #thBody .kb-nova-banner { display: none; }
#thBody .kb-board { gap: 12px; padding: 4px 0 10px; }
#thBody .kb-list { flex: 0 0 296px; width: 296px; background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px; }
#thBody .kb-list-head { font-size: 12.5px; font-weight: 600; padding: 4px 6px 8px; }
#thBody .kb-count { color: var(--text-muted); font-weight: 500; font-size: 11.5px; background: none; }
#thBody .kb-recur { font-size: 10px; color: var(--purple); background: var(--purple-soft); border-radius: 4px; padding: 1px 5px; font-weight: 600; letter-spacing: .03em; }
#thBody .kb-addcard { width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; color: var(--text-muted); font-size: 12px; border: 0; background: none; }
#thBody .kb-addcard:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
#thBody .kb-ctitle { font-size: 13px; }
.th-boardbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.th-boardbar .qf-select { padding: 5px 8px; font-size: 12px; }

/* ============================================================================
   Task Hub v2 (2026-09-08): My Work vs Task Pool · recurring ledger · campaigns
   ============================================================================ */
.th-nav-a.sub { height: 24px; padding-left: 30px; font-size: 12px; }
.th-nav-a.sub .th-nav-n { font-size: 10.5px; }
.th-nav-n .hot, .th-nav-n.hot { color: var(--danger); font-weight: 700; }
.th-nav-seg { display: inline-flex; margin: 4px 10px 6px 30px; border: 1px solid var(--border-subtle); border-radius: 7px; overflow: hidden; }
.th-nav-seg button { padding: 3px 9px; font-size: 11px; color: var(--text-secondary); background: none; border: 0; cursor: pointer; }
.th-nav-seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.th-seg { display: inline-flex; border: 1px solid var(--border-subtle); border-radius: 7px; overflow: hidden; }
.th-seg button { padding: 5px 10px; font-size: 12px; color: var(--text-secondary); background: none; border: 0; cursor: pointer; }
.th-seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.th-vh .th-q { color: var(--text-muted); font-size: 12px; margin-left: 6px; font-style: italic; }
.th-cad { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--purple); background: var(--purple-soft); border-radius: 5px; padding: 1px 6px; font-weight: 600; white-space: nowrap; flex: none; }
.th-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.th-st.ok { color: var(--ok); font-weight: 600; } .th-st.miss { color: var(--danger); } .th-st.next { color: var(--text-muted); } .th-st.due { color: var(--text-primary); font-weight: 600; }
.th-due.next { color: var(--text-muted); } .th-due.ok { color: var(--ok); font-weight: 600; }
.th-row { position: relative; }
.th-row.rec { grid-template-columns: 18px minmax(0, 1fr) auto; }
.th-rec-i { font-size: 12px; text-align: center; }
.th-row.tall { height: auto; min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.th-row.urg .th-t { font-weight: 600; }
.th-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--danger); border-radius: 2px 0 0 2px; }
.th-rm.col { flex-direction: column; align-items: flex-start; gap: 1px; }
.th-rm.col .th-c { max-width: none; }
.th-why { display: block; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.th-take.big { height: 28px; padding: 0 12px; background: var(--accent); border-color: var(--accent); color: #fff; }
.th-take.big:hover { filter: brightness(1.05); }
.th-own { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 10.5px; font-weight: 600; }
.th-own.me { background: var(--accent-soft); color: var(--accent); }
.th-own.none { background: var(--bg-inset); color: var(--text-muted); border: 1px dashed var(--border-strong); font-weight: 500; }
.th-pulse { display: flex; gap: 16px; align-items: center; padding: 12px 0 0; font-size: 12px; color: var(--text-muted); }
.th-pulse b { color: var(--text-secondary); font-weight: 600; }
.th-pulse .sp { margin-left: auto; }
.th-gh-r { margin-left: 6px; }
.th-linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.th-poolnote { font-size: 12px; color: var(--text-secondary); background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; margin: -6px 0 12px; }
.th-prop.rec { color: var(--purple); font-weight: 600; }
/* occurrence ledger */
.th-ledger { border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; }
.th-occ { display: grid; grid-template-columns: 20px 84px 1fr; gap: 10px; align-items: center; height: 30px; padding: 0 10px; font-size: 12.5px; border-bottom: 1px solid var(--border-subtle); }
.th-occ:last-child { border-bottom: 0; }
.th-occ .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg-surface); display: grid; place-items: center; font-size: 9px; color: #fff; }
.th-occ.done .dot { background: var(--ok); border-color: var(--ok); }
.th-occ.missed .dot { border-color: var(--danger); background: var(--danger-soft); }
.th-occ.active { background: var(--accent-soft); }
.th-occ.active .dot { border-color: var(--accent); border-width: 2px; }
.th-occ.upcoming { color: var(--text-muted); }
.th-occ .d { font-variant-numeric: tabular-nums; font-weight: 600; }
.th-occ.upcoming .d { font-weight: 500; }
.th-occ .s { color: var(--text-secondary); }
.th-occ.missed .s { color: var(--danger); }
.th-streak { display: flex; gap: 3px; margin-top: 8px; align-items: center; font-size: 11px; color: var(--text-muted); }
.th-streak i { width: 14px; height: 6px; border-radius: 2px; background: var(--ok); }
.th-streak i.m { background: var(--danger); }
.th-streak span { margin-left: 6px; }
/* pool board */
.th-pboard .th-pcol.urg { border-color: var(--danger); background: var(--danger-soft); }
.th-pcol.over { outline: 2px dashed var(--accent); outline-offset: -4px; }
/* Pool Board — full-size workspace (2026-09-09): fill the main area, four
   balanced full-height columns that scroll internally, rebalance when the peek
   opens (the middle grid track just narrows), and drop to two columns on
   narrow screens. Scoped to .th-pboard so the classic category board and the
   List view are untouched; drag/take/categories/filters key off data-th-* so
   they still work. */
.th-main.boarding { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - var(--topbar-h) - 24px); }
.th-main.boarding #thBody { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.th-main.boarding .th-vh, .th-main.boarding .th-searchrow { flex: none; }
#thBody .kb-board.th-pboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 4px 0 6px; }
.th-pboard .th-pcol { display: flex; flex-direction: column; min-height: 0; background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px; }
.th-pboard .kb-col-h { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13px; padding: 2px 4px 10px; flex: none; }
.th-pboard .kb-cards { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 1000px) {
  .th-main.boarding { height: auto; }
  #thBody .kb-board.th-pboard { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .th-pboard .th-pcol { min-height: 240px; }
}
.th-pc.dim { opacity: .7; }
.th-pc .kb-foot .sp { flex: 1; }
.th-addc { width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; color: var(--text-muted); font-size: 12px; background: none; border: 0; cursor: pointer; }
.th-addc:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
/* campaigns */
.th-tl { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); min-width: 900px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); margin: 0 0 14px; overflow: auto; }
.th-mo { padding: 8px 10px 46px; border-right: 1px solid var(--border-subtle); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); position: relative; min-height: 74px; }
.th-mo:last-child { border-right: 0; }
.th-mo.now { background: var(--bg-inset); }
.th-evs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.th-ev { display: flex; align-items: flex-start; gap: 7px; width: 100%; min-width: 0; padding: 5px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary); font: inherit; font-size: 10.5px; letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; }
.th-ev:hover { background: var(--bg-surface-hover); }
.th-ev i { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); border: 2px solid var(--bg-surface); box-shadow: 0 0 0 1px var(--warn); }
.th-ev span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.th-ev.tpl i { background: var(--bg-surface); box-shadow: 0 0 0 1px var(--border-strong); }
.th-ev.tpl { color: var(--text-muted); }
.th-ev b { font-weight: 600; }
.th-ev small { color: var(--text-muted); }
.th-ev-none { font-size: 10.5px; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
.th-cg { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.th-camp { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface); margin-bottom: 12px; }
.th-camp-h { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; }
.th-camp-h:hover { background: var(--bg-surface-hover); }
.th-camp-h .t { font-weight: 600; font-size: 13.5px; }
.th-camp-h .m { font-size: 12px; color: var(--text-muted); }
.th-camp-h .m b { color: var(--text-secondary); font-weight: 600; }
.th-camp-h .tin { font-size: 12px; font-weight: 600; color: var(--warn); }
.th-camp-h .tin.past { color: var(--text-muted); font-weight: 500; }
.th-camp .th-rows { border-top: 1px solid var(--border-subtle); padding: 0 6px; }
.th-toff { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-muted); width: 36px; text-align: right; margin-right: 8px; flex: none; }
.th-cstep .th-row { grid-template-columns: 18px auto minmax(0, 1fr) auto; }
.th-tpl { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-inset); padding: 10px 12px 12px; }
.th-tpl-it { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--text-primary); background: none; border: 0; cursor: pointer; text-align: left; }
.th-tpl-it:hover { background: var(--bg-surface-hover); }
.th-tpl-it.on { background: var(--bg-surface); box-shadow: 0 1px 1px rgba(15, 23, 42, .05); font-weight: 600; }
.th-tpl-it .n { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.th-prev { margin-top: 10px; border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: 8px; padding: 9px 10px; font-size: 12px; color: var(--text-secondary); }
.th-prev-f { display: grid; gap: 6px; margin-bottom: 8px; }
.th-prev-f label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-muted); }
.th-prev-f input { font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--bg-surface); color: var(--text-primary); }
.th-prev-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-bottom: 8px; font-size: 12px; }
.th-prev-stores label { display: flex; gap: 6px; align-items: center; }
.th-prev-sum b { color: var(--text-primary); }
.th-prev-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-primary); }
.th-prev-acts { display: flex; gap: 6px; margin-top: 8px; }
.th-empty { padding: 34px 24px; border: 1px dashed var(--border-strong); border-radius: 10px; color: var(--text-muted); font-size: 13px; text-align: center; background: var(--bg-inset); }
.th-empty strong { display: block; color: var(--text-primary); font-size: 16px; margin-bottom: 6px; }
.th-empty p { max-width: 420px; margin: 0 auto 16px; line-height: 1.55; }

/* ============================================================================
   SP HQ interaction system (public/ui.js) — dialogs, forms, popovers, toasts,
   state blocks. One visual language: the app's tokens, radius, buttons, focus.
   ============================================================================ */
html.ui-locked { overflow: hidden; }
.ui-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .48); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .13s ease; }
.ui-scrim.on { opacity: 1; }
.ui-dlg { width: min(480px, 100%); max-height: min(88vh, 100%); display: flex; flex-direction: column; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow); transform: translateY(6px) scale(.985); transition: transform .13s ease; }
.ui-scrim.on .ui-dlg { transform: none; }
.ui-dlg.lg { width: min(680px, 100%); }
.ui-dlg.sm { width: min(400px, 100%); }
.ui-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 6px; }
.ui-head h3 { margin: 0; font: 600 15px/1.3 "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -.01em; text-wrap: balance; }
.ui-dlg.danger .ui-head h3 { color: var(--danger); }
.ui-sub { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.ui-x { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 7px; border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.ui-x:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.ui-body { padding: 8px 18px 14px; overflow: auto; min-height: 0; font-size: 13px; }
.ui-p { margin: 4px 0 10px; color: var(--text-secondary); line-height: 1.55; max-width: 60ch; }
.ui-p:last-child { margin-bottom: 4px; }
.ui-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 18px 16px; border-top: 1px solid var(--border-subtle); }
.ui-foot .btn { min-width: 84px; }
.ui-form { display: flex; flex-direction: column; gap: 12px; }
.ui-field { display: flex; flex-direction: column; gap: 5px; }
.ui-field.inline { flex-direction: row; align-items: center; }
.ui-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.ui-opt { font-weight: 400; color: var(--text-muted); }
.ui-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); outline: none; transition: border-color .12s, box-shadow .12s; }
.ui-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-in.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
textarea.ui-in { resize: vertical; min-height: 64px; }
.ui-field.bad .ui-in { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.ui-hint { font-size: 11.5px; color: var(--text-muted); }
.ui-err { font-size: 11.5px; color: var(--danger); font-weight: 600; }
.ui-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ui-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.ui-row { display: flex; gap: 8px; align-items: center; }
.ui-row .ui-in { flex: 1; }
.ui-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-choice { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.ui-choice:hover { background: var(--bg-surface-hover); border-color: var(--border-strong); }
.ui-choice.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ui-choice b { font-weight: 600; }
.ui-choice small { color: var(--text-muted); font-size: 11.5px; }
.ui-choice:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-list { display: flex; flex-direction: column; gap: 6px; }
.ui-list .ui-choice.row { width: 100%; flex-direction: row; align-items: baseline; gap: 10px; padding: 9px 12px; }
.ui-custom { margin-top: 12px; }
/* popover */
.ui-pop { position: fixed; z-index: 190; min-width: 200px; max-width: min(360px, 94vw); background: var(--bg-surface-raised, var(--bg-surface)); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; font-size: 12.5px; }
/* toast kinds — the existing #toast, with a tint by kind */
.toast[data-kind="error"] { background: var(--danger); color: #fff; }
.toast[data-kind="ok"] { background: var(--ok); color: #fff; }
.toast[data-kind="info"] { background: var(--accent); color: #fff; }
/* state blocks */
.ui-state { padding: 22px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
.ui-state .t { color: var(--text-secondary); font-weight: 500; }
.ui-state .h { font-size: 12px; margin-top: 4px; }
.ui-state.error .t { color: var(--danger); }
.ui-state.loading { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* viewport safety for the older panels: never taller than the screen */
.drawer-panel, .modal-overlay > * { max-height: 96vh; overflow: auto; }
@media (prefers-reduced-motion: reduce) { .ui-scrim, .ui-dlg, .ui-choice, .ui-in { transition: none; } }
@media (max-width: 640px) { .ui-scrim { padding: 10px; align-items: end; } .ui-dlg { width: 100%; border-radius: 12px 12px 10px 10px; } .ui-foot { flex-wrap: wrap; } .ui-foot .btn { flex: 1; } }

/* Narrow screens (≤1100px): the navigator is a horizontal strip — only the five top-level entries fit; anchors, segments and threads wait for the wide layout. */
@media (max-width: 1100px) { .th-nav { flex-wrap: wrap; align-items: center; gap: 4px; } .th-nav .th-nav-a { width: auto; } .th-nav .th-nav-a.sub, .th-nav .th-nav-seg, .th-nav .th-thread, .th-nav .th-nav-sec { display: none; } }
/* Multi-item order workspace */
/* Was hardcoded #fff/#f8fbff — invisible-on-dark until the 2026-09-10 page
   redesign made this box a lot more prominent (it used to sit inside a
   drawer, now it's right under the page header). Tokenized so dark mode
   actually works instead of just not crashing. */
.order-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px;border-bottom:1px solid var(--line);background:var(--bg-surface)}
.order-progress>div{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg-surface-raised)}
.order-progress span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.order-progress b{font-size:15px}.order-progress .attention{border-color:var(--danger);background:var(--danger-soft)}.order-progress .attention b{color:var(--danger)}
.litem{position:relative;display:grid;grid-template-columns:34px 48px minmax(0,1fr);gap:8px;align-items:start;border:1px solid var(--line);border-radius:8px;padding:9px;margin:7px 0;background:#fff}.litem-requote{border-color:#f1b4b4;background:#fff9f9}.litem-code{font-weight:700;font-size:12px;padding-top:9px;color:#344054}.litem-sup{margin-top:5px}.litem-sup .tag{margin-left:5px}
.litem-removed { opacity: .6; }
/* Items table (renderOrderDetail's itemsPanel, since the 2026-09-10 page
   redesign — was a stack of cards before) — reuses .tbl-wrap/<table> exactly
   like the Queue's own table, so it inherits the same borders/hover/dark
   tokens with no new rules needed for the table shell itself. */
.litems-table .litem-img.sm { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex-shrink: 0; }
.litems-table tr.litem-flagged { background: var(--warn-soft); }
.litems-table td { vertical-align: middle; }
@media(max-width:900px){.order-progress{grid-template-columns:1fr}.litem{grid-template-columns:28px 42px minmax(0,1fr)}}