/* ==========================================================================
   research-studio.css — Research Studio, inside the Studios room.

   Loaded AFTER studios-entry.css and inherits its tokens (--se-ease,
   --se-hair, --se-paper). It adds no light of its own: everything warm on this
   surface still comes from the sun (studios-entry.css rule 1).

   THE ROOM IS A JOURNAL SPREAD.

     .rs-scroll     one scroll region, so the composer below never moves
       .rs-spread   leaf | margin
         .rs-leaf   dateline · question · ledger-or-note · finding ·
                    go further · System Receipt (the colophon) · actions
         .rs-margin contents · sources (with the index mark) · Version History

   Four things here look like mistakes and are not.

   1. THERE IS NO CARD. The room's stage is already a lifted warm sheet
      (studios-entry's editorial theme). The entry is set DIRECTLY on it and
      the margin is divided by a hairline rule — a second material inside the
      first is what squeezed the finding into a 200px letterbox, and it is
      also a fifth material the design system does not have (DESIGN.md §6).

   2. THE MARGIN IS STICKY, NOT FIXED. Evidence must stay level with the claim
      it supports through a long read. It scrolls with the page until it runs
      out of room, then holds.

   3. THE SCATTER SURVIVES THE FINDING. The index mark keeps its scatter after
      the dots settle onto the line: sources are not consumed by the answer,
      they are still there to be checked. Deleting it would quietly break the
      room's published promise.

   4. EVERY GEOMETRY IS IN THE SIGNATURE'S OWN 200×150 SPACE. The live index
      and the static mark on studios/index.html are literally the same drawing
      at different sizes. Re-authoring it in pixels would let the two drift.
   ========================================================================== */

.rs {
  /* The ratified reading ink (Amendment 007 / DESIGN.md D-3) and its
     descending steps. Every value on this surface comes from here.

     ALL FOUR STEPS CARRY INFORMATION, so all four clear 4.5:1 against the
     room's warm paper (#fdfaf3) — measured, not assumed:

       ink    #2a1d16               13.2:1   titles, source names, emphasis
       soft   rgba(42,29,22,0.80)    8.3:1   secondary prose
       mute   rgba(42,29,22,0.70)    5.9:1   labels, small caps, meta
       faint  rgba(42,29,22,0.62)    4.6:1   the smallest meta there is

     The floor is where it is on purpose: a fifth, lighter step would be a
     step that cannot be read, and this surface has no decorative text. */
  --rs-ink: #2a1d16;
  --rs-ink-soft: rgba(42, 29, 22, 0.8);
  --rs-ink-mute: rgba(42, 29, 22, 0.7);
  --rs-ink-faint: rgba(42, 29, 22, 0.62);
  --rs-hair: rgba(42, 29, 22, 0.13);
  --rs-hair-soft: rgba(42, 29, 22, 0.07);
  --rs-orange: #fc9b4c;

  --rs-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --rs-measure: 34rem;      /* DESIGN.md §4.3 — body never runs the full shell */
  --rs-margin-w: 254px;
  --rs-gutter: clamp(28px, 4vw, 54px);

  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  color: var(--rs-ink);
  font-family: var(--font-sans, "Geist", system-ui, sans-serif);

  /* The Markdown renderer emits the shared `.msg-answer__*` / `.msg-md__*`
     classes, which read their colour from the legacy token layer. The room is
     a HOST, so it overrides published tokens on its own wrapper and never
     reaches into the component (DESIGN.md §13.3). */
  --color-foreground: #2a1d16;
  --color-text-secondary: rgba(42, 29, 22, 0.72);
  --color-border: rgba(42, 29, 22, 0.14);
  --orch-divider: rgba(42, 29, 22, 0.14);
  --font-serif: "Libre Baskerville", Georgia, serif;
}

.rs *,
.rs *::before,
.rs *::after { box-sizing: border-box; }

/* ══ The scroll region ═════════════════════════════════════════════════════
   One scroller for the whole spread. The composer sits outside it and is
   therefore never pushed by a long report — the instrument stays exactly
   where the reader left it, which is what makes this read as one room. */
.rs-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 29, 22, 0.22) transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--se-ease-soft);
}

/* The honest state lives on the leaf too, so the spread stays lit for it —
   the entry masthead above a note is the reader's question surviving the run
   that failed to answer it. */
.rs[data-state="gathering"] .rs-scroll,
.rs[data-state="reading"] .rs-scroll,
.rs[data-state="note"] .rs-scroll { opacity: 1; pointer-events: auto; }

.rs-scroll::-webkit-scrollbar { width: 8px; }
.rs-scroll::-webkit-scrollbar-thumb {
  background: rgba(42, 29, 22, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* The leaf column IS the measure, so the dividing rule sits immediately
   beside the prose rather than floating in the middle of an over-wide column.
   Everything left over becomes the page's outer margin, on the right, where a
   book puts it — `justify-content: start` is what keeps it there. */
.rs-spread,
.rs-open__spread {
  display: grid;
  grid-template-columns:
    minmax(0, var(--rs-measure))
    minmax(var(--rs-margin-w), 320px);
  justify-content: start;
  align-items: start;
  gap: 0 var(--rs-gutter);
  min-height: 100%;
  /* The leaf's foot. Trailing controls — Retry, the actions row — must not sit
     flush against the room's clipped edge. */
  padding-bottom: clamp(14px, 3vh, 28px);
}

/* ══ The leaf ══════════════════════════════════════════════════════════════ */
.rs-leaf {
  min-width: 0;
}

/* ── The entry masthead ────────────────────────────────────────────────────
   Written the instant the question is asked. A dated, titled leaf is the
   difference between a journal and an output panel. */
.rs-entry {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.6s var(--se-ease-soft),
    transform 0.7s var(--se-ease);
}

.rs[data-state="gathering"] .rs-entry,
.rs[data-state="reading"] .rs-entry,
.rs[data-state="note"] .rs-entry { opacity: 1; transform: none; }

.rs-entry__dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rs-ink-mute);
}

.rs-entry__sep { color: var(--rs-ink-faint); }

/* The question, in the display serif. Tracking tightens as the type grows
   (DESIGN.md §4.2, the tracking law) and is not relaxed on small screens. */
.rs-entry__title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--rs-serif);
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--rs-ink);
  text-wrap: balance;
}

/* ── The ledger ────────────────────────────────────────────────────────────
   What the room is doing, in the Conductor's own words, and what it has
   actually found. Present only while a run is live. */
/* Collapsed, the ledger must occupy NOTHING — margin, padding and the rule
   included. Zeroing only its height leaves ~60px of invisible furniture
   between the question and the finding, which reads as a broken page. */
.rs-ledger {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity 0.35s var(--se-ease-soft),
    max-height 0.55s var(--se-ease),
    margin-top 0.45s var(--se-ease),
    padding-top 0.45s var(--se-ease);
}

.rs[data-state="gathering"] .rs-ledger {
  margin-top: clamp(24px, 4vh, 40px);
  padding-top: 20px;
  border-top-color: var(--rs-hair);
  max-height: 1200px;
  opacity: 1;
}

.rs-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: -0.1px;
  color: var(--rs-ink-soft);
}

/* A live state, and it says so — the word beside it carries the meaning, the
   dot only marks it (DESIGN.md §11). It is the single lit element while the
   room thinks: the sun at work. */
.rs-status__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rs-orange);
  animation: rs-breathe 2.4s ease-in-out infinite;
}

@keyframes rs-breathe {
  0%, 100% { opacity: 0.34; transform: scale(0.82); }
  50%      { opacity: 1;    transform: scale(1); }
}

.rs-status__time {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--rs-ink-faint);
}

.rs-status__stop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid var(--rs-hair);
  border-radius: 999px;
  background: transparent;
  color: var(--rs-ink-mute);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    color 0.35s var(--se-ease-soft),
    border-color 0.35s var(--se-ease-soft);
}

.rs-status__stop svg { width: 12px; height: 12px; display: block; }
.rs-status__stop:hover { color: var(--rs-ink); border-color: rgba(42, 29, 22, 0.3); }

.rs-ledger__hint {
  margin: 14px 0 0;
  max-width: 40ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--rs-ink-faint);
}

.rs-ledger__hint[hidden] { display: none; }

.rs-ledger__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* One arrival, one line. Reads as a ledger being written, which is exactly
   what it is. */
.rs-ledger__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rs-hair-soft);
  font-size: 13.5px;
  color: var(--rs-ink-soft);
  opacity: 0;
  animation: rs-rise 0.55s var(--se-ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

.rs-ledger__n {
  flex: none;
  min-width: 1.6ch;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--rs-ink-faint);
}

.rs-ledger__host { flex: none; color: var(--rs-ink); }

.rs-ledger__title {
  min-width: 0;
  color: var(--rs-ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes rs-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── The finding ───────────────────────────────────────────────────────────
   The prose. It is the hero of the leaf and it is set as body copy at the
   system's real reading ink, on paper, at a book measure. */
.rs-finding {
  margin-top: 0;
  gap: 18px;
  max-height: 0;
  overflow: hidden;
}

.rs[data-state="reading"] .rs-finding {
  margin-top: clamp(26px, 4.4vh, 42px);
  max-height: none;
  overflow: visible;
}

.rs-finding .msg-md__h,
.rs-finding .msg-answer__h {
  font-family: var(--rs-serif);
  letter-spacing: -0.02em;
  scroll-margin-top: 12px;
}

.rs[data-state="reading"] .rs-finding > * {
  opacity: 0;
  animation: rs-rise 0.6s var(--se-ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

/* ── Inline references ─────────────────────────────────────────────────────
   `[3]` in the prose becomes a live reference into the margin — but only when
   3 is a source the run actually returned. A superscript, set like one, so it
   reads as a citation rather than as a chip. */
.rs-ref {
  display: inline-block;
  min-width: 14px;
  /* Leading space only. A symmetric margin puts a visible gap between the
     marker and the full stop that follows it, which reads as a typo. */
  margin: 0 0 0 1px;
  padding: 0 3px;
  border: 0;
  border-radius: 4px;
  background: rgba(42, 29, 22, 0.07);
  color: var(--rs-ink-mute);
  font: inherit;
  font-size: 0.68em;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  vertical-align: 0.42em;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.3s var(--se-ease-soft),
    color 0.3s var(--se-ease-soft);
}

.rs-ref:hover {
  background: rgba(252, 155, 76, 0.24);
  color: var(--rs-ink);
}

/* ── Go further ────────────────────────────────────────────────────────────
   Threads the room actually pulled, taken from the finding's own headings.
   Clicking fills the composer; the reader still presses send. */
.rs-next {
  margin-top: clamp(26px, 4vh, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--rs-hair);
}

.rs-next:empty { display: none; }

.rs-next__title,
.rs-openings__title,
.rs-shelf__title,
.rs-margin__title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rs-ink-mute);
}

/* Openings and Go-further rows are the same object in two places, so they are
   governed by one rule — a stack of editorial lines, never a row of pills. */
.rs-next__row,
.rs-openings__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rs-opening__text { min-width: 0; }

/* An editorial row, not a pill: a line of type with a rule under it that
   warms on approach. Pills are for labels; this is a sentence you can take. */
.rs-next__opt,
.rs-opening {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 40px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--rs-hair-soft);
  background: transparent;
  color: var(--rs-ink-soft);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  animation: rs-rise 0.6s var(--se-ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
  transition:
    color 0.35s var(--se-ease-soft),
    border-color 0.35s var(--se-ease-soft);
}

.rs-next__opt svg,
.rs-opening svg {
  flex: none;
  width: 14px;
  height: 14px;
  opacity: 0;
  color: var(--rs-ink-faint);
  transform: translateX(-4px);
  transition:
    opacity 0.35s var(--se-ease-soft),
    transform 0.35s var(--se-ease);
}

.rs-next__opt:hover,
.rs-opening:hover {
  color: var(--rs-ink);
  border-color: rgba(42, 29, 22, 0.24);
}

.rs-next__opt:hover svg,
.rs-opening:hover svg,
.rs-next__opt:focus-visible svg,
.rs-opening:focus-visible svg { opacity: 1; transform: none; }

/* ── What the entry leaves behind ──────────────────────────────────────────
   Send is the only filled object in an Orcheum control cluster, and here the
   equivalent is Copy: the primary way work leaves the room. Everything else
   is quiet (DESIGN.md §6.6, the inverted-hierarchy rule). */
.rs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s var(--se-ease-soft) 0.12s;
}

.rs[data-state="reading"] .rs-actions {
  margin: clamp(26px, 4vh, 40px) 0 clamp(20px, 4vh, 40px);
  opacity: 1;
  max-height: none;
  overflow: visible;
}

.rs-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #221c19;
  color: #fef2e9;
  font: inherit;
  font-size: 13px;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: background 0.3s var(--se-ease-soft);
}

.rs-action svg { width: 14px; height: 14px; display: block; }
.rs-action:hover { background: #100e0c; }

.rs-action--ghost {
  margin-left: auto;
  background: transparent;
  border-color: var(--rs-hair);
  color: var(--rs-ink-soft);
}

.rs-action--ghost:hover {
  background: rgba(255, 255, 255, 0.66);
  color: var(--rs-ink);
}

/* ══ The margin ════════════════════════════════════════════════════════════
   The entry's apparatus, level with the prose it serves. Divided from the leaf
   by a rule, not by a second surface. */
.rs-margin {
  position: sticky;
  top: 0;
  align-self: start;
  /* The room's own height, measured (see `--rs-room-h` in the JS). A
     percentage here resolves against the GRID ROW — the height of the whole
     entry — so a margin taller than the room had no scroll of its own and its
     foot, the System Receipt, could never be reached. */
  max-height: var(--rs-room-h, 100vh);
  min-width: 0;
  padding-left: var(--rs-gutter);
  border-left: 1px solid var(--rs-hair);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 29, 22, 0.16) transparent;
  opacity: 0;
  transition: opacity 0.5s var(--se-ease-soft) 0.1s;
}

/* The margin holds the ENTRY's apparatus, and mid-run there is no entry yet:
   arrivals are on the leaf, in the ledger. A bare dividing rule beside an
   empty column reads as a rendering fault, so the margin waits for something
   to hold. */
.rs[data-state="reading"] .rs-margin { opacity: 1; }

.rs-margin::-webkit-scrollbar { width: 6px; }
.rs-margin::-webkit-scrollbar-thumb {
  background: rgba(42, 29, 22, 0.14);
  border-radius: 999px;
}

.rs-margin > section,
.rs-margin > nav { margin-bottom: 26px; }
.rs-margin > section:empty { display: none; }
.rs-margin > [hidden] { display: none; }

.rs-margin__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rs-margin__count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--rs-ink-faint);
}

/* ── In this entry ─────────────────────────────────────────────────────── */
.rs-contents__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rs-contents__item {
  position: relative;
  padding-left: 12px;
}

.rs-contents__item.is-sub { padding-left: 24px; }

/* Where you are: a short rule in the gutter of the contents, drawn only for
   the section under the reader. It is the running head a printed journal
   would carry, and it is driven by the real scroll position. */
.rs-contents__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--rs-ink);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity 0.35s var(--se-ease-soft),
    transform 0.4s var(--se-ease);
}

.rs-contents__item.is-here::before { opacity: 1; transform: none; }

.rs-contents__link {
  display: block;
  width: 100%;
  min-height: 24px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--rs-ink-mute);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s var(--se-ease-soft);
}

.rs-contents__link:hover,
.rs-contents__item.is-here .rs-contents__link { color: var(--rs-ink); }

/* ── The index mark ────────────────────────────────────────────────────────
   Research's signature at index size: the collection in miniature, and the
   way into it. */
.rs-field {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  margin: 4px 0 14px;
  color: var(--rs-ink);
}

.rs-field.is-empty { display: none; }

/* Idle signature — same grammar as the index, quietly alive until sources
   turn the seat into the live field. */
.rs-sig {
  display: block;
  width: 96px;
  max-width: 96px;
  height: 72px;
  margin: 4px 0 12px;
  color: var(--rs-ink);
  overflow: hidden;
  position: relative;
}
.rs-sig[hidden] { display: none !important; }
.rs-sig .sm {
  width: 96px;
  height: 72px;
  max-width: 96px;
  max-height: 72px;
  margin: 0;
}

/* The scatter: where each source was found. It never animates away. */
.rs-ghost {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: rs-ghost-in 0.5s var(--se-ease) forwards;
  animation-delay: calc(var(--i) * 0.05s);
}

@keyframes rs-ghost-in {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 0.2; transform: scale(1); }
}

/* Authored at the destination, displaced to the origin: the dot travels home
   by LOSING a transform. A dot that never receives the settle state is
   therefore still sitting on its source, not stranded between the two. */
.rs-dot {
  transform: translate(var(--dx), var(--dy));
  transform-box: fill-box;
  opacity: 0;
  cursor: pointer;
  animation: rs-dot-in 0.44s var(--se-ease) forwards;
  animation-delay: calc(var(--i) * 0.05s);
  transition:
    transform 0.7s var(--se-ease) calc(var(--i) * 0.04s),
    r 0.3s var(--se-ease-soft),
    opacity 0.3s var(--se-ease-soft);
}

@keyframes rs-dot-in {
  from { opacity: 0; }
  to   { opacity: 0.9; }
}

.rs[data-state="reading"] .rs-dot { transform: none; }
.rs-dot:hover { opacity: 1; }

/* The line is the finding. It is not there until there is one — and when it
   is, it is the one lit orange note on the surface: the convergence, the
   answer (DESIGN.md §3.2, the accent marks meaning). */
