:root {
  --gold: #8a5a32;
  --gold-dim: #a56e3e;
  --flame: #8a5a32;
  --copper: #8a5a32;
  --paper: #f3eee4;
  --ink: #1a1714;
  --muted: #5c5348;
  --panel: #faf6ee;
  --line: rgba(26, 23, 20, 0.18);
  --lift: #fffdf8;
  --serif: "Fraunces", "Times New Roman", serif;
  --sans: "Outfit", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html {
  background: var(--paper);
  font-size: calc(17px * var(--text-scale, 1));
  --copy-max: 75%;
  --point-size: 1.78rem;
  --through-size: 1.38rem;
}
html[data-copy-span="small"] {
  --copy-max: 33%;
  --point-size: 1.55rem;
  --through-size: 1.28rem;
}
html[data-copy-span="medium"] {
  --copy-max: 75%;
  --point-size: 1.78rem;
  --through-size: 1.38rem;
}
html[data-copy-span="large"] {
  --copy-max: 100%;
  --point-size: 1.95rem;
  --through-size: 1.5rem;
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

#app { position: relative; z-index: 3; min-height: 100vh; }

button, input, textarea, select {
  font-family: inherit;
  color: inherit;
}
button { cursor: pointer; }
a { color: var(--gold); }

.hud {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hud-brand, .hud-link {
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hud-link:hover { opacity: 1; color: var(--gold); }
.hud-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 1 auto;
  min-width: 0;
}
.edit-chrome-slot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.peak {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 14rem;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 2px;
  padding: 6px 12px;
}
.peak label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.peak input {
  width: 100%;
  max-width: 22rem;
  min-width: 0;
  background: transparent;
  border: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  text-align: left;
  outline: none;
}
.hint {
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 21;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
}

/* Home */
.home, .trail {
  min-height: 100vh;
  padding: 4vh 7vw 12vh;
  position: relative;
  max-width: 72rem;
}
.frieze {
  list-style: none;
  margin: 0 0 36px;
  padding: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  border-bottom: 1px solid var(--line);
}
.frieze li {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  min-width: 0;
}
.frieze.labeled li {
  flex-direction: column;
  gap: 6px;
}
.frieze.labeled span {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.7;
}
.points li.on { color: var(--copper); }
.panel-pop, .panel-quote {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
}
.panel-quote { font-style: italic; opacity: 0.85; }
.panel-card { margin-top: 16px; }
.stage-item {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
}
.stage-item.is-moving { z-index: 8; }
.text-box {
  z-index: 9;
}
.text-box-body {
  min-height: 1.5em;
  padding: 8px 32px 8px 36px;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.35;
}
.text-box-remove {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 9;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
}
body.show-admin-gear .text-box-remove {
  display: grid;
  place-items: center;
}
body.is-presenting .text-box-remove {
  display: none !important;
}
.teach-object {
  z-index: 9;
  max-height: 30%;
  overflow: auto;
  padding: 16px 18px 14px 40px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, var(--copper) 8%);
  box-shadow: 0 12px 28px rgba(26, 23, 20, 0.1);
}
.teach-object .scroll-nav {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding-top: 8px;
  background: color-mix(in srgb, var(--paper) 92%, var(--copper) 8%);
}
.teach-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 0 0 10px;
}
.teach-add {
  display: none;
  margin-top: 10px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
body.show-admin-gear .teach-add { display: inline-block; }
body.is-presenting .teach-add { display: none !important; }
.teach-slides { min-height: 4.5rem; }
.teach-slide[hidden] { display: none !important; }
.teach-explain-list,
.teach-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.teach-explain-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.teach-pill {
  font-family: var(--sans);
  font-size: 0.92rem;
  padding: 6px 12px;
  border: 1px solid var(--copper);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.teach-pill.on {
  background: var(--copper);
  color: var(--paper);
}
.teach-word-copy,
.teach-meaning-copy {
  display: none;
}
body.is-copy-editing .teach-word-copy,
body.is-copy-editing .teach-meaning-copy {
  display: block;
  font-size: 0.88rem;
  margin-top: 4px;
}
body.is-copy-editing .teach-explain {
  display: flex;
  flex-direction: column;
  min-width: 8rem;
  padding: 6px 8px;
  border: 1px solid var(--line);
}
.teach-explain-out {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 10px 0 0;
}
.teach-explain-out[hidden] { display: none !important; }
.teach-checks li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 10px;
  align-items: start;
}
.teach-check {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  border: 1.5px solid var(--copper);
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.teach-check[aria-pressed="true"] {
  background: var(--copper);
  box-shadow: inset 0 0 0 2px var(--paper);
}
body.is-copy-editing .teach-pill { display: none; }
body.is-copy-editing .teach-explain-out { display: none !important; }
body.is-copy-editing [data-obj-title],
body.is-copy-editing [data-obj-kind],
body.is-copy-editing [data-obj-line],
body.is-copy-editing [data-obj-word],
body.is-copy-editing [data-obj-meaning],
body.is-copy-editing [data-obj-check-text] {
  outline: 1px dashed color-mix(in srgb, var(--copper) 40%, transparent);
  outline-offset: 2px;
}
.stage-inner {
  position: absolute;
  z-index: 6;
  max-width: 56%;
  pointer-events: none;
  line-height: 1.15;
}
body.show-admin-gear .stage-inner {
  pointer-events: auto;
  cursor: grab;
}
body.show-admin-gear .stage-inner.is-moving { cursor: grabbing; z-index: 10; }
.venn-c .venn-label,
.venn-c.skills .venn-label,
.venn-c.tendencies .venn-label,
.venn-c.values .venn-label {
  position: static;
  width: auto;
  max-width: none;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  text-align: inherit;
}
.venn-c.skills .stage-inner { text-align: left; }
.venn-c.tendencies .stage-inner { text-align: right; }
.venn-c.values .stage-inner { max-width: 64%; text-align: center; }
.stage-inner.venn-you {
  max-width: 30%;
  text-align: center;
  font-family: var(--sans);
  font-size: 5cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--copper);
}
.stage-item .band,
.stage-item .peak-card,
.stage-item .side,
.stage-item .pisca-item,
.stage-item .state,
.stage-item .frieze,
.stage-item .panel-card,
.stage-item .plain-list,
.stage-item .pareto,
.stage-item .mini-form {
  width: 100%;
  margin: 0;
}
.stage-drag,
.stage-handle {
  position: absolute;
  z-index: 40;
  display: none;
  pointer-events: auto;
  touch-action: none;
}
body.show-admin-gear .stage-drag,
body.show-admin-gear .stage-handle {
  display: block;
}
.stage-drag {
  top: 4px;
  left: 4px;
  width: 36px;
  height: 14px;
  border-radius: 3px;
  background: var(--copper);
  cursor: grab;
}
.stage-item.is-moving .stage-drag,
.stage-inner.is-moving .stage-drag { cursor: grabbing; }
.stage-handle {
  right: -7px;
  bottom: -7px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--copper);
  background: var(--paper);
  cursor: nwse-resize;
}
.stage-handle-ne {
  top: -7px;
  bottom: auto;
}
body.show-admin-gear .stage-inner:hover,
body.show-admin-gear .stage-inner.is-moving {
  outline: 1px dashed color-mix(in srgb, var(--copper) 65%, transparent);
  outline-offset: 3px;
}
body.show-admin-gear .stage-item:hover,
body.show-admin-gear .stage-item.is-moving,
body.show-admin-gear .stage-placed:hover {
  outline: 1px dashed color-mix(in srgb, var(--copper) 65%, transparent);
  outline-offset: 4px;
}
.venn {
  container-type: inline-size;
  width: 100%;
  margin: 0;
}
.venn-board {
  position: relative;
  width: 100%;
  aspect-ratio: 17.25 / 16.4;
  height: auto;
  margin: 0;
}
.venn-c {
  position: absolute;
  width: 64.35%;
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--line) 70%, var(--copper));
  border-radius: 50%;
  background: color-mix(in srgb, var(--copper) 12%, transparent);
  color: inherit;
  font: inherit;
  font-size: 4.8cqw;
  cursor: pointer;
  z-index: 1;
}
.venn-c.skills { top: 0; left: 0; }
.venn-c.tendencies { top: 0; left: 35.65%; }
.venn-c.values { top: 29.6%; left: 17.8%; }
.venn-label {
  display: block;
  line-height: 1.15;
  font-size: 1em;
}
.venn-you {
  pointer-events: inherit;
}
.venn-c.on, .band.on, .peak-card.on, .pisca-item.on, .state.on {
  outline: none;
  border-color: var(--copper);
  border-width: 3px;
  background: color-mix(in srgb, var(--copper) 22%, transparent);
  z-index: 3;
}
.elevation .band {
  width: 100%;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--lift);
}
.states { display: flex; gap: 8px; margin-bottom: 12px; }
.state {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}
.peaks .peak-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--lift);
}
.side-trails .side {
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
.pisca {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.pisca-item {
  border: 1px solid color-mix(in srgb, var(--copper) 50%, transparent);
  background: transparent;
  padding: 10px 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
  text-align: center;
  min-width: 0;
}
.pareto { margin-top: 12px; }
.pareto-bar {
  height: 10px;
  background: rgba(28, 24, 20, 0.08);
  margin: 8px 0 6px;
}
.pareto-bar span {
  display: block;
  height: 100%;
  background: var(--copper);
}
.pareto-bar.fat span { background: var(--gold); }
.plain-list {
  margin: 12px 0 0;
  padding-left: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.45;
}
.mini-form .field { margin: 10px 0; }
.plan-fill { margin-top: 16px; font-size: 0.95rem; line-height: 1.45; }
.contents {
  margin-top: 48px;
  max-width: 40rem;
}
.plate-row {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
body.is-copy-editing .contents .plate-row,
body.is-copy-editing .contents .plate-row [data-edit] {
  cursor: text;
}
.plate-row .n {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--copper);
  font-size: 0.85rem;
  padding-top: 0.2em;
}
.plate-row .t {
  font-family: var(--serif);
  font-size: 1.15rem;
}
.plate-row.done .t { opacity: 0.7; }
.plate-row:hover .t { color: var(--copper); }
.kicker {
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0 0 12px;
}
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.6vw, 3.5rem);
  line-height: 1.12;
  margin: 0 0 16px;
  max-width: 22ch;
}
.lede {
  max-width: 38rem;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.55;
  opacity: 0.88;
  margin: 0 0 10px;
}
.you-are-here {
  margin-top: 28px;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.map {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lantern {
  pointer-events: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
  width: 92px;
}
.lantern-flame {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #cbbda0;
  box-shadow: 0 0 0 6px rgba(227, 155, 46, 0.08);
  transition: background .25s, box-shadow .25s;
}
.lantern.lit .lantern-flame,
.lantern:hover .lantern-flame {
  background: var(--flame);
  box-shadow: 0 0 16px 6px rgba(255, 190, 92, 0.45);
}
.lantern-id {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.lantern-name {
  display: block;
  font-size: 0.72rem;
  opacity: 0.8;
  margin-top: 2px;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn {
  border: 1px solid var(--line);
  background: rgba(138, 90, 50, 0.1);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.btn:hover { background: color-mix(in srgb, var(--copper) 18%, transparent); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: rgba(180,80,70,.4); }

/* Camp */
.camp {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(16rem, var(--stage-pct, 45%));
  gap: 32px;
  padding: 8px 7vw 80px;
  align-items: start;
}
.camp-copy { max-width: var(--copy-max, 75%); padding-top: 12px; }
.camp,
.home.has-visual,
.tool.has-visual { position: relative; }
.camp.has-free-stage,
.home.has-visual.has-free-stage,
.tool.has-visual.has-free-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 38%);
  gap: 1.5rem 2rem;
  align-items: start;
  min-height: 100vh;
}
.camp.has-free-stage .camp-copy,
.home.has-visual.has-free-stage .home-main {
  max-width: none;
  width: 100%;
  position: relative;
  z-index: 1;
}
.tool.has-visual.has-free-stage .tool-main {
  max-width: 46rem;
  position: relative;
  z-index: 1;
}
.stage.is-free {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  min-height: min(62vh, 32rem);
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.stage-stack {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.camp h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.4vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 18px;
}
.points { margin: 0; padding: 0; list-style: none; }
.points li {
  position: relative;
  padding: 18px 0 18px 26px;
  font-size: var(--point-size, 1.78rem);
  font-weight: 400;
  line-height: 1.38;
  border-bottom: 1px solid rgba(28, 24, 20, 0.08);
}
.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 10px;
  height: 2px;
  background: var(--gold);
}
.throughline {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--through-size, 1.38rem);
  opacity: 0.75;
  margin: 0 0 22px;
}
.credit { font-size: 0.85rem; opacity: 0.55; margin-top: 18px; }
.camp-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.camp-copy .camp-nav {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.camp-nav-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.camp-copy .camp-nav .btn {
  flex: 0 0 auto;
}
.beat-count { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }

.stage {
  min-height: 52vh;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.stage-split {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  cursor: ew-resize;
  z-index: 50;
  touch-action: none;
}
body.show-admin-gear .stage-split { display: block; }
.stage-split::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 10px;
  height: 48px;
  margin-top: -24px;
  border-radius: 6px;
  background: var(--copper);
}
.stage-split::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 12%;
  bottom: 12%;
  width: 4px;
  border-radius: 99px;
  background: var(--copper);
  opacity: 0.45;
}
.stage-split:hover::after,
.stage.is-splitting .stage-split::after { opacity: 1; }
.stage-move,
.stage-sizer-s,
.stage-sizer-se {
  display: none;
  position: absolute;
  z-index: 50;
  touch-action: none;
}
body.show-admin-gear .stage-move,
body.show-admin-gear .stage-sizer-s,
body.show-admin-gear .stage-sizer-se { display: block; }
.stage-move {
  top: -14px;
  left: 10px;
  right: 18px;
  height: 28px;
  cursor: move;
}
.stage-move::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 72px;
  height: 8px;
  margin-left: -36px;
  border-radius: 99px;
  background: var(--copper);
}
.stage-sizer-s {
  left: 18px;
  right: 18px;
  bottom: -6px;
  height: 22px;
  cursor: ns-resize;
}
.stage-sizer-se {
  right: -8px;
  bottom: -8px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--copper);
  background: var(--paper);
  cursor: nwse-resize;
}
.stage.fog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(180, 190, 200, .28), rgba(246, 240, 228, .15));
  pointer-events: none;
}

.elevation { display: flex; flex-direction: column; gap: 10px; height: 100%; justify-content: flex-end; }
.band {
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 10px;
}
.band strong { display: block; font-family: var(--serif); font-size: 1.15rem; }
.band span { font-size: 1.02rem; opacity: 0.7; }
.band.valley { width: 100%; opacity: 0.7; }
.band.mid { width: 86%; margin-left: 7%; }
.band.pass { width: 70%; margin-left: 15%; background: rgba(212,177,90,.12); }

.rings { display: grid; place-items: center; min-height: 280px; }
.ring {
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ring.a { width: 280px; height: 280px; }
.ring.b { width: 196px; height: 196px; }
.ring.c { width: 118px; height: 118px; background: rgba(255,190,92,.12); color: var(--gold); }

.peaks { display: grid; gap: 12px; }
.peak-card {
  border: 1px solid var(--line);
  padding: 16px;
  border-radius: 12px;
}
.peak-card h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; }
.peak-card p { margin: 0; font-size: 1.15rem; line-height: 1.45; }

.side-trails { display: grid; gap: 8px; }
.side {
  appearance: none;
  -webkit-appearance: none;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--copper) 50%, transparent);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
}
.side [data-size-edit] {
  background: transparent;
  color: inherit;
}
.side.walkable {
  border: 2px solid var(--copper);
  background: color-mix(in srgb, var(--copper) 26%, transparent);
}

.bridge { display: grid; gap: 16px; }
.ridge-block, .footbridge {
  border-radius: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  font-size: 1.2rem;
}
.ridge-block { opacity: 0.4; }
.footbridge { background: rgba(212,177,90,.12); }

.scroll-widget { margin-top: 8px; }
.scroll-face {
  min-height: 7.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
}
.scroll-kind {
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin: 0 0 8px;
}
.scroll-line {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.35;
  margin: 0;
}
.scroll-nav { display: flex; justify-content: center; gap: 8px; }

/* Tools */
.tool {
  max-width: 920px;
  margin: 0 auto;
  padding: 12px 7vw 96px;
}
.object-label {
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.tool h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 8px 0 8px;
}
.field { margin: 16px 0; }
.field label, .field-label, .check {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}
.field-hint {
  margin: 0 0 8px;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
  color: var(--muted);
}
body:not(.is-copy-editing) .field-hint { display: none; }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--lift);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 1rem;
}
.field textarea { min-height: 88px; resize: vertical; }
.dictate-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 6px;
}
.dictate-btn {
  padding: 6px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--lift);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 99px;
}
.dictate-btn:hover { color: var(--copper); }
.dictate-btn.is-rec {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.dictate-btn:disabled { opacity: 0.55; cursor: wait; }
.dictate-status {
  font-size: 0.8rem;
  color: var(--muted);
}
.dictate-status[hidden] { display: none; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0;
}
.card.starred { outline: 1px solid var(--gold); }
.save-note { font-size: 0.85rem; opacity: 0.65; margin-left: 8px; }
.warn { color: #9a4030; font-size: 0.9rem; }
.ok { color: #3d6b3a; font-size: 0.9rem; }
.idea {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(28, 24, 20, 0.08);
}
.letter {
  background: var(--lift);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 8px;
  font-family: var(--serif);
}
.letter h2 { margin: 0 0 12px; font-size: 1.2rem; }
.letter p { margin: 0 0 10px; }
.ai-ideas { display: grid; gap: 8px; margin-top: 14px; }
.ai-idea {
  display: grid;
  gap: 4px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--lift);
  border: 1px solid var(--line);
  padding: 12px 14px;
}
.ai-idea span { font-size: 0.92rem; opacity: 0.78; }
.ai-idea em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
}
.ai-idea:hover { outline: 2px solid var(--copper); }
.ai-empty { margin: 12px 0 0; opacity: 0.7; }
details.card summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.status-preview, .script {
  white-space: pre-wrap;
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.days {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}
.day {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
}
.day.on {
  background: var(--flame);
  box-shadow: 0 0 10px rgba(255,190,92,.5);
}
.upgrade {
  border: 1px dashed var(--line);
  padding: 16px;
  border-radius: 12px;
  margin-top: 16px;
}

/* Pack + report */
.pack, .report {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 7vw 96px;
}
.pack-grid { display: grid; gap: 12px; }
.pack-item {
  text-align: left;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.pack-item h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 500; }
.pack-item p { margin: 0; opacity: 0.8; font-size: 0.95rem; }
.report-block { break-inside: avoid; margin: 0 0 22px; }
.report h1, .report h2 { font-family: var(--serif); }

@media (max-width: 860px) {
  .camp,
  .home.has-visual,
  .tool.has-visual { grid-template-columns: 1fr; padding-bottom: 100px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .days { grid-template-columns: repeat(6, 1fr); }
  .display { max-width: 18ch; }
  .frieze { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hint { display: none; }
}

@media print {
  .hud, .hint, .cta-row .btn.ghost, .frieze, #edit-chrome, #admin-panel, #auth-modal { display: none !important; }
  body, html { background: #fff; color: #111; }
  .report { max-width: none; padding: 0; }
  .report, .report * { color: #111 !important; }
}

#edit-chrome {
  display: none;
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 80;
  align-items: center;
  gap: 8px;
}
.edit-chrome-slot #edit-chrome {
  position: static;
  top: auto;
  right: auto;
}
body.show-admin-gear #edit-chrome { display: flex; }
body.is-presenting #edit-chrome,
body.is-presenting #admin-panel,
body.is-presenting #editor-dock { display: none !important; }
body.is-presenting .hud,
body.is-presenting .camp-nav,
body.is-presenting .hint { display: none !important; }
body.is-presenting .camp { padding-top: 5vh; }
body.is-presenting .points li {
  transition: opacity 0.4s ease;
}
body.is-presenting .points li.is-wait { opacity: 0.14; }
body.is-presenting .points li.is-past { opacity: 0.4; }
body.is-presenting .points li.is-now { opacity: 1; }
body.is-presenting[data-view="camp"] .camp {
  animation: beat-in 0.45s ease;
}
@keyframes beat-in {
  from { opacity: 0.4; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
#present-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
#present-rail[hidden] { display: none !important; }
#present-rail span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--copper);
  transition: width 0.45s ease;
}
#edit-chrome button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#edit-chrome button:hover { color: var(--copper); }
#admin-play { background: var(--ink); color: var(--paper); }
#admin-play:hover { color: var(--paper); opacity: 0.88; }
#admin-edit.on {
  background: var(--ink);
  color: var(--paper);
}
#admin-edit.on:hover { color: var(--paper); opacity: 0.88; }

#admin-panel[hidden] {
  display: none !important;
}
#admin-panel:not([hidden]) {
  display: block;
  position: fixed;
  top: 72px;
  right: 16px;
  left: auto;
  z-index: 70;
  width: min(22rem, calc(100vw - 36px));
  max-height: calc(100vh - 90px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 18px 40px rgba(28, 24, 20, 0.18);
}
.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: -16px -16px 0;
  padding: 12px 16px;
  cursor: grab;
  user-select: none;
}
.admin-head:active { cursor: grabbing; }
.admin-head .btn { cursor: pointer; }
.admin-head .kicker { margin: 0; }
.admin-hash {
  font-family: var(--serif);
  margin: 8px 0 14px;
  font-size: 0.95rem;
}
.admin-type {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-type button {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--serif);
}
.admin-type input[type="range"] {
  width: 7.5rem;
  accent-color: var(--copper);
}
.admin-type button.is-on,
.admin-type button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--copper) 18%, transparent);
  border-color: var(--copper);
  color: var(--ink);
}
.admin-hint {
  margin: -6px 0 14px;
  font-size: 0.78rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.68;
}
.admin-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}
#admin-note {
  width: 100%;
  min-height: 7rem;
  resize: vertical;
  border: 1px solid var(--line);
  background: var(--lift);
  padding: 10px;
  font: inherit;
}
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.admin-status { margin: 0 0 10px; font-size: 0.85rem; opacity: 0.75; }
.admin-log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 10rem;
  overflow: auto;
  margin: 0 0 12px;
}
.admin-log-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--lift);
  border: 1px solid var(--line);
  padding: 8px 10px;
  font: inherit;
}
.admin-log-item strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.admin-log-item span { font-size: 0.85rem; opacity: 0.85; }
body.show-admin-gear [data-edit] {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
body.show-admin-gear [data-edit]:hover,
body.show-admin-gear [data-edit]:focus {
  outline: 1px dashed var(--copper);
  outline-offset: 4px;
}
body.is-presenting [data-edit] {
  outline: none !important;
  cursor: inherit;
  user-select: inherit;
}
#copy-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 80;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(28, 24, 20, 0.2);
}
#copy-toast[hidden] { display: none !important; }

