/* --------------------------------------------------------------------------- Tokens. Light values are the default; dark is a selected set of steps for the dark surface (not an automatic flip). The OS setting is honoured by the media query, and the in-page toggle stamps data-theme on , which wins both ways. Series colours come from a validated categorical palette — see README. --------------------------------------------------------------------------- */ :root { color-scheme: light; --surface-1: #fcfcfb; --page: #f9f9f7; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781; --gridline: #e1e0d9; --axis: #c3c2b7; --border: rgba(11, 11, 11, 0.1); --border-strong: rgba(11, 11, 11, 0.18); --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.05); --wash: rgba(11, 11, 11, 0.04); --good: #0ca30c; --good-text: #006300; --warning: #fab219; --critical: #d03b3b; --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948; --radius: 12px; --radius-sm: 8px; --sans: system-ui, -apple-system, 'Segoe UI', sans-serif; } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme='light'])) { color-scheme: dark; --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.2); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --wash: rgba(255, 255, 255, 0.05); --good-text: #0ca30c; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; } } :root[data-theme='dark'] { color-scheme: dark; --surface-1: #1a1a19; --page: #0d0d0d; --text-primary: #ffffff; --text-secondary: #c3c2b7; --text-muted: #898781; --gridline: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.2); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --wash: rgba(255, 255, 255, 0.05); --good-text: #0ca30c; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; } * { box-sizing: border-box; } /* Class rules below set `display`, which would otherwise beat the UA sheet's [hidden] rule on equal specificity. */ [hidden] { display: none !important; } body { margin: 0; background: var(--page); color: var(--text-primary); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; } h1 { font-size: 1.35rem; } h2 { font-size: 1.05rem; } h3 { font-size: 0.78rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- header ------------------------------------------------------------- */ .app-header { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; /* Keep the header content aligned with
's 1280px column on wide screens. */ padding-block: 20px; padding-inline: max( clamp(16px, 4vw, 40px), calc((100% - 1280px) / 2 + clamp(16px, 4vw, 40px)) ); border-bottom: 1px solid var(--border); background: var(--surface-1); } .app-header__subtitle { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.85rem; max-width: 60ch; } .app-header__actions { display: flex; gap: 8px; align-items: center; } main { max-width: 1280px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px) 64px; display: flex; flex-direction: column; gap: 28px; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .section-note { margin: 0 0 14px; color: var(--text-secondary); font-size: 0.82rem; max-width: 78ch; } /* --- buttons & inputs ---------------------------------------------------- */ .btn { font: inherit; font-size: 0.85rem; font-weight: 500; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text-primary); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; } .btn:hover { background: var(--wash); } .btn--primary { background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); } .btn--primary:hover { opacity: 0.88; background: var(--text-primary); } .btn--ghost { border-color: transparent; color: var(--text-secondary); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .icon-btn { font: inherit; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; } .icon-btn:hover { background: var(--wash); color: var(--text-primary); } .input { font: inherit; font-size: 0.85rem; width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--page); color: var(--text-primary); } .input:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .segmented button:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; } .input--select { background: var(--page); } .input--derived { color: var(--text-secondary); border-style: dashed; } .segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--page); } .segmented button { font: inherit; font-size: 0.82rem; padding: 5px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; } .segmented button[aria-checked='true'] { background: var(--surface-1); color: var(--text-primary); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } /* --- controls row -------------------------------------------------------- */ .controls { display: flex; flex-wrap: wrap; gap: 28px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--shadow); } .control { display: flex; flex-direction: column; gap: 6px; min-width: 190px; } .control__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .control__hint { margin: 0; font-size: 0.75rem; color: var(--text-secondary); max-width: 42ch; } .banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--surface-1)); font-size: 0.82rem; color: var(--text-primary); } /* --- cards --------------------------------------------------------------- */ .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .card__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; } .card__sub { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.8rem; max-width: 70ch; } .card__foot { margin: 12px 0 0; color: var(--text-muted); font-size: 0.75rem; } /* --- offer cards --------------------------------------------------------- */ .offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: start; } .offer__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .offer__swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--offer-color, var(--series-1)); } .offer__name { font-weight: 600; border-color: transparent; background: transparent; padding-left: 4px; } .offer__name:hover { border-color: var(--border-strong); background: var(--page); } .offer__head-actions { display: flex; gap: 2px; flex: none; } .offer__group + .offer__group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .offer__group-title { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .field { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .field--wide { grid-column: 1 / -1; } .field__label { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--text-secondary); } .field__label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .field__hint { font-size: 0.68rem; color: var(--text-muted); } .link-toggle { font: inherit; font-size: 0.6rem; line-height: 1; padding: 2px 3px; border-radius: 4px; border: 1px solid transparent; background: transparent; cursor: pointer; opacity: 0.75; flex: none; } .link-toggle:hover { background: var(--wash); opacity: 1; } .link-toggle[aria-pressed='false'] { opacity: 0.4; } .link-chip { font-size: 0.75rem; } /* --- tiered split -------------------------------------------------------- */ .tiers { margin-top: 12px; } .tier-toggle { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; color: var(--text-secondary); cursor: pointer; } .tier-toggle input { width: 14px; height: 14px; flex: none; margin: 0; accent-color: var(--series-1); cursor: pointer; } .tier-toggle input:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; } .tier-note { margin: 7px 0 10px; font-size: 0.68rem; color: var(--text-muted); } .tier-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .tier { padding: 9px 10px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--wash); } .tier__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; } .tier__title { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .tier .icon-btn { width: 22px; height: 22px; font-size: 0.72rem; } .tier-add { margin-top: 10px; font-size: 0.78rem; padding: 6px 11px; } /* --- results ------------------------------------------------------------- */ .results { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; align-items: start; } .result { position: relative; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); border-top: 3px solid var(--offer-color, var(--series-1)); } .result--best { border-color: var(--good); box-shadow: 0 0 0 1px var(--good), var(--shadow); } .result__badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--good-text); margin-bottom: 6px; } .result__name { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 0.9rem; margin-bottom: 10px; } .result__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--offer-color, var(--series-1)); } .result__value { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .result__value-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 10px; } .result__delta { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 12px; } .result__delta--best { color: var(--good-text); font-weight: 500; } .breakdown { border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; } .breakdown__row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .breakdown__row--total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; color: var(--text-primary); font-weight: 600; } .breakdown__row--muted { color: var(--text-muted); } .breakdown__row dt { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breakdown__row dd { margin: 0; flex: none; } /* --- chart --------------------------------------------------------------- */ .chart-wrap { position: relative; width: 100%; /* Height includes the x-axis band so labels are never cut off. */ height: 420px; } #chart { width: 100%; height: 100%; display: block; touch-action: none; } .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; } .legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-secondary); background: none; border: 0; padding: 2px 0; font-family: inherit; cursor: pointer; } .legend__item[aria-pressed='false'] { opacity: 0.4; } .legend__key { width: 14px; height: 3px; border-radius: 2px; flex: none; background: var(--offer-color, var(--series-1)); } .tooltip { position: absolute; pointer-events: none; z-index: 5; min-width: 170px; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-1); box-shadow: var(--shadow); font-size: 0.76rem; transform: translate(-50%, calc(-100% - 14px)); transition: opacity 0.1s ease; } .tooltip__title { font-weight: 600; margin-bottom: 6px; color: var(--text-primary); } .tooltip__row { display: flex; align-items: center; gap: 7px; justify-content: space-between; color: var(--text-secondary); font-variant-numeric: tabular-nums; padding: 1px 0; } .tooltip__row-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .tooltip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .tooltip__value { font-weight: 500; color: var(--text-primary); } /* --- tables -------------------------------------------------------------- */ .table-scroll { overflow-x: auto; margin-top: 12px; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-variant-numeric: tabular-nums; min-width: 460px; } .data-table th, .data-table td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table th:first-child, .data-table td:first-child { text-align: left; } .data-table thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table .cell--best { font-weight: 600; color: var(--good-text); } .data-table .name-cell { display: flex; align-items: center; gap: 7px; } .data-table .name-cell__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } /* --- break-even ---------------------------------------------------------- */ .envelope { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; } .envelope__bar { display: flex; width: 100%; height: 34px; border-radius: var(--radius-sm); overflow: hidden; gap: 2px; /* surface gap between bands */ } .envelope__band { display: grid; place-items: center; min-width: 0; padding: 0 6px; font-size: 0.72rem; font-weight: 600; /* Set per band in JS by the fill's luminance — light slots need dark ink. */ color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .envelope__scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .envelope__list { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.82rem; } .envelope__list li { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); } .envelope__list .name-cell__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .crossings { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; font-size: 0.82rem; } .crossing { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; color: var(--text-secondary); } .crossing__pair { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 500; } .crossing__pair .name-cell__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .crossing__value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); } .empty-note { color: var(--text-muted); font-size: 0.82rem; margin: 0; } /* --- footer -------------------------------------------------------------- */ .assumptions { border-top: 1px solid var(--border); padding-top: 20px; color: var(--text-secondary); font-size: 0.8rem; } .assumptions h2 { font-size: 0.85rem; margin-bottom: 10px; color: var(--text-primary); } .assumptions ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; max-width: 88ch; } .assumptions strong { color: var(--text-primary); font-weight: 600; } .assumptions__note { margin: 14px 0 0; color: var(--text-muted); font-size: 0.75rem; } @media (max-width: 620px) { .chart-wrap { height: 340px; } .app-header { flex-direction: column; } .controls { gap: 18px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }