/* Wide-Angle Studio — tokens match the Wide·Angle WordPress theme exactly (spec §1).
   Flat, print-like surfaces: no rounded corners, no shadows, no elevation. */

:root {
  --paper: #fbfaf7;
  --raised: #f4f1ea;
  --ink: #16130f;
  --soft-ink: #4a453d;
  --hairline: #e3ddd0;
  --accent: #c8321e;
  --contested: #9a7420;
  --open: #5f5c52;
  --open-tint: #e4e2da;

  --display: "Fraunces", Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --script: Courier, "Courier New", monospace;

  --sidebar: 352px;
}

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

html { background: var(--paper); }

/* Application layout: fixed chrome, and the script and sidebar each scroll on their own. */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  min-width: 1100px; /* Mobile layout is out of scope for now (spec §9). */
}

a { color: inherit; }

button, textarea, input, select { font: inherit; color: inherit; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; }

/* ---------- Shared patterns ---------- */

.label {
  font: 400 11px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--soft-ink);
}

/* Section label: mono caps followed by a hairline running to the container edge. */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font: 400 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* Nav cells: hairline boxes sharing edges, active = solid ink. */
.nav-cell {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--hairline);
  margin-left: -1px;
  font: 400 12px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}
.nav-cell:first-child { margin-left: 0; }
.nav-cell:hover:not(.is-active):not(.is-disabled):not(:disabled) { background: var(--raised); }
.nav-cell.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); position: relative; }
.nav-cell.is-disabled, .nav-cell:disabled { color: #a8a194; cursor: not-allowed; }
.nav-cell:focus-visible, .button:focus-visible, .link-button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.button {
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: transparent;
  font: 400 11px/1.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.button:disabled { opacity: 0.4; cursor: default; }
.button--quiet { border-color: var(--hairline); }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: 400 11px/1.4 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--soft-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--ink); }

