/* Stillwatch feature styles (WP-C). Uses tokens from tokens.css only; classes are prefixed fx- / tx-. */

/* ---------- shared ---------- */
.fx-view { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.fx-muted { color: var(--text-muted); }
.fx-hint { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; max-width: 70ch; }
.fx-note {
  margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  background: var(--warning-bg); color: var(--text); font-size: var(--fs-sm);
}
.fx-note[hidden] { display: none; }
.fx-lead { font-size: var(--fs-md); color: var(--text-muted); margin: 0; max-width: 70ch; }
.fx-h3 { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.fx-card {
  background: var(--surface); border: 1px solid var(--border); border-top: var(--rule-bold) solid var(--text); border-radius: var(--r-md);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start;
}
.fx-card > * { max-width: 100%; min-width: 0; }
.fx-card p { margin: 0; max-width: min(70ch, 100%); }
.fx-card > .icon { color: var(--text-muted); }
.fx-error > .icon { color: var(--warning); }
.fx-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center;
  padding: var(--sp-7) var(--sp-4); color: var(--text-muted);
}
.fx-empty p { margin: 0; max-width: 52ch; }
.fx-empty[hidden] { display: none; }
.fx-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.fx-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fx-field > label { font-weight: 600; }
.fx-field-inline { max-width: 420px; }
.fx-field-error { color: var(--danger); font-size: var(--fs-sm); margin: 0; }
.fx-field-error[hidden] { display: none; }
.fx-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fx-fieldset > legend { font-weight: 600; padding: 0; margin-bottom: var(--sp-2); }
.fx-check {
  display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); cursor: pointer;
}
.fx-check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.fx-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--sp-4); }
.fx-switch {
  display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); cursor: pointer;
}
/* A long label wraps inside its own box, next to the switch, like the core switches (not onto a new row). */
.fx-switch-label { min-width: 0; }
.fx-switch input[role="switch"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 44px; height: 26px; border-radius: 0; position: relative;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  transition: background-color var(--dur-fast) var(--ease);
}
.fx-switch input[role="switch"]::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 0;
  background: var(--text-muted); transition: transform var(--dur-fast) var(--ease);
}
.fx-switch input[role="switch"]:checked { background: var(--accent); border-color: var(--accent); }
.fx-switch input[role="switch"]:checked::after { transform: translateX(18px); background: var(--on-accent); }
.fx-switch input[role="switch"]:disabled { opacity: .5; cursor: not-allowed; }
.fx-switch-state { color: var(--text-muted); font-size: var(--fs-sm); min-width: 2.5em; }
.fx-settings-rows { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
.fx-number { width: 8ch; }
.fx-more-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-5) 0; }
.fx-more-wrap .fx-card { align-items: center; text-align: center; }
.fx-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.fx-section-head h2 { font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: -0.02em; margin: 0; }
.fx-section-link { font-size: var(--fs-sm); }

/* skeletons (static, no shimmer) */
.fx-skel { background: var(--surface-2); border-radius: var(--r-sm); }
.fx-skel-row { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); }
.fx-skel-title { height: 18px; width: min(420px, 80%); }
.fx-skel-meta { height: 14px; width: min(260px, 55%); }

/* progress bar (history) */
.fx-progress { display: block; height: 3px; border-radius: 0; background: var(--surface-2); overflow: hidden; max-width: 320px; margin-top: var(--sp-2); }
.fx-progress-fill { display: block; height: 100%; background: var(--text); }

