/* App styles. All colors, sizes and spacing come from tokens.css; nothing here hard-codes them. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 var(--text-base)/var(--leading) var(--font); color: var(--ink); background: var(--bg);
       -webkit-font-smoothing: antialiased; font-optical-sizing: auto; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 1, "kern" 1; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: var(--s-3); top: var(--s-2); background: var(--surface); padding: var(--s-2) var(--s-3); z-index: 20; }

/* ------------------------------------------------------------ sidebar and top bar */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); color: var(--rail-ink); padding: var(--s-3) var(--s-3) var(--s-3); display: flex; flex-direction: column; gap: var(--s-3);
        position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 4px solid var(--accent); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--rail-ink); text-decoration: none; padding: var(--s-2); }
.brand:hover { color: var(--rail-ink); }
.brand .mark { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
               font: var(--display-weight) 19px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.brand .name { font: 700 19px/1.1 var(--font-display); letter-spacing: var(--display-track); text-transform: var(--display-case); }
.brand .name small { display: block; font: 500 13px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--rail-muted); margin-top: 3px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group > .label { font: 700 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--rail-muted); padding: var(--s-2) var(--s-2) var(--s-1); }
.rail a.nav, .rail button.nav { display: flex; align-items: center; gap: 12px; color: var(--rail-ink); text-decoration: none; font: 600 var(--text-base)/1.2 var(--font);
              padding: 8px 12px; min-height: calc(46px * var(--roomy)); border-radius: var(--radius-sm); background: none; border: 0; cursor: pointer; width: 100%; text-align: left;
              transition: background var(--ease); }
.rail a.nav:hover, .rail button.nav:hover { background: var(--rail-2); color: #fff; }
.rail a.nav.active { background: var(--accent); color: var(--accent-ink); }
.rail a.nav .badge { margin-left: auto; }
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-foot { margin-top: auto; border-top: 1px solid var(--rail-2); padding-top: var(--s-2); }
.badge { background: var(--bad); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 14px; font-weight: 700; line-height: 22px; min-width: 24px; text-align: center; display: inline-block; }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; position: sticky; top: 0; z-index: 20; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
          background: var(--rail); color: var(--rail-ink); border-bottom: 4px solid var(--accent); }
.topbar .title { font: 700 20px/1.1 var(--font-display); letter-spacing: var(--display-track); text-transform: var(--display-case); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .btn { min-height: 44px; }
.scrim { display: none; }
.rail { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rail-2) transparent; }

/* ------------------------------------------------------------ desktop sidebar: fit more without scrolling */
@media (min-width: 901px) {
  .rail { gap: var(--s-2); }
  .brand { padding: var(--s-1) var(--s-2); }
  .brand .mark { width: 38px; height: 38px; font-size: 17px; }
  .brand .name { font-size: 17px; }
  .brand .name small { display: none; }
  .nav-group > .label { padding: var(--s-1) var(--s-2) 2px; }
  .rail a.nav, .rail button.nav { min-height: calc(40px * var(--roomy)); padding: 6px 12px; }
}
@media (min-width: 901px) and (max-height: 840px) {
  .rail a.nav, .rail button.nav { min-height: calc(36px * var(--roomy)); padding: 4px 12px; }
  .nav-group { gap: 0; }
  .ico { width: 22px; height: 22px; }
}

main { width: 100%; max-width: var(--page); margin: 0 auto; padding: var(--s-5) var(--s-5) var(--s-6); animation: rise .2s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------ type */
h1 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.05; letter-spacing: var(--display-track); text-transform: var(--display-case); font-weight: var(--display-weight); text-wrap: balance; margin: 0 0 var(--s-1); color: var(--ink); }
h2 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; font-weight: var(--display-weight); letter-spacing: var(--display-track); text-transform: var(--display-case); color: var(--ink);
     margin: var(--s-6) 0 var(--s-3); display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
