/* components/rooms.css — every section of a chapter is a room (.spw/surfaces/rooms.spw).
 *
 * A room's Spw signature says what kind of room it is, and the page reads
 * it that way. The container is the kind, and the kind is the personality:
 *
 *   [ ]  window     framed glass, a narrower measure: you may only look in
 *   { }  room       a warm full panel, lit from above: stand in it a minute
 *   ( )  gathering  rounded ends, air between the voices: all arrive together
 *   < >  passage    a narrow corridor, a rule that points on, a quicker step
 *
 * The operator (the room's motion) adds one accent: the section's rail and
 * the sigil in its doorplate take its hue. Classes only (spw:probes checks
 * attribute parity): .room--{kind}, .room-motion--{motion}, and the states
 * rooms.mjs sets (.is-current .is-folded .is-sealed .is-read .is-arriving).
 *
 * Bindings own the section's paper (bindings.css is the last word on
 * colour), so kinds speak through shape, measure, rhythm and an ::after
 * overlay that never fills behind the words. Inks are mixed with each
 * binding's own --text-color-main, which keeps them AA in every cover and
 * in lamplight. Loaded after reading.css and bindings.css; unlayered.
 */

/* ─── Hues: four kinds, twelve motions ─────────────────────────────── */

html {
  --room-hue-window: #2a7f86;
  --room-hue-room: #b0602a;
  --room-hue-gathering: #7b4f9e;
  --room-hue-passage: #3f5f8f;

  --room-hue-potential: #6a55b0;
  --room-hue-confluence: #1f7a6f;
  --room-hue-action: #c0532a;
  --room-hue-probe: #2f6fb0;
  --room-hue-integration: #a07a12;
  --room-hue-annotation: #7a5a3a;
  --room-hue-ground: #5b6b3a;
  --room-hue-lean: #4a5f8a;
  --room-hue-value: #b86e10;
  --room-hue-measure: #7d7224;
  --room-hue-substrate: #2f6b45;
  --room-hue-perspective: #a8436a;
}

/* Night rooms (lamplight, slate, starfield): the same hues, lifted toward the lamp. */
html:is([data-binding-tone="dark"], [data-nook-light="lamp"]) {
  --room-hue-window: #6cc3c4;
  --room-hue-room: #eaa06a;
  --room-hue-gathering: #c9a6e0;
  --room-hue-passage: #9db8e6;

  --room-hue-potential: #b9a8ee;
  --room-hue-confluence: #6fcfbf;
  --room-hue-action: #f09a72;
  --room-hue-probe: #8fc1f0;
  --room-hue-integration: #f0d46a;
  --room-hue-annotation: #d9b98c;
  --room-hue-ground: #bccf8e;
  --room-hue-lean: #a9bce6;
  --room-hue-value: #f2b25e;
  --room-hue-measure: #dccf7a;
  --room-hue-substrate: #8fd3a6;
  --room-hue-perspective: #f09cbc;
}

:is(.room, .room-chip, .room-door-button).room--window,
.room-chip--window,
.room-door--window { --room-kind-hue: var(--room-hue-window); }
:is(.room, .room-chip, .room-door-button).room--room,
.room-chip--room,
.room-door--room { --room-kind-hue: var(--room-hue-room); }
:is(.room, .room-chip, .room-door-button).room--gathering,
.room-chip--gathering,
.room-door--gathering { --room-kind-hue: var(--room-hue-gathering); }
:is(.room, .room-chip, .room-door-button).room--passage,
.room-chip--passage,
.room-door--passage { --room-kind-hue: var(--room-hue-passage); }

.room-motion--potential { --room-motion-hue: var(--room-hue-potential); }
.room-motion--confluence { --room-motion-hue: var(--room-hue-confluence); }
.room-motion--action { --room-motion-hue: var(--room-hue-action); }
.room-motion--probe { --room-motion-hue: var(--room-hue-probe); }
.room-motion--integration { --room-motion-hue: var(--room-hue-integration); }
.room-motion--annotation { --room-motion-hue: var(--room-hue-annotation); }
.room-motion--ground { --room-motion-hue: var(--room-hue-ground); }
.room-motion--lean { --room-motion-hue: var(--room-hue-lean); }
.room-motion--value { --room-motion-hue: var(--room-hue-value); }
.room-motion--measure { --room-motion-hue: var(--room-hue-measure); }
.room-motion--substrate { --room-motion-hue: var(--room-hue-substrate); }
.room-motion--perspective { --room-motion-hue: var(--room-hue-perspective); }

/* Type in a hue leans to the binding's own ink, so it clears 4.5:1 on its paper. */
.room,
.room-chip,
.room-door-button {
  --room-ink: var(--text-color-main, #161d2b);
  --room-ink-soft: var(--text-color-alt, #3a455c);
  --room-motion-ink: color-mix(in oklab, var(--room-motion-hue, var(--room-ink-soft)) 58%, var(--room-ink));
  --room-kind-ink: color-mix(in oklab, var(--room-kind-hue, var(--room-ink-soft)) 58%, var(--room-ink));
  --room-at-ink: color-mix(in oklab, var(--room-hue-perspective) 52%, var(--room-ink));
}

/* ─── The doorplate: signature, place, air ─────────────────────────── */

.room-head {
  display: grid;
  gap: 0.18rem;
  margin: 0.05rem 0 0.8rem;
  text-indent: 0;
}

main.chapter > [data-voice-shape="block"] > .voice-kicker + .room-head {
  margin-top: -0.2rem;
}

.room-doorplate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: 0.74rem;
  line-height: 1.35;
}

.room-sig,
.room-chip-sig {
  font: inherit;
  padding: 0;
  background: none;
  border: 0;
  color: var(--room-ink-soft);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.room-sig-op {
  font-weight: 700;
  font-size: 1.14em;
  color: var(--room-motion-ink);
}

.room-sig-brace {
  font-weight: 700;
  color: var(--room-kind-ink);
}

.room-sig-label {
  color: var(--room-ink);
}

.room-sig-at {
  color: var(--room-at-ink);
  font-weight: 700;
}

.room-sig-who {
  color: var(--room-ink-soft);
  font-style: italic;
}

.room-count {
  margin-inline-start: auto;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--room-ink-soft);
}

.room-air {
  font-family: var(--font-family-body, Georgia, serif);
  font-style: italic;
  font-size: 0.95em;
  line-height: 1.45;
  color: var(--room-ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}

/* The operator's accent: the section's rail takes the room's motion. */
main.chapter > .room::before,
main.chapter > .room.is-ebook-active::before {
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--room-motion-hue, var(--theme-accent-main)) 72%, transparent),
    color-mix(in oklab, var(--room-motion-hue, var(--theme-accent-main)) 22%, transparent));
}

/* ─── Kinds ────────────────────────────────────────────────────────── */

main.chapter > .room::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* [ ] A window: framed glass and a narrower measure. You look in. */
main.chapter > .room--window {
  max-width: min(100%, calc(56ch + var(--flow-pad, 1rem) * 2));
  border-radius: 3px;
}

main.chapter > .room--window::after {
  border: 1px solid color-mix(in oklab, var(--room-kind-hue) 42%, transparent);
  box-shadow:
    inset 0 0 0 4px color-mix(in srgb, var(--theme-paper, #fffcf6) 22%, transparent),
    inset 0 0 0 5px color-mix(in oklab, var(--room-kind-hue) 20%, transparent);
  background: linear-gradient(116deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 18%);
}

/* { } A room: a warm full panel, lamp-lit from above. You stand in it. */
main.chapter > .room--room {
  border-radius: 0.9rem;
  padding-block: calc(1.05rem * var(--cozy, 1)) calc(1.2rem * var(--cozy, 1));
}

main.chapter > .room--room::after {
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--room-kind-hue) 20%, transparent),
    inset 0 3.2rem 3.4rem -3rem color-mix(in oklab, var(--color-gold, #c4922e) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-gold, #c4922e) 7%, transparent), transparent 45%);
}

/* ( ) A gathering: rounded ends, and air between the voices. Everything arrives together. */
main.chapter > .room--gathering {
  border-radius: 1.7rem;
  padding-inline: calc(var(--flow-pad, 1rem) + 0.7rem);
  padding-block: calc(1rem * var(--cozy, 1)) calc(1.15rem * var(--cozy, 1));
}

main.chapter > .room--gathering::after {
  border-inline: 2px solid color-mix(in oklab, var(--room-kind-hue) 46%, transparent);
}

main.chapter > .room--gathering > p + p {
  text-indent: 0;
  margin-top: calc(0.8em * var(--cozy, 1));
}

/* < > A passage: a narrow corridor, a rule that points on, a quicker step. You go through. */
main.chapter > .room--passage {
  max-width: min(100%, calc(52ch + var(--flow-pad, 1rem) * 2));
  border-radius: 2px;
  --chapter-line-height: calc(1.38 + 0.24 * var(--cozy, 1));
}

main.chapter > .room--passage::after {
  background:
    linear-gradient(90deg, transparent, color-mix(in oklab, var(--room-kind-hue) 62%, transparent)) top left / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 30%, color-mix(in oklab, var(--room-kind-hue) 40%, transparent)) bottom left / 100% 1px no-repeat;
}

/* The rule's arrowhead, at the far end of the corridor. */
main.chapter > .room--passage > .room-head::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-top: 1px solid color-mix(in oklab, var(--room-kind-hue) 70%, transparent);
  border-right: 1px solid color-mix(in oklab, var(--room-kind-hue) 70%, transparent);
  transform: rotate(45deg);
  pointer-events: none;
}

