/* ═══════════════════════════════════════════════ DESIGN TOKENS ═══════════════════════════════════════════════ */ :root { /* Colour — "newsprint & ink" comic palette, light mode. Surface toned down from pure white to cut glare on a long scrolling session. ink-3 and accent both nudged very slightly darker (same hue, not a redesign) to stay comfortably above the AA contrast floor on the dimmer background. Everything else — borders, weights, dividers — is untouched. */ --surface: #F0F0EE; --surface-rgb: 240,240,238; --surface-alt: #E7E7E4; --surface-hdr: #DDDDD9; --border: #1B2430; --border-dim: #78838C; --ink: #1B2430; --ink-2: #545D66; --ink-3: #5A646D; --accent: #C94545; --accent-rgb: 201,69,69; --danger: #7A2222; --ink-rgb: 27,36,48; --ink-tint-rgb: 27,36,48; /* Always-dark fill for elements paired with fixed-white icons/text (checked checkbox, unread pill) — kept separate from --ink because --ink itself flips to near-white in dark mode. */ --fill: #1B2430; /* Tinted surfaces (edit tools, tips, inputs, confirms) */ --tint-input: #FCFCF9; --tint-confirm: #E1E1DD; --on-accent: #F5F8FF; --divider: #DCE0E6; --divider-2: #C2C8D1; /* Typography */ --font: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif; --font-display:'SF Pro Display', -apple-system, 'Helvetica Neue', sans-serif; --font-mono: 'SF Mono', ui-monospace, Menlo, monospace; /* Radii / layout */ --radius-lg: 24px; --radius-md: 16px; --radius-sm: 12px; --radius-pill: 999px; --page-pad: 16px; } /* Dark mode — Overcast-style orange-on-black. Applied via a data-theme attribute on (set by the appearance toggle in the drawer) rather than only the media query, so System/Light/Dark can be chosen explicitly. Every color in the app routes through these tokens, so nothing else needs to change to support this. Note: --on-accent is DARK text here, not light — orange is too light a background for white text to pass contrast, same reason Overcast itself uses black text on its orange UI rather than white. */ :root[data-theme="dark"] { --surface: #1C1F20; --surface-rgb: 28,31,32; --surface-alt: #24272A; --surface-hdr: #2A2D2E; --border: #E8EAED; --border-dim: #5C6066; --ink: #F0F0F0; --ink-2: #A8ACB2; --ink-3: #7C8086; --accent: #6B9BD9; --accent-rgb: 107,155,217; --danger: #CC3B3B; --ink-rgb: 0,0,0; --ink-tint-rgb: 240,240,240; --fill: #5A5E64; --tint-input: #17191C; --tint-confirm: #23262A; --on-accent: #12151A; --divider: #26292D; --divider-2: #3A3E44; } /* "Things" color theme — swaps the accent for a clean iOS blue, inspired by the Things app. Applied via [data-color-theme="things"] on the root, independent of light/dark mode. Accent pixel-sampled from the "+" button in a screenshot of the real app. */ :root[data-color-theme="things"] { --accent: #3D7BFD; --accent-rgb: 61,123,253; } :root[data-theme="dark"][data-color-theme="things"] { --accent: #4E81EB; --accent-rgb: 78,129,235; --on-accent: #FFFFFF; --surface: #2E3138; --surface-rgb: 46,49,56; --surface-alt: #262930; --surface-hdr: #1C1E23; --divider: #3A3D44; --divider-2: #4A4E56; } /* "Overcast" color theme — teal accent (the one hue not already covered by Things' blue or Reeder's orange), with a true near-black dark background instead of the warm charcoal used elsewhere. */ :root[data-color-theme="overcast"] { --accent: #5AAEC5; --accent-rgb: 90,174,197; --on-accent: #052024; } :root[data-theme="dark"][data-color-theme="overcast"] { --accent: #5AAEC5; --accent-rgb: 90,174,197; --on-accent: #052024; --surface: #000000; --surface-rgb: 0,0,0; --surface-alt: #1C1C1E; --surface-hdr: #2C2C2E; --divider: #262628; --divider-2: #363638; } /* "Obsidian" color theme — deep graphite + violet, a technical/ power-user personality distinct from the warm hues elsewhere. */ :root[data-color-theme="obsidian"] { --accent: #7C3AED; --accent-rgb: 124,58,237; } :root[data-theme="dark"][data-color-theme="obsidian"] { --accent: #A78BFA; --accent-rgb: 167,139,250; --on-accent: #14101F; --surface: #111014; --surface-rgb: 17,16,20; --surface-alt: #1A1820; --surface-hdr: #24212C; --divider: #2A2730; --divider-2: #3D3948; } /* "Ulysses" color theme — warm ivory paper + forest green, a writing/reading-app personality. */ :root[data-color-theme="ulysses"] { --accent: #2F855A; --accent-rgb: 47,133,90; --surface: #FBF8EF; --surface-rgb: 251,248,239; --surface-alt: #F0EAD8; --surface-hdr: #E6DEC5; } :root[data-theme="dark"][data-color-theme="ulysses"] { --accent: #68D391; --accent-rgb: 104,211,145; --on-accent: #0E140F; --surface: #14160F; --surface-rgb: 20,22,15; --surface-alt: #1B1E18; --surface-hdr: #262A21; --divider: #2E3226; --divider-2: #3F4536; } /* "Reeder" color theme — warm amber accent on neutral light-gray surfaces (not warm paper — kept deliberately neutral per feedback that the paper tone read as "gray" more than "parchment" anyway). */ :root[data-color-theme="reeder"] { --accent: #B45309; --accent-rgb: 180,83,9; --surface: #EDECEA; --surface-rgb: 237,236,234; --surface-alt: #E3E2DE; --surface-hdr: #DAD9D5; } :root[data-theme="dark"][data-color-theme="reeder"] { --accent: #F59E0B; --accent-rgb: 245,158,11; --on-accent: #1A1400; --surface: #18181A; --surface-rgb: 24,24,26; --surface-alt: #232325; --surface-hdr: #2C2C2E; --divider: #2C2C2E; --divider-2: #3B3B3D; } /* "Notion" color theme — warm-neutral paper surfaces with a single blue accent, sourced from Notion's own brand page (black/white primary, #E3E2DE warm-gray secondary surface, #2EAADC as "the sole accent, used exclusively for interactive elements"). Dark-mode surface is an approximation — Notion's brand materials only publish the light palette in detail. */ :root[data-color-theme="notion"] { --accent: #2EAADC; --accent-rgb: 46,170,220; --on-accent: #0A2733; --surface: #F7F6F3; --surface-rgb: 247,246,243; --surface-alt: #E3E2DE; --surface-hdr: #D6D4CE; } :root[data-theme="dark"][data-color-theme="notion"] { --accent: #35B4E0; --accent-rgb: 53,180,224; --on-accent: #0A2733; --surface: #191919; --surface-rgb: 25,25,25; --surface-alt: #232323; --surface-hdr: #2C2C2C; --divider: #2E2E2E; --divider-2: #3D3D3D; } /* "Letterboxd" color theme — the green from Letterboxd's three-dot logo (#00E054, alongside their orange #FF8000 and blue #40BCF4; green is the one most associated with the brand). Dark surface is an approximation of their actual dark near-black site background. */ :root[data-color-theme="letterboxd"] { --accent: #00C853; --accent-rgb: 0,200,83; --on-accent: #052210; --surface-alt: #E3F5EA; } :root[data-theme="dark"][data-color-theme="letterboxd"] { --accent: #00E054; --accent-rgb: 0,224,84; --on-accent: #052210; --surface: #14181C; --surface-rgb: 20,24,28; --surface-alt: #1E2328; --surface-hdr: #272D33; --divider: #262C31; --divider-2: #333A41; } /* "Drafts" color theme — Drafts is fully user-themeable with no single official brand color, but its own default theme consistently uses a dark brick-red/maroon for markdown headers in both light and dark mode (pixel-sampled from Drafts' own App Store screenshots: darkest ink pixels clustered around #37120E). Lightened here to a usable UI accent while keeping that hue. */ :root[data-color-theme="drafts"] { --accent: #8B3A2B; --accent-rgb: 139,58,43; } :root[data-theme="dark"][data-color-theme="drafts"] { --accent: #C9614A; --accent-rgb: 201,97,74; --on-accent: #FFFFFF; --surface: #000000; --surface-rgb: 0,0,0; --surface-alt: #1A1A1A; --surface-hdr: #242424; --divider: #242424; --divider-2: #333333; } /* "CARROT" color theme — CARROT Weather's actual UI is dynamic (accent/background change with weather conditions, plus a long user-selectable color list), so there's no single fixed in-app brand color. This uses the golden yellow pixel-sampled from CARROT's own App Store marketing page (#F8EE50) as the one consistent visual signature, paired with true-black surfaces to match the app's bold, high-contrast personality. */ :root[data-color-theme="carrot"] { --accent: #E8B923; --accent-rgb: 232,185,35; --on-accent: #1A1400; } :root[data-theme="dark"][data-color-theme="carrot"] { --accent: #F8EE50; --accent-rgb: 248,238,80; --on-accent: #1A1400; --surface: #000000; --surface-rgb: 0,0,0; --surface-alt: #1A1A1A; --divider: #242424; --divider-2: #333333; --surface-hdr: #242424; } /* ═══════════════════════════════════════════════ RESET & BASE ═══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overscroll-behavior-y: contain; } body { background: var(--surface); color: var(--ink); font-family: var(--font); font-size: 17px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } button { cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, select, textarea { font-family: inherit; } /* ═══════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════ */ .device { background: var(--surface); width: 100%; min-height: 100dvh; display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; } /* ═══════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════ */ .header-fixed { position: sticky; top: 0; z-index: 20; padding: calc(env(safe-area-inset-top,0px) + 10px) var(--page-pad) 10px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); box-shadow: 0 1px 0 rgba(var(--ink-rgb),.08); } .file-box { background: none; } .hdr-inner { padding: 0 0 4px; } /* Progress bar */ .prog-bar { height: 18px; background: var(--surface-alt); border: 2px solid var(--border-dim); border-radius: var(--radius-pill); overflow: hidden; position: relative; } .prog-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); transition: width .4s ease; } .prog-count { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; } /* Backup / utility row */ .backup-row { display: flex; justify-content: flex-end; align-items: baseline; margin-top: 12px; } /* ═══════════════════════════════════════════════ TOOLBAR ═══════════════════════════════════════════════ */ .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .search-wrap { flex: 1 1 120px; position: relative; } .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .search-input { width: 100%; height: 46px; font-size: 17px; font-weight: 400; color: var(--ink); background: var(--surface); border: 2px solid var(--border-dim); border-radius: var(--radius-pill); padding: 0 14px 0 40px; outline: none; transition: box-shadow .12s ease, border-color .12s ease; } .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; } .search-input::placeholder { color: var(--ink); font-weight: 600; } .search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .filter-btn { flex: none; height: 46px; padding: 0 16px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--ink-2); background: transparent; border: none; border-radius: var(--radius-pill); position: relative; } .filter-btn.active { color: var(--on-accent); background: var(--accent); } .filter-btn.danger { color: var(--danger); } .backup-dot { display: none; position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); } .backup-dot.show { display: block; } #editBtn.editing { color: var(--on-accent); background: var(--accent); } #toggleAllBtn { width: 104px; padding: 0; } /* ═══════════════════════════════════════════════ CHARACTER DRAWER TRIGGER ═══════════════════════════════════════════════ */ .char-bar { display: flex; align-items: center; gap: 10px; padding: 2px 0; } .char-btn { text-align: left; justify-content: flex-start; flex: 1; display: flex; align-items: center; gap: 14px; background: none; border: none; padding: 4px; min-height: 64px; transition: opacity .08s ease; } .char-btn:active { opacity: .55; } .char-btn-avatar { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-md); object-fit: cover; border: 2px solid var(--border-dim); box-shadow: 0 2px 6px rgba(var(--ink-rgb),.15); } .char-btn-avatar-fail { width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-md); border: 2px dashed var(--accent); background: var(--tint-confirm, var(--surface-alt)); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--accent); } .char-btn-name { text-align: left; font-family: var(--font-display); font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; line-height: 1.08; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .char-btn-caret { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); transform: rotate(90deg); transition: transform .2s ease; } .char-btn-caret.open { transform: rotate(-90deg); } .add-char-btn { width: 44px; height: 44px; flex-shrink: 0; background: none; border: none; font-size: 30px; font-weight: 300; color: var(--accent); display: flex; align-items: center; justify-content: center; transition: opacity .08s ease; } .add-char-btn:active { opacity: .55; } /* ═══════════════════════════════════════════════ CONTENT LIST ═══════════════════════════════════════════════ */ #content { background: var(--surface); flex: 1; padding: 8px var(--page-pad) calc(env(safe-area-inset-bottom,0px) + 24px); display: flex; flex-direction: column; gap: 10px; } /* Era cards */ .era-card { border: 2px solid var(--border-dim); border-left: 5px solid var(--accent); background: var(--surface); overflow: hidden; } /* Establishes the containing block a sticky header releases against — see the sticky-header comment below for why this exists. */ .era-group { position: relative; } .era-hdr { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; user-select: none; -webkit-user-select: none; min-height: 72px; } .era-hdr:active { background: var(--surface-hdr); } .era-hdr-label { cursor: default; min-height: auto; padding: 12px 16px; opacity: .8; } .era-hdr-label:active { background: none; } .era-caret { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-2); transition: transform .2s ease; } .era-caret.open { transform: rotate(90deg); } .era-name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.2px; line-height: 1.2; } .event-badge { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 9px; border-radius: var(--radius-pill); margin-bottom: 6px; width: fit-content; } .era-card.event-card { background: var(--tint-confirm); } .era-card.event-card .era-body { background: var(--tint-confirm); } .era-years { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); margin-top: 3px; } .era-count { font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; flex-shrink: 0; } .era-count.full { color: var(--accent); font-weight: 600; } .era-markall { flex-shrink: 0; width: 30px; height: 30px; border: 1.5px solid var(--border-dim); background: var(--surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .era-markall.full { background: var(--fill); border-color: var(--fill); } .era-markall:active { opacity: .7; } .era-body { } /* A header reconnects visually to the body fragment right after it, so it reads as one seamless card — applies equally to regular eras and to EVENT crossovers, since both render as an era-hdr-card + era-body-frag pair. A gap only appears between genuinely separate cards (e.g. an event sitting between two chunks of a era's regular entries). */ .era-hdr-card + .era-body-frag { margin-top: -10px; border-top: none; } .era-hdr-card + .era-body-frag .era-body { border-top: 2px solid var(--border-dim); } /* Sticky section headers — docks below the fixed app header while you scroll through that era's entries, then releases in one of two ways: (1) it hits the bottom of its own .era-group wrapper, i.e. you've scrolled past that section's own content — this is why each header and its body share a wrapper with position:relative, rather than being flat siblings of #content; a sticky element can never stick past its own containing block's edge; or (2) it gets pushed out early by the next sticky header, if that next section's content starts before the current one's boundary is reached. Scoped to :has(+ .era-body-frag) — i.e. only headers actually followed by a body. A collapsed era renders no body at all, so making a run of those sticky too made them pile up and overlap with nothing to scroll past between them. --header-h is measured and kept in sync by a ResizeObserver at startup. */ .era-hdr-card:has(+ .era-body-frag) { border-bottom: none; position: sticky; top: var(--header-h, 0px); z-index: 10; background: rgba(var(--surface-rgb), .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 10px -6px rgba(var(--ink-rgb),.2); } /* Completed era styling. Deliberately NOT opacity on the header — a semi-transparent element that's both z-indexed above its body (for the sticky behavior) AND intentionally overlapping it by -10px (for the seamless connected-card look) lets that overlapped sliver of body content show through, ghosting into the header as you scroll. Solid color muting has no such issue, so the header and body use different techniques to reach a similar "de-emphasized" look. */ .era-card.done { border-left-color: var(--border-dim); } .era-body-frag.done { opacity: .8; } .era-hdr-card.done .era-name, .era-hdr-card.done .era-years, .era-hdr-card.done .era-caret { color: var(--ink-2); } /* Edit tools */ .edit-tools { display: flex; gap: 8px; padding: 10px 16px 10px 33px; background: var(--surface-alt); border-bottom: 1px solid var(--border-dim); flex-wrap: wrap; } .file-actions-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 4px 0; } .mini-btn { font-size: 13px; font-weight: 700; border: none; background: transparent; color: var(--accent); border-radius: var(--radius-pill); padding: 8px 15px; } .mini-btn:active { background: rgba(var(--ink-tint-rgb), .08); } .mini-btn.danger { background: transparent; color: var(--danger); } /* Entry rows */ .entry-row { display: flex; align-items: flex-start; border-bottom: none; position: relative; overflow: hidden; } .entry-row:last-child { border-bottom: none; } .entry-row.done { opacity: .55; } .entry-row-inner { position: relative; z-index: 1; background: var(--surface); display: flex; align-items: flex-start; gap: 16px; padding: 16px; min-height: 76px; width: 100%; transition: transform .2s cubic-bezier(.4,0,.2,1); } /* Subtle zebra striping to break up the flow on long lists — tasteful enough to help scanning without looking like a spreadsheet. Explicitly re-overridden below for event cards, which already have their own tinted background and shouldn't stripe on top of it. */ .entry-row:nth-child(even) .entry-row-inner { background: var(--surface-alt); } .era-card.event-card .entry-row-inner { background: transparent; } /* Swipe-to-reveal layer (mark read/unread on swipe right, delete on swipe left). Sits behind .entry-row-inner (z-index 0) and is only reachable once that layer has been dragged out of the way. */ .row-swipe-bg { position: absolute; inset: 0; z-index: 0; display: flex; align-items: stretch; justify-content: space-between; } .row-swipe-mark, .row-swipe-del { display: flex; align-items: center; justify-content: center; border: none; color: var(--on-accent); font-size: 15px; font-weight: 700; letter-spacing: .3px; } .row-swipe-mark { width: 96px; flex-shrink: 0; background: var(--accent); } .row-swipe-mark.unread { background: var(--fill); } .row-swipe-mark:active { opacity: .85; } .row-swipe-del { flex-shrink: 0; width: 84px; background: var(--accent); } .row-swipe-del:active { opacity: .85; } /* Checkbox */ .cb-box { flex-shrink: 0; width: 44px; height: 44px; min-width: 44px; margin-top: 2px; border: 2px solid var(--border-dim); background: var(--surface); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s, border-color .12s; } .entry-row.done .cb-box { background: var(--fill); border-color: var(--fill); } .cb-box svg { transform: scale(0); transition: transform .15s cubic-bezier(.34,1.56,.64,1); } .entry-row.done .cb-box svg { transform: scale(1); } /* Entry content */ .entry-main { flex: 1; min-width: 0; } .entry-title { font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.35; } .entry-row.done .entry-title { text-decoration: line-through; color: var(--ink-2); } .entry-year { font-size: 17px; font-weight: 400; color: var(--ink-2); } .entry-flag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .2px; color: var(--accent); background: var(--tint-confirm); border-radius: var(--radius-sm); padding: 1px 7px; margin-left: 4px; vertical-align: middle; white-space: nowrap; } .entry-issues { font-size: 15px; font-weight: 500; color: var(--accent); margin-top: 4px; } .entry-note { font-size: 16px; font-weight: 400; color: var(--ink-2); line-height: 1.6; margin-top: 6px; } .search-hl { background: var(--accent); color: var(--on-accent); border-radius: 3px; padding: 0 2px; font-weight: 700; } .entry-row.done .entry-note { color: var(--ink-3); } /* Action buttons */ .entry-actions { display: flex; flex-direction: column; gap: 8px; } .act-btn { width: 48px; height: 48px; border: none; background: transparent; border-radius: 50%; color: var(--ink-2); font-size: 18px; display: flex; align-items: center; justify-content: center; } .act-btn:active { background: rgba(var(--ink-tint-rgb), .08); } .act-btn.copied { background: var(--accent); color: var(--on-accent); } .act-btn.del { color: var(--on-accent); background: var(--accent); } /* Edit controls */ .edit-ctl { display: flex; flex-direction: column; gap: 6px; } .edit-ctl .act-btn { width: 44px; height: 44px; font-size: 15px; } /* Tip / note rows */ .tip-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surface-alt); border-bottom: none; } .tip-content { flex: 1; min-width: 0; } .tip-label { display: block; width: fit-content; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 9px; border-radius: var(--radius-pill); margin-bottom: 6px; } .tip-body { font-size: 15px; font-weight: 400; color: var(--ink-2); line-height: 1.6; } /* Empty / footer */ .empty-msg { font-size: 15px; color: var(--ink-3); text-align: center; padding: 40px 20px; } /* ═══════════════════════════════════════════════ CHARACTER DRAWER ═══════════════════════════════════════════════ */ .drawer-veil { position: fixed; inset: 0; background: rgba(var(--ink-rgb),.5); z-index: 40; display: none; } .drawer-veil.show { display: block; } /* ═══════════════════════════════════════════════ CUSTOM MODAL (replaces native prompt/confirm, which are blocked in sandboxed preview frames) ═══════════════════════════════════════════════ */ .modal-veil { position: fixed; inset: 0; background: rgba(var(--ink-rgb),.5); z-index: 60; display: none; } .modal-veil.show { display: block; } .modal-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); width: min(340px, 88vw); background: var(--surface); border: none; border-radius: var(--radius-lg); z-index: 65; padding: 22px 20px 20px; box-shadow: 0 14px 44px rgba(var(--ink-rgb),.3); opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .modal-box.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } .modal-title { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 14px; } .modal-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .modal-input { font-size: 16px; padding: 11px 12px; border: 2px solid var(--border-dim); border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--ink); outline: none; width: 100%; } .modal-input:focus { border-color: var(--border); } .modal-msg { font-size: 15px; color: var(--ink-2); line-height: 1.5; } .modal-btns { display: flex; gap: 10px; } .modal-btn { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: .5px; border: 2px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); padding: 11px 10px; } .modal-btn.ghost { background: transparent; color: var(--ink-2); border-color: transparent; } .drawer { position: fixed; left: 0; top: 0; bottom: 0; width: min(360px, 90vw); background: var(--surface); border-right: none; z-index: 45; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .26s cubic-bezier(.4,0,.2,1); overflow: hidden; box-shadow: 8px 0 36px rgba(var(--ink-rgb),.22); } .drawer.open { transform: translateX(0); } .drawer-list { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; margin: 20px 20px 20px; border: 1.5px solid var(--divider-2); border-radius: var(--radius-lg); } .drawer-list::-webkit-scrollbar { width: 4px; } .drawer-list::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 2px; } /* Stats link at top of drawer */ .stats-link { display: flex; width: auto; align-items: center; justify-content: center; gap: 8px; margin: calc(env(safe-area-inset-top,0px) + 16px) 20px 0; padding: 13px; background: transparent; border: none; border-radius: var(--radius-md); font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .stats-link:active { background: rgba(var(--ink-tint-rgb), .08); } .stats-link-arrow { font-size: 16px; color: var(--accent); } /* Drawer character items */ .drawer-item { display: block; position: relative; padding: 20px 20px 18px; border-bottom: none; cursor: pointer; user-select: none; -webkit-user-select: none; background: transparent; transition: background .12s; overflow: hidden; } .drawer-item:last-child { border-bottom: none; } .drawer-item:active { background: var(--surface-hdr); } .drawer-item-inner { display: flex; align-items: center; gap: 16px; } .drawer-item-avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-sm); object-fit: cover; border: 2px solid var(--border-dim); } .drawer-item-avatar-fail { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-sm); border: 2px dashed var(--accent); background: var(--tint-confirm, var(--surface-alt)); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--accent); } .drawer-item-body { flex: 1; min-width: 0; } .drawer-item-name { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; text-align: left; } .drawer-item-bar-wrap { display: block; margin-top: 12px; height: 12px; background: var(--divider); border: 2px solid var(--border-dim); border-radius: var(--radius-pill); overflow: hidden; } .drawer-item-bar-fill { height: 100%; background: var(--accent); transition: width .4s ease; } .drawer-footer { flex-shrink: 0; padding: 14px 20px calc(env(safe-area-inset-bottom,0px) + 16px); background: transparent; border-top: none; } .drawer-add-btn { display: block; width: 100%; padding: 15px; background: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius-md); font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--on-accent); } .drawer-add-btn:active { opacity: .85; } /* Appearance toggle (System / Light / Dark) */ .drawer-appearance { margin-bottom: 14px; } .drawer-appearance-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; } .appearance-seg { display: flex; background: rgba(var(--ink-tint-rgb), .06); border-radius: var(--radius-md); padding: 3px; gap: 3px; } .appearance-seg-btn { flex: 1; padding: 9px 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--ink-2); background: transparent; border: none; border-radius: calc(var(--radius-md) - 4px); } .appearance-seg-btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); } .appearance-seg-btn:active { opacity: .85; } /* Theme picker — vertical list, scales to any number of options (the old horizontal segmented row only worked for 3-4). */ .theme-list { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: rgba(var(--ink-tint-rgb), .04); } .theme-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; text-align: left; font-size: 15px; font-weight: 600; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--divider-2); } .theme-row:last-child { border-bottom: none; } .theme-row:active { background: rgba(var(--ink-tint-rgb), .06); } .theme-swatch { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(var(--ink-tint-rgb),.15) inset; } .theme-check { margin-left: auto; color: var(--accent); font-weight: 800; opacity: 0; } .theme-row.active .theme-check { opacity: 1; } /* Storage-unavailable warning (Private Browsing, disabled storage, full quota) */ .storage-warning { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--tint-confirm); border: 2px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; } .storage-warning-x { flex-shrink: 0; width: 28px; height: 28px; background: none; border: none; color: var(--accent); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* ═══════════════════════════════════════════════ STATS MODAL ═══════════════════════════════════════════════ */ .stats-modal { position: fixed; inset: 0; z-index: 60; background: var(--surface); display: none; flex-direction: column; } .stats-modal.show { display: flex; } .stats-hdr { flex-shrink: 0; padding: calc(env(safe-area-inset-top,0px) + 16px) 20px 16px; background: var(--surface); border-bottom: 3px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; } .stats-hdr::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(var(--ink-tint-rgb),.08) 1px, transparent 1.2px) 0 0 / 18px 18px; } .stats-hdr-label { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; display: block; position: relative; z-index: 1; } .stats-hdr-title { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--ink); position: relative; z-index: 1; } .stats-close { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--on-accent); background: var(--accent); border: 2px solid var(--accent); border-radius: var(--radius-md); padding: 9px 14px; position: relative; z-index: 1; } .stats-close:active { opacity: .85; } .stats-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 24px 20px calc(env(safe-area-inset-bottom,0px) + 32px); display: flex; flex-direction: column; gap: 28px; } .stats-section-hdr { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3); padding-bottom: 10px; border-bottom: 2px solid var(--border-dim); margin-bottom: 14px; } /* Year in Review */ .wrapped-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-lg); padding: 16px 20px; border: 2px solid var(--accent); cursor: pointer; } .wrapped-entry-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(245,248,255,.75); } .wrapped-entry-title { font-family: var(--font-display); font-size: 20px; font-weight: 800; margin-top: 2px; } .wrapped-entry-arrow { font-size: 22px; flex-shrink: 0; } .wrapped-back { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-block; margin-bottom: 14px; } .wrapped-yearnav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; } .wrapped-yearnav button { background: var(--surface-alt); border: 1.5px solid var(--divider-2); border-radius: var(--radius-pill); width: 32px; height: 32px; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; } .wrapped-yearnav-label { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--ink); min-width: 70px; text-align: center; } .wrapped-card { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; position: relative; overflow: hidden; margin-bottom: 16px; } .wrapped-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(245,248,255,.08) 1px, transparent 1.2px) 0 0 / 18px 18px; } .wrapped-hero-num { font-family: var(--font-display); font-size: 64px; font-weight: 900; line-height: 1; position: relative; z-index: 1; } .wrapped-hero-label { font-size: 14px; font-weight: 600; color: rgba(245,248,255,.75); margin-top: 8px; position: relative; z-index: 1; } .wrapped-empty { font-size: 14px; color: rgba(245,248,255,.75); position: relative; z-index: 1; } .wrapped-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .wrapped-stat { background: var(--surface); border: 2px solid var(--border-dim); border-radius: var(--radius-md); padding: 14px 14px 12px; } .wrapped-stat-val { font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--ink); line-height: 1.1; margin-top: 5px; } .wrapped-stat-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); } .wrapped-stat-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; } .wrapped-bookend { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .wrapped-bookend-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 10px 14px; background: var(--surface-alt); border-radius: var(--radius-sm); } .wrapped-bookend-label { font-weight: 700; color: var(--ink-2); flex-shrink: 0; } .wrapped-bookend-title { color: var(--ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Timeline / decade stats */ .decade-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; position: relative; overflow: hidden; } .decade-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(var(--ink-tint-rgb),.05) 1px, transparent 1.2px) 0 0 / 16px 16px; } .decade-list { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; } .decade-row-hdr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; } .decade-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); } .decade-stat { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; } .decade-count { font-size: 12px; color: var(--ink-3); } .decade-pct { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--accent); padding: 2px 8px; border-radius: var(--radius-pill); } .decade-bar { height: 14px; background: var(--divider); border: 2px solid var(--border-dim); border-radius: var(--radius-pill); overflow: hidden; } .decade-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .5s ease; } /* Activity chart */ .cal-head-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; } .cal-head-row span { font-size: 10px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; text-align: center; } .cal-week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; } .cal-cell { aspect-ratio: 0.85; border-radius: 6px; padding: 5px 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; background: var(--surface); border: 1px solid var(--divider-2); } .cal-cell.month-alt { background: var(--surface-alt); } .cal-date { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; } .cal-date .cal-month { font-size: 8px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--accent); margin-right: 2px; } .cal-cell.outside { border-color: transparent; opacity: .4; } .cal-cell.outside .cal-date { color: var(--ink-3); } .cal-count { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1.4; color: var(--on-accent); background: var(--accent); padding: 1px 6px; border-radius: var(--radius-pill); } .cal-cell.today { box-shadow: 0 0 0 1.5px var(--ink); } /* Streak */ .streak-row { display: flex; gap: 12px; align-items: stretch; } .streak-box { flex: 1; background: var(--surface); border: 2px solid var(--border-dim); border-radius: var(--radius-md); padding: 14px 16px; text-align: center; display: flex; flex-direction: column; justify-content: center; } .streak-num { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--ink); line-height: 1; } .streak-unit { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; } .streak-box.active { border-color: var(--accent); border-width: 2.5px; flex: 1.4; } .streak-box.active .streak-num { color: var(--accent); font-size: 38px; } /* By-character breakdown */ .char-breakdown { display: flex; flex-direction: column; gap: 16px; } .char-row-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; gap: 10px; } .char-row-name { font-size: 18px; font-weight: 700; color: var(--ink); } .char-row-stat { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; } .char-row-count { font-size: 12px; color: var(--ink-3); } .char-row-pct { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--accent); padding: 2px 8px; border-radius: var(--radius-pill); } .char-row-bar { height: 15px; background: var(--divider); border: 2px solid var(--border-dim); border-radius: var(--radius-pill); overflow: hidden; } .char-row-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .5s ease; } /* Reset */ .stats-reset-btn { width: 100%; padding: 14px; background: transparent; border: none; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; letter-spacing: .5px; color: var(--danger); margin-top: 8px; transition: background .15s; } .stats-reset-btn:active { background: var(--tint-confirm); } .stats-reset-confirm { display: none; background: var(--tint-confirm); border: 2px solid var(--accent); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 8px; font-size: 15px; color: var(--ink); line-height: 1.5; } .stats-confirm-row { display: flex; gap: 10px; margin-top: 12px; } .stats-confirm-yes { flex: 1; padding: 11px; background: transparent; border: none; border-radius: var(--radius-md); color: var(--danger); font-size: 15px; font-weight: 700; letter-spacing: .5px; } .stats-confirm-no { flex: 1; padding: 11px; background: transparent; border: none; border-radius: var(--radius-md); color: var(--ink-2); font-size: 15px; font-weight: 600; } /* ═══════════════════════════════════════════════ ADD / IMPORT MODAL ═══════════════════════════════════════════════ */ .modal-veil { position: fixed; inset: 0; background: rgba(var(--ink-rgb),.5); z-index: 50; display: none; align-items: flex-start; justify-content: center; padding: 20px 12px; overflow-y: auto; } .modal-veil.show { display: flex; } .modal { width: 100%; max-width: 760px; border: none; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 20px 60px rgba(var(--ink-rgb), .3); margin: auto 0; overflow: hidden; position: relative; } .modal-hdr { display: flex; align-items: center; padding: 18px 56px 14px 16px; background: transparent; } .modal-hdr .mh-title { font-size: 21px; font-weight: 800; font-family: var(--font-display); flex: 1; } .modal-x { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 14px; font-weight: 700; border: none; border-radius: 50%; color: var(--on-accent); background: var(--accent); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; } .modal-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; } .modal-body > * { flex-shrink: 0; } .version-stamp { text-align: center; font-size: 12px; color: var(--ink-3); padding: 8px 0 4px; } /* Fullscreen modal variant — used for Settings, which is long and multi-section (more like a preferences screen than a single-task dialog). Own internal scroll region with a fixed header, and the header padding accounts for the device's safe area (status bar / notch) instead of assuming a fixed offset. */ .modal-veil.fullscreen { padding: 0; align-items: stretch; overflow: hidden; } .modal.fullscreen { width: 100%; max-width: none; margin: 0; border-radius: 0; display: flex; flex-direction: column; } .modal.fullscreen .modal-hdr { padding-top: calc(18px + env(safe-area-inset-top)); flex: none; } .modal.fullscreen .modal-x { top: calc(12px + env(safe-area-inset-top)); } .modal.fullscreen .modal-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom)); } .modal-section-hdr { font-size: 17px; font-weight: 800; color: var(--ink); padding-bottom: 8px; margin-top: 6px; border-bottom: 1px solid var(--divider-2); } .modal-section-hdr:first-child { margin-top: 0; } .modal-body p { font-size: 15px; line-height: 1.6; color: var(--ink-2); } .modal-body p b { color: var(--ink); } .modal-body textarea { width: 100%; min-height: 260px; font-size: 16px; line-height: 1.5; padding: 12px; border: 2px solid var(--border-dim); border-radius: var(--radius-sm); background: var(--tint-input); color: var(--ink); outline: none; resize: vertical; } .modal-body textarea:focus { border-color: var(--border); } .modal-btn-row { display: flex; gap: 10px; flex-wrap: wrap; } .big-btn { font-size: 17px; font-weight: 700; padding: 13px 22px; border: 2px solid var(--accent); border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); } .big-btn.ghost { background: transparent; color: var(--accent); border-color: transparent; } .big-btn.danger { background: transparent; border-color: transparent; color: var(--danger); } .big-btn:active { opacity: .85; } .fmt-hint { font-size: 13px; line-height: 1.7; background: var(--tint-input); border: 1.5px dashed var(--border-dim); border-radius: var(--radius-sm); padding: 12px; color: var(--ink-2); white-space: pre-wrap; } .import-err { font-size: 14px; color: var(--accent); display: none; } .warning-banner { display: none; position: relative; overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--surface-alt); padding: 10px 14px 10px 17px; border-radius: var(--radius-sm); } .warning-banner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--danger); } .update-target-select { width: 100%; font-size: 16px; padding: 10px 36px 10px 12px; border: 2px solid var(--border-dim); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); outline: none; margin-bottom: 8px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6A76' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* The arrow is baked into the SVG as a static color rather than a CSS token, since currentColor inside a background-image SVG doesn't reliably inherit from the host element across WebKit versions — so a second, dark-tuned SVG is swapped in instead of trusting that. */ :root[data-theme="dark"] .update-target-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239C9086' stroke-width='2' fill='none'/%3E%3C/svg%3E"); } .update-target-select:focus { border-color: var(--border); } /* ═══════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }