/* ЗГЕНЕРОВАНО з tokens/tokens.json — руками не правити.
   node tokens/build.mjs
   Контраст перевірено на реальних поверхнях; збірка падає, якщо пара не проходить AA. */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.65;

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  --z-base: 0;
  --z-content: 1;
  --z-sticky: 10;

  --font-display: "E UkraineHead", "E Ukraine", Arial, sans-serif;
  --font-body: "E Ukraine", Arial, sans-serif;
  /* Windows не має ні SF Mono, ні Menlo, і Chromium там не шанує ui-monospace —
     без Consolas/Cascadia все числове падало в Courier New. */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Consolas, Menlo, monospace;
}

/* Тема за замовчуванням — темна: сайт strim.co темний. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
    --color-surface: #111111;
    --color-surface-raised: #181818;
    --color-surface-inset: #1f1f1f;
    --color-surface-sunken: #0c0c0c;
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #b8b8b8;
    --color-text-tertiary: #9c968b;
    --color-text-meta: #858179;
    --color-border-subtle: #2a2a2a;
    --color-border-strong: #3b3b3b;
    --color-accent-fill: #573caf;
    --color-accent-text: #c0c0fa;
    --color-on-accent: #ffffff;
    --color-accent-wash: #241a3d;
    --color-state-ok-text: #c0c0fa;
    --color-state-ok-bg: #241a3d;
    --color-state-run: #b8b8b8;
    --color-state-fail: #b8b8b8;
    --color-state-ghost: #9c968b;
}

:root[data-theme="light"] {
  color-scheme: light;
    --color-surface: #f5f5f5;
    --color-surface-raised: #ffffff;
    --color-surface-inset: #fafafa;
    --color-surface-sunken: #ececec;
    --color-text-primary: #111111;
    --color-text-secondary: #3b3b3b;
    --color-text-tertiary: #6b6b6b;
    --color-text-meta: #6b6b6b;
    --color-border-subtle: #e2e2e2;
    --color-border-strong: #d2d2d2;
    --color-accent-fill: #573caf;
    --color-accent-text: #46309a;
    --color-on-accent: #ffffff;
    --color-accent-wash: #ece9f7;
    --color-state-ok-text: #46309a;
    --color-state-ok-bg: #ece9f7;
    --color-state-run: #3b3b3b;
    --color-state-fail: #3b3b3b;
    --color-state-ghost: #6b6b6b;
}

/* Системна тема, поки користувач не обрав явно. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --color-surface: #f5f5f5;
    --color-surface-raised: #ffffff;
    --color-surface-inset: #fafafa;
    --color-surface-sunken: #ececec;
    --color-text-primary: #111111;
    --color-text-secondary: #3b3b3b;
    --color-text-tertiary: #6b6b6b;
    --color-text-meta: #6b6b6b;
    --color-border-subtle: #e2e2e2;
    --color-border-strong: #d2d2d2;
    --color-accent-fill: #573caf;
    --color-accent-text: #46309a;
    --color-on-accent: #ffffff;
    --color-accent-wash: #ece9f7;
    --color-state-ok-text: #46309a;
    --color-state-ok-bg: #ece9f7;
    --color-state-run: #3b3b3b;
    --color-state-fail: #3b3b3b;
    --color-state-ghost: #6b6b6b;
  }
}

/* Компонентний шар — місце, де новий компонент або третя тема відхиляються
   в одному місці, а не форком правила. */
:root {
  --button-primary-bg: var(--color-accent-fill);
  --button-primary-fg: var(--color-on-accent);
  --badge-ok-fg: var(--color-state-ok-text);
  --badge-ok-bg: var(--color-state-ok-bg);
  --badge-run-fg: var(--color-state-run);
  --badge-fail-fg: var(--color-state-fail);
  --badge-ghost-fg: var(--color-state-ghost);
  --focus-ring: var(--color-text-primary);
}

/* GENERATED — copied verbatim from strim-ai-portal/design/design-system.html.
   Do not edit above the OVERRIDES marker: a re-sync silently reverts anything
   changed here. Everything this application adds belongs below it.

   Скопійовано з strim-ai-portal/design/design-system.html — джерело правди
   для вигляду. Секції документації (свотчі, специмен) вирізано: у застосунку
   вони не використовуються. Кольори тут не оголошуються — лише tokens.css. */

  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }

  /* Лише ті накреслення, які реально використовуються. Раніше було оголошено
     п'ять, з них два (Ukraine 300 і Head 500) не матчились жодним правилом. */
  @font-face { font-family:"E Ukraine"; font-weight:400; font-display:swap;
    src:url("https://cdn.prod.website-files.com/67e14f1123e992d486764b6d/67fd02db9110863a46ed8c7e_e-Ukraine-Regular.woff") format("woff"); }
  @font-face { font-family:"E Ukraine"; font-weight:500; font-display:swap;
    src:url("https://cdn.prod.website-files.com/67e14f1123e992d486764b6d/67fd02c1a442e06fe8010a4e_e-Ukraine-Medium.woff") format("woff"); }
  @font-face { font-family:"E UkraineHead"; font-weight:400; font-display:swap;
    src:url("https://cdn.prod.website-files.com/67e14f1123e992d486764b6d/67fcfe06a0e5d8dbdd3cb782_e-UkraineHead-Regular.woff") format("woff"); }

  html {
    scroll-behavior: smooth;
    /* Без цього кожен якір заїжджає під липку шапку. */
    scroll-padding-top: var(--space-16);
  }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }

  body {
    font-family: var(--font-body);
    background: var(--color-surface); color: var(--color-text-primary);
    font-size: var(--fs-md); line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    transition: background var(--dur-slow) ease, color var(--dur-slow) ease;
  }
  /* Тема більше не «блимає» частинами: перехід оголошено на всьому,
     що реально міняє колір, а не лише на body. */
  .panel, .badge, .btn, .field, select, table, th, td, .seg, .rail a,
  .tabs a, .month .day {
    transition: background var(--dur-slow) ease, color var(--dur-slow) ease,
                border-color var(--dur-slow) ease;
  }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6) var(--space-24); }
  h1,h2,h3 { font-family: var(--font-display); font-weight: 400; margin: 0;
    line-height: var(--lh-tight); text-wrap: balance; }
  p { margin: 0; }
  a { color: var(--color-accent-text); }
  .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  .skip { position:absolute; left:-9999px; top:0; z-index:100;
    background: var(--color-surface-raised); color: var(--color-text-primary);
    padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-sm) 0; }
  .skip:focus { left:0; }

  :where(a,button,input,select,[tabindex]):focus-visible {
    /* Кільце — text-primary, а не акцент: на активному сегменті, залитому
       акцентом, акцентне кільце в світлій темі зливалося з фоном. */
    outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm);
  }

  /* ---------------------------------------------------------- app chrome */
  .chrome { position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle); }
  .chrome-in { max-width: 1080px; margin: 0 auto; padding: var(--space-3) var(--space-6);
    display: flex; align-items: center; gap: var(--space-4) var(--space-6); flex-wrap: wrap; }
  .brand { font-family: var(--font-display); font-size: var(--fs-md);
    display: flex; align-items: center; gap: var(--space-2); text-decoration: none;
    color: var(--color-text-primary); }
  .brand .dot { width:9px; height:9px; border-radius:50%; background: var(--color-accent-fill); }
  .switcher { display:flex; align-items:center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3); border:1px solid var(--color-border-strong);
    border-radius: var(--radius-pill); background: var(--color-surface-raised);
    font-size: var(--fs-sm); color: var(--color-text-primary); cursor:pointer; }
  .switcher .chev { color: var(--color-text-tertiary); font-size: var(--fs-xs); }
  .chrome .spacer { margin-left:auto; }
  .acct { display:flex; align-items:center; gap: var(--space-2); font-size: var(--fs-sm);
    color: var(--color-text-secondary); }
  .avatar { width:26px; height:26px; border-radius:50%; background: var(--color-accent-fill);
    color: var(--color-on-accent); display:grid; place-items:center;
    font-size: var(--fs-xs); font-weight:500; }
  .linkish { background:none; border:0; padding:0; cursor:pointer; font: inherit;
    color: var(--color-accent-text); }

  .ctrl { display:flex; align-items:center; gap: var(--space-2); }
  .ctrl > .lbl { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
  .seg { display:inline-flex; background: var(--color-surface-inset);
    border:1px solid var(--color-border-subtle); border-radius: var(--radius-pill);
    padding:3px; gap:2px; }
  .seg button { font-size: var(--fs-xs); font-weight:500; border:0; background:transparent;
    color: var(--color-text-secondary); padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill); cursor:pointer; }
  .seg button:hover { color: var(--color-text-primary); }
  .seg button[aria-checked="true"] { background: var(--color-accent-fill); color: var(--color-on-accent); }

  /* ---------------------------------------------------------------- hero */
  .hero { padding: var(--space-16) 0 var(--space-8); }
  .hero h1 { font-size: clamp(2rem, 5.5vw, var(--fs-2xl)); }
  .hero .lede { margin-top: var(--space-5); font-size: var(--fs-md);
    color: var(--color-text-secondary); max-width: 60ch; }
  .pill { display:inline-flex; align-items:center; gap: var(--space-2); margin-top: var(--space-6);
    padding: var(--space-2) var(--space-4); border:1px solid var(--color-border-strong);
    border-radius: var(--radius-pill); background: var(--color-surface-raised);
    font-size: var(--fs-sm); color: var(--color-text-secondary); }
  .pill .dot { width:7px; height:7px; border-radius:50%; background: var(--color-accent-text); }

  /* ------------------------------------------------------------ sections */
  section { padding-top: var(--space-16); }
  .sec-head { display:flex; align-items:baseline; gap: var(--space-4);
    margin-bottom: var(--space-6); border-bottom:1px solid var(--color-border-subtle);
    padding-bottom: var(--space-3); }
  .sec-head .num { font-family: var(--font-mono); font-size: var(--fs-xs);
    color: var(--color-accent-text); font-weight:600; }
  .sec-head h2 { font-size: var(--fs-xl); }
  .sec-head .note { margin-left:auto; font-size: var(--fs-sm);
    color: var(--color-text-tertiary); max-width: 34ch; text-align:right; }

  .grid { display:grid; gap: var(--space-4); }
  .cards-3 { grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
  .cards-2 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
  /* Плитки статистики — не панелі: з minmax(300px) чотири плитки лягали в три
     колонки і четверта осиротіла. */
  .stats { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }

  /* ---------------------------------------------------------- components */
  .kit { display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center; }
  .btn { font-family: var(--font-body); font-size: var(--fs-sm); font-weight:500;
    padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill);
    border:1px solid transparent; cursor:pointer; }
  .btn-primary { background: var(--button-primary-bg); color: var(--button-primary-fg); }
  /* Змішування до text-primary самокоригується по темах: hover завжди рухається
     до переднього плану, хоч на темному, хоч на світлому. */
  .btn-primary:hover { background: color-mix(in srgb, var(--button-primary-bg) 84%, var(--color-text-primary)); }
  .btn-ghost { background:transparent; color: var(--color-text-primary);
    border-color: var(--color-border-strong); }
  .btn-ghost:hover { background: var(--color-surface-inset); }
  .btn-quiet { background:transparent; color: var(--color-accent-text); }
  .btn[disabled] { color: var(--color-text-tertiary); border-color: var(--color-border-subtle);
    cursor:not-allowed; }
  .field { display:flex; align-items:center; gap: var(--space-2);
    background: var(--color-surface-raised); border:1px solid var(--color-border-strong);
    border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
    /* min-width замість фіксованого 280px: на 320px екрані з'їжджало вбік. */
    min-width:0; flex:1 1 220px; max-width:340px; }
  .field:focus-within { border-color: var(--color-accent-text); }
  .field input { font: inherit; font-size: var(--fs-sm); border:0; outline:0;
    background:transparent; color: var(--color-text-primary); width:100%; }
  .field input::placeholder { color: var(--color-text-tertiary); }

  /* Стан — трактуванням. Заливка дістається ГОТОВОМУ: раніше «готово» було
     найтихішим чипом на сторінці (2.26:1), а «помилка» — найгучнішим. */
  .badge { display:inline-flex; align-items:center; gap: var(--space-1);
    font-size: var(--fs-xs); font-weight:500; padding: 3px var(--space-3);
    border-radius: var(--radius-pill); border:1px solid transparent; white-space:nowrap; }
  .b-ok { background: var(--badge-ok-bg); color: var(--badge-ok-fg);
    border-color: color-mix(in srgb, var(--badge-ok-fg) 34%, transparent); }
  .b-run { background:transparent; color: var(--badge-run-fg); border-color: var(--badge-run-fg); }
  .b-fail { background:transparent; color: var(--badge-fail-fg);
    border-color: var(--badge-fail-fg); border-style:dashed; }
  .b-ghost { background: var(--color-surface-inset); color: var(--badge-ghost-fg);
    border-color: var(--color-border-subtle); }

  /* ------------------------------------------------------------ products */
  .product { display:flex; flex-direction:column; gap: var(--space-2);
    padding: var(--space-5); border:1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg); background: var(--color-surface-raised);
    text-decoration:none; color: var(--color-text-primary); }
  a.product:hover { border-color: var(--color-accent-text); }
  .product h3 { font-size: var(--fs-lg); }
  .product .desc { font-size: var(--fs-sm); color: var(--color-text-secondary); }
  .product .access { margin-top:auto; padding-top: var(--space-3);
    font-size: var(--fs-xs); color: var(--color-text-tertiary); }
  .product .go { font-size: var(--fs-sm); color: var(--color-accent-text); }
  /* aria-disabled, не disabled: disabled прибирає елемент із таб-порядку,
     і дві картки, чия єдина робота — повідомити про майбутнє, зникали
     для клавіатури й скрінрідера. Приглушуємо токенами, не opacity —
     opacity ламала контраст (3.11:1). */
  .product[aria-disabled="true"] { cursor:default; }
  .product[aria-disabled="true"] h3 { color: var(--color-text-secondary); }

  /* ---------------------------------------------------------------- meet */
  .row-item { display:grid; grid-template-columns:1fr auto; gap: var(--space-1) var(--space-4);
    padding: var(--space-3) 0; border-bottom:1px solid var(--color-border-subtle); }
  .row-item:last-child { border-bottom:0; }
  .row-item .t { grid-column:1; grid-row:1; font-size: var(--fs-sm); font-weight:500;
    min-width:0; overflow-wrap:anywhere; }
  .row-item .s { grid-column:1; grid-row:2; font-size: var(--fs-xs); color: var(--color-text-tertiary);
    min-width:0; overflow-wrap:anywhere; }
  .row-item .b { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .row-item .extra { grid-column:1 / -1; grid-row:3; margin-top: var(--space-2);
    font-size: var(--fs-xs); color: var(--color-text-tertiary); }
  .quote { border-left:3px solid var(--color-accent-text); background: var(--color-accent-wash);
    padding: var(--space-2) var(--space-3); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--fs-sm); color: var(--color-text-secondary); margin-top: var(--space-2); }
  .item { padding: var(--space-3) 0; border-bottom:1px solid var(--color-border-subtle); }
  .item:last-child { border-bottom:0; }
  .item .who { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
  .empty { text-align:center; padding: var(--space-10) var(--space-4); }
  .empty h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
  .empty p { font-size: var(--fs-sm); color: var(--color-text-secondary); max-width:44ch; margin:0 auto; }

  .panel { border:1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
    background: var(--color-surface-raised); padding: var(--space-5); }
  .panel > .cap { font-size: var(--fs-xs); color: var(--color-text-tertiary);
    margin-bottom: var(--space-3); }
  .stat .n { font-family: var(--font-display); font-size: var(--fs-xl); line-height: var(--lh-tight); }
  .stat .l { font-size: var(--fs-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); }

  /* --------------------------------------------------------------- login */
  .login-frame { border:1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
    background: var(--color-surface-sunken); padding: var(--space-12) var(--space-6);
    display:grid; place-items:center; }
  .login-card { width:100%; max-width:380px; background: var(--color-surface-raised);
    border:1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
    padding: var(--space-8); }
  .login-card .mark { font-size: var(--fs-xs); color: var(--color-text-tertiary);
    display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-5); }
  .login-card .mark .dot { width:8px; height:8px; border-radius:50%; background: var(--color-accent-fill); }
  .login-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-2); }
  .login-card .sub { font-size: var(--fs-sm); color: var(--color-text-secondary); }
  .btn-block { width:100%; justify-content:center; margin-top: var(--space-5);
    display:inline-flex; align-items:center; gap: var(--space-2); }
  .login-alt { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--color-text-tertiary); }
  .notice { margin-bottom: var(--space-4); padding: var(--space-3);
    border:1px dashed var(--color-border-strong); border-radius: var(--radius-sm);
    font-size: var(--fs-xs); color: var(--color-text-secondary); }

  /* --------------------------------------------------------------- admin */
  .admin { display:grid; grid-template-columns:190px 1fr;
    border:1px solid var(--color-border-subtle); border-radius: var(--radius-lg);
    overflow:hidden; background: var(--color-surface-raised); }
  .rail { background: var(--color-surface-inset);
    border-right:1px solid var(--color-border-subtle); padding: var(--space-4) 0; }
  .rail a { display:block; padding: var(--space-2) var(--space-5); font-size: var(--fs-sm);
    color: var(--color-text-secondary); text-decoration:none; border-left:2px solid transparent; }
  .rail a[aria-current="page"] { color: var(--color-text-primary);
    border-left-color: var(--color-accent-text); background: var(--color-accent-wash); }
  .admin .body { padding: var(--space-5); overflow-x:auto; }
  table { width:100%; border-collapse:collapse; font-size: var(--fs-sm); }
  th { text-align:left; font-size: var(--fs-xs); font-weight:500;
    color: var(--color-text-tertiary); padding:0 var(--space-4) var(--space-2) 0;
    border-bottom:1px solid var(--color-border-subtle); white-space:nowrap; }
  td { padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom:1px solid var(--color-border-subtle); vertical-align:middle; }
  tr:last-child td { border-bottom:0; }
  td.num, th.num { text-align:right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  th:last-child, td:last-child { padding-right:0; }
  /* Смуга + число: значення ніколи не тримається лише на ширині й кольорі.
     Понадліміт має власний сегмент, інакше 102% і 400% виглядали однаково. */
  .meter { display:flex; align-items:center; gap: var(--space-2); }
  .meter .track { height:6px; flex:1; min-width:56px; border-radius:3px;
    background: var(--color-surface-inset); border:1px solid var(--color-border-subtle);
    overflow:hidden; display:flex; }
  .meter .track i { display:block; height:100%; background: var(--color-accent-fill); }
  .meter .track i.over { background: repeating-linear-gradient(45deg,
    var(--color-text-primary) 0 3px, transparent 3px 6px); }
  .meter .pct { font-family: var(--font-mono); font-size: var(--fs-xs);
    color: var(--color-text-secondary); min-width:44px; text-align:right; }
  .consequence { font-size: var(--fs-xs); color: var(--color-text-tertiary); }

  .foot { margin-top: var(--space-24); padding-top: var(--space-5);
    border-top:1px solid var(--color-border-subtle);
    font-size: var(--fs-xs); color: var(--color-text-tertiary); }

  @media (max-width:640px){
    .sec-head { flex-wrap:wrap; }
    .sec-head .note { margin-left:0; text-align:left; max-width:none; flex-basis:100%; }
    .specimen .row { grid-template-columns:1fr; gap: var(--space-1); }
    .row-item { grid-template-columns:1fr; }
    .row-item .t,.row-item .s,.row-item .b { grid-column:1; grid-row:auto; }
    .admin { grid-template-columns:1fr; }
    .rail { display:flex; overflow-x:auto; border-right:0;
      border-bottom:1px solid var(--color-border-subtle); }
  }

  /* Таблицю лімітів люди експортують у PDF; у темній темі без цього
     друкувався світлий текст по білому, тобто порожній аркуш. */
  @media print {
    :root { color-scheme: light; }
    .chrome, .seg, .ctrl, .skip, .btn { display:none !important; }
    body { background:#fff; color:#111; }
    .panel, .admin, .sw, .leg, .specimen { border-color:#ccc; background:#fff; }
    a { color:#111; text-decoration:underline; }
  }

/* --------------------------------------------------- додано в застосунку */
/* У дизайн-системі кожна .btn — це <button>, тож підкреслення там не буває
   ніколи. У застосунку частина кнопок мусить бути посиланнями (перехід на
   Google, повернення до продуктів), і вони приходили підкресленими. */
a.btn { text-decoration: none; }

/* Екран входу на весь вікно.
   У дизайн-системі картка стоїть у .login-frame — це демонстраційний контейнер
   всередині секції 05, який малює рамку навколо макета. У застосунку він
   виглядав як порожній обведений прямокутник посеред сторінки. */
/* ============================ OVERRIDES ============================
   Everything below is authored by this application. The block above is a
   verbatim copy of the design system and is replaced wholesale on a re-sync,
   so an edit made up there disappears without a trace.
   =================================================================== */

.login-page { min-height: 70vh; display: grid; place-items: center; padding: var(--space-12) 0; }
/* Навігація між продуктами: у макеті шапка мала лише перемикач продукту,
   але з кількома продуктами і адмінкою потрібні явні вкладки. */
.tabs { display:flex; gap: var(--space-4); }
.tabs a { font-size: var(--fs-sm); color: var(--color-text-secondary); text-decoration:none;
  padding: var(--space-1) 0; border-bottom:2px solid transparent; }
.tabs a:hover { color: var(--color-text-primary); }
.tabs a[aria-current="page"] { color: var(--color-text-primary);
  border-bottom-color: var(--color-accent-text); }
/* inline-flex, not inline: a form holding a control and a button laid them out
   as two blocks, so the select sat above the button instead of beside it. */
form.inline { display:inline-flex; align-items:center; gap: var(--space-2); }
/* Класи, які дизайн-система оголошує ЛИШЕ вкладеними.
   `.desc` там існує як `.product .desc`, `.cap` як `.panel > .cap` — тобто
   поза цим контекстом вони не діють узагалі. А я вживаю їх самостійно: у
   панелях, у секціях, у банерах. Через це весь описовий текст малювався
   повнорозмірним майже чорним — «не та дизайн-система». Значення тут ті самі,
   що в першоджерелі, просто без привʼязки до батька. */
.desc { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.cap { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
/* Другорядне, що розгортають за потреби: історія спроб, перейменування.
   Заголовком секції вони важили стільько ж, скільки результат, хоч потрібні
   зрідка. Тому не h2 і не панель — рядок, який видно, лише коли шукаєш. */
.log { font-size: var(--fs-sm); }
.log > summary { cursor:pointer; font-size: var(--fs-xs); color: var(--color-text-tertiary);
  padding: var(--space-2) 0; list-style:none; }
/* Стрілку малюємо самі: ::marker у Safari не стилізується, а ::-webkit-details-marker
   лишає свою на місці, тож без list-style:none їх було б дві. */
.log > summary::before { content:'▸ '; }
.log[open] > summary::before { content:'▾ '; }
.log > summary:hover { color: var(--color-text-primary); }
.log > summary::-webkit-details-marker { display:none; }
.log[open] > summary { color: var(--color-text-secondary); }
.log { display:grid; gap: var(--space-2); }
.log > .panel, .log > .row-item { margin:0; }
/* Month grid. Seven equal columns, one cell per day; the header row reuses the
   same grid so weekday names stay aligned with their column. */
.monthnav { display:flex; align-items:center; gap: var(--space-4); }
.month { display:grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap:1px;
  background: var(--color-border-subtle); border:1px solid var(--color-border-subtle);
  border-radius: var(--radius-md); overflow:hidden; }
.month .dow { background: var(--color-surface-inset); padding: var(--space-2);
  font-size: var(--fs-xs); color: var(--color-text-tertiary); text-align:center; }
.month .day { background: var(--color-surface-raised); padding: var(--space-2);
  min-height: 5.5rem; display:flex; flex-direction:column; gap: var(--space-1); }
.month .day.empty { background: var(--color-surface-inset); }
.month .day.today .num { color: var(--color-accent-text); font-weight:600; }
.month .num { font-size: var(--fs-xs); color: var(--color-text-tertiary); }
/* Titles are long and columns are narrow: clip rather than let one meeting
   stretch every cell in its row. */
.month .ev { font-size: var(--fs-xs); color: var(--color-text-primary); text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.month a.ev:hover { color: var(--color-accent-text); }
.month .ev .hm { color: var(--color-text-tertiary); }
@media (max-width: 640px) {
  /* Seven columns on a phone give each day about 40px, which fits a number and
     nothing else. One day per row keeps the entries readable. */
  .month { grid-template-columns: 1fr; }
  .month .dow { display:none; }
  .month .day.empty { display:none; }
  .month .day { min-height:0; flex-direction:row; flex-wrap:wrap; align-items:baseline;
    gap: var(--space-2); }
  .month .ev { white-space:normal; }
}
pre.data { overflow-x:auto; padding: var(--space-4); border:1px solid var(--color-border-subtle);
  border-radius: var(--radius-md); background: var(--color-surface-inset);
  font-family: var(--font-mono); font-size: var(--fs-xs); }

/* Вибір розрізу аналізу. Радіокнопки як «пігулки»: вибір один, і він мусить
   читатися з першого погляду, а не з дрібного кружечка. */
form.ask { display:flex; flex-wrap:wrap; gap: var(--space-3); align-items:center; }
/* The lens picker is a .seg, like the language and theme switchers on the same
   page: one metaphor for "choose exactly one" rather than two. What .seg does
   not cover is a radio input, which is what keeps this working without
   JavaScript, so the input is hidden and its label carries the appearance. */
.seg .pick { display:inline-flex; }
.pick input { position:absolute; opacity:0; width:0; height:0; }
.pick span { display:inline-block; font-size: var(--fs-xs); font-weight:500;
  color: var(--color-text-secondary); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); cursor:pointer; }
.pick span:hover { color: var(--color-text-primary); }
.pick input:checked + span { background: var(--color-accent-fill); color: var(--color-on-accent); }
.pick input:focus-visible + span { outline:2px solid var(--focus-ring); outline-offset:2px; }

/* Повернення — угорі, до заголовка. Знизу його не видно на довгій сторінці,
   а це єдиний шлях назад: у застосунку немає навігаційних крихт. */
.back { padding-top: var(--space-6); font-size: var(--fs-sm); }
.back a { text-decoration: none; }

/* Controls the design system does not declare, kept here so a re-sync cannot
   revert them. A bare <select> brings its own border and background from the
   platform, so wrapping it in .field draws two boxes around one control. */
select { font: inherit; font-size: var(--fs-sm); color: var(--color-text-primary);
  background: var(--color-surface-raised); border:1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  appearance:none; cursor:pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right var(--space-4) center, right calc(var(--space-4) - 5px) center;
  background-repeat: no-repeat; }

/* Subject and failure reason, on their own row under a run. A cell inside the
   row would either widen the table past the viewport or clip the one string the
   page exists to show. `wrap: anywhere` because these are ids and provider
   messages, which have no spaces to break on. */
td.reason { padding-top:0; font-size: var(--fs-xs); color: var(--color-text-tertiary); }
td.reason > div { display:flex; flex-wrap:wrap; gap: var(--space-1) var(--space-4);
  overflow-wrap:anywhere; }

/* The empty state assembles a heading, a line of text and a button by hand, and
   the design system gives p and h a zero margin because its containers supply a
   gap. Without one here the button lands on the last line of the paragraph. */
.empty { display:flex; flex-direction:column; align-items:center; gap: var(--space-3); }
.empty h3 { margin-bottom:0; }
.empty p { margin:0; }

/* A UA stylesheet gives blockquote and pre their own margins, and the design
   system only zeroes p and the headings. */
pre.data { margin:0; }

/* The design system pins a product's state badge with an inline style in its
   specimen; in a flex-column card it would otherwise stretch the full width. */
.product .badge { align-self: flex-start; }

/* Hide what this application added, on the same grounds the copied block hides
   the chrome: navigation and controls are not part of a printed table. */
@media print {
  .tabs, .kit, .monthnav, .seg, .log > summary { display:none !important; }
}

/* A topic and the button that asks about it sit on one line, with the button
   pushed to the end and dropping below on a narrow screen rather than squeezing
   the sentence into a column two words wide. */
.item:has(> form) { display:flex; flex-wrap:wrap; align-items:baseline;
  gap: var(--space-2) var(--space-4); }
.item:has(> form) > div { flex:1 1 24ch; min-width:0; }
.item > form { margin-left:auto; }