/* Vielendark Report: canonical design system in v2/DESIGN.md, declutter revision 4. 11. 2026.
   Look from CRM Pathfinder: near-monochrome graphite, Apple-like; colour only for meaning (state, verdict); indigo only for focus and "nové".
   Readable working rows (calm 44, table 44, rail 40); three control heights (36 content, 32 topbar, 28 small); three card paddings.
   Page rules live in styles-pages.css, module rules in styles-modules.css; both use only these tokens and classes. */

/* ── 1. tokens: light ── */
:root{color-scheme:light;
  --bg:oklch(.984 .003 282);--bg-elev:oklch(.993 .003 285);--bg-elev-2:oklch(.975 .004 282);
  --surface:oklch(1 0 0);--surface-hi:oklch(.971 .004 285);
  --rail:linear-gradient(180deg,oklch(.976 .002 264),oklch(.987 .0015 264));
  --line-soft:color-mix(in oklch,oklch(.18 .012 272) 5.5%,transparent);--line:color-mix(in oklch,oklch(.18 .012 272) 11%,transparent);
  --line-2:color-mix(in oklch,oklch(.18 .012 272) 16%,transparent);--line-strong:color-mix(in oklch,oklch(.18 .012 272) 20%,transparent);
  --fg:oklch(.17 .014 272);--fg-soft:oklch(.35 .012 272);--fg-mute:oklch(.52 .01 272);--fg-faint:oklch(.66 .008 272);--fg-ghost:oklch(.79 .005 272);
  --accent:oklch(.22 .012 272);--accent-strong:oklch(.13 .014 272);--accent-soft:oklch(.45 .02 272/.08);--accent-line:oklch(.27 .01 272/.18);--accent-ink:#fff;
  --brand:oklch(.54 .19 278);--brand-tint:oklch(.54 .19 278/.12);--brand-line:oklch(.54 .19 278/.34);
  --pos:oklch(.60 .17 152);--neg:oklch(.58 .22 25);--warn:oklch(.66 .18 65);--info:oklch(.58 .18 250);
  --pos-ink:oklch(.48 .14 152);--neg-ink:oklch(.50 .20 25);--warn-ink:oklch(.52 .14 60);
  --pos-bg:color-mix(in oklab,var(--pos) 14%,var(--bg-elev));--neg-bg:color-mix(in oklab,var(--neg) 12%,var(--bg-elev));--warn-bg:color-mix(in oklab,var(--warn) 14%,var(--bg-elev));
  --pos-line:color-mix(in oklch,var(--pos) 38%,transparent);--neg-line:color-mix(in oklch,var(--neg) 36%,transparent);--warn-line:color-mix(in oklch,var(--warn) 38%,transparent);
  --shadow:oklch(.18 .02 272);
  --sh-card:none;
  --sh-rich:var(--sh-card),0 24px 48px -28px oklch(.18 .02 272/.18);
  --sh-hover:0 14px 32px -18px oklch(.18 .02 272/.28);
  --sh-pop:0 1px 0 oklch(1 0 0/.7) inset,0 24px 64px -28px oklch(.18 .02 272/.36);
  --veil:oklch(.2 .008 260/.28);
  --ease:cubic-bezier(.32,.72,0,1);--t-fast:160ms;--t-base:280ms;
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"DM Mono",Menlo,monospace;
  --fs-2xs:.75rem;--fs-xs:.75rem;--fs-sm:.875rem;--fs-base:.9375rem;--fs-md:1rem;--fs-lg:1.125rem;--fs-title:1.75rem;--fs-xl:1.75rem;--fs-kpi:2rem;
  --gap-page:32px;--gap-section:16px;--gap-control:8px;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-14:56px;
  --r-xs:6px;--r-sm:8px;--r-md:10px;--r-lg:12px;--r-act:13px;--r-xl:16px;--r-pill:999px;
  --ctl-h:40px;--ctl-h-top:32px;--ctl-h-sm:32px;--rail-item-h:40px;--ctl-h-touch:44px;--topbar-h:52px;--rail-w:232px;--rail-w-icons:64px;--content-max:1200px;
  --row-calm:44px;--row-table:44px;--card-line:var(--line-soft);
  --k-trigger:oklch(.55 .07 250);--k-message:oklch(.55 .07 300);--k-logic:oklch(.55 .06 200);--k-data:oklch(.55 .05 110);
  accent-color:var(--accent);
}
/* ── 2. tokens: dark (neutral charcoal, hue 272, no brown) ── */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:oklch(.205 .004 272);--bg-elev:oklch(.225 .004 272);--bg-elev-2:oklch(.255 .005 272);--surface:oklch(.235 .005 272);--surface-hi:oklch(.275 .006 272);
  --rail:oklch(.185 .004 272);
  --line-soft:oklch(1 0 0/.05);--line:oklch(1 0 0/.08);--line-2:oklch(1 0 0/.12);--line-strong:oklch(1 0 0/.18);--card-line:var(--line);
  --fg:oklch(.95 .004 272);--fg-soft:oklch(.82 .006 272);--fg-mute:oklch(.68 .008 272);--fg-faint:oklch(.55 .008 272);--fg-ghost:oklch(.40 .006 272);
  --accent:oklch(.93 .004 272);--accent-strong:#fff;--accent-soft:oklch(1 0 0/.07);--accent-line:oklch(1 0 0/.16);--accent-ink:oklch(.205 .004 272);
  --k-trigger:oklch(.72 .07 250);--k-message:oklch(.72 .07 300);--k-logic:oklch(.72 .06 200);--k-data:oklch(.72 .05 110);
  --brand:oklch(.68 .16 278);--brand-tint:oklch(.68 .16 278/.18);--brand-line:oklch(.68 .16 278/.45);
  --pos:oklch(.74 .15 152);--neg:oklch(.70 .17 25);--warn:oklch(.78 .14 70);--info:oklch(.72 .13 250);
  --pos-ink:var(--pos);--neg-ink:var(--neg);--warn-ink:var(--warn);
  --pos-bg:color-mix(in oklab,var(--pos) 13%,var(--bg));--neg-bg:color-mix(in oklab,var(--neg) 13%,var(--bg));--warn-bg:color-mix(in oklab,var(--warn) 13%,var(--bg));
  --sh-card:none;--sh-rich:0 0 0 1px oklch(1 0 0/.02) inset,0 20px 40px -24px oklch(0 0 0/.6);--sh-hover:0 12px 28px -16px oklch(0 0 0/.7);--sh-pop:0 24px 64px -20px oklch(0 0 0/.7);
  --veil:oklch(0 0 0/.5)}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:oklch(.205 .004 272);--bg-elev:oklch(.225 .004 272);--bg-elev-2:oklch(.255 .005 272);--surface:oklch(.235 .005 272);--surface-hi:oklch(.275 .006 272);
  --rail:oklch(.185 .004 272);
  --line-soft:oklch(1 0 0/.05);--line:oklch(1 0 0/.08);--line-2:oklch(1 0 0/.12);--line-strong:oklch(1 0 0/.18);--card-line:var(--line);
  --fg:oklch(.95 .004 272);--fg-soft:oklch(.82 .006 272);--fg-mute:oklch(.68 .008 272);--fg-faint:oklch(.55 .008 272);--fg-ghost:oklch(.40 .006 272);
  --accent:oklch(.93 .004 272);--accent-strong:#fff;--accent-soft:oklch(1 0 0/.07);--accent-line:oklch(1 0 0/.16);--accent-ink:oklch(.205 .004 272);
  --k-trigger:oklch(.72 .07 250);--k-message:oklch(.72 .07 300);--k-logic:oklch(.72 .06 200);--k-data:oklch(.72 .05 110);
  --brand:oklch(.68 .16 278);--brand-tint:oklch(.68 .16 278/.18);--brand-line:oklch(.68 .16 278/.45);
  --pos:oklch(.74 .15 152);--neg:oklch(.70 .17 25);--warn:oklch(.78 .14 70);--info:oklch(.72 .13 250);
  --pos-ink:var(--pos);--neg-ink:var(--neg);--warn-ink:var(--warn);
  --pos-bg:color-mix(in oklab,var(--pos) 13%,var(--bg));--neg-bg:color-mix(in oklab,var(--neg) 13%,var(--bg));--warn-bg:color-mix(in oklab,var(--warn) 13%,var(--bg));
  --sh-card:none;--sh-rich:0 0 0 1px oklch(1 0 0/.02) inset,0 20px 40px -24px oklch(0 0 0/.6);--sh-hover:0 12px 28px -16px oklch(0 0 0/.7);--sh-pop:0 24px 64px -20px oklch(0 0 0/.7);
  --veil:oklch(0 0 0/.5)}
/* paper is always light: html.printing (set by charts.js on beforeprint, so charts redraw light) and @media print (§3.2) */
html.printing:root:not(.x){color-scheme:light;
  --bg:#fff;--bg-elev:#fff;--bg-elev-2:oklch(.975 .004 282);--surface:#fff;--surface-hi:oklch(.971 .004 285);--rail:#fff;
  --line-soft:oklch(.18 .012 272/.08);--line:oklch(.18 .012 272/.16);--line-2:oklch(.18 .012 272/.22);--line-strong:oklch(.18 .012 272/.3);
  --fg:oklch(.17 .014 272);--fg-soft:oklch(.35 .012 272);--fg-mute:oklch(.47 .01 272);--fg-faint:oklch(.62 .008 272);--fg-ghost:oklch(.79 .005 272);
  --accent:oklch(.22 .012 272);--accent-strong:oklch(.13 .014 272);--accent-soft:oklch(.45 .02 272/.08);--accent-line:oklch(.27 .01 272/.18);--accent-ink:#fff;
  --pos:oklch(.60 .17 152);--neg:oklch(.58 .22 25);--warn:oklch(.66 .18 65);--pos-ink:oklch(.45 .14 152);--neg-ink:oklch(.48 .2 25);--warn-ink:oklch(.48 .14 60);
  --pos-bg:oklch(.95 .03 152);--neg-bg:oklch(.95 .03 25);--warn-bg:oklch(.96 .04 70);
  --k-trigger:oklch(.55 .07 250);--k-message:oklch(.55 .07 300);--k-logic:oklch(.55 .06 200);--k-data:oklch(.55 .05 110);
  --sh-card:none;--sh-rich:none;--sh-hover:none;--sh-pop:none}

