/* Shared styles for the resource pages: /method/, /check/, /kev/ and /kit/.
   Same tokens and type as the rest of the site. Every link in these pages is root-relative. */
:root{ --ink:#101011; --panel:#17171A; --panel-2:#1C1C20; --line:#282829; --hi:#F2F0EB; --mid:#A9A8A4; --faint:#87867F; --brass:#C9A24B; --brass-soft:#E7C574; --read:#D7D5CF;
       --p1:#CE4A4A; --p2:#E0863C; --p3:#5B8BB0; --p4:#6B7785; --maxw:780px; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--ink); color:var(--read); font-family:"IBM Plex Sans",system-ui,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.wrap.wide{max-width:1080px}

header{position:sticky; top:0; z-index:50; background:rgba(16,16,17,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:62px; max-width:1080px; margin:0 auto; padding:8px 24px}
.brand{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.95rem; display:flex; align-items:center; gap:.2em; text-decoration:none; flex:none}
.brand .mk{width:1.16em; height:1.16em; flex:none; transform:translateY(-.05em)}
.brand b{color:var(--hi); font-weight:600}
.brand span{color:var(--mid)}
.links{display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:flex-end}
.links a{font-size:.85rem; color:var(--mid); text-decoration:none; transition:color .2s}
.links a:hover{color:var(--hi)}
.links a[aria-current="page"]{color:var(--brass)}

main{padding:52px 0 44px}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 14px}
main h1{font-family:"Spectral",Georgia,serif; font-weight:500; line-height:1.14; letter-spacing:-.01em; font-size:clamp(1.9rem,4vw,2.6rem); color:var(--hi); margin:0 0 8px}
main h2{font-family:"Spectral",Georgia,serif; font-weight:500; font-size:1.4rem; color:var(--hi); margin:44px 0 8px; letter-spacing:-.01em; scroll-margin-top:80px}
main h3{font-family:"Spectral",Georgia,serif; font-weight:500; font-size:1.12rem; color:var(--hi); margin:26px 0 6px}
main p{margin:12px 0}
main strong{color:var(--hi); font-weight:600}
main ul, main ol{margin:12px 0; padding-left:22px}
main li{margin:7px 0}
main a{color:var(--brass); text-decoration:none; border-bottom:1px solid rgba(201,162,75,.35)}
main a:hover{border-bottom-color:var(--brass)}
main a:focus-visible, button:focus-visible, textarea:focus-visible, summary:focus-visible{outline:2px solid var(--brass); outline-offset:2px; border-radius:4px}
main code{font-family:"IBM Plex Mono",monospace; font-size:.88em; color:var(--brass-soft); background:var(--panel-2); border-radius:4px; padding:1px 5px}
.meta{font-family:"IBM Plex Mono",monospace; font-size:.76rem; letter-spacing:.02em; color:var(--faint); margin:0 0 26px}
.lede{font-family:"Spectral",Georgia,serif; font-size:1.18rem; color:var(--mid); line-height:1.55; margin:0 0 10px}
.small{font-size:.86rem; color:var(--faint)}

/* Tables */
.tw{overflow-x:auto; margin:16px 0}
main table{width:100%; border-collapse:collapse; font-size:.92rem}
main th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap}
main td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
main td.num, main th.num{text-align:right; font-variant-numeric:tabular-nums}
.mono{font-family:"IBM Plex Mono",monospace; font-size:.86em}

/* Badges and chips */
.pb{display:inline-block; min-width:2.2em; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:.72rem; font-weight:500; color:#fff; border-radius:4px; padding:1px 6px}
.pb.p1{background:var(--p1)} .pb.p2{background:var(--p2)} .pb.p3{background:var(--p3)} .pb.p4{background:var(--p4)}
.chip{display:inline-block; font-size:.76rem; border-radius:999px; padding:2px 9px; border:1px solid var(--line); color:var(--mid); white-space:nowrap}
.chip.hot{border-color:rgba(206,74,74,.6); background:rgba(206,74,74,.14); color:#F0B3B3}
.chip.warm{border-color:rgba(224,134,60,.55); background:rgba(224,134,60,.12); color:#F2C39B}
.chip.cool{border-color:rgba(91,139,176,.5); background:rgba(91,139,176,.12); color:#B5CFE3}
.chip.none{color:var(--faint)}

/* Boxes */
.box{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:22px 0}
.box > :first-child{margin-top:0} .box > :last-child{margin-bottom:0}
.box.brass{border-left:3px solid var(--brass); border-radius:0 12px 12px 0}
.box-label{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin:0 0 8px}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px 0}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px}
.stat b{display:block; font-family:"Spectral",Georgia,serif; font-weight:500; font-size:1.9rem; line-height:1.1; color:var(--hi)}
.stat span{font-size:.82rem; color:var(--mid)}

/* Buttons and inputs */
.btn{display:inline-block; font:600 .88rem "IBM Plex Sans",sans-serif; border:1px solid var(--line); border-radius:8px; padding:9px 15px; color:var(--hi); background:transparent; text-decoration:none; cursor:pointer}
main a.btn{border:1px solid var(--line); color:var(--hi)}
.btn:hover, main a.btn:hover{border-color:var(--brass)}
.btn.primary, main a.btn.primary{background:var(--brass); border-color:var(--brass); color:var(--ink)}
.btn.primary:hover, main a.btn.primary:hover{background:var(--brass-soft)}
.btn[disabled]{opacity:.5; cursor:default}
.btns{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
textarea{width:100%; min-height:150px; background:var(--panel); color:var(--hi); border:1px solid var(--line); border-radius:10px; padding:12px 14px; font:400 .9rem/1.5 "IBM Plex Mono",monospace; resize:vertical}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; vertical-align:middle}
.seg button{font:600 .76rem "IBM Plex Sans",sans-serif; background:transparent; color:var(--mid); border:0; padding:4px 10px; cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--hi)}
.seg button[aria-pressed="true"]{background:var(--brass); color:var(--ink)}

.sf{border-top:1px solid var(--line); padding:30px 24px; color:var(--faint); font-size:.82rem; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center}
.sf-links{display:flex; flex-wrap:wrap; gap:18px; justify-content:center}
.sf-links a{color:var(--mid); text-decoration:none}
.sf-links a:hover{color:var(--brass)}
.sf-meta a{color:var(--brass); text-decoration:none}

@media (max-width:640px){
  .stats{grid-template-columns:1fr 1fr}
  main table{font-size:.84rem} main td, main th{padding:7px 6px}
  .box{padding:16px}
}
@media print{ header, .sf, .no-print{display:none} body{background:#fff; color:#111} main a{color:#111} }

/* Three explanatory boxes (Kit page): side by side on wide screens, stacked on narrow ones. */
.stats.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){ .stats.three{grid-template-columns:1fr} }