/* ───────────────────────────────────────────────────────────────────────── TLC SHORTCUT (.tlc-shortcut) — the style guide's circle action buttons v1.001 https://turnerlee.com/shared/shortcuts/v1/tlc-shortcut.css?v=1.001 A VERBATIM COPY of the .tlc-shortcut block in shared/core/v1/sst-styles.css (lines 12109-12292 as of 2026-09-25), published on its own so a page that does not load sst-styles.css can still use the component. ColoradoLamb's ops pages load the site copy css/t_tlc-styles.css instead, which has no .tlc-shortcut, so the guide's red X rendered 12x2px there - measured 2026-09-25 on cololamb.com/ops/tracker-contacts. Edit sst-styles.css first and re-copy; never let the two drift. ───────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────── SHORTCUT BUTTONS — Craig's circular icon set, /img/schedule/ ───────────────────────────────────────────────────────────────────── Added 2026-07-30. Craig: "i really want these icon treatments added to the SST style guide as shortcut buttons becuase i can re-use them across sites." Documented as §17 of the style guide. THE ART IS HIS AND IT ALREADY EXISTS. Never draw one of these — not as a CSS ring, not as an inline , not from FontAwesome. Twice in one evening the /ops/schedule row controls shipped hand-made lookalikes while the real file sat on disk. If a mark is missing from the set, ask him for it. Assets stay at https://turnerlee.com/img/schedule/ and are referenced absolutely, so every site draws from the one folder — no per-site copies to drift. Consuming sites need nothing: this file is already linked everywhere through sst-css-styles.html. HOW EACH PAIR WORKS, because it is not obvious from the filenames: circle-plus.svg etc. ring + glyph, both opaque -> a perfect MASK, so ::before takes the ink color and the tint disc on the button shows through the holes. circle-plus-fill.svg etc. solid BLACK disc, white glyph. Useless as a mask (one opaque blob) and unrecolorable as a background — ignore them. ...-fill-green/-red/-blue already the right color with a white glyph, so they are drawn AS THE FILE IS, on hover, on the BUTTON's background, with ::before killed. Swap them on the ::before instead and the tint disc shows through the fill. The ink colors are measured out of the fill files (#FF0029 / #00C137 / #0079C1) so the idle ring matches the hover fill exactly. They are NOT brand tokens and must not be swapped for one, or the two states stop matching. Everything is a custom property, so a page that genuinely needs a different color or size overrides it on the element instead of writing a new rule: