/* harmony — design tokens & components. Cream / ink / amber, nothing else. */
@font-face { font-family:'Fredoka'; src:url('../art/fonts/Fredoka-Medium.ttf'); font-weight:500; }
@font-face { font-family:'Fredoka'; src:url('../art/fonts/Fredoka-SemiBold.ttf'); font-weight:600; }
@font-face { font-family:'Nunito Sans'; src:url('../art/fonts/NunitoSans-Regular.ttf'); font-weight:400; }
@font-face { font-family:'Nunito Sans'; src:url('../art/fonts/NunitoSans-SemiBold.ttf'); font-weight:600; }
@font-face { font-family:'Nunito Sans'; src:url('../art/fonts/NunitoSans-Bold.ttf'); font-weight:700; }
@font-face { font-family:'Nunito Sans'; src:url('../art/fonts/NunitoSans-ExtraBold.ttf'); font-weight:800; }
@font-face { font-family:'IBM Plex Mono'; src:url('../art/fonts/IBMPlexMono-Regular.ttf'); font-weight:400; }
@font-face { font-family:'IBM Plex Mono'; src:url('../art/fonts/IBMPlexMono-Medium.ttf'); font-weight:500; }
@font-face { font-family:'IBM Plex Mono'; src:url('../art/fonts/IBMPlexMono-SemiBold.ttf'); font-weight:600; }

:root {
  --cream:#F5F3EF; --paper:#FCFBF8;
  --ink:#1E2B45; --ink-70:rgba(30,43,69,.72); --ink-45:rgba(30,43,69,.46); --ink-12:rgba(30,43,69,.12); --ink-06:rgba(30,43,69,.06);
  --amber:#E8A13C; --amber-deep:#D18A22; --amber-soft:rgba(232,161,60,.16); --amber-mist:rgba(232,161,60,.09);
  --r-ctl:13px; --r-card:20px; --r-hero:26px;
  --shadow:0 1px 2px rgba(30,43,69,.04), 0 10px 30px rgba(30,43,69,.07);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--cream); color:var(--ink); font:400 16px/1.6 'Nunito Sans'; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; }
.bg-blob { position:absolute; z-index:0; pointer-events:none; }
main { position:relative; z-index:2; max-width:1060px; margin:0 auto; padding:0 32px; }

/* nav */
nav { position:relative; z-index:2; display:flex; align-items:center; gap:34px; max-width:1124px; margin:0 auto; padding:22px 32px 10px; }
nav .wm img { height:27px; display:block; }
nav a.link { color:var(--ink-70); text-decoration:none; font-weight:700; font-size:15.5px; padding:4px 2px; }
nav a.link.active { color:var(--ink); box-shadow:inset 0 -9px 0 -3px var(--amber-soft); border-bottom:2.5px solid var(--amber); }
nav .trust { font:500 12.5px/1 'IBM Plex Mono'; color:var(--ink-70); text-decoration:none; background:var(--paper); border:1.5px solid var(--ink-12); border-radius:999px; padding:9px 14px; }
nav .trust b { color:var(--ink); font-weight:600; }
nav .spacer { flex:1; }
nav .gear { display:flex; padding:8px; border-radius:12px; border:1.5px solid transparent; transition:border-color .18s ease-out, background .18s ease-out; }
nav .gear:hover { border-color:var(--ink-12); }
nav .gear img { width:21px; height:21px; }

