/* ===========================================================================
   KBS — Burp licence analysis · Everforest (dark) IDE theme
   Palette: sainnhe/everforest — bg0 #2d353b, fg #d3c6aa, accents below.
   Source of truth: assets/site.css  (copied to site/assets/ by tools/build_site.py)
   =========================================================================== */
:root{
  /* chrome */
  --bg-dim:#232a2e;   --bg0:#2d353b;  --bg1:#343f44;  --bg2:#3d484d;
  --bg3:#475258;      --bg4:#4f585e;  --bg5:#56635f;
  --fg:#d3c6aa;       --fg-dim:#bfb39b;
  --grey0:#7a8478;    --grey1:#859289; --grey2:#a6b0a7;
  /* accents */
  --red:#e67e80;      --orange:#e69875; --yellow:#dbbc7f; --green:#a7c080;
  --aqua:#83c092;     --blue:#7fbbb3;   --purple:#d699b6;
  /* tinted surfaces */
  --bg-red:#514045;   --bg-green:#425047; --bg-blue:#3a515d; --bg-yellow:#4d4c43;

  --line:#3d484d;     --line-strong:#475258;
  --radius:6px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* per-tier accent, overridden by body.tier-* */
  --tier:var(--green); --tier-bg:var(--bg-green); --tier-ink:#232a2e;
}

body.tier-easy  { --tier:var(--green);  --tier-bg:var(--bg-green);  --tier-ink:#232a2e; }
body.tier-medium{ --tier:var(--yellow); --tier-bg:var(--bg-yellow); --tier-ink:#232a2e; }
body.tier-expert{ --tier:var(--red);    --tier-bg:var(--bg-red);    --tier-ink:#232a2e; }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg-dim)}
body{margin:0;background:var(--bg-dim);color:var(--fg);
  font:15px/1.65 var(--ui);-webkit-font-smoothing:antialiased}
::selection{background:var(--bg4);color:#fff}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--aqua)}
.wrap{max-width:1240px;margin:0 auto;padding:0 1.1rem}

/* ---------- top bar (IDE title area) ---------- */
.topbar{background:var(--bg-dim);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;justify-content:center;padding:0 1.1rem;background:transparent}
.brand{display:block;line-height:0;text-decoration:none;width:100%;max-width:100%;flex:1 1 100%}
/* The plate spans the content container, so its left and right edges line up with the
   tier bar, the sidebar and the editor pane at every width. */
.logo{display:block;width:100%;max-width:100%;height:auto;
  max-height:min(299px,34vh);object-fit:contain;object-position:center;
  border-radius:0;background:#000;border:0}
/* window-title strip under the banner */
.titlebar{background:var(--bg-dim);border-bottom:1px solid var(--line)}
.titlebar-in{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding:.3rem 1.1rem .4rem;min-width:0}
.titlebar .doc-title{font:600 12.5px/1.4 var(--mono);color:var(--grey2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.titlebar .doc-sub{font:400 11.5px/1.4 var(--mono);color:var(--grey0);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-align:right}

/* ---------- tab strip (the three detail levels) ---------- */
.tierbar{position:sticky;top:0;z-index:40;background:var(--bg-dim);
  border-bottom:1px solid var(--line)}
.tierbar .wrap{padding:0 1.1rem}
.segmented{display:flex;align-items:stretch;gap:2px;margin-top:.45rem}
.tierbar .seg{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.56rem .7rem;font:600 13px/1.2 var(--mono);letter-spacing:.02em;text-decoration:none;
  color:var(--grey2);background:var(--bg1);border:1px solid var(--line);
  border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;
  position:relative;transition:background .12s ease,color .12s ease;white-space:nowrap}
.tierbar .seg::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:transparent;border-radius:2px 2px 0 0}
.tierbar .seg.easy::before{background:var(--green);opacity:.55}
.tierbar .seg.medium::before{background:var(--yellow);opacity:.55}
.tierbar .seg.expert::before{background:var(--red);opacity:.55}
.tierbar .seg .lvl{font-weight:400;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grey0)}
.tierbar .seg:hover{background:var(--bg2);color:var(--fg)}
.tierbar .seg[aria-current="true"]{background:var(--bg0);color:var(--tier);
  border-color:var(--line-strong);box-shadow:0 -1px 0 var(--tier) inset}
.tierbar .seg[aria-current="true"]::before{opacity:1}
.tierbar .seg[aria-current="true"] .lvl{color:var(--grey2)}

/* ---------- shell ---------- */
.shell{max-width:1240px;margin:0 auto;padding:0 1.1rem 96px;display:grid;
  grid-template-columns:300px minmax(0,1fr);gap:0;align-items:start}
@media (max-width:980px){ .shell{grid-template-columns:1fr;padding-bottom:104px} }

/* ---------- sidebar (explorer-like tree) ---------- */
.tree-col{align-self:stretch;min-width:0;background:var(--bg1);
  border-right:1px solid var(--line);padding:.55rem .45rem .8rem}
@media (max-width:980px){
  .tree-col{border-right:none;border-bottom:1px solid var(--line);padding:.4rem .45rem .55rem}
}
.tree-wrap{position:sticky;top:44px;display:flex;flex-direction:column;
  max-height:calc(100vh - 114px)}   /* stuck at top:44 it clears the 57px status bar */
@media (max-width:980px){ .tree-wrap{position:static;max-height:none;display:block} }
.tree-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.35rem .5rem .5rem;border-bottom:1px solid var(--line);margin-bottom:.35rem}
.tree-head h2{margin:0;font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey2)}
.tree-head .badge{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:.24rem .42rem;border-radius:3px;color:var(--tier);background:var(--tier-bg)}

.tree{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;max-height:724px;overflow:auto;
  font:12.8px/1.5 var(--mono);scrollbar-width:thin;scrollbar-color:var(--bg4) var(--bg1)}
.tree::-webkit-scrollbar{width:10px;height:10px}
.tree::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:5px}
.tree::-webkit-scrollbar-track{background:transparent}
@media (max-width:980px){ .tree{max-height:42vh} }
.tree ul{list-style:none;margin:0 0 0 .42rem;padding-left:.55rem;border-left:1px solid var(--line-strong)}
.tree li{margin:0}
.node{display:flex;align-items:stretch;border-radius:4px}
.node:hover{background:var(--bg2)}
.twist{flex:0 0 22px;display:flex;align-items:center;justify-content:center;background:none;
  border:0;padding:0;cursor:pointer;color:var(--grey0);
  font:700 13px/1 var(--mono);border-radius:4px}
.twist:hover{color:var(--tier);background:var(--bg3)}
.link{flex:1 1 auto;display:flex;gap:.4rem;align-items:baseline;min-width:0;
  padding:.24rem .45rem .24rem .1rem;color:var(--fg-dim);text-decoration:none;border-radius:4px}
.link .t{overflow-wrap:anywhere}
.link:hover{color:var(--fg)}
.link.sec{font-weight:700;color:var(--grey2);letter-spacing:.01em}
.link.leaf::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:1px;
  background:var(--grey0);margin-top:.55em}
.link.leaf.active{background:var(--bg2);color:var(--fg);font-weight:700;
  box-shadow:inset 2px 0 0 var(--tier)}
.link.leaf.active::before{background:var(--tier)}

/* ---------- editor pane ---------- */
main{min-width:0;background:var(--bg0);padding:0}
.editorbar{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;
  padding:.5rem 1.4rem;background:var(--bg1);border-bottom:1px solid var(--line);
  font:12px/1.4 var(--mono);color:var(--grey2)}
.editorbar .crumb{color:var(--tier);font-weight:600}
.editorbar .navtoggle{appearance:none;cursor:pointer;background:var(--bg2);color:var(--grey2);
  border:1px solid var(--line-strong);border-radius:4px;padding:.12rem .45rem;
  font:600 13px/1.2 var(--mono);transition:background .12s ease,color .12s ease}
.editorbar .navtoggle:hover{background:var(--bg3);color:var(--fg)}
.editorbar .navtoggle:focus-visible{outline:2px solid var(--tier);outline-offset:1px}
body.nav-collapsed .tree-col{display:none}
.tree-close{display:none;appearance:none;cursor:pointer;background:var(--bg2);color:var(--grey2);
  border:1px solid var(--line-strong);border-radius:4px;font:600 13px/1.2 var(--mono);
  transition:background .12s ease,color .12s ease}
.tree-close:hover{background:var(--bg3);color:var(--fg)}
.tree-close:focus-visible{outline:2px solid var(--tier);outline-offset:1px}
body.nav-collapsed .shell{grid-template-columns:minmax(0,1fr)}
.editorbar .sep{color:var(--bg5)}
.editorbar .spacer{flex:1 1 auto}
.editorbar a{color:var(--grey2);border:1px solid var(--line-strong);border-radius:3px;
  padding:.16rem .45rem;font-size:11px;letter-spacing:.03em}
.editorbar a:hover{color:var(--bg-dim);background:var(--blue);border-color:var(--blue)}
.editorbar .pos{color:var(--grey0)}

article.page{padding:1.5rem 1.7rem 1.9rem;max-width:none}
article.page[hidden]{display:none}
article.page > h1{margin:0 0 .5rem;font:700 1.72rem/1.22 var(--ui);color:#e8e0c8;letter-spacing:-.012em}
.page-kicker{margin:0 0 1.35rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);
  font:600 10.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--tier)}
article.page h2{font:700 1.2rem/1.3 var(--ui);color:#e0d8bf;margin:2rem 0 .55rem;
  padding-bottom:.3rem;border-bottom:1px solid var(--line)}
article.page h3{font:700 1.02rem/1.35 var(--ui);color:var(--fg);margin:1.5rem 0 .45rem}
article.page p{margin:.68rem 0}
article.page ul,article.page ol{margin:.55rem 0 .9rem;padding-left:1.3rem}
article.page li{margin:.2rem 0}
article.page li::marker{color:var(--grey0)}
article.page strong{color:#e8e0c8}
article.page em{color:var(--fg-dim)}
article.page a{color:var(--blue);text-decoration:underline;text-decoration-color:var(--bg4)}
article.page a:hover{color:var(--aqua)}

article.page code{font-family:var(--mono);font-size:.855em;color:var(--yellow);
  background:var(--bg-dim);border:1px solid var(--line);border-radius:3px;padding:.06em .34em;
  overflow-wrap:anywhere}
article.page pre{background:var(--bg-dim);border:1px solid var(--line-strong);
  border-left:2px solid var(--blue);border-radius:var(--radius);
  padding:.8rem 1rem;overflow:auto;margin:.95rem 0;
  font:12.5px/1.55 var(--mono);color:var(--fg);scrollbar-width:thin}
article.page pre code{background:none;border:0;padding:0;color:var(--fg);font-size:12.5px;
  overflow-wrap:anywhere}

article.page table{border-collapse:collapse;width:100%;margin:1rem 0 1.2rem;
  font:12.8px/1.5 var(--mono);display:block;overflow-x:auto}
article.page thead{display:table-header-group}
article.page th{background:var(--bg1);color:var(--fg-dim);text-align:left;font-weight:700;
  border:1px solid var(--line-strong);padding:.42rem .6rem;white-space:nowrap}
article.page td{border:1px solid var(--line);padding:.42rem .6rem;vertical-align:top;
  color:var(--fg-dim);overflow-wrap:anywhere}
article.page tbody tr:nth-child(even){background:#2a3238}
article.page tbody tr:hover{background:var(--bg1)}
article.page blockquote{margin:1rem 0;padding:.15rem 0 .15rem 1rem;
  border-left:2px solid var(--grey0);color:var(--grey2);font-style:italic}
article.page hr{border:0;border-top:1px solid var(--line);margin:1.8rem 0}

/* ---------- landing page wordmark plate ---------- */
.ascii-wrap{display:flex;justify-content:center;margin:0 0 1.6rem;max-width:100%;
  container-type:inline-size}
/* needs to out-specify `article.page pre` (one class + two types) */
article.page .ascii-wrap pre{max-width:100%;overflow-x:auto;background:transparent;
  border:0;border-radius:0;box-shadow:none;margin:0;padding:8px}
/* the DTRH wordmark: one green-on-moss slab, centred, scaled so all 71 columns fit the
   pane at every width (15px cap on wide screens, ~2.1cqw below that) */
article.page .ascii-wrap pre.art-dtrh{background:#4f585e;color:#fff;
  border:0;border-radius:8px;padding:1.5em 1.2em;margin:0 auto;width:max-content;
  font-size:min(15px, 2.1cqw);line-height:1.15;letter-spacing:.02em;white-space:pre;
  overflow-x:auto;box-shadow:0 1px 0 rgba(255,255,255,.05), 0 8px 22px rgba(0,0,0,.35)}

/* callouts */
.callout{margin:1.1rem 0;padding:.85rem 1rem;border-radius:var(--radius);
  border:1px solid var(--line-strong);border-left:3px solid var(--blue);
  background:var(--bg-blue);color:var(--fg);font-size:.94rem}
.callout.info{border-left-color:var(--blue);background:var(--bg-blue)}
.callout.warn{border-left-color:var(--yellow);background:var(--bg-yellow)}
.callout.bad{border-left-color:var(--red);background:var(--bg-red)}
.callout > :first-child{margin-top:0}
.callout > :last-child{margin-bottom:0}
.callout strong{color:#e8e0c8}

/* downloads */
.downloads{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin:1.15rem 0}
@media (max-width:700px){.downloads{grid-template-columns:1fr}}
.dl{display:flex;flex-direction:column;gap:.22rem;padding:.9rem 1rem;border-radius:var(--radius);
  border:1px solid var(--line-strong);background:var(--bg1);color:var(--fg);
  transition:border-color .12s ease,background .12s ease}
.dl:hover{border-color:var(--tier);background:var(--bg2)}
.dl-kind{font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grey1)}
.dl-title{font:600 .96rem/1.35 var(--ui);color:#e8e0c8}
.dl-meta{font:11.5px/1.35 var(--mono);color:var(--grey0)}
.dl-pdf{border-left:3px solid var(--red)}
.dl-md{border-left:3px solid var(--blue)}

/* page footer nav */
.pagenav{display:flex;justify-content:space-between;gap:.8rem;margin:1.6rem 0 0;
  padding-top:1rem;border-top:1px solid var(--line);font:12.5px/1.4 var(--mono)}
.pagenav a{color:var(--grey2);max-width:48%;text-decoration:none;
  padding:.5rem .7rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg1)}
.pagenav a:hover{color:var(--fg);border-color:var(--line-strong);background:var(--bg2)}
.pagenav .dir{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey0);margin-bottom:.15rem}
.pagenav .next{text-align:right;margin-left:auto}
.pagenav .pgtitle{display:block}
.pagenav .is-empty{display:block;flex:0 0 0;min-width:0}

/* ---------- status bar: the credit strip, fixed over the page ---------- */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--bg1);border-top:1px solid var(--line-strong);
  box-shadow:0 -6px 18px rgba(0,0,0,.35)}
.status-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.62rem 1.1rem;min-height:52px}
.status-brand{font:600 13.5px/1.35 var(--mono);color:var(--fg);letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:.5rem}
.status-brand::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tier);
  box-shadow:0 0 0 3px var(--tier-bg)}
.status-brand a{color:var(--fg);border-bottom:1px dotted var(--grey0)}
.status-brand a:hover{color:var(--aqua);border-bottom-color:var(--aqua)}
.status-mid{margin:0 auto;font:12px/1.4 var(--mono);color:var(--grey2);text-align:center}
.status-right{display:flex;align-items:center;gap:.85rem;font:12px/1.4 var(--mono);color:var(--grey2)}
.status-right a{color:var(--grey2);border:1px solid var(--line-strong);border-radius:3px;
  padding:.2rem .5rem;font-size:11px;letter-spacing:.03em}
.status-right a:hover{color:var(--bg-dim);background:var(--blue);border-color:var(--blue)}
.status-right .pos{color:var(--grey0);white-space:nowrap}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:.6rem;z-index:99;background:var(--bg1);color:var(--fg);
  padding:.45rem .8rem;border:1px solid var(--line-strong);border-radius:var(--radius)}

/* long identifiers must never force a horizontal scrollbar */
article.page td,article.page th{overflow-wrap:anywhere}
img,video,svg{max-width:100%;height:auto}

/* ==========================================================================
   Responsive layer — last so it wins the cascade
   ========================================================================== */
@media (max-width:1100px){
  .shell{grid-template-columns:262px minmax(0,1fr)}
  article.page{padding:1.3rem 1.2rem 1.6rem}
}
@media (max-width:980px){
  .topbar-in{padding:0 .8rem}
  .tierbar .wrap{padding:0 .8rem}
  .shell{grid-template-columns:1fr;padding:0 .8rem 104px;gap:0}
  .editorbar{padding:.45rem .9rem}
  article.page{padding:1.15rem 1rem 1.5rem;max-width:none}
  article.page > h1{font-size:1.4rem}
  .link{min-height:44px;align-items:center;padding:.4rem .45rem}
  .twist{flex:0 0 44px;min-width:44px;font-size:16px}
  .tree{font-size:13px}
  .tree-wrap .tree-head{position:sticky;top:0;z-index:2;background:var(--bg1)}
  /* contents menu: capped height so the close control stays reachable, tier bar untouched */
  .tree-wrap{max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .tree-head{padding-right:.3rem}
  .tierbar .seg{min-height:44px}
  .editorbar .navtoggle{min-height:44px;min-width:44px;padding:.25rem .6rem;font-size:12.5px}
  .tree-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    min-width:44px;min-height:44px;margin-left:.2rem;font-size:15px}
  /* previous / next: full-width buttons at the foot of every page */
  .pagenav{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;align-items:stretch}
  .pagenav a,.pagenav .is-empty{max-width:100%;min-height:48px;margin:0}
  .pagenav a{display:flex;flex-direction:column;justify-content:center;gap:.18rem;
    padding:.6rem .75rem;border:1px solid var(--line-strong);border-radius:8px;
    background:var(--bg2);color:var(--fg);font:600 12.5px/1.3 var(--ui)}
  .pagenav a:active{background:var(--bg3);border-color:var(--tier)}
  .pagenav .dir{font:600 10px/1.2 var(--mono);color:var(--tier);margin:0;letter-spacing:.12em}
  .pagenav .pgtitle{font:600 12.5px/1.3 var(--ui);overflow-wrap:anywhere}
  .pagenav .next{text-align:right;margin-left:0;align-items:flex-end}
  .pagenav .is-empty{border:1px dashed var(--line);border-radius:8px;opacity:.45}
  .status-in{min-height:56px;padding:.5rem .8rem;gap:.5rem}
  .status-mid{display:none}
  .status-right{margin-left:auto}
}
@media (max-width:640px){
  .tierbar .seg .lvl{display:none}
  .tierbar .seg{padding:.72rem .4rem;font-size:13px}
  .titlebar .doc-sub{display:none}
  .status-brand{font-size:12.5px}
  /* both downloads stay reachable on a phone — only the chips tighten */
  .status-right{gap:.45rem}
  .status-right a{display:inline-block;padding:.2rem .45rem;font-size:11px;white-space:nowrap}
}
@media (max-width:400px){
  .status-brand{font-size:11.5px}
  .status-brand::before{box-shadow:0 0 0 2px var(--tier-bg)}
  .status-right{gap:.35rem}
  .status-right a{padding:.18rem .38rem;font-size:10.5px}
}