/* ============================================================================
   IT Career Map — Kavis Network
   Design system: see DESIGN.md
   Field navy + two meaning-carrying accents (marigold = no code, cyan = coding).
   Depth is line weight, never blur. No gradients in the hero. No glass.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --field:    #0A1733;
  --field-2:  #081228;
  --surface:  #122246;
  --surface-2:#16295260;
  --chalk:    #EEF1F6;
  --slate:    #8FA0BE;
  --signal:   #F2A63B;   /* NO CODE  — marigold */
  --signal-d: #7A4F0E;
  --current:  #2CA8E0;   /* CODING   — brand cyan */
  --current-d:#0E4864;
  --rule:     rgba(238,241,246,.15);
  --rule-2:   rgba(238,241,246,.30);

  --display: Bahnschrift, "DIN Alternate", "Arial Narrow", "Helvetica Neue Condensed", ui-sans-serif, sans-serif;
  --body:    Cambria, Charter, Georgia, "Times New Roman", serif;
  --ui:      "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    Consolas, "SF Mono", ui-monospace, "Courier New", monospace;

  --sp: clamp(1rem, 3.5vw, 2.5rem);
  --maxw: 1240px;
  --ease: cubic-bezier(.2,.9,.25,1);
  --ease-back: cubic-bezier(.34,1.4,.5,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--field);
  color:var(--chalk);
  font:400 17px/1.65 var(--body);
  overflow-x:hidden;
  /* the blueprint sheet: a static plotted grid, never animated */
  background-image:
    linear-gradient(rgba(238,241,246,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,246,.030) 1px, transparent 1px),
    linear-gradient(rgba(238,241,246,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,241,246,.055) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
}
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }

h1,h2,h3,.callout,.btn,.chip,.tool,.key,.crumbs,.pipe,.q-progress,.tray,.plot-list,.site-nav,.brand-txt{
  font-family:var(--ui);
}
h1,h2,.h1-num,.h1-tot,.stage-n{ font-family:var(--display); }

/* ---------- 2. Shared bits ---------------------------------------------- */
.skip-link{
  position:fixed; left:1rem; top:-4rem; z-index:200;
  background:var(--chalk); color:var(--field); padding:.6rem 1rem;
  border-radius:2px; font-family:var(--ui); font-weight:700; text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{ top:1rem; }

:where(a,button,[tabindex],summary,input):focus-visible{
  outline:2px solid var(--chalk);
  outline-offset:3px;
  border-radius:2px;
}
/* the UA focus ring on an SVG <g> is a rectangle around the whole bbox,
   label included — replaced here with a ring on the node's own hit circle */
#mapSvg g[role="treeitem"]{ outline:none; }
#mapSvg g[role="treeitem"]:focus-visible .node-hit{
  stroke:var(--chalk); stroke-width:2.5; stroke-dasharray:none;
}

section{ padding:clamp(3.5rem,8vw,7rem) var(--sp); }
/* the header is sticky, so anchored sections must clear it */
section[id],main[id]{ scroll-margin-top:72px; }
.sec-head{ max-width:60ch; margin:0 auto clamp(2rem,5vw,3.5rem); }
.callout{
  margin:0 0 .7rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate); font-weight:700;
  display:flex; align-items:center; gap:.7rem;
}
.callout::after{ content:""; flex:1; height:1px; background:var(--rule); }
h2{
  margin:0 0 .9rem; font-size:clamp(1.9rem,5vw,3.1rem); line-height:1.02;
  letter-spacing:-.005em; text-transform:uppercase; font-weight:700;
}
.sec-intro{ margin:0; color:#C9D3E5; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.25rem; border:1px solid var(--rule-2); background:transparent;
  color:var(--chalk); text-decoration:none; cursor:pointer;
  font-size:.9rem; font-weight:600; border-radius:2px;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background:rgba(238,241,246,.08); border-color:var(--chalk); transform:translateY(-1px); }
.btn-primary{ background:var(--chalk); color:var(--field); border-color:var(--chalk); }
.btn-primary:hover{ background:#fff; }
.btn[disabled]{ opacity:.35; cursor:not-allowed; transform:none; }

.tool{
  min-width:2.4rem; height:2.4rem; padding:0 .55rem;
  border:1px solid var(--rule-2); background:transparent; cursor:pointer;
  border-radius:2px; font-size:1rem; line-height:1;
  transition:background .2s, border-color .2s;
}
.tool:hover{ background:rgba(238,241,246,.09); border-color:var(--chalk); }
.tool-wide{ font-size:.8rem; padding:0 .85rem; }

.chip{
  padding:.45rem .85rem; border:1px solid var(--rule-2); background:transparent;
  border-radius:2px; cursor:pointer; font-size:.8rem; font-weight:600;
  transition:background .2s, border-color .2s, color .2s;
}
.chip:hover{ border-color:var(--chalk); }
.chip.is-on{ background:var(--chalk); color:var(--field); border-color:var(--chalk); }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* ---------- 3. Header ---------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem var(--sp);
  background:rgba(10,23,51,.94);
  border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.brand img{ width:38px; height:38px; object-fit:cover; border-radius:2px; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-txt b{ font-size:.92rem; letter-spacing:.02em; }
.brand-txt em{ font-style:normal; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); }
.site-nav{ display:flex; gap:1.4rem; }
.site-nav a{
  color:var(--slate); text-decoration:none; font-size:.82rem; font-weight:600;
  padding:.3rem 0; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.site-nav a:hover{ color:var(--chalk); border-color:var(--chalk); }
@media (max-width:820px){ .site-nav{ display:none; } }

/* ---------- 4. Hero ------------------------------------------------------ */
.hero{ padding-top:clamp(2.5rem,6vw,5rem); }
.hero-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
h1{
  margin:0 0 1.4rem; text-transform:uppercase; font-weight:700;
  font-size:clamp(2.1rem,6vw,4rem); line-height:.98; letter-spacing:-.01em;
}
.h1-num{ color:var(--signal); font-size:1.5em; line-height:.8; }
.h1-of{ color:var(--slate); font-size:.7em; }
.h1-tot{ color:var(--chalk); font-size:1.5em; line-height:.8; }
.h1-tail{ display:block; margin-top:.35rem; }
.h1-tail u{ text-decoration:none; color:var(--signal); border-bottom:3px solid var(--signal); }
.lede{ margin:0 0 1.8rem; max-width:52ch; color:#C9D3E5; }
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; }

.ratio{
  margin:0; padding:1.4rem; border:1px solid var(--rule);
  background:var(--surface-2); position:relative;
}
.ratio::before,.ratio::after{
  content:""; position:absolute; width:10px; height:10px; border:1px solid var(--rule-2);
}
.ratio::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.ratio::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.ratio-head{ display:flex; gap:1.3rem; margin-bottom:1rem; flex-wrap:wrap; }
.key{ display:flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.key svg{ width:14px; height:14px; }
.key-nocode{ color:var(--signal); } .key-nocode svg{ fill:var(--signal); }
.key-coding{ color:var(--current); } .key-coding svg{ fill:var(--current); }
.key b{ font-family:var(--mono); font-size:.9rem; }

.ratio-plot{
  display:grid; grid-template-columns:repeat(12,1fr); gap:6px;
}
.ratio-plot svg{ width:100%; height:auto; opacity:0; transform:scale(.4); }
.ratio-plot.go svg{ animation:pop .38s var(--ease-back) forwards; animation-delay:var(--d); }
.ratio-plot .u-nocode{ fill:var(--signal); }
.ratio-plot .u-coding{ fill:var(--current); }
@keyframes pop{ to{ opacity:1; transform:scale(1); } }
figcaption{ margin-top:1rem; font-size:.82rem; color:var(--slate); line-height:1.5; }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .ratio-plot{ grid-template-columns:repeat(12,1fr); }
}

/* ---------- 5. Map ------------------------------------------------------- */
.map-section{
  background:var(--field-2); border-block:1px solid var(--rule);
  padding-block:clamp(2.2rem,4vw,3.4rem);
}
/* the map is the point of the page, so its heading gives up vertical room:
   two columns instead of a stacked block */
.map-section .sec-head{
  max-width:var(--maxw); margin-bottom:1.3rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.4rem clamp(1.5rem,4vw,3rem); align-items:end;
}
.map-section .callout{ grid-column:1 / -1; }
.map-section h2{ margin:0; font-size:clamp(1.7rem,3.6vw,2.5rem); }
.map-section .sec-intro{ font-size:.95rem; }
@media (max-width:760px){ .map-section .sec-head{ grid-template-columns:1fr; } }

.map-bar{
  max-width:var(--maxw); margin:0 auto .8rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.crumbs{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; font-size:.78rem; }
.crumbs button{
  background:none; border:0; cursor:pointer; color:var(--slate);
  padding:.25rem .1rem; font-weight:600; border-bottom:1px solid transparent;
}
.crumbs button:hover{ color:var(--chalk); border-color:var(--chalk); }
.crumbs button[aria-current="true"]{ color:var(--chalk); cursor:default; }
.crumbs .sep{ color:var(--rule-2); }
.map-tools{ display:flex; gap:.4rem; }

.map-stage{
  max-width:var(--maxw); margin:0 auto; position:relative;
  height:min(76vh,800px); min-height:460px;
  border:1px solid var(--rule); background:rgba(8,18,40,.55);
  overflow:hidden; touch-action:none;
}
#mapSvg{ width:100%; height:100%; display:block; cursor:grab; }
#mapSvg.dragging{ cursor:grabbing; }
.map-hint{
  position:absolute; left:.9rem; bottom:.7rem; margin:0;
  font-family:var(--ui); font-size:.72rem; color:var(--slate);
  pointer-events:none; transition:opacity .4s;
}
.map-hint.hide{ opacity:0; }

/* --- svg node styling --- */
.link{
  fill:none; stroke:var(--rule-2); stroke-width:1.4;
  transition:stroke .25s var(--ease), stroke-width .25s var(--ease), opacity .25s;
}
.link.cat-nocode{ stroke:rgba(242,166,59,.45); stroke-dasharray:5 4; }  /* dashed = no code */
.link.cat-coding{ stroke:rgba(44,168,224,.45); }                        /* solid  = coding */
.link.lit{ stroke-width:2.6; opacity:1; }
.link.cat-nocode.lit{ stroke:var(--signal); }
.link.cat-coding.lit{ stroke:var(--current); }

.node{ cursor:pointer; }
.node-shape{
  stroke-width:1.6; transition:fill .25s var(--ease), stroke .25s var(--ease), transform .3s var(--ease-back);
  transform-box:fill-box; transform-origin:center;
}
.node-hit{ fill:transparent; stroke:transparent; stroke-width:2; }
/* the label is the biggest, most obvious target on a node — it has to be
   clickable, not decorative */
.node-label{
  font-family:var(--ui); font-size:13px; font-weight:600; fill:var(--chalk);
  cursor:pointer; paint-order:stroke; stroke:var(--field-2); stroke-width:3.5px;
  stroke-linejoin:round;
}

.n-root .node-shape{ fill:var(--surface); stroke:var(--chalk); stroke-width:2; }
.n-root .node-label{ font-family:var(--display); font-size:17px; letter-spacing:.08em; }

.n-cat.cat-nocode .node-shape{ fill:var(--signal-d); stroke:var(--signal); }
.n-cat.cat-coding .node-shape{ fill:var(--current-d); stroke:var(--current); }
.n-cat .node-label{ font-family:var(--display); font-size:16px; letter-spacing:.06em; }

.n-dom.cat-nocode .node-shape{ fill:rgba(242,166,59,.14); stroke:rgba(242,166,59,.8); }
.n-dom.cat-coding .node-shape{ fill:rgba(44,168,224,.14); stroke:rgba(44,168,224,.8); }

.n-role.cat-nocode .node-shape{ fill:var(--field-2); stroke:rgba(242,166,59,.75); }
.n-role.cat-coding .node-shape{ fill:var(--field-2); stroke:rgba(44,168,224,.75); }
.n-role .node-label{ font-size:12.5px; font-weight:500; }

.node:hover .node-shape,.node.lit .node-shape{ transform:scale(1.12); }
.node.cat-nocode:hover .node-shape,.node.cat-nocode.lit .node-shape{ fill:var(--signal); stroke:var(--signal); }
.node.cat-coding:hover .node-shape,.node.cat-coding.lit .node-shape{ fill:var(--current); stroke:var(--current); }
.node.cat-nocode.lit .node-label,.node.cat-coding.lit .node-label{ fill:#fff; }
.node.is-open .node-shape{ stroke-width:2.4; }
.node.active .node-shape{ stroke:var(--chalk); stroke-width:2.6; }

.map-stage.dim .node:not(.lit){ opacity:.2; }
.map-stage.dim .link:not(.lit){ opacity:.12; }
.node,.link{ transition:opacity .25s var(--ease); }

/* Entrance. Only opacity animates on the <g> — its position lives in a
   transform attribute, and a CSS transform there would fight it. The physical
   overshoot happens on the shape, which has its own bbox origin. */
.node.enter{ animation:nodeFade .34s var(--ease) backwards; animation-delay:var(--d,0s); }
.node.enter .node-shape{ animation:shapePop .44s var(--ease-back) backwards; animation-delay:var(--d,0s); }
@keyframes nodeFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes shapePop{ from{ transform:scale(.15); } to{ transform:scale(1); } }
.node-hit{ pointer-events:all; }

/* --- mobile accordion tree --- */
.tree-mobile{ display:none; max-width:var(--maxw); margin:0 auto; }
.tree-mobile .t-cat{ border:1px solid var(--rule); margin-bottom:.75rem; }
.tree-mobile .t-cat.cat-nocode{ border-left:4px solid var(--signal); }
.tree-mobile .t-cat.cat-coding{ border-left:4px solid var(--current); }
.tree-mobile button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  background:none; border:0; text-align:left; cursor:pointer; padding:.85rem 1rem;
  font-family:var(--ui); font-size:.92rem; font-weight:600;
}
.tree-mobile .t-cat>button{ font-family:var(--display); text-transform:uppercase; letter-spacing:.05em; font-size:1.05rem; }
.tree-mobile .t-dom>button{ font-size:.85rem; padding-left:1.6rem; border-top:1px solid var(--rule); color:#C9D3E5; }
.tree-mobile .t-role{
  width:100%; text-align:left; padding:.7rem 1rem .7rem 2.3rem; border-top:1px solid var(--rule);
  background:none; border-left:0; border-right:0; border-bottom:0; cursor:pointer;
  font-family:var(--ui); font-size:.85rem; display:block;
}
.tree-mobile .t-role:hover,.tree-mobile button:hover{ background:rgba(238,241,246,.06); }
.tree-mobile .t-count{ font-family:var(--mono); font-size:.75rem; color:var(--slate); }
.tree-mobile .t-mark{ transition:transform .3s var(--ease); display:inline-block; }
.tree-mobile [aria-expanded="true"] .t-mark{ transform:rotate(90deg); }
.tree-mobile .t-kids[hidden]{ display:none; }

/* the radial map and the accordion tree are different interactions, so their
   instructions differ too */
.on-tree{ display:none; }

@media (max-width:760px){
  .map-stage,.map-tools,.crumbs{ display:none; }
  .tree-mobile{ display:block; }
  .on-map{ display:none; }
  .on-tree{ display:inline; }
}

/* ---------- 6. Pipeline -------------------------------------------------- */
.pipe-scroll{ max-width:var(--maxw); margin:0 auto; overflow-x:auto; padding-bottom:1rem; }
.pipe{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(7,minmax(168px,1fr)); gap:0;
  min-width:min(100%,1180px); align-items:start;
}
/* columns run to their own height, so each stage keeps all four borders and
   shares its vertical edge with the next via a -1px margin */
.pipe li{
  position:relative; padding:1.1rem 1rem 1.2rem; border:1px solid var(--rule); margin-right:-1px;
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.pipe li:last-child{ margin-right:0; }
.pipe li.in{ opacity:1; transform:none; }
.pipe li.is-code{ background:rgba(44,168,224,.09); border-color:rgba(44,168,224,.45); z-index:1; }
.stage-n{ font-size:.7rem; letter-spacing:.2em; color:var(--slate); display:block; }
.pipe h3{ margin:.2rem 0 .55rem; font-size:1.02rem; font-family:var(--ui); }
.pipe p{ margin:0 0 .8rem; font-size:.8rem; color:var(--slate); line-height:1.45; font-family:var(--ui); }
.pipe .roles{ display:flex; flex-wrap:wrap; gap:.3rem; }
.rchip{
  border:1px solid var(--rule-2); background:none; cursor:pointer;
  font-family:var(--ui); font-size:.72rem; padding:.28rem .5rem; border-radius:2px;
  text-align:left; line-height:1.25; transition:background .2s, border-color .2s, color .2s;
}
.rchip.cat-nocode{ border-color:rgba(242,166,59,.5); color:var(--signal); }
.rchip.cat-coding{ border-color:rgba(44,168,224,.5); color:var(--current); }
.rchip.cat-nocode:hover{ background:var(--signal); color:var(--field); }
.rchip.cat-coding:hover{ background:var(--current); color:var(--field); }
.pipe-note{
  max-width:var(--maxw); margin:1.2rem auto 0; font-size:.85rem; color:var(--slate);
}

/* ---------- 7. Plot ------------------------------------------------------ */
.plot-filters{ max-width:var(--maxw); margin:0 auto 1.2rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.plot-wrap{ max-width:var(--maxw); margin:0 auto; border:1px solid var(--rule); background:rgba(8,18,40,.45); }
#plotSvg{ width:100%; height:auto; display:block; }
.axis-line{ stroke:var(--rule); stroke-width:1; }
.axis-tick{ font-family:var(--mono); font-size:10px; fill:var(--slate); }
.axis-title{ font-family:var(--ui); font-size:11px; font-weight:700; fill:var(--slate); letter-spacing:.12em; text-transform:uppercase; }
/* the <g> carries a transform attribute for its position, so the hover scale
   goes on the polygon inside it — a CSS transform on the group would win and
   throw the point off the axis. */
.dot{ cursor:pointer; transition:opacity .3s var(--ease); }
.dot.cat-nocode{ fill:rgba(242,166,59,.9); stroke:var(--signal); }
.dot.cat-coding{ fill:rgba(44,168,224,.9); stroke:var(--current); }
.dot polygon{ transition:transform .25s var(--ease-back); transform-box:fill-box; transform-origin:center; }
.dot:hover polygon,.dot:focus polygon,.dot:focus-visible polygon{ transform:scale(1.7); }
.dot.off{ opacity:.08; pointer-events:none; }
.dot-lbl{ font-family:var(--ui); font-size:10px; fill:var(--chalk); pointer-events:none; opacity:0; transition:opacity .2s; paint-order:stroke; stroke:var(--field-2); stroke-width:3px; }
.dot-lbl.show{ opacity:1; }
.plot-list{
  list-style:none; margin:0; padding:1rem; display:none; gap:.4rem; flex-direction:column;
  max-height:420px; overflow:auto;
}
.plot-list button{
  width:100%; text-align:left; background:none; border:1px solid var(--rule); cursor:pointer;
  padding:.6rem .7rem; font-size:.82rem; display:flex; justify-content:space-between; gap:.6rem;
}
.plot-list .meta{ font-family:var(--mono); font-size:.72rem; color:var(--slate); white-space:nowrap; }
@media (max-width:700px){
  #plotSvg{ display:none; }
  .plot-list{ display:flex; }
}

/* ---------- 8. Finder ---------------------------------------------------- */
.finder{ max-width:820px; margin:0 auto; border:1px solid var(--rule); background:var(--surface-2); }
.q-track{ padding:clamp(1.2rem,4vw,2.2rem); }
.q h3{ margin:0 0 1.2rem; font-size:clamp(1.15rem,3vw,1.6rem); font-family:var(--ui); line-height:1.25; }
.q-opts{ display:grid; gap:.6rem; }
.q-opt{
  text-align:left; background:none; border:1px solid var(--rule-2); cursor:pointer;
  padding:.85rem 1rem; font-family:var(--ui); font-size:.92rem; border-radius:2px;
  transition:background .2s, border-color .2s, transform .2s;
}
.q-opt:hover{ background:rgba(238,241,246,.08); border-color:var(--chalk); transform:translateX(3px); }
.q-opt.is-on{ background:var(--chalk); color:var(--field); border-color:var(--chalk); }
.q-opt small{ display:block; margin-top:.2rem; font-size:.76rem; opacity:.7; }
.finder-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1.1rem; border-top:1px solid var(--rule);
}
.q-progress{ margin:0; font-size:.75rem; color:var(--slate); font-family:var(--mono); }
.results{ max-width:820px; margin:1.5rem auto 0; }
.results h3{ font-family:var(--ui); font-size:1.05rem; margin:0 0 .9rem; }
.res-grid{ display:grid; gap:.7rem; }
.res-card{
  border:1px solid var(--rule); padding:1rem; display:flex; justify-content:space-between;
  gap:1rem; align-items:flex-start; text-align:left; background:none; cursor:pointer; width:100%;
  transition:border-color .2s, background .2s;
}
.res-card:hover{ border-color:var(--chalk); background:rgba(238,241,246,.05); }
.res-card.cat-nocode{ border-left:4px solid var(--signal); }
.res-card.cat-coding{ border-left:4px solid var(--current); }
.res-card b{ font-family:var(--ui); font-size:.98rem; display:block; margin-bottom:.25rem; }
.res-card span{ font-size:.85rem; color:var(--slate); }
.res-meta{ font-family:var(--mono); font-size:.72rem; color:var(--slate); white-space:nowrap; }
.empty{ border:1px dashed var(--rule-2); padding:1.2rem; }
.empty p{ margin:.4rem 0 0; color:var(--slate); font-size:.9rem; }

/* ---------- 9. Closing / footer ------------------------------------------ */
.closing{ background:var(--field-2); border-top:1px solid var(--rule); }
.closing-grid{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(1.5rem,5vw,4rem); align-items:center;
}
.founder{ margin:0; position:relative; }
.founder img{ width:100%; border:1px solid var(--rule); }
.closing-copy p{ color:#C9D3E5; max-width:56ch; }
.sign{ font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; color:var(--slate); font-size:.85rem; }
@media (max-width:860px){ .closing-grid{ grid-template-columns:1fr; } .founder{ max-width:340px; } }

.site-foot{
  border-top:1px solid var(--rule); padding:2rem var(--sp);
  display:flex; gap:1rem; align-items:center; max-width:var(--maxw); margin:0 auto;
}
.site-foot img{ width:44px; height:44px; object-fit:cover; border-radius:2px; }
.site-foot p{ margin:0; font-family:var(--ui); font-size:.85rem; }
.site-foot .fine{ color:var(--slate); font-size:.76rem; margin-top:.25rem; max-width:70ch; }

/* ---------- 10. Detail panel --------------------------------------------- */
.panel-scrim{
  position:fixed; inset:0; background:rgba(4,10,24,.6); z-index:90; border:0;
  opacity:0; transition:opacity .3s var(--ease);
}
.panel-scrim.show{ opacity:1; }
.panel{
  position:fixed; z-index:100; top:0; right:0; height:100%; width:min(460px,100%);
  background:var(--surface); border-left:1px solid var(--rule-2);
  transform:translateX(100%); transition:transform .42s var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
.panel.show{ transform:none; }
.panel-inner{ padding:1.4rem 1.5rem 3rem; }
.p-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.p-tag{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--ui); font-size:.7rem;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .55rem; border:1px solid;
}
.p-tag svg{ width:11px; height:11px; }
.p-tag.cat-nocode{ color:var(--signal); border-color:var(--signal); } .p-tag.cat-nocode svg{ fill:var(--signal); }
.p-tag.cat-coding{ color:var(--current); border-color:var(--current); } .p-tag.cat-coding svg{ fill:var(--current); }
.p-close{ background:none; border:1px solid var(--rule-2); width:2.2rem; height:2.2rem; cursor:pointer; border-radius:2px; flex:none; }
.p-close:hover{ background:rgba(238,241,246,.1); }
.panel h3{ font-family:var(--display); text-transform:uppercase; font-size:1.75rem; line-height:1.02; margin:.2rem 0 .5rem; }
.p-one{ margin:0 0 1.3rem; color:#C9D3E5; }
.p-block{ border-top:1px solid var(--rule); padding-top:1rem; margin-top:1.1rem; }
.p-block h4{
  margin:0 0 .5rem; font-family:var(--ui); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); font-weight:700;
}
.p-block p{ margin:0; font-size:.95rem; }
.p-list{ margin:0; padding:0; list-style:none; display:grid; gap:.45rem; }
.p-list li{ font-size:.92rem; padding-left:1.1rem; position:relative; }
.p-list li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--slate); }
.p-tools{ display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; margin:0; padding:0; }
.p-tools li{ font-family:var(--mono); font-size:.74rem; border:1px solid var(--rule); padding:.28rem .5rem; color:#C9D3E5; }
.p-facts{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.p-fact b{ display:block; font-family:var(--display); font-size:1.5rem; line-height:1; margin-bottom:.2rem; }
.meter{ display:flex; gap:3px; margin:.35rem 0 .3rem; }
.meter i{ height:9px; flex:1; border:1px solid var(--rule-2); background:transparent; }
.meter i.on.cat-nocode{ background:var(--signal); border-color:var(--signal); }
.meter i.on.cat-coding{ background:var(--current); border-color:var(--current); }
.meter-lbl{ font-size:.78rem; color:var(--slate); font-family:var(--ui); }
.p-real{ border-left:3px solid var(--signal); padding:.15rem 0 .15rem .9rem; }
.p-real p{ font-size:.93rem; }
.p-acts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem; }
@media (max-width:760px){
  .panel{
    top:auto; bottom:0; right:0; width:100%; height:min(88vh,780px);
    border-left:0; border-top:1px solid var(--rule-2); transform:translateY(100%);
  }
  .panel::before{
    content:""; display:block; width:44px; height:4px; background:var(--rule-2);
    margin:.6rem auto -.2rem; border-radius:99px;
  }
}

/* ---------- 11. Compare tray --------------------------------------------- */
.tray{
  position:fixed; left:0; right:0; bottom:0; z-index:80; padding:0;
  background:var(--surface); border-top:1px solid var(--rule-2);
  transform:translateY(100%); transition:transform .35s var(--ease);
}
.tray.show{ transform:none; }
.tray-bar{
  display:flex; align-items:center; gap:1rem; padding:.7rem var(--sp);
  max-width:var(--maxw); margin:0 auto; flex-wrap:wrap;
}
.tray-title{ margin:0; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); font-weight:700; }
.tray-slots{ display:flex; gap:.4rem; flex:1; flex-wrap:wrap; }
.tray-slot{
  display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--rule-2);
  padding:.3rem .5rem; font-family:var(--ui); font-size:.78rem;
}
.tray-slot.cat-nocode{ border-color:rgba(242,166,59,.6); }
.tray-slot.cat-coding{ border-color:rgba(44,168,224,.6); }
.tray-slot button{ background:none; border:0; cursor:pointer; color:var(--slate); line-height:1; padding:0 .1rem; }
.tray-slot button:hover{ color:var(--chalk); }
.tray-acts{ display:flex; gap:.4rem; }
.tray-sheet{
  border-top:1px solid var(--rule); max-height:min(70vh,620px); overflow:auto;
  padding:1.2rem var(--sp) 2rem;
}
.cmp{ width:100%; border-collapse:collapse; max-width:var(--maxw); margin:0 auto; font-size:.87rem; }
.cmp th,.cmp td{ text-align:left; vertical-align:top; padding:.7rem .8rem; border-bottom:1px solid var(--rule); }
.cmp thead th{ font-family:var(--display); text-transform:uppercase; font-size:1.05rem; letter-spacing:.03em; }
.cmp thead th.cat-nocode{ border-bottom:3px solid var(--signal); }
.cmp thead th.cat-coding{ border-bottom:3px solid var(--current); }
.cmp tbody th{
  font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--slate); width:12rem; font-weight:700;
}
.cmp ul{ margin:0; padding-left:1.1rem; }
.cmp li{ margin-bottom:.2rem; }
.cmp-scroll{ overflow-x:auto; }

/* ---------- 12. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{ opacity:1; transform:none; }
  .pipe li{ opacity:1; transform:none; }
  .ratio-plot svg{ opacity:1; transform:none; }
  .node.enter,.node.enter .node-shape{ animation:none; }
  .link{ stroke-dashoffset:0 !important; }
}