/* InFlight: iOS 26 styling, in keeping with the account page and Weather. A sky of slow light behind every screen
   (dawn in light, night in dark: the account page's own), and Liquid Glass over it: groups, the Messages list, cards,
   friends' bubbles and sheets are panes of glass with a bright rim and a soft lift; the nav buttons, the tab bar, the
   composer and menus float over everything in a stronger glass. Light by default. */
:root{
  /* the sky (the account page's: its gradient, its three lights, and the colour under them, which the phone tints
     its status bar with), and the glass over it: a pane, a stronger one for what floats, a bright rim, a soft lift,
     a sheen in its top corner */
  --sky-a:#e9eefc; --sky-b:#f3f0fb; --sky-c:#f7f8fc; --sky-top:#dde3fb;
  --aura-1:rgba(110,150,255,.42); --aura-2:rgba(200,150,255,.36); --aura-3:rgba(90,210,240,.3);
  --pane:rgba(255,255,255,.58); --pane-strong:rgba(250,251,255,.9);
  --edge:inset 0 1px .5px rgba(255,255,255,.95),inset 0 -1px .5px rgba(255,255,255,.4),inset 0 0 22px rgba(255,255,255,.3);
  --lift:0 0 0 .5px rgba(20,30,60,.08),0 22px 44px -20px rgba(40,50,100,.28),0 2px 6px rgba(40,50,100,.06);
  --sheen:radial-gradient(140% 90% at 12% -20%,rgba(255,255,255,.7),rgba(255,255,255,0) 46%);
  --blur:blur(28px) saturate(180%);
  --bg:#eef0fb;            /* the sky as one colour: for a ring cut round something on it */
  --bg-plain:#eef0fb;
  --cell:#f9fafe;          /* a pane on the sky as one colour: small things drawn solid, and rings cut round things on glass */
  --cell-2:#eef0fb;
  --fill:rgba(20,30,60,.06);
  --fill-2:rgba(20,30,60,.12);
  --label:#000000;
  --label-2:rgba(20,24,44,.66);      /* (4.5:1 or better on every background) */
  --label-3:rgba(20,24,44,.3);
  --sep:rgba(20,24,44,.1);
  --tint:#0068e8;                      /* a touch deeper than iOS blue, so white text on it and it as text both read */
  --on-tint:#ffffff;
  --green:#34c759; --orange:#ff9500; --red:#d63129;
  --green-t:#1d7f37; --orange-t:#a85000; --tint-fill:#0068e8;     /* the same colours for words: darker, so they read */ --indigo:#5856d6; --teal:#30b0c7; --teal-t:#0b7285; --tint-t:#0054c4; --gray:#8e8e93; --yellow:#ffcc00;
  --bubble-in:rgba(255,255,255,.62);     /* friends' bubbles: glass, as the groups are */
  --glass:rgba(250,251,255,.9);
  --glass-strong:rgba(250,251,255,.9);
  --glass-hi:rgba(255,255,255,.95);
  --glass-edge:rgba(20,30,60,.08);
  --glass-shadow:0 22px 44px -20px rgba(40,50,100,.28),0 2px 6px rgba(40,50,100,.06);
  --scrim:rgba(0,0,0,.22);
  --sea:#d3e6f5; --shelf:#e4f0fa; --relief-hi:#ffffff; --relief-lo:#b9a98a; --land:#f8f6f1; --land-edge:#ddd8cc; --border:#c4bcab; --grid:rgba(0,0,0,.04);
  --p-standard:#34c759; --p-swift:#ff3b30; --p-turbo:#1c1c1e; --p-dumb:#a2845e; --p-rocket:#d9a21b; --p-rocket-text:#8a6408; --p-ring:transparent;   /* pigeon kinds */
  --p-standard-t:#1d7f37; --p-swift-t:#c4271e; --p-dumb-t:#7a5f3b; --tint-on:#0052bd; --red-on:#b3261e;   /* the same, as words on light grounds */
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono:ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:light;
}
/* Dark mode: picked in Account → Appearance (saved on this phone), or
   Automatic, which follows the phone. Light is the default. */
:root[data-theme="dark"]{
    --sky-a:#121a3c; --sky-b:#0a0f26; --sky-c:#05060e; --sky-top:#1b2860;
    --aura-1:rgba(80,120,255,.55); --aura-2:rgba(160,90,255,.4); --aura-3:rgba(40,190,230,.32);
    --pane:rgba(34,40,66,.5); --pane-strong:rgba(28,33,56,.86);
    --edge:inset 0 1px .5px rgba(255,255,255,.42),inset 0 -1px .5px rgba(255,255,255,.08),inset 0 0 22px rgba(255,255,255,.03);
    --lift:0 0 0 .5px rgba(0,0,0,.4),0 22px 44px -18px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.16);
    --sheen:radial-gradient(140% 90% at 12% -20%,rgba(255,255,255,.16),rgba(255,255,255,0) 46%);
    --bg:#0e1430; --bg-plain:#0e1430; --cell:#1a2040; --cell-2:#232a4c;
    --fill:rgba(255,255,255,.08); --fill-2:rgba(255,255,255,.14);
    --label:#f5f6fb; --label-2:rgba(235,238,250,.72); --label-3:rgba(235,238,250,.34); --sep:rgba(255,255,255,.1);
    --tint:#3d9bff; --green:#32d65f; --orange:#ffa31a; --red:#ff5a4f; --green-t:#32d65f; --orange-t:#ffa31a; --tint-fill:#1670e0; --indigo:#7a78ff; --teal:#46c8e0; --teal-t:#46c8e0; --tint-t:#5aabff; --gray:#98989f; --yellow:#ffd60a;
    --bubble-in:rgba(44,50,80,.55);
    --glass:rgba(28,33,56,.86); --glass-strong:rgba(28,33,56,.86); --glass-hi:rgba(255,255,255,.3); --glass-edge:rgba(0,0,0,.4);
    --glass-shadow:0 22px 44px -18px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.16); --scrim:rgba(0,0,0,.4);
    --sea:#1e2b35; --shelf:#253645; --relief-hi:#55555d; --relief-lo:#1c1c20; --land:#36363c; --land-edge:#48484f; --border:#5c5c64; --grid:rgba(255,255,255,.04); --p-standard:#30d158; --p-swift:#ff453a; --p-turbo:#000000; --p-dumb:#ac8e68; --p-rocket:#e3ad2b; --p-rocket-text:#f0c04a; --p-standard-t:#30d158; --p-swift-t:#ff6961; --p-dumb-t:#c4a57e; --tint-on:#7dbdff; --red-on:#ff958d; --p-ring:rgba(255,255,255,.32); --p-dot-ring:rgba(255,255,255,.42); --p-badge-ring:rgba(255,255,255,.2);
    color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --sky-a:#121a3c; --sky-b:#0a0f26; --sky-c:#05060e; --sky-top:#1b2860;
    --aura-1:rgba(80,120,255,.55); --aura-2:rgba(160,90,255,.4); --aura-3:rgba(40,190,230,.32);
    --pane:rgba(34,40,66,.5); --pane-strong:rgba(28,33,56,.86);
    --edge:inset 0 1px .5px rgba(255,255,255,.42),inset 0 -1px .5px rgba(255,255,255,.08),inset 0 0 22px rgba(255,255,255,.03);
    --lift:0 0 0 .5px rgba(0,0,0,.4),0 22px 44px -18px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.16);
    --sheen:radial-gradient(140% 90% at 12% -20%,rgba(255,255,255,.16),rgba(255,255,255,0) 46%);
    --bg:#0e1430; --bg-plain:#0e1430; --cell:#1a2040; --cell-2:#232a4c;
    --fill:rgba(255,255,255,.08); --fill-2:rgba(255,255,255,.14);
    --label:#f5f6fb; --label-2:rgba(235,238,250,.72); --label-3:rgba(235,238,250,.34); --sep:rgba(255,255,255,.1);
    --tint:#3d9bff; --green:#32d65f; --orange:#ffa31a; --red:#ff5a4f; --green-t:#32d65f; --orange-t:#ffa31a; --tint-fill:#1670e0; --indigo:#7a78ff; --teal:#46c8e0; --teal-t:#46c8e0; --tint-t:#5aabff; --gray:#98989f; --yellow:#ffd60a;
    --bubble-in:rgba(44,50,80,.55);
    --glass:rgba(28,33,56,.86); --glass-strong:rgba(28,33,56,.86); --glass-hi:rgba(255,255,255,.3); --glass-edge:rgba(0,0,0,.4);
    --glass-shadow:0 22px 44px -18px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.16); --scrim:rgba(0,0,0,.4);
    --sea:#1e2b35; --shelf:#253645; --relief-hi:#55555d; --relief-lo:#1c1c20; --land:#36363c; --land-edge:#48484f; --border:#5c5c64; --grid:rgba(255,255,255,.04); --p-standard:#30d158; --p-swift:#ff453a; --p-turbo:#000000; --p-dumb:#ac8e68; --p-rocket:#e3ad2b; --p-rocket-text:#f0c04a; --p-standard-t:#30d158; --p-swift-t:#ff6961; --p-dumb-t:#c4a57e; --tint-on:#7dbdff; --red-on:#ff958d; --p-ring:rgba(255,255,255,.32); --p-dot-ring:rgba(255,255,255,.42); --p-badge-ring:rgba(255,255,255,.2);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%;background:var(--sky-top)}
/* with the keyboard up: the page is only as tall as the space above it, so there's nothing for iOS to slide */
html.kbup,html.kbup body{height:var(--app-h,100%);overflow:hidden}
body{height:100%;margin:0;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:var(--sky-top);color:var(--label);font:17px/1.29 var(--font);letter-spacing:-.41px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
/* the app can't be copied from (a pinch still zooms it); typing and pasting still work */
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none}
body.admin{touch-action:auto}
body.admin,body.admin *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
button{cursor:pointer;-webkit-user-select:none;user-select:none}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
svg.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.bird{width:1em;height:1em;fill:currentColor;flex:none}
.one{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt{margin-top:22px!important}.mt-s{margin-top:14px!important}.mt-xs{margin-top:10px!important}

/* Liquid Glass, as the account page has it: blur + saturation, a sheen, a bright rim, a soft lift. This is the stronger
   glass, for what floats over everything (the bars and their buttons, menus, toasts); what lies on the sky is a clearer
   pane of it (the end of this file). */
.glass,.nbtn,.nb-right,.tabs,.plus,.field-wrap,.menu-pop,.toast,.mapcard,.asheet .grp,.chatwho{
  background:var(--sheen),var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--edge),var(--lift);
}

/* ---------- the sky: three slow lights drifting over the gradient (the account page's, index.html .sky) ----------
   Each light is soft at its edge by its own gradient rather than by a blur, and moves on in small steps, twice a
   second: a slow drift looks the same, and the glass over it is blurred afresh twice a second rather than at every
   frame. Held still with Reduce Motion. */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,var(--sky-a),var(--sky-b) 52%,var(--sky-c)) var(--sky-top)}
.aura{position:absolute;width:70vmax;height:70vmax;border-radius:50%;opacity:.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}
.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}
.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}
@keyframes drift1{to{transform:translate(14vmax,10vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-16vmax,8vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(10vmax,-12vmax) scale(1.08)}}
/* (held where they are under a sheet, and while the welcome's own night sky is up instead) */
.app:has(> .screen.sheeted) .aura,html.night .aura{animation-play-state:paused}
html.night .sky{visibility:hidden}
@media (prefers-reduced-motion:reduce){.aura{animation:none}}
/* Reduce Transparency: solid glass, as the account page's is */
@media (prefers-reduced-transparency:reduce){
  .glass,.nbtn,.nb-right,.tabs,.plus,.field-wrap,.menu-pop,.toast,.mapcard,.asheet .grp,.chatwho{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cell)}
}

/* ---------- shell ---------- */
.page{height:var(--app-h,100%);display:flex;flex-direction:column;align-items:center}
.app{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--sky-top);padding-top:env(safe-area-inset-top,0px)}
@media (min-width:600px){
  html,body{background:var(--sky-top)}
  .page{justify-content:center;padding:16px}
  .app{flex:none;width:402px;height:min(874px,calc(100% - 40px));border-radius:52px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45),0 0 0 1px var(--sep)}
}
.rotate{display:none}
/* a computer: no app, just a page saying so (with a code to open it on a phone) */
.notavail{display:none}
html[data-device="computer"] .page,html[data-device="computer"] .rotate{display:none!important}
html[data-device="computer"],html[data-device="computer"] body{background:var(--bg)}
html[data-device="computer"] .notavail{display:flex;min-height:100%;align-items:center;justify-content:center;padding:40px 24px;-webkit-user-select:text;user-select:text}
.na{max-width:440px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.na-icon{width:96px;height:96px;margin-bottom:8px;border-radius:22px;box-shadow:0 14px 34px -10px rgba(0,85,212,.45)}
.na h1{margin:0;font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.na p{margin:0;font-size:17px;line-height:1.45;color:var(--label-2);text-wrap:pretty}
.na p b{color:var(--label);font-weight:600}
.na-qr{margin-top:18px;padding:18px 18px 14px;border-radius:26px;background:var(--cell);box-shadow:0 0 0 .5px var(--sep),0 10px 30px -14px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;gap:10px}
.na-qr[hidden]{display:none}
.na-live{margin-top:14px;display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;background:var(--cell);box-shadow:0 0 0 .5px var(--sep);color:var(--tint);font-size:16px;font-weight:600;text-decoration:none}
.na-livedot{width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.2)}
.na-qr svg{display:block;width:176px;height:176px;border-radius:8px}
.na-qr small{font-size:13px;color:var(--label-2)}
/* (not while typing: on some Android browsers the keyboard makes an upright phone look sideways) */
@media (orientation:landscape) and (max-height:520px){
  html:not(:has(input:focus, textarea:focus)) .page{display:none}
  html:not(:has(input:focus, textarea:focus)) .rotate{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
  .rotate svg{font-size:44px;color:var(--tint)}
  .rotate p{margin:0}
}
.screen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.view{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.view.tabs-pad{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
/* offline: a pill that floats in under the navigation bar (a banner above everything shoved the whole screen down) */
.offline{position:absolute;z-index:9;left:50%;top:62px;padding:6px 14px;border-radius:999px;background:#b25400;color:#fff;font-size:13px;font-weight:600;text-align:center;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.18);transform:translate(-50%,-10px);opacity:0;pointer-events:none;transition:transform .35s var(--snappy),opacity .25s}
.offline.on{transform:translate(-50%,0);opacity:1}
.loading{flex:1;display:grid;place-items:center;color:var(--label-2);font-size:15px;min-height:60vh}

/* ---------- navigation: floating glass buttons, soft scroll edge ---------- */
.navbar{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:56px;padding:6px 14px}
.navbar::before{content:"";position:absolute;inset:0 0 -22px 0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(to bottom,var(--sky-top) 35%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.scrolled .navbar::before,.navbar.solid::before{opacity:1}
.nb-left{display:flex;align-items:center;justify-self:start;min-width:0}
.nb-right{display:flex;align-items:center;justify-self:end;border-radius:999px}
.nb-right:empty{display:none}
.nb-title{font-weight:600;font-size:17px;text-align:center;opacity:0;transition:opacity .15s;min-width:0;max-width:56vw}
.titled .nb-title{opacity:1}
.nbtn{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--label);font-size:17px}
.nbtn svg{font-size:21px;stroke-width:2}
.nb-right .nbtn{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nb-right .nbtn + .nbtn{margin-left:-4px}
.nbtn.back svg{font-size:22px;stroke-width:2.4}
.nbtn.back span{display:none}
.nbtn.prominent{background:var(--tint-fill);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px color-mix(in srgb,var(--tint) 40%,transparent)}
.nbtn:disabled{opacity:.4}
.nbtn:active{transform:scale(.94)}
.large{margin:0 20px 10px;font-size:34px;line-height:41px;font-weight:700;letter-spacing:.37px;display:flex;align-items:center;gap:10px;min-width:0}
/* On a tab's top screen the title sits on the same line as the round buttons,
   both centred on it: the bar is 56px and the title line 41px. It's the size
   the account's page has for its own title (17px), not a large one. */
.navbar.root + .large{margin-top:-48.5px;margin-right:20px;font-size:17px;font-weight:600;letter-spacing:0}
.navbar.root.b1 + .large{margin-right:72px}
.navbar.root.b2 + .large{margin-right:112px}

/* ---------- search ---------- */
.search{display:flex;align-items:center;gap:7px;margin:0 16px 12px;padding:0 14px;height:42px;border-radius:999px;background:var(--fill);color:var(--label-2)}
.search.skp{animation:sheen 1.4s ease-in-out infinite}        /* (the placeholder's, while the list is still on its way) */
.search svg{font-size:18px}
.search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--label);font-size:17px;padding:0}
.search input::placeholder{color:var(--label-2)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}

/* ---------- grouped lists ---------- */
.ghead{margin:24px 36px 8px;font-size:calc(15px * var(--ts, 1));line-height:calc(20px * var(--ts, 1));font-weight:600;color:var(--label);letter-spacing:-.2px}
.gfoot{margin:8px 36px 0;font-size:calc(13px * var(--ts, 1));line-height:calc(18px * var(--ts, 1));color:var(--label-2);letter-spacing:-.08px}
.gfoot.bad{color:var(--red)}
.group{margin:0 16px;background:var(--cell);border-radius:26px;overflow:hidden}
.group + .group{margin-top:22px}
.cell{position:relative;display:flex;align-items:center;gap:13px;width:100%;min-height:52px;padding:12px 18px;border:0;background:none;text-align:left;color:var(--label);font-size:calc(17px * var(--ts, 1))}
button.cell:active,label.cell:active{background:var(--fill)}
.cell + .cell::before{content:"";position:absolute;top:0;right:0;left:18px;height:.5px;background:var(--sep)}
.cell.has-icon + .cell::before,.cell + .cell.has-icon::before{left:60px}
.cell .ctext{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cell .csub{font-size:calc(13px * var(--ts, 1));line-height:calc(18px * var(--ts, 1));color:var(--label-2)}
.cell .val{flex:none;max-width:55%;color:var(--label-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell .val .mono,.cell .val.mono{font-family:var(--mono);font-size:15px}
.cell .chev{font-size:14px;color:var(--label-3);stroke-width:2.8}
.cell .chev.away{font-size:13px;stroke-width:2.6}   /* (opens the account's page: InFlight Settings) */
.cell.action{color:var(--tint)}
.cell.center{justify-content:center;text-align:center}
.cell.destructive{color:var(--red)}
.tile{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.tile svg.ico{stroke-width:2.1}
.tile.blue{background:linear-gradient(180deg,#3f9cff,#0a6ff0)}.tile.green{background:linear-gradient(180deg,#4cd673,#28b850)}
.tile.orange{background:linear-gradient(180deg,#ffad33,#ff8a00)}.tile.red{background:linear-gradient(180deg,#ff6259,#f0372c)}
.tile.indigo{background:linear-gradient(180deg,#7a78ff,#4f4cd8)}.tile.gray{background:linear-gradient(180deg,#a2a2a8,#7d7d84)}
.tile.teal{background:linear-gradient(180deg,#5ad2e6,#26a8c2)}
.cell select.overlay{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.badge-n{flex:none;min-width:24px;height:24px;padding:0 8px;border-radius:12px;background:var(--red);color:#fff;font-size:14px;font-weight:600;line-height:24px;text-align:center}
.pad{padding:18px 16px}
.gap{height:30px}

/* ---------- avatars ---------- */
.av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;overflow:hidden;color:#fff;font-weight:600;font-size:17px;letter-spacing:0;background:linear-gradient(180deg,#a9adb8,#82869a)}
.av[data-c="2"]{background:linear-gradient(180deg,#7fb6f5,#4a86e0)}
.av[data-c="3"]{background:linear-gradient(180deg,#f5ab83,#e0774a)}
.av[data-c="4"]{background:linear-gradient(180deg,#8fd69a,#4fb062)}
.av[data-c="5"]{background:linear-gradient(180deg,#c9a0f5,#9662e0)}
.av img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* online now: a green dot on the avatar's edge, ringed in whatever it sits on */
.av:has(.online){position:relative;overflow:visible}
.av .online{position:absolute;right:2%;bottom:2%;width:26%;height:26%;min-width:9px;min-height:9px;border-radius:50%;background:var(--p-standard);box-shadow:0 0 0 max(2px,.045em) var(--dot-bg,var(--bg))}
.av .online.new{animation:pop .5s var(--bouncy)}
.av.xl .online{box-shadow:0 0 0 4px var(--dot-bg,var(--bg))}
.group .av,.chatwho .av{--dot-bg:var(--cell)}
.mlist .mrow .av{--dot-bg:var(--cell)}
.on-now{color:var(--green-t);font-weight:500}
.av.xs{width:28px;height:28px;font-size:11px}
.av.s{width:36px;height:36px;font-size:14px}
.av.m{width:54px;height:54px;font-size:20px}
.av.l{width:64px;height:64px;font-size:24px}
.av.xl{width:104px;height:104px;font-size:40px}

/* ---------- Messages list ---------- */
.mlist{display:flex;flex-direction:column;padding:0 4px}
.mrow{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:80px;padding:10px 14px 10px 22px;border:0;border-radius:22px;background:none;text-align:left;color:var(--label)}
.mrow:active{background:var(--fill)}
.mrow + .mrow::before{content:"";position:absolute;top:0;right:14px;left:88px;height:.5px;background:var(--sep)}
.mrow .dot{position:absolute;left:7px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--tint)}
.mrow .mtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-self:stretch;justify-content:center}
.mrow .mtop{display:flex;align-items:baseline;gap:6px}
.mrow .mname{flex:1;font-weight:400;font-size:calc(17px * var(--ts, 1))}
.mrow time{flex:none;font-size:13px;color:var(--label-2)}
.mrow .mtop .chev{font-size:12px;color:var(--label-3);stroke-width:2.8;align-self:center}
.mrow .mprev{font-size:calc(13px * var(--ts, 1));line-height:calc(18px * var(--ts, 1));color:var(--label-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mrow .mprev .fl{color:var(--orange-t);display:inline-flex;align-items:center;gap:4px;max-width:100%}
.mrow .mprev svg{vertical-align:-2px;margin-right:3px}
.empty{margin:0;padding:44px 32px;text-align:center;color:var(--label-2);font-size:15px;line-height:20px;text-wrap:balance}
.empty b{display:block;color:var(--label);font-size:22px;line-height:28px;font-weight:700;margin-bottom:6px}
.empty .btn{margin-top:20px}

/* ---------- buttons: capsules ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--tint-fill);color:var(--on-tint);font-size:17px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px color-mix(in srgb,var(--tint) 32%,transparent)}
a.btn{text-decoration:none;box-sizing:border-box}
.btn svg{font-size:20px}
.btn.wide{width:100%}
.btn.tinted,.btn.ghost{background:color-mix(in srgb,var(--tint) 15%,transparent);color:var(--tint);box-shadow:none}
.btn.plain{background:none;color:var(--tint);font-weight:500;box-shadow:none}
.btn.gray{background:var(--fill);color:var(--label);box-shadow:none}
.btn.danger{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red);box-shadow:none}
.btn.small{min-height:36px;padding:0 16px;font-size:15px}
.btn:disabled{opacity:.4;cursor:default}
.btn:not(:disabled):active{transform:scale(.97)}
.link{border:0;background:none;padding:0;color:var(--tint);font-size:inherit}
.link.danger{color:var(--red)}

/* ---------- chat ---------- */
.chatnav{min-height:64px}
.chatwho{display:flex;align-items:center;gap:8px;border:0;color:var(--label);padding:4px 14px 4px 4px;border-radius:999px;max-width:58vw;min-width:0}
.chatwho .nm{display:flex;align-items:center;gap:3px;font-size:15px;font-weight:600;min-width:0}
.chatwho .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatwho .nm svg{font-size:11px;color:var(--label-3);stroke-width:3}
.msgs{display:flex;flex-direction:column;padding:4px 14px 18px}
.stamp{align-self:center;margin:16px 0 6px;font-size:11px;font-weight:500;color:var(--label-2);text-align:center}
.stamp b{font-weight:600}
.b{position:relative;max-width:76%;margin-top:2px;padding:8px 13px 9px;border-radius:21px;background:var(--bubble-in);color:var(--label);font-size:calc(17px * var(--ts, 1));line-height:calc(22px * var(--ts, 1));align-self:flex-start;overflow-wrap:anywhere}
.b.me{align-self:flex-end;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 88%,#fff),var(--tint));color:#fff}
.b.gap-top{margin-top:10px}
.b.pic{padding:0;background:none;overflow:hidden;border-radius:22px;width:68%}
.b.pic img,.b.pic .ph{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;background:var(--fill);cursor:zoom-in}
.b.pic img.arrive,.av img.arrive{animation:fade .3s ease both}
.b.pic .ph.wait{animation:sheen 1.4s ease-in-out infinite}
.b.pic .ptxt{display:block;margin-top:3px;padding:8px 13px 9px;border-radius:21px;background:var(--bubble-in)}
.b.pic.me .ptxt{background:var(--tint-fill);color:#fff}
.ph{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--label-2);font-size:13px;padding:12px;text-align:center;cursor:default!important}
.ph svg{font-size:26px}
.bad-scroll{font-style:italic;opacity:.8}
.meta{display:flex;flex-wrap:wrap;gap:0 6px;margin:3px 8px 2px;font-size:11px;line-height:14px;color:var(--label-2);font-weight:500}
.meta.me{align-self:flex-end;justify-content:flex-end;text-align:right}
.meta .fl{color:var(--orange-t)}
.prog{height:3px;border-radius:2px;background:var(--fill-2);overflow:hidden;margin-top:6px}
.prog i{display:block;height:100%;width:0;background:var(--orange);border-radius:2px}
.b.me .prog{background:rgba(255,255,255,.35)}
.b.me .prog i{background:#fff}
@keyframes bob{50%{transform:translateY(-2px)}}
.warn{margin:8px 14px 0;padding:14px 16px;border-radius:24px;background:color-mix(in srgb,var(--yellow) 20%,var(--cell));font-size:15px;line-height:20px;display:flex;flex-direction:column;gap:10px}
.warn .btn{align-self:flex-start}

/* composer: a floating glass field over the conversation */
.compose{flex:none;position:relative;display:flex;flex-direction:column;gap:6px;padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));transition:padding-bottom .35s var(--snappy)}
/* the home-bar gap goes only once the keyboard is really up (on the tap itself, moving the box under the
   finger let the phone's late tap land on the messages above and put the keyboard away again) */
html.kbup .compose{padding-bottom:6px}
.note{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;line-height:16px;color:var(--orange-t);text-align:center}
.note svg{font-size:14px}
.note.stop{color:var(--red)}
.crow{display:flex;align-items:flex-end;gap:8px}
.plus{flex:none;width:44px;height:44px;border:0;border-radius:50%;color:var(--label);display:grid;place-items:center}
.plus svg{font-size:21px;stroke-width:2.2}
.field-wrap{flex:1;min-width:0;display:flex;align-items:flex-end;min-height:44px;border-radius:22px;padding:4px 4px 4px 16px}
.field-wrap textarea{flex:1;min-width:0;resize:none;border:0;outline:none;background:none;padding:7px 0;font-size:calc(17px * var(--ts, 1));line-height:calc(22px * var(--ts, 1));max-height:120px;display:block;color:var(--label)}
.field-wrap textarea::placeholder{color:var(--label-2)}
.send{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:var(--tint-fill);color:#fff;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.send svg{font-size:18px;stroke-width:2.6}
.send:disabled{opacity:0;pointer-events:none;width:0;margin:0}
.attach{display:flex;align-items:center;gap:10px;padding:8px;border-radius:22px;background:var(--glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 .5px var(--glass-edge);font-size:13px;color:var(--label-2)}
.attach img{flex:none;width:46px;height:46px;object-fit:cover;border-radius:14px}
/* the photo card above the message box: thumbnail, title, status and, once
   Send is pressed, a bar that glides (driven frame by frame from app.js) */
.attach{position:relative;overflow:hidden;gap:12px;padding:8px 10px 8px 8px}
.attach img{width:52px;height:52px;border-radius:14px;transition:opacity .25s}
.attach .ainfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.attach .ainfo > b{font-size:15px;font-weight:600;color:var(--label)}
.attach .atext{font-size:13px;line-height:17px;color:var(--label-2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attach .upbar{display:block;height:4px;margin-top:6px;border-radius:2px;background:var(--fill-2);overflow:hidden;max-height:0;opacity:0;transition:max-height .3s var(--snappy),opacity .25s,margin .3s var(--snappy)}
.attach .upbar b{display:block;height:100%;border-radius:2px;background:var(--tint);transform-origin:left;transform:scaleX(0)}
.attach.uploading .upbar{max-height:4px;opacity:1}
.attach.uploading img{opacity:.75}
.attach.uploading button{opacity:.3;pointer-events:none}
/* encrypting: a short shimmer, since it takes no time worth measuring */
.attach.sealing .upbar b{width:35%;transform:none;animation:seal 0.9s ease-in-out infinite}
@keyframes seal{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
/* a profile photo uploading: just a slim bar where "New Photo" was */
.attach span{flex:1;min-width:0;line-height:17px}
.attach button{flex:none;border:0;background:var(--fill);color:var(--label-2);width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.attach button svg{font-size:13px;stroke-width:2.6}

/* ---------- glass tab bar ---------- */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;padding:0 20px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
.tabs{pointer-events:auto;display:flex;width:100%;max-width:320px;padding:5px;border-radius:999px}
.tab{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;border:0;border-radius:999px;background:none;color:var(--label);font-size:10px;font-weight:600;letter-spacing:.1px;transition:background .2s,color .2s}
.tab svg{font-size:24px}
.tab[aria-current="true"]{color:var(--tint)}
.tab:active{transform:scale(.95)}
.tab .badge{position:absolute;top:2px;left:calc(50% + 7px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:12px;line-height:18px;font-weight:600}

/* ---------- forms ---------- */
.fcell{position:relative;display:flex;align-items:center;gap:6px;min-height:52px;padding:0 8px 0 18px;background:var(--cell)}
.fcell + .fcell::before{content:"";position:absolute;top:0;right:0;left:18px;height:.5px;background:var(--sep)}
.fcell .pre{flex:none;color:var(--label-2)}
.fcell input,.fcell select{flex:1;min-width:0;border:0;background:none;outline:none;padding:14px 10px 14px 0;font-size:17px;color:var(--label)}
.fcell input::placeholder{color:var(--label-3)}
.fcell input:disabled{color:var(--label-2)}
.fcell.bad input::placeholder,.fcell.bad .pre{color:var(--red)}
.fcell.bad{box-shadow:inset 3px 0 0 var(--red)}
.peek{flex:none;width:44px;height:44px;margin:-2px -4px -2px 0;border:0;background:none;color:var(--label-3);display:grid;place-items:center}
.peek svg{font-size:20px}

/* ---------- onboarding ---------- */
.auth{min-height:100%;display:flex;flex-direction:column;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.auth .large{margin-top:6px}
.auth .sub{margin:0 20px 4px;color:var(--label-2);font-size:17px;line-height:22px}
.auth .stack{margin-top:auto;padding:22px 20px 0;display:flex;flex-direction:column;gap:10px}
.auth .fine{margin:14px 32px 0;font-size:13px;line-height:18px;color:var(--label-2);text-align:center}
.welcome{align-items:center;text-align:center;padding-top:48px}
.welcome .stack{width:100%}
.appicon{width:100px;height:100px;border-radius:26px;display:grid;place-items:center;color:#fff;font-size:62px;background:linear-gradient(160deg,#5fb0ff,#0a5fe0);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -6px 14px rgba(0,0,0,.12),0 14px 34px -12px rgba(10,95,224,.6)}
.welcome h1{margin:20px 0 0;font-size:34px;line-height:41px;font-weight:700;display:flex;align-items:center;gap:8px}
.feats{list-style:none;margin:32px 0 0;padding:0 34px;display:flex;flex-direction:column;gap:22px;text-align:left;width:100%;max-width:400px}
.feats li{display:flex;gap:16px;align-items:flex-start}
.feats svg{font-size:30px;color:var(--tint);margin-top:2px}
.feats b{display:block;font-size:15px;line-height:20px}
.feats span{display:block;font-size:15px;line-height:20px;color:var(--label-2)}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 24px 0;gap:10px}
.hero.tall{padding-top:64px}
.hero .big-ico{font-size:66px;color:var(--tint)}
.hero h1{margin:6px 0 0;font-size:28px;line-height:34px;font-weight:700}
.hero p{margin:0;color:var(--label-2);font-size:17px;line-height:22px;text-wrap:balance}
.steps{list-style:none;margin:28px 0 0;padding:0 28px;display:flex;flex-direction:column;gap:14px;text-align:left}
.steps li{display:flex;gap:12px;align-items:center;font-size:17px;color:var(--label-2)}
.steps li.is-now,.steps li.is-ok{color:var(--label)}
.steps li.is-ok svg{color:var(--green-t)}
.steps svg{font-size:24px}
.spin{width:24px;height:24px;border-radius:50%;border:3px solid var(--fill-2);border-top-color:var(--tint);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- account ---------- */
.dots{display:flex;gap:3px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.dots i.e{background:var(--fill-2)}
.dots{align-items:center}.dots .extra{margin-left:3px;font-size:13px;font-weight:600;color:var(--label-2);font-variant-numeric:tabular-nums}

/* ---------- sheets ---------- */
.layer:empty,.poplayer:empty,.toasts:empty{display:none}
.scrim{position:absolute;inset:0;z-index:20;background:var(--scrim)}
.sheet{position:absolute;left:0;right:0;bottom:0;top:12px;z-index:21;display:flex;flex-direction:column;border-radius:38px 38px 0 0;
  background:var(--sheen),var(--pane-strong);-webkit-backdrop-filter:blur(36px) saturate(190%);backdrop-filter:blur(36px) saturate(190%);box-shadow:var(--edge),0 -10px 40px rgba(0,0,0,.18)}
.grab{flex:none;width:36px;height:5px;border-radius:3px;background:var(--label-3);margin:7px auto 0}
.sheet > header{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:60px;padding:2px 14px 0}
.sheet > header h2{margin:0;font-size:17px;font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56vw}
.sheet > header .l{justify-self:start}
.sheet > header .r{justify-self:end;grid-column:3}      /* (its own column even when the title is hidden) */
.sheet > header .nbtn{width:42px;height:42px}
.sheet .body{flex:1;min-height:0;overflow:auto;position:relative;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.sheet .body.flush{padding:0;overflow:hidden}
.map{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
/* (the sea behind the map until its first picture is drawn, a moment after it opens; then the picture fades in over it) */
.sheet .body.flush:has(> .map){background:var(--sea)}
.mapghost{position:absolute;inset:0;pointer-events:none}
.map:active{cursor:grabbing}
.mapctl{position:absolute;top:10px;right:14px;z-index:1;display:flex;flex-direction:column;border-radius:999px;padding:3px}
.mapctl button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--label);font-size:19px}
.mapctl button:active{background:var(--fill)}
/* Show the Whole Route: grows into the capsule once you've moved the map, and folds away again */
.mapctl .fitbtn{color:var(--tint);overflow:hidden;transition:height .35s var(--snappy),opacity .25s .05s,transform .4s var(--snappy),visibility 0s,background-color .3s,box-shadow .3s,filter .3s}
.mapctl:not(.moved) .fitbtn{height:0;opacity:0;transform:scale(.5);visibility:hidden;transition:height .35s var(--snappy),opacity .2s,transform .35s var(--snappy),visibility 0s .35s}
.mapcard{position:absolute;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:16px 18px;border-radius:30px;display:flex;flex-direction:column;gap:2px}
.mapcard .big{display:flex;align-items:center;justify-content:center;gap:8px;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.mapcard .big svg{color:var(--orange-t)}
.mapcard .speed{text-align:center;font-size:14px;font-weight:500;color:var(--label-2);font-variant-numeric:tabular-nums;margin-top:-1px}
.mapcard .route{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:13px;color:var(--label-2)}
.mapcard .route span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.digits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:20px 12px;font-family:var(--mono);font-size:20px;text-align:center}
.profile-head{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 16px 4px;text-align:center}
.profile-head .name{font-size:24px;font-weight:700;line-height:30px;overflow-wrap:anywhere}
.profile-head .sub{font-size:15px;color:var(--label-2)}
.reqrow{display:flex;align-items:center;gap:12px;padding:12px 16px;position:relative}
.reqrow + .reqrow::before{content:"";position:absolute;top:0;right:0;left:66px;height:.5px;background:var(--sep)}
.reqrow .ctext{flex:1;min-width:0;display:flex;flex-direction:column}
.reqrow .ctext .one{display:block}
.reqrow .ctext br{display:none}
.reqrow .acts{flex:none;display:flex;gap:8px}
.val.tick{color:var(--tint);font-size:20px;display:flex}
.dim .group,.dim .gfoot,.dim .ghead{opacity:.55;transition:opacity .2s}
/* iOS 26 switch */
.switch{flex:none;position:relative;width:62px;height:28px;border-radius:999px;background:var(--fill-2);transition:background .25s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:37px;height:24px;border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.switch.on{background:var(--green)}
.switch.on::after{transform:translateX(21px)}
.cell[role=switch]:disabled{opacity:1}
.cell[role=switch]:disabled .switch{opacity:.45}
.reqrow.inc{flex-wrap:wrap;row-gap:10px}
.reqrow.inc .acts{flex-basis:100%;padding-left:48px}
.reqrow.inc .acts .btn{flex:1}
.viewer{position:absolute;inset:0;z-index:30;background:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:16px;cursor:zoom-out}
.viewer img{max-width:100%;max-height:80%;border-radius:6px}
.viewer p{color:rgba(255,255,255,.6);font-size:13px;margin:0;text-align:center}

/* ---------- glass menus ---------- */
.menu-scrim{position:absolute;inset:0;z-index:40}
.menu-pop{position:absolute;z-index:41;min-width:240px;max-width:min(290px,calc(100% - 24px));padding:6px;border-radius:26px;background:var(--glass-strong);transform-origin:var(--origin,top right)}
.menu-pop .mi{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:10px 14px;border:0;border-radius:18px;background:none;text-align:left;color:var(--label);font-size:17px}
.menu-pop .mi span{flex:1;min-width:0}
.menu-pop .mi svg{font-size:20px}
.menu-pop .mi.destructive{color:var(--red-on)}
.menu-pop .mi:active{background:var(--fill)}
@keyframes pop{from{opacity:0;transform:scale(.8)}}

/* ---------- glass action card ---------- */
.asheet{position:absolute;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:41}
.asheet .grp{display:flex;flex-direction:column;gap:8px;padding:18px 14px 14px;border-radius:34px;background:var(--glass-strong)}
.asheet .msg{padding:0 8px 6px;text-align:center;font-size:13px;line-height:18px;color:var(--label-2)}
.asheet .msg b{display:block;color:var(--label);font-size:17px;line-height:22px;font-weight:600;margin-bottom:4px}
.asheet .ab,.asheet .cancel{display:block;width:100%;min-height:52px;border:0;border-radius:999px;font-size:17px;font-weight:600}
.asheet .ab{background:color-mix(in srgb,var(--tint) 15%,transparent);color:var(--tint-on)}
.asheet .ab.destructive{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red-on)}
.asheet .cancel{margin-top:8px;background:var(--glass-strong);color:var(--label);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px var(--glass-edge),var(--glass-shadow)}

/* ---------- banner ---------- */
/* (under the navigation bar, so Back and the bar's buttons stay in reach; in a sheet, under the sheet's own header) */
.toast{position:absolute;left:10px;right:10px;top:64px;z-index:50;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:30px;background:var(--glass-strong);font-size:15px;line-height:20px}
.screen.sheeted .toast{top:76px}
.toast .ticon{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-size:22px;background:linear-gradient(160deg,#5fb0ff,#0a5fe0)}
.toast span{flex:1;min-width:0}
.toast button{flex:none}

/* (opened again while it was still going: from where it had got to, --y1 and --o1, rather than from the bottom) */
@keyframes up{from{transform:translateY(var(--y1,100%))}}
@keyframes fade{from{opacity:var(--o1,0)}}
@keyframes drop{from{transform:translateY(-22px) scale(.97)}}

/* ============================================================
   Motion, the iOS 26 way: springs, not fixed curves. Controls swell
   and brighten under a finger and spring back; sheets, menus and
   banners spring in from where they come from and animate out; the
   tab highlight slides between tabs. Reduce Motion turns it all off.
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --smooth:cubic-bezier(.25,1,.5,1); --snappy:cubic-bezier(.2,1.1,.4,1); --bouncy:cubic-bezier(.3,1.35,.45,1);
  /* the names the site's other pages use for the same curves and times (home, account, Weather) */
  --ease-glide:var(--nav); --ease-in:cubic-bezier(.4,0,1,1); --ease-spring:var(--snappy);
  --dur-press:.1s; --dur-release:.45s; --dur-fast:.2s; --dur-base:.35s; --dur-sheet-in:.5s; --dur-sheet-out:.34s;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --smooth:linear(0, 0.02, 0.071, 0.139, 0.216, 0.295, 0.374, 0.448, 0.518, 0.581, 0.638, 0.689, 0.733, 0.772, 0.806, 0.836, 0.861, 0.883, 0.901, 0.917, 0.93, 0.942, 0.951, 0.959, 0.966, 0.972, 0.976, 0.98, 0.984, 0.986, 0.989, 0.991, 0.992, 0.994, 0.995, 0.996, 0.996, 0.997, 0.998, 1);
    --snappy: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);
    --bouncy:linear(0, 0.029, 0.103, 0.207, 0.328, 0.455, 0.579, 0.695, 0.799, 0.887, 0.959, 1.015, 1.056, 1.084, 1.1, 1.106, 1.106, 1.099, 1.089, 1.077, 1.063, 1.05, 1.037, 1.025, 1.015, 1.007, 1, 0.995, 0.992, 0.99, 0.989, 0.989, 0.989, 0.99, 0.991, 0.993, 0.994, 0.996, 0.997, 1);
  }
}

/* ---- touch: glass swells and brightens, solid things dip, rows light up ---- */
.nbtn,.chatwho,.plus,.send,.mapctl button,.fly,.b.pic img{transition:transform .5s var(--snappy),background-color .3s,box-shadow .3s,filter .3s,opacity .25s}
.nbtn:active,.plus:active,.mapctl button:active{transform:scale(1.14);filter:brightness(1.08) saturate(1.1);box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px var(--glass-edge),0 12px 30px rgba(0,0,0,.18)}
.nb-right .nbtn:active{transform:scale(1.18);background:var(--fill)}
.nb-right{transition:transform .5s var(--snappy)}
.nb-right:has(.nbtn:active){transform:scale(1.04)}
.nbtn.prominent:active{filter:brightness(1.12)}
.chatwho:active{transform:scale(1.06);filter:brightness(1.06)}
.send:active{transform:scale(1.15)}
.b.pic img:active{transform:scale(.98)}
.btn,.asheet .ab,.asheet .cancel,.toast button,.reqrow .btn{transition:transform .45s var(--snappy),filter .25s,background-color .25s,opacity .25s}
.btn:not(:disabled):active,.asheet .ab:active,.asheet .cancel:active{transform:scale(.96);filter:brightness(1.08)}
button.cell,label.cell,.mrow,.menu-pop .mi{transition:background-color .45s var(--ease-out)}
button.cell:active,label.cell:active,.mrow:active,.menu-pop .mi:active{transition-duration:0s}
.link{transition:opacity .3s}.link:active{opacity:.45}

/* ---- tab bar: the highlight slides and stretches like a drop of glass ---- */
.tabs{position:relative;transition:transform .5s var(--snappy)}
.tabs:has(.tab:active){transform:scale(1.04)}
.tabs::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px) / 3);border-radius:999px;background:var(--fill);
  translate:calc(var(--tab, 0) * 100%) 0;transition:translate .55s var(--snappy);pointer-events:none}
.tabs.moving::before{animation:squish .55s var(--smooth)}
@keyframes squish{35%{scale:1.22 .9}}
.tabs[data-tab="-1"]::before{opacity:0}
.tab{transition:transform .45s var(--snappy),color .25s}
.tab:active{transform:scale(.9)}
.tabbar.rise .tabs{animation:rise .5s var(--snappy)}
.tabbar.back .tabs{animation:tabs-back .5s var(--nav)}
@keyframes tabs-back{from{transform:translateX(-28vw);opacity:.7}}
@keyframes rise{from{transform:translateY(130%)}}
.tab .badge.new{animation:bump .5s var(--bouncy)}
.tab .badge.out{animation:badge-out .2s ease-in forwards}
@keyframes badge-out{to{transform:scale(.3);opacity:0}}
@keyframes bump{from{transform:scale(.3);opacity:0}}

/* ---- switches: the knob stretches while held, then springs across ---- */
.switch::after{transition:transform .5s var(--snappy) var(--glide,0s),width .3s var(--snappy)}
.switch{transition:background-color .3s var(--glide,0s)}
.cell[role=switch]:active .switch::after{width:45px}
.cell[role=switch]:active .switch.on::after{transform:translateX(13px)}
.val.tick svg{animation:bump .45s var(--bouncy)}

/* ---- sheets: spring up; the screen behind settles back; slide away when closed ---- */
/* (the curve iOS sheets use: quick, then a long gentle settle, never past the top) */
.sheet{animation:up .5s cubic-bezier(.32,.72,0,1)}
.scrim{animation:fade .4s cubic-bezier(.32,.72,0,1)}
.sheet.closing{animation:down .34s cubic-bezier(.32,.72,0,1) forwards}
.scrim.closing{animation:fade-out .34s ease forwards}
.layer .closing,.poplayer .closing{pointer-events:none}
.layer .still,.poplayer .still{animation:none}
/* (closed while still coming in: from where it is, --y0, --s0 and --o0 read off it as it goes, not from fully open) */
@keyframes down{from{transform:translateY(var(--y0,0px))}to{transform:translateY(105%)}}
@keyframes fade-out{from{opacity:var(--o0,1)}to{opacity:0}}
/* (the screen behind stays put while a sheet is up, and the scrim dims it: shrinking it, with a filter and rounded
   corners, cost a repaint of the whole chat on every frame, and a redraw of it as it stopped, so the sheet juddered) */
.tabbar{transition:transform .55s var(--snappy)}
.compose{transition:transform .55s var(--snappy),padding-bottom .35s var(--snappy)}
/* the sheet reaches a little further down than the screen, so nothing shows under it as it settles */
.sheet::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:80px;background:inherit;pointer-events:none}
.viewer{animation:fade .3s ease}
.viewer img{animation:zoomin .5s var(--snappy)}
.viewer.closing{animation:fade-out .25s ease forwards}
@keyframes zoomin{from{transform:scale(.85);opacity:.4}}


/* ---- menus grow out of the button that opened them, and shrink back ----
   (on the soft spring, its opacity on a curve of its own: the spring's overshoot never dims it, and no blur to
   repaint under the glass every frame) */
.menu-pop{animation:menu-in .4s var(--snappy),menu-fade .18s ease-out}
.menu-pop.closing{animation:menu-out .22s var(--nav) forwards}
@keyframes menu-in{from{transform:scale(.4)}}
@keyframes menu-fade{from{opacity:0}}
@keyframes menu-out{from{opacity:var(--o0,1);transform:scale(var(--s0,1))}to{opacity:0;transform:scale(.6)}}
.menu-pop .mi{animation:fade .3s ease both}
/* (away on the sheets' own curve, quick from the start; app.js closePop waits for it) */
.asheet{animation:up .55s var(--snappy)}
.asheet.closing{animation:down .3s var(--nav) forwards}
.poplayer .scrim.closing{animation-duration:.3s}

/* ---- banners drop in and lift away; a new one while one shows takes its place, its words rising in ---- */
.toast{animation:drop .5s var(--snappy),fade .22s ease-out}
.toast.swap{animation:toast-bump .35s var(--snappy)}
.toast.swap>span:nth-child(2),.toast.swap>button{animation:toast-swap .3s var(--ease-out)}
.toast.out{animation:toast-out .35s cubic-bezier(.4,0,1,1) forwards}
@keyframes toast-bump{from{transform:scale(1.03)}}
@keyframes toast-swap{from{opacity:0;transform:translateY(5px)}}
@keyframes toast-out{to{transform:translateY(-22px) scale(.97);opacity:0}}

/* ---- moving between screens ----
   On the curve iOS uses (quick, then a long settle, never past the end), and only moving and fading: a shadow or a
   filter changing every frame meant repainting the whole screen, and stutter on a phone.
   - a chat pushes in from the right over the screen you were on, which slides a little aside and dims;
   - back, it slides away to the right and the screen behind slides back in;
   - tabs slide a touch toward the tab you picked as they cross-fade (the old one stays under: no blank frame);
   - inside a sheet, going on to another slides in from the right, and back from the left. */
:root{--nav:cubic-bezier(.32,.72,0,1)}
.view.nav-push,.compose.nav-push{animation:push .5s var(--nav)}
.view.nav-push{box-shadow:-16px 0 36px rgba(0,0,0,.14)}
.view.nav-pop{animation:pop-back .5s var(--nav)}
.view.nav-fade{animation:tab-in .45s var(--nav)}
.view.nav-tab-r{animation:tab-r .34s var(--nav)}
.view.nav-tab-l{animation:tab-l .34s var(--nav)}
/* (the screens are clear over the sky, so one going under another is cut off at the other's edge as it goes: the copy
   slides aside a whole width while what's in it slides back 72% of one, showing the 28% iOS slides it, never under the
   new screen. The same for the screen a swipe back shows, app.js underlay.) */
.nav-ghost{position:absolute;left:0;right:0;bottom:0;overflow:hidden;pointer-events:none}
.ghost-in{position:absolute;inset:0;display:flex;flex-direction:column}
.ghost-in > .view{flex:1;min-height:0;overflow:hidden}
.ghost-in > .compose{flex:none}
.nav-ghost-push{z-index:0;animation:ghost-under .5s var(--nav) forwards}
.nav-ghost-push > .ghost-in{animation:ghost-under-in .5s var(--nav) forwards}
.nav-ghost-push::after{content:"";position:absolute;inset:0;background:#000;opacity:0;animation:ghost-dim .5s var(--nav) forwards}
.nav-ghost-pop{z-index:7;animation:ghost-away .5s var(--nav) forwards;box-shadow:-16px 0 36px rgba(0,0,0,.14)}   /* over the tab bar, which waits underneath */
.nav-ghost-tab{z-index:0;animation:fade-out .3s ease forwards}
.view.nav-push,.view.nav-pop,.view.nav-tab-r,.view.nav-tab-l,.view.nav-fade{position:relative;z-index:1}
@keyframes ghost-under{to{transform:translateX(-100%)}}
@keyframes ghost-under-in{to{transform:translateX(72%)}}
@keyframes ghost-dim{to{opacity:.14}}
@keyframes ghost-away{to{transform:translateX(100%)}}
@keyframes push{from{transform:translateX(100%)}}
@keyframes pop-back{from{transform:translateX(-28%);clip-path:inset(0 72% 0 0);opacity:.7}}   /* (cut off at the edge of the screen going) */
@keyframes tab-r{from{transform:translateX(22px);opacity:0}}
@keyframes tab-l{from{transform:translateX(-22px);opacity:0}}
@keyframes tab-in{from{opacity:0;transform:scale(.985)}}
.sheet .body.go-on{animation:sheet-on .42s var(--nav)}
.sheet .body.go-back{animation:sheet-back .42s var(--nav)}
.sheet.go-on > header > *,.sheet.go-back > header > *{animation:fade .3s ease}
@keyframes sheet-on{from{transform:translateX(30%);opacity:0}}
@keyframes sheet-back{from{transform:translateX(-30%);opacity:0}}
/* the page you've left stays under the new one as it goes (app.js renderSheet): it slides the other way and fades,
   and its header fades over the new one, so the sheet is never empty. A copy of the sheet as it was (.gsheet, in a
   shadow root of its own: .sheetghost), over the sheet's own colour: nothing in it plays again */
.sheet > .body{z-index:1}
.sheet > .sheetghost,.flipgone{position:absolute;inset:0;z-index:0;pointer-events:none}
.flipgone{inset:auto}
.sheet.gsheet{top:0!important;background:none!important;box-shadow:none!important;animation:none!important}
.sheet.gsheet::after{content:none}
.gsheet > .grab{visibility:hidden}
.gsheet > .body{overflow:hidden;animation:ghost-on .42s var(--nav) forwards}
.gsheet.back > .body{animation-name:ghost-back}
.gsheet > header{animation:fade-out .2s ease forwards}
.gsheet > * *,.gsheet > * *::before,.gsheet > * *::after{animation:none!important}
.gwrap{display:contents!important}
@keyframes ghost-on{to{transform:translateX(-30%);opacity:0}}
@keyframes ghost-back{to{transform:translateX(30%);opacity:0}}
/* Reduce Motion: sheets, menus, the photo and the rest come and go as a quick fade, not a slide or a grow (with
   everything stopped they sat frozen until they were taken away); a page gone on to in a sheet fades in, the
   view-once ring still empties, and a spinner still turns. (Each beats the rule above that stops everything.) */
@media (prefers-reduced-motion:reduce){
  .layer .sheet,.layer .scrim,.layer .viewer,.poplayer .scrim,.poplayer .asheet,.poplayer .menu-pop,.oview{animation:fade .2s ease both!important}
  .layer .closing,.poplayer .closing,.oview.out{animation:fade-out .2s ease forwards!important}
  .layer .still,.poplayer .still{animation:none!important}
  .sheet .body.go-on,.sheet .body.go-back,.sheet.go-on > header > *,.sheet.go-back > header > *{animation:fade .2s ease!important}
  .oview.on .oring circle{animation-name:oring!important;animation-timing-function:linear!important;animation-fill-mode:forwards!important}
  .spin{animation:spin 1.2s linear infinite!important}
}
/* Light to Dark, or back: the whole app cross-fades (app.js themeFade); quicker with Reduce Motion */
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}}

/* ---- messages pop out of the composer, or in from the sky when they land ---- */
.b.fresh,.fly.fresh{animation:bubble-in .6s var(--bouncy);transform-origin:bottom left}
.b.me.fresh{transform-origin:bottom right;animation:bubble-send .42s var(--snappy)}
@keyframes bubble-send{from{opacity:0;transform:translateY(18px) scale(.9)}}
@keyframes bubble-in{from{opacity:0;transform:scale(.4) translateY(20px)}}
.attach:not([hidden]){animation:bubble-in .5s var(--snappy);transform-origin:bottom left}
.send:not(:disabled){animation:send-in .45s var(--bouncy)}
@keyframes send-in{from{transform:scale(.2);opacity:0}}
/* scrolled up, a pigeon arrives below: a pill over the composer (centred with translate, so the pop-in's transform is free) */
.newpill{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 0;z-index:2;height:34px;padding:0 15px;border:0;border-radius:999px;background:var(--glass-strong);color:var(--tint);
  font:600 14px/34px var(--font);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);animation:bubble-in .35s var(--snappy);transition:transform .3s var(--snappy)}
.newpill:active{transform:scale(.94);transition-duration:.1s}
.newpill.out{animation:fade-out .2s ease forwards;pointer-events:none}
/* a message held for its menu sinks, and springs back as the menu opens (not snaps) */
.msgs .b[data-act]{transition:transform .3s var(--snappy)}
/* the composer's bars come in as they open (the composer itself slides to its new height: app.js composeGlide) */
.replybar:not([hidden]),.compose .note:not([hidden]),.wxplan:not([hidden]),.recbar:not([hidden]){animation:bar-in .26s var(--ease-out)}
.compose .crow.back{animation:bar-in .22s var(--ease-out)}
@keyframes bar-in{from{opacity:0;transform:translateY(6px) scale(.98)}}
/* what a redraw took away, fading where it was as the list closes up (app.js: playKeyed) */
.kgone{position:absolute;z-index:0;margin:0!important;padding-top:0!important;padding-bottom:0!important;pointer-events:none}

/* ---- a wrong entry shakes, as on iPhone; what's wrong opens in under it, easing what's below down ---- */
.fcell.bad{animation:shake .45s var(--smooth)}
.ferr:not([hidden]){animation:ferr-in .3s var(--smooth) backwards}
@keyframes ferr-in{from{opacity:0;max-height:0;margin-top:0;margin-bottom:0;transform:translateY(-4px)}to{max-height:6em}}
@keyframes shake{15%{transform:translateX(-9px)}35%{transform:translateX(7px)}55%{transform:translateX(-5px)}75%{transform:translateX(3px)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* (and yet nothing simply cuts: screens, banners, bars, new messages and the lock dissolve in and out instead of moving;
   a spinner still turns, slowly) */
@media (prefers-reduced-motion:reduce){
  .view.nav-push,.view.nav-pop,.view.nav-tab-r,.view.nav-tab-l,.view.nav-fade,.compose.nav-push,.toast,.lockscreen,.newpill,.b.fresh,.fly.fresh,.tab .badge.new,
  .replybar:not([hidden]),.attach:not([hidden]),.compose .note:not([hidden]),.wxplan:not([hidden]),.recbar:not([hidden]),.compose .crow.back,.ferr:not([hidden]){animation:rm-in .18s ease both!important}
  .toast.out,.lockscreen.out,.newpill.out,.tab .badge.out{animation:rm-out .15s ease forwards!important}
  .offline,.offline.on{transform:translate(-50%,0);transition:opacity .2s ease!important}
  .send.busy::after{animation:spin 1.2s linear infinite!important}
}
@keyframes rm-in{from{opacity:0}}
@keyframes rm-out{to{opacity:0}}

/* ---------- pigeon kinds: green standard, red swift, black turbo, gold rocket ---------- */
.pg{flex:none;display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;color:#fff;vertical-align:-.35em;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--pg),#fff 22%),var(--pg) 70%);box-shadow:inset 0 -.06em .12em rgba(0,0,0,.12)}
/* the bird is drawn a little high in its box: nudge it to the optical centre */
.pg svg{font-size:1.1em;transform:translate(-.02em,.07em);filter:drop-shadow(0 .03em .04em rgba(0,0,0,.18))}
.pg.turbo{box-shadow:inset 0 0 0 1px var(--p-badge-ring,var(--p-ring)),inset 0 -.06em .12em rgba(0,0,0,.2)}   /* black needs a rim in dark mode; inside, so it never clips */
.pg.standard{--pg:var(--p-standard)}.pg.swift{--pg:var(--p-swift)}.pg.turbo{--pg:var(--p-turbo)}.pg.dumb{--pg:var(--p-dumb)}.pg.rocket{--pg:var(--p-rocket)}
/* gold: a brighter sheen than the others */
.pg.rocket,.tile.rocket{background:linear-gradient(160deg,#fbe38a,var(--p-rocket) 55%,#b9850d)}
.tile.standard{background:var(--p-standard)}.tile.swift{background:var(--p-swift)}.tile.turbo{background:var(--p-turbo);box-shadow:0 0 0 1px var(--p-ring)}.tile.rocket{background:var(--p-rocket)}
.dots.swift i:not(.e){background:var(--p-swift)}.dots.rocket i:not(.e){background:linear-gradient(160deg,#fbe38a,var(--p-rocket) 60%)}.dots.turbo i:not(.e){background:var(--p-turbo);box-shadow:inset 0 0 0 1px var(--p-dot-ring,var(--p-ring))}   /* rim inside the dot, so neighbours never touch */
.mapcard .big .pg svg,.mrow .mprev .pg svg{color:#fff;font-size:1.1em;animation:none;margin:0;vertical-align:0}
.mrow .mprev .pg{font-size:12px;vertical-align:0}
.meta .fl .pg{font-size:10px;margin-right:1px}
.mapcard .big .pg{font-size:16px}

/* ---------- polish ---------- */
/* in-flight labels take their pigeon's colour (turbo reads as plain text) */
.meta .fl.standard{color:var(--p-standard-t)}.meta .fl.swift{color:var(--p-swift-t)}.meta .fl.turbo{color:var(--label)}.meta .fl.dumb{color:var(--p-dumb-t)}.meta .fl.rocket{color:var(--p-rocket-text)}
/* friend requests: handle in the small grey line, like every other list */
.reqrow .csub{font-size:13px;line-height:18px;color:var(--label-2)}
/* menus and confirm cards: more solid glass, so what's behind doesn't show through the words */
.menu-pop,.asheet .grp,.asheet .cancel{-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8)}
.note{text-wrap:balance}
/* long labels stay on one line beside a value */
.cell.has-icon:has(> .val) .ctext > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell .csub .mono{font-family:var(--mono);font-size:13px;letter-spacing:.3px}
@media (max-width:360px){
  .cell .val .mono,.cell .val.mono{font-size:13px;letter-spacing:-.3px}
  .me-cell .name{font-size:17px}
}
/* short phones: the welcome screen fits without scrolling */
@media (max-height:640px){
  .welcome{padding-top:22px}
  .welcome .appicon{width:72px;height:72px;border-radius:19px;font-size:44px}
  .welcome h1{margin-top:12px;font-size:30px;line-height:36px}
  .feats{margin-top:18px;gap:12px}
  .feats span{font-size:14px;line-height:18px}
}
/* "End-to-end encrypted" with a green lock, under the privacy settings */
.e2e{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 4px;font-size:13px;font-weight:500;color:var(--label-2)}
.e2e svg{font-size:15px;color:var(--green-t);stroke-width:2.2}

/* ---------- Pigeon Death: a pigeon lost on the way ---------- */
.lostp{display:inline-flex;align-items:center;gap:4px;color:var(--red)}
.lostp .ico{font-size:1.05em;flex:none}
.mapcard .big .lostp .ico{font-size:22px}
.lostnote{align-self:center;display:flex;align-items:center;gap:6px;margin:6px auto;padding:7px 14px;border-radius:999px;background:var(--cell);color:var(--label-2);font-size:13px;line-height:18px;max-width:86%;text-align:center}
.lostnote .ico{flex:none;font-size:15px;color:var(--red)}
.b.me.lost{background:var(--fill);color:var(--label-2);box-shadow:inset 0 0 0 .5px var(--sep)}
.meta .fl.lostm{color:var(--red);display:inline-flex;align-items:center;gap:3px}
.meta .fl.lostm .ico{font-size:12px}


/* ---------- groups ---------- */
/* a group's picture: two members' faces, overlapping */
.gav{flex:none;position:relative;width:44px;height:44px}
.gav .av{position:absolute;width:70%;height:70%;font-size:.36em;box-shadow:0 0 0 2px var(--gav-ring,var(--bg))}
.gav .av:first-child{left:0;top:0}
.gav .av:first-child:not(:has(img)){padding:0 26% 26% 0}   /* its initial sits clear of the face in front */
.gav .av:last-child{right:0;bottom:0}
.gav.s{width:36px;height:36px;font-size:36px}
.gav{font-size:44px}
.gav.m{width:54px;height:54px;font-size:54px}
.gav.xl{width:104px;height:104px;font-size:104px}
.gav.xl .av{box-shadow:0 0 0 3px var(--gav-ring,var(--bg))}
.sheet .gav,.cell .gav{--gav-ring:var(--cell)}
.chatnav .gav{--gav-ring:var(--bar,var(--bg))}
/* who sent it, over each run of their bubbles */
.who{display:flex;align-items:center;gap:6px;margin:12px 0 2px 2px;font-size:12px;font-weight:600;color:var(--label-2)}
.who .av.xs{width:20px;height:20px;font-size:9px}
/* how far your flock has got: tap for the map */
.meta .fl.flock{border:0;background:none;padding:0;font:inherit;display:inline-flex;align-items:center;gap:3px;cursor:pointer}
.meta .fl.flock.done{color:var(--label-2)}
.meta .fl.flock .ico{font-size:11px;color:var(--red)}
/* choosing people */
.pickrow .tickbox{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--label-3);color:transparent;font-size:14px;transition:background .2s,box-shadow .2s}
.pickrow[aria-checked="true"] .tickbox{background:var(--tint-fill);box-shadow:none;color:#fff;animation:pop .35s var(--bouncy)}
.pickrow .tickbox .ico{stroke-width:3.2}
/* the map card for a flock: each member and their pigeon */
.mapcard .frows{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:150px;overflow:auto}
.mapcard .frow{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--label)}
.mapcard .frow .av.xs{width:24px;height:24px;font-size:10px}
.mapcard .frow .one{flex:1;min-width:0}
.mapcard .frow .hid{color:var(--label-2);font-size:12px}
.mapcard .frow b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--label-2)}
.mapcard .frow.flying b{color:var(--orange-t)}

/* ---------- GIFs ---------- */
.gifsearch{margin:6px 16px 12px}
.gifgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px;align-items:start}
.gifgrid .empty{grid-column:1/-1}
.gifcol{display:flex;flex-direction:column;gap:6px;min-width:0}
.giftile{display:block;width:100%;aspect-ratio:var(--ar,1);max-width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--fill);position:relative;transition:transform .35s var(--snappy)}
.giftile img{display:block;width:100%;height:100%;object-fit:cover}
.giftile img.in{animation:fade .25s ease}         /* (a preview fading in as it arrives) */
.giftile:active{transform:scale(.97)}
.giftile.busy::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 45%,transparent);animation:sheen 1.1s ease-in-out infinite}
@keyframes sheen{50%{opacity:.4}}
.gifmore{display:flex;justify-content:center;padding:14px 16px 0}
.giphy{margin:14px 24px calc(18px + env(safe-area-inset-bottom,0px));font-size:12px;line-height:16px;color:var(--label-2);text-align:center}
/* a GIF shows whole, at its own shape (they often have words to the edges) */
.b.pic img.gif{aspect-ratio:auto;height:auto;max-height:380px;object-fit:contain}
/* a pigeon called back by its sender */
.lostnote.homing .ico{color:var(--tint)}
.homing{display:inline-flex;align-items:center;gap:4px;color:var(--label-2)}
.homing .ico{flex:none;font-size:1.05em}
.b.me[data-act=flymenu]{cursor:pointer}
.meta .fl.flock .homing .ico{color:var(--tint)}
/* the wind a pigeon met */
.mapcard .wind{display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:500;color:var(--label-2)}
.mapcard .wind .ico{font-size:15px}
.mapcard .wind.tail{color:var(--green-t)}
.mapcard .wind.head{color:var(--orange-t)}
/* what the weather did: late (orange) or early (green), and the worst of it on the way */
.mapcard .wx{display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;text-align:center;text-wrap:balance}
.mapcard .wx .ico{font-size:16px;flex:none}
.mapcard .wx.late{color:var(--orange-t)}
.mapcard .wx.early{color:var(--green-t)}
.fly .wxs{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;margin-top:4px}
.fly .wxs .ico{font-size:15px;flex:none}
.fly .wxs.late{color:var(--orange-t)}
.fly .wxs.early{color:var(--green-t)}

/* ---------- replies and reactions ---------- */
.b[data-act=msgmenu]{cursor:pointer}
.b.flash{animation:flash 1.1s var(--snappy)}
@keyframes flash{30%{transform:scale(1.04);filter:brightness(1.12)}}
/* the quoted message, at the top of a reply */
.quote{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;margin:1px 0 6px;padding:6px 10px;border:0;border-left:3px solid var(--tint);border-radius:10px;background:var(--fill);color:inherit;font:inherit;text-align:left;cursor:pointer}
.quote b{font-size:12px;font-weight:600;color:var(--tint)}
.quote span{font-size:14px;line-height:18px;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.b.me .quote{background:rgba(255,255,255,.18);border-left-color:#fff}
.b.me .quote b{color:#fff}
/* reactions, tucked under the message they're on */
.reacts{display:flex;flex-wrap:wrap;gap:4px;margin:-4px 10px 2px;align-self:flex-start;position:relative;z-index:1}
.reacts.me{align-self:flex-end}
.rpill{display:inline-flex;align-items:center;gap:3px;min-height:24px;padding:1px 8px;border-radius:999px;background:var(--cell);box-shadow:0 0 0 2px var(--bg),0 2px 6px rgba(0,0,0,.08);font-size:14px;line-height:1}
.rpill b{font-size:11px;font-weight:600;color:var(--label-2)}
.rpill.mine{background:color-mix(in srgb,var(--tint) 16%,var(--cell))}
.rpill.flying{opacity:.55}
/* the reaction row on top of the message menu */
.rrow{display:flex;justify-content:space-between;gap:2px;padding:8px 8px 6px;border-bottom:.5px solid var(--sep)}
.rrow button{width:40px;height:40px;border:0;border-radius:50%;background:none;font-size:24px;line-height:1;display:grid;place-items:center;transition:transform .3s var(--bouncy)}
.rrow button:active{transform:scale(1.25)}
.rrow button.on{background:color-mix(in srgb,var(--tint) 18%,transparent)}
/* replying to: above the message box */
.replybar{display:flex;align-items:center;gap:10px;margin:0 6px 6px;padding:8px 8px 8px 14px;border-radius:20px;background:var(--glass-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 .5px var(--glass-edge);font-size:14px}
.replybar>.ico{flex:none;color:var(--tint);font-size:18px}
.replybar .rtext{flex:1;min-width:0;display:flex;flex-direction:column}
.replybar .rtext b{font-size:12px;font-weight:600;color:var(--tint)}
.replybar .rtext span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--label-2)}
.replybar button{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--label-2)}

/* ---------- flight log ---------- */
.loghero{display:flex;align-items:center;gap:18px;margin:8px 20px 18px}
.globe{flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--tint) calc(var(--lap,0) * 360deg),var(--fill) 0);position:relative}
.globe::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--bg)}
.globe span{position:relative;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.loghero .ltext{display:flex;flex-direction:column;min-width:0}
.loghero .ltext b{font-size:30px;line-height:34px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.loghero .ltext span{color:var(--label-2);font-size:15px}
.loghero .ltext small{margin-top:4px;color:var(--label-2);font-size:13px;line-height:17px}
.lstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px}
.lstat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:20px;background:var(--cell);min-width:0}
.lstat b{font-size:22px;line-height:26px;font-weight:700;font-variant-numeric:tabular-nums}
.lstat span{font-size:13px;color:var(--label-2)}
.lstat small{font-size:12px;line-height:15px;color:var(--label-2)}
.kindrow .ctext{gap:6px}
.kbar{display:block;height:5px;border-radius:3px;width:calc(var(--w,0) * 100%);min-width:6px;background:var(--p-standard)}
.kbar.swift{background:var(--p-swift)}.kbar.turbo{background:var(--label)}.kbar.rocket{background:var(--p-rocket)}.kbar.dumb{background:var(--p-dumb)}
.tile.pink{background:linear-gradient(180deg,#ff7aa2,#e8457a)}
/* achievements */
.ghead .gcount{float:right;font-weight:500;color:var(--label-2);font-size:13px}
.badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 16px}
.badge2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 8px;border-radius:20px;background:var(--cell);min-width:0}
.badge2 .bico{width:44px;height:44px;border-radius:50%;font-size:22px;margin-bottom:4px}
.badge2:not(.earned) .bico{opacity:.45}
.badge2 b{font-size:13px;line-height:16px;font-weight:600}
.badge2:not(.earned) b{color:var(--label-2)}
.badge2 small{font-size:11px;line-height:14px;color:var(--label-2)}
.badge2 .newb{display:inline-block;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;padding:1px 5px;border-radius:999px;background:var(--tint);color:#fff;vertical-align:1px}
.badge2 .bprog{display:block;width:80%;height:4px;margin-top:5px;border-radius:2px;background:linear-gradient(90deg,var(--tint) calc(var(--w,0) * 100%),var(--fill) 0)}
.badge2 .bnum{font-variant-numeric:tabular-nums;color:var(--label-2)}
.meta{align-items:center}
/* scheduled pigeons: waiting in your loft */
.b.me.waiting{background:none;color:var(--tint);border:1.5px dashed color-mix(in srgb,var(--tint) 60%,transparent)}
.b.pic.waiting{opacity:.6}
.meta .fl.flock.sched{color:var(--tint)}
.meta .fl.flock.sched .ico{font-size:13px;color:inherit}
.cell.dim{opacity:.45}
.cell.on .val{color:var(--tint);font-weight:600}
.fcell.schedat{padding-right:12px}
.fcell.schedat .ctext{flex:none}
.fcell.schedat input{flex:1;min-width:0;text-align:right;padding-left:10px;color:var(--tint);font-size:16px}
/* rare pigeons: a ring (and a glow or tail) around the usual colour */
.pg[class*=" sk-"]{position:relative;isolation:isolate;margin:0 .12em}
/* small (in a line of text): a crisp ring only, so nothing blurs or gets clipped */
.pg.sk-golden{box-shadow:0 0 0 .1em #f5c542,inset 0 -.06em .12em rgba(0,0,0,.12)}
.pg.sk-midnight{box-shadow:0 0 0 .08em #1b2559,0 0 0 .15em #8fa2ff,inset 0 -.06em .12em rgba(0,0,0,.12)}
.pg.sk-storm{outline:.09em dashed #8ea3b8;outline-offset:.05em}
.pg.sk-ember{box-shadow:0 0 0 .09em #ff8a00,inset 0 -.06em .12em rgba(0,0,0,.12)}
.pg.sk-comet{box-shadow:0 0 0 .09em #7ad7ff,inset 0 -.06em .12em rgba(0,0,0,.12)}
.pg.sk-rainbow::before{content:"";position:absolute;inset:-.13em;border-radius:50%;background:conic-gradient(#ff3b30,#ff9500,#ffcc00,#34c759,#5ac8fa,#007aff,#af52de,#ff3b30);-webkit-mask:radial-gradient(closest-side,transparent 85%,#000 87%);mask:radial-gradient(closest-side,transparent 85%,#000 87%)}
/* big (the Flight Log, a pigeon on its way, the map card): the full look, glow, tail and star */
:is(.sbig,.mapcard .big) .pg.sk-golden{box-shadow:0 0 0 .1em #f5c542,0 0 .4em .06em rgba(245,197,66,.75),inset 0 -.06em .12em rgba(0,0,0,.12)}
:is(.sbig,.mapcard .big) .pg.sk-midnight::after{content:"";position:absolute;top:-.12em;right:-.1em;width:.32em;height:.32em;border-radius:50%;background:radial-gradient(circle,#fff 30%,rgba(143,162,255,0) 70%)}
:is(.sbig,.mapcard .big) .pg.sk-ember{box-shadow:0 0 0 .09em #ff8a00,0 0 .45em .1em rgba(255,90,0,.6),inset 0 -.06em .12em rgba(0,0,0,.12)}
:is(.sbig,.mapcard .big) .pg.sk-comet{box-shadow:0 0 0 .09em #7ad7ff,.45em .08em .4em -.06em rgba(122,215,255,.85),inset 0 -.06em .12em rgba(0,0,0,.12)}
/* a ring needs a little room where lines clip */
.mprev .pg[class*=" sk-"]{margin:.1em .2em .1em .12em}
.skin2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:12px 8px;border:0;border-radius:20px;background:var(--cell);min-width:0;color:var(--label);font:inherit;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s,transform .35s var(--snappy)}
.skin2.on{box-shadow:inset 0 0 0 2px var(--tint)}
.skin2:active:not(:disabled){transform:scale(.96)}
.skin2.locked .sbig{opacity:.35;filter:grayscale(1)}
.skin2 .sbig{font-size:28px;line-height:1;margin:4px 0 8px}
.skin2 b{font-size:13px;line-height:16px;font-weight:600}
.skin2 small{font-size:11.5px;line-height:14px;color:var(--label-2)}
.skin2.on small{color:var(--tint)}
/* The Skies: each row opens that chat */
.mapcard .skyrow{width:100%;border:0;background:none;padding:2px 0;font:inherit;text-align:left;cursor:pointer}
.mapcard .skyrow b{color:var(--orange-t)}
.mapcard .skyrow .pg{flex:none;font-size:13px;vertical-align:0;margin:0 2px}   /* its own column beside the name: centred, never clipped */
.mapcard .skyrow .pg svg{color:#fff;margin:0;vertical-align:0}
.mapcard .big > .ico{color:var(--tint)}
/* stopovers: the card for the friend it rests with, and their line under the message */
.stopcard{align-self:stretch;margin:8px 4px;padding:12px 14px;border-radius:20px;background:var(--cell);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tint) 35%,transparent);display:flex;flex-direction:column;gap:8px;font-size:15px}
.stopcard .st1{display:flex;align-items:center;gap:8px;color:var(--label-2);font-size:13px;font-weight:500}
.stopcard .stext{margin:0;font-size:16px;line-height:1.35;color:var(--label)}
.stopcard .stext .hid{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:13px;color:var(--label-2)}
.stopcard .smine{margin:0;font-size:14px;color:var(--label-2)}
.stopcard .smine b{display:block;font-size:12px;color:var(--tint);font-weight:600}
.stopcard .btn{align-self:flex-start;gap:6px}
.vianote{align-self:flex-start;max-width:78%;margin:-2px 0 4px 12px;padding:6px 12px;border-left:3px solid var(--tint);font-size:14px;color:var(--label);display:flex;flex-direction:column}
.vianote b{font-size:12px;color:var(--tint);font-weight:600}
.skin2.on .sbig{animation:pop .4s var(--bouncy)}
/* the globe / flat map switch */
.mapctl .globebtn[aria-pressed="true"]{color:var(--tint)}
/* the wind map: its switch, its key, and the bubble where you tap */
.mapctl .layerbtn[aria-pressed="true"]{color:var(--tint)}
.windtip{position:absolute;z-index:2;width:68px;height:68px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cell);color:var(--tint);box-shadow:0 6px 20px rgba(0,0,0,.18);pointer-events:none;line-height:1}
.windtip b{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0}
.windtip small{font-size:10px;font-weight:600;color:var(--label-2);text-transform:uppercase}
.windtip.pop{animation:pop .35s var(--bouncy)}
/* tap the pigeon: what it's doing */
.birdtip{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:18px;font-size:13px;color:var(--label-2);pointer-events:none;max-width:240px}
.birdtip b{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--label)}
.birdtip .pg{font-size:14px}
.birdtip .eta{color:var(--orange-t);font-weight:600;font-variant-numeric:tabular-nums}
.birdtip.pop{animation:pop .35s var(--bouncy)}
.birdtip.out,.windtip.out{animation:fade-out .2s ease forwards}
/* the map card: where it is right now */
.mapcard .over{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13px;font-weight:600;color:var(--tint)}
.mapcard .over .ico{font-size:13px}
.mapcard .lands{text-align:center;font-size:13px;font-weight:500;color:var(--label-2);font-variant-numeric:tabular-nums;margin-top:2px}
/* sign-up: step dots, live checks, the first screen */
.gfoot.ok{color:var(--green-t)}
.gfoot.ok .ico,.gfoot.bad .ico{vertical-align:-2px;margin-right:4px}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--tint);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.locfirst{margin-top:18px}
.locfirst + .group{margin-top:14px}
.btn.done{background:var(--green);animation:pop .4s var(--bouncy)}
.btn.done .ico{margin-right:6px}
.locfirst .btn .ico,.firstrun .btn .ico{margin-right:6px}
.firstrun{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 24px 20px;gap:10px}
.firstrun .appicon{width:72px;height:72px;font-size:40px}
.firstrun h2{margin:6px 0 0;font-size:24px;font-weight:700}
.firstrun p{margin:0;color:var(--label-2);font-size:15px;line-height:1.4;max-width:300px}
.firstrun .stack{width:100%;max-width:320px;margin-top:10px}
.firstrun .me{font-size:13px;margin-top:6px}
/* Add Friend: the live result, and your code. The result folds open under the field (and the hint under it folds
   away), and stays put as you type: a spinner fades in over the last answer until the new one comes (app.js addLookup) */
.addres{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .35s var(--nav),opacity .25s,visibility 0s .35s}
.addres.has{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .35s var(--nav),opacity .25s .05s,visibility 0s}
.addres > *{min-height:0;overflow:hidden}
.addres .group{margin-top:10px}
.addrow{gap:12px}
.addrow .addav{position:relative;flex:none;display:grid;place-items:center}
.addrow .addav .av{transition:opacity .2s}
.addrow .spin{position:absolute;width:22px;height:22px;border-width:2.5px;opacity:0;transition:opacity .2s}
.addrow.looking .addav .av{opacity:.35}
.addrow.looking .spin{opacity:1}
.addrow.looking .btn{opacity:0;pointer-events:none}
.addrow.dim .av{opacity:.5}
.addrow .btn{flex:none}
.mycode{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:0 16px;padding:20px 16px 18px;border-radius:24px;background:var(--cell)}
.mycode .qrbox{width:188px;height:188px;padding:8px;border-radius:18px;background:#fff;box-shadow:0 1px 0 var(--sep)}
.mycode .qrbox svg{display:block;width:100%;height:100%}
.mycode b{font-size:17px;font-weight:600;margin-top:6px}
.mycode span{font-size:13px;color:var(--label-2);max-width:260px}
.mycode .row2{display:flex;gap:10px;margin-top:8px}
.mycode .row2 .btn .ico{margin-right:5px}
.add-msg{max-height:60px;transition:max-height .35s var(--nav),margin-top .35s var(--nav),opacity .25s,visibility 0s}
.addres.has + .add-msg:not(.bad){max-height:0;margin-top:0;opacity:0;overflow:hidden;visibility:hidden;transition:max-height .35s var(--nav),margin-top .35s var(--nav),opacity .2s,visibility 0s .35s}
/* Add Friend: Add folds into a circle, a pigeon flies off, then a green tick */
.addrow .btn{transition:width .35s var(--snappy),padding .35s var(--snappy),background-color .3s,box-shadow .3s,opacity .2s,transform .45s var(--snappy)}
.addrow .btn.sending,.addrow .btn.sent{width:36px;padding:0;overflow:visible;opacity:1}
.addrow .btn.sending:disabled,.addrow .btn.sent:disabled{opacity:1}
.btn .flyb{display:grid;place-items:center;font-size:18px;color:var(--on-tint);animation:flyoff .7s cubic-bezier(.45,0,.55,1) .1s both}
.btn .flyb svg{animation:flap .14s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes flyoff{0%{transform:translate(0,0) scale(1);opacity:1}35%{transform:translate(3px,-3px) rotate(-6deg) scale(1.05)}100%{transform:translate(34px,-42px) rotate(-18deg) scale(.55);opacity:0}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.72)}}
.addrow .btn.sent{background:var(--green);box-shadow:0 6px 16px color-mix(in srgb,var(--green) 35%,transparent);animation:pop .4s var(--bouncy)}
.addrow .btn.sent .ico{font-size:18px;stroke-width:3;color:#fff}
.nbtn.pulsing{animation:pulse .7s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(.9);opacity:.7}}
@media (prefers-reduced-motion: reduce){.btn .flyb,.btn .flyb svg,.addrow .btn.sent,.nbtn.pulsing{animation:none}}
/* pull to refresh: a pigeon drops in above the list */
.ptr{position:absolute;left:50%;top:0;z-index:3;margin-left:-19px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--cell);box-shadow:0 4px 14px rgba(0,0,0,.14),inset 0 0 0 .5px var(--sep);opacity:0;transform:translateY(-40px);pointer-events:none;color:var(--label-3)}
.ptr .ptrb{display:grid;place-items:center;font-size:22px;transform:rotate(var(--r,0deg))}
.ptr .ptrb svg{transform:scaleY(var(--w,.35));transform-origin:50% 62%;transition:transform .08s}
.ptr.ready,.ptr.busy{color:var(--tint)}
.ptr.ready .ptrb{animation:pop .3s var(--bouncy)}
.ptr.busy .ptrb svg{animation:flap .16s ease-in-out infinite alternate}
.ptr-anim{transition:transform .38s var(--snappy),opacity .3s}
@media (prefers-reduced-motion: reduce){.ptr.busy .ptrb svg{animation:none}}
/* the hidden switch flipped for iPhone haptics */
.hapt{position:fixed;left:-200px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
/* In the air: every pigeon flying to or from you, as cards at the top of Messages */
.air{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s cubic-bezier(.2,.9,.3,1),opacity .35s}
.air.has{grid-template-rows:1fr;opacity:1}
.air.still{transition:none}
.air.q{display:none}
.airin{min-height:0;overflow:hidden}
.airhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 22px 6px}
.airhead b{font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2)}
.airhead .airnext{font-size:13px;color:var(--label-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rail{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:4px 16px 14px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.acard{--f:0;position:relative;flex:none;width:41%;min-width:138px;max-width:190px;scroll-snap-align:start;display:flex;flex-direction:column;gap:5px;padding:12px 13px 11px;border:0;border-radius:22px;
  background:var(--cell);color:var(--label);text-align:left;font:inherit;cursor:pointer;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px -10px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.3,1.5,.5,1),background-color .45s,box-shadow .45s,width .5s cubic-bezier(.2,.9,.3,1),min-width .5s cubic-bezier(.2,.9,.3,1),padding .5s cubic-bezier(.2,.9,.3,1),margin .5s cubic-bezier(.2,.9,.3,1),opacity .4s}
.acard:active{transform:scale(.95);transition-duration:.12s}
.acard .awho{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;font-weight:600}
.acard .awho .pg{font-size:13px;animation:bob 1.6s ease-in-out infinite}
.acard .aeta{position:relative;height:28px;overflow:hidden}
.acard .acd,.acard .aok{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;gap:4px;font-size:22px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.acard .acd{color:var(--orange-t)}
.acard .aok{color:var(--green-t);transform:translateY(110%);opacity:0}
.acard .aok .ico{font-size:22px;stroke-width:3;stroke-dasharray:24;stroke-dashoffset:24}
.acard.soon .acd{color:var(--green-t)}
/* the route: flown in blue, the rest marching on ahead, the pigeon flapping along it */
.acard .atrack{position:relative;height:16px;margin:1px 2px 0;container-type:inline-size}
.acard .atrack::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;border-radius:1px;opacity:.9;
  background-image:linear-gradient(90deg,var(--label-3) 55%,transparent 0);background-size:7px 2px;animation:air-march .9s linear infinite}
.acard .atrack i{position:absolute;left:0;top:7px;height:2px;border-radius:1px;width:100%;transform:scaleX(var(--f));transform-origin:0 50%;background:var(--tint);transition:transform 1s linear}
.acard .abird{position:absolute;top:0;left:0;width:16px;height:16px;margin-left:-9px;color:var(--tint);transition:transform 1s linear;transform:translateX(calc(var(--f) * 100cqw)) scaleX(-1)}   /* facing the way it flies */
.acard .abird svg{width:16px;height:16px;fill:currentColor;transform-origin:50% 62%;animation:air-flap .5s ease-in-out infinite alternate;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.acard.final .abird svg{animation-duration:.22s}
.acard .asub{display:block;font-size:12px;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acard .asub.late{color:var(--orange-t);font-weight:600}
.acard .asub.early{color:var(--green-t);font-weight:600}
@keyframes air-march{to{background-position:-7px 0}}
@keyframes air-flap{from{transform:scaleY(1) rotate(-2deg)}to{transform:scaleY(.7) rotate(3deg)}}
/* a group: every pigeon a dot on one line, green once it lands */
.acard .awho .gav{flex:none;width:22px;height:22px;font-size:22px;--gav-ring:var(--cell)}
.acard .awho .gav .av{box-shadow:0 0 0 1.5px var(--cell)}
.acard .atrack.dots::before{animation:none}
.adot{position:absolute;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--dot);
  box-shadow:0 0 0 2px var(--cell),inset 0 0 0 1px var(--p-dot-ring,transparent);transition:left 1s linear,background-color .35s}
.adot.standard{--dot:var(--p-standard)}.adot.swift{--dot:var(--p-swift)}.adot.turbo{--dot:var(--p-turbo)}.adot.rocket{--dot:var(--p-rocket)}.adot.dumb{--dot:var(--p-dumb)}
.adot.done{--dot:var(--green)}.adot.lost{--dot:var(--label-3)}
.adot.pop{animation:adot-pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes adot-pop{0%{transform:scale(1)}40%{transform:scale(1.9)}100%{transform:scale(1)}}
.acard.enter .adot{animation:adot-in .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i, 0) * 70ms + .25s) both}
@keyframes adot-in{from{transform:scale(0)}}
/* nearly there: a soft green glow breathes around it */
.acard.soon{animation:air-glow 2.4s ease-in-out infinite}
@keyframes air-glow{50%{box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 40%,transparent),0 8px 22px -8px color-mix(in srgb,var(--green) 55%,transparent)}}
/* arriving: springs in from the right, one after another */
.acard.enter{animation:acard-in .62s cubic-bezier(.3,1.35,.5,1) calc(var(--i, 0) * 70ms) both}
.acard.enter .awho .pg{animation:air-swoop .8s cubic-bezier(.3,1.3,.5,1) calc(var(--i, 0) * 70ms + .1s) both,bob 1.6s ease-in-out 1s infinite}
@keyframes acard-in{from{opacity:0;transform:translateX(42px) scale(.9) rotate(2deg)}}
@keyframes air-swoop{from{opacity:0;transform:translate(-18px,-12px) rotate(-20deg) scale(.6)}}
/* landed: the pigeon hops onto the end, a ripple, the tick draws itself */
.acard.landed{background:color-mix(in srgb,var(--green) 13%,var(--cell));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--green) 45%,transparent),0 8px 22px -10px color-mix(in srgb,var(--green) 60%,transparent)}
.acard.landed .acd{transform:translateY(-110%);opacity:0}
.acard.landed .aok{transform:none;opacity:1}
.acard.landed .aok .ico{animation:air-tick .45s ease-out .25s forwards}
.acard.landed .atrack i{transform:none;background:var(--green)}
.acard.landed .atrack::before{animation:none}
.acard.landed .abird{transform:translateX(100cqw) scaleX(-1);color:var(--green-t)}
.acard.landed .abird svg{animation:air-hop .7s cubic-bezier(.3,1.4,.5,1) both}
.acard.landed::after{content:"";position:absolute;right:13px;bottom:24px;width:14px;height:14px;margin:-7px -7px 0 0;border-radius:50%;background:var(--green);opacity:0;animation:air-ripple .9s ease-out .15s}
@keyframes air-tick{to{stroke-dashoffset:0}}
@keyframes air-hop{0%{transform:translateY(0)}35%{transform:translateY(-9px) rotate(-12deg) scaleY(.75)}70%{transform:translateY(1px) scaleY(.9)}100%{transform:none}}
@keyframes air-ripple{from{opacity:.45;transform:scale(1)}to{opacity:0;transform:scale(9)}}
.acard.landed.settled .aok .ico,.acard.landed.settled .abird svg,.acard.landed.settled::after{animation:none}
.acard.landed.settled .aok .ico{stroke-dashoffset:0}
/* called back or lost: it tumbles out of the sky */
.acard.lost{opacity:.6;filter:grayscale(1)}
.acard.lost .abird svg{animation:air-fall .7s ease-in forwards}
@keyframes air-fall{to{transform:translateY(16px) rotate(70deg);opacity:0}}
/* folding away: the cards beside it close the gap */
.acard.out{width:0;min-width:0;padding-inline:0;margin-right:-10px;opacity:0;transform:scale(.85)}
@media (prefers-reduced-motion: reduce){
  .air,.acard,.acard .acd,.acard .aok,.acard .atrack i,.acard .abird{transition:none}
  .acard.enter,.acard.soon,.acard.enter .awho .pg,.acard .awho .pg,.acard .abird svg,.acard .atrack::before,.acard.landed::after{animation:none}
  .acard.landed .aok .ico{animation:none;stroke-dashoffset:0}
  .adot,.adot.pop,.acard.enter .adot{transition:none;animation:none}
}
/* before the first sync, with nothing kept on this phone yet: placeholder rows that shimmer */
.mlist.skel .mrow{pointer-events:none}
.sk{display:block;border-radius:999px;background:linear-gradient(90deg,var(--fill) 30%,var(--fill-2) 50%,var(--fill) 70%);background-size:300% 100%;animation:sk-shine 1.4s ease-in-out infinite}
.sk.av{flex:none;width:54px;height:54px;border-radius:50%}
.sk.l1{width:38%;height:14px;margin-bottom:9px}
.sk.l2{width:72%;height:12px}
.mlist.skel .mrow:nth-child(2) .l2{width:58%}.mlist.skel .mrow:nth-child(3) .l2{width:66%}.mlist.skel .mrow:nth-child(4) .l2{width:48%}
@keyframes sk-shine{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion: reduce){.sk{animation:none}}
/* who has it: a dot for each member under your message to a group */
.whodots{display:inline-flex;align-items:center;gap:3px;margin-right:6px;vertical-align:-1px}
.whodots i{width:7px;height:7px;border-radius:50%;background:var(--label-3);transition:background-color .4s,transform .4s}
.whodots i.w-fly{background:transparent;box-shadow:inset 0 0 0 1.5px var(--label-3)}
.whodots i.w-landed{background:var(--green)}
.whodots i.w-read{background:var(--tint)}
.whodots i.w-lost{background:var(--red)}
.whodots i.w-back{background:var(--label-3);opacity:.5}
.whodots b{font-size:11px;font-weight:600;color:var(--label-2);margin-left:2px}
.meta .fl.flock .whodots{margin-right:5px}
.meta button.fl.lostm{border:0;background:none;font:inherit;color:inherit;padding:0;cursor:pointer}
/* the sheet */
.whohead{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px 16px 16px;text-align:center}
.whohead .pg{font-size:26px;margin-bottom:4px}
.whohead b{font-size:20px;font-weight:700}
.whohead > span:not(.whodots){font-size:14px;color:var(--label-2);font-variant-numeric:tabular-nums}
.whohead .whodots{margin:8px 0 0;gap:5px}
.whohead .whodots i{width:10px;height:10px}
.whorow{cursor:default}
.whorow .who-av{position:relative;flex:none;border-radius:50%}
.whorow .who-av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2px var(--cell);background:var(--label-3)}
.whorow .who-av.w-fly::after{background:var(--cell);box-shadow:0 0 0 2px var(--cell),inset 0 0 0 2px var(--label-3)}
.whorow .who-av.w-landed::after{background:var(--green)}
.whorow .who-av.w-read::after{background:var(--tint)}
.whorow .who-av.w-lost::after{background:var(--red)}
.whorow .who-av.w-back::after{opacity:.5}
.ws{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.ws .ico{font-size:15px;stroke-width:2.4}
.ws.w-read{color:var(--tint)}.ws.w-landed{color:var(--green-t)}.ws.w-fly{color:var(--orange-t)}.ws.w-lost{color:var(--red)}.ws.w-back{color:var(--label-2)}
/* a pigeon on its way to you: one slim line, not a big card */
.frr:active{transform:scale(.97)}
.frr b{flex:none;color:var(--orange-t);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.ctrack{position:relative;flex:1;min-width:36px;height:12px;container-type:inline-size}
.ctrack::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background-image:linear-gradient(90deg,var(--label-3) 55%,transparent 0);background-size:6px 2px;animation:air-march .9s linear infinite}
.ctrack i{position:absolute;left:0;top:5px;height:2px;border-radius:1px;background:var(--tint);width:100%;transform:scaleX(var(--f,0));transform-origin:0 50%;transition:transform 1s linear}
.ctrack .cb{position:absolute;left:-7px;top:-1px;width:13px;height:13px;transform:translateX(calc(var(--f,0) * 100cqw));transition:transform 1s linear}
.ctrack .cbird{display:block;width:13px;height:13px;fill:var(--tint);transform-origin:50% 62%;animation:air-flap .5s ease-in-out infinite alternate}
/* several on their way at once */
.flyrun{align-self:flex-start;width:min(310px,86%);margin-top:4px;padding:10px 12px 4px;border-radius:22px;background:var(--bubble-in);display:flex;flex-direction:column}
.flyrun .frh{display:flex;align-items:center;gap:8px;padding:0 2px 6px;font-size:15px}
.flyrun .frh b{font-weight:600;white-space:nowrap}
.flyrun .frh small{margin-left:auto;font-size:13px;color:var(--label-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.flyrun .stack{display:flex}.flyrun .stack .pg{font-size:13px;margin-left:-6px;box-shadow:0 0 0 2px var(--bubble-in)}.flyrun .stack .pg:first-child{margin-left:0}
.frr{display:flex;align-items:center;gap:8px;width:100%;padding:8px 2px;border:0;background:none;color:var(--label);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.frr + .frr{box-shadow:inset 0 .5px 0 var(--sep)}
.frr .pg{font-size:11px}
.frr .n{width:4.6em;flex:none;font-weight:500}
@media (prefers-reduced-motion: reduce){.ctrack::before,.ctrack .cbird{animation:none}.ctrack i,.ctrack .cb{transition:none}}
/* the outbox: your message, waiting on the perch for signal */
.b.me.pending{opacity:.72;animation:perch 2.4s ease-in-out infinite}
.b.me.pending.failed{opacity:1;animation:none;background:var(--fill-2);color:var(--label)}
@keyframes perch{50%{opacity:.5}}
.meta .fl.outq{border:0;background:none;font:inherit;color:var(--label-2);padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.meta .fl.outq .ico{font-size:13px}
.meta .fl.outq.bad{color:var(--red);max-width:100%;text-align:right}
@media (prefers-reduced-motion: reduce){.b.me.pending{animation:none}}
/* voice pigeons: the microphone, the recording bar, and the message itself */
.field-wrap .mic{position:absolute;right:4px;bottom:4px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--label-2);display:grid;place-items:center;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.5,.5,1),color .2s}
.field-wrap .mic .ico{font-size:22px}
.field-wrap .mic:active{transform:scale(.88);color:var(--tint)}
.recbar{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 4px;margin:0 8px;border-radius:24px;background:var(--glass-strong);box-shadow:var(--glass-shadow);animation:recin .3s cubic-bezier(.3,1.4,.5,1)}
@keyframes recin{from{opacity:0;transform:translateY(8px) scale(.97)}}
.recbar .reccancel{flex:none;width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--red);display:grid;place-items:center;cursor:pointer}
.recbar .reccancel .ico{font-size:21px}
.recdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--red);animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{50%{opacity:.35;transform:scale(.8)}}
.rectime{flex:none;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;min-width:34px}
.recwave{flex:1;min-width:0;height:28px;display:flex;align-items:center;justify-content:flex-end;gap:2px;overflow:hidden}
.recwave i{flex:none;width:3px;height:calc(var(--h, .1) * 100%);border-radius:2px;background:var(--red);opacity:.85;transition:height .08s}
.recbar .recsend{position:static;flex:none}
.b.voicem{min-width:200px;padding:7px 12px 7px 7px}
.voice{display:flex;align-items:center;gap:9px;--p:0}
.vplay{flex:none;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--tint-fill);color:#fff;transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.b.me .vplay{background:#fff;color:var(--tint)}
.vplay:active{transform:scale(.9)}
.vplay:disabled{opacity:.45}
.vplay .ico{font-size:15px}
svg.fillico{fill:currentColor;stroke:none}
.vwave{flex:1;min-width:0;height:26px;display:flex;align-items:center;gap:2px}
.vwave i{flex:1;max-width:4px;height:calc(var(--h, .3) * 100%);border-radius:2px;background:currentColor;opacity:.35;transition:opacity .15s}
.voice .vwave i{opacity:.35}
.voice{--n:40}
.vdur{flex:none;font-size:13px;font-variant-numeric:tabular-nums;opacity:.8;min-width:30px;text-align:right}
.vgone{display:inline-flex;align-items:center;gap:6px;font-size:14px;opacity:.75}
.vthumb{flex:none;width:44px;height:44px;border-radius:12px;background:var(--fill);display:grid;place-items:center;color:var(--tint)}
.vthumb .ico{font-size:22px}
@media (prefers-reduced-motion: reduce){.recdot,.recbar{animation:none}}
.vwave i.on{opacity:1}
/* the app lock */
.lockscreen{position:absolute;inset:0;z-index:39;display:grid;place-items:center;padding:24px;background:radial-gradient(120% 80% at 50% -10%,var(--sky-a),var(--sky-b) 52%,var(--sky-c)) var(--sky-top);animation:lockin .35s ease}
.lockscreen.out{animation:lock-out .32s var(--ease-out) forwards;pointer-events:none}
@keyframes lock-out{to{opacity:0;transform:scale(1.04)}}
@keyframes lockin{from{opacity:0}}
.lockin{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:300px}
.lockin .appicon{margin-bottom:6px}
.lockin h2{margin:0;font-size:24px;font-weight:700}
.lockin p{margin:0 0 10px;color:var(--label-2);font-size:15px;line-height:1.4}
.lockin .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.lockin .btn .ico{font-size:20px}
.lockin .link{border:0;background:none;color:var(--tint);font:inherit;font-size:15px;padding:8px;cursor:pointer}
/* leaving the app with the lock on: blurred for the app switcher's snapshot */
.veiled .view,.veiled .compose,.veiled .layer{filter:blur(18px);transition:none}
/* search inside chats */
.sres:empty{display:none}
.sres{margin-bottom:10px}
.sres .group{margin:0 16px}
.srow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:0;background:none;color:var(--label);font:inherit;text-align:left;cursor:pointer}
.srow + .srow{box-shadow:inset 62px .5px 0 var(--cell),inset 0 .5px 0 var(--sep)}
.srow:active{background:var(--fill)}
.stext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stop{display:flex;align-items:baseline;gap:8px}.stop b{flex:1;font-weight:600;font-size:15px}.stop time{font-size:12px;color:var(--label-2);flex:none}
.sbody{font-size:calc(14px * var(--ts, 1));color:var(--label-2);line-height:calc(19px * var(--ts, 1));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.sbody mark{background:var(--yellow);color:#1c1c1e;border-radius:3px;padding:0 1px}
.sby{color:var(--label)}
.snone{margin:4px 22px 12px;font-size:14px;color:var(--label-2)}

/* for screen readers only */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Dynamic Type: the phone's text size, read at launch (app.js sets --ts) */
.tsprobe{position:absolute;visibility:hidden;font:-apple-system-body}
.keyw{color:var(--orange-t);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.sheetwarn{margin:14px 16px 0}
.csub .warnc{color:var(--orange-t)}
.gfoot .link.inl{font:inherit;cursor:pointer;display:inline}
/* group changes: who joined, left or renamed it */
.sysline{align-self:center;max-width:86%;margin:10px 0 4px;padding:4px 12px;border-radius:12px;background:var(--fill);font-size:calc(12px * var(--ts, 1));line-height:1.35;color:var(--label-2);text-align:center;text-wrap:balance}
.sysline .t{white-space:nowrap}

/* an action sheet dims whatever is under it, sheets included */
.poplayer .scrim{z-index:40}
/* the chosen pigeon keeps its name on narrow phones; the others are icons */
@media (max-width:340px){.flyrun .frh small .w{display:none}}
.mprev .draft{color:var(--red-on);font-weight:500}
/* swiping back: the screen you came from waits underneath */
.screen.swiping{overflow:hidden}
.under{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;transform:translateX(-100%)}
.under > .ghost-in{transform:translateX(72%)}
.under .view{flex:1;min-height:0;overflow:hidden}
.under-dim{position:absolute;inset:0;background:#000;opacity:.14}
.swiped{position:relative;z-index:2;box-shadow:-14px 0 34px rgba(0,0,0,.16);clip-path:inset(0 0 0 -60px)}
/* already ticked before a redraw: no second pop */
.cell.kept .tickbox,.cell.kept .val.tick svg,.skin2.kept .sbig{animation:none}
/* opening another chat: its pigeon choice is just there */
/* swiping between tabs: the next one waits beside this one, and the highlight follows the finger */
.view.tabpeek{position:absolute;left:0;right:0;z-index:1;overflow:hidden;pointer-events:none;transition:none}
.tabs.paging::before{transition:none}
/* holding a chat: it sinks a little, then lifts above the blurred screen with its menu */
.mlist .mrow{transition:background-color .45s var(--ease-out),transform .3s var(--snappy)}
.mlist .mrow:active{transition:background-color 0s,transform .3s var(--snappy)}
.mlist .mrow.pressing{transform:scale(.97);transition:background-color 0s,transform .34s var(--smooth)}
.menu-scrim.blur{background:rgba(0,0,0,.14);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);animation:fade .25s ease}
.menu-scrim.blur.closing{animation:fade-out .22s ease forwards}
.mrow.lifted{position:absolute;z-index:41;background:var(--cell);box-shadow:0 14px 44px rgba(0,0,0,.2);animation:lift .42s var(--bouncy)}
.mrow.lifted .av{--dot-bg:var(--cell)}
.mrow.lifted.closing{animation:fade-out .22s ease forwards}
@keyframes lift{from{transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.mrow.lifted,.menu-scrim.blur{animation:none}}
/* a share card's map, drawn off screen in its own colours */
.cardmap{position:fixed;left:-10000px;top:0;pointer-events:none}
.ink-light{--sea:#d3e6f5;--shelf:#e4f0fa;--relief-hi:#ffffff;--relief-lo:#b9a98a;--land:#f8f6f1;--land-edge:#ddd8cc;--border:#c4bcab;--grid:rgba(0,0,0,.04);--bg:#fbf7ee;--cell:#ffffff;--label:#000000;--label-2:rgba(60,60,67,.76);--label-3:rgba(60,60,67,.3);--tint:#0068e8;--green:#34c759;--orange:#ff9500}
.ink-dark{--sea:#1e2b35;--shelf:#253645;--relief-hi:#55555d;--relief-lo:#1c1c20;--land:#36363c;--land-edge:#48484f;--border:#5c5c64;--grid:rgba(255,255,255,.04);--bg:#111113;--cell:#2a2a2e;--label:#f5f5f7;--label-2:rgba(235,235,245,.62);--label-3:rgba(235,235,245,.32);--tint:#3d9bff;--green:#32d65f;--orange:#ffa31a}
/* share a flight: the button on a landed flight's card, and the sheet with both pictures */
.mcb{display:contents}
.mapcard .shareflight{margin-top:12px;min-height:48px}
.shpick{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end;padding:6px 18px 20px}
.shopt{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:none;color:var(--label);font:inherit;-webkit-tap-highlight-color:transparent}
.shimg{position:relative;display:grid;place-items:center;width:100%;overflow:hidden;border-radius:14px;background:var(--fill);box-shadow:0 0 0 1px var(--sep),0 8px 22px rgba(0,0,0,.12);transition:box-shadow .25s,transform .4s var(--snappy)}
.shopt.postcard .shimg{aspect-ratio:4/5}
.shopt.story .shimg{aspect-ratio:9/16}
.shopt[aria-checked="true"] .shimg{box-shadow:0 0 0 3px var(--tint),0 10px 26px rgba(0,0,0,.16)}
.shopt:active .shimg{transform:scale(.96)}
.shimg img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.shimg > img{position:absolute;inset:0;animation:fade .3s ease}       /* (each new picture fades in over the last: app.js shareRender) */
.shimg.stale img{opacity:.45}
.shwait{color:var(--label-3);font-size:30px;animation:shwait 1s ease-in-out infinite alternate}
@keyframes shwait{to{opacity:.3;transform:translateY(-3px)}}
.shl{display:flex;flex-direction:column;align-items:center;gap:1px}
.shl b{font-size:15px;font-weight:600}
.shl small{font-size:12px;color:var(--label-2)}
.sharego{padding:6px 16px 8px}
@media (prefers-reduced-motion:reduce){.shwait{animation:none}}
/* mid-air moments: a line in the chat (tap for the map), and on the map's card */
.sysline.moment{display:block;border:0;font-family:inherit;color:var(--label-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sysline.moment .ico{font-size:14px;margin-right:5px;vertical-align:-3px;color:var(--orange-t,var(--orange))}
.sysline.moment:active{background:var(--sep)}
.mapcard .moment{display:block;font-size:13px;font-weight:600;color:var(--orange-t,var(--orange));text-align:center;text-wrap:balance}
.mapcard .moment .ico{font-size:13px;margin-right:4px;vertical-align:-2px}
/* cheer it on: the button on a flying pigeon's card, and what the cheers did */
.mapcard .cheerbtn{margin-top:12px;min-height:46px}
.mapcard .cheerbtn .ico{color:var(--orange-t,var(--orange))}
.mapcard .cheerbtn:disabled{opacity:.55}
.mapcard .cheers{display:block;font-size:13px;font-weight:600;color:var(--orange-t,var(--orange));text-align:center}
.mapcard .cheers .ico{font-size:13px;margin-right:4px;vertical-align:-2px}
/* flyovers: a friend's pigeon over you (wave back), yours over them */
.sysline.fly{display:block}
.sysline.fly > .ico{display:inline-block;font-size:14px;margin-right:5px;vertical-align:-3px;color:var(--teal);transform-origin:65% 85%}
.sysline.fly.just > .ico{animation:wave 1.1s ease-in-out}
@keyframes wave{0%,100%{transform:rotate(0)}15%{transform:rotate(-20deg)}35%{transform:rotate(16deg)}55%{transform:rotate(-14deg)}75%{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.sysline.fly.just > .ico{animation:none}}
.wavebtn{display:inline-block;vertical-align:middle;margin:2px 0 2px 8px;border:0;border-radius:999px;padding:3px 12px;min-height:26px;background:var(--teal);color:#fff;font:inherit;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wavebtn:active{opacity:.7}
.wavebtn:disabled{opacity:.5}
.mapcard .flyover{display:block;font-size:13px;font-weight:600;color:var(--label-2);text-align:center;text-wrap:balance}
.mapcard .flyover .ico{font-size:13px;margin-right:4px;vertical-align:-2px;color:var(--teal)}
/* plan around the weather: under the composer's note, what the skies are doing and when they clear */
.wxplan{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px 16px 0;font-size:12px;line-height:16px;color:var(--orange-t);text-align:center;text-wrap:balance}
.wxplan .wxline .ico{font-size:14px;margin-right:4px;vertical-align:-3px}
.wxplan.early{color:var(--green-t)}
.wxplan .wxwait{min-height:30px;padding:0 14px;font-size:13px}
/* named pigeons: who carries it, their careers, the Hall of Fame */
.mapcard .birdline{display:block;font-size:13px;font-weight:600;color:var(--label-2);text-align:center;text-wrap:balance}
.mapcard .birdline svg{width:15px;height:15px;margin-right:4px;vertical-align:-3px;fill:var(--orange)}
.sysline.rankup{display:block;border:0;font-family:inherit;color:var(--label-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sysline.rankup svg{width:15px;height:15px;margin-right:5px;vertical-align:-3px;fill:var(--orange)}
.sysline.rankup:active{background:var(--sep)}
.birdempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 28px 8px;text-align:center}
.birdempty > svg{width:64px;height:64px;fill:var(--orange)}
.birdempty b{font-size:20px;line-height:26px}
.birdempty span{max-width:34ch;font-size:15px;line-height:1.4;color:var(--label-2);text-wrap:balance}
.birdempty .btn{margin-top:8px}
.profile-head .birdbig{width:84px;height:84px;border-radius:24px;display:grid;place-items:center}
.profile-head .birdbig svg{width:50px;height:50px}
.bstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 16px}
.bstats div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px;border-radius:18px;background:var(--cell);min-width:0}
.bstats b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bstats span{font-size:12px;color:var(--label-2)}
.brank .ctext{width:100%}
.bbar{display:block;height:6px;margin-top:8px;border-radius:3px;background:var(--fill);overflow:hidden}
.bbar b{display:block;width:0;height:100%;border-radius:3px;background:var(--orange);transition:width .9s var(--smooth)}   /* (filling as the page opens: app.js) */

/* ---------- the chat, cleaner ----------
   A plain bar with who, their time and how far; each message with its own
   time inside it; colour only on what's in the air; one row to write in. */
.navbar.chatnav{grid-template-columns:auto minmax(0,1fr) auto;gap:0;min-height:58px;padding:4px 6px 4px 2px}
.navbar.chatnav::before{inset:0;opacity:1;background:color-mix(in srgb,var(--sky-top) 75%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(24px);backdrop-filter:saturate(1.8) blur(24px);-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 -.5px 0 var(--sep)}
.chatnav .nbtn,.chatnav .nb-right{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.chatnav .nbtn{color:var(--tint)}
.chatnav .chatwho{justify-self:stretch;max-width:none;gap:10px;padding:4px 8px 4px 0;border-radius:14px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:left}
.chatnav .chatwho:active{transform:none;filter:none;opacity:.6}
.chatwho .wt{flex:1;min-width:0;display:flex;flex-direction:column}
.chatwho .nm{font-size:16.5px;line-height:20px}
.chatwho .sub{display:flex;align-items:center;gap:4px;min-width:0;font-size:12.5px;line-height:16px;font-weight:400;color:var(--label-2);letter-spacing:-.1px;font-variant-numeric:tabular-nums}
.chatwho .sub .ico{flex:none;font-size:12px}
.msgs{padding-top:6px}
.msgs .stamp{margin:20px 0 8px;font-size:12px;line-height:16px;font-weight:600;color:var(--label-2)}
.msgs .stamp:first-child{margin-top:8px}

/* its time, tucked into the last line (or under it, when the line is full) */
.b .ft{float:right;display:inline-flex;align-items:center;gap:2px;margin:8px -4px -5px 10px;font-size:11px;line-height:15px;font-weight:500;letter-spacing:0;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--label-2)}
.b.me .ft{color:rgba(255,255,255,.78)}
.b .ft .ico{font-size:12px;stroke-width:2.2}
.b .ft .rd{display:inline-flex}
.b .ft .rd .ico{font-size:14px}
.b.voicem .ft{float:none;display:flex;justify-content:flex-end;margin:2px -2px -3px 0}
.b.pic .ft.over{position:absolute;right:9px;bottom:8px;float:none;margin:0;padding:2px 7px;border-radius:10px;background:rgba(0,0,0,.45);color:#fff}
.b.me.lost{opacity:.75}
.b.me.lost .ft.lostft,.b .ft.lostft{color:var(--red)}
.b.me.lost .ft.lostft .ico{font-size:11px}

/* in the air: an outline, and its pigeon on a hairline of the way */
.k-standard{--k:var(--p-standard)}.k-swift{--k:var(--p-swift)}.k-turbo{--k:var(--label)}.k-rocket{--k:var(--p-rocket)}.k-dumb{--k:var(--p-dumb)}
.b.up{background:none!important;color:var(--label);box-shadow:inset 0 0 0 1.5px var(--tint);min-width:min(224px,76%);cursor:pointer}
.b.up .ft{color:var(--label-2)}
.b.up .quote{background:var(--fill);border-left-color:var(--tint)}
.b.up .quote b{color:var(--tint)}
.b.up.waiting{border:0;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tint) 55%,transparent);color:var(--label)}
.b.up .frow{clear:both;display:flex;align-items:center;gap:10px;margin:7px -4px -4px 0}
.b.up .frow .ft{float:none;margin:0 0 0 auto}
.trk{position:relative;flex:1;min-width:48px;height:12px;container-type:inline-size}
.trk::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;border-radius:1px;background:repeating-linear-gradient(90deg,#e1352b 0 6px,transparent 6px 9px,#2f6fe0 9px 15px,transparent 15px 18px);opacity:.42}
.trk i{position:absolute;left:0;top:5px;height:2px;width:100%;transform:scaleX(var(--f,0));transform-origin:0 50%;border-radius:1px;background:var(--k);transition:transform 1s linear}
.trk .cb{position:absolute;left:-8px;top:-1px;width:14px;height:14px;transform:translateX(calc(var(--f,0) * 100cqw));transition:transform 1s linear}
.trk .cb .bird{display:block;width:14px;height:14px;color:var(--k);transform:scaleX(-1)}
.b.pic.up{box-shadow:none}
.b.pic.up .ptxt{background:none;color:var(--label);box-shadow:inset 0 0 0 1.5px var(--tint)}
.b.voicem.up .vplay{background:var(--tint-fill);color:#fff}
/* yours on its way to the server, a moment before it takes off (app.js: send) */
.b.me.sending{background:none!important;color:var(--label);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--k,var(--tint)) 45%,transparent);min-width:min(224px,76%)}
.b.me.sending .ft{float:none;display:flex;justify-content:flex-end;margin:7px -4px -4px 0;color:var(--label-2)}
.b.me.sending .quote{background:var(--fill);border-left-color:var(--tint)}
.b.me.sending .quote b{color:var(--tint)}
/* the send button, while what you sent goes up: a spinner where the arrow was */
.field-wrap .send.busy,.field-wrap .send.busy:disabled{opacity:1}
.send.busy svg{opacity:0}
.send.busy::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
/* theirs, sealed until it lands */
.b.up.sealed{display:flex;flex-direction:column;gap:6px;width:auto;margin-top:2px;padding:9px 14px 10px;border:0;font:inherit;text-align:left;color:var(--label-2);box-shadow:inset 0 0 0 1.5px var(--label-3)}
.b.up.sealed.gap-top{margin-top:10px}
.b.up.sealed .sl{display:flex;align-items:center;gap:6px;font-size:15px;line-height:20px}
.b.up.sealed .sl .ico{flex:none;font-size:15px;color:var(--k)}
.b.up.sealed .trk{flex:none;width:100%}
.b.up.sealed:active{transform:scale(.98)}
/* several at once: one quiet card */
.flyrun{background:none;box-shadow:inset 0 0 0 1.5px var(--label-3)}
.flyrun .stack .pg{box-shadow:0 0 0 2px var(--bg-plain)}
.flyrun .frh small,.frr b{color:var(--label-2)}
.ctrack::before{background-image:none;background:repeating-linear-gradient(90deg,#e1352b 0 6px,transparent 6px 9px,#2f6fe0 9px 15px,transparent 15px 18px);opacity:.42;animation:none}
.ctrack i{background:var(--label-2)}
.ctrack .cbird{fill:var(--label-2);animation:none}

/* what happened, as one small grey line */
.sysline,.lostnote{background:none;margin:12px auto 6px;padding:2px 12px;font-size:calc(12px * var(--ts, 1));line-height:16px;color:var(--label-2);border-radius:10px}
.lostnote .ico{font-size:13px}
.sysline.moment .ico,.sysline.fly > .ico{color:var(--label-2)}
.sysline.rankup svg{fill:var(--label-2)}
.sysline.moment:active,.sysline.rankup:active{background:var(--fill)}
.meta .fl.flock[class],.meta .fl.exp{color:var(--label-2)}

/* a menu choice with a line under it */
.menu-pop .mi.two{padding-block:8px}
.menu-pop .mi small{display:block;margin-top:1px;font-size:13px;line-height:17px;color:var(--label-2);text-wrap:pretty}
.menu-pop{max-width:min(320px,calc(100vw - 16px))}
.menu-pop .mi .gifico{flex:none;display:grid;place-items:center;width:24px;height:20px;border-radius:5px;box-shadow:inset 0 0 0 1.6px currentColor;font-size:10px;font-weight:800;letter-spacing:.2px}

/* one row: +, the message with its pigeon at the start, send */
.crow{gap:8px}
.field-wrap{padding:4px 4px 4px 4px}
.field-wrap textarea{padding:7px 6px}
.compose .kind{flex:none;align-self:flex-end;display:inline-flex;align-items:center;gap:4px;max-width:44%;height:32px;margin:2px 0;padding:0 7px 0 3px;border:0;border-radius:999px;background:var(--fill);color:var(--label);font-size:14px;font-weight:600;letter-spacing:-.2px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--snappy),opacity .2s}
.compose .kind .pg{font-size:17px}
.compose .kind .kl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compose .kind > .ico{flex:none;font-size:13px;color:var(--label-2)}
.compose .kind > .ico:last-child{font-size:10px;stroke-width:3;transform:rotate(90deg)}
.compose .kind:active{transform:scale(.94)}
.compose .kind:disabled{opacity:.5;cursor:default}
.pg.none{background:var(--gray)}
.compose .note{padding:0 12px}

/* How it flies */
.flyto{margin:0 24px 14px;font-size:14px;line-height:19px;color:var(--label-2);text-align:center;text-wrap:balance}
.kinds .kc{min-height:60px;gap:12px}
.kinds .kc .pg{font-size:18px}
.kinds .kc .val{color:var(--label);font-weight:600;font-variant-numeric:tabular-nums}
.kinds .kc .ck{flex:none;display:grid;place-items:center;width:20px;color:var(--tint);visibility:hidden}
.kinds .kc .ck .ico{font-size:18px;stroke-width:2.4}
.kinds .kc[aria-checked="true"] .ck{visibility:visible}
.kinds .kc:disabled{opacity:.45;cursor:default}
.carriers{display:flex;flex-wrap:wrap;gap:8px;margin:0 16px}
.cc{display:flex;flex-direction:column;align-items:flex-start;min-height:46px;padding:6px 14px;border:0;border-radius:16px;background:var(--cell);color:var(--label);text-align:left;box-shadow:inset 0 0 0 1.5px transparent;cursor:pointer;transition:box-shadow .2s}
.cc b{font-size:15px;line-height:19px;font-weight:600}
.cc small{font-size:12px;line-height:16px;color:var(--label-2)}
.cc[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--tint)}
.cc[aria-checked="true"] b{color:var(--tint-t)}
.cc:disabled{opacity:.45;cursor:default}

/* ---------- the rest of the app, in keeping with the chat ----------
   Plain tint buttons and, once you scroll, the same frosted bar; a pigeon in
   the air drawn the same way everywhere (an outline, the airmail line with
   its pigeon on it, theirs sealed); grey for everything that isn't news. */
.navbar.root .nb-right{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:2px}
.navbar.root .nbtn{color:var(--tint);background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.navbar.root .nbtn svg{font-size:22px}
.navbar:not(.chatnav)::before{inset:0;background:color-mix(in srgb,var(--sky-top) 55%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(24px);backdrop-filter:saturate(1.8) blur(24px);-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 -.5px 0 var(--sep)}

/* in the air, at the top of Messages: outlined like the pigeon in the chat */
.acard{background:none;box-shadow:inset 0 0 0 1.5px var(--label-3);gap:6px;padding:12px 14px 11px;border-radius:20px}
.acard.mine{box-shadow:inset 0 0 0 1.5px var(--tint)}
.acard .awho{gap:7px;font-size:14px}
.acard .awho .av.xs{flex:none;width:22px;height:22px;font-size:9px}
.acard .acd{color:var(--label);font-weight:650}
.acard.soon .acd{color:var(--tint)}
.acard.soon{animation:none}
.acard .atrack::before{background:repeating-linear-gradient(90deg,#e1352b 0 6px,transparent 6px 9px,#2f6fe0 9px 15px,transparent 15px 18px);background-size:auto;opacity:.42;animation:none}
.acard .atrack i{background:var(--k,var(--tint))}
.acard .abird{color:var(--k,var(--tint))}
.acard .abird svg{filter:none}
.acard .asub .ico{font-size:12px;vertical-align:-2px;margin-right:4px;color:var(--k,var(--label-2))}   /* (in the line, so a long one ends in "…") */
.acard .asub.late,.acard .asub.early{font-weight:500}
.acard.landed{background:none;box-shadow:inset 0 0 0 1.5px var(--green)}
.acard.landed::after{display:none}

/* the list: a pigeon in the air says so in grey, its colour only on the pigeon */
.mrow .mprev .upp{display:inline-flex;align-items:center;gap:5px;max-width:100%;color:var(--label-2)}
.mrow .mprev .upp > span:not(.rider):not(.sealedi){overflow:hidden;text-overflow:ellipsis}
.mprev .rider,.mprev .sealedi{flex:none;display:inline-grid;place-items:center;color:var(--k)}
.mprev .rider .bird{width:15px;height:15px;transform:scaleX(-1)}
.mprev .sealedi .ico{font-size:13px;margin:0}
.mrow .mprev svg.bird,.mrow .mprev .sealedi svg{vertical-align:0;margin-right:0}
.mrow .mprev .fl{color:var(--label-2)}

/* Account: each kind wears the round badge it wears in the chat */
.tile.kb{background:none;box-shadow:none;width:30px;height:30px}
.tile.kb .pg{font-size:20px;vertical-align:0}

/* the map card: the airmail line, flown in its colour, its pigeon on it */
.mapcard .prog{position:relative;height:2px;margin:12px 6px 8px;border-radius:1px;background:none;overflow:visible}
.mapcard .prog::before{content:"";position:absolute;inset:0;border-radius:1px;background:repeating-linear-gradient(90deg,#e1352b 0 6px,transparent 6px 9px,#2f6fe0 9px 15px,transparent 15px 18px);opacity:.42}
.mapcard .prog i{position:relative;display:block;height:2px;border-radius:1px;background:var(--k,var(--tint))}
.mapcard .prog i .bird{position:absolute;right:-9px;top:-7px;width:16px;height:16px;color:var(--k,var(--tint));transform:scaleX(-1)}
.mapcard .prog.lost i .bird{display:none}
.mapcard .frow.flying b{color:var(--label)}
.mapcard .skyrow b{color:var(--label)}

/* Messages wears the app's name where its title was: the icon and InFlight */
.brand{display:inline-flex;align-items:center;gap:.3em;min-width:0;vertical-align:middle}
.brand .bicon{flex:none;display:grid;place-items:center;width:1.05em;height:1.05em;border-radius:.27em;color:#fff;
  background:linear-gradient(160deg,#5fb0ff,#0a5fe0);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 8px -2px rgba(10,95,224,.45)}
.brand .bicon svg{width:.68em;height:.68em;transform:translate(-.01em,.03em)}
.brand .bword{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.2px}
.large.brandh .brand{gap:7px}
.nb-title .brand{gap:7px;justify-content:center;font-size:17px}

/* the passport: a stamp for each place, in postal ink, perforated, each a little askew */
  background:var(--paper);color:color-mix(in srgb,var(--ink) 78%,var(--label));font:inherit;text-align:center;cursor:pointer;transform:rotate(var(--tilt,0deg));
  box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5.5px color-mix(in srgb,var(--ink) 50%,transparent);
  -webkit-mask:radial-gradient(circle,transparent 1.7px,#000 2px) -3px -3px/6px 6px,linear-gradient(#000,#000) 3px 3px/calc(100% - 6px) calc(100% - 6px) no-repeat;
  mask:radial-gradient(circle,transparent 1.7px,#000 2px) -3px -3px/6px 6px,linear-gradient(#000,#000) 3px 3px/calc(100% - 6px) calc(100% - 6px) no-repeat;
  transition:transform .3s var(--bouncy);-webkit-tap-highlight-color:transparent}
.passport + .stack{display:flex;justify-content:center;margin:8px 16px 0}
.sysline.stamps{display:block;border:0;font-family:inherit;color:var(--label-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sysline.stamps .ico{font-size:14px;margin-right:5px;vertical-align:-3px}
.sysline.stamps:active{background:var(--fill)}

/* ---------- the composer, to the touch ----------
   Every control shows the press the moment a finger lands (.down, from
   pressFeedback: a little smaller and a shade deeper, held long enough to see on
   a quick tap) and settles back smoothly; nothing grows or bounces. Send and the
   microphone share one spot at the end of the field, so the words never shift
   when one turns into the other. */
.compose button{-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease-out),box-shadow .2s,background-color .2s,filter .2s,opacity .18s,color .2s}
.compose button.down{transition-duration:.05s}
.compose .plus:active{transform:none;filter:none;box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px var(--glass-edge),var(--glass-shadow)}
.compose .plus.down{transform:scale(.9);box-shadow:inset 0 0 0 99px var(--fill-2),inset 0 0 0 .5px var(--glass-edge),var(--glass-shadow)}
.compose .kind:active{transform:none}
.compose .kind.down{transform:scale(.95);background:var(--fill-2)}
.compose .send:active{transform:none}
.compose .send.down{transform:scale(.88);filter:brightness(.88)}
.field-wrap .mic:active{transform:none;color:var(--label-2)}
.field-wrap .mic.down{transform:scale(.88);background:var(--fill-2);color:var(--label)}
.compose .replybar button.down,.compose .attach button.down,.compose .wxplan .btn.down{transform:scale(.92);filter:brightness(.9)}
/* the field: a ring while you're writing in it */
.field-wrap{position:relative;transition:box-shadow .2s}
.field-wrap:focus-within{box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 1.5px color-mix(in srgb,var(--tint) 55%,transparent),var(--glass-shadow)}
/* send and the microphone: the same spot, a quick crossfade between them */
.field-wrap textarea{padding-right:42px}
.field-wrap .send{position:absolute;right:4px;bottom:4px;width:36px;height:36px;margin:0;animation:none}
.field-wrap .send:disabled{width:36px;opacity:0}
.field-wrap .send:not([hidden]):not(:disabled),.field-wrap .mic:not([hidden]){animation:spot-in .18s var(--ease-out)}
@keyframes spot-in{from{opacity:0;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.field-wrap .send,.field-wrap .mic{animation:none!important}}
/* writing: the pigeon steps back to its badge, so the words have the room (still a tap to change it) */
.compose .kind{transition:transform .3s var(--ease-out),background-color .2s,gap .25s var(--ease-out),padding .25s var(--ease-out)}
.compose .kind .kl{max-width:9em;transition:max-width .25s var(--ease-out),opacity .2s}
.compose .kind .kl{animation:fade .22s ease}         /* (a new pigeon's name fades in: the pill is redrawn when it changes) */
.field-wrap:focus-within .kind{gap:1px;padding-right:5px}
.field-wrap:focus-within .kind .kl{max-width:0;opacity:0}
@media (prefers-reduced-motion:reduce){.compose .kind,.compose .kind .kl{transition:none}}
/* the whole box is the place to tap: the words' area fills it, edge to edge */
.field-wrap{padding:0 4px}
.field-wrap textarea{align-self:stretch;padding:11px 42px 11px 6px}
.compose .kind{margin:6px 0}
/* the round buttons and the pill: a finger's 44px to tap, looking just as they do (::before: ::after is the sending spinner) */
.field-wrap .send::before,.field-wrap .mic::before{content:"";position:absolute;inset:-4px;border-radius:50%}
.field-wrap .mic::before{inset:-5px}
.compose .kind{position:relative}
.compose .kind::before{content:"";position:absolute;inset:-6px -4px}
.compose{touch-action:none}
.compose textarea{touch-action:pan-y}
html.zoomed .compose,html.zoomed .compose textarea{touch-action:pan-x pan-y pinch-zoom}   /* (pinched in: a finger here moves round the page, and pinches it back) */
/* iPhones zoom the page into any box whose words are under 16px: the message box never is, whatever the text size */
.field-wrap textarea{font-size:max(16px,calc(17px * var(--ts, 1)));line-height:max(21px,calc(22px * var(--ts, 1)))}
/* flight streaks: a flame and the days in a row */
.streak{flex:none;display:inline-flex;align-items:center;gap:2px;color:var(--orange-t);font-weight:600;font-variant-numeric:tabular-nums;font-size:13px}
.streak .ico{font-size:13px;fill:currentColor;fill-opacity:.25}
.streak.risk{color:var(--label-2)}
.streak.risk .ico{animation:streakrisk 1.6s ease-in-out infinite}
@keyframes streakrisk{50%{opacity:.35}}
.chatwho .sub .streak{font-size:12.5px;margin-right:6px}
.chatwho .sub .streak .ico{font-size:12px}
@media (prefers-reduced-motion:reduce){.streak.risk .ico{animation:none}}
/* the mystery pigeon: a question mark until it takes off */
.pg.mystery{background:conic-gradient(from 200deg,#7a5cff,#c86bff,#ff6fae,#ffb347,#7a5cff);font-weight:800;font-size:inherit;line-height:1;color:#fff;text-shadow:0 .03em .06em rgba(0,0,0,.3)}
.pg.mystery{font-size:1em}
.dots.mystery i:not(.e){background:linear-gradient(135deg,#7a5cff,#ff6fae)}
/* landmark postmarks: a round cancellation stamp in ink */
.pmseal{--pm:#a3342b;position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--pm);
  box-shadow:inset 0 0 0 1.5px var(--pm),inset 0 0 0 4px transparent,inset 0 0 0 5px var(--pm);transform:rotate(-8deg)}
.pmseal .ico{font-size:19px;stroke-width:1.7}
.pmseal .waves{position:absolute;left:78%;top:30%;width:22px;height:16px;opacity:.55;
  background:radial-gradient(4px 2px at 25% 0,transparent 70%,var(--pm) 75% 100%,transparent 105%) 0 1px/7px 5px repeat-x}
.pm-tower .pmseal,.pmseal.pm-tower{--pm:#a3342b}.pm-bridge .pmseal,.pmseal.pm-bridge{--pm:#1d5fa8}.pm-monument .pmseal,.pmseal.pm-monument{--pm:#6b4bb0}
.pm-castle .pmseal,.pmseal.pm-castle{--pm:#7a5a1e}.pm-cliff .pmseal,.pmseal.pm-cliff{--pm:#22737a}.pm-mountain .pmseal,.pmseal.pm-mountain{--pm:#2f6b3a}
.pm-dome .pmseal,.pmseal.pm-dome{--pm:#a04a7a}.pm-pyramid .pmseal,.pmseal.pm-pyramid{--pm:#a8661c}.pm-falls .pmseal,.pmseal.pm-falls{--pm:#1f7fa6}
.pm-canyon .pmseal,.pmseal.pm-canyon{--pm:#a5481f}.pm-wall .pmseal,.pmseal.pm-wall{--pm:#8a4a2a}.pm-dunes .pmseal,.pmseal.pm-dunes{--pm:#b07a12}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pmseal{filter:brightness(1.6) saturate(.9)}}
:root[data-theme="dark"] .pmseal{filter:brightness(1.6) saturate(.9)}
.pmarks{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px 6px;max-width:80%}
.pmarks.me{align-self:flex-end;justify-content:flex-end;margin:4px 6px 2px 0}
.pmark{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:0;border-radius:24px;background:var(--fill);color:var(--label);font:inherit;text-align:left}
.pmark .pmseal{width:30px;height:30px}
.pmark .pmseal .ico{font-size:15px}
.pmark .pmseal .waves{display:none}
.pmt{display:flex;flex-direction:column;min-width:0}
.pmt b{font-size:13px;line-height:16px;font-weight:600}
.pmt small{font-size:9.5px;font-weight:700;letter-spacing:.6px;color:var(--label-2);font-variant-numeric:tabular-nums}
.pmgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 16px}
.pmtile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 6px 12px;border:0;border-radius:18px;background:var(--cell);color:var(--label);font:inherit;text-align:center;min-width:0}
.pmtile .pmseal{width:52px;height:52px;margin-bottom:4px}
.pmtile .pmseal .ico{font-size:26px}
.pmtile > b{font-size:12.5px;line-height:15px;font-weight:600;overflow-wrap:anywhere;text-wrap:balance}
.pmtile > small{font-size:9.5px;font-weight:700;letter-spacing:.6px;color:var(--label-2)}
.pmtile.unknown .pmseal{--pm:var(--label-3);box-shadow:inset 0 0 0 1.5px var(--label-3);transform:none}
.pmtile.unknown .pmseal b{font-size:20px;color:var(--label-3)}
.pmtile.unknown > b,.pmtile.unknown > small{color:var(--label-3)}
.pmtile,.pmark{transition:transform .35s var(--snappy)}
.pmtile:active,.pmark:active{transform:scale(.96)}
/* feathers: the balance, the shop, and accessories on named pigeons */
.tile.yellow{background:linear-gradient(180deg,#ffd84a,#f2b600)}
.fbal{font-variant-numeric:tabular-nums;font-weight:600;color:var(--label)}
.fhead{display:flex;flex-direction:column;align-items:center;gap:2px;margin:6px 0 4px}
.fhead .fico{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:linear-gradient(180deg,#ffd84a,#f2b600);color:#fff;font-size:36px;margin-bottom:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.fhead b{font-size:34px;line-height:40px;font-weight:700;font-variant-numeric:tabular-nums}
.fhead > span:last-child{color:var(--label-2);font-size:15px}
.tile.emo{background:var(--fill);box-shadow:none;font-size:19px}
.shopi .btn.small{flex:none;gap:4px}
.shopi .btn.small .ico{font-size:14px}
.fdelta{font-variant-numeric:tabular-nums;font-weight:600;color:var(--green-t)}
.fdelta.spent{color:var(--label-2)}
.wtile,.pgw{position:relative;overflow:visible}
.pgw{display:inline-flex}
.wear{position:absolute;right:-.35em;top:-.45em;font-style:normal;font-size:.75em;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));pointer-events:none}
.wtile .wear{font-size:15px;right:-6px;top:-7px}
.birdbig.wtile .wear{font-size:30px;right:-10px;top:-14px}
/* seasonal pigeons: the look, small and big, and the card that says a season's here */
.pg.sk-spring{box-shadow:0 0 0 .1em #ff8fb4,inset 0 -.06em .12em rgba(0,0,0,.12)}
.pg.sk-summer{box-shadow:0 0 0 .1em #ffc233,inset 0 -.06em .12em rgba(0,0,0,.12)}
.pg.sk-autumn{box-shadow:0 0 0 .1em #c8622a,inset 0 -.06em .12em rgba(0,0,0,.12)}
.pg.sk-winter{box-shadow:0 0 0 .1em #9fd8ff,0 0 0 .16em #fff,inset 0 -.06em .12em rgba(0,0,0,.12)}
:is(.sbig,.mapcard .big) .pg:is(.sk-spring,.sk-summer,.sk-autumn,.sk-winter)::after{position:absolute;right:-.42em;top:-.38em;font-size:.6em;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
:is(.sbig,.mapcard .big) .pg.sk-spring::after{content:"🌸"}
:is(.sbig,.mapcard .big) .pg.sk-summer::after{content:"☀️"}
:is(.sbig,.mapcard .big) .pg.sk-autumn::after{content:"🍂"}
:is(.sbig,.mapcard .big) .pg.sk-winter::after{content:"❄️"}
.seasoncard{display:flex;align-items:center;gap:11px;margin:4px 16px 12px;padding:10px 8px 10px 14px;border-radius:20px;background:var(--cell);box-shadow:inset 0 0 0 1px var(--sep)}
.seasoncard .semoji{font-size:24px;line-height:1;flex:none}
.seasoncard .stext{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.seasoncard b{font-size:15px;line-height:20px}
.seasoncard .stext > span{font-size:13px;line-height:17px;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seasoncard .btn.small{flex:none}
.seasoncard .sx{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:var(--label-3);cursor:pointer}
.seasoncard .sx svg{width:15px;height:15px}
/* the hint in an empty message box stays on one line (cut short with … if it must) */
.field-wrap textarea:placeholder-shown{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-wrap textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* friends' news */
.nrow{align-items:center}
.nrow .ntext{white-space:normal;font-size:15px;line-height:20px;text-wrap:pretty}
.nkind{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fill);color:var(--label-2);font-size:16px}
.nkind.blue{color:var(--tint)}.nkind.red{color:#c0392b}.nkind.orange{color:var(--orange-t)}.nkind.pink{color:#e8457a}
.nkind .nemo{font-size:17px;line-height:1}
.ghead .gmore{float:right;font:inherit;font-weight:400;color:var(--tint);background:none;border:0;padding:0}
.veiled .toasts{display:none}
/* view-once photos: a pill to tap, and a viewer that closes itself */
.b.once{display:inline-flex;align-items:center;gap:8px;padding:11px 18px 11px 14px;font:inherit;font-weight:600;color:var(--label);border:0;text-align:left}
.b.once .oico{font-size:22px;color:#7b5cff;flex:none}
.b.once.me .oico{color:#fff}
/* opened or expired: the same quiet outline as an expired photo */
.b.once.done,.b.once.me.done{gap:6px;padding:6px 12px 6px 10px;font-weight:400;color:var(--label-2)}
.b.once.done b{font-weight:inherit}
.b.once.done .oico,.b.once.me.done .oico{font-size:15px;color:var(--label-3)}
.b.once.done .ft{margin-left:2px}
.b.once.live:active{transform:scale(.97)}
.b.once + .b.ocap{margin-top:3px}
.oview{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:#000;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;animation:fade .2s ease}
.oview.out{animation:ofadeout .2s ease forwards}
.oview canvas{max-width:100%;max-height:100%;pointer-events:none;opacity:0;transition:opacity .18s}
.oview.on canvas{opacity:1}
.oview .obar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;color:#fff;background:linear-gradient(rgba(0,0,0,.55),transparent)}
.oview .otext{flex:1;font-weight:600;font-size:15px}
.oview .oclose{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.oview .oring{width:26px;height:26px}
.oview .oring svg{width:100%;height:100%;transform:rotate(-90deg)}
.oview .oring circle{fill:none;stroke:#fff;stroke-width:3.5;stroke-dasharray:94.25;stroke-dashoffset:0;stroke-linecap:round}
.oview.on .oring circle{animation:oring linear forwards}
@keyframes oring{to{stroke-dashoffset:94.25}}
@keyframes ofadeout{from{opacity:1}to{opacity:0}}
/* invite only */
.welcome .invited{display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0 12px;color:var(--tint);font-weight:600;font-size:15px}
/* the welcome: night, a pigeon crossing, very few words */
html.night,html.night body,html.night .app{background:#03050c}
html.night #screen{isolation:isolate;background:radial-gradient(120% 70% at 50% 0%,#0d1636 0%,#060a1a 55%,#03050c 100%)}
html.night .view{background:transparent}
.nightsky{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
html.night .nightsky{display:block}
.welcome.night{position:relative;justify-content:space-between;align-items:center;padding:0 0 calc(26px + env(safe-area-inset-bottom,0px));color:#e9eeff;overflow:hidden}
.welcome .wtop{margin-top:max(22vh,120px);display:flex;flex-direction:column;align-items:center;gap:14px}
.welcome .wtitle{margin:0;display:flex;gap:0;font-size:40px;line-height:1;font-weight:200;letter-spacing:.16em;padding-left:.16em;color:#f2f5ff;text-shadow:0 0 22px rgba(130,170,255,.45)}
.welcome .wtitle span{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(8px);animation:wletter 1.4s cubic-bezier(.2,.7,.2,1) forwards}
.welcome .wtitle span:nth-child(1){animation-delay:.35s}.welcome .wtitle span:nth-child(2){animation-delay:.47s}.welcome .wtitle span:nth-child(3){animation-delay:.59s}.welcome .wtitle span:nth-child(4){animation-delay:.71s}
.welcome .wtitle span:nth-child(5){animation-delay:.83s}.welcome .wtitle span:nth-child(6){animation-delay:.95s}.welcome .wtitle span:nth-child(7){animation-delay:1.07s}.welcome .wtitle span:nth-child(8){animation-delay:1.19s}
@keyframes wletter{to{opacity:1;filter:blur(0);transform:none}}
.welcome .whisper{margin:0;font-size:15px;letter-spacing:.06em;color:rgba(214,224,255,.62);font-style:italic;opacity:0;animation:wfade 2s ease 1.9s forwards}
@keyframes wfade{to{opacity:1}}
.welcome .wcta{width:100%;display:flex;flex-direction:column;align-items:center;opacity:0;animation:wfade 1.4s ease 2.6s forwards}
.welcome .wcta.swap{opacity:1;animation:wcta-swap .45s var(--ease-out) both}
@keyframes wcta-swap{from{opacity:0;transform:translateY(6px)}}
.welcome .wcta .stack{margin-top:0;width:100%;max-width:420px;align-items:center}
.welcome .invited{margin:0 0 18px;font-size:16px;font-weight:500;letter-spacing:.03em;color:#cfe0ff;text-shadow:0 0 18px rgba(120,170,255,.6)}
.welcome .wglow{position:relative;background:linear-gradient(rgba(120,160,255,.16),rgba(120,160,255,.16)),rgba(6,10,26,.86);color:#fff;border:1px solid rgba(160,190,255,.45);box-shadow:0 0 24px rgba(110,160,255,.35),inset 0 0 18px rgba(130,170,255,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.12em;font-weight:500;animation:wpulse 3.2s ease-in-out infinite}
@keyframes wpulse{50%{box-shadow:0 0 38px rgba(110,160,255,.6),inset 0 0 22px rgba(130,170,255,.28)}}
.welcome .wquiet{margin-top:6px;padding:12px 24px;border:0;background:none;color:rgba(214,224,255,.75);font:inherit;font-size:15px;letter-spacing:.08em}
.welcome .wquiet:active{color:#fff}
@media (prefers-reduced-motion:reduce){.welcome .wtitle span,.welcome .whisper,.welcome .wcta{animation:none;opacity:1;filter:none;transform:none}.welcome .wglow{animation:none}}
/* the welcome's logo: out of the dark, in a soft glow */
.welcome .wlogo{position:relative;margin:0;display:grid;place-items:center;width:160px;height:160px}
.welcome .wlogo .appicon{position:relative;width:96px;height:96px;border-radius:26px;font-size:58px;opacity:0;filter:blur(14px);transform:scale(.86);will-change:auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 10px 30px rgba(10,40,120,.45);animation:wlogo 1.8s cubic-bezier(.2,.7,.2,1) .3s forwards}
@keyframes wlogo{80%{filter:blur(0)}to{opacity:1;filter:none;transform:none}}
.welcome .wlogo::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(70,140,255,.4),rgba(70,140,255,.12) 55%,rgba(70,140,255,0));opacity:0;animation:wfade 2.2s ease .6s forwards}
.welcome .wtop{margin-top:max(16vh,80px)}
@media (prefers-reduced-motion:reduce){.welcome .wlogo .appicon,.welcome .wlogo::before{animation:none;opacity:1;filter:none;transform:none}}
/* "You've been invited" in the same quiet capitals as "By invitation only" */
.welcome .invited{margin:0 0 14px;font-size:14px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:rgba(214,224,255,.55);text-shadow:none}
/* every screen before you're in, under the same night: the sky carries on behind,
   and one screen gives way to the next in a slow dissolve rather than a slide */
.auth.night{--label:#eef2ff;--label-2:rgba(214,224,255,.66);--label-3:rgba(214,224,255,.34);--cell:rgba(110,140,255,.08);--cell-2:rgba(110,140,255,.12);
  --fill:rgba(160,190,255,.12);--fill-2:rgba(160,190,255,.2);--sep:rgba(160,190,255,.16);--tint:#a9c6ff;--tint-fill:rgba(120,160,255,.16);--red:#ff8278;--green:#5fe08a;
  --glass:rgba(120,150,255,.1);--glass-strong:rgba(20,28,60,.9);--glass-hi:rgba(160,190,255,.2);--glass-edge:rgba(160,190,255,.2);--bg:#03050c;color-scheme:dark;color:var(--label);
  --pane:var(--cell);--sheen:none;--edge:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px var(--glass-edge);--lift:0 8px 28px rgba(0,0,0,.3)}
.auth.night .navbar::before{display:none}
.auth.night .large,.auth.night .hero h1{font-weight:300;letter-spacing:.06em;color:#f2f5ff;text-shadow:0 0 22px rgba(130,170,255,.4)}
.auth.night .group{border:1px solid rgba(160,190,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.auth.night .fcell input{caret-color:#cfe0ff}
.auth.night .fcell input:-webkit-autofill{-webkit-text-fill-color:#eef2ff;transition:background-color 99999s}
.auth.night .btn:not(.plain){background:linear-gradient(rgba(120,160,255,.16),rgba(120,160,255,.16)),rgba(6,10,26,.86);color:#fff;border:1px solid rgba(160,190,255,.45);letter-spacing:.08em;font-weight:500;
  box-shadow:0 0 24px rgba(110,160,255,.3),inset 0 0 18px rgba(130,170,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.auth.night .btn.plain{color:var(--label-2);letter-spacing:.06em}
.auth.night form .btn.plain{color:#dfe8ff;background:rgba(6,10,26,.62);border:1px solid rgba(160,190,255,.26)}   /* (the email way in: quieter than the passkey, still plainly a button over the sky) */

.auth.night .hero .appicon{box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 0 40px rgba(70,140,255,.45)}
html.night .view.nav-push,html.night .view.nav-pop{background:transparent;animation:ndawn .7s cubic-bezier(.2,.7,.2,1)}
@keyframes ndawn{from{opacity:0;transform:translateY(12px)}}
html.night .nav-ghost{background:transparent;box-shadow:none;animation:ndusk .4s ease forwards}
html.night .nav-ghost > .ghost-in{animation:none}
@keyframes ndusk{to{opacity:0;transform:translateY(-6px)}}
.nav-ghost .night{background:#03050c}          /* a night screen left for the day: it goes as it was */
html.night .nav-ghost .night{background:none}
/* back on the welcome: the logo and words are already there */
.welcome.again .wlogo .appicon{animation:none;opacity:1;filter:none;transform:none}
.welcome.again .wlogo::before{animation:none;opacity:1}
.welcome.again .wcta{animation:wfade .5s ease forwards}
@media (prefers-reduced-motion:reduce){html.night .view.nav-push,html.night .view.nav-pop,html.night .nav-ghost{animation:none}html.night .nav-ghost{display:none}}

/* ---------- signing in and out, in motion (app.js: handOff, arriving, dusk) ----------
   The account's page, where you sign in, has a sky of its own: pale lavender, or deep blue when the phone is dark (the
   phone's, not InFlight's Appearance), with a dawn along the bottom. Nothing here ever catches a tap. */
/* (the account page's sky exactly: its gradient, and its dawn, warm along the foot with a cool light at the top) */
:root{--acct-sky:#f3f0fb;--acct-sky-a:#e9eefc;--acct-sky-c:#f7f8fc;
  --acct-heaven:radial-gradient(120% 80% at 50% -10%,var(--acct-sky-a),var(--acct-sky) 52%,var(--acct-sky-c));
  --dawn:radial-gradient(120% 50% at 50% 112%,rgba(255,190,150,.55),rgba(255,160,200,.22) 45%,transparent 72%),radial-gradient(110% 60% at 50% -12%,rgba(160,200,255,.22),transparent 62%)}
@media (prefers-color-scheme:dark){:root{--acct-sky:#0a0f26;--acct-sky-a:#121a3c;--acct-sky-c:#05060e}}
/* going: that sky, over everything */
.handoff{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none}
.handoff .hsky{position:absolute;inset:0;background:var(--acct-heaven);opacity:0}
/* coming back: the page's last picture (its sky, the dawn and you), from the very first frame (theme.js marks the
   page before it's drawn), then app.js's own copy of it, the same; and if app.js never comes, it clears by itself */
html.arriving body::after,.arrival .arv-sky{background:var(--dawn),var(--acct-heaven)}
html.arriving body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;animation:fade-out .4s ease 12s forwards}
html.arriving.arv-face body::before,.arrival .arv-me{position:fixed;left:50%;top:30%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%}
html.arriving.arv-face body::before{content:var(--arv-i,"");z-index:101;pointer-events:none;display:grid;place-items:center;color:#fff;font:600 32px/1 var(--font);
  background:var(--arv-p,none) center/cover no-repeat,linear-gradient(160deg,#78b6ff,#3157d8 70%,#6a3fd8);box-shadow:0 12px 30px -12px rgba(40,50,150,.5);animation:fade-out .4s ease 12s forwards}
.arrival{position:fixed;inset:0;z-index:45;pointer-events:none}
.arrival .arv-sky{position:absolute;inset:0}
.arrival .arv-me{display:grid;place-items:center;overflow:hidden;color:#fff;font:600 32px/1 var(--font);letter-spacing:0;
  background:linear-gradient(160deg,#78b6ff,#3157d8 70%,#6a3fd8);box-shadow:0 12px 30px -12px rgba(40,50,150,.5)}
.arrival .arv-me img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}   /* (over the initial, which stays under it as it fades in) */
@media (prefers-reduced-motion:reduce){html.arriving body::after,html.arriving.arv-face body::before{animation:fade-out .2s ease 12s forwards!important}}
/* until they come in, a row at a time: Messages' list, under its title */
.screen.unlocking .view > .brandh ~ *{opacity:0}
/* the padlock in the middle: opening as you come in, closing as you go (its shackle swings on its right leg) */
.padlock{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:46;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.padlock .pldisc{position:relative;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--cell);color:var(--tint);box-shadow:var(--glass-shadow),inset 0 0 0 .5px var(--glass-edge)}
.padlock .plring{position:absolute;top:0;left:50%;width:76px;height:76px;margin-left:-38px;border-radius:50%;opacity:0;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--tint) 70%,transparent),0 0 26px 8px color-mix(in srgb,var(--tint) 32%,transparent)}
.padlock svg{width:38px;height:38px;overflow:visible}
.padlock .plshackle{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;transform-box:view-box;transform-origin:15.8px 10.4px}
.padlock .plbody{fill:currentColor}
.padlock .plhole{fill:var(--cell)}
.padlock .plcap{margin:0;font-size:15px;font-weight:500;color:var(--label-2);white-space:nowrap}
/* going: a lifeless copy of the screen (whose rows fall away without the app redrawing them), then night over it */
.dusk{position:absolute;inset:0;z-index:45;overflow:hidden;pointer-events:none}
.dusk-copy{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;overflow:hidden}
.screen:has(> .dusk > .dusk-copy) > :is(.view,.tabbar,.compose){visibility:hidden}   /* (the copy is clear: the screen itself goes from under it) */
.dusk-copy > .view{flex:1;min-height:0;overflow:hidden}
.dusk-night{position:absolute;inset:0;z-index:47;opacity:0;background:radial-gradient(120% 70% at 50% 0%,#0d1636 0%,#060a1a 55%,#03050c 100%)}
/* a friend's loft */
.lofthead .sub{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;text-align:center}
.lofthead .sub .pg{font-size:13px}
.loftkits{display:flex;flex-wrap:wrap;gap:8px;margin:0 16px}
.loftkit{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:var(--cell);font-size:15px}
.loftkit i{font-style:normal;font-size:18px;line-height:1}
.loftkit .pg{font-size:14px}
/* Account: today's pigeons, as four small tiles */
/* Account: today's pigeons, a column each, in one card (the space ones on a row of their own) */
.loft{padding:4px 6px}
.loft .lrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:10px 0 11px}
.loft .lrow.five{grid-template-columns:repeat(5,minmax(0,1fr))}   /* (Orbital alongside, when it's the only space one) */
.loft .lrow.space{position:relative;padding-top:8px}
.loft .lrow.space::before{content:"";position:absolute;top:0;left:12px;right:12px;height:.5px;background:var(--sep)}
.loft .lcap{grid-column:1/-1;margin:0 0 6px 12px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--label-2)}
.lcol{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 4px;text-align:center}
.lcol .pg{font-size:19px;margin-bottom:5px}
.lcol b{font-size:22px;line-height:26px;font-weight:700;font-variant-numeric:tabular-nums}
.lcol.none b{color:var(--label-3)}
.lcol .lname{max-width:100%;font-size:13px;line-height:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcol .lname i{font-style:normal;font-weight:500;color:var(--label-2)}
.lcol .lnext{max-width:100%;font-size:12px;line-height:16px;color:var(--tint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.lcol .lnext.full{color:var(--label-2)}
/* Account: your flying so far, under your card (opens the Flight Log) */
.mestats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:12px 10px 13px;min-height:0}
.mestats>span{display:flex;flex-direction:column;align-items:center;min-width:0}
.mestats>span+span{border-left:.5px solid var(--sep)}
.mestats b{font-size:19px;line-height:24px;font-weight:700;font-variant-numeric:tabular-nums}
.mestats small{font-size:12px;line-height:16px;color:var(--label-2)}
.aver{margin:22px 0 0;text-align:center;font-size:13px;color:var(--label-2)}
/* small fixes from the UI audit */
.compose .kind{max-width:44%}
@media (max-width:360px){.compose .kind.named .kl{display:none}.bstats{gap:6px;margin-inline:12px}.bstats b{font-size:15px}}
@media (max-width:360px){.mapcard.fc.fold .big{font-size:19px;letter-spacing:-.4px}.mapcard.fc.fold .big small{font-size:13px}.mapcard.fc.fold .fcpeek{gap:10px}}   /* a small phone: the folded card still says when it lands */
/* a message held for its menu sinks a little first, as a chat in the list does */
.msgs .b.pressing{transform:scale(.96);transition:transform .34s var(--smooth)}
/* if InFlight can't start: what happened, and a way out */
.bootfail{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 28px calc(32px + env(safe-area-inset-bottom,0px));text-align:center}
.bootfail h1{margin:8px 0 0;font-size:22px}
.bootfail p{margin:0 0 12px;color:var(--label-2);font-size:16px;line-height:21px;max-width:34ch}
.bootfail .btn{max-width:360px}
.sheet header h2:focus,.view [tabindex="-1"]:focus{outline:none}
/* the map card: what its planned way is doing (around storms, riding the wind, resting, a pass, a landmark) */
.mapcard .waynote{display:flex;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;color:var(--label-2);text-align:center}
.mapcard .waynote .ico{font-size:14px;flex:none}
.mapcard .checked{display:block;font-size:12px;color:var(--label-2);text-align:center;font-variant-numeric:tabular-nums}

/* A pigeon's map card: folded to a slim bar over the map, or pulled up as the
   flight's timeline (app.js flightCard). It springs between the two (its
   height, with the map re-fitting above it), its rows rise in one by one and
   the line flown draws down to the pigeon, which pulses gently where it is now. */
.mapcard.fc{padding:6px 16px 14px;gap:12px;transition:transform .5s var(--snappy),border-radius .4s var(--smooth);
  max-height:calc(100% - 28px - env(safe-area-inset-bottom,0px))}   /* (never taller than the map: a long flight's timeline scrolls in it rather than the card's top going under the title) */
.mapcard.fc.fold{padding:6px 14px 12px;gap:10px;border-radius:26px}
.mapcard.fc.drag{transition:none}
.mapcard.fc.morph{overflow:hidden;transition:height .6s var(--snappy),transform .5s var(--snappy),border-radius .4s var(--smooth)}
.mapcard.fc.enter{animation:fc-enter .7s var(--snappy) .12s both}
@keyframes fc-enter{from{opacity:0;transform:translateY(46px) scale(.94)}}
.fcfold{position:relative;display:block;align-self:stretch;height:18px;margin:0 -16px -8px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fcfold i{position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--label-3);transition:width .4s var(--snappy),margin .4s var(--snappy),background-color .2s}
.mapcard.fc.drag .fcfold i,.fcfold:active i{width:48px;margin-left:-24px;background:var(--label-2)}
.mapcard.fc.fold .fcfold{position:absolute;inset:0;height:auto;margin:0;border-radius:inherit;z-index:1}
.fcfold:focus-visible{outline:2px solid var(--tint);outline-offset:-2px}
.mapcard.fc .fct{display:flex;flex-direction:column;flex:1;min-width:0}
.mapcard.fc .fcs{font-size:13px;color:var(--label-2);font-variant-numeric:tabular-nums}
.mapcard.fc .fct .fcs{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapcard.fc .fct .fcs b{font-weight:600;color:var(--tint)}
.mapcard.fc .fchead .fct .fcs{white-space:normal;text-wrap:balance}          /* pulled up, the line under the time wraps: "lands Sat 17:10–17:40" in full */
.fccoin{flex:none;display:grid;place-items:center;font-size:24px}
.fccoin .pg{font-size:inherit;margin:0}
.fccoin.lg{font-size:28px}
.fccoin .lostp .ico{font-size:30px;color:var(--red)}
.mapcard.fc .big{display:block;justify-content:normal;font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.mapcard.fc .big small{font-size:15px;font-weight:500;color:var(--label-2)}
.mapcard.fc .fchead .big{font-size:28px;letter-spacing:-.5px}
/* folded */
.fcpeek{display:flex;align-items:center;gap:12px;padding-right:52px;min-height:48px;margin-top:10px}
.fcbar{position:relative;display:block;height:4px;border-radius:2px;background:var(--fill-2);overflow:hidden}
.fcbar i{display:block;height:100%;width:0;border-radius:2px;background:var(--k,var(--tint));transition:width .9s var(--smooth)}
.fcbar.lost i{background:var(--red)}
.mapcard.fc.fold .cheerbtn,.mapcard.fc.fold .shareflight{position:absolute;z-index:2;top:18px;right:14px;width:44px;height:44px;min-height:0;margin:0;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--tint-fill);color:#fff}
.mapcard.fc.fold .cheerbtn .ico,.mapcard.fc.fold .shareflight .ico{color:#fff;margin:0;font-size:20px}
.mapcard.fc.fold .cheerbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mapcard.fc.fold .shareflight{font-size:0}
.mapcard.fc.fold .cheerbtn:active,.mapcard.fc.fold .shareflight:active{transform:scale(1.12)}
/* (Look Up stays a button of its own on the folded card: above the bar that unfolds it) */
.mapcard.fc.fold .lookbtn{position:relative;z-index:2}
/* pulled up */
.fchead{display:flex;align-items:center;gap:12px;cursor:pointer}
.fcpill{flex:none;display:flex;align-items:center;gap:3px;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.2px;color:var(--tint);background:color-mix(in srgb,var(--tint) 14%,transparent)}
.fcpill .ico{font-size:13px}
.fcpill.ok{color:var(--green-t);background:color-mix(in srgb,var(--green) 16%,transparent)}
.fcpill.teal{color:var(--teal);background:color-mix(in srgb,var(--teal) 16%,transparent)}
.fcpill.warn{color:var(--orange-t);background:color-mix(in srgb,var(--orange) 16%,transparent)}
.fctl{position:relative;list-style:none;margin:0 -4px;padding:8px 4px 2px;max-height:min(42vh,360px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  --fu:0px;--fd:0px;-webkit-mask-image:linear-gradient(transparent,#000 var(--fu),#000 calc(100% - var(--fd)),transparent);mask-image:linear-gradient(transparent,#000 var(--fu),#000 calc(100% - var(--fd)),transparent)}
.fctl::-webkit-scrollbar{display:none}
.fctl.more-up{--fu:22px}.fctl.more-down{--fd:26px}
/* (its fading edges come and go as it scrolls, rather than popping: registered, so they can be eased) */
@property --fu{syntax:"<length>";inherits:false;initial-value:0px}
@property --fd{syntax:"<length>";inherits:false;initial-value:0px}
.fctl{transition:--fu .2s ease,--fd .2s ease}
.fctl li{position:relative;display:grid;grid-template-columns:46px 24px minmax(0,1fr);column-gap:10px;padding-bottom:16px}
.fctl li:last-child{padding-bottom:0}
/* the line from each row down to the next: solid where it has flown */
.fctl li:not(:last-child)::before{content:"";position:absolute;left:66.5px;top:14px;bottom:-14px;border-left:3px dotted var(--label-3)}
.fctl li.flown:not(:last-child)::before{border-left:3px solid var(--tint)}
.fcat{display:flex;flex-direction:column;font-size:13px;line-height:1.2;color:var(--label-2);font-variant-numeric:tabular-nums;padding-top:2px;white-space:nowrap}
.fcat small{font-size:11px;font-weight:500;color:var(--label-3)}
.fctl .now .fcat{font-weight:700;color:var(--tint)}
.fcdot{position:relative;z-index:1;justify-self:center;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cell);border:2px solid var(--label-3);color:var(--label-2);box-sizing:border-box}
.fcdot .ico{font-size:12px}
.fcdot.end{width:14px;height:14px;margin-top:3px;border:3px solid var(--tint)}
.done > .fcdot.end{background:var(--tint)}
.fcdot.teal{border-color:var(--teal);color:var(--teal)}
.fcdot.warn,.fcdot.orange{border-color:var(--orange);color:var(--orange-t)}
.fcdot.green{border-color:var(--green);color:var(--green-t)}
.fcdot.red{border-color:var(--red);color:var(--red)}
.done > .fcdot.ev{opacity:.75}
.now > .fcdot{width:24px;height:24px;margin-top:-2px;border:0;background:none;font-size:14px;box-shadow:0 0 0 3px var(--cell),0 0 0 6px color-mix(in srgb,var(--tint) 35%,transparent)}
.now > .fcdot .pg{font-size:inherit;margin:0}
.now > .fcdot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--tint);opacity:0;animation:fc-ping 2.6s var(--ease-out) .8s infinite;pointer-events:none}
@keyframes fc-ping{0%{opacity:.55;transform:scale(.8)}70%,100%{opacity:0;transform:scale(1.7)}}
.now > .fcdot::after{animation-delay:var(--ping,.8s)}         /* (in step from one drawing of the rows to the next: app.js flightCard) */
.fcwhat{display:flex;flex-direction:column;gap:2px;min-width:0}
.fctitle{font-size:15px;font-weight:600;color:var(--label);text-wrap:pretty}
.done .fctitle{color:color-mix(in srgb,var(--label) 78%,transparent)}
.fctl .now .fctitle{font-size:17px;font-weight:700}
.fctl .now .over{display:inline;font-size:inherit;font-weight:inherit;color:var(--tint)}
.fcchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.fcchip{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:8px;background:var(--fill);font-size:12px;font-weight:600;color:var(--label);font-variant-numeric:tabular-nums}
.fcchip .ico{font-size:13px;flex:none}
.fcchip.dim{color:var(--label-2)}
.fcchip.wind .ico{color:var(--gray)}
.fcchip.wind.tail,.fcchip.wx.early{color:var(--green-t)}
.fcchip.wind.head,.fcchip.wx.late{color:var(--orange-t)}
.mapcard.fc .waynote,.mapcard.fc .fcwhat .wx{display:flex;align-items:flex-start;justify-content:flex-start;gap:5px;margin-top:5px;font-size:13px;font-weight:500;color:var(--label-2);text-align:left}
.mapcard.fc .waynote .ico,.mapcard.fc .fcwhat .wx .ico{font-size:14px;flex:none;margin-top:1px}
.mapcard.fc .fcwhat .wx.late{color:var(--orange-t)}
.mapcard.fc .fcwhat .wx.early{color:var(--green-t)}
.fcnotes{display:flex;flex-direction:column;gap:5px;padding:10px 12px;border-radius:14px;background:var(--fill)}
.mapcard.fc .fcnotes > span{display:flex;align-items:center;gap:6px;text-align:left;font-size:13px}
.mapcard.fc .fcnotes .ico{font-size:14px;flex:none;margin:0}
.mapcard.fc .checked{color:var(--label-2);font-weight:500}
.mapcard.fc .checked .ico{color:var(--tint)}
.fcwho{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--sep)}
.fcav{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--orange-t);font-weight:700;font-size:15px}
.fcav.pgk{background:none;font-size:22px}
.fcav.pgk .pg{font-size:inherit;margin:0}
.mapcard.fc .fcwho .birdline,.fckind{display:block;text-align:left;font-size:15px;font-weight:600;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fctags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.fctags .fcchip{border-radius:999px;padding:5px 9px}
.fctags .fcchip[class*=" k-"]{color:var(--k);background:color-mix(in srgb,var(--k) 16%,transparent)}
.fctags .k-rocket{color:var(--p-rocket-text)}
.fctags .k-swift{color:var(--p-swift-t)}.fctags .k-dumb{color:var(--p-dumb-t)}
.fctags .sty{color:var(--teal);background:color-mix(in srgb,var(--teal) 15%,transparent)}
.fctags .risk{color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.mapcard.fc .cheerbtn,.mapcard.fc .shareflight{margin-top:0}
.mapcard.fc:not(.fold) .cheerbtn{background:var(--tint-fill);color:#fff;min-height:48px;border-radius:16px}
.mapcard.fc:not(.fold) .cheerbtn .ico{color:#fff}
/* (the map has no wind or rain key: hidden too in case an older copy of the app still draws one) */
.windkey,.rainkey{display:none!important}
/* the map's buttons step aside while the card is up over them */
.mapctl{transition:opacity .3s var(--smooth),transform .5s var(--snappy),top .3s}
.mapctl.fcaside{opacity:0;transform:translateX(24px) scale(.8);pointer-events:none}
/* switching: the new side plays in */
.mapcard.fc.swap .fcpeek,.mapcard.fc.swap .fcbar{animation:fc-in .45s var(--snappy) both}
.mapcard.fc.swap .fcbar{animation-delay:.06s}
.mapcard.fc.swap .fchead{animation:fc-in .5s var(--snappy) both}
.mapcard.fc.swap .fcpill{animation:pop .5s var(--bouncy) .2s both}
.mapcard.fc.swap .fctl li{animation:fc-in .55s var(--snappy) both;animation-delay:calc(70ms + var(--i) * 45ms)}
.mapcard.fc.swap .fctl li.flown::before{transform-origin:top;animation:fc-draw .5s var(--ease-out) both;animation-delay:calc(160ms + var(--i) * 45ms)}
.mapcard.fc.swap .fcnotes,.mapcard.fc.swap .fcwho{animation:fc-in .55s var(--snappy) .22s both}
.mapcard.fc.swap .cheerbtn:not([hidden]),.mapcard.fc.swap .shareflight:not([hidden]){animation:fc-in .55s var(--snappy) .28s both}
.mapcard.fc.fold.swap .cheerbtn:not([hidden]),.mapcard.fc.fold.swap .shareflight:not([hidden]){animation:bump .5s var(--bouncy) .12s both}
@keyframes fc-in{from{opacity:0;transform:translateY(14px)}}
@keyframes fc-draw{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){
  .mapcard.fc,.mapcard.fc.morph,.fcbar i,.mapctl{transition:none}
  .mapcard.fc.enter,.mapcard.fc.swap *,.mapcard.fc.swap .fctl li::before,.now > .fcdot::after{animation:none!important}
}

/* (Styles and code are each fetched by their fingerprint; the server only lets a
   phone keep one that matches, see functions/pigeon/_middleware.js.)
   How It Flies: when it would land up top, a bar for each pigeon's time, the
   route as a sliding switch, and the way it would go as a line with its stops.
   It plays in when it opens (bars grow, stops pop on), and a new choice moves
   only what changed (the thumb glides, the time drops in, the stops redraw). */
.flyhero{display:flex;align-items:center;gap:14px;margin:2px 20px 18px}
.flyhero > .pg{flex:none;font-size:30px;margin:0}
.flyhero .pg.none{background:var(--fill-2)}
.fht{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.fhbig{font-size:26px;line-height:1.15;font-weight:700;letter-spacing:-.5px;color:var(--label);font-variant-numeric:tabular-nums}
.flyhero .flyto{margin:0;text-align:left;font-size:14px;line-height:19px}
.fhwx{display:inline-flex;align-items:center;gap:5px;margin-top:5px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:600;color:var(--label-2);background:var(--fill)}
.fhwx .ico{font-size:13px}
.fhwx.clear .ico{color:var(--orange)}
.fhwx.early{color:var(--green-t);background:color-mix(in srgb,var(--green) 15%,transparent)}
.fhwx.late{color:var(--orange-t);background:color-mix(in srgb,var(--orange) 15%,transparent)}
.kdur{display:block;height:4px;margin-top:5px;border-radius:2px;width:calc(var(--w,0) * 100%);max-width:100%;background:var(--k,var(--tint));opacity:.85;transform-origin:left}
.kc:disabled .kdur{opacity:.4}
.kinds .kc[aria-checked="true"] .kdur{opacity:1}
.cc{flex-direction:row;align-items:center;gap:10px;padding:6px 14px 6px 6px}
.cc > span:last-child{display:flex;flex-direction:column}
.ccav{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--orange-t);font-weight:700;font-size:14px}
.ccav.any{color:var(--label-2)}
.ccav.any svg{width:17px;height:17px;fill:currentColor}
.cc[aria-checked="true"] .ccav{background:var(--tint-fill);color:#fff}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 16px;padding:4px;border-radius:18px;background:var(--cell)}
.segthumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:14px;background:var(--tint-fill);box-shadow:0 4px 14px color-mix(in srgb,var(--tint) 30%,transparent);transform:translateX(calc(var(--i,0) * 100%))}
.segthumb.glide{transition:transform .55s var(--snappy)}
.seg button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:62px;padding:8px 4px;border:0;border-radius:14px;background:none;color:var(--label);font:inherit;cursor:pointer;transition:color .25s,transform .35s var(--snappy)}
.seg button .ico{font-size:17px;color:var(--label-2);transition:color .25s}
.seg button b{font-size:14px;font-weight:600}
.seg button small{font-size:11px;color:var(--label-2);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .25s}
.seg button[aria-checked="true"],.seg button[aria-checked="true"] .ico{color:#fff}
.seg button[aria-checked="true"] small{color:#fff}
.seg button:active{transform:scale(.96)}
.waycard{display:flex;flex-direction:column;gap:10px;width:calc(100% - 32px);margin:14px 16px 0;padding:14px 16px 16px;border:0;border-radius:26px;background:var(--cell);color:var(--label);font:inherit;text-align:left;cursor:pointer;transition:transform .45s var(--snappy)}
.waycard:active{transform:scale(.98)}
.wayhd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wayhd b{font-size:16px;font-weight:600}
.waygo{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--tint)}
.waygo .ico{font-size:15px}
.wayline{position:relative;display:block;height:30px}
.wayline::before{content:"";position:absolute;left:7px;right:7px;top:14px;border-top:3px dotted var(--label-3);transform-origin:left}
.wayend{position:absolute;top:8px;width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:3px solid var(--tint);background:var(--cell)}
.wayend.from{left:0;background:var(--tint)}.wayend.to{right:0}
.waystop{position:absolute;top:3px;left:calc(7px + var(--x,0) * (100% - 14px));margin-left:-12px;width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:grid;place-items:center;background:var(--cell);border:2px solid var(--label-3);color:var(--label-2)}
.waystop .ico{font-size:12px}
.waystop.teal{border-color:var(--teal);color:var(--teal)}
.waystop.warn,.waystop.orange{border-color:var(--orange);color:var(--orange-t)}
.waystop.green{border-color:var(--green);color:var(--green-t)}
.wayends{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--label-2);font-variant-numeric:tabular-nums}
.wayends > span{display:flex;flex-direction:column}
.wayends > span:last-child{align-items:flex-end;text-align:right}
.wayends b{font-size:15px;font-weight:600;color:var(--label)}
.waywords{font-size:13px;line-height:18px;color:var(--label-2);text-wrap:pretty}
.waycard.loading{cursor:default}
.waycard.loading .wayline::before{animation:sheen 1.4s ease-in-out infinite}
/* playing in */
.flysheet.enter .flyhero{animation:fc-in .5s var(--snappy) .05s both}
.flysheet.enter .kdur{animation:kd-grow .7s var(--ease-out) both;animation-delay:calc(.18s + var(--i,0) * 70ms)}
.flysheet.enter .wayline::before,.waycard.chg .wayline::before{animation:kd-grow .6s var(--ease-out) .2s both}
.flysheet.enter .waystop,.waycard.chg .waystop{animation:bump .5s var(--bouncy) both;animation-delay:calc(.35s + var(--i,0) * 90ms)}
.flysheet.enter .wayend.to,.waycard.chg .wayend.to{animation:bump .45s var(--bouncy) .7s both}
.flyhero.chg .fhbig,.flyhero.chg .flyto{animation:fh-drop .45s var(--snappy) both}
.flyhero.chg .flyto{animation-delay:.04s}
@keyframes kd-grow{from{transform:scaleX(0)}}
@keyframes fh-drop{from{opacity:0;transform:translateY(-8px)}}
/* The Way: the flight card, with the switch on it */
.mapcard.fc.pv .seg{margin:0;background:var(--fill)}
.mapcard.fc.pv .seg button{min-height:56px}
.mapcard.fc.pv .fctl li:first-child .fcdot{margin-top:-2px}
@media (prefers-reduced-motion:reduce){
  .segthumb.glide,.waycard{transition:none}
  .flysheet.enter *,.flysheet.enter .wayline::before,.waycard.chg *,.waycard.chg .wayline::before,.flyhero.chg *{animation:none!important}
}
/* How It Flies' choices as rails of chips (who carries it, when it lands, where it
   stops): one line each that scrolls sideways, edge to edge, the chosen one ringed */
.carriers.chiprail{flex-wrap:nowrap;margin:0;padding:2px 16px 4px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
.carriers.chiprail::-webkit-scrollbar{display:none}
.chiprail .cc{flex:none;scroll-snap-align:start;max-width:220px;transition:box-shadow .2s,transform .45s var(--snappy),opacity .2s}
.chiprail .cc:active:not(:disabled){transform:scale(.95)}
.chiprail .cc b,.chiprail .cc small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chiprail .cc:not(:has(.ccav,.av)){padding-left:14px}
.chiprail .cc > .av{flex:none;width:32px;height:32px;font-size:12px}
.ccav.when{color:var(--tint)}
.ccav.when svg,.ccav.when .ico{width:17px;height:17px;font-size:17px}
.ccav.when svg.bird{fill:currentColor}
.cc[aria-checked="true"] .ccav.when{background:var(--tint-fill);color:#fff}
.chiprail .cc[aria-checked="true"] > .av{box-shadow:0 0 0 2px var(--tint)}
.flysheet .chiprail .cc.picked{animation:fc-pick .4s var(--bouncy)}
@keyframes fc-pick{40%{transform:scale(1.05)}}
.ghead .gmore{font-size:15px;font-weight:500}
@media (prefers-reduced-motion:reduce){.flysheet .chiprail .cc{animation:none!important;transition:none}}
/* Pigeon Death's odds on each way (with it on) */
.seg .rk{display:block;margin-top:3px;padding:1px 7px;border-radius:999px;font-style:normal;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--fill);color:var(--label-2);transition:background-color .25s,color .25s}
.seg .rk.lo{color:var(--green-t);background:color-mix(in srgb,var(--green) 15%,transparent)}
.seg .rk.hi{color:var(--red);background:color-mix(in srgb,var(--red) 13%,transparent)}
.seg button[aria-checked="true"] .rk{background:rgba(255,255,255,.2);color:#fff}
.fctags .rk.lo{color:var(--green-t);background:color-mix(in srgb,var(--green) 15%,transparent)}
.fctags .rk.mid{color:var(--label-2);background:var(--fill)}
/* a run of mid-air moments folds into one line; tap to unfold */
.sysline .momx{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;background:var(--fill);font-size:11px;font-weight:600;line-height:15px;vertical-align:1px;font-variant-numeric:tabular-nums}
.momrun{display:flex;flex-direction:column;align-items:center}
.momrun .momsum .chev{font-size:12px;margin:0 0 0 4px;vertical-align:-2px;transition:transform .32s cubic-bezier(.32,.72,0,1)}
.momrun.open .momsum .chev{transform:rotate(90deg)}
.momrun.open .momsum{color:var(--label)}
.momlist{display:flex;flex-direction:column;align-items:center;width:100%}
.momlist .sysline{margin:2px auto}
.momlist:last-child{margin-bottom:6px}
.momrun.unfold .momlist > *{animation:momin .36s cubic-bezier(.32,.72,0,1) both}
.momrun.unfold .momlist > :nth-child(2){animation-delay:.03s}
.momrun.unfold .momlist > :nth-child(3){animation-delay:.06s}
.momrun.unfold .momlist > :nth-child(n+4){animation-delay:.09s}
@keyframes momin{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.momrun .momsum .chev{transition:none}.momrun.unfold .momlist > *{animation:none}}
/* a photo or GIF that has expired: a quiet outline where it was, not an empty frame */
.b.gone,.b.gone.me{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;background:none;box-shadow:inset 0 0 0 1px var(--sep);color:var(--label-2);font-size:calc(14px * var(--ts, 1));line-height:calc(20px * var(--ts, 1))}
.b.gone .gonel{display:inline-flex;align-items:center;gap:6px}
.b.gone .gonel .ico{font-size:15px;flex:none;color:var(--label-3)}
.b.gone .ft,.b.gone.me .ft{float:none;margin:0 -2px 0 0;color:var(--label-3)}
.b.gone .ft svg{opacity:.8}
.b.gone + .b.ocap{margin-top:3px}
/* view once: a lighter button to open it, and yours in the air laid out like any pigeon in the air */
.b.once.live{gap:7px;padding:9px 16px 9px 12px}
.b.once.live b,.b.once.up b{font-weight:600}
.b.once.live .oico{font-size:20px}
.b.once.up{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 7px;padding:9px 14px 10px 12px}
.b.once.up .oico,.b.once.me.up .oico{font-size:20px;color:var(--tint)}
.b.once.up .frow{grid-column:1/-1}
/* in the air to you: a lighter outline */
.b.up.sealed,.flyrun{box-shadow:inset 0 0 0 1px var(--label-3)}
.b.once.up > .ft{margin:0 -2px 0 8px}
/* lost on the way: an outline with a broken edge, where the message would have been */
.b.me.lost{opacity:1;background:none;color:var(--label-2);box-shadow:none;border:1.5px dashed color-mix(in srgb,var(--red) 45%,transparent);padding:6.5px 11.5px 7.5px}
/* Messages-style bubbles: the last of a run from one person gets a tail, its curve cut by a mask (rather than covered
   over in the colour behind, which the sky hasn't one of). Yours tucks under your bubble; a friend's, as clear as its
   bubble, is only where the bubble isn't, the bubble's corner tightened to meet it. */
.b{z-index:0}
.b.me:not(.pic,.once,.gone,.up,.lost,.jumbo,.voicem):not(:has(+ .b.me:not(.pic,.once,.gone,.up,.lost,.jumbo,.voicem)))::before,
.b:not(.me,.pic,.once,.gone,.up,.lost,.jumbo,.voicem,.sealed):not(:has(+ .b:not(.me,.pic,.once,.gone,.up,.lost,.jumbo,.voicem,.sealed)))::before{content:"";position:absolute;z-index:-1;bottom:0;width:20px;height:20px}
.b.me:not(.pic,.once,.gone,.up,.lost,.jumbo,.voicem):not(:has(+ .b.me:not(.pic,.once,.gone,.up,.lost,.jumbo,.voicem)))::before{right:-7px;background:var(--tint);border-bottom-left-radius:16px 14px;
  -webkit-mask:linear-gradient(#000,#000) 0 0/13px 100% no-repeat,radial-gradient(circle at 23px 0,transparent 10px,#000 10.5px) 0 100%/100% 10px no-repeat;
  mask:linear-gradient(#000,#000) 0 0/13px 100% no-repeat,radial-gradient(circle at 23px 0,transparent 10px,#000 10.5px) 0 100%/100% 10px no-repeat}
.b:not(.me,.pic,.once,.gone,.up,.lost,.jumbo,.voicem,.sealed):not(:has(+ .b:not(.me,.pic,.once,.gone,.up,.lost,.jumbo,.voicem,.sealed))){border-bottom-left-radius:6px}
.b:not(.me,.pic,.once,.gone,.up,.lost,.jumbo,.voicem,.sealed):not(:has(+ .b:not(.me,.pic,.once,.gone,.up,.lost,.jumbo,.voicem,.sealed)))::before{left:-7px;background:var(--bubble-in);
  -webkit-mask:radial-gradient(circle at -3px 0,transparent 10px,#000 10.5px) 0 100%/7px 10px no-repeat,radial-gradient(circle at 6px 0,transparent 6px,#000 6.5px) 7px 100%/6px 6px no-repeat;
  mask:radial-gradient(circle at -3px 0,transparent 10px,#000 10.5px) 0 100%/7px 10px no-repeat,radial-gradient(circle at 6px 0,transparent 6px,#000 6.5px) 7px 100%/6px 6px no-repeat}
.b{border-radius:20px;padding:7px 14px 8px}
.b.gap-top{margin-top:12px}
/* one to three emoji on their own: big, no bubble */
.b.jumbo,.b.jumbo.me{background:none;box-shadow:none;padding:0 2px;font-size:calc(46px * var(--ts, 1));line-height:1.15}
/* the time over a stretch of the chat, and landed / read under your latest */
.msgs .stamp{margin:18px 0 8px;font-size:12px;line-height:16px;font-weight:500;color:var(--label-2)}
.msgs .stamp b{font-weight:600}
.meta.rstat{margin:3px 4px 4px;font-size:11px;font-weight:500;color:var(--label-2)}
.menu-pop .mtime{padding:2px 14px 8px;font-size:12px;line-height:16px;color:var(--label-2);text-align:center;font-variant-numeric:tabular-nums}
/* the blue settles before the bottom, so the tail meets it exactly */
.b.me:not(.up,.lost,.pic,.once,.gone,.jumbo){background:radial-gradient(140% 90% at 12% -20%,rgba(255,255,255,.35),rgba(255,255,255,0) 46%),linear-gradient(180deg,color-mix(in srgb,var(--tint) 88%,#fff),var(--tint) calc(100% - 20px));
  box-shadow:inset 0 1px .5px rgba(255,255,255,.5),0 8px 18px -10px color-mix(in srgb,var(--tint) 80%,#000)}
/* How It Flies, refined: the chosen pigeon tinted, the ones you can't send now a little smaller,
   chips picked with a soft fill rather than an outline, and the sections closer together */
.flysheet .ghead{margin:20px 36px 8px}
.kinds .kc[aria-checked="true"]{background:color-mix(in srgb,var(--tint) 10%,var(--cell))}
.kinds .kc:disabled{min-height:50px;padding-top:6px;padding-bottom:6px}
.kinds .kc:disabled .kdur{display:none}
.kinds .kc:disabled .pg{font-size:15px}
.kinds .kc:disabled .ctext > span:first-child{font-size:15px}
.kinds .kc:disabled .val{font-weight:500;color:var(--label-2)}
.flysheet .cc[aria-checked="true"]{background:color-mix(in srgb,var(--tint) 13%,var(--cell));box-shadow:none}
.flysheet .cc{min-height:44px}
.flysheet .cc b{font-size:15px}
.flysheet .cc small{font-size:12px}
/* a choice changing (a pigeon, a time, a stop, a place, a look): the new one fills in and the old lets go, gently,
   rather than swapping in one frame (on a redraw only: renderSheet's .still, keepTicks' .kept and .unticked) */
.sheet.still .kinds .kc[aria-checked="true"]:not(.kept),.sheet.still .flysheet .cc[aria-checked="true"]:not(.kept){animation:sel-on .3s ease}
.sheet.still .flysheet .chiprail .cc.picked{animation:fc-pick .4s var(--bouncy),sel-on .3s ease}
.sheet.still .kinds .kc.unticked{animation:kc-off .3s ease}
.sheet.still .flysheet .cc.unticked{animation:cc-off .3s ease}
.sheet.still .kinds .kc[aria-checked="true"]:not(.kept) .ck .ico{animation:bump .45s var(--bouncy)}
.sheet.still .cc[aria-checked="true"]:not(.kept){animation:ring-on .3s ease}
.sheet.still .cc.unticked{animation:ring-off .3s ease}
.sheet.still .mpside .cc.unticked{animation-name:ring-off-gold}
.sheet.still .skin2.unticked{animation:ring-off2 .3s ease}
.sheet.still .pickrow.unticked .tickbox{animation:tick-off .25s ease}
@keyframes sel-on{from{background-color:var(--cell)}}
@keyframes kc-off{from{background-color:color-mix(in srgb,var(--tint) 10%,var(--cell))}}
@keyframes cc-off{from{background-color:color-mix(in srgb,var(--tint) 13%,var(--cell))}}
@keyframes ring-on{from{box-shadow:inset 0 0 0 1.5px transparent}}
@keyframes ring-off{from{box-shadow:inset 0 0 0 1.5px var(--tint)}}
@keyframes ring-off-gold{from{box-shadow:inset 0 0 0 1.5px #ffd166}}
@keyframes ring-off2{from{box-shadow:inset 0 0 0 2px var(--tint)}}
@keyframes tick-off{from{background:var(--tint-fill);box-shadow:none;color:#fff}}
.flysheet .seg{margin-bottom:10px}
/* Account: the data credits, under the version */
.aver .alink{display:block;margin:6px auto 0;padding:4px 8px;border:0;background:none;font:inherit;color:var(--tint);cursor:pointer}
.gfoot a{color:var(--tint);text-decoration:none}
a.cell{text-decoration:none;color:inherit}
a.cell .tile .gifico{font-size:9px;font-weight:800;color:#fff;letter-spacing:.2px}
/* What's New: after an update, once */
.wnhero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 24px 8px;text-align:center}
.wnhero h2{margin:6px 0 0;font-size:26px;line-height:31px;font-weight:700;letter-spacing:-.4px;text-wrap:balance}
.wnhero p{margin:0;font-size:15px;color:var(--label-2)}
.wnlogo{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 70%,#fff),var(--tint));color:#fff;font-size:34px;box-shadow:0 8px 22px color-mix(in srgb,var(--tint) 35%,transparent)}
.wnlist{display:flex;flex-direction:column;gap:18px;padding:14px 28px 8px}
.wnrow{display:flex;align-items:flex-start;gap:14px;animation:wnin .55s cubic-bezier(.32,.72,0,1) both;animation-delay:calc(.12s + var(--i, 0) * .06s)}
.wnrow .tile{flex:none;width:40px;height:40px;border-radius:11px;font-size:21px}
.wnt{display:flex;flex-direction:column;gap:2px;min-width:0}
.wnt b{font-size:16px;line-height:21px;font-weight:600}
.wnt small{font-size:14px;line-height:19px;color:var(--label-2);text-wrap:pretty}
.wnfoot{padding:22px 20px 8px}
.wnfoot .btn{width:100%}
@keyframes wnin{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.wnrow{animation:none}}
/* (they play in when the sheet opens; a redraw of it, as news arrives, leaves them be) */
.layer .sheet.still .wnrow{animation:none}
/* a sheet's small things that used to pop in: an error under a field (which shakes too: app.js showErr), and a ✓
   in the header that comes with the first choice (New Group) */
.sheet .ferr:not([hidden]){animation:fc-in .3s var(--snappy)}
.sheet > header .nbtn.popin{animation:pop .35s var(--bouncy)}
/* the version: tap it for what's new */
.aver .averbtn{display:inline-flex;align-items:center;gap:2px;padding:4px 8px;border:0;border-radius:8px;background:none;font:inherit;color:var(--label-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.aver .averbtn:active{background:var(--fill)}

/* ---------- the passport, as a passport ---------- */
.ppcard{display:flex;align-items:center;gap:16px;width:calc(100% - 32px);margin:0 16px;padding:16px;border:0;border-radius:22px;background:var(--cell);color:var(--label);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--snappy)}
.ppcard:active{transform:scale(.985)}
.ppmini{flex:none;width:84px;transform:rotate(-5deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.28))}.ppmini svg{width:100%;display:block}
.ppt{display:flex;flex-direction:column;gap:3px;min-width:0}.ppt b{font-size:17px}.ppt small{font-size:13px;color:var(--label-2)}
.ppt .pill{align-self:flex-start;margin-top:8px;padding:7px 15px;border-radius:99px;background:var(--tint-fill);color:#fff;font-weight:600;font-size:15px}
.ppleather{fill:#5a1a26}.ppgold{fill:none;stroke:#d6b45f;stroke-width:2.2}.ppgoldf{fill:#d6b45f;stroke:none}
.ppc1,.ppc2,.ppc3{fill:#d6b45f;stroke:none;text-anchor:middle;font-family:Georgia,"Times New Roman",serif;font-weight:700}.ppc1{font-size:26px;letter-spacing:7px}.ppc2{font-size:19px;letter-spacing:6px}.ppc3{font-size:8px;letter-spacing:2.5px;font-weight:600}
.ppdefs{position:absolute;width:0;height:0}
.ppbook{--pp:#f6f1e3;--ppink:#1f2a36;--pplab:#7c8490;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:4px 0 0;padding:4px 0 14px;scrollbar-width:none;overscroll-behavior-x:contain}
.ppbook::-webkit-scrollbar{display:none}
.ppage{flex:none;width:100%;scroll-snap-align:center;padding:0 16px;box-sizing:border-box}
.ppage > *{display:block;width:100%;aspect-ratio:358/520;max-height:calc(100dvh - 230px);margin:0 auto;border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 22px rgba(0,0,0,.16),inset 3px 0 0 rgba(0,0,0,.12)}
.ppage:empty::before{content:"";display:block;aspect-ratio:358/520;max-height:calc(100dvh - 230px);border-radius:6px;background:var(--pp)}
.ppaper{fill:var(--pp)}.ppguilp{fill:none;stroke:#8fb3b0;stroke-width:.5;opacity:.45}.ppwm{fill:#5a6b7a;opacity:.07}
.pphd{font:700 9px Georgia,serif;letter-spacing:4px;text-anchor:middle;fill:#9aa8a6}.ppjr{font:600 8px ui-monospace,Menlo,monospace;letter-spacing:1px;text-anchor:middle;fill:#8a8f94}.pppn{font:600 10px Georgia,serif;fill:#9aa8a6;text-anchor:middle}
.ppg .ps{fill:none;stroke:currentColor;stroke-width:3}.ppg .ps.pst{stroke-width:1.3}.ppg .pf{fill:currentColor;stroke:currentColor;stroke-width:2;opacity:.9}
.ppg .px{font:700 10px "Courier New",ui-monospace,monospace;fill:currentColor;color:inherit;text-anchor:middle;letter-spacing:1px}.ppg .px.pxb{font:800 13px Georgia,"Times New Roman",serif;letter-spacing:1.2px}.ppg .px.pxs{font-size:7.5px;letter-spacing:1.4px}.ppg .px.pxs2{font-size:10px}
.ppg [data-act]{cursor:pointer;outline:none;transition:opacity .25s}.ppg [data-act]:focus-visible .ps{stroke-width:4.5}.ppg .pphit{opacity:.55;transition:opacity .1s}
.ppdata{padding:22px 20px 0;background:radial-gradient(circle at 20px 20px,transparent 17.5px,rgba(201,154,165,.22) 18px,transparent 18.6px) 0 0/40px 40px,radial-gradient(circle at 0 0,transparent 17.5px,rgba(143,179,176,.22) 18px,transparent 18.6px) 0 0/40px 40px,var(--pp);color:var(--ppink);font-family:Georgia,"Times New Roman",serif;position:relative;overflow:hidden;box-sizing:border-box}
.pptop{display:grid;grid-template-columns:1fr auto;column-gap:8px}.pptop b{font-size:13px;letter-spacing:4px;color:#3c4652}.pptop small{grid-row:2;font-size:8.5px;letter-spacing:2px;color:#6c7480}.pptop em{grid-row:1;grid-column:2;font-style:normal;font-size:8.5px;letter-spacing:2px;color:#6c7480}
.ppid{display:flex;gap:16px;margin-top:20px}.ppphoto{flex:none;width:31%;aspect-ratio:104/132;border-radius:6px;background:color-mix(in srgb,var(--pp),#5a4a2a 13%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);display:grid;place-items:center;overflow:hidden}.ppphoto .av{width:80%;height:auto;aspect-ratio:1;font:600 26px -apple-system,system-ui,sans-serif;filter:grayscale(.35) sepia(.15)}
.ppfs{display:flex;flex-direction:column;gap:9px;min-width:0}.ppf{display:flex;flex-direction:column;gap:1px;min-width:0}.ppf small{font:600 7.5px -apple-system,system-ui,sans-serif;letter-spacing:.3px;color:var(--pplab)}
.ppf b{font:700 12.5px "Courier New",ui-monospace,monospace;letter-spacing:.6px;color:var(--ppink);overflow-wrap:anywhere}
.ppgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:20px}
.ppsig{margin-top:18px}.ppsig svg{width:46%;display:block}.ppsig path{fill:none;stroke:#1f3a7a;stroke-width:1.6;stroke-linecap:round}.ppsig small{font-size:8.5px;letter-spacing:2px;color:#6c7480}
.ppmrz{position:absolute;left:0;right:0;bottom:0;padding:12px 20px 14px;background:rgba(255,255,255,.35);font:700 clamp(9px,3vw,11.4px) "OCR B","Courier New",ui-monospace,monospace;letter-spacing:.06em;line-height:1.9;color:var(--ppink);white-space:nowrap;overflow:hidden}
.pppager{display:flex;align-items:center;justify-content:space-between;margin:0 16px}.pplbl{font-size:13px;color:var(--label-2);font-variant-numeric:tabular-nums}
.pppager .nbtn:disabled{opacity:.3}.pppager .ppnext svg{transform:scaleX(-1)}
/* in the dark: the pages are still paper, just dimmer */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ppbook{--pp:#d9d2c1}}
:root[data-theme="dark"] .ppbook{--pp:#d9d2c1}

/* disappearing messages: the line at the top of the chat */
.sysline.vanishline svg{display:inline-block;width:12px;height:12px;vertical-align:-1px;margin-right:5px}

/* verify in person: the safety number as a code, the scanner, the Verified mark */
.safeqr{display:flex;justify-content:center;margin:4px 0 2px}
.safeqr .qrbox{width:200px;height:200px;padding:10px;border-radius:20px;background:#fff;box-shadow:0 1px 0 var(--sep)}
.safeqr .qrbox svg{display:block;width:100%;height:100%}
.profile-head .verified{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-size:14px;font-weight:600;color:var(--green-t,#1d7f37)}
.profile-head .verified svg{width:15px;height:15px}
.scanbox{position:relative;margin:4px 16px 0;aspect-ratio:1;max-width:100%;border-radius:22px;overflow:hidden;background:#000}
.scanbox video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s}
.scanbox video.on{opacity:1}
.scanframe{position:absolute;inset:18%;border:3px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.scanmsg{text-align:center}
.warn.strong{background:color-mix(in srgb,var(--red,#ff3b30) 16%,var(--cell));border-color:color-mix(in srgb,var(--red,#ff3b30) 45%,transparent)}

/* ---------- the Moon (pigeon/moon.js): lunar pigeons, the picker, a flight to or from it ---------- */
:root{--p-lunar:#8190b3;--p-lunarx:#5e5ce6}
.pg.lunar{--pg:var(--p-lunar);background:linear-gradient(160deg,#e3e8f3,var(--p-lunar) 55%,#56607a)}
.pg.lunarx{--pg:var(--p-lunarx);background:linear-gradient(160deg,#b9b8ff,var(--p-lunarx) 55%,#3532a8)}
.k-lunar{--k:var(--p-lunar)}.k-lunarx{--k:var(--p-lunarx)}
.mpwrap{position:relative;margin:4px 16px 0;border-radius:22px;overflow:hidden;background:#03050c}
.moonpick{display:block;width:100%;aspect-ratio:1;max-height:56vh;cursor:crosshair;touch-action:manipulation}
.mpside{position:absolute;left:0;right:0;bottom:10px;justify-content:center;margin:0}
.mpside .cc{min-height:36px;padding:4px 12px;background:rgba(20,24,38,.72);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mpside .cc small{color:rgba(235,235,245,.6)}
.mpside .cc[aria-checked=true]{box-shadow:inset 0 0 0 1.5px #ffd166}
.mpsel{display:grid;gap:2px;padding:12px 20px 10px}
.mpsel b{font-size:20px;letter-spacing:-.3px;text-wrap:balance}
.mpsel small{color:var(--label-2);font-size:13px}
.body.moonbody{display:flex;flex-direction:column;background:#03050c;color:#f5f5f7}
.moonsky{display:block;width:100%;height:min(46vh,380px);flex:none}
.mooncard{margin:-18px 12px 16px;padding:14px 16px 6px;border-radius:22px;background:rgba(22,26,40,.92);border:1px solid rgba(160,180,230,.14);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:relative}
.mchead{display:flex;align-items:center;gap:10px}
.mchead .pg{font-size:22px}
.mct{display:grid;min-width:0;flex:1}
.mct b{font-size:17px}
.mct small{color:rgba(235,235,245,.62);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mceta{display:grid;text-align:right;font-variant-numeric:tabular-nums}
.mceta b{font-size:19px;letter-spacing:-.3px}.mceta b.lost{color:#ff6961}
.mceta small{color:rgba(235,235,245,.62);font-size:12px}
.mcnow{margin:10px 0 8px;font-size:14px;color:#ffd166;font-variant-numeric:tabular-nums}
.mcbar{height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.mcbar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#ffd166,#ff9f0a)}
.mcsteps{list-style:none;margin:10px 0 0;padding:0}
.mcsteps li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07);font-size:14px;color:rgba(235,235,245,.5)}
.mcsteps li:first-child{border-top:0}
.mcsteps li.done{color:#f5f5f7}
.mci{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08)}
.mci svg{width:15px;height:15px}
.mcsteps li.done .mci{background:rgba(255,209,102,.18);color:#ffd166}
.mcs{flex:1;min-width:0}
.mcsteps time{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet:has(.moonbody){background:#03050c}
.sheet:has(.moonbody) header h2{color:#f5f5f7}
/* (a flush sheet doesn't scroll, for the Earth's map; a trip to the Moon has its moments below, so it does) */
.sheet .body.flush.moonbody{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px)}
.mooncard{flex:none}
.mcplay{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
/* a group's space pigeons: whose to watch */
.mcwho{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.mcw{border:0;border-radius:999px;padding:6px 12px;min-height:30px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);font:600 13px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.mcw.on{background:rgba(255,209,102,.2);color:#ffd166}
.mcreplay{flex:1;accent-color:#ffd166}
.mclive{border:0;border-radius:999px;padding:5px 12px;background:rgba(255,209,102,.18);color:#ffd166;font:600 13px/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.mcshare{margin:6px -4px 4px}
.mcshare .btn{background:rgba(255,255,255,.08);color:#f5f5f7}
.pg.laser{--pg:#e5484d;background:linear-gradient(160deg,#ffb3a8,#e5484d 55%,#8f1d22)}
.pg.orbital{--pg:#0a84ff;background:linear-gradient(160deg,#9fd0ff,#0a84ff 55%,#0b3d91)}
.k-laser{--k:#e5484d}.k-orbital{--k:#0a84ff}

/* ---- Look up: the sky ahead, with the pigeon where it is (always the night sky's colours: it is the sky) ---- */
.sheet.looksheet{background:#03050f}
.sheet.looksheet > header h2{color:#f5f5f7}
.sheet.looksheet > header .nbtn{color:#f5f5f7;background:rgba(255,255,255,.14)}
.look{position:relative;height:100%;overflow:hidden}
.lookcv{position:absolute;inset:0;width:100%;height:100%;display:block}
.lookhud{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:22px;
  background:rgba(10,14,28,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#f5f5f7}
.lkwho{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(245,245,247,.75)}
.lkbig{font-size:30px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lkwhere{font-size:15px;color:rgba(245,245,247,.85)}
.lkhow{margin-top:4px;font-size:15px;font-weight:600}
.mclook{margin:6px -4px 4px}
.mclook .btn{background:rgba(255,255,255,.08);color:#f5f5f7}
.lookvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.lookbar{position:absolute;top:12px;right:12px;left:12px;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;pointer-events:none}
.lookcam,.lookhere{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 11px;border:0;border-radius:19px;pointer-events:auto;
  background:rgba(10,14,28,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#f5f5f7;font:600 14px/1 -apple-system,system-ui,sans-serif}
.lookcam .ico,.lookhere .ico{width:20px;height:20px}
.lookcam[aria-pressed="true"],.lookhere[aria-pressed="true"]{background:#f5f5f7;color:#0b0f1c}
.lookcam:focus-visible,.lookhere:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lookcam[hidden]{display:none}
/* (Look Up's and a trip's little buttons give under a finger, like every other) */
.lookcam,.lookhere,.mcw,.mclive{transition:transform .35s var(--snappy),background-color .25s,color .25s}
.lookcam:active,.lookhere:active,.mcw:active,.mclive:active{transform:scale(.94)}
.lookghost{position:absolute;inset:0;pointer-events:none}
.lksrc{font-size:12px;color:rgba(245,245,247,.6)}

/* ---------- Privacy & Security, Encryption, Safety Number, Passkeys ---------- */
/* how protected you are, at a glance: a shield in a ring that fills as each thing is done */
.keyart{display:block;flex:none}
.keyart.tile{width:30px;height:30px;padding:0;background:none;box-shadow:none;border-radius:9px}
.keyart.keyhuge{width:96px;height:96px;margin-bottom:8px}
.keyhero .mono{font-family:var(--mono);font-size:15px;line-height:22px;letter-spacing:.4px;margin-top:2px}
.keyhero .btn{margin-top:6px}
details.learn{margin:10px 36px 0;font-size:13px;line-height:18px;color:var(--label-2)}
details.learn summary{cursor:pointer;color:var(--tint);list-style:none;font-weight:500}
details.learn summary::-webkit-details-marker{display:none}
details.learn summary::after{content:" ›";display:inline-block;transition:transform .25s}
details.learn[open] summary::after{transform:rotate(90deg)}
details.learn p{margin:6px 0 0}
details.learn[open] p{animation:fc-in .3s var(--snappy)}

/* Encryption: three steps, your key, and each friend's standing */
.pkhero p{max-width:30ch;text-wrap:balance}
.spill{flex:none;display:inline-flex;white-space:nowrap;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:13px;font-weight:600;color:var(--label-2);background:var(--cell-2,rgba(120,120,128,.12))}
.spill .ico{flex:none;width:13px;height:13px;stroke-width:2.6}
.spill.ok{color:var(--green-t);background:color-mix(in srgb,var(--green) 15%,transparent)}
.spill.bad{color:var(--orange-t);background:color-mix(in srgb,var(--orange) 16%,transparent)}

/* Safety Number: their picture in a ring that says where you stand */
.safehero{--st:var(--gray)}
.safehero.s-ok{--st:var(--green)}.safehero.s-warn{--st:var(--orange)}
.safering{position:relative;display:grid;place-items:center;padding:5px;border-radius:50%;box-shadow:0 0 0 3px var(--st);transition:box-shadow .4s}
.safehero.s-none .safering{box-shadow:0 0 0 2px color-mix(in srgb,var(--gray) 45%,transparent)}
.safebadge{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--st);color:#fff;font-size:14px;box-shadow:0 0 0 3px var(--bg)}
.safebadge .ico{stroke-width:2.6}
.safesay{display:inline-flex;align-items:center;gap:5px;font-size:15px;color:var(--label-2)}
.safehero.s-warn .safesay{color:var(--orange-t);font-weight:600}
.safewin{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg);pointer-events:none}
.safewin circle{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;animation:safewin .8s cubic-bezier(.32,.72,0,1) forwards}
@keyframes safewin{to{stroke-dashoffset:0}}
.safehero.won .safebadge{animation:pop .6s var(--bouncy) .45s both}
.safehero.won .verified{animation:wnin .5s cubic-bezier(.32,.72,0,1) .55s both}
.safehero.won .safering::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 55%,transparent);animation:safeglow 1.2s ease-out .6s}
@keyframes safeglow{to{box-shadow:0 0 0 22px transparent}}
.safecard{margin:18px 16px 0;padding:18px;border-radius:26px;background:var(--cell);display:flex;flex-direction:column;align-items:center;gap:14px}
.safestep{display:flex;align-items:flex-start;gap:12px;align-self:stretch}
.safestep.out{margin:24px 34px 10px 20px}
.stepn{flex:none;width:26px;height:26px;margin:2px 0 6px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--tint) 14%,transparent);color:var(--tint-t);font-size:14px;font-weight:700}
.safecard .safeqr{padding:0}
.safecard .qrbox{width:176px;height:176px;padding:8px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--sep)}
.safecard .qrbox svg{display:block;width:100%;height:100%}
.safedig{position:relative}
.safedig .digits{gap:8px 10px;padding:18px 16px 50px;font-size:19px;font-variant-numeric:tabular-nums}
.safedig .digits span{padding:6px 0;border-radius:10px;background:color-mix(in srgb,var(--label) 4%,transparent)}
.safedig .digits span:nth-child(6n+4),.safedig .digits span:nth-child(6n+5),.safedig .digits span:nth-child(6n+6){background:color-mix(in srgb,var(--tint) 7%,transparent)}
.safecopy{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);border:0;background:none;color:var(--tint);font-size:15px;font-weight:600;padding:4px 10px}
.pkhero .wnlogo{background:linear-gradient(160deg,color-mix(in srgb,var(--indigo) 65%,#fff),var(--indigo));box-shadow:0 8px 22px color-mix(in srgb,var(--indigo) 35%,transparent)}
.safedone{margin:18px 16px 0;padding:16px 18px;border-radius:26px;display:flex;align-items:flex-start;gap:14px;background:color-mix(in srgb,var(--green) 12%,var(--cell))}
.safedone .tile{width:36px;height:36px;border-radius:50%;font-size:19px}
.safedone .tile .ico{stroke-width:2.8}

/* Signed-In Phones: how many places, this phone, any others (a new one marked) */
.sesshero .wnlogo{position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--green) 65%,#fff),var(--green));box-shadow:0 8px 22px color-mix(in srgb,var(--green) 35%,transparent)}
.sesshero.alert .wnlogo{background:linear-gradient(160deg,color-mix(in srgb,var(--orange) 65%,#fff),var(--orange));box-shadow:0 8px 22px color-mix(in srgb,var(--orange) 35%,transparent)}
.sesshero .wnlogo b{position:absolute;right:-6px;top:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;display:grid;place-items:center;background:var(--tint-fill);color:#fff;font-size:14px;font-weight:700;box-shadow:0 0 0 3px var(--bg)}
.sesshero p{max-width:30ch;text-wrap:balance}
.sessrow{align-items:flex-start}
.sessrow .tile{margin-top:2px}
.sessrow .csub + .csub{margin-top:1px}
.sessrow .link{align-self:center}
.sessrow.fresh{background:color-mix(in srgb,var(--orange) 8%,transparent)}
.newtag{display:inline-block;vertical-align:2px;margin-left:4px;padding:1px 7px;border-radius:999px;background:var(--orange);color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.sessnone .csub{margin-top:1px}
/* how many friends you've verified, under the Encryption row */
.vbar{display:block;height:4px;margin-top:7px;border-radius:2px;background:color-mix(in srgb,var(--green) 16%,transparent);overflow:hidden}
.vbar b{display:block;height:100%;border-radius:2px;background:var(--green)}

/* Account's card, as Weather's: your photo, your name, "@handle · georgefarrowgreen.com", and on to your account's page */
.me-cell{min-height:80px;gap:14px;padding-top:14px;padding-bottom:14px}
.me-cell .av.l{width:52px;height:52px;font-size:21px}
.me-cell .ctext{gap:3px}
.me-cell .name{font-size:17px;line-height:22px;font-weight:650}
.me-cell .csub{font-size:14px}
.locsheet{height:6px}

/* the way in: "New here?" to the account's own page, and "or with your email" between a passkey and the form */
.wnew{margin:18px 20px 0;text-align:center;font-size:15px;color:var(--label-2)}
.wnew a{color:var(--tint);text-decoration:none;font-weight:600;display:inline-block;padding:12px 6px;margin:-12px -6px}
.welcome .wnew{margin-top:10px;color:rgba(214,224,255,.7)}
.auth.night .wnew a,.welcome .wnew a{color:#cfe0ff}
.welcome .winvite{margin:6px 32px 0;max-width:320px;text-align:center;font-size:15px;line-height:1.4;color:rgba(214,224,255,.82);opacity:0;animation:wfade 1.2s ease 1.4s forwards}
@media (prefers-reduced-motion:reduce){.welcome .winvite{animation:none;opacity:1}}
.welcome.again .winvite{animation:none;opacity:1}
.orline{display:flex;align-items:center;gap:12px;margin:16px 20px 2px;color:var(--label-2);font-size:14px}
.orline::before,.orline::after{content:"";flex:1;height:.5px;background:var(--sep)}

/* (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(--label); caret-color: var(--label);
  transition: background-color 0s 600000s, color 0s 600000s;
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- the sky's glass (in keeping with the account page and Weather) ----------
   Last, so that what lies on the sky is a pane of it wherever an earlier rule gave it a colour of its own. A clear pane
   with a sheen, a bright rim and a soft lift, and no blur: over the sky's soft light a blur would change next to
   nothing, and cost one for every pane on the screen (and turn each a shade on ending any fade it's in). What floats
   over moving things (the bars, sheets, menus) has one. */
.group,.seg,.mlist,.search,.acard,.flyrun,.mycode,.safecard,.waycard,.ppcard,.seasoncard{background:var(--sheen),var(--pane);box-shadow:var(--edge),var(--lift)}
.lstat,.badge2,.skin2,.pmtile,.bstats div,.loftkit{background:var(--sheen),var(--pane);box-shadow:var(--edge),0 0 0 .5px var(--sep)}
.search{box-shadow:var(--edge),0 0 0 .5px var(--sep)}
.sheet .group{box-shadow:var(--edge),0 0 0 .5px var(--sep)}
/* the Messages list: one pane, as Settings' groups are */
.mlist{margin:0 12px;padding:4px 0;border-radius:28px}
.mlist:not(:has(> *)){display:none}         /* (no chats yet: no empty pane) */
/* friends' bubbles: glass, as the groups are (the photo, voice, gone and big-emoji ones as they were) */
.b:where(:not(.me,.pic,.once,.gone,.up,.lost,.jumbo,.sealed)){background:var(--sheen),var(--bubble-in);box-shadow:var(--edge),0 6px 16px -10px rgba(0,0,0,.35)}
/* tiles and pictures with a little depth: a light along the top, a shadow under */
.tile{position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 12px -4px rgba(0,0,0,.35)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.38),rgba(255,255,255,0) 55%);pointer-events:none}
.tile.kb::after,.tile.emo::after{display:none}
.av{box-shadow:0 0 0 1.5px rgba(255,255,255,.45),0 6px 14px -6px rgba(0,0,0,.45)}
/* the floating glass that had colours of its own: the same glass as the rest */
.menu-pop,.toast,.attach,.replybar,.recbar,.newpill,.asheet .grp,.asheet .cancel{background:var(--sheen),var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--edge),var(--lift)}
@media (prefers-reduced-transparency:reduce){
  .group,.seg,.mlist,.search,.acard,.flyrun,.mycode,.safecard,.waycard,.ppcard,.seasoncard,.lstat,.badge2,.skin2,.pmtile,.bstats div,.loftkit{background:var(--cell)}
  .b:where(:not(.me,.pic,.once,.gone,.up,.lost,.jumbo,.sealed)),.b:not(.me)::before{background:var(--cell)}
  .sheet,.menu-pop,.toast,.attach,.replybar,.recbar,.newpill,.asheet .grp,.asheet .cancel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--cell)}
}