/* type */
h1 { font:500 46px/1.18 'Fredoka'; letter-spacing:.002em; margin:0 0 10px; }
h2 { font:500 27px/1.3 'Fredoka'; margin:0 0 6px; }
h3 { font:700 16px/1.4 'Nunito Sans'; margin:0 0 4px; }
.sub { color:var(--ink-70); font-size:17px; max-width:560px; margin:0 auto; }
.eyebrow { font:600 12px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.14em; color:var(--amber-deep); }
.num { font-family:'IBM Plex Mono'; font-weight:500; }
.quiet { color:var(--ink-45); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:9px; border-radius:999px; font:700 16px/1 'Nunito Sans'; padding:14px 26px; text-decoration:none; cursor:pointer; border:none; white-space:nowrap; flex:none; transition:background .18s ease-out, border-color .18s ease-out, opacity .18s ease-out; }
.btn-primary { background:var(--amber); color:var(--ink); box-shadow:0 2px 0 rgba(30,43,69,.18); }
.btn-primary:hover { background:var(--amber-deep); }
.btn-primary:disabled { opacity:.45; cursor:default; }
.btn-primary:disabled:hover { background:var(--amber); }
.btn-ghost { background:transparent; color:var(--ink); border:1.8px solid var(--ink); padding:12.5px 24px; }
.btn-ghost:hover { background:var(--ink-06); }
.btn-ghost:disabled { opacity:.45; cursor:default; }
.btn-small { font-size:14px; padding:9px 16px; }
.demo-tag { font:600 10.5px/1 'IBM Plex Mono'; letter-spacing:.08em; text-transform:uppercase; background:var(--ink-06); border:1px solid var(--ink-12); color:var(--ink-70); padding:4px 7px; border-radius:7px; }

/* cards */
.card { background:var(--paper); border:1.5px solid var(--ink-12); border-radius:var(--r-card); box-shadow:var(--shadow); }
.hero-card { border-radius:var(--r-hero); }
.callout { background:var(--amber-mist); border:1.5px solid rgba(232,161,60,.45); border-radius:var(--r-card); }

/* chips, badges */
.chip { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:7px 14px; font-weight:700; font-size:13.5px; }
.chip-high { background:var(--ink); color:var(--cream); }
.chip-med { background:var(--amber); color:var(--ink); }
.chip-low { background:transparent; color:var(--ink); border:1.8px dashed var(--amber-deep); }
.chip-soft { background:var(--ink-06); color:var(--ink-70); border:1px solid var(--ink-12); }
.chip icon, .chip img { width:15px; height:15px; }

/* inputs */
textarea, input[type=text] { width:100%; border:1.8px solid var(--ink-12); border-radius:var(--r-ctl); background:#fff; font:400 17px/1.55 'Nunito Sans'; color:var(--ink); padding:16px 18px; resize:none; outline:none; }
textarea:focus, input[type=text]:focus { border-color:var(--amber); box-shadow:0 0 0 4px var(--amber-mist); }
::placeholder { color:var(--ink-45); }

/* toggles & sliders (settings) */
.toggle { width:46px; height:27px; border-radius:999px; background:var(--ink-12); position:relative; flex:none; border:none; cursor:pointer; padding:0; display:inline-block; transition:background .18s ease-out; }
.toggle.on { background:var(--ink); }
.toggle::after { content:''; position:absolute; top:3.5px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(30,43,69,.25); transition:left .18s ease-out, right .18s ease-out; }
.toggle.on::after { left:auto; right:4px; }
.slider { position:relative; height:6px; border-radius:999px; background:var(--ink-12); }
.slider .fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:var(--amber); }
.slider .knob { position:absolute; top:50%; transform:translate(-50%,-50%); width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--ink); }
/* real range inputs styled like the mockup slider */
input[type=range].hslider { -webkit-appearance:none; appearance:none; width:190px; height:6px; border-radius:999px; outline:none; margin:0; cursor:pointer;
  background:linear-gradient(to right, var(--amber) 0%, var(--amber) var(--p,50%), var(--ink-12) var(--p,50%), var(--ink-12) 100%); }
input[type=range].hslider::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--ink); box-shadow:0 1px 2px rgba(30,43,69,.18); cursor:pointer; }
input[type=range].hslider::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid var(--ink); cursor:pointer; }

/* tables */
table { width:100%; border-collapse:collapse; font-size:14.5px; }
th { font:600 11.5px/1 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-45); text-align:left; padding:12px 14px; border-bottom:1.5px solid var(--ink-12); }
td { padding:13px 14px; border-bottom:1px solid var(--ink-06); vertical-align:middle; }
tr:last-child td { border-bottom:none; }

/* footer */
footer { position:relative; z-index:1; max-width:1060px; margin:64px auto 0; padding:26px 32px 36px; border-top:1.5px solid var(--ink-12); color:var(--ink-45); font-size:13.5px; display:flex; justify-content:space-between; gap:24px; }
footer .phrase { font-style:italic; color:var(--ink-70); }
.ico { width:18px; height:18px; vertical-align:-3.5px; }
.ext { width:13px; height:13px; opacity:.55; vertical-align:-1px; margin-left:3px; }
a { color:var(--ink); }
a.tlink { color:inherit; text-decoration:none; border-bottom:1.5px dotted var(--ink-45); cursor:pointer; }
a.rowlink { text-decoration:none; color:var(--ink-70); border-bottom:1.5px dotted var(--ink-45); padding-bottom:1px; }

