:root { color-scheme: light dark; /* Catppuccin Latte (light) palette tokens */ --latte-base: #eff1f5; --latte-mantle: #e6e9ef; --latte-surface0: #ccd0da; --latte-overlay0: #9ca0b0; --latte-text: #4c4f69; --latte-subtext0: #6c6f85; --latte-green: #40a02b; --latte-mauve: #8839ef; --latte-red: #d20f39; --latte-peach: #fe640b; --latte-blue: #1e66f5; --latte-teal: #179299; --latte-yellow: #df8e1d; --latte-pink: #ea76cb; --latte-maroon: #e64553; /* Catppuccin Macchiato (dark) palette tokens */ --macchiato-base: #24273a; --macchiato-mantle: #1e2030; --macchiato-surface0: #363a4f; --macchiato-overlay0: #6e738d; --macchiato-text: #cad3f5; --macchiato-subtext0: #a5adcb; --macchiato-green: #a6da95; --macchiato-mauve: #c6a0f6; --macchiato-red: #ed8796; --macchiato-peach: #f5a97f; --macchiato-blue: #8aadf4; --macchiato-teal: #8bd5ca; --macchiato-yellow: #eed49f; --macchiato-pink: #f5bde6; --macchiato-maroon: #ee99a0; } /* Active flavor mapping. Three layers, lowest to highest priority: 1. Latte by default (below). 2. System dark preference (@media block). 3. Explicit user choice via Settings -- a `data-theme` attribute on , set by JS and persisted in localStorage. Attribute selectors out-specificity the bare `:root` rules below regardless of source order, so an explicit choice always wins over system preference. */ :root { --base: var(--latte-base); --mantle: var(--latte-mantle); --surface0: var(--latte-surface0); --overlay0: var(--latte-overlay0); --text: var(--latte-text); --subtext0: var(--latte-subtext0); --green: var(--latte-green); --mauve: var(--latte-mauve); --red: var(--latte-red); --peach: var(--latte-peach); --blue: var(--latte-blue); --teal: var(--latte-teal); --yellow: var(--latte-yellow); --pink: var(--latte-pink); --maroon: var(--latte-maroon); --border: var(--latte-surface0); } @media (prefers-color-scheme: dark) { :root { --base: var(--macchiato-base); --mantle: var(--macchiato-mantle); --surface0: var(--macchiato-surface0); --overlay0: var(--macchiato-overlay0); --text: var(--macchiato-text); --subtext0: var(--macchiato-subtext0); --green: var(--macchiato-green); --mauve: var(--macchiato-mauve); --red: var(--macchiato-red); --peach: var(--macchiato-peach); --blue: var(--macchiato-blue); --teal: var(--macchiato-teal); --yellow: var(--macchiato-yellow); --pink: var(--macchiato-pink); --maroon: var(--macchiato-maroon); --border: var(--macchiato-surface0); } } :root[data-theme="light"] { color-scheme: light; --base: var(--latte-base); --mantle: var(--latte-mantle); --surface0: var(--latte-surface0); --overlay0: var(--latte-overlay0); --text: var(--latte-text); --subtext0: var(--latte-subtext0); --green: var(--latte-green); --mauve: var(--latte-mauve); --red: var(--latte-red); --peach: var(--latte-peach); --blue: var(--latte-blue); --teal: var(--latte-teal); --yellow: var(--latte-yellow); --pink: var(--latte-pink); --maroon: var(--latte-maroon); --border: var(--latte-surface0); } :root[data-theme="dark"] { color-scheme: dark; --base: var(--macchiato-base); --mantle: var(--macchiato-mantle); --surface0: var(--macchiato-surface0); --overlay0: var(--macchiato-overlay0); --text: var(--macchiato-text); --subtext0: var(--macchiato-subtext0); --green: var(--macchiato-green); --mauve: var(--macchiato-mauve); --red: var(--macchiato-red); --peach: var(--macchiato-peach); --blue: var(--macchiato-blue); --teal: var(--macchiato-teal); --yellow: var(--macchiato-yellow); --pink: var(--macchiato-pink); --maroon: var(--macchiato-maroon); --border: var(--macchiato-surface0); } /* Semantic layer -- everything else references these, never a flavor color directly, so a future flavor swap only touches the blocks above. */ :root { --bg: var(--base); --bg-alt: var(--mantle); --surface: var(--mantle); --surface-elevated: var(--base); --fg: var(--text); --fg-muted: var(--subtext0); --border-strong: var(--overlay0); --cat-business: var(--green); --cat-personal: var(--mauve); --danger: var(--red); --warn: var(--peach); --year-1: var(--blue); --year-2: var(--teal); --year-3: var(--yellow); --year-4: var(--pink); --year-5: var(--maroon); --route: var(--green); --focus-ring: var(--mauve); --shadow: 0 0.35rem 1.25rem rgb(30 32 48 / 14%); --control-bg: var(--surface-elevated); --control-fg: var(--fg); --control-border: var(--border-strong); --control-shadow: 0 .1rem .3rem rgb(30 32 48 / 12%); --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --control-height: 2.75rem; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 1100px; margin: 0 auto; padding: var(--space-4) var(--space-6); background: var(--bg); color: var(--fg); } button, input, select, summary { min-height: var(--control-height); } button, input, select, textarea { color: var(--control-fg); background-color: var(--control-bg); border: 1px solid var(--control-border); border-radius: var(--radius-sm); font: inherit; } button { padding: 0 var(--space-3); cursor: pointer; box-shadow: var(--control-shadow); } button:disabled { cursor: not-allowed; opacity: .55; } input[type="checkbox"], input[type="radio"] { min-height: 1rem; min-width: 1rem; } header { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); margin-bottom: var(--space-4); } header h1 { font-size: 1.3rem; margin: 0; } header h1 a { text-decoration: none; } header nav { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; font-size: .9rem; } .header-account { display: flex; gap: var(--space-2); align-items: center; font-size: .85rem; } header .who { color: var(--fg-muted); } footer { border-top: 1px solid var(--border); margin-top: var(--space-4); padding-top: var(--space-3); } footer p { margin: 0; font-size: .8rem; } .logout-form { display: inline; } .link-button { background: none; border: none; min-height: var(--control-height); padding: 0 var(--space-2); margin: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; box-shadow: none; } a, button, input, select, textarea, summary { overflow-wrap: anywhere; } /* min-height above gives a native the shared control target, but align-content defaults to start on a block box, so the label would sit at the top of that taller box with the slack below it. Centering is what the control-styled summaries elsewhere in this file already pair with their own min-height; this brings the unstyled ones in line. */ summary { cursor: pointer; align-content: center; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .control { display: inline-flex; min-height: var(--control-height); align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: 0 var(--space-3); cursor: pointer; font: inherit; text-decoration: none; box-shadow: var(--control-shadow); } .control-primary { color: var(--base); background: var(--cat-business); border: 1px solid var(--cat-business); font-weight: 600; } .control-secondary { color: var(--control-fg); background: var(--control-bg); border: 1px solid var(--control-border); } .control-quiet { color: var(--fg); background: transparent; border: 1px solid transparent; } .control-destructive { color: var(--base); background: var(--danger); border: 1px solid var(--danger); } h2 { font-size: 1.05rem; margin: 1.5rem 0 .25rem; } .month-summary { font-size: .85rem; color: var(--fg-muted); margin-bottom: .5rem; } .table-wrapper { overflow-x: auto; } /* Tables crush their columns to min-content before .table-wrapper's overflow-x ever engages, so the global `summary { overflow-wrap: anywhere }` rule (kept above for other long-content controls) squeezes a table-cell Edit down to its narrowest legal wrap point -- one letter per line -- well before the table would actually need to scroll. Scoping summaries back to normal wrapping here keeps the action word intact and lets the table grow past its wrapper instead of its cells. */ .table-wrapper summary { overflow-wrap: normal; white-space: nowrap; } table { border-collapse: collapse; width: 100%; font-size: .9rem; } th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--border); } /* No left padding on the first column, so a table's first column lines up with the headings and body text sharing its content column instead of sitting half a cell further right. */ th:first-child, td:first-child { padding-left: 0; } th { font-weight: 600; font-size: .8rem; text-transform: uppercase; opacity: .6; } td.num { font-variant-numeric: tabular-nums; } .trip-route { overflow-wrap: anywhere; line-height: 1.35; } /* Review's three keyboard-mirrored decisions must stay visually grouped; wrapping one label away from the others makes a rapid triage pass easier to misread. */ .tags { white-space: nowrap; } .tags button { border: 1px solid var(--control-border); background: var(--control-bg); color: var(--fg); border-radius: 4px; padding: .15rem .5rem; cursor: pointer; font-size: .8rem; } .tags button.active-business { background: var(--cat-business); color: var(--base); border-color: var(--cat-business); } .tags button.active-personal { background: var(--cat-personal); color: var(--base); border-color: var(--cat-personal); } /* Horizontal padding widened from .25rem: the only free-text input in the app with its own explicit (and previously too-tight) padding rule, per the 2026-08-08 maintainer report. Every other text input relies on the browser's native default padding instead, which is a different, unrelated situation this correction doesn't touch. */ input.notes { width: 100%; min-width: 8rem; border: 1px solid transparent; background: var(--control-bg); color: var(--control-fg); padding: .15rem .5rem; border-radius: 4px; } input.notes:hover, input.notes:focus { border-color: var(--border-strong); } .purpose-field { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; } .purpose-field input { box-sizing: border-box; padding-right: 2rem; } .purpose-field::after { content: ""; position: absolute; right: .65rem; top: 50%; width: .4rem; height: .4rem; border-right: 2px solid var(--fg-muted); border-bottom: 2px solid var(--fg-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .purpose-field-empty::after { opacity: .45; } .purpose-recent { appearance: none; position: absolute; inset: 0 0 0 auto; width: 1.75rem; min-width: 0; border: 0; border-left: 1px solid var(--border-strong); border-radius: 0 4px 4px 0; background: var(--control-bg); color: transparent; cursor: pointer; } .purpose-recent:focus { outline: 2px solid var(--fg); outline-offset: -2px; } .purpose-recent:disabled { cursor: default; opacity: .45; } .purpose-recent option { color: var(--fg); background: var(--bg); font-size: .9rem; } .manual-badge { font-size: .7rem; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 .3rem; opacity: .7; } .trip-card-list { display: grid; gap: var(--space-3); min-width: 0; } /* Shared surface for every card-shaped block in the app. .trip-card and .metric-card previously declared this same padding/border/radius/ background/shadow set twice, under two different class names; both now carry this class alongside their own (card trip-card, card metric-card) and add only what's actually theirs on top of it. */ .card { min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); } .trip-card-heading { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; } .trip-card-heading > * { min-width: 0; } .trip-card-heading-main { display: flex; min-width: 0; align-items: center; gap: var(--space-3); } .trip-card-selector { min-height: var(--control-height); align-items: center; gap: var(--space-1); color: var(--fg-muted); font-size: .8rem; white-space: nowrap; } .trip-card-selector:not([hidden]) { display: inline-flex; } .trip-card-selector input { margin: 0; } .selected-label { display: none; font-weight: 600; } .trip-card.is-selected { border: 2px solid var(--focus-ring); background: var(--surface0); box-shadow: 0 0 0 1px var(--focus-ring), var(--shadow); } .trip-card.is-selected .selection-label { display: none; } .trip-card.is-selected .selected-label { display: inline; } .trip-card-time { margin-left: var(--space-2); color: var(--fg-muted); font-variant-numeric: tabular-nums; } .trip-card-distance { white-space: nowrap; font-variant-numeric: tabular-nums; } .trip-card-route { margin: var(--space-2) 0; } .trip-card-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } .category-badge, .status-badge { display: inline-flex; max-width: 100%; padding: .2rem .5rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .78rem; overflow-wrap: anywhere; } .category-business { border-color: var(--cat-business); } .category-personal { border-color: var(--cat-personal); } .category-unclassified, .status-warning { border-color: var(--warn); } .trip-card-controls { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; margin-top: var(--space-2); } .trip-card-control { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 10rem; } /* .filter-bar .field-label (below) is a third, deliberately different .field-label rule: it omits color, so filter/export/triage/quarterly labels stay full-color while these two stay muted. Not merged into this selector list, since doing so would silently mute them too. */ .trip-card-control .field-label, .trip-detail-field .field-label { font-size: .75rem; color: var(--fg-muted); } /* `> select` (not the bare descendant selector) so this can never reach the purpose field's *inner* .purpose-recent