/* Sebald terminal aesthetic — monospace, dim yellow on black, ASCII-friendly. */

/* Screen-reader-only label: visible to assistive tech, invisible visually.
   Used for auth form labels so the design stays placeholder-only but screen
   readers still get a programmatic label for each input. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


:root {
  --bg: #0a0a0a;
  --fg: #e8e0c8;
  --dim: #888;
  --yellow: #d4b85a;
  --red: #c66;
  --cyan: #6cc;
  --magenta: #c6c;
  --green: #8c8;
  --border: #333;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Menlo", "Consolas", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

main {
  max-width: 80ch;
  margin: 0 auto;
  padding: 2em 1em;
}

h1, h2, h3 { font-weight: bold; margin: 0 0 0.5em; }
h1 { font-size: 1.6em; letter-spacing: 0.1em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1em; color: var(--yellow); margin-top: 1.5em; }

p { margin: 0.5em 0; }

a, a:visited { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.dim { color: var(--dim); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.error { color: var(--red); }

kbd {
  display: inline-block;
  padding: 0 0.3em;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--cyan);
  font-size: 0.9em;
}

button {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 0.2em 0.6em;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
button:hover { border-color: var(--yellow); color: var(--yellow); }
button.link {
  border: none;
  color: var(--dim);
  padding: 0;
}
button.link:hover { color: var(--cyan); }

input[type="text"], input[type="password"] {
  background: transparent;
  color: var(--fg);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.2em 0;
  font-family: inherit;
  font-size: inherit;
  width: 60%;
}
input[type="text"]:focus, input[type="password"]:focus {
  outline: none;
  border-bottom-color: var(--yellow);
}

.trail { color: var(--dim); margin: 0 0 1em; }

/* Room panel */
.room {
  border: 1px solid var(--border);
  padding: 1em 1.5em;
  margin: 1em 0;
}
.room.degraded { border-color: var(--red); }
.room header h2 { color: var(--fg); }
.room .meta { color: var(--dim); font-size: 0.9em; }
.room .description { margin-top: 1em; }
/* Cross-user presence — sits between the room panel and marginalia, quiet. */
.others-here { font-style: italic; font-size: 0.85em; margin: 1em 0 0; }
.degraded-label { color: var(--red); margin-left: 1em; font-size: 0.85em; }

/* Full-text button at the bottom of the room panel. Sits flush right on
   desktop (subtle, paired with the description); promoted to a full-width
   prominent button on phones — see the @media block. Keyboard shortcut
   `f` works regardless of placement (trigger is on document.body). */
.inline-full-text {
  display: block;
  margin: 1em 0 0 auto;
  padding: 0.4em 0.9em;
  font-size: 0.95em;
}

/* Item box */
.item {
  border: 1px solid var(--yellow);
  border-radius: 4px;
  padding: 1em;
  margin: 1em 0;
}
.item h3 { color: var(--yellow); margin-top: 0; }
.item-name { font-weight: bold; color: var(--yellow); }
.item-desc { color: var(--dim); }

/* Exits */
.exits ol { list-style: none; padding: 0; }
.exits li { margin: 0.3em 0; }

/* Meanders — the player's own associations, lettered A-Z. Magenta to
   set them apart from the curated (numbered) doors. */
.meanders h3 { color: var(--magenta); }
.meanders li button { color: var(--magenta); border-color: var(--magenta); }

/* Trapdoor */
.trapdoor {
  margin: 1em 0;
  color: var(--yellow);
}

/* Hall navigation — walk forward / step back as a flex pair, side by side. */
.hall-nav {
  display: flex;
  gap: 0.5em;
  margin: 1em 0;
}
.hall-nav button { flex: 1; margin: 0; text-align: center; }

/* Combat hint */
.combat-hint {
  margin: 0.5em 0;
}

/* Progress dots */
.progress { margin: 0.5em 0; font-size: 1.2em; }

/* Controls bar — a chip grid of secondary nav. 4 columns on desktop,
   2 on mobile (set in the media query below). Each "link" button gets a
   subtle border so it reads as a tap target rather than a wall of inline
   text. The dim color keeps it visually below the primary actions. */
.controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4em;
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid var(--border);
  font-size: 0.9em;
}
.controls > * {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5em 0.5em;
  min-height: 38px;
}
.controls button.link, .controls a.link {
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--dim);
  text-align: center;
}
.controls button.link:hover, .controls a.link:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

/* Top-of-page back link in .trail containers — chip style, discrete. */
.trail a {
  display: inline-block;
  padding: 0.3em 0.7em;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--dim);
}
.trail a:hover { border-color: var(--yellow); color: var(--yellow); text-decoration: none; }

/* Banners */
.scroll-banner {
  border: 1px solid var(--yellow);
  padding: 0.5em 1em;
  margin: 0 0 1em;
  color: var(--yellow);
}
.scroll-banner.meta { border-color: var(--magenta); color: var(--magenta); }

/* When the scroll banner is wrapped in <a> (tap-to-read), inherit colors
   and don't underline the whole panel. */
a.scroll-banner-link,
a.scroll-banner-link:visited { color: inherit; display: block; }
a.scroll-banner-link:hover { text-decoration: none; }
a.scroll-banner-link:hover .scroll-banner { background: rgba(212, 184, 90, 0.07); }
a.scroll-banner-link:hover .scroll-banner.meta { background: rgba(204, 102, 204, 0.07); }

.llm-banner {
  border: 1px solid var(--red);
  color: var(--red);
  padding: 0.5em 1em;
  margin: 0 0 1em;
}

.transient-banner {
  border-left: 2px solid var(--dim);
  padding: 0.4em 1em;
  margin: 0 0 1em;
  font-size: 0.9em;
}

/* Quests (forced associations) — green, distinct from scrolls (yellow) and
   meta/meanders (magenta). */
.quest-banner {
  border: 1px solid var(--green);
  color: var(--green);
  padding: 0.6em 1em;
  margin: 0 0 1em;
}
a.quest-banner-link, a.quest-banner-link:visited { color: inherit; display: block; }
a.quest-banner-link:hover { text-decoration: none; }
a.quest-banner-link:hover .quest-banner { background: rgba(136, 204, 136, 0.07); }

.quest-giver {
  border: 1px solid var(--green);
  border-radius: 4px;
  padding: 1em 1.2em;
  margin: 1.2em 0;
}
.quest-giver h3 { color: var(--green); margin-top: 0; }
.quest-giver .quest-framing { font-style: italic; }
.quest-giver button { color: var(--green); border-color: var(--green); }

.quests-heading { color: var(--green); }
.codex-quests .quest-path { font-size: 0.85em; margin-top: 0.2em; }
.codex-quests .quests-fulfilled strong { color: var(--green); }

/* Dedicated /quests page */
.quests-page h3 { color: var(--green); margin-top: 1.4em; }
.quests-page .quests-intro { font-style: italic; margin-bottom: 1.4em; }
.quests-page .quests-open li, .quests-page .quests-fulfilled li { margin-bottom: 1em; }
.quests-page .quests-fulfilled strong { color: var(--green); }
.quests-page .quest-path { font-size: 0.85em; margin-top: 0.2em; }

/* Marginalia */
.marginalia { margin: 1em 0; padding-left: 2em; font-size: 0.9em; }
.marginalia .note-response { padding-left: 2em; color: var(--dim); }

/* Start page */
.start { text-align: center; padding-top: 4em; }
.start h1 { color: var(--yellow); }
.start form { margin-top: 2em; }

/* Prompt page */
.prompt { padding-top: 2em; }
.prompt ol { list-style: none; padding: 0; }
.prompt li { margin: 0.5em 0; }

/* Combat page */
.combat ol { list-style: none; padding: 0; }
.combat li { margin: 0.7em 0; }

/* Full text */
.full-text pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: #050505;
  padding: 1em;
  border: 1px solid var(--border);
  max-height: 60vh;
  overflow-y: auto;
}

