/*
 * Home: the "Needs you" list, the Current video and Recent videos row, and the bottom row
 * (Recommended next video, Performance snapshot, Ask Volare).
 *
 * The first part is the shared component in both other looks, built only from their tokens.
 * The second part is the Stage look, matching ui-b-stage proof 01-home / 01b-home-needs-expanded
 * (round 5 and 7 notes in its README: a grey shell, white row tiles, only the top item open).
 */

/* ================================================================ *
 * ALL LOOKS — the Needs you list
 * ================================================================ */
.needs { display: grid; gap: var(--s2); padding: var(--s3); background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.needs-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s2) 0; }
.needs-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--s2); border-radius: 999px;
  background: var(--soft); color: var(--ink-strong); font: var(--w-medium) var(--fs-meta)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.needs-statuses { margin-left: auto; }
.needs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.nrow { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--s4);
  padding: var(--s2); border-radius: var(--r-sm); background: var(--tile); }
.nrow--first { grid-template-columns: 7.5rem minmax(0, 1fr) auto auto auto; padding: var(--s3); }
.nthumb { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r-xs); overflow: hidden; background: var(--soft); color: var(--muted); }
.nthumb > svg, .nthumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nthumb--empty > svg { width: 18px; height: 18px; }
.nmain { display: grid; gap: 2px; min-width: 0; }
.nkicker { font: var(--type-meta); color: var(--muted); }
.ntitle { font: var(--type-body-strong); color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntitle:hover { text-decoration: underline; text-underline-offset: 3px; }
.nline { font: var(--type-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntime { font: var(--type-meta); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; min-width: 4.5rem; }
.naction { justify-self: end; }
.needs-toggle { display: inline-flex; align-items: center; gap: var(--s1); justify-self: start; padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  font: var(--w-medium) var(--fs-meta)/1 var(--font-sans); color: var(--muted); }
.needs-toggle:hover { background: var(--hover-card); color: var(--ink-strong); }
.needs-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.needs-rest { display: grid; gap: var(--s2); }
.needs-rest[hidden] { display: none; }
.needs-all { padding: var(--s1) var(--s3) var(--s2); }
.needs-empty { display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border-radius: var(--r-sm); background: var(--tile); color: var(--muted); font: var(--type-body); }
.needs-empty svg { color: var(--dk-tx-st-done, var(--st-done)); flex: none; }
.home-ask .ask-inline-title { font: var(--type-section); letter-spacing: var(--track-title); color: var(--ink-strong); margin: 0 0 var(--s3); }
.home-ask .ask-inline .ask-widget { margin-bottom: 0; }
/* Classic and Volare keep their full-width Current video and Assistant band: the row classes stack instead. */
html:not([data-look="stage"]) .home-mid { grid-template-columns: minmax(0, 1fr); }
html:not([data-look="stage"]) .home-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html:not([data-look="stage"]) .home-foot > .assistant { grid-column: 1 / -1; order: 3; }
@media (max-width: 900px) {
  .nrow, .nrow--first { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
  .nrow .pill, .nrow .ntime { display: none; }
}

/* ================================================================ *
 * STAGE
 * ================================================================ */
/* The page action lives in the sidebar (Create video); the greeting stands alone. */
html[data-look="stage"] body[data-route="home"] .hero-actions { display: none; }
html[data-look="stage"] body[data-route="home"] .hero { padding-bottom: 2px; }
html[data-look="stage"] body[data-route="home"] .outlet { row-gap: 14px; }

/* Needs you: a faint grey shell holding white row tiles. */
html[data-look="stage"] .needs { gap: 4px; padding: 8px; background: var(--s-shell); border-radius: 16px; box-shadow: none; }
html[data-look="stage"] .needs-head { padding: 10px 10px 10px; gap: 8px; }
html[data-look="stage"] .needs-head .card-title { font: 500 15px/1.3 var(--v-font); }
html[data-look="stage"] .needs-count { min-width: 22px; height: 20px; padding: 0 7px; background: var(--dk-paper, #fff); color: var(--s-ink-2); font: 500 12px/1 var(--v-font); }
html[data-look="stage"] .needs-statuses { font: 500 12.5px/1 var(--v-font); color: var(--s-ink-2); padding: 4px 8px; border-radius: 8px; }
html[data-look="stage"] .needs-statuses:hover { background: var(--dk-paper, #fff); color: var(--s-ink); }
html[data-look="stage"] .needs-list { gap: 4px; }
html[data-look="stage"] .nrow { grid-template-columns: 72px minmax(0, 1fr) auto 84px auto; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--dk-paper, #fff); }
html[data-look="stage"] .nrow--first { grid-template-columns: 120px minmax(0, 1fr) auto 84px auto; gap: 16px; padding: 10px 14px 10px 10px; }
html[data-look="stage"] .nthumb { border-radius: 7px; background: var(--s-canvas); }
html[data-look="stage"] .nrow--first .nthumb { width: 120px; height: 68px; aspect-ratio: auto; border-radius: 12px; }
html[data-look="stage"] .nkicker { font: 500 12px/1.3 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .ntitle { font: 500 14px/1.35 var(--v-font); color: var(--s-ink); }
html[data-look="stage"] .nrow--first .ntitle { font: 500 15px/1.35 var(--v-font); }
html[data-look="stage"] .nline { font: 400 13px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .ntime { font: 400 12px/1 var(--v-font); color: var(--s-muted-3); min-width: 0; }
html[data-look="stage"] .naction { height: 32px; padding: 0 14px; font-size: 12.5px; }
html[data-look="stage"] .nrow--first .naction { height: 34px; padding: 0 16px; font-size: 13px; }
html[data-look="stage"] .needs-toggle { padding: 8px 12px 10px; font: 500 13px/1 var(--v-font); color: var(--s-ink-2); border-radius: 10px; }
html[data-look="stage"] .needs-toggle:hover { background: var(--dk-b-ffffffa60, rgba(255, 255, 255, .6)); color: var(--s-ink); }
html[data-look="stage"] .needs-toggle svg { width: 14px; height: 14px; }
html[data-look="stage"] .needs-rest { gap: 4px; }
html[data-look="stage"] .needs-all { padding: 6px 12px 8px; }
html[data-look="stage"] .needs-all .link { font: 500 13px/1 var(--v-font); }
html[data-look="stage"] .needs-empty { background: var(--dk-paper, #fff); border-radius: 12px; padding: 14px; font: 400 13px/1.45 var(--v-font); color: var(--s-ink-2); }

/* Current video and Recent videos: one row, current a touch wider. */
html[data-look="stage"] .home-mid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
html[data-look="stage"] .home-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
html[data-look="stage"] body[data-route="home"] .row > .card { padding: 16px 18px; }

/* Current video, compact: the title as a link line, the status chip top right, one sentence, the seven steps named. */
html[data-look="stage"] .card.current { position: relative; display: grid; gap: 4px; align-content: start; }
html[data-look="stage"] .card.current > .card-title { font: 500 15px/1.3 var(--v-font); padding-right: 140px; }
html[data-look="stage"] .current-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
html[data-look="stage"] .current-grid > .thumb { display: none; }
html[data-look="stage"] .current-main { display: grid; gap: 8px; }
html[data-look="stage"] .current-info { display: grid; gap: 2px; }
html[data-look="stage"] .current-info h3 { font: 500 13px/1.4 var(--v-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-look="stage"] .current-info .meta { position: absolute; top: 16px; right: 18px; display: flex; }
html[data-look="stage"] .current-info .meta .t-caption { display: none; }
html[data-look="stage"] .current .status-line { font: 400 12px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .current-extra { display: grid; gap: 6px; }
html[data-look="stage"] .current-extra .cur-note { font: 400 12px/1.45 var(--v-font); color: var(--s-muted-3); }
html[data-look="stage"] .current-extra .blocker { padding: 8px 12px; font: 400 12.5px/1.45 var(--v-font); }
html[data-look="stage"] .current-extra .cur-facts { font-size: 12px; }
html[data-look="stage"] .current .actions { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-look="stage"] .current .actions .btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
/* Needs you holds the page's one charcoal action; here the actions are secondary pills. */
html[data-look="stage"] .current .actions .btn--primary { background: var(--dk-paper, #fff); color: var(--s-ink); box-shadow: inset 0 0 0 1px rgba(31, 31, 33, .12); }
html[data-look="stage"] .current .actions .btn--primary:hover { background: var(--dk-b-f7f6f2, #F7F6F2); }
html[data-look="stage"] .current .actions .btn--icon { width: 30px; }
html[data-look="stage"] .cur-progress { margin-top: 4px; padding: 12px 0 0; border: 0; border-top: 1px solid var(--s-hair); }
html[data-look="stage"] .cur-progress .stepper { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 0; margin: 0; }
html[data-look="stage"] .cur-progress .step { display: grid; justify-items: start; align-content: start; gap: 6px; min-width: 0; font: 400 12px/1.3 var(--v-font); color: var(--s-muted-3); }
html[data-look="stage"] .cur-progress .step::before,
html[data-look="stage"] .cur-progress .step::after { display: none; }
html[data-look="stage"] .cur-progress .step .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px rgba(31, 31, 33, .16); color: var(--s-ink-2); }
html[data-look="stage"] .cur-progress .step .dot svg { width: 12px; height: 12px; }
html[data-look="stage"] .cur-progress .step.done { color: var(--s-ink-2); }
html[data-look="stage"] .cur-progress .step.done .dot { background: var(--s-ink); color: var(--dk-oninv, #fff); box-shadow: none; }
html[data-look="stage"] .cur-progress .step.active { color: var(--s-ink); font-weight: 500; }
html[data-look="stage"] .cur-progress .step.active .dot { background: var(--dk-paper, #fff); color: var(--s-ink); box-shadow: inset 0 0 0 1px var(--s-ink), 0 0 0 3px var(--dk-l-e8e6e0, #E8E6E0); }
html[data-look="stage"] .cur-progress .step.stopped { color: var(--dk-tx-st-fail, var(--st-fail)); font-weight: 500; }
html[data-look="stage"] .cur-progress .step.stopped .dot { background: var(--st-fail-dot); color: #fff; box-shadow: none; }
/* the names are visible here, one under each circle */
html[data-look="stage"] .cur-progress .step .label.sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
html[data-look="stage"] .cur-progress .auto-line { margin-top: 10px; font: 400 12px/1.45 var(--v-font); color: var(--s-ink-2); text-align: left; }

/* Recent videos: one line per video. */
html[data-look="stage"] .card.recent .card-head { margin-bottom: 4px; }
html[data-look="stage"] .card.recent .projects { margin: 0; gap: 0; }
html[data-look="stage"] .card.recent .project { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 28px; gap: 10px; align-items: center; padding: 6px; margin: 0 -6px; min-height: 0; border-radius: 9px; }
html[data-look="stage"] .card.recent .project .thumb { width: 52px; height: auto; aspect-ratio: 16 / 9; border-radius: 5px; }
html[data-look="stage"] .card.recent .project-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
html[data-look="stage"] .card.recent .project-meta h4 { font: 500 13px/1.35 var(--v-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; }
html[data-look="stage"] .card.recent .project-sub { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
html[data-look="stage"] .card.recent .project-sub .when { font: 400 12px/1 var(--v-font); color: var(--s-muted-3); min-width: 52px; text-align: right; }
html[data-look="stage"] .card.recent .thumb-more { width: 28px; height: 28px; }
html[data-look="stage"] .card.recent .cur-note { font-size: 12px; }

/* The bottom row: three calm cards of one height. */
html[data-look="stage"] .home-foot > .card { display: flex; flex-direction: column; gap: 10px; }
html[data-look="stage"] .card.assistant { padding: 16px 18px; }
html[data-look="stage"] .assistant-rec { display: block; }
html[data-look="stage"] .assistant-rec .rec-icon { display: none; }
html[data-look="stage"] .assistant h3,
html[data-look="stage"] .perf .card-title,
html[data-look="stage"] .home-ask .ask-inline-title { font: 500 15px/1.3 var(--v-font); color: var(--s-ink); margin: 0 0 8px; }
html[data-look="stage"] .assistant .sep { display: block; height: 1px; margin: 4px 0; background: var(--s-hair); }
html[data-look="stage"] .assistant .as-note,
html[data-look="stage"] .assistant .as-lessons,
html[data-look="stage"] .assistant .as-rec-why { font: 400 12.5px/1.5 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .assistant .as-rec-topic { font: 500 15px/1.35 var(--v-font); color: var(--s-ink); }
html[data-look="stage"] .assistant .estate { padding: 0; text-align: left; }
html[data-look="stage"] .assistant .estate-art,
html[data-look="stage"] .perf .estate-art { display: none; }
html[data-look="stage"] .perf .card-body { display: block; }
html[data-look="stage"] .perf .estate { padding: 0; text-align: left; align-items: start; justify-items: start; }
html[data-look="stage"] .perf .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-look="stage"] .perf .stat { padding: 0; background: none; box-shadow: none; }
html[data-look="stage"] .perf .stat small { font: 400 12px/1.3 var(--v-font); color: var(--s-ink-2); order: -1; }
html[data-look="stage"] .home-ask .ask-inline .ask-widget { border: 0; background: none; }
html[data-look="stage"] .home-ask .ask-list { padding: 0 0 10px; max-height: 220px; }
html[data-look="stage"] .home-ask .ask-hint { font: 400 12.5px/1.5 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .home-ask .ask-form { padding: 0; border: 0; gap: 8px; align-items: center; }
html[data-look="stage"] .home-ask .ask-form textarea { min-height: 36px; height: 36px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--s-line); font: 400 13px/1.4 var(--v-font); }
html[data-look="stage"] .home-ask .ask-form textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--s-peri), 0 0 0 3px rgba(135, 153, 195, .25); }
html[data-look="stage"] .home-ask .ask-form .btn { height: 36px; background: var(--dk-paper, #fff); color: var(--s-ink); box-shadow: inset 0 0 0 1px rgba(31, 31, 33, .12); }
html[data-look="stage"] .home-ask .ask-foot { padding: 8px 0 0; font-size: 12px; }

@media (max-width: 1240px) {
  html[data-look="stage"] .home-foot { grid-template-columns: 1fr 1fr; }
  html[data-look="stage"] .home-foot > .home-ask { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  html[data-look="stage"] .nrow { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
  html[data-look="stage"] .nrow--first { grid-template-columns: 96px minmax(0, 1fr) auto auto; }
  html[data-look="stage"] .nrow--first .nthumb { width: 96px; height: 54px; }
  html[data-look="stage"] .nrow .ntime { display: none; }
}
@media (max-width: 900px) {
  html[data-look="stage"] .home-mid,
  html[data-look="stage"] .home-foot { grid-template-columns: 1fr; }
  html[data-look="stage"] .nrow, html[data-look="stage"] .nrow--first { grid-template-columns: 64px minmax(0, 1fr) auto; }
}
html[data-look="stage"] .assistant .estate--row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
html[data-look="stage"] .assistant .estate--row .estate-actions { justify-content: flex-start; grid-column: 1; }
html[data-look="stage"] .assistant .estate-title { font: 500 13px/1.4 var(--v-font); }
html[data-look="stage"] .home-ask .ask-list { padding: 0 0 10px; }
html[data-look="stage"] .cur-progress .auto-line { text-align: left; }
html[data-look="stage"] .card.recent .project-sub .state { flex: none; }
html[data-look="stage"] .card.recent .project,
html[data-look="stage"] .card.recent .project + .project { border: 0; box-shadow: none; }
@media (max-width: 1240px) {
  html[data-look="stage"] .home-mid { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: a "Needs you" row stacks (thumbnail and words on top, the action full width below) and the title wraps. */
@media (max-width: 680px) {
  html[data-look] .nrow, html[data-look] .nrow--first {
    grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: "thumb main" "action action"; align-items: start; gap: var(--s3);
  }
  html[data-look] .nrow .nthumb { grid-area: thumb; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  html[data-look] .nrow .nmain { grid-area: main; }
  html[data-look] .nrow .naction { grid-area: action; justify-self: stretch; width: 100%; height: 44px; justify-content: center; font-size: var(--text-md); }
  html[data-look] .nrow .ntitle, html[data-look] .nrow--first .ntitle, html[data-look] .nrow .nline { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  html[data-look] .nrow .pill, html[data-look] .nrow .ntime { display: none; }
}

/* ================================================================ *
 * HOME polish (q2-polish)
 * ================================================================ */
/* Ask Volare: no inner shadowed box; prompt, input and note sit on the card with its normal padding. */
html[data-look="stage"] .home-ask .ask-inline .ask-widget,
html[data-look="stage"] .home-ask .ask-widget {
  background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0;
}
html[data-look="stage"] .home-ask .ask-widget .ask-list { padding: 0 0 12px; }
html[data-look="stage"] .home-ask .ask-form { padding: 0; border-top: 0; flex-wrap: nowrap; }
html[data-look="stage"] .home-ask .ask-form textarea { flex: 1 1 auto; min-width: 0; }
html[data-look="stage"] .home-ask .ask-form .btn { flex: none; }
html[data-look="stage"] .home-ask .ask-foot { padding: 10px 0 0; }

/* Recent videos: title on line 1, status and time on line 2, the menu pinned right at a fixed width. */
html[data-look="stage"] .card.recent .project { grid-template-columns: 52px minmax(0, 1fr) 28px; align-items: center; }
html[data-look="stage"] .card.recent .project-meta { grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: center; }
html[data-look="stage"] .card.recent .project-sub { min-width: 0; gap: 8px; }
html[data-look="stage"] .card.recent .project-sub .when { min-width: 0; text-align: left; }
html[data-look="stage"] .card.recent .thumb-more { flex: none; width: 28px; justify-self: end; }

/* Phones: the seven steps become a vertical list, the name beside each circle (no overlapping labels). */
@media (max-width: 600px) {
  html[data-look="stage"] .cur-progress .cur-step { text-align: left; }
  html[data-look="stage"] .cur-progress .stepper,
  html[data-look="stage"] .cur-progress .stepper--7 { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; gap: 8px; }
  html[data-look="stage"] .cur-progress .step { grid-template-columns: 22px minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 10px; }
  html[data-look="stage"] .cur-progress .step .label.sr-only { white-space: normal; text-align: left; }
}