/* 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-right: 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; }

/* --- 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; }
.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-right: 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-right: 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; }
.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-left: 0.5rem; border-left: 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; }
.step-edit { display: flex; gap: 0.4rem; flex: 1; margin: 0; }
.step-edit input { flex: 1; 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-right: 0.4rem;
  /* Centred prose is fine for one line and unreadable for four paragraphs. */
  text-align: left;
}

.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; left: 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; right: 1rem; z-index: 4; text-align: right;
  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-left: 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: left; }
.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; left: 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; }