/* Grading calculator (page-specific). Builds on /assets/pages.css. */
.article.gc-page { max-width:60rem; }
.gc { margin:28px 0 8px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); padding:16px; display:grid; gap:20px; }
@media (min-width:860px) { .gc { padding:20px; grid-template-columns:1.1fr 1fr; align-items:start; } .gc-result { position:sticky; top:16px; } }
.gc fieldset { border:0; margin:0 0 18px; padding:0; min-width:0; }
.gc legend { font:600 15px var(--sans); color:var(--text); padding:0; display:flex; align-items:center; gap:8px; }
.gc legend span { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); font:500 11px var(--mono); color:var(--muted); }
.gc-help { font-size:13px; color:var(--muted); margin:6px 0 10px; }
.gc-grid { display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.gc-grid.three { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.gc-grid.four { grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); }
.gc label { display:flex; flex-direction:column; gap:5px; font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); min-width:0; }
.gc label[hidden] { display:none; }
.gc input, .gc select { font:500 15px var(--sans); color:var(--text); background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:9px 10px; width:100%; min-width:0; letter-spacing:0; text-transform:none; }
.gc input:focus-visible, .gc select:focus-visible, .gc-btn:focus-visible { outline:2px solid var(--inner); outline-offset:1px; }
.gc-num, .gc-money { position:relative; display:flex; align-items:center; }
.gc-num em { position:absolute; right:10px; font:500 14px var(--mono); font-style:normal; color:var(--muted); pointer-events:none; letter-spacing:0; }
.gc-num input { padding-right:42px; }
.gc-money b { position:absolute; left:10px; font:500 15px var(--sans); color:var(--muted); pointer-events:none; }
.gc-money input { padding-left:22px; }
.gc-lookup { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.gc-lookup select { flex:1 1 170px; }
.gc-ac { flex:3 1 240px; position:relative; min-width:0; display:flex; }
.gc-ac ul { position:absolute; z-index:20; top:calc(100% + 4px); left:0; right:0; margin:0; padding:4px; list-style:none; background:var(--surface); border:1px solid var(--line-2); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.45); max-height:360px; overflow-y:auto; overflow-x:hidden; }
.gc-ac li { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:7px; cursor:pointer; min-width:0; }
.gc-ac li[aria-selected="true"], .gc-ac li:hover { background:var(--bg); }
.gc-ac li span { flex:1; min-width:0; }
.gc-ac li img { width:34px; height:47px; object-fit:cover; border-radius:3px; flex:none; background:var(--bg); }
.gc-ac li b { display:block; font:600 14px var(--sans); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-ac li small { display:block; font:500 12px var(--sans); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-ac li.gc-empty { cursor:default; color:var(--muted); font-size:13px; }
.gc-lookup .gc-ac input { flex:1 1 auto;font:500 15px var(--sans); color:var(--text); background:var(--bg); border:1px solid var(--line-2); border-radius:8px; padding:9px 10px; min-width:0; }
.gc-btn { font:600 13px var(--sans); color:var(--text); border:1px solid var(--line-2); border-radius:8px; padding:9px 12px; text-decoration:none; white-space:nowrap; }
.gc-btn:hover { border-color:var(--muted); color:var(--text); }
.gc-result { display:grid; gap:14px; min-width:0; }
.gc-verdict { border:1px solid var(--line-2); border-left:4px solid var(--muted); border-radius:10px; padding:14px 16px; background:var(--bg); }
.gc-verdict[data-v="worth"] { border-left-color:var(--pass); }
.gc-verdict[data-v="borderline"] { border-left-color:var(--inner); }
.gc-verdict[data-v="keep"] { border-left-color:var(--outer); }
.gc-verdict strong { display:block; font-size:24px; color:var(--text); margin:2px 0 4px; }
.gc-verdict span { font-size:14px; color:var(--soft); }
.gc-stats { display:grid; gap:10px; grid-template-columns:repeat(2, minmax(0, 1fr)); }
.gc-stats > div { border:1px solid var(--line); border-radius:10px; padding:12px; }
.gc-stats strong { display:block; font:600 20px var(--mono); color:var(--text); margin:2px 0; }
.gc-stats span { font-size:12.5px; color:var(--muted); }
.gc .table-wrap { margin:0; }
.gc-table td, .gc-table th { white-space:nowrap; }
.gc-table td:not(:first-child) { font-family:var(--mono); }
.gc-table tr.dim td { color:var(--faint); }
.gc .up { color:var(--pass); }
.gc .down { color:var(--outer); }
.gc-warn { margin:0; font-size:13.5px; color:var(--text); border:1px solid var(--inner); border-radius:8px; padding:10px 12px; }
.gc-note { font-size:12.5px; color:var(--muted); margin:0; }
@media (max-width:520px) { .gc { padding:12px; } .gc-table th, .gc-table td { padding:10px 7px; font-size:13.5px; } }
.gc-steps { display:grid; gap:10px; margin:16px 0 8px; }
@media (min-width:720px) { .gc-steps { grid-template-columns:repeat(3,1fr); } }
.gc-steps > div { border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--surface); }
.gc-steps b { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1px solid var(--inner); color:var(--inner); font:600 12px var(--mono); margin-bottom:8px; }
.gc-steps strong { display:block; color:var(--text); font-size:15px; }
.gc-steps span { display:block; color:var(--muted); font-size:14px; margin-top:2px; }
.gc-key { list-style:none; padding:0; display:grid; gap:8px; }
.gc-key li { display:flex; gap:10px; align-items:baseline; color:var(--soft); font-size:15px; }
.gc-key strong { color:var(--text); margin-right:6px; white-space:nowrap; }
.gc-key i { flex:none; width:10px; height:10px; border-radius:50%; transform:translateY(1px); }
.gc-key .k-worth { background:var(--pass); } .gc-key .k-border { background:var(--inner); } .gc-key .k-keep { background:var(--outer); }

/* 2026-11-06 redesign: verdict stamp, profit bars, wider tool box */
.rx .gc { border-radius:24px; padding:20px; margin:0; }
@media (min-width:860px) { .rx .gc { padding:28px; gap:32px; } }
.rx .gc legend span { background:var(--accent); border-color:var(--accent); color:var(--on-text); font-weight:700; width:26px; height:26px; }
.gc-example { display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:10px 12px; margin-bottom:18px; font-size:13.5px; color:var(--soft); }
.gc-example img { width:38px; height:auto; border-radius:4px; flex:none; }
.gc-example a { color:var(--accent-2); }
.gc-verdict { position:relative; border:0; border-radius:20px; padding:20px; background:var(--bg); text-align:center; overflow:hidden; }
.gc-verdict .eyebrow { margin:0 0 10px; }
.gc-verdict strong { display:inline-block; font:900 clamp(24px,3vw,30px)/1 var(--sans); letter-spacing:.04em; text-transform:uppercase; padding:12px 18px; border:4px solid currentColor; border-radius:12px; transform:rotate(-3deg); margin:4px 0 14px; color:var(--muted); }
.gc-verdict[data-v="worth"] { background:linear-gradient(160deg,rgba(61,220,151,.16),var(--bg) 70%); }
.gc-verdict[data-v="worth"] strong { color:var(--pass); }
.gc-verdict[data-v="borderline"] { background:linear-gradient(160deg,rgba(244,183,64,.16),var(--bg) 70%); }
.gc-verdict[data-v="borderline"] strong { color:var(--warn,#f4b740); }
.gc-verdict[data-v="keep"] { background:linear-gradient(160deg,rgba(255,107,90,.16),var(--bg) 70%); }
.gc-verdict[data-v="keep"] strong { color:var(--bad,#ff6b5a); }
.gc-verdict span { display:block; }
.gc .down { color:var(--bad,#ff6b5a); }
.gc-bars { display:grid; gap:10px; background:var(--bg); border-radius:16px; padding:16px; }
.gc-bars h3 { margin:0 0 2px; font:600 12px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.gc-bar { display:grid; grid-template-columns:70px 1fr 88px; grid-template-areas:"g t b" "o t b"; align-items:center; column-gap:12px; }
.gc-bar .g { grid-area:g; font:700 15px var(--sans); color:var(--text); }
.gc-bar .o { grid-area:o; font-size:12px; color:var(--muted); }
.gc-bar .t { grid-area:t; height:14px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.gc-bar .t i { display:block; height:100%; border-radius:999px; }
.gc-bar .t i.up { background:var(--pass); } .gc-bar .t i.down { background:var(--bad,#ff6b5a); }
.gc-bar b { grid-area:b; font:700 15px var(--mono); text-align:right; white-space:nowrap; }
.gc-bar.dim { opacity:.45; }
.gc-more > summary { cursor:pointer; font-size:13.5px; color:var(--soft); list-style:none; }
.gc-more > summary::-webkit-details-marker { display:none; }
.gc-more > summary::before { content:"+ "; color:var(--accent); font-weight:700; }
.gc-more[open] > summary::before { content:"– "; }
.gc-more .table-wrap { margin-top:10px; }
@media (max-width:520px) { .gc-bar { grid-template-columns:62px 1fr 78px; column-gap:8px; } .gc-bar .g, .gc-bar b { font-size:14px; } }

/* hero: raw card -> slab illustration */
.gx-stage { position:relative; justify-self:center; width:min(440px,100%); aspect-ratio:1/1; margin:10px 0 20px; }
.gx-raw { position:absolute; left:2%; top:12%; width:44%; border-radius:12px; overflow:hidden; transform:rotate(-8deg); box-shadow:0 30px 60px -24px rgba(0,0,0,.85); }
.gx-raw img, .gx-slab img { display:block; width:100%; height:auto; }
.gx-slab { position:absolute; right:2%; top:2%; width:52%; padding:10px 9px 12px; border-radius:16px; transform:rotate(4deg); background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.1) 40%,rgba(255,255,255,.22)); border:1px solid rgba(255,255,255,.45); box-shadow:0 40px 70px -26px rgba(0,0,0,.9), inset 0 0 0 4px rgba(255,255,255,.06); backdrop-filter:blur(2px); }
.gx-label { display:flex; justify-content:space-between; align-items:center; gap:6px; background:#f5f3ee; color:#1b1b1b; border-radius:6px; padding:6px 8px; margin-bottom:9px; border-top:3px solid var(--red); }
.gx-label small { font:700 8.5px/1.25 var(--sans); letter-spacing:.02em; text-transform:uppercase; }
.gx-label b { font:900 12px/1 var(--sans); text-align:right; white-space:nowrap; }
.gx-label b span { display:block; font-size:22px; color:var(--red); }
.gx-slab .card { border-radius:8px; overflow:hidden; box-shadow:0 0 0 2px rgba(0,0,0,.25); }
.gx-arrow { position:absolute; left:42%; top:48%; z-index:3; width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--on-text); display:grid; place-items:center; font:900 22px var(--sans); box-shadow:0 10px 24px rgba(0,0,0,.5); }
.gx-stage .rx-chip.a { left:-4%; bottom:10%; } .gx-stage .rx-chip.b { right:-2%; bottom:2%; }
.gx-stage .rx-chip strong { font:800 24px var(--mono); letter-spacing:-.03em; }
.gx-stage .rx-chip.b strong { color:var(--pass); }
.gx-ill { position:absolute; right:4%; top:-4%; font:700 10px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
@media (max-width:560px) { .gx-stage { width:92%; } .gx-stage .rx-chip strong { font-size:19px; } .gx-label b span { font-size:17px; } .gx-label small { font-size:7px; } }

/* "how it works" art */
.gx-mini { padding:22px 24px; display:grid; align-content:center; gap:12px; height:100%; box-sizing:border-box; }
.gx-mini div { display:grid; grid-template-columns:56px 1fr; align-items:center; gap:10px; font:700 13px var(--sans); color:var(--soft); }
.gx-mini i { display:block; height:16px; border-radius:999px; }
.gx-path-cards { display:flex; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap; }
.gx-path-cards a { width:min(150px,30%); transition:transform .15s; }
.gx-path-cards a:hover { transform:translateY(-6px) rotate(-1deg); }
.gx-path-cards img { width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 18px 30px -18px rgba(59,42,20,.7); }
@media (max-width:560px) { .gx-path-cards { gap:8px; } .gx-path-cards a { width:30%; } .gx-path-cards a:nth-child(n+4) { display:none; } }
.gx-stamps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.gx-stamps > div { background:#fff; border-radius:22px; padding:26px 20px 22px; text-align:center; box-shadow:0 14px 30px -24px rgba(59,42,20,.6); }
.gx-stamps p { color:var(--brown-2); margin:16px 0 0; font-size:15px; }
@media (max-width:760px) { .gx-stamps { grid-template-columns:1fr; gap:10px; } .gx-stamps > div { display:grid; grid-template-columns:170px 1fr; align-items:center; text-align:left; padding:16px; gap:10px; } .gx-stamps p { margin:0; } }

/* Filled in from the centering / surface tools or Sleeper Alerts (assets/card-flow.js) */
.gc-loaded { display:flex; align-items:center; gap:12px; border:1px solid var(--inner); background:var(--bg); border-radius:14px; padding:10px 14px; margin-bottom:18px; }
.gc-loaded[hidden] { display:none; }
.gc-loaded p { margin:0; flex:1; font-size:13.5px; color:var(--soft); }
.gc-loaded strong { display:block; color:var(--text); font-size:14px; }
.gc-loaded button { flex:none; font:600 13px var(--sans); color:var(--text); background:none; border:1px solid var(--line-2); border-radius:999px; padding:7px 12px; cursor:pointer; }
.gc-need { outline:2px solid var(--inner); outline-offset:1px; }
.gc-grader { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 18px; }
.gc-grader span { font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.gc-grader button { font:600 14px var(--sans); color:var(--soft); background:none; border:1px solid var(--line-2); border-radius:999px; padding:7px 15px; cursor:pointer; }
.gc-grader button:hover { color:var(--text); border-color:var(--muted); }
.gc-grader button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-text); }
.gc-grader button:focus-visible, .gc-vs button:focus-visible { outline:2px solid var(--inner); outline-offset:2px; }
.gc-vs { margin:0; padding:12px 14px; border:1px solid var(--line-2); border-radius:10px; font-size:14px; line-height:1.5; color:var(--soft); }
.gc-vs b, .gc-vs strong { color:var(--text); }
.gc-vs button { font:600 13px var(--sans); color:var(--accent); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }