/* subtitle-shift: option fields, problem list and the before/after preview table. */
.ss-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--matrix-space-12) var(--matrix-space-16); align-items: end; }
.ss-field { display: grid; gap: var(--matrix-space-8); min-width: 0; }
.ss-field label { font-weight: 600; }
.ss-field input, .ss-field select { width: 100%; box-sizing: border-box; }
.matrix-ui .ss-num-input { font-family: var(--matrix-font-mono); }
.ss-problems { margin: 0; padding-left: 1.2em; color: var(--matrix-danger); font-size: var(--matrix-type-caption); }
.ss-problems:empty { display: none; }
.ss-scroll { overflow: auto; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface); }
.ss-scroll[hidden] { display: none; }
.ss-table { width: 100%; border-collapse: collapse; font-size: var(--matrix-type-control); }
.ss-table th { background: var(--matrix-surface-subtle); color: var(--matrix-muted); font-weight: 600; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--matrix-border); white-space: nowrap; }
.ss-table td { padding: 4px 8px; border-bottom: 1px solid var(--matrix-border); vertical-align: top; }
.ss-table .ss-num { color: var(--matrix-muted); text-align: right; width: 1%; }
.ss-table .ss-time { font-family: var(--matrix-font-mono); white-space: nowrap; }
.ss-table .ss-text { overflow-wrap: anywhere; }
/* A phone stacks each cue: its number, then Now and After on lines of their own, then the text, so nothing scrolls sideways (Jack's
   review of 2026-10-12, appendix 64a: only the Now column showed, and the rows were very tall). The headers stay for screen
   readers, and the table's roles are set in the controller. */
@media (max-width: 600px) {
  .ss-scroll { overflow: visible; }
  .ss-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ss-table, .ss-table tbody, .ss-table tr, .ss-table td { display: block; }
  .ss-table tr { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); padding: 6px 8px; border-bottom: 1px solid var(--matrix-border); }
  .ss-table tbody tr:last-child { border-bottom: 0; }
  .ss-table td { padding: 1px 0; border: 0; grid-column: 2; }
  .ss-table .ss-num { grid-column: 1; grid-row: 1 / span 3; width: auto; text-align: left; }
  .ss-table .ss-time { font-size: var(--matrix-type-caption); white-space: normal; }
  .ss-table .ss-time::before { content: attr(data-label) ": "; font-family: var(--matrix-font); color: var(--matrix-muted); }
}