/* ============================================================================
   refresh.css — the 2026-10 visual refresh. Loaded LAST, after components.css.

   WHY THIS FILE EXISTS
   The reps' verdict on the screens (2026-10-21) was "sesak, penuh, berantakan":
   crowded, full, messy. Measured, the noise came from a handful of habits applied
   everywhere rather than from any one screen:
     - a warm cream ground under white cards with a border AND a shadow on each,
       so every block on a screen had three edges;
     - a monospace face on every figure and account code, which made the money
       read as machine output;
     - UPPERCASE letter-spaced labels on every tile, filter and table heading —
       twenty-four rules of them — so labels shouted as loud as the numbers;
     - a coloured stripe on top of every tile and a "click → detail" caption on
       each, the same hint printed on every card;
     - pages that ran the full 1440px, so a short sentence and its number sat a
       screen-width apart.
   Each is fixed once here, by overriding the shared classes, so every screen
   changes together and no view file had to be touched to get there. The
   tokens below stay contrast-checked (see tokens.css for the measuring rule;
   the ratios are in the comments).
   ========================================================================= */

:root {
  /* A near-white, faintly green neutral. Muted text 4.88:1, attention 4.74:1,
     critical 4.97:1, positive 4.60:1 on it. */
  --bg-canvas: #F4F5F2;
  /* Sunken fills (segmented controls, sub-tabs). Muted 4.82, attention 4.69,
     critical 4.91, positive 4.55. */
  --bg-sunken: #F2F4F0;
  --border-subtle: #E6E8E4;
  --border-strong: #D5D9D3;
  --n-100: #EEF0EC;
  /* Figures keep tabular digits from the sans face; see .mono below. */
  --font-mono: var(--font-sans);
  --content-max: 1240px;
  --e-1: 0 1px 2px rgba(24, 32, 43, .04);
  --e-2: 0 1px 2px rgba(24, 32, 43, .04), 0 6px 16px -10px rgba(24, 32, 43, .16);
}

body { background: var(--bg-canvas); }

/* Digits line up in columns without a second typeface. */
.mono, .kr-val, .kpi .val, table.dt td, .hv, .fold-m {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.acctcode, .acctcode.mono, .sub-note.mono { color: var(--text-muted); font-size: 12px; }

/* ── Width: a page is read, not scanned edge to edge ──────────────────────── */
.content { max-width: var(--content-max); padding-left: var(--sp-6); padding-right: var(--sp-6); }
@media (max-width: 700px) {
  .content { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ── Cards: one edge, not three ──────────────────────────────────────────── */
.card, .kr, .fold, .arow {
  border-color: var(--border-subtle);
  box-shadow: none;
}
.card { border-radius: var(--r-md); margin-bottom: var(--sp-5); }
.card-h { padding-top: var(--sp-4); padding-bottom: var(--sp-3); }
.card-h h3 { font-size: 16px; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.card-h .sub { color: var(--text-muted); font-weight: var(--fw-normal); }

/* ── Tiles: the figure leads, the label is quiet, no decoration ──────────── */
.kpi {
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
  background: var(--bg-surface);
  border-radius: var(--r-md);
}
.kpi .stripe,
.kpi .filt { display: none !important; }
.kpi .lab {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--text-secondary) !important;
}
.kpi .val { font-size: 28px; line-height: 34px; font-weight: var(--fw-bold); color: var(--text-primary); }
.kpi .meta { color: var(--text-muted); font-size: 12px; }
.kpi.click:hover, .kr.click:hover { border-color: var(--accent-border) !important; background: var(--bg-surface); }
/* Tiles in a .grid sat flush against each other inside one bordered strip on
   some screens and as separate cards on others; separate cards everywhere. */
.grid > .kpi { margin: 0; }

/* ── Labels speak in sentence case ───────────────────────────────────────── */
table.dt th, .dt th,
.tbl-tools .fbtn .lb,
.ws-facts .fact .k,
.section-label,
.chart-kpis .ck-l,
.why-rank .wl,
.field label,
.eyebrow,
.reorder-tbl th,
.reorder-stat-lbl,
table.dt[data-cards="true"] td::before {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
table.dt th, .dt th {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: transparent;
}
.tbl-tools .fbtn .lb { font-size: 12px; font-weight: var(--fw-semibold); color: var(--text-muted); }

/* ── Tables: rows separated by space and one hairline ────────────────────── */
table.dt td { border-bottom-color: var(--border-subtle); }
table.dt tbody tr:hover td { background: var(--n-25); }
.tbl-tools { border-bottom-color: var(--border-subtle); }
.tbl-foot { color: var(--text-muted); }

/* ── Page header: the question, then air ─────────────────────────────────── */
.ph { margin-bottom: var(--sp-5); }
.ph-q { font-size: 24px; line-height: 30px; }
.ph-sub { color: var(--text-secondary); margin-top: 4px; }
@media (max-width: 700px) {
  .ph { margin-bottom: var(--sp-4); }
  .ph-q { font-size: 21px; line-height: 27px; }
}

/* ── Badges: quieter fills, same meaning ─────────────────────────────────── */
.sbadge { font-weight: var(--fw-semibold); border-color: transparent; }
.sbadge.muted { background: var(--n-100); color: var(--text-secondary); }

/* ── The account row (Today, On Deck, Gone quiet) ────────────────────────── */
.arows { gap: 8px; }
.arow { border-radius: var(--r-md); padding: 12px var(--sp-4); }
.arow:hover { border-color: var(--accent-border); background: var(--bg-surface); }
.ar-name { font-weight: var(--fw-bold); }
.ar-seg { color: var(--text-muted); }

/* ── Folded sections read as quiet rows, not as cards ────────────────────── */
.fold > summary { padding: var(--sp-3) var(--sp-4); }
.fold-t { font-size: 16px; }

/* The "What does this mean?" disclosures: one quiet line, not a control. */
.prose-toggle { color: var(--text-muted); }

/* go() moves focus to #content after every navigation so a screen reader starts at
   the new screen; that is programmatic focus, not something to draw a ring around. */
#content:focus, #content:focus-visible { outline: none; box-shadow: none; }

/* The frozen first column drew a full-height rule down every table. */
table.dt th:first-child, table.dt td:first-child { border-right-color: transparent !important; box-shadow: none !important; }

/* ── Phone: one compact account card for every table (DS-07) ──────────────────
   The block layout gave each cell its own labelled line, two to a row: 25
   accounts came to 6,100px on Accounts, ~240px a card, with the label printed in
   capitals above every value. Now the name leads, and the facts run on as short
   "label value" pairs that wrap, so a card is three or four lines. Same cells,
   same data-l labels written by renderTable; only the arrangement changes. */
@media (max-width: 700px) {
  .tbl-tools { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
  .tbl-tools .active-filters { flex: 1 0 100%; }

  table.dt[data-cards="true"] tbody tr:not(.xrow) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 12px 14px !important;
    border-radius: var(--r-md) !important;
    margin-bottom: 8px !important;
  }
  table.dt[data-cards="true"] td {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    padding: 0 !important;
    font-size: 13px;
    line-height: 20px;
  }
  table.dt[data-cards="true"] td::before {
    display: inline !important;
    font-size: 12px !important;
    font-weight: var(--fw-medium) !important;
    color: var(--text-muted) !important;
  }
  table.dt[data-cards="true"] td > div { display: inline; }
  table.dt[data-cards="true"] td .acctcode { display: inline; margin-left: 6px; }
  /* Any line after the name -- a code written as a bare <div>, not .acctcode -- ran into
     it: "Southwest School & Office SupplyNL4057". Same gap and weight as .acctcode. */
  table.dt[data-cards="true"] td:first-child > :not(:first-child) { margin-left: 6px; font-size: var(--fs-2xs); font-weight: 400; color: var(--text-muted); }
  table.dt[data-cards="true"] td:first-child {
    flex: 1 0 100%;
    display: block !important;
    border-bottom: 0 !important;
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
    font-size: 15px;
  }
  table.dt[data-cards="true"] td[data-cell-kind="action"],
  table.dt[data-cards="true"] td[data-cell-kind="wide"],
  table.dt[data-cards="true"] td[colspan] { flex: 1 0 100%; display: block !important; }
  table.dt[data-cards="true"] td[data-cell-kind="action"] { padding-top: 6px !important; }
  table.dt[data-cards="true"] td .sbadge,
  table.dt[data-cards="true"] td .pill { font-size: 12px; line-height: 18px; }
}

/* ── Copilot window ──────────────────────────────────────────────────────── */
.global-ask-window.cp { width: 460px; height: min(640px, calc(100vh - 110px)); border-radius: var(--r-lg); border-color: var(--border-subtle); }
.cp .ask-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.cp .ask-top .av { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; flex: none; }
.cp-title { min-width: 0; flex: 1; }
.cp-title .st { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp .ask-msgs { background: var(--bg-canvas); padding: 16px; gap: 10px; font-size: 14px; }
.cp .msg .ava { display: none; }
.cp .bubble { max-width: 92%; border-radius: 14px; box-shadow: none; border-color: var(--border-subtle); padding: 10px 14px; }
.cp .msg.user .bubble { box-shadow: none; }
.cp .msg.err .bubble { border-color: var(--attention-border); background: var(--attention-bg); }
.cp .bubble p { margin: 0 0 6px; }
.cp .bubble p:last-child { margin-bottom: 0; }
.cp .bubble h4 { font-size: 14px; margin: 8px 0 4px; }
.cp .bubble ul, .cp .bubble ol { margin: 4px 0 8px; padding-left: 20px; }
.cp .bubble li { margin: 2px 0; }
.cp .bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cp .msg.user .bubble a { color: inherit; }
.cp .bubble code { font-size: 12.5px; background: var(--n-100); padding: 0 4px; border-radius: 4px; }
.cp-meta { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-muted); }
.cp-copy { margin-top: 6px; background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer; text-decoration: underline; }
.cp-unver { color: var(--attention-fg); font-weight: 600; }
.cp-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--text-muted); animation: cpBlink 1s steps(2) infinite; }
@keyframes cpBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cp-caret { animation: none; } }
.cp-empty { display: flex; flex-direction: column; gap: 12px; }
.cp-hello { margin: 0; color: var(--text-body); line-height: 1.5; }
.cp-sugg { display: flex; flex-direction: column; gap: 8px; }
.cp-chip { text-align: left; font: inherit; font-size: 13.5px; line-height: 1.4; color: var(--text-body); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.cp-chip span { font-size: 11.5px; font-weight: var(--fw-semibold); color: var(--accent); }
.cp-chip:hover { border-color: var(--accent-border); }
.cp .ask-in { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border-subtle); background: var(--bg-surface); }
.cp .ask-in textarea { flex: 1; resize: none; font: inherit; font-size: 15px; line-height: 22px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); min-height: 44px; max-height: 140px; }
.cp .ask-in textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.cp .ask-in .btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: var(--r-sm); flex: none; }
.cp-foot { font-size: 11.5px; color: var(--text-muted); padding: 0 14px 10px; background: var(--bg-surface); }
@media (max-width: 700px) {
  .global-ask-window.cp { left: 0; right: 0; bottom: 0; top: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; z-index: 220; }
  /* An answer with a chart or table adds .wide, whose desktop size (further down, and one class more
     specific) beat the rule above: on a phone Copilot became a 342x754 window floating over the
     page, its tab bar and the next card showing under it (tutorial take, 2026-10-23). */
  .global-ask-window.cp.wide { width: 100% !important; height: 100% !important; }
}

