/* ============================================================
   TaqaBuddy home page. Tokens, grid, tables, header and footer
   are in site.css. The only motion here is the trace in the
   terminal typing itself out once (home.js).
   ============================================================ */

/* ----------------------------------------------------------------- hero */
.hero .cells{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-copy{padding:56px var(--gut) 44px;display:flex;flex-direction:column;gap:22px}
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.kicker i{font-style:normal;color:var(--fg-4);margin:0 .5em}
.display{font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:.98;letter-spacing:-.05em;font-weight:600;max-width:12ch;text-wrap:balance}
.lead{font-size:1.05rem;line-height:1.6;color:var(--fg-2);max-width:44ch}
.lead b{color:var(--fg);font-weight:500}

/* ------------------------------------------------------------- terminal */
.term{background:var(--bg-1);display:flex;flex-direction:column}
.term-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:10px 16px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;color:var(--fg-3)}
.term-bar span{white-space:nowrap}
.term-bar b{color:var(--fg-2);font-weight:400}
.term-bar button{background:none;border:1px solid var(--line-2);color:var(--fg-2);cursor:pointer;
  font-family:var(--mono);font-size:.66rem;padding:2px 8px;visibility:hidden}
.term-bar button:hover{color:var(--fg);border-color:var(--fg-3)}
.js .term-bar button{visibility:visible}
.tr{flex:1;padding:14px 16px 18px;font-family:var(--mono);font-size:.74rem;line-height:1.65;color:var(--fg-2)}
.ln{white-space:pre-wrap;overflow-wrap:anywhere;min-height:1.65em}
.ln.c{color:var(--fg-3)}
.ln.p{color:var(--fg);margin-top:10px}
.ln.p::before{content:"> ";color:var(--accent)}
.ln.o{display:grid;grid-template-columns:7ch minmax(0,1fr);column-gap:1ch;padding-left:2ch}
.ln.o b{font-weight:400;color:var(--fg-3)}
.ln.o.say span{color:var(--fg)}
.ln.o.tx span{color:var(--fg)}
.ln.o.no span{color:var(--fg-3)}
.term-foot{border-top:1px solid var(--line);padding:9px 16px;font-family:var(--mono);font-size:.68rem;color:var(--fg-3)}
/* The trace ships as .play so it cannot flash before home.js starts, and
   home.js swaps that for .run. Lines not yet reached keep their space. If
   the script never arrives, the failsafe shows every line after 2.5 s. */
.js .tr.play .ln{visibility:hidden;animation:failsafe 0s 2.5s forwards}
.js .tr.run .ln{visibility:hidden}
.js .tr.run .ln.on{visibility:visible}
@keyframes failsafe{to{visibility:visible}}

/* ---------------------------------------------------------------- stats */
.stats .cells{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:22px var(--gut) 20px}
.stat .v{font-family:var(--mono);font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:500;letter-spacing:-.05em;line-height:1;
  color:var(--fg);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .v small{font-size:.4em;letter-spacing:0;color:var(--fg-2);margin-left:.35em;font-weight:400}
.stat .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--fg);margin-top:16px}
.stat .c{font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--fg-3);margin-top:4px}

/* ------------------------------------------------------------- pipeline */
.pipe .cells{grid-template-columns:repeat(5,minmax(0,1fr))}
.stage{padding:18px 16px 18px;display:flex;flex-direction:column;gap:8px}
.stage .n{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;color:var(--fg-3)}
.stage h3{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.stage p{font-size:.85rem;line-height:1.5;color:var(--fg-2)}
.stage code{display:block;margin-top:auto;font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--fg);
  background:var(--bg-1);border:1px solid var(--line);padding:6px 8px;overflow-wrap:anywhere}
.stage .pending{color:var(--accent)}

/* ------------------------------------------------------------ spec, log */
.spec .cells{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.spec .dt .k{width:34%}
.log .dt td:first-child{white-space:nowrap}
.log .note{padding:12px var(--gut);border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;color:var(--fg-3)}
.log .note a,.limits a{color:var(--fg-2)}

/* --------------------------------------------------------------- limits */
.limits ol{list-style:none}
.limits li{display:grid;grid-template-columns:5ch minmax(0,1fr);column-gap:1ch;padding:10px var(--gut);
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.78rem;line-height:1.55;color:var(--fg-2)}
.limits li:last-child{border-bottom:0}
.limits li span{color:var(--fg-3)}
.limits li b{color:var(--fg);font-weight:500}

/* ------------------------------------------------------------- waitlist */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding:28px var(--gut)}
.signup p.sub{font-size:1.02rem;line-height:1.6;color:var(--fg-2);max-width:44ch}

/* ----------------------------------------------------------- responsive */
@media(max-width:1000px){
  .pipe .cells{grid-template-columns:1fr}
  .stage code{margin-top:4px}
}
@media(max-width:900px){
  .hero .cells,.spec .cells,.signup{grid-template-columns:1fr}
  .hero-copy{padding-top:40px}
  .stats .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .stat{padding:18px 16px}
  .log .dt .y{display:none}
  /* the long result notes ("5 to 7% wrong action...") set the table wider than a phone */
  .log .dt td.r{white-space:normal}
}
@media print{.js .tr.play .ln,.js .tr.run .ln{visibility:visible;animation:none}.term-bar button{display:none}}
/* reduced motion: the trace is simply shown, so there is nothing to replay */
@media (prefers-reduced-motion:reduce){
  .js .tr.play .ln,.js .tr.run .ln{visibility:visible}
  .js .term-bar button{visibility:hidden}
}