/* ============================================================================
   SHELL — the controls every screen shares (lane S)
   ============================================================================
   New shell UI lives here, not in console.css (MASTER-PLAN §5). Tokens only: no
   literal colour, both themes through console.css's own token blocks. The owner's
   visual refresh rides on those tokens, so nothing here invents a value a token
   already names.

   THE DATE CONTROL (phase 1b). One row: range, comparison, grouping. It wraps AS
   A UNIT at 375 px and never page-overflows. Every menu is a float in its own
   positioned wrapper — opening one moves nothing beside it (design-rules:
   stable screen geometry), and each menu reserves its scrollbar track. */

.sb-date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.sb-wrap { position: relative; flex: none; }
/* A date control alone in a screen's header (Answers, Missed) sits in the shell's facet wrap,
   which is `flex: none`: at 390 px the row stayed its full width and Monthly and the reading
   pick left the screen (ui-audit clipped, T1 09-28). Where the header wraps, the control takes
   the row and wraps inside it, as AI traffic's does (ai-traffic.css). */
@media (max-width: 760px) {
  .v2-head > .v2-src-facetwrap:has(> .sb-date) { flex: 1 1 100%; min-width: 0; max-width: 100%; }
}

/* No grey resting fill (owner, 2026-09-19): the surface, a border, and a wash
   only on hover. A non-default value reads `.set`, as the kit's `.pick` does. */
.sb-pick {
  display: inline-flex; align-items: center; gap: 7px; height: var(--ctl-h-sm); padding: 0 10px;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-weight: 400; font-size: var(--text-xs); line-height: 1; font-family: inherit; color: var(--body); cursor: pointer; white-space: nowrap;
}
.sb-pick svg { color: var(--faint); flex: none; }
.sb-pick:hover { background: var(--wash-hover); border-color: var(--line-hover); }
.sb-pick.set { border-color: var(--line-hover); color: var(--ink); }
.sb-pick[aria-expanded="true"] { border-color: var(--line-hover); color: var(--ink); }

.sb-seg { display: inline-flex; height: var(--ctl-h-sm); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; flex: none; }
.sb-seg button {
  padding: 0 10px; background: transparent; border: 0; border-left: 1px solid var(--line);
  font-weight: 400; font-size: var(--text-xs); line-height: 1; font-family: inherit; color: var(--body); cursor: pointer;
}
.sb-seg button:first-child { border-left: 0; }
.sb-seg button:hover { background: var(--wash-hover); }
.sb-seg button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
/* A grouping the screen declines: still there, never chosen, the reason on its hover. */
.sb-seg button.off { color: var(--faint); cursor: default; }
.sb-seg button.off:hover { background: transparent; }

/* The Daily note: what each point is. Its definition is on the hover. */
.sb-note { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); border-bottom: 1px dotted var(--line-hover); cursor: help; white-space: nowrap; }
.sb-warn { flex-basis: 100%; margin: 4px 0 0; font-size: var(--text-xs); color: var(--muted); }

.sb-menu {
  position: absolute; left: 0; top: calc(100% + 5px); z-index: 14; width: max-content; min-width: 232px; max-width: calc(100vw - 32px);
  max-height: 380px; overflow-y: auto; scrollbar-gutter: stable;
  background: var(--pop, var(--surface)); border: 1px solid var(--line-hover); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: 6px;
}
.sb-menu > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.sb-menu > button:hover { background: var(--wash-hover); }
.sb-menu > button.on { background: var(--wash-accent-2); }
/* A range the screen declines (declineRange): still listed, never picked, its reason on the hover. */
.sb-menu > button.off { cursor: default; }
.sb-menu > button.off:hover { background: none; }
.sb-menu > button.off .l { color: var(--faint); }
.sb-menu .l { flex: 1; font-size: var(--text-xs); color: var(--ink); white-space: nowrap; }
.sb-menu .n { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); white-space: nowrap; }
.sb-reset .l { color: var(--muted); }
.sb-foot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.sb-save { width: 100%; height: var(--ctl-h-sm); background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 400; font-size: var(--text-xs); line-height: 1; font-family: inherit; color: var(--ink); cursor: pointer; }
.sb-save:hover { background: var(--wash-hover); }

