/* ========================================================================== Evening Ledger design system — tokens + component skin. Source of truth: docs/design/evening-ledger-home-mockup.html (owner-approved). HOW THIS WORKS - Two themes share ONE set of component styles. The attribute (set before first paint by the inline script in index.html) selects the token VALUES; components only ever reference tokens. - "evening" = the approved dark palette, exactly as in the mockup. - "daylight" = the light companion: warm paper, deep ink-navy text, the same gold family, same serif/sans pairing, same spacing/components. - The legacy variables from styles.css (--bg, --card, --text, ...) are remapped to these tokens so every class-driven page follows the theme with no per-module edits. - Legacy routes designed for the light palette (everything outside Home / My report / My money picture / Help) render on a light "paper sheet" in evening mode — body.route-paper is set by the router. Their inline light-design colors stay readable; the app chrome around them stays Evening Ledger. ========================================================================== */ /* ---------- Tokens ---------- */ html[data-theme="evening"] { --lym-ink: #0D1524; /* page background — deep evening navy */ --lym-panel: #141F36; /* card surface */ --lym-panel-2: #0F1A2E; /* inset surface */ --lym-line: #24304B; /* hairlines */ --lym-cream: #F3EDDF; /* primary text */ --lym-slate: #94A1B8; /* secondary text */ --lym-gold: #E8BC5E; /* the one accent — molten amber */ --lym-gold-soft: rgba(232, 188, 94, .14); --lym-gold-fill: #E8BC5E; /* button fill */ --lym-gold-ink: #1B1405; /* text on gold fill */ --lym-green: #7CC79A; /* success only */ --lym-red: #E08A7A; /* caution only */ --lym-input-bg: #0B1322; --lym-placeholder: #5A6783; --lym-ring-track: #243049; --lym-shadow: 0 10px 30px rgba(0, 0, 0, .35); --lym-glow: drop-shadow(0 0 26px rgba(232, 188, 94, .22)); } html[data-theme="daylight"] { --lym-ink: #F6F1E4; /* warm paper, not stark white */ --lym-panel: #FFFDF6; --lym-panel-2: #F0EAD8; --lym-line: #DFD5BC; --lym-cream: #1C2433; /* deep ink-navy text */ --lym-slate: #5B6780; --lym-gold: #9A7115; /* same amber family, deepened for contrast on paper */ --lym-gold-soft: rgba(154, 113, 21, .12); --lym-gold-fill: #D9A93F; --lym-gold-ink: #241A02; --lym-green: #2E7D52; --lym-red: #B8523C; --lym-input-bg: #FFFFFF; --lym-placeholder: #9AA3B5; --lym-ring-track: #E5DCC2; --lym-shadow: 0 8px 24px rgba(60, 48, 20, .12); --lym-glow: drop-shadow(0 0 18px rgba(154, 113, 21, .18)); } /* Shared type stacks — identical in both themes (system fonts only) */ html[data-theme] { --lym-serif: "Charter", "Bitstream Charter", Georgia, "Times New Roman", serif; --lym-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Remap the legacy styles.css variables so class-driven pages follow the theme */ --bg: var(--lym-ink); --card: var(--lym-panel); --border: var(--lym-line); --muted: var(--lym-slate); --text: var(--lym-cream); --green: var(--lym-green); --red: var(--lym-red); --brand-blue: var(--lym-gold); --brand-blue-2: var(--lym-gold); --brand-yellow: var(--lym-gold); --brand-orange: var(--lym-gold); --shadow: var(--lym-shadow); } /* ---------- Page chrome ---------- */ html[data-theme] body { background: var(--bg); color: var(--text); font-family: var(--lym-sans); } /* faint vignette so the dark feels intentional, not empty (mockup) */ html[data-theme="evening"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1200px 600px at 75% -10%, rgba(232, 188, 94, .05), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(124, 199, 154, .04), transparent 60%); } html[data-theme] #app { position: relative; z-index: 1; } /* ---------- Sidebar ---------- */ html[data-theme] .sidebar { background: linear-gradient(180deg, var(--lym-panel) 0%, transparent 40%), var(--lym-ink); background-color: var(--lym-ink); border-right: 1px solid var(--lym-line); } html[data-theme] .brand { border-bottom: 1px solid var(--lym-line); } /* The wordmark — serif, lowercase, "your" in gold (mockup .wordmark) */ html[data-theme] .wordmark { font-family: var(--lym-serif); font-size: 21px; letter-spacing: .2px; color: var(--lym-cream); } html[data-theme] .wordmark b { color: var(--lym-gold); font-weight: 600; } html[data-theme] .nav-section-label { color: var(--lym-slate); border-top-color: var(--lym-line); opacity: .8; } html[data-theme] .nav-item { color: var(--lym-slate); transition: background .15s, color .15s; } html[data-theme] .nav-item:hover { background: transparent; color: var(--lym-cream); } html[data-theme] .nav-item.active { background: var(--lym-gold-soft); color: var(--lym-cream); } html[data-theme] .nav-icon { color: currentColor; opacity: .8; } html[data-theme] .nav-item.active .nav-icon { color: var(--lym-gold); opacity: 1; } html[data-theme] .nav-sub { color: var(--lym-slate); } html[data-theme] .badge { background: var(--lym-gold-soft); color: var(--lym-gold); } html[data-theme] .sidebar-footer { background: transparent; border-top: 1px solid var(--lym-line); } html[data-theme] .sidebar-footer .nav-dark { color: var(--lym-slate); font-size: 13.5px; } html[data-theme] .sidebar-footer .nav-dark:hover { background: transparent; color: var(--lym-cream); } html[data-theme] .sidebar-footer .nav-icon { color: currentColor; } html[data-theme] .sidebar-footer #resetBtn:hover { color: var(--lym-red); } html[data-theme] .lang-picker select { background: var(--lym-input-bg); color: var(--lym-cream); border: 1px solid var(--lym-line); } html[data-theme] .lang-picker select option { color: var(--lym-cream); background: var(--lym-input-bg); } /* Theme switcher — small, quiet (sidebar footer + Help) */ .theme-switch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--lym-slate); padding: 4px 12px; } .theme-switch .ts-label { letter-spacing: .06em; } .theme-switch button { font: inherit; font-size: 12.5px; cursor: pointer; background: transparent; color: var(--lym-slate); border: 1px solid transparent; border-radius: 7px; padding: 3px 9px; } .theme-switch button:hover { color: var(--lym-cream); } .theme-switch button[aria-pressed="true"] { background: var(--lym-gold-soft); color: var(--lym-gold); border-color: transparent; } /* ---------- Topbar ---------- */ html[data-theme] .topbar { background: transparent; border-bottom: 1px solid var(--lym-line); box-shadow: none; } html[data-theme] .topbar-label { color: var(--lym-slate); } html[data-theme] .topbar-btn, html[data-theme] .icon-btn { background: transparent; color: var(--lym-cream); border: 1px solid var(--lym-line); } html[data-theme] .topbar-btn:hover, html[data-theme] .icon-btn:hover { background: var(--lym-gold-soft); border-color: var(--lym-gold); } html[data-theme] #scenarioSelect { background: var(--lym-input-bg); color: var(--lym-cream); border: 1px solid var(--lym-line); border-radius: 9px; } /* ---------- Core components (tokens only) ---------- */ html[data-theme] .page-title { font-family: var(--lym-serif); font-weight: 500; color: var(--lym-cream); letter-spacing: .1px; } html[data-theme] .page-sub { color: var(--lym-slate); } html[data-theme] .section-title h2 { font-family: var(--lym-serif); font-weight: 500; color: var(--lym-cream); } html[data-theme] .card { background: var(--lym-panel); border: 1px solid var(--lym-line); border-radius: 14px; box-shadow: none; transition: border-color .15s; } html[data-theme] .card h3 { color: var(--lym-cream); } html[data-theme] .card-desc { color: var(--lym-slate); } html[data-theme] .tile { background: var(--lym-panel); border: 1px solid var(--lym-line); border-radius: 14px; transition: border-color .15s, transform .15s, box-shadow .15s; } html[data-theme] .tile:hover { border-color: var(--lym-gold); transform: translateY(-2px); box-shadow: var(--lym-shadow); } html[data-theme] .tile h3 { color: var(--lym-cream); } html[data-theme] .tile p { color: var(--lym-slate); } html[data-theme] .kpi { background: var(--lym-panel); border: 1px solid var(--lym-line); border-radius: 12px; } html[data-theme] .kpi .label { color: var(--lym-slate); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; } html[data-theme] .kpi .value { color: var(--lym-cream); font-variant-numeric: tabular-nums; } html[data-theme] .kpi .value.green { color: var(--lym-green); } html[data-theme] .kpi .value.red { color: var(--lym-red); } html[data-theme] .btn { background: var(--lym-gold-fill); color: var(--lym-gold-ink); border: 1px solid transparent; border-radius: 10px; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease; } html[data-theme] .btn:hover { box-shadow: 0 6px 28px var(--lym-gold-soft); } html[data-theme] .btn:active { transform: translateY(1px); } html[data-theme] .btn.secondary, html[data-theme] .btn.ghost { background: transparent; color: var(--lym-cream); border-color: var(--lym-line); font-weight: 500; } html[data-theme] .btn.secondary:hover, html[data-theme] .btn.ghost:hover { background: transparent; border-color: var(--lym-slate); box-shadow: none; } html[data-theme] .btn.danger { background: transparent; color: var(--lym-red); border-color: var(--lym-red); } html[data-theme] .btn.danger:hover { background: rgba(224, 138, 122, .12); } html[data-theme] table.data { background: transparent; } html[data-theme] table.data th { background: var(--lym-panel-2); color: var(--lym-slate); border-bottom: 1px solid var(--lym-line); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; } html[data-theme] table.data td { border-bottom: 1px solid var(--lym-line); color: var(--lym-cream); } html[data-theme] table.data .num { font-variant-numeric: tabular-nums; } html[data-theme] table.data tr:hover td { background: var(--lym-panel-2); } html[data-theme] .tag { border: 1px solid transparent; font-variant-numeric: tabular-nums; } html[data-theme] .tag.green { background: rgba(124, 199, 154, .14); color: var(--lym-green); } html[data-theme] .tag.amber { background: var(--lym-gold-soft); color: var(--lym-gold); } html[data-theme] .tag.red { background: rgba(224, 138, 122, .14); color: var(--lym-red); } html[data-theme] input, html[data-theme] select, html[data-theme] textarea { background: var(--lym-input-bg); color: var(--lym-cream); border: 1px solid var(--lym-line); border-radius: 9px; font-variant-numeric: tabular-nums; } html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--lym-placeholder); } html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus { outline: 2px solid var(--lym-gold); outline-offset: 1px; border-color: transparent; } html[data-theme] .coach-item { background: var(--lym-panel); border-color: var(--lym-line); } html[data-theme] .coach-item h4 { color: var(--lym-cream); } html[data-theme] .coach-item p { color: var(--lym-slate); } html[data-theme] .coach-item.validation-item { background: rgba(124, 199, 154, .08); border-color: rgba(124, 199, 154, .3); } html[data-theme] a { color: var(--lym-gold); } html[data-theme] details summary { color: var(--lym-gold); } html[data-theme] .toast { background: var(--lym-panel); color: var(--lym-cream); border: 1px solid var(--lym-line); box-shadow: var(--lym-shadow); } html[data-theme] .list-empty { color: var(--lym-slate); } /* Token-driven note card (replaces inline #fffbe6 ambers) */ html[data-theme] .el-note { background: var(--lym-gold-soft); border: 1px solid var(--lym-gold); border-radius: 12px; } html[data-theme] .el-note, html[data-theme] .el-note p, html[data-theme] .el-note li { color: var(--lym-cream); } /* ========================================================================== Evening Ledger page components (mockup) — used by Home + My report ========================================================================== */ .el-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--lym-slate); margin: 0 0 10px; } /* ---------- Verdict hero ---------- */ .el-hero { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: center; padding: 26px 0 34px; border-bottom: 1px solid var(--lym-line); } .el-ring-wrap { position: relative; width: 200px; height: 200px; filter: var(--lym-glow); } .el-ring-wrap svg { transform: rotate(-90deg); display: block; } .el-ring-bg { fill: none; stroke: var(--lym-ring-track); stroke-width: 11; } .el-ring-fg { fill: none; stroke: var(--lym-gold); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 565; stroke-dashoffset: 565; /* Target offset is set per-instance via inline --el-ring-target */ animation: el-ring-draw 1.4s cubic-bezier(.6, .05, .2, 1) .3s forwards; } @keyframes el-ring-draw { to { stroke-dashoffset: var(--el-ring-target, 565); } } .el-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .el-ring-num .n { font-family: var(--lym-serif); font-size: 56px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lym-cream); } .el-ring-num .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--lym-slate); margin-top: 6px; } /* Score-first ruling (2026-06-12): 70+ = GREEN — ring, number, and label read "ready" at a glance. Token-driven, legible in both themes. */ .el-ring-ready .el-ring-fg { stroke: var(--lym-green); } .el-ring-ready .el-ring-num .n { color: var(--lym-green); } .el-ring-ready .el-ring-num .lbl { color: var(--lym-green); } /* Tier addendum (2026-06-12): 90–99 platinum (refined silver), 100 gold accent. Literal per-theme tones (the silver has no token); calm, not gamified. The 100 ring differentiates from below-70 gold via the gold number + label + caption (below 70 keeps the cream number). */ .el-ring-platinum .el-ring-fg { stroke: #8E9CAB; } .el-ring-platinum .el-ring-num .n { color: #6E7E8F; } .el-ring-platinum .el-ring-num .lbl { color: #6E7E8F; } html[data-theme="evening"] .el-ring-platinum .el-ring-fg { stroke: #C3CCD6; } html[data-theme="evening"] .el-ring-platinum .el-ring-num .n { color: #C3CCD6; } html[data-theme="evening"] .el-ring-platinum .el-ring-num .lbl { color: #AEB9C6; } .el-ring-gold .el-ring-fg { stroke: var(--lym-gold); } .el-ring-gold .el-ring-num .n { color: var(--lym-gold); } .el-ring-gold .el-ring-num .lbl { color: var(--lym-gold); } /* Below 70 = CAUTION (owner meaning fix 2026-06-12): warm amber-orange, deliberately a different hue family from the yellow-gold reserved for 100 — a 42 must never share the 100's color. Ring stroke only; number and label keep their existing treatment (no shame, no caption). */ .el-ring-caution .el-ring-fg { stroke: #C0622B; } html[data-theme="evening"] .el-ring-caution .el-ring-fg { stroke: #E08B4F; } .el-verdict h1, .el-verdict .el-h1 { font-family: var(--lym-serif); font-weight: 500; margin: 0; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; letter-spacing: .1px; max-width: 21em; color: var(--lym-cream); } .el-verdict h1 em, .el-verdict .el-h1 em { font-style: normal; color: var(--lym-gold); } .el-verdict .sub { color: var(--lym-slate); margin: 12px 0 0; font-size: 15.5px; max-width: 46em; } .el-why { background: none; border: none; color: var(--lym-gold); font: inherit; font-size: 14px; border-bottom: 1px dashed var(--lym-gold); cursor: pointer; padding: 0; margin-left: 6px; } .el-cta-row { display: flex; gap: 14px; margin-top: 22px; flex-wrap: wrap; } html[data-theme] .btn.el-gold { font-size: 15px; padding: 12px 22px; box-shadow: 0 4px 22px var(--lym-gold-soft); } html[data-theme] .btn.el-ghost { font-size: 15px; padding: 12px 22px; } /* ---------- Calm numbers strip ---------- */ .el-week { display: flex; gap: 18px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--lym-line); color: var(--lym-slate); font-size: 14.5px; flex-wrap: wrap; } .el-week .k { color: var(--lym-cream); font-variant-numeric: tabular-nums; font-weight: 600; } .el-week .up { color: var(--lym-green); } .el-week .sep { opacity: .35; } /* ---------- Money picture ---------- */ .el-section-h { display: flex; align-items: baseline; justify-content: space-between; margin: 42px 0 6px; gap: 12px; flex-wrap: wrap; } .el-section-h h2 { font-family: var(--lym-serif); font-weight: 500; font-size: 23px; margin: 0; color: var(--lym-cream); } .el-section-h .meta { font-size: 13.5px; color: var(--lym-slate); font-variant-numeric: tabular-nums; } .el-section-sub { color: var(--lym-slate); font-size: 14.5px; margin: 0 0 20px; } .el-meter { height: 5px; border-radius: 99px; background: var(--lym-ring-track); overflow: hidden; margin-bottom: 26px; } .el-meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--lym-gold-fill), var(--lym-gold)); box-shadow: 0 0 12px var(--lym-gold-soft); /* Fill target is set per-instance via inline --el-meter-target */ animation: el-meter-fill 1.1s cubic-bezier(.6, .05, .2, 1) .4s forwards; } @keyframes el-meter-fill { to { width: var(--el-meter-target, 0); } } .el-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .el-card { background: var(--lym-panel); border: 1px solid var(--lym-line); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .15s, box-shadow .15s; cursor: pointer; text-decoration: none; } .el-card:hover { border-color: var(--lym-gold); transform: translateY(-2px); box-shadow: var(--lym-shadow); } .el-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .el-card .name { font-size: 15px; font-weight: 600; color: var(--lym-cream); } .el-card .val { font-size: 13.5px; color: var(--lym-slate); font-variant-numeric: tabular-nums; } .el-badge { font-size: 11.5px; letter-spacing: .06em; border-radius: 99px; padding: 3px 10px; white-space: nowrap; } .el-badge.done { background: rgba(124, 199, 154, .12); color: var(--lym-green); } .el-badge.add { background: var(--lym-gold-soft); color: var(--lym-gold); } /* ---------- Quick start ---------- */ .el-quick { margin-top: 26px; background: var(--lym-panel-2); border: 1px solid var(--lym-line); border-radius: 16px; padding: 26px 26px 24px; position: relative; overflow: hidden; } .el-quick::after { content: ""; position: absolute; inset: auto -60px -90px auto; width: 240px; height: 240px; background: radial-gradient(closest-side, var(--lym-gold-soft), transparent); pointer-events: none; } .el-quick h3 { font-family: var(--lym-serif); font-size: 21px; font-weight: 500; margin: 0 0 4px; color: var(--lym-cream); } .el-quick p { color: var(--lym-slate); font-size: 14.5px; margin: 0 0 18px; } .el-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } .el-field label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lym-slate); margin-bottom: 6px; } .el-field input, .el-field select { width: 100%; font-size: 15px; padding: 10px 12px; } .el-quick .status { margin: 10px 0 0; font-size: 12.5px; color: var(--lym-red); min-height: 16px; } /* ---------- Why-this popover (mockup #pop) ---------- */ .pop { display: none; position: fixed; inset: 0; background: rgba(7, 11, 20, .7); align-items: center; justify-content: center; z-index: 5000; padding: 20px; } .pop.open { display: flex; } .pop .box { background: var(--lym-panel); border: 1px solid var(--lym-gold); border-radius: 16px; max-width: 480px; padding: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .pop h4 { font-family: var(--lym-serif); font-size: 20px; font-weight: 500; margin: 0 0 10px; color: var(--lym-cream); } .pop p { color: var(--lym-slate); font-size: 15px; margin: 0 0 10px; line-height: 1.55; } .pop p b { color: var(--lym-cream); font-weight: 600; } .pop .close { margin-top: 14px; } /* ---------- Footer note ---------- */ .el-footnote { margin-top: 64px; color: var(--lym-placeholder); font-size: 12.5px; border-top: 1px solid var(--lym-line); padding-top: 16px; } /* ========================================================================== Legacy "paper sheet" — evening mode only. Routes outside the four redesigned surfaces were designed against the light palette (lots of inline light-pastel cards with dark text). In evening mode their content renders on a warm paper sheet so every one of those assumptions stays readable. The router sets body.route-paper. ========================================================================== */ html[data-theme="evening"] body.route-paper #content { --bg: #f4f5f7; --card: #ffffff; --border: #e3e6ec; --muted: #5d6470; --text: #1f2430; --green: #1faa64; --red: #d93939; --brand-blue: #0a3a87; --brand-blue-2: #1657c2; --brand-yellow: #b8860b; --brand-orange: #b86e23; --lym-input-bg: #ffffff; --lym-cream: #1f2430; --lym-slate: #6b7280; --lym-line: #e3e6ec; --lym-panel: #ffffff; --lym-panel-2: #f4f5f7; --lym-placeholder: #9aa3b5; --lym-gold: #9A7115; --lym-gold-soft: rgba(154,113,21,.12); --lym-green: #1faa64; --lym-red: #d93939; --lym-ring-track: #e3e6ec; background: #F7F3EA; color: var(--text); border-radius: 16px; padding: 24px; margin: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); } /* The onboarding wizard overlay is a light card by design — in evening mode, re-scope the variables it inherits so its text stays readable (same one-rule treatment as the legacy paper sheet). */ html[data-theme="evening"] #onboarding-overlay { --bg: #f4f5f7; --card: #ffffff; --border: #e3e6ec; --muted: #5d6470; --text: #1f2430; --green: #1faa64; --red: #d93939; --brand-blue: #0a3a87; --brand-blue-2: #1657c2; --brand-yellow: #b8860b; --lym-cream: #1f2430; --lym-slate: #6b7280; --lym-line: #e3e6ec; --lym-panel: #ffffff; --lym-panel-2: #f4f5f7; --lym-input-bg: #ffffff; --lym-placeholder: #9aa3b5; --lym-gold: #9A7115; --lym-gold-soft: rgba(154, 113, 21, .12); color: var(--text); } /* ---------- Print: always light, regardless of theme ---------- */ @media print { html[data-theme] { --lym-ink: #ffffff; --lym-panel: #ffffff; --lym-panel-2: #f4f5f7; --lym-line: #d6dae2; --lym-cream: #1f2430; --lym-slate: #475066; --lym-gold: #8a6410; --lym-gold-soft: rgba(138, 100, 16, .1); --lym-gold-fill: #e3c987; --lym-gold-ink: #241A02; --lym-green: #1faa64; --lym-red: #b03030; --lym-input-bg: #ffffff; --lym-ring-track: #e3e6ec; --lym-shadow: none; --lym-glow: none; } html[data-theme] body::before { display: none; } } /* ---------- Responsive (mockup ≤900px + small phones) ---------- */ @media (max-width: 900px) { .el-hero { grid-template-columns: 1fr; gap: 26px; justify-items: start; } } /* ===== chip/mobile-home-dashboard (2026-06-13) ===== Mobile-only Home blocks: a 3-anchor numbers strip and the dedicated Retirement Paycheck invitation card. Both hidden on desktop so the existing desktop Home renders byte-unchanged. The legacy .el-week strip is hidden on mobile so the new strip replaces it without touching the desktop layout. */ .el-mobile-numbers { display: none; } .el-mobile-paycheck { display: none; } /* Two parallel Worth-exploring sections (rulings 6 + 7): the desktop section preserves byte-identical SP.OpportunityCards.render output; the mobile section is filtered (retirement-paycheck removed so the dedicated Paycheck card above doesn't duplicate). Each viewport sees exactly one. */ .opp-cards-mobile-only { display: none; } @media (max-width: 900px) { .el-week { display: none; } .opp-cards-desktop-only { display: none; } .opp-cards-mobile-only { display: block; } .el-mobile-numbers { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 16px 0 14px; border-bottom: 1px solid var(--lym-line); margin-bottom: 14px; } .el-mobile-anchor { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .el-mobile-label { font-size: 11.5px; color: var(--lym-slate); letter-spacing: .04em; text-transform: uppercase; } .el-mobile-value { font-family: var(--lym-serif); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--lym-cream); } .el-mobile-anchor.anchor-major .el-mobile-value { font-size: 20px; line-height: 1.15; } .el-mobile-anchor.anchor-minor .el-mobile-value { font-size: 16px; opacity: .85; } .el-mobile-anchor-pos { color: var(--lym-green); } .el-mobile-anchor-neg { color: var(--lym-red, #C0622B); } .el-mobile-anchor-gated { color: var(--lym-slate); } /* Retirement Paycheck invitation card — mobile-only. Specificity bump (html[data-theme] prefix) wins against the theme's `html[data-theme] .card` border shorthand. */ html[data-theme] .el-mobile-paycheck { display: block; border-left: 4px solid var(--lym-gold); margin-bottom: 14px; } .el-mobile-paycheck-title { margin: 0 0 4px; font-size: 16px; color: var(--lym-cream); } .el-mobile-paycheck-body { margin: 0 0 10px; font-size: 13.5px; color: var(--lym-cream); line-height: 1.55; } } @media (max-width: 420px) { .el-ring-wrap { width: 160px; height: 160px; } .el-ring-wrap svg { width: 160px; height: 160px; } .el-ring-num .n { font-size: 44px; } .el-cards { grid-template-columns: 1fr; } .el-week { gap: 10px; font-size: 13.5px; } html[data-theme="evening"] body.route-paper #content { margin: 8px; padding: 14px; } } /* ---------- Reduced motion: ring + meter render at final state ---------- */ @media (prefers-reduced-motion: reduce) { .el-ring-fg { animation: none; stroke-dashoffset: var(--el-ring-target, 565); } .el-meter i { animation: none; width: var(--el-meter-target, 0); } .el-card, html[data-theme] .tile, html[data-theme] .btn { transition: none; } } /* ========================================================================== The Library (v1) — shared frame, freshness stamp, Help index. Token-only; inherits the paper re-scope on legacy routes in evening. ========================================================================== */ .lib-frame { border: 1px solid var(--lym-line); border-left: 3px solid var(--lym-gold); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; background: var(--lym-panel-2); } .lib-frame-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .lib-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lym-slate); } .lib-back { font-size: 13px; white-space: nowrap; } .lib-title { font-family: var(--lym-serif); font-weight: 500; font-size: 20px; color: var(--lym-cream); margin-top: 4px; } .lib-blurb { font-size: 13.5px; color: var(--lym-slate); margin-top: 2px; } .lib-stamp { font-size: 12px; color: var(--lym-slate); margin-top: 8px; } .lib-stamp.caution { color: var(--lym-red); } .lib-stamp.caution a { color: var(--lym-red); } .lib-stamp-note { display: block; margin-top: 2px; font-size: 11.5px; opacity: .9; } .lib-group-name { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--lym-gold); margin: 14px 0 6px; } .lib-row { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 8px; text-decoration: none; } .lib-row:hover { background: var(--lym-gold-soft); } .lib-row-title { font-size: 14.5px; font-weight: 600; color: var(--lym-cream); } .lib-row-blurb { font-size: 12.5px; color: var(--lym-slate); } .lib-home-line { margin: 26px 0 0; font-size: 14px; color: var(--lym-slate); } /* Library v2: archived references */ .lib-archived { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--lym-red); } .lib-row-archived { opacity: .65; } /* Library v2: neutralized dead source links. render-safety chip (2026-06-12): no strikethrough — the red line-through made USEFUL source labels look broken. Calm muted text; the "(source unavailable)" suffix + title carry the status; still never clickable (it's a span, not an anchor). */ .lib-dead-link { color: var(--lym-slate); opacity: 0.8; font-style: italic; cursor: help; }