/* Codex */
.codex .scrolls li {
  border-left: 2px solid var(--yellow);
  padding-left: 1em;
  margin: 1em 0;
}
.codex .scrolls li.meta { border-left-color: var(--magenta); }
.codex .scrolls li.tainted { border-left-color: var(--red); }
.codex blockquote {
  margin: 0.5em 0;
  padding-left: 1em;
  border-left: 1px solid var(--border);
  font-style: italic;
  color: var(--dim);
}
.codex .themes span { margin-right: 0.5em; }

/* History */
.history ul.past { margin: 1em 0; padding-left: 1em; border-left: 1px solid var(--border); }
.history .via { margin-left: 0.6em; font-size: 0.85em; }
.history .via em { font-style: italic; }
.history-hint { font-size: 0.85em; margin: 0.3em 0 1em; }
/* History entries are clickable — re-enter that hall. Styled as a link,
   not a boxy button, so the path reads as prose. */
.goto-link {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--yellow);
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
}
.goto-link:hover { text-decoration: underline; }
.goto-link strong { color: var(--yellow); }
.history ul.past .goto-link { color: var(--dim); }
.history ul.past .goto-link:hover { color: var(--yellow); }

/* ───────────────────────────────────────────────────────────────────────── */
/* Loading indicator + in-flight disable */

#loader {
  text-align: center;
  margin: 1em 0;
  padding: 0.5em;
  color: var(--yellow);
  font-size: 1.1em;
  letter-spacing: 0.05em;
  animation: pulse 1.4s ease-in-out infinite;
}
#loader[hidden] { display: none; }
#loader-char { font-size: 1.3em; margin-right: 0.4em; }
@keyframes pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* Dim & disable all interactive elements while a request is in flight.
   body.htmx-request is set/cleared by the script in base.html. */
body.htmx-request button,
body.htmx-request a[hx-get],
body.htmx-request a[hx-post] {
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.15s ease-in;
}

/* Remove the default focus ring on <main> — it's only there for
   programmatic focus management after HTMX swap, not interaction. */
main:focus { outline: none; }

