/* NEX HOUSE — premium skin for the tool pages. Loaded AFTER each tool's own <style>,
   so it re-maps their colour tokens (both naming schemes) to the NEX HOUSE palette. */

/* ---------- DARK (default) ---------- */
html:root[data-theme="dark"]{
  color-scheme:dark;
  --nx-line:rgba(255,255,255,.09); --nx-glow:0,234,255;
  /* toolkit tokens */
  --bg:#050505; --panel:#0c0c12; --ink:#f4f6fb; --mute:#9697a8; --line:rgba(255,255,255,.10);
  --acc:#00eaff; --acc2:#2979ff; --onacc:#04060a;
  --bad:#ff6b81; --warn:#f4d78a; --ok:#4fe0b5;
  --soft:rgba(0,234,255,.10); --dot:rgba(255,255,255,.05);
  --sh:0 0 0 1px rgba(0,234,255,.04),0 28px 50px -30px rgba(0,0,0,.9);
  --fd:'Rajdhani','Segoe UI',system-ui,sans-serif; --fb:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  /* auditor tokens */
  --surface:#0c0c12; --raised:#12121a; --sunken:#17171f; --fg:#f4f6fb; --muted:#9697a8;
  --accent:#00eaff; --accent2:#2979ff; --accent-fg:#04060a; --accent-soft:rgba(0,234,255,.10); --code-bg:#08080c;
  --glow:rgba(0,234,255,.10); --glow2:rgba(155,92,255,.08);
  --shadow:0 0 0 1px rgba(0,234,255,.04),0 28px 50px -30px rgba(0,0,0,.9);
  --g1:#00eaff; --g2:#2979ff; --good:#4fe0b5;
  --font-display:'Rajdhani','Segoe UI',system-ui,sans-serif; --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}
/* ---------- LIGHT ---------- */
html:root[data-theme="light"]{
  color-scheme:light;
  --nx-line:rgba(20,22,32,.13); --nx-glow:0,121,143;
  --bg:#f4f1ea; --panel:#ffffff; --ink:#14151c; --mute:#5b5e70; --line:rgba(20,22,32,.13);
  --acc:#00798f; --acc2:#1f5fd6; --onacc:#ffffff;
  --bad:#c21f3e; --warn:#946f0c; --ok:#127a4a;
  --soft:rgba(0,121,143,.09); --dot:rgba(20,22,32,.07);
  --sh:0 1px 2px rgba(20,22,32,.06),0 24px 44px -30px rgba(20,22,32,.35);
  --fd:'Rajdhani','Segoe UI',system-ui,sans-serif; --fb:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --surface:#ffffff; --raised:#f8f6f0; --sunken:#ece8df; --fg:#14151c; --muted:#5b5e70;
  --accent:#00798f; --accent2:#1f5fd6; --accent-fg:#ffffff; --accent-soft:rgba(0,121,143,.09); --code-bg:#f6f4ee;
  --glow:rgba(0,121,143,.10); --glow2:rgba(148,111,12,.07);
  --shadow:0 1px 2px rgba(20,22,32,.06),0 24px 44px -30px rgba(20,22,32,.35);
  --g1:#00798f; --g2:#1f5fd6; --good:#127a4a;
  --font-display:'Rajdhani','Segoe UI',system-ui,sans-serif; --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- Atmosphere ---------- */
html:root body{
  background-color:var(--bg);
  background-image:
    radial-gradient(60% 40% at 88% -6%,rgba(var(--nx-glow),.13),transparent 70%),
    radial-gradient(50% 35% at 0% 0%,rgba(155,92,255,.08),transparent 70%),
    linear-gradient(var(--nx-line) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,var(--nx-line) 1px,transparent 1px) 0 0/48px 48px;
  background-attachment:fixed;
  font-family:var(--fb);
}
html:root[data-theme="dark"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0,rgba(255,255,255,.02) 1px,transparent 1px,transparent 3px)}
::selection{background:var(--acc);color:var(--onacc)}

