/* Your georgefarrowgreen.com account: one page for the account every app on the site signs in with. In keeping with
   them: iOS 27's Liquid Glass (panels of glass with a bright rim and a darker hairline round it, blurred enough to read
   over anything) over a sky of slow light (night in dark mode, dawn in light); grouped lists as iOS's Settings
   has them; a large title that goes with the page, glass behind the status bar once it's scrolled under; sheets that come up from below and step the
   page back; and everything settling into place. All of it still with Reduce Motion, solid with Reduce Transparency. */

:root {
  color-scheme: dark;
  --sky-a: #121a3c; --sky-b: #0a0f26; --sky-c: #05060e;
  --sky-top: #1b2860;   /* (the sky at the very top, its light on it: what a phone tints its status bar with) */
  --aura-1: rgba(80, 120, 255, 0.55); --aura-2: rgba(160, 90, 255, 0.4); --aura-3: rgba(40, 190, 230, 0.32);
  --text: #f5f6fb; --text-2: rgba(235, 238, 250, 0.72); --text-3: rgba(235, 238, 250, 0.56);
  --glass: rgba(34, 40, 66, 0.5); --glass-strong: rgba(28, 33, 56, 0.86); --glass-ctl: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.1); --press: rgba(255, 255, 255, 0.07); --field: rgba(0, 0, 0, 0.24);
  --tint: #5aa9ff; --tint-deep: #2a6ae6; --tint-text: #8cc2ff; --danger: #ff6a5f; --good: #4fdc8e; --good-text: #4fdc8e; --warn: #ffbd4a;
  --edge: inset 0 1px 0.5px rgba(255, 255, 255, 0.42), inset 0 -1px 0.5px rgba(255, 255, 255, 0.08), inset 0 0 22px rgba(255, 255, 255, 0.03);
  --lift: 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 22px 44px -18px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.16);
  --blur: blur(28px) saturate(180%);
  --sheen: radial-gradient(140% 90% at 12% -20%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%);
  --dim: rgba(0, 0, 0, 0.5);
  --qr-card: #dfe4f3; --qr-edge: 0 14px 34px -16px rgba(0, 0, 0, 0.55);   /* (Your code: softened, not a white panel, on the dark) */
  /* the motion every app on the site shares: out (settling in), glide (things put in place, and sheets), in (going),
     and a soft spring (about 2% past, for a press let go); how long a press, its release, a small change, a usual one,
     a sheet coming up, and going */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-glide: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: linear(0, 0.019, 0.067, 0.135, 0.214, 0.3, 0.388, 0.473, 0.553, 0.628, 0.695, 0.755, 0.807, 0.852, 0.89, 0.921, 0.947, 0.968, 0.984, 0.996, 1.005, 1.012, 1.016, 1.018, 1.02, 1.02, 1.019, 1.018, 1.017, 1.015, 1.013, 1.012, 1.01, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1);
  --dur-press: 0.1s; --dur-release: 0.45s; --dur-fast: 0.2s; --dur-base: 0.35s; --dur-sheet-in: 0.5s; --dur-sheet-out: 0.34s;
  /* (this page's own names for them) */
  --ease: var(--ease-out); --glide: var(--ease-glide); --spring: var(--ease-spring);
  --r-group: 26px; --r-hero: 34px; --r-sheet: 36px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  /* your card's poster (and the light page's, below) */
  --pc-base: #121633; --pc-blur: blur(42px) saturate(1.6) brightness(0.5);
  --pc-pill: rgba(255, 255, 255, 0.14); --pc-pill-text: #fff; --pc-go: rgba(255, 255, 255, 0.93); --pc-go-text: #10183a;
  --pc-shade: linear-gradient(180deg, rgba(8, 10, 30, 0), rgba(8, 10, 30, 0.45) 62%, rgba(8, 10, 30, 0)); --pc-shade-below: 90px;
  --top: env(safe-area-inset-top, 0px);
}
/* (no linear() easing yet: a spring near enough) */
@supports not (transition-timing-function: linear(0, 1)) { :root { --ease-spring: cubic-bezier(0.2, 1.1, 0.4, 1); } }
/* light: by the device's setting (Automatic), or chosen for the account (data-theme, set by app.js) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --sky-a: #e9eefc; --sky-b: #f3f0fb; --sky-c: #f7f8fc;
    --sky-top: #dde3fb;
    --aura-1: rgba(110, 150, 255, 0.42); --aura-2: rgba(200, 150, 255, 0.36); --aura-3: rgba(90, 210, 240, 0.3);
    --text: #0d1020; --text-2: rgba(20, 24, 44, 0.66); --text-3: rgba(20, 24, 44, 0.62);
    --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(250, 251, 255, 0.9); --glass-ctl: rgba(20, 30, 60, 0.06);
    --line: rgba(20, 24, 44, 0.09); --press: rgba(20, 24, 44, 0.05); --field: rgba(20, 30, 60, 0.06);
    --tint: #2f7af0; --tint-deep: #1f5fd8; --tint-text: #1f63d6; --danger: #d12a1f; --good: #1f9d55; --good-text: #167a42; --warn: #945600;
    --edge: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1px 0.5px rgba(255, 255, 255, 0.4), inset 0 0 22px rgba(255, 255, 255, 0.3);
    --lift: 0 0 0 0.5px rgba(20, 30, 60, 0.08), 0 22px 44px -20px rgba(40, 50, 100, 0.28), 0 2px 6px rgba(40, 50, 100, 0.06);
    --sheen: radial-gradient(140% 90% at 12% -20%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 46%);
    --dim: rgba(10, 14, 30, 0.32);
    --qr-card: #fff; --qr-edge: 0 0 0 0.5px var(--line), 0 14px 34px -18px rgba(40, 50, 100, 0.35);
    --pc-base: #f3f1ef; --pc-blur: blur(42px) saturate(1.4) brightness(1.25) opacity(0.55);
    --pc-pill: rgba(255, 255, 255, 0.74); --pc-pill-text: #10183a; --pc-go: linear-gradient(180deg, #4b95ff, #2a6ae6); --pc-go-text: #fff;
    --pc-shade: linear-gradient(180deg, rgba(8, 10, 30, 0), rgba(8, 10, 30, 0.42) 70%, rgba(8, 10, 30, 0)); --pc-shade-below: 14px;
  }
}
:root[data-theme="light"] {
    --pc-base: #f3f1ef; --pc-blur: blur(42px) saturate(1.4) brightness(1.25) opacity(0.55);
    --pc-pill: rgba(255, 255, 255, 0.74); --pc-pill-text: #10183a; --pc-go: linear-gradient(180deg, #4b95ff, #2a6ae6); --pc-go-text: #fff;
    --pc-shade: linear-gradient(180deg, rgba(8, 10, 30, 0), rgba(8, 10, 30, 0.42) 70%, rgba(8, 10, 30, 0)); --pc-shade-below: 14px;
    color-scheme: light;
    --sky-a: #e9eefc; --sky-b: #f3f0fb; --sky-c: #f7f8fc;
    --sky-top: #dde3fb;
    --aura-1: rgba(110, 150, 255, 0.42); --aura-2: rgba(200, 150, 255, 0.36); --aura-3: rgba(90, 210, 240, 0.3);
    --text: #0d1020; --text-2: rgba(20, 24, 44, 0.66); --text-3: rgba(20, 24, 44, 0.62);
    --glass: rgba(255, 255, 255, 0.58); --glass-strong: rgba(250, 251, 255, 0.9); --glass-ctl: rgba(20, 30, 60, 0.06);
    --line: rgba(20, 24, 44, 0.09); --press: rgba(20, 24, 44, 0.05); --field: rgba(20, 30, 60, 0.06);
    --tint: #2f7af0; --tint-deep: #1f5fd8; --tint-text: #1f63d6; --danger: #d12a1f; --good: #1f9d55; --good-text: #167a42; --warn: #945600;
    --edge: inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 -1px 0.5px rgba(255, 255, 255, 0.4), inset 0 0 22px rgba(255, 255, 255, 0.3);
    --lift: 0 0 0 0.5px rgba(20, 30, 60, 0.08), 0 22px 44px -20px rgba(40, 50, 100, 0.28), 0 2px 6px rgba(40, 50, 100, 0.06);
    --sheen: radial-gradient(140% 90% at 12% -20%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 46%);
    --dim: rgba(10, 14, 30, 0.32);
    --qr-card: #fff; --qr-edge: 0 0 0 0.5px var(--line), 0 14px 34px -18px rgba(40, 50, 100, 0.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; font: 17px/1.35 var(--font); letter-spacing: -0.2px; color: var(--text); background: var(--sky-c);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
/* (a sheet takes the focus itself when it opens: no ring round it, nor round its first button) */
dialog.sheet:focus, dialog.sheet:focus-visible { outline: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.noscript { text-align: center; padding: 80px 24px; color: var(--text-2); }

/* ---- the sky: three slow lights drifting over the gradient ---- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(120% 80% at 50% -10%, var(--sky-a), var(--sky-b) 52%, var(--sky-c)) var(--sky-top); }   /* (its colour under the gradient, as the page loads: what an iPhone tints the strip behind its status bar with) */
/* (on a phone or a tablet, the sky ends above Safari's bar at the foot, fading into the page's own colour, the sky's at
   its foot, so the page carries on under the bar: with a layer fixed down to the foot of the screen, Safari fills under
   its bar solid) */
@media (hover: none) {
  .sky { bottom: auto; height: calc(100% - 120px); -webkit-mask-image: linear-gradient(#000 calc(100% - 160px), transparent); mask-image: linear-gradient(#000 calc(100% - 160px), transparent); }
}
/* (each light soft at its edge by its own gradient, eased as a blur would ease it, not by blurring it: a blur of 70px
   redone every frame, as they drift, was the most work anything on the page did, and every pane of glass blurred it
   again. Measured against the blurred ones, a difference of about 1 in 255. And moved on in small steps, twice a second,
   as Weather's clouds are: a slow drift looks the same, and the glass over them is blurred afresh twice a second rather
   than at every frame, the page at rest drawing next to nothing.) */
.aura { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 0.9; will-change: transform; }
.a1 { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--aura-1) 73%, transparent), color-mix(in srgb, var(--aura-1) 66%, transparent) 20%, color-mix(in srgb, var(--aura-1) 49%, transparent) 40%,
  color-mix(in srgb, var(--aura-1) 29%, transparent) 60%, color-mix(in srgb, var(--aura-1) 12%, transparent) 80%, transparent); top: -32vmax; left: -22vmax; animation: drift1 38s steps(76) infinite alternate, aura-in 0.9s ease-out backwards; }
.a2 { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--aura-2) 73%, transparent), color-mix(in srgb, var(--aura-2) 66%, transparent) 20%, color-mix(in srgb, var(--aura-2) 49%, transparent) 40%,
  color-mix(in srgb, var(--aura-2) 29%, transparent) 60%, color-mix(in srgb, var(--aura-2) 12%, transparent) 80%, transparent); top: 10vmax; right: -34vmax; animation: drift2 46s steps(92) infinite alternate, aura-in 0.9s ease-out backwards; }
.a3 { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--aura-3) 73%, transparent), color-mix(in srgb, var(--aura-3) 66%, transparent) 20%, color-mix(in srgb, var(--aura-3) 49%, transparent) 40%,
  color-mix(in srgb, var(--aura-3) 29%, transparent) 60%, color-mix(in srgb, var(--aura-3) 12%, transparent) 80%, transparent); bottom: -40vmax; left: 4vmax; animation: drift3 54s steps(108) infinite alternate, aura-in 0.9s ease-out backwards; }
/* (held where they are while a sheet's up over the page) */
body.sheet-up .aura { animation-play-state: paused; }
/* dawn, as you're signed in (app.js dawnBreak): a warm light at the foot, the sky's own lights brighter */
.sky .dawn { position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 50% at 50% 112%, rgba(255, 190, 150, 0.55), rgba(255, 160, 200, 0.22) 45%, rgba(255, 160, 200, 0) 72%),
  radial-gradient(110% 60% at 50% -12%, rgba(160, 200, 255, 0.22), rgba(160, 200, 255, 0) 62%); }
.sky.lit .aura { filter: brightness(1.3) saturate(1.2); transition: filter 1.2s var(--ease-out); }
/* and dusk, as you sign out (app.js duskFall): the sky drawn down from the top, its lights dimmer, and back */
.sky .dusk { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(20, 16, 58, 0.5), rgba(60, 36, 96, 0.22) 55%, rgba(255, 150, 120, 0.12)); }
.sky.dim .aura { filter: brightness(0.75) saturate(0.85); transition: filter 1.2s var(--ease-out); }
/* you, leaving for the app: from the tick, to where the app takes over (app.js leaving) */
.leave { position: fixed; z-index: 40; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; color: #fff; pointer-events: none;
  background: linear-gradient(180deg, #5fe39a, #1fa75a); box-shadow: 0 12px 28px -10px rgba(31, 167, 90, 0.8); }
.leave > * { grid-area: 1 / 1; }
.leave .face { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font: 600 22px/1 var(--font-d);
  background: linear-gradient(160deg, #78b6ff, #3157d8 70%, #6a3fd8); opacity: 0; }
.leave .face img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
/* (the lights coming up as the page opens, as they go when it leaves for an app: never there all at once) */
@keyframes aura-in { from { opacity: 0; } }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-16vmax, 8vmax) scale(0.9); } }
@keyframes drift3 { to { transform: translate(10vmax, -12vmax) scale(1.08); } }

/* ---- behind the status bar (where the page runs under it): glass, once the page has scrolled under it ---- */
.status { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--top); pointer-events: none; opacity: var(--bar, 0);
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: opacity 0.2s linear; }
/* (the page steps back where it's scrolled to, not from its very top: --sy, set by app.js as a sheet opens; by its
   transform alone, which is cheap to move, the dim behind the sheet darkening it; back as quickly as the sheet goes) */
.page { transform-origin: 50% var(--sy, 0px); transition: transform var(--dur-sheet-out) var(--glide); }
body.sheet-up .page { transform: scale(0.94) translateY(calc(var(--top) + 10px)); transition-duration: var(--dur-sheet-in); }
main { max-width: 640px; margin: 0 auto; padding: calc(var(--top) + 28px) max(16px, env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
@media (min-width: 760px) { main { padding-top: calc(var(--top) + 72px); } }

/* ---- the large title, going with the page as it scrolls ---- */
.large { margin: 0 4px 18px; font: 700 34px/1.08 var(--font-d); letter-spacing: 0.4px; }
.lede { margin: -10px 4px 22px; color: var(--text-2); font-size: 15px; line-height: 1.4; max-width: 46ch; }

/* ---- glass: the hero, the groups, the sheet ---- */
.glass { position: relative; background: var(--sheen), var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift); }
/* (solid with Reduce Transparency: at the end of this file, so nothing after it puts the glass back) */

/* ---- settling in: each part of the page rising into place, one after another (in the order it's read: --i, from
   app.js), and nothing of it left on once it's there (held before it starts, not after: a rise held at its end kept the
   glass inside from seeing the sky) ---- */
.rise { animation: rise 0.8s var(--glide) backwards; animation-delay: calc(var(--i, 0) * 70ms + 40ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.985); } }

/* ---- the profile ---- */
.hero { border-radius: var(--r-hero); padding: 26px 22px 22px; display: grid; justify-items: center; text-align: center; gap: 4px; margin-bottom: 26px; overflow: hidden; }
.hero::after { content: ""; position: absolute; left: -15%; right: -15%; bottom: -55%; height: 95%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 20%, transparent), transparent); }
.avatar { position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; flex: none;
  font: 600 42px/1 var(--font-d); color: #fff; background: linear-gradient(160deg, #78b6ff, #3157d8 70%, #6a3fd8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 30%, transparent), 0 16px 40px -12px color-mix(in srgb, var(--tint) 75%, transparent); }
/* (a photo fades in once, the first time it's shown, when it's ready: app.js photo(); not again each time the page is
   drawn) */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--tint) 45%, transparent); opacity: 0.6;
  animation: halo 4.5s ease-in-out infinite; }
@keyframes halo { 50% { transform: scale(1.05); opacity: 0.15; } }
.avatar.small { width: 64px; height: 64px; font-size: 26px; margin: 0; }
.avatar.small::before { display: none; }
.hero h2 { margin: 0; font: 700 26px/1.15 var(--font-d); letter-spacing: 0.2px; overflow-wrap: anywhere; }
.hero .who { color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
.hero .mail { display: inline-flex; gap: 6px; align-items: center; color: var(--text-3); font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.hero .mail svg { flex: none; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 18px; margin-top: 14px; border: 0; border-radius: 999px;
  background: var(--glass-ctl); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.25), 0 0 0 0.5px var(--line); font-size: 15px; font-weight: 600; color: var(--text);
  transition: transform var(--dur-release) var(--spring), background-color var(--dur-fast), filter var(--dur-fast); }
/* (pressed in at once, let go on the spring) */
.pill:active { transform: scale(0.95); transition-duration: var(--dur-press); }

/* ---- a section: its heading, then a group of rows ---- */
.section { margin: 0 0 26px; }
.section > h3 { margin: 0 18px 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }   /* (over its group, from where its rows start) */
.section > .foot { margin: 8px 20px 0; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.group { border-radius: var(--r-group); overflow: hidden; }
.row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 18px; border: 0; background: none; text-align: left;
  text-decoration: none; color: var(--text); transition: background-color 0.18s; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 0.5px; background: var(--line); }
.row.plain + .row::before, .row.plain::before { left: 18px; }
button.row:active, a.row:active { background-color: var(--press); }
@media (hover: hover) { button.row:hover, a.row:hover { background-color: var(--press); } }
.row .ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35); }
.ic.blue { background: linear-gradient(160deg, #5aa9ff, #2a6ae6); }
.ic.indigo { background: linear-gradient(160deg, #8a86ff, #5a4fe0); }
.ic.green { background: linear-gradient(160deg, #4fdc8e, #1fa75a); }
.ic.grey { background: linear-gradient(160deg, #9aa3b8, #6b7389); }
.ic.app-ic { background: none; overflow: hidden; }
.ic.app-ic img { display: block; width: 100%; height: 100%; }
.ic.red { background: linear-gradient(160deg, #ff7b70, #e5372c); }
.ic.teal { background: linear-gradient(160deg, #5ad8d0, #1b9e9a); }
.row .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row .tx b { font-weight: 500; font-size: 17px; overflow-wrap: anywhere; }
.row .tx small { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.row .val { flex: none; color: var(--text-2); font-size: 16px; font-variant-numeric: tabular-nums; }
.row .chev { flex: none; display: grid; color: var(--text-3); transition: transform 0.25s var(--ease); }   /* (a grid: as a line of text it sat 3.5 px high) */
.row .get { flex: none; display: grid; color: var(--tint-text); }
.sheet-body .group.apart { margin-top: 22px; }
button.row:active .chev, a.row:active .chev { transform: translateX(2px); }
.row.action { justify-content: center; min-height: 54px; color: var(--tint-text); font-weight: 500; }
.row.danger { color: var(--danger); }
.row .badge { flex: none; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; color: var(--good-text); background: color-mix(in srgb, var(--good) 16%, transparent); }

/* ---- your apps: a tile each ---- */
/* (on one line, swiped across: each a little narrower than half the width, so the next one peeks in from the edge, and
   it's seen there's more; each comes to rest at the edge it started from. The line runs out to the screen's edges, past
   the page's margins, and starts and ends in line with them) */
.apps { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2.15); gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) -14px calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 4px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
/* (on a wide screen, where the line ends short of the screen's edge, it fades out there rather than being cut) */
@media (min-width: 760px) { .apps { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }
.apps::-webkit-scrollbar { display: none; }
.apps > .app { scroll-snap-align: start; }
@media (max-width: 360px) { .apps { grid-auto-columns: 78%; } }
/* each app: its icon (and ⓘ, for what it keeps of yours), what you have there, and Open */
.app { display: flex; flex-direction: column; padding: 16px 16px 14px; border-radius: var(--r-group); color: var(--text); min-width: 0; }
.app-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.app img { width: 54px; height: 54px; border-radius: 13px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.15); }
.app .about { position: relative; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: var(--glass-ctl);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.18); cursor: pointer; transition: transform var(--dur-release) var(--spring), background-color var(--dur-fast); }
.app .about::after { content: ""; position: absolute; inset: -6px; }
.app .about:active { transform: scale(0.9); transition-duration: var(--dur-press); }
.app .about:focus-visible, .app .open-app:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.app b { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.app .use { font-size: 14.5px; line-height: 1.35; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.app .sub { font-size: 13px; line-height: 1.35; color: var(--text-3); margin-top: 2px; overflow-wrap: anywhere; }
/* (Open at the foot of each card, so two side by side line up however long what's above it) */
.app > :not(.open-app):nth-last-child(2) { margin-bottom: 14px; }
.app .open-app { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 999px; font-size: 15px; font-weight: 600;
  color: var(--tint-text); background: color-mix(in srgb, var(--tint) 16%, transparent); text-decoration: none; transition: transform var(--dur-release) var(--spring), background-color var(--dur-fast); }
.app .open-app:active { transform: scale(0.96); background: color-mix(in srgb, var(--tint) 24%, transparent); transition-duration: var(--dur-press); }
@media (hover: hover) { .app .open-app:hover { background: color-mix(in srgb, var(--tint) 22%, transparent); } }
/* (InFlight's: its settings, a round button beside Open) */
.app .app-acts { margin-top: auto; display: flex; gap: 8px; }
.app .app-acts .open-app { flex: 1; margin-top: 0; }
.app .app-set { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--tint-text); cursor: pointer;
  background: color-mix(in srgb, var(--tint) 16%, transparent); transition: transform var(--dur-release) var(--spring), background-color var(--dur-fast); }
.app .app-set:active { transform: scale(0.92); transition-duration: var(--dur-press); }
.app .app-set:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
/* InFlight's settings (app.js inflightView): an hour picked over its row; someone blocked, by their initial; the way back to the app */
.row.pick { position: relative; }
.row.pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.row.pick .val { margin-left: auto; }
.ic.initial { font-size: 15px; font-weight: 600; color: #fff; }
.sheet-head .link.back.toapp { display: inline-flex; align-items: center; gap: 0; width: auto; padding: 0 8px 0 0; font-size: 17px; white-space: nowrap; }

/* ---- buttons ---- */
.btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 17px; font-weight: 600;
  color: #fff; background: linear-gradient(180deg, #5aa2ff, var(--tint-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 26px -12px var(--tint-deep);
  transition: transform var(--dur-release) var(--spring), opacity var(--dur-fast), filter var(--dur-fast), width var(--dur-base) var(--glide); }
.btn:active { transform: scale(0.97); transition-duration: var(--dur-press); }
.btn.quiet { color: var(--text); background: var(--glass-ctl); box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.22), 0 0 0 0.5px var(--line); }
.btn.danger { background: linear-gradient(180deg, #ff7b70, var(--danger)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 26px -12px var(--danger); }
.btn:disabled { opacity: 0.5; cursor: default; }
/* (a sign-in's button at work: a circle, turning; then a tick drawn in it, in green: app.js working) */
.btn.working { width: 52px !important; padding: 0; justify-self: center; }
.btn.working:disabled { opacity: 1; }
.btn.working .spin { width: 22px; height: 22px; border-width: 2.5px; }
.btn.done { color: #fff; background: linear-gradient(180deg, #5fe39a, #1fa75a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 28px -12px #1fa75a; }
.btn.done .tick path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 0.42s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .btn { transition-property: transform, opacity, filter; } .btn.done .tick path { animation: none; stroke-dashoffset: 0; } }
.btn .spin, .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { border: 0; background: none; padding: 8px; border-radius: 12px; color: var(--tint-text); font-weight: 500; font-size: 16px; transition: opacity var(--dur-fast); }
/* (a word to tap dims as it's pressed, as iOS's do) */
.link:active { opacity: 0.45; transition-duration: var(--dur-press); }

/* ---- signed out ---- */
.welcome { display: grid; justify-items: center; text-align: center; gap: 10px; padding-top: 4vh; }
.mark { width: 92px; height: 92px; border-radius: 26px; display: grid; place-items: center; color: #fff; margin-bottom: 8px;
  background: linear-gradient(180deg, #7186ff, #4a45dc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 22px 50px -16px rgba(74, 69, 220, 0.85);
  animation: float 7s ease-in-out infinite; }
/* the account's own icon (icon.svg), as the mark where you sign in, join, or carry on from an app */
.mark.logo { overflow: hidden; background: none; box-shadow: 0 22px 50px -16px rgba(74, 69, 220, 0.85); }
.mark.logo img { display: block; width: 100%; height: 100%; }
@keyframes float { 50% { transform: translateY(-5px); } }
.welcome h1 { margin: 0; font: 700 32px/1.1 var(--font-d); letter-spacing: 0.3px; }
.welcome p { margin: 0 0 8px; color: var(--text-2); font-size: 16px; line-height: 1.45; max-width: 34ch; }
.signin { width: 100%; max-width: 420px; display: grid; gap: 12px; margin-top: 14px; padding: 18px; border-radius: var(--r-hero); }
.form { display: grid; gap: 10px; }
.form[hidden] { display: none; }
.field { display: grid; gap: 6px; text-align: left; }
.field > span { font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 4px; }
.field input { width: 100%; min-height: 50px; padding: 0 16px; border: 0; border-radius: 16px; background: var(--field); box-shadow: inset 0 0 0 0.5px var(--line); font-size: 17px;
  transition: box-shadow 0.2s; }
.field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tint); }
.field input[readonly] { color: var(--text-2); }
/* no account without an invite (app.js inviteCard): what it takes, three steps along a faint line, then the link */
.invite-steps { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.invite-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 9px; font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--text-2);
  animation: rise 0.8s var(--glide) backwards; }
.invite-steps li:nth-child(1) { animation-delay: 0.22s; } .invite-steps li:nth-child(2) { animation-delay: 0.32s; } .invite-steps li:nth-child(3) { animation-delay: 0.42s; }
.invite-steps li + li::before { content: ""; position: absolute; top: 23px; left: calc(16px - 50%); width: calc(100% - 38px); height: 1.5px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 25%, var(--line) 75%, transparent); }
.step-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; color: var(--tint-text); background: var(--glass-ctl); box-shadow: var(--edge); }
.step-ic img { display: block; width: 100%; height: 100%; }
.signin.invite .form { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .invite-steps li { animation: fade-in var(--dur-fast) linear backwards; animation-delay: 0s !important; } }
/* joining, a step at a time (app.js joinCard): Back, where you are, how many */
.jhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 28px; margin: -4px -2px 0; }
.jhead .back { justify-self: start; display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; font-size: 15px; transition: opacity var(--dur-fast) var(--ease-out); }
.jhead .back[disabled] { opacity: 0; pointer-events: none; }
.jhead .d { display: flex; gap: 6px; align-items: center; }
.jhead .d i { width: 6px; height: 6px; border-radius: 3px; background: var(--text-3); opacity: 0.45;
  transition: width var(--dur-base) var(--ease-spring), opacity var(--dur-fast), background-color var(--dur-fast); }
.jhead .d i.on { width: 20px; background: var(--tint); opacity: 1; }
.jhead .d i.done { background: var(--good); opacity: 0.9; }
.jhead .of { justify-self: end; padding-right: 4px; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.jstep { display: grid; gap: 10px; }
.jstep[hidden] { display: none; }
.jstep > .hint:not(.handle) { margin-top: -2px; }
@media (prefers-reduced-motion: reduce) { .jhead .d i { transition: none; } }
/* you, remembered here: how you signed in last time; and, after a password, a passkey offered (app.js) */
.last { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--tint-text);
  background: color-mix(in srgb, var(--tint) 15%, transparent); }
.pwbox[hidden] { display: none; }
.signin .link.usepw { justify-self: center; }
.offer { justify-items: center; text-align: center; }
.offer-art { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #fff; margin: 4px 0 2px;
  background: linear-gradient(160deg, #5aa2ff, var(--tint-deep)); box-shadow: 0 16px 34px -14px var(--tint-deep); animation: offerIn 0.7s var(--ease-spring) backwards; }
@keyframes offerIn { from { transform: scale(0.6) rotate(-12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .offer-art { animation: none; } }
.offer h2 { margin: 0; font: 700 21px/1.2 var(--font-d); }
.offer p { margin: 0 0 4px; color: var(--text-2); font-size: 15px; line-height: 1.45; max-width: 34ch; }
/* a password field: its eye (struck through while what's typed shows), and Caps Lock said under it */
.pwf { display: grid; gap: 6px; }
.pw { position: relative; }
.pw input { padding-right: 52px; }
.eye { position: absolute; right: 5px; top: 50%; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 12px; background: none; color: var(--text-2);
  display: grid; place-items: center; transition: transform var(--dur-release) var(--spring); }
.eye:active { transform: scale(0.88); transition-duration: var(--dur-press); }
.eye .slash { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset var(--dur-base) var(--ease-out); }
.eye.on .slash { stroke-dashoffset: 0; }
.caps[hidden] { display: none; }
.caps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .eye .slash { transition: none; } }
.field input:-webkit-autofill { box-shadow: inset 0 0 0 0.5px var(--line), inset 0 0 0 100px var(--field); }
.field input:-webkit-autofill:focus { box-shadow: inset 0 0 0 1.5px var(--tint), inset 0 0 0 100px var(--field); }
.at { display: flex; align-items: center; border-radius: 16px; background: var(--field); box-shadow: inset 0 0 0 0.5px var(--line); padding-left: 16px; color: var(--text-2); }
.at:focus-within { box-shadow: inset 0 0 0 1.5px var(--tint); }
.at input { background: none; box-shadow: none !important; padding-left: 2px; color: var(--text); }
.said { min-height: 1.2em; margin: 2px 4px 0; font-size: 14px; line-height: 1.4; color: var(--text-2); text-align: center; }
.said:empty { display: none; }
.said.bad { color: var(--danger); }
.or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 0.5px; background: var(--line); }
/* signed out: what the account's for (under the title), and how a new one's made (by invitation) */
.welcome p.lead { margin: -2px 0 14px; max-width: none; }
.lead img { width: 20px; height: 20px; border-radius: 6px; vertical-align: -4px; margin: 0 4px 0 2px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.15); }
.lead b { color: var(--text); font-weight: 600; }
.welcome .new.invite { max-width: 32ch; line-height: 1.5; margin-top: 14px; }
.welcome .new.invite b { color: var(--text-2); font-weight: 600; }

/* ---- the sheet ---- */
dialog.sheet { position: fixed; padding: 0; border: 0; color: var(--text); width: calc(100% - 16px); max-width: 560px; max-height: calc(100vh - var(--top) - 24px); max-height: calc(100svh - var(--top) - 24px);
  margin: auto 8px 8px; margin-inline: auto; border-radius: var(--r-sheet); overflow: hidden; background: var(--sheen), var(--glass-strong);
  -webkit-backdrop-filter: blur(36px) saturate(190%); backdrop-filter: blur(36px) saturate(190%); box-shadow: var(--edge), 0 30px 80px -10px rgba(0, 0, 0, 0.5); }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--dur-sheet-in) var(--glide); }
dialog.sheet::backdrop { background: var(--dim); }
dialog.sheet[open]::backdrop { animation: dim-in var(--dur-sheet-in) var(--glide); }
@keyframes sheet-in { from { transform: translateY(calc(100% + 16px)); } }
@keyframes dim-in { from { opacity: 0; } }
/* (going from wherever it is: still on its way up, or where a finger let it go; --from-tf and --from-o, as it was,
   and the dim from as dark as it had got, --dim-o, set by app.js as it closes) */
dialog.sheet.closing { animation: sheet-out var(--dur-sheet-out) var(--glide) forwards; pointer-events: none; }
dialog.sheet.closing::backdrop { animation: dim-out var(--dur-sheet-out) var(--glide) forwards; }
dialog.sheet.dragging { transition: none; }
@keyframes sheet-out { from { transform: var(--from-tf, none); opacity: var(--from-o, 1); } to { transform: translateY(calc(100% + 16px)); } }
@keyframes dim-out { from { opacity: var(--dim-o, 1); } to { opacity: 0; } }
@media (min-width: 700px) {
  dialog.sheet { margin: auto; }
  @keyframes sheet-in { from { transform: translateY(26px) scale(0.97); opacity: 0; } }
  @keyframes sheet-out { from { transform: var(--from-tf, none); opacity: var(--from-o, 1); } to { transform: translateY(26px) scale(0.97); opacity: 0; } }
  body.sheet-up .page { transform: scale(0.97); }
}
.grab { flex: none; width: 40px; height: 5px; border-radius: 3px; background: var(--text-3); opacity: 0.6; margin: 8px auto 0; }
.sheet-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px 14px 6px; }
.sheet-head h2 { margin: 0; font: 600 17px/1.2 var(--font); text-align: center; grid-column: 2; }
.sheet-head .l { justify-self: start; }
.sheet-head .r { justify-self: end; grid-column: 3; }
.sheet-head .link { font-size: 17px; }
.sheet-head .link.done { font-weight: 600; }
.x { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; color: var(--text-2); background: var(--glass-ctl);
  transition: transform var(--dur-release) var(--spring), background-color var(--dur-fast); }
.x:active { transform: scale(0.92); transition-duration: var(--dur-press); }
.sheet-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 16px calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; align-content: start;
  grid-auto-rows: max-content; }   /* (a group as tall as its rows, however long the sheet: not squashed to fit) */
.sheet-body > p { margin: 0 6px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.sheet-body .group { background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
/* On to another sheet, and back: the new one slides in from the side it's coming from as the one before slides away
   the other way (.going: kept a moment over it, where it was, by app.js draw); the title and buttons at the top
   cross-fade. The one before fades out first, quickly, and the new one fades in just after, so the two aren't both
   half there at once. (The sheet fits its new height meanwhile: app.js) */
.sheet-body.swap { animation: swap var(--dur-base) var(--ease) backwards; }
.sheet-body.swap.back { animation-name: swap-back; }
@keyframes swap { from { opacity: 0; transform: translateX(24px); } 12% { opacity: 0; } }
@keyframes swap-back { from { opacity: 0; transform: translateX(-24px); } 12% { opacity: 0; } }
.sheet-head.swap > * { animation: head-in var(--dur-base) var(--ease) backwards; }
@keyframes head-in { from, 12% { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
.going { position: absolute; left: 0; right: 0; top: var(--y); height: var(--h); margin: 0; pointer-events: none; }
.sheet-body.going { animation: swap-out var(--dur-fast) var(--ease) forwards; }
.sheet-body.going.back { animation-name: swap-out-back; }
.sheet-head.going { animation: fade-out var(--dur-fast) var(--ease) forwards; }
/* (each from as it was: --o, --tf, should it go before it had finished coming) */
@keyframes swap-out { from { opacity: var(--o, 1); transform: var(--tf, none); } 40% { opacity: 0; } to { opacity: 0; transform: translateX(-24px); } }
@keyframes swap-out-back { from { opacity: var(--o, 1); transform: var(--tf, none); } 40% { opacity: 0; } to { opacity: 0; transform: translateX(24px); } }
@keyframes fade-out { from { opacity: var(--o, 1); } 40%, to { opacity: 0; } }
/* (a moment before what's just come can be tapped: the second tap of a double tap isn't taken by it) */
.sheet-body.arriving { pointer-events: none; }
.meter { height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; margin: 0 4px; }
.meter i { display: block; height: 100%; width: calc(var(--m, 0) * 100%); border-radius: inherit; background: var(--mc, var(--danger)); transition: width 0.45s var(--ease), background-color 0.3s; }
.hint { margin: -4px 6px 0; font-size: 13px; color: var(--text-3); }
.hint.bad { color: var(--danger); }
.hint.ok { color: var(--good-text); }
.empty { padding: 26px 18px; text-align: center; color: var(--text-2); font-size: 15px; }
.tag { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; color: var(--tint-text); background: color-mix(in srgb, var(--tint) 16%, transparent); margin-left: 6px; vertical-align: 1px; }
/* (one asking once more, "Sign out?", turns red as it asks, not in a frame; app.js eases its width) */
.mini { flex: none; border: 0; border-radius: 999px; min-height: 32px; padding: 0 13px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, transparent);
  transition: transform var(--dur-release) var(--spring), background-color var(--dur-fast), color var(--dur-fast); }
.mini:active { transform: scale(0.94); transition-duration: var(--dur-press); }
.list-note { margin: 0 6px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.gone li { margin: 6px 0; }
.gone { margin: 0 6px; padding-left: 20px; color: var(--text-2); font-size: 15px; line-height: 1.4; }

/* ---- a word at the top, then gone ---- */
/* (as wide as its words, up to the screen less a margin, not half of it; below the way back to an app, where there's one:
   --below, from app.js; dropping in on the spring, and going quicker, eased away) */
.toast { position: fixed; z-index: 60; top: var(--below, calc(var(--top) + 10px)); left: 50%; width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 22px;
  background: var(--sheen), var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--edge), var(--lift); font-size: 15px; font-weight: 500;
  transform: translate(-50%, -140%); opacity: 0; transition: transform var(--dur-fast) var(--ease-in), opacity var(--dur-fast) var(--ease-in); pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; transition: transform 0.55s var(--spring), opacity 0.3s var(--ease); }
.toast svg { flex: none; color: var(--good); }

/* ---- waiting for the account ---- */
/* (the shimmer a band of light moved across each, by its transform, rather than its background repainted every frame) */
/* (only once it's taking a while: a quick start goes straight to the page, without this in between) */
.skeleton { display: grid; gap: 18px; animation: sk-late 0.3s var(--ease-out) 0.5s backwards; }
@keyframes sk-late { from { opacity: 0; } }
.sk { position: relative; overflow: hidden; border-radius: var(--r-group); background: var(--glass); }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, white 8%, transparent) 50%, transparent 70%);
  transform: translateX(-100%); animation: shimmer 1.6s linear infinite; }
.sk-title { height: 40px; width: 46%; border-radius: 12px; }
.sk-hero { height: 250px; border-radius: var(--r-hero); }
.sk-row { height: 120px; }
.sk-group { height: 180px; }
@keyframes shimmer { to { transform: translateX(100%); } }



/* ---- round two: the check-up, a banner, email, activity, passkey details, preferences ---- */
.ic.amber { background: linear-gradient(160deg, #ffc35a, #f08a1c); }
.mark.red { background: linear-gradient(160deg, #ff8a7a, #e5372c 70%, #b5265d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 22px 50px -16px rgba(229, 55, 44, 0.75); }
.mini.go { color: var(--tint-text); background: color-mix(in srgb, var(--tint) 14%, transparent); }
.row small.warn { color: var(--warn); }
.row.action.sure { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.row.info { min-height: 50px; }
.row.info .tx b { font-size: 16px; }
.banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: -12px 0 26px; border-radius: var(--r-group); }
.banner.warn { box-shadow: var(--edge), var(--lift), inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent); }
.banner .ic, .pending .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.banner .tx, .pending .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.banner .tx b, .pending .tx b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.banner .tx small, .pending .tx small { font-size: 13.5px; line-height: 1.35; color: var(--text-2); }
.pending { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; }

/* (in its sheet, opened from Sign-in and security: the ring and how it stands, then each check as a list) */
.ck-top { display: flex; align-items: center; gap: 14px; padding: 2px 4px 16px; }
.ck-top .tx { display: grid; gap: 2px; }
.ck-top .tx b { font: 600 18px/1.2 var(--font-d); }
.ck-top .tx small { font-size: 13.5px; color: var(--text-2); }
.ck-ring { position: relative; flex: none; width: 54px; height: 54px; display: grid; place-items: center; color: var(--good); }
.checkup.todo .ck-ring { color: var(--warn); }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .trk { stroke: var(--line); }
/* (filling only when how it stands has changed, from where it stood: .grow and --from, from app.js; not again each time
   it's drawn) */
.ring .arc { stroke: currentColor; stroke-linecap: round; }
.ring.grow .arc { animation: arc 1.1s var(--glide) 0.3s backwards; }
@keyframes arc { from { stroke-dasharray: var(--from, 0) 100; } }
.ck-list { padding: 0 14px; }
.ck-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; }
.ck-row + .ck-row { border-top: 0.5px solid var(--line); }
.ck-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.ck-row.ok .ck-dot { background: var(--good); box-shadow: none; }
.ck-row.ok.pop .ck-dot { animation: pop 0.5s var(--spring) backwards; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
.ck-t { flex: 1; min-width: 0; font-size: 15.5px; }
.ck-row.ok .ck-t { color: var(--text-2); }

.activity { display: grid; gap: 14px; }
.activity .empty { display: grid; place-items: center; }
.day h4 { margin: 0 6px 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.activity .row { min-height: 54px; }
.activity .row .ic { width: 30px; height: 30px; border-radius: 9px; }

.appears { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.appear { display: grid; justify-items: center; gap: 8px; padding: 12px 6px 10px; border: 0; border-radius: 20px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line);
  font-size: 14.5px; font-weight: 500; transition: transform var(--dur-release) var(--spring), box-shadow 0.25s, background-color var(--dur-fast); }
.appear:active { transform: scale(0.96); transition-duration: var(--dur-press); }
.appear.on { box-shadow: inset 0 0 0 2px var(--tint); }
.appear .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: inset 0 0 0 1.5px var(--text-3); transition: background-color 0.2s; }
.appear.on .tick { background: var(--tint); box-shadow: none; }
.appear .tick svg { opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.35s var(--spring); }
.appear.on .tick svg { opacity: 1; transform: none; }
.shot { position: relative; width: 62px; height: 104px; border-radius: 13px; overflow: hidden; display: grid; align-content: start; gap: 5px; padding: 18px 7px 0;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 8px 18px -10px rgba(0, 0, 0, 0.5); }
.shot i { display: block; height: 14px; border-radius: 5px; }
.shot i:first-child { height: 26px; }
.shot.light { background: linear-gradient(180deg, #e9eefc, #f7f8fc); }
.shot.light i { background: #fff; }
.shot.dark { background: linear-gradient(180deg, #141a3a, #06070f); }
.shot.dark i { background: rgba(255, 255, 255, 0.14); }
.shot.auto { background: linear-gradient(90deg, #e9eefc 50%, #0f142e 50%); }
.shot.auto i { background: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0.14) 50%); }

.units { display: grid; gap: 14px; }
.unit { display: grid; gap: 8px; }
.unit > span { font-size: 13px; font-weight: 500; color: var(--text-2); margin-left: 4px; }
.seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 0.5px var(--line); }
.seg .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 2)); border-radius: 11px; background: var(--glass-ctl);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.3), 0 3px 10px -3px rgba(0, 0, 0, 0.35), 0 0 0 0.5px var(--line); transform: translateX(calc(var(--k, 0) * 100%));
  transition: transform var(--dur-base) var(--glide); }   /* (put in place, not sprung past it) */
:root[data-theme="light"] .seg .thumb { background: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .seg .thumb { background: #fff; } }
/* (what's chosen said by its colour, the thumb under it: the same weight either way, so its word doesn't shift) */
.seg button { position: relative; z-index: 1; min-height: 40px; border: 0; background: none; font-size: 14.5px; font-weight: 600; color: var(--text-2); border-radius: 11px;
  transition: color var(--dur-fast), opacity var(--dur-fast); }
.seg button[aria-checked="true"] { color: var(--text); }
.seg button:active { opacity: 0.6; transition-duration: var(--dur-press); }
@media (prefers-reduced-motion: reduce) { .seg .thumb, .ring.grow .arc, .ck-row.ok.pop .ck-dot { transition: none; animation: none; } }

/* ---- a few more ---- */
.toast { right: auto; bottom: auto; margin: 0; border: 0; color: var(--text); overflow: visible; }
.toast.bad svg { color: var(--danger); }
.welcome .new { margin: 6px 0 0; font-size: 14px; color: var(--text-3); }
.welcome .new a { color: var(--tint-text); text-decoration: none; font-weight: 500; }
.grab, .sheet-head { touch-action: none; }
.sheet-head .link.back { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin-left: -6px; }
.mini.sure { color: #fff; background: var(--danger); }
.row .mini .spin { width: 14px; height: 14px; }
.mini:has(.spin) { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; }
.row.current { background: color-mix(in srgb, var(--tint) 7%, transparent); }

/* Reduce Motion: nothing slides, rises or grows; what comes and goes dissolves instead, quickly (and the sheet that
   swaps in, the page drawn anew, the word at the top) */
@media (prefers-reduced-motion: reduce) {
  .aura, .mark, .avatar::before, .sk::after { animation: none !important; }
  .rise { animation: fade-in var(--dur-fast) linear backwards; animation-delay: 0s; }
  dialog.sheet[open], dialog.sheet[open]::backdrop { animation: fade-in var(--dur-fast) linear; }
  dialog.sheet.closing { animation: sheet-fade var(--dur-fast) linear forwards; }
  dialog.sheet.closing::backdrop { animation: dim-out var(--dur-fast) linear forwards; }
  @keyframes sheet-fade { from { opacity: var(--from-o, 1); } to { opacity: 0; } }
  .sheet-body.swap, .sheet-head.swap > * { animation: fade-in 0.15s linear backwards; }
  .page, .meter i { transition: none; }
  body.sheet-up .page { transform: none; }
  .toast, .toast.on { transform: translate(-50%, 0); transition: opacity var(--dur-fast) linear; }
}

/* back to InFlight, when it sent you here to edit your profile */
.backapp { margin: 0 0 6px; min-height: 36px; padding: 0 14px 0 10px; gap: 4px; justify-self: start; align-self: flex-start; width: max-content; }
/* (the title in the middle of a bar; opened from an app, the way back on the same line) */
.titlebar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 16px; }
.titlebar .backapp { margin: 0; align-self: center; }
.titlebar h1 { margin: 0; font: 600 17px/1.2 var(--font); letter-spacing: 0; }

/* ---- your photo, tapped to change it (the camera badge says so) ---- */
.avatar-btn { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; color: inherit; cursor: pointer; margin-bottom: 12px; transition: transform var(--dur-release) var(--spring); }
.avatar-btn:active { transform: scale(0.95); transition-duration: var(--dur-press); }
.avatar-btn .avatar { margin: 0; }
.avatar-btn .cam { position: absolute; right: -2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--tint), var(--tint-deep)); box-shadow: 0 0 0 3px var(--glass-strong), 0 6px 14px -6px rgba(0, 0, 0, 0.6); }
.hero-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.hero-acts .pill { margin: 0; }

/* ---- your code ---- */
.code-who { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.code-who .avatar { width: 44px; height: 44px; font-size: 18px; box-shadow: none; }
.code-who > div { display: grid; min-width: 0; }
.code-who b { font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-who span { color: var(--text-2); font-size: 14.5px; }
/* (the card from edge to edge, as the row over it, the code itself kept smaller within it) */
.code-big { padding: 34px; border-radius: 26px; background: var(--qr-card); box-shadow: var(--qr-edge); }
.qr { width: 100%; aspect-ratio: 1; }
.qr svg { display: block; width: 100%; height: 100%; }
.qr-none { display: grid; place-items: center; height: 100%; padding: 12px; text-align: center; font-size: 14px; color: #3a405c; }
.hint.center { text-align: center; margin-top: -2px; }
.code-acts { display: grid; gap: 10px; }
.code-acts.two { grid-template-columns: 1fr 1fr; }

/* ---- an app's sheet ---- */
button.app { border: 0; font: inherit; text-align: left; cursor: pointer; }
a.btn { text-decoration: none; }
.app-head { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 4px 0 2px; }
.app-head img { width: 76px; height: 76px; border-radius: 18px; margin-bottom: 8px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.15); }
.app-head b { font: 700 24px/1.15 var(--font-d); }
.app-head span { color: var(--text-2); font-size: 15px; }
/* ---- an app's settings that are the account's (app.js setHead and the rest): its icon and name at the head, each row's
   words under it rather than said below, a choice of two in its row, and the way into the app at the foot ---- */
.app-head.set { gap: 2px; padding: 0 0 4px; }
.app-head.set img { width: 64px; height: 64px; border-radius: 15px; }
.app-head.set b { font-size: 22px; }
.app-head.set span { font-size: 14px; }
.seg.mini { flex: none; width: var(--w, 128px); padding: 2px; border-radius: 11px; }
.seg.mini .thumb { top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n, 2)); border-radius: 9px; }
.seg.mini button { min-height: 32px; font-size: 14px; border-radius: 9px; padding: 0 8px; }
.open-in { justify-self: center; margin-top: 2px; text-decoration: none; color: var(--tint-text); background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); font-weight: 600; font-size: 15px; }
.open-in + .hint { text-align: center; margin-top: -8px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-radius: 16px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.stat b { font: 700 28px/1.1 var(--font-d); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13.5px; color: var(--text-2); line-height: 1.3; }
.row.places { min-height: 0; padding-top: 0; }
.row.places::before { display: none; }

/* ---- a sign-in you don't recognise ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; }
.steps .n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--tint-text);
  background: color-mix(in srgb, var(--tint) 15%, transparent); }
.steps .tx { display: grid; gap: 2px; }
.steps .tx b { font-weight: 600; font-size: 16px; }
.steps .tx small { color: var(--text-2); font-size: 14px; }
.activity .row .mini { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }

/* ---- a passkey, after a password sign-in ---- */
.nudge { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 6px 4px 4px; }
.nudge-art { width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; color: #fff; margin-bottom: 6px;
  background: linear-gradient(160deg, #8c8cff, #5146e0 60%, #7b3fd8); box-shadow: 0 18px 40px -16px #5146e0, inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.nudge h3 { margin: 0; font: 700 24px/1.2 var(--font-d); }
.nudge p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.45; max-width: 32ch; }

/* ---- rows that slide to show what they do ---- */
.swipe { position: relative; overflow: hidden; --dx: 0px; }
.swipe + .swipe::before, .swipe + .row::before, .row + .swipe::before { content: ""; position: absolute; z-index: 2; top: 0; left: 62px; right: 0; height: 0.5px; background: var(--line); }
/* (the row slides off over nothing; what it does fills exactly the room it leaves, so the row needs no background) */
/* (let go, it settles open or shut on the glide, as a control does, not sprung past) */
.swipe > .row { touch-action: pan-y; transform: translateX(var(--dx)); transition: transform var(--dur-base) var(--glide); }
.swipe.dragging > .row { transition: none; }
.swipe.open .row .mini, .swipe.dragging .row .mini { opacity: 0; transition: opacity 0.2s; }
.swipe-act { position: absolute; inset: 0 0 0 auto; width: calc(-1 * var(--dx)); overflow: hidden; border: 0; display: grid; place-items: center; padding: 0;
  color: #fff; background: var(--danger); font: 600 15px/1 var(--font); white-space: nowrap; transition: width var(--dur-base) var(--glide), opacity var(--dur-fast); }
.swipe-act:active { opacity: 0.75; transition-duration: var(--dur-press); }
.swipe.dragging .swipe-act { transition: none; }
.swipe-act .spin { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .swipe > .row, .swipe-act { transition: none; } }

/* ---- two even columns on a wide screen: who you are, your apps and your data; and the settings (app.js signedIn) ---- */
@media (min-width: 1000px) {
  main:has(.cols) { max-width: 1060px; }
  .cols { display: grid; grid-template-columns: 380px 1fr; gap: 32px; align-items: start; }

  .col-a .large { margin-bottom: 18px; }
  .col-b > .section:first-child { margin-top: 0; }
  /* (your apps, at the top of the right-hand column: all three side by side, nothing to swipe) */
  .col-b .apps { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0;
    -webkit-mask-image: none; mask-image: none; }
}

/* (who you are, kept in view beside the rest as it's scrolled, where the window's tall enough for all of it) */
@media (min-width: 1000px) and (min-height: 760px) { .col-a { position: sticky; top: 24px; } }

/* ---- rows that say how things are: amber where it needs you; a button's look where there's one thing to do ---- */
.row .val.warn { color: var(--warn); }
.row .val .mini { display: inline-flex; align-items: center; min-height: 30px; margin: 0; }

/* ---- whose account, kept in sight at the top once the profile's scrolled away (app.js whoBar) ---- */
.whobar { position: fixed; z-index: 21; top: 0; left: 0; right: 0; height: calc(var(--top) + 52px); padding-top: var(--top); display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 0.5px 0 var(--line);
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.25s var(--ease), transform var(--dur-base) var(--ease); cursor: pointer; }
.whobar.on { opacity: 1; transform: none; pointer-events: auto; }
.whobar.on:active { opacity: 0.7; transition-duration: var(--dur-press); }
.whobar .avatar.small { width: 28px; height: 28px; font-size: 13px; margin: 0; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 18%, transparent); }
.whobar b { font: 600 16px/1 var(--font-d); letter-spacing: 0.1px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sheet-up .whobar { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .whobar { transition: opacity var(--dur-fast) linear; transform: none; } }

/* ---- emails: each app's, headed by its icon; a switch where there's a choice ---- */
.app-k { display: flex; align-items: center; gap: 8px; margin: 18px 6px 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.app-k img { width: 18px; height: 18px; border-radius: 5px; }
.app-k.apart { margin-top: 40px; }
.switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 999px; cursor: pointer;
  background: rgba(120, 120, 128, 0.36); box-shadow: inset 0 0 0 0.5px var(--line); transition: background-color 0.3s, opacity var(--dur-fast); }
.switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28), 0 1px 1px rgba(0, 0, 0, 0.12); transition: transform var(--dur-release) var(--spring); }
.switch:checked { background: var(--good); }
.switch:checked::before { transform: translateX(20px); }
/* (held while it's saved: dimmed only if that takes a moment, so a quick save doesn't flash; back at once) */
.switch:disabled { opacity: 0.45; cursor: default; transition: background-color 0.3s, opacity var(--dur-fast) 0.25s; }
.switch:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
label.row { cursor: pointer; }
label.row:active { background-color: var(--press); }
@media (prefers-reduced-motion: reduce) { .switch::before { transition: none; } }

/* ---- recent activity: a filter; each row its time on the right, and the app it happened in on its icon ---- */
.sheet-body .seg + .activity { margin-top: 14px; }
.day h4 small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.activity .row .ic { position: relative; }
.app-mark { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border-radius: 5px; box-shadow: 0 0 0 2px var(--glass-strong); }
.activity .row .end { flex: none; display: grid; justify-items: end; gap: 6px; }
.activity .row .t { font-size: 14px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* ---- signed out: the way between signing in, making an account and a forgotten password ---- */
.welcome .new .link { padding: 4px 2px; font-size: 14px; }
.signin .link.forgot { justify-self: center; font-size: 15px; padding: 6px 10px; }
.signin .invited { margin: 0; justify-self: center; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--tint-text); background: color-mix(in srgb, var(--tint) 14%, transparent); }
.signin .hint.center { margin: 0 4px; }
.signin .sent { display: grid; justify-items: center; gap: 10px; padding: 10px 6px; text-align: center; color: var(--good); }
.signin .sent p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.45; }
.signin .hint .link { padding: 0 2px; font-size: inherit; }
.signin .empty { display: grid; place-items: center; }

/* ---- the site's admin (only on the linked account's page) ---- */
.adm-av { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 14px; font-weight: 600; color: #fff; }
.adm-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adm-av.h1 { background: linear-gradient(160deg, #5aa9ff, #2a6ae6); }
.adm-av.h2 { background: linear-gradient(160deg, #4fdc8e, #1fa75a); }
.adm-av.h3 { background: linear-gradient(160deg, #ffc35a, #f08a1c); }
.adm-av.h4 { background: linear-gradient(160deg, #8a86ff, #5a4fe0); }
.adm-av.h5 { background: linear-gradient(160deg, #ff8fb1, #e5487a); }
.adm-av.xl { width: 76px; height: 76px; font-size: 28px; margin-bottom: 6px; }
/* Admin's Messages: each its own group, the message in full, Reply and Delete under it */
.sheet-body .group.adm-msg + .group.adm-msg { margin-top: 14px; }
.adm-body { padding: 0 18px 4px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.45; }
.adm-acts { display: flex; gap: 8px; padding: 0 12px 14px; }
.adm-acts .pill { margin-top: 10px; }
.adm-acts .pill.quiet { background: none; box-shadow: none; color: var(--danger); }
.adm-head { display: grid; justify-items: center; gap: 2px; text-align: center; }
.adm-head b { font-size: 22px; font-weight: 700; }
.adm-head small { color: var(--text-2); font-size: 15px; }
.adm-on { color: #34c759; }
.adm-search { position: relative; }
.adm-search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--text-3); pointer-events: none; }
.adm-search input { padding-left: 42px; }
.adm-code { display: block; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; -webkit-user-select: all; user-select: all; }
.adm-chart { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.adm-chead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.adm-chead b { font-size: 15px; font-weight: 600; }
.adm-chead span { font-size: 13px; color: var(--text-2); }
.adm-bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; }
.adm-bars i { flex: 1; min-height: 2px; border-radius: 2px; background: linear-gradient(180deg, #7ab8ff, #2a6ae6); }
/* (the first time its figures come: each column grows up from the foot, one after another; each bar below, from its
   left; not again when they're counted again: .grow, from app.js) */
.adm-chart.grow .adm-bars i { transform-origin: 50% 100%; animation: bar-in var(--dur-sheet-in) var(--glide) backwards; animation-delay: calc(var(--j, 0) * 12ms); }
@keyframes bar-in { from { transform: scaleY(0); } }
.adm-meters.grow .mbar i { transform-origin: 0 50%; animation: meter-in var(--dur-sheet-in) var(--glide) backwards; animation-delay: calc(var(--j, 0) * 30ms + 100ms); }
@keyframes meter-in { from { transform: scaleX(0); } }
.adm-meter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; align-items: center; gap: 10px; min-height: 46px; padding: 6px 16px; font-size: 15px; }
.adm-meter + .adm-meter::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--line); }
.adm-meter .mbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.adm-meter .mbar i { display: block; height: 100%; border-radius: 3px; background: var(--tint); }
.adm-meter .mv { color: var(--text-2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Admin's figures: a count of what's new, as a badge; three tiles at the top of its folder; what needs you, in amber */
.count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #4b95ff, var(--tint-deep)); font-variant-numeric: tabular-nums; }
.adm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.adm-tile { display: grid; gap: 3px; align-content: start; padding: 13px 13px 12px; border-radius: 18px; background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.adm-tile b { font: 700 25px/1.05 var(--font-d); font-variant-numeric: tabular-nums; }
.adm-tile span { font-size: 12.5px; line-height: 1.25; color: var(--text-2); }
.adm-tile.new { background: color-mix(in srgb, var(--tint) 16%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--tint) 40%, transparent); }
.adm-tile.new b, .adm-tile.new span { color: var(--tint-text); }
.adm-alert { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; border-radius: 18px; text-align: left; color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--warn) 35%, transparent); }
button.adm-alert { transition: transform var(--dur-release) var(--spring), filter var(--dur-fast); }
button.adm-alert:active { transform: scale(0.98); transition-duration: var(--dur-press); }
.adm-alert .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.adm-alert b { font-size: 16px; font-weight: 600; }
.adm-alert small { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.adm-alert .mini { display: inline-flex; align-items: center; color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, transparent); }
.adm-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--good-text); }
/* (a row with a + of its own, where its chevron would be: Invites) */
.row-plus { position: relative; }
.row-plus > .row { padding-right: 62px; }
.row-plus > .row .chev { display: none; }
.group > .row-plus + .row::before, .group > .row + .row-plus > .row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 0.5px; background: var(--line); }
.row-plus .plus { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--tint-text); background: color-mix(in srgb, var(--tint) 16%, transparent);
  transition: transform var(--dur-release) var(--spring), background-color var(--dur-fast); }
.row-plus .plus:active { transform: scale(0.92); transition-duration: var(--dur-press); }
.row-plus .plus .spin { width: 16px; height: 16px; }
.row-plus .plus span:not(.spin) { display: none; }
.adm-ready { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 8px 2px; }
.adm-ready .big { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #8a86ff, #5a4fe0); margin-bottom: 6px; }
.adm-ready b { font-size: 20px; font-weight: 700; }
.adm-ready span { font-size: 15px; line-height: 1.4; color: var(--text-2); }
.adm-two { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
/* Admin's Messages: the new ones marked; the rest a line each, opened in place */
.adm-dot { flex: none; width: 9px; height: 9px; margin-right: -4px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tint) 22%, transparent); }
.adm-line .tx small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.adm-open { position: relative; }
.group > .adm-open + .row::before, .group > .row + .adm-open::before, .group > .adm-open + .adm-open::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; height: 0.5px; background: var(--line); }
/* Confirm it's you, in the sheet you're in: what you were doing held back behind it */
/* (the card lifts in once, from app.js freshly, so it isn't lifted in again each time the sheet's drawn anew under it) */
.sheet-body.asking > :not(.confirm-card) { opacity: 0.4; pointer-events: none; transition: opacity 0.25s; }
.confirm-card { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 22px 18px 14px; border-radius: var(--r-group); background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.confirm-card .face { color: var(--tint-text); margin-bottom: 8px; }
.confirm-card > b { font-size: 18px; font-weight: 700; }
.confirm-card > span { font-size: 14.5px; color: var(--text-2); margin-bottom: 12px; }
.confirm-card .btn, .confirm-card .form { width: 100%; }
.confirm-card .link { margin-top: 4px; font-size: 15px; }
.confirm-card .said:empty { display: none; }

/* ---- your card: your photo as its poster (the point of it you chose in view), carried on, blurred, behind what's under
   it; your name and handle on it. No photo: your colours and initial. (The photo drifts a little as the page scrolls,
   and stretches as it's pulled down: --drift, --pull, from app.js) ---- */
/* (its own colour under it, solid in both looks: no blur of what's behind, which would never be seen) */
.poster-card { display: block; justify-items: stretch; padding: 0; gap: 0; text-align: left; background: var(--pc-base); isolation: isolate; -webkit-backdrop-filter: none; backdrop-filter: none; }
.poster-card::after { display: none; }
.pc-blur { position: absolute; inset: -60px; z-index: -1; pointer-events: none; overflow: hidden; }
.pc-blur img { width: 100%; height: 100%; object-fit: cover; filter: var(--pc-blur); transform: scale(1.15); }
.poster-card.none .pc-blur { background: radial-gradient(circle at 40% 30%, #3157d8, #2a1f6e 70%); filter: var(--pc-blur); }
.pc-top { position: relative; height: 290px; }
.pc-photo { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 58%, transparent); mask-image: linear-gradient(#000 58%, transparent); }
/* (drifting down, it grows from its foot just enough that its top stays covered: at rest it's exactly as Your photo
   placed it) */
.pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 100%;
  transform: translateY(calc(var(--drift, 0) * 1px)) scale(calc(var(--pull, 1) + var(--drift, 0) / 280)); }
.poster-card.none .pc-photo { background: radial-gradient(120% 90% at 20% 10%, #7ab8ff 0%, #3157d8 45%, #5a3fd8 80%, #2a1f6e 100%); }
.pc-initial { position: absolute; left: 0; right: 0; top: 30px; text-align: center; font: 800 150px/1 var(--font-d); color: rgba(255, 255, 255, 0.22); }
.pc-shade { position: absolute; left: 0; right: 0; top: 40%; bottom: calc(-1 * var(--pc-shade-below)); background: var(--pc-shade); pointer-events: none; }
.pc-cam, .pc-add { position: absolute; z-index: 1; right: 14px; top: 14px; height: 40px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: #fff; background: rgba(20, 22, 40, 0.3); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.15); transition: transform var(--dur-release) var(--spring), background-color var(--dur-fast); }
.pc-cam { width: 40px; }
.pc-add { padding: 0 15px 0 12px; font-size: 15px; font-weight: 600; }
.pc-cam:active, .pc-add:active { transform: scale(0.92); transition-duration: var(--dur-press); }
.pc-id { position: absolute; left: 20px; right: 20px; bottom: 14px; }
.pc-id h2 { margin: 0; font: 800 40px/1.04 var(--font-d); letter-spacing: -0.5px; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); overflow-wrap: anywhere; }
.pc-id h2.long { font-size: 32px; }
.pc-id .who { margin-top: 4px; color: rgba(255, 255, 255, 0.86); font-size: 16px; font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); }
.pc-body { position: relative; display: grid; gap: 14px; padding: 14px 20px 20px; }
.poster-card .hero-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.poster-card .hero-acts .pill { width: 100%; margin: 0; color: var(--pc-pill-text); background: var(--pc-pill); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.32), 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
.poster-card .hero-acts .pill.primary { color: var(--pc-go-text); background: var(--pc-go); }
@media (min-width: 1000px) { .pc-top { height: 320px; } }
@media (prefers-reduced-motion: reduce) { .pc-photo img { transform: none; } }
/* Your photo: what shows of it, dragged into place; the circle every app shows, beside */
.pv-frame { position: relative; aspect-ratio: 358 / 290; border-radius: 22px; overflow: hidden; touch-action: none; cursor: grab; background: #000; box-shadow: inset 0 0 0 0.5px var(--line); }
.pv-frame.dragging { cursor: grabbing; }
.pv-frame:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; }
.pv-frame img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.pv-tip { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; padding: 6px 12px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity 0.3s; }
.pv-frame.dragging .pv-tip { opacity: 0; }
.pv-also { display: flex; align-items: center; gap: 14px; margin: 0 4px; }
.pv-circle { flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 0.5px var(--line); }
.pv-circle img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-also p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }

/* the small round and pill controls, and the links that are a word or two, keep their size, and are each a finger's
   width to tap (44 px) */
.x, .mini, .sheet-head .link, .jhead .back, .signin .link.forgot, .signin .link.usepw, .welcome .new .link { position: relative; }
.x::after, .mini::after, .sheet-head .link::after, .signin .link.forgot::after, .signin .link.usepw::after { content: ""; position: absolute; inset: -6px; }
/* (the join step's Back and the links under the card, between signing in, joining and a forgotten password, are a
   short line of text: more above and below) */
.jhead .back::after, .welcome .new .link::after { content: ""; position: absolute; inset: -9px -6px; }
.sheet-head h2:focus { outline: none; }

/* (what the handle checks says: room for two lines, so the fields under it don't move as it changes) */
.hint.handle { min-height: 2.8em; }
/* (Admin waiting on what it shows: the spinner only once it's been a moment, so a quick answer just appears) */
.adm-wait .spin { opacity: 0; animation: spin 0.8s linear infinite, wait-in var(--dur-fast) 0.25s forwards; }
@keyframes wait-in { to { opacity: 1; } }

/* ---- one look to another, where the browser can (app.js: the theme changed, signed in or out, and signing in to and
   from making an account or a forgotten password): the page cross-fades; signed out, the card goes to its new size,
   the mark, title and the line under it each cross-fade where they go (.vt-gate, only while it's happening) ---- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); animation-timing-function: var(--ease); }
.vt-gate .welcome > :first-child { view-transition-name: gate-mark; }
.vt-gate .welcome h1 { view-transition-name: gate-title; }
.vt-gate .signin { view-transition-name: gate-card; }
.vt-gate .foot.new { view-transition-name: gate-foot; }
::view-transition-group(gate-mark), ::view-transition-group(gate-title), ::view-transition-group(gate-card), ::view-transition-group(gate-foot) { animation-duration: var(--dur-base); animation-timing-function: var(--glide); }
::view-transition-old(gate-card), ::view-transition-new(gate-card) { height: 100%; object-fit: none; object-position: top; }
::view-transition-old(gate-title), ::view-transition-new(gate-title), ::view-transition-old(gate-foot), ::view-transition-new(gate-foot) { height: 100%; object-fit: none; object-position: center; }

/* ---- a row's focus ring, inside its group (whose rounded corners clip what's outside it) ---- */
.group .row:focus-visible { outline-offset: -4px; border-radius: calc(var(--r-group) - 4px); }

/* ---- under a pointer that can hover (a mouse, a trackpad): what can be tapped lifts a little ---- */
@media (hover: hover) {
  .pill:hover, .x:hover, .app .about:hover, .appear:hover { background-color: color-mix(in srgb, var(--glass-ctl), var(--text) 6%); }
  .poster-card .hero-acts .pill:not(.primary):hover { background: color-mix(in srgb, var(--pc-pill), white 12%); }
  .poster-card .hero-acts .pill.primary:hover, .btn:not(:disabled):hover, button.adm-alert:hover { filter: brightness(1.06); }
  button.mini:not(.sure):hover, .row-plus .plus:hover { background-color: color-mix(in srgb, currentColor 22%, transparent); }
  .pc-cam:hover, .pc-add:hover { background-color: rgba(20, 22, 40, 0.45); }
  .link:not(:active):hover { opacity: 0.75; }
  .seg button[aria-checked="false"]:hover { color: var(--text); }
}

/* ---- Reduce Transparency: every pane of glass solid (last in the file, so nothing after puts its blur back) ---- */
@media (prefers-reduced-transparency: reduce) {
  .glass, .status, .whobar, .toast, dialog.sheet, .pc-cam, .pc-add, .poster-card .hero-acts .pill, .pv-tip { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass, .status, .whobar, .toast, dialog.sheet { background: var(--glass-strong); }
  .poster-card .hero-acts .pill:not(.primary) { background: var(--glass-strong); color: var(--text); }
  .pc-cam, .pc-add { background: rgba(20, 22, 40, 0.78); }
  .pv-tip { background: rgba(0, 0, 0, 0.75); }
  /* (and as solid under a pointer, lifting as the others do) */
  @media (hover: hover) {
    .poster-card .hero-acts .pill:not(.primary):hover { background: color-mix(in srgb, var(--glass-strong), var(--text) 6%); }
    .pc-cam:hover, .pc-add:hover { background: rgba(20, 22, 40, 0.88); }
  }
}

/* (autofill keeps the field as designed: the browser's yellow fill is held off for good, and the words keep their colour;
   iPhones show the yellow before the transition can hold it off, as a suggestion's offered, so it's clipped to the words
   too, under their own colour, and a field with a background of its own paints it back with an inset shadow) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  transition: background-color 0s 600000s, color 0s 600000s;
  -webkit-background-clip: text; background-clip: text;
}

/* Fitness's connections, on its sheet: Garmin's, Strava's and Apple Health's own colours; a Shortcut's steps; its address */
.ic.garmin { background: linear-gradient(160deg, #2b3440, #0b0f14); } .ic.strava { background: linear-gradient(160deg, #ff7a3d, #fc5200); } .ic.health { background: linear-gradient(160deg, #ff6b8a, #e8304f); }
.btn.strava { background: #fc5200; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 26px -12px #fc5200; }
.steps-list { margin: 0; padding: 0 6px 0 26px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.fx-addr { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--field); font: 500 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.hint.powered { text-align: center; font-weight: 600; }
.row.plain.act { justify-content: center; } .row.plain.act b { font-weight: 500; color: var(--tint-text); } .row.plain.act.danger b { color: var(--danger); }

/* ---- the admin's Storage: the whole site's, by app (account/admin.js admStorageView) ---- */
.st-total { display: grid; gap: 12px; padding: 18px 18px 16px; border-radius: var(--r-group); background: var(--glass-ctl); box-shadow: inset 0 0 0 0.5px var(--line); }
.st-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.st-big b { font: 700 34px/1 var(--font-d); letter-spacing: 0.2px; }
.st-big span { color: var(--text-2); font-size: 15px; }
.st-stack { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--field); }
.st-stack i { display: block; min-width: 3px; }
.st-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 13.5px; color: var(--text-2); }
.st-legend span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.st-legend i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.st-legend em { margin-left: auto; font-style: normal; color: var(--text); font-variant-numeric: tabular-nums; }
.st-split { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 11px; border-top: 0.5px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.st-split b { color: var(--text); font-weight: 600; }
.row .st-pic { flex: none; width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
.st-app .tx { flex: 1; }
.st-app .val { min-width: 5.4em; text-align: right; }
.st-bar { display: block; height: 4px; margin-top: 7px; border-radius: 2px; overflow: hidden; background: var(--field); }
.st-bar i { display: block; height: 100%; border-radius: inherit; }
.app-head .ic.big { display: grid; place-items: center; color: #fff; width: 64px; height: 64px; border-radius: 15px; margin-bottom: 8px; }