/* Mark's five-gate ruling, 2026-11-08. Shared components only. */
.nk-bar {
  --nb-bg:#0d0d0d; --nb-ink:#f3f2ee; --nb-line:#3c3b35;
  --nb-tick-flagship:#f3f2ee; --nb-tick-chaosmagick:#ff3126;
  --nb-tick-truemage:#cdb64a; --nb-tick-romantasy:#f3f2ee;
  --nb-tick-popjunk:#ff6fae; --nb-tick-gzs:#e8a33d;
  --nb-tick-gourmetvet:#b5c986; --nb-tick-joeforrest:#d9707b;
  --nb-tick:var(--nb-tick-flagship); --nb-h:44px;
  --nb-mono:var(--mono,'Courier New',monospace);
  --nb-display:var(--disp,'Arial Narrow',Arial,sans-serif);
  position:static; z-index:auto; min-height:var(--nb-h); flex:none;
  background:var(--nb-bg); color:var(--nb-ink);
  box-shadow:inset 0 -1px var(--nb-line);
  font:700 11.52px/1 var(--nb-mono); text-align:left;
  container-type:inline-size;
}
.nk-bar[data-site="chaosmagick"] { --nb-tick:var(--nb-tick-chaosmagick) }
.nk-bar[data-site="truemage"] { --nb-tick:var(--nb-tick-truemage) }
.nk-bar[data-site="romantasy"] { --nb-tick:var(--nb-tick-romantasy) }
.nk-bar[data-site="popjunk"] { --nb-tick:var(--nb-tick-popjunk) }
.nk-bar[data-site="gzs"] { --nb-tick:var(--nb-tick-gzs) }
.nk-bar[data-site="gourmetvet"] { --nb-tick:var(--nb-tick-gourmetvet) }
.nk-bar[data-site="joeforrest"] { --nb-tick:var(--nb-tick-joeforrest) }
.nk-bar,.nk-bar *,.nk-footer,.nk-footer * { box-sizing:border-box }
/* Reserve Space Mono character advance while its local fallback is rendering. */
.nk-sister,.nk-member,.nk-signin,.nk-current,.nk-menu,.nk-menu-grid>a{font-size-adjust:ch-width .612}
.nk-bar a { color:var(--nb-ink); text-decoration:none; opacity:1 }
.nk-bar a:hover { text-decoration:underline; text-underline-offset:4px }
.nk-bar a:focus-visible,.nk-bar summary:focus-visible { outline:3px solid var(--nb-ink); outline-offset:2px }
.nk-bar [aria-current="true"] { position:relative }
.nk-bar [aria-current="true"]::after { content:""; position:absolute; inset:auto 8px 0; height:3px; background:var(--nb-tick) }
.nk-desktop { display:none; height:var(--nb-h); align-items:stretch; justify-content:flex-start }
.nk-desktop>a { display:flex; align-items:center; min-height:var(--nb-h); min-width:44px; white-space:nowrap; position:relative; text-align:left }
.nk-desktop .nk-flagship { flex:0 0 176px; padding-inline:12px; border-right:1px solid var(--nb-line); font:800 15px/1 var(--nb-display) }
.nk-desktop .nk-sister { flex:0 0 auto; padding-inline:12px; white-space:nowrap; min-width:44px }
.nk-desktop .nk-member { margin-left:auto; border-left:1px solid var(--nb-line); padding-inline:12px }
.nk-desktop .nk-signin { padding-inline:12px }
.nk-compact { position:relative; display:flex; align-items:stretch; height:44px }
/* Fixed basis, not min-width. The desktop flagship cell is already flex:0 0 176px for this reason;
   the compact cell was left to size to its glyphs, and it uses the DISPLAY font, which the
   font-size-adjust reservation above does not cover (that line lists only the mono labels).
   So on any site that supplies a real --disp webfont, the cell narrowed on font swap and dragged
   .nk-current with it: measured 0.00019 bar CLS on chaosmagick at 375 (Anton), nk-home 61px -> 56px,
   nk-current x 61 -> 56. Small, and still a nonzero bar CLS, which is the one number Mark's ruling
   put a zero against. 64px holds "NoO" at 17px in Anton (25.2px), Arial Narrow and Arial (35.9px)
   and the monospace fallback (30.7px) with the 24px padding, measured in Chromium, and stays well
   over the 44px touch floor. */
.nk-home { display:flex; align-items:center; flex:0 0 64px; min-height:44px; padding-inline:12px; border-right:1px solid var(--nb-line); font:800 17px/1 var(--nb-display) }
.nk-current { display:flex; flex:1; align-items:center; padding-inline:12px; white-space:nowrap }
.nk-menu { margin-left:auto }
.nk-menu summary { display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; list-style:none; min-height:44px; min-width:96px; padding-inline:12px }
.nk-menu summary::-webkit-details-marker { display:none }
.nk-menu summary::after { content:"▾" }
.nk-menu[open] summary::after { content:"▴" }
.nk-menu-grid { position:absolute; inset:100% 0 auto; z-index:60; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--nb-bg); border:1px solid var(--nb-line); box-shadow:0 3px 0 var(--nb-line) }
.nk-menu-grid>a { display:flex; align-items:center; min-height:44px; padding:10px 12px; white-space:nowrap; border-bottom:1px solid var(--nb-line); font:700 11.52px/1.3 var(--nb-mono) }
.nk-menu-grid>a:nth-last-child(-n+2) { white-space:normal }
.nk-footer { --nk-ink:var(--ink,var(--bone,#f3f2ee)); --nk-paper:var(--paper,var(--void,#0d0d0d)); --nk-rule:var(--rule,var(--line,#3c3b35)); color:var(--nk-ink); background:var(--nk-paper); padding:20px 16px; border:0; font:400 14px/1.5 var(--body,Arial,sans-serif) }
.nk-footer::before { content:""; display:block; height:7px; margin-bottom:20px; background:linear-gradient(var(--nk-ink),var(--nk-ink)) 0 0/100% 1px no-repeat,linear-gradient(var(--nk-ink),var(--nk-ink)) 0 3px/100% 2px no-repeat,linear-gradient(var(--nk-ink),var(--nk-ink)) 0 6px/100% 1px no-repeat }
.nk-footer-inner { max-width:1440px; margin-inline:auto }
.nk-footer h2 { margin:0 0 12px; color:inherit; font:700 11.52px/1.5 var(--mono,'Courier New',monospace); letter-spacing:.08em }
.nk-footer-sites,.nk-footer-doors { display:flex; flex-wrap:wrap; column-gap:24px }
.nk-footer-doors { border-top:1px solid var(--nk-rule); margin-top:12px; padding-top:8px }
.nk-footer a { display:inline-flex; align-items:center; min-width:44px; min-height:44px; color:inherit; opacity:1 }
.nk-footer a:focus-visible { outline:3px solid currentColor; outline-offset:2px }
@media(min-width:640px) { .nk-menu-grid { grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media(min-width:1024px) {
  .nk-desktop { display:flex }
  .nk-compact { display:none }
}
@media(min-width:1024px) and (pointer:fine) { .nk-bar { --nb-h:36px } }
/* A persistent OS rail can narrow the host below the viewport. Apply Mark's fit order.
   The visible row reserves its height at first paint, including the 44px compact fallback. */
@container(max-width:1000px) { .nk-desktop .nk-sister { padding-inline:8px } }
@container(max-width:944px) { .nk-desktop .nk-flagship { flex-basis:152px } }
@container(max-width:896px) {
  .nk-desktop { display:none }
  .nk-compact { display:flex }
}
/* TWO sites own an age gate, and they are built differently. Each needs its own rule, because a
   gate that covers the bar visually does not keep the bar out of the reader's reach.

   TrueMage: `.agegate` element, html gains `.age-ok` on confirmation. Preserve the gate's flow and
   scope while keeping the new doors out of its keyboard path. Offline has no agegate sibling and
   stays usable. */
html:not(.age-ok) .agegate ~ .nk-bar[data-site="truemage"],
html:not(.age-ok) .agegate ~ .nk-footer[data-site="truemage"] { visibility:hidden }
/* The existing confirmation focuses main. Reserve the added row in its focus-scroll geometry. */
.nk-bar[data-site="truemage"] ~ #main:focus { scroll-margin-top:44px }

/* chaosmagick: a different build, so the TrueMage selectors above do not reach it. Its gate is
   `.age#agegate` (not `.agegate`), it marks html `.age-pending` then `.age-open`, and it protects
   the page with `inert` + `aria-hidden` on `#page` plus a Tab cycle inside the gate.
   Two consequences for netkit, both found by reading age.js rather than trusting the gate to cover:
     1. The bar and footer sit OUTSIDE `#page`, so `inert` never reaches them. The gate's own Tab
        cycle still holds (it traps from within the gate, and the gate takes focus on open), but
        nothing should be visible behind an age gate that a reader has not answered.
     2. `.age-pending #page{visibility:hidden}` exists so a first-time visitor never sees the page
        flash before the gate. Chrome outside `#page` would have flashed straight through it, which
        is the one thing that behaviour was written to prevent. */
html.age-pending .nk-bar[data-site="chaosmagick"],
html.age-pending .nk-footer[data-site="chaosmagick"],
html.age-open .nk-bar[data-site="chaosmagick"],
html.age-open .nk-footer[data-site="chaosmagick"] { visibility:hidden }
@media print { .nk-bar,.nk-footer { display:none } }