/* generic result rows (history list) */
.fx-results { list-style: none; margin: 0; padding: 0; min-width: 0; }
.fx-row {
  display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; min-height: 64px;
  border-bottom: 1px solid var(--border); min-width: 0;
}
.fx-history .fx-results { --t-col: 0px; }
.fx-history .fx-row { display: grid; grid-template-columns: var(--t-col) var(--spine-gap) minmax(0, 1fr) auto; gap: 0; align-items: start; }
.fx-history .fx-row::before { margin-top: calc(0.75em - var(--tick) / 2 + 2px); }
.fx-history .fx-row-main { grid-column: 3; }
.fx-history .fx-row-actions { grid-column: 4; padding-left: var(--sp-2); }
.fx-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-row-title { font-weight: 600; overflow-wrap: anywhere; }
.fx-row-meta { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fx-row-action { flex: none; }

/* ---------- search ---------- */
.fx-search-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.fx-search-bar { display: flex; gap: var(--sp-2); flex: 1 1 360px; min-width: 0; }
.fx-search-bar .fx-search-input { flex: 1 1 auto; min-width: 0; }
.fx-search-bar .btn { flex: none; }
.fx-seg {
  display: inline-flex; border: 1px solid var(--border-strong); border-radius: 0; padding: 0; margin: 0;
  background: transparent; gap: 0;
}
.fx-seg-option {
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px;
  padding: 0 var(--sp-3); border-radius: 0; cursor: pointer; color: var(--text);
}
.fx-seg-option + .fx-seg-option { box-shadow: inset 1px 0 0 var(--border); }
.fx-seg-option:hover { background: var(--surface-2); }
.fx-seg-option input { position: absolute; opacity: 0; width: 1px; height: 1px; left: var(--sp-2); top: 50%; margin: 0; pointer-events: none; }
.fx-seg-check { display: none; }
.fx-seg-option:has(input:checked) { background: var(--text); color: var(--bg); font-weight: 600; }
.fx-seg-option:has(input:checked) .fx-seg-check { display: inline-flex; }
.fx-seg-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fx-search-status {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-strong); font-size: var(--fs-sm);
}
.fx-search-status-text { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); align-items: baseline; min-width: 0; }
.fx-search-status-text p { margin: 0; }
.fx-hidden-note { color: var(--text-muted); }
.fx-hidden-note[hidden] { display: none; }
.fx-safe-line { color: var(--text-muted); }
.fx-open-id { margin: 0; }
.fx-prompt { margin: 0; max-width: 60ch; }
.fx-recent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.fx-recent h2 { flex-basis: 100%; }
.fx-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.fx-chips a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-3); border-radius: 0;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; font-size: var(--fs-sm);
  max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fx-chips a:hover { text-decoration: underline; }
.fx-search .video-item h2 { font-size: var(--fs-md); margin: 0; }
.fx-search h1, .fx-channel h1 { font-size: var(--fs-2xl); letter-spacing: var(--ls-tight); }
.fx-open-id.is-ambiguous .btn { max-width: 100%; white-space: normal; text-align: left; }

/* results YouTube marks as age-restricted / not playable here (F5): labelled and visually secondary */
.fx-flags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 0; }
.fx-flag {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: 0;
  background: var(--warning-bg); color: var(--text); font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
}
.fx-flag .icon { color: var(--warning); flex: none; }
.fx-item-flagged .video-link { color: var(--text-muted); font-weight: 400; }
.fx-item-flagged .video-meta, .fx-item-flagged .video-desc { opacity: .85; }

/* blocked query (F6) and offline (F8) cards */
.fx-blocked-query > .icon { color: var(--accent); }
.fx-offline > .icon { color: var(--text-muted); }

/* ---------- channel ---------- */
.fx-channel-head { display: flex; gap: var(--sp-4); align-items: flex-start; min-width: 0; }
.fx-channel-titles { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.fx-channel-titles h1 { margin: 0; overflow-wrap: anywhere; }
.fx-channel-desc { margin: 0; color: var(--text-muted); max-width: 70ch; white-space: pre-line; overflow-wrap: anywhere; }
.fx-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 0; background: var(--surface-2); color: var(--text); font-weight: 600;
}
.fx-avatar-lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
.fx-channel-filter { max-width: 420px; }
.fx-channel-count { margin: 0; font-size: var(--fs-sm); min-height: 1.5em; }
.fx-channel .video-item h2 { font-size: var(--fs-md); margin: 0; }
.fx-channel-region { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.fx-channel-region .fx-results li[hidden] { display: none; }

/* ---------- transcript panel ---------- */
/* Let only the line list scroll: the panel body becomes a column and the transcript fills it. */
.watch-panel-body:has(> .tx) { display: flex; flex-direction: column; }
.tx { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; flex: 1 1 auto; min-width: 0; }
.tx-body { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; flex: 1 1 auto; min-width: 0; }
.tx-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.tx-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.tx-field label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.tx-field select {
  min-height: var(--hit); width: 100%; min-width: 0; padding: 0 var(--sp-2); border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit;
}
.tx-field select:disabled { opacity: .6; cursor: not-allowed; }
.tx-trans-note { margin-top: calc(var(--sp-1) * -1); }
.tx-trans-note[hidden] { display: none; }
.tx-search-row { position: relative; display: flex; align-items: center; gap: var(--sp-1); }
.tx-search-row .tx-search { flex: 1 1 auto; min-width: 0; width: 100%; padding-left: 36px; }
.tx-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: inline-flex; pointer-events: none; }
.tx-match-row { flex: none; display: flex; align-items: center; gap: 0; font-size: var(--fs-sm); }
.tx-match-row[hidden] { display: none; }
.tx-count { color: var(--text-muted); font-family: var(--font-time); font-variant-numeric: tabular-nums; padding: 0 var(--sp-1) 0 var(--sp-2); white-space: nowrap; }
.tx-scroller {
  flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain;
  border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; background: transparent;
}
.tx-scroller:focus { outline: none; }
.tx-scroller:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tx-list { list-style: none; margin: 0; padding: var(--sp-1) 0; --t-col: 3.5rem; }
.tx-line {
  display: grid; grid-template-columns: var(--t-col) var(--spine-gap) minmax(0, 1fr); gap: 0; width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; min-height: var(--hit);
  background: transparent; border: 0; color: var(--text);
  font: inherit; line-height: 1.45; cursor: pointer;
}
.tx-line:hover { background: var(--surface-2); }
.tx-line:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* The line being spoken is the playhead: filled tick, ink timecode, tinted row. */
.tx-line[aria-current="true"] { background: var(--accent-soft); }
.tx-line[aria-current="true"]::before { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }
.tx-line[aria-current="true"] .tx-time { color: var(--text); }
.tx-line.is-current-match { box-shadow: inset 0 0 0 2px var(--border-strong); }
.tx-time { font-size: var(--fs-sm); color: var(--text-muted); padding-top: 1px; }
.tx-text { grid-column: 3; overflow-wrap: anywhere; }
.tx-text mark { background: var(--mark); color: var(--text); border-radius: 2px; padding: 0 1px; }
.tx-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.tx-downloads { display: flex; gap: var(--sp-2); margin-left: auto; }
.tx-follow[hidden] { display: none; }
.tx-message { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) 0; }
.tx-message p { margin: 0; max-width: 46ch; }
.tx-message .icon { color: var(--text-muted); }
.tx-loading { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); }
.tx-loading p { margin: 0 0 var(--sp-2); }
.tx-skel { height: 16px; }
.tx-skel:nth-child(odd) { width: 85%; }
.tx-skel:nth-child(even) { width: 65%; }

