/* Pygmalios Playbook · design system (see DESIGN.md). Vanilla CSS; brand in line with Pygmalios HUB (indigo, cool gray, Space Grotesk + Inter). */
@font-face { font-family: 'Inter'; src: url('/static/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/static/fonts/SpaceGrotesk-Variable.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@layer reset, base, components, modules, utilities;

:root {
  /* spacing */
  --inline-space: 1ch; --inline-space-half: calc(var(--inline-space) / 2); --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 0.8rem; --block-space-half: calc(var(--block-space) / 2); --block-space-double: calc(var(--block-space) * 2);
  /* type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text-x-small: 0.75rem; --text-small: 0.8125rem; --text-normal: 0.9375rem; --text-medium: 1.0625rem; --text-large: 1.3rem; --text-x-large: 1.6rem; --text-xx-large: 2.1rem;
  @media (max-width: 639px) { --text-x-small: 0.8rem; --text-small: 0.875rem; --text-normal: 1rem; --text-medium: 1.1rem; --text-large: 1.35rem; --text-x-large: 1.6rem; }
  /* shape */
  --radius-btn: 0.5rem; --radius-input: 0.5rem; --radius-panel: 0.75rem; --radius-card: 0.6rem;
  --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%), 0 0.2em 0.2em oklch(var(--lch-black) / 4%), 0 0.4em 0.4em oklch(var(--lch-black) / 4%), 0 0.8em 0.8em oklch(var(--lch-black) / 4%);
  --focus-ring: 2px solid var(--color-link);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --main-width: 44rem; --main-width-wide: 80rem;
  /* the client shell: one centred width for the top bar, the tab row and every client page; prose paragraphs keep a reading measure */
  --cshell-width: 64rem; --cread-measure: 68ch;

  /* OKLCH palettes (Fizzy scale) */
  --lch-black: 0% 0 0; --lch-white: 100% 0 0; --lch-canvas: var(--lch-white);
  --lch-ink-darkest: 21% 0.034 265; --lch-ink-darker: 37.3% 0.031 260; --lch-ink-dark: 50.5% 0.023 264; --lch-ink-medium: 71.4% 0.019 261;
  --lch-ink-light: 87.2% 0.009 258; --lch-ink-lighter: 92.8% 0.006 264; --lch-ink-lightest: 96.7% 0.003 264;
  --lch-uncolor-dark: 57.09% 0.0676 60.5; --lch-uncolor-medium: 66% 0.0944 71.46; --lch-uncolor-light: 83.97% 0.0457 80.84; --lch-uncolor-lighter: 92% 0.014 90; --lch-uncolor-lightest: 96% 0.012 100;
  --lch-red-darker: 40% 0.154 36; --lch-red-dark: 59% 0.19 38; --lch-red-medium: 66% 0.204 40; --lch-red-light: 84.08% 0.0837 41.96; --lch-red-lighter: 92% 0.03 44; --lch-red-lightest: 96% 0.013 46;
  --lch-yellow-darker: 40% 0.12 50; --lch-yellow-dark: 58% 0.156 60; --lch-yellow-medium: 74% 0.184 70; --lch-yellow-light: 84% 0.12 80; --lch-yellow-lighter: 92% 0.076 90; --lch-yellow-lightest: 96% 0.034 100;
  --lch-lime-dark: 56.5% 0.142 111; --lch-lime-medium: 68% 0.176 113.11; --lch-lime-light: 83.92% 0.0927 113.6; --lch-lime-lighter: 92% 0.046 114;
  --lch-green-darker: 40% 0.12 148; --lch-green-dark: 55% 0.162 147; --lch-green-medium: 66% 0.208 146; --lch-green-light: 83.92% 0.0772 145.06; --lch-green-lighter: 92% 0.044 144; --lch-green-lightest: 96% 0.022 143;
  --lch-aqua-dark: 55.5% 0.122 210; --lch-aqua-medium: 66% 0.152 208; --lch-aqua-light: 83.88% 0.0555 206.02; --lch-aqua-lighter: 92% 0.02 204;
  /* indigo, the Pygmalios HUB accent: 600 #4f46e5, 500 #6366f1, 300 #a5b4fc, 100 #e0e7ff, 50 #eef2ff */
  --lch-blue-darker: 39.8% 0.195 277; --lch-blue-dark: 51.1% 0.23 277; --lch-blue-medium: 58.5% 0.204 277; --lch-blue-light: 78.5% 0.115 275; --lch-blue-lighter: 93% 0.034 273; --lch-blue-lightest: 96.2% 0.018 272;
  --lch-violet-darker: 40% 0.2 290; --lch-violet-dark: 58% 0.216 287.6; --lch-violet-medium: 66% 0.206 285.52; --lch-violet-light: 84.08% 0.0791 283.47; --lch-violet-lighter: 92% 0.03 282; --lch-violet-lightest: 96% 0.015 280;
  --lch-purple-dark: 58% 0.21 310; --lch-purple-medium: 66% 0.258 308; --lch-purple-light: 84.09% 0.0778 305.77; --lch-purple-lighter: 92% 0.03 304;
  --lch-pink-dark: 59% 0.188 344; --lch-pink-medium: 71.8% 0.2008 342; --lch-pink-light: 84.04% 0.0737 340; --lch-pink-lighter: 92% 0.03 338;

  --color-canvas: oklch(var(--lch-canvas)); --color-canvas-tint: oklch(var(--lch-ink-lightest));
  --color-ink: oklch(var(--lch-ink-darkest)); --color-ink-darker: oklch(var(--lch-ink-darker)); --color-ink-dark: oklch(var(--lch-ink-dark));
  --color-ink-medium: oklch(var(--lch-ink-medium)); --color-ink-light: oklch(var(--lch-ink-light)); --color-ink-lighter: oklch(var(--lch-ink-lighter)); --color-ink-lightest: oklch(var(--lch-ink-lightest));
  --color-ink-inverted: oklch(var(--lch-white));
  --color-link: oklch(var(--lch-blue-dark)); --color-selected: oklch(var(--lch-blue-lightest));
  --color-blue: oklch(var(--lch-blue-dark)); --color-green: oklch(var(--lch-green-dark)); --color-yellow: oklch(var(--lch-yellow-dark));
  --color-red: oklch(var(--lch-red-dark)); --color-violet: oklch(var(--lch-violet-dark)); --color-aqua: oklch(var(--lch-aqua-dark));
  --color-lime: oklch(var(--lch-lime-dark)); --color-purple: oklch(var(--lch-purple-dark)); --color-pink: oklch(var(--lch-pink-dark)); --color-uncolor: oklch(var(--lch-uncolor-dark));
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
  img, svg { display: block; max-inline-size: 100%; }
  [x-cloak] { display: none !important; }
}

@layer base {
  html { font-size: 100%; }
  body { -webkit-font-smoothing: antialiased; background: var(--color-canvas-tint); color: var(--color-ink); font-family: var(--font-sans); line-height: 1.375; min-block-size: 100dvh; text-rendering: optimizeLegibility; }
  a { color: var(--color-link); text-decoration: underline; text-decoration-skip-ink: auto; }
  h1 { font-size: var(--text-x-large); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
  h2 { font-size: var(--text-large); font-weight: 700; line-height: 1.2; }
  h3 { font-size: var(--text-medium); font-weight: 700; }
  :is(a, button, input, textarea, select) { transition: 100ms ease-out; transition-property: background-color, border-color, box-shadow, outline, color; touch-action: manipulation; }
  :is(a, button, input, textarea, select):focus-visible { outline: var(--focus-ring); outline-offset: 1px; border-radius: var(--radius-input); }
  [data-landed]:focus { outline: none !important; }  /* focus the page moved there itself after an action: kept for assistive tech, not drawn (outranks the [tabindex] rings below); Tab draws the next one */
  :is(button, input, textarea, select)[disabled] { cursor: not-allowed; opacity: 0.45; }
  ::selection { background: var(--color-selected); }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
}

@layer components {
  /* layout */
  .page { inline-size: min(100% - 2 * var(--inline-space-double), var(--main-width)); margin-inline: auto; padding-block: var(--block-space); display: grid; gap: var(--block-space); align-content: start; }
  .page--wide { --main-width: var(--main-width-wide); }
  .stack { display: grid; gap: var(--block-space); }
  .stack--tight { gap: var(--block-space-half); }
  .row { display: flex; flex-wrap: wrap; gap: var(--inline-space); align-items: center; }
  .row--between { justify-content: space-between; }
  .grid-2 { display: grid; gap: var(--inline-space); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .grid-cards { display: grid; gap: var(--inline-space); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

  /* header */
  .topbar { background: var(--color-canvas); border-block-end: 1px solid var(--color-ink-lighter); position: sticky; inset-block-start: 0; z-index: 20; }
  .topbar__inner { inline-size: min(100% - 2 * var(--inline-space-double), var(--main-width)); margin-inline: auto; block-size: 2.6rem; display: flex; gap: var(--inline-space); align-items: center; justify-content: space-between; flex-wrap: nowrap; }
  .topbar .row { flex-wrap: nowrap; gap: var(--inline-space-half); }
  .topbar .btn--small { min-block-size: 1.9em; padding: 0.15em 0.8em; font-size: var(--text-small); }
  .topbar .brand--logo .brand__name { font-size: var(--text-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .brand--logo .logo { block-size: 0.55rem; }
  .brand { display: grid; line-height: 1.2; min-inline-size: 0; }
  .brand__eyebrow { font-size: var(--text-x-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dark); font-weight: 600; }
  .brand__name { font-weight: 700; font-size: var(--text-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__name small { font-weight: 500; color: var(--color-ink-dark); }
  .brand--logo { display: flex; align-items: center; gap: var(--inline-space-double); min-inline-size: 0; }
  .brand--logo .logo { block-size: 0.62em; inline-size: auto; flex: none; }
  .brand--logo .brand__eyebrow { display: none; }
  .brand--logo .brand__name { font-size: var(--text-normal); font-weight: 600; border-inline-start: 1px solid var(--color-ink-lighter); padding-inline-start: var(--inline-space-double); white-space: normal; overflow: visible; }
  .brand--logo .brand__name small { font-weight: 400; }
  .lang { display: inline-flex; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-btn); overflow: hidden; font-size: var(--text-x-small); font-weight: 700; }
  .lang button { padding: 0.3em 0.7em; color: var(--color-ink-dark); }
  .lang button.on, .lang button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-ink-inverted); }
  .msg b { font-weight: 700; }
  .role--on { border-color: var(--color-link); background: var(--color-selected); }
  .role input[type=checkbox] { accent-color: var(--color-link); inline-size: 1.1em; block-size: 1.1em; }
  .role--all { grid-column: 1 / -1; border-style: dashed; }
  .eyebrow { font-size: var(--text-x-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dark); font-weight: 600; }

  /* panels & cards */
  .panel { background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-panel); padding: var(--block-space); display: grid; gap: var(--block-space); @media (min-width: 640px) { padding: var(--block-space-double); } }
  .panel--tint { --card-color: var(--color-blue); background: color-mix(in srgb, var(--card-color) 5%, var(--color-canvas)); border-color: color-mix(in srgb, var(--card-color) 25%, var(--color-canvas)); }
  .recs-link { display: flex; flex-direction: column; gap: .25rem; color: inherit; text-decoration: none; }
  .recs-link b { color: var(--color-blue); }
  .panel--violet { --card-color: var(--color-violet); }
  .panel--green { --card-color: var(--color-green); }
  .panel--yellow { --card-color: var(--color-yellow); }
  .card { --card-color: var(--color-blue); background: color-mix(in srgb, var(--card-color) 4%, var(--color-canvas)); border-radius: var(--radius-card); box-shadow: var(--shadow); display: grid; gap: var(--block-space-half); padding: var(--block-space); position: relative; animation: fade-up 180ms var(--ease-out-expo); @media (min-width: 640px) { padding: var(--block-space) var(--block-space-double); gap: 0.7rem; } }
  .card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--inline-space); font-size: var(--text-small); color: color-mix(in srgb, var(--card-color) 75%, var(--color-ink)); font-weight: 600; }
  .card__code { font-family: var(--font-mono); color: var(--color-ink-dark); font-weight: 500; }
  .card__situation { font-size: var(--text-medium); line-height: 1.3; @media (min-width: 640px) { font-size: 1.2rem; } }
  .card__step { border-inline-start: 3px solid var(--card-color); padding-inline-start: var(--inline-space-double); color: color-mix(in srgb, var(--card-color) 60%, var(--color-ink)); display: grid; gap: 0.2em; }
  .card--aqua { --card-color: var(--color-aqua); } .card--blue { --card-color: var(--color-blue); } .card--violet { --card-color: var(--color-violet); }
  .card--yellow { --card-color: var(--color-yellow); } .card--lime { --card-color: var(--color-lime); } .card--pink { --card-color: var(--color-pink); }
  .card--green { --card-color: var(--color-green); } .card--purple { --card-color: var(--color-purple); } .card--uncolor { --card-color: var(--color-uncolor); } .card--ink { --card-color: var(--color-ink-dark); }

  /* buttons */
  .btn { --btn-bg: var(--color-canvas); --btn-fg: var(--color-ink); --btn-border: var(--color-ink-light); align-items: center; background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--radius-btn); color: var(--btn-fg); display: inline-flex; font-weight: 600; gap: 0.5em; justify-content: center; min-block-size: 2.65em; padding: 0.5em 1.2em; text-decoration: none; white-space: nowrap; }
  .btn:hover { filter: brightness(0.94); }
  .btn--primary { --btn-bg: var(--color-link); --btn-fg: var(--color-ink-inverted); --btn-border: var(--color-link); }
  .btn--ok { --btn-bg: var(--color-green); --btn-fg: var(--color-ink-inverted); --btn-border: var(--color-green); }
  .btn--violet { --btn-bg: oklch(var(--lch-violet-lightest)); --btn-fg: oklch(var(--lch-violet-darker)); --btn-border: oklch(var(--lch-violet-light)); }
  .btn--plain { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--color-ink-dark); font-weight: 500; padding-inline: 0.6em; }
  .btn--plain:hover { filter: none; color: var(--color-ink); background: var(--color-ink-lightest); }
  .btn--small { font-size: var(--text-small); min-block-size: 2.2em; padding: 0.3em 0.9em; }
  .btn--block { inline-size: 100%; }

  /* choices (answer buttons) */
  .choices { display: grid; gap: var(--inline-space-half); grid-template-columns: 1fr; @media (min-width: 640px) { grid-template-columns: 1fr 1fr; } }
  .choices .choice--unknown { grid-column: 1 / -1; }
  .choice { --c: var(--color-ink-medium); background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-inline-start: 5px solid var(--c); border-radius: var(--radius-card); display: grid; gap: 0.1em; min-block-size: 3em; padding: 0.45em 0.9em 0.45em 1em; inline-size: 100%; }
  .choice:hover { background: color-mix(in srgb, var(--c) 7%, var(--color-canvas)); border-color: color-mix(in srgb, var(--c) 40%, var(--color-ink-lighter)); }
  .choice b { font-weight: 700; display: flex; align-items: center; gap: 0.5em; }
  .choice--picked { background: color-mix(in srgb, var(--c) 10%, var(--color-canvas)); border-color: var(--c); }
  kbd { font-family: var(--font-mono); font-size: 0.72em; font-weight: 600; color: var(--color-ink-dark); border: 1px solid var(--color-ink-lighter); border-block-end-width: 2px; border-radius: 0.3em; padding: 0 0.35em; line-height: 1.4; @media (hover: none) { display: none; } } .choice span { font-size: var(--text-small); color: var(--color-ink-dark); }
  .choice--yes { --c: var(--color-green); } .choice--alt { --c: var(--color-yellow); } .choice--no { --c: var(--color-red); } .choice--na { --c: var(--color-uncolor); } .choice--unknown { --c: var(--color-ink-medium); }
  .choice--wide { grid-column: 1 / -1; }

  /* inputs */
  .input, .select { background: var(--color-canvas); border: 1px solid var(--color-ink-medium); border-radius: var(--radius-input); color: var(--color-ink); font-size: max(16px, 1em); inline-size: 100%; line-height: inherit; padding: 0.5em 0.8em; resize: none; }
  .input:focus, .select:focus { border-color: var(--color-link); outline-offset: -1px; }
  .input--big { font-size: max(16px, var(--text-medium)); min-block-size: 5.5em; }
  textarea.input { field-sizing: content; min-block-size: 3.2em; }
  .input--bare { border: 0; padding: 0; background: transparent; border-radius: 0; font-size: var(--text-medium); line-height: 1.3; }
  .input--bare:focus { outline: 0; }
  .select { appearance: auto; inline-size: auto; padding-inline-end: 0.6em; }
  .field { display: grid; gap: 0.3em; font-size: var(--text-small); color: var(--color-ink-dark); font-weight: 600; }
  .field .input, .field .select { font-weight: 400; color: var(--color-ink); }
  .with-mic { position: relative; }
  .with-mic .input { padding-inline-end: 7em; }
  .with-mic .mic { position: absolute; inset-inline-end: 0.5em; inset-block-start: 0.5em; }
  @media (max-width: 639px) { .with-mic .input { padding-inline-end: 0.8em; padding-block-end: 2.8em; } .with-mic .mic { inset-block-start: auto; inset-block-end: 0.5em; } .chip--big { font-size: var(--text-x-small); } }
  .mic { border-radius: var(--radius-btn); background: var(--color-ink-lightest); color: var(--color-ink-dark); padding: 0.25em 0.6em; font-size: var(--text-small); }
  .subpanel { border: 1px dashed var(--color-ink-lighter); border-radius: var(--radius-card); padding: 0.9em 1em; }
  .files { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; }
  .file-chip { display: inline-flex; gap: 0.4em; align-items: center; padding: 0.2em 0.3em 0.2em 0.6em; border-radius: var(--radius-btn); background: var(--color-ink-lightest); font-size: var(--text-small); max-inline-size: 100%; }
  .file-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 22ch; }
  .file-chip__x { padding: 0 0.4em; border-radius: var(--radius-btn); color: var(--color-ink-dark); }
  .file-chip__x:hover { background: var(--color-canvas); }
  .upload-btn { cursor: pointer; }
  .upload-btn:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }
  .upload-btn.is-busy { opacity: 0.7; cursor: progress; }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .up-err { color: oklch(var(--lch-red-darker)); }
  .mic-msg { position: fixed; inset-inline: 1rem; inset-block-end: 1rem; margin-inline: auto; max-inline-size: 36rem; padding: 0.75em 1em; border-radius: var(--radius-btn); background: var(--color-ink-dark); color: var(--color-canvas, white); font-size: var(--text-small); box-shadow: 0 4px 16px rgb(0 0 0 / 0.15); cursor: pointer; z-index: 50; }
  .mic--on { background: oklch(var(--lch-red-lighter)); color: oklch(var(--lch-red-darker)); }

  /* badges & flash */
  .badge { --b: var(--color-ink-lighter); --bf: var(--color-ink-darker); background: var(--b); color: var(--bf); border-radius: var(--radius-btn); font-size: var(--text-x-small); font-weight: 700; padding: 0.15em 0.7em; white-space: nowrap; display: inline-block; }
  .badge--green { --b: oklch(var(--lch-green-lighter)); --bf: oklch(var(--lch-green-darker)); }
  .badge--yellow { --b: oklch(var(--lch-yellow-lighter)); --bf: oklch(var(--lch-yellow-darker)); }
  .badge--red { --b: oklch(var(--lch-red-lighter)); --bf: oklch(var(--lch-red-darker)); }
  .badge--violet { --b: oklch(var(--lch-violet-lighter)); --bf: oklch(var(--lch-violet-darker)); }
  .badge--blue { --b: oklch(var(--lch-blue-lighter)); --bf: oklch(var(--lch-blue-darker)); }
  .flash { background: oklch(var(--lch-green-lightest)); border: 1px solid oklch(var(--lch-green-light)); color: oklch(var(--lch-green-darker)); border-radius: var(--radius-input); padding: 0.5em 1em; font-size: var(--text-small); }
  .flash--err { background: oklch(var(--lch-red-lightest)); border-color: oklch(var(--lch-red-light)); color: oklch(var(--lch-red-darker)); }

  /* AI draft & quote */
  .draft { border: 2px solid oklch(var(--lch-violet-light)); border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-violet) 3%, var(--color-canvas)); display: grid; gap: var(--block-space-half); padding: var(--block-space); }
  .draft__label { color: oklch(var(--lch-violet-darker)); font-size: var(--text-small); font-weight: 700; display: flex; gap: 0.5em; align-items: center; }
  .draft__meta { display: flex; flex-wrap: wrap; gap: var(--inline-space-half); align-items: center; }
  .draft__hint { font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .quote { color: oklch(var(--lch-uncolor-dark)); font-style: italic; font-size: var(--text-small); }
  .quote b { font-style: normal; font-weight: 700; }
  .ask { background: oklch(var(--lch-yellow-lightest)); border: 1px solid oklch(var(--lch-yellow-light)); border-radius: var(--radius-input); padding: var(--block-space-half) var(--block-space); display: grid; gap: var(--block-space-half); }

  /* steps */
  .steps { display: flex; gap: var(--inline-space-half); inline-size: min(100% - 2 * var(--inline-space-double), var(--main-width)); margin-inline: auto; padding-block: 0 0.3rem; }
  .step { flex: 1; display: grid; gap: 0.15em; text-align: start; min-inline-size: 0; }
  .step__bar { block-size: 0.25em; border-radius: var(--radius-btn); background: var(--color-ink-lighter); }
  .step__label { font-size: 0.68rem; color: var(--color-ink-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
  .step--done .step__bar { background: var(--color-green); }
  .step--active .step__bar { background: var(--color-link); } .step--active .step__label { color: var(--color-link); font-weight: 700; }

  /* role choice */
  .role { background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); padding: 0.8em 1em; display: grid; align-content: start; gap: 0.15em; inline-size: 100%; }
  .role:hover { border-color: var(--color-link); background: var(--color-selected); }
  .role b { font-weight: 700; } .role > span:not(.row) { font-size: var(--text-small); color: var(--color-ink-dark); } .role > .row { color: var(--color-ink); flex-wrap: nowrap; align-items: flex-start; } .role > .row input { margin-block-start: 0.2em; flex: none; }

  /* assistant */
  .assistant { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; background: var(--color-canvas); border: 1px solid oklch(var(--lch-violet-light)); border-radius: var(--radius-panel) var(--radius-panel) 0 0; box-shadow: var(--shadow); padding: var(--block-space); display: grid; gap: var(--block-space-half); @media (min-width: 640px) { inset-inline: auto 1rem; inset-block-end: 1rem; inline-size: 24rem; border-radius: var(--radius-panel); } }
  .assistant__title { color: oklch(var(--lch-violet-darker)); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
  .chips { display: flex; flex-wrap: wrap; gap: 0.3em; max-block-size: 5em; overflow: auto; }
  .chip { background: var(--color-ink-lightest); border-radius: var(--radius-btn); font-size: var(--text-x-small); padding: 0.15em 0.6em; }
  .chat { display: grid; gap: 0.4em; max-block-size: 14em; overflow: auto; font-size: var(--text-small); }
  .msg { border-radius: var(--radius-card); padding: 0.4em 0.8em; background: var(--color-ink-lightest); justify-self: start; max-inline-size: 90%; }
  .msg--me { background: oklch(var(--lch-violet-lightest)); justify-self: end; }

  /* lists & tables */
  .list { display: grid; }
  .list > * { padding-block: var(--block-space-half); border-block-start: 1px solid var(--color-ink-lighter); }
  .list > *:first-child { border-block-start: 0; }
  .table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-small); }
  .table th { text-align: start; color: var(--color-ink-dark); font-weight: 600; padding: 0.4em 0.5em; border-block-end: 1px solid var(--color-ink-lighter); }
  .table td { padding: 0.5em; border-block-end: 1px solid var(--color-ink-lightest); vertical-align: top; }
  .table tr:hover td { background: var(--color-ink-lightest); }
  .stat { display: grid; gap: 0.1em; }
  .stat__value { font-size: var(--text-x-large); font-weight: 700; line-height: 1; }
  .stat__value small { font-size: var(--text-normal); color: var(--color-ink-medium); font-weight: 500; }
  .stat__label { font-size: var(--text-small); color: var(--color-ink-dark); }
  .code { font-family: var(--font-mono); font-size: var(--text-small); background: var(--color-ink); color: var(--color-ink-lightest); border-radius: var(--radius-card); padding: var(--block-space); white-space: pre-wrap; overflow: auto; }
  .rule { display: grid; gap: 0.4em; padding: var(--block-space-half) 0; }
  .rule__row { display: flex; gap: var(--inline-space); align-items: flex-start; }
  .rule__text { flex: 1; }
  @media (max-width: 639px) { .rule__row { flex-wrap: wrap; gap: 0.4em var(--inline-space); } .rule__text { flex: 1 1 100%; order: 2; } .rule__row > .row { order: 3; } }
  .rule__meta { font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .rule--off .rule__text { text-decoration: line-through; color: var(--color-ink-medium); }
  .rule-form { border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); padding: var(--block-space-half); display: grid; gap: var(--inline-space-half); grid-template-columns: 5rem 1fr; font-size: var(--text-small); }
  .rule-form--navrh { background: oklch(var(--lch-yellow-lightest)); }
  .rule-form--schvalene { background: oklch(var(--lch-green-lightest)); }
  .rule-form--neplati { opacity: 0.55; }
  .rule-form__controls { grid-column: 1 / -1; display: grid; gap: 0.3em; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .rule-form .select, .rule-form .input { font-size: var(--text-small); padding: 0.3em 0.5em; inline-size: 100%; }
  .missing { overflow-wrap: anywhere; } .missing p { margin: 0; } .missing__title { margin-block-start: 0.4em !important; font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
  .missing__list { margin: 0.1em 0 0; padding-inline-start: 1.1em; } .missing__list li { margin-block: 0.1em; }
  .footer { text-align: center; font-size: var(--text-x-small); color: var(--color-ink-dark); padding: var(--block-space-half) var(--inline-space-double); }
}

@layer utilities {
  .txt-small { font-size: var(--text-small); } .txt-x-small { font-size: var(--text-x-small); } .txt-subtle { color: var(--color-ink-dark); } .txt-right { text-align: end; }
  .txt-mono { font-family: var(--font-mono); } .txt-center { text-align: center; }
  .ml-auto { margin-inline-start: auto; } .hidden { display: none !important; } .w-full { inline-size: 100%; }
  .gap-half { gap: var(--inline-space-half); }
}

@keyframes fade-up { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }

@layer components {
  .hide-sm { @media (max-width: 639px) { display: none !important; } }
  .show-sm { @media (min-width: 640px) { display: none !important; } }
  .topbar .brand--logo .logo { @media (max-width: 639px) { block-size: 0.62rem; } }
  .assistant { @media (max-width: 639px) { max-block-size: 80dvh; overflow: auto; } }
  .step__alert { margin-inline-start: 0.35em; display: inline-grid; place-items: center; inline-size: 1.2em; block-size: 1.2em; border-radius: 50%; background: oklch(var(--lch-violet-darker)); color: var(--color-ink-inverted); font-size: 0.65rem; font-weight: 700; }
  .cf { padding-block: var(--block-space-half); border-block-start: 1px solid var(--color-ink-lighter); }
  .cf:first-of-type { border-block-start: 0; }
  .cf__st { display: grid; grid-template-columns: 1fr auto; gap: 0.2em 0.8em; align-items: center; padding: 0.5em 0.8em; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-input); }
  .cf__st > span:first-child { grid-column: 1 / -1; }
  .step__count { margin-inline-start: 0.35em; color: var(--color-ink-medium); font-weight: 500; }
  .step--done .step__label { color: oklch(var(--lch-green-darker)); }
  .step--done.step--active .step__bar { background: var(--color-link); }
  .plan { display: grid; gap: 0.35em; padding-inline-start: 1.3em; margin: 0; }
  .plan li b { margin-inline-end: 0.4em; }
  .plan li span { color: var(--color-ink-dark); }
  .plan--left { text-align: start; justify-self: center; max-inline-size: 34rem; }
  .row--center { justify-content: center; }
  .card__progress { block-size: 3px; border-radius: 3px; background: color-mix(in srgb, var(--card-color) 15%, var(--color-canvas)); overflow: hidden; margin-block-start: -0.2em; }
  .card__progress span { display: block; block-size: 100%; background: var(--card-color); transition: inline-size 300ms var(--ease-out-expo); }
  .card__situation:focus { outline: none; }
  .pill { display: inline-flex; align-items: center; gap: 0.3em; background: var(--color-ink-lightest); border-radius: var(--radius-btn); padding: 0.2em 0.8em; font-size: var(--text-small); font-weight: 600; }
  .chips--open { max-block-size: none; overflow: visible; }
  .chip--big { font-size: var(--text-small); padding: 0.3em 0.8em; border: 1px solid var(--color-ink-lighter); background: var(--color-canvas); }
  .chip--on { border-color: var(--color-link); background: var(--color-selected); color: var(--color-link); font-weight: 600; }
  .chip--big:hover { border-color: var(--color-link); background: var(--color-selected); }
  .ai-wait { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--text-small); color: oklch(var(--lch-violet-darker)); }
  .ai-wait__dots { inline-size: 1.6em; block-size: 0.5em; background: radial-gradient(circle closest-side, currentColor 90%, transparent) 0 50% / 0.5em 0.5em repeat-x; animation: ai-dots 1s steps(4) infinite; clip-path: inset(0 100% 0 0); }
  @keyframes ai-dots { to { clip-path: inset(0 -0.5em 0 0); } }
  .input--editable { border: 1px dashed oklch(var(--lch-violet-light)); background: var(--color-canvas); font-size: var(--text-medium); line-height: 1.35; }
  .input--editable:focus { border-style: solid; }
  .facts { display: flex; flex-wrap: wrap; gap: 0.4em; }
  .fact { display: inline-grid; gap: 0; padding: 0.3em 0.8em; border-radius: var(--radius-input); background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); line-height: 1.25; }
  .fact small { font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .fact b { font-size: var(--text-small); font-weight: 600; }
  details.more > summary { font-size: var(--text-small); }
  .list--plain { list-style: none; padding: 0; margin: 0; }
  .kpis--client { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--inline-space); }
  .kpis--client .stat { align-content: start; justify-items: start; text-align: start; padding: 0.6em 0.8em; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); background: var(--color-canvas); }
  .kpis--client button.stat:hover { border-color: var(--color-link); }
  .kpis--client .stat__value { font-size: var(--text-large); }
  .toast { position: fixed; inset-inline: 1rem; inset-block-end: 1rem; margin-inline: auto; inline-size: fit-content; max-inline-size: calc(100% - 2rem); display: flex; align-items: center; gap: 1em; padding: 0.6em 0.7em 0.6em 1.1em; border-radius: var(--radius-btn); background: var(--color-ink); color: var(--color-ink-inverted); font-size: var(--text-small); box-shadow: 0 6px 20px rgb(0 0 0 / 0.18); z-index: 60; }
  .toast--err { background: oklch(var(--lch-red-darker)); }
  .toast__undo { color: inherit; font-weight: 700; text-decoration: underline; padding: 0.2em 0.5em; border-radius: var(--radius-btn); }
  .toast__undo:hover { background: rgb(255 255 255 / 0.12); }
  .footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5em; }
}

