/* Alabaster Strings account site.
   Direction: illuminated-manuscript refinement. Warm ivory ground, deep ink,
   garnet accent, gold hairlines; serif-forward typography (Fraunces display,
   Newsreader body), both self-hosted so the strict CSP keeps default-src
   'self'. No inline styles anywhere: CSP style-src 'self'. */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/static/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #221c14;
  --ink-soft: #5c5346;
  --ink-faint: #8a8071;
  --parchment: #f7f3ea;
  --parchment-deep: #efe9db;
  --card: #fffdf8;
  --hairline: #e3dac7;
  --gold: #b08d3f;
  --gold-soft: #d8c08a;
  --garnet: #722f37;
  --garnet-deep: #5a232a;
  --garnet-wash: #f6ece9;
  --ok: #3f6212;
  --ok-wash: #f1f5e8;
  --err: #8c2f22;
  --err-wash: #f9ece9;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(34, 28, 20, 0.05), 0 8px 24px -12px rgba(34, 28, 20, 0.18);
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--parchment);
  /* Soft parchment depth: two warm glows behind everything. */
  background-image:
    radial-gradient(1100px 500px at 85% -10%, rgba(176, 141, 63, 0.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(114, 47, 55, 0.05), transparent 55%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 253, 248, 0.85);
  backdrop-filter: blur(6px);
}

.site-header .bar {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding-bottom: 2px;
}

.wordmark .mark { display: block; }

/* The "string": a gold hairline drawn under the wordmark. */
.wordmark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft) 55%, transparent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex: 1;
}

.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.site-nav .nav-links a {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
}

.site-nav .nav-links a:hover {
  color: var(--garnet);
  border-bottom-color: var(--gold-soft);
}

.site-nav a {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover {
  color: var(--garnet);
  border-bottom-color: var(--gold-soft);
}

.signout-form { margin-left: auto; }

.signout-form button {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  cursor: pointer;
}

.signout-form button:hover {
  color: var(--garnet);
  border-color: var(--gold-soft);
}

.site-nav .signin { margin-left: auto; }

/* ── Hero (public landing) ──────────────────────────────────────────── */

.hero {
  padding: 2.5rem 0 3rem;
  max-width: 42rem;
}

.hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.5vw, 4.2rem); letter-spacing: -0.02em; line-height: 1.08; }

.button-link {
  display: inline-block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--parchment);
  background: var(--garnet);
  border: 1px solid var(--garnet-deep);
  border-radius: 8px;
  padding: 0.65rem 1.8rem;
  text-decoration: none;
  transition: background 120ms ease;
}

.button-link:hover { background: var(--garnet-deep); color: var(--parchment); }

/* ── Main column ────────────────────────────────────────────────────── */

main {
  flex: 1;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}

.lede {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0 0 2.2rem;
  max-width: 38rem;
}

.kicker {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

/* ── Cards ──────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.8rem;
}

.card + .card { margin-top: 1.25rem; }

.card h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.card p { margin: 0.3rem 0 0; color: var(--ink-soft); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.card-grid .card { margin-top: 0; }

.badge {
  display: inline-block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--garnet);
  background: var(--garnet-wash);
  border: 1px solid rgba(114, 47, 55, 0.18);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  margin-bottom: 0.7rem;
}

.badge.live {
  color: var(--ok);
  background: var(--ok-wash);
  border-color: rgba(63, 98, 18, 0.2);
}

/* ── Definition lists (profile) ─────────────────────────────────────── */

dl.facts { margin: 0; }

dl.facts div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--parchment-deep);
}

dl.facts div:last-child { border-bottom: 0; }

dl.facts dt {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
}

dl.facts dd { margin: 0; }

/* ── Forms ──────────────────────────────────────────────────────────── */

.form-grid { display: grid; gap: 1.3rem; max-width: 30rem; }

.field { display: grid; gap: 0.35rem; }

.field label {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field .check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.98rem;
  cursor: pointer;
}
.field .check input { width: 1.05rem; height: 1.05rem; accent-color: var(--garnet); }

.field .hint {
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin: 0;
}

select,
input[type="text"] {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1rem;
  color: var(--ink);
  background-color: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  width: 100%;
}

select {
  appearance: none;
  /* Gold chevron via data: URI (CSP img-src allows data:). */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b08d3f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.4rem;
}

select:focus,
input[type="text"]:focus {
  outline: 2px solid var(--gold-soft);
  outline-offset: 1px;
  border-color: var(--gold);
}

button.primary {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--parchment);
  background: var(--garnet);
  border: 1px solid var(--garnet-deep);
  border-radius: 8px;
  padding: 0.6rem 1.6rem;
  cursor: pointer;
  justify-self: start;
  transition: background 120ms ease;
}

button.primary:hover { background: var(--garnet-deep); }

/* HTMX result fragments */
#result p { margin: 0.9rem 0 0; font-size: 0.95rem; }

#result p.saved {
  color: var(--ok);
  background: var(--ok-wash);
  border: 1px solid rgba(63, 98, 18, 0.2);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  display: inline-block;
}

#result p.error {
  color: var(--err);
  background: var(--err-wash);
  border: 1px solid rgba(140, 47, 34, 0.2);
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  display: inline-block;
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid rgba(176, 141, 63, 0.4);
  background:
    radial-gradient(700px 200px at 50% 120%, rgba(176, 141, 63, 0.12), transparent 70%),
    #241d15;
  color: rgba(247, 243, 234, 0.7);
  padding: 1.6rem 1.5rem 2rem;
  margin-top: 3rem;
}

.site-footer .foot-mark {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--gold-soft);
}

.site-footer .foot-line { font-style: italic; }

.site-footer .bar {
  max-width: 64rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
}

a { color: var(--garnet); }

/* Quiet inline action, e.g. the delete-account link on the profile page. */
.quiet { font-size: 0.88rem; margin-top: 0.8rem; }
.quiet a { color: var(--ink-faint); }

/* ── Small screens ──────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .site-header .bar { flex-wrap: wrap; gap: 0.8rem 1.2rem; }
  main { padding: 2rem 1.1rem 3rem; }
  h1 { font-size: 1.8rem; }
  dl.facts div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ── Elevation layer (flagship pass) ───────────────────────────────── */

/* The hero carries a whisper of the Greek the product serves: Colossians
   1:17, ultra-faint, set behind the headline like an underdrawing. */
.hero {
  position: relative;
  padding: 4.5rem 0 4rem;
}

.hero::before {
  content: "\1F79  \3C0\3AC\3BD\3C4\3B1  \3B5\3BD  \3B1\3C5\3C4\3C9  \3C3\3C5\3BD\3B5\3C3\3C4\3B7\3BA\3B5\3BD";
  position: absolute;
  top: 0.4rem;
  left: -0.1rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3rem, 8vw, 5.5rem);
  letter-spacing: 0.04em;
  color: rgba(114, 47, 55, 0.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Illuminated initial: the headline opens like a manuscript page. */
.hero h1::first-letter {
  color: var(--garnet);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.8rem;
}

.ghost-link {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--garnet);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 1px;
}

