/* Components (03-design §5): buttons, inputs, switches, segmented controls, dialogs, popovers, toasts,
   banners, cards, list rows, tabs, chips, skeletons, empty states. */

/* --- Buttons ----------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--hit);
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn .icon { width: 20px; height: 20px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: transparent; border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--surface-2); }
.btn-danger-text { color: var(--danger); }
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); }
.btn-lg { min-height: 52px; padding: 0 var(--sp-5); font-size: var(--fs-md); }
.btn-block { width: 100%; }
@media (pointer: coarse) { .btn-sm { min-height: var(--hit); } }

/* Buttons on the dark shield / player cards */
.btn-on-dark { background: var(--shield-text); color: var(--shield-bg); }
.btn-on-dark:hover { background: #FFFFFF; }
.btn-ghost-dark { color: var(--shield-text); border-color: rgb(255 255 255 / .35); }
.btn-ghost-dark:hover { background: rgb(255 255 255 / .1); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hit);
  height: var(--hit);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
}
.btn-icon:hover:not(:disabled) { background: var(--surface-2); }
.btn-icon:disabled { opacity: .4; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* --- Inputs ------------------------------------------------------------------------------------ */
.input, .select {
  min-height: var(--hit);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-md);
  min-width: 0;
}
.input::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover, .select:hover { border-color: var(--text-muted); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[readonly] { background: var(--surface-2); }
.textarea { display: block; width: 100%; min-height: 88px; padding: var(--sp-2) var(--sp-3); line-height: 1.45; resize: vertical; }
.select { padding-right: var(--sp-6); cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.select-sm { min-height: 36px; font-size: var(--fs-sm); }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.input-time { width: 7.5em; font-variant-numeric: tabular-nums; }
.input-link { flex: 1 1 auto; width: 100%; font-family: var(--font-mono); font-size: var(--fs-sm); }

.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field:last-child { margin-bottom: 0; }
.field-label { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.field-hint { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; max-width: 62ch; }
.field-error { color: var(--danger); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; display: flex; gap: var(--sp-1); align-items: flex-start; }
.field-error::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 0; background: var(--danger); color: var(--surface); font-weight: var(--fw-bold); font-size: 12px; }
.input-row { display: flex; gap: var(--sp-2); align-items: stretch; min-width: 0; }
.input-row > .input { flex: 1 1 auto; }
.inline-form { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-5); max-width: 560px; }
.field-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); }
.field-inline .field { margin-bottom: 0; }

/* Checkbox */
.check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); }
.check input, .segment input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.check label { cursor: pointer; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--sp-4); }
.check-with-select { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Switch: <input type=checkbox role=switch> + track, visible On/Off text */
.field-switch { margin-bottom: var(--sp-3); }
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--hit); cursor: pointer; }
.switch-input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.switch-track {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 0;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  transition: background-color var(--dur-fast) var(--ease);
}
.switch-track::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), background-color var(--dur-fast) var(--ease);
}
.switch-input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.switch-input:checked + .switch-track::after { transform: translateX(18px); background: var(--on-accent); }
.switch-input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch-label { font-size: var(--fs-md); }
.switch-state { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-bold); min-width: 2em; }

/* Segmented control (radio group) */
.segmented { display: inline-flex; flex-wrap: wrap; padding: 0; gap: 0; border-radius: 0; background: transparent; border: 1px solid var(--border-strong); }
.segment { position: relative; }
.segment input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.segment label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--sp-4);
  border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); color: var(--text);
}
.segment label .icon { display: none; }
.segment + .segment label { box-shadow: inset 1px 0 0 var(--border); }
.segment label:hover { background: var(--surface-2); }
.segment input:checked + label { background: var(--text); color: var(--bg); font-weight: var(--fw-bold); }
.segment input:checked + label .icon { display: inline-block; color: currentColor; }
.segment input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 1px; }
.segmented-field legend { margin-bottom: var(--sp-2); }

/* --- Cards, lists ------------------------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.card-grid { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.card-link { display: flex; align-items: center; gap: var(--sp-2); color: var(--text); text-decoration: none; font-weight: var(--fw-bold); min-height: 32px; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.card-link:hover .card-title { text-decoration: underline; text-underline-offset: 3px; }
.playlist-card { position: relative; border-top: var(--rule-bold) solid var(--text); }
.playlist-card:hover { border-color: var(--border-strong); }
.playlist-card p { margin: var(--sp-1) 0 0; }
.card-link .icon { color: var(--text); }

.row-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; border-top: 1px solid var(--border); }
.row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.row .video-link, .row .row-text { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.row-actions { display: flex; align-items: center; gap: var(--sp-1); flex: none; }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0 var(--sp-5); }
.link-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.link-row .icon { color: var(--text); }
.link-row-title { font-weight: var(--fw-bold); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row:hover .link-row-title { text-decoration: underline; text-underline-offset: 3px; }

/* Video list row (text-first) */
.video-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.fx-results:has(> .video-item) { --t-col: 3.5rem; }
/* Duration sits in the gutter, actions on the right; the rest of .video-side dissolves into the grid. */
.video-item { display: grid; grid-template-columns: var(--t-col) var(--spine-gap) minmax(0, 1fr) auto; align-items: start; gap: 0; min-height: 64px; padding: var(--sp-3) 0 var(--sp-4); }
.video-item.has-thumb { grid-template-columns: var(--t-col) var(--spine-gap) auto minmax(0, 1fr) auto; }
.video-item.has-thumb .video-thumb { grid-column: 3; grid-row: 1; margin-right: var(--sp-4); }
.video-item .video-main { grid-column: 3; grid-row: 1; }
.video-item.has-thumb .video-main { grid-column: 4; }
.video-item .video-side { display: contents; }
.video-item .video-actions { grid-column: -2; grid-row: 1; padding-left: var(--sp-2); }
.video-item .tag, .video-item .avatar { grid-column: 1; grid-row: 1; justify-self: end; }
.video-item .avatar { width: 40px; height: 40px; font-size: var(--fs-md); }
.video-item-channel::before { margin-top: calc(20px - var(--tick) / 2); }
.video-thumb { flex: none; width: 160px; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-main { flex: 1 1 auto; min-width: 0; }
.video-title-line { font-size: var(--fs-md); margin: 0 0 2px; overflow-wrap: anywhere; }
.video-link { color: var(--text); text-decoration: none; font-weight: var(--fw-bold); }
.video-link:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--link); }
.video-meta { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.video-desc { color: var(--text-muted); font-size: var(--fs-sm); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.video-duration { font-variant-numeric: tabular-nums; color: var(--text); font-size: var(--fs-sm); font-weight: 600; padding-top: 1px; }
.video-actions { display: flex; gap: var(--sp-1); }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 0; background: var(--surface-2); color: var(--text); display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
@media (max-width: 599.98px) {
  .video-thumb { width: 96px; }
  .video-item.has-thumb .video-thumb { margin-right: var(--sp-3); }
  .video-actions .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); white-space: nowrap; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-full); background: transparent; border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font-time); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-accent { background: var(--accent-soft); border-color: var(--accent); }
button.chip:hover { background: var(--surface-2); }

/* Skeleton (static, no shimmer) */
.skeleton { display: block; background: var(--surface-2); border-radius: var(--r-sm); }
.skeleton-line { height: 1em; width: min(70%, 420px); margin: .15em 0; }

/* Empty state */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-4); color: var(--text-muted); }
.empty-state .icon { color: var(--text-muted); }
.empty-state h1 { color: var(--text); margin: 0; }
.empty-state p { margin: 0; max-width: 46ch; }

.notice { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--warning-bg); color: var(--text); font-size: var(--fs-sm); }

/* --- Banner ------------------------------------------------------------------------------------- */
.banner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--page-pad); min-height: 48px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.banners .banner { padding-left: max(var(--page-pad), calc((100% - var(--content-max)) / 2)); padding-right: max(var(--page-pad), calc((100% - var(--content-max)) / 2)); }
.banner-warning { background: var(--warning-bg); }
.banner-warning .icon { color: var(--warning); }
.banner-soft { background: var(--surface-2); }
.banner-text { margin: 0; flex: 1 1 auto; }
.banner-close { margin-right: calc(-1 * var(--sp-2)); }
.list-banner { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-5); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); flex-wrap: wrap; }
.list-banner > span { flex: 1 1 auto; font-weight: var(--fw-bold); }

/* --- Tabs --------------------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.tab {
  position: relative; min-height: var(--hit); padding: 0 var(--sp-4); border: 0; background: none;
  color: var(--text-muted); font-weight: var(--fw-bold); font-size: var(--fs-sm); white-space: nowrap; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: -1px; height: var(--rule-bold); background: var(--accent); }
.tabpanel:focus-visible { outline-offset: 6px; }

/* --- Dialog ------------------------------------------------------------------------------------- */
.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  padding: 0;
  border: 1px solid var(--mat-edge);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 10px var(--mat), 0 0 0 11px var(--mat-edge);
  overflow: hidden;
  flex-direction: column;
}
.dialog[open] { display: flex; }
.dialog-sm { width: min(440px, calc(100vw - 32px)); }
.dialog-lg { width: min(680px, calc(100vw - 32px)); }
.dialog-full { width: min(96vw, 96vh, 900px); }
.dialog::backdrop { background: rgb(10 12 14 / .6); }
.dialog[open] { animation: fade-in var(--dur) var(--ease); }
.dialog-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); }
.dialog-title { flex: 1 1 auto; margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.dialog-body { padding: var(--sp-2) var(--sp-5) var(--sp-5); overflow-y: auto; overscroll-behavior: contain; }
.dialog-body > p:last-child { margin-bottom: 0; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface); }
@media (max-width: 599.98px) {
  .dialog, .dialog-sm, .dialog-lg {
    width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: 0; border: 0;
    inset: 0; box-shadow: none; border-top: var(--frame-browse) solid var(--mat);
  }
  .dialog-full { width: 100vw; max-width: 100vw; margin: auto; border-radius: 0; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.choice-list { list-style: none; padding: 0; margin: 0 0 var(--sp-4); border-top: 1px solid var(--border); }
.choice { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 52px; padding: var(--sp-2) var(--sp-2); border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; }
.choice:hover { background: var(--surface-2); }
.choice .icon { color: var(--text); }
.choice-text { flex: 1 1 auto; font-weight: var(--fw-bold); min-width: 0; overflow-wrap: anywhere; }

.term-list { columns: 2; font-size: var(--fs-sm); color: var(--text-muted); }

/* Shortcuts table */
.shortcuts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; gap: var(--sp-5); margin-bottom: var(--sp-3); }
.shortcuts-table { width: 100%; font-size: var(--fs-sm); }
.shortcuts-table caption { text-align: left; font-weight: var(--fw-bold); padding-bottom: var(--sp-2); }
.shortcuts-table th { text-align: left; color: var(--text-muted); font-weight: var(--fw-bold); padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); }
.shortcuts-table td { padding: 6px var(--sp-2) 6px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.shortcuts-table td.keys { white-space: nowrap; width: 1%; padding-right: var(--sp-4); }

/* --- Popover ------------------------------------------------------------------------------------ */
.popover-host { position: relative; }
.popover {
  position: absolute; top: var(--sp-2); left: 0; z-index: 30;
  width: min(360px, 100%);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--mat-edge); border-radius: var(--r-md); box-shadow: var(--float-frame);
  animation: fade-in var(--dur-fast) var(--ease);
}
.popover-head { display: flex; align-items: center; padding: var(--sp-1) var(--sp-1) 0 var(--sp-4); }
.popover-title { flex: 1 1 auto; margin: 0; font-size: var(--fs-md); }
.popover-body { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
.popover-body .field { margin-bottom: 0; }
@media (max-width: 599.98px) {
  .popover { left: 0 !important; width: 100%; }
}

/* --- Search suggestions (G5): a listbox under the search input ----------------------------------- */
.suggest-list {
  position: absolute; top: calc(100% + var(--sp-1)); left: 0; right: 0; z-index: 30;
  max-height: min(60vh, 360px); overflow-y: auto; margin: 0; padding: var(--sp-1) 0; list-style: none;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--mat-edge); border-radius: var(--r-md); box-shadow: var(--float-frame);
  animation: fade-in var(--dur-fast) var(--ease);
}
.suggest-list[hidden] { display: none; }
.suggest-option {
  display: flex; align-items: center; min-height: var(--hit); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-md); cursor: pointer; overflow-wrap: anywhere;
}
.suggest-option:hover, .suggest-option[aria-selected="true"] { background: var(--surface-2); }
.suggest-option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--accent); }

/* --- Toast -------------------------------------------------------------------------------------- */
.toasts { position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); z-index: var(--z-toast); width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
/* F17: on a page with a player, toasts sit at the top so they never cover the player controls or the action bar. */
body.has-player .toasts:not(dialog .toasts) { top: calc(var(--header-h) + var(--sp-2)); bottom: auto; }
body.has-player.focus-mode .toasts:not(dialog .toasts) { top: var(--sp-3); }
.toast {
  pointer-events: auto;
  background: var(--text); color: var(--bg);
  border-radius: var(--r-md); box-shadow: var(--float-frame);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.toast-in { opacity: 1; transform: none; }
.toast.toast-leave { opacity: 0; }
.toast-inner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4); min-height: 48px; }
.toast-msg { font-size: var(--fs-sm); padding: var(--sp-2) 0; }
.toast .btn-ghost { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
.toast .btn-ghost:hover { background: rgb(127 127 127 / .2); }
.toast .btn-icon { color: var(--bg); width: 40px; height: 40px; }
.toast .btn-icon:hover { background: rgb(127 127 127 / .2); }
.toast :focus-visible { outline-color: var(--bg); }
dialog .toasts { position: fixed; }

/* QR */
.qr-box { flex: none; width: 192px; height: 192px; background: #FFFFFF; border-radius: var(--r-sm); border: 1px solid var(--border); overflow: hidden; }
.qr-box svg { width: 100%; height: 100%; }
.qr-large { display: grid; place-items: center; gap: var(--sp-3); text-align: center; }
.qr-large svg { width: min(80vw, 70vh, 760px); height: auto; aspect-ratio: 1; }
.qr-large-scan { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.qr-large-link { margin: 0; max-width: 100%; font-family: var(--font-mono); font-size: clamp(var(--fs-md), 2.4vw, var(--fs-xl)); overflow-wrap: anywhere; user-select: all; }

@media (forced-colors: active) {
  .switch-track, .segment label, .btn, .input, .select { border: 1px solid CanvasText; }
  .tab[aria-selected="true"]::after { background: Highlight; }
  .spine-tick, .tx-line::before, .note-item::before, .chapter-item::before, .playlist-row::before, .fx-continue-link::before, .video-item::before, .fx-row::before { forced-color-adjust: none; border-color: CanvasText; }
  .tx-line[aria-current="true"]::before, .chapter-item[aria-current="true"]::before { background: Highlight; border-color: Highlight; }
}
.input::placeholder { text-overflow: ellipsis; }
.segmented-field .segmented { align-self: flex-start; }
.field > .select { max-width: 360px; }
.btn, .nav-link, .tab { position: relative; }

/* --- Spine ---------------------------------------------------------------------------------------- */
/* A list of moments hangs off one vertical line. Column 1 holds the timecode (or number), column 2 the spine and
   its tick, column 3 the content, column 4 actions. Ticks are circles (moments); a filled tick in the accent is
   the playhead: the current line, chapter, or the place you will resume. Lists set --t-col (0 = no timecode) and
   --spine-bg (the colour behind hollow ticks). */
.fx-continue-list, .tx-list, .notes-list, .chapters-list, .playlist-rows, .fx-results {
  position: relative;
  --spine-x: calc(var(--t-col) + var(--spine-gap) / 2);
}
.fx-continue-list::before, .tx-list::before, .notes-list::before, .chapters-list::before, .playlist-rows::before, .fx-results::before {
  content: ""; position: absolute; top: var(--sp-3); bottom: var(--sp-3); left: calc(var(--spine-x) - 0.5px); width: 1px;
  background: var(--spine); pointer-events: none;
}
.fx-continue-list:empty::before, .tx-list:empty::before, .notes-list:empty::before, .chapters-list:empty::before, .playlist-rows:empty::before, .fx-results:empty::before { display: none; }
.spine-tick, .fx-continue-link::before, .tx-line::before, .note-item::before, .chapter-item::before, .playlist-row::before, .video-item::before, .fx-history .fx-row::before {
  content: ""; grid-column: 2; grid-row: 1; justify-self: center; align-self: start; position: relative; z-index: 1;
  width: var(--tick); height: var(--tick); margin-top: calc(0.75em - var(--tick) / 2);
  border: 2px solid var(--tick-ring); border-radius: var(--r-moment); background: var(--spine-bg, var(--bg));
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Timecode in the gutter: right-aligned so the digits meet the spine. */
.spine-time, .fx-at, .tx-time, .note-time, .chapter-time, .playlist-num, .video-item .video-duration {
  grid-column: 1; grid-row: 1; justify-self: end; text-align: right;
  font-family: var(--font-time); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
}
/* A rule under each entry that starts at the content column, so the spine stays unbroken. */
.spine-rule, .playlist-row, .video-item, .fx-history .fx-row, .fx-continue-item {
  border-bottom: 0;
  background-image: linear-gradient(var(--border), var(--border));
  background-repeat: no-repeat;
  background-size: calc(100% - var(--t-col) - var(--spine-gap)) 1px;
  background-position: 100% 100%;
}
.playlist-rows, .fx-continue-list { border-top: 0; }