/* First-visit hint sits just under the trail. Atmospheric, terminal. */
.first-visit-hint {
  margin: 0 0 1em;
  font-size: 0.85em;
  text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Walkable wings (Stage 9 hall metaphor) */

.wing-link, .wing-link:visited { color: var(--yellow); }
.wing-link:hover { text-decoration: underline; }

.codex-wings li { margin: 1em 0; }
.codex-wings .wing-link strong { font-size: 1.05em; }

.wing-presence {
  margin: 0.5em 0 1em;
  font-size: 0.9em;
}

.wing-header {
  border-left: 2px solid var(--yellow);
  padding-left: 1em;
  margin: 1.5em 0 2em;
}
.wing-header h2 { color: var(--yellow); letter-spacing: 0.08em; }
.wing-description { margin: 0.5em 0; }
.wing-count { font-size: 0.85em; margin-top: 0.5em; }

.wing-scrolls {
  list-style: none;
  padding: 0;
  margin: 2em 0;
  position: relative;
}
.wing-scrolls::before {
  /* The corridor itself — a thin vertical line connecting the scrolls. */
  content: "";
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  bottom: 0.5em;
  width: 1px;
  background: var(--border);
}
.wing-scroll {
  display: grid;
  grid-template-columns: 2em 1fr;
  gap: 1em;
  margin: 2em 0;
  align-items: start;
}
.wing-scroll-marker {
  color: var(--yellow);
  text-align: center;
  font-size: 1.2em;
  line-height: 1;
  background: var(--bg);
  /* Sit on top of the corridor line. */
  padding: 0.2em 0;
  position: relative;
  z-index: 1;
}
.wing-scroll.meta .wing-scroll-marker { color: var(--magenta); }
.wing-scroll.tainted .wing-scroll-marker { color: var(--red); }
.wing-scroll-body h3 {
  margin: 0 0 0.5em;
  color: var(--fg);
}
.wing-scroll.meta .wing-scroll-body h3 { color: var(--magenta); }
.wing-scroll-body blockquote {
  margin: 0.5em 0;
  padding-left: 1em;
  border-left: 1px solid var(--border);
  font-style: italic;
  color: var(--dim);
}
.wing-footer { margin-top: 3em; }

/* Wing artifacts — items + crafted items the LLM grouped into this hall.
   Renders below the scrolls list, dimmer than the scrolls themselves to
   keep visual hierarchy (the scrolls are the wing's primary content). */
.wing-artifacts { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--border); }
.wing-artifacts-heading {
  color: var(--dim);
  font-size: 0.9em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wing-items, .wing-crafted { list-style: none; padding-left: 0; margin: 0.5em 0; }
.wing-items li, .wing-crafted li { margin: 0.8em 0; }

/* ───────────────────────────────────────────────────────────────────────── */
/* Crafting view */

.crafting h2 { color: var(--yellow); letter-spacing: 0.08em; }
.crafting h3 {
  margin-top: 2em;
  color: var(--dim);
  font-size: 0.9em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.crafting h3 a.small { font-size: 0.85em; margin-left: 0.5em; font-weight: normal; text-transform: none; letter-spacing: 0; }

.craft-notice {
  border-left: 2px solid var(--dim);
  padding: 0.5em 1em;
  margin: 1em 0;
  font-size: 0.95em;
  color: var(--dim);
}
.craft-notice.success {
  border-color: var(--yellow);
  color: var(--yellow);
}

.crafted-list, .codex-crafted { list-style: none; padding-left: 0; }
.crafted-list li, .codex-crafted li { margin: 1em 0; }
.crafted-empty { font-style: italic; margin: 0.5em 0 1.5em; }
.crafted-desc { margin: 0.3em 0 0 0; }
.crafted-sources { font-size: 0.85em; margin: 0.2em 0 0 0; }

/* The crafted-link button is the click target for using the crafted item.
   Styled like an anchor — yellow, underlined on hover, no boxy button look. */
.crafted-link {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--yellow);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  display: block;
}
.crafted-link:hover { text-decoration: underline; }
.crafted-link strong { color: var(--yellow); }

/* Ingredient list — selectable inventory items. The whole row is a label
   wrapping the hidden-styled checkbox + visible body, so taps anywhere on
   the row toggle selection (mobile-first, mouse-friendly on desktop). */
.ingredient-list { list-style: none; padding-left: 0; }
.ingredient {
  margin: 0.5em 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: border-color 0.15s, background 0.15s;
}
.ingredient label {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  padding: 0.7em 1em;
  cursor: pointer;
  min-height: 44px;
}
.ingredient input[type="checkbox"] {
  margin-top: 0.3em;
  accent-color: var(--yellow);
  flex-shrink: 0;
}
.ingredient .ingredient-body { flex: 1; }
.ingredient .ingredient-body p { margin: 0.2em 0; }
.ingredient-from { font-size: 0.85em; }

/* Hover (desktop) + selected (any) state. */
.ingredient:hover { border-color: var(--dim); background: rgba(212, 184, 90, 0.03); }
.ingredient:has(input:checked) {
  border-color: var(--yellow);
  background: rgba(212, 184, 90, 0.06);
}
.ingredient:has(input:disabled:not(:checked)) {
  opacity: 0.4;
}
.ingredient.disabled { opacity: 0.5; }

.craft-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1em 0;
  padding: 0.5em 0;
  border-top: 1px solid var(--border);
}
#craft-button {
  padding: 0.6em 1.5em;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.05em;
}
#craft-button:disabled {
  border-color: var(--border);
  color: var(--border);
  cursor: not-allowed;
}
#craft-button:hover:not(:disabled) { background: rgba(212, 184, 90, 0.1); }

/* ───────────────────────────────────────────────────────────────────────── */
/* Mobile (≤600px). Tap-first: stack controls, enlarge tap targets to ≥44px,
   hide decorative <kbd> hints (you don't have a keyboard), give inputs and
   buttons proper width. The keyboard layer still works for anyone on an
   external keyboard. */

@media (max-width: 600px) {
  html, body { font-size: 15px; }
  main { padding: 1em 0.75em; }

  /* Flatten <kbd> chips on touch — without a keyboard the shortcut hint
     is noise, and the chip styling makes labels read as "[s]tep back"
     instead of "step back". Desktop keeps the styled chip. */
  button kbd, a kbd, .controls kbd {
    all: unset;
    font-family: inherit;
  }
  /* Hide kbd-only prefixes entirely (where the shortcut letter isn't part
     of the visible label — e.g. "k codex", "/pivot"). On desktop these
     spans are unstyled and render the chip + label normally. */
  .shortcut-only { display: none; }

  /* Buttons go full-width with ≥44px tap targets. */
  button {
    display: block;
    width: 100%;
    padding: 0.6em 0.7em;
    margin: 0.35em 0;
    text-align: left;
    min-height: 44px;
  }
  /* …but inline submit buttons (start/prompt forms) stay short. */
  .start button, .prompt form button { width: auto; display: inline-block; }

  /* Door / combat / pick lists — full-width buttons. */
  .exits li, .combat li, .prompt li { margin: 0.5em 0; }
  .exits li button, .combat li button, .prompt li button { margin: 0; }
  .exits li span.dim {
    display: block;
    margin-top: 0.3em;
    padding-left: 0.5em;
    font-size: 0.9em;
  }

  /* Controls grid → 2 columns on phones (overrides the 4-col desktop default). */
  .controls { grid-template-columns: 1fr 1fr; margin-top: 1.5em; }
  .controls > * { min-height: 44px; }

  /* Trapdoor: button + hook text stacked. */
  .trapdoor { margin: 1.5em 0; }
  .trapdoor button { display: inline-block; width: auto; margin-right: 0.5em; }

  /* Hall-nav already flex by default; just give buttons proper height. */
  .hall-nav button { min-height: 44px; }

  /* Take-item & combat-hint buttons */
  .item button, .combat-hint button { margin-top: 0.8em; }

  /* Text inputs full width on small screens. */
  input[type="text"], input[type="password"] { width: 100%; }

  /* Bottom back-link anchors in long pages — give them tap-target footprint. */
  .codex > p > a, .history > p > a, .full-text button, .prompt p a,
  .wing-footer a {
    display: inline-block;
    padding: 0.6em 1em;
    border: 1px solid var(--border);
    border-radius: 2px;
    min-height: 44px;
  }

  /* Wing hall: tighter corridor column on phones. */
  .wing-scroll { grid-template-columns: 1.5em 1fr; gap: 0.6em; }

  /* Room panel: tighter padding above the fold. */
  .room { padding: 0.8em 1em; }

  /* Mobile: looks like a button (bordered, padded tap target) but quiet —
     dim border and text so it sits below the description without competing
     with door buttons for visual primacy. Sized to be tappable, not loud. */
  .inline-full-text {
    display: inline-block;
    margin: 1em 0 0;
    padding: 0.5em 1em;
    min-height: 44px;
    font-size: 0.9em;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--dim);
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
  }
  .inline-full-text:active {
    color: var(--fg);
    border-color: var(--dim);
  }

  /* Smaller headings — desktop sizes overpower a phone viewport. */
  h1 { font-size: 1.35em; }
  h2 { font-size: 1.1em; }

  /* Crafting: bottom-sticky meld CTA so the player always has the action
     in reach while scrolling a long ingredient list. */
  .craft-controls {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 0.6em 0.8em;
    z-index: 5;
  }
  #craft-button { width: auto; }

  /* History entries should read as tappable prose lines, NOT full-width block
     buttons. The generic `button { display:block; width:100% }` rule above turns
     each .goto-link into a stacked block and crowds the section/via spans beside
     it — override back to an inline-block link with room to breathe and a real
     tap footprint. The 'via …' label drops to its own dim line. */
  .history li { margin: 0.8em 0; line-height: 1.7; }
  /* Drop the section label on phones — article + via is enough; the section
     name is what crowds the narrow row. */
  .history .room-section { display: none; }
  .history .goto-link {
    display: inline-block;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0.15em 0;
  }
  .history .via {
    display: block;
    margin-left: 0;
    margin-top: 0.15em;
  }
  .history ul.past { padding-left: 0.75em; }
}