/*
 * segmnt dashboard v2 — YAH-703 layout additions.
 *
 * Load order: theme.css → components.css → ../app.css → v2.css.
 * Same rules as app.css: tokens only (0, 1px/2px hairlines, percentages,
 * unitless numbers and @media breakpoints allowed). Components are not
 * restyled here. Blocks marked PROPOSED are candidates for components.css.
 */

/* ---------- Links inside content ---------- */
/* The global link rule lives in app.css (base), so it also covers sign-in. */
.page-meta .sg-icon { inline-size: var(--space-4); block-size: var(--space-4); vertical-align: -0.2em; }

/* ---------- Shell: topbar additions ---------- */

.sg-topbar .sg-nav ul { display: flex; gap: var(--space-1); }
.help-link { display: inline-flex; gap: var(--space-1); align-items: center; }
.account-chip {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
[dir="rtl"] .account-chip { padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2); }
.avatar {
  display: inline-grid;
  place-items: center;
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-primary-soft);
  background: var(--color-primary-soft);
  border-radius: var(--radius-full);
  flex: none;
}

/* ---------- Page header v2 ---------- */

.title-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.id-chip {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding-inline: var(--space-2);
  min-block-size: var(--size-control-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  border: 0;
  border-radius: var(--radius-sm);
}
.id-chip .sg-icon { inline-size: var(--space-4); block-size: var(--space-4); }

/* ---------- Overview ---------- */

.overview {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.overview-main, .overview-side { display: grid; gap: var(--space-6); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--size-container-sm) / 3.5)), 1fr));
  gap: var(--space-4);
}
.stat-row .sg-card { gap: var(--space-2); }
.stat-foot { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.stat-foot a { color: inherit; }

/* Setup checklist: the project's "get to first embed" path. It hides itself
   once every item is done (progressive disclosure). */
.checklist-head { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between; }
.checklist-head p { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-block-start: var(--space-1); }
.checklist-count { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary); white-space: nowrap; }
.checklist-bar { display: flex; gap: var(--space-1); }
.checklist { display: grid; margin: 0; padding: 0; list-style: none; }
.checklist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}
.checklist-item:first-child { border-block-start: 0; }
.check-mark {
  display: grid;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  color: var(--color-text-muted);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-full);
}
.checklist-item[data-done] .check-mark { color: var(--color-on-primary); background: var(--color-primary); border: 0; }
.checklist-item[data-current] .check-mark { border-style: solid; border-color: var(--color-primary); }
.checklist-item .sg-icon { inline-size: var(--space-4); block-size: var(--space-4); }
.checklist-title { font-weight: var(--font-weight-medium); }
.checklist-item[data-done] .checklist-title { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: var(--color-border-strong); }
.checklist-body { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Section heading inside a page (between cards). */
.section-head { display: flex; gap: var(--space-3); align-items: baseline; justify-content: space-between; }
.section-title { font-size: var(--font-size-lg); line-height: var(--line-height-snug); font-weight: var(--font-weight-semibold); }
.section-head a { font-size: var(--font-size-sm); }

/* Help card: guides by platform (recognition over recall). */
.guide-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.guide-list a {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.guide-list a:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.guide-list .guide-icon {
  display: grid;
  place-items: center;
  inline-size: var(--size-control-sm);
  block-size: var(--size-control-sm);
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
  flex: none;
}
.guide-list small { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.guide-list .sg-icon[data-directional] { margin-inline-start: auto; color: var(--color-text-muted); }

/* Overview extras (YAH-714): unit suffixes, the domain tick, attention tone. */
.stat-unit { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); color: var(--color-text-muted); }
.stat-ok { display: inline-flex; gap: var(--space-1); align-items: center; color: var(--color-success); }
.stat-ok .sg-icon { inline-size: var(--space-3); block-size: var(--space-3); }
.ov-attention .ready-list li[data-todo] > .sg-icon { color: var(--color-danger); }
.code-note .sg-icon { inline-size: var(--space-3); block-size: var(--space-3); vertical-align: -0.15em; }
.app-main a.dropzone { color: inherit; text-decoration: none; }

/* ---------- Poster (thumbnail) — PROPOSED for components.css ---------- */
/* Neutral tile on the stage colour: film glyph + duration when ready, a status
   glyph otherwise. No list-safe per-row thumbnail URL exists yet (YAH-704 Q1),
   so the list never shows a fake picture. The real poster lives on the video
   page stage (.stage[data-art] in these mockups), from the preview token. */

.poster {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: var(--color-on-stage);
  background: var(--color-stage);
  border-radius: var(--radius-md);
  isolation: isolate;
}
.poster[data-status="ready"] .poster-glyph,
.poster[data-status="held"] .poster-glyph { color: color-mix(in oklab, var(--color-on-stage) 55%, transparent); }
.poster-time {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  padding: 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-on-stage);
  background: color-mix(in oklab, var(--color-stage) 80%, transparent);
  border-radius: var(--radius-sm);
}
.poster-glyph {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
  font-size: var(--font-size-xs);
  color: color-mix(in oklab, var(--color-on-stage) 80%, transparent);
}
.poster-glyph .sg-icon { inline-size: var(--space-6); block-size: var(--space-6); }
.poster[data-status="failed"] { background: var(--color-danger-soft); color: var(--color-danger); }
.poster[data-status="failed"] .poster-glyph { color: var(--color-danger); }
.poster .sg-spinner { inline-size: var(--space-6); block-size: var(--space-6); }

/* ---------- Video list v2 ---------- */

.video-list-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.search-field { position: relative; flex: 1 1 calc(var(--size-container-sm) / 2); max-inline-size: calc(var(--size-container-sm) * 0.75); }
.search-field .sg-icon { position: absolute; inset-block-start: 50%; inset-inline-start: var(--space-3); translate: 0 -50%; color: var(--color-text-muted); pointer-events: none; }
.search-field .sg-input { padding-inline-start: var(--space-10); }
.segmented {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}
.segmented a {
  display: inline-flex;
  white-space: nowrap;
  gap: var(--space-1);
  align-items: center;
  min-block-size: var(--size-control-sm);
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.segmented a[aria-current="true"] { color: var(--color-text); background: var(--color-surface); box-shadow: var(--shadow-1); }
.segmented .sg-badge { font-size: var(--font-size-xs); }

.vrow-cell { display: flex; gap: var(--space-3); align-items: center; min-inline-size: 0; }
.vrow-cell .poster { inline-size: calc(var(--space-24) + var(--space-8)); flex: none; border-radius: var(--radius-sm); }
.vrow-cell .poster-glyph { padding: 0; }
.vrow-cell .poster-glyph > span:not(.sg-spinner) { display: none; }
.vrow-title { display: block; font-weight: var(--font-weight-medium); color: var(--color-text); text-decoration: none; }
.vrow-title:hover { text-decoration: underline; }
.vrow-sub { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.vrow-sub[data-tone="danger"] { color: var(--color-danger); }
.vrow-sub[data-tone="warning"] { color: var(--color-text-muted); }
.sg-table tbody tr[data-clickable]:hover { background: var(--color-surface-sunken); }

/* Inline upload card above the list while a file uploads in this tab. */
.upload-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.upload-strip .poster { inline-size: calc(var(--space-24) + var(--space-8)); }
.upload-strip .sg-progress-row { margin-block-start: var(--space-2); }

/* ---------- Video detail ---------- */

/* Areas: on desktop the embed panel sits beside the player; on narrow screens
   it comes right after the player and before Details, because copying the
   embed is the most likely next step. */
.detail {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  grid-template-areas: "stage side" "info side";
  grid-template-rows: auto 1fr;
  gap: var(--space-6);
  align-items: start;
}
.detail-stage { grid-area: stage; }
.detail-side { grid-area: side; display: grid; gap: var(--space-6); }
.detail-info { grid-area: info; }
.stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: var(--color-on-stage);
  background: var(--color-stage);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  isolation: isolate;
}
.stage[data-art]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 28%, color-mix(in oklab, var(--color-stage-progress) 40%, transparent), transparent 50%),
    linear-gradient(135deg, var(--color-stage-raised), var(--color-stage));
}
.stage-play {
  display: grid;
  place-items: center;
  inline-size: var(--space-16);
  block-size: var(--space-16);
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-2);
}
.stage-play .sg-icon { inline-size: var(--space-6); block-size: var(--space-6); }
.stage-bar {
  position: absolute;
  inset-inline: var(--space-4);
  inset-block-end: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}
