/* site.css — NDEVR shared design system: components (layout, header + mega-menu, footer, account
   widget, buttons, sections). Pair with base.css. Served at /shared/css/site.css. */

.container{max-width:var(--ndevr-max);margin:0 auto;padding:0 22px}
.section{padding:64px 0}
.section--soft{background:var(--ndevr-bg-soft)}
.btn{display:inline-block;padding:10px 18px;border-radius:999px;background:var(--ndevr-gold);color:var(--nd-accent-contrast,#232323);
  font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:.92rem}
.btn--ghost{background:transparent;border:1px solid var(--ndevr-line);color:var(--ndevr-ink)}
.eyebrow{color:var(--ndevr-gold);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;margin-bottom:10px}

/* ===================== HEADER + MEGA-MENU ===================== */
.site-header{position:sticky;top:0;z-index:60;background:var(--ndevr-surface);
  border-bottom:1px solid var(--ndevr-line)}
/* When injected into a live WordPress page, the host theme also styles `.site-header`/`.site-footer` (and
   the header/footer tags) with a centered max-width + border-radius, and the body may be a centering flex
   container — either makes our chrome a narrow rounded box with different-colored side bands. Pin OUR
   injected chrome (unique ids) to full width, overriding the theme. */
header#siteHeader.site-header,footer#siteFooter.site-footer{
  width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;
  border-radius:0!important;left:0!important;right:0!important;align-self:stretch!important;
  float:none!important;box-shadow:none!important}
.site-header .bar{display:flex;align-items:center;gap:20px;min-height:64px}
.site-header .brand{flex:0 0 auto;display:flex;align-items:center}
.site-header .brand img{height:30px;width:auto}
.site-header .menu{display:flex;align-items:center;gap:2px;margin:0 auto 0 18px;padding:0;list-style:none}
.site-header .menu > li{position:relative}
.site-header .menu > li > a,.site-header .menu > li > .top{display:block;text-decoration:none;color:var(--ndevr-ink-soft);
  font-weight:600;font-size:.95rem;padding:20px 14px;cursor:pointer;border-bottom:3px solid transparent}
.site-header .menu > li:hover > a,.site-header .menu > li:hover > .top,
.site-header .menu > li:focus-within > a,.site-header .menu > li:focus-within > .top{color:var(--nd-text-strong,#fff);border-bottom-color:var(--ndevr-gold)}
.site-header .panel{position:absolute;top:100%;left:0;min-width:248px;background:var(--ndevr-surface);
  border:1px solid var(--ndevr-line);border-top:0;border-radius:0 0 12px 12px;box-shadow:var(--nd-shadow-2,0 18px 48px rgba(0,0,0,.55));
  padding:10px;display:none;z-index:70}
.site-header .menu > li:hover > .panel,.site-header .menu > li:focus-within > .panel{display:block}
.site-header .panel a{display:block;text-decoration:none;color:var(--ndevr-ink-soft);font-size:.92rem;padding:8px 12px;
  border-radius:8px;white-space:normal;line-height:1.35}
.site-header .panel a:hover{background:var(--nd-hover,#222732);color:var(--nd-text-strong,#fff)}
.site-header .panel.mega{display:none;left:0;min-width:680px;padding:20px;grid-template-columns:repeat(3,minmax(190px,1fr));gap:14px 36px}
.site-header .menu > li:hover > .panel.mega,.site-header .menu > li:focus-within > .panel.mega{display:grid}
.site-header .panel.mega .grp{min-width:0}
.site-header .panel.mega .grp > a.h{font-weight:700;color:var(--nd-text-strong,#fff);padding:6px 12px;border-bottom:1px solid var(--ndevr-line);margin-bottom:6px}
.site-header .header-actions{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-left:8px}
/* Collapsed-menu host (the site-menu BUTTON widget mounts here): hidden while the ribbon shows. */
.site-header .nd-menu-host{display:none;margin-left:auto}
/* Transition guard: a browser-cached old header.html still carries the retired ☰ .menu-toggle. */
.site-header .menu-toggle{display:none !important}
/* navMode:"button" (window.NDEVR_CHROME.navMode) — the header is ALWAYS the menu button, no ribbon. */
.site-header.nav-button-mode .menu{display:none !important}
.site-header.nav-button-mode .nd-menu-host{display:block}

/* Theme toggle (header ribbon). Shows the theme you'd switch TO: sun while dark, moon while light.
   Wired by site.js via [data-ndevr-theme-toggle]; state lives on html[data-theme]. */
.site-header .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;border:1px solid transparent;background:transparent;color:var(--ndevr-ink-soft);cursor:pointer;padding:0}
.site-header .theme-toggle:hover{background:var(--nd-hover,#222732);border-color:var(--ndevr-line);color:var(--nd-text-strong,#fff)}
.site-header .theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-header .theme-toggle .tt-moon{display:none}
html[data-theme="light"] .site-header .theme-toggle .tt-sun{display:none}
html[data-theme="light"] .site-header .theme-toggle .tt-moon{display:block}

/* Account widget. ndevr-forms.css forces the host-button look with all-!important rules, so we out-specify it:
   FLAT until hover / menu-open; beveled-square avatar. (forms.css stays for the dropdown menu / modal / card.) */
.site-header .ndevr-auth-btn,
.site-header .ndevr-auth-btn.ndevr-auth-in,
.site-header .ndevr-auth-btn.ndevr-auth-in:link,
.site-header .ndevr-auth-btn.ndevr-auth-in:visited,
.site-header .ndevr-auth-btn.ndevr-auth-in:focus,
.site-header .ndevr-auth-btn.ndevr-auth-in:active{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;
  width:auto!important;height:auto!important;padding:6px 11px!important;border-radius:10px!important;
  background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;
  color:var(--ndevr-ink-soft)!important;font:600 .95rem/1 var(--ndevr-font)!important;text-transform:none!important}
.site-header .ndevr-auth-btn.ndevr-auth-in:hover,
.site-header .ndevr-auth-btn.ndevr-auth-in.is-active{
  background:var(--nd-hover,#222732)!important;border-color:var(--ndevr-line)!important;box-shadow:none!important;color:var(--nd-text-strong,#fff)!important}
.site-header .ndevr-auth-btn .ndevr-auth-ico{display:inline-flex!important;width:28px!important;height:28px!important;
  border-radius:6px!important;overflow:hidden!important;align-items:center!important;justify-content:center!important;
  background:var(--ndevr-gold)!important;color:var(--nd-accent-contrast,#232323)!important;flex:0 0 auto!important}
.site-header .ndevr-auth-btn .ndevr-auth-ico svg{width:16px!important;height:16px!important}
.site-header .ndevr-auth-btn .ndevr-auth-avatar{width:28px!important;height:28px!important;border-radius:6px!important;
  object-fit:cover!important;display:block!important;margin:0!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important}
.site-header .ndevr-auth-btn .ndevr-auth-label{white-space:nowrap!important;max-width:none!important;color:inherit!important}
.site-header .ndevr-auth-btn .ndevr-auth-caret{display:inline-flex!important;opacity:.55!important}
.site-header .ndevr-auth-btn .ndevr-auth-caret svg{width:14px!important;height:14px!important;fill:currentColor!important}
.site-header .ndevr-auth-btn:not(.ndevr-auth-in){background:var(--ndevr-gold)!important;color:var(--nd-accent-contrast,#232323)!important;
  border-color:var(--ndevr-gold)!important;padding:8px 16px!important;font-weight:700!important;box-shadow:none!important}
.site-header .ndevr-auth-btn:not(.ndevr-auth-in) .ndevr-auth-ico{display:none!important}
/* Short on space: the account control is the FIRST header element to give way. site.js adds
   .ndevr-auth-compact while the bar is tight, collapsing the pill to just the user icon (the full
   name stays in the dropdown + the title tooltip). Logged out, the gold Log In button becomes an
   icon-only square (its normally-hidden person glyph comes back). */
.site-header .ndevr-auth-btn.ndevr-auth-compact .ndevr-auth-label,
.site-header .ndevr-auth-btn.ndevr-auth-compact .ndevr-auth-caret{display:none!important}
.site-header .ndevr-auth-btn.ndevr-auth-compact{gap:0!important;padding:6px!important}
.site-header .ndevr-auth-btn.ndevr-auth-compact:not(.ndevr-auth-in){padding:7px!important}
.site-header .ndevr-auth-btn.ndevr-auth-compact:not(.ndevr-auth-in) .ndevr-auth-ico{
  display:inline-flex!important;background:transparent!important;color:inherit!important}

/* Collapsed header: hide the ribbon, show the site-menu button widget (its dropdown replaces the old
   in-header accordion — one menu widget everywhere). Driven by JS (site.js wireHeaderCompact), NOT a
   fixed media query, so the account pill is the FIRST element to give way (it compacts to an icon)
   and the ribbon only folds into the hamburger once compacting the pill still isn't enough room. */
.site-header.nav-collapsed .menu{display:none}
.site-header.nav-collapsed .nd-menu-host{display:block}
.site-header.nav-collapsed .header-actions{margin-left:0}
/* No-JS / very-narrow safety net so the ribbon can't overflow if the staged logic never runs. This
   fires far below the JS thresholds, so with JS enabled the pill has long since compacted first. */
@media (max-width:560px){
  .site-header .menu{display:none}
  .site-header .nd-menu-host{display:block}
  .site-header .header-actions{margin-left:0}
}

/* ===================== SITE-MENU BUTTON (reusable widget) ===================== */
/* One hamburger button + a dropdown of the full site nav (NDEVR_NAV) as an accordion. Attached by
   site.js to any [data-ndevr-menu-button] host (the header's collapsed menu, the OWL library's
   site-menu button, …) or programmatically via window.NDEVRSiteMenu.attach(host). */
/* !important throughout: on WP pages the host theme paints raw <button>s gold with its own padding,
   which swallowed the burger (svg collapsed to 0). Same defense the account widget uses. */
.nd-menu-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:36px !important;height:36px !important;min-width:0 !important;
  border-radius:10px !important;border:1px solid transparent !important;background:transparent !important;
  background-image:none !important;box-shadow:none !important;color:var(--ndevr-ink-soft) !important;
  cursor:pointer !important;padding:0 !important;margin:0 !important;line-height:1 !important}
.nd-menu-btn:hover{background:var(--nd-hover,#222732) !important;border-color:var(--ndevr-line) !important;
  color:var(--nd-text-strong,#fff) !important}
.nd-menu-btn svg{width:20px !important;height:20px !important;display:block !important}
.nd-menu-pop{position:fixed;z-index:1200;display:none;width:min(360px,calc(100vw - 16px));
  max-height:calc(100vh - 80px);overflow:auto;overscroll-behavior:contain;
  background:var(--ndevr-surface);border:1px solid var(--ndevr-line);border-radius:12px;
  box-shadow:var(--nd-shadow-2,0 18px 48px rgba(0,0,0,.55))}
.nd-menu-pop.is-open{display:block}
.nd-menu-pop .menu{list-style:none;margin:0;padding:6px 0;display:flex;flex-direction:column}
.nd-menu-pop .menu > li > a,.nd-menu-pop .menu > li > .top{display:flex;justify-content:space-between;
  align-items:center;padding:13px 18px;border-bottom:1px solid var(--ndevr-line);
  color:var(--ndevr-ink-soft);font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer}
.nd-menu-pop .menu > li:last-child > a,.nd-menu-pop .menu > li:last-child > .top{border-bottom:0}
.nd-menu-pop .menu > li > a:hover,.nd-menu-pop .menu > li > .top:hover{color:var(--nd-text-strong,#fff)}
.nd-menu-pop .menu > li.has-sub > a::after,.nd-menu-pop .menu > li.has-sub > .top::after{content:"›";
  color:var(--ndevr-muted);font-size:1.35em;line-height:1;transition:transform .15s;margin-left:10px}
.nd-menu-pop .menu > li.has-sub.is-open > a::after,.nd-menu-pop .menu > li.has-sub.is-open > .top::after{transform:rotate(90deg)}
.nd-menu-pop .panel,.nd-menu-pop .panel.mega{display:none;padding:0 0 10px 16px;background:transparent;
  border:0;box-shadow:none;min-width:0}
.nd-menu-pop .menu > li.is-open > .panel{display:block}
.nd-menu-pop .menu > li.is-open > .panel.mega{display:grid;grid-template-columns:1fr}
.nd-menu-pop .panel.mega .grp > a.h{display:block;font-weight:700;color:var(--nd-text-strong,#fff);
  padding:10px 12px 4px;text-decoration:none}
.nd-menu-pop .panel.mega .grp a{display:block;padding:6px 12px;color:var(--ndevr-ink-soft);
  text-decoration:none;font-size:.92rem}
.nd-menu-pop .panel.mega .grp a:hover{color:var(--nd-text-strong,#fff)}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--nd-bg-deep,#0f1216);color:var(--nd-text-soft,#cdd2db);padding:56px 0 26px;border-top:1px solid var(--ndevr-line)}
.site-footer a{color:var(--nd-text-soft,#cdd2db);text-decoration:none}
.site-footer a:hover{color:var(--nd-text-strong,#fff)}
.site-footer .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.site-footer .foot-brand .foot-logo{height:28px;opacity:.95;margin-bottom:12px}
.site-footer .foot-brand .muted{color:var(--ndevr-muted,#8a90a0);max-width:34ch}
.site-footer .foot-col h4{color:var(--nd-text-strong,#fff);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.site-footer .foot-col a{display:block;padding:5px 0;font-size:.95rem;cursor:pointer}
.site-footer .foot-col .more{color:var(--nd-accent-text,#ffb63b);font-weight:600;margin-top:6px}
.site-footer .foot-bottom{border-top:1px solid var(--ndevr-line,#23272f);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.site-footer .muted{color:var(--ndevr-muted,#8a90a0);font-size:.9rem}
@media (max-width:760px){ .site-footer .foot-grid{grid-template-columns:1fr 1fr} .site-footer .foot-brand{grid-column:1 / -1} }

/* ===================== NUI subset (CSS-only) =====================
   The styling-only slice of the app-widget primitives library (ndevr-ui.css) so Site Studio content
   widgets and QUAIL-built pages share one visual language with the OWL app widgets. CSS ONLY — the
   published sites never load ndevr-ui.js. Keep in sync with the same classes there. */
.nui-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;margin:0;
  padding:9px 16px;border-radius:var(--nd-radius-sm,8px);border:1px solid var(--nd-border,#353b46);
  background:var(--nd-surface-2,#23272f);color:var(--nd-text,#e8eaed);
  font:600 .92rem/1.2 var(--nd-font,inherit);text-decoration:none;cursor:pointer;white-space:nowrap}
.nui-btn:hover{background:var(--nd-hover,#222732);color:var(--nd-text-strong,#fff)}
.nui-btn--primary{background:var(--nd-accent-deep,#f2a900);border-color:var(--nd-accent-deep,#f2a900);
  color:var(--nd-accent-contrast,#232323)}
.nui-btn--primary:hover{background:var(--nd-accent,#ffb63b);color:var(--nd-accent-contrast,#232323)}
.nui-btn--ghost{background:transparent}
.nui-btn--sm{padding:5px 11px;font-size:.82rem}
.nui-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font:700 .72rem/1.5 var(--nd-font,inherit);letter-spacing:.03em;text-transform:uppercase;
  background:var(--nd-tint-2,rgba(255,255,255,.12));color:var(--nd-text-soft,#c7ccd6)}
.nui-badge--ok{background:var(--nd-ok,#5ee08a);color:var(--nd-accent-contrast,#232323)}
.nui-badge--err{background:var(--nd-error,#ff7a85);color:var(--nd-accent-contrast,#232323)}
.nui-badge--warn{background:var(--nd-warn,#ffc857);color:var(--nd-accent-contrast,#232323)}
.nui-badge--muted{background:transparent;border:1px solid var(--nd-border,#353b46);color:var(--nd-muted,#9aa3b2)}
.nui-card{background:var(--nd-surface-2,#23272f);border:1px solid var(--nd-border,#353b46);
  border-radius:var(--nd-radius,12px);box-shadow:var(--nd-shadow-1,0 6px 18px rgba(0,0,0,.28));
  padding:18px;color:var(--nd-text,#e8eaed)}
.nui-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 18px;
  text-align:center;color:var(--nd-muted,#9aa3b2)}
.nui-empty__icon{font-size:30px;line-height:1}
.nui-empty__title{font:700 1rem/1.3 var(--nd-font,inherit);color:var(--nd-text,#e8eaed)}
.nui-empty__hint{font-size:.88rem;max-width:42ch}

/* ===================== DOC WIDGETS =====================
   Reusable documentation widgets shared by the /sites/ doc pages (using-ndevr-api, detailed-api-rules,
   building-api, api-logging, …) — define them ONCE here, never per-page. */

/* Code snippet: optional caption (.code-cap) + code well (.code-panel). THEME-CONSTANT by design —
   the well stays dark and the caption keeps one fixed color in BOTH themes (an IDE-style code block;
   mid-gray caption reads on the light and the dark page canvas alike). No --nd-* vars here on purpose. */
.code-cap{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9aa3b2;margin:18px 0 6px}
.code-panel{background:#0f1216;border:1px solid #353b46;border-radius:var(--nd-radius-sm,8px);
  padding:14px 16px;overflow-x:auto;margin:14px 0 18px}
.code-cap+.code-panel{margin-top:0}
.code-panel pre{margin:0}
.code-panel code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;color:#e8eaed;white-space:pre;line-height:1.55}

/* Type/class cards: a 2-up grid of titled cards (title links gold, "Replaces"/"Differences" labels,
   difference bullets). Theme-aware via the --nd-* tokens. */
.class-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 8px}
.class-card{background:var(--nd-surface,#1b1e24);border:1px solid var(--nd-border,#353b46);border-radius:var(--nd-radius,12px);padding:18px 20px}
.class-card h3{margin:0 0 10px;font-size:1.1rem}
.class-card h3 a{color:var(--nd-accent-text,#ffb63b);text-decoration:none}
.class-card h3 a:hover{text-decoration:underline}
.class-card .lbl{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--nd-muted,#9aa3b2);margin:10px 0 4px}
.class-card .repl{font-weight:700;color:var(--nd-text-strong,#fff);margin:0 0 8px}
.class-card .repl a{color:var(--nd-text-strong,#fff);text-decoration:underline;text-decoration-color:var(--nd-line,#2a2f39)}
.class-card .repl a:hover{text-decoration-color:var(--nd-accent,#ffb63b)}
.class-card p{margin:0 0 8px;font-size:.95rem;color:var(--nd-text-soft,#c7ccd6)}
.class-card ul.diffs{margin:0;padding-left:0;list-style:none}
.class-card ul.diffs li{margin:0 0 6px;font-size:.92rem;color:var(--nd-text-soft,#c7ccd6);line-height:1.5}
.class-card ul.diffs a{color:var(--nd-accent-text,#ffb63b)}

/* Side-by-side comparison tables (the type tables on the API docs). */
.type-tables{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0 6px}

/* Bottom next/back pager: a row of .btn / .btn--ghost links at the end of a doc page. */
.next-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}

@media (max-width:720px){
  .type-tables{grid-template-columns:1fr}
  .class-grid{grid-template-columns:1fr}
}

/* ===================== WIKI ARTICLES =====================
   One shared shell for every /wiki/ field-knowledge article (coordinate-projection, what-is-north,
   gnss-best-practices, …). Define the chrome ONCE here; pages contribute only their unique figures,
   diagrams or embeds. Theme-aware via the --nd-* tokens. Pair `<main class="wiki">` with the parts
   below: .wiki-crumbs (breadcrumb) → .wiki-hero → .wiki-prose body → .wiki-related footer. */
.wiki{--wiki-measure:72ch}
.wiki .container{max-width:960px}

/* Breadcrumb back to the wiki index */
.wiki-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;
  color:var(--nd-muted,#9aa3b2);margin:0 0 14px}
.wiki-crumbs a{color:var(--nd-muted,#9aa3b2);text-decoration:none}
.wiki-crumbs a:hover{color:var(--nd-accent-text,#ffb63b)}
.wiki-crumbs .sep{opacity:.5}
.wiki-crumbs .cur{color:var(--nd-text-soft,#c7ccd6)}

/* Hero */
.wiki-hero h1{font-size:clamp(32px,4.6vw,50px);line-height:1.08;margin:6px 0 14px;color:var(--nd-text-strong,#fff)}
.wiki-lead{font-size:1.18rem;line-height:1.6;color:var(--nd-text-soft,#c7ccd6);max-width:var(--wiki-measure);margin:0}
.wiki-meta{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}

/* "On this page" inline TOC */
.wiki-toc{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.wiki-toc a{font-size:.85rem;color:var(--nd-text-soft,#c7ccd6);text-decoration:none;padding:5px 12px;
  border-radius:999px;border:1px solid var(--nd-border,#353b46);background:var(--nd-surface,#1b1e24)}
.wiki-toc a:hover{color:var(--nd-text-strong,#fff);border-color:var(--nd-accent,#ffb63b)}

/* Prose body */
.wiki-prose{max-width:var(--wiki-measure)}
.wiki-prose h2{color:var(--nd-text-strong,#fff);font-size:clamp(22px,3vw,30px);line-height:1.2;
  margin:40px 0 12px;scroll-margin-top:84px}
.wiki-prose h3{color:var(--nd-text-strong,#fff);font-size:1.18rem;margin:26px 0 8px}
.wiki-prose p{color:var(--nd-text-soft,#c7ccd6);line-height:1.7;margin:0 0 16px}
.wiki-prose ul,.wiki-prose ol{color:var(--nd-text-soft,#c7ccd6);line-height:1.7;padding-left:1.3em;margin:0 0 16px}
.wiki-prose li{margin:7px 0}
.wiki-prose li::marker{color:var(--nd-accent-text,#ffb63b)}
.wiki-prose strong{color:var(--nd-text,#e8eaed)}
.wiki-prose a{color:var(--nd-accent-text,#ffb63b)}
.wiki-prose .btn{margin:6px 10px 6px 0}
.wiki-prose figure{margin:24px 0}
.wiki-prose figure img{width:100%;height:auto;border-radius:var(--nd-radius,12px);border:1px solid var(--nd-line,#2a2f39)}
.wiki-prose figcaption{color:var(--nd-muted,#9aa3b2);font-size:.85rem;margin-top:8px;text-align:center}

/* Text + figure split row (.is-rev flips the figure to the left) */
.wiki-split{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;margin:28px 0;max-width:none}
.wiki-split>div{max-width:var(--wiki-measure)}
.wiki-split figure{margin:0}
.wiki-split.is-rev>figure{order:-1}

/* Callout / note box */
.wiki-note{display:flex;gap:14px;background:var(--nd-surface,#1b1e24);border:1px solid var(--nd-border,#353b46);
  border-left:3px solid var(--nd-accent,#ffb63b);border-radius:var(--nd-radius-sm,8px);padding:16px 18px;margin:22px 0;
  max-width:var(--wiki-measure)}
.wiki-note .ic{flex:0 0 auto;color:var(--nd-accent-text,#ffb63b);font-size:1.1rem;line-height:1.5}
.wiki-note h4{margin:0 0 4px;color:var(--nd-text-strong,#fff);font-size:.95rem}
.wiki-note p{margin:0}

/* "At a glance" key-facts card (uses .nui-card as the shell) */
.wiki-facts{margin:24px 0;max-width:var(--wiki-measure)}
.wiki-facts dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0}
.wiki-facts dt{color:var(--nd-muted,#9aa3b2);font-size:.78rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding-top:2px}
.wiki-facts dd{margin:0;color:var(--nd-text-soft,#c7ccd6);line-height:1.5}

/* 3-up comparison cards (reuses .nui-card for each cell) */
.wiki-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}
.wiki-grid3 .nui-card h3{margin:0 0 10px;color:var(--nd-text-strong,#fff);font-size:1.05rem}
.wiki-grid3 .nui-card ul{margin:0;padding-left:1.1em;color:var(--nd-text-soft,#c7ccd6);line-height:1.6}

/* Related-articles footer */
.wiki-related{border-top:1px solid var(--nd-line,#2a2f39);margin-top:48px;padding-top:36px}
.wiki-related h2{color:var(--nd-text-strong,#fff);font-size:1.5rem;margin:0 0 18px}
.wiki-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.wiki-rel-card{display:block;text-decoration:none;background:var(--nd-surface,#1b1e24);
  border:1px solid var(--nd-line,#2a2f39);border-radius:var(--nd-radius,12px);padding:18px;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.wiki-rel-card:hover{transform:translateY(-3px);border-color:var(--nd-border,#353b46);
  box-shadow:var(--nd-shadow-1,0 6px 18px rgba(0,0,0,.28))}
.wiki-rel-card .k{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--nd-accent-text,#ffb63b)}
.wiki-rel-card h3{margin:7px 0 6px;color:var(--nd-text-strong,#fff);font-size:1.05rem}
.wiki-rel-card p{margin:0;color:var(--nd-muted,#9aa3b2);font-size:.9rem;line-height:1.5}

@media (max-width:760px){
  .wiki-split{grid-template-columns:1fr}
  .wiki-split.is-rev>figure{order:0}
  .wiki-grid3{grid-template-columns:1fr}
}