/* ============================================================================
   K-MINE: GeoField — дизайн-система. Джерело істини для UI.
   Токени (кольори / типографіка / spacing / radii / стани) витягнуто НАЖИВО з
   k-mine.com. Компоненти нижче реалізують затверджений напрям: темна шапка K-MINE
   над світлою робочою зоною, дворядкова щільність, розширена палітра станів синхр.
   Стани синхронізації — першокласна візуальна мова (сенс роботи Кроку 9).
   Підключення: <link rel="stylesheet" href="./theme.css"> у index.html.
   Шрифт Montserrat — самохоститься для офлайну (fallback — системний).

   Ревізія 2 (після адверсарного a11y-аудиту): каскад станів рядка (B1),
   стани варіантів кнопок (B2), 4 нові компоненти покриття (B3), контраст
   плейсхолдера/сірих гліфів (S1/S3), тон семантичного тексту (S2), токенізація
   щільних розмірів (S6). Відомі обмеження бренду — див. хвіст файлу.
   ============================================================================ */

:root {
  /* ── Бренд K-MINE (точні значення з CSS сайту; НЕ змінювати) ── */
  --km-yellow:        #F4CA14;   /* акцент / первинна дія / лого */
  --km-yellow-press:  #E0B910;   /* натиснута жовта кнопка */
  --km-yellow-hover:  #F7D22E;
  --km-yellow-soft:   #F7E27A;   /* вимкнена жовта кнопка */
  --km-blue:          #267CFF;   /* лінки / інформація / «у черзі» / фокус */
  --km-blue-tint:     #E7F0FF;   /* світла заливка синього */
  --km-ink:           #1A1A1A;   /* темні поверхні (шапка/герой), первинний текст */
  --km-ink-2:         #232324;   /* контекстна суб-шапка (на пів-тон світліше) */
  --km-ink-hover:     #2A2A2A;   /* hover/press темної кнопки */
  --km-bg:            #F6F8F9;   /* фон робочої зони */
  --km-bg-alt:        #F7F7F7;   /* зебра / тонкі панелі */
  --km-surface:       #FFFFFF;   /* картки, таблиця, док */
  --km-surface-hover: #ECF0F2;   /* hover рядка таблиці / фон офлайн-смуги */
  --km-border:        #E0E0E0;   /* межі полів, лінії гриду */
  --km-gray:          #ACB1B9;   /* приглушені гліфи бренду (декоративні) */

  /* ── Текст ── */
  --text:             #1A1A1A;             /* на світлому */
  --text-muted:       rgba(26,26,26,.66);  /* вторинний на світлому (AA ≈5.5:1) */
  --text-faint:       rgba(26,26,26,.42);  /* лише декоративний великий приглушений */
  --text-disabled:    rgba(26,26,26,.30);
  --on-dark:          #FFFFFF;             /* первинний на темному */
  --on-dark-2:        #DBDBDB;             /* вторинний на темному */
  --on-dark-hint:     #F3F5F7;             /* майже-білі гліфи/підпис на темному */
  --dark-border:      #333333;             /* межі всередині темної шапки */

  /* ── Семантика: мова станів синхронізації + валідація ──
        (окремо від бренд-акценту; конфлікт свідомо = брендовий жовтий)
        текстові тони — похідні (не бренд), підібрані під AA на своїх фонах */
  --ok:        #1E9E5A;  --ok-text:    #1E7A45;  --ok-bg:    #E7F5EC;   /* синхр.  5.35:1 */
  --queued:    #267CFF;  --queued-text:#1B5FD0;  --queued-bg:var(--km-blue-tint); /* у черзі 5.09:1 */
  --conflict:  #F4CA14;  --conflict-text:#7E6300;--conflict-bg:#FEF6D2; --conflict-wash:#FFFCF0; /* конфлікт 5.26:1 */
  --danger:    #E5484D;  --danger-text:#C0272D;  --danger-bg:#FDECEC;   --danger-wash:#FEF4F4;   /* відхилено 5.15:1 */
  --warning:   var(--conflict); --warning-text: var(--conflict-text); --warning-bg: var(--conflict-bg); /* попередження = конфлікт-тон */

  /* ── Типографіка (Montserrat; шкала й ваги з бренду) ── */
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fw-black: 900;  --fw-bold: 700;  --fw-semibold: 600;  --fw-medium: 500;  --fw-regular: 400;
  /* базова шкала бренду */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:20px;
  --fs-2xl:24px; --fs-3xl:28px; --fs-4xl:36px; --fs-5xl:48px; --fs-6xl:64px;
  /* щільні польові розміри (для роботи в рукавицях; кожен має роль) */
  --fs-label:10.5px;  /* підписи полів */
  --fs-micro:11px;    /* заголовки таблиці, код-тег, лічильник */
  --fs-chip:11.5px;   /* чіпи станів */
  --fs-dense:12.5px;  /* офлайн/увага, колір, довжина */
  --fs-meta:13.5px;   /* порода, dict-чіп, тіло таблиці, контекст */
  --fs-depth:14.5px;  /* глибина інтервалу (акцент рядка) */
  --fs-field:15px;    /* значення у полі вводу */

  /* ── Spacing (з --spacing-* бренду) ── */
  --sp-xs:4px; --sp-sm:8px; --sp-md:12px; --sp-lg:16px; --sp-xl:20px;
  --sp-2xl:24px; --sp-3xl:32px; --sp-4xl:40px; --sp-5xl:60px; --sp-6xl:80px; --sp-7xl:120px;

  /* ── Radii (з --radius-* бренду) ── */
  --r-xs:4px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:15px; --r-2xl:16px; --r-3xl:20px; --r-full:9999px;

  /* ── Тіні / фокус ── */
  --shadow-card: 0 1px 2px rgba(26,26,26,.06), 0 2px 8px rgba(26,26,26,.04);
  --shadow-dock: 0 -2px 12px rgba(26,26,26,.08);
  --shadow-bar:  0 1px 0 rgba(0,0,0,.25);
  --focus-ring:  0 0 0 3px rgba(38,124,255,.45);            /* доповнення до синьої межі фокуса */
  --tap-min: 44px;                                          /* мінімальна ціль дотику первинних дій */
}

/* ── База ── (scope-клас для піддерева GeoField; НЕ .gf — щоб не зіштовхуватись
      із підписом .lockup .gf) */
*,*::before,*::after{ box-sizing:border-box; }
.gf-root{ font-family:var(--font); color:var(--text); background:var(--km-bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; }
.gf-root h1,.gf-root h2,.gf-root h3{ font-weight:var(--fw-black); letter-spacing:-.01em; line-height:1.08; margin:0; }
.num{ font-variant-numeric:tabular-nums; }
.u-label{ font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }

/* ── Кнопки ──
      Первинна = жовта. Вторинна = темна. Ghost = обведена. Danger-ghost = червона обведена.
      Кожен варіант ЯВНО перекриває :hover/:active, щоб не проступав жовтий базового .btn. */
.btn{ font-family:var(--font); font-weight:var(--fw-semibold); font-size:var(--fs-base);
  height:52px; min-height:var(--tap-min); padding:0 var(--sp-2xl); border:0; border-radius:var(--r-3xl); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-sm);
  background:var(--km-yellow); color:var(--km-ink); box-shadow:0 2px 0 var(--km-yellow-press);
  transition:background .12s ease; }
.btn:hover{ background:var(--km-yellow-hover); }
.btn:active{ background:var(--km-yellow-press); transform:translateY(1px); box-shadow:none; }
.btn:focus-visible{ outline:2px solid var(--km-ink); outline-offset:2px; }
.btn[disabled]{ background:var(--km-yellow-soft); color:var(--text-disabled); box-shadow:none; cursor:not-allowed; transform:none; }

.btn--secondary{ background:var(--km-ink); color:var(--on-dark); box-shadow:none; }
.btn--secondary:hover{ background:var(--km-ink-hover); }
.btn--secondary:active{ background:var(--km-ink-hover); }

.btn--ghost{ background:transparent; color:var(--km-ink); box-shadow:none; border:1.5px solid var(--km-border); }
.btn--ghost:hover{ background:var(--km-bg); }
.btn--ghost:active{ background:var(--km-border); }

.btn--danger-ghost{ background:var(--km-surface); color:var(--danger-text); border:1.5px solid var(--danger); box-shadow:none; }
.btn--danger-ghost:hover{ background:var(--danger-bg); }
.btn--danger-ghost:active{ background:var(--danger-bg); }

.btn--sm{ height:36px; min-height:0; padding:0 var(--sp-lg); font-size:var(--fs-sm); border-radius:var(--r-full); box-shadow:none; }
.btn--xs{ height:28px; min-height:0; padding:0 var(--sp-md); font-size:var(--fs-xs); font-weight:var(--fw-bold); border-radius:var(--r-full); box-shadow:none; }

/* ── Чіпи станів синхронізації (мова довіри) ──
      кожен стан = колір + іконка + текст (надлишкове кодування, глер/дальтонізм-безпечно) */
.chip{ display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 var(--sp-sm);
  border-radius:var(--r-full); font-size:var(--fs-chip); font-weight:var(--fw-semibold); white-space:nowrap; }
.chip svg{ width:13px; height:13px; flex:none; }
.chip--ok{ color:var(--ok-text); background:transparent; }               /* тихий стан спокою */
.chip--queued{ color:var(--queued-text); background:var(--queued-bg); }
.chip--conflict{ color:var(--conflict-text); background:var(--conflict-bg); }
.chip--rejected{ color:var(--danger-text); background:var(--danger-bg); }

/* ── Поля вводу ── */
.field{ display:flex; flex-direction:column; gap:var(--sp-xs); }
.field > label{ font-size:var(--fs-label); font-weight:var(--fw-semibold); color:var(--text-muted); letter-spacing:.02em; }
.input{ height:42px; border:1.5px solid var(--km-border); border-radius:var(--r-lg); background:var(--km-surface);
  padding:0 var(--sp-md); font-family:var(--font); font-size:var(--fs-field); font-weight:var(--fw-semibold); color:var(--text);
  font-variant-numeric:tabular-nums; width:100%; }
.input::placeholder{ color:var(--text-muted); font-weight:var(--fw-regular); }   /* AA: muted, не faint */
.input:focus{ outline:none; border-color:var(--km-blue); box-shadow:var(--focus-ring); }
.input--auto{ background:var(--km-bg); color:var(--text-muted); }        /* авто-підставлене (Від = попереднє До) */
.input--error{ border-color:var(--danger); }
.field-help{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); }
.field-help--error{ color:var(--danger-text); }
.field-help--warn{ color:var(--warning-text); }

/* ── Dict-чіп (вибір коду довідника) + swatch кольору ──
      інтерактивні: рендерити як <button> (фокусованість з клавіатури) */
.dict-chip{ height:42px; border-radius:var(--r-full); border:1.5px solid var(--km-border); background:var(--km-surface);
  display:inline-flex; align-items:center; gap:var(--sp-sm); padding:0 var(--sp-md);
  font-family:var(--font); font-size:var(--fs-meta); font-weight:var(--fw-semibold); color:var(--text-muted); cursor:pointer; }
.dict-chip.is-set{ background:var(--km-bg); border-color:var(--km-ink); color:var(--text); }
.dict-chip .chev{ margin-left:auto; color:var(--text-muted); }          /* AA графіка ≥3:1 */
.dict-chip .clear{ margin-left:auto; color:var(--text-muted); font-weight:var(--fw-bold); }
.swatch{ width:14px; height:14px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(26,26,26,.16); flex:none; }
.swatch--lg{ width:20px; height:20px; }
.code-tag{ font-size:var(--fs-micro); font-weight:var(--fw-bold); letter-spacing:.06em; padding:2px 7px; border-radius:var(--r-xs);
  font-variant-numeric:tabular-nums; color:var(--danger-text); background:var(--danger-bg); }

/* ── Картки ── */
.card{ background:var(--km-surface); border:1px solid var(--km-border); border-radius:var(--r-2xl);
  padding:var(--sp-lg); box-shadow:var(--shadow-card); }

/* ── Шапка застосунку + лого-локап ── */
.appbar{ background:var(--km-ink); color:var(--on-dark); display:flex; align-items:center; gap:var(--sp-sm);
  padding:var(--sp-md) var(--sp-lg); box-shadow:var(--shadow-bar); }
.lockup{ display:inline-flex; align-items:center; gap:9px; }
.lockup .km{ font-weight:var(--fw-black); font-size:var(--fs-base); letter-spacing:.04em; color:var(--km-yellow); }
.lockup .div{ width:1px; height:16px; background:var(--dark-border); }
.lockup .gf{ font-weight:var(--fw-semibold); font-size:var(--fs-sm); color:var(--on-dark-hint); }
.icon-btn{ width:38px; height:38px; border-radius:var(--r-md); display:grid; place-items:center;
  color:var(--on-dark-hint); background:transparent; border:0; cursor:pointer; flex:none; }
.icon-btn:hover{ background:rgba(255,255,255,.08); }
.icon-btn:focus-visible{ outline:2px solid var(--km-yellow); outline-offset:1px; }

/* ── Пігулка стану синхронізації у шапці (скільки потребує уваги) ── */
.syncpill{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border:0; cursor:pointer;
  border-radius:var(--r-full); background:var(--conflict-bg); color:var(--conflict-text);
  font-family:var(--font); font-weight:var(--fw-bold); font-size:var(--fs-xs); }
.syncpill::before{ content:"! "; font-weight:900; }                 /* стан не лише кольором */
.syncpill--clear::before{ content:"✓ "; font-weight:700; }
.syncpill svg{ width:14px; height:14px; flex:none; }
.syncpill .n{ min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--km-ink); color:var(--on-dark);
  font-size:var(--fs-micro); display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.syncpill--rejected{ background:var(--danger-bg); color:var(--danger-text); }
.syncpill--clear{ background:rgba(255,255,255,.10); color:var(--on-dark-2); }   /* усе синхронізовано */

/* ── Контекстна суб-шапка (де ми: свердловина / дія + інструменти) ── */
.ctxbar{ display:flex; align-items:center; gap:var(--sp-sm); padding:8px var(--sp-lg); background:var(--km-ink-2);
  color:var(--on-dark-2); border-top:1px solid var(--dark-border); font-size:var(--fs-meta); font-weight:var(--fw-semibold); }
.ctxbar .crumb{ color:var(--on-dark); font-weight:var(--fw-bold); }
.ctxbar .sep{ color:var(--km-gray); }
.ctxbar .spacer{ margin-left:auto; }
.ctxbar .cbtn{ width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center;
  color:var(--on-dark-2); background:transparent; border:0; cursor:pointer; flex:none; }
.ctxbar .cbtn:hover{ background:rgba(255,255,255,.08); }
.ctxbar .cbtn:focus-visible{ outline:2px solid var(--km-yellow); outline-offset:1px; }

/* ── Смуга уваги / офлайн ── */
.attn-strip{ display:flex; align-items:center; gap:var(--sp-sm); padding:var(--sp-sm) var(--sp-lg);
  background:var(--conflict-bg); color:var(--conflict-text); border-left:4px solid var(--km-yellow);
  font-size:var(--fs-dense); font-weight:var(--fw-semibold); cursor:pointer; }
.attn-strip--offline{ background:var(--km-surface-hover); color:var(--text-muted); border-left-color:var(--km-gray); }

/* ── Рядок інтервалу (мобільний, дворядковий) ──
      B1: стан-фон компаундом (.irow.irow--x) щоб побити зебру .irow:nth-child(even) */
.irow{ position:relative; padding:9px var(--sp-md) 9px 17px; min-height:60px; background:var(--km-surface);
  border-bottom:1px solid var(--km-border); }
