/* Wave 4: scripts.

   Loads after hub.css and the wave 2 and 3 files (Propshaft includes the
   folder alphabetically), so a rule here wins over the same selector there.
   Tokens come from hub.css :root; nothing is redefined. Six parts:

   1. The script as a typographic object: HOOK, BODY, CLOSE under faint labels.
   2. The editor: one sheet, three growing sections, the About rail, the
      proposal, the saving states.
   3. The decision pane: candidates by their hook, the fold, the picker, the
      queue as a chip strip on a phone, the blur-in on each swap.
   4. The library as a shelf: rows that open inline.
   5. The script page: context strip, compact actions on a phone.
   6. Categories: the arriving row, the collapsing row. */

/* ---------- 1. Script blocks ---------- */

/* wave4-media.css draws the same blocks as grey boxes for the editing
   queue. On the pages here they are typography on one surface, so the box
   is taken off explicitly rather than left to load order. */
.script-blocks {
  display: grid;
  gap: 14px;
  margin-top: 0;
}

.script-block {
  display: grid;
  gap: 3px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.script-block-label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.script-block-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  /* The author's line breaks are the structure of the body: directions on
     one line, the spoken line on the next. */
  white-space: pre-line;
}

.script-block-empty {
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--fs-body);
}

.script-blocks-compact {
  gap: 10px;
}

.script-blocks-compact .script-block-text {
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---------- 2. The editor ---------- */

.editor-head .crumb {
  margin-bottom: 4px;
}

.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) 260px;
  gap: var(--s6);
  align-items: start;
}

/* One white sheet, no inner card. The 28px side padding is the margin the
   labels sit in on a laptop. */
.editor-sheet {
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 28px 22px;
  min-width: 0;
}

.editor-title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.editor-h1 {
  flex: 1;
  margin: 0;
  min-width: 0;
}

/* The title is the h1, typed into. Borderless so it reads as a heading and
   not as a field; the focus ring is the one the hub already draws. */
.editor-title {
  width: 100%;
  border: 0;
  padding: 2px 0;
  background: transparent;
  font-family: "Quicksand", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--ink);
  border-radius: var(--r-xs);
}

.editor-title::placeholder {
  color: var(--ink-mute);
  opacity: 1;
}

