/* Portal Next — the one stylesheet. Tokens first; nothing below types a hex. */
:root {
  --bg: #F4F3F0; --inset: #F0EEE8; --panel: #FFFFFF; --raised: #FBFAF8;
  --line: #E4E1DA; --line2: #CFCBC2;
  --ink: #13203A; --ink2: #44506A; --cap: #66708A;
  --accent: #F0B942; --accent-soft: #FBF1D9; --accent-ink: #7A5200;
  --link: #2F5D8C; --focus: #3D6B9E; --btn: #0F1E3C; --btn-ink: #FFFFFF;
  --cos: #9B4D73; --cos-soft: #F6ECF1; --rp: #2F7D78; --rp-soft: #E6F2F1; --epr: #6B7F3A; --epr-soft: #EEF2E4;
  --s-you: #B8502A; --s-you-soft: #FBEFE8; --s-moving: #3D6B9E; --s-moving-soft: #E9EFF7;
  --s-waiting: #6E4B8E; --s-waiting-soft: #F0EBF5; --s-done: #4F7D4E; --s-done-soft: #E9F1E6;
  --sea: #FFFFFF; --land: #ECEAE3; --land-line: #DAD6CC;
  --font-text: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --r: 10px; --r-lg: 16px; --r-xl: 22px;
  --shadow: 0 1px 2px rgba(28,31,34,.04), 0 12px 32px rgba(28,31,34,.08);
  --shadow-lg: 0 2px 4px rgba(28,31,34,.06), 0 24px 64px rgba(28,31,34,.16);
  --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 160ms; --t: 260ms; --t-slow: 480ms;
  --rail-w: 232px; --gap: 1rem; --pad: 1.25rem;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #15171A; --inset: #1A1D21; --panel: #1D2024; --raised: #24282D;
  --line: #2A2E33; --line2: #3A3F45;
  --ink: #ECEAE5; --ink2: #C2BFB8; --cap: #9C9A94;
  --accent: #F0B942; --accent-soft: #33291A; --accent-ink: #F3CB72;
  --link: #8EC2E6; --focus: #6BAEDB; --btn: #ECEAE5; --btn-ink: #15171A;
  --cos: #D08BAE; --cos-soft: #2E222A; --rp: #6FBDB7; --rp-soft: #1B2E2D; --epr: #A7BD74; --epr-soft: #262D1C;
  --s-you: #E0865A; --s-you-soft: #33241B; --s-moving: #8FB4E0; --s-moving-soft: #1C2838;
  --s-waiting: #B59BD6; --s-waiting-soft: #2A2335; --s-done: #8FC08F; --s-done-soft: #1F2D22;
  --sea: #1D2024; --land: #262A2F; --land-line: #343940;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.6);
  color-scheme: dark;
}
[data-density="compact"] { --pad: .875rem; --gap: .75rem; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font-text); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
h1, h2, h3, h4, p { margin: 0; }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; }
h1.display { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); line-height: 1.05; }
h2.display { font-size: 1.5rem; line-height: 1.2; }
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cap); }
.cap { color: var(--cap); font-size: .8125rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; letter-spacing: .02em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3rem; background: var(--btn); color: var(--btn-ink); padding: .5rem .75rem; border-radius: var(--r); z-index: 100; }
.skip:focus { top: 1rem; }

/* ── shell ── */
.shell { display: flex; min-height: 100vh; }
.rail { width: var(--rail-w); flex: 0 0 var(--rail-w); padding: 1.25rem .875rem; display: flex; flex-direction: column; gap: 1.25rem; border-right: 1px solid var(--line); background: var(--bg); }
.brand { display: flex; align-items: center; gap: .625rem; padding: .25rem .5rem; font-weight: 600; letter-spacing: -.01em; }
.brand .mark { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; }
.search { display: flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--cap); width: 100%; text-align: left; }
.search:hover { border-color: var(--line2); }
.search svg { width: 16px; height: 16px; flex: 0 0 16px; }
.kbd { margin-left: auto; font-size: .7rem; padding: .1rem .35rem; border: 1px solid var(--line2); border-radius: 5px; color: var(--cap); background: var(--raised); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: .625rem; min-height: 2.5rem; padding: 0 .75rem; border-radius: var(--r); color: var(--ink2); font-weight: 500; }
.nav a:hover { background: var(--inset); text-decoration: none; color: var(--ink); }
.nav a[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 0 0 1px var(--line); }
.nav svg { width: 18px; height: 18px; flex: 0 0 18px; }
.nav .count { margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.nav .count.quiet { background: transparent; color: var(--cap); font-weight: 500; }
.rail .foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.role { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.role select { border: 0; background: transparent; padding: 0; font-weight: 600; flex: 1; min-width: 0; }
.iconbtn { width: 2.5rem; height: 2.5rem; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink2); }
.iconbtn:hover { border-color: var(--line2); color: var(--ink); }
.iconbtn svg { width: 18px; height: 18px; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .875rem 2rem 0; }
.crumbs { display: flex; align-items: center; gap: .5rem; color: var(--cap); font-size: .875rem; }
.crumbs a { color: var(--cap); }
.topbar .spacer { flex: 1; }
.ask { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .875rem 0 .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-weight: 600; }
.ask canvas { width: 28px; height: 28px; }
.ask:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.view { padding: 1rem 2rem 4rem; max-width: 1240px; width: 100%; }
.view.wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 1.5rem; }
.page-head .lede { margin-top: .5rem; color: var(--ink2); max-width: 58ch; }

/* ── components ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font-weight: 600; font-size: .9rem; white-space: nowrap; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast); }
.btn:hover { box-shadow: var(--shadow); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink2); }
.btn.ghost:hover { background: var(--inset); box-shadow: none; }
.btn.sm { min-height: 2.25rem; padding: 0 .75rem; font-size: .85rem; }
.btn svg { width: 16px; height: 16px; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--pad); }
.card.flat { box-shadow: none; }
.card + .card { margin-top: var(--gap); }
.card-title { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; height: 1.5rem; padding: 0 .55rem 0 .45rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--inset); color: var(--ink2); }
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
.chip.you { background: var(--s-you-soft); color: var(--s-you); }
.chip.moving { background: var(--s-moving-soft); color: var(--s-moving); }
.chip.waiting { background: var(--s-waiting-soft); color: var(--s-waiting); }
.chip.done { background: var(--s-done-soft); color: var(--s-done); }
.chip.none { color: var(--cap); }
.chip.none::before { background: transparent; border: 1.5px solid currentColor; }
.chip.plain::before { display: none; }
.tag { display: inline-flex; align-items: center; height: 1.4rem; padding: 0 .5rem; border-radius: 6px; font-size: .75rem; font-weight: 600; background: var(--inset); color: var(--ink2); }
.svc { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.svc.epr { color: var(--epr); } .svc.rp { color: var(--rp); } .svc.cos { color: var(--cos); }
.spine { border-left: 3px solid var(--line2); padding-left: .875rem; }
.spine.epr { border-color: var(--epr); } .spine.rp { border-color: var(--rp); } .spine.cos { border-color: var(--cos); }
.avatar { width: 2rem; height: 2rem; border-radius: 999px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--ink); background: oklch(90% 0.05 var(--hue, 200)); border: 1px solid oklch(80% 0.07 var(--hue, 200)); flex: 0 0 auto; }
[data-theme="dark"] .avatar { background: oklch(32% 0.05 var(--hue, 200)); border-color: oklch(42% 0.07 var(--hue, 200)); color: var(--ink); }
.avatar.sm { width: 1.5rem; height: 1.5rem; font-size: .6rem; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.grid { display: grid; gap: var(--gap); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fact { padding: 1rem 1.25rem; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact .v { font-weight: 600; font-size: 1rem; margin-top: .25rem; line-height: 1.3; }
.fact .s { color: var(--cap); font-size: .8125rem; margin-top: .25rem; }
.fact .v.warn { color: var(--s-you); }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 1.25rem 0 1rem; }
.tabs a { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem .875rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink2); font-weight: 500; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.tabs a .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--line2); }
.tabs a .dot.epr { background: var(--epr); } .tabs a .dot.rp { background: var(--rp); } .tabs a .dot.cos { background: var(--cos); }
.tabs a.off { color: var(--cap); }
details.fold { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; padding: .875rem var(--pad); font-weight: 600; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary .chev { margin-left: auto; transition: transform var(--t) var(--ease); color: var(--cap); }
details.fold[open] > summary .chev { transform: rotate(180deg); }
details.fold > .body { padding: 0 var(--pad) var(--pad); }
table.t { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.t th { text-align: left; font-weight: 600; color: var(--cap); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
table.t td { padding: .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.clickable { cursor: pointer; transition: background var(--t-fast); }
table.t tr.clickable:hover { background: var(--raised); }
table.t tr[aria-selected="true"] { background: var(--inset); }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.input { width: 100%; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--line2); border-radius: var(--r); background: var(--panel); }
.input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: -1px; }
label.lbl { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; }
.field + .field { margin-top: .875rem; }
.hr { height: 1px; background: var(--line); margin: 1rem 0; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--cap); }
.empty .display { color: var(--ink); font-size: 1.5rem; margin-bottom: .5rem; }

/* ── action items (Today, partner tasks): sentence and button together, never apart ── */
.items { display: flex; flex-direction: column; gap: .5rem; }
.item { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .875rem 1rem .875rem 1.125rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); position: relative; transition: box-shadow var(--t-fast) var(--ease), transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.item::before { content: ""; position: absolute; left: 0; top: .875rem; bottom: .875rem; width: 3px; border-radius: 3px; background: var(--line2); }
.item.epr::before { background: var(--epr); } .item.rp::before { background: var(--rp); } .item.cos::before { background: var(--cos); }
.item:hover { box-shadow: var(--shadow); }
.item .text { max-width: 64ch; line-height: 1.45; }
.item .text b { font-weight: 600; }
.item .meta { grid-column: 1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--cap); font-size: .8125rem; }
.item .act { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: .625rem; }
.item .days { font-size: .8125rem; color: var(--cap); white-space: nowrap; }
.item .days.over { color: var(--s-you); font-weight: 600; }
.item.leaving { opacity: 0; transform: translateX(24px) scale(.98); }
.item.done-flash { background: var(--s-done-soft); border-color: transparent; }
.group-head { display: flex; align-items: center; gap: .625rem; margin: 1.5rem 0 .625rem; }
.group-head h2 { font-size: 1rem; font-weight: 600; }
.group-head .n { font-size: .78rem; font-weight: 700; color: var(--ink); background: var(--accent); min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 999px; display: grid; place-items: center; }
.group-head .n.quiet { background: var(--inset); color: var(--cap); }
.group-head .dot { width: .55rem; height: .55rem; border-radius: 999px; }
.group-head .hint { margin-left: auto; color: var(--cap); font-size: .8125rem; }
.more { align-self: flex-start; }

