/* =====================================================================
   Elvatio OS app layer. Everything visual comes from tokens.css (the
   "Warm Horizon" design system); this file adds page layout, the states the
   live data needs (unknown, stale, offline, lock) and a few components the
   reference mockup did not have (sheets, popover, tables, funnel, feed).
   No inline styles anywhere (strict CSP): sizes are applied from data-* by JS.
   ===================================================================== */

/* ---------- extra status markers (system checks and sessions) ---------- */
.st--look { width: 8px; height: 8px; border-radius: 1.5px; transform: rotate(45deg) scale(.86); box-shadow: inset 0 0 0 1.6px var(--champ-deep); background: transparent; }
.st--late { background: var(--ember-deep); box-shadow: 0 0 0 3px rgba(217, 111, 67, .18); }
.st--off { box-shadow: inset 0 0 0 1.4px var(--ash); }
.st--unknown { border: 1.5px dashed var(--ash); }
.st--paused { background: var(--ash); opacity: .8; }
.st--stuck { background: var(--champ-deep); animation: st-stuck 5s ease-in-out infinite; }
.st--static { animation: none !important; }
@keyframes st-stuck { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 166, 106, .35); } 50% { box-shadow: 0 0 0 5px rgba(201, 166, 106, 0); } }
.st--lg.st--look, .st--lg.st--you { width: 9px; height: 9px; }

/* ---------- shell additions ---------- */
.view { animation: rise 600ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tools { position: absolute; right: var(--gutter); top: 26px; z-index: 5; }
.head-row { display: flex; align-items: center; gap: 12px; min-height: 36px; padding-right: 420px; flex-wrap: wrap; }
.head-row .meta { letter-spacing: .08em; text-transform: uppercase; }
.hero .h1 { margin-top: 14px; }
.page-head { display: flex; align-items: flex-end; gap: 24px; margin-top: 14px; }
.page-head .grow { flex: 1; min-width: 0; }
.page-head .side-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.group { margin-top: 32px; }
.list { display: flex; flex-direction: column; gap: 10px; }
.desk-only { }
.mobile-only { display: none; }
.nav a .i, .nav .nav-more .i { flex: none; }
.nav a[hidden] { display: none; }
.me .r { display: flex; align-items: center; gap: 6px; }
.me .r.is-stale { color: var(--champ-deep); }
.clock-btn { font: inherit; }
.m-top .brand-name small { display: none; }
.m-icon .dotn { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); background: var(--ember); }