/* focus — amber rings everywhere */
:focus-visible { outline:2.5px solid var(--amber); outline-offset:2px; }
textarea:focus-visible, input[type=text]:focus-visible { outline:none; }

/* ============ global chrome additions ============ */
@keyframes hpulse { 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.pulse-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--amber); margin-left:8px; vertical-align:0; animation:hpulse 1.8s ease-in-out infinite; }
.degband { position:relative; z-index:1; max-width:996px; margin:12px auto 0; padding:11px 18px; background:var(--amber-mist); border:1.5px solid rgba(232,161,60,.45); border-radius:13px; font-size:14px; color:var(--ink-70); display:flex; gap:11px; align-items:flex-start; }
.degband img { width:17px; height:17px; margin-top:3px; flex:none; }
.toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(8px); background:var(--ink); color:var(--cream); font:500 13px/1 'IBM Plex Mono'; border-radius:999px; padding:11px 19px; opacity:0; pointer-events:none; transition:opacity .18s ease-out, transform .18s ease-out; z-index:80; white-space:nowrap; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ============ classify / landing (01) ============ */
.hero { text-align:center; padding:74px 0 0; }
.hero .sub { margin-top:8px; }
.ask { max-width:760px; margin:36px auto 0; padding:26px; }
.ask textarea { height:108px; font-size:18px; }
.ask .row { display:flex; align-items:center; gap:14px; margin-top:16px; }
.ask .hint { font-size:13px; color:var(--ink-45); margin-right:auto; text-align:left; }
.trust-strip { display:flex; justify-content:center; gap:18px; margin-top:42px; }
.tstat { display:flex; flex-direction:column; gap:5px; background:transparent; padding:14px 22px; border-radius:16px; text-decoration:none; transition:background .18s ease-out; }
.tstat:hover { background:var(--ink-06); }
.tstat .v { font:600 26px/1 'IBM Plex Mono'; color:var(--ink); }
.tstat .k { font-size:13px; color:var(--ink-70); }
.tstat .k img { width:12px; height:12px; opacity:.5; margin-left:2px; vertical-align:-1px; }
.preline { text-align:center; font-size:13.5px; color:var(--ink-45); margin:10px 0 0; }
.phrase-line { text-align:center; margin-top:38px; font-style:italic; color:var(--ink-70); font-size:16.5px; }
.phrase-line em { font-style:italic; box-shadow:inset 0 -10px 0 -3px var(--amber-soft); }
.triad { display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; max-width:880px; margin:72px auto 0; }
.beat { padding:24px 26px; }
.beat h3 { font:500 19px/1.3 'Fredoka'; margin:12px 0 4px; }
.beat p { margin:0; font-size:14.5px; color:var(--ink-70); }
.beat img { width:30px; height:30px; }
.askerr { max-width:760px; margin:18px auto 0; padding:14px 20px; font-size:14.5px; color:var(--ink-70); display:flex; gap:11px; align-items:flex-start; text-align:left; }
.askerr img { width:17px; height:17px; margin-top:4px; flex:none; }

/* ============ result (02) — shared renderer, also used in catalog slide-over ============ */
.pg-classify .wrap { max-width:820px; margin:0 auto; }
.asked { display:flex; align-items:center; gap:12px; margin:42px 0 0; }
.asked .q { background:var(--paper); border:1.5px solid var(--ink-12); border-radius:999px; padding:10px 18px; font-size:15px; color:var(--ink-70); }
.asked .q b { color:var(--ink); font-weight:700; }
.asked a { font-size:13.5px; color:var(--ink-45); }
.clarify { display:flex; align-items:flex-start; gap:12px; margin:18px 0 0; padding:16px 20px; }
.clarify img { width:20px; height:20px; margin-top:2px; }
.clarify .t { font-size:14.5px; color:var(--ink-70); }
.clarify .t b { color:var(--ink); }
.clarify .ans { margin-left:auto; flex:none; }

.result { margin-top:22px; padding:34px 38px 28px; }
.code-row { display:flex; align-items:flex-start; gap:18px; }
.code { font:600 54px/1 'IBM Plex Mono'; letter-spacing:.015em; }
.code .suff { color:var(--amber-deep); }
.code-row .meta { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.duty { font:500 16px 'IBM Plex Mono'; background:var(--ink-06); border-radius:10px; padding:7px 12px; }
.copybtn { display:inline-flex; align-items:center; gap:7px; font:600 13.5px 'Nunito Sans'; color:var(--ink-70); background:none; border:1.5px solid var(--ink-12); border-radius:10px; padding:7px 12px; cursor:pointer; transition:background .18s ease-out, border-color .18s ease-out; }
.copybtn:hover { background:var(--ink-06); }
.copybtn img { width:15px; height:15px; }
.descline { margin:10px 0 0; color:var(--ink-70); font-size:15.5px; }
.brokerline { display:flex; gap:9px; align-items:flex-start; margin:12px 0 0; font-size:14.5px; color:var(--ink-70); max-width:560px; }
.brokerline img { width:16px; height:16px; margin-top:4px; flex:none; }
.brokerline b { color:var(--ink); }

.tree { margin:26px 0 0; border-top:1.5px solid var(--ink-12); padding-top:8px; list-style:none; }
ul.tree { padding-left:0; margin-bottom:0; }
.tree .lvl { display:flex; gap:14px; padding:13px 4px; border-bottom:1px solid var(--ink-06); align-items:baseline; }
.tree .lvl:last-child { border-bottom:none; }
.tree .stage { font:600 10.5px/1 'IBM Plex Mono'; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-45); width:92px; flex:none; padding-top:4px; }
.tree .c { font:500 16px 'IBM Plex Mono'; width:120px; flex:none; }
.tree .why { font-size:14.5px; color:var(--ink-70); }
.tree .why b { color:var(--ink); font-weight:700; }
.tree .off { display:block; font-size:13px; color:var(--ink-45); font-style:italic; }
.tree .lvl.assume .why { font-style:italic; color:var(--ink-45); }

.memory { display:flex; gap:14px; margin:24px 0 0; padding:18px 22px; align-items:flex-start; }
.memory img.i { width:21px; height:21px; margin-top:2px; }
.memory .t { font-size:15px; }
.memory .t a { color:var(--ink); font-weight:700; }
.memory .t .links { display:block; margin-top:6px; font:500 12.5px 'IBM Plex Mono'; color:var(--ink-70); }
.memory .t .links a { font-weight:500; text-decoration:none; border-bottom:1.5px dotted var(--ink-45); margin-right:14px; }

.rulings { margin-top:26px; }
.rulings h3 { display:flex; align-items:center; gap:9px; }
.rulings h3 img { width:18px; height:18px; }
.rcards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
.rcard { padding:16px 18px; }
.rcard .rn { display:flex; align-items:baseline; gap:10px; }
.rcard .rn .id { font:600 15px 'IBM Plex Mono'; }
.rcard .rn .d { font:400 12.5px 'IBM Plex Mono'; color:var(--ink-45); }
.rcard p { margin:7px 0 0; font-size:13.5px; color:var(--ink-70); }
.rcard a { font:600 12.5px 'Nunito Sans'; color:var(--ink); }

.tracebar { display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:18px; border-top:1.5px solid var(--ink-12); font-size:14px; color:var(--ink-70); }
.tracebar img { width:17px; height:17px; vertical-align:-3px; }
.tracebar .lat { font:500 13px 'IBM Plex Mono'; color:var(--ink-45); white-space:nowrap; }
.tracebar .wrong { margin-left:auto; font-size:13.5px; color:var(--ink-45); white-space:nowrap; }
.tracebar .wrong a { color:var(--ink-70); }
.wrongform { display:flex; gap:10px; margin-top:16px; align-items:center; flex-wrap:wrap; }
.wrongform input[type=text] { flex:1; min-width:160px; font-size:14px; padding:9px 13px; border-radius:10px; }
.wrongform input.codein { font:500 14px 'IBM Plex Mono'; max-width:200px; flex:none; }
.wrongform .thanks { font-size:14px; color:var(--ink-70); }

/* working steps — same row geometry the tree will use */
.steps { margin-top:22px; padding:24px 30px; }
.steplist { list-style:none; margin:0; padding:0; }
.steps .steprow { display:flex; gap:14px; padding:12px 4px; border-bottom:1px solid var(--ink-06); align-items:center; }
.steps .steprow:last-child { border-bottom:none; }
.steps .steprow .dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--amber); animation:hpulse 1.4s ease-in-out infinite; }
.steps .steprow.done .dot { animation:none; opacity:.4; }
.steps .steprow .lbl { font:500 13.5px 'IBM Plex Mono'; color:var(--ink-70); }
.steps .retrynote { font-size:13px; color:var(--ink-45); font-style:italic; margin:10px 4px 0; }

/* interactive clarify */
.clarify-ask { display:block; margin:18px 0 0; padding:20px 24px; }
.clarify-ask .qline { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-70); }
.clarify-ask .qline img { width:20px; height:20px; margin-top:2px; flex:none; }
.clarify-ask .qline b { color:var(--ink); }
.clarify-ask .opts { display:flex; gap:10px; margin:14px 0 0 32px; flex-wrap:wrap; align-items:center; }
.optchip { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:8px 16px; font:700 13.5px 'Nunito Sans'; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink-12); cursor:pointer; transition:border-color .18s ease-out, background .18s ease-out; }
.optchip:hover { border-color:var(--amber); background:var(--amber-mist); }
.clarify-ask input[type=text] { flex:1; min-width:200px; max-width:300px; font-size:14px; padding:8px 14px; border-radius:999px; }
.clarify-ask .skip { margin:12px 0 0 32px; display:inline-block; font-size:13.5px; color:var(--ink-45); background:none; border:none; cursor:pointer; font-family:'Nunito Sans'; border-bottom:1.5px dotted var(--ink-45); padding:0 0 1px; }
.clarify-ask .skip:hover { color:var(--ink-70); }

/* ============ catalog (03) ============ */
.pg-catalog .head { display:flex; align-items:flex-end; gap:20px; margin:46px 0 0; }
.pg-catalog .head .sub { margin:0; }
.pg-catalog .head .actions { margin-left:auto; display:flex; gap:12px; align-items:center; }
.dropzone { margin-top:26px; border:2px dashed var(--ink-12); border-radius:20px; background:var(--paper); padding:52px 30px 46px; text-align:center; cursor:pointer; transition:border-color .18s ease-out, background .18s ease-out; }
.dropzone.over { border-color:var(--amber); background:var(--amber-mist); }
.dropzone img.art { width:170px; }
.dropzone .big { font:500 21px/1.3 'Fredoka'; margin-top:16px; }
.dropzone .capnote { font-size:13.5px; color:var(--ink-45); margin-top:5px; }
.caterr { margin-top:16px; padding:13px 18px; font-size:14.5px; color:var(--ink-70); display:flex; gap:11px; align-items:flex-start; }
.caterr img { width:16px; height:16px; margin-top:4px; flex:none; }
.srcchip { display:flex; align-items:center; gap:10px; margin-top:20px; font-size:14px; color:var(--ink-70); position:relative; }
.srcchip .f { background:var(--paper); border:1.5px solid var(--ink-12); border-radius:10px; padding:8px 13px; font:500 13.5px 'IBM Plex Mono'; color:var(--ink); }
.srcchip .startbtn { margin-left:auto; }
.truncline { margin-top:12px; font-size:13.5px; color:var(--ink-70); }
.colpicker { position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:400px; padding:12px; }
.colpicker .col { padding:10px 13px; border-radius:11px; cursor:pointer; transition:background .18s ease-out; }
.colpicker .col:hover { background:var(--ink-06); }
.colpicker .col .cn { font:600 13.5px 'IBM Plex Mono'; }
.colpicker .col .cn .you { font:600 10.5px 'IBM Plex Mono'; color:var(--amber-deep); margin-left:8px; letter-spacing:.06em; }
.colpicker .col .cs { font-size:12.5px; color:var(--ink-45); margin-top:1px; }
.colpicker .pnote { font-size:12px; color:var(--ink-45); margin:8px 5px 2px; }
.summary { display:flex; gap:14px; margin-top:22px; }
.sumcard { flex:1; padding:16px 20px; display:flex; flex-direction:column; gap:3px; }
.sumcard .v { font:600 24px/1.1 'IBM Plex Mono'; }
.sumcard .v .dim { color:var(--ink-45); font-size:15px; }
.sumcard .k { font-size:13px; color:var(--ink-70); }
.tablecard { margin-top:22px; overflow:visible; }
.tablecard table { border-radius:var(--r-card); overflow:hidden; }
td .code { font:500 14.5px 'IBM Plex Mono'; }
td .code i { color:var(--amber-deep); font-style:normal; }
td .duty { font:400 13px 'IBM Plex Mono'; color:var(--ink-70); background:none; border-radius:0; padding:0; }
.conf { font-weight:700; font-size:12.5px; padding:4px 11px; }
.rowlink img { width:15px; height:15px; opacity:.6; }
.prod { max-width:240px; }
.prod .p1 { font-weight:700; font-size:14px; line-height:1.35; }
.prod .p2 { font-size:12.5px; color:var(--ink-45); line-height:1.35; }
.flagcell { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-70); }
.flagcell img { width:14px; height:14px; }
.working td { background:var(--amber-mist); }
.dotty { display:inline-flex; gap:4px; align-items:center; }
.dotty i { width:6px; height:6px; border-radius:50%; background:var(--amber); display:inline-block; animation:hpulse 1.4s ease-in-out infinite; }
.dotty i:nth-child(2) { opacity:.6 } .dotty i:nth-child(3) { opacity:.3 }
.queued td { color:var(--ink-45); }
tr.rowdone { cursor:pointer; }
tr.rowdone:hover td { background:var(--ink-06); }
.retrylink { font-size:13px; color:var(--ink-70); background:none; border:none; cursor:pointer; font-family:'Nunito Sans'; font-weight:700; border-bottom:1.5px dotted var(--ink-45); padding:0 0 1px; }
.tfoot { display:flex; align-items:center; gap:16px; padding:15px 18px; border-top:1.5px solid var(--ink-12); font-size:13.5px; color:var(--ink-45); }
.tfoot .right { margin-left:auto; display:flex; gap:10px; }

/* slide-over (catalog row → full result card) */
.shade { position:fixed; inset:0; background:rgba(30,43,69,.22); z-index:40; opacity:0; transition:opacity .2s ease-out; }
.shade.open { opacity:1; }
.panel { position:fixed; top:0; right:0; bottom:0; width:680px; max-width:94vw; background:var(--cream); border-left:1.5px solid var(--ink-12); box-shadow:-14px 0 44px rgba(30,43,69,.14); z-index:50; overflow-y:auto; padding:24px 30px 44px; transform:translateX(26px); opacity:0; transition:transform .2s ease-out, opacity .2s ease-out; }
.panel.open { transform:none; opacity:1; }
.panel .closex { position:sticky; top:0; float:right; background:var(--paper); border:1.5px solid var(--ink-12); border-radius:11px; padding:7px; cursor:pointer; display:inline-flex; z-index:2; transition:background .18s ease-out; }
.panel .closex:hover { background:var(--ink-06); }
.panel .closex img { width:15px; height:15px; }
.panel .asked { margin-top:6px; }
.panel .result { padding:28px 30px 24px; }
.panel .rcards { grid-template-columns:1fr; }

/* ============ report card (04) ============ */
.pg-report .head { text-align:center; margin:46px 0 0; }
.statrow { display:flex; gap:14px; margin-top:30px; }
.stat { flex:1; padding:18px 22px; display:flex; flex-direction:column; gap:4px; }
.stat .v { font:600 30px/1.1 'IBM Plex Mono'; }
.stat .v .up { color:var(--amber-deep); font-size:16px; font-weight:500; }
.stat .k { font-size:13.5px; color:var(--ink-70); }
.stat .k a { color:inherit; }
.chartcard { margin-top:22px; padding:26px 30px; }
.chartcard .top { display:flex; align-items:baseline; }
.legend { margin-left:auto; display:flex; gap:18px; font:500 12.5px 'IBM Plex Mono'; color:var(--ink-70); }
.legend i { display:inline-block; width:18px; height:4px; border-radius:2px; vertical-align:3px; margin-right:6px; }
.chartnote { font-size:13px; color:var(--ink-45); margin-top:10px; }
.emptyrounds { text-align:center; padding:30px 0 22px; }
.emptyrounds img { width:170px; }
.emptyrounds p { color:var(--ink-70); font-size:15px; margin:16px 0 0; }
.emptyline { color:var(--ink-45); font-size:14px; margin-top:16px; }
.fams { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:26px; }
.fam { padding:20px 22px; }
.fam .name { font:700 15px/1.35 'Nunito Sans'; min-height:42px; }
.fam .codes { font:500 12.5px 'IBM Plex Mono'; color:var(--ink-45); margin-top:2px; }
.fam .delta { display:flex; align-items:baseline; gap:8px; margin-top:12px; }
.fam .delta .ba { font:600 17px 'IBM Plex Mono'; }
.fam .delta .ba .dim { color:var(--ink-45); font-weight:400; }
.fam .links { margin-top:12px; font-size:12.5px; }
.fam .links a { color:var(--ink-70); text-decoration:none; border-bottom:1.5px dotted var(--ink-45); margin-right:12px; }
.fam .chipline { margin-top:12px; }
.famchip { font-size:11.5px; padding:4px 11px; }
.showall { text-align:center; margin-top:16px; }
.sec { margin-top:34px; }
.sec h2 { display:flex; align-items:center; gap:10px; }
.sec h2 img { width:21px; height:21px; }
.roundtable td, .roundtable th { padding:11px 12px; }
.roundtable th, .roundtable td.num { white-space:nowrap; }
.roundtable a.ra { text-decoration:none; color:inherit; border-bottom:1.5px dotted transparent; transition:border-color .18s ease-out; }
.roundtable a.ra:hover { border-bottom-color:var(--ink-45); }
.gate-promoted { color:var(--ink); font-weight:700; }
.gate-held { color:var(--ink-45); font-weight:600; }
.gate-promoted .num, .gate-held .num { font-size:12.5px; }
.timeline { display:flex; align-items:flex-start; gap:0; margin-top:14px; padding:24px 26px 18px; overflow:hidden; }
.tl-step { flex:1; position:relative; text-align:center; }
.tl-step .dot { width:30px; height:30px; border-radius:50%; margin:0 auto; display:flex; align-items:center; justify-content:center; font:600 11.5px 'IBM Plex Mono'; background:var(--amber); color:var(--ink); position:relative; z-index:1; }
.tl-step.held .dot { background:var(--paper); border:2px dashed var(--ink-45); color:var(--ink-45); }
.tl-step::before { content:''; position:absolute; top:14px; left:-50%; width:100%; height:2.5px; background:var(--ink-12); }
.tl-step:first-child::before { display:none; }
.tl-step .lbl { font-size:11.5px; color:var(--ink-70); margin-top:9px; line-height:1.45; }
.tl-step .lbl b { display:block; color:var(--ink); }
.improve { display:flex; gap:26px; align-items:center; margin-top:14px; padding:26px 30px; }
.improve .copy { flex:1; }
.improve .copy p { margin:4px 0 0; color:var(--ink-70); font-size:14.5px; }
.stages { display:flex; gap:8px; margin-top:14px; }
.stages .stage { font:600 12px 'IBM Plex Mono'; border:1.5px solid var(--ink-12); border-radius:999px; padding:6px 13px; color:var(--ink-70); background:var(--paper); transition:background .18s ease-out, border-color .18s ease-out; }
.stages .arr { color:var(--ink-45); align-self:center; font-size:12px; }
@keyframes stagepulse { 0%,100%{ box-shadow:0 0 0 0 rgba(232,161,60,0); } 50%{ box-shadow:0 0 0 5px var(--amber-soft); } }
.stages .stage.running { border-color:var(--amber); color:var(--ink); animation:stagepulse 1.5s ease-in-out infinite; }
.stages .stage.done { background:var(--amber); border-color:var(--amber); color:var(--ink); }
.stagelinks { margin-top:11px; font:500 12.5px 'IBM Plex Mono'; color:var(--ink-70); min-height:0; }
.stagelinks a { color:var(--ink-70); text-decoration:none; border-bottom:1.5px dotted var(--ink-45); margin-right:14px; }
.verdictline { margin-top:10px; font:600 13.5px 'IBM Plex Mono'; color:var(--ink); }
.gloss { margin-top:14px; padding:22px 26px; }
.gloss table { font-size:14px; }
.gloss .num { font-size:13px; }
.grid2 { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; }

