/* Generated by scripts/tokens.mjs from apps/atelier-sud-site/brand/tokens.json. Do not edit. */
:root {
  --paper: #fbfbfa;
  --ink: #141716;
  --ink2: #454b48;
  --muted: #6b716e;
  --line: #dedfdc;
  --panel: #eff0ee;
  --accent: #0f5f57;
  --focus: #0f5f57;
  --danger: #dc2626;
  --font-display: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-sans: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius-button: 0px;
  --radius-input: 0px;
  --radius-card: 10px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 200ms;

  /* Semantic aliases: brand values only. White is the brand's "white UI card" (BRAND.md). */
  --surface: #fff;
  --page: var(--paper);
  --text: var(--ink);
  --text-2: var(--ink2);
  --text-3: var(--muted);
  --rule: var(--line);
  --field-border: var(--muted);
  --tint: var(--panel);
  --action: var(--ink);
  --action-hover: var(--accent);
  --link: var(--accent);
  --done: var(--accent);
}

/* Atelier CRM — interface of the Les Jardins du Sud example. Strict minimalism:
   paper and white, hairlines, hierarchy by weight and spacing, tabular numbers on the right.
   Colour only from tokens.css; the accent is for the main action's hover, links, focus and
   "done". State is always a word plus a glyph shape, never a colour alone. `--danger` is
   never used in the UI (BRAND.md). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--text); font: 14px/1.45 var(--font-sans); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--surface); padding: 8px 12px; border: 1px solid var(--ink); }
.skip:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.soft { color: var(--text-2); }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wrap-any { overflow-wrap: anywhere; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row--wrap { flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.stack { display: grid; gap: 8px; min-width: 0; }
.stack--lg { gap: 24px; }
.stack--md { gap: 16px; }
.grow { flex: 1 1 auto; min-width: 0; }
.dot-sep > * + *::before { content: "·"; margin: 0 6px; color: var(--text-3); }

/* ───────── type ───────── */
.h1 { font: 400 26px/1.15 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.h1:focus { outline: none; }
.h2 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.h3 { font-size: 14px; font-weight: 600; }
.meta { font-size: 13px; color: var(--text-3); }
.label { font-size: 12.5px; color: var(--text-3); }
.lede { color: var(--text-2); max-width: 64ch; }
.link { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
.link:hover { text-decoration: underline; }
a.quiet { text-decoration: none; }
a.quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.kbd { display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--rule); font-size: 11.5px; line-height: 17px; text-align: center; color: var(--text-3); }

/* ───────── buttons ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--radius-button); background: var(--surface); color: var(--text); font-weight: 500; font-size: 14px; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn:hover { border-color: var(--ink); }
.btn--primary { background: var(--action); border-color: var(--action); color: var(--paper); }
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--tint); border-color: transparent; color: var(--text); }
.btn--link { height: auto; padding: 0; border: 0; background: none; color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.btn--link:hover { border: 0; color: var(--ink); }
.btn--sm { height: 30px; padding: 0 10px; font-size: 13px; gap: 6px; }
.btn--icon { width: 36px; padding: 0; }
.btn--sm.btn--icon { width: 30px; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; color: var(--text-3); background: var(--page); border-color: var(--rule); }
.btn--ghost:disabled { background: transparent; border-color: transparent; }
.btn--link:disabled { background: none; text-decoration: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] .btn-label::after { content: "…"; }
.btn svg { flex: none; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ───────── fields ───────── */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > .label-text { font-size: 13px; color: var(--text-2); font-weight: 500; }
.field .opt { color: var(--text-3); font-weight: 400; }
.field .hint { font-size: 12.5px; color: var(--text-3); }
.field-error { display: flex; gap: 6px; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--ink); }
.input, .textarea { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--field-border); border-radius: var(--radius-input); background: var(--surface); }
.textarea { height: auto; min-height: 88px; padding: 8px 10px; resize: vertical; line-height: 1.45; }
.input:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .trigger[aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.input:disabled, .textarea:disabled { background: var(--page); color: var(--text-3); border-color: var(--rule); }
.input--num { text-align: right; font-variant-numeric: tabular-nums; }
.input--sm { height: 30px; font-size: 13px; padding: 0 8px; }
.input-affix { display: flex; align-items: stretch; }
.input-affix .input { flex: 1; }
.input-affix .affix { display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--field-border); border-left: 0; color: var(--text-3); background: var(--page); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.check { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.check--done { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line); }
.radio-list { display: grid; gap: 8px; }

/* select menu: a button that opens a listbox (no native select) */
.select { position: relative; min-width: 0; }
.trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--field-border); background: var(--surface); text-align: left; cursor: pointer; }
.trigger--plain { width: auto; border-color: var(--rule); }
.trigger--plain:hover { border-color: var(--ink); }
.trigger--sm { height: 30px; font-size: 13px; }
.trigger .faint { color: var(--text-3); }
.trigger[aria-expanded="true"] { border-color: var(--ink); }
.pop { position: fixed; z-index: 40; max-width: min(360px, calc(100vw - 32px)); max-height: 320px; overflow: auto; padding: 4px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(20, 23, 22, .12); }
.opt-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px; border: 0; background: none; text-align: left; cursor: pointer; font-size: 14px; }
.opt-btn:hover, .opt-btn[data-active="true"] { background: var(--tint); }
.opt-btn[aria-selected="true"] { font-weight: 600; }
.opt-btn .tick { width: 16px; flex: none; }
.opt-btn small { display: block; color: var(--text-3); font-size: 12.5px; font-weight: 400; }
.opt-sep { height: 1px; margin: 4px -4px; background: var(--rule); }
.opt-head { padding: 8px 8px 4px; font-size: 12px; color: var(--text-3); }
.pop .input { margin-bottom: 4px; }

/* segmented: one choice among few, visible at once */
.seg { display: inline-flex; border: 1px solid var(--rule); background: var(--surface); }
.seg button { height: 30px; padding: 0 12px; border: 0; border-right: 1px solid var(--rule); background: none; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.seg button:last-child { border-right: 0; }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg--block { display: flex; }
.seg--block button { flex: 1; }

/* ───────── status: word + glyph shape ───────── */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
.badge--active { color: var(--text); }
.badge--attention { color: var(--text); font-weight: 600; }
.badge--done .glyph { color: var(--done); }
.badge--muted { color: var(--text-3); }
.glyph { flex: none; width: 10px; height: 10px; display: inline-block; position: relative; }
.glyph--dot::before { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: currentColor; }
.glyph--ring::before { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; border: 1.5px solid currentColor; }
.glyph--dashed::before { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; border: 1.5px dashed currentColor; }
.glyph--half::before { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.glyph--check::before { content: ""; position: absolute; left: 2px; top: 1px; width: 4px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.glyph--bang::before { content: ""; position: absolute; inset: 2px; background: currentColor; transform: rotate(45deg); }
.glyph--dash::before { content: ""; position: absolute; left: 1px; right: 1px; top: 4.25px; height: 1.5px; background: currentColor; }
.glyph--ask::before { content: "?"; position: absolute; inset: 0; font: 700 10px/10px var(--font-sans); text-align: center; }
.glyph--ask { border: 1.5px solid currentColor; border-radius: 50%; width: 12px; height: 12px; }
.glyph--ask::before { font-size: 8.5px; line-height: 9px; }
.count { min-width: 20px; padding: 0 6px; font-size: 12px; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-3); }
.count--strong { color: var(--text); font-weight: 600; }
.tag { display: inline-block; padding: 0 6px; border: 1px solid var(--rule); font-size: 12px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--rule); background: var(--surface); font-size: 13px; }
.chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: none; cursor: pointer; color: var(--text-3); }
.chip button:hover { color: var(--text); background: var(--tint); }

/* ───────── shell ───────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.harness ~ .app, .harness + .app { min-height: calc(100vh - 32px); }
.demo-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px 16px; min-height: 40px; padding: 4px 16px; background: var(--page); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--text-2); }
.demo-bar a.back { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.demo-bar a.back:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo-bar .ex-label { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.demo-bar .ex-label b { font-weight: 600; color: var(--text); }
.demo-bar .tools { flex-shrink: 0; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.demo-bar .cta { color: var(--link); font-weight: 600; text-decoration: none; white-space: nowrap; }
.demo-bar .cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.demo-bar .demo-menu-btn { display: none; }
.body { flex: 1; display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 0; }
.side { position: sticky; top: 40px; height: calc(100vh - 40px); display: flex; flex-direction: column; border-right: 1px solid var(--rule); background: var(--page); overflow-y: auto; }
.brand { padding: 18px 16px 14px; }
.brand-name { display: block; font: 400 19px/1.15 var(--font-display); color: var(--text); text-decoration: none; }
.brand-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); }
.nav { padding: 4px 8px 16px; display: grid; gap: 1px; }
.nav-group { margin: 14px 8px 4px; font-size: 12px; color: var(--text-3); }
.nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 8px; color: var(--text-2); text-decoration: none; }
.nav a:hover { background: var(--tint); color: var(--text); }
.nav a[aria-current="page"] { background: var(--tint); color: var(--text); font-weight: 600; }
.nav a .count { padding: 0; }
.side-foot { margin-top: auto; padding: 8px; border-top: 1px solid var(--rule); display: grid; gap: 1px; }
.side-foot button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text-2); }
.side-foot button:hover { background: var(--tint); color: var(--text); }
.who b { display: block; font-weight: 600; color: var(--text); }
.who small { display: block; color: var(--text-3); font-size: 12px; }
.main { min-width: 0; background: var(--surface); display: flex; flex-direction: column; }
.topbar { position: sticky; top: 40px; z-index: 20; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.topbar .menu-btn { display: none; }
.topbar .title-sm { display: none; font-weight: 600; }
.search-btn { display: flex; align-items: center; gap: 8px; width: min(420px, 100%); height: 34px; padding: 0 10px; border: 1px solid var(--rule); background: var(--page); color: var(--text-3); cursor: pointer; text-align: left; }
.search-btn:hover { border-color: var(--ink2); }
.search-btn .kbd { margin-left: auto; }
.topbar .spacer { flex: 1; }
.rtabs { display: flex; align-items: stretch; gap: 0; height: 36px; padding: 0 16px; border-bottom: 1px solid var(--rule); background: var(--page); overflow-x: auto; scrollbar-width: none; }
.rtab { display: flex; align-items: center; max-width: 220px; border-right: 1px solid var(--rule); font-size: 13px; }
.rtab:first-child { border-left: 1px solid var(--rule); }
.rtab a { display: flex; align-items: center; gap: 6px; min-width: 0; height: 100%; padding: 0 4px 0 12px; color: var(--text-2); text-decoration: none; }
.rtab a .k { color: var(--text-3); }
.rtab[aria-current="true"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--ink); }
.rtab[aria-current="true"] a { color: var(--text); font-weight: 600; }
.rtab .dirty { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.rtab button { display: grid; place-items: center; width: 26px; height: 26px; margin-right: 4px; border: 0; background: none; color: var(--text-3); cursor: pointer; }
.rtab button:hover { color: var(--text); background: var(--tint); }
.content { flex: 1; min-width: 0; }
.page { padding: 24px 32px 64px; max-width: 1320px; }
.page--wide { max-width: none; }
.page--narrow { max-width: 880px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .meta { margin-top: 6px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.back-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.section { display: grid; gap: 12px; min-width: 0; }
.section + .section { margin-top: 32px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 32px; align-items: start; }
.cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--side { grid-template-columns: minmax(0, 1fr) 320px; }
.cols--doc { grid-template-columns: minmax(0, 1fr) 360px; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.panel { background: var(--tint); padding: 12px 16px; }
.box { border: 1px solid var(--rule); background: var(--surface); }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.box-body { padding: 14px; }

/* restricted / not found / unavailable */
.state-page { max-width: 560px; padding: 64px 32px; }
.state-page .h1 { margin-bottom: 12px; }
.state-page p { color: var(--text-2); margin-bottom: 20px; }

/* ───────── KPI row (stat cells, not cards) ───────── */
.kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.kpi { display: grid; gap: 2px; padding: 14px 16px; border-left: 1px solid var(--rule); color: inherit; text-decoration: none; min-width: 0; }
.kpi:first-child { border-left: 0; padding-left: 0; }
a.kpi:hover .kpi-label { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.kpi-label { font-size: 13px; color: var(--text-2); }
.kpi-value { font-size: 24px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12.5px; color: var(--text-3); }
.kpi--attention .kpi-value { font-weight: 600; }
.money-line { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 10px 0; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--rule); }
.money-line b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* ───────── tables ───────── */
.tbl-wrap { overflow-x: auto; min-width: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { padding: 8px 12px; border-bottom: 1px solid var(--rule); font-size: 12.5px; font-weight: 500; color: var(--text-3); text-align: left; white-space: nowrap; }
.tbl th.num { text-align: right; }
.tbl th button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.tbl th button:hover { color: var(--text); }
.tbl th[aria-sort] { color: var(--text); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; min-width: 0; }
.tbl td:first-child, .tbl th:first-child { padding-left: 0; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl--pad td:first-child, .tbl--pad th:first-child { padding-left: 12px; }
.tbl--pad td:last-child, .tbl--pad th:last-child { padding-right: 12px; }
.tbl tbody tr[data-href] { cursor: pointer; }
.tbl tbody tr[data-href]:hover td { background: var(--page); }
.tbl tbody tr[aria-selected="true"] td { background: var(--tint); }
.tbl .cell-main { font-weight: 500; color: var(--text); text-decoration: none; }
.tbl a.cell-main:hover { text-decoration: underline; text-underline-offset: 3px; }
.tbl .cell-sub { display: block; font-size: 13px; color: var(--text-3); margin-top: 1px; }
.tbl .sel { width: 28px; }
.tbl tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--ink); }
.tbl-group td { padding-top: 20px; font-size: 12.5px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--rule); }
.list-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 13px; color: var(--text-3); }
.pager { display: flex; align-items: center; gap: 4px; }

