/* Self-hosted so that no request — and no visitor IP — reaches Google. One variable file per
   family and subset covers every weight the app uses. */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/dm-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --ink:#172329; --muted:#718083; --paper:#f5f7f3; --line:#dde4df; --accent:#e3a25d; --teal:#3b7772; }
* { box-sizing:border-box; }
/* Defensive: user-select inherits, so any future none on an ancestor would silently take away the
   long-press "paste" menu inside text fields. */
input,textarea { user-select:text; -webkit-user-select:text; }
/* Beats any display rule below: .login-shell sets display:flex, which otherwise outranks the
   browser's own [hidden] { display:none } and leaves the login form showing under every tab. */
[hidden] { display:none !important; }
/* Android browsers "boost" text they take for body copy, which silently overrides small sizes. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* A sideways drag would otherwise engage the browser's own horizontal overscroll — the swipe-to-go-back
   gesture — which nudges the whole page and drops fixed elements like the tab bar for a few frames. */
html,body { overscroll-behavior-x:none; }
/* The card slides in from off-panel and must be clipped. `clip` rather than `hidden` on purpose:
   overflow:hidden on the body turns it into a scroll container, and mobile browsers then repaint
   position:fixed children unreliably. `clip` crops without creating one. */
.shell { overflow-x:clip; }
@supports not (overflow: clip) { body { overflow-x:hidden; } }
/* Only transform and opacity are animated, and no rotation: a rotated layer forces the text to be
   re-rasterized every frame, which is what made this stutter. These two the compositor handles alone. */
@keyframes card-in-right { from { opacity:0; transform:translate3d(22%,0,0); } to { opacity:1; transform:none; } }
@keyframes card-in-left { from { opacity:0; transform:translate3d(-22%,0,0); } to { opacity:1; transform:none; } }
.view.card-right,.view.card-left { backface-visibility:hidden; will-change:transform, opacity; }
.view.card-right { animation:card-in-right .24s cubic-bezier(.16,.84,.36,1); }
.view.card-left { animation:card-in-left .24s cubic-bezier(.16,.84,.36,1); }
@media (prefers-reduced-motion: reduce) { .view.card-right,.view.card-left { animation:none; } }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 100% 0%, #e8efe8 0, transparent 35%), var(--paper); color:var(--ink); font-family:'DM Sans', sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell,.login-shell { width:min(100% - 32px, 680px); margin:0 auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:28px 0 22px; }
h1,h2 { font-family:'Space Grotesk', sans-serif; margin:0; letter-spacing:0; }
h1 { font-size:clamp(1.7rem, 6vw, 2.3rem); }
h2 { font-size:1.55rem; }
/* The back link is styled as an eyebrow, not merely like one: sharing the rule guarantees the gap
   between the small line and the heading below it is identical on every page. */
.kicker,.eyebrow { color:var(--teal); font-size:.68rem; font-weight:700; letter-spacing:.14em; margin:0 0 7px; }
.muted { color:var(--muted); }
/* Uppercased here rather than in the data, so the workspace keeps the name the user typed everywhere
   else. Long names are clipped instead of pushing the header buttons off the edge. */