/* freshness and state banners (grey, never red) */
.banner { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding: 11px 14px; border-radius: var(--r-sm); background: rgba(140, 130, 119, .10); border: 1px solid rgba(140, 130, 119, .26); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.banner .st { flex: none; }
.banner b { color: var(--ink); font-weight: 500; }
.banners:empty { display: none; }
.sec-stale { margin: 14px 0 0; }
.asof { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
body.is-stale .st--working, body.is-stale .st--done, body.is-stale .st--look { filter: saturate(.25); }

/* unknown: lowercase, muted, dashed underline, tap explains */
.unk { color: var(--ink-3); text-decoration: underline dashed rgba(154, 142, 128, .7); text-underline-offset: 3px; text-decoration-thickness: 1px; font: inherit; cursor: help; padding: 0; background: none; border: 0; }
.unk:hover { color: var(--ink-2); }

/* popover (unknown reasons, dock taps on touch, snooze menu) */
.pop { position: fixed; z-index: var(--z-toast); max-width: 300px; padding: 11px 13px; border-radius: 13px; background: var(--surface-3); border: 1px solid var(--line-2); box-shadow: var(--e-2); font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.5; display: none; }
.pop.on { display: block; animation: fade-in 180ms var(--ease); }
.pop b { color: var(--ink); font-weight: 500; }
.pop .menu { display: flex; flex-direction: column; gap: 2px; margin: -4px -6px; }
.pop .menu button { text-align: left; padding: 9px 10px; border-radius: 9px; color: var(--ink-2); font-size: 13.5px; display: flex; align-items: center; gap: 9px; min-height: 40px; }
.pop .menu button:hover, .pop .menu button:focus-visible { background: rgba(240, 222, 196, .06); color: var(--ink); }
.pop .menu .sub { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ---------- lock screen ---------- */
.lock { position: fixed; inset: 0; z-index: calc(var(--z-focus) + 5); display: none; place-items: center; padding: 24px 16px; background: radial-gradient(700px 420px at 50% 30%, rgba(240, 138, 93, .10), transparent 70%), var(--bg-0); }
.lock.on { display: grid; }
.lock__card { width: min(460px, 100%); padding: 30px 28px 26px; }
.lock__card .mark { width: 40px; height: 40px; border-radius: 12px; }
.lock__card .mark svg { width: 26px; height: 26px; }
.lock__card h1 { font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.05; margin: 18px 0 0; }
.lock__card p { color: var(--ink-2); margin: 10px 0 0; font-size: 15px; }
.lock__form { display: flex; gap: 8px; margin-top: 22px; }
.field { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: var(--r-pill); background: rgba(240, 222, 196, .04); border: 1px solid var(--line-2); color: var(--ink); outline: 0; font-size: 15px; }
.field:focus { border-color: rgba(232, 203, 150, .45); box-shadow: 0 0 0 3px rgba(232, 203, 150, .10); }
.field::placeholder { color: var(--ink-3); }
.lock__err { min-height: 20px; margin-top: 10px; font-size: var(--fs-meta); color: var(--champ-deep); }
.lock .btn { height: 44px; }

/* ---------- skeleton (first load, no cache) ---------- */
.sk { border-radius: var(--r-md); background: linear-gradient(90deg, rgba(240, 222, 196, .035), rgba(240, 222, 196, .075), rgba(240, 222, 196, .035)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk--h1 { height: 60px; width: min(620px, 90%); margin-top: 18px; border-radius: 14px; }
.sk--line { height: 18px; width: min(420px, 70%); margin-top: 14px; }
.sk--card { height: 150px; margin-top: 12px; border-radius: var(--r-lg); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- home ---------- */
.lede .sys { color: var(--ink-3); }
.need__meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-meta); color: var(--ink-3); }
.need__meta span { display: inline-flex; align-items: center; gap: 7px; }
.need__meta .i { width: 14px; height: 14px; color: var(--champ-deep); }
.need__meta .cost { color: var(--ink-2); }
.newtag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--champ); padding: 2px 7px; border-radius: var(--r-pill); background: var(--champ-soft); }
.need__foot .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.need__note { margin-top: 10px; display: none; }
.need__note.on { display: flex; gap: 8px; }
.need__note .field { height: 40px; font-size: 14px; }
.need .btn[disabled] { opacity: .45; pointer-events: none; }
.need__receipt { display: none; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); padding: 4px 0; }
.need.is-sent .need__body { display: none; }
.need.is-sent .need__receipt { display: flex; }
.need.is-sent { grid-template-columns: 38px minmax(0, 1fr); }
.need__receipt .ck { flex: none; }
.btn--note { color: var(--ink-3); padding: 0 8px; height: 34px; font-size: 13px; }
.btn--note:hover { color: var(--ink); }
.queue-line button, .wait-line { font: inherit; color: inherit; text-align: left; }
.queue-line button { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.wait-line { display: flex; align-items: flex-start; gap: 9px; margin: 10px 4px 0; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.5; border-radius: 8px; }
.wait-line:hover { color: var(--ink-2); }
.wait-line .st { margin-top: 6px; }
.brief__list li a.btn { height: 28px; font-size: 12.5px; padding: 0 11px; margin-left: 8px; vertical-align: 1px; }
.brief__next { margin-top: 6px; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.45; }
.brief__foot { flex-direction: column; align-items: flex-start; gap: 2px; }
.brief__foot .meta { margin-left: 0; }
.redline { margin: 12px 4px 0; font-size: var(--fs-sm); color: var(--ember-deep); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.redline a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.home-redline-desk { position: fixed; left: calc(var(--side-w) + (100vw - var(--side-w)) / 2); transform: translateX(-50%); bottom: calc(22px + var(--dock-h) + 10px); z-index: var(--z-dock); margin: 0; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface-3); border: 1px solid var(--line-2); }
.dock { max-width: calc(100vw - var(--side-w) - 32px); }
.dock__item .short { display: none; }
.dock__core { color: var(--ink-2); }
.dotgrid__cell { background: none; border: 0; font: inherit; color: var(--ink-2); padding: 0; min-height: 44px; }
.dotgrid__row.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dotgrid__row.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
.clear-card .next-pill { max-width: 100%; white-space: normal; }
.donelog li span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* ---------- generic sheet (needs, waiting, more) : centered on desktop, bottom sheet on phone ---------- */
.xsheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: none; background: rgba(8, 6, 5, .56); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.xsheet.on { display: block; animation: fade-in 220ms var(--ease); }
.xsheet__panel { position: absolute; left: calc(50% + var(--side-w) / 2); top: 9vh; transform: translateX(-50%); width: 640px; max-width: calc(100vw - 32px); max-height: 82vh; overflow: auto; overscroll-behavior: contain; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #231e19, #1a1612); box-shadow: var(--e-3); padding: 20px 22px 22px; }
.xsheet__grab { display: none; }
.xsheet__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.xsheet__head .h2 { font-size: 26px; }
.xsheet__head .sub { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 4px; }
.xsheet__close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.xsheet__close:hover { color: var(--ink); }
.xsheet .need { margin-bottom: 10px; }
.xsheet .label { display: block; margin: 18px 0 8px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.rows li:last-child { border-bottom: 0; }
.rows li .st { margin-top: 7px; }
.rows .t { color: var(--ink); line-height: 1.4; }
.rows .d { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.rows .r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rows .btn { height: 30px; font-size: 12.5px; padding: 0 12px; }
.age--old { color: var(--champ-deep); }

/* ---------- more sheet (phone) reuses tokens .sheet; desktop never shows it ---------- */

/* ---------- clients ---------- */
.health-pill .ring .v { font-size: 13px; }
.crow__top { cursor: pointer; }
.crow__top:focus-visible { outline: 2px solid var(--champ); outline-offset: -2px; border-radius: var(--r-lg); }
.cheat { grid-column: 1 / -1; display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(240, 222, 196, .03); border: 1px solid var(--line); }
.cheat p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.cheat p:first-child { color: var(--ink); }
.cheat .acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.checks .word { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; text-align: right; }
.checks .word.pass { color: var(--sage); }
.checks .word.fail { color: var(--champ); }
.checks .word.waiting { color: var(--ember); }
.ck--fail { background: var(--champ-soft); }
.ck--na { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.ck--unknown { background: transparent; }
.ck--waiting { background: var(--ember-soft); }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 22px; margin: 0; }
.facts div { min-width: 0; }
.facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.qcline { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.qcline .chip { height: 26px; }
.fold { border-radius: var(--r-lg); }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 15px 18px; font-size: 14.5px; color: var(--ink-2); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .chev { margin-left: auto; width: 16px; height: 16px; color: var(--ink-3); transition: transform var(--t-base) var(--ease); }
.fold[open] > summary .chev { transform: rotate(90deg); }
.fold > summary b { color: var(--ink); font-weight: 520; }
.fold__body { padding: 0 18px 16px; }
.fold__body .list { gap: 8px; }
.fold--plain { background: none; box-shadow: none; }
.fold--plain::before { display: none; }
.foot-line { margin-top: 26px; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.6; }
.foot-line b { color: var(--ink-2); font-weight: 500; }
.ring--dash .track { stroke-dasharray: 3 4; }
.crow__issue .st { flex: none; }
.pill-note { font-size: 11.5px; color: var(--ink-3); }

/* ---------- sessions ---------- */
.scard__doing { margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.scard__doing b { color: var(--ink); font-weight: 500; }
.scard__metric { margin-top: 10px; font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.5; }
.scard__recent { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed var(--line-2); display: grid; gap: 6px; }
.scard__recent li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.scard__recent li span:last-child { color: var(--ink-2); }
.scard--stuck .scard__state { color: var(--champ-deep); }
.scard--prompt .scard__state { color: var(--ember); }
.scard__foot { justify-content: space-between; align-items: center; }
.scard__foot .meta { white-space: nowrap; }
.scard .btn { height: 34px; font-size: 13px; }
.others { margin-top: 20px; font-size: var(--fs-meta); color: var(--ink-3); }

/* ---------- leads ---------- */
.lgrid .panel .bignum.tnum small { font-family: var(--sans); }
.runway-bar { height: 6px; border-radius: 6px; background: rgba(240, 222, 196, .07); overflow: hidden; margin: 16px 0 10px; }
.runway-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--champ-deep), var(--champ)); }
.runway-bar.is-paused i { background: var(--ash); }
.kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kv li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.kv li:last-child { border-bottom: 0; padding-bottom: 0; }
.kv li b { color: var(--ink); font-weight: 520; font-variant-numeric: tabular-nums; }
.funnel { display: grid; gap: 22px; }
.wave h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 22px; }
.wave h3 small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); margin-left: 8px; text-transform: uppercase; }
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.stage { padding: 12px 14px; border-radius: var(--r-md); background: rgba(240, 222, 196, .03); border: 1px solid var(--line); min-width: 0; }
.stage .n { font-family: var(--serif); font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stage .n small { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); margin-left: 6px; }
.stage .l { font-size: 13.5px; color: var(--ink); margin-top: 4px; }
.stage .c { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.stage--unknown { border-style: dashed; border-color: var(--line-3); background: transparent; }
.stage--unknown .n { font-family: var(--sans); font-size: 17px; margin-top: 8px; }
.fnote { font-size: var(--fs-meta); color: var(--ink-3); }
.hbars { display: grid; gap: 7px; }
.hbar { display: grid; grid-template-columns: minmax(0, 150px) 1fr 64px; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
.hbar .bar { height: 6px; border-radius: 6px; background: rgba(240, 222, 196, .06); overflow: hidden; }
.hbar .bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--champ-deep), var(--champ)); opacity: .8; }
.hbar .v { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.hbar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- calls ---------- */
.nextcall { padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.nextcall .when { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.nextcall .nm { font-family: var(--serif); font-size: 40px; line-height: 1.05; margin-top: 8px; overflow-wrap: anywhere; }
.nextcall .sub { margin-top: 8px; font-size: 15px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.count-down { font-family: var(--serif); font-size: 44px; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.count-down small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.tl li:last-child { border-bottom: 0; }
.tl li.past { opacity: .5; }
.tl .hm { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.tl .hm small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.tl .nm { font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl .sub { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl .acts { display: flex; gap: 8px; align-items: center; }
.tl .btn { height: 32px; font-size: 12.5px; }
.vbars { display: flex; align-items: flex-end; gap: 10px; height: 70px; }
.vbars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.vbars i { width: 100%; max-width: 46px; border-radius: 4px 4px 1px 1px; background: rgba(240, 222, 196, .12); min-height: 2px; }
.vbars div.today i { background: linear-gradient(180deg, var(--champ-hi), var(--champ-deep)); }
.vbars span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }

/* ---------- fulfillment ---------- */
.ftable-wrap { margin-top: 28px; overflow: hidden; }
.ftable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ftable th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 14px 12px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.ftable td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.ftable tr:last-child td { border-bottom: 0; }
.ftable td:first-child { color: var(--ink); font-weight: 500; }
.ftable td .sub { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.ftable tr { cursor: pointer; }
.ftable tr:hover td { background: rgba(240, 222, 196, .025); }
.cell { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.fcards { display: none; }
.fcard { padding: 14px 16px; }
.fcard h3 { margin: 0; font-size: 16px; font-weight: 520; }
.fcard .sub { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 1px; }
.fcard dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; margin: 12px 0 0; font-size: 13.5px; }
.fcard dt { color: var(--ink-3); }
.fcard dd { margin: 0; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }

/* ---------- activity ---------- */
.fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.fchips button { height: 32px; padding: 0 14px; border-radius: var(--r-pill); font-size: 13px; color: var(--ink-3); border: 1px solid var(--line); }
.fchips button.on { color: var(--ink); background: rgba(232, 203, 150, .12); border-color: rgba(232, 203, 150, .22); }
.feed { list-style: none; margin: 0; padding: 4px 18px; }
.feed li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.feed li:last-child { border-bottom: 0; }
.feed .who { color: var(--ink-3); font-size: 12.5px; }
.feed .meta { padding-top: 2px; }

/* ---------- system ---------- */
.tw { list-style: none; margin: 0; padding: 4px 18px; }
.tw li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line); }
.tw li:last-child { border-bottom: 0; }
.tw li .st { margin-top: 7px; }
.tw .t { font-size: 15px; color: var(--ink); }
.tw .d { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.tw .w { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-top: 3px; }
.tw .w.amber { color: var(--champ-deep); }
.tw .w.red { color: var(--ember-deep); }
.machine { margin-top: 18px; font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- ask / palette thread ---------- */
.thread { border-top: 1px solid var(--line); padding: 10px 18px 14px; display: grid; gap: 8px; max-height: 32vh; overflow: auto; }
.thread .row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; font-size: 13.5px; color: var(--ink-2); align-items: start; }
.thread .row .txt { overflow-wrap: anywhere; }
.thread .row .s { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.thread .row .s.read { color: var(--sage); }
.p-item.send .txt { white-space: normal; }
.p-empty { padding: 14px 12px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- focus extras ---------- */
.f-title .nm { font-style: italic; color: var(--champ); }
.f-note { margin-top: 14px; }
.f-actions .btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- responsive ---------- */
@media (max-width: 1320px) {
  .dock__label { display: none; }
  .dock { padding-left: 10px; }
}
@media (max-width: 1180px) and (min-width: 761px) {
  :root { --gutter: 28px; }
  .home-grid { grid-template-columns: 1fr; }
  .dock__item .long { display: none; }
  .dock__item .short { display: inline; }
  .dock__sum { display: none; }
  .head-row { padding-right: 300px; }
  .search-pill { min-width: 0; }
  .search-pill .txt { display: none; }
  .crow__top { grid-template-columns: 44px minmax(0, 1fr) auto 16px; }
  .crow__top > .crow__issue { display: none; }
  .crow__m { display: flex !important; }
  .cp { grid-template-columns: 1fr; }
  .lgrid { grid-template-columns: 1fr 1fr; }
  .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftable-wrap { display: none; }
  .fcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
}
@media (max-width: 760px) {
  .tools { display: none; }
  .head-row { padding-right: 0; min-height: 0; margin-top: 10px; gap: 4px 10px; }
  .hero .h1 { margin-top: 10px; }
  .page-head .side-tools { align-items: stretch; }
  .mobile-only { display: block; }
  .desk-only { display: none !important; }
  .xsheet__panel { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-width: none; max-height: 92vh; border-radius: 24px 24px 0 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); animation: sheet-up 380ms var(--ease); }
  .xsheet__grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line-3); margin: 0 auto 12px; }
  .xsheet { z-index: calc(var(--z-tab) + 2); }
  .nextcall { grid-template-columns: 1fr; padding: 20px 18px; }
  .nextcall .nm { font-size: 32px; }
  .count-down { text-align: left; font-size: 36px; }
  .tl li { grid-template-columns: 56px minmax(0, 1fr); padding: 12px 14px; }
  .tl .acts { grid-column: 2; }
  .ftable-wrap { display: none; }
  .fcards { display: grid; gap: 10px; margin-top: 22px; }
  .fcard dl { grid-template-columns: 112px minmax(0, 1fr); }
  .hbar { grid-template-columns: minmax(0, 120px) 1fr 56px; }
  .feed { padding: 4px 14px; }
  .tw { padding: 4px 14px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .need.is-sent { grid-template-columns: 1fr; }
  .need__foot .chip { order: 5; }
  .banner { margin-top: 12px; }
  .m-top .mark svg { width: 18px; height: 18px; }
  .dotgrid__sum { flex-wrap: wrap; }
  .redline { margin-top: 10px; }
  .lock__form { flex-direction: column; }
  .pop { max-width: calc(100vw - 32px); }
}
@media (max-width: 380px) {
  .facts { grid-template-columns: 1fr; }
  .fcard dl { grid-template-columns: 100px minmax(0, 1fr); }
}
@media (hover: none) {
  .kbd, .p-foot { display: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .dock, .f-card, .xsheet, .scrim { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .dock { background: var(--surface-3); }
}
/* phone Home: dots are lit but still (they only breathe on the Sessions page) */
@media (max-width: 760px) {
  .dotgrid .st { animation: none !important; }
  .ambient::before { animation: none; }
}
/* motion pauses while the tab is hidden */
body.is-hidden *, body.is-hidden *::before, body.is-hidden *::after { animation-play-state: paused !important; }

/* ---------- late additions: layout fixes found while wiring data ---------- */
body:not([data-view="home"]) .dock { display: none; }
.need__receipt, .need__body { grid-column: -2 / -1; min-width: 0; }
.crow__who { min-width: 0; }
.group-more { margin-top: 10px; }
.group-open { margin-top: 10px; }
.healthy { width: 100%; text-align: left; font: inherit; color: inherit; }
.thread.empty { display: none; }
.thread .label { margin-bottom: 2px; }
.halo .h-soft { stroke: rgba(232, 203, 150, .14); }
.f-ic { width: 15px; height: 15px; color: var(--champ); }
.f-done-label { margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; }
.f-actions--center { justify-content: center; margin-top: 30px; }
.f-done .f-why { margin: 18px auto 0; }
.fe-check { width: 16px; height: 16px; stroke-width: 2.2; color: var(--sage); }
.need__why .st { margin-right: 6px; }
.live .st { margin-right: 1px; }
.p-list .p-item.send { align-items: flex-start; }
.p-list .p-item.send .ico { color: var(--champ); }
.cheat .btn { height: 36px; }
@media (max-width: 760px) {
  .cheat .acts .btn { flex: 1; }
}
.more-list a > .st { flex: none; }
.more-list .md { display: block; }
.need__foot { flex-wrap: wrap; }
.need__actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1500px) { .dock__label { display: none; } .dock { padding-left: 10px; } }
@media (max-width: 760px) {
  .need__actions .btn--note { order: 4; height: 42px; }
}
.lock__form .field { flex: 1 1 auto; min-height: 44px; }
.f-card .need__note.on { display: flex; }
@media (max-width: 760px) {
  .rows li { grid-template-columns: 12px minmax(0, 1fr); }
  .rows .r { grid-column: 2; align-items: flex-start; }
  .rows li > span:empty { display: none; }
}
.kv li b { white-space: nowrap; text-align: right; }
.asof.is-aging { color: var(--champ-deep); }
.view.is-stale-sec .card, .view.is-stale-sec .lgrid, .view.is-stale-sec .h1 .count { filter: saturate(.25); }
.bill-pill { display: inline-flex; align-items: center; margin-left: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); color: var(--ember); box-shadow: inset 0 0 0 1px rgba(240, 138, 93, .3); vertical-align: 2px; white-space: nowrap; }
.bill-pill.paused { color: var(--champ-deep); box-shadow: inset 0 0 0 1px rgba(201, 166, 106, .35); }
.facts dd .mm { display: block; color: var(--champ-deep); font-size: 12.5px; margin-top: 3px; }
.facts dd .hh { display: block; color: var(--ink-3); font-size: 12px; margin-top: 3px; }
.facts .wide { grid-column: 1 / -1; }
.lede .money { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.healthy .txt, .healthy .sub { display: block; }