/* nx-editorial.css: one calm, editorial look for every page (DESIGN-2026-11, 2.51.0).
 *
 * The pattern from the blog (2.50.0), applied to the shared building blocks every page uses:
 * page header (.hero / .compact-hero), panels, cards, buttons, badges, chips, notices, tables,
 * forms, breadcrumbs and prose. Loaded after the global stylesheets and BEFORE a page's own
 * stylesheet. Rules apply inside <main> only, so navigation and footer look the same on every page;
 * headings, forms and tables of pages with their own design (homepage .hx, dashboard .ch, blog .bl)
 * are left to those designs.
 *
 * Principles: neutral surfaces with one hairline border, generous spacing, a clear type scale,
 * one blue for actions, colour only where it carries meaning. No glows, scanlines, corner brackets
 * or monospace labels for ordinary text. Nothing here hides or reorders content.
 */
:root{
  --ed-ink:#e7edf5; --ed-ink2:#c3cedc; --ed-mut:#8d9bb0; --ed-line:#1f2a3d; --ed-line2:#2b3a54;
  --ed-card:#111826; --ed-card2:#0d1420; --ed-acc:#5aa9ff; --ed-btn:#2f81f7; --ed-btn-h:#1f6feb;
  --ed-ok:#3fb950; --ed-warn:#d29922; --ed-crit:#f85149; --ed-r:14px; --ed-r-sm:10px;
}

