/* Isidore Desk. Brand: CLAUDE.md (navy #111B2B, Inter + Manrope, square corners). */
:root {
  --navy: #111B2B; --midnight: #020B18; --slate: #263A52; --soft: #F7F8FA; --gray: #A7AFB9;
  --line: #3A4F68;           /* hairlines on navy where nothing is clickable (decoration) */
  --rule: #6F7C8C;           /* dividers and borders on clickable things: 4.06:1 on navy */
  --t: .18s;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: Manrope, Inter, system-ui, sans-serif;
}
@media (prefers-reduced-motion: reduce) { :root { --t: 0s; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--navy); color: var(--soft); font: 400 16px/1.55 var(--sans); }
a { color: var(--soft); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gray); outline-offset: 2px; }
[hidden] { display: none !important; }
p { margin: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px calc(56px + env(safe-area-inset-bottom)); }

/* ---- top bar and nav ---- */
.top { display: flex; align-items: center; gap: 14px; padding: 14px 0 0; }
.brand { font: 800 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; text-decoration: none; }
.top .grow { flex: 1; }
.today { color: var(--gray); font-size: 13px; white-space: nowrap; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 12px 0 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 10px 12px 11px; color: var(--gray); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t), border-color var(--t); }
.nav a:hover { color: var(--soft); }
.nav a[aria-current="page"] { color: var(--soft); }
.nav .sep { flex: 1; min-width: 12px; }
.nav .agentsLink { font-family: var(--display); font-weight: 700; letter-spacing: .02em; }
.badge { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; background: var(--soft); color: var(--navy); border-radius: 2px; }
.linkBtn { background: none; border: 0; padding: 6px 0; color: var(--gray); cursor: pointer; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.linkBtn:hover { color: var(--soft); }

/* ---- type ---- */
.kicker { font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin: 0 0 10px; }
h1 { font: 800 clamp(28px, 5.4vw, 42px)/1.08 var(--display); letter-spacing: -.02em; margin: 0; }
h2 { font: 800 20px/1.2 var(--display); margin: 0 0 14px; letter-spacing: -.01em; }
h3 { font: 700 19px/1.3 var(--display); margin: 0; letter-spacing: -.01em; }
.muted { color: var(--gray); }
.small { font-size: 14px; }
.tiny { font-size: 13px; }

.hero { padding: 30px 0 22px; }
.hero p.lead { margin-top: 12px; font-size: 18px; color: var(--gray); max-width: 66ch; }
.pageHead { padding: 28px 0 18px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; justify-content: space-between; }
.pageHead p { color: var(--gray); margin-top: 8px; max-width: 70ch; }

.cols { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .cols { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; } }

/* ---- buttons and inputs ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 15px; border-radius: 2px; border: 1px solid var(--soft); background: transparent; color: var(--soft); text-decoration: none; cursor: pointer; font-weight: 500; font-size: 15px; transition: background var(--t), color var(--t), border-color var(--t); }
.btn:hover { background: var(--slate); }
.btn:disabled { opacity: .5; cursor: default; }
.btn--primary { background: var(--soft); color: var(--navy); font-weight: 600; }
.btn--primary:hover { background: var(--gray); border-color: var(--gray); }
.btn--quiet { border-color: var(--rule); color: var(--gray); }
.btn--sm { min-height: 36px; padding: 6px 11px; font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=search], input[type=time], input[type=datetime-local], textarea, select {
  background: var(--midnight); border: 1px solid var(--rule); border-radius: 2px; padding: 10px 12px; color: var(--soft); width: 100%; }
textarea { min-height: 84px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--gray); opacity: .8; }
label.field { display: grid; gap: 6px; font-size: 14px; color: var(--gray); }
.formGrid { display: grid; gap: 12px; }
@media (min-width: 640px) { .formGrid.two { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: 10px; align-items: center; color: var(--soft); font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--soft); }

/* ---- blocks ---- */
.panel { border-top: 1px solid var(--soft); padding: 18px 0 26px; }
.notice { margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--rule); font-size: 15px; }
.alerts { margin: 20px 0 0; border: 2px solid var(--soft); padding: 14px 16px; }
.alerts .kicker { color: var(--soft); }
.alert + .alert { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.alert b { font-weight: 600; }
.empty { color: var(--gray); padding: 18px 0; }
.loading { color: var(--gray); padding: 40px 0; }

/* scorecard */
.score4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 20px; }
@media (min-width: 720px) { .score4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--navy); padding: 14px 14px 16px; }
.stat .label { font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.stat .val { font: 200 44px/1 var(--display); letter-spacing: -.04em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.stat .val small { font: 700 16px/1 var(--display); color: var(--gray); letter-spacing: 0; margin-left: 4px; }
.stat .sub { font-size: 13px; color: var(--gray); margin-top: 8px; }
.bar { height: 4px; background: var(--slate); margin-top: 12px; }
.bar i { display: block; height: 100%; background: var(--soft); }

.time { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; }
.time > span { font-size: 14px; color: var(--gray); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 2px; flex-wrap: wrap; }
.seg button { background: none; border: 0; padding: 8px 12px; cursor: pointer; font-size: 14px; color: var(--gray); transition: background var(--t), color var(--t); min-width: 44px; min-height: 38px; }
.seg button + button { border-left: 1px solid var(--rule); }
.seg button[aria-pressed="true"] { background: var(--soft); color: var(--navy); font-weight: 600; }

/* moves */
.secHead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 26px 0 0; }
.secHead h2 { margin: 0; }
.move { border-top: 1px solid var(--soft); padding: 20px 0 22px; }
.move.is-done { opacity: .6; }
.later .move { border-top-color: var(--rule); }
.moveHead { display: flex; gap: 14px; align-items: baseline; }
.num { font: 200 40px/1 var(--display); letter-spacing: -.04em; min-width: 50px; }
.moveBody { flex: 1; min-width: 0; }
.tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.why { margin-top: 7px; color: var(--gray); }
.contact { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
details.more { margin-top: 12px; border-top: 1px solid var(--rule); }
details.more > summary { cursor: pointer; padding: 11px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "+"; color: var(--gray); font-weight: 400; }
details.more[open] > summary::after { content: "\2212"; }
.script { white-space: pre-wrap; border-left: 2px solid var(--gray); padding: 2px 0 2px 14px; margin: 4px 0 12px; }
ol.steps { margin: 4px 0 12px; padding-left: 20px; }
ol.steps li + li { margin-top: 6px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 6px; font-size: 15px; }
.doneLine { color: var(--gray); font-size: 14px; }
.noteRow { margin-top: 10px; display: flex; gap: 8px; }
.noteRow input { flex: 1; min-width: 0; }

/* outcome logger */
.logger { margin-top: 12px; padding: 12px; border: 1px solid var(--rule); display: grid; gap: 10px; }
.logger .row button { min-height: 38px; }
.logger .row button[aria-pressed="true"] { background: var(--soft); color: var(--navy); border-color: var(--soft); }

/* critiques */
.crit { border-top: 1px solid var(--rule); padding: 14px 0; display: grid; gap: 6px; }
.crit .sev { font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.crit .sev.high { color: var(--soft); }
.crit .fix { padding-left: 12px; border-left: 2px solid var(--gray); }

/* side panels */
.score { display: flex; align-items: baseline; gap: 12px; }
.score .big { font: 200 60px/1 var(--display); letter-spacing: -.04em; }
.score .of { font: 700 18px/1 var(--display); color: var(--gray); }
.meter { display: grid; gap: 4px; margin: 14px 0 10px; }
.meter i { display: block; height: 6px; background: var(--slate); }
.meter i.on { background: var(--soft); }
.kv { list-style: none; margin: 12px 0 0; padding: 0; }
.kv li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.kv b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.list > li:first-child { border-top: 0; }
.list .txt { flex: 1; min-width: 0; }
.list .detail { color: var(--gray); font-size: 14px; margin-top: 2px; }
.list .links { font-size: 14px; margin: 6px 0 0; }
.list li.is-done .ttl { text-decoration: line-through; color: var(--gray); }
.tick { flex: none; width: 26px; height: 26px; margin-top: 1px; border: 1px solid var(--gray); border-radius: 2px; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.tick svg { width: 16px; height: 16px; opacity: 0; }
.tick[aria-pressed="true"] { background: var(--soft); border-color: var(--soft); }
.tick[aria-pressed="true"] svg { opacity: 1; }
.subhead { font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin: 20px 0 6px; }

.notes { list-style: none; margin: 14px 0 0; padding: 0; }
.notes li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.notes .meta { color: var(--gray); font-size: 13px; margin-top: 2px; }
.reply { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--gray); }
.week { display: grid; gap: 8px; margin-top: 6px; }
.week .wrow { display: grid; grid-template-columns: 40px 104px 1fr; gap: 8px; align-items: center; font-size: 14px; }
.week select, .week input { padding: 8px; font-size: 14px; }

/* cards (pipeline, calls, clients, agents) */
.cards { display: grid; gap: 0; }
.card { border-top: 1px solid var(--rule); padding: 16px 0 18px; }
.card:last-child { border-bottom: 1px solid var(--rule); }
.cardTop { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; }
.flag { display: inline-block; font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border: 1px solid var(--rule); color: var(--gray); border-radius: 2px; }
.flag.hot { border-color: var(--soft); color: var(--navy); background: var(--soft); }
.flag.warn { border-color: var(--soft); color: var(--soft); }
.flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lastmsg { margin-top: 8px; font-size: 14px; color: var(--gray); }
.lastmsg q { color: var(--soft); quotes: "\201C" "\201D"; }
.stageHead { display: flex; justify-content: space-between; align-items: baseline; margin: 30px 0 4px; }
.stageHead h2 { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule); border-radius: 2px; }
.tabs button { background: none; border: 0; padding: 9px 14px; cursor: pointer; color: var(--gray); font-size: 14px; min-height: 40px; }
.tabs button + button { border-left: 1px solid var(--rule); }
.tabs button[aria-pressed="true"] { background: var(--soft); color: var(--navy); font-weight: 600; }

.drawer { margin-top: 12px; border: 1px solid var(--rule); padding: 14px; display: grid; gap: 10px; }
.msgs { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.msg { padding: 8px 10px; border-left: 2px solid var(--line); font-size: 14px; white-space: pre-wrap; }
.msg.in { border-left-color: var(--soft); }
.msg .meta { color: var(--gray); font-size: 12px; margin-bottom: 2px; }

/* numbers */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; align-items: end; height: 120px; margin-top: 12px; border-bottom: 1px solid var(--line); }
.bars i { display: block; background: var(--soft); min-height: 1px; }
.bars i.zero { background: var(--slate); }
.barLabels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; font-size: 11px; color: var(--gray); margin-top: 4px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gray); padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); }
table.t td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: top; }
.tableWrap { overflow-x: auto; }

/* inbox */
.noteItem { border-top: 1px solid var(--rule); }
.noteItem > summary { list-style: none; cursor: pointer; padding: 14px 0; display: grid; gap: 4px; }
.noteItem > summary::-webkit-details-marker { display: none; }
.noteItem.unread .nt { font-weight: 600; }
.noteItem .body { white-space: pre-wrap; padding: 0 0 16px; font-size: 15px; }

/* agents page */
.agentsHero { padding: 28px 0 8px; }
.agentGrid { display: grid; gap: 0; }
.agent { border-top: 1px solid var(--soft); padding: 20px 0 22px; }
.agentTop { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: baseline; }
.status { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.status.fail { color: var(--navy); background: var(--soft); padding: 3px 7px; }
.status.warn { color: var(--soft); border: 1px solid var(--soft); padding: 2px 6px; }
.status.pass, .status.ok { color: var(--gray); }
.setup { border: 2px solid var(--soft); padding: 16px; margin: 18px 0 0; display: grid; gap: 10px; }
.setup ol { margin: 0; padding-left: 20px; }
.setup li + li { margin-top: 6px; }

.foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--gray); font-size: 13px; }

.gate { max-width: 400px; margin: 12vh auto 0; padding: 0 16px; }
.gate h1 { font-size: 34px; }
.gate form { margin-top: 26px; display: grid; gap: 12px; }
.gate label { font-size: 14px; color: var(--gray); display: grid; gap: 6px; }
.err { color: var(--soft); border-left: 2px solid var(--soft); padding-left: 10px; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--soft); color: var(--navy); padding: 10px 16px; border-radius: 2px; font-size: 14px; font-weight: 500; z-index: 10; max-width: calc(100% - 32px); }

.grow { flex: 1; }

/* ---- core widgets (modal, palette, mobile nav, misc) ---- */
.iconBtn { background: none; border: 1px solid var(--rule); border-radius: 2px; width: 36px; height: 36px; display: inline-grid; place-items: center; cursor: pointer; color: var(--gray); padding: 0; }
.iconBtn svg { width: 18px; height: 18px; }
.iconBtn:hover { color: var(--soft); border-color: var(--soft); }
.nav .officeLink { font-family: var(--display); font-weight: 700; letter-spacing: .02em; }
.wrap--wide { max-width: 1400px; }
.modalWrap { position: fixed; inset: 0; z-index: 20; display: grid; place-items: start center; padding: 6vh 16px 16px; overflow-y: auto; }
.modalBack { position: absolute; inset: 0; background: rgba(2, 11, 24, .78); }
.modal { position: relative; width: 100%; max-width: 560px; background: var(--navy); border: 1px solid var(--rule); padding: 18px 18px 22px; }
.modal--wide { max-width: 900px; }
.modalHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modalHead h2 { margin: 0; }
.modalBody { display: grid; gap: 12px; }
.palList { display: grid; gap: 0; margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.palItem { display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 10px 4px; cursor: pointer; color: var(--soft); }
.palItem:hover, .palItem:focus-visible { background: var(--slate); }
.palKind { flex: none; width: 72px; font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.palLabel b { font-weight: 600; }
.sheetList { display: grid; gap: 0; }
.sheetList a { display: grid; gap: 2px; padding: 12px 4px; border-top: 1px solid var(--line); text-decoration: none; }
.sheetList a.is-current b { text-decoration: underline; text-underline-offset: 4px; }
.mobileNav { display: none; }
@media (max-width: 720px) {
  .wrap { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mobileNav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--midnight); border-top: 1px solid var(--rule); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .mobileNav a, .mobileNav button { display: grid; place-items: center; min-height: 44px; font-size: 12px; font-weight: 500; color: var(--gray); text-decoration: none; background: none; border: 0; cursor: pointer; }
  .mobileNav a[aria-current="page"] { color: var(--soft); font-weight: 600; }
  .nav { display: none; }
  .top .today { display: none; }
}
.stat--btn { text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; width: 100%; }
.stat--btn:hover { background: var(--slate); }
.clickRow { cursor: pointer; }
.clickRow:hover td { background: var(--slate); }
.formBox { display: grid; gap: 12px; }
.formBox .formGrid { margin: 0; }
.kpiRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 20px; }
@media (min-width: 720px) { .kpiRow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kpiRow.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--rule); border-radius: 2px; font-size: 13px; color: var(--gray); }
.pill.on { background: var(--soft); color: var(--navy); border-color: var(--soft); }
.neg { color: var(--gray); }
.split { display: grid; gap: 28px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 40px; } }
.rowBtns { display: flex; gap: 6px; flex-wrap: wrap; }
.subnav { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 6px 0 18px; }
.subnav a, .subnav button { padding: 9px 12px; color: var(--gray); text-decoration: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-size: 15px; font-weight: 500; }
.subnav a[aria-current="page"], .subnav button[aria-pressed="true"] { color: var(--soft); border-bottom-color: var(--soft); }

