/* =====================================================================================================
   Design system layer — the company program (app/) and the group portal (group/) load it AFTER app.css.
   1. binds the shared tokens (css/tokens.css, names --ds-*) to this program's live colours, so a client's own
      brand colours (Developer settings → Look & feel) reach every --ds-* user too;
   2. shared decorated pieces new pages use: .gk-hero, .gk-ic, .gk-sec, .gk-card, .gk-kpi, .gk-chip, .skel…;
   3. "no jumping": a stable scrollbar gutter, tabular numbers, reserved space for figures that load later,
      logos that never stretch, smooth page changes (View Transitions, else a cross-fade);
   4. the memory bars (js/memory.js): "Welcome back — continue where you stopped" and "Restore draft?".
   Guide: app/DEVELOPING.md → "Design system". Keep colours as tokens: no new hard-coded colours here.
   ===================================================================================================== */

/* ---------- 1. the program's live colours → the shared token names (on body, so the group portal's body.grp counts) ---------- */
body {
  --ds-bg: var(--bg); --ds-surface: var(--card); --ds-surface-2: var(--soft); --ds-ink: var(--ink); --ds-muted: var(--muted); --ds-line: var(--line);
  --ds-primary: var(--accent); --ds-primary-ink: var(--accent-ink); --ds-primary-soft: var(--accent-soft);
  --ds-accent: var(--accent2, var(--gold, var(--warn))); --ds-top: var(--top); --ds-top-ink: var(--top-ink);
  --ds-success: var(--ok); --ds-warn: var(--warn); --ds-danger: var(--bad); --ds-info: var(--info);
  --ds-success-soft: var(--accent-soft); --ds-warn-soft: var(--warn-soft); --ds-danger-soft: var(--bad-soft);
  --ds-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --ds-hero: linear-gradient(135deg, var(--top), color-mix(in srgb, var(--top) 55%, var(--accent)));
  font-family: var(--ds-font);
}

/* ---------- 2. shared pieces ---------- */
/* focus: one ring everywhere, keyboard only */
:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.btn:focus-visible, .tile:focus-visible, .tab:focus-visible, .chip:focus-visible, .seg button:focus-visible, .np-k:focus-visible { box-shadow: var(--ds-focus); }

/* hero band (a page's headline figures) */
.gk-hero { position: relative; overflow: hidden; border-radius: var(--ds-r-xl); padding: var(--ds-s-5); color: var(--ds-top-ink); background: var(--ds-hero); box-shadow: var(--ds-e-2), inset 0 1px 0 rgb(255 255 255 / .12); }
.gk-hero::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; height: 140%; background: radial-gradient(closest-side, rgb(255 255 255 / .14), transparent); pointer-events: none; }
.gk-hero > * { position: relative; z-index: 1; }
.gk-hero small { opacity: .8; font-size: var(--ds-fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.gk-hero b, .gk-hero .big { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: var(--ds-fw-heavy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: block; }

/* icon chip: an emoji / icon on a soft tint of its colour (--c, default the primary) */
.gk-ic { display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; flex-shrink: 0; border-radius: var(--ds-r-md); font-size: 1.1rem; line-height: 1;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c, var(--ds-primary)) 12%, var(--ds-surface)), color-mix(in srgb, var(--c, var(--ds-primary)) 26%, var(--ds-surface)));
  box-shadow: inset 0 1px 0 var(--ds-hi), inset 0 0 0 1px color-mix(in srgb, var(--c, var(--ds-primary)) 18%, transparent); }
.gk-ic.sm { width: 1.9em; height: 1.9em; border-radius: var(--ds-r-sm); font-size: .95rem; }
.gk-ic.lg { width: 3em; height: 3em; border-radius: var(--ds-r-lg); font-size: 1.45rem; }

