/* ═══════════════════════════════════════════════════════════
   AOS. — LLM RCA case review
   Same tokens, chrome and hairline vocabulary as the AOS
   brandbook. Nothing here is page-specific except the compare
   grid, which is the one thing this surface exists for.
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#FFFFFF; --bg-alt:#F7F9FB;
  --bg-gradient:linear-gradient(180deg,#FFFFFF 60%,#EBF1F6 100%);
  --card:#FFFFFF;
  --text:#000000; --text-secondary:#555555; --text-tertiary:#999999;
  --border:rgba(0,0,0,0.08); --border-light:rgba(0,0,0,0.04);
  --destructive:#DC2626; --warning:#D97706; --success:#16A34A; --info:#2563EB;
  --font-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'Geist Mono','SF Mono',Consolas,monospace;
  --radius-md:8px; --radius-lg:10px; --radius-2xl:16px; --radius-pill:100px;
  --shadow-card:0 2px 10px rgba(0,0,0,0.03);
  --shadow-soft:0 20px 40px -10px rgba(0,0,0,0.06);
  --glass-bg:rgba(255,255,255,0.85); --glass-blur:blur(12px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-gradient); background-attachment:fixed; min-height:100vh;
  font-family:var(--font-sans); font-size:15px; line-height:1.6; color:var(--text);
}
#corner{position:fixed; top:-30px; right:-60px; width:460px; height:340px; z-index:0; pointer-events:none;}

/* ─── chrome ─── */
header{
  position:sticky; top:0; z-index:100; min-height:56px;
  background:var(--glass-bg); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 28px;
}
.wordmark{display:flex; align-items:baseline; gap:11px; min-width:0;}
.wordmark a{color:inherit; text-decoration:none;}
.wordmark b{font-size:18px; font-weight:600; letter-spacing:-0.03em;}
.wordmark span{font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:0.12em;
               color:var(--text-tertiary); text-transform:lowercase; white-space:nowrap;}
.hdr-right{display:flex; align-items:center; gap:14px; flex:none;}
a.back{font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--text-secondary);
       text-decoration:none; transition:color .15s ease; white-space:nowrap;}
a.back:hover{color:var(--text);}

main{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:40px 28px 88px;}
main.narrow{max-width:900px;}
main.wide{max-width:1280px;}
footer{max-width:1080px; margin:0 auto; padding:0 28px 44px; font-size:10px; color:#8B929E;
       letter-spacing:0.05em; position:relative; z-index:1;}
footer a{color:#8B929E;}

/* ─── type ─── */
.meta-label{font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase;
            letter-spacing:0.1em; color:var(--text-tertiary);}
h1{font-size:clamp(1.5rem,3vw,2rem); font-weight:600; letter-spacing:-0.03em; line-height:1.18; margin-top:10px;}
h1.mono{font-family:var(--font-mono); font-size:clamp(1.15rem,2.4vw,1.55rem); letter-spacing:-0.01em;}
h2{font-size:1.02rem; font-weight:600; letter-spacing:-0.02em;}
.lede{color:var(--text-secondary); margin-top:13px; max-width:640px;}
.sec{margin-top:38px;}
.sec > .meta-label{display:block; margin-bottom:10px;}
.note{font-size:12.5px; color:var(--text-tertiary); margin-top:8px;}
.mono{font-family:var(--font-mono);}

/* ─── lockup ─── */
.lockup h1{font-size:clamp(2rem,5vw,3.4rem); line-height:1.05; letter-spacing:-0.04em; margin:0 0 0 -2px;}
.lockup .fullname{margin-top:6px; font-family:var(--font-mono); font-size:11px; font-weight:500;
                  letter-spacing:0.14em; color:var(--text-secondary); text-transform:lowercase;}

/* ─── chips ─── */
.chips{display:flex; gap:6px; flex-wrap:wrap;}
.chip{font-family:var(--font-mono); font-size:11px; font-weight:500; padding:5px 13px;
      border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--card);
      color:var(--text-secondary); text-decoration:none; transition:all .15s ease; white-space:nowrap;}