/* ---------- history / continue ---------- */
.fx-history { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.fx-history-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.fx-continue { display: flex; flex-direction: column; gap: var(--sp-3); }
/* Continue watching: where you stopped is the timecode in the gutter; the most recent one is the playhead. */
.fx-continue-list { list-style: none; margin: 0; padding: 0; }
.fx-continue-item { padding: var(--sp-2) 0 var(--sp-3); }
.fx-continue-item .fx-progress { max-width: none; margin: var(--sp-1) 0 0 calc(var(--t-col) + var(--spine-gap)); }
.fx-continue-link {
  display: grid; grid-template-columns: var(--t-col) var(--spine-gap) minmax(0, 1fr) auto; align-items: start;
  min-height: var(--hit); padding-top: 10px; color: var(--text); text-decoration: none; min-width: 0;
}
.fx-continue-link:hover .fx-continue-title { text-decoration: underline; text-underline-offset: 4px; }
.fx-continue-item:first-child .fx-continue-link::before { background: var(--accent); border-color: var(--accent); }
.fx-continue-icon { display: none; }
.fx-continue-title { grid-column: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fx-continue-time { display: contents; }
.fx-at { font-size: var(--fs-md); font-weight: 600; }
.fx-of { grid-column: 4; grid-row: 1; padding-left: var(--sp-3); color: var(--text-muted); font-family: var(--font-time); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* history: search, sort, per-item actions (G8) */
.fx-history-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); }
.fx-history-tools[hidden], .fx-history-status[hidden], .fx-empty[hidden] { display: none; }
.fx-history-search { flex: 1 1 240px; min-width: 0; }
.fx-history-sort { display: flex; flex-direction: column; gap: var(--sp-1); flex: 0 1 240px; min-width: 0; }
.fx-history-sort label { font-size: var(--fs-sm); color: var(--text-muted); }
.fx-history-field .input, .fx-history-field .select { width: 100%; }
.fx-history-status { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); min-height: 1.5em; }
.fx-row-actions { display: flex; flex: none; gap: var(--sp-1); align-items: center; }

/* transcript: copy all and read aloud (G12) */
.tx-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.tx-stamps { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }
.tx-stamps input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.tx-aloud { display: flex; flex-direction: column; gap: var(--sp-1); }
.tx-aloud .fx-hint { margin: 0; }
.tx-aloud .fx-hint[hidden] { display: none; }

/* ---------- focus ---------- */
.fx-focus-badge {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sp-3); border-radius: 0;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); font-family: var(--font-time); font-size: var(--fs-xs); text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fx-focus-badge:hover { color: var(--text); }
.fx-focus-badge.is-done { color: var(--text); }
.fx-focus-badge[hidden] { display: none; }
.fx-focus-overlay p { margin: 0; }

/* ---------- data ---------- */
.fx-data { width: 100%; }
.fx-import {
  display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; max-width: 640px;
  padding: var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: transparent;
}
.fx-file { font: inherit; color: var(--text); max-width: 100%; }
.fx-file::file-selector-button {
  font: inherit; min-height: var(--hit); padding: 0 var(--sp-4); margin-right: var(--sp-3); cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.fx-import-preview p { margin: 0; }
.fx-import-preview.is-error { color: var(--danger); }

/* ---------- tools ---------- */
.fx-tools { max-width: var(--prose-max, 720px); }
.fx-tools h1 { margin: 0; }
.fx-tool h2 { font-size: var(--fs-lg); margin: 0; }
.fx-bookmarklet-row { margin: 0; }
.fx-bookmarklet { cursor: grab; }
.fx-copy-row { display: flex; gap: var(--sp-2); width: 100%; min-width: 0; }
.fx-copy-row .fx-code { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-sm); }
.fx-code-inline {
  display: block; max-width: 100%; overflow-x: auto; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-sm); white-space: nowrap;
}
.fx-code-wrap { max-width: 100%; min-width: 0; }
.fx-code-inline:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 599px) {
  .fx-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fx-search-form { align-items: stretch; }
  .fx-seg { align-self: flex-start; }
  .fx-card { padding: var(--sp-4); }
  .fx-channel-head { gap: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-switch input[role="switch"], .fx-switch input[role="switch"]::after { transition: none; }
}

@media (forced-colors: active) {
  .tx-line[aria-current="true"] { forced-color-adjust: none; background: Canvas; color: CanvasText; outline: 2px solid Highlight; outline-offset: -2px; }
  .fx-switch input[role="switch"] { border-color: ButtonText; }
  .fx-switch input[role="switch"]:checked { background: Highlight; }
  .fx-progress-fill { background: Highlight; }
}