h2::before { content: ""; width: 10px; height: .8em; background: var(--accent); border-radius: 2px; align-self: center; flex: none; }
h2 .muted, h2 .ok, h2 .bad { font-size: var(--text-sm); font-weight: 500; }
h3 { font-size: var(--text-lg); margin: 0 0 var(--s-1); font-weight: 700; }
.muted { color: var(--muted); font-size: var(--text-sm); }
p { margin: 0 0 var(--s-3); }
p.muted { margin: var(--s-1) 0 var(--s-3); }
.id { font-family: var(--mono); font-weight: 650; font-size: .9em; white-space: nowrap; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.page-head h1 { margin: 0; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }

/* ------------------------------------------------------------ cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); margin-bottom: var(--s-3); box-shadow: var(--shadow); transition: box-shadow var(--ease), border-color var(--ease); }
.card > strong:first-child { font-size: var(--text-lg); font-weight: 700; display: block; margin-bottom: var(--s-1); }
.card.flat { box-shadow: none; }
.hero { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.big-number { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; font-weight: var(--display-weight); letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.grid > .card > .muted:first-child { margin-bottom: var(--s-1); }
/* tinted cards: ok / watch / problem / accent. A soft fill, never a loud stripe */
.tone-ok { background: var(--ok-soft); border-color: var(--ok-line); }
.tone-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.tone-bad { background: var(--bad-soft); border-color: var(--bad-line); }
.tone-accent { background: var(--accent-soft); border-color: var(--accent-line); }

/* ------------------------------------------------------------ tables */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
th { text-align: left; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); background: var(--surface-2); padding: 12px var(--s-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 14px var(--s-3); border-top: 1px solid var(--line); vertical-align: top; }
tr:first-child td { border-top: 0; }
table tr:hover > td { background: var(--hover-row); }
table { box-shadow: var(--shadow); }
th { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table .muted { font-size: var(--text-sm); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------ buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); border: 1px solid var(--accent); border-radius: var(--radius-sm);
       padding: 10px var(--s-3); min-height: var(--tap); font: 700 var(--text-base)/1.15 var(--font); letter-spacing: .01em; cursor: pointer; background: var(--accent); color: var(--accent-ink); text-decoration: none; box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
       transition: background var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease); }
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--ink-2); border-width: 2px; box-shadow: none; }
.btn.secondary:hover { background: var(--accent-soft); border-color: var(--ink); color: var(--ink); }
.btn.quiet { background: transparent; color: var(--ink-2); border-color: transparent; box-shadow: none; }
.btn.quiet:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn.small { padding: 6px var(--s-2); min-height: 44px; font-size: var(--text-sm); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }
label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); margin-bottom: var(--s-1); }
input, select, textarea { font: inherit; font-size: var(--text-base); padding: 10px 12px; min-height: var(--tap); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
                          width: 100%; background: var(--surface); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--accent-line); }
input:disabled { background: var(--surface-2); color: var(--muted); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; accent-color: var(--accent); }
textarea { line-height: 1.45; resize: vertical; }
td input, td select { padding: 6px var(--s-2); min-height: 40px; font-size: var(--text-sm); min-width: 0; }
td select { min-width: 130px; }
input[type=date] { min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.actions { margin-top: var(--s-3); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.btns { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ask box: type it, the assistant fills it in */
.ask { background: var(--accent-soft); border-color: var(--accent-line); }
.ask textarea { min-height: 128px; background: var(--surface); }
.ask .hint { color: var(--muted); font-size: var(--text-sm); margin: var(--s-2) 0 0; }
form.busy { opacity: .75; }
details.more { margin: var(--s-3) 0; }
details.more > summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: var(--s-2) 0; list-style: none; min-height: 44px; display: flex; align-items: center; }
details.more > summary::before { content: "+"; font-weight: 700; width: 24px; }
details.more[open] > summary::before { content: "\2212"; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary { margin-bottom: var(--s-2); }
.note-list { margin: var(--s-2) 0 0; padding-left: var(--s-4); }
.note-list li { margin: var(--s-1) 0; }
.phase-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.phase-summary .card { margin: 0; padding: var(--s-3); }
.phase-summary ol { margin: var(--s-2) 0 0; padding-left: var(--s-4); font-size: var(--text-sm); color: var(--ink-2); }
.phase-summary .ph { font-weight: 650; }

/* voice input */
.voice-wrap { position: relative; }
.voice-wrap > textarea, .voice-wrap > input { padding-right: 60px; }
.mic { position: absolute; right: var(--s-2); top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
       border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; cursor: pointer; padding: 0; min-height: 0; }
.voice-wrap.tall .mic { top: auto; bottom: 10px; transform: none; }
.mic:hover { background: var(--accent); color: var(--accent-ink); }
.mic.rec { background: var(--bad); border-color: var(--bad); color: #fff; animation: pulse 1.1s infinite; }
.mic.wait { opacity: .6; cursor: progress; }
.voice-note { font-size: var(--text-sm); color: var(--muted); margin: var(--s-1) 0 0; }
.voice-note.bad { color: var(--bad); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(180, 35, 24, .45); } 100% { box-shadow: 0 0 0 12px rgba(180, 35, 24, 0); } }

/* ------------------------------------------------------------ feedback */
.flash { padding: var(--s-3); border-radius: var(--radius-sm); margin-bottom: var(--s-3); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.flash.error { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad-ink); }
.ok { color: var(--ok); font-weight: 600; } .bad { color: var(--bad); font-weight: 600; }
.status, .pill { display: inline-block; font-size: var(--text-sm); font-weight: 600; padding: 2px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill.s-signed { background: var(--info-soft); color: var(--info); }
.pill.s-in-progress, .status.Invoiced, .status.Part { background: var(--warn-soft); color: var(--warn); }
.pill.s-complete, .status.Paid { background: var(--ok-soft); color: var(--ok); }
.pill.s-lost { background: var(--bad-soft); color: var(--bad); }
.pill.s-on-hold { background: var(--surface-2); color: var(--ink-2); }
.review-item { }
.tag { display: inline-block; font-size: var(--text-sm); font-weight: 700; color: var(--accent-text); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; margin-bottom: var(--s-2); }

/* ------------------------------------------------------------ Home */
.todo { padding: 0; overflow: hidden; }
.todo .row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); }
.todo .row:first-child { border-top: 0; }
.todo .row .what { flex: 1; min-width: 0; }
.todo .row .what b { display: block; font-weight: 650; }
.todo .row .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.todo .row.warn .dot { background: var(--warn); } .todo .row.bad .dot { background: var(--bad); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }
.stats .card { margin: 0; padding: var(--s-3); }
.stats .big-number { font-size: calc(var(--text-2xl) * .75); white-space: nowrap; }
table.pay { min-width: 880px; } table.pay td:nth-child(2) { min-width: 220px; } table.pay input[type=date] { min-width: 150px; }
.quick { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-3) 0 var(--s-4); }
details.fold > summary { cursor: pointer; font-size: var(--text-xl); font-weight: 650; padding: var(--s-2) 0; list-style: none; display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-5); }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "Show"; font-size: var(--text-sm); font-weight: 700; color: var(--link); margin-left: auto; }
details.fold[open] > summary::after { content: "Hide"; }
details.fold > table { margin-top: var(--s-2); }

/* ------------------------------------------------------------ week view, photos */
table.week td, table.week th { min-width: 104px; vertical-align: top; }
table.week .today, table.week th.today { background: var(--accent-soft); }
.chip { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); padding: 2px 12px; margin: 2px 0; cursor: pointer; font: inherit; font-size: var(--text-sm); min-height: 32px; }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.thumbs figure { margin: 0; }
.thumbs img { border-radius: var(--radius-sm); display: block; }

/* ------------------------------------------------------------ big buttons for the daily jobs (Home) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-4); }
a.tile { display: flex; flex-direction: column; gap: var(--s-2); justify-content: space-between; min-height: calc(132px * var(--roomy)); padding: var(--s-3) var(--s-3); border-radius: var(--radius);
         background: var(--surface); color: var(--ink); text-decoration: none; border: 2px solid var(--ink-2); box-shadow: 0 3px 0 var(--ink-2); transition: transform var(--ease), box-shadow var(--ease), background var(--ease); }
a.tile:hover { background: var(--accent-soft); }
a.tile:active { transform: translateY(3px); box-shadow: none; }
a.tile .ico { width: 36px; height: 36px; stroke-width: 2.2; }
a.tile .t { font: var(--display-weight) var(--text-xl)/1.05 var(--font-display); letter-spacing: var(--display-track); text-transform: var(--display-case); }
a.tile .s { font-size: var(--text-sm); color: var(--muted); line-height: 1.3; }
a.tile.main { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); box-shadow: 0 3px 0 var(--accent-ink); }
a.tile.main .s { color: var(--accent-ink); opacity: .8; }
a.tile.main:hover { background: var(--accent-strong); }
a.tile .badge { align-self: flex-start; }

/* ------------------------------------------------------------ Look panel (font pack, text size, colors) */
dialog.look { border: 0; padding: 0; background: var(--surface); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lift);
              width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; }
