/* Tokens lifted verbatim from design/youglish-mini.dc.html */
:root{
  --bg:oklch(0.982 0.004 85); --surface:oklch(1 0 0); --surface-2:oklch(0.965 0.006 85);
  --text:oklch(0.24 0.012 80); --text-2:oklch(0.50 0.012 80); --text-3:oklch(0.62 0.010 80);
  --line:oklch(0.905 0.006 80); --line-strong:oklch(0.84 0.008 80);
  --accent:oklch(0.54 0.132 255); --accent-soft:oklch(0.95 0.030 255); --on-accent:oklch(0.99 0 0);
  --mark-bg:oklch(0.925 0.095 92); --mark-fg:oklch(0.32 0.070 72); --mark-rule:oklch(0.80 0.130 88);
  --shadow:0 1px 2px oklch(0.24 0.012 80 / 0.06), 0 8px 24px oklch(0.24 0.012 80 / 0.07);
  --ui:"Public Sans",-apple-system,Helvetica,Arial,sans-serif;
  --read:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --t-xs:11px; --t-sm:13px; --t-md:15px; --t-lg:17px; --t-xl:21px; --t-2xl:27px;
  --lh-read:1.52; --track-tight:-0.011em;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;
}
[data-theme="dark"]{
  --bg:oklch(0.175 0.008 80); --surface:oklch(0.215 0.008 80); --surface-2:oklch(0.262 0.009 80);
  --text:oklch(0.945 0.008 85); --text-2:oklch(0.715 0.010 85); --text-3:oklch(0.60 0.010 85);
  --line:oklch(0.305 0.008 80); --line-strong:oklch(0.40 0.010 80);
  --accent:oklch(0.74 0.115 255); --accent-soft:oklch(0.32 0.055 255); --on-accent:oklch(0.17 0.02 255);
  --mark-bg:oklch(0.375 0.075 92); --mark-fg:oklch(0.955 0.055 95); --mark-rule:oklch(0.62 0.110 90);
  --shadow:0 1px 2px oklch(0 0 0 / 0.4), 0 10px 28px oklch(0 0 0 / 0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--ui);
  -webkit-text-size-adjust:100%;
  /* Standalone home-screen launch: keep content clear of the notch and home bar */
  padding:env(safe-area-inset-top) 0 0;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.hidden{display:none !important}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--bg);
  border-bottom:1px solid var(--line); padding:var(--s2) var(--s4) 10px;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
}
.brand{display:none; font-weight:700; letter-spacing:-0.02em; font-size:var(--t-md); white-space:nowrap}
/* Explicit row so the theme button can't wrap away from the field. Flattened
   into the topbar's own flex context on desktop via display:contents. */
.searchrow{display:flex; align-items:center; gap:var(--s3); width:100%}
.searchrow .searchbox{flex:1; min-width:0}
.meta-row{flex:1 0 100%}
.searchbox{
  display:flex; align-items:center; gap:var(--s3); padding:14px var(--s4);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.searchbox:focus-within{border-color:var(--line-strong)}
.searchbox .icon{color:var(--text-3); font-size:16px; line-height:1}
#q{
  flex:1; min-width:0; border:none; outline:none; background:none;
  font-size:var(--t-lg); font-weight:500; color:var(--text); font-family:var(--ui);
}
#q::placeholder{color:var(--text-3); font-weight:400}
#clear{
  width:22px; height:22px; border-radius:var(--r-pill); background:var(--surface-2);
  color:var(--text-2); font-size:12px; display:flex; align-items:center; justify-content:center; flex:none;
}
.meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  font-family:var(--mono); font-size:var(--t-xs); color:var(--text-2);
  letter-spacing:0.06em; text-transform:uppercase;
}
.meta-row .dim{color:var(--text-3)}
#theme{
  font-family:var(--mono); font-size:18px; line-height:1; color:var(--text-3);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill);
}

/* ---------- layout ---------- */
.shell{display:flex; flex-direction:column; min-height:100%}
main{flex:1; min-height:0}

/* ---------- player stage ---------- */
#stage{
  padding:0 var(--s4) 10px; background:var(--bg);
  position:sticky; top:0; z-index:10;
  display:flex; flex-direction:column; gap:var(--s2);
  border-bottom:1px solid var(--line);
}
.player-wrap{
  width:100%; aspect-ratio:16/9; background:#000;
  border-radius:var(--r-md); overflow:hidden;
}
.player-wrap iframe{width:100%; height:100%; border:0; display:block}
.now-meta{
  display:flex; align-items:center; gap:var(--s2);
  font-size:var(--t-sm); color:var(--text-3); min-width:0;
}
.now-meta .t{font-family:var(--mono); color:var(--accent); font-weight:500; flex:none}
.now-meta .title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* On phones the sentence already sits in the highlighted list row directly
   below; repeating it under the player would push the list off-screen. */
.now-sentence{display:none}

/* ---------- transport ---------- */
.transport{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:var(--s3) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px oklch(0 0 0/0.18);
  display:flex; align-items:center; gap:10px;
}
#replay{
  flex:1; min-width:0; height:52px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--on-accent);
  font-size:var(--t-lg); font-weight:600; letter-spacing:var(--track-tight);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
#replay:active{transform:scale(0.985)}
#replay .g{font-size:19px}
#speed{
  width:64px; height:52px; border-radius:var(--r-pill); border:1px solid var(--line-strong);
  font-family:var(--mono); font-size:var(--t-md); font-weight:500; color:var(--text); flex:none;
}
#speed[data-rate="0.75"]{background:var(--accent-soft); border-color:var(--accent)}
#close{
  width:52px; height:52px; border-radius:var(--r-pill); border:1px solid var(--line);
  color:var(--text-2); font-size:15px; flex:none;
}

/* ---------- results ---------- */
.hit{
  display:block; width:100%; text-align:left;
  padding:var(--s4); border-bottom:1px solid var(--line);
}
.hit .sentence{
  font-family:var(--read); font-size:var(--t-lg); line-height:var(--lh-read);
  text-wrap:pretty; color:var(--text);
}
.hit .sub{display:flex; align-items:center; gap:var(--s2); font-size:var(--t-sm); color:var(--text-3); margin-top:var(--s2); min-width:0}
.hit .sub .t{font-family:var(--mono); color:var(--accent); font-weight:500; flex:none}
.hit .sub .dot{width:3px; height:3px; border-radius:50%; background:var(--line-strong); flex:none}
.hit .sub .title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.more{
  display:block; width:100%; text-align:left;
  padding:10px var(--s4); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:var(--t-sm); color:var(--accent);
}
.hit.playing{background:var(--surface-2)}
[data-theme] .hit.playing .sub .t{color:var(--accent)}
.hit .nowline{
  display:none; align-items:center; gap:var(--s2); margin-top:var(--s2);
  font-family:var(--mono); font-size:var(--t-sm); color:var(--accent);
}
.hit.playing .nowline{display:flex}
.hit.playing .sub{display:none}
.bars{display:flex; gap:2px; align-items:flex-end; height:11px}
.bars i{width:2px; background:var(--accent); display:block; animation:eq 900ms ease-in-out infinite}
.bars i:nth-child(1){height:5px; animation-delay:0ms}
.bars i:nth-child(2){height:11px; animation-delay:150ms}
.bars i:nth-child(3){height:8px; animation-delay:300ms}
@keyframes eq{0%,100%{transform:scaleY(0.55)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.bars i{animation:none}}

mark{
  background:var(--mark-bg); color:var(--mark-fg); font-weight:600;
  border-radius:3px; padding:1px 3px; box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* ---------- launch / empty ---------- */
.pane{padding:var(--s4) var(--s4) var(--s7); display:flex; flex-direction:column; gap:var(--s5)}
.label{
  font-family:var(--mono); font-size:var(--t-xs); letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-3);
}
.chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:10px}
.chip{
  padding:9px 14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); font-size:var(--t-md); font-weight:500; color:var(--text);
}
.earlier .row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:13px var(--s1); border-top:1px solid var(--line); width:100%; text-align:left;
}
.earlier .row span:first-child{font-size:var(--t-lg); font-weight:500}
.earlier .row .when{font-family:var(--mono); font-size:var(--t-sm); color:var(--text-3); flex:none}
.headline{font-size:var(--t-xl); font-weight:600; letter-spacing:var(--track-tight)}
.prose{font-family:var(--read); font-size:var(--t-lg); line-height:var(--lh-read); color:var(--text-2); text-wrap:pretty}
.rule{height:1px; background:var(--line)}
.footnote{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s4) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); font-family:var(--mono);
  font-size:var(--t-xs); color:var(--text-3);
}

/* ---------- desktop ---------- */
@media (min-width:900px){
  body{padding:0}
  .topbar{
    flex-wrap:nowrap; gap:var(--s5); padding:var(--s4) 28px;
  }
  .brand{display:block}
  .searchrow{display:contents}
  .searchrow .searchbox{width:420px; flex:none; padding:11px var(--s4)}
  #q{font-size:var(--t-md)}
  .topbar .meta-row{flex:1 1 auto; min-width:0; justify-content:flex-end}
  #theme{order:4; width:auto; padding:0 var(--s3); font-size:var(--t-xs)}
  #theme::after{content:'\00a0THEME'}

  .shell{height:100vh; overflow:hidden}
  main{
    display:grid; grid-template-columns:1.15fr 1fr; min-height:0; overflow:hidden;
  }
  main.solo{grid-template-columns:1fr}
  #stage{
    position:static; grid-column:1; border-right:1px solid var(--line); border-bottom:none;
    background:var(--surface-2); padding:28px; gap:18px; overflow-y:auto;
  }
  .now-sentence{
    display:block; font-family:var(--read); font-size:19px;
    line-height:var(--lh-read); text-wrap:pretty; color:var(--text);
  }
  .transport{
    position:static; padding:0; background:none; border:none; box-shadow:none; gap:var(--s3);
  }
  #replay{flex:none; height:48px; padding:0 26px; font-size:var(--t-md)}
  #speed{width:auto; padding:0 var(--s4); height:48px}
  #close{height:48px; width:48px}
  .kbd{font-family:var(--mono); font-size:var(--t-xs); color:var(--text-3); margin-left:auto}

  .scroller{grid-column:2; overflow-y:auto; min-height:0}
  #stage.hidden + .scroller{grid-column:1 / -1}
  .hit{padding:14px 24px}
  .pane{max-width:560px; margin:0 auto; padding-top:var(--s7)}
}
@media (max-width:899px){
  .kbd{display:none}
  .scroller{padding-bottom:120px}
  .shell.playing .scroller{padding-bottom:140px}
}