/* iMAGO Medical — пакет стилів 1.2.0. ПОХІДНИЙ файл: не правити.
   Джерело: ~/design-systems/imago-medical/dashboard/styles.css (sha256 5e8dcc89f1be…), дашборд — і є система (RULES.md, Правило 0).
   Правка: спершу дашборд → SPEC → tools/build-dist → ~/bin/ds-sync --all. */

/* шрифт LINE Seed локально (у дашборді підключено з Google Fonts, гарнітура та сама) */
@font-face{font-family:'LINE Seed JP';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/ls-400-lat.woff2') format('woff2')}
@font-face{font-family:'LINE Seed JP';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/ls-400-cyr.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+2116,U+2019}
@font-face{font-family:'LINE Seed JP';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/ls-700-lat.woff2') format('woff2')}
@font-face{font-family:'LINE Seed JP';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/ls-700-cyr.woff2') format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+2116,U+2019}


:root{
  --bg:#F4F6FF;
  --surface:#FFFFFF;
  --ink:#152159;
  --accent:#0070F6;
  --yellow:#FADD2A;
  --tint-1:#E3EBFD;
  --tint-2:#EBF0FE;
  --tint-3:#E0EBFE;

  /* базовий кегль — від нього рахуються всі інші (розділ 3.1) */
  --t-base:16px;

  --r-card:26px;   /* картка — стандарт */
  --r-big:32px;    /* великий блок */
  --r-pill:99px;   /* кнопка, чип */
  --r-sm:16px;     /* службові: плашка, комірка, тег */
  --r-xs:8px;      /* найдрібніше: маркер, бейдж, хвостик бульбашки */

  --pad-card:32px;
  --pad-big:40px;

  /* єдина крива руху бренду */
  --ease:cubic-bezier(0.2,0.8,0.2,1);

  --shell:1296px;

  --muted:rgba(21,33,89,.64);
  --faint:rgba(21,33,89,.30);
  /* Ті самі ролі, але на темній поверхні (--ink / --accent). Рівно два значення:
     інакше кожен макет вигадує власну прозорість (розділ 11.5). */
  /* Синій для тексту НА темному. Палітровий --accent дає на чорнилі 3.34:1
     і не проходить AA, тому підсвітка слова в темному заголовку бере цей,
     світліший тон: 5.74:1. Для фону й кнопок лишається --accent. */
  --accent-on-dark:#4DA3FF;
  --on-dark-muted:rgba(255,255,255,.72);
  --on-dark-faint:rgba(255,255,255,.55);
  /* 1.1 (23.10.2026, власник: все Б): ще два значення білого на темному — НЕ для тексту.
     Для тексту прозоростей і далі рівно дві (вище). На синьому --accent другорядний
     текст — чистий білий: 72% дає там лише 3.05:1 (розділ 2.6). */
  --on-dark-line:rgba(255,255,255,.14);   /* лінія, роздільник на темному */
  --on-dark-fill:rgba(255,255,255,.08);   /* підкладка рядка, чипа на темному */
  --hair:#E3EBFD;

  /* 1.1 · стани. Червоний — лише помилка поля, яку людина має виправити (7.26);
     помилка форми загалом — плашка --tint-1 без червоного. 6.54:1 на білому. */
  --danger:#B3261E;
  --ok:#0B7A3B;
  /* 1.1 · тінь предмета-зображення в спокої (скриншот, аркуш, телефон, картка) — 4.8.
     Те саме значення, що в ховера плитки. Картки інтерфейсу в спокої — без тіні. */
  --shadow-object:0 18px 40px -18px rgba(21,33,89,.34);
  /* 1.1 · кольори даних (2.7) — ЛИШЕ схеми, де колір = назва напряму (канали,
     напрями робіт). Не для тексту, кнопок, фону. Проміжні сині — color-mix. */
  --data-1:#FF6100;
  --data-2:#F2A900;
  --data-3:#A400F0;
}

/* 1.1 · телефон (В7, розділ 3.12): дві межі. 900 — композиція сторінки (дві-три
   колонки блоку) стає в одну; 640 — мобільна шкала кегля і стиснені радіуси/поля,
   перевірені на трьох КП. Службова сітка дашборда .g2/.g3/.g4 лишається як була. */
@media (max-width:640px){
  :root{--r-card:22px;--r-big:26px;--pad-card:22px;--pad-big:24px}
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'LINE Seed JP',system-ui,sans-serif;
  font-weight:400;
  font-size:var(--t-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.shell{max-width:var(--shell);margin:0 auto;padding:0 32px}
@media (max-width:640px){.shell{padding:0 20px}}

/* ---------- шапка ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(244,246,255,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.top img{height:26px;display:block}
.top nav{display:flex;gap:24px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.top nav a{color:inherit;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.top nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (max-width:860px){.top nav{display:none}}

/* ---------- герой ---------- */
.hero{padding:96px 0 72px}
.hero .kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:var(--surface);border-radius:var(--r-pill);padding:8px 18px;margin-bottom:28px;
}
.hero h1{
  font-size:clamp(38px,5.4vw,62px);line-height:1.1;font-weight:700;
  letter-spacing:-.02em;text-wrap:balance;max-width:15ch;margin-bottom:24px;
}
.hero p{font-size:18px;line-height:1.5;color:var(--muted);max-width:62ch;text-wrap:pretty}
.hero .meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px;font-size:14px;color:var(--muted)}
.hero .meta span{background:var(--surface);border-radius:var(--r-pill);padding:8px 16px}


/* ---------- секції ---------- */
section.block{padding:0 0 72px}
/* Номер вирівняний по ЦЕНТРУ заголовка, не по базовій лінії: у чипа своя
   підкладка й padding, тому на baseline він візуально провисав під текст. */
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.sec-num{
  font-size:14px;font-weight:700;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;
  background:var(--surface);border-radius:var(--r-pill);
  min-width:38px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 13px;flex:none;
}
.sec-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;font-weight:700;letter-spacing:-.01em}
.sec-lead{font-size:17px;color:var(--muted);max-width:72ch;margin-bottom:32px;text-wrap:pretty}
.sec-lead code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--surface);padding:1px 6px;border-radius:6px;
}

