/* Controls and round 3 surfaces.

   Native form widgets are drawn by the operating system, which is the same
   problem emoji had: a dropdown rendered in Windows grey sits in the middle of
   a lantern-lit page looking like a bug report. Everything here re-skins the
   controls in the cozy palette, and nothing here changes what a control does.
   Where the OS cannot be overruled (the inside of a native select popup, the
   date picker panel) we set color-scheme so at least it comes back dark. */

:root { color-scheme: dark; }

/* ⚠️⚠️ Second time this has bitten this project. A display rule on an element
   type beats the [hidden] attribute, because [hidden] is only a default style
   of display:none and any later rule wins. Round one: the recovery code panel
   sat visible before enrolment because .recovery-reveal was display:flex. Round
   three: the system picker stayed on screen in live mode because label is
   display:inline-flex. One rule, everywhere, forever. */
[hidden] { display: none !important; }

/* --- selects --------------------------------------------------------------- */
select {
  appearance: none;
  padding-inline-end: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffb454' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.65rem;
  cursor: pointer;
  max-width: 100%;
}
select:hover { border-color: var(--amber-deep); }
select option, select optgroup {
  background: var(--night-2);
  color: var(--ink);
}
select optgroup { color: var(--amber); font-style: normal; }

/* --- checkboxes ------------------------------------------------------------ */
input[type="checkbox"] {
  appearance: none;
  width: 1.15rem; height: 1.15rem; padding: 0; margin: 0;
  border: 1px solid var(--card-edge); border-radius: 6px;
  background: var(--night-2); cursor: pointer;
  display: inline-grid; place-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="checkbox"]::before {
  content: ""; width: 0.62rem; height: 0.62rem; border-radius: 2px;
  transform: scale(0); transition: transform 0.12s ease-in-out;
  background: linear-gradient(160deg, var(--amber), var(--amber-deep));
  box-shadow: 0 0 8px var(--amber);
}
input[type="checkbox"]:checked { border-color: var(--amber); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover { border-color: var(--amber-deep); }

/* --- radios (the icon picker uses these, hidden) --------------------------- */
input[type="radio"] {
  appearance: none; width: 1rem; height: 1rem; margin: 0;
  border: 1px solid var(--card-edge); border-radius: 50%;
  background: var(--night-2);
}
input[type="radio"]:checked { border-color: var(--amber); box-shadow: inset 0 0 0 3px var(--amber); }

/* --- dates, numbers, ranges ------------------------------------------------ */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75) sepia(0.7) saturate(4) hue-rotate(340deg);
  cursor: pointer;
}
input[type="number"] { width: 5.5rem; }

input[type="range"] {
  appearance: none; background: transparent; padding: 0;
  border: none; height: 1.4rem; width: 11rem; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--amber-deep), var(--amber));
}
/* The lantern hue picker is the one slider whose track means something: it is
   the colour you are choosing. Everything else is just a value. */
input.hue-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, hsl(0, 70%, 55%), hsl(60, 70%, 55%), hsl(120, 70%, 55%),
              hsl(180, 70%, 55%), hsl(240, 70%, 55%), hsl(300, 70%, 55%), hsl(359, 70%, 55%));
}
input.hue-range::-moz-range-track {
  background: linear-gradient(90deg, hsl(0, 70%, 55%), hsl(60, 70%, 55%), hsl(120, 70%, 55%),
              hsl(180, 70%, 55%), hsl(240, 70%, 55%), hsl(300, 70%, 55%), hsl(359, 70%, 55%));
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; margin-top: -5px;
  border-radius: 50%; background: var(--ink); border: 2px solid var(--night);
  box-shadow: 0 0 8px #000a;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--night);
}

/* --- text areas ------------------------------------------------------------ */
textarea {
  width: 100%; min-height: 5rem; resize: vertical; line-height: 1.45;
  font-family: inherit;
}
textarea::placeholder { color: #7d7466; }

/* A box that is one line until there is more than one line.
   ⚠️⚠️ Every field on the quest forms used to be an `<input>` with a
   `maxlength`, so a quest title stopped accepting characters partway through a
   sentence with nothing on screen to say why, and a "why" longer than 240
   characters was silently cut by the view even if you got it in. He asked for
   the limit gone and for the boxes to grow, and the two go together: a field
   with no limit that shows you one line of it is worse than the limit was.

   The height is set by script (see `grow()` in app.js). These rules are what
   makes the closed state honestly one line: without `min-height: auto` the
   shared 5rem above wins, and without `overflow-y: hidden` the box measures its
   own scrollbar and creeps a pixel taller on every keystroke.

   ⚠️ `resize: vertical` stays. A box that grows on its own still has to be
   draggable when he wants to see a long note all at once, and the script never
   shrinks below what he has dragged it to. */
textarea[data-grow] {
  min-height: auto;
  overflow-y: hidden;
  resize: vertical;
}

/* --- focus, everywhere ----------------------------------------------------- */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible,
a:focus-visible, summary:focus-visible, [contenteditable]:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* --- disclosure triangles --------------------------------------------------- */
summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.45rem;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: ""; flex-shrink: 0;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
  opacity: 0.8;
}
details[open] > summary::before { transform: rotate(90deg); }

/* --- scrollbars ------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--card-edge) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--card-edge); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--amber-deep); }

/* --- small buttons and the dangerous one ----------------------------------- */
button.tiny {
  padding: 0.15rem 0.5rem; font-size: 0.8rem; line-height: 1.2; border-radius: 8px;
}
button.danger { color: var(--ember-red); border-color: #ff785444; }
button.danger:hover { border-color: var(--ember-red); box-shadow: 0 0 12px #ff785433; }
.danger-fold { margin-top: 1rem; }
.danger-fold > summary { color: #b08a8a; font-size: 0.85rem; }
/* Visible, separated, and unmistakably its own thing. A destructive action
   should be easy to find and hard to do by accident, which is the checkbox's
   job, not the fold's. */
.danger-zone {
  margin-top: 1.2rem; padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 120, 84, 0.28); border-radius: 12px;
  background: rgba(255, 120, 84, 0.05);
}
.danger-zone p { margin: 0 0 0.2rem; font-size: 0.85rem; }
.edit-fold > summary { color: var(--ink-dim); font-size: 0.85rem; }

/* --- the icon picker -------------------------------------------------------- */
.icon-picker { background: var(--night-2); border: 1px solid var(--card-edge);
  border-radius: 10px; padding: 0.5rem 0.8rem; }
.icon-picker > summary { color: var(--ink-dim); }
.ip-current .kicon { width: 1.6rem; height: 1.6rem; color: var(--amber); }
.ip-summary-label { font-size: 0.9rem; }
.ip-body { max-height: 17rem; overflow-y: auto; margin-top: 0.6rem; padding-inline-end: 0.3rem; }
.ip-group { margin-bottom: 0.7rem; }
.ip-group-name { color: var(--amber); font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; }
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 0.35rem;
  margin-top: 0.35rem; }
.ip-cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.45rem 0.2rem; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; color: var(--ink-dim); font-size: 0.68rem; text-align: center;
}
.ip-cell input { position: absolute; opacity: 0; width: 0; height: 0; }
.ip-cell .kicon { width: 1.6rem; height: 1.6rem; color: var(--ink); }
.ip-cell:hover { border-color: var(--card-edge); background: #ffffff08; }
.ip-cell:has(input:checked) {
  border-color: var(--amber); background: #ffb45418; color: var(--ink);
  box-shadow: 0 0 12px #ffb45433;
}
.ip-cell:has(input:checked) .kicon { color: var(--amber); }
.ip-label { line-height: 1.15; }

/* --- basecamp state sections ------------------------------------------------ */
.states-explainer { margin: 0.6rem 0 1.2rem; color: var(--ink-dim); }
.state-legend { list-style: none; padding: 0.5rem 0 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.state-name {
  display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px;
  font-size: 0.78rem; border: 1px solid var(--card-edge); background: #ffffff0a;
  margin-inline-end: 0.4rem;
}
.state-name.preparing { color: #9ec5ff; border-color: #9ec5ff55; }
.state-name.descending { color: var(--amber); border-color: #ffb45455; }
.state-name.surfaced { color: var(--moss); border-color: #9ac07a55; }
.state-name.resting { color: #c9a8ff; border-color: #c9a8ff55; }
.region-group { margin-bottom: 1.6rem; }
.group-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  font-family: Georgia, serif; font-weight: normal; font-size: 1rem; margin: 0 0 0.6rem; }
.group-head .mist { font-size: 0.82rem; }
/* The two quiet groups: surfaced and resting, shut when the page opens.
   ⚠️ The heading stays a real h3 INSIDE the summary rather than being replaced
   by it. A <summary> is announced as a button, which is what you press, but it
   is not a heading, and dropping two of the four out of the outline would make
   the map unnavigable by headings for the exact person most likely to be
   navigating it that way. */
.region-group.quiet > .group-head { margin-bottom: 0; padding: 0.15rem 0; }
.region-group.quiet[open] > .group-head { margin-bottom: 0.6rem; }
/* ⚠️ A flex row of its own rather than `display: contents`. Contents would let
   the heading's children join the summary's flex line directly, which is
   tidier CSS and has a history of dropping the element out of the
   accessibility tree in exactly the browsers that would need it most. Two
   nested flex rows cost nothing here. */
.group-title { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  font: inherit; margin: 0; min-width: 0; }
/* How many are in there, so a shut group still says something. Quiet, because
   this is a count of finished and paused work and nothing here is a score. */
.group-count {
  margin-inline-start: auto; color: var(--ink-dim); font-size: 0.8rem;
  padding: 0.02rem 0.5rem; border-radius: 999px; border: 1px solid var(--card-edge);
}
.state-row { margin-top: 0.6rem; }

/* --- quest cards with an importance rail ------------------------------------ */
.quest-card { flex-direction: row; align-items: stretch; gap: 0.6rem; }
.quest-card .q-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem;
  color: var(--ink); text-decoration: none;
}
.quest-card:hover { border-color: var(--amber); }
.q-rail {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem; padding-inline-start: 0.5rem; border-inline-start: 1px solid #ffffff0d;
}
.q-rail form { margin: 0; }
.q-importance { font-size: 0.85rem; color: var(--amber); font-variant-numeric: tabular-nums; }
.quest-card.blocked { opacity: 0.75; }
.q-blocked { color: #9ec5ff; font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem; }
.blocked-banner {
  background: #9ec5ff12; border: 1px solid #9ec5ff33; border-radius: 12px;
  padding: 0.6rem 0.9rem; color: #cfe0ff; font-size: 0.9rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.requirements { margin-top: 1.6rem; }
.requirements .await-list form { margin: 0; }

/* "Make this one wait for something".
   ⚠️⚠️ The old markup was `.stack` holding two `<label>`s, each wrapping its own
   `<select>`. A label is inline, so each one shrank to its text and the select
   sat beside it at whatever width its longest option happened to need: two
   boxes at two different widths, starting at two different x positions, with
   the button hanging off the end of the shorter one. Nothing was wrong with any
   single rule; the layout was simply never described.

   One column, one field per row, label above the box, box the full width of the
   panel. The widths now come from the panel rather than from the length of
   somebody's quest titles, which is the actual fix: renaming a quest used to
   move this form. */
.wait-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.8rem; }
.wait-field { display: flex; flex-direction: column; gap: 0.3rem; }
.wait-field > label { color: var(--ink-dim); font-size: 0.85rem; }
/* ⚠️ `width: 100%` and not `flex: 1`. A select is a replaced element whose
   intrinsic width is its widest option, and in a column flex container it is
   stretched by `align-items` rather than by growing, so `flex: 1` does nothing
   at all here and the box goes back to being option-shaped. */
.wait-field > select { width: 100%; }
/* The same shape as `.wait-field` above, for any form that is a column of
   fields. ⚠️ Named generally because it is the third time this layout has been
   needed and the second time it was got wrong by wrapping the input in its
   label. `width: 100%` on the box for the reason written above it. */
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field > label { color: var(--ink-dim); font-size: 0.85rem; display: block; }
.field > input, .field > textarea, .field > select { width: 100%; }
.field > .mist { margin: 0.1rem 0 0; font-size: 0.8rem; }
.wait-actions { display: flex; justify-content: flex-end; }
.wait-form .mist { margin: 0; }
.step-edit { display: flex; gap: 0.4rem; flex: 1; margin: 0; align-items: flex-start; }
/* ⚠️ `min-width: 0` beside the `flex: 1`. A textarea's intrinsic minimum is
   wider than an input's, so without it the box refuses to shrink into a narrow
   step row and pushes the save button off the end. */
.step-edit textarea { flex: 1; min-width: 0; padding: 0.25rem 0.5rem; font-size: 0.88rem; }
.step-trail li { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

/* The quick finish on a quest card: quiet until you go looking for it, warm
   when you do. Completion should feel like a small light, never like a tick
   box being audited. */
.q-done { margin: 0 0 0.1rem; }
.done-btn { color: var(--ink-dim); padding: 0.1rem 0.4rem; }
.done-btn:hover {
  color: var(--moss); border-color: var(--moss);
  box-shadow: 0 0 12px rgba(154, 192, 122, 0.35);
}
.done-btn .kicon { width: 1em; height: 1em; margin: 0; }

/* --- the sentinel ----------------------------------------------------------- */
.scope-filter { gap: 0.6rem; font-size: 0.85rem; }
.scope-filter .crumb.on { color: var(--amber); }
.audit-action { color: var(--ink); }

/* --- the well: long thoughts -------------------------------------------------
   A thought can be four words or four paragraphs, so the drop box grows and the
   scry panel scrolls instead of overflowing off the bottom of the screen. */
.well-input-row { align-items: flex-start; }
.well-input-row textarea {
  flex: 1; max-width: 520px; min-height: 2.6rem; line-height: 1.4;
  font-size: 16px; /* iOS zooms below 16px */
}
.well-input-row button { flex-shrink: 0; }
.scry-inner { max-height: 88vh; }
.scry-text {
  white-space: pre-wrap; word-break: break-word;
  max-height: 58vh; overflow-y: auto; padding-inline-end: 0.4rem;
  /* Centred prose is fine for one line and unreadable for four paragraphs. */
  text-align: start;
}

.focus-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  color: var(--ink-dim); text-decoration: none; font-size: 0.9rem;
  padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px solid transparent;
}
.focus-link:hover { color: #c9a8ff; border-color: #c9a8ff44; }

/* --- the observatory: focus mode --------------------------------------------
   Same rule as the campfire page: the canvas IS the page. No nav, no XP bar,
   no capture box, nothing that offers you somewhere else to be. */
body.skypage { margin: 0; overflow: hidden; height: 100vh; height: 100dvh; background: #05040a; }
body.skypage #sky {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  display: block; border: none; border-radius: 0;
}
.sky-back { position: fixed; top: 1rem; inset-inline-start: 1rem; z-index: 5; opacity: 0.55; }
.sky-back:hover { opacity: 1; }
.sky-centre {
  position: fixed; left: 0; right: 0; top: 12vh; z-index: 4;
  text-align: center; pointer-events: none; padding: 0 1.5rem;
}
.sky-with {
  font-family: Georgia, serif; font-size: 1.5rem; margin: 0;
  color: rgba(240, 232, 220, 0.92); text-shadow: 0 0 24px rgba(0, 0, 0, 0.9);
  max-width: 34rem; margin: 0 auto;
}
.sky-sitting { margin: 0.6rem 0 0; font-size: 0.85rem; color: rgba(240, 232, 220, 0.4);
  font-style: italic; }
.sky-ui {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(180deg, rgba(5, 4, 10, 0), rgba(5, 4, 10, 0.86) 45%);
}
.sky-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  justify-content: center; width: 100%; max-width: 620px; }
.sky-row.small { font-size: 0.85rem; gap: 1rem; }
.sky-row input[type="text"], .sky-row #with-input {
  flex: 1; min-width: 12rem; font-size: 16px;
  background: rgba(10, 8, 16, 0.72); color: #f0e6d6;
}
#sound-toggle.on { color: var(--amber); border-color: var(--amber); }
.sky-blurb { max-width: 40rem; margin: 0.2rem 0 0; font-size: 0.85rem;
  color: rgba(240, 232, 220, 0.6); font-style: italic; }
.sky-star, .sky-source { margin: 0; font-size: 0.72rem; max-width: 42rem; opacity: 0.75; }
.sky-readout {
  position: fixed; top: 1rem; inset-inline-end: 1rem; z-index: 4; text-align: end;
  display: flex; flex-direction: column; gap: 0.25rem; pointer-events: none;
  max-width: 20rem;
}
.ro-row { display: flex; flex-direction: column; }
.ro-key { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 180, 84, 0.65); }
.ro-val { font-size: 0.82rem; color: rgba(240, 232, 220, 0.78); }
@media (max-width: 640px) {
  .sky-blurb, .sky-star { display: none; }
  .sky-with { font-size: 1.2rem; }
  .sky-readout { position: static; max-width: none; text-align: center; align-items: center;
    padding: 4.5rem 1rem 0; }
}

/* --- the capture bar: one box, two destinations ------------------------------ */
.capture-bar { align-items: flex-end; }
.capture-bar textarea {
  flex: 1; max-width: 620px; min-height: 2.6rem; height: 2.6rem;
  resize: none; overflow-y: auto; line-height: 1.4;
  font-size: 16px; /* iOS zooms below 16px */
  padding: 0.55rem 0.8rem;
}
.capture-bar button {
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  flex-shrink: 0;
}
.capture-bar .kicon { width: 1.1em; height: 1.1em; }
/* The well is water: cold blue against the fire's amber, so the two
   destinations never get confused at a glance. */
button.wellbtn {
  --well: #58a7d8;
  --well-deep: #2f6f9e;
  background: linear-gradient(160deg, var(--well-deep), var(--well));
  color: #06131c; border: none; font-weight: 600;
  box-shadow: 0 0 16px color-mix(in srgb, var(--well) 45%, transparent);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
button.wellbtn:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--well) 70%, transparent); }
/* The four moods of the water. The button is the only place on most pages that
   says which one you are in, so it has to be unmistakable at a glance. */
button.wellbtn.mood-normal   { --well: #58a7d8; --well-deep: #2f6f9e; }
button.wellbtn.mood-high     { --well: #8fe04a; --well-deep: #4e8f26; }
button.wellbtn.mood-euphoric { --well: #ffc83d; --well-deep: #b8860b; }
button.wellbtn.mood-despair  { --well: #e0533f; --well-deep: #8f2b1e; }

/* The mood picker under the well's own text box. */
.mood-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;
  margin-top: 0.7rem; }
.mood-btn {
  --mood: #7fb4ff;
  border: 1px solid color-mix(in srgb, var(--mood) 45%, transparent);
  color: color-mix(in srgb, var(--mood) 80%, white);
  background: color-mix(in srgb, var(--mood) 12%, transparent);
  border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.85rem;
}
.mood-btn:hover { border-color: var(--mood); }
.mood-btn.on {
  background: color-mix(in srgb, var(--mood) 30%, transparent);
  border-color: var(--mood); color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--mood) 45%, transparent);
}
.scry-mood { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; }
@media (max-width: 720px) {
  /* Phone and installed app: the labels are the first thing worth dropping,
     same rule the navigation already follows. */
  .capture-bar button span { display: none; }
  .capture-bar button { padding: 0.55rem 0.7rem; }
  .capture-bar .kicon { width: 1.35em; height: 1.35em; margin: 0; }
  .capture-note { display: none; }
}

/* --- the forge: the game design, running ------------------------------------ */
.forge { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.4rem;
  margin-top: 1.2rem; }
.fg-board { display: flex; flex-direction: column; gap: 1rem; }
.fg-actors { background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px;
  padding: 1rem 1.1rem; }
.fg-actor { margin-bottom: 0.8rem; }
.fg-actor-name { font-weight: 600; }
.fg-bar { height: 10px; border-radius: 6px; background: #ffffff14; overflow: hidden; margin: 0.25rem 0; }
.fg-bar-fill { height: 100%; background: linear-gradient(90deg, var(--moss), #cfe6a8);
  transition: width 0.35s ease; }
.fg-actor.foe .fg-bar-fill { background: linear-gradient(90deg, var(--ember-red), #ffb08a); }
.fg-actor-hp { font-size: 0.8rem; color: var(--ink-dim); }
.fg-status { color: #c9a8ff; margin-inline-start: 0.4rem; }
.fg-turn { margin: 0.4rem 0 0; color: var(--amber); }
.fg-seed { margin: 0; font-size: 0.78rem; }
.fg-stash { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.7rem; }
.fg-device { background: var(--card); border: 1px solid var(--card-edge); border-radius: 14px;
  padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.fg-play { width: 100%; font-weight: 600; background: linear-gradient(160deg, #2d2340, var(--card));
  border-color: var(--amber-deep); }
.fg-play:disabled { opacity: 0.45; cursor: default; border-color: var(--card-edge); }
.fg-cost { color: var(--amber); font-size: 0.8rem; }
.fg-blurb { margin: 0; font-size: 0.84rem; }
.fg-teaches { margin: 0; font-size: 0.75rem; color: #9ec5ff; font-style: italic; }
.fg-tacit { margin: 0; font-size: 0.75rem; color: var(--ink-dim); }
.fg-node { text-align: start; }
.fg-logwrap { display: flex; flex-direction: column; min-height: 0; }
.fg-log {
  list-style: none; margin: 0.6rem 0 0; padding: 0.6rem 0.8rem;
  background: #0d0a16; border: 1px solid var(--card-edge); border-radius: 14px;
  height: 26rem; overflow-y: auto; font-size: 0.82rem;
  font-family: "Cascadia Mono", Consolas, monospace;
}
.fg-ev { padding: 0.1rem 0; color: var(--ink-dim); }
.fg-verb { color: var(--amber); }
.fg-round { color: #6d6478; font-size: 0.75rem; }
.fg-hook .fg-verb, .fg-promise .fg-verb { color: #c9a8ff; }
.fg-brain .fg-verb { color: #9ec5ff; }
.fg-error .fg-verb, .fg-cancelled { color: var(--ember-red); }
.fg-end .fg-verb, .fg-seed-line { color: var(--moss); }
.region.note { animation: none; cursor: default; }
@media (max-width: 900px) {
  .forge { grid-template-columns: 1fr; }
  .fg-log { height: 18rem; }
}

/* Bare mode. Everything fades except what you are sitting with; the toggle
   itself stays as a faint mark in the corner so there is always a way back. */
.sky-bare-toggle {
  /* Left, under the way out: the readout lives on the right and the two were
     printing on top of each other. */
  position: fixed; top: 2.6rem; inset-inline-start: 1rem; z-index: 6;
  background: transparent; border: none; color: rgba(240, 232, 220, 0.3);
  font-size: 0.78rem; padding: 0.3rem 0.5rem;
}
.sky-bare-toggle:hover { color: rgba(240, 232, 220, 0.85); }
body.bare .sky-ui, body.bare .sky-readout, body.bare .sky-back {
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
body.bare .sky-bare-toggle { opacity: 0.12; }
body.bare .sky-bare-toggle:hover { opacity: 1; }
.sky-ui, .sky-readout, .sky-back { transition: opacity 0.5s ease; }

/* --- pages that want the whole screen --------------------------------------- */
body.wide main { max-width: min(1720px, 97vw); }
body.wide .sheet { min-width: 0; font-size: 0.88rem; }
.sheet .col-drop { width: 2.2rem; }
.sheet .col-drop button { opacity: 0.25; }
.sheet tr:hover .col-drop button { opacity: 1; }