/* theme.css — one stylesheet for both directions.
 * NEVER use left/right/margin-left/text-align:right. Logical properties only.
 * See spec/03-i18n-and-rtl.md and spec/05-visual-design.md.
 *
 * Palette: Camp Half-Blood at night. Deep night-sea background, camp-orange
 * as the primary accent (the T-shirt color — replaces bronze-as-primary),
 * bronze demoted to secondary/structural (borders, rings), Greek-fire green
 * for success. Fonts are real, vendored, self-hosted (assets/css/fonts.css,
 * linked before this file) — see that file's header for why "no webfonts"
 * meant no *network* fonts, not no fonts.
 */

:root {
  --night-sea:  #06182b;
  --sound:      #0e3352;
  --sound-lit:  #164a76;
  --marble:     #f4f1ea;
  --marble-dim: #cfc9bd;
  --camp-orange:#e8622c;
  --bronze:     #c98b3a;
  --bronze-lit: #e8b563;
  --gold:       #ffd166;
  --greek-fire: #5fd68a;
  --blood:      #c1483f;
  --blood-lit:  #ffb4ad;
  --ink:        #0a1119;
  --ink-on-accent: #14110a;
  --ink-on-fire:   #06180f;
  --ink-on-gold:   #2b2005;
  --cabin:      var(--camp-orange);

  --font-ui: "Assistant", "Segoe UI", "Arial Hebrew", "David", system-ui, sans-serif;
  --font-display: "Suez One", Georgia, serif;
  --font-serif: "Frank Ruhl Libre", Georgia, serif;
  --font-code: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --radius: 12px;
  --line: 1px solid color-mix(in srgb, var(--bronze) 28%, transparent);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--sound-lit) 0%, transparent 60%),
    var(--night-sea);
  color: var(--marble);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.7;
}

html[lang="en"] body { line-height: 1.6; }

#app {
  max-width: 860px;
  margin: 0 auto;
  padding-inline: 1rem;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.3; margin: 0 0 .4em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }

/* Hebrew has no capitals and no italic tradition — never transform it. */
html[lang="he"] * { text-transform: none !important; font-style: normal; }

a { color: var(--bronze-lit); }

.muted { color: var(--marble-dim); }
.warn-line { color: var(--gold); }
.prose { margin: 0 0 1em; font-family: var(--font-serif); }

/* ---------- code is always LTR ---------- */

.c, code, pre, kbd, .code-block, .editor, .output, .savearea {
  font-family: var(--font-code);
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

.c {
  background: rgba(0, 0, 0, .35);
  border: 1px solid color-mix(in srgb, var(--bronze) 30%, transparent);
  border-radius: 5px;
  padding: .05em .35em;
  font-size: .92em;
  /* Must wrap: a long inline snippet in a brief overflows a 390px phone if it
   * is nowrap. Verified by tools/smoke-test.mjs. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-block {
  background: var(--ink);
  border: var(--line);
  border-top: 3px solid var(--bronze);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin: 0 0 .6rem;
  overflow-x: auto;
  font-size: .95rem;
  line-height: 1.55;
  white-space: pre;
}

/* ---------- topbar / HUD ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .75rem 0;
  margin-bottom: 1rem;
  border-bottom: var(--line);
  position: sticky;
  top: 0;
  /* Solid, not a fade: the bar wraps to two or three rows on a phone, and a
   * gradient lets the page text show through the wrapped part. */
  background: var(--night-sea);
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-family: var(--font-display); }
.brand-mark { font-size: 1.3rem; color: var(--camp-orange); }

.hud {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex: 1 1 260px;
  flex-wrap: wrap;
}
.hud-identity { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
.hud-cabin { font-size: 1.2rem; }
.hud-xp { flex: 1 1 140px; min-width: 120px; }
.hud-xp-label {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: var(--marble-dim); margin-bottom: .2rem;
}
.xpbar {
  height: 7px; border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.xpbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cabin), var(--bronze-lit));
  transition: width .4s ease;
}
.hud-res { display: flex; gap: .6rem; font-size: .9rem; }
.res { white-space: nowrap; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; fill: currentColor; }

/* ---------- buttons ---------- */