/* ── Account 360: sticky actions on a phone (DS-06) ───────────────────────── */
.a360-bar { display: none; }
@media (max-width: 700px) {
  .a360-bar {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; z-index: 59;
    bottom: calc(var(--bottom-nav-h, 60px) + env(safe-area-inset-bottom, 0px));
    padding: 10px 12px; background: var(--bg-surface); border-top: 1px solid var(--border-subtle);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .06);
  }
  /* Four buttons in 366px: the call's long label ("Call for the reorder") pushed WhatsApp off
     the right edge as "Whats…" (phone audit 2026-10-22). The reason box right above says what
     the call is for, so the bar's call button only says Call. */
  .a360-bar { gap: 6px; padding: 10px 10px; }
  .a360-bar .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; padding-inline: 10px; min-width: 0; }
  .a360-bar .a360-bar-call { flex: 1.4 1 auto; }
  /* Header on a phone: the More menu sits in the card's corner instead of a row of its own,
     the three facts share one row, and the reason box keeps its secondary link on the same
     line. Before, the tabs (Call brief / History / Offers) started at 706px, under the bar,
     so a rep never saw that History and Offers exist. */
  .a360-top { position: relative; }
  .a360-top .a360-name { padding-right: 48px; }
  .a360-top .ws-btns { position: absolute; top: var(--sp-3); right: var(--sp-3); width: auto !important; margin: 0 !important; justify-content: flex-end; }
  .a360-top .a360-menu > summary { min-height: 40px; min-width: 40px; padding: 0 10px; justify-content: center; }
  .a360-top .a360-menu > summary .a360-menu-lbl { display: none; }
  .a360-top .a360-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .a360-top .a360-facts dd { font-size: 16px; line-height: 22px; }
  .a360-top .a360-facts dd.a360-fsub { font-size: 12px; line-height: 16px; }
  .a360-now { padding: var(--sp-3); margin-top: var(--sp-3); }
  .a360-now p { font-size: 14px; line-height: 20px; }
  .a360-now p .btn.ghost.sm { min-height: 32px !important; padding: 0 4px; }
  /* The header's own button row and the reason's call button repeat the bar on a phone. */
  .a360-top .ws-btns .ws-dup, .a360-now > .btn.pri, .a360-now > a.btn.pri { display: none !important; }
  body:has(.a360-bar) .content { padding-bottom: calc(var(--bottom-nav-h, 60px) + 96px) !important; }
  /* Dialogs (Find items above all) were a 350px box with the page showing at both edges and their
     tabs cut ("Bought to…"). On a phone a dialog takes the whole screen. */
  .overlay.open { padding: 0; align-items: stretch; }
  .overlay .modal, .overlay .modal.wide {
    width: 100%; max-width: none; min-height: 100%; max-height: none; margin: 0; border-radius: 0;
  }

  /* Four tabs in a 390px dialog cut the last one to "Bought togethe…": two rows of two instead. */
  .overlay .modal .ws-tabs { flex-wrap: wrap; overflow: visible; max-width: none !important; }
  .overlay .modal .ws-tabs button { flex: 1 1 40%; }
  /* "Copy" and the rating ran together as "CopyUseful?" under every Copilot answer. */
  .cp-copy { margin-right: 14px; }
}
/* The entry animation leaves an identity transform on .content, which would pin the fixed
   bar to the content box instead of the screen (same cause as the filter sheet). */
.content:has(.a360-bar) { transform: none !important; animation: none !important; }

/* ── Motion (DS-09): a press is felt, a tab change is seen, nothing else moves ── */
.btn, .fchip, .kr.click, .kpi.click, .arow, .tab, .subtab, .cp-chip, .tbl-sheet-btn {
  transition: transform 90ms var(--ease-standard), background-color var(--dur-1) var(--ease-standard),
    border-color var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.btn:active:not(:disabled), .fchip:active, .kr.click:active, .kpi.click:active,
.tab:active, .subtab:active, .cp-chip:active, .tbl-sheet-btn:active { transform: scale(.97); }
.arow:active { transform: scale(.995); }
@keyframes tab-ind { from { transform: scaleX(.3); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.tab.active::after { animation: tab-ind var(--dur-2) var(--ease-emphasized); transform-origin: center; }
.toast .toast-undo { margin-left: 10px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit; font: inherit; font-weight: var(--fw-bold); cursor: pointer; }
.toast.show { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .btn:active, .fchip:active, .kr.click:active, .kpi.click:active, .arow:active,
  .tab:active, .subtab:active, .cp-chip:active, .tbl-sheet-btn:active { transform: none; }
}

/* ── Touch targets on a phone (DS-10): 44px for anything a thumb presses ───── */
@media (max-width: 700px) {
  .btn, .btn.sm, .fchip, .subtab, .ws-tabs button, .qsort button, .xtog,
  .tbl-tools input, .tbl-tools select, .tbl-tools .fbtn, .colpick > summary,
  .pager button, .today-pager .btn, .cp-chip, .admin-item, .user-logout,
  .x, .drawer .x, .modal .x, .modal-h .x, .icon-btn { min-height: 44px; }
  .x, .drawer .x, .modal .x, .modal-h .x, .user-logout, .icon-btn { min-width: 44px; }
  .pager button { min-width: 40px; }
  /* The small "i" stays small to the eye; its press area grows. */
  .info { position: relative; }
  .info::after { content: ''; position: absolute; inset: -8px; }
  /* Same for a link inside a sentence ("see Gone quiet on Today", an account name in a note):
     a 20px line of text stays a line of text, its press area is 44px tall. Vertical only, so
     two links side by side on one line never steal each other's taps. */
  .linkbtn, .linkish { position: relative; }
  .linkbtn::after, .linkish::after { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
  /* The play card's Copy and Useful / Not useful: small to the eye, 44px to the thumb. */
  .cp-copy, .ai-rate-b { position: relative; }
  .cp-copy::after, .ai-rate-b::after { content: ''; position: absolute; left: -8px; right: -8px; top: -13px; bottom: -13px; }
  label:has(> input[type="checkbox"]) { min-height: 44px; }
  /* A checkbox in a sentence-long label: the label is the press area; the box itself grows to match. */
  label > input[type="checkbox"] { min-width: 24px; min-height: 24px; }
  /* Rows of bars and legend entries that open a list are buttons in all but name. */
  .hbar, .legend > span, .funnel-row { min-height: 44px; align-items: center; }
  .fold > summary { min-height: 52px; }
  .a360-now .btn.ghost.sm, .ws-why .btn.ghost.sm { min-height: 40px; }
}
@media (max-width: 700px) {
  .tbl-tools .search { min-height: 44px; }
  .tbl-tools .search input { min-height: 42px; font-size: 16px; }   /* 16px: iOS does not zoom the page on focus */
  .afilt .x { position: relative; display: inline-flex; min-width: 28px; min-height: 28px; align-items: center; justify-content: center; }
  .afilt .x::after { content: ''; position: absolute; inset: -8px; }
  .prose-toggle { min-height: 44px; }
  table td.cell, table td.seg { height: 44px; }
  .ws-quick-actions > *, .link-action { min-height: 44px; display: inline-flex; align-items: center; }
  .ws-details > summary { min-height: 44px; display: flex; align-items: center; }
}

/* Views write grid-template-columns inline ("1.15fr 1fr", "1fr 1fr"); on a phone two
   tables side by side came out 160px each (Coverage, 2026-10-21). One column there. */
@media (max-width: 700px) {
  .grid.g-2, .grid.g-3 { grid-template-columns: 1fr !important; }
  .grid.g-2 > *, .grid.g-3 > * { grid-column: auto !important; }
}
@media (max-width: 700px) {
  .cov-gauge { padding: 16px 12px !important; }
  .cov-gauge > div:nth-child(2) { width: 220px !important; height: 110px !important; margin-bottom: 8px !important; }
  .cov-gauge > div:first-child { margin-bottom: 12px !important; }
  .cov-gauge > div:last-child { margin-top: 12px !important; gap: 10px 18px !important; justify-content: center; }
}

/* Ready to send (views/agent.js) */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.linkish:hover { text-decoration: underline; }
.pl-count { margin: 0 0 var(--sp-3); color: var(--muted); }
.pl-card { padding: var(--sp-4); }
.pl-card.pl-done { opacity: .72; }
.pl-top { display: flex; gap: var(--sp-3); align-items: flex-start; }
.pl-n { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); font-weight: 700; font-size: 13px; }
.pl-who { flex: 1; min-width: 0; }
.pl-name { font-weight: 700; font-size: 16px; }
.pl-why { margin-top: 2px; color: var(--muted); font-size: 13px; }
.pl-kind { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink); }
.pl-kind.quote { background: var(--attention-bg, var(--surface)); color: var(--attention-fg); }
.pl-kind.quote_cold { background: var(--attention-bg, var(--surface)); color: var(--attention-fg); }
.pl-kind.follow_up { background: var(--info-bg, var(--surface)); color: var(--info-fg, var(--text)); }
.pl-kind.winback { background: var(--critical-bg, var(--surface)); color: var(--critical-fg); }
.pl-kind.back_in_stock { background: var(--positive-bg, var(--surface)); color: var(--positive-fg, var(--ink)); }
.pl-usual { white-space: nowrap; font-size: 13px; color: var(--muted); }
.pl-usual b { color: var(--ink); }
.pl-offer { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0 var(--sp-2); font-size: 13px; }
.pl-offer th { text-align: left; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); padding: 4px 6px; }
.pl-offer td { border-bottom: 1px solid var(--line); padding: 6px; vertical-align: top; }
.pl-offer .num { text-align: right; white-space: nowrap; }
.pl-offer .sm { font-size: 12px; }
.pl-out td:first-child { text-decoration: line-through; color: var(--muted); }
.pl-stock { font-size: 12px; font-weight: 600; }
.pl-stock.ok { color: var(--positive-fg); }
.pl-stock.low, .pl-stock.unk { color: var(--attention-fg); }
.pl-stock.out { color: var(--critical-fg); }
.pl-xs { font-size: 13px; margin: 0 0 var(--sp-2); }
.pl-opener { background: var(--surface); border-radius: var(--r-sm, 8px); padding: var(--sp-3); margin: var(--sp-2) 0; }
.pl-opener p { margin: 4px 0 0; }
.pl-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
.pl-mail-t { background: none; border: 0; padding: 6px 0; font: inherit; cursor: pointer; display: flex; gap: 6px; align-items: center; text-align: left; flex-wrap: wrap; }
.pl-mail-b label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: var(--sp-2); }
.pl-mail-b input, .pl-mail-b textarea { display: block; width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: var(--r-xs, 6px); padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--panel); box-sizing: border-box; }
.pl-acts { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.pl-state { margin-top: var(--sp-2); display: flex; gap: 8px; align-items: center; color: var(--positive-fg); font-weight: 600; }
.pl-loading { display: flex; gap: 10px; align-items: center; padding: var(--sp-4); }
.pl-pick { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.pl-pick select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-xs, 6px); }
.insight.warn { color: var(--attention-fg); }
@media (max-width: 640px) {
  .pl-top { flex-wrap: wrap; }
  .pl-usual { width: 100%; padding-left: 38px; }
  .pl-offer th:nth-child(3), .pl-offer td:nth-child(3) { display: none; }
  .pl-acts .btn { flex: 1 1 45%; }
}

/* Copilot visuals (layout.js copilotVisuals) */
.global-ask-window.cp.wide { width: min(780px, calc(100vw - 48px)); height: min(860px, calc(100vh - 90px)); }
.cv-wrap { display: grid; gap: 10px; margin-bottom: 10px; }
.cv { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm, 8px); padding: 10px 12px; }
.cv-t { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.cv-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.cv-row { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.cv-row.strong { font-weight: 700; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 3px; }
.cv-l { overflow: hidden; text-overflow: ellipsis; }
.cv-track { position: relative; height: 12px; background: var(--surface); border-radius: 6px; overflow: hidden; }
.cv-track.div::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.cv-bar { display: block; height: 100%; border-radius: 6px; background: var(--brand); }
.cv-bar.neg { background: var(--critical-fg); }
.cv-bar.band-at_risk { background: var(--critical-fg); } .cv-bar.band-need_attention { background: var(--attention-fg); }
.cv-bar.band-strong, .cv-bar.band-healthy { background: var(--positive-fg); } .cv-bar.band-not_graded, .cv-bar.band-not\ graded { background: var(--faint); }
.cv-v { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 70px; }
.cv-scroll { overflow-x: auto; }
.cv-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cv-tbl th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 4px 6px; white-space: nowrap; }
.cv-tbl td { border-bottom: 1px solid var(--line); padding: 5px 6px; vertical-align: top; }
.cv-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cv-dl { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.cv-call { display: block; width: 100%; text-align: left; background: var(--surface); border: 0; border-radius: 6px; padding: 5px 6px; margin-bottom: 4px; font: inherit; font-size: 11.5px; cursor: pointer; }
.cv-call b { display: block; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-call span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 11px; }
.cv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.cv-facts dt { font-size: 11.5px; color: var(--muted); } .cv-facts dd { margin: 0; font-weight: 700; font-size: 14px; }
.cv-prog { height: 14px; background: var(--surface); border-radius: 7px; overflow: hidden; } .cv-prog span { display: block; height: 100%; background: var(--brand); }
@media (max-width: 640px) { .cv-week { grid-template-columns: 1fr; } .cv-row { grid-template-columns: 1fr auto; } .cv-track { grid-column: 1 / -1; grid-row: 2; } }

/* Autopilot (views/autopilot.js) */
.ap-hello h2 { font-size: 22px; margin: 0 0 4px; }
.ap-hello p { color: var(--muted); margin: 0 0 var(--sp-4); }
.ap-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--sp-4); align-items: start; }
.ap-grid > * { min-width: 0; }
.ap-grid .card { margin: 0; padding: var(--sp-4); }
/* Right column under the results card (Autopilot, 2026-10-27): stacked, same gap as the grid. */
.ap-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
/* The side column takes the row height the plan column sets (contain:size keeps it from setting
   one itself), and the checklist scrolls inside its card -- otherwise one column always ends
   hundreds of pixels before the other. Phone (single column, below) lets it grow again. */
.ap-side { align-self: stretch; contain: size; }
.ap-side > #goLive { flex: 1; min-height: 0; overflow: auto; }
.ap-full { grid-column: 1 / -1; }
.ap-h { font-size: 15px; margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-h .ap-all { margin-left: auto; }
.gl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gl-row { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.gl-row .muted { font-size: 13px; }
.gl-act { font-size: 13px; margin-top: 2px; color: var(--text-primary); }
.gl-ok, .gl-no, .gl-unk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.gl-ok { background: var(--positive-bg); color: var(--positive-fg); }
.gl-no { background: var(--critical-bg, var(--surface)); color: var(--critical-fg, var(--text-primary)); }
.gl-unk { background: var(--attention-bg, var(--surface)); color: var(--attention-fg, var(--text-primary)); }
.ap-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); }
.ap-goal-row { display: flex; gap: var(--sp-5); align-items: center; }
.ap-ring { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ap-ring > div { width: 98px; height: 98px; border-radius: 50%; background: var(--panel, #fff); display: grid; place-content: center; text-align: center; }
.ap-ring b { font-size: 24px; display: block; }
.ap-ring small { color: var(--muted); font-size: 11px; }
.ap-ring-off { background: var(--line); }
.ap-kv, .ap-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; }
.ap-kv > div, .ap-res > div { background: var(--surface); border-radius: var(--r-sm, 8px); padding: 10px; min-width: 0; }
.ap-kv small, .ap-res small { color: var(--muted); font-size: 12px; display: block; }
.ap-kv b { font-size: 18px; }
.ap-res b { font-size: 20px; }
.ap-crit { color: var(--critical-fg); }
.ap-pos { color: var(--positive-fg); }
.ap-plan { margin-top: var(--sp-4); font-size: 13px; }
.ap-stack { display: flex; height: 20px; border-radius: 8px; overflow: hidden; margin: 6px 0 8px; background: var(--surface); }
.ap-stack span { display: block; }
.ap-leg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; font-size: 12.5px; }
.ap-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ap-close { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ap-close li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.ap-close .linkish { min-height: 44px; text-align: left; }
.ap-i-x { background: var(--line); }
.ap-note { font-size: 12px; color: var(--muted); margin: var(--sp-2) 0 0; }
.ap-say { background: var(--accent-bg); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; margin-top: var(--sp-3); font-size: 13px; line-height: 1.5; }
.ap-feed { list-style: none; margin: 0; padding: 0; }
.ap-feed li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.ap-feed li:last-child { border-bottom: 0; }
.ap-tag { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin-right: 6px; background: var(--surface); }
.ap-tag-plan { background: var(--accent-bg); color: var(--accent); }
.ap-tag-act { background: var(--attention-bg, var(--surface)); color: var(--attention-fg); }
.ap-tag-warn { background: var(--critical-bg, var(--surface)); color: var(--critical-fg); }
.ap-soon { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line); font-size: 12.5px; }
.ap-soon p { margin: 4px 0 0; }
.ap-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
.ap-yes { display: grid; gap: 10px; margin-bottom: var(--sp-2); }
.ap-y { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.ap-y-h { display: flex; justify-content: space-between; gap: 10px; }
.ap-v { font-weight: 700; color: var(--accent); white-space: nowrap; }
.ap-y p { margin: 6px 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ap-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-bars { margin-top: var(--sp-3); }
.ap-r { display: grid; grid-template-columns: 150px 1fr 54px; gap: 8px; align-items: center; font-size: 12.5px; padding: 3px 0; }
.ap-r b { text-align: right; }
.ap-tr, .ap-mini { height: 10px; background: var(--surface); border-radius: 5px; overflow: hidden; }
.ap-tr > span, .ap-mini > span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.ap-mini { display: inline-block; width: 90px; height: 8px; vertical-align: middle; margin-right: 6px; }
.ap-learn { margin-top: var(--sp-3); font-size: 12.5px; background: var(--attention-bg, var(--surface)); border-radius: 8px; padding: 10px 12px; line-height: 1.5; }
.ap-scroll { overflow-x: auto; }
.ap-team { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ap-team th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); padding: 6px; white-space: nowrap; }
.ap-team td { border-bottom: 1px solid var(--line); padding: 7px 6px; }
.ap-team .num { text-align: right; white-space: nowrap; }
.ap-t-crit { color: var(--critical-fg); }
.ap-t-att { color: var(--attention-fg); }
.ap-t-pos { color: var(--positive-fg); }
.ap-t-muted { color: var(--muted); }
@media (max-width: 900px) {
  .ap-grid { grid-template-columns: 1fr; }
  .ap-side { contain: none; }
  .ap-side > #goLive { overflow: visible; }
}
@media (max-width: 640px) {
  .ap-hello h2 { font-size: 18px; }
  .ap-goal-row { flex-direction: column; align-items: stretch; }
  /* Phone (owner, 2026-10-22: "terlalu padat"): a smaller ring, the four figures two to a
     row, and only the figure under each label -- the formula lines ("Last October $519,701
     × trend 0.99", the forecast range) stay on the laptop and in the tooltip. */
  .ap-ring { margin: 0 auto; width: 96px; height: 96px; }
  .ap-ring > div { width: 74px; height: 74px; }
  .ap-ring b { font-size: 20px; }
  .ap-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ap-kv > div { padding: 8px 10px; }
  .ap-kv > div > small + b + small, .ap-kv > div > b + small { display: none; }
  .ap-kv b { font-size: 15px; }
  .ap-leg { grid-template-columns: 1fr; }
  .ap-r { grid-template-columns: 110px 1fr 44px; }
}

/* After-call agent, inside the quick-log drawer (views/today.js qlogAgent) */
.qlog-ai .btn { margin-top: var(--sp-2); }
.qlog-ai-out { margin-top: var(--sp-3); font-size: 13px; background: var(--accent-bg); border-radius: 8px; padding: 10px 12px; }
.qlog-ai-out p { margin: 0 0 6px; }
.qlog-ai-out .sm { font-size: 12px; }
.qlog-mail { margin-top: var(--sp-2); display: grid; gap: 6px; }
.qlog-mail input, .qlog-mail textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 13px; background: var(--panel, #fff); color: var(--ink); }

/* 👍/👎 on AI output (layout.js aiRateButtons) */
.ai-rate { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; }
.ai-rate-b { border: 1px solid var(--line); background: var(--panel, #fff); border-radius: 999px; padding: 1px 8px; cursor: pointer; font-size: 13px; line-height: 1.5; filter: grayscale(1); opacity: .7; }
.ai-rate-b:hover { opacity: 1; filter: none; }
.ai-rate-b.on { filter: none; opacity: 1; border-color: var(--accent); background: var(--accent-bg); }
.pl-acts .ai-rate { margin-left: auto; }
.qlog-ai-out .ai-rate { margin-top: 6px; }

/* Table footer on a phone: "Showing 1-5 of 60" plus eight page buttons is ~420px in one row,
   and the card cut the last pages off (phone pass, FR-24). Let it wrap. */
@media (max-width: 700px) {
  .tbl-foot { flex-wrap: wrap; gap: 8px; }
  .pager { margin-left: 0; flex-wrap: wrap; }
}

/* ── Account 360 History on a phone (phone audit 2026-10-22) ──────────────────
   "What they buy" had five columns and the quotes table five more, both wider than the
   screen. On a phone the item code and the all-orders unit count step aside (the name, the
   usual order and the spend answer the call); the quote's document number does too. */
@media (max-width: 700px) {
  .a360-wtb th:nth-child(2), .a360-wtb td:nth-child(2),
  .a360-wtb th:nth-child(3), .a360-wtb td:nth-child(3),
  .a360-docs th:nth-child(2), .a360-docs td:nth-child(2) { display: none; }
  .a360-wtb td:first-child { max-width: none !important; }
}
@media (max-width: 700px) {
  /* "Usual per order" / "Spend, all orders" kept the table 117px wider than its card. */
  table.dt.a360-wtb th { white-space: normal; }
  table.dt.a360-wtb th, table.dt.a360-wtb td { padding: var(--sp-2); }
  table.dt.a360-wtb td:first-child { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Phone: say less above the list (owner, 2026-10-22: "di hp informasinya sangat padat …
   harus dapet informasi segera") ─────────────────────────────────────────────────────────
   The "N accounts hidden by the age filter" note repeats the removable chip right under it. */
@media (max-width: 700px) {
  .age-note { display: none; }
}
@media (max-width: 700px) {
  /* Go-live checklist on a phone: the lines still to do; "4 of 8 done" in the heading
     already counts the rest (911px before). */
  .gl-row.done { display: none; }
  #goLive > p.muted { display: none; }
}
/* Ready to send on a phone: the folded offer (views/agent.js playCard). */
.pl-more { margin-top: var(--sp-2); }
.pl-more > summary { cursor: pointer; font-size: 13px; font-weight: var(--fw-semibold); color: var(--accent); min-height: 40px; display: flex; align-items: center; list-style: none; }
.pl-more > summary::-webkit-details-marker { display: none; }
.pl-more > summary::after { content: ' \25BE'; margin-left: 4px; }
.pl-more[open] > summary::after { content: ' \25B4'; }
/* Phone folds for secondary cards (ui.js, data-phone-fold). */
@media (max-width: 700px) {
  .pf > .card-h { cursor: pointer; }
  .pf > .card-h::after { content: 'Hide \25B4'; margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; padding-left: 8px; }
  .pf.pf-closed > .card-h::after { content: 'Show \25BE'; }
  .pf.pf-closed > :not(.card-h) { display: none !important; }
  .pf.pf-closed > .card-h .sub { display: none; }
}
/* A fold's caption is one line on a phone: three folds with two-line captions filled the
   first screen of Leads before a single lead (owner, 2026-10-22). */
@media (max-width: 700px) {
  .fold > summary .fold-m { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
}
@media (max-width: 700px) {
  /* "Email ready: <subject> · Read and edit" repeated the Read the email button under it. */
  .pl-mail:not(.open) .pl-mail-t { display: none; }
}

/* ── Phone layout pass 2 (owner, 2026-10-22: "semua peletakan di hp masih berantakan") ──
   Measured density in pass 1 and missed what the owner saw: labels and captions squeezed
   into narrow columns beside their headings, and table cards that paired facts two to a
   row at random widths. These are component rules, so every screen gets them. */
@media (max-width: 700px) {
  /* A heading's caption goes UNDER the heading at full width, instead of a 90px column
     beside it ("Revenue trend · this / year vs / prior / year"). Controls stay on the
     heading's line. */
  .an-h { flex-wrap: wrap; row-gap: 2px; align-items: center; }
  .an-h > .sub-note, .an-h > span[style*="text-transform:none"] { order: 9; flex: 1 0 100%; margin-left: 0 !important; white-space: normal; }
  .an-h > .ln { display: none; }
  .an-h > button, .an-h > select, .an-h > #revYearPickerSlot { margin-left: auto; }
  .ws .qcard > .body[style*="padding:24px"] { padding: 16px !important; }
  .chart-kpis { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }

  /* Table cards: one fact per line, label left and value right, the way a phone settings
     list reads -- not two facts to a line at whatever width each happened to need. */
  table.dt[data-cards="true"] tbody tr:not(.xrow) { grid-template-columns: minmax(0, 1fr); }
  table.dt[data-cards="true"] td:not(:first-child):not([data-cell-kind="action"]):not([data-cell-kind="wide"]) {
    display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 4px 8px; text-align: right; min-height: 28px;
    justify-self: stretch !important; width: 100% !important; box-sizing: border-box;
  }
  table.dt[data-cards="true"] td:not(:first-child):not([data-cell-kind="action"]):not([data-cell-kind="wide"])::before {
    display: inline; flex-shrink: 0; text-align: left; text-transform: none; letter-spacing: 0;
    font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-right: auto;
  }
  table.dt[data-cards="true"] td:not(:first-child):not([data-cell-kind="action"]):not([data-cell-kind="wide"]) > * { min-width: 0; }
  /* Actions sit bottom-right, the card footer convention; several share the row from the right. */
  table.dt[data-cards="true"] td[data-cell-kind="action"] > div { justify-content: flex-end !important; flex-wrap: wrap; }
  table.dt[data-cards="true"] td[data-cell-kind="action"] { text-align: right; }

  /* An invoice row: date and number on the line, the line count under it. */
  #orderHistBox summary > span:first-child > span[style*="font-weight:400"] { display: block; }
}
@media (max-width: 700px) {
  /* Recorded follow-ups on a phone: the button stays on the heading's line, and the table
     card inside this card loses its own frame -- a card inside a card read as clutter. */
  .today-commitments .card-h { flex-wrap: nowrap; align-items: center; }
  .today-commitments .card-h .btn { min-height: 36px; padding: 0 10px; font-size: 13px; margin-left: auto; white-space: nowrap; }
  #tblcard_todayCommitmentsTbl { border: 0 !important; padding: 0 !important; background: none !important; }
}
@media (max-width: 700px) {
  #tblcard_todayCommitmentsTbl { box-shadow: none !important; margin-bottom: 0 !important; }
  /* A sentence column: its label on its own line, then the sentence ("Best time to offer"
     ran straight into "pitch on the next call"). */
  table.dt[data-cards="true"] td[data-cell-kind="wide"]::before { display: block; margin-bottom: 2px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
  /* Autopilot's likely orders: the name on the line, the odds and usual order under it. */
  .ap-close li { display: block; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); }
  .ap-close li .linkish { min-height: 32px; display: block; font-weight: 600; }
  .ap-close li .muted { display: block; font-size: 12px; }
}

/* ── Today on a phone: the prototype's card (views/today.js todayCard) ───────────────── */
.tcard { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; cursor: pointer; box-shadow: var(--e-1); }
.tcard.worked { opacity: .6; }
.tc-top { display: flex; align-items: center; gap: 10px; }
.tc-rk { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-canvas); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; }
.tc-name { font-size: 16px; font-weight: 700; line-height: 21px; flex: 1; min-width: 0; color: var(--text-primary); }
.tc-top .sbadge { flex: none; }
.tc-why { margin: 8px 0 10px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.tc-facts { display: flex; gap: 28px; margin-bottom: 12px; }
.tc-facts span { display: block; font-size: 12px; color: var(--text-muted); }
.tc-facts b { font-size: 17px; line-height: 22px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tc-act { display: flex; gap: 10px; }
.tc-act .btn { min-height: 44px; justify-content: center; }
.tc-act .tc-call { flex: 1; }
/* Laptop: the same card as one row -- rank | name + tag over the sentence | two facts |
   Call and Log (prototype's laptop layout). Same content, same order of reading. */
@media (min-width: 701px) {
  .arows .tcard { display: grid; grid-template-columns: 30px minmax(0, 1fr) 220px auto; grid-template-areas: "rk top facts act" "rk why facts act"; align-items: center; column-gap: 16px; row-gap: 2px; padding: 12px 16px; margin-bottom: 8px; }
  .arows .tcard .tc-top { grid-area: top; }
  .arows .tcard .tc-top .tc-rk { display: none; }
  .arows .tcard::before { content: attr(data-rank); }
  .arows .tcard .tc-why { grid-area: why; margin: 0; }
  .arows .tcard .tc-facts { grid-area: facts; margin: 0; gap: 24px; }
  .arows .tcard .tc-act { grid-area: act; }
  .arows .tcard .tc-act .tc-call { flex: none; min-width: 96px; }
  .arows .tcard .tc-name { flex: 0 1 auto; }
}
.tc-rk-l { display: none; }
@media (min-width: 701px) {
  .arows .tcard::before { content: none; }
  .arows .tcard .tc-rk-l { display: grid; grid-area: rk; }
}

/* ── Account 360, phone and laptop (design rules 2026-10-22) ─────────────────────────
   Name and its one tag on one line; the opener is read, not shouted -- the black block
   competed with the Call button for the eye (one accent per screen). */
.a360-id { flex-direction: row !important; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.a360-id > :not(.a360-name):not(.ws-pills) { flex-basis: 100%; }
.a360-id .ws-pills { margin: 0; }
.a360-col .dr-say, .a360-col .dr-say.say { background: var(--accent-bg) !important; color: var(--text-primary) !important; border-left: 3px solid var(--accent); border-radius: 10px; font-size: 15px; line-height: 22px; }
@media (max-width: 700px) {
  /* The three folds under the brief read as one list: same inset, tighter rhythm. */
  .a360-col { gap: 12px !important; }
  .a360-fold > summary { padding: 14px 16px !important; min-height: 52px; }
  .a360-fold > summary > span:first-child { font-size: 16px; }
  .ws-quick-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; }
}

/* ── Ready to send: the offer as an order summary (views/agent.js offerTable) ─────────── */
.pl-sum { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; margin: 10px 0; background: var(--bg-surface); }
.pl-li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); }
.pl-li-l, .pl-li-r { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-li-r { align-items: flex-end; text-align: right; flex: none; }
.pl-li-l b { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pl-li .muted { font-size: 12px; }
.pl-li-r b { font-size: 15px; font-variant-numeric: tabular-nums; }
.pl-li.pl-out { opacity: .55; }
.pl-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-canvas); font-size: 14px; }
.pl-total b { font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; }
.pl-more > summary { font-weight: 600; }
.pl-mail:not(.open) .pl-mail-t { display: none; }
.pl-opener { background: var(--accent-bg); border-left: 3px solid var(--accent); border-radius: 10px; }

/* ── Today rebuilt (2026-10-22): progress bar, stat line, "›" rows ─────────────────────── */
.dayprog { height: 6px; border-radius: 99px; background: var(--border-subtle); overflow: hidden; margin: 4px 0 14px; }
.dayprog > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .3s ease; }
.statline { display: flex; gap: 10px; margin: 0 0 14px; }
.statline .sl { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px 12px; font: inherit; color: inherit; cursor: pointer; }
.statline .sl-l { font-size: 12px; color: var(--text-secondary); }
.statline .sl-v { font-size: 20px; line-height: 26px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.statline .sl-m { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.statline .sl-m.down { color: var(--critical-fg); } .statline .sl-m.up { color: var(--positive-fg); }
.navrows { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; margin: 16px 0; }
.navrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--border-subtle); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.navrow:last-child { border-bottom: 0; }
.navrow:hover { background: var(--bg-canvas); }
.nr-t { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.nr-m { margin-left: auto; font-size: 13px; color: var(--text-muted); text-align: right; }
.nr-chev { font-size: 20px; color: var(--text-muted); line-height: 1; }
/* A worked call is one line -- name, tag, Undo -- like a ticked item in any to-do list. */
.tcard.worked { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.tcard.worked .tc-top { flex: 1; min-width: 0; }
.tcard.worked .tc-why, .tcard.worked .tc-facts, .tcard.worked .tc-rk-l { display: none !important; }
.tcard.worked .tc-name { text-decoration: line-through; text-decoration-color: var(--text-muted); font-weight: 600; }
.tcard.worked .tc-act .btn { min-height: 36px; padding: 0 12px; flex: none; }
.arows .tcard.worked { display: flex; }
@media (min-width: 701px) { .statline .sl { flex: 0 1 260px; } }

/* ── Today follow-ups, rebuilt (views/today.js todayFollowupList) ─────────────────────── */
.fu-sec { margin: 24px 0 8px; }
.sec-t { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--text-primary); }
.fu-count { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.fu-list { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.fu-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.fu-row:last-child { border-bottom: 0; }
.fu-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fu-l b { font-size: 15px; color: var(--text-primary); }
.fu-l span { font-size: 13px; color: var(--text-secondary); }
.fu-l .fu-late { color: var(--critical-fg); }
.fu-r { display: flex; align-items: center; gap: 12px; flex: none; }
.fu-r .btn { min-height: 38px; padding: 0 16px; }
.fu-sec .navrows { margin-top: 10px; }
#todayPendingRecords:not(:empty) { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* ── Copilot tables: a real table on a laptop, one card per row on a phone ─────────────── */
.cv-tbl td, .cv-tbl th { padding: 8px 10px; }
.cm-tbl { margin: 8px 0; }
@media (max-width: 700px) {
  .cv-scroll { overflow: visible !important; }
  .cv-tbl thead { display: none; }
  .cv-tbl, .cv-tbl tbody { display: block; width: 100%; }
  .cv-tbl tr { display: block; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 8px 12px; margin: 0 0 8px; }
  .cv-tbl td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0 !important; padding: 3px 0 !important; text-align: right; }
  .cv-tbl td::before { content: attr(data-l); color: var(--text-secondary); font-size: 12px; text-align: left; flex: none; }
  .cv-tbl td:first-child { font-weight: 700; font-size: 15px; justify-content: flex-start; text-align: left; padding-bottom: 6px !important; border-bottom: 1px solid var(--border-subtle) !important; margin-bottom: 4px; }
  .cv-tbl td:first-child::before { content: none; }
}
/* Section heading with its "See all ›" on the right (the app-wide pattern for "more of this"). */
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.see-all { background: none; border: 0; padding: 8px 0 8px 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap; }

/* ── Buttons on a phone sit on the right (owner, 2026-10-22: "button ... masih di kiri") ──
   Found by an audit of every screen for a lone button at a card's left edge with empty space
   to its right: Offers' Write pitch, Performance's Review account(s), Coverage's Review
   history, Autopilot's Not now. */
@media (max-width: 700px) {
  table.dt[data-cards="true"] td.al-left:not(:first-child) { justify-content: flex-end !important; text-align: right !important; }
  table.dt[data-cards="true"] td.al-left:not(:first-child) > div, table.dt[data-cards="true"] td.al-left:not(:first-child) > span { justify-content: flex-end !important; text-align: right !important; }
  table.dt[data-cards="true"] td[data-cell-kind="wide"] .btn { display: flex; width: fit-content; margin-left: auto; margin-top: 8px; }
  .ap-btns { justify-content: flex-end; }
}
/* The primary action of a sheet or form is the rightmost button (the platform convention);
   the drawer's first button is its primary, so the row runs right to left. */
.dr-acts { display: flex; flex-direction: row-reverse; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.sec-more { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ── Account 360 Call brief, rebuilt: sections with a heading, then "›" rows ─────────── */
.sec.card { padding: 16px; }
.sec .sec-t { font-size: 16px; margin: 0 0 10px; }
.sec .dr-say { margin: 0 0 10px; }
.a360-col .navrows { margin: 0; }
/* Inside the Call brief every section heading reads the same: "Due for reorder" was a small
   grey label beside a bold "What to say". */
.a360-col .section-label { font-size: 16px; font-weight: 700; color: var(--text-primary); text-transform: none; letter-spacing: 0; margin-bottom: 10px; }
.a360-col .section-label .sub-note { font-weight: 500; }
.intent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.intent-list li { padding: 10px 12px; background: var(--bg-canvas); border-radius: 10px; font-size: 14px; line-height: 20px; color: var(--text-primary); }
/* dataTable phoneCard rows (state.js bodyRows): the card is the row, no table chrome. */
@media (max-width: 700px) {
  table.dt tr.pc-tr { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; margin: 0 !important; grid-template-columns: none !important; }
  table.dt td.pc-td { display: block !important; padding: 0 !important; border: 0 !important; }
  table.dt td.pc-td::before { content: none !important; }
  .acard-ph { margin: 0 0 10px; }
  .acard-ph .tc-facts { align-items: flex-end; margin-bottom: 0; }
  .acard-ph .tc-chev { margin-left: auto; font-size: 22px; color: var(--text-muted); align-self: center; }
}
@media (max-width: 700px) {
  table.dt[data-cards="true"] tbody tr.pc-tr, table.dt tbody tr.pc-tr { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; }
  table.dt[data-cards="true"] tbody tr.pc-tr > td.pc-td, table.dt tbody tr.pc-tr > td.pc-td { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; font-size: inherit !important; font-weight: inherit !important; text-align: left !important; height: auto !important; overflow: visible !important; }
  table.dt tbody tr.pc-tr > td.pc-td::before { content: none !important; display: none !important; }
  table.dt tbody tr.pc-tr > td.pc-td .tcard { border: 1px solid var(--border-subtle); }
}
@media (max-width: 700px) { table.dt td.pc-td > .tcard { display: block !important; } }
@media (max-width: 700px) {
  .lead-ph .lead-acts > div { justify-content: flex-end !important; }
  .lead-ph .tc-facts { margin-bottom: 10px; }
}
/* Autopilot: the page subtitle already says what this screen is; the greeting's own sentence
   repeated it in other words (rebuild 2026-10-22). */
.ap-hello p { display: none; }
.ap-plan .sec-h { align-items: center; margin-bottom: 4px; }
.pl-up { color: var(--positive-fg); font-size: 16px; }
.ws .sec { margin: 0 0 18px; }

/* ── Planning screens on a phone (rebuild 2026-10-22), component-level ───────────────────
   The screen sentence is two lines (tap for the rest); the "What does this mean?" toggles
   for definitions are gone on a phone -- the (i) by the title explains the screen, and
   filter panels keep their own labelled toggle; three figure tiles are one row; the funnel's
   bars stay inside their card. */
@media (max-width: 700px) {
  .insight { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .insight.m-open { display: block; -webkit-line-clamp: unset; }
  .prose-toggle:not(.prose-ctrl) { display: none !important; }
  .grid.g-3:has(> .kpi) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .grid.g-3 > .kpi { padding: 10px !important; min-width: 0; }
  .grid.g-3 > .kpi .val { font-size: 18px !important; line-height: 24px !important; }
  .grid.g-3 > .kpi .lab { font-size: 11px !important; line-height: 14px; }
  .grid.g-3 > .kpi .meta, .grid.g-3 > .kpi .sub, .grid.g-3 > .kpi .filt { display: none !important; }
  .funnel-row { grid-template-columns: 96px minmax(0, 1fr) !important; }
  .funnel-row .fb, .funnel-row > div:last-child { max-width: 100%; min-width: 0; overflow: hidden; }
  .card-h .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (max-width: 700px) {
  .grid.g-3:has(> .kpi) { display: grid !important; }
  div:has(> .card .funnel-row) { display: block !important; width: 100% !important; }
  div:has(> .card .funnel-row) > .card { width: 100% !important; margin-bottom: 12px !important; }
  .funnel-row { display: flex !important; }
  .funnel-row .funnel-lab { flex: 0 0 96px; width: 96px !important; }
  .funnel-row .fb { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 104px); }
}
@media (max-width: 700px) {
  .grid.g-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .grid > *, .grid.g-2 > * { min-width: 0; }
  .funnel-row .fb { width: auto !important; }
  .funnel-row .fb > * { max-width: 100% !important; }
}

/* ── Auto phone cards for every dataTable (state.js bodyRows) ─────────────────────────── */
@media (max-width: 700px) {
  table.dt td.pc-td > .auto-ph { display: block !important; padding: 14px 16px; margin: 0 0 10px; }
  .auto-ph .ac-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
  .auto-ph .ac-title .acctcode, .auto-ph .ac-title .mono { font-weight: 400; font-size: 12px; color: var(--text-muted); }
  .auto-ph .ac-why { font-size: 13px; line-height: 19px; color: var(--text-secondary); margin: 0 0 8px; }
  .auto-ph .ac-l { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 1px; }
  .auto-ph .ac-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px 14px; margin: 4px 0 0; }
  .auto-ph .ac-v { font-size: 14px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
  .auto-ph .ac-v .acctcode, .auto-ph .ac-v div { font-weight: 400; font-size: 12px; }
  .auto-ph .ac-act { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .auto-ph .ac-act > div { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  /* Plain tables that are not dataTables scroll inside their own card instead of pushing the
     page sideways (Autopilot's team table, Funnel's About to expire). */
  table.ap-team, table.dt:not([data-cards]) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lens-fold > summary .card-h, .rem-fold > summary .card-h { flex-wrap: wrap; min-width: 0; }
  .lens-fold > summary, .rem-fold > summary { min-width: 0; max-width: 100%; }
  .lens-fold > summary .card-h > *, .rem-fold > summary .card-h > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  #content .card, #content .qcard, #content section { max-width: 100%; }
}
@media (max-width: 700px) {
  details.rem-fold > summary { display: block; }
  details.rem-fold > summary > .card-h { width: 100% !important; max-width: 100% !important; box-sizing: border-box; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  /* An inline minmax(450px, 1fr) grid cannot shrink below 450px on a 390px phone. */
  #content div[style*="minmax(450px"], #content div[style*="minmax(400px"], #content div[style*="minmax(380px"], #content div[style*="minmax(360px"] { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Segment buying patterns as bars (views/admin.js loadLeadSegmentInsights). */
.seg-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.seg-bar .sb-l { display: flex; flex-direction: column; min-width: 0; }
.seg-bar .sb-l b { font-size: 14px; } .seg-bar .sb-l .muted { font-size: 12px; }
/* Rows under "Who to prospect next" act (owner, 2026-10-27): they look it. */
.seg-bar.click, .pl-li.click { cursor: pointer; border-radius: 6px; }
.seg-bar.click:hover, .pl-li.click:hover { background: var(--accent-bg); }
.seg-bar .sb-t { height: 8px; background: var(--bg-canvas); border-radius: 99px; overflow: hidden; }
.seg-bar .sb-t span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.seg-bar .sb-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 700px) { .seg-bar { grid-template-columns: minmax(0, 1fr) auto; } .seg-bar .sb-t { grid-column: 1 / -1; order: 3; } }
/* Call script sheet (workspace.js a360Sheet 'script'). */
.cs-steps { display: grid; gap: 10px; }
.cs-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); cursor: pointer; }
.cs-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--bg-canvas); color: var(--text-primary); }
.cs-step.done .cs-n { background: var(--accent); color: #fff; font-size: 0; }
.cs-step.done .cs-n::after { content: '✓'; font-size: 14px; }
.cs-step.done .cs-b > b { text-decoration: line-through; color: var(--text-muted); }
.cs-b { min-width: 0; flex: 1; }
.cs-b > b { font-size: 15px; color: var(--text-primary); }
.cs-d { margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.cs-a { padding: 6px 0 0; font-size: 13px; }
.ai-wait { margin-top: 12px; }
.ai-wait > b { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
/* Today's drawer, rebuilt (views/today.js openTodayDrawer). */
.dr-why { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text-primary); margin: 8px 0 6px; }
.dr-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dr-3 span { display: block; font-size: 12px; color: var(--text-muted); }
.dr-3 b { font-size: 16px; color: var(--text-primary); }
.dr-more { margin: 4px 0 8px; }
.dr-more > summary { cursor: pointer; font-weight: 600; color: var(--accent); min-height: 40px; display: flex; align-items: center; }
.dr-links { display: flex; justify-content: flex-end; gap: 18px; padding: 6px 0 2px; }
.dr-links .linkbtn { font-size: 13px; color: var(--text-secondary); }

/* Table title bars: the title on one line, what the table is for underneath at full width.
   Side by side, the title squeezed into three lines next to a three-line explanation
   (owner, 2026-10-27: "Manager lens — offers waiting, per rep" messy; the same on every table). */
.card-h.tbl-h { flex-wrap: wrap; row-gap: 2px; }
.card-h.tbl-h h3 { white-space: nowrap; }
.card-h.tbl-h .sub.r { flex-basis: 100%; margin-left: 0; text-align: left; order: 3; }

/* Manager lens: the rep's name opens their profile, the rest of the row opens the detail
   of the figures (state.js dataTable, owner 2026-10-28). The name has to look like the link it is. */
.lens-rep{cursor:pointer;color:var(--brand)}
.lens-rep:hover,.lens-rep:focus-visible{text-decoration:underline}