/* Load after style.css. Original interface: paper, ink, a little brass. */
:root,
:root[data-theme="forest"] {
  color-scheme: light;
  --ink: #263d33;
  --green: #244d40;
  --green-hover: #183e33;
  --green-soft: #e1e8dc;
  --cream: #f5f2e8;
  --paper: #fffdf7;
  --panel: #eeefe4;
  --muted: #616a59;
  --line: #d3d8c9;
  --gold: #805a22;
  --brass: #d9bd85;
  --red: #a03930;
  --on-accent: #fffdf7;
  --on-gold: #2f2a1c;
  --subtle: #e9e2cf;
  --disabled: #e9ebdf;
  --danger-soft: #fbe9e3;
  --success: #386042;
  --success-soft: #e5eddf;
  --shadow: 0 16px 48px #233d3312;
  --backdrop: #182e286b;
  --cover: #2c4b41;
  --cover-spine: #213c33;
  --cover-rust: #89614e;
  --cover-rust-spine: #694c3e;
  --art-light: #eceddd;
  --art-dark: #dbe2d3;
}

:root[data-theme="amber"] {
  color-scheme: light;
  --ink: #493425;
  --green: #6e3f28;
  --green-hover: #562e1c;
  --green-soft: #efdfc9;
  --cream: #f7eddd;
  --paper: #fff9ee;
  --panel: #f1e5d1;
  --muted: #78614b;
  --line: #deccb0;
  --gold: #7c5217;
  --brass: #dbb774;
  --red: #a1392d;
  --on-accent: #fff9ee;
  --on-gold: #382a18;
  --subtle: #edddbc;
  --disabled: #ecdfc8;
  --danger-soft: #f9e5dc;
  --success: #52632f;
  --success-soft: #e9edda;
  --shadow: 0 16px 48px #67422515;
  --backdrop: #30231973;
  --cover: #785136;
  --cover-spine: #593923;
  --cover-rust: #9b593e;
  --cover-rust-spine: #70402d;
  --art-light: #f7e7c7;
  --art-dark: #e9d4ac;
}

:root[data-theme="ink"] {
  color-scheme: light;
  --ink: #273e4b;
  --green: #234c65;
  --green-hover: #19394f;
  --green-soft: #dce9ec;
  --cream: #eef4f5;
  --paper: #fbfdfd;
  --panel: #e4eef0;
  --muted: #566d77;
  --line: #cadbde;
  --gold: #216e71;
  --brass: #99cbca;
  --red: #a13c46;
  --on-accent: #fbfdfd;
  --on-gold: #173c44;
  --subtle: #dcebed;
  --disabled: #dfe9ea;
  --danger-soft: #fbe8eb;
  --success: #286863;
  --success-soft: #dcefeb;
  --shadow: 0 16px 48px #294b6112;
  --backdrop: #172f426b;
  --cover: #31566e;
  --cover-spine: #213d51;
  --cover-rust: #597d7d;
  --cover-rust-spine: #3b5d5d;
  --art-light: #e5f1f0;
  --art-dark: #cadddf;
}

:root[data-theme="midnight"] {
  color-scheme: dark;
  --ink: #e8e0d1;
  --green: #d9bd85;
  --green-hover: #ecd2a0;
  --green-soft: #343b44;
  --cream: #141c28;
  --paper: #1c2736;
  --panel: #172231;
  --muted: #a9b5c1;
  --line: #3a4958;
  --gold: #dbbb7c;
  --brass: #d9bd85;
  --red: #ffada2;
  --on-accent: #202b39;
  --on-gold: #202b39;
  --subtle: #303442;
  --disabled: #24313f;
  --danger-soft: #442d35;
  --success: #acd3ad;
  --success-soft: #293f39;
  --shadow: 0 16px 48px #00000030;
  --backdrop: #070d17b8;
  --cover: #354c62;
  --cover-spine: #26384e;
  --cover-rust: #72533f;
  --cover-rust-spine: #4b372c;
  --art-light: #293848;
  --art-dark: #1b2b3a;
}

html, body { background: var(--cream); color: var(--ink); }
::selection { background: var(--green-soft); color: var(--ink); }
input, textarea, select { accent-color: var(--green); }
button:disabled { opacity: .55; }
button, input, textarea, select, details, [role="tab"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible { outline-color: var(--gold); }

/* Cover legacy hardcoded surfaces as well as the studio's new components. */
.site-header { background: var(--cream); }
.prototype-banner, .studio-banner {
  background: var(--subtle); color: var(--ink); min-height: 32px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 7px 18px; font-size: 11px; letter-spacing: .4px; line-height: 1.6;
}
.prototype-dot { background: var(--gold); box-shadow: 5px 0 color-mix(in srgb, var(--gold) 40%, transparent); }
.brand-mark { color: var(--on-accent); }
.header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.model-button { border-color: var(--line); background: var(--paper); }
.hero h1 em { color: var(--gold); }
.button.primary { background: var(--green); border-color: var(--green); color: var(--on-accent); }
.button.primary:hover { background: var(--green-hover); border-color: var(--green-hover); }
.button.secondary { background: var(--paper); border-color: var(--line); color: var(--ink); }
.button.secondary:hover { background: var(--green-soft); border-color: var(--line); }
.button.gold { background: var(--brass); border-color: var(--brass); color: var(--on-gold); }
.button.danger { border: 1px solid var(--red); color: var(--red); }
.button.text:hover, .tool-button:hover { background: var(--green-soft); }
.book-card { box-shadow: var(--shadow); }
.book-cover, .art-book { background: var(--cover); border-color: var(--cover-spine); color: #f0d79e; box-shadow: 3px 3px 0 var(--line); }
.book-cover:before { border-color: #d7c18b80; }
.book-cover.rust { background: var(--cover-rust); border-color: var(--cover-rust-spine); color: #ffebc5; }
.book-footer, .side-tabs, .editor-bottom, .assistant-footnote { border-color: var(--line); }
.tag, .art-caption, .volume-heading, .chapter-number, .chapter-state,
.chapter-status-mark, .chapter-subtitle, .tool-button, .context-card p,
.card-label button, .context-tags span, .assistant-label, .pipeline li,
.step-hint, .assistant-disclaimer, .pending-card p, .pending-discard,
.assistant-footnote, .mini-memory, .empty-body-note, .form-hint,
.mode-card span, .model-explainer p, .compare-block h3, .close-dialog,
.editor-bottom, .process-note i, .shelf-footer strong { color: var(--muted); }
.new-book { border-color: var(--line); background: var(--panel); box-shadow: none; }
.new-book:hover { background: var(--green-soft); }
.new-book .plus { border-color: var(--line); color: var(--green); }
.desk-topbar, .manuscript-side, .assistant-pane, .mobile-desk-tabs { background: var(--panel); }
.desk-breadcrumb .slash { color: var(--muted); }
.chapter-button.active, .mobile-desk-tabs button.active { background: var(--green-soft); color: var(--green); }
.chapter-button:hover:not(.active) { background: color-mix(in srgb, var(--green-soft) 55%, transparent); }
.add-chapter { border-color: var(--line); }
.manuscript { color: var(--ink); caret-color: var(--gold); }
.manuscript::placeholder, .form-input::placeholder { color: var(--muted); opacity: .8; }
.manuscript:focus-visible { outline-color: var(--line); }
.manuscript-divider { background: var(--gold); }
.context-card { background: var(--paper); border-color: var(--line); }
.context-tags span { background: var(--green-soft); }
.pipeline li:before { background: var(--line); }
.step-dot { border-color: var(--line); background: var(--panel); color: var(--muted); }
.pipeline li.done .step-dot { background: var(--success); border-color: var(--success); color: var(--paper); }
.pipeline li.current { color: var(--gold); }
.pipeline li.current .step-dot { background: var(--subtle); border-color: var(--gold); color: var(--gold); }
.pending-card { background: var(--success-soft); border-color: var(--line); }
.mini-memory span:first-child { color: var(--gold); }
.mobile-desk-tabs button { color: var(--muted); }
.mobile-desk-tabs button.active { border-bottom-color: var(--gold); }
dialog { border-color: var(--line); box-shadow: 0 30px 100px #00000030; }
dialog::backdrop { background: var(--backdrop); }
.form-input { border-color: var(--line); background: var(--paper); color: var(--ink); }
.form-input:disabled { background: var(--disabled); color: var(--muted); }
.segmented { background: var(--panel); border-color: var(--line); }
.segmented button { color: var(--muted); }
.segmented button.selected { background: var(--paper); color: var(--green); box-shadow: var(--shadow); }
.mode-card { border-color: var(--line); }
.mode-card.selected { background: var(--green-soft); border-color: var(--green); }
.model-explainer { background: var(--panel); border-color: var(--line); }
.model-connect-state { color: var(--gold); }
.compare-block { background: var(--panel); border-color: var(--line); }
.compare-block.added { background: var(--success-soft); border-color: var(--line); }
.compare-added { background: var(--green-soft); color: var(--ink); }
.paused-notice { background: var(--subtle); color: var(--ink); }
.toast { background: var(--green); color: var(--on-accent); border-color: var(--line); box-shadow: var(--shadow); }
.footnote-seal { border-color: var(--line); }

/* The illustrated arch stays in the same palette when the room changes. */
.room-arch {
  border-color: var(--line);
  background: repeating-linear-gradient(0deg, transparent 0 30px, color-mix(in srgb, var(--green) 8%, transparent) 31px 32px), linear-gradient(145deg, var(--art-dark), var(--art-light) 85%);
}
.arch-line { border-color: color-mix(in srgb, var(--green) 18%, transparent); }
.moon { border-color: var(--gold); box-shadow: inset -13px -2px var(--subtle); }
.art-stars { color: var(--gold); }
.still-life { border-color: color-mix(in srgb, var(--gold) 65%, var(--paper)); }
.art-book.gold-book { background: var(--cover-rust); border-color: var(--cover-rust-spine); color: #ffebc5; }
.art-book:before, .art-book:after { background: #f0d79e80; }
.art-ink { background: var(--cover); border-color: var(--cover-spine); }
.art-ink:before { background: var(--brass); }
.quill { background: var(--paper); border-color: var(--line); box-shadow: inset -7px 0 var(--art-dark); }

/* Four previews use static classes/data attributes: strict CSP, no style attrs. */
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.theme-option {
  --preview-paper: #f5f2e8; --preview-ink: #244d40; --preview-gold: #805a22;
  position: relative; display: flex; flex-direction: column; gap: 11px;
  text-align: left; min-width: 0; border: 1px solid var(--line); border-radius: 5px;
  padding: 18px; background: var(--paper); color: var(--ink);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.theme-option[data-theme-option="amber"], .theme-option[data-theme="amber"], .theme-option.theme-amber, .theme-amber {
  --preview-paper: #f7eddd; --preview-ink: #6e3f28; --preview-gold: #7c5217;
}
.theme-option[data-theme-option="ink"], .theme-option[data-theme="ink"], .theme-option.theme-ink, .theme-ink {
  --preview-paper: #eef4f5; --preview-ink: #234c65; --preview-gold: #216e71;
}
.theme-option[data-theme-option="midnight"], .theme-option[data-theme="midnight"], .theme-option.theme-midnight, .theme-midnight {
  --preview-paper: #141c28; --preview-ink: #d9bd85; --preview-gold: #e8e0d1;
}
.theme-option:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow); }
.theme-option.selected, .theme-option[aria-pressed="true"], .theme-option[aria-checked="true"] { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.theme-option strong { font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: 1px; }
.theme-option p, .theme-option small { font-size: 11px; line-height: 1.8; color: var(--muted); }
.theme-option .theme-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-option .theme-check { font-size: 13px; color: var(--green); }
.theme-swatches { display: flex; height: 48px; overflow: hidden; width: 100%; border: 1px solid var(--line); border-radius: 3px; }
.theme-swatches > :nth-child(1) { flex: 5; background: var(--preview-paper); }
.theme-swatches > :nth-child(2) { flex: 3; background: var(--preview-ink); }
.theme-swatches > :nth-child(3) { flex: 2; background: var(--preview-gold); }
.theme-miniature { background: var(--preview-paper); color: var(--preview-ink); border-radius: 3px; padding: 17px 15px; font-family: var(--serif); font-size: 18px; letter-spacing: 2px; }
.theme-miniature:before { content: "◈"; display: block; font-family: serif; font-size: 12px; color: var(--preview-gold); margin-bottom: 9px; }

/* Studio components: compact task control next to a generous writing surface. */
.toolbar, .inline-actions, .workbench-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; }
.toolbar { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.toolbar .form-input { width: auto; flex: 1 1 150px; min-width: 0; }
.inline-actions { margin-top: 13px; }
.workbench-actions { margin: 16px 0; }
.workbench-actions > .button { flex: 1 1 130px; }
.panel-note, .connection-summary {
  padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 3px; background: var(--panel); font-size: 11px; line-height: 1.85;
  color: var(--muted); margin: 12px 0 16px; overflow-wrap: anywhere;
}
.panel-note strong, .connection-summary strong { color: var(--ink); }
.form-help { font-size: 11px; color: var(--muted); line-height: 1.85; margin-top: 8px; }
.error-note { background: var(--danger-soft); border: 1px solid var(--red); color: var(--red); border-radius: 3px; padding: 11px 14px; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; margin: 12px 0; }
.source-label { color: var(--gold); font-size: 10px; letter-spacing: .5px; line-height: 1.7; }
.setting-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.setting-grid > * { min-width: 0; }
.setting-grid .form-label { margin-top: 0; }
.setting-grid .wide { grid-column: 1 / -1; }
.asset-editor { width: 100%; min-height: 190px; resize: vertical; padding: 14px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: var(--paper); font-size: 13px; line-height: 1.95; }
.agent-roster { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 20px; }
.agent-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); border-radius: 3px; padding: 6px 9px; color: var(--muted); font-size: 10px; line-height: 1.65; min-width: 0; overflow-wrap: anywhere; }
.agent-pill.active, .agent-pill.running, .agent-pill[data-status="running"] { border-color: var(--gold); color: var(--gold); background: var(--subtle); }
.agent-pill.done, .agent-pill.succeeded, .agent-pill[data-status="succeeded"] { color: var(--success); background: var(--success-soft); }
.history-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 13px; margin: 0 0 22px; }
.history-filters > * { min-width: 0; flex: 1 1 180px; }
.history-filters .form-input { width: 100%; }
.history-list { display: grid; gap: 16px; min-width: 0; }
.run-card { border: 1px solid var(--line); border-radius: 5px; background: var(--paper); min-width: 0; overflow: hidden; }
.run-card > header, .run-card > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 19px; border-bottom: 1px solid var(--line); background: var(--panel); }
.run-card > summary { cursor: pointer; min-height: 54px; }
.run-card > summary::marker { color: var(--gold); }
.run-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.65; overflow-wrap: anywhere; }
.run-card time, .run-card .run-meta, .step-card time, .step-card .step-meta { font-size: 10px; color: var(--muted); line-height: 1.8; overflow-wrap: anywhere; }
.run-card > .run-body { padding: 17px 19px; }
.run-card > .step-card { margin: 14px 18px; }
.step-card { min-width: 0; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); margin-top: 10px; }
.step-card > summary, .step-card > header { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; justify-content: space-between; padding: 12px 14px; cursor: pointer; min-height: 48px; font-size: 12px; background: var(--panel); }
.step-card > summary::marker { color: var(--gold); }
.step-card > p { padding: 12px 14px 0; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.step-output { margin: 0; padding: 14px; font-family: var(--sans); font-size: 12px; line-height: 1.95; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-height: 430px; overflow: auto; tab-size: 2; }
.step-output:empty { display: none; }
.step-output::-webkit-scrollbar { width: 5px; height: 5px; }
.step-output::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); font-size: 10px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.status-badge.running, .status-badge[data-status="running"] { color: var(--gold); border-color: var(--gold); background: var(--subtle); }
.status-badge.succeeded, .status-badge.success, .status-badge[data-status="succeeded"] { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 50%, var(--line)); }
.status-badge.failed, .status-badge.error, .status-badge[data-status="failed"] { color: var(--red); background: var(--danger-soft); border-color: var(--red); }
.proposal { background: var(--success-soft); border: 1px solid var(--line); border-left: 3px solid var(--success); border-radius: 3px; padding: 17px; margin: 17px 0; overflow-wrap: anywhere; }
.proposal h3 { font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 9px; }
.proposal p { font-size: 12px; color: var(--ink); line-height: 1.85; }
.proposal .step-output { padding: 0; max-height: 260px; }

