/* Station RSSI AIS — inherits the theme text colour and font, light or dark.
   --ais-bg is set by the script from the actual page background (sticky table headers). */
.ais-rssi {
  --ais-border: rgba(128, 128, 128, 0.35);
  --ais-accent: #3d8fd6;
  --ais-ok: #2fa86a;
  --ais-check: #d9463b;
  --ais-hover: rgba(61, 143, 214, 0.14);
  margin: 1em 0;
}
.ais-rssi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ais-border); margin-bottom: 1em; flex-wrap: wrap; }
.ais-rssi-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.5em 1em;
  color: inherit; font: inherit; cursor: pointer; opacity: 0.7;
}
.ais-rssi-tabs button.active { border-bottom-color: var(--ais-accent); opacity: 1; }
.ais-rssi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.6em; margin-bottom: 1em; }
.ais-rssi-card { border: 1px solid var(--ais-border); border-radius: 6px; padding: 0.6em 0.8em; display: flex; flex-direction: column; }
.ais-rssi-card strong { font-size: 1.5em; }
.ais-rssi-card span { opacity: 0.75; font-size: 0.9em; }
.ais-rssi-note { opacity: 0.85; font-size: 0.95em; }
.ais-rssi-muted { opacity: 0.7; }
.ais-rssi-scroll { overflow-x: auto; }
.ais-rssi-table { width: 100%; border-collapse: collapse; font-size: 0.92em; color: inherit; background: transparent; }
.ais-rssi-table th, .ais-rssi-table td {
  text-align: left; padding: 0.35em 0.5em; border-bottom: 1px solid var(--ais-border);
  white-space: nowrap; color: inherit; background: transparent;
}
/* Themes often style table headers (background, colour): ours must win, light or dark. */
.ais-rssi .ais-rssi-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ais-bg, transparent) !important;
  color: var(--ais-fg, inherit) !important;
  border-bottom: 1px solid var(--ais-border) !important;
}
.ais-rssi .ais-rssi-table td { color: inherit !important; background-color: transparent; }
.ais-rssi-clickable { cursor: pointer; }
.ais-rssi-clickable:hover td, .ais-rssi-clickable:focus td { background: var(--ais-hover); }
.ais-rssi-clickable:focus { outline: 2px solid var(--ais-accent); outline-offset: -2px; }
.ais-rssi-badge { display: inline-block; padding: 0.1em 0.6em; border-radius: 999px; font-size: 0.85em; border: 1px solid var(--ais-border); }
.ais-rssi-badge.ok { color: var(--ais-ok); border-color: var(--ais-ok); }
.ais-rssi-badge.check { color: #fff; background: var(--ais-check); border-color: var(--ais-check); }
.ais-rssi-badge.none { opacity: 0.75; }
.ais-rssi-chart { width: 100%; height: 240px; display: block; }
.ais-rssi-detail:not(:empty) { margin: 1em 0; padding: 0.8em; border: 1px solid var(--ais-border); border-radius: 6px; }
.ais-rssi-livebox { max-height: 480px; overflow: auto; border: 1px solid var(--ais-border); border-radius: 6px; }
.ais-rssi-wide { margin-bottom: 1em; gap: 0.3em; }
.ais-rssi-bar { height: 10px; border-radius: 5px; background: var(--ais-border); overflow: hidden; margin: 0.3em 0; }
.ais-rssi-bar span { display: block; height: 100%; background: var(--ais-ok); }
.ais-rssi-bar span.warn { background: #e0a030; }
.ais-rssi-bar span.full { background: var(--ais-check); }
.ais-rssi .ais-rssi-kv th { position: static; width: 40%; font-weight: normal; opacity: 0.8; }

/* --- Charts (assets/ais-rssi-charts.js) ---------------------------------------------------
   Categorical colours in a fixed order (A, B SO, B CS), a one-hue sequential ramp for levels;
   light and dark steps chosen for their background. Text always uses the theme text colour. */
.ais-rssi {
  --ais-c-a: #2a78d6; --ais-c-b-so: #eb6834; --ais-c-b-cs: #1baf7a; --ais-c-autre: #8d8c88;
  --ais-seq-1: #86b6ef; --ais-seq-2: #5598e7; --ais-seq-3: #2a78d6; --ais-seq-4: #1c5cab; --ais-seq-5: #104281;
  --ais-none: #8d8c88;
  --ais-warn: #e0a030;
  --ais-land: #e6e1d3; --ais-sea: #e8f1fa; --ais-coast: #b9b09a;
}
.ais-rssi.ais-rssi-dark {
  --ais-c-a: #3987e5; --ais-c-b-so: #d95926; --ais-c-b-cs: #199e70; --ais-c-autre: #8d8c88;
  --ais-seq-1: #184f95; --ais-seq-2: #2a78d6; --ais-seq-3: #5598e7; --ais-seq-4: #9ec5f4; --ais-seq-5: #e3effd;
  --ais-land: #3b3a35; --ais-sea: #16212c; --ais-coast: #5e5a4f;
}
.ais-rssi-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1em; }
.ais-rssi-figure { border: 1px solid var(--ais-border); border-radius: 8px; padding: 0.8em 1em; margin: 0 0 1em; min-width: 0; }
.ais-rssi-figure h4 { margin: 0 0 0.3em; }
.ais-rssi-takeaway { margin: 0 0 0.6em; font-size: 1.02em; }
.ais-rssi-plot { width: 100%; }
.ais-rssi-plot svg { display: block; max-width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.ais-rssi-figure svg text { fill: currentColor; font-family: inherit; }
.ais-rssi-small { font-size: 11px; opacity: 0.75; }
.ais-rssi-small-note { font-size: 0.85em; opacity: 0.75; margin: 0.4em 0 0; }
.ais-rssi-label { font-size: 12px; }
.ais-rssi-axis-label { font-size: 12px; font-weight: 600; }
.ais-rssi-big { font-size: 30px; font-weight: 700; }
.ais-rssi-grid { stroke: var(--ais-border); stroke-width: 1; fill: none; }
.ais-rssi-axis { stroke: currentColor; stroke-opacity: 0.6; stroke-width: 1; }
.ais-rssi-ref { stroke: currentColor; stroke-opacity: 0.7; stroke-width: 2; stroke-dasharray: 6 5; }
.ais-rssi-median { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.ais-rssi-threshold { stroke: var(--ais-check); stroke-width: 2; stroke-dasharray: 5 4; }
.ais-rssi-zone { fill: var(--ais-check); fill-opacity: 0.08; }
.ais-rssi-station { fill: currentColor; }
.ais-rssi-sea { fill: var(--ais-sea); }
.ais-rssi-nosea { fill: none; stroke: var(--ais-border); }
.ais-rssi-land { fill: var(--ais-land); stroke: var(--ais-coast); stroke-width: 1; }
.ais-rssi-mark { cursor: default; }
.ais-rssi-mark:hover { filter: brightness(1.15); }
.ais-rssi-clickable-svg { cursor: pointer; outline: none; }
.ais-rssi-clickable-svg:hover rect, .ais-rssi-clickable-svg:focus rect { fill: var(--ais-hover); }
.ais-rssi-donutbox { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }
.ais-rssi-donut { flex: none; }
.ais-rssi-legend { list-style: none; margin: 0.5em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4em 1.2em; font-size: 0.9em; }
.ais-rssi-legend.vertical { flex-direction: column; flex: 1 1 160px; margin: 0; }
.ais-rssi-legend li { display: flex; align-items: baseline; gap: 0.45em; }
.ais-rssi-legend small { opacity: 0.75; }
.ais-rssi-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--sw); align-self: center; }
.ais-rssi-swatch.hollow { background: transparent; border: 2px solid var(--sw); border-radius: 50%; width: 10px; height: 10px; }
.ais-rssi-howto { margin-top: 0.6em; font-size: 0.93em; }
.ais-rssi-howto summary { cursor: pointer; color: var(--ais-accent); }
.ais-rssi-howto p { opacity: 0.9; margin: 0.5em 0; }
.ais-rssi-tablebox { margin: 1em 0; }
.ais-rssi-tablebox > summary { cursor: pointer; color: var(--ais-accent); margin-bottom: 0.5em; }
.ais-rssi-callout { border: 1px solid var(--ais-border); border-left: 4px solid var(--ais-accent); border-radius: 6px; padding: 0.8em 1em; margin: 1em 0; }
.ais-rssi-callout p { margin: 0.4em 0 0.8em; }
.ais-rssi-button, .ais-rssi-select {
  font: inherit; color: inherit; background: transparent; border: 1px solid var(--ais-accent);
  border-radius: 6px; padding: 0.35em 0.9em; cursor: pointer;
}
.ais-rssi-select { margin-bottom: 0.8em; background: var(--ais-bg); }
.ais-rssi-tip {
  position: fixed; z-index: 100000; pointer-events: none; max-width: 280px;
  background: var(--ais-bg); color: inherit; border: 1px solid var(--ais-border); border-radius: 6px;
  padding: 0.45em 0.7em; font-size: 0.85em; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.ais-rssi-tip strong { display: block; margin-bottom: 0.15em; }