/* admin rule register */
@layer components {
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--inline-space-double); }
  .rcard { border: 1px solid var(--color-ink-lighter); border-inline-start: 4px solid var(--color-ink-light); border-radius: var(--radius-card); padding: 0.8rem 1rem; display: grid; gap: 0.35rem; background: var(--color-canvas); }
  .rcard--navrh { border-inline-start-color: var(--color-yellow); }
  .rcard--potvrdene { border-inline-start-color: var(--color-link); }
  .rcard--schvalene { border-inline-start-color: var(--color-green); }
  .rcard--neplati { opacity: 0.6; }
  .rcard--neplati .rcard__text { text-decoration: line-through; }
  .rcard__head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
  .rcard__actions { margin-inline-start: auto; display: flex; gap: 0.3rem; }
  .rcard__text { font-size: var(--text-medium); line-height: 1.4; margin: 0; }
  .rcard__meta { font-size: var(--text-small); color: var(--color-ink-darker); margin: 0; line-height: 1.5; }
  .rcard__more { display: flex; flex-wrap: wrap; gap: var(--inline-space-double); font-size: var(--text-small); }
  .rcard__more details { flex: 1 1 100%; }
  .rcard__more summary, details > summary { cursor: pointer; color: var(--color-link); font-weight: 600; }
  .chip-warn { background: oklch(var(--lch-yellow-lightest)); color: oklch(var(--lch-yellow-darker)); border: 1px solid oklch(var(--lch-yellow-light)); border-radius: var(--radius-btn); font-size: var(--text-x-small); font-weight: 600; padding: 0.1em 0.6em; }
  .ilist { display: grid; }
  .irow { display: grid; gap: var(--block-space-half); padding-block: var(--block-space-half); border-block-end: 1px solid var(--color-ink-lighter); }
  .irow__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inline-space-half) var(--inline-space-double); }
  .irow__actions { display: flex; gap: var(--inline-space-half); margin-inline-start: auto; }
  .irow .irow__form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--block-space-half) var(--inline-space-double); padding-block: 0; }
  .irow__url { flex: 2 1 16rem; min-inline-size: 0; }
  .irow__key { flex: 1 1 14rem; min-inline-size: 0; }
  .srclist { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
  .fcform { display: flex; align-items: end; gap: var(--inline-space-double); margin-block-end: var(--block-space-half); }
  .fcform .btn { inline-size: auto; }
  .fcform .field { flex: 0 0 10rem; inline-size: 10rem; }
  .fcpairs { display: grid; gap: var(--block-space-half); margin-block-end: var(--block-space-half); }
  .fcpairs__row { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr); gap: var(--inline-space-double); align-items: center; }
  .fcpairs__loc { overflow-wrap: anywhere; }
  .fcpairs .btn { inline-size: auto; justify-self: start; }
  .srcrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inline-space-half) var(--inline-space-double); padding-block: 0.5rem; border-block-end: 1px solid var(--color-ink-lighter); }
  .srcrow__name { flex: 0 0 16rem; display: flex; align-items: center; gap: var(--inline-space-half); margin: 0; }
  .srcrow__state { display: flex; align-items: center; gap: var(--inline-space-half); white-space: nowrap; }
  .kv { display: flex; flex-wrap: wrap; gap: var(--block-space-half) var(--inline-space-double); margin: 0 0 var(--block-space-half); }
  .kv > div { display: grid; gap: 0.1rem; }
  .kv dd { margin: 0; font-weight: 600; }
  .irow__on { flex: 0 0 auto; padding-block-end: 0.5rem; }
  .irow__form > .btn { flex: 0 0 auto; inline-size: auto; }
  .rform { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; padding-block: 0.6rem; }
  .rform__wide { grid-column: 1 / -1; }
}

/* admin project list */
@layer components {
  .pagehead { display: flex; justify-content: space-between; align-items: end; gap: var(--inline-space); }
  .pagehead h1 small { font-size: 0.55em; font-weight: 500; margin-inline-start: 0.3em; }
  .newproj > summary { list-style: none; inline-size: fit-content; cursor: pointer; }
  .newproj > summary::-webkit-details-marker { display: none; }
  .newproj[open] > summary { margin-block-end: var(--block-space-half); }
  .newproj__grid { display: grid; gap: var(--inline-space); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
  .plist { display: grid; gap: var(--block-space-half); }
  .pcard { display: grid; grid-template-columns: 1fr auto; gap: var(--block-space-half) var(--inline-space-double); padding: var(--block-space) var(--block-space-double); background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-inline-start: 4px solid var(--color-ink-lighter); border-radius: var(--radius-panel); @media (max-width: 760px) { grid-template-columns: 1fr; padding: var(--block-space); } }
  .pcard--attention { border-inline-start-color: var(--color-yellow); }
  .pcard__main { display: grid; gap: 0.55rem; min-inline-size: 0; }
  .pcard__title { color: inherit; text-decoration: none; font-size: var(--text-medium); line-height: 1.25; }
  .pcard__title span { color: var(--color-ink-dark); font-weight: 400; }
  .pcard__title:hover b { text-decoration: underline; }
  .pcard__meta { display: flex; flex-wrap: wrap; gap: 0.3em 0.8em; align-items: center; font-size: var(--text-small); color: var(--color-ink-dark); }
  .pcard__progress { display: flex; flex-wrap: wrap; gap: 0.4em 0.8em; align-items: center; }
  .meter { flex: 0 1 16rem; min-inline-size: 8rem; block-size: 0.45rem; border-radius: 1rem; background: var(--color-ink-lightest); overflow: hidden; }
  .meter > span { display: block; block-size: 100%; background: var(--color-link); border-radius: inherit; }
  .pcard__roles { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .rolechip { display: inline-grid; gap: 0.2rem; padding: 0.3rem 0.55rem; border-radius: var(--radius-input); background: var(--color-canvas-tint); font-size: var(--text-x-small); color: var(--color-ink-dark); min-inline-size: 7rem; max-inline-size: 14rem; }
  .rolechip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rolechip__bar { block-size: 3px; border-radius: 3px; background: var(--color-ink-lighter); overflow: hidden; }
  .rolechip__bar > span { display: block; block-size: 100%; background: var(--color-green); }
  .pcard__side { display: grid; gap: var(--block-space-half); align-content: space-between; justify-items: end; @media (max-width: 760px) { justify-items: start; } }
  .pcard__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; @media (max-width: 760px) { justify-content: flex-start; } }
  .tag { display: inline-flex; align-items: center; padding: 0.2em 0.7em; border-radius: var(--radius-btn); font-size: var(--text-small); font-weight: 600; background: var(--color-ink-lightest); color: var(--color-ink-dark); text-decoration: none; white-space: nowrap; }
  a.tag:hover { filter: brightness(0.95); }
  .tag--red { background: oklch(var(--lch-red-lighter)); color: oklch(var(--lch-red-darker)); }
  .tag--yellow { background: oklch(var(--lch-yellow-lighter)); color: oklch(var(--lch-yellow-darker)); }
  .tag--violet { background: oklch(var(--lch-violet-lighter)); color: oklch(var(--lch-violet-darker)); }
  .tag--green { background: oklch(var(--lch-green-lighter)); color: oklch(var(--lch-green-darker)); }
}

/* sidebar navigation (admin shell and client) */
@layer components {
  .shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-block-size: 100dvh; @media (max-width: 899px) { grid-template-columns: minmax(0, 1fr); } }
  .shell__main { min-inline-size: 0; }
  .side { position: sticky; inset-block-start: 0; block-size: 100dvh; overflow-y: auto; background: var(--color-canvas); border-inline-end: 1px solid var(--color-ink-lighter);
    padding: 1rem 0.7rem; display: flex; flex-direction: column; gap: 1.1rem; font-size: var(--text-small); z-index: 40;
    @media (max-width: 899px) { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(18rem, 86vw); transform: translateX(-102%); transition: transform 180ms var(--ease-out-expo); box-shadow: var(--shadow); } }
  .nav-open .side { transform: none; }
  .side__brand { display: grid; gap: 0.35rem; padding: 0.2rem 0.5rem 0.4rem; color: var(--color-ink); text-decoration: none; font-weight: 700; }
  .side__brand .logo { block-size: 0.6rem; inline-size: auto; justify-self: start; }
  .side__group { display: grid; gap: 1px; }
  .side__label { font-size: var(--text-x-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dark); font-weight: 600; padding: 0 0.6rem 0.3rem; }
  .navlink { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.42rem 0.6rem; border-radius: var(--radius-input); color: var(--color-ink); text-decoration: none; min-inline-size: 0; }
  .navlink:hover { background: var(--color-ink-lightest); }
  .navlink.on, .navlink[aria-current] { background: var(--color-selected); color: var(--color-link); font-weight: 600; }
  .navlink--sub { padding-inline-start: 1.1rem; color: var(--color-ink-dark); }
  .navlink__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navcount { flex: none; min-inline-size: 1.5rem; padding: 0 0.4rem; border-radius: 1rem; background: var(--color-ink-lightest); color: var(--color-ink-dark); font-size: var(--text-x-small); font-weight: 600; text-align: center; line-height: 1.5; }
  .navcount--warn { background: oklch(var(--lch-yellow-lighter)); color: oklch(var(--lch-yellow-darker)); }
  .navcount--red { background: oklch(var(--lch-red-lighter)); color: oklch(var(--lch-red-darker)); }
  .navcount--ok { background: oklch(var(--lch-green-lighter)); color: oklch(var(--lch-green-darker)); }
  .side__stores { display: grid; gap: 1px; max-block-size: 14rem; overflow-y: auto; }
  .side__foot { margin-block-start: auto; display: grid; gap: 0.4rem; justify-items: start; padding: 0.6rem 0.6rem 0; border-block-start: 1px solid var(--color-ink-lighter); }
  .side__who { overflow-wrap: anywhere; }
  .mobilebar { display: none; @media (max-width: 899px) { display: flex; align-items: center; gap: 0.8rem; position: sticky; inset-block-start: 0; z-index: 30; background: var(--color-canvas); border-block-end: 1px solid var(--color-ink-lighter); padding: 0.4rem 0.8rem; } }
  .mobilebar .logo { block-size: 0.6rem; }
  /* the admin workspace always fills the space next to the sidebar */
  .shell .page { inline-size: auto; margin-inline: clamp(1rem, 2.2vw, 2rem); }
  /* client: steps live in the sidebar on wide screens */
  .cshell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 var(--inline-space-double); inline-size: min(100% - 2rem, var(--cshell-width)); margin-inline: auto; align-items: start; @media (max-width: 1023px) { grid-template-columns: minmax(0, 1fr); } }
  .cshell .page { inline-size: 100%; }
  .cside { position: sticky; inset-block-start: 5.2rem; display: grid; gap: 1rem; padding-block: var(--block-space); font-size: var(--text-small); @media (max-width: 1023px) { display: none; } }
  .cside .navlink { inline-size: 100%; text-align: start; }
  .cside__who { padding: 0 0.6rem; color: var(--color-ink-dark); }
  .steps--wide-hide { @media (min-width: 1024px) { display: none; } }
}
@layer components {
  .page > *, .panel > * { min-inline-size: 0; }
  .table { @media (max-width: 700px) { display: block; overflow-x: auto; position: relative; } }  /* positioned: contains the absolute .sr-only cells, no page-wide scroll */
  .side { @media (max-width: 899px) { block-size: auto; } }
  .navshade { display: none; }
  .nav-open .navshade { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 0.28); z-index: 35; @media (min-width: 900px) { display: none; } }
}

@layer components { .topbar__inner--wide { @media (min-width: 1024px) { inline-size: min(100% - 2 * var(--inline-space-double), 78rem); } } }

/* brand: Pygmalios Playbook */
@layer components {
  h1, h2, h3, .wordmark__text, .stat__value { font-family: var(--font-heading); letter-spacing: -0.015em; }
  .wordmark { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-ink); white-space: nowrap; }
  .wordmark__mark { block-size: 1.15rem; inline-size: auto; flex: none; }
  .wordmark__mark .mark-dark { fill: oklch(var(--lch-blue-dark)); } .wordmark__mark .mark-light { fill: oklch(var(--lch-blue-light)); }
  .wordmark__text { font-weight: 600; font-size: 1.05rem; line-height: 1; }
  .wordmark__product { color: oklch(var(--lch-blue-dark)); }
  .wordmark--lg .wordmark__mark { block-size: 1.6rem; } .wordmark--lg .wordmark__text { font-size: 1.45rem; }
  .wordmark--sm .wordmark__mark { block-size: 0.95rem; } .wordmark--sm .wordmark__text { font-size: 0.95rem; }
  .side__brand { flex-direction: row; display: flex; padding: 0.3rem 0.5rem 0.8rem; border-block-end: 1px solid var(--color-ink-lighter); margin-inline: -0.7rem; padding-inline: 1.2rem; }
  /* active navigation item as in HUB: filled indigo */
  .navlink.on, .navlink[aria-current] { background: oklch(var(--lch-blue-medium)); color: var(--color-ink-inverted); }
  .navlink.on .navcount, .navlink[aria-current] .navcount { background: rgb(255 255 255 / 0.22); color: var(--color-ink-inverted); }
  .btn--primary { --btn-bg: oklch(var(--lch-blue-dark)); --btn-border: oklch(var(--lch-blue-dark)); }
  .topbar .brand--logo .brand__name { display: flex; align-items: center; gap: 0.6rem; }
}

@layer components {
  .navback { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem; border-radius: var(--radius-input); color: var(--color-ink-dark); text-decoration: none; font-weight: 600; }
  .navback:hover { background: var(--color-ink-lightest); color: var(--color-ink); }
  .navback span { font-size: 1.1em; }
  .side__project { display: grid; gap: 0.1rem; padding: 0.2rem 0.6rem 0.4rem; font-size: var(--text-normal); line-height: 1.25; font-family: var(--font-heading); }
  .navlink__go { margin-inline-start: auto; color: var(--color-ink-medium); }
  .navlink .navcount + .navlink__go { margin-inline-start: 0.2rem; }
}

/* compact density (16 Oct 2026): HUB-like, no Fizzy scale-up */
@layer components {
  body { font-size: var(--text-normal); line-height: 1.45; }
  .panel { padding: 1rem 1.15rem; gap: 0.8rem; @media (min-width: 640px) { padding: 1.15rem 1.4rem; } }
  .card { @media (min-width: 640px) { padding: 1rem 1.4rem; gap: 0.55rem; } }
  .btn { min-block-size: 2.25rem; padding: 0.35rem 0.95rem; font-size: var(--text-small); }
  .btn--small { min-block-size: 1.85rem; padding: 0.2rem 0.7rem; font-size: var(--text-x-small); }
  .input, .select { padding: 0.4rem 0.65rem; font-size: max(16px, var(--text-small)); }
  @media (min-width: 640px) { .input, .select { font-size: var(--text-small); } }
  .input--big { min-block-size: 4.2em; font-size: var(--text-normal); }
  .choice { padding: 0.4rem 0.8rem 0.4rem 0.9rem; min-block-size: 2.6rem; }
  .card__situation { @media (min-width: 640px) { font-size: 1.1rem; } }
  .shell { grid-template-columns: 14rem minmax(0, 1fr); @media (max-width: 899px) { grid-template-columns: minmax(0, 1fr); } }
  .side { padding: 0.8rem 0.6rem; gap: 0.9rem; font-size: var(--text-small); }
  .navlink { padding: 0.32rem 0.55rem; }
  .side__label { font-size: 0.68rem; }
  .pcard { padding: 0.9rem 1.2rem; gap: 0.4rem var(--inline-space-double); }
  .pcard__title { font-size: var(--text-normal); }
  .stat__value { font-size: var(--text-large); }
  .kpis { gap: var(--inline-space); }
  .page { padding-block: 1rem; gap: 0.8rem; }
  .topbar__inner { block-size: 2.4rem; }
  .table td, .table th { padding: 0.35rem 0.5rem; }
  .rcard { padding: 0.65rem 0.9rem; }
  .rcard__text { font-size: var(--text-normal); }
  /* AI help popover */
  .aihelp { position: relative; }
  .aihelp > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
  .aihelp > summary::-webkit-details-marker { display: none; }
  .aihelp__q { display: inline-grid; place-items: center; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; border: 1px solid var(--color-ink-light); color: var(--color-ink-dark); font-size: 0.7rem; font-weight: 700; }
  .aihelp[open] .aihelp__q { background: var(--color-ink); color: var(--color-ink-inverted); border-color: var(--color-ink); }
  .aihelp__pop { position: absolute; inset-block-end: calc(100% + 0.4rem); inset-inline-start: 0; inline-size: 12.4rem; padding: 0.7rem 0.8rem; border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-ink-inverted); font-size: var(--text-x-small); line-height: 1.45; box-shadow: var(--shadow); z-index: 50; }
  .aihelp__pop a { color: inherit; }
  .aihelp--down .aihelp__pop { inset-block: calc(100% + 0.4rem) auto; inline-size: 22rem; max-inline-size: 80vw; }
  .filters { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: var(--text-small); }
  .filters .input[type=search] { flex: 1 1 14rem; min-inline-size: 12rem; }
  .filters .select { inline-size: auto; max-inline-size: 13rem; font-size: var(--text-x-small); }
  .filters--on .select:has(option:checked:not([value=""])) { border-color: var(--color-link); background-color: var(--color-selected); }
  .filters__check { display: inline-flex; gap: 0.3rem; align-items: center; font-size: var(--text-x-small); color: var(--color-ink-dark); white-space: nowrap; }
  .lrow[hidden], .sheet__row[hidden] { display: none; }
  .menu { position: relative; }
  form[data-mode=new] [data-when=exc], form:not([data-mode=exc]) [data-when=exc], form[data-mode=exc] [data-when=new] { display: none; }
  .addexc > summary { list-style: none; inline-size: fit-content; max-inline-size: 100%; white-space: normal; }  /* the label wraps on a 320 px phone */ .addexc > summary::-webkit-details-marker { display: none; } .addexc:not([open]) { padding: 0; background: none; border: 0; box-shadow: none; }
  .asof > summary { cursor: pointer; color: var(--color-link); text-align: end; } .asof[open] > summary { margin-block-end: 0.3rem; }
  .menu > summary { list-style: none; } .menu > summary::-webkit-details-marker { display: none; }
  .menu__pop { position: absolute; inset-block-start: calc(100% + 0.3rem); inset-inline-end: 0; z-index: 40; inline-size: 18rem; display: grid; padding: 0.35rem; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); box-shadow: var(--shadow); font-size: var(--text-small); }
  .menu__pop a { padding: 0.4rem 0.55rem; border-radius: var(--radius-input); color: var(--color-ink); text-decoration: none; }
  .menu__pop a:hover { background: var(--color-selected); }
  .menu__note { margin: 0.3rem 0.55rem 0.2rem; font-size: var(--text-x-small); color: var(--color-ink-dark); }
}
@layer components {
  .todo { list-style: none; padding: 0; margin: 0; display: grid; }
  .todo li { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; border-block-start: 1px solid var(--color-ink-lighter); font-size: var(--text-small); }
  .todo li:first-child { border-block-start: 0; }
  .todo li > span:nth-child(2) { flex: 1; }
  .todo__dot, .qitem__dot { flex: none; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--color-ink-light); }
  .todo__dot--red, .qitem__dot--red { background: var(--color-red); } .todo__dot--warn, .qitem__dot--yellow { background: var(--color-yellow); }
  .todo__dot--ok, .qitem__dot--green { background: var(--color-green); } .qitem__dot--violet { background: var(--color-violet); }
  .queue { display: grid; gap: 0.4rem; }
  .qitem { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.9rem; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); color: var(--color-ink); text-decoration: none; }
  .qitem:hover { border-color: oklch(var(--lch-blue-light)); }
  .qitem--waiting { opacity: 0.65; }
  /* the action shows on the row in focus; the whole row opens the detail */
  .qitem__action { display: none; }
  .qitem__go { flex: none; color: var(--color-ink-medium); }
  .qitem:hover .qitem__action, .qitem:focus-visible .qitem__action, .qitem.is-selected .qitem__action { display: inline-flex; }
  .qitem:hover .qitem__go, .qitem:focus-visible .qitem__go, .qitem.is-selected .qitem__go { display: none; }
  @media (hover: none) { .qitem__action { display: inline-flex; } .qitem__go { display: none; } }
  .qitem__body { flex: 1; display: grid; gap: 0.1rem; min-inline-size: 0; font-size: var(--text-small); }
  .qitem__meta { font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .qitem__text { color: var(--color-ink-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* navigation v2: icons, list rows, project header, detail panel */
@layer components {
  .ic { inline-size: 1rem; block-size: 1rem; flex: none; }
  .navlink { justify-content: flex-start; gap: 0.55rem; color: var(--color-ink-dark); font-weight: 500; }
  .navlink > span:not(.navcount):not(.segdot) { flex: 1; min-inline-size: 0; }
  .navlink .ic { color: var(--color-ink-medium); }
  .navlink.on .ic, .navlink[aria-current] .ic { color: currentColor; }
  .navlink--project { font-weight: 500; }
  .navlink--muted { color: var(--color-ink-medium); }
  .side__group--end { margin-block-start: auto; }
  .side__foot { margin-block-start: 0; }
  .segdot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 0.15rem; flex: none; background: oklch(var(--lch-blue-medium)); }
  .segdot--telecom { background: oklch(var(--lch-violet-medium)); } .segdot--fmcg { background: oklch(var(--lch-green-medium)); }
  .segdot--coffee { background: oklch(var(--lch-uncolor-medium)); } .segdot--mall { background: oklch(var(--lch-aqua-medium)); }
  .segdot--fuel { background: oklch(var(--lch-yellow-medium)); } .segdot--pharma { background: oklch(var(--lch-pink-medium)); }
  .btn .ic { inline-size: 0.95rem; block-size: 0.95rem; }
  .iconbtn { display: inline-grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; border-radius: var(--radius-input); color: var(--color-ink-dark); }
  .iconbtn:hover { background: var(--color-ink-lightest); color: var(--color-ink); }
  .iconbtn[hidden] { display: none; }
  /* project header */
  .phead { display: grid; gap: 0.45rem; }
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .crumbs a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; } .crumbs a:hover { color: var(--color-link); }
  .crumbs .ic { inline-size: 0.85rem; block-size: 0.85rem; }
  .phead__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; }
  .phead__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
  .ptabs { display: flex; gap: 0.15rem; overflow-x: auto; border-block-end: 1px solid var(--color-ink-lighter); margin-block-end: 0.2rem; }
  .ptab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; font-size: var(--text-small); font-weight: 500; color: var(--color-ink-dark); text-decoration: none; border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap; }
  .ptab:hover { color: var(--color-ink); }
  .ptab.on { color: oklch(var(--lch-blue-dark)); border-block-end-color: oklch(var(--lch-blue-dark)); font-weight: 600; }
  .ptab .ic { inline-size: 0.95rem; block-size: 0.95rem; }
  /* list rows */
  .lrows { display: grid; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); background: var(--color-canvas); overflow: hidden; }
  .lrow { display: flex; align-items: center; gap: 0.75rem; inline-size: 100%; padding: 0.55rem 0.8rem; text-align: start; border-block-start: 1px solid var(--color-ink-lighter); border-inline-start: 3px solid transparent; background: var(--color-canvas); cursor: pointer; }
  .lrow:first-child { border-block-start: 0; }
  .lrow:hover { background: var(--color-selected); }
  .lrow--navrh { border-inline-start-color: var(--color-yellow); } .lrow--potvrdene { border-inline-start-color: oklch(var(--lch-blue-medium)); }
  .lrow--schvalene { border-inline-start-color: var(--color-green); } .lrow--neplati { opacity: 0.55; } .lrow--neplati .lrow__title { text-decoration: line-through; }
  .lrow--blocking { border-inline-start-color: var(--color-red); }
  .lrow__icon { flex: none; display: inline-grid; place-items: center; inline-size: 1.85rem; block-size: 1.85rem; border-radius: var(--radius-input); background: var(--color-ink-lightest); color: var(--color-ink-dark); }
  .lrow__icon--red { background: oklch(var(--lch-red-lightest)); color: oklch(var(--lch-red-dark)); }
  .lrow__icon--yellow { background: oklch(var(--lch-yellow-lightest)); color: oklch(var(--lch-yellow-darker)); }
  .lrow__icon--violet { background: oklch(var(--lch-violet-lightest)); color: oklch(var(--lch-violet-dark)); }
  .lrow__icon--green { background: oklch(var(--lch-green-lightest)); color: oklch(var(--lch-green-dark)); }
  .lrow__icon--blue { background: oklch(var(--lch-blue-lightest)); color: oklch(var(--lch-blue-dark)); }
  .lrow__body { flex: 1; min-inline-size: 0; display: grid; gap: 0.1rem; }
  .lrow__title.obs-clamp { -webkit-line-clamp: 4; } .obs-note { opacity: 0.6; }
  .obs-claims { @media (max-width: 640px) { & thead { display: none; } & tr, & td { display: block; } & tr { padding-block: 0.4rem; border-block-end: 1px solid var(--color-ink-lightest); } & td { padding: 0.1rem 0; border: 0; } & td::before { content: attr(data-l) ": "; color: var(--color-ink-medium); font-family: var(--font-sans); } } }
  .lrow__title { font-size: var(--text-small); color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lrow__meta { font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .lrow__meta .ic { display: inline-block; inline-size: 0.85rem; block-size: 0.85rem; margin-inline-end: 0.3rem; vertical-align: -0.15em; color: var(--color-ink-medium); }
  .lrow { @media (max-width: 640px) { flex-wrap: wrap; row-gap: 0.35rem; } }
  .lrow__tags { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end;
    @media (max-width: 640px) { order: 3; flex-basis: 100%; justify-content: flex-start; padding-inline-start: 2.6rem; &:empty { display: none; } } }
  .lrow__mtag { display: none; }  /* the badges themselves wrap under the row on a phone */
  .lrow__go { color: var(--color-ink-medium); }
  .qitem--red { border-inline-start: 3px solid var(--color-red); } .qitem--yellow { border-inline-start: 3px solid var(--color-yellow); }
  .qitem--green { border-inline-start: 3px solid var(--color-green); } .qitem--violet { border-inline-start: 3px solid var(--color-violet); }
  /* detail panel */
  .dpanel-shade { position: fixed; inset: 0; background: rgb(0 0 0 / 0.1); z-index: 45; }
  .dpanel { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(46rem, 100vw); z-index: 50; background: var(--color-canvas); border-inline-start: 1px solid var(--color-ink-lighter); box-shadow: -4px 0 16px rgb(0 0 0 / 0.06); display: flex; flex-direction: column; animation: dpanel-in 160ms var(--ease-out-expo); }
  .dpanel[hidden], .dpanel-shade[hidden] { display: none; }
  @keyframes dpanel-in { from { transform: translateX(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
  .dpanel__bar { display: flex; align-items: center; gap: 0.25rem; padding: 0.45rem 0.8rem; border-block-end: 1px solid var(--color-ink-lighter); }
  .dpanel__title { margin-inline-start: 0.4rem; font-family: var(--font-mono); font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .dpanel__body { flex: 1; overflow-y: auto; }
  .panelbody { padding: 1rem 1.2rem; display: grid; gap: 0.8rem; }
  .panelbody .page { padding: 0; inline-size: auto; }
  .panelbody .panel { padding: 0; border: 0; box-shadow: none; }
  .panelbody .rcard { border-inline-start-width: 4px; }
  .panel-open { overflow: hidden; }
}
@layer components {
  .pagehead { align-items: center; }
  .ptable { display: grid; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); overflow: hidden; }
  .ptable__head, .ptable__row { display: grid; grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1.3fr) minmax(10rem, 1.2fr) 6rem; gap: 1rem; align-items: center; padding: 0.6rem 1rem;
    @media (max-width: 760px) { grid-template-columns: 1fr auto; } }
  .ptable__head { font-size: var(--text-x-small); color: var(--color-ink-dark); font-weight: 600; background: var(--color-canvas-tint); border-block-end: 1px solid var(--color-ink-lighter); @media (max-width: 760px) { display: none; } }
  .ptable__row { color: var(--color-ink); text-decoration: none; border-block-start: 1px solid var(--color-ink-lighter); }
  .ptable__row:first-of-type { border-block-start: 0; }
  .ptable__row:hover { background: var(--color-selected); }
  .ptable__name { display: flex; align-items: center; gap: 0.6rem; min-inline-size: 0; }
  .ptable__name > span:last-child { display: grid; min-inline-size: 0; }
  .ptable__name b { font-size: var(--text-small); }
  .ptable__prog { display: grid; gap: 0.25rem; @media (max-width: 760px) { display: none; } }
  .ptable__prog .meter { flex: none; inline-size: 100%; block-size: 0.35rem; }
  .ptable__state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
  .ptable__when { @media (max-width: 760px) { display: none; } }
  .tag .ic { inline-size: 0.85rem; block-size: 0.85rem; }
  .tag { gap: 0.3rem; font-size: var(--text-x-small); }
}
@layer components {
  /* split view, like a mail app: the list stays, the detail sits on the right */
  @media (min-width: 1100px) {
    .panel-split .dpanel { inline-size: clamp(30rem, 44vw, 50rem); box-shadow: none; animation: none; }
    .panel-split .shell__main { margin-inline-end: clamp(30rem, 44vw, 50rem); }
    .panel-split .shell .page { --main-width: 100%; }
  }
  [data-panel-item].is-selected { background: var(--color-selected); box-shadow: inset 3px 0 0 oklch(var(--lch-blue-dark)); }
  .qitem.is-selected { border-color: oklch(var(--lch-blue-light)); }
  [data-panel-item]:focus-visible { outline: 2px solid oklch(var(--lch-blue-medium)); outline-offset: -2px; }
  .kbdhint { font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .kbdhint kbd { display: inline-block; }
}
@layer components {
  /* the wording a person approves: always set apart */
  .approve { display: grid; gap: 0.3rem; padding: 0.7rem 0.85rem; border-radius: var(--radius-card); background: oklch(var(--lch-blue-lightest)); border: 1px solid oklch(var(--lch-blue-lighter)); border-inline-start: 4px solid oklch(var(--lch-blue-dark)); }
  .approve__label { font-size: var(--text-x-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(var(--lch-blue-darker)); }
  .approve__text { margin: 0; font-size: var(--text-medium); line-height: 1.4; font-weight: 500; color: var(--color-ink); }
  .approve__md { display: grid; gap: 0.5em; } .approve__md p, .approve__md ol, .approve__md ul { margin: 0; } .approve__md ol, .approve__md ul { padding-inline-start: 1.4em; display: grid; gap: 0.3em; }
  .mdtable { border-collapse: collapse; font-size: var(--text-x-small); font-variant-numeric: tabular-nums; } .mdtable th, .mdtable td { text-align: start; padding: 0.25em 0.6em; border-block-end: 1px solid oklch(var(--lch-ink-lightest)); } .mdtable th { font-weight: 600; }
  .approve__input { font-size: var(--text-normal); font-weight: 500; line-height: 1.4; background: var(--color-canvas); border-color: oklch(var(--lch-blue-light)); }
  .approve__hint { font-size: var(--text-x-small); color: var(--color-ink-dark); }
  .rcard--neplati .approve { background: var(--color-ink-lightest); border-inline-start-color: var(--color-ink-light); }
  .rcard--neplati .approve__text { text-decoration: line-through; color: var(--color-ink-dark); }
  .rcard--schvalene .approve { background: oklch(var(--lch-green-lightest)); border-color: oklch(var(--lch-green-lighter)); border-inline-start-color: var(--color-green); }
  .rcard--schvalene .approve__label { color: oklch(var(--lch-green-darker)); }
}
@layer components {
  .seg { display: inline-flex; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-input); overflow: hidden; inline-size: fit-content; background: var(--color-canvas); }
  .seg__btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; font-size: var(--text-x-small); font-weight: 600; color: var(--color-ink-dark); text-decoration: none; }
  .seg__btn.on { background: oklch(var(--lch-blue-lightest)); color: oklch(var(--lch-blue-dark)); }
  .seg__btn .ic { inline-size: 0.85rem; block-size: 0.85rem; }
  .grid-wrap { overflow-x: auto; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); background: var(--color-canvas); }
  .sheet { border-collapse: collapse; inline-size: 100%; min-inline-size: 72rem; font-size: var(--text-small); }
  .sheet th { position: sticky; inset-block-start: 0; background: var(--color-canvas-tint); text-align: start; font-size: var(--text-x-small); font-weight: 600; color: var(--color-ink-dark); padding: 0.4rem 0.5rem; border-block-end: 1px solid var(--color-ink-lighter); white-space: nowrap; }
  .sheet td { border-block-end: 1px solid var(--color-ink-lighter); border-inline-end: 1px solid var(--color-ink-lightest); padding: 0; vertical-align: top; }
  .sheet__id { padding: 0.45rem 0.5rem !important; color: var(--color-ink-dark); white-space: nowrap; font-size: var(--text-x-small); }
  .sheet__text { inline-size: 34%; }
  .cell { inline-size: 100%; border: 0; border-radius: 0; background: transparent; padding: 0.42rem 0.5rem; font: inherit; font-size: var(--text-small); color: var(--color-ink); resize: none; overflow: hidden; }
  select.cell { appearance: none; cursor: pointer; padding-inline-end: 1rem; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-medium) 50%), linear-gradient(135deg, var(--color-ink-medium) 50%, transparent 50%); background-position: calc(100% - 0.55rem) 55%, calc(100% - 0.3rem) 55%; background-size: 0.25rem 0.25rem; background-repeat: no-repeat; }
  .cell:focus { outline: 2px solid oklch(var(--lch-blue-medium)); outline-offset: -2px; background: var(--color-canvas); }
  .sheet tr:hover td { background: oklch(var(--lch-blue-lightest) / 0.5); }
  .sheet__row--schvalene .sheet__id { box-shadow: inset 3px 0 0 var(--color-green); } .sheet__row--navrh .sheet__id { box-shadow: inset 3px 0 0 var(--color-yellow); }
  .sheet__row--potvrdene .sheet__id { box-shadow: inset 3px 0 0 oklch(var(--lch-blue-medium)); } .sheet__row--neplati td { opacity: 0.55; }
  .sheet__state { white-space: nowrap; padding: 0.15rem 0.3rem !important; vertical-align: middle !important; }
  .sheet__saved { font-size: var(--text-x-small); color: var(--color-ink-dark); margin-inline-start: 0.3rem; }
  .sheet__saved--ok { color: oklch(var(--lch-green-dark)); } .sheet__saved--err { color: oklch(var(--lch-red-dark)); }
}
@layer components {
  /* fixed narrow columns, the wording takes the rest; scrolls sideways only on small screens */
  .sheet { min-inline-size: 68rem; table-layout: fixed; }
  .sheet th:nth-child(1) { inline-size: 3.9rem; } .sheet th:nth-child(2) { inline-size: auto; } .sheet th:nth-child(3) { inline-size: 6.9rem; }
  .sheet th:nth-child(4) { inline-size: 6rem; } .sheet th:nth-child(5) { inline-size: 6.4rem; } .sheet th:nth-child(6) { inline-size: 7.6rem; }
  .sheet th:nth-child(7) { inline-size: 7.2rem; } .sheet th:nth-child(8) { inline-size: 7.6rem; } .sheet th:nth-child(9) { inline-size: 8rem; } .sheet th:nth-child(10) { inline-size: 2.8rem; }
  .sheet input[type=date].cell { font-size: var(--text-x-small); padding-inline: 0.35rem; }
  .sheet__state { white-space: normal !important; text-align: center; } .sheet__saved { display: block; margin: 0; line-height: 1.2; }
  .panel:has(> .grid-wrap) { padding-inline: clamp(0.8rem, 1.4vw, 1.4rem); }
  .sheet td > span.txt-x-small { display: block; padding: 0.45rem 0.5rem; }
  select.cell { text-overflow: ellipsis; }
}

@layer components {
  .spark { inline-size: 100%; max-inline-size: 22rem; block-size: auto; }
  .spark__bar { fill: oklch(var(--lch-blue-light)); } .spark__bar--last { fill: oklch(var(--lch-blue-dark)); }
  .spark__label { font-size: 9px; fill: var(--color-ink-dark); }
  .spark__value { font-size: 10px; font-weight: 600; fill: var(--color-ink); font-variant-numeric: tabular-nums; }
}

/* client user screens (/moje, /p/…): 360 px first, 44 px touch targets, state in words as well as colour */
@layer modules {
  /* the client top bar (owner, 26. 10. 2026): logo, project switcher, user menu in one row at any width; the project's tabs below it */
  .cbar { background: var(--color-canvas); border-block-end: 1px solid var(--color-ink-lighter); }
  .cbar__inner { inline-size: min(100% - 2rem, var(--cshell-width)); margin-inline: auto; display: flex; align-items: center; gap: 0.5rem; min-block-size: 3.5rem; }
  .cbar__brand { flex: none; display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; color: inherit; text-decoration: none; }
  .cbar__brand:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-btn); }
  .cbar .wordmark__text { @media (max-width: 479px) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
  .cmenu { position: relative; min-inline-size: 0; }
  .cmenu--switch { flex: 0 1 auto; margin-inline-start: 0.75rem; @media (max-width: 479px) { margin-inline-start: 0.25rem; } }
  .cmenu--user { flex: 0 1 auto; margin-inline-start: auto; }
  .cmenu > summary { list-style: none; }
  .cmenu > summary::-webkit-details-marker { display: none; }
  .cmenu__btn { display: flex; align-items: center; gap: 0.5rem; min-block-size: 44px; padding-inline: 0.75rem; border: 1px solid transparent; border-radius: var(--radius-btn);
    cursor: pointer; font-size: var(--text-small); font-weight: 600; color: var(--color-ink); user-select: none; }
  .cmenu__btn:hover, .cmenu[open] > .cmenu__btn { background: var(--color-ink-lightest); }
  .cmenu__btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
  .cmenu--switch > .cmenu__btn { border-color: var(--color-ink-lighter); }
  .cmenu__here { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cmenu__caret { flex: none; inline-size: 0.45rem; block-size: 0.45rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; opacity: 0.55;
    transform: translateY(-0.12rem) rotate(45deg); }
  .cmenu[open] .cmenu__caret { transform: translateY(0.12rem) rotate(225deg); }
  .cmenu--user > .cmenu__btn { padding-inline: 0.35rem 0.65rem; font-weight: 400; color: var(--color-ink-dark); @media (max-width: 639px) { padding-inline: 0.35rem; .cmenu__caret { display: none; } } }
  .cmenu__avatar { flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: oklch(var(--lch-blue-lightest));
    color: var(--color-blue); border: 1px solid oklch(var(--lch-blue-lighter)); font-size: var(--text-small); font-weight: 700; }
  .cmenu__who { min-inline-size: 0; max-inline-size: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @media (max-width: 639px) { display: none; } }
  .cmenu__panel { position: absolute; z-index: 40; inset-block-start: calc(100% + 0.35rem); inset-inline-start: 0; inline-size: max-content; min-inline-size: 17rem;
    max-inline-size: min(24rem, 100vw - 2rem); display: grid; gap: 0.25rem; padding: 0.35rem; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius-panel); box-shadow: var(--shadow); }
  .cmenu__panel--end { inset-inline: auto 0; }
  .cmenu__label { margin: 0; padding: 0.45rem 0.6rem 0.15rem; font-size: var(--text-x-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dark); }
  .cmenu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-block-size: 55vh; overflow-y: auto; }
  .cmenu__list--more { border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: 0.3rem; }
  .cmenu__item { display: grid; align-content: center; min-block-size: 44px; padding: 0.35rem 0.6rem 0.35rem 0.75rem; border-radius: var(--radius-btn);
    border-inline-start: 3px solid transparent; font-size: var(--text-small); color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
  .cmenu__item:hover { background: var(--color-ink-lightest); }
  .cmenu__item:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
  .cmenu__item[aria-current] { border-inline-start-color: var(--color-blue); background: var(--color-ink-lightest); font-weight: 600; }
  .cmenu__acc { font-size: var(--text-x-small); color: var(--color-ink-dark); font-weight: 400; }
  .cmenu__email { margin: 0; padding: 0.5rem 0.6rem 0.6rem; font-size: var(--text-small); color: var(--color-ink-dark); overflow-wrap: anywhere; border-block-end: 1px solid var(--color-ink-lighter); }
  .cmenu__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.3rem 0.35rem 0.3rem 0.6rem; }
  .cmenu__row .cmenu__label { padding: 0; }
  .cmenu .lang button { min-block-size: 44px; min-inline-size: 44px; }
  .cmenu__out { inline-size: 100%; }
  /* the project's tabs: the second row of the bar, the same width; on a phone it scrolls sideways instead of wrapping */
  .cbar__tabs { border-block-start: 1px solid var(--color-ink-lightest); }
  .ctabs { inline-size: min(100% - 2rem, var(--cshell-width)); margin-inline: auto; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; }
  .ctab { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 44px; padding-inline: 0.75rem; border-block-end: 3px solid transparent; white-space: nowrap;
    font-weight: 600; font-size: var(--text-small); color: var(--color-ink-dark); text-decoration: none; }
  .ctab:first-child { margin-inline-start: -0.75rem; }
  .ctab:hover { color: var(--color-ink); background: var(--color-ink-lightest); }
  .ctab:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
  .ctab[aria-current] { color: var(--color-ink); border-block-end-color: var(--color-blue); }
  .cpage { --main-width: var(--cshell-width); inline-size: min(100% - 2rem, var(--main-width)); gap: 1rem; padding-block: 1.5rem calc(4rem + env(safe-area-inset-bottom, 0px)); }
  /* one width for every client page: cards, tables and the questionnaire fill it, plain prose paragraphs keep a reading measure */
  :is(.cpage, .cq .page) p:not(.flash) { max-inline-size: var(--cread-measure); }
  .cprojects { @media (min-width: 640px) { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); align-items: start; } }
  .cpage h1 { font-size: var(--text-x-large); }
  .cpage .btn, .cbar .btn, .cq-exit { min-block-size: 44px; padding-inline: 1rem; font-size: var(--text-small); }
  .csignin .btn, .csignin .input { min-block-size: 44px; }
  /* the rules questionnaire on a phone: every control a 44 px touch target */
  .cq { @media (max-width: 639px) {
    .topbar__inner { block-size: auto; min-block-size: 3.25rem; }
    .lang button, .btn, .btn--small, .topbar .btn--small, .step { min-block-size: 44px; }
    .lang button { min-inline-size: 44px; }
    .mic { min-block-size: 44px; }
    .with-mic .input { padding-block-end: 3.9em; }
  } }
  /* the questionnaire's top bar at phone width: the company name stays for screen readers, the product name and the controls fit */
  .topbar .wordmark__company, .cbar .wordmark__company { @media (max-width: 419px) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
  .chint { color: var(--color-ink-dark); }
  .cback { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
  .cstatus:empty { display: none; }
  .flash--warn { background: oklch(var(--lch-yellow-lightest)); border-color: oklch(var(--lch-yellow-light)); color: oklch(var(--lch-yellow-darker)); }
  .cprojects, .chistory, .crec__others ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
  .cproject { display: grid; gap: 0.3rem; padding: 0.9rem 1rem; min-block-size: 44px; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-panel); color: inherit; text-decoration: none; }
  .cproject:hover { border-color: var(--color-blue); }
  .cproject__name { font-family: var(--font-heading); font-size: var(--text-medium); font-weight: 600; }
  .cproject__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--text-small); color: var(--color-ink-dark); }
  .chistory li { display: grid; gap: 0.2rem; padding: 0.7rem 0.9rem; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); overflow-wrap: anywhere; }
  .chistory__action { font-weight: 600; }
  .crec { display: grid; gap: 0.7rem; padding: 1rem; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-panel); overflow-wrap: anywhere; @media (min-width: 640px) { padding: 1.15rem 1.4rem; } }
  .crec__title { font-size: var(--text-medium); line-height: 1.3; scroll-margin-block-start: 1.5rem; }
  .crec__title:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
  /* EXP-175: a client card as the sales deck draws it: a stripe and a tag in the card's tone, the text stays ink. A step is blue
     (primary action), a question violet, a tip by topic: reviews aqua, competition yellow (orange), surroundings pink, trend blue */
  .crec { --tone: var(--color-blue); border-inline-start: 4px solid var(--tone); }
  .crec--question { --tone: var(--color-violet); }
  .crec--rule { --tone: var(--color-ink-dark); }
  .crec--knowledge { --tone: var(--color-aqua); }
  .crec--locked { --tone: var(--color-red); }
  .ctip[data-topic="reviews"] { --tone: var(--color-aqua); }
  .ctip[data-topic="competition"] { --tone: var(--color-yellow); }
  .ctip[data-topic="surroundings"] { --tone: var(--color-pink); }
  .ctag { justify-self: start; margin: 0; padding: 0.2rem 0.55rem; border-radius: 0.4rem; font-size: var(--text-x-small); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: color-mix(in oklch, var(--tone) 70%, black); background: color-mix(in oklch, var(--tone) 12%, white); }
  .ctag__week { font-weight: 500; letter-spacing: 0; text-transform: none; }
  .ctag .ic { display: inline-block; inline-size: 0.85rem; block-size: 0.85rem; margin-inline-end: 0.3rem; vertical-align: -0.15em; }
  /* the basic data's completeness: a yellow strip above the recommendations until everything is in */
  .cbasics { display: grid; gap: 0.45rem; padding: 0.8rem 1rem; border-radius: var(--radius-panel); background: oklch(var(--lch-yellow-lightest));
    border: 1px solid oklch(var(--lch-yellow-light)); border-inline-start: 4px solid var(--color-yellow); }
  .cbasics__title { font-size: var(--text-normal); margin: 0; }
  .cbasics__bar { block-size: 0.5rem; border-radius: 99rem; background: oklch(var(--lch-yellow-lighter)); overflow: hidden; }
  .cbasics__bar b { display: block; block-size: 100%; background: var(--color-yellow); }
  .cbasics__list { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.2rem; font-size: var(--text-small); }
  .cbasics__own { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; font-size: var(--text-small); }
  /* „Podklady“: collapsed under the card, a quiet link-coloured summary; inside, each source on its own tinted row */
  .cpod > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; min-block-size: 44px; font-size: var(--text-small); font-weight: 600; color: var(--color-link); }
  .cpod__n { font-weight: 400; color: var(--color-ink-dark); }
  .cpod__body { display: grid; gap: 0.5rem; }
  .cpod__item { display: grid; gap: 0.3rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-input); background: var(--color-ink-lightest); font-size: var(--text-small); }
  .cpod__item p, .cpod__quote, .cpod__shot { margin: 0; }
  .cpod__label { font-weight: 600; }
  .cpod__label a { overflow-wrap: anywhere; }
  /* where the source was read, with the icons the source itself shows it with */
  .csrc { display: inline-block; inline-size: 1rem; block-size: 1rem; margin-inline-end: 0.35rem; vertical-align: -0.2em; color: var(--color-ink-medium); }
  /* the brand's logo beside the source, as the source shows it; decorative, the brand is named in the text */
  .clogo { display: inline-block; inline-size: 1rem; block-size: 1rem; object-fit: contain; border-radius: 0.2rem; margin-inline-end: 0.35rem; vertical-align: -0.2em; background: white; }
  .cpod__stars { color: oklch(var(--lch-yellow-darker)); letter-spacing: 0.05em; }
  .cpod__quote { padding-inline-start: 0.7rem; border-inline-start: 2px solid var(--color-ink-light); font-style: italic; color: var(--color-ink-darker); }
  .cpod__shot { display: grid; gap: 0.25rem; }
  .cpod__shot img { display: block; inline-size: auto; max-inline-size: 100%; max-block-size: 22rem; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-input); background: var(--color-canvas); }
  .crec__facts { display: grid; gap: 0.1rem; margin: 0; font-size: var(--text-small); @media (min-width: 640px) { grid-template-columns: 8rem minmax(0, 1fr); gap: 0.45rem 1rem; } }
  .crec__facts > div { display: contents; }
  .crec__facts dt { color: var(--color-ink-dark); @media (max-width: 639px) { margin-block-start: 0.45rem; &:first-child { margin-block-start: 0; } } }
  .crec__facts dd { margin: 0; }
  .crec__mine { font-size: var(--text-small); padding: 0.45rem 0.7rem; border-radius: var(--radius-input); background: var(--color-ink-lightest); }
  .crec__mark { font-weight: 700; }
  .crec__note { font-size: var(--text-small); color: var(--color-ink-dark); }
  .crec__form { display: grid; gap: 0.4rem; }
  .crec__label { font-size: var(--text-small); font-weight: 600; color: var(--color-ink-dark); }
  .crec__opt { font-weight: 400; }
  .crec__thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.2rem; }
  .crec__thumb { flex: 1 1 7rem; }
  .crec__thumb[aria-pressed="true"] { --btn-bg: var(--color-blue); --btn-fg: var(--color-ink-inverted); --btn-border: var(--color-blue); }
  .crec__thumb[aria-pressed="true"]::before { content: "✓" / ""; font-weight: 700; }
  .crec__who { margin: 0; }
  .crec__restored { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4em; }
  .crec__restored .btn { min-block-size: 1.5rem; padding: 0; font-size: inherit; color: var(--color-link); text-decoration: underline; }
  .csignin__lang { display: flex; justify-content: flex-end; }
  .csignin__who { margin: 0; font-size: var(--text-small); overflow-wrap: anywhere; }
  /* the questionnaire under the client top bar: below 1024 px its steps and tools in a row above the content, wider both in the sidebar */
  .cq-bar { inline-size: min(100% - 2rem, var(--cshell-width)); margin-inline: auto; padding-block: 0.75rem 0; display: grid; gap: 0.5rem; @media (min-width: 1024px) { display: none !important; } }
  .cq-bar .steps { inline-size: 100%; padding: 0; }
  .cq-bar__tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; }
  .cq-exit { justify-self: start; }
  .cside .cq-exit { justify-self: stretch; }
  .cshell--bare { grid-template-columns: minmax(0, 1fr); }
  .cstores { background: var(--color-canvas); border-radius: var(--radius-input); @media (min-width: 640px) and (max-width: 700px) { display: table; } }
  /* below 640 px a row stacks: the store name on its own line, the three counts under it, each with its column's label; a long store name
     (Dr.Max Eurovea Pribinova 10) then wraps across the full width instead of widening the table past the screen */
  .cstores { @media (max-width: 639px) { display: block; overflow: visible;
    & thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    & tbody { display: block; }
    & tr { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 0.15rem 0.5rem; padding: 0.55rem 0.6rem; border-block-end: 1px solid var(--color-ink-lightest); }
    & th[scope="row"], & td { display: block; padding: 0; border: 0; min-inline-size: 0; overflow-wrap: break-word; }
    & th[scope="row"] { grid-column: 1 / -1; }
    & td { display: flex; flex-direction: column; justify-content: space-between; }  /* a count stays on one line with its neighbours under a two-line label */
    /* a column is at least as wide as its label's longest word, so a label wraps between words only („Recommendations“ whole at 360 px) */
    & td::before { content: attr(data-l) / ""; display: block; font-size: var(--text-x-small); color: var(--color-ink-dark); hyphens: none; overflow-wrap: normal; }
    & tr:hover td { background: none; } } }
  .cstores th[scope="row"] { color: var(--color-ink); font-weight: 600; }
  .cstores td { font-variant-numeric: tabular-nums; }
  .cstore h2 { font-size: var(--text-medium); scroll-margin-block-start: 1.5rem; }
  .cstore__recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
  .cstore__recs > li { display: grid; gap: 0.25rem; padding: 0.6rem 0.8rem; border-radius: var(--radius-input); background: var(--color-canvas); }
  .cstore__title { font-weight: 600; }
  .cstore__reacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; font-size: var(--text-small); }
  /* the stores' basic data a client fills in: one collapsed row per store, what it lacks as a yellow badge, the form inside */
  .cbasic h2 { font-size: var(--text-medium); scroll-margin-block-start: 1.5rem; }
  .cbasic__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  .cbasic__item { padding: 0.2rem 0.8rem; border-radius: var(--radius-input); background: var(--color-canvas); scroll-margin-block-start: 1.5rem; }
  .cbasic__item summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; min-block-size: 44px; cursor: pointer; }
  .cbasic__name { font-weight: 600; }
  .cbasic__open { margin-inline-start: auto; font-size: var(--text-small); font-weight: 600; color: var(--color-link); }
  .cbasic .input, .cbasic .select { min-block-size: 44px; }
  .cbasic .badge { white-space: normal; }
  /* C3: „Dlhodobý vývoj“, the trend observations as the AI wrote them */
  .clong__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
  .clong__item { display: grid; gap: 0.25rem; padding: 0.75rem 1rem; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-inline-start: 3px solid var(--color-link); border-radius: var(--radius-input); overflow-wrap: anywhere; }
  .clong__where { font-size: var(--text-small); color: var(--color-ink-dark); font-weight: 600; }
  .clong__text { margin: 0; line-height: 1.45; }
  .crec__reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-block-start: 0.3rem; }
  .crec__reasons > span { flex: 1 0 100%; }
  .crec__reason { min-block-size: 2.75rem; font-size: var(--text-small); }
  .crec__reason[aria-pressed="true"] { border-color: var(--color-link); background: var(--color-selected); color: var(--color-link); font-weight: 600; }
  .crec__others { border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: 0.6rem; display: grid; gap: 0.4rem; font-size: var(--text-small); }
  .crec__others h3 { font-size: var(--text-small); }
  .crec__ver { color: var(--color-ink-dark); }
  .crec__link { font-size: var(--text-small); }
  /* A5: one line on data that would sharpen the analysis, with the account-wide „Nezobrazovať“ beside it, under it when narrow */
  .crec__gap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
  .crec__gap p { margin: 0; flex: 1 1 18rem; }
  .crec__gap form { margin: 0; }
  .crec__ran { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
  .crec__ran p, .crec__ran form { margin: 0; }
  .outcomes__verdicts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.25rem 0 0.75rem; }
  /* stacked rows on a phone: the results table, and the method table so its value and source stay in view */
  .outcomes__table, .method__table { @media (max-width: 700px) {
    display: block; overflow-x: visible;
    thead { display: none; }
    tbody, tr, td { display: block; }
    tr { padding-block: 0.6rem; border-block-end: 1px solid var(--color-ink-lighter); }
    td { border: 0; padding: 0.1rem 0; }
    td[data-label]::before { content: attr(data-label) ": "; color: var(--color-ink-medium); font-size: 0.85em; }
  } }
  /* every section card's table has the same columns, so Hodnota and Zdroj line up down the page */
  .method__table { @media (min-width: 701px) { table-layout: fixed; inline-size: 100%; }
    .method__c-value { inline-size: 15rem; } .method__c-src { inline-size: 7rem; } .method__c-reset { inline-size: 12rem; } }
  .crec__link a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .cnote { margin-block-start: 0.5rem; }
  /* AI tips under the recommendations: lighter than a recommendation card, the fact first, quiet feedback buttons */
  .ctip { gap: 0.45rem; scroll-margin-block-start: 1.5rem; }
  .ctip[hidden], .ctips__more[hidden] { display: none; }  /* the topic filter hides cards; .crec sets display: grid */
  .ctip:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
  .ctip__fact { font-size: var(--text-normal); line-height: 1.35; }
  .ctip__meta { font-size: var(--text-small); color: var(--color-ink-dark); }
  .ctip__consider, .ctip__src { margin: 0; }
  .ctip__consider { padding: 0.55rem 0.75rem; border-radius: var(--radius-input); background: color-mix(in oklch, var(--tone) 7%, white); }
  .ctip__src a { overflow-wrap: anywhere; }
  .ctip__fb { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .ctip__btn { min-block-size: 44px; font-size: var(--text-small); }
  .ctip__btn[aria-pressed="true"] { border-color: var(--color-link); background: var(--color-selected); color: var(--color-link); font-weight: 600; }
  .ctips__filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .ctips__filter[hidden] { display: none; }
  .ctips__f { min-block-size: 44px; font-size: var(--text-small); }
  .ctips__f[aria-pressed="true"] { --btn-bg: var(--color-blue); --btn-fg: var(--color-ink-inverted); --btn-border: var(--color-blue); }
  .ctips__more > summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; font-weight: 600; color: var(--color-link); }
  .ctips__more > .stack { margin-block-start: 0.6rem; }
  /* the client manager's sections, approvals and people */
  .cpage h2[tabindex], .crec[tabindex], .clong__item[tabindex] { scroll-margin-block-start: 1.5rem; }
  .cpage h2[tabindex]:focus-visible, .crec[tabindex]:focus-visible, .clong__item[tabindex]:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
  .cdecide { display: flex; flex-wrap: wrap; align-items: start; gap: 0.5rem; }
  .cdecide__no { flex: 1 1 14rem; display: grid; gap: 0.5rem; }
  .cdecide__no > summary { justify-self: start; list-style: none; cursor: pointer; }
  .cdecide__no > summary::-webkit-details-marker { display: none; }
  .cdecide__no[open] > summary { --btn-bg: var(--color-ink-lightest); }
  .cconsult { display: grid; gap: 0.3rem; font-size: var(--text-small); border-block-start: 1px solid var(--color-ink-lighter); padding-block-start: 0.8rem; }
  .cconsult h2 { font-size: var(--text-small); }
  .cconsult ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
  .cconsult a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .cpage summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
  .cpeople summary { display: flex; align-items: center; min-block-size: 44px; cursor: pointer; }
  .cpeople .input, .cpeople .select { min-block-size: 44px; }
  .cpeople fieldset > label:has(input[type=radio]) { display: flex; align-items: center; gap: 0.5rem; min-block-size: 44px; }
  .cpeople #add-member .field { flex: 1 1 10rem; min-inline-size: 0; }
  .cpeople #add-member .field:has(select) { flex-grow: 0; }
}

/* Správa (21. 10. 2026): the sidebar folds, projects grouped by account, the „Prihlásiť sa ako“ banner, the runs page */
@layer components {
  .side__top { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-inline: -0.6rem; padding: 0 0.6rem 0.6rem;
    border-block-end: 1px solid var(--color-ink-lighter); }
  .side__top .side__brand { border: 0; margin: 0; padding: 0.3rem 0.4rem; }
  .sidetoggle { display: none; inline-size: 2rem; block-size: 2rem; flex: none; place-items: center; border: 0; background: transparent; border-radius: var(--radius-input);
    color: var(--color-ink-dark); cursor: pointer; @media (min-width: 900px) { display: inline-grid; } }
  .sidetoggle:hover { background: var(--color-ink-lightest); color: var(--color-ink); }
  .sidetoggle .ic { inline-size: 1.2rem; block-size: 1.2rem; }
  .navlink--rail { display: none; }
  @media (min-width: 900px) { /* folded: a narrow icon rail; each item keeps its name (aria-label) and shows it as a tooltip */
    .side-collapsed .shell { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .side-collapsed .side { padding-inline: 0.4rem; overflow: visible; z-index: 40; }
    .side-collapsed .side__brand, .side-collapsed .side__label, .side-collapsed .side__group--projects,
    .side-collapsed .aihelp, .side-collapsed .side__who { display: none; }
    .side-collapsed .side__lang { flex-direction: column; justify-self: center; }
    .side-collapsed .side__top { border: 0; margin: 0; padding: 0; justify-content: center; }
    .side-collapsed .side__foot { border: 0; padding: 0; justify-items: center; }
    .side-collapsed .navlink--rail { display: flex; }
    .side-collapsed .navlink, .side-collapsed .side__logout { position: relative; justify-content: center; padding: 0; min-block-size: 2.5rem; inline-size: 2.5rem; justify-self: center; }
    .side-collapsed .navlink .ic, .side-collapsed .side__logout .ic { inline-size: 1.2rem; block-size: 1.2rem; }
    .side-collapsed .navlink > span:not(.navcount), .side-collapsed .side__logout > span { display: none; }
    .side-collapsed .navlink .navcount { position: absolute; inset-block-start: 0.1rem; inset-inline-end: 0.05rem; min-inline-size: 1rem; padding: 0 0.25rem;
      font-size: 0.62rem; line-height: 1.35; box-shadow: 0 0 0 2px var(--color-canvas); }
    .side-collapsed [data-tip]:hover::after, .side-collapsed [data-tip]:focus-visible::after {
      content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 0.5rem); inset-block-start: 50%; translate: 0 -50%; z-index: 50;
      padding: 0.25rem 0.55rem; border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-ink-inverted);
      font-size: var(--text-x-small); font-weight: 600; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); }
  }
  .navgroup { display: grid; gap: 1px; }
  .navgroup + .navgroup { margin-block-start: 0.15rem; }
  .navgroup__head { display: flex; align-items: center; gap: 0.4rem; inline-size: 100%; min-block-size: 2rem; padding: 0.3rem 0.55rem; border: 0; background: transparent;
    border-radius: var(--radius-input); font: inherit; font-weight: 600; color: var(--color-ink); text-align: start; cursor: pointer; min-inline-size: 0; }
  .navgroup__head:hover { background: var(--color-ink-lightest); }
  .navgroup__head .navlink__text { flex: 1; min-inline-size: 0; }
  .navgroup__chev { inline-size: 0.8rem; block-size: 0.8rem; color: var(--color-ink-medium); transition: transform 100ms ease-out; }
  .navgroup__head[aria-expanded="true"] .navgroup__chev { transform: rotate(90deg); }
  .navgroup__body { display: grid; gap: 1px; }
  .navgroup__body[hidden] { display: none; }
  .navgroup .navlink--sub { padding-inline-start: 1.55rem; }

  .actbar { position: sticky; inset-block-start: 0; z-index: 60; background: oklch(var(--lch-yellow-lighter)); color: oklch(var(--lch-yellow-darker)); border-block-end: 1px solid oklch(var(--lch-yellow-medium)); font-size: var(--text-small); }
  .actbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.75rem; padding: 0.4rem 1rem; text-align: center; }
  .actbar__inner p { margin: 0; overflow-wrap: anywhere; min-inline-size: 0; }
  .actbar .btn { min-block-size: 2.25rem; }
  @media (max-width: 559px) { /* a phone keeps most of its screen: text beside the button, smaller type */
    .actbar { font-size: var(--text-x-small); line-height: 1.3; }
    .actbar__inner { flex-wrap: nowrap; justify-content: space-between; text-align: start; padding: 0.35rem 0.75rem; }
    .actbar .btn { flex: none; inline-size: 6.5rem; white-space: normal; line-height: 1.15; padding-inline: 0.5rem; }
  }
  /* while the banner shows, the client's sticky bars sit under it (the height is measured in base.html; 3rem without JavaScript) */
  :root:has(.actbar) { --actbar-h: 3rem; }
  .topbar, .mobilebar { inset-block-start: var(--actbar-h, 0px); }
  .cside { inset-block-start: calc(1rem + var(--actbar-h, 0px)); }

  .runlist { display: grid; gap: 0.5rem; }
  .runrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: start; padding: 0.65rem 0.8rem; border: 1px solid var(--color-ink-lighter);
    border-radius: var(--radius-input); background: var(--color-canvas); @media (max-width: 559px) { grid-template-columns: minmax(0, 1fr); } }
  .runrow__title { font-weight: 600; overflow-wrap: anywhere; }
  .runrow__meta { font-size: var(--text-small); color: var(--color-ink-dark); overflow-wrap: anywhere; }
  .runrow__err { font-size: var(--text-small); color: oklch(var(--lch-red-darker)); overflow-wrap: anywhere; }
  .runrow__act { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: end; align-items: center; @media (max-width: 559px) { justify-content: start; } }
  .gaprow__title { font-size: 1rem; margin: 0; }
  .gaprow__src { margin-block-start: 0.35rem; }
  .gaprow__list { display: grid; gap: 0.5rem; margin: 0.4rem 0 0; padding-inline-start: 1rem; }
  .gaprow__near { margin: 0; padding-inline-start: 1rem; }
  .runfilters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: end; }
  .runfilters .field { min-inline-size: 0; flex: 1 1 10rem; }
  .runfilters .select { inline-size: 100%; }
  .gatelist { display: grid; gap: 0.5rem; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
  .gatecard { padding: 0.65rem 0.8rem; display: grid; gap: 0.35rem; align-content: start; }
  .gate__table { inline-size: 100%; display: table; }
  .gate__table th[scope=row] { border-block-end-color: var(--color-ink-lightest); font-weight: 400; text-align: start; overflow-wrap: anywhere; }
  .gate__num { text-align: end; inline-size: 1%; white-space: nowrap; }
  .gate__warn { background: oklch(var(--lch-yellow-lightest)); border: 1px solid oklch(var(--lch-yellow-light)); border-inline-start: 3px solid var(--color-yellow);
    border-radius: var(--radius-input); padding: 0.45rem 0.7rem; margin: 0; font-size: var(--text-small);
    ul { margin: 0.2rem 0 0.3rem; padding-inline-start: 1.1rem; } }
  .qfix { display: grid; }
  .qfix > .qitem { border-end-start-radius: 0; border-end-end-radius: 0; border-block-end-color: var(--color-ink-lightest); }
  .qfix__form { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: end; padding: 0.45rem 0.9rem 0.6rem;
    border: 1px solid var(--color-ink-lighter); border-block-start: 0; border-inline-start: 3px solid var(--color-yellow);
    border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--color-canvas); font-size: var(--text-small);
    .field { flex: 0 1 20rem; min-inline-size: 0; } .select { inline-size: 100%; } }
  .userrow { display: grid; gap: 0.3rem; padding: 0.65rem 0.8rem; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-input); background: var(--color-canvas); }
  .userrow__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; align-items: start; }
  .userrow__who { min-inline-size: 0; overflow-wrap: anywhere; }
  .userrow ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; font-size: var(--text-small); }
  .freshness { font-size: var(--text-small); color: var(--color-ink-dark); margin: 0; }
}

/* Recommendation panel (21. 10. 2026): for whom + one status, the step, client reactions, actions, collapsed check details */
@layer components {
  .rpanel { gap: 1rem; }
  .rhead { display: grid; gap: 0.4rem; padding-block-end: 0.8rem; border-block-end: 1px solid var(--color-ink-lighter); }
  .rhead__for { font-family: var(--font-heading); font-size: var(--text-medium); line-height: 1.3; color: var(--color-ink); }
  .rhead__kicker { color: var(--color-ink-dark); font-weight: 500; }
  .rhead__who { font-weight: 700; }
  .rhead__where { color: var(--color-ink-dark); }
  .rchip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--text-small); padding: 0.2em 0.75em; }
  .rchip__ic { inline-size: 1rem; block-size: 1rem; }
  .rhead__why { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.15rem; font-size: var(--text-small); color: var(--color-ink-darker); }
  .rwhy { display: grid; gap: 0.2rem; } .rwhy p { line-height: 1.45; }
  .rsec { display: grid; gap: 0.6rem; padding-block-start: 0.9rem; border-block-start: 1px solid var(--color-ink-lighter); }
  .rsec > h3, .rsec--reactions h3 { font-size: var(--text-x-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dark); font-weight: 600; font-family: var(--font-sans); }
  .ract { display: grid; gap: 0.4rem; padding: 0.7rem 0.85rem; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); background: var(--color-canvas); }
  .ract--release { border-color: oklch(var(--lch-green-light)); background: oklch(var(--lch-green-lightest)); }
  .ract__h { margin: 0; font-size: var(--text-small); font-weight: 700; }
  .ract__hint { font-size: var(--text-x-small); color: var(--color-ink-dark); font-weight: 400; }
  .ract__field { flex: 1 1 14rem; min-inline-size: 0; }
  .ract .row { align-items: end; flex-wrap: wrap; }
  .ract .row > .input, .ract .row > .select { flex: 1 1 9rem; inline-size: auto; min-inline-size: 0; }
  .ract--fold { display: block; padding-block: 0.5rem; }
  .ract--fold[open] > form { margin-block-start: 0.2rem; }
  .ract--fold > summary { min-block-size: 1.8rem; line-height: 1.8rem; }
  .ract--fold > summary .ract__hint { margin-inline-start: 0.4rem; }
  .ract--fold[open] > summary { margin-block-end: 0.5rem; }
  .ract--danger > summary { color: oklch(var(--lch-red-darker)); }
  .rdetails > summary { font-size: var(--text-small); }
  .rdetails[open] { gap: 0.7rem; }
  .rdetails .kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
  /* the hypothesis panel's plain checklist: a mark that says for / against / unknown, always with its word beside it */
  .hypchk { display: grid; gap: 0.4rem; }
  .hypchk > h3 { font-size: var(--text-x-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dark); font-weight: 600; }
  .hypchk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
  .hypchk__item { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.5rem; align-items: start; font-size: var(--text-small); line-height: 1.4; }
  .hypchk__mark { display: inline-grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; font-weight: 700; font-size: 0.85rem;
    background: oklch(var(--lch-ink-lightest)); color: oklch(var(--lch-ink-darker)); }
  .hypchk__item--yes .hypchk__mark { background: oklch(var(--lch-green-lighter)); color: oklch(var(--lch-green-darker)); }
  .hypchk__item--no .hypchk__mark { background: oklch(var(--lch-red-lighter)); color: oklch(var(--lch-red-darker)); }
  .hypchk__text { overflow-wrap: anywhere; }
  .hypchk__word { font-weight: 600; white-space: nowrap; }
  .hypchk__item--yes .hypchk__word { color: oklch(var(--lch-green-darker)); }
  .hypchk__item--no .hypchk__word { color: oklch(var(--lch-red-darker)); }
  /* „Ľudia v účte“: one compact row per person; what changes a person sits behind „Upraviť“ */
  .pmembers { list-style: none; padding: 0; margin: 0; display: grid; }
  .pmember { display: grid; gap: 0.35rem; padding-block: 0.8rem; border-block-end: 1px solid var(--color-ink-lightest); }
  .pmember:last-child { border-block-end: 0; }
  .pmember:focus-visible { outline-offset: 4px; }
  .pmember__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.3rem 1rem; }
  @media (max-width: 639px) { .pmember__head { grid-template-columns: minmax(0, 1fr); } }
  .pmember__who { min-inline-size: 0; overflow-wrap: anywhere; }
  .pmember__mail { display: block; }
  .pmember__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: end; }
  @media (max-width: 639px) { .pmember__tags { justify-content: start; } }
  .pmember__tag--quiet { --b: var(--color-ink-lightest); --bf: var(--color-ink-dark); font-weight: 600; }
  .pmember__roles, .pmember__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
  .pmember__roles .badge { margin-inline-start: 0.3rem; }
  .pmember__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
  .pmember .gate__warn { background: none; border: 0; padding: 0 0 0 1.1rem; position: relative; font-size: var(--text-x-small); color: oklch(var(--lch-yellow-darker)); }
  .pmember .gate__warn::before { content: ""; position: absolute; inset-inline-start: 0.2rem; inset-block-start: 0.45em; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--color-yellow); }
  .pmember__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
  .pmember__edit > summary { font-size: var(--text-small); inline-size: fit-content; }
  .pmember__panel { display: grid; gap: 0.9rem; margin-block-start: 0.5rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-card); background: var(--color-ink-lightest); }
  .pmember__h { font-size: var(--text-x-small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-dark); margin: 0; }
  .pmember .btn--danger { color: oklch(var(--lch-red-darker)); border-color: oklch(var(--lch-red-light)); }
}

/* „Pridať pravidlo“: a client user's own rule (owner, 26. 10. 2026); the fields reuse .crec__form, the choices get 44 px targets */
@layer components {
  .cadd .select { inline-size: 100%; min-block-size: 44px; }
  .cadd__binding { display: grid; gap: 0.25rem; border: 0; padding: 0; margin: 0; }
  .cadd__binding > legend { padding: 0; margin-block-end: 0.25rem; }
  .cadd__binding > label { display: flex; align-items: center; gap: 0.5rem; min-block-size: 44px; font-size: var(--text-small); }
  .cadd__open { display: grid; gap: 0.75rem; }
  .cadd__open > summary { justify-self: start; list-style: none; cursor: pointer; }
  .cadd__open > summary::-webkit-details-marker { display: none; }
  .cadd__open[open] > summary { --btn-bg: var(--color-ink-lightest); }
  .cadd__open:focus { outline: 0; }  /* focused only as the scroll target of #pridat; the summary keeps its own ring */
  .cadd { padding: 1rem; background: var(--color-canvas); border: 1px solid var(--color-ink-lighter); border-radius: var(--radius-panel); @media (min-width: 640px) { padding: 1.15rem 1.4rem; } }
  .cadd textarea.input { min-block-size: 5.5em; }
}