/* ── toasts ── */
.toasts { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 90; width: min(520px, calc(100vw - 2rem)); }
.toast { display: flex; align-items: center; gap: .75rem; padding: .75rem .75rem .75rem 1rem; background: var(--btn); color: var(--btn-ink); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: toast-in var(--t) var(--ease); position: relative; overflow: hidden; }
.toast .bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); width: 100%; transform-origin: left; animation: toast-bar linear forwards; }
.toast .btn { min-height: 2.125rem; padding: 0 .75rem; font-size: .85rem; background: transparent; color: inherit; border-color: color-mix(in oklab, var(--btn-ink) 35%, transparent); }
.toast .btn.undo { margin-left: auto; background: var(--accent); color: var(--ink); border-color: var(--accent); }
.toast.leaving { animation: toast-out var(--t-fast) var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── command palette ── */
.palette-wrap { position: fixed; inset: 0; z-index: 95; display: grid; place-items: start center; padding-top: 12vh; background: color-mix(in oklab, var(--ink) 28%, transparent); backdrop-filter: blur(6px); animation: fade-in var(--t-fast) var(--ease); }
.palette { width: min(680px, calc(100vw - 2rem)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: rise var(--t) var(--ease); }
.palette input { width: 100%; border: 0; padding: 1.125rem 1.25rem; font-size: 1.05rem; background: transparent; outline: none; border-bottom: 1px solid var(--line); }
.palette ul { list-style: none; margin: 0; padding: .5rem; max-height: 56vh; overflow: auto; }
.palette li { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--r); cursor: pointer; }
.palette li[aria-selected="true"], .palette li:hover { background: var(--inset); }
.palette li .k { font-size: .72rem; color: var(--cap); margin-left: auto; }
.palette li .ico { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 8px; background: var(--inset); color: var(--ink2); }
.palette li .ico svg { width: 16px; height: 16px; }
.palette .hint { padding: .5rem 1rem .75rem; color: var(--cap); font-size: .78rem; display: flex; gap: 1rem; border-top: 1px solid var(--line); }

/* ── assist side panel ── */
.assist { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 80; transform: translateX(100%); transition: transform var(--t-slow) var(--ease); display: flex; flex-direction: column; }
.assist[data-open="true"] { transform: none; }
.assist .head { display: flex; align-items: center; gap: .625rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.assist .head canvas { width: 28px; height: 28px; }
.assist .body { padding: 1.25rem; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.assist .foot { padding: .875rem 1.25rem; border-top: 1px solid var(--line); color: var(--cap); font-size: .78rem; }
.ai-label { display: inline-flex; align-items: center; gap: .375rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: .2rem .5rem; border-radius: 6px; }
.bubble { background: var(--inset); border-radius: var(--r-lg); padding: .875rem 1rem; line-height: 1.5; }
.bubble.q { background: transparent; border: 1px solid var(--line); }
.evidence { display: flex; flex-direction: column; gap: .375rem; }
.evidence a { display: flex; gap: .5rem; align-items: center; font-size: .85rem; }
.evidence a::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* ── messages ── */
.msg { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.msg .who { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.msg .who b { font-weight: 600; }
.msg .when { margin-left: auto; color: var(--cap); font-size: .8125rem; }
.msg .how { color: var(--cap); font-size: .8125rem; display: flex; gap: .375rem; align-items: center; margin: .125rem 0 .5rem; }
.msg .how svg { width: 14px; height: 14px; }
.msg p { line-height: 1.55; }
.msg .files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.filechip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .625rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); font-size: .85rem; }
.filechip svg { width: 14px; height: 14px; color: var(--cap); }
.msg.event { grid-template-columns: 2rem 1fr; color: var(--cap); font-size: .875rem; padding: .625rem 0; }
.msg.draft { background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 50%, transparent); border-radius: var(--r-lg); padding: 1rem; margin: .75rem 0; }
.composer { margin-top: 1rem; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--panel); }
.composer .to { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .625rem .875rem; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--cap); }
.composer textarea { width: 100%; border: 0; padding: .875rem; min-height: 5.5rem; resize: vertical; background: transparent; outline: none; }
.composer .bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border-top: 1px solid var(--line); }