a.chip:hover, button.chip:hover{border-color:#000; background:#000; color:#fff; cursor:pointer;}
button.chip{font-family:var(--font-mono);}
.chip.on{background:#000; color:#fff; border-color:#000;}
.chip.mute{border-style:dashed; color:var(--text-tertiary);}

/* one palette, one meaning: which side's code is not QTS's.
   red = LLM off QTS · amber = BPO off QTS · black = both off · green = all match */
.tag{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.09em;
     text-transform:uppercase; padding:3px 9px; border-radius:var(--radius-pill);
     border:1px solid var(--border); background:var(--card); color:var(--text-secondary); white-space:nowrap;}
.tag.ok{border-color:rgba(22,163,74,0.30); background:rgba(22,163,74,0.07); color:var(--success);}
.tag.llm{border-color:rgba(220,38,38,0.42); background:rgba(220,38,38,0.07); color:var(--destructive);}
.tag.bpo{border-color:rgba(217,119,6,0.42); background:rgba(217,119,6,0.09); color:var(--warning);}
.tag.split{border-color:#000; background:#000; color:#fff;}
.tag.quiet{border-color:var(--border-light); background:var(--bg-alt); color:var(--text-tertiary);}
.tag.mark{border-color:rgba(0,0,0,0.55); color:var(--text); background:var(--card);}
.tag.none{border-style:dashed; color:var(--text-tertiary);}
.tag.solid{background:#000; color:#fff; border-color:#000;}

/* ─── stat strip ─── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:1px;
       background:var(--border-light); border:1px solid var(--border); border-radius:var(--radius-2xl);
       overflow:hidden; box-shadow:var(--shadow-card);}
.stat{background:var(--card); padding:14px 16px 15px;}
.stat .k{font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:0.1em;
         text-transform:uppercase; color:var(--text-tertiary);}
.stat .v{font-family:var(--font-mono); font-size:1.55rem; font-weight:600; letter-spacing:-0.03em; margin-top:5px; line-height:1;}
.stat .s{font-size:11.5px; color:var(--text-tertiary); margin-top:5px;}
.stat .v.bad{color:var(--destructive);} .stat .v.ok{color:var(--success);}

/* ─── accuracy: the headline pair on the entrance ─── */
.acc{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-light);}
.acc > div{background:var(--card); padding:20px 22px 22px;}
.acc .who{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.14em;
          text-transform:uppercase; color:var(--text-tertiary);}
.acc .big{font-family:var(--font-mono); font-size:3.1rem; font-weight:600; letter-spacing:-0.05em;
          line-height:1; margin-top:9px;}
.acc .frac{font-family:var(--font-mono); font-size:12px; color:var(--text-tertiary); margin-top:9px;}
.acc .bar{height:5px; border-radius:var(--radius-pill); background:rgba(0,0,0,0.07); margin-top:12px; overflow:hidden;}
.acc .bar i{display:block; height:100%; background:#000;}
.acc .own{font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); margin-top:9px;}
@media(max-width:620px){.acc{grid-template-columns:1fr;}}
/* the counts, deliberately quieter than the pair above them */
.sub-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px;
           background:var(--border-light); border-top:1px solid var(--border-light);}
.sub-stats > div{background:var(--bg-alt); padding:9px 14px 11px;}
.sub-stats .k{font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:0.1em;
              text-transform:uppercase; color:var(--text-tertiary);}
.sub-stats .v{font-family:var(--font-mono); font-size:13px; color:var(--text-secondary); margin-top:3px;}

/* ─── card / batch door ─── */
.card{border:1px solid var(--border); border-radius:var(--radius-2xl); background:var(--card);
      box-shadow:var(--shadow-card); overflow:hidden;}
a.door{display:block; text-decoration:none; color:inherit; transition:box-shadow .18s ease, transform .18s ease;}
a.door:hover{box-shadow:var(--shadow-soft); transform:translateY(-1px);}
.door .top{display:flex; align-items:baseline; gap:12px; padding:16px 20px 14px; flex-wrap:wrap;}
.door .top .nm{font-family:var(--font-mono); font-weight:600; font-size:15px; letter-spacing:-0.01em;}
.door .top .ds{font-size:13px; color:var(--text-tertiary);}
.door .top .go{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary);
               transition:transform .15s ease,color .15s ease;}
a.door:hover .go{color:var(--text); transform:translateX(3px);}
.door .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:1px;
            background:var(--border-light); border-top:1px solid var(--border-light);}
.door .grid > div{background:var(--bg-alt); padding:11px 16px 13px;}

/* ─── split bar: three-way agreement, drawn as a bar ─── */
.splitbar{display:flex; height:10px; border-radius:var(--radius-pill); overflow:hidden;
          border:1px solid var(--border); background:var(--bg-alt);}
.splitbar i{display:block; height:100%;}
.sb-both{background:#000;} .sb-llm{background:rgba(220,38,38,0.55);}
.sb-bpo{background:rgba(217,119,6,0.5);} .sb-none{background:rgba(22,163,74,0.28);}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:11.5px; color:var(--text-secondary);}
.legend span{display:flex; align-items:center; gap:6px;}
.legend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

/* ─── filter rail ─── */
.rail{position:sticky; top:56px; z-index:90; background:var(--glass-bg);
      backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
      border-bottom:1px solid var(--border-light); padding:12px 28px;}
.rail .inner{max-width:1280px; margin:0 auto; display:flex; flex-direction:column; gap:9px;}
.rail .line{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.rail .lbl{font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:0.1em;
           text-transform:uppercase; color:var(--text-tertiary); width:72px; flex:none;}
input[type=search], select{font-family:var(--font-mono); font-size:12px; color:var(--text);
       border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--card);
       padding:6px 13px; outline:none; transition:border-color .15s ease;}
input[type=search]{min-width:230px;}
select{max-width:210px; text-overflow:ellipsis;}
input[type=search]:focus, select:focus{border-color:#000;}
.count{font-family:var(--font-mono); font-size:11px; color:var(--text-tertiary); margin-left:auto;}

/* ─── case table ─── */
table.cases{width:100%; border-collapse:collapse; font-size:13px;}
table.cases th{font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:0.1em;
      text-transform:uppercase; color:var(--text-tertiary); text-align:left; padding:9px 12px;
      border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none;}
table.cases th:hover{color:var(--text);}
table.cases th.static{cursor:default;} table.cases th.static:hover{color:var(--text-tertiary);}
table.cases th .dir{color:var(--text); font-size:9px;}
table.cases td{padding:9px 12px; border-bottom:1px solid var(--border-light); vertical-align:top;}
table.cases tbody tr{cursor:pointer; transition:background .12s ease;}
table.cases tbody tr:hover{background:rgba(0,0,0,0.022);}
td.id{font-family:var(--font-mono); font-size:11.5px; white-space:nowrap;}
td.id b{font-weight:500;} td.id small{display:block; color:var(--text-tertiary); font-size:10px; margin-top:2px;}
td.code{font-family:var(--font-mono); font-size:12px; color:var(--text-secondary); max-width:200px;
        border-left:2px solid transparent;}
td.code b{font-weight:600; color:var(--text); letter-spacing:-0.01em; font-size:13px;}
td.code small{display:block; font-size:10.5px; color:var(--text-tertiary); line-height:1.35; margin-top:2px;}
/* the three code columns are bracketed so they read as one zone */
th.grp{border-left:2px solid transparent; color:var(--text);}
th.grp.first, td.code.first{border-left:1px solid var(--border);}
th.grp.last, td.code.last{border-right:1px solid var(--border);}
/* a cell whose code is not QTS's — the rule says which side, in the site palette */
td.code.off{border-left-width:2px; border-left-style:solid;}
td.code.off-llm{border-left-color:#DC2626; background:rgba(220,38,38,0.045);}
td.code.off-llm b{color:var(--destructive);}
td.code.off-bpo{border-left-color:#D97706; background:rgba(217,119,6,0.05);}
td.code.off-bpo b{color:var(--warning);}
td.code.void{color:var(--text-tertiary);}
td.narrow{white-space:nowrap;}
.empty{padding:44px 12px; text-align:center; color:var(--text-tertiary); font-size:13px;}
.pager{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:22px;}

/* ─── the way out to TCS, on the id it belongs to ─── */
a.tcsbtn{display:inline-flex; align-items:center; gap:9px; margin-top:12px;
         font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:0.02em;
         padding:8px 16px; border-radius:var(--radius-pill); border:1px solid #000;
         background:#000; color:#fff; text-decoration:none; transition:all .15s ease;}
a.tcsbtn i{font-style:normal; font-size:12px; transition:transform .15s ease;}
a.tcsbtn:hover{background:var(--card); color:var(--text);}
a.tcsbtn:hover i{transform:translate(2px,-2px);}

/* ─── case detail: the compare grid ─── */
.casehead{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.idline{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:14px;}
.kv{font-family:var(--font-mono); font-size:11.5px; color:var(--text-secondary);
    border:1px solid var(--border-light); background:var(--bg-alt); border-radius:var(--radius-md); padding:4px 10px;}
.kv b{color:var(--text-tertiary); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; font-size:9.5px; margin-right:7px;}
.kv.pol{font-family:var(--font-sans); font-size:12.5px; color:var(--text);}
.kv.pol u{font-family:var(--font-mono); font-size:10.5px; color:var(--text-tertiary);
          text-decoration:none; margin-left:8px;}
td.pol{font-size:11.5px; color:var(--text-secondary); max-width:172px; line-height:1.35;}
/* long policy names would otherwise set the row height for the whole table */
td.pol span.nm{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
td.pol small{display:block; font-family:var(--font-mono); font-size:9.5px; color:var(--text-tertiary); margin-top:2px;}

.compare{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border-light);
         border:1px solid var(--border); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-card);}
.compare > div{background:var(--card); display:flex; flex-direction:column;}
/* the slot rule carries the site palette: red when the LLM's code is not QTS's,
   amber when the BPO's is not, black when it matches. QTS is the reference. */
.compare .slot{height:3px; background:rgba(0,0,0,0.06);}
.compare .in{padding:15px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1;}
.compare .who{display:flex; align-items:baseline; gap:9px; width:100%;}
.compare .who b{font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;}
.compare .who span{font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em; color:var(--text-tertiary);}
.compare .off-mark{font-weight:600; letter-spacing:0.1em; margin-left:auto;}
.compare .cid{font-family:var(--font-mono); font-size:2.5rem; font-weight:600; letter-spacing:-0.045em;
              line-height:1; margin-top:8px;}
.compare .cid.miss{font-size:1.4rem; color:var(--text-tertiary); font-weight:400;}
.compare .cname{font-size:13.5px; color:var(--text-secondary); line-height:1.45; min-height:2.6em;}
.compare .sub{font-family:var(--font-mono); font-size:10.5px; color:var(--text-tertiary); margin-top:auto; padding-top:8px;}
/* echo row: the three ids once more, tight, for a single left-to-right sweep */
.echo{display:flex; align-items:center; gap:10px; margin-top:10px; font-family:var(--font-mono); font-size:12px;
      color:var(--text-tertiary); flex-wrap:wrap;}
.echo b{color:var(--text); font-weight:600; letter-spacing:-0.01em;}
.echo i{font-style:normal; color:rgba(0,0,0,0.25);}
@media(max-width:760px){.compare{grid-template-columns:1fr;} .compare .cname{min-height:0;}}

/* ─── divergence layers ─── */
.layers{display:flex; flex-direction:column; gap:10px;}
.layer{border:1px solid var(--border); border-radius:var(--radius-2xl); background:var(--card);
       box-shadow:var(--shadow-card); overflow:hidden;}
.layer.quiet{background:rgba(255,255,255,0.55); border-style:dashed;}
.layer .lh{display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--border-light);}
.layer.quiet .lh{border-bottom:none;}
.layer .lh b{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;}
.layer.quiet .lh b{color:var(--text-tertiary);}
.layer .lh .r{margin-left:auto; font-size:12px; color:var(--text-tertiary); text-align:right; max-width:60%;}
.reads{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-light);}
.reads > div{background:var(--card); padding:13px 16px 15px;}
.reads .k{font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:0.1em;
          text-transform:uppercase; color:var(--text-tertiary); margin-bottom:5px;}
.reads .t{font-size:13.5px; color:var(--text-secondary); line-height:1.55;}
.layer .why{padding:12px 16px 14px; background:var(--bg-alt); border-top:1px solid var(--border-light);
            font-size:13px; color:var(--text-secondary);}
.layer .why b{font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:0.1em;
              text-transform:uppercase; color:var(--text-tertiary); margin-right:8px;}
@media(max-width:760px){.reads{grid-template-columns:1fr;}}

/* ─── reasoning ─── */
.prose{border:1px solid var(--border); border-radius:var(--radius-2xl); background:var(--card);
       box-shadow:var(--shadow-card); padding:18px 20px 20px; font-size:14px; color:var(--text-secondary); line-height:1.68;}
.prose p + p{margin-top:11px;}
.prose .mk{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.1em;
           text-transform:uppercase; color:var(--text); margin-right:8px;}
/* Chinese needs its own setting, not the English one with the glyphs swapped:
   CJK sits after the latin face, lines breathe more, uppercase does nothing to
   a hanzi and only stretches the english mixed into it. */
.prose.zh{font-family:'Geist','PingFang SC','Hiragino Sans GB','Source Han Sans SC','Noto Sans SC','Microsoft YaHei',sans-serif;
          font-size:14.5px; line-height:1.85; letter-spacing:0;}
.prose.zh .mk{font-family:var(--font-mono); text-transform:none; letter-spacing:0.02em; font-size:11px;}
.prose.zh code{font-family:var(--font-mono); font-size:12.5px; color:var(--text);
               background:var(--bg-alt); border:1px solid var(--border-light); border-radius:4px;
               padding:1px 5px; margin:0 1px; line-height:1.5;}
/* the switch sits on the section heading, not in the body */
.sechead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;}
.seg{display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-pill);
     background:var(--card); overflow:hidden;}