/* ---------- Typography ---------- */
h1,h2,h3,.logo h1,.cat h2{font-family:var(--fd)!important;letter-spacing:.02em!important;text-transform:uppercase}
h1{font-weight:700!important}
header>h1,.page h1,h1{background:linear-gradient(90deg,var(--ink),var(--acc));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo h1{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
.d,header>p,.cat small{font-family:var(--fb)}

/* ---------- Cut-corner HUD panels ---------- */
:root{--nx-c:16px}
main section,.panel,.fcard,.finding,.card,.ah-pal>div{
  border-radius:0!important;
  clip-path:polygon(var(--nx-c) 0,100% 0,100% calc(100% - var(--nx-c)),calc(100% - var(--nx-c)) 100%,0 100%,0 var(--nx-c));
  border-color:var(--line)!important;
  background-image:
    linear-gradient(var(--acc),var(--acc)) 0 var(--nx-c)/1.5px 14px no-repeat,
    linear-gradient(var(--acc),var(--acc)) var(--nx-c) 0/14px 1.5px no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% calc(100% - var(--nx-c))/1.5px 14px no-repeat,
    linear-gradient(var(--acc),var(--acc)) calc(100% - var(--nx-c)) 100%/14px 1.5px no-repeat;
}
.card{transition:transform .2s,border-color .2s,filter .2s}
.card:hover{filter:drop-shadow(0 0 18px rgba(var(--nx-glow),.28))}
.card b{font-family:var(--fd);font-size:18px!important;letter-spacing:.04em;text-transform:uppercase}
.item,.fixrow,pre,textarea,input,select,.md,.pv,.dl,.bar{border-radius:3px!important}
.item{border-radius:0 3px 3px 0!important}

/* ---------- Buttons / chips / tabs ---------- */
.go,.btn.primary,.btn-primary,button.primary,.icon-btn,.chip,nav button,.sevchip,.steps,.steps li,.fchip{border-radius:2px!important}
.go,.btn.primary,.btn-primary,button.primary{
  background:linear-gradient(135deg,var(--acc),var(--acc2))!important;color:var(--onacc)!important;border:0!important;
  font-family:var(--fd)!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;font-size:14px!important;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:none!important;transition:filter .2s,transform .12s;
}
.go:hover,.btn.primary:hover{filter:drop-shadow(0 0 14px rgba(var(--nx-glow),.55)) brightness(1.06)}
.go.alt{background:transparent!important;color:var(--ink)!important;border:1px solid var(--line)!important;clip-path:none}
.go.alt:hover{border-color:var(--acc)!important}
nav button{font-family:var(--fd)!important;font-weight:700!important;letter-spacing:.07em;text-transform:uppercase;font-size:13px!important}
nav button[aria-selected=true]{background:linear-gradient(135deg,var(--acc),var(--acc2))!important;color:var(--onacc)!important;box-shadow:0 0 22px -6px rgba(var(--nx-glow),.7)!important}
.chip,.icon-btn,.btn{font-family:var(--fd)!important;font-weight:600;letter-spacing:.05em}
.steps li.on{background:var(--accent-soft);color:var(--accent)}
.mark{border-radius:2px!important;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
textarea:focus,input:focus,select:focus{border-color:var(--acc)!important;box-shadow:0 0 0 3px var(--soft),0 0 18px -6px rgba(var(--nx-glow),.6)!important}
.score,.big{font-family:var(--fd)!important}

/* the old purple floating Back button -> NEX style */
#ah-fab-back{background:linear-gradient(135deg,var(--acc),var(--acc2))!important;color:var(--onacc)!important;border-radius:2px!important;
  font-family:'Rajdhani',system-ui,sans-serif!important;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 24px -6px rgba(var(--nx-glow),.7)!important;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.ah-foot .tag{border-radius:2px!important}

/* ---------- NEX top bar (injected by nex-tools.js) ---------- */
.ah-top .brand{display:none}
.nex-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;height:54px;padding:0 clamp(14px,3vw,28px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(var(--nx-glow),.18)}
.nex-bar a{text-decoration:none}
.nex-logo{display:flex;align-items:center;gap:10px;color:var(--ink);font:700 19px 'Rajdhani',sans-serif;letter-spacing:.14em;white-space:nowrap}
.nex-logo img{width:30px;height:30px;object-fit:cover;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.nex-logo span{color:var(--acc)}
.nex-crumb{font:500 11.5px var(--fm);color:var(--mute);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nex-crumb b{color:var(--acc);font-weight:500}
.nex-sp{flex:1}
.nex-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);color:var(--ink);font:700 12.5px 'Rajdhani',sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .2s,color .2s}
.nex-back:hover{border-color:var(--acc);color:var(--acc)}
nav,.navwrap{top:54px!important}
@media(max-width:640px){.nex-crumb{display:none}.nex-logo{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}