/* ==========================================================================
   🔥 EMBER, pass 3 (DESIGN.md, docs/briefs/PASS-3-DIRECTION.md): the faces of HotBotShop's own screens.
   Loaded after components.css and layout.css, this file is where every component gets its Ember look (the rounded
   sections, the inner top light, the flame action, the sunken fields, the sheets), plus the compositions that are more
   than a component: the shell, the page head, the widgets (js/widgets.js), the owner's Today page (js/pages/overview.js),
   the agent's Go page (js/pages/agent.js), folds and the settings layout. Colours, sizes and motion only through tokens
   (css/tokens.css). Depth is lightness steps and 1px hairlines; a shadow only under something that floats.
   ========================================================================== */

/* ---------- Browser surfaces: the parts nobody draws ---------- */
::selection { background: color-mix(in oklab, var(--accent) 32%, var(--bg)); color: var(--text); }
html { caret-color: var(--accent); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
a { text-underline-offset: 0.16em; }
h1, h2, h3 { text-wrap: balance; }
.num, .money, td.num, th.num, .stat__value, .metric__value, .kpi b, .go__stat b { font-variant-numeric: tabular-nums; }

/* ---------- Shell finish ---------- */
.sidebar { gap: var(--space-5); padding: var(--space-5) var(--space-3) var(--space-4); border-right: 0; background: var(--bg); }
.brand { min-height: 44px; }
.brand__mark, .brand__logo { width: 36px; height: 36px; border-radius: 12px; }
.brand__mark { background: var(--accent); color: var(--on-accent); font-weight: var(--weight-semibold); box-shadow: var(--inner-light-strong); }
.nav { gap: 2px; padding-right: 2px; }
.nav__label { padding: var(--space-4) var(--space-3) var(--space-1); font: var(--type-label); letter-spacing: var(--type-label-tracking);
  text-transform: none; color: var(--text-subtle); }
.nav__link { height: 40px; padding: 0 var(--space-3); border-radius: var(--radius); color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav__link svg { width: 18px; height: 18px; color: var(--text-subtle); transition: color var(--dur-fast) var(--ease); }
.nav__link:hover { background: var(--surface); color: var(--text); }
.nav__link:hover svg { color: var(--text); }
.nav__link.is-active { background: var(--surface); color: var(--text); font-weight: var(--weight-semibold);
  box-shadow: var(--inner-light), 0 0 0 1px var(--border); }
.nav__link.is-active svg { color: var(--accent); }
.sidebar__footer { border-top: var(--border-width) solid var(--border); }
.account__avatar { width: 32px; height: 32px; border-radius: 10px; background: var(--surface-raised); box-shadow: var(--inner-light); }
.sidebar__mark { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) 0;
  color: var(--text-subtle); font: var(--type-meta); font-size: var(--text-xs); }
.sidebar__mark svg { width: 14px; height: 14px; color: var(--accent); }
.topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; height: var(--topbar-height); }
.topbar__title { font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--text-muted); }
/* the search sits at the left of the top bar: a sunken field with its shortcut at the right */
.kbd-search { border-radius: var(--radius); background: var(--surface-sunken); border-color: var(--border); color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.kbd-search:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.topbar > .kbd-search { height: var(--control-height); flex: 0 1 280px; justify-content: flex-start; }
.topbar > .kbd-search kbd { margin-left: auto; border-radius: 6px; }
.content { padding-top: var(--space-2); }
.sidebar__tools { display: none; }
.topbar__tools { display: contents; }
/* Phones: the menu button is the way to everything else; the hidden sidebar is not in anyone's tab order (js/app.js
   sets `inert` on it). Focused controls never hide under the floating bar. */
@media (max-width: 860px) {
  html { scroll-padding-bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom, 0px)); }
  .sidebar { background: var(--surface); border-right: var(--border-width) solid var(--border); border-radius: 0 var(--radius-sheet) var(--radius-sheet) 0; }
  .sidebar[inert] { visibility: hidden; }
  .shell.is-nav-open .sidebar { visibility: visible; }
  .topbar { height: 56px; }
  .topbar__title { font-size: var(--text-base); }
  .topbar > .kbd-search { flex: 0 0 auto; min-width: var(--tap); height: var(--tap); justify-content: center; }
  .topbar__tools { display: none; }
  .sidebar__tools { display: grid; gap: var(--space-1); }
  .sidebar__tools .btn { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .topbar > .kbd-search { border-color: transparent; background: transparent; }
  .topbar > .kbd-search:hover { background: var(--surface-hover); }
}
/* The floating bar at the thumb (phones): one raised surface, the active tab a lit step */
.tabbar { box-shadow: var(--shadow-float), var(--inner-light); background: var(--surface-raised); }
.tabbar__tab.is-active { box-shadow: var(--inner-light), inset 0 0 0 1px var(--border); }

/* ---------- Page head: the large title every page opens with ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-5); min-height: 44px; }
.page-head__text { display: grid; gap: 2px; min-width: 0; }
.page-head__title { margin: 0; font: var(--type-display); letter-spacing: var(--type-display-tracking); color: var(--text); }
.page-head__sub { color: var(--text-muted); font: var(--type-meta); }

/* ---------- Entrance: the blocks of a page settle into place, one after the other (the page's one authored moment) ---------- */
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }
.content > .page-head, .content .stack > *, .content .today__col > *, .content .grid-2 > *, .content .go > * {
  animation: settle var(--dur-slow) var(--ease) both; }
.content .stack > :nth-child(2), .content .today__col > :nth-child(2), .content .grid-2 > :nth-child(2), .content .go > :nth-child(2) { animation-delay: 50ms; }
.content .stack > :nth-child(3), .content .today__col > :nth-child(3), .content .grid-2 > :nth-child(3), .content .go > :nth-child(3) { animation-delay: 100ms; }
.content .stack > :nth-child(4), .content .today__col > :nth-child(4), .content .grid-2 > :nth-child(4), .content .go > :nth-child(4) { animation-delay: 150ms; }
.content .stack > :nth-child(5), .content .today__col > :nth-child(5), .content .grid-2 > :nth-child(5), .content .go > :nth-child(5) { animation-delay: 200ms; }
.content .stack > :nth-child(n + 6), .content .today__col > :nth-child(n + 6), .content .grid-2 > :nth-child(n + 6), .content .go > :nth-child(n + 6) { animation-delay: 240ms; }

/* ---------- Buttons: a raised step with light on its top edge; the flame one is the single primary action ---------- */
.btn { height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius);
  border: var(--border-width) solid var(--border); background: var(--surface-raised); color: var(--text);
  box-shadow: var(--inner-light); font-weight: var(--weight-semibold);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: var(--inner-light-strong); }
.btn--primary:hover { background: var(--accent-hover); border-color: transparent; }
.btn--danger { background: var(--danger); border-color: transparent; color: var(--on-danger); box-shadow: var(--inner-light-strong); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text); }
.btn--ghost:hover { background: var(--surface-raised); border-color: transparent; }
.btn--sm { height: 36px; padding: 0 var(--space-3); border-radius: 10px; font-size: var(--text-sm); }
.btn--icon { width: var(--control-height); padding: 0; }
.btn:disabled, .btn.is-loading { transform: none; box-shadow: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sm svg { width: 16px; height: 16px; }

/* ---------- Fields: a sunken well, a hairline, the flame ring on focus ---------- */
.input, .select, .textarea { height: var(--control-height); padding: 0 var(--space-4); border-radius: var(--radius);
  background: var(--surface-sunken); border-color: color-mix(in oklab, var(--border-strong) 55%, var(--border)); color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.textarea { height: auto; min-height: 104px; padding: var(--space-3) var(--space-4); }
.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus { background: var(--surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent); }
.field { gap: 6px; }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text); }
.field__help { font-size: var(--text-xs); line-height: 1.45; color: var(--text-subtle); }
.toggle input { width: 44px; height: 26px; background: var(--surface-sunken); border: var(--border-width) solid var(--border-strong); }
.toggle input::after { top: 2px; left: 2px; width: 20px; height: 20px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
.toggle input:checked { background: var(--accent); border-color: transparent; }
.toggle input:checked::after { transform: translateX(18px); }
.check input { width: 18px; height: 18px; border-radius: 6px; flex: none; }   /* a label that wraps never squeezes the box */
.segmented { padding: 3px; border-radius: var(--radius); background: var(--surface-sunken); border: var(--border-width) solid var(--border); }
.segmented__btn { min-height: 34px; padding: 0 var(--space-3); border-radius: 9px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.segmented__btn.is-active { background: var(--surface-raised); color: var(--text); box-shadow: var(--inner-light), 0 1px 2px rgb(0 0 0 / 0.18); }
.swatch { width: 28px; height: 28px; border-width: 3px; transition: transform var(--dur-fast) var(--ease); }

/* ---------- Cards: the rounded sections, lit along the top edge, no shadow at rest ---------- */
.card { border-radius: var(--radius-card); background: var(--surface); border: var(--border-width) solid var(--border);
  box-shadow: var(--inner-light); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.card__header { padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 0; }
.card__header + .card__body { padding-top: 0; }
.card__body { padding: var(--space-5); }
.card__body--flush { padding: 0; }
.card__header + .card__body--flush { padding-top: 0; border-top: var(--border-width) solid var(--border); }
.card__title { font: var(--type-title); letter-spacing: -0.01em; }
.card--hero { position: relative; overflow: hidden; }
.card--soft { background: var(--surface-2); box-shadow: none; }
a.card:hover, .card.is-link:hover { transform: translateY(-1px); border-color: var(--border-strong); text-decoration: none; }
.card__actions-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.card__intro { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }

/* ---------- Tabs: a sunken track, the active tab a raised step ---------- */
.tabs { padding: 4px; gap: 2px; border-radius: var(--radius-lg); background: var(--surface-sunken); border: var(--border-width) solid var(--border); }
.tab { height: 36px; padding: 0 var(--space-4); border-radius: calc(var(--radius-lg) - 5px); color: var(--text-muted); font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.tab:hover { background: var(--surface); color: var(--text); }
.tab.is-active { background: var(--surface-raised); color: var(--text); font-weight: var(--weight-semibold);
  box-shadow: var(--inner-light), 0 1px 2px rgb(0 0 0 / 0.18); }

/* ---------- Tables: hairline rows only; phones get rounded list rows ---------- */
.table th { font: var(--type-meta); font-size: var(--text-sm); color: var(--text-subtle); padding: var(--space-3) var(--space-5); }
.table td { padding: var(--space-3) var(--space-5); }
.table tbody tr.is-clickable:hover td { background: var(--surface-hover); }
@media (max-width: 720px) {
  .table tbody { gap: var(--space-2); padding: var(--space-3); }
  .table tr { border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--inner-light); padding: var(--space-3) var(--space-4); }
}

/* ---------- Badges and chips: tonal pills ---------- */
.badge { height: 26px; padding: 0 10px; gap: 6px; }
.chip { height: 28px; padding: 0 10px; }

/* ---------- Dialogs: a floating card on desktop, a sheet from the bottom on phones ---------- */
.dialog { border-radius: var(--radius-card); background: var(--surface); border: var(--border-width) solid var(--border);
  box-shadow: var(--shadow-float), var(--inner-light); }
.dialog::backdrop { background: color-mix(in oklab, var(--overlay) 100%, black 10%); }
.dialog[open] { animation: dialog-in var(--dur) var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
.dialog__header { padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: 0; }
.dialog__title { font: var(--type-title); font-size: var(--text-lg); letter-spacing: -0.01em; }
.dialog__body { padding: var(--space-3) var(--space-5) var(--space-5); }
.dialog__footer { padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--border); background: var(--surface); }
.dialog--drawer { border-radius: 0; }
.dialog--drawer[open] { animation: slide var(--dur) var(--ease); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
@media (max-width: 720px) {
  .dialog:not(.dialog--drawer) { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92dvh;
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; border-bottom: 0; }
  .dialog:not(.dialog--drawer)[open] { animation: sheet-up var(--dur-slow) var(--ease); }
  .dialog--drawer { margin-top: 12px; height: calc(var(--vvh, 100dvh) - 12px); max-height: calc(var(--vvh, 100dvh) - 12px);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; }
  .dialog--drawer[open] { animation: sheet-up var(--dur-slow) var(--ease); }
  .dialog__header { position: relative; padding-top: var(--space-5); }
  .dialog__header::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
    border-radius: var(--radius-pill); background: var(--border-strong); }
  .dialog__footer .btn { height: 48px; border-radius: var(--radius); }
  .dialog__footer { padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
}

/* ---------- Toasts: a small raised card at the bottom centre ---------- */
#toasts, .dialog-toasts { right: auto; left: 50%; transform: translateX(-50%); bottom: var(--space-5); width: min(420px, calc(100vw - 32px)); }
.toast { width: 100%; min-width: 0; max-width: none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--text); border: var(--border-width) solid var(--border);
  box-shadow: var(--shadow-float), var(--inner-light); font-size: var(--text-sm); font-weight: var(--weight-medium);
  animation: toast-in var(--dur) var(--ease); }
.toast--error { background: color-mix(in oklab, var(--danger) 16%, var(--surface-raised)); color: var(--text);
  border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
.toast--success { background: color-mix(in oklab, var(--success) 16%, var(--surface-raised)); color: var(--text);
  border-color: color-mix(in oklab, var(--success) 40%, transparent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.update-bar { border-radius: var(--radius-lg); box-shadow: var(--shadow-float), var(--inner-light); }

/* ---------- States: empty, loading, error ---------- */
.state { gap: var(--space-3); padding: var(--space-8) var(--space-4); }
.state__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--surface-raised);
  color: var(--text-muted); box-shadow: var(--inner-light); }
.state__icon svg { width: 22px; height: 22px; }
.state__title { font: var(--type-title); color: var(--text); }
.state__text { max-width: 36ch; line-height: 1.5; }
.state .btn, .state .cta { margin-top: var(--space-2); }
.skeleton { border-radius: var(--radius-sm); }
.skeleton--title { height: 20px; width: 40%; }
.skeleton--line { height: 14px; }
.skeleton--card { height: 120px; width: 100%; border-radius: var(--radius-card); }
.skeleton--circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-list { gap: var(--space-3); padding: var(--space-5); }
.skeleton-row { display: flex; align-items: center; gap: var(--space-3); }
.skeleton-row > .skeleton--line { flex: 1; }

/* ---------- Widgets (js/widgets.js) ---------- */
.greeting { display: grid; gap: 2px; }
.greeting__hi { margin: 0; font: var(--type-display); letter-spacing: var(--type-display-tracking); }
.greeting__date { color: var(--text-muted); font: var(--type-meta); }
.sky-band { display: none; }

.metric { display: grid; gap: 2px; min-width: 0; }
.metric__value { font: var(--type-metric); color: var(--text); letter-spacing: -0.01em; }
.metric__value--gold { color: var(--hero); }
.metric__value--hero { font-size: var(--text-hero); font-weight: var(--weight-semibold); letter-spacing: -0.025em; line-height: 1.05; }
.metric__label { font: var(--type-label); letter-spacing: var(--type-label-tracking); color: var(--text-muted); }
.metric__hint { font: var(--type-meta); color: var(--text-subtle); }
.metric.is-warn .metric__value { color: var(--warning); }
.metric.is-bad .metric__value { color: var(--danger); }
.metric.is-good .metric__value { color: var(--success); }

/* A ring: progress around a number. --p is 0..1, set through the CSSOM. */
.ring { --size: 84px; --stroke: 8; position: relative; width: var(--size); height: var(--size); flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring__track { fill: none; stroke: var(--surface-sunken); stroke-width: var(--stroke); }
.ring__fill { fill: none; stroke: var(--accent); stroke-width: var(--stroke); stroke-linecap: round;
  stroke-dasharray: calc(var(--p, 0) * 100) 100; transition: stroke-dasharray var(--dur-slow) var(--ease); }
.ring--gold .ring__fill { stroke: var(--hero); }
.ring--success .ring__fill { stroke: var(--success); }
.ring__center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0; text-align: center; }
.ring__value { font-weight: var(--weight-bold); font-size: calc(var(--size) * 0.24); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ring__label { font-size: calc(var(--size) * 0.13); color: var(--text-muted); font-weight: var(--weight-semibold); }
.ring--lg { --size: 148px; --stroke: 10; }
.ring--sm { --size: 56px; --stroke: 6; }

/* Icon tile: a small rounded well with an outline icon */
.tile { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-items: center; flex: none;
  color: var(--accent); background: var(--accent-soft); box-shadow: var(--inner-light); }
.tile svg { width: 20px; height: 20px; }
.tile--quiet { background: var(--surface-raised); color: var(--text-muted); }
.tile--good { background: var(--success-soft); color: var(--success); }
.tile--warn { background: var(--warning-soft); color: var(--warning); }
.tile--bad { background: var(--danger-soft); color: var(--danger); }

/* The one flame action on a screen */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: 48px; padding: 0 var(--space-5); border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); box-shadow: var(--inner-light-strong);
  font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-base); text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.cta svg { width: 18px; height: 18px; }
.cta:hover { background: var(--accent-hover); text-decoration: none; }
.cta:active { transform: scale(0.98); }
.cta--quiet { background: var(--surface-raised); color: var(--text); border: var(--border-width) solid var(--border); box-shadow: var(--inner-light); }
.cta--quiet:hover { background: var(--surface-hover); }
.cta:disabled { background: var(--disabled-bg); color: var(--disabled-fg); box-shadow: none; cursor: not-allowed; transform: none; }

/* Timeline: the day as a list, a dot per item, a line through them */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-item { position: relative; display: grid; grid-template-columns: 64px 24px 1fr; gap: 0 var(--space-2); align-items: start;
  padding: var(--space-2) 0; color: var(--text); text-decoration: none; }
a.tl-item:hover { text-decoration: none; }
a.tl-item:hover .tl-item__title { color: var(--accent); }
.tl-item__time { font: var(--type-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; padding-top: 2px; text-align: right; }
.tl-item__rail { position: relative; display: grid; justify-items: center; align-self: stretch; }
.tl-item__rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border); }
.tl-item:first-child .tl-item__rail::before { top: 12px; }
.tl-item:last-child .tl-item__rail::before { bottom: auto; height: 12px; }
.tl-item__dot { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%;
  background: var(--surface-raised); border: 2px solid var(--border-strong); }
.tl-item.is-done .tl-item__dot { background: var(--success); border-color: var(--success); }
.tl-item.is-live .tl-item__dot { background: var(--accent); border-color: var(--accent); }
.tl-item.is-next .tl-item__dot { border-color: var(--accent); }
.tl-item__body { display: grid; gap: 2px; min-width: 0; padding-bottom: var(--space-2); }
.tl-item__title { font-weight: var(--weight-semibold); }
.tl-item__meta { font: var(--type-meta); color: var(--text-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.tl-item.is-done .tl-item__title { color: var(--text-muted); }
.tl-bar { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; max-width: 260px; }
.tl-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--accent); }

/* Status pill: a word with a still dot */
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill--live { color: var(--accent); background: var(--accent-soft); }
.status-pill--live i { animation: none; }
.status-pill--good { color: var(--success); background: var(--success-soft); }
.status-pill--warn { color: var(--warning); background: var(--warning-soft); }
.status-pill--bad { color: var(--danger); background: var(--danger-soft); }
@keyframes ember-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* A row inside a card: tile · text · trailing */
.row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.row__grow { flex: 1; min-width: 0; }
.row__title { margin: 0; font-weight: var(--weight-semibold); font-size: var(--text-md); }
.row__sub { margin: 2px 0 0; color: var(--text-muted); font: var(--type-meta); }
.row__title, .row__sub { overflow: hidden; text-overflow: ellipsis; }
a.row-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius); padding: var(--space-2); margin: calc(-1 * var(--space-2)); }
a.row-link:hover { background: var(--surface-hover); text-decoration: none; }

