/* ═══════════════════════════════════════════════════════════════════════════════════════
   READABLE — every piece of data legible on this dashboard, in Classic and in every skin
   (2026-09-30). The sibling of the Cockpit's web/readable.css; same method, same floor (4.5:1),
   measured with skins/readability.js.

   What was weak here, in every look:
     - the tertiary "dim" ink (chart axis labels, as-of dates, source notes, the footer) at about 3:1;
     - rating and status chips printed in a hue on a tint of that same hue (a B-band rating at 2.8:1);
     - small counts inside heat-shaded cells in the dim ink (under 2:1 on a strong fill).

   Ink only: colour, fill and opacity — never size, spacing or layout. A label that names a hue is
   mixed toward the body ink, which keeps the hue's identity and works in both modes without a
   second palette (the body ink is dark on a light ground and light on a dark one).

   Loaded after styles.css and before skins.css. One <link> to remove to undo it.
   GENERATED from sp500-dashboard/skins/siblings.readable.base.css by build_sibling_skins.py.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────── Classic's tertiary ink, walked to the floor (generated; skins set their own) ───────────── */
:root { --dim: #646d7a; --green: #007c59; --red: #cc2c36; --amber: #976006; --blue: #016fc0; --cyan: #06778d; --accent-fill: #d81f2c; }
:root[data-theme="dark"] { --dim: #7a8698; --red: #eb4e52; --accent-fill: #e32336; --green: #38c793; --amber: #f0a832; --blue: #39a0ed; --cyan: #22d3ee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dim: #7a8698; --red: #eb4e52; --accent-fill: #e32336; --green: #38c793; --amber: #f0a832; --blue: #39a0ed; --cyan: #22d3ee; } }

/* ───────────── shared by both sites ───────────── */
.chip.on { color: color-mix(in srgb, var(--accent) 68%, var(--text)); }
.badge.ok { color: color-mix(in srgb, var(--green) 62%, var(--text)); }
.badge.warn { color: color-mix(in srgb, var(--amber) 60%, var(--text)); }
a { color: color-mix(in srgb, var(--blue) 78%, var(--text)); }
:root:not([data-skin]) nav.dsw a.here { color: #fff; background-color: var(--accent-fill); }   /* Classic: white on the accent was 3.7–4.0:1 in dark */




/* status tags: met / on track / behind / missed, and party tags */
.tag, .tag.unk { color: color-mix(in srgb, var(--muted) 72%, var(--text)); }
.tag.met { color: color-mix(in srgb, var(--green) 60%, var(--text)); }
.tag.track, .tag.opp { color: color-mix(in srgb, var(--blue) 62%, var(--text)); }
.tag.behind { color: color-mix(in srgb, var(--amber) 58%, var(--text)); }
.tag.miss, .tag.pap { color: color-mix(in srgb, var(--red) 62%, var(--text)); }
.src a { opacity: 1; }
/* the map's attribution box is MapLibre's own: near-black text on a translucent white plate, which on a
   dark map is grey on grey */
.maplibregl-ctrl-attrib { background: var(--panel) !important; }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib-inner { color: var(--text) !important; }