/* ============================================================================
   components.css — styles for the helpers in js/ui.js, and nothing else.

   Type scale (FR-UX-05): page question 22/28, section 17/24, body 14/20, meta
   12/16, KPI figure 28. Colour carries meaning only: --risk = act now, --attn =
   watch, --positive = good, muted grey = neutral or not measured. No inline
   `style=` in a view that has moved onto these — that is how every screen ended
   up with its own spacing.
   ========================================================================= */

/* ── Page header: the question this screen answers ─────────────────────────── */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.ph-q { font-size: 22px; line-height: 28px; font-weight: var(--fw-bold); color: var(--text-primary); margin: 0; letter-spacing: var(--tracking-tight); }
.ph-sub { font-size: 14px; line-height: 20px; color: var(--text-secondary); margin: 2px 0 0; }
.ph-act { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* ── Insight: the one sentence a screen says about its numbers (DS-02) ─────── */
.insight { font-size: 14px; line-height: 20px; color: var(--text-body); margin: 0 0 var(--sp-4); max-width: 90ch; }
.insight .muted { font-size: 13px; }

/* ── KPI row: three numbers, one line ──────────────────────────────────────── */
.kpirow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.kpirow.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpirow.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kr { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: inherit;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--e-1); min-width: 0; }
.kr.click { cursor: pointer; transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard); }
.kr.click:hover { border-color: var(--accent-border); box-shadow: var(--e-2); }
.kr.click:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kr-lab { font-size: 12px; line-height: 16px; color: var(--text-secondary); font-weight: var(--fw-semibold); display: inline-flex; gap: 4px; align-items: center; }
.kr-val { font-size: 28px; line-height: 34px; font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kr-meta { font-size: 12px; line-height: 16px; color: var(--text-muted); }
.kr-meta.up { color: var(--positive-fg); }
.kr-meta.down { color: var(--critical-fg); }

/* ── Status badge ──────────────────────────────────────────────────────────── */
.sbadge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; line-height: 18px; font-weight: var(--fw-semibold); white-space: nowrap; border: 1px solid transparent; }
.sbadge.risk  { color: var(--critical-fg);  background: var(--critical-bg);  border-color: var(--critical-border); }
.sbadge.attn  { color: var(--attention-fg); background: var(--attention-bg); border-color: var(--attention-border); }
.sbadge.ok    { color: var(--positive-fg);  background: var(--positive-bg);  border-color: var(--positive-border); }
.sbadge.info  { color: var(--info-fg);      background: var(--info-bg);      border-color: var(--info-border); }
.sbadge.brand { color: var(--accent);       background: var(--accent-bg);    border-color: var(--accent-border); }
.sbadge.muted { color: var(--text-secondary); background: var(--n-100);      border-color: var(--n-150); }
button.sbadge { cursor: pointer; font-family: inherit; }

/* ── Empty / error state ───────────────────────────────────────────────────── */
.ui-empty { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.ui-empty b { display: block; color: var(--text-primary); font-size: 15px; margin-bottom: 4px; }
.ui-empty p { margin: 0 auto var(--sp-3); max-width: var(--measure); }
.ui-empty.err b { color: var(--critical-fg); }

/* ── Fold: closed-by-default section ───────────────────────────────────────── */
.fold { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); margin: 0 0 var(--sp-3); }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-height: var(--tap-min); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(-45deg); transition: transform var(--dur-1) var(--ease-standard); flex-shrink: 0; }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }
.fold-t { font-size: 17px; line-height: 24px; font-weight: var(--fw-bold); color: var(--text-primary); }
.fold-m { font-size: 12px; line-height: 16px; color: var(--text-muted); margin-left: auto; text-align: right; }
.fold-b { padding: 0 var(--sp-4) var(--sp-4); }

/* ── Filter chips ──────────────────────────────────────────────────────────── */
.chipbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--sp-3); }
.fchip { font: inherit; font-size: 13px; line-height: 18px; padding: 6px 12px; min-height: 36px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-body); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.fchip b { font-variant-numeric: tabular-nums; }
.fchip:hover { border-color: var(--accent-border); }
.fchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.fchip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chipbar-note { font-size: 12px; color: var(--text-muted); }

/* ── Account row: one account, one line, ≤ 76px (FR-S-TODAY-02) ────────────── */
.arows { display: flex; flex-direction: column; gap: 6px; }
.arow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-sm); padding: 10px var(--sp-3); min-height: 64px; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard), background var(--dur-1) var(--ease-standard); }
.arow:hover { border-color: var(--accent-border); }
.arow:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.arow.worked { background: var(--n-25); }
.arow.worked .ar-name { color: var(--text-secondary); }
.ar-rk { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-size: 13px; background: var(--n-100); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.arow.top .ar-rk { background: var(--accent); color: var(--accent-fg); }
.arow.worked .ar-rk { background: var(--positive-bg); color: var(--positive-fg); }
.ar-main { min-width: 0; }
.ar-l1 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ar-name { font-size: 15px; line-height: 20px; font-weight: var(--fw-bold); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-seg { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.ar-l2 { font-size: 13px; line-height: 18px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-val { text-align: right; white-space: nowrap; }
.ar-val b { display: block; font-size: 15px; line-height: 20px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ar-val span { font-size: 12px; color: var(--text-muted); }
.ar-act { display: flex; gap: 6px; }
.ar-act .btn { min-height: 36px; }

/* ── Drawer ────────────────────────────────────────────────────────────────── */
/* A closed drawer keeps its last content in the DOM, only faded and slid off-screen: Tab walked
   into its invisible buttons and screen readers read it. visibility removes it from both; it
   flips only after the fade, or the closing animation never plays. */
.drawer-ov { position: fixed; inset: 0; background: rgba(15, 21, 29, .32); z-index: 79; opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-standard), visibility 0s linear var(--dur-2); }
.drawer-ov.open { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--bg-surface); box-shadow: var(--e-3); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-3) var(--ease-emphasized); outline: none; }
.drawer-ov.open .drawer { transform: none; }
.drawer.wide { width: min(1120px, 100vw); }
.drawer-h { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border-subtle); }
.drawer-h h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: var(--fw-bold); flex: 1; min-width: 0; }
.drawer-h .x { background: none; border: 0; cursor: pointer; width: var(--tap-min); height: var(--tap-min); border-radius: var(--r-sm); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.drawer-h .x:hover { background: var(--n-100); }
.drawer-b { padding: var(--sp-4); overflow-y: auto; flex: 1; font-size: 14px; line-height: 20px; }
.dr-sec { margin: 0 0 var(--sp-5); }
.dr-sec > h4 { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); margin: 0 0 var(--sp-2); font-weight: var(--fw-bold); }
.dr-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-4); margin: 0; }
.dr-facts dt { color: var(--text-secondary); font-size: 13px; }
.dr-facts dd { margin: 0; color: var(--text-primary); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.dr-say { background: var(--bg-sunken); border-left: 3px solid var(--accent); border-radius: var(--r-xs); padding: var(--sp-3); color: var(--text-body); }
.dr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); position: sticky; bottom: calc(-1 * var(--sp-4)); background: var(--bg-surface); padding: var(--sp-3) 0; border-top: 1px solid var(--border-subtle); }
.dr-acts .btn { min-height: 40px; }
/* Rep drawer (FR-M-REPDRILL): each figure with the team median under it, so the comparison
   is read, not computed in the manager's head. */
.rd-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); margin: 0; }
.rd-kpi dt { color: var(--text-secondary); font-size: 12px; }
.rd-kpi dd { margin: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rd-kpi dd.rd-mid { font-weight: normal; font-size: 12px; color: var(--text-muted); }
.rd-list { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--sp-2); }
.rd-list li .muted { font-size: 12px; }
body.drawer-open { overflow: hidden; }

@media (max-width: 700px) {
  .ph-q { font-size: 20px; line-height: 26px; }
  .kpirow, .kpirow.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpirow.n3 > :last-child { grid-column: 1 / -1; }
  .kr-val { font-size: 22px; line-height: 28px; }
  .arow { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: 'rk main val' 'act act act'; row-gap: var(--sp-2); }
  .arow > .ar-rk { grid-area: rk; }
  .arow > .ar-main { grid-area: main; }
  .arow > .ar-val { grid-area: val; }
  .arow > .ar-act { grid-area: act; }
  .ar-act .btn { flex: 1; min-height: 40px; justify-content: center; }
  .ar-seg { display: none; }
  /* The name is the one thing a rep scans this list for, and a 390px row cut it to
     "GOODWI…" so the status chip and "Typical order · 2 orders" could keep their width.
     Name first: it may take two lines, the chip drops under it, the value column narrows. */
  .ar-l1 { flex-wrap: wrap; row-gap: 2px; }
  .ar-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .ar-val { white-space: normal; max-width: 92px; }
  .ar-val span { display: block; font-size: 11px; line-height: 14px; }
  /* Bottom sheet: the list stays visible above it and a thumb reaches every action. */
  .drawer { top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%); }
  .fchip { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-ov { transition: none; }
}

/* ── Small shared bits ─────────────────────────────────────────────────────── */
.kr-val small { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-muted); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }
.muted { color: var(--text-muted); }

/* ── Today (sales) ─────────────────────────────────────────────────────────── */
.today-listbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.today-listbar .chipbar { margin: 0; }
.today-listmeta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-3); font-size: 12px; color: var(--text-muted); }
.today-priority-section { margin: 0 0 var(--sp-4); }
.today-listfoot { font-size: 12px; color: var(--text-muted); margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.today-deck-why { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--sp-3); max-width: var(--measure); }
.today-pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); font-size: 13px; color: var(--text-muted); }
.today-activity { border: 1px solid var(--border-subtle); border-radius: var(--r-sm); max-height: 320px; overflow-y: auto; margin-bottom: var(--sp-3); }
.dr-contact { margin: var(--sp-2) 0 0; color: var(--text-secondary); }
.drawer .sales-evidence { margin-top: 0 !important; }
@media (max-width: 700px) {
  .today-listmeta { margin-left: 0; width: 100%; justify-content: flex-end; }
  /* On a phone the list has to start inside the first screen: chips scroll sideways on one
     line instead of wrapping to three, and the reason line may take two lines rather than
     being cut mid-word. */
  .today-listbar .chipbar { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
  .today-listbar .fchip { flex-shrink: 0; }
  .ar-l2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .kpirow.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .kpirow.n3 > :last-child { grid-column: auto; }
  .kpirow.n3 .kr { padding: var(--sp-2) var(--sp-3); }
  .kpirow.n3 .kr-val { font-size: 18px; line-height: 24px; }
  .kpirow.n3 .kr-meta { display: none; }
  /* Two-number rows read the same way on a phone (owner, 2026-10-22: "terlalu banyak
     informasi"): the number and a one-line caption; the full sentence is behind the (i). */
  .kpirow.n2 { gap: var(--sp-2); }
  .kpirow.n2 .kr { padding: var(--sp-2) var(--sp-3); }
  .kpirow.n2 .kr-val { font-size: 20px; line-height: 26px; }
  .kpirow.n2 .kr-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .today-listmeta .qsort { display: none; }
}

/* ── Quick log (FR-S-TODAY-04) ─────────────────────────────────────────────── */
.qlog-due { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--text-secondary); font-size: 13px; }
.qlog-due input { font: inherit; min-height: 36px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-xs); }
.qlog-note { width: 100%; min-height: 72px; font: inherit; font-size: 14px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); resize: vertical; }
.qlog-note:focus-visible, .qlog-due input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* The toast ignores the pointer so it never blocks the row under it; its Undo is the one
   thing inside that must not. */
.toast .toast-undo { pointer-events: auto; margin-left: var(--sp-3); font: inherit; font-weight: var(--fw-bold); color: inherit; background: transparent; border: 1px solid currentColor; border-radius: var(--r-pill); padding: 2px 10px; min-height: 28px; cursor: pointer; }

/* ── Account 360 (FR-S-ACC360) ─────────────────────────────────────────────── */
.a360-back { margin: 0 0 var(--sp-3); }
.a360-top { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md); box-shadow: var(--e-1); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4); }
.a360-top .ws-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; padding: 0; margin: 0; border: 0; }
.a360-id { min-width: 0; flex: 1 1 360px; display: flex; flex-direction: column; gap: 6px; }
.a360-name { font-size: 22px; line-height: 28px; font-weight: var(--fw-bold); color: var(--text-primary); margin: 0; overflow-wrap: anywhere; }
.a360-top .ws-meta { display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); font-size: 13px; color: var(--text-secondary); margin: 0; }
.a360-top .ws-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.a360-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--border-subtle); }
.a360-facts > div { min-width: 0; }
.a360-facts dt { font-size: 12px; line-height: 16px; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.a360-facts dd { margin: 2px 0 0; font-size: 17px; line-height: 24px; font-weight: var(--fw-bold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.a360-facts dd.a360-fsub { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-muted); margin: 0; }
/* Folded facts and the secondary-action menu (owner review 2026-10-21): the header keeps
   three facts and two buttons; everything else is one click away, not gone. */
.a360-more { margin-top: var(--sp-2); }
.a360-more > summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); font-weight: var(--fw-semibold); list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.a360-more > summary::-webkit-details-marker { display: none; }
.a360-more > summary::before { content: '\25B8'; transition: transform 140ms cubic-bezier(.16,1,.3,1); }
.a360-more[open] > summary::before { transform: rotate(90deg); }
.a360-more .a360-facts { margin-top: var(--sp-2); }
.a360-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 16px 20px; font-weight: var(--fw-semibold); min-height: 48px; }
.a360-fold > summary::-webkit-details-marker { display: none; }
.a360-fold > summary > span:first-child::before { content: '\25B8'; display: inline-block; margin-right: 8px; transition: transform 140ms cubic-bezier(.16,1,.3,1); }
.a360-fold[open] > summary > span:first-child::before { transform: rotate(90deg); }
.a360-fold[open] > summary { border-bottom: 1px solid var(--line); }
/* .qcard is a flex row for Today's ranked cards; a fold built on it put its summary in a
   left column and its body in a squeezed right one. A fold reads top to bottom. */
.a360-fold { display: block; cursor: auto; }
.a360-fold[open] > :not(summary) { margin-top: var(--sp-3); }
/* The script is already one click away behind this fold, so once it is open the coaching
   line under each step shows too -- a second click per step was a script nobody read. */
.a360-fold .an-sec .pcl-d { display: block; }
.a360-fold .an-sec .pcl-more { display: none; }
.a360-menu { position: relative; }
.a360-menu > summary { list-style: none; }
.a360-menu > summary::-webkit-details-marker { display: none; }
.a360-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 4px; display: grid; }
.a360-mi { text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: var(--r-sm); font: inherit; color: var(--text-primary); cursor: pointer; min-height: 40px; }
.a360-mi:hover, .a360-mi:focus-visible { background: var(--bg-canvas); }
.a360-now { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: var(--r-sm); }
.a360-now p { margin: 0; flex: 1 1 320px; font-size: 15px; line-height: 22px; color: var(--text-primary); font-weight: var(--fw-semibold); }
.a360-now .btn { min-height: 40px; flex-shrink: 0; }
.a360-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.a360-col { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.a360-h { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); margin: 0 0 var(--sp-2); font-weight: var(--fw-bold); }
.a360-col .ws-why-sub { margin-top: var(--sp-2); }
.a360-col .ws-quick-actions { margin-top: var(--sp-3); }
.a360-recovery { margin-top: var(--sp-3); }
.a360-col .ws-details { margin-top: var(--sp-4); border-top: 1px solid var(--border-subtle); padding-top: var(--sp-3); }
.a360-breakdown { margin-top: var(--sp-3); }
.a360-ai { margin: 0; }
@media (max-width: 900px) {
  .a360-grid { grid-template-columns: minmax(0, 1fr); }
  .a360-top { padding: var(--sp-3); }
  /* The header stacks into a column below 860px (main.css), and in a column flex-basis is a
     HEIGHT: the 360px meant as a minimum width became ~200px of blank card above Log /
     Follow-up / Email on every phone. */
  .a360-top .a360-id { flex: 0 1 auto; }
  .a360-now .btn { width: 100%; justify-content: center; }
}

/* ── Team Today tabs (FR-M-TODAY-03) ───────────────────────────────────────── */
.mgr-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-3); }
.mgr-panel[hidden] { display: none; }

/* ── Column picker (FR-S-ACCOUNTS) ─────────────────────────────────────────── */
.colpick { position: relative; }
.colpick > summary { list-style: none; cursor: pointer; }
.colpick > summary::-webkit-details-marker { display: none; }
.colpick-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 220px; display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); background: var(--surface, #fff); border: 1px solid var(--border-strong); border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(0,0,0,.12); font-size: 13px; }
.colpick-menu label { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.colpick-menu .linkbtn { align-self: flex-start; margin-top: 4px; font-size: 12px; }

/* ── Folded manager lens (FR-M-LENS) ───────────────────────────────────────── */
.lens-fold > details > summary { list-style: none; cursor: pointer; }
.lens-fold > details > summary::-webkit-details-marker { display: none; }
.lens-fold > details > summary .card-h h3::after { content: '▸'; margin-left: 8px; color: var(--text-muted); font-size: 12px; }
.lens-fold > details[open] > summary .card-h h3::after { content: '▾'; }
.lens-fold > details:not([open]) > summary .card-h { border-bottom: 0; }
.lens-fold > details > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
/* Same fold when the <details> itself carries .lens-fold (Calendar's "Products by segment").
   Only the nested form was styled, so the browser's own marker sat on a line of its own
   above the card title. */
details.lens-fold > summary { list-style: none; cursor: pointer; }
details.lens-fold > summary::-webkit-details-marker { display: none; }
details.lens-fold > summary .card-h h3::after { content: '▸'; margin-left: 8px; color: var(--text-muted); font-size: 12px; }
details.lens-fold[open] > summary .card-h h3::after { content: '▾'; }
details.lens-fold:not([open]) > summary .card-h { border-bottom: 0; }
details.lens-fold > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
/* A fold's only cue was a 12px grey triangle after the heading, and the owner who asked for
   the folds missed them on her own screens. Every fold now ends in a labelled control that
   says what a click does, in the same place on every screen. */
.lens-fold > details > summary .card-h h3::after, details.lens-fold > summary .card-h h3::after { content: none; }
.a360-fold > summary > span:first-child::before { content: none; }
.lens-fold > details > summary, details.lens-fold > summary { position: relative; }
.lens-fold > details > summary .card-h, details.lens-fold > summary .card-h { padding-right: 104px; }
.lens-fold > details > summary::after, details.lens-fold > summary::after, .a360-fold > summary::after, .fold > summary::after {
  content: 'Show ▾'; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--brand);
  background: var(--bg-inset); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.lens-fold > details > summary::after, details.lens-fold > summary::after { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
.lens-fold > details[open] > summary::after, details.lens-fold[open] > summary::after, .a360-fold[open] > summary::after, .fold[open] > summary::after { content: 'Hide ▴'; }
.fold > summary::before { content: none; }
.fold > summary::after { flex-shrink: 0; }
.a360-fold > summary { justify-content: flex-start; }
.a360-fold > summary::after { flex-shrink: 0; align-self: center; margin-left: auto; }
.lens-fold > details > summary:hover::after, details.lens-fold > summary:hover::after, .a360-fold > summary:hover::after { border-color: var(--brand); }
/* The next-three-months heatmap: three month columns do not need the full page width, and
   stretched they left the segment names 600px from the colour they label. */
table.cal2.cal-short { width: auto; min-width: 0; }
table.cal2.cal-short td.cell, table.cal2.cal-short th:nth-child(n+4) { min-width: 96px; }

/* ── .inp: 17 inputs and selects carried this class and nothing styled it, so each drew
   the browser's own control -- a grey system dropdown beside the app's own filter buttons.
   One look for all of them; 40px tall so a thumb can hit it. */
.inp { font: inherit; font-size: 14px; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 8px 12px; min-height: 40px; max-width: 100%; }
select.inp { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.inp:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent-border); }

/* ── Phone header (2026-10-20) ─────────────────────────────────────────────────
   Before any content, a phone spent ~180px on two green bars and the data pill, and a
   manager's name and role wrapped the brand bar onto a third row. On a 844px screen that
   is a fifth of the view gone before the first account. The initials stay (whose session
   this is), the name and role go (the person holding the phone knows who they are). */
@media (max-width: 700px) {
  .user-badge .user-info { display: none; }
  .scopebar { padding-top: 6px; padding-bottom: 6px; }
  .src-pill { font-size: 11px; padding: 2px 8px; }
}

/* Leads table: the secondary actions in a More menu, one full-width row each. */
.lead-more .a360-menu-pop { gap: 2px; }
.lead-more .a360-menu-pop .btn { width: 100%; justify-content: flex-start; border: 0; box-shadow: none; }

/* Phone: long explanatory text shows two lines and opens on a tap (see isPhone in ui.js). */
@media (max-width: 700px) {
  .m-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; cursor: pointer; }
  .m-clamp.m-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  /* A card heading and its subtitle shared one row, so both wrapped into a narrow column;
     the subtitle now sits under the heading, at most one line until tapped. */
  .card-h { flex-wrap: wrap; row-gap: 2px; }
  .card-h .sub.r { flex-basis: 100%; margin-left: 0; text-align: left; }
  .a360-fold > summary, .fold > summary { flex-wrap: wrap; row-gap: 2px; }
  .a360-fold > summary .sub-note, .fold > summary .fold-m { order: 3; flex-basis: 100%; margin-left: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lens-fold > details > summary .card-h, details.lens-fold > summary .card-h { padding-right: 84px; }
}

/* Performance metric tiles: three-by-two on a laptop, two-by-three on a phone. */
.grid.perf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) {
  /* The :not chain outranks main.css's narrow-screen rule that puts every bare .grid in
     one column -- the rule that had made these six tiles six screens of one-up boxes. */
  .grid.perf-tiles:not(.g-2):not(.g-3):not(.g-4) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .grid.perf-tiles > * { padding: 10px !important; }
  .perf-tile-cta { display: none; }
}