/* SMAU FILE
 * Path: css/smau-studio2-roy.css
 * Owns: WHERE ROY STANDS IN CREATOR STUDIO — his eye in the topbar, the panel
 *       it opens under it, and the one-time chip beside it. The figure itself
 *       is css/smau-roy.css; nothing here restyles him, it only places him.
 * Why the topbar and not a floating corner: a corner eye would sit on top of
 *       whatever is at the bottom of the screen under it, and at 390px that is
 *       the beat editor's full-width Save button. The topbar is the one piece
 *       of furniture every workspace and every hand-rolled sub-screen keeps.
 * Invariants:
 *   - Everything hangs off #studio-root's tokens (--s2-tap is the 44px floor).
 *   - The panel is positioned from JS (measured off the button), so this file
 *     never guesses the topbar's height.
 *   - Nothing here is modal: no scrim, no inert, no trapped focus.
 */

/* ── His eye, in the topbar ──────────────────────────────────────── */

#studio-root .s2-roy-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--s2-tap);
  min-height: var(--s2-tap);
  padding: 0;
  border-radius: 12px;
  background: none;
  border: none;
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}

#studio-root .s2-roy-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
#studio-root .s2-roy-btn:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
#studio-root .s2-roy-btn[aria-expanded="true"] { opacity: 1; background: var(--s2-accent-soft); }

/* He is 34px inside a 44px target — small, as asked, without shrinking the
   thing a thumb has to hit. */
#studio-root .s2-roy-btn .smau-roy--small { margin: 0; }

/* ── The panel ───────────────────────────────────────────────────── */

.s2-roy {
  position: fixed;
  z-index: 65;
  width: min(380px, calc(100vw - 16px));
  max-height: min(72vh, 620px);
  display: none;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--s2-card-border);
  background: #161a26;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
  color: var(--s2-ink);
  font-family: var(--smau-font-stack, system-ui, sans-serif);
  overflow: hidden;
}

.s2-roy[data-state="open"] { display: flex; }

/* Once he can write, the panel is a workspace rather than a tooltip: a review
   card carries an app name, a sentence and three verbs, and 380px makes every
   one of them wrap. It still never exceeds the viewport. */
.s2-roy[data-mode="author"] {
  width: min(460px, calc(100vw - 16px));
  max-height: min(78vh, 720px);
}

.s2-roy-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  outline: none;
}

.s2-roy-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 10px 12px;
  border-bottom: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.03);
}

.s2-roy-face { flex: 0 0 auto; display: inline-flex; cursor: pointer; }
.s2-roy-face .smau-roy--small { margin: 0; }

.s2-roy-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.s2-roy-name { font-size: 14px; font-weight: 700; }
.s2-roy-sub { font-size: 11.5px; color: var(--s2-muted); }

.s2-roy-x {
  flex: 0 0 auto;
  min-width: var(--s2-tap);
  min-height: var(--s2-tap);
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  color: var(--s2-muted);
}
.s2-roy-x:hover { background: rgba(255, 255, 255, 0.07); color: var(--s2-ink); }

.s2-roy-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The panel has a max height, so without this every card in a flex column
   would shrink to fit and spill its own text over the next one. */
.s2-roy-body > * { flex: 0 0 auto; }

/* Pinned under the scroller: the ask box, or — with no key — the one line
   about what a key would add. A long screen's topics must not push the thing
   you came here to use off the bottom. */
.s2-roy-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.02);
}

/* ── Where you are ───────────────────────────────────────────────── */

.s2-roy-where { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.s2-roy-where-screen { font-size: 14px; font-weight: 700; }
.s2-roy-where-count { font-size: 11.5px; color: var(--s2-muted); }

/* ── One thing on this screen ────────────────────────────────────── */

.s2-roy-topic {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: var(--s2-tap);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  background: var(--s2-card);
  text-align: left;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.s2-roy-topic:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
.s2-roy-topic:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }

.s2-roy-topic-title { font-size: 13.5px; font-weight: 700; }
.s2-roy-topic-catch { font-size: 12.5px; line-height: 1.45; color: var(--s2-warn); }
.s2-roy-topic-text { font-size: 12.5px; line-height: 1.45; color: var(--s2-muted); }
.s2-roy-topic-page { font-size: 11px; font-weight: 600; color: var(--s2-accent); }

.s2-roy-empty {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--s2-card-border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--s2-muted);
}
.s2-roy-empty strong { color: var(--s2-ink); }
.s2-roy-empty code { font-family: var(--smau-mono, ui-monospace, monospace); font-size: 11.5px; }

/* ── Real counts off the open project ────────────────────────────── */