/* The calendar: two months beside each other, one on a phone. */
.sb-rangemenu:has(.sb-cal) { width: min(492px, calc(100vw - 32px)); }
.sb-calnav { display: flex; align-items: center; gap: 8px; padding: 2px 2px 8px; }
.sb-calsay { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--muted); }
.sb-navbtn { width: 26px; height: 26px; border: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; color: var(--body); cursor: pointer; font-weight: 400; font-size: var(--text-sm); line-height: 1; font-family: inherit; }
.sb-navbtn:hover { background: var(--wash-hover); }
.sb-months { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sb-mtitle { display: block; margin: 0 0 6px; font-size: var(--text-xs); font-weight: 600; color: var(--ink); text-align: center; }
.sb-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sb-dow { font: 400 var(--text-xs) / 22px var(--mono); color: var(--faint); text-align: center; }
.sb-day { height: 30px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; font: 400 var(--text-xs) / 1 var(--mono); font-variant-numeric: tabular-nums; }
.sb-day:hover:not(:disabled) { background: var(--wash-hover); }
.sb-day:disabled { color: var(--faint); opacity: .45; cursor: default; }
.sb-day.edge { background: var(--ink); color: var(--surface); }
.sb-pad { visibility: hidden; }

@media (max-width: 560px) {
  .sb-months { grid-template-columns: 1fr; }
  .sb-month-prev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-pick, .sb-seg button, .sb-day { transition: none; }
}

/* The table alternative beside every chart: the same points, marks in words. */
.sb-tablewrap { overflow-x: auto; }
.sb-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.sb-table th, .sb-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.sb-table thead th { font: 500 var(--text-xs) / 1.2 var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.sb-table tbody th { font-weight: 400; color: var(--ink); white-space: nowrap; }
.sb-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.sb-table td:last-child { color: var(--muted); }
.sb-trange, .sb-tmark { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); }

/* THE SHARED FIGURE: a sampled rate with its estimated range; a full count alone.
   The range wraps under the value rather than widening a cell or a phone row. */
.sb-fig { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 1px; max-width: 100%; font-variant-numeric: tabular-nums; }
.sb-fig-v { color: var(--ink); font-weight: 600; white-space: nowrap; }
.sb-fig-r { font: 400 var(--text-xs) / 1.2 var(--mono); color: var(--faint); white-space: nowrap; }
.sb-fig-headline .sb-fig-v { font-size: var(--fig-md, var(--text-2xl)); line-height: 1.1; }
.sb-fig-cell .sb-fig-v { font: 500 var(--text-xs) / 1.2 var(--mono); }
.sb-fig-none { color: var(--faint); }

/* ONE NOTICE PER CAUSE, hoisted to the page (C1's absence contract, rule 1). */
.sb-notices { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--text-xs); color: var(--body); }
.sb-notice-act { height: var(--ctl-h-sm); padding: 0 10px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 400; font-size: var(--text-xs); line-height: 1; font-family: inherit; color: var(--ink); cursor: pointer; }
.sb-notice-act:hover { background: var(--wash-hover); }

