/* Design system v2 additions. Colour tokens live in styles.css (light / dark / outdoor AAA); this adds spacing,
   type scale, focus, motion and the new components. */
:root { --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px; --fs-3xl:34px;
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--focus) 45%, transparent); --ease:cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline:2px solid var(--focus); outline-offset:2px; box-shadow:var(--focus-ring); }
.kbd { font: 600 10.5px/1 var(--mono, monospace); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:4px; padding:2px 5px; color:var(--text-2); background:var(--surface); }

/* KPI v2 */
.ds-kpi .k-v { font-size: var(--fs-2xl); letter-spacing:-.02em; }
.ds-kpi.tone-warn .k-v { color: var(--warn); } .ds-kpi.tone-bad .k-v { color: var(--bad); } .ds-kpi.tone-ok .k-v { color: var(--ok); }
.ds-hero { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-3); }
@media (max-width: 980px) { .ds-hero { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ds-greet { display:flex; align-items:baseline; gap: var(--space-3); flex-wrap:wrap; margin: 0 0 var(--space-4); }
.ds-greet h2 { margin:0; font-size: var(--fs-xl); } .ds-greet .muted { font-size: var(--fs-sm); }

/* Exception list */
.ds-exc { list-style:none; margin:0; padding:0; display:grid; gap: var(--space-2); }
.ds-exc li { display:grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items:center; padding: var(--space-3) var(--space-4);
  border:1px solid var(--border); border-left-width:4px; border-radius: var(--r); background: var(--surface); }
.ds-exc li.critical { border-left-color: var(--bad); } .ds-exc li.warning { border-left-color: var(--warn); } .ds-exc li.info { border-left-color: var(--info); }
.ds-exc .n { font: 700 var(--fs-xl)/1 var(--font); font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align:right; }
.ds-exc .t { font-weight:650; } .ds-exc .h { font-size: var(--fs-sm); color: var(--text-2); }

/* Inbox */
.ds-inbox { display:grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--space-4); align-items:start; }
@media (max-width: 900px) { .ds-inbox { grid-template-columns: 1fr; } }
.ds-inbox-list { list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow:hidden; }
.ds-inbox-list li button { all:unset; box-sizing:border-box; display:grid; grid-template-columns: 1fr auto; gap:2px var(--space-3); width:100%; padding: var(--space-3) var(--space-4); cursor:pointer; border-bottom:1px solid var(--border); }
.ds-inbox-list li[aria-current="true"] button { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.ds-inbox-list li button:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.ds-inbox-list .ti { font-weight:650; } .ds-inbox-list .sub { font-size: var(--fs-sm); color: var(--text-2); grid-column: 1 / -1; }
.ds-detail { position:sticky; top: var(--space-4); }
.ds-actions { display:flex; gap: var(--space-2); flex-wrap:wrap; align-items:center; }

/* Meter */
.ds-meter-track { height:8px; background: var(--surface-3); border-radius:99px; overflow:hidden; }
.ds-meter-fill { height:100%; border-radius:99px; transition: width .3s var(--ease); }
.ds-meter-fill.t-ok { background: var(--ok); } .ds-meter-fill.t-warn { background: var(--warn); } .ds-meter-fill.t-bad { background: var(--bad); }
[data-theme="outdoor"] .ds-meter-track { border:1px solid var(--text); }

/* Order entry */
.ds-order { display:grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--space-4); align-items:start; }
@media (max-width: 980px) { .ds-order { grid-template-columns: 1fr; } }
.ds-summary { position:sticky; top: var(--space-4); }
.ds-combo { position:relative; } .ds-combo-list { position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); max-height:320px; overflow:auto; margin:0; padding:4px; list-style:none;
  background: var(--surface); border:1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--sh-2, 0 8px 24px rgba(0,0,0,.12)); }
.ds-combo-list li { padding:8px 10px; border-radius:6px; cursor:pointer; display:flex; justify-content:space-between; gap:10px; }
.ds-combo-list li[aria-selected="true"], .ds-combo-list li:hover { background: var(--surface-2); }
.ds-lines { display:grid; gap: var(--space-2); }
.ds-line { display:grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: var(--space-2) var(--space-3); align-items:center; padding: var(--space-3); border:1px solid var(--border); border-radius: var(--r); }
@media (max-width: 640px) { .ds-line { grid-template-columns: 1fr auto; } }
.ds-step { display:inline-flex; align-items:center; gap:4px; } .ds-step input { width:72px; text-align:center; }
.ds-chips { display:flex; gap:6px; flex-wrap:wrap; }
.ds-chip { all:unset; cursor:pointer; padding:5px 10px; border:1px dashed var(--border-strong); border-radius:99px; font-size: var(--fs-sm); }
.ds-chip:hover { border-style:solid; } .ds-chip:focus-visible { outline:2px solid var(--focus); }
.ds-total { display:flex; justify-content:space-between; align-items:baseline; font-size: var(--fs-xl); font-weight:750; padding-top: var(--space-3); border-top:2px solid var(--text); margin-top: var(--space-3); }
.ds-outcome { margin-top: var(--space-3); }
.ds-empty { text-align:center; padding: var(--space-6) var(--space-4); } .ds-empty-ic { color: var(--ok); margin-bottom: var(--space-2); }
.lang-switch { min-width: 54px; }
.seg button[role="radio"][aria-checked="true"] { background: var(--navy); color: #fff; font-weight: 650; }
.ds-moneyrow { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ds-moneyrow:last-child { border-bottom: 0; } .ds-moneyrow:hover b { text-decoration: underline; } .ds-moneyrow:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }