/*! Scribe UI — v1.9.4 * A single-file CSS design system for Scribe. * v1.9.4 (30 Sep 2026): refinements set 1 (RF2 segmented selected state, RF5/6 anchored menu, RF4 swipe-close * sheets, RF6 date tooltips, RF8 group sub-heads). * v1.9.3 (28 Sep 2026): the repo's ☰ rules (.bm-drawer-btn, .bm-drawer-bar) are folded in. The repo and * upstream now match; there are no outstanding repo additions. * v1.9.2 (28 Sep 2026): the phone header-hide rule is scoped to .bm-list-head (Trash and Import keep * their headers). The ☰ rules (.bm-drawer-btn, .bm-drawer-bar) are still in the repo's own block * until the repo sends them. * v1.9.1 (28 Sep 2026): the repo's round-3 bookmarks layout helpers are folded in (row tags, tag box, * manage-tags rows, restore counts, select-all head, phone header + drawer). .input-mono turns * ligatures off, matching .mono. * v1.9.0 (27 Sep 2026) folds the repo's additions back upstream. It starts from v1.8.3 and adds: * - Calendar: .cal-drow cancelled/declined/busy, button.cal-period, the status-banner host, * --cal-days month columns, the .cal-bar selection ring, List view column resize, rounds 15-16, * and the /calendar/event/{id} page layout. * - Bookmarks rounds 1-2 (as merged in the repo, including .bm-imports-row[data-undone] and * --radius-pill on the [Root] badge), and round 3: tags, the mixed checkbox, the overflow tooltip, * the fetching row, and [Root] staying semibold while it's the open folder. * Two deliberate choices, now upstream too: * 1. Fonts are self-hosted (the @font-face block below, files in assets/fonts/). Pages that can't * serve the files may link Google Fonts instead; the family names are the same. * 2. The phone rule that stacks .settings-row sits after the Settings base rules and only applies to * rows with a select or segmented control. * * A single-file CSS design system for Scribe. * * Build: concatenation of styles.css and everything it imports. * Pair with scribe.js (~9 kB) for combobox, drawer, toast, tabs, the off-canvas * module sidebar, the sidebar resize handle, branch collapse, and * theme/text-size/density persistence. * Icons: Font Awesome (vendored in the app at * /includes/fontawesome-free-7.0.0-web/css/all.min.css — not bundled here). * * Themes: (also honours prefers-color-scheme) * Text size: * Density: (or on any subtree) * * Shell: .app > .topbar-global + .app-row(.sidebar + .app-main) + .mobile-bar * The top bar owns WHICH module. The sidebar belongs to the OPEN module, * and is drag-resizable on desktop. Search is scoped to the open module. * * Mobile: every archive module is phone-capable. Single-pane switching lives at the * 64rem line (.pane-group[data-mobile-view]), folder navigation on a phone is * the off-canvas sidebar tree, and on-device availability is .offline-* — * distinct from .sync-status, which reports the link to a source account. * See ui_kits/scribe/mobile.html for the seven phone screens. * * Breakpoints: phone <=47.99rem · tablet-portrait 48-63.99 · tablet-landscape 64-79.99 * · desktop >=80rem. Plus a (pointer: coarse) pass for 44px hit targets. * * Dialogs: .modal/.drawer/.command/.lightbox set author-origin display, so a * dialog:not([open]) guard is REQUIRED and included near the top of the overlays * section. Do not remove it — without it every closed dialog renders inline in the * page flow. Add .fake to render one inline deliberately (specimens, galleries). * * This REPLACES the app's existing design-system.css — it is not additive. See * integration.md for the class-by-class migration list. * * Classes are unprefixed. Behaviour hooks are data-sc-* attributes. */ /* ==== tokens/fonts.css ==== */ /* Webfonts. Bricolage Grotesque — display/headings. Warm, slightly irregular grotesque; the "not boring" in "clean and modern but not boring". Figtree — UI and body. Friendly humanist sans, holds up at 13px. JetBrains Mono — metadata, EXIF, IDs, code. Self-hosted from /assets/fonts/, vendored the same way as Font Awesome and TinyMCE, rather than pulled from the Google Fonts CDN. */ @font-face { font-family: "Bricolage Grotesque"; src: url("assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Figtree"; src: url("assets/fonts/Figtree-Variable.woff2") format("woff2-variations"); font-weight: 300 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Variable.woff2") format("woff2-variations"); font-weight: 100 800; font-display: swap; } /* ==== tokens/colors.css ==== */ /* COLOR Base ramps are raw pigment. Never reference a ramp step directly in product code — use the semantic aliases below, which flip with the theme. Surfaces are warm: a paper stock, not a screen. Every neutral carries a small amount of chroma at hue ~80 (light) / ~62 (dark) so white never goes clinical. The accent is a vivid violet used at full strength only on small areas (buttons, focus rings, active states) and heavily desaturated for large fills. */ :root { /* Violet — the accent. 500 is #6D4AFF. */ --violet-50: oklch(0.972 0.016 286); --violet-100: oklch(0.938 0.036 286); --violet-200: oklch(0.880 0.070 285); --violet-300: oklch(0.800 0.112 284); --violet-400: oklch(0.680 0.180 283); --violet-500: oklch(0.556 0.243 282); --violet-600: oklch(0.494 0.232 282); --violet-700: oklch(0.424 0.198 282); --violet-800: oklch(0.348 0.155 283); --violet-900: oklch(0.274 0.110 284); /* Warm neutrals — the paper. */ --sand-0: oklch(0.995 0.003 85); --sand-25: oklch(0.985 0.005 84); --sand-50: oklch(0.972 0.008 83); --sand-100: oklch(0.950 0.010 82); --sand-200: oklch(0.908 0.011 82); --sand-300: oklch(0.858 0.013 80); --sand-400: oklch(0.735 0.013 77); --sand-500: oklch(0.618 0.013 72); --sand-600: oklch(0.498 0.014 68); --sand-700: oklch(0.392 0.014 65); --sand-800: oklch(0.288 0.013 62); --sand-850: oklch(0.246 0.012 62); --sand-900: oklch(0.205 0.011 60); --sand-950: oklch(0.162 0.010 58); /* Semantic hues. Matched lightness/chroma so badges sit level beside each other. */ --green-100: oklch(0.940 0.042 158); --green-500: oklch(0.552 0.122 160); --green-600: oklch(0.482 0.112 161); --amber-100: oklch(0.952 0.050 86); --amber-500: oklch(0.712 0.145 74); --amber-600: oklch(0.618 0.140 68); --red-100: oklch(0.944 0.032 26); --red-500: oklch(0.560 0.188 25); --red-600: oklch(0.492 0.180 25); --blue-100: oklch(0.944 0.032 242); --blue-500: oklch(0.572 0.134 243); --blue-600: oklch(0.500 0.130 245); } /* ---------- Light (default) ---------- */ :root, [data-theme="light"] { color-scheme: light; --surface-page: var(--sand-50); --surface-raised: var(--sand-0); --surface-sunken: var(--sand-100); --surface-inset: var(--sand-25); --surface-hover: oklch(0.556 0.243 282 / 0.055); --surface-active: oklch(0.556 0.243 282 / 0.100); --surface-selected:oklch(0.556 0.243 282 / 0.085); --surface-overlay: oklch(0.288 0.013 62 / 0.42); --surface-inverse: var(--sand-850); --text-strong: var(--sand-850); --text-body: var(--sand-800); --text-muted: var(--sand-600); --text-subtle: var(--sand-500); --text-on-accent: oklch(0.995 0.003 285); --text-on-inverse: var(--sand-50); --text-link: var(--violet-600); --text-link-hover: var(--violet-700); --border-subtle: var(--sand-200); --border-default: var(--sand-300); --border-strong: var(--sand-400); --border-inverse: oklch(0.995 0.003 85 / 0.18); --accent: var(--violet-500); --accent-hover: var(--violet-600); --accent-active: var(--violet-700); --accent-quiet: var(--violet-50); --accent-quiet-hover: var(--violet-100); --accent-border: var(--violet-200); --accent-text: var(--violet-700); --success: var(--green-600); --success-quiet: var(--green-100); --warning: var(--amber-600); --warning-quiet: var(--amber-100); --danger: var(--red-600); --danger-quiet: var(--red-100); --info: var(--blue-600); --info-quiet: var(--blue-100); --focus-ring: oklch(0.556 0.243 282 / 0.38); /* Shadows are warm and soft — paper lifting off paper, never a hard drop. */ --shadow-hairline: 0 0 0 1px oklch(0.392 0.014 65 / 0.07); --shadow-xs: 0 1px 2px oklch(0.392 0.014 65 / 0.06); --shadow-sm: 0 1px 2px oklch(0.392 0.014 65 / 0.05), 0 2px 6px oklch(0.392 0.014 65 / 0.05); --shadow-md: 0 2px 4px oklch(0.392 0.014 65 / 0.04), 0 6px 16px oklch(0.392 0.014 65 / 0.07); --shadow-lg: 0 4px 8px oklch(0.392 0.014 65 / 0.04), 0 16px 36px oklch(0.392 0.014 65 / 0.10); --shadow-xl: 0 8px 16px oklch(0.392 0.014 65 / 0.05), 0 32px 64px oklch(0.392 0.014 65 / 0.14); --shadow-inset: inset 0 1px 2px oklch(0.392 0.014 65 / 0.06); } /* ---------- Dark ---------- */ [data-theme="dark"] { color-scheme: dark; --surface-page: var(--sand-950); --surface-raised: var(--sand-900); --surface-sunken: oklch(0.138 0.009 58); --surface-inset: var(--sand-850); --surface-hover: oklch(0.800 0.112 284 / 0.100); --surface-active: oklch(0.800 0.112 284 / 0.160); --surface-selected:oklch(0.800 0.112 284 / 0.140); --surface-overlay: oklch(0.120 0.008 58 / 0.66); --surface-inverse: var(--sand-50); --text-strong: oklch(0.972 0.006 85); --text-body: oklch(0.880 0.008 83); --text-muted: oklch(0.702 0.010 80); --text-subtle: oklch(0.588 0.011 76); --text-on-accent: oklch(0.995 0.003 285); --text-on-inverse: var(--sand-850); --text-link: var(--violet-300); --text-link-hover: var(--violet-200); --border-subtle: oklch(0.288 0.013 62); --border-default: oklch(0.348 0.013 62); --border-strong: oklch(0.435 0.014 64); --border-inverse: oklch(0.162 0.010 58 / 0.18); --accent: var(--violet-500); --accent-hover: var(--violet-400); --accent-active: var(--violet-300); --accent-quiet: oklch(0.556 0.243 282 / 0.18); --accent-quiet-hover: oklch(0.556 0.243 282 / 0.26); --accent-border: oklch(0.556 0.243 282 / 0.40); --accent-text: var(--violet-300); --success: oklch(0.740 0.120 160); --success-quiet: oklch(0.552 0.122 160 / 0.20); --warning: oklch(0.820 0.130 80); --warning-quiet: oklch(0.712 0.145 74 / 0.20); --danger: oklch(0.720 0.150 26); --danger-quiet: oklch(0.560 0.188 25 / 0.22); --info: oklch(0.760 0.105 243); --info-quiet: oklch(0.572 0.134 243 / 0.22); --focus-ring: oklch(0.800 0.112 284 / 0.48); --shadow-hairline: 0 0 0 1px oklch(0.995 0.003 85 / 0.06); --shadow-xs: 0 1px 2px oklch(0.100 0.008 58 / 0.40); --shadow-sm: 0 1px 2px oklch(0.100 0.008 58 / 0.36), 0 2px 6px oklch(0.100 0.008 58 / 0.36); --shadow-md: 0 2px 4px oklch(0.100 0.008 58 / 0.34), 0 6px 16px oklch(0.100 0.008 58 / 0.44); --shadow-lg: 0 4px 8px oklch(0.100 0.008 58 / 0.34), 0 16px 36px oklch(0.100 0.008 58 / 0.52); --shadow-xl: 0 8px 16px oklch(0.100 0.008 58 / 0.36), 0 32px 64px oklch(0.100 0.008 58 / 0.60); --shadow-inset: inset 0 1px 2px oklch(0.100 0.008 58 / 0.36); } /* ---------- Sepia: long-form reading in the docs module ---------- */ [data-theme="sepia"] { color-scheme: light; --surface-page: oklch(0.948 0.022 78); --surface-raised: oklch(0.968 0.018 79); --surface-sunken: oklch(0.922 0.026 77); --surface-inset: oklch(0.958 0.020 78); --surface-hover: oklch(0.424 0.198 282 / 0.06); --surface-active: oklch(0.424 0.198 282 / 0.11); --surface-selected: oklch(0.424 0.198 282 / 0.09); --surface-overlay: oklch(0.288 0.020 62 / 0.42); --surface-inverse: oklch(0.262 0.020 62); --text-strong: oklch(0.262 0.026 60); --text-body: oklch(0.322 0.024 60); --text-muted: oklch(0.492 0.022 62); --text-subtle: oklch(0.588 0.020 64); --text-on-inverse: oklch(0.958 0.020 78); --border-subtle: oklch(0.878 0.026 76); --border-default: oklch(0.828 0.030 75); --border-strong: oklch(0.712 0.032 72); } /* Honour the OS when no explicit theme is set. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --surface-page: var(--sand-950); --surface-raised: var(--sand-900); --surface-sunken: oklch(0.138 0.009 58); --surface-inset: var(--sand-850); --surface-hover: oklch(0.800 0.112 284 / 0.100); --surface-active: oklch(0.800 0.112 284 / 0.160); --surface-selected: oklch(0.800 0.112 284 / 0.140); --surface-overlay: oklch(0.120 0.008 58 / 0.66); --surface-inverse: var(--sand-50); --text-strong: oklch(0.972 0.006 85); --text-body: oklch(0.880 0.008 83); --text-muted: oklch(0.702 0.010 80); --text-subtle: oklch(0.588 0.011 76); --text-on-inverse: var(--sand-850); --text-link: var(--violet-300); --text-link-hover: var(--violet-200); --border-subtle: oklch(0.288 0.013 62); --border-default: oklch(0.348 0.013 62); --border-strong: oklch(0.435 0.014 64); --border-inverse: oklch(0.162 0.010 58 / 0.18); --accent-hover: var(--violet-400); --accent-active: var(--violet-300); --accent-quiet: oklch(0.556 0.243 282 / 0.18); --accent-quiet-hover: oklch(0.556 0.243 282 / 0.26); --accent-border: oklch(0.556 0.243 282 / 0.40); --accent-text: var(--violet-300); --success: oklch(0.740 0.120 160); --success-quiet: oklch(0.552 0.122 160 / 0.20); --warning: oklch(0.820 0.130 80); --warning-quiet: oklch(0.712 0.145 74 / 0.20); --danger: oklch(0.720 0.150 26); --danger-quiet: oklch(0.560 0.188 25 / 0.22); --info: oklch(0.760 0.105 243); --info-quiet: oklch(0.572 0.134 243 / 0.22); --focus-ring: oklch(0.800 0.112 284 / 0.48); --shadow-hairline: 0 0 0 1px oklch(0.995 0.003 85 / 0.06); --shadow-xs: 0 1px 2px oklch(0.100 0.008 58 / 0.40); --shadow-sm: 0 1px 2px oklch(0.100 0.008 58 / 0.36), 0 2px 6px oklch(0.100 0.008 58 / 0.36); --shadow-md: 0 2px 4px oklch(0.100 0.008 58 / 0.34), 0 6px 16px oklch(0.100 0.008 58 / 0.44); --shadow-lg: 0 4px 8px oklch(0.100 0.008 58 / 0.34), 0 16px 36px oklch(0.100 0.008 58 / 0.52); --shadow-xl: 0 8px 16px oklch(0.100 0.008 58 / 0.36), 0 32px 64px oklch(0.100 0.008 58 / 0.60); --shadow-inset: inset 0 1px 2px oklch(0.100 0.008 58 / 0.36); } } /* ==== tokens/typography.css ==== */ /* TYPE Two sans families. No serifs anywhere in the product UI. Every size is expressed through --font-scale, so a reader can enlarge the whole interface without breaking layout: -> 112.5% -> 125% -> 140% or set --font-scale directly from a user preference. */ :root { --font-display: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif; --font-ui: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-scale: 1; --text-xs: calc(0.750rem * var(--font-scale)); /* 12 — timestamps, EXIF */ --text-sm: calc(0.8125rem * var(--font-scale)); /* 13 — labels, meta, table body */ --text-base: calc(0.9375rem * var(--font-scale)); /* 15 — UI default */ --text-md: calc(1.0625rem * var(--font-scale)); /* 17 — long-form reading */ --text-lg: calc(1.250rem * var(--font-scale)); /* 20 */ --text-xl: calc(1.500rem * var(--font-scale)); /* 24 */ --text-2xl: calc(1.875rem * var(--font-scale)); /* 30 */ --text-3xl: calc(2.375rem * var(--font-scale)); /* 38 */ --text-4xl: calc(3.000rem * var(--font-scale)); /* 48 */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.018em; /* display sizes only */ --tracking-snug: -0.008em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* eyebrow / all-caps labels */ --measure-prose: 68ch; /* docs body column */ --measure-narrow: 46ch; /* empty states, help text */ } [data-text-size="sm"] { --font-scale: 0.9375; } [data-text-size="md"] { --font-scale: 1; } [data-text-size="lg"] { --font-scale: 1.125; } [data-text-size="xl"] { --font-scale: 1.25; } [data-text-size="xxl"] { --font-scale: 1.4; } /* ==== tokens/spacing.css ==== */ /* SPACE One 4px-based scale for layout. Control padding also reads --density, so compact regions (mail lists, data tables, photo filter rails) tighten without a second set of classes:
-> 0.85x
-> 1.15x */ :root { --space-px: 1px; --space-0: 0; --space-0-5: 0.125rem; /* 2 */ --space-1: 0.25rem; /* 4 */ --space-1-5: 0.375rem; /* 6 */ --space-2: 0.5rem; /* 8 */ --space-2-5: 0.625rem; /* 10 */ --space-3: 0.75rem; /* 12 */ --space-3-5: 0.875rem; /* 14 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --density: 1; /* Control geometry — derived, so density and text scale both flow through. */ --control-height-sm: calc(1.75rem * var(--density) * var(--font-scale)); --control-height: calc(2.25rem * var(--density) * var(--font-scale)); --control-height-lg: calc(2.75rem * var(--density) * var(--font-scale)); --control-pad-x: calc(var(--space-3) * var(--density)); --control-pad-x-lg: calc(var(--space-4) * var(--density)); --row-pad-y: calc(var(--space-2-5) * var(--density)); --card-pad: calc(var(--space-5) * var(--density)); /* App chrome */ --sidebar-width: 15.5rem; --sidebar-width-collapsed: 3.5rem; --topbar-height: 3.5rem; --list-pane-width: 23rem; --meta-pane-width: 19rem; } [data-density="compact"] { --density: 0.85; } [data-density="balanced"] { --density: 1; } [data-density="roomy"] { --density: 1.15; } /* ==== tokens/shape.css ==== */ /* SHAPE Rounded but not soft-toy: 10px is the default corner. Nested corners step down one notch so an inner control never looks glued to its container. Pills are reserved for chips, filters and status — never for buttons, which would read as consumer-app. */ :root { --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; /* default: buttons, menu items */ --control-radius: var(--radius-sm); /* text fields, selects, textareas */ --radius-lg: 14px; /* cards, panels, popovers */ --radius-xl: 20px; /* modals, drawers, hero surfaces */ --radius-2xl: 28px; --radius-pill: 999px; --radius-circle: 50%; --border-width: 1px; --border-width-thick: 1.5px; --ring-width: 3px; --ring-offset: 1px; } /* ==== tokens/motion.css ==== */ /* MOTION Everything eases out. Nothing bounces, nothing springs, nothing snaps. Enter transitions carry a small amount of travel (4–8px) plus opacity; exits are faster than enters. */ :root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1); --duration-instant: 80ms; --duration-fast: 140ms; --duration-base: 200ms; --duration-slow: 320ms; --duration-slower: 480ms; --transition-control: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); --lift: translateY(-1px); --press: translateY(0.5px); } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; --lift: none; --press: none; } } @keyframes sc-fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes sc-rise-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } @keyframes sc-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.985) } to { opacity: 1; transform: none } } @keyframes sc-slide-right { from { transform: translateX(100%) } to { transform: none } } @keyframes sc-slide-left { from { transform: translateX(-100%) } to { transform: none } } @keyframes sc-slide-up { from { transform: translateY(100%) } to { transform: none } } @keyframes sc-spin { to { transform: rotate(360deg) } } @keyframes sc-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } } @keyframes sc-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.45 } } /* ==== css/base.css ==== */ /* BASE — reset, document defaults, typographic primitives. */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; tab-size: 2; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } } body { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--weight-regular); color: var(--text-body); background-color: var(--surface-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums lining-nums; text-wrap: pretty; min-height: 100vh; } img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } textarea { resize: vertical; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } fieldset { border: 0; padding: 0; } legend { padding: 0; } hr { border: 0; border-top: var(--border-width) solid var(--border-subtle); } ::placeholder { color: var(--text-subtle); opacity: 1; } ::selection { background: var(--accent-quiet); color: var(--text-strong); } :where(:focus-visible) { outline: var(--border-width-thick) solid var(--accent); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); color: var(--text-strong); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } h1, .h1 { font-size: var(--text-3xl); } h2, .h2 { font-size: var(--text-2xl); } h3, .h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-snug); } h4, .h4 { font-size: var(--text-lg); letter-spacing: var(--tracking-snug); } h5, .h5 { font-size: var(--text-md); letter-spacing: var(--tracking-normal); } h6, .h6 { font-size: var(--text-base); letter-spacing: var(--tracking-normal); font-weight: var(--weight-semibold); } .display { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-strong); } .eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); font-family: var(--font-ui); } /* ---- Text roles ---- */ .lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-muted); } .body-sm { font-size: var(--text-sm); } .meta { font-size: var(--text-sm); color: var(--text-muted); } .meta-xs { font-size: var(--text-xs); color: var(--text-muted); } .mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-ligatures: none; } .numeric { font-variant-numeric: tabular-nums; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp-1 { -webkit-line-clamp: 1 } .clamp-2 { -webkit-line-clamp: 2 } .clamp-3 { -webkit-line-clamp: 3 } /* ---- Links ---- */ a { color: var(--text-link); text-decoration-line: underline; text-decoration-thickness: max(1px, 0.06em); text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out); } a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; } a:active { color: var(--text-link-hover); } a.link-quiet { color: inherit; text-decoration: none; } a.link-quiet:hover { color: var(--text-link); text-decoration-line: underline; text-decoration-color: currentColor; } kbd { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1; padding: 0.28em 0.45em; border-radius: var(--radius-xs); background: var(--surface-inset); color: var(--text-muted); border: var(--border-width) solid var(--border-subtle); box-shadow: 0 1px 0 var(--border-default); white-space: nowrap; } mark { background: var(--amber-100); color: var(--sand-850); border-radius: var(--radius-xs); padding: 0.05em 0.2em; } [data-theme="dark"] mark { background: oklch(0.712 0.145 74 / 0.32); color: var(--text-strong); } code:not(pre code) { font-family: var(--font-mono); font-size: 0.88em; padding: 0.15em 0.36em; background: var(--surface-inset); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-xs); color: var(--accent-text); } pre { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal); padding: var(--space-4); background: var(--surface-inset); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); overflow-x: auto; color: var(--text-body); } blockquote { padding-left: var(--space-4); border-left: 2px solid var(--accent-border); color: var(--text-muted); } /* ---- Prose: docs module long-form ---- */ .prose { max-width: var(--measure-prose); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); } .prose > * + * { margin-top: var(--space-4); } .prose h2 { margin-top: var(--space-10); font-size: var(--text-xl); } .prose h3 { margin-top: var(--space-8); font-size: var(--text-lg); } .prose h2 + *, .prose h3 + * { margin-top: var(--space-3); } .prose ul, .prose ol { padding-left: var(--space-6); } .prose li + li { margin-top: var(--space-2); } .prose img, .prose figure { border-radius: var(--radius-lg); } .prose figcaption { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); } .prose hr { margin: var(--space-10) 0; } .prose table { width: 100%; font-size: var(--text-base); } /* ==== css/layout.css ==== */ /* LAYOUT — app shell and generic arrangement primitives. */ .app-shell { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 100vh; min-height: 100vh; background: var(--surface-page); } .app-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .app-body { flex: 1; min-height: 0; overflow: auto; } .pane-group { display: flex; min-height: 0; height: 100%; } .pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-page); } /* Fixed panes shrink before the content pane does, and the content pane has a floor — otherwise the fluid pane is squeezed to zero on narrow viewports. */ .pane-list { width: var(--list-pane-width); flex: 0 1 auto; min-width: 17rem; border-right: var(--border-width) solid var(--border-subtle); background: var(--surface-raised); overflow: hidden; } .pane-tree { width: 16rem; flex: 0 1 auto; min-width: 12rem; border-right: var(--border-width) solid var(--border-subtle); background: var(--surface-raised); overflow: hidden; } .pane-detail { flex: 1 1 26rem; min-width: 0; overflow: auto; } .pane-meta { width: var(--meta-pane-width); flex: 0 1 auto; min-width: 15rem; border-left: var(--border-width) solid var(--border-subtle); background: var(--surface-raised); overflow: auto; } /* Three panes need roughly 64rem. Below that the metadata rail goes first (its content is reachable from the record itself), then the list pane, so a narrow module shows one pane at a time. */ @media (max-width: 72rem) { .pane-meta { display: none; } } /* Tablet portrait and below: one pane. A pane group carrying data-mobile-view switches between them (see shell.css); one without it falls back to the detail pane alone. */ @media (max-width: 63.99rem) { .pane-list, .pane-tree { display: none; } .pane-detail { flex: 1 1 auto; } } .pane-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .pane-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); min-height: var(--topbar-height); border-bottom: var(--border-width) solid var(--border-subtle); background: var(--surface-raised); flex: 0 0 auto; } .pane-footer { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--border-subtle); flex: 0 0 auto; } .topbar { display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-height); padding: 0 var(--space-4); background: color-mix(in oklab, var(--surface-raised) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: var(--border-width) solid var(--border-subtle); position: sticky; top: 0; z-index: 20; flex: 0 0 auto; } .topbar-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-snug); } .topbar-spacer { flex: 1; } .page { padding: var(--space-8) var(--space-6) var(--space-16); } .page-narrow { max-width: 46rem; margin-inline: auto; } /* Fill layout — editors. The page is exactly the pane's height; the child marked .fill takes what's left and scrolls internally, so the whole editing surface (toolbar to bottom edge) stays on screen. The min-height is the floor: below it the pane scrolls rather than crushing the editor. */ .pane-scroll:has(> .page-fill), .pane-scroll:has(> * > .page-fill) { display: flex; flex-direction: column; } /* v1.8.1: one wrapper between the pane and the page (a skeleton swap host) is allowed. */ .pane-scroll > :has(> .page-fill) { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; } .page-fill { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 0 auto; height: 100%; min-height: 28rem; padding: var(--space-3) var(--space-4) var(--space-4); } .page-fill > .fill, .page-fill .fill { flex: 1 1 0; min-height: 0; } .container { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: var(--space-6); } .container-wide { max-width: 108rem; } .container-prose { max-width: 52rem; } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); } .page-head > .page-head-text { flex: 1 1 20rem; min-width: 0; } .page-head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .section { margin-bottom: var(--space-10); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); } /* v1.8.1 */ .section-head .section-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); } .section-head :is(h3, .section-title) > .count { margin-inline-start: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Stacks, rows, grids */ .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack-xs { gap: var(--space-1) } .stack-sm { gap: var(--space-2) } .stack-md { gap: var(--space-4) } .stack-lg { gap: var(--space-6) } .stack-xl { gap: var(--space-8) } .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .row-tight { gap: var(--space-2) } .row-loose { gap: var(--space-5) } .row-nowrap { flex-wrap: nowrap } .row-between { justify-content: space-between } .row-end { justify-content: flex-end } .row-center { justify-content: center } .row-top { align-items: flex-start } .row-baseline { align-items: baseline } .spacer { flex: 1 } .grid { display: grid; gap: var(--space-4); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); } .grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); } .grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: var(--space-8); } @media (max-width: 62rem) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-sidebar { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 40rem) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } .page { padding: var(--space-5) var(--space-4) var(--space-12); } .container { padding-inline: var(--space-4); } } .divider { height: var(--border-width); background: var(--border-subtle); border: 0; } .divider-v { width: var(--border-width); align-self: stretch; background: var(--border-subtle); } .divider-label { display: flex; align-items: center; gap: var(--space-3); color: var(--text-subtle); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .divider-label::before, .divider-label::after { content: ""; flex: 1; height: var(--border-width); background: var(--border-subtle); } .scroll-x { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .sticky-top { position: sticky; top: 0; z-index: 10; background: var(--surface-raised); } /* Scrollbars — present but quiet. */ .pane-scroll::-webkit-scrollbar, .app-body::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { width: 10px; height: 10px; } .pane-scroll::-webkit-scrollbar-thumb, .app-body::-webkit-scrollbar-thumb, .scroll-x::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; } .pane-scroll::-webkit-scrollbar-thumb:hover, .app-body::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; } .pane-scroll::-webkit-scrollbar-track, .app-body::-webkit-scrollbar-track { background: transparent; } /* ==== css/shell.css ==== */ /* APP SHELL Scribe shows ONE module at a time, so module switching and module navigation are two different jobs and live in two different places: - The global top bar owns WHICH module you are in (.module-switch, and on phones the .mobile-bar). - The sidebar below it belongs entirely to the OPEN module — its folders, albums, calendars, saved filters. Nothing global lives there. Structure: .app .topbar-global brand · module switcher · search · account .app-row .sidebar module-specific navigation .app-main .pane-group / .page .mobile-bar phone-only module switcher Breakpoints (named once, used everywhere): phone <= 47.99rem one pane, off-canvas sidebar, bottom bar tablet-p 48 - 63.99 one pane, off-canvas sidebar, top switcher tablet-l 64 - 79.99 sidebar docked, no metadata rail desktop >= 80rem everything visible */ .app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--surface-page); overflow: hidden; } .app-row { display: flex; min-height: 0; min-width: 0; } .app-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1; overflow: hidden; } /* ---------- Global top bar ---------- */ .topbar-global { display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-height); padding-inline: var(--space-3); background: var(--surface-raised); border-bottom: var(--border-width) solid var(--border-subtle); z-index: 30; flex: 0 0 auto; } .topbar-global > .spacer { flex: 1; } .brand { display: flex; align-items: center; gap: var(--space-2-5); flex: 0 0 auto; text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--accent); color: var(--text-on-accent); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); line-height: 1; } .brand-text { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); letter-spacing: var(--tracking-tight); } /* Module switcher — the only place modules are listed on desktop. */ .module-switch { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding-inline: var(--space-2-5); background: var(--surface-inset); border: var(--border-width) solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); white-space: nowrap; max-width: 15rem; transition: var(--transition-control); } .module-switch:hover { background: var(--surface-sunken); border-color: var(--border-default); } .module-switch[aria-expanded="true"] { background: var(--accent-quiet); border-color: var(--accent-border); color: var(--accent-text); } .module-switch > .icon { flex: 0 0 auto; color: var(--accent); font-size: 0.95em; } .module-switch > .name { overflow: hidden; text-overflow: ellipsis; } .module-switch > .caret { flex: 0 0 auto; font-size: 0.65em; color: var(--text-muted); } .module-switch:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .module-menu { width: min(30rem, calc(100vw - var(--space-6))); padding: var(--space-2); background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin: 0; } .module-menu:popover-open { animation: sc-pop-in var(--duration-fast) var(--ease-entrance); } .module-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); } .module-menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2-5); border-radius: var(--radius-md); text-decoration: none; color: var(--text-body); cursor: pointer; text-align: left; transition: background-color var(--duration-instant) var(--ease-out); } .module-menu-item:hover { background: var(--surface-hover); } .module-menu-item[aria-current="page"] { background: var(--surface-selected); } .module-menu-item > .glyph { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-muted); } .module-menu-item[aria-current="page"] > .glyph { background: var(--accent); color: var(--text-on-accent); } .module-menu-item > .text { min-width: 0; display: flex; flex-direction: column; } .module-menu-item .title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-strong); } .module-menu-item .sub { font-size: var(--text-xs); color: var(--text-muted); } /* ---------- Module sidebar ---------- */ .sidebar-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); flex: 0 0 auto; } .sidebar-head > .title { flex: 1; min-width: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); } .sidebar-close { display: none; margin-inline-start: auto; } /* The head only exists to hold the close button when the sidebar is off-canvas. On desktop the sidebar is always open, so the whole row goes. */ @media (min-width: 64rem) { .sidebar-head { display: none; } } /* ---- Resize handle ---- A folder tree is the one panel whose ideal width is the user's business, not ours: deep nesting and long document titles both want more room, and neither is something a designer can guess. Desktop only — off-canvas widths are fixed by the viewport, so the handle is hidden below 64rem. The hit area is 9px wide and sits astride the border; the visible line only appears on hover or while dragging, so the chrome stays quiet at rest. */ .sidebar-resize { position: absolute; inset-block: 0; inset-inline-end: -4px; width: 9px; z-index: 40; cursor: col-resize; background: transparent; border: 0; padding: 0; touch-action: none; } .sidebar-resize::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 4px; width: 1px; background: var(--accent); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .sidebar-resize:hover::after, .sidebar-resize:focus-visible::after, .sidebar[data-resizing="true"] .sidebar-resize::after { opacity: 1; } .sidebar-resize:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--ring-width) var(--focus-ring); border-radius: var(--radius-xs); } /* Double-clicking the handle returns the sidebar to its default width. */ .sidebar { position: relative; } /* While dragging, kill text selection and pointer events in the content so the drag can't select text or trigger hovers mid-gesture. */ body[data-resizing="true"] { cursor: col-resize; user-select: none; } body[data-resizing="true"] .app-main { pointer-events: none; } /* The docked sidebar takes its width from a variable the drag writes, falling back to the token. Transition is suppressed while dragging so it tracks the pointer exactly. */ @media (min-width: 64rem) { .sidebar { --sidebar-current-w: var(--sidebar-w, var(--sidebar-width)); } .sidebar[data-resizing="true"] { transition: none; } } @media (max-width: 63.99rem) { .sidebar-resize { display: none; } } /* ---------- Mobile bottom bar ---------- */ .mobile-bar { display: none; flex: 0 0 auto; background: var(--surface-raised); border-top: var(--border-width) solid var(--border-subtle); padding-bottom: env(safe-area-inset-bottom, 0); } .mobile-bar-row { display: flex; align-items: stretch; } .mobile-bar-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 3.25rem; padding: var(--space-1-5) var(--space-1); color: var(--text-muted); text-decoration: none; cursor: pointer; font-size: 0.6875rem; font-weight: var(--weight-medium); transition: color var(--duration-fast) var(--ease-out); } .mobile-bar-item > i { font-size: 1.05rem; } .mobile-bar-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .mobile-bar-item[aria-current="page"] { color: var(--accent-text); } .mobile-bar-item:active { background: var(--surface-active); } /* ---------- Mobile list/detail switching ---------- A three-pane module becomes one pane on small screens. The pane group declares which pane is showing; .to-detail / .to-list buttons flip it. */ .pane-back { display: none; } /* ---------- Off-canvas scrim ---------- */ .scrim { position: fixed; inset: 0; z-index: 45; background: var(--surface-overlay); animation: sc-fade-in var(--duration-fast) var(--ease-out); } .scrim[hidden] { display: none; } /* ========================================================================== TABLET LANDSCAPE — 64 to 79.99rem: drop the metadata rail, keep the sidebar ========================================================================== */ @media (max-width: 79.99rem) { :root { --sidebar-width: 13.5rem; --list-pane-width: 20rem; } } /* ========================================================================== TABLET PORTRAIT AND PHONE — sidebar goes off-canvas ========================================================================== */ @media (max-width: 63.99rem) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; --sidebar-current-w: min(38rem, 100vw); transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-entrance); box-shadow: var(--shadow-xl); border-inline-end: var(--border-width) solid var(--border-subtle); } .sidebar[data-open="true"] { transform: none; } .sidebar-close { display: inline-flex; } .sidebar-toggle { display: inline-flex !important; } } @media (min-width: 64rem) { .sidebar-toggle { display: none !important; } .scrim { display: none !important; } } /* ---- One pane at a time ---- Tablet portrait and phone both show a single pane, so the switching lives at the 64rem line, NOT at the phone breakpoint. (It used to sit inside the phone block, which left 48-64rem showing the detail pane with no way back to the list.) The pane group declares which pane is showing; .pane-back and any [data-sc-pane] control flip it. Folder navigation on a phone is the off-canvas tree — the sidebar carries the workspace picker and the full folder tree, so you never lose your place in the hierarchy by drilling into a document. */ @media (max-width: 63.99rem) { .pane-group[data-mobile-view] > .pane { display: none; } .pane-group[data-mobile-view="list"] > .pane-list, .pane-group[data-mobile-view="list"] > .pane-tree { display: flex; width: 100%; min-width: 0; border-right: 0; } .pane-group[data-mobile-view="detail"] > .pane-detail { display: flex; width: 100%; min-width: 0; } .pane-group[data-mobile-view="meta"] > .pane-meta { display: flex; width: 100%; min-width: 0; border-left: 0; } .pane-group[data-mobile-view="detail"] .pane-back, .pane-group[data-mobile-view="meta"] .pane-back { display: inline-flex; } } /* ========================================================================== PHONE — 47.99rem and below ========================================================================== */ @media (max-width: 47.99rem) { :root { --topbar-height: 3.25rem; --card-pad: calc(var(--space-4) * var(--density)); } .mobile-bar { display: block; } .module-switch > .caret { display: none; } .module-switch { background: transparent; max-width: none; padding-inline: var(--space-1); } .module-switch:hover { background: transparent; border-color: transparent; } .brand-text { display: none; } /* Documents' bar carries a menu button, brand, switcher, search, theme, menu and account: ~424px of content at the 412px of a Pixel 7a, which pushed the account button off the right edge (and with it the menu and density options). Tighten the gaps and let the switcher's label truncate rather than the account button clip. */ .topbar-global { gap: var(--space-1); padding-inline: var(--space-2); } .topbar-global > .btn, .topbar-global > .brand, .topbar-global > .module-switch { flex-shrink: 0; } .topbar-global > .module-switch { flex-shrink: 1; min-width: 0; } .module-switch > span { overflow: hidden; text-overflow: ellipsis; } /* Full-width surfaces: cards lose their side margins and corners at the edge. */ .page { padding: var(--space-4) var(--space-3) var(--space-10); } .container, .container-prose { padding-inline: var(--space-3); } .grid-sidebar { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .pane-header { padding-inline: var(--space-3); gap: var(--space-1-5); } .filter-bar { padding-inline: var(--space-3); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .filter-bar::-webkit-scrollbar { display: none; } .filter-bar > .spacer, .filter-bar > .filter-summary { display: none; } /* Overlays become sheets. The dialog.* qualifier is required, not decorative: the desktop geometry in overlays.css is written as dialog.modal / dialog.command, which outranks a bare .modal here no matter the source order. */ dialog.modal { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto auto 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; } .modal[open] { animation: sc-slide-up var(--duration-slow) var(--ease-entrance); } dialog.drawer[data-side="right"], dialog.drawer[data-side="left"], dialog.drawer-wide { inset: auto 0 0 0 !important; width: 100vw !important; height: auto !important; max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-inline: 0; } .drawer[open] { animation: sc-slide-up var(--duration-slow) var(--ease-entrance); } dialog.command { width: 100vw; max-width: 100vw; max-height: 88dvh; margin: 0 auto auto; border-radius: 0 0 var(--radius-xl) var(--radius-xl); } .module-menu { width: calc(100vw - var(--space-4)); } .module-menu-grid { grid-template-columns: minmax(0, 1fr); } .toast-region { inset-inline: var(--space-3); inset-block-end: calc(3.25rem + var(--space-3)); width: auto; } .bulk-bar-floating { bottom: var(--space-3); width: calc(100% - var(--space-6)); } .bulk-bar { overflow-x: auto; scrollbar-width: none; } /* Tables scroll rather than crush. */ .table-wrap { border-radius: var(--radius-md); } .table th, .table td { white-space: nowrap; } .photo-grid { gap: 2px; } .photo-grid[data-size="sm"] { --tile-size: 5rem; } .photo-grid[data-size="md"] { --tile-size: 7rem; } .photo-grid[data-size="lg"] { --tile-size: 10rem; } .exif-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv { grid-template-columns: minmax(0, 1fr); gap: var(--space-0-5); } .kv > dt { margin-top: var(--space-2); } .agenda-row { grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); } .cal-day { min-height: 4.25rem; padding: var(--space-1); } .cal-event > .time { display: none; } .doc-title { font-size: var(--text-2xl); } .display { font-size: var(--text-3xl); } .step-item, .timeline-item { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); } .trip-stats { gap: var(--space-3); } /* .settings-row's own phone layout lives with its base rules (search "Settings / admin") - a rule here is overridden by the unconditional one further down the file regardless of which one the media query matches, since they're equal specificity and source order decides. That's what caused FIX-BRIEF-R5 section 1 (.settings-text's desktop flex-basis, meant as a width, becoming a 288px-tall flex item once the row flips to a column). */ .connection { gap: var(--space-3); } .connection-text { flex: 1 1 100%; } } /* ========================================================================== TOUCH — every pointer-coarse device, any width Hit targets to 44px without changing the visual language. ========================================================================== */ @media (pointer: coarse) { .btn { min-height: 2.75rem; } .btn-xs, .btn-sm { min-height: 2.25rem; } .btn-icon { min-width: 2.75rem; } .btn-icon.btn-xs, .btn-icon.btn-sm { min-width: 2.25rem; } .action { min-height: 2.5rem; min-width: 2.5rem; } .nav-item, .tree-item { min-height: 2.75rem; } .menu-item, .command-item, .combobox-option, .facet-option { min-height: 2.75rem; } .tab { min-height: 2.75rem; } .segmented > button, .segmented > label { min-height: 2.5rem; } .list-row, .agenda-row, .result { padding-block: var(--space-3); } .checkbox-box, .radio-dot { width: 1.25rem; height: 1.25rem; } .switch-track { width: 2.75rem; height: 1.5rem; } .switch-track::after { width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); } .switch > input:checked + .switch-track::after { transform: translateX(1.25rem); } .range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; } .range::-moz-range-thumb { width: 22px; height: 22px; } /* Row actions can't rely on hover. */ .list-actions { opacity: 1; } .offline-pin { min-width: 2.75rem; min-height: 2.75rem; } .photo-tile .tile-check, .photo-tile .tile-badges { opacity: 1; } } /* ---------- Floating action button ---------- The primary create action on a phone, where the toolbar that holds it on desktop has been reduced to a search field. Sits clear of the bottom bar and the home-gesture inset. One per screen, never two. */ .fab { position: fixed; z-index: 35; inset-block-end: calc(3.75rem + env(safe-area-inset-bottom, 0px) + var(--space-3)); inset-inline-end: var(--space-4); display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 3.25rem; min-width: 3.25rem; padding-inline: var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent); font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold); box-shadow: var(--shadow-lg); cursor: pointer; } /* The icon carries its own trailing space rather than relying on the flex gap: the FAB is a fixed-position box whose display can be forced by the host page, and the label must not touch the glyph when that happens. */ .fab > i { font-size: 1.1rem; } .fab-label { margin-inline-start: var(--space-2); } .fab:active { transform: translateY(1px); } .fab:focus-visible { outline: none; box-shadow: var(--shadow-lg), 0 0 0 var(--ring-width) var(--focus-ring); } /* Phone only. Declared as a hide, not a show — a fixed-position box must be a flex container in its base rule or the gap and centring never take effect. */ @media (min-width: 48rem) { .fab { display: none; } } /* Landscape phones: the bottom bar eats too much of a short viewport. */ @media (max-height: 26rem) and (max-width: 63.99rem) { .mobile-bar { display: none; } .module-switch > .caret { display: inline; } } /* ==== css/buttons.css ==== */ /* BUTTONS One .btn base, variants by modifier. Corners are --radius-md; pills are for chips, not buttons. Hover lifts 1px and darkens; press returns to the baseline and darkens further. */ .btn { --btn-bg: var(--surface-raised); --btn-fg: var(--text-strong); --btn-border: var(--border-default); --btn-bg-hover: var(--surface-sunken); --btn-bg-active: var(--surface-sunken); --btn-shadow: var(--shadow-xs); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); flex: 0 0 auto; height: var(--control-height); padding-inline: var(--control-pad-x-lg); font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1; letter-spacing: var(--tracking-snug); color: var(--btn-fg); background: var(--btn-bg); border: var(--border-width) solid var(--btn-border); border-radius: var(--radius-md); box-shadow: var(--btn-shadow); cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none; transition: var(--transition-control), transform var(--duration-fast) var(--ease-out); } .btn:hover { background: var(--btn-bg-hover); transform: var(--lift); box-shadow: var(--shadow-sm); } .btn:active { background: var(--btn-bg-active); transform: var(--press); box-shadow: var(--shadow-xs); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--focus-ring), var(--btn-shadow); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } .btn > .fa, .btn > svg, .btn > i { font-size: 0.95em; flex: 0 0 auto; } .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--text-on-accent); --btn-border: transparent; --btn-bg-hover: var(--accent-hover); --btn-bg-active: var(--accent-active); --btn-shadow: 0 1px 2px oklch(0.348 0.155 283 / 0.28); } .btn-secondary { --btn-bg: var(--accent-quiet); --btn-fg: var(--accent-text); --btn-border: var(--accent-border); --btn-bg-hover: var(--accent-quiet-hover); --btn-bg-active: var(--accent-quiet-hover); --btn-shadow: none; } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-body); --btn-border: transparent; --btn-bg-hover: var(--surface-hover); --btn-bg-active: var(--surface-active); --btn-shadow: none; } .btn-ghost:hover { color: var(--text-strong); box-shadow: none; } /* Toggle buttons (sepia, pinned, bold). Any ghost or icon button with aria-pressed. */ .btn-ghost[aria-pressed="true"] { --btn-bg: var(--accent-quiet); --btn-bg-hover: var(--accent-quiet); --btn-fg: var(--accent-text); color: var(--accent-text); } .btn-subtle { --btn-bg: var(--surface-inset); --btn-fg: var(--text-body); --btn-border: transparent; --btn-bg-hover: var(--surface-sunken); --btn-bg-active: var(--surface-sunken); --btn-shadow: none; } .btn-danger { --btn-bg: var(--danger); --btn-fg: var(--text-on-accent); --btn-border: transparent; --btn-bg-hover: color-mix(in oklab, var(--danger) 88%, black); --btn-bg-active: color-mix(in oklab, var(--danger) 78%, black); --btn-shadow: 0 1px 2px oklch(0.492 0.180 25 / 0.28); } .btn-danger-quiet { --btn-bg: var(--danger-quiet); --btn-fg: var(--danger); --btn-border: transparent; --btn-bg-hover: color-mix(in oklab, var(--danger-quiet) 70%, var(--danger) 12%); --btn-bg-active: var(--danger-quiet); --btn-shadow: none; } .btn-inverse { --btn-bg: var(--surface-inverse); --btn-fg: var(--text-on-inverse); --btn-border: transparent; --btn-bg-hover: color-mix(in oklab, var(--surface-inverse) 88%, var(--accent)); --btn-bg-active: var(--surface-inverse); --btn-shadow: var(--shadow-sm); } .btn-link { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--text-link); --btn-bg-hover: transparent; --btn-bg-active: transparent; --btn-shadow: none; height: auto; padding: 0; } .btn-link:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 0.18em; transform: none; } .btn-xs { height: calc(1.5rem * var(--density) * var(--font-scale)); font-size: var(--text-xs); padding-inline: var(--space-2); border-radius: var(--radius-sm); gap: var(--space-1); } .btn-sm { height: var(--control-height-sm); font-size: var(--text-sm); padding-inline: var(--control-pad-x); border-radius: var(--radius-sm); } .btn-lg { height: var(--control-height-lg); font-size: var(--text-md); padding-inline: var(--space-6); } .btn-block { width: 100%; } .btn-icon { width: var(--control-height); padding: 0; } .btn-icon.btn-xs { width: calc(1.5rem * var(--density) * var(--font-scale)); } .btn-icon.btn-sm { width: var(--control-height-sm); } .btn-icon.btn-lg { width: var(--control-height-lg); } .btn-icon.btn-round { border-radius: var(--radius-circle); } /* Loading — label stays, spinner replaces the leading icon slot. */ .btn[data-loading="true"] { pointer-events: none; color: transparent; position: relative; } .btn[data-loading="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--btn-fg) 30%, transparent); border-top-color: var(--btn-fg); animation: sc-spin 620ms linear infinite; } /* Groups and split buttons */ .btn-group { display: inline-flex; } .btn-group > .btn { border-radius: 0; margin-left: calc(var(--border-width) * -1); box-shadow: none; } .btn-group > .btn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); margin-left: 0; } .btn-group > .btn:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); } .btn-group > .btn:hover { transform: none; z-index: 1; } .btn-group > .btn[aria-pressed="true"], .btn-group > .btn.is-active { background: var(--accent-quiet); color: var(--accent-text); border-color: var(--accent-border); z-index: 2; } /* Toolbar — dense row of ghost icon buttons with optional separators. */ .toolbar { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1); background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); } .toolbar-sep { width: var(--border-width); align-self: stretch; margin-inline: var(--space-1); background: var(--border-subtle); } /* Icon-only affordance that must not look like a button until hovered. */ .action { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); height: var(--control-height-sm); min-width: var(--control-height-sm); padding-inline: var(--space-1-5); color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); transition: var(--transition-control); } .action:hover { color: var(--text-strong); background: var(--surface-hover); } .action:active { background: var(--surface-active); } .action[aria-pressed="true"], .action.is-active { color: var(--accent-text); background: var(--surface-selected); } /* ==== css/forms.css ==== */ /* FORMS Field anatomy: .field wraps .field-label, the control, and .field-hint / .field-error. Inputs are 1px-bordered on a raised surface with an inset hairline shadow so they read as a slot cut into the paper. */ .field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; } .field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-strong); display: flex; align-items: center; gap: var(--space-1-5); } .field-label .req { color: var(--danger); font-weight: var(--weight-regular); } .field-label .opt { color: var(--text-subtle); font-weight: var(--weight-regular); font-size: var(--text-xs); } .field-hint { font-size: var(--text-sm); color: var(--text-muted); } .field-error { font-size: var(--text-sm); color: var(--danger); display: flex; align-items: center; gap: var(--space-1-5); } .field-row { display: flex; gap: var(--space-4); flex-wrap: wrap; } .field-row > .field { flex: 1 1 14rem; } .fieldset { display: flex; flex-direction: column; gap: var(--space-4); } .fieldset-legend { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: var(--space-1); } .input, .textarea, .select { width: 100%; min-width: 0; font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-strong); background: var(--surface-raised); border: var(--border-width) solid var(--border-default); border-radius: var(--control-radius); box-shadow: var(--shadow-inset); transition: var(--transition-control); } .input, .select { height: var(--control-height); padding-inline: var(--control-pad-x); } .textarea { padding: var(--space-2-5) var(--control-pad-x); line-height: var(--leading-normal); min-height: 5.5rem; } .input:hover, .textarea:hover, .select:hover { border-color: var(--border-strong); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .input:disabled, .textarea:disabled, .select:disabled { background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed; box-shadow: none; } .input[readonly], .textarea[readonly] { background: var(--surface-inset); box-shadow: none; } .input-sm { height: var(--control-height-sm); font-size: var(--text-sm); padding-inline: var(--space-2); border-radius: var(--radius-sm); } .input-lg { height: var(--control-height-lg); font-size: var(--text-md); } .input-mono { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-ligatures: none; } .field[data-invalid="true"] .input, .field[data-invalid="true"] .textarea, .field[data-invalid="true"] .select, .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); } .field[data-invalid="true"] .input:focus, .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 var(--ring-width) color-mix(in oklab, var(--danger) 30%, transparent); } .select { appearance: none; padding-inline-end: var(--space-8); cursor: pointer; background-image: linear-gradient(45deg, transparent 49%, currentColor 50%), linear-gradient(-45deg, transparent 49%, currentColor 50%); background-size: 6px 6px, 6px 6px; background-position: right calc(var(--space-4) + 6px) center, right var(--space-4) center; background-repeat: no-repeat; color: var(--text-strong); } /* Input group — leading/trailing adornments and attached buttons. */ .input-group { display: flex; align-items: stretch; width: 100%; min-width: 0; } .input-group > .input, .input-group > .select { border-radius: 0; } .input-group > :first-child { border-start-start-radius: var(--control-radius); border-end-start-radius: var(--control-radius); } .input-group > :last-child { border-start-end-radius: var(--control-radius); border-end-end-radius: var(--control-radius); } .input-group > * + * { margin-left: calc(var(--border-width) * -1); } .input-group > .input:focus, .input-group > .select:focus { z-index: 2; } .input-group > .btn { z-index: 1; } .input-affix { display: inline-flex; align-items: center; gap: var(--space-1-5); padding-inline: var(--control-pad-x); flex: 0 0 auto; font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; background: var(--surface-inset); border: var(--border-width) solid var(--border-default); } /* Input with an icon inside the control (search fields). */ .input-wrap { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; } .input-wrap > .input { padding-inline-start: var(--space-8); } .input-wrap > .input-icon { position: absolute; inset-inline-start: var(--space-3); display: grid; place-items: center; color: var(--text-subtle); pointer-events: none; font-size: var(--text-sm); } .input-wrap > .input-trailing { position: absolute; inset-inline-end: var(--space-1-5); display: flex; gap: var(--space-1); } .input-wrap:has(.input-trailing) > .input { padding-inline-end: var(--space-10); } /* Search field — used in every module's header. */ .search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-height); padding-inline: var(--space-3); background: var(--surface-inset); border: var(--border-width) solid transparent; border-radius: var(--radius-pill); color: var(--text-muted); transition: var(--transition-control); min-width: 0; width: 100%; max-width: 34rem; } .search:focus-within { background: var(--surface-raised); border-color: var(--accent); box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); color: var(--text-strong); } .search > input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--text-base); color: var(--text-strong); } .search > kbd { flex: 0 0 auto; } /* ---- Choice controls ---- */ .checkbox, .radio, .switch { display: inline-flex; align-items: flex-start; gap: var(--space-2-5); cursor: pointer; min-width: 0; } .checkbox > input, .radio > input, .switch > input { position: absolute; opacity: 0; width: 0; height: 0; } .checkbox-box, .radio-dot { flex: 0 0 auto; position: relative; display: grid; place-items: center; width: calc(1.125rem * var(--font-scale)); height: calc(1.125rem * var(--font-scale)); margin-top: calc((var(--leading-normal) * 1em - 1.125rem * var(--font-scale)) / 2); background: var(--surface-raised); border: var(--border-width-thick) solid var(--border-strong); box-shadow: var(--shadow-inset); transition: var(--transition-control); } .checkbox-box { border-radius: var(--radius-xs); } .radio-dot { border-radius: var(--radius-circle); } .checkbox:hover .checkbox-box, .radio:hover .radio-dot { border-color: var(--accent); } .checkbox > input:checked + .checkbox-box, .radio > input:checked + .radio-dot { background: var(--accent); border-color: var(--accent); box-shadow: none; } .checkbox > input:checked + .checkbox-box::after { content: ""; width: 0.58em; height: 0.32em; margin-top: -0.12em; border-left: 2px solid var(--text-on-accent); border-bottom: 2px solid var(--text-on-accent); transform: rotate(-45deg); } .checkbox > input:indeterminate + .checkbox-box { background: var(--accent); border-color: var(--accent); } .checkbox > input:indeterminate + .checkbox-box::after { content: ""; width: 0.6em; height: 2px; background: var(--text-on-accent); border-radius: 1px; } .radio > input:checked + .radio-dot::after { content: ""; width: 0.44em; height: 0.44em; border-radius: 50%; background: var(--text-on-accent); } .checkbox > input:focus-visible + .checkbox-box, .radio > input:focus-visible + .radio-dot { box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .checkbox > input:disabled ~ *, .radio > input:disabled ~ * { opacity: 0.5; cursor: not-allowed; } .choice-label { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; } .choice-label > .name { font-size: var(--text-base); color: var(--text-strong); } .choice-label > .desc { font-size: var(--text-sm); color: var(--text-muted); } .switch-track { flex: 0 0 auto; position: relative; width: calc(2.25rem * var(--font-scale)); height: calc(1.25rem * var(--font-scale)); margin-top: calc((var(--leading-normal) * 1em - 1.25rem * var(--font-scale)) / 2); background: var(--border-strong); border-radius: var(--radius-pill); transition: background-color var(--duration-base) var(--ease-out); } .switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.25rem * var(--font-scale) - 4px); height: calc(1.25rem * var(--font-scale) - 4px); background: var(--sand-0); border-radius: 50%; box-shadow: var(--shadow-xs); transition: transform var(--duration-base) var(--ease-out); } .switch > input:checked + .switch-track { background: var(--accent); } .switch > input:checked + .switch-track::after { transform: translateX(calc(1rem * var(--font-scale))); } .switch > input:focus-visible + .switch-track { box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .switch > input:disabled ~ * { opacity: 0.5; cursor: not-allowed; } /* Choice cards — radio/checkbox rendered as a selectable panel. */ .choice-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3-5) var(--space-4); background: var(--surface-raised); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-control); } .choice-card:hover { border-color: var(--border-strong); background: var(--surface-inset); } .choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-quiet); box-shadow: 0 0 0 var(--border-width) var(--accent); } .choice-card:has(input:focus-visible) { box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } /* Segmented control — view switchers (Month / Week / Agenda, Grid / List). */ .segmented { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--surface-sunken); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); } .segmented > button, .segmented > label { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); height: calc(var(--control-height) - 6px); padding-inline: var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: var(--transition-control); } .segmented > button:hover, .segmented > label:hover { color: var(--text-strong); } /* RF2 (v1.9.4): the selected segment is an accent-tinted chip with an accent hairline, not a white chip on off-white. */ .segmented > button[aria-selected="true"], .segmented > button[aria-pressed="true"], .segmented > button.is-active, .segmented > label:has(input:checked) { background: var(--accent-quiet); color: var(--accent-text); font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 var(--border-width) var(--accent-border); } .segmented > label:has(input:focus-visible) { box-shadow: inset 0 0 0 var(--border-width) var(--accent-border), 0 0 0 var(--ring-width) var(--focus-ring); } .segmented input { position: absolute; opacity: 0; width: 0; height: 0; } .segmented-sm > button, .segmented-sm > label { height: calc(var(--control-height-sm) - 6px); font-size: var(--text-xs); padding-inline: var(--space-2); } /* Range */ .range { width: 100%; appearance: none; background: none; height: 1.25rem; cursor: pointer; } .range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: var(--border-default); } .range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--border-default); } .range::-webkit-slider-thumb { appearance: none; margin-top: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-raised); box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-out); } .range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-raised); box-shadow: var(--shadow-sm); } .range:hover::-webkit-slider-thumb { transform: scale(1.1); } .range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .range-pair { display: flex; align-items: center; gap: var(--space-3); } .range-pair > .range { flex: 1; } .range-value { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); min-width: 4ch; text-align: right; } /* File drop — photo import, document attachments. */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center; background: var(--surface-inset); border: var(--border-width-thick) dashed var(--border-default); border-radius: var(--radius-lg); color: var(--text-muted); cursor: pointer; transition: var(--transition-control); } .dropzone:hover, .dropzone[data-dragover="true"] { border-color: var(--accent); background: var(--accent-quiet); color: var(--accent-text); } .dropzone-title { font-weight: var(--weight-medium); color: var(--text-strong); font-size: var(--text-base); } /* Combobox / token input — recipients, tags, EXIF facets. */ .combobox { position: relative; width: 100%; min-width: 0; } .combobox-control { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5); min-height: var(--control-height); padding: var(--space-1) var(--space-2); background: var(--surface-raised); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-inset); cursor: text; transition: var(--transition-control); } .combobox-control:hover { border-color: var(--border-strong); } .combobox[data-open="true"] .combobox-control, .combobox-control:focus-within { border-color: var(--accent); box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .combobox-input { flex: 1 1 6rem; min-width: 4rem; border: 0; background: none; outline: none; font-size: var(--text-base); color: var(--text-strong); height: calc(var(--control-height) - var(--space-3)); } .combobox-toggle { flex: 0 0 auto; } .combobox-menu { position: absolute; z-index: 60; inset-inline: 0; top: calc(100% + var(--space-1)); max-height: 17rem; overflow-y: auto; padding: var(--space-1); background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: sc-pop-in var(--duration-fast) var(--ease-entrance); } .combobox:not([data-open="true"]) .combobox-menu { display: none; } .combobox-option { display: flex; align-items: center; gap: var(--space-2-5); padding: var(--space-2) var(--space-2-5); border-radius: var(--radius-sm); font-size: var(--text-base); color: var(--text-body); cursor: pointer; } .combobox-option:hover, .combobox-option[data-active="true"] { background: var(--surface-hover); color: var(--text-strong); } .combobox-option[aria-selected="true"] { background: var(--surface-selected); color: var(--accent-text); font-weight: var(--weight-medium); } .combobox-option .sub { color: var(--text-muted); font-size: var(--text-sm); margin-left: auto; } .combobox-group-label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); } .combobox-empty { padding: var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--text-sm); } /* Token / removable chip inside a combobox. */ .token { display: inline-flex; align-items: center; gap: var(--space-1-5); height: calc(1.5rem * var(--font-scale)); padding-inline: var(--space-2); font-size: var(--text-sm); color: var(--text-strong); background: var(--surface-inset); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-sm); max-width: 14rem; } .token > .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .token > button { display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: var(--radius-xs); color: var(--text-subtle); cursor: pointer; font-size: var(--text-xs); } .token > button:hover { background: var(--danger-quiet); color: var(--danger); } .token-accent { background: var(--accent-quiet); border-color: var(--accent-border); color: var(--accent-text); } /* Form footer — persistent save bar used in settings. */ .form-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-5); margin-top: var(--space-5); border-top: var(--border-width) solid var(--border-subtle); } .form-actions .spacer { flex: 1; } /* ==== css/cards.css ==== */ /* CARDS & SURFACES A card is a raised paper surface: 1px hairline border, --radius-lg corners, a soft warm shadow. Border AND shadow together — the border does the work in dark mode where shadows disappear. */ .card { display: flex; flex-direction: column; min-width: 0; background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: clip; } .card-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .card-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--card-pad); border-bottom: var(--border-width) solid var(--border-subtle); } .card-header > .card-title { flex: 1; min-width: 0; } .card-footer { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--card-pad); border-top: var(--border-width) solid var(--border-subtle); background: var(--surface-inset); } .card-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-snug); } .card-subtitle { font-size: var(--text-sm); color: var(--text-muted); } .card-media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-sunken); overflow: hidden; } .card-media > img { width: 100%; height: 100%; object-fit: cover; } .card-flat { box-shadow: none; } .card-inset { background: var(--surface-inset); box-shadow: none; } .card-quiet { background: transparent; border-color: var(--border-subtle); box-shadow: none; } .card-pad-sm { --card-pad: calc(var(--space-4) * var(--density)); } .card-pad-lg { --card-pad: calc(var(--space-6) * var(--density)); } .card-link { text-decoration: none; color: inherit; cursor: pointer; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-default); } .card-link:active { transform: none; box-shadow: var(--shadow-sm); } .card-link:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--focus-ring), var(--shadow-md); } .card[data-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 var(--border-width) var(--accent), var(--shadow-sm); } /* Accent strip on the leading edge — used for module identity, not decoration. */ .card-accent { position: relative; } .card-accent::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--accent); } .panel { background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); overflow: clip; } .panel-section { padding: var(--space-4) var(--card-pad); } .panel-section + .panel-section { border-top: var(--border-width) solid var(--border-subtle); } .panel-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); text-transform: uppercase; letter-spacing: var(--tracking-caps); } /* Stat tile — dashboard counts (messages archived, photos indexed, km walked). */ .stat { display: flex; flex-direction: column; gap: var(--space-1); } .stat-label { font-size: var(--text-sm); color: var(--text-muted); } .stat-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: 1; } .stat-delta { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); } .stat-delta[data-direction="up"] { color: var(--success); } .stat-delta[data-direction="down"] { color: var(--danger); } .stat-delta[data-direction="flat"] { color: var(--text-muted); } /* Definition list for metadata panels (EXIF, message headers, event details). */ .kv { display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-4); } .kv > dt { font-size: var(--text-sm); color: var(--text-muted); } .kv > dd { font-size: var(--text-sm); color: var(--text-strong); min-width: 0; overflow-wrap: break-word; } .kv-mono > dd { font-family: var(--font-mono); font-size: var(--text-xs); } .kv-rows { display: flex; flex-direction: column; } .kv-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--border-subtle); } .kv-rows > div:last-child { border-bottom: 0; } .kv-rows dt { font-size: var(--text-sm); color: var(--text-muted); flex: 0 0 auto; } .kv-rows dd { font-size: var(--text-sm); color: var(--text-strong); text-align: right; min-width: 0; } /* ==== css/overlays.css ==== */ /* OVERLAYS — modal, drawer, popover, menu, tooltip, sheet. Built on native and [popover] where possible; scribe.js only fills the gaps. ⚠ CLOSED DIALOGS MUST BE HIDDEN EXPLICITLY. The rules below set author-origin `display` on the dialog elements themselves (.modal, .drawer, .command, .lightbox) so their internal layout works when open. Author-origin display ALWAYS beats the UA stylesheet's dialog:not([open]){display:none}, so without the guard immediately below, every closed dialog renders inline in the page flow. The guard needs !important because .drawer[data-side="right"] (0,2,0) and .drawer-wide's width:!important outrank a plain dialog:not([open]). Escape hatch: add .fake to render an overlay inline for a specimen or gallery. */ dialog.modal:not([open]), dialog.drawer:not([open]), dialog.command:not([open]), dialog.lightbox:not([open]) { display: none !important; } dialog.fake { display: flex !important; } dialog.lightbox.fake { display: grid !important; } .overlay-backdrop, dialog::backdrop { background: var(--surface-overlay); backdrop-filter: blur(2px); } dialog::backdrop { animation: sc-fade-in var(--duration-base) var(--ease-out); } /* ---- Modal ---- */ .modal { width: min(34rem, calc(100vw - var(--space-8))); max-height: min(44rem, calc(100vh - var(--space-12))); padding: 0; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); /* matches .toast */ background: var(--surface-raised); color: var(--text-body); box-shadow: var(--shadow-xl); overflow: clip; display: flex; flex-direction: column; } .modal[open] { animation: sc-rise-in var(--duration-base) var(--ease-entrance); } .modal-sm { width: min(26rem, calc(100vw - var(--space-8))); } .modal-lg { width: min(48rem, calc(100vw - var(--space-8))); } .modal-xl { width: min(68rem, calc(100vw - var(--space-8))); } .modal-header { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); flex: 0 0 auto; } .modal-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-snug); flex: 1; min-width: 0; } .modal-desc { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); } .modal-body { padding: 0 var(--space-5) var(--space-5); overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); } .modal-footer { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--border-subtle); background: var(--surface-inset); flex: 0 0 auto; } .modal-footer .spacer { flex: 1; } .modal-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--accent-quiet); color: var(--accent-text); font-size: var(--text-md); } .modal-icon[data-tone="danger"] { background: var(--danger-quiet); color: var(--danger); } .modal-icon[data-tone="warning"] { background: var(--warning-quiet); color: var(--warning); } .modal-icon[data-tone="success"] { background: var(--success-quiet); color: var(--success); } /* ---- Drawer ---- */ .drawer { position: fixed; z-index: 70; margin: 0; padding: 0; border: 0; max-height: none; max-width: none; background: var(--surface-raised); color: var(--text-body); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: clip; } .drawer[data-side="right"] { inset: 0 0 0 auto; width: min(28rem, 100vw); height: 100vh; border-inline-start: var(--border-width) solid var(--border-subtle); } .drawer[data-side="left"] { inset: 0 auto 0 0; width: min(28rem, 100vw); height: 100vh; border-inline-end: var(--border-width) solid var(--border-subtle); } .drawer[data-side="bottom"] { inset: auto 0 0 0; width: 100vw; max-height: 86vh; border-top: var(--border-width) solid var(--border-subtle); border-start-start-radius: var(--radius-xl); border-start-end-radius: var(--radius-xl); } .drawer[open][data-side="right"] { animation: sc-slide-right var(--duration-slow) var(--ease-entrance); } .drawer[open][data-side="left"] { animation: sc-slide-left var(--duration-slow) var(--ease-entrance); } .drawer[open][data-side="bottom"] { animation: sc-slide-up var(--duration-slow) var(--ease-entrance); } .drawer-wide { width: min(42rem, 100vw) !important; } .drawer-header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); min-height: var(--topbar-height); border-bottom: var(--border-width) solid var(--border-subtle); flex: 0 0 auto; } .drawer-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); flex: 1; min-width: 0; } .drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } .drawer-footer { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--border-subtle); background: var(--surface-inset); flex: 0 0 auto; } .drawer-grabber { width: 2.5rem; height: 4px; border-radius: var(--radius-pill); background: var(--border-strong); margin: var(--space-2) auto 0; flex: 0 0 auto; } /* ---- Menu / dropdown (works as [popover] or as a positioned div) ---- */ .menu { min-width: 12rem; max-width: 20rem; padding: var(--space-1); background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: auto; max-height: 24rem; margin: 0; } .menu:popover-open { animation: sc-pop-in var(--duration-fast) var(--ease-entrance); } .menu-item { display: flex; align-items: center; gap: var(--space-2-5); width: 100%; padding: var(--space-2) var(--space-2-5); font-size: var(--text-base); color: var(--text-body); text-align: left; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background-color var(--duration-instant) var(--ease-out); } .menu-item:hover, .menu-item[data-active="true"] { background: var(--surface-hover); color: var(--text-strong); } .menu-item:active { background: var(--surface-active); } .menu-item[aria-checked="true"], .menu-item.is-active { color: var(--accent-text); background: var(--surface-selected); } .menu-item[disabled], .menu-item[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } .menu-item[data-tone="danger"] { color: var(--danger); } .menu-item[data-tone="danger"]:hover { background: var(--danger-quiet); } .menu-item > .icon { flex: 0 0 auto; width: 1.15em; text-align: center; color: var(--text-subtle); } .menu-item:hover > .icon { color: inherit; } .menu-item > .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-item > kbd { flex: 0 0 auto; } .menu-sep { height: var(--border-width); margin: var(--space-1) calc(var(--space-1) * -1); background: var(--border-subtle); border: 0; } .menu-label { padding: var(--space-2) var(--space-2-5) var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); } /* Quiet, non-interactive footnote at the end of a menu (build version, last sync). */ .menu-note { padding: var(--space-1-5) var(--space-2-5) var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); overflow-wrap: anywhere; user-select: all; } /* ---- Popover panel (filters, EXIF ranges, date pickers) ---- */ .popover { min-width: 16rem; max-width: 26rem; padding: var(--space-4); background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: var(--space-3); margin: 0; } /* An unopened [popover] stays hidden even when a component class sets its own `display` for the open state (v1.8.2) - same author-origin-beats-UA gotcha as .modal/.drawer above, generalised to every [popover] rather than just .popover, since .cal-picker's .menu wrapper has the same risk if a future component class ever gives it a `display`. */ .popover:popover-open { animation: sc-pop-in var(--duration-fast) var(--ease-entrance); } .popover-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .popover-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); } .popover-footer { display: flex; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-subtle); } .anchor { position: relative; } /* ---- Tooltip ---- */ .tooltip { position: absolute; z-index: 90; pointer-events: none; padding: var(--space-1-5) var(--space-2-5); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--text-on-inverse); background: var(--surface-inverse); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); max-width: 18rem; width: max-content; animation: sc-fade-in var(--duration-fast) var(--ease-out); } .tooltip[hidden] { display: none; } .tooltip-kbd { color: color-mix(in oklab, var(--text-on-inverse) 65%, transparent); margin-left: var(--space-1-5); } /* ---- Command palette (global search, Cmd-K) ---- */ .command { width: min(38rem, calc(100vw - var(--space-8))); max-height: min(32rem, 70vh); padding: 0; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-xl); overflow: clip; display: flex; flex-direction: column; margin: 12vh auto auto; } .command[open] { animation: sc-rise-in var(--duration-base) var(--ease-entrance); } .command-input-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); flex: 0 0 auto; } .command-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--text-md); color: var(--text-strong); } .command-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-2); } .command-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md); cursor: pointer; text-align: left; color: var(--text-body); text-decoration: none; } .command-item[data-active="true"], .command-item:hover { background: var(--surface-hover); color: var(--text-strong); } .command-item > .icon { flex: 0 0 auto; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-muted); font-size: var(--text-sm); } .command-item > .text { flex: 1; min-width: 0; } .command-item .title { font-size: var(--text-base); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-item .sub { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .command-footer { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2-5) var(--space-5); border-top: var(--border-width) solid var(--border-subtle); background: var(--surface-inset); font-size: var(--text-xs); color: var(--text-muted); flex: 0 0 auto; } /* Scope row under the input: workspace switch + archived toggle. */ .command-scope { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); flex: 0 0 auto; } /* Group heading inside the list (Documents, Folders, Similar, Actions, Recent). */ .command-group { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); } .command-group > .count { text-transform: none; letter-spacing: 0; font-family: var(--font-mono); } .command-group-note { padding: 0 var(--space-3) var(--space-1-5); font-size: var(--text-xs); color: var(--text-muted); } .command-item { align-items: flex-start; } .command-item > .icon { margin-top: 0.1rem; } .command-item .snippet { font-size: var(--text-sm); color: var(--text-body); margin-top: var(--space-0-5, 2px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; } .command-item > .trail { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-1-5); align-self: center; font-size: var(--text-xs); color: var(--text-subtle); } .command-item[data-active="true"] > .trail .kbd-enter { visibility: visible; } .command-item > .trail .kbd-enter { visibility: hidden; } .command-item[data-archived="true"] .title { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; } /* Loading / empty / failed inside the list — compact, centred. */ .command-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); color: var(--text-muted); font-size: var(--text-sm); } .command-state > .title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); } @media (max-width: 39.99rem) { .command { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; } .command-input-row { padding: var(--space-3) var(--space-4); } .command-item { min-height: 44px; } .command-footer { display: none; } } /* Lightbox — full-frame photo viewing. */ .lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: oklch(0.138 0.009 58 / 0.96); display: grid; grid-template-rows: auto 1fr auto; color: oklch(0.96 0.005 85); } .lightbox::backdrop { background: oklch(0.10 0.006 58 / 0.9); } .lightbox-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: oklch(0.90 0.006 85); } .lightbox-stage { display: grid; place-items: center; min-height: 0; padding: var(--space-4); position: relative; } .lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 24px 64px oklch(0 0 0 / 0.5); } .lightbox-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-circle); background: oklch(0.99 0 0 / 0.10); color: oklch(0.98 0 0 / 0.9); cursor: pointer; backdrop-filter: blur(8px); transition: background-color var(--duration-fast) var(--ease-out); } .lightbox-nav:hover { background: oklch(0.99 0 0 / 0.2); } .lightbox-nav[data-dir="prev"] { left: var(--space-4); } .lightbox-nav[data-dir="next"] { right: var(--space-4); } .lightbox-filmstrip { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); overflow-x: auto; background: oklch(0 0 0 / 0.25); } .lightbox-filmstrip img { width: 4rem; height: 3rem; object-fit: cover; border-radius: var(--radius-xs); opacity: 0.5; cursor: pointer; transition: opacity var(--duration-fast) var(--ease-out); } .lightbox-filmstrip img:hover { opacity: 0.85; } .lightbox-filmstrip img[data-selected="true"] { opacity: 1; outline: 2px solid var(--violet-400); outline-offset: 1px; } /* ==== css/navigation.css ==== */ /* NAVIGATION — sidebar, nav items, tabs, breadcrumbs, pagination, tree. */ .sidebar { display: flex; flex-direction: column; min-height: 0; /* Width comes through a custom property so the media-gated rules above set it without fighting this later rule on source order. */ width: var(--sidebar-current-w, var(--sidebar-width)); flex: 0 0 auto; background: var(--surface-raised); border-inline-end: var(--border-width) solid var(--border-subtle); transition: width var(--duration-slow) var(--ease-out); } .sidebar[data-collapsed="true"] { width: var(--sidebar-width-collapsed); } .sidebar[data-collapsed="true"] .nav-item > .label, .sidebar[data-collapsed="true"] .nav-group-label, .sidebar[data-collapsed="true"] .sidebar-brand-text { display: none; } .sidebar[data-collapsed="true"] .nav-item { justify-content: center; padding-inline: 0; } .sidebar-brand { display: flex; align-items: center; gap: var(--space-2-5); height: var(--topbar-height); padding-inline: var(--space-4); flex: 0 0 auto; border-bottom: var(--border-width) solid var(--border-subtle); } .sidebar-brand-mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--accent); color: var(--text-on-accent); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); line-height: 1; } .sidebar-brand-text { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); letter-spacing: var(--tracking-tight); } .sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3) var(--space-2); } .sidebar-footer { flex: 0 0 auto; padding: var(--space-2); border-top: var(--border-width) solid var(--border-subtle); } .nav-group { display: flex; flex-direction: column; gap: 1px; } .nav-group + .nav-group { margin-top: var(--space-5); } .nav-group-label { padding: var(--space-1) var(--space-2-5) var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); } .nav-item { display: flex; align-items: center; gap: var(--space-2-5); height: calc(2.125rem * var(--density) * var(--font-scale)); padding-inline: var(--space-2-5); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-body); text-decoration: none; cursor: pointer; min-width: 0; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .nav-item > .icon { flex: 0 0 auto; width: 1.15rem; text-align: center; color: var(--text-subtle); font-size: 0.95em; } .nav-item > .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item > .count { flex: 0 0 auto; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-subtle); font-weight: var(--weight-medium); } .nav-item:hover { background: var(--surface-hover); color: var(--text-strong); } .nav-item:hover > .icon { color: var(--text-muted); } .nav-item:active { background: var(--surface-active); } .nav-item[aria-current="page"], .nav-item.is-active { background: var(--surface-selected); color: var(--accent-text); font-weight: var(--weight-semibold); } .nav-item[aria-current="page"] > .icon, .nav-item.is-active > .icon { color: var(--accent); } .nav-item[aria-current="page"] > .count { color: var(--accent-text); } .nav-item-sub { padding-inline-start: var(--space-8); font-weight: var(--weight-regular); font-size: var(--text-sm); } .nav-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; } /* Tabs */ .tabs { display: flex; align-items: center; gap: var(--space-1); border-bottom: var(--border-width) solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { display: inline-flex; align-items: center; gap: var(--space-2); height: calc(2.5rem * var(--density) * var(--font-scale)); padding-inline: var(--space-3); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: var(--transition-control); } .tab:hover { color: var(--text-strong); border-bottom-color: var(--border-default); } .tab[aria-selected="true"], .tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); } .tab > .count { font-size: var(--text-xs); padding: 0.1em 0.4em; border-radius: var(--radius-pill); background: var(--surface-inset); color: var(--text-muted); font-variant-numeric: tabular-nums; } .tab[aria-selected="true"] > .count { background: var(--accent-quiet); color: var(--accent-text); } .tab-panel:not([hidden]) { animation: sc-fade-in var(--duration-base) var(--ease-out); padding-top: var(--space-5); } /* Breadcrumbs — docs hierarchy, photo album paths. */ .breadcrumbs { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--text-muted); min-width: 0; } /* In a pane header the trail stays on one line: ancestors shrink and ellipsise first, the current item holds its width longest. */ .pane-header > .breadcrumbs { flex: 1 1 auto; flex-wrap: nowrap; overflow: hidden; } .pane-header > .breadcrumbs > li { flex: 0 1 auto; } .pane-header > .breadcrumbs > li:last-child { flex: 0 0 auto; max-width: 60%; } .pane-header > .breadcrumbs > li > a, .pane-header > .breadcrumbs > li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Inline edit slot — a picker that stands in for part of the trail (folder choice). */ .breadcrumb-edit { display: flex; align-items: center; gap: var(--space-1-5); flex: 0 1 22rem; min-width: 12rem; } .breadcrumb-edit .input, .breadcrumb-edit .select { height: var(--control-height-sm); font-size: var(--text-sm); } /* Group of header actions that must never wrap or stack. */ .pane-actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; } .breadcrumbs > li { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; } .breadcrumbs a { color: var(--text-muted); text-decoration: none; border-radius: var(--radius-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .breadcrumbs a:hover { color: var(--text-link); text-decoration: underline; } .breadcrumbs [aria-current="page"] { color: var(--text-strong); font-weight: var(--weight-medium); } .breadcrumb-sep { color: var(--text-subtle); flex: 0 0 auto; } /* Pagination */ .pagination { display: flex; align-items: center; gap: var(--space-1); } .page-btn { display: grid; place-items: center; min-width: var(--control-height-sm); height: var(--control-height-sm); padding-inline: var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); cursor: pointer; text-decoration: none; font-variant-numeric: tabular-nums; transition: var(--transition-control); } .page-btn:hover { background: var(--surface-hover); color: var(--text-strong); } .page-btn[aria-current="page"] { background: var(--accent); color: var(--text-on-accent); } .page-btn[aria-disabled="true"] { color: var(--text-subtle); pointer-events: none; } .page-ellipsis { color: var(--text-subtle); padding-inline: var(--space-1); } .pagination-summary { font-size: var(--text-sm); color: var(--text-muted); } /* Tree — docs space navigation, mail folder hierarchy. */ .tree { display: flex; flex-direction: column; gap: 1px; } .tree-item { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; height: calc(1.875rem * var(--density) * var(--font-scale)); padding-inline: var(--space-1-5); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-body); cursor: pointer; text-decoration: none; } .tree-item:hover { background: var(--surface-hover); color: var(--text-strong); } .tree-item[aria-current="page"], .tree-item.is-active { background: var(--surface-selected); color: var(--accent-text); font-weight: var(--weight-medium); } .tree-twisty { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--text-subtle); border-radius: var(--radius-xs); font-size: var(--text-xs); transition: transform var(--duration-fast) var(--ease-out); } .tree-twisty:hover { background: var(--surface-active); color: var(--text-strong); } .tree-item[aria-expanded="true"] .tree-twisty { transform: rotate(90deg); } .tree-item > .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tree-children { padding-inline-start: var(--space-4); border-inline-start: var(--border-width) solid var(--border-subtle); margin-inline-start: var(--space-3); display: flex; flex-direction: column; gap: 1px; } /* On-page table of contents (docs). */ .toc { display: flex; flex-direction: column; gap: var(--space-0-5); border-inline-start: 2px solid var(--border-subtle); } .toc a { display: block; padding: var(--space-1) var(--space-3); margin-inline-start: -2px; border-inline-start: 2px solid transparent; font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; } .toc a:hover { color: var(--text-strong); border-inline-start-color: var(--border-strong); } .toc a[aria-current="true"] { color: var(--accent-text); border-inline-start-color: var(--accent); font-weight: var(--weight-medium); } .toc .lvl-3 { padding-inline-start: var(--space-6); } /* Avatar + identity row, used in sidebars and mail lists. */ .avatar { display: grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--radius-circle); background: var(--surface-inset); color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow: hidden; user-select: none; letter-spacing: 0; } .avatar > img { width: 100%; height: 100%; object-fit: cover; } .avatar-xs { width: 1.25rem; height: 1.25rem; font-size: 0.55rem; } .avatar-sm { width: 1.625rem; height: 1.625rem; font-size: var(--text-xs); } .avatar-lg { width: 2.5rem; height: 2.5rem; font-size: var(--text-base); } .avatar-xl { width: 3.5rem; height: 3.5rem; font-size: var(--text-lg); } .avatar-square { border-radius: var(--radius-sm); } .avatar-accent { background: var(--accent-quiet); color: var(--accent-text); } .avatar-stack { display: flex; } .avatar-stack > .avatar + .avatar { margin-inline-start: -0.5rem; box-shadow: 0 0 0 2px var(--surface-raised); } .identity { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; } .identity-text { display: flex; flex-direction: column; min-width: 0; } .identity-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .identity-sub { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Generic count ---------- .count was only ever styled inside .tab, .nav-item, .tag, .facet-option and .date-rail. Used anywhere else — a section heading with a trailing total, say — it inherited the heading's size and sat flush against the text. This is the base treatment: the component-scoped rules above still win where they apply. */ .count { margin-inline-start: var(--space-2); font-family: var(--font-mono); font-size: 0.8em; font-weight: var(--weight-regular); font-variant-numeric: tabular-nums; color: var(--text-subtle); letter-spacing: 0; } /* ==== css/data.css ==== */ /* DATA DISPLAY — tables, list rows, badges, tags, filter bars. */ /* ---- Table ---- */ .table-wrap { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: auto; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); } .table th, .table td { text-align: left; padding: var(--row-pad-y) var(--space-4); min-width: 0; } .table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-inset); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); border-bottom: var(--border-width) solid var(--border-default); white-space: nowrap; } .table tbody td { border-bottom: var(--border-width) solid var(--border-subtle); color: var(--text-body); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background-color var(--duration-instant) var(--ease-out); } .table-hover tbody tr:hover { background: var(--surface-hover); } .table tbody tr[data-selected="true"] { background: var(--surface-selected); } .table-striped tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface-inset) 55%, transparent); } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table td.mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); } .table td.tight, .table th.tight { width: 1%; white-space: nowrap; } .table-sort { display: inline-flex; align-items: center; gap: var(--space-1-5); cursor: pointer; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; } .table-sort:hover { color: var(--text-strong); } .table-sort[aria-sort="ascending"], .table-sort[aria-sort="descending"] { color: var(--accent-text); } .table-sort .caret { opacity: 0.45; font-size: 0.8em; } .table-sort[aria-sort="ascending"] .caret, .table-sort[aria-sort="descending"] .caret { opacity: 1; } .table-compact th, .table-compact td { padding: var(--space-1-5) var(--space-3); } .table-pin-first th:first-child, .table-pin-first td:first-child { position: sticky; inset-inline-start: 0; background: var(--surface-raised); z-index: 1; } .table-pin-first thead th:first-child { z-index: 3; background: var(--surface-inset); } .table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2-5) var(--space-4); border-top: var(--border-width) solid var(--border-subtle); background: var(--surface-inset); font-size: var(--text-sm); color: var(--text-muted); flex-wrap: wrap; } /* ---- List rows — the workhorse of every archive module ---- */ .list { display: flex; flex-direction: column; } .list-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--row-pad-y) var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); cursor: pointer; text-decoration: none; color: inherit; min-width: 0; transition: background-color var(--duration-instant) var(--ease-out); position: relative; } .list-row:hover { background: var(--surface-hover); } .list-row[aria-selected="true"], .list-row[data-selected="true"] { background: var(--surface-selected); } .list-row[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 2px; background: var(--accent); } .list-row[data-unread="true"] .list-title { font-weight: var(--weight-semibold); color: var(--text-strong); } .list-row[data-unread="true"]::after { content: ""; position: absolute; inset-inline-start: var(--space-1); top: calc(var(--row-pad-y) + 0.55em); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); } .list-title { font-size: var(--text-base); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); } .list-sub { font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-snippet { font-size: var(--text-sm); color: var(--text-subtle); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .list-aside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); } .list-time { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .list-header { display: flex; align-items: center; gap: var(--space-2); position: sticky; top: 0; z-index: 2; padding: var(--space-1-5) var(--space-4); background: color-mix(in oklab, var(--surface-inset) 90%, transparent); backdrop-filter: blur(8px); border-bottom: var(--border-width) solid var(--border-subtle); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); } .list-actions { display: flex; gap: var(--space-0-5); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .list-row:hover .list-actions, .list-row:focus-within .list-actions { opacity: 1; } @media (hover: none) { .list-actions { opacity: 1; } } /* ---- Badges & tags ---- */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); height: calc(1.25rem * var(--font-scale)); padding-inline: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: var(--tracking-snug); white-space: nowrap; border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-muted); border: var(--border-width) solid transparent; } .badge-accent { background: var(--accent-quiet); color: var(--accent-text); } .badge-success { background: var(--success-quiet); color: var(--success); } .badge-warning { background: var(--warning-quiet); color: var(--warning); } .badge-danger { background: var(--danger-quiet); color: var(--danger); } .badge-info { background: var(--info-quiet); color: var(--info); } .badge-solid { background: var(--accent); color: var(--text-on-accent); } .badge-outline { background: transparent; border-color: var(--border-default); color: var(--text-muted); } .badge-pill { border-radius: var(--radius-pill); padding-inline: var(--space-2); } .badge-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .badge-count { min-width: calc(1.25rem * var(--font-scale)); justify-content: center; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; padding-inline: var(--space-1); } .tag { display: inline-flex; align-items: center; gap: var(--space-1-5); height: calc(1.625rem * var(--font-scale)); padding-inline: var(--space-2-5); font-size: var(--text-sm); color: var(--text-body); white-space: nowrap; background: var(--surface-raised); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-pill); text-decoration: none; transition: var(--transition-control); } .tag-clickable:hover { border-color: var(--accent-border); background: var(--accent-quiet); color: var(--accent-text); } .tag[aria-pressed="true"], .tag.is-active { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .tag > .count { font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; } .tag[aria-pressed="true"] > .count { color: color-mix(in oklab, var(--text-on-accent) 75%, transparent); } .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-1-5); } /* ---- Filter bar & facets ---- */ .filter-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2-5) var(--space-4); background: var(--surface-raised); border-bottom: var(--border-width) solid var(--border-subtle); } .filter-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--control-height-sm); padding-inline: var(--space-2-5); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); background: var(--surface-raised); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: var(--transition-control); } .filter-chip:hover { border-color: var(--border-strong); background: var(--surface-inset); } .filter-chip[data-applied="true"] { background: var(--accent-quiet); border-color: var(--accent-border); color: var(--accent-text); } .filter-chip .value { color: var(--text-strong); font-weight: var(--weight-semibold); } .filter-chip[data-applied="true"] .value { color: var(--accent-text); } .filter-chip .caret { font-size: 0.7em; opacity: 0.6; } .filter-chip .clear { display: grid; place-items: center; width: 1rem; height: 1rem; margin-inline-end: -2px; border-radius: 50%; font-size: 0.65em; } .filter-chip .clear:hover { background: color-mix(in oklab, var(--accent) 22%, transparent); } .filter-summary { font-size: var(--text-sm); color: var(--text-muted); } .facet { display: flex; flex-direction: column; gap: var(--space-1); } .facet-title { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); padding-block: var(--space-1); } .facet-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-1-5); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-body); cursor: pointer; } .facet-option:hover { background: var(--surface-hover); } .facet-option > .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .facet-option > .count { font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; } .facet-bar { height: 3px; border-radius: var(--radius-pill); background: var(--accent-quiet); overflow: hidden; } .facet-bar > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; } /* Bulk-selection action bar that appears over a list. */ .bulk-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3); background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--text-sm); } .bulk-bar .btn-ghost { --btn-fg: var(--text-on-inverse); --btn-bg-hover: oklch(0.99 0 0 / 0.12); } .bulk-bar-floating { position: sticky; bottom: var(--space-4); margin-inline: auto; z-index: 15; width: max-content; } /* Timeline — trips, activity feeds, revision history. */ .timeline { display: flex; flex-direction: column; } .timeline-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding-bottom: var(--space-6); position: relative; } .timeline-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); } .timeline-node { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: var(--radius-circle); background: var(--surface-raised); border: var(--border-width-thick) solid var(--border-default); color: var(--text-muted); font-size: var(--text-xs); z-index: 1; } .timeline-node[data-tone="accent"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .timeline-line { flex: 1; width: 2px; background: var(--border-subtle); border-radius: 1px; } .timeline-item:last-child .timeline-line { display: none; } .timeline-content { display: flex; flex-direction: column; gap: var(--space-2); padding-top: 0.15rem; min-width: 0; } .timeline-date { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); } .timeline-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-snug); } /* Media placeholder — striped fill for imagery the user has not supplied yet. */ .media-placeholder { display: grid; place-items: center; gap: var(--space-2); background-color: var(--surface-sunken); background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--border-subtle) 80%, transparent) 0 1px, transparent 1px 9px); color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: lowercase; text-align: center; border-radius: var(--radius-md); padding: var(--space-4); min-height: 6rem; } /* ==== css/feedback.css ==== */ /* FEEDBACK — alerts, toasts, progress, skeletons, empty states, banners. */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-inset); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-body); } .alert > .alert-icon { flex: 0 0 auto; margin-top: 0.1em; color: var(--text-muted); } /* .alert-text is a normal block, NOT a flex column. A flex column turns every inline child into a full-width flex item on its own row, so any or inside the body shatters the sentence around it and leaves orphaned commas and dashes. The title gets block + margin instead. (.callout-body and .toast-text are plain blocks for the same reason.) */ .alert > .alert-text { flex: 1; min-width: 0; } .alert-title { display: block; margin-bottom: var(--space-1); font-weight: var(--weight-semibold); color: var(--text-strong); font-size: var(--text-base); } .alert-accent { background: var(--accent-quiet); border-color: var(--accent-border); } .alert-accent > .alert-icon { color: var(--accent); } .alert-success { background: var(--success-quiet); border-color: color-mix(in oklab, var(--success) 30%, transparent); } .alert-success > .alert-icon { color: var(--success); } .alert-warning { background: var(--warning-quiet); border-color: color-mix(in oklab, var(--warning) 32%, transparent); } .alert-warning > .alert-icon { color: var(--warning); } .alert-danger { background: var(--danger-quiet); border-color: color-mix(in oklab, var(--danger) 30%, transparent); } .alert-danger > .alert-icon { color: var(--danger); } .alert-info { background: var(--info-quiet); border-color: color-mix(in oklab, var(--info) 30%, transparent); } .alert-info > .alert-icon { color: var(--info); } /* Full-width banner — sync failures, quota warnings, read-only notices. */ .banner { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2-5) var(--space-4); font-size: var(--text-sm); background: var(--warning-quiet); color: var(--text-strong); border-bottom: var(--border-width) solid color-mix(in oklab, var(--warning) 32%, transparent); } .banner .spacer { flex: 1; } .banner-accent { background: var(--accent-quiet); border-bottom-color: var(--accent-border); } .banner-danger { background: var(--danger-quiet); border-bottom-color: color-mix(in oklab, var(--danger) 30%, transparent); } /* Toasts */ .toast-region { position: fixed; z-index: 100; inset-block-end: var(--space-5); inset-inline-end: var(--space-5); display: flex; flex-direction: column-reverse; gap: var(--space-2); width: min(23rem, calc(100vw - var(--space-8))); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3-5); background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--text-sm); color: var(--text-body); pointer-events: auto; animation: sc-rise-in var(--duration-base) var(--ease-entrance); } .toast[data-leaving="true"] { animation: sc-fade-in var(--duration-fast) var(--ease-out) reverse forwards; } .toast > .toast-icon { flex: 0 0 auto; margin-top: 0.1em; } .toast > .toast-text { flex: 1; min-width: 0; } .toast-title { font-weight: var(--weight-semibold); color: var(--text-strong); } .toast[data-tone="success"] > .toast-icon { color: var(--success); } .toast[data-tone="danger"] > .toast-icon { color: var(--danger); } .toast[data-tone="warning"] > .toast-icon { color: var(--warning); } .toast[data-tone="accent"] > .toast-icon { color: var(--accent); } /* Progress */ .progress { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; } .progress > .bar { height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-slow) var(--ease-out); } .progress-sm { height: 3px; } .progress-lg { height: 10px; } .progress[data-indeterminate="true"] > .bar { width: 35% !important; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: sc-progress-slide 1.2s var(--ease-in-out) infinite; } @keyframes sc-progress-slide { from { transform: translateX(-100%) } to { transform: translateX(340%) } } .progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-1-5); } .progress-label .value { font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: var(--weight-medium); } .meter-ring { --size: 2.5rem; --value: 0; --track: var(--surface-sunken); width: var(--size); height: var(--size); border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-strong); background: conic-gradient(var(--accent) calc(var(--value) * 1%), var(--track) 0); position: relative; } .meter-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface-raised); } .meter-ring > * { position: relative; } /* Spinner */ .spinner { width: 1.125rem; height: 1.125rem; border-radius: 50%; flex: 0 0 auto; border: 2px solid color-mix(in oklab, var(--accent) 22%, transparent); border-top-color: var(--accent); animation: sc-spin 620ms linear infinite; } .spinner-sm { width: 0.875rem; height: 0.875rem; border-width: 1.5px; } .spinner-lg { width: 1.75rem; height: 1.75rem; border-width: 2.5px; } /* Skeletons */ .skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-sunken) 25%, color-mix(in oklab, var(--surface-sunken) 55%, var(--surface-raised)) 37%, var(--surface-sunken) 63%); background-size: 200% 100%; animation: sc-shimmer 1.6s linear infinite; } .skeleton-text { height: 0.75em; margin-block: 0.25em; } .skeleton-title { height: 1.1em; width: 40%; } .skeleton-line-80 { width: 80% } .skeleton-line-60 { width: 60% } .skeleton-line-40 { width: 40% } .skeleton-avatar { width: 2rem; height: 2rem; border-radius: 50%; } .skeleton-tile { aspect-ratio: 1; border-radius: var(--radius-md); } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* Empty state */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; } .empty-mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-lg); background: var(--accent-quiet); color: var(--accent); font-size: var(--text-lg); margin-bottom: var(--space-1); } .empty-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-snug); } .empty-body { font-size: var(--text-base); color: var(--text-muted); max-width: var(--measure-narrow); line-height: var(--leading-relaxed); } .empty-compact { padding: var(--space-6) var(--space-4); } /* Sync / connection status — every archive module needs one. */ .sync-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); } .sync-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--text-subtle); } .sync-status[data-state="ok"] .sync-dot { background: var(--success); } .sync-status[data-state="syncing"] .sync-dot { background: var(--accent); animation: sc-pulse 1.4s var(--ease-in-out) infinite; } .sync-status[data-state="stale"] .sync-dot { background: var(--warning); } .sync-status[data-state="error"] .sync-dot { background: var(--danger); } .sync-status[data-state="paused"] .sync-dot { background: var(--text-subtle); } /* ============ Offline: records kept on this device ============ Everything here is on-device availability, which is NOT the same thing as .sync-status — that reports the health of the link to a source account, this reports whether one record can be read with no network at all. The model is explicit, not automatic: the user pins what they want to keep. Four states, and the difference between "kept" and "queued" has to survive a glance, because a queued document is the one that will not be there later. kept on the device, readable offline success, solid check queued pinned, not downloaded yet muted, clock syncing downloading or pushing edits now accent, spinner stale kept, but the server copy moved on warning, triangle .offline-pin is the toggle (aria-pressed), .offline-state the read-only label. Both use the same colour per state so a pinned row and its chip agree. */ .offline-pin { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle); font-size: var(--text-sm); cursor: pointer; transition: var(--transition-control); } .offline-pin:hover { background: var(--surface-hover); color: var(--text-body); } .offline-pin:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .offline-pin[aria-pressed="true"] { color: var(--success); } .offline-pin[data-state="queued"] { color: var(--text-muted); } .offline-pin[data-state="syncing"] { color: var(--accent); } .offline-pin[data-state="syncing"] > i { animation: sc-spin 900ms linear infinite; } .offline-pin[data-state="stale"] { color: var(--warning); } .offline-state { display: inline-flex; align-items: center; gap: var(--space-1-5); flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-muted); white-space: nowrap; } .offline-state > i { font-size: 0.9em; } .offline-state[data-state="kept"] { color: var(--success); } .offline-state[data-state="syncing"] { color: var(--accent-text); } .offline-state[data-state="stale"] { color: var(--warning); } /* Shown at the top of a pane while the device has no connection. Not a toast — it is a standing condition, so it stays until the network returns. */ .offline-banner { display: flex; align-items: center; gap: var(--space-2-5); flex: 0 0 auto; padding: var(--space-2-5) var(--space-3); background: var(--warning-quiet); color: var(--text-strong); border-bottom: var(--border-width) solid var(--border-subtle); font-size: var(--text-sm); } .offline-banner > i { flex: 0 0 auto; color: var(--warning); } .offline-banner > .text { flex: 1; min-width: 0; } .offline-banner > .text > strong { font-weight: var(--weight-semibold); } /* A row in the list of things kept offline — used in Settings and in the per-module "Offline" screen. Reuses .progress for the storage bar. */ .offline-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); } .offline-total > .used { font-family: var(--font-mono); color: var(--text-strong); } /* ==== css/modules.css ==== */ /* MODULE COMPONENTS Purpose-built pieces for Scribe's archive modules. These are the parts a generic framework never gives you: message rows that show archive provenance, a photo grid that survives 40,000 items, EXIF facets, a trip timeline, a set-by-set workout log. Everything here composes the primitives above — no new colours, no new radii, no new shadows. */ /* ============ Shared archive furniture ============ */ /* Provenance pill — where a record came from and how it got here. Every archived object in Scribe shows one. */ .source { display: inline-flex; align-items: center; gap: var(--space-1-5); height: calc(1.375rem * var(--font-scale)); padding-inline: var(--space-1-5) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; background: var(--surface-inset); color: var(--text-muted); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-sm); } .source > .glyph { display: grid; place-items: center; width: 0.9rem; font-size: 0.9em; opacity: 0.8; } .source[data-source="mail"] { color: var(--info); } .source[data-source="calendar"]{ color: var(--accent-text); } .source[data-source="camera"] { color: var(--text-muted); } .source[data-source="phone"] { color: var(--text-muted); } .source[data-source="polarsteps"] { color: var(--success); } .source[data-source="trainheroic"] { color: var(--warning); } .source[data-source="docs"] { color: var(--accent-text); } /* Archive stamp — immutable/verified marker on replicated records. */ .stamp { display: inline-flex; align-items: center; gap: var(--space-1-5); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-subtle); } .stamp[data-verified="true"] { color: var(--success); } /* Date rail — sticky day/month separator shared by mail, photos, trips, workouts. */ .date-rail { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-2); background: linear-gradient(var(--surface-page) 62%, transparent); font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-snug); backdrop-filter: blur(6px); } .date-rail > .count { font-family: var(--font-ui); font-weight: var(--weight-regular); font-size: var(--text-xs); color: var(--text-subtle); } .date-rail::after { content: ""; flex: 1; height: var(--border-width); background: var(--border-subtle); } /* ============ Email archive ============ */ .mail-row { align-items: flex-start; gap: var(--space-2-5); padding-inline-start: var(--space-3); } .mail-row .mail-star { color: var(--text-subtle); font-size: var(--text-sm); } .mail-row .mail-star[data-starred="true"] { color: var(--amber-500); } .mail-row .mail-from { font-size: var(--text-base); color: var(--text-strong); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-row[data-unread="true"] .mail-from { font-weight: var(--weight-bold); } .mail-row .mail-subject { font-size: var(--text-base); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-row .mail-preview { font-size: var(--text-sm); color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mail-row .mail-attach { color: var(--text-subtle); font-size: var(--text-xs); } .mail-thread-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.125rem; padding-inline: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; background: var(--surface-inset); color: var(--text-muted); border-radius: var(--radius-sm); } .thread { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); max-width: 56rem; } .thread-subject { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-tight); } .message { background: var(--surface-raised); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); overflow: clip; } .message-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); cursor: pointer; } .message-head:hover { background: var(--surface-hover); } .message-head .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); } .message-head .name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); } .message-head .addr { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); } .message-body { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); } .message-body > * + * { margin-top: var(--space-3); } .message[data-collapsed="true"] .message-body, .message[data-collapsed="true"] .message-attachments { display: none; } .message-attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); } .attachment { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; max-width: 18rem; padding: var(--space-2) var(--space-3); background: var(--surface-inset); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: var(--transition-control); } .attachment:hover { border-color: var(--accent-border); background: var(--accent-quiet); } .attachment > .kind { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text-muted); font-size: var(--text-sm); } .attachment > .text { min-width: 0; display: flex; flex-direction: column; } .attachment .name { font-size: var(--text-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attachment .size { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Header inspection — raw headers on an archived message. */ .headers { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-muted); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); } .headers dt { color: var(--text-subtle); white-space: nowrap; } .headers dd { overflow-wrap: anywhere; color: var(--text-body); } /* ============ Calendar archive ============ */ .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: clip; } .cal-dow { padding: var(--space-2) var(--space-2-5); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); background: var(--surface-inset); border-bottom: var(--border-width) solid var(--border-subtle); } .cal-day { display: flex; flex-direction: column; gap: var(--space-1); min-height: 6.5rem; padding: var(--space-1-5); border-inline-end: var(--border-width) solid var(--border-subtle); border-block-end: var(--border-width) solid var(--border-subtle); transition: background-color var(--duration-instant) var(--ease-out); } .cal-day:nth-child(7n) { border-inline-end: 0; } .cal-day:hover { background: var(--surface-hover); } .cal-day[data-outside="true"] { background: var(--surface-inset); } .cal-day[data-outside="true"] .cal-daynum { color: var(--text-subtle); } .cal-day[data-today="true"] .cal-daynum { background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-circle); width: 1.5rem; height: 1.5rem; display: grid; place-items: center; } .cal-daynum { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .cal-event { display: flex; align-items: center; gap: var(--space-1-5); padding: 2px var(--space-1-5); border-radius: var(--radius-xs); font-size: var(--text-xs); color: var(--text-strong); background: var(--accent-quiet); cursor: pointer; min-width: 0; border-inline-start: 2px solid var(--accent); } .cal-event:hover { background: var(--accent-quiet-hover); } .cal-event > .time { font-variant-numeric: tabular-nums; color: var(--text-muted); flex: 0 0 auto; } .cal-event > .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-event[data-cal="work"] { background: var(--info-quiet); border-inline-start-color: var(--info); } .cal-event[data-cal="personal"] { background: var(--success-quiet); border-inline-start-color: var(--success); } .cal-event[data-cal="travel"] { background: var(--warning-quiet); border-inline-start-color: var(--warning); } .cal-event[data-allday="true"] { border-inline-start-width: 0; padding-inline-start: var(--space-2); } .cal-more { font-size: var(--text-xs); color: var(--text-muted); padding-inline: var(--space-1-5); cursor: pointer; background: none; border: 0; font-family: inherit; text-align: start; } .cal-more:hover { color: var(--text-link); } /* Week / day grid with an hour rail. */ .cal-week { display: grid; grid-template-columns: 3.5rem repeat(7, minmax(0, 1fr)); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: auto; } .cal-hour { height: 3rem; border-block-end: var(--border-width) solid var(--border-subtle); position: relative; } .cal-hour-label { font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; padding: var(--space-1) var(--space-2); text-align: right; border-inline-end: var(--border-width) solid var(--border-subtle); } .cal-now { position: absolute; inset-inline: 0; height: 2px; background: var(--danger); z-index: 2; } .cal-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); } /* Agenda list — the default view for an archive. */ .agenda-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); cursor: pointer; } .agenda-row:hover { background: var(--surface-hover); } .agenda-time { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; } .agenda-time .end { color: var(--text-subtle); font-size: var(--text-xs); } .agenda-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .agenda-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-strong); } .agenda-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); } /* ============ Photo archive ============ */ .photo-grid { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(var(--tile-size, 9rem), 1fr)); } .photo-grid[data-size="sm"] { --tile-size: 6rem; } .photo-grid[data-size="md"] { --tile-size: 9rem; } .photo-grid[data-size="lg"] { --tile-size: 14rem; gap: var(--space-2); } .photo-tile { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; background: var(--surface-sunken); border-radius: var(--radius-sm); transition: outline-color var(--duration-fast) var(--ease-out); outline: 2px solid transparent; outline-offset: -2px; } .photo-tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-fast) var(--ease-out); } .photo-tile:hover > img { transform: scale(1.035); } .photo-tile[data-selected="true"] { outline-color: var(--accent); } .photo-tile[data-selected="true"] > img { filter: brightness(0.9); } .photo-tile .tile-check { position: absolute; top: var(--space-1-5); left: var(--space-1-5); z-index: 2; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: oklch(0.99 0 0 / 0.55); border: 1.5px solid oklch(0.99 0 0 / 0.9); display: grid; place-items: center; opacity: 0; backdrop-filter: blur(4px); transition: opacity var(--duration-fast) var(--ease-out); } .photo-tile:hover .tile-check, .photo-tile[data-selected="true"] .tile-check { opacity: 1; } .photo-tile[data-selected="true"] .tile-check { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); font-size: 0.6rem; } .photo-tile .tile-badges { position: absolute; bottom: 0; inset-inline: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-1-5) var(--space-1); background: linear-gradient(transparent, oklch(0.15 0.01 60 / 0.62)); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .photo-tile:hover .tile-badges { opacity: 1; } .photo-tile .tile-badge { font-size: var(--text-xs); font-family: var(--font-mono); color: oklch(0.98 0 0 / 0.92); letter-spacing: 0; } .photo-tile .tile-badge .spacer { flex: 1; } .photo-tile[data-video="true"]::after { content: ""; position: absolute; top: var(--space-1-5); right: var(--space-1-5); width: 0; height: 0; border-left: 7px solid oklch(0.99 0 0 / 0.85); border-block: 5px solid transparent; filter: drop-shadow(0 1px 2px oklch(0 0 0 / 0.4)); } /* EXIF / metadata filter rail. */ .meta-rail { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4); } .exif-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); } .exif-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .exif-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); } .exif-value { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .exif-strip { display: flex; flex-wrap: wrap; gap: var(--space-1-5) var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); } .exif-strip > span { display: inline-flex; align-items: center; gap: var(--space-1); } /* Histogram — used for date-taken and ISO distributions in the filter rail. */ .histogram { display: flex; align-items: flex-end; gap: 1px; height: 2.5rem; } .histogram > span { flex: 1; background: var(--accent-quiet); border-radius: 1px 1px 0 0; min-height: 2px; transition: background-color var(--duration-fast) var(--ease-out); } .histogram > span[data-in-range="true"] { background: var(--accent); } .histogram:hover > span { background: var(--accent-quiet-hover); } /* ============ PolarSteps trips ============ */ .trip-card { display: flex; flex-direction: column; overflow: clip; } .trip-hero { position: relative; aspect-ratio: 16 / 9; background: var(--surface-sunken); } .trip-hero > img { width: 100%; height: 100%; object-fit: cover; } .trip-hero-overlay { position: absolute; inset: auto 0 0 0; padding: var(--space-6) var(--space-4) var(--space-3); background: linear-gradient(transparent, oklch(0.15 0.01 60 / 0.78)); color: oklch(0.98 0.003 85); display: flex; flex-direction: column; gap: var(--space-1); } .trip-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } .trip-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); } .trip-stat { display: flex; flex-direction: column; } .trip-stat .value { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.1; } .trip-stat .label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); } /* Step — one stop on a trip. Timeline node carries the day number. */ .step-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding-bottom: var(--space-6); } .step-node { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--radius-circle); background: var(--surface-raised); border: var(--border-width-thick) solid var(--accent-border); font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--accent-text); } .step-place { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .step-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-snug); } .step-coords { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); } .step-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: var(--space-1); } .step-photos img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xs); cursor: pointer; } .map-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); border: var(--border-width) solid var(--border-subtle); } .map-attribution { position: absolute; bottom: 0; right: 0; padding: 2px var(--space-1-5); font-size: 0.625rem; color: var(--text-muted); background: color-mix(in oklab, var(--surface-raised) 80%, transparent); } /* ============ TrainHeroic workouts ============ */ .workout-card { display: flex; flex-direction: column; } .workout-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); } .workout-day { display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--accent-quiet); color: var(--accent-text); font-family: var(--font-display); line-height: 1.05; text-align: center; } .workout-day .dow { font-size: 0.625rem; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--weight-semibold); } .workout-day .num { font-size: var(--text-md); font-weight: var(--weight-bold); } .exercise { border-bottom: var(--border-width) solid var(--border-subtle); } .exercise:last-child { border-bottom: 0; } .exercise-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); } .exercise-name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); flex: 1; min-width: 0; } .exercise-target { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); } /* Set table — the core of any strength log. Weight/reps/RPE must line up. */ .set-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .set-table th { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); text-align: right; padding: var(--space-1) var(--space-3); } .set-table th:first-child { text-align: left; } .set-table td { padding: var(--space-1-5) var(--space-3); font-size: var(--text-sm); color: var(--text-body); text-align: right; border-top: var(--border-width) solid var(--border-subtle); } .set-table td:first-child { text-align: left; color: var(--text-muted); font-size: var(--text-xs); } .set-table tr[data-complete="true"] td { color: var(--text-strong); } .set-table tr[data-pr="true"] td { background: var(--success-quiet); } .set-input { width: 4rem; height: var(--control-height-sm); text-align: right; font-variant-numeric: tabular-nums; padding-inline: var(--space-2); font-size: var(--text-sm); background: var(--surface-raised); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-strong); } .set-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); } .pr-flag { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--success); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* Effort bar — RPE / intensity across a session. */ .effort { display: flex; gap: 2px; align-items: flex-end; height: 1.25rem; } .effort > span { width: 4px; border-radius: 1px; background: var(--border-default); } .effort > span[data-on="true"] { background: var(--accent); } .effort-scale-high > span[data-on="true"] { background: var(--warning); } /* ============ Documents: workspaces ============ */ /* Workspace scope selector. A workspace scopes everything below it in the Documents module, so it is not a nav item — it is the context the rest of the sidebar is read inside. It sits above the tree, full width, and reads as a control rather than a link. */ .scope { display: flex; flex-direction: column; gap: var(--space-1-5); padding: var(--space-1) var(--space-2) var(--space-3); } .scope-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle); } .scope-select { display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--control-height); padding-inline: var(--space-2-5); background: var(--surface-inset); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); cursor: pointer; text-align: left; transition: var(--transition-control); } .scope-select:hover { border-color: var(--border-strong); background: var(--surface-sunken); } .scope-select[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .scope-select > .glyph { flex: 0 0 auto; color: var(--accent); } .scope-select > .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scope-select > .caret { flex: 0 0 auto; font-size: 0.7em; color: var(--text-muted); } /* Personal vs shared is the single most consequential fact about a workspace — it decides who can see the contents — so it is never implied by position alone. */ .sharing { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); white-space: nowrap; padding-inline: var(--space-1-5); height: calc(1.25rem * var(--font-scale)); border-radius: var(--radius-sm); } .sharing[data-sharing="shared"] { background: var(--info-quiet); color: var(--info); } .sharing[data-sharing="personal"] { background: var(--accent-quiet); color: var(--accent-text); } /* ============ Documents: folder + document tree ============ */ /* The tree carries both folders and documents at every level, so the two must be tellable apart at a glance without reading the label. */ .doc-tree { display: flex; flex-direction: column; gap: 1px; } .doc-tree .tree-item > .kind { flex: 0 0 auto; width: 1.1rem; text-align: center; font-size: 0.9em; } /* Documents with no folder sit flush left: each document row carries an empty .tree-twisty so its icon lines up with the folder rows around it, which only reads well inside a folder. */ #fullIndexContentTree > ul > li > .tree-item[data-kind="document"] > .tree-twisty { display: none; } .doc-tree .tree-item[data-kind="folder"] > .kind { color: var(--amber-500); } .doc-tree .tree-item[data-kind="document"] > .kind { color: var(--text-subtle); } /* Placeholder row for a folder with no children — sits where the first child would. */ .tree-empty { list-style: none; padding: var(--space-1) var(--space-2); padding-inline-start: calc(var(--space-2) + 1.1rem + var(--space-2)); font-size: var(--text-xs); color: var(--text-subtle); font-style: normal; user-select: none; } /* Copy that only makes sense at one size (module-menu subs, hints). */ @media (min-width: 40rem) { .phone-only { display: none !important; } } @media (max-width: 39.99rem) { .desktop-only { display: none !important; } } /* Archived is a state an archive must show, not hide: struck through and dimmed, still selectable, never removed from the tree. */ .tree-item[data-archived="true"] > .label, .list-row[data-archived="true"] .list-title, .table tr[data-archived="true"] td:first-child { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--text-subtle); } .tree-item[data-archived="true"] > .kind { opacity: 0.5; } /* A document that matched a filter, inside a folder that did not. */ .tree-item[data-match="true"] > .label { font-weight: var(--weight-semibold); color: var(--text-strong); } /* Favicon for a document whose title is a link out. */ .doc-favicon { width: 0.95em; height: 0.95em; border-radius: 2px; flex: 0 0 auto; object-fit: contain; } /* ============ Documents: files attached to a document ============ */ /* Files hang off a document (or are listed account-wide), so every row has to say what it is attached to — the same file list is used for both scopes. */ .file-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .file-kind { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-muted); font-size: var(--text-sm); } .file-kind[data-kind="image"] { background: var(--accent-quiet); color: var(--accent-text); } .file-kind[data-kind="pdf"] { background: var(--danger-quiet); color: var(--danger); } .file-kind[data-kind="sheet"] { background: var(--success-quiet); color: var(--success); } .file-kind[data-kind="archive"] { background: var(--warning-quiet); color: var(--warning); } .file-name { font-size: var(--text-sm); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .file-meta { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } .file-thumb { width: 2rem; height: 2rem; border-radius: var(--radius-sm); object-fit: cover; flex: 0 0 auto; } /* Attachment scope chip — "this document" vs some other document. */ .attached-to { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--text-muted); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attached-to[data-self="true"] { color: var(--accent-text); font-weight: var(--weight-medium); } /* ============ Global administration ============ */ /* Administration sits ABOVE all accounts with its own credentials, so it must not look like another module of the app you were just in. The badge is the signal. */ .admin-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: calc(1.375rem * var(--font-scale)); padding-inline: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: var(--radius-sm); white-space: nowrap; } /* One tenant. Reuses the connection anatomy — same job, different noun. */ .tenant { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); } .tenant-code { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); } .tenant-name { font-size: var(--text-sm); color: var(--text-muted); } .tenant-state { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-sm); } /* Provisioning state. An account with no databases cannot be signed in to at all, which is a different thing from being disabled — so they never share a colour. */ .provision { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-semibold); padding-inline: var(--space-1-5); height: calc(1.25rem * var(--font-scale)); border-radius: var(--radius-sm); white-space: nowrap; } .provision[data-state="ready"] { background: var(--success-quiet); color: var(--success); } .provision[data-state="none"] { background: var(--warning-quiet); color: var(--warning); } .provision[data-state="disabled"] { background: var(--surface-sunken); color: var(--text-muted); } /* One-time secret reveal. Generated passwords are returned exactly once and stored only as a hash. This is the only place in the system where losing what is on screen loses data, so it is the loudest surface in the design — inverse, monospace, with a copy affordance. */ .secret { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .secret-title { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); } .secret-detail { font-size: var(--text-sm); color: color-mix(in oklab, var(--text-on-inverse) 72%, transparent); } .secret-value { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2-5) var(--space-3); background: oklch(0.99 0 0 / 0.10); border: var(--border-width) solid oklch(0.99 0 0 / 0.22); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-md); letter-spacing: 0.02em; overflow-wrap: anywhere; } .secret-value > .spacer { flex: 1; } .secret .btn-inverse { --btn-bg: oklch(0.99 0 0 / 0.14); --btn-fg: var(--text-on-inverse); --btn-bg-hover: oklch(0.99 0 0 / 0.24); } /* ============ Permissions: capabilities, scopes, resolution ============ */ /* Capability chip — one granted (or withheld) ability, as a read-only statement. Used in resolved views, never as a control. */ .cap { display: inline-flex; align-items: center; gap: var(--space-1); height: calc(1.375rem * var(--font-scale)); padding-inline: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-muted); border: var(--border-width) solid transparent; } .cap[data-state="granted"] { background: var(--success-quiet); color: var(--success); } .cap[data-state="admin"] { background: var(--accent); color: var(--text-on-accent); } .cap[data-state="readonly"] { background: var(--warning-quiet); color: var(--warning); } .cap[data-state="none"] { background: transparent; border-color: var(--border-default); color: var(--text-subtle); } .cap-set { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; } /* ---- Capability matrix ---- A checkbox grid cannot express this model on its own, because a workspace row REPLACES the account row rather than adding to it. So inherited values render as ghosts in the cell: an empty row visibly shows what it is inheriting, and a row with any tick of its own visibly stops inheriting. */ .cap-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); } .cap-matrix th { padding: var(--space-2) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); border-bottom: var(--border-width) solid var(--border-default); text-align: center; white-space: nowrap; vertical-align: bottom; } .cap-matrix th:first-child { text-align: left; width: 40%; } .cap-matrix td { padding: var(--space-2); text-align: center; border-bottom: var(--border-width) solid var(--border-subtle); } .cap-matrix td:first-child { text-align: left; } .cap-matrix tbody tr:last-child td { border-bottom: 0; } /* The account-wide row is the baseline every workspace row is read against. */ .cap-matrix tr[data-scope="account"] td { background: var(--surface-inset); } .cap-matrix tr[data-scope="account"] td:first-child { font-weight: var(--weight-semibold); color: var(--text-strong); } .cap-scope { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cap-scope > .name { color: var(--text-strong); } .cap-scope > .state { font-size: var(--text-xs); font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: var(--space-1); } .cap-scope > .state[data-override="false"] { color: var(--text-subtle); } .cap-scope > .state[data-override="true"] { color: var(--accent-text); } /* The control itself. `inherited` is the ghost state — not ticked here, but in force via the account row. */ .cap-box { position: relative; display: inline-grid; place-items: center; width: calc(1.25rem * var(--font-scale)); height: calc(1.25rem * var(--font-scale)); border-radius: var(--radius-xs); cursor: pointer; background: var(--surface-raised); border: var(--border-width-thick) solid var(--border-strong); color: transparent; transition: var(--transition-control); } .cap-box:hover { border-color: var(--accent); } .cap-box[data-state="on"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .cap-box[data-state="off"] { background: var(--surface-raised); } .cap-box[data-state="inherited"] { background: transparent; border-style: dashed; border-color: var(--border-default); color: var(--text-subtle); } .cap-box[data-state="blocked"] { background: var(--surface-sunken); border-color: var(--border-subtle); color: var(--text-subtle); cursor: not-allowed; opacity: 0.6; } .cap-box > i { font-size: 0.62em; } /* A capability that REMOVES something rather than granting it cannot look like the ones that grant. Restricting controls are amber and carry a minus, not a tick. */ .cap-box[data-restricting="true"][data-state="on"] { background: var(--warning); border-color: var(--warning); color: var(--sand-950); } .cap-matrix th[data-restricting="true"] { color: var(--warning); } .cap-matrix th[data-restricting="true"]::after { content: "restricts"; display: block; font-size: 0.625rem; font-weight: var(--weight-regular); letter-spacing: var(--tracking-normal); text-transform: none; color: var(--text-subtle); } .cap-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } .cap-legend > span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); } /* ---- Resolved access matrix ---- Users down, workspaces across, the ANSWER in each cell. The inputs are in the role editor; this is the only place that shows what they add up to. */ .access-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); } .access-matrix th, .access-matrix td { padding: var(--space-2) var(--space-3); text-align: left; } .access-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-inset); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); border-bottom: var(--border-width) solid var(--border-default); white-space: nowrap; } .access-matrix tbody td { border-bottom: var(--border-width) solid var(--border-subtle); } .access-matrix tbody tr:last-child td { border-bottom: 0; } .access-matrix tbody tr:hover { background: var(--surface-hover); } .access-matrix td:first-child, .access-matrix th:first-child { position: sticky; inset-inline-start: 0; background: var(--surface-raised); z-index: 1; min-width: 13rem; } .access-matrix thead th:first-child { z-index: 3; background: var(--surface-inset); } /* One resolved answer. Clickable, because "why?" is the next question. */ .access-cell { display: inline-flex; align-items: center; gap: var(--space-1-5); height: calc(1.625rem * var(--font-scale)); padding-inline: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface-inset); color: var(--text-muted); border: var(--border-width) solid transparent; transition: var(--transition-control); } .access-cell:hover { border-color: var(--accent); } .access-cell[data-access="admin"] { background: var(--accent); color: var(--text-on-accent); } .access-cell[data-access="edit"] { background: var(--success-quiet); color: var(--success); } .access-cell[data-access="edit-readonly-files"] { background: var(--warning-quiet); color: var(--warning); } .access-cell[data-access="view"] { background: var(--info-quiet); color: var(--info); } .access-cell[data-access="none"] { background: transparent; border-color: var(--border-default); color: var(--text-subtle); } .access-cell[data-access="owner"] { background: var(--accent-quiet); color: var(--accent-text); } /* An asterisk marks a cell whose answer did not come from the user's roles — an exception or ownership decided it. Those are the ones worth auditing. */ .access-cell[data-decided-by="exception"]::after, .access-cell[data-decided-by="ownership"]::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } /* ---- Resolution trace ---- The backend resolves in a fixed, documented order. Showing that order as a trace is what makes the system learnable instead of guessable: each step says what it did, and the step that actually decided the outcome is marked. */ .resolve { display: flex; flex-direction: column; } .resolve-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-4); position: relative; } .resolve-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); } .resolve-node { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: var(--radius-circle); font-size: 0.625rem; font-weight: var(--weight-bold); background: var(--surface-inset); color: var(--text-muted); border: var(--border-width) solid var(--border-subtle); z-index: 1; } .resolve-line { flex: 1; width: 2px; background: var(--border-subtle); border-radius: 1px; } .resolve-step:last-child .resolve-line { display: none; } .resolve-body { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; padding-top: 2px; } .resolve-what { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); } .resolve-detail { font-size: var(--text-sm); color: var(--text-muted); } /* A step that changed nothing is dimmed — the eye should land on the ones that did. */ .resolve-step[data-effect="none"] { opacity: 0.55; } .resolve-step[data-effect="none"] .resolve-what { font-weight: var(--weight-medium); color: var(--text-body); } .resolve-step[data-effect="grant"] .resolve-node { background: var(--success-quiet); color: var(--success); border-color: transparent; } .resolve-step[data-effect="replace"] .resolve-node { background: var(--accent); color: var(--text-on-accent); border-color: transparent; } .resolve-step[data-effect="remove"] .resolve-node { background: var(--warning); color: var(--sand-950); border-color: transparent; } .resolve-step[data-effect="final"] .resolve-node { background: var(--surface-inverse); color: var(--text-on-inverse); border-color: transparent; } /* The step that decided the outcome. */ .resolve-step[data-decisive="true"] .resolve-body { padding: var(--space-2) var(--space-3); margin-top: -2px; background: var(--surface-selected); border-radius: var(--radius-md); border-inline-start: 2px solid var(--accent); } /* Running result after a step. */ .resolve-result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-subtle); } .resolve-result > .arrow { color: var(--text-subtle); } /* ============ Module-scoped search ============ */ /* Search belongs to a module, never to the whole app — a result set spanning an email archive and a workout log answers nobody's question. The scope chip sits inside the field so the field can never be read as global. */ .search-scope { display: inline-flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; height: calc(1.375rem * var(--font-scale)); padding-inline: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; border-radius: var(--radius-sm); background: var(--accent-quiet); color: var(--accent-text); } .search-scope > i { font-size: 0.9em; opacity: 0.8; } /* ============ Folder path composer ============ */ /* Creating or renaming a folder is really editing one segment of a path. Showing the immutable parent as a prefix and the resulting full path live underneath removes the guesswork — and makes a rename's blast radius obvious. */ .path-build { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .path-field { display: flex; align-items: stretch; min-width: 0; border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-inset); transition: var(--transition-control); } .path-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 var(--ring-width) var(--focus-ring); } .path-prefix { display: flex; align-items: center; gap: var(--space-1); flex: 0 1 auto; min-width: 0; max-width: 55%; padding-inline: var(--control-pad-x); background: var(--surface-inset); border-inline-end: var(--border-width) solid var(--border-subtle); border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; } .path-prefix > span { direction: ltr; overflow: hidden; text-overflow: ellipsis; } .path-field > input { flex: 1 1 auto; min-width: 6rem; height: var(--control-height); padding-inline: var(--control-pad-x); border: 0; background: none; outline: none; font-family: var(--font-ui); font-size: var(--text-base); color: var(--text-strong); } .path-result { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-muted); } .path-result > .value { font-family: var(--font-mono); color: var(--text-strong); overflow-wrap: anywhere; min-width: 0; } .path-result[data-changed="true"] > .value { color: var(--accent-text); } /* ============ Selected folder ============ */ .folder-head { display: flex; flex-direction: column; gap: var(--space-3); } .folder-title { display: flex; align-items: center; gap: var(--space-2-5); min-width: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--text-strong); letter-spacing: var(--tracking-tight); } .folder-title > .glyph { flex: 0 0 auto; color: var(--amber-500); font-size: 0.8em; } .folder-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); } /* A row in the folder's contents — a sub-folder or a document, side by side, so the shape of the folder is readable in one pass. */ .content-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--row-pad-y) var(--space-3); border-bottom: var(--border-width) solid var(--border-subtle); text-decoration: none; color: inherit; cursor: pointer; min-width: 0; transition: background-color var(--duration-instant) var(--ease-out); } .content-row:last-child { border-bottom: 0; } .content-row:hover { background: var(--surface-hover); } .content-row > .glyph { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--surface-inset); font-size: var(--text-sm); } .content-row[data-kind="folder"] > .glyph { color: var(--amber-500); } .content-row[data-kind="document"] > .glyph { color: var(--text-muted); } .content-row > .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .content-row .name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .content-row .sub { font-size: var(--text-xs); color: var(--text-muted); } .content-row[data-archived="true"] .name { text-decoration: line-through; color: var(--text-subtle); } .content-row > .aside { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-3); } /* ---- Deep nesting ---- A folder can nest arbitrarily. Indenting alone stops working after two or three levels — the rows drift right, names get squeezed, and you lose track of which parent you are under. So depth is carried two ways instead: .content-row[data-depth] indents modestly (12px a level, capped) AND draws guide lines, so structure stays legible without eating the name column; .content-row > .path names the ancestor chain on rows deeper than one level, so a row is self-describing even when the tree above it is scrolled out of view. Depth is capped at 6 visually; deeper rows keep the level-6 indent and rely on the path line. A tree that needs more than six levels has a content problem. */ .content-row { position: relative; } .content-row[data-depth="1"] { padding-inline-start: calc(var(--space-3) + 1.25rem); } .content-row[data-depth="2"] { padding-inline-start: calc(var(--space-3) + 2.5rem); } .content-row[data-depth="3"] { padding-inline-start: calc(var(--space-3) + 3.75rem); } .content-row[data-depth="4"] { padding-inline-start: calc(var(--space-3) + 5rem); } .content-row[data-depth="5"] { padding-inline-start: calc(var(--space-3) + 6.25rem); } .content-row[data-depth="6"] { padding-inline-start: calc(var(--space-3) + 7.5rem); } /* Guide lines: one per ancestor level, so the eye can run straight up to the parent. */ .content-row[data-depth]::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--space-3) + 0.5rem); width: 1px; background: var(--border-subtle); } .content-row[data-depth="0"]::before { display: none; } /* The elbow into the row itself. */ .content-row[data-depth]:not([data-depth="0"]) > .elbow { position: absolute; inset-inline-start: calc(var(--space-3) + 0.5rem); top: 50%; width: 0.75rem; height: 1px; background: var(--border-subtle); } .content-row[data-depth="1"] > .elbow { inset-inline-start: calc(var(--space-3) + 0.5rem); } .content-row[data-depth="2"] > .elbow { inset-inline-start: calc(var(--space-3) + 1.75rem); } .content-row[data-depth="3"] > .elbow { inset-inline-start: calc(var(--space-3) + 3rem); } .content-row[data-depth="4"] > .elbow { inset-inline-start: calc(var(--space-3) + 4.25rem); } .content-row[data-depth="5"] > .elbow { inset-inline-start: calc(var(--space-3) + 5.5rem); } .content-row[data-depth="6"] > .elbow { inset-inline-start: calc(var(--space-3) + 6.75rem); } /* Ancestor chain, shown from depth 2 down. Truncates from the LEFT — the nearest parent matters more than the root, which the breadcrumb already names. */ .content-row > .path { display: block; font-size: var(--text-xs); color: var(--text-subtle); font-family: var(--font-mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; } .content-row > .text > .path { margin-top: 1px; } /* Collapsing a branch inside a flat list. */ .content-row > .branch-toggle { position: absolute; inset-inline-start: 0; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-xs); color: var(--text-subtle); background: var(--surface-raised); font-size: var(--text-xs); cursor: pointer; z-index: 1; transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .content-row > .branch-toggle:hover { color: var(--text-strong); background: var(--surface-active); } .content-row[aria-expanded="true"] > .branch-toggle { transform: rotate(90deg); } .content-row[data-depth="1"] > .branch-toggle { inset-inline-start: 1.25rem; } .content-row[data-depth="2"] > .branch-toggle { inset-inline-start: 2.5rem; } .content-row[data-depth="3"] > .branch-toggle { inset-inline-start: 3.75rem; } .content-row[data-depth="4"] > .branch-toggle { inset-inline-start: 5rem; } .content-row[data-depth="5"] > .branch-toggle { inset-inline-start: 6.25rem; } .content-row[data-depth="6"] > .branch-toggle { inset-inline-start: 7.5rem; } /* A row hidden because an ancestor is collapsed. */ .content-row[hidden] { display: none; } /* Depth counter for folders that branch further than the list shows. */ .deeper { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-subtle); } /* On phones the indent budget is gone — drop to a flat list and let the ancestor path carry structure entirely. */ @media (max-width: 47.99rem) { .content-row[data-depth] { padding-inline-start: var(--space-3); } .content-row[data-depth]::before, .content-row > .elbow { display: none; } .content-row > .branch-toggle { position: static; translate: none; } .content-row > .path { direction: ltr; } } /* ---- Deep nesting in the sidebar tree ---- Same problem, tighter budget. The tree indents 0.6rem a level and caps at 8, with a guide line per level. */ .doc-tree .tree-children { margin-inline-start: var(--space-2); padding-inline-start: var(--space-2-5); } .doc-tree .tree-item { position: relative; } /* ============ Docs / wiki ============ */ .doc-header { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); margin-bottom: var(--space-6); } .doc-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--text-strong); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .doc-byline { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); } .doc-space { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; } .doc-space .mark { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-xs); background: var(--accent-quiet); color: var(--accent-text); font-size: 0.625rem; font-weight: var(--weight-bold); } .callout { display: flex; gap: var(--space-3); padding: var(--space-4); background: var(--accent-quiet); border-radius: var(--radius-md); border-inline-start: 3px solid var(--accent); font-size: var(--text-base); } .callout > .callout-icon { flex: 0 0 auto; color: var(--accent); margin-top: 0.1em; } .callout > .callout-body { flex: 1; min-width: 0; } .callout[data-tone="warning"] { background: var(--warning-quiet); border-inline-start-color: var(--warning); } .callout[data-tone="warning"] > .callout-icon { color: var(--warning); } .callout[data-tone="danger"] { background: var(--danger-quiet); border-inline-start-color: var(--danger); } .callout[data-tone="danger"] > .callout-icon { color: var(--danger); } .callout[data-tone="success"] { background: var(--success-quiet); border-inline-start-color: var(--success); } .callout[data-tone="success"] > .callout-icon { color: var(--success); } .callout[data-tone="neutral"] { background: var(--surface-inset); border-inline-start-color: var(--border-strong); } .callout[data-tone="neutral"] > .callout-icon { color: var(--text-muted); } /* ============ Global search ============ */ .result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3) var(--space-4); padding: var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); text-decoration: none; color: inherit; cursor: pointer; } .result:hover { background: var(--surface-hover); } .result-kind { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--surface-inset); color: var(--text-muted); font-size: var(--text-sm); } .result-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .result-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-snug); } .result-title mark { background: var(--amber-100); } .result-path { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); } .result-snippet { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .result-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-subtle); } .result-thumbs { display: flex; gap: var(--space-1); } .result-thumbs img { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius-xs); } /* Type-scope tabs for search (All / Docs / Mail / Photos / ...). */ .scope-bar { display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; } /* ============ Settings / admin ============ */ .settings-row { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--border-subtle); } .settings-row:last-child { border-bottom: 0; } .settings-text { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } .settings-name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-strong); } .settings-desc { font-size: var(--text-sm); color: var(--text-muted); max-width: 46ch; } .settings-control { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2); } /* FIX-BRIEF-R5 section 1: below 48rem, a switch stays on the row next to its label (same layout as desktop, just tighter); a select or segmented control drops below the label instead, since it's too wide to sit next to it at this width. Placed after the base rules above on purpose - a phone override living in the general responsive section earlier in this file was silently beaten by these unconditional ones on equal specificity, which is what caused the original bug (.settings- text's 18rem desktop flex-basis, meant as a width, becoming a 288px-tall flex item once a row flipped to a column). */ @media (max-width: 47.99rem) { .settings-row:has(.select), .settings-row:has(.segmented), .settings-row:has(#ds-hidden-calendars-list) { flex-direction: column; align-items: stretch; gap: var(--space-2); } .settings-row:has(.select) .settings-text, .settings-row:has(.segmented) .settings-text, .settings-row:has(#ds-hidden-calendars-list) .settings-text { flex: 1 1 auto; } .settings-row:has(.select) .settings-control, .settings-row:has(.segmented) .settings-control, .settings-row:has(#ds-hidden-calendars-list) .settings-control { justify-content: flex-start; } } /* Connection card — one per replicated source (Gmail, PolarSteps, TrainHeroic...). */ .connection { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); flex-wrap: wrap; } .connection-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--surface-inset); color: var(--text-muted); font-size: var(--text-md); } .connection-text { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); } .connection-name { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); } .connection-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); } /* ==== css/utilities.css ==== */ /* UTILITIES — a deliberately short list. Anything used more than a few times should become a component class, not a utility. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 200; transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-out); } .skip-link:focus { transform: none; } [hidden] { display: none !important; } .hide { display: none !important; } @media (max-width: 62rem) { .hide-md-down { display: none !important; } } @media (max-width: 48rem) { .hide-sm-down { display: none !important; } } @media (min-width: 62.001rem) { .hide-lg-up { display: none !important; } } .text-strong { color: var(--text-strong) } .text-body { color: var(--text-body) } .text-muted { color: var(--text-muted) } .text-subtle { color: var(--text-subtle) } .text-accent { color: var(--accent-text) } .text-success { color: var(--success) } .text-warning { color: var(--warning) } .text-danger { color: var(--danger) } .text-left { text-align: left } .text-center { text-align: center } .text-right { text-align: right } .fw-regular { font-weight: var(--weight-regular) } .fw-medium { font-weight: var(--weight-medium) } .fw-semibold { font-weight: var(--weight-semibold) } .fw-bold { font-weight: var(--weight-bold) } .font-display { font-family: var(--font-display) } .font-ui { font-family: var(--font-ui) } .font-mono { font-family: var(--font-mono) } .surface-raised { background: var(--surface-raised) } .surface-inset { background: var(--surface-inset) } .surface-sunken { background: var(--surface-sunken) } .bordered { border: var(--border-width) solid var(--border-subtle) } .border-top { border-top: var(--border-width) solid var(--border-subtle) } .border-bottom { border-bottom: var(--border-width) solid var(--border-subtle) } .rounded { border-radius: var(--radius-md) } .rounded-lg { border-radius: var(--radius-lg) } .rounded-pill { border-radius: var(--radius-pill) } .rounded-circle { border-radius: var(--radius-circle) } .shadow-sm { box-shadow: var(--shadow-sm) } .shadow-md { box-shadow: var(--shadow-md) } .shadow-lg { box-shadow: var(--shadow-lg) } .shadow-none { box-shadow: none } .full { width: 100% } .full-h { height: 100% } .min-w-0 { min-width: 0 } .flex-1 { flex: 1; min-width: 0 } .flex-none { flex: 0 0 auto } .relative { position: relative } .clickable { cursor: pointer } .not-allowed { cursor: not-allowed } .no-select { user-select: none } .aspect-square { aspect-ratio: 1 } .aspect-photo { aspect-ratio: 3 / 2 } .aspect-video { aspect-ratio: 16 / 9 } .object-cover { object-fit: cover; width: 100%; height: 100% } @media print { .sidebar, .topbar, .toolbar, .toast-region, .pane-meta, .filter-bar, .bulk-bar, .pagination { display: none !important; } body { background: white; color: black; } .card, .panel, .table-wrap { box-shadow: none; border-color: #ddd; break-inside: avoid; } a { color: black; } } /* ============ Calendar archive, round 14 (v1.8.0) ============ Calendar colours come from Google. Never paint them raw: set --cal on the element (inline, from Calendars.BackgroundColour or the event colour) and these rules derive a tinted fill, a solid edge and a readable ink that hold in light, dark and sepia. */ :root { --cal-fill: 15%; --cal-ink: 42%; --cal-row: 3rem; } [data-theme="dark"] { --cal-fill: 24%; --cal-ink: 30%; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --cal-fill: 24%; --cal-ink: 30%; } } .cal-swatch { display: inline-block; width: 0.625rem; height: 0.625rem; flex: 0 0 auto; border-radius: 3px; background: var(--cal, var(--accent)); } .cal-swatch[data-kind="subscribed"] { background: transparent; box-shadow: inset 0 0 0 2px var(--cal); } /* Events carrying --cal override the round-13 data-cal presets. */ .cal-event[style*="--cal"], .cal-block[style*="--cal"], .cal-bar[style*="--cal"] { background: color-mix(in oklab, var(--cal) var(--cal-fill), var(--surface-raised)); border-inline-start-color: var(--cal); color: color-mix(in oklab, var(--cal) var(--cal-ink), var(--text-strong)); } .cal-event[style*="--cal"]:hover { background: color-mix(in oklab, var(--cal) calc(var(--cal-fill) + 8%), var(--surface-raised)); } /* Subscribed (holidays, birthdays): lighter than your own. Outline, no fill. */ [data-kind="subscribed"].cal-event, [data-kind="subscribed"].cal-bar, [data-kind="subscribed"].cal-block { background: var(--surface-raised); border: var(--border-width) solid color-mix(in oklab, var(--cal) 45%, transparent); border-inline-start: 2px solid var(--cal); } /* Archive states. Present has no marker at all. */ [data-state="cancelled"] > .title, [data-state="cancelled"] .cal-title { text-decoration: line-through; text-decoration-color: color-mix(in oklab, currentColor 55%, transparent); } [data-state="cancelled"].cal-event, [data-state="cancelled"].cal-block, [data-state="cancelled"].agenda-row, [data-state="cancelled"].cal-drow, [data-declined="true"].cal-event, [data-declined="true"].cal-block, [data-declined="true"].agenda-row, [data-declined="true"].cal-drow { opacity: 0.62; } [data-declined="true"].cal-event, [data-declined="true"].cal-block { background: var(--surface-raised); border: var(--border-width) dashed color-mix(in oklab, var(--cal) 60%, transparent); border-inline-start: 2px solid var(--cal); } /* .cal-drow is a plain table-like row, not a coloured chip - cancelled/declined just fade it (above), and busy reuses the italic treatment .cal-block/.cal-bar fall back to when there's no room for a chip. */ [data-busy="true"].cal-drow { font-style: italic; color: var(--text-muted); } /* Free/busy only, and private events on a shared calendar. */ [data-busy="true"].cal-event, [data-busy="true"].cal-block { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--cal) 22%, var(--surface-raised)) 0 4px, var(--surface-raised) 4px 8px); color: var(--text-muted); font-style: italic; } .cal-flag { display: inline-flex; align-items: center; gap: 3px; height: 1.05rem; padding-inline: 4px; flex: 0 0 auto; border-radius: var(--radius-xs); font-size: 10.5px; font-weight: var(--weight-semibold); line-height: 1; letter-spacing: 0.02em; background: var(--surface-inset); color: var(--text-muted); font-style: normal; text-decoration: none; } .cal-flag[data-tone="warning"] { background: var(--warning-quiet); color: var(--warning); } .cal-flag[data-tone="info"] { background: var(--info-quiet); color: var(--info); } /* View header: date nav · period title · view switch · scoped search · display menu. */ .cal-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); background: var(--surface-raised); } .cal-period { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: var(--tracking-tight, -0.018em); white-space: nowrap; } /* The period label is a button that opens the period picker (7a/7b). */ button.cal-period { border: 0; background: none; padding: var(--space-1) var(--space-1-5); margin-inline: calc(var(--space-1-5) * -1); border-radius: var(--radius-xs); cursor: pointer; } button.cal-period:hover { background: var(--surface-hover); } /* Empty until a state banner (first sync, access lost, ...) is pushed into it - no reserved space. */ #cal-status-banner-host:empty { display: none; } #cal-pane-scroll > .tab-panel { padding-top: 0; } .cal-period .sub { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-muted); letter-spacing: 0; margin-inline-start: var(--space-2); } /* Month with spanning bars. One .cal-mrow per week: day cells fill every row (grid-row: 1 / -1) as the background layer; bars sit on rows 2+ with grid-column spans. */ .cal-month { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: clip; } .cal-month[data-weeknums="true"] .cal-mrow, .cal-month[data-weeknums="true"] .cal-mhead { grid-template-columns: 2rem repeat(var(--cal-days, 7), minmax(0, 1fr)); } .cal-mhead { display: grid; grid-template-columns: repeat(var(--cal-days, 7), minmax(0, 1fr)); background: var(--surface-inset); border-bottom: var(--border-width) solid var(--border-subtle); } .cal-mrow { display: grid; grid-template-columns: repeat(var(--cal-days, 7), minmax(0, 1fr)); grid-template-rows: 1.75rem repeat(4, 1.375rem) 1.375rem; row-gap: 2px; min-height: 8.25rem; border-bottom: var(--border-width) solid var(--border-subtle); } .cal-mrow:last-child { border-bottom: 0; } .cal-mcell { grid-row: 1 / -1; border-inline-end: var(--border-width) solid var(--border-subtle); padding: var(--space-1) var(--space-1-5); } .cal-mcell:last-of-type { border-inline-end: 0; } .cal-mcell[data-outside="true"] { background: var(--surface-inset); } .cal-mcell[data-outside="true"] .cal-daynum { color: var(--text-subtle); } .cal-mcell[data-weekend="true"] { background: color-mix(in oklab, var(--surface-inset) 45%, var(--surface-raised)); } .cal-weeknum { grid-row: 1 / -1; font-size: 10.5px; color: var(--text-subtle); padding: var(--space-1-5) 0; text-align: center; font-variant-numeric: tabular-nums; border-inline-end: var(--border-width) solid var(--border-subtle); background: var(--surface-inset); } .cal-bar { display: flex; align-items: center; gap: var(--space-1); min-width: 0; margin-inline: 3px; padding-inline: var(--space-1-5); border-radius: var(--radius-xs); border-inline-start: 2px solid var(--accent); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; z-index: 1; cursor: pointer; } .cal-bar > .title { overflow: hidden; text-overflow: ellipsis; } .cal-bar > .time { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: var(--weight-regular); } .cal-bar[data-timed="true"] { background: transparent !important; border-inline-start: 0; } .cal-bar[data-timed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cal); flex: 0 0 auto; } .cal-bar[data-continues="true"] { border-start-end-radius: 0; border-end-end-radius: 0; margin-inline-end: 0; } .cal-bar[data-continued="true"] { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: 0; border-inline-start-width: 0; } .cal-bar[aria-selected="true"] { box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--cal, var(--accent)); z-index: 2; } .cal-mrow .cal-more { align-self: center; z-index: 1; } /* Day / week / 4-day time grid. Blocks are placed with --s (start hour, decimal), --d (duration), and for overlaps --i (lane) of --n (lanes). */ .cal-tg { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-raised); overflow: clip; display: flex; flex-direction: column; } .cal-tg-cols { display: grid; grid-template-columns: 3.5rem repeat(var(--days, 7), minmax(0, 1fr)); } .cal-tg-dayhead { padding: var(--space-2) var(--space-2); display: flex; align-items: baseline; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); border-inline-start: var(--border-width) solid var(--border-subtle); } .cal-tg-dayhead .n { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-strong); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; } .cal-tg-dayhead[data-today="true"] .n { color: var(--accent-text); } .cal-tg-allday { display: grid; grid-template-columns: 3.5rem repeat(var(--days, 7), minmax(0, 1fr)); grid-auto-rows: 1.375rem; row-gap: 2px; padding-block: var(--space-1); border-block: var(--border-width) solid var(--border-subtle); background: var(--surface-inset); } .cal-tg-allday > .label { grid-row: 1 / span 3; font-size: 10.5px; color: var(--text-subtle); text-align: right; padding-inline-end: var(--space-2); align-self: center; } .cal-tg-body { display: grid; grid-template-columns: 3.5rem repeat(var(--days, 7), minmax(0, 1fr)); overflow: auto; } .cal-tg-rail > div { height: var(--cal-row); font-size: 10.5px; color: var(--text-subtle); text-align: right; padding-inline-end: var(--space-2); transform: translateY(-0.45em); font-variant-numeric: tabular-nums; } .cal-tg-col { position: relative; border-inline-start: var(--border-width) solid var(--border-subtle); background-image: linear-gradient(var(--border-subtle) 1px, transparent 1px); background-size: 100% var(--cal-row); } .cal-tg-col[data-weekend="true"] { background-color: color-mix(in oklab, var(--surface-inset) 45%, var(--surface-raised)); } .cal-block { position: absolute; top: calc((var(--s) - var(--h0, 0)) * var(--cal-row) + 1px); height: calc(var(--d) * var(--cal-row) - 3px); left: calc(var(--i, 0) / var(--n, 1) * 100% + 2px); width: calc(100% / var(--n, 1) - 4px); display: flex; flex-direction: column; gap: 1px; padding: 3px var(--space-1-5); overflow: hidden; border-radius: var(--radius-xs); border-inline-start: 3px solid var(--accent); font-size: var(--text-xs); line-height: 1.25; cursor: pointer; } /* Lines keep their height; overflow drops whole lines from the bottom, never halves of every line. */ .cal-block > * { flex-shrink: 0; } /* Blocks under 1.5 h have no room for a chip; put the state in .when instead. */ .cal-block .cal-title { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; } .cal-block .when { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-block[aria-selected="true"] { box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--cal, var(--accent)); z-index: 3; } .cal-tg .cal-now { top: calc((var(--s) - var(--h0, 0)) * var(--cal-row)); } /* Under 45 minutes: one line, title then time. */ .cal-block[data-short="true"] { flex-direction: row; align-items: baseline; gap: var(--space-1-5); padding-block: 1px; } .cal-block[data-short="true"] .cal-title { flex: 0 1 auto; white-space: nowrap; } .cal-block[data-short="true"] .when { flex: 1 1 0; min-width: 0; } /* Four or more overlapping lanes: cascade instead of splitting, each block offset 14% and 72% wide, later lanes on top with a surface ring so edges stay distinct. */ .cal-block[data-cascade="true"] { left: calc(var(--i) * 14% + 2px); width: calc(72% - 4px); z-index: calc(1 + var(--i)); box-shadow: 0 0 0 1.5px var(--surface-raised); } .cal-block[data-cascade="true"]:hover { z-index: 10; } /* Density heat: 0 = no events … 4 = busiest. Neutral scale by default; set --cal for a calendar's hue. */ .heat { background: var(--surface-inset); border-radius: 2px; } .heat[data-l="1"] { background: color-mix(in oklab, var(--cal, var(--accent)) 20%, var(--surface-inset)); } .heat[data-l="2"] { background: color-mix(in oklab, var(--cal, var(--accent)) 42%, var(--surface-inset)); } .heat[data-l="3"] { background: color-mix(in oklab, var(--cal, var(--accent)) 66%, var(--surface-inset)); } .heat[data-l="4"] { background: var(--cal, var(--accent)); } .heat[data-hit="true"] { box-shadow: 0 0 0 1.5px var(--text-strong); } .heat-legend { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--text-muted); } .heat-legend .heat { width: 11px; height: 11px; } /* Year: twelve mini months. */ .cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-6) var(--space-5); } .cal-mini-title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); display: flex; justify-content: space-between; margin-bottom: var(--space-1-5); } .cal-mini-title .count { font-family: var(--font-ui); font-weight: var(--weight-regular); color: var(--text-subtle); font-size: var(--text-xs); } .cal-mini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } .cal-mini > .dow { font-size: 10px; color: var(--text-subtle); text-align: center; } .cal-mini > .heat { aspect-ratio: 1; display: grid; place-items: center; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-muted); cursor: pointer; } .cal-mini > .heat[data-l="3"], .cal-mini > .heat[data-l="4"] { color: var(--text-on-accent); } .cal-mini > .blank { aspect-ratio: 1; } .cal-mini > .heat[data-today="true"] { box-shadow: 0 0 0 1.5px var(--accent); } /* Timeline: 20 years on one screen. Rows = years, 53 week columns. Span bars overlay a year row. */ .cal-tl { display: grid; grid-template-columns: 3rem minmax(0, 1fr) 4rem; gap: 3px var(--space-2); align-items: center; } .cal-tl-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); font-size: 10.5px; color: var(--text-subtle); } .cal-tl-year { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; } .cal-tl-row { position: relative; display: grid; grid-template-columns: repeat(53, minmax(0, 1fr)); gap: 2px; height: 1.25rem; } .cal-tl-row > .heat { cursor: pointer; } .cal-tl-row > .heat:hover { box-shadow: 0 0 0 1.5px var(--text-strong); } .cal-tl-count { font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; } .cal-tl-span { position: absolute; bottom: -3px; height: 3px; border-radius: 2px; background: var(--cal); pointer-events: none; } /* Agenda additions: sticky "when am I" header and collapsed empty stretches. */ .cal-agenda-head { position: sticky; top: 0; z-index: 4; display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2-5) var(--space-4); background: color-mix(in oklab, var(--surface-page) 92%, transparent); backdrop-filter: blur(6px); border-bottom: var(--border-width) solid var(--border-subtle); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); } .cal-agenda-head .year { color: var(--text-muted); font-weight: var(--weight-regular); } .cal-gap { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1-5) var(--space-4); font-size: var(--text-xs); color: var(--text-subtle); } .cal-gap::before, .cal-gap::after { content: ""; flex: 1; border-top: var(--border-width) dashed var(--border-subtle); } .agenda-row > .agenda-time[data-allday="true"] { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .agenda-row .agenda-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } /* Year jump rail beside search results. */ .cal-yearrail { display: flex; flex-direction: column; gap: 1px; position: sticky; top: var(--space-3); } .cal-yearrail > a { display: flex; justify-content: space-between; gap: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; font-variant-numeric: tabular-nums; } .cal-yearrail > a:hover { background: var(--surface-hover); color: var(--text-strong); } .cal-yearrail > a[aria-current="true"] { background: var(--accent-quiet); color: var(--accent-text); font-weight: var(--weight-semibold); } .cal-yearrail > a[data-empty="true"] { color: var(--text-subtle); opacity: 0.55; pointer-events: none; } /* Version diff: one row per changed field. */ .cal-diff { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background: var(--surface-inset); border-radius: var(--radius-md); } .cal-diff > dt { color: var(--text-muted); font-size: var(--text-xs); padding-top: 2px; } .cal-diff > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .cal-diff del { color: var(--text-muted); text-decoration-color: color-mix(in oklab, var(--danger) 60%, transparent); } .cal-diff ins { text-decoration: none; color: var(--text-strong); background: var(--success-quiet); border-radius: 3px; padding-inline: 2px; } .cal-diff .arrow { color: var(--text-subtle); margin-inline: var(--space-1); } /* Time-zone line under an event's time. */ .cal-tz { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Raw JSON viewer: utility, not decoration. */ .cal-raw { margin: 0; padding: var(--space-3) var(--space-4); max-height: 32rem; overflow: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text-body); background: var(--surface-inset); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-md); tab-size: 2; white-space: pre; } .cal-raw .k { color: var(--accent-text); } .cal-raw .s { color: var(--success); } .cal-raw .n { color: var(--info); } .cal-raw .c { color: var(--text-subtle); } /* On this day: one card per past year. */ .cal-otd { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); } .cal-otd-year { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-strong); line-height: 1; } .cal-otd-year .ago { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-subtle); margin-top: var(--space-1); } /* ============ Calendar navigation, round 14b (v1.8.1) ============ */ /* Heat colour ramp as custom properties, for gradients (scrubber, compact bars). */ .cal-scrub, .cal-picker { --h0: var(--surface-inset); --h1: color-mix(in oklab, var(--accent) 20%, var(--surface-inset)); --h2: color-mix(in oklab, var(--accent) 42%, var(--surface-inset)); --h3: color-mix(in oklab, var(--accent) 66%, var(--surface-inset)); --h4: var(--accent); } /* Period picker: opens from .cal-period. Months of one year, or all years. */ .cal-picker { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); width: 21rem; } .cal-picker-head { display: flex; align-items: center; gap: var(--space-1); } .cal-picker-head .title { flex: 1; font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); text-align: center; font-variant-numeric: tabular-nums; } .cal-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); } .cal-picker-cell { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: var(--space-2) var(--space-2) var(--space-1-5); border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; font-size: var(--text-sm); color: var(--text-strong); text-align: left; cursor: pointer; } .cal-picker-cell > .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-1); } .cal-picker-cell .count { font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; } .cal-picker-cell .heat { height: 4px; } .cal-picker-cell:hover { background: var(--surface-hover); } .cal-picker-cell:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 1px; } .cal-picker-cell[aria-selected="true"] { background: var(--accent-quiet); color: var(--accent-text); font-weight: var(--weight-semibold); } .cal-picker-cell[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--accent-border); } .cal-picker-cell[data-empty="true"] { color: var(--text-subtle); cursor: default; } .cal-picker-cell[data-empty="true"]:hover { background: transparent; } .cal-picker-foot { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-subtle); } /* Compact scan rows: one line per event, 30px. Date prints on the first row of each day only. */ .cal-drow { display: grid; grid-template-columns: 7rem 4.5rem minmax(0, 1fr) 10rem 11rem; align-items: center; gap: var(--space-3); height: 1.875rem; padding-inline: var(--space-4); font-size: var(--text-sm); color: var(--text-body); cursor: pointer; } .cal-drow:hover { background: var(--surface-hover); } .cal-drow[data-first="true"] { border-top: var(--border-width) solid var(--border-subtle); } .cal-drow > .d { color: var(--text-strong); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; } .cal-drow > .d .dow { color: var(--text-muted); font-weight: var(--weight-regular); display: inline-block; width: 2.1rem; } .cal-drow > .d[data-weekend="true"] .dow { color: var(--accent-text); } .cal-drow > .t { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--text-xs); } .cal-drow > .ti { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .cal-drow > .ti > .cal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); } .cal-drow > .c, .cal-drow > .l { color: var(--text-muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-drow[data-hit="true"] { background: color-mix(in oklab, var(--accent) 9%, transparent); box-shadow: inset 3px 0 0 var(--accent); } .cal-drow[data-hit="true"][aria-current="true"] { background: color-mix(in oklab, var(--accent) 18%, transparent); } .cal-drow[aria-selected="true"] { background: var(--accent-quiet); } .cal-dmonth { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-1-5); font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-strong); } .cal-dmonth .year { color: var(--text-muted); font-weight: var(--weight-regular); } .cal-dmonth .count { margin-inline-start: auto; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-subtle); } /* Time scrubber: every year on one rail, beside Agenda. Click or drag anywhere to jump. */ .cal-scrub { position: relative; display: flex; flex-direction: column; width: 5rem; flex: 0 0 5rem; border-inline-start: var(--border-width) solid var(--border-subtle); background: var(--surface-raised); user-select: none; cursor: pointer; } .cal-scrub-year { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: center; gap: 4px; padding-inline: 6px 8px; font-size: 10.5px; color: var(--text-subtle); font-variant-numeric: tabular-nums; } .cal-scrub-year > .bar { height: 55%; border-radius: 2px; } .cal-scrub-year[aria-current="true"] { color: var(--accent-text); font-weight: var(--weight-semibold); } .cal-scrub-year:hover { color: var(--text-strong); } .cal-scrub-thumb { position: absolute; left: 2px; right: 2px; border-radius: var(--radius-xs); pointer-events: none; background: color-mix(in oklab, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); } .cal-scrub-hit { position: absolute; left: 1px; width: 5px; height: 2px; border-radius: 1px; background: var(--accent); pointer-events: none; } .cal-scrub-bubble { position: absolute; right: calc(100% + 10px); transform: translateY(-50%); z-index: 5; white-space: nowrap; display: flex; flex-direction: column; gap: 1px; padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-md); background: var(--text-strong); color: var(--surface-raised); font-size: var(--text-sm); font-weight: var(--weight-semibold); box-shadow: var(--shadow-md); pointer-events: none; } .cal-scrub-bubble .sub { font-size: var(--text-xs); font-weight: var(--weight-regular); opacity: 0.75; } /* List view column resize handle - not in the handoff's class list, needed only for the drag interaction itself (calendar.js), not a visual design element. */ #list-table th { position: relative; } .col-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 3; } .col-resize:hover, .col-resize.is-active { background: var(--accent); opacity: 0.5; } /* ============ Calendar round 14d (v1.8.2) ============ */ /* An unopened [popover] stays hidden even when a component class sets display. */ [popover]:not(:popover-open) { display: none !important; } /* Declined and busy on month and all-day bars. Bars are 22px tall: 1px dashes read better than 2px, the hatch is tighter, and the title stays upright (italic is illegible at 12px). */ [data-declined="true"].cal-bar { background: var(--surface-raised) !important; opacity: 0.62; border: 1px dashed color-mix(in oklab, var(--cal) 65%, transparent); border-inline-start: 2px solid var(--cal); } [data-declined="true"].cal-bar[data-timed="true"] { border: 0; background: transparent !important; } [data-declined="true"].cal-bar[data-timed="true"] > .title { text-decoration: line-through; text-decoration-style: dashed; text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); } [data-busy="true"].cal-bar { font-style: normal; color: var(--text-muted); background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--cal) 24%, var(--surface-raised)) 0 3px, var(--surface-raised) 3px 6px) !important; } [data-busy="true"].cal-bar[data-timed="true"] { background: transparent !important; } [data-busy="true"].cal-bar[data-timed="true"]::before { background: repeating-linear-gradient(135deg, var(--cal) 0 2px, transparent 2px 3px); } /* ============ Calendar round 15 (FIX-BRIEF-R2) ============ */ /* 10e drawer: 44px rows and a 22px checkbox box in the calendars sidebar/drawer, phone only - "Only" is already unconditionally visible (never was hover-gated), which already satisfies the phone half of that rule everywhere. */ @media (max-width: 47.99rem) { #calendar-sidebar-list .sidebar-item, #calendar-sidebar-list > .row { min-height: 44px; } #calendar-sidebar-list .checkbox-box { width: 22px; height: 22px; } #calendar-sidebar-list .cal-only-btn { height: 32px; padding-inline: var(--space-2-5); font-size: var(--text-xs); } } /* ============ Calendar round 16 (FIX-BRIEF-R3), realigned to the 7d mock in round 5 ============ */ /* 7d: Agenda's fast-scroll thumb, phone only. cal-scrub is a docked 5rem rail that doesn't fit a 390px screen, so below 47.99rem it's hidden and replaced by this fading edge thumb - the visible bar is 6px, but the touch target is the full 44px-wide .cal-fastscroll track beside it. */ .cal-fastscroll { display: none; } .cal-fastscroll-years, #agenda-fastscroll-bubble { display: none; } @media (max-width: 47.99rem) { #agenda-scrub { display: none; } .cal-fastscroll { display: block; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; z-index: 5; touch-action: none; } .cal-fastscroll-thumb { position: absolute; right: 8px; width: 6px; height: 48px; border-radius: 3px; background: var(--accent); opacity: 0; transition: opacity 250ms ease; pointer-events: none; } .cal-fastscroll-thumb.is-visible { opacity: 0.85; } .cal-fastscroll-thumb.is-dragging { opacity: 1; } /* Mock 7d: labels for the whole range, not a local window - evenly spread top-to-bottom with justify-content, so it costs nothing to add years as the archive grows. */ .cal-fastscroll-years { position: absolute; top: 0; right: 0; bottom: 0; width: 44px; z-index: 6; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding: 14px 6px; font-size: 10px; color: var(--text-subtle); font-variant-numeric: tabular-nums; background: linear-gradient(to left, var(--surface-page) 60%, transparent); pointer-events: none; } .cal-fastscroll-years .yr[data-current="true"] { color: var(--accent-text); font-weight: var(--weight-bold); } /* Larger than the desktop scrubber's bubble, and sitting close against the thumb rather than 10px off the scrub rail - there's no rail here, just the thumb itself. */ #agenda-fastscroll-bubble { display: flex; z-index: 6; right: 28px; font-size: 17px; padding: 10px 14px; } #agenda-fastscroll-bubble .sub { font-size: 12px; } .cal-agenda-skeleton { position: absolute; inset: 0; z-index: 4; background: var(--surface-page); padding: var(--space-2) var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); overflow: hidden; } } @media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) { .cal-fastscroll-thumb { transition: none; } } /* ============ Calendar round 14e (v1.8.3) ============ */ /* A .menu popover that hosts the period picker sizes to the picker, not the 20rem dropdown cap - replaces the local #cal-period-picker override from round 4; class-based, so any future menu-hosted picker gets it too. */ .menu:has(> .cal-picker) { max-width: none; overflow: visible; } /* "+N more" is a