/* ==========================================================================
   bookcorner.css -- Dad & Kev's Book Corner (bookcorner/index.html)
   Page-specific rules layered on css/neon-mesa.css. Phone first, built for
   an older reader: 20 px body text, 20 px answer boxes, 56-64 px buttons.
   Header keeps the shared sky/sun but swaps the mountain ridge for a canyon
   wall profile (svg.ridge.canyon) and tints the grid floor river-cyan.
   ========================================================================== */

/* ---------- page basics ---------- */
body.bookcorner{font-size:20px;line-height:1.55}
body.bookcorner .wrap{max-width:760px}
body.bookcorner .tab{font-size:16px}
body.bookcorner .tagline{font-size:16px}
body.bookcorner h2{font-size:22px;line-height:1.3;letter-spacing:.06em}
body.bookcorner h3{font-size:16px;color:#ffd166;text-shadow:0 0 6px #ffd16688;margin:0 0 8px}
body.bookcorner h4{font-size:16px;color:var(--muted);letter-spacing:.08em;margin:12px 0 6px}
body.bookcorner .sky h1 span{color:#ffd166;text-shadow:0 0 5px #ffd166,0 0 12px #ff6a00}

/* ---------- canyon header ---------- */
/* Canyon-wall profile: stepped mesa walls dropping to a river gorge in the
   middle. Same 760x80 slot as the shared ridge; the polyline keeps the
   accent stroke, the glow leans orange like lit sandstone. */
.ridge.canyon{filter:drop-shadow(0 0 3px #ff9e3d) drop-shadow(0 0 9px var(--accent))}
.ridge.canyon polygon{fill:#020b14}
/* Grid floor becomes the river: cyan lines over a 40 % cyan "water" layer. */
body.bookcorner .grid-floor{
  --grid-color:#00f2ff;
  background-color:#020b14;
  background-image:
    linear-gradient(var(--grid-color) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,242,255,.35) 1px,transparent 1px),
    linear-gradient(rgba(0,242,255,.4),rgba(0,242,255,.4));
  background-size:40px 9px,40px 9px,100% 100%;
  box-shadow:0 -6px 22px #00f2ff88,inset 0 -10px 16px rgba(0,242,255,.25);
}

/* ---------- screens ---------- */
section[data-screen][hidden]{display:none}
.lead{margin:0 0 14px}
.note{color:var(--muted);font-size:18px;margin:0 0 12px}
.banner{padding:12px 14px;border:1px solid #ff9e3d;border-radius:8px;background:#ff9e3d14;margin:0 0 16px;font-weight:600}
.banner[hidden]{display:none}

/* pick: two huge full-width buttons */
.who{display:flex;width:100%;min-height:64px;font-size:24px;margin:0 0 14px}
.who[data-person="Kev"]{color:var(--accent);border-color:var(--accent);background:#00f2ff14;box-shadow:0 0 14px #00f2ff55}
.book-meta{color:var(--muted);font-size:18px;margin:16px 0 0}

/* chapter: marker line, overview, figure, answers, asks, pager, dots */
.marker{display:flex;flex-direction:column;gap:10px;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--accent-glow)}
.marker-line{color:#ffd166;font-weight:600;margin:0}
.marker-set{width:100%}
.marker-set[hidden]{display:none}
.overview{margin:0 0 8px}
.graphic{margin:0 0 16px}
.graphic:empty{display:none}
.graphic svg{display:block;width:100%;height:auto;border:1px solid var(--accent-glow);border-radius:8px;background:#020b14}
.qblock{margin:0 0 8px;padding:16px 0 4px;border-top:1px solid var(--accent-glow)}
.qtext{color:#fff;font-weight:600;margin:0 0 12px}
body.bookcorner textarea{
  display:block;width:100%;font-size:20px;line-height:1.5;min-height:120px;padding:12px;
  resize:vertical;overflow:hidden;
}
body.bookcorner textarea.reply-text,body.bookcorner textarea.ask-text{min-height:96px}
.saved{min-height:1.5em;margin:8px 0;color:var(--muted)}
.saved.ok{color:#39ff14}
.saved.warn{color:#ff9e3d}
section[data-screen="chapter"] .btn.primary{width:100%;min-height:56px;font-size:20px}
.theirs{
  white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 8px;padding:12px;min-height:60px;
  border:1px dashed var(--accent-glow);border-radius:6px;background:rgba(2,11,20,.6);
}
.theirs.empty{color:var(--muted);font-style:italic}
.theirs-when{color:var(--muted);font-size:18px;margin:0 0 4px}

/* asks (chapter and general) */
.asks{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--accent-glow)}
.ask-btn,.reply-btn{width:100%;min-height:52px;margin:10px 0 0}
.ask-status{min-height:1.5em;margin:8px 0 0}
.ask-status:empty{display:none}
.ask-list{margin:12px 0 0}
.ask{margin:0 0 14px;padding:12px 14px;border:1px solid var(--accent-glow);border-radius:8px;background:rgba(2,11,20,.6)}
.ask-head{font:700 16px 'Orbitron',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ffd166}
.ask-when{color:var(--muted);font-size:18px;margin:2px 0 0}
.ask-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0}
.reply{margin:12px 0 0;padding:4px 0 4px 12px;border-left:3px solid #39ff14}
.reply-head{color:#39ff14;font-weight:600}
.reply-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:4px 0 0}
.reply-wait{color:var(--muted);font-style:italic;margin:10px 0 0}
.reply-box{margin:10px 0 0}

/* pager: Prev / Next stacked, full width */
.pager{display:flex;flex-direction:column;gap:12px;margin:20px 0 0}
.pager .btn{flex-direction:column;align-items:center;gap:2px;padding:10px 14px;text-align:center}
.pager .btn .sub{font:400 16px/1.3 'Roboto Mono',Consolas,monospace;text-transform:none;letter-spacing:0;opacity:.85}
.pager .btn:disabled{opacity:.45}

/* 22-dot chapter strip (wraps; each dot a 44 px tap target) */
.dots{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin:16px 0 0}
.dots a{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  font:700 16px 'Orbitron',sans-serif;color:var(--accent);
  border:1px solid var(--accent-glow);border-radius:6px;text-decoration:none;
}
.dots a:hover,.dots a:focus-visible{text-decoration:none;box-shadow:0 0 8px var(--accent-glow)}
.dots a.done{border-color:#39ff1499;color:#39ff14}
.dots a.marker{border-color:#ffd166;color:#ffd166;box-shadow:0 0 8px #ffd16688}
.dots a.on{background:var(--accent);color:#020b14;box-shadow:0 0 12px var(--accent)}
.dots a.on.marker{background:#ffd166;color:#020b14;box-shadow:0 0 12px #ffd166}

/* all-chapters list */
.chlist a{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;margin:0 0 8px;
  border:1px solid var(--accent-glow);border-radius:6px;font-size:18px;color:var(--text);text-decoration:none;
}
.chlist a:hover,.chlist a:focus-visible{text-decoration:none;border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.chlist a .n{flex:0 0 auto;font:700 16px 'Orbitron',sans-serif;color:var(--accent);min-width:2.6em}
.chlist a.marker .n{color:#ffd166}
.chlist a.on{border-color:var(--accent)}

/* footer links: Switch, Ask Each Other, All chapters */
.bc-foot{display:flex;flex-wrap:wrap;gap:4px 24px;padding:8px 4px 24px}
.bc-foot[hidden]{display:none}
.bc-foot a{display:inline-flex;align-items:center;min-height:44px;font-size:18px;color:var(--accent)}
.bc-foot a.switch{color:var(--muted)}

/* ---------- phones ---------- */
@media (max-width:600px){
  body.bookcorner .tagline{display:none}
  body.bookcorner .sky{height:90px}
  body.bookcorner nav.tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  body.bookcorner nav.tabs::-webkit-scrollbar{display:none}
  body.bookcorner .tab{flex:0 0 auto;white-space:nowrap}
  body.bookcorner .sec{padding:14px 12px}
}