/* Sportscut chat — layout on top of the Modernist design system.
   Every colour, space and radius comes from ds/styles.css tokens, so a theme
   can repaint the app by overriding them and nothing here needs to change.

   Four literals, and they are the same exception: white on the video ground
   and white on the accent. Both of those surfaces are dark under every theme,
   so their foreground does not follow the page — writing --color-bg there
   worked only while the page happened to be light, and inverted with it. The
   letterbox matte is the same argument at full strength: it is video, not a
   UI surface, so it stays true black. */

/* Structure, alongside the design system's colour and space tokens.

   Rule weight is a theme's business as much as its palette is: Modernist is
   2px rules and square corners, and a theme built on hairlines and 14px cards
   is a different object made of the same parts. The radii come from
   ds/styles.css, which ships them at 0 — the rules below name them so that
   setting them does something. --rule and --rule-hair live here because the
   design system has no token for a border width. */
:root {
  --rule: 2px;        /* structural: the shell, panels, the composer */
  --rule-hair: 1px;   /* dividers: rows inside a panel, header buttons */
}

body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text);
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
input, button, textarea { font-family: var(--font-body); }

.shell {
  height: 100vh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
}

/* ── Header ─────────────────────────────────────────────────────────── */

.app-header {
  display: flex;
  align-items: stretch;
  border-bottom: var(--rule) solid var(--color-text);
  flex: none;
  /* The context block used to set this and push the buttons right. With it
     gone the header would collapse to the logo's height. */
  min-height: 56px;
}

.brand {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-right: var(--rule) solid var(--color-text);
  /* Everything after the brand sits at the far end of the header. */
  margin-right: auto;
}

/* The wordmark carries its own weight and letterspacing, so it is sized by
   height and left to keep its own proportions.

   These two constraints now fight, and the width wins. The lockup is 1006x300,
   so at 3em (45px in a 15px context) it wants 151px of width and the 8em cap
   gives it 120px. object-fit keeps the ratio rather than squashing, which means
   the rendered height is about 36px, not 45px. Raise the cap past 10.1em if the
   full 3em is wanted. */
.brand-logo {
  height: 3em;
  width: auto;
  max-width: 8em;
  object-fit: contain;
  display: block;
}

.signin-logo { height: 30px; width: auto; margin-bottom: var(--space-4); }

.brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.header-btn {
  border: 0;
  border-left: var(--rule-hair) solid var(--color-neutral-300);
  background: transparent;
  padding: 0 18px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--color-text);
  white-space: nowrap;
}
.header-btn:hover { background: var(--color-accent-100); }

/* ── Transcript ─────────────────────────────────────────────────────── */

.scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 0 24px; }

.transcript {
  max-width: 860px;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.msg { border-left: var(--rule) solid var(--color-neutral-400); padding-left: 16px; }
.msg-agent { border-left-color: var(--color-accent); }

.msg-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 6px;
}
.msg-agent .msg-label { color: var(--color-accent-700); }

.msg-text {
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
  white-space: pre-wrap;
  max-width: 640px;
}

.thinking-text { font-size: 13px; color: var(--color-neutral-600); }

/* ── Inline cards ───────────────────────────────────────────────────── */

.panel { margin-top: 14px; border: var(--rule) solid var(--color-text); max-width: 640px; }
.panel-light { margin-top: 14px; border: var(--rule-hair) solid var(--color-neutral-300); max-width: 640px; }

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: var(--rule-hair) solid var(--color-neutral-300);
}

.panel-head-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.panel-head-meta {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 10px;
}

/* The chosen sort. A pressed link-button reads as the current state rather
   than as somewhere to go, so it takes the text colour and loses the hand. */
.link-btn[aria-pressed="true"] {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: default;
}

.row { border-bottom: var(--rule-hair) solid var(--color-neutral-300); }
.row:last-child { border-bottom: 0; }

/* Moments */

.moment-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.thumb {
  position: relative;
  height: 40px;
  background: var(--color-neutral-900);
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  width: 100%;
}
.thumb:hover { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.thumb-stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--color-neutral-900) 80%, var(--color-neutral-700)) 0 7px,
    var(--color-neutral-900) 7px 15px);
}

.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.thumb-clock {
  position: absolute;
  left: 4px;
  bottom: 3px;
  font-size: 8.5px;
  font-weight: 700;
  /* On the video ground, not on the page: the thumbnail is dark under every
     theme, so this is white rather than --color-bg, which follows the page. */
  color: #fff;
  z-index: 1;
}

.moment-label { font-size: 12.5px; font-weight: 700; line-height: 1.25; }

.moment-meta {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-top: 3px;
}

.rerank-why {
  font-size: 10.5px;
  color: var(--color-neutral-700);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.4;
}

/* Buttons in the Modernist idiom — flush left labels, square corners */

.btn-outline {
  border: var(--rule-hair) solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline:hover { background: var(--color-accent-100); }
.btn-outline:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-solid {
  border: 0;
  background: var(--color-accent);
  /* On the accent, so white rather than --color-bg — which is the page's own
     colour and is only readable here while the page is light. */
  color: #fff;
  padding: 9px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-solid:hover { background: var(--color-accent-600); }
.btn-solid:active { background: var(--color-accent-700); }
.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; }

.chip {
  border: var(--rule-hair) solid var(--color-neutral-400);
  background: transparent;
  color: var(--color-neutral-800);
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
}
.chip:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.chip[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  color: var(--color-accent-900);
}

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }

/* Inline player — opens in place, so a moment is reviewed without a timeline */

.inline-player {
  border-top: var(--rule-hair) solid var(--color-neutral-300);
  background: var(--color-neutral-900);
  position: relative;
}
/* Letterbox bars stay true black: this is video matte, not a UI surface, and
   a tinted ground would read as a rendering fault against the footage. */
.inline-player video { width: 100%; display: block; aspect-ratio: 16 / 9; background: #000; }

.player-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--color-bg);
  border-top: var(--rule-hair) solid var(--color-neutral-300);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-700);
}

/* Ingest */

.dropzone {
  border: var(--rule) dashed var(--color-neutral-500);
  background: var(--color-neutral-100);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.dropzone.is-over { border-color: var(--color-accent); background: var(--color-accent-100); }

.dz-thumb {
  width: 74px;
  height: 42px;
  background: var(--color-neutral-900);
  position: relative;
  overflow: hidden;
  flex: none;
}

.dz-name { font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.dz-meta { font-size: 11px; color: var(--color-neutral-700); margin-top: 3px; }

.file-label {
  border: var(--rule-hair) solid var(--color-text);
  background: transparent;
  padding: 7px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.file-label:hover { background: var(--color-accent-100); }

.source-tabs { display: flex; border-bottom: var(--rule-hair) solid var(--color-neutral-300); }

.source-tab {
  flex: 1;
  border: 0;
  border-right: var(--rule-hair) solid var(--color-neutral-300);
  background: transparent;
  color: var(--color-text);
  padding: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.source-tab:last-child { border-right: 0; }
.source-tab[aria-selected="true"] { background: var(--color-text); color: var(--color-bg); }
.source-tab:disabled { opacity: 0.45; cursor: not-allowed; }

.field-label {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

/* Progress */

.meter { flex: 1; height: 4px; background: var(--color-neutral-300); }
.meter i { display: block; height: 4px; background: var(--color-accent); }
.meter-neutral i { background: var(--color-neutral-800); }

.meter-row { display: flex; align-items: center; gap: 9px; margin-top: 8px; }

/* Stage strip: one segment per pipeline stage, widths in proportion to how long
   each stage actually takes, so the bar moves at a roughly constant rate
   through a run rather than sitting still through the hour of analysis. */
.stage-strip { display: flex; gap: 4px; margin-top: 9px; }
.stage { flex-grow: 1; flex-basis: 0; }
.stage[data-state="todo"] { opacity: 0.45; }
.stage-meter { height: 4px; background: var(--color-neutral-300); }
.stage-meter i { display: block; height: 4px; background: var(--color-neutral-800); }
.stage[data-state="active"] .stage-meter i { background: var(--color-accent); }

.stage-label {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.stage[data-state="active"] .stage-label { color: var(--color-accent); }

.meter-pct {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-700);
}

/* Reel */

.reel-bars { display: flex; height: 30px; border-bottom: var(--rule-hair) solid var(--color-neutral-300); }
.reel-bar { border-right: var(--rule-hair) solid var(--color-bg); flex-basis: 0; }

.clip-row {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: var(--rule-hair) solid var(--color-neutral-300);
}

.clip-n {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}

.clip-label { font-size: 12px; font-weight: 700; line-height: 1.25; min-width: 0; }

.stepper { display: flex; align-items: center; gap: 6px; }

.step-btn {
  border: var(--rule-hair) solid var(--color-neutral-400);
  background: transparent;
  color: var(--color-text);
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
.step-btn:hover { border-color: var(--color-accent); }

.step-val {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: center;
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--color-neutral-600);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 2px;
}
.link-btn:hover { color: var(--color-accent); }

.panel-actions { display: flex; gap: 8px; padding: 11px 12px; flex-wrap: wrap; }

/* Jobs */

.job { padding: 11px 12px; border-bottom: var(--rule-hair) solid var(--color-neutral-300); }
.job:last-child { border-bottom: 0; }

.job-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.job-name { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }

.job-status {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-neutral-600);
}
.job-status[data-tone="running"] { color: var(--color-neutral-800); }
.job-status[data-tone="failed"] { color: var(--color-accent-2); }

.job-stage { font-size: 11px; color: var(--color-neutral-700); margin-top: 4px; line-height: 1.4; }

.job-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 7px;
  border-left: var(--rule) solid var(--color-accent-2);
  background: var(--color-accent-2-100);
  padding: 8px 10px;
}
.job-error p { font-size: 11px; line-height: 1.45; color: var(--color-accent-2-900); flex: 1; margin: 0; }

/* Publish */

.platform {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: var(--rule-hair) solid var(--color-neutral-300);
  background: transparent;
  color: var(--color-text);
  padding: 11px 12px;
  cursor: pointer;
}
.platform:hover { background: var(--color-accent-100); }
.platform[aria-pressed="true"] { background: var(--color-accent-100); }

.checkmark { width: 14px; height: 14px; border: var(--rule) solid var(--color-neutral-600); }
.platform[aria-pressed="true"] .checkmark { border-color: var(--color-accent); background: var(--color-accent); }

.platform-name { font-size: 12.5px; font-weight: 700; }
.platform-spec { font-size: 10.5px; color: var(--color-neutral-700); margin-top: 2px; }

.platform-state {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

.caption-box {
  width: 100%;
  border: var(--rule-hair) solid var(--color-neutral-400);
  background: var(--color-neutral-100);
  padding: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  outline: 0;
  resize: vertical;
  color: var(--color-text);
}
.caption-box:focus-visible { border-color: var(--color-accent); }

/* Composer */

.composer { flex: none; border-top: var(--rule) solid var(--color-text); }

.suggestions { padding: 12px 48px 8px; display: flex; flex-wrap: wrap; gap: 7px; }

.composer-inner { padding: 0 48px 18px; }

.composer-box {
  display: flex;
  border: var(--rule) solid var(--color-text);
  background: var(--color-neutral-100);
}

.composer-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 13px 14px;
  font-size: 13.5px;
  color: var(--color-text);
  min-width: 0;
}

.composer-send {
  border: 0;
  border-left: var(--rule) solid var(--color-text);
  background: var(--color-accent);
  color: #fff;
  padding: 0 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.composer-send:hover { background: var(--color-accent-600); }
.composer-send:disabled { opacity: 0.45; cursor: not-allowed; }

.footer-line {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-top: 7px;
}

/* Sign-in */

.signin {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  z-index: 50;
}

.signin-card {
  width: min(420px, 92vw);
  border: var(--rule) solid var(--color-text);
  background: var(--color-neutral-100);
  padding: var(--space-8);
}

.signin-card h1 { font-size: 28px; margin: 0 0 var(--space-2); }

.signin-alt { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.signin-alt > span:first-child,
.signin-alt > span:last-child { flex: 1; height: 1px; background: var(--color-neutral-300); }
.signin-card p { font-size: 14px; color: var(--color-neutral-800); margin-bottom: var(--space-6); }

.error-note {
  border-left: var(--rule) solid var(--color-accent-2);
  background: var(--color-accent-2-100);
  color: var(--color-accent-2-900);
  padding: 9px 11px;
  font-size: 12px;
  margin-top: var(--space-3);
}

.hidden { display: none !important; }

@media (max-width: 900px) {
  .transcript, .suggestions, .composer-inner { padding-left: 20px; padding-right: 20px; }
}

/* Slot the live player is re-parented into after each render. */
.player-slot:empty { display: none; }

/* Game details */
/* Two columns, not the moment row's three: a game has no thumbnail to play,
   so borrowing that grid would squeeze the headline into the 72px thumb slot. */
.game-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.game-summary {
  padding: 0 12px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-neutral-800);
}

/* Aligned under the headline rather than the thumb column, so the outcome
   reads as part of the same statement. */
.game-outcome {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.header-select {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: var(--rule) solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  padding: 6px 8px;
  margin-right: 8px;
  cursor: pointer;
}

/* Firebase restores a stored session asynchronously and reports null first.
   Painting nothing until that resolves stops every reload flashing the sign-in
   card, which reads as having been logged out. */
body:not([data-auth-resolved]) .signin,
body:not([data-auth-resolved]) .shell { visibility: hidden; }

/* Settings */
.modal {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-text) 45%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px;
  z-index: 50;
}

.modal-card {
  width: min(520px, 100%);
  background: var(--color-neutral-100);
  border: var(--rule) solid var(--color-text);
  max-height: 84vh;
  overflow-y: auto;
}

.modal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: var(--rule) solid var(--color-text);
}

.modal-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.setting { padding: 14px 16px; border-bottom: var(--rule-hair) solid var(--color-neutral-300); }
.setting:last-child { border-bottom: 0; }

.setting-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-neutral-800);
  margin: 4px 0 9px;
}

/* Sessions panel */
.workspace { flex: 1; display: flex; min-height: 0; }

.sessions {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: var(--rule) solid var(--color-text);
  background: var(--color-neutral-100);
  min-height: 0;
}

.sessions-new {
  flex: none;
  border: 0;
  border-bottom: var(--rule) solid var(--color-text);
  background: var(--color-accent);
  color: #fff;
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.sessions-new:hover { background: var(--color-accent-600); }

.sessions-list { flex: 1; overflow-y: auto; min-height: 0; }

/* The row holds the session button and its delete control side by side; the
   delete only appears on hover or focus, so a list of matches is not a row of
   crosses inviting an accident. */
.session-row { display: flex; align-items: stretch; border-bottom: var(--rule-hair) solid var(--color-neutral-300); }
.session-row:hover { background: var(--color-accent-100); }

.session-delete {
  flex: none;
  width: 30px;
  border: 0;
  background: transparent;
  color: var(--color-neutral-700);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.session-row:hover .session-delete,
.session-delete:focus-visible { opacity: 1; }
.session-delete:hover { color: var(--color-accent); }

.session {
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 11px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}

/* The open session is marked with a rule rather than a fill, so the list keeps
   reading as one column of equal items. */
.session[aria-current="true"] { border-left: 3px solid var(--color-accent); padding-left: 11px; }

.session-name {
  font-size: 12.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.session-meta {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.session[data-tone="running"] .session-meta { color: var(--color-neutral-800); }
.session[data-tone="failed"] .session-meta { color: var(--color-accent-2); }

.sessions-empty {
  padding: 14px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-neutral-800);
}

@media (max-width: 720px) {
  /* Below this the transcript needs the whole width more than the list does. */
  .sessions { display: none; }
}

/* Details popup: the moment on the left, its record on the right.

   Opening the details of a play is the point at which someone wants to see it,
   so the two sit side by side rather than the facts replacing the footage. The
   card is wider than the settings dialog for that reason — 520px of video and
   a two-column table beside it is neither. */
.modal-card-wide { width: min(1180px, 100%); }

/* The video takes the larger share. The record beside it is a two-column table
   of short values, which reads fine narrow, while a 16:9 frame squeezed to
   half a dialog is the thing someone opened this to look at. */
.detail-split {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
}

.detail-player {
  border-right: var(--rule) solid var(--color-text);
  background: var(--color-neutral-900);
}

/* A game record has nothing to play, so it gets the whole width rather than a
   black column where a video would be. */
.detail-split.solo { grid-template-columns: 1fr; }
.detail-split.solo .detail-player { display: none; }

/* Sticky against the card's own scroll, so a long record scrolls past a video
   that stays where it is. The column stretches to the row height by default,
   which is what gives this somewhere to stick. */
.detail-player .player-slot { position: sticky; top: 0; }

/* Below this the two would each be too narrow to read, so they stack: the
   video first, because it is what was asked for. */
@media (max-width: 760px) {
  .detail-split { grid-template-columns: 1fr; }
  .detail-player {
    border-right: 0;
    border-bottom: var(--rule) solid var(--color-text);
  }
  .detail-player .player-slot { position: static; }
}

/* Moment details */
.moment-actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Two columns: the attribute name, then its value. The name column is sized to
   the longest label rather than a fraction of the width, so the values line up
   and stay readable when a description runs long. */
.detail-grid { display: grid; grid-template-columns: max-content 1fr; }

.detail-key,
.detail-value {
  padding: 9px 14px;
  border-bottom: var(--rule-hair) solid var(--color-neutral-300);
  font-size: 12px;
  line-height: 1.45;
}

.detail-key {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--color-neutral-700);
  white-space: nowrap;
  border-right: var(--rule-hair) solid var(--color-neutral-300);
}

.detail-value { overflow-wrap: anywhere; }

/* Registering a source already in Cloud Storage. Its own block under the
   dropzone rather than beside it: they are two ways to do the same thing, and
   side by side they read as two halves of one. */
.gcs-row { margin-top: 14px; }

.gcs-input-row { display: flex; gap: 8px; margin-top: 6px; }
.gcs-input-row .composer-input {
  flex: 1;
  min-width: 0;
  border: var(--rule-hair) solid var(--color-neutral-400);
  padding: 8px 10px;
  font-size: 12px;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}
.gcs-input-row .btn-outline { flex: none; }
.gcs-row .setting-hint { margin-top: 6px; }

/* A game's record opened inside the list rather than in the popup. Indented
   and quieter than a row of its own, so the headline above it stays the thing
   being scanned. */
.detail-inline {
  border-top: var(--rule-hair) solid var(--color-neutral-300);
  margin-top: 8px;
  background: var(--color-neutral-100);
}
.detail-inline .detail-key,
.detail-inline .detail-value { padding: 6px 12px; font-size: 11px; }
.detail-inline > :nth-last-child(-n + 2) { border-bottom: 0; }

@media (max-width: 520px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-key { border-right: 0; padding-bottom: 0; border-bottom: 0; }
}

/* Pager */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-top: var(--rule-hair) solid var(--color-neutral-300);
}

.pager-count {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-700);
}

.pager .link-btn[disabled] { opacity: 0.35; cursor: default; }


/* ── Rounding ───────────────────────────────────────────────────────────
   Inert under Modernist, whose radii are 0 — these rules name the tokens so a
   theme that sets them is applied rather than ignored.

   Containers that round also clip. A row's own background or bottom rule is
   square, so without overflow it draws over the corner it is supposed to sit
   inside — visible as a notch on exactly one row of a list. */

.panel,
.panel-light,
.modal-card,
.dropzone,
.signin-card,
.inline-player,
.detail-player,
.composer-box,
.stage-strip,
.source-tabs {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* The popup's two columns share the card's corners rather than having their
   own, so the player rounds on the left only. */
.detail-player { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
@media (max-width: 760px) {
  .detail-player { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

.btn-solid,
.btn-outline,
.chip,
.link-btn,
.header-btn,
.file-label,
.platform,
.session,
.thumb,
.dz-thumb,
.step-btn,
.caption-box,
.composer-input,
.header-select {
  border-radius: var(--radius-md);
}

.meter,
.meter i,
.stage-meter,
.stage-meter i,
.reel-bar,
.checkmark {
  border-radius: var(--radius-sm);
}

/* The send button is flush against the input's edge, so it keeps the corners
   on that side square whatever the theme does. */
.composer-send { border-radius: 0 var(--radius-md) var(--radius-md) 0; }