.rs-field__line {
  fill: var(--rs-orange);
  opacity: 0;
  transform: scaleX(0);
  /* `fill-box` first, THEN `left center` — with the default `view-box` the
     origin is measured from the viewBox's own left edge and the rule grows
     out of the wrong end of the mark. */
  transform-box: fill-box;
  transform-origin: left center;
  transition:
    opacity 0.4s var(--se-ease-soft),
    transform 0.75s var(--se-ease);
}

.rs[data-state="reading"] .rs-field__line { opacity: 0.92; transform: scaleX(1); }

/* ── The source collection ─────────────────────────────────────────────── */
.rs-collection__none {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rs-ink-faint);
}

.rs-collection__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rs-src;
}

.rs-source {
  position: relative;
  padding: 11px 0 11px 22px;
  border-top: 1px solid var(--rs-hair-soft);
  counter-increment: rs-src;
  opacity: 0;
  scroll-margin: 12px;
  animation: rs-rise 0.55s var(--se-ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
  transition: background 0.4s var(--se-ease-soft);
}

.rs-source::before {
  content: counter(rs-src);
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--rs-ink-faint);
}

/* Arriving at a source from the prose or the mark: a warm wash that fades,
   the same "you are here" a marginal note gets in a book. */
.rs-source.is-targeted { background: rgba(252, 155, 76, 0.13); }

.rs-source__link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: inherit;
}

.rs-source__title {
  font-size: 13px;
  line-height: 1.42;
  color: var(--rs-ink);
  text-decoration: underline;
  text-decoration-color: rgba(42, 29, 22, 0.24);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s var(--se-ease-soft);
}

.rs-source__link:hover .rs-source__title,
.rs-source.is-targeted .rs-source__title {
  text-decoration-color: rgba(42, 29, 22, 0.66);
}

.rs-source__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--rs-ink-faint);
}

.rs-source__meta svg { width: 10px; height: 10px; display: block; }

.rs-source__snippet {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--rs-ink-faint);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Present but quiet (DESIGN.md §10.3 — hover is a whisper). */
.rs-source__cite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rs-ink-faint);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--se-ease-soft), color 0.3s var(--se-ease-soft);
}

.rs-source__cite svg { width: 11px; height: 11px; display: block; }
.rs-source:hover .rs-source__cite,
.rs-source__cite:focus-visible { opacity: 1; }
.rs-source__cite:hover,
.rs-source__cite.is-done { opacity: 1; color: var(--rs-ink); }

/* ── Version History ───────────────────────────────────────────────────────
   The honest face of iteration (Constitution 4.9): every past version
   reachable, re-rendered from storage, never regenerated. */
.rs-history__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rs-history__item {
  border: 1px solid var(--rs-hair-soft);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.3s var(--se-ease-soft);
}

.rs-history__item.is-current {
  border-color: rgba(42, 29, 22, 0.22);
  background: rgba(42, 29, 22, 0.03);
}

.rs-history__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.25s var(--se-ease-soft);
}

.rs-history__row:hover { background: rgba(42, 29, 22, 0.04); }
.rs-history__item.is-current .rs-history__row { cursor: default; }

.rs-history__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.rs-history__n {
  font-size: 12.5px;
  color: var(--rs-ink);
  letter-spacing: -0.1px;
}

.rs-history__when { font-size: 11px; color: var(--rs-ink-faint); }
.rs-history__sub { font-size: 11px; color: var(--rs-ink-mute); }

/* The mandated phrase, whispered: it is always the row's accessible name and
   becomes visible the moment the row is approached (DESIGN.md §10.3). */
.rs-history__go {
  margin-top: 3px;
  font-size: 11px;
  color: var(--rs-ink-faint);
  opacity: 0;
  transition: opacity 0.28s var(--se-ease-soft);
}

.rs-history__row:hover .rs-history__go,
.rs-history__row:focus-visible .rs-history__go { opacity: 1; }

.rs-history__restore {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-top: 1px solid var(--rs-hair-soft);
  background: #221c19;
  color: #fef2e9;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.28s var(--se-ease-soft);
}

.rs-history__restore:hover { background: #100e0c; }

/* ── The colophon ──────────────────────────────────────────────────────────
   The System Receipt (shared kit) closes the entry. The kit styles the block
   itself; this only reserves its air so it reads as a colophon, never a
   competing panel. Collapsed while the room is not reading, so it never
   occupies the leaf mid-run. */
.rs-receipt-holder {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  max-height: 0;
  overflow: hidden;
}

.rs[data-state="reading"] .rs-receipt-holder {
  margin-top: clamp(24px, 4vh, 36px);
  padding-top: 18px;
  border-top-color: var(--rs-hair);
  max-height: none;
  overflow: visible;
}

.rs-receipt-holder:empty { margin: 0; padding: 0; border: 0; }

/* ══ Approved Research outcome — Figma 698:5968 ════════════════════════════
   The legacy document renderer remains intact inside `.rs-document-surface`.
   Canvas is a sibling presentation of the same data, not a page or route. */
.rs-outcome {
  /* Approved Research paper palette — Figma 698:5968.
     Keep these tokens scoped to the outcome so the wider platform is untouched. */
  --research-page-bg: #faf9f6;
  --research-panel-bg: #fbf7ef;
  --research-card-bg: rgba(250, 249, 246, 0.9);
  --research-data-card-bg: #fcf5ed;
  --research-control-bg: #fff;
  --research-inset-bg: #f5f1ee;
  --research-subtle-bg: #eeeeeb;
  --research-border: #d9d1cb;
  --research-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1);
  --research-muted-text: #9f9792;
  position: absolute;
  inset: 0;
  display: none;
  /* Figma 698:6015: 17px inset + 356px chat + 16px gutter. */
  grid-template-columns: 389px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--research-page-bg);
  color: #000;
}

.rs[data-outcome="1"] .rs-outcome { display: grid; }

.rs-conversation {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr) 146px;
  min-width: 0;
  min-height: 0;
  /* Chat content sits 18px inside the 356px card on both sides. */
  padding: 0 34px 27px 35px;
  background: var(--research-panel-bg);
}

.rs-conversation::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 56px;
  right: 16px;
  bottom: 27px;
  left: 17px;
  border: 1px solid var(--research-border);
  border-radius: 12px;
  pointer-events: none;
}

.rs-conversation__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* Figma navbar content begins at x=10; title begins at x=60. */
  margin-left: -25px;
}

.rs-conversation__back {
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #19213d;
  cursor: pointer;
}

.rs-conversation__back svg { width: 20px; height: 20px; }

.rs-conversation__title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-family: "Readex Pro", var(--font-sans, "Geist", sans-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

.rs-conversation__log {
  min-width: 0;
  min-height: 0;
  padding: 16px 0 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(25, 33, 61, 0.18) transparent;
}

.rs-conversation-turn {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 18px;
}

.rs-conversation-turn__user {
  align-self: flex-end;
  max-width: 284px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--research-border);
  border-radius: 12px;
  background: var(--research-inset-bg);
  color: #4a4242;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.rs-conversation-turn__response {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.rs-conversation-turn__meta {
  margin: 0;
  color: var(--research-muted-text);
  font-size: 11.8px;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.rs-conversation-turn__meta::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 8px 0 1px;
  border-radius: 50%;
  background: #fc9b4c;
}

.rs-conversation-turn__answer {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #000;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.rs-conversation-turn.is-live .rs-conversation-turn__answer {
  color: #61686b;
  -webkit-line-clamp: 4;
}

.rs-conversation__composer-space { min-height: 119px; }

.rs-workspace {
  position: relative;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background: var(--research-page-bg);
}

.rs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  height: 56px;
  padding: 10px;
  border-bottom: 1px solid var(--research-border);
  background: var(--research-panel-bg);
}

.rs-toolbar__group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rs-toolbar__group--end { gap: 8px; }

.rs-mode-switch {
  display: flex;
  align-items: center;
  height: 30px;
  padding: 3px;
  border: 1px solid var(--research-border);
  border-radius: 8px;
  background: var(--research-control-bg);
}

.rs-mode-switch__option {
  height: 22px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #19213d;
  font: 500 12px/1.3 var(--font-sans, "Geist", sans-serif);
  cursor: pointer;
}

.rs-mode-switch__option.is-active {
  background: #272720;
  color: #faf9f6;
}

.rs-toolbar__select,
.rs-toolbar__button {
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--research-border);
  border-radius: 4px;
  background: var(--research-control-bg);
  color: #19213d;
  font: 500 12px/1 var(--font-sans, "Geist", sans-serif);
}

.rs-toolbar__select {
  min-width: 82px;
  padding-left: 22px;
  appearance: none;
  background-image: url("../../assets/icons/design-outcome/chevron-down.svg");
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  cursor: pointer;
}

.rs-toolbar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.rs-toolbar__button--share { border-radius: 7px; }
.rs-toolbar__icon { width: 14px; height: 14px; }

.rs-toolbar__info {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.rs-toolbar__info img { width: 24px; height: 24px; }

.rs-info-popover {
  position: absolute;
  z-index: 8;
  top: 48px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 220px;
  padding: 12px;
  border: 1px solid var(--research-border);
  border-radius: 10px;
  background: var(--research-card-bg);
  box-shadow: var(--research-shadow);
  color: #61686b;
  font-size: 12px;
  line-height: 1.35;
}

.rs-info-popover[hidden] { display: none; }
.rs-info-popover strong { color: #000; font-weight: 600; }

.rs-workspace__content {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0 17px 27px 0;
  overflow: hidden;
  border: 1px solid var(--research-border);
  border-radius: 12px;
  /* Figma composites the translucent editorial cards over its warmer paper
     underlay. Using the page token here flattened their corrected palette. */
  background: var(--research-panel-bg);
}

.rs-canvas-surface,
.rs-document-surface {
  position: absolute;
  inset: 0;
  min-width: 0;
  min-height: 0;
}

.rs-canvas-surface[hidden],
.rs-document-surface[hidden] { display: none; }

.rs-canvas-scroll {
  position: absolute;
  inset: 0;
  padding: 24px;
  overflow: auto;
  overscroll-behavior: contain;
}

.rs-canvas-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  /* 70px units reproduce the approved 240px / 495px Figma tiers while
     allowing deterministic compact and tall tiers between them. */
  grid-auto-rows: 70px;
  gap: 15px;
  min-width: 0;
  min-height: 0;
}

.rs-canvas-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px;
  overflow: hidden;
  border: 1px solid var(--research-border);
  border-radius: 12px;
  background: var(--research-card-bg);
  box-shadow: var(--research-shadow);
}

.rs-canvas-card--sources {
  background: var(--research-data-card-bg);
}

.rs-canvas-card[data-size="wide"] { grid-column: span 2; }

.rs-canvas-card[data-tier="compact"] {
  grid-row: span 2;
  min-height: 145px;
  max-height: 155px;
}

.rs-canvas-card[data-tier="medium"] {
  grid-row: span 3;
  min-height: 220px;
  max-height: 240px;
}

.rs-canvas-card[data-tier="tall"] {
  grid-row: span 4;
  min-height: 300px;
  max-height: 325px;
}

.rs-canvas-card[data-tier="primary"] {
  grid-row: span 6;
  min-height: 450px;
  max-height: 495px;
}

