/* One stylesheet.
   These rules existed twice, once inside build-console.ps1 and once inside
   app.template.html, because two build scripts each carried their own copy. Two copies of
   the same rule is how two surfaces slowly stop looking like the same product. */

:root{
  --bg:#faf9f7; --card:#fff; --ink:#141414; --muted:#6b6b6b; --line:#e4e1dc;
  --sel:#a62e93; --warn:#b06a00; --warnbg:#fdf4e7; --ok:#1f7a4d; --okbg:#eef7f1;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141414; --card:#1c1c1c; --ink:#f2f0ed; --muted:#9a9a9a; --line:#2e2e2e;
    --sel:#d46bc0; --warn:#e0a34d; --warnbg:#2a2115; --ok:#5cc48d; --okbg:#16241c;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;
  padding-bottom:80px;
}
.hide{display:none !important}
.spacer{flex:1}
code{font-family:ui-monospace,Consolas,monospace;font-size:12px}

/* ---------------------------------------------------------------- sign in */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gatebox{
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  padding:30px 28px;width:100%;max-width:360px;
}
.gatebox h1{font-size:22px;margin:0 0 2px;font-weight:650;letter-spacing:-.01em}
.gatebox input{
  display:block;width:100%;margin-top:10px;padding:10px 12px;font:inherit;font-size:14px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);
}
.gatebox .btn{width:100%;margin-top:14px;padding:10px}
.gatemsg{font-size:13px;color:var(--muted);min-height:19px;margin:10px 0 0}

/* ---------------------------------------------------------------- frame */
header{
  padding:22px 32px 4px;max-width:1500px;margin:0 auto;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
h1{font-size:22px;margin:0;font-weight:650;letter-spacing:-.01em}
h2{font-size:15px;margin:34px 0 2px;font-weight:650;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:13px;margin:0}
main{max-width:1500px;margin:0 auto;padding:0 32px}
#msg{font-size:13px;min-height:19px;margin:8px 32px;max-width:1500px}

nav{
  max-width:1500px;margin:14px auto 0;padding:0 32px;
  display:flex;gap:6px;flex-wrap:wrap;border-bottom:1.5px solid var(--line);
}
nav button{
  font:inherit;font-size:13px;font-weight:550;padding:8px 13px;cursor:pointer;
  border:none;background:none;color:var(--muted);border-bottom:2px solid transparent;
  margin-bottom:-1.5px;
}
nav button:hover{color:var(--ink)}
nav button.on{color:var(--sel);border-bottom-color:var(--sel)}

section{display:none}
section.on{display:block}

/* ---------------------------------------------------------------- cards */
.item{
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-top:16px;
}
.ihead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.ititle{font-weight:650;font-size:15px}
.tag{
  font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border-radius:5px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.tag.kw{border-color:var(--sel);color:var(--sel)}
.tag.gone{border-color:var(--warn);color:var(--warn);background:var(--warnbg)}
.tag.ok{border-color:var(--ok);color:var(--ok);background:var(--okbg)}
a.tag{text-decoration:none}
a.tag:hover{border-color:var(--sel);color:var(--sel)}

.vars{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;align-items:stretch}
.var{
  flex:1 1 0;min-width:250px;border:2px solid var(--line);border-radius:12px;padding:10px;
  display:flex;flex-direction:column;
}
.var.on{border-color:var(--sel);box-shadow:0 0 0 3px rgba(166,46,147,.14)}
.vhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.vname{font-weight:600;font-size:13.5px}
.vnote{color:var(--muted);font-size:11.5px}

.btn{
  font:inherit;font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
}
.btn.go{border-color:var(--sel);background:var(--sel);color:#fff;font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed}

video{
  width:100%;max-width:236px;aspect-ratio:9/16;border-radius:9px;background:#000;
  display:block;margin:0 auto;cursor:zoom-in;
}
.strip{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;
  min-height:172px;align-items:flex-start;
}
.strip img{
  flex:0 0 auto;width:132px;aspect-ratio:4/5;object-fit:cover;border-radius:7px;
  scroll-snap-align:start;cursor:zoom-in;background:var(--bg);
}
details{margin-top:10px}
summary{font-size:12.5px;color:var(--muted);cursor:pointer}

table{border-collapse:collapse;width:100%;margin-top:10px;font-size:13px}
th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ---------------------------------------------------------------- counts */
.counts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.count{
  background:var(--card);border:1.5px solid var(--line);border-radius:12px;
  padding:12px 16px;min-width:132px;
}
.count .n{font-size:26px;font-weight:650;letter-spacing:-.02em;display:block;line-height:1.1}
.count .l{font-size:12px;color:var(--muted)}
.count.warn{border-color:var(--warn);background:var(--warnbg)}
.gate-note{
  margin-top:16px;padding:12px 16px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--card);font-size:13.5px;
}
.gate-note.open{border-color:var(--ok);background:var(--okbg)}

/* ---------------------------------------------------------------- doctrine */
.docs{padding-bottom:40px}
.doc{
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:4px 24px 20px;margin-top:16px;
}
.doc>summary{
  font-size:15px;font-weight:650;color:var(--ink);padding:14px 0;letter-spacing:-.01em;
}
.docsrc{font-size:11.5px;color:var(--muted);font-weight:400;margin-left:8px}
.docbody{font-size:14px;line-height:1.62;max-width:74ch}
.docbody h1,.docbody h2,.docbody h3{margin:26px 0 6px;letter-spacing:-.01em;line-height:1.3}
.docbody h1{font-size:19px}
.docbody h2{font-size:16px}
.docbody h3{font-size:14px;color:var(--muted);text-transform:none}
.docbody p{margin:0 0 12px}
.docbody ul,.docbody ol{margin:0 0 12px;padding-left:22px}
.docbody li{margin:3px 0}
.docbody code{
  background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
}
.docbody pre{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;overflow-x:auto;
}
.docbody pre code{border:none;background:none;padding:0}
.docbody blockquote{
  margin:0 0 12px;padding:2px 0 2px 14px;border-left:3px solid var(--line);color:var(--muted);
}
.docbody table{display:block;overflow-x:auto;white-space:nowrap}
.docbody a{color:var(--sel)}
.docbody hr{border:none;border-top:1px solid var(--line);margin:22px 0}

/* ---------------------------------------------------------------- dock */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 32px;background:var(--card);border-top:1.5px solid var(--line);
  font-size:13px;
}
.dock code{
  background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 8px;
}

/* ---------------------------------------------------------------- lightbox */
dialog{
  border:none;background:none;padding:0;max-width:96vw;max-height:96vh;
}
dialog::backdrop{background:rgba(0,0,0,.82)}
#lbslot img,#lbslot video{
  max-width:96vw;max-height:96vh;border-radius:10px;display:block;
}

/* ---------------------------------------------------------------- small utilities
   These exist because web/_headers sets style-src 'self' with no 'unsafe-inline', which
   blocks inline style="..." attributes as well as <style> blocks. Three of them were in
   the page and would have been silently dropped once deployed, which local dev could never
   have shown because wrangler pages dev ignores _headers entirely.
   Setting element.style.color from JavaScript is NOT affected, so the message lines are
   left alone. It is only the attribute in an HTML string that the policy refuses. */
.mt{margin-top:16px}
.mt-s{margin-top:12px}
.warn{color:var(--warn)}

@media (max-width:700px){
  header,nav,main{padding-left:18px;padding-right:18px}
  #msg{margin-left:18px;margin-right:18px}
  .dock{padding-left:18px;padding-right:18px}
  .doc{padding-left:16px;padding-right:16px}
}