/* section header: the same on every page */
.gk-sec, .sec { display: flex; align-items: center; gap: var(--ds-s-2); margin: var(--ds-s-6) 0 var(--ds-s-3); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-heavy); text-transform: uppercase; letter-spacing: .09em; color: var(--ds-muted); }
.gk-sec::before, .sec::before { content: ""; width: 4px; height: 1.1em; border-radius: var(--ds-r-pill); background: linear-gradient(180deg, var(--ds-primary), color-mix(in srgb, var(--ds-primary) 30%, var(--ds-accent))); flex-shrink: 0; }
.gk-sec::after { content: ""; flex: 1; height: 1px; background: var(--ds-line); }

/* card and KPI box */
.gk-card { background: var(--ds-card-grad); background-color: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); padding: var(--ds-s-4); box-shadow: inset 0 1px 0 var(--ds-hi), var(--ds-e-1); }
.gk-kpi { position: relative; overflow: hidden; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); padding: var(--ds-s-3) var(--ds-s-4); box-shadow: inset 0 1px 0 var(--ds-hi), var(--ds-e-1); }
.gk-kpi::before, .kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c, var(--ds-primary)), color-mix(in srgb, var(--c, var(--ds-primary)) 20%, transparent)); opacity: .75; pointer-events: none; }
.kpi { position: relative; overflow: hidden; }
.kpi.warn { --c: var(--ds-warn); } .kpi.bad { --c: var(--ds-danger); } .kpi.ok { --c: var(--ds-success); }
.gk-kpi small { display: block; color: var(--ds-muted); font-size: var(--ds-fs-sm); } .gk-kpi b { display: block; font-size: var(--ds-fs-xl); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* chip / tag in the status colours */
.gk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); background: var(--ds-surface-2); color: var(--ds-muted); white-space: nowrap; }
.gk-chip.ok { background: var(--ds-success-soft); color: var(--ds-success); } .gk-chip.warn { background: var(--ds-warn-soft); color: var(--ds-warn); }
.gk-chip.bad { background: var(--ds-danger-soft); color: var(--ds-danger); } .gk-chip.info { background: color-mix(in srgb, var(--ds-info) 14%, transparent); color: var(--ds-info); }

/* empty state */
.empty { line-height: var(--ds-lh); }
.gk-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ds-s-2); padding: var(--ds-s-8) var(--ds-s-4); text-align: center; color: var(--ds-muted); }
.gk-empty .gk-ic { margin-bottom: var(--ds-s-1); }

/* skeletons: the final size, a soft shimmer while the figures load */
.skel, .gk-skel { position: relative; overflow: hidden; border-radius: var(--ds-r-sm); background: var(--ds-surface-2); color: transparent !important; }
.skel::after, .gk-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ds-surface) 60%, transparent), transparent); animation: ds-shimmer 1.3s infinite; }
.skel-line { height: .9em; margin: .35em 0; } .skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; }
@keyframes ds-shimmer { to { transform: translateX(100%); } }

/* ---------- 3. no jumping, no distortion ---------- */
/* a scrollbar that appears never moves the page sideways */
html { scrollbar-gutter: stable; }
main { scrollbar-gutter: stable; }
/* numbers line up and never change width as they update */
.kpi b, .kpi span, .badge, .tag, .tbl td, .np-val, .totals, #top .pill, .g-card .big, .vz-hero .big { font-variant-numeric: tabular-nums; }
/* badges on the top-bar icons sit on top (no reflow when a count appears or grows) */
#top .chip.tb-ic { min-width: 40px; }
#top .chip.tb-ic .badge { pointer-events: none; }
/* logos and photos keep their shape */
#top .brand img, .lock-logo, .g-logo, .tile img, .card img:not([width]) { object-fit: contain; }
#top .brand img { flex-shrink: 0; aspect-ratio: 1; }
img.cover, .ph img, .photo img { object-fit: cover; }
/* the Home figures load a moment after the boxes: their space is kept from the start (same size as the final boxes) */
#homeKpis:empty { min-height: 58px; border-radius: var(--ds-r-md); background: linear-gradient(90deg, var(--ds-surface-2), color-mix(in srgb, var(--ds-surface-2) 50%, var(--ds-surface)), var(--ds-surface-2)); background-size: 200% 100%; animation: ds-sweep 1.4s infinite linear; }
@media (max-width: 900px) { #homeKpis:empty { min-height: 126px; } }
@keyframes ds-sweep { to { background-position: -200% 0; } }
/* toasts and the welcome bar float: nothing under them moves */
#toasts, .mem-bar { contain: layout; }

/* smooth page changes: View Transitions where the browser has them (js/ui.js), else the cross-fade in app.css */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--ds-dur-2); animation-timing-function: var(--ds-ease); }
#top { view-transition-name: ds-top; }
#side { view-transition-name: ds-side; }
body[data-page="lock"] #side, body.side-open #side { view-transition-name: none; }
::view-transition-group(ds-top), ::view-transition-group(ds-side) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .skel::after, .gk-skel::after, #homeKpis:empty { animation: none; }
}

/* ---------- 4. memory (js/memory.js) ---------- */
.mem-bar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; width: min(620px, calc(100% - 24px));
  display: flex; align-items: center; gap: var(--ds-s-3); padding: var(--ds-s-3) var(--ds-s-3) var(--ds-s-3) var(--ds-s-4); border-radius: var(--ds-r-lg);
  color: var(--ds-top-ink); background: var(--ds-hero); box-shadow: var(--ds-e-3), inset 0 1px 0 rgb(255 255 255 / .12); animation: mem-in var(--ds-dur-3) var(--ds-ease-out); }
.mem-bar .mem-tx { flex: 1; min-width: 0; line-height: 1.3; } .mem-bar .mem-tx b { display: block; }
.mem-bar .mem-tx span { display: block; opacity: .85; font-size: var(--ds-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-bar .btn { min-height: 40px; } .mem-bar .btn.primary { background: var(--ds-surface); color: var(--ds-ink); border-color: transparent; }
.mem-bar .mem-x { background: rgb(255 255 255 / .14); border: 0; color: inherit; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
@keyframes mem-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 520px) { .mem-bar { flex-wrap: wrap; } .mem-bar .mem-tx { flex-basis: calc(100% - 50px); } .mem-bar .btn { flex: 1; } }
.mem-draft { display: flex; align-items: center; gap: var(--ds-s-2); flex-wrap: wrap; margin: 0 0 var(--ds-s-3); padding: var(--ds-s-2) var(--ds-s-3); border-radius: var(--ds-r-md);
  background: var(--ds-info-soft); background: color-mix(in srgb, var(--ds-info) 12%, var(--ds-surface)); border: 1px solid color-mix(in srgb, var(--ds-info) 35%, transparent); }
.mem-draft .mem-yes { background: var(--ds-primary); color: var(--ds-primary-ink, #fff); border-color: transparent; }
.mem-draft span { flex: 1; min-width: 160px; font-size: var(--ds-fs-sm); }
.mem-set { display: grid; gap: var(--ds-s-3); }
.mem-set .toggle { width: 100%; justify-content: flex-start; border-radius: var(--ds-r-md); padding: var(--ds-s-2) var(--ds-s-3); }

/* ---------- 5. newer screens wear the same look (light touch: their own CSS stays, these only add the shared depth / motion) ---------- */
.brp .br-t, .rl-card, .rl-sec, .rp-card { border-radius: var(--ds-r-md); box-shadow: inset 0 1px 0 var(--ds-hi), var(--ds-e-1); transition: transform var(--ds-dur-1) var(--ds-ease), box-shadow var(--ds-dur-1) var(--ds-ease), border-color var(--ds-dur-1); }
.brp .br-t:hover, .rl-card:hover, .rl-sec:hover, .rp-card:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--ds-hi), var(--ds-e-2); }
.rp-sec::before { content: ""; width: 4px; height: 1.1em; border-radius: var(--ds-r-pill); background: linear-gradient(180deg, var(--ds-primary), color-mix(in srgb, var(--ds-primary) 30%, var(--ds-accent))); flex-shrink: 0; }
.brp .tag, .rp-card b, .rl-card b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .brp .br-t, .rl-card, .rl-sec, .rp-card { transition: none; } .brp .br-t:hover, .rl-card:hover, .rl-sec:hover, .rp-card:hover { transform: none; } }