/* Layout and controls - the plain interface.
 *
 * This file alone is the "simple" theme: quiet, fast, legible in direct sun,
 * cheap on battery. Everything ornamental lives in enhanced.css and only
 * applies when the enhanced theme is on.
 *
 * Phone first: thumb-reachable, tap targets big enough to hit in gloves.
 */

:root {
  --bg: #14171c;
  --surface: #1b1f26;
  --surface-2: #232832;
  --line: #333a46;
  --text: #e9ecf1;
  --muted: #a2abba;
  --accent: #7fb069;
  --accent-2: #b9d98f;
  --accent-ink: #0d1510;
  --danger: #ff7b72;
  --ok: #6ee787;
  --radius: 12px;
  --tap: 46px;
  --pad: 16px;
  --display: inherit;          /* enhanced.css swaps in a display serif */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
body { padding-bottom: env(safe-area-inset-bottom); }

/* --- screens ------------------------------------------------------------ */
.screen { display: none; min-height: 100dvh; position: relative; z-index: 1; }
.screen.is-active { display: block; }

.app-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: max(env(safe-area-inset-top), 10px) var(--pad) 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.app-head h1 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0;
  flex: 1;
  letter-spacing: .01em;
}
.pad { padding: var(--pad); }

/* On anything wider than a phone the interface stays a single column, so the
   scenery has room to be seen instead of sitting behind the cards. */
@media (min-width: 620px) {
  .screen > .pad,
  .budget-bar,
  .app-head,
  .sheet,
  .row-actions { max-width: 560px; margin-inline: auto; }
  .sheet { margin-inline: auto; }
}

/* --- buttons ------------------------------------------------------------ */
button {
  font: inherit;
  border-radius: 10px;
  border: 1px solid transparent;
  min-height: var(--tap);
  padding: 0 14px;
  cursor: pointer;
}
.primary { background: var(--accent); color: var(--accent-ink); font-weight: 650; border: none; }
.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.ghost { background: transparent; color: var(--text); border: none; min-width: var(--tap); font-size: 1.1rem; }
.big { width: 100%; min-height: 52px; font-size: 1.05rem; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }

/* --- choices ------------------------------------------------------------ */
.section-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin: 22px 0 8px;
  font-weight: 700;
}
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choices.levels { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.choice {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: left;
  min-height: 58px;
  display: flex; flex-direction: column; justify-content: center;
}
.choice strong { font-family: var(--display); }
.choices.levels .choice { text-align: center; align-items: center; min-height: 50px; padding: 6px; }
.choice small { color: var(--muted); font-size: .76rem; }
.choice[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* --- toggle ------------------------------------------------------------- */
.toggle {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px; margin: 18px 0; cursor: pointer;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span {
  flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  position: relative; transition: background .15s; margin-top: 2px;
}
.toggle span::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.toggle input:checked + span { background: color-mix(in srgb, var(--accent) 35%, var(--surface-2)); border-color: var(--accent); }
.toggle input:checked + span::after { transform: translateX(18px); background: var(--accent); }
.toggle strong { font-family: var(--display); }
.toggle small { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }

/* --- budget bar --------------------------------------------------------- */
.budget-bar {
  /* --head-h is the header's real height, set by app.js; 52px is only the
     fallback for a browser without ResizeObserver. */
  position: sticky; top: var(--head-h, 52px); z-index: 4;
  padding: 10px var(--pad);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.budget-top { display: flex; align-items: baseline; gap: 10px; }
.budget-bar .spent { font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.budget-bar .of { color: var(--muted); flex: 1; }
.budget-bar .state { font-size: .85rem; font-weight: 650; }
.budget-bar .warn { color: var(--danger); }
.budget-bar .clean { color: var(--ok); }
/* Which archetype's background to show, when the list holds more than one. */
.scene-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .8rem; }
.scene-pick > span { color: var(--muted); margin-right: 2px; }
.scene-pick .chip {
  padding: 3px 10px; border-radius: 999px; font: inherit; cursor: pointer;
  border: 1px solid var(--line, rgba(128, 128, 128, .4)); background: transparent; color: inherit;
}
.scene-pick .chip[aria-pressed="true"] { background: var(--accent, #7a5cff); border-color: transparent; color: #fff; }
.meter { margin-top: 8px; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter.over i { background: var(--danger); }

/* --- level blocks ------------------------------------------------------- */
.level {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.level-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.level-head h3 { margin: 0; font-size: .95rem; flex: 1; font-family: var(--display); }
.level-head .pts { font-weight: 700; }
.level-head .sub { color: var(--muted); font-size: .76rem; width: 100%; }

/* Two rows: the spell itself, and the detail that unfolds beneath it. The
   controls sit on the first row only, so opening one never moves the button
   somebody was already reaching for. */
.spell {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "info cost qty" "detail detail detail";
  align-items: center; gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  position: relative;
}
.spell > .info { grid-area: info; }
.spell > .cost-chip { grid-area: cost; }
.spell > .qty { grid-area: qty; }
.spell > .spell-detail { grid-area: detail; }
.spell:first-of-type { border-top: none; }
.spell.owned { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.spell .nm { font-weight: 600; }
.spell .meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }

/* The name and its summary are the handle for the detail, so they are a
   button - but a button that has to look like nothing at all. */
.spell .info {
  appearance: none; background: none; border: 0; border-radius: 8px;
  margin: 0; padding: 0; min-height: 0;
  font: inherit; color: inherit; text-align: left; width: 100%;
}
.spell .info:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* The row already lifts on :active for the +/- buttons; the name must not. */
.spell .info:active { transform: none; }

/* Closed is a zero-height grid row rather than display:none, because a
   height transition needs two numbers to run between and `auto` is not one
   of them. The inner box does the clipping. */
.spell-detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .26s ease, opacity .2s ease;
  opacity: 0;
}
.spell-detail > .sd-inner { overflow: hidden; min-height: 0; }
.spell.open > .spell-detail { grid-template-rows: 1fr; opacity: 1; }
/* Hover opens it only where there is a real pointer to hover with. On a
   phone `:hover` sticks after a tap and would leave rows stuck open. */
@media (hover: hover) and (pointer: fine) {
  .spell:hover > .spell-detail { grid-template-rows: 1fr; opacity: 1; }
}

.sd-inner { font-size: .82rem; line-height: 1.5; color: var(--muted); }
.sd-inner > * { margin: 0; }
.sd-inner > * + * { margin-top: 6px; }
.sd-inner > :first-child { margin-top: 10px; }
.sd-inner > :last-child { margin-bottom: 2px; }
.sd-incant { color: var(--text); font-style: italic; }
.sd-key {
  margin-right: 7px;
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
  font-style: normal; color: var(--accent);
}
.sd-page { font-size: .7rem; opacity: .65; }
.badge { font-size: .72rem; color: var(--muted); }
.badge + .badge::before { content: "\00b7"; margin-right: 5px; }
.badge.arch {
  color: var(--accent); text-transform: uppercase; letter-spacing: .06em;
  font-size: .66rem; font-weight: 700;
}
.cost-chip { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.cost-chip small { color: var(--muted); }
/* an archetype on the list has changed this price (a Ranger's free equipment) */
.cost-chip.repriced { color: var(--accent); font-weight: 600; }

.qty { display: flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.qty button { min-height: 38px; min-width: 38px; padding: 0; font-size: 1.15rem; line-height: 1; }
.qty .n { min-width: 22px; text-align: center; font-weight: 700; }

.choice-row {
  padding: 10px 14px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.choice-row.done { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.choice-row strong { font-family: var(--display); }
.choice-row select {
  font: inherit; width: 100%; margin-top: 6px; min-height: var(--tap);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 0 10px;
}

/* --- finished sheet ----------------------------------------------------- */
.sheet {
  margin: var(--pad); padding: 18px;
  border-radius: var(--radius);
  background: #10141a;
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  position: relative;
}
#screen-list[data-sheet="light"] .sheet { background: #f7f4ec; color: #1c1a15; border-color: #d9d2c2; }
.sheet h2 { font-family: var(--display); margin: 0 0 2px; font-size: 1.15rem; }
.sheet .byline { color: var(--muted); font-size: .84rem; margin-bottom: 14px; }
#screen-list[data-sheet="light"] .sheet .byline { color: #6b6353; }
.sheet .lvl {
  font-family: var(--display); margin: 14px 0 4px; font-weight: 700;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.sheet table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sheet td { padding: 3px 0; vertical-align: top; }
.sheet td.n { text-align: right; width: 2.4em; }
.sheet td.note { color: var(--muted); font-size: .84rem; padding-left: 8px; }
#screen-list[data-sheet="light"] .sheet td.note { color: #6b6353; }
.sheet .totals { margin-top: 16px; padding-top: 8px; border-top: 1px solid currentColor; font-weight: 650; }
.sheet .src { margin-top: 10px; font-size: .76rem; color: var(--muted); }
#screen-list[data-sheet="light"] .sheet .src { color: #6b6353; }

.row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-actions .primary { grid-column: 1 / -1; }

/* --- saved -------------------------------------------------------------- */
.saved { list-style: none; padding: 0; margin: 0; }
.saved li {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
.saved .who { flex: 1; }
.saved .who strong { font-family: var(--display); }
.saved .who small { display: block; color: var(--muted); font-size: .8rem; }
.saved .del { color: var(--danger); }

.muted { color: var(--muted); font-size: .88rem; }

/* --- toast -------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  max-width: min(92vw, 460px);
  background: #2a2016; color: #ffd9a0; border: 1px solid #5a4326;
  padding: 12px 14px; border-radius: 10px; font-size: .9rem; z-index: 50;
  transition: transform .22s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.toast.show { transform: translate(-50%, 0); }

/* Mood layers belong to the enhanced theme only. */
html[data-theme-mode="simple"] .mood,
html[data-theme-mode="simple"] .mood-grain,
html[data-theme-mode="simple"] .mood-vignette { display: none; }

@media print {
  .app-head, .row-actions, .mood, .mood-grain, .mood-vignette, .toast { display: none !important; }
  body, .sheet { background: #fff !important; color: #000 !important; }
  .sheet { border: none; margin: 0; padding: 0; }
  .sheet td.note, .sheet .src, .sheet .byline { color: #444 !important; }
}

/* --- the opening choice ------------------------------------------------- */
/* Always plain, whichever theme is picked: the choice itself has to be
   readable before either theme exists. */
.welcome { padding: clamp(20px, 8vh, 64px) var(--pad); max-width: 520px; margin: 0 auto; }
.welcome h1 { font-size: 1.5rem; margin: 0 0 6px; }
.welcome .small { font-size: .8rem; margin-top: 22px; }
.pick {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 16px; margin-top: 14px; min-height: 0;
}
.pick strong { display: block; font-size: 1.1rem; margin-bottom: 4px; }
.pick small { color: var(--muted); font-size: .85rem; line-height: 1.45; display: block; }
.screen.plain .pick:active { border-color: var(--accent); }

/* --- scroll (plain mode: just a container) ------------------------------ */
.scroll-roll { display: none; }