/* ── map & hero strips ── */
.map-host { position: relative; width: 100%; min-height: 320px; border-radius: var(--r-lg); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.map-host.hero { min-height: 360px; }
.map-host svg { display: block; width: 100%; height: 100%; }
.map-tip { position: absolute; pointer-events: none; background: var(--btn); color: var(--btn-ink); padding: .5rem .75rem; border-radius: var(--r); font-size: .8125rem; box-shadow: var(--shadow-lg); transform: translate(-50%, calc(-100% - 12px)); white-space: nowrap; opacity: 0; transition: opacity var(--t-fast); }
.map-tip[data-show="true"] { opacity: 1; }
.map-legend { position: absolute; left: 1rem; bottom: .875rem; display: flex; gap: 1rem; font-size: .78rem; color: var(--cap); background: color-mix(in oklab, var(--panel) 80%, transparent); padding: .375rem .625rem; border-radius: 8px; backdrop-filter: blur(4px); }
.map-legend span { display: inline-flex; align-items: center; gap: .375rem; }
.map-legend i { width: .55rem; height: .55rem; border-radius: 999px; display: inline-block; }
.stat-strip { display: flex; gap: 2rem; flex-wrap: wrap; padding: 1rem 0 0; color: var(--cap); font-size: .85rem; }
.stat-strip b { color: var(--ink); font-weight: 600; font-size: 1.25rem; font-family: var(--font-display); margin-right: .375rem; }

/* ── motion ── */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.stagger > * { animation: rise var(--t-slow) var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms } .stagger > *:nth-child(2) { animation-delay: 50ms } .stagger > *:nth-child(3) { animation-delay: 100ms }
.stagger > *:nth-child(4) { animation-delay: 150ms } .stagger > *:nth-child(5) { animation-delay: 200ms } .stagger > *:nth-child(6) { animation-delay: 250ms }
.stagger > *:nth-child(n+7) { animation-delay: 300ms }
.pulse { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
::view-transition-old(root) { animation: 180ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 260ms var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.vt-fade { animation: fade-in var(--t) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── responsive ── */
@media (max-width: 1024px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact:nth-child(2) { border-right: 0; } .fact:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .shell { flex-direction: column; }
  .rail { width: auto; flex: none; border-right: 0; padding: .75rem 1rem 0; gap: .75rem; }
  .rail .nav { flex-direction: row; overflow-x: auto; gap: .25rem; padding-bottom: .5rem; margin: 0 -1rem; padding-left: 1rem; }
  .rail .nav a { white-space: nowrap; }
  .rail .nav .count { margin-left: .375rem; }
  .rail .foot { display: none; }
  .topbar { padding: .75rem 1rem 0; }
  .view { padding: .75rem 1rem 5rem; }
  .facts { grid-template-columns: 1fr; } .fact { border-right: 0; border-bottom: 1px solid var(--line); } .fact:last-child { border-bottom: 0; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .item { grid-template-columns: 1fr; }
  .item .act { grid-column: 1; grid-row: auto; justify-content: space-between; margin-top: .5rem; }
  .item .act .btn { flex: 1; }
  .page-head { margin-bottom: 1rem; }
  table.t.cards thead { display: none; }
  table.t.cards tr { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: .625rem; padding: .5rem .75rem; background: var(--panel); }
  table.t.cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .375rem 0; }
  table.t.cards td::before { content: attr(data-l); color: var(--cap); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
  .tabs { overflow-x: auto; }
  .assist { width: 100vw; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   V2 — THE ATLAS SYSTEM. A dark navy-and-gold band heads every main screen; the content below stays warm and light.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --band: #0B1730; --band-2: #122648; --band-3: #16305A; --band-ink: #F3F1EA; --band-ink2: #C9D3E6; --band-cap: #8FA3C6;
  --band-line: rgba(255,255,255,.10); --band-glass: rgba(255,255,255,.06); --band-glass-2: rgba(255,255,255,.10);
  --gold: #F0B942; --gold-2: #FFD56A; --gold-ink: #3A2A00; --band-4: #183566;
  --glow-you: rgba(224,134,90,.5); --glow-moving: rgba(143,180,224,.45); --glow-waiting: rgba(181,155,214,.45); --glow-done: rgba(143,192,143,.4);
}
[data-theme="dark"] { --band: #0A1428; --band-2: #0F1F3F; --band-3: #16305C; }

/* the band */
.band { position: relative; color: var(--band-ink); background: radial-gradient(1200px 520px at 18% -10%, var(--band-3) 0%, transparent 60%), radial-gradient(900px 480px at 92% 110%, var(--band-4) 0%, transparent 55%), linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%); border-radius: var(--r-xl); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-lg); }
.band::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='.07'/%3E%3C/svg%3E"); opacity: .6; pointer-events: none; z-index: 0; }
.band > * { position: relative; z-index: 1; }
.band .eyebrow { color: var(--band-cap); }
.band .cap { color: var(--band-cap); }
.band h1, .band h2 { color: var(--band-ink); }
.band a { color: var(--band-ink2); }
.band .btn { background: var(--band-glass-2); border-color: var(--band-line); color: var(--band-ink); backdrop-filter: blur(8px); }
.band .btn:hover { background: rgba(255,255,255,.16); }
.band .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.band .btn.gold:hover { background: var(--gold-2); }
.band .map-host { --map-fill-opacity: .42; --sea: transparent; --land: rgba(255,255,255,.07); --land-line: rgba(255,255,255,.12); --panel: transparent; --inset: rgba(255,255,255,.07); --line: rgba(255,255,255,.12); --cap: var(--band-cap); --ink: var(--band-ink); background: transparent; border: 0; border-radius: 0; }
.band .map-legend { background: rgba(10,20,40,.55); color: var(--band-ink2); border: 1px solid var(--band-line); }
.band .map-tip { background: var(--band-ink); color: var(--band); }

/* glass tiles */
.glass { background: var(--band-glass); border: 1px solid var(--band-line); border-radius: var(--r-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 1rem 1.125rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform var(--t) var(--ease), background var(--t); }
.glass:hover { background: var(--band-glass-2); transform: translateY(-2px); }
.glass .k { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--band-cap); }
.glass .n { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; margin: .35rem 0 .25rem; color: var(--band-ink); font-variant-numeric: tabular-nums; }
.glass .n.gold { color: var(--gold); }
.glass .s { color: var(--band-ink2); font-size: .85rem; }
.glass.you .n { color: #F3B48E; } .glass.moving .n { color: #A9C6EC; } .glass.waiting .n { color: #CDB9E6; } .glass.done .n { color: #A9D4A8; }

/* ticker */
.ticker { position: relative; overflow: hidden; border-top: 1px solid var(--band-line); padding: .625rem 0; font-size: .85rem; color: var(--band-ink2); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker .track { display: inline-flex; gap: 3rem; white-space: nowrap; animation: ticker 48s linear infinite; padding-left: 100%; }
.ticker:hover .track { animation-play-state: paused; }
.ticker .ev { display: inline-flex; align-items: center; gap: .5rem; }
.ticker .ev i { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; }
.ticker .ev b { color: var(--band-ink); font-weight: 600; }
.ticker .ev .t { color: var(--band-cap); }
@keyframes ticker { to { transform: translateX(-100%); } }

/* progress rings */
.ring { --p: 0; --c: var(--s-moving); --track: var(--line); width: 56px; height: 56px; display: inline-grid; place-items: center; position: relative; flex: 0 0 auto; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .tr { stroke: var(--track); }
.ring .pr { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset 1.2s var(--ease), stroke var(--t); }
.ring .v { font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring.lg { width: 84px; height: 84px; } .ring.lg .v { font-size: 1.1rem; }
.ring.sm { width: 36px; height: 36px; } .ring.sm .v { font-size: .6rem; }
.band .ring { --track: rgba(255,255,255,.14); color: var(--band-ink); }

/* status ribbons and colour on rows */
.item { grid-template-columns: auto 1fr auto; padding-left: .875rem; }
.item::before { display: none; }
.item .rib { grid-row: 1 / span 2; width: 6px; align-self: stretch; border-radius: 6px; background: var(--line2); }
.item.s-you .rib { background: var(--s-you); box-shadow: 0 0 0 4px var(--s-you-soft); }
.item.s-moving .rib { background: var(--s-moving); box-shadow: 0 0 0 4px var(--s-moving-soft); }
.item.s-waiting .rib { background: var(--s-waiting); box-shadow: 0 0 0 4px var(--s-waiting-soft); }
.item.s-done .rib { background: var(--s-done); box-shadow: 0 0 0 4px var(--s-done-soft); }
.item .text { grid-column: 2; }
.item .meta { grid-column: 2; }
.item .act { grid-column: 3; }
.item .who { display: inline-flex; align-items: center; gap: .375rem; }
.item.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.item.s-you .btn.primary { background: var(--s-you); border-color: var(--s-you); color: #fff; }
.cc { display: inline-flex; align-items: center; gap: .35rem; height: 1.4rem; padding: 0 .5rem 0 .35rem; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; background: var(--inset); color: var(--ink2); }
.cc i { width: .5rem; height: .5rem; border-radius: 2px; background: var(--line2); }
.cc.you { background: var(--s-you-soft); color: var(--s-you); } .cc.you i { background: var(--s-you); }
.cc.moving { background: var(--s-moving-soft); color: var(--s-moving); } .cc.moving i { background: var(--s-moving); }
.cc.waiting { background: var(--s-waiting-soft); color: var(--s-waiting); } .cc.waiting i { background: var(--s-waiting); }
.cc.done { background: var(--s-done-soft); color: var(--s-done); } .cc.done i { background: var(--s-done); }
.pill-tabs { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 999px; background: var(--inset); border: 1px solid var(--line); }
.pill-tabs a { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 1rem; border-radius: 999px; color: var(--ink2); font-weight: 600; font-size: .9rem; transition: background var(--t-fast), color var(--t-fast); }
.pill-tabs a:hover { color: var(--ink); text-decoration: none; }
.pill-tabs a[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.pill-tabs a.off { color: var(--cap); opacity: .7; }
.bar6 { display: flex; gap: 3px; height: 8px; }
.bar6 i { flex: 1; border-radius: 3px; background: var(--line); transform-origin: left; animation: grow var(--t-slow) var(--ease) both; }
.bar6 i.you { background: var(--s-you); } .bar6 i.moving { background: var(--s-moving); } .bar6 i.waiting { background: var(--s-waiting); } .bar6 i.done { background: var(--s-done); }
@keyframes grow { from { transform: scaleX(0); } }
.card.lift { transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.card.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card.tint-epr { background: linear-gradient(180deg, var(--epr-soft), var(--panel) 60%); }
.card.tint-rp { background: linear-gradient(180deg, var(--rp-soft), var(--panel) 60%); }
.card.tint-cos { background: linear-gradient(180deg, var(--cos-soft), var(--panel) 60%); }
.glow-you { box-shadow: 0 0 0 1px var(--s-you-soft), 0 8px 30px -8px var(--glow-you); }
.rail .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold), 0 1px 0 var(--line), 0 0 0 1px var(--line); }
.doc { display: inline-grid; place-items: center; width: 40px; height: 48px; border-radius: 8px; font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: #fff; position: relative; flex: 0 0 auto; }
.doc::after { content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px; background: rgba(255,255,255,.35); border-bottom-left-radius: 6px; }
.doc.pdf { background: #B8502A; } .doc.xlsx { background: #4F7D4E; } .doc.docx { background: #3D6B9E; } .doc.img { background: #6E4B8E; } .doc.num { background: var(--ink); }
.band-wrap { margin: 0 -2rem; padding: 0 2rem; }
@media (max-width: 767px) { .band-wrap { margin: 0 -1rem; padding: 0 1rem; } .glass .n { font-size: 1.8rem; } .item { grid-template-columns: auto 1fr; } .item .act { grid-column: 2; } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   V3 — ALIVE, NATIVE, CAPABLE (7 Oct 2026). Per-element view transitions, the live cluster, spotlight, scroll.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* chrome stays put between routes; only the content and the clicked thing move */
.rail { view-transition-name: rail; }
.topbar { view-transition-name: topbar; }
.assist { view-transition-name: assist; }
.toasts { view-transition-name: toasts; }
.view .band { view-transition-name: band; }
.band .band, [data-vt-none] { view-transition-name: none !important; }
::view-transition-group(*) { animation-duration: 420ms; animation-timing-function: var(--ease); }
::view-transition-group(root) { animation-duration: 240ms; }
::view-transition-old(band), ::view-transition-new(band), ::view-transition-old(panel), ::view-transition-new(panel) { height: 100%; width: 100%; object-fit: cover; object-position: center top; overflow: clip; }
::view-transition-image-pair(band), ::view-transition-image-pair(panel) { isolation: auto; border-radius: var(--r-xl); overflow: clip; }
::view-transition-old(title), ::view-transition-new(title) { height: 100%; width: auto; object-fit: contain; object-position: left center; }
::view-transition-old(title) { animation: 200ms var(--ease) both vt-title-out; }
::view-transition-new(title) { animation: 320ms var(--ease) both vt-title-in; }
@keyframes vt-title-out { to { opacity: 0; } }
@keyframes vt-title-in { from { opacity: 0; } }

/* the rail's language select and the link to the system page */
.rail .lang { display: flex; align-items: center; gap: .5rem; color: var(--cap); }
.rail .lang svg { width: 16px; height: 16px; flex: 0 0 16px; }
.rail .lang select { flex: 1; min-width: 0; min-height: 2.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 0 .5rem; color: var(--ink); font-size: .8125rem; }
.rail .sys { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--cap); padding: .25rem .25rem; }
.rail .sys svg { width: 14px; height: 14px; }
.rail .sys:hover { color: var(--ink); text-decoration: none; }

/* the live cluster in the top bar */
.live { display: flex; align-items: center; gap: .625rem; }
.live:empty { display: none; }
.live .who { display: flex; align-items: center; }
.live .who a { display: inline-flex; position: relative; margin-left: -7px; border-radius: 999px; transition: transform var(--t-fast) var(--ease); }
.live .who a:first-child { margin-left: 0; }
.live .who a:hover { transform: translateY(-2px); z-index: 1; }
.live .who .avatar { box-shadow: 0 0 0 2px var(--bg); }
.live .dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 999px; background: var(--s-done); border: 2px solid var(--bg); animation: breathe 2.6s var(--ease) infinite; }
.live .state { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .75rem 0 .625rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: .78rem; font-weight: 600; color: var(--ink2); }
.live .state:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.live .state i { width: .5rem; height: .5rem; border-radius: 999px; background: var(--s-done); animation: breathe 2.6s var(--ease) infinite; }
.live[data-paused="true"] .state i, .live[data-paused="true"] .dot { background: var(--cap); animation: none; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.65); opacity: .5; } }
.toast .avatar.sm { flex: 0 0 auto; }
.toast > span { display: inline-flex; align-items: center; gap: .625rem; }
.toast a { color: var(--accent); font-weight: 600; }

/* spotlight on glass tiles: a soft light that follows the pointer */
.glass { position: relative; overflow: hidden; }
.glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t) var(--ease); background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 62%); }
.glass:hover::after { opacity: 1; }

/* scroll-driven: the band's map lags the page (parallax) and the top bar turns to glass once you scroll */
.topbar { border-bottom: 1px solid transparent; }
@supports (animation-timeline: scroll()) {
  .view .band .map-host { animation: band-parallax linear both; animation-timeline: scroll(root); animation-range: 0 560px; }
  @keyframes band-parallax { to { transform: translateY(84px); opacity: .3; } }
  .topbar { position: sticky; top: 0; z-index: 30; animation: topbar-solid linear both; animation-timeline: scroll(root); animation-range: 0 72px; padding-bottom: .5rem; }
  @keyframes topbar-solid { to { background: color-mix(in oklab, var(--bg) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--line); } }
}

/* the keyboard sheet */
.sheet { width: min(560px, calc(100vw - 2rem)); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 1.25rem 1.5rem 1.5rem; animation: rise var(--t) var(--ease); }
.sheet h2 { font-size: 1.125rem; margin-bottom: .875rem; display: flex; align-items: center; }
.sheet h2 .iconbtn { margin-left: auto; }
.sheet dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.25rem; margin: 0; align-items: center; }
.sheet dt { display: flex; gap: .25rem; } .sheet dt .kbd { margin: 0; }
.sheet dd { margin: 0; color: var(--ink2); }
@media (max-width: 767px) { .live .state span { display: none; } .live .state { padding: 0 .5rem; } .rail .lang { display: none; } }
/* phone: the top bar must never widen the viewport — crumbs truncate, the Ask key hint goes */
@media (max-width: 767px) {
  .topbar { gap: .5rem; min-width: 0; }
  .crumbs { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ask .kbd { display: none; }
  .ask { padding-right: .75rem; }
}
@media (max-width: 767px) { .crumbs > :not(:last-child) { display: none; } }

/* ═══ V4 — people, permissions, files. Gated pieces hide without the permission; the views also never render the data. ═══ */
:root[data-can-ai="false"] [data-needs="ai"] { display: none !important; }
:root[data-can-economics="false"] [data-needs="economics"] { display: none !important; }
.switch { position: relative; width: 2.5rem; height: 1.5rem; border-radius: 999px; background: var(--line2); border: 0; padding: 0; cursor: pointer; transition: background var(--t-fast) var(--ease); flex: 0 0 auto; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--t-fast) var(--ease); }
.switch[aria-checked="true"] { background: var(--s-done); }
.switch[aria-checked="true"]::after { transform: translateX(1rem); }
.switch[disabled], .switch[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.note-msg { background: var(--accent-soft); border: 1px dashed color-mix(in oklab, var(--accent) 55%, transparent); border-radius: var(--r-lg); }
.money { font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.aud { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cap); padding: .1rem .45rem; border: 1px solid var(--line); border-radius: 999px; }
.aud.desk { color: var(--s-you); border-color: color-mix(in oklab, var(--s-you) 40%, transparent); }
.aud.partner { color: var(--s-waiting); border-color: color-mix(in oklab, var(--s-waiting) 40%, transparent); }
.comment { display: flex; gap: .625rem; align-items: flex-start; margin-top: .5rem; padding: .625rem .75rem; background: var(--inset); border-radius: var(--r); font-size: .875rem; color: var(--ink2); }
.comment .avatar { flex: 0 0 auto; }
.comment b { color: var(--ink); font-weight: 600; }

/* ═══ V5 — layout: collapsible menu, full width, the assistant docks beside the work, a visible Ask AI ═══ */
.view { max-width: none; }
.rail { transition: width var(--t) var(--ease), flex-basis var(--t) var(--ease); }
.rail .top { display: flex; align-items: center; gap: .25rem; }
.rail .top .brand { flex: 1; min-width: 0; }
.rail .rail-toggle { width: 2.25rem; height: 2.25rem; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--r); background: transparent; color: var(--cap); }
.rail .rail-toggle:hover { background: var(--inset); color: var(--ink); }
.rail .rail-toggle svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.rail .nav a, .rail .search, .rail .sys { white-space: nowrap; overflow: hidden; }
@media (min-width: 768px) {
  :root[data-rail="collapsed"] { --rail-w: 72px; }
  :root[data-rail="collapsed"] .rail { padding-left: .625rem; padding-right: .625rem; align-items: stretch; }
  :root[data-rail="collapsed"] .rail .top { flex-direction: column; gap: .5rem; }
  :root[data-rail="collapsed"] .rail .brand > span:not(.mark), :root[data-rail="collapsed"] .rail .search > span, :root[data-rail="collapsed"] .rail .nav a > span:not(.count),
  :root[data-rail="collapsed"] .rail .sys > span, :root[data-rail="collapsed"] .rail .lang, :root[data-rail="collapsed"] .rail .role select { display: none; }
  :root[data-rail="collapsed"] .rail .brand { justify-content: center; padding: .25rem 0; }
  :root[data-rail="collapsed"] .rail .search { justify-content: center; padding: 0; }
  :root[data-rail="collapsed"] .rail .nav a { justify-content: center; padding: 0; position: relative; }
  :root[data-rail="collapsed"] .rail .nav .count { position: absolute; top: .25rem; right: .25rem; margin: 0; min-width: 1rem; height: 1rem; font-size: .62rem; padding: 0 .25rem; }
  :root[data-rail="collapsed"] .rail .nav .count.quiet { display: none; }
  :root[data-rail="collapsed"] .rail .foot .row { flex-direction: column; }
  :root[data-rail="collapsed"] .rail .role { justify-content: center; cursor: pointer; }
  :root[data-rail="collapsed"] .rail .sys { justify-content: center; }
  :root[data-rail="collapsed"] .rail .rail-toggle svg { transform: rotate(180deg); }
}
@media (max-width: 767px) { .rail .rail-toggle { display: none; } }

/* the assistant docks as a column beside the work on wide screens; on phones it still slides over */
@media (min-width: 1025px) {
  .assist { position: sticky; top: 0; right: auto; bottom: auto; height: 100vh; max-height: 100vh; flex: 0 0 0px; width: 0; transform: none; overflow: hidden; border-left: 0; box-shadow: none; transition: flex-basis var(--t-slow) var(--ease), width var(--t-slow) var(--ease), border-color var(--t-slow); }
  .assist[data-open="true"] { flex-basis: 440px; width: 440px; border-left: 1px solid var(--line); }
  .assist > * { width: 440px; flex-shrink: 0; }
  .assist .body { flex: 1 1 auto; min-height: 0; }
}

/* the Ask AI button: gold, breathing, impossible to miss */
.ask { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink); height: 2.75rem; padding: 0 1rem 0 .5rem; font-weight: 700; position: relative; isolation: isolate; }
.ask:hover { background: color-mix(in oklab, var(--accent) 35%, var(--panel)); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ask::before { content: ""; position: absolute; inset: -3px; border-radius: 999px; border: 2px solid var(--accent); opacity: 0; pointer-events: none; animation: ask-pulse 2.6s var(--ease) infinite; }
@keyframes ask-pulse { 0% { opacity: .9; transform: scale(.96); } 70% { opacity: 0; transform: scale(1.22); } 100% { opacity: 0; transform: scale(1.22); } }
.ask .kbd { background: transparent; border-color: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--accent-ink); }
[data-theme="dark"] .ask { color: var(--ink); }

/* ═══ V5.1 — height-aware first screen. On a short viewport (a 13-inch laptop) the band compresses so the first actions
   sit above the fold; nothing is scaled, only the band's own sizes. html[data-short] is set by the shell from the viewport. ═══ */
html[data-short="true"] { --pad: .875rem; --gap: .75rem; }
html[data-short="true"] .topbar { padding-top: .5rem; }
html[data-short="true"] .view { padding-top: .625rem; }
html[data-short="true"] .view .band { min-height: 0 !important; }
html[data-short="true"] .view .band h1.display { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.9rem) !important; line-height: 1.08; }
html[data-short="true"] .view .band .lede, html[data-short="true"] .view .band p.lede, html[data-short="true"] .view .band > * > p:not(.cap) { font-size: .9rem; }
html[data-short="true"] .view .band .glass { padding: .55rem .8rem; border-radius: 12px; }
html[data-short="true"] .view .band .glass .k { font-size: .62rem; letter-spacing: .06em; }
html[data-short="true"] .view .band .glass .n { font-size: 1.55rem; margin: .15rem 0 .1rem; }
html[data-short="true"] .view .band .glass .s { font-size: .76rem; line-height: 1.3; }
html[data-short="true"] .view .band .ring.lg { --size: 64px; }
html[data-short="true"] .view .band .map-host, html[data-short="true"] .view .band .band-map .map-host { height: clamp(210px, 34vh, 300px) !important; min-height: 0 !important; }
html[data-short="true"] .view .band .ticker { font-size: .72rem; }
html[data-short="true"] .view .band .ticker .ev { padding-top: .35rem; padding-bottom: .35rem; }
/* Today: a wider copy column and the four tiles in one row, so the band ends where the list begins */
html[data-short="true"] .view .band:has(.band-map) { grid-template-columns: minmax(0, 48fr) minmax(0, 52fr) !important; }
html[data-short="true"] .view .band .band-copy { padding-top: 1rem !important; padding-bottom: 1rem !important; gap: .5rem !important; }
html[data-short="true"] .view .band .band-copy .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .5rem !important; }
html[data-short="true"] .view .band .band-copy .tiles .glass:nth-child(5) { grid-column: span 4; display: flex; align-items: baseline; gap: .75rem; }
html[data-short="true"] .view .band .band-copy .tiles .glass:nth-child(5) .n { margin: 0; }
html[data-short="true"] .view .band .band-acts { margin-top: .25rem !important; }
/* client record, tracker, clients: shorter maps and tighter tile grids */
html[data-short="true"] .view .band .tiles { gap: .5rem !important; }
html[data-short="true"] .view .band .facts { gap: .5rem !important; }
@media (max-width: 767px) { html[data-short="true"] .view .band .map-host { height: 220px !important; } html[data-short="true"] .view .band .band-copy .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
html[data-short="true"] .view .band .glass .s { display: none; }
html[data-short="true"] .view .band .band-copy { padding-top: .75rem !important; padding-bottom: .75rem !important; }
html[data-short="true"] .view .band .band-copy .tiles .glass:nth-child(5) .s { display: inline; }
html[data-short="true"] .view .band .band-copy .tiles .glass:nth-child(5) .k { display: none; }

/* ═══ V6 — who is who: every avatar carries a role ring, and a role tag can sit beside any name ═══ */
:root { --role-owner: var(--gold); --role-manager: #2E4A7A; --role-staff: var(--rp); --role-contractor: #5B8F8A; --role-partner: var(--s-waiting); --role-customer: var(--s-done); }
[data-theme="dark"] { --role-manager: #8FB4E0; }
.avatar[data-role] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--role-c, transparent); }
.avatar[data-role="owner"] { --role-c: var(--role-owner); } .avatar[data-role="manager"] { --role-c: var(--role-manager); } .avatar[data-role="staff"] { --role-c: var(--role-staff); }
.avatar[data-role="contractor"] { --role-c: var(--role-contractor); } .avatar[data-role="partner"] { --role-c: var(--role-partner); } .avatar[data-role="customer"] { --role-c: var(--role-customer); }
.avatar.sm[data-role] { box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 3px var(--role-c, transparent); }
.rtag { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .45rem; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--role-c, var(--cap)); vertical-align: middle; white-space: nowrap; }
.rtag.owner { --role-c: var(--role-owner); color: var(--gold-ink); } .rtag.manager { --role-c: var(--role-manager); } .rtag.staff { --role-c: var(--role-staff); }
.rtag.contractor { --role-c: var(--role-contractor); } .rtag.partner { --role-c: var(--role-partner); } .rtag.customer { --role-c: var(--role-customer); }
.who-line { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.who-line .nm { font-weight: 600; }
.legend-roles { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .78rem; color: var(--cap); align-items: center; }

/* ═══ V6 — the shared document sheets and the notification bell ═══ */
dialog.docsheet { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); color: var(--ink); padding: 0; width: min(600px, calc(100vw - 2rem)); max-height: min(88vh, 900px); box-shadow: var(--shadow-lg); }
dialog.docsheet.wide { width: min(720px, calc(100vw - 2rem)); }
dialog.docsheet::backdrop { background: color-mix(in oklab, var(--ink) 30%, transparent); backdrop-filter: blur(4px); }
dialog.docsheet .ds { display: flex; flex-direction: column; max-height: inherit; }
dialog.docsheet header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem .5rem; } dialog.docsheet header h2 { font-size: 1.35rem; flex: 1; }
dialog.docsheet > .ds > .cap { padding: 0 1.25rem .5rem; }
dialog.docsheet .body { padding: .25rem 1.25rem 1rem; overflow: auto; display: flex; flex-direction: column; gap: .5rem; }
dialog.docsheet footer { display: flex; align-items: center; gap: .625rem; padding: .875rem 1.25rem 1.125rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
dialog.docsheet .err { color: var(--s-you); font-size: .85rem; }
dialog.docsheet .lbl { font-size: .8rem; font-weight: 600; margin-top: .5rem; }
dialog.docsheet .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
dialog.docsheet .plist { display: flex; flex-direction: column; gap: .25rem; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r); padding: .25rem; }
dialog.docsheet .prow { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem; border-radius: 8px; cursor: pointer; min-height: 44px; }
dialog.docsheet .prow:hover { background: var(--inset); } dialog.docsheet .prow.off { opacity: .5; cursor: not-allowed; }
dialog.docsheet .prow .nm { font-weight: 600; } dialog.docsheet .prow .cap { margin-left: auto; text-align: right; }
dialog.docsheet .aud { display: flex; flex-wrap: wrap; gap: .5rem 1rem; } dialog.docsheet .aud label, dialog.docsheet .chk { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
@media (max-width: 600px) { dialog.docsheet .grid2 { grid-template-columns: 1fr; } }
/* the bell */
.bell { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); display: inline-grid; place-items: center; color: var(--ink2); }
.bell:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.bell svg { width: 20px; height: 20px; }
.bell .n { position: absolute; top: -4px; right: -4px; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--s-you); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg); }
.notif-wrap { position: fixed; inset: 0; z-index: 94; }
.notif { position: absolute; top: 4rem; right: 1.5rem; width: min(440px, calc(100vw - 2rem)); max-height: min(70vh, 640px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: rise var(--t) var(--ease); }
.notif header { display: flex; align-items: center; gap: .5rem; padding: .875rem 1rem .5rem; position: sticky; top: 0; background: var(--panel); } .notif header b { flex: 1; }
.notif ul { list-style: none; margin: 0; padding: .25rem .5rem .75rem; display: flex; flex-direction: column; gap: .125rem; }
.notif li a { display: grid; grid-template-columns: auto 1fr; gap: .625rem; padding: .625rem .625rem; border-radius: var(--r); color: var(--ink); text-decoration: none; align-items: start; }
.notif li a:hover { background: var(--inset); }
.notif li.unread a { background: color-mix(in oklab, var(--accent) 10%, var(--panel)); }
.notif li .t { line-height: 1.35; } .notif li .m { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--cap); font-size: .76rem; margin-top: .2rem; align-items: center; }
.notif li .m .rtag { height: 1.05rem; font-size: .58rem; }
.notif .none { padding: 1rem; color: var(--cap); }
@media (max-width: 767px) { .notif { top: 3.5rem; right: .5rem; left: .5rem; width: auto; } }

/* ═══ translation: the simulated call and its label ═══ */
.spinner { display: inline-block; width: 14px; height: 14px; border-radius: 999px; border: 2px solid color-mix(in oklab, currentColor 30%, transparent); border-top-color: currentColor; animation: spin .8s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.tr-btn svg { width: 14px; height: 14px; }
.tr-note { font-size: .74rem; color: var(--cap); display: inline-flex; align-items: center; gap: .35rem; }
.tr-note::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: var(--accent); }

/* ═══ V10 grow your plan ═══ */
/* the demo's language toggle, above the band on every customer page */
.demo-lang { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .375rem; margin: 0 0 .75rem; font-size: .8125rem; color: var(--cap); }
.demo-lang > span { margin-right: .25rem; }
.demo-lang .btn { border-radius: 999px; padding: 0 .875rem; }
.demo-lang .btn[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
@media (max-width: 767px) { .demo-lang { justify-content: flex-start; } .demo-lang > span { flex-basis: 100%; } .demo-lang .btn { min-height: 2.75rem; flex: 1 1 auto; } }
/* the panel: what you have, and the cards */
.plan { margin-top: var(--gap); }
.plan h2.display { margin: .25rem 0 0; }
.plan .plan-sub { font-size: .875rem; font-weight: 600; color: var(--ink2); margin: 1.25rem 0 .5rem; }
.plan.quiet { margin-top: var(--gap); } .plan.quiet .plan-sub { margin-top: 0; }
.plan .have { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.plan .have li { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .75rem; padding: .625rem .875rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); min-width: 0; }
.plan .have .cap { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.plan .dot { width: .625rem; height: .625rem; border-radius: 999px; background: var(--line2); flex: 0 0 auto; display: inline-block; }
.plan .dot.epr { background: var(--epr); } .plan .dot.rp { background: var(--rp); } .plan .dot.cos { background: var(--cos); }
.plan .offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--gap); }
.plan .plan-foot { margin-top: .875rem; }
.offer { --svc: var(--line2); display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: 1rem 1.125rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.offer.rp { --svc: var(--rp); } .offer.cos { --svc: var(--cos); } .offer.epr { --svc: var(--epr); }
.offer .pill { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); border-left: 3px solid var(--svc); padding: .125rem 0 .125rem .5rem; }
.offer h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.offer .line { color: var(--ink2); }
.offer .note { color: var(--cap); font-size: .8125rem; }
.offer .price { margin-top: auto; padding-top: .625rem; border-top: 1px dashed var(--line); font-size: .8125rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.offer .btn { align-self: flex-start; max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-top: .5rem; padding-bottom: .5rem; }
.plan .btn.gold, .co .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.plan .btn.gold:hover, .co .btn.gold:hover { background: var(--gold-2); }
.plan .btn[disabled], .co .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
/* the checkout */
dialog.docsheet.co { width: min(1000px, calc(100vw - 2rem)); }
.co .co-steps { list-style: none; margin: 0; padding: 0 1.25rem .5rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.co .co-steps li { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .125rem .75rem .125rem .25rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8125rem; color: var(--cap); }
.co .co-steps .n { width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-grid; place-items: center; border: 1.5px solid var(--line2); font-weight: 700; font-size: .75rem; }
.co .co-steps .n svg { width: 13px; height: 13px; }
.co .co-steps li[aria-current="step"] { color: var(--ink); border-color: var(--ink2); font-weight: 600; }
.co .co-steps li[aria-current="step"] .n { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.co .co-steps li.done .n { background: var(--s-done); border-color: var(--s-done); color: var(--panel); }
@media (max-width: 600px) { .co .co-steps li:not([aria-current]) .l { display: none; } .co .co-steps li:not([aria-current]) { padding-right: .25rem; } }
.co .co-body { gap: .75rem; }
.co .co-k { margin: 0; }
.co .co-grid { display: grid; gap: 1rem 1.5rem; min-width: 0; }
.co .co-main { min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 900px) { .co .co-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .co .co-sum { position: sticky; top: 0; } }
.co h3 { font-size: 1rem; font-weight: 600; margin-top: .75rem; } .co .co-main > h3:first-of-type, .co .co-main > .cap:first-child + h3 { margin-top: .25rem; }
.co h3:focus { outline: none; } .co h3:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.co h4 { font-size: .9rem; font-weight: 600; margin: .5rem 0 0; }
.co .chips { display: flex; flex-wrap: wrap; gap: .375rem; margin: .25rem 0; }
.co .ch { position: relative; display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; padding: 0 .875rem; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); font-size: .875rem; cursor: pointer; max-width: 100%; }
.co .ch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.co .ch:has(:checked) { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.co .ch:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.co .ch .cap { color: inherit; opacity: .8; font-size: .75rem; }
.co .ch.lock, .co .ch.lock:has(:checked) { background: var(--s-done-soft); border-color: transparent; color: var(--s-done); cursor: default; }
.co .ch.lock input { cursor: default; }
.co .tiers { display: grid; gap: .375rem; margin: .25rem 0; }
.co .tiers label { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .75rem; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.co .tiers label:has(:checked) { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); background: var(--raised); }
.co .tiers label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.co .tiers .pr { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.co .co-tick { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem; margin-top: .25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--raised); cursor: pointer; }
.co .co-tick input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: 0 0 auto; }
.co .co-tick > span { display: block; min-width: 0; } .co .co-tick > span > .cap { display: block; margin-top: .25rem; }
.co .co-tick.mandate { border-color: var(--line2); }
.co .co-num { max-width: 9rem; }
.co .co-cty { margin: .25rem 0 0; padding: .5rem .75rem .625rem; border: 1px solid var(--line); border-radius: var(--r); min-width: 0; }
.co .co-cty legend { padding: 0 .25rem; font-weight: 600; }
.co .co-fm { margin: 0; padding-left: 1.25rem; }
.co .co-sum { padding: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); min-width: 0; }
.co .co-sum h3 { margin: 0 0 .5rem; }
.co .co-sum ul { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .375rem; }
.co .co-sum li { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.co .co-sum li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.co .co-sum .a { white-space: nowrap; font-variant-numeric: tabular-nums; }
.co .co-sum li.disc { color: var(--s-done); }
.co .co-sum .due { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .25rem; padding-top: .625rem; border-top: 1px solid var(--line); font-weight: 700; }
.co .co-sum .due .a { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; }
.co .co-sum .mo { display: flex; justify-content: space-between; gap: 1rem; margin-top: .25rem; font-size: .875rem; color: var(--ink2); }
.co .co-sum .mo span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.co .co-sum .cap { margin-top: .625rem; }
.co .co-dl { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: .375rem 1rem; margin: .25rem 0; }
.co .co-dl dt { color: var(--cap); font-size: .8125rem; } .co .co-dl dd { margin: 0; overflow-wrap: anywhere; }
.co .co-form { display: grid; gap: .25rem; } .co .co-form .lbl, .co .co-bill .lbl, .co .co-card .lbl { margin-top: .375rem; }
.co .co-ta { min-height: 4.5rem; padding: .625rem .875rem; resize: vertical; }
.co .co-bill { display: grid; gap: .25rem; }
.co .co-card { display: grid; gap: .25rem; max-width: 26rem; } .co .co-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.co .co-wait { display: grid; justify-items: center; gap: .625rem; padding: 3rem 1rem; text-align: center; }
.co .co-wait .display { font-size: 1.5rem; }
.co .co-wait .spinner { width: 2.25rem; height: 2.25rem; border-width: 3px; color: var(--ink2); }
.co .tick { width: 3.5rem; height: 3.5rem; border-radius: 999px; display: grid; place-items: center; background: var(--s-done-soft); color: var(--s-done); }
.co .tick svg { width: 26px; height: 26px; }
.co .co-ok { display: flex; flex-direction: column; gap: .75rem; }
.co .co-ok > h3.display { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); font-weight: 400; margin: 0; }
.co .co-acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.co .co-acts .btn { white-space: normal; text-align: left; }
.co .co-mails { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.co .co-mails li { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .875rem; border: 1px solid var(--line); border-radius: var(--r); min-width: 0; overflow-wrap: anywhere; }
.co .co-mails details { margin-top: .25rem; } .co .co-mails details p { margin-top: .375rem; padding: .625rem .75rem; border-radius: 8px; background: var(--inset); color: var(--ink2); }
.co .co-mails summary { display: inline-flex; align-items: center; min-height: 2.75rem; cursor: pointer; color: var(--link); font-weight: 600; font-size: .8125rem; }
.co .co-nexttext { color: var(--ink2); max-width: 70ch; }
.co .co-next { padding: 1rem; border: 1px dashed var(--line2); border-radius: var(--r-lg); display: grid; gap: .5rem; }
@media (max-width: 600px) { .co .co-dl { grid-template-columns: 1fr; gap: .125rem; } .co .co-dl dd { margin-bottom: .375rem; } .co .co-card .row2 { grid-template-columns: 1fr; } }
/* the certificate, as an HTML page in the portal */
dialog.docsheet.certsheet header { padding-bottom: .25rem; } dialog.docsheet.certsheet header .cap { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cert { padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 1.75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); }
.cert .cs { text-align: center; color: var(--cap); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cert .ct { text-align: center; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); margin-top: .25rem; }
.cert .rule { width: 6rem; height: 2px; margin: 1rem auto 1.25rem; background: var(--gold); }
.cert dl { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); gap: .5rem 1.25rem; margin: 0; }
.cert dt { color: var(--cap); font-size: .875rem; } .cert dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cert .who { margin-top: 1rem; font-family: var(--font-display); color: var(--ink2); }
.cert .who + .who { margin-top: .375rem; }
@media (max-width: 600px) { .cert dl { grid-template-columns: 1fr; gap: .125rem; } .cert dd { margin-bottom: .5rem; } }

/* ═══ V11 (8 Oct 2026): the arrival page's demo button in bright orange, in both themes ═══ */
:root { --orange: #FF6A13; --orange-ink: #FFFFFF; --orange-hover: #E85C0A; }
:root[data-theme="dark"] { --orange: #FF7A2B; --orange-hover: #FF8C47; }
.btn.orange { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); font-weight: 700; box-shadow: 0 6px 18px color-mix(in oklab, var(--orange) 35%, transparent); }
.btn.orange:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--orange-ink); }
.btn.orange svg { color: var(--orange-ink); }

