/* Cura Core · components.css
   Shared component library for the "Bound Manual" design (October 2026).
   Buttons, badges, cards, grids, stat tiles, progress, forms, switch, chips, tabs,
   segmented control, tables, lists, status pills, empty states, skeletons, notices,
   dialogs, toasts. Every token comes from tokens.css; every class name the views
   emit is kept. Plex Sans carries everything here except the serif card, dialog,
   empty-state and stat-value titles. */

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: .005em;
  color: var(--ink); background: transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn:active:not(:disabled) { filter: brightness(.94); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; filter: none; }
.btn .i { width: 16px; height: 16px; }

.btn-primary { background: var(--accent); color: #fff; border-color: transparent; box-shadow: none; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-teal { background: var(--teal-ink); color: #fff; }
.btn-teal:hover { background: var(--teal-hover); color: #fff; }
.btn-secondary { background: var(--surface); border-color: var(--line-2); color: var(--ink); box-shadow: none; }
.btn-secondary:hover { border-color: var(--field); background: var(--surface-2); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: rgba(28, 26, 23, .05); color: var(--ink); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: var(--red-hover); color: #fff; }
.btn-danger-soft { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.btn-danger-soft:hover { background: #F6DBD5; color: var(--red); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-hover); color: #fff; }
/* on-dark styles: used only on cover surfaces (hero bands, website hero, CTA band, cover aside) */
.btn-white { background: #fff; color: var(--cover); box-shadow: none; }
.btn-white:hover { background: var(--cover-cream); color: var(--cover); }
.btn-glass { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-glass:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.btn-sm { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 5px; gap: 6px; }
.btn-sm .i { width: 15px; height: 15px; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 15.5px; border-radius: var(--radius-sm); gap: 10px; }
.btn-lg .i { width: 18px; height: 18px; }
.btn-block { width: 100%; }

/* busy state: the label goes transparent and a spinning arc takes its place */
.btn.busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.busy::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: rgba(255,255,255,.9) rgba(255,255,255,.9) transparent transparent; animation: spin .7s linear infinite;
}
.btn-secondary.busy::after, .btn-ghost.busy::after, .btn-white.busy::after { border-color: var(--blue) var(--blue) transparent transparent; }

.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.icon-btn:hover { background: rgba(28, 26, 23, .06); color: var(--ink); text-decoration: none; }
.icon-btn:disabled { opacity: .4; cursor: default; background: transparent; }
.icon-btn .i { width: 18px; height: 18px; }
.solo .icon-btn, .topbar .icon-btn { width: 40px; height: 40px; }
/* the find bar's icon buttons are sized in reader.css (36px; 40px inside .solo; 44px at <=640), which owns the find bar */

.btn-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.link-btn { background: none; border: 0; padding: 0; color: var(--blue); font-family: var(--font-sans); font-weight: 600; cursor: pointer; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--blue-hover); }

/* ---------------- tags (badges) and refs ----------------
   A .badge is a 4px tag (a label); a .status is a 999px pill (a state). The
   shape difference is deliberate. */

.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-xs);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); vertical-align: middle;
}
.badge .i { width: 12px; height: 12px; }
.badge-blue { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-line); }
.badge-teal { background: var(--teal-soft); color: var(--teal-ink); border-color: var(--teal-line); }
.badge-gold { background: var(--gold-soft); color: var(--gold-ink); border-color: var(--gold-line); }
.badge-red { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.badge-amber { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-line); }
.badge-navy { background: var(--cover); color: var(--cover-cream); border-color: var(--cover); }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ref { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; background: none; }

/* ---------------- cards, grids, layout helpers ---------------- */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 22px 24px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.card-head > div:first-child { min-width: 0; }
.card-head h2 { font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.card-head .sub { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.45; }
.card-head.flat { border-bottom: 0; padding-bottom: 4px; }
.card-body { padding: 18px 22px; }
.card + .card, .card + .grid, .grid + .card, .grid + .grid { margin-top: 18px; }
.grid { display: grid; gap: 18px; }
.grid > .card + .card { margin-top: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.stack > * + * { margin-top: 18px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap-gap { display: flex; flex-wrap: wrap; gap: 8px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 12px; }
.section-title h2 { font-family: var(--font-serif); font-weight: 500; font-size: 20px; line-height: 1.25; }

/* ---------------- stat tiles: the annual-report figure ----------------
   A 2px editorial rule across the top, a small-caps label, the figure in the serif. */

.stat { position: relative; overflow: hidden; padding: 18px 20px 20px; border-radius: var(--radius-xs); border-top: 2px solid var(--rule-2); }
.stat .label {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; line-height: 1.2;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.stat .label .i { width: 15px; height: 15px; }
.stat .value {
  margin-top: 10px; font-family: var(--font-serif); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat .value small { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 5px; }
.stat .hint { color: var(--ink-3); font-size: 13px; line-height: 1.45; margin-top: 6px; }
.stat .spark { margin-top: 10px; height: 34px; }
.stat .spark svg { height: 34px; }
.stat .delta { margin-top: 8px; }
.stat-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.stat-link:hover { color: inherit; text-decoration: none; border-color: var(--line-2); border-top-color: var(--rule-2); box-shadow: var(--shadow-sm); }

.ico-chip { width: 30px; height: 30px; border-radius: var(--radius-sm); display: inline-grid; place-items: center; background: var(--blue-soft); color: var(--blue); flex: none; }
.ico-chip .i { width: 16px; height: 16px; }
.ico-chip.teal { background: var(--teal-soft); color: var(--teal-ink); }
.ico-chip.gold { background: var(--gold-soft); color: var(--gold); }
.ico-chip.navy { background: var(--cover); color: var(--mint); }
.ico-chip.red { background: var(--red-soft); color: var(--red); }
.ico-chip.amber { background: var(--amber-soft); color: var(--amber-ink); }
.stat .ico-chip { width: 26px; height: 26px; border-radius: 5px; }
.stat .ico-chip .i { width: 15px; height: 15px; }

.delta {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.delta.up { color: var(--teal-ink); background: var(--teal-soft); }
.delta.down { color: var(--amber-ink); background: var(--amber-soft); }
.delta.flat { color: var(--ink-3); background: var(--surface-3); }

/* ---------------- progress ----------------
   One meter shape across the product: 2px corners like .hbar .track and .status-strip
   (charts.css). The track is --surface-2 with a hairline ring rather than --surface-3,
   so the --teal fill reads against the empty part at 3.15:1 (surface-3 was 2.83:1)
   and the empty track still shows on a white card. */

.bar { height: 6px; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--teal); transition: width .4s var(--ease); }
.bar-sm { height: 4px; border-radius: 2px; }
.bar-blue > span { background: var(--c1); }

/* ---------------- forms ---------------- */

.field { display: block; }
.field + .field { margin-top: 14px; }
.field > span.lbl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; line-height: 1.3; color: var(--ink);
}
.field .hint { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); margin-top: 5px; font-style: normal; }
.field .used { font-size: 12px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.field:has(.input.missing) .hint { color: var(--amber-ink); }

.input, select.input, textarea.input {
  display: block; width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--field); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover { border-color: var(--ink-3); }
.input.missing { border-color: var(--amber); background: var(--amber-wash); box-shadow: inset 0 0 0 1px var(--amber); }
.input:focus { outline: none; border-color: var(--blue-bright); box-shadow: var(--focus-ring); }
.input:disabled { opacity: .55; background: var(--surface-2); cursor: not-allowed; }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.6; }
select.input { padding-right: 36px; cursor: pointer; }
.input-icon { position: relative; display: block; }
.input-icon > .i { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.input-icon .input { padding-left: 40px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.form-grid .field + .field { margin-top: 0; }
.form-grid .wide { grid-column: 1 / -1; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14.5px; line-height: 1.45; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }

/* switch (markup: label.switch > input + span.track > span.thumb, + span.switch-label) */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.switch .track { position: relative; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--field); flex: none; transition: background var(--dur-2) var(--ease); }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(28, 26, 23, .3); transition: transform var(--dur-2) var(--ease); }
.switch input:checked + .track { background: var(--teal-ink); }
.switch input:checked + .track .thumb { transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch:hover .track { filter: brightness(.96); }
.switch.disabled { cursor: not-allowed; opacity: .5; }
.switch.disabled:hover .track { filter: none; }
.switch-label { font-family: var(--font-sans); font-weight: 600; font-size: 14px; }

/* ---------------- chips (filters): 4px tags, ink when selected, never the accent ---------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-xs); border: 1px solid var(--line-2);
  background: var(--surface); font-family: var(--font-sans); font-weight: 500; font-size: 13px; line-height: 1; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip .i { width: 14px; height: 14px; }
.chip:hover { border-color: var(--field); color: var(--ink); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip .n { font-weight: 500; opacity: .65; font-variant-numeric: tabular-nums; }

/* ---------------- tabs: a ruled rail with a white page tab ---------------- */

.tabs {
  display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 3px; margin: 0 0 22px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--radius-sm);
  background: none; font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; line-height: 1; color: var(--ink-2); cursor: pointer; white-space: nowrap; flex: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab:focus-visible { outline-offset: -2px; }
/* the page tab's ring is --field (3.1:1 on the rail) so the selected tab survives a washed-out projector; --line-2 was 1.46:1 */
.tab.on, .tab[aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--field), var(--shadow-sm); }
.tab .count { font: 600 11.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; min-width: 18px; padding: 3px 6px; border-radius: var(--radius-xs); background: rgba(28, 26, 23, .06); color: var(--ink-3); border: 0; text-align: center; }
.tab.on .count, .tab[aria-selected="true"] .count { background: var(--accent-soft); color: var(--accent-ink); }

/* ---------------- segmented control (smaller and borderless, so it reads differently from the tabs) ---------------- */

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-sm); background: var(--surface-3); vertical-align: middle; }
.seg button {
  border: 0; background: transparent; min-height: 30px; padding: 6px 12px; border-radius: var(--radius-xs);
  font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button:focus-visible { outline-offset: -2px; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--field); }

/* ---------------- tables and lists: ruled rows, a heavy header rule, no vertical rules ---------------- */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; padding: 10px 14px; background: transparent; border-bottom: 1.5px solid var(--rule-2); white-space: nowrap;
  font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table .t-name { font-weight: 600; color: var(--ink); }
.table .t-sub { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.table .num { text-align: right; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: 14px; padding: 13px 22px; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; }
.list-title { font-weight: 600; color: var(--ink); }
.list .grow { flex: 1; min-width: 0; }

/* ---------------- status pills (always icon + words, never colour alone) ---------------- */

.status {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.status .i { width: 14px; height: 14px; }
.status.complete { color: var(--teal-ink); background: var(--teal-soft); }
.status.progress { color: var(--blue-ink); background: var(--blue-soft); }
.status.resign { color: var(--amber-ink); background: var(--amber-soft); }
.status.new { color: var(--ink-2); background: var(--surface-3); }

/* ---------------- empty states and loading ---------------- */

.empty { text-align: center; padding: 48px 24px; max-width: 520px; margin: 0 auto; }
.empty-icon { width: 52px; height: 52px; border-radius: var(--radius-pill); display: grid; place-items: center; margin: 0 auto 16px; background: var(--surface-3); color: var(--ink-2); }
.empty-icon .i { width: 24px; height: 24px; }
.empty h2 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.empty p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.empty .btn { margin-top: 8px; }
.loading { padding: 8px 0; }
.sk { height: 14px; border-radius: var(--radius-xs); margin: 14px 0; background: linear-gradient(90deg, #E9E4DA 25%, #F3EFE7 37%, #E9E4DA 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }
.sk-title { height: 30px; width: 40%; margin-bottom: 26px; }
.sk.short { width: 60%; }

/* ---------------- notices: a tinted slab with a 3px rule in the semantic ink ---------------- */

.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--line-2);
  color: var(--ink-2); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.5;
}
.notice > .i { width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); flex: none; }
.notice > div, .notice > p { flex: 1 1 0; min-width: 0; max-width: var(--measure); }
.notice > .btn, .notice > .btn-group { margin-left: auto; flex: none; align-self: center; }
.notice strong { color: var(--ink); font-weight: 600; }
.notice p:last-child { margin-bottom: 0; }
.notice .grow { flex: 1; }
.notice a:not(.btn) { color: var(--blue); }
.notice-amber { background: var(--amber-soft); border-color: var(--amber-line); box-shadow: inset 3px 0 0 var(--amber-ink); }
.notice-amber > .i { color: var(--amber-ink); }
.notice-blue { background: var(--blue-soft); border-color: var(--blue-line); box-shadow: inset 3px 0 0 var(--blue); }
.notice-blue > .i { color: var(--blue); }
.notice-red { background: var(--red-soft); border-color: var(--red-line); box-shadow: inset 3px 0 0 var(--red); }
.notice-red > .i { color: var(--red); }
.notice-teal { background: var(--teal-soft); border-color: var(--teal-line); box-shadow: inset 3px 0 0 var(--teal-ink); }
.notice-teal > .i { color: var(--teal-ink); }
.notice-gold { background: var(--gold-soft); border-color: var(--gold-line); box-shadow: inset 3px 0 0 var(--gold); }
.notice-gold > .i { color: var(--gold); }

/* ---------------- dialogs and toasts ---------------- */

.modal-wrap { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: var(--scrim); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.modal-wrap.in { opacity: 1; }
.modal {
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transform: translateY(6px) scale(.99); transition: transform 180ms var(--ease);
}
.modal-wrap.in .modal { transform: none; }
.modal-wide { max-width: 760px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 0; }
.modal-head h2 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.2; padding-top: 4px; }
.modal-head .icon-btn { margin: -4px -6px 0 0; }
.modal-body { padding: 16px 24px; overflow-y: auto; font-size: 15px; line-height: 1.55; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lead-sm { color: var(--ink-2); font-size: 15px; }

.toasts { position: fixed; z-index: 200; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 440px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--cover); color: var(--cover-cream); font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.4;
  box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); pointer-events: auto;
}
.toast.in { opacity: 1; transform: none; }
.toast .i { color: var(--mint); flex: none; }
.toast-error { background: var(--red-deep); }
.toast-error .i { color: #FFC9C2; }
.toast-info .i { color: #A9D2F0; }

/* ---------------- responsive and print rules for this area (moved here from legacy-responsive.css) ---------------- */

@media (max-width: 1180px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-wide { grid-template-columns: 1fr; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none !important; }
}
@media (max-width: 640px) {
  /* A wide table (four or more columns: client health, the team, the customer list, the chart
     tables) keeps its columns and scrolls inside .table-wrap instead of crushing the name
     column to three lines. A narrow one (the inspector's three-column sign-off) still fits. */
  .table-wrap > .table:has(th:nth-child(4)) { min-width: 640px; }
  .table-wrap > .table:has(th:nth-child(4)) :is(.t-name, .t-sub) { white-space: nowrap; }
}
@media (max-width: 560px) {
  .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; }
  .card-pad { padding: 18px 16px; }
  /* actions drop under the title so the sub line runs the full width; a short tag or count stays beside it */
  .card-head { flex-wrap: wrap; }
  .card-head > div:first-child { flex: 1 1 200px; }
  .card-head > .btn-group { flex: 0 0 100%; justify-content: flex-start; }
  .card-head, .card-body { padding-left: 16px; padding-right: 16px; }
  .list > li { padding: 12px 16px; gap: 12px; }
  .table th, .table td { padding-left: 10px; padding-right: 10px; }
  .stat { padding: 16px 16px 18px; }
  /* 170px tiles: the label keeps its 11.5px floor but loses some tracking, gap and chip so it fits on one line more often; when it must wrap, both lines are even */
  .stat .label { letter-spacing: .06em; gap: 6px; text-wrap: balance; }
  .stat .label .ico-chip { width: 24px; height: 24px; }
  .stat .value { font-size: 30px; }
  /* the rail becomes a row of outlined tags so five tabs wrap over two rows */
  .tabs { width: auto; background: none; border: 0; padding: 0; flex-wrap: wrap; gap: 6px; overflow: visible; border-radius: 0; }
  .tab { border: 1px solid var(--line-2); background: #fff; border-radius: var(--radius-xs); font-size: 14px; }
  .tab.on, .tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
  .tab.on .count, .tab[aria-selected="true"] .count { background: rgba(255, 255, 255, .16); color: #fff; }
  .notice { padding: 12px 14px; }
  .notice > .btn, .notice > .btn-group { margin-left: 0; width: 100%; justify-content: flex-start; }
  .notice { flex-wrap: wrap; }
  .modal-wrap { padding: 12px; }
  .modal { max-height: calc(100vh - 24px); }
  .modal-head { padding: 20px 18px 0; }
  .modal-body { padding: 14px 18px; }
  .modal-foot { padding: 12px 18px 16px; }
  .toasts { top: 14px; bottom: auto; left: 14px; right: 14px; align-items: stretch; }
  .toast { max-width: none; }
}
/* touch screens: every control is at least 44px tall */
@media (pointer: coarse) {
  .btn, .chip, .icon-btn, .tab, .menu-item, .nav a { min-height: var(--tap); }
  .icon-btn { min-width: var(--tap); }
  .seg button { min-height: 38px; }
  /* the switch still looks 40x24; its label box is 44px tall and the track's hit area grows to match */
  .switch { min-height: var(--tap); }
  .switch .track::before { content: ''; position: absolute; inset: -10px -6px; }
}

/* ======================================================================
   Bento layer (October 2026): the website's raised-plate look inside the signed-in portal
   ======================================================================
   Scope: every portal root under #app that is not the website (.shell, .solo, .signin, .stage-shell,
   .paused) plus dialogs on <body>. :where() keeps the scope at zero specificity, so these rules sit
   exactly at the weight of the base rules above and win by order only; the website (.site) keeps its
   own site.css. Plates and the raised buttons use the --plate / --btn-* tokens in tokens.css.
     .lift (and a.card): lifts straight up 6px with a 1.2% scale and a soft top-down light on hover and
     keyboard focus; never tilts. Touch screens get a small press; reduced motion keeps the shadow and
     drops the movement (tokens.css). Tables, rows and charts stay put. */

/* ---------------- plates ---------------- */

:where(#app > :not(.site), .modal-wrap) .card {
  border: 0; border-radius: var(--r-plate); box-shadow: var(--sh, var(--plate)); overflow: clip;
}
:where(#app > :not(.site), .modal-wrap) .card-head { padding: 20px 26px; }
:where(#app > :not(.site), .modal-wrap) .card-head.flat { padding-bottom: 4px; }
:where(#app > :not(.site), .modal-wrap) .card-body { padding: 20px 26px 22px; }
:where(#app > :not(.site), .modal-wrap) .card-pad { padding: 26px 28px; }
:where(#app > :not(.site), .modal-wrap) .card + .card,
:where(#app > :not(.site), .modal-wrap) .card + .grid,
:where(#app > :not(.site), .modal-wrap) .grid + .card,
:where(#app > :not(.site), .modal-wrap) .grid + .grid { margin-top: 22px; }
:where(#app > :not(.site), .modal-wrap) .grid { gap: 22px; }
:where(#app > :not(.site), .modal-wrap) .grid > .card + .card { margin-top: 0; }
:where(#app > :not(.site), .modal-wrap) .split { gap: 26px; }
:where(#app > :not(.site), .modal-wrap) .stack > * + * { margin-top: 22px; }
:where(#app > :not(.site), .modal-wrap) .section-title { margin: 36px 0 14px; }

/* the lift: a plate that is a link or a choice */
:where(#app > :not(.site), .modal-wrap) :is(a.card, .lift) {
  position: relative; transform: translateY(0) scale(1);
  transition: transform .35s var(--ease-plate), box-shadow .35s var(--ease-plate), border-color var(--dur-1) var(--ease);
}
:where(#app > :not(.site), .modal-wrap) :is(a.card, .lift)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .35s ease;
}
@media (hover: hover) {
  :where(#app > :not(.site), .modal-wrap) :is(a.card, .lift):hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--sh-hi, var(--plate-hi)); }
  :where(#app > :not(.site), .modal-wrap) :is(a.card, .lift):hover::after { opacity: 1; }
}
:where(#app > :not(.site), .modal-wrap) :is(a.card, .lift):is(:focus-visible, :has(:focus-visible)) { transform: translateY(-6px) scale(1.012); box-shadow: var(--sh-hi, var(--plate-hi)); }
:where(#app > :not(.site), .modal-wrap) :is(a.card, .lift):focus-visible { outline-offset: 4px; }
:where(#app > :not(.site), .modal-wrap) :is(a.card, .lift):is(:focus-visible, :has(:focus-visible))::after { opacity: 1; }
@media (hover: none) {
  :where(#app > :not(.site), .modal-wrap) :is(a.card, .lift) { -webkit-tap-highlight-color: transparent; }
  :where(#app > :not(.site), .modal-wrap) :is(a.card, .lift):active { transform: translateY(-3px) scale(1.006); box-shadow: var(--sh-hi, var(--plate-hi)); transition-duration: .15s; }
  :where(#app > :not(.site), .modal-wrap) :is(a.card, .lift):active::after { opacity: 1; }
}

/* ---------------- buttons: raised, fully rounded, press down on click ---------------- */

:where(#app > :not(.site), .modal-wrap) .btn {
  border: 0; border-radius: 999px; min-height: 42px; padding: 0 18px; position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
:where(#app > :not(.site), .modal-wrap) .btn .i { transition: transform .2s ease; }
:where(#app > :not(.site), .modal-wrap) .btn:active:not(:disabled) { transform: translateY(2px) scale(.98); filter: none; }
:where(#app > :not(.site), .modal-wrap) .btn-sm { min-height: 34px; padding: 0 14px; border-radius: 999px; }
:where(#app > :not(.site), .modal-wrap) .btn-lg { min-height: 50px; padding: 0 24px; border-radius: 999px; }

:where(#app > :not(.site), .modal-wrap) :is(.btn-primary, .btn-primary:hover) {
  color: #fff; background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bot) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset, 0 6px 14px -5px var(--btn-glow), 0 2px 0 var(--btn-edge);
}
:where(#app > :not(.site), .modal-wrap) :is(.btn-teal, .btn-teal:hover) {
  color: #fff; background: linear-gradient(180deg, #0E7F70 0%, var(--teal-ink) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 -2px 0 rgba(0, 0, 0, .16) inset, 0 6px 14px -5px rgba(11, 107, 94, .45), 0 2px 0 #08554B;
}
/* gold stays for Premium only */
:where(#app > :not(.site), .modal-wrap) :is(.btn-gold, .btn-gold:hover) {
  color: #fff; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-hover) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 -2px 0 rgba(0, 0, 0, .16) inset, 0 6px 14px -5px rgba(154, 102, 16, .45), 0 2px 0 #5E3E08;
}
:where(#app > :not(.site), .modal-wrap) :is(.btn-danger, .btn-danger:hover) {
  color: #fff; background: linear-gradient(180deg, var(--red) 0%, var(--red-hover) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 -2px 0 rgba(0, 0, 0, .16) inset, 0 6px 14px -5px rgba(180, 35, 24, .4), 0 2px 0 var(--red-deep);
}
:where(#app > :not(.site), .modal-wrap) :is(.btn-secondary, .btn-secondary:hover) {
  color: var(--ink); background: linear-gradient(180deg, #fff, #FBFAF7);
  box-shadow: 0 0 0 1px var(--line-2) inset, 0 4px 10px -6px rgba(22, 34, 44, .2), 0 2px 0 var(--line);
}
:where(#app > :not(.site), .modal-wrap) .btn-ghost { box-shadow: none; }
:where(#app > :not(.site), .modal-wrap) .btn-ghost:hover { background: rgba(28, 26, 23, .06); }
:where(#app > :not(.site), .modal-wrap) :is(.btn-danger-soft, .btn-danger-soft:hover) { box-shadow: 0 0 0 1px var(--red-line) inset, 0 2px 0 var(--red-line); }
:where(#app > :not(.site), .modal-wrap) .btn-danger-soft:hover { background: #F6DBD5; }
:where(#app > :not(.site), .modal-wrap) :is(.btn-white, .btn-white:hover) {
  color: var(--navy); background: linear-gradient(180deg, #fff, #ECE7DC);
  box-shadow: 0 1px 0 #fff inset, 0 6px 16px -6px rgba(0, 0, 0, .45), 0 2px 0 #C9C1B1;
}
:where(#app > :not(.site), .modal-wrap) :is(.btn-glass, .btn-glass:hover) {
  color: #fff; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24) inset, 0 8px 20px -10px rgba(0, 0, 0, .6);
}
:where(#app > :not(.site), .modal-wrap) .btn-glass:hover { background: rgba(255, 255, 255, .14); }
@media (hover: hover) {
  :where(#app > :not(.site), .modal-wrap) .btn:hover > .i:last-child:not(:first-child) { transform: translateX(3px); }
  :where(#app > :not(.site), .modal-wrap) .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset, 0 12px 20px -6px var(--btn-glow), 0 3px 0 var(--btn-edge); }
  :where(#app > :not(.site), .modal-wrap) :is(.btn-teal, .btn-gold, .btn-danger, .btn-white, .btn-glass):hover:not(:disabled) { transform: translateY(-1px); }
  :where(#app > :not(.site), .modal-wrap) .btn-secondary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--field) inset, 0 10px 18px -8px rgba(22, 34, 44, .25), 0 3px 0 var(--line); }
}
:where(#app > :not(.site), .modal-wrap) :is(.btn:disabled, .btn[aria-disabled="true"]) { transform: none; }
:where(#app > :not(.site), .modal-wrap) :is(.btn-secondary, .btn-ghost, .btn-white, .btn-danger-soft).busy::after { border-color: var(--blue) var(--blue) transparent transparent; }

:where(#app > :not(.site), .modal-wrap) .icon-btn { border-radius: 999px; }

/* ---------------- tags, cube icons, figures ---------------- */

:where(#app > :not(.site), .modal-wrap) .badge { border-radius: 999px; padding: 0 9px; }

/* the gradient "cube": an icon tile lit from the top with a darker bottom edge (the website's .w-ico) */
:where(#app > :not(.site), .modal-wrap) .ico-chip {
  --c1: #2A80B8; --c2: #134B70; --cs: rgba(19, 75, 112, .55);
  border-radius: 10px; color: #fff; background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset, 0 6px 12px -6px var(--cs);
}
:where(#app > :not(.site), .modal-wrap) .ico-chip.teal { --c1: #2BB39F; --c2: #0B6B5E; --cs: rgba(11, 107, 94, .5); background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; }
:where(#app > :not(.site), .modal-wrap) .ico-chip.navy { --c1: #34495A; --c2: #16222C; --cs: rgba(22, 34, 44, .55); background: linear-gradient(145deg, var(--c1), var(--c2)); color: var(--mint); }
:where(#app > :not(.site), .modal-wrap) .ico-chip.gold { --c1: #B8730F; --c2: #7F540C; --cs: rgba(154, 102, 16, .45); background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; }
:where(#app > :not(.site), .modal-wrap) .ico-chip.red { --c1: #D2483B; --c2: #8F1C13; --cs: rgba(180, 35, 24, .4); background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; }
:where(#app > :not(.site), .modal-wrap) .ico-chip.amber { --c1: #D08A1E; --c2: #8A4B00; --cs: rgba(138, 75, 0, .4); background: linear-gradient(145deg, var(--c1), var(--c2)); color: #fff; }
:where(#app > :not(.site), .modal-wrap) .stat .ico-chip { width: 30px; height: 30px; border-radius: 9px; }

/* stat tiles: a plate with a cube and the serif figure, no printed rule */
:where(#app > :not(.site), .modal-wrap) .stat { border-top: 0; border-radius: var(--r-plate); padding: 22px 24px 24px; }
:where(#app > :not(.site), .modal-wrap) .stat .value { margin-top: 14px; }
:where(#app > :not(.site), .modal-wrap) .stat-link:hover { border-color: transparent; }

:where(#app > :not(.site), .modal-wrap) .bar { height: 7px; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(22, 34, 44, .1), inset 0 0 0 1px var(--line); }
:where(#app > :not(.site), .modal-wrap) .bar-sm { height: 5px; }

/* ---------------- forms ---------------- */

:where(#app > :not(.site), .modal-wrap) :is(.input, select.input) { border-radius: var(--r-plate-sm); }
:where(#app > :not(.site), .modal-wrap) textarea.input { border-radius: 14px; }
:where(#app > :not(.site), .modal-wrap) .switch .track { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
:where(#app > :not(.site), .modal-wrap) .switch .thumb { box-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(22, 34, 44, .35); }

/* ---------------- chips, tabs, segmented: pill rails; the active tab is a raised navy pill ---------------- */

:where(#app > :not(.site), .modal-wrap) .chip { border-radius: 999px; padding: 0 14px; height: 34px; border-color: transparent; box-shadow: 0 0 0 1px var(--line-2) inset, 0 2px 0 var(--line); }
:where(#app > :not(.site), .modal-wrap) .chip:hover { box-shadow: 0 0 0 1px var(--field) inset, 0 2px 0 var(--line); }
:where(#app > :not(.site), .modal-wrap) .chip.on {
  color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); border-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 12px -4px rgba(22, 34, 44, .45);
}

:where(#app > :not(.site), .modal-wrap) .tabs {
  gap: 4px; padding: 4px; margin: 0 0 26px; border: 0; border-radius: 999px;
  background: #EDE8DD; box-shadow: 0 1px 2px rgba(22, 34, 44, .08) inset;
}
:where(#app > :not(.site), .modal-wrap) .tab { border-radius: 999px; padding: 0 16px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
:where(#app > :not(.site), .modal-wrap) .tab:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
:where(#app > :not(.site), .modal-wrap) :is(.tab.on, .tab[aria-selected="true"]) {
  color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 12px -4px rgba(22, 34, 44, .5);
}
:where(#app > :not(.site), .modal-wrap) .tab .count { border-radius: 999px; }
:where(#app > :not(.site), .modal-wrap) :is(.tab.on, .tab[aria-selected="true"]) .count { background: rgba(255, 255, 255, .16); color: #fff; }

:where(#app > :not(.site), .modal-wrap) .seg { border-radius: 999px; padding: 4px; background: #EDE8DD; box-shadow: 0 1px 2px rgba(22, 34, 44, .08) inset; }
:where(#app > :not(.site), .modal-wrap) .seg button { border-radius: 999px; padding: 6px 14px; }
:where(#app > :not(.site), .modal-wrap) .seg button.on { box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(22, 34, 44, .1), 0 4px 10px -4px rgba(22, 34, 44, .3); }

/* ---------------- notices, empty states, dialogs, toasts ---------------- */

:where(#app > :not(.site), .modal-wrap) .notice { border-radius: var(--r-plate-md); padding: 16px 18px; }
:where(#app > :not(.site), .modal-wrap) .empty-icon {
  width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(180deg, #fff, var(--surface-3));
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(22, 34, 44, .06), 0 10px 18px -10px rgba(22, 34, 44, .35);
}

.modal { border-radius: var(--r-plate-xl); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 70px -20px rgba(22, 34, 44, .45), 0 10px 24px -12px rgba(22, 34, 44, .25); overflow: clip; }
.modal-head { padding: 26px 28px 0; }
.modal-body { padding: 18px 28px; }
.modal-foot { padding: 16px 28px 22px; }
.modal-wrap { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.toast { border-radius: 16px; padding: 13px 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 20px 40px -14px rgba(0, 0, 0, .5); }

/* ---------------- phones ---------------- */

@media (max-width: 560px) {
  :where(#app > :not(.site), .modal-wrap) :is(.card-head, .card-body) { padding-left: 18px; padding-right: 18px; }
  :where(#app > :not(.site), .modal-wrap) .card-pad { padding: 20px 18px; }
  :where(#app > :not(.site), .modal-wrap) .card { border-radius: 20px; }
  :where(#app > :not(.site), .modal-wrap) .grid { gap: 14px; }
  :where(#app > :not(.site), .modal-wrap) .stat { padding: 18px 16px 20px; }
  /* five tabs wrap over two rows as pills; the chosen one is still the raised navy pill */
  :where(#app > :not(.site), .modal-wrap) .tabs { background: none; box-shadow: none; padding: 0; border-radius: 0; gap: 8px; }
  :where(#app > :not(.site), .modal-wrap) .tab:not(.on):not([aria-selected="true"]) { background: #fff; border: 0; box-shadow: 0 0 0 1px var(--line-2) inset, 0 2px 0 var(--line); }
  :where(#app > :not(.site), .modal-wrap) :is(.tab.on, .tab[aria-selected="true"]) { border: 0; }
  :where(#app > :not(.site), .modal-wrap) .notice { padding: 14px 16px; }
  .modal { border-radius: 22px; }
  .modal-head { padding: 22px 20px 0; }
  .modal-body { padding: 14px 20px; }
  .modal-foot { padding: 12px 20px 18px; }
}
/* paper: no shadows, no lift, a plain rule round each card */
@media print {
  :where(#app > :not(.site)) :is(.card, .stat, .btn) { box-shadow: none !important; transform: none !important; }
  :where(#app > :not(.site)) .card { border: 1px solid #ccc; overflow: visible; }
  :where(#app > :not(.site)) :is(a.card, .lift)::after { display: none !important; }
}