/* toolbar above lists: search, filters, saved views */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.toolbar .search { width: 260px; }
.views { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
.views button { padding: 8px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--text-2); cursor: pointer; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }
.views button:hover { color: var(--text); }
.views button[aria-pressed="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--ink); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; background: var(--tint); font-size: 13px; }

/* ───────── tabs ───────── */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--text-2); cursor: pointer; white-space: nowrap; text-decoration: none; font-size: 14px; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--ink); }

/* ───────── record header and key/values ───────── */
.rec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; margin-bottom: 20px; }
.rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.rec-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; font-size: 14px; }
.kv dt { color: var(--text-3); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv--stack { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.kv--stack dd { margin-bottom: 8px; }

/* money summary: labels left, amounts right, a rule before what is due */
.msum { display: grid; gap: 0; font-size: 14px; min-width: 0; }
.msum-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.msum-row .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.msum-row--minus .v::before { content: "− "; }
.msum-row--total { border-top: 1px solid var(--ink); margin-top: 4px; padding-top: 10px; font-weight: 600; }
.msum-row--due { font-size: 17px; font-weight: 600; }
.msum-row--soft { color: var(--text-3); font-size: 13px; }
.msum-note { font-size: 12.5px; color: var(--text-3); padding-top: 4px; }

/* ───────── timeline (history) ───────── */
.history-tab > .seg { min-width: 0; max-width: 100%; overflow-x: auto; }
.history-tab > .seg button { flex-shrink: 0; }
.tl { display: grid; }
.tl-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.tl-when { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-what { min-width: 0; }
.tl-what b { font-weight: 600; }
.tl-text { margin-top: 4px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-item--note .tl-text { background: var(--tint); padding: 8px 10px; color: var(--text); }

/* ───────── banners and empty states ───────── */
.banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px 16px; background: var(--tint); align-items: baseline; }
.banner .glyph { margin-top: 1px; }
.banner-title { font-weight: 600; }
.banner-body { grid-column: 2; color: var(--text-2); }
.banner-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.banner--plain { background: none; border: 1px solid var(--rule); }
.banner--ink { border: 1px solid var(--ink); background: var(--surface); }
.empty { padding: 40px 0; max-width: 520px; }
.empty-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.empty-body { color: var(--text-2); margin-bottom: 16px; }
.empty--sm { padding: 16px 0; }
.skel { height: 14px; background: var(--tint); }
.skel-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.loading-line { height: 2px; background: linear-gradient(90deg, transparent, var(--ink2), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: slide 1.2s var(--ease) infinite; }
@keyframes slide { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ───────── overlays ───────── */
dialog { color: var(--text); }
.dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 24px 64px rgba(20, 23, 22, .18); }
.dlg--wide { width: min(800px, calc(100vw - 32px)); }
.dlg::backdrop, .drawer::backdrop { background: rgba(20, 23, 22, .32); }
.dlg[open], .drawer[open] { animation: rise var(--dur) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dlg-inner { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 4px; }
.dlg-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.dlg-title:focus { outline: none; }
.dlg-body { padding: 12px 24px 8px; overflow-y: auto; display: grid; gap: 16px; align-content: start; }
.dlg-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; }
.drawer { width: min(520px, 100vw); height: 100vh; max-height: 100vh; max-width: 100vw; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--rule); background: var(--surface); }
.drawer .dlg-inner { height: 100%; max-height: none; }
.drawer .dlg-body { flex: 1; }
.drawer .dlg-foot { border-top: 1px solid var(--rule); }
.drawer--left { margin: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--rule); width: min(300px, 86vw); }
.drawer--left[open] { animation: none; }
.toasts { position: fixed; z-index: 60; left: 16px; bottom: 16px; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--ink); color: var(--paper); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(20, 23, 22, .2); animation: rise var(--dur) var(--ease); font-size: 14px; }
.toast .grow { padding-top: 1px; }
.toast a, .toast .btn--link { color: var(--paper); }
.toast button.x { border: 0; background: none; color: var(--line); cursor: pointer; padding: 0 2px; }

/* ───────── record list rows (mobile and side lists) ───────── */
.rows { display: grid; }
.rowi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
a.rowi:hover .rowi-title { text-decoration: underline; text-underline-offset: 3px; }
.rowi-title { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.rowi-side { text-align: right; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.rowi-sub { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); min-width: 0; overflow-wrap: anywhere; }

/* ───────── Today ───────── */
.today-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.sched { display: grid; }
.sched-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.sched-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.sched-time small { display: block; font-weight: 400; color: var(--text-3); font-size: 12.5px; }
.sched-prep { grid-column: 2 / -1; font-size: 13px; color: var(--text-2); }
.attn { display: grid; }
.attn-item { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.attn-item .glyph { margin-top: 3px; }
.attn-item a { font-weight: 500; text-decoration: none; }
.attn-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.attn-item .meta { grid-column: 2; }
.attn-item .btns { grid-column: 2; margin-top: 6px; }

/* ───────── Messages (three panes) ───────── */
.inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; height: calc(100vh - 40px - 56px); min-height: 480px; }
.inbox--tabs { height: calc(100vh - 40px - 56px - 36px); }
.inbox > * { min-width: 0; min-height: 0; }
.inbox-list { display: flex; flex-direction: column; border-right: 1px solid var(--rule); background: var(--surface); }
.inbox-list .head { padding: 16px 16px 8px; display: grid; gap: 10px; }
.inbox-list .head .row .input { flex: 1 1 auto; width: auto; min-width: 0; }
.inbox-list .head .row .select { flex: none; }
.inbox-scroll { flex: 1; overflow-y: auto; }
.conv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.conv:hover { background: var(--page); }
.conv[aria-current="true"] { background: var(--tint); }
.conv-name { font-weight: 500; min-width: 0; }
.conv-when { font-size: 12.5px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.conv-subj { grid-column: 1 / -1; font-size: 13.5px; color: var(--text); min-width: 0; }
.conv-excerpt { grid-column: 1 / -1; font-size: 13px; color: var(--text-3); min-width: 0; }
.conv-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.conv--unread .conv-name, .conv--unread .conv-subj { font-weight: 700; }
.conv--unread .conv-name::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--ink); vertical-align: middle; }
.thread { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
.thread-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 14px 24px; border-bottom: 1px solid var(--rule); }
.thread-head .h2 { font-size: 17px; }
.thread-scroll { flex: 1; overflow-y: auto; padding: 16px 24px; display: grid; gap: 16px; align-content: start; }
.msg { display: grid; gap: 4px; max-width: 72ch; }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--text-3); }
.msg-head b { font-weight: 600; color: var(--text); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; }
.msg--out { justify-self: end; text-align: left; }
.msg--out .msg-body { padding: 10px 12px; border: 1px solid var(--rule); }
.msg--in .msg-body { padding: 10px 12px; background: var(--page); border: 1px solid var(--rule); }
.msg--note .msg-body { padding: 10px 12px; background: var(--tint); }
.msg-delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; }
.msg-delivery .why { color: var(--text-2); }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; }
.fold { justify-self: center; }
.composer { border-top: 1px solid var(--rule); padding: 12px 24px 16px; display: grid; gap: 8px; background: var(--surface); }
.composer--note .composer-box { background: var(--tint); }
.composer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.composer-to { font-size: 13px; color: var(--text-2); min-width: 0; }
.composer-to b { color: var(--text); font-weight: 600; }
.composer-box { border: 1px solid var(--field-border); background: var(--surface); }
.composer-box:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.composer-box textarea { display: block; width: 100%; min-height: 84px; max-height: 40vh; padding: 10px 12px; border: 0; background: transparent; resize: vertical; font-size: 15px; line-height: 1.5; }
.composer-box textarea:focus { outline: none; }
.composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.composer-note { font-size: 12.5px; color: var(--text-3); }
.ctx { border-left: 1px solid var(--rule); background: var(--page); overflow-y: auto; padding: 16px; display: grid; gap: 20px; align-content: start; }
.ctx-sec { display: grid; gap: 8px; }
.ctx-sec h3 { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.inbox-empty { display: grid; place-content: center; padding: 32px; color: var(--text-2); text-align: center; }

/* ───────── quote editor ───────── */
.lines { width: 100%; border-collapse: collapse; }
.lines th { padding: 6px 6px; font-size: 12.5px; font-weight: 500; color: var(--text-3); text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.lines td { padding: 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.lines td:first-child, .lines th:first-child { padding-left: 0; }
.lines td:last-child, .lines th:last-child { padding-right: 0; }
.lines .c-qty { width: 84px; }
.lines .c-unit { width: 88px; }
.lines .c-price { width: 116px; }
.lines .c-disc { width: 104px; }
.lines .c-total { width: 108px; }
.lines--edit td.c-total { padding-top: 14px; }
.lines .c-del { width: 36px; }
.lines .field-error { margin-top: 4px; font-size: 12.5px; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.editor-side { position: sticky; top: calc(40px + 56px + 16px); display: grid; gap: 16px; }
.rev-list { display: grid; }
.rev-list a, .rev-list span.cur { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 13.5px; }
.rev-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rev-list .cur { font-weight: 600; }
.sticky-actions { display: none; }

/* ───────── planning ───────── */
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.plan-grid { --hour: 52px; --cols: 8; display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(120px, 1fr)); border-top: 1px solid var(--rule); overflow-x: auto; }
.plan-colhead { padding: 8px 8px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); background: var(--surface); font-size: 13px; min-width: 0; }
.plan-colhead b { display: block; font-weight: 600; }
.plan-colhead small { display: block; color: var(--text-3); font-size: 12px; }
.plan-corner { border-bottom: 1px solid var(--rule); background: var(--surface); }
.plan-hours { position: relative; }
.plan-hour { height: var(--hour); font-size: 11.5px; color: var(--text-3); text-align: right; padding-right: 8px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.plan-col { position: relative; border-left: 1px solid var(--rule); background-image: linear-gradient(to bottom, var(--rule) 1px, transparent 1px); background-size: 100% var(--hour); }
.plan-col--off { background-color: var(--page); }
.plan-closed { position: absolute; left: 0; right: 0; background: var(--page); }
.plan-absent { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; background: var(--tint); font-size: 12.5px; color: var(--text-2); }
.ev { position: absolute; left: 4px; right: 4px; z-index: 1; display: block; overflow: hidden; padding: 4px 6px; border: 1px solid var(--ink2); background: var(--surface); font-size: 12px; line-height: 1.3; text-decoration: none; color: var(--text); }
.ev:hover { border-color: var(--ink); z-index: 2; box-shadow: 0 6px 16px rgba(20, 23, 22, .12); }
.ev b { font-weight: 600; display: block; }
.ev .ev-st { display: block; margin-top: 2px; }
.ev--done { border-color: var(--rule); color: var(--text-3); }
.ev--cancelled { border-style: dashed; border-color: var(--rule); color: var(--text-3); }
.ev--conflict { border: 2px solid var(--ink); }
.ev-buf { position: absolute; left: 4px; right: 4px; border: 1px dashed var(--line); border-top: 0; border-bottom: 0; }
.unassigned { display: grid; gap: 8px; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--ink); }
.week { display: grid; grid-template-columns: 160px repeat(var(--days, 5), minmax(120px, 1fr)); border-top: 1px solid var(--rule); overflow-x: auto; }
.week > div { border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); padding: 8px; min-width: 0; font-size: 12.5px; }
.week .wk-name { border-left: 0; padding-left: 0; font-size: 13.5px; }
.week .wk-head { font-weight: 600; font-size: 13px; background: var(--surface); }
.week .wk-today { box-shadow: inset 0 2px 0 var(--ink); }
.week .wk-off { background: var(--tint); color: var(--text-2); }
.wk-ev { display: block; padding: 4px 6px; margin-bottom: 4px; border: 1px solid var(--rule); text-decoration: none; color: var(--text); }
.wk-ev:hover { border-color: var(--ink); }
.wk-ev--conflict { border: 2px solid var(--ink); }
.conflicts { display: grid; gap: 0; }
.conflict { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; }

/* ───────── visit (worker, phone first) ───────── */
.visit-steps { display: grid; }
.visit-steps .check { padding: 12px 0; border-bottom: 1px solid var(--rule); width: 100%; }
.visit-steps .check input { width: 20px; height: 20px; margin-top: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.file-tile { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--rule); font-size: 12.5px; min-width: 0; }
.file-tile .thumb { aspect-ratio: 4 / 3; background: var(--tint); display: grid; place-items: center; color: var(--text-3); font-size: 12px; }

/* ───────── client view ───────── */
.portal { min-height: calc(100vh - 40px); background: var(--page); }
.portal-head { border-bottom: 1px solid var(--rule); background: var(--surface); }
.portal-head .in { max-width: 820px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.portal-company { font: 400 21px/1.2 var(--font-display); }
.portal-main { max-width: 820px; margin: 0 auto; padding: 24px 24px 64px; display: grid; gap: 32px; }
.portal-card { background: var(--surface); border: 1px solid var(--rule); }
.portal-card .box-head { padding: 14px 18px; }
.portal-card .box-body { padding: 16px 18px; }
.portal .msg--out .msg-body { background: var(--surface); }

/* ───────── documents preview frame ───────── */
.doc-frame { background: var(--tint); padding: 24px; overflow: auto; }
.doc-scale { transform-origin: top left; }

/* ───────── reports ───────── */
.bar-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.bar { height: 8px; background: var(--ink2); }
.bar--track { flex: 1; height: 8px; background: var(--tint); position: relative; }
.bar--track .bar { position: absolute; left: 0; top: 0; bottom: 0; }

/* ───────── responsive: tablet ───────── */
@media (max-width: 1180px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .inbox .ctx { display: none; }
  .inbox .ctx.is-open { display: grid; position: fixed; z-index: 35; top: 96px; right: 0; bottom: 0; width: min(340px, 90vw); box-shadow: -12px 0 32px rgba(20, 23, 22, .12); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .editor { grid-template-columns: minmax(0, 1fr); }
  .editor-side { position: static; }
}
@media (min-width: 1181px) { .ctx-toggle { display: none !important; } }

/* ───────── responsive: phone ───────── */
@media (max-width: 1180px) {
  body { font-size: 15px; }
  .input, .textarea, .trigger, .composer-box textarea { font-size: 16px; }
  .input, .trigger { height: 44px; }
  .btn { height: 44px; }
  .btn--sm { height: 36px; }
  .seg button { height: 36px; }
  .demo-bar { min-height: 44px; padding: 4px 12px; }
  .demo-bar .tools > :not(.demo-menu-btn) { display: none !important; }
  .demo-bar .demo-menu-btn { display: inline-flex; }
  .body { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .topbar { top: 44px; height: 52px; padding: 0 8px 0 4px; gap: 4px; }
  .topbar .menu-btn { display: inline-flex; }
  .topbar .title-sm { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .search-btn { width: 44px; padding: 0; justify-content: center; border: 0; background: none; }
  .topbar .search-btn .ph, .topbar .search-btn .kbd { display: none; }
  .topbar .spacer { display: none; }
  .rtabs { display: none; }
  .page { padding: 16px 16px 96px; }
  .h1 { font-size: 23px; }
  .cols, .cols--even, .cols--side, .cols--doc, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .bar-cell { min-width: 64px; }
  .kpis { --n: 2 !important; }
  .kpi:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .kpi-value { font-size: 21px; }
  .rec-head { grid-template-columns: minmax(0, 1fr); }
  .toolbar .search { width: 100%; }
  /* tables become stacked rows: the first cell is the title, the rest label: value */
  .tbl--stack thead { display: none; }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack td { display: block; width: 100%; }
  .tbl--stack tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .tbl--stack td { padding: 2px 0 !important; border: 0; text-align: left; }
  .tbl--stack td[data-label]:not([data-label=""])::before { content: attr(data-label) " · "; color: var(--text-3); font-size: 13px; }
  .tbl--stack td.sel { display: none; }
  .tbl--stack .num { text-align: left; }
  .tbl--stack tr.tbl-group { border: 0; padding-top: 16px; }
  .inbox, .inbox--tabs { grid-template-columns: minmax(0, 1fr); height: auto; min-height: calc(100vh - 96px); }
  .inbox[data-pane="list"] .thread, .inbox[data-pane="thread"] .inbox-list { display: none; }
  .inbox .ctx.is-open { top: 96px; width: 100vw; }
  .inbox-list { border-right: 0; }
  .thread { min-height: calc(100vh - 96px); }
  .thread-head { padding: 10px 16px; }
  .thread-scroll { padding: 12px 16px; }
  .composer { position: sticky; bottom: 0; padding: 8px 12px 12px; }
  .msg--out { justify-self: stretch; }
  .lines thead { display: none; }
  .lines, .lines tbody, .lines tr { display: block; width: 100%; }
  .lines tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .lines td { display: block; padding: 0 !important; border: 0; width: auto !important; }
  .lines td.c-label { grid-column: 1 / -1; }
  .lines td.c-total { padding-top: 0 !important; text-align: left; align-self: center; }
  .sticky-actions { display: flex; position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--rule); }
  .sticky-actions .btn { flex: 1; }
  .hide-phone { display: none !important; }
  .plan-grid { --cols: 1; }
  .week { grid-template-columns: 110px repeat(var(--days, 5), minmax(96px, 1fr)); }
  .tl-item { grid-template-columns: minmax(0, 1fr); }
  .dlg { width: 100vw; max-width: 100vw; max-height: 100vh; margin: auto 0 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .drawer { width: 100vw; }
  .toasts { left: 12px; right: 12px; bottom: 76px; width: auto; }
  .portal-head .in, .portal-main { padding-left: 16px; padding-right: 16px; }
  .state-page { padding: 40px 16px; }
}
@media (min-width: 1181px) { .show-phone { display: none !important; } }

/* zoom 200%: lines wrap, nothing is cut; widths are in rem-free px but every row can wrap */
@media (max-width: 480px) {
  .rec-meta { gap: 4px 12px; }
  .kpis { --n: 1 !important; }
  .kpi { border-left: 0 !important; padding-left: 0 !important; }
  .kpi + .kpi { border-top: 1px solid var(--rule); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .demo-bar, .side, .topbar, .rtabs, .harness, .toasts, .no-print { display: none !important; }
  .body { display: block; }
  body { background: #fff; }
}

/* Owner package 1: message direction also has words, alignment and border cues. */
.msg--in { justify-self: start; margin-right: 24px; }
.msg--out { margin-left: 24px; }
.msg--out .msg-body { background: var(--tint); border-left: 3px solid var(--accent); }
.msg--note { justify-self: stretch; max-width: none; margin-inline: 12px; }
.msg--note .msg-body { border: 1px dashed var(--text-2); }
.msg--attention .msg-delivery { padding: 10px 12px; border: 2px solid var(--text-2); background: var(--tint); }
.msg--attention .msg-delivery .why { flex-basis: 100%; font-weight: 600; }
.task-create { display: grid; grid-template-columns: minmax(160px, 1fr) 200px 170px auto; gap: 12px; align-items: end; }
.task-create > * { min-width: 0; }
.task-create input { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 900px) {
  .task-create { grid-template-columns: minmax(0, 1fr); }
  .task-create > .btn { width: 100%; min-height: 44px; }
}

/* Optional journey guidance stays in the document flow, outside dialogs. */
.onboarding { margin: 16px; padding: 16px; border: 1px solid var(--accent); background: var(--surface); min-width: 0; }
.onboarding > .row { gap: 12px; }
.onboarding-body { display: grid; gap: 10px; margin-top: 12px; max-width: 76ch; }
.onboarding summary { cursor: pointer; padding-block: 8px; }
.onboarding ol { padding-inline-start: 24px; }
.onboarding-target { outline: 3px solid var(--focus); outline-offset: 4px; scroll-margin: 20px; }
@media (max-width: 600px) {
  .onboarding { margin: 12px; padding: 12px; }
  .onboarding > .row { align-items: stretch; flex-direction: column; }
  .onboarding .btns { flex-wrap: wrap; }
  .onboarding .btn { white-space: normal; min-height: 44px; }
}
@media print { .onboarding { display: none; } }
/* Long recipient addresses must shrink inside the mobile composer grid. */
.composer > * { min-width: 0; }
.composer-to { max-width: 100%; }

/* Messages use the space left by the real header, tabs and guidance banner. */
.app:has(.body--inbox) { position: relative; height: 100dvh; min-height: 0; overflow: hidden; }
.body--inbox { min-height: 0; overflow: hidden; }
.body--inbox .side { height: auto; min-height: 0; top: 0; }
.body--inbox .main { min-height: 0; }
.body--inbox .topbar, .body--inbox .rtabs { flex-shrink: 0; }
.body--inbox .topbar { position: relative; top: auto; }
.body--inbox .content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.body--inbox .onboarding { flex: 0 1 auto; max-height: 30%; overflow-y: auto; }
.body--inbox .inbox { flex: 1; height: auto; min-height: 0; }
.body--inbox .thread { min-height: 0; }
.body--inbox .inbox-scroll, .body--inbox .thread-scroll { min-height: 0; }
.body--inbox .thread-head { flex-shrink: 1; min-height: 0; max-height: 25%; overflow-y: auto; }
.body--inbox .composer { position: static; flex-shrink: 0; max-height: 70%; overflow-y: auto; }
.task-create-card { border-color: var(--text-2); scroll-margin: 112px; }
.task-create-card:focus-within { border-color: var(--focus); outline: 1px solid var(--focus); }
@media (max-height: 650px) {
  .body--inbox .composer-box textarea { min-height: 48px; max-height: 15dvh; }
}

/* A4 documents of the example. Sizes in mm/pt; brand values only; the example mark
   is on every page. Screen: scaled pages on a tint frame. Print: the pages alone. */
.doc { color: var(--ink); font: 9.5pt/1.4 var(--font-sans); }
.doc-page { position: relative; width: 210mm; height: 297mm; padding: 14mm 16mm; margin: 0 auto 12px; background: #fff; box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(20, 23, 22, .08); display: flex; flex-direction: column; overflow: hidden; }
.doc-scale > .doc > .doc-page { zoom: var(--doc-scale, 1); }
.doc-measure { position: absolute; left: -10000px; top: 0; visibility: hidden; }
.doc-mark { padding: 1.5mm 0; margin-bottom: 6mm; border-top: 0.3mm solid var(--ink); border-bottom: 0.3mm solid var(--ink); font-size: 8pt; font-weight: 600; letter-spacing: .14em; text-align: center; }
.doc-head { display: flex; justify-content: space-between; gap: 10mm; margin-bottom: 7mm; }
.doc-head--short { align-items: baseline; margin-bottom: 4mm; font-size: 9pt; color: var(--ink2); }
.doc-wordmark { font-family: var(--font-display); font-size: 12pt; color: var(--ink); }
.doc-wordmark--big { font-size: 19pt; line-height: 1.1; margin-bottom: 2mm; }
.doc-small { font-size: 8pt; color: var(--ink2); }
.doc-titleblock { text-align: right; min-width: 62mm; }
.doc-title { font-family: var(--font-display); font-size: 21pt; line-height: 1.1; margin-bottom: 2mm; }
.doc-kv { display: grid; grid-template-columns: auto auto; justify-content: end; gap: .6mm 4mm; margin: 0; font-size: 9pt; }
.doc-kv dt { color: var(--muted); }
.doc-kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.doc-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4mm 8mm; padding: 4mm 0; margin-bottom: 6mm; border-top: 0.2mm solid var(--line); border-bottom: 0.2mm solid var(--line); }
.doc-ref { grid-column: 1 / -1; }
.doc-label { font-size: 7.5pt; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .8mm; }
.doc-strong { font-weight: 600; }
.doc-lines { width: 100%; border-collapse: collapse; }
.doc-lines th { padding: 1.6mm 2mm; border-bottom: 0.3mm solid var(--ink); font-size: 8pt; font-weight: 600; text-align: left; color: var(--ink2); }
.doc-lines td { padding: 2mm; border-bottom: 0.2mm solid var(--line); vertical-align: top; }
.doc-lines .c-label { padding-left: 0; overflow-wrap: anywhere; }
.doc-lines .c-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 24mm; }
.doc-lines .c-u { width: 16mm; color: var(--ink2); }
.doc-lines td:last-child, .doc-lines th:last-child { padding-right: 0; }
.doc-tail { margin-top: 6mm; display: grid; gap: 5mm; }
.doc-sum { justify-self: end; width: 82mm; font-variant-numeric: tabular-nums; }
.doc-sum-row { display: flex; justify-content: space-between; gap: 6mm; padding: 1.2mm 0; }
.doc-sum-row--total { border-top: 0.3mm solid var(--ink); margin-top: 1mm; padding-top: 2mm; font-weight: 600; }
.doc-sum-row--due { font-size: 12pt; font-weight: 600; border-top: 0.3mm solid var(--ink); margin-top: 1mm; padding-top: 2mm; }
.doc-note { font-size: 8.5pt; color: var(--ink2); }
.doc-conditions ul { margin: 0; padding-left: 4mm; list-style: disc; font-size: 8.5pt; color: var(--ink2); }
.doc-accept { border: 0.2mm solid var(--line); padding: 3mm 4mm; font-size: 8.5pt; color: var(--ink2); }
.doc-accept p { margin: 0; }
.doc-cont { margin-top: 3mm; font-size: 8pt; color: var(--muted); text-align: right; }
.doc-foot { margin-top: auto; padding-top: 3mm; border-top: 0.2mm solid var(--line); display: flex; justify-content: space-between; gap: 6mm; font-size: 7.5pt; color: var(--muted); }

@media print {
  @page { size: A4; margin: 0; }
  body * { visibility: hidden; }
  .doc-print, .doc-print * { visibility: visible; }
  .doc-print { position: absolute; left: 0; top: 0; }
  .doc-print .doc-measure { display: none; }
  .doc-print .doc-page { zoom: 1 !important; margin: 0; box-shadow: none; break-after: page; }
  .doc-print .doc-page:last-child { break-after: auto; }
}

/* Demo build, print only (UX-FIXES UXF-09). When a document is printed, demo/print.ts puts
   a copy of its A4 pages at the document root and marks <html>; the rest of the app is
   taken out of the flow so the copy can run over several sheets. The pages themselves keep
   the design of src/documents/documents.css. */
@media print {
  html.print-copy body > :not(#print-copy) { display: none !important; }
  html.print-copy #print-copy { position: static !important; padding: 0; background: none; overflow: visible; }
  html.print-copy #print-copy .doc-scale { transform: none; }
  /* Chrome clips the start of later flex pages when overflow:hidden survives
     pagination. Page fitting was already measured on screen; let print fragments
     paint their headers and example mark without that screen clipping box. */
  html.print-copy #print-copy .doc-page { overflow: visible; break-inside: avoid; }
}

/* Guided tour: soft focus. The page is frosted, one element stays sharp, the card sits
   next to it. Steps where the visitor must click are green on purpose (.tour--do). */
/* Stable portal root: it is moved between <body> and a dialog instead of being
   re-created, so the coach card keeps its node, side and measured size. */
.tour-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.tour { --veil: rgba(241, 242, 239, .62); --blur: 2.5px; --ink-soft: rgba(20, 23, 22, .08); --act: var(--accent); --act-tint: rgba(15, 95, 87, .08); position: fixed; inset: 0; z-index: 70; pointer-events: none; font-family: var(--font-sans); }
.tour > * { pointer-events: auto; }
.tour-veil { position: fixed; background: var(--veil); backdrop-filter: blur(var(--blur)) saturate(.75); -webkit-backdrop-filter: blur(var(--blur)) saturate(.75); }
.tour-corner { pointer-events: none !important; }
.tour-block { position: fixed; background: transparent; cursor: default; }

/* The sharp element: lifted off the frost; calm when you only look */
.tour-ring { position: fixed; pointer-events: none !important; border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(20, 23, 22, .35), 0 18px 44px rgba(20, 23, 22, .16); }
/* …and green with ripples when you have to click it */
.tour--do .tour-ring { box-shadow: 0 0 0 2.5px var(--act), 0 0 0 7px rgba(15, 95, 87, .16), 0 18px 44px rgba(20, 23, 22, .18); }
.tour .tour-ring.tour-ring--area { box-shadow: 0 0 0 1px rgba(20, 23, 22, .1), 0 24px 60px rgba(20, 23, 22, .18); animation: none; }
.tour-ripple { position: fixed; pointer-events: none !important; border-radius: 10px; }
.tour-ripple::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--act); opacity: 0; animation: tour-ripple 5s ease-out infinite; }
.tour-ripple::after { display: none; }
@keyframes tour-ripple { 0% { inset: 0; opacity: 0; } 8% { opacity: .38; } 60%, 100% { inset: -16px; opacity: 0; border-radius: 24px; } }
.tour-beacon { position: fixed; z-index: 1; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--act); border: 2.5px solid #fff; pointer-events: none !important; box-shadow: 0 2px 6px rgba(20, 23, 22, .25); }

/* The example's toasts would cover the element to click: the card says it instead. */
html:has(.tour) .toasts { display: none !important; }
/* A dialog's own dark backdrop under the frost would make modal steps greyer than the rest. */
html:has(.tour) dialog.dlg::backdrop, html:has(.tour) dialog.drawer::backdrop { background: transparent; }
/* A transformed dialog would make viewport-positioned coach marks relative to itself. */
dialog.dlg[open]:has(.tour), dialog.drawer[open]:has(.tour) { animation: none; }

/* Card */
.tour-card { position: fixed; z-index: 2; width: 360px; padding: 16px 18px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 1px 0 var(--ink-soft), 0 22px 56px rgba(20, 23, 22, .16); }
/* The entrance belongs to the first card only; moving the tour into a dialog must
   not replay it on every step. */
.tour-card--enter:not(.tour-card--dock) { animation: tour-in 240ms var(--ease); }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-card--dock { left: 50%; transform: translateX(-50%); animation: none; }
.tour-card--coach { transform: none; }
.tour-card--act { border: 2px solid var(--act); box-shadow: 0 0 0 5px rgba(15, 95, 87, .1), 0 22px 56px rgba(20, 23, 22, .18); }
.tour-chapters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; }
.tour-seg { height: 3px; border-radius: 2px; background: var(--tint); overflow: hidden; }
.tour-seg i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 420ms var(--ease); }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; min-height: 22px; }
.tour-kicker { font-size: 12px; color: var(--text-3); letter-spacing: .01em; }
.tour-kicker b { font-weight: 600; color: var(--accent); }
/* «Your turn»: the badge that says this step waits for you */
.tour-turn { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--act); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tour-turn i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: tour-blink 1.2s ease-in-out infinite; }
@keyframes tour-blink { 50% { opacity: .35; } }
.tour-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.22; margin: 0 0 6px; letter-spacing: -.005em; }
.tour-body { font-size: 14.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.tour-x { width: 28px; height: 28px; margin: -6px -8px -6px 0; border: 0; background: transparent; color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 7px; }
.tour-x:hover { background: var(--tint); color: var(--text); }
.tour-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.tour-btns--center { justify-content: center; }
/* «↑ Click [Create]»: where it is, and the real button's words drawn like the button */
.tour-act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px -18px -16px; padding: 12px 18px 13px; background: var(--act-tint); border-top: 1px solid rgba(15, 95, 87, .18); border-radius: 0 0 12px 12px; font-size: 14px; font-weight: 600; color: var(--act); }
.tour-point { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--act); color: #fff; font-size: 14px; flex-shrink: 0; animation: tour-nudge-y 1.2s var(--ease) infinite; }
.tour-card--right .tour-point, .tour-card--left .tour-point { animation-name: tour-nudge-x; }
.tour-card--top .tour-point { animation-name: tour-nudge-down; }
.tour-card--right .tour-point { animation-name: tour-nudge-left; }
@keyframes tour-nudge-y { 50% { transform: translateY(-3px); } }
@keyframes tour-nudge-down { 50% { transform: translateY(3px); } }
@keyframes tour-nudge-x { 50% { transform: translateX(3px); } }
@keyframes tour-nudge-left { 50% { transform: translateX(-3px); } }
.tour-key { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; background: var(--action); color: var(--paper); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--dur) var(--ease); }
.tour-key:hover { background: var(--accent); }
.tour-key:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tour-arrow { position: absolute; width: 14px; height: 14px; background: var(--surface); border: 1px solid var(--rule); transform: rotate(45deg); }
.tour-card--act .tour-arrow { border: 2px solid var(--act); }
.tour-arrow--bottom { top: -8px; margin-left: -7px; border-right: 0 !important; border-bottom: 0 !important; }
.tour-arrow--top { bottom: -8px; margin-left: -7px; border-left: 0 !important; border-top: 0 !important; background: var(--surface); }
.tour-card--act .tour-arrow--top { background: #ecf2f1; }
.tour-arrow--right { left: -8px; margin-top: -7px; border-right: 0 !important; border-top: 0 !important; }
.tour-arrow--left { right: -8px; margin-top: -7px; border-left: 0 !important; border-bottom: 0 !important; }

/* Centered cards: role switch, end, lost element */
.tour-card--center { left: 50%; top: 50%; width: min(460px, calc(100vw - 32px)); transform: translate(-50%, -50%); padding: 30px 30px 26px; text-align: center; animation: tour-pop 280ms var(--ease); }
/* Long menus must stay inside the visible viewport, with every action reachable. */
.tour-card--center { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.tour-card--wide { width: min(500px, calc(100vw - 32px)); }
@keyframes tour-pop { from { opacity: 0; transform: translate(-50%, -47%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.tour-card--center .tour-title { font-size: 26px; margin-bottom: 10px; }
.tour-card--center .tour-btns { margin-top: 22px; }
.tour-avatar { width: 64px; height: 64px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 24px; letter-spacing: .02em; flex-shrink: 0; }
.tour-avatar--from { background: var(--tint); color: var(--text-3); width: 48px; height: 48px; font-size: 18px; }
.tour-avatar--done { background: var(--accent); font-family: var(--font-sans); font-size: 28px; margin-bottom: 12px; }
.tour-avatar--sm { width: 40px; height: 40px; font-size: 15px; }
.tour-avatar--muted { background: var(--tint); color: var(--text-3); }
.tour-avatar--alt { background: var(--accent); }
.tour-avatar--line { background: var(--surface); color: var(--text-2); border: 1px solid var(--rule); font-family: var(--font-sans); }
.tour-swap { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.tour-swap-arrow { color: var(--text-3); font-size: 20px; animation: tour-nudge-x 1.4s var(--ease) infinite; }
.tour-chip { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(15, 95, 87, .1); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.tour-recap { list-style: none; margin: 20px 0 0; padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; text-align: left; background: var(--page); border: 1px solid var(--rule); border-radius: 10px; }
.tour-recap li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.tour-recap-mark { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 11px; flex-shrink: 0; background: var(--accent); color: #fff; }

/* Owner: the questions screen — a grid of questions, in any order */
.tour-card--center.tour-hub, .tour-card--center.tour-brief { width: min(640px, calc(100vw - 32px)); text-align: left; padding: 28px 30px 24px; }
.tour-hub-top { display: flex; align-items: center; gap: 12px; margin: -8px -10px 10px -8px; }
.tour-hub-top .tour-hub-kicker { flex: 1; margin: 0; }
.tour-hub-top .tour-x { margin: 0; }
.tour-back { flex-shrink: 0; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.tour-back:hover { border-color: var(--accent); color: var(--accent); }
.tour-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tour-hub-kicker { margin: 0 0 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.tour-hub .tour-title, .tour-brief .tour-title { font-size: 28px; }
.tour-hub-grid { display: grid; gap: 8px; margin-top: 18px; }
.tour-q { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tour-q:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 10px 26px rgba(15, 95, 87, .12); transform: translateY(-1px); }
.tour-q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tour-q-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--text-2); font-family: var(--font-display); font-size: 16px; }
.tour-q-text { display: grid; gap: 2px; }
.tour-q-text b { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.tour-q-text span { font-size: 13.5px; color: var(--text-2); }
.tour-q-go { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.tour-q.is-done { background: var(--page); }
.tour-q.is-done .tour-q-mark { background: var(--accent); color: #fff; font-family: var(--font-sans); }
.tour-q:disabled { cursor: default; }
.tour-hub-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tour-hubback { position: fixed; left: 12px; bottom: 12px; z-index: 4; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(20, 23, 22, .14); }
.tour-hubback:hover { border-color: var(--accent); color: var(--accent); }

/* Manager: the briefing, and the checklist pinned while a problem is solved */
.tour-solved { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(15, 95, 87, .1); color: var(--accent); font-size: 13px; font-weight: 600; animation: tour-pop-in 400ms var(--ease); }
.tour-solved span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
@keyframes tour-pop-in { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.tour-mlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.tour-mlist li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 10px; font-size: 14px; background: var(--surface); }
.tour-mlist em { font-style: normal; font-size: 12px; color: var(--text-3); }
.tour-mlist-mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--rule); font-size: 11px; color: #fff; }
.tour-mlist .is-done { color: var(--text-3); background: var(--page); }
.tour-mlist .is-done span:nth-child(2) { text-decoration: line-through; text-decoration-color: rgba(20, 23, 22, .3); }
.tour-mlist .is-done .tour-mlist-mark { background: var(--accent); border-color: var(--accent); }
.tour-mlist .is-now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 600; }
.tour-mlist .is-now .tour-mlist-mark { border-color: var(--accent); }
/* Below the coach card: at 1024 the card can share the bottom-left corner, and the
   card's own copy of the action must stay clickable. */
.tour-checklist { position: fixed; left: 12px; bottom: 12px; z-index: 1; width: 290px; padding: 12px 12px 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 16px 40px rgba(20, 23, 22, .16); }
.tour-checklist--up { bottom: auto; top: 12px; }
.tour-checklist--compact { bottom: auto; top: 12px; }
.tour-checklist--wait { visibility: hidden; }
.tour-checklist-toggle { width: 100%; min-height: 24px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tour-checklist-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tour-checklist-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; font-size: 12.5px; }
.tour-checklist-head b { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 11.5px; color: var(--text-2); }
.tour-checklist-head span { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.tour-checklist-bar { height: 4px; border-radius: 2px; background: var(--tint); overflow: hidden; margin: 0 2px; }
.tour-checklist-bar i { display: block; height: 100%; background: var(--accent); transition: width 500ms var(--ease); }
.tour-checklist .tour-mlist { margin-top: 10px; gap: 4px; }
.tour-checklist .tour-mlist li { padding: 6px 8px; font-size: 13px; grid-template-columns: 20px 1fr; }
.tour-checklist .tour-mlist em { display: none; }

/* Launcher in the demo bar: visible at every width */
.tour-launch { gap: 7px; }
.demo-bar .tools > .tour-launch { display: inline-flex !important; }
.tour-launch-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Welcome: three ways in */
.tour-welcome { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 40px 40px 28px; border: 0; border-radius: 20px; background: var(--page); color: var(--text); box-shadow: 0 40px 100px rgba(20, 23, 22, .3); }
.tour-welcome::backdrop { background: rgba(241, 242, 239, .55); backdrop-filter: blur(4px) saturate(.75); -webkit-backdrop-filter: blur(4px) saturate(.75); }
.tour-welcome[open] { animation: tour-in 280ms var(--ease); }
.tour-w-head { margin-bottom: 28px; }
.tour-w-head > :not(.tour-w-top) { max-width: 640px; }
.tour-w-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; }
.tour-w-top .tour-w-kicker { margin: 0; }
.tour-w-kicker { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.tour-w-title { font-family: var(--font-display); font-size: 36px; line-height: 1.08; font-weight: 600; margin: 0 0 12px; letter-spacing: -.01em; }
.tour-w-lede { font-size: 15.5px; line-height: 1.55; color: var(--text-2); margin: 0; }
.tour-w-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.tour-w-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tour-w-card:hover { border-color: var(--ink2); box-shadow: 0 12px 32px rgba(20, 23, 22, .08); transform: translateY(-1px); }
.tour-w-card--main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 36px rgba(15, 95, 87, .12); }
.tour-w-who { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tour-w-badge { padding: 3px 9px; border-radius: 999px; background: rgba(15, 95, 87, .1); color: var(--accent); font-size: 11.5px; font-weight: 600; letter-spacing: .03em; }
.tour-w-card h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; }
.tour-w-card p { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0; flex: 1; }
.tour-w-meta { font-size: 12.5px; color: var(--text-3); }
.tour-w-card.is-soon { background: transparent; }
.tour-w-card.is-soon:hover { transform: none; box-shadow: none; border-color: var(--rule); }
.tour-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.tour-w-note { margin: 0; font-size: 12.5px; color: var(--text-3); }
.tour-w-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.tour-w-trio { display: inline-flex; }
.tour-w-trio { gap: 3px; }
.tour-avatar--xs { width: 30px; height: 30px; font-size: 11.5px; }
.tour-w-card .tour-w-who .tour-w-meta { font-size: 12px; text-align: right; }

@media (max-width: 760px) {
  .tour-welcome { padding: 24px 18px 18px; }
  .tour-card--center.tour-hub, .tour-card--center.tour-brief { padding: 24px 18px 18px; }
  .tour-hub-foot, .tour-w-foot { flex-wrap: wrap; }
  .tour-w-title { font-size: 27px; }
  .tour-w-grid { grid-template-columns: 1fr; }
  .tour-card:not(.tour-card--center) { left: 12px !important; right: 12px; width: auto; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour *, .tour *::before, .tour *::after, .tour-welcome { animation: none !important; transition: none !important; }
  .tour-ripple::before { opacity: .6; inset: -6px; }
}
@media print { .tour, .tour-welcome { display: none !important; } }