#editor-dock {
  position: fixed;
  top: auto;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 65;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: min(920px, calc(100vw - 24px));
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(28, 24, 20, 0.12);
}
#editor-dock[hidden] { display: none !important; }
#format-bar {
  position: fixed;
  z-index: 4000;
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 12px 28px rgba(28, 24, 20, 0.16);
}
#format-bar[hidden] { display: none !important; }
#format-bar button {
  min-width: 34px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
}
#format-bar button:hover { color: var(--copper); }
#format-bar .format-size { display: inline-flex; align-items: center; }
#format-bar .format-size-label {
  min-width: 2.6em;
  padding: 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
  pointer-events: none;
}
.tox-tinymce-inline { display: none !important; }
#editor-status {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.8;
}
#editor-status[hidden] { display: none !important; }
.home.has-visual,
.tool.has-visual {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(16rem, var(--stage-pct, 45%));
  gap: 32px;
  max-width: none;
  align-items: start;
}
.home.has-visual .stage,
.tool.has-visual .stage {
  min-height: 42vh;
  position: sticky;
  top: 72px;
}
.home.has-free-stage,
.tool.has-free-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 38%);
  gap: 1.5rem 2rem;
  align-items: start;
  position: relative;
  min-height: 100vh;
}
.home.has-free-stage .home-main {
  max-width: none;
  width: 100%;
  position: relative;
  z-index: 1;
}
.tool.has-free-stage .tool-main {
  max-width: 46rem;
  position: relative;
  z-index: 1;
}
.home.has-free-stage .stage.is-free,
.tool.has-free-stage .stage.is-free,
.camp.has-free-stage .stage.is-free {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  min-height: min(62vh, 32rem);
  z-index: 1;
  overflow: auto;
}
#wysiwyg-bar:empty {
  display: none;
  min-height: 0;
  min-width: 0;
}
#wysiwyg-bar .tox-editor-header,
#wysiwyg-bar .tox-toolbar-overlord,
#wysiwyg-bar .tox-toolbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.editor-design {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.editor-design .btn {
  padding: 6px 10px;
  font-size: 0.78rem;
}
#visual-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(26, 23, 20, 0.35);
}
#visual-modal[hidden] { display: none !important; }
.visual-card {
  width: min(32rem, 100%);
  padding: 22px 24px 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 48px rgba(26, 23, 20, 0.2);
}
.visual-card[hidden] { display: none !important; }
.visual-card h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  margin: 6px 0 8px;
}
.visual-card p { margin: 0 0 14px; opacity: 0.82; }
.visual-preview {
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}
.visual-preview img {
  display: block;
  width: 100%;
  height: 8rem;
  object-fit: cover;
}
.visual-card .dictate-tools {
  justify-content: flex-start;
  margin: 0 0 8px;
}
#visual-ask {
  width: 100%;
  display: block;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  resize: vertical;
  min-height: 6rem;
}
.visual-card .cta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.stage-placed {
  position: absolute;
  z-index: 8;
  max-width: 100%;
  pointer-events: none;
  box-shadow: 0 16px 40px rgba(26, 23, 20, 0.16);
}
.stage-placed img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(70vh, 100%);
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--paper);
  pointer-events: none;
}
body.show-admin-gear .stage-placed {
  pointer-events: auto;
  cursor: grab;
}
body.show-admin-gear .stage-placed.is-moving { cursor: grabbing; z-index: 12; }
body.show-admin-gear .stage-placed img { pointer-events: auto; }
body.show-admin-gear .stage-placed .stage-drag,
body.show-admin-gear .stage-placed .stage-handle {
  display: block;
  pointer-events: auto;
}
body.show-admin-gear .stage-placed .stage-drag {
  width: 44px;
  height: 16px;
}
body.show-admin-gear .stage-placed .stage-handle {
  width: 22px;
  height: 22px;
}
body:not(.show-admin-gear) .stage-placed { cursor: default; }
body.is-presenting .stage-placed,
body:not(.show-admin-gear) .stage-placed,
html[data-stage-mode="view"] .stage-placed {
  position: relative;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100%;
}
body.is-presenting .stage-placed img,
body:not(.show-admin-gear) .stage-placed img,
html[data-stage-mode="view"] .stage-placed img {
  width: 100%;
  max-height: min(70vh, 36rem);
  object-fit: contain;
}
.stage-quote {
  position: relative;
  z-index: 3;
  margin: 0 0 18px;
  padding: 18px 8px 18px 18px;
  border-left: 3px solid var(--copper);
  width: 100%;
  max-width: 100%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.25;
  overflow-wrap: break-word;
}
body.show-admin-gear .stage-quote[data-quote-edit] {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
body.show-admin-gear .stage-quote[data-quote-edit]:hover,
body.show-admin-gear .stage-quote[data-quote-edit]:focus {
  outline: 1px dashed var(--copper);
  outline-offset: 4px;
}
body.is-presenting .stage-quote[data-quote-edit] {
  outline: none !important;
  cursor: inherit;
}
.stage-rule {
  height: 4px;
  margin: 8px 0 22px;
  background: var(--copper);
  opacity: 0.9;
}
.stage-number {
  position: relative;
  z-index: 3;
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.8;
  color: var(--copper);
  opacity: 0.55;
}

.auth-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.auth-who {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#auth-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(26, 23, 20, 0.35);
  display: grid;
  place-items: center;
  padding: 24px;
}
#auth-modal[hidden] { display: none; }
.auth-card {
  width: min(28rem, 100%);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 24px;
}
.auth-card h2 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0 0 8px;
}
.auth-card > p { margin: 0 0 16px; opacity: 0.85; }

@media print {
  #auth-modal { display: none !important; }
}

#type-controls { display: none; }

.stage { overflow: auto; }
.stage.is-free { overflow: visible; }
.elevation .band.valley,
.elevation .band.mid,
.elevation .band.pass {
  width: 100%;
  margin-left: 0;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tool.is-wizard,
.tool.is-wide-tool {
  --wizard-max: min(72rem, 94vw);
  display: block;
  max-width: none;
  padding: 12px 1.5rem 96px;
  position: relative;
}
.tool.is-wizard {
  width: var(--wizard-max);
  margin: 0 auto;
}
.tool.is-wide-tool {
  width: 100%;
  margin: 0;
  overflow: visible;
}
.tool.is-wizard .tool-main,
.tool.is-wide-tool .tool-main {
  max-width: none;
  position: relative;
  z-index: 1;
}
.tool.is-wide-tool .tool-main {
  width: min(var(--wizard-max), 100%);
  margin-left: auto;
  margin-right: auto;
}
.tool.is-wizard .lede,
.tool.is-wide-tool .lede {
  max-width: none;
}
.tool.is-wizard[data-width="wide"],
.tool.is-wide-tool[data-width="wide"] {
  --wizard-max: min(80rem, 96vw);
}
.tool.is-wizard[data-width="full"],
.tool.is-wide-tool[data-width="full"] {
  --wizard-max: 100%;
  width: 100%;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  padding-right: clamp(1rem, 3vw, 2.5rem);
}
.tool.is-wide-tool[data-width="full"] .tool-main {
  width: 100%;
}
.tool.is-wide-tool.has-free-stage .tool-main {
  max-width: none;
}
body.show-admin-gear:not(.is-presenting) .tool.is-wide-tool.has-free-stage .stage.is-free {
  overflow: visible;
}
body.is-wizard-tool .editor-design { display: none; }
body.is-copy-editing .wiz-choice [data-size-edit],
body.is-copy-editing .wiz-scale-btn [data-size-edit],
body.is-copy-editing .wiz-rate [data-size-edit],
body.is-copy-editing .wiz-prompt [data-size-edit],
body.is-copy-editing .wiz-rail [data-size-edit] {
  cursor: text;
  user-select: text;
}
.wiz-progress {
  position: sticky;
  top: 58px;
  z-index: 6;
  background: var(--paper);
  padding: 10px 0 16px;
  margin: 0 0 8px;
}
.wiz-progress-track {
  height: 6px;
  background: color-mix(in srgb, var(--copper) 16%, transparent);
  border-radius: 99px;
  overflow: hidden;
}
.wiz-progress-fill {
  height: 100%;
  background: var(--copper);
  border-radius: 99px;
}
.wiz-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.wiz-width {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.wiz-width-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px 10px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.wiz-width-btn.on {
  color: var(--ink);
  border-color: var(--copper);
  background: color-mix(in srgb, var(--copper) 12%, transparent);
}
.wiz-rail {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.wiz-rail li {
  border-bottom: 2px solid var(--line);
  padding-bottom: 4px;
}
.wiz-rail li.on {
  color: var(--copper);
  border-bottom-color: var(--copper);
}
.wiz-rail li.done {
  color: var(--ink);
  border-bottom-color: color-mix(in srgb, var(--copper) 55%, var(--line));
}
.wiz-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  margin: 4px 0 10px;
}
.wiz-choices {
  display: grid;
  gap: 8px;
  margin: 16px 0 8px;
}
.wiz-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--lift);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
}
.wiz-write-label {
  margin: 0 0 8px;
}
.wiz-choice:hover {
  border-color: color-mix(in srgb, var(--copper) 55%, var(--line));
}
.wiz-choice.on {
  outline: 2px solid var(--copper);
  background: color-mix(in srgb, var(--copper) 10%, var(--lift));
}
.wiz-n {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 99px;
  background: var(--copper);
  color: var(--paper);
  font-size: 0.78rem;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.wiz-count, .wiz-hint {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 8px 0 0;
}
.wiz-hint[hidden] { display: none; }
.wiz-life {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
}
.wiz-rates { display: grid; gap: 16px; margin: 18px 0; }
.wiz-rate p { margin: 0 0 8px; }
.wiz-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wiz-scale-btn {
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.wiz-scale-btn.on {
  background: color-mix(in srgb, var(--copper) 16%, var(--lift));
  outline: 2px solid var(--copper);
}
.wiz-pairs { display: grid; gap: 18px; margin: 18px 0; }
.wiz-prompt { margin: 0 0 8px; font-family: var(--serif); font-size: 1.15rem; }
.wiz-pair-btns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}
.wiz-or {
  align-self: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.wiz-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 8px;
}
.wiz-verdict .lede { max-width: none; }
.wiz-rings {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}
.wiz-ring {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 14px;
  padding: 16px;
}
.wiz-ring.peaked { outline: 2px solid var(--copper); }
.wiz-ring.flat { opacity: 0.82; }
.wiz-ring ul { margin: 8px 0 0; padding-left: 1.1rem; }
.wiz-ring li { margin: 0 0 6px; }
.wiz-ring em { font-style: normal; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--copper); }
.wiz-flags { margin: 14px 0; }
.wiz-flag {
  border-left: 3px solid var(--copper);
  padding: 8px 0 8px 12px;
  margin: 0 0 10px;
}

