/* Smoother cross-document page transitions (2026-08-30, direct request:
   "make the transition between pages less jumpy"). Every page already
   opts into the browser's View Transition API (`@view-transition
   {navigation: auto;}`, declared per-page since that at-rule isn't
   inherited from a stylesheet) and gives the nav bar a shared
   view-transition-name so it reads as the SAME element across a
   navigation rather than a hard cut. This is the other half, in the one
   shared file every page already loads: the root crossfade gets a touch
   longer duration and a calmer ease-out instead of the browser's terser
   default, while the nav itself stays snappy since it should look static,
   not fade like the content around it does. */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: ease-out;
}
::view-transition-old(sitenav), ::view-transition-new(sitenav) {
  animation-duration: 80ms;
}

/* components.css — the shared component layer of the Atech-UI (Mitchell) design
   system, translated from Atech-UI/index.html's Tailwind recipes into plain,
   token-driven CSS (tokens.css is the palette; this file is the shapes).
   Loaded by every page AFTER tokens.css. 2026-08-24.

   Pages need the fonts in <head> (preconnect + stylesheet, the same pair
   Atech-UI ships):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

   Class names: the four Atech-UI originals keep their names (.atech-card,
   .atech-input, .aurora-text — in tokens.css — and .blueprint-grid); the rest
   are this port's names for recipes Atech-UI expressed inline. Per-page CSS
   may restyle its own existing classes to these same token values instead of
   renaming markup that JS emits — this file is the reference recipe either way. */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-tile: 16px;
  --radius-input: 12px;
  --radius-small: 8px;

  /* Mask sources for pseudo-element arrows — Unicode →/← render thin and
     off-center in Inter at 12px; these match .navicon's stroke weight. */
  --ui-arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-arrow-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ui-arrow-u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── page base ─────────────────────────────────────────────────────────── */
body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--text-primary); color: var(--background); }

/* Design's body is overflow:hidden (no classic scrollbar); every other
   destination page scrolls. Without a stable gutter the layout viewport is
   6px wider on Design, the centered #navlinks shifts, and switching tabs
   moves the brand and the identity chip. Measured 2026-09-13: Design
   navW 1068 / groupLeft 312 against Projects navW 1062 / groupLeft 309. */
html { scrollbar-gutter: stable; }

/* The sleek 6px scrollbar, everywhere. */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

/* ── cards & tiles ─────────────────────────────────────────────────────── */
.atech-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-card-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.atech-card:hover { border-color: var(--card-border-hover); }

/* Inner tile: the neutral-50 sub-panel that lives ON a card. */
.atech-tile {
  background: var(--surface-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-tile);
}

/* Dark accent tile: code / metrics / telemetry panel, near-black in BOTH
   themes (that contrast is the Atech-UI signature, not a theme leak). */
.dark-tile {
  background: var(--tile-dark-bg);
  border: 1px solid var(--tile-dark-border);
  border-radius: var(--radius-tile);
  color: var(--tile-dark-text);
  font-family: var(--font-mono);
}

/* ── inputs ────────────────────────────────────────────────────────────── */
.atech-input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  color: var(--input-text);
  font-family: var(--font-sans);
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.atech-input::placeholder { color: var(--input-placeholder); }
.atech-input:focus-within, .atech-input:focus {
  background: var(--surface-primary);
  border-color: var(--input-focus-ring);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
  outline: none;
}
.dark .atech-input:focus-within, .dark .atech-input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

/* ── buttons & chips ───────────────────────────────────────────────────── */
.atech-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font: 600 12px/1.2 var(--font-sans);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}
.atech-btn:hover { background: var(--button-primary-bg-hover); }
.atech-btn:disabled { opacity: 0.45; cursor: default; }
.atech-btn.secondary {
  background: var(--button-secondary-bg);
  border-color: var(--button-secondary-border);
  color: var(--button-secondary-text);
  box-shadow: none;
}
.atech-btn.secondary:hover {
  background: var(--button-secondary-bg-hover);
  border-color: var(--button-secondary-border-hover);
}
.atech-btn.small { padding: 5px 12px; font-size: 11px; }