.pill {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid currentColor;
  font: 700 10px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill--locked { color: var(--accent); }
.pill--contested { color: var(--contested); }
.pill--open { color: var(--open); background: var(--open-tint); border-color: var(--open-tint); }

/* ---------- Masthead ---------- */

.masthead { border-bottom: 2px solid var(--ink); }
.masthead__inner { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 22px; padding-bottom: 16px; }
.wordmark { text-decoration: none; display: flex; align-items: baseline; gap: 18px; }
.wordmark__name { font: 600 40px/1 var(--display); font-variation-settings: "opsz" 144; letter-spacing: -0.01em; }
.wordmark__tagline { font: italic 400 16px/1.2 var(--body); color: var(--soft-ink); }
.masthead__links { display: flex; }

/* ---------- Studio nav + title band ---------- */

.studio-nav { display: flex; padding-top: 18px; }

.title-band { padding-top: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.kicker { margin: 0 0 8px; font: 700 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.title-band h1 { margin: 0; font: 500 40px/1.05 var(--display); font-variation-settings: "opsz" 144; letter-spacing: -0.015em; }
.title-band .meta { margin: 10px 0 0; }
.title-band__actions { display: flex; gap: 8px; flex-shrink: 0; }

.scene-chips { display: flex; flex-wrap: wrap; margin-top: 14px; }
.notice { margin: 8px 0 0; color: var(--ink); }

/* ---------- Screen grid: desk + sidebar ---------- */

.masthead, .studio-nav, .title-band, .footer { flex-shrink: 0; }
.screen { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); }

.desk { min-height: 0; overflow-y: auto; background: var(--raised); padding: 40px 40px 72px; border-right: 1px solid var(--hairline); }

/* ---------- Screenplay page (industry format, spec §4) ---------- */

.page {
  max-width: 8.5in;
  margin: 0 auto;
  padding: 1in 1in 1in 1.5in;
  background: var(--paper);
  border: 1px solid var(--hairline);
  font: 12pt/1.2 var(--script);
  color: var(--ink);
  position: relative;
}
.screenplay p, .screenplay h2, .screenplay h3, .screenplay h4 { font: inherit; margin: 0 0 1.2em; }
.screenplay h3 { text-transform: uppercase; margin-top: 0; position: relative; }
.screenplay h3[id]::before, .screenplay h3[id]::after { content: attr(id); position: absolute; top: 0; }
.screenplay h3[id]::before { left: -0.9in; }
.screenplay h3[id]::after { right: -0.6in; }
.screenplay .dialogue { width: 3.5in; margin: 0 auto 1.2em; }
.screenplay .dialogue h4 { text-align: center; text-transform: uppercase; margin: 0; }
.screenplay .dialogue p { margin: 0; }
.screenplay .dialogue .parenthetical { padding: 0 0.6in; }
.screenplay h2 { text-align: right; text-transform: uppercase; }
.screenplay .centered { text-align: center; }
.screenplay .bold { font-weight: 700; }
.screenplay .italic { font-style: italic; }
.screenplay .underline { text-decoration: underline; }

.editor { max-width: 8.5in; margin: 0 auto; }
.editor textarea {
  width: 100%;
  min-height: 70vh;
  padding: 24px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font: 12pt/1.4 var(--script);
  resize: vertical;
}
.editor__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.editor__bar div { display: flex; gap: 8px; }

/* ---------- Sidebar ---------- */

.sidebar { min-height: 0; overflow-y: auto; padding: 28px 4px 0 24px; }
.sidebar section { margin-bottom: 24px; }
.sidebar .empty { margin: 0; font-style: italic; color: var(--soft-ink); font-size: 14px; }

.character { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.character__name { font: 500 15px/1.3 var(--display); }
.character__line { color: var(--soft-ink); }

.decision { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; margin: 0 0 12px; }
.decision__num { font: 400 11px/1.9 var(--mono); color: var(--soft-ink); text-decoration: none; }
a.decision__num:hover { color: var(--accent); }
.decision__statement { font: 400 15px/1.35 var(--display); margin: 0; }
.decision__meta { grid-column: 2; }
.decision__conflict { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--contested); }

.section-label--flag { color: var(--contested); }
.flags__note { margin: -4px 0 12px; font-size: 13px; color: var(--soft-ink); }
.flag { border-left: 2px solid var(--contested); padding: 2px 0 2px 12px; margin: 0 0 14px; }
.flag > .label { color: var(--contested); text-decoration: none; }
.flag .decision__statement { margin: 4px 0; }
.flag__why { margin: 0 0 8px; font-size: 14px; line-height: 1.45; }
.flag__actions { display: flex; }
.flag__actions .nav-cell { padding: 5px 10px; font-size: 10px; }

/* ---------- Second Reader ---------- */

.reader { margin-bottom: 0 !important; }
.reader__mode { margin: -4px 0 12px; font-size: 10px; letter-spacing: 0.14em; }
.reader__mode.is-mock { color: var(--contested); }
.reader__log { min-height: 60px; }
.reader__log .empty { margin-bottom: 12px; }

.msg { margin: 0 0 18px; }
.msg__who { margin: 0 0 4px; }
.msg__who--reader { color: var(--accent); }
.msg__text { margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--error .msg__text { font-style: italic; color: var(--soft-ink); }
.msg--pending .msg__text { color: var(--soft-ink); font-style: italic; }

.hold { border-top: 2px solid var(--accent); border-bottom: 1px solid var(--hairline); padding: 12px 0 14px; }
.hold--withheld { border-top-color: var(--contested); }
.hold__title { margin: 0 0 10px; font: 700 11px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.hold--withheld .hold__title { color: var(--contested); }
.hold__decision { margin: 0 0 10px; }
.hold__statement { margin: 4px 0 6px; font: italic 400 16px/1.35 var(--display); }
.hold__why { margin: 0; font-size: 14px; line-height: 1.5; }
.hold__choices { display: flex; flex-direction: column; margin-top: 12px; }
.hold__choices .nav-cell { margin: -1px 0 0; text-align: left; font-size: 11px; }
.hold__choices .nav-cell:first-child { margin-top: 0; }
.hold__choices .nav-cell--primary { border-color: var(--accent); color: var(--accent); position: relative; z-index: 1; }
.hold__choices .nav-cell--primary:hover:not(:disabled) { background: var(--accent); color: var(--paper); }
.hold__resolved { margin: 10px 0 0; }

.ask { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--hairline); padding: 12px 0 16px; }
.ask textarea {
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.4;
  resize: vertical;
}
.ask textarea:focus { border-color: var(--ink); outline: none; }
.ask__bar { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* ---------- Contradiction scan in the thread ---------- */

.scan { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline); padding: 10px 0 12px; }
.scan--drift { border-top: 2px solid var(--contested); }
.scan--drift > .msg__who { color: var(--contested); }
.scan__effect { margin: 8px 0 0; }
.scan__effect--contested > .label, .scan__effect--still_contested > .label, .scan__effect--still_flagged > .label { color: var(--contested); }
.scan__link { display: inline-block; margin-top: 10px; color: var(--ink); }

/* ---------- Decisions ledger (spec §2.3) ---------- */

.ledger { max-width: 860px; margin: 0 auto; background: var(--paper); border: 1px solid var(--hairline); padding: 8px 40px 24px; }
.ledger > .empty { font-style: italic; color: var(--soft-ink); padding: 24px 0; }

.ledger-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 20px; padding: 24px 0; border-bottom: 1px solid var(--hairline); scroll-margin-top: 16px; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row:target { background: linear-gradient(var(--raised), var(--raised)) no-repeat -40px 0 / calc(100% + 80px) 100%; }
.ledger-row__num { font: 400 13px/2.1 var(--mono); color: var(--soft-ink); }
.ledger-row__statement { margin: 0 0 8px; font: 500 23px/1.25 var(--display); font-variation-settings: "opsz" 72; letter-spacing: -0.005em; }
.ledger-row--open .ledger-row__statement { font-style: italic; font-weight: 400; }
.ledger-row__reason { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.ledger-row__reason .label { color: var(--ink); }
.ledger-row__tags { margin: 0 0 4px; }
.ledger-row__tags a, .ledger-row__flags a { color: var(--ink); }
.ledger-row__flags { margin: 6px 0 0; color: var(--contested); }
.ledger-row__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 6px; }

.conflict { margin: 14px 0 4px; padding: 14px 16px; border: 1px solid var(--contested); border-left-width: 3px; }
.conflict__title { margin: 0 0 8px; color: var(--contested); font-weight: 700; }
.conflict__scene { margin: 0 0 10px; }
.conflict__scene a { color: var(--ink); }
.conflict__scene p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.conflict__actions { display: flex; margin-top: 12px; }
.conflict__actions .nav-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 11px; }
.conflict__actions small { font: 400 10px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: none; color: var(--soft-ink); }
.conflict__actions .nav-cell--primary { border-color: var(--accent); color: var(--accent); position: relative; z-index: 1; }
.conflict__actions .nav-cell--primary:hover { background: var(--accent); color: var(--paper); }
.conflict__actions .nav-cell--primary:hover small { color: var(--paper); }

.note-form { margin: 12px 0 4px; }
.note-form label { display: block; margin-bottom: 6px; font-size: 15px; line-height: 1.4; }
.note-form textarea, .new-decision input[type="text"], .new-decision textarea, .record-form input[type="text"], .record-form textarea, .record-form select, .relationship-form select, .relationship-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
}
.note-form textarea:focus, .new-decision input[type="text"]:focus, .new-decision textarea:focus, .record-form input:focus, .record-form textarea:focus, .record-form select:focus, .relationship-form textarea:focus { border-color: var(--ink); outline: none; }
.record-form select, .relationship-form select { border-radius: 0; }
.note-form__bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.history { margin-top: 12px; }
.history summary { cursor: pointer; width: max-content; }
.history summary:hover { color: var(--ink); }
.history ol { list-style: none; margin: 10px 0 0; padding: 0 0 0 12px; border-left: 1px solid var(--hairline); }
.history li { margin: 0 0 10px; }
.history li p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; }

.new-decision { padding: 24px 0; border-bottom: 2px solid var(--ink); }
.field { display: block; margin-bottom: 16px; }
.field > .label { display: block; margin-bottom: 6px; color: var(--ink); }
.new-decision .field input[type="text"] { font: 500 20px/1.3 var(--display); }
.field small, .new-decision small { display: block; margin-top: 4px; font-size: 13px; color: var(--soft-ink); }
.new-decision__tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.new-decision fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.new-decision legend { margin-bottom: 8px; color: var(--ink); }
.check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 14px; line-height: 1.35; cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--ink); }
.check small { margin-top: 0 !important; }

/* Decisions sidebar */
.standing { display: grid; grid-template-columns: repeat(3, 1fr); }
.standing__cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--hairline); margin-left: -1px; }
.standing__cell:first-child { margin-left: 0; }
.standing__count { font: 500 30px/1 var(--display); }
.standing__cell--locked .standing__count { color: var(--accent); }
.standing__cell--contested .standing__count { color: var(--contested); }
.standing__cell--open .standing__count { color: var(--open); }
.standing__scan { margin: 10px 0 0; }
.states p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }

.cross { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 12px; }
.cross select { width: 100%; padding: 6px 8px; border: 1px solid var(--hairline); background: var(--paper); font-size: 14px; border-radius: 0; }
.cross .button { justify-self: end; }

