/* Kapybara UI. Zdroj pravdy: docs/design-system.html (verze 1.1). Tokeny a komponenty 1:1, bez tříd průvodce. */
  /* =====================================================================
     KAPYBARA DESIGN TOKENS  (verze 1.1, září 2026)
     Paleta a styl podle vizuální identity VŠB-TUO (www.vsb.cz):
     tyrkysová #00A499 jako jediný akcent, bílá hlavička s logem VŠB-TUO, tmavě modrá
     #1E2838 jen v odznacích a tmavých dlaždicích, text #1A1A1A, šedé sekce, nulové zaoblení.
     Light theme je výchozí; tmavé téma jen na výslovnou volbu data-theme="dark".
     Blok :root … [data-theme] jde zkopírovat 1:1 do static/kapybara.css.
     ===================================================================== */
  :root {
    /* značka */
    --vsb-teal: #00A499;
    --vsb-teal-dark: #007F77;
    --vsb-navy: #1E2838;
    --vsb-orange: #FF8200;
    --vsb-yellow: #FFB81C;
    --vsb-red: #E4002B;

    /* plochy a text (světlé téma) */
    --bg: #F5F5F5;
    --surface: #FFFFFF;
    --surface-2: #ECECEC;
    --ink: #1A1A1A;
    --ink-2: #4A4A4A;
    --ink-3: #767676;
    --rule: #E6E6E6;
    --rule-strong: #C9C9C9;

    /* akcent */
    --accent: var(--vsb-teal);
    --accent-hover: var(--vsb-teal-dark);
    --accent-ink: #FFFFFF;
    --accent-soft: #E0F4F2;

    /* hlavička a patička */
    --bar-bg: var(--vsb-navy);
    --bar-ink: #FFFFFF;
    --bar-ink-2: #B7C0CC;

    /* sémantika (nikdy jako dekorace) */
    --ok: #1E8A5B;        --ok-soft: #E1F3EA;
    --warn: #B8791A;      --warn-soft: #FCF1DC;
    --err: var(--vsb-red);--err-soft: #FBE3E7;
    --info: var(--vsb-navy); --info-soft: #E6E9EE;

    /* škála známky 1 (nejlepší) až 5 */
    --grade-1: #007F77;
    --grade-2: #00A499;
    --grade-3: #8A8A5A;
    --grade-4: #C9841F;
    --grade-5: #B0233A;

    /* písmo */
    --font-ui: "Drive", "Public Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* rozměry */
    --radius: 0px;               /* VŠB: žádné zaoblení */
    --radius-pill: 999px;        /* jen stavové pilulky */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
    --measure: 68ch;
    --container: 1120px;
    --focus: 0 0 0 3px rgba(0, 164, 153, 0.45);
    --shadow-lift: 0 2px 0 var(--rule-strong);   /* jediný "stín": spodní linka */
  }
  :root[data-theme="dark"] {
    --bg: #14181D; --surface: #1C2229; --surface-2: #262D36;
    --ink: #E8EAED; --ink-2: #B9BFC7; --ink-3: #8A929C;
    --rule: #2E363F; --rule-strong: #3E4750;
    --accent: #2FC4B9; --accent-hover: #5AD3CA; --accent-ink: #0B1B1A; --accent-soft: #163331;
    --bar-bg: #0F151D; --bar-ink: #FFFFFF; --bar-ink-2: #9AA5B3;
    --ok: #5CC28E; --ok-soft: #173327; --warn: #E0A64C; --warn-soft: #3A2E17;
    --err: #F0647A; --err-soft: #3D1F26; --info: #A6C4DD; --info-soft: #1E2A38;
    --grade-1: #5AD3CA; --grade-2: #2FC4B9; --grade-3: #B6B67E; --grade-4: #E0A64C; --grade-5: #F0647A;
    --focus: 0 0 0 3px rgba(47, 196, 185, 0.5);
  }

  /* Volitelně firemní písmo Drive, pokud fakulta dodá licencované woff2 do static/fonts/:
  @font-face { font-family: "Drive"; src: url("fonts/Drive-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Drive"; src: url("fonts/Drive-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
  Bez něj se použije Public Sans, který má podobnou kresbu (otevřený grotesk, vysoká střední výška). */

  /* ---------- Base ---------- */
  html, body { margin: 0; }
  body { background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.55; padding-inline: 20px; padding-block: 0 72px; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }
  h1 { font-size: clamp(1.9rem, 4.2vw, 2.6rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
  h2 { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
  h3 { font-size: 1.125rem; }
  h4 { font-size: 1rem; }
  p { margin: 0; }
  a { color: var(--accent-hover); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  code, kbd { font-family: var(--font-mono); font-size: 0.86em; }
  .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  .muted { color: var(--ink-2); }
  .more { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-hover); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
  .more::after { content: "↗"; font-size: 1rem; }
  .badge-mark { width: 44px; height: 44px; background: var(--accent); display: inline-grid; place-items: center; flex: none; }
  .badge-mark svg { width: 22px; height: 22px; fill: #fff; }
  .small { font-size: 0.875rem; }
  .tabular { font-variant-numeric: tabular-nums; }
  :focus-visible { outline: none; box-shadow: var(--focus); }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* ---------- Layout ---------- */
  .container { max-width: var(--container); margin: 0 auto; }
  .stack { display: grid; gap: var(--space-4); }
  .cluster { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  @media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

  /* ---------- Topbar (bílý, jako vsb.cz) ---------- */
  .topbar { background: var(--surface); color: var(--ink); display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); min-height: 72px; border-bottom: 1px solid var(--rule); }
  .brand { display: flex; align-items: center; gap: 18px; text-decoration: none; color: var(--ink); }
  .brand img { height: 40px; width: auto; display: block; }
  .brand .app { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.95rem; padding-left: 18px; border-left: 1px solid var(--rule-strong); color: var(--ink-2); }
  .nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
  .nav a { color: var(--ink-2); text-decoration: none; padding: 26px 12px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 3px solid transparent; margin-bottom: -1px; }
  .nav a:hover { color: var(--ink); }
  .nav a.on { color: var(--accent-hover); border-bottom-color: var(--accent); }
  .topbar .user { color: var(--ink-3); font-size: 0.8rem; letter-spacing: 0.04em; }
  .topbar .icon { width: 22px; height: 22px; color: var(--accent); }
  .scope-bar { background: var(--surface-2); color: var(--ink-2); padding: 8px var(--space-5); font-size: 0.85rem; display: flex; gap: 10px; align-items: center; }
  .scope-bar::before { content: ""; width: 8px; height: 8px; background: var(--vsb-orange); flex: none; }
  .footer { background: var(--bar-bg); color: var(--bar-ink-2); font-size: 0.8rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: var(--space-5); }
  .footer img { height: 32px; width: auto; }
  .footer a { color: var(--bar-ink); }

  /* ---------- Buttons ---------- */
  .btn { display: inline-flex; align-items: center; gap: 8px; font: 600 0.9375rem/1 var(--font-ui); padding: 11px 18px; border-radius: var(--radius); border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; transition: background 120ms, border-color 120ms, color 120ms; }
  .btn:hover { background: var(--surface-2); }
  .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn-dark { background: var(--bar-bg); border-color: var(--bar-bg); color: var(--bar-ink); }
  .btn-ghost { border-color: transparent; background: transparent; color: var(--accent-hover); }
  .btn-ghost:hover { background: var(--accent-soft); }
  .btn-danger { border-color: var(--err); color: var(--err); }
  .btn-danger:hover { background: var(--err-soft); }
  .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
  .btn-sm { padding: 7px 12px; font-size: 0.85rem; }
  .btn-lg { padding: 14px 24px; font-size: 1.05rem; }

  /* ---------- Forms ---------- */
  .field { display: grid; gap: 6px; }
  .field label { font-weight: 600; font-size: 0.9rem; }
  .field .hint { font-size: 0.8rem; color: var(--ink-3); }
  .field .error { font-size: 0.8rem; color: var(--err); }
  .input, textarea.input, select.input { font: 400 0.95rem/1.4 var(--font-ui); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 10px 12px; width: 100%; box-sizing: border-box; }
  .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
  .input[aria-invalid="true"] { border-color: var(--err); }
  textarea.input { min-height: 140px; resize: vertical; }
  .input-mono { font-family: var(--font-mono); font-size: 0.86rem; }
  .file { border: 1px dashed var(--rule-strong); padding: var(--space-5); text-align: center; color: var(--ink-2); background: var(--surface); }
  .file b { color: var(--ink); }
  .radio-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
  .radio-row label { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--rule-strong); background: var(--surface); cursor: pointer; }
  .radio-row label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

  /* ---------- Pills & badges ---------- */
  .pill { display: inline-flex; align-items: center; gap: 6px; font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
  .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .pill-ok { background: var(--ok-soft); color: var(--ok); }
  .pill-warn { background: var(--warn-soft); color: var(--warn); }
  .pill-err { background: var(--err-soft); color: var(--err); }
  .pill-run { background: var(--accent-soft); color: var(--accent-hover); }
  .pill-run::before { animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: 0.3; } }
  .tag { display: inline-block; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; background: var(--surface-2); color: var(--ink-2); }
  .tag-accent { background: var(--accent-soft); color: var(--accent-hover); }

  /* ---------- Grade ---------- */
  .grade { display: inline-grid; grid-auto-flow: column; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
  .grade .val { font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -0.02em; }
  .grade .sd { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); }
  .grade-1 .val { color: var(--grade-1); } .grade-2 .val { color: var(--grade-2); } .grade-3 .val { color: var(--grade-3); } .grade-4 .val { color: var(--grade-4); } .grade-5 .val { color: var(--grade-5); }
  .grade-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 120px; height: 6px; }
  .grade-bar span { background: var(--rule); }
  .grade-bar span.on { background: var(--accent); }
  .dims { display: grid; grid-auto-flow: column; gap: 14px; font-size: 0.82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .dims b { color: var(--ink); font-weight: 700; }
  .source { display: inline-flex; gap: 6px; align-items: center; font: 500 0.75rem/1 var(--font-mono); color: var(--accent-hover); text-decoration: none; border-bottom: 1px dotted currentColor; }
  .source::before { content: "§"; }

  /* ---------- Cards & tables ---------- */
  .card { background: var(--surface); border: 0; border-radius: var(--radius); padding: var(--space-5); }
  .card-accent { border-top: 4px solid var(--accent); }
  .card-lift { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }
  .stat { display: grid; gap: 4px; }
  .stat .n { font-size: 1.8rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .stat .l { font-size: 0.8rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }
  table.tbl { width: 100%; border-collapse: collapse; font-size: 0.93rem; background: var(--surface); }
  table.tbl th, table.tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
  table.tbl th { font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); border-bottom: 2px solid var(--rule-strong); }
  table.tbl th a { color: inherit; text-decoration: none; }
  table.tbl th.sorted { color: var(--accent-hover); }
  table.tbl tr:hover td { background: var(--surface-2); }
  table.tbl td.num { font-variant-numeric: tabular-nums; text-align: right; }
  table.tbl tr.selected td { box-shadow: inset 4px 0 0 var(--accent); }

  /* ---------- Workflow ---------- */
  .flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
  .step { display: grid; gap: 8px; align-content: start; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--rule-strong); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: inherit; }
  .step:hover { border-color: var(--accent); }
  .step .n { font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.12em; color: var(--ink-3); }
  .step h4 { margin: 0; }
  .step-done { border-top-color: var(--ok); }
  .step-run { border-top-color: var(--accent); }
  .step-err { border-top-color: var(--err); }
  .step-wait { border-top-color: var(--rule-strong); opacity: 0.75; }
  .step-optional { border-style: dashed; }

  /* ---------- Disclosure ---------- */
  details.disc { border: 1px solid var(--rule); background: var(--surface); }
  details.disc summary { cursor: pointer; padding: 12px 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; list-style: none; }
  details.disc summary::-webkit-details-marker { display: none; }
  details.disc summary::after { content: "+"; font-family: var(--font-mono); color: var(--ink-3); font-size: 1.1rem; }
  details.disc[open] summary::after { content: "–"; }
  details.disc[open] summary { border-bottom: 1px solid var(--rule); }
  details.disc .body { padding: 14px 16px; display: grid; gap: 12px; }
  pre.prompt { margin: 0; font: 400 0.82rem/1.55 var(--font-mono); white-space: pre-wrap; background: var(--surface-2); padding: 14px; max-height: 360px; overflow: auto; border-left: 3px solid var(--accent); }
  .meta-row { display: flex; gap: 18px; flex-wrap: wrap; font: 400 0.78rem/1.4 var(--font-mono); color: var(--ink-3); }
  .meta-row b { color: var(--ink-2); font-weight: 500; }
  mark.unsupported { background: var(--err-soft); color: inherit; box-shadow: inset 0 -2px 0 var(--err); }
  mark.unclear { background: var(--warn-soft); color: inherit; box-shadow: inset 0 -2px 0 var(--warn); }
  blockquote.quote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--rule-strong); color: var(--ink-2); font-style: italic; background: var(--surface-2); }

  /* ---------- Alerts ---------- */
  .alert { padding: 12px 16px; display: grid; gap: 4px; border-left: 4px solid; font-size: 0.93rem; background: var(--surface); }
  .alert-info { border-color: var(--info); background: var(--info-soft); }
  .alert-ok { border-color: var(--ok); background: var(--ok-soft); }
  .alert-warn { border-color: var(--warn); background: var(--warn-soft); }
  .alert-err { border-color: var(--err); background: var(--err-soft); }
  .alert b { font-weight: 700; }
  .fab { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 2px 0 var(--accent-hover); }

  /* ---------- Guide layout (only this page) ---------- */
  .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; }
  @media (max-width: 640px) { .type-spec > div { grid-template-columns: 1fr; gap: 4px; } }
  .rules { display: grid; gap: 10px; color: var(--ink-2); max-width: 72ch; }
  .rules b { color: var(--ink); font-weight: 700; }
  ol.plain { margin: 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; }