/**
 * Command bar — bottom control center, shared by every page (built by
 * js/command-bar.js). A single non-wrapping row of uniform icon buttons, so
 * it never breaks into a double row on small windows. The scene picker opens a
 * centered modal (styles below); the list items reuse .scene-menu-item
 * (css/rapid-access.css, loaded on the reader).
 */

/* When hidden (library / info pages have no bottom controls), fully collapse —
   the display:flex below otherwise overrides the [hidden] attribute and leaves a
   thin strip + safe-area padding (Joshua 2026-06-11: reclaim that space). */
.command-bar[hidden] { display: none !important; }
.command-bar {
  grid-area: rapid;                /* reader grid; ignored on home/about flex */
  /* On the flex .page layout (Library / About) the bar is a flex child; with
     overflow:hidden it would otherwise shrink below its content when the page
     content is tall (long About text), squeezing the icons. Never shrink. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;         /* icons centered in the bar */
  gap: 0.3rem;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 0.25rem clamp(0.3rem, 1.5vw, 1.2rem);
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
  /* A brass-edged panel mirroring the header: elevated surface + a faint golden
     sheen toward the top hairline + a soft shadow lifting it off the content. */
  background-color: var(--canvas-elev);
  background-image: linear-gradient(180deg, rgba(201, 164, 100, 0.07), rgba(201, 164, 100, 0) 60%);
  border-top: 1px solid var(--brass);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.22);
  position: relative;
  z-index: 2;
}

/* Uniform icon button — anchors (home/about) + buttons (toggles/nav) share it.
   Sized to fit TEN buttons on a small iPhone (see media queries below). */
.cb-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-soft);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease, background 140ms ease;
}
/* flex:0 0 auto + an explicit svg size stop the Safari/flexbox SVG width-collapse
   — without them the icons shrink to a sliver / vanish on iOS. */
.cb-btn svg { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.cb-btn:hover { color: var(--brass); background: rgba(201, 164, 100, 0.10); }
.cb-btn:active { background: rgba(201, 164, 100, 0.18); }
.cb-btn:disabled { opacity: 0.3; cursor: default; }
.cb-btn:disabled:hover { color: var(--text-soft); background: transparent; }
.cb-btn.is-active { color: var(--brass); }                 /* current page */
.cb-btn[aria-expanded="true"] { color: var(--brass); background: rgba(201, 164, 100, 0.12); }

/* Toggle ON (furigana shown / English shown) — brass, like an enabled switch. */
.cb-btn.cb-on { color: var(--brass); background: rgba(201, 164, 100, 0.14); }

/* Goi/Kanji text-label switch — a compact label instead of an icon. Wrapped in
   a subtle chip outline so it reads as a deliberate labeled toggle sitting among
   the icons, rather than a stray word. Height matches the icon buttons. */
.cb-btn.cb-textbtn {
  width: auto;
  min-width: 44px;
  height: 30px;
  padding: 0 0.55rem;
  color: var(--brass);
  border: 1px solid rgba(201, 164, 100, 0.4);
  border-radius: 999px;
}
.cb-btn.cb-textbtn:hover { background: rgba(201, 164, 100, 0.12); border-color: var(--brass); }
.cb-btn.cb-textbtn:active { background: rgba(201, 164, 100, 0.2); }
.cb-btn.cb-textbtn .cb-text {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Goi / Kanji link mode — two chips. The inactive one is muted; the active one
   (cb-on) lights up brass so the current link mode reads at a glance. */
.cb-btn.cb-linkbtn { color: var(--text-soft); border-color: var(--rule); }
.cb-btn.cb-linkbtn.cb-on {
  color: var(--brass);
  border-color: var(--brass);
  background: rgba(201, 164, 100, 0.16);
}

/* Hide-panel / focus toggle — the most-used reading control, so it reads as a
   distinct primary action: brass icon on a soft brass pill at ALL times (the
   nav icons stay muted). Solid brass when the panel is hidden (pressed). */
.cb-btn.cb-prominent {
  color: var(--brass);
  background: rgba(201, 164, 100, 0.16);
}
.cb-btn.cb-prominent:hover { background: rgba(201, 164, 100, 0.26); }
.cb-btn.cb-prominent[aria-pressed="true"] {
  color: #1a1d2c;
  background: var(--brass);
}

/* Narrow phones — shrink so all TEN buttons fit one centered row. */
@media (max-width: 480px) {
  .cb-btn { width: 40px; height: 40px; }
  .cb-btn svg { width: 23px; height: 23px; }
  .command-bar { gap: 0.2rem; padding-left: 0.3rem; padding-right: 0.3rem; }
}
@media (max-width: 400px) {
  .cb-btn { width: 34px; height: 34px; border-radius: 10px; }
  .cb-btn svg { width: 20px; height: 20px; }
  .cb-btn.cb-textbtn { min-width: 34px; padding: 0 0.25rem; }
  .cb-btn.cb-textbtn .cb-text { font-size: 0.66rem; }
  .command-bar { gap: 0.12rem; }
}
@media (max-width: 345px) {
  .cb-btn { width: 31px; height: 31px; }
  .cb-btn svg { width: 18px; height: 18px; }
  .cb-btn.cb-textbtn .cb-text { font-size: 0.6rem; }
}

/* (Scene-picker modal styles removed — selection is now library.html.) */

/* ── Plain book (any body[data-booklang]) — the English manuscript (lang:"en")
   AND the native Japanese edition (lang:"ja-native") ──
   A plain-text book has no tiles / furigana / breakdown / audio, so the
   Japanese-only affordances are hidden — they would be inert (or, for voice,
   mispronounce). Set in js/main.js on chapter load for any lang ≠ "ja". Generic
   controls (Home, Library, prev/next, scrubber, theme, text-size, info) stay. */
body[data-booklang] .cb-linkbtn,          /* Goi / Kanji link mode */
body[data-booklang] #furigana-toggle,     /* Furigana on/off */
body[data-booklang] #english-toggle,      /* JP+EN translation toggle */
body[data-booklang] #scene-read,          /* header "read this scene" speaker */
body[data-booklang] .reader .sentence-voice,   /* per-sentence speaker */
body[data-booklang] .reader .sentence-bunpou { /* per-sentence breakdown book */
  display: none !important;
}