.s2-roy-facts {
  font-size: 12px;
  line-height: 1.5;
  color: var(--s2-muted);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.s2-roy-facts b { color: var(--s2-ink); }

/* ── Asking (only ever rendered when it can work) ─────────────────── */

.s2-roy-ask { display: flex; flex-direction: column; gap: 8px; }
.s2-roy-ask form,
.s2-roy-key { display: flex; gap: 8px; }

.s2-roy-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--s2-tap);
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  background: rgba(0, 0, 0, 0.28);
  color: var(--s2-ink);
  font: inherit;
  font-size: 13px;
}
.s2-roy-input:focus { outline: none; border-color: var(--s2-accent); }

.s2-roy-send {
  flex: 0 0 auto;
  min-height: var(--s2-tap);
  padding: 0 14px;
  border-radius: 12px;
  background: var(--s2-accent-soft);
  color: var(--s2-accent);
  font-size: 13px;
  font-weight: 700;
}
.s2-roy-send:hover:not(:disabled) { background: rgba(139, 124, 248, 0.24); }
.s2-roy-send:disabled { opacity: 0.5; cursor: default; }

/* The composer is a TEXTAREA, not an input, and grows to a ceiling from JS.
   "She says X, then he says Y" is two lines; a one-line box teaches an author
   to write one-line instructions, which is the opposite of the point. */
.s2-roy-textarea {
  padding: 11px 12px;
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
  max-height: 132px;
  font-family: inherit;
}

/* ── The conversation ─────────────────────────────────────────────── */

.s2-roy-turn { display: flex; flex-direction: column; gap: 6px; }

/* The author's own words. Right-aligned and warm, so a glance down the panel
   reads as a conversation with two people in it. */
.s2-roy-said {
  align-self: flex-end;
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--s2-card-border);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.s2-roy-reply {
  align-self: flex-start;
  max-width: 96%;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--s2-card-border);
  background: rgba(139, 124, 248, 0.07);
}
.s2-roy-reply[data-state="waiting"] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--s2-muted);
}
.s2-roy-thinking { font-size: 12px; }

/* A real wait, shown as one — nothing here pretends to think faster than the
   network it is waiting on. */
.s2-roy-dots { display: inline-flex; gap: 3px; }
.s2-roy-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--s2-accent);
  animation: s2-roy-dot 1s ease-in-out infinite;
}
.s2-roy-dots i:nth-child(2) { animation-delay: 0.16s; }
.s2-roy-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes s2-roy-dot {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.s2-roy-instead {
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139, 124, 248, 0.35);
  background: none;
  color: var(--s2-accent);
  font-size: 11.5px;
  font-weight: 700;
}
.s2-roy-instead:hover { background: var(--s2-accent-soft); }

/* ── The readings, when he asks instead of guessing ───────────────── */

.s2-roy-options { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }

.s2-roy-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 9px 12px;
  border-radius: 12px;
  /* Dashed, like the starters and the standing rules: in this panel a dashed
     edge means "nothing has happened yet, this is an offer". A solid card is
     always something that already exists in the draft. */
  border: 1px dashed rgba(139, 124, 248, 0.45);
  background: none;
  color: var(--s2-ink);
}
.s2-roy-option:hover { background: var(--s2-accent-soft); border-style: solid; }
.s2-roy-option:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
.s2-roy-option-label { font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.s2-roy-option-detail { font-size: 11.5px; line-height: 1.4; color: var(--s2-muted); }

.s2-roy-options[data-state="answered"] .s2-roy-option { opacity: 0.4; cursor: default; }
.s2-roy-options[data-state="answered"] .s2-roy-option[data-chosen="1"] {
  opacity: 1;
  border-style: solid;
  border-color: rgba(127, 211, 162, 0.5);
}

/* ── What his change newly broke ──────────────────────────────────── */

.s2-roy-doctor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px;
  margin-top: 2px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  border-left: 3px solid var(--s2-warn, #e0a05a);
  background: rgba(224, 160, 90, 0.07);
}
.s2-roy-doctor[data-severity="blocking"] {
  border-left-color: #e28b8b;
  background: rgba(226, 139, 139, 0.08);
}
.s2-roy-doctor-head {
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--s2-warn, #e0a05a);
}
.s2-roy-doctor[data-severity="blocking"] .s2-roy-doctor-head { color: #e28b8b; }
.s2-roy-doctor-line {
  font-size: 12px; line-height: 1.45; color: var(--s2-ink);
  overflow-wrap: anywhere;
}
.s2-roy-doctor-go {
  align-self: flex-start;
  padding: 4px 0 0;
  background: none;
  color: var(--s2-accent);
  font-size: 11.5px;
  font-weight: 700;
}

/* The same finding, on the one card it names. */
.s2-roy-change-flag {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--s2-warn, #e0a05a);
  overflow-wrap: anywhere;
}
.s2-roy-change-flag[data-severity="blocking"] { color: #e28b8b; }

/* ── A change, and the three verbs that resolve it ────────────────── */

.s2-roy-changes { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }

.s2-roy-change {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  /* The stripe down the left is the app colour cue: one glance says whether
     this landed in Messages or somewhere the author would not have looked. */
  border-left: 3px solid var(--s2-accent);
  background: rgba(255, 255, 255, 0.035);
}
.s2-roy-change[data-op="remove"] { border-left-color: var(--s2-warn, #e0a05a); }
.s2-roy-change[data-state="approved"] { border-left-color: #62c08a; opacity: 0.72; }
.s2-roy-change[data-state="edited"] { border-left-color: #62c08a; opacity: 0.72; }
.s2-roy-change[data-state="rejected"],
.s2-roy-change[data-state="gone"] { opacity: 0.45; border-left-color: var(--s2-card-border); }

.s2-roy-change-top {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
}
.s2-roy-change-where {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s2-accent);
}
.s2-roy-change-op { font-size: 10.5px; color: var(--s2-muted); }
.s2-roy-change-what {
  font-size: 12.5px; line-height: 1.45; color: var(--s2-ink);
  overflow-wrap: anywhere;
}
.s2-roy-change-was {
  font-size: 11.5px; line-height: 1.45; color: var(--s2-muted);
  overflow-wrap: anywhere;
}
.s2-roy-change-does { font-size: 11px; line-height: 1.4; color: var(--s2-muted); opacity: 0.8; }
.s2-roy-change-settled { font-size: 11px; font-weight: 700; color: var(--s2-muted); }

.s2-roy-change-acts,
.s2-roy-changes-all,
.s2-roy-pending { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.s2-roy-changes-all { padding-top: 2px; }

.s2-roy-pending {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(139, 124, 248, 0.3);
  background: var(--s2-accent-soft);
}
.s2-roy-pending-n { flex: 1 1 auto; font-size: 12px; font-weight: 700; }

.s2-roy-act {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--s2-ink);
  font-size: 11.5px;
  font-weight: 700;
}
.s2-roy-act:hover { background: rgba(255, 255, 255, 0.1); }
.s2-roy-act:focus-visible { outline: 2px solid var(--s2-accent); outline-offset: 2px; }
.s2-roy-act--keep { color: #7fd3a2; border-color: rgba(127, 211, 162, 0.35); }
.s2-roy-act--drop { color: #e28b8b; border-color: rgba(226, 139, 139, 0.32); }

/* ── Standing rules, and the starters that get a blank panel moving ── */

.s2-roy-rules { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.s2-roy-rules-title {
  flex: 1 0 100%;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--s2-muted);
}
.s2-roy-rule {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%;
  padding: 4px 4px 4px 9px;
  border-radius: 999px;
  border: 1px dashed rgba(139, 124, 248, 0.4);
  font-size: 11px; line-height: 1.35; color: var(--s2-ink);
  overflow-wrap: anywhere;
}
.s2-roy-rule-x {
  flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 13px; line-height: 1; color: var(--s2-muted);
  background: none;
}
.s2-roy-rule-x:hover { background: rgba(255, 255, 255, 0.1); color: var(--s2-ink); }

.s2-roy-starters { display: flex; flex-direction: column; gap: 5px; }
.s2-roy-starters-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--s2-muted);
}
.s2-roy-starter {
  text-align: left;
  padding: 8px 11px;
  border-radius: 12px;
  border: 1px dashed var(--s2-card-border);
  background: none;
  color: var(--s2-ink);
  font-size: 12px;
  line-height: 1.4;
}
.s2-roy-starter:hover { background: rgba(255, 255, 255, 0.06); border-style: solid; }

.s2-roy-helptoggle {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: none;
  color: var(--s2-accent);
  font-size: 11px;
  font-weight: 700;
}

/* The count on his eye: a closed panel still says work is waiting. */
#studio-root .s2-roy-btn { position: relative; }
.s2-roy-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--s2-accent);
  color: #10121c;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}
.s2-roy-badge[hidden] { display: none; }

/* ── No key: the default state, and it has to read as working ─────── */

.s2-roy-nokey {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--s2-muted);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s2-roy-nokey strong,
.s2-roy-nokey b { color: var(--s2-ink); }

.s2-roy-keystatus { font-size: 12px; line-height: 1.5; color: var(--s2-ink); }

/* ── The limit, said once, at the bottom, every time ──────────────── */

.s2-roy-limit {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--s2-muted);
  padding-top: 2px;
}

/* ── The one-time reminder ───────────────────────────────────────── */

.s2-roy-hint {
  position: fixed;
  z-index: 64;
  max-width: min(240px, calc(100vw - 24px));
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(139, 124, 248, 0.4);
  background: #1b1f2e;
  color: var(--s2-ink);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  animation: s2-roy-hint-in 0.24s ease-out;
}

@keyframes s2-roy-hint-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .s2-roy-hint { animation: none; }
  /* The dots stay VISIBLE, they just stop moving — the wait is real and
     hiding the only sign of it would be worse than the motion. */
  .s2-roy-dots i { animation: none; opacity: 0.7; }
  #studio-root .s2-roy-btn,
  .s2-roy-topic { transition: none; }
}

/* ── The reading (G125) ───────────────────────────────────────────────
   A REPORT the author is meant to argue with. So it is built out of
   separable claims rather than a paragraph, and the verdict colour is the
   only strong signal in it — the author's eye should go to the scenes he
   thinks are doing nothing, and nowhere else. Nothing in here is a write
   button; the suggestions load the composer and stop. */

.s2-roy-reading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.028);
}

.s2-roy-read-block { display: flex; flex-direction: column; gap: 5px; }

.s2-roy-read-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s2-accent);
}

.s2-roy-read-body,
.s2-roy-read-line {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--s2-ink);
  overflow-wrap: anywhere;
}
.s2-roy-read-line { padding-left: 10px; border-left: 2px solid var(--s2-card-border); }

.s2-roy-person { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; }
.s2-roy-person + .s2-roy-person { border-top: 1px solid var(--s2-card-border); }
.s2-roy-person-name { font-size: 12.5px; font-weight: 700; color: var(--s2-ink); }
.s2-roy-person-line {
  font-size: 12px; line-height: 1.45; color: var(--s2-muted); overflow-wrap: anywhere;
}
.s2-roy-person-line b {
  color: var(--s2-ink);
  font-weight: 700;
  margin-right: 4px;
}

/* One scene, one verdict. The stripe is the whole scan: green carries the
   plot, neutral is deliberate quiet, amber is the one he'd argue with. */
.s2-roy-scene {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  border-left: 3px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.03);
}
.s2-roy-scene[data-verdict="plot"] { border-left-color: #62c08a; }
.s2-roy-scene[data-verdict="filler"] { border-left-color: var(--s2-warn, #e0a05a); }
.s2-roy-scene[data-disputed="1"] { border-left-style: dashed; }

.s2-roy-scene-top {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
}
.s2-roy-scene-name {
  font-size: 12.5px; font-weight: 700; color: var(--s2-ink); overflow-wrap: anywhere;
}
.s2-roy-scene-verdict {
  flex: 0 0 auto;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--s2-muted);
}
.s2-roy-scene[data-verdict="plot"] .s2-roy-scene-verdict { color: #62c08a; }
.s2-roy-scene[data-verdict="filler"] .s2-roy-scene-verdict { color: var(--s2-warn, #e0a05a); }

.s2-roy-scene-axis,
.s2-roy-scene-why,
.s2-roy-scene-proof,
.s2-roy-scene-skim,
.s2-roy-scene-disputed {
  font-size: 12px; line-height: 1.45; overflow-wrap: anywhere;
}
.s2-roy-scene-axis { color: var(--s2-muted); }
.s2-roy-scene-axis b { color: var(--s2-ink); font-weight: 700; }
.s2-roy-scene-why { color: var(--s2-ink); }
/* What the STORY proves, as against what he thinks — quieter on purpose,
   because it is the half that is true whatever model answered. */
.s2-roy-scene-proof { color: var(--s2-muted); font-size: 11.5px; }
.s2-roy-scene-disputed {
  color: var(--s2-warn, #e0a05a);
  font-size: 11.5px;
}
/* A scene he had the SHAPE of rather than the lines (G136). Quiet, dashed and
   unmistakable: it is an admission, not a verdict. */
.s2-roy-scene-skim {
  color: var(--s2-muted);
  font-size: 11.5px;
  font-style: italic;
  border-left: 2px dashed var(--s2-card-border);
  padding-left: 7px;
}

.s2-roy-suggest {
  text-align: left;
  margin-top: 2px;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px dashed var(--s2-card-border);
  background: none;
  color: var(--s2-ink);
  font-size: 11.5px;
  line-height: 1.4;
}
.s2-roy-suggest:hover { background: rgba(255, 255, 255, 0.06); border-style: solid; }

/* The correction box. The reason the reading is shown at all. */
.s2-roy-correct {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid var(--s2-card-border);
}
.s2-roy-correct-title {
  flex: 1 0 100%;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--s2-muted);
}
.s2-roy-correct-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--s2-card-border);
  background: rgba(0, 0, 0, 0.22);
  color: var(--s2-ink);
  font: inherit;
  font-size: 12px;
}
.s2-roy-correct-input:focus {
  outline: none;
  border-color: var(--s2-accent);
}

.s2-roy-starter--read { border-style: solid; border-color: rgba(139, 124, 248, 0.4); }

/* ── The revision plan (G125 §3) ──────────────────────────────────────
   The only surface in this panel that describes something which has NOT
   happened. So: checkboxes, not Keep/Throw-away verbs — those words are
   about work that exists — and an item that would cost the author their
   own writing wears an amber edge and starts unticked. */

.s2-roy-plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 11px;
  border-radius: 14px;
  border: 1px dashed rgba(139, 124, 248, 0.45);
  background: rgba(139, 124, 248, 0.05);
}
.s2-roy-plan[data-state="applied"] {
  border-style: solid;
  border-color: var(--s2-card-border);
  background: none;
}

.s2-roy-plan-head {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--s2-accent);
}

.s2-roy-plan-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  border-left: 3px solid var(--s2-card-border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
}
.s2-roy-plan-item[data-on="1"] { border-left-color: #62c08a; }
.s2-roy-plan-item[data-cost="1"] { border-left-color: var(--s2-warn, #e0a05a); }
/* Struck out, not hidden — the author needs to be able to change their mind,
   and a plan that shrinks as you read it is disorienting. */
.s2-roy-plan-item[data-on="0"] { opacity: 0.5; }
.s2-roy-plan-item[data-on="0"] .s2-roy-plan-what { text-decoration: line-through; }

.s2-roy-plan-tick {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: #62c08a;
}

.s2-roy-plan-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s2-roy-plan-what {
  font-size: 12.5px; line-height: 1.45; font-weight: 600;
  color: var(--s2-ink); overflow-wrap: anywhere;
}
.s2-roy-plan-scene {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--s2-accent);
}
.s2-roy-plan-why {
  font-size: 12px; line-height: 1.45; color: var(--s2-muted); overflow-wrap: anywhere;
}
.s2-roy-plan-cost {
  font-size: 11.5px; line-height: 1.4;
  color: var(--s2-warn, #e0a05a); overflow-wrap: anywhere;
}

.s2-roy-plan-acts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 3px; }
.s2-roy-plan-acts button[disabled] { opacity: 0.45; }

/* ── The lineage (G122) ───────────────────────────────────────────────
   A record you consult, not a thing you work in — so it is collapsed by
   default and the only part that reads as urgent is the count of
   decisions still waiting. There is deliberately no replay control. */

.s2-roy-lineage { display: flex; flex-direction: column; gap: 5px; }

.s2-roy-lineage-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  background: none;
  text-align: left;
}
.s2-roy-lineage-head:hover { background: rgba(255, 255, 255, 0.05); }
.s2-roy-lineage-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--s2-muted);
}
.s2-roy-lineage[data-open="1"] .s2-roy-lineage-title { color: var(--s2-accent); }
.s2-roy-lineage-count {
  flex: 0 0 auto;
  font-size: 11px; color: var(--s2-muted);
}

.s2-roy-lin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--s2-card-border);
  border-left: 3px solid var(--s2-accent);
  background: rgba(255, 255, 255, 0.025);
}
/* Finished business recedes; anything still waiting keeps the accent. */
.s2-roy-lin[data-settled="1"] { border-left-color: var(--s2-card-border); opacity: 0.72; }

.s2-roy-lin-asked {
  font-size: 12.5px; line-height: 1.4; color: var(--s2-ink); overflow-wrap: anywhere;
}
.s2-roy-lin-meta,
.s2-roy-lin-apps,
.s2-roy-lin-what {
  font-size: 11px; line-height: 1.4; color: var(--s2-muted); overflow-wrap: anywhere;
}
.s2-roy-lin-apps { color: var(--s2-accent); font-weight: 600; }
.s2-roy-lin-issue { font-size: 11px; line-height: 1.4; color: var(--s2-warn, #e0a05a); }

.s2-roy-lineage-clear {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed var(--s2-card-border);
  background: none;
  color: var(--s2-muted);
  font-size: 11px;
}
.s2-roy-lineage-clear:hover { color: var(--s2-ink); border-style: solid; }