.btn {
  font: inherit;
  font-family: var(--font-ui);
  font-size: .95rem;
  border-radius: 99px;
  border: 1px solid transparent;
  padding: .5rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  background: var(--cabin);
  color: var(--ink-on-accent);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.btn-ghost {
  background: transparent;
  color: var(--marble);
  border-color: color-mix(in srgb, var(--bronze) 50%, transparent);
  font-weight: 600;
}
.btn-hint { background: transparent; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.btn-small { min-height: 36px; padding: .3rem .8rem; }
.btn-back { font-size: .9rem; }

/* Directional glyph in the back link must follow the reading direction. */
[dir="ltr"] .btn-back { transform: scaleX(1); }

/* ---------- lesson structure ---------- */

.lesson-title { margin-bottom: 1.5rem; }
.lesson-eyebrow { color: var(--bronze-lit); font-size: .85rem; letter-spacing: 0; }
.lesson-sub { color: var(--marble-dim); }

.beat { margin: 0 0 2.5rem; }
.beat-title {
  font-size: 1.25rem;
  color: var(--bronze-lit);
  border-bottom: var(--line);
  padding-bottom: .3rem;
  margin-bottom: 1rem;
}

/* teaching cards */
.teach-code { margin: 0 0 1.4rem; }
.caption { color: var(--marble-dim); font-size: .92rem; margin-bottom: .4rem; }

.callout {
  border-inline-start: 4px solid var(--bronze);
  background: rgba(255, 255, 255, .05);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin: 0 0 1.4rem;
}
.callout-warn { border-inline-start-color: var(--blood); }
.callout-myth { border-inline-start-color: var(--gold); }
.callout-title { font-weight: 700; margin-bottom: .25rem; font-family: var(--font-ui); }
.callout-body { font-family: var(--font-serif); }

.compare { display: grid; gap: .8rem; margin: 0 0 1.4rem; }
@media (min-width: 720px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-side { background: rgba(0, 0, 0, .2); border-radius: var(--radius); padding: .7rem; }
.compare-label { font-weight: 700; margin-bottom: .4rem; font-size: .92rem; }
.compare-bad .compare-label { color: var(--blood); }
.compare-good .compare-label { color: var(--greek-fire); }
.compare-result {
  margin: 0; padding: .5rem .7rem; font-size: .85rem;
  background: rgba(0, 0, 0, .35); border-radius: 8px; color: var(--marble-dim);
  overflow-x: auto;
}

.teach-error {
  border: 1px dashed color-mix(in srgb, var(--blood) 60%, transparent);
  border-radius: var(--radius);
  padding: 1rem;
  margin: 0 0 1.4rem;
  background: color-mix(in srgb, var(--blood) 7%, transparent);
}
.teach-error-title { font-weight: 700; margin-bottom: .5rem; font-family: var(--font-ui); }

/* ---------- editor + runner ---------- */

.runner { margin: 0 0 1rem; }

.editor {
  display: flex;
  background: var(--ink);
  border: var(--line);
  border-top: 3px solid var(--cabin);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: .6rem;
}
.editor-gutter {
  flex: 0 0 auto;
  padding: .9rem .5rem .9rem .8rem;
  color: rgba(244, 241, 234, .35);
  font-family: var(--font-code);
  font-size: .95rem;
  line-height: 1.55;
  white-space: pre;
  text-align: end;
  user-select: none;
  background: rgba(0, 0, 0, .25);
}
.editor-area {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: var(--marble);
  font-family: var(--font-code);
  font-size: .95rem;
  line-height: 1.55;
  padding: .9rem 1rem;
  min-height: 80px;
  overflow: hidden;
  tab-size: 4;
}
.editor-area:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }

.runner-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }

.output {
  background: var(--ink);
  border: var(--line);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  min-height: 2.6rem;
  font-size: .93rem;
}
.output.has-error { border-color: color-mix(in srgb, var(--blood) 70%, transparent); }
.output-body { margin: 0; white-space: pre-wrap; word-break: break-word; }

.err { margin-top: .6rem; }
.err-title { color: var(--blood); font-weight: 700; margin-bottom: .35rem; font-family: var(--font-ui); }
.err-real {
  margin: 0 0 .6rem;
  padding: .5rem .7rem;
  background: color-mix(in srgb, var(--blood) 14%, transparent);
  border-radius: 8px;
  color: var(--blood-lit);
  white-space: pre-wrap;
  overflow-x: auto;
}
/* The Hebrew explanation is prose, so it follows the page direction. */
.err-why { direction: inherit; text-align: start; font-family: var(--font-ui); unicode-bidi: normal; }
.err-why-title { font-weight: 700; font-size: .9rem; color: var(--gold); }
.err-why-body { font-size: .95rem; }

.input-ask {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-top: .7rem; padding: .6rem;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 10px;
}
.input-ask-label { font-family: var(--font-code); font-size: .9rem; }
.input-ask-field {
  flex: 1 1 140px; min-width: 120px; min-height: 40px;
  background: var(--ink); color: var(--marble);
  border: 1px solid color-mix(in srgb, var(--bronze) 50%, transparent); border-radius: 8px;
  padding: .4rem .6rem; font-family: var(--font-code);
}

/* ---------- exercises ---------- */

.exercise {
  background: rgba(255, 255, 255, .04);
  border: var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2rem;
}
.exercise.is-solved { border-color: color-mix(in srgb, var(--greek-fire) 60%, transparent); }
.exercise-quest { border-width: 2px; border-color: var(--bronze); }

.exercise-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.exercise-num {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cabin); color: var(--ink-on-accent); font-weight: 800; font-size: .9rem;
}
.exercise.is-solved .exercise-num { background: var(--greek-fire); color: var(--ink-on-fire); }
.exercise-title { margin: 0; flex: 1 1 auto; font-size: 1.05rem; font-family: var(--font-display); }
.exercise-reward { color: var(--gold); font-size: .85rem; white-space: nowrap; }
.exercise-brief { margin-bottom: .8rem; }

.verdict { margin-top: .6rem; font-size: .95rem; min-height: 1.2em; }
.verdict.is-pass { color: var(--greek-fire); }
.verdict.is-fail { color: var(--gold); }
.next-battle-btn { margin-top: .6rem; }

/* locked (not-yet-reached) battle */
.exercise-locked { opacity: .6; }
.exercise-locked .exercise-num { background: rgba(255, 255, 255, .12); color: var(--marble-dim); font-size: 1rem; }
.locked-note { margin: 0; color: var(--marble-dim); font-size: .9rem; }

.hints { margin-top: .6rem; display: grid; gap: .5rem; }
.hint {
  display: flex; gap: .5rem; align-items: flex-start;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border-inline-start: 3px solid var(--gold);
  border-radius: 8px; padding: .5rem .7rem; font-size: .95rem;
}
.hint-num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); color: var(--ink-on-gold);
  display: grid; place-items: center; font-size: .75rem; font-weight: 800;
}
.solution { margin-top: .4rem; }
.solution-title { font-weight: 700; color: var(--gold); margin-bottom: .35rem; }

/* boss */
.boss { margin: .4rem 0 .9rem; }
.boss-name { font-weight: 700; margin-bottom: .35rem; }
.boss-track { display: flex; gap: 4px; }
.boss-seg {
  flex: 1 1 0; height: 12px; border-radius: 3px;
  background: var(--blood);
  transition: background .5s ease, opacity .5s ease;
}
.boss-seg.gone { background: rgba(255, 255, 255, .14); opacity: .5; }
/* Battle bosses drain a continuous bar driven by the monster's own HP. */
.boss-track-hp {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.boss-fill {
  height: 100%;
  width: 100%;
  background: var(--blood);
  transition: width .2s linear;
}
.boss-tag {
  background: var(--blood); color: #fff; font-size: .65rem; font-weight: 800;
  padding: .05em .45em; border-radius: 4px; margin-inline-start: .4rem;
  vertical-align: middle;
}

/* ---------- battle ---------- */

/* The board is a diagram, not prose: never mirrored in Hebrew, because its
 * coordinates must agree with what she typed. See spec/09-battle-game.md. */
.battle-host {
  direction: ltr;
  margin: 0 0 .8rem;
  background: var(--ink);
  border: var(--line);
  border-top: 3px solid var(--cabin);
  border-radius: var(--radius);
  padding: .6rem;
  overflow-x: auto;
}
.battle-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  image-rendering: auto;
}
.battle-hud {
  display: flex;
  gap: .9rem;
  justify-content: center;
  font-family: var(--font-code);
  font-size: .85rem;
  color: var(--marble-dim);
  margin-bottom: .4rem;
}
.bhud { white-space: nowrap; }
.battle-controls {
  display: flex;
  gap: .4rem;
  justify-content: center;
  margin-top: .4rem;
}
.battle-controls .btn { min-height: 34px; padding: .2rem .7rem; font-size: .85rem; }
.exercise-battle { border-color: color-mix(in srgb, var(--bronze) 55%, transparent); }

