/* Friday Deep Dive — shared visual system Light + dark via prefers-color-scheme; override with data-theme="light"|"dark" on */ :root, html[data-theme="light"] { color-scheme: light dark; --fg: #1a1a1a; --muted: #5c5c5c; --bg: #fafafa; --surface: #ffffff; --border: #e4e4e4; --accent: #1e4f8c; --accent-fg: #ffffff; --selected: #e8eef6; --selected-border: #1e4f8c; --ok: #1a6b3c; --err: #a32018; --warn: #8a3b12; --care: #1a6b3c; --radius: 8px; --measure: 40rem; --lh: 1.6; } @media (prefers-color-scheme: dark) { :root { --fg: #ececec; --muted: #a8a8a8; --bg: #121214; --surface: #1c1c1f; --border: #2e2e32; --accent: #8eb4e8; --accent-fg: #121214; --selected: #1e2a3c; --selected-border: #8eb4e8; --ok: #6dca9a; --err: #ff8a7a; --warn: #ffb086; --care: #6dca9a; } } html[data-theme="dark"] { color-scheme: dark; --fg: #ececec; --muted: #a8a8a8; --bg: #121214; --surface: #1c1c1f; --border: #2e2e32; --accent: #8eb4e8; --accent-fg: #121214; --selected: #1e2a3c; --selected-border: #8eb4e8; --ok: #6dca9a; --err: #ff8a7a; --warn: #ffb086; --care: #6dca9a; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.05rem; line-height: var(--lh); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; } .fdd-wrap { max-width: var(--measure); margin: 0 auto; padding: 2rem 1.25rem 3.5rem; } .fdd-wrap--narrow { max-width: 36rem; } .fdd-wrap--landing { margin-top: 3.5rem; } .kicker { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--muted); margin: 0 0 0.4rem; } h1 { font-size: 1.7rem; line-height: 1.3; font-weight: 700; margin: 0.25rem 0 1rem; letter-spacing: -0.01em; } h2 { font-size: 1.05rem; margin: 0 0 0.5rem; font-weight: 650; } h3 { font-size: 0.95rem; margin: 0.9rem 0 0.35rem; font-weight: 650; } p { margin: 0 0 0.85rem; } a { color: var(--accent); } a:hover { text-decoration-thickness: 2px; } .muted { color: var(--muted); } .intro { font-size: 1.05rem; margin-bottom: 1.25rem; } .intro p { margin: 0 0 0.75rem; } .panel, .why, .why-care, .tldr, .thanks { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1rem 0 1.35rem; background: var(--surface); } .why-care { border-color: color-mix(in srgb, var(--care) 45%, var(--border)); background: color-mix(in srgb, var(--care) 7%, var(--surface)); } .why-care h2 { color: var(--care); } .tldr ul, .meta ul { margin: 0; padding-left: 1.15rem; } .tldr li, .meta li { margin: 0.35rem 0; } .banner { border: 1.5px solid var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-weight: 600; font-size: 0.95rem; } details { border-top: 1px solid var(--border); padding: 1rem 0; } details:last-of-type { border-bottom: 1px solid var(--border); } summary { cursor: pointer; font-weight: 650; list-style: none; } summary::-webkit-details-marker { display: none; } summary .short { display: block; font-weight: 400; color: var(--muted); margin-top: 0.4rem; line-height: var(--lh); } .hint { display: block; font-size: 0.85rem; color: var(--accent); font-weight: 500; margin-top: 0.3rem; } details[open] summary .hint { display: none; } .deep { margin-top: 0.85rem; } .deep p { margin: 0 0 0.75rem; } .meta { color: var(--muted); font-size: 0.92rem; margin-top: 2rem; } .meta h2 { color: var(--fg); } .footer { margin-top: 2.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--muted); } /* Vote page */ .vote-options { display: flex; flex-direction: column; gap: 0.7rem; margin: 0 0 1.1rem; } .option { display: block; cursor: pointer; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0.95rem 1rem 0.95rem 2.75rem; position: relative; transition: border-color 0.12s ease, background 0.12s ease; } .option:hover { border-color: var(--accent); } .option:has(input:checked), .option.selected { border-color: var(--selected-border); background: var(--selected); } .option input { position: absolute; left: 0.95rem; top: 1.1rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); margin: 0; } .option .num { font-size: 0.75rem; font-weight: 600; color: var(--accent); margin: 0 0 0.15rem; } .option .title { font-size: 1.02rem; font-weight: 650; margin: 0 0 0.35rem; line-height: 1.35; } .option .summary { font-size: 0.92rem; color: var(--muted); margin: 0; line-height: 1.5; } .name-field { margin: 0 0 1rem; } .name-field input { width: 100%; font: inherit; font-size: 1rem; padding: 0.75rem 0.9rem; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); } .name-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .submit { display: block; width: 100%; border: none; border-radius: var(--radius); background: var(--accent); color: var(--accent-fg); font-size: 1.05rem; font-weight: 650; padding: 0.95rem 1.25rem; cursor: pointer; font-family: inherit; } .submit:disabled { opacity: 0.45; cursor: not-allowed; } .vote-hint { font-size: 0.85rem; color: var(--muted); text-align: center; margin: 0.75rem 0 0; } .msg { margin: 0.85rem 0 0; font-size: 0.95rem; text-align: center; } .msg.err { color: var(--err); } .thanks { text-align: center; } .thanks .ok { color: var(--ok); font-weight: 700; font-size: 1.1rem; margin: 0 0 0.5rem; } .thanks .picked { margin: 0; font-size: 1.02rem; line-height: 1.45; color: var(--fg); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .theme-toggle { position: fixed; top: 0.75rem; right: 0.75rem; font-size: 0.75rem; padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; font-family: inherit; } .theme-toggle:hover { color: var(--fg); border-color: var(--accent); }