/* ─────────────────────────────────────────────────────────────────────────
   Оболонка продукту: майстерня, кабінет наставника, дизайн-студія.

   Навмисно НЕЙТРАЛЬНА. Школа, яка щодня працює в цій майстерні, не має
   почуватися в чужому домі: тут немає ні кольорів СПРОБИ, ні її шрифтів.
   Бренд школи живе там, де його бачать студенти, — у кабінеті навчання, на
   публічній сторінці школи й на сертифікаті.

   Єдиний місток: акцент школи. Майстерня підхоплює його з теми (--accent
   задає сторінка після завантаження), тож інструмент трохи відгукується на
   бренд, лишаючись спокійним.

   Змінні названі так само, як були, — сторінки продовжують ними
   користуватись, змінились лише значення.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* поверхні */
  --paper: #FFFFFF;          /* картки */
  --bone: #F4F6F9;           /* заглиблені поверхні: поля вводу, підблоки */
  --bg: #F7F8FB;             /* тло сторінки */
  /* текст */
  --ink: #15181E;
  --fog: #626A76;            /* другорядний текст */
  /* лінії */
  --line: #EBEEF2;           /* тонкий розділювач */
  --line2: #DCE0E7;          /* рамка контролів і карток */
  /* стани */
  --accent: #2F6BE4;         /* школа може перевизначити своїм */
  --accent-ink: #1E4FB8;
  --good: #17803D;
  --danger: #B42318;
  /* сумісність зі старими правилами сторінок */
  --terra: var(--accent);
  --terra-ink: var(--accent-ink);
  /* Заокруглення й тіні. Продукт, у якому людина сидить годинами, легше
     читається мʼякими формами: різкий прямокутник на кожні п'ятнадцять
     пікселів утомлює швидше, ніж здається. */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --sh-1: 0 1px 2px rgba(21,24,30,.05);
  --sh-2: 0 4px 16px rgba(21,24,30,.07);
  --sh-3: 0 12px 34px rgba(21,24,30,.12);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  background-image: none;          /* без фірмової сітки СПРОБИ */
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.02em; font-weight: 700 }
h2 { font-size: 18px; letter-spacing: -.01em }
h3 { font-size: 15.5px; letter-spacing: -.01em }
a { color: var(--ink) }

/* Дрібний підпис-рубрика. Був моноширинний і розріджений — тепер просто
   тихий верхній регістр: менше характеру, більше читабельності. */
.mono {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Картка. Біла на світло-сірому тлі, з мʼякою рамкою замість жорсткої. */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 2.2vw, 24px);
  margin-top: 16px;
  box-shadow: var(--sh-1);
}

/* Заголовок картки: раніше червоний капслок, тепер звичайний підзаголовок.
   Праворуч — лічильник або стан, приглушено. */
.tag {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
}
.tag > span + span { font-weight: 400; font-size: 13.5px; color: var(--fog) }

/* ── Кнопки ──────────────────────────────────────────────────────────────
   Три рівні й нічого більше: головна дія, звичайна, тиха.
   Без капслоку й розрідження — у застосунку вони читаються повільно. */
input, textarea, select, button { font: inherit }

a.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--btn-ink, #fff);
  padding: 10px 20px;
  min-height: 40px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
a.btn:hover, button.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink);
  box-shadow: var(--sh-2); transform: translateY(-1px) }
a.btn:active, button.btn:active { transform: none; box-shadow: var(--sh-1) }
button.btn:disabled { opacity: .55; cursor: default }
/* Іконка всередині кнопки має бути іконкою, а не другим написом: фіксований
   розмір і жодного розтягування, коли підпис довший за неї. */
a.btn > svg, button.btn > svg, .ghost > svg { width: 16px; height: 16px; flex: none }
a.btn > span, button.btn > span, .ghost > span { white-space: nowrap }

a.ghost, button.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line2);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 18px;
  min-height: 40px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  text-decoration: none;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
a.ghost:hover, button.ghost:hover { background: var(--bone); border-color: var(--line2); color: var(--ink);
  box-shadow: var(--sh-1) }
/* Дрібніша кнопка для щільних місць — та сама форма, менша мішень. */
a.btn.sm, button.btn.sm, a.ghost.sm, button.ghost.sm { padding: 6px 14px; min-height: 32px; font-size: 13.5px }

/* Тиха дія: текст, а не кнопка. Підкреслення зʼявляється під курсором —
   інакше десяток підкреслених слів у рядку виглядає як помилка верстки. */
/* Тиха дія все одно лишається дією: розмір тексту як у решти інтерфейсу,
   і достатня висота, щоб у неї можна було влучити. */
.lnk {
  display: inline-flex; align-items: center;
  background: none; border: none; padding: 3px 0;
  min-height: 28px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--fog);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lnk:hover { color: var(--ink); border-bottom-color: var(--line2) }
.lnk.red { color: var(--fog) }
.lnk.red:hover { color: var(--danger); border-bottom-color: currentColor }

/* ── Поля вводу ─────────────────────────────────────────────────────────── */
input, select, textarea {
  border: 1px solid var(--line2);
  background: var(--paper);
  padding: 11px 14px;
  min-height: 42px;
  color: var(--ink);
  width: 100%;
  border-radius: var(--radius);
  transition: border-color .14s ease, box-shadow .14s ease;
}
textarea { min-height: 96px }
input:hover, select:hover, textarea:hover { border-color: #C7CDD6 }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
input::placeholder, textarea::placeholder { color: #98A0AA }
textarea { min-height: 80px; resize: vertical }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--accent) }
input[type=color] { padding: 3px; height: 42px }
label.f { display: grid; gap: 7px; font-size: 13.5px; line-height: 1.45; color: var(--fog) }

/* ── Таблиці ────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 12px }
td, th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top }
th {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--fog);
}
thead th { border-bottom-color: var(--line2) }
tbody tr:last-child td { border-bottom: none }
tbody tr { transition: background .12s ease }
tbody tr:hover { background: var(--bone) }

/* ── Дрібне ─────────────────────────────────────────────────────────────── */
.note { color: var(--fog); font-size: 13.5px; line-height: 1.6; margin-top: 8px }
.msg { color: var(--danger); font-size: 14px; margin-top: 8px }
[hidden] { display: none !important }
code, .code, .mono-num { font-family: var(--mono) }

/* Клавіатура має бачити, де вона стоїть. Один стиль на всі елементи. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button, summary, [role="button"] { cursor: pointer }
summary:focus-visible { outline-offset: 0 }

/* ── Телефон ───────────────────────────────────────────────────────────────
   Майстерню теж відкривають з телефона — щоб відповісти на домашню в дорозі
   або відкрити комусь доступ. Тут виправлено те, що на вузькому екрані
   справді заважає. */

/* Таблиця з семи колонок на 390px перетворює кожне слово на стовпчик літер.
   Хай краще гортається вбік — так її принаймні можна прочитати. */
@media (max-width: 700px) {
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch }
  td, th { padding: 9px 12px }
  /* iOS збільшує сторінку, коли фокус потрапляє в поле дрібніше за 16px */
  input, select, textarea { font-size: 16px }
  input[type=checkbox], input[type=radio] { font-size: inherit }
  /* Дві дії поруч на вузькому екрані стають двома по 45% — незручно обом */
  a.btn, button.btn { min-height: 44px }
}