/* ===========================================================
   SHELL (docs/specs/shell.md): шапка, типи макета, рейка, нижні вкладки, підвал
   =========================================================== */

:root{
  --font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ml-header-h:64px;
  --ml-tabs-h:64px;
}

/* Типографіка: заголовки й довгий текст — serif, інтерфейс — sans (shell.md §8) */
h1, h2, h3, .font-display{ font-family:var(--font-serif); }
.mg-avatar, .stat-value, .ml-tab, .btn, .badge{ font-family:var(--font-sans); }
.ml-layout-reading .ml-main p,
.ml-layout-reading .ml-main li{ font-family:var(--font-serif); font-size:1.075rem; line-height:1.7; }
/* article (Journal): свою двоколонкову сітку будує сама сторінка (.jr-grid) */

.ml-skip{ position:absolute; left:.5rem; top:.5rem; z-index:2000; background:var(--panel); padding:.5rem .75rem; border-radius:6px; }

/* ---------- Шапка ---------- */
.ml-header{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  min-height:var(--ml-header-h);
  position:sticky; top:0; z-index:1020;
}
.ml-header-inner{
  max-width:1280px; margin:0 auto; padding:0 1rem;
  min-height:var(--ml-header-h);
  display:flex; align-items:center; gap:1rem;
}
.ml-logo{
  font-family:var(--font-serif);
  font-weight:600; font-size:1.3rem; letter-spacing:.005em;
  color:var(--parchment); text-decoration:none; white-space:nowrap;
}
.ml-nav-h{ display:flex; gap:.25rem; margin-left:1rem; }
.ml-header-tools{ margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.ml-tool-btn{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:8px; padding:.35rem .7rem; font-size:.82rem; font-family:var(--font-mono);
  display:inline-flex; align-items:center; gap:.4rem;
}
.ml-tool-btn:hover{ border-color:var(--purple); color:var(--parchment); }
.ml-avatar-btn{ background:none; border:0; padding:0; border-radius:50%; }
.ml-avatar-btn .mg-avatar{ width:34px; height:34px; font-size:.78rem; }
.ml-signup{ background:var(--brass); color:var(--ink); font-weight:500; }
.ml-signup:hover{ background:var(--brass); color:var(--ink); filter:brightness(1.08); }
.ml-menu-langs{ display:flex; gap:.75rem; padding:.25rem 1rem; font-family:var(--font-mono); font-size:.8rem; }
.ml-menu-langs a{ color:var(--muted); text-decoration:none; }
.ml-menu-langs a.active{ color:var(--brass); }

@media (max-width:991.98px){
  :root{ --ml-header-h:52px; }
  .ml-logo{ font-size:1.2rem; }
}

/* ---------- Сторінка / типи макета ---------- */
.ml-page-inner{
  margin:0 auto;
  padding:1.5rem 1rem;
  display:grid;
  gap:1.5rem;
  grid-template-columns:minmax(0,1fr);
}
.ml-main{ min-width:0; }
.ml-rail, .ml-col-left{ min-width:0; display:flex; flex-direction:column; gap:.75rem; }

/* today: 25/50/25 */
.ml-layout-today .ml-page-inner{ max-width:1280px; }
/* reading: текст ≤ 700px + панель 320px */
.ml-layout-reading .ml-page-inner{ max-width:1120px; }
.ml-layout-article .ml-page-inner{ max-width:1120px; }
/* wide: до 1200px (+ рейка 300px) */
.ml-layout-wide .ml-page-inner{ max-width:1200px; }
/* narrow: колонка 560px, без рейки */
.ml-layout-narrow .ml-page-inner{ max-width:560px; }

@media (min-width:992px){
  /* today: колонки 25/50/25 будує сама сторінка (css/today.css, .td-grid) — щоб єдиний рекламний
     елемент можна було переставляти на мобільному; тому зовнішня сітка тут одноколонкова. */
  .ml-layout-today .ml-page-inner{ grid-template-columns:minmax(0,1fr); }
  .ml-layout-reading .ml-page-inner{ grid-template-columns:minmax(0,700px) 320px; justify-content:center; }
  .ml-layout-reading .ml-page-inner:not(.has-rail){ grid-template-columns:minmax(0,700px); }
  .ml-layout-wide .ml-page-inner.has-rail{ grid-template-columns:minmax(0,1fr) 300px; }
}

/* Мобільний: рейка НЕ ховається (display:none заборонено для рекламного
   контейнера, shell.md S3), а стоїть після вмісту. Для today — порядок:
   основний вміст → ліва колонка → рейка. */
@media (max-width:991.98px){
  .ml-page-inner{ padding:1rem; }
  .ml-main{ order:1; }
  .ml-col-left{ order:2; }
  .ml-rail{ order:3; }
}

/* ---------- Zen (клас на <body>) ---------- */
body.zen .ml-ad,
body.zen .ml-social,
body.zen .ml-rail,
body.zen .ml-col-left{ display:none; }
body.zen .ml-page-inner{ grid-template-columns:minmax(0,1fr); max-width:1200px; }
body.zen .ml-layout-reading .ml-page-inner{ max-width:700px; }
.ml-zen-btn.active{ background:rgba(167,107,255,.12); border-color:var(--purple); color:var(--purple); }

/* ---------- Нижня панель вкладок (мобільний) ---------- */
.ml-tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex;
  background:var(--panel); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.ml-tab{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:var(--ml-tabs-h);
  color:var(--muted); text-decoration:none; font-size:.7rem;
}
.ml-tab i{ font-size:1.25rem; line-height:1; }
.ml-tab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px; }
.ml-tab.active{ color:var(--brass); }
body.has-tabs{ padding-bottom:calc(var(--ml-tabs-h) + env(safe-area-inset-bottom)); }
@media (min-width:992px){
  body.has-tabs{ padding-bottom:0; }
}

/* ---------- Підвал ---------- */
.ml-footer{
  border-top:1px solid var(--line);
  margin-top:1.5rem; padding:1.5rem 1rem;
  text-align:center; font-size:.85rem; color:var(--muted);
}
.ml-footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.25rem; margin-bottom:.75rem; }
.ml-footer a{ color:var(--muted); text-decoration:none; }
.ml-footer a:hover{ color:var(--parchment); }
.ml-footer-langs{ display:flex; justify-content:center; gap:.75rem; font-family:var(--font-mono); font-size:.75rem; margin-bottom:.5rem; }
.ml-footer-langs a.active{ color:var(--brass); }

/* ---------- Липкий підвал: сторінка мінімум на висоту вікна ---------- */
.ml-body{ min-height:100vh; display:flex; flex-direction:column; }
.ml-page{ flex:1 0 auto; width:100%; }
.ml-footer{ background:transparent; flex-shrink:0; }

/* ---------- Вкладки (Community) та посилання-акценти ---------- */
.ml-main .nav-tabs{ border-bottom-color:var(--line); }
.ml-main .nav-tabs .nav-link{ color:var(--muted); border-color:transparent; }
.ml-main .nav-tabs .nav-link:hover{ color:var(--parchment); border-color:transparent transparent var(--line); }
.ml-main .nav-tabs .nav-link.active{
  color:var(--brass); background:var(--panel);
  border-color:var(--line) var(--line) var(--panel);
}
.ml-link{ color:var(--brass); text-decoration:none; }
.ml-link:hover{ color:var(--parchment); text-decoration:underline; }

/* Контраст (Lighthouse a11y): Bootstrap-сірий #6c757d на темних панелях дає 3:1 */
.btn-outline-secondary{
  --bs-btn-color:var(--muted);
  --bs-btn-border-color:var(--line);
  --bs-btn-hover-color:var(--parchment);
  --bs-btn-hover-bg:var(--panel-2);
  --bs-btn-hover-border-color:var(--muted);
  --bs-btn-active-color:var(--parchment);
  --bs-btn-active-bg:var(--panel-2);
  --bs-btn-active-border-color:var(--muted);
  --bs-btn-disabled-color:var(--muted);
  --bs-btn-disabled-border-color:var(--line);
}

/* Honeypot (app/antibot.py): поле поза екраном; не display:none — деякі боти його пропускають */
.ml-hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }