/* Onboarding Tracker — design system ("Mist", sharp corners).
   Tokens first, then the app shell, then components. Tailwind utilities (loaded
   after this file) still work on top, and tailwind.config in base.html maps the
   same colours so `text-ink-2`, `bg-page` etc. match these variables. */

:root {
  --page: #f6f7fb; --surface: #fff; --line: #e5e7f0; --line-2: #eff0f6; --hover: #f7f8fc;
  --ink: #1c2033; --ink-2: #5a6078; --ink-3: #9095ab;
  --brand: #453fb0; --brand-h: #3a3499; --tint: #ecebfb; --ring: rgba(69, 63, 176, .2);
  /* health: darker tone for text, pastel tone for bars and dots */
  --red: #b4534b; --red-t: #fdf1f0; --red-f: #ea9a93;
  --amber: #96703a; --amber-t: #fdf6e7; --amber-f: #ecc47e;
  --green: #3d8263; --green-t: #edf7f1; --green-f: #8fd0ae;
  --high: #b0693a; --high-t: #fdf1e8;
  --shadow: 0 1px 2px rgba(28, 32, 51, .05), 0 4px 14px rgba(28, 32, 51, .05);
  --pop: 0 0 0 1px rgba(28, 32, 51, .07), 0 18px 50px rgba(28, 32, 51, .18);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --side-w: 216px;
}

/* `hidden` must always win. Without this, a layout class such as Tailwind's `flex` sets
   `display` and quietly un-hides the element (it did, on the note edit forms). */
[hidden] { display: none !important; }

html { background: var(--page); }
body { font-size: 13px; line-height: 1.45; color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
/* Tailwind's reset (loaded after this file) flattens headings, so these carry a class-level selector */
.content h1 { font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.content h2, .content h3, .drawer h3 { font-weight: 600; color: var(--ink); }
.tabular, td.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- shell: sidebar + top bar ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 14px 10px;
  border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 55%, var(--page)); }
.brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.mark { display: grid; place-items: center; width: 22px; height: 22px; flex: none; background: var(--brand); }
.mark svg { width: 13px; height: 13px; }
.nav { position: relative; display: grid; gap: 1px; }
.nav a { position: relative; display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 9px; color: var(--ink-2); font-weight: 500; transition: color .2s; }
.nav a:hover { color: var(--ink); }
.nav a svg { width: 15px; height: 15px; flex: none; opacity: .75; transition: opacity .2s, color .2s; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] svg { opacity: 1; color: var(--brand); }
/* the highlight is its own element so the browser can slide it between pages */
.nav-ind { position: absolute; left: 0; right: 0; top: 0; height: 30px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .04); pointer-events: none; view-transition-name: nav-ind; }
.nav .count { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nav .count.hot { padding: 0 5px; color: var(--red); background: var(--red-t); }
.side-note { margin: auto 0 -4px; padding: 0 8px; color: var(--ink-2); font-size: 11px; line-height: 1.4; }
.side-note a, .demo-note a { text-decoration: underline; text-underline-offset: 2px; }
.side-note a:hover, .demo-note a:hover { color: var(--brand); }
.demo-note { display: none; padding: 0 24px 20px; color: var(--ink-2); font-size: 11px; }
.side-foot { display: flex; align-items: center; gap: 8px; padding: 12px 8px 6px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 12px; }
.side-foot button { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.side-foot button:hover { color: var(--ink); }

.main { display: flex; min-width: 0; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 24px;
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(8px); }
.crumb { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.crumb b { font-weight: 500; color: var(--ink); }
.search-open { display: flex; align-items: center; gap: 8px; width: 260px; min-width: 0; height: 30px; margin-left: auto; padding: 0 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font-size: 12.5px; transition: border-color .2s, box-shadow .2s; }
.search-open:hover { border-color: var(--ink-3); }
.search-open:focus-visible { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.search-open svg { width: 14px; height: 14px; flex: none; }
.search-open span { flex: 1; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
kbd { padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface); color: var(--ink-3); font: 500 10.5px inherit; font-family: inherit; }
.tb-reset { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; background: var(--amber-t); color: var(--amber); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.tb-reset::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tb-reset.done { background: var(--tint); color: var(--brand); }
.tb-reset a { text-decoration: underline; }
.tb-date { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.content { width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 24px 40px; }
.mobile-nav { display: none; }

/* ---------- page header ---------- */
.ph { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; }
.ph p, .caption { margin-top: 2px; color: var(--ink-2); font-size: 13px; }
.sec-h { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 9px; }
.content .sec-h h2, .content .sec-h h3 { font-size: 13.5px; }
.sec-h .n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sec-h a { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.sec-h a:hover { color: var(--ink); }

/* ---------- buttons ---------- */
.btn, .btn-quiet { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--brand);
  background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .12s; }
.btn:hover { background: var(--brand-h); box-shadow: 0 2px 8px var(--ring); }
.btn:active, .btn-quiet:active { transform: scale(.97); }
.btn:focus-visible, .btn-quiet:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ring); }
.btn:disabled { opacity: .5; }
.btn-quiet { border-color: color-mix(in srgb, var(--ink) 28%, var(--line)); background: var(--surface); color: var(--ink); }
.btn-quiet:hover { border-color: var(--ink); background: var(--hover); }
.btn-ghost { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.btn-ghost:hover { background: var(--line-2); color: var(--ink); }
.btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
.arr { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arr, .btn-quiet:hover .arr { transform: translateX(3px); }

/* ---------- tags: health badges and severity / stage chips share one shape ---------- */
.badge, .chip { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px; font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; background: var(--line-2); color: var(--ink-2); }
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge-red, .chip-critical { background: var(--red-t); color: var(--red); }
.badge-amber, .chip-medium { background: var(--amber-t); color: var(--amber); }
.badge-green { background: var(--green-t); color: var(--green); }
.chip-high { background: var(--high-t); color: var(--high); }
.ref { font: 500 10.5px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink-3); }

/* owner initials */
.av { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; background: var(--tint); color: var(--brand); font-size: 10px; font-weight: 600; }
.av-sm { width: 20px; height: 20px; font-size: 9px; }
.owner { display: inline-flex; align-items: center; gap: 7px; width: 142px; color: var(--ink-2); text-align: left; white-space: nowrap; }

/* ---------- cards, panels, tiles ---------- */
.card { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.panel { padding: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.tile { --c: var(--ink); --t: var(--surface); --f: var(--ink-3); display: grid; gap: 3px; padding: 14px 16px 13px; background: var(--t);
  border: 1px solid color-mix(in srgb, var(--c) 13%, transparent); transition: transform .25s var(--ease), box-shadow .25s; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tile-neutral { border-color: var(--line); }
.tile-red { --c: var(--red); --t: var(--red-t); --f: var(--red-f); }
.tile-amber { --c: var(--amber); --t: var(--amber-t); --f: var(--amber-f); }
.tile-green { --c: var(--green); --t: var(--green-t); --f: var(--green-f); }
.tile .k { display: flex; align-items: center; gap: 6px; color: var(--c); font-size: 12px; font-weight: 500; }
.tile .k i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tile .k em { margin-left: auto; font-style: normal; opacity: .7; font-variant-numeric: tabular-nums; }
.tile-neutral .k { color: var(--ink-2); }
.tile .v { color: var(--c); font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .c { color: color-mix(in srgb, var(--c) 70%, var(--ink-3)); font-size: 12px; }
.tile-neutral .c { color: var(--ink-3); }
.mix { display: flex; gap: 2px; height: 5px; margin-top: 6px; }
.share { height: 3px; margin-top: 7px; overflow: hidden; background: color-mix(in srgb, var(--c) 14%, transparent); }
.share i, .mix i { display: block; height: 100%; transform-origin: left; animation: growx .9s var(--ease) .25s both; }
.share i { width: var(--w); background: var(--f); }

/* ---------- days in stage: text + bar toward the stage limit ---------- */
.days { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.days > span:first-child { flex: none; min-width: 84px; }
.dbar { display: inline-block; flex: none; width: 88px; height: 4px; overflow: hidden; background: var(--line); vertical-align: middle; }
.dbar i { display: block; width: var(--w); height: 100%; background: var(--c, var(--green-f)); transform-origin: left; animation: growx .9s var(--ease) calc(var(--i, 0) * 35ms + 300ms) both; }
.dbar-red { --c: var(--red-f); } .dbar-amber { --c: var(--amber-f); } .dbar-green { --c: var(--green-f); }
/* inside a centred table the bar flexes so it can never spill into the next column */
.grid-table .days { display: flex; width: 100%; max-width: 186px; margin: 0 auto; }
.grid-table .days > span:first-child { text-align: right; }
.grid-table .dbar { flex: 1; width: auto; min-width: 0; }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; }
.th { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; font-weight: 500; text-align: left; white-space: nowrap; user-select: none; }
.td { padding: 10px 12px; border-top: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:first-child .td { border-top: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tc { text-align: center; }
tbody tr { transition: background .18s; }
tbody tr:hover { background: var(--hover); }
/* symmetric, centred table (dashboard at-risk list) */
.grid-table { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: collapse; }
.grid-table .th, .grid-table .td { text-align: center; }
.grid-table .td { height: 48px; padding-top: 0; padding-bottom: 0; overflow: hidden; white-space: nowrap; }
.grid-table .cn { font-weight: 500; line-height: 1.3; white-space: normal; color: var(--ink); }
.grid-table .sub, .sub { color: var(--ink-3); font-size: 11.5px; }
.grid-table .why { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: 12.5px; line-height: 1.3; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.grid-table .why em { color: var(--ink-3); font-style: normal; }
.gl { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gl-late { color: var(--red); font-weight: 500; }
tr[data-peek], [data-peek] { cursor: pointer; }
tr[data-peek]:focus-visible { outline: 0; background: var(--hover); box-shadow: inset 2px 0 0 var(--brand); }
table.sortable th { cursor: pointer; }
table.sortable th:hover { color: var(--ink); }
table.sortable th::after { content: "↕"; display: inline-block; width: 10px; margin-left: 4px; opacity: 0; }
table.sortable th:hover::after { opacity: .6; }
table.sortable th[aria-sort]::after { content: "↑"; color: var(--brand); opacity: 1; }
table.sortable th[aria-sort="descending"]::after { content: "↓"; }

/* ---------- pipeline board ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.f { height: 26px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; transition: .2s; }
.f:hover { color: var(--ink); }
.f[aria-pressed="true"] { border-color: transparent; background: var(--tint); color: var(--brand); }
.board { display: grid; grid-template-columns: repeat(5, minmax(178px, 1fr)); gap: 12px; margin-top: 22px; padding-bottom: 4px; overflow-x: auto; }
.col-h { display: flex; align-items: center; gap: 7px; padding: 0 2px 9px; font-size: 12px; font-weight: 600; }
.col-h .n { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.col { display: grid; gap: 8px; align-content: start; }
.pc { display: grid; gap: 8px; padding: 11px 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s, opacity .3s, border-color .2s; }
.pc:hover { border-color: var(--ink-3); box-shadow: var(--shadow); transform: translateY(-2px); }
.pc.dim { opacity: .22; pointer-events: none; transform: scale(.985); }
.pc .top { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.pc .cn { font-weight: 500; line-height: 1.3; color: var(--ink); }
.pc .dbar { width: 100%; }
.pc .meta { display: flex; align-items: center; justify-content: space-between; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--green-f); box-shadow: 0 0 0 3px var(--green-t); }
.dot-red { background: var(--red-f); box-shadow: 0 0 0 3px var(--red-t); }
.dot-amber { background: var(--amber-f); box-shadow: 0 0 0 3px var(--amber-t); }

/* ---------- lists (This week) ---------- */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.list { padding: 4px 16px; }
.list .sec-h { margin: 12px 0 0; }
.li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.li:last-child { border-bottom: 0; }
.li .grow { flex: 1; min-width: 0; }
.li .t { font-weight: 500; color: var(--ink); transition: color .2s; }
.li:hover .t { color: var(--brand); }
.li .s { overflow: hidden; color: var(--ink-3); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.li .r { color: var(--ink-2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- forms and small bits ---------- */
.input { width: 100%; height: 30px; padding: 0 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 12.5px; transition: border-color .2s, box-shadow .2s; }
.input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
textarea.input { height: auto; padding: 6px 9px; }
/* labelled form fields + inline form error */
.field { display: grid; gap: 4px; }
.field > span { color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.form-error { padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--red) 18%, transparent); background: var(--red-t); color: var(--red); font-size: 12.5px; }
/* tick-box chips (meeting attendees) */
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 500; transition: .2s; }
.pick:hover span { color: var(--ink); border-color: var(--ink-3); }
.pick input:checked + span { border-color: transparent; background: var(--tint); color: var(--brand); }
.pick input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }

/* ---------- calendar ---------- */
.cal-bar { display: flex; align-items: center; gap: 6px; margin: 22px 0 10px; }
.content .cal-bar h2 { margin-left: 6px; font-size: 15px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(128px, 1fr)); min-width: 900px; }
.cal-h { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.cal-d { display: flex; flex-direction: column; gap: 4px; min-height: 112px; padding: 6px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.cal-d:nth-child(7n) { border-right: 0; }
.cal-we { background: color-mix(in srgb, var(--page) 60%, var(--surface)); }
.cal-out .cal-n, .cal-out .ev { opacity: .45; }
.cal-n { display: inline-grid; place-items: center; align-self: flex-start; min-width: 22px; height: 22px; padding: 0 4px; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.cal-today .cal-n { background: var(--brand); color: #fff; font-weight: 600; }
.ev { display: grid; gap: 1px; padding: 4px 6px; border-left: 2px solid var(--brand); background: var(--tint); cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s; }
.ev:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.ev-past { border-left-color: var(--ink-3); background: var(--line-2); }
.ev-t { display: flex; align-items: center; justify-content: space-between; gap: 4px; color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.ev-c { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ev-more { display: grid; gap: 4px; }
.ev-more > summary { padding: 1px 6px; color: var(--ink-3); font-size: 11px; font-weight: 500; cursor: pointer; }
.ev-more > summary:hover { color: var(--brand); }
.ev-more[open] > summary { margin-bottom: 4px; }
.ev-more[open] { display: grid; }
.ev-more .ev + .ev { margin-top: 4px; }
.ev-av { display: inline-flex; gap: 2px; }
.ev-av .av { width: 16px; height: 16px; font-size: 7.5px; }
.li .ev-av .av { width: 20px; height: 20px; font-size: 9px; }

/* row actions: edit + delete icons, quiet until the row is hovered or focused */
.cell-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.row-actions { display: inline-flex; align-items: center; gap: 2px; opacity: .35; transition: opacity .2s; }
tr:hover .row-actions, .note:hover .row-actions, .row-actions:focus-within { opacity: 1; }
.icon-btn { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; color: var(--ink-2); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .2s, color .2s; }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn:hover { background: var(--line-2); color: var(--ink); }
.icon-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--ring); }
.icon-btn-danger:hover, .icon-btn.armed { background: var(--red-t); color: var(--red); }
.edit-row > td { background: var(--hover); }
tr.editing > td { border-bottom-color: transparent; }
form.edit-row { padding-top: 6px; }
@media (hover: none) { .row-actions { opacity: 1; } }

/* dropdowns (app.js builds these on top of every <select>) */
.sel { position: relative; width: 100%; }
.sel-auto { display: inline-block; width: auto; }
.sel-native { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sel-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 30px; padding: 0 8px 0 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: 12.5px; white-space: nowrap; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.sel-btn:hover { border-color: var(--ink-3); }
.sel-btn:focus-visible, .sel.open .sel-btn { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.sel-error .sel-btn { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }
.sel-btn.placeholder { color: var(--ink-2); }
.sel-btn span, .sel-btn svg { pointer-events: none; }  /* every click lands on the button itself */
.sel-btn svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); transition: transform .25s var(--ease); }
.sel.open .sel-btn svg { transform: rotate(180deg); }
.sel-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 55; min-width: 100%; max-height: 264px; padding: 4px; overflow: auto; background: var(--surface); box-shadow: var(--pop);
  opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .16s, transform .22s var(--ease); }
.sel.up .sel-menu { top: auto; bottom: calc(100% + 5px); transform: translateY(4px); }
.sel.open .sel-menu { opacity: 1; pointer-events: auto; transform: none; }
.sel-opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 9px; color: var(--ink); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.sel-opt.act { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.sel-opt[aria-selected="true"] { color: var(--brand); font-weight: 500; }
.sel-opt[aria-selected="true"]::after { content: ""; width: 9px; height: 5px; margin-top: -3px; border-bottom: 1.6px solid; border-left: 1.6px solid; transform: rotate(-45deg); }

.link { font-weight: 500; color: var(--ink); transition: color .2s; }
.link:hover { color: var(--brand); }
.kicker { color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.empty { padding: 24px 12px; color: var(--ink-3); font-size: 13px; text-align: center; }
.menu { position: absolute; right: 0; z-index: 50; min-width: 180px; margin-top: 6px; padding: 4px; background: var(--surface); box-shadow: var(--pop); }
.menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; color: var(--ink); font-size: 12.5px; }
.menu a:hover { background: var(--hover); }
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }

/* ---------- client peek panel ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 22%, transparent); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; display: flex; flex-direction: column; width: min(440px, 100%); overflow: auto;
  border-left: 1px solid var(--line); background: var(--surface); box-shadow: var(--pop); transform: translateX(104%); transition: transform .42s var(--ease); }
.drawer.on { transform: none; }
.dr-h { display: flex; align-items: start; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line-2); }
.drawer .dr-h h3 { font-size: 16px; letter-spacing: -.01em; }
.x { width: 26px; height: 26px; margin-left: auto; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: pointer; transition: .2s; }
.x:hover { background: var(--line-2); color: var(--ink); }
.dr-b { display: grid; gap: 18px; padding: 16px 20px; }
.dr-f { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 14px 20px; border-top: 1px solid var(--line-2); }
.lbl { margin-bottom: 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 500; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); color: var(--ink-3); font-size: 11px; text-align: center; }
.steps::before { content: ""; position: absolute; top: 6px; right: 10%; left: 10%; height: 2px; background: var(--line); }
.steps .prog { position: absolute; top: 6px; left: 10%; width: 0; height: 2px; background: var(--brand); transition: width .8s var(--ease) .25s; }
.steps div { position: relative; display: grid; gap: 6px; justify-items: center; }
.steps b { width: 14px; height: 14px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); }
.steps .done b { border-color: var(--brand); background: var(--brand); }
.steps .now { color: var(--ink); font-weight: 500; }
.steps .now b { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
.whybox { --c: var(--green); --t: var(--green-t); padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--c) 13%, transparent); background: var(--t); color: var(--c); }
.whybox-red { --c: var(--red); --t: var(--red-t); } .whybox-amber { --c: var(--amber); --t: var(--amber-t); }
.whybox ul { margin: 0; padding-left: 16px; list-style: disc; color: var(--ink); }

/* ---------- search palette ---------- */
.pal { position: fixed; top: 84px; left: 50%; z-index: 71; width: min(540px, calc(100% - 32px)); overflow: hidden; background: var(--surface); box-shadow: var(--pop);
  opacity: 0; pointer-events: none; transform: translate(-50%, -8px) scale(.98); transition: opacity .2s, transform .28s var(--ease); }
.pal.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.scrim-pal { z-index: 70; }
.pal-in { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line-2); color: var(--ink-3); }
.pal-in svg { width: 15px; height: 15px; }
.pal-in input { flex: 1; border: 0; outline: 0; background: none; color: var(--ink); font-size: 14px; }
.pal-in input::placeholder { color: var(--ink-3); }
.pal-in input::-webkit-search-cancel-button { display: none; }
.pal-list { max-height: 320px; overflow: auto; padding: 6px; }
.pal-g { padding: 8px 8px 4px; color: var(--ink-3); font-size: 11px; font-weight: 500; }
.pal-i { display: flex; align-items: center; gap: 10px; padding: 8px; color: var(--ink); }
.pal-i.sel { background: var(--hover); box-shadow: inset 0 0 0 1px var(--line); }
.pal-i .end { margin-left: auto; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.pal-i .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-hint { padding: 22px; color: var(--ink-3); text-align: center; }
.pal-f { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: 11.5px; }

.toast { position: fixed; bottom: 24px; left: 50%; z-index: 80; display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--ink); color: #fff; font-size: 12.5px;
  white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: .35s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- motion: entrance plays once per page load, then is switched off ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rise { animation: rise .5s var(--ease) calc(var(--i, 0) * 35ms + 120ms) both; }
.settled .rise, .settled .dbar i, .settled .share i, .settled .mix i { animation: none; }
@view-transition { navigation: auto; }
::view-transition-group(nav-ind) { animation-duration: .38s; animation-timing-function: var(--ease); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator { opacity: 1; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .demo-note { display: block; }
  .crumb, .tb-date { display: none; }
  .topbar { padding: 0 14px; }
  .search-open { width: auto; flex: 1; margin-left: 0; }
  .mobile-nav { display: flex; gap: 2px; overflow-x: auto; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .mobile-nav a { padding: 5px 10px; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
  .mobile-nav a[aria-current="page"] { background: var(--tint); color: var(--brand); }
  .content { padding: 16px 14px 32px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  @view-transition { navigation: none; }
}