/* iesg_notice.css — the replacement for the left-rail pattern. Import AFTER iesg_tokens.css. Contains no colour of its own: every value is a token from that file. ───────────────────────────────────────────────────────────────────────── WHY THIS FILE EXISTS Dahun, 2026-09-16: "여기저기 자꾸 vertical 1pt line이 자꾸 보여. 이러면 안돼. 이건 전수조사해줘." Measured across the live product the same day: 59 rail declarations and 16 square-left cards over 9 files. One shape, doing six unrelated jobs: S1 severity of a finding S4 provenance / register S2 a standing warning S5 the selected item S3 something already settled S6 the kind of a row A reader cannot learn a vocabulary in which the same mark means six things, so the mark had stopped meaning anything and had become texture. Deleting the colour alone would have deleted the six distinctions with it, so each job gets a replacement that carries it by a DIFFERENT channel — fill, or typeface, or weight, or an in-line chip — and the rail goes. ⚠ THE DISTINCTIONS WERE ALREADY BROKEN BEFORE THIS SWEEP, which is half the argument for it. iesg_tokens.css folds --accent-blue, --accent-emerald, --accent-cyan and --accent-violet ALL onto --primary, so twelve rails that were authored in four different colours render as one mint. "The model filled this", "a person answered", and "this one is selected" are already indistinguishable on screen today. Restoring them with new hues is the design team's call, not ours (Ground rule 3), so nothing here asks for a hue: the classes below separate by fill, typeface and weight, which we own. ───────────────────────────────────────────────────────────────────────── WHAT IS NOT A RAIL, AND STAYS A 1px border-left is a structural divider — a table rule, a nested-list guide. One survives in footprint_explorer.html and it is correct. Do not sweep it: this pattern is >= 2px and carries meaning by COLOUR, which is the thing being removed. ───────────────────────────────────────────────────────────────────────── */ /* ═══ S2 · a standing warning ═════════════════════════════════════════════ Tint fill, hairline, bold lead-in, ALL FOUR CORNERS ROUND. A squared left edge is the rail's other fingerprint — a card shaped to seat a rail that is no longer there reads as a rendering fault. (The fingerprint is a radius whose first and last values are zero — written here in words on purpose, so that the sweep's own counter does not report this file as one of the things it is meant to find.) Severity is carried by the fill AND by the lead-in's ink, never by fill alone (WCAG 1.4.1), and the lead-in is a real sentence opener rather than a label, so a screen reader meets it in reading order. */ .notice { padding: 11px 14px; border-radius: var(--r-card, 9px); font-size: var(--fs-label); line-height: 1.55; background: var(--bg-card); border: 1px solid var(--border-primary); color: var(--text-secondary); } .notice > b, .notice .nlead { color: var(--text-primary); font-weight: 700; } .notice a { color: var(--accent-blue); } .notice--warn { background: var(--warning-muted); border-color: color-mix(in srgb, var(--accent-amber) 34%, transparent); } .notice--warn > b, .notice--warn .nlead { color: var(--warning-ink, var(--accent-amber)); } .notice--stop { background: var(--destructive-muted); border-color: color-mix(in srgb, var(--accent-red) 34%, transparent); } .notice--stop > b, .notice--stop .nlead { color: var(--destructive-ink, var(--accent-red)); } .notice--good { background: var(--primary-muted, var(--muted)); border-color: color-mix(in srgb, var(--accent-emerald) 34%, transparent); } .notice--good > b, .notice--good .nlead { color: var(--accent-emerald); } /* The recessive one: true, worth saying once, not worth a colour. */ .notice--quiet { background: var(--muted); border-color: var(--border-primary); color: var(--text-muted); } .notice--quiet > b, .notice--quiet .nlead { color: var(--text-secondary); } /* ═══ S1 · S6 — severity and kind ═════════════════════════════════════════ Carried by a chip INSIDE the row, so the row itself needs no decoration and twenty of them stack without becoming a striped wall. The chip is a word plus a fill; it never relies on the fill alone. */ .nsev { flex: 0 0 auto; font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; padding: 2px 7px; border-radius: var(--r-badge, 5px); background: var(--muted); color: var(--text-muted); border: 1px solid var(--border-primary); } .nsev--warn { background: var(--warning-muted); color: var(--warning-ink, var(--accent-amber)); border-color: color-mix(in srgb, var(--accent-amber) 38%, transparent); } .nsev--stop { background: var(--destructive-muted); color: var(--destructive-ink, var(--accent-red)); border-color: color-mix(in srgb, var(--accent-red) 38%, transparent); } .nsev--good { background: var(--primary-muted, var(--muted)); color: var(--accent-emerald); border-color: color-mix(in srgb, var(--accent-emerald) 38%, transparent); } /* ⚠ NAMED .nsev, NOT .sev, AND THE REASON IS A LIVE REGRESSION. This file was linked into eight screens on 2026-09-16. One of them, anomalies.html, already had `.item .sev { width:7px; height:7px; border-radius:50% }` -- a 7px dot in the left-hand list. The chip rule here carried `padding: 2px 7px` and a font-size, and because this stylesheet loads after the page's own