/* Record tab: same patterns as script-desk.css (sd-side/sd-nav list, sd-bar header, sd-btn primary) on the shared tokens.
   The teleprompter type is the one intentional departure from the app's type scale. */
:is(#view-record, .rc-root) {--channel-raza-economics: #d97706;}
:is(#view-record, .rc-root) *, :is(#view-record, .rc-root) *::before, :is(#view-record, .rc-root) *::after {box-sizing: border-box;}
:is(#view-record, .rc-root) {background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; min-height: calc(100dvh - 66px);}
:is(#view-record, .rc-root) a {color: inherit; text-decoration: none;}
:is(#view-record, .rc-root) a.scripts-primary, :is(#view-record, .rc-root) a.scripts-primary:hover {color: var(--on-accent);} /* Upload is a link styled as the primary button */
:is(#view-record, .rc-root) h1, :is(#view-record, .rc-root) h2 {margin: 0;}
:is(#view-record, .rc-root) .rc-mono {font-family: var(--mono); font-size: 12px; letter-spacing: -0.013em;}
:is(#view-record, .rc-root) .rc-num {font-variant-numeric: tabular-nums;}
:is(#view-record, .rc-root) .rc-bar {display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 16px; padding: 10px 16px; border-bottom: 1px solid var(--border);}
:is(#view-record, .rc-root) .rc-bar h1 {font-size: 20px; font-weight: 600; letter-spacing: -0.012em;}
:is(#view-record, .rc-root) .rc-sub {display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; color: var(--text2);}
:is(#view-record, .rc-root) .rc-activity-controls {display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;}
:is(#view-record, .rc-root) .rc-video-actions {display: flex; justify-content: flex-end;}
:is(#view-record, .rc-root) [data-action=bulk-upload] {grid-column: 2; grid-row: 1;}
:is(#view-record, .rc-root) .rc-app {display: grid; grid-template-columns: 300px minmax(0,1fr); min-height: calc(100dvh - 124px);}
:is(#view-record, .rc-root) .rc-side {background: var(--surface); border-right: 1px solid var(--border); padding: 14px 10px; min-width: 0;}
:is(#view-record, .rc-root) .rc-side > .scripts-select-control {margin-bottom: 10px;}
:is(#view-record, .rc-root) .rc-side > .scripts-select-control select {flex: 1; max-width: none; width: 100%;}
:is(#view-record, .rc-root) .rc-label {display: flex; justify-content: space-between; padding: 0 8px 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text2);}
:is(#view-record, .rc-root) .rc-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;}
:is(#view-record, .rc-root) .rc-item {display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--text); background: transparent; border: 0; border-radius: 6px; padding: 8px; cursor: pointer;}
:is(#view-record, .rc-root) .rc-item:hover {background: var(--surface2);}
:is(#view-record, .rc-root) .rc-item.rc-on {background: var(--accent-light); color: var(--accent);}
:is(#view-record, .rc-root) .rc-item:focus-visible, :is(#view-record, .rc-root) .rc-film:focus-visible, :is(#view-record, .rc-root) .rc-docs:focus-visible, :is(#view-record, .rc-root) .rc-link:focus-visible {outline: 2px solid var(--accent); outline-offset: 2px;}
:is(#view-record, .rc-root) .rc-it {overflow-wrap: anywhere;}
:is(#view-record, .rc-root) .rc-sm {display: flex; align-items: center; gap: 6px; color: var(--text2);}
:is(#view-record, .rc-root) .rc-dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex-shrink: 0;}
:is(#view-record, .rc-root) .rc-dot.rc-ch-RE {background: var(--channel-raza-economics);}
:is(#view-record, .rc-root) .rc-dot.rc-ch-RC {background: var(--accent);}
:is(#view-record, .rc-root) .rc-dot.rc-ch-TM {background: var(--green);}
:is(#view-record, .rc-root) .rc-dot.rc-ch-CP {background: var(--purple);}
:is(#view-record, .rc-root) .rc-main {padding: 20px; min-width: 0; max-width: 1100px;}
:is(#view-record, .rc-root) .rc-top {display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;}
:is(#view-record, .rc-root) .rc-meta {display: flex; align-items: center; gap: 8px; color: var(--text2);}
:is(#view-record, .rc-root) .rc-sep {color: var(--text3);}
:is(#view-record, .rc-root) .rc-docs {color: var(--accent); border-radius: 4px;}
:is(#view-record, .rc-root) .rc-docs:hover {color: var(--accent-hover);}
:is(#view-record, .rc-root) .rc-title {font-size: 20px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; margin: 6px 0 16px;}
:is(#view-record, .rc-root) .rc-card {background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 28px 32px; margin: 0; list-style: none; box-shadow: var(--shadow-subtle);}
:is(#view-record, .rc-root) .rc-script {display: flex; flex-direction: column; gap: 36px; counter-reset: line;}
:is(#view-record, .rc-root) .rc-script li {display: grid; grid-template-columns: 40px minmax(0,1fr); counter-increment: line; font-size: 30px; line-height: 1.5; letter-spacing: -0.015em;}
:is(#view-record, .rc-root) .rc-script li::before {content: counter(line); font-size: 12px; line-height: 3.6; color: var(--text3); font-variant-numeric: tabular-nums;}
:is(#view-record, .rc-root) .rc-script li span {overflow-wrap: anywhere;}
:is(#view-record, .rc-root) .rc-script li.rc-cta {color: var(--accent);}
:is(#view-record, .rc-root) .rc-foot {display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap;}
:is(#view-record, .rc-root) .rc-film {font: inherit; font-size: 14px; font-weight: 600; border-radius: 6px; padding: 7px 12px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; white-space: nowrap;}
:is(#view-record, .rc-root) .rc-film:hover:not(:disabled) {background: var(--accent-hover); border-color: var(--accent-hover);}
:is(#view-record, .rc-root) .rc-film:disabled {opacity: .4; cursor: not-allowed;}
:is(#view-record, .rc-root) .rc-msg {color: var(--green);}
:is(#view-record, .rc-root) .rc-msg.rc-err, :is(#view-record, .rc-root) .rc-err {color: var(--red);}
/* F59: marked-unfiled scripts stay in their own group below the ready list, muted until the take is filed. */
:is(#view-record, .rc-root) .rc-label.rc-group {margin-top: 14px;}
:is(#view-record, .rc-root) .rc-item.rc-filmed .rc-it {color: var(--text2);}
:is(#view-record, .rc-root) .rc-item.rc-filmed .rc-dot {background: var(--text3);}
:is(#view-record, .rc-root) .rc-item.rc-filmed.rc-on .rc-it, :is(#view-record, .rc-root) .rc-item.rc-filmed.rc-on .rc-tag {color: var(--accent);}
:is(#view-record, .rc-root) .rc-tag {font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 6px; white-space: nowrap;}
:is(#view-record, .rc-root) .rc-film.rc-secondary {background: transparent; color: var(--text); border-color: var(--border-strong);}
:is(#view-record, .rc-root) .rc-film.rc-secondary:hover:not(:disabled) {background: var(--surface2); color: var(--accent); border-color: var(--accent);}
/* F61: priority — a toggle chip in the script header (DESIGN.md chip-toggle-off/on) and an accent pill in the
   sidebar beside the Filmed tag. The chip's group keeps it next to Open in Docs on one line. */
:is(#view-record, .rc-root) .rc-top .rc-actions {display: flex; align-items: center; gap: 8px; flex-wrap: wrap;}
:is(#view-record, .rc-root) button.rc-pri {font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; border-radius: 999px; padding: 2px 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text2); cursor: pointer; white-space: nowrap;}
:is(#view-record, .rc-root) button.rc-pri:hover:not(:disabled) {color: var(--text); border-color: var(--accent);}
:is(#view-record, .rc-root) button.rc-pri.rc-on {background: var(--accent); color: var(--on-accent); border-color: var(--accent);}
:is(#view-record, .rc-root) button.rc-pri.rc-on:hover:not(:disabled) {background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent);}
:is(#view-record, .rc-root) button.rc-pri:focus-visible {outline: 2px solid var(--accent); outline-offset: 2px;}
:is(#view-record, .rc-root) button.rc-pri:disabled {opacity: .4; cursor: not-allowed;}
:is(#view-record, .rc-root) .rc-tag.rc-pri {background: var(--accent-light); color: var(--accent); border-color: var(--accent);}
:is(#view-record, .rc-root) .rc-wait {margin-right: auto; color: var(--text2);}
:is(#view-record, .rc-root) .rc-state {padding: 8px; color: var(--text2);}
:is(#view-record, .rc-root) .rc-card .rc-state {padding: 0;}
:is(#view-record, .rc-root) .rc-link {font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; margin-left: 8px; padding: 0; text-decoration: underline;}
/* F58: the optional Video format block above the script. The summary keeps the format name and the example
   link visible when collapsed; the instructions open below it. */
:is(#view-record, .rc-root) .rc-format {background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 14px; margin: 0 0 12px; color: var(--text);}
:is(#view-record, .rc-root) .rc-format summary {color: var(--text); padding: 2px 0; min-height: 28px; line-height: 1.5;}
:is(#view-record, .rc-root) .rc-format summary b {font-weight: 600;}
:is(#view-record, .rc-root) .rc-format .rc-format-example {color: var(--accent); text-decoration: underline; white-space: nowrap;}
:is(#view-record, .rc-root) .rc-format .rc-format-instructions {margin: 8px 0 0; padding-left: 20px; color: var(--text2); overflow-wrap: anywhere;}
:is(#view-record, .rc-root) .rc-format .rc-format-instructions li + li {margin-top: 4px;}
:is(#view-record, .rc-root) .rc-format .rc-format-hint {margin: 8px 0 0; color: var(--text3); font-size: 12px;}
/* F58: ((…)) directions are notes to the camera, never words to read: smaller, italic, muted, and set off
   by a rule (pre-line) or a dash (inline) so they can't be mistaken for the script at a glance. */
:is(#view-record, .rc-root) .rc-script .rc-direction {font-size: .62em; font-style: italic; font-weight: 400; color: var(--text2); line-height: 1.5; letter-spacing: normal; overflow-wrap: anywhere;}
:is(#view-record, .rc-root) .rc-script .rc-direction.rc-pre {display: block; margin: 0 0 6px; padding-left: 10px; border-left: 3px solid var(--border-strong);}
:is(#view-record, .rc-root) .rc-script .rc-direction.rc-pre .rc-glyph {display: inline-block; margin-right: 6px; font-style: normal;}
:is(#view-record, .rc-root) .rc-script .rc-direction.rc-inline {display: inline;}
/* U10: Skip. A secondary button beside Mark as filmed swaps the footer for a one-line reason (input, Send,
   Cancel) and the server's refusal sits under the input. At phone width the input is full width and the
   buttons wrap below it. */
:is(#view-record, .rc-root) .rc-skip-note {margin-right: auto; color: var(--text2);}
:is(#view-record, .rc-root) .rc-skip-form {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%;}
:is(#view-record, .rc-root) .rc-skip-reason {flex: 1 1 240px; min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; padding: 7px 10px;}
:is(#view-record, .rc-root) .rc-skip-reason:focus {border-color: var(--accent);}
:is(#view-record, .rc-root) .rc-skip-error {flex: 1 1 100%;}
@media (max-width: 760px) {
  :is(#view-record, .rc-root) .rc-sub, :is(#view-record, .rc-root) .rc-video-actions {grid-column: 1 / -1;}
  :is(#view-record, .rc-root) .rc-app {grid-template-columns: minmax(0,1fr); min-height: 0;}
  :is(#view-record, .rc-root) .rc-side {border-right: 0; border-bottom: 1px solid var(--border);}
  :is(#view-record, .rc-root) .rc-main {padding: 16px;}
  :is(#view-record, .rc-root) .rc-card {padding: 20px 16px;}
  :is(#view-record, .rc-root) .rc-script {gap: 24px;}
  :is(#view-record, .rc-root) .rc-script li {grid-template-columns: 28px minmax(0,1fr); font-size: 22px; line-height: 1.55;}
  :is(#view-record, .rc-root) .rc-script li::before {font-size: 12px; line-height: 3.2;}
  :is(#view-record, .rc-root) .rc-skip-reason {flex: 1 1 100%;}
}