@media (max-width: 720px) {
  .tabs button, .seg button, .btn--sm, .subnav a, .subnav button { min-height: 44px; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
.kpiRow.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* =====================================================================================================
   Instrument layer (2026-10-08). The Desk behaves like the thing Isidore sells: a precision instrument
   that is running whether or not anyone is watching. One fixed field of signal waves behind every page
   (core.js waveField), frosted navy panels over it, and one entrance per page visit: numbers count up,
   meters fill, chart bars rise and their trend line draws. Everything stops under reduced motion or
   "Pause motion" (html.still). Palette unchanged; no new colors.
   ===================================================================================================== */
body { background: var(--navy); overflow-x: hidden; }
.waveField { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#app, .mobileNav, .toast, .modalWrap { position: relative; z-index: 1; }
.mobileNav { position: fixed; }
.toast { position: fixed; z-index: 30; }
.modalWrap { position: fixed; z-index: 20; }

/* Glass: panels that carry numbers sit on the waves as frosted navy so the type stays crisp. */
.score4, .kpiRow { background: rgba(58, 79, 104, 0.55); border-color: rgba(58, 79, 104, 0.7); }
.stat { background: rgba(17, 27, 43, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stat--btn:hover { background: rgba(38, 58, 82, 0.92); }
.alerts, .notice, .drawer, .logger, .setup, .modal, .formBox.drawer { background: rgba(17, 27, 43, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav { position: sticky; top: 0; z-index: 4; background: rgba(17, 27, 43, 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gate { position: relative; padding: 28px 24px 30px; background: rgba(17, 27, 43, 0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(111, 124, 140, 0.35); }
@media (max-width: 720px) { .mobileNav { background: rgba(2, 11, 24, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }

/* Labels in sentence case: the type does the work, not the tracking. */
.kicker, .stat .label, .subhead, .tags, .flag, .crit .sev, table.t th, .status, .palKind {
  text-transform: none; letter-spacing: 0.01em; }
.kicker { font: 500 13px/1.35 var(--sans); }
.stat .label { font: 500 13px/1.35 var(--sans); color: var(--gray); }
.subhead { font: 600 13px/1.35 var(--sans); }
.tags { font: 500 12.5px/1.35 var(--sans); }
.flag { font: 600 12px/1.3 var(--sans); }
table.t th { font: 500 12.5px/1.35 var(--sans); }
.stat .val { font-variant-numeric: tabular-nums; }

/* ---- charts (core.js D.bars) ---- */
.chart { position: relative; height: 140px; margin-top: 14px; cursor: crosshair; touch-action: pan-y; }
.chartSvg { display: block; width: 100%; height: 100%; overflow: visible; border-bottom: 1px solid var(--line); }
.chartSvg .grid { stroke: rgba(58, 79, 104, 0.6); stroke-width: 1; stroke-dasharray: 2 4; }
.chartSvg .b { fill: rgba(247, 248, 250, 0.88); transform-box: fill-box; transform-origin: 50% 100%; transition: fill var(--t); }
.chartSvg .b.zero { fill: var(--slate); }
.chart:hover .chartSvg .b:not(.zero) { fill: rgba(247, 248, 250, 0.6); }
.chartSvg .trend { fill: none; stroke: var(--gray); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chartSvg .cross { stroke: var(--soft); stroke-width: 1; opacity: 0; }
.chartSvg .cross.on { opacity: 0.9; }
.chartTip { position: absolute; top: -6px; transform: translateY(-100%); padding: 6px 9px; background: var(--soft); color: var(--navy);
  font: 600 12.5px/1.2 var(--sans); white-space: nowrap; pointer-events: none; z-index: 2; }

/* ---- loading: a scan line instead of a spinner ---- */
.loading { position: relative; padding: 48px 0 40px; }
.loading .scan { display: block; height: 1px; margin-bottom: 14px; background: linear-gradient(90deg, transparent, var(--soft), transparent);
  background-size: 40% 100%; background-repeat: no-repeat; animation: scan 1.4s ease-in-out infinite; }
@keyframes scan { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ---- the entrance (once per page visit; .enter comes off after 2.6s) ---- */
.enter .stat { animation: settle 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.enter .score4 .stat:nth-child(2), .enter .kpiRow .stat:nth-child(2) { animation-delay: 60ms; }
.enter .score4 .stat:nth-child(3), .enter .kpiRow .stat:nth-child(3) { animation-delay: 120ms; }
.enter .score4 .stat:nth-child(4), .enter .kpiRow .stat:nth-child(4) { animation-delay: 180ms; }
.enter .kpiRow .stat:nth-child(5) { animation-delay: 240ms; }
.enter .kpiRow .stat:nth-child(6) { animation-delay: 300ms; }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } }
.enter .bar i, .enter .meter i.on { transform-origin: 0 50%; animation: fillX 1.1s 0.25s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fillX { from { transform: scaleX(0); } }
.enter .chartSvg .b { animation: rise 0.8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 22ms + 150ms); }
@keyframes rise { from { transform: scaleY(0); } }
.enter .chartSvg .trend { stroke-dasharray: 1; animation: draw 1.3s 0.7s ease-out both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.enter .pnl i, .enter .bars i { transform-origin: 50% 100%; animation: rise 0.8s 0.15s cubic-bezier(.2, .8, .2, 1) both; }
/* The page title gets a hairline drawn under it: the one DRAW on every page. */
.pageHead h1, .hero h1, .agentsHero h1 { position: relative; }
.pageHead h1::after, .agentsHero h1::after { content: ""; display: block; width: 56px; height: 1px; margin-top: 12px; background: var(--soft); transform-origin: 0 50%; }
.enter .pageHead h1::after, .enter .agentsHero h1::after { animation: fillX 0.9s 0.2s cubic-bezier(.2, .8, .2, 1) both; }

/* Motion that answers the person: tabs and nav slide their underline, buttons respond. */
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--soft); transform: scaleX(0); transform-origin: 0 50%; transition: transform calc(var(--t) * 1.6) cubic-bezier(.2, .8, .2, 1); }
.nav a[aria-current="page"]::after, .nav a:hover::after { transform: scaleX(1); }
.nav a:hover:not([aria-current="page"])::after { opacity: 0.35; }
.btn:active { transform: translateY(1px); }

/* Still: reduced motion or "Pause motion". Final states, nothing moves. */
html.still .enter *, html.still .enter *::after, html.still .loading .scan { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .enter *, .enter *::after, .loading .scan { animation: none !important; }
  .nav a::after { transition: none; }
}

/* =====================================================================================================
   Phone (2026-10-09): checked on the fly. A sticky glass header with only what fits, a bottom bar with
   icons (Today, Pipeline, +, Calls, Money, More), pop-ups as bottom sheets, and the Today quick bar
   folded into the + so the first screen is the plan and the numbers.
   ===================================================================================================== */
.sheetGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(58, 79, 104, 0.6); border: 1px solid rgba(58, 79, 104, 0.6); }
.sheetGrid a { display: grid; gap: 4px; align-content: start; padding: 14px 12px; min-height: 76px; background: var(--navy); text-decoration: none; }
.sheetGrid a b { font: 700 16px/1.2 var(--display); }
.sheetGrid a .small { font-size: 12.5px; line-height: 1.35; }
.sheetGrid a.is-current { background: var(--slate); }
.sheetGrid .badge { justify-self: start; margin: 0; }
.sheetFoot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quickGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quickGrid .btn { min-height: 52px; justify-content: flex-start; text-align: left; }

@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .top { position: sticky; top: 0; z-index: 6; margin: 0 -16px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: rgba(17, 27, 43, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(58, 79, 104, 0.6); }
  .top .linkBtn { display: none; }                 /* Pause motion and Sign out live in More */
  .top .iconBtn { width: 40px; height: 40px; }

  .mobileNav { grid-template-columns: repeat(6, 1fr); grid-auto-flow: row; padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); }
  .mobileNav a, .mobileNav button { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; padding: 0;
    font: 500 11px/1.1 var(--sans); color: var(--gray); text-decoration: none; background: none; border: 0; cursor: pointer; }
  .mobileNav svg { width: 22px; height: 22px; }
  .mobileNav a[aria-current="page"], .mobileNav button[aria-current="page"] { color: var(--soft); }
  .mobileNav a[aria-current="page"] span, .mobileNav button[aria-current="page"] span { font-weight: 600; }
  .mobileNav .plusBtn { align-self: center; justify-self: center; width: 46px; height: 46px; min-height: 46px; background: var(--soft); color: var(--navy); border-radius: 2px; }
  .mobileNav .plusBtn svg { width: 22px; height: 22px; stroke-width: 2.4; }

  /* Pop-ups rise from the bottom, where the thumb is. */
  .modalWrap { place-items: end stretch; padding: 0; }
  .modal { max-width: none; border-left: 0; border-right: 0; border-bottom: 0; max-height: 88vh; overflow-y: auto;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); animation: sheetUp 0.28s cubic-bezier(.2, .8, .2, 1); }
  @keyframes sheetUp { from { transform: translateY(24px); opacity: 0.4; } }

  /* Today: the + already holds the quick adds. */
  .todayQuick { display: none; }
  h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .hero { padding: 20px 0 16px; }
  .hero p.lead { font-size: 16px; }
  .pageHead { padding: 20px 0 12px; }
  .stat { padding: 12px 12px 14px; }
  .stat .val { font-size: 34px; margin-top: 6px; }
  .time { gap: 8px; }
  .chart { height: 120px; }
  .num { min-width: 40px; font-size: 34px; }
  .moveHead { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }
html.still .modal { animation: none; }
/* Every tap target on a phone is at least 44px tall: chips, small buttons, text buttons, ticks. */
@media (max-width: 720px) {
  .wrap button:not(.tick):not(.iconBtn), .wrap a.btn, .wrap .pill, .modal button:not(.iconBtn):not(.tick) { min-height: 44px; }
  .wrap .linkBtn { display: inline-flex; align-items: center; }
  .tick { width: 32px; height: 32px; }
}
@media (max-width: 720px) { .tick { position: relative; } .tick::before { content: ""; position: absolute; inset: -6px; } }