@media (max-width: 1150px) {
  .header-actions { gap: 6px; }
  .header-actions .button { padding-inline: 11px; }
  .site-header { gap: 16px; }
  .main-nav { gap: 22px; }
}
@media (max-width: 920px) {
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .header-actions .model-button { max-width: 180px; }
  .history-filters { gap: 10px; }
  .history-filters > * { flex-basis: 140px; }
}
@media (max-width: 650px) {
  .site-header { height: auto; min-height: 96px; padding: 16px 18px; gap: 14px 10px; align-items: center; }
  .header-actions { margin-left: auto; max-width: 100%; gap: 5px; }
  .header-actions .button { font-size: 10px; padding: 7px 9px; }
  .header-actions .model-button { max-width: 155px; }
  .studio-banner { font-size: 10px; letter-spacing: 0; text-align: center; padding-inline: 12px; }
  .theme-grid { gap: 10px; }
  .theme-option { padding: 13px; gap: 9px; }
  .theme-option strong { font-size: 18px; }
  .theme-option p, .theme-option small { font-size: 10px; }
  .theme-swatches { height: 36px; }
  .setting-grid { grid-template-columns: 1fr; gap: 15px; }
  .theme-miniature { font-size: 15px; padding: 14px 10px; letter-spacing: 1px; }
  .run-card > header, .run-card > summary { padding: 14px; }
  .run-card > .run-body { padding: 12px; }
  .run-card > .step-card { margin: 12px; }
  .step-card > summary, .step-card > header { padding: 11px; }
  .step-output { padding: 12px; max-height: 360px; }
  .run-card h3 { font-size: 18px; }
  .history-filters { display: grid; grid-template-columns: 1fr; }
  .workbench-actions > .button { flex-basis: 110px; }
  .asset-editor { font-size: 16px; min-height: 180px; }
}
@media (max-width: 350px) {
  .site-header { padding-inline: 12px; }
  .header-actions { width: 100%; justify-content: space-between; margin: 0; }
  .header-actions .model-button { flex: 1; max-width: none; }
  .theme-grid { grid-template-columns: 1fr; }
  .theme-option { gap: 8px; }
  .theme-swatches { height: 32px; }
  .theme-option strong { font-size: 19px; }
  .theme-option p, .theme-option small { font-size: 11px; }
  .inline-actions .button { flex: 1 1 95px; }
  .agent-pill { font-size: 10px; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-option { transition: none; }
  .theme-option:hover { transform: none; }
}