/* ═══ V13 (8 Oct 2026): feature tips — one short card per screen, the first time it is opened (lib/tips.js) ═══ */
.tip { position: absolute; top: 0; left: 0; z-index: 25; padding: .875rem 1rem 1rem 1.125rem; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: rise var(--t) var(--ease) both; }
.tip .tip-k { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.tip .tip-t { margin-top: .25rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.tip .tip-s { margin-top: .375rem; color: var(--ink2); font-size: .875rem; line-height: 1.5; }
.tip .tip-a { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .875rem; }
.tip .tip-off { min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--cap); font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }
.tip .tip-off:hover { color: var(--ink); }
.tip::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--panel); border: solid var(--line); border-width: 1px 0 0 1px; }
.tip[data-side="below"]::before { top: -7px; left: var(--cx, 24px); transform: translateX(-50%) rotate(45deg); }
.tip[data-side="above"]::before { bottom: -7px; left: var(--cx, 24px); transform: translateX(-50%) rotate(225deg); }
.tip[data-side="left"]::before { right: -7px; top: var(--cy, 22px); transform: translateY(-50%) rotate(135deg); }
.tip[data-side="right"]::before { left: -9px; top: var(--cy, 22px); background: var(--accent); border-color: var(--accent); transform: translateY(-50%) rotate(-45deg); }
.tip[data-side="float"]::before { display: none; }
.tip.leaving { animation: tip-out var(--t-fast) var(--ease) forwards; }
@keyframes tip-out { to { opacity: 0; transform: translateY(4px); } }