/* Chip: the preset / quick-prompt pill. */
.atech-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--text-primary);
  font: 400 12px/1.4 var(--font-sans);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.atech-chip:hover { background: var(--button-secondary-bg-hover); }
.atech-chip[aria-pressed="true"], .atech-chip.on {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-weight: 600;
}

/* ── the mono micro-label (the signature eyebrow) ──────────────────────── */
.mono-label {
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── status badges: mono pill, 10-11px bold ────────────────────────────── */
.atech-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font: 700 10px/1.6 var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--state-idle-bg);
  color: var(--text-secondary);
}
.atech-badge.ok   { background: var(--state-ok-bg);   color: var(--state-ok); }
.atech-badge.warn { background: var(--state-warn-bg); color: var(--state-warn); }
.atech-badge.crit { background: var(--state-crit-bg); color: var(--state-crit); }
.atech-badge.info { background: var(--state-info-bg); color: var(--state-info); }

/* ── tab pills: neutral track, active pill pops ────────────────────────── */
.tab-pills {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px;
  background: var(--state-idle-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-tile);
}
.tab-pills > button {
  border: 0; background: transparent; cursor: pointer;
  padding: 6px 14px;
  border-radius: calc(var(--radius-tile) - 4px);
  font: 500 12px/1.2 var(--font-sans);
  color: var(--text-secondary);
  transition: color 0.15s ease, background 0.15s ease;
}
.tab-pills > button:hover { color: var(--text-primary); }
.tab-pills > button[aria-selected="true"], .tab-pills > button.active {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* Variant: active tab is a WHITE pill on the grey track (Atech-UI's design
   pillar tabs) rather than black. */
.tab-pills.lift > button[aria-selected="true"], .tab-pills.lift > button.active {
  background: var(--card-bg);
  color: var(--text-primary);
}

/* ── toggle switch (28×16, black when on) ──────────────────────────────── */
.atech-toggle {
  position: relative; display: inline-block;
  width: 28px; height: 16px; flex: none;
}
.atech-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.atech-toggle i {
  position: absolute; inset: 0;
  background: var(--state-idle-bg);
  border-radius: var(--radius-pill);
  transition: background 0.15s ease;
}
.atech-toggle i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border-medium);
  box-sizing: border-box;
  transition: transform 0.15s ease;
}
.atech-toggle input:checked + i { background: var(--button-primary-bg); }
.atech-toggle input:checked + i::after { transform: translateX(12px); border-color: transparent; }
.atech-toggle input:focus-visible + i { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── tables: mono, quiet dividers, uppercase micro heads ───────────────── */
.atech-table { width: 100%; border-collapse: collapse; font: 400 11px/1.5 var(--font-mono); }
.atech-table th {
  text-align: left; padding: 8px 10px;
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-light);
}
.atech-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.atech-table td b, .atech-table td strong { color: var(--text-primary); }
.atech-table tr:last-child td { border-bottom: 0; }
/* Wrap wide tables in this: the page never scrolls sideways, the table does. */
.atech-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-tile);
}

/* ── modal ─────────────────────────────────────────────────────────────── */
.atech-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.atech-modal {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.25);
  padding: 20px;
  max-width: 512px; width: 100%;
}

/* ── toast ─────────────────────────────────────────────────────────────── */
.atech-toast {
  background: var(--tile-dark-bg);
  color: var(--tile-dark-text);
  border: 1px solid var(--tile-dark-border);
  border-radius: var(--radius-input);
  padding: 8px 14px;
  font: 500 12px/1.4 var(--font-mono);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
}

