/* Unsubbed Script: layout, the paper and print. Kit tokens plus our own below. */
:root { --app: #6d3bf5; --app-dark: #a98bff; }
:root { --paper: #fffcf5; --print-ink: #000; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1d2122; }
}
:root[data-theme="dark"] { --paper: #1d2122; }

#app { max-width: 1240px; }

/* Left panel */
.panel h2 { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .25rem 0 .5rem; }
.panel section + section, .more { margin-top: 1rem; }
#elements .u-btn { width: 100%; justify-content: space-between; border-color: transparent; margin-bottom: 2px; }
#elements .u-btn:hover { border-color: var(--line); }
/* No background fade: the label turns white at once, so a fade would hide it for a moment */
#elements .u-btn { transition-property: border-color, transform; }
#elements [aria-pressed="true"] { background: var(--accent-strong); color: var(--accent-ink); }
kbd { font: .75rem var(--font); opacity: .75; }
.short { display: none; }
#scenes { margin: 0 -.5rem; padding: 0; list-style: none; font-size: .875rem; }
#scenes button {
  display: flex; gap: .5rem; justify-content: space-between; width: 100%; min-height: 36px; padding: .375rem .5rem;
  border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
#scenes button:hover { background: var(--accent-soft); }
#scenes .pg { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
#scenes:not(:empty) + .empty { display: none; }
.empty { margin: 0; font-size: .875rem; color: var(--muted); }
.script-btns .u-btn { width: 100%; margin-bottom: .375rem; }
.more summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.check { display: flex; align-items: center; gap: .5rem; min-height: 40px; }
.check input { min-height: 0; width: 1.125rem; height: 1.125rem; accent-color: var(--accent-strong); }

/* Top strip */
#strip { width: 816px; max-width: 100%; margin: 0 auto .75rem; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }

/* The paper. 1in = 10ch in Courier, so ch units give real page geometry. */
#paper {
  --l: 1.15em;
  font: 16px/1.15 "Courier Prime", "Courier New", Courier, monospace;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow);
  width: 85ch; max-width: 100%; min-height: 110ch; margin: 0 auto; padding: 10ch 10ch 10ch 15ch;
  white-space: pre-wrap; overflow-wrap: anywhere; counter-reset: sc; caret-color: var(--accent-strong);
}
/* The caret already shows focus; a ring round the whole page is noise, so just tint the edge. */
#paper:focus-visible { outline: none; border-color: var(--accent-line); }
/* Indents are padding, so every block spans the 60ch text column and its left edge is the margin line. */
#paper p { position: relative; margin: var(--l) 0 0; min-height: var(--l); scroll-margin: 6rem 0; }
#paper [data-t="scene"] { margin-top: calc(2 * var(--l)); font-weight: bold; text-transform: uppercase; counter-increment: sc; --tag: "Scene Heading"; }
#paper [data-t="action"] { --tag: "Action"; }
#paper [data-t="character"] { padding-left: 22ch; text-transform: uppercase; --tag: "Character"; }
#paper [data-t="paren"] { margin-top: 0; padding: 0 16ch; --tag: "Parenthetical"; }
#paper [data-t="dialogue"] { margin-top: 0; padding: 0 15ch 0 10ch; --tag: "Dialogue"; }
#paper [data-t="transition"] { text-align: right; text-transform: uppercase; --tag: "Transition"; }
#paper p:first-child { margin-top: 0; }

/* Element tag and scene numbers in the left margin */
#paper .cur::after, #paper.numbered [data-t="scene"]::after {
  position: absolute; top: .2em; right: calc(100% + .75rem); white-space: nowrap;
  font: 600 .6875rem/1.4 var(--font); color: var(--muted); text-transform: none;
  pointer-events: none; user-select: none;
}
#paper .cur::after { content: var(--tag); }
#paper.numbered [data-t="scene"]::after { content: counter(sc) "."; color: var(--ink); }
#paper.numbered [data-t="scene"].cur::after { content: var(--tag) "  " counter(sc) "."; }

/* Quick fill popup (positioned from app.js) */
#qf {
  position: absolute; z-index: 30; margin: 0; padding: .25rem; list-style: none; min-width: 12rem; max-width: calc(100vw - 1rem);
  background: var(--surface); color: var(--ink); border: 1px solid var(--accent-line); border-radius: 10px; box-shadow: var(--shadow);
  font: .875rem/1.3 "Courier Prime", "Courier New", Courier, monospace;
}
#qf li { padding: .5rem .625rem; border-radius: 6px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qf li:hover { background: var(--accent-soft); }
#qf [aria-selected="true"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: bold; }
#print-title { display: none; }

/* Estimated page starts */
#paper [data-pg] { border-top: 1.75rem solid transparent; }
#paper [data-pg]::before {
  content: "Page " attr(data-pg); position: absolute; top: -1.4rem; left: -25%; right: -16.667%;
  border-top: 1px dashed var(--muted); padding-top: .125rem; text-align: right;
  font: .6875rem/1.2 var(--font); color: var(--muted); text-transform: none; font-weight: normal;
  pointer-events: none; user-select: none;
}

@media (min-width: 960px) {
  #app { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .panel { position: sticky; top: 4.75rem; max-height: calc(100dvh - 5.75rem); overflow: auto; padding: .75rem; }
  .more summary { display: none; }
  /* Shrink the type (not the geometry) so the 85ch page fits next to the panel */
  #paper { font-size: min(16px, calc((100vw - 21rem) / 51)); }
}

/* Phones and narrow windows: strip, paper, Scenes & export, then a sticky chip row */
@media screen and (max-width: 959.98px) {
  #app { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 0; }
  .panel { display: contents; }
  .desk { order: -1; }
  .more { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 1rem .5rem; }
  #elements {
    order: 1; position: sticky; bottom: 0; z-index: 5; display: flex; gap: .375rem; overflow-x: auto;
    margin: 0 -1rem; padding: .5rem 1rem; background: var(--surface); border-top: 1px solid var(--line);
  }
  #elements h2, #elements kbd, .long { display: none; }
  #elements .u-btn { flex: none; width: auto; margin: 0; border-color: var(--line); border-radius: 999px; }
  .short { display: inline; }
  #paper { font-size: 15px; width: auto; min-height: 60vh; padding: 1rem; }
  #paper [data-t="character"] { padding-left: 35%; }
  #paper [data-t="paren"] { padding: 0 15% 0 25%; }
  #paper [data-t="dialogue"] { padding: 0 10% 0 15%; }
  #paper p::after { display: none; }
  #paper [data-pg]::before { left: 0; right: 0; }
  #strip { width: auto; }
}
/* Phones: tighter header so "Unsubbed Script" fits beside the four buttons */
@media screen and (max-width: 430px) {
  .u-bar { gap: .25rem; padding-inline: .625rem; }
  .u-brand { gap: .375rem; }
  .u-brand img { width: 28px; height: 28px; }
  .u-brand span { font-size: 1rem; letter-spacing: -.03em; }
  .u-bar .u-btn { width: 38px; min-height: 38px; }
}

/* Print / PDF (SPEC §7). Numbers "2." from script page 2; the title page resets the counter so it isn't counted.
   Chrome clips what's outside the page area, so part of each side margin is padding on #paper / #print-title
   (room for scene numbers): left 1.5in = .75in + .75in, right 1in = .3in + .7in (A4 .77in = .07in + .7in). */
@counter-style blank { system: cyclic; symbols: ""; }
@counter-style pg { system: extends decimal; range: 2 infinite; fallback: blank; }
@counter-style dot { system: cyclic; symbols: "."; range: 2 infinite; fallback: blank; }
@page { size: letter; margin: 1in .3in 1in .75in; @top-right { content: counter(page, pg) counter(page, dot); padding-right: .7in; font: 12pt "Courier Prime", "Courier New", Courier, monospace; } }
@page cover { counter-reset: page 0; }
@page a4 { size: A4; margin: 1in .07in 1in .75in; }
@page a4cover { size: A4; margin: 1in .07in 1in .75in; counter-reset: page 0; }
@media print {
  .u-bar, .u-foot, .panel, #strip, .u-toast { display: none !important; }
  body { background: none; }
  #app { display: block; max-width: none; margin: 0; padding: 0; }
  #print-title.on, #paper { padding: 0 .7in 0 .75in; }
  .a4 #paper { page: a4; }
  #print-title.on {
    display: flex; flex-direction: column; justify-content: space-between; height: 8.9in; page: cover; break-after: page;
    font: 12pt/12pt "Courier Prime", "Courier New", Courier, monospace; color: var(--print-ink); white-space: pre-wrap;
  }
  .a4 #print-title.on { height: 9.6in; page: a4cover; }
  #print-title > div:first-child { margin-top: 2.7in; text-align: center; }
  #print-title p { margin: 0 0 12pt; }
  #print-title p:empty { display: none; }
  #print-title [data-k="title"] { margin-bottom: 48pt; text-transform: uppercase; }
  #paper {
    --l: 12pt; font: 12pt/12pt "Courier Prime", "Courier New", Courier, monospace; color: var(--print-ink);
    width: auto; max-width: none; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  #paper [data-pg] { border-top: 0; }
  #paper .cur::after, #paper [data-pg]::before, #paper p::after { content: none; }
  #paper [data-t="scene"], #paper [data-t="character"] { break-after: avoid; }
  #paper [data-t="paren"] { break-inside: avoid; }
  /* scene numbers on both sides */
  #paper.numbered [data-t="scene"]::before, #paper.numbered [data-t="scene"]::after, #paper.numbered [data-t="scene"].cur::after {
    content: counter(sc) "."; position: absolute; top: 0; font: inherit; color: inherit; white-space: nowrap; border: 0; padding: 0;
  }
  #paper.numbered [data-t="scene"]::before { left: auto; right: calc(100% + 2ch); }
  #paper.numbered [data-t="scene"]::after, #paper.numbered [data-t="scene"].cur::after { right: auto; left: calc(100% + 2ch); }
}