/* ── 3. base and type (§3.3) ── */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html{scroll-padding-top:calc(var(--topbar-h) + var(--s-4))}
body{font:400 var(--fs-base)/1.55 var(--font-sans);letter-spacing:-.008em;font-feature-settings:"tnum","calt";font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:var(--bg);color:var(--fg);overflow-x:clip;scrollbar-color:var(--line-2) transparent}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:600;letter-spacing:-.014em;margin:0;line-height:1.25;text-wrap:balance;color:var(--fg)}
h2{font-size:var(--fs-lg)}
h3{font-size:var(--fs-md)}
p{margin:0;text-wrap:pretty}
a{color:var(--fg-soft);text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{color:var(--fg);text-decoration-color:var(--fg-mute)}
strong,b{font-weight:600}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
kbd{font:500 var(--fs-2xs)/1 var(--font-sans);padding:2px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r-xs);background:var(--surface);color:var(--fg-mute)}
code,.nid,.err-detail,.email-text{font-family:var(--font-mono)}
code{font-size:.92em;background:var(--bg-elev-2);border-radius:var(--r-xs);padding:1px 5px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:var(--accent-line)}
::placeholder{color:var(--fg-mute);opacity:1}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
hr.sep{border:0;border-top:1px solid var(--line);width:100%;margin:var(--s-1) 0}
.ico{flex:none;display:block}
/* Meta labels remain quiet; metric names and operational labels use sentence case. */
.eyebrow,.label,.kpi .lbl,.t th,.kv dt,.rec dt,.rec-body dt,.h-sub,.sb-grp,.annot .k,.tl .ty,.top-menu-label,.pal-grp,.sm-cap{
  font:500 var(--fs-sm)/1.4 var(--font-sans);text-transform:none;letter-spacing:0;color:var(--fg-soft)}
/* utilities */
.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.muted{color:var(--fg-mute)}
.small{font-size:var(--fs-xs)}
.num{font-variant-numeric:tabular-nums;text-align:right}
.mono{font-variant-numeric:tabular-nums}
.push{margin-left:auto}
.pre-line{white-space:pre-line}
.wrap{overflow-wrap:anywhere}
.print-only{display:none}
.screen-hidden{display:none}
.m-only{display:none}
.skip{position:fixed;left:var(--s-4);top:-48px;z-index:100;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);font-size:var(--fs-sm)}
.skip:focus{top:var(--s-2)}
.boot{padding:48px 16px;text-align:center;color:var(--fg-mute)}

/* ── 4. shell: rail (§2.1) ── */
#app{display:flex;min-height:100vh}
.sidebar{width:var(--rail-w);position:fixed;inset:0 auto 0 0;background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:60;padding:14px 12px 8px;gap:var(--s-2)}
.sb-brand{display:flex;align-items:center;gap:var(--s-2);height:32px;padding:0 6px;border-radius:var(--r-sm);text-decoration:none;color:var(--fg);flex:none}
.sb-brand:hover{background:var(--accent-soft);color:var(--fg)}
.sb-mark{width:24px;height:24px;border-radius:7px;background:var(--accent);color:var(--accent-ink);display:inline-grid;place-items:center;font:600 var(--fs-sm)/1 var(--font-sans);flex:none;letter-spacing:0}
.sb-name{font-weight:600;font-size:var(--fs-base);letter-spacing:-.01em;white-space:normal;line-height:1.15;min-width:0}
.sb-brand .sb-demo{margin-left:auto;padding:0 4px;flex:none}
.sb-brand:has(.sb-demo){gap:var(--s-1)}
.sb-navwrap{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px;scrollbar-width:thin}
.sb-nav{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.sb-group+.sb-group{margin-top:var(--s-2)}
.sb-grp{min-height:28px;display:flex;align-items:center;padding:0 10px;font-size:var(--fs-xs);color:var(--fg-mute)}
.sb-nav a,.sb-global a{display:flex;align-items:center;gap:9px;min-height:var(--rail-item-h);height:auto;padding:5px 10px;line-height:20px;border-radius:7px;color:var(--fg-soft);text-decoration:none;font-size:var(--fs-sm);font-weight:500;position:relative;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.sb-nav a .ico,.sb-global a .ico{color:var(--fg-mute)}
.sb-nav a .l,.sb-global a .l{flex:1;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.sb-nav a:hover,.sb-global a:hover{background:var(--accent-soft);color:var(--fg)}
.sb-nav a.active{background:var(--accent-soft);color:var(--fg);box-shadow:inset 2px 0 0 var(--accent);font-weight:600}
.sb-nav a.active .ico{color:var(--fg)}
.sb-nav .count{margin-left:auto}
.sb-global{display:flex;align-items:center;gap:2px;margin-bottom:var(--s-2);padding-bottom:var(--s-2);border-bottom:1px solid var(--line-soft)}
.sb-global a{flex:0 1 auto;color:var(--fg-mute)}
.sb-global a .l{flex:none}
.sb-global .sep{color:var(--fg-ghost)}
.sb-foot{flex:none;border-top:1px solid var(--line-soft);padding-top:6px}
.sb-user{display:flex;align-items:center;gap:var(--s-2);width:100%;height:44px;padding:6px 8px;border:0;border-radius:var(--r-sm);background:transparent;text-align:left;color:var(--fg-soft)}
.sb-user:hover{background:var(--accent-soft)}
.sb-user .av{width:26px;height:26px;border-radius:50%;background:var(--bg-elev-2);border:1px solid var(--line);display:inline-grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:var(--fg-soft);flex:none}
.sb-who{display:grid;min-width:0;flex:1;line-height:1.25}
.sb-who .e{font-size:var(--fs-xs);color:var(--fg-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-who .r{font-size:var(--fs-2xs);color:var(--fg-mute)}
.sb-user .ico{color:var(--fg-mute)}

/* popover menus: user menu, project switcher, help, context sheet (top layer, positioned by main.js) */
.top-menu{width:268px;max-width:calc(100vw - 16px);max-height:min(560px,calc(100vh - 16px));overflow:auto;border:1px solid var(--line);border-radius:var(--r-xl);padding:6px;
  background:color-mix(in oklch,var(--surface) 92%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--sh-pop);color:var(--fg);font-size:var(--fs-sm)}
.top-menu:popover-open{display:grid;gap:2px}
.top-menu-head{display:flex;align-items:center;gap:var(--s-2);padding:8px 9px 6px;min-width:0}
.top-menu-head .e{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.top-menu-label{display:block;padding:8px 9px 4px}
.top-menu .seg,.top-menu>.select{margin:0 9px 4px;width:calc(100% - 18px)}
.top-menu .seg button{flex:1}
.top-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--fg-soft);text-decoration:none;font-size:var(--fs-sm);text-align:left;min-height:34px}
.top-menu-item .ico{color:var(--fg-mute)}
.top-menu-item .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-menu-item:hover,.top-menu-item:focus-visible{background:var(--accent-soft);color:var(--fg)}
.top-menu-item.on{color:var(--fg);font-weight:600}
.top-menu-item.strong{color:var(--fg);font-weight:600}
.top-menu-sep{height:1px;background:var(--line-soft);margin:4px 6px}
.top-menu-text{padding:0 9px 6px;color:var(--fg-soft);font-size:var(--fs-xs);line-height:1.5}
.proj-menu{width:300px}
.help-pop{width:300px}
.ctx-sheet{width:min(360px,calc(100vw - 16px))}
.ctx-sheet-ctl{display:grid;gap:var(--s-2);padding:6px}
.ctx-sheet-ctl .select,.ctx-sheet-ctl .seg{width:100%}
.ctx-sheet-ctl .seg button{flex:1}

/* ── 5. topbar ── */
.main{flex:1;min-width:0;margin-left:var(--rail-w);display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:40;height:var(--topbar-h);display:flex;align-items:center;gap:var(--s-2);padding:0 var(--s-6);
  background:color-mix(in oklch,var(--bg) 72%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line-soft)}
.crumb{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;font-size:var(--fs-sm)}
.crumb-sep{color:var(--fg-ghost)}
.crumb-page{color:var(--fg-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.proj-switch{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-h-top);padding:0 8px 0 10px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--fg);font-weight:600;font-size:var(--fs-sm);max-width:240px;min-width:0}
.proj-switch .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-switch .ico{color:var(--fg-mute)}
.proj-switch:hover{background:var(--accent-soft);border-color:var(--line-soft)}
.top-ctl{display:flex;align-items:center;gap:var(--s-2);flex:none}
.top-right{display:flex;align-items:center;gap:6px;flex:none}
.scope-none{font-size:var(--fs-xs);color:var(--fg-mute);white-space:nowrap}
.kbd-pill{display:inline-flex;align-items:center;gap:8px;height:var(--ctl-h-top);padding:0 6px 0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--fg-mute);font-size:var(--fs-sm);min-width:150px}
.kbd-pill .l{flex:1;text-align:left}
.kbd-pill:hover{border-color:var(--line-2);color:var(--fg-soft)}
.ctx-chip{display:none;align-items:center;gap:6px;height:var(--ctl-h-top);padding:0 8px 0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--fg-soft);font-size:var(--fs-xs);font-weight:500;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.ctx-chip .l{min-width:0;overflow:hidden;text-overflow:ellipsis}
.menu-btn{display:none}

/* ── 6. content, page head, tabs, alert bar ── */
.content{padding:var(--s-8);max-width:calc(var(--content-max) + 2 * var(--s-8));width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-page);align-content:start}
.content.wide{max-width:calc(1360px + 2 * var(--s-8))}
.content:focus{outline:none}
.content>*,#page-body>*{min-width:0}
#page-body{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-page);align-content:start;min-width:0}
#page-body>.grid{min-width:0}
.content>.page-head+.page-tabs,.content>.page-head+.alertbar,.content>.page-tabs+.alertbar{margin-top:calc(-1 * var(--s-6))}
.page-head{display:grid;gap:6px;min-width:0}
.page-head-row{display:flex;align-items:center;gap:var(--s-3) var(--s-4);flex-wrap:wrap}
.page-head-main{flex:1 1 320px;min-width:0;display:grid;gap:var(--s-2)}
.page-title{font-size:var(--fs-title);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.page-title:focus{outline:none}
.page-actions{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.page-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:var(--fs-xs);color:var(--fg-mute);line-height:1.6}
.page-meta .pm{display:inline-flex;align-items:center;gap:6px}
.page-meta .pm+.pm::before{content:'·';margin:0 8px;color:var(--fg-ghost)}
.page-meta .warn{color:var(--warn-ink);display:inline-flex;align-items:center;gap:6px}
.page-meta .warn::before{content:'';width:7px;height:7px;background:var(--warn);border-radius:1px;transform:rotate(45deg)}
.page-meta .basis{color:var(--fg-mute)}
.page-progress{height:2px;border-radius:2px;background:var(--bg-elev-2);overflow:hidden;max-width:320px;margin-top:2px}
.page-progress>span{display:block;height:100%;background:var(--fg-mute)}
/* page-level tabs (§3.4) */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-5);border-bottom:1px solid var(--line);min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs a,.tabs [role=tab]{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:var(--s-2) 1px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--fg-mute);font:500 var(--fs-sm)/1 var(--font-sans);text-decoration:none;white-space:nowrap}
.tabs a:hover,.tabs [role=tab]:hover{color:var(--fg)}
.tabs [aria-selected="true"],.tabs a.on{color:var(--fg);border-bottom-color:var(--accent)}
.alertbar{display:grid;gap:var(--s-2)}
.alert-more>summary{font-size:var(--fs-xs);color:var(--fg-mute);width:fit-content}
.alert-more[open]{display:grid;gap:var(--s-2)}

/* ── 7. sections and cards ── */
.sec{display:grid;gap:var(--gap-section);min-width:0;align-content:start;scroll-margin-top:calc(var(--topbar-h) + var(--s-4))}
.sec>*{min-width:0}
.sec-hdr{display:flex;align-items:baseline;gap:var(--s-2) var(--s-3);flex-wrap:wrap}
.sec-hdr h2,.sec-hdr .sec-h{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.014em}
.sec-hdr .hint{font-size:var(--fs-xs);color:var(--fg-mute)}
.sec-hdr .link{margin-left:auto;font-size:var(--fs-sm)}
.sec.quiet>.sec-hdr h2,.sec.quiet>summary h2,.sec.quiet>.sec-hdr .sec-h,.sec.quiet>summary .sec-h{font:500 var(--fs-sm)/1.4 var(--font-sans);text-transform:none;letter-spacing:0;color:var(--fg-soft)}
details.sec>summary.sec-hdr{list-style:none;cursor:pointer;min-height:44px;padding:var(--s-2) 0;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0}
details.sec>summary.sec-hdr:hover{background:var(--surface-hi)}
details.sec[open]>summary.sec-hdr{background:transparent;border-color:var(--line-2)}
details.sec>summary.sec-hdr:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
details.sec>summary.sec-hdr::-webkit-details-marker{display:none}
details.sec>summary.sec-hdr h2,details.sec>summary.sec-hdr .sec-h{display:inline-flex;align-items:center;gap:8px}
details.sec>summary.sec-hdr h2::before,details.sec>summary.sec-hdr .sec-h::before{content:'';width:12px;height:12px;background:var(--fg-mute);-webkit-mask:var(--chev) center/12px no-repeat;mask:var(--chev) center/12px no-repeat;transition:transform var(--t-fast) var(--ease)}
details.sec[open]>summary.sec-hdr h2::before,details.sec[open]>summary.sec-hdr .sec-h::before{transform:rotate(90deg)}
.sec-body{display:grid;gap:var(--gap-section);margin-top:0;min-width:0}
.h-card{font-size:var(--fs-md);font-weight:600}
.h-sub{margin:var(--s-3) 0 var(--s-2)}
.card{background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:16px 20px;min-width:0}
.card.compact{padding:12px 14px}
.card.flat{background:var(--bg-elev);box-shadow:none;border-color:var(--line-soft)}
a.card,.card.click{color:inherit;text-decoration:none;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
a.card:hover,.card.click:hover{border-color:var(--line-2);box-shadow:none}
.grid{display:grid;gap:var(--s-3)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid.even{align-items:stretch}
.grid.even>.sec{grid-template-rows:auto 1fr}
.grid.even>.sec>.card:last-child,.grid.even>.sec>.empty:last-child{height:100%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s-3);margin-top:var(--s-1)}
.two-col ul{margin:0;padding-left:1.1em}
.row-btns{display:flex;gap:var(--s-2) var(--s-3);align-items:center;flex-wrap:wrap}
.back-links{display:flex;gap:var(--s-2) var(--s-5);flex-wrap:wrap;font-size:var(--fs-sm)}
.filters{display:flex;gap:var(--s-2) var(--s-4);flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* prose */
.prose{max-width:none}
.prose p,.prose li,.ctx-inline p,.tl .small,.tbl-notes p,.share .note,.share p.small,.ctx-body,.rec dd,.rec-text,.bp-sum,.cat-intro,.notice,.empty,.help-card li{max-width:44em}
.prose,.ctx-body,.share-lead{font-size:var(--fs-md)}
.prose p+p{margin-top:var(--s-2)}
.prose h3{font-size:var(--fs-md);margin:var(--s-4) 0 var(--s-1)}
.prose ul,.prose ol{margin:var(--s-1) 0;padding-left:1.25em}
.prose li+li{margin-top:var(--s-1)}
.prose table{border-collapse:collapse;margin:var(--s-2) 0;font-size:var(--fs-sm);display:block;max-width:100%;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line-soft);padding:var(--s-1) var(--s-2);text-align:left}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:var(--s-4) 0}

/* ── 8. KPI: hero tile + compact row (D16) ── */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--s-4);align-items:stretch}
.kpi{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border-radius:var(--r-lg);container-type:inline-size;min-height:100%}
.kpi .lbl{display:flex;gap:var(--s-2);align-items:flex-start;min-height:2.8em;flex-wrap:wrap;align-content:start}
.kpi .lbl>span,.kpi .lbl>.kpi-open{flex:1 1 140px;min-width:0;white-space:normal;overflow-wrap:anywhere}
.kpi .lbl>.kpi-open,.kpi-row .lbl>.kpi-open{display:block}
.kpi .val{font-size:var(--fs-kpi);font-weight:500;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-2);white-space:nowrap;color:var(--fg)}
.kpi .val.dim{color:var(--fg-mute)}
.kpi .val .tag{margin-left:0;align-self:center}
/* KPI values never shrink to heading size to force more cards into one row. */
.kpi .row{display:flex;align-items:center;gap:6px var(--s-2);flex-wrap:wrap;font-size:var(--fs-xs);color:var(--fg-mute);line-height:1.5}
.kpi .row.meta{display:block;white-space:normal;overflow-wrap:anywhere}
.kpi>.spark-wrap{margin-top:auto}
.kpi.click{cursor:pointer;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.kpi.click:hover{border-color:var(--line-2)}
.kpi.active,.kpi-row.active{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.kpi-open{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;border-radius:var(--r-xs);text-transform:inherit;letter-spacing:inherit;font:inherit;color:inherit}
.kpi-open:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kpi-rows{display:grid;background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:4px 16px}
.kpi-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto minmax(0,1.2fr);align-items:center;gap:var(--s-3);min-height:var(--row-calm);padding:7px 2px;border-top:1px solid var(--line-soft);font-size:var(--fs-sm);border-radius:var(--r-xs)}
.kpi-row:first-child{border-top:0}
.kpi-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto minmax(0,1.2fr) auto}
.kpi-row .lbl{display:flex;align-items:center;gap:6px;color:var(--fg-soft);min-width:0;white-space:normal}
.kpi-row .lbl>span,.kpi-row .lbl>.kpi-open{min-width:0;white-space:normal;overflow-wrap:anywhere}
.kpi-row .d{display:flex;justify-content:flex-end;min-width:0}
@media (max-width:640px){.kpi-row .d{justify-content:flex-start}}
.kpi-row .tgt-s{font-size:var(--fs-xs);color:var(--fg-mute);white-space:nowrap;text-align:right}
.kpi-row .val{font-weight:500;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi-row .m{color:var(--fg-mute);font-size:var(--fs-xs);min-width:0;white-space:normal;overflow-wrap:anywhere}
.kpi-row.click,button.kpi-row{cursor:pointer;width:100%;background:transparent;border-left:0;border-right:0;border-bottom:0;text-align:left;color:inherit}
.kpi-row.click:hover,button.kpi-row:hover{background:var(--accent-soft)}
.ctx-n{font-size:var(--fs-2xs);font-weight:600;background:var(--accent-soft);color:var(--fg-soft);border-radius:var(--r-pill);padding:0 6px;text-transform:none;letter-spacing:0}
.kpi-ctx-slot{grid-column:1/-1}
.kc-head{display:flex;gap:var(--s-3);align-items:baseline;margin-bottom:var(--s-3);flex-wrap:wrap}
.kc-head .btn{margin-left:auto}
.kpi-ctx .ctx-lines{padding:0;border:0;box-shadow:none}
.kpi-pick{grid-column:1/-1}
.sample{display:block;font-size:var(--fs-2xs);color:var(--fg-mute);white-space:nowrap}
.num.big{font-size:var(--fs-xl);font-weight:500;line-height:1.15}
/* one small-number component (Včera, Opakovaný nákup, scenario stats): eyebrow label + value; fs-kpi stays for .kpi heroes only */
.mini-num{display:grid;gap:4px;min-width:0}
.mini-num .v,.mini-num>.val{font:500 var(--fs-lg)/1.2 var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--fg)}
.chart-box.mini{height:120px}

/* delta (D12): arrow = direction, colour = verdict; one component for tiles and tables */
.delta{position:relative;display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-xs);font:500 var(--fs-xs)/1 var(--font-sans);font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--bg-elev-2);color:var(--fg-soft)}
.delta.up::before{content:'▲\00a0';font-size:.8em}
.delta.down::before{content:'▼\00a0';font-size:.8em}
.delta.good{background:var(--pos-bg);color:var(--pos-ink)}
.delta.bad{background:var(--neg-bg);color:var(--neg-ink)}
.delta.est,.delta.small,.delta.noise{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg-mute)}
.delta.bare{background:transparent;padding:0;height:auto;box-shadow:none}
.delta-cmp{font-size:var(--fs-xs);color:var(--fg-mute)}
/* old chip (tiles not migrated yet): same look as .delta */
.chip{position:relative;display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-xs);font:500 var(--fs-xs)/1 var(--font-sans);font-variant-numeric:tabular-nums;background:var(--bg-elev-2);color:var(--fg-soft);white-space:nowrap}
.chip.good{background:var(--pos-bg);color:var(--pos-ink)}
.chip.bad{background:var(--neg-bg);color:var(--neg-ink)}
.chip.good::before{content:'▲\00a0';font-size:.8em}
.chip.bad::before{content:'▼\00a0';font-size:.8em}
.chip.good::after,.t td.pos::after{content:' zlepšenie';position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chip.bad::after,.t td.neg::after{content:' zhoršenie';position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chip.est{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--fg-mute)}

/* sparkline */
.spark-wrap{position:relative;display:block;height:36px;width:100%}
.spark{width:100%;height:36px;display:block;overflow:visible}
.spark-line{fill:none;stroke:var(--fg-mute);stroke-width:1.5}
.spark-area{fill:var(--fg-mute);fill-opacity:.07;stroke:none}
.spark-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--fg-mute);transform:translate(-50%,-50%)}
.spark-dot.good{background:var(--pos)}.spark-dot.bad{background:var(--neg)}
.spark-dot.partial{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--fg-faint)}

/* target bar (D13) */
.tgt{display:grid;gap:var(--s-1);margin-top:2px}
.tgt .bar{position:relative;display:block;height:4px;border-radius:2px;background:var(--bg-elev-2);overflow:visible}
.tgt .fill{display:block;height:100%;border-radius:2px;background:var(--fg-mute)}
.tgt.ok .fill,.tgt.watch .fill,.tgt.off .fill{background:var(--fg-mute)}
.tgt .mark{position:absolute;left:80%;top:-3px;width:2px;height:10px;border-radius:1px;background:var(--fg-soft)}
.tgt .small{color:var(--fg-mute)}
.tgt-word{font-weight:500;color:var(--fg-soft)}
.tgt-word[data-tone="neg"],.tgt.off .tgt-word{color:var(--neg-ink)}
.tgt-word[data-tone="warn"],.tgt.watch .tgt-word{color:var(--warn-ink)}
.tgt-word[data-tone="pos"]{color:var(--pos-ink)}

/* ── 9. attention: action cards, calm rows (progressive de-emphasis) ── */
.act-list{display:grid;gap:0;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.act-list>.act{border:0;border-top:1px solid var(--line-soft);border-radius:0;background:transparent;padding:var(--s-4) var(--s-5)}
.act-list>.act:first-child{border-top:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
.act-list>.act:last-child{border-radius:0 0 var(--r-lg) var(--r-lg)}
.act-list>.act:only-child{border-radius:var(--r-lg)}
.act-list>.act[data-tone="neg"]{background:color-mix(in oklab,var(--neg) 3%,var(--surface))}
.act-list>*,.sec>*{min-width:0}   /* grid items otherwise grow to their longest title (mobile overflow, 4. 11.) */
.act-title{overflow-wrap:anywhere}
.act{position:relative;display:grid;gap:6px;background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-act);padding:16px 18px;box-shadow:none;min-width:0;overflow:hidden}
.act::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.act[data-tone="neg"]::before{background:var(--neg)}
.act[data-tone="warn"]::before{background:var(--warn)}
.act[data-tone="pos"]::before{background:var(--pos)}
.act:hover{box-shadow:none}
.act.compact{padding:12px 14px;box-shadow:none;background:var(--bg-elev)}
.act.compact::before{display:none}
.act.compact:hover{transform:none;box-shadow:none;border-color:var(--line-2)}
.act-head{display:flex;align-items:baseline;gap:var(--s-2) var(--s-3);flex-wrap:wrap;min-width:0}
.act-sev{font:600 var(--fs-xs)/1.4 var(--font-sans);text-transform:none;letter-spacing:0;color:var(--fg-soft);min-width:5em}
.act[data-tone="neg"] .act-sev{color:var(--neg-ink)}
.act[data-tone="warn"] .act-sev{color:var(--warn-ink)}
.act-title{font-size:var(--fs-md);font-weight:600;flex:1 1 220px;min-width:0}
.act-meta{font-size:var(--fs-xs);color:var(--fg-mute);margin-left:auto}
.act-detail{font-size:var(--fs-sm);color:var(--fg-soft);overflow-wrap:anywhere}
.act-next{font-size:var(--fs-sm);color:var(--fg-soft)}
.act-actions{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-1)}
.calm-list{list-style:none;margin:0;padding:4px 16px;background:var(--surface);border:1px solid var(--card-line);border-radius:var(--r-lg);box-shadow:var(--sh-card)}
.sec.quiet .calm-list,.calm-list.bare{background:transparent;border:0;box-shadow:none;padding:0}
.calm-row{display:flex;align-items:center;gap:var(--s-2) var(--s-3);min-height:var(--row-calm);padding:7px 2px;border-top:1px solid var(--line-soft);font-size:var(--fs-sm);min-width:0}
.calm-row:first-child{border-top:0}
.calm-row:has(.btn){padding-block:4px}
.calm-row>a{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex:1;min-width:0;color:inherit;text-decoration:none;margin:-7px -2px;padding:7px 2px;border-radius:var(--r-xs);min-height:var(--row-calm)}
.calm-row>a:hover{background:var(--accent-soft)}
.calm-row .t{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;color:var(--fg)}
.calm-row .n{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.calm-row .t{min-width:min(40%,12rem)}   /* the label keeps its room; long meta gets the ellipsis (mobile, 4. 11.) */
.calm-row .m{color:var(--fg-mute);font-size:var(--fs-xs);white-space:normal;flex:0 1 45%;min-width:0;overflow-wrap:anywhere}
.empty-line{margin:0;color:var(--fg-mute);font-size:var(--fs-sm)}

/* tag, dot, count, new-dot, dq (§3.4) */
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;color:var(--fg-soft);font:500 var(--fs-xs)/1 var(--font-sans);white-space:nowrap;letter-spacing:0;text-transform:none}
.tag[data-tone="neg"]{background:var(--neg-bg);border-color:transparent;color:var(--neg-ink)}
.tag[data-tone="warn"]{background:var(--warn-bg);border-color:transparent;color:var(--warn-ink)}
.tag[data-tone="pos"]{background:var(--pos-bg);border-color:transparent;color:var(--pos-ink)}
.tag.sm{height:16px;padding:0 6px;border:0;background:var(--bg-elev-2);color:var(--fg-mute);font-size:var(--fs-2xs);font-weight:500;text-transform:lowercase}
/* old pill (pages not migrated yet): same look as .tag */
.pill{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--fg-soft);font:500 var(--fs-xs)/1 var(--font-sans);white-space:nowrap;text-transform:none;letter-spacing:0}
.pill.high,.pill.problem{background:var(--neg-bg);color:var(--neg-ink);border-color:transparent}
.pill.medium,.pill.warning{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
.pill.role-admin{background:var(--accent-soft);color:var(--fg-soft)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--fg-faint);flex:none}
.dot.ok{background:var(--fg-faint)}
.dot.warning{background:var(--warn);border-radius:1px;transform:rotate(45deg) scale(.92)}
.dot.problem{background:var(--neg);border-radius:1px}
.dot.pending{background:transparent;box-shadow:inset 0 0 0 1.5px var(--fg-ghost)}
.dot.live{background:var(--fg-mute);animation:breathe 2.4s var(--ease) infinite}
@keyframes breathe{50%{opacity:.35}}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:var(--r-pill);background:var(--bg-elev-2);color:var(--fg-soft);font:600 var(--fs-2xs)/1 var(--font-sans);font-variant-numeric:tabular-nums}
.count.neg{background:var(--neg-bg);color:var(--neg-ink)}
.new-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--brand);vertical-align:middle}
.dq{display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:var(--r-xs);background:transparent;vertical-align:middle;flex:none}
.dq>span{width:10px;height:10px;background:var(--warn);border-radius:1px;transform:rotate(45deg)}
.dq:hover{background:var(--warn-bg)}

/* ── 10. controls (§3.6) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--ctl-h);height:auto;padding:var(--s-2) 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--fg);font:500 var(--fs-sm)/1 var(--font-sans);text-decoration:none;white-space:normal;text-align:center;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.btn:hover{background:var(--surface-hi);color:var(--fg)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn[aria-busy="true"]{cursor:progress}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--accent-ink)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--fg-soft)}
.btn.ghost:hover{background:var(--accent-soft);color:var(--fg)}
.btn.danger{color:var(--neg-ink);border-color:var(--neg-line)}
.btn.danger:hover{background:var(--neg-bg)}
.btn.small,.chip-btn{min-height:var(--ctl-h-sm);height:auto;padding:6px 10px;border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1.3}
.btn .ico{color:currentColor}
.icon-btn{display:inline-grid;place-items:center;width:var(--ctl-h);height:var(--ctl-h);padding:0;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--fg-mute)}
.icon-btn:hover{background:var(--accent-soft);color:var(--fg)}
.topbar .icon-btn{width:var(--ctl-h-top);height:var(--ctl-h-top)}
.icon-btn.small{width:var(--ctl-h-sm);height:var(--ctl-h-sm)}
.input,.select{height:var(--ctl-h);padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--fg);font:400 var(--fs-sm)/1.3 var(--font-sans);max-width:100%}
.input{width:100%}
.select{padding-right:28px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--surface) no-repeat right 8px center/12px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23808089' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.select.sm,.input.sm{height:var(--ctl-h-top)}
.input.sm{min-width:120px}
.input:hover,.select:hover{border-color:var(--line-2)}
.input:focus-visible,.select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
textarea.input{height:auto;min-height:80px;padding:8px 10px;resize:vertical;line-height:1.5}
.input[aria-invalid="true"]{border-color:var(--neg-line);box-shadow:0 0 0 3px var(--neg-bg)}
.field-err{color:var(--neg-ink);font-size:var(--fs-xs);white-space:normal;text-align:left}
.field-err:empty{display:none}
.label{display:block;margin-bottom:6px}
.chip-btn{display:inline-flex;align-items:center;gap:var(--s-2);border:1px solid var(--line);background:var(--surface);color:var(--fg-soft);font-weight:500;cursor:pointer}
.chip-btn.on{border-color:var(--accent-line);color:var(--fg);background:var(--accent-soft)}
.chip-btn .n{font-size:var(--fs-2xs);color:var(--fg-mute)}
/* the one segmented control (.seg) */
.seg{display:inline-flex;align-items:center;gap:2px;height:var(--ctl-h);padding:3px;border-radius:var(--r-sm);background:var(--bg-elev-2);border:1px solid var(--line-soft);max-width:100%;overflow-x:auto;scrollbar-width:none;flex:none}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:var(--r-xs);background:transparent;color:var(--fg-mute);font:500 var(--fs-sm)/1 var(--font-sans);white-space:nowrap}
.seg button:hover{color:var(--fg)}
.seg button.on,.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--sh-card),0 0 0 1px var(--line-soft)}
.seg.sm{height:var(--ctl-h-top)}
.seg.sm button{height:24px;padding:0 10px;font-size:var(--fs-xs)}
.seg button:disabled{opacity:.45;cursor:not-allowed}
.unit-row{display:flex;gap:var(--s-2);align-items:center;margin:0 0 var(--s-3)}
/* "?" next to a label: a native popover with the definition (centred, light-dismiss) */
.def-btn{position:relative;flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--fg-mute);font:600 10px/1 var(--font-sans);padding:0;display:inline-grid;place-items:center;text-transform:none;letter-spacing:0}
.def-btn:hover{border-color:var(--fg-mute);color:var(--fg)}
.def-btn::after{content:'';position:absolute;inset:-6px;border-radius:50%}
.def-pop{display:none;border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-4) var(--s-5);width:min(460px,calc(100vw - 32px));background:var(--surface);color:var(--fg);box-shadow:var(--sh-pop);font:400 var(--fs-sm)/1.55 var(--font-sans);text-transform:none;letter-spacing:0}
.def-pop:popover-open{display:grid;gap:var(--s-2)}
.def-pop h3{font-size:var(--fs-md)}
.def-pop::backdrop{background:var(--veil)}
.dq-pop{width:min(360px,calc(100vw - 32px))}

/* filter above long lists (ui.js filterBox) */
.flt{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.flt .flt-in{flex:0 1 320px;min-width:0}
.flt-n{flex:none;min-width:10ch;font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--fg-mute);white-space:nowrap}
.flt .flt-in::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-right:-4px;cursor:pointer;background:var(--fg-mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat}
details>.flt,details>.flt-none{margin:var(--s-2) 0}
.flt-out{display:none!important}

/* ── 11. tables (§3.6) ── */
.tbl-wrap{position:relative;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:none}
.card .tbl-wrap{border:0;border-radius:0;background:transparent;box-shadow:none}
.tbl-wrap.fit{width:fit-content;max-width:100%}
.tbl-wrap.fit table.t{width:auto}
table.t{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
.t th{height:44px;padding:var(--s-3) var(--s-4);background:var(--bg-elev);text-align:right;white-space:normal;max-width:240px;vertical-align:bottom;line-height:1.4;min-width:5.5em;border-bottom:1px solid var(--line);font-size:var(--fs-sm);font-weight:500;color:var(--fg-soft)}
.t th:first-child,.t td:first-child{text-align:left}
.t th:first-child{white-space:normal}
.t td{height:var(--row-table);padding:var(--s-3) var(--s-4);border-top:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--fg)}
.t tbody tr:first-child td{border-top:0}
.t td.name{white-space:normal;min-width:180px;max-width:320px;overflow-wrap:anywhere;font-weight:500}
.t td.name>*{white-space:normal;overflow-wrap:anywhere}
.t th.txt,.t td.txt{text-align:left}
.t td.txt{white-space:normal;max-width:360px;overflow-wrap:anywhere}
.t.wrap td.txt,.t.wrap td.name{white-space:normal;overflow-wrap:anywhere;padding-block:6px}
.t tr.click{cursor:pointer}
.t tr.click:hover td,.t tr:focus-within td{background:var(--accent-soft)}
.t td.name a.row-link{color:inherit;text-decoration:none}
.t tr.click:hover td.name a.row-link,.t td.name a.row-link:focus-visible{text-decoration:underline;text-decoration-color:var(--fg-mute)}
.t tr.group td{height:40px;padding-block:var(--s-2);background:var(--bg-elev-2);font-weight:600;color:var(--fg)}
.t tr.group .grp-lbl{position:sticky;left:12px;display:inline-block}
.t .pos{color:var(--pos-ink)}.t .neg{color:var(--neg-ink)}
.t td.dim,.t td.running{color:var(--fg-mute)}
.t td.spk{width:120px;padding-block:2px}
.t td.spk .spark-wrap,.t td.spk .spark{height:28px}
.t tfoot td{position:sticky;bottom:0;background:var(--bg-elev);font-weight:600;border-top:1px solid var(--line)}
.t tr.sub td{border-top:0;height:auto;padding-top:0;padding-bottom:var(--s-2);white-space:normal;text-align:left}
.t tr.sub .ctx-lines{padding:0 4px;box-shadow:none}
.t tr.off td{color:var(--fg-mute)}
.t tr.off td strong{font-weight:400}
.t .btn.small{margin-left:var(--s-1)}
.t th.pri{color:var(--fg-soft)}
.t tr:not(.group) td.pri{background:var(--accent-soft)}
.t th[title]{cursor:help;text-decoration:underline dotted;text-decoration-color:var(--line-2);text-underline-offset:3px}
.tbl-wrap.sticky1 .t th:first-child,.tbl-wrap.sticky1 .t td:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
.tbl-wrap.sticky1 .t th:first-child{background:var(--bg-elev);z-index:2}
.tbl-wrap.sticky1 .t tr.group td:first-child{background:var(--bg-elev-2)}
.tbl-wrap.scroll-y{max-height:75vh}
.tbl-wrap.scroll-y .t th{position:sticky;top:0;z-index:2}
.tbl-wrap.scroll-y .t th:first-child{z-index:3}
.tbl-notes{display:grid;gap:var(--s-1);margin-top:calc(-1 * var(--s-1));padding:0 var(--s-1);font-size:var(--fs-xs);color:var(--fg-mute)}

/* ── 12. notices, empty, skeleton ── */
.notice{position:relative;font-size:var(--fs-sm);line-height:1.5;border-radius:var(--r-md);padding:10px 14px 10px 17px;background:var(--bg-elev);color:var(--fg-soft);border:1px solid var(--line-soft);overflow-wrap:anywhere}
.notice::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--fg-ghost)}
.notice.warn::before{background:var(--warn)}
.notice.err::before{background:var(--neg)}
.notice>b:first-child{color:var(--fg);font-weight:600}
.notice.warn>b:first-child{color:var(--warn-ink)}
.notice.err>b:first-child{color:var(--neg-ink)}
.notice .btn{margin-left:var(--s-2);vertical-align:middle}
.empty{border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);color:var(--fg-mute);font-size:var(--fs-sm);background:var(--bg-elev);border:1px solid var(--card-line);display:grid;gap:var(--s-1)}
.skel{background:var(--bg-elev-2);border-radius:var(--r-sm);animation:pulse 1.6s ease-in-out infinite}
.skel-row{height:var(--row-calm);margin:4px 0}
.skel-row.tbl{height:var(--row-table)}
.skel-tile{height:132px;border-radius:var(--r-lg)}
.skel-list{display:grid;gap:var(--s-1)}
@keyframes pulse{50%{opacity:.45}}

/* ── 13. details chevron (one mask chevron, 0 → 90°) ── */
:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5L8 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
details>summary{cursor:pointer;list-style:none;min-height:36px;padding-block:var(--s-2);border-radius:var(--r-xs)}
details>summary:hover{color:var(--fg)}
details>summary:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
details>summary::-webkit-details-marker{display:none}
details:not(.sec)>summary::before{content:'';display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--fg-mute);-webkit-mask:var(--chev) center/12px no-repeat;mask:var(--chev) center/12px no-repeat;transition:transform var(--t-fast) var(--ease);flex:none}
details[open]:not(.sec)>summary::before{transform:rotate(90deg)}
details[open]>summary{margin-bottom:var(--s-2)}
/* Quiet disclosure: named summary and one continuous body, shared by internal and client views. */
details.fold{border-block:1px solid var(--line);background:transparent;min-width:0}
details.fold>summary{display:flex;align-items:center;gap:var(--s-2);min-height:44px;padding:var(--s-3) 0;font-size:var(--fs-sm);font-weight:500;color:var(--fg-soft)}
details.fold>summary::before{margin-right:0}
details.fold>summary:hover{color:var(--fg);background:var(--accent-soft)}
details.fold[open]>summary{color:var(--fg);font-weight:600;border-bottom:1px solid var(--line-soft)}
details.fold>div{padding-block:var(--s-3);min-width:0}
details.fold .sec{margin-block:var(--s-4)}
details.card{padding:12px 14px}
details.card+details.card{margin-top:var(--s-2)}
details.how{margin-top:var(--s-2)}
details.how p{margin:var(--s-1) 0 0}

/* ── 14. steps, dialog, palette, matrix, toast ── */
.steps{position:sticky;top:calc(var(--topbar-h) + var(--s-2));z-index:20;list-style:none;margin:0;padding:4px;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  background:color-mix(in oklch,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--sh-card)}
.steps li{flex:1 1 0;min-width:140px}
.steps button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:var(--s-2);align-items:center;width:100%;padding:6px 10px;border:0;border-radius:var(--r-sm);background:transparent;text-align:left;color:var(--fg-soft)}
.steps button:hover{background:var(--accent-soft)}
.steps button[aria-current="step"]{background:var(--accent-soft);color:var(--fg)}
.step-dot{grid-row:1/3;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;background:var(--bg-elev-2);color:var(--fg-mute);font:600 var(--fs-2xs)/1 var(--font-sans)}
.steps button.done .step-dot{background:var(--accent);color:var(--accent-ink)}
.step-l{font-size:var(--fs-sm);font-weight:600;white-space:normal}
.step-s{font-size:var(--fs-xs);color:var(--fg-mute)}
[data-step]{scroll-margin-top:calc(var(--topbar-h) + 72px)}
.dlg,.copy-dlg{border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-5);background:var(--surface);color:var(--fg);width:min(480px,calc(100vw - 32px));box-shadow:var(--sh-pop)}
.copy-dlg{width:min(640px,calc(100vw - 32px))}
.dlg[open],.copy-dlg[open]{display:grid;gap:var(--s-3)}
.dlg::backdrop,.copy-dlg::backdrop{background:var(--veil);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dlg-title{font-size:var(--fs-lg);font-weight:600}
.dlg-body{color:var(--fg-soft);font-size:var(--fs-sm);display:grid;gap:var(--s-2)}
.dlg-actions{display:flex;justify-content:flex-end;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-1)}
.palette{width:min(560px,calc(100vw - 24px));padding:0;margin-top:12vh;gap:0!important;overflow:hidden}
.pal-in{display:flex;align-items:center;gap:var(--s-2);height:44px;padding:0 var(--s-4);border-bottom:1px solid var(--line-soft);color:var(--fg-mute)}
.pal-input{flex:1;border:0;background:transparent;height:100%;font-size:var(--fs-md);color:var(--fg);outline:none}
.pal-input:focus-visible{outline:none}
.pal-list{list-style:none;margin:0;padding:6px;max-height:min(420px,60vh);overflow:auto}
.pal-grp{padding:10px 9px 4px}
.pal-item{display:flex;align-items:center;gap:9px;min-height:var(--row-calm);padding:0 9px;border-radius:var(--r-sm);color:var(--fg-soft);cursor:pointer;font-size:var(--fs-sm)}
.pal-item .ico{color:var(--fg-mute)}
.pal-item .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.pal-item .h{font-size:var(--fs-xs);color:var(--fg-mute);white-space:nowrap}
.pal-item.on{background:var(--accent-soft)}
.pal-none{padding:var(--s-4);color:var(--fg-mute);font-size:var(--fs-sm)}
.pal-foot{display:flex;align-items:center;gap:6px;padding:8px var(--s-4);border-top:1px solid var(--line-soft);font-size:var(--fs-2xs);color:var(--fg-mute)}
.matrix{border-collapse:collapse;font-size:var(--fs-xs)}
.matrix th,.matrix td{height:24px;min-width:24px;padding:0 6px;text-align:center;border-top:1px solid var(--line-soft)}
.matrix th:first-child,.matrix td:first-child{position:sticky;left:0;z-index:1;background:var(--surface);text-align:left;white-space:nowrap}
.toasts{position:fixed;right:var(--s-4);bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px));z-index:99;display:grid;gap:var(--s-2);justify-items:end;max-width:min(440px,calc(100vw - 32px))}
.toast{display:flex;gap:var(--s-3);align-items:center;background:var(--accent);color:var(--accent-ink);padding:8px 10px 8px 14px;border-radius:var(--r-md);font-size:var(--fs-sm);box-shadow:var(--sh-pop)}
.toast.err{background:var(--neg);color:#fff}
.toast .toast-btn,.toast-btn{background:transparent;border:1px solid currentColor;color:inherit;height:var(--ctl-h-sm);padding:0 10px;border-radius:7px;font-weight:500;font-size:var(--fs-xs)}
.toast .toast-btn:hover{background:oklch(1 0 0/.12);color:inherit}
.toast-x{background:transparent;border:0;color:inherit;font-size:var(--fs-lg);line-height:1;padding:0 4px}

/* ── 15. charts ── */
.chart-box{position:relative;height:240px}
.chart-box.sm{height:200px}
.chart-box.xs{height:140px}
.chart-data{margin-top:var(--s-2);font-size:var(--fs-xs);color:var(--fg-mute)}
.chart-data .tbl-wrap{margin-top:var(--s-2);max-height:280px}
.sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.sm-cell{margin:0;display:grid;gap:var(--s-1);min-width:0}
.mini-chart{padding:12px 14px}
.legend{display:flex;gap:var(--s-4);color:var(--fg-mute);font-size:var(--fs-xs)}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:var(--s-1);vertical-align:-1px}
.legend .sw.a{background:var(--fg)}.legend .sw.b{background:var(--fg-faint)}
.daily-box{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line-soft)}
.fn-row{display:grid;grid-template-columns:150px minmax(0,1fr) 90px 64px;gap:var(--s-3);align-items:center;font-size:var(--fs-sm)}
.fn-row .num{text-align:right}
.fn-bar{height:8px;border-radius:var(--r-pill);background:var(--bg-elev-2);overflow:hidden;display:block}
.fn-bar span{display:block;height:100%;background:var(--fg-soft);border-radius:var(--r-pill)}
.fn-bar.two{background:var(--fg-ghost)}
.fn-bar.two span{background:var(--fg-faint);border-radius:var(--r-pill) 0 0 var(--r-pill)}