.seg button{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.08em;
            padding:4px 12px; border:none; background:transparent; color:var(--text-tertiary);
            cursor:pointer; transition:all .15s ease;}
.seg button + button{border-left:1px solid var(--border-light);}
.seg button:hover{color:var(--text);}
.seg button.on{background:#000; color:#fff;}
.seg button[disabled]{opacity:.4; cursor:not-allowed;}
.zhnote{font-family:var(--font-mono); font-size:10.5px; color:var(--text-tertiary); margin-top:8px;}
/* the policy doc's own headings, quoted inside a sentence */
.prose .im{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:0.04em;
           color:var(--text-tertiary); border:1px solid var(--border-light); background:var(--bg-alt);
           border-radius:4px; padding:1px 5px; margin:0 2px; white-space:nowrap;}
.prose code{font-family:var(--font-mono); font-size:12.5px; color:var(--text);
            background:var(--bg-alt); border:1px solid var(--border-light); border-radius:4px;
            padding:1px 5px; margin:0 1px; line-height:1.5;}
.prose code .im{border:none; background:none; padding:0; margin:0 3px 0 0;}

/* ─── frame (video still) ─── */
.frame{border:1px solid var(--border); border-radius:var(--radius-2xl); overflow:hidden;
       background:var(--bg-alt); box-shadow:var(--shadow-card); max-width:280px;}
.frame img{display:block; width:100%; height:auto;}
.frame .cap{padding:8px 12px 10px; font-family:var(--font-mono); font-size:10px;
            letter-spacing:0.06em; color:var(--text-tertiary); border-top:1px solid var(--border-light);}

/* ─── prev / next ─── */
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:44px;
     padding-top:18px; border-top:1px solid var(--border-light);}
.nav .k{font-family:var(--font-mono); font-size:10px; color:var(--text-tertiary); letter-spacing:0.06em;}