.ghost-link:hover { color: var(--garnet-deep); border-bottom-color: var(--gold); }

.ghost-link.block,
.button-link.block {
  display: block;
  text-align: center;
  margin-top: 1.6rem;
}

.ghost-link.block {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.6rem 1rem;
}

/* ── Feature row ────────────────────────────────────────────────────── */

.feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.4rem;
  padding: 2.6rem 0 1rem;
  border-top: 1px solid var(--hairline);
}

.feature h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  position: relative;
  padding-top: 0.9rem;
}

/* Each feature opens with its own short gold string. */
.feature h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.feature p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* ── Pricing ────────────────────────────────────────────────────────── */

.pricing {
  padding: 3.5rem 0 1rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--hairline);
}

.pricing-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem);
  font-weight: 600;
  margin: 0 0 2rem;
  max-width: 28rem;
  line-height: 1.2;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.6rem;
  max-width: 46rem;
}

.price-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 2rem 2rem 1.8rem;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(34, 28, 20, 0.06), 0 18px 40px -16px rgba(34, 28, 20, 0.28);
}

.price-card h3 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.price { margin: 0 0 1.4rem; display: flex; align-items: baseline; gap: 0.6rem; }

.price .amount {
  font-family: "Fraunces", Georgia, serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
}

.price .per { color: var(--ink-faint); font-size: 0.95rem; }

.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.97rem;
}

.price-list li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--ink-soft);
}

/* Gold lozenge markers, drawn not imported. */
.price-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.52em;
  width: 0.42rem;
  height: 0.42rem;
  background: var(--gold);
  transform: rotate(45deg);
}

/* The Scholar card: the night page of the manuscript, lettered in gold. */
.price-card.night {
  background:
    radial-gradient(600px 300px at 80% -20%, rgba(176, 141, 63, 0.16), transparent 60%),
    #241d15;
  border-color: rgba(176, 141, 63, 0.35);
  color: var(--parchment);
}

.price-card.night h3 { color: var(--gold-soft); }
.price-card.night .amount { color: var(--parchment); }
.price-card.night .per { color: rgba(247, 243, 234, 0.55); }
.price-card.night .price-list li { color: rgba(247, 243, 234, 0.82); }
.price-card.night .price-list li::before { background: var(--gold-soft); }

.button-link.gold {
  background: var(--gold);
  border-color: #8a6c2e;
  color: #241d15;
  font-weight: 600;
}

.button-link.gold:hover { background: var(--gold-soft); color: #241d15; }

/* ── Load-in reveals (CSS only; one orchestrated moment) ────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal { animation: rise 640ms cubic-bezier(0.22, 0.8, 0.3, 1) both; }
.reveal.r1 { animation-delay: 60ms; }
.reveal.r2 { animation-delay: 160ms; }
.reveal.r3 { animation-delay: 280ms; }
.reveal.r4 { animation-delay: 400ms; }
.reveal.r5 { animation-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  .price-card { transition: none; }
}

/* ── Focus visibility (whole site) ──────────────────────────────────── */

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Drawer navigation (mobile) ─────────────────────────────────────── */

/* The drawer is checkbox-driven: works with JavaScript disabled; nav.js
   only adds Escape-to-close and close-on-navigate polish. */

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.hamburger {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.55rem 0.45rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
}

.hamburger .hl {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 280ms cubic-bezier(0.34, 1.4, 0.4, 1), opacity 180ms ease, background 180ms ease;
  transform-origin: center;
}

.nav-toggle:checked ~ header .hamburger .hl:nth-child(1) { transform: translateY(0.56rem) rotate(45deg); background: var(--garnet); }
.nav-toggle:checked ~ header .hamburger .hl:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-toggle:checked ~ header .hamburger .hl:nth-child(3) { transform: translateY(-0.56rem) rotate(-45deg); background: var(--garnet); }

.nav-toggle:focus-visible ~ header .hamburger {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(34, 28, 20, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.nav-toggle:checked ~ .scrim { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: min(20rem, 84vw);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(500px 280px at 110% -10%, rgba(176, 141, 63, 0.12), transparent 60%),
    var(--card);
  border-left: 1px solid rgba(176, 141, 63, 0.4);
  box-shadow: -24px 0 60px -28px rgba(34, 28, 20, 0.45);
  transform: translateX(105%);
  transition: transform 380ms cubic-bezier(0.32, 0.95, 0.35, 1);
  padding: 1.4rem 1.5rem 1.6rem;
}

.nav-toggle:checked ~ .drawer { transform: translateX(0); }

/* Lock the page scroll while the drawer is open. */
body:has(.nav-toggle:checked) { overflow: hidden; }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}

/* The string, carried into the drawer. */
.drawer-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 38%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  gap: 0.15rem;
  flex: 1;
}

.drawer-nav a,
.drawer-foot a {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 1.12rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.7rem 0.6rem;
  border-radius: 8px;
}

.drawer-nav a:hover,
.drawer-foot a:hover { background: var(--parchment-deep); color: var(--garnet); }

.drawer-foot {
  border-top: 1px solid var(--hairline);
  padding-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.drawer-foot a { font-size: 1rem; color: var(--ink-soft); }

.drawer-foot form { margin-top: 0.5rem; }

.drawer-foot button {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.95rem;
  color: var(--garnet);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  width: 100%;
  cursor: pointer;
}

.drawer-foot button:hover { border-color: var(--gold-soft); background: var(--garnet-wash); }

/* Staggered entrance for drawer items while it slides. */
.drawer .d1, .drawer .d2, .drawer .d3, .drawer .d4, .drawer .d5, .drawer .d6 {
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 260ms ease, transform 300ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.nav-toggle:checked ~ .drawer .d1 { opacity: 1; transform: none; transition-delay: 120ms; }
.nav-toggle:checked ~ .drawer .d2 { opacity: 1; transform: none; transition-delay: 170ms; }
.nav-toggle:checked ~ .drawer .d3 { opacity: 1; transform: none; transition-delay: 220ms; }
.nav-toggle:checked ~ .drawer .d4 { opacity: 1; transform: none; transition-delay: 270ms; }
.nav-toggle:checked ~ .drawer .d5 { opacity: 1; transform: none; transition-delay: 320ms; }
.nav-toggle:checked ~ .drawer .d6 { opacity: 1; transform: none; transition-delay: 370ms; }

/* Breakpoint: inline nav on wide screens, drawer below it. */
@media (max-width: 52rem) {
  .site-nav .nav-links,
  .site-nav .signout-form { display: none; }
  .hamburger { display: flex; margin-left: auto; }
}

@media (min-width: 52.01rem) {
  .hamburger, .scrim, .drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .hamburger .hl,
  .drawer .d1, .drawer .d2, .drawer .d3, .drawer .d4, .drawer .d5, .drawer .d6 { transition: none; }
}

/* Studies */
.studies-search {
  font-family: "Newsreader", Georgia, serif; font-size: 1rem; color: var(--ink);
  background-color: var(--card); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 0.55rem 0.8rem; width: 100%; margin-top: 1.5rem;
}
.studies-search:focus { outline: 2px solid var(--gold-soft); outline-offset: 1px; border-color: var(--gold); }
.studies-search-empty { margin: 1rem 0 0; color: var(--ink-faint); }
.study-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.studies-search + .study-list { margin-top: 0.75rem; }
.studies-bulk {
  display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem;
  padding: 0.6rem 0.9rem; background: var(--card); border: 1px solid var(--hairline); border-radius: 10px;
}
.studies-bulk-count { color: var(--ink-faint); font-size: 0.9rem; }
.studies-bulk-delete {
  margin-left: auto; padding: 0.45rem 0.9rem; cursor: pointer;
  background: var(--card); color: var(--danger, #b3261e);
  border: 1px solid var(--danger, #b3261e); border-radius: 8px;
}
.studies-bulk-delete:hover { background: var(--danger, #b3261e); color: #fff; }
.studies-bulk-delete:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.study-row { display: flex; align-items: stretch; gap: 0.5rem; }
.study-select { flex: none; align-self: center; margin: 0 0.1rem 0 0.2rem; cursor: pointer; }
.study-row-link {
  flex: 1; min-width: 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.2rem; background: var(--card); border: 1px solid var(--hairline);
  border-radius: 10px; text-decoration: none; transition: border-color 140ms ease, transform 140ms ease;
}
.study-row-link:hover { border-color: var(--gold-soft); transform: translateY(-1px); }
.study-delete {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.9rem; background: var(--card); color: var(--ink-faint);
  border: 1px solid var(--hairline); border-radius: 10px; cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
.study-delete:hover { color: var(--danger, #b3261e); border-color: var(--danger, #b3261e); }
.study-delete:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 1px; }
.study-heading { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--ink); }
.study-when { color: var(--ink-faint); font-size: 0.9rem; white-space: nowrap; }
.card.empty { margin-top: 1.5rem; }
.resume-line code {
  display: inline-block; font-family: "Newsreader", Georgia, serif; font-size: 1rem;
  background: var(--parchment-deep); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 0.55rem 0.9rem; color: var(--ink); word-break: break-word;
}

/* ── Study chat ─────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.badge.soon {
  color: var(--gold);
  background: #fbf6ea;
  border-color: rgba(176, 141, 63, 0.28);
}

/* ════════════════════════════════════════════════════════════════════
   App shell (authenticated): a persistent left sidebar + full-height main,
   collapsing to an off-canvas drawer on narrow screens. The #nav-toggle
   checkbox drives the mobile open/close with no inline JS (CSP-safe).
   ════════════════════════════════════════════════════════════════════ */

/* On the app shell, pin the body to the dynamic viewport and stop it scrolling:
   the inner regions (chat-log, or main on other pages) scroll instead. Without
   this, body's min-height:100vh exceeds the smaller 100dvh shell on phones, so
   the document itself scrolls and dragging it hides the browser toolbar, which
   shifts the fixed header and composer up. Scoped via :has so the marketing
   pages (no .app) keep normal document scrolling. */
body:has(.app) {
  min-height: 0;
  height: 100dvh;
  overflow: hidden;
}

.app {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  align-items: stretch;
  /* Exact viewport height so the conversation scrolls between a fixed header
     and a fixed composer. dvh tracks the mobile browser chrome (100vh would
     push the composer below the fold on phones). */
  height: 100vh;
  height: 100dvh;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* In the shell, main fills the column. Normal pages get a readable padded
   column by default; the chat breaks out to full height (see :has below). */
.app-main main {
  flex: 1;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.4rem 1.7rem 4rem;
  min-height: 0;
  overflow-y: auto; /* non-chat pages scroll within main; the chat overrides */
  overscroll-behavior: contain; /* do not chain scroll to the document/toolbar */
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  background: var(--card);
  border-right: 1px solid var(--hairline);
  z-index: 50;
}

.side-head { padding: 1.1rem 1.1rem 0.6rem; }
.side-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.side-new {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0.9rem 0.8rem;
  padding: 0.62rem 0.9rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--parchment);
  background: var(--garnet);
  border: 1px solid var(--garnet-deep);
  border-radius: 10px;
  text-decoration: none;
  transition: background 130ms ease;
}
.side-new:hover { background: var(--garnet-deep); }
.side-new-icon { flex: none; }

.side-recent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.2rem 0.6rem 0.8rem;
}
.side-label {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.4rem 0.6rem;
}
.side-list { display: flex; flex-direction: column; gap: 1px; }
.side-study {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background 110ms ease;
}
.side-study:hover { background: var(--parchment-deep); }
.side-study.is-current { background: var(--garnet-wash); }
.side-study-title {
  font-size: 0.94rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-study-when { font-size: 0.76rem; color: var(--ink-faint); }
.side-empty, .side-loading { color: var(--ink-faint); font-size: 0.9rem; padding: 0.5rem 0.6rem; }
/* The infinite-scroll sentinel auto-loads when revealed, but is also clickable
   so the next page loads reliably even where the reveal observer does not fire. */
.load-more { cursor: pointer; }
.load-more:hover .side-loading { color: var(--ink); text-decoration: underline; }

.side-foot {
  border-top: 1px solid var(--hairline);
  padding: 0.7rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.side-foot a {
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.32rem 0.4rem;
  border-radius: 7px;
}
.side-foot a:hover { background: var(--parchment-deep); color: var(--garnet); }
.side-signout { margin-top: 0.3rem; }
.side-signout button {
  width: 100%;
  text-align: left;
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.side-signout button:hover { border-color: var(--gold-soft); background: var(--parchment-deep); }

/* ── Topbar (mobile only: hamburger + brand) ────────────────────────── */
.topbar {
  display: none;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 253, 248, 0.9);
  backdrop-filter: blur(6px);
}
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
/* The legacy header gave .hamburger margin-left:auto (right-aligned). In the
   app topbar the hamburger leads on the left, so reset it. */
.topbar .hamburger { margin-left: 0; }

/* ── Home (dashboard) ───────────────────────────────────────────────── */
.home { max-width: 52rem; }
.home-head { margin-bottom: 1.4rem; }
/* The dashboard's primary action: open the new-study welcome chat. */
.home-new {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 2.4rem;
  padding: 0.85rem 1.5rem;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--parchment);
  background: var(--garnet);
  border: 1px solid var(--garnet-deep);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: background 130ms ease, transform 130ms ease;
}
.home-new:hover { background: var(--garnet-deep); transform: translateY(-1px); }
.home-locked { margin-bottom: 2.4rem; }

/* New-study page header title (right side of the chat header). */
.chat-head-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.home-recent { margin-bottom: 2.4rem; }
.home-recent-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
}
.home-recent-head h2 { margin: 0; }
.home-recent-head a { font-size: 0.92rem; color: var(--garnet); text-decoration: none; }
.home-recent-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.4rem;
}
.home-recent-list .side-study-title { font-size: 1rem; }

.home-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.home-link {
  display: block;
  padding: 1rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 130ms ease, transform 130ms ease;
}
.home-link:hover { border-color: var(--gold-soft); transform: translateY(-1px); }
.home-link h3 { margin: 0 0 0.25rem; font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; color: var(--ink); }
.home-link p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ── Chat: full-height, full-width, no bubbles ──────────────────────── */
/* Break the chat out of the readable column to fill the whole main panel. */
.app-main main:has(.chat) {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the chat-log scrolls, not main */
}

.chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Fixed header at the top of the chat (flex:none); the log scrolls below it
   and the composer is pinned at the bottom (Claude-style). */
.chat-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 253, 248, 0.92);
  backdrop-filter: blur(6px);
}
/* Right-hand action group (new study + menu) is pushed to the far edge; the back
   arrow stays at the left. On the new-study screen the title sits next to back. */
.chat-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}
/* Icon button: back, new study, and the menu trigger all share this square,
   quiet, touch-sized hit target (Claude-style header). */
.chat-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.chat-head-icon:hover,
.chat-head-icon:focus-visible {
  background: var(--garnet-wash);
  color: var(--garnet);
  outline: none;
}
/* The hamburger lives in the study header only on mobile, where the sidebar is an
   off-canvas drawer it opens (the same nav the old topbar gave: All studies,
   Recents, Settings). On desktop the sidebar is always visible, so hide it. */
@media (min-width: 52.01rem) {
  .chat-head-burger {
    display: none;
  }
}
/* Dropdown menu behind the vertical ellipsis. Share is the only item for now;
   chat.js toggles [hidden] and aria-expanded. */
.chat-head-menu {
  position: relative;
}
.chat-head-menu-pop {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  min-width: 11rem;
  padding: 0.3rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 40;
}
.chat-head-menu-pop[hidden] {
  display: none;
}
.chat-head-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.chat-head-menu-item:hover,
.chat-head-menu-item:focus-visible {
  background: var(--garnet-wash);
  color: var(--garnet);
  outline: none;
}
/* Destructive item (Delete): red, to read as a warning like the studies-list
   delete and Claude's menu. */
.chat-head-menu-item-danger {
  color: var(--danger, #b3261e);
}
.chat-head-menu-item-danger:hover,
.chat-head-menu-item-danger:focus-visible {
  background: rgba(179, 38, 30, 0.08);
  color: var(--danger, #b3261e);
}

/* Copy the whole study: same quiet pill as "New study". The label swaps to a
   "Copied" confirmation while studies-copy.js holds the .copied class. */
/* Whole-study "Copy study" was removed (it truncated long studies; full export
   is the future share feature). Per-message .turn-copy stays. */

.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Keep overscroll inside the log: reaching the top/bottom must not chain to
     the document and rubber-band the toolbar (which shifts the fixed header and
     composer). */
  overscroll-behavior: contain;
  padding: 2rem 1.5rem 1.5rem;
  scroll-behavior: smooth;
}

/* Steps so far: the walked path of a study resumed from Claude/ChatGPT, shown
   above the current move so the reader is oriented. A quiet numbered list, set
   apart from the live turns by a soft parchment card. */
.study-outline {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--parchment-deep);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.study-outline-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.5rem;
}
.study-outline-list {
  margin: 0;
  padding-left: 1.3rem;
  color: var(--ink-soft);
}
.study-outline-list li {
  margin: 0.2rem 0;
  font-size: 0.95rem;
}

/* Each turn is a full-width row with a quiet role label and a left accent
   rule, not a bubble. Reader turns are tinted; guide turns read as manuscript
   prose set apart by a garnet rule. */
.turn {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.1rem 0 1.1rem 1.1rem;
  border-left: 2px solid transparent;
}
.turn + .turn { border-top: 1px solid var(--hairline); }
.turn-role {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}
/* Per-message action bar at the bottom of a turn: holds the copy button now and
   is the surface for per-message tool/branch actions (#312). Reserves its height
   even while the copy button is hidden, so revealing it on hover causes no
   layout shift. */
.turn-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}
/* Per-message copy: a quiet icon button in the action bar. Hidden until the turn
   is hovered or the button is focused, so it stays out of the reading flow but
   is always reachable by keyboard. studies-copy.js handles the click. */
.turn-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.turn:hover .turn-copy,
.turn-copy:focus-visible { opacity: 1; }
.turn-copy:hover { color: var(--garnet); background: var(--garnet-wash); }
/* Touch devices have no hover, so the copy button would never appear there.
   Reveal it by default when the primary input cannot hover (mobile). */
@media (hover: none) {
  .turn-copy { opacity: 1; }
}
.turn-copy.copied { opacity: 1; color: var(--gold); }
.turn-body {
  color: var(--ink);
  word-wrap: break-word;
  font-size: 1.06rem;
  line-height: 1.7;
}
/* Raw streamed tokens (pre-render) and the reader's own words keep newlines. */
.turn-stream-raw,
.turn-reader .turn-body { white-space: pre-wrap; }
.turn-reader {
  border-left-color: var(--gold-soft);
  background: linear-gradient(90deg, rgba(176, 141, 63, 0.06), transparent 60%);
}
.turn-reader .turn-role { color: var(--gold); }
.turn-guide { border-left-color: var(--garnet); }
.turn-guide .turn-role { color: var(--garnet); }
/* Guide prose set apart in a manuscript serif. */
.turn-guide .turn-body { font-family: "Newsreader", Georgia, serif; }

/* ── Rendered markdown inside a guide turn ──────────────────────────── */
.turn-body > :first-child { margin-top: 0; }
.turn-body > :last-child { margin-bottom: 0; }
.turn-body p { margin: 0 0 0.85rem; }
.turn-body h1, .turn-body h2, .turn-body h3, .turn-body h4 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  margin: 1.4rem 0 0.6rem;
}
.turn-body h1 { font-size: 1.5rem; }
.turn-body h2 { font-size: 1.3rem; }
.turn-body h3 { font-size: 1.12rem; }
.turn-body h4 { font-size: 1rem; letter-spacing: 0.01em; }
.turn-body ul, .turn-body ol { margin: 0 0 0.9rem; padding-left: 1.4rem; }
.turn-body li { margin: 0.2rem 0; }
/* Markdown tables (e.g. original-language word-study tables) can be wider than a
   phone screen. Make the TABLE its own horizontal scroll box, capped at the
   column width, so only the table scrolls left-right: the page and the
   surrounding prose never shift sideways (which dragged the study text off-screen). */
.turn-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
}
.turn-body th, .turn-body td {
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}
.turn-body th { font-weight: 600; background: var(--parchment, #faf8f3); }
.turn-body li::marker { color: var(--gold); }
.turn-body strong { font-weight: 700; color: var(--ink); }
.turn-body em { font-style: italic; }
.turn-body a { color: var(--garnet); text-underline-offset: 2px; }
.turn-body code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  background: var(--parchment-deep);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
}
.turn-body pre {
  background: var(--parchment-deep);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  overflow-x: auto;
}
.turn-body pre code { background: none; border: 0; padding: 0; }
.turn-body hr { border: 0; border-top: 1px solid var(--hairline); margin: 1.4rem 0; }
/* Blockquotes read as set-apart scripture: garnet rule, warm ground, serif. */
.turn-body blockquote {
  margin: 1rem 0;
  padding: 0.6rem 1.1rem;
  border-left: 3px solid var(--garnet);
  background: var(--garnet-wash);
  border-radius: 0 8px 8px 0;
  color: var(--ink);
  font-size: 1.08rem;
}
.turn-body blockquote p:last-child { margin-bottom: 0; }
/* Collapsible scripture: a native <details> disclosure wrapping the quote, so a
   reader who brings their own Bible can fold it to just the label. */
.turn-body details { margin: 1rem 0; }
.turn-body details > blockquote { margin-top: 0.4rem; }
.turn-body summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--garnet);
}
.turn-body summary::-webkit-details-marker { display: none; }
.turn-body summary::after {
  content: "▸";
  font-size: 0.9em;
  color: var(--gold);
  transition: transform 120ms ease;
}
.turn-body details[open] > summary::after { transform: rotate(90deg); }
.turn-body summary:hover { color: var(--garnet-deep); }
.turn-body table {
  border-collapse: collapse;
  margin: 0 0 1rem;
  font-size: 0.98rem;
}
.turn-body th, .turn-body td {
  border: 1px solid var(--hairline);
  padding: 0.4rem 0.7rem;
  text-align: left;
}
.turn-body th { background: var(--parchment-deep); font-family: "Fraunces", Georgia, serif; }

/* The study_move menu, rendered from an A2UI surface (Column of Buttons) by
   a2ui.js. A quick-reply shortcut for typing; the text box stays available. */
.turn-menu { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.turn-menu:empty { display: none; }
.turn-menu.is-spent { opacity: 0.5; }
/* A2UI layout primitives. A Column stacks its children vertically; a Row lays
   them out horizontally. The menu is a Column of full-width buttons. */
.a2ui-col { display: flex; flex-direction: column; gap: 0.5rem; }
.a2ui-row { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.a2ui-text { margin: 0 0 0.4rem; }
.menu-btn {
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.96rem;
  color: var(--garnet);
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 0.42rem 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.menu-btn:hover { background: var(--garnet-wash); border-color: var(--gold); transform: translateY(-1px); }
.menu-btn:disabled { opacity: 0.5; cursor: default; transform: none; pointer-events: none; }

.stream-note { color: var(--garnet); font-size: 0.95rem; margin-top: 0.4rem; }
.stream-note:empty { display: none; }

.stream-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--gold);
  animation: chat-caret 1.1s steps(1) infinite;
}
@keyframes chat-caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
/* Working indicator: shown in the guide turn from send until the first token
   streams in (chat.js removes it on the first SSE message). */
.stream-loading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--garnet);
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.98rem;
}
.stream-dots { display: inline-flex; gap: 0.28rem; }
.stream-dots i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--gold);
  animation: chat-dot 1.2s ease-in-out infinite;
}
.stream-dots i:nth-child(2) { animation-delay: 0.18s; }
.stream-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-0.18rem); }
}

@media (prefers-reduced-motion: reduce) {
  .stream-caret { animation: none; opacity: 0.6; }
  .stream-dots i { animation: none; opacity: 0.6; transform: none; }
  .chat-log { scroll-behavior: auto; }
}

/* The chat's own tap targets supply their own active feedback (background +
   transform), so suppress the default mobile grey tap flash on them. */
.menu-btn, .composer button, .turn-copy, .map-summary {
  -webkit-tap-highlight-color: transparent;
}

/* ── Composer (pinned at the bottom of the chat) ────────────────────── */
/* Beta Guided/Free study-mode toggle, sits on its own row above the composer. */
.study-mode {
  flex: 0 0 100%; order: -1; border: none; margin: 0; padding: 0 0 0.2rem;
  display: flex; gap: 1rem; font-size: 0.85rem;
}
.study-mode label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.study-mode-beta {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--garnet); border: 1px solid var(--garnet); border-radius: 999px;
  padding: 0 0.35rem;
}
.composer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  /* Clear the home indicator on phones that have one: the bottom padding grows
     to the safe-area inset when it is larger than the base 1.4rem. */
  padding: 0.9rem 1.1rem max(1.4rem, calc(env(safe-area-inset-bottom) + 0.4rem));
  border-top: 1px solid var(--hairline);
  background: var(--parchment);
}
.composer textarea {
  flex: 1 1 auto;
  resize: none;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  /* One comfortable line by default (aligns with the send button); the
     auto-grow script expands it as the reader types, up to max-height. */
  box-sizing: border-box;
  min-height: 2.85rem;
  max-height: 200px;
  box-shadow: var(--shadow);
}
/* The placeholder is the same size as typed text so it sits on the same line and
   baseline; a smaller placeholder rendered high in the box and looked misaligned.
   The lane prompts are kept short enough to fit one line without shrinking. */
.composer textarea::placeholder {
  opacity: 1;
  color: var(--ink-faint);
}
.composer textarea:focus {
  outline: none;
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 3px rgba(176, 141, 63, 0.16);
}
.composer button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  color: var(--parchment);
  background: var(--garnet);
  border: 1px solid var(--garnet-deep);
  border-radius: 12px;
  cursor: pointer;
  transition: background 130ms ease;
}
.composer button:hover { background: var(--garnet-deep); }
/* While a guide turn is streaming, the composer is locked: one reply at a time. */
.composer.is-sending textarea,
.composer textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.composer.is-sending button,
.composer button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.composer.is-sending button:hover { background: var(--garnet); }

/* Completion panel: shown in place of the composer when a study has reached its
   length. Quiet parchment card, matching the study-outline aesthetic. */
