/* =================================================================== wired UX redesign -- component styles (Wired_UX_Redesign_Handoff). Its own file, loaded after limestone-v2.css, and every selector is prefixed `rd-`. Two reasons. style.css's header warns its cascade is load-bearing and forbids appending after its final block; and keeping the redesign's rules in one place means the whole thing can be reviewed -- or backed out -- as a unit while it lives on a branch. Built on the --ltg-* tokens directly. They are theme-aware through the bridge, so nothing here has a dark-mode override: Midnight is the same rules resolving to different values. Accessibility rules this file holds to (brief: WCAG 2.2 AA): - Every interactive target is at least --ltg-target (44px) tall on touch, 24px minimum (SC 2.5.8) anywhere. - State is never colour alone. Every .rd-state carries its word; the dot is decoration and aria-hidden in the markup. - Nothing depends on hover. Hover only ever restates what's already visible. - Reflows to 320px with no horizontal scroll (SC 1.4.10). =================================================================== */ /* ---------------- App-wide: controls never break mid-word ---------------- style.css sets `overflow-wrap: anywhere` on on purpose: a long pasted URL, email or name must not force a panel wider than the screen. Everything inherits it -- including buttons, chips and tabs, where it does real damage: `anywhere` shrinks an element's min-content width to ONE CHARACTER, so a flex or grid row is free to squeeze a button narrower than its own label and split the word. Confirmed on Peyton's iPhone (393px): "Resu|me", "mom|ent" in the live capture bar. Content keeps the protection; controls opt out, so they wrap between words if they must and their minimum width is always the longest word. break-word, not normal: both keep the min-content width at the longest word (so nothing can squeeze a control into splitting one), but break-word still breaks a word that is genuinely wider than the whole screen instead of pushing the page sideways. Labels are included -- the whole-app sweep caught a radio label on Scheduled captures splitting "Recurr|ing" the same way. This section and the next hold the rules in this file that aren't rd- scoped -- fixes for pages the redesign hasn't reached yet. The few others sit in the media blocks at the end, beside the breakpoint they share. */ button, .button, .badge, [role="tab"], .nav-link, .link-button, .rd-state, .rd-link, summary, .sidebar-footer-row, label { overflow-wrap: break-word; } /* ---------------- App-wide mobile fixes (found by the phone sweep) ---------------- */ /* A native