/* libertytrpg viewer — base chrome. Campaign themes override the --t-* variables
   (see theme.json → moods). Fonts come from theme.json → fonts. */

:root {
  --t-bg: #0f1116;
  --t-panel: #151821;
  --t-panel-2: #1b1f2a;
  --t-fg: #e8e4d8;
  --t-fg-2: #d9d4c7;
  --t-muted: #8e94a2;
  --t-faint: #5c6270;
  --t-border: #2c303b;
  --t-accent: #c9b8f0;
  --t-accent-2: #7fd1b9;
  --t-warn: #d9c9a3;
  --t-check-bg: #15130f;
  --t-check-border: #4a4030;
  --t-intrusion: #e07a6a;
  --t-player: #6fa8dc;
  --t-narration-font: Georgia, "Times New Roman", serif;
  --t-dialogue-font: Georgia, serif;
  --t-ui-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-mono-font: ui-monospace, Menlo, Consolas, monospace;
  --t-display-font: var(--t-ui-font);
  --t-radius: 8px;
  --t-border-style: solid;
  --t-motif: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--t-bg);
  color: var(--t-fg);
  font-family: var(--t-ui-font);
  font-size: 15px;
  line-height: 1.6;
  transition: background 600ms ease, color 600ms ease;
}
#app { display: flex; flex-direction: column; min-height: 100%; }

/* top bar */
#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--t-border);
  background: var(--t-panel);
  position: sticky; top: 0; z-index: 10;
  font-size: 13px; color: var(--t-muted);
}
#topbar .brand { font-family: var(--t-display-font); letter-spacing: 0.08em; color: var(--t-fg); }
#topbar select { background: var(--t-panel-2); color: var(--t-fg); border: 0.5px solid var(--t-border); border-radius: 6px; padding: 4px 6px; font: inherit; }
#topbar .spacer { flex: 1; }
#topbar .toggles { display: flex; gap: 10px; }
#topbar .toggles label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.live { color: var(--t-faint); }
.live.on { color: var(--t-accent-2); }

/* scene strip */
.scene {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  padding: 10px 22px 8px; border-bottom: 0.5px solid var(--t-border);
  background: var(--t-panel); font-size: 12px; color: var(--t-muted);
  position: sticky; top: 42px; z-index: 9;
}
.scene-title { grid-column: 1; font-family: var(--t-display-font); font-size: 15px; color: var(--t-fg); letter-spacing: 0.04em; }
.scene-seq { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--t-mono-font); }
.scene-meta { grid-column: 1; }
.scene-meta span + span::before { content: " · "; color: var(--t-faint); }

/* beats */
.beats { flex: 1; padding: 18px 0 32px; max-width: 880px; width: 100%; margin: 0 auto; }
.beat { padding: 6px 22px 10px; position: relative; }
.beat + .beat { border-top: 0.5px dashed var(--t-border); margin-top: 6px; }
.beat .seq { position: absolute; right: 22px; top: 6px; font-family: var(--t-mono-font); font-size: 11px; color: var(--t-faint); }
.beat.player { background: color-mix(in srgb, var(--t-player) 8%, transparent); }
.beat.system { opacity: 0.85; }
.beat.demo::before { content: "demo"; position: absolute; left: 22px; top: 4px; font-size: 10px; letter-spacing: 0.1em; color: var(--t-faint); text-transform: uppercase; }

.narration {
  font-family: var(--t-narration-font);
  font-size: 17px; line-height: 1.8; color: var(--t-fg-2);
  margin: 10px 0 12px;
}
.narration p { margin: 0 0 0.8em; }
.narration em { color: var(--t-fg); }

.story-image {
  margin: 16px 0 18px; border: 0.5px solid var(--t-border);
  border-radius: var(--t-radius); overflow: hidden; background: var(--t-panel);
  box-shadow: 0 12px 38px color-mix(in srgb, #000 38%, transparent);
}
.story-image img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; }
.story-image figcaption {
  display: flex; justify-content: space-between; gap: 14px; padding: 8px 11px;
  border-top: 0.5px solid var(--t-border); color: var(--t-muted);
  font-family: var(--t-narration-font); font-size: 13px; line-height: 1.45;
}
.story-image figcaption .credit { color: var(--t-faint); font-family: var(--t-ui-font); font-size: 11px; text-align: right; }

/* attributed blocks */
.attr { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 12px; }
.plate {
  width: 46px; height: 46px; flex: none; border-radius: 6px;
  border: 1px solid var(--who, var(--t-muted));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--who-font, var(--t-display-font)); font-size: 22px; color: var(--who, var(--t-fg));
  background: var(--t-panel-2); overflow: hidden;
}
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.body { flex: 1; border-left: 2px var(--t-border-style) var(--who, var(--t-muted)); padding-left: 12px; min-width: 0; }
.who { font-size: 12px; color: var(--who, var(--t-muted)); margin-bottom: 3px; }
.who .role { color: var(--t-muted); }
.who .canon { margin-left: 8px; color: var(--t-accent-2); font-family: var(--t-mono-font); font-size: 11px; }
.line { font-family: var(--who-font, var(--t-dialogue-font)); font-size: 18px; line-height: 1.9; color: var(--t-fg); margin: 0; }
.line rt { font-size: 10px; color: var(--t-muted); font-family: var(--t-ui-font); }
.sub { font-size: 13px; color: var(--t-muted); margin: 2px 0 6px; }
.sub .roman { font-style: italic; }
.sub .gloss { color: var(--t-fg-2); }
.delivery { font-size: 13px; color: var(--t-muted); font-style: italic; margin: 0 0 4px; }
.to { color: var(--t-faint); }
body.no-ruby rt { display: none; }
body.no-roman .roman { display: none; }
body.no-gloss .gloss { display: none; }
body.no-mech .check, body.no-mech .intrusion { display: none; }
.sub:empty { display: none; }

