/* Shared site shell — consumed by every page (generated pages inline it via
   build.py; the platform docs page links it). Tokens come from brand/theme.css. */

.site-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;
  padding:10px 28px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);font-family:var(--sans)}
.site-topbar img{height:24px;display:block;color:var(--ink)}
.site-topbar nav{display:flex;gap:4px;margin-left:auto}
.site-topbar nav a{padding:7px 14px;border-radius:10px;font-size:13.5px;font-weight:600;
  color:var(--slate);text-decoration:none}
.site-topbar nav a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
.site-topbar nav a.on{background:var(--accent-soft);color:var(--accent)}

.site-hero{background:var(--grad-accent);color:#fff;padding:44px 28px 52px;font-family:var(--sans)}
.site-hero .wrap{max-width:1080px;margin:0 auto}
.site-hero h1{margin:0 0 8px;font-size:28px;font-weight:800;letter-spacing:-.02em}
.site-hero .sub{opacity:.88;font-size:15px;max-width:70ch}
.site-hero .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;
  border-radius:999px;font-size:13px;font-weight:700;background:rgba(255,255,255,.16);
  margin-left:10px;vertical-align:4px}

.site-main{max-width:1080px;margin:0 auto;padding:0 24px 72px;font-family:var(--sans)}
.site-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:-30px}
.site-cards.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:20px}
a.scard{display:block;color:inherit;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
a.scard:hover{transform:translateY(-2px)}
.scard h3{margin:0 0 6px;font-size:16px;letter-spacing:-.01em}
.scard .muted{color:var(--slate);font-size:13.5px}
.kpi .v{font-size:32px;font-weight:800;letter-spacing:-.02em}
.kpi .l{font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);margin-top:2px}
.kpi .s{font-size:12.5px;color:var(--faint);margin-top:6px}
.kpi.good .v{color:var(--good)} .kpi.warn .v{color:var(--warn)} .kpi.bad .v{color:var(--bad)}
.bar{height:6px;border-radius:99px;background:#eef1f7;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.kpi.good .bar i{background:var(--good)} .kpi.warn .bar i{background:var(--warn)} .kpi.bad .bar i{background:var(--bad)}

.site-main h2{margin:44px 0 14px;font-size:18px;font-weight:750;letter-spacing:-.01em}
.site-main h2 .note{font-size:13px;font-weight:450;color:var(--slate);margin-left:8px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.panel table{width:100%;border-collapse:collapse}
.panel th{text-align:left;font-size:11.5px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;
  color:var(--slate);padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfe}
.panel td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}
.panel tr:last-child td{border-bottom:0}
.panel td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.chip{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:8px;margin:1px 2px}
.chip.miss{background:#fef2f2;color:var(--bad)} .chip.extra{background:#fffbeb;color:var(--warn)}
.chip.chg{background:var(--accent-soft);color:var(--accent)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;
  font-size:12px;font-weight:700}
.badge.ok{background:#ecfdf5;color:var(--good)} .badge.bad{background:#fef2f2;color:var(--bad)}
.stage{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:8px;
  background:#ecfdf5;color:var(--good);margin:1px}
.stage.failed{background:#fef2f2;color:var(--bad)} .stage.skipped{background:#f1f5f9;color:var(--slate)}
.check{display:flex;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:flex-start}
.check:last-child{border-bottom:0}
.check .ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;flex:none}
.check.ok .ico{background:#ecfdf5;color:var(--good)} .check.bad .ico{background:#fef2f2;color:var(--bad)}
.muted{color:var(--slate);font-size:12.5px}
.err{color:var(--bad);font-size:12.5px;margin-top:4px}
.crumbs{font-size:13px;color:var(--slate);margin:18px 0 0}
.crumbs a{color:var(--slate)}
.site-footer{max-width:1080px;margin:40px auto 0;padding:0 24px;color:var(--faint);font-size:12.5px;font-family:var(--sans)}