/* ============ settings (05) ============ */
.pg-settings .wrap { max-width:780px; margin:0 auto; }
.pg-settings .head { margin:46px 0 6px; }
.setcard { margin-top:22px; padding:6px 26px; }
.setcard h2 { display:flex; align-items:center; gap:10px; font-size:21px; padding:20px 0 4px; }
.setcard h2 img { width:20px; height:20px; }
.setcard .secdesc { font-size:13.5px; color:var(--ink-45); margin:0 0 6px; }
.setrow { display:flex; align-items:center; gap:18px; padding:17px 0; border-top:1px solid var(--ink-06); }
.setrow .lab { flex:1; }
.setrow .lab b { display:block; font-size:15px; }
.setrow .lab span { font-size:13px; color:var(--ink-45); line-height:1.45; display:block; max-width:430px; }
.setrow .ctl { flex:none; display:flex; align-items:center; gap:12px; }
select, .selectish { font:600 14px 'Nunito Sans'; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink-12); border-radius:11px; padding:9px 13px; }
select.selectish { -webkit-appearance:none; appearance:none; padding-right:36px; background-image:url('../art/icons/chevron-down.svg'); background-repeat:no-repeat; background-position:right 12px center; background-size:13px; cursor:pointer; }
.selectish img { width:13px; height:13px; vertical-align:-2px; margin-left:7px; opacity:.6 }
.mono-readout { font:600 14px 'IBM Plex Mono'; background:var(--ink-06); border-radius:9px; padding:7px 11px; min-width:54px; text-align:center; }
.sliderwrap { width:190px; display:flex; align-items:center; }
.statusdot { width:9px; height:9px; border-radius:50%; background:var(--amber); display:inline-block; margin-right:7px; }
.statusdot.dim { background:var(--ink-12); }
.kv { font:500 13px 'IBM Plex Mono'; color:var(--ink-70); }
.linkrow { display:flex; gap:10px; flex-wrap:wrap; }
.linkrow a { display:inline-flex; align-items:center; gap:7px; font:600 13px 'Nunito Sans'; color:var(--ink); text-decoration:none; border:1.5px solid var(--ink-12); background:var(--paper); border-radius:999px; padding:8px 15px; transition:background .18s ease-out, border-color .18s ease-out; }
.linkrow a:hover { background:var(--ink-06); }
.linkrow a img { width:13px; height:13px; opacity:.6 }
.gatebox { font:500 13.5px/1.7 'IBM Plex Mono'; background:var(--ink-06); border-radius:12px; padding:14px 18px; color:var(--ink); }
.gatebox b { color:var(--amber-deep); font-weight:600; }
.gatebox input.gnum { width:56px; font:600 13px 'IBM Plex Mono'; color:var(--amber-deep); background:#fff; border:1.5px solid var(--ink-12); border-radius:7px; padding:2px 5px; text-align:center; outline:none; }
.gatebox input.gnum:focus { border-color:var(--amber); }
.danger { border:1.8px solid var(--ink); background:transparent; color:var(--ink); }
.danger:hover { background:var(--ink-06); }
.note { font-size:12.5px; color:var(--ink-45); }
.pinnote { font-size:12px; color:var(--ink-45); margin-top:6px; text-align:right; }
.confirmrow { display:flex; gap:10px; align-items:center; }
.confirmrow .q { font-size:13.5px; color:var(--ink-70); }

/* small screens — single column, calm */
@media (max-width: 760px) {
  .triad, .fams, .grid2, .rcards { grid-template-columns:1fr; }
  .statrow, .summary { flex-direction:column; }
  .code { font-size:38px; }
  .code-row { flex-direction:column; }
  .code-row .meta { margin-left:0; align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
  nav { gap:18px; flex-wrap:wrap; }
  .trust-strip { flex-wrap:wrap; }
  .improve { flex-direction:column; align-items:flex-start; }
}