/* =====================================================================
   kvasi.app · "tech" layer (2026-10-27, branch tech)
   Mono gold kickers, hairlines, live status chips, the Learning spec
   grid, button sheen, card tilt (public/js/tech.js) and cross-document
   view transitions. System monospace only: no web fonts.
   ===================================================================== */
:root{--t-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}

/* ---------- view transitions (cross-document, same origin) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:cubic-bezier(.2,.7,.1,1)}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ---------- kickers ---------- */
main .tk{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 18px;font:500 11.5px/1 var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--g-gold);font-variant-numeric:tabular-nums}
main .tk::before,main .tk::after{content:"";width:28px;height:1px;background:currentColor;opacity:.45}
main .pk-split__t .tk,main .pk-gal__t .tk{justify-content:center}
main .pk-split__t .tk::before,main .pk-gal__t .tk::before{display:none}
html[lang="zh"] main .tk{letter-spacing:.08em;font-size:12.5px}

/* slightly tighter, heavier section headlines */
main .gp h2,main .t3t__h{font-weight:650;letter-spacing:-.05em}
html[lang="zh"] main .gp h2{letter-spacing:-.02em}

/* ---------- realm table: mono numbers + subject ---------- */
.mp__k{font:500 11px/1 var(--t-mono);letter-spacing:.12em;color:var(--g-mut);font-variant-numeric:tabular-nums;min-width:2.2em}
.mp__b[aria-selected=true] .mp__k{color:var(--g-gold)}
.mp__s{font-family:var(--t-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.mp__st{font-family:var(--t-mono);letter-spacing:.14em;text-transform:uppercase}
.pk-card__n{font-family:var(--t-mono)!important;font-weight:500!important;letter-spacing:.16em!important}
html[lang="zh"] .mp__s{letter-spacing:.06em}

/* ---------- status line (sleek 2026-10-27: was boxed chips) ---------- */
main .tline{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 0;padding:0;
  font:500 var(--fs-s,12.5px)/1.4 var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(246,242,233,.86);text-shadow:0 1px 10px rgba(0,0,0,.45);text-align:center}
html[lang="zh"] main .tline{letter-spacing:.04em}
.tchip__dot{position:relative;width:7px;height:7px;border-radius:50%;background:#e6c47f;flex:none}
.tchip__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #e6c47f;opacity:0;animation:tpulse 2.4s var(--ease) infinite}
@keyframes tpulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.tchip__dot::after{animation:none;opacity:0}}
@media (max-width:420px){main .tline{letter-spacing:.05em;font-size:11px}}

/* ---------- Learning spec grid ---------- */
.tspec{margin:30px 0 0;padding:0;border-top:1px solid var(--g-hair);text-align:left}
.tspec__r{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:baseline;padding:15px 2px;border-bottom:1px solid var(--g-hair)}
.tspec dt{display:flex;align-items:baseline;gap:12px;margin:0;font:500 11.5px/1.4 var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--g-mut)}
.tspec__n{color:var(--g-gold);font-variant-numeric:tabular-nums}
.tspec dd{margin:0;font:550 16px/1.4 var(--sans);letter-spacing:-.01em;color:var(--g-fg)}
html[lang="zh"] .tspec dt{letter-spacing:.04em;font-size:12.5px}
@media (max-width:560px){
  .tspec__r{grid-template-columns:1fr;gap:6px;padding:13px 2px}
  .tspec dd{padding-left:calc(2ch + 12px)}
}

/* ---------- primary button sheen ---------- */
.gbtn,main a.gbtn{position:relative;overflow:hidden;isolation:isolate}
.gbtn::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));
  transform:skewX(-18deg);pointer-events:none;opacity:0}
html[data-theme="dark"] .gbtn::before{background:linear-gradient(100deg,rgba(230,196,127,0),rgba(230,196,127,.38),rgba(230,196,127,0))}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .gbtn:hover::before{opacity:1;animation:tsheen .var(--dur) var(--ease) forwards}
}
@keyframes tsheen{from{left:-60%}to{left:120%}}

/* ---------- build log timeline ---------- */
.tlog{position:relative;margin:34px 0 0;padding:0;list-style:none;text-align:left}
.tlog::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--g-hair)}
.tlog__i{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:0 0 26px 30px}
.tlog__i::before{content:"";position:absolute;left:3px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--g-gold);box-shadow:0 0 0 4px var(--g-glass)}
.tlog__m{display:flex;flex-direction:column;gap:8px;font:500 11.5px/1.2 var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g-mut)}
.tlog__m time{color:var(--g-gold)}
.tlog__tag{align-self:flex-start;padding:4px 8px;border:1px solid var(--g-hair);border-radius:999px;font-size:10px}
main .tlog h3{margin:0 0 6px;font:650 19px/1.25 var(--sans);letter-spacing:-.02em;color:var(--g-fg);text-align:left}
main .tlog p{margin:0;font-size:15.5px;line-height:1.55;color:var(--g-mut);text-align:left}
@media (max-width:560px){.tlog__i{grid-template-columns:1fr;gap:10px}.tlog__m{flex-direction:row;align-items:center;gap:10px}}

/* realm rows as a precise table: number · name · subject */
main .mp__list .mp__b{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;justify-content:stretch;align-items:baseline;text-align:left;column-gap:10px}
main .mp__list .mp__s{text-align:right}