/* GM guidance: adjacent to fiction, but never styled as character speech */
.coach {
  gap: 10px; padding: 9px 11px; border: 0.5px dashed var(--t-border);
  border-radius: var(--t-radius); background: color-mix(in srgb, var(--t-panel-2) 72%, transparent);
}
.coach .plate { width: 34px; height: 34px; border-color: var(--t-muted); opacity: 0.72; }
.coach .body { border: 0; padding: 0; font-family: var(--t-ui-font); }
.coach .guidance-label { color: var(--t-accent-2); font-family: var(--t-mono-font); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.coach .who { color: var(--t-fg-2); font-size: 13px; font-weight: 600; margin: 0 0 3px; }
.coach .line { font-size: 15px; }
.coach .why { color: var(--t-muted); font-size: 13px; margin: 2px 0 0; }
.coach .field-label { color: var(--t-faint); font-family: var(--t-mono-font); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 7px; }
.coach .after { margin: 4px 0 0; }
.coach .praise { color: var(--t-accent-2); margin-left: 8px; }
.coach-fallback { border-top: 0.5px solid var(--t-border); margin-top: 7px; padding-top: 6px; }
.coach-source { color: var(--t-muted); font-size: 12px; margin: 4px 0; }
.coach-source summary { cursor: pointer; color: var(--t-faint); }

/* mechanics */
.check, .intrusion, .prompt, .ooc {
  border: 0.5px solid var(--t-check-border); border-radius: var(--t-radius);
  padding: 8px 12px; margin: 8px 0 12px; font-size: 13px; background: var(--t-check-bg); color: var(--t-warn);
}
.check .head { display: flex; justify-content: space-between; gap: 12px; }
.check .mods { color: color-mix(in srgb, var(--t-warn) 70%, var(--t-muted)); margin-top: 3px; }
.check .roll { font-family: var(--t-mono-font); margin-top: 3px; }
.check .roll b { color: var(--t-fg); font-weight: 500; }
.check .stakes { margin-top: 3px; font-style: italic; }
.intrusion { border-color: color-mix(in srgb, var(--t-intrusion) 60%, var(--t-border)); color: var(--t-fg-2); }
.intrusion .tag { color: var(--t-intrusion); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.intrusion .xp { color: var(--t-muted); font-family: var(--t-mono-font); font-size: 12px; margin-left: 8px; }
.prompt { border-color: var(--t-accent); color: var(--t-fg); background: transparent; }
.prompt .q { font-family: var(--t-narration-font); font-size: 16px; }
.prompt ul { margin: 6px 0 0 18px; padding: 0; color: var(--t-fg-2); }
.ooc { background: transparent; border-style: dashed; color: var(--t-muted); font-family: var(--t-ui-font); }
.ooc::before { content: "OOC "; font-size: 10px; letter-spacing: 0.1em; color: var(--t-faint); }
.source-disclosure {
  margin: 14px 0 4px; border-top: 0.5px dashed var(--t-border);
  color: var(--t-muted); font-family: var(--t-ui-font); font-size: 12px;
}
.source-disclosure > summary {
  display: flex; justify-content: flex-start; gap: 7px; cursor: pointer;
  padding: 7px 2px 2px; color: var(--t-faint); list-style-position: inside;
  text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--t-mono-font);
}
.source-disclosure > summary::before { content: "▸"; color: var(--t-faint); }
.source-disclosure[open] > summary::before { content: "▾"; }
.source-disclosure > summary > span:first-of-type { margin-right: auto; }
.source-disclosure .source-summary { text-transform: none; letter-spacing: 0; color: var(--t-faint); }
.player-source { margin: 7px 2px 5px; padding: 8px 10px; border-left: 2px solid var(--t-player); background: color-mix(in srgb, var(--t-player) 5%, transparent); }
.player-source .source-head { display: flex; justify-content: space-between; gap: 10px; color: var(--t-player); font-family: var(--t-mono-font); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.player-source .source-status { color: var(--t-muted); letter-spacing: 0; text-transform: none; }
.player-source .source-who { color: var(--t-muted); font-size: 11px; margin-top: 2px; }
.player-source .source-text { color: var(--t-fg-2); font-family: var(--t-ui-font); font-size: 13px; line-height: 1.55; margin-top: 3px; white-space: pre-wrap; }
.player-source.pending { margin: 8px 0; padding: 12px; background: color-mix(in srgb, var(--t-player) 9%, transparent); }
.pending-input { background: transparent; }
.md p { margin: 0 0 0.6em; } .md p:last-child { margin: 0; }
.md code { font-family: var(--t-mono-font); font-size: 0.9em; }

/* composer */
.composer {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 14px; border-top: 0.5px solid var(--t-border);
  background: var(--t-panel); position: sticky; bottom: 0;
}
.composer select, .composer textarea, .composer button {
  background: var(--t-panel-2); color: var(--t-fg); border: 0.5px solid var(--t-border);
  border-radius: 6px; font: inherit; padding: 6px 8px;
}
.composer textarea { flex: 1; resize: vertical; min-height: 40px; }
.composer button { cursor: pointer; }
.composer button:hover { border-color: var(--t-accent); }
.empty { text-align: center; color: var(--t-faint); padding: 40px; font-family: var(--t-narration-font); }

/* identity chip + sign-in gate */
.who-chip { font-size: 12px; color: var(--t-muted); }
.who-chip a { color: var(--t-accent); text-decoration: none; }
.who-chip .role { color: var(--t-faint); margin-left: 4px; }
.gate { text-align: center; padding: 60px 20px; font-family: var(--t-narration-font); color: var(--t-fg-2); }
.gate a { color: var(--t-accent); }