dialog.look::backdrop { background: var(--overlay); }
.look-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.look-head h2 { margin: 0; font-size: var(--text-xl); }
.look-body { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: var(--s-4); }
.look-body fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.look-body legend { font: 700 var(--text-base)/1.2 var(--font); padding: 0 0 var(--s-2); }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-2); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; margin: 0; }
.opt > span { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; text-align: center; min-height: var(--tap); padding: var(--s-2); border: 2px solid var(--line-strong);
            border-radius: var(--radius-sm); background: var(--surface); font-weight: 700; line-height: 1.2; transition: background var(--ease), border-color var(--ease); }
.opt input:hover + span { border-color: var(--ink-2); }
.opt input:checked + span { border-color: var(--ink); background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 0 var(--ink); }
.opt input:focus-visible + span { outline: 3px solid var(--link); outline-offset: 2px; }
.opt small { font-weight: 500; font-size: var(--text-sm); opacity: .85; }
.opt .sample { font-size: 22px; line-height: 1.1; }
.opt .sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #1B1F23; }
.look-note { color: var(--muted); font-size: var(--text-sm); margin: 0; }

.update-banner { display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-3); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.update-banner .btn { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); box-shadow: none; }

/* ------------------------------------------------------------ small touches */
.todo .row .what b { font-size: var(--text-lg); }
.todo .row .dot { width: 14px; height: 14px; }
.flash { border-left: 6px solid var(--accent); }
.flash.error { border-left-color: var(--bad); }

/* ------------------------------------------------------------ never lost: Next task, the job tracker, the glow */
/* Next task: always at the top of the sidebar (and in the phone top bar) */
.next-btn { display: flex; align-items: center; gap: 10px; min-height: calc(48px * var(--roomy)); padding: 8px 14px; border-radius: var(--radius-sm);
            border: 2px solid var(--accent); color: var(--accent); background: transparent; text-decoration: none; font: 700 var(--text-base)/1.1 var(--font);
            transition: background var(--ease), color var(--ease); }
.next-btn:hover { background: var(--accent); color: var(--accent-ink); }
.rail .next-btn { flex: none; position: sticky; top: calc(-1 * var(--s-3)); z-index: 2; background: var(--rail); box-shadow: 0 -12px 0 4px var(--rail), 0 10px 0 2px var(--rail); }
.rail .next-btn:hover { background: var(--accent); }
.topbar .next-btn { min-height: 44px; padding: 6px 12px; white-space: nowrap; }

/* the glow: one field or button per page, the next thing to press */
.glow { box-shadow: var(--glow-ring); animation: glow var(--glow-pulse) ease-in-out infinite; position: relative; z-index: 1; }
input.glow, textarea.glow, select.glow { border-color: var(--accent-text); }
@keyframes glow { 0%, 100% { box-shadow: var(--glow-ring); } 50% { box-shadow: var(--glow-ring), var(--glow-halo); } }
.next-tag { display: inline-block; margin: 0 var(--s-2) var(--s-1) 0; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
            font: 700 14px/1.6 var(--font); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
td > .next-tag, .grid > div > .next-tag { display: table; }

/* the job tracker: five stages, "you are here", and the next thing */
.tracker { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow);
           padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.tracker-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.tracker-job { font-weight: 700; color: var(--ink); text-decoration: none; }
.tracker-where { color: var(--ink-2); }
.tracker .contact { margin-left: auto; display: flex; gap: var(--s-3); font-size: var(--text-sm); }
.stages { list-style: none; margin: var(--s-3) 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stages li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--muted); font-size: var(--text-sm); line-height: 1.2; }
.stages li::before { content: ""; position: absolute; top: 18px; left: -50%; width: 100%; height: 4px; background: var(--line); z-index: 0; }
.stages li:first-child::before { display: none; }
.stages li.done::before, .stages li.current::before { background: var(--ok); }
.stages .n { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
             background: var(--surface); border: 3px solid var(--line-strong); color: var(--muted); }
.stages li.done { color: var(--ink-2); }
.stages li.done .n { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.stages li.current { color: var(--ink); font-weight: 700; }
.stages li.current .n { background: var(--accent); border-color: var(--accent-text); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.tracker-next { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.tracker-next .what, .next-hero .what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tracker-next b, .next-hero b { font-size: var(--text-lg); }
.tracker-next.wait { background: var(--surface-2); border: 2px dashed var(--line-strong); }
.tracker-next.done { background: var(--ok-soft); border-color: var(--ok-line); }
.btn.go { font-size: var(--text-lg); padding-left: var(--s-4); padding-right: var(--s-4); white-space: nowrap; }

/* Home: "Your next task" */
.next-hero { display: flex; align-items: center; gap: var(--s-4); background: var(--accent-soft); border: 2px solid var(--accent); }
.next-hero b { font-size: var(--text-xl); font-family: var(--font-display); text-transform: var(--display-case); letter-spacing: var(--display-track); }
.next-hero.done { background: var(--ok-soft); border-color: var(--ok-line); }

@media (max-width: 900px) {
  .rail .next-btn { display: none; }   /* the top bar carries it on a phone */
  .tracker { padding: var(--s-3); }
  .tracker .contact { margin-left: 0; width: 100%; }
  .stages .n { width: 32px; height: 32px; } .stages li::before { top: 14px; }
  .stages li { font-size: 13px; }
  .tracker-next, .next-hero { flex-direction: column; align-items: stretch; }
  .tracker-next .btn, .next-hero .btn { width: 100%; }
}
@media (max-width: 420px) { .topbar .title { display: none; } .topbar .next-btn { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .glow { animation: none; } }

/* ------------------------------------------------------------ footer */
footer { width: 100%; max-width: var(--page); margin: auto auto 0; padding: 0 var(--s-5) var(--s-5); color: var(--muted); font-size: var(--text-sm); display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
footer a { color: var(--muted); }

/* ------------------------------------------------------------ phone */
@media (max-width: 900px) {
  .shell { display: block; }
  .topbar { display: flex; }
  .rail { position: fixed; z-index: 40; top: 0; left: 0; bottom: 0; width: min(86vw, 320px); transform: translateX(-102%); transition: transform .2s ease-out;
          box-shadow: var(--shadow-lift); }
  body.nav-open .rail { transform: none; }
  body.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: var(--overlay); }
  .stats { grid-template-columns: 1fr 1fr; } .stats .big-number { font-size: calc(var(--text-2xl) * .72); }
  .todo .row .dot { align-self: flex-start; margin-top: 10px; }
  details.fold > summary { flex-wrap: wrap; }
  main { padding: var(--s-4) var(--s-3) var(--s-6); }
  h1 { font-size: calc(var(--text-2xl) * .8); } h2 { font-size: calc(var(--text-xl) * .9); margin-top: var(--s-5); }
  .card { padding: var(--s-3); }
  .hide-sm { display: none; }
  .tiles { grid-template-columns: 1fr 1fr; gap: var(--s-2); } a.tile.main { grid-column: 1 / -1; min-height: 0; } a.tile { min-height: calc(112px * var(--roomy)); } a.tile .t { font-size: var(--text-lg); }
  th, td { padding: 12px var(--s-2); }
  table { font-size: var(--text-sm); }
  .todo .row { padding: var(--s-3); flex-wrap: wrap; }
  .todo .row .btn { width: 100%; }
  .quick .btn { flex: 1 1 100%; }
  footer { padding: 0 var(--s-3) var(--s-5); }
}
@media (prefers-reduced-motion: reduce) { main { animation: none; } * { transition-duration: 0s !important; } .rail { transition: none; } }
@media print { .rail, .topbar, footer, .actions { display: none; } .shell { display: block; } body { background: #fff; } .card, table { box-shadow: none; } }


/* ------------------------------------------------------------ AI status */
.ai-head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--text-lg); }
.ai-dot, .ai-pill::before { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--muted); display: inline-block; }
.ai-dot.up, .ai-pill.up::before { background: var(--ok); }
.ai-dot.none, .ai-pill.none::before { background: var(--accent); }
.ai-pill { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 var(--s-3); border: 2px solid var(--line); border-radius: var(--radius-sm);
           background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.ai-pill::before { content: ""; }
.ai-foot.up::before { content: "\25CF "; color: var(--ok); }
.ai-foot.none::before { content: "\25CF "; color: var(--accent); }
.ai-banner { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-4); background: var(--surface); border-bottom: 4px solid var(--accent); font-size: var(--text-sm); }
.ai-banner.inline { margin-top: var(--s-3); border: 2px solid var(--line); border-radius: var(--radius-sm); }
.ai-banner progress { flex: 1; min-width: 160px; height: 14px; accent-color: var(--accent); }
.ai-suggest { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.ai-suggest form { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.auto-row { margin-top: var(--s-3); } .auto-row .check { display: flex; gap: var(--s-2); align-items: center; font-weight: 400; color: var(--muted); }