/* Framekar v4: layout by aspect ratio + height, desktop studio, home, i18n, live checks.
   Breakpoint model (never width alone):
   - compact portrait (default): preview on top, tool sheet below, bottom tab bar.
   - short landscape (phones, max-height 540px): rail | preview (height-fit) | sheet.
   - tablet portrait (min-width 600px, portrait): compact model, roomier, home in 2 columns.
   - studio (min-width 1024px, min-height 600px, aspect >= 5/4): rail | takes | preview + docked timeline | tools + checks. */

/* ---------- Shell ---------- */
.app { max-width: none; width: 100%; grid-template-columns: minmax(0, 1fr); }
main { min-width: 0; }
.screen { min-width: 0; }
.app[data-mode="studio"] .game-only { display: none !important; }
.app:not([data-mode="studio"]) .studio-only { display: none !important; }
.fine-only { display: none !important; }
@media (pointer: fine) and (hover: hover) { .fine-only { display: revert !important; } .icon-btn.fine-only { display: grid !important; } }
main > .col-left, main > .col-right { display: none; }
.col-center { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.col-center > .stage { flex: 1 1 auto; }
.dock:empty { display: none; }
.kbd-hints { display: none !important; }

/* Hover / focus / press states for every interactive surface. */
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.tool:hover:not(:disabled), .chip:hover, .tab:hover, .node:hover, .take:hover, .segmented label:hover span { background: var(--c-surface-3); color: var(--c-text); }
.btn:focus-visible, .tool:focus-visible, .chip:focus-visible, .tab:focus-visible, .node:focus-visible, .take:focus-visible, .stage-btn:focus-visible, .play-fab:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.tab { transition: color var(--d-med), background var(--d-med); }

/* ---------- Touch targets >= 44px ---------- */
.chip, .segmented span, .toast button, .btn.sm { min-height: var(--touch); }
.chip::after, .toast button::after { content: none; }
.fs-track { height: 118px; }
.fs-track .seg { top: 70px; height: 44px; border-radius: 8px; font-size: var(--fs-sm); }
.fs-track .seg::before { content: none; }
.fs-track .ph { height: 116px; }
.fs-track .ph-hit { height: 44px; top: 0; }
.playhead-range { height: var(--touch); }
.cap-list .icon-btn { width: var(--touch); height: var(--touch); }

/* ---------- Toasts: one at a time, top centre, never covering the sheet header ---------- */
.toasts { top: calc(var(--topbar-h) + var(--s-1) + env(safe-area-inset-top)); max-width: min(92vw, 520px); }
.toast { animation-duration: 180ms; }
.toast .msg { overflow-wrap: anywhere; }

/* ---------- Stage: safe zone, live checks ---------- */
.stage { padding: var(--s-1) var(--s-3) var(--s-2); min-height: 0; }
.stage-frame { max-height: 100%; }
.safe-zone { font-size: 11px; color: #fff; }
.safe-zone span { background: rgb(255 197 61 / .16); border-color: rgb(255 197 61 / .9); text-shadow: 0 1px 2px #000; }
.safe-zone span::before { content: ""; }
.stage-btn { position: absolute; right: var(--s-2); top: var(--s-2); width: var(--touch); height: var(--touch); border-radius: 50%; border: 0; background: var(--c-scrim); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 3; }
.stage-btn[aria-pressed="true"] { background: var(--c-xp); color: #000; }
.live-checks { position: absolute; left: var(--s-2); top: var(--s-2); right: 56px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; z-index: 2; }
.live-checks .pill { display: flex; gap: 6px; align-items: center; max-width: 100%; padding: 3px 9px 3px 6px; border-radius: var(--r-pill); background: rgb(5 5 10 / .78); font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.3; backdrop-filter: blur(6px); }
.live-checks .pill span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-checks .pill.wrap span:nth-child(2) { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.live-checks .pill.wrap { border-radius: var(--r-md); }
.caption-form .row .btn { flex: none; }
.caption-form .num { min-width: 0; }
.mk { flex: none; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: var(--fw-black); background: var(--c-surface-3); color: var(--c-text-2); }
[data-ok="true"] > .mk { background: var(--c-success); color: #062b1b; }
[data-ok="false"] > .mk { background: var(--c-warn); color: #2b1a00; }
.hook-checklist [data-ok="false"] .hc-mark { background: var(--c-warn); color: #2b1a00; }

/* ---------- Sheets (compact) ---------- */
.screen.sheet { max-height: 52%; }
.sheet-head { flex-wrap: wrap; row-gap: 2px; }
.sheet-head h2 { white-space: nowrap; }
.sheet-head .meta { text-align: left; }
.export-actions { flex-wrap: nowrap; margin-top: var(--s-3); }
.export-actions .btn { min-width: 0; }
#to-share { margin-top: var(--s-3); }
#to-share:disabled { opacity: .55; }
#to-share-hint { margin-top: var(--s-1); text-align: center; }

/* ---------- Score: never let CTAs cover the ring ---------- */
.screen.page.score { display: flex; flex-direction: column; padding-bottom: 0; }
.score-grid { flex: 1 1 auto; }
.score-cta { position: sticky; bottom: 0; flex-wrap: nowrap; padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); margin-top: var(--s-3); background: linear-gradient(transparent, var(--c-bg) 24%); z-index: 2; }
.score-list .metrics { padding-bottom: var(--s-2); }

/* ---------- Home ---------- */
.screen.page.home { padding-top: var(--s-2); }
.home-grid { display: grid; gap: var(--s-5); max-width: 1320px; margin-inline: auto; }
.home-main, .home-side { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.lang-onboard { padding: var(--s-4); border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-line); display: grid; gap: var(--s-3); }
.lang-onboard h3 { font-size: var(--fs-md); display: flex; gap: var(--s-2); align-items: center; }
.lang-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.lang-row .btn { padding: 0 var(--s-2); }
.draft-banner { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: #1b2433; border: 1px solid #2b3d58; }
.today, .studio-hero { position: relative; display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-xl); background: linear-gradient(135deg, #2a1530, #171728); border: 1px solid #3d2347; overflow: hidden; }
.today-body { display: grid; gap: var(--s-3); min-width: 0; }
.today-title { font-size: var(--fs-2xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: -.01em; }
.steps-bar { display: flex; gap: 6px; }
.steps-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--c-surface-3); }
.steps-bar i.done { background: var(--c-success); }
.steps-bar i.current { background: var(--c-brand-soft); }
.coach-line { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border-radius: var(--r-md); background: rgb(0 0 0 / .35); font-size: var(--fs-sm); }
.coach-line p { color: #d6d6e6; }
.avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-black); background: var(--c-xp); color: #000; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pills li { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 6px 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / .07); }
.cta { width: 100%; }
.today-art { display: none; }
.phone-art { position: relative; width: 180px; aspect-ratio: 9/16; border-radius: var(--r-lg); background: linear-gradient(180deg, #5b3f7a, #e0587a 60%, #f0a060); overflow: hidden; box-shadow: var(--e-3); }
.phone-art::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 58%; border-radius: 50% 50% 0 0; background: #231527; }
.art-cap { position: absolute; z-index: 1; left: 0; right: 0; top: 52%; text-align: center; font: 800 18px/1.2 "Noto Sans Devanagari", var(--font); color: #fff; text-shadow: 0 2px 6px #000; }
.art-cap b { color: var(--c-xp); }
.path-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.node { width: 100%; display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); min-height: 64px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid transparent; color: var(--c-text); text-align: left; font: inherit; }
button.node { cursor: pointer; }
.node small { display: block; color: var(--c-text-2); font-size: var(--fs-sm); }
.node .dot { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--fw-black); background: var(--c-surface-3); }
.node.done .dot { background: var(--c-success); color: #062b1b; }
.node.current { border-color: var(--c-brand-soft); }
.node.current .dot { background: var(--c-brand); color: #fff; }
.node.locked { opacity: .7; }
.section-label { margin: 0 0 var(--s-2); }
.stat-list { margin: 0; display: grid; }
.stat-list div { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-surface-2); }
.stat-list dt { color: var(--c-text-2); }
.stat-list dd { margin: 0; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.reels-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.reel { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--c-text-2); }
.reel img { width: 100%; height: auto; aspect-ratio: 9/16; object-fit: cover; border-radius: var(--r-md); background: var(--c-surface-2); }
.mode-card .segmented { margin-top: 0; }
.mode-card .segmented span { text-align: center; padding: 0 var(--s-2); }

/* ---------- Settings / language ---------- */
.settings { display: grid; gap: var(--s-3); grid-template-rows: auto minmax(0, 1fr) auto; width: min(100vw - 2 * var(--s-3), 40rem); max-height: min(100dvh - 2 * var(--s-3), 56rem); }
.settings-body { display: grid; gap: var(--s-4); overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.set-group { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); min-width: 0; }
.set-group legend { padding: 0; font-weight: var(--fw-bold); font-size: var(--fs-md); margin-bottom: var(--s-1); }
.set-group .meta { margin: 0; }
.content-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
@media (min-width: 40em) { #lang-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (orientation: landscape) and (max-height: 500px) { .settings { max-height: calc(100dvh - var(--s-2) * 2); } .lang-grid .opt { min-height: 44px; } }
.reset-confirm { display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); }
.reset-confirm[hidden] { display: none; }
.reset-confirm p { margin: 0; }
.btn.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.spin { display: none; position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentcolor; border-right-color: transparent; animation: fk-spin .7s linear infinite; }
.script-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 0; position: relative; }
.script-hint .spin { position: static; }
.script-hint[aria-busy="true"] .spin { display: inline-block; }
@keyframes fk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }
.settings:not([open]) { display: none; }
.lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.lang-grid label { position: relative; }
.lang-grid input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lang-grid .opt { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-height: 52px; padding: var(--s-2); border-radius: var(--r-md); border: 1px solid var(--c-line); background: var(--c-surface-2); font-weight: var(--fw-semibold); font-size: var(--fs-md); text-align: center; position: relative; transition: border-color var(--d-fast, .12s), background var(--d-fast, .12s); }
.lang-grid .opt .sub { font-size: var(--fs-xs); font-weight: var(--fw-regular, 400); color: var(--c-text-2); }
.lang-grid input:checked + .opt { border-color: var(--c-brand-soft); background: #2a1530; }
.lang-grid input[type="checkbox"]:checked + .opt::before { content: "✓"; position: absolute; top: 4px; left: 8px; font-size: var(--fs-sm); color: var(--c-brand-soft); }
.lang-grid input:focus-visible + .opt { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.lang-grid input:disabled + .opt { opacity: .7; cursor: progress; }
.lang-grid label[aria-busy="true"] .spin { display: block; }
.lang-grid [lang="bn"] { font-family: "Noto Sans Bengali", var(--font); }
.lang-grid [lang="hi"], .lang-row [lang="hi"] { font-family: "Noto Sans Devanagari", var(--font); }
.lang-row [lang="bn"] { font-family: "Noto Sans Bengali", var(--font); }
.lang-grid [lang="ja"], .lang-row [lang="ja"] { font-family: "Noto Sans JP", var(--font); }

/* ---------- Drop overlay / takes ---------- */
.drop-overlay { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgb(11 11 18 / .86); border: 3px dashed var(--c-brand-soft); font-size: var(--fs-xl); font-weight: var(--fw-bold); pointer-events: none; }
.col-label { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-2); margin: 0 0 var(--s-2); }
html[lang="ja"] .col-label, html[lang="hi"] .col-label, html[lang="bn"] .col-label { letter-spacing: 0; }
.takes { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.take { width: 100%; display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2); border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--c-text); text-align: left; cursor: pointer; font: inherit; }
.take[aria-current="true"] { background: var(--c-surface-2); border-color: var(--c-line); }
.take small { display: block; color: var(--c-text-2); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.take-thumb { flex: none; width: 36px; height: 64px; border-radius: 6px; background: var(--c-surface-3) center / cover; }
.drop-zone { display: grid; justify-items: center; gap: 4px; padding: var(--s-4); border: 1px dashed var(--c-line); border-radius: var(--r-md); cursor: pointer; text-align: center; font-weight: var(--fw-semibold); }
.drop-zone:hover { border-color: var(--c-brand-soft); background: var(--c-surface); }
.skill-card { margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--c-text-2); }
.coach-card { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: linear-gradient(135deg, #2a1530, #171728); border: 1px solid #3d2347; font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.coach-card p { color: #d6d6e6; margin-top: 2px; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.check-list .check { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-surface); font-size: var(--fs-sm); }
.check-list .check[data-ok="false"] { border: 1px solid rgb(255 181 71 / .4); }

/* ---------- i18n typography ---------- */
html[lang="ja"] .eyebrow, html[lang="hi"] .eyebrow, html[lang="bn"] .eyebrow { letter-spacing: .02em; text-transform: none; }
html[lang="hi"] .today-title, html[lang="bn"] .today-title { line-height: 1.3; }
.cap-list .cap-text { font-family: var(--font), var(--font-intl); }

/* ---------- Short landscape (phones on their side) ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --topbar-h: 48px; }
  .app { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "top top" "rail main"; }
  .topbar { grid-area: top; padding-inline: calc(var(--s-2) + env(safe-area-inset-left)) calc(var(--s-2) + env(safe-area-inset-right)); }
  main { grid-area: main; flex-direction: row; gap: var(--s-2); padding: 0 calc(var(--s-2) + env(safe-area-inset-right)) var(--s-2) 0; }
  .app:has(#toolbar[hidden]) main { grid-column: 1 / -1; padding-left: calc(var(--s-2) + env(safe-area-inset-left)); }
  .toolbar { grid-area: rail; grid-template-columns: 1fr; grid-auto-rows: minmax(56px, 1fr); align-content: start; border-top: 0; border-right: 1px solid var(--c-surface-2); padding: 0 0 env(safe-area-inset-bottom) env(safe-area-inset-left); overflow-y: auto; }
  .tab { min-height: 56px; }
  .tab[aria-current="page"]::before { top: 50%; translate: 0 -50%; left: 0; width: 3px; height: 28px; border-radius: 0 3px 3px 0; }
  .col-center { flex: 0 0 auto; height: 100%; }
  .stage { padding: var(--s-1) 0 0; height: 100%; }
  .stage-frame { height: 100%; }
  .screen.sheet { flex: 1 1 auto; min-width: 0; max-height: none; height: 100%; border-radius: var(--r-lg); padding-top: var(--s-3); animation: fade-up var(--d-med) var(--ease-out); }
  .screen.sheet .grabber { display: none; }
  .screen.sheet.collapsed { max-height: none; overflow-y: auto; }
  .screen.page { padding-inline: var(--s-2); }
  .score-grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 1.4fr); gap: var(--s-4); align-items: start; }
  .score-top { position: sticky; top: 0; }
  .gauge-wrap { width: 132px; margin-top: var(--s-1); }
  .gauge-label { font-size: var(--fs-2xl); }
  .stars .star { width: 28px; height: 28px; }
  .score-list .section-label { margin-top: var(--s-1); }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .choice { padding: var(--s-4); }
  .home-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .today-title { font-size: var(--fs-xl); }
  .final { height: calc(100dvh - 180px); }
  .recorder { max-height: calc(100dvh - 120px); }
}

/* ---------- Tablet portrait ---------- */
@media (min-width: 600px) and (orientation: portrait) {
  .screen.page { padding-inline: var(--s-6); }
  .home-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .path-grid { grid-template-columns: 1fr; }
  .screen.sheet { max-height: 46%; padding-inline: var(--s-6); }
  .row.tools { max-width: 520px; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .score-grid, .score-cta { max-width: 640px; margin-inline: auto; width: 100%; }
}

/* ---------- Wide (>= 1024 landscape-ish): home fills the width ---------- */
@media (min-width: 1024px) and (min-height: 600px) {
  .screen.page.home { padding: var(--s-6) var(--s-8); }
  .home-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-8); }
  .today { grid-template-columns: minmax(0, 1.3fr) auto; align-items: center; padding: var(--s-8); }
  .today-art { display: block; }
  .today-title { font-size: 2.4rem; }
  .cta { width: auto; justify-self: start; padding-inline: var(--s-8); }
  .path-grid { grid-template-columns: 1fr 1fr; }
  .reels-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .node:hover { border-color: var(--c-line); }
  .screen.page:not(.home) { max-width: 880px; margin-inline: auto; width: 100%; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .topbar-title { font-size: var(--fs-lg); }
  .app:not([data-step="home"]) .topbar-title { font-size: var(--fs-lg); }
}

/* ---------- Desktop studio (three columns + rail) ---------- */
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .app { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "top top" "rail main"; }
  .topbar { grid-area: top; border-bottom: 1px solid var(--c-surface-2); padding-inline: var(--s-4); }
  main { grid-area: main; }
  .app:has(#toolbar[hidden]) main { grid-column: 1 / -1; }
  .toolbar { grid-area: rail; grid-template-columns: 1fr; grid-auto-rows: 80px; align-content: start; border-top: 0; border-right: 1px solid var(--c-surface-2); padding: var(--s-2) 0; }
  .tab { font-size: var(--fs-sm); }
  .tab[aria-current="page"]::before { top: 18px; left: 0; width: 3px; height: 44px; border-radius: 0 3px 3px 0; }
  .app:is([data-step="beat"], [data-step="captions"], [data-step="score"], [data-step="export"]) main {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "center sheet" "center checks"; gap: 0; }
  main > .col-center { grid-area: center; padding: var(--s-4) var(--s-5) var(--s-3); border-right: 1px solid var(--c-surface-2); min-width: 0; }
  main > .screen.sheet { grid-area: sheet; max-height: none; height: auto; min-height: 0; border-radius: 0; box-shadow: none; padding: var(--s-4) var(--s-5); background: var(--c-bg); animation: fade-up var(--d-med) var(--ease-out); }
  main > .screen.sheet .grabber { display: none; }
  main > .col-right:not([hidden]) { display: block; grid-area: checks; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--c-surface-2); max-height: 46vh; overflow-y: auto; }
  .app[data-mode="studio"] main > .screen.sheet { grid-row: 1 / -1; }
  main > .screen.page.score { grid-column: 1 / -1; grid-row: 1 / -1; max-width: 960px; }
  .app[data-step="score"] .score-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .col-center .stage { padding: 0; }
  .dock { flex: none; margin-top: var(--s-3); }
  .dock .filmstrip { padding: var(--s-3); }
  .kbd-hints { display: flex !important; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--c-text-2); }
  .kbd-hints kbd { min-width: 22px; padding: 0 6px; font-size: var(--fs-xs); }
  .live-checks { display: none; }
  .final { height: 64dvh; }
}
@media (min-width: 1280px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .app:is([data-step="beat"], [data-step="captions"], [data-step="score"], [data-step="export"]) main {
    grid-template-columns: 240px minmax(0, 1fr) 380px; grid-template-areas: "left center sheet" "left center checks"; }
  main > .col-left:not([hidden]) { display: block; grid-area: left; padding: var(--s-4); border-right: 1px solid var(--c-surface-2); overflow-y: auto; }
  .app[data-step="score"] main > .col-left { display: none; }
}
@media (min-width: 1600px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .app:is([data-step="beat"], [data-step="captions"], [data-step="score"], [data-step="export"]) main { grid-template-columns: 280px minmax(0, 1fr) 420px; }
}

/* ---------- Review fixes ---------- */
.field .chips { flex-wrap: wrap; overflow: visible; }
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .app[data-step="score"] main > .col-right { display: none !important; }
}
/* Landscape phones: the top bar has free space between title and actions, so toasts sit there
   instead of over the panel header. */
@media (orientation: landscape) and (max-height: 540px) {
  .toasts { top: calc(4px + env(safe-area-inset-top)); max-width: min(46vw, 420px); }
  .toast { min-height: 40px; font-size: var(--fs-xs); }
}
.node.locked { opacity: 1; }
.node.locked .dot { background: var(--c-surface-2); color: var(--c-text-2); }
.node.locked strong { color: var(--c-text-2); }
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .dock .filmstrip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "time range zoom" "track track track"; column-gap: var(--s-3); align-items: center; }
  .dock .fs-tools { display: contents; }
  .dock #playhead-out { grid-area: time; min-width: 4.5em; }
  .dock .fs-zoom { grid-area: zoom; }
  .dock .fs-scroll { grid-area: track; margin-top: var(--s-1); }
  .dock .playhead-range { grid-area: range; margin: 0; }
}
#upload { top: 0; left: 0; }
.cap-list { grid-template-columns: minmax(0, 1fr); }
/* Grabber: full 44px touch target. */
.grabber { height: var(--touch); }
.grabber { display: flex; align-items: center; justify-content: center; padding: 0; }
.switch, label:has(> input[type="radio"]), label:has(> input[type="checkbox"]) { position: relative; }
.app { position: relative; }
.app:not([data-step="home"]):not([data-step="score"]) { overflow: clip; }
#today-go, .today .cta { min-height: var(--touch); }

/* a11y: hook template chips must meet 44px target size (WCAG 2.5.8 / axe target-size) */
.hook-chips { gap: 8px; }
.hook-chips > .chip { min-height: 44px; min-width: 44px; }
main > .col-right:focus-visible { outline: 2px solid var(--c-accent, #8b5cf6); outline-offset: -2px; }

/* ======================================================================
   v4.1 responsive polish layer. Systematic, not per-viewport:
   fluid tokens (tokens.css), container queries on stage/sheet, dvh +
   safe-area insets, keyboard-aware sheets (--kb from js/ui/viewport.js).
   ====================================================================== */

/* No English flash in other locales: shell text is revealed once i18n has applied. */
html:not([data-ready]) main, html:not([data-ready]) .topbar-title { visibility: hidden; }

/* Safe areas: notch in landscape, home bar on the bottom. */
.topbar { padding-left: calc(var(--s-3) + var(--safe-l)); padding-right: calc(var(--s-3) + var(--safe-r)); }
.screen.page { padding-bottom: calc(var(--s-6) + var(--safe-b)); }

/* Titles: never ellipsise to "Beat C…". Wrap to two balanced lines and scale down instead. */
.topbar-title { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.app:not([data-step="home"]) .topbar-title { font-size: clamp(0.88rem, 0.7rem + 1vw, var(--fs-lg)); }
.sheet-head h2 { white-space: normal; text-wrap: balance; font-size: clamp(1rem, 0.9rem + 0.5vw, var(--fs-lg)); }
.today-title { text-wrap: balance; overflow-wrap: anywhere; }
@media (max-width: 380px) { .topbar-actions { gap: 0; } .topbar { gap: var(--s-1); padding-inline: calc(var(--s-1) + var(--safe-l)) calc(var(--s-1) + var(--safe-r)); } }

/* Keyboard-aware sheets: on-screen keyboard never covers the caption field. */
.screen.sheet { scroll-padding-bottom: calc(var(--kb) + var(--s-6)); }
html[data-kb] .screen.sheet { padding-bottom: calc(var(--kb) + var(--s-4)); }
html[data-kb] .toolbar { display: none; }

/* Stage is a size container: live-check pills compact on small previews instead of "Rea… mut…". */
.stage { container: stage / size; }
@container stage (max-height: 360px) {
  .live-checks .pill { padding: 3px; }
  .live-checks .pill span:nth-child(2) { display: none; }
}

/* Sheets are inline containers: tool rows reflow to the space they actually get. */
.screen.sheet { container: sheet / inline-size; }
#screen-beat .field .chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: var(--s-2); }
#screen-beat .field .chips .chip { justify-content: center; padding-inline: var(--s-2); white-space: nowrap; }
@container sheet (min-width: 340px) { #screen-beat .field .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Hover affordances are additive only; touch gets pressed states. */
@media (hover: none) { .btn:active, .tool:active, .chip:active, .node:active { transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }

/* ---------- Desktop pro studio ---------- */
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  /* Tool panel owns the full right column height and scrolls on its own; nothing below the fold. */
  .app:is([data-step="beat"], [data-step="captions"], [data-step="export"]) main { grid-template-rows: minmax(0, 1fr); grid-template-areas: "center sheet"; }
  main > .screen.sheet { grid-row: 1 / -1; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  /* 1024–1279: no room for a checks column, so the live pills on the preview carry the checks. */
  main > .col-right:not([hidden]) { display: none; }
  .live-checks { display: flex; }
  .col-center { gap: var(--s-3); }
  .col-center > .stage { min-height: 240px; }
  .dock { margin-top: 0; }
  .dock .filmstrip { border-radius: var(--r-lg); background: var(--c-surface); }
  .screen.sheet .row.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Home: a composed dashboard, vertically centred, not a phone page stuck to the top. */
  .screen.page.home { display: grid; align-content: center; min-height: 100%; padding: var(--s-fluid) clamp(24px, 4vw, 96px); }
  .home-grid { width: 100%; max-width: 1360px; grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 400px); gap: var(--s-fluid); }
  .home-side { padding: var(--s-5); border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-line); align-self: start; }
  .today { min-height: clamp(300px, 42vh, 460px); }
  .phone-art { width: clamp(160px, 13vw, 240px); }
  .node { min-height: 72px; }
  .node:hover { border-color: var(--c-line); transform: translateY(-1px); }
  .node:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
}
/* Shortcut hints only when there is vertical room; the "?" overlay always has them. */
@media (min-width: 1024px) and (max-height: 819px) { .kbd-hints { display: none !important; } }
@media (min-width: 1280px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  /* Three balanced columns: takes + live checks | preview + timeline | tools. */
  .app:is([data-step="beat"], [data-step="captions"], [data-step="export"]) main {
    grid-template-columns: clamp(240px, 18vw, 320px) minmax(0, 1fr) clamp(340px, 26vw, 440px);
    grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "left center sheet" "checks center sheet"; }
  main > .col-left:not([hidden]) { overflow-y: auto; max-height: 100%; border-bottom: 1px solid var(--c-surface-2); }
  main > .col-right:not([hidden]) { display: block; grid-area: checks; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 0; border-right: 1px solid var(--c-surface-2); padding: var(--s-4); }
  .app:is([data-step="beat"], [data-step="captions"], [data-step="export"]) main > .col-left { grid-row: 1; }
  .live-checks { display: none; }
}
@media (min-width: 1280px) and (max-height: 799px) and (min-aspect-ratio: 5/4) {
  /* Short laptop windows: the skill card moves out, checks get the space. */
  main > .col-left .skill-card, main > .col-left #skill-card { display: none; }
}
@media (min-width: 1920px) and (min-height: 1000px) {
  :root { --topbar-h: 64px; }
  .toolbar { grid-auto-rows: 88px; }
  .fs-track { height: 132px; }
  .fs-track .seg { top: 78px; height: 50px; }
}
@media (min-width: 1280px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .app[data-mode="studio"]:is([data-step="beat"], [data-step="captions"], [data-step="export"]) main > .col-left { grid-row: 1 / -1; border-bottom: 0; }
}
/* Segmented controls: the legend sits above the track, not inside it. */
.segmented { background: none; padding: 0; gap: 0; }
.segmented label { background: var(--c-surface-2); padding: 4px 2px; min-width: 0; }
.segmented label:first-of-type { border-radius: var(--r-pill) 0 0 var(--r-pill); padding-left: 4px; }
.segmented label:last-of-type { border-radius: 0 var(--r-pill) var(--r-pill) 0; padding-right: 4px; }
.segmented span { padding-inline: var(--s-2); text-align: center; line-height: 1.15; }
#screen-beat .field .chips .chip { min-width: 0; font-size: var(--fs-sm); }

@container stage (max-height: 360px) { .live-checks .pill.wrap { display: none; } }
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .mix { background: var(--c-surface); border: 1px solid var(--c-surface-2); }
}
/* Landscape phones: the stage is a size container, so the centre column takes its width from the 9:16 ratio. */
@media (orientation: landscape) and (max-height: 540px) {
  .col-center { aspect-ratio: 9 / 16; width: auto; max-width: 45vw; }
}
.eyebrow { text-wrap: balance; }
/* Desktop score: one composed block, CTAs follow the content instead of sitting 300px below it. */
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .screen.page.score { justify-content: center; }
  .screen.page.score .score-grid { flex: 0 0 auto; }
  .score-cta { position: static; background: none; margin-top: var(--s-6); max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (min-width: 600px) and (orientation: portrait) { .row.tools { max-width: none; } }
/* Desktop toasts: bottom centre of the window, clear of the preview's controls and the panel header. */
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .toasts { top: auto; bottom: calc(var(--s-6) + var(--safe-b)); }
}
/* Large displays: scale the whole UI instead of floating a small layout in a sea of black. */
@media (min-width: 1920px) and (min-height: 1000px) { html { font-size: 106.25%; } .home-grid { max-width: 1480px; } }
@media (min-width: 2400px) and (min-height: 1300px) {
  html { font-size: 125%; }
  :root { --topbar-h: 72px; --touch: 52px; }
  .home-grid { max-width: 1840px; }
  .app { grid-template-columns: 112px minmax(0, 1fr); }
  .toolbar { grid-auto-rows: 104px; }
}
/* Tempo presets: fill the row, wrap whole chips (never clip a label), equalised by flex-grow. */
#screen-beat .field .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
#screen-beat .field .chips .chip { flex: 1 1 auto; min-width: max-content; padding-inline: var(--s-3); }
#screen-beat .field .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#screen-beat .field .chips .chip { min-width: 0; }
@container sheet (min-width: 430px) { #screen-beat .field .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  /* Toasts live in the topbar's empty middle: never over the preview, panel header or timeline. */
  .toasts { top: calc((var(--topbar-h) - 44px) / 2 + env(safe-area-inset-top)); bottom: auto; max-width: min(40vw, 520px); }
}
/* Share: a centred, composed column at every size; the video takes the free height (dvh), CTAs stay in reach. */
#screen-share:not([hidden]) { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); min-height: 100%; }
#screen-share > * { width: 100%; max-width: 440px; margin-inline: auto; }
#screen-share .final { width: auto; height: min(62dvh, 720px); max-height: calc(var(--vvh) - 300px); min-height: 220px; margin-top: var(--s-2); }
/* Switch with a secondary note: note drops under the label instead of wrapping beside it. */
.switch .meta { flex-basis: 100%; padding-left: 58px; margin-top: -6px; }
.switch:has(.meta) { flex-wrap: wrap; }
#screen-share:not([hidden]) { justify-content: safe center; }
@media (orientation: landscape) and (max-height: 540px) {
  /* Landscape phones: reel on the left, title + actions on the right, all within thumb reach. */
  #screen-share:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 360px); grid-auto-rows: min-content; column-gap: var(--s-6); justify-content: center; align-content: center; }
  #screen-share > * { grid-column: 2; max-width: none; }
  #screen-share .final { grid-column: 1; grid-row: 1 / span 6; height: calc(var(--vvh) - var(--topbar-h) - 32px); max-height: none; min-height: 0; margin: 0; }
  #screen-share .screen-title, #screen-share .screen-sub { text-align: left; }
}

/* v4.2: per-script font stacks. The @font-face rules are registered at runtime by js/text/fonts.js (FontFace API)
 * only when a script is enabled or typed, so these names cost nothing until then. */
:root { --font-intl: "Noto Sans Bengali", "Noto Sans Devanagari", "Noto Sans JP"; }
html[lang="bn"] { --font: "Noto Sans Bengali", "Inter", system-ui, sans-serif; }
html[lang="hi"] { --font: "Noto Sans Devanagari", "Inter", system-ui, sans-serif; }
html[lang="ja"] { --font: "Noto Sans JP", "Inter", system-ui, sans-serif; line-break: strict; word-break: normal; }
html[lang="bn"], html[lang="hi"] { --lh-body: 1.6; }

/* ======================================================================
   v4.3 mobile UX audit fixes (fluid; no device-specific patches).
   ====================================================================== */
/* Primary beat tools (Split, Auto-cut, Remake) stay in thumb reach. v4.3.1: the beat sheet is a flex column -
   grabber, head and the primary row are fixed bands; the filmstrip and settings scroll in .sheet-body above the
   row, so the row reserves its own space and can never cover the timeline clips (it was a sticky footer that
   overlapped them whenever the sheet was shorter than its content, e.g. 360x640). */
#screen-beat:not([hidden]):not(.collapsed) { display: flex; flex-direction: column; overflow: hidden; }
#screen-beat > * { flex: none; min-width: 0; }
#screen-beat > .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-padding-bottom: calc(var(--kb, 0px) + var(--s-6)); margin-inline: calc(-1 * var(--s-1)); padding-inline: var(--s-1); }
#screen-beat.collapsed > .sheet-body { overflow: hidden; }
#screen-beat > .row.tools { position: static; margin-block: 0; padding-block: var(--s-2) 0; background: var(--c-surface); box-shadow: 0 -8px 16px -8px rgb(0 0 0 / .5); }
#screen-beat .media-tools { display: grid; gap: var(--s-2); }
#screen-beat .media-tools .row.tools { margin: 0; }
.photo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.photo-list:empty { display: none; }
.photo-item { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: var(--s-2); align-items: center; padding: var(--s-1) var(--s-2); border-radius: 12px; background: var(--c-surface-2, rgb(255 255 255 / .05)); }
.photo-item img { width: 40px; height: 64px; object-fit: cover; border-radius: 8px; }
.photo-item .pi-ctrl { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; min-width: 0; }
.photo-item select, .photo-item input { min-height: var(--touch); max-width: 100%; }
.photo-item input[type=number] { width: 5.5em; }
#vo-rec[aria-pressed=true] { color: #ff5a6a; }
.cap-styles { flex-wrap: wrap; }
.cap-styles label { flex: 1 1 auto; }
/* Soft keyboard in "resize content" mode (Android Chrome default): the layout viewport itself shrinks,
   so --kb stays 0. Typing in a sheet hides the tab bar and lets the sheet take the room it needs. */
@media (pointer: coarse) {
  html[data-typing] .toolbar { display: none; }
  html[data-typing] .screen.sheet { max-height: 78%; }
  .btn.sm { min-height: var(--touch); }
}
/* Tiny previews (keyboard up, short landscape): drop overlays that would collide with the play button. */
@container stage (max-height: 220px) { .stage-time, .stage-btn, .live-checks { display: none !important; } }
/* Legibility floor: nothing below 11px. */
.badge, .mk { font-size: 11px; }
.tab { font-size: max(11.5px, var(--fs-xs)); }
@media (orientation: landscape) and (max-height: 540px) { .toasts { max-width: min(34vw, 340px); } }

/* v4.3: switch label + hint as one text column (was an orphaned "(not exported)" line under the toggle). */
.switch .sw-text { display: grid; gap: 2px; min-width: 0; }
.switch .sw-text .meta { font-size: var(--fs-xs); }

/* ======================================================================
   v4.4 Multi-track (concept A): tracks panel + tool rail. Fluid 320–2560 px; 44 px targets.
   ====================================================================== */
.tracks { margin-top: var(--s-3); background: var(--c-bg); border-radius: var(--r-md); padding: var(--s-2); }
.trk-head { display: flex; align-items: center; gap: var(--s-2); }
.trk-head h3 { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin: 0; }
.trk-head .meta { margin-inline-end: auto; font-variant-numeric: tabular-nums; }
.trk-zoom { display: flex; gap: 2px; }
.trk-body { display: grid; grid-template-columns: clamp(64px, 18vw, 96px) minmax(0, 1fr); gap: var(--s-1); margin-top: var(--s-1); }
.trk-lanes { display: grid; align-content: start; }
.trk-lane-btn { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 44px; margin-block: 2px; padding: 0 var(--s-2); border: 0; border-radius: 10px; background: var(--c-surface-2); color: var(--c-text); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: start; cursor: pointer; min-width: 0; }
.trk-lane-btn.static { cursor: default; background: none; color: var(--c-text-2); }
.trk-lane-btn[aria-pressed="true"] { background: var(--c-surface-3); color: var(--c-text-2); outline: 1px dashed var(--c-text-2); outline-offset: -3px; }
.trk-lane-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-lane-state { font-weight: var(--fw-semibold); color: var(--c-text-2); }
.trk-lane-state:empty { display: none; }
.trk-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; border-radius: var(--r-sm); scrollbar-width: thin; }
.trk-canvas { position: relative; min-width: 100%; }
.trk-lane { position: relative; border-bottom: 1px solid var(--c-line); }
.trk-lane[data-off="true"] { opacity: .45; }
.trk-item { position: absolute; height: 44px; min-width: 0; padding: 0 6px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35); color: #fff; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: start; overflow: hidden; cursor: pointer; }
.trk-item .trk-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-item.text { background: #8a6420; }
.trk-item.video.clip { background: #2f5a5a; }
.trk-item.video.photo { background: #8a3a5c; }
.trk-item.voice { background: #2c5c88; }
.trk-item.music { background: #24583a; cursor: default; }
.trk-item.sfx { background: #6a4a9a; }
.trk-item[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #fff; touch-action: none; z-index: 2; }
.trk-item:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.trk-ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--c-xp); pointer-events: none; z-index: 3; }
.trk-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.trk-ctx[hidden] { display: none; }
.trk-ctx-title { flex: 1 0 100%; font-size: var(--fs-xs); color: var(--c-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-ctx .chip { flex: 1 1 auto; justify-content: center; }
.trk-ctx .chip.danger { color: var(--c-danger, #ff8a8a); }

/* Tool rail: one thumb-reach row that scrolls sideways on phones/tablets (concept A). */
#screen-beat > .tool-rail { display: flex; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; max-width: none; padding-inline: 0; }
#screen-beat > .tool-rail::-webkit-scrollbar { display: none; }
#screen-beat > .tool-rail .tool { flex: 0 0 auto; min-width: clamp(68px, 19vw, 96px); min-height: 56px; padding-inline: var(--s-2); white-space: nowrap; }
@container sheet (min-width: 560px) { #screen-beat > .tool-rail .tool { flex: 1 1 0; } }
/* Desktop studio keeps its tool grid look; the rail just wraps into it. */
@media (min-width: 1024px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  #screen-beat > .tool-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); overflow: visible; }
  #screen-beat > .tool-rail .tool { min-width: 0; white-space: normal; text-wrap: balance; }
}