/* What the custom adventure's story cards share with other setup pages, and
   the pieces older than the cards: the wand, the theme pills, the setup
   switches and their help bubbles (which random setup and the details screen
   draw too), and the hidden default submit. The table and the cards
   themselves are pages/story_cards.css; layout primitives (.setup-card,
   .setup-header, .details-input, .stat-*) come from pages/random_setup.css
   and pages/game_details.css. */

/* ── Wand ──
   Twice the weight of a class and after pages/parchment.css, whose .btn
   rule outranked a single one: the wand's gold never showed. */
body .btn.btn-wand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(200, 168, 78, 0.6);
  background: rgba(200, 168, 78, 0.1);
  color: #5a4a30;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
  body .btn.btn-wand:hover:not(:disabled) {
    background: rgba(200, 168, 78, 0.25);
    border-color: rgba(200, 168, 78, 0.9);
    color: #3a2a14;
  }
}

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

.wand-icon {
  font-size: 0.85rem;
  line-height: 1;
}

/* Its words say "Writing…" as well, so a reader who asked for less motion
   loses nothing without the spin. */
@media (prefers-reduced-motion: no-preference) {
  .btn-wand.is-pending .wand-icon {
    animation: wandSpin 1.1s linear infinite;
  }
}

@keyframes wandSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Theme picker (the World card) ──
   Plain paper pills, the chosen one inked in, as in the owner's mockup. They
   were each theme's own colours, and a faint gold ring (under 2:1 on the
   sheet) was all that marked the chosen one; in forced colours, nothing did.
   The radio itself is kept, out of sight, for the keyboard and a screen
   reader. 44px tall, a thumb's height (plans/custom-setup-cards.md, §8). */
.theme-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}

.theme-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-swatch {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  background: #fbf6ea;
  border: 1px solid #b59a70;
  font: 14px/1.3 'Lora', Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
  color: #5a4a30;
  cursor: pointer;
}

@media (hover: hover) {
  .theme-pill:hover .theme-swatch { border-color: #5a4a30; color: #2a1d0e; }
}

.theme-pill input[type="radio"]:checked + .theme-swatch {
  background: #3a2a14;
  border-color: #2a1d0e;
  color: #f1e6cf;
}

/* A forced palette would draw every pill alike; the chosen one keeps the
   system's highlight. */
@media (forced-colors: active) {
  .theme-pill input[type="radio"]:checked + .theme-swatch {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }
}

.theme-pill input[type="radio"]:focus-visible + .theme-swatch {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── The setup switches and their inline help (shared/_setup_toggle) ──
   Not .sidebar-help: that one is drawn from the in-game theme variables, which
   the setup pages' parchment does not set. Same tooltip controller, though — the
   bubble is absolute here, so positionIfFixed() leaves it alone. */
.setup-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* Two classes deep: .setup-card label (the field captions' small caps, in
   random_setup.css) outranked a single class, so a switch's words came out
   as a 10px caption and never as the sentence meant here. */
.setup-toggle .setup-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
  color: #5a4a33;
  cursor: pointer;
}

.setup-toggle-label input[type="checkbox"] {
  accent-color: #7a6548;
  cursor: pointer;
}

/* The allowance sits beside the picture switches rather than in their
   tooltips: it is the only reason to decline, so it has to be readable
   without a tap. */
.setup-toggle-note {
  font-size: 0.72rem;
  font-style: italic;
  color: #7a6548;
  opacity: 0.85;
}

/* On a phone the allowance note takes a line of its own under the switch,
   rather than squeezing the label onto two. */
@media (max-width: 480px) {
  .setup-toggle { flex-wrap: wrap; }
  .setup-toggle-note { flex-basis: 100%; padding-left: 1.55rem; }
}

/* The picture style (shared/_picture_style_choice): a caption and two
   choices on one row, wrapping under the caption on a narrow screen. */
.setup-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-bottom: 1rem; }
.setup-choice-caption { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Two classes deep, as .setup-toggle-label is: .setup-card label (the field
   captions' small caps, random_setup.css) outranks one. */
.setup-choice .setup-choice-label,
.setup-choice .setup-choice-option { font-family: 'Lora', Georgia, serif; font-size: 0.8rem; color: #5a4a33; }
.setup-choice .setup-choice-option { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; letter-spacing: 0; text-transform: none; cursor: pointer; }
.setup-choice-option input[type="radio"] { accent-color: #7a6548; cursor: pointer; }

.setup-toggle-label input[type="checkbox"]:disabled { cursor: not-allowed; }
.setup-toggle-label:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

.setup-help {
  position: relative;
  display: inline-flex;
}

.setup-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 1px solid rgba(122, 101, 72, 0.5);
  border-radius: 50%;
  background: transparent;
  color: #8a7757;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
  .setup-help-btn:hover {
    color: #5a4a33;
    border-color: #7a6548;
  }
}

.setup-help-bubble {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  max-width: 70vw;
  padding: 0.55rem 0.7rem;
  background: #f4ead6;
  border: 1px solid rgba(122, 101, 72, 0.4);
  box-shadow: 0 2px 8px rgba(60, 45, 25, 0.15);
  /* Its own face rather than the page's: on the details screen the page font
     is the game theme's, which can be anything, monospace included. */
  font-family: 'Lora', Georgia, serif;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.55;
  color: #6b5942;
  text-align: left;
  z-index: 20;
}

/* Set by the tooltip controller when opening downward would run off the
   bottom of the screen — near the foot of a form there is room above but
   not below. */
.setup-help-bubble.is-above {
  top: auto;
  bottom: 1.5rem;
}

/* Under the picture toggles when the month's images are spent. The boxes stay
   live — see shared/_allowance_spent — so this explains what turning one on
   will actually get. */
.setup-allowance-spent { margin: 0.35rem 0 0.6rem; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 0.72rem; color: var(--text-muted); }
/* Ink: the theme's accent is the game's teal here, 1.8:1 on parchment. */
.setup-allowance-spent a { color: #3a2a14; text-decoration: underline; text-underline-offset: 2px; }

/* A card's default button (custom_setup/_default_submit): there for Enter to
   find, and nowhere to be seen. */
.setup-default-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}