:root {
  color-scheme: dark;
  --ink: #d8dedb;
  --muted: #aeb8b4;
  --dim: #737d7a;
  --night: #11141a;
  --panel: #191d24;
  --panel-2: #20262f;
  --line: #343b45;
  --gold: #f0c56b;
  --coral: #d86147;
  --mint: #86d5c1;
  --blue: #2f83a3;
  --red: #e0635e;
  --production-theme-bg: url("assets/theme/fossils-adventure-workspace-bg.png");
  --production-header-bg: url("assets/brand/fossils-header-clean.png");
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #000;
  color: var(--ink);
  font-weight: 400;
}

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

button {
  border: 0;
  border-radius: 8px;
  background: var(--gold);
  color: #16140f;
  cursor: pointer;
  font-weight: 600;
  min-height: 42px;
  padding: 0 16px;
}

button:hover {
  filter: brightness(1.06);
}

.shell {
  min-height: 100vh;
}

.hidden {
  display: none !important;
}

.login {
  align-items: center;
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 440px);
  margin: 0 auto;
  min-height: 100vh;
  padding: 48px;
  width: min(1180px, 100%);
}

.mark {
  aspect-ratio: 1;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent),
    #181e26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  padding: 34px;
}

.mark span {
  background:
    linear-gradient(180deg, var(--gold), var(--coral));
  border-radius: 999px;
}

.mascot-mark {
  aspect-ratio: 1;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: block;
  grid-column: 1;
  grid-row: 1 / span 2;
  padding: 0;
  width: min(64vh, 620px, 100%);
}

.mascot-mark img {
  background: transparent;
  border-radius: 0;
  display: block;
  height: 100%;
  object-fit: cover;
  padding: 0;
  width: 100%;
}

.login-copy h1 {
  font-size: clamp(46px, 8vw, 104px);
  letter-spacing: 0;
  line-height: 0.9;
  margin: 8px 0 18px;
}

.login-copy {
  align-self: end;
  grid-column: 2;
}

.toolkit-line {
  color: var(--ink);
  font-size: 26px;
  font-weight: 650;
  margin: 0 0 16px;
  white-space: nowrap;
}

.copyright-line {
  color: rgba(247, 244, 234, 0.68);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  margin: -6px 0 0;
  text-transform: none;
}

.prompt-line {
  color: var(--mint);
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 550;
  margin: 0;
}

.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  margin: 0 0 7px;
  text-transform: uppercase;
}

.login-form {
  align-self: start;
  background: rgba(25, 29, 36, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
  grid-column: 2;
  padding: 28px;
}

.walt-lobby {
  align-content: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(240, 197, 107, 0.16), transparent 34%),
    linear-gradient(135deg, #11161d 0%, #07090d 48%, #15110b 100%);
  background-position: center;
  background-size: cover;
  display: grid;
  gap: 42px;
  min-height: 100vh;
  padding: 56px;
}

.lobby-copy {
  color: var(--ink);
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
}

.lobby-copy p {
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 10px;
}

.lobby-copy h1 {
  color: #f4efe2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 6vw, 82px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.96;
  margin: 0;
  text-shadow: 0 5px 28px rgba(0, 0, 0, 0.62);
}

.lobby-copy span {
  color: rgba(244, 239, 226, 0.84);
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(19px, 2.3vw, 31px);
  font-style: italic;
  margin-top: 16px;
}

.lobby-card-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  margin: 0 auto;
  max-width: 1040px;
  width: 100%;
}

.lobby-card {
  align-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    rgba(18, 22, 28, 0.9);
  border: 1px solid rgba(240, 197, 107, 0.32);
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.42);
  color: var(--ink);
  display: grid;
  gap: 10px;
  justify-items: center;
  min-height: 210px;
  padding: 24px 18px;
  text-align: center;
}

.lobby-card:hover {
  background:
    linear-gradient(180deg, rgba(240, 197, 107, 0.18), rgba(255, 255, 255, 0.03)),
    rgba(24, 28, 34, 0.94);
  border-color: rgba(240, 197, 107, 0.68);
  transform: translateY(-2px);
}

.lobby-card-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 66px;
  width: 66px;
}

.lobby-card-icon[data-icon="notebook"] {
  background-image: url("assets/brand/workflow-icons/notebook.png");
}

.lobby-card-icon[data-icon="palette"] {
  background-image: url("assets/brand/workflow-icons/palette.png");
}

.lobby-card-icon[data-icon="storyboard"] {
  background-image: url("assets/brand/workflow-icons/storyboard.png");
}

.lobby-card-icon[data-icon="lantern"] {
  background-image: url("assets/brand/workflow-icons/lantern.png");
}

.lobby-card strong {
  color: #f4efe2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 400;
}

.lobby-card small {
  color: rgba(216, 222, 219, 0.7);
  font-size: 12px;
  font-weight: 400;
}

label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
}

input,
select,
textarea {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 430;
  min-height: 42px;
  padding: 11px 12px;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  padding-right: 34px;
}

textarea {
  line-height: 1.48;
  min-height: 220px;
  resize: vertical;
}

.studio {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

.rail {
  background: rgba(13, 16, 21, 0.92);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  left: 0;
  overflow: hidden;
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 0;
  justify-content: flex-start;
  min-height: 44px;
  padding: 4px 0;
  text-align: left;
  width: 100%;
}

.brand:hover,
.brand:focus-visible {
  background: rgba(240, 197, 107, 0.08);
  border-color: rgba(240, 197, 107, 0.22);
}

.brand-mark {
  align-items: center;
  background: transparent;
  border-radius: 8px;
  color: #17130d;
  display: flex;
  font-weight: 950;
  height: 68px;
  justify-content: center;
  width: 58px;
}

.brand strong {
  color: var(--ink);
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0;
}

.mascot-icon {
  overflow: visible;
  padding: 0;
}

.mascot-icon img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.brand span,
.role-box span {
  color: var(--dim);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.steps {
  display: grid;
  gap: 12px;
  overflow-y: auto;
  padding-right: 2px;
}

.step-group {
  display: grid;
  gap: 5px;
}

.step-group > span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0;
  padding: 0 0 1px 4px;
  text-transform: uppercase;
}

.admin-step-group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.step {
  align-items: center;
  background: transparent;
  color: #aeb8b4;
  display: flex;
  font-size: 0.74rem;
  font-weight: 400;
  gap: 10px;
  justify-content: flex-start;
  min-height: 39px;
  padding: 0 12px 0 8px;
  text-align: left;
  width: 100%;
}

.step::before {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 27px 27px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--gold);
  content: "";
  display: inline-flex;
  flex: 0 0 31px;
  font-size: 12px;
  font-weight: 600;
  height: 31px;
  justify-content: center;
  line-height: 1;
}

.step[data-icon="magnifier"]::before {
  background-image: url("assets/brand/workflow-icons/magnifier.png");
}

.step[data-icon="boots"]::before {
  background-image: url("assets/brand/workflow-icons/boots.png");
}

.step[data-icon="underwear"]::before {
  background-image: url("assets/brand/workflow-icons/underwear.png");
}

.step[data-icon="palette"]::before {
  background-image: url("assets/brand/workflow-icons/palette.png");
}

.step[data-icon="notebook"]::before {
  background-image: url("assets/brand/workflow-icons/notebook.png");
}

.step[data-icon="storyboard"]::before {
  background-image: url("assets/brand/workflow-icons/storyboard.png");
}

.step[data-icon="satchel"]::before {
  background-image: url("assets/brand/workflow-icons/satchel.png");
}

.step[data-icon="backpack"]::before {
  background-image: url("assets/brand/workflow-icons/backpack.png");
}

.step[data-icon="pith"]::before {
  background-image: url("assets/brand/workflow-icons/pith.png");
}

.step[data-icon="lantern"]::before {
  background-image: url("assets/brand/workflow-icons/lantern.png");
}

.step[data-icon="compass"]::before {
  background-image: url("assets/brand/workflow-icons/compass.png");
}

.step[data-icon="bowtie"]::before {
  background-image: url("assets/brand/workflow-icons/bowtie.png");
}

.step.active {
  background: #22313a;
  color: #e0e4e1;
  font-weight: 450;
}

.step.active::before {
  background-color: rgba(240, 197, 107, 0.16);
  border-color: rgba(240, 197, 107, 0.34);
  color: var(--ink);
}

.role-box {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: 16px;
}

.workspace {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.66)),
    linear-gradient(180deg, rgba(17, 20, 26, 0.8), rgba(17, 20, 26, 0.94)),
    var(--production-theme-bg),
    var(--night);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-width: 0;
  position: relative;
}

.topbar {
  background:
    linear-gradient(90deg, rgba(8, 10, 12, 0.22), rgba(8, 10, 12, 0.02) 48%, rgba(8, 10, 12, 0.22)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.18)),
    var(--production-header-bg),
    var(--night);
  background-position: center 58%;
  background-size: cover;
  border-bottom: 0;
  grid-column: 1 / -1;
  min-height: 118px;
}

.autosave-indicator {
  background: rgba(16, 20, 26, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  padding: 6px 10px;
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 5;
}

.topbar h2,
.panel h3,
.right-panel h3 {
  color: #e0e4e1;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.production-status-strip {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.console-title {
  min-width: 220px;
}

.console-title h2 {
  color: #d8dedb;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
}

.console-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
  padding: 7px 10px;
}

.pill.locked {
  border-color: rgba(240, 197, 107, 0.35);
  color: var(--gold);
}

.pill.live {
  border-color: rgba(134, 213, 193, 0.38);
  color: var(--mint);
}

.stage {
  min-width: 0;
  padding: 24px;
}

.production-status-strip {
  background: rgba(12, 15, 18, 0.62);
  border: 1px solid var(--line);
  border-radius: 8px;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 10px 12px;
}

.panel {
  background: rgba(25, 29, 36, 0.82);
  backdrop-filter: blur(3px);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-height: 520px;
  padding: 22px;
}

.hero-panel {
  background:
    linear-gradient(135deg, rgba(47, 131, 163, 0.1), transparent 58%),
    rgba(25, 29, 36, 0.78);
}

.admin-panel {
  background: rgba(21, 25, 31, 0.82);
}

.panel-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.panel-title-block {
  align-items: center;
  display: grid;
  gap: 2px 14px;
  grid-template-columns: 56px minmax(0, 1fr);
}

.panel-heading-icon {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  grid-row: 1 / span 2;
  height: 52px;
  object-fit: contain;
  padding: 6px;
  width: 52px;
}

.panel-title-block .eyebrow,
.panel-title-block h3 {
  grid-column: 2;
}

.panel-title-block .panel-note {
  grid-column: 2;
  max-width: 760px;
}

[data-panel="storyboard"] .panel-heading {
  align-items: end;
  margin-bottom: 12px;
}

[data-panel="storyboard"] .panel-title-block {
  grid-template-columns: 44px minmax(0, 1fr);
}

[data-panel="storyboard"] .panel-heading-icon {
  height: 42px;
  width: 42px;
}

.icon-button {
  border-radius: 50%;
  font-size: 24px;
  height: 42px;
  padding: 0;
  width: 42px;
}

.lock-button.locked-for-user {
  background: #2a2f38;
  color: var(--gold);
}

.brief-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 360px;
}

.brief-main {
  display: grid;
  gap: 14px;
}

.brief-main textarea {
  min-height: 92px;
}

.admin-setup-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 310px;
}

.admin-save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-save-actions button {
  min-height: 36px;
}

#lockProductionButton {
  background: var(--mint);
  color: #081411;
}

#lockProductionButton:disabled {
  background: #2a2f38;
  color: #737d7a;
  cursor: not-allowed;
  filter: none;
}

.admin-production-form,
.admin-status-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.admin-tabs {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px;
}

.admin-tab {
  background: transparent;
  color: #aeb8b4;
  font-size: 12px;
  min-height: 34px;
  padding: 0 8px;
}

.admin-tab.active {
  background: rgba(240, 197, 107, 0.16);
  border: 1px solid rgba(240, 197, 107, 0.34);
  color: var(--gold);
}

.admin-tab-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.form-section-title {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.form-section-title span {
  align-items: center;
  background: rgba(240, 197, 107, 0.12);
  border: 1px solid rgba(240, 197, 107, 0.34);
  border-radius: 999px;
  color: var(--gold);
  display: inline-flex;
  font-size: 12px;
  font-weight: 650;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.form-section-title strong {
  font-size: 16px;
  font-weight: 600;
}

.admin-form-grid,
.prompt-bible-builder,
.upload-grid,
.admin-check-grid,
.render-route-control-panel {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.admin-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prompt-bible-builder {
  display: grid;
  gap: 12px;
}

.prompt-builder-toolbar {
  align-items: center;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  min-width: 0;
}

.prompt-builder-toolbar > div {
  min-width: 0;
}

.prompt-builder-toolbar p {
  color: var(--muted);
  line-height: 1.4;
  margin: 6px 0 0;
}

.prompt-section-grid {
  display: grid;
  gap: 12px;
}

.prompt-section-card {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.prompt-section-card.editing {
  border-color: rgba(240, 197, 107, 0.55);
}

.prompt-section-card.pending {
  border-color: rgba(216, 97, 71, 0.58);
}

.prompt-section-head {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr) 48px auto;
  min-width: 0;
}

.prompt-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt-section-card textarea {
  font-size: 13px;
  line-height: 1.45;
  min-height: 190px;
}

.prompt-section-card textarea:disabled,
.prompt-section-card input:disabled,
.prompt-section-card select:disabled {
  opacity: 0.82;
}

.edit-prompt {
  background: #2a2f38;
  color: var(--gold);
  white-space: nowrap;
}

.prompt-status {
  display: grid;
  justify-items: center;
}

.approval-button {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  color: #fff;
  display: grid;
  font-size: 16px;
  font-weight: 950;
  height: 28px;
  line-height: 1;
  min-height: 28px;
  padding: 0;
  place-items: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  width: 28px;
}

.approval-button.pending {
  background: linear-gradient(180deg, #ee766a 0%, #d8433d 52%, #9f2624 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(70, 0, 0, 0.28),
    0 3px 0 #6f1b1b,
    0 6px 12px rgba(0, 0, 0, 0.28);
}

.approval-button.approved {
  background: linear-gradient(180deg, #97e3a9 0%, #44a85e 52%, #28763f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    inset 0 -3px 0 rgba(0, 68, 26, 0.34),
    0 3px 0 #19542d,
    0 6px 12px rgba(0, 0, 0, 0.24);
}

.approval-button:active {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(0, 0, 0, 0.35);
  transform: translateY(2px);
}

.upload-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.upload-drop {
  background: #10141a;
  border: 1px dashed rgba(240, 197, 107, 0.42);
  border-radius: 8px;
  color: var(--ink);
  min-height: 128px;
  padding: 14px;
}

.upload-drop input {
  margin-top: 10px;
  width: 100%;
}

.upload-drop span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.route-limit-pill {
  border: 1px solid rgba(240, 197, 107, 0.35);
  border-radius: 999px;
  color: var(--gold);
  font-size: 12px;
  padding: 7px 10px;
  white-space: nowrap;
}

.render-route-table {
  display: grid;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

.render-route-row {
  align-items: center;
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: 58px minmax(140px, 1.4fr) 82px minmax(90px, 1fr) minmax(110px, 1fr) minmax(90px, 1fr);
  min-width: 620px;
  padding: 8px;
}

.render-route-head {
  background: rgba(240, 197, 107, 0.08);
  color: var(--gold);
  font-size: 11px;
}

.render-route-row strong {
  display: grid;
  font-size: 12px;
  font-weight: 450;
  gap: 2px;
  min-width: 0;
}

.render-route-row small {
  color: var(--dim);
  font-size: 10px;
  font-weight: 400;
}

.render-route-row span {
  color: #aeb8b4;
  font-size: 11px;
  min-width: 0;
}

.route-mode {
  border: 1px solid var(--line);
  border-radius: 999px;
  justify-self: start;
  padding: 4px 7px;
}

.route-mode.api {
  border-color: rgba(134, 213, 193, 0.38);
  color: var(--mint);
}

.route-mode.manual {
  border-color: rgba(240, 197, 107, 0.35);
  color: var(--gold);
}

.route-mode.watchlist {
  border-color: rgba(224, 99, 94, 0.42);
  color: var(--red);
}

.route-switch {
  align-items: center;
  display: inline-flex;
  justify-self: end;
}

.route-switch input {
  accent-color: var(--gold);
  height: 15px;
  width: 15px;
}

.admin-check-grid label {
  align-items: center;
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  gap: 9px;
  padding: 12px;
}

.admin-check-grid input {
  min-height: auto;
}

.readiness-card,
.production-card,
.upload-ledger {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.readiness-card.blocked {
  background: rgba(76, 25, 24, 0.7);
  border-color: rgba(224, 99, 94, 0.58);
}

.readiness-card.ready {
  background: rgba(21, 70, 57, 0.72);
  border-color: rgba(134, 213, 193, 0.65);
}

.readiness-card span,
.production-card span,
.upload-ledger span {
  color: var(--gold);
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.readiness-card strong,
.production-card strong,
.upload-ledger strong {
  display: block;
  font-size: 22px;
}

.readiness-card p,
.production-card p {
  color: var(--muted);
  line-height: 1.4;
  margin: 8px 0 0;
}

.setup-requirements-list {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.setup-requirement {
  align-items: center;
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 8px;
  grid-template-columns: 16px 1fr;
}

.setup-requirement::before {
  background: linear-gradient(180deg, #ee766a 0%, #d8433d 52%, #9f2624 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 2px 5px rgba(0, 0, 0, 0.28);
  content: "";
  height: 12px;
  width: 12px;
}

.setup-requirement.complete {
  color: #c8d8d3;
}

.setup-requirement.complete::before {
  background: linear-gradient(180deg, #91e0c7 0%, #39b98f 52%, #1f7d62 100%);
}

.production-list {
  display: grid;
  gap: 10px;
}

.production-card.active {
  border-color: rgba(134, 213, 193, 0.5);
}

.production-card.empty {
  border-style: dashed;
}

.upload-ledger {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.upload-ledger strong {
  font-size: 20px;
}

.asset-intake-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 18px;
  overflow: hidden;
}

.asset-row {
  align-items: center;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.5fr) 0.8fr 0.8fr 0.8fr;
  padding: 12px 14px;
}

.asset-row:first-child {
  border-top: 0;
}

.asset-row-head {
  background: #10141a;
  color: var(--gold);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.asset-row.warning {
  border-left: 4px solid var(--red);
}

.asset-row.empty {
  color: var(--muted);
}

.asset-row small {
  color: var(--dim);
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.brief-meta {
  display: grid;
  gap: 14px;
}

.brief-helper {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 430;
  line-height: 1.35;
  margin: -4px 0 0;
  padding: 8px 10px;
}

.brief-roles-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.brief-role-section {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.brief-role-table {
  display: grid;
  gap: 6px;
}

.brief-role-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brief-role-row.role-head {
  color: var(--gold);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.brief-role-row input {
  font-size: 0.82rem;
  font-weight: 450;
  min-height: 36px;
  min-width: 0;
  padding: 8px 10px;
}

.add-role-row {
  background: #2a2f38;
  color: var(--gold);
  font-size: 0.82rem;
  justify-self: start;
  min-height: 34px;
  padding: 0 12px;
}

.bible-layout {
  display: grid;
  gap: 10px;
}

.workspace-theme-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.panel-tagline {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 350;
  margin: 4px 0 0;
}

.style-menu-card {
  display: block;
  padding: 0;
}

.style-menu-card summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr auto;
  list-style: none;
  padding: 14px;
}

.style-menu-card summary::-webkit-details-marker {
  display: none;
}

.style-menu-card summary::after {
  color: var(--gold);
  content: "+";
  font-size: 1.1rem;
  font-weight: 500;
}

.style-menu-card[open] summary::after {
  content: "-";
}

.style-menu-card summary span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

.style-menu-card summary strong {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 400;
}

.style-menu-content {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding: 14px;
}

.theme-preview {
  background: #090b0d;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.theme-preview img {
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  width: 100%;
}

.theme-header-preview img {
  aspect-ratio: auto;
  height: 118px;
  object-fit: cover;
  object-position: center 58%;
}

.header-choice-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.header-choice {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 8px;
}

.header-choice.active {
  border-color: rgba(240, 197, 107, 0.62);
  box-shadow: inset 0 0 0 1px rgba(240, 197, 107, 0.2);
}

.header-choice button {
  background: transparent;
  border: 0;
  color: var(--muted);
  display: grid;
  gap: 6px;
  min-height: 0;
  padding: 0;
  text-align: left;
}

.header-choice button img {
  aspect-ratio: auto;
  border-radius: 6px;
  display: block;
  height: 56px;
  object-fit: cover;
  object-position: center 58%;
  width: 100%;
}

.header-choice button span,
.header-choice label {
  color: #b8c1bd;
  font-size: 11px;
}

.header-choice label {
  gap: 5px;
}

.header-choice input {
  font-size: 10px;
  min-height: 0;
}

.header-randomizer {
  align-items: center;
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 10px;
}

.header-randomizer label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.header-randomizer input {
  accent-color: var(--gold);
  height: 15px;
  width: 15px;
}

.header-randomizer p,
.theme-rule-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.theme-meta-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.theme-meta-grid div {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.theme-meta-grid span,
.theme-upload-cell span {
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
}

.theme-meta-grid strong {
  color: var(--ink);
  font-size: 12px;
}

.theme-upload-cell {
  background: #10141a;
  border: 1px dashed rgba(240, 197, 107, 0.42);
  border-radius: 8px;
  padding: 12px;
}

.theme-upload-cell input {
  margin-top: 8px;
}

.theme-upload-cell span {
  color: var(--muted);
  display: block;
  margin-top: 8px;
  text-transform: none;
}

.theme-color-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.theme-color-grid label {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.theme-color-grid input {
  cursor: pointer;
  min-height: 36px;
  padding: 2px;
  width: 100%;
}

.production-identity-grid,
.style-preset-grid,
.icon-style-grid,
.style-idea-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.production-identity,
.style-preset,
.icon-style,
.style-idea-grid article {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 76px;
  padding: 12px;
  text-align: left;
}

.production-identity.active,
.style-preset.active,
.icon-style.active {
  border-color: rgba(240, 197, 107, 0.72);
  box-shadow: inset 0 0 0 1px rgba(240, 197, 107, 0.24);
}

.production-identity strong,
.style-preset strong,
.style-idea-grid strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
}

.production-identity span,
.style-idea-grid span {
  color: var(--muted);
  display: block;
  font-size: 0.76rem;
  font-weight: 350;
  line-height: 1.35;
  margin-top: 5px;
}

.style-preset {
  align-items: center;
  display: flex;
  gap: 10px;
}

.style-preset span {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  display: block;
  height: 26px;
  width: 26px;
}

.icon-style {
  min-height: 44px;
  text-align: center;
}

html[data-icon-style="computer"] .step-icon,
html[data-icon-style="computer"] .panel-heading-icon {
  filter: saturate(0.25) brightness(1.2);
}

html[data-icon-style="simple"] .step-icon,
html[data-icon-style="simple"] .panel-heading-icon {
  display: none;
}

.swatches {
  display: flex;
  gap: 12px;
}

.swatches span {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  height: 82px;
  width: 82px;
}

.rule-list,
.script-lines,
.scene-list,
.provider-row,
.qa-list,
.export-grid,
.asset-grid {
  display: grid;
  gap: 12px;
}

.rule-list p,
.script-lines p,
.scene-card,
.asset-grid div,
.export-grid div,
.qa-list span,
.queue p,
.packet p {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0;
  padding: 14px;
}

.writer-workspace {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(8.7in, 1fr) 330px;
  margin-top: 0;
}

.writer-library {
  background: rgba(17, 23, 31, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 0;
  grid-template-columns: 230px minmax(0, 1fr);
  margin-bottom: 10px;
  min-height: 130px;
  overflow: hidden;
}

.writer-library-sidebar {
  background: rgba(8, 11, 16, 0.72);
  border-right: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.writer-library-profile {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
  padding: 16px;
}

.writer-library-profile span,
.writer-library-toolbar span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.writer-library-profile strong,
.writer-library-toolbar strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.writer-project-list {
  display: grid;
  gap: 2px;
  max-height: 150px;
  overflow: auto;
  padding: 8px;
}

.writer-project-folder {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 500;
  justify-content: space-between;
  min-height: 34px;
  padding: 8px 10px;
  text-align: left;
}

.writer-project-folder strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.writer-project-folder.active,
.writer-project-folder:hover {
  background: rgba(240, 197, 107, 0.12);
  border-color: rgba(240, 197, 107, 0.32);
  color: var(--ink);
}

.writer-project-folder.active strong,
.writer-project-folder:hover strong {
  color: var(--gold);
}

.writer-library-main {
  display: grid;
  gap: 12px;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  padding: 14px;
}

.writer-library-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.writer-library-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}

.writer-library-actions {
  display: flex;
  gap: 8px;
}

.writer-library-actions button,
.writer-document-card > button {
  background: var(--gold);
  border: 0;
  border-radius: 6px;
  color: #111;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 9px 12px;
}

.writer-document-list {
  display: grid;
  gap: 10px;
}

.writer-document-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  min-height: 58px;
  padding: 10px 12px;
}

.writer-document-card.active,
.writer-document-card:hover,
.writer-document-card:focus-visible {
  background: rgba(240, 197, 107, 0.1);
  border-color: rgba(240, 197, 107, 0.48);
  outline: none;
}

.writer-document-icon {
  align-items: center;
  background: rgba(240, 197, 107, 0.12);
  border: 1px solid rgba(240, 197, 107, 0.3);
  border-radius: 6px;
  color: var(--gold);
  display: grid;
  font-size: 18px;
  font-weight: 800;
  height: 46px;
  justify-items: center;
  width: 46px;
}

.writer-document-card strong {
  color: var(--ink);
  display: block;
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.writer-document-card span,
.writer-document-card p,
.writer-document-meta small {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.writer-document-meta {
  align-items: end;
  display: grid;
  gap: 4px;
  justify-items: end;
}

.writer-document-badge {
  border: 1px solid rgba(86, 190, 178, 0.45);
  border-radius: 999px;
  color: var(--aqua) !important;
  font-size: 11px !important;
  padding: 3px 8px;
}

.writing-subtab-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  padding: 18px;
}

.writing-subtab-panel.walt-map-panel {
  background:
    linear-gradient(90deg, rgba(240, 197, 107, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(240, 197, 107, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 18% 12%, rgba(240, 197, 107, 0.13), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(86, 190, 178, 0.11), transparent 26%),
    #0d1117;
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
  min-height: calc(100vh - 168px);
  overflow: hidden;
  padding: 24px;
  position: relative;
}

.writing-subtab-panel.walt-map-panel::before {
  border: 1px dashed rgba(240, 197, 107, 0.28);
  border-radius: 10px;
  content: "";
  inset: 14px;
  pointer-events: none;
  position: absolute;
}

.writing-subtab-panel.walt-map-panel > * {
  position: relative;
  z-index: 1;
}

.writing-subtab-panel.hidden {
  display: none;
}

.writing-subtab-heading {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 54px minmax(0, 1fr);
}

.writing-subtab-heading .panel-heading-icon {
  height: 54px;
  width: 54px;
}

.writing-subtab-heading h3 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
}

.writing-subtab-heading p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.writing-subtab-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.walt-blueprint-flow {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  position: relative;
}

.walt-blueprint-step {
  background: rgba(16, 22, 29, 0.92);
  border: 1px solid rgba(240, 197, 107, 0.34);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 142px;
  padding: 12px;
  position: relative;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.24);
}

.walt-blueprint-step:not(:last-child)::after {
  color: var(--gold);
  content: "";
  border-top: 2px dotted rgba(240, 197, 107, 0.72);
  position: absolute;
  right: -19px;
  top: 50%;
  width: 18px;
}

.walt-blueprint-step span {
  align-items: center;
  background: rgba(240, 197, 107, 0.14);
  border: 1px solid rgba(240, 197, 107, 0.42);
  border-radius: 999px;
  color: var(--gold);
  display: inline-flex;
  font-size: 11px;
  height: 28px;
  justify-content: center;
  width: 28px;
  text-transform: uppercase;
}

.walt-blueprint-step strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.walt-blueprint-step p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.walt-map-section {
  display: grid;
  gap: 10px;
}

.walt-map-label {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.walt-station-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.walt-station-card,
.walt-platform-card {
  background: rgba(19, 27, 35, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 13px;
}

.walt-station-card span {
  color: rgba(240, 197, 107, 0.76);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.walt-station-card strong,
.walt-platform-card strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.walt-station-card p,
.walt-platform-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.walt-platform-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.walt-platform-card {
  border-color: rgba(86, 190, 178, 0.22);
}

.walt-platform-card span {
  color: #7edbd0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.walt-menu-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

.walt-menu-card {
  background: rgba(19, 27, 35, 0.92);
  border: 1px solid rgba(240, 197, 107, 0.24);
  border-radius: 8px;
  display: grid;
  gap: 9px;
  padding: 13px;
}

.walt-menu-card strong {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}

.walt-menu-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
}

.walt-menu-card li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.writing-subtab-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 14px;
}

.writing-subtab-card strong {
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.writing-subtab-card p,
.writing-subtab-card li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.writing-subtab-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 16px;
}

.writing-subtab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.writing-subtab-actions button {
  background: var(--gold);
  border: 0;
  border-radius: 7px;
  color: #111;
  font-size: 12px;
  font-weight: 600;
  min-height: 34px;
  padding: 8px 12px;
}

.writer-workspace.subtab-hidden {
  display: none;
}

.writer-editor-panel,
.writer-side-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.writer-editor-panel {
  /* overflow must stay visible: a non-visible overflow here silently traps the
     sticky toolbar/project bar (they'd stick to this box, which scrolls away,
     instead of the viewport). Wide-page horizontal scroll is handled inside
     .writer-page-surface, so this panel never needs its own scroll. */
  overflow: visible;
  min-width: 8.7in;
  position: relative;
}

.writer-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.writer-heading-actions button,
.writer-import-button {
  min-height: 36px;
}

.writer-start-strip {
  display: none;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}

.writer-start-strip article {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.writer-start-strip span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 550;
  text-transform: uppercase;
}

.writer-start-strip strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
}

.writer-start-strip p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.writer-import-button {
  align-items: center;
  background: #2a2f38;
  border-radius: 8px;
  color: var(--gold);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
}

.writer-import-button input {
  display: none;
}

.writer-project-bar {
  align-items: center;
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) repeat(4, 62px) auto auto;
  min-height: 44px;
  padding: 8px 12px;
  position: sticky;
  top: 0;
  z-index: 70;
}

.writer-project-bar span {
  color: var(--gold);
  display: block;
  font-size: 10px;
  font-weight: 550;
  text-transform: uppercase;
}

.writer-project-bar strong {
  color: var(--ink);
  display: block;
  font-size: 14px;
  font-weight: 550;
  margin-top: 3px;
}

.writer-menu-tab {
  background: transparent;
  border-radius: 6px;
  color: #b8c2bf;
  font-size: 12px;
  font-weight: 450;
  height: 32px;
  min-height: 32px;
  padding: 0;
}

.writer-menu-tab.active {
  background: #22313a;
  color: var(--ink);
}

.writer-menu-popover {
  background: #1f1f1f;
  border: 1px solid #3d3d3d;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  display: grid;
  left: var(--writer-menu-left, min(360px, 28vw));
  min-width: 220px;
  padding: 8px 0;
  position: fixed;
  top: var(--writer-menu-top, 112px);
  z-index: 90;
}

.writer-menu-popover button {
  background: transparent;
  border-radius: 0;
  color: #e8e8e8;
  font-size: 12px;
  font-weight: 450;
  justify-content: flex-start;
  min-height: 34px;
  padding: 0 18px;
  text-align: left;
}

.writer-menu-popover button:hover {
  background: #666;
  filter: none;
}

.writer-toggle {
  align-items: center;
  background: #333;
  border: 1px solid #454545;
  border-radius: 999px;
  color: #d0d0d0;
  cursor: pointer;
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  gap: 8px;
  margin-left: 8px;
  min-height: 30px;
  padding: 0 12px;
  white-space: nowrap;
}

.writer-toggle.active {
  background: rgba(134, 213, 193, 0.15);
  border-color: rgba(134, 213, 193, 0.45);
  color: var(--mint);
}

.screenplay-format-preset {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 10px;
  grid-template-columns: minmax(130px, 1fr) minmax(110px, 0.8fr) repeat(4, auto);
  padding: 10px 12px;
}

.screenplay-format-preset span {
  color: var(--gold);
  display: block;
  font-size: 10px;
  font-weight: 550;
  text-transform: uppercase;
}

.screenplay-format-preset strong {
  color: var(--ink);
  display: block;
  font-size: 12px;
  font-weight: 550;
  margin-top: 2px;
}

.screenplay-format-preset label {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.writer-menu-bar {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-height: 44px;
  padding: 8px 10px;
  position: sticky;
  top: 62px;
  z-index: 69;
}

.writer-menu-bar label {
  display: grid;
  flex: 0 0 176px;
  gap: 5px;
}

.writer-menu-bar .writer-load-screenplay-button {
  align-items: center;
  align-self: stretch;
  background: var(--gold);
  border: 1px solid rgba(255, 214, 120, 0.8);
  border-radius: 6px;
  color: #101010;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0;
  min-height: 36px;
  padding: 0 14px;
}

.writer-load-screenplay-button input {
  display: none;
}

.writer-menu-bar .writer-load-option {
  align-items: center;
  align-self: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 36px;
}

.writer-load-option input {
  accent-color: var(--gold);
}

.writer-menu-bar .writer-load-option span {
  color: #c9d0cc;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.writer-menu-bar label,
.writer-menu-bar span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
}

.writer-menu-bar select {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #d8dedb;
  font-size: 12px;
  min-height: 34px;
  padding: 0 8px;
}

.writer-format-button {
  background: transparent;
  border-radius: 0;
  color: #dcdcdc;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  font-weight: 700;
  min-height: 36px;
  padding: 0;
  width: 28px;
}

.writer-format-button.caps-demo {
  font-size: 11px;
  width: 48px;
}

.italic-demo {
  font-style: italic;
  font-weight: 500;
}

.underline-demo {
  text-decoration: underline;
}

.writer-title-page-button {
  background: #2a3039;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  min-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.writer-title-page-button:hover {
  background: rgba(240, 197, 107, 0.14);
  color: var(--gold);
}

.writer-tool-icon {
  align-items: center;
  border: 1px solid #6a6a6a;
  border-radius: 999px;
  color: #e0e0e0;
  display: inline-flex;
  font-size: 18px;
  height: 30px;
  justify-content: center;
  margin-bottom: 3px;
  width: 30px;
}

.writer-zoom {
  align-items: center;
  border-left: 1px solid #555;
  color: #f2f2f2;
  display: flex;
  font-size: 13px;
  gap: 8px;
  margin-left: auto;
  min-width: 120px;
  padding: 6px 12px;
}

.writer-zoom span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.writer-zoom select {
  background: #10141a;
  border: 1px solid #555;
  border-radius: 6px;
  color: #f2f2f2;
  min-height: 30px;
  padding: 0 8px;
  width: 74px;
}

.writer-active-strip {
  align-items: center;
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  grid-template-columns: auto 1fr;
  padding: 10px 12px;
}

.writer-active-strip span,
.writer-card span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 550;
  text-transform: uppercase;
}

.writer-active-strip strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
}

.writer-active-strip small {
  color: var(--muted);
  grid-column: 1 / -1;
}

#writerEditor {
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: #0a0a0a;
  flex: 0 0 auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  line-height: 1;
  min-height: 11in;
  overflow: hidden;
  padding: 1.25in 0.5in 1.35in 0.5in;
  position: relative;
  resize: none;
  width: 8.5in;
  z-index: 2;
}

.writer-rich-editor {
  background: transparent;
  color: #0a0a0a;
  display: block;
  flex: 0 0 auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  line-height: 1;
  min-height: 11in;
  outline: 0;
  padding: 1in 0;
  position: relative;
  user-select: text;
  -webkit-user-select: text;
  width: 8.5in;
  z-index: 3;
}

.writer-rich-editor + #writerEditor {
  display: none;
}

.writer-rich-line {
  border: 0;
  box-sizing: border-box;
  caret-color: #151515;
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 1em;
  min-height: 1em;
  outline: 0;
  position: relative;
  white-space: pre-wrap;
  word-break: normal;
  user-select: text;
  -webkit-user-select: text;
}

.writer-rich-line:focus {
  outline: 0;
}

.writer-rich-line b,
.writer-rich-line strong,
.writer-rich-line i,
.writer-rich-line em,
.writer-rich-line u {
  font-family: "Courier New", Courier, monospace;
}

.writer-rich-line b,
.writer-rich-line strong {
  font-weight: 700;
}

.writer-rich-line i,
.writer-rich-line em {
  font-style: italic;
}

.writer-rich-line u {
  text-decoration: underline;
}

.writer-rich-line[data-element="Act"] {
  margin-left: 1.5in;
  text-transform: uppercase;
  width: 6in;
}

.writer-rich-line[data-element="Scene Heading"] {
  background: rgba(40, 40, 40, 0.22);
  font-weight: 700;
  margin-left: 1.5in;
  padding: 0 0.05in;
  text-transform: uppercase;
  width: 6in;
}

.writer-rich-line[data-element="Scene Heading"]::before,
.writer-rich-line[data-element="Scene Heading"]::after {
  content: attr(data-scene-number);
  font-weight: 400;
  position: absolute;
  top: 0;
}

.writer-rich-line[data-element="Scene Heading"]::before {
  left: -0.72in;
}

.writer-rich-line[data-element="Scene Heading"]::after {
  right: -0.72in;
}

.writer-rich-line[data-element="Action"],
.writer-rich-line[data-element="Text"],
.writer-rich-line[data-element="Shot"] {
  margin-left: 1.5in;
  width: 6in;
}

.writer-rich-line[data-element="Character"] {
  margin-bottom: 0;
  margin-left: 3.7in;
  text-transform: uppercase;
  width: 2.3in;
}

.writer-rich-line[data-element="Parenthetical"] {
  margin-bottom: 0;
  margin-left: 3.1in;
  width: 2.5in;
}

.writer-rich-line[data-element="Dialogue"] {
  margin-left: 2.5in;
  width: 3.5in;
}

.writer-rich-line[data-element="Transition"] {
  margin-left: auto;
  margin-right: 1in;
  text-align: right;
  text-transform: uppercase;
  width: 2in;
}

.writer-page-surface {
  background: transparent;
  display: flex;
  justify-content: flex-start;
  max-height: none;
  min-height: 0;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  position: relative;
}

.writer-page-stack {
  flex: 0 0 auto;
  min-height: 11in;
  overflow: visible;
  position: relative;
  width: 8.5in;
  zoom: var(--writer-page-zoom, 1);
}

.writer-page-guides {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.writer-page-guide {
  background: #f5f1e9;
  border-radius: 4px;
  color: rgba(21, 21, 21, 0.72);
  font-family: "Courier New", Courier, monospace;
  font-size: 10pt;
  height: 11in;
  left: 0;
  position: absolute;
  top: calc(var(--page-index) * 11.25in);
  width: 8.5in;
}

.writer-page-guide::after {
  background: #5d5d5d;
  bottom: -0.25in;
  content: "";
  height: 0.25in;
  left: 0;
  position: absolute;
  width: 8.5in;
}

.writer-page-header,
.writer-page-footer {
  display: none;
  left: 0.5in;
  position: absolute;
  right: 0.5in;
}

.writer-page-guide:not(:first-child) .writer-page-header {
  align-items: start;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  top: 0.38in;
}

.writer-page-guide:not(:first-child) .writer-page-footer {
  display: block;
  bottom: 0.42in;
  text-align: right;
}

.writer-page-header span:nth-child(2) {
  text-align: center;
}

.writer-page-header span:nth-child(3) {
  text-align: right;
}

.writer-character-suggestions {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
}

.writer-character-suggestions span {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.writer-character-suggestions div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.writer-character-suggestions button {
  background: #0f151c;
  border: 1px solid rgba(240, 197, 107, 0.35);
  border-radius: 6px;
  color: var(--ink);
  font-size: 12px;
  min-height: 28px;
  padding: 5px 8px;
}

.writer-character-suggestions button:hover {
  background: rgba(240, 197, 107, 0.16);
  color: var(--gold);
}

.writer-status-bar {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 24px;
  min-height: 38px;
  padding: 0 12px;
  position: static;
  z-index: 8;
}

.writer-status-bar span:first-child {
  background: #e6e6e6;
  border-radius: 999px;
  color: #2a2a2a;
  min-width: 96px;
  padding: 8px 18px;
  text-align: center;
}

.screenplay-preview {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: none;
  gap: 12px;
  padding: 14px;
}

.writer-command-modal {
  align-items: center;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 80;
}

.writer-command-modal.hidden {
  display: none;
}

.writer-command-shell {
  background: #1f252c;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
  color: var(--ink);
  max-height: min(86vh, 820px);
  max-width: min(92vw, 1080px);
  overflow: auto;
  padding: 18px;
  position: relative;
  width: 760px;
}

.writer-command-shell.wide {
  width: 1160px;
}

.writer-command-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  right: 14px;
  top: 14px;
}

.writer-command-panel {
  display: grid;
  gap: 14px;
}

.writer-command-panel h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
  padding-right: 90px;
}

.writer-command-panel p,
.writer-command-panel li,
.writer-command-panel label,
.writer-command-panel span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.writer-command-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.writer-command-card {
  background: #141a21;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.writer-command-card strong {
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.writer-command-card input,
.writer-command-card select,
.writer-command-card textarea {
  background: #0e1319;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  min-height: 34px;
  padding: 8px 10px;
  width: 100%;
}

.writer-command-card textarea {
  min-height: 96px;
  resize: vertical;
}

.writer-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.writer-command-actions button,
.writer-command-primary {
  background: var(--gold);
  border: 0;
  border-radius: 7px;
  color: #111;
  font-size: 13px;
  font-weight: 600;
  min-height: 36px;
  padding: 9px 14px;
}

.writer-command-actions button.secondary {
  background: #2c343d;
  color: var(--ink);
}

.writer-history-list,
.writer-episode-list,
.writer-sides-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.writer-history-list li,
.writer-episode-list li,
.writer-sides-list li {
  background: #0e1319;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px;
}

.writer-pdf-modal {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 620px;
}

.writer-pdf-preview {
  background: #3a3a3a;
  border-radius: 6px 0 0 6px;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 620px;
  overflow: hidden;
}

.writer-pdf-toolbar {
  align-items: center;
  background: #474747;
  color: #f4f4f4;
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
}

.writer-pdf-toolbar input {
  background: #5a5a5a;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  max-width: 48px;
  min-height: 28px;
  padding: 4px 6px;
}

.writer-pdf-toolbar button {
  background: #575757;
  border: 0;
  border-radius: 4px;
  color: #fff;
  min-height: 28px;
  min-width: 30px;
}

.writer-pdf-page {
  align-self: start;
  background: #fff;
  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.45);
  color: #111;
  font-family: "Courier New", Courier, monospace;
  font-size: 8px;
  height: 528px;
  justify-self: center;
  margin: 28px 0;
  padding: 80px 62px 54px;
  position: relative;
  white-space: pre-wrap;
  width: 408px;
}

.writer-pdf-side {
  background: #353838;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0 6px 6px 0;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 18px;
}

.writer-pdf-side h3 {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.writer-pdf-side label {
  display: grid;
  gap: 8px;
}

.writer-pdf-side select,
.writer-pdf-side input[type="text"] {
  background: #fff;
  border: 0;
  color: #111;
  min-height: 34px;
  padding: 8px;
}

@media (max-width: 1100px) {
  .writer-pdf-modal,
  .writer-command-grid,
  .walt-blueprint-flow,
  .walt-station-grid,
  .walt-platform-grid,
  .walt-menu-grid {
    grid-template-columns: 1fr;
  }

  .walt-blueprint-step:not(:last-child)::after {
    border-left: 2px dotted rgba(240, 197, 107, 0.72);
    border-top: 0;
    bottom: -18px;
    height: 18px;
    left: 24px;
    right: auto;
    top: auto;
    width: 0;
  }
}

.screenplay-page {
  background: #f7f5f0;
  border-radius: 3px;
  color: #141414;
  display: grid;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 1.25;
  min-height: 520px;
  padding: 42px 38px;
}

.screenplay-preview-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  min-height: 15px;
}

.screenplay-preview-row.scene {
  background: #d2d2d2;
  border-radius: 2px;
}

.screenplay-preview-row.blank {
  min-height: 15px;
}

.scene-margin-number {
  color: #111;
  font-weight: 700;
  text-align: center;
}

.screenplay-preview-text {
  white-space: pre-wrap;
}

.screenplay-preview-row.scene .screenplay-preview-text,
.screenplay-preview-row.transition .screenplay-preview-text,
.screenplay-preview-row.character .screenplay-preview-text,
.screenplay-preview-row.shot .screenplay-preview-text {
  font-weight: 700;
  text-transform: uppercase;
}

.screenplay-preview-row.character .screenplay-preview-text {
  padding-left: 32%;
}

.screenplay-preview-row.parenthetical .screenplay-preview-text {
  padding-left: 26%;
}

.screenplay-preview-row.transition .screenplay-preview-text {
  text-align: right;
}

.screenplay-preview-row.shot .screenplay-preview-text {
  padding-left: 12%;
}

.screenplay-preview-row.action .screenplay-preview-text {
  padding-left: 0;
}

.writer-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.writer-card textarea {
  font-size: 12px;
  min-height: 180px;
}

.writer-card button {
  justify-self: start;
  min-height: 34px;
}

.writer-card p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.writer-needs-list {
  display: grid;
  gap: 8px;
}

.writer-need {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  font-size: 12px;
  gap: 4px;
  padding: 9px;
}

.writer-need strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 550;
}

.writer-need.found {
  border-color: rgba(134, 213, 193, 0.45);
}

.writer-need.missing {
  border-color: rgba(224, 99, 94, 0.5);
}

.writer-scene-list-card {
  max-height: 330px;
  overflow: auto;
}

.writer-master-scene-list {
  display: grid;
  gap: 6px;
}

.writer-scene-row {
  align-items: start;
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  font-size: 11px;
  gap: 7px;
  grid-template-columns: 26px 36px minmax(78px, 1fr) 48px minmax(90px, 1.25fr);
  padding: 8px;
}

.writer-scene-row.head {
  background: rgba(240, 197, 107, 0.1);
  color: var(--gold);
  font-weight: 550;
  position: sticky;
  top: 0;
  z-index: 1;
}

.writer-scene-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  padding: 10px;
}

.upload-action-button {
  align-items: center;
  background: var(--gold);
  border-radius: 8px;
  color: #16140f;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
}

.upload-action-button input {
  display: none;
}

.screenplay-update-panel {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 14px;
  padding: 14px;
}

.screenplay-update-panel span {
  color: var(--gold);
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.screenplay-update-panel p {
  color: var(--muted);
  line-height: 1.4;
  margin: 6px 0 0;
}

.screenplay-scene-status {
  align-items: center;
  background: #10141a;
  border: 1px solid rgba(134, 213, 193, 0.24);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 12px;
  padding: 10px 12px;
}

.screenplay-scene-status span {
  color: var(--muted);
  font-size: 10px;
  margin: 0 0 2px;
}

.screenplay-scene-status strong {
  color: var(--mint);
  display: block;
  font-size: 1.35rem;
  line-height: 1;
}

.screenplay-scene-status p {
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}

.screenplay-format-note {
  color: var(--dim);
  display: block;
  font-size: 0.78rem;
  font-weight: 430;
  line-height: 1.35;
  margin-top: 8px;
}

.screenplay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.danger-action {
  background: #d86147;
  color: var(--ink);
}

.dual-auth-panel {
  background: #231915;
  border: 1px solid rgba(216, 97, 71, 0.54);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px;
}

.dual-auth-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dual-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.dual-auth-panel p {
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.producer-permission-window {
  background: #14211d;
  border: 1px solid rgba(134, 213, 193, 0.46);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
}

.producer-permission-window p {
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.producer-permission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.approval-action {
  background: #627b58;
  color: var(--ink);
}

.scene-workspace {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 14px;
}

.scene-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.scene-heading-actions button {
  white-space: nowrap;
}

.scene-input {
  display: grid;
  gap: 12px;
}

.scene-input textarea {
  min-height: 180px;
}

.scene-actions {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.script-upload {
  background: #10141a;
  border: 1px dashed rgba(240, 197, 107, 0.42);
  border-radius: 8px;
  padding: 12px;
}

.script-upload input {
  margin-top: 8px;
  width: 100%;
}

.scene-readiness {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.scene-readiness div {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.scene-readiness span,
.scene-card span {
  color: var(--gold);
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.scene-readiness strong {
  display: block;
  font-size: 24px;
}

.scene-list {
  max-height: 680px;
  overflow: auto;
  padding-right: 4px;
}

.scene-projects {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  align-items: start;
}

.scene-folder-panel,
.scene-project-detail {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.scene-card {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: 7px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.scene-card.active {
  border-color: rgba(134, 213, 193, 0.52);
  box-shadow: inset 4px 0 0 var(--mint);
}

.scene-card span,
.scene-card strong,
.scene-card p {
  grid-column: 1;
}

.scene-card p {
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.scene-card .approval-button {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin-top: 2px;
}

.scene-card .scene-active-button {
  cursor: pointer;
}

.scene-detail-summary {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
  padding: 14px;
}

.scene-character-shelf {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.scene-character-shelf.empty p {
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.scene-character-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.scene-character-chip {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 48px minmax(0, 1fr);
  min-width: 0;
  padding: 8px;
}

.scene-character-chip img {
  aspect-ratio: 1;
  background: #050607;
  border-radius: 6px;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.scene-character-chip div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.scene-character-chip strong,
.scene-character-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-character-chip span {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.scene-packet-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.scene-packet-grid label,
.scene-notes,
.scene-render-farm,
.scene-clip-vault,
.scene-export-panel,
.scene-folder-status {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.scene-packet-grid input,
.scene-packet-grid button {
  margin-top: 8px;
  width: 100%;
}

.scene-packet-grid span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 8px;
}

.scene-notes textarea {
  min-height: 150px;
}

.scene-render-farm {
  display: grid;
  gap: 12px;
}

.render-route-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.render-route {
  background: #141a20;
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  gap: 3px;
  min-height: 66px;
  padding: 10px;
  text-align: left;
}

.render-route.active {
  border-color: rgba(134, 213, 193, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 4px 0 0 var(--mint);
}

.render-route span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.render-route strong {
  font-size: 13px;
  line-height: 1.2;
}

.scene-clip-vault,
.scene-export-panel {
  display: grid;
  gap: 12px;
}

.scene-clip-list {
  display: grid;
  gap: 10px;
}

.scene-clip {
  align-items: start;
  background: #141a20;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.scene-clip span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.scene-clip strong,
.scene-clip span,
.scene-clip p {
  grid-column: 1;
}

.scene-clip p,
.scene-export-panel p {
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.scene-output-standard {
  align-items: center;
  background: #10141a;
  border: 1px solid rgba(240, 197, 107, 0.34);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px 12px;
}

.scene-output-standard span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

.scene-output-standard strong {
  color: var(--paper);
  font-size: 0.95rem;
}

.scene-clip .approval-button {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.add-clip {
  background: #2a2f38;
  color: var(--gold);
}

.scene-export-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scene-export-target {
  background: #141a20;
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 48px;
  padding: 8px;
}

.scene-export-target.active {
  border-color: rgba(134, 213, 193, 0.55);
  box-shadow: inset 0 -4px 0 var(--mint);
}

.scene-folder-status {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr) auto;
}

.scene-folder-status span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.character-bible-intro {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  margin-bottom: 20px;
}

.character-bible-intro h4 {
  font-size: 26px;
  letter-spacing: 0;
  margin: 0 0 10px;
}

.character-bible-intro p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}

.character-gallery {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bible-browser {
  display: grid;
  gap: 18px;
}

.bible-controls {
  display: grid;
  gap: 14px;
}

.bible-actions {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.28fr) auto;
}

.add-folder-button {
  background: var(--mint);
  color: #10141a;
  white-space: nowrap;
}

.add-folder-form {
  align-items: end;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.45fr) auto;
  padding: 14px;
}

.add-folder-form p {
  color: var(--muted);
  font-size: 13px;
  grid-column: 1 / -1;
  line-height: 1.4;
  margin: 0;
}

.bible-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  background: #252b34;
  color: var(--muted);
  min-height: 36px;
}

.filter-chip.active {
  background: var(--gold);
  color: #16140f;
}

.filter-chip span {
  color: inherit;
  display: inline;
  font-size: 11px;
  margin-left: 5px;
  opacity: 0.75;
}

.bible-layout-grid {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 300px;
}

.bible-summary {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bible-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.character-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-rows: minmax(240px, 1fr) auto;
  overflow: hidden;
}

.character-card:hover {
  border-color: rgba(240, 197, 107, 0.55);
}

.folder-card {
  min-height: 240px;
}

.folder-card .folder-icon {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(134, 213, 193, 0.22), rgba(240, 197, 107, 0.16)),
    #141a20;
  color: var(--mint);
  display: flex;
  font-size: 58px;
  font-weight: 900;
  justify-content: center;
  min-height: 240px;
}

.folder-detail-icon {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(134, 213, 193, 0.2), rgba(216, 97, 71, 0.15)),
    #141a20;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--mint);
  display: flex;
  font-size: 52px;
  font-weight: 900;
  justify-content: center;
  min-height: 180px;
}

.character-card img {
  background: #eef1ef;
  display: block;
  height: 100%;
  max-height: 420px;
  min-height: 240px;
  object-fit: contain;
  padding: 10px;
  width: 100%;
}

.character-card div {
  border-top: 1px solid var(--line);
  padding: 13px 14px 15px;
}

.character-card span {
  color: var(--gold);
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 6px;
}

.character-card strong {
  display: block;
  font-size: 18px;
}

.character-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  margin: 5px 0 0;
}

.load-more {
  background: #2f83a3;
  color: var(--ink);
  margin-top: 16px;
  width: 100%;
}

.selected-asset {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
  position: sticky;
  top: 18px;
}

.selected-asset span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.selected-asset p {
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.selected-asset img {
  background: #eef1ef;
  border-radius: 8px;
  max-height: 340px;
  object-fit: contain;
  padding: 8px;
  width: 100%;
}

.checks,
.provider-row {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shot-grid {
  align-items: start;
  background:
    linear-gradient(90deg, rgba(240, 197, 107, 0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(240, 197, 107, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 22% 8%, rgba(240, 197, 107, 0.08), transparent 26%),
    #0d1117;
  background-size: 42px 42px, 42px 42px, auto, auto;
  border: 1px solid rgba(240, 197, 107, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  justify-content: stretch;
  padding: 18px;
}

.shot-grid[data-view="row"] {
  grid-auto-flow: row;
  grid-auto-columns: initial;
  grid-template-columns: minmax(0, 980px);
  justify-content: center;
  overflow: visible;
  padding-bottom: 22px;
  scroll-snap-type: none;
}

.shot-grid[data-view="row"] .storyboard-shot {
  scroll-snap-align: start;
}

.storyboard-shot-group {
  background: rgba(16, 22, 29, 0.94);
  border: 1px solid rgba(240, 197, 107, 0.28);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.storyboard-group-header {
  align-items: center;
  background: rgba(240, 197, 107, 0.08);
  border: 0;
  border-bottom: 1px solid rgba(240, 197, 107, 0.22);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  text-align: left;
  width: 100%;
}

.storyboard-group-header span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.storyboard-group-header strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.storyboard-group-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px;
}

.storyboard-shot-group.expanded .storyboard-group-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}

.storyboard-shot-group:not(.expanded) .storyboard-shot {
  transform-origin: center;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.storyboard-shot-group:not(.expanded) .storyboard-shot:hover {
  border-color: rgba(240, 197, 107, 0.75);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3);
  transform: scale(1.025);
  z-index: 2;
}

.storyboard-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.storyboard-route {
  align-items: center;
  background: #0f141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px;
}

.storyboard-route span {
  align-items: center;
  background: rgba(240, 197, 107, 0.08);
  border: 1px solid rgba(240, 197, 107, 0.24);
  border-radius: 7px;
  color: var(--ink);
  display: flex;
  font-size: 12px;
  font-weight: 550;
  justify-content: center;
  min-height: 28px;
  padding: 0 8px;
  position: relative;
  text-align: center;
}

.storyboard-route span:not(:last-child)::after {
  color: var(--gold);
  content: ">";
  position: absolute;
  right: -9px;
  z-index: 2;
}

.storyboard-view-toggle {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 4px;
  padding: 4px;
}

.storyboard-view-toggle button {
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  min-height: 32px;
  padding: 0 12px;
}

.storyboard-view-toggle button.active {
  background: var(--gold);
  color: #17130d;
}

.storyboard-breakdown {
  display: grid;
  gap: 8px;
}

.storyboard-breakdown-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

.storyboard-breakdown-heading span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
}

.storyboard-breakdown-heading strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.storyboard-breakdown-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.storyboard-breakdown-card {
  align-content: start;
  background: rgba(19, 27, 35, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 6px;
  min-height: 88px;
  padding: 10px;
  text-align: left;
}

.storyboard-breakdown-card.active,
.storyboard-breakdown-card:hover {
  border-color: rgba(240, 197, 107, 0.7);
  filter: none;
}

.storyboard-breakdown-card span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 650;
}

.storyboard-breakdown-card strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.storyboard-breakdown-card small,
.storyboard-breakdown-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.storyboard-breakdown-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
}

.prompt-menu-workspace {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.55fr);
  margin-top: 16px;
}

.prompt-menu-panel,
.prompt-packet-panel {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.mini-heading {
  align-items: end;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.mini-heading span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.mini-heading strong {
  font-size: 14px;
  font-weight: 600;
}

.prompt-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prompt-tab {
  background: #1b2129;
  border: 1px solid var(--line);
  color: var(--muted);
  min-height: 34px;
  padding: 0 11px;
}

.prompt-tab.active {
  background: #2f83a3;
  border-color: rgba(134, 213, 193, 0.52);
  color: var(--ink);
}

.approved-prompt-menu,
.selected-prompt-list {
  display: grid;
  gap: 10px;
}

.prompt-menu-item {
  align-items: start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 5px;
  min-height: 84px;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.prompt-menu-item.selected {
  border-color: rgba(134, 213, 193, 0.5);
  box-shadow: inset 4px 0 0 var(--mint);
}

.prompt-menu-item span,
.selected-prompt-chip span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.prompt-menu-item small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.empty-menu {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  margin: 0;
  padding: 14px;
}

.selected-prompt-chip {
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  padding: 10px;
}

.platform-tailor-panel {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.platform-toggle-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.platform-toggle {
  background: #10141a;
  border: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 8px;
  text-align: left;
}

.platform-toggle span {
  color: var(--gold);
  font-size: 10px;
  font-weight: 550;
  text-transform: uppercase;
}

.platform-toggle strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 550;
}

.platform-toggle.active {
  border-color: rgba(134, 213, 193, 0.55);
  box-shadow: inset 4px 0 0 var(--mint);
}

.platform-prompt-columns {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.platform-prompt-column {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.platform-prompt-column label {
  color: var(--gold);
  display: grid;
  font-size: 11px;
  font-weight: 550;
  gap: 7px;
  text-transform: uppercase;
}

.platform-prompt-column textarea {
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  min-height: 230px;
  resize: vertical;
  text-transform: none;
}

.remove-prompt {
  background: #2a2f38;
  color: var(--muted);
  min-height: 34px;
  padding: 0 10px;
}

#compiledPromptPacket {
  font-size: 12px;
  line-height: 1.45;
  min-height: 260px;
  resize: vertical;
}

.checks span,
.provider-row div,
.shot {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.shot span,
.script-lines span,
.provider-row span {
  color: var(--gold);
  display: block;
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 8px;
}

.shot p {
  color: var(--muted);
  line-height: 1.45;
  margin: 8px 0 0;
}

.storyboard-shot {
  background: #f7f4ec;
  border: 1px solid rgba(240, 197, 107, 0.32);
  border-radius: 8px;
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.storyboard-keyframe-strip {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
}

.storyboard-shot-group.expanded .storyboard-keyframe-strip {
  grid-template-columns: 1fr 1fr;
}

.shot-grid[data-view="grid"] .storyboard-keyframe-strip {
  grid-template-columns: 1fr;
}

.storyboard-keyframe {
  background: #f1eee7;
  display: grid;
  gap: 0;
  min-width: 0;
}

.storyboard-keyframe > span {
  background: rgba(0, 0, 0, 0.72);
  color: var(--gold);
  font-size: 10px;
  padding: 6px 8px;
  text-transform: uppercase;
}

.storyboard-shot-group:not(.expanded) .storyboard-keyframe:last-child {
  display: none;
}

.shot-grid[data-view="grid"] .storyboard-keyframe:last-child {
  display: none;
}

.storyboard-shot-group:not(.expanded) .storyboard-keyframe > span {
  display: none;
}

.storyboard-shot-frame {
  aspect-ratio: 16 / 9;
  background: #171b20;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  overflow: hidden;
  position: relative;
  touch-action: none;
}

.shot-grid[data-view="row"] .storyboard-shot-frame {
  min-height: 0;
}

.storyboard-shot-frame img {
  cursor: grab;
  height: 112%;
  left: -6%;
  object-fit: cover;
  position: absolute;
  top: -6%;
  transform: translate(var(--shot-x, 0px), var(--shot-y, 0px));
  user-select: none;
  width: 112%;
}

.storyboard-shot-frame img:active {
  cursor: grabbing;
}

.storyboard-empty-frame {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 45%),
    repeating-linear-gradient(-35deg, rgba(70, 70, 70, 0.06) 0 8px, rgba(255, 255, 255, 0.12) 8px 16px),
    #ebe5da;
  color: #777;
  display: grid;
  font-size: 0.72rem;
  height: 100%;
  justify-content: center;
  place-items: center;
  text-align: center;
}

.storyboard-empty-frame strong {
  color: #555;
  display: block;
  font-size: 0.72rem;
  font-weight: 650;
  margin: 0;
  text-transform: uppercase;
}

.storyboard-empty-frame small {
  color: #888;
  display: block;
  font-size: 0.62rem;
  margin-top: 2px;
}

.storyboard-shot-meta {
  display: grid;
  gap: 5px;
  padding: 9px;
}

.shot-grid[data-view="grid"] .storyboard-shot-meta label,
.shot-grid[data-view="grid"] .storyboard-shot-meta textarea,
.shot-grid[data-view="grid"] .storyboard-shot-meta input,
.shot-grid[data-view="grid"] .storyboard-shot-meta select,
.shot-grid[data-view="grid"] .storyboard-scene-link,
.shot-grid[data-view="grid"] .storyboard-render-status,
.shot-grid[data-view="grid"] .storyboard-route-note,
.shot-grid[data-view="grid"] .approval-button {
  display: none;
}

.storyboard-shot-group:not(.expanded) .storyboard-shot-meta strong {
  color: #303030;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.storyboard-shot-group:not(.expanded) .storyboard-shot-meta > span {
  color: #3f3f3f;
  font-size: 10px;
  font-weight: 650;
  margin-bottom: 0;
}

.storyboard-scene-link {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin: -4px 0 0;
}

.storyboard-shot-spec {
  color: #5d5d5d;
  font-size: 11px;
  line-height: 1.25;
  margin: -2px 0 0;
}

.storyboard-card-prompt {
  color: #454545;
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.36;
  margin: 0;
  min-height: 64px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.storyboard-render-status {
  color: var(--mint);
  font-size: 10px;
  line-height: 1.25;
  margin: -2px 0 0;
}

.storyboard-route-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  margin: -2px 0 0;
}

.storyboard-shot-meta label {
  color: var(--gold);
  display: grid;
  font-size: 11px;
  font-weight: 550;
  gap: 6px;
  text-transform: uppercase;
}

.storyboard-shot-meta textarea {
  min-height: 58px;
  resize: vertical;
  text-transform: none;
}

.storyboard-shot-selectors {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr;
}

.storyboard-shot-group.expanded .storyboard-shot-selectors {
  grid-template-columns: 1fr 1fr;
}

.storyboard-shot-meta input,
.storyboard-shot-meta select,
.storyboard-shot-meta textarea {
  font-size: 12px;
}

.storyboard-shot-controls {
  border: 1px solid #d9d9d9;
  border-radius: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.storyboard-shot-group:not(.expanded) .storyboard-shot-controls {
  border-radius: 0;
  border-width: 1px 0 0;
  margin: 2px -7px -7px;
}

.storyboard-shot-controls button {
  background: #f4f1e9;
  border-radius: 0;
  color: #252525;
  font-size: 10px;
  font-weight: 650;
  min-height: 34px;
  padding: 0 6px;
  text-transform: uppercase;
}

.storyboard-shot-group:not(.expanded) .storyboard-shot-controls button {
  font-size: 8px;
  min-height: 24px;
  padding: 0 3px;
}

.storyboard-shot-controls button:hover {
  background: var(--gold);
  filter: none;
}

.timeline {
  align-items: stretch;
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  height: 94px;
  overflow: hidden;
}

.timeline span {
  align-items: center;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  display: flex;
  font-weight: 900;
  justify-content: center;
}

.timeline span:nth-child(1) {
  background: #2f83a3;
}

.timeline span:nth-child(2) {
  background: #d86147;
}

.timeline span:nth-child(3) {
  background: #627b58;
}

.right-panel {
  border-left: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-auto-rows: max-content;
  padding: 24px 18px;
}

.queue,
.packet,
.creative-force-corner,
.mascot-card {
  background: rgba(25, 29, 36, 0.78);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.queue h3,
.packet h3,
.creative-force-corner h3,
.mascot-card h3 {
  font-size: 16px;
  margin-bottom: 12px;
}

.creative-force-corner {
  display: grid;
  gap: 12px;
}

.creative-force-stage {
  align-items: end;
  background:
    radial-gradient(circle at 50% 18%, rgba(240, 197, 107, 0.18), transparent 40%),
    rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(240, 197, 107, 0.22);
  border-radius: 8px;
  display: grid;
  min-height: 180px;
  overflow: hidden;
  padding: 10px;
}

.creative-force-stage img {
  display: block;
  margin: 0 auto;
  max-height: 190px;
  object-fit: contain;
  width: 100%;
}

.creative-force-corner p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.dino-personality-form {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 6px;
  padding-top: 12px;
}

.dino-personality-form label {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: #b8c1bd;
  display: flex;
  font-size: 11px;
  gap: 5px;
  min-height: 24px;
  padding: 3px 6px;
}

.personality-options {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.personality-group {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0;
  margin-top: 2px;
}

.dino-personality-form input[type="checkbox"] {
  accent-color: var(--gold);
  height: 12px;
  width: 12px;
}

.dino-personality-form button {
  color: #16140f;
  font-size: 12px;
  min-height: 34px;
  padding: 0 10px;
}

.personal-dino-prompt {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(240, 197, 107, 0.18);
  border-radius: 8px;
  color: #aeb8b4;
  font-size: 11px;
  line-height: 1.45;
  max-height: 104px;
  overflow: auto;
  padding: 9px;
}

.creative-force-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.creative-force-option {
  align-items: center;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  justify-items: center;
  min-height: 0;
  padding: 4px;
}

.creative-force-option img {
  display: block;
  height: 52px;
  object-fit: contain;
  width: 100%;
}

.creative-force-option.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(240, 197, 107, 0.32);
}

.creative-force-master-preview {
  background:
    radial-gradient(circle at 50% 20%, rgba(240, 197, 107, 0.16), transparent 44%),
    rgba(0, 0, 0, 0.26);
}

.creative-force-master-preview img {
  object-fit: contain;
}

.creator-avatar-card {
  gap: 14px;
}

.creator-avatar-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
}

.creator-avatar-preview {
  align-items: end;
  background:
    radial-gradient(circle at 50% 18%, rgba(240, 197, 107, 0.16), transparent 42%),
    rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(240, 197, 107, 0.2);
  border-radius: 8px;
  display: grid;
  min-height: 190px;
  overflow: hidden;
  padding: 10px;
}

.creator-avatar-preview img {
  display: block;
  margin: 0 auto;
  max-height: 185px;
  object-fit: contain;
  width: 100%;
}

.creator-avatar-controls {
  display: grid;
  gap: 12px;
}

.avatar-toggle {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.avatar-toggle label {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  color: #b8c1bd;
  display: flex;
  font-size: 12px;
  gap: 7px;
  min-height: 34px;
  padding: 5px 8px;
}

.mascot-card {
  display: grid;
  gap: 12px;
}

.mascot-card img {
  background: transparent;
  border-radius: 8px;
  display: block;
  max-height: 230px;
  object-fit: contain;
  padding: 0;
  width: 100%;
}

.mascot-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

.queue p,
.packet p {
  font-size: 13px;
  padding: 11px;
}

.queue span {
  background: var(--mint);
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin-right: 8px;
  width: 8px;
}

.studio {
  color: #c8d0cd;
  font-size: 13px;
  font-weight: 400;
}

.studio :where(p, label, input, select, textarea, button, span, strong) {
  font-weight: 400;
}

.studio :where(p, label, input, select, textarea) {
  color: #b9c3bf;
}

.studio :where(input, select, textarea) {
  font-size: 13px;
}

.studio :where(button) {
  font-size: 12px;
  font-weight: 500;
}

.studio :where(.panel h3, .right-panel h3, .topbar h2) {
  color: #d9dfdc;
  font-size: 16px;
  font-weight: 450;
}

.studio :where(.eyebrow, .mini-heading span, .screenplay-update-panel span, .scene-readiness span, .scene-card span, .asset-row-head, .readiness-card span, .production-card span, .upload-ledger span, .character-card span, .shot span, .script-lines span, .provider-row span, .render-route span, .scene-clip span, .scene-folder-status span, .scene-output-standard span) {
  color: #d9b967;
  font-size: 11px;
  font-weight: 450;
}

.studio :where(.mini-heading strong, .scene-card strong, .scene-clip strong, .production-card strong, .character-card strong, .prompt-card strong, .selected-prompt-chip strong, .packet strong, .queue strong) {
  color: #d3dbd7;
  font-size: 13px;
  font-weight: 450;
}

.studio .step {
  color: #aeb8b4;
  font-size: 16px;
  font-weight: 400;
  min-height: 38px;
}

.studio .step.active {
  color: #d7dedb;
  font-weight: 400;
}

.studio .approval-button {
  color: #ebe6d8;
  font-weight: 650;
}

.studio .icon-button {
  font-size: 16px;
}

.studio .upload-action-button {
  color: #16140f;
  font-weight: 600;
}

.studio .brief-helper,
.studio .screenplay-format-note {
  color: #9fa9a5;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.32;
}

.studio .brief-role-row.role-head span {
  font-size: 9px;
  font-weight: 400;
}

.studio .brief-role-row input {
  font-size: 11px;
  font-weight: 400;
  min-height: 30px;
  padding: 6px 8px;
}

.studio .character-bible-intro h4 {
  color: #d3dbd7;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.3;
  margin-bottom: 6px;
}

.studio .character-bible-intro p {
  color: #aeb8b4;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.42;
}

@media (max-width: 980px) {
  .login,
  .studio,
  .workspace,
  .brief-grid,
  .brief-roles-layout,
  .admin-setup-layout,
  .admin-form-grid,
  .upload-grid,
  .prompt-menu-workspace,
  .prompt-section-head,
  .screenplay-update-panel,
  .dual-auth-grid,
  .scene-workspace,
  .scene-projects,
  .scene-packet-grid,
  .render-route-grid,
  .scene-export-grid,
  .scene-folder-status,
  .theme-meta-grid,
  .theme-color-grid,
  .admin-check-grid,
  .character-bible-intro,
  .character-gallery,
  .bible-layout-grid,
  .bible-actions,
  .add-folder-form,
  .writer-workspace,
  .writer-start-strip,
  .screenplay-format-preset {
    grid-template-columns: 1fr;
  }

  .selected-asset {
    position: static;
  }

  .mascot-mark,
  .login-copy,
  .login-form {
    grid-column: 1;
  }

  .mascot-mark {
    grid-row: auto;
  }

  .rail {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lobby-card-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .right-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .checks,
  .shot-grid,
  .provider-row,
  .upload-ledger,
  .selected-prompt-chip,
  .platform-toggle-grid,
  .scene-actions,
  .asset-row {
    grid-template-columns: 1fr;
  }

  .scene-readiness {
    position: static;
  }
}

@media (max-width: 620px) {
  .login {
    gap: 22px;
    padding: 20px;
  }

  .walt-lobby {
    padding: 28px 18px;
  }

  .lobby-card-grid {
    grid-template-columns: 1fr;
  }

  .lobby-card {
    min-height: 150px;
  }

  .topbar {
    background-position: center 58%;
    min-height: 118px;
  }

  .status-strip {
    width: 100%;
  }

  .stage,
  .right-panel {
    padding: 14px;
  }

  .scene-heading-actions {
    justify-content: stretch;
    width: 100%;
  }

  .scene-heading-actions button {
    flex: 1 1 160px;
  }

  .panel {
    padding: 16px;
  }

  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-title-block {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .panel-heading-icon {
    height: 44px;
    width: 44px;
  }
}

/* ==========================================================================
   BS-001 PROJECTS — additive styles only.
   Reuses existing variables (--gold, --mint, --ink, --muted, --line, --panel,
   --panel-2, --shadow) and existing components (.panel, .pill, .eyebrow,
   button, label/input). No new fonts, colors, or frameworks. See CLAUDE.md.
   ========================================================================== */

/* Active-project chip in the topbar */
.project-chip {
  align-items: center;
  background: rgba(17, 20, 26, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 12px;
  left: 18px;
  padding: 6px 8px 6px 14px;
  position: absolute;
  top: 16px;
}
.project-chip-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.project-chip-switch {
  min-height: 30px;
  padding: 0 12px;
}

/* Projects panel: keep spacing consistent with existing panels */
.projects-panel {
  position: relative;
}

/* Toolbar (search / status / role) */
.proj-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 4px 0 18px;
}
.proj-inline {
  min-width: 180px;
}
.proj-inline input,
.proj-inline select {
  min-width: 180px;
}

/* Secondary / ghost button — matches the dark UI, uses existing variables */
.proj-btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 550;
}
.proj-btn-ghost:hover {
  color: var(--ink);
  filter: none;
}
.proj-btn-ghost:disabled {
  color: var(--dim);
  cursor: default;
  opacity: 0.7;
}

/* Sub-action rows and sub-headings */
.proj-subactions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 18px;
}
.proj-subhead {
  color: var(--ink);
  font-size: 15px;
  margin: 22px 0 10px;
}
.proj-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 14px;
}
.proj-note-warn {
  color: var(--coral);
}
.proj-tag {
  border: 1px solid rgba(240, 197, 107, 0.35);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
  margin-left: 6px;
  padding: 1px 7px;
}

/* Tables */
.proj-table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.proj-table {
  border-collapse: collapse;
  width: 100%;
}
.proj-table th {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 11px 14px;
  text-align: left;
  text-transform: uppercase;
}
.proj-table td {
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  padding: 12px 14px;
  vertical-align: middle;
}
.proj-table tbody tr:hover td {
  background: rgba(32, 38, 47, 0.5);
}
.proj-empty {
  color: var(--muted);
  text-align: center;
}
.proj-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.proj-row-actions button {
  font-size: 13px;
  min-height: 32px;
  padding: 0 12px;
}

/* Dashboard cards */
.proj-cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 4px;
}
.proj-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 18px;
  text-align: left;
}
.proj-card:hover {
  border-color: rgba(240, 197, 107, 0.45);
  filter: none;
}
.proj-card strong {
  font-size: 15px;
}
.proj-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 430;
}

/* Meta strip (dashboard / detail headers) */
.proj-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 0 0 20px;
}
.proj-meta-strip > div {
  align-items: flex-start;
  display: grid;
  gap: 5px;
}
.proj-meta-label {
  color: var(--dim);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Read-only + form field grids */
.proj-readfields {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.proj-readfield p {
  color: var(--ink);
  margin: 6px 0 0;
  white-space: pre-wrap;
}
.proj-form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.proj-form-grid .proj-span2 {
  grid-column: 1 / -1;
}
.proj-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* Shared assets grid */
.proj-asset-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.proj-asset-cat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}
.proj-asset-cat-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.proj-asset-cat ul {
  color: var(--ink);
  font-size: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.proj-asset-cat li {
  border-top: 1px solid rgba(52, 59, 69, 0.5);
  padding: 6px 0;
}
.proj-asset-cat li:first-child {
  border-top: 0;
}
.proj-more {
  color: var(--muted);
}

/* Screenplay text preview */
.proj-script-preview {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 4px 0 8px;
  padding: 14px 16px;
}
.proj-script-preview pre {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  margin: 8px 0 0;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
}
.proj-generate-sie {
  margin-left: auto;
}

/* Production status stats */
.proj-stat-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.proj-stat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 16px 18px;
}
.proj-stat strong {
  color: var(--gold);
  font-size: 26px;
}
.proj-stat span {
  color: var(--muted);
  font-size: 12px;
}

/* Modal layer */
.projects-modal-layer {
  inset: 0;
  position: fixed;
  z-index: 60;
}
.proj-modal-backdrop {
  background: rgba(8, 10, 12, 0.62);
  inset: 0;
  position: absolute;
}
.proj-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  left: 50%;
  max-height: 86vh;
  max-width: 640px;
  overflow: auto;
  padding: 24px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 48px);
}
.proj-modal h3 {
  margin: 0 0 14px;
}
.proj-modal-error {
  color: var(--coral);
  font-size: 13px;
  margin: 0 0 12px;
}

@media (max-width: 720px) {
  .proj-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .proj-form-grid .proj-span2 {
    grid-column: 1;
  }
}

/* ==========================================================================
   W › Script cleanup — editor-only writing surface.
   The production-prep side panel was removed (SIE / Build 003 owns production
   data, not the writer), so the workspace is now a single full-width column.
   Additive override only; reuses the existing writer layout. See CLAUDE.md.
   ========================================================================== */
.writer-workspace {
  grid-template-columns: minmax(0, 1fr);
}

/* How WALT Works — closing statement below the flow chart (additive) */
.walt-blueprint-closing {
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 0;
  padding-top: 18px;
  text-align: center;
}

/* ==========================================================================
   WALT ROLLOVER FEATURE — house style ("ADD ROLL OVER FEATURE" = this exact
   treatment). Paint-free by design on WALT's dark UI: transform lift is
   GPU-composited (no reflow); the gold border brighten IS the glow (a dark
   drop-shadow is invisible on the near-black background, so it is omitted —
   that was the only per-frame paint). The numbered/index badge fills gold so
   the eye lands on the marker. Reduced-motion guard drops the lift. Additive;
   existing variables only. Apply per component by pointing these selectors at
   the component's box and its badge. See CLAUDE.md "Rollover feature (style lock)".
   ========================================================================== */
.walt-blueprint-step {
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.walt-blueprint-step span {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.walt-blueprint-step:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 197, 107, 0.7);
}
.walt-blueprint-step:hover span {
  background: var(--gold);
  border-color: var(--gold);
  color: #16140f;
}
@media (prefers-reduced-motion: reduce) {
  .walt-blueprint-step {
    transition: border-color 0.18s ease;
  }
  .walt-blueprint-step:hover {
    transform: none;
  }
}

/* How WALT Works flow chart — hide the dangling connector on the last box of
   each 4-column row (boxes 3 and 7) so no dotted dash points off-frame into the
   next row. The single-column responsive view (<=1100px) restores the vertical
   connector so the trail stays continuous there. Additive. */
.walt-blueprint-step:nth-child(4n)::after {
  content: none;
}

/* How WALT Works — the Start/Projects badge shows a check mark instead of text;
   size it to fill the circle like the numbered badges. Additive. */
.walt-blueprint-step:first-child span {
  font-size: 16px;
}

/* Keep headers in line across a row. The boxes are a grid whose rows default to
   stretch, so unequal body-text lengths shifted each box's badge/header down by a
   different amount. Packing content to the top (align-content: start) fixes the
   header alignment and keeps the title-to-body spacing tight (just the grid gap). */
.walt-blueprint-step {
  align-content: start;
}
.walt-blueprint-step strong {
  line-height: 1.3;
}
@media (max-width: 1100px) {
  .walt-blueprint-step:nth-child(4n)::after {
    content: "";
  }
}

/* Compact the flow boxes — shorter, tighter grid. Drop the forced min-height and
   trim padding, inner gap, and body line-height so boxes hug their content. */
.walt-blueprint-step {
  min-height: 0;
  padding: 10px 12px;
  gap: 5px;
}
.walt-blueprint-step p {
  line-height: 1.3;
}

/* How WALT Works is the public landing page: hide the workspace-only chrome
   (active-project chip and autosave indicator) that floats over the header, and
   the "WALT Production Console" status strip. The page opens straight into the
   How WALT Works content. Untouched on every other view. */
.workspace.walt-landing .project-chip,
.workspace.walt-landing .autosave-indicator,
.workspace.walt-landing .production-status-strip {
  display: none;
}

/* Keep the "How WALT Works" nav label on one line without changing the nav's
   look: same font, just a little more room (trim the right padding) + no wrap. */
.welcome-step-group .step {
  padding-right: 4px;
  white-space: nowrap;
}

/* Colour the "How WALT Works" heading eyebrow (above the flow boxes) the same
   gold as the nav group headers — it was rendering muted via
   .writing-subtab-heading. The nav label stays the default nav colour. */
.writing-subtab-heading .eyebrow {
  color: var(--gold);
}

/* Steamboat Willie in the How WALT Works heading square (transparent PNG).
   Square is 20% larger than the default 54px heading icon. */
.writing-subtab-heading .panel-heading-icon {
  background-image: url("assets/brand/steamboat-willie.png?v=1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  grid-row: auto;
  height: 100px;
  width: 100px;
}

/* Match the heading grid to the larger square (so it isn't overflowing its
   column) and nudge the three lines of type right with a wider gap. The base
   align-items:center keeps the square vertically centered on the three lines. */
.writing-subtab-heading {
  align-items: center;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 22px;
}

/* Walt Disney tribute on the right of the heading: ghosted 100px portrait
   (same size AND level as the Steamboat Willie square), dedication to its left.
   The figure is a 100px-tall row, so align-items:center on the heading lines the
   portrait up exactly with the Willie square. */
.walt-tribute {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  justify-self: end;
  margin: 0;
}
.walt-tribute img {
  border-radius: 8px;
  flex: 0 0 100px;
  height: 100px;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 0.18s ease;
  width: 100px;
}
/* Roll over Walt's photo: the ghost comes fully to life (50% -> 100%). */
.walt-tribute img:hover {
  opacity: 1;
}
.walt-tribute figcaption {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  max-width: 140px;
  opacity: 0.8;
  text-align: right;
}

/* Dedicated hard-coded landing header (replaces the Style-Bible production banner
   on this page only). Full-bleed cover crop at a fixed height — tune min-height /
   background-position to taste. */
.workspace.walt-landing .topbar {
  background: #0d1117 url("assets/brand/how-walt-works-header.webp?v=1") center center / cover no-repeat;
  min-height: 250px;
}

/* ==========================================================================
   BS-002 §1 SMART AUTO-FILL — caret-anchored inline suggestion list.
   Additive; reuses existing WALT variables. See writer-nimble.js / CLAUDE.md.
   ========================================================================== */
.writer-autofill {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  min-width: 170px;
  overflow-y: auto;
  padding: 4px;
  position: fixed;
  z-index: 80;
}
.writer-autofill-item {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 450;
  min-height: 30px;
  padding: 5px 10px;
  text-align: left;
  white-space: nowrap;
}
.writer-autofill-item.active,
.writer-autofill-item:hover {
  background: rgba(240, 197, 107, 0.16);
  color: var(--gold);
  filter: none;
}
/* BS-002 §1 supersedes the old fixed character-suggestion panel. */
#writerCharacterSuggestions {
  display: none !important;
}

/* BS-002 §3 — paginated screenplay preview (same paginator as the editor).
   Renders the full document as pages with industry (MORE)/(CONT'D). Appends to
   the existing .screenplay-preview-row system; reuses its columns + Courier. */
#screenplayPreview .screenplay-page {
  margin-bottom: 18px;
  position: relative;
}
#screenplayPreview .screenplay-page + .screenplay-page {
  margin-top: 0;
}
.sp-page-num {
  color: #6b6b6b;
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  position: absolute;
  right: 38px;
  top: 16px;
}
.screenplay-preview-row.dialogue .screenplay-preview-text {
  padding-left: 18%;
  padding-right: 18%;
}
.screenplay-preview-row.more .screenplay-preview-text,
.screenplay-preview-row.contd .screenplay-preview-text {
  font-weight: 700;
  padding-left: 32%;
  text-transform: uppercase;
}
.screenplay-preview-row.more .screenplay-preview-text {
  color: #555;
}

/* BS-002 §4 — near-miss transition check (quiet spellchecker underline + chip).
   Uses existing vars only; no new fonts/colors. */
.writer-nearmiss {
  text-decoration: underline dotted var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.writer-fixit {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  padding: 4px 8px;
  position: absolute;
  z-index: 60;
}
.writer-fixit-label { color: var(--muted); }
.writer-fixit-apply {
  background: var(--gold);
  border: none;
  border-radius: 4px;
  color: #16140f;
  cursor: pointer;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  padding: 3px 8px;
}

/* BS-002 §5 — Draft history panel (reuses command-panel + existing vars). */
.writer-draft-save {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.writer-draft-save input {
  flex: 1;
}
.writer-draft-list {
  display: grid;
  gap: 8px;
}
.writer-draft-row {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}
.writer-draft-meta { display: grid; gap: 2px; min-width: 0; }
.writer-draft-meta span { color: var(--muted); font-size: 12px; }
.writer-draft-row-actions { display: flex; gap: 6px; }
.writer-draft-readonly {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  grid-column: 1 / -1;
  margin: 4px 0 0;
  max-height: 320px;
  overflow: auto;
  padding: 10px 12px;
  white-space: pre-wrap;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
}
.writer-draft-empty { color: var(--muted); }

/* BS-002 §6 — distraction-free mode. CSS-only; never moves the editor. */
/* Focus toggle: a normal button in the writer toolbar by default; only becomes a
   floating top-right button while in focus mode (the toolbar is hidden then). */
.writer-focus-toggle {
  font-size: 12px;
  padding: 6px 12px;
}
.writer-focus-toggle.writer-focus-floating {
  position: fixed;
  right: 16px;
  top: 14px;
  z-index: 90;
}
body.walt-focus .rail,
body.walt-focus .topbar,
body.walt-focus .autosave-indicator,
body.walt-focus .production-status-strip,
body.walt-focus [data-panel="writing"] > .writer-panel-heading,
body.walt-focus [data-panel="writing"] > .writer-library,
body.walt-focus .writer-editor-panel > *:not(.writer-page-surface) {
  display: none !important;
}
/* Collapse the whole container chain so the page centers in the full viewport
   (the studio is a grid with a rail column — force it to a single flow). */
body.walt-focus .studio {
  display: block !important;
}
body.walt-focus .workspace,
body.walt-focus .stage,
body.walt-focus [data-panel="writing"],
body.walt-focus .writer-workspace,
body.walt-focus .writer-editor-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  width: 100% !important;
}
body.walt-focus .writer-page-surface {
  margin: 0 auto;
  max-height: none;
  max-width: 8.5in;
  padding: 40px 16px 72px;
}

/* Customizable Headers & Footers — page footer becomes a 3-column band (matches
   the header); config editor panel. Appends to the existing guide styles. */
.writer-page-guide:not(:first-child) .writer-page-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.writer-hf-editor { display: grid; gap: 14px; }
.writer-hf-band {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 12px;
}
.writer-hf-slot {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 68px 1.1fr 0.9fr 1.4fr;
}
.writer-hf-pos { color: var(--muted); font-size: 12px; }
.writer-hf-preview {
  background: #f2efe6;
  border-radius: 4px;
  color: #141414;
  display: grid;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 4px;
  padding: 8px 12px;
}

/* Title Page panel (structured identity + one header/footer toggle). */
.writer-tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.writer-tp-field { display: grid; gap: 4px; }
.writer-tp-toggle { align-items: center; display: flex; gap: 8px; margin-top: 12px; }
.writer-tp-previewwrap { margin-top: 12px; }
.writer-tp-previewlabel { color: var(--muted); font-size: 12px; }
.writer-tp-preview {
  background: #f2efe6;
  border-radius: 4px;
  color: #141414;
  display: grid;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 4px;
  padding: 8px 12px;
}
.writer-tp-off { color: #777; grid-column: 1 / -1; }

/* BS-002 §7 — Export & Print panel (existing vars/patterns only). */
.writer-exp-check { align-items: center; display: flex; gap: 8px; margin-top: 8px; }
.writer-exp-wm { display: grid; gap: 6px; margin-top: 12px; }
.writer-exp-wm span { color: var(--muted); font-size: 12px; }

/* Title cover page in the preview (mirrors the PDF cover layout). */
#screenplayPreview .cover-page { position: relative; }
.cover-page .tp-cover { position: relative; min-height: 560px; }
.cover-page .tp-cover-main { position: absolute; top: 33%; left: 0; right: 0; text-align: center; }
.cover-page .tp-cover-episode { margin-top: 6px; }
.cover-page .tp-cover-author { margin-top: 26px; }
.cover-page .tp-cover-basedon { position: absolute; top: 52%; left: 12%; right: 12%; text-align: center; }
.cover-page .tp-cover-bottom { position: absolute; bottom: 6px; left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; }

/* Editor is a flex column so page-break margins on blocks do NOT collapse — the
   paginator pushes page-start blocks with margin-top instead of inserting spacer
   nodes (which would corrupt undo / backspace in the contentEditable). */
.writer-rich-editor {
  display: flex;
  flex-direction: column;
}

/* Title COVER page rendered in the editor's page layer as page 0 (unnumbered),
   matching the industry/Celtx title page — script starts on the next page. */
.writer-cover-in-guide {
  color: #0a0a0a;
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  inset: 0;
  position: absolute;
}
.cover-guide .tp-cover { height: 100%; position: relative; }
.cover-guide .tp-cover-main { left: 0; position: absolute; right: 0; text-align: center; top: 33%; }
.cover-guide .tp-cover-episode { margin-top: 0.4em; }
.cover-guide .tp-cover-author { margin-top: 2em; }
.cover-guide .tp-cover-basedon { left: 12%; position: absolute; right: 12%; text-align: center; top: 52%; }
.cover-guide .tp-cover-bottom { bottom: 0.5in; display: grid; grid-template-columns: 1fr 1fr; left: 0.5in; position: absolute; right: 0.5in; }

/* ============================================================================
   Edit menu + Find & Replace + Character Clean-Up (writer-edit.js)
   Appended, reusing the existing dark popover/panel palette and variables.
   ========================================================================== */

/* Edit pulldown items: label left, shortcut right (matches .writer-menu-popover) */
.writer-edit-menu button.wm-item {
  align-items: center;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  width: 100%;
}
.writer-edit-menu .wm-label { white-space: nowrap; }
.writer-edit-menu .wm-key {
  color: #9a9a9a;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.writer-edit-menu button.wm-item:hover .wm-key { color: #e8e8e8; }
.writer-edit-menu .wm-sep {
  border-top: 1px solid #3d3d3d;
  margin: 6px 0;
}

/* Find & Replace — non-modal bar pinned near the top of the writer */
.writer-find-bar {
  background: #1f1f1f;
  border: 1px solid #3d3d3d;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  display: grid;
  gap: 8px;
  left: 50%;
  padding: 12px 14px;
  position: fixed;
  top: 92px;
  transform: translateX(-50%);
  width: min(680px, 92vw);
  z-index: 95;
}
.writer-find-bar.hidden { display: none; }
.writer-find-bar .wfr-row {
  align-items: center;
  display: flex;
  gap: 8px;
}
.writer-find-bar input[type="text"] {
  background: #121212;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  color: #f0f0f0;
  flex: 1;
  font-size: 13px;
  min-height: 32px;
  padding: 0 10px;
}
.writer-find-bar input[type="text"]:focus {
  border-color: var(--gold);
  outline: none;
}
.writer-find-bar button {
  background: #2b2b2b;
  border: 1px solid #3d3d3d;
  border-radius: 6px;
  color: #e8e8e8;
  font-size: 12px;
  min-height: 32px;
  padding: 0 12px;
}
.writer-find-bar button:hover { background: #3a3a3a; }
.writer-find-bar .wfr-count {
  color: #9a9a9a;
  font-size: 12px;
  min-width: 54px;
  text-align: right;
}
.writer-find-bar .wfr-opt {
  align-items: center;
  color: #cfcfcf;
  display: flex;
  font-size: 12px;
  gap: 5px;
  white-space: nowrap;
}

/* Character Clean-Up — clusters of near-duplicate names inside the command card */
.wcu-list { display: grid; gap: 12px; margin-top: 6px; }
.wcu-cluster {
  background: var(--panel-2, #17181c);
  border: 1px solid var(--line, #2a2c31);
  border-radius: 10px;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
}
.wcu-flag {
  color: var(--coral, #e98b7a);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wcu-name {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
}
.wcu-name .wcu-nm { font-weight: 600; letter-spacing: 0.03em; }
.wcu-name .wcu-ct { color: var(--muted, #8a8d93); font-size: 12px; }
.wcu-merge {
  align-self: start;
  margin-top: 4px;
}
.wcu-clean { color: var(--mint, #7fd6a6); font-weight: 600; }
.wcu-singles { margin-top: 4px; }
.wcu-singles summary { color: var(--muted, #8a8d93); cursor: pointer; font-size: 13px; }
.wcu-single-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
}
.wcu-single-list span {
  color: #cfcfcf;
  font-size: 12px;
  letter-spacing: 0.03em;
}

/* Projects Home heading actions (New Project + Reset Workspace) */
.proj-heading-actions { align-items: center; display: flex; gap: 8px; }

/* ============================================================================
   Writing view: put the writer UP near the top of the page.
   The tall production banner + console strip are studio-wide "fluff" that pushed
   the editor far down — slim the banner to a thin brand band and drop the status
   pills while writing, so W sits high like a real screenplay editor.
   ========================================================================== */
/* The production banner lives ONLY on How WALT Works — removed on every other
   view so module content (the writer especially) sits high on the page. */
#studioView:not([data-active-step="blueprint"]) .topbar {
  background: none;
  border-bottom: 0;
  min-height: 0;
}
/* In the writer, also drop the production status strip (fluff while writing). */
#studioView[data-active-step="writing"] .production-status-strip { display: none; }
/* ...but the active-project chip is position:absolute (top:16), so a zero-height
   top bar leaves it floating ON TOP of the writer library below it. Reserve a
   slim band on the writer view so the chip sits in its own space and the library
   flows underneath it — no overlap. Keep the chip on one line. */
#studioView[data-active-step="writing"] .topbar { min-height: 56px; }
#studioView[data-active-step="writing"] .project-chip { white-space: nowrap; }
#studioView[data-active-step="writing"] .stage { padding: 10px 24px 24px; }

/* Projects views already show the full project list + Switch Project buttons, so
   the floating "current project" chip is redundant here — and with the top bar
   collapsed it floats ON TOP of the "WALT Production Console" title. Nix it on
   Projects so the title sits cleanly on top. (Kept in the modules like W, where
   "which project am I in?" actually matters — W is untouched.) */
#studioView[data-active-step="projects"] .project-chip { display: none; }

/* Screenplay/Episode rows open on click anywhere in the row (not just the Open
   button) — the Delete button keeps its own action, so it won't trigger an open. */
.proj-table tr.proj-row-clickable { cursor: pointer; }
.proj-table tr.proj-row-clickable:hover { background: rgba(240, 197, 107, 0.07); }

/* Dual dialogue: the RIGHT-column speech's character cue shows a small badge in
   the editor (speeches stay linear here; they render side-by-side on export). */
.writer-rich-line[data-element="Character"][data-dual="right"]::after {
  color: var(--gold);
  content: " ◫ dual";
  font-size: 9px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* ============================================================================
   Tighter writing chrome — reclaim the top of the page.
   • Remove the redundant "Script / <title>" bar right above the toolbar.
   • Halve the height of everything above the writing window (library + toolbar).
   (Append-only overrides; these .writer-* classes exist only in the writer.)
   ========================================================================== */
.writer-project-bar { display: none; }
.writer-library { min-height: 66px; margin-bottom: 6px; }
.writer-library-profile { padding: 8px 12px; }
.writer-project-list { max-height: 78px; padding: 4px; }
.writer-document-list { gap: 6px; }
.writer-document-card { min-height: 34px; padding: 6px 12px; gap: 12px; }
.writer-library-toolbar { gap: 8px; }
.writer-menu-bar { min-height: 30px; padding: 5px 10px; gap: 6px 12px; }
.writer-workspace { gap: 6px; }

/* Shrink the document card + toolbar controls so library + toolbar are ~half-height. */
.writer-document-icon { height: 30px; width: 30px; font-size: 13px; }
.writer-document-card { min-height: 30px; padding: 5px 10px; }
.writer-document-card strong { font-size: 13px; }
.writer-document-card p { font-size: 11px; }
.writer-library-profile { padding: 6px 10px; }
.writer-menu-bar select { min-height: 28px; }
.writer-title-page-button { min-height: 28px; }
.writer-format-button { min-height: 28px; width: 26px; font-size: 17px; }
.writer-zoom select { min-height: 28px; }

/* Fix the sticky toolbar's orphaned banner offset (top:62px left a dead gap above
   Load Screenplay now that the banner is gone) — stick to the very top instead. */
.writer-menu-bar { top: 0; }
/* Load Screenplay was stretching to the full (wrapped) toolbar height — un-stretch
   it to a normal button, and tighten the checkbox options to match. */
.writer-menu-bar .writer-load-screenplay-button { align-self: center; min-height: 28px; padding: 0 12px; }
.writer-menu-bar .writer-load-option { min-height: 28px; }

/* ============================================================================
   WALT BUTTON SYSTEM — one shape & size across every page (uniform throughout).
     Standard : 34px tall · 8px radius · 13px / 600 · 0 14px padding.
     Primary  : gold fill (main action).   Secondary : ghost (border + dark fill).
     Icon     : 34px square (B/I/U/CAPS).  Nav / cards / pills are separate.
   Appended last so it normalizes every earlier button rule.
   ========================================================================== */
button,
.upload-action-button,
.writer-import-button,
.writer-menu-bar .writer-load-screenplay-button,
.proj-btn-ghost,
.writer-title-page-button,
.writer-edit-menu-button {
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  min-height: 34px;
  height: auto;
  padding: 0 14px;
  letter-spacing: 0;
}

/* Secondary / ghost — dark fill + hairline border, light text. */
.proj-btn-ghost,
.writer-title-page-button,
.writer-edit-menu-button,
.writer-command-actions button.secondary {
  background: #202730;
  border: 1px solid var(--line);
  color: #e8e8e8;
}
.proj-btn-ghost:hover,
.writer-title-page-button:hover,
.writer-edit-menu-button:hover,
.writer-command-actions button.secondary:hover {
  background: #2b323c;
}

/* Icon toggles (B I U CAPS) — square, same height, 8px radius. */
.writer-format-button {
  border-radius: 8px;
  min-height: 34px;
  min-width: 34px;
  width: auto;
  padding: 0 10px;
  font-size: 15px;
}

/* Round icon buttons keep their circle but match the standard height. */
.icon-button { height: 34px; width: 34px; font-size: 18px; }

/* Admin save/lock buttons were 36/44px — fold them into the 34px system
   (nowrap so the long "Lock Production Setup" label never grows the height). */
.admin-save-actions button { min-height: 34px; white-space: nowrap; }

/* Sweep fixes — bring the last two real action-button outliers into the system. */
/* Sync's bare "Run Sync Check" heading button — 34px, centered, never wraps tall. */
.panel-heading > button { align-self: center; min-height: 34px; white-space: nowrap; }
/* Storyboard shot-control tags keep their compact film-strip look but lose the lone
   sharp 0px corners — round to 8px so nothing in the app has square corners. */
.storyboard-shot-controls button { border-radius: 8px; }

/* ============================================================================
   Lock the nav rail to the viewport — FIXED, not sticky, so it never scrolls away
   (immune to page-scroll jumps and sticky-context quirks). The studio keeps its
   250px column reserved, and the workspace stays in column 2.
   ========================================================================== */
/* Keep the sticky rail in flow (it stays pinned at top:0 during scroll and keeps the
   studio grid intact); just let it scroll internally if the nav is taller than the
   viewport. The real cause of "the nav scrolls away" was a caret-driven page jump on
   formatting — fixed in app.js by preserving scroll across format ops. */
.rail { overflow-y: auto; }

/* ============================================================================
   CRITICAL: the writing panel grows to the FULL height of the script (many pages).
   backdrop-filter forces GPU compositing, and once the panel passes the GPU max
   texture size (~8192px, ~7 script pages) Chrome renders everything beyond it BLACK
   — the notorious "only the first page shows" bug. Disable the blur on the writing
   panel so tall scripts paint fully. (Its background is ~opaque, so no visible change.)
   ========================================================================== */
.panel[data-panel="writing"] {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* CRITICAL (part 2): background-attachment:fixed forces the workspace into a single
   composited layer as TALL as the whole script — the same >8192px texture overflow
   that renders tall pages black (and likely what breaks the sticky nav). Let the
   background scroll normally so the layer stays viewport-sized. */
.workspace { background-attachment: scroll; }

/* ============================================================================
   SCROLL MODEL — ONE desktop layout, no breakpoints, no competing strategies.
   Supersedes every earlier attempt (position:fixed → sticky → app-shell
   overflow:hidden → narrow-safety). Those layered three different scroll models
   on top of each other; whichever won depended on window width, which is exactly
   why the nav "wouldn't stay put" and only one page showed on refresh.

   WALT is a wide-screen studio OS — NOT built for phones/tablets/small screens —
   so there is exactly ONE layout:
     • the nav rail is position:fixed, so it is out of flow and physically cannot
       move, at any width;
     • the page scrolls the ordinary way — no overflow:hidden box to clip a tall
       script, and no forced full-height composite layer to overflow the GPU
       texture limit and render black.
   ========================================================================== */
.studio {
  display: block;         /* rail is fixed (out of flow); no grid column needed */
  height: auto;
  min-height: 100vh;
  overflow: visible;
}
.rail {
  position: fixed;        /* nailed to the viewport — never scrolls away */
  left: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  overflow-y: auto;       /* scroll the nav internally only if it is very tall */
  z-index: 30;
}
.workspace {
  margin-left: 250px;     /* clear the fixed rail */
  height: auto;
  min-height: 100vh;
  overflow: visible;      /* the document scrolls normally; nothing is clipped */
}

/* ============================================================================
   EDITABLE TITLE PAGE (window.WALTTitlePage) — an interactive cover laid on top
   of page 0 so the writer can type the title/author/etc. right on the sheet.
   Geometry mirrors .cover-guide .tp-cover* exactly; it sits above the editor
   (z-index 3) so its lines take the caret. The cream sheet itself is the page
   guide behind it, so this layer is transparent.
   ========================================================================== */
.writer-cover-edit {
  color: #0a0a0a;
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  height: 11in;
  left: 0;
  position: absolute;
  top: 0;
  width: 8.5in;
  z-index: 4;
}
.writer-cover-edit .tp-cover { height: 100%; position: relative; }
.writer-cover-edit .tp-cover-main { left: 0; position: absolute; right: 0; text-align: center; top: 33%; }
.writer-cover-edit .tp-cover-episode { margin-top: 0.4em; }
.writer-cover-edit .tp-cover-author { margin-top: 2em; }
.writer-cover-edit .tp-cover-basedon { left: 12%; position: absolute; right: 12%; text-align: center; top: 52%; }
.writer-cover-edit .tp-cover-bottom { bottom: 0.5in; display: grid; grid-template-columns: 1fr 1fr; left: 0.5in; position: absolute; right: 0.5in; }
.writer-cover-edit .tp-cover-contact { text-align: right; }

/* Each editable line: invisible until hovered/focused, then a soft gold field so
   the writer sees exactly what they're editing. Matches the WALT gold accent. */
.writer-cover-edit [data-tp] {
  border-radius: 3px;
  cursor: text;
  min-height: 1em;
  min-width: 2ch;
  outline: 0;
  padding: 0 4px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Title/episode/author/based-on stack vertically, each shrink-wrapped to its
   text and centered — so the focus highlight hugs the words, not the full page. */
.writer-cover-edit .tp-cover-title,
.writer-cover-edit .tp-cover-episode,
.writer-cover-edit .tp-cover-author,
.writer-cover-edit .tp-cover-basedon {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: fit-content;
  width: -moz-fit-content;
}
/* The bottom row is a two-column grid; keep copyright left, contact right. */
.writer-cover-edit .tp-cover-copyright { justify-self: start; }
.writer-cover-edit .tp-cover-contact { justify-self: end; }
.writer-cover-edit [data-tp]:hover { background: rgba(21, 21, 21, 0.06); }
.writer-cover-edit [data-tp]:focus { background: rgba(240, 197, 107, 0.2); box-shadow: 0 0 0 1px rgba(240, 197, 107, 0.6); }
/* Pre-fill is never blank, but if a line is cleared show a faint prompt. */
.writer-cover-edit [data-tp]:empty::before {
  color: rgba(21, 21, 21, 0.32);
  content: attr(data-ph);
}

/* ============================================================================
   SCRAP BOOK (window.WALTScrapbook) — a scene-related idea board that sits in the
   empty space to the right of the page. Posts are parchment squares matching the
   "How WALT Works" flow boxes (.walt-blueprint-step), with the WALT rollover.
   Toggled by the "Scrap Book" switch in the top nav. Notes are the writer's alone
   (never SIE). Appended per the design rule — existing vars only.
   ========================================================================== */
.writer-scrap-panel {
  align-self: flex-start;
  display: flex;
  flex: 0 0 380px;
  flex-direction: column;
  gap: 12px;
  height: calc(100vh - 140px);
  margin-left: 36px;
  max-width: 380px;
  position: sticky;
  top: 112px;
}
.writer-scrap-panel.hidden { display: none; }

.writer-scrap-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.writer-scrap-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.writer-scrap-eyebrow {
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.writer-scrap-scene {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.writer-scrap-panel .writer-scrap-add {
  align-items: center;
  background: rgba(240, 197, 107, 0.14);
  border: 1px solid rgba(240, 197, 107, 0.5);
  border-radius: 999px;
  color: var(--gold);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 500;
  height: 34px;
  justify-content: center;
  line-height: 1;
  min-height: 0;
  padding: 0;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  width: 34px;
}
.writer-scrap-panel .writer-scrap-add:hover { background: var(--gold); color: #16140f; transform: translateY(-1px); }

.writer-scrap-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 2px 4px 10px 2px;
}
.writer-scrap-empty { color: var(--muted); font-size: 12px; line-height: 1.4; padding: 6px 4px; }

/* A post — parchment square, matches .walt-blueprint-step, with the rollover. */
.writer-scrap-card {
  background: #f5f1e9;
  border: 1px solid rgba(240, 197, 107, 0.34);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  position: relative;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.writer-scrap-card:hover { transform: translateY(-4px); border-color: rgba(240, 197, 107, 0.7); }
.writer-scrap-card-head { align-items: center; display: flex; }
.writer-scrap-badge {
  align-items: center;
  background: rgba(240, 197, 107, 0.16);
  border: 1px solid rgba(240, 197, 107, 0.45);
  border-radius: 999px;
  color: #8a6a2c;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  height: 24px;
  justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  width: 24px;
}
.writer-scrap-card:hover .writer-scrap-badge { background: var(--gold); border-color: var(--gold); color: #16140f; }
.writer-scrap-card .writer-scrap-del {
  background: transparent;
  border: 0;
  color: rgba(21, 21, 21, 0.4);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  margin-left: auto;
  min-height: 0;
  padding: 2px 6px;
  transition: color 0.18s ease;
}
.writer-scrap-card .writer-scrap-del:hover { color: #e0483d; }

.writer-scrap-card .writer-scrap-text {
  background: transparent;
  border: 0;
  color: #0a0a0a;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 1.5;
  min-height: 72px;
  outline: 0;
  overflow: hidden;
  padding: 2px;
  resize: none;
  width: 100%;
}
.writer-scrap-card .writer-scrap-text::placeholder { color: rgba(21, 21, 21, 0.38); }

/* delete confirmation — only on the post being deleted */
.writer-scrap-confirm {
  align-items: center;
  background: rgba(224, 72, 61, 0.1);
  border: 1px solid rgba(224, 72, 61, 0.4);
  border-radius: 6px;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  margin-top: 4px;
  padding: 8px 10px;
}
.writer-scrap-card.confirming .writer-scrap-confirm { display: flex; }
.writer-scrap-card.confirming .writer-scrap-text { opacity: 0.45; }
.writer-scrap-confirm-q { color: #151515; font-size: 11px; font-weight: 600; }
.writer-scrap-confirm-btns { display: inline-flex; gap: 6px; }
.writer-scrap-confirm .writer-scrap-confirm-del,
.writer-scrap-confirm .writer-scrap-confirm-keep {
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  min-height: 0;
  padding: 5px 10px;
}
.writer-scrap-confirm .writer-scrap-confirm-del { background: #e0483d; color: #fff; }
.writer-scrap-confirm .writer-scrap-confirm-keep { background: rgba(21, 21, 21, 0.1); color: #151515; }

@media (prefers-reduced-motion: reduce) {
  .writer-scrap-card { transition: border-color 0.18s ease; }
  .writer-scrap-card:hover { transform: none; }
}

/* --- Note / Prompt kinds (Michael's design) --------------------------------
   One column: gold-N Notes on top, blue-P Prompts below. The colored top bar is
   the divider between the two groups; a small black box holds the N or P; the
   card parchment sits DARKER than the cream writing page so cards read separate. */
/* brighter, readable blue for prompts (Photoshop-icon blue) — scoped to the scrap
   book so the global --blue is untouched. */
.writer-scrap-panel { --scrap-blue: #31a8ff; }
.writer-scrap-card { background: #e7dcc2; border: 1px solid rgba(0, 0, 0, 0.14); border-top-width: 4px; }
.writer-scrap-card--note { border-top-color: var(--gold); }
.writer-scrap-card--prompt { border-top-color: var(--scrap-blue); }
.writer-scrap-card--note:hover { border-color: rgba(240, 197, 107, 0.7); border-top-color: var(--gold); }
.writer-scrap-card--prompt:hover { border-color: rgba(49, 168, 255, 0.7); border-top-color: var(--scrap-blue); }

/* the N / P marker — a small black box with the kind's letter in its color */
.writer-scrap-card .writer-scrap-badge {
  background: #16140f;
  border: 0;
  border-radius: 4px;
  color: var(--gold);
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  height: 20px;
  width: 20px;
}
.writer-scrap-card--prompt .writer-scrap-badge { color: var(--scrap-blue); }
.writer-scrap-card:hover .writer-scrap-badge { background: #16140f; }
.writer-scrap-card--note:hover .writer-scrap-badge { color: var(--gold); }
.writer-scrap-card--prompt:hover .writer-scrap-badge { color: var(--scrap-blue); }

.writer-scrap-card .writer-scrap-text { color: #000; }

/* the small BEAT chip on prompts the Beat Prompter spawned */
.writer-scrap-beatchip {
  background: var(--scrap-blue);
  border-radius: 3px;
  color: #06222c;
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-left: 6px;
  padding: 1px 4px;
}

/* the scene heading this card belongs to — sits between the N/P box and the × */
.writer-scrap-cardscene {
  color: #6a5f45;
  flex: 1 1 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-left: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* group headers, each with its own [+] (Note adds a blank card, Prompt a template) */
.writer-scrap-group-head { align-items: center; display: flex; justify-content: space-between; margin: 4px 2px 0; }
.writer-scrap-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.writer-scrap-group-note .writer-scrap-group-label { color: var(--gold); }
.writer-scrap-group-prompt .writer-scrap-group-label { color: var(--scrap-blue); }
.writer-scrap-panel .writer-scrap-add-note,
.writer-scrap-panel .writer-scrap-add-prompt { font-size: 18px; height: 28px; width: 28px; }
.writer-scrap-panel .writer-scrap-add-prompt { background: rgba(49, 168, 255, 0.18); border-color: rgba(49, 168, 255, 0.6); color: var(--scrap-blue); }
.writer-scrap-panel .writer-scrap-add-prompt:hover { background: var(--scrap-blue); color: #06222c; transform: translateY(-1px); }

/* ============================================================================
   DUAL DIALOGUE (window.WALTDual) — two speeches side by side as ONE atomic
   block the paginator flows around. Screenplay Courier; cues centered per column.
   ========================================================================== */
.writer-dual-block {
  display: grid;
  gap: 0.5in;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 1em;
  padding: 0 0.3in;
}
.writer-dual-col { display: flex; flex-direction: column; min-width: 0; }
.writer-dual-cue {
  color: #0a0a0a;
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  line-height: 1.1;
  outline: 0;
  text-align: center;
  text-transform: uppercase;
}
.writer-dual-speech {
  color: #0a0a0a;
  font-family: "Courier New", Courier, monospace;
  font-size: 12pt;
  line-height: 1.15;
  min-height: 1em;
  outline: 0;
  white-space: pre-wrap;
  word-break: normal;
}
.writer-dual-cue:empty::before,
.writer-dual-speech:empty::before { color: rgba(10, 10, 10, 0.32); content: attr(data-ph); }
.writer-dual-cue:focus,
.writer-dual-speech:focus { background: rgba(240, 197, 107, 0.16); border-radius: 3px; }

/* Dual dialogue in the on-page preview — two columns side by side (matches the
   editor block and the export). */
.screenplay-preview .sp-dual { display: grid; gap: 0.35in; grid-template-columns: 1fr 1fr; }
.screenplay-preview .sp-dual-col { min-width: 0; }

/* Toolbar B/I/U/CAPS — consistent DEFINED buttons matching Edit / Title Page /
   Drafts (Michael: consistency is important). Same ghost fill + hairline border,
   same 34px height / 8px radius; CAPS lettering matches B/I/U and sizes to its word. */
.writer-format-button {
  background: #202730;
  border: 1px solid var(--line);
  color: #e8e8e8;
}
.writer-format-button:hover { background: #2b323c; }
.writer-format-button.caps-demo { font-size: 15px; width: auto; }

/* ---- Story Database (Stage 3) — drawers + control lane ---- */
.sdb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 16px;
}
.sdb-tab { min-height: 34px; padding: 0 12px; }
.sdb-add {
  border: 1px dashed var(--line);
  color: var(--muted);
}
.sdb-add:hover { border-color: rgba(240, 197, 107, 0.45); color: var(--gold); }
.sdb-custom {
  color: var(--mint);
  font-size: 10px;
  border: 1px solid rgba(134, 213, 193, 0.4);
  border-radius: 20px;
  padding: 1px 7px;
  vertical-align: middle;
}
.sdb-body { min-width: 0; }
.sdb-note { color: var(--muted); font-size: 13px; margin: 10px 2px 0; }
.sdb-drawer-actions { display: flex; gap: 8px; }
.sdb-drawer-actions button { font-size: 13px; min-height: 34px; padding: 0 12px; }

/* control lane — always the first two columns */
.sdb-table th.sdb-ctrl, .sdb-table td.sdb-ctrl {
  border-right: 1px solid var(--line);
  background: rgba(16, 20, 26, 0.55);
  white-space: nowrap;
  text-align: center;
}
.sdb-toggle {
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 650;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
}
.sdb-toggle.on {
  border-color: rgba(240, 197, 107, 0.5);
  color: var(--gold);
  background: rgba(240, 197, 107, 0.12);
}
.sdb-status {
  min-height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 650;
  border-radius: 20px;
  border: 1px solid transparent;
}
.sdb-status.green { background: rgba(134, 213, 193, 0.16); color: var(--mint); border-color: rgba(134, 213, 193, 0.38); }
.sdb-status.red { background: rgba(224, 99, 94, 0.16); color: var(--red); border-color: rgba(224, 99, 94, 0.38); }
.sdb-row.sdb-inactive td { opacity: 0.4; }
.sdb-val { min-width: 90px; }
.sdb-val:focus { outline: 2px solid rgba(240, 197, 107, 0.5); outline-offset: -2px; background: rgba(240, 197, 107, 0.06); }
.sdb-col-custom { border-left: 1px solid rgba(134, 213, 193, 0.3); border-right: 1px solid rgba(134, 213, 193, 0.3); }
.sdb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.sdb-dot.green { background: var(--mint); }
.sdb-dot.red { background: var(--red); }
.sdb-dim { color: var(--dim); }
.sdb-index-row { cursor: pointer; }
.sdb-total td { border-top: 2px solid var(--line); font-weight: 650; }

/* ---- Safe delete: quiet danger buttons + type-to-confirm ---- */
.proj-btn-danger-ghost {
  background: transparent;
  border: 1px solid rgba(224, 99, 94, 0.38);
  color: var(--red);
  font-weight: 550;
}
.proj-btn-danger-ghost:hover { background: rgba(224, 99, 94, 0.12); filter: none; }
.proj-btn-danger {
  background: #b3453f;
  color: #fbeaea;
  border: 0;
  font-weight: 600;
}
.proj-btn-danger:hover { background: #c24d46; filter: none; }
.proj-btn-danger:disabled { background: #3b2321; color: #8a6f6d; cursor: not-allowed; }
.proj-confirm-name {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--gold);
  background: #10141a;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0 12px;
  user-select: all;
}

/* W header cleanup: the Admin Library sidebar was removed (you switch scripts in
   Projects), so the Project Folder frame spans the full width — moved left. */
.writer-library { grid-template-columns: minmax(0, 1fr); }

/* ============================================================================
   STYLE BUILDER (style-builder.js) — choose the project's one visual style.
   Appended per house rules: reuses WALT variables + the locked rollover.
   ========================================================================== */
.style-builder-root { margin-top: 6px; }
.sb-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 22px; align-items: start; }
.sb-cards { min-width: 0; }
.sb-group { margin: 18px 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); font-weight: 600; }
.sb-group:first-child { margin-top: 0; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }

.sb-card { position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px;
  cursor: pointer; color: var(--ink); transition: transform .18s ease, border-color .18s ease; }
.sb-card:hover, .sb-card.selected { transform: translateY(-4px); border-color: rgba(240, 197, 107, 0.7); }
.sb-card.selected { background: #201d16; }

.sb-badge { position: absolute; top: 12px; left: 12px; z-index: 2; width: 24px; height: 24px;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: rgba(0,0,0,.55); color: var(--ink);
  border: 1px solid rgba(240,197,107,.42); transition: background .18s ease, color .18s ease; }
.sb-card:hover .sb-badge, .sb-card.selected .sb-badge { background: var(--gold); color: #16140f; }

.sb-tag { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #16140f; background: var(--gold);
  padding: 2px 6px; border-radius: 5px; }

.sb-tile { aspect-ratio: 16 / 9; background: var(--night); border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.sb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-tile.empty::after { content: "preview soon"; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.sb-name { font-size: 12px; font-weight: 600; line-height: 1.25; padding: 0 2px 2px; }

.sb-detail { position: sticky; top: 12px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 16px 18px; }
.sb-detail .eyebrow { margin: 0 0 4px; }
.sb-sel-name { margin: 0 0 4px; font-size: 16px; }
.sb-sel-blurb { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sb-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 12px 0 5px; font-weight: 600; }
.sb-box { background: var(--night); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  font-size: 12px; line-height: 1.5; color: var(--ink); }
.sb-box.sb-neg { color: var(--muted); }
.sb-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 2px; }
.sb-settings div { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px;
  border-bottom: 1px solid var(--line); padding: 4px 0; }
.sb-settings span { color: var(--muted); }
.sb-settings b { color: var(--ink); font-weight: 600; }

.sb-apply { width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 9px;
  background: var(--gold); color: #16140f; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; transition: filter .18s ease; }
.sb-apply:hover { filter: brightness(1.06); }
.sb-apply.done { background: transparent; color: var(--gold); border: 1px solid rgba(240,197,107,.5); cursor: default; }
.sb-applynote { margin: 8px 0 0; font-size: 11px; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sb-card:hover, .sb-card.selected { transform: none; }
}

/* ============================================================================
   STYLE BUILDER — project dashboard frame (style-frame.js / WALTStyleFrame)
   Two controls only: choose a tile, then Lock. Reuses existing tokens/classes.
   ========================================================================== */
.sf-intro { margin: 4px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 780px; }
.sf-intro strong { color: var(--ink); }

/* The one-line lock bar: chosen style + LOCK, or the locked state. */
.sf-lockbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin: 0 0 22px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.sf-lockbar--empty { opacity: 0.85; }
.sf-lockbar--locked { border-color: rgba(240, 197, 107, 0.55); background: rgba(240, 197, 107, 0.06); }
.sf-lockbar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-lockbar-eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.sf-lockbar-text strong { font-size: 15px; color: var(--ink); }
.sf-lockbar-note { font-size: 12px; color: var(--muted); }
.sf-lockbar button { white-space: nowrap; flex-shrink: 0; }

/* Grouped grid of style tiles. */
.sf-group { margin: 0 0 24px; }
.sf-group-label {
  margin: 0 0 10px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.sf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}

.sf-tile {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: 0; margin: 0; cursor: pointer; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.sf-tile-img { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0f0e0c; overflow: hidden; }
.sf-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-tile-img--empty { display: flex; }
.sf-tile-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  background: rgba(18, 20, 15, 0.82); color: var(--ink); border: 1px solid var(--line);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.sf-tile-name { display: block; padding: 9px 11px 11px; font-size: 12px; line-height: 1.35; }

/* Selected (chosen but not yet locked) */
.sf-tile.is-selected { border-color: rgba(240, 197, 107, 0.7); }
.sf-tile.is-selected .sf-tile-badge { background: var(--gold); color: #16140f; border-color: var(--gold); }

/* Locked — the committed style for this production */
.sf-tile.is-locked { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.sf-tile.is-locked .sf-tile-badge { background: var(--gold); color: #16140f; border-color: var(--gold); }

/* Locked WALT rollover house style (GPU-composited lift + gold border + badge fill) */
.sf-tile:hover { transform: translateY(-4px); border-color: rgba(240, 197, 107, 0.7); }
.sf-tile:hover .sf-tile-badge { background: var(--gold); color: #16140f; border-color: var(--gold); }

.sf-explore { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.sf-explore a { color: var(--gold); text-decoration: none; }
.sf-explore a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .sf-tile:hover { transform: none; }
}

/* ==========================================================================
   STORY BIBLE frame (style-bible-frame.js) — control board for character
   bible sheets. Matches the Style Builder look (sf-) and WALT house style.
   ========================================================================== */
.sb-intro { margin: 4px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 820px; }
.sb-intro strong { color: var(--ink); }

/* Locked-style dependency bar (the bible's look comes from the locked style). */
.sb-stylebar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin: 0 0 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.sb-stylebar--locked { border-color: rgba(240, 197, 107, 0.55); background: rgba(240, 197, 107, 0.06); }
/* no style chosen yet = red, so it reads as required until locked */
.sb-stylebar--empty { border-color: rgba(224, 99, 94, 0.6); background: rgba(224, 99, 94, 0.08); }
.sb-stylebar--empty .sb-stylebar-eyebrow { color: var(--red); }
.sb-stylebar--empty .sb-stylebar-note { color: #e39b98; }
.sb-stylebar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-stylebar-eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.sb-stylebar strong { font-size: 15px; color: var(--ink); }
.sb-stylebar-note { font-size: 12px; color: var(--muted); }
.sb-stylebar button { white-space: nowrap; flex-shrink: 0; }

/* The 4-step flow strip. */
.sb-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.sb-step {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.sb-step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--panel-2); color: var(--gold); border: 1px solid var(--line);
  font-size: 11px; font-weight: 700;
}
.sb-flow-arrow { color: var(--dim); font-size: 14px; }

/* Story Database sections (grouped by item type). */
.sb-section { margin-top: 22px; }
.sb-section-label {
  margin: 0 0 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.sb-section-count { color: var(--dim); margin-left: 3px; }

/* Cast grid. */
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.sb-card {
  position: relative; display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 16px 16px 14px; cursor: default;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.sb-card.is-saved { border-color: rgba(134, 213, 193, 0.35); }
.sb-card-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.sb-card-name { font-size: 15px; color: var(--ink); padding-right: 74px; }
.sb-card-stage { font-size: 11.5px; color: var(--muted); }
.sb-pill {
  align-self: flex-start; margin-top: 3px;
  padding: 2px 9px; border-radius: 999px; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--line);
}
.sb-pill--saved { color: var(--mint); border-color: rgba(134, 213, 193, 0.45); }
.sb-pill--draft { color: var(--gold); border-color: rgba(240, 197, 107, 0.45); }
.sb-pill--queued { color: var(--dim); }
.sb-card-open {
  margin-top: 9px; align-self: flex-start;
  font-size: 12px; color: var(--gold); text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
}
.sb-card-open:hover { text-decoration: underline; }
.sb-card-open--build { color: var(--muted); }

/* New Character card. */
.sb-card--new { align-items: flex-start; justify-content: center; cursor: pointer; border-style: dashed; }
.sb-card-plus { font-size: 26px; line-height: 1; color: var(--gold); }

/* Locked WALT rollover house style (GPU-composited lift + gold border + badge fill). */
.sb-card--new:hover, .sb-card.is-saved:hover, .sb-card:hover {
  transform: translateY(-4px); border-color: rgba(240, 197, 107, 0.7);
}
.sb-card:hover .sb-card-badge { background: var(--gold); color: #16140f; border-color: var(--gold); }

.sb-empty {
  padding: 28px; border: 1px dashed var(--line); border-radius: 12px;
  color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center;
}
.sb-empty strong { color: var(--ink); }

/* ---- Sheet viewer (opens a sheet/template framed inside the console) ---- */
.sb-viewer-actions { display: flex; gap: 10px; flex-shrink: 0; }
.sb-viewer {
  width: 100%; height: 80vh; min-height: 520px; margin-top: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: #e9e9e9; display: block;
}

/* ---- Builder flow (New / Complete the Sheet) ---- */
.sb-flow--builder .sb-step.is-active { border-color: rgba(240, 197, 107, 0.6); color: var(--ink); }
.sb-flow--builder .sb-step.is-active b { background: var(--gold); color: #16140f; border-color: var(--gold); }
.sb-flow--builder .sb-step.is-done b { color: var(--mint); border-color: rgba(134, 213, 193, 0.5); }
.sb-builder { margin-top: 20px; max-width: 860px; }
.sb-blabel { display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 16px 0 20px; }
.sb-binput {
  display: block; width: 100%; margin-top: 7px; padding: 12px 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 16px;
}
.sb-binput:focus { outline: none; border-color: rgba(240, 197, 107, 0.6); }
.sb-tplcard {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin: 8px 0;
}
.sb-tplcard strong { display: block; color: var(--ink); font-size: 14px; }
.sb-tplcard span { font-size: 12px; color: var(--muted); }
.sb-builder-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.sb-builder-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.sb-look-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* gallery wraps to fit however many looks have been rendered */
.sb-look.sb-gallery { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* render CAROUSEL — up to 12 looks, horizontal scroll, per-look delete */
.sb-carousel { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.sb-carousel .sb-look-card { flex: 0 0 210px; scroll-snap-align: start; position: relative; }
.sb-look-x {
  position: absolute; top: 7px; right: 7px; z-index: 3; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(17, 20, 26, 0.82); border: 1px solid var(--line); color: var(--ink);
  font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
.sb-look-x:hover { background: var(--coral); color: #fff; border-color: var(--coral); }
.sb-look-loading {
  flex: 0 0 210px; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); border-radius: 12px;
}
/* empty + rendering placeholder frames (Look 1–4 skeleton) */
.sb-look-empty .sb-look-art, .sb-look-pending .sb-look-art {
  display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); background: var(--panel-2);
}
.sb-look-empty, .sb-look-pending { cursor: default; }
.sb-look-empty:hover, .sb-look-pending:hover { transform: none; border-color: var(--line); }
.sb-look-empty .sb-look-cap, .sb-look-pending .sb-look-cap { color: var(--dim); }
/* real screenplay quote above the render window (the chef's kiss) */
.sb-quote {
  font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--ink); font-size: 15px; line-height: 1.55;
  padding: 14px 18px; margin: 0 0 16px; border-left: 3px solid var(--gold);
  background: rgba(240, 197, 107, 0.05); border-radius: 0 8px 8px 0;
}
.sb-quote-src { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 7px; letter-spacing: 0.06em; text-transform: uppercase; }
.sb-spinner {
  display: inline-block; width: 24px; height: 24px; border: 3px solid var(--line);
  border-top-color: var(--gold); border-radius: 50%; animation: sb-spin 0.8s linear infinite; margin-bottom: 6px;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-svc-msg {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 40px 24px; margin-top: 8px; border: 1px dashed var(--line); border-radius: 12px;
}
.sb-svc-msg strong { color: var(--ink); font-size: 15px; }
.sb-svc-msg span { color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 560px; }
.sb-svc-msg b { color: var(--gold); font-weight: 600; }
.sb-look { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px 0 0; }
.sb-look-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.sb-look-card:hover { transform: translateY(-4px); border-color: rgba(240, 197, 107, 0.7); }
.sb-look-card.is-selected { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.sb-look-art {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5;
  background: var(--panel-2); color: var(--dim); font-size: 46px; font-weight: 700;
}
.sb-look-cap { padding: 10px 12px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sb-look-card.is-selected .sb-look-cap { color: var(--gold); }
.sb-done {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; margin: 14px 0;
  border: 1px solid rgba(134, 213, 193, 0.35); border-radius: 12px; background: rgba(134, 213, 193, 0.05);
}
.sb-done strong { color: var(--ink); font-size: 15px; }
.sb-done span { color: var(--muted); font-size: 13px; }
.sb-note { font-size: 11.5px; color: var(--dim); margin-top: 14px; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .sb-look-card:hover { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sb-card:hover, .sb-card--new:hover, .sb-card.is-saved:hover { transform: none; }
}

/* ==========================================================================
   Story Database › Import Bible dock (import-bible.js).
   The on-ramp for a hand-built bible: drag/drop finished sheets, match to rows,
   confirm strays, pick the anchor frame, flip red->green. Additive only; reuses
   the projects-modal shell and existing variables. See CLAUDE.md.
   ========================================================================== */
.ib-modal { max-width: 860px; }
.ib-head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 6px; }
.ib-head h3 { margin: 2px 0 0; }
.ib-lead { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.ib-g { color: var(--mint); }
.ib-r { color: var(--red); }

/* drop zone */
.ib-drop {
  align-items: center; border: 2px dashed var(--line); border-radius: 12px;
  display: flex; justify-content: center; min-height: 260px; padding: 24px; text-align: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ib-drop-hot { background: rgba(240, 197, 107, 0.06); border-color: rgba(240, 197, 107, 0.7); }
.ib-drop-icon { color: var(--gold); font-size: 40px; line-height: 1; }
.ib-drop-title { color: var(--ink); font-size: 17px; font-weight: 650; margin-top: 12px; }
.ib-drop-sub { color: var(--dim); font-size: 13px; margin: 10px 0; }
.ib-drop-btns { display: flex; gap: 10px; justify-content: center; }
.ib-drop-btns button, .ib-anchor-actions .ib-whole {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  cursor: pointer; font-size: 14px; min-height: 38px; padding: 0 16px; transition: border-color 0.18s ease, color 0.18s ease;
}
.ib-drop-btns button:hover { border-color: rgba(240, 197, 107, 0.55); color: var(--gold); }
.ib-drop-note { color: var(--dim); font-size: 12px; margin-top: 14px; }
.ib-spin { color: var(--muted); font-size: 15px; }

/* review table */
.ib-table-wrap { border: 1px solid var(--line); border-radius: 10px; max-height: 52vh; overflow: auto; }
.ib-table { border-collapse: collapse; width: 100%; }
.ib-table th {
  background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
  padding: 9px 12px; position: sticky; text-align: left; text-transform: uppercase; top: 0; z-index: 1;
}
.ib-table td { border-top: 1px solid var(--line); padding: 10px 12px; vertical-align: middle; }
.ib-row-stray { background: rgba(224, 99, 94, 0.06); }
.ib-thumb-cell { width: 76px; }
.ib-thumb {
  background: #000; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; display: block;
  height: 60px; overflow: hidden; padding: 0; position: relative; width: 60px;
}
.ib-thumb:hover { border-color: rgba(240, 197, 107, 0.7); }
.ib-thumb img { height: 100%; object-fit: cover; width: 100%; }
.ib-thumb-anchor {
  background: rgba(8, 10, 12, 0.78); bottom: 0; color: var(--gold); font-size: 9px; left: 0;
  line-height: 1.1; padding: 2px 3px; position: absolute; right: 0; text-align: center;
}
.ib-fname { color: var(--ink); font-size: 13px; margin-bottom: 5px; word-break: break-all; }
.ib-badge { border-radius: 20px; font-size: 11px; font-weight: 600; padding: 2px 9px; white-space: nowrap; }
.ib-badge.sure { background: rgba(134, 213, 193, 0.16); color: var(--mint); }
.ib-badge.maybe { background: rgba(240, 197, 107, 0.14); color: var(--gold); }
.ib-badge.stray { background: rgba(224, 99, 94, 0.16); color: var(--red); }
.ib-badge.dup { background: rgba(216, 97, 71, 0.16); color: var(--coral); }
.ib-assign select {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  font-size: 13px; max-width: 320px; min-height: 36px; padding: 0 10px; width: 100%;
}
.ib-remove { text-align: right; width: 40px; }
.ib-remove button {
  background: none; border: none; color: var(--dim); cursor: pointer; font-size: 15px; padding: 4px 6px;
}
.ib-remove button:hover { color: var(--coral); }

/* footer */
.ib-foot { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-top: 16px; }
.ib-foot-right { align-items: center; display: flex; gap: 12px; }
.ib-err { color: var(--coral); font-size: 13px; }
.ib-install {
  background: rgba(134, 213, 193, 0.14); border: 1px solid rgba(134, 213, 193, 0.45); border-radius: 8px;
  color: var(--mint); cursor: pointer; font-size: 14px; font-weight: 600; min-height: 40px; padding: 0 18px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.ib-install:hover:not(:disabled) { background: rgba(134, 213, 193, 0.22); border-color: rgba(134, 213, 193, 0.7); }
.ib-install:disabled { color: var(--dim); cursor: default; opacity: 0.5; }

/* anchor picker overlay (over the modal) */
.ib-anchor-pop { align-items: center; display: flex; inset: 0; justify-content: center; position: fixed; z-index: 70; }
.ib-anchor-pop::before { background: rgba(8, 10, 12, 0.55); content: ""; inset: 0; position: absolute; }
.ib-anchor-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  max-height: 88vh; max-width: 520px; overflow: auto; padding: 20px; position: relative; width: calc(100% - 48px);
}
.ib-anchor-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; }
.ib-anchor-lead { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.ib-anchor-stage { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; position: relative; }
.ib-anchor-stage img { display: block; max-height: 52vh; object-fit: contain; width: 100%; }
.ib-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); inset: 0; position: absolute; }
.ib-cell { background: transparent; border: 1px solid rgba(240, 197, 107, 0.22); cursor: pointer; transition: background 0.12s ease; }
.ib-cell:hover { background: rgba(240, 197, 107, 0.18); }
.ib-cell.on { background: rgba(240, 197, 107, 0.34); border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.ib-anchor-actions { align-items: center; display: flex; gap: 14px; justify-content: space-between; margin-top: 14px; }
.ib-whole.on { border-color: var(--gold); color: var(--gold); }
.ib-anchor-cur { color: var(--muted); font-size: 13px; }
.ib-anchor-cur b { color: var(--gold); }

/* done */
.ib-done { padding: 20px 4px; text-align: center; }
.ib-done-check {
  background: rgba(134, 213, 193, 0.16); border-radius: 50%; color: var(--mint); font-size: 30px;
  height: 64px; line-height: 64px; margin: 0 auto 16px; width: 64px;
}
.ib-done p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 auto 20px; max-width: 460px; }

@media (max-width: 720px) {
  .ib-foot { flex-direction: column; align-items: stretch; }
  .ib-foot-right { flex-wrap: wrap; }
  .ib-assign select { max-width: none; }
}

/* the "name files with their code" rule — a quieter, framed hint under the lead */
.ib-name-rule {
  background: rgba(240, 197, 107, 0.07);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin: -4px 0 16px;
}
/* resolution light — outlined pill in the import dock, solid pill in the database */
.ib-badge.ib-res { background: transparent; border: 1px solid currentColor; }
.sdb-res {
  border-radius: 20px; display: inline-block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.03em; padding: 3px 9px; white-space: nowrap;
}
.sdb-res.green { background: rgba(134, 213, 193, 0.16); color: var(--mint); }
.sdb-res.amber { background: rgba(240, 197, 107, 0.16); color: var(--gold); }
.sdb-res.red   { background: rgba(224, 99, 94, 0.16); color: var(--red); }
.sdb-res.none  { color: var(--muted); opacity: 0.5; }

.ib-name-rule code,
.ib-drop-note code {
  background: rgba(240, 197, 107, 0.12);
  border: 1px solid rgba(240, 197, 107, 0.28);
  border-radius: 5px;
  color: var(--gold);
  font-size: 0.92em;
  padding: 1px 5px;
  white-space: nowrap;
}

/* Render Engine Specs (Generate panel reference table) */
.es-panel {
  background: rgba(25, 29, 36, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 20px 0;
  padding: 18px;
}
.es-rule { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 12px 0 16px; }
.es-rule b { color: var(--ink); }
.es-g { color: var(--mint); }
.es-table-wrap { overflow-x: auto; }
.es-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
.es-table th {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
  color: var(--gold);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 12px; text-align: left; white-space: nowrap;
}
.es-table td { border-bottom: 1px solid var(--line); color: var(--muted); padding: 11px 12px; vertical-align: top; }
.es-table tr:last-child td { border-bottom: none; }
.es-table .es-name strong { color: var(--ink); }
.es-note { color: var(--muted); font-size: 11px; display: block; margin-top: 2px; opacity: 0.8; }
.es-cost { color: var(--ink); white-space: nowrap; }
.es-take {
  background: rgba(134, 213, 193, 0.06);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mint);
  border-radius: 8px;
  color: var(--muted); font-size: 13px; line-height: 1.55;
  margin: 16px 0 12px; padding: 11px 13px;
}
.es-take b { color: var(--ink); }
.es-foot { color: var(--muted); font-size: 11.5px; line-height: 1.5; margin: 0; opacity: 0.85; }
.es-foot a { color: var(--gold); }

/* Story Bible — "why the master is 4K" explainer (collapsible on the control board) */
.sb-reswhy {
  background: rgba(25, 29, 36, 0.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 0 18px;
  padding: 2px 14px;
}
.sb-reswhy > summary {
  color: var(--gold);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  list-style: none;
  padding: 12px 0;
}
.sb-reswhy > summary::-webkit-details-marker { display: none; }
.sb-reswhy > summary::before { content: "▸ "; color: var(--muted); }
.sb-reswhy[open] > summary::before { content: "▾ "; }
.sb-reswhy > summary b { color: var(--ink); }
.sb-reswhy-body { padding: 0 0 14px; }
.sb-reswhy-body p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 6px 0 12px; }
.sb-reswhy-body b { color: var(--ink); }
.sb-reswhy-table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin: 4px 0 12px; }
.sb-reswhy-table th {
  border-bottom: 1px solid var(--line); color: var(--gold);
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 8px 10px; text-align: left;
}
.sb-reswhy-table td { border-bottom: 1px solid var(--line); color: var(--muted); padding: 9px 10px; vertical-align: top; }
.sb-reswhy-table tr:last-child td { border-bottom: none; }
.sb-reswhy-table td b { color: var(--ink); }
.sb-res-4k { color: var(--mint); }
.sb-reswhy-foot { color: var(--muted); font-size: 12.5px; margin: 4px 0 2px !important; }

/* ===== The 9th frame — "How Movies are made by AI" ==========================
   Deliberately a DIFFERENT interaction from the 8 blueprint steps: those lift a
   few px and brighten their border. This one is a doorway that LIGHTS UP — a gold
   wash, a gold glow, a light sweeping across, the title turning gold, the arrow
   sliding. It reads as "come in and watch," not "another step that moves." */
.walt-moviecta {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 11px; text-align: left; width: 100%;
  margin: 34px 0 6px; padding: 36px 38px; cursor: pointer; color: inherit; font: inherit;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(240,197,107,.10), transparent 55%),
    linear-gradient(180deg, rgba(30,26,21,.92), rgba(20,18,15,.96));
  border: 1px solid rgba(240,197,107,.38); border-radius: 18px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.walt-moviecta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(240,197,107,.16) 50%, transparent 68%);
  transform: translateX(-120%); transition: transform .65s ease;
}
.walt-moviecta:hover, .walt-moviecta:focus-visible {
  border-color: rgba(240,197,107,.85);
  box-shadow: 0 0 0 1px rgba(240,197,107,.45), 0 20px 55px -22px rgba(240,197,107,.5);
  transform: scale(1.012);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(240,197,107,.2), transparent 55%),
    linear-gradient(180deg, rgba(40,33,24,.96), rgba(24,20,16,.98));
  outline: none;
}
.walt-moviecta:hover::before, .walt-moviecta:focus-visible::before { transform: translateX(120%); }
.walt-moviecta:focus-visible { box-shadow: 0 0 0 2px var(--gold), 0 20px 55px -22px rgba(240,197,107,.5); }
.walt-moviecta-kicker { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.walt-moviecta-title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; color: var(--ink); line-height: 1.04; letter-spacing: -.01em; transition: color .25s ease; }
.walt-moviecta:hover .walt-moviecta-title, .walt-moviecta:focus-visible .walt-moviecta-title { color: var(--gold); }
.walt-moviecta-text { color: var(--muted); font-size: 16px; max-width: 62ch; line-height: 1.55; }
.walt-moviecta-go { margin-top: 8px; display: inline-flex; align-items: center; gap: 9px; color: var(--gold); font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.walt-moviecta-go .arw { transition: transform .25s ease; }
.walt-moviecta:hover .walt-moviecta-go .arw, .walt-moviecta:focus-visible .walt-moviecta-go .arw { transform: translateX(7px); }
@media (prefers-reduced-motion: reduce) {
  .walt-moviecta, .walt-moviecta::before, .walt-moviecta-title, .walt-moviecta-go .arw { transition: none; }
  .walt-moviecta:hover, .walt-moviecta:focus-visible { transform: none; }
  .walt-moviecta:hover::before, .walt-moviecta:focus-visible::before { transform: translateX(-120%); }
}

/* In-app field guide viewer (opened by the 9th frame) */
body.wfg-lock { overflow: hidden; }
.wfg-overlay { position: fixed; inset: 0; z-index: 4000; display: none; flex-direction: column; background: rgba(8,7,6,.9); backdrop-filter: blur(4px); }
.wfg-overlay.open { display: flex; }
.wfg-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: rgba(20,18,16,.94); border-bottom: 1px solid var(--line); }
.wfg-title { color: var(--ink); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.wfg-close { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 14px; cursor: pointer; font-size: 13px; transition: border-color .18s ease, color .18s ease; }
.wfg-close:hover { border-color: var(--gold); color: var(--gold); }
.wfg-frame { flex: 1; width: 100%; border: 0; background: #141210; }

/* ============================================================
   Story Bible — "Open Sheet" viewer (modal) + Sheet control column
   Appended for the Story Database sheet viewer. Uses house variables only.
   ============================================================ */
.sdb-sheet{
  font: inherit; cursor: pointer; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  letter-spacing: .03em; white-space: nowrap; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.sdb-sheet:hover{ border-color: rgba(240,197,107,.7); color: var(--gold); background: rgba(240,197,107,.06); }
.sdb-nosheet{ color: var(--muted); opacity: .5; text-align: center; }

.walt-sheet-overlay{
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.74);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.walt-sheet-modal{
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  width: min(96vw, 1600px); height: min(92vh, 1040px);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.walt-sheet-bar{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.walt-sheet-title{
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-size: 13px; color: var(--ink);
}
.walt-sheet-actions{ display: flex; gap: 8px; }
.walt-sheet-btn{
  font: inherit; font-size: 12px; cursor: pointer; text-decoration: none;
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); letter-spacing: .04em;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.walt-sheet-btn:hover{ border-color: rgba(240,197,107,.7); color: var(--gold); background: rgba(240,197,107,.06); }
.walt-sheet-frame{ flex: 1 1 auto; min-height: 0; background: #e9e9e9; overflow: auto; }
.walt-sheet-frame iframe{ width: 100%; height: 100%; border: 0; display: block; }

@media (prefers-reduced-motion: reduce){
  .sdb-sheet, .walt-sheet-btn{ transition: none; }
}

/* ============================================================
   Story Bible — running Cost of Production counter (index view)
   ============================================================ */
.sdb-cost{ margin-top: 28px; border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(240,197,107,.05), rgba(240,197,107,0)); padding: 20px 22px; }
.sdb-cost-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.sdb-cost-total{ text-align: right; }
.sdb-cost-amt{ display: block; font-size: 40px; font-weight: 800; letter-spacing: -.01em; color: var(--gold);
  line-height: 1; font-variant-numeric: tabular-nums; }
.sdb-cost-lbl{ display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.sdb-cost-grid{ display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 14px; }
.sdb-cost-cell{ flex: 1 1 120px; border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; background: rgba(255,255,255,.02); }
.sdb-cost-cell .n{ display: block; font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.sdb-cost-cell .k{ display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.sdb-cost-cell.free{ border-color: rgba(122,193,150,.5); background: rgba(122,193,150,.06); }
.sdb-cost-cell.free .n{ color: var(--mint, #7ac196); }
.sdb-cost-rates{ display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted); }
.sdb-cost-rates b{ color: var(--ink); font-weight: 700; }
.sdb-cost-rates .free b, .sdb-cost-rates .free{ color: var(--mint, #7ac196); }

/* ============================================================
   How WALT Works — Character Sheet Anatomy (#4)
   ============================================================ */
.walt-sheet-anatomy{ margin: 34px 0; padding: 26px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, rgba(240,197,107,.04), rgba(240,197,107,0)); }
.wsa-head h3{ margin: 4px 0 8px; }
.wsa-head p{ color: var(--muted); max-width: 70ch; }
.wsa-parts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 20px 0 16px; }
.wsa-part{ position: relative; border: 1px solid var(--line); border-radius: 11px; padding: 16px 16px 14px; background: rgba(255,255,255,.02); }
.wsa-part strong{ display: block; font-size: 15px; margin: 8px 0 6px; color: var(--ink); }
.wsa-part p{ font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 12px; }
.wsa-res{ display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .05em; padding: 3px 10px;
  border-radius: 999px; background: rgba(111,106,95,.18); color: var(--muted); }
.wsa-tag{ display: inline-block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wsa-part.ready{ border-color: rgba(240,197,107,.55); background: rgba(240,197,107,.07); }
.wsa-part.ready .wsa-res{ background: var(--gold); color: #16140f; }
.wsa-part.ready .wsa-tag{ color: var(--gold); font-weight: 700; }
.wsa-rule{ margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; line-height: 1.6; max-width: 90ch; }

/* ============================================================
   Render Services — Connect an Engine / Get API Key (#6)
   ============================================================ */
.es-connect{ margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.es-how{ color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 88ch; margin: 10px 0; }
.es-how b{ color: var(--ink); font-weight: 700; }
.es-keygrid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 18px; }
.es-keycard{ display: flex; flex-direction: column; gap: 4px; text-decoration: none; border: 1px solid var(--line);
  border-radius: 11px; padding: 15px 16px 14px; background: rgba(255,255,255,.02);
  transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.es-keycard:hover{ transform: translateY(-3px); border-color: rgba(240,197,107,.7); background: rgba(240,197,107,.05); }
.es-kc-name{ font-weight: 800; color: var(--ink); font-size: 14px; }
.es-kc-meta{ font-size: 11px; color: var(--muted); }
.es-kc-where{ font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.es-kc-btn{ margin-top: 10px; align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 6px 14px; border-radius: 999px; background: var(--gold); color: #16140f; }
@media (prefers-reduced-motion: reduce){ .es-keycard{ transition: border-color .18s ease; } .es-keycard:hover{ transform: none; } }

/* ============================================================
   Story Bible sheet viewer — header alignment (#2) + frame-level L/P toggle (#1)
   ============================================================ */
.sb-viewer-actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* the "Open in new tab" <a> and the "Back" <button> share .proj-btn-ghost but rendered differently
   (link vs button) — normalize so they sit on the same line, same height, no underline */
.sb-viewer-actions .proj-btn-ghost{ display: inline-flex; align-items: center; line-height: 1.1; text-decoration: none; }
.sb-fmt{ display: inline-flex; gap: 4px; margin-right: 6px; }
.sb-fmt-btn{ font: inherit; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: background .15s ease, color .15s ease, border-color .15s ease; }
.sb-fmt-btn:hover{ border-color: rgba(240,197,107,.7); color: var(--gold); }
.sb-fmt-btn.active{ background: var(--ink); color: #fff; border-color: var(--ink); }
@media (prefers-reduced-motion: reduce){ .sb-fmt-btn{ transition: none; } }

/* Screenplay version "in use" badge (Projects → Screenplay detail → Version History).
   Marks which version is the active/shown text so the producer can tell versions apart. */
.proj-current-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #16140f;
  background: var(--gold);
  vertical-align: middle;
}

/* Screenplay detail preview: show the full script in a taller scroll box (the whole text is
   rendered now, not a 4,000-char snippet, so the producer can confirm the entire file loaded). */
.proj-script-preview pre { max-height: 460px; }

/* Team Brief — Access/permission column: widen role rows to 4 columns and style the
   access <select> to match the existing inputs. Appended (overrides the 3-col rule above). */
.brief-role-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr);
}
.brief-role-row select {
  font-size: 0.82rem;
  font-weight: 450;
  min-height: 36px;
  min-width: 0;
  padding: 8px 10px;
}
.studio .brief-role-row select {
  font-size: 11px;
  font-weight: 400;
  min-height: 30px;
  padding: 6px 8px;
}

/* File-menu "Saved ✓" confirmation flash on the autosave indicator. */
.autosave-indicator.is-saved { color: var(--gold); border-color: rgba(240, 197, 107, 0.5); }

/* Projects Home — episode "folder" rows. A Series (multi-episode project) shows a disclosure
   triangle and, when expanded, indented episode sub-rows, so the list stays compact. */
.proj-disclosure {
  background: transparent; border: 0; color: var(--gold); cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0 8px 0 0; width: 20px; text-align: left;
}
.proj-disclosure-spacer { display: inline-block; width: 20px; }
.proj-ep-count { color: var(--muted); font-size: 0.75rem; margin-left: 6px; }
.proj-episode-row td { background: rgba(255, 255, 255, 0.02); border-top: 0; }
.proj-episode-row .proj-ep-title { padding-left: 34px; color: var(--ink); position: relative; }
.proj-episode-row .proj-ep-title::before {
  content: "↳"; position: absolute; left: 14px; color: var(--muted);
}
.proj-parent-row.has-episodes > td { border-bottom: 0; }

/* Character cue: keep the name at the standard 3.7" position but let the LINE run to the
   right margin (like Action) so (V.O.) / (CONT'D) extensions don't wrap to the next line.
   (Was width:2.3in, which cut off ~23 chars and wrapped long names.) */
.writer-rich-line[data-element="Character"] { width: 3.8in; }


/* Story Engine proposals — the review layer inside the Story Database.
   Stage 2 proposes; nothing here is in the database until [Approve] is pressed. */
.sdb-review {
  align-items: center;
  background: rgba(240, 197, 107, 0.06);
  border: 1px solid rgba(240, 197, 107, 0.4);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 14px 16px;
}
.sdb-review-txt { flex: 1 1 380px; }
.sdb-review-txt h4 { color: var(--gold); margin: 2px 0 6px; }
.sdb-review-txt p { color: var(--muted); font-size: 0.8rem; margin: 0; }
.sdb-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sdb-approve { background: var(--gold); border-color: var(--gold); color: #16140f; }
/* Discard throws the whole proposal list away, so it must LOOK like a control you're about to
   press — transparent text read as a label, and got clicked by someone who thought it was one.
   Bordered and coral: clearly a button, clearly the destructive one, still not the default. */
.sdb-discard {
  background: transparent;
  border: 1px solid rgba(232, 122, 106, 0.55);
  color: var(--coral);
}
.sdb-discard:hover { background: rgba(232, 122, 106, 0.12); border-color: var(--coral); }

/* A proposed row reads as provisional — dashed left edge, never mistaken for a real record. */
.sdb-row.sdb-proposed { background: rgba(240, 197, 107, 0.04); }
.sdb-row.sdb-proposed td:first-child { box-shadow: inset 2px 0 0 rgba(240, 197, 107, 0.55); }
.sdb-status.proposed {
  background: rgba(240, 197, 107, 0.14);
  border: 1px dashed rgba(240, 197, 107, 0.6);
  border-radius: 5px;
  color: var(--gold);
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  text-transform: uppercase;
}
.sdb-drop {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 4px 7px;
}
.sdb-drop:hover { border-color: var(--coral); color: var(--coral); }

/* Character grouping — the ~29 surnames where the showrunner's knowledge is needed.
   Sits inside the same gold review frame as the Story Engine proposals. */
.sdb-review.sdb-groups { align-items: stretch; display: block; }
.sdb-review.sdb-locked { border-color: rgba(122, 214, 178, 0.4); background: rgba(122, 214, 178, 0.05); }
.sdb-review.sdb-locked h4 { color: var(--mint); }
.sdb-grp-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  margin-top: 14px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
}
.sdb-grp {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.sdb-grp-head {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
}
.sdb-grp-head strong { color: var(--gold); letter-spacing: 0.04em; }
.sdb-grp-head span { color: var(--muted); font-size: 0.7rem; }
.sdb-grp-member {
  align-items: baseline;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  padding: 4px 2px;
}
.sdb-grp-member:hover { background: rgba(255, 255, 255, 0.04); }
.sdb-grp-name { color: var(--ink); font-size: 0.8rem; }
.sdb-grp-eps { color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
/* The scene trace is the proof — full width under the name, quiet. */
.sdb-grp-scene {
  color: var(--muted);
  font-size: 0.64rem;
  grid-column: 2 / -1;
  opacity: 0.75;
}
.sdb-grp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sdb-grp-actions button { font-size: 0.7rem; padding: 5px 9px; }
.sdb-grp-actions .sdb-grp-sep { background: transparent; color: var(--muted); }
.sdb-grp-keep { font-size: 0.7rem; max-width: 150px; padding: 4px 6px; }
.sdb-grp-linked { color: var(--mint); font-size: 0.6rem; letter-spacing: 0.04em; }

/* Cast — the people, built from the dialogue the Story Engine read. */
.cast-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  margin-bottom: 14px;
}
.cast-sum-cell {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.cast-sum-cell .n { color: var(--gold); display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.cast-sum-cell .k { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
.cast-sum-cell.done .n { color: var(--mint); }

.cast-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cast-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 34px;
  padding: 8px 12px;
}
.cast-row:last-child { border-bottom: 0; }
.cast-row.cast-head {
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* A cast part reads green the same way an approved asset does — one glance, who's left. */
.cast-row.is-cast { box-shadow: inset 3px 0 0 var(--mint); }
.cast-role { display: grid; gap: 2px; grid-template-columns: auto 1fr auto; align-items: baseline; }
.cast-name { color: var(--ink); font-size: 0.86rem; }
.cast-weight { color: var(--muted); font-size: 0.68rem; white-space: nowrap; }
.cast-variants {
  color: var(--mint);
  font-size: 0.62rem;
  grid-column: 2 / -1;
  letter-spacing: 0.04em;
}
.cast-scene { color: var(--muted); font-size: 0.62rem; grid-column: 1 / -1; opacity: 0.7; }
.cast-tier {
  border-radius: 4px;
  /* Pin to its own text. The scene trace spans every column and pushes the auto columns wider,
     which would otherwise stretch this badge to match the row above it. */
  justify-self: start;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  text-transform: uppercase;
}
.cast-tier.lead { background: var(--gold); color: #16140f; }
.cast-tier.supporting { background: rgba(240, 197, 107, 0.22); color: var(--gold); }
.cast-tier.small { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.cast-tier.oneline { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.cast-in { font-size: 0.76rem; padding: 5px 7px; width: 100%; }
.cast-clear {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 4px 6px;
}
.cast-clear:hover { border-color: var(--coral); color: var(--coral); }
.cast-more { margin-top: 10px; }
.cast-more button { font-size: 0.72rem; }
.cast-credits { margin-top: 22px; }
.cast-credits-out {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.7;
  margin: 0;
  overflow-x: auto;
  padding: 14px 16px;
  white-space: pre;
}

/* Master Show List — every item down the side, every story across the top. */
.sdb-tab-master { border-color: rgba(240, 197, 107, 0.5); color: var(--gold); }
.mst-table th.mst-ep, .mst-table td.mst-cell, .mst-table .mst-total {
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.mst-table th.mst-ep { min-width: 54px; }
.mst-table .mst-total span { color: var(--muted); font-size: 0.6rem; font-weight: 400; }
.mst-table td.mst-total { color: var(--gold); font-weight: 600; }
.mst-table td.mst-cell { color: var(--muted); }
/* A cell with a number is a fact; an empty one is a fact too. Weight the ink accordingly. */
.mst-table td.mst-cell.has { background: rgba(240, 197, 107, 0.09); color: var(--ink); }
.mst-table td.mst-name { color: var(--ink); }
.mst-table td.mst-id { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.mst-group td {
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.mst-group strong { color: var(--gold); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; }
.mst-group span { color: var(--muted); font-size: 0.68rem; margin-left: 10px; }
/* Nothing in any script asks for this item — worth seeing, not worth shouting about. */
.mst-row.mst-orphan td.mst-name, .mst-row.mst-orphan td.mst-id { opacity: 0.45; }

/* Sketch vs episode — a placeholder isn't a script yet, and WALT should say which. */
.proj-ep-stage {
  border-radius: 4px;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  margin-left: 8px;
  padding: 2px 6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.proj-ep-stage.sketch { background: rgba(240, 197, 107, 0.16); color: var(--gold); }
.proj-ep-stage.empty { border: 1px solid var(--line); color: var(--muted); }
.proj-ep-stage.full { color: var(--muted); opacity: 0.7; }
/* An un-written episode's column is greyed so a blank there reads as "nothing yet", not "missed". */
.mst-table th.mst-ep-sketch { opacity: 0.5; }
.mst-table th.mst-ep-sketch .mst-ep-tag {
  color: var(--muted);
  display: block;
  font-size: 0.54rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* The delete-approval window sits HIGH, not dead-centre. It's the tallest dialog in the app
   (type-the-name-to-confirm), so centring pushes the heading and the name you must match down
   the screen. Anchored near the top, the whole decision is visible at once — and the one dialog
   you should read before clicking is the one you shouldn't have to hunt for.
   :has() targets the delete form only; every other modal stays centred. */
.proj-modal:has(#deleteAuthForm),
.proj-modal:has([data-action="del-step2"]) {
  max-height: 82vh;
  top: 8vh;
  transform: translate(-50%, 0);
}
/* Undo a mis-clicked ✕. Reads as a way back, not a primary action. */
.sdb-undo {
  background: transparent;
  border: 1px solid rgba(240, 197, 107, 0.45);
  color: var(--gold);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdb-undo:hover { background: rgba(240, 197, 107, 0.12); }
.sdb-undo-n { color: var(--muted); font-size: 0.7em; }

/* Master Show List — mark a duplicate, then Remove duplicates. */
.mst-mark {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--coral);
  cursor: pointer;
  font-size: 0.72rem;
  height: 20px;
  line-height: 1;
  padding: 0;
  width: 20px;
}
.mst-mark:hover { border-color: var(--coral); }
.mst-mark.on { background: var(--coral); border-color: var(--coral); color: #16140f; }
.mst-row.mst-marked { opacity: 0.55; }
.mst-row.mst-dup .mst-name { color: var(--gold); }
.mst-dup-tag {
  border: 1px solid rgba(240, 197, 107, 0.5);
  border-radius: 4px;
  color: var(--gold);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  padding: 1px 4px;
}
.mst-bible.green { color: var(--mint); }
.mst-bible.red { color: rgba(232, 122, 106, 0.5); }
.mst-remove-dupes {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
}
.mst-remove-dupes.armed { background: var(--coral); border-color: var(--coral); color: #16140f; }
.mst-remove-dupes[disabled] { cursor: default; opacity: 0.5; }
.mst-linked { color: var(--mint); font-size: 0.58rem; letter-spacing: 0.03em; }
.proj-newproj-upload input[type="file"] { margin-top: 4px; }
.proj-newproj-upload .proj-note { display: block; margin-top: 4px; }
.proj-desc-short { min-height: 3.2em !important; height: 3.2em; max-height: 3.2em; resize: vertical; }

/* Keep edit/settings forms compact so their Save/Approve buttons never get pushed off-screen by
   a tall Notes/Description box. Applies inside project modals and the Settings/Screenplay forms. */
.proj-modal textarea,
#projSettingsForm textarea,
#editScreenplayForm textarea {
  min-height: 3.4em !important;
  max-height: 6.5em;
  resize: vertical;
}
/* And keep any project modal itself from exceeding the viewport, so its footer buttons show. */
.proj-modal { max-height: 88vh; overflow-y: auto; }

/* Screenplay lock — one toggle. Green = editable, red = locked/frozen. (Michael's model.) */
.proj-lock-toggle { border-radius: 8px; cursor: pointer; font-weight: 600; }
.proj-lock-toggle.unlocked { background: rgba(122, 214, 178, 0.16); border: 1px solid var(--mint); color: var(--mint); }
.proj-lock-toggle.unlocked:hover { background: rgba(122, 214, 178, 0.26); }
.proj-lock-toggle.locked { background: rgba(232, 122, 106, 0.18); border: 1px solid var(--coral); color: var(--coral); }
.proj-lock-toggle.locked:hover { background: rgba(232, 122, 106, 0.28); }
/* Generate SIE is always present; it lights up once the script is locked. */
.proj-generate-sie.lit { background: var(--gold); border-color: var(--gold); color: #16140f; box-shadow: 0 0 0 1px rgba(240,197,107,0.5); }
/* Breathing room between the column explanation and the asset table below it. */
.sdb-note + .proj-table-wrap { margin-top: 16px; }

/* The Story Database's modal layer (Import Bible / "I already have artwork") had no positioning,
   so the popup rendered inline off-screen while its backdrop dimmed the page. Make it a real
   fixed overlay like the Projects modal layer. */
.story-database-modal-layer {
  inset: 0;
  position: fixed;
  z-index: 60;
}
.story-database-modal-layer.hidden { display: none; }

/* How WALT Works — prose explainer blocks (Character Sheets vs Story Bible, order of work). */
.walt-explainer {
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 22px 0;
  padding: 22px 26px;
}
.walt-explainer .eyebrow { margin: 0 0 4px; }
.walt-explainer h3 { margin: 0 0 12px; }
.walt-explainer p { color: var(--muted); line-height: 1.65; margin: 0 0 12px; max-width: 68ch; }
.walt-explainer p:last-child { margin-bottom: 0; }

/* How WALT Works — the Status ladder (Cataloged → … → Locked). */
.wsl-steps { list-style: none; margin: 16px 0 0; padding: 0; }
.wsl-step { align-items: flex-start; display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.wsl-step:first-child { border-top: 0; }
.wsl-step strong { color: var(--ink); display: block; margin-bottom: 4px; }
.wsl-step p { color: var(--muted); line-height: 1.6; margin: 0; max-width: 64ch; }
.wsl-dot { border-radius: 50%; flex: 0 0 auto; height: 14px; margin-top: 4px; width: 14px; }
.wsl-red .wsl-dot { background: var(--coral); box-shadow: 0 0 0 3px rgba(232,122,106,0.18); }
.wsl-green .wsl-dot { background: var(--mint); box-shadow: 0 0 0 3px rgba(122,214,178,0.18); }
.wsl-summary { color: var(--gold); font-weight: 600; margin-top: 16px; }

/* How WALT Works — the character-description prompt card. */
.walt-charprompt .wcp-card {
  background: rgba(240, 197, 107, 0.06);
  border: 1px solid rgba(240, 197, 107, 0.35);
  border-radius: 10px;
  margin-top: 14px;
  padding: 16px 18px;
}
.wcp-kicker { color: var(--gold); font-size: 0.72rem; letter-spacing: 0.06em; margin: 0 0 10px; text-transform: uppercase; }
.wcp-fields { display: grid; gap: 8px; margin: 0; }
.wcp-fields > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; }
.wcp-fields dt { color: var(--ink); font-weight: 700; letter-spacing: 0.04em; margin: 0; }
.wcp-fields dd { color: var(--muted); margin: 0; }

/* "NEW CHARACTER" chip — like the BEAT chip but gold, so a new-character prompt stands out. */
.writer-scrap-charchip {
  background: var(--gold);
  border-radius: 3px;
  color: #16140f;
  flex: 0 0 auto;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-left: 6px;
  padding: 1px 4px;
  white-space: nowrap;
}

/* --- Cloud login: inline message + secondary (create account) button --- */
.login-form .login-msg{ margin:6px 0 0; min-height:1.1em; font-size:12px; letter-spacing:.01em; color:var(--coral); }
.login-form .login-secondary{ margin-top:8px; background:transparent; border:1px solid var(--line); color:var(--muted); }
.login-form .login-secondary:hover{ border-color:var(--gold); color:var(--ink); }

/* --- Cloud identity + logout in the sidebar role-box --- */
.role-box .cloud-user{ display:block; font-size:11px; color:var(--gold); font-weight:600; letter-spacing:.01em; word-break:break-all; margin-bottom:2px; }
.role-box .cloud-user:empty{ display:none; }
.role-box .cloud-logout{ display:inline-block; margin-top:8px; padding:4px 12px; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:6px; cursor:pointer; transition:border-color .18s, color .18s; }
.role-box .cloud-logout:hover{ border-color:var(--coral); color:var(--coral); }

/* --- Settings nav gear (matches the illustrated nav icons' slot) --- */
.step[data-icon="settings"]::before {
  background-image: url("assets/brand/workflow-icons/gear.png");
}

/* --- Settings / Admin overlay --- */
.walt-settings-backdrop{ position:fixed; inset:0; background:rgba(6,6,8,.66); z-index:9000; display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px; }
.walt-settings{ width:min(680px,94vw); background:var(--panel,#151318); border:1px solid var(--line); border-radius:14px; padding:26px 28px; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.walt-settings h2{ margin:0 0 4px; font-size:20px; letter-spacing:.02em; }
.walt-settings .ws-sub{ margin:0 0 20px; color:var(--muted); font-size:12.5px; }
.walt-settings .ws-close{ float:right; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:4px 12px; cursor:pointer; }
.walt-settings .ws-close:hover{ border-color:var(--gold); color:var(--ink); }
.walt-settings .ws-section-title{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.ws-user{ display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; }
.ws-user .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.16); }
.ws-user.online .dot{ background:#37c26a; box-shadow:0 0 0 3px rgba(55,194,106,.18); }
.ws-user .ws-email{ font-weight:600; font-size:13px; }
.ws-user .ws-role{ margin-left:auto; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.ws-user .ws-status{ font-size:11px; color:var(--muted); }

/* --- Standardized Story Database grid: fixed layout so columns never shift between drawers --- */
.sdb-asset-table { table-layout: fixed; }
.sdb-asset-table .sdb-val { min-width: 0; overflow-wrap: anywhere; }

/* --- STORY LAB: reference images that help build the Story Bible --- */
.sdb-lab{ min-height:28px; padding:0 10px; font-size:13px; border-radius:20px; border:1px solid var(--line);
  background:transparent; color:var(--dim); cursor:pointer; transition:border-color .18s, color .18s; }
.sdb-lab:hover{ border-color:var(--gold); color:var(--gold); }
.sdb-lab.has{ border-color:rgba(134,213,193,.45); color:var(--mint); }
.sdb-lab .lab-count{ font-size:11px; font-weight:700; }
.sdb-tab-lab.active{ border-color:var(--gold); }

.walt-lab{ width:min(860px,94vw); }
.lab-drop{ margin:6px 0 14px; padding:34px 18px; text-align:center; cursor:pointer;
  border:2px dashed var(--line); border-radius:14px; color:var(--muted); font-size:13px; letter-spacing:.01em;
  transition:border-color .18s, background .18s, color .18s; }
.lab-drop:hover, .lab-drop:focus, .lab-drop.over{ border-color:var(--gold); color:var(--ink); background:rgba(240,197,107,.06); outline:none; }
.lab-status{ margin:0 0 10px; min-height:1.1em; font-size:12px; color:var(--gold); }

.lab-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.lab-thumb{ position:relative; margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(255,255,255,.03); }
.lab-thumb img{ display:block; width:100%; height:118px; object-fit:cover; }
.lab-thumb figcaption{ padding:5px 7px; font-size:10.5px; color:var(--muted); letter-spacing:.02em; }
.lab-x{ position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:rgba(10,10,12,.72); color:var(--muted); font-size:11px; line-height:1; }
.lab-x:hover{ border-color:var(--coral); color:var(--coral); }
.lab-assign{ display:flex; gap:6px; padding:0 7px 7px; }
.lab-assign button[data-lab-action="assign"]{ flex:1; padding:5px 8px; font-size:11px; border-radius:7px;
  border:1px solid var(--line); background:transparent; color:var(--gold); cursor:pointer; }
.lab-assign button[data-lab-action="assign"]:hover{ border-color:var(--gold); background:rgba(240,197,107,.1); }
.lab-assign .lab-x{ position:static; }
.lab-tray .lab-thumb img{ height:150px; object-fit:contain; background:#0d0f12; }

/* --- Story Lab camera icon (Michael's illustrated camera) --- */
.lab-ico{ display:inline-block; width:22px; height:22px; vertical-align:-5px;
  background:url("assets/brand/workflow-icons/camera.png") center/contain no-repeat; }
.lab-ico-lg{ width:30px; height:30px; vertical-align:-7px; margin-right:4px; }
.sdb-lab{ display:inline-flex; align-items:center; gap:5px; }

/* Story Database — FILE menu: one control answering "where does this belong, or nowhere".
   Built from the drawers this project actually has, with [X] as the last option. Styled to
   match .sdb-status / .sdb-toggle so the control lane stays one visual family. */
.sdb-refile {
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  /* Match .sdb-status / .sdb-toggle exactly so the control lane reads as one family. */
  font-size: 12px;
  font-weight: 650;
  min-height: 28px;
  letter-spacing: 0.02em;
  padding: 0 8px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.sdb-refile:hover { border-color: rgba(240, 197, 107, 0.7); color: var(--ink); }
.sdb-refile:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sdb-refile option { background: var(--panel); color: var(--ink); }

/* The ON toggle and the ✕ share one cell and were touching. Space them, and let the pair wrap
   instead of crushing when the column is narrow. */
.sdb-ctrl .sdb-toggle + .sdb-drop { margin-left: 8px; }
.sdb-ctrl { white-space: nowrap; }
.sdb-ctrl .sdb-drop { min-height: 28px; padding: 0 9px; border-radius: 20px; }

/* SIE · SEARCH FOR — the helping hand. Sits on the Story Database index, styled from the
   existing panel/pill vocabulary so it reads as part of the app, not a bolted-on form. */
.sdb-search {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px 12px;
  margin: 0 0 18px;
  background: rgba(240, 197, 107, 0.04);
}
.sdb-search .eyebrow { display: block; margin: 0 0 8px; }
.sdb-search-row { display: flex; gap: 10px; align-items: center; }
.sdb-search-input {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #10141a;
  color: var(--ink);
}
.sdb-search-input:focus { outline: 2px solid rgba(240, 197, 107, 0.5); outline-offset: -1px; }
.sdb-search-go {
  min-height: 34px;
  padding: 0 18px;
  font-size: 12px;
  font-weight: 650;
  border-radius: 20px;
  border: 1px solid rgba(240, 197, 107, 0.5);
  background: rgba(240, 197, 107, 0.12);
  color: var(--gold);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.sdb-search-go:hover { background: rgba(240, 197, 107, 0.22); border-color: rgba(240, 197, 107, 0.8); }
.sdb-search-note { margin-top: 10px; }
.sdb-search-chip {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.sdb-search-chip:hover { border-color: rgba(240, 197, 107, 0.7); color: var(--gold); }
/* Chips are small pills, not full-height buttons — override the global button min-height. */
.sdb-search-chip { min-height: 0; line-height: 1.5; }

/* SHORT SELECTS — the global select caret sits 18px from the top, which is right for a 42px
   control and clipped out of sight on a short one. With no caret a dropdown reads as a button:
   Michael clicked the keep-name control expecting it to DO something, when it only chooses which
   cue survives the fold. Centre the caret and give these a field-like ground so a menu looks
   like a menu next to the real buttons beside it. */
.sdb-grp-keep,
.sdb-refile {
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px;
  padding-right: 26px;
  background-color: rgba(0, 0, 0, 0.28);
}
.sdb-grp-keep {
  min-height: 28px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--ink);
}
.sdb-grp-keep:hover,
.sdb-refile:hover { border-color: rgba(240, 197, 107, 0.7); }
/* The File menu holds real words ("Characters", "Locations"), not a two-letter code, and the
   caret padding eats another 26px — so it was clipping to "Charac". Tighter caret gutter, and
   never let the longest drawer name wrap or truncate. */
.sdb-refile { padding-right: 22px; padding-left: 9px; text-overflow: ellipsis; }

/* Story Lab column — the count used to sit INSIDE the pill, so a row with images made a wider
   button than a row without and the control lane looked ragged down the table. The button is now
   a fixed size whatever the count, with the number riding on the corner of the icon as a badge.
   Same width with 0 images or 200, so the grid never shifts. */
.sdb-lab {
  position: relative;
  width: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.sdb-lab .lab-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--mint);
  color: #10141a;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--panel);
}
/* the cell needs room for a badge that overhangs the button */
.sdb-table td.sdb-ctrl { overflow: visible; }