.stage-track { flex: 1; block-size: var(--space-1); border-radius: var(--radius-full); background: color-mix(in oklab, var(--color-on-stage) 25%, transparent); }
.stage-track i { display: block; inline-size: 18%; block-size: 100%; border-radius: inherit; background: var(--color-stage-progress); }
.stage-tag {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  background: color-mix(in oklab, var(--color-stage) 75%, transparent);
  border-radius: var(--radius-sm);
}
.stage-tag .sg-icon { inline-size: var(--space-4); block-size: var(--space-4); }
.stage-msg { display: grid; justify-items: center; gap: var(--space-3); max-inline-size: calc(var(--size-container-sm) * 0.8); padding: var(--space-6); text-align: center; }
.stage-msg h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.stage-msg p { font-size: var(--font-size-sm); color: color-mix(in oklab, var(--color-on-stage) 80%, transparent); }
.stage-msg .sg-spinner { inline-size: var(--space-8); block-size: var(--space-8); }
.stage[data-tone="danger"] { background: var(--color-danger-soft); color: var(--color-text); box-shadow: none; border: 1px solid var(--color-danger); }
.stage[data-tone="danger"] .stage-msg p { color: var(--color-text-muted); }
.stage-msg .stage-note { font-size: var(--font-size-xs); }
.stage[data-tone="danger"] .stage-icon { color: var(--color-danger); }
.stage-icon .sg-icon { inline-size: var(--space-8); block-size: var(--space-8); }

/* Processing timeline: what is happening and what comes next. */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; inline-size: 100%; }
.timeline li { display: grid; gap: var(--space-1); font-size: var(--font-size-xs); color: color-mix(in oklab, var(--color-on-stage) 70%, transparent); text-align: start; }
.timeline li::before { content: ""; block-size: var(--space-1); border-radius: var(--radius-full); background: color-mix(in oklab, var(--color-on-stage) 20%, transparent); }
.timeline li[data-done]::before { background: var(--color-stage-progress); }
.timeline li[data-current] { color: var(--color-on-stage); font-weight: var(--font-weight-semibold); }
.timeline li[data-current]::before { background: linear-gradient(90deg, var(--color-stage-progress) 50%, color-mix(in oklab, var(--color-on-stage) 20%, transparent) 50%); }
[dir="rtl"] .timeline li[data-current]::before { background: linear-gradient(270deg, var(--color-stage-progress) 50%, color-mix(in oklab, var(--color-on-stage) 20%, transparent) 50%); }

/* Facts list (read-only details). */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: 0;
  font-size: var(--font-size-sm);
}
.facts dt { color: var(--color-text-muted); }
.facts dd { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-inline-size: 0; }
.facts code { font-size: var(--font-size-sm); }

/* Embed panel. */
.embed-card { gap: var(--space-4); }
.embed-card .sg-tabs { margin-block-start: calc(var(--space-2) * -1); }
.code-well { position: relative; display: grid; gap: var(--space-2); }
.code-block {
  margin: 0;
  max-block-size: calc(var(--space-24) * 2.5);
  overflow: auto;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-on-stage);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--color-stage-raised);
  border-radius: var(--radius-md);
}
.code-block .tok { color: var(--color-stage-progress); }
.code-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.code-note { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ready-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-sm); }
.ready-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.ready-list .sg-icon { inline-size: var(--space-5); block-size: var(--space-5); }
.ready-list li[data-ok] > .sg-icon { color: var(--color-success); }
.ready-list li[data-todo] > .sg-icon { color: var(--color-warning); }
.ready-list small { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.ready-list a { font-size: var(--font-size-sm); white-space: nowrap; }

.inline-edit { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.inline-edit .sg-input { flex: 1 1 calc(var(--size-container-sm) / 2); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }

/* ---------- Upload v2 ---------- */

.upload-done { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.next-steps { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.next-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--font-size-sm);
  counter-increment: step;
}
.next-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  inline-size: var(--space-6);
  block-size: var(--space-6);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-primary-soft);
  background: var(--color-primary-soft);
  border-radius: var(--radius-full);
}
.next-steps strong { display: block; font-weight: var(--font-weight-medium); color: var(--color-text); }
.next-steps span { color: var(--color-text-muted); }
.req-list { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* ---------- First-run project (no videos) ---------- */

.first-run { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.hero-drop { gap: var(--space-4); padding-block: var(--space-16); }
.hero-drop .sg-state-art { inline-size: var(--space-16); block-size: var(--space-16); }

/* ---------- Mockup index ---------- */

.matrix { display: grid; gap: var(--space-6); }
.matrix table { font-size: var(--font-size-sm); }
.matrix td a { margin-inline-end: var(--space-2); }

/* ---------- Responsive ---------- */

@media (width < 1024px) {
  .overview, .first-run, .upload-done { grid-template-columns: minmax(0, 1fr); }
  .detail { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "side" "info"; grid-template-rows: auto; }
}

@media (width < 768px) {
  .help-link span, .account-chip .account-label { display: none; }
  .account-chip { padding: var(--space-1); border: 0; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row .sg-stat-value { font-size: var(--font-size-2xl); }
  .checklist-item { grid-template-columns: auto minmax(0, 1fr); }
  .checklist-item > .sg-button { grid-column: 2; justify-self: start; }
  .vrow-cell .poster { inline-size: calc(var(--space-20) + var(--space-4)); }
  .video-list-toolbar { align-items: stretch; flex-direction: column; }
  .search-field { flex: none; max-inline-size: none; }
  .segmented { display: flex; max-inline-size: 100%; overflow-x: auto; }
  .upload-strip { grid-template-columns: minmax(0, 1fr); }
  .upload-strip .poster { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .facts dd { margin-block-end: var(--space-2); }
  .timeline li span { display: none; }
  .timeline li[data-current] span { display: block; }
  .hero-drop { padding-block: var(--space-10); }
  .stage-msg { padding: var(--space-4); gap: var(--space-2); }
  .stage-msg p { display: none; }
}

/* The v1 .app-main grid has an implicit auto column, so a wide child (a
   table, a tab strip) can push the page wider than a phone screen. */
.app-main { grid-template-columns: minmax(0, 1fr); }
.split > *, .upload-done > *, .stack > * { min-inline-size: 0; }
/* PROPOSED for components.css: card footers wrap on phones, and the primary
   action (last in source) ends up full width nearest the thumb. */
@media (width < 768px) {
  .sg-card-foot { flex-wrap: wrap; }
  .sg-card-foot .sg-button { flex: 1 1 auto; }
}

.recent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

/* Phones: one column, ordered by urgency — the checklist, then anything that
   needs attention, then stats, recent videos and guides. */
@media (width < 768px) {
  .overview { display: flex; flex-direction: column; }
  .overview > .overview-main, .overview > .overview-side { display: contents; }
  .ov-attention { order: 1; }
  .ov-stats { order: 2; }
  .ov-recent { order: 3; }
  .ov-guides { order: 4; }
  .recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .recent-grid > :nth-child(n + 3) { display: none; }
}