/* Attention list: a number, words, an arrow */
.attn { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.attn__row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2);
  border-radius: var(--radius); color: var(--text); text-decoration: none; }
.attn__row:hover { background: var(--surface-hover); text-decoration: none; }
.attn__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums; background: var(--surface-raised); color: var(--text); box-shadow: var(--inner-light); }
.attn__row--warning .attn__n { background: var(--warning-soft); color: var(--warning); }
.attn__row--danger .attn__n { background: var(--danger-soft); color: var(--danger); }
.attn__row--info .attn__n { background: var(--info-soft); color: var(--info); }
.attn__text { min-width: 0; }
.attn__go { color: var(--text-subtle); display: inline-flex; }
.attn__go svg { width: 18px; height: 18px; }
.attn__foot { margin-top: var(--space-2); }

/* ---------- Today (owner): js/pages/overview.js ---------- */
.today { display: grid; gap: var(--space-5); }
.today__head { display: grid; gap: var(--space-3); }
.today__grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1024px) { .today__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.today__col { display: grid; gap: var(--space-5); min-width: 0; }
.today__hero { padding: var(--space-5) var(--space-5) 0; }
.today__title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.today__hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.delta { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.delta svg { width: 16px; height: 16px; }
.delta--up { color: var(--success); background: var(--success-soft); }
.delta--down { color: var(--text-muted); background: var(--surface-raised); }
.curve { display: block; width: calc(100% + 2 * var(--space-5)); height: 92px; margin: var(--space-3) calc(-1 * var(--space-5)) 0; color: rgb(var(--v-glow)); }
.curve__line { fill: none; stroke: currentColor; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.curve__dot { fill: var(--hero); stroke: var(--surface); stroke-width: 3; }
.curve--empty { height: auto; width: auto; margin: var(--space-4) 0; color: var(--text-muted); font-weight: var(--weight-semibold); }   /* words, not the bleeding line: inside the card's padding */
/* 🏠 Home's day card (owner, 2026-11-04: "glam it up", every number a door): the amount and three raised tiles are links */
.today__amount { display: grid; gap: var(--space-1); color: inherit; text-decoration: none; border-radius: var(--radius); }
.today__amount:hover { text-decoration: none; }
.today__amount .metric__label { display: inline-flex; align-items: center; gap: 2px; transition: color var(--dur-fast) var(--ease); }
.today__amount .metric__label svg { width: 16px; height: 16px; opacity: .7; transition: transform var(--dur-fast) var(--ease); }
.today__amount:hover .metric__label { color: var(--text); }
.today__amount:hover .metric__label svg { transform: translateX(2px); }
.today__compare { display: grid; justify-items: end; gap: var(--space-1); }
.today__vs { font: var(--type-meta); color: var(--text-muted); white-space: nowrap; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.kpi { position: relative; display: grid; gap: 2px; justify-items: start; min-height: var(--tap); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--inner-light); color: var(--text);
  text-decoration: none; text-align: left; transition: background var(--dur-fast) var(--ease); }
.kpi:hover { background: var(--surface-hover); text-decoration: none; }
.kpi b { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.kpi span { font: var(--type-meta); color: var(--text-muted); }
.kpi .kpi__go { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; color: var(--text-subtle); }
.kpi .kpi__go svg { width: 16px; height: 16px; }
.kpi.is-warn { background: var(--warning-soft); }
.kpi.is-warn b { color: var(--warning); }
.kpi.is-bad { background: var(--danger-soft); }
.kpi.is-bad b { color: var(--danger); }
/* Orders: the list a number on Home opened, named, with the way back to every order */
.view-chip { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding: 4px 4px 4px var(--space-3);
  border-radius: var(--radius-pill); background: var(--accent-soft); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.view-chip__clear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-pill); color: inherit; }
.view-chip__clear:hover { background: var(--surface-hover); }
.view-chip__clear svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .today__amount:hover .metric__label svg { transform: none; } }
.today__ring-row { display: flex; align-items: center; gap: var(--space-5); }
.today__ring-text { display: grid; gap: var(--space-1); min-width: 0; }
.today__open { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.today [data-section="setup"] .card__header .btn-row { flex-wrap: nowrap; }   /* Setup guide and its ✕ stay on one line */
/* 🏠 The top of Home: the open / closed switch as a quiet pill, and the one way into the web shop beside it */
.home-top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.open-switch { min-height: var(--tap); padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-pill);
  background: var(--surface-raised); box-shadow: var(--inner-light); font-weight: var(--weight-semibold); }
.open-switch:not(.is-open) { background: var(--danger-soft); }
.open-switch:not(.is-open) span { color: var(--danger); }
.stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat__value { font: var(--type-metric); letter-spacing: -0.02em; }
.stat--gold .stat__value { color: var(--hero); }
.today__more { display: grid; gap: var(--space-5); }
.today__more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; color: var(--text-muted); font-weight: var(--weight-semibold); }
.today__more > summary::-webkit-details-marker { display: none; }
.today__more > summary svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.today__more[open] > summary svg { transform: rotate(90deg); }
.today__more > summary:hover { color: var(--text); }
@media (max-width: 720px) {
  .today__hero { padding: var(--space-4) var(--space-4) 0; }
  .curve:not(.curve--empty) { width: calc(100% + 2 * var(--space-4)); margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); }
  .kpis { margin: var(--space-3) 0 var(--space-4); }
  .kpi { padding: var(--space-3); }
}

/* ---------- Go (agent): js/pages/agent.js ---------- */
.go { display: grid; gap: var(--space-4); max-width: 880px; }
.go__sections { display: grid; gap: var(--space-4); }
.go__board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.go__stat { display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius-card); background: var(--surface);
  border: var(--border-width) solid var(--border); box-shadow: var(--inner-light); color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.go__stat:hover { background: var(--surface-hover); text-decoration: none; }
.go__stat.is-active { border-color: var(--accent); }
.go__stat b { font: var(--type-metric); }
.go__stat span { font: var(--type-meta); color: var(--text-muted); }
.go__stat.is-gold b { color: var(--hero); }
.go__stat .metric__label { text-transform: none; letter-spacing: 0; font: var(--type-meta); color: var(--text-muted); }
.go__stat .metric__hint { color: var(--accent); }
.go__section { display: grid; gap: var(--space-3); }
.go__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.go__section-head h2 { margin: 0; font: var(--type-title); font-size: var(--text-lg); }
.go__section-head a { font-weight: var(--weight-semibold); }
.go .agent-list { padding: 0; }
.go .agent-card { border-radius: var(--radius-card); padding-left: var(--space-4); }
.go .agent-card::before { display: none; }
.go__empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-muted); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--inner-light); }
.go__empty strong { display: block; color: var(--text); margin-bottom: 2px; }
@media (max-width: 720px) {
  .go__board { gap: var(--space-2); }
  .go__stat { padding: var(--space-3); }
  .go__stat b { font-size: var(--text-xl); }
}