/* ---------- type ---------- */
html body main{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html body main:not(:has(.hx, .bl, .ch)) h1{ letter-spacing:-.02em; line-height:1.15; font-weight:750; }
html body main:not(:has(.hx, .bl, .ch)) h2{ letter-spacing:-.01em; line-height:1.3; }
html body main .eyebrow, html body main .nx-eyebrow{
  font-family:var(--sans) !important; font-size:.76rem !important; font-weight:700 !important;
  letter-spacing:.08em !important; text-transform:uppercase; color:var(--ed-acc) !important; text-shadow:none !important;
}
html body main .muted{ color:var(--ed-mut); }
html body main .lead{ color:var(--ed-mut); font-size:1.08rem; line-height:1.65; }

/* ---------- breadcrumbs ---------- */
html body main .breadcrumbs{ font-family:var(--sans); font-size:.82rem; color:var(--ed-mut); letter-spacing:0; margin:4px 0 14px; }
html body main .breadcrumbs a{ color:var(--ed-mut); }
html body main .breadcrumbs a:hover{ color:var(--ed-ink); }

/* ---------- page header: open, like the blog, not a heavy box ---------- */
html body main .hero, html body main .compact-hero, html body main .nx-hero-v2{
  background:transparent !important; border:0 !important; border-bottom:1px solid var(--ed-line) !important;
  border-radius:0 !important; box-shadow:none !important; padding:14px 0 24px !important; margin-bottom:24px !important;
}
html body main .hero::before, html body main .hero::after, html body main .compact-hero::before, html body main .compact-hero::after{ display:none !important; }
html body main .hero h1, html body main .compact-hero h1{ font-size:clamp(1.8rem, 1.35rem + 1.8vw, 2.6rem); margin:6px 0 12px; }
html body main .hero p, html body main .compact-hero p{ color:var(--ed-mut); font-size:1.04rem; line-height:1.65; max-width:68ch; }
html body main .hero p.eyebrow, html body main .compact-hero p.eyebrow{ color:var(--ed-acc) !important; font-size:.76rem !important; margin:0 0 6px; }

/* ---------- panels and cards ---------- */
html body main .panel, html body main .neon-panel, html body main .nx-card, html body main .seo-prose{
  background:var(--ed-card) !important; border:1px solid var(--ed-line) !important; border-radius:var(--ed-r) !important;
  box-shadow:none !important; background-image:none !important;
}
html body main .panel::before, html body main .panel::after, html body main .neon-panel::before, html body main .neon-panel::after{ display:none !important; }
html body main .card{
  background:var(--ed-card) !important; border:1px solid var(--ed-line) !important; border-radius:var(--ed-r) !important;
  box-shadow:none !important; background-image:none !important;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
html body main a.card:hover, html body main .card:has(> a:only-child):hover, html body main .card.blog-card:hover{
  border-color:var(--ed-line2) !important; transform:translateY(-2px); box-shadow:0 14px 30px -20px rgba(0,0,0,.9) !important;
}
html body main .card h3{ font-size:1.02rem; line-height:1.35; }
html body main .card p{ color:var(--ed-ink2); }
@media (prefers-reduced-motion:reduce){ html body main .card{ transition:none; } html body main a.card:hover{ transform:none; } }

/* ---------- buttons ---------- */
html body main .btn{
  border-radius:var(--ed-r-sm) !important; min-height:40px; padding:9px 16px; font-weight:600; letter-spacing:0;
  background:var(--ed-btn) !important; border:1px solid var(--ed-btn) !important; color:#fff !important;
  box-shadow:none !important; text-shadow:none !important; background-image:none !important;
}
html body main .btn:hover{ background:var(--ed-btn-h) !important; border-color:var(--ed-btn-h) !important; transform:none; }
html body main .btn.secondary, html body main .btn.ghost{
  background:transparent !important; border:1px solid var(--ed-line2) !important; color:var(--ed-ink) !important;
}
html body main .btn.secondary:hover, html body main .btn.ghost:hover{ background:rgba(255,255,255,.04) !important; border-color:#43577a !important; }
html body main .btn.danger{ background:transparent !important; border-color:rgba(248,81,73,.55) !important; color:#ff8a84 !important; }
html body main .btn:focus-visible, html body main .chip:focus-visible{ outline:2px solid var(--ed-acc); outline-offset:2px; }

/* ---------- badges and chips: calm pills, colour = meaning ---------- */
html body main .badge{
  font-family:var(--sans) !important; letter-spacing:.02em; text-transform:none; font-weight:600;
  border-radius:999px; padding:2px 9px; font-size:.76rem; box-shadow:none !important; text-shadow:none !important;
}
html body main .chip{ border-radius:999px; font-weight:600; font-size:.84rem; box-shadow:none !important; }

/* ---------- notices ---------- */
html body main .notice{
  border-radius:var(--ed-r-sm) !important; border:1px solid var(--ed-line) !important; border-left:3px solid var(--ed-acc) !important;
  background:rgba(90,169,255,.05) !important; box-shadow:none !important; color:var(--ed-ink2);
}
html body main .notice.ok{ border-left-color:var(--ed-ok) !important; background:rgba(63,185,80,.06) !important; }
html body main .notice.warn{ border-left-color:var(--ed-warn) !important; background:rgba(210,153,34,.06) !important; }
html body main .notice.err, html body main .notice.crit{ border-left-color:var(--ed-crit) !important; background:rgba(248,81,73,.06) !important; }

/* ---------- tables ---------- */
html body main:not(:has(.hx, .bl, .ch)) table:not([role="presentation"]) th{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.04em; font-size:.76rem; font-weight:600; color:var(--ed-mut); background:transparent;
}
html body main:not(:has(.hx, .bl, .ch)) table:not([role="presentation"]) td, html body main:not(:has(.hx, .bl, .ch)) table:not([role="presentation"]) th{ border-color:var(--ed-line); }

/* ---------- forms ---------- */
html body main:not(:has(.hx, .bl, .ch)) input[type=text], html body main:not(:has(.hx, .bl, .ch)) input[type=email], html body main:not(:has(.hx, .bl, .ch)) input[type=url], html body main:not(:has(.hx, .bl, .ch)) input[type=search],
html body main:not(:has(.hx, .bl, .ch)) input[type=password], html body main:not(:has(.hx, .bl, .ch)) input[type=number], html body main:not(:has(.hx, .bl, .ch)) select, html body main:not(:has(.hx, .bl, .ch)) textarea{
  border-radius:var(--ed-r-sm); border:1px solid var(--ed-line2); background:var(--ed-card2); color:var(--ed-ink); box-shadow:none;
}
html body main:not(:has(.hx, .bl, .ch)) input:focus, html body main:not(:has(.hx, .bl, .ch)) select:focus, html body main:not(:has(.hx, .bl, .ch)) textarea:focus{ outline:2px solid var(--ed-btn); outline-offset:1px; border-color:var(--ed-btn); }
html body main:not(:has(.hx, .bl, .ch)) label{ color:var(--ed-ink2); }

/* ---------- prose inside panels: readable measure ---------- */
html body main .panel > p, html body main .seo-prose p, html body main .panel li{ line-height:1.7; }
html body main .seo-prose, html body main .panel.prose{ max-width:none; }
html body main .panel h2{ font-size:1.25rem; margin-top:1.2em; }
html body main .panel h2:first-child{ margin-top:0; }

/* ---------- grids breathe a little more ---------- */
html body main .grid{ gap:16px; }

/* a page header that is also a panel stays an open header (no box, no edge-to-edge text) */
html body main .panel.hero, html body main .panel.compact-hero, html body main .neon-panel.hero, html body main .neon-panel.compact-hero,
html body main .hero.neon-panel, html body main .compact-hero.panel{
  background:transparent !important; border:0 !important; border-bottom:1px solid var(--ed-line) !important; border-radius:0 !important;
}