/* The free tools: /call-sheet-template and /shot-list-template.
 * The editors use the design tokens like the rest of the site. The call sheet
 * and the printed shot list are paper, so they are black on white in both
 * themes and use plain colors. */

.tl { padding: clamp(32px, 5vw, 64px) 0 var(--lp-section-pad); background: var(--pp-bg-canvas); }
.tl-head { display: grid; gap: var(--pp-space-5); margin-bottom: var(--pp-space-8); }
.tl-head__copy { display: grid; gap: var(--pp-space-3); max-width: 720px; }
.tl-actions { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); }
@media (min-width: 900px) { .tl-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ── Form ───────────────────────────────────────────────────────────────── */
.tl-form { display: grid; gap: var(--pp-space-4); min-width: 0; }
.tl-group { min-width: 0; margin: 0; padding: var(--pp-space-5); background: var(--pp-bg-surface); border: var(--pp-border-width) solid var(--pp-border); border-radius: var(--pp-radius-xl); }
.tl-group__title { float: left; width: 100%; padding: 0; margin-bottom: var(--pp-space-4); font: var(--pp-weight-bold) var(--pp-h4-size) / var(--pp-h4-line) var(--pp-font-heading); color: var(--pp-text); }
.tl-group__title + * { clear: both; }
.tl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pp-space-3); }
.tl-span { grid-column: 1 / -1; }
.tl-form textarea.pp-input { min-height: 0; }
.tl-add { margin-top: var(--pp-space-3); }
.tl-add .pp-icon { width: 16px; height: 16px; }

/* Rows: a small card each, with its own labels. */
.tl-list { display: grid; gap: var(--pp-space-2); container-type: inline-size; }
.tl-row { display: grid; gap: var(--pp-space-2); padding: var(--pp-space-2-5, 10px); background: var(--pp-bg-canvas); border: var(--pp-border-width) solid var(--pp-border-subtle); border-radius: var(--pp-radius-lg); }
.tl-f { gap: 2px; }
.tl-f .pp-field__label { font-size: var(--pp-caption-size); line-height: var(--pp-caption-line); font-weight: var(--pp-weight-medium); color: var(--pp-text-muted); }
.tl-row__acts { grid-area: acts; display: flex; gap: 2px; justify-self: end; align-self: start; }
.tl-row__acts .pp-btn { color: var(--pp-text-muted); }
.tl-row__acts .pp-btn:hover:not(:disabled) { color: var(--pp-text); }
.tl-row__acts .pp-btn:disabled { background: transparent; color: var(--pp-text-disabled); }
.tl-row:is(.tl-row--schedule, .tl-row--cast, .tl-row--crew) > .tl-row__acts { flex-direction: column; justify-content: center; }
.tl-up .pp-icon { transform: rotate(-90deg); }
.tl-down .pp-icon { transform: rotate(90deg); }

/* Narrow: the row's buttons stand in a column on the right. */
.tl-row--schedule { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "time scene pages acts" "set set set acts" "cast cast cast acts"; }
.tl-row--schedule .tl-f--time { grid-area: time; }
.tl-row--schedule .tl-f--scene { grid-area: scene; }
.tl-row--schedule .tl-f--pages { grid-area: pages; }
.tl-row--schedule .tl-f--set { grid-area: set; }
.tl-row--schedule .tl-f--cast { grid-area: cast; }
.tl-row--cast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "name role acts" "call set acts"; }
.tl-row--cast .tl-f--name { grid-area: name; }
.tl-row--cast .tl-f--role { grid-area: role; }
.tl-row--cast .tl-f--call { grid-area: call; }
.tl-row--cast .tl-f--set { grid-area: set; }
.tl-row--crew { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "role name acts" "phone call acts"; }
.tl-row--crew .tl-f--role { grid-area: role; }
.tl-row--crew .tl-f--name { grid-area: name; }
.tl-row--crew .tl-f--phone { grid-area: phone; }
.tl-row--crew .tl-f--call { grid-area: call; }
@container (min-width: 520px) {
  .tl-row--schedule > .tl-row__acts { flex-direction: row; }
  .tl-row--schedule { grid-template-columns: 7.5rem 4.5rem minmax(0, 1fr) 4.5rem auto; grid-template-areas: "time scene set pages acts" "cast cast cast cast cast"; }
}
@container (min-width: 600px) {
  .tl-row--cast > .tl-row__acts, .tl-row--crew > .tl-row__acts { flex-direction: row; }
  .tl-row--cast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 7.5rem 7.5rem auto; grid-template-areas: "name role call set acts"; }
  .tl-row--crew { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 8.5rem 7.5rem auto; grid-template-areas: "role name phone call acts"; }
}

/* ── Call sheet: the form beside the page ───────────────────────────────── */
.tl-work { --tl-paper: min(560px, 46%, calc((100vh - var(--lp-nav-h) - 140px) * 0.7727)); display: grid; gap: var(--pp-space-6); align-items: start; }
@media (min-width: 1000px) { .tl-work { grid-template-columns: minmax(0, 1fr) var(--tl-paper); } }
.tl-preview { display: grid; gap: var(--pp-space-3); justify-items: center; min-width: 0; }
@media (min-width: 1000px) { .tl-preview { position: sticky; top: calc(var(--lp-nav-h) + var(--pp-space-4)); } }
.tl-paper { position: relative; width: 100%; max-width: 816px; overflow: hidden; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px var(--pp-border), var(--pp-shadow-lg); }

.cs {
  box-sizing: border-box; width: 816px; min-height: 1056px; padding: 40px 44px 28px;
  display: flex; flex-direction: column; transform-origin: 0 0;
  background: #fff; color: #111; font: 400 12px/1.38 var(--pp-font-body);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cs *, .sl-sheet * { box-sizing: border-box; }
.cs p, .cs h2, .cs h3 { margin: 0; }
.cs__in { display: grid; gap: 1.5em; }
.cs-label { display: block; font: 700 0.74em/1.3 var(--pp-font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: #555; }
.cs-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.6em; align-items: start; padding-bottom: 1.3em; border-bottom: 2px solid #111; }
.cs-top__contacts { display: grid; gap: 0.6em; }
.cs-contact { display: grid; }
.cs-contact b { font-weight: 600; }
.cs-top__mid { display: grid; justify-items: center; text-align: center; }
.cs-title { font: 700 2.5em/1.05 var(--pp-font-heading); letter-spacing: 0.01em; text-transform: uppercase; overflow-wrap: anywhere; }
.cs-company { margin-top: 0.3em; color: #555; }
.cs-call { display: grid; justify-items: center; margin-top: 1em; padding: 0.5em 1.4em 0.6em; border: 2px solid #111; border-radius: 0.4em; }
.cs-call b { font: 700 2.5em/1.05 var(--pp-font-heading); font-variant-numeric: tabular-nums; }
.cs-times { margin-top: 0.6em; color: #333; white-space: pre-wrap; }
.cs-top__day { display: grid; gap: 0.2em; justify-items: end; text-align: right; }
.cs-day { font: 700 1.6em/1.15 var(--pp-font-heading); }
.cs-date { font-weight: 600; }
.cs-weather { margin-top: 0.6em; color: #333; white-space: pre-line; }

.cs-boxes { display: grid; border: 1px solid #bbb; }
.cs-boxes--0 { display: none; }
.cs-boxes--2 { grid-template-columns: 1fr 1fr; }
.cs-boxes--3 { grid-template-columns: 1fr 1fr 1fr; }
.cs-box { padding: 0.75em 0.9em; }
.cs-box + .cs-box { border-left: 1px solid #bbb; }
.cs-place b { display: block; font-weight: 600; }
.cs-place span { display: block; white-space: pre-line; color: #333; }
.cs-h { margin: 0 0 0.45em; font: 700 0.82em/1.2 var(--pp-font-heading); letter-spacing: 0.08em; text-transform: uppercase; color: #111; }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table th { padding: 0.35em 0.55em; text-align: left; font: 700 0.72em/1.2 var(--pp-font-heading); letter-spacing: 0.06em; text-transform: uppercase; color: #555; border-bottom: 1.5px solid #111; }
.cs-table td { padding: 0.42em 0.55em; vertical-align: top; border-bottom: 1px solid #ddd; overflow-wrap: anywhere; }
.cs-table tr { break-inside: avoid; }
.cs-band td { background: #efefef; font-weight: 600; }
.cs-c-time { width: 6.4em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-c-sc { width: 3.2em; font-weight: 600; }
.cs-c-cast { width: 24%; }
.cs-c-pg { width: 4.4em; white-space: nowrap; }
.cs-c-n { width: 2.2em; color: #555; }
.cs-c-phone { width: 8.6em; white-space: nowrap; }
.cs-crew--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em; align-items: start; }
.cs-notes { white-space: pre-line; }
.cs-foot { margin-top: auto; padding-top: 1.4em; text-align: right; font-size: 0.75em; color: #666; }

/* ── Shot list: one table ───────────────────────────────────────────────── */
.tl-form--wide { container-type: inline-size; gap: var(--pp-space-5); }
.tl-grid--title { max-width: 720px; }
.sl-table { display: grid; gap: var(--pp-space-2); }
.sl-row--head { display: none; }
.sl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-areas: "scene shot acts acts" "size size angle angle" "move move lens min" "desc desc desc desc" "cast cast cast cast"; }
.sl-row .tl-f--scene { grid-area: scene; }
.sl-row .tl-f--shot { grid-area: shot; }
.sl-row .tl-f--size { grid-area: size; }
.sl-row .tl-f--angle { grid-area: angle; }
.sl-row .tl-f--move { grid-area: move; }
.sl-row .tl-f--lens { grid-area: lens; }
.sl-row .tl-f--desc { grid-area: desc; }
.sl-row .tl-f--cast { grid-area: cast; }
.sl-row .tl-f--min { grid-area: min; }
.sl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pp-space-3); }
.sl-foot .tl-add { margin-top: 0; }
.sl-total { color: var(--pp-text-muted); font-variant-numeric: tabular-nums; }
@container (min-width: 600px) {
  .sl-row { grid-template-columns: 4.5rem 4.5rem repeat(3, minmax(0, 1fr)) auto; grid-template-areas: "scene shot size angle move acts" "lens min desc desc cast cast"; }
}
@container (min-width: 1040px) {
  .sl-table { gap: 0; border: var(--pp-border-width) solid var(--pp-border); border-radius: var(--pp-radius-xl); background: var(--pp-bg-surface); overflow: hidden; }
  .sl-list { gap: 0; }
  .sl-row, .sl-row--head { display: grid; gap: var(--pp-space-1); padding: 6px var(--pp-space-2); border: 0; border-bottom: var(--pp-border-width) solid var(--pp-border-subtle); border-radius: 0; background: none;
    grid-template-columns: 4rem 3.5rem 10.5rem 10.5rem 7rem 4.5rem minmax(0, 1fr) 8rem 4rem auto; grid-template-areas: "scene shot size angle move lens desc cast min acts"; }
  .sl-list .sl-row:last-child { border-bottom: 0; }
  .sl-row--head { padding-block: var(--pp-space-2); background: var(--pp-bg-sunken); }
  .sl-row--head span { padding-inline: var(--pp-space-1); font: var(--pp-weight-bold) var(--pp-colhead-size) / var(--pp-colhead-line) var(--pp-font-heading); letter-spacing: var(--pp-colhead-track); text-transform: uppercase; color: var(--pp-text-muted); }
  .sl-row .pp-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sl-row .tl-row__acts { align-self: center; }
}
.sl-print { display: none; }

/* ── The line at the end ────────────────────────────────────────────────── */
.tl-next { padding: var(--pp-space-10) 0; background: var(--pp-bg-surface); border-top: var(--pp-border-width) solid var(--pp-border-subtle); }
.tl-next__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pp-space-4) var(--pp-space-8); }
.tl-next p { max-width: 720px; font-size: var(--pp-body-lg-size); line-height: var(--pp-body-lg-line); color: var(--pp-text); text-wrap: pretty; }

/* ── Print: only the paper ──────────────────────────────────────────────── */
@media print {
  html, body { background: #fff !important; }
  body > :not(main), .tl-head, .tl-form, .tl-preview__btns, .tl-next { display: none !important; }
  main, .tl, .tl > .lp-wrap, .tl-work, .tl-preview, .tl-paper {
    display: block !important; position: static !important; width: auto !important; height: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; overflow: visible !important;
  }
  .cs { transform: none !important; }
  .sl-print { display: block; padding: 0 0.4in; }
}
.sl-sheet { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; color: #111; font: 400 8.5pt/1.32 var(--pp-font-body); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sl-sheet .sl-gap td { height: 0.4in; padding: 0; border: 0; }
.sl-sheet tfoot .sl-gap td { vertical-align: bottom; padding-bottom: 0.16in; text-align: right; }
.sl-credit { font-size: 7pt; color: #666; }
.sl-title th { padding: 0 0 0.12in; border: 0; text-align: left; }
.sl-title__name { font: 700 15pt/1.2 var(--pp-font-heading); }
.sl-title__sum { float: right; padding-top: 4pt; font-size: 9pt; color: #555; }
.sl-cols th { padding: 4pt 5pt; text-align: left; font: 700 7pt/1.2 var(--pp-font-heading); letter-spacing: 0.06em; text-transform: uppercase; color: #555; border-bottom: 1.5px solid #111; }
.sl-sheet tbody td { padding: 4.5pt 5pt; vertical-align: top; border-bottom: 1px solid #ddd; overflow-wrap: anywhere; }
.sl-sheet tbody tr { break-inside: avoid; }
.sl-sheet td.sl-c-scene, .sl-sheet td.sl-c-shot { font-weight: 600; }
.sl-sheet col.sl-c-scene { width: 0.55in; }
.sl-sheet col.sl-c-shot { width: 0.5in; }
.sl-sheet col.sl-c-size { width: 0.6in; }
.sl-sheet col.sl-c-angle { width: 1.15in; }
.sl-sheet col.sl-c-move { width: 0.95in; }
.sl-sheet col.sl-c-lens { width: 0.65in; }
.sl-sheet col.sl-c-cast { width: 1.5in; }
.sl-sheet col.sl-c-min { width: 0.5in; }