/* ═══════════════════════════════════════════════════════════════════════════════════════
   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; --orange: #ad5400; --gate-eq: #1d796e; --gate-id: #656d78; --gate-qual: #5d7434; --gate-rate: #ab5151; --gate-size: #785fac; --gate-spr: #3d6cb4; --gate-val: #91631e; --accent-fill: #2962ff; }
:root[data-theme="dark"] { --dim: #7a8694; --red: #eb4e52; --deepred: #e1575a; --accent-fill: #2b71e4; --green: #38c793; --amber: #f0a832; --blue: #39a0ed; --orange: #f28c3a; --gate-eq: #2f9c8f; --gate-id: #8b95a3; --gate-qual: #7f9c4a; --gate-rate: #c76c6c; --gate-size: #937bc9; --gate-spr: #5587d3; --gate-val: #c2872f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dim: #7a8694; --red: #eb4e52; --deepred: #e1575a; --accent-fill: #2b71e4; --green: #38c793; --amber: #f0a832; --blue: #39a0ed; --orange: #f28c3a; --gate-eq: #2f9c8f; --gate-id: #8b95a3; --gate-qual: #7f9c4a; --gate-rate: #c76c6c; --gate-size: #937bc9; --gate-spr: #5587d3; --gate-val: #c2872f; } }

/* ───────────── 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 */


/* rating chips: the letter grade is the data */
.rc { color: color-mix(in srgb, var(--muted) 72%, var(--text)); }
.rc.aaa, .rc.a { color: color-mix(in srgb, var(--green) 60%, var(--text)); }
.rc.bbb { color: color-mix(in srgb, var(--green) 44%, var(--text)); }
.rc.bb { color: color-mix(in srgb, var(--amber) 58%, var(--text)); }
.rc.b { color: color-mix(in srgb, var(--orange) 56%, var(--text)); }
.rc.ccc { color: color-mix(in srgb, var(--red) 60%, var(--text)); }
.rc.d { color: color-mix(in srgb, var(--deepred) 50%, var(--text)); }
.rc.nr { color: color-mix(in srgb, var(--muted) 72%, var(--text)); }
/* the count under a number in a heat-shaded cell: the body ink of the cell, a little lighter */
table.cal td small { color: color-mix(in srgb, currentColor 84%, transparent); }
.ctl.isec .chip.on .dim { opacity: 1; }
.chip.on .dim { color: inherit; }                 /* the count inside a selected chip takes the chip's own ink */
.tk.big { color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
table.bands th .gate-tag { opacity: 1; }
/* verdict pills and issuer flags */
.pill { color: color-mix(in srgb, var(--muted) 72%, var(--text)); }
.pill.tight, .pill.improving { color: color-mix(in srgb, var(--green) 60%, var(--text)); }
.pill.wide { color: color-mix(in srgb, var(--amber) 58%, var(--text)); }
.pill.stressed, .pill.deteriorating { color: color-mix(in srgb, var(--red) 62%, var(--text)); }
.fl.self { color: color-mix(in srgb, var(--accent) 68%, var(--text)); }
.fl.rs { color: color-mix(in srgb, var(--green) 60%, var(--text)); }
.fl.fa, .fl.dis { color: color-mix(in srgb, var(--red) 62%, var(--text)); }
.fl.df { color: color-mix(in srgb, var(--deepred) 50%, var(--text)); }
.fl.sec { color: color-mix(in srgb, var(--violet) 62%, var(--text)); }