/* Frequenzplan explorer, styles for the two interactive figures.
   Scoped under .fp so nothing leaks into the surrounding prose. */

.fp {
  /* A light chart sheet inset into the dark article. The categorical palette is
     validated against this exact surface; changing it means re-running the
     validator. */
  --fp-surface: #fcfcfb;
  --fp-surface-2: #f2f1ed;
  --fp-ink: #1a1a18;
  /* Measured against the panel surface #f2f1ed, not the page white: the old
     tertiary sat at 4.53:1, which is nominally AA but unreadable at the 10-11px
     these labels use. */
  --fp-ink-2: #4a4842;
  --fp-ink-3: #5c5b54;
  --fp-rule: #d9d7d0;
  /* Two steps of one hue, because the widget spans two surfaces: the phosphor
     green reads on the black bezel, the deep green on the chart paper (it is
     the step that clears contrast there). */
  --fp-accent: #15803d;
  --fp-phosphor: #4ade80;
  --fp-bezel: #05070500;

  /* Break out of the 75ch prose column without ever exceeding the viewport. */
  width: min(1120px, 100vw - 2rem);
  margin: 2.5rem auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  background: var(--fp-surface);
  /* Same bezel the site gives article images: hard 3px rule, hard offset
     shadow, no blur, no radius. */
  border: 3px solid var(--fp-phosphor);
  box-shadow: 4px 4px 0 var(--fp-phosphor);
  color: var(--fp-ink);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

.fp-head {
  padding: 0.7rem 1rem 0.75rem;
  background: #000;
  border-bottom: 3px solid var(--fp-phosphor);
}

.fp-title {
  margin: 0 0 0.4rem;
  font-family: 'Press Start 2P', 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--fp-phosphor);
  text-shadow: 2px 2px 0 #000;
}

.fp-head .fp-sub {
  margin: 0;
  color: #8fbf9f;
  font-size: 12px;
}

/* Readings, not dashboard tiles: one instrument row across the title bar. */
.fp-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.6rem;
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(74, 222, 128, 0.28);
}

.fp-reading b {
  font-family: 'Press Start 2P', 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--fp-phosphor);
  text-shadow: 2px 2px 0 #000;
}

.fp-reading span {
  margin-left: 0.5rem;
  color: #7f9e8a;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* The figure body keeps its own subtitle colour on the light paper. */
.fp-body .fp-sub {
  margin: 0;
  color: var(--fp-ink-2);
  font-size: 12px;
}

.fp-body {
  padding: 0.75rem 1rem 1rem;
}

/* ---------- controls ---------- */

.fp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.fp-bar-label {
  /* Fixed box so "JUMP TO" and "VIEW" occupy the same width and both rows of
     controls start on the same column. */
  display: inline-block;
  min-width: 4.5rem;
  flex: 0 0 auto;
  color: var(--fp-ink-3);
  margin-right: 0.15rem;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fp-btn {
  appearance: none;
  background: transparent;
  color: var(--fp-ink-2);
  border: 1px solid #b9b7ae;
  border-radius: 0;
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: none;
}

.fp-btn:hover {
  background: var(--fp-ink);
  border-color: var(--fp-ink);
  color: var(--fp-surface);
}

.fp-btn:focus-visible {
  outline: 2px solid var(--fp-accent);
  outline-offset: 1px;
}

.fp-btn[aria-pressed='true'] {
  border-color: var(--fp-accent);
  color: var(--fp-accent);
}

/* No rounded corners anywhere: the site has none. */
.fp-swatch,
.fp-tip,
.fp-panel,
.fp-table-wrap,
.fp-probe-form input,
.fp-probe-form select {
  border-radius: 0;
}

/* ---------- legend / filter ---------- */

.fp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  margin: 0.75rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--fp-rule);
  list-style: none;
}

.fp-legend button {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  padding: 0.15rem 0;
  color: var(--fp-ink-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}

.fp-legend button:hover {
  color: var(--fp-ink);
}

.fp-legend button:focus-visible {
  outline: 2px solid var(--fp-accent);
  outline-offset: 2px;
}

.fp-legend button[aria-pressed='false'] {
  opacity: 0.4;
  text-decoration: line-through;
}

.fp-swatch {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

.fp-legend .fp-count {
  color: var(--fp-ink-3);
}

/* ---------- charts ---------- */

.fp-figure {
  position: relative;
  /* Below ~760px the chart stops being legible, so it scrolls inside its own
     box rather than shrinking the whole page's content to fit. */
  overflow-x: auto;
  overflow-y: hidden;
}

.fp-figure svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
  touch-action: pan-x pan-y;
  /* Brushing and panning are drags across text labels, which the browser would
     otherwise treat as a text selection. Only the chart is locked; the detail
     panel, table and probe results stay selectable so entries can be copied. */
  -webkit-user-select: none;
  user-select: none;
}

.fp-overview {
  cursor: crosshair;
}

.fp-detail {
  cursor: grab;
}

.fp svg.is-panning,
.fp svg.is-panning .fp-detail {
  cursor: grabbing;
}

.fp-axis text,
text.fp-axis {
  fill: var(--fp-ink-3);
  font-size: 10px;
  font-family: inherit;
}

.fp-axis line {
  stroke: #c9c7bf;
  stroke-width: 1;
}

.fp-band {
  stroke: var(--fp-surface);
  stroke-width: 1;
}

.fp-band:hover,
.fp-band.is-active {
  stroke: var(--fp-ink);
  stroke-width: 2;
}

.fp-band-label {
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  font-family: inherit;
}

.fp-window {
  fill: rgba(21, 128, 61, 0.14);
  stroke: var(--fp-accent);
  stroke-width: 1.5;
}

.fp-link {
  fill: rgba(21, 128, 61, 0.07);
  stroke: var(--fp-accent);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.fp-track-label {
  fill: var(--fp-ink-3);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: inherit;
}

/* ---------- tooltip / detail panel ---------- */

.fp-tip {
  position: absolute;
  z-index: 5;
  max-width: 22rem;
  padding: 0.45rem 0.6rem;
  background: #000;
  border: 2px solid var(--fp-phosphor);
  box-shadow: 3px 3px 0 rgba(74, 222, 128, 0.35);
  color: #e8f3ea;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s linear;
}

.fp-tip[data-show='1'] {
  opacity: 1;
}

.fp-tip b {
  color: var(--fp-phosphor);
}

.fp-panel {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--fp-rule);
  background: var(--fp-surface-2);
  min-height: 6.5rem;
}

.fp .fp-panel-title {
  margin: 0 0 0.5rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--fp-accent);
}

.fp-panel dl {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: 0.2rem 0.9rem;
  margin: 0;
}

.fp-panel dt {
  color: var(--fp-ink-2);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fp .fp-panel dd {
  margin: 0;
  color: var(--fp-ink);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.fp-empty {
  color: var(--fp-ink-3);
}

/* ---------- stat tiles ---------- */

.fp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 0.9rem;
}

.fp-stat b {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  color: var(--fp-accent);
  font-weight: 700;
}

.fp-stat span {
  color: var(--fp-ink-2);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- probe ---------- */

.fp-probe-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0.6rem;
}

.fp-probe-form input,
.fp-probe-form select {
  background: var(--fp-surface-2);
  border: 1px solid var(--fp-rule);
  color: var(--fp-ink);
  font: inherit;
  font-size: 12px;
  padding: 0.28rem 0.4rem;
}

.fp-probe-form input {
  width: 8rem;
}

.fp-probe-form input:focus,
.fp-probe-form select:focus {
  outline: 2px solid var(--fp-accent);
  outline-offset: 1px;
}

/* The probe re-renders on every pointer move, so this box is given a fixed
   height: a list that grows and shrinks with the hit count would shift
   everything below it while the reader is simply sweeping the chart. */
.fp-results {
  min-height: 17.5rem;
}

.fp-hits {
  margin: 0;
  /* room on the right so the scrollbar never sits on top of the entry id */
  padding: 0 0.75rem 0 0;
  list-style: none;
  height: 15.5rem;
  overflow-y: auto;
}

@media (max-width: 620px) {
  .fp-results {
    min-height: 14rem;
  }

  .fp-hits {
    height: 12rem;
  }
}

.fp-hits li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--fp-rule);
}

.fp-hits li:last-child {
  border-bottom: 0;
}

.fp-hits .fp-swatch {
  margin-top: 0.25rem;
}

/* The site's base `code` rule sets the pixel face; inside the widget, code
   labels are UI text and take the widget's own mono. */
.fp code {
  font-family: inherit;
}

.fp-hits code {
  margin-left: auto;
  padding-left: 0.75rem;
  color: var(--fp-ink-3);
  font-size: 11px;
  background: none;
  padding: 0;
}

.fp-hits .fp-use {
  color: var(--fp-ink);
}

.fp-hits .fp-meta {
  color: var(--fp-ink-3);
  font-size: 11px;
}

/* ---------- table fallback ---------- */

.fp-table-wrap {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  max-height: 22rem;
  overflow: auto;
  border: 1px solid var(--fp-rule);
}

.fp table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.fp th,
.fp td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--fp-rule);
  white-space: nowrap;
  font-family: inherit;
  color: var(--fp-ink);
}

.fp th {
  position: sticky;
  top: 0;
  background: var(--fp-surface-2);
  color: var(--fp-ink-2);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fp td.fp-wrap {
  white-space: normal;
}

.fp-foot {
  padding: 0.6rem 1rem 0.7rem;
  background: #000;
  border-top: 3px solid var(--fp-phosphor);
  color: #7f9e8a;
  font-size: 11px;
  line-height: 1.5;
}

.fp-foot a {
  color: #8fbf9f;
}

@media (max-width: 620px) {
  .fp {
    font-size: 12px;
  }

  .fp-panel dl {
    grid-template-columns: 1fr;
    gap: 0 0;
  }

  .fp-panel dd {
    margin-bottom: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fp-tip {
    transition: none;
  }
}

/* ---------- theme guard ----------
   The blog theme styles bare `p`, `li`, `td`, `th` and `a` inside `.content`
   with a serif face and its own colours. These selectors are deliberately more
   specific so the widget keeps its monospace UI regardless of load order. */

.fp .fp-legend li,
.fp .fp-hits li,
.fp .fp-table-wrap td,
.fp .fp-table-wrap th,
.fp .fp-body p,
.fp .fp-foot a {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.fp .fp-legend li,
.fp .fp-hits li {
  color: var(--fp-ink-2);
}

.fp .fp-table-wrap td {
  color: var(--fp-ink);
}

.fp .fp-foot a,
.fp .fp-body a {
  font-size: 11px;
  color: var(--fp-phosphor);
  text-decoration: underline;
}

.fp .fp-body a {
  color: var(--fp-accent);
}

.fp .fp-foot a:hover {
  color: #fff;
}

.fp .fp-body a:hover {
  color: var(--fp-ink);
}

/* ---------- wall-chart preview ----------
   The poster is 3600x2400; inline it is a thumbnail that links to the PDF.
   Same breakout as the figures so it lines up with them. */

.fp-poster {
  display: block;
  width: min(1120px, 100vw - 2rem);
  margin: 2.5rem auto 0.75rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.blog-theme .content .fp-poster img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 3px solid #4ade80;
  box-shadow: 4px 4px 0 #4ade80;
  background: #fcfcfb;
}

.fp-poster-links {
  width: min(1120px, 100vw - 2rem);
  margin: 0 auto 2.5rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #a9a7a0;
}

.blog-theme .content .fp-poster-links a {
  font-family: inherit;
  font-size: inherit;
  color: #4ade80;
}

/* Table view rows stand in for the chart's blocks: same drill-down, same
   selected state, reachable from the keyboard. */
.fp-table-wrap tbody tr {
  cursor: pointer;
}

.fp-table-wrap tbody tr:hover {
  background: #eceae4;
}

.fp-table-wrap tbody tr:focus-visible {
  outline: 2px solid var(--fp-accent);
  outline-offset: -2px;
}

.fp-table-wrap tbody tr.is-active {
  background: rgba(21, 128, 61, 0.14);
  box-shadow: inset 3px 0 0 var(--fp-accent);
}

.fp-table-wrap td:first-child {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* ---------- view controls ----------
   The "Jump to" row is navigation: loose chips, each a destination. These
   change how the current window is drawn, so they read as one segmented
   control in the accent colour rather than more places to go. */

.fp-bar-view {
  margin-top: -0.35rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--fp-rule);
}

.fp-seg {
  display: inline-flex;
}

.fp .fp-btn-view {
  background: transparent;
  border: 2px solid var(--fp-accent);
  color: var(--fp-accent);
  font-weight: 600;
  border-radius: 0;
}

.fp-seg .fp-btn-view + .fp-btn-view {
  margin-left: -1px;
}

.fp .fp-btn-view:hover {
  background: var(--fp-accent);
  color: var(--fp-surface);
}

.fp .fp-btn-view[aria-pressed='true'] {
  background: var(--fp-accent);
  border-color: var(--fp-accent);
  color: #fcfcfb;
}

/* English gloss under a German term. The source's wording stays primary; this
   is here so a reader who does not read German can tell what a band is for. */
.fp .fp-gloss {
  color: var(--fp-ink-2);
  font-size: 11px;
  font-style: italic;
  line-height: 1.4;
}

.fp .fp-panel-title + .fp-gloss {
  margin: -0.3rem 0 0.55rem;
  font-size: 12px;
}

/* Modifier gestures are invisible, so the legend says what it supports. */
.fp .fp-legend-hint {
  color: var(--fp-ink-3);
  font-size: 11px;
  font-style: italic;
  align-self: center;
}