.irow:nth-child(even){ background:var(--km-bg-alt); }
.irow.irow--conflict{ background:var(--conflict-wash); }
.irow.irow--rejected{ background:var(--danger-wash); }
.irow .bar{ position:absolute; left:0; top:0; bottom:0; width:4px; }
.irow--ok .bar{ background:var(--ok); }  .irow--queued .bar{ background:var(--queued); }
.irow--conflict .bar{ background:var(--conflict); width:5px; }  .irow--rejected .bar{ background:var(--danger); width:5px; }
.irow .l1{ display:flex; align-items:center; gap:var(--sp-sm); }
.irow .depth{ font-weight:var(--fw-bold); font-size:var(--fs-depth); color:var(--text); font-variant-numeric:tabular-nums; }
.irow .l1 .chip{ margin-left:auto; }
.irow .l2{ display:flex; align-items:center; gap:9px; margin-top:5px; }
.irow .rock{ font-size:var(--fs-meta); font-weight:var(--fw-semibold); color:var(--text); }
.irow .clr{ font-size:var(--fs-dense); color:var(--text-muted); display:inline-flex; align-items:center; gap:5px; }
.irow .len{ margin-left:auto; font-size:var(--fs-dense); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.irow .resolve{ margin-top:8px; display:flex; align-items:center; gap:var(--sp-sm); }
.irow .resolve .note{ font-size:var(--fs-xs); color:var(--text-muted); }
.irow .resolve .note b{ color:var(--conflict-text); font-weight:var(--fw-bold); }

/* ── Таблиця даних (планшет/десктоп) ──
      зебра vs стан: рівна специфічність, стан нижче в джерелі → виграє (перевірено).
      Ліва смуга стану — inset-тінь у першій комірці (border-collapse не дає border на tr). */
.gtable{ width:100%; border-collapse:collapse; background:var(--km-surface); font-size:var(--fs-meta); }
.gtable thead th{ text-align:left; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.03em; padding:11px var(--sp-lg); border-bottom:2px solid var(--km-border);
  /* TERM-INT [О-7]=(a): довгі галузеві підписи заголовків («Дирекційний кут (азимут сітки), °» 33 симв.,
     «Inclination (from vertical), °» 31) переносяться в межах комірки — без окремих ключів *.short */
  white-space:normal; overflow-wrap:anywhere; vertical-align:bottom; }
.gtable thead th.num{ text-align:right; }
.gtable tbody td{ padding:12px var(--sp-lg); border-bottom:1px solid var(--km-border); color:var(--text); vertical-align:middle; }
.gtable tbody td.num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:var(--fw-semibold); }
.gtable tbody td.len{ color:var(--text-muted); font-weight:var(--fw-medium); }
.gtable tbody tr:nth-child(even){ background:var(--km-bg-alt); }
.gtable tbody tr.is-conflict{ background:var(--conflict-wash); }
.gtable tbody tr.is-rejected{ background:var(--danger-wash); }
.gtable tbody tr:hover{ background:var(--km-surface-hover); }
.gtable tbody td:first-child{ box-shadow:inset 4px 0 0 transparent; }
.gtable tbody tr.is-ok       td:first-child{ box-shadow:inset 4px 0 0 var(--ok); }
.gtable tbody tr.is-queued   td:first-child{ box-shadow:inset 4px 0 0 var(--queued); }
.gtable tbody tr.is-conflict td:first-child{ box-shadow:inset 4px 0 0 var(--conflict); }
.gtable tbody tr.is-rejected td:first-child{ box-shadow:inset 4px 0 0 var(--danger); }

/* ── Нижній док вводу + рядок прев'ю/готовності ── */
.dock{ background:var(--km-surface); border-top:1px solid var(--km-border); border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  padding:var(--sp-md) var(--sp-lg) 18px; box-shadow:var(--shadow-dock); }
.dock .preview{ display:flex; align-items:center; gap:var(--sp-sm); margin-bottom:10px; font-size:var(--fs-meta); }
.dock .preview .calc{ font-weight:var(--fw-bold); color:var(--text); font-variant-numeric:tabular-nums; }
.dock .preview .ready{ margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  color:var(--ok-text); font-weight:var(--fw-semibold); }
.dock .preview .ready svg{ width:14px; height:14px; flex:none; }

/* ── Аркуш вибору (палітра довідника) ── */
.sheet{ background:var(--km-surface); border-radius:var(--r-3xl) var(--r-3xl) 0 0; padding:var(--sp-lg); }
/* .opt — рядок вибору; standalone, щоб працював і в .sheet (палітра), і в .modal (імпорт) */
.opt{ display:flex; align-items:center; gap:var(--sp-md); min-height:48px; padding:6px var(--sp-sm); border-radius:var(--r-md); cursor:pointer; }
.opt:hover{ background:var(--km-bg); }
.opt.is-selected,.opt.active{ background:var(--queued-bg); }
.opt .code{ font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--text-muted); background:var(--km-bg); padding:2px 7px; border-radius:var(--r-sm); font-variant-numeric:tabular-nums; }

/* ── Оверлей (тло) + аркуш/модалка ── */
.overlay{ position:fixed; inset:0; background:rgba(26,26,26,.5); display:none; z-index:20; }
.overlay.open{ display:flex; align-items:flex-end; justify-content:center; }        /* нижній аркуш */
.overlay--center.open{ align-items:center; padding:var(--sp-lg); }                   /* центрована модалка */
.overlay > .sheet{ width:100%; max-width:600px; max-height:78vh; overflow:auto; }
.modal{ background:var(--km-surface); border-radius:var(--r-2xl); width:min(520px,92vw); max-height:80vh; overflow:auto; box-shadow:var(--shadow-card); padding:var(--sp-lg); }

/* ── Мережевий індикатор (у темній шапці) ── */
.netpill{ display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 var(--sp-sm);
  border-radius:var(--r-full); font-size:var(--fs-chip); font-weight:var(--fw-semibold); font-family:var(--font); white-space:nowrap; }
.netpill--online{ color:#5FD6A1; background:rgba(30,158,90,.20); }                    /* світлий зелений на темному тлі */
.netpill--offline{ color:var(--on-dark-2); background:rgba(255,255,255,.10); }

/* ── Лічильники / нейтральний чіп ── */
.chip--neutral{ color:var(--text); background:var(--km-bg); }
.stat-chip{ display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 var(--sp-sm);
  border-radius:var(--r-full); font-size:var(--fs-chip); font-weight:var(--fw-semibold);
  color:var(--text-muted); background:var(--km-bg); font-family:var(--font); white-space:nowrap; }
.stat-chip b{ color:var(--text); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.stat-chip--diverge{ color:var(--conflict-text); background:var(--conflict-bg); }
.stat-chip--diverge b{ color:var(--conflict-text); }

/* ── Багаторядкове поле + select (доповнення до .input) ── */
.textarea{ width:100%; border:1.5px solid var(--km-border); border-radius:var(--r-lg); background:var(--km-surface);
  padding:var(--sp-sm) var(--sp-md); font-family:var(--font); font-size:var(--fs-field); color:var(--text);
  line-height:1.4; min-height:72px; resize:vertical; }
.textarea::placeholder{ color:var(--text-muted); }
.textarea:focus{ outline:none; border-color:var(--km-blue); box-shadow:var(--focus-ring); }
select.input{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px, calc(100% - 11px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

/* ── Доступність ── */
:focus-visible{ outline:2px solid var(--km-blue); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ============================================================================
   ВІДОМІ ОБМЕЖЕННЯ (обумовлені брендом; свідомо прийняті) ─
   • --km-border (#E0E0E0) як межа поля має ~1.3:1 до білого (нижче 3:1 для UI-
     графіки). Бренд-локнуто. Пом'якшено: фокус робить межу синьою (3.88:1);
     стани несуть колір+іконку+текст, не лише межу. Для критичних полів —
     покладатись на підпис і фокус, не лише на межу.
   • Смуга «конфлікт» (жовта) на світло-жовтому фоні рядка ~1.5:1 — декоративна.
     Стан ніколи не кодується лише смугою: завжди є чіп (іконка+текст+фон).
   • Розміри в px (не rem) — свідомо, для передбачуваних цілей дотику в полі;
     масштаб тексту забезпечується зумом сторінки (WCAG 1.4.4 виконано зумом).
   ============================================================================ */