/* ---------- картки ---------- */
.card{background:var(--surface);border-radius:var(--r-card);padding:var(--pad-card)}
.grid{display:grid;gap:20px}
/* елемент сітки має min-width:auto і не дає широкому вмісту стиснутись */
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card h3{font-size:20px;font-weight:700;line-height:1.25;margin-bottom:10px}
.card p{font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.card p+p{margin-top:10px}

/* мітка блока — адреса для коментаря */
.anchor{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.anchor.on-dark{color:var(--yellow)}

/* Той самий вигляд, але БЕЗ значення адреси: дрібна мітка всередині макета
   («01», «і головне»). Окремий клас, бо .anchor читається як номер розділу —
   і людиною, і перевіркою нумерації. Мітка з номером у .anchor ламала б
   адресацію документа. */
.tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.tag.on-dark{color:var(--yellow)}

/* ---------- жовтий маркер ---------- */
.mk{
  /* Смуга йде НИЖЧЕ базової лінії (до 92%), інакше хвостики ж, у, ц, р
     звисають під маркером і він читається як помилка верстки. */
  background:linear-gradient(to bottom,transparent 0 58%,var(--yellow) 58% 92%,transparent 92%);
  /* Виступ за слово — у частках кегля (1.1, з усіх трьох КП): на 16 і на 60 px
     однаково виглядає як слід олівця. Було 6px. */
  padding:0 .12em .12em;margin:0 -.12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* На насиченому фоні (чорнило, синій, фото) маркер — суцільна плашка з чорнилом
   (6.1в): смуга прозора зверху, і білі літери лягли б на жовте — 1.36:1. */
.mk.solid{background:var(--yellow);color:var(--ink);border-radius:var(--r-xs);padding:0 .14em .04em;margin:0 -.04em}


/* ---------- зразок кольору ---------- */
.sw{background:var(--surface);border-radius:var(--r-card);overflow:hidden}
.sw .chip{height:120px;display:block;position:relative}
.sw .chip.bordered{box-shadow:inset 0 0 0 1px var(--hair)}
.sw .body{padding:20px 22px 22px}
.sw .role{font-size:15px;font-weight:700;margin-bottom:4px}
.sw .hex{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  color:var(--muted);letter-spacing:.02em;
}
.sw .use{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.45}

/* ---------- рядок правила: правда / хиба ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.pair{grid-template-columns:1fr}}
.demo{border-radius:var(--r-card);padding:28px;background:var(--surface);position:relative}
.demo .verdict{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:18px;display:flex;align-items:center;gap:8px;
}
.demo.ok .verdict{color:var(--ok)}
.demo.no .verdict{color:var(--danger)}
.demo .why{font-size:14px;line-height:1.5;color:var(--muted);margin-top:18px;text-wrap:pretty}

/* ---------- таблиця ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl th{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tbl th.num{text-align:right}
.tbl code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
/* таблиця скролиться всередині себе, а не розпирає сторінку */
.tbl-wrap{background:var(--surface);border-radius:var(--r-card);padding:8px 12px;
  overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.tbl{min-width:420px}

/* ---------- код ---------- */
pre{
  background:var(--ink);color:#E7ECFF;border-radius:var(--r-sm);
  padding:22px 24px;overflow-x:auto;font-size:14px;line-height:1.6;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
pre .c{color:rgba(231,236,255,.5)}
pre .v{color:var(--yellow)}

/* ---------- плитки бібліотеки ---------- */
.tile{border-radius:var(--r-card);padding:var(--pad-card);display:flex;flex-direction:column;
  justify-content:space-between;gap:36px;min-height:230px;
  position:relative;overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
/* плитка живе під курсором: підіймається, стрілка їде вперед */
.tile:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(21,33,89,.34)}
.tile:hover .arrow{transform:translate(3px,-3px)}

/* плитка з фотофоном — фото затемнене, текст білий */
.tile.photo{color:#fff;background:#24425f}
.tile.photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--shot);background-size:cover;background-position:center;
  transition:transform .5s var(--ease);
}
/* Затемнення низу має бути дуже щільним: реальні фото клінік бувають темні
   й строкаті, і саме на них білий текст зникає першим. */
.tile.photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,21,58,.93) 0%,rgba(13,21,58,.78) 46%,rgba(13,21,58,.42) 100%);
}
.tile.photo:hover::before{transform:scale(1.05)}
.tile.photo>*{position:relative;z-index:2}
.tile.photo .t-desc{color:var(--on-dark-muted)}
/* текст угорі — там затемнення найгустіше, фото лишається видимим унизу */
.tile.photo{justify-content:space-between}
.tile.photo .t-title,.tile.photo .t-desc,.tile.photo .bignum{
  text-shadow:0 1px 12px rgba(11,18,50,.55)}

/* декоративна ілюстрація в кутку плитки */
.tile .deco{
  position:absolute;right:-18px;bottom:-18px;width:150px;height:150px;z-index:0;
  opacity:.5;pointer-events:none;transition:transform .4s var(--ease);
}
.tile:hover .deco{transform:translate(-6px,-6px) rotate(-4deg)}
.tile.light .deco{opacity:.42}
.tile>*:not(.deco){position:relative;z-index:1}
.tile .t-title{font-size:var(--t-h5);font-weight:700;line-height:1.5;text-wrap:balance}
.tile .t-desc{font-size:14px;line-height:1.5;margin-top:8px}
.tile.light{background:var(--surface)}
.tile.light .t-desc{color:var(--muted)}
.tile.dark{background:var(--ink);color:#fff}
.tile.dark .t-desc{color:var(--on-dark-muted)}
.tile.blue{background:var(--accent);color:#fff}
.tile.blue .t-desc{color:var(--on-dark-muted)}
.tile .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}

/* Стрілка = ПОСИЛАННЯ. Вона обіцяє перехід, тому поводиться як кнопка:
   має ховер, натискання і фокус. Галочка/хрестик — навпаки, статичні
   позначки сенсу, вони НЕ клікаються (правило 7.3). */
.arrow{
  width:56px;height:56px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  background:var(--ink);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font-family:inherit;
  transition:transform .28s var(--ease),background .28s var(--ease);
}
.arrow:hover{background:var(--accent);transform:translate(3px,-3px)}
.arrow:active{transform:scale(.94)}
.arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.arrow.inv{background:#fff;color:var(--ink)}
.arrow.inv:hover{background:var(--yellow);color:var(--ink)}
.arrow.sm{width:40px;height:40px;font-size:17px}

/* ---------- базові іконки ----------
   Один стиль на всі: лінія 1.8, круглі кінці, сітка 24.
   Статичні, без анімації — це позначки, а не органи керування. */
.ico{width:24px;height:24px;flex:none;display:inline-block;vertical-align:-5px;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke:currentColor}
.ico-lg{width:32px;height:32px}
.ico-ok{color:var(--ok)}
.ico-no{color:var(--danger)}
.ico-acc{color:var(--accent)}

.ico-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px}
.ico-cell{
  background:var(--bg);border-radius:var(--r-sm);padding:20px 12px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.ico-cell .nm{font-size:12px;color:var(--muted);letter-spacing:.02em}

.bignum{font-size:95px;line-height:1;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.bignum.blue{color:var(--accent)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;text-decoration:none;
  border-radius:var(--r-pill);padding:16px 32px;font-size:16px;font-weight:700;
  border:0;cursor:pointer;font-family:inherit;
  transition:transform .18s cubic-bezier(0.2,0.8,0.2,1),background .18s cubic-bezier(0.2,0.8,0.2,1);
}
.btn:hover{background:#1d2d78}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.acc{background:var(--accent)}
.btn.acc:hover{background:#0063db}
/* 1.1 · велика кнопка-заклик для КП і лендингів (7.25). .btn лишається для інтерфейсів.
   Під курсором підіймається на 2 px і темнішає (#0063db: білий на ньому 5.52:1). */
.btn.lg{min-height:64px;padding:0 34px;font-size:18px;line-height:1.2;justify-content:center;background:var(--accent)}
.btn.lg:hover{background:#0063db;transform:translateY(-2px)}
.btn.lg:active{transform:translateY(0) scale(.97)}
/* вимкнена — одна для всіх: лишається читабельною, не прозорістю */
.btn:disabled,.btn[aria-disabled="true"]{background:var(--tint-1);color:var(--faint);cursor:not-allowed;transform:none}
.btn-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink);font-size:16px;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1.5px;background:0;border:0;
  cursor:pointer;font-family:inherit;padding:4px 0;
}
.btn-link:hover{color:var(--accent)}
.btn-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- поле вводу (1.1, 7.26) ----------
   Радіус 16 (--r-sm) — так зроблено всюди, де людина реально щось вводить.
   Помилка поля — --danger на рамку й текст; помилка форми — .form-err без червоного. */
.field{display:grid;gap:8px}
.field>label{font-size:14px;font-weight:700;line-height:1.4;display:flex;justify-content:space-between;gap:12px}
.field>label small{font-size:13px;font-weight:400;color:var(--muted)}
.input{display:block;width:100%;min-height:56px;padding:0 18px;border-radius:var(--r-sm);border:2px solid transparent;
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:16px;font-weight:400;line-height:1.4;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.input::placeholder{color:var(--faint)}
.input:hover{border-color:var(--tint-1)}
.input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.field-err{font-size:14px;line-height:1.4;color:var(--danger)}
.form-err{background:var(--tint-1);color:var(--ink);border-radius:var(--r-sm);padding:14px 18px;font-size:15px;line-height:1.5}

/* ---------- нотатка / застереження ----------
   Кольорова смужка зліва (inset box-shadow) ЗАБОРОНЕНА — правило 10.2.
   Замість неї: знак у кружечку, який виступає за край картки, і зсунутий
   текст. Виріз і зсув — мова бренду; смужка — ні. */
.note{
  position:relative;
  background:var(--surface);border-radius:var(--r-card);padding:26px 28px;
  font-size:15px;line-height:1.55;color:var(--muted);text-wrap:pretty;
}
.note b{color:var(--ink)}

/* Біла нотатка ВСЕРЕДИНІ білої картки зникає — межі не видно.
   Усередині картки нотатка бере колір фону сторінки (правило 8.4). */
.card .note,.demo .note,.tile .note{background:var(--bg)}

.note.warn,.note.stop{padding-left:64px}
.note.warn::before,.note.stop::before{
  content:"";position:absolute;left:-14px;top:26px;
  width:44px;height:44px;border-radius:50%;
  background-repeat:no-repeat;background-position:center;background-size:22px 22px;
  box-shadow:0 2px 10px rgba(21,33,89,.14);
}
/* око — «дивись уважно» */
.note.warn::before{
  background-color:var(--yellow);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152159' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.5 5.2 12 5.2 22.2 12 22.2 12 18.5 18.8 12 18.8 1.8 12 1.8 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
/* хрестик — «не роби так» */
.note.stop::before{
  background-color:#B3261E;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
@media (max-width:640px){
  .note.warn,.note.stop{padding-left:28px;padding-top:44px}
  .note.warn::before,.note.stop::before{left:20px;top:-18px}
}

/* ---------- список правил ---------- */
.rules{list-style:none;display:flex;flex-direction:column;gap:14px}
.rules li{
  background:var(--surface);border-radius:var(--r-sm);padding:18px 22px;
  font-size:15px;line-height:1.55;display:flex;gap:14px;align-items:flex-start;
}
.rules .m{flex:none;font-weight:700;color:var(--accent);font-size:15px;line-height:1.55}
.rules.bad .m{color:var(--danger)}
.rules b{font-weight:700}

/* ---------- сітка знаків ---------- */
.marks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.mark-box{
  border-radius:var(--r-sm);min-height:150px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;
}
.mark-box img{width:64px;display:block}
.mark-box .cap{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.mb-bg{background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.mb-white{background:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
.mb-dark{background:var(--ink);color:#fff}
.mb-blue{background:var(--accent);color:#fff}
.mb-yellow{background:var(--yellow);color:var(--ink)}
.mb-yellow .cap{opacity:.78}
.mb-photo{
  background:linear-gradient(135deg,#375f8a 0%,#24425f 60%,#d8b34a 100%);color:#fff;
}

/* ---------- анімації ---------- */
.anim-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.box-demo{
  width:110px;height:110px;border-radius:var(--r-sm);background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;
  text-align:center;padding:10px;cursor:pointer;border:0;font-family:inherit;
}
.box-demo.hov{transition:transform .2s cubic-bezier(0.2,0.8,0.2,1)}
.box-demo.hov:hover{transform:translateY(-6px)}
.box-demo.prs{transition:transform .15s cubic-bezier(0.2,0.8,0.2,1)}
.box-demo.prs:active{transform:scale(.97)}
.box-demo:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Каскад появи. Спрацьовує КОЛИ ЕЛЕМЕНТ З'ЯВИВСЯ НА ЕКРАНІ, а не при
   завантаженні сторінки — інакше анімацію бачить лише той, хто стоїть
   угорі. Крок між сусідами 210ms (втричі більший за початковий 70ms):
   око має встигнути помітити чергу. */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cascade .ci{opacity:0}
.cascade.in .ci{animation:riseIn .55s var(--ease) both}
.cascade.in .ci:nth-child(1){animation-delay:0ms}
.cascade.in .ci:nth-child(2){animation-delay:210ms}
.cascade.in .ci:nth-child(3){animation-delay:420ms}
.cascade.in .ci:nth-child(4){animation-delay:630ms}
/* без руху — просто показати, нічого не ховати */
@media (prefers-reduced-motion:reduce){
  .cascade .ci{opacity:1}
}
/* 1.1 · один клас появи на сторінку (9.3). Черга — змінна --i на елементі, тож
   працює на будь-якій кількості. Крок 210 мс до 4 елементів; у довгому списку
   (.rv-list) 80 мс, щоб уся черга вклалась у секунду. Без руху і перед друком — усе видно. */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--i,0) * var(--rv-step,210ms))}
.rv.in{opacity:1;transform:none}
.rv-list{--rv-step:80ms}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
@media print{.rv{opacity:1;transform:none}}

/* ---------- підвал ---------- */
footer{background:var(--ink);color:var(--on-dark-muted);padding:56px 0;margin-top:32px}
footer .f-in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
footer img{height:24px;margin-bottom:14px}
footer p{font-size:14px;line-height:1.6;max-width:52ch}
footer b{color:#fff}

/* ---------- прев'ю десктопного екрана всередині документа ----------
   Блоки 11.1 показують ДЕСКТОПНИЙ макет. Це не адаптив сайту: справжній
   сайт на телефоні перебудовується (11.2), а тут ми дивимось на десктоп.

   На вузькому екрані макет не перебудовуємо, а МАСШТАБУЄМО цілком —
   через transform:scale. Тоді пропорції, кеглі й сітка лишаються
   рівно такими, як на комп'ютері, просто все видно меншим.
   Так само працює прев'ю в будь-якому дизайн-інструменті.

   Чому не зменшення кегля: воно ламає сітку (колонка 90px, заголовок
   по слову на рядок). Чому не горизонтальна прокрутка: видно лише
   третину блока, і це читається як зламана верстка. */
.screen-preview{font-size:var(--t-base)}

@media (max-width:1100px){
  .screen-preview{
    /* внутрішня ширина лишається десктопною, а показуємо зменшену копію */
    --pw:1040px;
    overflow:hidden;
  }
  .screen-preview > *{
    width:var(--pw);
    transform:scale(var(--k));
    transform-origin:top left;
    /* transform не змінює місце, яке елемент займає в потоці, тож під
       зменшеним макетом лишається порожнеча висотою (1-k) від оригіналу.
       Прибираємо її скриптом (data-h), бо у CSS немає доступу до висоти. */
  }
}
@media (max-width:1100px){ .screen-preview{--k:.62} }
@media (max-width:900px){  .screen-preview{--k:.52} }
@media (max-width:640px){  .screen-preview{--k:.34} }
@media (max-width:420px){  .screen-preview{--k:.30} }

/* ---------- мобільна шкала кегля (розділ 3.2.1) ----------
   База НЕ змінюється: 16px на телефоні = 2.6 мм, це комфортно з 25-30 см.
   Стискаються тільки верхні щаблі, бо десктопний H1 62px дає в ширині
   телефона 11 символів у рядку і заголовок ламається по слову.
   Дрібний (87%) і підпис (81%) лишаються як є — вони вже біля межі 12px.
   Порядок важливий: спершу десктопні значення, потім мобільне перевизначення. */
:root{
  --t-hero:600%; --t-h1:390%; --t-h2:260%;
  /* Щаблі між H2 і текстом задані в px, а не у %: відсоток рахується від
     локальної бази, і той самий токен усередині блока з іншим font-size
     давав інші пікселі (22.4 замість 22). Роль щабля — у розділі шкали. */
  --t-h3:32px; --t-h4:26px; --t-h5:22px; --t-h6:20px; --t-lg:112%;
  /* 1.1 (В8): гасло — один на сторінку, лише перший екран або теза на темній панелі;
     лід першого екрана — 20 px (125%), ліди розділів лишаються 18 (--t-lg). */
  --t-slogan:clamp(44px,8vw,96px); --t-lead-hero:20px;
}
@media (max-width:640px){
  :root{
    --t-hero:300%; --t-h1:225%; --t-h2:180%;
    --t-h3:24px; --t-h4:22px; --t-h5:20px; --t-h6:20px; --t-lg:106%;
    --t-slogan:clamp(36px,11vw,44px); --t-lead-hero:17px;
  }
}

/* Інтерліньяж прив'язаний до щабля намертво: один розмір = один інтерліньяж.
   Задається тут, а не в місці вживання, інакше однаковий кегль розповзається
   на два різні інтерліньяжі (знайдено звіркою 15.08.2026). */
.h3{font-size:var(--t-h3);line-height:1.1;font-weight:700}
.h4{font-size:var(--t-h4);line-height:1.25;font-weight:700}
.h5{font-size:var(--t-h5);line-height:1.5;font-weight:700}
.h6{font-size:var(--t-h6);line-height:1.25;font-weight:700}

/* 1.1 · гасло і лід першого екрана (3.11) */
.slogan{font-size:var(--t-slogan);line-height:1;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.lead-hero{font-size:var(--t-lead-hero);line-height:1.5;color:var(--muted);text-wrap:pretty}

/* 1.1 · кабінет-застосунок на білому (2.8): токени не перевизначаються, сторінка
   бере --surface, а картки всередині — --bg. Лише для екранів кабінету й admin. */
.app-white{background:var(--surface)}
.app-white .card{background:var(--bg)}

/* ---------- дашборд: підрозділ із живим прикладом (1.1) ----------
   Номер-чип і назва в одному рядку, без надзаголовка. Полотно .ds-stage тримає
   живий приклад на його власній поверхні; «Де живе» — шлях до джерела. */
.ds-sub{margin:0 0 40px}
.ds-sub > .sec-lead{margin-bottom:18px}
.ds-sub-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 10px}
.ds-sub-head .sec-num{font-size:13px;height:28px;min-width:0}
.ds-sub-head h3{font-size:var(--t-h4);line-height:1.25;font-weight:700}
.ds-src{font-size:14px;color:var(--muted);margin-top:14px;line-height:1.5}
.ds-src code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--bg);padding:1px 6px;border-radius:6px;word-break:break-all}
.ds-stage{border-radius:var(--r-card);overflow:hidden;position:relative}
.ds-stage.on-bg{background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.ds-stage.on-white{background:var(--surface)}
.ds-stage.on-ink{background:var(--ink)}
@media (max-width:640px){.ds-sub-head h3{font-size:var(--t-h5);line-height:1.5}}
@media (min-width:641px){.ds-sub .sec-lead code{white-space:nowrap}}
.ds-sub code{overflow-wrap:anywhere}

/* =====================================================================
   1.1 · КОМПОНЕНТИ ЗАСТОСУНКУ (admin, кабінети) — розділ 7.27 дашборда.
   Прийшли з admin.imago.com.ua (23.10.2026), де вже живуть. Беруть лише
   токени системи. Для сторінок для клієнтів (КП, сайт) — не брати.
   Розкладку (меню зліва, шапка, ширина змісту) кожен застосунок тримає сам.
   ===================================================================== */
.ad-arr{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s var(--ease)}
a:hover>.ad-arr{transform:translate(2px,-2px)}

/* меню застосунку: вертикальне (ПК) і смуга вкладок (телефон) */
.ad-nav{display:flex;flex-direction:column;gap:2px}
.ad-nav a{display:block;padding:11px 14px;border-radius:var(--r-sm);text-decoration:none;font-size:15px;color:var(--muted);
  transition:background .15s var(--ease),color .15s var(--ease)}
.ad-nav a:hover{background:var(--tint-2);color:var(--ink)}
.ad-nav a[aria-current]{background:var(--tint-1);color:var(--ink);font-weight:700}
.ad-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ad-tabs::-webkit-scrollbar{display:none}
.ad-tabs a{flex:none;font-size:14px;text-decoration:none;color:var(--muted);background:var(--surface);border-radius:var(--r-pill);padding:9px 14px}
.ad-tabs a[aria-current]{background:var(--ink);color:#fff;font-weight:700}

/* лічильник біля заголовка, порожній стан */
.ad-count{font-size:14px;font-weight:700;color:var(--accent);background:var(--surface);border-radius:var(--r-pill);padding:4px 12px;
  font-variant-numeric:tabular-nums}
.card .ad-count{background:var(--tint-2)}
.ad-empty{font-size:15px;color:var(--muted);background:var(--surface);border-radius:var(--r-sm);padding:20px 24px}
.card .ad-empty{background:var(--tint-2)}

/* плитка з цифрою (7.1, правило 9 SPEC) у вигляді застосунку */
.ad-stat{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px 26px;text-decoration:none;color:var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.ad-stat b{font-size:48px;line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ad-stat span{font-size:15px;font-weight:700;line-height:1.3}
.ad-stat small{font-size:13px;line-height:1.4;color:var(--muted)}
.ad-stat .ad-arr{position:absolute;top:22px;right:22px;color:var(--accent)}
a.ad-stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-object)}
.ad-stat-acc{background:var(--accent);color:#fff}
.ad-stat-acc small{color:#fff}
.ad-stat-acc .ad-arr{color:#fff}

/* стрічка подій */
.ad-feed{list-style:none;display:flex;flex-direction:column}
.ad-ev{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45}
.ad-ev:last-child{border-bottom:0}
.ad-ev-t{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.ad-ev-b a{font-weight:700;text-decoration:none;color:var(--accent)}

/* ключ-значення і короткий список посилань */
.ad-kv{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ad-kv li{background:var(--tint-2);border-radius:var(--r-sm);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.ad-kv span{font-size:13px;color:var(--muted)}
.ad-kv b{font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.ad-mini{list-style:none;display:flex;flex-direction:column;gap:10px}
.ad-mini li{display:flex;flex-direction:column}
.ad-mini a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--accent);text-decoration:none}

/* запис реєстру: назва, опис, стан, адреса */
.ad-reglist{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ad-reg{background:var(--surface);border-radius:var(--r-card);padding:24px 26px;display:flex;gap:16px;justify-content:space-between;align-items:flex-start}
.ad-reg-main{min-width:0;display:flex;flex-direction:column;gap:8px}
.ad-reg h3{font-size:20px;line-height:1.25;font-weight:700;margin:0}
.ad-reg p{font-size:15px;line-height:1.55;color:var(--muted)}
.ad-reg-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ad-who{font-size:14px;color:var(--muted)}
.ad-url{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--accent);text-decoration:none;word-break:break-all}
.ad-links{display:flex;flex-wrap:wrap;gap:6px 16px}
.ad-links a{display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--muted);text-decoration:none}
.ad-links a:hover,.ad-url:hover{color:var(--ink)}
.ad-date{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* стан і чип: живе — синій, перевірити — жовтий ярлик, тест — тон, архів — тихо */
.ad-state,.ad-chip{display:inline-block;font-size:12px;font-weight:700;line-height:1;border-radius:var(--r-pill);padding:6px 10px;white-space:nowrap}
.ad-chip{background:var(--tint-2);color:var(--muted)}
.ad-state-live{background:var(--accent);color:#fff}
.ad-state-check{background:var(--yellow);color:var(--ink)}
.ad-state-test{background:var(--tint-1);color:var(--ink)}
.ad-state-archive{background:var(--tint-2);color:var(--muted)}

/* перемикач стану (сегменти) */
.ad-seg{display:inline-flex;background:var(--tint-2);border-radius:var(--r-pill);padding:3px;gap:2px;margin-bottom:4px}
.ad-seg button{font:inherit;font-size:13px;font-weight:700;border:0;background:transparent;color:var(--muted);border-radius:var(--r-pill);
  padding:7px 12px;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease)}
.ad-seg button:hover:not([disabled]){color:var(--ink);background:var(--surface)}
.ad-seg button[aria-pressed="true"]{background:var(--ink);color:#fff;cursor:default}
.ad-seg + small{display:block}

/* форма входу застосунку: поле 16 (7.26), помилка входу — плашка без червоного */
.ad-form{display:flex;flex-direction:column;gap:10px}
.ad-form label{font-size:14px;font-weight:700}
.ad-form input{font:inherit;font-size:16px;color:var(--ink);background:var(--tint-2);border:2px solid transparent;border-radius:var(--r-sm);padding:14px 16px}
.ad-form input:focus{outline:0;border-color:var(--accent)}
.ad-form .btn{margin-top:10px;border:0;cursor:pointer;font-family:inherit}
.ad-err{font-size:14px;font-weight:700;color:var(--ink);background:var(--tint-1);border-radius:var(--r-sm);padding:12px 16px}

@media (max-width:1100px){.ad-reglist{grid-template-columns:1fr}}
@media (max-width:640px){
  .ad-stat{padding:18px}
  .ad-stat b{font-size:34px}
  .ad-stat span{font-size:14px}
  .ad-stat .ad-arr{top:16px;right:16px}
  .ad-ev{grid-template-columns:1fr;gap:2px}
  .ad-reg{padding:20px;flex-direction:column;gap:8px}
}