/* ── 16. page building blocks still drawn by pages and modules (migrated to tokens; owners may move them) ── */
.ok-line{margin:0;color:var(--fg);line-height:1.8}
.ok-line a{color:inherit}
.todo{list-style:none;margin:0;padding:0;display:grid}
.todo li{display:flex;gap:var(--s-2) var(--s-3);align-items:center;min-height:var(--row-calm);padding:7px 2px;border-top:1px solid var(--line-soft);font-size:var(--fs-sm)}
.todo li:first-child{border-top:0}
.todo .tx{flex:1 1 260px;min-width:0}
.uz-steps{list-style:none;margin:0;padding:0;display:flex;gap:var(--s-2);flex-wrap:wrap}
.uz-steps li{display:flex;gap:var(--s-2);align-items:center;font-size:var(--fs-xs);height:28px;padding:0 10px 0 3px;border:1px solid var(--line-soft);border-radius:var(--r-pill);background:var(--surface)}
.uz-steps .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg-elev-2);font-size:var(--fs-2xs);font-weight:600}
.uz-steps li.ok .n{background:var(--accent);color:var(--accent-ink)}
.uz-group summary{display:flex;gap:var(--s-2);align-items:baseline;flex-wrap:wrap}
.uz-bulk{margin:var(--s-2) 0}
.uz-group .ctx-lines{box-shadow:none;border:0;padding:0}
.uz-preview{width:100%;height:640px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.help-card{display:grid;gap:var(--s-2)}
.help-card .row-btns{gap:var(--s-4)}
/* month banner (pages still drawing it until PAGES moves it to the page head) */
.banner{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;font-size:var(--fs-sm);padding:var(--s-2) var(--s-4);border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--bg-elev);color:var(--fg-soft)}
.banner .bar{flex:0 0 140px;height:2px;border-radius:2px;background:var(--bg-elev-2);overflow:hidden}
.banner .bar span{display:block;height:100%;background:var(--fg-mute)}
.banner .small{flex-basis:100%;color:var(--fg-mute)}
.banner .upd{margin-left:auto;font-size:var(--fs-xs);color:var(--fg-mute)}
.banner .upd .btn{margin-left:var(--s-2)}
/* recommendations */
.rec{display:grid;gap:var(--s-2);padding:16px 20px}
.rec h3{font-size:var(--fs-md)}
.rec .meta,.rec-body .meta{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;font-size:var(--fs-xs);color:var(--fg-mute)}
.rec.closed h3,.rec-row.closed .t{color:var(--fg-mute)}
.rec dl,.rec-body dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s-1) var(--s-4);margin:0;font-size:var(--fs-sm)}
.rec dt,.rec-body dt{padding-top:3px}
.rec dd,.rec-body dd{margin:0;min-width:0}
.rec dd p,.rec-body dd p{margin:0}
.rec dd ul,.rec-body dd ul{margin:0;padding-left:1.2em}
.rec-body dd .chip{display:inline-flex;white-space:normal;height:auto;min-height:20px;margin:0 var(--s-1) var(--s-1) 0}
.ctx-line summary .chip{white-space:normal;overflow-wrap:anywhere;max-width:100%;height:auto;min-height:20px}
.rec-text p{margin:0}
.rec-list{padding:4px 16px}
.rec-row+.rec-row{border-top:1px solid var(--line-soft)}
.rec-row summary{display:flex;gap:var(--s-2) var(--s-3);align-items:center;min-height:var(--row-calm);padding:7px 2px;min-width:0}
.rec-row summary .t{font-weight:500;flex:1 1 280px;min-width:0;white-space:normal;overflow-wrap:anywhere}
.rec-row summary>.small{white-space:normal;flex:0 1 30%;min-width:0;overflow-wrap:anywhere}
.rec-body{display:grid;gap:var(--s-4);padding:var(--s-3) var(--s-4) var(--s-5);margin-bottom:var(--s-3);background:var(--bg-elev);border-radius:var(--r-sm)}
.rec-row[open]>summary .t{font-weight:600}
.rec-row summary:hover,.ctx-line summary:hover{background:var(--accent-soft)}
/* timeline */
.tl{list-style:none;margin:0;padding:0;display:grid}
.tl li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-4);min-height:var(--row-calm);padding:7px 0;border-top:1px solid var(--line-soft);font-size:var(--fs-sm)}
.tl li:first-child{border-top:0}
.tl.card{padding:4px 16px}
.tl .d{font-size:var(--fs-xs);color:var(--fg-mute);font-variant-numeric:tabular-nums}
.tl li>div{min-width:0;overflow-wrap:anywhere}
/* one-line timeline (events): date · kind tag · title, the detail in the row's title */
.tl.one li{grid-template-columns:96px auto minmax(0,1fr);align-items:center;gap:var(--s-3)}
.tl.one .tl-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chg-day summary{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:baseline}
.chg-day .chg-list{margin-top:var(--s-2)}
.chg-items summary{color:var(--fg-mute);margin-top:var(--s-1)}
.chg-items ul{margin:var(--s-1) 0 0;padding-left:1.1em;display:grid;gap:var(--s-1)}
/* forms */
.share-form{display:grid;grid-template-columns:fit-content(14em) minmax(0,360px);gap:var(--s-4) var(--s-5);align-items:start}
.share-form fieldset{grid-column:1/-1}
.share-form>div{grid-column:2}
.user-form{max-width:760px}
.uf-grid{display:grid;grid-template-columns:fit-content(12em) minmax(0,420px);gap:var(--s-4) var(--s-5);align-items:start}
.uf-set{display:grid;gap:6px}
.uf-set legend{margin-bottom:var(--s-1);color:var(--fg-mute)}
.opt{display:inline-flex;align-items:flex-start;gap:var(--s-2);line-height:1.4}
.opt input{margin-top:3px;flex:none}
.uc-list{display:grid;gap:6px}
.uc-row{display:grid;gap:var(--s-1);min-height:var(--row-calm);padding:7px 0;border-top:1px solid var(--line-soft)}
.uc-row:first-child{border-top:0}
.uc-mk{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);align-items:center;padding-left:var(--s-6)}
.uc-pages{display:flex;flex-wrap:wrap;gap:6px var(--s-4)}
.log-list .tx{min-width:0;overflow-wrap:anywhere}
/* misc data blocks */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s-2) var(--s-4);margin:0 0 var(--s-3);font-size:var(--fs-sm)}
.kv dt{padding-top:2px}
.kv dd{margin:0}
.kv-row{display:flex;gap:var(--s-1) var(--s-5);flex-wrap:wrap;font-size:var(--fs-sm);color:var(--fg-mute)}
.kv-row strong{color:var(--fg)}
.gloss{display:grid;grid-template-columns:minmax(160px,max-content) minmax(0,1fr);gap:var(--s-2) var(--s-5);margin:0;font-size:var(--fs-sm)}
.gloss dt{font-weight:600;color:var(--fg)}
.gloss dd{margin:0;max-width:44em}
.sum-foot{display:flex;gap:var(--s-2) var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line-soft)}
.sum-foot .row-btns{margin-left:auto}
.signals{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2);font-size:var(--fs-sm)}
.signals a{margin-left:var(--s-1)}
.proj-card{text-decoration:none;color:inherit;display:grid;gap:var(--s-2)}
.proj-head{display:flex;align-items:center;gap:var(--s-2)}
.proj-head .pill,.proj-head .tag{margin-left:auto}
.data-state{display:flex;gap:var(--s-3) var(--s-5);flex-wrap:wrap;align-items:center}
.data-state .push{display:inline-flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.note-under{margin:var(--s-3) 0 0}
.share-url{overflow-wrap:anywhere}
.written{color:var(--fg-mute)}
.written.stale{color:var(--warn-ink)}
/* context lines (why and because of what) */
.ctx-list{display:grid;gap:var(--s-2)}
.ctx{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:12px 14px;display:grid;gap:var(--s-1);min-width:0}
.mkt-ctx .ctx{border:0;border-top:1px solid var(--line-soft);border-radius:0;padding:var(--s-3) 0 0;background:transparent}
.mkt-ctx .chips{margin-bottom:var(--s-3)}
.ctx.compact{padding:var(--s-2) var(--s-3)}
.ctx-head{display:flex;gap:var(--s-2);align-items:baseline;flex-wrap:wrap}
.ctx-head strong{font-size:var(--fs-md)}
.ctx-body p{margin:0}
.ctx-ev summary{font-size:var(--fs-xs);color:var(--fg-mute)}
.ctx-ev ul{margin:var(--s-1) 0 0;padding-left:1.1em;font-size:var(--fs-xs);color:var(--fg-mute)}
.ctx-tools{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;margin-top:var(--s-1)}
.ctx-inline{display:grid;gap:var(--s-1);font-size:var(--fs-sm);white-space:normal}
.ctx-lines{display:grid;padding:4px 16px}
.ctx-lines>.written{padding:var(--s-2) 2px 0;font-size:var(--fs-xs)}
.ctx-lines>.more{padding:var(--s-2) 2px var(--s-3)}
.ctx-line summary{display:flex;gap:var(--s-2);align-items:center;min-height:var(--row-calm);padding:7px 2px;min-width:0}
.ctx-line summary .t{font-weight:500;font-size:var(--fs-sm);flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere}
.ctx-line .ctx-body,.ctx-line>ul,.ctx-line>p,.ctx-line .ctx-tools{padding:0 2px var(--s-3) 22px}
.ctx-line+.ctx-line{border-top:1px solid var(--line-soft)}
/* old project status tiles (Prehľad "Stav dnes" until attentionHtml replaces it) */
.control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
/* scenario blueprint (D25: 4 node groups + icon; findings warn; unreachable dashed) */
.tag.sm.kind{color:color-mix(in oklab,var(--c,var(--k-data)) 80%,var(--fg));background:color-mix(in oklab,var(--c,var(--k-data)) 10%,transparent)}
.k-trigger{--c:var(--k-trigger)}
.k-email,.k-sms{--c:var(--k-message)}
.k-cond,.k-wait,.k-split,.k-fork,.k-limit{--c:var(--k-logic)}
.k-webhook,.k-set,.k-event,.k-label,.k-other{--c:var(--k-data)}
/* context kinds (prečo / kontext / sledovať / v poriadku): neutral words, only "sledovať" carries warn */
.ctx{--c:var(--fg-mute)}
.k-why,.k-ctx,.k-okk{--c:var(--fg-mute)}
.k-watch{--c:var(--warn)}
.bp-toc{position:sticky;top:var(--topbar-h);z-index:5;display:flex;gap:var(--s-1);flex-wrap:wrap;background:color-mix(in oklch,var(--bg) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:var(--s-2) 0;border-bottom:1px solid var(--line-soft)}
.bp-toc button{height:var(--ctl-h-sm);border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:0 12px;font-size:var(--fs-xs);font-weight:500;color:var(--fg-soft)}
.bp-toc button:hover{border-color:var(--line-2);color:var(--fg)}
.bp-tools{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.bp-legend{display:flex;gap:var(--s-2);flex-wrap:wrap}
.bp-tree{padding:var(--s-3) var(--s-4);display:grid;gap:2px}
.bp-row{display:flex;gap:var(--s-2);align-items:flex-start;padding:var(--s-2);margin-left:calc(var(--d,0) * 18px);border-left:3px solid color-mix(in oklch,var(--c,var(--line-2)) 55%,var(--line-2));border-radius:0 var(--r-sm) var(--r-sm) 0;scroll-margin-top:calc(var(--topbar-h) + 64px)}
.bp-row:focus{outline:2px solid var(--brand);outline-offset:2px}
.bp-row.ref{border-left-color:transparent;padding:2px var(--s-2)}
.bp-row.off{border-left-style:dashed}
.bp-row.off .bp-node,.bp-row.off .bp-sum{color:var(--fg-mute)}
.bp-row.has-finding{background:var(--warn-bg)}
.bp-row.flash{background:var(--accent-soft);transition:background .3s}
.bp-row .br{font-size:var(--fs-2xs);font-weight:500;color:var(--fg-soft);background:var(--bg-elev-2);border-radius:var(--r-xs);padding:2px 6px;white-space:nowrap;margin-top:2px}
.bp-node{display:grid;gap:var(--s-1);min-width:0;flex:1}
.bp-head{display:flex;gap:var(--s-2);align-items:baseline;flex-wrap:wrap}
.bp-head .nid{font-size:var(--fs-xs);color:var(--fg-mute)}
.bp-sum{font-size:var(--fs-sm);color:var(--fg);overflow-wrap:anywhere}
.bp-sum.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;border-radius:var(--r-xs)}
.bp-sum.clamp.open{display:block}
.bp-note{font-size:var(--fs-xs);background:var(--bg-elev-2);color:var(--fg-soft);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3)}
.bp-more summary{font-size:var(--fs-xs);color:var(--fg-mute)}
.bp-more pre,.email-text{white-space:pre-wrap;font-size:var(--fs-xs);background:var(--bg-elev-2);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);max-height:320px;overflow:auto;margin:var(--s-1) 0 0}
.bp-tree[data-f="email"] .bp-row:not(.k-email):not(.k-sms):not(.k-trigger){display:none}
.bp-tree[data-f="act"] .bp-row.k-cond,.bp-tree[data-f="act"] .bp-row.ref{display:none}
.bp-tree[data-f="find"] .bp-row:not(.has-finding){display:none}
.bp-tree[data-f="email"] .bp-row,.bp-tree[data-f="act"] .bp-row,.bp-tree[data-f="find"] .bp-row{margin-left:0}
.nref{font:500 var(--fs-xs)/1.4 var(--font-mono);background:var(--bg-elev-2);color:var(--fg-soft);border:0;border-radius:var(--r-xs);padding:2px var(--s-2);margin:2px 0}
.nref:hover{background:var(--accent-soft);color:var(--fg)}
.sc-head,.sc-card{display:grid;gap:var(--s-3)}
.sc-head .meta,.sc-card .meta,.finding .meta{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.finding{display:grid;gap:var(--s-1);padding:12px 14px}
/* annotations (views/annot.js) */
.annot{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-1);color:var(--fg-mute);font-size:var(--fs-xs)}
.annot li{display:flex;gap:var(--s-2);align-items:baseline}
.annot .n{font-size:var(--fs-2xs);font-weight:600;background:var(--bg-elev-2);border-radius:var(--r-xs);padding:1px 6px;color:var(--fg)}
.annot .d{font-variant-numeric:tabular-nums}
/* "Opýtaj sa na dáta" (app/api/ask.js) */
.ask-form{display:flex;gap:var(--s-2);align-items:center}
.ask-form .input{flex:1}
.ask-log{display:grid;gap:var(--s-3);margin:var(--s-3) 0 var(--s-1)}
.ask-log:empty{display:none}
.ask-item{border-top:1px solid var(--line-soft);padding-top:10px}
.ask-q{font-weight:600;margin-bottom:var(--s-1)}
.ask-a p{margin:0 0 6px}

/* ── 17. login ── */
.login{min-height:100vh;display:grid;place-items:center;padding:var(--s-6) var(--s-4);background:var(--bg)}
.login .box{width:min(420px,100%);display:grid;gap:var(--s-3);background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xl);padding:32px 28px;box-shadow:var(--sh-rich)}
.login h1{font-size:var(--fs-xl);font-weight:500;letter-spacing:-.022em}
.login-brand{display:flex;gap:var(--s-2);align-items:center;font-size:var(--fs-sm)}
.login label{font-size:var(--fs-xs);color:var(--fg-mute);margin-bottom:-6px}
.login .btn{width:100%}
#code-step:not([hidden]){display:contents}

/* ── 18. client live report (share page, always light) ── */
body.share-mode{background:var(--bg)}
.share{max-width:1200px;margin:0 auto;padding:var(--s-8) var(--s-6) var(--s-14);display:grid;gap:var(--gap-page)}
.share>*{min-width:0}
.share-head{display:flex;gap:var(--s-4);align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.share-head h1{font-size:var(--fs-xl);font-weight:500;letter-spacing:-.022em}
.share-meta{display:flex;gap:var(--s-1) var(--s-3);align-items:center;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--fg-mute);margin-top:var(--s-2)}
.share-meta strong{color:var(--fg)}
.share .t tr.sub td{border-top:0;padding-top:0}
.share-why{display:grid;gap:var(--s-1);font-size:var(--fs-sm);white-space:normal;color:var(--fg)}
.share h3{font-size:var(--fs-md);margin-top:var(--s-2)}
.share .kpi .row strong{color:var(--fg);font-weight:500}
.share-gloss{padding:12px 20px}
.share-gloss summary{display:flex;gap:var(--s-3);align-items:baseline;flex-wrap:wrap}
.share-gloss dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--s-2) var(--s-5);margin:var(--s-3) 0 var(--s-1);font-size:var(--fs-sm)}
.share-gloss dt{font-weight:600;color:var(--fg)}
.share-gloss dd{margin:0;max-width:44em}
.share-foot{border-top:1px solid var(--line-soft);padding-top:var(--s-3)}
.share-lead{line-height:1.4;margin:0 0 var(--s-1);font-size:var(--fs-lg)}
.share-lead strong{font-weight:600}
.share-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.share-list li{display:grid;gap:2px}

/* ── 19. responsive: named drawer at 1100 · 640 mobile ── */
@media (max-width:1100px){
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kbd-pill{min-width:0}
  .kbd-pill .l{display:none}
}
@media (max-width:1100px){
  .sidebar{transform:translateX(-100%);transition:transform var(--t-base) var(--ease);box-shadow:var(--sh-pop)}
  body.nav-open .sidebar{transform:none}
  .scrim{display:none;position:fixed;inset:0;background:var(--veil);z-index:55}
  body.nav-open .scrim{display:block}
  .main{margin-left:0}
  .menu-btn{display:inline-grid}
  :root{--topbar-h:48px}
  .topbar{padding:0 var(--s-3);gap:6px}
  .top-ctl{display:none}
  .ctx-chip{display:inline-flex}
  .content{padding:var(--s-6) var(--s-4)}
  .page-head .eyebrow{display:none}
  .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-tabs{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:640px){
  :root{--gap-page:24px;--gap-section:12px}
  .content{padding:var(--s-4);gap:var(--gap-page)}
  .crumb-sep,.crumb-page{display:none}
  .proj-switch{max-width:38vw;flex:0 1 auto}
  .ctx-chip{max-width:38vw;flex:0 1 auto;min-width:0}
  .crumb{flex:0 1 auto}
  .top-right{margin-left:auto}
  .kbd-pill{padding:0;width:var(--ctl-h-top);justify-content:center}
  .kbd-pill kbd{display:none}
  .page-title{font-size:var(--fs-lg)}
  .hero-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .sm-grid{grid-template-columns:minmax(0,1fr)}
  .kpi{min-height:0}
  .g2,.g3,.g4,.g5,.split,.two-col{grid-template-columns:minmax(0,1fr)}
    .kpi .val{font-size:1.5rem}
  .kpi-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:2px}
  .kpi-row .m,.kpi-row .tgt-s{grid-column:1/-1;text-align:left}
  .page-tabs,.steps{-webkit-mask-image:none;mask-image:none}
  .tabs{gap:var(--s-1) var(--s-4)}
  .tabs a,.tabs [role=tab]{white-space:normal;max-width:100%;min-height:44px}
  .calm-row,.calm-row>a{flex-wrap:wrap}
  .calm-row .m{flex-basis:100%}
  .act-list>.act{padding:var(--s-4)}
  .act-title{flex-basis:180px}
  .act-meta{margin-left:0}
  .rec-row summary>.small{flex-basis:100%;padding-left:22px}
  .rec dl,.rec-body dl,.kv{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
  .rec dd,.rec-body dd,.kv dd{margin-bottom:var(--s-3)}
  .bp-row{margin-left:calc(min(var(--d,0), 6) * 6px)}
  .bp-tree{overflow-x:auto;padding:var(--s-2)}
  .bp-row>*{min-width:0}
  .bp-head,.bp-sum{overflow-wrap:anywhere}
  .bp-row .br{white-space:normal}
  .tl li,.tl.one li{grid-template-columns:minmax(0,1fr);gap:2px}
  .rec-row summary,.ctx-line summary,.todo li{flex-wrap:wrap}
  .rec-row summary .t,.ctx-line summary .t,.tl.one .tl-t{white-space:normal}
  .fn-row{grid-template-columns:110px minmax(0,1fr) 80px}
  .fn-row>:last-child{grid-column:3;text-align:right;margin-top:calc(-1 * var(--s-2))}
  .banner .bar{flex-basis:100%}
  .banner .upd,.sum-foot .row-btns{margin-left:0}
  .share-form,.uf-grid{grid-template-columns:minmax(0,1fr)}
  .share-form>div{grid-column:auto}
  .gloss{grid-template-columns:minmax(0,1fr);gap:2px}
  .gloss dd{margin-bottom:var(--s-2)}
  .t td.name{min-width:140px;max-width:180px}
  .t.users td.name{min-width:150px}
  .share{padding:var(--s-4) var(--s-4) var(--s-8);gap:var(--gap-page)}
  .share-head h1{font-size:var(--fs-title)}
  .share-t .c2{display:none}
  .m-only{display:block}
  .share-gloss dl{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .share-gloss dd{margin:0 0 var(--s-2)}
  .ask-form{flex-direction:column;align-items:stretch}
  .steps li{min-width:120px}
}
/* touch: targets ≥40–44 px */
@media (pointer:coarse){
  .btn,.select,.input{height:var(--ctl-h-touch)}
  .btn.small,.chip-btn{height:40px}
  .seg button{height:36px}
  .seg{height:44px}
  .tabs a,.tabs [role=tab]{height:var(--ctl-h-touch)}
  .def-btn,.dq{width:24px;height:24px}
  .def-btn::after{inset:-8px}
  .matrix th,.matrix td{height:40px}
  .calm-row a,.top-menu-item{min-height:40px}
  .nref{padding:6px 10px;margin:4px 2px}
  .chart-data>summary,details.how>summary,.bp-more>summary,.ctx-ev>summary,details>summary.small{padding-block:var(--s-1);min-height:24px}
  .todo li>a,.sec-hdr .link a,.back-links a,.sc-card h3 a,.t td.name a.row-link,.chg-items a{display:inline-block;padding-block:var(--s-1)}
  .share-form fieldset label{display:inline-flex;align-items:center;gap:var(--s-2);min-height:32px}
  .share-form input[type=checkbox]{width:20px;height:20px;margin:0}
  .opt{min-height:28px;align-items:center}
  .opt input{margin-top:0;width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* dark: cards keep their edge on hover (no shadow on charcoal), the selected segment is lighter than its track (§3.2, §3.6) */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .card.click:hover,:root:not([data-theme="light"]) a.card:hover,:root:not([data-theme="light"]) .kpi.click:hover,:root:not([data-theme="light"]) .act:hover{border-color:var(--line-2);box-shadow:none;transform:none}
:root:not([data-theme="light"]) .seg button.on,:root:not([data-theme="light"]) .seg button[aria-pressed="true"],:root:not([data-theme="light"]) .seg button[aria-selected="true"]{background:var(--surface-hi);box-shadow:0 0 0 1px var(--line)}
}
:root[data-theme="dark"] .card.click:hover,:root[data-theme="dark"] a.card:hover,:root[data-theme="dark"] .kpi.click:hover,:root[data-theme="dark"] .act:hover{border-color:var(--line-2);box-shadow:none;transform:none}
:root[data-theme="dark"] .seg button.on,:root[data-theme="dark"] .seg button[aria-pressed="true"],:root[data-theme="dark"] .seg button[aria-selected="true"]{background:var(--surface-hi);box-shadow:0 0 0 1px var(--line)}

/* ── 20. print: light paper, no chrome; dq footnotes and band text stay ── */
@media print{
  html:root:not(.x){color-scheme:light;
    --bg:#fff;--bg-elev:#fff;--bg-elev-2:oklch(.975 .004 282);--surface:#fff;--surface-hi:oklch(.971 .004 285);--rail:#fff;
    --line-soft:oklch(.18 .012 272/.08);--line:oklch(.18 .012 272/.16);--line-2:oklch(.18 .012 272/.22);--line-strong:oklch(.18 .012 272/.3);
    --fg:oklch(.17 .014 272);--fg-soft:oklch(.35 .012 272);--fg-mute:oklch(.47 .01 272);--fg-faint:oklch(.62 .008 272);--fg-ghost:oklch(.79 .005 272);
    --accent:oklch(.22 .012 272);--accent-strong:oklch(.13 .014 272);--accent-soft:oklch(.45 .02 272/.08);--accent-line:oklch(.27 .01 272/.18);--accent-ink:#fff;
    --pos:oklch(.60 .17 152);--neg:oklch(.58 .22 25);--warn:oklch(.66 .18 65);--pos-ink:oklch(.45 .14 152);--neg-ink:oklch(.48 .2 25);--warn-ink:oklch(.48 .14 60);
    --pos-bg:oklch(.95 .03 152);--neg-bg:oklch(.95 .03 25);--warn-bg:oklch(.96 .04 70);
    --k-trigger:oklch(.55 .07 250);--k-message:oklch(.55 .07 300);--k-logic:oklch(.55 .06 200);--k-data:oklch(.55 .05 110);
    --sh-card:none;--sh-rich:none;--sh-hover:none;--sh-pop:none}
  body{background:#fff}
  .sidebar,.topbar,.alertbar,.page-tabs,.page-actions,.area-nav,.page-detail-control,.close-wizard-controls,[data-close-controls],.noprint,.toasts,.ctx-tools,.ctx-ev,.skip,.scrim,.dq,.flt,.steps{display:none!important}
  .print-only{display:inline}
  .page-head .eyebrow{display:block}
  .main{margin-left:0}
  .content{padding:0;max-width:none;gap:var(--s-5)}
  .card,.act,.kpi,.calm-list,.tbl-wrap{box-shadow:none;break-inside:avoid}
  .act{transform:none}
  .tbl-wrap{overflow:visible}
  a{color:inherit;text-decoration:none}
  details:not([open])>*:not(summary){display:none}
  .share{padding:0;gap:var(--s-4)}
  .screen-hidden{display:block!important}
  [data-close-wizard] [data-step][hidden]{display:grid!important}
  .share-gloss{break-inside:avoid}
}