@import url("../elemental-tokens.css");
/* Strategic CYOA — shared brand styling (matches transform.html / the scene pages). */
/* Hard mode — the relay is the lab. Nigredo ground, albedo ink, Inter body,
   Plex Mono for φ signal. Element accents are raised one ramp-stop so they
   read against the dark ground (cores stay canonical elsewhere). */
:root {
  --paper: var(--ground);
  --ink: var(--ink-on);
  --ochre: var(--accent-on);
  --c-air:   var(--air);      /* core is already light */
  --c-water: #5E7888;         /* el-tidal — water core is too deep for nigredo */
  --c-fire:  #C06A32;         /* el-copper */
  --c-wood:  #73834B;         /* el-olive */
  --c-earth: #C8B071;         /* el-straw — earth-op is too dim for nigredo */
  --c-metal: #7C8286;         /* el-steel */
  --hairline: var(--rule);
  --wash: var(--wash);
  --measure: 660px;
  --body-size: 17px;
  --line: 1.62;
  /* set per-page: --accent is the leading element's color */
  --accent: var(--ochre);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-architect);
  font-size: var(--body-size); line-height: var(--line); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { max-width: var(--measure); margin: 0 auto; padding: 0 28px; }

.back {
  position: absolute; top: 28px; left: 28px;
  font-style: italic; font-size: 15px; color: var(--ochre);
  text-decoration: none; line-height: 1;
}
.back:hover { color: var(--ink); }

.brand-floret { pointer-events: none;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  padding-top: 36px; font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-weight: 400; font-size: 22px; line-height: 1; color: var(--ink);
  opacity: 0.85;
}
.brand-floret .star { color: var(--ochre); font-size: 16px; transform: translateY(-1px); }
.brand-floret .it { font-style: italic; }

.head { padding-top: 7vh; padding-bottom: 3vh; }
.head .eyebrow {
  font-style: italic; font-size: 0.9em; letter-spacing: 0.04em;
  color: var(--accent); margin: 0 0 0.8em; text-transform: lowercase;
}
.head h1 {
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  font-weight: 400; font-size: calc(var(--body-size) * 2.0);
  line-height: 1.18; margin: 0 0 0.7em; letter-spacing: -0.005em;
}
.head .orientation { margin: 0 0 1.1em; }
.head .orientation:last-child { margin-bottom: 0; }

/* The element glyph, large + quiet, sets the scene's element. */
.element-mark {
  font-family: "Cormorant Garamond", serif; font-size: 2.2em;
  color: var(--accent); line-height: 1; display: inline-block; margin-bottom: 0.2em;
}

/* Incoming φ — the current arriving from the prior element. */
.incoming {
  border-left: 2px solid var(--accent); padding: 0.2em 0 0.2em 20px;
  margin: 4vh 0; opacity: 0.95;
}
.incoming .from { font-style: italic; font-size: 0.92em; opacity: 0.7; margin: 0 0 0.5em; }
.incoming .phi {
  font-family: var(--font-scribe);
  font-size: 0.86em; letter-spacing: 0.01em; margin: 0 0 0.5em; color: var(--ink);
}
.incoming .reading { font-style: italic; margin: 0; opacity: 0.85; }

/* The game. */
#game { padding: 3vh 0 4vh; min-height: 30vh; }
.cyoa-framing {
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-size: calc(var(--body-size) * 1.25); line-height: 1.3;
  margin: 0 0 1.6em; color: var(--ink);
}
.cyoa-options { display: flex; flex-direction: column; gap: 0; }
.cyoa-door {
  text-align: left; width: 100%; background: transparent; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--hairline);
  padding: 1.1em 0; font-family: inherit; color: var(--ink);
  display: block; transition: padding-left 0.15s ease;
}
.cyoa-door:first-child { border-top: 1px solid var(--hairline); }
.cyoa-door:hover { padding-left: 12px; }
.cyoa-door:hover .cyoa-door-label { color: var(--accent); }
/* movement options carry a colored operator mark (--el-color set per element); tap/hover tints to it */
.cyoa-door .el-glyph { font-family: "Cormorant Garamond", serif; color: var(--el-color, var(--accent));
  margin-right: 0.5em; font-size: 1.06em; }
.cyoa-door[style*="--el-color"]:hover .cyoa-door-label,
.cyoa-door[style*="--el-color"]:active .cyoa-door-label { color: var(--el-color); }
.cyoa-door-label {
  display: block; font-size: calc(var(--body-size) * 1.02); line-height: 1.4;
}
.cyoa-door-hint {
  display: block; font-style: italic; font-size: 0.82em; opacity: 0.62;
  margin-top: 0.35em; line-height: 1.45;
}