.workspace-kicker { max-width:60vw; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.icon-button,.small-button { border:0; background:transparent; color:var(--muted); }
.icon-button { font-size:1.35rem; padding:8px; }
.topbar-actions { align-items:center; display:flex; gap:2px; position:relative; }
.menu { background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 28px rgba(23,35,41,.14); display:flex; flex-direction:column; overflow:hidden; padding:5px; position:absolute; right:0; top:calc(100% + 6px); width:max-content; z-index:40; }
/* nowrap plus a max-content menu keeps every label on one line, whatever the phone's width. */
/* Absolute px, not rem: immune to a scaled root font size on the phone. */
.menu-item { background:transparent; border:0; border-radius:4px; color:var(--ink); font-size:11px; letter-spacing:.02em; padding:8px 11px; text-align:left; white-space:nowrap; width:100%; }
.menu-item:hover { background:var(--paper); }
.menu-item.danger { color:#b3382f; }
.menu-caption { color:var(--muted); display:block; font-size:.85em; letter-spacing:.08em; text-transform:uppercase; }
.menu-value { display:block; font-weight:600; margin-top:2px; }
.menu-value:after { content:' ▸'; color:var(--muted); }
.menu-divider { background:var(--line); height:1px; margin:4px 6px; }
.workspace-list { display:flex; flex-direction:column; gap:6px; margin:14px 0; max-height:44vh; overflow-y:auto; }
.workspace-row { align-items:center; background:#fff; border:1px solid var(--line); border-radius:6px; display:flex; gap:10px; padding:10px 12px; }
.workspace-row.current { border-color:var(--teal); box-shadow:inset 3px 0 0 var(--teal); }
.workspace-pick { background:transparent; border:0; flex:1; padding:0; text-align:left; }
.workspace-pick strong { display:block; font-size:.98rem; }
.workspace-pick small { color:var(--muted); font-size:.78rem; }
.workspace-add { display:flex; gap:8px; }
.workspace-add input { border:1px solid var(--line); border-radius:6px; flex:1; padding:10px 12px; }
.timezone-filter { border:1px solid var(--line); border-radius:6px; margin-top:12px; padding:10px 12px; width:100%; }
.timezone-list { display:flex; flex-direction:column; gap:4px; margin:10px 0; max-height:46vh; overflow-y:auto; }
.timezone-row { background:#fff; border:1px solid var(--line); border-radius:6px; padding:9px 12px; text-align:left; }
.timezone-row.current { border-color:var(--teal); box-shadow:inset 3px 0 0 var(--teal); }
.timezone-row strong { display:block; font-size:.94rem; font-weight:600; }
.timezone-row small { color:var(--muted); font-size:.76rem; }
.today-label { color:var(--muted); font-size:.9rem; margin:2px 0 12px; }
.current-panel { align-items:center; background:var(--ink); border-radius:8px; color:#f9fbf5; display:flex; gap:15px; min-height:136px; overflow:hidden; padding:22px; position:relative; }
.current-panel:before { background:var(--accent); content:''; height:100%; left:0; position:absolute; top:0; width:5px; }
.status-dot { background:var(--accent); border-radius:50%; box-shadow:0 0 0 7px rgba(227,162,93,.15); height:11px; width:11px; }
.current-copy { display:flex; flex:1; flex-direction:column; gap:4px; }
.current-copy .eyebrow { color:#93c0b6; }
.current-copy strong { font-family:'Space Grotesk'; font-size:1.45rem; }
.duration { color:#b8c7c4; font-variant-numeric:tabular-nums; }
.stop-button { background:#314248; border:1px solid #536469; border-radius:5px; color:#fff; padding:9px 13px; }
.section-heading,.view-title { align-items:end; display:flex; justify-content:space-between; }
.section-heading { margin:30px 0 12px; }
.section-heading span { color:var(--muted); font-size:.78rem; }
.heading-tools { align-items:center; display:flex; gap:10px; }
.layout-toggle { background:#fff; border:1px solid var(--line); border-radius:5px; display:flex; flex:none; overflow:hidden; }
.layout-button { background:transparent; border:0; color:var(--muted); font-size:.95rem; line-height:1; padding:8px 10px; }
.layout-button.active { background:var(--teal); color:#fff; }
.activity-list,.manage-list,.timeline-list { display:flex; flex-direction:column; gap:8px; }
.activity-list.tiles { display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); }
.activity-list.tiles .activity-row { align-items:flex-start; flex-direction:column; gap:9px; min-height:98px; padding:14px; }
.activity-list.tiles .activity-name { white-space:normal; word-break:break-word; }
.activity-list.tiles .color-swatch { height:16px; width:16px; }
.activity-list.tiles .arrow { display:none; }
.activity-list.tiles .empty-state { grid-column:1 / -1; }
.activity-row { align-items:center; background:#fff; border:1px solid transparent; border-radius:6px; color:var(--ink); display:flex; gap:14px; min-height:59px; padding:0 16px; text-align:left; }
.activity-row:hover,.activity-row.selected { border-color:var(--activity-color); }
.activity-row.selected { background:#f8fbf6; font-weight:700; }
.color-swatch { background:var(--activity-color, #3b82f6); border-radius:50%; display:block; flex:none; height:13px; width:13px; }
/* The running activity used to swap this chevron for a coloured dot, which in the tile layout sat on
   its own line and made that one tile taller than its neighbours — every start nudged the grid. The
   marker is gone; the frame around the tile already says which one is running. */
.arrow { color:var(--muted); font-size:1.3rem; margin-left:auto; }
.activity-row.selected .arrow { visibility:hidden; }
/* Opaque, not 94%: the page used to shimmer through it. translate3d and will-change keep it on its
   own compositor layer, so it is not repainted — and briefly dropped — while a card animates past. */
.tabbar { background:var(--paper); border-top:1px solid var(--line); bottom:0; display:flex; justify-content:space-around; left:50%; max-width:680px; padding:11px 0 max(11px, env(safe-area-inset-bottom)); position:fixed; transform:translate3d(-50%,0,0); width:100%; will-change:transform; z-index:3; }
.tabbar button { background:none; border:0; color:var(--muted); display:flex; flex-direction:column; font-size:.72rem; gap:4px; padding:3px 22px; }
.tabbar button span { font-size:1.25rem; line-height:1; }.tabbar button.active { color:var(--teal); font-weight:700; }
.view { padding-bottom:100px; }
/* The legal page has no tab bar under it, so it needs far less room at the bottom. */
#view-legal { padding-bottom:40px; }
/* Both navigation links are lifted out of the flow and parked on the eyebrow line, one at each edge.
   In the flow they pushed their section down, which left the Activities and Imprint headings sitting
   lower than Timeline's. Absolute keeps all three titles on one height. */
/* The back link sits *inside* a real eyebrow span rather than imitating one. That way the line box —
   and with it the distance down to the heading — is produced by exactly the same markup as on every
   other page, instead of being matched by hand and drifting apart again. */
.back-button { background:transparent; border:0; color:inherit; font:inherit; letter-spacing:inherit; margin:0; padding:0; }
/* Sits in the top bar next to the settings wheel, so the imprint is one tap away from every tab. */
.imprint-button { background:transparent; border:0; color:var(--muted); font-size:.78rem; padding:8px 4px; }
.legal-block { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px; }
.legal-facts { display:grid; gap:2px 16px; grid-template-columns:auto 1fr; margin:0 0 14px; }
.legal-facts dt { color:var(--muted); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; }
.legal-facts dd { margin:0 0 8px; }
.legal-block a,.legal-body a { color:var(--teal); }
.consent { align-items:flex-start; color:var(--muted); display:flex; font-size:.85rem; gap:9px; line-height:1.45; margin:2px 0 4px; }
.consent input { accent-color:var(--teal); flex:none; height:18px; margin-top:1px; width:18px; }
.modal-scroll { max-height:58vh; overflow-y:auto; padding-right:6px; }
.modal-scroll h3:first-child { margin-top:4px; }
.legal-details { background:#fff; border:1px solid var(--line); border-radius:8px; margin-top:12px; }
.legal-details summary { cursor:pointer; font-family:'Space Grotesk', sans-serif; font-size:1.05rem; font-weight:600; list-style:none; padding:15px 18px; }
.legal-details summary::-webkit-details-marker { display:none; }
.legal-details summary:after { color:var(--muted); content:'▾'; float:right; transition:transform .2s; }
.legal-details[open] summary:after { transform:rotate(180deg); }
.legal-body { border-top:1px solid var(--line); padding:4px 18px 18px; }
.legal-body h3 { font-family:'Space Grotesk', sans-serif; font-size:.95rem; margin:18px 0 6px; }
.legal-body p,.legal-body li { color:#3d4b50; font-size:.88rem; line-height:1.55; margin:6px 0; }
.legal-body ul { margin:6px 0; padding-left:20px; }.view-title { margin:7px 0 24px; }.view-title input { background:#fff; border:1px solid var(--line); border-radius:5px; color:var(--ink); padding:8px; }
.timeline-controls { align-items:center; display:flex; gap:7px; margin-bottom:10px; }.zoom-button { background:#fff; border:1px solid var(--line); border-radius:5px; color:var(--ink); line-height:1; min-width:36px; padding:8px 10px; }.zoom-button:disabled { color:var(--line); cursor:default; }.zoom-level { color:var(--muted); font-size:.75rem; font-variant-numeric:tabular-nums; min-width:46px; text-align:center; }.zoom-slider { accent-color:var(--teal); background:transparent; flex:1; min-width:0; }.zoom-slider:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.timeline-meta { color:var(--muted); display:flex; font-size:.72rem; justify-content:space-between; margin-bottom:6px; }.timeline-viewport { cursor:grab; overflow:hidden; position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none; }.timeline-viewport.grabbing { cursor:grabbing; }
.timeline-tick { border-left:1px solid var(--line); color:var(--muted); font-size:.68rem; height:100%; padding-left:4px; position:absolute; top:0; white-space:nowrap; }
.day-row { align-items:stretch; border:2px solid transparent; border-radius:6px; display:flex; gap:8px; margin-bottom:3px; padding:2px; }
.day-row.focus { background:rgba(59,119,114,.08); border-color:var(--teal); }
.day-row.ruler-row { border-color:transparent; margin-bottom:1px; }
.day-label { align-items:flex-start; color:var(--muted); display:flex; flex:none; flex-direction:column; font-size:.66rem; justify-content:center; line-height:1.25; width:42px; }
.day-label strong { color:var(--ink); font-size:.75rem; }
.day-row.focus .day-label strong { color:var(--teal); }
.timeline-ruler { flex:1; height:18px; min-width:0; overflow:hidden; position:relative; }
.timeline-track { background:#e4eae4; border-radius:4px; flex:1; height:34px; min-width:0; overflow:hidden; position:relative; }
.timeline-event { background:var(--activity-color); height:100%; min-width:3px; position:absolute; }
.timeline-event.selected { box-shadow:inset 0 0 0 2px var(--ink); }
.timeline-stage { position:relative; }
.timeline-popover { align-items:center; background:var(--ink); border-radius:7px; box-shadow:0 8px 22px rgba(23,35,41,.28); color:#f9fbf5; cursor:pointer; display:flex; gap:9px; max-width:min(88vw, 300px); padding:9px 12px; position:absolute; transform:translate(-50%, calc(-100% - 9px)); white-space:nowrap; z-index:4; }
.timeline-popover.below { transform:translate(-50%, 9px); }
.timeline-popover:after { border:6px solid transparent; border-top-color:var(--ink); content:''; left:50%; position:absolute; top:100%; transform:translateX(-50%); }
.timeline-popover.below:after { border-top-color:transparent; border-bottom-color:var(--ink); bottom:100%; top:auto; }
.popover-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.popover-copy strong { font-size:.85rem; overflow:hidden; text-overflow:ellipsis; }
.popover-copy small { color:#b8c7c4; font-size:.7rem; }
.timeline-popover em { color:var(--accent); font-size:.72rem; font-style:normal; font-weight:700; margin-left:auto; }
.timeline-item.flash { animation:flash 1.8s ease-out; }
@keyframes flash { 0%,55% { background:#fdf0dd; box-shadow:0 0 0 2px var(--accent); } 100% { background:#fff; box-shadow:0 0 0 2px transparent; } }
.export-panel { background:#fff; border:1px solid var(--line); border-radius:8px; margin-top:22px; padding:16px; }
.export-head p { font-size:.85rem; margin:0 0 14px; }
.export-fields { display:flex; gap:10px; margin-bottom:14px; }
.export-fields label { color:var(--muted); display:flex; flex:1; flex-direction:column; font-size:.72rem; font-weight:700; gap:6px; letter-spacing:.09em; min-width:0; text-transform:uppercase; }
.export-fields input { background:#fff; border:1px solid var(--line); border-radius:5px; color:var(--ink); font-weight:400; letter-spacing:0; min-width:0; padding:10px; width:100%; }
#export-csv { width:100%; }
.stats-body { display:flex; flex-direction:column; gap:13px; }
.stats-row { align-items:flex-start; display:flex; gap:10px; }
.stats-row .color-swatch { margin-top:5px; }
.stats-copy { display:flex; flex:1; flex-direction:column; gap:5px; min-width:0; }
.stats-line { align-items:baseline; display:flex; gap:10px; justify-content:space-between; }
.stats-line strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stats-length { font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Measured against the longest activity, so the bar compares the rows to each other rather than
   pretending the range was fully tracked. */
.stats-bar { background:var(--line); border-radius:3px; height:6px; overflow:hidden; }
.stats-bar i { background:var(--activity-color, #3b82f6); border-radius:3px; display:block; height:100%; }
.stats-meta { color:var(--muted); font-size:.75rem; }
.stats-total { align-items:baseline; border-top:1px solid var(--line); display:flex; gap:10px; padding-top:12px; }
.stats-total span:first-child { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.stats-total strong { font-variant-numeric:tabular-nums; margin-left:auto; }
.stats-body .empty-state { padding:16px 0; }
.timeline-item { align-items:center; background:#fff; border-radius:6px; display:flex; gap:12px; padding:13px 15px; }.timeline-item div { display:flex; flex:1; flex-direction:column; gap:3px; }.timeline-item .entry-times { color:var(--muted); font-size:.8rem; }/* The note is the entry in the user's own words, so it reads darker than the times above it. */.entry-note { font-size:.82rem; overflow-wrap:anywhere; white-space:pre-wrap; }.timeline-item .entry-note { color:var(--ink); margin-top:2px; }.popover-copy .entry-note { color:#dbe7e4; }.intro { margin:-11px 0 20px; }.add-button,.primary-button { background:var(--teal); border:0; border-radius:5px; color:#fff; font-weight:700; padding:10px 14px; }.manage-row { align-items:center; background:#fff; border-radius:6px; display:flex; gap:9px; min-height:63px; padding:10px 12px; }.manage-name { display:flex; flex:1; flex-direction:column; gap:3px; }.manage-name small { color:var(--muted); font-size:.72rem; }.small-button { font-size:1.1rem; padding:8px 5px; }.danger { color:#b85e53; font-size:1.3rem; }.empty-state { color:var(--muted); padding:30px 10px; text-align:center; }
.login-shell { align-items:flex-start; display:flex; flex-direction:column; justify-content:center; min-height:100vh; padding:30px 0; }.login-mark { align-items:center; background:var(--ink); border-radius:50%; color:var(--accent); display:flex; font-size:2.2rem; height:64px; justify-content:center; margin-bottom:26px; width:64px; }.login-shell h1 { font-size:clamp(2.2rem, 11vw, 4.5rem); max-width:500px; }.login-shell > .muted { margin:10px 0 30px; }.login-shell form { display:flex; flex-direction:column; gap:9px; max-width:480px; width:100%; }.login-actions { display:flex; gap:9px; margin-top:4px; }.login-actions .primary-button { flex:1; min-height:48px; }
.login-switch { color:var(--muted); font-size:.85rem; margin:14px 0 0; }
.link-button { background:none; border:0; color:var(--teal); font-weight:700; padding:0; text-decoration:underline; }.login-shell input { background:#fff; border:1px solid var(--line); border-radius:5px; flex:1; min-width:0; padding:14px; }.primary-button { padding:0 18px; white-space:nowrap; }
.modal-overlay { align-items:center; background:rgba(23,35,41,.44); bottom:0; display:flex; justify-content:center; left:0; opacity:0; padding:20px; position:fixed; right:0; top:0; transition:opacity .16s; z-index:10; }
.modal-overlay.open { opacity:1; }
.modal { background:var(--paper); border-radius:10px; box-shadow:0 18px 44px rgba(23,35,41,.22); max-height:calc(100vh - 40px); max-width:400px; overflow-y:auto; padding:22px; transform:translateY(8px); transition:transform .16s; width:100%; }
.modal-overlay.open .modal { transform:none; }
.modal h3 { font-family:'Space Grotesk', sans-serif; font-size:1.2rem; margin:0 0 10px; }
.modal-copy { color:var(--muted); font-size:.9rem; line-height:1.45; margin:0 0 20px; }
.modal-actions { display:flex; gap:9px; justify-content:flex-end; margin-top:22px; }
.ghost-button { background:transparent; border:1px solid var(--line); border-radius:5px; color:var(--ink); font-weight:500; padding:10px 14px; }
.danger-button { background:#b85e53; }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field > span { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.field input[type=text],.field input[type=date],.field input[type=datetime-local],.field input:not([type]) { background:#fff; border:1px solid var(--line); border-radius:5px; color:var(--ink); padding:12px; width:100%; }
/* The date keeps its picker; the clock is typed, so it gets the narrower half and a fixed-width look. */
.field textarea { background:#fff; border:1px solid var(--line); border-radius:5px; color:var(--ink); font-family:inherit; font-size:.95rem; padding:12px; resize:vertical; width:100%; }
.field-row { display:flex; gap:8px; }
.field-row input[type=date] { flex:1.5; min-width:0; }
.field-row input[type=text] { flex:1; font-variant-numeric:tabular-nums; letter-spacing:.03em; min-width:0; text-align:center; }
.field input:focus-visible,.ghost-button:focus-visible,.swatch:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.swatch-grid { display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); }
.swatch { background:var(--swatch); border:2px solid transparent; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(23,35,41,.08); height:38px; padding:0; width:100%; }
.swatch.selected { border-color:var(--ink); }
.custom-color { align-items:center; background:#fff; border:1px solid var(--line); border-radius:5px; display:flex; gap:10px; margin-top:10px; padding:8px 10px; }
.custom-color input[type=color] { background:none; border:0; block-size:32px; cursor:pointer; inline-size:44px; padding:0; }
.custom-color span { color:var(--muted); font-size:.85rem; }
.custom-color em { color:var(--muted); font-size:.75rem; font-style:normal; font-variant-numeric:tabular-nums; margin-left:auto; }
/* Fixed rather than in the document flow, which would put it behind the tab bar or the header. */
.build-badge { color:var(--muted); font-size:.6rem; letter-spacing:.04em; margin:0; opacity:.7; pointer-events:none; position:fixed; right:12px; top:max(calc(env(safe-area-inset-top) + 6px), 6px); z-index:2; }
.update-banner { align-items:center; background:var(--ink); border-radius:6px; color:#f9fbf5; display:flex; font-size:.85rem; gap:12px; left:50%; max-width:calc(100% - 32px); padding:10px 12px; position:fixed; top:12px; transform:translateX(-50%); width:680px; z-index:6; }
.update-banner span { flex:1; }
.update-button { background:var(--accent); border:0; border-radius:5px; color:var(--ink); font-weight:700; padding:8px 14px; }
.update-button:disabled { opacity:.6; }
.primary-button:disabled { opacity:.6; }
#toast { background:var(--ink); border-radius:5px; bottom:85px; color:#fff; left:50%; max-width:calc(100% - 32px); opacity:0; padding:12px 16px; pointer-events:none; position:fixed; transform:translate(-50%, 15px); transition:.2s; z-index:5; }#toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:520px) { .shell,.login-shell { width:min(100% - 24px, 680px); }.section-heading .count { display:none; }.login-shell form { flex-direction:column; }.primary-button { min-height:48px; }.current-panel { min-height:126px; }.current-copy strong { font-size:1.22rem; } }