/* public/public-chrome.css — the one header and footer of the public pages, and
   their dark theme (B03, full-site review 27 Oct 2026: M-038, M-065, M-030,
   M-342). The markup is src/publicChrome.js; every public/*.html page and every
   /learn page links this file after its own <style>, so a rule here wins over
   the page's own at the same specificity. Sizes follow docs/UI-CONVENTIONS.md
   and the landing's nav (src/Landing.jsx): 44 px pills, 15 px or more for any
   button, link or label text, 18 px glyphs. */

/* ── Header: logo left; [English], theme, Pricing, Log in right ─────────── */
.topbar.pc-head {
  position: sticky; top: 0; z-index: 50;
  direction: ltr; /* the Persian site keeps the English layout: logo left (UI-CONVENTIONS) */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 10px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, #f8f8f6 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pc-logo { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.pc-logo img { display: block; height: 30px; width: auto; }
.pc-right { display: flex; align-items: center; gap: 8px; }
.pc-head .pc-pill {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 44px; min-width: 44px; padding: 9px 16px; border-radius: 10px;
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: #2a2a25 !important; opacity: 1 !important; text-decoration: none !important; cursor: pointer;
  background: color-mix(in srgb, #ffffff 70%, transparent); border: 1px solid #e0ddd5;
}
.pc-head .pc-pill:hover { background: #efece4; }
.pc-head .pc-pill:focus-visible { outline: 2px solid #a64a29; outline-offset: 2px; }
.pc-head .pc-theme { padding: 8px 10px; }
.pc-head .pc-price { background: transparent; border-color: transparent; }
.pc-sun { display: none; }
@media (max-width: 720px) { .pc-head .pc-price { display: none; } }
@media (max-width: 400px) {
  .pc-right { gap: 6px; }
  .pc-head .pc-pill { padding: 9px 12px; }
  .pc-head .pc-theme { padding: 8px 10px; }
}

/* ── Footer: badges, one link row, © + support address ──────────────────── */
.footer.pc-foot {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid #e6e3da;
  text-align: center; font-size: 0.9375rem; line-height: 1.6; color: #5c584f; opacity: 1 !important;
}
.pc-stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.pc-stores:empty { display: none; }
.pc-foot .pc-store { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border-radius: 8px; }
.pc-store img { display: block; height: 44px; width: auto; }
.pc-links, .pc-copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.pc-foot a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px;
  font-size: 0.9375rem; color: #5c584f !important; opacity: 1 !important; text-decoration: none !important;
}
.pc-foot a:hover { text-decoration: underline !important; text-underline-offset: 2px; }
.pc-foot .sep { margin: 0 2px; color: #8a857a; opacity: 1; }
.pc-foot .operator { margin-bottom: 6px; }

/* ── Text floor (M-030) and line length (M-342) ─────────────────────────── */
.chips a, .go, .note, .updated, .plan .label, .plan .unit, .plan .meta { font-size: 0.9375rem !important; }
.a p, .a li, .how p, .how li, .stuck p, .sub, .wrap > p, section > p { max-width: 68ch; }

/* The page art (the cubes, the books) sits at the reading end beside the title,
   where the second logo stood before B03: the title and the line under it wrap
   short of it. */
.wrap > h1, .wrap > h1 + .sub, .wrap > h1 + .updated { padding-inline-end: clamp(130px, 34vw, 220px); }
.wrap > h1 { margin-top: 8px; }

/* The in-app legal viewer (?embed=1) shows the document only. */
.embed .pc-head, .embed .pc-foot { display: none !important; }
@media print { .pc-head, .pc-foot { display: none !important; } }

/* ── Dark: the saved theme of the app (the header's script sets data-theme) ─ */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"], html[data-theme="dark"] body { background: #1b1f1e !important; color: #e8e6df; }
html[data-theme="dark"] body { background: linear-gradient(180deg, #262b29 0, #1b1f1e 420px) no-repeat, #1b1f1e !important; }
html[data-theme="dark"] body::before { opacity: .06; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: #e8e6df; }
html[data-theme="dark"] a { color: #e8a888; }
html[data-theme="dark"] .updated, html[data-theme="dark"] .sub, html[data-theme="dark"] .note,
html[data-theme="dark"] .pool .what, html[data-theme="dark"] .plan .label, html[data-theme="dark"] .plan .unit,
html[data-theme="dark"] .plan .meta, html[data-theme="dark"] .free p, html[data-theme="dark"] .counts .k,
html[data-theme="dark"] .rules .e, html[data-theme="dark"] .chips { color: #b5b0a5 !important; }
html[data-theme="dark"] .a, html[data-theme="dark"] .stuck p { color: #cfcac0; }
html[data-theme="dark"] .q, html[data-theme="dark"] .how, html[data-theme="dark"] .pool, html[data-theme="dark"] .plan,
html[data-theme="dark"] .included, html[data-theme="dark"] .counts li { background: #222725; border-color: #3a403d; }
html[data-theme="dark"] .plan.featured { border-color: #e8a888; box-shadow: none; }
html[data-theme="dark"] .notice, html[data-theme="dark"] .intro, html[data-theme="dark"] .stuck,
html[data-theme="dark"] .free, html[data-theme="dark"] .album, html[data-theme="dark"] .chips a,
html[data-theme="dark"] .go { background: #262b29; border-color: #3a403d; color: #e8e6df !important; }
html[data-theme="dark"] .chips a:hover, html[data-theme="dark"] .go:hover { background: #303633; }
html[data-theme="dark"] .you { background: #1f2d2a; border-color: #2f4a44; }
html[data-theme="dark"] .q summary::after { background: #303633; color: #c9c4b8; }
html[data-theme="dark"] .q summary:focus-visible, html[data-theme="dark"] .more:focus-visible { outline-color: #e8a888; }
html[data-theme="dark"] .more { color: #e8e6df; border-top-color: #343937; }
html[data-theme="dark"] .plan .pick { border-color: #e8e6df; color: #e8e6df; }
html[data-theme="dark"] .plan .pick:hover { background: #303633; }
html[data-theme="dark"] .plan.featured .pick, html[data-theme="dark"] .cta a { background: #e8e6df; color: #1b1f1e !important; }
html[data-theme="dark"] .plan.featured .pick:hover, html[data-theme="dark"] .cta a:hover { background: #ffffff; }
html[data-theme="dark"] .rules .t, html[data-theme="dark"] .pool .n { color: #e8a888; }
html[data-theme="dark"] .rules li, html[data-theme="dark"] .more, html[data-theme="dark"] th, html[data-theme="dark"] td,
html[data-theme="dark"] hr { border-color: #343937; }
html[data-theme="dark"] .topbar.pc-head { background: color-mix(in srgb, #1b1f1e 82%, transparent); }
html[data-theme="dark"] .pc-logo img { filter: invert(1); }
html[data-theme="dark"] .pc-head .pc-pill { color: #e8e6df !important; background: color-mix(in srgb, #262b29 70%, transparent); border-color: #3a403d; }
html[data-theme="dark"] .pc-head .pc-price { background: transparent; border-color: transparent; }
html[data-theme="dark"] .pc-head .pc-pill:hover { background: #303633; }
html[data-theme="dark"] .pc-sun { display: block; }
html[data-theme="dark"] .pc-moon { display: none; }
html[data-theme="dark"] .footer.pc-foot { color: #b5b0a5; border-top-color: #343937; }
html[data-theme="dark"] .pc-foot a { color: #b5b0a5 !important; }
html[data-theme="dark"] .pc-foot .sep { color: #7d7a72; }