/* map: the board, scoped under .dataset-map.
   Migrated from the standalone repo by scripts/convert-dataset-css.js, once. That script was a
   one-way migration tool, not a build step: the repo is archived and there is nothing left to
   regenerate from. THIS FILE IS NOW THE SOURCE. Edit it directly.

   Everything is scoped so the app cannot reach the chrome and the chrome cannot reach the
   board. Tokens resolve from system.css in both themes, which is why there is no dark block
   here beyond the component rules: the theme sets data-theme before first paint. */

.dataset-map *{box-sizing:border-box}
.dataset-map .wrap{max-width:1500px;margin:0 auto;padding:22px 20px 56px}
.dataset-map h1, .dataset-map h2, .dataset-map h3, .dataset-map .hand{font-family:var(--head)}
.dataset-map .hero{position:relative;padding:20px 24px;background:var(--paper);border:1px solid var(--hair);border-radius:0;box-shadow:none;transform:none}
.dataset-map .hero::before{left:40px;transform:none}
.dataset-map .hero::after{right:54px;transform:none}
.dataset-map h1{margin:0 0 6px;font-size:clamp(2.1rem,4.4vw,4rem);line-height:.92;letter-spacing:-.01em}
.dataset-map .subtitle{max-width:1050px;font-size:1.06rem;color:#26303d;line-height:1.5;margin:0}
.dataset-map .crosslink{margin:10px 0 0;font-size:.92rem;color:var(--muted)}
.dataset-map .toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 6px}
.dataset-map .group{display:flex;flex-wrap:wrap;gap:7px;align-items:center;background:rgba(255,255,255,.74);border:1px solid var(--hair);border-radius:0;padding:7px 9px;box-shadow:none}
.dataset-map .group .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:2px}
.dataset-map button{font:inherit;appearance:none;border:1px solid var(--hair);border-radius:0;padding:7px 13px;background:var(--paper);color:var(--ink);cursor:pointer;transform:none;box-shadow:none;transition:transform .12s,background .12s}
.dataset-map button:nth-child(even){transform:none}
.dataset-map button:hover{transform:translateY(-1px)}
.dataset-map button.active{background:var(--steel-deep);color:#fff;box-shadow:none}
.dataset-map button.tier.active[data-tier="eu"]{background:var(--up);box-shadow:none}
.dataset-map button.tier.active[data-tier="operated"]{background:var(--both);box-shadow:none}
.dataset-map button.tier.active[data-tier="dependency"]{background:var(--down);box-shadow:none}
.dataset-map button.tier{opacity:.5;filter:grayscale(.4)}
.dataset-map button.tier.active{opacity:1;filter:none}
.dataset-map input{font:inherit;min-width:min(280px,100%);padding:9px 13px;border:1px solid var(--hair);border-radius:0;background:var(--paper);box-shadow:none}
.dataset-map .hint{font-size:.86rem;color:var(--muted);margin:8px 2px 14px}
.dataset-map .layout{display:grid;grid-template-columns:minmax(0,1fr) 396px;gap:18px;align-items:start}
.dataset-map .board{position:relative;padding:14px;background:var(--paper);border:1px solid var(--hair);border-radius:0;box-shadow:none}
.dataset-map .layer{position:relative;border:2px dashed var(--hair);border-radius:0;padding:10px 12px 12px;margin:12px 0}
.dataset-map .layer-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 2px 9px}
.dataset-map .layer-head h2{margin:0;font-size:1.5rem;line-height:1}
.dataset-map .layer-head .verdict{font-size:.92rem;color:#33414f;flex:1;min-width:240px}
/* CHROME.md step 198 sends --blue here to --steel #5980a6 and calls layer numbers
   decorative. This deliberately does not follow it, and the override is recorded rather
   than left to be rediscovered. Two reasons. --steel measures 3.71:1 on --paper, below
   the 4.5:1 AA needs for text this size (1.2rem is not large-scale). And the number is
   not decorative: the map's argument is the stack read in order from silicon to market,
   so the ordinal carries the meaning, not just the styling. --steel-deep is 5.78:1 light
   and 9.05:1 dark. Revisit only if the layer ordering stops being load-bearing. */
.dataset-map .layer-no{font-family:var(--head);font-size:1.2rem;color:var(--steel-deep);border:1px solid var(--steel-deep);border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.dataset-map .cards{display:flex;flex-wrap:wrap;gap:11px}
.dataset-map .card{position:relative;width:228px;min-height:96px;padding:11px 12px 26px;background:var(--paper);border-radius:0;cursor:pointer;box-shadow:none;border-left:7px solid var(--none);transition:transform .12s,opacity .12s,filter .12s}
.dataset-map .card:nth-child(3n){transform:none}
.dataset-map .card:nth-child(3n+1){transform:none}
.dataset-map .card:hover{transform:translateY(-3px)}
.dataset-map .card.eu{border-left-color:var(--up);background:var(--up-bg)}
.dataset-map .card.operated{border-left-color:var(--both);background:var(--both-bg)}
.dataset-map .card.dependency{border-left-color:var(--down);background:var(--down-bg)}
.dataset-map .card.active{outline:3px solid rgba(31,111,196,.4)}
.dataset-map .card.hidden{display:none}
.dataset-map .card h3{margin:0 0 3px;font-family:var(--head);font-size:1.24rem;line-height:1.02}
.dataset-map .card p{margin:0;font-size:.83rem;color:#36414f;line-height:1.22}
.dataset-map .card .champ{position:absolute;right:-9px;top:-11px;background:var(--steel-deep);color:#fff;font-family:var(--head);font-size:.86rem;padding:1px 9px;border:1px solid var(--hair);border-radius:0;transform:none}
.dataset-map .card .score{position:absolute;left:11px;bottom:7px;font-size:.74rem;color:var(--muted);letter-spacing:1px}
.dataset-map .card .tierdot{position:absolute;right:10px;bottom:6px;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.dataset-map .card.eu .tierdot{color:var(--up)}
.dataset-map .card.operated .tierdot{color:var(--both)}
.dataset-map .card.dependency .tierdot{color:var(--down)}
.dataset-map .card .gtm-ribbon{display:none;margin-top:7px;font-size:.78rem;color:#5a4410;background:rgba(248,231,161,.5);border-radius:0;padding:5px 7px;line-height:1.2}
body.depth-engine .dataset-map .card .gtm-ribbon{display:block}
.dataset-map .drawer{position:sticky;top:14px;padding:18px;background:#fffef8;border:1px solid var(--hair);border-radius:0;min-height:460px;box-shadow:none;transform:none}
.dataset-map .kick{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:.72rem;padding:2px 8px;border-radius:0;color:#fff;margin-top:4px}
.dataset-map .kick.eu{background:var(--up)}
.dataset-map .kick.operated{background:var(--both)}
.dataset-map .kick.dependency{background:var(--down)}
.dataset-map .drawer h2{font-size:1.9rem;margin:8px 0 4px;line-height:1}
.dataset-map .drawer .layref{font-size:.85rem;color:var(--muted);margin:0 0 10px}
.dataset-map .drawer p{font-size:.95rem;line-height:1.48;color:#27313d}
.dataset-map .scorebar{display:flex;gap:4px;align-items:center;margin:8px 0 4px}
.dataset-map .scorebar .dot{width:15px;height:15px;border:1px solid var(--hair);border-radius:50%}
.dataset-map .scorebar .dot.on{background:var(--up)}
.dataset-map .scorebar .lab{font-size:.8rem;color:var(--muted);margin-left:6px}
.dataset-map .box{border-left:5px solid var(--steel-deep);background:#f4faff;padding:9px 11px;border-radius:0;margin-top:10px;font-size:.9rem;line-height:1.4}
.dataset-map .box.weak{border-left-color:var(--down);background:#fdf0ed}
.dataset-map .box.mat{border-left-color:var(--none);background:#f5f5f3}
.dataset-map .box.gtm{border-left-color:var(--both);background:#fff8df}
.dataset-map .card .hz{margin-top:5px;font-size:.74rem;color:var(--steel-deep);line-height:1.2}
.dataset-map .box.horizon{border-left-color:var(--steel-deep);background:#eef6ff}
.dataset-map .conshint{border-left:4px solid #57708c;padding-left:9px;margin-top:6px;max-width:74ch}
body.depth-champion .dataset-map .box.gtm{display:none}
.dataset-map .legend, .dataset-map .sources{margin-top:16px;padding:15px 18px;border:1px solid var(--hair);border-radius:0;background:var(--paper);box-shadow:none}
.dataset-map .legend h2, .dataset-map .sources h2{margin:0 0 8px;font-size:1.4rem}
.dataset-map .legend p, .dataset-map .sources p{font-size:.92rem;line-height:1.45;margin:.4rem 0}
.dataset-map .legkey{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.dataset-map .legkey span{display:inline-flex;align-items:center;gap:7px;font-size:.88rem}
.dataset-map .swatch{width:18px;height:18px;border:1px solid var(--hair);border-radius:0}
.dataset-map .sources details{margin-top:6px}
.dataset-map .sources summary{cursor:pointer;font-family:var(--head);font-size:1.1rem}
.dataset-map .sources a{color:var(--steel-deep);word-break:break-word}
.dataset-map .sources li{font-size:.82rem;margin:3px 0;line-height:1.35}
.dataset-map .dclose{display:none}
@media (max-width:1080px){
  .dataset-map .layout{grid-template-columns:1fr}
  .dataset-map .card{width:calc(50% - 6px)}
  .dataset-map .drawer{position:fixed;left:50%;top:50%;bottom:auto;right:auto;margin:0;width:min(396px,calc(100vw - 24px));max-height:82vh;overflow:auto;border-radius:0;transform:translate(-50%,-46%);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .2s ease;z-index:60;box-shadow:none}
  .dataset-map .drawer.open{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .dataset-map .drawer::before{display:none}
  .dataset-map .dclose{display:block;position:sticky;top:0;margin:-18px -18px 8px -18px;padding:7px 15px;width:calc(100% + 36px);text-align:right;font-size:1.6rem;line-height:1;background:#fffef8;border:0;border-bottom:1px solid var(--hair);cursor:pointer;color:var(--ink);border-radius:0}
  html[data-theme="dark"] .dataset-map .dclose{background:#23262e;color:#e9e7e0}
}
@media (max-width:620px){
  .dataset-map .card{width:100%}
}
.dataset-map .gtmpanel{display:none;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 2px 11px}
body.depth-engine .dataset-map .gtmpanel{display:grid}
.dataset-map .gtmpanel div{font-size:.8rem;border-left:4px solid var(--both);background:#fff8df;border-radius:0;padding:6px 9px;line-height:1.25}
.dataset-map .gtmpanel b{display:block;color:#8a6d12;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.dataset-map .card{transition:transform .12s,opacity .28s ease,filter .28s ease}
.dataset-map .card.faded{opacity:.17;filter:grayscale(.65)}
.dataset-map .goalbar{display:none;flex-wrap:wrap;gap:7px;margin:0 2px 8px;align-items:center}
body.insight-build .dataset-map .goalbar{display:flex}
.dataset-map .goalbar .gl{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:2px}
.dataset-map .goalbar button{font-size:.92rem}
.dataset-map .goalbar button.active{background:var(--up);color:#fff;box-shadow:none}
.dataset-map .insightbanner{font-size:.98rem;color:#33414f;margin:0 2px 12px;min-height:1.2em;max-width:1120px}
.dataset-map .insightbanner .brk{color:var(--down);font-weight:700}
.dataset-map .insightbanner .ok{color:var(--up);font-weight:700}
.dataset-map .insightbanner .optcount{display:block;margin-top:4px;font-size:.85rem;color:var(--muted)}
.dataset-map #insight button.active{background:var(--up);color:#fff;box-shadow:none}
.dataset-map .card.cand{outline:2.5px dashed var(--up);outline-offset:2px}
.dataset-map .card.cand.proven{outline-style:solid;outline-width:3px}
.dataset-map .card.cand.proven::after{content:"proven";position:absolute;left:10px;top:-10px;background:var(--up);color:#fff;font-size:.62rem;font-family:var(--body);padding:0 7px;border-radius:0;border:1.5px solid var(--hair);transform:none}
.dataset-map .card.brk-node{outline:3px solid var(--down);outline-offset:2px;animation:map-pulsebrk 1.3s infinite}
@keyframes map-pulsebrk{0%,100%{outline-color:var(--down)} 50%{outline-color:rgba(194,65,45,.22)}}
.dataset-map .card.imp-node{outline:3px solid var(--down);outline-offset:2px}
.dataset-map #insight button.active[data-view="imports"]{background:var(--down);color:#fff;box-shadow:none}
.dataset-map .axes{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.dataset-map .axchip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;border:1px solid var(--hair);border-radius:0;padding:2px 9px;background:var(--paper)}
.dataset-map .axchip b{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.dataset-map .axchip.good{background:var(--up-bg);border-color:var(--up)}
.dataset-map .axchip.mid{background:var(--both-bg);border-color:var(--both)}
.dataset-map .axchip.bad{background:var(--down-bg);border-color:var(--down)}
.dataset-map .axchip.na{opacity:.55;border-style:dashed}
.dataset-map .axnote{font-size:.8rem;color:var(--muted);margin:5px 0 0;line-height:1.35}
.dataset-map .card.lens-good{outline:3px solid var(--up);outline-offset:2px}
.dataset-map .card.lens-mid{outline:3px solid var(--both);outline-offset:2px}
.dataset-map .card.lens-bad{outline:3px solid var(--down);outline-offset:2px}
.dataset-map #insight button.active[data-view="lens"]{background:var(--steel-deep);color:#fff;box-shadow:none}
body.insight-lens .dataset-map .goalbar{display:flex}
body.insight-lens .dataset-map .goalbar button.active{background:var(--steel-deep);color:#fff;box-shadow:none}
.dataset-map .simple-legend{display:none;font-size:.88rem;color:var(--muted);margin:0 2px 12px}
body.view-simple .dataset-map .simple-legend{display:block}
body.view-simple .dataset-map #insight, body.view-simple .dataset-map #tiers, body.view-simple .dataset-map #overlay, body.view-simple .dataset-map #search, body.view-simple .dataset-map .hint{display:none}
body.view-simple .dataset-map .goalbar{display:flex}
body.view-simple .dataset-map .legend, body.view-simple .dataset-map .sources{display:none}
body.view-simple .dataset-map .goalbar button{font-size:1rem}
.dataset-map #viewmode #viewToggle{background:var(--steel-deep);color:#fff;box-shadow:none}
@media (max-width:620px){
  body.view-simple .dataset-map .goalbar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  body.view-simple .dataset-map .goalbar button{flex:0 0 auto}
}
body.insight-build .dataset-map .layer{transition:opacity .3s ease,border-color .3s ease,background-color .3s ease}
.dataset-map .layer.lit{border-color:var(--up);border-style:solid;background:rgba(47,158,95,.06)}
.dataset-map .layer.broke{border-color:var(--down);border-style:solid;border-width:1px;background:rgba(194,65,45,.15)}
.dataset-map .layer.dim{opacity:.34}
.dataset-map .layer-readout{font-family:var(--head);font-size:1.12rem;flex:0 0 auto;padding:0 11px;border-radius:0;border:1px solid currentColor;white-space:nowrap}
.dataset-map .layer-readout.r-lit{color:var(--up)}
.dataset-map .layer-readout.r-broke{color:var(--down)}
.dataset-map .layer-readout.r-dim{color:var(--muted);font-size:1rem}
body.insight-build .dataset-map .card .champ{display:none}
@media (prefers-reduced-motion:reduce){
  .dataset-map .card, body.insight-build .dataset-map .layer{transition-duration:.01ms}
  .dataset-map .card.brk-node{animation:none}
}
.dataset-map #themeBtn{font-size:.85rem}
html[data-theme="dark"] .dataset-map body{background:none;color:#e9e7e0}
html[data-theme="dark"] .dataset-map .hero, html[data-theme="dark"] .dataset-map .board, html[data-theme="dark"] .dataset-map .drawer, html[data-theme="dark"] .dataset-map .legend, html[data-theme="dark"] .dataset-map .sources{background:rgba(32,35,42,.93);border-color:#0c0d10}
html[data-theme="dark"] .dataset-map .subtitle, html[data-theme="dark"] .dataset-map .crosslink, html[data-theme="dark"] .dataset-map .layer-head .verdict, html[data-theme="dark"] .dataset-map .card p, html[data-theme="dark"] .dataset-map .drawer p, html[data-theme="dark"] .dataset-map .legend p, html[data-theme="dark"] .dataset-map .sources p{color:#c5c8d0}
html[data-theme="dark"] .dataset-map .card{background:#23262e;box-shadow:none}
html[data-theme="dark"] .dataset-map .card.eu{background:#1f2b24}
html[data-theme="dark"] .dataset-map .card.operated{background:#2c2517}
html[data-theme="dark"] .dataset-map .card.dependency{background:#2e1d1a}
html[data-theme="dark"] .dataset-map .group, html[data-theme="dark"] .dataset-map button{background:#23262e;color:#e9e7e0;border-color:#0c0d10}
html[data-theme="dark"] .dataset-map button.active{color:#fff}
html[data-theme="dark"] .dataset-map input{background:#1d2027;color:#e9e7e0}
html[data-theme="dark"] .dataset-map .layer{border-color:#3a3f48}
html[data-theme="dark"] .dataset-map .box{background:#1d2027}
html[data-theme="dark"] .dataset-map .box.weak{background:#2a1c1a}
html[data-theme="dark"] .dataset-map .box.gtm, html[data-theme="dark"] .dataset-map .gtmpanel div{background:#2a2614}
html[data-theme="dark"] .dataset-map .box.part{background:#241f2e}
html[data-theme="dark"] .dataset-map .box.latest{background:#1b2a20}
html[data-theme="dark"] .dataset-map .axchip{background:#23262e}
html[data-theme="dark"] .dataset-map .axchip.good{background:#1f2b24}
html[data-theme="dark"] .dataset-map .axchip.mid{background:#2c2517}
html[data-theme="dark"] .dataset-map .axchip.bad{background:#2e1d1a}
html[data-theme="dark"] .dataset-map .axchip b, html[data-theme="dark"] .dataset-map .axnote{color:#9aa1ac}
/* max-width is a backstop, not the fix. drawWires sizes this overlay from the board, and the
   real repair is that it now resets before measuring. But an svg width attribute is a CSS
   declaration, so a stale one can widen the page on its own, and a page that scrolls sideways
   on a phone is a bad enough defect to be worth two independent guards. */
.dataset-map .wires{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible;max-width:100%}
.dataset-map .box.part{border-left-color:var(--steel-deep);background:#f3eefc}
.dataset-map .box.part ul{margin:6px 0 0 16px;padding:0}
.dataset-map .box.part li{font-size:.86rem;margin:4px 0;line-height:1.3}
.dataset-map .box.latest{border-left-color:#2f9e5f;background:#edfaf0}
.dataset-map .box.roadmap{border-left-color:#1f6fc4;background:#eef6ff}
html[data-theme="dark"] .dataset-map .box.roadmap{background:#1a2230}
.dataset-map .box.latest a, .dataset-map .box.part a{color:#1f6fc4;text-decoration:none;font-weight:700;white-space:nowrap}
.dataset-map .box.part a:hover{text-decoration:underline}
.dataset-map #overlay button.active{background:var(--steel-deep);color:#fff;box-shadow:none}
