@import url('https://fonts.bunny.net/css?family=geist:400,500,600,700,800&display=swap'); :root{ --paper:#FAF6EF; --paper-raised:#FFFFFF; --ink:#27312E; --ink-soft:#5C685F; --ink-faint:#5E7269; --teal:#1F4D46; --teal-soft:#E2EDE9; --coral:#E07A45; --coral-soft:#FBE6D6; --line:#E4DDCE; --line-strong:#CFC6B0; --error:#A33636; --error-soft:#FBEFEC; --rad-md:14px; --rad-lg:20px; --shadow-sm:0 1px 3px rgba(31,77,70,.06),0 1px 2px rgba(31,77,70,.04); --shadow-md:0 4px 14px rgba(31,77,70,.10),0 2px 6px rgba(31,77,70,.06); --shadow-lg:0 8px 24px rgba(31,77,70,.14),0 4px 10px rgba(31,77,70,.08); } /* ========================================================================== THEME SYSTEM — see bottom of file for theme variable blocks Apply data-mode / data-accent / data-hc / data-motion on . Text size is now a continuous --fs custom property (2026-07-05), set directly via inline style by applyPrefs()/applyStoredAppearance() in sso.js — no longer a data-size attribute. ========================================================================== */ *{box-sizing:border-box;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Geist',sans-serif; -webkit-font-smoothing:antialiased; } h1,h2,h3{ font-family:'Geist',sans-serif; font-weight:700; letter-spacing:-0.02em; text-wrap:balance; } h3{font-weight:600;letter-spacing:-0.01em;} .serif{font-family:'Geist',sans-serif;font-weight:700;letter-spacing:-0.02em;} .center-screen{ min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:14px; } #authBannerSlot{width:100%;max-width:400px;} .auth-card{ background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--rad-lg); padding:32px;max-width:400px;width:100%; } .brand-row{display:flex;align-items:center;gap:11px;margin-bottom:22px;} .brand-mark{width:36px;height:36px;border-radius:8px;flex-shrink:0;overflow:hidden; display:flex;align-items:center;justify-content:center;} .brand-row h1{margin:0;} .brand-row p{margin:1px 0 0;font-size:0.75rem;color:var(--ink-soft);} .field{margin-bottom:14px;} .field label{display:block;font-size:0.78125rem;font-weight:600;color:var(--ink-soft);margin-bottom:5px;} .field input{ width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line-strong); background:var(--paper);color:var(--ink); } .field input:focus{outline:2px solid var(--teal);outline-offset:1px;} .btn{ border-radius:999px;border:1px solid var(--line-strong);background:var(--paper-raised); padding:10px 20px;font-weight:500;color:var(--ink);width:100%;cursor:pointer; transition:background .18s,border-color .18s,box-shadow .18s,transform .1s,opacity .1s; } .btn:active{transform:scale(0.98);opacity:.9;} .btn:hover{border-color:var(--ink-soft);} .btn-primary{background:var(--teal);border-color:var(--teal);color:#fff;} .btn-danger{background:var(--error-soft);border-color:#E3B8AE;color:var(--error);} .btn-danger:hover{background:#F7DCD5;} .btn-primary:hover{background:#173f39;} .btn-link{border:none;background:none;color:var(--teal-accessible);font-weight:500;padding:8px 0;width:auto;cursor:pointer;} .btn:disabled{opacity:.6;cursor:default;} .msg{padding:10px 12px;border-radius:9px;margin-bottom:14px;} .msg-error{background:var(--error-soft);color:var(--error);} .msg-success{background:var(--teal-soft);color:var(--teal);} .divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--ink-faint);font-size:0.75rem;} .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line);} .hint{color:var(--ink-faint);margin-top:10px;text-align:center;} /* household setup */ .choice-card{cursor:pointer; text-align:left;width:100%;padding:14px;border:1px solid var(--line-strong);border-radius:var(--rad-md); background:var(--paper-raised);margin-bottom:10px;cursor:pointer; } .choice-card:hover{border-color:var(--teal);} .choice-card .label{font-weight:600;font-size:0.875rem;} .choice-card .sub{font-size:0.78125rem;color:var(--ink-soft);margin-top:3px;line-height:1.4;} /* dashboard placeholder */ .topbar{ display:flex;align-items:center;justify-content:space-between;padding:16px 24px; border-bottom:1px solid var(--line);background:var(--paper-raised); box-shadow:var(--shadow-sm); } .household-pill{ display:flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;border:1px solid var(--line); font-size:0.78125rem;color:var(--ink-soft); } .app-shell{max-width:760px;margin:0 auto;padding:32px 20px;} .placeholder-card{ background:var(--paper-raised);border:1px dashed var(--line-strong);border-radius:var(--rad-lg); padding:40px 24px;text-align:center;color:var(--ink-soft); } .placeholder-card .serif{font-size:1.1875rem;color:var(--ink);margin-bottom:6px;} .invite-code-display{ text-align:center;font-family:'Geist',sans-serif;font-size:1.375rem;font-weight:600;letter-spacing:.04em; color:var(--teal);background:var(--teal-soft);border-radius:10px;padding:14px;margin-bottom:14px; } /* ---- landing page ---- */ .landing-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:24px;} .landing-hero h1{margin:18px 0 8px;} .landing-hero p{color:var(--ink-soft);font-size:0.9375rem;max-width:420px;margin:0 0 26px;} .landing-hero .btn-primary{width:auto;padding:12px 28px;} /* ---- launcher ---- */ .launcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:18px;} /* ---- welcome banner ---- */ .welcome-banner{margin-bottom:18px;padding:16px 18px;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--rad-lg);} .welcome-greeting{font-weight:500;color:var(--ink);margin:0 0 4px;} .welcome-holiday{font-size:0.9375rem;color:var(--teal);margin:0;} /* ---- content sections ---- */ .content-section{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--rad-lg);padding:14px 16px;margin-bottom:14px;margin-top:0;} #contentSection{margin-top:24px;} .content-section-important{border-left:3px solid var(--coral);background:var(--error-soft);} .content-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .content-section-title{ font-size:0.75rem;font-weight:600;color:var(--ink); letter-spacing:0;text-transform:none; padding-left:8px;border-left:2px solid var(--teal); } .content-edit-btn{font-size:0.75rem;color:var(--teal);background:none;border:none;cursor:pointer;padding:0;} .content-section-body{font-size:0.84375rem;color:var(--ink-soft);line-height:1.65;} .app-tile{cursor:pointer; display:block;text-decoration:none;background:var(--paper-raised);border:1px solid var(--line); border-radius:var(--rad-lg);padding:22px 18px;text-align:center;color:var(--ink);transition:border-color .15s; } .app-tile:hover{border-color:var(--teal);} .app-tile .icon{font-size:2.125rem;margin-bottom:10px;display:block;} .app-tile .name{font-weight:600;font-size:0.9375rem;} .app-tile .desc{font-size:0.75rem;color:var(--ink-soft);margin-top:4px;line-height:1.4;} .empty-launcher{text-align:center;padding:50px 20px;color:var(--ink-soft);} /* ---- admin panel ---- */ .admin-panel{background:var(--paper-raised);border:1px dashed var(--line-strong);border-radius:var(--rad-lg); padding:20px;margin-top:30px;} .admin-panel h2{font-size:1rem;margin:0 0 4px;} .admin-panel .sub{font-size:0.78125rem;color:var(--ink-soft);margin:0 0 16px;} .admin-row{display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px;margin-bottom:10px;align-items:end;} .admin-row .field{margin-bottom:0;} .admin-row select{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line-strong); background:var(--paper);font-size:0.8125rem;} .admin-row .btn{width:auto;padding:9px 14px;font-size:0.78125rem;} .access-table{width:100%;border-collapse:collapse;font-size:0.78125rem;margin-top:14px;} .access-table th{text-align:left;color:var(--ink-faint);font-weight:600;text-transform:uppercase; letter-spacing:.03em;font-size:0.65625rem;padding:0 0 6px;border-bottom:1px solid var(--line);} .access-table td{padding:8px 0;border-bottom:1px solid var(--line);} .access-table button{background:none;border:none;color:var(--error);font-size:0.75rem;cursor:pointer;padding:0;} @media (max-width:480px){ .admin-row{grid-template-columns:1fr;} } /* ---- Rich text editor (no external dependencies) ---- */ .rte-wrap{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper);} .rte-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;background:var(--paper-raised);border-bottom:1px solid var(--line);} .rte-btn{background:none;border:1px solid transparent;border-radius:4px;padding:3px 7px;font-size:0.78125rem;cursor:pointer;color:var(--ink);line-height:1.4;font-family:var(--font-sans);} .rte-btn:hover{background:var(--line);} .rte-btn.active{background:var(--teal);color:#fff;border-color:var(--teal);} .rte-btn b{font-weight:700;} .rte-btn i{font-style:italic;} .rte-body{min-height:120px;padding:10px 12px;outline:none;font-size:0.84375rem;color:var(--ink);line-height:1.65;font-family:var(--font-sans);} .rte-body p{margin:0 0 4px;} .rte-body ul,.rte-body ol{padding-left:20px;margin:4px 0;} /* Rendered rich content display */ .rich-content p{margin:0 0 4px;} .rich-content ul,.rich-content ol{padding-left:20px;margin:4px 0;} .rich-content h2,.rich-content h3{margin:8px 0 4px;color:var(--ink);} .rich-content a{color:var(--teal);} /* ---- Avatar ---- */ .avatar{flex-shrink:0;display:block;} .avatar img,.avatar svg{display:block;} /* ---- Getting started card ---- */ .content-section-getting-started{background:linear-gradient(135deg,rgba(31,77,70,.06) 0%,rgba(31,77,70,.02) 100%);border:1px solid rgba(31,77,70,.2);border-left:3px solid var(--teal);} /* ---- Admin accordion ---- */ .admin-accordion{border:1px solid var(--line);border-radius:var(--rad-lg);margin-bottom:12px;background:var(--paper-raised);overflow:hidden;} .admin-accordion-summary{padding:14px 16px;cursor:pointer;font-size:0.875rem;font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;gap:8px;user-select:none;} .admin-accordion-summary::-webkit-details-marker{display:none;} .admin-accordion[open] .admin-accordion-summary{border-bottom:1px solid var(--line);} .admin-accordion-body{padding:16px;} /* ---- Topbar responsive — prevent button overflow on narrow phones ---- */ @media (max-width: 520px) { .topbar{flex-wrap:wrap;gap:8px;padding:10px 12px;} .topbar .btn{padding:6px 10px;font-size:0.75rem;} } /* ---- Danger zone ---- */ .danger-zone{border-color:var(--error) !important;} /* ---- Preset avatar picker ---- */ .avatar-preset-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;} .avatar-preset-btn{background:none;border:2px solid var(--line);border-radius:10px;padding:3px;cursor:pointer;transition:border-color .15s;} .avatar-preset-btn:hover{border-color:var(--teal);} .avatar-preset-btn.selected{border-color:var(--teal);box-shadow:0 0 0 2px rgba(31,77,70,.25);} /* ---- Avatar library picker tabs ---- */ .avatar-tab-btn{background:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:0.75rem;font-weight:500;color:var(--ink-soft);cursor:pointer;} .avatar-tab-btn.active{background:var(--teal);border-color:var(--teal);color:#fff;} .avatar-tab-btn:hover:not(.active){border-color:var(--ink-soft);} /* ---- Profile reminder card ---- */ .profile-reminder{display:flex;align-items:center;gap:12px;background:#FFF8E1;border:1px solid #FFD54F;border-radius:var(--rad-lg);padding:14px 16px;margin-bottom:16px;} .profile-reminder-icon{font-size:1.375rem;flex-shrink:0;} .profile-reminder-body{flex:1;min-width:0;} .profile-reminder-title{font-size:0.875rem;font-weight:600;color:var(--ink);margin:0 0 2px;} .profile-reminder-sub{font-size:0.78125rem;color:var(--ink-soft);margin:0;} @media(max-width:480px){.profile-reminder{flex-wrap:wrap;}.profile-reminder .btn{width:100%;}} /* ---- Sign-in page announcement banner ---- */ .signin-banner{display:flex;align-items:flex-start;gap:10px;background:#FFF8E1;border:1px solid #FFD54F;border-radius:var(--rad-lg);padding:12px 14px;max-width:400px;width:100%;} .signin-banner-icon{font-size:1.125rem;flex-shrink:0;margin-top:1px;} .signin-banner-text{font-size:0.8125rem;color:#5C4300;margin:0;line-height:1.5;} /* ========================================================================== THEME SYSTEM Each theme overrides CSS custom properties on :root. display-mode: light | dark | system (follows OS) accent: teal | forest | ocean | sunset Modifiers: [data-hc] = high contrast --fs = continuous text-size scale (see below) prefers-reduced-motion handled with @media ========================================================================== */ /* ---- Dark mode base ---- */ [data-mode="dark"] { --paper:#1B1F1E; --paper-raised:#242928; --ink:#E6EDEA; --ink-soft:#A8C0B8; --ink-faint:#8CA89F; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18); --error:#E07070; --error-soft:rgba(224,112,112,.12); --teal-soft:rgba(78,180,162,.12); --coral-soft:rgba(224,122,69,.12); } /* ---- Accent: Teal (default, light) ---- */ /* already defined in :root — no override needed */ /* ---- Accent: Teal (dark) ---- */ [data-mode="dark"] { --teal:#4EB4A2; --coral:#E8926A; } /* ---- Accent: Forest ---- */ [data-accent="forest"] { --teal:#2D5A27; --teal-soft:#E4EEE3; --paper:#F0F5EF; --paper-raised:#F9FBF8; } [data-mode="dark"][data-accent="forest"] { --teal:#7BC47B; --teal-soft:rgba(123,196,123,.12); --paper:#161D16; --paper-raised:#1E2A1E; } /* ---- Accent: Ocean ---- */ [data-accent="ocean"] { --teal:#1A4A8A; --teal-soft:#E2EAF5; --paper:#EEF2F8; --paper-raised:#F8FAFC; } [data-mode="dark"][data-accent="ocean"] { --teal:#6B9FE4; --teal-soft:rgba(107,159,228,.12); --paper:#141822; --paper-raised:#1C2233; } /* ---- Accent: Sunset ---- */ [data-accent="sunset"] { --teal:#8B4513; --teal-soft:#F5E6DA; --paper:#FBF3EE; --paper-raised:#FFF8F4; --coral:#C0392B; } [data-mode="dark"][data-accent="sunset"] { --teal:#E8956D; --teal-soft:rgba(232,149,109,.12); --paper:#1E1610; --paper-raised:#2A1E16; } /* ---- High contrast modifier ---- */ [data-hc="1"] { --ink:#000000; --ink-soft:#222222; --ink-faint:#444444; --line:#666666; --line-strong:#333333; --paper-raised:#FFFFFF; } [data-mode="dark"][data-hc="1"] { --ink:#FFFFFF; --ink-soft:#DDDDDD; --ink-faint:#AAAAAA; --line:#888888; --line-strong:#CCCCCC; --paper:#000000; --paper-raised:#111111; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } [data-motion="reduce"] * { animation-duration:.01ms !important; transition-duration:.01ms !important; } /* ---- Accessibility: color + icon (not color alone) ---- */ .msg-success::before{content:'\2714\FE0F ';} /* ✔️ */ .msg-error::before{content:'\26A0\FE0F ';} /* ⚠️ */ .thread-status.open::before{content:'\25CF ';} /* green dot */ .thread-status.closed::before{content:'\25CB ';} /* grey dot */ /* ---- Fix: form controls must inherit theme colours ---- */ input, select, textarea { background-color: var(--paper-raised); color: var(--ink); border-color: var(--line-strong); } input::placeholder { color: var(--ink-faint); } option { background-color: var(--paper-raised); color: var(--ink); } /* Force select options in dark mode (best cross-browser effort) */ [data-mode="dark"] select { color-scheme: dark; } [data-mode="dark"] input, [data-mode="dark"] textarea { color-scheme: dark; } /* ---- Text size — GLOBAL rem-based scaling (2026-07-05, second revision). Corrects the first revision's scope gap: that version only scaled a curated allow-list of ~9 selectors (this same list, right below) via `calc(Npx * var(--fs))` on each one individually — meaning most of the app's actual text (list rows, table cells, card content, most labels) never scaled at all. See PROJECT-DECISIONS.md, "Text-Size Slider — Scope Correction," for the full reasoning. New approach: --fs now scales the ROOT element's font-size directly (see the `html` rule just below). Every font-size declaration ELSEWHERE in this file has been converted from px to rem — rem is always relative to the root's font-size, so every text element in the app now scales together automatically, with nothing left out by omission. The selectors below (h1, .btn, .hint, etc.) still each have their own distinct rem value on purpose — they're different sizes from body text by design (headings bigger, hints smaller), just expressed in rem now instead of calc(px * var(--fs)), so they scale proportionally along with everything else rather than needing their own multiplier. Going forward: any new CSS for this app must use rem for font-size, never a hardcoded px, at every breakpoint — same discipline already required for color tokens (never hardcode a hex value, always use the CSS variable). A hardcoded px font-size anywhere — including inside a media query — silently opts that element out of this accessibility feature entirely. This exact mistake already happened once for `.brand-row h1` (a 14px !important mobile override that bypassed the old system, since fixed) and was caught again during this rework for `.topbar .btn`'s mobile rule — introduced earlier the same day while slimming the topbar pills, fixed here too. */ :root { --fs: 1; } html { font-size: calc(16px * var(--fs)); } body, .field input, input, select, textarea, button { font-size: 0.875rem; } h1 { font-size: 1.3125rem; } .btn { font-size: 0.84375rem; } .hint { font-size: 0.75rem; } .msg { font-size: 0.8125rem; } .welcome-greeting { font-size: 1.375rem; } .landing-hero h1 { font-size: 2.125rem; } .brand-row h1 { font-size: 1.3125rem; margin: 0; } /* ---- Accent: Lavender ---- */ [data-accent="lavender"] { --teal:#5B4A8A; --teal-soft:#EDE8F5; --paper:#F5F2FB; --paper-raised:#FDFCFF; } [data-mode="dark"][data-accent="lavender"] { --teal:#A08FE0; --teal-soft:rgba(160,143,224,.12); --paper:#1A1625; --paper-raised:#242033; } /* ---- Accent: Rose ---- */ [data-accent="rose"] { --teal:#8B3A52; --teal-soft:#F5E6EC; --paper:#FBF0F4; --paper-raised:#FFF8FA; } [data-mode="dark"][data-accent="rose"] { --teal:#D47A96; --teal-soft:rgba(212,122,150,.12); --paper:#1E1318; --paper-raised:#2A1B21; } /* ---- Accent: Slate ---- */ [data-accent="slate"] { --teal:#3A5068; --teal-soft:#E4EBF0; --paper:#F0F3F6; --paper-raised:#F8FAFB; } [data-mode="dark"][data-accent="slate"] { --teal:#7FA8C8; --teal-soft:rgba(127,168,200,.12); --paper:#141B22; --paper-raised:#1C2633; } /* ---- Accent: Amber ---- */ [data-accent="amber"] { --teal:#8B6914; --teal-soft:#F5EDD6; --paper:#FBF6EA; --paper-raised:#FFFBF2; } [data-mode="dark"][data-accent="amber"] { --teal:#D4A84E; --teal-soft:rgba(212,168,78,.12); --paper:#1E1A0E; --paper-raised:#2A2414; } /* ---- Accent: Crimson ---- */ [data-accent="crimson"] { --teal:#8B2635; --teal-soft:#F5E4E7; --paper:#FAF0F1; --paper-raised:#FFF8F8; } [data-mode="dark"][data-accent="crimson"] { --teal:#D46070; --teal-soft:rgba(212,96,112,.12); --paper:#1E1214; --paper-raised:#2A181A; } /* ---- Accent: Sage ---- */ [data-accent="sage"] { --teal:#4A7060; --teal-soft:#E4EFEB; --paper:#EFF5F2; --paper-raised:#F8FBFA; } [data-mode="dark"][data-accent="sage"] { --teal:#7DB89A; --teal-soft:rgba(125,184,154,.12); --paper:#161E19; --paper-raised:#1E2A22; } /* ---- Tasks ---- */ .tasks-layout{display:flex;height:calc(100vh - 56px);overflow:hidden;} .tasks-sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--line);background:var(--paper-raised);overflow-y:auto;display:flex;flex-direction:column;} .tasks-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:14px 12px;border-bottom:1px solid var(--line);flex-shrink:0;} .tasks-sidebar-group{font-size:0.65625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);padding:12px 12px 4px;} .tasks-list-btn{display:flex;align-items:center;gap:8px;padding:9px 12px;border:none;background:none;width:100%;text-align:left;cursor:pointer;border-radius:8px;margin:1px 4px;font-size:0.84375rem;color:var(--ink);} .tasks-list-btn:hover{background:var(--line);} .tasks-list-btn.active{background:var(--teal-soft);color:var(--teal);font-weight:600;} .tasks-list-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tasks-count{background:var(--teal);color:#fff;border-radius:99px;padding:1px 7px;font-size:0.6875rem;font-weight:700;flex-shrink:0;} .tasks-main{flex:1;overflow-y:auto;padding:20px;} .tasks-main-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;} .task-shared-badge{background:var(--teal-soft);color:var(--teal);border-radius:99px;padding:2px 8px;font-size:0.6875rem;font-weight:600;} .task-quick-add{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:12px;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--rad-lg);} .task-quick-input{border:none;background:transparent;font-size:0.875rem;color:var(--ink);outline:none;width:100%;} .task-quick-meta{display:flex;align-items:center;gap:8px;} .task-quick-date{border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:0.75rem;color:var(--ink);background:var(--paper);} .task-item{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper-raised);margin-bottom:6px;} .task-item.task-done .task-title{text-decoration:line-through;color:var(--ink-faint);} .task-check-btn{background:none;border:none;cursor:pointer;font-size:1.125rem;padding:0;flex-shrink:0;line-height:1;} .task-item-body{flex:1;min-width:0;} .task-title{font-size:0.84375rem;color:var(--ink);display:block;} .task-notes{font-size:0.75rem;color:var(--ink-soft);margin:3px 0 0;} .task-delete-btn{flex-shrink:0;padding:0;} .task-due{font-size:0.6875rem;border-radius:99px;padding:1px 6px;margin-left:6px;font-weight:600;} .task-due.overdue{background:#FDE8E8;color:var(--error);} .task-due.today{background:var(--teal-soft);color:var(--teal);} .task-due.soon{background:var(--coral-soft);color:var(--coral);} .completed-tasks-details summary::-webkit-details-marker{display:none;} /* Tasks widget on launcher */ .tasks-widget{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--rad-lg);padding:14px 16px;margin-bottom:16px;} .tasks-widget-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .tasks-widget-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);font-size:0.8125rem;} .tasks-widget-item:last-child{border-bottom:none;} .tasks-widget-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tasks-widget-empty{display:flex;align-items:center;gap:8px;padding:10px 0;font-size:0.8125rem;color:var(--ink-soft);} /* Icon and color pickers in list modal */ .icon-pick-btn{background:none;border:2px solid var(--line);border-radius:8px;padding:4px 6px;cursor:pointer;font-size:1rem;} .icon-pick-btn.selected{border-color:var(--teal);background:var(--teal-soft);} .color-pick-btn{cursor:pointer;border-radius:50%;width:24px;height:24px;} /* Mobile: stack tasks layout */ @media(max-width:600px){ .tasks-layout{flex-direction:column;height:auto;} .tasks-sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--line);} .tasks-main{padding:14px;} } /* ---- Portal pages (Current Features / Roadmap) ---- */ .portal-page-body{font-size:0.875rem;line-height:1.75;color:var(--ink);} .portal-page-body h1{font-size:1.375rem;margin:0 0 4px;} .portal-page-body h2{font-size:1.125rem;margin:24px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);} .portal-page-body h3{font-size:0.9375rem;margin:18px 0 6px;color:var(--ink);} .portal-page-body h4{font-size:0.84375rem;margin:14px 0 4px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;} .portal-page-body p{margin:0 0 10px;} .portal-page-body ul{padding-left:20px;margin:4px 0 10px;} .portal-page-body li{margin-bottom:4px;} .portal-page-body hr{border:none;border-top:1px solid var(--line);margin:20px 0;} .portal-page-body code{background:var(--teal-soft);color:var(--teal);padding:1px 5px;border-radius:4px;font-size:0.78125rem;} .portal-page-body strong{color:var(--ink);} .feature-table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:0.8125rem;} .feature-table th,.feature-table td{padding:8px 12px;border:1px solid var(--line);text-align:left;} .feature-table th{background:var(--teal-soft);color:var(--teal);font-weight:600;font-size:0.75rem;text-transform:uppercase;letter-spacing:.04em;} .feature-table tr:nth-child(even) td{background:var(--paper-raised);} /* ---- Biometrics ---- */ .btn-biometric{width:100%;background:var(--paper-raised);border:1px solid var(--line); color:var(--ink);font-size:0.875rem;padding:10px;border-radius:var(--rad);cursor:pointer; display:flex;align-items:center;justify-content:center;gap:8px;font-weight:500; transition:background .15s,border-color .15s;} .btn-biometric:hover{background:var(--teal-soft);border-color:var(--teal);color:var(--teal);} .btn-biometric:disabled{opacity:.6;cursor:default;} .biometric-device-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px;} .biometric-device-row{display:flex;align-items:center;gap:12px;padding:10px 12px; background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--rad); min-height:60px;} /* ---- Topbar clock — centered, readable across all themes ---- */ .topbar { position:relative; } .topbar-clock { position:absolute; left:0;right:0; text-align:center; font-size:0.84375rem; font-weight:500; color:var(--ink); pointer-events:none; white-space:nowrap; line-height:1; } /* ---- Mobile: clock drops to its own centered row below the topbar's buttons instead of being hidden — notif-icons.js forces .topbar to wrap and orders this row above the notification icons row at this breakpoint. */ @media(max-width:540px) { .topbar-clock { position:static; width:100%; text-align:center; font-size:0.75rem; margin-top:2px; } } /* ---- Prevent horizontal scrolling on mobile ---- */ html, body { overflow-x:hidden; max-width:100vw; } .topbar { overflow:hidden; } .brand-row { min-width:0; flex-shrink:1; } .brand-row h1 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ============================================================================ RESPONSIVE DESIGN — applies to all four apps Breakpoints: xs < 480px — small phones (iPhone SE, Galaxy A series) sm 480-639px — large phones / phablets md 640-1023px — tablets (iPad, Android tablets) lg 1024px+ — laptops and desktops ============================================================================ */ /* ── Base: ensure everything fits the viewport ── */ *, *::before, *::after { box-sizing: border-box; } img, svg, video { max-width: 100%; height: auto; } /* ── App shell: responsive padding and max-width ── */ .app-shell { max-width: 900px; margin: 0 auto; padding: 24px 20px; width: 100%; } @media(max-width:640px) { .app-shell { padding: 16px 14px; } } @media(max-width:480px) { .app-shell { padding: 12px 10px; } } /* ---- App launcher tile grid — the inline style hardcodes 3 columns, which overflows/clips the row on narrow phones (confirmed 2026-07-04 from a real device screenshot: the 3rd tile ran off the right edge). Drop to 2 columns below 540px; !important is required to beat the inline style. Will also matter once a 4th/5th/6th app tile (HomeBase) makes 3-across worse. ---- */ @media(max-width:540px) { .app-tile-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ---- My Account identity header — avatar + name/email + "Change avatar" button were all fighting for space on one row at narrow widths; confirmed on a real device (2026-07-04) that the button visually overlaps the name rather than just wrapping cleanly. Give the button its own full-width row below the avatar/name instead of assuming three items fit on one line. */ @media(max-width:540px) { .profile-identity-header { flex-wrap: wrap; } .profile-change-avatar-btn { width: 100% !important; margin-top: 10px; } } /* ── Auth card: centered and padded on all sizes ── */ .auth-card { width: 100%; max-width: 400px; margin: 0 auto; } @media(max-width:480px) { .auth-card { padding: 20px 16px; border-radius: 12px; } .center-screen { padding: 16px; justify-content: flex-start; padding-top: 32px; } } /* ── Topbar: compact on mobile ── */ @media(max-width:640px) { .topbar { padding: 8px 12px; gap: 6px; flex-wrap: wrap; } .topbar .btn { padding: 6px 9px; font-size:0.75rem; } .brand-row h1 { font-size: 0.875rem !important; } .brand-mark svg, .brand-mark img { width: 28px !important; height: 28px !important; } } @media(max-width:380px) { /* On very small phones, abbreviate button text via CSS */ .topbar .btn-signout::after { content: 'Out'; } .topbar .btn-signout .btn-label { display: none; } } /* ── App tile launcher grid ── */ .launcher-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } @media(max-width:480px) { .launcher-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } @media(max-width:320px) { .launcher-grid { grid-template-columns: 1fr; } } /* ── App tiles ── */ @media(max-width:480px) { .app-tile { padding: 16px 10px; } .app-tile .icon { font-size:1.75rem !important; } .app-tile .name { font-size:0.8125rem !important; } } /* ── Modals: near-full-screen on mobile ── */ @media(max-width:640px) { /* Any fixed overlay containing a card */ [style*="position:fixed"] > div, [style*="position: fixed"] > div { width: calc(100vw - 24px) !important; max-width: none !important; max-height: 88vh !important; overflow-y: auto !important; margin: 0 !important; } } /* ── Tasks layout (already has mobile rule, reinforce) ── */ @media(max-width:640px) { .tasks-layout { flex-direction: column; height: auto; } .tasks-sidebar { width: 100%; height: auto; max-height: 260px; overflow-y: auto; border-right: none; border-bottom: 1px solid var(--line); } .tasks-main { padding: 12px; } } /* ── Admin panel ── */ @media(max-width:640px) { .admin-row { grid-template-columns: 1fr !important; } .admin-user-row { flex-wrap: wrap; gap: 6px; } } /* ── My Account / Profile form ── */ @media(max-width:640px) { .faq-admin-form { padding: 14px !important; } .appearance-grid { grid-template-columns: 1fr !important; } } /* ── DoseMoxie tile grids ── */ @media(max-width:480px) { .dw-tile-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .pet-grid { grid-template-columns: repeat(2, 1fr) !important; } .pet-facts-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ── Support threads ── */ @media(max-width:640px) { .thread-list { font-size:0.8125rem; } .message-bubble { max-width: 90%; } } /* ── Content sections ── */ @media(max-width:640px) { .content-section { padding: 14px !important; } .welcome-greeting { font-size: 1.125rem !important; } } /* ── Portal pages (Current Features / Roadmap) ── */ @media(max-width:640px) { .portal-page-body h1 { font-size:1.125rem; } .portal-page-body h2 { font-size:0.9375rem; } .feature-table { font-size:0.71875rem; display: block; overflow-x: auto; } } /* ── Biometrics device list ── */ @media(max-width:480px) { .biometric-device-row { flex-wrap: wrap; gap: 6px; } } /* ── Tasks widget ── */ @media(max-width:480px) { .tasks-widget { padding: 10px 12px; } } /* ── Avatar picker modal ── */ @media(max-width:640px) { .avatar-tab-row { flex-wrap: wrap; gap: 4px; } } /* ── Buttons: ensure minimum tap target size on touch ── */ @media(pointer:coarse) { .btn, .btn-link, button { min-height: 40px; } .task-check-btn { min-width: 36px; min-height: 36px; } .icon-pick-btn, .color-pick-btn { min-width: 36px; min-height: 36px; } } /* ── Large screens: widen the app shell ── */ @media(min-width:1200px) { .app-shell { max-width: 1060px; padding: 32px 40px; } .launcher-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media(min-width:1600px) { .app-shell { max-width: 1280px; } } /* ---- Notification preferences ---- */ .notif-pref-group{padding:12px 14px;background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--rad);} .notif-pref-label{font-size:0.8125rem;font-weight:600;color:var(--ink);} .notif-toggle{display:flex;align-items:center;gap:8px;font-size:0.84375rem;cursor:pointer;padding:4px 0;} .notif-toggle input[type=checkbox]{width:auto;margin:0;} .notif-toggle.disabled{opacity:.5;cursor:not-allowed;} /* ============================================================================ PORTAL-SPECIFIC POLISH ============================================================================ */ /* ── App tiles: lift on hover, teal top accent ── */ .app-tile { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.15s ease; border-top: 3px solid transparent; } .app-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.07); border-top-color: var(--teal); border-color: var(--teal); } .app-tile .icon { display: block; font-size:2.375rem; margin-bottom: 10px; transition: transform 0.2s ease; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); } .app-tile:hover .icon { transform: scale(1.1); } .app-tile .name { font-weight: 700; font-size:0.9375rem; letter-spacing: -0.01em; } .app-tile .desc { font-size:0.75rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.45; } /* ── Welcome banner: richer styling ── */ .welcome-banner { background: linear-gradient(135deg, var(--paper-raised) 0%, var(--teal-soft) 100%); border: 1px solid var(--teal-soft); border-left: 4px solid var(--teal); border-radius: var(--rad-lg); box-shadow: 0 2px 12px rgba(31,77,70,0.08); } /* ── Tasks widget on home page ── */ .tasks-widget { border-left: 3px solid var(--teal); } .tasks-widget-header { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; } /* ── Portal page body tables ── */ .feature-table th { font-size:0.6875rem; } .portal-page-body h2 { display: flex; align-items: center; gap: 8px; } .portal-page-body h2::before { content: ''; display: inline-block; width: 3px; height: 18px; background: var(--teal); border-radius: 99px; flex-shrink: 0; } /* ── Launcher grid spacing ── */ .launcher-grid { gap: 16px; } /* ============================================================================ RESPONSIVE APP TILES — scale for phones, tablets, laptops, desktops The goal: always show enough tiles to understand the launcher at a glance without each tile dominating the screen on small devices. ============================================================================ */ /* ── Base tile: padding and icon scale with screen ── */ .app-tile { padding: clamp(14px, 3vw, 24px) clamp(10px, 2vw, 18px); } .app-tile .icon { font-size: clamp(1.625rem, 6vw, 2.625rem); margin-bottom: clamp(6px, 1.5vw, 12px); } .app-tile .name { font-size: clamp(0.75rem, 2.5vw, 0.9375rem); } /* ── Phone portrait < 480px: 2-column compact grid ── */ @media(max-width:479px) { .launcher-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .app-tile { padding: 14px 8px !important; border-radius: 14px !important; } .app-tile .icon { font-size:1.625rem !important; margin-bottom: 6px !important; } .app-tile .name { font-size:0.78125rem !important; font-weight: 700 !important; } /* Hide descriptions on small phones — tile real estate is precious */ .app-tile .desc { display: none !important; } /* Tile border-top accent thinner on mobile */ .app-tile { border-top-width: 2px !important; } } /* ── Large phone / phablet 480–639px: 3-column grid ── */ @media(min-width:480px) and (max-width:639px) { .launcher-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } .app-tile { padding: 14px 8px !important; border-radius: 14px !important; } .app-tile .icon { font-size:1.75rem !important; margin-bottom: 7px !important; } .app-tile .name { font-size:0.78125rem !important; } /* Short descriptions only — one line max */ .app-tile .desc { display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size:0.6875rem !important; } } /* ── Tablet 640–1023px: 3–4 column auto grid ── */ @media(min-width:640px) and (max-width:1023px) { .launcher-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 14px !important; } .app-tile { padding: 18px 14px !important; } .app-tile .icon { font-size:2rem !important; } .app-tile .name { font-size:0.875rem !important; } .app-tile .desc { font-size:0.71875rem !important; } } /* ── Laptop / desktop 1024px+: comfortable tile size ── */ @media(min-width:1024px) { .launcher-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important; gap: 16px !important; } .app-tile { padding: 24px 18px !important; border-radius: var(--rad-lg) !important; } .app-tile .icon { font-size:2.5rem !important; margin-bottom: 12px !important; } .app-tile .name { font-size:0.9375rem !important; } .app-tile .desc { font-size:0.75rem !important; } } /* ── Wide desktop 1400px+: larger tiles with more breathing room ── */ @media(min-width:1400px) { .launcher-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 20px !important; } .app-tile { padding: 28px 22px !important; } .app-tile .icon { font-size:2.75rem !important; } } /* ── Installed PWA on phone: slightly tighter shell padding so tiles use more of the screen ── */ @media(display-mode: standalone) and (max-width:480px) { .app-shell { padding: 10px 8px !important; } .launcher-grid { gap: 8px !important; } .welcome-banner { padding: 12px 14px !important; margin-bottom: 12px !important; } } /* ── Cross-theme contrast hardening ── Ensure hint/faint text is always readable regardless of display mode (light/dark/system) × colour theme combination. The base dark mode fix raises --ink-faint and --ink-soft, but we add per-theme overrides for themes whose dark palette is especially dark (Slate, Crimson, Forest). ── */ /* Slate dark */ [data-mode="dark"][data-accent="slate"], [data-accent="slate"] .dark-override { --ink-faint: #9AAAB8; --ink-soft: #B8C8D8; } /* Forest dark */ [data-mode="dark"][data-accent="forest"] { --ink-faint: #8CAA88; --ink-soft: #A8C4A4; } /* Crimson dark */ [data-mode="dark"][data-accent="crimson"] { --ink-faint: #B89898; --ink-soft: #C8AAAA; } /* Ocean dark */ [data-mode="dark"][data-accent="ocean"] { --ink-faint: #8AAAC0; --ink-soft: #A4BED4; } /* General system-dark catchall — ensures .hint is never below WCAG AA contrast on any background we use */ @media(prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --ink-faint: #8CA89F; --ink-soft: #A8C0B8; } } /* ── My Account section tiles ── */ button.profile-section-tile { font-family: var(--font-sans); cursor: pointer; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.15s ease; border-top: 3px solid transparent; } button.profile-section-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.11), 0 2px 6px rgba(0,0,0,0.07); border-top-color: var(--teal); border-color: var(--teal); } button.profile-section-tile:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } button.profile-section-tile .icon { transition: transform 0.2s ease; } button.profile-section-tile:hover .icon { transform: scale(1.12); } /* ── Legal footer (Tier 1 compliance) ─────────────────────────── */ .legal-footer { text-align: center; padding: 20px 16px 32px; font-size:0.71875rem; color: var(--ink-faint); line-height: 1.8; border-top: 1px solid var(--line); margin-top: 32px; } .legal-footer a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } .legal-footer a:hover { border-bottom-color: var(--ink-faint); } .legal-footer .lf-links { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .legal-footer .lf-sep { opacity: .35; } /* ── UI Polish: hover effects & content card consistency ─────────────────── */ /* Fix #6: Install as app hover */ button.btn-link#installAppLink:hover, button.btn-link#installAppLinkAuth:hover { color: var(--teal) !important; text-decoration: underline; } /* Fix #7: Current Features & Roadmap section hover */ .content-section-card { cursor: pointer; transition: box-shadow .18s ease, transform .15s ease, border-color .15s ease; } .content-section-card:hover { box-shadow:var(--shadow-md); transform: translateY(-2px); border-color: var(--teal) !important; } /* Fix #15: Consistent app card headers in Current Features / content blocks */ .feature-card-header { background: var(--teal) !important; color: #fff !important; } .feature-card-header-dark { background: #0D1F1D !important; color: #fff !important; } .feature-card-header-accent { background: var(--teal) !important; color: #fff !important; border-left: 4px solid var(--teal) !important; } /* Fix #12: Inline privacy/terms overlay */ .legal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 5500; display: flex; align-items: flex-end; justify-content: center; } .legal-overlay-sheet { background: var(--paper); border-radius: var(--rad-lg) var(--rad-lg) 0 0; width: 100%; max-width: 720px; max-height: 85vh; overflow-y: auto; padding: 0 0 env(safe-area-inset-bottom); animation: sheetUp .25s ease; } .legal-overlay-header { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size:0.9375rem; z-index: 1; } .legal-overlay-body { padding: 20px 18px 32px; font-size:0.875rem; line-height: 1.7; color: var(--ink-soft); } .legal-overlay-body h2 { font-size:0.9375rem; font-weight: 700; margin: 22px 0 8px; color: var(--ink); padding-left: 10px; border-left: 3px solid var(--teal); } .legal-overlay-body p { margin-bottom: 12px; } .legal-overlay-body ul { margin: 0 0 12px 20px; } .legal-overlay-body a { color: var(--teal); } @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Fix #8: Getting started 3-level accordion */ .gs-app-group { border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: hidden; margin-bottom: 10px; } .gs-app-toggle { width: 100%; text-align: left; background: var(--paper-raised); border: none; padding: 13px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size:0.875rem; font-weight: 700; color: var(--ink); transition: background .15s; } .gs-app-toggle:hover { background: var(--paper-raised); color: var(--teal); } .gs-app-toggle .gs-count { margin-left: auto; font-size:0.6875rem; font-weight: 600; background: var(--teal); color: #fff; padding: 2px 7px; border-radius: 10px; } .gs-app-toggle .gs-chevron { margin-left: 4px; transition: transform .2s; color: var(--ink-faint); } .gs-app-group.open .gs-chevron { transform: rotate(90deg); } .gs-guide-list { display: none; border-top: 1px solid var(--line); } .gs-app-group.open .gs-guide-list { display: block; } .gs-guide-toggle { width: 100%; text-align: left; background: var(--paper); border: none; border-bottom: 1px solid var(--line-faint, #e8f0ee); padding: 10px 16px 10px 32px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size:0.8125rem; color: var(--ink-soft); transition: background .15s; } .gs-guide-toggle:hover { background: var(--paper-raised); color: var(--teal); } .gs-guide-toggle .gs-guide-chevron { margin-left: auto; color: var(--ink-faint); transition: transform .2s; font-size:0.75rem; } .gs-guide-toggle.open { color: var(--ink); font-weight: 600; } .gs-guide-toggle.open .gs-guide-chevron { transform: rotate(90deg); } .gs-guide-answer { display: none; padding: 12px 16px 14px 44px; background: var(--paper-raised); border-bottom: 1px solid var(--line-faint, #e8f0ee); font-size:0.8125rem; color: var(--ink-soft); line-height: 1.7; } .gs-guide-answer.open { display: block; } .gs-guide-answer ol, .gs-guide-answer ul { margin: 8px 0 8px 18px; } .gs-guide-answer li { margin-bottom: 4px; } .gs-guide-answer p { margin-bottom: 8px; } .gs-guide-answer strong { color: var(--ink); } /* Global btn-link hover — ensures all text buttons have visible hover */ .btn-link:hover { color: var(--teal) !important; text-decoration: underline; } .btn-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; } /* ── Admin biometrics & task widget classes ─────────────────────────────── */ .biometric-delete-btn { color: var(--error); font-size:0.75rem; } .biometric-delete-btn:hover { color: var(--error); text-decoration: underline; } .remind-method-btn { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--rad-lg); font-size:0.78125rem; background: var(--paper-raised); cursor: pointer; transition: background .15s, border-color .15s; } .remind-method-btn:hover { border-color: var(--teal); } .remind-method-btn.btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); } .toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size:0.84375rem; color: var(--ink-soft); } .widget-check { font-size:1.125rem; line-height: 1; background: none; border: none; cursor: pointer; padding: 2px; transition: transform .1s; } .widget-check:hover { transform: scale(1.15); } /* ── Skip-to-content (keyboard accessibility) ───────────────────────────── */ .skip-link{ position:absolute;top:-48px;left:16px; background:var(--teal);color:#fff; padding:8px 16px;border-radius:0 0 8px 8px; font-size:0.875rem;font-weight:600;text-decoration:none; z-index:10000;transition:top .15s; } .skip-link:focus{top:0;} /* ── scroll-behavior ─────────────────────────────────────────────────────── */ html{scroll-behavior:smooth;} /* ── tabular-nums for data contexts ─────────────────────────────────────── */ .tabular{font-variant-numeric:tabular-nums;}