/* Groundtruth prototype design system.
   Palette derives from the Union Flag: Pantone 280 blue, Pantone 186 red, white.
   Used structurally (navigation, emphasis, alerting) rather than decoratively. */

:root{
  --uk-blue:#012169; --uk-red:#C8102E; --uk-white:#FFFFFF;
  --blue-900:#01143F; --blue-800:#012169; --blue-700:#062E86; --blue-600:#1C46A8;
  --blue-500:#3563C9; --blue-300:#8FA9E6; --blue-100:#DDE5F7; --blue-050:#F1F5FD;
  --red-700:#8E0A20; --red-600:#C8102E; --red-300:#F0A0AC; --red-050:#FDEEF1;
  --green-600:#0B6E4F; --green-050:#E7F4EF;
  --amber-600:#9A6300; --amber-050:#FDF3E2;
  --ink:#0B1220; --ink-2:#3A4356; --ink-3:#6B7488; --line:#E2E6EF;
  --bg:#F7F9FC; --surface:#FFFFFF; --surface-2:#FBFCFE;
  --radius:14px; --radius-sm:9px;
  --shadow-1:0 1px 2px rgba(1,20,63,.06),0 1px 3px rgba(1,20,63,.05);
  --shadow-2:0 4px 12px rgba(1,20,63,.08),0 2px 4px rgba(1,20,63,.04);
  --shadow-3:0 18px 40px rgba(1,20,63,.14),0 4px 12px rgba(1,20,63,.07);
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --ink:#EAEEF7; --ink-2:#B3BCD0; --ink-3:#7E8AA3; --line:#20293D;
  --bg:#070B15; --surface:#0D1424; --surface-2:#111A2D;
  --blue-050:#0E1930; --blue-100:#162440; --red-050:#2A0F16;
  --green-050:#0A1F19; --amber-050:#241A08;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px rgba(0,0,0,.45);
  --shadow-3:0 18px 44px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  /* Every number here is a measurement, so figures must align in columns.
     IBM Plex Sans carries tabular figures; tnum keeps digits monospaced so
     values line up down a column at the small sizes the tables use. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  transition:background .3s var(--ease),color .3s var(--ease)}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.021em;font-weight:650}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hide{display:none !important}

/* ---------- flag rule: the one overtly national device ---------- */
.flagrule{height:3px;display:flex;flex:none}
.flagrule i{flex:1}
.flagrule i:nth-child(1){background:var(--uk-blue)}
.flagrule i:nth-child(2){background:var(--uk-white)}
.flagrule i:nth-child(3){background:var(--uk-red)}
[data-theme="dark"] .flagrule i:nth-child(2){background:#8894AE}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
.app--wide{grid-template-columns:1fr}

.side{background:var(--blue-900);color:#C9D4EE;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden}
.side__brand{display:flex;align-items:center;gap:.65rem;padding:1.15rem 1.15rem .95rem}
.mark{width:31px;height:31px;border-radius:8px;background:linear-gradient(145deg,var(--blue-500),var(--uk-blue));
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;color:#fff;font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.side__name{font-weight:650;color:#fff;letter-spacing:-.01em}
.side__sub{font-size:10.5px;color:#7F92BF;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.side__scroll{overflow-y:auto;flex:1;padding:.4rem .6rem 1rem;scrollbar-width:thin}
.side__group{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#6F82B0;padding:1rem .55rem .4rem}
.navi{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:9px;
  color:#C9D4EE;font-size:13.5px;transition:background .16s var(--ease),color .16s var(--ease);position:relative}
.navi:hover{background:rgba(255,255,255,.07);color:#fff}
.navi.is-on{background:rgba(53,99,201,.3);color:#fff;font-weight:550}
.navi.is-on::before{content:'';position:absolute;left:-.6rem;top:50%;translate:0 -50%;
  width:3px;height:17px;border-radius:0 3px 3px 0;background:var(--uk-red)}
.navi__dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.navi__badge{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--uk-red);
  color:#fff;padding:.08rem .32rem;border-radius:20px}

/* Jump-to-a-system list: each row carries the system's icon, domain and live
   headline, so the sidebar is a scannable index rather than a list of names. */
.navx{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:9px;
  color:#C9D4EE;position:relative;transition:background .16s var(--ease),color .16s var(--ease)}
.navx:hover{background:rgba(255,255,255,.07);color:#fff}
.navx:hover .navx__ico{transform:scale(1.08)}
.navx.is-on{background:rgba(53,99,201,.3);color:#fff}
.navx.is-on::before{content:'';position:absolute;left:-.55rem;top:50%;translate:0 -50%;
  width:3px;height:22px;border-radius:0 3px 3px 0;background:var(--uk-red)}
.navx__ico{flex:none;width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  font-size:14px;line-height:1;background:rgba(255,255,255,.06);transition:transform .16s var(--ease)}
.navx.is-on .navx__ico{background:rgba(255,255,255,.14)}
.navx__tx{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;gap:.05rem}
.navx__nm{font-size:13px;font-weight:550;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navx__dm{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#7F92BF;line-height:1.1}
.navx__fig{flex:none;font-family:var(--mono);font-size:11px;color:#9FB0D8;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.navx:hover .navx__fig,.navx.is-on .navx__fig{color:#fff}

/* ---------- topbar ---------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:1rem;padding:.7rem 1.4rem}
.top__title{font-size:15px;font-weight:650}
.top__crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.spacer{margin-left:auto}

.switch{display:flex;background:var(--blue-050);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
.switch a{font-size:12px;padding:.3rem .62rem;border-radius:7px;color:var(--ink-2);
  transition:all .18s var(--ease);white-space:nowrap}
.switch a.is-on{background:var(--surface);color:var(--uk-blue);font-weight:600;box-shadow:var(--shadow-1)}
.switch a:hover:not(.is-on){color:var(--ink)}

.iconbtn{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);transition:all .18s var(--ease)}
.iconbtn:hover{background:var(--blue-050);border-color:var(--blue-300)}

.live{display:flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:10.5px;
  color:var(--green-600);background:var(--green-050);padding:.24rem .55rem;border-radius:20px;
  letter-spacing:.05em}
.live i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2.1s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

/* ---------- layout ---------- */
.main{min-width:0}
.pad{padding:1.5rem 1.4rem 3rem;max-width:1560px}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.stack{display:flex;flex-direction:column;gap:1rem}
.row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);overflow:hidden;transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.card--hov:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--blue-300)}
.card__hd{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.05rem;border-bottom:1px solid var(--line)}
.card__t{font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.card__s{font-size:11.5px;color:var(--ink-3)}
.card__b{padding:1.05rem}
.card__b--flush{padding:0}

.kpi{position:relative;padding:1.05rem 1.1rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.kpi::after{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent,var(--uk-blue))}
.kpi__l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kpi__v{font-size:29px;font-weight:680;letter-spacing:-.032em;margin-top:.35rem;font-variant-numeric:tabular-nums}
.kpi__m{font-size:11.5px;color:var(--ink-3);margin-top:.15rem}
.kpi__spark{position:absolute;right:.8rem;bottom:.8rem;opacity:.5}

.tag{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:10px;
  letter-spacing:.05em;padding:.16rem .45rem;border-radius:5px;background:var(--blue-050);
  color:var(--blue-700);border:1px solid var(--blue-100);white-space:nowrap}
.tag--ok{background:var(--green-050);color:var(--green-600);border-color:transparent}
.tag--warn{background:var(--amber-050);color:var(--amber-600);border-color:transparent}
.tag--bad{background:var(--red-050);color:var(--red-600);border-color:transparent}

/* ---------- map ---------- */
.mapwrap{position:relative;background:linear-gradient(170deg,var(--blue-050),var(--surface));
  border-radius:var(--radius);overflow:hidden}
.mapsvg{display:block;width:100%;height:auto}
.mapsvg path{stroke:var(--surface);stroke-width:.35;cursor:pointer;
  transition:fill .5s var(--ease),opacity .2s var(--ease),stroke-width .2s var(--ease)}
.mapsvg path:hover{stroke:var(--ink);stroke-width:1.1;opacity:.92}
.mapsvg path.is-sel{stroke:var(--uk-red);stroke-width:1.5}
.maptip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;padding:.5rem .68rem;
  border-radius:9px;font-size:12px;box-shadow:var(--shadow-3);opacity:0;transform:translateY(4px);
  transition:opacity .16s var(--ease),transform .16s var(--ease);z-index:20;max-width:240px}
.maptip.on{opacity:1;transform:translateY(0)}
.maptip b{display:block;font-size:12.5px;margin-bottom:.15rem}
.maptip span{color:#A9B6D4;font-family:var(--mono);font-size:11px}
.legend{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.legend__bar{height:8px;width:132px;border-radius:4px;
  background:linear-gradient(90deg,var(--blue-100),var(--blue-500),var(--blue-900))}

/* ---------- charts ---------- */
.bars{display:flex;flex-direction:column;gap:.55rem}
.bar{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(46px,1.5fr) auto;align-items:center;gap:.6rem;font-size:12.5px}
.bar__n{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__t{height:9px;min-width:40px;background:var(--blue-050);border-radius:5px;overflow:hidden}
.bar__f{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--blue-500),var(--uk-blue));
  width:0;transition:width 1.1s var(--ease-out)}
.bar__v{text-align:right;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}

.donut{display:block}
.donut circle{transition:stroke-dasharray 1.2s var(--ease-out)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;padding:.55rem 1.05rem;border-bottom:1px solid var(--line);
  background:var(--surface-2);position:sticky;top:0;z-index:2}
.tbl td{padding:.6rem 1.05rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
.tbl tbody tr{transition:background .14s var(--ease)}
.tbl tbody tr:hover{background:var(--blue-050)}
.tbl td:first-child{color:var(--ink);font-weight:550}

/* ---------- alerts / feed ---------- */
.feed{display:flex;flex-direction:column}
.fitem{display:flex;gap:.75rem;padding:.8rem 1.05rem;border-bottom:1px solid var(--line);
  transition:background .16s var(--ease)}
.fitem:hover{background:var(--blue-050)}
.fitem:last-child{border-bottom:0}
.fitem__i{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:600}
.fitem__t{font-size:13px;font-weight:600}
.fitem__d{font-size:12px;color:var(--ink-3);margin-top:.1rem}
.fitem__m{font-family:var(--mono);font-size:10px;color:var(--ink-3);margin-top:.28rem;
  display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- pipeline ---------- */
.pipe{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:.2rem}
.pipe__s{flex:1;min-width:118px;position:relative;padding:.75rem .8rem;background:var(--surface-2);
  border:1px solid var(--line);transition:all .25s var(--ease)}
.pipe__s:first-child{border-radius:9px 0 0 9px}
.pipe__s:last-child{border-radius:0 9px 9px 0}
.pipe__s+.pipe__s{border-left:0}
.pipe__s:hover{background:var(--blue-050);border-color:var(--blue-300);z-index:2}
.pipe__n{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.08em}
.pipe__t{font-size:12.5px;font-weight:600;margin-top:.22rem}
.pipe__v{font-family:var(--mono);font-size:11px;color:var(--blue-600);margin-top:.28rem}

/* ---------- spine diagram ---------- */
.spine{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center}
.spine__c{padding:.85rem;border-radius:11px;border:1px dashed var(--blue-300);background:var(--blue-050)}
.spine__k{width:44px;height:44px;border-radius:12px;background:var(--uk-blue);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;
  box-shadow:var(--shadow-2)}

/* ---------- misc ---------- */
.srch{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:.42rem .7rem;min-width:230px;transition:all .2s var(--ease)}
.srch:focus-within{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-050)}
.srch input{border:0;background:none;outline:0;font-size:13px;width:100%;color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:8px;
  font-size:12.5px;font-weight:550;background:var(--uk-blue);color:#fff;
  transition:all .2s var(--ease);border:1px solid transparent}
.btn:hover{background:var(--blue-700);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn--ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
.btn--ghost:hover{background:var(--blue-050);color:var(--uk-blue);border-color:var(--blue-300)}
.btn--danger{background:var(--uk-red)}.btn--danger:hover{background:var(--red-700)}

.toggle{width:36px;height:20px;border-radius:20px;background:var(--line);position:relative;
  transition:background .25s var(--ease);flex:none}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-1);transition:transform .25s var(--ease-out)}
.toggle.on{background:var(--green-600)}
.toggle.on::after{transform:translateX(16px)}

.meter{height:5px;background:var(--blue-050);border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px;background:var(--blue-500);width:0;
  transition:width 1s var(--ease-out)}
.meter i.warn{background:var(--amber-600)} .meter i.bad{background:var(--uk-red)}
.meter i.ok{background:var(--green-600)}

/* ---------- animation ---------- */
.rise{opacity:0;transform:translateY(12px)}
.rise.in{opacity:1;transform:none;transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rise{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1200px){ .g4{grid-template-columns:repeat(2,1fr)} .g-2-1,.g-1-2{grid-template-columns:1fr} }
@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:246px;z-index:60;transform:translateX(-100%);
    transition:transform .3s var(--ease-out)}
  .side.open{transform:none;box-shadow:var(--shadow-3)}
  .g3{grid-template-columns:1fr}
}
@media (max-width:700px){ .g2,.g4{grid-template-columns:1fr} .pad{padding:1rem .9rem 3rem} }

/* ---------- system detail drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(1,20,63,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;z-index:90;transition:opacity .28s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(920px,94vw);background:var(--bg);
  z-index:100;box-shadow:var(--shadow-3);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .34s var(--ease-out)}
.drawer.on{transform:none}
.drawer__hd{flex:none;padding:1.15rem 1.4rem;border-bottom:1px solid var(--line);
  background:var(--surface);position:sticky;top:0;z-index:2}
.drawer__body{overflow-y:auto;padding:1.3rem 1.4rem 3rem;flex:1}
.drawer__close{position:absolute;top:1.1rem;right:1.2rem;width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;
  font-size:16px;line-height:1;transition:all .18s var(--ease)}
.drawer__close:hover{background:var(--red-050);border-color:var(--red-300);color:var(--uk-red)}
.step{display:flex;gap:.85rem;align-items:flex-start}
.step__n{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--uk-blue);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600}
.step__l{width:1px;flex:none;background:var(--line);margin:.3rem 0 0 11.5px}
.flowbar{display:flex;align-items:stretch;gap:0;overflow-x:auto;border:1px solid var(--line);
  border-radius:11px;background:var(--surface)}
.flowbar__s{flex:1;min-width:120px;padding:.7rem .8rem;border-right:1px solid var(--line)}
.flowbar__s:last-child{border-right:0}
.flowbar__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--ink-3)}
.flowbar__v{font-size:12.5px;font-weight:600;margin-top:.2rem}
.flowbar__d{font-size:11px;color:var(--ink-3);margin-top:.15rem}
@media (max-width:700px){ .drawer{width:100vw} }

/* ---------- landing hero ---------- */
.hero{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:
    radial-gradient(1200px 400px at 15% -20%, color-mix(in srgb,var(--uk-blue) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  position:relative}
.hero::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;display:flex;
  background:linear-gradient(90deg,var(--uk-blue) 0 33%,#fff 33% 66%,var(--uk-red) 66%)}
[data-theme="dark"] .hero::before{background:linear-gradient(90deg,var(--uk-blue) 0 33%,#8894AE 33% 66%,var(--uk-red) 66%)}
.hero__inner{padding:2.4rem 2.2rem 2.1rem;max-width:920px}
.hero__h{font-size:clamp(1.55rem,3.4vw,2.5rem);line-height:1.12;letter-spacing:-.03em;font-weight:680}
.hero__h em{font-style:normal;color:var(--uk-blue);position:relative}
[data-theme="dark"] .hero__h em{color:var(--blue-300)}
.hero__p{font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.6;color:var(--ink-2);
  margin-top:1rem;max-width:66ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.hero__cta .btn{padding:.55rem 1rem;font-size:13px}
@media (max-width:700px){ .hero__inner{padding:1.6rem 1.3rem} }

/* ---------- numbered section markers ---------- */
.secmark{display:flex;gap:1rem;align-items:flex-start;margin:2.6rem 0 1rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.secmark:first-of-type{border-top:0;padding-top:0;margin-top:1.8rem}
.secmark__n{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--uk-blue);
  background:var(--blue-050);border:1px solid var(--blue-100)}
[data-theme="dark"] .secmark__n{color:var(--blue-300)}
.secmark__k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--uk-red);font-weight:500}
.secmark__t{font-size:1.15rem;font-weight:650;letter-spacing:-.02em;margin-top:.15rem}
.secmark__s{font-size:12.5px;color:var(--ink-3);margin-top:.2rem;max-width:64ch}

/* ---------- rich system cards ---------- */
.syscard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);position:relative;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
/* WHAT/WHERE/WHO revealed on hover — the three dimensions, per card */
.wwwr{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-top:2px solid var(--uk-blue);
  padding:.75rem 1rem .85rem;display:grid;gap:.45rem;transform:translateY(101%);
  transition:transform .28s var(--ease);box-shadow:0 -10px 24px rgba(1,20,63,.10)}
.syscard:hover .wwwr,.syscard:focus-within .wwwr{transform:translateY(0)}
.wwwr__r{display:grid;grid-template-columns:48px 1fr;gap:.5rem;align-items:start;
  font-size:11.5px;line-height:1.35;color:var(--ink-2)}
.wwwr__k{font-family:var(--mono);font-size:9px;letter-spacing:.09em;color:var(--ink-3);padding-top:.12rem}
.wwwr__r--where .wwwr__k{color:var(--uk-blue)}
.wwwr__r--who .wwwr__k{color:var(--uk-red)}
.wwwr__none{color:var(--ink-3);font-family:var(--mono);font-size:10px;opacity:.7}
@media(prefers-reduced-motion:reduce){.wwwr{transition:none}}
.syscard:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--blue-300)}
.syscard__hd{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem .6rem}
.syscard__ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-size:16px;background:var(--blue-050);flex:none}
.syscard__name{font-size:14.5px;font-weight:650;letter-spacing:-.01em}
.syscard__dom{font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.syscard__purpose{padding:0 1rem;font-size:12px;color:var(--ink-2);line-height:1.45;min-height:34px}
.syscard__stat{padding:.7rem 1rem .3rem;display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.syscard__v{font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.syscard__u{font-size:15px;font-weight:600;color:var(--ink-2)}
.syscard__trend{font-family:var(--mono);font-size:11px;font-weight:600;padding:.05rem .3rem;border-radius:4px}
.syscard__trend.up{color:var(--uk-red);background:var(--red-050)}
.syscard__trend.down{color:var(--green-600);background:var(--green-050)}
.syscard__lab{padding:0 1rem;font-size:12px;color:var(--ink-2)}
.syscard__ctx{padding:.15rem 1rem 0;font-size:10.5px;color:var(--ink-3)}
.syscard__pv{padding:.7rem 1rem .2rem;margin-top:auto}
.syscard__foot{display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;margin-top:.6rem;border-top:1px solid var(--line)}
.syscard__explore{font-size:12px;font-weight:600;color:var(--uk-blue);display:inline-flex;align-items:center;gap:.3rem}
[data-theme="dark"] .syscard__explore{color:var(--blue-300)}
.syscard:hover .syscard__explore{gap:.5rem}
.fresh{display:inline-flex;align-items:center;gap:.32rem;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.03em;color:var(--ink-3)}
.fresh i{width:6px;height:6px;border-radius:50%;flex:none}
.fresh.current i{background:var(--green-600)}
.fresh.stale i{background:var(--warm,#9A6300)}
.fresh.unknown i{background:var(--ink-3)}

/* ---------- previews ---------- */
.pv{display:flex;flex-direction:column;gap:.3rem}
.pv__cap{font-size:10px;color:var(--ink-3);margin-top:.15rem;line-height:1.35}
.pv__gauge{position:relative;height:10px;border-radius:6px;background:var(--blue-050);overflow:hidden}
.pv__gaugefill{height:100%;border-radius:6px;transition:width 1s var(--ease-out)}
.pv__cmprow,.pv__brow{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:.4rem;font-size:11px}
.pv__cmpl,.pv__bl{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv__cmpt,.pv__bt{height:8px;background:var(--blue-050);border-radius:4px;overflow:hidden}
.pv__cmpt i,.pv__bt i{display:block;height:100%;border-radius:4px;background:var(--uk-blue);
  transition:width .9s var(--ease-out)}
.pv__cmpv,.pv__bv{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);text-align:right;white-space:nowrap;min-width:44px}
.pv__line{width:100%;height:54px;display:block}
.pv__note{font-size:11px;color:var(--ink-2);line-height:1.45;background:var(--surface-2);
  border-radius:8px;padding:.55rem .65rem;border:1px solid var(--line)}

/* ---- data journey (GT.journey): source to public, clickable ---- */
.jrnyhd{margin-bottom:.9rem}
.jn{display:flex;flex-direction:column;gap:0}
.jn__track{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem}
.jn__step{flex:1 1 0;min-width:110px;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  padding:.7rem .7rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .15s;position:relative}
.jn__step:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.jn__step.is-on{border-color:var(--blue-600);background:var(--blue-050);box-shadow:inset 0 0 0 1px var(--blue-600)}
.jn__ico{font-size:16px;line-height:1}
.jn__name{font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--ink)}
.jn__one{font-size:11px;color:var(--ink-3);line-height:1.25}
.jn__step.is-on .jn__one{color:var(--ink-2)}
.jn__arrow{flex:0 0 auto;align-self:center;color:var(--ink-3);padding:0 .25rem;font-size:14px;user-select:none}
.jn__panel{margin-top:.7rem}
.jn__pnl{border:1px solid var(--line);border-left:3px solid var(--blue-600);border-radius:10px;
  padding:.9rem 1rem;background:var(--surface)}
.jn__pnlhd{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.jn__pnlname{font-size:13px;font-weight:650;color:var(--ink)}
.jn__pnltext{font-size:13px;line-height:1.5;color:var(--ink-2);margin:0}
.jn__pnlstat{margin-top:.6rem;padding-top:.55rem;border-top:1px dashed var(--line);
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);line-height:1.5}
@media(max-width:640px){.jn__arrow{display:none}.jn__track{flex-wrap:wrap}.jn__step{min-width:calc(50% - .4rem);flex:1 1 calc(50% - .4rem)}}

/* ============ full system page ============ */
#syshost{position:fixed;inset:0;z-index:80;background:var(--bg);overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease)}
#syshost.on{opacity:1;visibility:visible}
.syspage{max-width:1080px;margin:0 auto;padding:0 1.25rem 4rem}
.sp-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 0;background:var(--bg);border-bottom:1px solid var(--line)}
.sp-back{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;
  padding:.42rem .8rem;font-size:13px;font-weight:550;cursor:pointer;transition:background .14s,border-color .14s}
.sp-back:hover{border-color:var(--ink-3);background:var(--blue-050)}
.sp-top__nav{display:flex;gap:.4rem}
.sp-step{width:34px;height:34px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:8px;font-size:17px;line-height:1;cursor:pointer;transition:background .14s,border-color .14s}
.sp-step:hover{border-color:var(--ink-3);background:var(--blue-050);color:var(--ink)}

.sp-hero{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1.7rem 0 1.1rem}
.sp-hero__ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:28px;
  background:var(--blue-050);border:1px solid var(--line)}
.sp-hero__kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-3)}
.sp-hero__h{font-size:32px;letter-spacing:-.02em;margin:.15rem 0 .3rem;line-height:1.05}
.sp-hero__sub{font-size:15px;color:var(--ink-2);max-width:60ch;line-height:1.4}
.sp-hero__fresh{align-self:start;white-space:nowrap}

.sp-nav{position:sticky;top:57px;z-index:4;display:flex;gap:.3rem;overflow-x:auto;padding:.5rem 0;
  background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
.sp-nav::-webkit-scrollbar{display:none}
.sp-nav__i{flex:0 0 auto;padding:.35rem .7rem;border-radius:20px;font-size:12.5px;color:var(--ink-3);
  white-space:nowrap;transition:background .14s,color .14s}
.sp-nav__i:hover{background:var(--blue-050);color:var(--ink)}
.sp-nav__i.is-on{background:var(--uk-blue);color:#fff;font-weight:550}

.sp-sec{padding:2rem 0 .5rem;scroll-margin-top:110px;border-bottom:1px solid var(--line)}
.sp-sec:last-of-type{border-bottom:none}
.sp-sec__h{font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1rem}
.sp-h{font-size:13px;font-weight:650;color:var(--ink);margin:.2rem 0 .6rem}
.sp-foot{padding:2rem 0 0;max-width:78ch}

.sp-lede{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.sp-lede__k{font-size:12px;font-weight:650;color:var(--uk-blue);margin-bottom:.4rem}
.sp-lede__i p{font-size:14px;line-height:1.55;color:var(--ink-2)}

.sp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.sp-cards--3{grid-template-columns:repeat(3,1fr)}
.sp-card{border:1px solid var(--line);border-radius:12px;padding:1rem 1.05rem;background:var(--surface)}
.sp-card__l{font-size:11.5px;color:var(--ink-3);letter-spacing:.01em;min-height:2.2em}
.sp-card__v{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:.25rem 0;
  font-variant-numeric:tabular-nums}
.sp-card__s{font-size:11.5px;color:var(--ink-3);line-height:1.35}

.sp-viz{border:1px solid var(--line);border-radius:14px;padding:1.2rem;background:var(--surface)}
.sp-viz__chart{min-height:40px}
.sp-viz__chart .mapsvg{max-height:560px;display:block;margin:0 auto}
.sp-explain{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.1rem;
  padding-top:1.1rem;border-top:1px dashed var(--line)}
.sp-explain__k{font-size:11px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.3rem}
.sp-explain__i p{font-size:13px;line-height:1.5;color:var(--ink-2)}

.sp-ins{display:grid;gap:.6rem}
.sp-ins__i{display:flex;gap:.7rem;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--ink)}
.sp-ins__b{flex:none;width:7px;height:7px;border-radius:50%;background:var(--uk-red);margin-top:.5rem}

.sp-src{border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;background:var(--surface)}

.sp-method{display:grid;gap:1rem}
.sp-method__row{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:start}
.sp-method__k{font-size:12px;font-weight:650;color:var(--uk-blue)}
.sp-method__row p{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.sp-defs{margin:0}
.sp-defs dt{font-size:13px;font-weight:600;color:var(--ink);margin-top:.5rem}
.sp-defs dt:first-child{margin-top:0}
.sp-defs dd{margin:.15rem 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}

.sp-rec__sum{cursor:pointer;font-size:13.5px;font-weight:550;color:var(--uk-blue);
  padding:.6rem .9rem;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  list-style:none;display:inline-flex;align-items:center;gap:.4rem}
.sp-rec__sum::-webkit-details-marker{display:none}
.sp-rec__sum::before{content:'▸';transition:transform .15s}
.sp-rec[open] .sp-rec__sum::before{transform:rotate(90deg)}

.sp-rels{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.sp-rel{display:flex;align-items:center;gap:.75rem;padding:.75rem .9rem;border:1px solid var(--line);
  border-radius:11px;background:var(--surface);transition:border-color .14s,background .14s}
.sp-rel:hover{border-color:var(--uk-blue);background:var(--blue-050)}
.sp-rel__ico{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:17px;
  background:var(--blue-050);flex:none}
.sp-rel__nm{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.sp-rel__why{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:.1rem}
.sp-rel__go{margin-left:auto;color:var(--ink-3);font-size:18px}

@media(max-width:820px){
  .sp-lede{grid-template-columns:1fr;gap:1rem}
  .sp-cards,.sp-cards--3{grid-template-columns:repeat(2,1fr)}
  .sp-explain{grid-template-columns:1fr;gap:.9rem}
  .sp-method__row{grid-template-columns:1fr;gap:.25rem}
  .sp-rels{grid-template-columns:1fr}
  .sp-hero{grid-template-columns:auto 1fr;gap:.8rem}
  .sp-hero__fresh{grid-column:1/-1}
  .sp-hero__h{font-size:26px}
}
@media(max-width:480px){ .sp-cards,.sp-cards--3{grid-template-columns:1fr} }

/* ---- system-page filters ---- */
.sp-flt{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.sp-flt__lab{font-size:12px;font-weight:600;color:var(--ink-2)}
.sp-flt__sel{font:inherit;font-size:13.5px;padding:.45rem 2rem .45rem .7rem;border:1px solid var(--line);
  border-radius:9px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236B7488' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .7rem center;
  color:var(--ink);cursor:pointer;min-width:220px;appearance:none;-webkit-appearance:none}
.sp-flt__sel:focus{border-color:var(--blue-500);outline:none}
.sp-flt__hint{font-size:12px;color:var(--ink-3)}
.sp-flt__out:empty{display:none}
.sp-flt__out{margin-top:1rem}
.sp-flt__head{font-size:15px;font-weight:650;color:var(--ink)}
.sp-yrs{display:flex;gap:.3rem;flex-wrap:wrap}
.sp-yr{font-family:var(--mono);font-size:12px;padding:.32rem .6rem;border:1px solid var(--line);
  border-radius:7px;background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:background .13s,border-color .13s,color .13s}
.sp-yr:hover{border-color:var(--ink-3);background:var(--blue-050)}
.sp-yr.is-on{background:var(--uk-blue);border-color:var(--uk-blue);color:#fff}
.mapsvg path.is-sel{stroke:var(--uk-blue);stroke-width:1.6;paint-order:stroke}

/* ---- the missing join (WHAT/WHERE/WHO + before->after story) ---- */
.mj__www{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-bottom:1.4rem}
.mj__w{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;background:var(--surface);position:relative;overflow:hidden}
.mj__w::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink-3)}
.mj__w--what::before{background:var(--ink-2)}
.mj__w--where::before{background:var(--uk-blue)}
.mj__w--who::before{background:var(--uk-red)}
.mj__wk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);font-weight:600}
.mj__w--where .mj__wk{color:var(--uk-blue)}
.mj__w--who .mj__wk{color:var(--uk-red)}
.mj__w p{font-size:13px;line-height:1.45;color:var(--ink);margin-top:.35rem}
.mj__flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:.5rem}
.mj__stage{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;background:var(--surface);
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i) * 70ms)}
[data-reveal].in .mj__stage,[data-reveal].in .mj__arrow{opacity:1;transform:none}
.mj__stage--before{background:var(--surface-2);border-style:dashed}
.mj__stage--connect{border-color:var(--blue-300)}
.mj__stage--after{border-color:var(--blue-300)}
.mj__stage--possible{border-color:var(--uk-red);box-shadow:inset 0 0 0 1px var(--red-050)}
.mj__lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.4rem}
.mj__stage--possible .mj__lab{color:var(--uk-red)}
.mj__stage p{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.mj__stage--possible p{color:var(--ink);font-weight:500}
.mj__arrow{align-self:center;color:var(--ink-3);font-size:18px;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i) * 70ms)}
@media(max-width:820px){
  .mj__www{grid-template-columns:1fr}
  .mj__flow{grid-template-columns:1fr}
  .mj__arrow{transform:rotate(90deg);justify-self:center;margin:-.2rem 0}
  [data-reveal].in .mj__arrow{transform:rotate(90deg)}
}
@media(prefers-reduced-motion:reduce){
  .mj__stage,.mj__arrow{transition:none;opacity:1;transform:none}
  .mj__flow [data-reveal]{opacity:1}
}

/* ---- comparison matrix (#compare) ---- */
.cmp{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.cmp__head,.cmp__row{display:grid;grid-template-columns:1.5fr 2fr 1.7fr 1.7fr .8fr;gap:1rem;
  padding:.85rem 1.1rem;align-items:center}
.cmp__head{background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cmp__head .cmp__cell--where{color:var(--uk-blue)}
.cmp__head .cmp__cell--who{color:var(--uk-red)}
.cmp__row{border-bottom:1px solid var(--line);transition:background .13s}
.cmp__row:last-child{border-bottom:none}
.cmp__row:hover{background:var(--blue-050)}
.cmp__sys{display:flex;align-items:center;gap:.6rem;min-width:0}
.cmp__ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:16px;
  background:var(--blue-050);flex:none}
.cmp__nm{display:block;font-size:14px;font-weight:650;color:var(--ink)}
.cmp__q{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.3;margin-top:.1rem}
.cmp__cell{font-size:12px;line-height:1.4;color:var(--ink-2)}
.cmp__cell--where{color:var(--ink)}
.cmp__none{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);opacity:.7}
.cmp__metric{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--uk-blue);
  font-variant-numeric:tabular-nums;text-align:right}
.cmp__cell[data-h]::before{display:none}
@media(max-width:860px){
  .cmp__head{display:none}
  .cmp__row{grid-template-columns:1fr;gap:.5rem;padding:1rem 1.1rem}
  .cmp__cell[data-h]::before,.cmp__metric[data-h]::before{content:attr(data-h) "  ";
    display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-3);margin-right:.4rem}
  .cmp__metric{text-align:left}
}

/* ---- CTA to the comparison matrix ---- */
.cmpcta{display:inline-flex;align-items:center;gap:.45rem;font-size:13px;font-weight:600;
  color:var(--uk-blue);border:1px solid var(--blue-300);border-radius:9px;padding:.45rem .85rem;
  background:var(--blue-050);transition:background .14s,border-color .14s}
.cmpcta:hover{background:var(--blue-100);border-color:var(--uk-blue)}

/* ---- organisation knowledge graph (#org) ---- */
.org-search{flex:1 1 auto;min-width:0;font:inherit;font-size:13.5px;padding:.5rem .8rem;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink)}
.org-search:focus{border-color:var(--blue-500);outline:none}
.org-toggle{display:flex;align-items:center;gap:.4rem;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.org-list{display:grid;gap:.5rem;margin-top:1rem}
.org-row{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid var(--line);
  border-radius:11px;background:var(--surface);transition:border-color .13s,background .13s}
.org-row:hover{border-color:var(--uk-blue);background:var(--blue-050)}
.org-row__main{flex:1 1 auto;min-width:0}
.org-row__nm{display:block;font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-row__foot{display:block;font-size:11.5px;color:var(--ink-3);margin-top:.15rem;font-variant-numeric:tabular-nums}
.org-row__sys{display:flex;gap:.35rem;flex:none}
.org-row__go{color:var(--ink-3);font-size:16px;flex:none}
.org-sys{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;padding:.15rem .45rem;border-radius:20px;white-space:nowrap}
.org-sys--bellwether{background:var(--red-050);color:var(--uk-red)}
.org-sys--sentinel{background:var(--blue-050);color:var(--uk-blue)}
/* profile graph */
.org-graph{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.7rem;align-items:center}
.org-col{display:grid;gap:.5rem;align-content:start}
.org-col__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.org-node{border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem;background:var(--surface);
  font-size:13px;font-weight:550;color:var(--ink);display:flex;flex-direction:column;gap:.2rem}
.org-node__k{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:var(--ink-3);font-weight:400}
.org-node--self{border-color:var(--uk-blue);box-shadow:inset 0 0 0 1px var(--uk-blue);background:var(--blue-050)}
.org-node--owner{border-left:3px solid var(--uk-red)}
.org-node--sys{transition:border-color .13s,background .13s}
.org-node--sys:hover{border-color:var(--uk-blue);background:var(--blue-050)}
.org-node--empty{color:var(--ink-3);font-weight:400;border-style:dashed}
.org-graph__arrow{color:var(--ink-3);font-size:18px;text-align:center}
.org-sec{padding:1.6rem 0 .5rem;border-top:1px solid var(--line)}
.org-bars{display:grid;gap:.4rem;margin-top:.6rem}
.org-bar{display:flex;justify-content:space-between;gap:1rem;font-size:13px;padding:.4rem .7rem;
  border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.org-bar span{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-bar b{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
@media(max-width:820px){
  .org-graph{grid-template-columns:1fr}
  .org-graph__arrow{transform:rotate(90deg)}
  .org-row{flex-wrap:wrap}
}

/* ---- top-bar search trigger ---- */
.topsearch{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:9px;
  padding:.4rem .7rem;background:var(--surface);color:var(--ink-3);font-size:12.5px;transition:border-color .14s,background .14s}
.topsearch:hover{border-color:var(--blue-300);background:var(--blue-050);color:var(--ink-2)}
.topsearch__ico{font-size:15px}
.topsearch__k{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:5px;
  padding:0 .35rem;color:var(--ink-3)}
@media(max-width:680px){.topsearch__t,.topsearch__k{display:none}}

/* ---- cross-system search overlay (#search) ---- */
.gs{max-width:760px;margin:0 auto;padding:1.5rem 1.25rem 4rem}
.gs__box{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);border-radius:12px;
  padding:.85rem 1.1rem;background:var(--surface);box-shadow:var(--shadow-1)}
.gs__box:focus-within{border-color:var(--uk-blue);box-shadow:inset 0 0 0 1px var(--uk-blue)}
.gs__ico{font-size:22px;color:var(--ink-3)}
.gs__input{flex:1;border:0;background:none;font:inherit;font-size:18px;color:var(--ink);outline:none}
.gs__hint{font-size:12px;color:var(--ink-3);margin:.6rem 0 1.2rem}
.gs__empty{padding:2rem 0;text-align:center;color:var(--ink-3);font-size:14px}
.gs__grp{margin-bottom:1.4rem}
.gs__gk{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.5rem}
.gs__r{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;padding:.65rem .8rem;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:.4rem;
  transition:border-color .12s,background .12s}
.gs__r:hover{border-color:var(--uk-blue);background:var(--blue-050)}
.gs__ri{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:16px;
  background:var(--blue-050);flex:none}
.gs__rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
.gs__rt b{font-size:14px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs__rt span{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs__rw{font-family:var(--mono);font-size:10px;color:var(--ink-3);flex:none}
.gs__rsys{display:flex;gap:.3rem;flex:none}