/* JoeC Nightshift v2 — shared themes, primitives and responsive product shell.
   Loaded last on every public page, including generated Field Guide pages. */
:root {
  --bg:#08111f;--bg2:#0c192a;--surface:#101f34;--surface-2:#172b46;
  --line:#294563;--ink:#ecf6ff;--muted:#a9bfd5;--accent:#00d8ed;
  --accent-soft:#092f47;--blue:#71aaff;--paper:#e5effa;
  --ns-input:#0a1728;--ns-card:#0e2035;--ns-hover:#172f4c;
  --ns-header:#081522;--ns-code:#081827;--ns-action-ink:#031824;
  --ns-glow:rgba(0,216,237,.12);--ns-shadow:0 16px 48px rgba(0,0,0,.22);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --bg:#f6f8fc;--bg2:#eef3fa;--surface:#fff;--surface-2:#ecf3fd;
  --line:#cad8e9;--ink:#10243c;--muted:#4c607b;--accent:#006dcf;
  --accent-soft:#e1f0ff;--blue:#2759e8;--paper:#f3f7fd;
  --ns-input:#fff;--ns-card:#fff;--ns-hover:#e7f2ff;
  --ns-header:#fff;--ns-code:#eaf2fb;--ns-action-ink:#fff;
  --ns-glow:rgba(0,109,207,.09);--ns-shadow:0 12px 38px rgba(12,43,77,.09);
  color-scheme:light;
}
html{background:var(--bg)}body{background:var(--bg);color:var(--ink)}
h1,h2,h3{letter-spacing:-.038em}
.topline{height:2px;background:linear-gradient(90deg,#9b7cff,#4299ff,#00d8ed)}
.header{background:var(--ns-header);border-color:var(--line);box-shadow:0 6px 22px rgba(0,0,0,.08)}
.header-row{gap:18px;min-height:75px;height:75px}
.brand{gap:9px}
.brand-mark{width:44px;height:44px;display:block;flex:none;border:0;border-radius:10px;
 background:transparent url('/assets/images/nightshift-mark.svg') center/contain no-repeat}
.brand-mark span,.brand-mark i{display:none}
.brand-name{font-size:24px;letter-spacing:-.055em;color:var(--ink);line-height:1}
.brand-name .accent,.footer-logo .accent{color:var(--ink)}
.brand-name small{font-size:8px;color:var(--muted);letter-spacing:.13em;white-space:nowrap;margin-top:7px}
.nav{color:var(--ink);gap:clamp(8px,1.25vw,19px);font-weight:680}
.nav a:not(.nav-cta):hover,.nav a[aria-current="page"]{color:var(--accent)}
.nav .nav-cta{background:var(--accent);color:var(--ns-action-ink);border-radius:9px}
.nav .nav-cta[aria-current="page"]{color:var(--ns-action-ink)}
.ns-header-controls{display:flex;align-items:center;gap:7px;flex:none}
.ns-icon-button{display:inline-flex;gap:8px;align-items:center;justify-content:center;
 height:42px;min-width:42px;padding:0 11px;border:1px solid var(--line);
 color:var(--ink);background:var(--surface);border-radius:10px;font-size:15px;font-weight:750}
.ns-icon-button:hover{border-color:var(--accent);background:var(--ns-hover)}
.ns-header-search{font-size:12px;padding:0 12px}.ns-key{font:600 10px/1 ui-monospace,monospace;
 background:var(--bg2);border:1px solid var(--line);border-radius:5px;
 color:var(--muted);padding:5px 6px}
.ns-icon-button:focus-visible,.ns-sort select:focus-visible,.ns-palette input:focus-visible{
 outline:3px solid var(--accent);outline-offset:2px}
.btn,.nav-cta{transition:background .15s ease,border-color .15s ease,transform .15s ease}
.btn-primary{background:var(--accent);color:var(--ns-action-ink);border-color:transparent}
.btn-primary:hover,.nav-cta:hover{background:var(--blue);color:#fff}
.btn-outline{color:var(--ink);border-color:var(--line);background:var(--surface)}
.btn-outline:hover{color:var(--ink);border-color:var(--accent);background:var(--ns-hover)}
.text-link,.eyebrow{color:var(--accent)}
.nav a[aria-current="page"]{text-decoration:none;border-bottom:2px solid var(--accent)}
:focus-visible{outline-color:var(--accent)}
.section-soft{background:var(--bg2);border-color:var(--line)}
.section{padding-top:68px;padding-bottom:68px}
.hero,.page-hero{background:var(--bg);border-color:var(--line)}
.page-hero{background-image:radial-gradient(ellipse at 86% 5%,var(--ns-glow),transparent 58%);padding:64px 0 55px}
.page-hero h1{font-size:clamp(2.25rem,4.5vw,4.3rem)}
.hero{background-image:radial-gradient(ellipse at 70% 20%,var(--ns-glow),transparent 60%);padding:88px 0 72px}
.hero h1{font-size:clamp(2.9rem,5.4vw,5.4rem)}
.hero-sub,.page-hero p,.section-heading p{color:var(--muted)}
.gradient-text{background:linear-gradient(93deg,var(--accent),var(--blue));background-clip:text;color:transparent}
.eyebrow-hero{border-color:var(--line);background:var(--accent-soft);color:var(--accent)}
.eyebrow-dot{background:var(--accent);box-shadow:none}
.ns-hero .hero-content{max-width:700px}
.ns-hero .hero-layout{grid-template-columns:minmax(0,1.15fr) minmax(285px,.75fr);gap:44px}
.ns-hero h1{line-height:1.02}
.ns-hero-visual{position:relative;min-height:315px;display:grid;place-items:center;
 background:linear-gradient(145deg,var(--surface),var(--bg2));border:1px solid var(--line);
 border-radius:24px;overflow:hidden;box-shadow:var(--ns-shadow)}
.ns-hero-visual:before{content:'';position:absolute;inset:0;
 background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
 background-size:27px 27px;opacity:.3;mask-image:linear-gradient(90deg,transparent,#000)}
.ns-hero-visual img{position:relative;width:min(66%,270px);filter:drop-shadow(0 15px 40px var(--ns-glow))}
.ns-hero-visual .ns-signal{position:absolute;bottom:22px;right:22px;border:1px solid var(--line);
 border-radius:7px;background:var(--surface);color:var(--muted);padding:8px 12px;
 font:600 10px ui-monospace,monospace;letter-spacing:.075em}
.ns-hero-search{width:100%;max-width:615px;display:flex;align-items:center;gap:11px;
 border:1px solid var(--line);background:var(--surface);color:var(--muted);
 border-radius:11px;padding:13px 17px;min-height:54px;text-align:left;box-shadow:var(--ns-shadow)}
.ns-hero-search:hover{border-color:var(--accent)}
.ns-hero-search .ns-search-label{flex:1}
.ns-proof{margin:16px 0 0;color:var(--muted);font-size:12px;display:flex;gap:16px;flex-wrap:wrap}
.ns-proof b{color:var(--accent)}
.ns-directory-stat{font-size:12px;font-weight:750;display:inline-block;border:1px solid var(--line);
 border-radius:10px;background:var(--surface);padding:11px 15px;color:var(--ink)}
.ns-directory-stat strong{font-size:22px;color:var(--accent);margin-right:8px}
.privacy-note{background:var(--accent-soft);border-color:var(--line);color:var(--ink);line-height:1.6;max-width:100%;font-weight:600}
.pill-row span{background:var(--surface);color:var(--ink);border-color:var(--line)}
.tool-card,.guide-card,.query-card,.runbook-card,.script-card,.teaser,
.price-card,.contact-form,.tool-panel,.concept-gallery-card{
 background:var(--ns-card);border:1px solid var(--line);color:var(--ink);box-shadow:none}
.tool-card{min-height:180px;border-radius:13px;padding:22px;gap:13px}
.tool-card:hover,.guide-card:hover,.query-card:hover{background:var(--ns-hover);border-color:var(--accent)}
.tool-card p,.tool-help p,.guide-card p,.price-card p,.script-card p,.teaser p{color:var(--muted)}
.tool-icon{background:var(--accent-soft);border-color:var(--line);color:var(--accent);
 width:45px;height:45px;border-radius:10px}
.tool-card[data-category="developer"] .tool-icon{color:#a991ff}
.tool-card[data-category="operations"] .tool-icon{color:#5ba7ff}
.tool-card[data-category="security"] .tool-icon{color:var(--accent)}
.card-arrow{color:var(--accent)}
.featured-tools .tool-card{border-top:2px solid var(--accent)}
.tool-toolbar{background:var(--surface);border-color:var(--line);flex-wrap:wrap}
.tool-toolbar input,.tool-toolbar select,.ns-sort select{
 border:1px solid var(--line);background:var(--ns-input);color:var(--ink);border-radius:9px;
 min-height:43px;padding:10px 12px}
.ns-sort{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:750;color:var(--ink)}
.ns-sort select{min-width:120px}
#toolcount{color:var(--muted);margin-left:auto}
.contact-form,.tool-panel{padding:28px;border-radius:16px;box-shadow:var(--ns-shadow)}
.contact-form label,.tool-panel label,.converter-panel>label:not(.converter-pick-label){color:var(--ink)}
.contact-form input,.contact-form select,.contact-form textarea,
.tool-panel input,.tool-panel select,.tool-panel textarea,
.converter-panel select,.converter-panel input[type=file],
.workbench-panel input,.workbench-panel textarea{
 background:var(--ns-input);color:var(--ink);border:1px solid var(--line);border-radius:10px;
 min-height:45px}
.tool-panel{display:flex;flex-direction:column;gap:9px}
.tool-panel :is(input,textarea,select):focus-visible,.contact-form :is(input,textarea,select):focus-visible{
 outline:3px solid var(--accent);outline-offset:2px}
.tool-panel .result-box,.result-box,.workbench-preview,.converter-selection,.converter-quality{
 background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.tool-panel .result-box{border-left:3px solid var(--accent);margin:14px 0}
.result-table span{color:var(--muted)}
.result-table strong{color:var(--ink)}
.tool-help{border-top:1px solid var(--line);margin-top:28px}
.breadcrumbs{color:var(--muted)}
.breadcrumbs a{color:var(--accent)}
.price-card.featured{background:var(--surface-2);border-color:var(--accent)}
.price-card .price,.price-card ul{color:var(--ink)}
.price-card .price small{color:var(--muted)}
.price-card .price-fine,.faq,.faq details{border-color:var(--line)}
.feature-label{background:var(--accent);color:var(--ns-action-ink)}
.services-preview{background:var(--bg2);color:var(--ink)}
.services-preview p,.services-preview .eyebrow{color:var(--muted)}
.bullet-row,.teaser b{color:var(--accent)}
.teaser,.guide-toc,.guide-topics a,.converter-aside-card,.converter-advice,
.converter-dropzone,.converter-file-row,.converter-quality,.converter-selection,
.converter-panel,.query-card,.runbook-card{background:var(--surface);color:var(--ink);border-color:var(--line)}
.converter-panel select,.converter-panel optgroup,.converter-panel option{background:var(--ns-input);color:var(--ink)}
.converter-step-number,.converter-upload-icon{background:var(--accent-soft);color:var(--accent);border-color:var(--line)}
.converter-pick-label{background:var(--accent);color:var(--ns-action-ink)}
.converter-presets button,.converter-icon-button{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.converter-presets button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.converter-mode-note,.converter-quality output,.converter-text-button{color:var(--accent)}
.converter-aside-card strong,.converter-file-info small,.converter-progress{color:var(--ink)}
.converter-help-section{background:var(--bg2)}
.guide-article p,.guide-article ul,.guide-article ol,.related-tools li,.related-guides li{color:var(--ink)}
.guide-article code{background:var(--surface-2);color:var(--ink)}
.guide-article pre,.script-card pre,.query-card pre{background:var(--ns-code);border-color:var(--line);color:var(--ink)}
.guide-article blockquote{background:var(--accent-soft)}
.guide-toc,.guide-topics a{color:var(--ink)}
.query-card code{color:var(--ink)}
.section-heading h2,.guide-article h2{color:var(--ink)}
.closing{background:linear-gradient(110deg,#105384,#016fa4);color:#fff}
.closing .eyebrow,.closing p{color:#e2f5ff}
.footer{background:var(--bg2);border-color:var(--line);color:var(--muted)}
.footer-logo{color:var(--ink)}.footer strong{color:var(--ink)}
.footer-bottom{border-color:var(--line)}
/* Search dialog: progressive enhancement, semantic dialog and focus management in JS. */
.ns-palette{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
 padding:clamp(35px,12vh,130px) 18px 25px;background:rgba(2,10,20,.76)}
.ns-palette[aria-hidden="false"]{display:flex}
.ns-palette-panel{width:min(100%,690px);max-height:min(78vh,730px);display:flex;flex-direction:column;
 background:var(--surface);border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 25px 75px #0007}
.ns-palette-header{display:flex;align-items:center;gap:12px;padding:17px;border-bottom:1px solid var(--line)}
.ns-palette input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:600 16px ui-sans-serif,system-ui;outline:0}
.ns-palette-header button{border:1px solid var(--line);background:var(--bg2);color:var(--ink);
 border-radius:8px;padding:7px 10px;min-height:38px;cursor:pointer}
.ns-palette-results{overflow-y:auto;padding:10px}
.ns-palette-results a{display:flex;align-items:center;justify-content:space-between;
 gap:14px;padding:13px;border-radius:10px;min-height:50px}
.ns-palette-results a:hover,.ns-palette-results a:focus-visible{background:var(--ns-hover)}
.ns-palette-results strong{color:var(--ink);font-size:14px}
.ns-palette-results small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.ns-palette-empty{padding:18px;color:var(--muted)}
body.ns-search-open{overflow:hidden}
/* Responsive mobile experience, full drawer + bottom shortcuts. */
.ns-bottom-nav{display:none}
@media(max-width:1120px){
 .header-row{gap:10px}
 .ns-header-search .ns-search-label,.ns-header-search .ns-key{display:none}
 .ns-header-search{min-width:42px;padding:0 10px}
 .brand-name small{display:none}
}
@media(max-width:1080px){
 .header-row{min-height:68px;height:auto;padding-top:8px;padding-bottom:8px;flex-wrap:nowrap}
 .ns-header-controls{margin-left:auto}
 .menu-toggle{margin-left:0!important;order:4;flex:none;background:var(--surface)!important;border-color:var(--line)!important}
 .menu-toggle span{background:var(--ink)!important}
 .nav{position:fixed!important;top:69px!important;left:auto!important;right:12px!important;
  width:min(calc(100vw - 24px),350px)!important;max-height:calc(100dvh - 90px);
  overflow-y:auto;flex-basis:auto!important;border:1px solid var(--line)!important;
  border-radius:14px;background:var(--surface)!important;box-shadow:var(--ns-shadow);
  padding:12px!important;gap:4px}
 .nav a{padding:12px 14px!important;border-radius:9px}
 .nav a:hover{background:var(--ns-hover)}
}
@media(max-width:900px){.ns-hero .hero-layout{grid-template-columns:1fr}.ns-hero-visual{display:none}}
@media(max-width:760px){
 .container{padding-left:18px;padding-right:18px}
 .header-row{min-height:66px}
 .brand-name{font-size:21px}
 .brand-mark{width:37px;height:37px}
 .ns-header-controls{gap:5px}
 .ns-icon-button{height:39px;min-width:39px;padding:0 9px}
 .ns-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--ns-header);
  border-top:1px solid var(--line);padding:7px max(7px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 35px #0002}
 .ns-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--muted);font-size:10px;gap:3px;padding:4px 2px;min-height:48px;text-align:center;border-radius:8px}
 .ns-bottom-nav a span:first-child{font-size:18px;line-height:1.15}
 .ns-bottom-nav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft);font-weight:800}
 body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
 .hero{padding:58px 0 47px}
 .ns-hero h1{font-size:clamp(2.8rem,10vw,4.3rem)}
 .ns-hero-search .ns-key{display:none}
 .section{padding-top:52px;padding-bottom:52px}
 .tool-grid{grid-template-columns:1fr}
 .featured-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
 .featured-tools .tool-card{padding:15px;min-width:0}
 .featured-tools .tool-card h3{font-size:15px;line-height:1.22}
 .featured-tools .tool-card p{font-size:12px}
 .tool-toolbar{gap:10px}
 .tool-toolbar label{width:auto}
 .tool-toolbar input{order:0;flex-basis:100%}
 .tool-toolbar select{min-width:0}
 .ns-sort{width:100%}
 .ns-sort select{flex:1}
 .ns-palette{padding:15px 9px 90px}
 .ns-palette-panel{max-height:calc(100dvh - 110px)}
 .tool-panel{padding:20px}
}
@media(max-width:410px){
 .featured-tools{grid-template-columns:1fr}
 .ns-icon-button .ns-key{display:none}
 .brand-name{font-size:19px}
 .brand-mark{width:33px;height:33px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important}}