/* Sacred Command Center · HQ's carried-over screens (Today, Sales, the lead and onboarding sheets, Notes, Marketing, capture,
   notification settings) wearing the Brand Kit. TEMPORARY: each block goes when its module is ported to the kit components.
   Nothing here changes behaviour; it replaces HQ's iOS look (glass, pills, system grey, orange and green) with flat Obsidian
   surfaces, hairlines, 8/10/14 radii, Montserrat and the semantic tokens. Scope: the page wrapper .hq and every .sheet (HQ's
   sheets are portaled to #layer, so they carry no .hq ancestor). No hex, no rgba. */

.hq > :not(.page-head):not(.module-tabs) { max-width: 46rem; }
.hq .page-head { margin-bottom: var(--s-3); }
.hq .lt-sub { margin: 0; font-size: inherit; color: inherit; }

/* ── Sections, cards, rows ────────────────────────────────────────────────────────────── */
:is(.hq, .sheet) .sec { margin-top: var(--s-5); }
:is(.hq, .sheet) .sec:first-of-type { margin-top: var(--s-4); }
.sheet .sec:first-child { margin-top: 0; }
:is(.hq, .sheet) .sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s-3); margin: 0 0 var(--s-2); }
:is(.hq, .sheet) .sec-h h2 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.28; color: var(--text); overflow-wrap: normal; scroll-margin-top: calc(var(--head-h) + var(--top) + var(--s-3)); }
.sheet .sec-h h2 { font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--caption-ls); color: var(--text-3); }
:is(.hq, .sheet) .sec-h .r { color: var(--text-3); font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
:is(.hq, .sheet) .sec-h button.r { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.2em; min-height: 32px; padding: 0 var(--s-1); position: relative; }
:is(.hq, .sheet) .sec-h button.r::after { content: ""; position: absolute; inset: -6px 0; }
:is(.hq, .sheet) .sec-h .tabs { display: inline-flex; gap: var(--s-1); border-bottom: 0; overflow: visible; }
:is(.hq, .sheet) .sec-h .tabs button { position: relative; min-height: 32px; padding: 0 var(--s-2); border-radius: var(--r-button); color: var(--text-3); font-size: var(--fs-cell); font-weight: 600; font-variant-numeric: tabular-nums; }
:is(.hq, .sheet) .sec-h .tabs button::after { content: ""; position: absolute; inset: -6px -2px; }
:is(.hq, .sheet) .sec-h .tabs button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) { :is(.hq, .sheet) .sec-h .tabs button:hover { color: var(--text); } }

:is(.hq, .sheet) .card { padding: 0; overflow: hidden; }
.sheet .card { background: var(--surface-2); border-color: var(--line); }
:is(.hq, .sheet) .row {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); width: 100%; min-height: 52px; padding: var(--s-2) var(--s-3);
  border: 0; background: transparent; color: var(--text); text-align: left; font-size: var(--fs-body); line-height: 1.35;
}
:is(.hq, .sheet) .row.two { min-height: 60px; }
:is(.hq, .sheet) .card > .row + .row, :is(.hq, .sheet) .card > .swipe + .row, :is(.hq, .sheet) .card > .row + .swipe, :is(.hq, .sheet) .card > .swipe + .swipe,
:is(.hq, .sheet) .card > li + li, :is(.hq, .sheet) .card > .task + .task, :is(.hq, .sheet) .card > .task + .row, :is(.hq, .sheet) .card > .row + .task { border-top: 1px solid var(--line); }
:is(.hq, .sheet) button.row:active, :is(.hq, .sheet) a.row:active, :is(.hq, .sheet) .card .row-main:active { background: var(--hover); }
@media (hover: hover) { :is(.hq, .sheet) button.row:hover, :is(.hq, .sheet) a.row:hover { background: var(--hover); } }
:is(.hq, .sheet) .card .row-main { flex: 1; min-width: min(100%, 7em); display: flex; flex-direction: row; align-items: center; gap: var(--s-3); border: 0; background: transparent; color: inherit; text-align: left; padding: 0; align-self: stretch; }
:is(.hq, .sheet) .row.flush { padding: 0; }
:is(.hq, .sheet) .row.flush > .row-main { padding: var(--s-2) 0 var(--s-2) var(--s-3); }
:is(.hq, .sheet) .row.flush > .row-main:last-child { padding-right: var(--s-3); }
:is(.hq, .sheet) .row.flush.trail { padding-right: var(--s-3); }
:is(.hq, .sheet) .row > .m, :is(.hq, .sheet) .card .row-main > .m { flex: 1; min-width: min(100%, 5em); display: grid; gap: 1px; }
:is(.hq, .sheet) .row .t { font-size: var(--fs-body); line-height: 1.35; }
:is(.hq, .sheet) .row .t.b, :is(.hq, .sheet) .row .t b { font-weight: 700; }
:is(.hq, .sheet) .row .s { color: var(--text-3); font-size: var(--fs-caption); line-height: 1.4; }
:is(.hq, .sheet) .row .f { color: var(--text-3); font-size: var(--fs-caption); line-height: 1.4; }
:is(.hq, .sheet) .row .v { color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; font-size: var(--fs-cell); }
:is(.hq, .sheet) .row .v.strong { color: var(--text); font-weight: 700; font-size: var(--fs-body); }
:is(.hq, .sheet) .row .v.struck { text-decoration: line-through; color: var(--text-3); font-weight: 400; }
:is(.hq, .sheet) .act { color: var(--link); text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 0.2em; }
:is(.hq, .sheet) .c-warn, :is(.hq, .sheet) .c-err { color: var(--text); font-weight: 600; }
:is(.hq, .sheet) .c-warn .icon, :is(.hq, .sheet) .c-err .icon { color: var(--accent-mark); }
:is(.hq, .sheet) .c-tint { color: var(--text); }
:is(.hq, .sheet) .row.danger .t { color: var(--danger-text); }
:is(.hq, .sheet) .row.center { justify-content: center; text-align: center; }
:is(.hq, .sheet) .row.has-more { padding-right: var(--s-1); }
:is(.hq, .sheet) .row.wrap { flex-wrap: wrap; }
:is(.hq, .sheet) .acts { display: flex; gap: var(--s-2); margin-left: auto; }
:is(.hq, .sheet) label.row.toggle { cursor: pointer; }
:is(.hq, .sheet) .card > .bare.cell { padding: var(--s-3); min-height: 52px; }
:is(.hq, .sheet) .chev { width: 14px; height: 14px; flex: none; stroke: var(--text-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:is(.hq, .sheet) .disclose { transition: transform var(--t-feedback) var(--ease-out); }
:is(.hq, .sheet) .disclose.open { transform: rotate(90deg); }
:is(.hq, .sheet) .card .row-main.sub { padding-left: 64px; }
:is(.hq, .sheet) .card .row-main.sub .t { font-size: var(--fs-cell); }
:is(.hq, .sheet) .lead-num { flex: none; width: 3rem; text-align: right; padding-right: 2px; font-size: var(--fs-h3); font-weight: 800; line-height: 1.1; overflow-wrap: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.hq, .sheet) .lead-num.money { font-size: var(--fs-cell); }
:is(.hq, .sheet) .datetile { flex: none; min-width: 44px; min-height: 44px; padding: 3px 4px; border-radius: var(--r-button); background: var(--surface-2); display: grid; place-items: center; align-content: center; line-height: 1.05; }
.sheet .datetile { background: var(--surface); }
:is(.hq, .sheet) .datetile b { color: var(--text-3); font-size: var(--fs-caption); font-weight: 600; }
:is(.hq, .sheet) .datetile span { font-size: var(--fs-h3); font-weight: 800; }
:is(.hq, .sheet) .status::before { content: none; }
:is(.hq, .sheet) .status { display: inline-flex; align-items: center; gap: 6px; font-size: inherit; font-weight: inherit; letter-spacing: 0; white-space: normal; color: inherit; }
:is(.hq, .sheet) .s.status, :is(.hq, .sheet) .row .s.status { display: flex; align-items: flex-start; }
:is(.hq, .sheet) .s.status .icon, :is(.hq, .sheet) .f .icon { flex: none; margin-top: calc(.69em - 7px); }
:is(.hq, .sheet) .l-cap { display: block; color: var(--text-3); font-size: var(--fs-caption); line-height: 1.4; }
:is(.hq, .sheet) .clamp1 { display: -webkit-box; }
:is(.hq, .sheet) .tab-n { font-variant-numeric: tabular-nums; }
:is(.hq, .sheet) .t-sub { font-size: var(--fs-cell); line-height: 1.4; }
:is(.hq, .sheet) .t-foot { font-size: var(--fs-caption); line-height: 1.4; font-weight: 500; }
:is(.hq, .sheet) .num { font-variant-numeric: tabular-nums; }
:is(.hq, .sheet) .lt-name { display: flex; align-items: baseline; min-width: 0; }
:is(.hq, .sheet) .lt-name b { flex: 0 0 auto; max-width: 100%; }
:is(.hq, .sheet) .lt-name .co { flex: 1 1 0; min-width: 0; container-type: inline-size; }
:is(.hq, .sheet) .lt-name .co > .clamp1 { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
@container (max-width: 4em) { :is(.hq, .sheet) .lt-name .co > .clamp1 { visibility: hidden; } }

/* ── States ───────────────────────────────────────────────────────────────────────────── */
:is(.hq, .sheet) .empty { padding: var(--s-4) var(--s-3); display: grid; gap: var(--s-3); justify-items: start; text-align: left; color: var(--text-2); }
:is(.hq, .sheet) .empty > span { max-width: 100%; }
:is(.hq, .sheet) .skel { display: grid; gap: var(--s-3); padding: var(--s-3); height: auto; background: transparent; }
:is(.hq, .sheet) .skel i { display: block; height: 12px; border-radius: var(--r-button); background: var(--skeleton); }
:is(.hq, .sheet) .skel i:nth-child(2) { width: 70%; }
:is(.hq, .sheet) .skel i:nth-child(3) { width: 45%; }
:is(.hq, .sheet) .fatal { padding-top: var(--s-4); display: grid; gap: var(--s-3); }
:is(.hq, .sheet) .big-cta { text-align: center; }
:is(.hq, .sheet) .center-line { text-align: center; padding: var(--s-3) 0 var(--s-1); }
:is(.hq, .sheet) .err-line { margin-top: var(--s-2); }
:is(.hq, .sheet) .caption { margin: var(--s-2) 0 0; }
:is(.hq, .sheet) .meta-line { color: var(--text-3); font-size: var(--fs-caption); margin: 0 0 var(--s-2); }
:is(.hq, .sheet) .gap8 { height: 8px; }

/* ── Today: numbers, to-dos, swipe rows ───────────────────────────────────────────────── */
.hq .tiles { container-type: inline-size; }
.hq .tiles-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.hq .tile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); min-height: 104px; }
.hq .tile-body { width: 100%; height: 100%; min-height: 104px; background: transparent; color: var(--text); text-align: left; padding: var(--s-3); display: flex; flex-direction: column; gap: 2px; border-radius: var(--r-card); }
.hq .tile-body:active { background: var(--hover); }
@media (hover: hover) { .hq .tile-body:hover { background: var(--hover); } }
.hq .tile-l { font-size: var(--fs-caption); font-weight: 600; color: var(--text-2); overflow-wrap: normal; min-height: 28px; display: flex; align-items: center; padding-right: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq .tile-n { font-size: clamp(1.75rem, 11cqw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin-top: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hq .tile-n.d3 { font-size: clamp(1.5rem, 9cqw, 2rem); }
.hq .tile-n.d4 { font-size: clamp(1.25rem, 7cqw, 1.5rem); }
.hq .tile .circle { position: absolute; right: var(--s-2); top: var(--s-2); }
.hq .tick { display: inline-block; animation: tick 160ms var(--ease-out); }
@keyframes tick { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@container (max-width: 20em) {
  .hq .tiles-in { grid-template-columns: 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
  .hq .tile { min-height: 56px; border: 0; border-radius: 0; background: transparent; }
  .hq .tile + .tile { border-top: 1px solid var(--line); }
  .hq .tile-body { min-height: 56px; flex-direction: row; align-items: center; gap: var(--s-3); padding: var(--s-2) 56px var(--s-2) var(--s-3); border-radius: 0; }
  .hq .tile-l { flex: 1; color: var(--text); font-size: var(--fs-body); padding-right: 0; min-height: 0; white-space: normal; overflow: visible; }
  .hq .tile-n, .hq .tile-n.d3, .hq .tile-n.d4 { font-size: var(--fs-h2); margin-top: 0; }
  .hq .tile .circle { top: 50%; margin-top: -16px; right: var(--s-3); }
}
.circle { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-button); background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); padding: 0; }
.circle::after { content: ""; position: absolute; inset: -6px; }
.circle:active { background: var(--hover); }
@media (hover: hover) { .circle:hover { background: var(--hover); } }
.circle .icon { width: 18px; height: 18px; stroke-width: 2; }
.circle.gray { color: var(--text-2); }
.circle.ok, .circle.on-ok { background: var(--gilt); border-color: var(--gilt); color: var(--on-gilt); }
.circle.on-gray { background: var(--text-2); color: var(--surface); border-color: transparent; }
.swipe { position: relative; overflow: hidden; }
.swipe-under { position: absolute; inset: 0; pointer-events: none; }
.swipe-under span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--s-4); font-weight: 700; opacity: 0; }
.swipe-under .l { background: var(--gilt); color: var(--on-gilt); justify-content: flex-start; }
.swipe-under .r { background: var(--raised); color: var(--text); justify-content: flex-end; }
.swipe-under .r.err { background: var(--accent); color: var(--on-accent); }
.swipe-under .l.tint { background: var(--accent); color: var(--on-accent); }
.swipe-top { position: relative; z-index: 1; background: var(--surface); touch-action: pan-y; }
.sheet .swipe-top { background: var(--surface-2); }
.swipe-top:not(.dragging) { transition: transform var(--t-feedback) var(--ease-out); }
.task { display: flex; align-items: flex-start; gap: 4px; min-height: 52px; padding: 0 var(--s-3) 0 4px; user-select: none; -webkit-user-select: none; }
.task .check { width: 44px; height: 52px; flex: none; display: grid; place-items: center; background: transparent; padding: 0; color: var(--text-3); border-radius: 0; }
.task .check::before { content: none; }
.ring { width: 24px; height: 24px; border-radius: var(--r-button); border: 1.5px solid var(--text-3); display: grid; place-items: center; transition: background-color var(--t-feedback) var(--ease-out), border-color var(--t-feedback) var(--ease-out); color: var(--on-gilt); }
.ring.must { border-color: var(--accent-mark); border-width: 2px; }
.check[aria-pressed="true"] .ring { background: var(--gilt); border-color: var(--gilt); }
.ring .icon { width: 16px; height: 16px; stroke-width: 2.4; opacity: 1; transform: none; }
.task .body { flex: 1; min-width: 0; min-height: 52px; background: transparent; text-align: left; padding: var(--s-2) 0; color: var(--text); display: grid; gap: 2px; align-content: center; }
.task .tt { font-size: var(--fs-body); line-height: 1.35; }
.task .tt .bang { color: var(--accent-mark); font-weight: 800; margin-right: 2px; }
.task.done .tt { color: var(--text-3); text-decoration: line-through; }
.task .meta { display: block; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-3); font-weight: 500; }
.task .meta .warn { color: var(--text); font-weight: 700; }
.task.child { padding-left: 28px; }
.task.child .tt { font-size: var(--fs-cell); }
.hq .week-card { padding: var(--s-3); display: grid; gap: var(--s-3); }
.hq .week-card .who { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; }
.hq .week-card .who b { font-weight: 700; }
:is(.hq, .sheet) .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr)); gap: var(--s-2); }
:is(.hq, .sheet) .stat { display: grid; gap: 0; min-width: 0; padding: 0; border: 0; background: transparent; border-radius: 0; }
:is(.hq, .sheet) .stat b { font-size: var(--fs-h2); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
:is(.hq, .sheet) .stat span { color: var(--text-3); font-size: var(--fs-caption); overflow-wrap: normal; }
:is(.hq, .sheet) .stat-big { font-size: var(--fs-stat); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
:is(.hq, .sheet) .bar i.tint { background: var(--chart-1); }
:is(.hq, .sheet) .bar i.c2 { background: var(--chart-3); }
:is(.hq, .sheet) .meter { display: block; height: 4px; border-radius: var(--r-button); background: var(--chart-track); overflow: hidden; margin-top: 6px; }
:is(.hq, .sheet) .meter i { display: block; height: 100%; background: var(--chart-2); border-radius: 0; box-shadow: none; }
:is(.hq, .sheet) .legend { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); color: var(--text-3); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
:is(.hq, .sheet) .legend span { display: inline-flex; align-items: center; gap: 6px; }
:is(.hq, .sheet) .legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
:is(.hq, .sheet) .legend i.tint { background: var(--chart-1); }
:is(.hq, .sheet) .legend i.c2 { background: var(--chart-3); }
.hq .plan-card { padding: var(--s-3); display: grid; gap: var(--s-3); }
.hq .plan-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; }
.hq .plan-top .s { color: var(--text-3); }
.numcirc { flex: none; width: 22px; height: 22px; border-radius: var(--r-button); background: var(--surface-2); color: var(--text); display: grid; place-items: center; font-size: var(--fs-caption); font-weight: 700; margin-top: 1px; }
.hq .row.lcirc { align-items: flex-start; }
.hq .pulse { padding: var(--s-3); display: grid; gap: 6px; }
.hq .pulse .h { font-weight: 700; }
.hq .pulse li { color: var(--text-2); font-size: var(--fs-cell); }

/* ── Controls HQ's sheets use ─────────────────────────────────────────────────────────── */
:is(.hq, .sheet) .seg.multi { flex-wrap: wrap; }
:is(.hq, .sheet) .seg.multi > button { flex: 1 1 auto; }
:is(.hq, .sheet) .chips { margin-top: var(--s-3); }
:is(.hq, .sheet) .chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: var(--s-2) calc(var(--s-4) * -1) 0; padding: 6px var(--s-4); overscroll-behavior-x: contain; }
:is(.hq, .sheet) .chips.scroll::-webkit-scrollbar { display: none; }
:is(.hq, .sheet) button.chip { min-height: 32px; font-size: var(--fs-cell); }
:is(.hq, .sheet) .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
:is(.hq, .sheet) .choices .btn { min-width: 0; }
:is(.hq, .sheet) .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: var(--s-2); }
:is(.hq, .sheet) .bare { display: block; width: 100%; border: 0; outline: none; background: transparent; color: var(--text); resize: none; padding: 0; font-weight: var(--fw-body); }
:is(.hq, .sheet) .bare::placeholder { color: var(--text-3); opacity: 1; }
:is(.hq, .sheet) .bare:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.hq, .sheet) .bare.big { font-size: var(--fs-h3); line-height: 1.4; }
:is(.hq, .sheet) .bare.line { padding: 10px 0; min-height: 44px; }
:is(.hq, .sheet) .bare.body { font-size: 1rem; line-height: 1.5; }
:is(.hq, .sheet) input.field, :is(.hq, .sheet) textarea.field { width: 100%; min-height: var(--tap); padding: 0 var(--s-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--line-field); border-radius: var(--r-button); font-size: 1rem; }
:is(.hq, .sheet) textarea.field { padding-top: var(--s-2); padding-bottom: var(--s-2); resize: none; line-height: 1.45; }
:is(.hq, .sheet) .field:focus { border-color: var(--text-3); }
:is(.hq, .sheet) .search { position: relative; display: flex; align-items: center; min-height: var(--tap); background: var(--surface-2); border: 1px solid var(--line-field); border-radius: var(--r-button); padding: 0 0 0 var(--s-3); gap: var(--s-2); margin-top: var(--s-3); }
:is(.hq, .sheet) .search .icon { width: 20px; height: 20px; color: var(--text-3); }
:is(.hq, .sheet) .search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 1rem; min-height: var(--tap); color: var(--text); }
:is(.hq, .sheet) .search input::placeholder { color: var(--text-3); }
:is(.hq, .sheet) .search input::-webkit-search-cancel-button { display: none; }
:is(.hq, .sheet) .search .clear { width: var(--tap); height: var(--tap); flex: none; border-radius: var(--r-button); background: transparent; color: var(--text-3); display: grid; place-items: center; }
:is(.hq, .sheet) .row.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); padding-top: 2px; padding-bottom: 2px; }
:is(.hq, .sheet) .field-row > label { flex: 0 1 auto; min-width: min(5.5em, 100%); color: var(--text-3); font-size: var(--fs-cell); font-weight: 600; }
:is(.hq, .sheet) .field-row > .bare { flex: 1 1 9em; min-width: 0; min-height: var(--tap); }
:is(.hq, .sheet) .field-row > textarea.bare { flex-basis: 100%; min-height: 66px; padding: 4px 0 10px; }
:is(.hq, .sheet) .picker { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); min-width: 0; max-width: 100%; margin-left: auto; }
:is(.hq, .sheet) .picker select, :is(.hq, .sheet) .picker input { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--text-2); text-align: right; font-size: 1rem; padding: 8px 0; min-height: var(--tap); max-width: 100%; min-width: 44px; font-weight: 600; }
:is(.hq, .sheet) .picker .icon { width: 14px; height: 14px; }
:is(.hq, .sheet) .money-in { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--text-2); }
:is(.hq, .sheet) .money-in input { width: 7ch; max-width: 40vw; min-height: var(--tap); border: 0; background: transparent; color: var(--text); text-align: right; font-size: 1rem; font-variant-numeric: tabular-nums; padding: 0; outline: none; }
:is(.hq, .sheet) .money-in input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* HQ's switch: a labelled square with a check, the same control the kit calls an option. */
:is(.hq, .sheet) .switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--text-3); border-radius: var(--r-button); background: transparent; cursor: pointer; }
:is(.hq, .sheet) .switch:checked { background: var(--accent); border-color: var(--accent); }
:is(.hq, .sheet) .switch:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 2.25px 2.25px 0; transform: rotate(45deg); }
:is(.hq, .sheet) .switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.hq, .sheet) .stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: var(--s-3); padding: var(--s-2) 0 var(--s-1); }
:is(.hq, .sheet) .stepper .circle { width: 56px; height: 56px; }
:is(.hq, .sheet) .stepper .circle .icon { width: 24px; height: 24px; }
:is(.hq, .sheet) .stepper input { width: 100%; min-width: 0; text-align: center; border: 0; background: transparent; outline: none; color: var(--text); font-variant-numeric: tabular-nums; font-size: 3.5rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; padding: 0; }
:is(.hq, .sheet) .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
:is(.hq, .sheet) .toolbar-wrap { container-type: inline-size; }
:is(.hq, .sheet) .toolbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
@container (max-width: 19em) { :is(.hq, .sheet) .toolbar { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
:is(.hq, .sheet) .toolbar button { min-height: 50px; min-width: 0; padding: 4px 2px; background: transparent; color: var(--text); display: grid; place-items: center; align-content: center; gap: 2px; border-radius: var(--r-button); font-size: var(--fs-caption); font-weight: 600; text-align: center; line-height: 1.2; }
:is(.hq, .sheet) .toolbar button:disabled { color: var(--text-3); }
:is(.hq, .sheet) .toolbar button[aria-pressed="true"] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
:is(.hq, .sheet) .toolbar button.danger { color: var(--danger-text); }
:is(.hq, .sheet) .toolbar button:active { background: var(--hover); }
:is(.hq, .sheet) .toolbar .icon { width: 22px; height: 22px; }
:is(.hq, .sheet) .note-edit { min-height: 40dvh; }
:is(.hq, .sheet) .profile { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); }
:is(.hq, .sheet) .profile b { display: block; font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
:is(.hq, .sheet) .eod-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--s-3); align-items: baseline; }
:is(.hq, .sheet) .eod-row .k { color: var(--text-3); font-size: var(--fs-caption); font-weight: 600; min-width: 4.2em; }
:is(.hq, .sheet) .eod-row input { min-height: 44px; }
:is(.hq, .sheet) .filter-bar { display: flex; align-items: center; gap: 4px; margin: 0 0 var(--s-3); }
:is(.hq, .sheet) .filter-bar .seg { flex: 1; min-width: 0; }
:is(.hq, .sheet) .focus-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 44px; margin: 0 0 var(--s-3); padding: 0 0 0 var(--s-3); border-radius: var(--r-button); background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); font-size: var(--fs-cell); font-weight: 600; }
:is(.hq, .sheet) .grp + .grp { margin-top: var(--s-4); }
:is(.hq, .sheet) .grp-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-3); margin: 0 0 6px; font-size: var(--fs-caption); line-height: 1.4; font-weight: 600; color: var(--text-3); }
:is(.hq, .sheet) .lead-acts { display: grid; gap: var(--s-2); }
.sheet .qa-box { container-type: inline-size; margin-top: var(--s-4); }
.sheet .qa { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2); }
@container (max-width: 19rem) { .sheet .qa { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 9.5rem) { .sheet .qa { grid-template-columns: minmax(0, 1fr); } }
.sheet .qa a, .sheet .qa button { min-height: 56px; border-radius: var(--r-button); background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); display: grid; place-items: center; align-content: center; gap: 2px; padding: 6px 4px; font-size: var(--fs-caption); font-weight: 600; text-align: center; text-decoration: none; }
.sheet .qa a span, .sheet .qa button span { color: var(--text); }
.sheet .qa .icon { width: 20px; height: 20px; color: var(--text-2); }
.sheet .qa a:active, .sheet .qa button:active { background: var(--hover); }
.sheet .lead-head { display: grid; justify-items: center; gap: 6px; text-align: center; padding-top: 4px; }
.sheet .lead-head h3 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.25; }
.sheet .info .row { display: grid; gap: 1px; align-items: start; }
.sheet .info button.row { display: flex; align-items: center; }
.sheet .info .l { color: var(--text-3); font-size: var(--fs-caption); font-weight: 600; }
.sheet .info .val { font-size: var(--fs-body); }
.sheet .info .val.pre { white-space: pre-wrap; }
.sheet .lead-end { margin-top: var(--s-4); }
.sheet .preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s-4); display: grid; gap: var(--s-3); }
.sheet .preview .hook { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.sheet .preview .bodytext { font-size: var(--fs-body); line-height: 1.45; white-space: pre-wrap; }
.sheet .preview .cta { justify-self: start; min-height: 32px; display: inline-flex; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-button); background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); font-size: var(--fs-cell); font-weight: 700; }
.sheet .checks { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); padding: var(--s-3) 4px 0; }
.sheet .checks span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-cell); }
.sheet .fails { padding: 6px 4px 0; display: grid; gap: 2px; }
.sheet .fails li { color: var(--text); font-size: var(--fs-caption); font-weight: 600; }
:is(.hq, .sheet) .facts { display: grid; gap: 6px; margin: 6px 4px 0; }
:is(.hq, .sheet) .facts li { color: var(--text-2); font-size: var(--fs-cell); line-height: 1.4; }
:is(.hq, .sheet) .facts li.warn { color: var(--text); display: flex; align-items: flex-start; gap: 6px; font-weight: 600; }
:is(.hq, .sheet) .facts li.warn .icon { flex: none; margin-top: calc(.7em - 7px); color: var(--accent-mark); }
:is(.hq, .sheet) .report h3 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.27; }
:is(.hq, .sheet) .report .hl { color: var(--text-2); font-size: 1rem; margin-top: 6px; }
:is(.hq, .sheet) .report-md { font-size: 1rem; line-height: 1.47; max-width: 36em; margin-top: var(--s-4); }
:is(.hq, .sheet) .report-md h2 { font-size: var(--fs-h2); line-height: 1.27; margin: 22px 0 8px; font-weight: 700; }
:is(.hq, .sheet) .report-md h3, :is(.hq, .sheet) .report-md h4 { font-size: 1rem; font-weight: 700; margin: 18px 0 6px; }
:is(.hq, .sheet) .report-md p, :is(.hq, .sheet) .report-md ul { margin: 0 0 12px; }
:is(.hq, .sheet) .report-md ul { padding-left: 1.2em; list-style: disc; }
:is(.hq, .sheet) .brief-body { font-size: 1rem; line-height: 1.5; display: grid; gap: 10px; max-width: 36em; }
:is(.hq, .sheet) .brief-body .h { font-weight: 700; margin-top: 6px; }
:is(.hq, .sheet) .brief-body ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 6px; }
:is(.hq, .sheet) .onb-prog .warn { color: var(--text); font-weight: 700; }
:is(.hq, .sheet) .onb-prog .icon { vertical-align: -2px; margin-right: 3px; color: var(--accent-mark); }
:is(.hq, .sheet) .icon.inl-w { width: 14px; height: 14px; stroke-width: 2.2; vertical-align: -2px; margin-right: 3px; }
:is(.hq, .sheet) .menu-off { width: 18px; height: 18px; flex: none; }
.ptr { height: 0; overflow: hidden; display: grid; place-items: center; }
.spin { width: 20px; height: 20px; color: var(--text-2); }
.spin.go { animation: spin 0.8s steps(12) infinite; }
@media (prefers-reduced-motion: reduce) { .spin.go { animation: none; } .tick { animation: none; } }