/* ============================================================================ CetusEd public site — THE THREE-STATE BADGE Ledger item P0-4 · Spec: base audit §5.13, re-grounded by Addendum C Part B/F ---------------------------------------------------------------------------- ⛔ BUILD THIS FIRST. Several visuals depend on it, and base audit §5.13 states why it matters more than its size suggests: it is the mechanism that turns the product's best differentiator — the statutory-vs-district-policy distinction — from a paragraph on one page into A PROPERTY OF THE ENTIRE SITE. Applied at every deadline, in every diagram, in every table, and in exported PDFs. THE THREE STATES, and why the third one exists ---------------------------------------------------------------------------- CLAUDE.md ⛔1: several clocks LEGALLY DO NOT EXIST — consent→services, PWN timing, IEP annual review, transfers, the §504 evaluation decision. The honest answer is "no day count exists in law", and a district timer there is POLICY. Most compliance products cannot say this because they have no way to draw it. This badge is that way. FIXED STAR --mira four-point star STATUTE External, verifiable, not yours to move. Carries the WAC/RCW/IDEA citation in mono beside it. CHOSEN BEARING --phosphor open triangle DISTRICT POLICY Legitimate, frequently tighter than the rule, on purpose, and YOURS. NO FIX --star-dim open circle NO DAY COUNT IN LAW Open water. No reference available. ⛔ This is not a failure state and must never be styled as one — --shoal is for blocked/refused, not for this. ⛔ THREE ENCODINGS, ALWAYS. Colour AND shape AND a text label. Never colour alone (base audit §6.7, Addendum C Part G). The label is real text in the DOM, not a ::before — screen readers and find-in-page must reach it, and a district IT reviewer using Ctrl+F to find every statutory deadline on a page must find them. MARKUP ---------------------------------------------------------------------------- Statute WAC 392-172A-03005 ⚠ THE NUMBER NEXT TO THIS BADGE IS GATED. lint-site-content-integrity RULE 7 fails the build on "20 school days" presented as law — WAC 392-172A-03005(2)(c) allows 25; the 20 is CetusEd's configurable district DEFAULT. So a 20-day evaluation-referral figure takes badge-policy, never badge-statute, and the gate enforces it. The badge and the lint are arguing for the same thing. ========================================================================= */ /* 🪤 `white-space: nowrap` on the whole badge made a long citation push the page sideways: measured at 390px, RCW 28A.155.020 (as amended by SSB 5253 …) ran to 413px against a 390px viewport. The GLYPH and LABEL must not break — they are the state, and a state that wraps mid-word stops reading as one thing — but the citation is prose and must be allowed to. So the badge wraps between its parts, and only the parts themselves hold together. */ .badge { display: inline-flex; align-items: baseline; gap: 0.4em; flex-wrap: wrap; min-width: 0; max-width: 100%; font-family: var(--f-data); font-size: var(--m-small); font-weight: 400; letter-spacing: 0.01em; vertical-align: baseline; } .badge-label { white-space: nowrap; } /* 🪤 A FOUR-POINT STAR BELOW ~10px READS AS A PLUS SIGN. Measured off the 2026-08-13 screenshot: at var(--m-tick) the statute badge rendered as "+ Statute". The glyph carries one third of the badge's three encodings, so an illegible glyph silently drops it to two. Floor the box in px, not em. */ .badge-glyph { flex: none; width: max(0.72em, 11px); height: max(0.72em, 11px); align-self: center; background-repeat: no-repeat; background-position: center; background-size: contain; } .badge-label { text-transform: none; } /* The duplicate .badge-label rule above sets nowrap; this keeps casing explicit. */ .badge .cite { color: color-mix(in srgb, currentColor 62%, transparent); font-size: 0.92em; min-width: 0; overflow-wrap: anywhere; /* a WAC/RCW string has no spaces to break at */ } /* ── FIXED STAR — statute ─────────────────────────────────────────────────── A four-point star. Filled, because a statutory duration is a fixed reference: it has a definite value that is not ours to move. */ .badge-statute { color: var(--mira); } .badge-statute .badge-glyph { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0 L9.6 6.4 L16 8 L9.6 9.6 L8 16 L6.4 9.6 L0 8 L6.4 6.4 Z' fill='%23C4703C'/%3E%3C/svg%3E"); } /* ── CHOSEN BEARING — district policy ─────────────────────────────────────── An OPEN triangle — a bearing mark. Open rather than filled because the value is chosen rather than given: the district set it and the district can move it. */ .badge-policy { color: var(--phosphor); } .badge-policy .badge-glyph { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.4 L15 14.6 L1 14.6 Z' fill='none' stroke='%234E9A85' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ── NO FIX — no day count exists in law ──────────────────────────────────── An open circle. Nothing inside it, because there is nothing inside it. */ .badge-nofix { color: var(--star-dim); } .badge-nofix .badge-glyph { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.2' fill='none' stroke='%2397A3B0' stroke-width='1.6'/%3E%3C/svg%3E"); } .g-chart .badge-nofix, .g-chart-soft .badge-nofix { color: var(--text-ink-lo); } /* ── CHART-PAPER GROUND ─────────────────────────────────────────────────── --mira and --phosphor were chosen against dark grounds. On --chart they need a darker step to hold contrast at small sizes; the HUE is unchanged so the semantic code still reads. */ .g-chart .badge-statute, .g-chart-soft .badge-statute { color: #9A5326; } .g-chart .badge-policy, .g-chart-soft .badge-policy { color: #35705F; } /* ── BLOCK FORM — for tables and diagram legends ─────────────────────────── Same three states stacked, so a legend teaches itself. Used wherever a diagram encodes state by stroke: the legend is MANDATORY and the stroke pattern must never be the only differentiator (base audit §5.6). */ .badge-legend { display: grid; gap: 0.5rem; padding: 0.75rem 0; border-top: var(--hair) solid color-mix(in srgb, currentColor 18%, transparent); } .badge-legend .badge { font-size: var(--m-tick); } .badge-legend .badge-note { color: color-mix(in srgb, currentColor 65%, transparent); font-family: var(--f-text); white-space: normal; } /* ── IN A TABLE CELL ────────────────────────────────────────────────────── The badge collapses to glyph + label; the citation moves to its own column so the column of citations can be scanned down. */ td .badge .cite, th .badge .cite { display: none; } /* ── PRINT ──────────────────────────────────────────────────────────────── The printed record is a legal document. Colour may not survive a district's monochrome printer, so in print the LABEL carries the state alone — which it already does, because the label is real text. Glyphs are retained as they reproduce fine at 1-bit. */ @media print { .badge { color: #000 !important; } .badge .cite { color: #333 !important; } }