@import url("/s/fonts.css?v=f991e819d4b4");
/* Neon design system: Porcelain (Adam picked it Oct 19). White bone china: white dishes with a half-point rose-grey rim,
   a blush glaze used sparingly, one rose tint, Bodoni only on titles, SF for everything else. Tokens first, then
   components. See DESIGN.md. Never use raw hex outside :root. */
:root{
  color-scheme:light;
  /* safe areas, read once (tests set these to emulate a phone) */
  --sat:max(env(safe-area-inset-top,0px),12px);--sab:env(safe-area-inset-bottom,0px);
  --bg:#fff;--bg-2:#faf7f8;--s1:#f5f1f2;--s2:#efe8ea;--s3:#e8e0e3;
  /* the page and the sheets are white too (porcelain): a dish is told from the page by its rim, not by a grey ground.
     The grey fill (search, segmented track, grey buttons, tags) and the pressed row carry the rose undertone */
  --bg-grouped:#fff;--fill:#f5f1f2;--press:#efe8ea;
  /* iOS: secondary and quaternary system fills, tertiary label, the iOS 26 list separator (1 pt), Messages' grey bubble,
     the sheet grabber */
  --fill-2:#efe8ea;--fill-4:#f7f3f4;--label-3:#a99ea3;--sep:var(--rim);--bubble:#f5f1f2;--grabber:#d8cfd2;
  /* porcelain: the rim (every dish, divider and table rule, drawn at half a point), the blush glaze (fills only), the
     rose tint (the selected tab, links, the primary button, checks: the one interactive colour) */
  --rim:#d9cbd0;--rim-soft:#ebe3e6;--blush:#f9e7ec;--blush-2:#efc4d1;--rose:#a6406a;
  /* iOS 26 shapes: inset grouped cards, the large sheet's top corners, banners */
  --r-card:26px;--r-sheet:38px;--r-banner:22px;
  /* Liquid Glass (iOS 26: white, blurred, a rim and a soft rose-black shadow) where content passes under it; solid white
     on iOS 18 (below). Still controls on the white page are raised porcelain: white with a lift shadow. */
  --glass-bg:#ffffffb8;--glass-solid:#fff;--glass-filter:blur(16px) saturate(180%);--glass-ring:0 0 0 .5px var(--rim);--glass-shadow:var(--glass-ring),0 8px 32px #3c14281a;--glass-lift:0 0 0 .5px #3c142814,0 1px 6px #3c14281a;
  /* Apple's springs as CSS curves (pattern library section 9): critically damped (sheets, the dim, day paging), snappy
     (bounce .15), bouncy (.3), interactiveSpring (a press). The sheet takes UIKit's system spring: 393 ms on iOS 26,
     506 ms on iOS 18 (below). */
  --ease-sheet:cubic-bezier(.29,.48,.03,1); /* the sheet spring as a cubic, within 18 px of it: it moves on the first frame (linear() starts at zero speed; A/B 10/12: day open 229 -> 37 ms) */
  --ease-crit:linear(0, 0.0013 0.55%, 0.0048 1.1%, 0.0112 1.7%, 0.0197 2.3%, 0.0312 2.95%, 0.0446 3.6%, 0.0819 5.1%, 0.1164 6.3%, 0.1603 7.7%, 0.3653 13.8%, 0.4155 15.35%, 0.4621 16.85%, 0.5107 18.5%, 0.5564 20.15%, 0.5977 21.75%, 0.6372 23.4%, 0.6736 25.05%, 0.7069 26.7%, 0.7383 28.4%, 0.7667 30.1%, 0.7931 31.85%, 0.8175 33.65%, 0.8398 35.5%, 0.8606 37.45%, 0.8811 39.65%, 0.8992 41.9%, 0.9156 44.3%, 0.93 46.8%, 0.9427 49.45%, 0.9537 52.25%, 0.9633 55.25%, 0.9715 58.5%, 0.9835 65.4%, 0.9915 73.7%, 0.9961 83.15%, 1);
  --ease-snappy:linear(0, 0.0016 0.65%, 0.0061 1.3%, 0.0132 1.95%, 0.0236 2.65%, 0.0364 3.35%, 0.0526 4.1%, 0.0722 4.9%, 0.0953 5.75%, 0.1359 7.1%, 0.1868 8.65%, 0.4126 15.05%, 0.4672 16.65%, 0.5147 18.1%, 0.5661 19.75%, 0.6129 21.35%, 0.6565 22.95%, 0.6957 24.5%, 0.7317 26.05%, 0.7648 27.6%, 0.7958 29.2%, 0.8239 30.8%, 0.8498 32.45%, 0.8728 34.1%, 0.8937 35.8%, 0.9131 37.6%, 0.9306 39.5%, 0.9459 41.45%, 0.9592 43.5%, 0.9709 45.7%, 0.9806 48%, 0.9885 50.4%, 0.9997 55.85%, 1.0047 61.2%, 1.0063 67.95%, 1);
  --ease-bouncy:linear(0, 0.0016 0.55%, 0.0066 1.15%, 0.0149 1.75%, 0.0271 2.4%, 0.0424 3.05%, 0.0619 3.75%, 0.0842 4.45%, 0.1107 5.2%, 0.1598 6.45%, 0.2202 7.85%, 0.2842 9.25%, 0.4784 13.4%, 0.5368 14.7%, 0.5907 15.95%, 0.6459 17.3%, 0.6975 18.65%, 0.7436 19.95%, 0.786 21.25%, 0.8247 22.55%, 0.8596 23.85%, 0.8908 25.15%, 0.9195 26.5%, 0.9445 27.85%, 0.9668 29.25%, 0.9862 30.7%, 1.0023 32.15%, 1.022 34.5%, 1.0355 37%, 1.0435 39.75%, 1.046 42.8%, 1.0447 45.2%, 1.0407 48.05%, 1.0118 62.7%, 1.0027 70.45%, 0.9995 75.9%, 0.998 82.25%, 1);
  --ease-press:linear(0, 0.0014 0.6%, 0.0057 1.25%, 0.0127 1.9%, 0.0229 2.6%, 0.0357 3.3%, 0.0517 4.05%, 0.0713 4.85%, 0.0943 5.7%, 0.1348 7.05%, 0.1856 8.6%, 0.4091 14.95%, 0.4635 16.55%, 0.5108 18%, 0.562 19.65%, 0.6086 21.25%, 0.6521 22.85%, 0.6911 24.4%, 0.7271 25.95%, 0.7601 27.5%, 0.7911 29.1%, 0.8191 30.7%, 0.845 32.35%, 0.8687 34.05%, 0.8896 35.75%, 0.9089 37.55%, 0.9265 39.45%, 0.9422 41.45%, 0.9559 43.55%, 0.9677 45.75%, 0.9777 48.1%, 0.9858 50.55%, 0.9975 56.05%, 1.003 61.65%, 1.005 68.65%, 1);
  --t-sheet:393ms;--t-snappy:697ms;--t-bouncy:819ms;--t-press:210ms;
  /* ink with a rose undertone: body 17.2:1, secondary 6.6:1, placeholder 4.9:1 on white (measured); controls' rings 3.7:1 */
  --line:var(--rim-soft);--hair:var(--rim);--text-3:#a99ea3;--text-quiet:#655a5f;--line-ctl:#8e8288;--chev:#c3b8bc;--text-ph:#7a6e73;--text:#1e1a1b;--text-2:#655a5f;--link:var(--rose);
  --primary:var(--rose);--on-primary:#fff;
  --red-bg:#ffebeb;--red-ink:#391417;--red:#cb2a2f;--red-solid:#da2f35;--red-text:#991a1f;
  --amber-bg:#fff4d6;--amber-ink:#4e2009;--amber:#a35200;
  --green-bg:#ebfaeb;--green-ink:#1b311e;--green:#297a3a;
  --heat-0:#f1ecee;--heat-1:#f7e2e8;--heat-2:#efc6d3;--heat-3:#dc9aaf;--heat-4:#b65a80; /* the glaze, from bare porcelain to rose */
  --ring:0 0 0 2px var(--bg),0 0 0 4px var(--rose);
  --shadow-sm:0 2px 2px #0000000a;--shadow-modal:0 0 0 1px #00000014,0 1px 1px #00000005,0 8px 16px -4px #0000000a,0 24px 32px -8px #0000000f;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--tap:48px;--tab-off:#8e8288;--scrim:#00000033;--bg-dim:#ccc;
  --tab-h:62px;--tab-gap:21px; /* the iOS 26 floating tab bar: 62 tall, 21 above the screen edge (ios-patterns §4) */
  --ease-snappy:linear(0, 0.0016 0.65%, 0.0061 1.3%, 0.0132 1.95%, 0.0236 2.65%, 0.0364 3.35%, 0.0526 4.1%, 0.0722 4.9%, 0.0953 5.75%, 0.1359 7.1%, 0.1868 8.65%, 0.4126 15.05%, 0.4672 16.65%, 0.5147 18.1%, 0.5661 19.75%, 0.6129 21.35%, 0.6565 22.95%, 0.6957 24.5%, 0.7317 26.05%, 0.7648 27.6%, 0.7958 29.2%, 0.8239 30.8%, 0.8498 32.45%, 0.8728 34.1%, 0.8937 35.8%, 0.9131 37.6%, 0.9306 39.5%, 0.9459 41.45%, 0.9592 43.5%, 0.9709 45.7%, 0.9806 48%, 0.9885 50.4%, 0.9997 55.85%, 1.0047 61.2%, 1.0063 67.95%, 1); /* Apple's .snappy spring (ios-patterns §9) */
  /* the iOS type scale and its line heights, in rem of the iOS body size (17 at the default Text Size) */
  --fs-title:min(calc(38rem/17),64px);--lh-title:min(calc(44rem/17),74px); /* the large title, in Bodoni: 38/44 at the default size */
  --fs-sheet:min(calc(26rem/17),40px);--lh-sheet:min(calc(31rem/17),48px); /* a sheet's title, in Bodoni */
  --fs-section:calc(20rem/17);--lh-section:calc(25rem/17);
  --fs-body:1rem;--lh-body:calc(22rem/17);--fs-small:calc(15rem/17);--lh-small:calc(20rem/17);--fs-foot:calc(13rem/17);--lh-foot:calc(18rem/17);
  --font:-apple-system,BlinkMacSystemFont,"Inter Neon","Segoe UI",Roboto,"Helvetica Neue",sans-serif; /* SF on every Apple device; Inter only where there is none */
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Bodoni Moda Neon","Bodoni 72",Didot,serif; /* titles only */
}
@media (prefers-contrast:more){:root{--line:var(--line-ctl);--text-2:var(--text)}}
/* iOS 18 (the Xs): Safari 26 is the first with anchor positioning. There glass draws solid and the sheet takes iOS 18's
   system spring. Glass blurs, and casts its 40 pt shadow, only where content passes under it (toasts). The nav row and
   the sheets' controls sit on flat colour, where iOS 26 glass is a faint white that takes the colour under it, with an
   even halo and no rim (blind rounds 20 and 26: a ring, an opaque disc and an offset shadow all read as web); a blur
   there draws nothing and costs every frame. */
