/* Quiet navy chrome, readable articles and stable editing. */
html.ns-active { --hs-surface:color-mix(in srgb,var(--ns-panel) 96%,transparent); --he-panel:var(--ns-panel); --he-line:var(--ns-line); --he-accent:var(--ns-copper); }
html.ns-active:not(.halloween) { --hs-line:#304156; --hs-soft:#1a283a; }
html.ns-active .main-wrapper > .content { scroll-behavior:smooth; }
html.ns-active.ns-editing .main-wrapper > .content { scroll-behavior:auto; }
html.ns-active .content-page .page-hero-banner { padding-block:24px 28px; margin-bottom:28px; }
html.ns-active .content-page .phb-title { letter-spacing:-.035em; line-height:1.15; }
html.ns-active body #sidebar :is(.nav-item,.nav-group-header) { border-color:transparent; background:transparent; border-radius:7px; margin-block:3px; transition:background .18s,border-color .18s,color .18s; }
html.ns-active body #sidebar :is(.nav-item,.nav-group-header):hover { box-shadow:none; background:var(--hs-soft); }
html.ns-active body #sidebar :is(.nav-item.active,.nav-group-header:not(.collapsed)) { border-color:var(--ns-line); background:var(--hs-soft); box-shadow:inset 2px 0 var(--ns-copper); }
html.ns-active .ns-sidebar :is(.reader-favorites,.reader-recent,.ns-changes) { border-color:var(--ns-line); background:var(--ns-panel); border-radius:12px; box-shadow:0 8px 28px #00000012; }
html.ns-active .ns-sidebar :is(.reader-favorite-link,.reader-recent-link,.ns-change) { transition:background .18s,color .18s; }
html.ns-active .reader-article-tools { margin-bottom:24px; }
html.ns-active :is(.reader-star,.reader-settings-button) { border-color:var(--ns-line); background:var(--ns-panel); border-radius:7px; transition:border-color .18s,background .18s; }
html.ns-active :is(.reader-star,.reader-settings-button):hover { border-color:var(--ns-copper); background:var(--hs-soft); }
html.ns-active:not(.halloween) .content-page :is(.veh-rule-n,.veh-rule-kind,.veh-spawn,.veh-rank) { color:var(--ns-copper); }
html.ns-active:not(.halloween) body .main-wrapper .content-page :is(.veh-rule-kind--ban,.reg-kicker--danger,.reg-hl-crime,.czg-red,.st-red) { color:var(--ns-signal-danger) !important; }
html.ns-active:not(.halloween) body .main-wrapper .content-page :is(.veh-rule-kind--must,.czg-green) { color:var(--ns-signal-success) !important; }
html.ns-active:not(.halloween) .content-page .veh-rule-except { color:var(--ns-signal-warning); }
/* Colour carries meaning in the article; the app frame keeps its subdued navy. */
html.ns-active body .main-wrapper .content-page :is(.reg-hl,.czg-blue,.kr-code,.veh-rule-n) { color:var(--ns-signal-info); }
html.ns-active body .main-wrapper .content-page :is(.czg-code,.czg-radio,.c8-cmd,.c8-radio-cmd) {
 color:var(--ns-signal-success) !important;
 background:color-mix(in srgb,var(--ns-signal-success) 6%,var(--ns-panel)) !important;
 border-color:color-mix(in srgb,var(--ns-signal-success) 38%,var(--ns-line)) !important;
 border-left:3px solid var(--ns-signal-success) !important;
}
html.ns-active body .main-wrapper .content-page :is(.czg-highlight,.czg-red,.reg-hl-crime) { color:var(--ns-signal-danger) !important; }
html.ns-active body .main-wrapper .content-page .czg-green { color:var(--ns-signal-success) !important; }
html.ns-active body .main-wrapper .content-page .reg-item--warn .reg-num { color:var(--ns-signal-warning) !important; }
html.ns-active:not(.halloween) body .main-wrapper .content-page .km-head > div > .reg-kicker { color:var(--ns-signal-info); }
/* Rules and catalogue photos must never share the multi-column layout. */
html.ns-active body .main-wrapper .content-page .sl-lspd .veh-rules { display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:8px; padding:0; margin-bottom:30px; width:100%; min-width:0; }
html.ns-active body .main-wrapper .content-page .sl-lspd .veh-rules .veh-list { display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:8px; }
html.ns-active body .main-wrapper .content-page .sl-lspd .veh-rule { display:grid !important; grid-template-columns:28px 68px minmax(0,1fr) !important; gap:16px; align-items:start !important; width:100%; min-width:0; padding:16px 18px; border:1px solid var(--hs-line); border-radius:9px; background:var(--hs-surface); box-shadow:none; }
html.ns-active body .main-wrapper .content-page .veh-rule > .veh-rule-text { min-width:0; width:auto; font-size:13px; font-weight:500; line-height:1.65; overflow-wrap:anywhere; }
html.ns-active body .main-wrapper .content-page .veh-rule > .veh-rule-kind { padding-top:5px; }
html.ns-active body .main-wrapper .content-page .veh-rule > .veh-rule-n { padding-top:2px; }
html.ns-active body .main-wrapper .content-page .veh-rule > .row-edit-tools { position:absolute; }
html.ns-active .content-page .veh-find { border:1px solid var(--hs-line); background:var(--hs-surface); border-radius:10px; }
html.ns-active .content-page .veh-row { min-width:0; }
html.ns-active .content-page .veh-rankbar { flex-wrap:wrap; }
/* Hover tools don't insert markers into the editable document or move its caret. */
html.ns-active .content-page[contenteditable="true"] :is(.edit-flex-row,.edit-card-block,.card-content-row,.wyp-item):is(:hover,:focus-within) > .row-edit-tools { opacity:1 !important; pointer-events:auto; }
html.ns-active body .main-wrapper .content-page[contenteditable="true"] .veh-rule { padding:16px 88px 16px 18px !important; gap:16px !important; }
html.ns-active.ns-editing .session-toast { visibility:hidden; pointer-events:none; }
html.ns-active .reader-preview-dialog .content-page :is(.veh-rules,.veh-list:has(>.veh-rule)) { display:flex !important; flex-direction:column; gap:8px; }
html.ns-active .reader-preview-dialog .veh-rule-text { min-width:0; }
#lspdConnectionRetry { margin:20px auto 0; padding:12px 20px; display:block; border:1px solid #42566c; border-radius:8px; background:#142130; color:#dce6f0; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
#lspdConnectionRetry[hidden] { display:none; }
#lspdConnectionRetry:focus-visible { outline:2px solid #9fb4ca; outline-offset:3px; }
/* Search results explain where the matching content lives. */
html.ns-active #searchDropdown.reader-search-open { box-shadow:0 20px 52px #0006; padding:8px; }
html.ns-active .reader-search-heading { display:flex; align-items:center; min-height:38px; letter-spacing:.02em; }
html.ns-active .reader-search-result { padding:14px 38px 15px 14px; transition:background .15s; }
html.ns-active .reader-search-result::after { top:36px; }
html.ns-active .reader-search-category { display:block; margin-bottom:5px; color:var(--ns-copper); font-size:11px; font-weight:600; line-height:1.5; letter-spacing:.03em; overflow-wrap:anywhere; }
html.ns-active .reader-search-result > strong { color:var(--ns-copy); font-size:14px; line-height:1.45; }
html.ns-active .reader-search-result > .reader-search-excerpt { margin-top:6px; line-height:1.65; }
html.ns-active .reader-search-empty { padding:16px 14px 22px; color:var(--ns-muted); font-size:13px; }
html.ns-active .reader-search-suggestions { display:flex; flex-wrap:wrap; gap:7px; padding:12px 14px 16px; border-bottom:1px solid var(--ns-line); }
html.ns-active .reader-search-suggestions p { width:100%; margin:0 0 3px; color:var(--ns-muted); font-size:12px; line-height:1.6; }
html.ns-active .reader-search-suggestion { padding:6px 10px; border:1px solid var(--ns-line); border-radius:6px; background:var(--hs-soft); color:var(--ns-copy); font:inherit; font-size:12px; cursor:pointer; }
html.ns-active .reader-search-suggestion:is(:hover,:focus-visible) { border-color:var(--ns-copper); background:var(--bg-active,var(--ns-panel)); outline:2px solid transparent; }
html.ns-active .reader-search-alias { display:block; margin-top:7px; color:var(--ns-copper); font-size:10px; line-height:1.5; }
@media(max-width:600px) {
 html.ns-active body .main-wrapper .content-page .sl-lspd .veh-rule { grid-template-columns:24px minmax(0,1fr) !important; gap:7px 10px; padding:13px; }
 html.ns-active body .main-wrapper .content-page .veh-rule > .veh-rule-text { grid-column:1 / -1; }
 html.ns-active body .main-wrapper .content-page[contenteditable="true"] .veh-rule { padding-right:78px !important; }
 html.ns-active .content-page .page-hero-banner { padding-block:18px 22px; }
}
@media(prefers-reduced-motion:reduce) {
 html.ns-active .main-wrapper > .content { scroll-behavior:auto; }
 html.ns-active :is(.nav-item,.nav-group-header,.reader-star,.reader-settings-button,.reader-favorite-link,.reader-recent-link,.ns-change) { transition:none !important; }
}