/* Cleave — Bible Reading Companion
   Restful, eye-friendly styling. No pure-white (#FFFFFF) background anywhere
   (spec req. 1, DoD 1). Textures, text sizes and dyslexia mode are driven by
   data-attributes set on <html> by js/themes.js. */

/* ---- C0 skin tokens. EVERY color, texture and display font used below comes from
   these custom properties, so a later `.youth` body class can reskin the whole app
   by redefining them (no DOM changes). Fonts are self-hosted (assets/fonts). ---- */
:root {
  --reading-font: 'Newsreader', 'Iowan Old Style', Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --title-font: var(--reading-font);
  --base-size: 1.125rem;
  --line: 1.7;
  --letter: normal;
  --word: normal;
  --maxw: 42rem;

  /* brand constants */
  --navy: #0A0B14;
  --gold: #C9A84C;
  --gold-light: #E2C478;
  --amber: #D4743A;
  --cream: #F0EAD6;

  /* surfaces */
  --bg: #efe5c8;
  --bg-panel: #f6f0e0;
  --bg-raised: #faf5e8;
  --paper: linear-gradient(180deg, #fbf6e6, #f3ead0);
  --side-bg: linear-gradient(180deg, rgba(246,240,224,.9), rgba(236,215,159,.45));
  --bg-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .12  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
                radial-gradient(120% 80% at 30% 0, rgba(255,250,230,.8), transparent 70%),
                repeating-linear-gradient(45deg, rgba(154,124,46,.05) 0 2px, transparent 2px 5px);
  --ink: #0A0B14;
  --ink-soft: #5a5648;
  --accent: #7a5f1c;          /* gold darkened for AA text contrast on cream */
  --accent-soft: #C9A84C;     /* sacred gold for rules, swatches, marks */
  --line-color: #e0d4b6;
  --line-strong: #cdbd90;
  --shadow: rgba(60, 40, 10, 0.18);
  --link: #7a5f1c;
  --selection: #ecd79f;
  --strip-bg: #ecd79f;
  --active-bg: #ecd79f;
  --hl-tint: rgba(201,168,76,.45);

  /* top bar */
  --top-bg: #0A0B14;
  --top-ink: #F0EAD6;
  --top-gold: #E2C478;
  --top-sub: #cfc6a8;

  /* buttons */
  --btn-bg: #0A0B14;
  --btn-ink: #E2C478;
  --chip-on-bg: #0A0B14;
  --chip-on-ink: #E2C478;

  /* dark review card on the memorize view */
  --rv-bg: #0A0B14;
  --rv-ink: #F0EAD6;
  --rv-gold: #E2C478;
  --rv-btn-bg: #C9A84C;
  --rv-btn-ink: #0A0B14;

  --radius: 14px;
  --rule-gold: #C9A84C;
  --drop-bg: linear-gradient(160deg, #E2C478, #9a7c2e);
  --drop-ink: #fff7dc;
}

/* Night: the C0 palette turned over. Navy ground, cream ink, gold accent. */
:root[data-texture='night'] {
  --bg: #0d0f1b;
  --bg-panel: #14161f;
  --bg-raised: #1b1e29;
  --paper: linear-gradient(180deg, #181b27, #13151f);
  --side-bg: linear-gradient(180deg, #12141e, #171a26);
  --bg-texture: radial-gradient(120% 80% at 30% 0, rgba(60,56,90,.35), transparent 70%), repeating-linear-gradient(45deg, rgba(226,196,120,.03) 0 2px, transparent 2px 5px);
  --ink: #F0EAD6;
  --ink-soft: #b5afa0;
  --accent: #E2C478;
  --accent-soft: #C9A84C;
  --line-color: #2a2d3a;
  --line-strong: #3b3f50;
  --shadow: rgba(0, 0, 0, 0.55);
  --link: #E2C478;
  --selection: #3a3320;
  --strip-bg: #3a3320;
  --active-bg: #2d2a1c;
  --hl-tint: rgba(201,168,76,.32);
  --top-bg: #05060d;
  --btn-bg: #C9A84C;
  --btn-ink: #0A0B14;
  --chip-on-bg: #C9A84C;
  --chip-on-ink: #0A0B14;
  --rv-bg: #05060d;
  --drop-bg: linear-gradient(160deg, #C9A84C, #7a5f1c);
  --drop-ink: #0A0B14;
}

/* ---- Text size steps (spec req. 10): 7 steps, small to extra large ---- */
:root[data-textsize='1'] { --base-size: 0.92rem; --maxw: 36rem; }
:root[data-textsize='2'] { --base-size: 1.02rem; --maxw: 39rem; }
:root[data-textsize='3'] { --base-size: 1.12rem; }
:root[data-textsize='4'] { --base-size: 1.25rem; }
:root[data-textsize='5'] { --base-size: 1.42rem; --maxw: 45rem; }
:root[data-textsize='6'] { --base-size: 1.62rem; --maxw: 48rem; }
:root[data-textsize='7'] { --base-size: 1.85rem; --maxw: 52rem; }

/* ---- Dyslexia mode (spec req. 4): OpenDyslexic + wider spacing ---- */
:root[data-dyslexia='on'] {
  --reading-font: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  --ui-font: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  --line: 2.1;
  --letter: 0.06em;
  --word: 0.18em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background-color: var(--bg);
  background-image: var(--bg-texture);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: calc(var(--base-size) * 0.78);
  line-height: var(--line);
  letter-spacing: var(--letter);
  word-spacing: var(--word);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection); }
a { color: var(--link); }

/* ---- App shell layout ---- */
.app {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: 'header header' 'side main';
  min-height: 100vh;
}
.topbar {
  grid-area: header;
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 60px; padding: 0 1.25rem;
  background: var(--top-bg); color: var(--top-ink);
  border-bottom: 3px double var(--rule-gold);
  box-shadow: 0 1px 0 var(--navy), 0 4px 0 rgba(201,168,76,.55);
  position: sticky; top: 0; z-index: 30;
}
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:-9px; height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--rule-gold) 15%, var(--rule-gold) 85%, transparent); }
.topbar .spacer { flex: 1; }
.topbar .pill { font-size: 0.78rem; font-weight: 600; color: var(--top-gold); background: transparent; border:1px solid var(--rule-gold); border-radius: 999px; padding: 0.2rem 0.7rem; }
.topbar .iconbtn { background: transparent; border-color: transparent; color: var(--top-ink); }
.topbar .iconbtn:hover { border-color: var(--rule-gold); }

.iconbtn {
  background: var(--bg-raised); color: var(--ink); border: 1px solid var(--line-color);
  border-radius: 10px; min-width: 44px; min-height: 44px; padding: 0.4rem 0.7rem; cursor: pointer; font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { border-color: var(--accent-soft); }

/* ---- Side menu (spec req. 5): collapses into the side, can be pinned ---- */
.sidemenu {
  grid-area: side;
  background: var(--side-bg);
  border-right: 1px solid var(--line-color);
  width: 232px; padding: 18px 12px;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sidemenu nav { display:flex; flex-direction:column; gap:2px; }
.sidemenu nav a {
  display: flex; align-items: center; gap: 0.65rem;
  min-height: 44px; padding: 0 12px; border-radius: 9px;
  color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; font-weight: 500; line-height: 1.2;
}
.sidemenu nav a:hover { background: var(--bg-raised); color: var(--ink); }
.sidemenu nav a.active { background: var(--active-bg); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 var(--accent); }
.sidemenu .menu-foot { margin-top: auto; padding: 10px 12px; font-size: 0.75rem; line-height: 1.5; color: var(--ink-soft); }
.sidemenu .menu-foot + .menu-foot { margin-top: 0; padding-top: 0; }
.sidemenu .menu-foot strong { color: var(--accent); }

/* Pinned (wide screens) vs collapsed */
:root[data-menu='collapsed'] .sidemenu { display: none; }
.main { grid-area: main; padding: 1.4rem clamp(1rem, 4vw, 2.5rem); }

/* Overlay menu used on phones and when collapsed (spec req. 5, narrow phone) */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 40; display: none; }
.scrim.show { display: block; }
.sidemenu.overlay {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
  display: block !important; box-shadow: 2px 0 16px var(--shadow);
}

/* ---- Reading column ---- */
.reading {
  max-width: var(--maxw); margin: 0 auto;
  font-family: var(--reading-font);
}
.passage-head { display:flex; align-items:baseline; gap:0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.passage-head h1 { font-size: 1.5rem; margin: 0; }
.verse {
  display: block; padding: 0.15rem 0.3rem; border-radius: 6px; cursor: pointer;
  position: relative;
}
.verse:hover { background: var(--bg-raised); }
.verse .vnum { font-size: 0.7em; color: var(--accent); vertical-align: super; margin-right: 0.35em; font-family: var(--ui-font); }
.verse.selected { outline: 2px solid var(--accent-soft); }
.verse .flag-emoji { margin-left: 0.3em; }

/* highlight colors (spec req. 29) */
.hl-yellow { background: #f3e2a0; }
.hl-green  { background: #cfe6bd; }
.hl-blue   { background: #c6dcee; }
.hl-pink   { background: #f1cdd9; }
.hl-orange { background: #f3d4ad; }
:root[data-texture='night'] .hl-yellow { background:#5c5126; }
:root[data-texture='night'] .hl-green  { background:#2f4a2c; }
:root[data-texture='night'] .hl-blue   { background:#274056; }
:root[data-texture='night'] .hl-pink   { background:#532a3a; }
:root[data-texture='night'] .hl-orange { background:#5a4324; }

/* ---- Controls / cards / buttons ---- */
.toolbar { display:flex; flex-wrap: wrap; gap: 0.5rem; align-items:center; margin: 0.8rem 0 1.2rem; }
select, input, textarea, button {
  font-family: var(--ui-font); font-size: 0.95rem; color: var(--ink);
}
select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], textarea {
  background: var(--bg-raised); border: 1px solid var(--line-color); border-radius: 8px; padding: 0.45rem 0.6rem;
}
textarea { width: 100%; resize: vertical; min-height: 5rem; }
.btn {
  background: var(--accent); color: #fbf7ee; border: none; border-radius: 9px;
  padding: 0.5rem 0.9rem; cursor: pointer; font-weight: 600;
}
.btn.secondary { background: var(--bg-raised); color: var(--ink); border: 1px solid var(--line-color); }
.btn:hover { filter: brightness(1.05); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.card { background: var(--bg-panel); border: 1px solid var(--line-color); border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: 0 1px 3px var(--shadow); }
.card h2, .card h3 { margin-top: 0; }
.muted { color: var(--ink-soft); }
.row { display:flex; gap:0.6rem; flex-wrap: wrap; align-items:center; }
.tag { font-size:0.72rem; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:999px; padding:0.1rem 0.55rem; color:var(--ink-soft); }
.tag.private { color:#8a5a2b; border-color:#d8b483; }

/* verse chip / scripture voice (spec req. 48-51) */
.verse-chip { border-left: 3px solid var(--accent-soft); margin: 0.8rem 0; padding: 0.3rem 0 0.3rem 0.9rem; font-family: var(--reading-font); font-style: italic; color: var(--ink); }
.verse-chip .verse-ref { display:block; font-style: normal; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.3rem; }

/* commentary layers (spec req. 17-20) */
.layer { border:1px solid var(--line-color); border-radius: 12px; margin-bottom: 0.7rem; overflow: hidden; background: var(--bg-raised); }
.layer > summary { cursor: pointer; padding: 0.7rem 0.9rem; font-weight: 600; list-style: none; }
.layer > summary::-webkit-details-marker { display:none; }
.layer .layer-body { padding: 0 0.9rem 0.9rem; }
.layer .sources { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.6rem; border-top: 1px dashed var(--line-color); padding-top: 0.5rem; }

/* word-lookup / right panel */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 60;
  background: var(--bg-panel); border-left: 1px solid var(--line-color);
  box-shadow: -2px 0 16px var(--shadow); padding: 1.1rem; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.18s ease;
}
.panel.open { transform: translateX(0); }
.panel .closebtn { float: right; }
.lemma { font-family: var(--reading-font); font-size: 1.8rem; }

/* interlinear (spec req. 8) */
.interlinear { display:flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; font-family: var(--reading-font); }
.ilword { text-align:center; cursor:pointer; padding:0.2rem 0.3rem; border-radius:6px; }
.ilword:hover { background: var(--bg-raised); }
.ilword .orig { font-size: 1.15rem; display:block; }
.ilword .en { font-size: 0.8rem; color: var(--ink-soft); display:block; }
.ilword .str { font-size: 0.66rem; color: var(--accent); display:block; }
.manuscript { font-family: 'Times New Roman', serif; font-size: 1.5rem; line-height: 2; }
.manuscript.rtl { direction: rtl; text-align: right; }

/* progress bar (plans) */
.progress { background: var(--bg-raised); border:1px solid var(--line-color); border-radius:999px; height: 12px; overflow:hidden; }
.progress > i { display:block; height:100%; background: var(--accent); }

/* toast / offline banner */
.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--ink); color: var(--bg-panel); padding: 0.6rem 1rem; border-radius: 10px; z-index: 80; box-shadow: 0 2px 10px var(--shadow); max-width: 90vw; }
.offline-banner { background:#8a5a2b; color:#fbf7ee; text-align:center; padding:0.4rem; font-size:0.85rem; }

/* responsive: phones (spec req. 6, narrow-phone edge case) */
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; grid-template-areas: 'header' 'main'; }
  :root .sidemenu { display: none; }            /* collapsed by default on phone */
  .main { padding: 1rem; }
}

.flag-picker, .color-picker { display:flex; gap:0.4rem; flex-wrap:wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border:1px solid var(--line-color); cursor:pointer; }
.emoji-btn { font-size: 1.2rem; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:8px; cursor:pointer; padding:0.2rem 0.4rem; }
.kv { display:flex; gap:0.5rem; margin:0.2rem 0; }
.kv b { min-width: 7rem; color: var(--ink-soft); font-weight:600; }
hr.soft { border:none; border-top:1px solid var(--line-color); margin:1rem 0; }
.notice { background: var(--bg-raised); border:1px solid var(--line-color); border-left:3px solid var(--accent-soft); border-radius:8px; padding:0.7rem 0.9rem; }

mark { background: color-mix(in srgb, var(--gold) 55%, transparent); color: inherit; padding: 0 0.1em; border-radius: 3px; }
.icon { display:inline-block; vertical-align:middle; }

/* ============================================================================
   v2 — the Bible you can hold (spec Section A,B,O)
   ============================================================================ */

/* Brand wordmark + placeholder mark (spec req. 93, 101). The flame is a CLEARLY
   LABELED PLACEHOLDER until the real Cleave logo files exist; never a substitute
   for the final brand mark. */
.topbar .brand { display:flex; align-items:center; gap:0.55rem; text-decoration:none; color:var(--top-gold); }
.brandmark { width:32px; height:32px; border-radius:8px; flex:0 0 auto; object-fit:cover; display:block; box-shadow: 0 1px 3px var(--shadow); }
.brandtext { font-family: var(--title-font); font-weight:600; font-size:1.25rem; letter-spacing:0.01em; line-height:1; }
.brandtext small { display:block; font-size:0.62rem; color:var(--top-sub); letter-spacing:0.16em; text-transform:uppercase; margin-top:2px; }
.sidemenu .brandfoot { display:flex; align-items:center; gap:0.4rem; }
.brandfoot .seal { width:18px; height:18px; border-radius:50%; background:var(--navy); position:relative; box-shadow: inset 0 0 0 1.5px var(--gold); flex:0 0 auto; }
.brandfoot .seal::after { content:''; position:absolute; inset:4px; border-radius:50%; background: radial-gradient(ellipse at 50% 60%, var(--gold), var(--amber) 75%, transparent 78%); }

.iconbtn .icon { pointer-events:none; }
.iconbtn.on { border-color: var(--gold); color: var(--accent); background: color-mix(in srgb, var(--gold) 14%, var(--bg-raised)); }

/* Reading shell + toolbars */
.reading-shell { max-width: 1100px; margin: 0 auto; }
.reader-toolbar { display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; margin:0.2rem 0 0.4rem; }
.reader-toolbar .r-where { font-family:var(--reading-font); font-weight:600; margin-right:0.3rem; }
.r-trans-wrap { display:inline-flex; align-items:center; gap:0.3rem; }
.r-trans-wrap select { max-width: 12rem; }
.r-spring { flex:1; }
.reader-substrip { display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; margin-bottom:0.5rem; font-size:0.85rem; color:var(--ink-soft); }
.reader-substrip .mini input { transform: translateY(1px); }

/* The book: desk (app bg) with a page (a lighter linen panel) and a center seam */
.book { background: transparent; }
.page-viewport {
  position: relative; overflow: hidden;
  height: calc(100vh - 246px); min-height: 360px;
  background: var(--bg-panel);
  border:1px solid var(--line-color); border-radius: 10px;
  box-shadow: 0 6px 24px var(--shadow), inset 0 0 60px color-mix(in srgb, var(--ink) 4%, transparent);
}
.page-flow { font-family: var(--reading-font); color: var(--ink); will-change: transform; transition: transform 0.42s cubic-bezier(.22,.61,.36,1); }
:root[data-anim='off'] .page-flow { transition: none; }
.page-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line-color); padding-bottom:0.35rem; margin-bottom:0.7rem; break-inside:avoid; }
.page-head .ph-ref { font-weight:600; font-size:1.15rem; }
.page-head .ph-trans { font-size:0.72rem; color:var(--ink-soft); letter-spacing:0.08em; text-transform:uppercase; }
.page-body { text-align: justify; hyphens: auto; }

/* verses run together like a printed Bible page (spec req. 6) */
.page-body .verse, .scroll-page .verse { display: inline; padding:0 0.05em; border-radius:4px; cursor:pointer; }
.page-body .verse:hover, .scroll-page .verse:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.page-body .verse.selected, .scroll-page .verse.selected { outline:2px solid var(--gold); outline-offset:1px; }
.verse .vnum { font-size:0.66em; color:var(--accent); vertical-align:super; margin:0 0.18em 0 0.1em; font-family:var(--ui-font); font-weight:600; }
.verse .flag-emoji { margin-left:0.15em; }
.verse .note-dot { color: var(--accent); }
.verse.red-letter { color: #b3361f; }
:root[data-texture='night'] .verse.red-letter { color:#e08a6a; }
.verse.reading-now { background: color-mix(in srgb, var(--gold) 28%, transparent); border-radius:4px; }

.seam { display:none; }
.page-viewport[data-cols="2"] .seam {
  display:block; position:absolute; top:0; bottom:0; left:50%; width:40px; transform:translateX(-50%);
  pointer-events:none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 12%, transparent) 48%, color-mix(in srgb, var(--ink) 12%, transparent) 52%, transparent);
}
/* single page on a phone suggests the bound edge at the side */
.page-viewport[data-cols="1"] { box-shadow: 0 6px 24px var(--shadow), inset 14px 0 22px -14px color-mix(in srgb, var(--ink) 22%, transparent); }

.turn-zone { position:absolute; top:0; bottom:0; width:7%; min-width:44px; border:none; background:transparent; cursor:pointer; z-index:2; }
.turn-zone.turn-prev { left:0; } .turn-zone.turn-next { right:0; }
.turn-zone:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent), transparent); }
.turn-zone.turn-next:hover { background: linear-gradient(270deg, color-mix(in srgb, var(--ink) 7%, transparent), transparent); }

.page-foot { display:flex; align-items:center; justify-content:center; gap:0.8rem; padding:0.5rem 0; }
.page-info { font-size:0.82rem; color:var(--ink-soft); font-family:var(--ui-font); }

/* scroll mode */
.page-viewport.scroll { overflow-y:auto; height: calc(100vh - 246px); }
.scroll-page { padding: clamp(1rem, 4vw, 2.4rem); max-width: 44rem; margin:0 auto; font-family:var(--reading-font); }
.scroll-page .page-body { text-align:left; }
.reading-scroll { max-width: 44rem; margin:0 auto; }

/* zoom: a single, enlarged page for focused reading (spec req. 4) */
:root[data-zoom='on'] .page-body, :root[data-zoom='on'] .scroll-page { font-size: 1.08em; }

/* focus / distraction-free mode (spec req. 12) */
.focus-exit { display:none; position:fixed; top:0.7rem; right:0.7rem; z-index:45; gap:0.3rem; }
:root[data-focus='on'] .topbar,
:root[data-focus='on'] .sidemenu,
:root[data-focus='on'] .reader-toolbar,
:root[data-focus='on'] .reader-substrip,
:root[data-focus='on'] #r-today,
:root[data-focus='on'] .studyoverlay .overlay-handle { display:none !important; }
:root[data-focus='on'] .app { grid-template-areas: 'main' 'main'; grid-template-columns: 1fr; }
:root[data-focus='on'] .focus-exit { display:inline-flex; }
:root[data-focus='on'] .page-viewport { height: calc(100vh - 84px); }

/* daily countdown (spec req. 68) */
.daily-countdown { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--accent); font-family:var(--ui-font); }
.daily-countdown.done { color: var(--accent); font-weight:600; }
.dc-bar { display:inline-block; width:90px; height:7px; border-radius:999px; background:var(--bg-raised); border:1px solid var(--line-color); overflow:hidden; }
.dc-bar > i { display:block; height:100%; background:var(--gold); }

/* picker popover */
.picker-pop { position:fixed; top:96px; left:50%; transform:translateX(-50%); z-index:70; width:min(320px,92vw); box-shadow:0 8px 30px var(--shadow); }

/* ============================================================================
   The study overlay (spec req. 17-22)
   ============================================================================ */
.studyoverlay { position:fixed; left:0; right:0; bottom:0; z-index:48; pointer-events:none; }
.overlay-handle {
  pointer-events:auto; position:absolute; bottom:0; right:1.2rem;
  display:flex; align-items:center; gap:0.45rem; padding:0.4rem 1.1rem 0.55rem;
  background:var(--bg-panel); border:1px solid var(--line-color); border-bottom:none; border-radius:12px 12px 0 0;
  color:var(--ink); cursor:pointer; font-family:var(--ui-font); font-size:0.82rem; box-shadow:0 -2px 12px var(--shadow);
}
.overlay-handle .oh-grip { width:34px; height:4px; border-radius:999px; background:var(--accent-soft); }
.overlay-panel {
  pointer-events:auto; position:absolute; left:0; right:0; bottom:0; height:46vh;
  background:var(--bg-panel); border-top:2px solid var(--gold); box-shadow:0 -6px 26px var(--shadow);
  transform: translateY(100%); transition: transform .3s ease; display:flex; flex-direction:column;
  border-radius:14px 14px 0 0;
}
:root[data-overlay='up'] .overlay-panel { transform: translateY(0); }
:root[data-anim='off'] .overlay-panel { transition: none; }
:root[data-overlay='up'] .main { padding-bottom: 47vh; }
:root[data-overlay='up'] .page-viewport { height: calc(54vh - 250px); min-height: 200px; }
.overlay-top { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.6rem 0.9rem; border-bottom:1px solid var(--line-color); }
.overlay-context { font-family:var(--reading-font); }
.overlay-sections { overflow-y:auto; padding:0.4rem 0.9rem 1rem; }
.ov-sec { border-bottom:1px solid var(--line-color); }
.ov-sec-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; background:none; border:none; cursor:pointer; padding:0.6rem 0.1rem; color:var(--ink); font-weight:600; font-family:var(--ui-font); }
.ov-sec-title { display:flex; align-items:center; gap:0.45rem; }
.ov-sec-body { padding:0.2rem 0.1rem 0.9rem; }

/* ============================================================================
   Contextual verse action bar (spec req. 20)
   ============================================================================ */
.verse-actions { position:absolute; z-index:72; width:min(340px,94vw); background:var(--bg-panel); border:1px solid var(--line-color); border-radius:12px; box-shadow:0 8px 28px var(--shadow); padding:0.5rem 0.6rem; }
.va-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem; font-family:var(--reading-font); }
.va-bar { display:flex; flex-wrap:wrap; gap:0.25rem; }
.va-btn { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1 0 19%; padding:0.4rem 0.2rem; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:9px; cursor:pointer; color:var(--ink); font-size:0.64rem; }
.va-btn span { font-family:var(--ui-font); }
.va-btn.on { border-color:var(--gold); color:var(--accent); }
.va-btn:hover { border-color:var(--accent-soft); }
.va-memorize { display:flex; align-items:center; gap:0.3rem; width:100%; margin-top:0.4rem; background:none; border:none; color:var(--accent); cursor:pointer; font-size:0.76rem; font-family:var(--ui-font); padding:0.25rem 0; }
.va-memorize:hover { text-decoration:underline; }
.va-body:not(:empty) { margin-top:0.5rem; border-top:1px solid var(--line-color); padding-top:0.5rem; }
.hl-set { display:flex; flex-wrap:wrap; gap:0.35rem; }
.hl-chip { display:inline-flex; align-items:center; gap:0.3rem; padding:0.3rem 0.6rem; border-radius:999px; border:1px solid var(--line-color); background:var(--bg-raised); cursor:pointer; font-size:0.8rem; color:var(--ink); }
.hl-chip::before { content:''; width:12px; height:12px; border-radius:50%; background:var(--c, var(--gold)); }
.hl-chip.on { border-color:var(--c, var(--gold)); box-shadow:0 0 0 2px color-mix(in srgb, var(--c, var(--gold)) 30%, transparent); }

/* ============================================================================
   Study tool pieces: cross-ref chips, topics, search, compare, connections
   ============================================================================ */
.ref-chips { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.3rem; }
.ref-chip { display:inline-block; padding:0.18rem 0.55rem; border-radius:999px; border:1px solid var(--line-color); background:var(--bg-raised); color:var(--link); text-decoration:none; font-size:0.8rem; font-family:var(--ui-font); }
.ref-chip:hover { border-color:var(--gold); }
.topic { margin-bottom:0.7rem; }
.search-hit { padding:0.4rem 0; border-bottom:1px dashed var(--line-color); }
.search-hit p { margin:0.25rem 0 0; }
.sources { font-size:0.78rem; color:var(--ink-soft); margin-top:0.5rem; }

.compare { display:grid; grid-template-columns: repeat(var(--cols,2), 1fr); gap:0.8rem; }
.compare-col { border:1px solid var(--line-color); border-radius:10px; padding:0.5rem 0.7rem; background:var(--bg-raised); }
.compare-head { font-weight:600; color:var(--accent); border-bottom:1px solid var(--line-color); margin-bottom:0.4rem; padding-bottom:0.2rem; }
.compare-v { margin:0.2rem 0; font-family:var(--reading-font); }
@media (max-width:640px){ .compare { grid-template-columns: 1fr; } }

.conn-edit { padding-left:0.7rem; }
.conn-edit .cn-name { font-family:var(--reading-font); font-size:1.05rem; font-weight:600; }
.cn-verse { border:1px solid var(--line-color); border-radius:10px; padding:0.5rem 0.7rem; margin:0.4rem 0; background:var(--bg-raised); }
.cn-text { font-family:var(--reading-font); margin:0.3rem 0; }
.cn-vnote { width:100%; }
.cn-verses .iconbtn { padding:0.2rem 0.45rem; font-size:0.85rem; }

/* ============================================================================
   Soaking music + read-along player (spec req. 76-79)
   ============================================================================ */
.audiobar { position:fixed; left:50%; bottom:0.8rem; transform:translateX(-50%); z-index:46; width:min(560px,94vw);
  background:var(--bg-panel); border:1px solid var(--line-color); border-radius:14px; box-shadow:0 6px 26px var(--shadow); padding:0.6rem 0.8rem; }
.audiobar[hidden] { display:none; }
.audiobar .ab-row { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.audiobar .ab-title { font-weight:600; font-size:0.85rem; }
.audiobar .ab-sub { font-size:0.72rem; color:var(--ink-soft); }
.audiobar input[type=range] { accent-color: var(--gold); }
.audiobar .ab-spring { flex:1; }
:root[data-focus='on'] .audiobar { bottom:auto; top:3.2rem; }

/* ============================================================================
   Memorization (spec Section J)
   ============================================================================ */
.mem-card { border:1px solid var(--line-color); border-radius:12px; padding:0.8rem 1rem; margin-bottom:0.7rem; background:var(--bg-panel); }
.mem-status { font-size:0.72rem; padding:0.1rem 0.5rem; border-radius:999px; border:1px solid var(--line-color); }
.mem-status.new { color:var(--accent); } .mem-status.learning { color:var(--amber); } .mem-status.mastered { color:#3f7d4f; }
.mem-practice { font-family:var(--reading-font); font-size:1.2rem; line-height:1.9; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:10px; padding:1rem; min-height:5rem; }
.mem-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.35rem; margin:0.5rem 0; } .mem-method { justify-content:center; text-align:center; }
.mem-method { padding:0.35rem 0.7rem; border-radius:999px; border:1px solid var(--line-color); background:var(--bg-raised); cursor:pointer; font-size:0.8rem; color:var(--ink); display:inline-flex; align-items:center; gap:0.3rem; }
.mem-method.on { border-color:var(--gold); color:var(--accent); background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); }
.cloze-blank { display:inline-block; min-width:2.5em; border-bottom:2px solid var(--accent-soft); margin:0 0.1em; }

/* Cleave 3.0 multi-scripture memorization: sets, packs, study modes, sharing */
.mem-bar { height:8px; border-radius:999px; background:var(--bg-raised); border:1px solid var(--line-color); overflow:hidden; margin-top:0.4rem; }
.mem-bar > span { display:block; height:100%; background:var(--gold); transition:width 0.3s ease; }
.mem-set summary { cursor:pointer; }
.mem-setverses { margin:0.4rem 0 0; padding-left:1.2rem; }
.mem-setverses li { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; padding:0.15rem 0; }
.mem-setverse-ctrl { display:inline-flex; gap:0.15rem; flex:none; }
.mem-packs { display:grid; gap:0.5rem; }
.mem-pack { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; border:1px solid var(--line-color); border-radius:10px; padding:0.6rem 0.8rem; background:var(--bg-raised); }
.mem-pack button { flex:none; }
.mem-modes { gap:0.35rem; margin:0.4rem 0; }
.mem-mode { padding:0.3rem 0.7rem; border-radius:999px; border:1px solid var(--line-color); background:var(--bg-raised); cursor:pointer; font-size:0.82rem; color:var(--ink); }
.mem-mode.on { border-color:var(--gold); color:var(--accent); background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); }
.mem-pick { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.4rem; }
.mem-pickchip { padding:0.25rem 0.55rem; border-radius:999px; border:1px solid var(--line-color); background:var(--bg-raised); cursor:pointer; font-size:0.78rem; color:var(--ink); }
.mem-pickchip.on { border-color:var(--gold); color:var(--accent); }
.mem-recital { font-family:var(--reading-font); font-size:1.15rem; line-height:1.9; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:10px; padding:1rem; }
.rc-cue { color:var(--ink); }
/* multi-select on the reading surface */
.verse.multi-selected { outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; background: color-mix(in srgb, var(--gold) 14%, transparent); }
.mem-select-bar { position:fixed; left:50%; bottom:1.1rem; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:0.6rem; background:var(--bg-panel); border:1px solid var(--line-color); border-radius:999px; padding:0.5rem 0.9rem; box-shadow:0 6px 24px rgba(0,0,0,0.18); }

/* ============================================================================
   About page
   ============================================================================ */
.about-hero { text-align:center; padding:1.5rem 0; }
.about-manifesto { font-family:var(--reading-font); font-size:1.5rem; line-height:1.5; }
.about-seal { width:64px; height:64px; border-radius:50%; background:var(--navy); position:relative; margin:0 auto 0.8rem; box-shadow: inset 0 0 0 3px var(--gold); }
.about-seal::after { content:''; position:absolute; inset:14px; border-radius:50%; background: radial-gradient(ellipse at 50% 60%, var(--gold), var(--amber) 75%, transparent 78%); }

@media (max-width:760px){
  .reader-toolbar .r-where { display:none; }
  .page-viewport, .page-viewport.scroll { height: calc(100vh - 280px); }
  :root[data-overlay='up'] .page-viewport { height: calc(52vh - 250px); }
}

/* ---- Full-Bible loading + offline (added with online pull / save-offline) ---- */
.mini-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--bg-raised); color: var(--ink-soft);
  border: 1px solid var(--line-color); border-radius: 999px;
  padding: 0.15rem 0.6rem; font: inherit; font-size: 0.82rem; cursor: pointer;
  transition: filter .15s ease, color .15s ease;
}
.mini-btn:hover { filter: brightness(1.04); color: var(--ink); }
.mini-btn:disabled { opacity: 0.65; cursor: progress; }
.mini-btn.done { color: var(--gold); border-color: var(--gold); }
.mini-btn svg { width: 14px; height: 14px; }

.loading-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem; min-height: 50vh; color: var(--ink-soft); font-size: 0.95rem;
}
.loading-page .spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--line-color); border-top-color: var(--gold);
  animation: cleave-spin 0.8s linear infinite;
}
@keyframes cleave-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   C0 SKIN. Everything below uses the tokens at the top, so `.youth` can reskin it.
   ============================================================================ */
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.topbar :focus-visible { outline-color: var(--top-gold); }
h1, h2, h3, .lede { text-wrap: balance; }
p, li, .muted, .notice, .mem-pack { text-wrap: pretty; }
.main { min-width: 0; padding: 22px clamp(1rem, 2.5vw, 28px) 28px; }
.main h1 {
  font: 500 clamp(1.75rem, 4vw, 2.25rem)/1.15 var(--title-font); letter-spacing: -.01em;
  margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--rule-gold);
  box-shadow: 0 3px 0 -2px var(--bg-raised), 0 4px 0 -2px rgba(201,168,76,.6);
}
.main h1 .icon { display: none; }
.card { background: var(--bg-raised); border-radius: var(--radius); padding: 14px 16px; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset; }
.card h2, .card h3 { font: 600 0.95rem/1.3 var(--title-font); color: var(--accent); letter-spacing: .02em; margin: 0 0 8px; }
.card h1 { margin-top: 0; }
.muted { color: var(--ink-soft); }
label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], textarea {
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 9px; padding: 0.45rem 0.7rem; min-height: 44px; max-width: 100%;
}
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--accent); }
.btn { background: var(--btn-bg); color: var(--btn-ink); border-radius: 9px; padding: 0.5rem 1rem; min-height: 44px; font-size: 0.85rem; font-weight: 600; }
.btn.secondary { background: var(--bg-raised); color: var(--ink); border: 1px solid var(--line-strong); }
.tag { background: var(--strip-bg); color: var(--ink); border: 0; font-weight: 600; font-size: 0.75rem; padding: 3px 12px; }
.tag.private { color: var(--ink); }
.notice { border-left-color: var(--rule-gold); }
.mini-btn, .mem-method, .mem-mode, .mem-pickchip, .hl-chip, .ref-chip { border-color: var(--line-strong); background: var(--bg-panel); min-height: 36px; }
.mini-btn.on, .mem-method.on, .mem-mode.on, .mem-pickchip.on, .iconbtn.on { background: var(--chip-on-bg); color: var(--chip-on-ink); border-color: var(--chip-on-bg); }
.mini-btn { min-height: 44px; padding: 0.15rem 0.8rem; }
.mem-mode, .mem-method { min-height: 44px; }
.mem-pickchip { min-height: 44px; }
.progress, .mem-bar, .dc-bar { height: 10px; background: var(--line-color); border: 0; }
.progress > i, .mem-bar > span, .dc-bar > i { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
blockquote, .verse-chip { font: italic 1.05rem/1.5 var(--reading-font); border-left: 3px solid var(--rule-gold); padding: 0.2rem 0 0.2rem 14px; margin: 12px 0; }
.verse-chip .verse-ref { font: 500 0.75rem var(--ui-font); }

/* two-column views (reader dock, notebook, memorize, plan) */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; align-items: start; }
.cols > .m, .cols > .a { min-width: 0; }
.cols > .m > .card:first-child:not(.plan) { background: none; border: 0; box-shadow: none; padding: 0; }
:root[data-route='teachings'] .main > .card:first-child { background: none; border: 0; box-shadow: none; padding: 0; }
.cols .reading { max-width: none; }
.reading.cols { max-width: none; }

/* notebook marks */
.mk { background: var(--bg-raised); border: 1px solid var(--line-color); border-left: 4px solid var(--c, var(--gold)); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.mk strong { font: 600 0.95rem var(--title-font); }
.mk .btn { min-height: 44px; background: none; border: 0; color: var(--accent); padding: 0 0.6rem; }
.mk p { font: 400 1rem/1.55 var(--reading-font); }
.mem-card, .mem-pack, .mem-set { background: var(--bg-raised); }
.mem-pack { border: 0; border-bottom: 1px dotted var(--line-strong); border-radius: 0; background: none; padding: 8px 0; font-size: .8rem; color: var(--ink-soft); }

/* plan */
.plan { border-radius: 16px; padding: 20px 22px; }
.plan h2 { font: 400 0.78rem var(--ui-font); color: var(--ink-soft); letter-spacing: 0; }
.plan > p:first-of-type { font: 500 2rem/1.15 var(--title-font) !important; margin: 4px 0 12px; }
.plan > p a { color: var(--ink); text-decoration: none; }

/* reader */
.reading-shell { max-width: none; margin: 0; }
#r-today .notice { background: var(--strip-bg); border: 0; border-radius: 10px; padding: 8px 14px; font-size: 0.82rem; margin-bottom: 10px; }
.reader-toolbar { gap: 0.3rem; margin: 0 0 0.5rem; }
.reader-toolbar .r-where { order: -2; flex: 1 0 100%; margin: 0 0 14px; font: 500 clamp(1.75rem, 4vw, 2.25rem)/1.15 var(--title-font); letter-spacing: -.01em; padding-bottom: 6px; border-bottom: 1px solid var(--rule-gold); box-shadow: 0 3px 0 -2px var(--bg-raised), 0 4px 0 -2px rgba(201,168,76,.6); }
.reader-toolbar #r-picker { order: -1; }
.reader-substrip label, .reader-substrip .mini { font-size: 0.8rem; font-weight: 500; }
.page-viewport {
  background: var(--paper); border: 2px solid var(--rule-gold); border-radius: 6px;
  outline: 1px solid rgba(201,168,76,.55); outline-offset: 4px; margin: 6px 5px;
  box-shadow: 0 18px 44px var(--shadow), 0 0 60px rgba(226,196,120,.25);
  height: calc(100vh - 320px);
}
.page-viewport[data-cols="2"] .seam { background: linear-gradient(90deg, transparent, rgba(90,70,20,.14) 48%, rgba(90,70,20,.14) 52%, transparent); }
.page-viewport[data-cols="1"] { box-shadow: 0 18px 44px var(--shadow), 0 0 60px rgba(226,196,120,.25); }
.page-head { border-bottom: 2px solid var(--rule-gold); padding-bottom: 6px; margin-bottom: 10px; }
.page-head .ph-ref, .page-head .ph-trans { font: 600 0.75rem var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.page-body { text-align: left; hyphens: manual; text-wrap: pretty; }
.page-body[data-ch]::before {
  content: attr(data-ch); float: left; font: 600 clamp(4.5rem, 8vw, 7.5rem)/.78 var(--title-font);
  color: var(--drop-ink); background: var(--drop-bg); padding: 10px 16px 16px; margin: 6px 14px 4px -4px; border-radius: 6px;
  text-shadow: 0 2px 0 rgba(90,60,10,.4); box-shadow: 0 3px 10px rgba(90,60,10,.35);
}
.verse .vnum { color: var(--accent); }
.page-info { color: var(--ink-soft); }

/* study overlay: bottom sheet by default; docked right column on wide reading screens */
.overlay-handle, .overlay-panel { background: var(--bg-raised); }
.ov-sec-head { min-height: 44px; }
@media (min-width: 1100px) {
  :root[data-route='read'] .main, :root[data-route='read'][data-overlay='up'] .main { padding-right: calc(330px + 24px + 28px); padding-bottom: 28px; }
  :root[data-route='read'] .studyoverlay { top: 84px; left: auto; right: 28px; bottom: 0; width: 330px; overflow-y: auto; padding-bottom: 24px; }
  :root[data-route='read'] .overlay-handle, :root[data-route='read'] #ov-close, :root[data-route='read'] #r-study { display: none; }
  :root[data-route='read'] .overlay-panel { position: static; transform: none; height: auto; background: none; border: 0; box-shadow: none; border-radius: 0; }
  :root[data-route='read'] .overlay-top, :root[data-route='read'] .ov-sec {
    background: var(--bg-raised); border: 1px solid var(--line-color); border-radius: var(--radius); margin-bottom: 14px; padding: 8px 14px;
  }
  :root[data-route='read'] .overlay-sections { padding: 0; overflow: visible; }
  :root[data-route='read'] .overlay-top { flex-wrap: wrap; }
  :root[data-route='read'] .ov-sec-head { padding: 0.4rem 0; font: 600 0.95rem var(--title-font); color: var(--accent); }
  :root[data-route='read'][data-focus='on'] .studyoverlay { display: none; }
  :root[data-route='read'][data-focus='on'] .main { padding-right: 28px; }
  :root[data-route='read'] .page-viewport { height: calc(100vh - 330px); }
}

/* below the dock width the columns stack */
@media (max-width: 1000px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* phones */
@media (max-width: 760px) {
  .topbar { min-height: 56px; padding: 0 12px; gap: 0.4rem; }
  .brandtext { font-size: 1.1rem; }
  .main { padding: 14px 16px; }
  .reader-toolbar .r-where { display: block; }
  .page-viewport, .page-viewport.scroll { height: calc(100vh - 380px); margin: 4px 3px; }
  .page-body[data-ch]::before { font-size: 4.5rem; padding: 8px 12px 12px; }
  .sidemenu.overlay { width: min(290px, 86vw); }
}
@media (max-width: 600px) { #accountBtn { display: none; } }
@media (max-width: 400px) { .brandtext small { display: none; } .topbar .pill { padding: 0.15rem 0.5rem; } }
/* landscape phones: short viewport, compact chrome */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar { min-height: 48px; }
  .iconbtn { min-height: 44px; }
  .main { padding: 8px 16px; }
  .reader-toolbar .r-where { flex: 0 1 auto; margin: 0 .5rem 0 0; font-size: 1.3rem; border: 0; box-shadow: none; padding: 0; order: -1; }
  .reader-toolbar #r-picker { order: -2; }
  .page-viewport, .page-viewport.scroll { height: calc(100vh - 190px); min-height: 180px; }
  .page-body[data-ch]::before { font-size: 3.2rem; padding: 6px 10px 8px; }
  .main h1 { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .page-flow, .overlay-panel, .mem-bar > span { transition: none; } }
#r-trans { max-width: 150px; text-overflow: ellipsis; }
.ov-sec-body, .ov-sec-body p { font-size: 0.82rem; line-height: 1.5; }
.sidemenu { background: linear-gradient(180deg, rgba(246,240,224,.9), rgba(236,215,159,.45)); }
:root[data-texture='night'] .sidemenu { background: rgba(255,255,255,.04); }

.page-body { font-size: var(--base-size); }
.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { filter: brightness(1.08); }
.main .lede, .main .reading > .m > .card:first-child > p { font: 400 1.0625rem/1.55 var(--reading-font); color: var(--ink); }
.card h2 + *, .card h3 + * { margin-top: 0; }
.mem-intro { font-family: var(--reading-font); font-size: 1.05rem; }
.mk-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-act { margin-left: auto; font-size: 0.75rem; color: var(--accent); }
.lnk { background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 12px 6px; min-height: 44px; }
.mk .tag { color: var(--ink); background: color-mix(in srgb, var(--c) 30%, var(--bg-raised)); border: 1px solid var(--c); }
.mk p { margin: 2px 0 0; }

/* 320px: keep topbar inside the viewport */
@media (max-width: 360px) { .topbar { gap: 0.25rem; padding-inline: 0.5rem; } .topbar .brandtext small { display:none; } }

/* ===== Stage 1 round 2: chips, filters, steps, docked form, study tab ===== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.ch { min-height: 44px; border: 1px solid var(--rule-gold); border-radius: 99px; padding: 0 14px; font: 600 0.8rem var(--ui-font, inherit); background: var(--bg-raised); color: var(--ink); cursor: pointer; }
.ch:hover { border-color: var(--accent); }
.ch.on, .ch[aria-pressed='true'] { background: var(--ink); color: var(--gold-light); border-color: var(--ink); }
:root[data-texture='night'] .ch.on, :root[data-texture='night'] .ch[aria-pressed='true'] { background: var(--gold-light); color: #0A0B14; border-color: var(--gold-light); }
.vchips { padding: 4px 0; }
@media (max-width: 600px) { .vchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .vchips .ch { padding: 0 4px; min-width: 0; } }
.filt { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 12px; }
.filt .chips { margin: 0; }
.srch { flex: 1 1 200px; min-height: 44px; border: 1px solid var(--rule-gold); border-radius: 10px; padding: 0 12px; background: var(--bg-raised); color: var(--ink); font: inherit; }
.more-filt { margin: 0 0 12px; }
.more-filt > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent); font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
@media (max-width: 800px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { margin: 0; }
.step h3 { font: 600 0.8rem var(--ui-font, inherit); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; text-wrap: balance; }
.step p { margin: 0; text-wrap: pretty; }
.fl { display: block; font: 600 0.78rem var(--ui-font, inherit); color: var(--ink-soft); margin: 10px 0 4px; }
.btn.big { min-height: 48px; padding: 0 22px; font-size: 1rem; margin-bottom: 14px; }
.cols > .a .card, .cols > .a { --pad: 16px; }
.cols > .a > .card:first-child { border-top: 3px solid var(--gold); }
.cols > .a .card h2 { font: 600 1.15rem var(--title-font); color: var(--accent); margin: 0 0 8px; text-wrap: balance; }
.cols > .a input:not([type=color]):not([type=radio]):not([type=checkbox]), .cols > .a textarea, .cols > .a select { width: 100%; box-sizing: border-box; }
h1 { border-bottom: 2px solid var(--rule-gold); padding-bottom: 6px; }
.mk .mk-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.mk .mk-act { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mk .lnk { color: var(--accent); text-decoration: underline; }
/* Study tab: a labeled edge tab, real feature (dictionary, search, topical) */
.overlay-handle .oh-label { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; color: var(--accent); }

.plan > p.muted:first-of-type { font: 400 1rem/1.5 var(--reading-font) !important; margin: 4px 0 0; }
.plan > h2:only-of-type { font: 500 1.7rem/1.15 var(--title-font); color: var(--ink); margin: 2px 0 6px; text-wrap: balance; }
.mk { padding: 10px 14px; margin-bottom: 8px; }

/* 44px tap targets (a11y pass) */
.brand { min-height: 44px; display: inline-flex; align-items: center; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
input[type=color] { min-height: 44px; min-width: 44px; }
input[type=range] { min-height: 44px; }
.overlay-handle { min-height: 44px; }
.lnk { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#r-today a, .daily-countdown a { display: inline-block; padding: 12px 3px; margin: -12px 0; color: var(--ink); }

/* Round 3: reader toolbar collapse on phone, tighter chips, memorize preview, plan radios */
.r-morebtn { display: none; }
@media (max-width: 700px) {
  .r-morebtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
  .reading-shell:not(.more-open) .r-extra { display: none !important; }
  .reading-shell.more-open .r-extra { display: inline-flex; }
  .reading-shell.more-open .reader-substrip.r-extra { display: flex; flex-wrap: wrap; }
  .r-trans-wrap { flex: 1 1 0; min-width: 0; } .r-trans-wrap select { width: 100%; min-width: 0; } .r-spring { display: none; }
}
#r-today a, .daily-countdown a { white-space: nowrap; }
.chips { gap: 4px; }
.vchips .ch { padding: 0 11px; min-height: 44px; }
.mem-preview { background: #0A0B14; color: #F0EAD6; border-radius: 12px; padding: 14px 18px; margin: 12px 0; }
.mem-preview small { display: block; color: var(--gold-light); font-size: 0.75rem; }
.mem-preview strong { display: block; font: 600 1.35rem var(--title-font); margin: 4px 0; }
.mem-preview .mp-cue { font: 500 1.05rem/1.7 var(--reading-font); letter-spacing: 0.12em; color: var(--gold-light); margin: 0 0 10px; word-break: break-word; }
.btn.gold { background: var(--gold); color: #0A0B14; border-color: var(--gold); }
@media (max-width: 600px) { .mem-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mem-method { justify-content: center; } }
.step label:has(> input[type=radio]) { display: flex; width: 100%; }

/* Row balance (2026-10-04): no orphaned controls at any width */
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap input[type=text], .row.nowrap input[type=range] { flex: 1 1 0; min-width: 0; }
.row.stack { flex-direction: column; align-items: flex-start; }
.vchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vchips .ch { min-width: 0; }
@media (min-width: 681px) {
  .reader-toolbar { display: grid; grid-template-columns: repeat(6, 44px); justify-content: start; gap: 6px; }
  .reader-toolbar .r-where { grid-column: 1 / -1; order: -3; }
  .reader-toolbar .r-spring { display: none; }
  .reader-toolbar > .r-trans-wrap { grid-column: span 2; min-width: 0; }
  .reader-toolbar > .r-trans-wrap { width: 100%; box-sizing: border-box; }
  .reader-toolbar > .r-trans-wrap select { flex: 1; width: 100%; min-width: 0; }
  .reader-substrip.r-extra .mini { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; }
  .reader-toolbar > .iconbtn { justify-self: stretch; width: auto; }
  .reader-substrip.r-extra { display: flex; flex-wrap: nowrap; gap: 0.5rem; align-items: center; }
  .reader-substrip.r-extra .mini, .reader-substrip.r-extra .mini-btn { white-space: nowrap; font-size: 0.72rem; padding-inline: 8px; }
  .reader-substrip .r-spring, .reader-substrip #r-countdown:empty { display: none; }
}
@media (min-width: 681px) and (max-width: 1099px) { #r-view { display: none; } }
@media (min-width: 1100px) { .reader-toolbar { grid-template-columns: repeat(4, 44px); } }
@media (min-width: 681px) and (max-height: 500px) { .reader-toolbar { grid-template-columns: repeat(6, 44px); } }
.row.nowrap select { flex: 0 1 5.5rem; min-width: 0; width: 5.5rem; }
.plan a, #r-today a, .daily-countdown a { white-space: nowrap; }
.reader-substrip input[type=checkbox] { width: auto; flex: none; margin: 0; display: inline-block; }
.reader-substrip label.row.mini { flex-direction: row; flex-wrap: nowrap; }

/* Slim reader (1100px+): one toolbar row, extras and substrip behind More, chips in one row */
@media (min-width: 1100px) {
  .reader-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-bottom: 6px; }
  .reading-shell.more-open .reader-toolbar { flex-wrap: wrap; }
  .reader-toolbar > .r-trans-wrap { width: auto; flex: 0 1 170px; }
  .reader-toolbar > .iconbtn { width: 44px; flex: none; }
  .reader-toolbar .r-spring { display: block; flex: 1; }
  .r-morebtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; order: 10; }
  .reading-shell:not(.more-open) :is(#r-scroll, #r-red, #r-dark, #r-focus, .reader-substrip.r-extra) { display: none; }
  .reading-shell.more-open .reader-substrip.r-extra { display: flex; }
  .reading-shell { display: flex; flex-direction: column; }
  #r-today .notice { margin-bottom: 4px; }
  .reader-toolbar { margin-bottom: 2px; }
  .reading-shell .page-viewport { margin-top: 0; }
  .page-head { margin-bottom: 0.3rem; }
  .reading-shell #r-chips { order: 5; }
  .vchips { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 4px 0; }
  .vchips .ch { padding: 0 4px; font-size: 0.78rem; }
  :root:not(.youth) .reader-toolbar .r-where { flex: 0 0 auto; order: -2; margin: 0 10px 0 0; font-size: 1.3rem; padding: 0; border: 0; box-shadow: none; }
}

/* More open at 1100px+: two even rows (5 + 6 items) */
@media (min-width: 1100px) {
  .reading-shell.more-open .reader-toolbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .reading-shell.more-open .reader-toolbar > .iconbtn { width: auto; }
  .reading-shell.more-open .reader-toolbar > .r-trans-wrap { grid-column: span 2; width: 100%; flex: none; }
  .reading-shell.more-open .reader-toolbar .r-spring { display: none; }
  .reading-shell.more-open .reader-toolbar .r-where { grid-column: 1 / -1; }
}

.rd, .rd-end { white-space: nowrap; }
.rd:has(+ .rd)::after { content: ' ·'; }

.interlinear { display:grid; grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr)); gap:0.5rem 0.9rem; }

.row.plan-manage { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } .row.plan-manage > * { min-width:0; justify-content:center; }
.toolbar.nt-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .toolbar.nt-tools select { min-width:0; max-width:100%; }
@media (min-width:760px){ .toolbar.nt-tools { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:600px){ .row.plan-manage { grid-template-columns:1fr; } }
.filt { display:grid; grid-template-columns:minmax(0,1fr) auto; } .filt .chips { grid-column:1/-1; } .filt .srch { min-width:0; width:100%; }

.rd-list { display:flex; flex-wrap:wrap; gap:0 0.8rem; } .rd-list .rd::after { content:none !important; }
.row.hl-new { display:grid; grid-template-columns:1fr; } .row.hl-new input { width:100%; min-width:0; flex:none; } .row.hl-new input[type=color] { height:36px; padding:2px; }
.row.plan-manage, .row.plan-manage { grid-template-columns:1fr !important; } .row.plan-manage label.row { flex-wrap:nowrap; justify-content:space-between; } .row.plan-manage select { min-width:0; max-width:60%; }
.interlinear.il-list { display:grid; grid-template-columns:1fr; gap:0.2rem; } .il-list .ilword { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto; align-items:center; gap:0.6rem; text-align:left; } .il-list .ilword .orig,.il-list .ilword .en,.il-list .ilword .str { display:block; }
.rd-list { display:block; } .rd-list .rd { display:inline-block; margin-right:0.8rem; }

/* History pictures: framed, gilded feel */
.hist-fig { margin: 0 auto 1rem; max-width: 40rem; padding: 8px; background: var(--paper); border: 1px solid var(--accent-soft); box-shadow: 0 0 0 3px var(--line-color), 0 6px 18px rgba(0,0,0,.18); border-radius: 3px; }
.hist-fig img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .4s; border: 1px solid var(--line-strong); }
.hist-fig img.in { opacity: 1; }
.hist-fig figcaption { padding: 8px 4px 2px; font-size: .9rem; line-height: 1.45; }
.hf-cap { display: block; text-wrap: pretty; font-style: italic; }
.hf-credit { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: 3px; }
.hf-credit a { color: var(--accent); }
.credit-list { padding-left: 0; list-style: none; } .credit-list li { padding: 8px 0; border-top: 1px solid var(--line-color); text-wrap: pretty; }
.hist-fig img { max-height: 55vh; object-fit: cover; }
.credit-list li, .hf-credit, .reading .card > p { text-wrap: pretty; } .hist-fig .hf-cap { text-wrap: balance; }

/* Final QA (2026-10-04): 320px topbar keeps the mark only; 681-899px substrip wraps instead of overflowing */
@media (max-width: 360px) { .topbar .brandtext { display: none; } .topbar .brand { min-width: 44px; min-height: 44px; justify-content: center; } }
@media (min-width: 681px) and (max-width: 899px) { .reader-substrip.r-extra { flex-wrap: wrap; } }
@media (min-width: 681px) and (max-width: 899px) { .reader-substrip.r-extra { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 6px 1.2rem; } .reader-substrip.r-extra #r-countdown { grid-column: 1 / -1; } .reader-substrip.r-extra #r-countdown:empty { display: none; } }
@media (min-width: 681px) and (max-width: 899px) { .reader-substrip.r-extra #r-countdown { display: none; } }