/* KizerWrite — the page on the desk.
   Chrome is night-operations navy; the manuscript is a warm sheet of paper.
   One accent (signal amber) marks focus, the current scene, and note highlights. */
:root {
  --desk: #161d29;
  --panel: #1d2634;
  --raised: #283346;
  --line: #36435c;
  --line-soft: #2a3548;
  --text: #e3e8f1;
  --muted: #95a2b9;
  --faint: #6f7d95;
  --amber: #e5ad4a;
  --brand-1: #3FA9FF;
  --brand-2: #4A5BF0;
  --brand-3: #8A3FF5;
  --brand-grad: linear-gradient(100deg, var(--brand-1), var(--brand-2) 50%, var(--brand-3));
  --amber-soft: rgba(229, 173, 74, .16);
  --danger: #e2786b;
  --ok: #8cc9a0;
  --paper: #fbf9f4;
  --paper-ink: #1f1d1a;
  --paper-edge: #e7e1d4;
  --highlight: rgba(229, 173, 74, .34);
  --ui: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --display: Bahnschrift, "DIN Alternate", "Segoe UI Semibold", system-ui, sans-serif;
  --radius-s: 4px;
  --radius-m: 7px;
  --binder-w: clamp(230px, 17vw, 290px);
  --inspector-w: clamp(320px, 24vw, 420px);
  --header-h: 50px;
  font-size: clamp(13px, .45vw + 7.5px, 15px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--desk); color: var(--text); font-family: var(--ui); }
body { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: var(--amber-soft); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- buttons & inputs ---------- */
.btn { border: 1px solid var(--line); background: var(--raised); border-radius: var(--radius-s); padding: .38rem .7rem; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.btn:hover { border-color: #4c5c7a; background: #2f3b51; }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #20180a; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--text); background: var(--raised); }
.btn.danger { color: var(--danger); }
.btn.icon { padding: .32rem .5rem; min-width: 2rem; }
.btn[aria-pressed="true"] { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.btn:disabled { opacity: .45; cursor: default; }
input[type=text], input[type=number], input[type=search], select, textarea {
  width: 100%; background: var(--desk); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .42rem .55rem;
}
input:hover, select:hover, textarea:hover { border-color: #46557233; border-color: #465572; }
input:focus, select:focus, textarea:focus { border-color: var(--amber); outline: none; }
textarea { resize: vertical; line-height: 1.45; min-height: 2.2rem; }
label { display: block; }

/* ---------- app frame ---------- */
.app { display: grid; grid-template-rows: var(--header-h) minmax(0, 1fr); height: 100vh; overflow: hidden; }
#main { min-height: 0; overflow: hidden; }
#main > .workspace { height: 100%; }
.topbar { display: flex; align-items: center; gap: 1.2rem; padding: 0 .9rem; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; }
.book-title { font-family: var(--display); font-size: 1.08rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.views { display: flex; gap: .15rem; height: 100%; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.views a { display: flex; align-items: center; padding: 0 .75rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.views a:hover { color: var(--text); }
.views a.active { color: var(--text); border-bottom-color: var(--amber); }
.views a.soon { color: var(--faint); cursor: default; }
.views a.soon small { margin-left: .35rem; font-size: .72rem; color: var(--faint); }
.topbar .spacer { flex: 1; }
.save-state { color: var(--muted); font-size: .86rem; white-space: nowrap; }
.save-state.err { color: var(--danger); }
.book-words { color: var(--muted); font-size: .86rem; white-space: nowrap; }

.workspace { display: grid; grid-template-columns: var(--binder-w) minmax(0, 1fr) var(--inspector-w); min-height: 0; }
.workspace.no-binder { grid-template-columns: 0 minmax(0, 1fr) var(--inspector-w); }
.workspace.no-inspector { grid-template-columns: var(--binder-w) minmax(0, 1fr) 0; }
.workspace.no-binder.no-inspector { grid-template-columns: 0 minmax(0, 1fr) 0; }
.workspace.no-binder .binder, .workspace.no-inspector .inspector { visibility: hidden; }

/* ---------- binder ---------- */
.binder { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.binder-tools { padding: .7rem .7rem .5rem; display: grid; gap: .45rem; border-bottom: 1px solid var(--line-soft); }
.binder-tools .row { display: flex; gap: .4rem; }
.binder-list { overflow-y: auto; padding: .3rem 0 2rem; flex: 1; }
.chapter { margin-top: .35rem; }
.chapter-head { display: flex; align-items: baseline; gap: .4rem; padding: .35rem .75rem .25rem; color: var(--muted); cursor: pointer; user-select: none; }
.chapter-head:hover { color: var(--text); }
.chapter-head .name { font-family: var(--display); font-size: .95rem; color: var(--text); }
.chapter-head .count { font-size: .78rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.chapter-head .caret { width: .8rem; color: var(--faint); transition: transform .12s; }
.chapter.collapsed .caret { transform: rotate(-90deg); }
.chapter.collapsed .scene-row { display: none; }
.chapter-head.drop-into { background: var(--amber-soft); }
.scene-row { display: grid; grid-template-columns: minmax(2.6rem, max-content) minmax(0, 1fr) auto; gap: .1rem .4rem; align-items: baseline; padding: .32rem .75rem .32rem 1rem; cursor: pointer; border-left: 3px solid transparent; }
.scene-row:hover { background: var(--raised); }
.scene-row.current { background: #253047; border-left-color: var(--amber); }
.scene-row .lbl { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .84rem; }
.scene-row .ttl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-row .wc { color: var(--faint); font-size: .78rem; font-variant-numeric: tabular-nums; }
.scene-row .tags { grid-column: 2 / 4; color: var(--faint); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-row.drop-before { box-shadow: inset 0 2px 0 var(--amber); }
.scene-row.drop-after { box-shadow: inset 0 -2px 0 var(--amber); }
.scene-row.dragging { opacity: .4; }
.binder-foot { border-top: 1px solid var(--line-soft); padding: .55rem .7rem; display: flex; gap: .4rem; }

/* ---------- writing desk ---------- */
.desk { overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.desk-scroll { overflow-y: auto; flex: 1; padding: 0 clamp(.8rem, 3vw, 3rem) 30vh; }
.scene-head { max-width: var(--page-w, 52rem); margin: 0 auto; padding: 1.6rem 0 .9rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: end; }
.scene-head .where { color: var(--muted); font-size: .9rem; }
.scene-head .where b { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.scene-title { grid-column: 1; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem); line-height: 1.12; background: transparent; border: 0; padding: 0; width: 100%; letter-spacing: .005em; }
.scene-title:focus { outline: none; box-shadow: 0 2px 0 var(--amber); }
.scene-head .counts { grid-column: 2; grid-row: 1 / 3; text-align: right; color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; line-height: 1.5; }
.scene-head .counts strong { color: var(--text); font-size: 1.15rem; font-weight: 600; }

.toolbar { position: sticky; top: 0; z-index: 5; max-width: var(--page-w, 52rem); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .45rem 0; background: var(--desk); border-bottom: 1px solid var(--line-soft); }
.toolbar .sep { width: 1px; align-self: stretch; background: var(--line); margin: .15rem .25rem; }
.toolbar .btn { padding: .3rem .55rem; }
.toolbar .grow { flex: 1; }
.toolbar select { width: auto; padding: .28rem .4rem; }

.page { max-width: var(--page-w, 52rem); margin: 1.1rem auto 0; background: var(--paper); color: var(--paper-ink); border-radius: 2px;
  box-shadow: 0 1px 0 var(--paper-edge), 0 18px 40px -18px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .3);
  padding: clamp(2rem, 6%, 4.5rem) clamp(1.6rem, 9%, 5.5rem) 5rem; }
.manuscript { outline: none; min-height: 60vh; font-family: var(--ms-font, Garamond, "EB Garamond", Georgia, serif); font-size: var(--ms-size, 12pt);
  line-height: var(--ms-spacing, 1.5); hyphens: manual; overflow-wrap: break-word; caret-color: #8a5a00; }
.manuscript p { margin: 0; text-indent: var(--ms-indent, .5in); }
.manuscript p.center { text-align: center; text-indent: 0; }
.manuscript p.right { text-align: right; text-indent: 0; }
.manuscript p.scene-break { text-align: center; text-indent: 0; margin: .8em 0; letter-spacing: .5em; color: #6b655a; user-select: none; }
.manuscript:empty::before { content: "Start writing this scene."; color: #a29a8c; font-style: italic; }
.manuscript span[data-note] { background: var(--highlight); border-bottom: 2px solid #c98a1c; cursor: pointer; border-radius: 1px; }
.manuscript span[data-note].flash { background: #f6c55e; }
.manuscript span[data-note].resolved { background: transparent; border-bottom: 1px dotted #b7a585; }
.page-foot { max-width: var(--page-w, 52rem); margin: .7rem auto 0; color: var(--faint); font-size: .82rem; display: flex; justify-content: space-between; gap: 1rem; }

/* ---------- inspector ---------- */
.inspector { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 .4rem; flex-shrink: 0; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .7rem .7rem .55rem; color: var(--muted); cursor: pointer; }
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--text); border-bottom-color: var(--amber); }
.tabs .count { font-size: .76rem; color: var(--faint); margin-left: .25rem; }
.tab-body { overflow-y: auto; flex: 1; padding: .2rem 0 3rem; }

.storyboard { position: relative; margin: .8rem .9rem .3rem; border-radius: var(--radius-m); overflow: hidden; background: #0f141d; aspect-ratio: 16 / 10; display: grid; place-items: center; }
.storyboard img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.storyboard .empty { color: var(--faint); font-size: .88rem; text-align: center; padding: 1rem; }
.storyboard .over { position: absolute; inset: auto .45rem .45rem auto; display: flex; gap: .3rem; }
.storyboard .over .btn { background: rgba(22, 29, 41, .82); border-color: transparent; font-size: .82rem; backdrop-filter: blur(4px); }

.group { border-bottom: 1px solid var(--line-soft); }
.group > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .45rem; padding: .7rem .95rem .55rem; font-family: var(--display); font-size: 1rem; }
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before { content: "▸"; color: var(--faint); font-size: .8rem; transition: transform .12s; display: inline-block; }
.group[open] > summary::before { transform: rotate(90deg); }
.group > summary .peek { margin-left: auto; color: var(--faint); font-family: var(--ui); font-size: .8rem; }
.group-body { padding: 0 .95rem .8rem; display: grid; gap: .75rem; }

.field > .flabel { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-size: .84rem; margin-bottom: .25rem; }
.field > .flabel .saved { color: var(--ok); font-size: .76rem; opacity: 0; transition: opacity .3s; }
.field > .flabel .saved.on { opacity: 1; }
.field.inline { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.field.inline > .flabel { margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); background: var(--desk); border-radius: 999px; padding: .16rem .55rem; font-size: .86rem; }
.chip.on { border-color: var(--amber); background: var(--amber-soft); color: #f3cf8b; }
button.chip { cursor: pointer; }
button.chip:not(.on) { color: var(--muted); }
.chip .x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0 0 0 .1rem; }
.chip .x:hover { color: var(--danger); }

.list-items { display: grid; gap: .35rem; counter-reset: beat; }
.list-item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .35rem; align-items: start; }
.list-item::before { counter-increment: beat; content: counter(beat); color: var(--faint); font-variant-numeric: tabular-nums; text-align: right; padding-top: .45rem; font-size: .85rem; }
.list-item .acts { display: flex; flex-direction: column; opacity: .25; }
.list-item:hover .acts, .list-item:focus-within .acts { opacity: 1; }
.list-item .acts button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 .2rem; line-height: 1.1; }
.list-item .acts button:hover { color: var(--text); }

.link-item { border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: .45rem .55rem; display: grid; gap: .35rem; background: rgba(15, 20, 29, .35); }
.link-item .top { display: flex; align-items: center; gap: .45rem; }
.link-item .avatar { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; background: var(--raised); flex-shrink: 0; display: grid; place-items: center; color: var(--faint); font-size: .8rem; }
.link-item .name { font-weight: 600; }
.link-item .top .x { margin-left: auto; }
.links { display: grid; gap: .4rem; }

/* notes */
.note { margin: .55rem .9rem; border-left: 3px solid var(--amber); background: rgba(15, 20, 29, .4); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: .55rem .7rem; display: grid; gap: .35rem; }
.note.resolved { border-left-color: var(--line); opacity: .7; }
.note.event { border-left-color: #7fb3e8; }
.note .meta { display: flex; gap: .5rem; color: var(--faint); font-size: .78rem; align-items: baseline; }
.note .meta .kind { color: var(--muted); }
.note blockquote { margin: 0; color: var(--muted); font-style: italic; font-size: .88rem; border: 0; }
.note .body { white-space: pre-wrap; }
.note .acts { display: flex; gap: .3rem; flex-wrap: wrap; }
.note.active { box-shadow: 0 0 0 1px var(--amber); }
.note .warn { color: var(--danger); font-size: .8rem; }
.tab-intro { color: var(--muted); font-size: .86rem; padding: .8rem .95rem .2rem; line-height: 1.45; }

/* history */
.rev { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .1rem .5rem; padding: .55rem .95rem; border-bottom: 1px solid var(--line-soft); cursor: pointer; align-items: baseline; }
.rev:hover { background: var(--raised); }
.rev .v { color: var(--muted); font-variant-numeric: tabular-nums; }
.rev .what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev .when { grid-column: 2 / 4; color: var(--faint); font-size: .8rem; }
.rev .w { color: var(--faint); font-size: .8rem; font-variant-numeric: tabular-nums; }
.badge { font-size: .72rem; padding: .05rem .4rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); margin-left: .35rem; }
.badge.manual { border-color: var(--amber); color: var(--amber); }

/* ---------- overlays ---------- */
.scrim { position: fixed; inset: 0; background: rgba(8, 11, 17, .62); z-index: 50; display: grid; place-items: center; padding: 1rem; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.modal.wide { width: min(900px, 100%); }
.modal header { padding: 1rem 1.1rem .4rem; font-family: var(--display); font-size: 1.2rem; }
.modal .mbody { padding: .4rem 1.1rem 1rem; overflow-y: auto; display: grid; gap: .8rem; }
.modal footer { padding: .8rem 1.1rem; border-top: 1px solid var(--line-soft); display: flex; gap: .5rem; justify-content: flex-end; }
.modal .hint { color: var(--muted); font-size: .88rem; line-height: 1.45; margin: 0; }
.preview-page { background: var(--paper); color: var(--paper-ink); padding: 1.6rem 2rem; font-family: Garamond, Georgia, serif; font-size: 12pt; line-height: 1.5; border-radius: 2px; }
.preview-page p { margin: 0; text-indent: .5in; }
.preview-page p.center, .preview-page p.scene-break { text-align: center; text-indent: 0; }

.popover { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); width: 300px; max-height: 360px; display: flex; flex-direction: column; }
.popover input { border: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius-m) var(--radius-m) 0 0; background: transparent; padding: .6rem .7rem; }
.popover .opts { overflow-y: auto; padding: .25rem 0; }
.popover .opt { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: 0; padding: .42rem .75rem; cursor: pointer; }
.popover .opt:hover, .popover .opt.hi { background: var(--raised); }
.popover .opt .sub { color: var(--faint); font-size: .8rem; margin-left: auto; }
.popover .opt.create { color: var(--amber); }
.lightbox { position: fixed; inset: 0; background: rgba(5, 7, 11, .94); z-index: 70; display: grid; place-items: center; cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 90vh; object-fit: contain; }
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: var(--raised); border: 1px solid var(--line); padding: .6rem 1rem; border-radius: var(--radius-m); z-index: 80; box-shadow: 0 10px 30px -10px #000; max-width: 90vw; }
.toast.err { border-color: var(--danger); }

/* ---------- settings & full pages ---------- */
.fullpage { height: 100%; overflow-y: auto; padding: 1.6rem clamp(1rem, 4vw, 3rem) 4rem; }
.fullpage .inner { max-width: 62rem; margin: 0 auto; }
.fullpage h1 { font-family: var(--display); font-weight: 600; font-size: 1.9rem; margin: 0 0 .3rem; }
.fullpage h2 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; margin: 2rem 0 .5rem; }
.fullpage .lede { color: var(--muted); max-width: 60ch; line-height: 1.5; margin: 0 0 1rem; }
.subnav { display: flex; gap: .3rem; margin: 1rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.subnav a { padding: .5rem .8rem; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a.active { color: var(--text); border-bottom-color: var(--amber); }
.panel-group { margin-bottom: 1.4rem; }
.panel-group > .ptitle { display: flex; align-items: baseline; gap: .6rem; font-family: var(--display); font-size: 1.05rem; padding: .4rem 0; color: var(--muted); }
.frow { display: grid; grid-template-columns: 1.4rem minmax(9rem, 1.4fr) minmax(8rem, 1fr) minmax(0, 2fr) auto; gap: .6rem; align-items: center; padding: .55rem .6rem; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--panel); margin-bottom: .35rem; }
.frow .grip { color: var(--faint); cursor: grab; text-align: center; user-select: none; }
.frow .fname { font-weight: 600; }
.frow .ftype { color: var(--muted); font-size: .88rem; }
.frow .fdetail { color: var(--faint); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow.drop-before { box-shadow: 0 -2px 0 var(--amber); }
.frow.dragging { opacity: .4; }
.opt-editor { display: grid; gap: .3rem; }
.opt-editor .orow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .3rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.form-grid .full { grid-column: 1 / -1; }
.checkline { display: flex; gap: .5rem; align-items: center; color: var(--muted); }
.checkline input { width: auto; }
.import-card { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--panel); display: grid; gap: .6rem; }
.import-card h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.report { background: var(--desk); border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: .8rem 1rem; font-size: .9rem; line-height: 1.5; }
.report ul { margin: .3rem 0; padding-left: 1.2rem; }
.welcome { max-width: 38rem; margin: 12vh auto; padding: 0 1rem; }
.welcome h1 { font-family: var(--display); font-size: 2.4rem; margin: 0 0 .5rem; }

/* ---------- responsive: laptop & small screens ---------- */
.only-narrow { display: none !important; }
@media (max-width: 1380px) {
  :root { --inspector-w: clamp(300px, 27vw, 360px); --binder-w: 240px; }
}
@media (max-width: 1180px) {
  .workspace, .workspace.no-inspector, .workspace.no-binder, .workspace.no-binder.no-inspector { grid-template-columns: minmax(0, 1fr); }
  .binder, .inspector { position: fixed; top: var(--header-h); bottom: 0; z-index: 40; box-shadow: 0 0 60px rgba(0, 0, 0, .6); transition: transform .18s ease; visibility: visible !important; }
  .binder { left: 0; width: min(300px, 86vw); transform: translateX(-102%); }
  .inspector { right: 0; width: min(400px, 92vw); transform: translateX(102%); }
  .workspace.show-binder .binder, .workspace.show-inspector .inspector { transform: none; }
  .only-narrow { display: inline-flex !important; }
  .only-wide { display: none !important; }
}
@media (max-width: 700px) {
  .views a:not(.active) { display: none; }
  .book-title { max-width: 14ch; }
  .page { padding: 1.4rem 1.1rem 3rem; }
  .frow { grid-template-columns: 1.2rem minmax(0, 1fr) auto; }
  .frow .ftype, .frow .fdetail { display: none; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- stage 2: planning views ---------- */
.planview { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.planbar { padding: .9rem clamp(.8rem, 2vw, 1.6rem) .7rem; border-bottom: 1px solid var(--line); background: var(--desk); display: grid; gap: .6rem; }
.planbar .row { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.planbar h1 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: 0; }
.planbar .lbl { color: var(--muted); font-size: .86rem; display: flex; gap: .4rem; align-items: center; }
.planbar select { width: auto; }
.planbar .count { color: var(--faint); font-size: .86rem; }
.planscroll { overflow: auto; min-height: 0; }

/* beat sheet table */
.bs { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .9rem; }
.bs th, .bs td { border-bottom: 1px solid var(--line-soft); padding: .5rem .65rem; text-align: left; vertical-align: top; }
.bs thead th { position: sticky; top: 0; z-index: 3; background: var(--panel); color: var(--muted); font-weight: 600; font-size: .84rem; white-space: nowrap; border-bottom: 1px solid var(--line); }
.bs .sc { position: sticky; left: 0; z-index: 2; background: var(--desk); min-width: 19rem; max-width: 22rem; border-right: 1px solid var(--line-soft); }
.bs thead .sc { z-index: 4; background: var(--panel); }
.bs tbody tr.srow { cursor: pointer; }
.bs tbody tr.srow:hover td, .bs tbody tr.srow:hover .sc { background: #1f2939; }
.bs .chap td { background: var(--panel); font-family: var(--display); color: var(--text); padding: .45rem .65rem; position: sticky; left: 0; }
.bs .chap td span { color: var(--faint); font-family: var(--ui); font-size: .82rem; margin-left: .6rem; }
.bs .scell { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: .65rem; align-items: start; }
.bs .scell img, .bs .scell .noimg { width: 10.5rem; height: 7rem; object-fit: cover; border-radius: 4px; background: #10151f; display: block; }
.bs .scell .t { font-weight: 600; line-height: 1.25; }
.bs .scell .l { color: var(--amber); font-variant-numeric: tabular-nums; font-size: .82rem; }
.bs td.val { min-width: 9rem; max-width: 26rem; color: #d3d9e4; line-height: 1.4; }
.bs td.val.wide { min-width: 18rem; }
.bs td.num { text-align: right; font-variant-numeric: tabular-nums; min-width: 5rem; }
.bs.compact .cellbox { max-height: 8.6rem; overflow-y: auto; scrollbar-width: thin; padding-right: .3rem; overscroll-behavior: contain; }
.bs td .muted { color: var(--faint); }
.bs ol { margin: 0; padding-left: 1.1rem; }
.colpick { display: flex; flex-wrap: wrap; gap: .3rem; }

/* story board */
.board { padding: 1rem clamp(.8rem, 2vw, 1.6rem) 3rem; display: grid; gap: 1rem; }
.board.vertical { display: flex; align-items: flex-start; gap: .9rem; }
.lane { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-m); min-width: 0; }
.board.vertical .lane { flex: 0 0 18rem; width: 18rem; }
.lane-head { display: flex; align-items: baseline; gap: .6rem; padding: .6rem .8rem; font-family: var(--display); font-size: 1.05rem; position: sticky; left: 0; }
.lane-head .n { color: var(--faint); font-family: var(--ui); font-size: .82rem; }
.lane-cards { display: flex; gap: .65rem; padding: 0 .8rem .8rem; overflow-x: auto; min-height: 3.2rem; }
.board.vertical .lane-cards { flex-direction: column; overflow: visible; }
.lane.drop .lane-cards { background: var(--amber-soft); }
.card { flex: 0 0 15rem; width: 15rem; background: var(--desk); border: 1px solid var(--line-soft); border-radius: var(--radius-m); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.board.vertical .card { width: 100%; flex-basis: auto; }
.card:hover { border-color: #4c5c7a; }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #10151f; }
.card .cb { padding: .5rem .65rem .65rem; display: grid; gap: .25rem; }
.card .ct { font-weight: 600; line-height: 1.25; }
.card .ct b { color: var(--amber); font-weight: 600; margin-right: .35rem; font-variant-numeric: tabular-nums; }
.card .cx { color: var(--muted); font-size: .86rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card .cn { color: #f0cf91; font-size: .84rem; line-height: 1.4; border-left: 2px solid var(--amber); padding-left: .45rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card.dragging { opacity: .4; }
.lane-empty { color: var(--faint); font-size: .86rem; padding: .4rem 0; }

/* library */
.libview { height: 100%; display: grid; grid-template-columns: clamp(200px, 15vw, 250px) minmax(0, 1fr); min-height: 0; }
.libnav { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: .7rem 0; display: flex; flex-direction: column; }
.libnav a { display: flex; gap: .55rem; align-items: baseline; padding: .5rem .9rem; color: var(--muted); text-decoration: none; border-left: 3px solid transparent; }
.libnav a:hover { color: var(--text); background: var(--raised); }
.libnav a.active { color: var(--text); border-left-color: var(--amber); background: #253047; }
.libnav a .ic { width: 1.1rem; text-align: center; color: var(--faint); }
.libnav a .n { margin-left: auto; color: var(--faint); font-size: .8rem; }
.libnav .foot { margin-top: auto; padding: .8rem .9rem; }
.libmain { overflow-y: auto; padding: 1.3rem clamp(1rem, 3vw, 2.4rem) 4rem; }
.libhead { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.libhead h1 { font-family: var(--display); font-weight: 600; font-size: 1.7rem; margin: 0 auto 0 0; }
.libhead input[type=search] { width: 14rem; }
.recgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.rec { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .7rem; padding: .7rem; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--panel); cursor: pointer; text-align: left; align-items: start; }
.rec:hover { border-color: #4c5c7a; }
.rec .av { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; background: var(--raised); display: grid; place-items: center; font-family: var(--display); font-size: 1.3rem; color: var(--muted); }
.rec .nm { font-weight: 600; }
.rec .sm { color: var(--muted); font-size: .86rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .15rem; }
.rec .ap { color: var(--faint); font-size: .8rem; margin-top: .25rem; }
.recedit { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.6rem; align-items: start; max-width: 64rem; }
.recedit .portrait { width: 100%; aspect-ratio: 1; border-radius: var(--radius-m); object-fit: cover; background: var(--panel); display: grid; place-items: center; color: var(--faint); border: 1px solid var(--line-soft); cursor: zoom-in; }
.recedit .side { display: grid; gap: .6rem; }
.recedit .nameinput { font-family: var(--display); font-size: 1.7rem; font-weight: 600; background: transparent; border: 0; border-bottom: 1px solid transparent; padding: .1rem 0; border-radius: 0; }
.recedit .nameinput:focus { border-bottom-color: var(--amber); }
.recedit section { margin-top: 1.2rem; display: grid; gap: .75rem; }
.recedit h2 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin: 0; color: var(--muted); }
.apps a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .1rem .5rem; color: var(--text); text-decoration: none; padding: .45rem .5rem; border-radius: var(--radius-s); }
.apps a:hover { background: var(--raised); }
.apps a b { color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; }
.apps a .nt { grid-column: 2; color: var(--muted); font-size: .86rem; }
.files a { color: var(--amber); }
@media (max-width: 900px) {
  .libview { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .libnav { flex-direction: row; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .libnav a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; }
  .libnav a.active { border-bottom-color: var(--amber); }
  .libnav .foot { margin: 0; padding: .4rem .6rem; }
  .recedit { grid-template-columns: 1fr; }
  .recedit .portrait { max-width: 12rem; }
}

.chap-edit { margin-left: .2rem; background: none; border: 0; color: var(--faint); cursor: pointer; opacity: 0; padding: 0 .3rem; border-radius: 3px; }
.chapter-head:hover .chap-edit, .chap-edit:focus-visible { opacity: 1; }
.chap-edit:hover { color: var(--text); background: var(--raised); }

/* ---------- typesetting rules on the page ---------- */
.manuscript p:first-child, .manuscript p.scene-break + p, .manuscript p.heading + p, .manuscript p.center + p, .manuscript p.right + p,
.manuscript p.noindent, .manuscript p.heading { text-indent: 0; }
.manuscript p.indent { text-indent: var(--ms-indent, .25in) !important; }
.manuscript p.heading { font-weight: bold; }
.manuscript.justify p:not(.center):not(.right):not(.scene-break):not(.heading) { text-align: justify; }
.findbar { max-width: var(--page-w, 52rem); margin: .5rem auto 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .5rem .6rem; }
.findbar input[type=search], .findbar input[type=text] { width: 12rem; }
.toolbar select { padding: .26rem .35rem; font-size: .88rem; }

.bs td.val.wide { min-width: 17rem; max-width: 30rem; }
.bs .stack + .stack { margin-top: .35rem; }
.bs .sl { display: block; color: var(--faint); font-size: .76rem; }
.bs td.len { min-width: 8.5rem; line-height: 1.45; }
.bs td.len b { color: var(--text); font-weight: 600; }
.structure { position: relative; padding: .2rem 0 .1rem; }
.structure .track { position: relative; height: 3.1rem; border-radius: 4px; background: linear-gradient(var(--panel), var(--panel)) padding-box; border: 1px solid var(--line); }
.structure .tick { position: absolute; top: 0; bottom: 0; width: 1px; background: #3a4760; }
.structure .target { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #6f7d95; }
.structure .target i { position: absolute; top: .15rem; left: .25rem; font-style: normal; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.structure .event { position: absolute; bottom: 0; width: 2px; height: 55%; background: var(--amber); text-decoration: none; }
.structure .event i { position: absolute; bottom: .1rem; left: .3rem; font-style: normal; font-size: .72rem; color: #f3cf8b; white-space: nowrap; background: rgba(22,29,41,.85); padding: 0 .2rem; border-radius: 2px; }
.structure .legend { color: var(--faint); font-size: .76rem; margin-top: .3rem; }

/* ---------- bigger pictures ---------- */
:root { --inspector-w: clamp(340px, 26vw, 470px); }
.storyboard { aspect-ratio: 4 / 3; margin: .8rem .8rem .3rem; }
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 1rem; }
.tile { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--panel); cursor: pointer; text-align: left; overflow: hidden; }
.tile:hover { border-color: #4c5c7a; }
.tile img, .tile .noimg { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; display: grid; place-items: center; background: #10151f; font-family: var(--display); font-size: 3rem; color: var(--faint); }
.tile .tb { padding: .6rem .75rem .75rem; display: grid; gap: .2rem; }
.tile .nm { font-weight: 600; font-size: 1.02rem; }
.tile .sm { color: var(--muted); font-size: .86rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .ap { color: var(--faint); font-size: .8rem; }
.recedit { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); max-width: 72rem; }
.recedit .portrait { object-position: top; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; }
.gallery figure { margin: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-m); overflow: hidden; background: var(--panel); }
.gallery figure.main { border-color: var(--amber); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; display: block; cursor: zoom-in; background: #10151f; }
.gallery figcaption { padding: .45rem; display: grid; gap: .3rem; }
.gallery .acts { display: flex; justify-content: space-between; align-items: center; }
.recgroup > summary { padding-left: 0; }
.recgroup .group-body { padding-left: 0; padding-right: 0; }
.avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.link-item .avatar { width: 2.6rem; height: 2.6rem; object-position: top; }
.pickgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.pickgal .pg { background: var(--desk); border: 2px solid var(--line-soft); border-radius: var(--radius-m); padding: 0; overflow: hidden; cursor: pointer; display: grid; text-align: center; }
.pickgal .pg.on { border-color: var(--amber); }
.pickgal img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; }
.pickgal span { padding: .3rem; font-size: .84rem; color: var(--muted); }
@media (max-width: 900px) { .recedit { grid-template-columns: 1fr; } }

/* ---------- the printed page on the Write screen ---------- */
.desk-scroll { overflow-x: auto; }
.page.book { position: relative; width: var(--page-w); max-width: none; box-sizing: border-box; margin-left: auto; margin-right: auto; }
.page.book .manuscript { min-height: 30vh; font-kerning: none; }
.scene-head, .toolbar, .page-foot, .findbar { max-width: max(var(--page-w, 52rem), 40rem); }
.ch-open { user-select: none; color: var(--paper-ink); font-family: var(--ms-font, Garamond, Georgia, serif); }
.ch-open .ch-name { text-align: center; font-weight: bold; font-family: inherit; }
.ch-open .ch-sep { text-align: center; color: #6b655a; }
.ch-open { font-family: inherit; }
.page.book .ch-open { font-family: var(--book-font, inherit); }
.pbreaks { position: absolute; inset: 0; pointer-events: none; }
.pbreaks .pb { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #b9ad97; }
.pbreaks .pb span { position: absolute; top: -.62rem; font: 600 .72rem var(--ui); color: #8d826d; background: var(--paper); padding: 0 .35rem; border-radius: 3px; }
.pbreaks .pb .pb-end { left: .4rem; top: -1.25rem; background: transparent; color: #a99d86; font-weight: 500; }
.pbreaks .pb .pb-next { right: .4rem; top: .2rem; background: transparent; }
.pbreaks .pb-start { position: absolute; top: .5rem; right: .7rem; font: 600 .72rem var(--ui); color: #a99d86; }
.dlg-h { margin: .4rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.audio-slot { grid-column: 1 / -1; }

/* reviewer and proof notes */
.manuscript span[data-note].by-reviewer { background: rgba(88, 160, 230, .25); border-bottom-color: #4a8fd4; }
.manuscript span[data-note].proof { background: rgba(140, 201, 160, .3); border-bottom-color: #5aa874; }
.manuscript.hide-rev span[data-note].by-reviewer { background: transparent; border-bottom: 1px dotted #9cb8d6; }
.note.reviewer { border-left-color: #58a0e6; }
.note.proof { border-left-color: var(--ok); }
.note .sugg { background: rgba(140, 201, 160, .12); border-radius: 4px; padding: .3rem .45rem; }
.note .reply { border-left: 2px solid var(--line); padding-left: .45rem; color: var(--muted); }
/* scene audio */
.abar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .5rem; padding: .35rem .5rem; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--panel); }
.abar.empty { background: transparent; border-style: dashed; padding: .2rem .3rem; }
.abar .aplay { width: 2.3rem; font-size: .9rem; }
.abar .ascrub { flex: 1 1 10rem; min-width: 8rem; accent-color: var(--amber); }
.abar .atime { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .84rem; min-width: 6.5rem; }
.abar .aspeed { width: auto; padding: .2rem .3rem; font-size: .84rem; }
.abar .alabel { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.abar .achap { color: var(--faint); }
.abar .astart { display: inline-flex; align-items: center; gap: .15rem; font-size: .82rem; }
.abar .astale { color: var(--amber); font-size: .8rem; border: 1px solid var(--amber); border-radius: 999px; padding: .05rem .5rem; }
.btn.tiny { padding: .1rem .35rem; font-size: .78rem; }
.amark { color: var(--amber); margin-left: .35rem; font-size: .8rem; }
.amark.stale { color: var(--faint); }
.takes { display: grid; gap: .5rem; }
.take { display: flex; gap: .6rem; justify-content: space-between; align-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: .5rem .7rem; flex-wrap: wrap; }
.take.on { border-color: var(--amber); }
.take .acts { display: flex; flex-wrap: wrap; gap: .2rem; }
.amatch { display: grid; gap: .35rem; max-height: 55vh; overflow: auto; }
.amatch .arow { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: .6rem; align-items: center; }

/* beat sheet editing */
.bs td.editable { cursor: text; }
.bs td.editable:hover { box-shadow: inset 0 0 0 1px var(--line); }
.bs td.editing { background: #1f2939 !important; box-shadow: inset 0 0 0 1px var(--amber); min-width: 22rem; cursor: default; }
.bs.compact td.editing .cellbox { max-height: none; }
.celledit { display: grid; gap: .6rem; }
.cellacts { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cellacts .hint { color: var(--faint); font-size: .76rem; }
.bs .sc { cursor: pointer; }
/* big board */
.bigboard { padding: .4rem clamp(.8rem, 2vw, 1.6rem) 4rem; display: grid; gap: .9rem; }
.bb-head-row { display: grid; grid-template-columns: var(--bb-pic) minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; padding: .7rem clamp(.8rem, 2vw, 1.6rem) 0; color: var(--faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
:root { --bb-pic: clamp(300px, 24vw, 440px); }
.bb-chap { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin: 1rem 0 0; border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.bb-chap span { color: var(--faint); font-family: var(--ui); font-size: .84rem; font-weight: 400; margin-left: .7rem; }
.bb-row { display: grid; grid-template-columns: var(--bb-pic) minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: .8rem; }
.bb-pic img, .bb-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); display: block; background: #0f141d; cursor: zoom-in; }
.bb-noimg { border: 1px dashed var(--line); color: var(--faint); cursor: pointer; font: inherit; }
.bb-col { display: grid; gap: .5rem; min-width: 0; }
.bb-col textarea { min-height: 9rem; }
.bb-head { display: grid; gap: .35rem; }
.bb-title { color: var(--text); text-decoration: none; font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.bb-title b { color: var(--amber); font-weight: 600; margin-right: .3rem; font-variant-numeric: tabular-nums; }
.bb-title:hover { text-decoration: underline; }
.bb-tags { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.bb-len { color: var(--faint); font-size: .82rem; margin-left: .3rem; }
@media (max-width: 1250px) { :root { --bb-pic: clamp(220px, 26vw, 320px); } }
@media (max-width: 1000px) { .bb-row, .bb-head-row { grid-template-columns: minmax(0, 1fr); } .bb-head-row { display: none; } .bb-pic { max-width: 480px; } }

/* sharing & reviewers */
.fullpage .inner.wide { max-width: 82rem; }
.profiles { display: grid; gap: .45rem; }
.prof { border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--panel); padding: .55rem .75rem; }
.prof-h { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.prof-h .hint { flex: 1; color: var(--muted); font-size: .86rem; }
.prof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.prof-grid h4 { margin: .4rem 0 .3rem; font-family: var(--display); font-weight: 600; color: var(--muted); }
.prof-grid .checkline { margin: .2rem 0; }
@media (max-width: 800px) { .prof-grid { grid-template-columns: 1fr; } }
/* glossary */
.gl-list { display: grid; gap: .3rem; }
.gl-row { display: grid; grid-template-columns: 2.4rem minmax(8rem, 13rem) minmax(6rem, 9rem) minmax(7rem, 11rem) minmax(0, 1fr) minmax(6rem, 9rem) auto; gap: .5rem; align-items: center; padding: .35rem .5rem; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--panel); }
.gl-row.private { opacity: .7; }
.gl-headrow { background: transparent; border: 0; color: var(--faint); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 0; }
.gl-img { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: 4px; display: grid; place-items: center; background: var(--raised); color: var(--faint); font-family: var(--display); }
.gl-term { color: var(--text); font-weight: 600; text-decoration: none; }
.gl-term:hover { color: var(--amber); }
.gl-ctls { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; }
.gl-ctls label { color: var(--muted); font-size: .84rem; }
.gl-ctls select, .gl-ctls input[type=text] { width: auto; min-width: 9rem; }
.gl-divider { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.gl-divider select { width: auto; }
.gl-divthumb { height: 2.4rem; border-radius: 3px; }
@media (max-width: 1000px) { .gl-row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; } .gl-row > :nth-child(3), .gl-row > :nth-child(4), .gl-row > :nth-child(6) { display: none; } .gl-row textarea { grid-column: 1 / -1; } .gl-headrow { display: none; } }

/* glossary pages (also used in the proof copy) */
.gx-measure { position: absolute; left: -20000px; top: 0; visibility: hidden; }
.gx-spread { display: flex; flex-wrap: wrap; gap: 1.2rem; padding: .5rem 0 1rem; }
.gx-page { position: relative; box-sizing: border-box; background: #fbf9f4; color: #1f1d1a; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 6px 20px -8px rgba(0,0,0,.6); flex-shrink: 0; }
.gx-title { text-align: center; font-weight: bold; margin-bottom: .8em; letter-spacing: .04em; }
.gx-body { flex: 1; min-height: 0; display: flex; gap: 1.4em; }
.gx-col { flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.gx-entry { margin: 0 0 .45em; padding-left: 1.4em; text-indent: -1.4em; }
.gx-entry b { font-weight: bold; }
.gx-pr, .gx-al, .gx-or { font-style: italic; }
.gx-see i { font-style: italic; }
.gx-head { font-weight: bold; text-transform: uppercase; letter-spacing: .08em; margin: .7em 0 .35em; font-size: .9em; border-bottom: 1px solid currentColor; padding-bottom: .15em; }
.gx-enc { padding-left: 0; text-indent: 0; overflow: hidden; }
.gx-enc p { margin: 0; }
.gx-thumb { float: right; width: 32%; margin: .15em 0 .3em .5em; border-radius: 2px; filter: grayscale(.2); }
.gx-pron { padding-left: 0; text-indent: 0; }
.gx-redact { background: #111; color: transparent; border-radius: 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.gx-dossier { background: #efe3c4; background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.35), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.18), transparent 55%); color: #24201a; }
.gx-dossier.gx-gray { background: #f1f1f1; background-image: none; filter: grayscale(1); }
.gx-band { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: .72em; letter-spacing: .3em; padding: .35em 0; background: #7a1f1a; color: #f5e9d0; font-weight: bold; }
.gx-gray .gx-band { background: #333; }
.gx-dossier .gx-title { margin-top: .6em; border: 2px solid currentColor; padding: .3em; }
.gx-dossier .gx-head { border-bottom: 2px solid #7a1f1a; color: #7a1f1a; }
.gx-card { border: 1px solid rgba(36,32,26,.5); background: rgba(255,255,255,.35); padding: .45em .55em; margin-bottom: .6em; break-inside: avoid; }
.gx-cardtop { display: flex; justify-content: space-between; align-items: center; font-size: .78em; letter-spacing: .08em; border-bottom: 1px dashed rgba(36,32,26,.5); padding-bottom: .25em; margin-bottom: .35em; }
.gx-stamp { color: #a3261d; border: 2px solid #a3261d; padding: .05em .4em; transform: rotate(-4deg); font-weight: bold; letter-spacing: .12em; }
.gx-cardbody { display: flex; gap: .6em; align-items: flex-start; }
.gx-photo { position: relative; width: 28%; flex-shrink: 0; }
.gx-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); filter: sepia(.25) contrast(1.05); transform: rotate(1.5deg); }
.gx-clip { position: absolute; top: -.35em; left: 40%; width: .7em; height: 1.4em; border: 2px solid #8a8a8a; border-radius: .4em; }
.gx-term { font-size: 1.15em; font-weight: bold; letter-spacing: .06em; }
.gx-meta { font-size: .8em; letter-spacing: .05em; opacity: .85; }
.gx-def { margin: .3em 0 0; }
.gx-folio { position: absolute; bottom: .35in; left: 0; right: 0; text-align: center; font-size: .8em; }
.gx-divider { background: #111; display: grid; place-items: center; }
.gx-divider img { width: 100%; height: 100%; object-fit: cover; }
.gx-divcap { position: absolute; bottom: 8%; left: 0; right: 0; text-align: center; color: #f5f0e6; font-family: Garamond, Georgia, serif; font-style: italic; text-shadow: 0 1px 4px #000; }
.gx-blank { background: #fbf9f4; }

/* ---------- proof ---------- */
.proofpage .inner.wide { max-width: 96rem; }
.cv-layout { display: grid; grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.cv-layout h2 { margin-top: .5rem; }
.cv-up { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.cv-up select { width: auto; }
.cv-grid { display: grid; gap: .7rem; max-height: 78vh; overflow: auto; padding-right: .3rem; }
.cv-item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .6rem; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--panel); padding: .5rem; }
.cv-item.cur { border-color: var(--amber); }
.cv-item.rej { opacity: .55; }
.cv-item img { width: 7rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; cursor: zoom-in; background: #0f141d; }
.cv-meta { display: grid; gap: .3rem; }
.cv-row { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.cv-row select { width: auto; flex: 1; }
.cv-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.cv-compare img { width: 100%; border-radius: 4px; }
.cv-compare figure { margin: 0; }
.cv-stage { overflow: auto; padding: .8rem 0; display: grid; gap: 1rem; }
.cv-flat { position: relative; background: #2b3448 center / cover no-repeat; box-shadow: 0 10px 30px -10px #000; flex-shrink: 0; overflow: hidden; }
.cv-panel { position: absolute; background: #e9e2d0 center / cover no-repeat; }
.cv-panel.back { background-color: #ddd5c0; }
.cv-panel.spine { background-color: #cfc6ae; }
.cv-guide { position: absolute; pointer-events: none; }
.cv-guide.trim { border: 1px dashed rgba(255, 60, 60, .9); }
.cv-guide.safe { border: 1px dotted rgba(40, 170, 255, .9); }
.cv-guide.fold { width: 0; border-left: 1px dashed rgba(255, 255, 255, .85); box-shadow: 0 0 0 .5px rgba(0,0,0,.4); }
.cv-guide.spinesafe { border: 1px dotted rgba(120, 255, 160, .9); }
.cv-barcode { position: absolute; background: #fff; color: #333; border: 1px solid #333; display: grid; place-items: center; font: 600 10px var(--ui); }
.cv-lbl { position: absolute; font: 700 10px var(--ui); letter-spacing: .1em; color: #fff; background: rgba(0,0,0,.5); padding: 1px 4px; border-radius: 2px; }
.cv-backtext { position: absolute; color: #222; font-family: Garamond, Georgia, serif; line-height: 1.35; overflow: hidden; }
.cv-backtext p { margin: 0 0 .6em; }
.cv-hook { font-weight: bold; margin-bottom: .6em; }
.cv-endorse { font-style: italic; }
.cv-endorse span { font-style: normal; }
.cv-bio { font-size: .9em; border-top: 1px solid #999; padding-top: .4em; }
.cv-fronttext { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; color: #1a1a1a; font-family: Garamond, Georgia, serif; }
.cv-title { font-weight: bold; line-height: 1.05; margin: .3em 0; }
.cv-author { letter-spacing: .08em; }
.cv-spinetext { position: absolute; display: flex; justify-content: space-between; align-items: center; writing-mode: vertical-rl; color: #111; font-family: Garamond, Georgia, serif; font-weight: bold; padding: .6em 0; overflow: hidden; }
.cv-thumbs { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; }
.cv-thumbs img { border-radius: 2px; box-shadow: 0 2px 8px #000; }
.cv-dims { display: grid; gap: .5rem; }
.cv-ctl { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; }
.cv-ctl label { color: var(--muted); font-size: .84rem; }
.cv-ctl select, .cv-ctl input[type=number] { width: auto; }
.cv-nums { display: grid; gap: .15rem; }
.cv-nums b { color: var(--amber); }
.warn { color: var(--danger); font-size: .86rem; }
.cv-text h3 { font-family: var(--display); font-weight: 600; margin: 1.2rem 0 .5rem; color: var(--muted); }
.cv-text label { color: var(--muted); font-size: .86rem; display: grid; gap: .25rem; }
.cv-text .hint { color: var(--faint); font-size: .78rem; }
.cv-lab { display: flex; justify-content: space-between; gap: .5rem; }
.cv-count { color: var(--faint); font-size: .78rem; }
.cv-count.over { color: var(--danger); }
.cv-endorsements { display: grid; gap: .35rem; }
.cv-keywords { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .35rem; }
.matter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.matter-grid label { color: var(--muted); font-size: .86rem; display: grid; gap: .25rem; }
@media (max-width: 1100px) { .cv-layout, .matter-grid { grid-template-columns: 1fr; } }

.pp-ctl { display: grid; gap: .5rem; margin-bottom: .6rem; }
.pp-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pp-row select { width: auto; }
.seg { display: inline-flex; }
.seg .btn { border-radius: 0; }
.seg .btn:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.seg .btn:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.btn.on { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.pp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
.pp-main { min-width: 0; display: grid; gap: .6rem; }
.pp-area { min-height: 60vh; overflow: auto; background: #10151f; border-radius: var(--radius-m); padding: 1.2rem; display: grid; place-items: center; }
.pp-spread { display: flex; gap: 0; box-shadow: 0 20px 50px -20px #000; }
.pp-spread .pp-page.verso { box-shadow: inset -14px 0 18px -14px rgba(0,0,0,.35); }
.pp-spread .pp-page.recto { box-shadow: inset 14px 0 18px -14px rgba(0,0,0,.35); }
.pp-page { position: relative; background: #fbf9f4; color: #1d1b18; overflow: hidden; flex-shrink: 0; }
.pp-page.cream { background: #f6efdf; }
.pp-page.empty { background: transparent; box-shadow: none !important; }
.pp-page.html { overflow: hidden; }
.pp-page.html > .gx-page { box-shadow: none; }
.pp-box { position: absolute; }
.pp-line { position: absolute; left: 0; right: 0; white-space: nowrap; font-kerning: none; }
.pp-line.a-justify { text-align: justify; text-align-last: justify; white-space: normal; overflow: hidden; }
.pp-line.a-center, .pp-chap, .pp-brk { text-align: center; }
.pp-line.a-right { text-align: right; }
.pp-chap { font-weight: bold; }
.pp-head { position: absolute; left: 0; right: 0; text-align: center; letter-spacing: .12em; text-transform: uppercase; color: #444; }
.pp-folio { position: absolute; left: 0; right: 0; text-align: center; color: #333; }
.pp-folio.hdr { left: auto; text-align: right; }
.pp-center { text-align: center; }
.pp-titlepage { position: relative; height: 100%; text-align: center; }
.pp-copyright { position: absolute; bottom: 0; left: 0; right: 0; line-height: 1.35; }
.pp-ctitle { text-align: center; font-weight: bold; margin: 18% 0 1.2em; }
.pp-toc { display: flex; gap: .3em; }
.pp-toc .dots { flex: 1; border-bottom: 1px dotted #888; margin-bottom: .35em; }
.pp-prose p { margin: 0; text-indent: 1.5em; }
.pp-prose p:first-child { text-indent: 0; }
.pp-photo { width: 40%; display: block; margin: 0 auto 1em; filter: grayscale(.1); }
.pp-strip { display: flex; gap: 2px; overflow-x: auto; padding: .3rem 0; }
.pp-th { flex: 0 0 auto; width: 9px; height: 14px; border: 0; padding: 0; background: #3a4760; border-radius: 1px; cursor: pointer; font-size: 8px; color: var(--amber); line-height: 14px; }
.pp-th.front { background: #2a3548; }
.pp-th.open { background: #56658a; }
.pp-th.on { background: var(--amber); color: #000; }
.pp-side { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-m); padding: .6rem 0; max-height: 80vh; overflow: auto; }
.pp-side h3 { margin: 0 .9rem .3rem; font-family: var(--display); font-weight: 600; }
.pp-side .hint { padding: 0 .9rem; color: var(--muted); font-size: .84rem; }
.pp-pop { position: fixed; z-index: 30; }
.pp-card { border: 2px dashed var(--amber); border-radius: 10px; display: grid; place-items: center; color: var(--muted); margin: 0 auto; }
.b3-stage { perspective: 1800px; padding: 2rem; display: grid; place-items: center; }
.b3-book { position: relative; transform-style: preserve-3d; transition: transform .5s ease; cursor: grab; }
.b3-face { position: absolute; top: 0; background: #ddd4bd center / cover no-repeat; backface-visibility: hidden; }
.b3-face.front { left: 0; transform: translateZ(calc(var(--s) / 2)); box-shadow: inset 4px 0 8px -4px rgba(0,0,0,.5); }
.b3-face.back { left: 0; transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.b3-face.pages { left: calc(var(--w) - var(--s) / 2); transform: rotateY(90deg) translateZ(0); background: repeating-linear-gradient(90deg, #f3ecda 0 2px, #e2d9c3 2px 3px); }
.b3-face.top { top: calc(var(--s) / -2); transform: rotateX(90deg); background: repeating-linear-gradient(0deg, #f3ecda 0 2px, #e2d9c3 2px 3px); }
.b3-face.spine { left: calc(var(--s) / -2); transform: rotateY(-90deg) translateZ(0); background-color: #cdbf9f; }
.b3-text { position: absolute; inset: 8% 9%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #1a1a1a; font-family: Garamond, Georgia, serif; }
.b3-text.back { align-items: stretch; text-align: left; font-size: .8rem; line-height: 1.35; overflow: hidden; }
.b3-text p { margin: 0 0 .5em; }
.b3-title { font-size: 2rem; font-weight: bold; line-height: 1.05; margin-top: 10%; }
.b3-author { letter-spacing: .1em; font-size: 1.1rem; }
.b3-end { font-style: italic; }
.b3-bar { margin-top: auto; align-self: flex-end; background: #fff; border: 1px solid #333; padding: .6em 1.2em; font: 600 .7rem var(--ui); }
.b3-spinetext { position: absolute; inset: 4% 0; writing-mode: vertical-rl; display: flex; justify-content: space-between; align-items: center; font-family: Garamond, Georgia, serif; font-weight: bold; color: #1a1a1a; font-size: .85rem; }
.b3-btns { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.bs.fmt td { vertical-align: top; }
.bs.fmt td .hint { color: var(--faint); font-size: .8rem; max-width: 30rem; }
@media (max-width: 1100px) { .pp-wrap { grid-template-columns: 1fr; } }

/* ---------- covers: front and back (grid of quarters) ---------- */
.bc { position: relative; background: #e3dccb center / cover no-repeat; overflow: hidden; color: #1c1a17; }
.bc-block { position: absolute; box-sizing: border-box; overflow: hidden; border-radius: 2px; }
.bc-block.image img { width: 100%; height: 100%; display: block; }
.bc-block.over { outline: 2px dashed #d9534f; }
.bc-copy { line-height: 1.32; }
.bc-copy p { margin: 0 0 .55em; }
.bc-hook { font-weight: bold; margin-bottom: .5em; line-height: 1.2; }
.bc-end { font-style: italic; }
.bc-end span { font-style: normal; font-size: .9em; }
.bc-bio { font-size: .9em; border-top: 1px solid currentColor; padding-top: .4em; opacity: .9; }
.bc-small { font-size: .8em; letter-spacing: .04em; }
.bc-photo { float: left; width: 28%; margin: 0 .6em .3em 0; border-radius: 2px; }
.bc-empty, .bc-empty-t { display: grid; place-items: center; height: 100%; color: #8a8173; font: italic .8em var(--ui); border: 1px dashed #a69d8b; box-sizing: border-box; padding: .5em; text-align: center; }
.bc-empty-t { height: auto; }
.bc-barcode { position: absolute; background: #fff; color: #333; border: 1px solid #333; display: grid; place-items: center; font: 600 10px var(--ui); }
.bc-cell { position: absolute; border: 1px dotted rgba(40, 170, 255, .7); pointer-events: none; }
.bc-tag { position: absolute; top: 2px; right: 2px; font: 600 9px var(--ui); background: rgba(40, 120, 220, .85); color: #fff; padding: 1px 4px; border-radius: 2px; }
.cv-backlayer { position: absolute; background: transparent !important; }
.cv-warn { display: grid; gap: .2rem; }
.fc { position: relative; background: #e9e2d0 center / cover no-repeat; overflow: hidden; }
.fc-text { position: absolute; inset: 9% 8%; display: flex; flex-direction: column; align-items: center; text-align: center; color: #1a1a1a; font-family: Garamond, Georgia, serif; }
.fc-title { font-weight: bold; line-height: 1.05; margin: .3em 0; }
.fc-author { letter-spacing: .08em; }
.cv-layoutbox { display: grid; gap: .55rem; margin-top: .8rem; border: 1px solid var(--line-soft); border-radius: var(--radius-m); background: var(--panel); padding: .7rem .8rem; }
.cv-layoutbox .hint { color: var(--muted); font-size: .84rem; }
.cv-block { display: grid; gap: .4rem; border: 1px solid var(--line-soft); border-radius: var(--radius-s); padding: .5rem .6rem; background: var(--desk); }
.cv-block select, .cv-layoutbox select { width: auto; }
.cv-block .parts { gap: .2rem .8rem; }
.cv-block .lbl, .cv-layoutbox .lbl { color: var(--muted); font-size: .84rem; display: inline-flex; gap: .35rem; align-items: center; }
.qpick { display: inline-flex; align-items: center; gap: .4rem; }
.qpick > span { display: inline-block; width: .8rem; height: .8rem; border: 1px solid var(--line); background: var(--panel); }
.qpick { position: relative; }
.qpick > span:nth-child(1), .qpick > span:nth-child(2), .qpick > span:nth-child(3), .qpick > span:nth-child(4) { margin: 0; }
.qpick::before { content: none; }
.qpick > span.on { background: var(--amber); border-color: var(--amber); }
.qpick { display: inline-grid; grid-template-columns: .8rem .8rem auto; grid-template-rows: .8rem .8rem; gap: 2px .2rem; }
.qpick > select { grid-column: 3; grid-row: 1 / 3; margin-left: .4rem; }
.qpick > span:nth-child(1) { grid-column: 1; grid-row: 1; } .qpick > span:nth-child(2) { grid-column: 2; grid-row: 1; }
.qpick > span:nth-child(3) { grid-column: 1; grid-row: 2; } .qpick > span:nth-child(4) { grid-column: 2; grid-row: 2; }
.b3-face .bc, .b3-face .fc { position: absolute; inset: 0; }

/* ---------- proof copy: the book in the hand ---------- */
.pp-wrap { grid-template-columns: minmax(0, 1fr); }
.pp-wrap.notes { grid-template-columns: minmax(0, 1fr) 19rem; }
.pp-wrap:not(.notes) .pp-side { display: none; }
.pp-area { overflow: auto; place-items: start center; }
.pp-pos { min-width: 9rem; text-align: center; }
.pp-book { position: relative; display: flex; perspective: 2600px; transition: transform .7s ease-in-out; margin: 0 auto; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .55)); }
.pp-book.closed-front { transform: translateX(calc(var(--pw) / -2)); }
.pp-book.closed-back { transform: translateX(calc(var(--pw) / 2)); }
.pp-half { position: relative; cursor: pointer; }
.pp-half .pp-page.empty { visibility: hidden; }
.pp-half.left .pp-page:not(.empty) { box-shadow: inset -16px 0 20px -14px rgba(0,0,0,.35); }
.pp-half.right .pp-page:not(.empty) { box-shadow: inset 16px 0 20px -14px rgba(0,0,0,.35); }
.pp-half .pp-cover { box-shadow: none !important; border-radius: 2px 6px 6px 2px; }
.pp-half.left .pp-cover { border-radius: 6px 2px 2px 6px; }
.pp-leaf { position: absolute; top: 0; width: var(--pw); height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.45, .05, .35, 1); z-index: 5; }
.pp-leaf.fwd { left: var(--pw); transform-origin: left center; }
.pp-leaf.back { left: 0; transform-origin: right center; }
.pp-leaf.fwd.go { transform: rotateY(-180deg); }
.pp-leaf.back.go { transform: rotateY(180deg); }
.pp-face { position: absolute; inset: 0; backface-visibility: hidden; }
.pp-face.backside { transform: rotateY(180deg); }
.pp-face .pp-page.empty { visibility: hidden; }
.pp-inside { background: #e8e4dc; display: grid; place-items: end center; }
.pp-inside span { color: #b3ab9c; font: .75rem var(--ui); letter-spacing: .1em; text-transform: uppercase; padding-bottom: 8%; }
.pp-page.cream.pp-inside, .pp-page.white.pp-inside { background: #e8e4dc; }

.proofpage .pp-ctl { position: sticky; top: -1.6rem; z-index: 8; background: var(--desk); padding: .5rem 0; margin-top: -.5rem; }
.proofpage .pp-area { padding: .8rem; }

/* ---------- the shelf (landing page) ---------- */
a.book-title { color: var(--text); text-decoration: none; }
a.book-title:hover { color: var(--amber); }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.shelf-book { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1rem; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-m); cursor: pointer; }
.shelf-book:hover, .shelf-book:focus-visible { border-color: var(--amber); }
.shelf-book.new { cursor: default; border-style: dashed; }
.shelf-cover { width: 9rem; aspect-ratio: 2 / 3; border-radius: 3px 6px 6px 3px; overflow: hidden; background: #0f141d; box-shadow: 0 10px 24px -10px #000, inset 4px 0 6px -3px rgba(0,0,0,.5); }
.shelf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shelf-cover.plain { display: grid; place-items: center; background: linear-gradient(160deg, #2b3550, #1a2133); padding: .8rem; text-align: center; font-family: Garamond, Georgia, serif; font-size: 1.05rem; color: #e9dfc6; }
.shelf-cover.new { background: transparent; border: 2px dashed var(--line); box-shadow: none; font-size: 3rem; color: var(--faint); }
.shelf-info { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.shelf-title { font-family: var(--display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.shelf-sub { color: var(--muted); }
.shelf-meta { color: var(--faint); font-size: .86rem; line-height: 1.4; }
.shelf-acts { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: auto; padding-top: .5rem; }
@media (max-width: 700px) { .shelf { grid-template-columns: 1fr; } .shelf-book { grid-template-columns: 6.5rem minmax(0, 1fr); } .shelf-cover { width: 6.5rem; } }

/* ---------- KizerWrite branding ---------- */
.brand { display: flex; align-items: center; gap: .45rem; text-decoration: none; flex-shrink: 0; }
.brand img { height: 30px; width: 30px; }
.brand .wm { font-family: "Bodoni MT", Didot, "Playfair Display", "Book Antiqua", Georgia, serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1; }
.kz { color: #f1f2f8; }
.wr { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar .book-title { color: var(--muted); font-family: var(--display); font-size: .98rem; border-left: 1px solid var(--line); padding-left: .9rem; }
.topbar .book-title:empty { display: none; }
.views a.active { border-bottom-color: transparent; border-image: var(--brand-grad) 1; border-bottom-width: 2px; border-bottom-style: solid; }
.btn.primary { background: var(--brand-grad); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.hero { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); padding: clamp(1.4rem, 4vw, 3rem) clamp(1rem, 3vw, 2.4rem); margin: .4rem 0 1.6rem;
  border: 1px solid var(--line-soft); border-radius: 14px; background: radial-gradient(ellipse at 15% 20%, rgba(63, 169, 255, .14), transparent 55%), radial-gradient(ellipse at 90% 90%, rgba(138, 63, 245, .14), transparent 55%), var(--panel); }
.hero-mark { width: clamp(96px, 13vw, 168px); height: auto; filter: drop-shadow(0 10px 24px rgba(74, 91, 240, .35)); }
.hero-text { display: grid; gap: .5rem; min-width: 0; }
.hero-wm { font-family: "Bodoni MT", Didot, "Playfair Display", "Book Antiqua", Georgia, serif; font-weight: 700; font-size: clamp(2.6rem, 6.5vw, 4.8rem); line-height: 1; letter-spacing: -.02em; }
.hero-tag { font-size: clamp(.9rem, 1.4vw, 1.15rem); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.hero-rule { width: 5.5rem; height: 2px; background: var(--brand-grad); margin: .3rem 0; }
.hero-sub { font-size: .78rem; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); display: flex; flex-wrap: wrap; gap: .6rem; }
.hero-sub i { font-style: normal; color: var(--line); }
.shelf-h { font-size: 1.5rem !important; }
@media (max-width: 700px) { .hero { flex-direction: column; text-align: center; } .hero-rule { margin: .3rem auto; } .hero-sub { justify-content: center; } .brand .wm { display: none; } }

/* sample book on the shelf */
.sample-tag { margin-left: .5em; font-size: .7rem; vertical-align: middle; background: var(--brand-grad, #6b5cff); color: #fff; border: 0; }
.shelf-book.sample .shelf-cover img { width: 46%; height: auto; object-fit: contain; opacity: .9; }
/* the printed page can be narrow (6×9): give the scene title its own full-width row so it isn't cut off */
.scene-head .scene-title { grid-column: 1 / -1; grid-row: 3; margin-top: .3rem; }

/* ---------- sign-in, setup and invitation pages (server mode) */
body.authpage { min-height: 100vh; overflow: auto; background: radial-gradient(1200px 600px at 20% -10%, rgba(74, 91, 240, .25), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(138, 63, 245, .2), transparent 60%), var(--bg, #141b26); }
.auth { width: min(420px, calc(100% - 32px)); margin: clamp(2rem, 9vh, 6rem) auto 2rem; display: grid; gap: 1.4rem; }
.auth-brand { display: flex; align-items: center; gap: 1rem; }
.auth-brand img { width: 72px; height: auto; filter: drop-shadow(0 8px 20px rgba(74, 91, 240, .35)); }
.auth-brand .hero-wm { font-size: 2.6rem; }
.auth-brand .hero-tag { font-size: .7rem; letter-spacing: .22em; }
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem 1.4rem; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8); }
.auth-card form { display: grid; gap: .85rem; }
.auth-card h1 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.45rem; }
.auth-card label { display: grid; gap: .3rem; font-size: .9rem; color: var(--muted); }
.auth-card label.checkline { display: flex; align-items: center; gap: .5rem; }
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password] { font-size: 1rem; padding: .6rem .7rem; }
.auth-card .btn.primary { padding: .65rem; font-size: 1rem; justify-content: center; }
.auth-card .hint.small, .hint.small { font-size: .8rem; }
.auth-msg { margin: 0; min-height: 1.2em; color: #ff8f8f; font-size: .9rem; }
.auth-msg.ok { color: #7fd99a; }
.auth-foot { text-align: center; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--faint, #6b778c); margin: 0; }
.auth-foot i { font-style: normal; color: var(--line); padding: 0 .3rem; }

/* account menu in the top bar (server mode) */
#userBtn { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-table { width: 100%; border-collapse: collapse; }
.people-table th, .people-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line-soft, #2a3446); vertical-align: middle; }
.people-table th { color: var(--muted); font-weight: 600; font-size: .82rem; }
.linkbox { display: flex; gap: .4rem; align-items: center; }
.linkbox input { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.import-card.acct label { display: grid; gap: .3rem; max-width: 26rem; }

/* ---------- Scene Boards: storyboards scene after scene */
.sbd-wrap { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 0; height: 100%; }
.sbd-nav { overflow-y: auto; border-right: 1px solid var(--line); background: var(--panel); padding: .6rem 0 2rem; font-size: .86rem; }
.sbd-nch { padding: .7rem .9rem .2rem; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.sbd-nav a { display: flex; gap: .35rem; align-items: baseline; padding: .26rem .9rem; color: var(--text); text-decoration: none; }
.sbd-nav a span { color: var(--amber); font-variant-numeric: tabular-nums; min-width: 2.2em; }
.sbd-nav a i { margin-left: auto; font-style: normal; font-size: .72rem; color: #fff; background: var(--brand-2, #4A5BF0); border-radius: 9px; padding: 0 .45rem; }
.sbd-nav a.none { color: var(--faint); }
.sbd-nav a:hover { background: rgba(255,255,255,.04); }
.sbd-nav a.cur { background: rgba(74, 91, 240, .18); box-shadow: inset 3px 0 0 var(--brand-2, #4A5BF0); }
.sbd-scroll { scroll-behavior: auto; }
.sbd-list { max-width: 1240px; margin: 0 auto; padding: .6rem clamp(.8rem, 2.5vw, 2rem) 40vh; }
.sbd-chap { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin: 2.2rem 0 .4rem; border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.sbd-scene { margin: 1.1rem 0 2.4rem; scroll-margin-top: .6rem; border-radius: 10px; }
.sbd-scene.drop { outline: 2px dashed var(--brand-1, #3FA9FF); outline-offset: 6px; }
.sbd-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: .7rem; flex-wrap: wrap; }
.sbd-title { font-family: var(--display); font-size: 1.15rem; color: var(--text); text-decoration: none; }
.sbd-title b { color: var(--amber); margin-right: .25rem; }
.sbd-meta { display: flex; gap: .45rem; flex-wrap: wrap; color: var(--faint); font-size: .8rem; margin-top: .25rem; align-items: center; }
.sbd-sum { margin: .45rem 0 0; color: var(--muted); max-width: 52rem; line-height: 1.5; font-size: .92rem; }
.sbd-add { display: flex; gap: .4rem; align-items: center; }
.sbd-add select { width: auto; }
.sbd-body { display: grid; gap: .9rem; }
.sbd-item { margin: 0; position: relative; background: #0c0f15; border: 1px solid var(--line-soft, #2a3446); border-radius: 8px; overflow: hidden; }
.sbd-item img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.sbd-item.panel img { aspect-ratio: 16 / 9; object-fit: cover; }
.sbd-item figcaption { padding: .45rem .6rem .55rem; font-size: .9rem; line-height: 1.4; color: var(--text); display: flex; gap: .4rem; align-items: flex-start; }
.sbd-item figcaption b { color: var(--amber); }
.sbd-item figcaption textarea { flex: 1; background: transparent; border: 1px solid transparent; resize: vertical; font: inherit; color: inherit; padding: .15rem .3rem; min-height: 1.8em; }
.sbd-item figcaption textarea:hover, .sbd-item figcaption textarea:focus { border-color: var(--line); background: rgba(0,0,0,.2); }
.sbd-tools { position: absolute; top: .4rem; right: .4rem; display: flex; gap: .2rem; background: rgba(12, 15, 21, .85); border-radius: 6px; padding: .15rem; opacity: 0; transition: opacity .15s; }
.sbd-item:hover .sbd-tools, .sbd-item:focus-within .sbd-tools { opacity: 1; }
.sbd-grid { display: grid; gap: .7rem; }
.sbd-empty { border: 1px dashed var(--line); border-radius: 8px; padding: 1.4rem; text-align: center; color: var(--faint); font-size: .9rem; }
.sbd-scene.none .sbd-head { opacity: .8; }
.sbd-list.reading { max-width: 1400px; }
.sbd-list.reading .sbd-item { border: 0; border-radius: 4px; }
.sbd-list.reading .sbd-empty { padding: .6rem; }
.sb-boards { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0 .8rem; }
.sb-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.sb-thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; cursor: pointer; border: 1px solid var(--line-soft, #2a3446); }
@media (max-width: 800px) { .sbd-wrap { grid-template-columns: 1fr; } .sbd-nav { display: none; } .sbd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* more views in the top bar: tighten on laptop screens so they all fit */
@media (max-width: 1560px) { .views a { padding: 0 .5rem; font-size: .93rem; } .topbar { gap: .8rem; } .book-title { max-width: 11rem; } }
@media (max-width: 1320px) { .views a { padding: 0 .38rem; font-size: .88rem; } .book-words { display: none; } .book-title { max-width: 8rem; } }