/* YouOS shared design system. * * Single home for the palette (as CSS variables) and the shared component * classes the templates use. Extracted from the per-template inline styles so * new UI (multi-candidate picker, draft-quality badges, stats panels) styles * consistently and the look lives in one place. Values match the existing * dark + teal #00c4a7 theme and the landing page (site/index.html). */ :root { --teal: #00c4a7; --teal-dim: #0a8f7c; --bg: #1a1a2e; --surface: #16213e; --surface-2: #0d1b2a; --border: #2a3a4a; --border-subtle: #333; --text: #e0e0e0; --muted: #aaa; --muted-2: #888; --faint: #666; --warn: #f0ad4e; --error: #e74c3c; --success: #2ecc71; --radius: 8px; } /* Light theme. Tokens flip; every template draws from these (hardcoded hex * were tokenized to var()). Follows the OS by default; the toggle sets * data-theme on (persisted in localStorage) to override + stick. */ :root[data-theme="light"], :root.yos-light { --teal: #0a8f7c; --teal-dim: #0a8f7c; --bg: #ffffff; --surface: #f4f6f9; --surface-2: #eef1f5; --border: #d8dee6; --border-subtle: #e4e8ee; --text: #1a2230; --muted: #5b6675; --muted-2: #6b7585; --faint: #8a93a3; --warn: #b7791f; --error: #d1242f; --success: #1a8a4f; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --teal: #0a8f7c; --teal-dim: #0a8f7c; --bg: #ffffff; --surface: #f4f6f9; --surface-2: #eef1f5; --border: #d8dee6; --border-subtle: #e4e8ee; --text: #1a2230; --muted: #5b6675; --muted-2: #6b7585; --faint: #8a93a3; --warn: #b7791f; --error: #d1242f; --success: #1a8a4f; } } /* Floating light/dark toggle (created by youos.js). Bottom-right to clear the * page header nav. */ .yos-theme-toggle { position: fixed; bottom: 16px; right: 16px; z-index: 1000; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; font-size: 16px; line-height: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,0.18); transition: border-color .2s, background .2s; } .yos-theme-toggle:hover { border-color: var(--teal-dim); } /* Inline-in-header variant: not fixed, so it never overlaps content/buttons (the floating version covered card actions on mobile). */ .yos-theme-toggle--inline { position: static; bottom: auto; right: auto; z-index: auto; width: 32px; height: 32px; box-shadow: none; align-self: center; } /* --- Badges (confidence, length flag, repairs, sender type) -------------- */ .yos-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); vertical-align: middle; } .yos-badge--ok { color: var(--success); border-color: var(--success); } .yos-badge--warn { color: var(--warn); border-color: var(--warn); } .yos-badge--error { color: var(--error); border-color: var(--error); } .yos-badge--accent { color: var(--teal); border-color: var(--teal-dim); } /* --- Candidate picker (multi-candidate drafting) ------------------------- */ .yos-candidates { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .yos-candidate { text-align: left; width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .yos-candidate:hover { border-color: var(--teal-dim); } .yos-candidate[aria-pressed="true"] { border-color: var(--teal); background: rgba(0, 196, 167, 0.08); } .yos-candidate__meta { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 0.72rem; color: var(--muted-2); } .yos-candidate__preview { font-size: 0.86rem; color: var(--muted); line-height: 1.45; white-space: pre-wrap; } /* --- Small helpers ------------------------------------------------------- */ .yos-note { font-size: 0.8rem; color: var(--muted-2); } .yos-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Inline loading spinner — for long actions (triage sweep, etc.) so the UI * shows it's working rather than just a text label. Sized to the current font. */ .yos-spinner { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.12em; border: 2px solid var(--border); border-top-color: var(--teal); border-radius: 50%; animation: yos-spin 0.7s linear infinite; } @keyframes yos-spin { to { transform: rotate(360deg); } } /* --- Shared mobile / responsive safety net ------------------------------ * Loaded by every page, so these fixes apply uniformly. Each template ships * its own inline styles; these patch the cross-page mobile gaps (a nav that * didn't wrap on about/bookmarklet, wide media / code / tables causing * horizontal scroll) in one place instead of per template. */ /* The header (brand + nav) and the nav itself must ALWAYS wrap rather than * push the page wider than the viewport — about.html / bookmarklet.html omitted * flex-wrap, which crammed the brand and caused horizontal scroll on phones. */ .oc-header { flex-wrap: wrap; gap: 0.5rem; } .oc-nav { flex-wrap: wrap; } /* Media never forces horizontal scroll. (svg left out — icons set explicit * dimensions and height:auto would distort them.) */ img, video, canvas { max-width: 100%; height: auto; } /* Long unbreakable strings (URLs, file paths, tokens) wrap instead of * overflowing; block code scrolls within its own box. */ pre { overflow-x: auto; max-width: 100%; } code { overflow-wrap: anywhere; } /* Wrap any wide data table in
so it scrolls inside * its own box instead of widening the page. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } @media (max-width: 600px) { /* Tighter, still-legible nav on phones; slightly larger tap target. */ .oc-nav { gap: 0.55rem 0.9rem; } .oc-nav-link { font-size: 0.9rem; padding: 3px 0; } .oc-wordmark { font-size: 1.15rem; } }