main.chapter > .room--passage > p + p {
  margin-top: 0;
}

/* Night rooms: glass catches less light. */
html:is([data-binding-tone="dark"], [data-nook-light="lamp"]) main.chapter > .room--window::after {
  background: linear-gradient(116deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 18%);
  box-shadow: inset 0 0 0 5px color-mix(in oklab, var(--room-kind-hue) 16%, transparent);
}

html:is([data-binding-tone="dark"], [data-nook-light="lamp"]) main.chapter > .room--room::after {
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--room-kind-hue) 18%, transparent),
    inset 0 3.2rem 3.4rem -3rem color-mix(in oklab, var(--color-gold, #e2a553) 18%, transparent);
  background: none;
}

/* ─── A room still being written: a sealed door with a day on it ──── */

main.chapter > .room.is-drafting {
  padding-block: 0.9rem;
  border: 1px dashed color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 45%, transparent);
}

/* A door shows its plate and its day, and nothing other modules hang on rooms. */
main.chapter > .room.is-drafting > :not(.room-drafting-title, .room-head, .room-drafting-note) {
  display: none !important;
}

main.chapter > .room.is-drafting > .room-drafting-title {
  margin-block: 0 0.3rem;
  font-size: 1em;
  font-style: italic;
}

.room-drafting-note {
  font-family: var(--font-family-body, Georgia, serif);
  font-size: 0.92em;
  color: var(--room-ink-soft, var(--text-color-alt));
}

/* ─── The strip under the title: one chip per room ─────────────────── */

.room-strip {
  max-width: 100%;
  margin-top: 0.15rem;
}

.room-strip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.room-strip-item {
  margin: 0;
  max-width: none;
}

.room-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 34%, transparent);
  border-radius: 0.4rem;
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  line-height: 1.3;
  color: var(--room-ink-soft);
  text-decoration: none;
  text-shadow: none;
  background: color-mix(in srgb, var(--bg-color-content-strong, #fffcf6) 55%, transparent);
  transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

.room-chip--window { border-radius: 2px; }
.room-chip--gathering { border-radius: 999px; }
.room-chip--passage { border-radius: 2px 999px 999px 2px; padding-inline-end: 0.65rem; }

.room-chip:hover {
  border-color: color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 70%, transparent);
}

.room-chip:focus-visible {
  outline: 2px solid var(--focus-outline-color, #a3501f);
  outline-offset: 2px;
}

/* Lit when read: the motion's hue, and a small lamp. */
.room-chip.is-read {
  border-color: color-mix(in oklab, var(--room-motion-hue, var(--theme-accent-main)) 60%, transparent);
  background: color-mix(in oklab, var(--room-motion-hue, var(--theme-accent-main)) 15%, var(--bg-color-content-strong, #fffcf6));
  color: var(--room-ink);
}

.room-chip.is-read::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--room-motion-ink);
  box-shadow: 0 0 0.4rem color-mix(in oklab, var(--room-motion-hue, var(--color-gold)) 70%, transparent);
}

/* Where the reader is now. */
.room-chip.is-here {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 80%, transparent);
}

.room-chip.is-drafting {
  border-style: dashed;
  background: transparent;
}

html:is([data-binding-tone="dark"], [data-nook-light="lamp"]) .room-chip {
  background: var(--room-chip, rgba(32, 46, 38, 0.9));
}

html:is([data-binding-tone="dark"], [data-nook-light="lamp"]) .room-chip.is-read {
  background: color-mix(in oklab, var(--room-motion-hue) 20%, var(--room-chip, rgb(32, 46, 38)));
}

/* A phone has room for the shape and the name; the keeper is in the room itself. */
@media (max-width: 39.99rem) {
  .room-chip :is(.room-sig-at, .room-sig-who) {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .room-chip.is-fresh {
    animation: room-chip-lit 1.3s ease-out;
  }

  @keyframes room-chip-lit {
    0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--room-motion-hue, var(--color-gold)) 70%, transparent); }
    100% { box-shadow: 0 0 0 0.55rem transparent; }
  }
}

/* ─── Progress marks ───────────────────────────────────────────────── */

/* The end of a room: what the reader passes when the room is done. */
.room-end {
  display: block;
  height: 1px;
  margin-top: -1px;
  pointer-events: none;
}

/* ─── Room by room (trial): one room whole, the rest folded or sealed ─ */

.room-latch,
.room-door {
  display: none;
}

main.chapter.is-room-by-room > .room:is(.is-sealed, .is-folded) {
  contain-intrinsic-size: auto 4.5rem;
}

/* Sealed prose stays findable: hidden="until-found", not display:none
   (the reset hides every [hidden]; these come back for find-in-page). */
main.chapter.is-room-by-room > .room > .room-held[hidden] {
  display: revert !important;
  margin-block: 0;
  padding-block: 0;
  border-block-width: 0;
  min-height: 0;
}

/* Anything another module adds to a closed room waits with it. */
main.chapter.is-room-by-room > .room:is(.is-sealed, .is-folded) > :not(.room-head, .room-door, .room-end, .voice-kicker, .room-held, h2) {
  display: none !important;
}

main.chapter.is-room-by-room > .room:is(.is-sealed, .is-folded) > .room-head {
  margin-bottom: 0;
}

main.chapter.is-room-by-room > .room:is(.is-sealed, .is-folded) .room-latch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0.25rem 0.75rem;
  min-height: 2rem;
  border: 1px solid color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 50%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--room-kind-ink, var(--text-color-main));
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}

main.chapter.is-room-by-room > .room:is(.is-sealed, .is-folded) .room-latch:hover {
  background: color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 12%, transparent);
}

main.chapter.is-room-by-room > .room:is(.is-sealed, .is-folded) .room-latch:focus-visible {
  outline: 2px solid var(--focus-outline-color, #a3501f);
  outline-offset: 2px;
}

/* A sealed room is a door: its kind in the frame, its title, its air. */
main.chapter.is-room-by-room > .room.is-sealed {
  padding-block: calc(0.85rem * var(--cozy, 1));
  border: 1px dashed color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 40%, transparent);
}

main.chapter.is-room-by-room > .room.is-sealed > h2 {
  margin-block: 0 0.35rem;
  font-size: 1.05em;
}

/* A room already read folds to its signature: one line, and a way back in. */
main.chapter.is-room-by-room > .room.is-folded {
  padding-block: 0.45rem;
}

main.chapter.is-room-by-room > .room.is-folded .room-air {
  display: none;
}

main.chapter.is-room-by-room > .room.is-folded > .room-head {
  grid-template-columns: 1fr auto;
  align-items: center;
}

main.chapter.is-room-by-room > .room.is-folded .room-latch {
  margin-top: 0;
}

main.chapter.is-room-by-room > .room.is-folded::after {
  opacity: 0.55;
}

main.chapter.is-room-by-room > * + .room:is(.is-sealed, .is-folded) {
  margin-top: calc(0.55rem * var(--cozy, 1));
}

/* Plates hang in the room they introduce; behind a closed door, so are they. */
main.chapter.is-room-by-room > figure.is-behind-door {
  display: none;
}

/* The door at a room's end, phrased by the kind of room it opens onto. */
main.chapter.is-room-by-room > .room.is-current > .room-door {
  display: flex;
  justify-content: flex-end;
  margin-top: calc(1.2rem * var(--cozy, 1));
}

.room-door-button {
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.1rem 0.8rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 55%, transparent);
  border-radius: 0.6rem;
  background: color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 8%, transparent);
  color: var(--room-ink);
  text-align: start;
  cursor: pointer;
  transition: background-color 240ms ease, transform 240ms ease;
}

.room-door-button.room-door--window { border-radius: 3px; }
.room-door-button.room-door--gathering { border-radius: 999px; padding-inline: 1.3rem; }
.room-door-button.room-door--passage { border-radius: 3px 999px 999px 3px; }

.room-door-button:hover {
  background: color-mix(in oklab, var(--room-kind-hue, var(--theme-accent-main)) 16%, transparent);
}

.room-door-button:focus-visible {
  outline: 2px solid var(--focus-outline-color, #a3501f);
  outline-offset: 3px;
}

.room-door-count {
  grid-column: 1;
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--room-ink-soft);
}

.room-door-phrase {
  grid-column: 1;
  font-family: var(--font-family-body, Georgia, serif);
  font-size: 1em;
  line-height: 1.3;
}

.room-door-glyph {
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-weight: 700;
  color: var(--room-kind-ink);
  white-space: nowrap;
}

.room-door-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.2em;
  color: var(--room-motion-ink);
}

.room-door-sealed {
  margin: 0;
  font-style: italic;
  color: var(--text-color-alt);
}

@media (prefers-reduced-motion: no-preference) {
  .room-door-button:hover .room-door-arrow {
    transform: translateX(2px);
    transition: transform 200ms ease;
  }

  main.chapter > .room.is-arriving {
    animation: room-arrive 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  /* A passage is a quicker step. */
  main.chapter > .room--passage.is-arriving {
    animation-duration: 220ms;
  }

  @keyframes room-arrive {
    from { opacity: 0.35; transform: translateY(0.6rem); }
    to { opacity: 1; transform: none; }
  }
}

@media print {
  .room-strip,
  .room-door,
  .room-latch {
    display: none !important;
  }

  main.chapter > .room::after {
    content: none;
  }
}