/* ---------- recap ---------- */

.complete { display: none; }
.complete.show { display: block; }
.item-card {
  display: flex; gap: .9rem; align-items: center;
  background: linear-gradient(color-mix(in srgb, var(--gold) 16%, transparent), color-mix(in srgb, var(--gold) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1rem;
}
.item-icon { font-size: 2.2rem; }
.item-label { font-size: .8rem; color: var(--gold); }
.item-name { font-weight: 700; font-size: 1.1rem; font-family: var(--font-display); }
.item-desc { color: var(--marble-dim); font-size: .95rem; }

.recap-list { margin: 0 0 1.2rem; padding-inline-start: 1.2rem; font-family: var(--font-serif); }
.recap-list li { margin-bottom: .35rem; }

.next-box {
  background: rgba(255, 255, 255, .05);
  border-radius: var(--radius);
  padding: 1rem;
  border-inline-start: 4px solid var(--cabin);
}
.next-label { font-size: .8rem; color: var(--bronze-lit); margin-bottom: .3rem; }

/* ---------- hub ---------- */

.hero { text-align: center; padding: 1.5rem 0 2rem; }
.hero h1 { font-size: 2.6rem; margin-bottom: .2rem; }
.hero-sub { color: var(--marble-dim); }
.hero-small { padding: .5rem 0 1.5rem; }

.act { margin-bottom: 2rem; }
.act-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .7rem; }
.act-num {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--bronze); color: var(--bronze-lit); font-weight: 800;
}
.act-title { margin: 0; font-size: 1.2rem; }
.act-scene { color: var(--marble-dim); font-size: .85rem; }

.stops { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.stop-link {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem;
  background: rgba(255, 255, 255, .04);
  border: var(--line);
  border-radius: var(--radius);
  color: inherit; text-decoration: none;
  min-height: 56px;
}
a.stop-link:hover { background: rgba(255, 255, 255, .09); border-color: var(--bronze); }
.stop.is-done .stop-link { border-color: color-mix(in srgb, var(--greek-fire) 55%, transparent); }
.stop.is-locked .stop-link, .stop.is-soon .stop-link { opacity: .5; }
.stop-icon { font-size: 1.3rem; flex: 0 0 auto; }
.stop-text { flex: 1 1 auto; min-width: 0; }
.stop-title { font-weight: 600; }
.stop-teaches { color: var(--marble-dim); font-size: .85rem; }
.stop-status { font-size: .8rem; color: var(--bronze-lit); white-space: nowrap; }
.stop.is-done .stop-status { color: var(--greek-fire); }

.pack, .savebox { margin: 2rem 0; }
.pack-title { font-size: 1.1rem; color: var(--bronze-lit); font-family: var(--font-display); }
.pack-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.pack-item {
  display: flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .06); border-radius: 99px;
  padding: .35rem .8rem; font-size: .9rem;
}
.achievements { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.ach {
  background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 99px; padding: .25rem .7rem; font-size: .82rem;
}
.savearea {
  width: 100%; min-height: 90px; margin-top: .5rem;
  background: var(--ink); color: var(--marble-dim);
  border: var(--line); border-radius: var(--radius);
  padding: .6rem; font-size: .8rem;
}

/* claiming */
.claim {
  background: rgba(255, 255, 255, .05);
  border: var(--line); border-radius: var(--radius);
  padding: 1.5rem; text-align: center; max-width: 560px; margin: 0 auto;
}
.claim-step { color: var(--marble-dim); font-size: .85rem; }
.claim-title { font-size: 1.3rem; font-family: var(--font-display); }
.claim-options { display: grid; gap: .5rem; margin-top: 1rem; }
.claim-option {
  font: inherit; font-family: var(--font-ui); cursor: pointer; min-height: 48px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid color-mix(in srgb, var(--bronze) 45%, transparent);
  border-radius: var(--radius);
  color: var(--marble); padding: .6rem 1rem;
}
.claim-option:hover { background: rgba(255, 255, 255, .12); border-color: var(--bronze); }
.claim-option:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.claim-name { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.claim-input {
  flex: 1 1 180px; min-height: 44px; padding: .5rem .8rem;
  background: var(--ink); color: var(--marble);
  border: 1px solid color-mix(in srgb, var(--bronze) 50%, transparent); border-radius: 10px; font: inherit;
}
.claim-symbol { font-size: 3.5rem; }
.claim-label { color: var(--marble-dim); font-size: .9rem; }
.claim-god { font-size: 2.1rem; color: var(--gold); margin: .1em 0 .3em; font-family: var(--font-display); }
.claim-trait { color: var(--marble-dim); }

/* ---------- steps (single-screen Next/Back navigation) ---------- */

.step-viewport {
  position: relative;
  overflow-x: hidden;
}

.step.step-anim {
  transform: translateX(var(--step-offset, 0));
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
.step.step-anim.step-settled { transform: translateX(0); opacity: 1; }

.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.2rem 0 2rem;
}

/* the bead cord: a thin line with a bead per step, echoing the leather cord
 * and clay beads Camp Half-Blood campers earn one per summer (lesson 2,
 * "The Camp Necklace") */
.step-dots {
  --cord: color-mix(in srgb, var(--bronze) 45%, transparent);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.step-dots::before {
  content: "";
  position: absolute;
  inset-inline: .5rem;
  top: 50%;
  height: 1px;
  background: var(--cord);
  z-index: 0;
}
.step-dot {
  position: relative;
  z-index: 1;
  width: 9px; height: 9px; border-radius: 99px;
  background: var(--sound-lit);
  border: 1px solid var(--cord);
  transition: width .2s ease, height .2s ease, background .2s ease, border-color .2s ease;
}
.step-dot.is-current {
  width: 15px; height: 15px;
  background: var(--cabin);
  border-color: var(--cabin);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cabin) 25%, transparent);
}
.step-dot.is-locked { background: var(--night-sea); border-color: color-mix(in srgb, var(--bronze) 20%, transparent); }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  background: var(--sound-lit);
  border: 1px solid var(--bronze);
  border-radius: 99px;
  padding: .6rem 1.1rem;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
  max-width: calc(100vw - 2rem);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-level { background: var(--bronze); color: var(--ink-on-accent); }
.toast-item { background: var(--gold); color: var(--ink-on-gold); }
.toast-achievement { background: var(--greek-fire); color: var(--ink-on-fire); }

/* ---------- rest card ---------- */

/* Sits in the corner opposite the toast and never covers the editor: a break
 * is an offer, not a modal. Nothing about it blocks the page. */
.rest-card {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: 49;
  width: min(320px, calc(100vw - 2rem));
  background: var(--sound-lit);
  border: 1px solid var(--bronze);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.rest-card p { margin: 0 0 .5rem; }
.rest-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold);
}
.rest-body { font-size: .95rem; }
.rest-note {
  font-size: .85rem;
  color: var(--marble-dim);
}
.rest-clock {
  font-family: var(--font-code);
  font-size: 2rem;
  line-height: 1.2;
  color: var(--marble);
  font-variant-numeric: tabular-nums;
}
.rest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: .3rem;
}
/* Room to scroll whatever the card is sitting on top of into view. */
body.has-rest-card { padding-block-end: 16rem; }

/* ---------- settings ---------- */

.setting-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-block-start: .5rem;
}
.setting-row input { width: 18px; height: 18px; accent-color: var(--camp-orange); }
.setting-row label { cursor: pointer; }

/* ---------- responsive ---------- */

@media (max-width: 719px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 2rem; }
  .topbar { gap: .5rem; }
  .btn { padding: .5rem .85rem; }
  .exercise { padding: .85rem .8rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}