/* Основа: кольори, шрифти, кольорова шапка сторінки, розкладка, меню.
   Кольори — лише через змінні нижче: так світла й темна теми міняються разом.
   Вигляд «Кольорова шапка» (вибрано 9 листопада): угорі кожної сторінки — насичений колір із назвою,
   нижче — білі картки на світло-сірому, перша картка наїжджає на шапку.
   Шрифти: Montserrat Alternates — назви й числа (вибрано 9 листопада замість Jost, у якого немає і, ї, є, ґ),
   Onest — текст, легшими накресленнями (вибрано 9 листопада; Mulish пробували й повернулися до Onest).
   Назви беруть лише накреслення 300, 400 і 500: інших index.html не завантажує. */

:root{
  --ground:#eff0f3;                  /* тло сторінки */
  --card:#ffffff;                    /* картки, поля, меню */
  --fill:#f3f4f7;                    /* тиха заливка: доріжки, рядки під наведенням */
  --line:rgba(22,24,28,.10); --line-soft:rgba(22,24,28,.07);

  --ink:#16181c; --ink-soft:#4a4e57; --ink-faint:#5f6570; --ink-off:#a2a7b0;

  --accent:#4b3bd6; --accent-ink:#3f30c4; --accent-soft:rgba(75,59,214,.10); --accent-paper:rgba(75,59,214,.06); --on-accent:#fff;
  --warn:#a3500a; --warn-soft:#fbeedd; --warn-dot:#d07a1c;
  --bad:#a63a2c; --bad-soft:#fbe7e4;
  --good:#17654f; --good-soft:#e2f2ea;
  --violet:#6a3d8f; --violet-soft:#f1e9f8;
  --btn-line:rgba(22,24,28,.14);

  /* кольорова шапка: загальна й за роллю розмови */
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(255,150,220,.42),transparent 55%),linear-gradient(165deg,#3a2fb5 0%,#4a3bd0 55%,#5b45dc 100%);
  --hero-mentor:radial-gradient(120% 80% at 100% 0%,rgba(140,200,255,.4),transparent 55%),linear-gradient(165deg,#22339f 0%,#2f45c4 55%,#3a55d6 100%);
  --hero-listener:radial-gradient(120% 80% at 100% 0%,rgba(150,240,210,.35),transparent 55%),linear-gradient(165deg,#0d5a49 0%,#11735d 55%,#16876d 100%);
  /* Шапку, акцент і кулю «Головна» перекривають гами в look.css. */
  --hero-ink:#fff; --hero-soft:rgba(255,255,255,.82); --hero-glass:rgba(255,255,255,.14); --hero-edge:rgba(255,255,255,.18); --hero-warn:#ffd08a;

  --shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -18px rgba(20,24,48,.32);
  --shadow-hover:0 2px 4px rgba(0,0,0,.05), 0 16px 36px -16px rgba(20,24,48,.38);
  --shadow-lg:0 24px 60px -18px rgba(20,24,48,.38), 0 4px 12px rgba(20,24,48,.08);
  /* Кути (11 листопада): прямокутніші, без пігулок. Зразок — поле під наведенням на «Ролі» на Головній: 14 px на 48 px заввишки,
     тобто кут — близько третини висоти. Кути лише з цих змінних: так увесь застосунок можна зробити круглішим чи гострішим тут.
     Круглими лишаються тільки речі, круглі за суттю: куля «Головна», цятки, знак «!», ручка перемикача «увімкнено», кружки гам.
     Коли одне лежить усередині іншого з відступом, зовнішній кут = внутрішній + відступ (меню ролей, перемикач вкладок). */
  --r-xs:7px;    /* дрібне до 26 px: числа на вкладках, мітки, значки записів Історії */
  --r-sm:10px;   /* малі кнопки 32–40 px: значки, «назад», фільтри, частки перемикача, дні календаря */
  --r-md:14px;   /* кнопки й поля 44–54 px, пункти меню, рядки списків, невеликі блоки */
  --r-lg:18px;   /* картки, списки, сповіщення, записи Історії */
  --r-xl:22px;   /* вікна підтвердження, шапка на комп'ютері */
  --r-card:var(--r-lg); --r-field:var(--r-md);

  --display:"Montserrat Alternates","Onest",-apple-system,"Segoe UI",system-ui,sans-serif;
  --text:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  /* Товщини тексту — лише через ці змінні, тож зробити текст легшим чи важчим можна тут одним рухом.
     Зараз легший варіант: звичайний текст 300, підписи й кнопки 500, жирне 500.
     Попередній, звичайний: 400 / 500 / 600–650. Назви (--display) мають власні товщини й від цього не залежать. */
  --w-text:300; --w-mid:500; --w-strong:500;

  /* тінь під головною кнопкою й під ручкою перемикача; гами в look.css дають їй свій колір */
  --pill-shadow:0 8px 18px -10px rgba(75,59,214,.6); --pill-shadow-sm:0 6px 14px -8px rgba(75,59,214,.55);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#0c0d10; --card:#17191d; --fill:#1f2126;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.07);
  --ink:#eef0f3; --ink-soft:#b8bcc6; --ink-faint:#979ca7; --ink-off:#565b65;
  --accent:#a9a0ff; --accent-ink:#b9b1ff; --accent-soft:rgba(169,160,255,.15); --accent-paper:rgba(169,160,255,.08); --on-accent:#14151a;
  --warn:#f3b25e; --warn-soft:rgba(243,178,94,.13); --warn-dot:#f3b25e;
  --bad:#ef8f80; --bad-soft:rgba(239,143,128,.13);
  --good:#8fd6bd; --good-soft:rgba(143,214,189,.12);
  --violet:#d3b2ef; --violet-soft:rgba(211,178,239,.13);
  --btn-line:rgba(255,255,255,.16);
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(255,120,200,.28),transparent 55%),linear-gradient(165deg,#221b73 0%,#2e2496 55%,#3a2ca8 100%);
  --hero-mentor:radial-gradient(120% 80% at 100% 0%,rgba(120,180,255,.26),transparent 55%),linear-gradient(165deg,#15216b 0%,#1f2f8f 55%,#283aa3 100%);
  --hero-listener:radial-gradient(120% 80% at 100% 0%,rgba(120,230,190,.22),transparent 55%),linear-gradient(165deg,#0a3b31 0%,#0e4f41 55%,#12604f 100%);
  /* На темному тінь майже не видно, тож картки, поля й перемикачі відділяє від тла ще й тонкий світлий край (11 листопада):
     без нього вони зливалися з тлом, найбільше в гамі «Графіт і бузок». */
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.07);
  --shadow-hover:0 2px 4px rgba(0,0,0,.35), 0 16px 36px -16px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.11);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.8), 0 4px 12px rgba(0,0,0,.35);
  --pill-shadow:0 8px 18px -10px rgba(0,0,0,.7); --pill-shadow-sm:0 6px 14px -8px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0; min-height:100vh; background:var(--ground); color:var(--ink);
  font:var(--w-text) 15px/1.55 var(--text); -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--accent-ink)}
b,strong{font-weight:var(--w-strong)}
/* назви сторінок і великі числа — Montserrat Alternates, тонкий і великий; підзаголовки — Mulish, жирний */
h1{font:300 30px/1.1 var(--display); letter-spacing:-.02em; margin:0; text-wrap:balance}
h2{font-size:17px; line-height:1.3; font-weight:var(--w-strong); margin:0}
h3{font-size:15px; line-height:1.35; font-weight:var(--w-strong); margin:0}
p{margin:0}
ul,ol{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
[hidden]{display:none !important}
/* Коли в системі вимкнено анімації — застосунок теж нерухомий, якщо в Налаштуваннях не вибрано «Рух: завжди» (data-motion="on"). */
@media (prefers-reduced-motion:reduce){ :root:not([data-motion="on"]) *,:root:not([data-motion="on"]) *::before,:root:not([data-motion="on"]) *::after{transition:none !important; animation:none !important} }
/* Перехід помахом пальця (js/app.js): наступна сторінка стрічки — нерухомий шар на висоту екрана, що їде впритул
   до поточної. Поки стрічка рухається, нічого в ній не натискається. */
.swipe-ghost{position:fixed; top:0; z-index:30; height:100vh; height:100dvh; overflow:hidden; pointer-events:none; will-change:transform}

/* дрібні помічники */
.stack{display:flex; flex-direction:column; gap:12px}
.stack.tight{gap:8px}
.row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.sub{font-size:13px; color:var(--ink-faint)}
.soft{color:var(--ink-soft)}
.mono{font-variant-numeric:tabular-nums}
.pre{white-space:pre-line}
.nw{white-space:nowrap}
.grow{flex:1 1 auto; min-width:0}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.empty{color:var(--ink-faint); font-size:14px; padding:12px 4px}

/* розкладка: на телефоні — сама сторінка (куля в її куті), на комп'ютері — верхня панель і сторінка під нею */
.shell{min-height:100vh}
/* clip, а не hidden: зсунута помахом сторінка (js/app.js) не вилазить за край екрана, а липкі ряди й далі липнуть */
.main{min-width:0; overflow-x:clip}
.wrap{max-width:760px; margin:0 auto; padding:0 16px calc(40px + env(safe-area-inset-bottom)); outline:none}

/* Комп'ютер: бічного меню немає з 12 листопада — над сторінкою верхня панель (css/nav.css), а під нею колонка сторінки
   (.wrap). Панель і колонка однакової ширини, тож у них ті самі краї. */
@media (min-width:960px){
  .wrap{padding:6px 36px 72px}
  /* сторінку, до якої гортають (запис, картка архіву), не ховає під собою липка панель */
  html{scroll-padding-top:calc(var(--bar-h) + 16px)}
}


/* знак збою в меню й на вкладках: тонке кільце з «!», тієї ж товщини, що й контурні значки.
   Лише для помилок (резервна копія не вдалася чи відключена); лічильників у меню немає. */
.alert-mark{display:inline-flex; align-items:center; justify-content:center; flex:none; width:18px; height:18px; border-radius:50%;
  background:color-mix(in srgb,var(--bad) 12%,var(--card)); color:var(--bad); box-shadow:inset 0 0 0 1.35px currentColor;
  font:500 11.5px/1 var(--display)}
:root[data-theme="dark"] .alert-mark{box-shadow:inset 0 0 0 1.35px currentColor, 0 0 9px color-mix(in srgb,var(--bad) 45%,transparent)}

/* ---------- кольорова шапка сторінки ----------
   MA.pageHead малює <header class="hero">. Підводку (.lead) одразу після неї js/app.js переносить усередину.
   Якщо далі йде картка, список, перемикач чи поле, вони дістають .lift і наїжджають на шапку, а шапка — .lifted. */
.hero{margin:0 -16px; padding:calc(14px + env(safe-area-inset-top)) 16px 26px; background:var(--hero); color:var(--hero-ink)}
.hero.tone-mentor{background:var(--hero-mentor)}
.hero.tone-listener{background:var(--hero-listener)}
.hero.lifted{padding-bottom:60px}
.lift{position:relative; z-index:1; margin-top:-40px}
@media (min-width:960px){
  .hero{margin:0; border-radius:var(--r-xl); padding:26px 30px 30px}
  .hero.lifted{padding-bottom:64px}
  .lift{margin-top:-42px}
}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; min-height:48px}
.hero .page-head{padding-top:6px}
.hero h1{color:var(--hero-ink)}
.hero .back{display:inline-flex; align-items:center; gap:2px; padding:0 14px 0 8px; min-height:34px;
  border-radius:var(--r-sm); text-decoration:none; color:var(--hero-ink); font-size:13.5px; font-weight:var(--w-strong);
  background:var(--hero-glass); box-shadow:inset 0 0 0 1px var(--hero-edge)}
.hero .back:hover{background:rgba(255,255,255,.22)}
.hero .lead,.hero-extra{color:var(--hero-soft)}
.hero .lead{margin:12px 0 0; font-size:14.5px; max-width:62ch}
.hero .lead a,.hero-extra a{color:var(--hero-ink)}
.hero-extra{margin-top:12px}
.hero-date{font-size:13px; font-weight:var(--w-mid); color:var(--hero-soft); margin-bottom:2px}
/* кнопки на шапці — напівпрозорі білі */
.hero .btn,.hero .icon-btn{background:var(--hero-glass); color:var(--hero-ink); border-color:transparent; box-shadow:inset 0 0 0 1px var(--hero-edge)}
.hero .btn:hover,.hero .icon-btn:hover{background:rgba(255,255,255,.24); color:var(--hero-ink)}
/* стрілка «попередня / наступна» на краю списку: стоїть на своєму місці, бліда й не натискається (MA.pager, js/app.js) */
.hero .icon-btn:disabled,.hero .icon-btn:disabled:hover{background:var(--hero-glass); color:var(--hero-ink); opacity:.35; cursor:default}
.hero .chips .chip{background:var(--hero-glass); color:var(--hero-ink); box-shadow:none}
.hero .chips .chip.line{background:transparent; box-shadow:inset 0 0 0 1px var(--hero-edge)}
.hero .chips .chip.warn,.hero .chips .chip.bad{color:var(--hero-warn)}

.lead{font-size:14.5px; color:var(--ink-soft); margin:14px 0 16px; max-width:62ch}
.hero + .stack,.hero + .switch,.hero + .filters,.hero + nav{margin-top:16px}
.hero + .lift{margin-top:-40px}
@media (min-width:960px){ .hero + .lift{margin-top:-42px} }
.sec-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:20px 4px 2px}
.sec-head h2{font:500 19px/1.3 var(--display); letter-spacing:-.005em}
.sec-head .sub{font-size:13px}