/* Resolution — the φ this element produced + the handoff. */
.resolve { padding: 2vh 0 4vh; }
.resolve .label { font-style: italic; opacity: 0.6; font-size: 0.9em; margin: 0 0 0.7em; }
.resolve .phi {
  font-family: var(--font-scribe);
  font-size: calc(var(--body-size) * 0.92); letter-spacing: 0.01em;
  background: var(--wash); border: 1px solid var(--hairline);
  padding: 0.8em 1em;
  margin: 0 0 1.4em; overflow-x: auto;
}
.resolve .reading { font-style: italic; margin: 0 0 2.2em; }
.resolve .chain {
  font-family: var(--font-scribe); font-size: 0.84em;
  opacity: 0.85; margin: 0 0 1.6em; line-height: 1.6;
}
.door-link {
  font-family: "EB Garamond", Garamond, serif; font-style: italic;
  font-size: calc(var(--body-size) * 1.15); color: var(--accent);
  text-decoration: none; border-bottom: 1px solid var(--accent);
  padding-bottom: 2px; line-height: 1; display: inline-block;
}
.door-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.copy-row {
  margin: 1.6em 0 0; font-size: 0.86em; opacity: 0.7;
  display: flex; gap: 0.6em; align-items: baseline; flex-wrap: wrap;
}
.copy-row code {
  font-family: var(--font-scribe); font-size: 0.92em;
  background: var(--wash); padding: 0.2em 0.45em;
}
.copy-btn {
  background: transparent; border: 0; border-bottom: 1px dotted var(--accent);
  color: var(--accent); cursor: pointer; font-family: inherit; font-style: italic;
  font-size: 0.95em; padding: 0;
}

/* the resolved retrieval prompt — a readable block to copy */
.retrieve-prompt {
  font-family: "EB Garamond", Garamond, serif;
  font-size: calc(var(--body-size) * 0.98);
  line-height: 1.6;
  background: var(--wash);
  border-left: 2px solid var(--accent);
  padding: 1.1em 1.3em;
  white-space: pre-wrap;
}

/* ── Naming the situation — optional context that travels with the reading.
   Selects are stripped to the site's keyline language: square, transparent,
   one hairline underline, caret as text so it inherits the ink. ── */
.sit-block { padding: 1vh 0 5vh; }
.sit-label { display: block; font-style: italic; margin: 0 0 0.7em; }
.sit-label .opt { opacity: 0.55; }
.sit-input, .sit-select {
  width: 100%; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  padding: 0.4em 0.55em; font-family: inherit; font-size: 1em;
  transition: border-color var(--t-state) var(--ease-precipitate);
}
.sit-input:focus, .sit-select:focus { outline: none; border-bottom-color: var(--accent); }
.sit-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.7em 1.8em; margin-top: 2.1em; }
/* keep both selects on one line even when one label wraps */
.sit-pair > div { display: flex; flex-direction: column; justify-content: space-between; }
.sit-select-wrap { position: relative; display: block; }
.sit-select { appearance: none; -webkit-appearance: none; padding-right: 1.7em; cursor: pointer; }
.sit-select option { background: var(--paper); color: var(--ink); }
.sit-select-wrap::after {
  content: "▾"; position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--ash); font-size: 0.85em;
}
.sit-hint {
  font-size: 0.85em; line-height: 1.45; font-style: italic; opacity: 0.6; margin: 1.5em 0 0;
  transition: opacity var(--t-state), color var(--t-state);
}

/* ── The walk: three dependent selects, all revisable until the line is cut ── */
.walk { display: grid; gap: 1.5em; margin: 2em 0 0; }
.walk-field { display: flex; flex-direction: column; }
.walk-gloss {
  margin: 1.2em 0 0; font-style: italic; font-size: 0.94em; opacity: 0.8;
  border-left: 2px solid var(--accent); padding-left: 0.9em; min-height: 1.4em;
}
.walk-all { margin: 1.6em 0 0; font-size: 0.9em; }
.walk-all summary {
  cursor: pointer; font-family: var(--font-scribe); font-size: 0.78em;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); opacity: 0.85;
}
.walk-all summary:hover { opacity: 1; }
.walk-all ul { list-style: none; margin: 1em 0 0; padding: 0; }
.walk-all ul ul { margin: 0.3em 0 1em 0; padding-left: 1em; }
.walk-all ul ul li { opacity: 0.78; padding: 0.15em 0; }
.walk-all strong { font-weight: 500; }
.walk-preview { margin: 1.8em 0 0; font-size: 0.9em; opacity: 0.8; }
.walk-preview code { font-family: var(--font-scribe); font-size: 0.95em; color: var(--accent); }

/* The full string handed to the guide — selectable by hand as well as copyable */
.handoff-block {
  font-family: var(--font-scribe); font-size: 0.8em; line-height: 1.6;
  background: var(--wash); border: 1px solid var(--hairline);
  padding: 1em 1.1em; margin: 0 0 0.9em; white-space: pre-wrap; word-break: break-word;
  overflow-x: auto; user-select: all;
}

.honest {
  font-style: italic; margin: 6vh 0 0; padding: 0 0 0 22px;
  border-left: 2px solid var(--ochre); max-width: 560px;
  font-size: calc(var(--body-size) * 0.92); opacity: 0.85;
}
.hairline { width: 64px; height: 1px; background: var(--ochre); margin: 6vh auto; border: 0; opacity: 0.85; }
footer { text-align: center; padding: 8vh 28px; font-size: 14px; opacity: 0.55; }
footer a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
footer a:hover { color: var(--ochre); border-bottom-color: var(--ochre); }
::selection { background: rgba(var(--accent-rgb),0.22); color: var(--ink); }

@media (max-width: 640px) {
  :root { --body-size: 18px; }
  main { padding: 0 22px; }
  .back { top: 20px; left: 22px; }
  .head { padding-top: 6vh; }
  .head h1 { font-size: calc(var(--body-size) * 1.8); }
  .sit-pair { grid-template-columns: 1fr; gap: 1.6em; }
}

/* A single full-width field under the scale/field pair */
.sit-field-single { display: flex; flex-direction: column; margin-top: 1.7em; }
.sit-select:disabled { opacity: 0.45; cursor: default; }