/* Sets · streak-guard.css Stijl voor de streakbescherming. Zie js/streak-guard.js. Kleurkeuze: een beschermde week is nadrukkelijk NIET goud. Goud is in deze app voorbehouden aan PR's en gouden badges, en een vangnet is geen prestatie. Beschermd = de rustige, neutrale oppervlaktetokens uit styles/polish.css: de vlam dooft naar grijs in plaats van op te lichten. Zo zie je in één blik het verschil met een week die je echt getraind hebt. Die tokens wisselen zelf al van thema, dus er is hier geen aparte html:not(.dark)-variant nodig behalve waar we een eigen dekking zetten. */ /* ─── De vlam-chip in de home-header ─────────────────────────── */ /* Twee klassen (0,2,0) verslaan .home-streak-chip (0,1,0) — maar alleen omdat styles/home-streak.css zijn lichte thema NIET meer als `html:not(.dark) .home-streak-chip` (0,2,1) schrijft. Deed het dat wel, dan won die basisregel in lichte modus van deze staatsregel en was een beschermde chip niet van een gewone te onderscheiden. De volgorde van de -tags maakt nu niets uit; de structuur aan de overkant wel. */ .home-streak-chip.is-protected { border-color: var(--sets-border-strong); background: var(--sets-surface-3); color: var(--sets-text-2); } /* De vlam zelf is een emoji met eigen kleuren; ontzadigen is de enige manier om hem te laten meedoen met "beschermd, niet verdiend". */ .home-streak-chip.is-protected .home-streak-flame { filter: saturate(0.15) opacity(0.75); } /* Het schildje staat achter het getal, klein genoeg om de chip niet te laten groeien maar groot genoeg om op te vallen. */ .home-streak-shield { font-size: 9px; line-height: 1; filter: saturate(0.2); } /* Beschermd + in gevaar blijft neutraal gekleurd: de bescherming is al verbruikt, dus de chip mag niet alsnog naar lime of goud terugvallen als iemand later een kleurregel op .is-at-risk zet. De vlam sputtert wel gewoon door (styles/motion.css) — het risico ís echt: de vrije week van dit kwartaal is op. */ .home-streak-chip.is-protected.is-at-risk { border-color: var(--sets-border-strong); background: var(--sets-surface-3); color: var(--sets-text-2); } /* ─── De inline noot ─────────────────────────────────────────── */ .streak-guard-note { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.875rem; border: 1px solid var(--sets-border); background: var(--sets-surface-2); color: var(--sets-text-2); font-size: 12px; line-height: 1.35; } /* Tailwind's .hidden is één klasse en zou van de volgorde in de kunnen verliezen; een samengestelde selector wint altijd. */ .streak-guard-note.hidden { display: none; } .streak-guard-note-icon { width: 13px; height: 13px; } .streak-guard-note-text { flex: 1 1 auto; min-width: 0; } .streak-guard-note-range { flex: 0 0 auto; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 10px; font-variant-numeric: tabular-nums; /* text-3 haalt op --sets-surface-3 (de vakantievariant hieronder) maar 4,36:1 — net onder AA voor deze 10px. text-2 zit op 5,99:1. */ color: var(--sets-text-2); white-space: nowrap; } /* De uit-knop is bewust tekst en geen icoon: vakantiemodus uitzetten mag nooit een zoekplaatje worden. */ .streak-guard-note-action { flex: 0 0 auto; padding: 0.2rem 0.55rem; border-radius: 9999px; border: 1px solid var(--sets-border-strong); background: transparent; color: var(--sets-text); font-size: 11px; font-weight: 600; transition: transform 0.12s ease, background-color 0.2s ease; } .streak-guard-note-action:active { transform: scale(0.94); background: var(--sets-surface-3); } .streak-guard-note-action:focus-visible { outline: 2px solid var(--sets-focus); outline-offset: 2px; } /* De vakantievariant mag iets meer aanwezig zijn dan de vrije week: hij is een staat die aan staat, geen mededeling achteraf. */ .streak-guard-note.is-vacation { border-color: var(--sets-border-strong); background: var(--sets-surface-3); color: var(--sets-text); } @media (prefers-reduced-motion: reduce) { .streak-guard-note-action { transition: none; } .streak-guard-note-action:active { transform: none; } }