:root { --bg: #F5F3F8; --surface: #FFFFFF; --surface-hover: rgba(35,0,76,0.03); --border: rgba(35,0,76,0.08); --border-strong: rgba(35,0,76,0.16); --text: #23004C; --text-secondary: rgba(35,0,76,0.62); --text-tertiary: rgba(35,0,76,0.45); --accent: #7A00E6; --accent-light: rgba(122,0,230,0.7); --accent-bg: rgba(122,0,230,0.06); --danger: #DA3A16; --danger-bg: rgba(218,58,22,0.06); /* Semantic colors fixed across both themes (like --danger already is) — vivid enough to read on either surface, so they don't need a light/dark variant. Centralized here (were previously repeated as raw hex at each usage site) so a future tweak only needs to happen once. */ --success: #268500; /* "Running late" - amber, between the accent and --danger, for the live day's drift readouts. Same fixed-across-themes rule. */ --warning: #B45309; /* Agenda block hues by type (the glyph decides the type). Sights stay the accent; the rest are picked to sit beside it, not fight it. */ --type-sights: var(--accent); --type-food: #B45309; --type-transit: #5B5B6B; --type-outdoors: #268500; --type-nightlife: #8B1E6B; /* Priority scale — deliberately its own trio, not aliased to --danger/--success, so a future change to either of those (used elsewhere for errors/positive-balance/etc.) can't silently recolor priority flags too, or vice versa. Inverted + re-sourced from "Color Schema 1" (the fixed 8-color palette already reused elsewhere in this file for tags): high was --danger's red before (coupled to it) and low was an ad-hoc green outside that palette — swapped, and medium given its own schema color too so the whole trio is schema-sourced, not just the two ends. */ --priority-high: #268500; --priority-medium: #007FAD; --priority-low: #DA3A16; /* Day-card header, light mode only (see the matching dark/@media block below, which keeps these aliased to --text/--text-tertiary so dark mode's look is untouched). Deliberate Color Schema 1 picks rather than the inherited body-text color: vivid purple for the title makes it read as a heading rather than plain text; the date reuses the schema's darkest tone (not --text-tertiary's faint gray) plus a heavier weight below, so it's legible at a glance instead of an afterthought under the title. */ --day-title-color: #7A00E6; --day-date-color: #23004C; --day-date-weight: 700; /* One UI corner scale. The previous 8/12/16/24 sat squarely in the 8–12px band that reads as generic Material/web default — the single most common way an attempt at this look lands off-brand. One UI's signature is noticeably softer: small controls ~16, cards and list rows ~20–24, large surfaces and sheet tops ~28–32. */ --radius-sm: 14px; --radius-md: 18px; --radius-lg: 22px; --radius-xl: 30px; --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.02); --shadow-lg: 0 4px 16px rgba(0,0,0,0.06); --transition: 200ms cubic-bezier(0.4,0,0.2,1); /* Settle easing. This token previously held a back-out curve with a real overshoot (…,1.56,…) for "modern bold" presence. One UI's motion language is the opposite: content decelerates and settles rather than springing past its mark, so the overshoot is gone and every one of the 14 call sites inherits the calmer curve at once — a spring on a sheet or a toast is the tell that reads as iOS rather than One UI. --ease-settle is the bare curve for `animation` shorthands (which need duration and easing separately); --transition-settle bundles a duration for `transition` shorthand use. Slightly longer than the flat --transition, because One UI motion is unhurried, not sluggish. Not theme-dependent, so these live only in this block. */ --ease-settle: cubic-bezier(0.22,0.61,0.36,1); --transition-settle: 340ms var(--ease-settle); --dock-bg: rgba(255,255,255,0.85); --track-bg: rgba(35,0,76,0.05); --badge-bg: rgba(35,0,76,0.04); --scrollbar-thumb: rgba(35,0,76,0.15); } /* Auto (default): follow the OS/browser setting. Overridden below by an explicit [data-theme] on when the user picks light/dark manually instead of "Auto" — see app.cycleTheme() in app-core.js. */ @media (prefers-color-scheme: dark) { :root { --bg: #000000; --surface: #161618; --surface-hover: #1E1E21; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --text: #F5F3F8; --text-secondary: rgba(245,243,248,0.65); --text-tertiary: rgba(245,243,248,0.45); --accent: #007FAD; --accent-light: rgba(0,127,173,0.75); --accent-bg: rgba(0,127,173,0.14); --type-food: #E8A85C; --type-transit: #9A9AAB; --type-outdoors: #7CD66B; --type-nightlife: #D77BC0; --danger: #DA3A16; --danger-bg: rgba(218,58,22,0.16); --success: #268500; --priority-high: #268500; --priority-medium: #007FAD; --priority-low: #DA3A16; /* Dark mode is explicitly out of scope for the day-card header restyle — aliasing to --text/--text-tertiary here reproduces exactly what .day-title/.day-date already looked like before those tokens existed, so dark mode's appearance doesn't change. */ --day-title-color: var(--text); --day-date-color: var(--text-tertiary); --day-date-weight: 500; --shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.16); --shadow-lg: 0 4px 20px rgba(0,0,0,0.35); --dock-bg: rgba(22,22,24,0.85); --track-bg: rgba(255,255,255,0.08); --badge-bg: rgba(255,255,255,0.06); --scrollbar-thumb: rgba(255,255,255,0.18); } } /* Manual overrides — win regardless of OS setting or source order (attribute selector outranks the plain :root/@media :root above). */ :root[data-theme="light"] { --bg: #F5F3F8; --surface: #FFFFFF; --surface-hover: rgba(35,0,76,0.03); --border: rgba(35,0,76,0.08); --border-strong: rgba(35,0,76,0.16); --text: #23004C; --text-secondary: rgba(35,0,76,0.62); --text-tertiary: rgba(35,0,76,0.45); --accent: #7A00E6; --accent-light: rgba(122,0,230,0.7); --accent-bg: rgba(122,0,230,0.06); --danger: #DA3A16; --danger-bg: rgba(218,58,22,0.06); --success: #268500; --priority-high: #268500; --priority-medium: #007FAD; --priority-low: #DA3A16; --day-title-color: #7A00E6; --day-date-color: #23004C; --day-date-weight: 700; --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.02); --shadow-lg: 0 4px 16px rgba(0,0,0,0.06); --dock-bg: rgba(255,255,255,0.85); --track-bg: rgba(35,0,76,0.05); --badge-bg: rgba(35,0,76,0.04); --scrollbar-thumb: rgba(35,0,76,0.15); } :root[data-theme="dark"] { --bg: #000000; --surface: #161618; --surface-hover: #1E1E21; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --text: #F5F3F8; --text-secondary: rgba(245,243,248,0.65); --text-tertiary: rgba(245,243,248,0.45); --accent: #007FAD; --accent-light: rgba(0,127,173,0.75); --accent-bg: rgba(0,127,173,0.14); --danger: #DA3A16; --danger-bg: rgba(218,58,22,0.16); --success: #268500; --priority-high: #268500; --priority-medium: #007FAD; --priority-low: #DA3A16; --day-title-color: var(--text); --day-date-color: var(--text-tertiary); --day-date-weight: 500; --shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.16); --shadow-lg: 0 4px 20px rgba(0,0,0,0.35); --dock-bg: rgba(22,22,24,0.85); --track-bg: rgba(255,255,255,0.08); --badge-bg: rgba(255,255,255,0.06); --scrollbar-thumb: rgba(255,255,255,0.18); } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { height: 100%; overflow: hidden; } body { /* system-ui sits second so Android skins that ship their own UI face (Samsung One UI Sans, most notably) get it instead of falling all the way through to Roboto. -apple-system stays first: older Safari only understands that spelling. Both resolve to the same face everywhere else, so this is a no-op outside Samsung. */ font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); height: 100%; line-height: 1.5; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } ::-webkit-scrollbar { width: 4px; height: 4px; } /* Wide enough to actually grab with a pointer; the phone keeps the hairline. */ @media (hover: hover) and (pointer: fine) { ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { border: 3px solid transparent; background-clip: content-box; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: content-box; } /* The strips that deliberately hide their bar keep hiding it. */ .dock::-webkit-scrollbar, .attachments::-webkit-scrollbar, .time-scroll::-webkit-scrollbar, .filter-chip-row::-webkit-scrollbar { display: none; } } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; } .cb:focus-visible { outline-offset: 3px; } .app { height: 100%; display: flex; flex-direction: column; max-width: 1080px; margin: 0 auto; position: relative; } .app-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 20px; flex-shrink: 0; } .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; } .brand-icon { width: 32px; height: 32px; border-radius: 10px; background: var(--text); color: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .brand-text h1 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } .icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); flex-shrink: 0; } .icon-btn:active { background: var(--bg); color: var(--text); } .main-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: var(--scroll-pad); padding-bottom: calc(100px + env(safe-area-inset-bottom)); } .dock { position: fixed; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 100; display: none; gap: 2px; background: var(--dock-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* See :root[data-low-end] below — the blur is dropped on constrained devices, where a fixed, always-composited blur is the classic mid-range Android scroll-jank source. */ border: 1px solid var(--border); border-radius: 24px; padding: 4px; box-shadow: var(--shadow-lg); /* 5 tabs at the old fixed 72px/button width could overflow off-screen on narrow phones (no wrap here, deliberately — a horizontally scrolling bottom dock reads worse than a slightly narrower one). The cap plus overflow-x is a defensive fallback if a 6th tab ever gets added and the width math below isn't revisited. */ max-width: calc(100vw - 16px); overflow-x: auto; scrollbar-width: none; } .dock::-webkit-scrollbar { display: none; } .dock-btn { width: 64px; height: 44px; border-radius: 18px; border: none; background: transparent; color: var(--text-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-family: inherit; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; transition: var(--transition); flex-shrink: 0; position: relative; overflow: hidden; } .dock-btn .dock-icon { display: flex; align-items: center; justify-content: center; } .dock-btn.on { background: var(--text); color: var(--surface); } .fab { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); right: 20px; z-index: 90; width: 52px; height: 52px; border-radius: 50%; background: var(--text); color: var(--surface); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-lg); overflow: hidden; /* Bold spring for appear/disappear and press feedback — box-shadow stays on the flat --transition since a shadow overshooting looks like a rendering glitch, not intentional motion. */ transition: transform var(--transition-settle), opacity 200ms ease, box-shadow var(--transition); } .fab.hidden { transform: scale(0) translateY(20px); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .fab { transition: opacity 200ms ease, box-shadow var(--transition); } } /* ══ Desktop layout: bottom dock becomes a side rail ════════════════════ Measured before writing this: at 1920 the app was a 1080px column with 840px of empty margin (44% of the window), and navigation was a 338px phone tab bar floating at the bottom centre — a thumb-zone affordance in the least reachable place for a mouse. Deliberately CSS-only, inside one media query. The markup and the JS are untouched, so the phone layout is unchanged BY CONSTRUCTION rather than by testing every rule twice. The dock is un-fixed so it can join a grid; everything else is geometry. grid-template-columns is `auto` for the rail on purpose: the dock's display is toggled inline by openTrip/closeTrip, so on Home it is display:none and an `auto` track collapses to zero — no empty 200px gutter on the trip list. A fixed track would have left one. */ @media (min-width: 1024px) { /* Desktop type scale: every font-size is in rem, so raising the root raises the whole hierarchy proportionally. 16px stays the phone base (also what keeps iOS from zooming focused inputs); desktop viewing distance earns roughly one step up, large desktops two. */ html { font-size: 17px; } .app { max-width: 1400px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .app-header { grid-column: 1 / -1; } .dock { position: static; grid-column: 1; grid-row: 2; left: auto; bottom: auto; transform: none; max-width: none; width: 200px; height: 100%; overflow-x: visible; flex-direction: column; align-items: stretch; gap: 2px; border-radius: 0; border: none; border-right: 1px solid var(--border); background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 10px; box-shadow: none; } /* Rail items read as list rows, not phone tab stacks: icon beside label, left-aligned, full width. */ .dock-btn { width: 100%; height: 40px; border-radius: var(--radius-md); flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 12px; font-size: 0.8125rem; letter-spacing: 0; } /* The dock no longer floats over the content, so the reserved strip goes. */ .main-scroll { grid-column: 2; grid-row: 2; padding-bottom: 24px; } /* Anchor the FAB to the content column rather than the screen corner — .app is already position:relative, so absolute puts it at the bottom right of the app, not 400px away at the edge of a wide monitor. */ .fab { position: absolute; bottom: 24px; right: 24px; } } /* ══ Desktop pointer affordances ════════════════════════════════════════ This app grew phone-first, so nearly every control had :active (touch feedback) and no :hover — a mouse user got no response at all until the click landed. Measured before writing this: only 4 of 21 primary interactive controls had a hover rule. Everything here is behind (hover: hover) and (pointer: fine) so a touch device never gets sticky hover left behind after a tap — the classic phone bug from adding desktop hover carelessly. Focus-visible is defined alongside, deliberately: keyboard users get no hover cue at all, so the focus ring has to be at least as loud as the hover state (§8). It's one shared token so the two can't drift. */ :root { --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); --scroll-pad: 20px; --card-pad: 16px; /* How far a sticky top:0 sits below #mainScroll's visual top edge. MEASURED, not derived: it is the same 32px for a header nested in a card (.day-header) and one that isn't (.tag-group-header), so it is a property of the scrollport, not of either element's padding - which is why it isn't computed from --scroll-pad/--card-pad. Negating it pins headers flush. An e2e test asserts that flushness, so if this ever drifts the suite fails instead of the UI quietly sagging. */ --sticky-top: -32px; } @media (hover: hover) and (pointer: fine) { /* Buttons and pills lift slightly toward the pointer. */ .btn:hover, .btn-sm:hover, .media-btn:hover, .chip:hover { border-color: var(--text-tertiary); background: var(--surface-hover, var(--bg)); } /* Icon-only controls fill their circle rather than moving, so a dense icon cluster doesn't jitter as the pointer crosses it. */ .icon-btn:hover, .del-btn:hover, .modal-close:hover, .pri-btn:hover, .qty-btn:hover { background: var(--bg); color: var(--text); } .cb:hover { border-color: var(--text-secondary); } /* Rows and cards get a background wash — the standard desktop list cue. */ .item:hover, .tool-row:hover, .activity:hover, .expense:hover { background: var(--bg); } .trip-card:hover, .note:hover { box-shadow: var(--shadow); border-color: var(--border-strong); } .dock-btn:hover:not(.on) { background: var(--bg); color: var(--text); } .fab:hover { box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-bg); } } /* Focus ring — applies on every device, keyboard users exist everywhere. */ .btn:focus-visible, .btn-sm:focus-visible, .chip:focus-visible, .icon-btn:focus-visible, .del-btn:focus-visible, .modal-close:focus-visible, .media-btn:focus-visible, .dock-btn:focus-visible, .add-item-btn:focus-visible, .fab:focus-visible, .pri-btn:focus-visible, .qty-btn:focus-visible, .tool-row:focus-visible, .trip-card:focus-visible, .day-header:focus-visible, .activity:focus-visible, .day-menu-item:focus-visible, .card-menu-item:focus-visible { outline: none; box-shadow: var(--focus-ring); /* A ring drawn outside the element must not be clipped by an ancestor that hides overflow (list rows do). */ position: relative; z-index: 1; } /* No transition declaration is added here on purpose. These controls already carry `transition: var(--transition)`, which is a shorthand with no property list, so it animates ALL animatable properties — box-shadow and border-color included. Re-declaring transition here would have silently replaced .trip-card's own `transform 150ms var(--ease-settle)` spring from the mobile pass, trading a working animation for one this block didn't need. */ /* ── Low-end device fallback (§5) ────────────────────────────────────── Set by applyLowEndFallback() in app-core.js from hardwareConcurrency / deviceMemory. The dock is fixed and composited on every scroll frame, so its blur is the most expensive always-on effect in the app; on a constrained phone a solid fill keeps the surface readable and the scroll cheap. The colour is the same token at full opacity, so the dock still reads as the same component rather than suddenly looking unstyled. This is the guarded, evidence-free-safe half of the backdrop-filter question: capable phones keep the blur, constrained ones never pay for it, and no measurement was needed to justify either. Whether a MID-range phone should also drop it stays a device-check (see the findings doc). */ :root[data-low-end] .dock { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); } :root[data-low-end] .modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--card-pad); transition: box-shadow var(--transition); overflow: hidden; } .card:hover { box-shadow: var(--shadow); } .progress-card { padding: 12px; margin-bottom: 12px; } .progress-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px; } .progress-label { font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; } .progress-value { font-size: 1.5rem; font-weight: 600; color: var(--text); letter-spacing: -0.02em; line-height: 1; } .progress-track { height: 3px; background: var(--track-bg); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; background: var(--text); border-radius: 2px; transition: width 400ms var(--transition); } .chip { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: var(--transition); font-family: inherit; position: relative; overflow: hidden; } .chip:active { border-color: var(--text-tertiary); color: var(--text); } .chip.on { background: var(--text); color: var(--surface); border-color: var(--text); } .grid { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 640px) { .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } } .cat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .cat-title { font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 8px; } .cat-badge { font-size: 0.6875rem; font-weight: 700; color: var(--text-tertiary); background: var(--badge-bg); padding: 2px 6px; border-radius: 12px; } .del-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .del-btn:active { background: var(--danger-bg); color: var(--danger); } /* Dedicated drag-to-reorder handle for Activity/Commute cards — same size/shape as the adjacent move/delete .del-btn icons so the three sit as one consistent icon cluster, but with touch-action:none set permanently (not toggled at drag time) so the browser never has a chance to treat drag movement as a native scroll for a touch that started here — that's what a long-press-anywhere-on-card gesture couldn't guarantee, since touch-action there had to stay pan-y for normal list scrolling. */ .drag-grip { touch-action: none; cursor: grab; } .drag-grip:active { cursor: grabbing; } /* gap 5 -> 8: the extra 3px per gap is spent entirely on the hit-area expanders below (which widen to match), buying ~3px per control without shrinking any control's visual size. Five gaps costs the item text 15px of a 338px row — the cheapest horizontal room available, short of removing a control, which is the density decision recorded in the findings doc. */ .item { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); min-height: 48px; position: relative; overflow: hidden; } /* ── Tap-target expanders ─────────────────────────────────────────────── The in-row controls are 18–24px visually, well under the 44px floor. These transparent overlays grow the HIT area without touching the visuals or the layout — the same technique .ticket-checkbox already uses, so this follows an existing convention rather than inventing one. Sized from measured geometry, not from the guideline number: list rows are >=48px tall (min-height on .item), so 44px of height fits inside one row without spilling into the row above or below. Horizontally the controls sit in an 8px gap (widened from 5 for exactly this purpose), so each side grows by 3px — go wider and neighbouring overlays overlap, which makes the WRONG control absorb the tap and is worse than a small target. Reaching a true 44x44 on every one of these would mean fewer controls per row or taller rows, i.e. undoing the deliberate compact-list pass. That's a density decision, not a CSS one — see the findings doc. */ .cb, .pri-btn, .qty-btn, .del-btn { position: relative; } .cb::after, .pri-btn::after, .qty-btn::after, .item .del-btn::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% + 6px); height: 44px; } /* The gift row's delete is pinned to the row corner (position:absolute), so a 44px-tall overlay would reach down over the row's text. Keep its expansion to the button's own box plus the same 2px-a-side allowance. */ /* Pinned to the row corner, so a centred 44px overlay would reach above the row and be clipped. 40px is what actually fits below the 4px pin inside a 48px row. */ .gift-del-btn::after { height: 40px; } /* The add-Activity/add-Commute row has no neighbours above or below it, so its buttons can take the full 44px with no overlap risk at all. */ .add-item-btn { position: relative; } .add-item-btn::after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 44px; } @media (pointer: fine) { /* Mouse users don't need the expansion and it can swallow hover on neighbouring controls, so drop it where a precise pointer exists. */ .cb::after, .pri-btn::after, .qty-btn::after, .item .del-btn::after { display: none; } } .item:last-child { border-bottom: none; } .item.done { opacity: 0.45; } .item.done .it-text { text-decoration: line-through; color: var(--text-tertiary); } .cb { width: 18px; height: 18px; min-width: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); background: transparent; } .cb.on { background: var(--text); border-color: var(--text); } .cb svg { color: var(--surface); width: 10px; height: 10px; display: none; } .cb.on svg { display: block; } .it-text { flex: 1; font-size: 0.875rem; color: var(--text); padding: 3px; border-radius: 5px; border: 1px solid transparent; outline: none; transition: var(--transition); } .it-text:focus { border-color: var(--border-strong); background: var(--surface-hover); } .cat-name-text { border-radius: 5px; border: 1px solid transparent; outline: none; padding: 1px 3px; margin: -1px -3px; transition: var(--transition); } .cat-name-text:focus { border-color: var(--border-strong); background: var(--surface-hover); } .add-form { display: grid; grid-template-columns: 1fr 40px; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); min-width: 0; } .add-form > * { min-width: 0; overflow: hidden; } .add-form > .btn-sm { overflow: visible; } .add-form .btn-icon { width: 40px; height: 40px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; } .time-inp { width: 100%; min-width: 0; padding: 8px 2px; text-align: center; -webkit-appearance: none; appearance: none; font-size: 0.8125rem; } /* 16px, not 15: iOS Safari zooms the viewport when a text field under 16px takes focus and never zooms back out. .field inputs are already 16px; this is the inline add-item form, which was the odd one out. */ .inp { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; color: var(--text); font-family: inherit; font-size: 1rem; outline: none; transition: var(--transition); min-width: 0; width: 100%; } .inp:focus { border-color: var(--border-strong); } .btn-sm { padding: 8px 12px; border-radius: var(--radius-md); border: none; background: var(--text); color: var(--surface); font-weight: 600; font-size: 0.75rem; cursor: pointer; font-family: inherit; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; text-align: center; } .slot { border: 1.5px dashed var(--border); background: transparent; display: flex; align-items: center; justify-content: center; min-height: 56px; cursor: pointer; color: var(--text-tertiary); gap: 6px; font-weight: 500; font-size: 0.8125rem; border-radius: var(--radius-lg); transition: var(--transition); } .slot:active { border-color: var(--text-tertiary); color: var(--text-secondary); background: var(--surface-hover); } .slot svg { width: 16px; height: 16px; } .empty { text-align: center; padding: 60px 20px; color: var(--text-tertiary); } .empty svg { width: 40px; height: 40px; stroke-width: 1; opacity: 0.3; margin-bottom: 12px; } .empty p { font-size: 0.9375rem; font-weight: 500; } .notes-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; } .filter-bar { display: flex; align-items: center; gap: 6px; flex: 1; } .filter-bar select { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 6px 28px 6px 10px; border-radius: 20px; font-size: 0.75rem; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23A0A0A0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; min-height: 32px; } .tag-group { margin-bottom: 14px; } .tag-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 4px; } .tag-group-line { flex: 1; height: 1px; background: var(--border); } .tag-group-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary); padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); flex-shrink: 0; } .tag-group-count { font-size: 0.6875rem; color: var(--text-tertiary); font-weight: 700; } .note { position: relative; padding: 0; overflow: hidden; } .note.selectable { cursor: pointer; } .note.selected { box-shadow: inset 0 0 0 2px var(--accent); } .note-head .cb { flex-shrink: 0; } .note-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; } .note-body { padding: 12px; } .note-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-width: 0; } .note-title { font-size: 0.875rem; font-weight: 600; word-break: break-word; overflow-wrap: break-word; line-height: 1.3; flex: 1; min-width: 0; overflow: hidden; } .note-tag { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-secondary); background: var(--bg); flex-shrink: 0; white-space: nowrap; } .note-content { color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; margin-bottom: 8px; } /* Backlink from a note to the activity/commute it was created from — shown both on the note card in the Notes tab and inside the note edit modal (see openNoteModal/renderNotes). */ .note-backlink { display: flex; align-items: center; gap: 5px; font-size: 0.6875rem; font-weight: 600; color: var(--accent); cursor: pointer; margin-bottom: 8px; } .note-backlink svg { width: 12px; height: 12px; flex-shrink: 0; } .note-backlink:hover { text-decoration: underline; } /* Linked-notes list inside the Activity/Commute edit modal. */ .linked-note-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 6px; cursor: pointer; transition: var(--transition); } .linked-note-row:hover { background: var(--bg); } .linked-note-row svg { flex-shrink: 0; color: var(--text-tertiary); } .linked-note-title { font-size: 0.8125rem; font-weight: 600; } .linked-note-snippet { font-size: 0.6875rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .note-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.6875rem; color: var(--text-tertiary); font-weight: 500; padding-top: 8px; border-top: 1px solid var(--border); } .note-actions { display: flex; gap: 2px; } .note-actions .icon-btn { width: 24px; height: 24px; border: none; } .attachments { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .attachments::-webkit-scrollbar { display: none; } .att { position: relative; flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; } .att img, .att video { width: 100%; height: 100%; object-fit: cover; } .att .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.1); } .att .play svg { color: white; width: 16px; height: 16px; } .data-actions { display: flex; justify-content: center; gap: 8px; padding: 24px 0 16px; border-top: 1px solid var(--border); margin-top: 24px; flex-wrap: wrap; } .data-actions button { background: transparent; border: none; color: var(--text-tertiary); font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; padding: 6px 10px; border-radius: var(--radius-md); transition: var(--transition); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .data-actions button:active { color: var(--text); background: var(--surface-hover); } @media (max-width: 480px) { .data-actions { gap: 4px; padding: 16px 0 12px; } .data-actions button { font-size: 0.6875rem; padding: 5px 8px; } .data-actions button svg { width: 14px; height: 14px; } } .modal { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 200ms; } .modal.open { opacity: 1; pointer-events: auto; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.15); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Bottom sheet — the primary modal pattern in One UI, so this is the motion that matters most. Slides up from the bottom and settles with --ease-settle: it decelerates into place rather than springing past and bouncing back, which is the single clearest motion tell between One UI and iOS. The 0.94→1 scale is kept but now reads as the sheet easing to full size, not overshooting it. Large radius on the TOP corners only (--radius-xl, 30px) stays visible throughout the travel, which is the other half of the One UI sheet signature. One transition serves both directions rather than giving each its own curve, which the CSS transition model makes fragile to get right. */ .modal-panel { position: relative; margin-top: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(100%) scale(0.94); transition: transform 420ms var(--ease-settle); } .modal.open .modal-panel { transform: translateY(0) scale(1); } /* Bottom-sheet drag handle. One UI's sheets are grabbable, so the bar is a real affordance, not decoration — see setupSheetDrag in app-core.js. It is injected once per panel by applyDialogSemantics rather than written into all 28 modals, so any modal added later gets it free. Hidden at >=768px, where .modal-panel is a centred dialog rather than a sheet and there is nothing to drag down. */ .sheet-handle { flex-shrink: 0; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 999px; background: var(--border-strong); position: relative; cursor: grab; /* We own the vertical gesture here, so the browser must not also try to scroll the panel while the sheet is being dragged. */ touch-action: none; } .sheet-handle:active { cursor: grabbing; } /* The grab target is far larger than the 40x4 bar it shows. */ .sheet-handle::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 160px; height: 32px; } /* While a finger is on the sheet it must track that finger exactly, so the settle transition is suspended for the duration of the drag. */ .modal-panel.dragging { transition: none; } @media (min-width: 768px) { .sheet-handle { display: none; } } @media (prefers-reduced-motion: reduce) { .modal-panel { transition: transform 200ms ease; } } @media (min-width: 768px) { /* A dialog, not a sheet: centered in both axes, and it appears with a quick settle instead of the phone's 420ms slide-from-the-thumb. */ .modal-panel { margin: auto; border-radius: var(--radius-lg); max-height: 85vh; width: 100%; max-width: 520px; transform: translateY(10px) scale(0.98); transition: transform 160ms var(--ease-settle); } .modal.open .modal-panel { transform: translateY(0) scale(1); } } @media (min-width: 1024px) { /* The dense editors earn a wider canvas than list-y pickers do. */ #activityModal .modal-panel, #commuteModal .modal-panel { max-width: 680px; } #noteModal .modal-panel { max-width: 620px; } } .modal-header { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .modal-header h3 { font-size: 1.0625rem; font-weight: 600; } .modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .modal-close:active { background: var(--border); color: var(--text); } .modal-body { padding: 16px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; } .modal-footer { padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--border); flex-shrink: 0; } .field { margin-bottom: 15px; } .field label { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .field input, .field textarea, .field select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; color: var(--text); font-family: inherit; font-size: 1rem; outline: none; transition: var(--transition); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--text-secondary); } .field textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .field-hint { font-size: 0.71875rem; color: var(--text-tertiary); margin-top: 6px; line-height: 1.4; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; margin-bottom: 0; } @media (max-width: 480px) { .field-row { flex-direction: column; gap: 20px; } .field-row .field { margin-bottom: 0; } } /* Groups Time + Date + Timezone for one endpoint (start or end), or Mode + Route, into a single visual unit instead of scattering related fields across separate rows of the form. Tinted background (not just a border) so the bundling actually reads at a glance — see app.onActivity/CommuteStart*Change(). */ .time-group { background: var(--accent-bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 14px; margin-bottom: 15px; } .time-group-label { font-size: 0.6875rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } .time-group-label .hint { font-weight: 400; color: var(--text-tertiary); text-transform: none; letter-spacing: normal; } .time-group .field-row { margin-bottom: 15px; } .time-group > .field:last-child { margin-bottom: 0; } .time-group .field input, .time-group .field select, .time-group .field textarea { background: var(--surface); } /* Edit Activity popup: Title → Start → End → Location → Description → Notes, top to bottom, each gap a single deliberate value shared by the element above and below it (no stacked/double margins). Kept deliberately tight — Start/End/Location need to be visible together without scrolling — so the popup gets its own (scoped) container padding too, instead of the roomier defaults every other modal uses. */ #activityModal .modal-header { padding: 12px 16px 0; } #activityModal .modal-body { padding: 10px 16px; } .activity-title-field { margin-top: 0; margin-bottom: 9px; } .activity-time-module { padding: 10px 12px; margin-bottom: 9px; } .activity-time-module.end-module { margin-bottom: 9px; } .activity-desc-field { margin-bottom: 10px; } .activity-desc-field textarea { min-height: 70px; } .activity-notes-field { margin-bottom: 14px; } .notes-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; } .notes-section-header label { margin-bottom: 0; } .btn-add-note-inline { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1; color: var(--accent); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; flex-shrink: 0; } .btn-add-note-inline:hover { background: var(--accent-bg); } #activityModal .modal-footer { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); } @media (max-width: 480px) { #activityModal .modal-header { padding: 10px 12px 0; } #activityModal .modal-body { padding: 8px 12px; } .activity-desc-field textarea { min-height: 54px; } #activityModal .modal-footer { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); flex-direction: column-reverse; gap: 8px; } #activityModal .modal-footer .btn { width: 100%; } } /* Multi-step commute editor — one .time-group per step, collapsed to a single summary line except the step being worked on, to cut down scroll height on commutes with several steps. Padding/spacing here is intentionally tighter than the base .time-group/.field defaults above (still used as-is by the Activity modal) — everything is scoped under .commute-step-editor so it doesn't leak there. */ .commute-step-editor { padding: 10px 12px; margin-bottom: 8px; } .commute-step-editor .field { margin-bottom: 8px; } .commute-step-editor .time-group-label { margin-bottom: 0; } .commute-step-header { cursor: pointer; border-radius: var(--radius-sm); margin: -4px -6px; padding: 4px 6px; } .commute-step-header:hover { background: var(--surface); } .commute-step-header .step-title { flex-shrink: 0; } .step-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--text-tertiary); } .step-actions { display: flex; align-items: center; gap: 2px; text-transform: none; letter-spacing: normal; flex-shrink: 0; } .step-action-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .step-action-btn:hover, .step-action-btn:active { background: var(--surface); color: var(--text); } .step-action-remove:hover, .step-action-remove:active { color: var(--danger); background: var(--danger-bg); } .step-chevron { flex-shrink: 0; display: flex; color: var(--text-tertiary); transition: transform 150ms; margin-left: 2px; } .commute-step-body { margin-top: 10px; } /* Location input + its "preview in Maps" action share one row instead of the preview link sitting on its own line below — the Activity modal reuses this same icon-only row now too, for parity with the Commute step editor. */ .location-input-row { display: flex; align-items: center; gap: 6px; } .location-input-row input { flex: 1; min-width: 0; } /* enhanceTripLocationField wraps the input in a .tz-combobox div (so its suggestion dropdown can be positioned relative to it) — that div, not the input directly, is now the flex child here, so it needs the flex:1 the rule above gave the input, or the row collapses back to the maps-preview button's own width. */ .location-input-row .tz-combobox { flex: 1; min-width: 0; } .maps-preview-icon-btn { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .maps-preview-icon-btn:hover { color: var(--text); border-color: var(--border-strong); } /* Time / Date / Timezone compacted into one row instead of three stacked ones — the single biggest source of scroll height per step. */ /* Unequal thirds rather than a plain repeat(3) — "HH:MM" needs far less room than a native date input (which reserves space for its own calendar-icon affordance) or a city+abbreviation timezone label, and equal columns were clipping the date field's last digit at narrow widths. */ .step-time-grid { display: grid; grid-template-columns: 0.8fr 1.15fr 1.25fr; gap: 6px; } .step-time-grid .field { margin-bottom: 0; min-width: 0; } .step-time-grid .field label { font-size: 0.6875rem; margin-bottom: 3px; } /* 16px despite this grid being deliberately tight elsewhere (labels stay 9px): these are text-entry fields, and anything under 16px makes iOS Safari zoom the viewport on focus and never zoom back — which is far worse on a phone than a couple of tight columns. Measured at 360px: the time and date fields fit at 16px with zero clipping and the grid, panel and page all stay overflow-free. The timezone combobox does truncate its label a bit sooner (it already truncated at 13px — it's a search field, and the resolved zone is shown on the card anyway). */ .step-time-grid input, .step-time-grid select, .step-time-grid .tz-search-input { font-size: 1rem; padding: 8px 6px; } .step-time-grid input[type="date"] { padding-right: 2px; } /* Same Time/Date/Timezone trio as .step-time-grid, but for the Activity modal's Start/End modules — roomier (this popup only ever shows two of these, never a scrollable list of them). On mobile this goes to a 2-up layout (Time+Date, then Timezone spanning both) rather than a full one-per-row stack — three full rows per module was tall enough on its own to force scrolling past Location, which the compact- spacing spec explicitly asks to avoid. */ .activity-time-grid { display: grid; grid-template-columns: 0.8fr 1.15fr 1.25fr; gap: 9px; } .activity-time-grid .field { margin-bottom: 0; min-width: 0; } .activity-time-module .time-group-label { margin-bottom: 6px; } @media (max-width: 480px) { .activity-time-grid { grid-template-columns: 1fr 1fr; gap: 7px; } .activity-time-grid .field:nth-child(3) { grid-column: 1 / -1; } .activity-time-grid .field label { margin-bottom: 3px; } .activity-time-grid input, .activity-time-grid select, .activity-time-grid .tz-search-input { padding: 8px; } } /* Location field inside the (now-compact) Edit Activity popup — same input, just less vertical breathing room than the default .field gives every other text field, and a tighter gap to Description. */ .activity-location-field { margin-bottom: 11px; } .activity-location-field input { padding-top: 6px; padding-bottom: 6px; } .commute-add-step-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-bottom: 15px; color: var(--accent); border-color: var(--border-strong); } /* Google Places autocomplete progressively replaces the plain location input when a GOOGLE_MAPS_API_KEY is configured (see app-core.js) — the original input is kept in the DOM as a hidden data store. */ .place-autocomplete-el { width: 100%; /* Places UI Kit theming — these are the documented custom properties the shadow-DOM widget reads (they inherit through the shadow boundary), mapped onto our existing tokens so this tracks light/dark/auto automatically instead of needing its own copies. */ --gmp-mat-color-surface: var(--surface); --gmp-mat-color-on-surface: var(--text); --gmp-mat-color-on-surface-variant: var(--text-secondary); --gmp-mat-color-primary: var(--accent); --gmp-mat-color-outline-decorative: var(--border-strong); --gmp-mat-color-secondary-container: var(--accent-bg); --gmp-mat-color-on-secondary-container: var(--accent); --gmp-mat-color-neutral-container: var(--surface-hover); --gmp-mat-color-on-neutral-container: var(--text); --gmp-mat-font-family: inherit; color-scheme: light dark; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } /* "Auto" (no [data-theme]) leaves color-scheme: light dark above, so the widget's own OS-driven fallback still matches system theme; manual light/dark picks pin it the same way the rest of the app is pinned. */ :root[data-theme="light"] .place-autocomplete-el { color-scheme: light; } :root[data-theme="dark"] .place-autocomplete-el { color-scheme: dark; } /* Searchable timezone combobox — layers type-to-filter over the real