/* ── range slider (4px track, 14px round thumb) ────────────────────────── */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  background: var(--state-idle-bg);
  border-radius: var(--radius-pill);
  height: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 14px; width: 14px; border-radius: 50%;
  background: var(--button-primary-bg);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type="range"]::-moz-range-thumb {
  height: 14px; width: 14px; border: 0; border-radius: 50%;
  background: var(--button-primary-bg);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ── blueprint grid (schematic / wiring ground) ────────────────────────── */
.blueprint-grid {
  background-color: var(--surface-primary);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
}
.dark .blueprint-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

/* ── site nav ────────────────────────────────────────────────────────────
   One bar, every destination page. Markup is stamped by sitenav.js;
   identity chip by sitenav-auth.js (Design's dropdown is app.js). The
   destination pages used to each paste this recipe — comments called it
   "the ONE nav recipe" and then restated it. `.atech-header` / `.atech-pillnav`
   below were the unused prototype of the same bar (nothing in the tree
   used those class names). */
#sitenav {
  view-transition-name: sitenav;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 14px;
  padding: 0 20px; height: 58px; flex: none;
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--nav-border); background: var(--nav-bg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
#sitenav:empty { min-height: 58px; }
#sitenav .navleft { justify-self: start; display: flex; align-items: center; gap: 14px; min-width: 0; }
#sitenav .navright { justify-self: end; display: flex; align-items: center; gap: 10px; }
#sitenav .brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -.025em; font-size: 15px; line-height: 1.55;
  white-space: nowrap; color: var(--text-primary); text-decoration: none;
}
#sitenav .brand .tld { color: var(--text-muted); font-weight: 400; }
#sitenav .navgroup {
  justify-self: center; display: flex; align-items: center; gap: 7px; padding: 4px;
  background: var(--glass-bg-hover); border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
}
#sitenav .navlink {
  display: inline-flex; align-items: center; gap: 7px;
  justify-content: center; text-align: center;
  /* Weight is fixed: aria-current used to bump 500→600 and reflow the
     pill group when the current section changed (Community grew ~1px).
     The black fill is enough; bold is not a second signal. */
  border-radius: var(--radius-pill); padding: 7px 17px; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); text-decoration: none; white-space: nowrap;
  transition: color .15s, background-color .15s;
}
#sitenav .navlink:hover { color: var(--text-primary); }
#sitenav .navlink:focus-visible { outline: 2px solid var(--border-dark); outline-offset: 2px; }
#sitenav .navlink .portrail { display: none; }
#sitenav .navlink[hidden] { display: none !important; }
#sitenav .navlink[aria-current="page"] {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
#sitenav #navprojects { min-width: 100px; justify-content: center; }
#sitenav .btn {
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12.5px;
  /* Weight stays put when Buy Kit toggles .primary on /buy. */
  cursor: pointer; font-family: inherit; font-weight: 600;
  background: var(--button-secondary-bg); border: 1px solid var(--button-secondary-border);
  color: var(--button-secondary-text); transition: background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
}
#sitenav .btn:hover:not(:disabled) {
  background: var(--button-secondary-bg-hover);
  border-color: var(--button-secondary-border-hover);
}
#sitenav .btn:disabled { opacity: .4; cursor: not-allowed; }
#sitenav .btn:focus-visible { outline: 2px solid var(--border-dark); outline-offset: 2px; }
#sitenav .btn.primary {
  background: var(--button-primary-bg); color: var(--button-primary-text);
  border-color: var(--button-primary-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
#sitenav .btn.primary:hover:not(:disabled) { background: var(--button-primary-bg-hover); }
#sitenav .btn[hidden] { display: none !important; }
#sitenav #authslot {
  display: flex; align-items: center; min-width: 96px; justify-content: flex-end;
  position: relative; flex: none;
}
#sitenav #authslot.resolving { visibility: hidden; }
#sitenav .btn.idchip {
  padding: 0 12px 0 4px; height: 32px; box-sizing: border-box;
  gap: 8px; font-size: 12.5px; line-height: 1;
  max-width: min(260px, 40vw); min-width: 0;
}
#sitenav .idchip .em, #sitenav .idpill .em {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 400; line-height: 1; display: block; padding-top: 1px;
}
#sitenav .idchip .em { max-width: 18ch; }
#sitenav .idpill .em { max-width: 18ch; }
#sitenav .rolebadge { color: var(--text-muted); font-weight: 500; }
#sitenav .idchip .av, #sitenav .idpill .av {
  width: 22px; height: 22px; border-radius: var(--radius-pill); flex: none; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border-strong);
  font: 600 10px/1 var(--font-mono); text-transform: uppercase;
  color: var(--text-primary); position: relative;
}
#sitenav .idpill {
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-pill);
  padding: 0 12px 0 4px; height: 32px; box-sizing: border-box;
  background: var(--button-secondary-bg); border: 1px solid var(--button-secondary-border);
  color: var(--button-secondary-text); cursor: pointer; font-family: inherit; font-size: 12.5px;
  line-height: 1; max-width: 210px; transition: background .15s, border-color .15s;
}
#sitenav .idpill:hover {
  background: var(--button-secondary-bg-hover);
  border-color: var(--button-secondary-border-hover);
}
#sitenav .idpill:focus-visible { outline: 2px solid var(--input-focus-ring); outline-offset: 2px; }
#sitenav .idpill .av .ini { display: block; line-height: 1; }
#sitenav .idpill.warn { --pilldot: var(--state-warn); }
#sitenav .idpill.crit { --pilldot: var(--state-crit); }
#sitenav .idpill.warn .av::after, #sitenav .idpill.crit .av::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pilldot);
  box-sizing: content-box; border: 1.5px solid var(--button-secondary-bg);
  animation: pillglow 2.2s ease-out infinite;
}
@keyframes pillglow {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pilldot) 65%, transparent); }
  70%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pilldot) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pilldot) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  #sitenav .idpill.warn .av::after, #sitenav .idpill.crit .av::after { animation: none; }
}
#sitenav #idmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 230px;
  background: var(--glass-card-bg); border: 1px solid var(--glass-card-border);
  border-radius: 14px; box-shadow: var(--glass-card-shadow-hover); padding: 6px; display: none;
}
#sitenav #idmenu.on { display: block; }
#sitenav #idmenu .who { padding: 9px 11px 10px; }
#sitenav #idmenu .who .lab {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
#sitenav #idmenu .who .em {
  font-size: 12.5px; color: var(--text-primary); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis;
}
#sitenav #idmenu .div { height: 0; border-top: .5px solid var(--glass-border); margin: 2px 4px 4px; }
#sitenav #idmenu .cred { padding: 8px 11px 10px; }
#sitenav #idmenu .cred .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#sitenav #idmenu .cred .lab {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
#sitenav #idmenu .cred .num {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--text-primary); font-weight: 600;
}
#sitenav #idmenu .cred .num.unknown { color: var(--text-muted); font-weight: 400; }
#sitenav #idmenu .cred .num.warn { color: var(--state-warn); }
#sitenav #idmenu .cred .num.crit { color: var(--state-crit); }
#sitenav #idmenu .cred .track {
  height: 6px; margin-top: 7px; border-radius: var(--radius-pill); background: var(--state-idle-bg);
  overflow: hidden; border: 1px solid var(--card-border);
}
#sitenav #idmenu .cred .track.unknown {
  background: repeating-linear-gradient(45deg,
    var(--state-idle-bg), var(--state-idle-bg) 5px,
    transparent 5px, transparent 10px);
}
#sitenav #idmenu .cred .fill {
  height: 100%; width: 0; border-radius: var(--radius-pill); transition: width .5s cubic-bezier(.4, 0, .2, 1);
  background: linear-gradient(90deg, var(--state-ok), color-mix(in srgb, var(--state-ok) 55%, var(--state-warn)));
}
#sitenav #idmenu .cred .fill.warn { background: linear-gradient(90deg, var(--state-warn), var(--state-crit)); }
#sitenav #idmenu .cred .fill.crit { background: var(--state-crit); }
#sitenav #idmenu .cred .cap { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
#sitenav #idmenu button {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--text-primary);
  padding: 8px 11px; border-radius: 9px;
}
#sitenav #idmenu button:hover { background: var(--glass-bg-hover); }
#sitenav #idmenu button:focus-visible { outline: 2px solid var(--input-focus-ring); outline-offset: -2px; }
#sitenav #idmenu button.danger { color: var(--state-crit); }

/* Design's body is overflow:hidden, so a too-wide bar is gone rather than
   scrollable. Other pages can scroll, but the bar should not change between
   them — wrap at the same width everywhere. Measured floor on Design was
   898px signed-out; 940px leaves headroom for a signed-in chip. */
@media (max-width: 940px) {
  #sitenav {
    display: flex; flex-wrap: wrap; height: auto; min-height: 54px;
    padding: 8px 12px; gap: 8px; row-gap: 6px;
  }
  #sitenav #authslot { min-width: 0; }
  #sitenav .navgroup { flex-wrap: wrap; justify-content: center; }
  #sitenav .btn.idchip { max-width: 34vw; }
}

/* Phone: drop the wordmark, keep the mark as the home control. Same 720px
   as the Design phone shell (index.html / PHONE_SHELL_MQ) — this is a
   device-chrome change, not a pane rule. The link's aria-label is the
   name once the text is gone; the mark is aria-hidden.

   The identity control collapses to an avatar circle in the top-right:
   the name and role badge are chrome the phone cannot spare, and both
   still live in the dropdown / account page. Grid (not the 940px flex
   wrap) pins brand left and Buy Kit + auth right on the first row so
   the circle cannot wrap under the section links. */
@media (max-width: 720px) {
  #sitenav {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand auth"
      "links links";
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    height: auto;
    min-height: 54px;
    padding: 8px 12px;
  }
  #sitenav .navleft { grid-area: brand; justify-self: start; }
  #sitenav .navright { grid-area: auth; justify-self: end; }
  #sitenav .navgroup {
    grid-area: links;
    justify-self: stretch;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #sitenav .navgroup::-webkit-scrollbar { display: none; }
  #sitenav .brand .brandword { display: none; }
  #sitenav .brand { gap: 0; }

  #sitenav .idpill .em,
  #sitenav .idchip .em,
  #sitenav .rolebadge { display: none; }
  #sitenav .idpill,
  #sitenav .btn.idchip {
    width: 32px; height: 32px; padding: 0;
    max-width: none; min-width: 32px;
    justify-content: center; gap: 0;
    border-radius: 50%;
  }
  #sitenav .idchip .av,
  #sitenav .idpill .av {
    width: 30px; height: 30px;
    border: 0;
  }
}

/* The real Atech mark (triangle + two sparks), not a lettered tile — swapped
   by theme the same way #theme's sun/moon/sys glyphs are (theme.js writes
   <html data-mode>, resolved to light/dark before first paint, so this is
   never mid-transition): atech-mark-light.png is the black-ink mark (for the
   light theme's pale nav), atech-mark-dark.png is the white-ink mark (for
   the dark theme's near-black nav) — same two files the favicon already
   uses, same reasoning. 2026-08-30. */
.atech-brandmark {
  width: 32px; height: 32px; flex: none;
  display: inline-block;
  font-size: 0; color: transparent; overflow: hidden;
  background: transparent url(/atech-mark-light.png) center / contain no-repeat;
  transition: transform 0.15s ease;
}
html.dark .atech-brandmark { background-image: url(/atech-mark-dark.png); }
a:hover > .atech-brandmark { transform: scale(1.05); }

/* ── directional arrows (stroke icons, not Unicode glyphs) ─────────────── */
.ui-arrow {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-arrow.sm {
  width: 0.78em;
  height: 0.78em;
  vertical-align: -0.06em;
}
.ui-arrow.ui-arrow-left { margin-right: 0.15em; }
a:has(> .ui-arrow), button:has(> .ui-arrow) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ui-arrow-r::after {
  content: '';
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.22em;
  vertical-align: -0.04em;
  background: currentColor;
  -webkit-mask: var(--ui-arrow-r) center / contain no-repeat;
  mask: var(--ui-arrow-r) center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .atech-card, .atech-btn, .atech-chip, .atech-input, .atech-toggle i,
  .atech-toggle i::after, .tab-pills > button, #sitenav .navlink,
  #sitenav .btn, input[type="range"]::-webkit-slider-thumb {
    transition: none;
  }
}