/* THE SCOPE BAR: above the page title, one row that wraps as a unit. */
.sb-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; min-width: 0; }
/* A declined date control's reason, where the control would sit (V14's Trends). */
.sb-nodate { align-self: center; max-width: 42ch; font-size: var(--text-xs); line-height: 1.35; color: var(--muted); }
.sb-datewrap { display: contents; }
.sb-pick.off { border-style: dashed; color: var(--muted); }
.sb-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.sb-chip { display: inline-flex; align-items: center; height: var(--ctl-h-sm); border: 1px solid var(--line-hover); border-radius: var(--r-sm); font-size: var(--text-xs); color: var(--ink); }
.sb-chipt { padding: 0 4px 0 10px; white-space: nowrap; }
.sb-chipx { height: 100%; padding: 0 8px; background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--muted); cursor: pointer; font-weight: 400; font-size: var(--text-sm); line-height: 1; font-family: inherit; }
.sb-chipx:hover { background: var(--wash-hover); color: var(--ink); }
.sb-resetf { height: var(--ctl-h-sm); padding: 0 8px; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-weight: 400; font-size: var(--text-xs); line-height: 1; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sb-fhead { padding: 4px 8px 6px; font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); }
.sb-combine { margin: 6px 0 0; padding: 6px 8px 2px; border-top: 1px solid var(--line); font-size: var(--text-xs); color: var(--muted); max-width: 260px; }
.sb-facetmenu > button[aria-checked="true"] .l::before { content: "✓ "; color: var(--accent-text); }
/* The Place menu (V9): nested by containment. A name wraps rather than push its count off
   a narrow menu, and the grain rows sit above the places, divided from them. */
.sb-placemenu { max-width: min(340px, calc(100vw - 32px)); }
.sb-placemenu > button[data-sbfval] { padding-left: calc(8px + var(--sb-depth, 0) * 14px); }
.sb-placemenu .l { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.sb-graindiv { border-top: 1px solid var(--line); margin: 4px 0; }
.sb-sheet { width: min(360px, calc(100vw - 32px)); }
.sb-sgroup + .sb-sgroup { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.sb-stitle { margin: 2px 8px 4px; font: 500 var(--text-xs) / 1.2 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.sb-srow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.sb-srow:hover { background: var(--wash-hover); }
.sb-srow .l { flex: 1; font-size: var(--text-xs); color: var(--ink); }
.sb-srow .n { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); white-space: nowrap; }
.sb-sopts { padding: 0 0 4px 8px; }
.sb-sopts > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.sb-sopts > button:hover { background: var(--wash-hover); }
.sb-sopts > button.on { background: var(--wash-accent-2); }
.sb-sopts .l { flex: 1; font-size: var(--text-xs); color: var(--ink); }
.sb-sopts .n { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); }

/* On a phone the two wide floats — More filters and the calendar — are a sheet
   pinned to the viewport's foot, full width less the gutter, so neither can run
   past an edge wherever its button happened to wrap to. */
@media (max-width: 560px) {
  .sb-sheet, .sb-rangemenu:has(.sb-cal) {
    position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; max-width: none; max-height: 70vh;
  }
}


/* THE AGENT'S CONTEXT TOKENS: what it will read, each removable but two. */
.sb-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-token { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 0 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: var(--text-xs); color: var(--body); max-width: 100%; }
.sb-token:not(:has(.sb-tokx)) { padding-right: 8px; }
.sb-tokw { color: var(--faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.sb-tokv { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-tokx { height: 100%; padding: 0 7px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-weight: 400; font-size: var(--text-xs); line-height: 1; font-family: inherit; }
.sb-tokx:hover { background: var(--wash-hover); color: var(--ink); }

/* SAVED VIEWS on the bar, and the save form in the centred modal. */
.sb-viewsmenu { min-width: 280px; }
.sb-vrow { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sb-vopen { flex: 1; display: flex; align-items: center; gap: 12px; padding: 7px 8px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer; font-family: inherit; text-align: left; min-width: 0; }
.sb-vopen:hover, .sb-vmore:hover { background: var(--wash-hover); }
.sb-vopen .l { flex: 1; font-size: var(--text-xs); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-vopen .n { font: 400 var(--text-xs) / 1 var(--mono); color: var(--faint); white-space: nowrap; }
.sb-vdef { font: 400 var(--text-xs) / 1 var(--mono); color: var(--accent-text); }
.sb-vmore { flex: none; width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; }
/* A view's actions open IN FLOW under its row (F2, 2026-09-24): absolutely placed inside
   the menu's own scroll (max-height, overflow-y: auto) they were clipped to one row. */
.sb-vacts { flex: 1 0 100%; margin: 2px 0 6px 8px; padding: 2px 0 2px 6px; border-left: 2px solid var(--line-hover); }
.sb-vacts button { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; font-weight: 400; font-size: var(--text-xs); line-height: 1.3; font-family: inherit; color: var(--ink); cursor: pointer; }
.sb-vacts button:hover { background: var(--wash-hover); }
.sb-vacts button .n { float: right; margin-left: 8px; font: 400 var(--text-xs) / 1.3 var(--mono); color: var(--faint); }
.sb-fld { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: var(--text-xs); color: var(--muted); }
.sb-inp { font-weight: 400; font-size: var(--text-sm); line-height: 1.4; font-family: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; }
.sb-inp[aria-invalid="true"] { border-color: var(--danger); }
.sb-vkind { margin: 4px 0 0; font: 400 var(--text-xs) / 1.3 var(--mono); color: var(--faint); }
/* The view's alert rules, above the Notify form: one row each, its words under it. */
.sb-nrules { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--line); }
.sb-nrule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sb-nrule .l { font-size: var(--text-sm); color: var(--ink); min-width: 0; }
.sb-nrule .sb-vkind { grid-column: 1; margin: 0; }
.sb-nacts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; }

/* The evidence kind's record (V3, on S-contracts §3; drawer.js evidenceRenderer). */
.sb-fnote { margin: 0; font-size: var(--text-sm); color: var(--body); }
.sb-evrow { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-light); font-size: var(--text-sm); }
.sb-evrow .k { flex: none; width: 120px; color: var(--muted); }
.sb-evrow .v { min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.sb-evscope { margin-top: 14px; }
/* The record's doors: the screen's own, then "Ask Agent" (AGT, 2026-09-25), side by side. */
.sb-evdoor { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

/* The one comments panel (comments-panel.js), V12's comments.css as the shell's: a dashboard
   block's drawer, an answer in the reader, a report's block. Tokens only. */
.cmt-field { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
.cmt-flabel { font: 500 var(--text-xs) / 1.3 var(--sans); color: var(--muted); }
.cmt-input { width: 100%; box-sizing: border-box; font: 400 var(--text-sm) / 1.4 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--ctl-edge); border-radius: var(--r-sm); padding: 6px 10px; }
/* The height is a textarea's: V12's notes form puts .cmt-input on a date and a text input too (a6860120). */
textarea.cmt-input { resize: vertical; min-height: 56px; }
.cmt-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cmt-tag { font: 500 var(--text-xs) / 1 var(--sans); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 8px; }
.cmt-note { margin: 0; font: 400 var(--text-sm) / 1.4 var(--sans); color: var(--muted); }
.cmt-fail { display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; font: 400 var(--text-sm) / 1.4 var(--sans);
  color: var(--muted); }
.cmt { display: flex; flex-direction: column; gap: var(--sp-4); }
.cmt-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cmt-thread { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); }
.cmt-done .cmt-body, .cmt-done .cmt-who { color: var(--muted); }
.cmt-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cmt-replies { list-style: none; margin: 0; padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: var(--sp-3); }
.cmt-c { display: flex; flex-direction: column; gap: var(--sp-1); }
.cmt-h { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.cmt-who { font: 500 var(--text-sm) / 1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.cmt-when { font: 400 var(--text-xs) / 1.3 var(--sans); color: var(--muted); }
.cmt-body { margin: 0; font: 400 var(--text-sm) / 1.45 var(--sans); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.cmt-at { font-weight: 500; color: var(--accent-text); }
.cmt-acts { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cmt-act { min-height: 28px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: 500 var(--text-xs) / 1.3 var(--sans); color: var(--muted); border-radius: var(--r-sm); }
.cmt-act:hover, .cmt-act:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.cmt-thread > .cmt-form { padding-left: var(--sp-4); border-left: 2px solid var(--line); }
.cmt-warn { font: 400 var(--text-xs) / 1.3 var(--sans); color: var(--danger); }
.cmt-form { display: flex; flex-direction: column; gap: var(--sp-2); }
.cmt-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); }
.cmt-fault { margin: 0; font: 400 var(--text-xs) / 1.3 var(--sans); color: var(--danger); }
.cmt-fault:empty { display: none; }