.editor-title:focus {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

.editor-sub {
  margin-top: 2px;
}

/* "Saved", "Saving…", or the sentence that says the text is safe. Quiet
   next to the title; it blurs in when it changes state. */
.editor-status {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  white-space: nowrap;
  min-height: 1.2em;
}

.editor-status.is-saved,
.editor-status.is-failed {
  animation: fade-rise var(--dur-base) var(--ease-out);
}

.editor-status.is-saving {
  color: var(--ink-mute);
  background-image: linear-gradient(100deg, var(--ink-mute) 30%, var(--ink) 50%, var(--ink-mute) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: btn-shimmer 1.8s var(--ease-in-out) infinite;
}

.editor-status.is-failed {
  color: var(--warn-ink);
}

.editor-sections {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

/* A section: label in the left margin, text beside it, and a 2px forest bar
   at the sheet's edge while the section has focus. The bar grows in from
   nothing rather than appearing. */
.editor-section {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 12px;
  align-items: baseline;
  animation: fade-rise var(--dur-enter) var(--ease-out) both;
}

.editor-section:nth-child(2) { animation-delay: 40ms; }
.editor-section:nth-child(3) { animation-delay: 80ms; }

.editor-section::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--forest);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 180ms var(--ease-out);
}

.editor-section:focus-within::before {
  transform: scaleY(1);
}

.editor-label {
  font-size: var(--fs-label);
  line-height: 1.6;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 4px;
  cursor: text;
}

/* Borderless, growing with the text. field-sizing is the browser's own way;
   the controller sets the height where it is missing. */
.editor-text {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  resize: none;
  overflow: hidden;
  field-sizing: content;
  min-height: 1.6em;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
}

.editor-text:focus {
  outline: none;
  box-shadow: none;
}

.editor-text::placeholder {
  color: var(--ink-mute);
  opacity: 1;
}

.editor-text-body {
  font-size: 15.5px;
  line-height: 1.65;
}

/* While a draft is being written: the labels sweep and the text dims into a
   skeleton. No spinner; the sheet itself says it is working. */
.editor.is-writing .editor-label {
  background-image: linear-gradient(100deg, var(--ink-mute) 30%, var(--ink) 50%, var(--ink-mute) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: btn-shimmer 2s var(--ease-in-out) infinite;
}

.editor.is-writing .editor-text {
  color: transparent;
  border-radius: var(--r-xs);
  background-image: linear-gradient(100deg, var(--surface-soft) 30%, var(--ground) 50%, var(--surface-soft) 70%);
  background-size: 220% 100%;
  animation: btn-shimmer 1.8s var(--ease-in-out) infinite;
}

.editor.is-writing .editor-text::placeholder {
  color: transparent;
}

/* The proposal: under her text, visibly not hers, with the three choices. */
.editor-proposal {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  animation: fade-rise var(--dur-enter) var(--ease-out);
}

.editor-notes {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--ink-soft);
  white-space: pre-line;
}

.editor-actions {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* "Write it for me" once there is text: a link, not a second pill. */
.editor-write-quiet {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.editor-write-quiet:hover {
  color: var(--ink);
}

.editor-write-quiet.is-loading {
  color: var(--ink-mute);
  pointer-events: none;
}

/* The About rail. On a laptop the dialog is shown in place, without open:
   a dialog that is not open is only display none, so a block display turns
   it into the rail and its fields stay inside the form. The Details chip,
   the grab bar, the X and Cancel are the phone's and hide here. */
.editor-about {
  min-width: 0;
}

.editor-about .editor-details-chip {
  display: none;
}

.editor-about .hub-dialog {
  display: block;
  position: static;
  width: auto;
  margin: 0;
  opacity: 1;
  transform: none;
  filter: none;
  box-shadow: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface-soft);
  transition: none;
}

.editor-about .hub-dialog-body {
  padding: 18px 20px 20px;
}

.editor-about .hub-dialog .card-head-row h2 {
  font-size: var(--fs-h3);
}

.editor-about .sheet-close,
.editor-about .sheet-cancel,
.editor-about .sheet-handle {
  display: none;
}

.editor-rail .field label,
.editor-rail .field-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.editor-length {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  font-feature-settings: var(--num);
}

.editor-length.is-over {
  color: var(--warn-ink);
}

.editor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editor-chip {
  cursor: pointer;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  color: var(--ink);
  min-height: 32px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.editor-chip:hover {
  border-color: var(--line-strong);
}

.editor-chip:active {
  transform: scale(.98);
}

.editor-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--lime);
}

.editor-chip-new {
  color: var(--ink-soft);
  border-style: dashed;
}

.editor-new-category {
  margin-top: 8px;
  flex-wrap: nowrap;
}

.editor-new-category .input {
  flex: 1;
}

.editor-facts {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 4px;
}

.editor-versions {
  padding: 0;
  background: transparent;
  border: 0;
}

.editor-versions summary {
  padding: 4px 0;
}

/* The phone's top bar is hidden on a laptop, where the header carries it. */
.editor-bar {
  display: none;
}

@media (max-width: 840px) {
  .editor-layout {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .editor-head {
    display: none;
  }

  /* Done where iOS puts it, over the sheet, under the phone shell's own bar. */
  .editor-bar {
    position: sticky;
    top: calc(52px + var(--safe-t));
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -8px -16px 10px;
    padding: 8px 16px;
    background: var(--ground);
  }

  .editor-bar .crumb {
    margin: 0;
  }

  .editor-status-desk {
    display: none;
  }

  .editor-sheet {
    padding: 20px 18px 18px;
  }

  .editor-title {
    font-size: 24px;
  }

  /* Labels above the text on a phone: there is no margin to put them in. */
  .editor-section {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .editor-section::before {
    left: -18px;
  }

  .editor-label {
    padding-top: 0;
  }

  .editor-text {
    font-size: var(--fs-input-mobile);
  }

  .editor-text-hook,
  .editor-text-close {
    font-size: 17px;
  }

  /* The rail becomes the sheet behind Details. The dialog gets its modal
     styles back from hub.css by undoing the rail overrides. */
  .editor-about {
    order: -1;
  }

  .editor-about .editor-details-chip {
    display: inline-flex;
    cursor: pointer;
    min-height: 36px;
  }

  .editor-about .hub-dialog {
    display: revert;
    position: fixed;
    width: min(520px, calc(100vw - 32px));
    margin: auto;
    background: var(--surface-sheet);
    box-shadow: var(--shadow-sheet);
    border: 0;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    filter: blur(2px);
    transition: opacity var(--dur-enter) var(--ease-out),
                transform var(--dur-enter) var(--ease-out),
                filter var(--dur-enter) var(--ease-out),
                overlay var(--dur-enter) allow-discrete,
                display var(--dur-enter) allow-discrete;
  }

  .editor-about .hub-dialog[open] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .editor-about .sheet-close {
    display: inline-flex;
  }

  .editor-about .sheet-cancel,
  .editor-about .sheet-handle {
    display: revert;
  }

  .editor-about .hub-dialog-body {
    padding: 22px 24px 24px;
  }

  /* Done in the bar is the save on a phone; the Save pill at the bottom
     would be a second one. */
  .editor-actions .btn[type="submit"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editor-section,
  .editor-status,
  .editor-proposal {
    animation: none;
  }
}

/* ---------- 3. The decision pane ---------- */

/* Every frame render makes a new pane, so the entrance plays on each swap:
   the quiet focus-in that says the pane changed. */
.decision-pane {
  animation: fade-rise var(--dur-enter) var(--ease-out) both;
}

.person-line {
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.candidate-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.candidate-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.candidate-title .table-link {
  color: inherit;
}

/* The hook is the identity of a candidate: she chooses between openings. */
.candidate-hook {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
}

.candidate-line {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.candidate-close {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}

.candidate-reason {
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}

.candidates {
  display: grid;
  gap: 8px;
}

.candidate-alt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
}

.candidate-alt .candidate-hook {
  font-size: 13.5px;
  font-weight: 600;
}

.candidate-alt .candidate-line,
.candidate-alt .candidate-close {
  font-size: var(--fs-sm);
}

/* The fold looks like a fold: a chevron that turns, a strong label. */
.decision-fold {
  padding: 10px 0 0;
  border: 0;
  background: transparent;
}

.decision-fold summary {
  font-size: 13px;
}

.decision-fold summary strong {
  color: var(--ink-soft);
  font-weight: 700;
}

.decision-fold .fold-chevron {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform var(--dur-base) var(--ease-out);
}

.decision-fold[open] .fold-chevron {
  transform: rotate(90deg);
}

.decision-picker {
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border-top: 1px solid var(--line-soft);
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.picker-item[hidden] {
  display: none;
}

.picker-main {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.picker-title {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.picker-title .page-sub {
  font-weight: 500;
}

.picker-hook {
  font-size: 13.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-none {
  margin: 0;
}

/* On a phone the queue is names only; it does not need a third of the
   screen. A chip strip that snaps, above the pane. */
@media (max-width: 840px) {
  .split-list {
    max-height: none;
    overflow: visible;
    padding: 14px 16px 10px;
  }

  .people {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
  }

  .people::-webkit-scrollbar {
    display: none;
  }

  .person-line {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: var(--tap);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    border-color: var(--line);
    background: var(--surface-solid);
    gap: 8px;
  }

  .person-line.is-selected {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--lime);
  }

  .person-line.is-selected .page-sub {
    color: rgba(239, 248, 96, .75);
  }

  /* The wait chip keeps its own colour on the dark selected chip, so the
     one number that matters stays readable. */
  .person-line.is-selected .chip,
  .person-line.is-selected .needs-age {
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
  }

  .person-line.is-selected .chip-bad {
    color: var(--bad-ink);
  }

  .person-line.is-selected .chip-warn {
    color: var(--warn-ink);
  }

  .person-line-main .page-sub {
    font-size: 11px;
  }

  .candidate-alt {
    grid-template-columns: 1fr;
  }

  .candidate-alt .btn {
    width: 100%;
    min-height: var(--tap);
  }
}

/* ---------- 4. The library as a shelf ---------- */

.script-rows > li {
  list-style: none;
}

/* The row is a details: the head is the closed row, the body the three
   parts. The head keeps the shape the list had, so nothing moves until it
   opens. */
details.script-row {
  display: block;
  padding: 0;
}

details.script-row > summary {
  list-style: none;
  cursor: pointer;
}

details.script-row > summary::-webkit-details-marker {
  display: none;
}

.script-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 11px 6px;
}

.script-row-chevron {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-mute);
  transition: transform var(--dur-base) var(--ease-out);
  align-self: center;
}

details.script-row[open] .script-row-chevron {
  transform: rotate(90deg);
}

details.script-row[open] {
  background: var(--surface-soft);
}

details.script-row > .reveal {
  grid-template-rows: 0fr;
}

details.script-row[open] > .reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}

.script-row-open {
  padding: 4px 6px 14px;
  display: grid;
  gap: 12px;
}

.script-row-facts {
  margin: 0;
}

/* The actions live inside the open row, on every device. The hover reveal
   is gone: a closed row has nothing to act on, an open one shows them. */
details.script-row .script-row-actions {
  opacity: 1;
  flex-wrap: wrap;
}

/* The archived rows keep the flat shape. */
.script-row-flat {
  display: flex;
}

@media (max-width: 640px) {
  .script-row-head {
    flex-wrap: wrap;
  }

  .script-row-head .script-row-main {
    flex-basis: calc(100% - 28px);
  }

  details.script-row .script-row-actions {
    gap: 14px;
  }

  details.script-row .script-row-actions .table-link,
  details.script-row .script-row-actions button {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- 5. The script page ---------- */

.script-head .crumb {
  margin-bottom: 4px;
}

.script-context {
  display: block;
  margin-top: 6px;
}

.script-page .script-blocks {
  gap: 18px;
}

.script-page .script-block-text {
  font-size: 15.5px;
  line-height: 1.65;
}

@media (max-width: 640px) {
  /* One pill and text links beside it, so the script starts on the first
     screen instead of under two stacked buttons. */
  .script-actions {
    width: 100%;
    gap: 14px;
  }

  .script-actions .btn-primary {
    flex: 1;
    min-height: var(--tap);
  }

  .script-actions .table-link {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- 6. Categories ---------- */

.cat-row.is-arriving {
  animation: fade-rise var(--dur-enter) var(--ease-out) both;
}

/* A grid with one row rather than a flex row, so the removed row can fold
   shut through grid-template-rows the way every reveal in the hub does. The
   two cells sit where the flex items sat. */
.cat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  transition: grid-template-rows 220ms var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out);
}

.cat-row.is-collapsing {
  grid-template-rows: 0fr;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

.cat-row.is-collapsing > * {
  min-height: 0;
  overflow: hidden;
}

/* The brief comes first and reads as the instruction it is: bold, with a
   lime rule, before the hook. The creator sees what the video is for before
   she sees the words. */
.script-block-brief .script-block-text {
  font-weight: 700;
}

.script-block-brief {
  border-left: 3px solid var(--lime);
  padding-left: 12px;
}

.portal-script .script-blocks {
  display: grid;
  gap: 14px;
}

.portal-script .script-block-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.portal-script .script-block-text {
  margin: 0;
  white-space: pre-line;
  font-size: 16px;
  line-height: 1.6;
}

/* "Script sent" on the collab card folds like the terms line: one summary
   row with the title and the day it went out, the full script underneath. */
.collab-script-sent summary {
  display: flex;
  gap: 10px;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

.collab-script-sent summary::-webkit-details-marker {
  display: none;
}

.collab-script-sent summary::after {
  content: "›";
  margin-left: auto;
  color: var(--ink-soft);
  transition: transform var(--dur-base) var(--ease-out);
}

.collab-script-sent[open] summary::after {
  transform: rotate(90deg);
}