/* ---------- Characters (spec §2.2) ---------- */

.proposed {
  display: inline-block;
  padding: 1px 6px;
  border: 1px dashed var(--accent);
  font: 700 10px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.kicker__link { text-decoration: none; }
.kicker__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sidebar__text { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
a.character__name { text-decoration: none; }
a.character__name:hover { color: var(--accent); }
.ledger-row__tags a { color: var(--ink); }

.cast { max-width: 960px; margin: 0 auto; }
.cast > .empty { font-style: italic; color: var(--soft-ink); }
.cast__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.cast-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 20px 22px 18px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  text-decoration: none;
}
.cast-card:hover { background: var(--raised); }
.cast-card:hover .cast-card__name { color: var(--accent); }
.cast-card__role { color: var(--soft-ink); }
.cast-card__name { margin: 8px 0 6px; font: 500 26px/1.15 var(--display); font-variation-settings: "opsz" 72; }
.cast-card__line { flex: 1; margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.cast-card__line.is-empty { font-style: italic; color: var(--soft-ink); }
.cast-card__meta { margin: 0; }
.arc--mapped { color: var(--ink); }
.arc--unmapped { color: #a8a194; }

.add-character { background: var(--paper); border: 1px solid var(--hairline); padding: 20px 24px 20px; margin-bottom: 24px; }
.add-character__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }

.record { max-width: 860px; margin: 0 auto; background: var(--paper); border: 1px solid var(--hairline); padding: 32px 40px 36px; }
.record__line { margin: 0 0 24px; font: italic 400 21px/1.4 var(--display); }
.record__block { margin-top: 28px; }
.record__grid { display: grid; gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.record__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.record__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.record__cell { padding: 14px 16px 16px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.record__cell h3 { margin: 0 0 6px; color: var(--ink); }
.record__cell .chip { margin-bottom: 6px; }
.record__text { margin: 0; font-size: 16px; line-height: 1.5; white-space: pre-wrap; }
.record__text.is-empty { font-style: italic; color: #8f887a; font-size: 15px; }
.record__hint { margin: -6px 0 8px; font-size: 13px; color: var(--soft-ink); }
.record__cell .record__hint { margin: 0 0 6px; }
.record-form .record__grid { border: 0; gap: 0 16px; }
.record-form .record__grid .field { margin-bottom: 16px; }
.record-form fieldset { margin: 4px 0 0; padding: 0; border: 0; }
.record-form legend { margin-bottom: 8px; color: var(--ink); }
.record-form__bar { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.record-form__bar > div { display: flex; gap: 8px; }
.link-button--danger { color: var(--accent); }
.link-button--danger:hover { color: var(--accent); }

.contradiction { margin-top: 28px; padding: 18px 20px 20px; border: 1px solid var(--accent); border-left-width: 4px; }
.contradiction.is-proposed { border-style: dashed; border-left-style: solid; }
.contradiction__label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 11px/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.contradiction__text { margin: 0 0 8px; font: 400 22px/1.35 var(--display); font-variation-settings: "opsz" 72; }
.contradiction .record__hint { margin: 8px 0 0; }
.contradiction__actions { display: flex; margin-top: 14px; }
.contradiction__actions .nav-cell--primary { border-color: var(--accent); color: var(--accent); position: relative; z-index: 1; }
.contradiction__actions .nav-cell--primary:hover { background: var(--accent); color: var(--paper); }
.contradiction .button { margin-top: 12px; }

.chips { display: flex; flex-wrap: wrap; }
.chip {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--hairline);
  margin: 0 -1px -1px 0;
  font: 400 12px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--ink);
}
.chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); position: relative; }

.relationship { margin: 0 0 12px; font-size: 14px; line-height: 1.45; }
.relationship__name { font: 500 15px/1.3 var(--display); text-decoration: none; }
.relationship__name:hover { color: var(--accent); }
.relationship p { margin: 2px 0 4px; }
.relationship-form { display: grid; gap: 6px; margin-top: 8px; }
.relationship-form select, .relationship-form textarea { padding: 6px 8px; font-size: 14px; }
.relationship-form .button { justify-self: end; }
.seen-by { margin-top: 14px; }
.seen-by p:not(.label) { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.seen-by .label { margin-bottom: 6px; }
.seen-by a { font-family: var(--display); }

.reader-note__text { margin: 0 0 6px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.reader-note .label { margin: 0 0 10px; }
.reader-note .empty { margin-bottom: 10px !important; }

.msg--proposal { border-left: 2px dashed var(--accent); padding-left: 12px; }

/* ---------- Mood (spec §2.4) ---------- */

.board { max-width: 1000px; margin: 0 auto; min-height: 100%; }
.board.is-dropping { outline: 2px dashed var(--ink); outline-offset: 8px; }
.board > .empty { font-style: italic; color: var(--soft-ink); }
.board-form { background: var(--paper); border: 1px solid var(--hairline); padding: 20px 24px; margin-bottom: 24px; }
.board__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }

.tile { margin: 0; background: var(--paper); border: 1px solid var(--hairline); }
.tile__frame { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--raised); }
.tile__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile figcaption { display: flex; align-items: center; gap: 8px; padding: 6px 10px 8px; border-top: 1px solid var(--hairline); }
.tile__caption { flex: 1; min-width: 0; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; background: transparent; font-size: 14px; }
.tile__caption:hover { border-bottom-color: var(--hairline); }
.tile__caption:focus { border-bottom-color: var(--ink); outline: none; }
.tile__caption::placeholder { color: #a8a194; font-style: italic; }
.tile figcaption .link-button { font-size: 10px; }

.tile--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  border: 1px dashed #b9b09f;
  background: transparent;
  font-size: 14px;
  color: var(--soft-ink);
  cursor: pointer;
}
.tile--add:hover { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.tile--add .label { color: var(--ink); }

.not-canon { border: 1px solid var(--ink); border-left-width: 3px; padding: 12px 14px 14px; }
.not-canon .section-label::after { display: none; }
.not-canon p { margin: 0; font-size: 14px; line-height: 1.5; }
.board-read { margin-bottom: 12px; }
.board-read .label { margin: 6px 0 0; }

/* ---------- Accounts (spec §8) ---------- */

.account-bar { display: flex; align-items: center; gap: 0; margin-left: auto; }
.account-bar > .label { margin-right: 14px; color: var(--soft-ink); text-transform: none; letter-spacing: 0.06em; font-size: 12px; }

/* Account pages: no sidebar, no project. */
body.solo .screen { grid-template-columns: minmax(0, 1fr); }
body.solo .sidebar { display: none; }
body.solo .desk { border-right: 0; }
.solo-page { max-width: 760px; margin: 0 auto; background: var(--paper); border: 1px solid var(--hairline); padding: 28px 36px 32px; }
.solo-page > p { margin: 0 0 16px; font-size: 17px; line-height: 1.55; }
.solo-page input[type="email"], .solo-page input[type="password"], .solo-page input[type="number"], .solo-page select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--paper);
  font-size: 15px;
}
.solo-page input:focus, .solo-page select:focus { border-color: var(--ink); outline: none; }

.login { max-width: 460px; }
.login__error { margin: 0 0 16px; padding: 10px 12px; border-left: 3px solid var(--accent); background: #f7e6e2; font-size: 15px; }
.login__message { margin: 0 0 16px; padding: 10px 12px; border-left: 3px solid var(--ink); background: var(--raised); font-size: 15px; }
.login__note { margin: 0 0 12px; font-size: 14px; color: var(--soft-ink); }
.login__switch { margin: 18px 0 0; text-align: center; }

.project-list { margin-bottom: 28px; border-top: 1px solid var(--hairline); }
.project-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.project-row h2 { margin: 4px 0; }
.project-row__open { padding: 0; border: 0; background: none; font: 500 26px/1.2 var(--display); cursor: pointer; text-align: left; }
.project-row__open:hover { color: var(--accent); }
.project-row .label { margin: 0; }
.project-row__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.project-row__actions .link-button { margin-left: 8px; }
.new-project { margin-top: 8px; }

.admin { max-width: 1100px; }
.admin__adopt { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--ink); border-left-width: 3px; }
.admin__adopt p { margin: 0; font-size: 15px; }
.accounts { width: 100%; border-collapse: collapse; font-size: 14px; }
.accounts th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ink); font-weight: 400; }
.accounts td { padding: 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.accounts input[type="number"] { width: 90px; padding: 5px 8px; }
.accounts__row.is-pending { background: var(--raised); }
.accounts__actions { text-align: right; white-space: nowrap; }
.accounts__admin { letter-spacing: 0.1em; }
.pill--account-pending { color: var(--contested); }
.pill--account-approved { color: var(--ink); }
.pill--account-suspended { color: var(--accent); }

/* ---------- Footer ---------- */

.footer { border-top: 2px solid var(--ink); }
.footer__inner { display: flex; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; font: 400 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft-ink); }

/* Fountain import (Projects page and Workspace) */
.import { margin-top: 4px; }
.import--review { max-width: 8.5in; margin: 0 auto; }
.import > .label { margin: 0 0 12px; }
.import__start { margin-top: 0; padding-top: 0; border-top: 0; gap: 20px; }
.import__plain { margin: 0 0 16px; font-size: 15px; color: var(--soft-ink); }
.import__start .import__plain { margin: 0; }
.import__section { margin-bottom: 16px; }
.import__section > .label { margin: 0 0 6px; }
.import__title-page { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; padding: 12px 14px; border: 1px solid var(--hairline); background: var(--raised); font-size: 14px; }
.import__title-page dt { margin: 0; }
.import__title-page dd { margin: 0; }
.import__counts { margin: 16px 0; padding: 16px 0 0; border-top: 1px solid var(--hairline); }
.import__scenes { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.import__scenes li { padding: 3px 0; }
.import__scenes .label { display: inline-block; min-width: 3em; }
.import__scenes small { color: var(--soft-ink); }
.import__warning-title { margin: 0 0 6px; }
.import .check { margin: 12px 0; }
.import .check small { display: block; margin-top: 2px !important; font-size: 13px; color: var(--soft-ink); }
.import-section { margin-top: 40px; }
.import .editor__bar { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }