/* ============================================================================
   states.css — Sentinel reading-state styles.

   UI_UPGRADE_PLAN §5: each state has a color *and* a non-color glyph + ARIA
   label, so color-blind users get the meaning without the color.

   Class names are kept verbatim from v1 (cold/low/good/warm/hot/track/txf/
   timeout/trigger/master/border/hide/nosort) so translator.js, tablesort.js,
   and typesearch.js keep working unchanged. The new bit is the [data-state]
   attribute, which drives the ::before glyph and the screen-reader-only
   text via ::after.

   Phase 2 will add `[data-state]` to every reading cell in translator.js.
   This file is the receiving end of that change and is safe to ship now.
   ========================================================================== */

/* ---- shared cell shape ----------------------------------------------------- */
.cold,
.low,
.good,
.warm,
.hot {
    --cell-fg: var(--ink-0);
    --cell-bg: transparent;
    --cell-bd: transparent;
    color: var(--cell-fg);
    background: var(--cell-bg);
    border-left: 3px solid var(--cell-bd);
    padding-inline: var(--space-2);
    padding-block:  var(--space-1);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

.cold { --cell-fg: var(--state-cold-fg); --cell-bg: var(--state-cold-bg); --cell-bd: var(--state-cold-bd); }
.low  { --cell-fg: var(--state-low-fg);  --cell-bg: var(--state-low-bg);  --cell-bd: var(--state-low-bd);  }
.good { --cell-fg: var(--state-good-fg); --cell-bg: var(--state-good-bg); --cell-bd: var(--state-good-bd); }
.warm { --cell-fg: var(--state-warm-fg); --cell-bg: var(--state-warm-bg); --cell-bd: var(--state-warm-bd); }
.hot  { --cell-fg: var(--state-hot-fg);  --cell-bg: var(--state-hot-bg);  --cell-bd: var(--state-hot-bd);  }

/* ---- non-color glyphs (UI_UPGRADE_PLAN §5 table) -------------------------- */
[data-state]::before {
    display: inline-block;
    width: 1.2em;
    margin-inline-end: .15em;
    text-align: center;
    font-feature-settings: "tnum";
}
[data-state="cold"]::before { content: "❄"; }
[data-state="low"]::before  { content: "↓"; }
[data-state="good"]::before { content: ""; }    /* good is the silent default */
[data-state="warm"]::before { content: "↑"; }
[data-state="hot"]::before  { content: "🔥"; }

/* Screen-reader-only state announcement. translator.js will set the
   data-state attribute on each reading cell; this rule synthesises an
   off-screen string that screen readers will pick up. */
[data-state]::after {
    content: " (" attr(data-state) ")";
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}
[data-state="good"]::after { content: ""; }     /* don't announce 'good' */

/* ---- auxiliary markers ---------------------------------------------------- */
/* Stale: > 2h since last reading. v1 uses the .track class. */
.track {
    color: var(--marker-stale);
    font-style: italic;
}
.track::before {
    content: "⏳ ";
    font-style: normal;
    margin-inline-end: .15em;
}

/* Transmission failure */
.txf {
    color: var(--marker-txfail);
    text-decoration: line-through;
}
.txf::before {
    content: "✗ ";
    text-decoration: none;
    margin-inline-end: .15em;
}

/* Trigger reading (Reason==1) — visually distinct from "warm" / "hot" */
.trigger {
    box-shadow: inset 0 0 0 2px var(--marker-trigger);
}
.trigger::before {
    content: "● ";
    color: var(--marker-trigger);
    margin-inline-end: .15em;
}

/* Sensor timeout (TimeoutPower) */
.timeout {
    color: var(--marker-timeout);
}
.timeout::before {
    content: "⌀ ";
    margin-inline-end: .15em;
}

/* ---- structural utilities (kept verbatim from v1) ------------------------- */
.hide   { display: none !important; }
.nosort { /* read by tablesort.js — no visual styling */ }
.master { font-weight: 600; }
.border { border: 1px solid var(--border-1); }

/* ---- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}