/* 🛵 The driver's screen (Uber's flow, js/pages/agent.js + js/agent-board.js): the round Go (js/widgets.js goButton),
   the requests' quiet line while Go is off, the trip's steps, the Share my location row, the slim bar under the trip
   and the On my way sheet. Tokens only; the ring breathes while on and holds still when motion is off. */
.go-hero { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-4) 0 var(--space-2); text-align: center; }
.go-btn { position: relative; width: 112px; height: 112px; border-radius: 50%; border: 0; cursor: pointer; font: inherit;
  display: grid; place-items: center; background: var(--surface-raised); color: var(--text);
  box-shadow: var(--inner-light), 0 0 0 8px var(--surface);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.go-btn:hover { background: var(--surface-hover); }
.go-btn:active { transform: scale(0.96); }
.go-btn:focus-visible { outline: none; box-shadow: var(--inner-light), 0 0 0 8px var(--surface), 0 0 0 11px var(--accent-ring); }
.go-btn__label { font-weight: var(--weight-bold); font-size: var(--text-2xl); letter-spacing: -0.02em; line-height: 1; }
.go-btn__ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--border); pointer-events: none; }
.go-btn.is-on { background: var(--accent); color: var(--on-accent); box-shadow: var(--inner-light-strong), 0 0 0 8px var(--accent-soft); }
.go-btn.is-on:hover { background: var(--accent-hover); }
.go-btn.is-on .go-btn__ring { border-color: var(--accent); animation: go-breathe 2.4s var(--ease-in-out) infinite; }
@keyframes go-breathe { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.25; transform: scale(1.12); } }
.go-hero__help { margin: 0; max-width: 36ch; color: var(--text-muted); font: var(--type-meta); }
.go__off { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-card);
  background: var(--surface); border: var(--border-width) solid var(--border); box-shadow: var(--inner-light); color: var(--text-muted);
  font: var(--type-meta); text-decoration: none; }
.go__off svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.go__off:hover { background: var(--surface-hover); text-decoration: none; }
.trip-steps { display: grid; gap: var(--space-2); margin-top: var(--space-1); cursor: default; }
.trip-steps__go { min-height: 56px; font-size: var(--text-md); }
.trip-steps__help { margin: 0; text-align: center; color: var(--text-muted); font: var(--type-meta); }
.go-share { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-lg); background: var(--surface-2); border: var(--border-width) solid var(--border); cursor: pointer; }
.go-share__icon { width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; background: var(--surface);
  color: var(--accent); box-shadow: var(--inner-light); }   /* one step off the row in Daylight too */
.go-share__icon svg { width: 18px; height: 18px; }
.go-share__text { display: grid; gap: 2px; min-width: 0; }
.go-share__text strong { font-weight: var(--weight-semibold); }
.trip-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-top: var(--space-2);
  border-radius: var(--radius-pill); background: var(--surface-2); border: var(--border-width) solid var(--border); }
.trip-bar__tile { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 48px; border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--text); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.trip-bar__tile svg { width: 20px; height: 20px; color: var(--accent); }
.trip-bar__tile:hover { background: var(--surface-hover); text-decoration: none; }
.trip-bar__tile:active { transform: scale(0.97); }
.trip-bar__tile:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.agent-card.is-trip { border-color: var(--accent); }
.agent-list--compact .trip-steps { display: none; }
.agent-list--compact .trip-bar { margin: 0; grid-column: 3; grid-row: 2; display: flex; padding: 0; border: 0; background: none; }
.agent-list--compact .trip-bar__tile { width: 44px; min-height: 44px; border-radius: 12px; background: var(--surface-2); }
.agent-list--compact .trip-bar__tile span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.eta-dialog { display: grid; gap: var(--space-3); }
.eta-dialog__intro { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.eta-dialog__share { font-size: var(--text-base); }
.eta-dialog__or { margin: 0; text-align: center; color: var(--text-subtle); font: var(--type-meta); }
.eta-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.eta-pick { min-height: 48px; border-radius: var(--radius); border: var(--border-width) solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
.eta-pick:hover { background: var(--surface-hover); }
.eta-pick:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.eta-dialog__typed { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }
.go__section--trip .agent-list { grid-template-columns: minmax(0, 1fr); }   /* the one trip fills the column, desktop too */
@media (prefers-reduced-motion: reduce) { .go-btn.is-on .go-btn__ring { animation: none; } .go-btn, .trip-bar__tile { transition: none; } }
html[data-a11y-motion] .go-btn.is-on .go-btn__ring { animation: none; }

/* ---------- Platform-owned pages: /join, the sign-in page, help ---------- */
.login__card { border-radius: var(--radius-card); border-color: var(--border); box-shadow: var(--shadow-float), var(--inner-light); }
.login__tick { background: var(--accent-soft); color: var(--accent); }
.login__headline { font-weight: var(--weight-semibold); letter-spacing: -0.025em; }
.help-article, .doc { max-width: 72ch; }
.doc a, .field__help a, .help-article a, .card__intro a, .card p a:not(.btn):not(.help-link) { text-decoration: underline; text-underline-offset: 0.16em; }   /* a link in running text is told apart by more than colour (WCAG 1.4.1) */
.setup-step { border-radius: var(--radius-lg); box-shadow: var(--inner-light); }
.setup-step__num { width: 36px; height: 36px; border-radius: 12px; box-shadow: var(--inner-light); }
.help-row { padding: var(--space-3) 0; }
.help-article__cat { text-transform: none; }

/* ---------- A fold: a quiet line that opens a card ---------- */
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); font: var(--type-title);
  color: var(--text-muted); padding: var(--space-2) 0; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease); }
.fold[open] > summary::before { transform: rotate(45deg); }
.fold { scroll-margin-top: calc(var(--topbar-height) + var(--space-2)); }
.fold > summary:hover { color: var(--text); }
.fold[open] > summary { margin-bottom: var(--space-3); }

/* ---------- Settings, Team, Products: tabs as a column on wide screens, settings rows with the control on the right ---------- */
.settings-page > .settings-tabs .tabs { width: 100%; }
@media (min-width: 1024px) {
  .settings-page { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .settings-page > .settings-tabs { position: sticky; top: calc(var(--topbar-height) + var(--space-2)); }
  .settings-page > .settings-tabs .tabs { flex-direction: column; background: none; border: 0; padding: 0; gap: 2px; width: 100%; }
  .settings-page > .settings-tabs .tab { justify-content: flex-start; height: 40px; padding: 0 var(--space-3); width: 100%; border-radius: var(--radius); }
  .settings-page > .settings-tabs .tab.is-active { background: var(--surface); box-shadow: var(--inner-light), 0 0 0 1px var(--border); }
}
@container (min-width: 600px) {
  .settings-page .form > .field:not(.field--inline):not(:has(> .textarea)):has(> :is(.input, .select, .toggle, .segmented, .input--color)) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
    grid-template-areas: "label control" "help control"; column-gap: var(--space-5); row-gap: 2px; align-items: center; }
  .settings-page .form > .field:not(.field--inline):not(:has(> .textarea)):has(> :is(.input, .select, .toggle, .segmented, .input--color)) > :is(.field__label, .field__head) { grid-area: label; }
  .settings-page .form > .field:not(.field--inline):not(:has(> .textarea)):has(> :is(.input, .select, .toggle, .segmented, .input--color)) > .field__help { grid-area: help; }
  .settings-page .form > .field:not(.field--inline):not(:has(> .textarea)):has(> :is(.input, .select, .toggle, .segmented, .input--color)) > :is(.input, .select, .btn-row, .segmented, .input--color) {
    grid-area: control; justify-self: end; width: 100%; max-width: 340px; }
  .settings-page .form > .field:not(.field--inline):not(:has(> .textarea)):has(> :is(.input, .select, .toggle, .segmented, .input--color)) > .toggle { grid-area: control; justify-self: end; }
  .settings-page .form > .field:not(.field--inline):not(:has(> .textarea)):has(> :is(.input, .select, .toggle, .segmented, .input--color)):has(> .toggle) { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .ring__fill, .tl-bar i, .btn, .card, .cta { transition: none; }
  .content > .page-head, .content .stack > *, .content .today__col > *, .content .grid-2 > *, .content .go > * { animation: none; }
  .dialog[open], .dialog--drawer[open], .toast, .skeleton { animation: none; }
  .btn:active, .cta:active { transform: none; }
}
.state--error .state__icon { background: var(--danger-soft); color: var(--danger); }
.skeleton-row > .skeleton--line[data-w="1"] { max-width: 82%; }
.skeleton-row > .skeleton--line[data-w="2"] { max-width: 64%; }

/* ---------- Pass 3, the visible layer: the dashboard should read as new at a glance, not only up close ---------- */
/* The shell: a raised side panel with icon tiles, the shop's mark large */
.sidebar { background: var(--surface); border-right: var(--border-width) solid var(--border); padding: var(--space-5) var(--space-3); }
.brand { min-height: 48px; padding: var(--space-1) var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--border); margin-bottom: var(--space-2); }
.brand__mark, .brand__logo { width: 40px; height: 40px; border-radius: 13px; }
.brand__name { font-size: var(--text-lg); letter-spacing: -0.01em; }
.nav__link { height: 44px; gap: var(--space-3); padding: 0 var(--space-2); border-radius: var(--radius); }
.nav__link svg { width: 18px; height: 18px; padding: 5px; box-sizing: content-box; border-radius: 9px; background: var(--surface-sunken); color: var(--text-muted); }
.nav__link:hover svg { background: var(--surface-raised); color: var(--text); }
.nav__link.is-active { background: var(--accent-soft); color: var(--text); box-shadow: none; }
.nav__link.is-active svg { background: var(--accent); color: var(--on-accent); }
.nav__label { padding: var(--space-5) var(--space-2) var(--space-1); }
.sidebar__footer { border-top: var(--border-width) solid var(--border); padding-top: var(--space-4); }
.topbar { background: var(--bg); }
.topbar > .kbd-search { flex: 0 1 360px; }
@media (max-width: 860px) { .sidebar { border-radius: 0 var(--radius-sheet) var(--radius-sheet) 0; } }

/* The page head carries the stamp: an ember rule under the title */
.page-head__title, .greeting__hi { font-size: clamp(1.75rem, 2.9vw, 2rem); }
.page-head__text::after, .greeting::after { content: ""; display: block; width: 44px; height: 3px; margin-top: var(--space-3); border-radius: 2px; background: var(--accent); }
.page-head { margin-bottom: var(--space-6); }

/* Cards: two tones, the header a band on the raised step, the body on the card */
.card__header { background: var(--surface-2); border-bottom: var(--border-width) solid var(--border); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card) var(--radius-card) 0 0; min-height: 60px; }
.card__header + .card__body { padding-top: var(--space-5); }
.card__header + .card__body--flush { padding-top: 0; border-top: 0; }
.card__title { font-size: var(--text-md); }
.card--hero .card__header, .today__hero .card__header { background: transparent; border-bottom: 0; }
.content, .stack { gap: var(--space-6); }

/* Today: the day's number is the one large thing on the screen */
.metric__value--hero { font-size: clamp(2.75rem, 5.5vw, 3.5rem); letter-spacing: -0.03em; }
.today__hero { padding-top: var(--space-6); }
.kpis { margin-top: var(--space-4); }
.kpi b { font-size: var(--text-xl); }
.kpi span { font-size: var(--text-sm); }

/* Lists and tables: taller rows, a quiet divider, the first column carries the weight */
.table td { padding: var(--space-4) var(--space-5); }
.table td:first-child { font-weight: var(--weight-medium); }
.table th { padding: var(--space-3) var(--space-5); background: var(--surface-2); }
.table thead th:first-child { border-radius: 0; }

/* Controls: the primary action gets a touch more presence */
.btn--primary, .cta { font-weight: var(--weight-semibold); letter-spacing: 0.005em; }
.btn--lg, .cta { min-height: 48px; }

/* Phones: the floating bar sits on the raised step with a lit edge; cards keep their bands */
@media (max-width: 720px) {
  .card__header { padding: var(--space-4); }
  .page-head__title, .greeting__hi { font-size: 1.75rem; }
}

/* ---------- Less reading (owner, 2026-10-31): descriptions live behind a small info control, not under every control ---------- */
.settings-page .form, .settings-page .form__grid, .settings-page .hours__row, .settings-page .window-card, .settings-page .rank-row,
.settings-page .options-editor { container-type: inline-size; }
.field__head { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.field__info { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-subtle); cursor: pointer; }
.field__info svg { width: 15px; height: 15px; }
.field__info:hover, .field.is-open .field__info { color: var(--accent); background: var(--accent-soft); }
.field > .field__help:not(.field__error):not(.is-ok) { display: none; }   /* help under a labelled control; state texts elsewhere stay */
.field.is-open > .field__help, .field.is-open > .field__head ~ .field__help { display: block; }
.card__intro, .card__body > .form > p.field__help:first-child, .card__body > p.field__help:first-child,
.card__body > .card__tools + p.field__help { display: none; }
@media (pointer: coarse) { .field__info { width: 28px; height: 28px; } }

/* ---------- The owner's five questions (2026-10-31): less to read, icons not emoji, no empty bands ---------- */
.help-link--icon { width: 24px; height: 24px; padding: 0; margin: 0; border-radius: 50%; justify-content: center; color: var(--text-subtle); }
.help-link--icon svg { width: 15px; height: 15px; }
.help-link--icon:hover { color: var(--accent); background: var(--accent-soft); }
.card__body:empty { display: none; }
.card:has(> .card__body:empty) > .card__header { border-radius: inherit; border-bottom-color: transparent; }
:is(.content, .dialog) details:not(.fold):not(.today__more):not(.more):not(.faq__item):not(.card--fold) > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); }
:is(.content, .dialog) details:not(.fold):not(.today__more):not(.more):not(.faq__item):not(.card--fold) > summary::-webkit-details-marker { display: none; }
:is(.content, .dialog) details:not(.fold):not(.today__more):not(.more):not(.faq__item):not(.card--fold) > summary::before { content: ""; flex: none; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); transition: transform var(--dur-fast) var(--ease); }
:is(.content, .dialog) details:not(.fold):not(.today__more):not(.more):not(.faq__item):not(.card--fold)[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.health-tile__name { display: flex; align-items: center; gap: var(--space-2); }
.health-tile__name svg { width: 16px; height: 16px; flex: none; color: var(--success); }
.health-tile--error .health-tile__name svg { color: var(--danger); }
.health-tile--warning .health-tile__name svg { color: var(--warning); }

/* ---------- Pass 4 (owner, 2026-11-01): the same care as the front page, on every screen ---------- */
/* One rhythm: the title, its ember rule, then the page, the same distance on every screen */
.content > .page-head { margin-bottom: 0; min-height: 0; }
.page-head__text::after, .greeting::after { margin-top: var(--space-2); }
.page-intro { margin: 0; max-width: 62ch; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }

/* A card that folds: its header is the switch, and it opens smoothly where the browser can */
.card--fold > summary { list-style: none; cursor: pointer; border-radius: var(--radius-card); border-bottom: 0; transition: background var(--dur-fast) var(--ease); }
.card--fold > summary::-webkit-details-marker { display: none; }
.card--fold > summary:hover { background: var(--surface-raised); }
.card--fold[open] > summary { border-radius: var(--radius-card) var(--radius-card) 0 0; border-bottom: var(--border-width) solid var(--border); }
.card__chev { display: inline-flex; color: var(--text-subtle); transition: transform var(--dur) var(--ease); }
.card__chev svg { width: 18px; height: 18px; }
.card--fold[open] .card__chev { transform: rotate(180deg); }
@supports (interpolate-size: allow-keywords) {
  .card--fold { interpolate-size: allow-keywords; }
  .card--fold::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; }
  .card--fold[open]::details-content { block-size: auto; }
}
.fold-grid { display: grid; gap: var(--space-3); align-items: start; }
@media (min-width: 900px) { .fold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fold-grid > .card--fold[open] { grid-column: 1 / -1; } }

/* Stars are drawn, never emoji; Raphael's button wears his eye */
.stars { display: inline-flex; gap: 1px; color: var(--hero); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }
.raphael-eye { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--eye-cream) 0%, var(--hero) 38%, color-mix(in oklab, var(--hero) 45%, black) 78%); }
.raphael-eye i { width: 7px; height: 7px; border-radius: 50%; background: var(--eye-pupil); }

/* Phones: a table's row is a compact card, not a tall stack. It reads like a phone list instead of a squeezed spreadsheet. */
@media (max-width: 720px) {
  .table tbody { gap: var(--space-2); padding: var(--space-2); }
  .table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--space-3); padding: var(--space-3) var(--space-4); align-items: start; transition: transform var(--dur-fast) var(--ease); }
  .table td { display: grid; justify-items: start; align-content: start; gap: 1px; padding: 0; text-align: left; font-size: var(--text-sm); }
  .table td::before { max-width: none; color: var(--text-subtle); }
  .table td.is-blank, .table td.td--hide { display: none; }
  .table td:first-child { grid-column: 1 / -1; padding: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .table tr:has(> .td--corner) > td:first-child { grid-column: 1; }
  .table td.td--corner { grid-column: 2; grid-row: 1; justify-items: end; }
  .table td.td--corner::before { content: none; }
  .table td.td--wide { grid-column: 1 / -1; }
  .table td.td--wide::before { content: none; }
  .table td.actions, .table td[data-label=""] { grid-column: 2; display: flex; justify-content: flex-end; }
  .table td .btn-row { flex-wrap: wrap; }
  .product-cell .field__help { display: none; }
}
@media (prefers-reduced-motion: reduce) { .card--fold::details-content, .card__chev, .table tr { transition: none; } }

/* A folding card has its own arrow, and its header holds one line on a phone */
.card--fold > summary .btn-row { flex-wrap: nowrap; flex: none; }
.card--fold .card__heading { flex-wrap: nowrap; flex: 1 1 0; }
.card--fold > summary .badge { white-space: nowrap; }
@media (max-width: 480px) { .card--fold .card__title { font-size: var(--text-base); } }

/* Thumbs: the small marks keep their looks and get a full-size place to land */
@media (pointer: coarse) {
  .help-link--icon, .field__info { position: relative; }
  .help-link--icon::after, .field__info::after { content: ""; position: absolute; inset: -11px; }
  .tool, .edit-tool, .chip, .phone-sheet__tab, .phone-sheet__close { min-height: 40px; min-width: 40px; }
  .chip { height: auto; }
  .rte__bar .tool { width: 40px; height: 40px; }
  .table td a:not(.btn) { display: inline-block; padding-block: 6px; }
}

/* The list's intro and the toolbar over the phone sit quietly on one line where they can */
.seg-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.seg-row .chip { background: var(--surface-raised); border: var(--border-width) solid var(--border); color: var(--text-muted); font-weight: var(--weight-medium); cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.seg-row .chip:hover { color: var(--text); border-color: var(--border-strong); }
@media (max-width: 720px) {
  .content .btn-row > .btn--ghost.btn--sm { padding-inline: var(--space-2); }
}

/* ---------- Folding the menu to its icons (wide screens): the button shows only when the menu is pointed at or focused ---------- */
.brand { position: relative; }
.sidebar__fold { margin-left: auto; opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.sidebar__fold svg { transform: rotate(180deg); transition: transform var(--dur) var(--ease); }
.sidebar:hover .sidebar__fold, .sidebar:focus-within .sidebar__fold { opacity: 1; }
.card__close { color: var(--text-subtle); }
@media (min-width: 861px) {
  .shell { transition: grid-template-columns var(--dur) var(--ease); }
  .shell.is-rail { grid-template-columns: 76px 1fr; }
  .is-rail .sidebar { padding-inline: var(--space-2); }
  .is-rail .brand { flex-direction: column; gap: var(--space-2); padding-inline: 0; }
  .is-rail .sidebar__fold svg { transform: none; }
  .is-rail .brand__name, .is-rail .nav__text, .is-rail .nav__label, .is-rail .sidebar__footer > :not(.account),
  .is-rail .account > :not(.account__avatar) { display: none; }
  .is-rail .nav__link, .is-rail .account { justify-content: center; padding-inline: 0; }
  .is-rail .nav__label + .nav__link { margin-top: var(--space-3); }
}
@media (max-width: 860px) { .sidebar__fold { display: none; } }
@media (prefers-reduced-motion: reduce) { .shell, .sidebar__fold svg { transition: none; } }

/* the menu item's small menu (right-click or press and hold): js/editor.js navMenu */
.nav-menu { position: fixed; z-index: 200; min-width: 200px; padding: 6px; display: grid; gap: 2px; border-radius: 14px;
  background: var(--surface); border: var(--border-width) solid var(--border); box-shadow: var(--shadow-lg);
  animation: nav-menu-in var(--dur-fast) var(--ease); }
.nav-menu__item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: var(--text);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.nav-menu__item:hover, .nav-menu__item:focus-visible { background: var(--surface-2); outline: none; }
.nav-menu__item:disabled { color: var(--text-subtle); cursor: default; background: none; }
.nav-menu__sep { height: 1px; margin: 4px 6px; background: var(--border); }
@keyframes nav-menu-in { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .nav-menu { animation: none; } }

/* ---------- Design leftovers (2026-11-03): one switch per header, readable small print, strips that don't chop ---------- */
/* A folding card's header only opens it; its help and anything else to press open with it, in one row on top of the body */
.card__tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.card__tools > .btn-row { margin-left: auto; }
.card__tools > .help-link:first-child { margin-left: -8px; }   /* its icon lines up with the text below; only the hover pill reaches out */
.card__body--flush > .card__tools { margin: 0; padding: var(--space-3) var(--space-5); border-bottom: var(--border-width) solid var(--border); }
/* Small print one lightness step up (a raised row, a tinted status, a phone's table row): --text-subtle keeps 4.5:1 on a
   card but drops to 4.1:1 there in the dark theme, so inside these it is the muted ash (WCAG 1.4.3) */
.option-row, .hud__status, .setup-step.is-next { --text-subtle: var(--text-muted); }
@media (max-width: 720px) { .table tr { --text-subtle: var(--text-muted); } }
/* Two tabs sharing a strip: each takes half and its words wrap instead of being chopped */
.tabs--fit { width: 100%; }
.tabs--fit > .tab { flex: 1 1 0; min-width: 0; height: auto; min-height: 36px; padding-block: 6px; white-space: normal; text-align: center; line-height: 1.25; }
/* Small tools draw Lucide icons, centred */
.tool { display: inline-grid; place-items: center; }
.tool svg, .setup-step__num svg { width: 16px; height: 16px; }