.log-lines {
  display: grid;
  gap: 8px;
  margin: 18px 0 8px;
}
.log-line {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
}
.log-line summary {
  display: flex;
  gap: 12px;
  align-items: baseline;
  cursor: pointer;
  padding: 12px 14px;
  list-style: none;
}
.log-line summary::-webkit-details-marker,
.log-line summary::marker { display: none; }
.log-date {
  flex: 0 0 auto;
  min-width: 7.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
}
.log-one {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-line .log-body {
  padding: 0 14px 14px;
  border-top: 1px solid var(--line);
}
.log-line .log-body p { margin: 10px 0 0; }
.log-report { margin: 22px 0; }
.log-report .lede { max-width: none; }

@media (min-width: 768px) {
  .wiz-choices { grid-template-columns: 1fr 1fr; }
  .wiz-rings { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .wiz-rings { grid-template-columns: 1fr 1fr 1fr; }
}

html[data-stage-mode="view"] .stage-split,
html[data-stage-mode="view"] .stage-move,
html[data-stage-mode="view"] .stage-sizer-s,
html[data-stage-mode="view"] .stage-sizer-se,
body.is-presenting .stage-split,
body.is-presenting .stage-move,
body.is-presenting .stage-sizer-s,
body.is-presenting .stage-sizer-se {
  display: none !important;
}

/* Wide author canvas: drag-anywhere panel. Learners and Present always use the grid above. */
@media (min-width: 1280px) {
  body.show-admin-gear:not(.is-presenting) .camp.has-free-stage,
  body.show-admin-gear:not(.is-presenting) .home.has-visual.has-free-stage,
  body.show-admin-gear:not(.is-presenting) .tool.has-visual.has-free-stage,
  body.show-admin-gear:not(.is-presenting) .home.has-free-stage,
  body.show-admin-gear:not(.is-presenting) .tool.has-free-stage {
    display: block;
  }
  body.show-admin-gear:not(.is-presenting) .camp.has-free-stage .camp-copy,
  body.show-admin-gear:not(.is-presenting) .home.has-visual.has-free-stage .home-main,
  body.show-admin-gear:not(.is-presenting) .home.has-free-stage .home-main {
    max-width: var(--copy-max, 75%);
  }
  body.show-admin-gear:not(.is-presenting) .stage.is-free,
  body.show-admin-gear:not(.is-presenting) .home.has-free-stage .stage.is-free,
  body.show-admin-gear:not(.is-presenting) .tool.has-free-stage .stage.is-free,
  body.show-admin-gear:not(.is-presenting) .camp.has-free-stage .stage.is-free {
    position: absolute;
    left: var(--stage-x, 55%);
    top: var(--stage-y, 8%);
    width: var(--stage-w, 40%);
    height: var(--stage-h, 82%);
    min-height: 0;
    z-index: 5;
    overflow: visible;
  }
  body.show-admin-gear:not(.is-presenting) .stage-placed img {
    max-height: none;
  }
}

/* Phone */
@media (max-width: 767px) {
  .tool.is-wizard,
  .tool.is-wizard[data-width="comfort"],
  .tool.is-wizard[data-width="wide"],
  .tool.is-wizard[data-width="full"],
  .tool.is-wide-tool,
  .tool.is-wide-tool[data-width="comfort"],
  .tool.is-wide-tool[data-width="wide"],
  .tool.is-wide-tool[data-width="full"] {
    --wizard-max: 100%;
    width: 100%;
    padding: 8px 1rem 88px;
  }
  .wiz-width { display: none; }
  .wiz-pair-btns { grid-template-columns: 1fr; }
  .wiz-or { display: none; }
  .wiz-rail { font-size: 0.62rem; }
  .wiz-choices { grid-template-columns: 1fr; }
  .stage-split,
  .stage-move,
  .stage-sizer-s,
  .stage-sizer-se { display: none !important; }
  .camp.has-free-stage,
  .home.has-visual.has-free-stage,
  .tool.has-visual.has-free-stage,
  .home.has-free-stage,
  .tool.has-free-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .camp.has-free-stage .stage.is-free,
  .home.has-visual.has-free-stage .stage.is-free,
  .tool.has-free-stage .stage.is-free {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 12rem;
    max-height: none;
    margin: 4px 0 12px;
  }
  .camp-copy,
  .camp.has-free-stage .camp-copy,
  .home.has-free-stage .home-main {
    max-width: none;
  }
}

/* iPad / small laptop */
@media (min-width: 768px) and (max-width: 1099px) {
  .tool.is-wizard:not([data-width="wide"]):not([data-width="full"]),
  .tool.is-wide-tool:not([data-width="wide"]):not([data-width="full"]) {
    --wizard-max: min(48rem, 92vw);
    padding: 12px 1.75rem 96px;
  }
}

/* Desktop */
@media (min-width: 1100px) {
  .tool.is-wizard:not([data-width="wide"]):not([data-width="full"]),
  .tool.is-wide-tool:not([data-width="wide"]):not([data-width="full"]) {
    --wizard-max: min(64rem, 90vw);
    padding: 12px 2rem 96px;
  }
}
@media (min-width: 1440px) {
  .tool.is-wizard:not([data-width="wide"]):not([data-width="full"]),
  .tool.is-wide-tool:not([data-width="wide"]):not([data-width="full"]) {
    --wizard-max: min(72rem, 86vw);
  }
}