.rs-canvas-card__eyebrow {
  flex: none;
  margin: 0;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.rs-canvas-card__title {
  display: -webkit-box;
  flex: none;
  margin: 0;
  overflow: hidden;
  color: #000;
  font-family: var(--rs-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.03em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rs-canvas-card__title--hero {
  font-family: "Playfair Display", var(--rs-serif);
  font-size: clamp(25px, 2.1vw, 32px);
  line-height: 1;
  letter-spacing: 0.01em;
  -webkit-line-clamp: 2;
}

.rs-canvas-card__body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: #24252d;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: -0.03em;
}

.rs-card-preview {
  width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.rs-card-preview--text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-card-preview--text p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.rs-canvas-card[data-tier="compact"] .rs-card-preview--text p {
  -webkit-line-clamp: 2;
}

.rs-canvas-card[data-tier="tall"] .rs-card-preview--text p {
  -webkit-line-clamp: 4;
}

.rs-canvas-card[data-tier="primary"] .rs-card-preview--text p {
  -webkit-line-clamp: 5;
}

.rs-canvas-card--summary .rs-card-preview--text p {
  -webkit-line-clamp: 2;
}

.rs-card-preview__lead {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  color: #24252d;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rs-canvas-card[data-tier="tall"] .rs-card-preview__lead,
.rs-canvas-card[data-tier="primary"] .rs-card-preview__lead {
  -webkit-line-clamp: 3;
}

.rs-card-preview-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
}

.rs-card-preview-list:is(ul) { list-style: disc; }
.rs-card-preview-list:is(ol) { list-style: decimal; }

.rs-card-preview-list li {
  display: list-item;
  margin: 0;
  line-height: 1.55;
}

.rs-card-preview-list__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.rs-canvas-card[data-tier="compact"] .rs-card-preview-list__text {
  -webkit-line-clamp: 2;
}

.rs-canvas-card[data-tier="primary"] .rs-card-preview-list__text {
  -webkit-line-clamp: 4;
}

.rs-card-preview__more {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #77706b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-card-preview--table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rs-card-preview-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 11px;
  line-height: 1.25;
}

.rs-card-preview-table th,
.rs-card-preview-table td {
  max-width: 0;
  padding: 5px 6px;
  overflow: hidden;
  border: 1px solid var(--research-border);
  text-align: left;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

.rs-card-preview-table th {
  background: var(--research-inset-bg);
  color: #000;
  font-weight: 600;
}

.rs-source-pills {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin-top: auto;
  max-height: 19px;
  overflow: hidden;
}

.rs-source-pill {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  height: 19px;
  padding: 0 7px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--research-subtle-bg);
  color: #61686b;
  font-size: 10px;
  font-weight: 500;
  line-height: 19px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-source-metrics {
  display: grid;
  /* Figma 710:2704: 145px source metric, 13px divider gutter,
     then a 127px confidence metric. The previous 82px first column forced
     the label to stack one word per line. */
  grid-template-columns: 145px minmax(127px, 1fr);
  gap: 0;
  min-width: 0;
}

.rs-source-metric {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rs-source-metric + .rs-source-metric {
  margin-left: 13px;
  padding-left: 13px;
  border-left: 1px solid var(--research-border);
}

.rs-source-metric__value {
  min-width: 0;
  color: #000;
  font-family: var(--rs-serif);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  overflow-wrap: normal;
  white-space: normal;
}

.rs-source-metric__value[data-fit="long"] {
  /* Figma's 36px "High" fits the 127px metric. Longer live values such as
     "Moderate" and "Not rated" scale within the same bounded hierarchy. */
  font-size: clamp(21px, 1.5vw, 28px);
}

.rs-source-metric__label,
.rs-source-timeline__label {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.rs-source-metric + .rs-source-metric .rs-source-metric__label {
  font-size: clamp(13px, 0.9vw, 15px);
  white-space: nowrap;
}

.rs-source-timeline__label { margin: auto 0 0; }

.rs-source-timeline {
  position: relative;
  display: flex;
  align-items: end;
  gap: 3px;
  height: 42px;
  min-height: 42px;
  overflow: hidden;
  border-bottom: 2px dashed #e5ded4;
}

.rs-source-timeline__bar {
  flex: 1 1 0;
  min-width: 3px;
  height: calc(4px + 36px * var(--value, 0));
  border-radius: 2px 2px 0 0;
  background: #aa9d89;
}

.rs-source-timeline__bar.is-undated {
  min-width: 2px;
  background: #c8beb0;
}

.rs-source-timeline__empty {
  align-self: center;
  width: 100%;
  color: #8d857f;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}

.rs-canvas-card--sources[data-source-state="empty"] .rs-source-timeline {
  align-items: center;
  justify-content: center;
  border-bottom-style: dashed;
}

.rs-document-surface .rs-scroll {
  padding: 28px;
  background: var(--research-page-bg);
}

.rs-document-surface .rs-spread {
  width: min(940px, 100%);
  margin: 0 auto;
}

@media (max-width: 1320px) {
  .rs-canvas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .rs-outcome {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 170px minmax(0, 1fr);
  }
  .rs-conversation {
    grid-template-rows: 44px minmax(0, 1fr);
    padding: 0 12px 0 28px;
  }
  .rs-conversation::before { inset: 44px 12px 0 12px; }
  .rs-conversation__head { height: 44px; }
  .rs-conversation__log {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rs-conversation-turn { flex: 0 0 min(310px, 82vw); margin: 0; }
  .rs-conversation__composer-space { display: none; }
  .rs-workspace { grid-template-rows: 56px minmax(0, 1fr); }
  .rs-workspace__content { margin: 0 12px 12px; }
  .rs-toolbar { padding-inline: 12px; }
}

@media (max-width: 620px) {
  .rs-outcome { grid-template-rows: 146px minmax(0, 1fr); }
  .rs-toolbar { gap: 8px; }
  .rs-toolbar__group { gap: 6px; }
  .rs-toolbar__group--end .rs-toolbar__button--share span { display: none; }
  .rs-toolbar__select { width: 76px; min-width: 0; }
  .rs-mode-switch__option { padding-inline: 8px; }
  .rs-canvas-scroll { padding: 12px; }
  .rs-canvas-grid { grid-template-columns: minmax(0, 1fr); }
  .rs-canvas-card[data-size="wide"] { grid-column: span 1; }
  .rs-document-surface .rs-scroll { padding: 16px; }
}

/* ══ Approved Research entry — Figma 683:5075 ══════════════════════════════
   This ready-state composition replaces the former journal opening. The
   Research result/workspace below is unchanged. */
.rs-entry-open {
  --rs-entry-surface: #fefaf3;
  --rs-entry-border: #d9d1cb;
  --rs-entry-shadow: 0 26px 38.8px -40px rgba(0, 0, 0, 0.15);
  --rs-suggestion-shadow: 0 10px 38px -12px rgba(0, 0, 0, 0.1);
  --oc-studio-entry-surface: var(--rs-entry-surface);
  --oc-studio-entry-border: var(--rs-entry-border);
  --oc-studio-entry-serif: var(--rs-serif);
  --oc-studio-suggestion-shadow: var(--rs-suggestion-shadow);

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow-x: clip;
  overflow-y: hidden;
}

.rs-entry-open__card {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: min(1024px, 100%);
  height: auto;
  min-height: 0;
  max-height: 683px;
  padding: 0 20px clamp(20px, 5.5vh, 53px);
  overflow: hidden;
  background: var(--rs-entry-surface);
  border: 1px solid var(--rs-entry-border);
  border-radius: 20px;
  box-shadow: var(--rs-entry-shadow);
}

.rs-entry-open__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 556px;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.rs-entry-open__hero {
  display: block;
  flex: 1 1 417px;
  width: 556px;
  height: 417px;
  max-width: 100%;
  min-height: 0;
  aspect-ratio: 687 / 515;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}

.rs-entry-open__headline {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--rs-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.rs-entry-open__composer-host {
  width: 556px;
  max-width: 100%;
  min-width: 0;
}

/* The host owns only placement and width. Composer material, controls, state,
   input behavior and architecture remain canonical. */
.rs-entry-open__composer-host .oc-composer {
  width: 100%;
  max-width: none;
  margin: 0;
}

.rs-entry-open__suggestions {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  width: min(1001px, 100%);
  min-width: 0;
}

.rs-entry-open__suggestion-item {
  flex: 0 0 319px;
  display: flex;
  width: 319px;
  min-width: 0;
}

@media (max-width: 720px) {
  .rs-entry-open { gap: 16px; }

  .rs-entry-open__card {
    min-height: 0;
    padding: 0 16px 18px;
  }

  .rs-entry-open__stack {
    gap: clamp(14px, 2.4vh, 22px);
    width: min(556px, 100%);
  }

  .rs-entry-open__hero {
    flex-basis: 300px;
    width: min(556px, calc(100vw - 62px));
    height: auto;
  }

  .rs-entry-open__headline {
    font-size: clamp(19px, 5.7vw, 24px);
    white-space: normal;
    text-wrap: balance;
  }

  .rs-entry-open__suggestions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .rs-entry-open__suggestion-item {
    flex: 0 0 auto;
    width: 100%;
  }

}

@media (max-height: 760px) {
  .rs-entry-open { gap: 12px; }

  .rs-entry-open__card {
    padding-bottom: 14px;
  }

  .rs-entry-open__stack {
    gap: 12px;
  }

  .rs-entry-open__headline {
    font-size: 19px;
  }

}

/* ══ The opening ═══════════════════════════════════════════════════════════
   The journal before it has been written in. Abundance is free here and only
   here (Amendment 007 §1.3) — but nothing on this surface is a result, and
   nothing can be mistaken for one. */
.rs-open {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(42, 29, 22, 0.22) transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--se-ease-soft);
}

.rs-open::-webkit-scrollbar { width: 8px; }
.rs-open::-webkit-scrollbar-thumb {
  background: rgba(42, 29, 22, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.rs[data-state="idle"] .rs-open { opacity: 1; pointer-events: auto; }

/* The same grid, the same gutter, the same rule as an entry's spread. */
/* The gaps are tuned, not chosen: the room affords roughly 300–380px of leaf
   depending on the viewport, and the statement, the setting and three
   openings have to arrive inside it. An opening the reader has to scroll to
   find is an opening that does not exist. */
.rs-open__leaf {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 28px);
  min-width: 0;
}

.rs-open__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.rs-open__mark {
  width: 80px;
  height: 60px;
  margin: 0 0 2px;
  color: var(--rs-ink);
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}
.rs-open__mark .sm {
  width: 80px;
  height: 60px;
  max-width: 80px;
  max-height: 60px;
  margin: 0;
}

.rs-open__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rs-ink-mute);
}

/* The held line — the room's method, in the display serif. Tracking tightens
   as the type grows (DESIGN.md §4.2) and is not relaxed on small screens. */
.rs-open__line {
  margin: 0;
  max-width: 20ch;
  font-family: var(--rs-serif);
  font-size: clamp(21px, 2.3vw, 29px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--rs-ink);
  text-wrap: balance;
}

.rs-open__body {
  margin: 0;
  max-width: 44ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--rs-ink-soft);
  text-wrap: pretty;
}

/* One row: what to ask, and how far to take it. */
.rs-openings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.rs-openings__head .rs-openings__title { margin: 0; }

/* Depth is a property of the ASKING, so it sits with the openings and travels
   into the dateline once an entry exists. Rendered as one object with a moving
   weight rather than two buttons, so it reads as a setting. */
.rs-depth {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--rs-hair);
  border-radius: 999px;
  background: rgba(42, 29, 22, 0.035);
}

.rs-depth__opt {
  min-height: 26px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rs-ink-mute);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    color 0.3s var(--se-ease-soft),
    background 0.3s var(--se-ease-soft);
}

.rs-depth__opt:hover { color: var(--rs-ink); }

.rs-depth__opt.is-on {
  color: var(--rs-ink);
  background: var(--se-paper, #fff);
  box-shadow: inset 0 0 0 1px rgba(42, 29, 22, 0.1);
}

/* ── Earlier entries ───────────────────────────────────────────────────────
   Real archived work, hidden entirely when the room has never been used, so a
   first arrival is never met with an empty list dressed as a feature. */
.rs-shelf {
  padding-left: var(--rs-gutter);
  border-left: 1px solid var(--rs-hair);
}

.rs-shelf[hidden] { display: none; }

.rs-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.rs-shelf__count {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rs-ink-faint);
}

.rs-shelf__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.rs-shelf__item {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-top: 1px solid var(--rs-hair-soft);
  opacity: 0;
  animation: rs-rise 0.55s var(--se-ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

.rs-shelf__open {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 2px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

/* The date leads the row, the way a journal's dates do. */
.rs-shelf__when {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rs-ink-faint);
  transition: color 0.3s var(--se-ease-soft);
}

.rs-shelf__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Two lines, then the ellipsis: a question is the entry's only true handle,
   and one truncated line a week later is not enough to recognise it by. */
.rs-shelf__q {
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--rs-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s var(--se-ease-soft);
}

.rs-shelf__meta { font-size: 11px; color: var(--rs-ink-faint); }

.rs-shelf__item:hover .rs-shelf__q,
.rs-shelf__item:hover .rs-shelf__when { color: var(--rs-ink); }

.rs-shelf__del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rs-ink-faint);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.25s var(--se-ease-soft),
    color 0.25s var(--se-ease-soft),
    background 0.25s var(--se-ease-soft);
}

.rs-shelf__del svg { width: 15px; height: 15px; display: block; }
.rs-shelf__item:hover .rs-shelf__del { opacity: 0.68; }
.rs-shelf__del:hover { opacity: 1; color: #c0492e; background: rgba(192, 73, 46, 0.09); }
.rs-shelf__del:focus-visible { opacity: 1; }

/* ══ The honest state ══════════════════════════════════════════════════════
   A downed backend must look like a downed backend, and a stopped run must
   say what it cost. Neither is dressed up as a finding. */
.rs-note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 44ch;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    opacity 0.44s var(--se-ease-soft),
    max-height 0.5s var(--se-ease);
}

.rs[data-state="note"] .rs-note {
  margin-top: clamp(24px, 4vh, 40px);
  padding-top: 20px;
  border-top-color: var(--rs-hair);
  max-height: none;
  overflow: visible;
  opacity: 1;
}

.rs-note__head {
  margin: 0;
  font-family: var(--rs-serif);
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.024em;
  color: var(--rs-ink);
}

.rs-note__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--rs-ink-soft);
  text-wrap: pretty;
}

.rs-note__retry {
  min-height: 36px;
  margin-top: 4px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #221c19;
  color: #fef2e9;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.3s var(--se-ease-soft);
}

.rs-note__retry:hover { background: #100e0c; }

/* ══ Focus ═════════════════════════════════════════════════════════════════
   A pencil line, not a ring (DESIGN.md §10.2). One focus language across the
   whole surface, and across Home and Studios with it. */
.rs button:focus-visible,
.rs a:focus-visible {
  outline: 1px solid rgba(42, 29, 22, 0.7);
  outline-offset: 2px;
  border-radius: 3px;
}

.rs .rs-action:focus-visible,
.rs .rs-note__retry:focus-visible,
.rs .rs-history__restore:focus-visible { border-radius: 999px; }

/* ══ Shorter rooms ═════════════════════════════════════════════════════════
   The Studio's stage is what is left of the viewport after the masthead and
   the composer, and on a laptop that is close to 300px. The held line carries
   the room's idea on its own; the sentence that explains the mechanism is the
   part a short screen can do without, and losing it keeps all three openings
   above the fold — which is the whole reason they are there. */
@media (max-height: 800px) {
  .rs-open__body { display: none; }
}

/* ══ Narrower rooms ════════════════════════════════════════════════════════
   The margin folds beneath the leaf and stops being sticky: at this width
   there is no margin to be in. */
@media (max-width: 940px) {
  .rs { --rs-gutter: 0px; }

  .rs-spread {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .rs-leaf { max-width: none; }

  .rs-margin {
    position: static;
    max-height: none;
    overflow: visible;
    padding-left: 0;
    padding-top: 22px;
    margin-top: clamp(20px, 4vh, 34px);
    border-left: 0;
    border-top: 1px solid var(--rs-hair);
  }

  .rs-open__spread { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rs-open__leaf { max-width: none; }

  .rs-shelf {
    padding-left: 0;
    padding-top: 22px;
    margin-top: clamp(20px, 4vh, 34px);
    border-left: 0;
    border-top: 1px solid var(--rs-hair);
  }

  .rs-field { max-width: 220px; }
  .rs-contents { display: none; }   /* contents beside prose, or not at all */
  .rs-action--ghost { display: none; }
}

/* ══ Reduced motion ════════════════════════════════════════════════════════
   Every state resolves to its meaning-carrying end state, instantly. The
   scatter is simply already there: discovered, not performed. */
@media (prefers-reduced-motion: reduce) {
  .rs-scroll,
  .rs-open,
  .rs-note,
  .rs-margin,
  .rs-entry,
  .rs-ledger,
  .rs-actions { transition-duration: 0.01ms; }

  .rs-entry,
  .rs-note { transform: none; }

  .rs-ghost,
  .rs-dot,
  .rs-ledger__item,
  .rs-source,
  .rs-shelf__item,
  .rs-next__opt,
  .rs-opening,
  .rs[data-state="reading"] .rs-finding > * {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .rs-ghost { opacity: 0.2; }

  /* The place-marker is a STATE, not a performance: it appears where the
     reader is, instantly, and does not draw itself. */
  .rs-contents__item::before { transition: none; }
  .rs-contents__item.is-here::before { transform: none; }

  /* Only the TRAVEL is removed. The dot still sits on its source until the
     finding exists — resolving it to the line early would state a convergence
     that has not happened (DESIGN.md §9.5 resolves choreography, not state). */
  .rs-dot { transition: none; opacity: 0.9; }
  .rs[data-state="gathering"] .rs-dot { transform: translate(var(--dx), var(--dy)); }

  /* The rule is drawn, not grown — but it still only exists once there IS a
     finding, so the opacity rule above is deliberately left alone. */
  .rs-field__line { transform: scaleX(1); transition: none; }

  .rs-status__dot { animation: none; opacity: 1; }
}