@supports not (anchor-name:--a){:root{--t-sheet:506ms;--glass-bg:var(--glass-solid);--glass-filter:none}}
.glass{background:#fff;box-shadow:var(--glass-lift)}
.toast.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--glass-shadow)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:17px;font:-apple-system-body;font-family:var(--font);-webkit-text-size-adjust:100%;background:var(--bg-grouped)}
/* The shell never scrolls as a whole: body is pinned and .app is the one scroller, so a screen that fits does not move
   (no rubber band); a long one scrolls inside .app. Neon's pages (in a frame) scroll normally. */
html,body{height:100%;overscroll-behavior:none}
html.boot:not(.ready) body{visibility:hidden} /* shell only: first frame waits for the font (boot.js) */
body.shell{position:fixed;inset:0;overflow:hidden}
body{margin:0;background:var(--bg-grouped);color:var(--text);font-size:var(--fs-body);line-height:var(--lh-body);overflow-wrap:break-word;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
h1,h2,h3{margin:0;font-weight:600;color:var(--text)}
b,strong{font-weight:600} /* two weights: 400 and 600; large titles 700, and 500 where iOS draws Medium (bar buttons, the picked day) */
h1{font-family:var(--serif);font-size:var(--fs-title);line-height:var(--lh-title);font-weight:500;letter-spacing:-.01em} /* the large title in Bodoni, where iOS sets Bold 34/41: one fine serif, on titles only */
h2{font-size:var(--fs-section);line-height:var(--lh-section)}
p{margin:0}
a{color:var(--link)}
:focus-visible{outline:none;box-shadow:var(--ring)}
::selection{background:var(--blush-2);color:var(--text)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-2);font-size:var(--fs-small);text-wrap:pretty}
.muted,.label,.hint,.error,.card-title,.list-meta,.banner,.snippet{line-height:var(--lh-small)} /* 15 on 20, like iOS */
.mono{font-family:var(--mono)}
.stack>*+*{margin-top:16px}.stack-lg>*+*{margin-top:28px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* shell */
.app{background:var(--bg-grouped);position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:max(16px,var(--sat)) 16px max(24px,var(--sab))} /* a pushed page has no tab bar under it, so its last line clears the home indicator itself */
body:has(.tabbar) .app{padding-bottom:calc(var(--tab-gap) + var(--tab-h) + 24px)} /* the last item clears the floating bar */
body.shell:has(.tabbar.over)::after{content:"";position:fixed;z-index:9;left:0;right:0;bottom:0;height:calc(var(--tab-gap) + var(--tab-h) + 16px);pointer-events:none;background:linear-gradient(#fff0,var(--bg-grouped) 60%)} /* content fades under the bar, as in iOS 26 */
.app.bare{bottom:0}
.app-inner{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
/* iOS large title: a 44pt nav row (bar buttons on its right), 8 below it the title (iOS 26: 10), 12 to what follows */
.topbar{display:grid;grid-template:44px/minmax(0,1fr) auto;align-items:center;column-gap:12px;margin:4px 0 -16px} /* the large title on its bar button's row, centred together, just under the status bar, as iOS 26's Music and App Store tabs (Adam 10/12 19:45: no empty nav row above it); the same 44 pt row on every tab, so switching tabs moves nothing */
.topbar h1{grid-area:1/1}
/* the nav row on every screen with a Back (src/ui.mjs layout, public/nav.js; t-0128, coordinator's go 10/13) */
/* the nav row (iOS 26, ios-patterns §2-3): pinned at the safe-area top, the Back circle at x 16 centred 22 below it,
   the small title fading in once the large one has gone under it, and the page fading out under the row */
.navrow{position:fixed;z-index:20;top:0;left:0;right:0;height:calc(var(--sat) + 44px);padding:var(--sat) max(16px,calc(50vw - 244px)) 0;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;column-gap:8px;pointer-events:none}
.navrow>*{pointer-events:auto}
.navrow::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:calc(var(--sat) + 72px);background:linear-gradient(var(--bg-grouped) calc(var(--sat) + 54px),color-mix(in srgb,var(--bg-grouped) 85%,transparent) calc(var(--sat) + 60px),transparent);opacity:0;transition:opacity .2s;pointer-events:none} /* the page colour behind the whole row, fading out just below it: text never shows through under the title (iOS 18 draws an opaque bar here; iOS 26 a soft edge) */
.navrow.under::before{opacity:1;transition:none} /* on, in the same frame as the first scroll: a 0.2 s fade let text show through the title */
/* laid out at 52 and resting at 0.846 (44 pt), so the press grows it to its own size and the chevron stays sharp */
.back{grid-column:1;width:52px;height:52px;margin:-4px;will-change:transform;display:grid;place-items:center;border-radius:50%;color:var(--text);text-decoration:none;transform:scale(.84615);transition:transform var(--t-bouncy) var(--ease-bouncy)}
.back{background:#fff;box-shadow:var(--glass-lift)} /* raised porcelain on the white page (iOS 26 glass resolves to it over white) */
@supports not (anchor-name:--a){.back{background:var(--glass-solid)}}
.back.pressed{opacity:.55;transition:opacity .1s}
.back svg{width:12.76px;height:22.12px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transform:translateX(-1.77px)} /* the device's 10.80 x 18.72 at rest, 1.5 pt left of centre */
.nav-title{grid-column:2;justify-self:center;max-width:100%;margin:0;font-size:min(var(--fs-body),22px);line-height:22px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:var(--p2,0)}
.app-inner:has(>.navrow) h1{opacity:var(--p1,1)} /* the large title fades as it goes under the row (ios-patterns §3) */
.app-inner:has(>.navrow){padding-top:54px} /* the large title's box at safe top + 54 (iOS 26), on every screen with a Back */
@media (prefers-reduced-motion:reduce){.back,.back.pressed{transition:none}.navrow::before{transition:none}}
/* section header, iOS 26: Semibold 17/22 in the secondary ink on the cells' text column, 8 above the dish */
section.stack>h2{padding:0 16px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2)}
section.stack>h2+*{margin-top:8px}
/* tab bar: 49px of items above the home-indicator inset, as in iOS (nothing drawn in the inset). Labels stay 12px
   (Alessia's eyes) in the regular weight: at 12px it draws iOS's 10pt medium stroke. Selected = a dark tint only;
   hairline dividers between tabs (Adam). */
/* Tab bar: the iOS 26 floating capsule (ios-patterns §4; Adam 10/12 03:45: "be thoughtful about how they look, how they
   feel, and how that animation moves from option to option. It should be snappy"). Glass where it is cheap; on iOS 18
   (the Xs) solid #FAFAFA, the colour iOS 26 glass resolves to over white. The selected tab sits on a grey pill that
   moves on touch-down on a critically damped spring and lands exactly in its slot. Labels stay (Adam 03:47). */
.tabbar{position:fixed;z-index:10;left:0;right:0;margin:0 auto;bottom:var(--tab-gap);width:calc(276px + mod(100vw, 2px));height:var(--tab-h);border-radius:31px;padding:4px 8px;display:grid;grid-template-columns:repeat(3,1fr);background:#ffffffb8;box-shadow:0 0 0 .5px var(--rim),0 8px 32px #3c14281a}
.tabbar.over{-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)} /* glass only while content passes under the bar (app.js sets .over); with nothing under it a blur draws nothing and cost every sheet frame */
/* The bar sits on whole pixels: 276 wide on an even screen, 277 on an odd one (393, 375), so it is centred exactly and
   each tab is a whole number of pixels wide. At a half pixel its icons jumped a device pixel sideways whenever the
   pill's move put them on their own layer (Adam 04:40: "the icons at the bottom are moving around"). The pill keeps
   its layer all the time for the same reason. */
@supports not (anchor-name:--a){.tabbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}} /* iOS 18 and older: solid white, no blur (the A12's frame budget) */
.tabbar a{position:relative;z-index:1;height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text);text-decoration:none;font-size:10px;font-weight:600;line-height:12px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tabbar a:active{opacity:1} /* the pill is the pressed look */
/* iOS 26: 10 pt Semibold labels in the label colour; the selected one takes the tint (rose) on its blush pill */
.tabbar a[aria-current=page]{color:var(--rose)}
.tabbar svg{width:28px;height:28px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tabbar .solid{fill:currentColor}.tabbar .cut{stroke:#fafafa;stroke-width:1.5}
.tabbar .on{display:none}
/* Haptics on iPhone: a real tap on a native <input switch> plays the system tick (Safari 17.4+; from iOS 26.5 only a
   direct tap does, so the switch is what the finger lands on). It keeps its native look (stripping it kills the
   tick), invisible over the tab, its hit area rounded like the pill. The link underneath serves keyboard and
   VoiceOver. (project-fathom; WebKit bug 309082) */
.tabbar .hap{position:relative;z-index:2;width:100%;height:54px;margin:0;opacity:0;cursor:pointer;clip-path:inset(0 round 27px);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tab-pill{position:absolute;top:4px;left:4px;width:calc((100% - 16px) / 3 + 8px);height:54px;border-radius:27px;background:var(--blush);transform:translateX(calc(var(--i, 0) * (100% - 8px)));transition:transform .35s var(--ease-crit);will-change:transform} /* critically damped: lands exactly in its slot, never past the capsule ends (Adam 04:03) */
/* iOS 26's tab press (Adam 04:40; ios-patterns §1 "Tab bar item, iOS 26"): on touch-down the tab grows 1.15 and its pill
   lights up like glass, a white glow under the finger and a sheen sweeping across it; on the lift the tab springs back.
   The pill itself never grows, so it stays inside the capsule. iOS 18 (the Xs): the grow only. */
.tabbar a{will-change:transform;transition:transform var(--t-snappy) var(--ease-snappy)}
.tabbar a.lens{transform:scale(1.15);transition:transform var(--t-press) var(--ease-press)}
.tab-pill{overflow:hidden}
.tab-pill::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) 50%,#ffffffe6,#fff0 70%);opacity:0;transition:opacity .3s ease}
.tabbar.pressing .tab-pill::before{opacity:1;transition-duration:.1s}
.tabbar.pressing .tab-pill{transform:translateX(calc(var(--i, 0) * (100% - 8px))) scaleY(1.11)} /* the pill lifts into a lens, taller only, so it never reaches the capsule's ends (WWDC25: x1.26-1.39 tall) */
.tab-sheen{position:absolute;top:0;bottom:0;left:-60%;width:60%;background:linear-gradient(100deg,#fff0 20%,#ffffffb3 50%,#fff0 80%);pointer-events:none}
@supports not (anchor-name:--a){.tab-pill::before,.tab-sheen{display:none}}
@media (prefers-reduced-motion:reduce){.tab-pill,.tabbar a,.tabbar a.lens{transition:none}.tabbar a.lens{transform:none}.tab-sheen{display:none}}

/* button: iOS 26 Large capsules, 50 tall, Regular 17; filled ink, grey, or red-tinted */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:50px;padding:0 20px;border:0;border-radius:25px;font:inherit;font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);cursor:pointer;text-decoration:none}
.btn:disabled{background:var(--fill-4);color:var(--label-3);box-shadow:none;pointer-events:none} /* iOS: the faintest fill, tertiary text */
.btn[aria-busy=true]{opacity:.6;pointer-events:none}
.btn-primary{background:var(--primary);color:var(--on-primary);font-weight:600} /* the rose capsule: once a screen */
.btn-secondary{background:var(--fill);color:var(--text)}
.btn-danger{background:var(--red-bg);color:var(--red-text)} /* 7.3:1 on its tint, measured, as everywhere Alessia reads */
/* a text bar button and the circled bar buttons (iOS 26: each on its own glass); glyphs SF Medium 17, ink */
.bar-btn{position:relative;flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:22px;color:var(--text);font:inherit;font-size:min(var(--fs-body),23px);font-weight:500;line-height:min(var(--lh-body),30px);text-decoration:none;cursor:pointer} /* stops at the largest standard size, as iOS bar buttons stop growing: at the accessibility sizes "Settings" no longer covers the large title */
.bar-btn:disabled{color:var(--text-3);cursor:default}
.bar-btn .count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 4px;border-radius:10px;background:var(--red-solid);color:var(--on-primary);font-size:13px;line-height:20px;font-weight:600;text-align:center} /* a red count badge, as on iOS */
.circle{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;color:var(--text);cursor:pointer}
.circle svg{width:11px;height:19px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round} /* chevron ink 10.3 x 18.3 */
.circle:disabled{color:var(--text-3);cursor:default}
.cal-head .circle{background:none} /* iOS's date picker: bare arrows, no disc (a bare <button> otherwise draws the UA grey) */
.btn-block{display:flex;width:100%}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* forms */
.field{display:block}.field+.field{margin-top:16px}
.label{display:block;margin-bottom:8px;font-size:var(--fs-small);color:var(--text)}
.input,.textarea,.select{display:block;width:100%;min-height:var(--tap);padding:0 18px;border:0;border-radius:calc(var(--tap) / 2);background:var(--bg);color:var(--text);font:inherit;font-size:max(16px,var(--fs-body));line-height:var(--lh-body);box-shadow:inset 0 0 0 1px var(--line-ctl);-webkit-appearance:none;appearance:none}
.textarea{min-height:120px;padding:12px 18px;border-radius:var(--r-xl);resize:vertical}
.select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238f8f8f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.input:focus,.textarea:focus,.select:focus{box-shadow:inset 0 0 0 1px var(--line-ctl),var(--ring)}
.input,.textarea{caret-color:var(--rose)} /* the iOS caret takes the tint */
.is-error{box-shadow:inset 0 0 0 2px var(--red)}
.hint{margin-top:4px;font-size:var(--fs-small);color:var(--text-2)}
.error{margin-top:4px;font-size:var(--fs-small);color:var(--red)}
.row{display:flex;align-items:center;gap:16px;min-height:52px;padding:8px 0;cursor:pointer}
.row-text{flex:1}
.row input[type=checkbox]:not([switch]),.row input[type=radio]{width:22px;height:22px;margin:0;accent-color:var(--primary);flex:none}
.row input[type=checkbox]:not([switch]){-webkit-appearance:none;appearance:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-ctl);background:transparent center/16px no-repeat;cursor:pointer} /* round, like Reminders: a thin ring only (iOS 26's is lighter, but a control keeps 3:1), so a pressed row shows through */
.row input[type=checkbox]:not([switch]):checked{box-shadow:inset 0 0 0 1px var(--blush-2);background-color:var(--blush);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a6406a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 8.3l2.9 2.9 5.9-6.6'/%3E%3C/svg%3E")} /* ticked: glazed blush, a rose check */
.row input[switch]{flex:none;margin:0} /* native: each iOS draws its own switch (iOS 26: 64 x 28) */
.row-group{border-radius:var(--r-card);background:var(--bg);outline:.5px solid var(--rim);outline-offset:-.5px;overflow:hidden}
/* surfaces: white dishes on the white page, each told by its half-point rim (iOS inset grouped, in porcelain) */
.card{background:var(--bg);outline:.5px solid var(--rim);outline-offset:-.5px;border-radius:var(--r-card);padding:16px} /* the rim is an outline: it takes no room, so a dish lays out as a borderless one */
.card-title{font-size:var(--fs-small);font-weight:600;color:var(--text-2)} /* Health: Semibold 15/20 */
.card-value{font-size:2rem;font-weight:600;line-height:calc(41rem/17)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.counts{grid-template-columns:repeat(auto-fit,minmax(max(calc((100% - 24px) / 3 - 1px),calc(3em + 32px)),1fr))} /* count tiles (Home's, stat-tiles); at the accessibility sizes a tile whose name no longer fits a third takes a wider row instead of being cut */
.counts .card-value{white-space:nowrap} /* "14,780" already reaches the padding at the default size; never split it */
:is(.grid-2,.grid-3) .card{padding:12px 16px} /* Health summary cards: 12 16 14 (14 is off the 4 pt grid) */
:is(.grid-2,.grid-3) .card-value{font-size:min(calc(22rem/17),6vw);line-height:calc(28rem/17);font-weight:700} /* Bold 22, as iOS count tiles; "14,650" fits a third of the Xs */
.heat-card{padding:16px}
.list{border-radius:var(--r-card);background:var(--bg);outline:.5px solid var(--rim);outline-offset:-.5px;overflow:hidden}
/* iOS 26 rows: 52 tall, 68 with a second line (title 17/22, subtitle 15/18) */
.list-row{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;color:var(--text);text-decoration:none}
.list-row:has(.list-meta:not(:empty)),.row-group .row:has(.muted:not(:empty)){min-height:68px}
/* SF chevron.forward as iOS lists draw it (measured on device): ink 6.9 x 11.8 pt at 1.9, its tip 18 pt from the card's edge */
a.list-row::after{content:"";width:9px;height:12px;flex:none;margin-left:auto;background:var(--chev);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M.94.94 5.98 5.9.94 10.87' transform='translate(0 .06)' fill='none' stroke='%23000' stroke-width='1.88' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center/9px 12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 12'%3E%3Cpath d='M.94.94 5.98 5.9.94 10.87' transform='translate(0 .06)' fill='none' stroke='%23000' stroke-width='1.88' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center/9px 12px no-repeat}
.list-main{flex:1;min-width:0}.list-meta{font-size:var(--fs-small);line-height:calc(18rem/17);color:var(--text-2)}
.detail{flex:0 1 auto;min-width:0;text-align:right;overflow-wrap:anywhere;color:var(--text-2)} /* a row's trailing value: a long one wraps rather than runs past the row */
.badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:6px;font-size:var(--fs-foot);line-height:var(--lh-foot);font-weight:600;background:var(--fill);color:var(--text)} /* a small tag, like Mail and Reminders: never shaped like a button */
.badge-red{background:var(--red-bg);color:var(--red-ink)}
.badge-amber{background:var(--amber-bg);color:var(--amber-ink)}.badge-green{background:var(--green-bg);color:var(--green-ink)}
/* tabs: the iOS 26 segmented capsule at 44 pt (as .seg), its chosen segment a white thumb with a rim */
.tabs{display:flex;padding:4px;gap:0;background:var(--fill);border-radius:22px}
.tabs [role=tab]{flex:1;min-width:0;min-height:36px;padding:0 8px;border:0;border-radius:18px;background:transparent;color:var(--text);font:inherit;font-size:min(calc(15rem / 17),20px);line-height:min(calc(20rem / 17),26px);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.tabs [role=tab][aria-selected=true]{background:var(--bg);font-weight:600;box-shadow:0 0 0 .5px var(--rim),0 2px 8px #3c14280f}
.tabs [role=tab].pressed{opacity:1}
[role=tabpanel][hidden]{display:none}
.table{width:100%;border-collapse:collapse}
.table thead{position:absolute;width:1px;height:1px;overflow:hidden}
.table tr{display:block;padding:12px 0;border-bottom:.5px solid var(--hair)}
.table td{display:flex;justify-content:space-between;gap:16px;padding:4px 0}
.table td::before{content:attr(data-label);color:var(--text-quiet);font-size:var(--fs-body);line-height:var(--lh-body)} /* a stacked row's own label: Alessia reads it beside the value */
.empty{text-align:center;padding:40px 16px}.empty svg{width:48px;height:48px;stroke:var(--text-2);fill:none;stroke-width:1.25}
.empty h2{margin:12px 0 4px}.empty p{color:var(--text-2);margin-bottom:16px}
.banner{padding:12px 16px;border-radius:var(--r-card);background:var(--amber-bg);color:var(--amber-ink);font-size:var(--fs-small)}
/* sheet, toast, savebar */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:520px;max-height:85dvh;padding:4px 16px calc(24px + var(--sab));border:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--bg-grouped);color:var(--text);box-shadow:var(--shadow-modal);overscroll-behavior:contain;overflow:auto}
dialog.sheet::backdrop{background:var(--scrim)}
.grabber{width:36px;height:5px;margin:0 auto 4px;border-radius:2.5px;background:var(--grabber)} /* iOS 26, on device: 36 x 5 */
.sheet-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
/* the X: iOS 26's close button, a 44 circle in the secondary fill with an ink xmark */
.sheet-x{background:#fff;box-shadow:var(--glass-lift)} /* raised porcelain, never a flat grey disc */
.sheet-x svg{width:14px;height:14px;stroke-width:1.8}
/* bottom sheet (pages, a day's numbers): iOS 26's large sheet, opaque, from the status bar down (30 at least, leaving
   a dimmed strip to tap where there is none), 38 top corners; it slides up on UIKit's spring over a 20% dim that fades
   on the same clock */
.scrim{position:fixed;inset:0;z-index:40;background:var(--scrim);opacity:0;transition:opacity var(--t-sheet) var(--ease-sheet)}
.scrim.on{opacity:1}
/* The strip with the clock and the battery: a Home Screen app that starts under it has no inset to measure, so this
   band has a real height either way, and it is opaque, since the phone picks the colour off the page's own top and
   may pass over anything see-through. It sits over the scrim in the already-dimmed grey, so nothing reads different,
   and never as far down as a sheet's top edge (max(30px, var(--sat))). (Adam, Oct 14) */
.topdim{position:fixed;z-index:45;top:0;left:0;right:0;height:max(24px,var(--sat));background:var(--bg-dim);pointer-events:none}
.bsheet{position:fixed;left:0;right:0;bottom:0;top:max(30px,var(--sat));z-index:41;max-width:520px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg-grouped);border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding-bottom:max(0px,calc(var(--sab) - 12px));transform:translateY(calc(100% + 6px));transition:transform var(--t-sheet) var(--ease-sheet),top var(--t-sheet) var(--ease-crit);will-change:transform;box-shadow:none} /* no shadow: the dim does that job, and a moving shadow costs frames */
.bsheet.on{transform:translateY(0)}
/* A fitted sheet (iOS 26's custom detent): as tall as what it holds, floating 6 pt in from the sides and the bottom,
   34 pt corners on top and the display's curve below, so the screen it came from shows above it under the dim. The
   page sheet learns its height from its page (app.js, --fit); the day sheet is as tall as its content. Past the
   screen it reaches the status bar and its page scrolls inside it. It keeps its width at every height, so a page is
   never drawn twice; on a 320 pt screen (Display Zoom) it is edge to edge, so the calendar's seven 44 pt days fit. */
.bsheet.fit{left:6px;right:6px;bottom:6px;top:max(var(--sat),calc(100% - 6px - var(--fit,100%)));border-radius:34px 34px 48px 48px;padding-bottom:0;overflow:hidden}
.bsheet.fit.auto{top:auto;max-height:calc(100% - 6px - var(--sat))}
@media (max-width:340px){.bsheet.fit{left:0;right:0;bottom:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0}}
.bsheet.snap{transition:transform var(--t-sheet) var(--ease-sheet)} /* a height change at once (the page's own sheet opening) */
.bsheet.fit .bsheet-head::before{content:"";position:absolute;top:5px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:2.5px;background:var(--grabber)} /* a fitted sheet can be pulled taller or away: it shows the grabber */
.bsheet.opening :is(.glass,.sheet-x){box-shadow:0 0 0 .5px #0000000a} /* the controls' halo lands with the sheet: painted mid-slide it held the first frame (A/B 10/12) */
.tabbar,.glass,.sheet-x,.circle{will-change:transform}.scrim{will-change:opacity} /* their own layers, so a sheet moving over them repaints nothing (A/B 10/12) */
.bsheet.dragging,.scrim.dragging{transition:none}
/* header 70 tall (iOS 26, the inspector sheets: Find My, Maps): the title top left in Bodoni, the X 16 from the top
   and right; a title of two lines makes it taller */
.bsheet-head{position:relative;z-index:1;flex:none;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:start;column-gap:12px;min-height:70px;padding:16px 16px 0 20px;touch-action:none;user-select:none;-webkit-user-select:none}
/* once content is under the bar, it fades out under it (iOS 26's soft scroll edge) */
.bsheet-head::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px;background:linear-gradient(var(--bg-grouped),transparent);opacity:0;pointer-events:none}
.bsheet.scrolled .bsheet-head::after{opacity:1}
.bsheet-head>*{grid-column:1;min-width:0;justify-self:start}.bsheet-head>.sheet-x{grid-column:2}
.bsheet-title{margin:0;max-width:100%;padding-top:max(0px,calc((44px - var(--lh-sheet)) / 2));font-family:var(--serif);font-size:var(--fs-sheet);line-height:var(--lh-sheet);font-weight:500;letter-spacing:-.005em;text-align:left;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere} /* two lines at most, then an ellipsis */
.bsheet[hidden]{display:flex!important;visibility:hidden} /* a closed sheet stays laid out below the screen, so its page is drawn before it slides up */
.bsheet-frames{flex:1;min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr)}
.bsheet-frame{grid-area:1/1;width:100%;height:100%;border:0;display:block;background:var(--bg-grouped)}
.bsheet-frame.idle{visibility:hidden} /* a page loaded ahead, waiting for its tap */
.bsheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:16px}
.bsheet .banner{margin:12px 16px 0;flex:none}
@media (prefers-reduced-motion:reduce){.bsheet{transform:none;opacity:0;transition:opacity .2s}.bsheet.on{opacity:1}.scrim{transition:opacity .2s}}
/* day sheet: the date is the title (iOS date picker header: Semibold 17 and a Bold 13 chevron.right that turns down
   while the month shows); under it a toolbar, as in Calendar: Today on the left, previous and next on the right */
.title-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;font-family:var(--serif);font-size:var(--fs-sheet);line-height:var(--lh-sheet);font-weight:500;cursor:pointer;text-align:left} /* the day sheet's title is its date, in Bodoni */
.title-btn svg{flex:none;width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-snappy) var(--ease-snappy)}
.title-btn[aria-expanded=true] svg{transform:rotate(90deg)}
.bsheet:not(.on) .title-btn svg{transition:none} /* closing with the month open: the chevron does not turn on its way down */
.day-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.day-nav #day-prev{margin-left:auto}
.bsheet:focus{outline:none}
.day-panel{transition:transform var(--t-sheet) var(--ease-crit)}
.day-panel.out-left{transform:translateX(-24px)}.day-panel.out-right{transform:translateX(24px)}
/* the month as iOS's inline date picker in a white cell: month left, arrows in circles on the right, 44 pt days */
.cal-card{padding:8px 8px 4px}
.cal-head{display:flex;align-items:center;gap:12px;padding-left:8px}
.cal-head h3{flex:1;margin:0;font-size:min(var(--fs-body),28px);line-height:min(var(--lh-body),34px)} /* stops at 28 (Adam 10/15): at the accessibility sizes "September" stays whole and › on screen */
@media (max-width:340px){.cal-card{margin-inline:-10px;padding-inline:0}} /* Display Zoom, 320 pt (Adam 10/15): seven 44 pt days need 308 pt; with no side padding and 10 pt of the margin around it, the card holds them, 6 pt in from each screen edge (the day sheet, and the date and number pickers in Neon's pages) */
.cal-grid{display:grid;grid-template-columns:repeat(7,44px);justify-content:space-between;text-align:center}
.cal-grid .dow{margin:8px 0 4px;font-size:17px;line-height:22px;font-weight:600;text-transform:uppercase;color:var(--text-2)}
/* each day: Regular 20 in a 44 circle; the green dot sits in the 8 pt under the circle, never inside it (iOS 26: rows 7 apart) */
.cal-grid button{width:44px;height:52px;display:grid;grid-template-rows:44px 8px;place-items:center;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:20px;font-variant-numeric:tabular-nums;cursor:pointer}
.cal-grid .d{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.cal-grid button::after{content:"";width:5px;height:5px;border-radius:50%}
.cal-grid button.empty,.cal-grid button:disabled{color:var(--tab-off)} /* one grey: no messages, or not yet */
.cal-grid button:disabled{cursor:default}
.cal-grid button.today .d{color:var(--text);font-weight:700} /* today: iOS tints its number; ink has no tint, so it is bold */
.cal-grid button[aria-pressed=true] .d{background:var(--blush);color:var(--text);font-size:24px;font-weight:500} /* the picked day: blush, Medium 24 */
.cal-grid button.today[aria-pressed=true] .d{background:var(--primary);color:var(--on-primary)}
.cal-grid button.has::after{background:var(--heat-3)}
/* toasts: iOS banners, 16 from the sides, glass, sliding down; an error carries a red mark and stays until tapped */
#toasts{position:fixed;top:max(12px,var(--sat));left:16px;right:16px;z-index:50;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;margin:0 auto;max-width:480px;width:100%;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:var(--r-banner);color:var(--text);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:600;animation:toast-in var(--t-snappy) var(--ease-snappy) both}
.toast svg{flex:none;width:20px;height:20px;fill:var(--red);stroke:var(--on-primary);stroke-width:2;stroke-linecap:round}
.toast svg circle{stroke:none}
body.shell:has(.navrow) #toasts{top:calc(var(--sat) + 52px)} /* under the nav row, never over the Back circle */
@keyframes toast-in{from{transform:translateY(calc(-100% - max(12px,var(--sat))))}}
/* Save floats at the bottom: iOS 26's 52 pt bottom capsule, over the page fading out under it */
.savebar{position:sticky;bottom:0;margin:24px -16px -16px;padding:12px 16px;background:linear-gradient(transparent,var(--bg-grouped) 60%);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.save-why{order:-1;width:100%} /* the line sits above the button, which keeps the row to itself */
.savebar:has(> .save-why:not([hidden])){padding-top:40px;background:linear-gradient(transparent,var(--bg-grouped) 40px);pointer-events:none}
.savebar:has(> .save-why:not([hidden]))::before{content:"";position:absolute;inset:40px 0 0;z-index:-1;pointer-events:auto} /* the faded band lets a tap through to the row it shows; the solid part still catches one, as before */ /* with its line showing, the page has faded out before the line starts: words scrolling under the bar never cross it */
.savebar .muted{flex:1}
.savebar .btn{min-height:52px;border-radius:26px;font-weight:600}
.savebar .btn:disabled{background:#ffffffb3;box-shadow:var(--glass-lift);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter)} /* iOS 26: a glass capsule with tertiary text (blurred: text passing under it must not read sharp), never a flat grey slab */
/* heat map, laid out like GitHub's contribution graph, its days glaze pearls. The weeks share the dish's whole width
   (--pitch); the svg ends at the last pearl, so Less-More ends where the pearls end. */
.heat-box{container-type:inline-size;display:grid;grid-template-columns:fit-content(100%);justify-content:center}
.heat-graph,.heat-foot{--pitch:calc((100cqw - 32px) / var(--weeks))}
.heat-graph{display:grid;grid-template-columns:28px max-content;grid-template-rows:16px auto;gap:4px}
.heat-months{grid-column:2;position:relative;font-size:12px;line-height:16px;color:var(--text-2)}
.heat-months span{position:absolute;top:0;white-space:nowrap}
.heat-days{grid-column:1;grid-row:2;position:relative;font-size:12px;line-height:1;color:var(--text-2)}
.heat-days span{position:absolute;left:0;transform:translateY(-50%)}
.heat{grid-column:2;grid-row:2;display:block;width:calc(var(--pitch) * (var(--weeks) - 3 / 16));height:auto}
.heat-foot{display:grid;grid-template-columns:minmax(0,1fr);align-items:baseline;gap:8px;margin-top:10px;font-size:12px;line-height:16px;color:var(--text-2)}
.heat-foot .legend{order:-1;justify-self:end;font-size:12px} /* the key on its own row under the pearls, then the instruction */
.heat-foot .legend i{width:9px;height:9px;border-radius:50%} /* a pearl, large enough to tell the glazes apart */
.heat{overflow:visible}.heat .today{fill:none;stroke:var(--rose);stroke-width:2.2} /* today, ringed in rose */
/* pairing */
.center{flex:1;display:flex;flex-direction:column;justify-content:center}
.code{font-family:var(--mono);font-size:2rem;line-height:calc(41rem/17);font-weight:600;letter-spacing:.2em;text-align:center}
.code.match{font-family:var(--serif);font-size:min(calc(48rem/17),72px);line-height:min(calc(56rem/17),84px);font-weight:500;letter-spacing:.32em;margin-right:-.32em;font-variant-numeric:lining-nums tabular-nums} /* the four digits both phones show, in Bodoni */
/* the pair and wait screens: the mark, then Neon's name in Bodoni, centred */
.pair-mark{display:block;width:96px;height:auto;margin:0 auto 8px}
.center>.stack:first-child{text-align:center}
.center>.stack:first-child>p{color:var(--text-2)}
.btn-text{min-height:44px;background:none;color:var(--text-2)}
.btn-text b{margin-left:5px;font-weight:600;color:var(--rose)}
.pair-card{text-align:center}
.pair-btns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px} /* Copy alone takes the row where there is no Share */
.pair-btns span{display:inline-flex;align-items:center;gap:6px}
.pair-btns svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pair-link{word-break:break-all;text-wrap:wrap} /* two full lines; .muted's pretty wrap broke it at the host's hyphen into three */
.h0{fill:var(--heat-0)}.h1{fill:var(--heat-1)}.h2{fill:var(--heat-2)}.h3{fill:var(--heat-3)}.h4{fill:var(--heat-4)}

.legend{display:flex;align-items:center;gap:4px;font-size:var(--fs-small);color:var(--text-2)}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.legend .h0{background:var(--heat-0)}.legend .h1{background:var(--heat-1)}.legend .h2{background:var(--heat-2)}.legend .h3{background:var(--heat-3)}.legend .h4{background:var(--heat-4)}
.page-body{padding:16px}
.snippet{margin:8px 0 0;font-family:var(--mono);font-size:var(--fs-small);color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere}
summary{min-height:var(--tap);display:flex;align-items:center;cursor:pointer}
.preview{padding:16px;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line);background:var(--bg-2)}
.cal-key,.foot{margin:8px 16px 0;font-size:var(--fs-foot);line-height:calc(16rem/17)} /* footers, iOS 13/16, on the cells' text column */
/* gallery previews of app-only parts */
.tabbar.static{position:relative;left:auto;bottom:auto;margin:0 auto}
.bsheet.static{position:relative;top:auto;transform:none;height:180px;z-index:auto;box-shadow:0 0 0 1px var(--line);padding-bottom:0}
/* a page shows only when it is fully drawn (fonts and content), so nothing in it grows or moves after it appears */
.bsheet-frame.loading{opacity:0}
#devices>.btn+.btn{margin-top:12px}
/* pressed looks, as in iOS (UIKit timing). app.js sets .pressed on touch-down, so it shows in the first frame: text
   buttons, links and tab items dim to 0.2 at once and come back over 0.47 s; filled and capsule buttons 0.75; rows turn
   #d1d1d6 and fade back over 0.3 s; circles grow 1.25 (iOS 26 glass, 44 pt) on a press spring and settle back on a
   bouncy one. Text never scales (crisp bar line 7). */
:where(a[href],button,summary,label.row,[role=button]){-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;transition:opacity .47s} /* a held link never turns into a drag */
:where(a[href],button,summary,[role=button]).pressed{opacity:.2;transition:none}
.btn.pressed,.bar-btn.pressed{opacity:.75}
.list-row,.row{transition:background-color .3s}
.list-row.pressed,.row.pressed{opacity:1;background:var(--press);transition:none}
.circle{transition:transform var(--t-bouncy) var(--ease-bouncy)}
.circle.pressed{opacity:1;transform:scale(1.18);transition:transform var(--t-press) var(--ease-press)}
@media (prefers-reduced-motion:reduce){.circle.pressed{transform:none;opacity:.2}.toast{animation:none}.title-btn svg{transition:none}}
/* haptics (app.js): a see-through label over each tap target, its switch display:none; the finger lands on the label */
:where(:has(>.hx)){position:relative}
.hx{position:absolute;inset:0;border-radius:inherit;-webkit-tap-highlight-color:transparent}
.hx input{display:none}
.heat+.hx{position:static;grid-area:2/2;z-index:1} /* the heat map: one label over all its pearls; app.js finds the day from the point. z-index (a grid item takes it unpositioned): on WebKit 18 the svg won the hit test without it */
.topbar .bar-btn{grid-area:1/2;justify-self:end;align-self:center} /* a bar button, like Messages' Edit */
.topbar .bar-btn.circle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round} /* Settings: the gear, as iOS 26 draws a bar button on its own glass */
/* list dividers, iOS 26: 1 pt, from where the text starts (after a checkbox or radio) to 16 short of the right edge */
.row-group .row{position:relative;padding:12px 16px}
.list-row+.list-row::before,.row-group .row+.row::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:.5px solid var(--sep)}
.list-row:has(>.fglyph)+.list-row::before{left:60px} /* after a glyph, from where the words start */
.row-group .row+.row:has(>input:first-child)::before{left:54px}
/* Neon's pages: WebKit draws a resting page scrollbar as a 1pt grey square in the top-left corner */
html:has(>body.page-body){scrollbar-color:transparent transparent}
/* segmented control: 44 pt, as tall as the search field (iOS 26 measures 43-48; Adam 07:20: the same height), its white
   thumb 4 pt inside, no ring, sliding on the tab pill's critically damped spring. Labels Subheadline 15: Semibold on the
   chosen one as the thumb passes the middle (files.js), Medium on the other, as UIKit draws them. */
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:44px}
.seg::before{content:"";position:absolute;inset:0;border-radius:22px;background:var(--fill)}
.seg-thumb{position:absolute;top:4px;left:4px;width:calc((100% - 8px) / var(--n));height:36px;border-radius:18px;background:var(--bg);box-shadow:0 2px 20px #0000000f;transform:translateX(calc(var(--i, 0) * 100%));transition:transform .35s var(--ease-crit);will-change:transform}
.seg button{position:relative;z-index:1;min-width:0;padding:0 8px;border:0;background:none;color:var(--text);font:inherit;font-size:min(calc(15rem / 17),20px);line-height:min(calc(20rem / 17),26px);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.seg button.on{font-weight:600}
.seg button.pressed{opacity:1} /* the thumb is the pressed look, as the tab pill is */
/* search: iOS's field, a 44 pt grey capsule, magnifier and placeholder in secondary grey, a clear button once there is
   text, and Cancel beside it while it is in use (the capsule draws back to make room); 16 pt text, so iOS never zooms
   (crisp line 14); the magnifier one path at 1.5, 8 pt from the text */
.fsearch{position:relative;display:flex;height:44px;margin-top:24px;background:var(--bg-grouped);transition:transform .3s var(--ease-crit),opacity .2s} /* no grey band around it: B-Money's sticky bar needed one, here it covered the large title */
.fsearch::before{content:"";position:absolute;inset:0;border-radius:22px;background:var(--fill);pointer-events:none;clip-path:inset(0 0 0 0 round 22px);transition:clip-path .35s var(--ease-crit)}
.fsearch-glass{position:absolute;left:12px;top:14px;width:16px;height:16px;fill:none;stroke:var(--text-2);stroke-width:1.5;stroke-linecap:round;pointer-events:none}
.fsearch input{position:relative;flex:1;min-width:0;height:44px;padding:0 44px 0 36px;border:0;border-radius:22px;background:none;color:var(--text);font:inherit;font-size:16px;line-height:21px;caret-color:var(--text);-webkit-appearance:none;appearance:none;outline:none}
.fsearch input::placeholder{color:var(--text-2);opacity:1}
.fsearch input::-webkit-search-decoration,.fsearch input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.fsearch input:focus-visible{box-shadow:none} /* iOS shows the caret, no ring */
.fsearch-x{position:absolute;top:0;right:0;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--tab-off);cursor:pointer;transition:transform .35s var(--ease-crit)}
.fsearch-x svg{width:17px;height:17px;fill:currentColor}
.fsearch-x path{fill:none;stroke:var(--bg);stroke-width:1.6;stroke-linecap:round}
.fsearch-cancel{position:absolute;top:0;right:0;width:72px;height:44px;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:min(var(--fs-body),20px);white-space:nowrap;line-height:var(--lh-body);text-align:right;cursor:pointer;opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .2s,transform .35s var(--ease-crit),visibility 0s .35s}
.fsearch.active::before{clip-path:inset(0 72px 0 0 round 22px)}
.fsearch.active input{padding-right:116px}
.fsearch.active .fsearch-x{transform:translateX(-72px)} /* Cancel has 72 pt: "Cancel" at the largest Text Size is 66 pt in SF's width */
.fsearch.active .fsearch-cancel{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .35s var(--ease-crit)}
@media (prefers-reduced-motion:reduce){.seg-thumb,.fsearch,.fsearch::before,.fsearch-x,.fsearch-cancel{transition:none}}
/* Files: a row per file, its kind as a hairline glyph in the secondary ink (a 32 pt slot, no tile), by day under
   section headers; the preview is the large sheet with the document in a frame and Share, PDF and CSV floating over
   its foot as glass pills */
.fglyph{flex:none;width:32px;height:32px;display:grid;place-items:center}
.fglyph svg{width:24px;height:24px;fill:none;stroke:var(--text-2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fglyph .dot{fill:var(--text-2);stroke:none}
.fsheet .bsheet-frame{background:var(--bg)} /* the document is white paper */
.fsheet-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:12px;padding:40px 16px max(21px,var(--sab));background:linear-gradient(#fff0,var(--bg) 45%);pointer-events:none}
.fsheet-bar .btn svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fsheet-bar .btn{flex:1 1 0;max-width:150px;min-width:0;gap:8px;padding:0 16px;pointer-events:auto;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--glass-shadow);color:var(--text);font-weight:500}
/* Home, who texts more: one dish. The leader and the margin in words, then a bar each (the leader's glazed blush), then
   this year's lead under a rim */
.lead{padding:18px 18px 16px}
.lead-line{font-size:min(calc(20rem / 17),30px);line-height:min(calc(25rem / 17),38px);font-weight:600}
.lead-sub{margin-top:2px;color:var(--text-2)}
.bars{margin-top:16px;display:grid;gap:14px}
.bar-line{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:12px;color:var(--text-2)} /* at the largest sizes the count goes under the name */
.bar-line .num{font-weight:600;color:var(--text)}
.bar{height:8px;margin-top:6px;border-radius:4px;background:var(--fill)}
.bar i{display:block;height:100%;border-radius:4px;background:#d5cacf}
.bar.leads i{background:#e2a8bb}
.lead-year{margin:16px -18px 0;padding:12px 18px 0;border-top:.5px solid var(--rim);color:var(--text-2)}
.heat-card .tabs{margin-bottom:16px}
/* Home: the two tiles of a period under its name, on the cells' text column (the stat-tiles block) */
.vs-title{margin:4px 16px -4px}
.counts+.vs-title{margin-top:20px} /* the next period's name: the stack's 16 and 4 more (its 4 alone put it nearer the tiles above) */
.page-body .muted{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-quiet)}
/* the sweep: Files, Settings, Changes, the empty states and the pair screen */
.empty p,#devices .muted,main.app>.app-inner>.stack-lg>.muted,#devices+.muted,.changes .list-meta{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-quiet)}
#devices .badge{min-height:calc(26rem/17);padding:0 9px;border-radius:7px;font-size:calc(15rem/17);line-height:calc(20rem/17)}
.center .label{font-size:var(--fs-body);line-height:var(--lh-body)}
.input::placeholder,.textarea::placeholder{color:var(--text-ph);opacity:1} /* a page's own small print, at 17 pt */
/* Home, Workbook and the day sheet (t-0128, Oct 13): every line Alessia reads is 17 pt in the darker grey
   (#48484a: 8.2:1 on the page, 9.1:1 on a card). The heat map and the calendar keep
   their own small units (the GitHub units Adam asked for, and iOS's weekday headers), in that grey. */
.tab-panel:is([data-tab=home],[data-tab=workbook]) :is(.card-title,.list-meta,.muted),.day-panel .detail,.day-panel .muted,.cal-key,.foot,.heat-months,.heat-days,.heat-foot,.heat-foot .legend,.cal-grid .dow{color:var(--text-quiet)}
.tab-panel:is([data-tab=home],[data-tab=workbook]) :is(.card-title,.list-meta,.muted),.day-panel .muted,.cal-key,.foot{font-size:var(--fs-body);line-height:var(--lh-body)}
:is(.grid-2,.grid-3) .card-title{font-size:var(--fs-body);line-height:var(--lh-body)} /* Adam and Alessia under their counts */
.heat-foot>span:first-child{font-size:var(--fs-body);line-height:var(--lh-body)} /* "Tap a day to see its counts." is an instruction, so 17 pt */
/* Inside Neon's own blocks, wherever they are read: the quiet lines are 17 pt in that ink, not the 15 px --text-2
   grey, which composites to 4.8:1 on the page (t-0131's audit, Oct 14). The badges stay as they are, above 9:1 and
   listed with the other deliberate small print. */
[data-block] .muted,[data-block] .detail,[data-block] .hint,[data-block] .card-title,[data-block] .list-meta{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-quiet)}
.usage .card-title strong{font-size:calc(19rem/17);line-height:calc(24rem/17);font-weight:600;color:var(--text)}
.usage .list-meta,.usage .muted{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-quiet)}
/* Reduce Transparency (Settings > Accessibility > Display & Text Size): every glass surface goes solid, the same way
   iOS 18 gets it, so a panel's own text never reads through to the page under it (t-0128, Oct 13). */
@media (prefers-reduced-transparency: reduce){
:root{--glass-bg:var(--glass-solid);--glass-filter:none}
.back{background:var(--glass-solid)}
.tabbar,.fsheet-bar .btn{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}