/* Style, Cast, Pictures and Book screens. Uses the tokens from app.css. */
.two { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.col-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-side { flex: 1 1 340px; display: flex; flex-direction: column; gap: 16px; }
.col-list { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.grow { flex: 1; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.row-btns .btn-primary { padding: 0 24px; white-space: nowrap; }
.row-btns .btn { min-height: 52px; }
.btn:disabled, .btn.disabled { color: var(--faint); background: var(--ground); border-color: var(--line); cursor: not-allowed; }
.btn.dashed { border-style: dashed; color: var(--teal); min-height: 48px; }
.spin { display: inline-block; flex: none; width: 14px; height: 14px; border: 2px solid #CFE0DE; border-top-color: var(--teal); border-radius: 50%; animation: spinr .9s linear infinite; }
@keyframes spinr { to { transform: rotate(360deg); } }
.placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 2 / 3; border-radius: 12px; background: var(--chip); color: var(--muted); font-size: 15px; text-align: center; padding: 16px; }
.placeholder.wide { aspect-ratio: 16 / 9; }
.placeholder.tall { aspect-ratio: 2 / 3; max-height: 72vh; width: min(100%, 480px); }
.placeholder.bad { background: var(--error-wash); color: var(--error); }
.frame img { width: 100%; border-radius: 12px; display: block; }
.seg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg2 button { min-height: 48px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--paper); cursor: pointer; }
.seg2 button[aria-pressed="true"] { border: 1.5px solid var(--teal); background: var(--teal-wash); color: var(--teal); font-weight: 600; }

/* style */
.own { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.own.on { border: 2px solid var(--teal); }
/* title, one line, her pictures (if any), then the button: no empty band */
.own { gap: 10px; }
.own > label.btn { align-self: flex-start; cursor: pointer; margin-top: 4px; }
.own-pics:empty { display: none; }
.own-title { font-weight: 600; }
.own-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.own-pics img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.preset { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-align: left; cursor: pointer; }
.preset[aria-pressed="true"] { border: 2px solid var(--teal); }
.preset .swatch { aspect-ratio: 3 / 2; width: 100%; border-radius: 10px; object-fit: cover; display: flex; align-items: center; justify-content: center; }
.sw-watercolour { background: linear-gradient(135deg, #E6EEF6, #F3E3D3); }
.sw-gouache { background: linear-gradient(135deg, #DCE7E3, #E9D8B8); }
.sw-ink { background: linear-gradient(135deg, #ECE7DF, #FFFFFF); }
.sw-pencil { background: linear-gradient(135deg, #EFEBD9, #F3DDE3); }
.pname { font-weight: 600; padding: 0 4px; }
.pdesc { font-size: 14px; color: var(--muted); padding: 0 4px 4px; }

/* cast */
.clist { display: flex; flex-direction: column; gap: 10px; }
.citem, .pitem { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-align: left; cursor: pointer; }
.citem[aria-current="true"], .pitem[aria-current="true"] { border: 2px solid var(--teal); }
.citem img, .citem .thumb-empty { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; }
.thumb-empty { display: block; background: var(--chip); }
.cmeta { display: flex; flex-direction: column; min-width: 0; }
.cname { font-weight: 600; }
.cstate { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.cstate.ok, .pill.ok { color: var(--success); }
.cstate.teal, .pill.teal { color: var(--teal); }
.cstate.bad, .pill.bad { color: var(--error); }
.cstate.muted, .cstate.busy, .pill.muted, .pill.busy { color: var(--muted); }
/* "Approved ◌ Drawing…": the drawing word beside her status word, in the quiet colour; on a narrow row it goes under it, each kept whole */
.cstate:has(.also-busy), .pill:has(.also-busy) { flex-wrap: wrap; white-space: nowrap; row-gap: 2px; }
.also-busy { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; }
.cast .col-main { display: flex; flex-direction: column; gap: 20px; }
.dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* the name's text lines up with the card under it; its box shows on hover */
.dname { font-size: 24px; font-weight: 600; border: 1px solid transparent; border-radius: 10px; padding: 4px 8px; margin-left: -9px; min-width: 0; max-width: 100%; background: transparent; }
.dname:hover, .dname:focus { border-color: var(--line-strong); }
.pill { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--teal-wash); }
img.sheet { width: 100%; max-height: 48vh; object-fit: contain; border-radius: 12px; background: #FBFAF7; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
fieldset.looks { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
fieldset.looks legend { padding: 0; margin-bottom: 10px; font-size: 15px; color: var(--muted); }
.spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.ta { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); resize: vertical; font-size: 16px; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); }
.inline .btn { min-height: 48px; }
.dfoot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; border-top: 1px solid #EEEBE5; padding-top: 20px; }
.spacer { flex: 1; }
.versions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vbtn { min-width: 44px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); cursor: pointer; }
.vbtn[aria-current="true"] { border: 2px solid var(--teal); }

/* pictures */
main.wrap:has(.pics), main.wrap:has(.bookview) { max-width: 1400px; }
.pics { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.plist { flex: 1 1 240px; max-width: 300px; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lock { width: 16px; height: 16px; flex: none; margin-right: 8px; vertical-align: -2px; }
a.btn .lock, a.btn-primary .lock { display: inline-block; }
/* out of date for one reason: the line and its keep-all press sit above the list; quiet, never red */
.keepall { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 10px; background: var(--ground); }
.keepall p { margin: 0; font-size: 15px; }
.keepall .btn { width: 100%; padding: 0 10px; }
.pitem img, .pitem .thumb-empty { width: 48px; height: 64px; border-radius: 6px; object-fit: cover; flex: none; }
.pmain { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.picwrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bigpic { max-width: 100%; max-height: 72vh; border-radius: 14px; display: block; }
/* min-width 0: the card is as wide as the list on a phone; the Change box shrinks to fit instead of pushing it off the screen */
.pside { flex: 1 1 260px; min-width: 0; max-width: 340px; display: flex; flex-direction: column; gap: 20px; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.storytext { margin: 0; font-family: var(--display); font-size: 18px; line-height: 1.55; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--ground); font-size: 15px; }
.pfoot { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #EEEBE5; padding-top: 20px; }
/* title above its status for every picture, so the header keeps one shape whatever the status says */
.pcard-head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pcard-head .pill { margin-left: 0; display: inline-flex; align-items: center; gap: 6px; }
/* a red "!" only for a drawing that didn't work */
.bang { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--error); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.pill.bad { background: var(--error-wash); }
/* out of date: a drawing made before a later change; quiet, beside her status word, never red */
.quiet { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 15px; font-weight: 500; }
.qdot { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--teal); }
.pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.pills .pill { margin-left: 0; }
.pcard-head .pills { margin-left: 0; }
.pill.quiet-pill { background: var(--ground); }
/* redrawing something that exists: the current version stays, dimmed, under "Drawing…" */
.redrawing { position: relative; display: flex; justify-content: center; width: 100%; }
.redrawing > img { opacity: .45; }
.redrawing-note { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: 999px; background: var(--paper); box-shadow: 0 2px 10px rgba(29,29,27,.15); font-weight: 600; white-space: nowrap; }
.pending { margin: 0; font-size: 15px; color: var(--muted); text-align: center; }
.pending q { color: var(--ink); }
/* Cast: "Say what they look like first." shares the Looks label's line */
.field-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.field-head .need { color: var(--error); font-weight: 600; }
/* beside the picture the list scrolls on its own, so picking one far down keeps the picture and her place in view */
@media (min-width: 761px) { .plist { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; } }
@media (max-width: 760px) {
  .plist, .pside { max-width: none; }
  /* the picture leaves room for its words and Looks right on the first screen */
  .bigpic, .placeholder.tall { max-height: 52vh; }
}

/* book */
.bookview { display: flex; flex-direction: column; gap: 16px; }
.bookview { --book-room: 280px; }
.spread { width: 100%; max-width: calc(var(--book-h, calc(100vh - var(--book-room))) * 4 / 3); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 28px rgba(29,29,27,.10); overflow: hidden; }
.page { position: relative; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; padding: 8%; }
.textpage { border-right: 1px solid var(--line); }
.booktext { margin: 0; font-family: var(--display); font-size: clamp(16px, 2vw, 24px); line-height: 1.6; }
.picpage { padding: 0; }
.picpage img { width: 100%; height: 100%; object-fit: cover; }
.pageno { position: absolute; bottom: 10px; font-size: 14px; color: var(--muted); }
/* the Book screen: every page keeps its 6 × 9 shape, and its words are set the way the PDF sets them (14 pt, 0.75 in margins,
   1.5 leading), so a page holds exactly what prints. 14 pt is 4.32% of the 4.5 in between the margins (cqi counts the page's
   content box). book.html sizes the spread to the window (--book-h) and shrinks a too-long page in the PDF's steps (--s). */
.bookview .page { overflow: hidden; container-type: inline-size; }
.bookview .textpage { padding: 12.5%; cursor: zoom-in; }
.bookview .words { width: 100%; }
.bookview .booktext { font-size: calc(4.32cqi * var(--s, 1)); line-height: 1.5; }
.bookview .booktext + .booktext { margin-top: .9em; }
.bookview .chapterhead { font-weight: 600; font-size: calc(5.4cqi * var(--s, 1)); line-height: 1.3; }
.bookview.reading .chapterhead { font-size: 26px; }
/* a tap on the words shows them alone at reading size; another tap (or Esc) goes back to the book */
main.wrap:has(.bookview) { padding-top: 24px; padding-bottom: 24px; }
.bookview.reading .bookctl, .bookview.reading .picpage { display: none; }
.bookview.reading .spread-wrap { width: 100%; }
.bookview.reading .spread { grid-template-columns: minmax(0, 1fr); max-width: 40em; }
.bookview.reading .textpage { aspect-ratio: auto; border-right: 0; cursor: zoom-out; padding: 40px 48px 56px; }
.bookview.reading .booktext { font-size: 22px; }
/* picture sizes (app/layout.py), set the way app/pdf.py prints them */
.spread { position: relative; }
.spread.size-spread .art { grid-column: 1 / -1; grid-row: 1; position: relative; overflow: hidden; }
.spread.size-spread .art img, .spread.size-spread .art .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spread.size-spread .textpage { grid-column: 1; grid-row: 1; z-index: 1; align-items: flex-start; border-right: 0; padding: 9%; }
.spread.size-spread .spacer { grid-column: 2; grid-row: 1; }
.spread.size-spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 48px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(29,29,27,.10), transparent); pointer-events: none; }
.words.panel { background: color-mix(in srgb, var(--paper) 90%, transparent); border-radius: 10px; padding: 5% 6%; }
.halfpage { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 4%; }
.bookview .halfpage { padding: 12.5%; }
.halfpic { flex: none; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; }
.halfpic.shape-square, .halfpic.shape-circle { aspect-ratio: 1; width: 80%; align-self: center; }
.halfpic.shape-circle { border-radius: 50%; }
.halfpic img, .halfpic .placeholder { width: 100%; height: 100%; object-fit: cover; }
.words.more { flex: 1 1 0; min-height: 0; overflow: hidden; }
.bookview .pageno { left: 0; right: 0; text-align: center; }
.spread.size-spread .textpage .pageno { display: none; }
.layoutctl { display: flex; flex-direction: column; gap: 8px; }
.layoutctl .seg3 { max-width: none; }
.layoutctl .seg3 button { font-size: 15px; }
.bookview.reading .art, .bookview.reading .halfpic, .bookview.reading .halfpage .pageno, .bookview.reading .spread::after { display: none; }
.bookview.reading .picpage.halfpage { display: block; aspect-ratio: auto; padding: 0 48px 56px; }
.bookview.reading .words.panel { background: none; padding: 0; }
/* paging, Unlock, page strip and footer sit under the book, as wide as it */
.bookctl { width: 100%; max-width: calc(var(--book-h, calc(100vh - var(--book-room))) * 4 / 3); margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.bookctl .unlock { align-self: center; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.bookctl .strip > :first-child { margin-left: auto; }
.bookctl .strip > :last-child { margin-right: auto; }
.booknav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pages { font-weight: 600; }
.strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.strip button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; font-size: 14px; flex: none; }
.strip button[aria-current="true"] { border: 2px solid var(--teal); }
.strip button { position: relative; }
.strip button .bang, .strip button .qdot { position: absolute; top: 2px; right: 2px; }
.strip button .qdot { top: 4px; right: 4px; background: var(--paper); }
.strip img, .strip .thumb-empty { width: 56px; height: 84px; object-fit: cover; border-radius: 4px; }
.bookfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
/* computer screens: Back, the page count, Next and Unlock share one row, and the spread leaves room for the strip under them */
@media (min-width: 761px) {
  .bookview { --book-room: 336px; }
  .bookctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nav unlock" "layout layout" "strip strip" "foot foot"; align-items: center; gap: 16px 24px; }
  .bookctl .booknav { grid-area: nav; }
  .bookctl .unlock { grid-area: unlock; }
  .bookctl .strip { grid-area: strip; }
  .bookctl .layoutctl { grid-area: layout; flex-direction: row; flex-wrap: wrap; }
  .bookctl .layoutctl .seg3 { flex: 1 1 320px; }
  .bookctl .bookfoot { grid-area: foot; }
}
/* wide computer screens (most laptops are wide and short): the controls sit beside the book, so the book gets the full height */
@media (min-width: 1100px) {
  .bookview:not(.reading) { flex-direction: row; justify-content: center; align-items: flex-start; gap: 32px; }
  .bookview:not(.reading) .spread-wrap { flex: 0 1 calc(var(--book-h, 600px) * 4 / 3); min-width: 0; }
  .bookview:not(.reading) .bookctl { flex: 0 0 300px; max-width: none; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .bookview:not(.reading) .bookctl .unlock, .bookview:not(.reading) .bookctl .download { align-self: stretch; }
  .bookview:not(.reading) .strip { flex-wrap: wrap; overflow: auto; max-height: calc(var(--book-h, 600px) - 490px); }
  .bookview:not(.reading) .bookctl .layoutctl { flex-direction: column; }
  .bookview:not(.reading) .bookctl .layoutctl .seg3 { flex: none; }
  .bookview:not(.reading) .strip > :first-child, .bookview:not(.reading) .strip > :last-child { margin: 0; }
  .bookview:not(.reading) .strip img, .bookview:not(.reading) .strip .thumb-empty { width: 40px; height: 60px; }
}
@media (max-width: 640px) {
  .spread { grid-template-columns: minmax(0, 1fr); }
  .textpage { aspect-ratio: auto; padding-bottom: 40px; border-right: 0; border-bottom: 1px solid var(--line); }
  .bookview .textpage { cursor: auto; }
  .bookview .booktext { font-size: 17px; }
  .spread.size-spread .art { grid-row: 1; aspect-ratio: 4 / 3; }
  .spread.size-spread .textpage { grid-row: 2; padding: 24px 24px 40px; }
  .spread.size-spread .spacer, .spread.size-spread::after { display: none; }
  .words.panel { background: none; padding: 0; }
  .halfpage { aspect-ratio: auto; }
  .words.more { flex: none; overflow: visible; }
}

/* storyboard (Story screen) */
.board { display: flex; flex-direction: column; gap: 16px; }
.board .spread { max-width: 620px; }
.board .booknav { flex-wrap: wrap; }
.board .booktext { font-size: clamp(15px, 1.6vw, 20px); }
.plan-pic { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 10%; text-align: center;
  background: repeating-linear-gradient(135deg, var(--ground), var(--ground) 10px, var(--paper) 10px, var(--paper) 20px); border: 2px dashed var(--line-strong); border-radius: 4px; }
.plan-shot { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--teal); }
.plan-caption { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.45; }
.plan-names { font-size: 14px; color: var(--muted); }
.editor { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid #EEEBE5; padding-top: 16px; }
.seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.seg3 button { min-height: 44px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--paper); cursor: pointer; }
.seg3 button[aria-pressed="true"], .chip.pick[aria-pressed="true"] { border: 1.5px solid var(--teal); background: var(--teal-wash); color: var(--teal); font-weight: 600; }
.chip.pick { min-height: 44px; border: 1px solid var(--line-strong); background: var(--paper); cursor: pointer; }
details.brief summary { cursor: pointer; color: var(--teal); font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 12px; list-style: none; }
details.brief summary::-webkit-details-marker { display: none; }
/* a chevron that points right while closed and turns down when open, so the line reads as something that opens */
details.brief summary::before { content: ""; flex: none; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .2s ease; }
details.brief[open] summary::before { transform: translateY(-2px) rotate(45deg); }
details.brief .ta { margin-top: 8px; font-size: 15px; }
.pick-hint { margin: 0; font-weight: 600; color: var(--teal); }
.spread.picking .textpage { background: var(--teal-wash); }
.clause { display: inline; font: inherit; color: inherit; background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; border-radius: 4px; }
.clause:hover, .clause:focus-visible { background: #fff; outline: 2px solid var(--teal); }
.clause.on { background: var(--teal); color: #fff; }
.thumb-plan { display: block; width: 56px; height: 84px; border-radius: 4px; border: 1.5px dashed var(--line-strong); background: var(--ground); }
.strip button.drop { border: 2px dashed var(--teal); }
.seg2.narrow { max-width: 360px; }
/* computer screen: the spread with its page strip on the left, the editor beside it */
@media (min-width: 1000px) {
  .board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-areas: "spread editor" "nav editor" "strip editor"; align-items: start; gap: 16px 32px; }
  .board .spread { grid-area: spread; max-width: min(860px, calc((100vh - 300px) * 4 / 3)); }
  .board .booknav { grid-area: nav; width: 100%; max-width: min(860px, calc((100vh - 300px) * 4 / 3)); margin: 0 auto; }
  .board .strip { grid-area: strip; justify-self: center; max-width: 100%; }
  .board .editor { grid-area: editor; border-top: 0; padding-top: 0; border-left: 1px solid #EEEBE5; padding-left: 32px; }
}
.board .page { overflow-y: auto; align-items: flex-start; }
.board .picpage { align-items: stretch; }
.clause-no { display: block; margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--error-wash); color: var(--error); font-family: var(--ui); font-size: 15px; font-style: normal; }
.ta.fit { min-height: 0; resize: none; overflow: hidden; }
@media (max-width: 640px) { .board .spread.picking .picpage, .board .spread.no-room .picpage { display: none; } }
.pick-none { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pick-none .pick-hint { flex: 1 1 220px; }
.dfoot .btn-primary { display: inline-flex; align-items: center; text-decoration: none; }
.bookctl .download { align-self: center; align-items: center; grid-area: unlock; }
.bookctl .download p { margin: 0; font-size: 15px; }

/* All pictures: the whole book as thumbnails, one line each, names underlined (Adam, 5 Nov) */
.overview { display: flex; flex-direction: column; gap: 24px; }
.ov-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.ov-card { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.ov-card[aria-current="true"] { border: 2px solid var(--teal); }
.ov-art { display: flex; aspect-ratio: 2 / 3; width: 100%; border-radius: 8px; overflow: hidden; background: var(--chip); }
.ov-art img { width: 100%; height: 100%; object-fit: cover; }
.ov-plan { margin: auto; font-size: 14px; color: var(--muted); }
.ov-n { font-size: 14px; color: var(--muted); font-weight: 600; }
.ov-line { margin: 0; font-size: 15px; line-height: 1.4; }
.ov-line u { text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.ov-also { color: var(--muted); }
/* the next step stays at the bottom of the window however far down the cards she is; at the end it sits after the last card */
main.wrap:has(.overview) { padding-bottom: 0; }
html:has(.ov-foot) { scroll-padding-bottom: 88px; }
.ov-foot { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); }
@media (max-width: 480px) { .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.cast .remove { align-self: flex-start; }