/* ═══════════════════════════════════════════════════════════════ LIFE-OS DESIGN TOKENS Field Notebook — shared across all pages ═══════════════════════════════════════════════════════════════ sysb-039 v3 (2026-04-26): migrated from warm "field notebook" palette to cool-neutral with subtle warm tilt + Inter / JetBrains Mono typography + 48px global tap targets + halftone dot-density surface fills (newspaper / risograph aesthetic). Cool/warm decisions locked in design-demo.html commit 3f4216dcf. */ :root { /* ── Paper & Ink ── Cool whites with a faint warm cast on the deep neutrals (paper-darker, ink-light, ink-muted, ink-faint, ink-ghost). */ --paper: #f4f5f7; --paper-light: #f8f9fb; --paper-dark: #eceef2; --paper-darker: #e0e0df; --ink: #15181d; --ink-light: #525a64; --ink-muted: #737a7e; --ink-faint: #a09fa1; --ink-ghost: #cfcecc; /* ── Surfaces ── */ --surface: #ededeb; --surface-hover: #e5e4e1; --surface-active: #d9d8d4; --surface-inset: none; --surface-raised: 0 1px 3px rgba(0,0,0,0.06); /* ── Borders ── */ --border: #d3d2d0; --border-light: #e3e2e0; --border-focus: #5f6b7a; /* ── Shadows (flat — ink bleed removed) ── */ --shadow-embossed: none; --shadow-pressed: none; --shadow-raised: 0 1px 3px rgba(0,0,0,0.06); /* ── Typography ── Inter for body, JetBrains Mono for data/numerics. Loaded via Google Fonts in each dashboard . System fallbacks keep things readable if the CDN is unreachable. */ --font-body: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif; --font-data: 'JetBrains Mono', 'SFMono-Regular', Menlo, 'Courier New', monospace; --font-size-xs: 8px; --font-size-sm: 10px; --font-size-md: 12px; --font-size-lg: 14px; --font-size-xl: 18px; --font-size-2xl: 24px; --font-size-stat: 16px; --line-height: 1.5; --letter-spacing-label: 0.6px; /* ── Spacing ── */ --space-xs: 4px; --space-sm: 6px; --space-md: 10px; --space-lg: 14px; --space-xl: 20px; --space-2xl: 28px; /* ── Radii ── */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; /* ── Transitions ── */ --transition-fast: 100ms ease; --transition: 150ms ease; --transition-slow: 300ms ease; /* ── Layout ── */ --sidebar-width: 200px; --sidebar-collapsed: 0px; --detail-width: 340px; --header-height: 48px; --bottom-bar-height: 56px; /* ── Tap target (sysb-039 v3: bumped 44 → 48 globally) ── */ --tap-target: 48px; /* ── Tier Colors (cool-neutral grayscale, v2 palette) ── */ --tier-survival: #15181d; --tier-must-do: #2a2e35; --tier-should-do: #737a7e; --tier-good-to-do: #a09fa1; --tier-bonus: #cfcecc; /* ── Category Colors (kept from v1; v2 didn't override) ── */ --cat-prayer: #666; --cat-meal: #8b7355; --cat-routine: #777; --cat-task: #555; --cat-focus: #444; --cat-health: #6b8b6b; --cat-social: #7b6b8b; --cat-work: #5b6b7b; /* ── Progress ── */ --prog-bg: #e3e2e0; --prog-fill: #15181d; --prog-fill-dim: #737a7e; /* ── Status (cool-neutral with warm-tilt amber) ── */ --status-ok: #3f7a4f; --status-warn: #a56a14; --status-error: #b03a3a; --status-info: #3a6b96; /* ── Halftone dot-density surface fills (sysb-039 v3) ── CSS background-image patterns used as card / stat / button / section-divider fills instead of flat tints. Pure-ink dots on paper at four densities give a newspaper / risograph texture without the heaviness of a flat wash. Tile size is constant (6px) — density is varied by changing the dot radius. Smaller radius = sparser visual = lighter feel. CONTRAST NOTE: text rendered on a dot-soft surface (15% density) was checked against the worst-case "ink-light on dot-soft over paper" combo. The dots cover ~6% of the area at 0.7px radius on a 6px tile. Effective bg luminance shifts only ~2 LR* points from pure paper, so ink-light (#525a64) on dot-soft over paper (#f4f5f7) keeps a measured contrast ratio of ~6.4:1 — comfortably above WCAG AA (4.5:1). Pure --ink on dot-soft is ~16:1 (AAA). Anything darker than dot-soft (medium / strong) is intended for non-text surfaces (button fills, section dividers). Use these as `background-image` (the flat color underneath via `background-color` is the fallback for browsers that don't resolve the gradient — tested down to Safari 12 which is fine). */ --surface-dot-faint: radial-gradient(circle, var(--ink) 0.45px, transparent 0.55px) 0 0 / 6px 6px; --surface-dot-soft: radial-gradient(circle, var(--ink) 0.7px, transparent 0.8px) 0 0 / 6px 6px; --surface-dot-medium: radial-gradient(circle, var(--ink) 1.1px, transparent 1.2px) 0 0 / 6px 6px; --surface-dot-strong: radial-gradient(circle, var(--ink) 1.55px, transparent 1.65px) 0 0 / 6px 6px; } /* ── Base Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Body Defaults ── */ html, body { overflow-x: hidden; /* prevent horizontal scroll on mobile */ } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); font-size: var(--font-size-md); line-height: var(--line-height); -webkit-font-smoothing: antialiased; } /* ── Data Values (monospace) ── */ .data, [data-type="number"], [data-type="time"], .stat-val, .tl-time, .prog-ring-val { font-family: var(--font-data); } /* ── Section Labels ── */ .sec-label { font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); margin: var(--space-lg) 0 var(--space-sm); } /* ── Flat Surface (kept for inputs / modals where a pattern under text would hurt legibility) ── */ .embossed { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-sm); } /* ── Halftone surface utility classes (sysb-039 v3) ── `background-color` is the flat fallback if the gradient doesn't render (older browsers, print styles). When the gradient resolves, the dots sit on top of the same flat color so the visual stays consistent across surfaces of the same family. */ .surface-dots-faint { background-color: var(--surface); background-image: var(--surface-dot-faint); } .surface-dots-soft { background-color: var(--surface); background-image: var(--surface-dot-soft); } .surface-dots-medium { background-color: var(--paper-darker); background-image: var(--surface-dot-medium); } .surface-dots-strong { background-color: var(--paper-darker); background-image: var(--surface-dot-strong); } /* ── Progress Bar ── */ .prog-bar { height: 4px; background: var(--prog-bg); border-radius: var(--radius-sm); overflow: hidden; } .prog-fill { height: 100%; background: var(--prog-fill); border-radius: var(--radius-sm); transition: width var(--transition-slow); } /* ── Progress Ring ── */ .prog-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; } .prog-ring svg { transform: rotate(-90deg); } .prog-ring-val { position: absolute; font-size: var(--font-size-sm); font-weight: 700; font-family: var(--font-data); } /* ── Paper Slip Toast ── */ .toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; } .toast { /* Toasts stay flat — small surfaces with text shouldn't fight the reader for attention. */ background: var(--paper-light); border: 1px solid var(--border); padding: var(--space-md) var(--space-xl); font-size: var(--font-size-sm); color: var(--ink); animation: toast-in 200ms ease forwards; max-width: 360px; } .toast.error { border-color: var(--status-error); color: var(--status-error); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } } /* ── Loading Dots ── */ .loading-dots { display: flex; gap: 6px; justify-content: center; padding: var(--space-xl); } .loading-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); animation: dot-pulse 1.2s ease-in-out infinite; } .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes dot-pulse { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } } /* ── Empty State ── */ .empty-state { text-align: center; padding: var(--space-2xl); color: var(--ink-faint); } .empty-state-icon { font-size: 32px; margin-bottom: var(--space-md); opacity: 0.3; } .empty-state-text { font-size: var(--font-size-md); margin-bottom: var(--space-md); } /* ── Buttons (sysb-039 v3: 48px global tap target + dot-soft fill) ── */ .btn { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--border); background-color: var(--surface); background-image: var(--surface-dot-soft); color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--transition), background-color var(--transition); min-height: var(--tap-target); } .btn:hover { border-color: var(--ink-faint); } .btn:active { /* Mid-press: kill the pattern so the press reads as flat — dot surfaces compete with the focus state otherwise. */ background-color: var(--surface-active); background-image: none; } .btn-primary { background-color: var(--ink); background-image: none; color: var(--paper); border-color: var(--ink); } .btn-primary:hover { background-color: var(--ink-light); } .btn-danger { color: var(--status-error); border-color: var(--status-error); } .btn-small { font-size: var(--font-size-xs); padding: var(--space-xs) var(--space-md); min-height: var(--tap-target); } /* ── Form Inputs (FLAT — text on pattern is hard to read) ── */ .field-input, .field-select, .field-textarea { font-family: var(--font-body); font-size: var(--font-size-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--border); background: var(--paper-light); color: var(--ink); border-radius: var(--radius-sm); transition: border-color var(--transition); width: 100%; min-height: var(--tap-target); } .field-input:focus, .field-select:focus, .field-textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 1px var(--border-focus); } .field-textarea { /* Textareas opt-out of the tap-target floor so they can be tighter than 48px on multi-line forms. */ min-height: 60px; } /* ── Responsive: Mobile Bottom Bar ── */ @media (max-width: 768px) { :root { --sidebar-width: 0px; --detail-width: 100vw; /* Phone-friendly font sizes: bumped from desktop 8/10/12/14/18/24px baseline so body text reaches the 16px iOS-recommended minimum and small UI text stays readable without zooming. */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-2xl: 28px; --font-size-stat: 20px; } /* iOS Safari auto-zooms when you focus a form input whose computed font-size is < 16px and never reliably un-zooms after blur. Floor every interactive form element at 16px on mobile so the zoom-in behavior never fires — applies to any select/input/textarea on any page, not just the metadata-cleanup modal. */ input, select, textarea { font-size: 16px; } } /* ═══════════════════════════════════════════════════════════════ COMPONENT TOKEN EXPANSION (sysb-040, 2026-05-16) Gap-fill from the dashboard design-system audit. Adds tokens and component classes that existing pages already use as one-off inline styles or page-local overrides. New pages must use these instead of redefining in their own :root — the lint-design-tokens.py pre-commit check enforces this. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Accent (interactive) ── `--accent` is the page-wide interactive color. Defaults to ink so the system stays monochrome; pages that need a true "click here" blue (form CTAs, dependency edges) use `--accent-action`. */ --accent: var(--ink); --accent-dim: rgba(21, 24, 29, 0.08); --accent-action: #2563eb; /* ── Status backgrounds (pale fills, pair with --status-* fg) ── Used by badges and chips that need a tinted background, e.g. "red action" chip = --status-error-bg + --status-error text. */ --status-ok-bg: #e2ecdd; --status-warn-bg: #f9e5ce; --status-error-bg: #f0d8d8; --status-info-bg: #d9e3ed; /* ── Source colors (routine pipeline domain) ── Used in routine-editor and any view that visualizes plan items by origin (morning routine vs. evening vs. registry). */ --source-morning: #f97316; --source-evening: #3b82f6; --source-registry: #8b5cf6; --source-weekly-recurring: #22c55e; --source-weekly-sunday: #14b8a6; /* ── Sync indicators (semantic aliases) ── */ --sync-ok: var(--status-ok); --sync-stale: var(--status-warn); --sync-error: var(--status-error); /* ── Modal / drawer / popover shadows ── Lifted from page-local overrides — these are the only three shadow strengths the dashboard actually uses for elevated layers. Everything else stays on `--shadow-raised`. */ --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.18); --shadow-drawer: -4px 0 20px rgba(0, 0, 0, 0.08); --shadow-popover: 0 2px 8px rgba(0, 0, 0, 0.15); /* ── Arabic font stack (RTL surfaces) ── Inter doesn't carry Arabic glyphs well; this stack matches the corpus tooling and the Arabic exercise UI. */ --font-arabic: 'Sakkal Majalla', 'Geeza Pro', 'Calibri', 'Tahoma', sans-serif; /* ── Layout extensions ── */ --tab-height: 38px; } /* ── Tab buttons ── */ .tab-btn { font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600; padding: var(--space-sm) var(--space-lg); height: var(--tab-height); min-height: var(--tap-target); background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--ink-muted); cursor: pointer; transition: color var(--transition), border-color var(--transition); } .tab-btn:hover { color: var(--ink-light); } .tab-btn.active { color: var(--ink); border-bottom-color: var(--ink); } /* ── Toggle switch ── */ .toggle { position: relative; display: inline-block; width: 36px; height: 20px; background: var(--paper-darker); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background var(--transition); vertical-align: middle; } .toggle::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--paper); border-radius: 50%; transition: transform var(--transition); box-shadow: var(--shadow-raised); } .toggle.on { background: var(--ink); border-color: var(--ink); } .toggle.on::after { transform: translateX(16px); } /* ── Badge / status chip ── Default is the muted neutral chip. Status variants pull foreground + background + border from the status token pairs. */ .badge { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 600; padding: 2px var(--space-sm); border-radius: var(--radius-sm); background: var(--paper-dark); color: var(--ink-light); border: 1px solid var(--border-light); } .badge.badge-ok { background: var(--status-ok-bg); color: var(--status-ok); border-color: var(--status-ok); } .badge.badge-warn { background: var(--status-warn-bg); color: var(--status-warn); border-color: var(--status-warn); } .badge.badge-error { background: var(--status-error-bg); color: var(--status-error); border-color: var(--status-error); } .badge.badge-info { background: var(--status-info-bg); color: var(--status-info); border-color: var(--status-info); } .badge.badge-muted { background: var(--paper-dark); color: var(--ink-muted); border-color: var(--border); } /* ── Tier badge (filled) ── `.tier-badge` defaults to the must-do shade so a bare badge still reads as "tier." Subclass with the specific tier name to override the fill. Lighter tiers flip to ink text for contrast. */ .tier-badge { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); padding: 2px var(--space-sm); border-radius: var(--radius-sm); color: var(--paper); background: var(--ink-muted); } .tier-badge.tier-survival { background: var(--tier-survival); } .tier-badge.tier-must-do { background: var(--tier-must-do); } .tier-badge.tier-should-do { background: var(--tier-should-do); } .tier-badge.tier-good-to-do { background: var(--tier-good-to-do); color: var(--ink); } .tier-badge.tier-bonus { background: var(--tier-bonus); color: var(--ink); } /* ── Modal (backdrop + card) ── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; } .modal-card { background: var(--paper-light); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-xl); box-shadow: var(--shadow-modal); max-width: 560px; max-height: 80vh; overflow-y: auto; } /* ── Drawer (right-side panel) ── */ .drawer { position: fixed; top: 0; right: 0; width: var(--detail-width); height: 100vh; background: var(--paper-light); border-left: 1px solid var(--border); box-shadow: var(--shadow-drawer); z-index: 900; transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; } .drawer.open { transform: translateX(0); } /* ── Popover / context menu ── */ .popover, .context-menu { position: absolute; background: var(--paper-light); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-popover); padding: var(--space-xs); min-width: 160px; z-index: 800; } .context-menu-item { display: block; width: 100%; text-align: left; padding: var(--space-sm) var(--space-md); font-family: var(--font-body); font-size: var(--font-size-sm); background: transparent; border: 0; color: var(--ink); cursor: pointer; border-radius: var(--radius-sm); } .context-menu-item:hover { background: var(--surface); } /* ── Prayer marker ── */ .prayer { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-xs) var(--space-sm); font-size: var(--font-size-xs); color: var(--ink-muted); border-radius: var(--radius-sm); } .prayer-name { font-weight: 600; } .prayer-time { font-family: var(--font-data); } .prayer.done { color: var(--ink-faint); opacity: 0.6; } .prayer.next { background: var(--accent-dim); color: var(--accent); } /* ── Compliance dot (7-day strip) ── */ .compliance-strip { display: inline-flex; gap: var(--space-xs); align-items: center; } .compliance-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-darker); border: 1px solid var(--border); display: inline-block; } .compliance-dot.full { background: var(--ink); border-color: var(--ink); } .compliance-dot.half { background: linear-gradient(to right, var(--ink) 50%, transparent 50%); border-color: var(--ink); } .compliance-dot.miss { background: transparent; border-color: var(--border); } .compliance-label { font-family: var(--font-data); font-size: var(--font-size-xs); color: var(--ink-muted); margin-left: var(--space-xs); } /* ── Sync dot ── */ .sync-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sync-ok); } .sync-dot.stale { background: var(--sync-stale); } .sync-dot.error { background: var(--sync-error); } /* ── Arabic / RTL panel ── */ .arabic-panel { font-family: var(--font-arabic); direction: rtl; text-align: right; } /* ═══════════════════════════════════════════════════════════════ TODAY-PAGE GAP-FILL (sysb-041, 2026-05-16) Tokens absorbed from the Today-page audit of life-os-dashboard.html. Three thematic clusters were extracted: (a) the cool-sage "accent-health" used by cycle / posture / compliance / sleep-debt OK markers, (b) the rgba alpha tints of --status-warn / --status-error used by time banners, compliance cells, and chip backgrounds (different visual purpose than the flat --status-*-bg pair, which stays for badges), and (c) the gold "accent-arabic" theme used by the UN-interview hero block. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Accent — Health (cool sage) ── Used by cycle tints (follicular / ovulatory), posture cue, 7-day compliance hits, sleep-debt-OK chip. Anchored by the 5a7a5a sage that already exists across the Today page. */ --accent-health: #5a7a5a; --accent-health-light: rgba(90, 122, 90, 0.08); --accent-health-med: rgba(90, 130, 90, 0.15); --accent-health-dark: #3a6a3a; /* ── Status tints (rgba alpha overlays) ── Separate from --status-*-bg, which are flat pale fills for badges. These -tint / -med / -strong variants are the alpha overlays the dashboard uses for ambient stains (time banners, chip backgrounds, dense compliance cells). -dark variants are the readable text-on-tint foregrounds. */ --status-warn-tint: rgba(200, 140, 40, 0.08); --status-warn-med: rgba(200, 140, 40, 0.15); --status-warn-strong: rgba(200, 140, 40, 0.40); --status-warn-strong-border: rgba(200, 140, 40, 0.70); --status-warn-fg-dark: #8a5a10; --status-error-tint: rgba(180, 60, 60, 0.08); --status-error-med: rgba(180, 60, 60, 0.15); --status-error-strong: rgba(180, 60, 60, 0.50); --status-error-fg-dark: #8a2a2a; --status-event-tint: rgba(245, 158, 11, 0.10); /* ── Backdrop overlay (modals over the Today page) ── */ --backdrop-overlay: rgba(26, 24, 29, 0.35); /* ── Accent — Arabic (UN-interview hero block) ── */ --accent-arabic: #d4af37; --accent-arabic-light: #fffaef; --accent-arabic-soft: #e7d5a3; --accent-arabic-dark: #78350f; --accent-arabic-medium: #92400e; --accent-arabic-fg-on-gold: #14141a; --accent-arabic-success: #047857; --accent-arabic-shadow: rgba(212, 175, 55, 0.30); } /* ── Arabic-accent components (Today-page UN-interview block) ── Disciplined-accent treatment: the banner reads as a member of the field-notebook design system, not a foreign brand panel. Identity comes from a single gold left-stripe + a small `.arabic-chip` identity badge. The card surface uses the canonical halftone dot pattern (matches other section fills). Body typography, CTA, and launcher buttons all stay monochrome ink — no gradients, no second gold, no oversized radii. */ .arabic-hero { background-color: var(--paper-light); background-image: var(--surface-dot-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent-arabic); border-radius: var(--radius-md); padding: var(--space-lg); margin: 0 0 var(--space-lg); } .arabic-chip { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--letter-spacing-label); padding: 2px var(--space-sm); border-radius: var(--radius-sm); background: var(--accent-arabic); color: var(--accent-arabic-fg-on-gold); text-transform: uppercase; } .arabic-chip.success { background: var(--status-ok); color: var(--paper); } .arabic-hero-label { font-size: var(--font-size-md); font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); } .arabic-hero-meta { font-size: var(--font-size-sm); color: var(--ink-muted); font-family: var(--font-data); } .arabic-hero-summary { font-size: var(--font-size-sm); color: var(--ink-muted); cursor: pointer; text-align: center; padding: var(--space-xs); } .arabic-cta-btn { font-family: var(--font-body); font-size: var(--font-size-md); font-weight: 700; padding: var(--space-md) var(--space-xl); min-height: var(--tap-target); width: 100%; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); } .arabic-cta-btn:hover { background: var(--ink-light); } .arabic-launcher { font-family: var(--font-body); background: var(--paper-light); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); min-height: var(--tap-target); cursor: pointer; text-align: left; flex: 1; min-width: 90px; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: var(--ink); transition: border-color var(--transition), background var(--transition); } .arabic-launcher:hover { border-color: var(--ink-faint); } .arabic-launcher.primary { background: var(--surface); border-color: var(--ink-faint); } .arabic-launcher-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); font-weight: 600; } .arabic-launcher-value { font-family: var(--font-data); font-size: var(--font-size-lg); font-weight: 700; color: var(--ink); line-height: 1; } /* ─────────────────────────────────────────────────────────────── Career Timeline (added 2026-05-19) Mobile-first, ADHD-friendly chronological view. Replaces fragmented career sub-nav. ─────────────────────────────────────────────────────────────── */ .career-tl-header { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 12px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .career-tl-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; } .career-tl-count-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 4px; text-align: center; min-height: 48px; display: flex; flex-direction: column; justify-content: center; } .career-tl-count-num { font-family: var(--font-data); font-size: var(--font-size-lg); font-weight: 700; color: var(--ink); line-height: 1; } .career-tl-count-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); margin-top: 2px; } .career-tl-filters { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scroll-snap-type: x mandatory; } .career-tl-filters::-webkit-scrollbar { display: none; } .career-tl-chip { flex-shrink: 0; min-height: 36px; padding: 6px 14px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; font-size: var(--font-size-xs); font-weight: 600; color: var(--ink-muted); cursor: pointer; scroll-snap-align: start; transition: background var(--transition), color var(--transition), border-color var(--transition); } .career-tl-chip:hover { background: var(--surface-hover); } .career-tl-chip-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .career-tl-now { position: sticky; top: 110px; z-index: 4; background: var(--accent); color: var(--paper); padding: 6px 10px; font-family: var(--font-data); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--letter-spacing-label); text-transform: uppercase; border-radius: var(--radius-sm); margin: 8px 0 12px; text-align: center; } .career-tl-quarter { font-family: var(--font-data); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--ink-muted); border-top: 1px solid var(--border); padding: 12px 0 6px; margin-top: 12px; } .career-tl-quarter-past { color: var(--ink-faint); } .career-tl-empty { padding: 24px 16px; text-align: center; font-size: var(--font-size-sm); color: var(--ink-muted); background: var(--surface); border-radius: var(--radius-md); margin: 16px 0; } .career-tl-card { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; cursor: pointer; transition: border-color var(--transition), background var(--transition); min-height: 64px; } .career-tl-card:hover { border-color: var(--ink-faint); background: var(--surface-hover); } .career-tl-card:active { transform: translateY(1px); } .career-tl-card-past { opacity: 0.55; } .career-tl-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; } .career-tl-kind-tag { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-weight: 700; background: var(--bg); color: var(--ink-muted); padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); } .career-tl-kind-application { color: var(--ink); } .career-tl-kind-milestone { color: var(--accent); border-color: var(--accent); } .career-tl-kind-exam { color: var(--purple, #8b5cf6); border-color: var(--purple, #8b5cf6); } .career-tl-kind-event { color: var(--blue, #3b82f6); border-color: var(--blue, #3b82f6); } .career-tl-kind-program { color: var(--green, #10b981); border-color: var(--green, #10b981); } .career-tl-kind-deadline { color: var(--red, #ef4444); border-color: var(--red, #ef4444); } .career-tl-lifecycle { font-size: 10px; padding: 2px 8px; } .career-tl-card-date { margin-left: auto; font-size: var(--font-size-xs); color: var(--ink-muted); font-family: var(--font-data); display: flex; align-items: center; gap: 4px; } .career-tl-card-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--ink); line-height: 1.35; } .career-tl-card-sub { font-size: var(--font-size-xs); color: var(--ink-muted); margin-top: 3px; } .career-tl-past-toggle { width: 100%; background: transparent; border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 10px; margin: 16px 0 8px; font-size: var(--font-size-xs); color: var(--ink-muted); cursor: pointer; text-align: center; min-height: 44px; } .career-tl-past-toggle:hover { color: var(--ink); border-color: var(--ink-faint); } .career-tl-past { margin-bottom: 16px; } .career-tl-accessory { margin-top: 32px; padding-bottom: max(40px, env(safe-area-inset-bottom)); } .career-tl-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; overflow: hidden; } .career-tl-section > summary { cursor: pointer; padding: 14px 16px; font-size: var(--font-size-sm); font-weight: 600; color: var(--ink); list-style: none; position: relative; min-height: 48px; display: flex; align-items: center; } .career-tl-section > summary::-webkit-details-marker { display: none; } .career-tl-section > summary::after { content: '▶'; position: absolute; right: 16px; font-size: 10px; color: var(--ink-muted); transition: transform var(--transition); } .career-tl-section[open] > summary::after { transform: rotate(90deg); } .career-tl-section-body { padding: 0 16px 16px; border-top: 1px solid var(--border); } .career-tl-ultimate { padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .career-tl-ultimate-label { font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); } .career-tl-ultimate-value { font-size: var(--font-size-md); font-weight: 700; color: var(--ink); margin-top: 4px; } .career-tl-ultimate-model { font-size: var(--font-size-xs); color: var(--ink-muted); margin-top: 6px; line-height: 1.4; } .career-tl-promo { display: flex; flex-direction: column; gap: 8px; } .career-tl-promo-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-sm); padding: 6px 0; } .career-tl-promo-lbl { text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-size: 10px; color: var(--ink-muted); } .career-tl-promo-val { color: var(--ink); font-weight: 600; text-align: right; } .career-tl-sp { padding: 10px 0; border-bottom: 1px solid var(--border); } .career-tl-sp:last-child { border-bottom: none; } .career-tl-sp-title { font-weight: 600; font-size: var(--font-size-sm); color: var(--ink); } .career-tl-sp-status { font-size: 10px; text-transform: uppercase; color: var(--ink-muted); margin-top: 4px; } .career-tl-sp-desc { font-size: var(--font-size-xs); color: var(--ink-muted); margin-top: 6px; line-height: 1.5; } .career-tl-more { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; } .career-tl-tool-btn { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; font-size: var(--font-size-sm); color: var(--ink); cursor: pointer; text-align: left; min-height: 48px; text-decoration: none; display: inline-block; } .career-tl-tool-btn:hover { background: var(--surface-hover); } .career-tl-modal-inline { position: relative; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; } .career-tl-modal-close { position: absolute; top: 8px; right: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; width: 32px; height: 32px; font-size: 14px; cursor: pointer; } /* iOS mobile-first tweaks for Career Timeline */ @media (max-width: 768px) { .career-tl-counts { grid-template-columns: repeat(5, 1fr); gap: 4px; } .career-tl-count-item { padding: 4px 2px; min-height: 44px; } .career-tl-count-num { font-size: var(--font-size-md); } .career-tl-count-lbl { font-size: 9px; } .career-tl-chip { padding: 6px 10px; font-size: 11px; min-height: 36px; } .career-tl-now { top: 96px; } .career-tl-card { padding: 10px; } .career-tl-card-head { gap: 4px; } .career-tl-card-date { font-size: 10px; } } /* ─────────────────────────────────────────────────────────────── Career Timeline — folded sub-page components Revised 2026-05-19: proper card treatments per content type, prominent visual hierarchy. Was: flat text lists. Now: cards, pills, progress bars, quote blocks. ─────────────────────────────────────────────────────────────── */ .career-tl-section-intro { font-size: var(--font-size-xs); color: var(--ink-muted); line-height: 1.5; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 14px; } /* ── Side projects — card per project with metadata badges ── */ .career-tl-sp { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: 12px; margin-bottom: 10px; } .career-tl-sp:last-child { margin-bottom: 0; } .career-tl-sp-title { font-weight: 600; font-size: var(--font-size-sm); color: var(--ink); line-height: 1.35; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .career-tl-sp-type { font-size: 9px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); background: var(--surface); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-weight: 600; } .career-tl-sp-status { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--accent); background: var(--surface); border: 1px solid var(--accent); padding: 3px 8px; border-radius: 999px; margin-top: 8px; font-weight: 700; } .career-tl-sp-meta { font-size: var(--font-size-xs); color: var(--ink-muted); margin-top: 6px; } .career-tl-sp-desc { font-size: var(--font-size-xs); color: var(--ink); margin-top: 8px; line-height: 1.5; padding-top: 8px; border-top: 1px dashed var(--border); } .career-tl-sp-next { font-size: var(--font-size-xs); color: var(--ink); background: var(--surface); border-left: 2px solid var(--accent); padding: 6px 10px; margin-top: 8px; font-weight: 600; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .career-tl-sp-questions { margin-top: 10px; font-size: var(--font-size-xs); } .career-tl-sp-questions > summary { cursor: pointer; color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-size: 10px; min-height: 32px; display: flex; align-items: center; font-weight: 600; } .career-tl-sp-questions ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink); line-height: 1.5; } /* ── Personality Lanes — prominent progress bars, card per lane ── */ .career-tl-lane { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; } .career-tl-lane:last-child { margin-bottom: 0; } .career-tl-lane-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; } .career-tl-lane-name { font-size: var(--font-size-sm); font-weight: 700; color: var(--ink); text-transform: capitalize; letter-spacing: 0.01em; } .career-tl-lane-progress { font-family: var(--font-data); font-size: var(--font-size-sm); color: var(--ink); font-weight: 700; white-space: nowrap; } .career-tl-lane-bar { height: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 10px; } .career-tl-lane-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--ink)); border-radius: 999px; transition: width var(--transition); min-width: 4px; } .career-tl-lane-what { font-size: var(--font-size-xs); color: var(--ink); margin-bottom: 6px; font-weight: 500; } .career-tl-lane-why { font-size: 11px; color: var(--ink-muted); line-height: 1.5; padding-left: 10px; border-left: 2px solid var(--border); } /* ── Cousins benchmark — card per cousin with avatar circle ── */ .career-tl-cousin-pattern { font-size: var(--font-size-xs); font-style: italic; color: var(--ink); padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 14px; line-height: 1.5; } .career-tl-cousin { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 10px; } .career-tl-cousin:last-child { margin-bottom: 0; } .career-tl-cousin-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .career-tl-cousin-avatar { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-data); font-weight: 700; font-size: var(--font-size-sm); text-transform: uppercase; } .career-tl-cousin-name { font-size: var(--font-size-sm); font-weight: 700; color: var(--ink); text-transform: capitalize; flex: 1; } .career-tl-cousin-age { font-family: var(--font-data); font-size: 10px; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; font-weight: 600; } .career-tl-cousin-brand { font-size: var(--font-size-xs); color: var(--ink); font-style: italic; padding: 8px 10px; background: var(--surface); border-radius: var(--radius-sm); margin-bottom: 10px; line-height: 1.5; } .career-tl-cousin-list { margin: 0; padding: 0; list-style: none; } .career-tl-cousin-list li { font-size: 11px; color: var(--ink); line-height: 1.5; padding: 4px 0 4px 16px; position: relative; } .career-tl-cousin-list li:before { content: '◆'; position: absolute; left: 0; color: var(--accent); font-size: 8px; top: 7px; } /* ── CV / Achievements — grouped sections with section icons ── */ .career-tl-cv-section { padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; } .career-tl-cv-section:last-child { margin-bottom: 0; } .career-tl-cv-label { font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; } .career-tl-cv-label:before { content: '■'; color: var(--accent); font-size: 8px; } .career-tl-cv-item { padding: 8px 0; border-bottom: 1px dashed var(--border); } .career-tl-cv-item:last-child { border-bottom: none; padding-bottom: 0; } .career-tl-cv-item:first-of-type { padding-top: 0; } .career-tl-cv-title { font-size: var(--font-size-sm); font-weight: 600; color: var(--ink); line-height: 1.4; } .career-tl-cv-sub { font-size: var(--font-size-xs); color: var(--ink-muted); margin-top: 4px; font-family: var(--font-data); } .career-tl-cv-note { font-size: 11px; color: var(--ink); margin-top: 6px; line-height: 1.5; padding-left: 10px; border-left: 2px solid var(--border); } /* ── Reflections — quote-block treatment ── */ .career-tl-reflection { background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 12px 14px; margin-bottom: 10px; } .career-tl-reflection:last-child { margin-bottom: 0; } .career-tl-reflection-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 4px; } .career-tl-reflection-meta { font-family: var(--font-data); font-size: 10px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); margin-bottom: 8px; } .career-tl-reflection-trigger { font-size: 11px; color: var(--ink); line-height: 1.5; font-style: italic; } .career-tl-reflection-trigger:before { content: '"'; font-size: var(--font-size-lg); color: var(--accent); margin-right: 4px; font-weight: 700; vertical-align: -3px; } /* ── Stories — chip layout per status ── */ .career-tl-story-group { margin-bottom: 14px; } .career-tl-story-group:last-child { margin-bottom: 0; } .career-tl-story { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 6px; } .career-tl-story:last-child { margin-bottom: 0; } .career-tl-story-chip { flex-shrink: 0; font-size: 9px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--paper); background: var(--ink); padding: 3px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; } .career-tl-story-chip-ground { background: var(--accent); } .career-tl-story-title { font-size: var(--font-size-sm); color: var(--ink); font-weight: 500; line-height: 1.35; flex: 1; min-width: 0; } .career-tl-story-status { font-size: 10px; color: var(--ink-muted); font-family: var(--font-data); text-transform: lowercase; } /* ── Section summary glyphs — visual differentiation per accordion ── */ .career-tl-section > summary { gap: 8px; } .career-tl-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--bg); border: 1px solid var(--border); border-radius: 50%; font-size: 11px; color: var(--accent); flex-shrink: 0; } .career-tl-section-count { margin-left: auto; margin-right: 28px; font-family: var(--font-data); font-size: 10px; color: var(--ink-muted); background: var(--bg); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; font-weight: 600; } @media (max-width: 768px) { .career-tl-cv-section { padding: 10px; } .career-tl-lane { padding: 10px; } .career-tl-cousin { padding: 10px; } .career-tl-cousin-avatar { width: 28px; height: 28px; font-size: 11px; } .career-tl-sp { padding: 10px; } .career-tl-reflection { padding: 10px 12px; } .career-tl-story { padding: 8px 10px; gap: 8px; } .career-tl-section-count { margin-right: 24px; } } /* ─────────────────────────────────────────────────────────────── Career Timeline — interactive status picker (added 2026-05-19) Tap a card → modal opens → pick a new lifecycle / task status. ─────────────────────────────────────────────────────────────── */ .career-tl-modal-inline { position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-md); padding: 18px 16px 16px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .career-tl-modal-inline.career-tl-modal-saving { opacity: 0.6; pointer-events: none; } .career-tl-modal-close { position: absolute; top: 10px; right: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink); } .career-tl-modal-close:hover { background: var(--ink); color: var(--paper); } .career-tl-modal-kind { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--accent); font-weight: 700; margin-bottom: 4px; } .career-tl-modal-title { font-size: var(--font-size-md); font-weight: 700; color: var(--ink); margin: 0 0 16px 0; padding-right: 40px; line-height: 1.35; } .career-detail-picker { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 16px; } .career-detail-picker-label { font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); font-weight: 700; margin-bottom: 10px; } .career-detail-picker-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; } .career-detail-pick { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--font-size-xs); color: var(--ink); cursor: pointer; font-weight: 600; min-height: 44px; text-align: left; transition: background var(--transition), border-color var(--transition), color var(--transition); } .career-detail-pick:hover { background: var(--surface-hover); border-color: var(--ink-faint); } .career-detail-pick:active { transform: translateY(1px); } .career-detail-pick-active { background: var(--ink); color: var(--paper); border-color: var(--ink); } .career-detail-pick-active:hover { background: var(--ink); color: var(--paper); } .career-detail-pick-tick { font-size: 12px; color: var(--paper); font-weight: 700; } .career-detail-picker-meta { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 10px; color: var(--ink-muted); font-family: var(--font-data); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); } @media (max-width: 768px) { .career-tl-modal-inline { padding: 14px 12px 12px; } .career-tl-modal-title { font-size: var(--font-size-sm); padding-right: 36px; } .career-detail-picker-options { grid-template-columns: repeat(2, 1fr); } .career-detail-pick { padding: 10px; font-size: 11px; } } /* ─────────────────────────────────────────────────────────────── Career Timeline — Submission Sprint cluster cards (2026-05-19) ADHD-friendly: one card per sprint, not one per app. Tap to expand a modal with all the apps in that sprint. ─────────────────────────────────────────────────────────────── */ .career-sprint-card { background: linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%); border: 2px solid var(--ink); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; min-height: 140px; } .career-sprint-card:hover { background: var(--surface); border-color: var(--accent); } .career-sprint-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .career-tl-kind-sprint { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; } .career-sprint-count { font-family: var(--font-data); font-size: var(--font-size-xs); color: var(--accent); font-weight: 700; background: var(--paper); border: 1px solid var(--accent); padding: 3px 10px; border-radius: 999px; } .career-sprint-title { font-size: var(--font-size-md); font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: 10px; } .career-sprint-progress { height: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 10px; } .career-sprint-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--ink)); border-radius: 999px; transition: width var(--transition); min-width: 3px; } .career-sprint-meta { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; } .career-sprint-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--font-size-xs); } .career-sprint-meta-lbl { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); font-weight: 700; white-space: nowrap; } .career-sprint-meta-val { color: var(--ink); font-weight: 500; text-align: right; font-family: var(--font-data); display: flex; align-items: center; gap: 4px; } .career-sprint-assets { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .career-sprint-asset { font-size: 10px; background: var(--surface); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; color: var(--ink-muted); font-weight: 600; } .career-sprint-cta { text-align: center; font-size: var(--font-size-xs); color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); padding-top: 6px; border-top: 1px dashed var(--border); } /* Sprint modal — list of apps with per-app status pickers */ .career-sprint-modal { max-width: 100%; } .career-sprint-modal-meta { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; } .career-sprint-modal-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--font-size-xs); } .career-sprint-modal-desc { font-size: var(--font-size-xs); color: var(--ink); line-height: 1.5; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 14px; } .career-sprint-modal-assets-label, .career-sprint-modal-apps-label { font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); font-weight: 700; margin: 16px 0 8px; } .career-sprint-modal-assets { margin: 0 0 14px; padding-left: 20px; font-size: var(--font-size-xs); color: var(--ink); line-height: 1.6; } .career-sprint-app { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: 12px; margin-bottom: 10px; } .career-sprint-app-head { margin-bottom: 8px; } .career-sprint-app-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: 3px; } .career-sprint-app-org { font-size: 11px; color: var(--ink-muted); } .career-sprint-app-deadline { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--font-size-xs); border-bottom: 1px dashed var(--border); margin-bottom: 8px; } .career-sprint-app-exam { font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--accent); background: var(--surface); border: 1px solid var(--accent); padding: 3px 8px; border-radius: 999px; display: inline-block; margin-bottom: 8px; font-weight: 700; } .career-sprint-app-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 4px; } .career-sprint-app-pick { font-size: 10px; padding: 6px 8px; min-height: 36px; } .career-sprint-app-rounds { margin-top: 10px; font-size: var(--font-size-xs); } .career-sprint-app-rounds > summary { cursor: pointer; color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-size: 10px; font-weight: 600; min-height: 32px; display: flex; align-items: center; } .career-sprint-round { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 11px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .career-sprint-round:last-child { border-bottom: none; } .career-sprint-round-name { font-weight: 600; color: var(--ink); font-family: var(--font-data); min-width: 80px; } .career-sprint-round-date { font-family: var(--font-data); color: var(--ink); } .career-sprint-round-decision { font-family: var(--font-data); color: var(--ink-muted); font-size: 10px; } .career-sprint-round-notes { width: 100%; font-size: 10px; color: var(--ink-muted); font-style: italic; margin-top: 3px; } @media (max-width: 768px) { .career-sprint-card { padding: 12px; min-height: 130px; } .career-sprint-title { font-size: var(--font-size-sm); } .career-sprint-meta { padding: 6px 8px; } .career-sprint-app { padding: 10px; } .career-sprint-app-picker { grid-template-columns: repeat(3, 1fr); } .career-sprint-app-pick { font-size: 10px; padding: 6px; } } /* Career Timeline — date editor + delete button (2026-05-19) */ .career-detail-date-editor { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 16px; } .career-detail-date-row { display: flex; gap: 8px; align-items: center; } .career-detail-date-input { flex: 1; min-height: 44px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-data); font-size: var(--font-size-sm); color: var(--ink); } .career-detail-date-input:focus { outline: none; border-color: var(--ink); } .career-detail-save-btn { min-height: 44px; padding: 10px 16px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); white-space: nowrap; } .career-detail-save-btn:hover { background: var(--accent); border-color: var(--accent); } .career-detail-save-btn:active { transform: translateY(1px); } .career-detail-date-hint { margin-top: 8px; font-size: 10px; color: var(--ink-muted); font-style: italic; } .career-detail-delete-row { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border); } .career-detail-delete-btn { width: 100%; min-height: 48px; padding: 12px 16px; background: var(--paper); color: var(--red, #c0392b); border: 1px solid var(--red, #c0392b); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); } .career-detail-delete-btn:hover { background: var(--red, #c0392b); color: var(--paper); } .career-detail-delete-btn:active { transform: translateY(1px); } /* Career Reflections page (2026-05-19) — sub-tab promoted from accordion */ #career-reflections-content { padding: 16px; padding-bottom: max(40px, env(safe-area-inset-bottom)); } #career-reflections-content .career-tl-reflection { margin-bottom: 16px; } .career-reflections-themes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .career-reflections-theme { font-size: 10px; background: var(--surface); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; color: var(--ink-muted); font-weight: 600; text-transform: lowercase; } .career-reflections-narrative { margin-top: 10px; font-size: var(--font-size-xs); } .career-reflections-narrative > summary { cursor: pointer; color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-size: 10px; font-weight: 700; min-height: 36px; display: flex; align-items: center; } .career-reflections-section { padding: 10px 0; border-bottom: 1px dashed var(--border); } .career-reflections-section:last-child { border-bottom: none; } .career-reflections-section-lbl { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); font-weight: 700; margin-bottom: 6px; } .career-reflections-section-body { font-size: var(--font-size-xs); color: var(--ink); line-height: 1.5; white-space: pre-wrap; } .career-reflections-subitem, .career-reflections-person { font-size: var(--font-size-xs); color: var(--ink); padding: 4px 0; line-height: 1.5; } .career-reflections-sublabel { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--accent); font-weight: 700; margin-right: 4px; } .career-reflections-decisions { margin: 6px 0 0; padding-left: 20px; font-size: var(--font-size-xs); color: var(--ink); line-height: 1.6; } /* Benchmark page (2026-05-19) — sub-tab promoted from accordion */ #benchmark-content { padding: 16px; padding-bottom: max(40px, env(safe-area-inset-bottom)); } .benchmark-intel-meta { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); text-align: right; margin-bottom: 14px; } /* Sprint modal — split apps by reach / target tier (2026-05-22) */ .career-sprint-tier { margin-bottom: 18px; } .career-sprint-tier:last-child { margin-bottom: 0; } .career-sprint-tier-label { display: flex; align-items: center; gap: 8px; padding: 8px 0; margin-bottom: 10px; border-bottom: 1px solid var(--border); } .career-sprint-tier-chip { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-weight: 700; padding: 4px 10px; border-radius: 999px; color: var(--paper); } .career-sprint-tier-chip-target { background: var(--accent); } .career-sprint-tier-chip-reach { background: var(--red, #c0392b); } .career-sprint-tier-chip-other { background: var(--ink-muted); } .career-sprint-tier-count { font-size: 11px; color: var(--ink-muted); font-family: var(--font-data); font-weight: 600; } .career-sprint-tier-reach .career-sprint-app { border-left-color: var(--red, #c0392b); opacity: 0.92; } .career-sprint-tier-other .career-sprint-app { border-left-color: var(--ink-muted); opacity: 0.88; } /* Sprint card summary line — target vs reach split chips */ .career-sprint-tiercount { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .career-sprint-tiercount-target, .career-sprint-tiercount-reach { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-weight: 700; padding: 3px 8px; border-radius: 999px; } .career-sprint-tiercount-target { background: var(--paper); color: var(--accent); border: 1px solid var(--accent); } .career-sprint-tiercount-reach { background: var(--paper); color: var(--red, #c0392b); border: 1px solid var(--red, #c0392b); } /* Career Timeline — Direction card (north-star anchor, added 2026-05-23) */ .career-tl-direction { background: linear-gradient(135deg, var(--paper) 0%, var(--bg) 100%); border: 2px solid var(--ink); border-radius: var(--radius-md); margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .career-tl-direction > summary { list-style: none; cursor: pointer; } .career-tl-direction > summary::-webkit-details-marker { display: none; } .career-tl-direction-summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-family: var(--font-data); font-size: var(--font-size-sm); font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); min-height: 48px; } .career-tl-direction-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--ink); color: var(--paper); border-radius: 50%; font-size: 12px; } .career-tl-direction-label { flex: 1; } .career-tl-direction[open] .career-tl-direction-summary { border-bottom: 1px solid var(--border); } .career-tl-direction-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; } .career-tl-direction-oneliner { font-size: var(--font-size-md); font-weight: 600; color: var(--ink); line-height: 1.4; font-style: italic; padding: 10px 12px; background: var(--bg); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .career-tl-direction-section { display: flex; flex-direction: column; gap: 6px; } .career-tl-direction-section-label { font-family: var(--font-data); font-size: 10px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--ink-muted); font-weight: 700; } .career-tl-direction-list { margin: 0; padding-left: 18px; font-size: var(--font-size-xs); color: var(--ink); line-height: 1.6; } .career-tl-direction-list li { margin-bottom: 3px; } .career-tl-direction-chips { display: flex; flex-wrap: wrap; gap: 6px; } .career-tl-direction-chip { font-size: 11px; padding: 6px 12px; border-radius: 999px; font-weight: 600; text-transform: capitalize; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; min-height: 32px; transition: background 120ms ease, color 120ms ease; } .career-tl-direction-chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .career-tl-direction-chip-comp { border-color: var(--red, #c0392b); color: var(--red, #c0392b); } .career-tl-direction-chip-comp:hover { background: var(--red, #c0392b); color: var(--paper); border-color: var(--red, #c0392b); } .career-tl-direction-chip-rm { border-color: var(--accent); color: var(--accent); } .career-tl-direction-chip-rm:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); } .career-tl-direction-flag { font-size: 9px; color: var(--ink-muted); font-weight: 400; font-style: italic; } .career-tl-direction-endpoint { font-size: var(--font-size-sm); font-weight: 700; color: var(--ink); padding: 8px 12px; background: var(--ink); color: var(--paper); border-radius: var(--radius-sm); text-align: center; } /* Direction card — Benchmark link (2026-05-23 audit item 13) */ .career-tl-direction-link { width: 100%; padding: 10px 14px; background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-md); color: var(--accent); font-size: var(--font-size-xs); font-weight: 700; cursor: pointer; text-align: left; font-family: var(--font-data); letter-spacing: var(--letter-spacing-label); min-height: 44px; } .career-tl-direction-link:hover { background: var(--accent); color: var(--paper); } /* iOS Safari auto-zoom fix (2026-05-23) iOS Safari auto-zooms when a form field with font-size < 16px gains focus. Override on touch devices so font-size is always >= 16px on inputs/selects/ textareas. Visual compactness preserved via padding/line-height. */ @media (hover: none) and (pointer: coarse) { input, select, textarea, .filter-select, .search-input, .sidebar-search-input, .palette-input, .qa-input, .qa-select, .field-select, .field-input, .career-detail-date-input, .career-detail-pick, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="password"] { font-size: 16px !important; } }