/* Redesign R1 (docs/REDESIGN.md). Everything is scoped to html.rd, which only
   bridge-hubs.js and myvoice-redesign.js set when the dev switch is on. */

/* ---------- Bridge: four hubs ---------- */
.rd .tabs { display: none; }
.rd-hubs { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5) var(--s3); border-right: 1px solid var(--line); }
.rd-hub { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s4); border: 0; border-radius: 12px; background: none; color: var(--ink-soft); font: 600 var(--fs-sm) var(--font); text-align: left; cursor: pointer; }
.rd-hub svg { width: 22px; height: 22px; flex: none; }
.rd-hub:hover { background: var(--paper); color: var(--ink); }
.rd-hub[aria-current="page"] { background: var(--dusk); color: #fff; font-weight: 800; }
:root[data-theme="contrast"] .rd-hub[aria-current="page"] { outline: 2px solid var(--ink); }

.rd-short { display: none; }
@media (max-width: 760px) { .rd .rd-short { display: inline; } }
.rd-sub { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.rd-sub[hidden] { display: none; }
.rd-chip { min-height: 44px; padding: 0 var(--s4); border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--paper-raised); color: var(--ink); font: 700 var(--fs-xs) var(--font); cursor: pointer; }
.rd-chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

@media (max-width: 760px) {
  /* A strip that scrolls left and right: every hub fills the width on a big
     phone, and on a small one (or with more hubs later) you swipe for the rest. */
  .rd-hubs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; flex-direction: row; gap: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    padding: var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));
    background: var(--paper); border-right: 0; border-top: 1px solid var(--line);
  }
  .rd-hubs::-webkit-scrollbar { display: none; }
  .rd-hub { flex: 1 0 76px; scroll-snap-align: center; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 0; font-size: 12px; text-align: center; }
  /* Header fits a 360 px phone: short labels, smaller mark, no name line. */
  .rd .top { min-width: 0; }
  .rd .logo img { width: 32px; height: 32px; }
  .rd .logo-word { white-space: nowrap; font-size: var(--fs-sm); }
  .rd .top .who { display: none; }
  .rd .top .pill-link { min-height: 40px; flex: none; }
  .rd #helpLink { margin-left: auto; }
  .rd .rd-long { display: none; }
  .rd-hub[aria-current="page"] { background: none; color: var(--ink); }
  .rd-hub[aria-current="page"] svg { color: var(--ember-deep); }
  .rd main { padding-bottom: 104px; }
  .rd .top { gap: var(--s2); padding: var(--s2) var(--s3); }
  .rd .top .pill-link { padding: 8px 12px; font-size: var(--fs-xs); white-space: nowrap; }
  .rd-sub { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s1); }
  .rd-chip { flex: none; }
}

.rd .panel[id^="tab-"]:not([hidden]) { animation: rd-in 140ms ease-out; }
@keyframes rd-in { from { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .rd .panel[id^="tab-"]:not([hidden]) { animation: none; } }
.rd .still .panel[id^="tab-"] { animation: none; }

/* ---------- My Voice: Now/Next ribbon ---------- */
.rd-nownext { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; width: 100%; min-height: 56px; margin-bottom: var(--s3); padding: var(--s2) var(--s4); border-radius: var(--r-chip); border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: 400 var(--fs-md) var(--font); text-align: left; cursor: pointer; }
.rd-nownext[hidden] { display: none; }
.rd-nownext svg { width: 22px; height: 22px; color: var(--ink-soft); }
.rd-k { font-weight: 700; color: var(--ink-soft); font-size: var(--fs-sm); }
.rd-step { display: inline-flex; align-items: center; gap: var(--s2); padding: 2px var(--s3); border-radius: var(--r-chip); background: var(--wc-action-tint); font-weight: 800; }
.rd-step + svg + .rd-k + .rd-step { background: var(--wc-folder-tint); font-weight: 700; }
@media (max-width: 760px) {
  .rd-nownext { flex-wrap: nowrap; gap: var(--s2); min-height: 48px; padding: var(--s1) var(--s3); font-size: var(--fs-sm); overflow: hidden; }
  .rd-nownext .rd-k { font-size: var(--fs-xs); }
  .rd-step { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* The "My world" book lives in Play now; the toilet button stays on Talk. */
.rd #ppEntry #ppWorldBtn { display: none; }

/* ---------- My Voice: Play ---------- */
.rd-play .rd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); align-items: start; }
.rd-play .rd-card:not([hidden]) { display: block; }
.rd-play details.rd-card > summary { pointer-events: none; list-style: none; }
.rd-play details.rd-card > summary::-webkit-details-marker { display: none; }
.rd-world { min-height: 120px; display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border-radius: var(--r-sheet); border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: 800 var(--fs-md) var(--font); cursor: pointer; }
.rd-play .rd-world:not([hidden]) { display: flex; }
.rd-wico { font-size: 48px; line-height: 1; }
.rd-empty { color: var(--ink-soft); font-size: var(--fs-md); }

.rd-bridge { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: var(--r-chip); background: var(--dusk); color: #fff; font: 800 var(--fs-sm) var(--font); text-decoration: none; }
.rd-bridge svg { width: 22px; height: 22px; }
.rd .care-head .rd-bridge { margin-left: auto; margin-right: var(--s2); }
:root[data-theme="contrast"] .rd-bridge { outline: 2px solid var(--ink); }

/* R2: role view picker, Log button and sheet, handoff card */
.rd-view { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s3); font-size: .9rem; color: var(--ink-soft); }
.rd-view select { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); padding: 0 10px; background: var(--paper-raised); color: var(--ink); font: inherit; }
.rd-log { position: fixed; right: 20px; bottom: 24px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--dusk); color: #fff; font-family: var(--font); font-weight: 700; font-size: 1.05rem; box-shadow: 0 8px 24px rgba(0,0,0,.22); cursor: pointer; }
.rd-log svg { width: 22px; height: 22px; }
.rd-log:focus-visible { outline: 3px solid var(--lumen); outline-offset: 3px; }
.rd-logchoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); margin: var(--s3) 0; }
.rd-logchoices .btn { min-height: 56px; justify-content: center; }
.rd-hand { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); margin: 0; }
.rd-hand dt { font-size: .85rem; color: var(--ink-soft); }
.rd-hand dd { margin: 2px 0 0; font-weight: 600; }
html:not(.rd) .rd-log { display: none; }
@media (max-width: 760px) {
  .rd-view { flex-direction: row; align-items: center; gap: var(--s2); margin: calc(-1 * var(--s2)) 0 var(--s3); }
  .rd-log { bottom: 88px; right: 14px; }
}
/* ---------- v0.13 look (DESIGN.md): quiet sky, dark bands frame, lit = chosen ---------- */
/* Sky: two close stops plus a static grain; never animated behind words. */
html.rd body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .15 0 0 0 0 .19 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--sky-top), var(--sky-low)) fixed;
  background-blend-mode: soft-light, normal;
}
:root[data-theme="contrast"].rd body { background: #000; }

/* My Voice: the lantern rail, on the same band as the sentence strip. */
.rd .nav { background: var(--dusk); border-radius: var(--r-sheet); margin: var(--s3) 0 var(--s3) var(--s3); padding: var(--s3) var(--s2); }
.rd .nav-btn { color: var(--band-ink); font-weight: 700; }
.rd .nav-btn:hover { color: #fff; }
.rd .nav-btn[aria-current="page"] { background: var(--lit); color: var(--lit-ink); box-shadow: none; font-weight: 800; }
.rd .nav-care .hold-ring { inset: 2px; }
@media (max-width: 760px) {
  .rd .nav { margin: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-top: 0; background: var(--dusk); min-height: var(--nav-h); }
}

/* Bridge: paper hub bar (a caregiver tool never looks like the child's rail); lit marks the current hub. */
.rd-hub[aria-current="page"] { background: var(--lit); color: var(--lit-ink); }
@media (max-width: 760px) {
  .rd-hub::before { content: ""; width: 32px; height: var(--indicator); border-radius: 999px; margin-bottom: 2px; background: transparent; transition: background var(--t-ui) var(--ease); }
  .rd-hub[aria-current="page"] { background: none; color: var(--ink); }
  .rd-hub[aria-current="page"]::before { background: var(--lit); }
  .rd-hub[aria-current="page"] svg { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .rd-hub::before { transition: none; } }