/* ── sector schema v1 (lib/schedule.js): due dates, periods and stages, approvals, authority steps, take-on, connections ──
   Only drawn when a pack's data carries them; every class here is new (w-*), so no existing screen changes. */
.w-lines { display: flex; flex-direction: column; gap: .25rem; margin-top: .375rem; font-size: .8125rem; color: var(--ink2); }
.w-pl { display: inline-flex; align-items: center; gap: .375rem .625rem; flex-wrap: wrap; }
.w-stg { display: inline-flex; gap: 4px; }
.w-stg i { width: .5rem; height: .5rem; border-radius: 999px; border: 1.5px solid var(--line2); }
.w-stg i.d { background: var(--s-done); border-color: var(--s-done); }
.w-stg i.c { border-color: var(--s-moving); background: var(--s-moving-soft); box-shadow: 0 0 0 2px var(--s-moving-soft); }
.w-dl { display: inline-flex; align-items: center; gap: .25rem .625rem; flex-wrap: wrap; }
.w-due { font-weight: 600; color: var(--ink); }
.w-due[title] { text-decoration: underline dotted var(--line2); text-underline-offset: 3px; cursor: help; }
.w-due.late, .w-cd.late { color: var(--s-you); }
.w-cd { font-weight: 600; color: var(--s-waiting); }
.w-gate, .w-ap { color: var(--cap); }
.w-next { display: block; margin-top: .125rem; font-size: .8125rem; color: var(--ink2); }
.w-next.you { color: var(--s-you); font-weight: 600; }
.avatar.w-gov { border-radius: 6px; border-color: var(--line2); background: var(--inset); color: var(--ink2); }
.w-wk { font-size: .78rem; color: var(--cap); font-weight: 500; } .w-due.done { color: var(--s-done); }
.w-takeon, .w-conn { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; font-size: .85rem; color: var(--ink2); }
.band .w-takeon, .band .w-conn { color: var(--band-ink2); }
.w-takeon b { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 .55rem; border-radius: 999px; background: var(--s-waiting-soft); color: var(--s-waiting); font-weight: 600; font-size: .8rem; }
.w-takeon.you b { background: var(--s-you-soft); color: var(--s-you); }
.w-conn .k { font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.w-conn span:not(.k) { display: inline-flex; align-items: center; gap: .375rem; }
.w-conn i { width: .45rem; height: .45rem; border-radius: 999px; background: var(--s-done); }
.w-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .5rem 1.25rem; margin-top: .5rem; padding: .625rem .875rem; border-radius: var(--r); background: var(--raised); border: 1px solid var(--line); font-size: .85rem; }
.w-check .h { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cap); margin-bottom: .125rem; }
.w-check ul { margin: 0; padding-left: 1.1rem; } .w-check .miss { color: var(--s-you); } .w-check .miss .h { color: var(--s-you); }
.w-ok { margin-top: .5rem; color: var(--s-done); font-weight: 600; font-size: .85rem; }
/* Today: "Due in 7 days" takes a row of its own in two- and four-column bands, a fifth column in a wide band without the map;
   the figures tile ("This month, without a phone call") is a sentence of counts under them. */
.today .tiles .glass.dues { grid-column: 1 / -1; }
@media (min-width: 1101px) { .today.nomap .tiles.t5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .today.nomap .tiles.t5 .glass.dues { grid-column: auto; } }
.today .tiles .figs2 .s { font-size: .9rem; line-height: 1.45; color: var(--band-ink); }
/* The calendar and the letters inbox (views/calendar.js, views/letters.js): a band, then dated rows grouped by when. */
.sch-v .band { padding: 1.75rem 2rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.sch-v .band .lede { color: var(--band-ink2); max-width: 62ch; }
.sch-v .band .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; margin-top: .75rem; max-width: 720px; }
.sch-v .band .glass .n { font-size: 2.1rem; }
.sch-v .grp { margin-top: 1.75rem; } .sch-v .grp .group-head { margin-top: 0; }
.sch-list { display: flex; flex-direction: column; gap: .5rem; }
.sch-row { --sc: var(--line2); display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .375rem 1.25rem; align-items: start; margin: 0; padding: .875rem 1.125rem; color: var(--ink); border-left: 4px solid var(--sc); }
.sch-row + .sch-row { margin-top: 0; }
.sch-row:hover { text-decoration: none; box-shadow: var(--shadow); }
.sch-row.s-you { --sc: var(--s-you); } .sch-row.s-moving { --sc: var(--s-moving); } .sch-row.s-waiting { --sc: var(--s-waiting); } .sch-row.s-done { --sc: var(--s-done); }
.sch-row .when { display: flex; flex-direction: column; gap: .125rem; }
.sch-row .when .d { font-weight: 600; white-space: nowrap; }
.sch-row .when .r { font-size: .8125rem; color: var(--cap); } .sch-row .when .r.late { color: var(--s-you); font-weight: 600; }
.sch-row .body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.sch-row .meta { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .625rem; font-size: .8125rem; color: var(--ink2); }
.sch-row .meta b { color: var(--ink); font-weight: 600; }
.sch-row .svcw { display: inline-flex; align-items: center; gap: .375rem; }
.sch-row .sdot, .sch-filters .sdot { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; }
.sch-row .ttl { font-weight: 600; overflow-wrap: anywhere; } .sch-row .sum { color: var(--ink2); font-size: .875rem; }
.sch-row .why { display: none; font-size: .78rem; color: var(--cap); }
.sch-row:hover .why, .sch-row:focus-visible .why { display: block; }
.sch-row .side { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; font-size: .8125rem; color: var(--ink2); }
.sch-row .side .who-line { display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap; }
.sch-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1.5rem; }
.sch-filters .pills { display: flex; flex-wrap: wrap; gap: .375rem; }
.sch-filters .pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .875rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink2); font-weight: 600; font-size: .85rem; }
.sch-filters .pill[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.sch-filters .ccsel { display: flex; align-items: center; gap: .5rem; } .sch-filters .ccsel .input { width: auto; min-width: 12rem; }
@media (max-width: 767px) {
  .sch-v .band { padding: 1.25rem 1.125rem; } .sch-v .band .tiles { gap: .5rem; } .sch-v .band .glass { padding: .75rem; } .sch-v .band .glass .n { font-size: 1.7rem; }
  .sch-row { grid-template-columns: minmax(0, 1fr) auto; } .sch-row .when { grid-column: 1; flex-direction: row; gap: .5rem; flex-wrap: wrap; } .sch-row .body { grid-column: 1 / -1; } .sch-row .side { grid-column: 2; grid-row: 1; }
  .sch-row .why { display: block; }
}
/* The tracker's "Your dates" and letters, and the accent "Approve and sign" (one per card) */
.w-dates { margin-top: var(--gap); }
.w-dlist { list-style: none; margin: 0; padding: 0; }
.w-dlist li { display: grid; grid-template-columns: 7rem 6.5rem minmax(0, 1fr) auto; align-items: center; gap: .25rem 1rem; padding: .625rem 0; border-top: 1px solid var(--line); }
.w-dlist li:first-child { border-top: 0; }
.w-dlist .d { font-weight: 600; white-space: nowrap; } .w-dlist .r { font-size: .8125rem; color: var(--cap); } .w-dlist .r.late { color: var(--s-you); font-weight: 600; }
.w-dlist .ttl { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; } .w-dlist .ttl b { font-weight: 600; overflow-wrap: anywhere; }
.w-letters ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.w-letters li { padding: .75rem 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .25rem; }
.w-letters .lh { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem .625rem; } .w-letters .lby { font-weight: 600; font-size: .875rem; }
.rq-acts .btn.gold, .wacts .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.rq-acts .btn.gold:hover, .wacts .btn.gold:hover { background: var(--gold-2); border-color: var(--gold-2); }
@media (max-width: 767px) { .w-dlist li { grid-template-columns: minmax(0, 1fr) auto; } .w-dlist .ttl { grid-column: 1 / -1; grid-row: 2; } .w-dlist .chip { grid-column: 2; grid-row: 1; } .w-dlist .r { grid-column: 1; } }
.w-dates .card-title svg { width: 18px; height: 18px; flex: 0 0 18px; }
/* A phone's rail strip with the calendar and letters (7+ entries) scrolls with whole labels instead of squeezing them;
   a rail of 6 or fewer (every compliance sign-in) is untouched. */
@media (max-width: 767px) { .rail .nav:has(> a:nth-child(7)) a { flex-shrink: 0; } }
/* the generic board's item cell on a phone: its label, then the title and its lines, stacked */
@media (max-width: 767px) { table.t.cards td.w-itd { display: block; } table.t.cards td.w-itd::before { display: block; margin-bottom: .25rem; } }
/* Ink on the accent in the dark theme: the accent fill stays light (gold, citron, blush), so the text on it takes the dark ink each
   theme sets for its accent (--gold-ink), not --ink (light in the dark theme: about 1.2:1 on gold). Counts, Undo, accent buttons. */
[data-theme="dark"] .nav .count:not(.quiet), [data-theme="dark"] .btn.accent, [data-theme="dark"] .toast .btn.undo,
[data-theme="dark"] .group-head .n:not(.quiet):not(.s-you):not(.s-waiting):not(.s-done) { color: var(--gold-ink); }
.w-dlist .ttl { flex-wrap: wrap; } .w-dlist .ttl .w-wk { flex-basis: 100%; padding-left: 1.125rem; }
@media (min-width: 768px) { .today.room .tiles.t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }