/* Sacred Gita — visual system ported from Gate of Noor's study-desk layout (tokens and
   component rules kept structurally identical) with the accent palette swapped to
   sacredgita.com's warm orange/gold/cream. Light study-desk look: white panels, cream
   ruled paper. No dark theme, no audio anywhere. Mobile-first.
   Variable names are kept from the Gate of Noor port (--teal, --rose, etc.) to
   minimise the diff against the rest of this file — their VALUES are Sacred Gita's
   palette: --teal is now the warm primary orange, not teal. */

:root {
  --ink: #3E2723;
  --muted: #795548;
  --line: #D7CCC8;
  --paper: #FFF8E7;
  --paper-deep: #FFF0D0;
  --panel: #ffffff;
  --teal: #E8712C;
  --teal-soft: #FBE0C8;
  --gold: #D4A017;
  --rose: #B23A2E;
  --shadow: 0 18px 45px rgba(62, 39, 35, .14);
}

* { box-sizing: border-box; }
/* overflow-x on html/body MUST be clip, never hidden: a non-visible overflow-x computes
   overflow-y to auto, which makes html/body scroll containers. The sidebar then has a
   scrollport that never scrolls (body is as tall as its content), so the sticky sidebar
   simply scrolls away with the page and takes the sidebar word-help card with it —
   exactly where it must NOT be. clip trims the horizontal overflow without creating a
   scroll container, so the document keeps scrolling and the sticky sidebar sticks. */
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; }
html { scroll-behavior: smooth; }

/* NO TEXT SELECTION ANYWHERE IN THE APP CHROME.
   Carlos, Oct 3 2026: "while u write the text turns green like u tried to select the
   entire line ... press and slide selects text usually with the pen as ure already
   trying to write by press and slide, it fucks things up in this app."
   Nothing in this UI is meant to be selectable — the guide is painted on the canvas and
   every label is chrome. But the DOM labels (.translation-chip, hints, nav) were still
   selectable, so a pen press-and-slide started iPadOS's native selection: the run of
   text highlights in the system/tint colour (green on his iPad) and the selection drag
   competes with the stroke being written. touch-action:none + preventDefault() on
   pointerdown do not suppress that; only user-select/-webkit-touch-callout do.
   Text fields opt back in below, so signing in and searching still behave normally. */
/* Every element, not just html/body: user-select is not inherited, so a label left on
   the default ("auto") is still selectable and the selection gesture can start on it —
   which is why a body-only rule would have looked like it worked and then failed on the
   verse labels. Carlos, Oct 3 2026: "anywhere where i write with the stylus, the ipad
   thinks im trying to select the text and it tries thus to select the entire page like
   when u select to do copy paste, it happens in the video multiple times". */
*, *::before, *::after {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
input[type="url"], input[type="number"], input[type="password"], textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
body {
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(212, 160, 23, .16), transparent 30%),
    linear-gradient(135deg, #f6f1e6 0%, #FDF3E2 50%, #fffaf0 100%);
}
img, canvas { max-width: 100%; }
button, select, input { font: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

*:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════
   APP SHELL — sidebar + main workspace
═══════════════════════════════════════════════ */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}

.sidebar, .workspace, .bottom-panel, .journey-panel, .sheet {
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(62, 39, 35, .1);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.sidebar {
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
}
/* Below 920px the sidebar stacks UNDER the workspace, so it travels with the page like
   any other block and only needs to become a scroll container on a short viewport (laptop
   lid half-open, a landscape phone, etc). Below 760px tall it scrolls as a whole so the
   controls further down are still reachable without the page growing past the viewport. */
@media (max-height: 759.98px) {
  .sidebar {
    max-height: calc(100vh - 36px); /* 36px = .app's 18px padding, top + bottom */
    overflow-y: auto;
  }
}

/* Where the sidebar IS the left column (>= 920.01px wide, which is every iPad in both
   orientations) it has to stay on screen while you write. Writing happens far down the
   page — the paper starts around y=840 with the page ~3200px tall — so a sidebar that
   scrolls away takes the word-help card with it, and word help you cannot see is worth
   nothing. Pinning the column and letting it scroll internally keeps the help card
   beside the pen at every scroll position. The panel is at the TOP of the sidebar, so it
   is visible the moment the column pins. */
@media (min-width: 920.01px) {
  .sidebar {
    position: sticky;
    top: 18px;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.brand { display: flex; align-items: center; gap: 12px; }
.mark {
  width: 46px; height: 46px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--teal);
  color: #f8dc80;
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 26px;
  font-weight: 800;
  flex-shrink: 0;
}
h1 { font-size: 1.35rem; line-height: 1.12; }
.subtitle { color: var(--muted); font-size: .92rem; line-height: 1.45; margin-top: 4px; }

.group { display: grid; gap: 10px; }
.group-title {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6c675b;
  font-weight: 800;
}

/* ── Today verse list ── */
.verse-list { display: grid; gap: 8px; max-height: 34vh; overflow-y: auto; }
.verse-btn, .tool-btn, .chip {
  min-height: 44px;
  border: 1px solid rgba(232, 113, 44, .16);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
.verse-btn {
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  display: grid;
  gap: 4px;
}
.verse-btn[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); }
.verse-name { font-weight: 800; font-size: .96rem; }
.verse-meta { color: var(--muted); font-size: .82rem; }

/* ── generic outline button (also used standalone: Change chapter, sheet close, etc) ── */
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  font-weight: 750;
  width: 100%;
}
.tool-btn:hover { border-color: var(--teal); }
.tool-btn.primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.tool-btn.primary:hover { background: #C9561A; }
.tool-btn.warn { color: var(--rose); border-color: rgba(178, 58, 46, .28); }
.tool-btn.warn:hover { background: rgba(178, 58, 46, .06); }
.tool-btn:disabled { opacity: .55; cursor: not-allowed; }
.field-btn { margin-top: 12px; }

.link-btn {
  display: block;
  width: 100%;
  min-height: 40px;
  background: none;
  border: none;
  color: var(--teal);
  font-weight: 700;
  font-size: .88rem;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
}

/* ── Journey / Account / About — three small pills right under the brand block, always
   visible without scrolling (see the .sidebar media query above) ── */
.sidebar-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sidebar-pills-4 { grid-template-columns: repeat(4, 1fr); }
.pill-btn {
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(232, 113, 44, .18);
  background: #fff;
  color: var(--teal);
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0 6px;
  /* .pill-btn is also used on the <a> Museum link — same look as the <button> pills. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}
.pill-btn:hover { border-color: var(--teal); background: var(--teal-soft); }

/* ── controls (ink / stroke / guide / writing mode) ── */
.controls { display: grid; gap: 12px; }
.control-row { display: grid; gap: 6px; }
label { font-size: .88rem; font-weight: 750; color: #6B4A3A; }
select, input[type="range"] { width: 100%; }
select {
  min-height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(232, 113, 44, .18);
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
}
input[type="range"] { accent-color: var(--teal); }

.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips.chips-2 { grid-template-columns: repeat(2, 1fr); }
.level-exhausted { display: grid; gap: 8px; margin-top: 4px; }
.chip { display: grid; place-items: center; padding: 8px; font-weight: 700; }
.chip[aria-pressed="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }

.progress, .goal-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: #FDF6EA;
  border: 1px solid rgba(232, 113, 44, .12);
}
.meter { height: 10px; border-radius: 999px; background: #F0E0C8; overflow: hidden; }
.meter span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transition: width .25s ease;
}

/* ── one-year goal panel (sidebar, replaces the old Routine box) ── */
.goal-line { font-size: .88rem; color: var(--ink); line-height: 1.4; }
.goal-meter span { background: linear-gradient(90deg, var(--gold), var(--teal)); } /* gold -> orange, whole-Gita progress */
.goal-status { font-size: .84rem; font-weight: 750; margin-top: 2px !important; }
.goal-status.on-track { color: #4C7A3D; } /* calm earthy green */
.goal-status.behind { color: var(--rose); }

/* Same four lines, reused atop the Journey screen for members. */
.journey-goal-lines { display: grid; gap: 4px; margin-bottom: 4px; font-size: .88rem; color: var(--ink); }
.journey-goal-status { font-weight: 750; margin-top: 2px; }
.journey-goal-status.on-track { color: #4C7A3D; }
.journey-goal-status.behind { color: var(--rose); }

/* ══════════════════════════════════════════════
   MAIN WORKSPACE
═══════════════════════════════════════════════ */
.main {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 18px;
}

.workspace {
  position: relative;
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.topbar h2 { font-size: 1.05rem; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.actions .tool-btn { width: auto; padding: 0 14px; min-height: 44px; }

.zoom-group {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(232, 113, 44, .16);
  border-radius: 8px;
  overflow: hidden;
}
.zoom-group .zoom-btn {
  width: 40px;
  min-width: 40px;
  min-height: 44px;
  border: none;
  border-radius: 0;
  font-size: 1.1rem;
}
.zoom-value {
  min-width: 46px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}

/* ── the writing paper ── */
/* ── art plate + paper: always stacked, painting first, full width, at every size —
   no side column, no sticky. A painting on every verse, directly above the paper it
   belongs to. ── */
.paper-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.paper-row.no-plate .art-plate-frame { display: none; }

/* Paintings are NOT all one shape, though Sacred Gita's own collection runs mostly
   wide (roughly 1.85:1 landscape). The frame hugs each painting's OWN real aspect
   ratio (app.js sets --plate-aspect from the loaded image's naturalWidth/naturalHeight)
   so object-fit: contain below fills it edge to edge with no crop AND no letterboxed
   cream bands. 1.85 is only the fallback before an image has loaded once. Full width,
   no max-height cap — the frame's height is simply width / aspect, so the whole
   painting shows with nothing to letterbox against. */
.art-plate-frame {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-deep);
  cursor: pointer;
  aspect-ratio: var(--plate-aspect, 1.85);
}
.art-plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* the WHOLE painting, never cropped */
  object-position: center;
  opacity: 0;
  transition: opacity 400ms ease;
}
.art-plate-img.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .art-plate-img { transition: none; }
}

.page {
  position: relative;
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 0 48px, rgba(212, 160, 23, .22) 49px, transparent 50px),
    repeating-linear-gradient(0deg, transparent 0 66px, rgba(150, 110, 40, .19) 67px, transparent 68px),
    var(--paper);
  border: 1px solid var(--line);
  min-height: 38vh;
  /* No max-height, no inner scroll, at any size. app.js's positionTranslationChip grows
     #page's own min-height to fit the guide + glosses + translation chip (see that
     function's comment) — on a long verse (2:255 is ~3.8x a viewport tall) that just
     makes a tall paper, and the ONE document scrollbar carries the reader through it,
     the art plate included, instead of a scrollbar nested inside the paper card. */
  overflow: visible;
}
@media (min-width: 700px) {
  .page { min-height: 45vh; }
}

.trace-text { position: absolute; inset: 0; pointer-events: none; }
.translation-chip {
  position: absolute;
  left: 16px;
  right: 16px;
  transform: none;
  max-width: none;
  width: auto;
  direction: ltr;
  text-align: center;
  color: rgba(62, 39, 35, .62);
  font-size: .98rem;
  line-height: 1.5;
  background: rgba(255, 255, 255, .8);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(62, 39, 35, .08);
}

#writerCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.rise-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  pointer-events: none;
  font-family: 'Noto Serif Devanagari', serif;
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  color: var(--gold);
  text-shadow: 0 0 18px rgba(212, 160, 23, .35);
  opacity: 0;
  background: rgba(255, 248, 231, .65);
}
.rise-overlay.rising { animation: riseFade 2.2s ease forwards; }
@keyframes riseFade {
  0%   { opacity: 0; transform: translateY(18px) scale(0.97); }
  16%  { opacity: 1; transform: translateY(0) scale(1); }
  72%  { opacity: 0.85; transform: translateY(-22px) scale(1.01); }
  100% { opacity: 0; transform: translateY(-70px) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .rise-overlay.rising { animation: riseFadeReduced 0.6s ease forwards; }
}
@keyframes riseFadeReduced {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── art interlude — a painting between verses, illuminated-manuscript style ── */
.art-interlude {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 24px;
  background: var(--paper);
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.art-interlude.visible { opacity: 1; pointer-events: all; }
/* Sacred Gita's paintings run wide (roughly 1.85:1 landscape) rather than Gate of
   Noor's portrait plates — app.js sets --art-aspect from the loaded image's own
   naturalWidth/naturalHeight (same pattern as .art-plate-frame's --plate-aspect
   below), so a landscape painting gets a landscape frame instead of a tall portrait
   box with a strip of image and a lot of empty cream underneath it. 1.85 is only the
   fallback before an image has loaded once; max-width widened to match. */
.art-frame {
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: var(--art-aspect, 1.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-deep);
  padding: 0;
  cursor: pointer;
}
.art-image { width: 100%; height: 100%; object-fit: contain; display: block; }
.art-continue { width: auto; padding: 0 24px; }
@media (prefers-reduced-motion: reduce) {
  .art-interlude { transition: none; }
}

/* ── stats row ── */
/* Relative so the footer's buttons stay above the absolutely-positioned writing canvas.
   The canvas can extend past .page's bottom (see positionTranslationChip in app.js), and
   an unpositioned footer loses the hit test there — which swallowed taps on "Mark verse
   done" on a phone. Belt and braces next to the .page height fix. */
.completion-footer { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.completion-footer .tool-btn { width: auto; min-height: 48px; padding: 0 24px; }
@media (max-width: 699px) { .completion-footer .tool-btn { width: 100%; } }
.bottom-panel {
  border-radius: 8px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat { padding: 12px; border-radius: 8px; background: rgba(255, 255, 255, .74); border: 1px solid rgba(232, 113, 44, .1); }
.stat strong { display: block; font-size: 1.35rem; margin-bottom: 2px; }
.stat span { color: var(--muted); font-size: .86rem; }

@media (max-width: 920px) {
  .app { grid-template-columns: 1fr; padding: 10px; }
  .sidebar { order: 2; }
  .journey-screen { order: 2; }
  .workspace { min-height: 66vh; }
  .bottom-panel { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .topbar { align-items: stretch; flex-direction: column; }
  .actions { justify-content: stretch; }
  .actions .tool-btn { flex: 1 1 100px; }
}

/* ══════════════════════════════════════════════
   JOURNEY SCREEN
═══════════════════════════════════════════════ */
.journey-screen { min-width: 0; grid-column: 1 / -1; }
.journey-panel {
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.journey-header { display: flex; align-items: center; gap: 12px; }
.journey-header .tool-btn { width: auto; padding: 0 14px; }
.journey-title { font-size: 1.2rem; font-weight: 800; }

.journey-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: .88rem;
  color: var(--muted);
}
.journey-day { font-weight: 800; font-size: 1.05rem; color: var(--ink); flex-basis: 100%; }
.journey-streak { color: var(--teal); font-weight: 700; }

.journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.journey-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(62, 39, 35, .12);
  background-color: var(--paper-deep);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px;
  color: var(--ink);
  text-align: left;
  transition: border-color .2s, box-shadow .2s;
}
.journey-tile:hover { border-color: var(--teal); }
.journey-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 248, 231, var(--tile-overlay, .88));
  transition: background .3s;
}
.journey-tile.is-complete { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 160, 23, .35); }
.journey-tile-num, .journey-tile-name, .journey-tile-pct { position: relative; z-index: 1; }
.journey-tile-num { font-weight: 800; font-size: .72rem; color: var(--teal); }
.journey-tile-name { display: block; font-size: .7rem; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.journey-tile-pct { display: block; font-size: .62rem; color: var(--muted); margin-top: 2px; }

/* ══════════════════════════════════════════════
   SHEETS — chapter picker / about / membership / account
═══════════════════════════════════════════════ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(62, 39, 35, .35);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  background: var(--panel);
  color: var(--ink);
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 700px) {
  .sheet-overlay { align-items: center; }
  .sheet { border-radius: 8px; max-height: 70vh; }
}
.sheet-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(62, 39, 35, .08); }
.sheet-header .tool-btn { width: 40px; min-height: 40px; padding: 0; flex-shrink: 0; }
.sheet-title { font-size: 1.1rem; font-weight: 800; flex: 1; }
.sheet-search {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(232, 113, 44, .18);
  font-size: max(1rem, 16px); /* Preserve larger user text without iOS focus zoom. */
  color: var(--ink);
  background: #fff;
}
.sheet-body { padding: 16px 20px 22px; font-size: .92rem; line-height: 1.65; color: var(--ink); overflow-y: auto; }
.sheet-body p { margin: 0 0 14px; }
.sheet-attribution { font-size: .78rem; color: var(--muted); }

.chapter-list { overflow-y: auto; padding: 4px 10px 16px; }
.chapter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.chapter-row:hover { background: var(--teal-soft); }
.chapter-row-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--teal-soft);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .8rem;
  flex-shrink: 0;
}
.chapter-row-names { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chapter-row-en { font-weight: 800; font-size: .95rem; }
.chapter-row-meaning { font-size: .78rem; color: var(--muted); }
.chapter-row-sa { font-family: 'Noto Serif Devanagari', serif; font-size: 1.05rem; color: var(--ink); flex-shrink: 0; }

/* ── sign-in / account forms ── */
.field-label { display: block; font-size: .8rem; color: var(--muted); margin: 14px 0 6px; }
.field-input { display: block; width: 100%; margin-bottom: 0; }
.signin-pane { margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(62, 39, 35, .08); }
.google-btn-container { margin: 10px 0; min-height: 40px; display: flex; justify-content: center; }
.code-entry-row { margin-top: 4px; }
.form-error { color: var(--rose); font-size: .82rem; margin-top: 10px !important; }
.form-status { color: var(--teal); font-size: .82rem; margin-top: 10px !important; }
.account-email { font-weight: 800; font-size: 1.02rem; margin-bottom: 2px !important; }
.account-status { color: var(--muted); font-size: .88rem; }

/* ══════════════════════════════════════════════
   WORD TOOLTIP — hover only (pen/mouse, never a press, never touch — see
   canvas-writer.js's pointermove handler). Two lines: pronunciation, then the
   English meaning. pointer-events: none so it can never itself intercept the
   press that's meant for the paper underneath it.
═══════════════════════════════════════════════ */
.word-tooltip {
  box-sizing: border-box;
  overflow: auto;
  position: fixed;
  z-index: 300;
  background: rgba(255, 248, 231, .76);
  border: 1px solid rgba(121, 85, 72, .16);
  border-radius: 8px;
  padding: 7px 12px;
  box-shadow: 0 4px 16px rgba(62, 39, 35, .08);
  max-width: 220px;
  text-align: center;
  pointer-events: none;
}
/* Dark lettering stays readable over the translucent paper-coloured card. */
.word-tooltip-tl { font-style: italic; font-weight: 700; font-size: .88rem; color: #8C4219; }
.word-tooltip-en { font-size: .8rem; color: #3E2723; margin-top: 2px; }
.word-tooltip-sa { font-family: 'Noto Serif Devanagari', serif; font-size: 1.25rem; color: #3E2723; line-height: 1.35; }
.word-tooltip-row { margin-top: 3px; }
.word-tooltip-label { display: block; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: #795548; }
.word-tooltip-hi { font-family: 'Noto Sans Devanagari', sans-serif; font-size: .92rem; color: #3E2723; }
.word-tooltip-hi-tl { font-style: italic; font-size: .8rem; color: #8C4219; }
.word-tooltip-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(121, 85, 72, .18); }
.word-tooltip-letter { display: inline-flex; flex-direction: column; align-items: center; min-width: 26px; }
.word-tooltip-letter .l-sa { font-family: 'Noto Serif Devanagari', serif; font-size: 1.05rem; color: #3E2723; line-height: 1.2; }
.word-tooltip-letter .l-tl { font-size: .68rem; color: #8C4219; font-style: italic; }
.word-tooltip-letter .l-parts { font-size: .6rem; color: #795548; }
.word-tooltip.rich { max-width: 320px; text-align: center; }
.word-tooltip * { pointer-events: none; }
.word-tooltip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The help card no longer floats under the pen. It renders here, in the sidebar. */
.word-help-panel { gap: 8px; }
.word-help-idle { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--muted); }
.word-help-panel.has-help .word-help-idle { display: none; }
.word-help-panel .word-tooltip {
  position: static;
  z-index: auto;
  width: 100%;
  max-width: none;
  max-height: 42vh;
  background: rgba(255, 255, 255, .6);
  box-shadow: none;
}
/* Narrow screens stack the sidebar below the workspace, so a docked card would be
   off-screen. Float it at the bottom instead, and only while a word is active. */
@media (max-width: 920px) {
  .word-help-panel.has-help {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 320;
    margin: 0;
    padding: 10px 14px;
    background: rgba(255, 248, 231, .96);
    border: 1px solid rgba(121, 85, 72, .16);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(62, 39, 35, .14);
  }
  .word-help-panel.has-help .group-title { display: none; }
  .word-help-panel.has-help .word-tooltip { max-height: 32vh; }
}
.check-row { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink); cursor: pointer; }
.check-row input { accent-color: var(--teal); width: 16px; height: 16px; margin: 0; }
.control-label { font-size: .8rem; font-weight: 600; color: var(--muted); }


/* ══════════════════════════════════════════════
   ART PLATE LIGHTBOX — light background, tap anywhere to close, no caption
═══════════════════════════════════════════════ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: zoom-out;
}
.lightbox-image {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}
.lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  background: var(--paper);
  color: var(--teal);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.lightbox-close:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════
   WELCOME — the full painting fills the viewport as the backdrop (object-fit: cover,
   centred, at every size); the title/subtitle/button sit in a compact white panel
   over its lower third, never as a small banner strip above the text.
═══════════════════════════════════════════════ */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  background: var(--paper-deep); /* shows for the instant before the painting decodes */
}
.welcome-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.welcome-card {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
.welcome-content {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 26px 28px 30px;
  text-align: center;
}
.welcome-title {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  color: var(--teal);
  margin: 0 0 4px;
}
.welcome-title-en { font-size: 1.3rem; font-weight: 800; margin: 0 0 14px; }
.welcome-line { color: var(--muted); font-size: .95rem; line-height: 1.55; margin: 0 0 22px; }
.welcome-content .tool-btn { min-height: 48px; }

/* Phone: the panel runs edge to edge along the bottom instead of floating as a
   centred card with side margins. */
@media (max-width: 700px) {
  .welcome-card { padding: 0; }
  .welcome-content { max-width: none; border-radius: 14px 14px 0 0; }
}

/* ══════════════════════════════════════════════
   SOUNDS — music playlist + ambience loops, sidebar panel (see js/sounds.js). Built
   entirely by JS into #soundsPanel; empty and invisible until playlist.json has
   content, so there is nothing here to hide/show by hand. Reuses .group /
   .group-title / .tool-btn / the global range-input styling above.
═══════════════════════════════════════════════ */
.sounds-subtitle { margin-top: -4px !important; }
.sound-music-row { display: flex; gap: 8px; }
.sound-music-row .sound-toggle { flex: 1; }
.sound-next-btn { flex: 0 0 auto; width: auto; padding: 0 14px; }
.sound-track-title {
  color: var(--muted);
  font-size: .82rem;
  margin-top: -4px !important;
  min-height: 1.2em; /* stable height whether or not a title is showing yet */
}
.sound-ambience-list { display: grid; gap: 8px; }
.sound-ambience-row { display: flex; align-items: center; gap: 10px; }
.sound-ambience-row .sound-toggle { flex: 0 0 auto; width: auto; padding: 0 12px; }
.sound-ambience-row input[type="range"] { flex: 1; }
.sound-icon { display: inline-flex; color: inherit; }
.tool-btn.sound-toggle[aria-pressed="true"] {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal);
}

/* ══════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .journey-tile, .tool-btn, .meter span { transition: none; }
}

/* Compact, accessible shared painting reactions. */
.art-reactions { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:8px 12px; }
.art-reactions[hidden] { display:none; }
.art-reaction { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; min-width:64px; padding:8px 12px; border:1px solid var(--line); border-radius:16px; background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; }
.art-reaction[aria-pressed="true"] { color:var(--teal); border-color:var(--teal); background:var(--paper-deep); }
.art-reaction:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.art-reaction:disabled { cursor:wait; opacity:.6; }
.reaction-count { font-variant-numeric:tabular-nums; }
.reaction-status { flex-basis:100%; text-align:center; font-size:12px; color:var(--muted); }