/* 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;

  /* 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: 55.1% 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); }
  :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 { 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)); }
  .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; 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%; }
  .footer { text-align: center; font-size: var(--text-x-small); color: var(--color-ink-medium); 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; }
  .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% - 2 * var(--inline-space-double), 78rem); 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; } }
  .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; } .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 { 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__tags { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; @media (max-width: 640px) { display: none; } }
  .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; }
}