/* Could Not Duplicate — dark, shop-friendly, mobile-first */

:root {
  --bg: #0b0f14;
  --bg-elev: #121820;
  --bg-card: #161d27;
  --bg-callout: #1a2430;
  --bg-warn: #2a1f12;
  --bg-ok: #12241c;
  --border: #2a3544;
  --border-strong: #3d4d62;
  --text: #e8eef6;
  --text-muted: #9aabbd;
  --text-dim: #6b7c90;
  --accent: #3db8a8;
  --accent-dim: #2a8f83;
  --accent-bg: rgba(61, 184, 168, 0.12);
  --warn: #e6a23c;
  --warn-text: #f0c878;
  --danger: #e85d5d;
  --link: #6ec9ff;
  --focus: #5eead4;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  --tap: 48px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --max: 720px;
  --header-h: 56px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
  height: -webkit-fill-available;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Fixed public-domain USCG HC-130 wash — full viewport fill */
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  min-height: -webkit-fill-available;
  z-index: -2;
  background-color: var(--bg);
  background-image: url("assets/bg-uscg-stack-desktop.jpg");
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(0.75) brightness(0.55) contrast(1.05);
  pointer-events: none;
}

/* Phones: portrait crop so vertical fill shows aircraft */
@media (max-width: 640px) {
  body::before {
    background-image: url("assets/bg-uscg-stack-portrait.jpg");
    /* tall collage — cover fills screen; center keeps all four types in play as you rotate/crop */
    background-position: center center;
  }
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  min-height: -webkit-fill-available;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  pointer-events: none;
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  body::after {
    background: rgba(11, 15, 20, 0.55);
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: #04110f;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 15, 20, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  min-height: var(--tap);
  padding: 0.15rem 0;
}

.brand-mark {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  padding: 0;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.brand-text strong {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
}


.nav-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.nav-home:hover,
.nav-home:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.nav-home[hidden] {
  display: none;
}

/* Disclaimer banner */
.disclaimer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--warn-text);
  background: color-mix(in srgb, var(--bg-warn) 78%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #4a3a22;
}

.disclaimer strong {
  color: var(--warn);
}

/* Main */
.main {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  outline: none;
}

/* Home */
.home-intro h1 {
  margin: 0 0 0.35rem;
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.home-intro p {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.search-wrap {
  position: relative;
  margin-bottom: 1.35rem;
}

.search-wrap label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
}

.search-input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.search-input::placeholder {
  color: var(--text-dim);
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.search-icon {
  position: absolute;
  left: 0.95rem;
  bottom: 0.95rem;
  color: var(--text-dim);
  pointer-events: none;
  font-size: 1.1rem;
}

.search-count {
  margin: -0.65rem 0 1rem;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.topic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.topic-list li[hidden] {
  display: none;
}

.topic-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: var(--tap);
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, background 0.15s;
}

.topic-card:hover,
.topic-card:focus-visible {
  border-color: var(--accent-dim);
  background: #1a2330;
  outline: none;
}

.topic-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.topic-card-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
}

.topic-card-chevron {
  color: var(--text-dim);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.empty-state {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.empty-state[hidden] {
  display: none;
}

.empty-state-msg {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.empty-state-hint {
  margin: 0;
  font-size: 0.9rem;
  max-width: 22rem;
}

.empty-clear {
  min-height: var(--tap);
  min-width: 10rem;
  padding: 0.65rem 1.1rem;
  margin-top: 0.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.empty-clear:hover {
  border-color: var(--accent-dim);
}

.empty-clear:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Topic page */
.topic-page .back-row {
  margin-bottom: 1rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.15rem;
  color: var(--link);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.back-link:hover,
.back-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.topic-page h1 {
  margin: 0 0 1rem;
  font-size: 1.45rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.topic-body p {
  margin: 0 0 0.85rem;
  color: var(--text);
}

.topic-body ul {
  margin: 0 0 0.85rem;
  padding-left: 1.25rem;
}

.topic-body li {
  margin-bottom: 0.4rem;
}

.topic-body li:last-child {
  margin-bottom: 0;
}

.callout {
  margin: 1.15rem 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-callout);
}

.callout-watch {
  border-color: #5a4520;
  background: var(--bg-warn);
}

.callout-verify {
  border-color: #2a5a45;
  background: var(--bg-ok);
}

.callout h2 {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.callout-watch h2 {
  color: var(--warn);
}

.callout-verify h2 {
  color: var(--accent);
}

.callout ul {
  margin: 0;
  padding-left: 1.15rem;
}

.callout li {
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
}

.callout p {
  margin: 0;
  font-size: 0.92rem;
}

.section-block {
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}

.section-block h2 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 700;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.link-list a {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.7rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--link);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.92rem;
}

.link-list a:hover,
.link-list a:focus-visible {
  border-color: var(--accent-dim);
  outline: none;
}

.link-list .link-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
}

.placeholder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.placeholder-item {
  padding: 0.75rem 0.9rem;
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.88rem;
}

.placeholder-item strong {
  display: block;
  color: var(--text-dim);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.topic-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

.topic-nav a {
  flex: 1;
  min-width: 120px;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}

.topic-nav a:hover,
.topic-nav a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.topic-nav a[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

/* Footer */
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.site-footer p {
  margin: 0 0 0.5rem;
}

.footer-disclaimer {
  color: var(--text-muted);
}

/* Focus visible global */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Desktop polish */
@media (min-width: 640px) {
  .home-intro h1 {
    font-size: 1.75rem;
  }

  .topic-page h1 {
    font-size: 1.65rem;
  }

  .main {
    padding: 1.5rem 1.25rem 3rem;
  }

  .topic-card {
    padding: 1rem 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.topic-body ol {
  margin: 0 0 0.85rem;
  padding-left: 1.35rem;
}

.topic-body ol li {
  margin-bottom: 0.4rem;
}


.home-tool-link {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--accent-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.home-tool-link a {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

.home-tool-link a:hover {
  text-decoration: underline;
}

.home-tool-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}


.video-list .video-link {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  min-height: var(--tap);
}

.video-list .video-link:hover {
  border-color: var(--accent-dim);
}

.video-badge {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.muted {
  color: var(--text-muted);
}

/* Home section groups */
.home-group {
  margin: 1.5rem 0 0.5rem;
}

.home-group[hidden] {
  display: none;
}

.home-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.home-group-sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.section-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}

.section-pill-shop {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: var(--accent-dim);
}

.section-pill-school {
  color: #8ec8ff;
  background: rgba(110, 201, 255, 0.12);
  border-color: #3a6a8a;
}

.topic-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.45rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topic-meta-sub {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.topic-meta-num {
  font-variant-numeric: tabular-nums;
}

.topic-body h3 {
  margin: 1.15rem 0 0.45rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}

.topic-body h3:first-child {
  margin-top: 0;
}

.topic-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}

.topic-body .muted {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Formula cards */
.formula-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0.75rem 0 1.25rem;
}

@media (min-width: 480px) {
  .formula-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.formula-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0.9rem;
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.formula-card strong {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.formula-card code {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
}

.formula-card span {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Calculators */
.calc-card {
  margin: 0.85rem 0 1.15rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.calc-title {
  margin: 0 0 0.35rem !important;
  font-size: 1rem !important;
  color: var(--accent) !important;
}

.calc-hint {
  margin: 0 0 0.75rem !important;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.calc-fields {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.calc-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.calc-fields input {
  min-height: var(--tap);
  padding: 0.7rem 0.9rem;
  font-size: 1.05rem;
  font-family: var(--mono);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  appearance: textfield;
  -webkit-appearance: none;
}

.calc-fields input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.calc-btn {
  width: 100%;
  min-height: var(--tap);
  padding: 0.75rem 1rem;
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}

.calc-btn:hover,
.calc-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.calc-result {
  margin: 0.75rem 0 0;
  min-height: 1.4em;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.4;
}

.calc-result:empty {
  display: none;
}

.calc-ok {
  background: var(--bg-ok);
  border: 1px solid #2a5a45;
  color: var(--text);
}

.calc-error {
  background: var(--bg-warn);
  border: 1px solid #5a4520;
  color: var(--warn-text);
}


/* EM spectrum bar */
.spectrum-bar {
  margin: 0.85rem 0 1.1rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.spectrum-track {
  display: flex;
  width: 100%;
  min-height: 2.6rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}

.spectrum-track .sb {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.15;
  color: #0b0f14;
  flex: 1 1 0;
}

.sb-radio { background: #5b8def; flex: 1.4; color: #f4f8ff; }
.sb-micro { background: #3db8a8; flex: 1.1; }
.sb-ir { background: #e6a23c; }
.sb-vis {
  background: linear-gradient(90deg, #c44, #e6a23c, #e6e63c, #3c8c3c, #3c6ee6, #6b3cb8);
  color: #0b0f14;
  flex: 0.85;
}
.sb-uv { background: #8b5cf6; color: #f4f0ff; }
.sb-xray { background: #64748b; color: #f1f5f9; }
.sb-gamma { background: #e85d5d; color: #fff5f5; flex: 0.9; }

.spectrum-axis {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Band tables */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.65rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.band-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 280px;
}

.band-table th,
.band-table td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.band-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-elev);
  position: sticky;
  top: 0;
}

.band-table tr:last-child td {
  border-bottom: none;
}

.band-table td:first-child {
  font-weight: 700;
  font-family: var(--mono);
  color: var(--accent);
  white-space: nowrap;
}

.band-table td:nth-child(2) {
  font-family: var(--mono);
  font-size: 0.84rem;
  white-space: nowrap;
}

/* Aviation frequency chips */
.freq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.freq-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: calc(50% - 0.25rem);
  flex: 1 1 9.5rem;
  padding: 0.65rem 0.75rem;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.freq-chip:hover,
.freq-chip:focus-visible {
  border-color: var(--accent);
  background: var(--accent-bg);
  outline: none;
}

.freq-chip strong {
  font-size: 0.82rem;
  color: var(--text);
}

.freq-chip span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
}

.freq-chip em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Compact freq crib on systems pages */
.freq-callout {
  margin: 1rem 0 0.25rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg-callout);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.freq-callout strong {
  color: var(--text);
}

.freq-callout a {
  color: var(--link);
}

/* Optional topic figure */
.topic-figure {
  margin: 0.85rem 0 1.1rem;
  padding: 0.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.topic-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}

.topic-figure figcaption {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Orbit altitude ladder (satellites topic) */
.orbit-ladder {
  margin: 0.85rem 0 1.1rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.orbit-ladder-track {
  display: flex;
  width: 100%;
  min-height: 3.2rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}

.orbit-ladder-track .ol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.4rem 0.35rem;
  text-align: center;
  line-height: 1.15;
  flex: 1 1 0;
}

.orbit-ladder-track .ol strong {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.orbit-ladder-track .ol span {
  font-family: var(--mono);
  font-size: 0.68rem;
}

.orbit-ladder-track .ol em {
  font-style: normal;
  font-size: 0.62rem;
  opacity: 0.85;
}

.ol-leo {
  background: #3db8a8;
  color: #0b0f14;
  flex: 1.1;
}

.ol-meo {
  background: #5b8def;
  color: #f4f8ff;
  flex: 1.35;
}

.ol-geo {
  background: #8b5cf6;
  color: #f4f0ff;
  flex: 1.55;
}

.orbit-ladder-axis {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Multi-figure gallery row on wide screens */
.figure-row {
  display: grid;
  gap: 0.75rem;
  margin: 0.85rem 0 1.1rem;
}

@media (min-width: 720px) {
  .figure-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.figure-row .topic-figure {
  margin: 0;
  height: 100%;
}

.topic-figure + .topic-figure {
  margin-top: 0.75rem;
}

.figure-row .topic-figure + .topic-figure {
  margin-top: 0;
}


/* Wavelength mini-diagram */
.wl-diagram {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.75rem 0 0.85rem;
  padding: 0.75rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.wl-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
}

.wl-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}

.wl-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
}

.wl-wave {
  display: block;
  height: 1.1rem;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 6px,
      var(--accent) 6px,
      var(--accent) 8px
    );
  opacity: 0.85;
}

.wl-long {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 14px,
      var(--accent) 14px,
      var(--accent) 18px
    );
}

.wl-short {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      #6ec9ff 3px,
      #6ec9ff 5px
    );
}

@media (max-width: 420px) {
  .spectrum-track .sb {
    font-size: 0.55rem;
    padding: 0.2rem 0.1rem;
  }
  .wl-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .wl-meta {
    text-align: left;
  }
}

/* Modulation sketch (carrier / AM / FM) */
.mod-sketch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.15rem 0;
}
.mod-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
}
.mod-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.mod-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.mod-wave {
  display: block;
  height: 1.35rem;
  border-radius: 2px;
  opacity: 0.9;
}
.mod-carrier {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 5px,
      var(--accent) 5px,
      var(--accent) 7px
    );
}
.mod-am {
  /* taller/shorter bars suggest amplitude envelope */
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 4px,
      #6ec9ff 4px 6px,
      transparent 6px 10px,
      #6ec9ff 10px 14px,
      transparent 14px 18px,
      #6ec9ff 18px 22px,
      transparent 22px 26px,
      #6ec9ff 26px 28px
    );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 22%,
    transparent 38%,
    transparent 42%,
    #000 58%,
    #000 72%,
    transparent 88%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 22%,
    transparent 38%,
    transparent 42%,
    #000 58%,
    #000 72%,
    transparent 88%,
    transparent 100%
  );
  height: 1.55rem;
}
.mod-fm {
  /* uneven spacing suggests frequency swing */
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      #9ad4a8 3px,
      #9ad4a8 4px,
      transparent 4px,
      transparent 6px,
      #9ad4a8 6px,
      #9ad4a8 8px,
      transparent 8px,
      transparent 14px,
      #9ad4a8 14px,
      #9ad4a8 15px,
      transparent 15px,
      transparent 18px,
      #9ad4a8 18px,
      #9ad4a8 21px
    );
}
@media (max-width: 420px) {
  .mod-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
  .mod-meta {
    text-align: left;
  }
}


/* Antenna types strip (sys-antennas) */
.antenna-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.ant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.ant-card strong {
  color: var(--text);
  font-size: 0.78rem;
}
.ant-icon {
  display: block;
  width: 36px;
  height: 28px;
  margin-bottom: 0.15rem;
  background: var(--accent, #5b9fd4);
  opacity: 0.85;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.ant-omni {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Cpath fill='%23000' d='M17 26V10l-2-6h6l-2 6v16h-2zm-9-4c-3-4-3-10 0-14l2 1c-2 3-2 9 0 12l-2 1zm18 0-2-1c2-3 2-9 0-12l2-1c3 4 3 10 0 14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Cpath fill='%23000' d='M17 26V10l-2-6h6l-2 6v16h-2zm-9-4c-3-4-3-10 0-14l2 1c-2 3-2 9 0 12l-2 1zm18 0-2-1c2-3 2-9 0-12l2-1c3 4 3 10 0 14z'/%3E%3C/svg%3E");
}
.ant-dir {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Cpath fill='%23000' d='M4 14h16l-4-4 1.4-1.4L26 15l-8.6 6.4L16 20l4-4H4v-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Cpath fill='%23000' d='M4 14h16l-4-4 1.4-1.4L26 15l-8.6 6.4L16 20l4-4H4v-2z'/%3E%3C/svg%3E");
}
.ant-loop {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Ccircle cx='18' cy='14' r='9' fill='none' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='18' cy='14' r='3' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Ccircle cx='18' cy='14' r='9' fill='none' stroke='%23000' stroke-width='3'/%3E%3Ccircle cx='18' cy='14' r='3' fill='%23000'/%3E%3C/svg%3E");
}
.ant-patch {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Crect x='8' y='8' width='20' height='14' rx='2' fill='none' stroke='%23000' stroke-width='3'/%3E%3Crect x='13' y='12' width='10' height='6' rx='1' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28'%3E%3Crect x='8' y='8' width='20' height='14' rx='2' fill='none' stroke='%23000' stroke-width='3'/%3E%3Crect x='13' y='12' width='10' height='6' rx='1' fill='%23000'/%3E%3C/svg%3E");
}
@media (max-width: 520px) {
  .antenna-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* —— Reusable learning visuals (v16) —— */
.viz-diagram,
.viz-steps,
.viz-compare,
.crimp-steps {
  margin: 0.85rem 0 1.1rem;
  padding: 0.75rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.viz-diagram .viz-caption,
.viz-steps .viz-caption,
.viz-compare .viz-caption,
.crimp-steps .viz-caption {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
}

/* Numbered step strip (horizontal → stack on narrow) */
.viz-steps,
.crimp-steps {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.viz-steps-track,
.crimp-steps-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.45rem;
}

.viz-step,
.crimp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.4rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-align: center;
  min-height: 4.2rem;
}

.viz-step-num,
.crimp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: #04110f;
  font-size: 0.75rem;
  font-weight: 700;
}

.viz-step strong,
.crimp-step strong {
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.2;
}

.viz-step span,
.crimp-step span {
  font-size: 0.68rem;
  color: var(--text-dim);
  line-height: 1.25;
}

/* Two-column compare (crimp vs solder, etc.) */
.viz-compare {
  display: grid;
  gap: 0.55rem;
}

.viz-compare-cols {
  display: grid;
  gap: 0.55rem;
}

@media (min-width: 560px) {
  .viz-compare-cols {
    grid-template-columns: 1fr 1fr;
  }
}

.viz-col {
  padding: 0.65rem 0.7rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.viz-col h4 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--accent);
}

.viz-col ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
}

.viz-col li { margin: 0.2rem 0; }

.viz-col-bad {
  border-color: rgba(232, 93, 93, 0.35);
}

.viz-col-good {
  border-color: rgba(61, 184, 168, 0.4);
}

/* Generic block / flow diagram pieces */
.viz-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0.25rem 0;
}

.viz-node {
  padding: 0.4rem 0.65rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.viz-node-accent {
  background: var(--accent-bg);
  border-color: var(--accent-dim);
  color: var(--accent);
}

.viz-arrow {
  color: var(--text-dim);
  font-size: 0.9rem;
  user-select: none;
}

/* Barrel / fill side-view (CSS only) */
.viz-barrel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem;
}

.viz-barrel-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 20rem;
}

.viz-barrel-label {
  flex: 0 0 4.2rem;
  font-size: 0.68rem;
  color: var(--text-dim);
  text-align: right;
}

.viz-barrel-wire {
  flex: 1;
  height: 0.55rem;
  border-radius: 2px;
  background: linear-gradient(90deg, #c9a227 0%, #e8d48b 40%, #c9a227 100%);
}

.viz-barrel-insul {
  flex: 1;
  height: 0.85rem;
  border-radius: 3px;
  background: #3d4d62;
  border: 1px solid var(--border-strong);
}

.viz-barrel-metal {
  flex: 0 0 38%;
  height: 1.35rem;
  border-radius: 4px;
  background: linear-gradient(180deg, #8a9bb0, #5a6a7e);
  border: 2px solid #b8c4d4;
  position: relative;
}

.viz-barrel-metal::after {
  content: "";
  position: absolute;
  inset: 3px 6px;
  border-radius: 2px;
  background: rgba(201, 162, 39, 0.85);
}

/* Go / no-go conceptual */
.viz-gono {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.viz-go, .viz-nogo {
  padding: 0.55rem;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 0.8rem;
}

.viz-go {
  background: var(--bg-ok);
  border: 1px solid rgba(61, 184, 168, 0.45);
  color: var(--accent);
}

.viz-nogo {
  background: rgba(232, 93, 93, 0.12);
  border: 1px solid rgba(232, 93, 93, 0.4);
  color: #f0a0a0;
}

/* Bus topology / pitot stick / TA-RA */
.viz-bus {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.78rem;
}

.viz-bus-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.viz-bus-spine {
  flex: 1;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  position: relative;
}

.viz-bus-tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  min-width: 2.5rem;
}

.viz-stub {
  padding: 0.25rem 0.45rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.7rem;
}

.viz-safe-card {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 560px) {
  .viz-safe-card {
    grid-template-columns: 1fr 1fr;
  }
}

.viz-is, .viz-isnt {
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

.viz-is {
  background: var(--bg-ok);
  border: 1px solid rgba(61, 184, 168, 0.4);
}

.viz-isnt {
  background: rgba(232, 93, 93, 0.1);
  border: 1px solid rgba(232, 93, 93, 0.35);
}

.viz-is strong, .viz-isnt strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.viz-range {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.viz-range-bar {
  display: flex;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}

.viz-range-bar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem;
  text-align: center;
  line-height: 1.15;
}

.viz-vhf { flex: 1.1; background: #3db8a8; color: #0b0f14; }
.viz-hf { flex: 1.4; background: #5b8def; color: #f4f8ff; }

.viz-pitot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.viz-pitot-plane {
  width: 100%;
  max-width: 14rem;
  height: 3.2rem;
  position: relative;
  background:
    linear-gradient(90deg, transparent 8%, var(--border-strong) 8%, var(--border-strong) 92%, transparent 92%) center/100% 2px no-repeat,
    linear-gradient(var(--bg-elev), var(--bg-elev));
  border: 1px solid var(--border);
  border-radius: 40% 40% 20% 20% / 60% 60% 40% 40%;
}

.viz-pitot-probe {
  position: absolute;
  left: -0.15rem;
  top: 42%;
  width: 1.6rem;
  height: 0.35rem;
  background: var(--accent);
  border-radius: 2px;
}

.viz-pitot-static {
  position: absolute;
  right: 28%;
  top: 18%;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--warn);
  border: 2px solid var(--bg);
}

/* Color-code resistor strip (CSS) */
.viz-resistor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem;
}

.viz-res-body {
  display: flex;
  align-items: center;
  width: min(100%, 16rem);
  height: 2.2rem;
  background: #c4a574;
  border-radius: 6px;
  border: 1px solid #8a7349;
  position: relative;
  overflow: hidden;
}

.viz-res-body::before,
.viz-res-body::after {
  content: "";
  position: absolute;
  top: 45%;
  width: 1.2rem;
  height: 2px;
  background: #9aa;
}

.viz-res-body::before { left: -0.9rem; }
.viz-res-body::after { right: -0.9rem; }

.viz-res-bands {
  display: flex;
  gap: 0.35rem;
  margin-left: 1.4rem;
}

.viz-res-bands i {
  display: block;
  width: 0.35rem;
  height: 2.2rem;
  font-style: normal;
}

.band-brn { background: #8B4513; }
.band-blk { background: #1a1a1a; }
.band-red { background: #c0392b; }
.band-gld { background: #d4af37; }

@media (max-width: 420px) {
  .viz-gono { grid-template-columns: 1fr; }
  .viz-step, .crimp-step { min-height: 3.6rem; }
}

/* —— Good vs bad concept sketches (v19 Shop) —— */
.viz-gb-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.viz-col-good > h4 { color: var(--accent); }
.viz-col-bad > h4 { color: #f0a0a0; }

/* Barrel fill (match wire) */
.viz-sketch-barrel {
  display: flex;
  align-items: center;
  gap: 0;
  height: 2.1rem;
  margin: 0.35rem 0 0.55rem;
  max-width: 14rem;
}
.viz-sketch-barrel .vs-insul {
  width: 2.6rem;
  height: 1.15rem;
  background: #3d4d62;
  border: 1px solid var(--border-strong);
  border-radius: 2px 0 0 2px;
}
.viz-sketch-barrel .vs-cond {
  width: 2.2rem;
  height: 0.55rem;
  background: linear-gradient(90deg, #c9a227, #e8d48b);
  border-radius: 1px;
}
.viz-sketch-barrel .vs-barrel {
  flex: 1;
  height: 1.55rem;
  background: linear-gradient(180deg, #8a9bb0, #5a6a7e);
  border: 2px solid #b8c4d4;
  border-radius: 4px;
  position: relative;
}
.viz-sketch-barrel .vs-barrel::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 4px; bottom: 4px;
  background: rgba(201, 162, 39, 0.85);
  border-radius: 2px;
}
.viz-sketch-bad-thin .vs-cond { width: 0.85rem; opacity: 0.7; }
.viz-sketch-bad-thin .vs-barrel::after {
  left: 4px; right: 55%;
  background: rgba(201, 162, 39, 0.35);
}

/* Strip sketches */
.viz-sketch-strip {
  display: flex;
  align-items: center;
  gap: 0;
  height: 1.7rem;
  position: relative;
  padding-left: 0.1rem;
}
.viz-sketch-strip .vs-tag {
  position: absolute;
  left: 0; top: -0.85rem;
  font-size: 0.62rem;
  color: #f0a0a0;
  white-space: nowrap;
}
.viz-gb-stack .viz-sketch-strip { margin-top: 0.85rem; }
.viz-sketch-strip .vs-jacket {
  width: 4.5rem;
  height: 0.95rem;
  background: #3d4d62;
  border: 1px solid var(--border-strong);
  border-radius: 2px 0 0 2px;
}
.viz-sketch-strip .vs-bare {
  width: 2.4rem;
  height: 0.5rem;
  background: linear-gradient(90deg, #c9a227, #e8d48b);
  border-radius: 1px;
  position: relative;
}
.viz-strip-ok .vs-jacket { border-color: rgba(61, 184, 168, 0.55); }
.viz-strip-short .vs-bare { width: 0.7rem; }
.viz-strip-long .vs-bare { width: 4.2rem; }
.viz-strip-nick .vs-bare i {
  position: absolute;
  left: 35%; top: -2px;
  width: 0.35rem; height: 0.75rem;
  background: #e85d5d;
  border-radius: 1px;
  transform: rotate(18deg);
  display: block;
}
.viz-strip-fray .vs-fray {
  background: none;
  height: 0.85rem;
  width: 2.6rem;
  box-shadow:
    2px 0 0 #c9a227,
    5px -3px 0 #e8d48b,
    8px 2px 0 #c9a227,
    11px -2px 0 #b89620,
    14px 3px 0 #e8d48b;
}

/* Crimp inspect sketches */
.viz-sketch-crimp {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 3.1rem;
  position: relative;
  margin-top: 0.15rem;
  padding: 0.35rem 0 0.15rem;
}
.viz-sketch-crimp .vc-label {
  position: absolute;
  left: 0; top: -0.2rem;
  font-size: 0.62rem;
  color: #f0a0a0;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.viz-gb-stack .viz-sketch-crimp {
  margin-top: 1.35rem;
  padding-top: 0.85rem;
  padding-bottom: 0.35rem;
  border-top: 1px dashed rgba(232, 93, 93, 0.18);
}
.viz-gb-stack .viz-sketch-crimp:first-child {
  margin-top: 0.55rem;
  border-top: none;
}
.viz-sketch-crimp .vc-wire {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
.viz-sketch-crimp .vc-insul {
  width: 2rem;
  height: 0.95rem;
  background: #3d4d62;
  border: 1px solid var(--border-strong);
  border-radius: 2px 0 0 2px;
  flex-shrink: 0;
}
.viz-sketch-crimp .vc-cond {
  width: 1.15rem;
  height: 0.48rem;
  background: #c9a227;
  flex-shrink: 0;
}
.viz-sketch-crimp .vc-barrel {
  width: 3.7rem;
  height: 1.35rem;
  background: linear-gradient(180deg, #9aabbf, #5a6a7e);
  border: 2px solid #c5d0de;
  border-radius: 3px 6px 6px 3px;
  position: relative;
  margin-left: -0.1rem;
  flex-shrink: 0;
  z-index: 1;
}
.viz-sketch-crimp .vc-indent {
  position: absolute;
  left: 26%;
  top: 3px;
  bottom: 3px;
  width: 0.42rem;
  background: rgba(11, 15, 20, 0.55);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.35);
}
.viz-sketch-crimp .vc-indent-2 {
  left: auto;
  right: 22%;
}

/* —— Acceptable —— */
.viz-crimp-ok {
  min-height: 3.4rem;
  padding-top: 0.55rem;
}
.viz-crimp-ok .vc-chip {
  position: absolute;
  right: 0; top: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: rgba(61, 184, 168, 0.2);
  color: #3db8a8;
  border: 1px solid rgba(61, 184, 168, 0.55);
}
.viz-crimp-ok .vc-insul {
  width: 2.05rem;
}
.viz-crimp-ok .vc-cond {
  width: 0.85rem; /* short bare — insulation stops before crimp zone */
}
.viz-crimp-ok .vc-barrel {
  height: 1.15rem; /* compressed */
  border-color: rgba(61, 184, 168, 0.85);
  background: linear-gradient(180deg, #8fa3b8, #4e6074);
  box-shadow: 0 0 0 1px rgba(61, 184, 168, 0.25);
}
.viz-crimp-ok .vc-bell {
  position: absolute;
  left: -1px; top: -2px; bottom: -2px;
  width: 9px;
  border: 2px solid rgba(61, 184, 168, 0.75);
  border-right: none;
  border-radius: 7px 0 0 7px;
  pointer-events: none;
}
.viz-crimp-ok .vc-indent,
.viz-crimp-ok .vc-indent-2 {
  top: 2px; bottom: 2px;
  width: 0.5rem;
  background: rgba(8, 12, 18, 0.7);
}
.viz-crimp-ok .vc-window {
  position: absolute;
  left: 48%;
  top: 18%;
  bottom: 18%;
  width: 0.55rem;
  background: rgba(11, 15, 20, 0.35);
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 1px;
  overflow: hidden;
}
.viz-crimp-ok .vc-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #e8d48b, #c9a227 40%, #a88418);
}

/* —— Reject: bad bellmouth / trumpet flare —— */
.viz-crimp-bell .vc-bad-bell {
  border-color: #e85d5d;
  border-radius: 3px 4px 4px 3px;
  background: linear-gradient(180deg, #8a6a6a, #5a4545);
}
.viz-crimp-bell .vc-flare-mouth {
  position: absolute;
  left: -14px;
  top: -10px;
  bottom: -10px;
  width: 18px;
  background:
    linear-gradient(90deg, transparent 35%, rgba(232, 93, 93, 0.15) 100%),
    radial-gradient(ellipse at right, rgba(154, 171, 191, 0.55) 0%, transparent 70%);
  border: 2.5px solid #e85d5d;
  border-right: none;
  border-radius: 18px 0 0 18px;
  box-shadow: -2px 0 0 rgba(232, 93, 93, 0.35);
  z-index: 3;
}
.viz-crimp-bell .vc-flare-mouth::before,
.viz-crimp-bell .vc-flare-mouth::after {
  content: "";
  position: absolute;
  left: 2px;
  width: 14px;
  height: 2px;
  background: #e85d5d;
  opacity: 0.9;
}
.viz-crimp-bell .vc-flare-mouth::before {
  top: 22%;
  transform: rotate(-28deg);
}
.viz-crimp-bell .vc-flare-mouth::after {
  bottom: 22%;
  transform: rotate(28deg);
}
.viz-crimp-bell .vc-crack {
  position: absolute;
  left: 0;
  top: 42%;
  width: 12px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    #e85d5d 0 3px,
    transparent 3px 5px
  );
  transform: rotate(-18deg);
  z-index: 4;
}
.viz-crimp-bell .vc-indent {
  opacity: 0.45;
}

/* —— Reject: insulation under / over (two minis) —— */
.viz-crimp-insul-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  min-height: auto;
}
.viz-crimp-insul-stack .vc-mini {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 2.2rem;
  padding-left: 0.1rem;
}
.viz-crimp-insul-stack .vc-mini-tag {
  position: absolute;
  right: 0;
  top: -0.15rem;
  font-size: 0.55rem;
  font-weight: 700;
  color: #f0a0a0;
  background: rgba(232, 93, 93, 0.12);
  border: 1px solid rgba(232, 93, 93, 0.45);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  text-transform: lowercase;
}
.viz-crimp-insul .vc-barrel {
  border-color: rgba(232, 93, 93, 0.7);
}
/* Jacket invading conductor crimp zone */
.viz-crimp-insul .vc-insul-invade {
  width: 3.55rem;
  height: 0.95rem;
  background: #4a6a9a;
  border-color: #6a8ab8;
  box-shadow: inset -8px 0 0 rgba(74, 106, 154, 0.9);
  position: relative;
  z-index: 3;
  margin-right: -1.55rem; /* push blue jacket under barrel */
}
.viz-crimp-insul .vc-mini:first-of-type .vc-cond {
  width: 0.35rem;
  opacity: 0.35;
}
.viz-crimp-insul .vc-mini:first-of-type .vc-barrel {
  z-index: 1;
}
.viz-crimp-insul .vc-mini:first-of-type .vc-indent,
.viz-crimp-insul .vc-mini:first-of-type .vc-indent-2 {
  /* show indent over blue jacket to sell “insulation in crimp” */
  z-index: 4;
  background: rgba(11, 15, 20, 0.55);
  box-shadow: 0 0 0 1px rgba(74, 106, 154, 0.5);
}
/* Over-strip / short insulation — long bare gap */
.viz-crimp-insul .vc-insul-short {
  width: 1.35rem;
}
.viz-crimp-insul .vc-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 0.9rem;
  position: relative;
  flex-shrink: 0;
  border-bottom: 2px dashed rgba(232, 93, 93, 0.85);
  margin: 0 1px;
}
.viz-crimp-insul .vc-gap::before,
.viz-crimp-insul .vc-gap::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.55rem;
  height: 2px;
  background: #e85d5d;
}
.viz-crimp-insul .vc-gap::before { left: 0; transform: rotate(45deg); }
.viz-crimp-insul .vc-gap::after { right: 0; transform: rotate(-45deg); }
.viz-crimp-insul .vc-gap-x {
  font-size: 0.52rem;
  font-weight: 800;
  color: #e85d5d;
  letter-spacing: 0.02em;
  background: rgba(11, 15, 20, 0.85);
  padding: 0 0.2rem;
  border-radius: 2px;
  position: relative;
  z-index: 1;
}
.viz-crimp-insul .vc-mini:last-of-type .vc-cond {
  width: 1.7rem;
  background: repeating-linear-gradient(
    90deg,
    #c9a227 0 3px,
    #e8d48b 3px 5px
  );
}

/* —— Reject: birdcage / strand flare —— */
.viz-crimp-bird {
  min-height: 3.6rem;
}
.viz-crimp-bird .vc-barrel {
  border-color: rgba(232, 93, 93, 0.75);
  margin-left: 0.15rem;
}
.viz-crimp-bird .vc-flare-lines {
  position: relative;
  width: 1.9rem;
  height: 1.7rem;
  flex-shrink: 0;
  margin-right: -0.2rem;
}
.viz-crimp-bird .vc-strand {
  position: absolute;
  left: 0;
  width: 1.85rem;
  height: 2.5px;
  background: linear-gradient(90deg, #c9a227, #e8d48b);
  border-radius: 1px;
  transform-origin: left center;
  box-shadow: 0 0 0 1px rgba(184, 150, 32, 0.35);
}
.viz-crimp-bird .vc-strand.s1 { top: 8%;  transform: rotate(-38deg); background: #e8d48b; }
.viz-crimp-bird .vc-strand.s2 { top: 28%; transform: rotate(-16deg); }
.viz-crimp-bird .vc-strand.s3 { top: 48%; transform: rotate(4deg); width: 1.35rem; opacity: 0.85; }
.viz-crimp-bird .vc-strand.s4 { top: 62%; transform: rotate(22deg); background: #b89620; }
.viz-crimp-bird .vc-strand.s5 { top: 78%; transform: rotate(40deg); background: #e8d48b; width: 1.7rem; }
.viz-crimp-bird .vc-strand.s1::after,
.viz-crimp-bird .vc-strand.s5::after {
  content: "";
  position: absolute;
  right: -3px; top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #e8d48b;
  box-shadow: 0 0 0 1px rgba(232, 93, 93, 0.5);
}

/* —— Reject: uneven / undercrimp —— */
.viz-crimp-uneven .vc-uneven {
  height: 1.85rem; /* tall / barely compressed */
  border: 2px dashed #e85d5d;
  border-radius: 8px;
  background: linear-gradient(180deg, #a8b6c6, #7a8a9c);
  box-shadow: inset 0 0 0 1px rgba(232, 93, 93, 0.2);
}
.viz-crimp-uneven .vc-indent-weak {
  left: 14%;
  top: 35%;
  bottom: 35%;
  width: 0.28rem;
  opacity: 0.4;
  background: rgba(11, 15, 20, 0.35);
  box-shadow: none; /* no second indent */
}
.viz-crimp-uneven .vc-uneven::after {
  content: "soft";
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 0.5rem;
  font-weight: 700;
  color: #e85d5d;
  letter-spacing: 0.03em;
  text-transform: lowercase;
}

/* —— Reject: missing strands —— */
.viz-crimp-missing {
  min-height: 3.5rem;
}
.viz-crimp-missing .vc-tag-miss {
  position: absolute;
  right: 0;
  top: 0.55rem;
  font-size: 0.52rem;
  font-weight: 800;
  color: #e85d5d;
  background: rgba(232, 93, 93, 0.12);
  border: 1px solid rgba(232, 93, 93, 0.55);
  border-radius: 3px;
  padding: 0.05rem 0.28rem;
}
.viz-crimp-missing .vc-tag-miss::before {
  content: "✕ ";
}
.viz-crimp-missing .vc-strands {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 1.55rem;
  height: 0.85rem;
  flex-shrink: 0;
  padding: 0 1px;
}
.viz-crimp-missing .vc-strand-mark {
  width: 3px;
  height: 0.7rem;
  background: #c9a227;
  border-radius: 1px;
  flex-shrink: 0;
}
.viz-crimp-missing .vc-strand-gone {
  background: transparent;
  border: 1.5px dashed rgba(232, 93, 93, 0.85);
  height: 0.55rem;
  opacity: 0.9;
}
.viz-crimp-missing .vc-hollow {
  border-color: rgba(232, 93, 93, 0.75);
  background: linear-gradient(180deg, #6a7585 0%, #3a4450 45%, #6a7585 100%);
}
.viz-crimp-missing .vc-window-empty {
  position: absolute;
  left: 42%;
  top: 15%;
  bottom: 15%;
  width: 0.7rem;
  background: rgba(11, 15, 20, 0.55);
  border: 1px dashed rgba(232, 93, 93, 0.65);
  border-radius: 1px;
}
.viz-crimp-missing .vc-window-empty::after {
  content: "";
  position: absolute;
  inset: 20% 30%;
  border: 1.5px solid rgba(232, 93, 93, 0.5);
  border-radius: 1px;
  opacity: 0.7;
}
.viz-crimp-missing .vc-indent,
.viz-crimp-missing .vc-indent-2 {
  opacity: 0.5;
}

/* Lug / PIDG sketches */
.viz-sketch-lug {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  height: 2.2rem;
  margin: 0.35rem 0 0.55rem;
}
.viz-sketch-lug .vl-tongue {
  width: 1.6rem;
  height: 1.35rem;
  border: 2px solid #b8c4d4;
  border-radius: 2px;
  background: linear-gradient(180deg, #8a9bb0, #5a6a7e);
  position: relative;
}
.viz-sketch-lug .vl-tongue::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.55rem; height: 0.55rem;
  margin: -0.28rem 0 0 -0.28rem;
  border-radius: 50%;
  border: 2px solid #0b0f14;
  background: transparent;
}
.viz-sketch-lug .vl-barrel {
  width: 2.4rem;
  height: 1.15rem;
  background: #c45c26;
  border: 1px solid #e8a07a;
  border-radius: 3px;
  position: relative;
}
.viz-lug-ok .vl-barrel { box-shadow: inset 0 0 0 2px rgba(61, 184, 168, 0.35); }
.viz-sketch-lug .vl-dot {
  position: absolute;
  left: 40%; top: 50%;
  width: 0.35rem; height: 0.35rem;
  margin-top: -0.18rem;
  border-radius: 50%;
  background: #0b0f14;
  box-shadow: 0.45rem 0 0 #0b0f14;
}
.viz-sketch-lug .vl-wire {
  width: 2rem;
  height: 0.55rem;
  background: #3d4d62;
  border-radius: 0 2px 2px 0;
}
.viz-lug-bad .vl-smashed {
  height: 0.75rem;
  background: #8a4030;
  border-color: #e85d5d;
  transform: scaleY(0.7);
}
.viz-lug-bad .vl-smashed::after {
  content: "!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #f0a0a0;
}




/* Pass 1 — clearer shop sketches + photo rows */
.viz-photo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
@media (min-width: 720px) {
  .viz-photo-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.viz-photo-row .topic-figure { margin: 0; }

.viz-sketch-barrel { position: relative; margin-top: 1.1rem; }
.viz-sketch-barrel .vs-tag {
  position: absolute;
  left: 0; top: -0.95rem;
  font-size: 0.62rem;
  color: #f0a0a0;
  white-space: nowrap;
  font-weight: 600;
}
.viz-sketch-barrel .vs-tag-ok { color: #3db8a8; }
.viz-gb-stack .viz-sketch-barrel { margin-top: 1.15rem; }
.viz-sketch-bad-fat .vs-cond {
  width: 2.85rem;
  height: 0.85rem;
  opacity: 0.95;
}
.viz-sketch-bad-fat .vs-barrel {
  border-color: #e85d5d;
  background: linear-gradient(180deg, #6a3a3a, #4a2a2a);
}
.viz-sketch-bad-fat .vs-barrel::after {
  left: 2px; right: 2px; top: 2px; bottom: 2px;
  background: rgba(201, 162, 39, 0.95);
  outline: 1px dashed rgba(232, 93, 93, 0.7);
}
.viz-sketch-bad-fat .vs-barrel-jam::before {
  content: "jam";
  position: absolute;
  right: -0.15rem; top: -0.85rem;
  font-size: 0.58rem;
  color: #f0a0a0;
  font-weight: 700;
}

/* Set-up head tool glyphs */
.viz-sketch-tool {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  height: 2.6rem;
  margin: 1.1rem 0 0.55rem;
  max-width: 14rem;
}
.viz-sketch-tool .vt-tag {
  position: absolute;
  left: 0; top: -0.95rem;
  font-size: 0.62rem;
  color: #f0a0a0;
  white-space: nowrap;
  font-weight: 600;
}
.viz-sketch-tool .vt-tag-ok { color: #3db8a8; }
.viz-sketch-tool .vt-handles {
  width: 3.4rem;
  height: 0.55rem;
  background: linear-gradient(90deg, #3db8a8, #2a8f82);
  border-radius: 3px;
  position: relative;
}
.viz-sketch-tool .vt-handles::before,
.viz-sketch-tool .vt-handles::after {
  content: "";
  position: absolute;
  left: 0; width: 3.2rem; height: 0.35rem;
  background: #2a8f82;
  border-radius: 2px;
}
.viz-sketch-tool .vt-handles::before { top: -0.45rem; transform: rotate(-12deg); }
.viz-sketch-tool .vt-handles::after { bottom: -0.45rem; transform: rotate(12deg); }
.viz-sketch-tool .vt-cheap {
  background: #6a4a3a;
}
.viz-sketch-tool .vt-cheap::before,
.viz-sketch-tool .vt-cheap::after { background: #8a5a40; }
.viz-sketch-tool .vt-pivot {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  background: #b8c4d4;
  border: 2px solid #5a6a7e;
  flex-shrink: 0;
}
.viz-sketch-tool .vt-head {
  width: 2.6rem; height: 1.6rem;
  background: linear-gradient(180deg, #9aabbf, #5a6a7e);
  border: 2px solid #c5d0de;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.viz-sketch-tool .vt-die {
  width: 0.55rem; height: 0.55rem;
  border-radius: 2px;
  background: #0b0f14;
  box-shadow: inset 0 0 0 1px #3db8a8;
}
.viz-sketch-tool .vt-head-open {
  border-color: #e85d5d;
  background: #4a2a2a;
}
.viz-sketch-tool .vt-x {
  color: #f0a0a0;
  font-weight: 800;
  font-size: 0.95rem;
}

/* Lug tag + mismatch reject */
.viz-sketch-lug { position: relative; margin-top: 1.1rem; }
.viz-sketch-lug .vl-tag {
  position: absolute;
  left: 0; top: -0.95rem;
  font-size: 0.62rem;
  color: #f0a0a0;
  white-space: nowrap;
  font-weight: 600;
}
.viz-sketch-lug .vl-tag-ok { color: #3db8a8; }
.viz-gb-stack .viz-sketch-lug { margin-top: 1.15rem; }
.viz-lug-mismatch .vl-tongue-huge {
  width: 2.6rem;
  height: 1.7rem;
  border-color: #e85d5d;
}
.viz-lug-mismatch .vl-barrel-tiny {
  width: 1.15rem;
  height: 0.85rem;
  background: #8a4030;
  border-color: #e85d5d;
}

/* Photo accept/reject framing for soldering galleries */
.topic-figure.fig-ok {
  border-color: rgba(61, 184, 168, 0.45);
}
.topic-figure.fig-bad {
  border-color: rgba(232, 93, 93, 0.4);
}
.topic-figure.fig-ok figcaption strong {
  color: #3db8a8;
}
.topic-figure.fig-bad figcaption strong {
  color: #f0a0a0;
}

/* —— Decoders (v26) —— */
.section-pill-decoders {
  color: #f0c878;
  background: rgba(230, 162, 60, 0.14);
  border-color: #8a6a30;
}

.decoder-home-list .topic-card {
  border-color: #3d4a2a;
  background: linear-gradient(180deg, #1a2218 0%, var(--bg-card) 70%);
}

.decoder-home-list .topic-num {
  background: rgba(230, 162, 60, 0.16);
  color: var(--warn);
  border-color: #8a6a30;
}

.decoder-lead {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.decoder-tool {
  margin: 0 0 1rem;
}

.decoder-disclaimer {
  margin: 0.85rem 0 0.5rem;
  font-size: 0.82rem;
}

.decoder-note {
  margin-top: 0.85rem;
}

.band-pickers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0.85rem 0;
}

@media (min-width: 420px) {
  .band-pickers {
    grid-template-columns: 1fr 1fr;
  }
}

.band-picker {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.band-picker-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.band-picker-label em {
  font-style: normal;
  color: var(--warn);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-left: 0.25rem;
}

.band-select {
  min-height: var(--tap);
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font);
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-strong);
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.band-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.decoder-result {
  margin: 0.75rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--bg-ok);
  border: 1px solid #2a5a45;
  border-radius: var(--radius);
}

.decoder-result-main {
  font-size: 1.35rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.decoder-result-main strong {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 1.5rem;
}

.decoder-result-detail {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* BIN contact preview */
.bin-preview {
  margin: 0 0 0.75rem;
}

.bin-contact {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 3.2rem;
  padding: 0.5rem 0;
}

.bin-barrel {
  width: 2.4rem;
  height: 1.7rem;
  background: linear-gradient(180deg, #8a9bb0, #5a6a7e);
  border: 2px solid #b8c4d4;
  border-radius: 4px 0 0 4px;
  flex-shrink: 0;
}

.bin-bands {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0 0.55rem;
  height: 2.4rem;
  background: linear-gradient(180deg, #6a788c, #4a5868);
  border-top: 2px solid #8a9bb0;
  border-bottom: 2px solid #8a9bb0;
}

.bin-band {
  display: block;
  width: 0.55rem;
  border-radius: 1px;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.bin-band-wide {
  width: 1.05rem;
}

.bin-band.is-light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.bin-wire {
  flex: 1;
  height: 0.85rem;
  max-width: 4.5rem;
  background: linear-gradient(90deg, #3d4d62, #2a3544);
  border-radius: 0 3px 3px 0;
  border: 1px solid var(--border-strong);
  border-left: none;
}

/* Resistor mode toggle */
.res-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.res-mode-btn {
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.res-mode-btn.is-active {
  background: var(--accent-bg);
  border-color: var(--accent-dim);
  color: var(--accent);
}

.res-mode-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.res-live-preview {
  margin: 0.5rem 0 0.25rem;
}

.res-live-preview .viz-res-bands {
  margin-left: 1.1rem;
  gap: 0.4rem;
}

.res-live-preview .viz-res-bands i {
  width: 0.4rem;
  border-radius: 1px;
}

.res-live-preview .viz-res-bands i.is-light {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Terminal AWG swatches */
.term-swatches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0.5rem 0 0.85rem;
}

@media (min-width: 480px) {
  .term-swatches {
    grid-template-columns: repeat(3, 1fr);
  }
}

.term-swatch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-height: var(--tap);
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(0, 0, 0, 0.35);
  background: var(--term-c, var(--bg-card));
  color: var(--term-t, var(--text));
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.term-swatch strong {
  font-size: 1rem;
  font-weight: 750;
}

.term-swatch span {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.9;
}

.term-swatch.is-active {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.term-swatch:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Wire color crib table */
.wire-color-table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.wire-color-table {
  margin: 0;
  width: 100%;
}

.wire-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.45rem;
  border-radius: 3px;
  background: var(--wc);
  border: 1px solid rgba(255, 255, 255, 0.2);
  vertical-align: -0.1rem;
}



/* Interactive wire decoder + shared color chips (v26) */
.decode-fieldset {
  margin: 0.85rem 0;
  padding: 0;
  border: none;
}

.decode-fieldset legend {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.4rem;
  padding: 0;
}

.color-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tap);
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(0, 0, 0, 0.35);
  background: var(--chip-bg, var(--bg-card));
  color: var(--chip-fg, var(--text));
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.color-chip .chip-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.color-chip .chip-extra {
  font-family: var(--mono);
  font-size: 0.75rem;
  opacity: 0.9;
  margin-left: 0.1rem;
}

.color-chip.is-selected {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.color-chip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sticky-result {
  position: sticky;
  top: calc(var(--header-h) + 0.35rem);
  z-index: 20;
  box-shadow: var(--shadow);
}

.wire-preview {
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.wire-body-viz {
  display: block;
  height: 2.4rem;
  border-radius: 999px;
  background: #2a3544;
  border: 2px solid var(--border-strong);
  position: relative;
  overflow: hidden;
}

.wire-tracer-viz {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 35%;
  height: 30%;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.decode-reset {
  margin-top: 0.35rem;
}


/* —— Hangar · METAR / TAF (v28) —— */
.hangar-tool .hangar-icao-row {
  margin-bottom: 0.35rem;
}

.hangar-icao-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.hangar-status {
  margin: 0.65rem 0 0;
  min-height: 1.35em;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.hangar-status:empty {
  display: none;
}

.hangar-status-pending {
  color: var(--text-muted);
}

.hangar-status-ok {
  color: var(--ok, #6dcaa0);
}

.hangar-status-error {
  color: var(--warn-text);
  background: var(--bg-warn);
  border: 1px solid #5a4520;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
}

.hangar-wx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.hangar-wx-card {
  margin: 0.5rem 0 0;
}

.hangar-raw {
  margin: 0;
  padding: 0.75rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  min-height: 3.2em;
}

.hangar-decode {
  margin: 0.55rem 0 0;
  padding: 0.65rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.hangar-decode-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hangar-decode-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.35rem 0.65rem;
  align-items: baseline;
}

@media (max-width: 380px) {
  .hangar-decode-row {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

.hangar-decode-row dt {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hangar-decode-row dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--text);
}

.hangar-decode-group {
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.65rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.hangar-decode-group:last-of-type {
  margin-bottom: 0.35rem;
}

.hangar-decode-group-title {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--accent);
}

.hangar-decode-note {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
}

.hangar-source {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
}

.hangar-links-title {
  margin: 1.15rem 0 0.55rem !important;
  font-size: 0.95rem !important;
  color: var(--accent) !important;
}

.hangar-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

@media (min-width: 420px) {
  .hangar-links {
    grid-template-columns: 1fr 1fr;
  }
}

.hangar-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--accent-bg);
  color: var(--link);
  font-weight: 650;
  font-size: 0.92rem;
  text-decoration: none;
  text-align: center;
}

.hangar-link-btn:hover,
.hangar-link-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
  text-decoration: underline;
}

.hangar-adsb-note {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
}


/* —— Hubs (v32) —— */

.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}

@media (min-width: 520px) {
  .hub-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.hub-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.75rem;
  min-height: 4.5rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  -webkit-tap-highlight-color: transparent;
}

.hub-card:hover,
.hub-card:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.hub-card-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.hub-card-count {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 550;
}

.hub-card-chevron {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 1.5rem;
  color: var(--text-dim);
  line-height: 1;
}

.hub-card-tools {
  border-color: #8a6a30;
  background: linear-gradient(180deg, rgba(230, 162, 60, 0.1) 0%, var(--bg-card) 70%);
}

.hub-card-shop {
  border-color: var(--accent-dim);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-bg) 80%, transparent) 0%, var(--bg-card) 70%);
}


.hub-card-school {
  border-color: #3a6a8a;
  background: linear-gradient(180deg, rgba(110, 201, 255, 0.1) 0%, var(--bg-card) 70%);
}

.hub-page-count {
  margin: 0.35rem 0 1rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.hub-page h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 1.45rem;
}