/* Create video's other starts (js/plan-start.js): Script, Idea and Title first, the plan screens and the read view.
   Type, spacing and colour come from the shared tokens only (styles.css, css/looks.css), so both looks pick up
   their own. Three sizes do the work: --type-section for a card title, --type-body for text, --type-meta for notes. */

/* Start choice: five tabs under the Create video title, one row on wide screens and a tidy
   two-column grid on narrow ones (the fifth spans both), so no pill is left stranded. */
.start-modes { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.start-alt { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
@media (max-width: 860px) {
  .start-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-modes .fpill { justify-content: center; text-align: center; min-height: 44px; white-space: normal; }
  .start-modes .fpill:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* The script and idea paths have no stepper: keep the same 24px between the tabs and the card. */
#planStart, #ideaPanel, #packagePanel, #linkPanel { margin-top: var(--s2); }
.draft-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s4) 0 0; color: var(--ink); }
.draft-note[hidden] { display: none; }
.draft-note .link { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; font: inherit; font-weight: var(--fw-strong); }
.draft-note .link:focus-visible { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }

/* One card per region; inside it, space and a hairline separate the groups. */
.app .card.set-card.script-card { padding: var(--pad-card); display: grid; gap: var(--s3); }
.script-card + .script-card { margin-top: var(--gap-card); }
.script-card h2 { font: var(--type-section); letter-spacing: var(--track-title); color: var(--ink-strong); text-wrap: balance; }
.script-card h3 { font: var(--type-body-strong); color: var(--ink-strong); margin-top: var(--s2); }
.script-card > p, .script-card .plan-sources > p { font: var(--type-body); max-width: var(--measure); }
/* Labels sit close to their own field and further from the field above; forms and prose keep a
   readable line length on wide screens. An empty status line takes no room until it speaks. */
.script-card .form { display: grid; gap: var(--s2); max-width: 44rem; }
.script-card .form > .field-label:not(:first-child),
.script-card .form > .plan-details,
.script-card .form > .btn { margin-top: var(--s2); }
.script-card .form > .field-note:empty { margin-top: calc(-1 * var(--s2)); }
.script-card .btn { justify-self: start; }
.script-card input[type="radio"] { margin-right: var(--s2); }
#planChoices { display: grid; gap: var(--s3); }
#planMessage { margin: var(--s4) 0; }
#planMessage:empty { display: none; }
@media print {
  .script-card textarea { border: 0; box-shadow: none; }
}

/* Idea start and the plan screens. */
.script-card select.input { max-width: 16rem; }
.plan-details > summary { cursor: pointer; font: var(--type-body-strong); color: var(--ink-strong); }
.plan-details[open] > summary { margin-bottom: var(--s3); }
.plan-details .form { margin-top: var(--s3); }
.fsteps.fsteps--plan { max-width: 44rem; }
.plan-section { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.plan-section:first-of-type { border-top: 0; padding-top: 0; }
.plan-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); font: var(--type-body); }
.plan-claim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.plan-claim > span:first-child { flex: 1 1 16rem; min-width: 0; }
.plan-flag { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font: var(--type-meta); color: var(--muted); }
.plan-badge {
  display: inline-block; padding: 0 var(--s2); border-radius: 999px; background: var(--soft); color: var(--ink);
  font: var(--type-meta); font-weight: var(--fw-strong);
}
.plan-badge--check { background: var(--st-attn-bg); color: var(--dk-tx-st-attn, var(--st-attn)); }
.plan-practice { font-weight: var(--fw-strong); color: var(--dk-tx-st-attn, var(--st-attn)); }
@media (max-width: 680px) {
  /* Six steps do not fit a phone with their names: numbers for all, the name for the current one. */
  .fsteps--plan .fstep:not(.is-on) .fstep-label { display: none; }
  .fsteps--plan .fstep + .fstep::before { min-width: var(--s2); }
  .plan-actions .btn, .script-card .plan-claim .btn { width: 100%; justify-content: center; }
}

/* Working, failed and stopped plan steps: the shared states on the page itself, no card around them. */
.plan-working { display: grid; justify-items: center; gap: var(--s3); margin-bottom: var(--gap-card); padding-bottom: var(--s7); }
.plan-working .wstate--page, .plan-working .wstate--card { padding-bottom: 0; }
.plan-failed { margin-bottom: var(--gap-card); }
.plan-problem { margin: 0 0 var(--gap-card); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* The take uploading from the plan screen: the same working block as on Create. */
.take-progress[hidden] { display: none; }
.take-progress .uploading { border-bottom: 0; padding-bottom: 0; }

/* The script window: one box per section, a status line, and a row of tools. */
.sw-status { margin: 0; font: var(--type-meta); color: var(--muted); }
.sw-status.is-dirty { color: var(--dk-tx-st-attn, var(--st-attn)); }
.sw-status.is-bad { color: var(--dk-tx-st-fail, var(--st-fail)); }
.sw-text { min-height: 7rem; line-height: var(--lh-body); resize: vertical; }
/* Long scripts: a comfortable line length, and the tools stay in reach at the bottom while you scroll. */
.plan-section .input { max-width: 48rem; }
/* The script's actions, by what a creator does: the save status and Undo on the left; Rehearse, Export and
   the step's next action on the right. On wide screens the row stays in reach at the bottom while you scroll;
   the page keeps room under it so a line being typed is never hidden. */
.sw-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4);
  padding: var(--s3) 0; position: sticky; bottom: 0; z-index: 2; background-color: var(--card); border-top: 1px solid var(--line); }
:root:has(.sw-tools) { scroll-padding-bottom: 5.5rem; }
.sw-save { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.sw-undo[hidden] { display: none; }
.sw-do { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.sw-do .btn { gap: var(--s1); }
.sw-export { position: relative; }
.sw-menu { position: absolute; right: 0; bottom: calc(100% + var(--s1)); z-index: 3; min-width: 12rem; display: grid; padding: var(--s1);
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: var(--shadow); }
.sw-menu[hidden] { display: none; }
.sw-item { min-height: 40px; padding: 0 var(--s3); text-align: left; border: 0; border-radius: var(--r-xs, 4px); background: none; color: var(--ink-strong);
  font: var(--type-body); cursor: pointer; }
.sw-item:hover, .sw-item:focus-visible { background: var(--hover-bg); outline: none; }
.sw-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.script-window { background-clip: padding-box; }
@media (max-width: 680px) {
  .sw-tools { position: static; border-top: 0; padding-top: 0; }
  .sw-do { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .sw-do > .btn--primary { grid-column: 1 / -1; grid-row: 1; width: 100%; justify-content: center; }
  .sw-do .btn, .sw-export > .btn { width: 100%; justify-content: center; }
}
/* A flag that needs checking reads as a to-do, not an alarm. */
.plan-flag.is-check { color: var(--ink); }

/* Long titles and links wrap instead of widening the page on a phone. */
.script-card > * { min-width: 0; }
.plan-list li, .plan-list a, .plan-claim, .plan-flag { overflow-wrap: anywhere; }
.plan-list a.link { white-space: normal; display: inline; }

/* Idea suggestions: rows split by a hairline, the topic in the strong body weight, the evidence under it. */
.idea-suggest { display: grid; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s2); }
.idea-suggest[hidden] { display: none; }
.idea-suggest .skel-li { min-height: 3.75rem; }
.idea-list { list-style: none; margin: 0; padding: 0; display: grid; }
.idea-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); justify-content: space-between; padding: var(--s3) 0; }
.idea-row + .idea-row { border-top: 1px solid var(--line); }
.idea-text { display: grid; gap: var(--s1); flex: 1 1 16rem; min-width: 0; }
.idea-topic { font: var(--type-body-strong); color: var(--ink-strong); overflow-wrap: anywhere; }
.idea-suggest .estate--row { padding-left: 0; padding-right: 0; }

/* The package-first choice: each choice is the hit target, and the picked one is outlined (it is the control). */
.pkg-form { display: grid; gap: var(--s5); }
.pkg-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); min-width: 0; max-width: 44rem; }
.pkg-option { display: flex; align-items: flex-start; gap: var(--s2); cursor: pointer; overflow-wrap: anywhere; font: var(--type-body);
  min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card);
  transition: border-color var(--motion), background-color var(--motion); }
.pkg-option:hover { border-color: var(--muted); }
.pkg-option:has(input:checked) { border-color: var(--dk-tx-accent, var(--accent)); box-shadow: inset 0 0 0 1px var(--accent); }
.pkg-option:has(input:focus-visible) { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.pkg-option:has(input:disabled) { cursor: default; opacity: 0.75; }
.pkg-option input { margin-top: var(--s1); flex: none; accent-color: var(--dk-tx-accent, var(--accent)); }
.pkg-option .pkg-notes { margin-top: var(--s1); }
@media (prefers-reduced-motion: reduce) { .pkg-option { transition: none; } }
.pkg-notes { display: block; font: var(--type-meta); color: var(--muted); }
.pkg-preread { border-left: 2px solid var(--line-2); padding-left: var(--s3); }

/* Title first, then thumbnail words made for it. Each set is numbered so the order reads at a glance; the words
   wait in a dashed slot until a title is picked. Flags under a choice say why, in a line marked at the left. */
.pkg-set { gap: var(--s2); }
.pkg-legend { display: flex; align-items: center; gap: var(--s2); padding: 0; margin-bottom: var(--s2); font: var(--type-body-strong); color: var(--ink-strong); }
.pkg-step { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--soft); color: var(--ink-strong);
  font: var(--type-meta); font-weight: var(--fw-strong); flex: none; }
.pkg-card { display: flex; align-items: stretch; gap: var(--s2); min-width: 0; }
.pkg-card > .pkg-option { flex: 1 1 auto; min-width: 0; }
.pkg-edit { flex: none; align-self: center; min-height: 44px; }
.pkg-body { display: grid; gap: var(--s1); min-width: 0; }
.pkg-text { color: var(--ink-strong); }
.pkg-words { font-weight: var(--fw-strong); letter-spacing: 0.02em; }
.pkg-flags { display: grid; gap: var(--s1); }
.pkg-flag { font: var(--type-meta); color: var(--ink); padding-left: 0; }
.pkg-wait { margin: 0; padding: var(--s3) var(--s4); border: 1px dashed var(--dashed); border-radius: var(--r-sm); font: var(--type-body); color: var(--muted); }
.pkg-set--later .pkg-legend { color: var(--muted); }
.pkg-for { margin: 0 0 var(--s1); font: var(--type-meta); color: var(--muted); }
.pkg-set .estate--row { padding-left: 0; padding-right: 0; }
.pkg-practice { margin: 0; font: var(--type-meta); font-weight: var(--fw-strong); color: var(--dk-tx-st-attn, var(--st-attn)); }
.pkg-reword { flex: 1 1 auto; display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--dk-tx-accent, var(--accent)); border-radius: var(--r-sm); }
.pkg-reword .input { max-width: none; }
@media (max-width: 680px) { .pkg-edit { width: auto !important; padding-inline: var(--s2); } }

/* Q2 polish. The card ends where its form ends (44rem of form + the card's padding), so the right third is not empty.
   "Change words" style links stay inside the field row. Disclosures use the app chevron, not the browser triangle. */
.app .card.set-card.script-card { max-width: 49rem; }
.script-card .form { max-width: none; }
.plan-details > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s1); }
.plan-details > summary::-webkit-details-marker { display: none; }
.plan-details > summary::before { content: "›"; display: inline-block; transition: transform .15s; }
.plan-details[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .plan-details > summary::before { transition: none; } }
.script-card .field-row, .script-card .row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

/* Title-first options: one width for every option; "Change words" is a secondary button on the option's own row. */
.pkg-card { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; align-items: center; gap: var(--s2) var(--s3); }
.pkg-card > .pkg-reword, .pkg-card > .pkg-why { grid-column: 1 / -1; }
html[data-look] .pkg-edit { justify-content: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-strong); }
html[data-look] .pkg-edit:hover { background: var(--hover-bg); }
@media (max-width: 680px) { .pkg-card { grid-template-columns: minmax(0, 1fr); } html[data-look] .pkg-edit { justify-self: start; } }
.script-card .select { max-width: 16rem; }