.study-complete {
  flex: none;
  margin: 0 auto;
  width: 100%;
  max-width: 52rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.study-complete-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.study-complete-copy {
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
  font-size: 0.98rem;
}
.study-complete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.button-link-soft {
  background: none;
  color: var(--garnet);
  border: 1px solid var(--gold-soft);
}
.button-link-soft:hover { background: var(--garnet-wash); border-color: var(--gold); }

.upgrade-card { margin-top: 1.5rem; }

/* ── Mobile: sidebar becomes an off-canvas drawer ───────────────────── */
@media (max-width: 52rem) {
  .app { grid-template-columns: 1fr; }
  .topbar { display: flex; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(20rem, 84vw);
    /* dvh, not vh: on phones 100vh extends behind the browser chrome and the
       gesture bar, pushing the footer's last links (Profile, Sign out) below
       the fold. dvh tracks the actually-visible viewport so the footer shows.
       vh first as the fallback for browsers without dvh. */
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 260ms cubic-bezier(0.34, 1.2, 0.4, 1);
    box-shadow: 0 0 40px -8px rgba(34, 28, 20, 0.4);
  }
  .nav-toggle:checked ~ .app .sidebar { transform: translateX(0); }
  .nav-toggle:checked ~ .app .scrim { opacity: 1; pointer-events: auto; }
  .turn, .composer, .chat-log { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ── Headless login screens (standalone, pre-auth) ───────────────────── */
.login-body {
  min-height: 100vh; min-height: 100dvh; margin: 0;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background-color: var(--parchment);
}
.login-card {
  width: 100%; max-width: 26rem; background: var(--card, #fffdf8);
  border: 1px solid var(--hairline); border-radius: 18px;
  padding: 2.2rem 2rem; box-shadow: 0 18px 48px -18px rgba(34, 28, 20, 0.42);
}
.login-brand {
  display: flex; align-items: center; gap: 0.5rem; justify-content: center;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--garnet);
  margin-bottom: 1.4rem;
}
.login-title { font-family: "Fraunces", Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 0 0 0.3rem; text-align: center; }
.login-sub { color: var(--ink-soft); margin: 0 0 1.4rem; text-align: center; }
.login-error { background: var(--garnet-wash, #f6ece9); color: var(--garnet-deep); border: 1px solid var(--gold-soft); border-radius: 10px; padding: 0.6rem 0.8rem; margin: 0 0 1rem; font-size: 0.92rem; }
.login-btn {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 0.8rem; margin-bottom: 0.7rem; border-radius: 11px; cursor: pointer;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1rem;
  color: var(--parchment); background: var(--garnet); border: 1px solid var(--garnet-deep);
  text-decoration: none;
}
.login-btn:hover { background: var(--garnet-deep); }
.login-btn.ghost { color: var(--ink); background: var(--card, #fffdf8); border: 1px solid var(--gold-soft); }
.login-btn.ghost:hover { background: var(--parchment-deep); }
.login-or { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-faint, #8a8071); font-size: 0.8rem; margin: 0.6rem 0 0.9rem; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.login-input { display: block; width: 100%; box-sizing: border-box; padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; border: 1px solid var(--gold-soft); border-radius: 10px; font-family: "Newsreader", Georgia, serif; font-size: 1rem; color: var(--ink); background: var(--card, #fffdf8); }
.login-emailform { margin: 0; }
.login-pwform { margin: 0; }
.login-foot { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin: 1.2rem 0 0; }
.login-foot a { color: var(--garnet); }

/* Settings: Security (passkey management) */
.section-head { font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; color: var(--ink); margin: 2rem 0 0.2rem; }
.passkey-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--hairline); }
.passkey-name { color: var(--ink); font-weight: 500; }
.passkey-remove { margin: 0; }
.linklike { background: none; border: 0; padding: 0; color: var(--garnet); cursor: pointer; font: inherit; }
.linklike:hover { color: var(--garnet-deep); text-decoration: underline; }
.passkey-status { color: var(--ink-soft); font-size: 0.9rem; margin: 0.6rem 0 0; min-height: 1.2em; }
.section-sub { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; color: var(--ink); margin: 1.6rem 0 0.2rem; }
.pw-change { max-width: 24rem; }
.pw-change .login-input { margin-bottom: 0.6rem; }


/* Profile: avatar + editable forms */
.profile-head { display: flex; align-items: center; gap: 1.2rem; }
.avatar { border-radius: 50%; border: 1px solid var(--hairline); background: var(--card); }

/* A2UI map plate card: a curated public-domain historical map shown in a turn.
   Rendered by a2ui.js from the "a2ui-map" surface; see internal/web/a2ui.go. */
.turn-map { margin-top: 0.9rem; }
.turn-map:empty { display: none; }
.turn-wordstudy { margin-top: 0.9rem; }
.turn-wordstudy:empty { display: none; }
.turn-context { margin-top: 0.9rem; }
.turn-context:empty { display: none; }
/* Card field rows read as data, not muted attribution. */
.turn-wordstudy .a2ui-card .a2ui-text,
.turn-context .a2ui-card .a2ui-text { opacity: 1; font-size: 0.85rem; }
/* Festival cards stack in a Column; space them apart. */
.turn-context .a2ui-col { display: flex; flex-direction: column; gap: 0.6rem; }
.a2ui-card { border: 1px solid var(--gold); border-radius: 0.5rem; overflow: hidden; background: var(--parchment, #faf8f3); }
.a2ui-card-title { margin: 0; padding: 0.6rem 0.8rem 0.3rem; font-weight: 600; }
.a2ui-card-img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.a2ui-card .a2ui-text { margin: 0; padding: 0.4rem 0.8rem 0.6rem; font-size: 0.8rem; opacity: 0.75; }

/* "Show map" disclosure: the curated map starts collapsed behind a tappable
   summary so it does not dominate the screen; tap to reveal, tap the map to
   open the full-screen zoom viewer. Native <details>, no script. */
.map-disclosure { margin-top: 0.9rem; }
.map-summary {
  display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
  list-style: none; width: fit-content;
  padding: 0.35rem 0.8rem; border: 1px solid var(--gold); border-radius: 999px;
  background: var(--parchment, #faf8f3); font-size: 0.9rem; font-weight: 600;
  user-select: none;
}
.map-summary::-webkit-details-marker { display: none; }
.map-disclosure[open] > .map-summary { margin-bottom: 0.5rem; }
.map-disclosure > .a2ui-card { margin-top: 0; }

/* Full-screen map viewer (zoom + pan). Built in JS from /static (CSP-safe). */
body.map-viewer-open { overflow: hidden; }
.map-viewer {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.map-viewer-img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center; will-change: transform;
  user-select: none; -webkit-user-drag: none; cursor: grab;
}
.map-viewer-close {
  position: fixed; top: max(0.6rem, env(safe-area-inset-top)); right: 0.7rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: none; background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}

/* Authenticator (TOTP) setup screen: a scannable QR plus a tappable otpauth
   link. The QR is a same-origin data: image (allowed by img-src 'self' data:). */
.login-qr-wrap { text-align: center; margin: 0.6rem 0; }
.login-qr { max-width: 100%; height: auto; border: 1px solid var(--gold); border-radius: 0.4rem; background: #fff; padding: 6px; }

/* ── Source review (reviewer-only curation pages) ───────────────────── */
/* Review pages opt into full width via <main class="wide">: use the whole
   viewport with tight side padding so the content box has maximum room. */
.app-main main.wide {
  max-width: none;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}
/* Tighter cards in wide mode so the white box uses the width, not padding. */
main.wide .card { padding: 0.9rem 1rem; }
/* Wide content (markdown + source list) scrolls horizontally inside the box so
   long tables/lines feel natural to pan rather than overflow the page. */
main.wide .source-content.md-body,
main.wide .origin.md-body { overflow-x: auto; }
main.wide .md-body table,
main.wide .md-body pre { display: block; max-width: 100%; overflow-x: auto; }
/* The source list is a real <table>, not markdown, so it needs its own scroll
   container: the white box stays full width and the table pans inside it rather
   than overflowing the page on a narrow screen. min-width keeps the columns
   readable (so you scroll instead of crushing them); on a wide screen the table
   is wider than the min and simply fills the box with no scroll. */
.table-scroll { overflow-x: auto; }
.table-scroll .review-table { min-width: 38rem; }
.review-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 1rem;
}
.review-filters a {
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
}
.review-filters a.active {
  color: var(--parchment);
  background: var(--garnet);
  border-color: var(--garnet-deep);
}
.review-facet-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.85rem;
}
.review-facet-filter .facet { display: flex; flex-direction: column; gap: 0.15rem; }
.review-facet-filter label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.review-facet-filter select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--card);
  font-size: 0.85rem;
  max-width: 16rem;
}
.review-facet-filter button {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--garnet-deep);
  border-radius: 6px;
  background: var(--garnet);
  color: var(--parchment);
  cursor: pointer;
  font-size: 0.85rem;
}
.badge-missing { color: var(--err); background: var(--err-wash); border-color: rgba(140, 47, 34, 0.2); margin-bottom: 0; }
.review-table { width: 100%; border-collapse: collapse; }
.review-table th, .review-table td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--hairline);
}
.review-table th {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Source links read as titles, not underlined hyperlinks: garnet, weighted,
   underline only on hover. Long titles wrap; the source column takes the room. */
.review-table td:first-child { width: 60%; }
.review-table a {
  color: var(--garnet);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.35;
}
.review-table a:hover { text-decoration: underline; }
.review-table td { vertical-align: top; }
/* Inline status badges sit in a cell or beside a title, so drop the standalone
   badge's bottom margin. Status colors reuse the palette tokens. */
.review-table .badge, .badge-stale { margin-bottom: 0; }
.badge-approved {
  color: var(--ok);
  background: var(--ok-wash);
  border-color: rgba(63, 98, 18, 0.2);
}
.badge-rejected {
  color: var(--err);
  background: var(--err-wash);
  border-color: rgba(140, 47, 34, 0.2);
}
.badge-pending {
  color: var(--gold);
  background: var(--parchment-deep);
  border-color: var(--gold-soft);
}
.badge-stale {
  color: var(--garnet);
  background: var(--garnet-wash);
  border-color: rgba(114, 47, 55, 0.18);
  margin-left: 0.4rem;
}

/* Origin block stays a monospace pre (raw attribution lines). */
.origin {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 28rem;
  overflow: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Source content is now rendered markdown (.md-body): readable prose, scrollable. */
.source-content.md-body {
  max-height: 34rem;
  overflow: auto;
  color: var(--ink);
  line-height: 1.6;
}
.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.25;
  margin: 1.1rem 0 0.4rem;
}
.md-body h1 { font-size: 1.4rem; }
.md-body h2 { font-size: 1.2rem; }
.md-body h3 { font-size: 1.05rem; }
.md-body p { margin: 0.5rem 0; }
.md-body ul, .md-body ol { margin: 0.5rem 0 0.5rem 1.25rem; }
.md-body li { margin: 0.2rem 0; }
.md-body a { color: var(--garnet); }
.md-body blockquote {
  margin: 0.6rem 0;
  padding: 0.2rem 0 0.2rem 0.9rem;
  border-left: 3px solid var(--gold-soft);
  color: var(--ink-soft);
}
.md-body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--parchment-deep);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}
.md-body table { border-collapse: collapse; margin: 0.6rem 0; }
.md-body th, .md-body td { border: 1px solid var(--hairline); padding: 0.3rem 0.55rem; }

/* Approve / Reject button row. Reject mirrors button.primary, garnet -> error. */
.actions { display: flex; gap: 0.75rem; }
button.danger {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--parchment);
  background: var(--err);
  border: 1px solid var(--err);
  border-radius: 8px;
  padding: 0.6rem 1.6rem;
  cursor: pointer;
  transition: background 120ms ease;
}
button.danger:hover { background: #6f251b; }

/* Request changes sits between approve and reject: a quieter outlined button. */
button.secondary {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--garnet);
  background: transparent;
  border: 1px solid var(--gold-soft);
  border-radius: 8px;
  padding: 0.6rem 1.6rem;
  cursor: pointer;
  transition: background 120ms ease;
}
button.secondary:hover { background: var(--parchment-deep); }

/* Comments panel: PR-style notes with a target badge and a resolve action. */
.comment-thread { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.comment {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  background: var(--parchment);
}
.comment-resolved { opacity: 0.55; }
.comment-target {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--parchment-deep);
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  margin-bottom: 0.35rem;
}
.comment-body { margin: 0.35rem 0; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.comment-meta { font-size: 0.78rem; color: var(--ink-faint); margin: 0.25rem 0 0; }

/* ── Numbered source view + per-line comments (GitHub-style review) ──────── */
/* Tight padding so the lines use the full width; the line rows scroll
   horizontally for long lines rather than wrapping the whole page. */
main.wide .src-card { padding: 0; overflow: hidden; }
.src-lines {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}
.src-line {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0 0.5rem 0 0;
  cursor: pointer;
}
.src-line:hover { background: var(--parchment, #faf8f3); }
.src-line-selected, .src-line-selected:hover { background: var(--gold-wash, #fbf3d9); }
.src-line-add {
  flex: 0 0 auto;
  width: 1.5rem; align-self: stretch;
  border: none; background: transparent;
  color: var(--garnet); font-size: 1rem; line-height: 1.5; cursor: pointer;
  opacity: 0; padding: 0;
}
.src-line:hover .src-line-add, .src-line-selected .src-line-add { opacity: 1; }
@media (hover: none) { .src-line-add { opacity: 0.5; } } /* touch: always show */
.src-ln {
  flex: 0 0 auto; min-width: 2.5rem; text-align: right;
  color: var(--ink-faint); user-select: none;
  border-right: 1px solid var(--hairline); padding-right: 0.5rem;
}
.src-lc {
  flex: 1 1 auto; min-width: 0; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: transparent; font: inherit; min-height: 1.5em;
}
.src-line-thread {
  border-left: 3px solid var(--gold); background: var(--card);
  margin: 0.25rem 0 0.4rem 3rem; padding: 0.2rem 0.6rem;
}
.src-comment { padding: 0.35rem 0; border-bottom: 1px solid var(--hairline); }
.src-comment:last-child { border-bottom: none; }
.src-comment-resolved { opacity: 0.55; }
.src-comment-body {
  margin: 0; font-family: var(--sans, system-ui), sans-serif; font-size: 0.85rem;
  white-space: pre-wrap; word-break: break-word;
}
/* Inline composer injected under a line by reviews.js. */
.line-composer {
  margin: 0.3rem 0 0.6rem 3rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--gold); border-radius: 0.4rem;
  background: var(--card); font-family: var(--sans, system-ui), sans-serif;
}
.line-composer textarea {
  width: 100%; box-sizing: border-box; font-size: 0.9rem;
  border: 1px solid var(--hairline); border-radius: 0.3rem; padding: 0.4rem;
}
.line-composer-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.line-composer-cancel {
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 0.3rem; padding: 0.3rem 0.7rem; cursor: pointer;
}
button.link-button {
  font-size: 0.82rem;
  color: var(--garnet);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Toast notifications (toasts.js) ──────────────────────────────────── */
.toasts {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(92vw, 26rem);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-family: "Newsreader", Georgia, serif;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  animation: toast-in 180ms ease;
}
.toast-success { border-left: 4px solid var(--gold); }
.toast-error { border-left: 4px solid var(--garnet); }
.toast-text { flex: 1 1 auto; }
.toast-close {
  flex: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-faint);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.2rem;
  -webkit-tap-highlight-color: transparent;
}
.toast-close:hover { color: var(--garnet); }
.toast-out { animation: toast-out 180ms ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast-out { animation: none; }
}

/* ── Study folders (#226) ─────────────────────────────────────────────── */
.study-folders { margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.folder-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.folder-chip {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.folder-chip:hover { border-color: var(--gold-soft); color: var(--garnet); }
.folder-chip.active { background: var(--garnet); color: var(--parchment); border-color: var(--garnet); }
.folder-new, .folder-rename { display: inline-flex; gap: 0.3rem; }
.folder-new input, .folder-rename input, .study-move select {
  font-size: 0.85rem; padding: 0.25rem 0.5rem;
  border: 1px solid var(--hairline); border-radius: 7px; background: var(--card); color: var(--ink);
}
.folder-new button, .folder-rename button, .folder-delete-btn {
  font-size: 0.82rem; padding: 0.25rem 0.7rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--card); color: var(--ink-soft);
  -webkit-tap-highlight-color: transparent;
}
.folder-new button:hover, .folder-rename button:hover { border-color: var(--gold-soft); color: var(--garnet); }
.folder-delete-btn:hover { border-color: var(--garnet); color: var(--garnet); }
.folder-actions { display: inline-flex; gap: 0.6rem; align-items: center; }
.study-move { margin-left: auto; }
.study-move select { max-width: 9rem; }

/* New-study "ways to study" gallery. */
.lane-gallery {
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
}
.lane-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  padding: 1rem;
  border: 1px solid var(--border, #d9d4cb);
  border-radius: 0.6rem;
  background: var(--surface, #fff);
  cursor: pointer;
}
.lane-card:hover,
.lane-card:focus-visible {
  border-color: var(--accent, #8a6d3b);
}
.lane-card-title {
  font-weight: 600;
}
.lane-card-blurb {
  font-size: 0.9rem;
  opacity: 0.8;
}
/* Starter suggestions: tappable example prompts shown after a lane is chosen, so
   a reader new to the Bible has a concrete prompt instead of a blank box. */
.lane-suggestions {
  margin: 0 0 0.4rem;
}
.lane-suggestions-hint {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.lane-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lane-suggestion {
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lane-suggestion:hover,
.lane-suggestion:focus-visible {
  border-color: var(--gold-soft);
  color: var(--garnet);
  outline: none;
}
.composer-back {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0 0.25rem;
}
.is-hidden {
  display: none;
}

/* ── Chat header Share button + panel slot (#223 moved into chat) ─────── */

/* Share sheet: a bottom sheet on mobile, a centered modal on desktop, loaded
   into #share-slot. Backdrop dims the page; the card animates up. */
.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(34, 28, 20, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: share-fade 140ms ease;
}
.share-sheet-card {
  position: relative;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--card);
  border-top: 1px solid var(--hairline);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow);
  padding: 0.6rem 1.25rem max(1.4rem, calc(env(safe-area-inset-bottom) + 0.8rem));
  animation: share-slide-up 200ms ease;
}
.share-sheet-grip {
  width: 2.4rem;
  height: 0.28rem;
  border-radius: 999px;
  background: var(--hairline);
  margin: 0.1rem auto 0.7rem;
}
.share-sheet-close {
  position: absolute;
  top: 0.7rem;
  left: 0.8rem;
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 0;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.share-sheet-close:hover { color: var(--garnet); }
.share-sheet-title { margin: 0 0 1rem; font-size: 1.15rem; text-align: center; }
.share-study {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--parchment);
  margin-bottom: 1.3rem;
}
.share-study-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.share-study-name { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.share-study-owner { font-size: 0.85rem; color: var(--ink-faint); }
.share-study-mark { flex: none; color: var(--gold); }
.share-access-label { margin: 0 0 0.45rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.share-access {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}
.share-access form { margin: 0; }
.share-access form + form { border-top: 1px solid var(--hairline); }
.share-access-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share-access-opt:hover { background: var(--parchment); }
.share-access-opt.is-active { color: var(--garnet); }
.share-access-opt.is-active .share-access-ico { color: var(--garnet); }
.share-access-ico { flex: none; color: var(--ink-faint); line-height: 0; }
.share-access-name { flex: 1 1 auto; }
.share-access-check { flex: none; color: var(--garnet); line-height: 0; }
.share-primary {
  width: 100%;
  margin-top: 1rem;
  border: 1px solid var(--garnet);
  background: var(--garnet);
  color: var(--parchment);
  border-radius: 12px;
  padding: 0.8rem;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share-primary:hover { background: var(--garnet-deep); }
.share-primary.copied { background: var(--gold); border-color: var(--gold); }
.share-email { margin-top: 1.1rem; }
.share-email > summary { cursor: pointer; font-size: 0.9rem; color: var(--ink-soft); list-style: none; }
.share-email > summary::-webkit-details-marker { display: none; }
.share-email > summary:hover { color: var(--garnet); }
.share-email-row { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.7rem; }
.share-email-row input[type="email"] {
  flex: 1 1 auto;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--parchment);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
}
.share-email-send {
  flex: none;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share-email-send:hover { border-color: var(--gold-soft); color: var(--garnet); }
.share-grants { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.share-grants li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.9rem; }
.share-grant-email { color: var(--ink); overflow-wrap: anywhere; }
.share-grant-remove {
  border: 0;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}
.share-grant-remove:hover { color: var(--garnet); }
.share-foot { margin: 1.1rem 0 0; font-size: 0.82rem; color: var(--ink-faint); text-align: center; }
/* Desktop: a centered modal instead of a bottom sheet. */
@media (min-width: 640px) {
  .share-sheet { align-items: center; padding: 1rem; }
  .share-sheet-card {
    width: min(100%, 30rem);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 1.4rem 1.4rem 1.5rem;
    animation: share-rise 160ms ease;
  }
  .share-sheet-grip { display: none; }
}
@keyframes share-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes share-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes share-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .share-sheet, .share-sheet-card { animation: none; }
}

/* ── In-study book-journey nav (#437): a quiet prev / chapter / next row ── */
.journey-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
}
.journey-nav form { margin: 0; }
.journey-nav-home {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
}
.journey-nav-home:hover { color: var(--garnet); }
.journey-nav button {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.journey-nav button:hover {
  border-color: var(--gold-soft);
  color: var(--garnet);
}