/* InFlite Today, at inflite.ai: neutral surfaces, clear type and a shared green action accent.
   App symbols and semantic chart colours identify the content, alongside the morning's one notification. At the foot, two
   shared blocks copied from the georgefarrowgreen repository, never edited here: InFlite's menu and header
   (.tools/inflite/menu.css, by node .tools/iflmenu.mjs ../inflite/today/public) and InFlite's way in
   (.tools/inflite/signin.css, by node .tools/signin.mjs ../inflite/today/public). No inline styles anywhere: the
   page's rules allow none, so every figure a drawing needs is a custom property set by the script (cards.js applyVars). */

/* ---- InFlite's tokens: dark first, light in both light blocks ---- */
:root {
  color-scheme: dark;
  --sky-a: var(--ifl-page, #101210); --sky-b: var(--ifl-page, #101210); --sky-c: var(--ifl-page, #101210); --sky-top: var(--ifl-page, #101210);
  --aura-1: transparent; --aura-2: transparent; --aura-3: transparent;
  --text: var(--ifl-text, #f4f7f2); --text-2: var(--ifl-muted, #bac2b9); --text-3: var(--ifl-muted, #bac2b9);
  /* (shared surfaces, the same in every app: a card set into a card; a count's badge, white on it at 4.5:1 or more) */
  --inset: var(--ifl-surface-2, #222622); --raised: var(--ifl-raised, #2b302b); --badge: #d93025;
  --glass: var(--ifl-surface, #191c19); --glass-strong: var(--ifl-surface, #191c19); --glass-ctl: var(--ifl-surface-2, #222622);
  --line: var(--ifl-line, rgba(255,255,255,.1)); --press: color-mix(in srgb, var(--ifl-text, #f4f7f2) 6%, transparent); --field: var(--ifl-surface-2, #222622);
  --tint: var(--ifl-accent, #73d781); --tint-deep: var(--ifl-accent-fill, #73d781); --tint-text: var(--ifl-accent-ink, #97e84e); --danger: #ff877e; --good: #4fdc8e; --good-text: #4fdc8e; --warn: #ffbd4a;
  --edge: inset 0 0 0 0 transparent;
  --lift: var(--ifl-shadow-card, 0 3px 14px rgba(0,0,0,.12));
  --blur: none;
  --sheen: none;
  --dim: rgba(0, 0, 0, 0.5);
  --ifh-ink: var(--text); --ifh-ink-2: var(--text-2); --ifh-tint: var(--tint-text); --ifh-glass: var(--ifl-surface, #191c19); --ifh-band: var(--ifl-page, #101210);
  /* each app's own colour */
  --c-chat: #2b6fe6; --c-weather: #3a86f0; --c-fitness: #f0542e; --c-markets: #12a46a; --c-mail: #1aa58f; --c-account: #5b4fe0; --c-inflite: #2a6ae6;
  --ease-out: var(--ifl-motion-glide, cubic-bezier(0.22, 1, 0.36, 1)); --ease-glide: var(--ifl-motion-glide, cubic-bezier(0.32, 0.72, 0, 1));
  --ease-spring: var(--ifl-motion-spring, cubic-bezier(0.22, 1, 0.36, 1));
  --r-group: var(--ifl-radius-group, 22px); --r-hero: var(--ifl-radius-card, 26px); --r-card: var(--ifl-radius-card, 26px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --top: env(safe-area-inset-top, 0px);
  /* Weather's white clouds, drawn on glass instead of on its sky */
  --cloud-glass: #eef3f9;
  --switch-off: rgba(120, 120, 128, 0.36); --knob: #ffffff;
  /* an opaque glass, for Reduce Transparency */
  --solid: var(--ifl-surface, #191c19);
  /* the way in: its glow, and the pill over Sign in */
  --in-glow: transparent; --in-glow-2: transparent; --in-icon-shadow: rgba(0,0,0,.16); --in-icon-edge: var(--ifl-line, rgba(255,255,255,.1));
  --ifl-pill: var(--ifl-surface, #191c19); --ifl-pill-ink: var(--ifl-muted, #bac2b9); --ifl-pill-edge: var(--ifl-shadow-control, 0 1px 4px rgba(0,0,0,.08));
}

@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  color-scheme: light;
  --sky-a: var(--ifl-page, #101210); --sky-b: var(--ifl-page, #101210); --sky-c: var(--ifl-page, #101210); --sky-top: var(--ifl-page, #101210);
  --aura-1: transparent; --aura-2: transparent; --aura-3: transparent;
  --text: var(--ifl-text, #f4f7f2); --text-2: var(--ifl-muted, #bac2b9); --text-3: var(--ifl-muted, #bac2b9);
  --inset: var(--ifl-surface-2, #222622); --raised: var(--ifl-raised, #2b302b);
  --glass: var(--ifl-surface, #191c19); --glass-strong: var(--ifl-surface, #191c19); --glass-ctl: var(--ifl-surface-2, #222622);
  --line: var(--ifl-line, rgba(255,255,255,.1)); --press: color-mix(in srgb, var(--ifl-text, #f4f7f2) 6%, transparent); --field: var(--ifl-surface-2, #222622);
  --tint: var(--ifl-accent, #73d781); --tint-deep: var(--ifl-accent-fill, #73d781); --tint-text: var(--ifl-accent-ink, #97e84e); --danger: #d12a1f; --good: #1f9d55; --good-text: #167a42; --warn: #945600;
  --edge: inset 0 0 0 0 transparent;
  --lift: var(--ifl-shadow-card, 0 3px 14px rgba(0,0,0,.12));
  --sheen: none;
  --dim: rgba(10, 14, 30, 0.32);
  --ifh-glass: var(--ifl-surface, #191c19); --ifh-band: var(--ifl-page, #101210);
  --cloud-glass: #c3cee0; --solid: var(--ifl-surface, #191c19);
  --in-glow: transparent; --in-glow-2: transparent; --in-icon-shadow: rgba(0,0,0,.16); --in-icon-edge: var(--ifl-line, rgba(255,255,255,.1));
  --ifl-pill: var(--ifl-surface, #191c19); --ifl-pill-ink: var(--ifl-muted, #bac2b9); --ifl-pill-edge: var(--ifl-shadow-control, 0 1px 4px rgba(0,0,0,.08));
} }
:root[data-theme="light"] {
  color-scheme: light;
  --sky-a: var(--ifl-page, #101210); --sky-b: var(--ifl-page, #101210); --sky-c: var(--ifl-page, #101210); --sky-top: var(--ifl-page, #101210);
  --aura-1: transparent; --aura-2: transparent; --aura-3: transparent;
  --text: var(--ifl-text, #f4f7f2); --text-2: var(--ifl-muted, #bac2b9); --text-3: var(--ifl-muted, #bac2b9);
  --inset: var(--ifl-surface-2, #222622); --raised: var(--ifl-raised, #2b302b);
  --glass: var(--ifl-surface, #191c19); --glass-strong: var(--ifl-surface, #191c19); --glass-ctl: var(--ifl-surface-2, #222622);
  --line: var(--ifl-line, rgba(255,255,255,.1)); --press: color-mix(in srgb, var(--ifl-text, #f4f7f2) 6%, transparent); --field: var(--ifl-surface-2, #222622);
  --tint: var(--ifl-accent, #73d781); --tint-deep: var(--ifl-accent-fill, #73d781); --tint-text: var(--ifl-accent-ink, #97e84e); --danger: #d12a1f; --good: #1f9d55; --good-text: #167a42; --warn: #945600;
  --edge: inset 0 0 0 0 transparent;
  --lift: var(--ifl-shadow-card, 0 3px 14px rgba(0,0,0,.12));
  --sheen: none;
  --dim: rgba(10, 14, 30, 0.32);
  --ifh-glass: var(--ifl-surface, #191c19); --ifh-band: var(--ifl-page, #101210);
  --cloud-glass: #c3cee0; --solid: var(--ifl-surface, #191c19);
  --in-glow: transparent; --in-glow-2: transparent; --in-icon-shadow: rgba(0,0,0,.16); --in-icon-edge: var(--ifl-line, rgba(255,255,255,.1));
  --ifl-pill: var(--ifl-surface, #191c19); --ifl-pill-ink: var(--ifl-muted, #bac2b9); --ifl-pill-edge: var(--ifl-shadow-control, 0 1px 4px rgba(0,0,0,.08));
}

/* ---- the page ---- */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font: 17px/1.35 var(--font); letter-spacing: -0.2px; color: var(--text); background: var(--sky-c);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: var(--top); z-index: 40; background: var(--sky-top); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
/* (neither the way in nor your day until the script knows which: theme.js, for at most 4 seconds) */
html.boot #out, html.boot #in { visibility: hidden; }

/* the sky: three slow lights over the gradient */
.sky { position: fixed; inset: 0 0 calc(0px - var(--fix-gap, 0px)); z-index: -1; overflow: hidden; background: var(--ifl-page, var(--sky-c)); }
.aura { display: none; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 0.9; }
.a1 { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--aura-1) 73%, transparent), color-mix(in srgb, var(--aura-1) 49%, transparent) 40%, 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) 49%, transparent) 40%, 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) 49%, transparent) 40%, 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(0.9); } }
@keyframes drift3 { to { transform: translate(10vmax, -12vmax) scale(1.08); } }

/* the header in its place, sticky over the whole page (its wrapper takes no box of its own); your photo over your
   initial, which shows where there's no photo or it doesn't load */
#hd { display: contents; }
.ifh-me .av-img { position: absolute; inset: 0; object-fit: cover; }
.me-ph { position: relative; display: grid; place-items: center; }
.me-ph .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* the header's Edit, a word in the capsule (InFlite's header itself is menu.css's, below) */
.ifh-act[data-word] { width: auto; min-width: 44px; padding: 0 12px !important; border-radius: 999px !important; font-size: 16px; font-weight: 600; }
.ifh-act[data-word]::after { border-radius: 999px; }
.ifh-name:focus { outline: none; }

/* the views, Today, Apps and You: one column each, clear of the tab bar at the foot */
.view { max-width: 640px; margin: 0 auto; padding: 4px max(16px, env(safe-area-inset-right, 0px)) calc(var(--ift-h) + 40px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
#today > section:empty, #top:empty { display: none; }
.glass { position: relative; background: var(--ifl-surface, var(--glass)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--ifl-shadow-card, var(--lift)); }
.section { margin: 0 0 26px; }
.slabel { margin: 0 18px 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.slabel:focus { outline: none; }
:is(.section, .ifl-sheet) .foot { margin: 8px 20px 0; font-size: 13px; line-height: 1.4; color: var(--text-3); }
:is(.section, .ifl-sheet) .foot a, :is(.section, .ifl-sheet) .foot button { color: var(--tint-text); font-weight: 600; text-decoration: none; }
/* (a word to tap in a line of small print, Turn On Here: a finger's reach around it, as the header's buttons have) */
:is(.section, .ifl-sheet) .foot button { position: relative; }
:is(.section, .ifl-sheet) .foot button::after { content: ""; position: absolute; inset: -13px -6px; }
.group { border-radius: var(--r-group); overflow: hidden; }
.row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 18px; text-align: left; color: var(--text); text-decoration: none; }
button.row:active, a.row:active { background: var(--press); }
.row + .row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 0.5px; background: var(--line); }
.row.plain + .row::before, .row.plain::before { left: 18px; }
.row .ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.35); }
.row .ic svg { width: 19px; height: 19px; }
.ic.blue { background: var(--ifl-surface-2, var(--glass-ctl)); color: var(--text); box-shadow: none; }
.ic.indigo { background: var(--ifl-surface-2, var(--glass-ctl)); color: var(--text); box-shadow: none; }
.ic.green { background: var(--ifl-surface-2, var(--glass-ctl)); color: var(--text); box-shadow: none; }
.ic.grey { background: var(--ifl-surface-2, var(--glass-ctl)); color: var(--text); box-shadow: none; }
.ic.teal { background: var(--ifl-surface-2, var(--glass-ctl)); color: var(--text); box-shadow: none; }
.ic.orange { background: var(--ifl-surface-2, var(--glass-ctl)); color: var(--text); box-shadow: none; }
.ic.app { background: none; overflow: hidden; box-shadow: none; }
.ic.app img { display: block; width: 100%; height: 100%; }
.row .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row .tx b { font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.row .tx small { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.row .val { flex: none; color: var(--text-2); font-size: 16px; font-variant-numeric: tabular-nums; }
.row .chev { flex: none; display: grid; color: var(--text-3); }
.row .chev svg { width: 16px; height: 16px; }
/* Buttons and switches are shared with the framework in roof/controls.css. */
.bird-ic { fill: currentColor; stroke: none; }

/* ---- a card for each app ---- */
#rest.cards { display: grid; gap: 14px; margin-bottom: 30px; }
.kept { margin: 0 6px 10px; font-size: 13.5px; color: var(--text-3); }
.tcard { border-radius: var(--r-card); padding: 18px; display: grid; gap: 12px; min-width: 0; }
.tcard > * { min-width: 0; }
/* Refresh content in order while the card itself stays available for press feedback. */
.tcard.in { --card-order: 0; }
.tcard.in > :not(.tc-head):not(.tc-reply) { animation: tc-content-in var(--ifl-motion-enter, .36s) var(--ease-spring) backwards;
  animation-delay: min(calc(var(--card-order) * var(--ifl-motion-stagger, 24ms)), var(--ifl-motion-stagger-cap, 120ms)); }
.tcard.in > :nth-child(3) { --card-order: 1; }
.tcard.in > :nth-child(4) { --card-order: 2; }
.tcard.in > :nth-child(n + 5) { --card-order: 3; }
@keyframes tc-content-in { from { opacity: .86; transform: translateY(5px); } }
.tc-head { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 -8px; padding: 0 8px; border-radius: 16px; color: var(--text); text-decoration: none; text-align: left; }
a.tc-head:active { background: var(--press); }
.tc-head img { width: 26px; height: 26px; border-radius: 7px; flex: none; }
.tc-head .tc-app { font-size: 15px; font-weight: 650; }
.tc-head .tc-meta { flex: 1; min-width: 0; font-size: 14px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-head .tc-go { flex: none; display: flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 600; color: var(--tint-text); }
.tc-head .tc-go svg { width: 15px; height: 15px; }
.tc-h { margin: 0; font: 700 22px/1.25 var(--font-d); letter-spacing: -0.3px; text-wrap: balance; overflow-wrap: anywhere; }
.tc-p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.tc-p b { color: var(--text); font-weight: 600; }
.tc-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.tc-foot .pill { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
.tc-foot .pill svg { width: 18px; height: 18px; }
.tc-foot .pill.primary svg { width: 15px; height: 15px; }
.empty-cards { padding: 26px 22px; border-radius: var(--r-card); text-align: center; display: grid; gap: 12px; justify-items: center; }
.empty-cards p { margin: 0; color: var(--text-2); font-size: 15px; }
/* (a card waiting for its answer: its head, and the shape of what's coming) */
.tcard.loading .sk { display: grid; gap: 10px; padding: 4px 0 6px; }
.tcard.loading .sk i { display: block; height: 14px; border-radius: 7px; background: var(--glass-ctl); animation: sk 1.6s ease-in-out infinite; }
.tcard.loading .sk i:first-child { height: 22px; width: 70%; }
.tcard.loading .sk i:last-child { width: 45%; }
@keyframes sk { 50% { opacity: .68; } }
.tcard.loading .sk i:nth-child(2) { animation-delay: var(--ifl-motion-stagger, 24ms); }
.tcard.loading .sk i:nth-child(3) { animation-delay: calc(2 * var(--ifl-motion-stagger, 24ms)); }

/* ---- Weather: neutral presentation; weather symbols, rain and warnings keep their meaning ---- */
:root {
  --wx-ink: var(--ifl-text, #f4f7f2); --wx-inner: var(--ifl-surface-2, #222622);
  --wx-inner-edge: inset 0 0 0 1px var(--ifl-line, rgba(255,255,255,.08));
  --wx-rain-text: color-mix(in srgb, var(--c-weather) 70%, var(--ifl-text, #f4f7f2));
  --wx-chip-a: #ffdf6b; --wx-chip-b: #f6b81c; --wx-chip-ink: #2a1c00;
  --wx-amber-a: #ffc56b; --wx-amber-b: #f28a1c; --wx-red-a: #ff7b70; --wx-red-b: #e0352b; --wx-red-ink: #ffffff;
}
.tcard.wx { background: var(--ifl-surface, var(--glass)); color: var(--ifl-text, var(--text)); }
.tcard.wx :focus-visible { outline-color: var(--ifl-accent-ink, var(--tint)); }
.wx-now { display: flex; align-items: center; gap: 12px; }
.wx-now .t { font: 200 64px/0.95 var(--font-d); letter-spacing: -2px; }
.wx-now .wi { flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18)); }
.wx-now .d { display: grid; gap: 2px; min-width: 0; }
.wx-now .d b { font-size: 18px; font-weight: 600; }
.wx-now .d small { font-size: 14.5px; color: var(--text-2); }
.wx-now .d .nw { white-space: nowrap; }
.tcard.wx .wx-brief { margin: 0; font-size: 16.5px; line-height: 1.45; font-weight: 500; color: var(--text-2); overflow-wrap: anywhere; }
.tcard.wx .wx-brief b { color: var(--text); font-weight: 650; }
.wx-warn { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px 6px 9px; border-radius: 18px; text-align: left; text-decoration: none;
  background: linear-gradient(180deg, var(--wx-chip-a), var(--wx-chip-b)); color: var(--wx-chip-ink); font-size: 14.5px; font-weight: 650; box-shadow: var(--ifl-shadow-control); transition: transform var(--ifl-motion-release, .42s) var(--ease-spring); }
.wx-warn.amber, .wx-warn.orange { background: linear-gradient(180deg, var(--wx-amber-a), var(--wx-amber-b)); }
.wx-warn.red { background: linear-gradient(180deg, var(--wx-red-a), var(--wx-red-b)); color: var(--wx-red-ink); }
.wx-warn:active { transform: scale(var(--ifl-press-scale, .97)); transition-duration: var(--ifl-motion-press, .09s); }
.wx-warn::after { content: ""; position: absolute; inset: -4px 0; border-radius: 22px; }
.wx-warn svg { width: 17px; height: 17px; flex: none; }
.wx-warn .chev { width: 14px; height: 14px; opacity: 0.7; }
.tcard.wx .wx-warn:focus-visible { outline-color: var(--ifl-accent-ink, var(--tint)); outline-offset: 3px; }
.wx-ahead { display: grid; gap: 6px; color: inherit; text-decoration: none; border-radius: 22px; }
.wx-ahead:active { background: var(--press); }
.wx-ahead .lab { font: 650 12.5px/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.wx-ahead .lab svg { width: 15px; height: 15px; }
.wx-hours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px; margin: 0 -4px; border-radius: 999px; }
.wx-hour { display: grid; justify-items: center; align-content: start; gap: 3px; border-radius: 999px; min-width: 0; width: 100%; max-width: 58px; justify-self: center; padding: 8px 0 7px; }
.wx-hour.now { background: var(--wx-inner); box-shadow: var(--wx-inner-edge); }
.wx-hour .h-time { font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.wx-hour.now .h-time { color: var(--wx-ink); }
.wx-hour .h-icon { height: 30px; display: grid; place-items: center; }
.wx-hour .h-temp { font-size: 17px; font-weight: 600; line-height: 22px; font-variant-numeric: tabular-nums; }
.wx-hour .h-pop { order: 4; font-size: 12px; font-weight: 650; color: var(--wx-rain-text); min-height: 15px; }

/* ---- Chat: its pigeons in their kinds' colours (green standard, red swift, black turbo, gold rocket), as Chat draws them ---- */
:root {
  --pg-k-standard: #30d158; --pg-k-swift: #ff6961; --pg-k-turbo: #f5f6fb; --pg-k-rocket: #f0c04a; --pg-k-dumb: #c9a27a;
  --pg-av-0: linear-gradient(150deg, #ff9fb2, #d9496f); --pg-av-1: linear-gradient(150deg, #6fd8c8, #178a7d); --pg-av-2: linear-gradient(150deg, #ffc56e, #d97a0f);
  --pg-av-3: linear-gradient(150deg, #9fb4ff, #5468dc); --pg-av-4: linear-gradient(150deg, #b9a0ff, #7a4fd8); --pg-av-5: linear-gradient(150deg, #8fd3ff, #2b86c9);
  --pg-flame: #ff8a3d; --pg-white: #ffffff; --pg-hi: rgba(255, 255, 255, 0.35);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --pg-k-standard: #1d7f37; --pg-k-swift: #c4271e; --pg-k-turbo: #1c1c1e; --pg-k-rocket: #8a6408; --pg-k-dumb: #7a5a3a; --pg-flame: #e8641a; } }
:root[data-theme="light"] { --pg-k-standard: #1d7f37; --pg-k-swift: #c4271e; --pg-k-turbo: #1c1c1e; --pg-k-rocket: #8a6408; --pg-k-dumb: #7a5a3a; --pg-flame: #e8641a; }
.pg-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 16px; font-weight: 650; color: var(--pg-white); box-shadow: inset 0 1px 0.5px var(--pg-hi); background: var(--pg-av-0); }
.pg-av.c1 { background: var(--pg-av-1); } .pg-av.c2 { background: var(--pg-av-2); } .pg-av.c3 { background: var(--pg-av-3); } .pg-av.c4 { background: var(--pg-av-4); } .pg-av.c5 { background: var(--pg-av-5); }
.pg-av .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-bird { display: block; fill: currentColor; }
.k-standard { --kk: var(--pg-k-standard); } .k-swift { --kk: var(--pg-k-swift); } .k-turbo { --kk: var(--pg-k-turbo); } .k-rocket { --kk: var(--pg-k-rocket); } .k-dumb { --kk: var(--pg-k-dumb); }
.pg-track { position: relative; display: block; height: 16px; min-width: 40px; }
.pg-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background-image: linear-gradient(90deg, var(--text-3) 55%, transparent 0); background-size: 7px 2px; animation: pg-march 0.9s linear infinite; }
.pg-track i { position: absolute; left: 0; top: 7px; height: 2px; border-radius: 1px; width: 100%; background: var(--c-chat); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; transition: transform 1s linear; }
.pg-track .cb { position: absolute; top: 0; left: calc(var(--f, 0) * 100%); width: 16px; height: 16px; margin-left: -8px; transition: left 1s linear; color: var(--kk, var(--tint-text)); }
.pg-track.k-standard .cb { color: var(--tint-text); }
.pg-track .cb svg { display: block; width: 16px; height: 16px; fill: currentColor; transform-origin: 50% 62%; animation: pg-flap 0.5s ease-in-out infinite alternate; }
.pg-track.done::before { animation: none; background: var(--good); opacity: 0.6; }
.pg-track.done i { background: var(--good); }
.pg-track.done .cb { display: none; }
@keyframes pg-march { to { background-position: -7px 0; } }
@keyframes pg-flap { to { transform: scaleY(0.82); } }
.pg-list { display: grid; margin: 0 -8px; }
.pg-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av tx go" "av tr tr"; align-items: center; column-gap: 12px; row-gap: 6px; min-height: 44px; padding: 10px 8px; border-radius: 18px; text-align: left; color: var(--text); text-decoration: none; width: 100%; }
.pg-row:active { background: var(--press); }
.pg-row + .pg-row::before { content: ""; position: absolute; top: 0; left: 60px; right: 8px; height: 0.5px; background: var(--line); }
.pg-row > .pg-av { grid-area: av; }
.pg-tx { grid-area: tx; display: grid; gap: 1px; min-width: 0; }
.pg-tx b { font-size: 16.5px; font-weight: 600; overflow-wrap: anywhere; }
.pg-tx small { font-size: 13.5px; color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pg-tx small.pg-unread { color: var(--tint-text); font-weight: 600; }
.pg-go { grid-area: go; display: grid; color: var(--text-3); }
.pg-go svg { width: 16px; height: 16px; }
.pg-row .pg-track { grid-area: tr; margin-right: 6px; }
.pg-label { margin: 2px 0 -6px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.pg-more { margin: -6px 0 0; font-size: 13.5px; color: var(--text-3); }
.pg-streak { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 16px; background: var(--glass-ctl); box-shadow: 0 0 0 0.5px var(--line); text-align: left; color: var(--text); text-decoration: none; width: 100%; }
.pg-streak:active { background: var(--press); }
.pg-flame { display: block; fill: var(--pg-flame); }
.pg-streak .pg-flame { flex: none; width: 22px; height: 22px; }
.pg-streak .tx { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pg-streak b { font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.pg-streak small { font-size: 13px; color: var(--text-2); }
.pg-chev { flex: none; width: 15px; height: 15px; color: var(--text-3); }

/* ---- Fitness: coral for its icon and rides, effort in the seven zone colours riders know, the best time over the day's hours ---- */
:root {
  --ft-z1: #a3abc0; --ft-z2: #4aa3ff; --ft-z3: #3fd08f; --ft-z4: #ffd23f; --ft-z5: #ff9440; --ft-z6: #ff5a5a; --ft-z7: #c07bff;
  --ft-on: #ffffff; --ft-ride: linear-gradient(160deg, #ff9a6a, #ee4b2f); --ft-ok: linear-gradient(180deg, #5fe39a, #1fa75a); --ft-rest: linear-gradient(160deg, #9aa3b8, #6b7389);
  --ft-well: var(--ifl-surface-2, #222622); --ft-sun-wash: rgba(255, 211, 107, 0.18); --ft-sun: #ffc53d;
  --ft-great: var(--good); --ft-good: color-mix(in srgb, var(--good) 52%, transparent); --ft-fair: rgba(255, 189, 74, 0.62); --ft-poor: color-mix(in srgb, var(--danger) 52%, transparent);
  --ft-font-r: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --ft-z1: #8b93a8; --ft-z2: #2f86f0; --ft-z3: #1fae6b; --ft-z4: #e8b400; --ft-z5: #f27318; --ft-z6: #e53935; --ft-z7: #9b51e0;
  --ft-well: var(--ifl-surface-2, #f1f2ef); --ft-fair: rgba(240, 165, 30, 0.6); --ft-sun: #d98a00;
} }
:root[data-theme="light"] {
  --ft-z1: #8b93a8; --ft-z2: #2f86f0; --ft-z3: #1fae6b; --ft-z4: #e8b400; --ft-z5: #f27318; --ft-z6: #e53935; --ft-z7: #9b51e0;
  --ft-well: var(--ifl-surface-2, #f1f2ef); --ft-fair: rgba(240, 165, 30, 0.6); --ft-sun: #d98a00;
}
.ft-sport { justify-self: start; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 11px 5px 6px; border-radius: 999px; background: var(--glass-ctl); font-size: 13px; font-weight: 600; color: var(--text-2); }
.ft-tile { flex: none; position: relative; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: var(--ft-on); }
.ft-tile svg { width: 14px; height: 14px; }
.ft-s-ride { background: var(--ft-ride); } .ft-s-ok { background: var(--ft-ok); border-radius: 50%; } .ft-s-rest { background: var(--ft-rest); }
.ft-sport.ok { color: var(--good-text); background: color-mix(in srgb, var(--good) 16%, transparent); }
.ft-meta { margin: -6px 0 0; font-size: 14.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ft-why { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.ft-why b { color: var(--text); font-weight: 600; }
.ft-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ft-chart path { shape-rendering: geometricPrecision; }
.ft-prof-mini { height: 46px; }
.ft-prof-mini .ft-chart { height: 100%; }
.ft-z1 { fill: var(--ft-z1); } .ft-z2 { fill: var(--ft-z2); } .ft-z3 { fill: var(--ft-z3); } .ft-z4 { fill: var(--ft-z4); } .ft-z5 { fill: var(--ft-z5); } .ft-z6 { fill: var(--ft-z6); } .ft-z7 { fill: var(--ft-z7); }
.ft-bestbox { display: grid; gap: 8px; padding: 12px 14px 10px; border-radius: var(--ifl-radius-row, 16px); background: var(--ft-well); box-shadow: inset 0 0 0 0.5px var(--line); }
.ft-best { display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; }
.ft-wxi { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ft-sun-wash); color: var(--ft-sun); }
.ft-wxi svg { width: 20px; height: 20px; }
.ft-best.poor .ft-wxi { background: var(--glass-ctl); color: var(--text-2); }
.ft-best .tx { display: grid; gap: 1px; min-width: 0; }
.ft-best b { font-size: 15px; font-weight: 600; color: var(--text); }
.ft-best small { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.ft-bt { position: relative; height: 24px; margin-top: 6px; }
.ft-bt-cells { display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 2px; height: 100%; }
.ft-bt-cells i { border-radius: 5px; }
.ft-bt-cells i:first-child { border-radius: 9px 5px 5px 9px; } .ft-bt-cells i:last-child { border-radius: 5px 9px 9px 5px; }
.ft-bt-cells .great, .ft-bt-key .great { background: var(--ft-great); } .ft-bt-cells .good, .ft-bt-key .good { background: var(--ft-good); }
.ft-bt-cells .fair, .ft-bt-key .fair { background: var(--ft-fair); } .ft-bt-cells .poor, .ft-bt-key .poor { background: var(--ft-poor); }
.ft-bt-win { position: absolute; top: -4px; bottom: -4px; left: calc(var(--x, 0) * 1% - 3px); width: calc(var(--w, 0) * 1% + 4px); border-radius: 10px; box-shadow: 0 0 0 2px var(--text); }
.ft-bt-now { position: absolute; top: -7px; bottom: -7px; left: calc(var(--x, 0) * 1%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--c-fitness); }
.ft-bt-now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-fitness); }
.ft-bt-axis { position: relative; height: 16px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ft-bt-axis span { position: absolute; left: calc(var(--x, 0) * 1%); transform: translateX(-50%); }
.ft-bt-axis span:first-child { transform: none; } .ft-bt-axis span:last-child { transform: translateX(-100%); }
.ft-bt-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-2); }
.ft-bt-key span { display: inline-flex; align-items: center; gap: 5px; }
.ft-bt-key i { width: 10px; height: 10px; border-radius: 3px; }
.ft-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ft-figs > div { min-width: 0; }
.ft-figs small { display: block; font-size: 12px; font-weight: 500; color: var(--text-2); }
.ft-figs b { display: block; margin-top: 2px; font: 700 20px/1.1 var(--ft-font-r); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-figs b u { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--text-2); }
.ft-next { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 12px 12px 16px; border-radius: var(--ifl-radius-row, 16px); background: var(--ft-well); box-shadow: inset 0 0 0 0.5px var(--line); text-align: left; color: var(--text); text-decoration: none; transition: transform var(--ifl-motion-release, .42s) var(--ease-spring); }
.ft-next .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ft-next .tx b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ft-next .tx small { font-size: 13px; color: var(--text-2); }
.ft-next .tx small:first-child { font-size: 12px; font-weight: 600; }
.ft-chev { flex: none; display: grid; color: var(--text-3); }
.ft-chev svg { width: 15px; height: 15px; }
.ft-next:active { transform: scale(var(--ifl-press-card, .985)); transition-duration: var(--ifl-motion-press, .09s); }

/* ---- Markets: one calm column, type and space doing the work; green and red only ever mean up and down ---- */
:root { --mk-up: #5fe0a6; --mk-down: #ff8a80; --mk-on-ic: var(--text); --mk-ic-edge: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --mk-up: #0a7a4d; --mk-down: #bf3227; } }
:root[data-theme="light"] { --mk-up: #0a7a4d; --mk-down: #bf3227; }
.mk-up { color: var(--mk-up); } .mk-down { color: var(--mk-down); } .mk-flat { color: var(--text-2); }
.mk-cbig { display: grid; gap: 10px; margin: -4px -8px 0; width: calc(100% + 16px); padding: 4px 8px 6px; border-radius: 18px; text-align: left; color: var(--text); text-decoration: none; }
.mk-cbig:active { background: var(--press); }
.mk-k { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; }
.mk-dot { display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--text-3); }
.mk-dot.on { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.mk-big { display: block; font: 600 clamp(36px, 11vw, 46px)/1 var(--font-d); letter-spacing: -1.2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-p { color: var(--text-2); font-size: 0.64em; letter-spacing: -0.4px; }
.mk-chg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-chg span { font-size: 15px; font-weight: 500; color: var(--text-2); }
.mk-spark { display: block; width: 100%; height: 54px; overflow: visible; }
.mk-spark .ln { fill: none; stroke: var(--mk-up); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mk-spark .ar { fill: color-mix(in srgb, var(--mk-up) 16%, transparent); stroke: none; }
.mk-spark.is-down .ln { stroke: var(--mk-down); } .mk-spark.is-down .ar { fill: color-mix(in srgb, var(--mk-down) 14%, transparent); }
.mk-spark .base { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: 0.7; }
.mk-name { position: relative; color: var(--text); font-weight: 600; text-decoration: none; }
/* (a finger's reach around a name in the sentence; with two, each one's kept off the other's words, the second perhaps
   on the next line) */
.mk-name::after { content: ""; position: absolute; inset: -13px -4px; }
.mk-name:not(:last-child)::after { bottom: -1px; }
.mk-name + .mk-name::after { top: -1px; }
.mk-name:active { opacity: 0.6; }
.mk-left { font-size: 13.5px; }
.mk-crows { display: grid; margin: 0 -8px; }
.mk-crow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px; border-radius: 16px; text-align: left; color: var(--text); text-decoration: none; width: 100%; }
.mk-crow:active { background: var(--press); }
.mk-crow + .mk-crow::before { content: ""; position: absolute; top: 0; left: 60px; right: 8px; height: 0.5px; background: var(--line); }
.mk-crow .ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--mk-on-ic); box-shadow: var(--mk-ic-edge); }
.mk-crow .ic svg { width: 18px; height: 18px; }
.mk-crow .tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mk-crow .tx b { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.mk-crow .tx small { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.mk-crow .chev { flex: none; display: grid; color: var(--text-3); }
.mk-crow .chev svg { width: 15px; height: 15px; }
.mk-allow { display: block; height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; box-shadow: inset 0 0 0 0.5px var(--line); }
.mk-allow i { display: block; height: 100%; width: calc(var(--used, 0) * 100%); border-radius: 3px; background: var(--mk-up); transform-origin: left; }


/* ---- the morning: one notification ---- */
.mgroup { margin-top: 14px; }
.row.pick { position: relative; cursor: pointer; }
.row.pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.row.pick .val { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.row.pick .val svg { width: 15px; height: 15px; color: var(--text-3); display: block; }
.row.pick:has(select:focus-visible) { outline: 2px solid var(--tint); outline-offset: -2px; border-radius: var(--r-group); }
label.row { cursor: pointer; }
label.row:active { background: var(--press); }
.mwhy { color: var(--text-2) !important; }
.ifl-sheet .mwhy { margin-top: 14px; }
.ifl-sheet .mgroup:first-of-type { margin-top: 4px; }

/* ---- the page's own sheets: InFlite's sheet (roof.css styles the sheet itself; here, what's in Today's) ---- */
.ifs-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: inherit; background: var(--ifl-surface-2, var(--glass-ctl)); transition: transform 0.2s; position: relative; }
.ifs-btn::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.ifs-btn svg { width: 18px; height: 18px; }
.ifs-btn:active { transform: scale(0.9); }
.sh-sub { margin: -4px 0 14px; font-size: 14.5px; color: var(--text-2); }
.ed-row { gap: 8px !important; padding-right: 12px !important; }
.mv { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--tint-text); }
.mv svg { width: 20px; height: 20px; }
.mv:disabled { color: var(--text-3); opacity: 0.4; cursor: default; }
.mv:not(:disabled):active { background: var(--press); }
.ed-row .switch { margin-left: 4px; }
.sh-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ifl-sheet .group { background: var(--glass-ctl); box-shadow: 0 0 0 0.5px var(--line); }
.ifl-sheet .row .tx b { font-size: 16px; }
/* Weather Notifications: each place's Rain and Warnings, pressed or not */
#sh-wxnotify .you-h { margin: 18px 4px 8px; }
#sh-wxnotify .you-h:first-child { margin-top: 4px; }
.wxn-place { flex-wrap: wrap; }
.wxn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.wxn-chip { min-height: 44px; }
.wxn-chip[aria-pressed="true"] { background: var(--acc-fill); color: var(--on-acc); box-shadow: none; }
.wxn-chip:disabled { opacity: 0.6; }

/* ---- signed out: InFlite's way in (where each part sits is the shared block's, at the foot), in Today's colours, with
   the mark above Sign in ---- */
/* The neutral shell can be painted before app.js or the session answer arrives. Keep its mark hidden so a
   completed logo never flashes before First Light starts. This also covers a previously cached HTML shell. */
#sessionState .ifl-top { display: none; }
.today-out .ifl-logo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, var(--in-glow), var(--in-glow-2) 55%, transparent); }
.today-out .ifl-logo img { position: relative; width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 16px 34px -14px var(--in-icon-shadow), 0 0 0 0.5px var(--in-icon-edge); }
/* First light: the approved mark assembles once when sign-in is revealed. These rules belong to Today;
   the shared sign-in block below continues to own its position. Static artwork is the fallback. */
.today-out .ifl-arrival::before { content: none; }
.ifl-arrival { pointer-events: none; }
.ifl-arrival-mark { position: relative; display: block; width: 96px; height: 96px; overflow: visible; }
.ifl-arrival-lights { position: absolute; width: 296px; height: 296px; top: calc(50% - 148px); left: calc(50% - 148px); transform: scale(0.94); }
.ifl-arrival-light { position: absolute; width: 169px; height: 169px; opacity: 0.3; transform: scale(0.85); }
.ifl-arrival-light::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse, var(--arrival-colour), transparent 67%); filter: blur(10px); }
.ifl-arrival-blue { --arrival-colour: #6db4ffa0; --arrival-x: -33px; --arrival-y: -33px; left: 0; top: 0; }
.ifl-arrival-coral { --arrival-colour: #ffad8d85; --arrival-x: 33px; --arrival-y: -33px; right: 0; top: 0; }
.ifl-arrival-teal { --arrival-colour: #5edccb90; --arrival-x: 33px; --arrival-y: 33px; right: 0; bottom: 0; }
.ifl-arrival-violet { --arrival-colour: #a798ffa0; --arrival-x: -33px; --arrival-y: 33px; left: 0; bottom: 0; }
.ifl-arrival-lift, .ifl-arrival-tile, .ifl-arrival-core { transform-origin: 512px 512px; }
.ifl-arrival-tile { filter: drop-shadow(0 110px 120px var(--in-icon-shadow)); }
.ifl-arrival-petal { transform-origin: 512px 296px; }
@media (prefers-reduced-motion: no-preference) {
  #out:not([hidden]) .ifl-arrival-lights { animation: arrival-bloom 3.3s ease-in-out both; }
  #out:not([hidden]) .ifl-arrival-light { animation: arrival-gather 2.4s cubic-bezier(0.22, 0.8, 0.26, 1) both; }
  #out:not([hidden]) .ifl-arrival-coral { animation-delay: -0.08s; }
  #out:not([hidden]) .ifl-arrival-teal { animation-delay: -0.16s; }
  #out:not([hidden]) .ifl-arrival-violet { animation-delay: -0.24s; }
  #out:not([hidden]) .ifl-arrival-lift { animation: arrival-lift 2.2s ease-in-out both; }
  #out:not([hidden]) .ifl-arrival-tile { animation: arrival-tile 2.04s cubic-bezier(0.22, 0.8, 0.26, 1) both; }
  #out:not([hidden]) .ifl-arrival-petal { animation: arrival-petal 1.98s cubic-bezier(0.18, 0.85, 0.25, 1) both; }
  #out:not([hidden]) .ifl-arrival-petal-1 { animation-delay: -0.07s; }
  #out:not([hidden]) .ifl-arrival-petal-2 { animation-delay: -0.14s; }
  #out:not([hidden]) .ifl-arrival-petal-3 { animation-delay: -0.21s; }
  #out:not([hidden]) .ifl-arrival-core { animation: arrival-core 2.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
:root[data-motion-paused] .ifl-arrival * { animation-play-state: paused !important; }
@keyframes arrival-bloom { 0% { transform: scale(0.98); } 45.5% { transform: scale(1.08); } 100% { transform: scale(0.94); } }
@keyframes arrival-gather {
  0% { opacity: 0; transform: translate(var(--arrival-x), var(--arrival-y)) scale(0.65); }
  20% { opacity: 0.8; } 55% { opacity: 1; transform: translate(0, 0) scale(1.05); }
  100% { opacity: 0.3; transform: translate(0, 0) scale(0.85); }
}
@keyframes arrival-lift {
  0% { opacity: 0; transform: translateY(90px) scale(0.93); } 25% { opacity: 1; }
  74% { transform: translateY(-20px) scale(1.018); } 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes arrival-tile { 0%, 12% { opacity: 0; transform: scale(0.82); } 65% { opacity: 1; transform: scale(1.025); } 100% { opacity: 1; transform: scale(1); } }
@keyframes arrival-petal {
  0%, 6% { opacity: 0; transform: translateY(-540px) rotate(-10deg) scale(0.84); } 24% { opacity: 1; }
  73% { transform: translateY(24px) rotate(1deg) scale(1.025); } 100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes arrival-core { 0%, 40% { opacity: 0; transform: scale(0.4); } 77% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
.today-out .ifl-go { min-height: 52px; font-size: 17px; }
.today-out .ifl-new a { color: var(--tint-text); font-weight: 600; text-decoration: none; }
.today-out .ifl-top, .today-out .ifl-cta { animation: in-rise var(--motion-page, 0.46s) var(--motion-glide, var(--ease-glide)) backwards; }
@keyframes in-rise { from { opacity: 0; transform: translateY(14px); } }
.today-said { margin: 0 0 14px; max-width: 34ch; text-align: center; font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--warn); }


/* ---- Apps: compact app destinations and custom quick access ---- */
.apps-layout { display: grid; gap: 24px; align-items: start; }
.apps-layout .apps-list { border-radius: var(--r-card); }
.apps-list .ifl-row { min-height: 80px; gap: 14px; padding: 14px 16px; }
.apps-list .ifl-lead img { width: 44px; height: 44px; border-radius: 11px; }
.apps-list .ifl-tx { min-width: 0; gap: 3px; }
.apps-list .ifl-tx b { font-size: 18px; font-weight: 650; line-height: 1.2; }
.apps-list .ifl-tx small { font-size: 14px; line-height: 1.35; }
.apps-list .ifl-row + .ifl-row::before { left: 74px; right: 16px; }
.apps-quick { min-width: 0; }
.apps-quick-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 10px; }
.apps-quick-head h2 { margin: 0; font: 700 20px/1.25 var(--font-d); letter-spacing: -0.25px; }
.apps-edit { min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill, 999px); font-size: 16px; font-weight: 600; color: var(--text); }
.apps-edit:active { background: var(--press); }
.apps-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.apps-shortcut { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 16px; border-radius: var(--r-card);
  color: var(--text); background: var(--ifl-surface, var(--glass)); box-shadow: var(--ifl-shadow-card, var(--lift)); text-decoration: none; font-size: 16px; font-weight: 600; }
.apps-shortcut > .ifl-glyph { flex: none; width: 28px; height: 28px; color: var(--acc-ink); }
.apps-shortcut svg { width: 100%; height: 100%; }
.apps-shortcut > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.apps-shortcut:active { background: var(--press); }
.apps-shortcut:focus-visible, .apps-edit:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 3px; }
.apps-empty { grid-column: 1 / -1; margin: 0; padding: 12px 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.apps-choice-help, .apps-choice-count { margin: 0 0 12px; color: var(--text-2); font-size: 15px; line-height: 1.4; }
.apps-choice-count { color: var(--text); font-weight: 600; }
.apps-editor > .ifl-btn { margin-top: 16px; }
.apps-editor .ifl-tx { min-width: 0; }
.apps-editor .ifl-row { transition: background-color var(--ifl-motion-fast, .16s) ease; }
.apps-editor .ifl-row:has(.switch:checked) { background: var(--acc-wash); }
@media (max-width: 360px) { .apps-shortcut { padding: 12px; gap: 8px; font-size: 15px; } }
@media (min-width: 1100px) { .apps-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; } }


/* ---- You: your account, rules, notifications, this phone, quiet hours, Chat, versions, Sign Out ---- */
.you-sec { margin: 0 0 24px; }
/* (You's two panes, on a computer only: on a phone the side and the main part are the one column, and the list of parts
   and the folders' copies aren't shown) */
.you-side, .you-main, .you-folds { display: contents; }
.you-nav, .you-fold { display: none; }
@media (min-width: 1100px) {
  #you.view { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); column-gap: 32px; align-items: start; max-width: 1200px; }
  .you-side { display: grid; gap: 14px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); align-content: start; }
  .you-side .you-sec { margin: 0; }
  .you-side .you-sec .row.you-me { min-height: 72px; }
  .you-side .you-me .you-ph { width: 48px; height: 48px; font-size: 19px; }
  .you-side .you-me .tx b { font-size: 17px; }
  .you-nav { display: block; padding: 6px; }
  .you-nav .row.you-tab { min-height: 46px; padding: 6px 16px; gap: 12px; border-radius: var(--ifl-radius-row, 16px); appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; cursor: pointer; width: 100%; }
  .you-nav .row.you-tab + .row::before { display: none; }
  .you-nav .row.you-tab .ic { width: 28px; height: 28px; border-radius: 8px; }
  .you-nav .row.you-tab .ic svg { width: 16px; height: 16px; }
  .you-nav .row.you-tab .tx b { font-size: 15px; font-weight: 550; }
  .you-nav .row.you-tab:hover { background: var(--press); }
  .you-nav .row.you-tab[aria-current] { background: color-mix(in srgb, var(--tint) 14%, transparent); }
  .you-nav .row.you-tab[aria-current] .tx b { color: var(--tint-text); font-weight: 650; }
  .you-nav .row.you-tab:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; }
  .you-nav .you-tab-out { margin-top: 6px; }
  .you-nav .you-tab-out .tx b { color: var(--danger); }
  .you-main { display: block; min-width: 0; }
  .you-folds { display: contents; }
  .you-main .you-sec:not(.on) { display: none; }
  .you-main .you-sec.on { display: block; margin: 0; animation: you-pane var(--ifl-motion-enter, .36s) var(--ease-spring); }
  .you-main .you-sec.on > .you-h { margin: 6px 4px 16px; font: 700 28px/1.15 var(--font-d, var(--font)); letter-spacing: -0.4px; text-transform: none; color: var(--text); }
  @keyframes you-pane { from { opacity: .88; transform: translateY(4px); } }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) { .you-main .you-sec.on { animation: none; } }
#yfBody .you-sec { margin: 4px 0 8px; }
.you-h { margin: 0 18px 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-2); }
.you-foot { margin: 8px 18px 0; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.you-sec .row { min-height: 56px; }
.you-sec .group:not(.icons) .row + .row::before { left: 18px; }
/* (a group whose rows lead with an icon: the lines between them start where the words do; a row that belongs to the one
   above it (Quiet Hours' times, Markets' Evening Wrap) set in to the words, without an icon of its own) */
.you-sec .group.icons .row + .row::before { left: 64px; }
.you-sec .row.sub { padding-left: 64px; min-height: 50px; }
.you-sec .row.sub .tx b { font-size: 16px; }
.you-sec .row .ic.app { border-radius: 8px; }
.ic.red { background: linear-gradient(160deg, #ff7a6e, #e5372c); }
/* (you, at the top: your picture and name, larger, a card of its own) */
.you-sec .row.you-me { min-height: 82px; padding-block: 14px; gap: 14px; }
.you-me .you-ph { width: 58px; height: 58px; font-size: 22px; }
.you-me .tx b { font-size: 20px; font-weight: 600; letter-spacing: -0.2px; }
.you-sec button.row { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; cursor: pointer; }
.you-sec button.row:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; border-radius: var(--r-group); }
.you-ph { position: relative; overflow: hidden; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ifl-on-accent, #10150d); font-weight: 600; background: var(--ifl-accent-gradient, linear-gradient(110deg, #24c872, #b8eb2b)); }
.you-ph .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.you-sec .row.rule { flex-wrap: wrap; row-gap: 10px; }
.you-sec .row.rule .tx { flex-basis: 12em; }
.seg { flex: none; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--glass-ctl); box-shadow: 0 0 0 0.5px var(--line); }
.seg button { position: relative; appearance: none; -webkit-appearance: none; min-width: 44px; min-height: 36px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: var(--text); font: 600 14px/1 var(--font); cursor: pointer; }
.seg button::after { content: ""; position: absolute; inset: -4px 0; border-radius: inherit; }
.seg button { transition: background-color var(--ifl-motion-fast, .16s) ease, color var(--ifl-motion-fast, .16s) ease, box-shadow var(--ifl-motion-fast, .16s) ease; }
.seg button[aria-pressed="true"] { color: var(--ifl-on-accent, #10150d); background: var(--ifl-accent-gradient, linear-gradient(110deg, #24c872, #b8eb2b)); box-shadow: var(--ifl-shadow-control); }
.seg button:focus-visible { outline: 2px solid var(--tint); outline-offset: 1px; }
.you-sec .val.soon { font-size: 14px; color: var(--text-2); }
.pill.small { min-height: 36px; padding: 0 14px; font-size: 14.5px; position: relative; }
.pill.small::after { content: ""; position: absolute; inset: -4px 0; }
.you-out { margin-top: 8px; }
.you-sec button.you-signout { justify-content: center; width: 100%; color: var(--danger, #ff6b6b); font-weight: 600; }
.you-sec .row .val { color: var(--text-2); font-variant-numeric: tabular-nums; }
.you-sec .row .tx small { overflow-wrap: anywhere; }
.you-sec .row.pick .tx { min-width: 0; flex: 1; }
.ifl-sheet .ev-old { margin-top: 6px; font-weight: 600; color: var(--text-2); }
.ifl-sheet .dev .tx b { font-size: 16px; }

/* ---- on an iPad or a computer: the header over the column ---- */
@media (min-width: 672px) {
  #hd .ifh { padding-left: calc((100% - 640px) / 2 + 16px); padding-right: calc((100% - 640px) / 2 + 16px); }
}
/* (on a computer, beside the rail (roof.css): InFlite's screens wider, and the header over them; Apps in two panes) */
@media (min-width: 1100px) {
  #hd .ifh { padding-left: max(28px, calc((100% - 1200px) / 2 + 28px)); padding-right: max(28px, calc((100% - 1200px) / 2 + 28px)); }
  .today-in .view { max-width: 1200px; padding-left: 28px; padding-right: 28px; }
}
.d-short { display: none; }
@media (max-width: 360px) {
  .tcard { padding-left: 15px; padding-right: 15px; }
  .ed-row .ic { display: none; }
  .ed-row::before { left: 18px !important; }
  .tc-head .tc-go span { display: none; }
  .d-long { display: none; } .d-short { display: inline; }
  .wx-now .t { font-size: 54px; }
  .wx-hour .h-temp { font-size: 16px; }
  .wx-warn { font-size: 13.5px; gap: 6px; padding-right: 13px; }
  .wx-warn .chev { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } }
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==== InFlite's menu, shared: from .tools/inflite/menu.css by node .tools/iflmenu.mjs (change it there) ==== */
/* InFlite pages scroll without browser pinch or double-tap zoom. */
html { touch-action: pan-x pan-y; }
/* InFlite's menu, the same in every app (.tools/inflite/menu.js): its own colours, type and shapes, whatever the
   app's, light or dark as the app is (data-theme, else the device) */
.ifm-layer, .ifm-note, .ifa-layer, .ifl-tabs, .ifl-back, .ifb-layer {
  --ifm-sheet: var(--ifl-surface); --ifm-panel: var(--ifl-surface-2);
  --ifm-line: var(--ifl-line); --ifm-text: var(--ifl-text);
  --ifm-text-2: var(--ifl-muted); --ifm-text-3: var(--ifl-subtle);
  --ifm-press: var(--ifl-press); --ifm-red: #c73229; --ifm-red-bg: rgba(199, 50, 41, 0.1);
  --ifm-green: var(--ifl-accent-ink); --ifm-dim: rgba(14, 18, 16, 0.2);
  --ifm-tint: var(--ifl-accent-ink); --ifm-warn: #9b5900;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.ifm-layer, .ifm-note, .ifa-layer, .ifl-tabs, .ifl-back, .ifb-layer) {
    --ifm-red: #ff857c; --ifm-red-bg: rgba(255, 133, 124, 0.12); --ifm-warn: #ffbf69; --ifm-dim: rgba(0, 0, 0, 0.46);
  }
}
:root[data-theme="dark"] :is(.ifm-layer, .ifm-note, .ifa-layer, .ifl-tabs, .ifl-back, .ifb-layer) {
  --ifm-red: #ff857c; --ifm-red-bg: rgba(255, 133, 124, 0.12); --ifm-warn: #ffbf69; --ifm-dim: rgba(0, 0, 0, 0.46);
}

.ifm-layer { position: fixed; inset: 0; z-index: 2147483000; background: transparent; transition: background 0.3s ease, backdrop-filter 0.3s ease; }
.ifm-layer.open { background: var(--ifm-dim); -webkit-backdrop-filter: blur(3px) saturate(120%); backdrop-filter: blur(3px) saturate(120%); }
.ifm-layer button, .ifm-layer a { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: none; min-height: 0; min-width: 0; width: auto; height: auto; }
.ifm-layer button:focus-visible, .ifm-layer a:focus-visible { outline: 2px solid var(--ifm-tint); outline-offset: 2px; }
.ifm-lit { box-shadow: 0 0 0 2px var(--ifl-accent-ink) !important; border-radius: 50%; }

.ifm-pop { position: fixed; box-sizing: border-box; width: min(340px, calc(100vw - 24px)); padding: 6px; border-radius: 30px; display: grid; gap: 6px;
  color: var(--ifm-text); background: var(--ifm-sheet); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--ifm-line), 0 12px 36px -16px rgba(14, 18, 16, 0.24);
  transform: scale(0.3); opacity: 0; transition: transform 0.5s cubic-bezier(0.32, 1.25, 0.5, 1), opacity 0.22s; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; font-size: 16px; line-height: 1.25; letter-spacing: -0.01em; }
.ifm-pop.open { transform: none; opacity: 1; }
.ifm-pop.closing { transform: scale(0.5); opacity: 0; transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s; }
.ifm-pop *, .ifm-pop *::before, .ifm-pop *::after { box-sizing: border-box; }

/* you */
.ifm-card { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 12px 14px 12px 12px !important; border-radius: 24px; transition: background 0.2s; }
.ifm-card:active { background: var(--ifm-press) !important; transform: scale(var(--ifl-press-card)); transition-duration: var(--ifl-motion-press); }
.ifm-photo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 20px; font-weight: 600; color: #fff;
  background: #556253; box-shadow: none; }
.ifm-photo > * { width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50% !important; font-size: inherit; box-shadow: none !important; }
.ifm-photo img { object-fit: cover; display: block; }
.ifm-who { min-width: 0; }
.ifm-who b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifm-who small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.2; color: var(--ifm-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifm-chev { width: 17px; height: 17px; stroke-width: 2.6; color: var(--ifm-text-3); flex: none; }

/* the app's own rows */
.ifm-rows { display: grid; gap: 6px; }
.ifm-row.off { color: var(--ifm-text-2); }
.ifm-row.off .ifm-ic { opacity: 0.55; }
.ifm-grp { border-radius: 24px; overflow: hidden; background: var(--ifm-panel); box-shadow: none; }
.ifm-row { position: relative; width: 100% !important; height: 52px !important; padding: 0 14px 0 12px !important; display: grid !important; grid-template-columns: 30px minmax(0, 1fr) auto auto; column-gap: 12px; align-items: center; }
.ifm-row.go { transition: transform var(--ifl-motion-release) var(--ifl-motion-spring), background-color var(--ifl-motion-fast); }
.ifm-row.go:active { background: var(--ifm-press) !important; transform: scale(var(--ifl-press-card)); transition-duration: var(--ifl-motion-press); }
.ifm-row + .ifm-row::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; height: 0.5px; background: var(--ifm-line); }
.ifm-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.ifm-ic svg { width: 17px; height: 17px; stroke-width: 2.1; }
.ifm-ic.red { background: #e85850; }
.ifm-ic.blue { background: #548cd4; }
.ifm-ic.green { background: #2da75b; }
.ifm-ic.orange { background: #df9527; }
.ifm-ic.indigo { background: #8a76c8; }
.ifm-ic.grey { background: #7b837b; }
.ifm-ic.teal { background: #29988b; }
.ifm-l { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifm-val { font-size: 15px; color: var(--ifm-text-2); white-space: nowrap; }
/* (its own name: an app's .warn, a banner of its own, isn't this) */
.ifm-val.ifm-warn { color: var(--ifm-warn, #c86a00); font-weight: 600; }
.ifm-row .ifm-chev { width: 15px; height: 15px; }
.ifm-switch { position: relative; width: 51px !important; height: 31px !important; border-radius: 16px !important; background: rgba(120, 120, 128, 0.2) !important; transition: background 0.25s; grid-column: 3 / 5; }
.ifm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.04); transition: transform 0.35s cubic-bezier(0.32, 1.25, 0.5, 1); }
.ifm-switch[aria-checked="true"] { background: var(--ifl-accent-gradient) !important; }
.ifm-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* its version, and Sign Out */
.ifm-foot { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 4px 0 14px; font-size: 13px; color: var(--ifm-text-2); }
.ifm-foot-ic { width: 16px; height: 16px; border-radius: 4.5px; flex: none; }
.ifm-ver { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.ifm-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ifm-green); }
.ifm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ifm-foot .ifm-upd { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px !important; border-radius: 16px !important;
  background: var(--ifl-accent-wash) !important; color: var(--ifm-tint) !important; font-size: 14px; font-weight: 600; position: relative; }
.ifm-foot .ifm-upd svg { width: 15px; height: 15px; stroke-width: 2.2; }
.ifm-foot .ifm-upd::after { content: ""; position: absolute; inset: -6px -2px; }
.ifm-foot .ifm-out { flex: none; position: relative; width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center;
  background: var(--ifm-red-bg) !important; color: var(--ifm-red) !important; transition: transform var(--ifl-motion-release) var(--ifl-motion-spring); }
.ifm-foot .ifm-out svg { width: 19px; height: 19px; stroke-width: 2; }
.ifm-foot .ifm-out::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.ifm-foot .ifm-out:active, .ifm-foot .ifm-upd:active { transform: scale(var(--ifl-press-icon, 0.94)); }

/* notifications on this device, asked for in one tap: a sheet from the foot */
.ifa-layer { position: fixed; inset: 0; z-index: 2147483002; display: flex; align-items: flex-end; justify-content: center; background: var(--ifm-dim); opacity: 0; transition: opacity 0.3s; }
.ifa-layer.on { opacity: 1; }
.ifa-sheet { box-sizing: border-box; width: min(520px, 100%); padding: 26px 22px calc(env(safe-area-inset-bottom, 0px) + 22px); border-radius: 34px 34px 0 0; text-align: center; color: var(--ifm-text);
  background: var(--ifm-sheet); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 -8px 30px rgba(14, 18, 16, 0.12);
  transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
.ifa-layer.on .ifa-sheet { transform: none; }
.ifa-ic { width: 62px; height: 62px; border-radius: 15px; }
.ifa-t { margin: 12px 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.2px; }
.ifa-p { margin: 0 auto 18px; max-width: 340px; color: var(--ifm-text-2); font-size: 15px; line-height: 1.4; }
.ifa-sheet button { appearance: none; -webkit-appearance: none; border: 0; font: inherit; cursor: pointer; display: block; width: 100%; -webkit-tap-highlight-color: transparent; }
.ifa-go { height: 50px; border-radius: 25px; background: var(--ifl-accent-gradient); color: var(--ifl-on-accent); font-size: 17px; font-weight: 600; }
.ifa-go[disabled] { opacity: 0.6; }
.ifa-later { margin-top: 8px; height: 44px; background: none; color: var(--ifm-tint); font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .ifa-sheet { transition: none; } }

/* the note after an update */
.ifm-note { position: fixed; z-index: 2147483001; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); display: flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 10px; border-radius: 22px; color: var(--ifm-text); background: var(--ifm-sheet); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--ifm-line), var(--ifl-shadow-card); transform: translate(-50%, 20px) scale(0.92); opacity: 0;
  transition: transform 0.45s cubic-bezier(0.32, 1.25, 0.5, 1), opacity 0.25s; pointer-events: none; }
.ifm-note.on { transform: translate(-50%, 0); opacity: 1; }
.ifm-note-ic { width: 36px; height: 36px; border-radius: 9px; }
.ifm-note-tx { display: grid; line-height: 1.2; }
.ifm-note-tx b { font-size: 16px; font-weight: 600; }
.ifm-note-tx small { font-size: 13.5px; color: var(--ifm-text-2); font-variant-numeric: tabular-nums; }
/* (what it says, read out from here: always there, unseen, and taking no room on any app's page) */
.ifm-say { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }

/* InFlite's header, the same in every app (.tools/inflite/menu.js header): your photo · the screen's name, large, its line
   under it · the actions in one capsule. Each app gives it its colours (--ifh-ink, --ifh-ink-2, --ifh-tint, --ifh-band: the
   band behind it scrolled, --ifh-glass: the capsule), where it starts (--ifh-pt) and the room under it (--ifh-mb); --p, 0 → 1,
   as it's scrolled. (Compact, it gives back as margin what it no longer takes up, so the page under it never moves as it
   shrinks: else the page's height, and so how far it can scroll, changes with it, and the two chase each other) */
/* (an app, not a page: no text picked up and copied by a long press or a drag, no callout, no double-tap zoom; what you
   type in stays yours to select and paste) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: pan-x pan-y; }
body, body *:not(input):not(textarea):not(select):not([contenteditable]):not([contenteditable] *) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img, svg, a { -webkit-user-drag: none; }
/* (--p animated as a number: the header's height, title size and band all move together, smoothly, as it goes compact) */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.ifh { transition: --p var(--ifl-motion-layout) var(--ifl-motion-glide); }
@media (prefers-reduced-motion: reduce) { .ifh { transition-duration: 0.01s; } }
.ifh { --p: 0; --ifh-pt0: var(--ifh-pt, calc(env(safe-area-inset-top, 0px) + 10px)); position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 12px; box-sizing: border-box; height: calc(var(--ifh-pt0) + 72px - 24px * var(--p)); margin: 0 0 calc(var(--ifh-mb, 0px) + 24px * var(--p));
  padding: calc(var(--ifh-pt0) - 4px * var(--p)) max(16px, env(safe-area-inset-right, 0px)) calc(14px - 6px * var(--p)) max(16px, env(safe-area-inset-left, 0px));
  color: var(--ifh-ink, inherit); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
/* (the band behind the header once the page has scrolled: solid the whole way down the header, so nothing reads through
   behind its title, then fading out over the 16px below it) */
.ifh::before { content: ""; position: absolute; inset: 0 0 -16px; z-index: -1; pointer-events: none; opacity: var(--p);
  background: linear-gradient(to bottom, var(--ifl-page) calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent); }
/* (at the top, no band at all: its glass isn't worked out, frame after frame, behind whatever's over the page) */
.ifh:not(.ifh-up)::before { display: none; }
/* (the blur on the header itself, not its band: a header with a view-transition-name is a backdrop root, so a blur on
   anything inside it sees nothing of the page behind; on the header, it sees the page) */
.ifh.ifh-up { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ifh button { appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ifh button:focus-visible { outline: 2px solid var(--ifl-accent-ink); outline-offset: 3px; }
.ifh .ifh-me { position: relative; flex: none; width: calc(42px - 8px * var(--p)); height: calc(42px - 8px * var(--p)); padding: 0 !important; border-radius: 50% !important; overflow: hidden;
  display: grid; place-items: center; font-size: calc(16px - 3px * var(--p)); font-weight: 600; color: var(--ifh-photo-ink, #fff); background: var(--ifh-photo, #556253) !important;
  box-shadow: var(--ifl-shadow-control); transition: transform var(--ifl-motion-release) var(--ifl-motion-spring); }
.ifh-me > * { width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 50% !important; font-size: inherit !important; box-shadow: none !important; }
.ifh-me img { object-fit: cover; display: block; }
.ifh-me.out { color: var(--ifl-accent-ink); background: var(--ifl-surface) !important; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.ifh-me.out svg { width: 22px !important; height: 22px !important; stroke-width: 2; }
.ifh-me:active, .ifh-act:active { transform: scale(var(--ifl-press-icon, 0.94)); }
.ifh-t { min-width: 0; display: grid; }
.ifh-name { display: flex; align-items: center; min-width: 0; margin: 0; font-size: calc(clamp(26px, 8.6vw, 32px) * (1 - 0.375 * var(--p))); font-weight: 700; line-height: 1.12; letter-spacing: calc(0.3px - 0.6px * var(--p));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.ifh-name > span { overflow: hidden; text-overflow: ellipsis; }
.ifh-pick { display: inline-flex !important; align-items: center; gap: 4px; min-width: 0; max-width: 100%; padding: 0 !important; font-weight: inherit !important; letter-spacing: inherit; text-align: left; }
.ifh-pick > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifh-down { flex: none; width: calc(20px - 6px * var(--p)); height: calc(20px - 6px * var(--p)); stroke-width: 2.6; margin-top: 3px; color: var(--ifh-ink-2, currentColor); }
.ifh-line { display: block; height: calc(20px * (1 - var(--p))); margin-top: calc(2px * (1 - var(--p))); overflow: hidden; opacity: calc(1 - var(--p) * 1.6);
  font-size: 15px; line-height: 20px; color: var(--ifh-ink-2, inherit); white-space: nowrap; text-overflow: ellipsis; }
.ifh-line:empty { height: 0; margin: 0; }
.ifh-line i, .ifh-line em { font-style: normal; font-weight: 600; color: var(--ifh-tint, inherit); }
.ifh-acts { display: flex; align-items: center; height: 44px; padding: 0 3px; border-radius: 999px; background: var(--ifl-surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--ifl-shadow-control); }
.ifh-acts:empty { display: none; }
.ifh-act { position: relative; width: 38px; height: 38px; padding: 0 !important; border-radius: 50% !important; display: grid; place-items: center; color: var(--ifl-text) !important; transition: transform var(--ifl-motion-release) var(--ifl-motion-spring); }
.ifh-act svg { width: 22px; height: 22px; stroke-width: 2; }
.ifh-act[disabled] { opacity: 0.4; }
/* (a 44px target round each, over the capsule's padding) */
.ifh-act::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .ifh-me, .ifh-act { transition: none; }
  .ifm-pop, .ifm-pop.closing { transform: none !important; transition: opacity 0.2s !important; }
  .ifm-note { transition: opacity 0.2s !important; }
}

/* InFlite's tab bar, the same in every app with tabs (Chat, Mail, Fitness): each app's bar (its capsule, the pill that
   slides to the tab you're on, its tabs and their counts, and at most one round button beside it, Search) takes its
   sizes from these, and its colour from --ift-tint, set by the app: the tab you're on in a soft pill of it, and its counts */
:root { --ift-h: 64px; --ift-pad: 5px; --ift-gap: 10px; --ift-max: 440px; --ift-label: 11px; --ift-icon: 24px; --ift-pill: 15%; }

/* InFlite's Settings sheet, the same in every app: a round ‹ to go back on a page inside, a round ✕ to close on every one
   (.ifs-btn), and the first page opening on the app (.ifs-hero: its icon, its name, a line about it) */
.ifs-btn { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: inherit; background: var(--ifl-surface-2); -webkit-tap-highlight-color: transparent; transition: transform var(--ifl-motion-release) var(--ifl-motion-spring); }
.ifs-btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
.ifs-btn:active { transform: scale(var(--ifl-press-icon, 0.94)); }
.ifs-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ifs-hero { display: grid; justify-items: center; gap: 4px; padding: 4px 0 16px; text-align: center; }
.ifs-hero img { width: 64px; height: 64px; border-radius: 15px; margin-bottom: 6px; box-shadow: var(--ifl-shadow-control); }
.ifs-hero b { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.ifs-hero span { font-size: 14px; opacity: 0.62; }

/* InFlite's hub (inflite.ai, one window; .tools/inflite/menu.js hub). Its tab bar, Today · Chats · Apps · You: a glass
   capsule at the foot of every page of the hub, from the tab bar's sizes above, the one you're on in a soft pill of its
   colour; it stays put as the pages cross-fade (its view-transition-name). The cross-fade between pages is asked for
   here, of every page (an at-rule can't be kept to html.ifl-hub); off the hub menu.js lets it go as a page is left */
@view-transition { navigation: auto; }
.ifl-tabs { --ifl-tab-ink: var(--ifl-muted); --ifl-tab-on: var(--ifl-on-accent); --ifl-tabs-glass: var(--ifl-surface-2);
  position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom, 0px) - var(--fix-gap, 0px)); z-index: 40; box-sizing: border-box; display: flex; gap: 0;
  width: calc(100% - 32px); max-width: var(--ift-max); height: var(--ift-h); margin: 0 auto; padding: var(--ift-pad); border-radius: 999px;
  background: var(--ifl-tabs-glass); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--ifl-line), var(--ifl-shadow-control);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; }
html.ifl-hub .ifl-tabs { view-transition-name: ifl-tabs; }
.ifl-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px;
  color: var(--ifl-tab-ink); font-size: var(--ift-label); font-weight: 600; letter-spacing: 0.1px; line-height: 1.1; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: transform var(--ifl-motion-release) var(--ifl-motion-spring), color 0.2s, background 0.2s; }
.ifl-tab-ic { flex: none; width: var(--ift-icon); height: var(--ift-icon); stroke-width: 1.9; }
.ifl-tab[aria-current="page"] { color: var(--ifl-tab-on); background: var(--ifl-accent-gradient); }
.ifl-tab:active { transform: scale(var(--ifl-press-icon, 0.94)); }
.ifl-tab:focus-visible { outline: 2px solid var(--ifl-accent-ink); outline-offset: -2px; }
/* (a phone on its side: the bar lower, its labels beside their icons) */
@media (max-height: 500px) and (orientation: landscape) { .ifl-tabs { height: 48px; } .ifl-tab { flex-direction: row; gap: 6px; } .ifl-tab-ic { width: 20px; height: 20px; } }
/* Back, in the place of an app's menu button at the hub (IFL.hub.back()) */
.ifl-back { display: inline-flex; align-items: center; justify-content: center; gap: 1px; flex: none; min-width: 44px; height: 42px; margin: 0; padding: 0 14px 0 8px;
  border: 0; border-radius: 999px; background: var(--ifm-panel); color: var(--ifm-tint); font: 600 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  box-shadow: var(--ifl-shadow-control); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--ifl-motion-release) var(--ifl-motion-spring); }
.ifl-back svg { width: 20px; height: 20px; stroke-width: 2.4; }
.ifl-back:active { transform: scale(var(--ifl-press-scale, 0.97)); }
.ifl-back:focus-visible { outline: 2px solid var(--ifm-tint); outline-offset: 2px; }
/* Chat's engine: its page in a frame over the whole page, see-through, in a dialog of its own. Shown (.on), the dialog's
   modal, in the top layer over every sheet of the page's own; put away, it's shut but still laid out (never display:
   none, which a shut dialog is by default and a page's own [hidden] rule would make it), unseen and never in the way of a
   tap, so the engine runs on and its sheet opens at once */
dialog.ifl-engine-box { position: fixed; inset: 0; z-index: 2147483000; display: block; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; color-scheme: normal; visibility: hidden; pointer-events: none; }
dialog.ifl-engine-box.on { visibility: visible; pointer-events: auto; }
dialog.ifl-engine-box::backdrop { background: transparent; }
.ifl-engine { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color-scheme: normal; }
/* the note that InFlite is one app now (an old Home Screen icon: moved), as the allow sheet */
.ifl-moved .ifa-steps { margin-top: -6px; font-size: 14.5px; }
.ifl-moved .ifa-off { color: var(--ifm-red); }
/* a toast of words alone, as the note */
.ifl-toast { padding: 12px 20px; }
@media (prefers-reduced-motion: reduce) { .ifl-tab, .ifl-back { transition: none; } }

/* Something went wrong (menu.js BUG): a window that says the bug's code and what's known of it, to screenshot or send */
.ifb-layer { position: fixed; inset: 0 0 calc(0px - var(--fix-gap, 0px)); z-index: 2147483003; display: grid; place-items: center; box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--ifm-dim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ifb-layer::backdrop { background: transparent; }
.ifb { box-sizing: border-box; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 20px 20px 16px; border-radius: 28px; color: var(--ifm-text);
  background: var(--ifm-sheet); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--ifm-line), 0 16px 48px -20px rgba(14, 18, 16, 0.3); }
.ifb-head { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.ifb-ic { flex: none; width: 26px; height: 26px; padding: 6px; border-radius: 50%; color: var(--ifm-red); background: var(--ifm-red-bg); stroke-width: 2.2; }
.ifb-code { margin: 14px 0 6px; padding: 10px 12px; border-radius: 14px; background: var(--ifm-panel); box-shadow: inset 0 0 0 0.5px var(--ifm-line);
  font: 700 24px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 1.5px; text-align: center; user-select: all; -webkit-user-select: all; }
.ifb-say { margin: 8px 0 12px; color: var(--ifm-text-2); font-size: 14.5px; line-height: 1.35; }
.ifb-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.3; }
.ifb-facts dt { color: var(--ifm-text-3); font-weight: 600; }
.ifb-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ifb-tech { white-space: pre-line; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.ifb-note { box-sizing: border-box; display: block; width: 100%; margin: 0 0 12px; padding: 10px 12px; border: 0; border-radius: 14px; resize: vertical; color: var(--ifm-text);
  background: var(--ifm-panel); box-shadow: inset 0 0 0 0.5px var(--ifm-line); font: inherit; font-size: 16px; }
.ifb-note:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ifm-tint); }
.ifb-who { margin: -6px 0 12px; color: var(--ifm-text-3); font-size: 12.5px; }
.ifb-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ifb-btn { flex: 1 1 auto; min-height: 44px; padding: 0 16px; text-align: center; border: 0; border-radius: 999px; color: var(--ifm-text); background: var(--ifm-press); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.ifb-go { flex-basis: 100%; color: var(--ifl-on-accent); background: var(--ifl-accent-gradient); }
.ifb-btn:disabled { opacity: 0.6; cursor: default; }
.ifb-btn:focus-visible { outline: 2px solid var(--ifm-tint); outline-offset: 2px; }
.ifb-link { color: var(--ifm-tint, #4c8dff); font-weight: 600; white-space: nowrap; }
.ifb-said { min-height: 1.2em; margin: 10px 0 0; color: var(--ifm-text-2); font-size: 13.5px; text-align: center; }

/* the status banner (menu.js BANNER): under the app's header while something touching it is wrong, a link to the status
   page; amber for an incident, the app's tint for maintenance */
.ifl-sb { --sb: #c26a00; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 2px 10px; margin: 6px 16px 10px; padding: 10px 6px 10px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--sb) 10%, var(--ifl-surface)); border: 0.5px solid color-mix(in srgb, var(--sb) 30%, transparent); color: var(--ifl-text); cursor: pointer;
  -webkit-backdrop-filter: none; backdrop-filter: none; font: 13px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; position: relative; z-index: 5; }
.ifl-sb[data-k="maint"] { --sb: var(--ifl-accent-ink); }
.ifl-sb.float { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 0; right: 0; margin: 0 12px; z-index: 900; box-shadow: var(--ifl-shadow-card); }
.ifl-sb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sb); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb) 22%, transparent); }
.ifl-sb-t { min-width: 0; display: grid; }
.ifl-sb-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifl-sb-t small { font-size: 12px; opacity: 0.72; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ifl-sb-go { display: inline-flex; align-items: center; gap: 1px; color: var(--sb); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.ifl-sb-go svg, .ifl-sb-x svg { width: 14px; height: 14px; stroke-width: 2.6; }
.ifl-sb-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: inherit; opacity: 0.55; display: grid; place-items: center; cursor: pointer; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ifl-sb { --sb: #ffb24a; background: color-mix(in srgb, var(--sb) 10%, var(--ifl-surface)); color: var(--ifl-text); } :root:not([data-theme="light"]) .ifl-sb[data-k="maint"] { --sb: var(--ifl-accent-ink); } }
:root[data-theme="dark"] .ifl-sb { --sb: #ffb24a; background: color-mix(in srgb, var(--sb) 10%, var(--ifl-surface)); color: var(--ifl-text); }
:root[data-theme="dark"] .ifl-sb[data-k="maint"] { --sb: var(--ifl-accent-ink); }
/* InFlite's shared palette, geometry and motion. Bundled into each app by iflmenu.mjs:
   no extra request, and an app's existing offline/update mechanism keeps it current. */
:root {
  --ifl-page: #f8f9f6; --ifl-surface: #ffffff; --ifl-surface-2: #f1f2ef; --ifl-raised: #ffffff;
  --ifl-text: #171a18; --ifl-muted: #646a66; --ifl-subtle: #676e66;
  --ifl-line: rgba(24, 31, 26, 0.08); --ifl-press: rgba(24, 31, 26, 0.06);
  --ifl-accent: #2ea84d; --ifl-accent-ink: #247a35; --ifl-accent-fill: #74df36; --ifl-on-accent: #10150d;
  --ifl-accent-gradient: linear-gradient(110deg, #24c872, #b8eb2b); --ifl-accent-wash: #e2f5d8;
  --ifl-contrast: #141714; --ifl-on-contrast: #ffffff;
  --ifl-shadow-card: 0 1px 2px rgba(14, 18, 16, 0.025), 0 9px 24px -18px rgba(14, 18, 16, 0.18);
  --ifl-shadow-control: 0 1px 3px rgba(14, 18, 16, 0.05), 0 5px 14px -10px rgba(14, 18, 16, 0.16);
  --ifl-space-1: 4px; --ifl-space-2: 8px; --ifl-space-3: 12px;
  --ifl-space-4: 16px; --ifl-space-5: 24px; --ifl-space-6: 32px;
  --ifl-radius-card: 26px; --ifl-radius-group: 22px; --ifl-radius-sheet: 30px; --ifl-radius-row: 16px; --ifl-radius-pill: 999px;
  --ifl-motion-press: 0.09s; --ifl-motion-release: 0.42s; --ifl-motion-fast: 0.16s;
  --ifl-motion-enter: 0.36s; --ifl-motion-exit: 0.22s; --ifl-motion-layout: 0.28s;
  --ifl-motion-page: 0.46s; --ifl-motion-tab: 0.28s; --ifl-motion-sheet: 0.46s;
  --ifl-motion-stagger: 24ms; --ifl-motion-stagger-cap: 120ms; --ifl-motion-distance: 8px;
  --ifl-press-scale: 0.97; --ifl-press-icon: 0.94; --ifl-press-card: 0.985;
  --ifl-motion-glide: cubic-bezier(0.32, 0.72, 0, 1);
  --ifl-motion-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ifl-chrome-blur: none;
  --ifl-chrome-solid: var(--ifl-surface);
  --r-card: var(--ifl-radius-card); --r-group: var(--ifl-radius-group); --r-sheet: var(--ifl-radius-sheet);
  --ease-glide: var(--ifl-motion-glide); --ease-spring: var(--ifl-motion-spring);
  --dur-press: var(--ifl-motion-press); --dur-release: var(--ifl-motion-release);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ifl-motion-spring: linear(0, 0.12, 0.36, 0.59, 0.77, 0.89, 0.96, 0.994, 1.006, 1.008, 1.005, 1.002, 1); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ifl-page: #101210; --ifl-surface: #191c19; --ifl-surface-2: #222622; --ifl-raised: #2b302b;
    --ifl-text: #f4f7f2; --ifl-muted: #bac2b9; --ifl-subtle: #a2aba1;
    --ifl-line: rgba(244, 247, 242, 0.08); --ifl-press: rgba(244, 247, 242, 0.07);
    --ifl-accent: #97e84e; --ifl-accent-ink: #97e84e; --ifl-accent-wash: #26391e;
    --ifl-contrast: #080a08; --ifl-on-contrast: #f4f7f2;
    --ifl-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.12), 0 9px 24px -18px rgba(0, 0, 0, 0.45);
    --ifl-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.12), 0 5px 14px -10px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  --ifl-page: #101210; --ifl-surface: #191c19; --ifl-surface-2: #222622; --ifl-raised: #2b302b;
  --ifl-text: #f4f7f2; --ifl-muted: #bac2b9; --ifl-subtle: #a2aba1;
  --ifl-line: rgba(244, 247, 242, 0.08); --ifl-press: rgba(244, 247, 242, 0.07);
  --ifl-accent: #97e84e; --ifl-accent-ink: #97e84e; --ifl-accent-wash: #26391e;
  --ifl-contrast: #080a08; --ifl-on-contrast: #f4f7f2;
  --ifl-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.12), 0 9px 24px -18px rgba(0, 0, 0, 0.45);
  --ifl-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.12), 0 5px 14px -10px rgba(0, 0, 0, 0.4);
}
/* Concentric surfaces: the inset is subtracted from the outer corner. */
.ifm-pop { padding: var(--ifl-space-2); border-radius: var(--ifl-radius-card);
  -webkit-backdrop-filter: var(--ifl-chrome-blur); backdrop-filter: var(--ifl-chrome-blur);
  transform: translateY(-4px) scale(0.96);
  transition: transform var(--ifl-motion-release) var(--ifl-motion-spring), opacity var(--ifl-motion-fast) ease; }
.ifm-pop.open { transform: none; }
.ifm-pop.closing { transform: translateY(-3px) scale(0.97);
  transition: transform var(--ifl-motion-exit) var(--ifl-motion-glide), opacity var(--ifl-motion-fast) ease; }
.ifm-grp, .ifm-card { border-radius: calc(var(--ifl-radius-card) - var(--ifl-space-2)); }
.ifm-card { transition: transform var(--ifl-motion-release) var(--ifl-motion-spring), background-color var(--ifl-motion-fast); padding: var(--ifl-space-3) var(--ifl-space-4) !important; column-gap: var(--ifl-space-3); }
.ifm-layer { transition: background-color var(--ifl-motion-fast) ease; }
.ifm-layer:not(.open), .ifa-layer:not(.on) { pointer-events: none; }
.ifm-layer.open { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ifa-sheet { border-radius: var(--ifl-radius-sheet);
  transition: transform var(--ifl-motion-release) var(--ifl-motion-spring); }
.ifm-note { transition: transform var(--ifl-motion-release) var(--ifl-motion-spring), opacity var(--ifl-motion-fast) ease; }
.ifm-switch::after { transition: transform var(--ifl-motion-release) var(--ifl-motion-spring); }
.ifm-switch[aria-busy="true"] { cursor: progress; }
.ifh-me, .ifh-act, .ifl-back, .ifs-btn { transition: transform var(--ifl-motion-release) var(--ifl-motion-spring); }
.ifh-me:active, .ifh-act:active, .ifl-back:active, .ifs-btn:active { transition-duration: var(--ifl-motion-press); }
.ifa-go, .ifa-later, .ifb-btn { transition: transform var(--ifl-motion-release) var(--ifl-motion-spring), background-color var(--ifl-motion-fast); }
:is(.ifa-go, .ifa-later, .ifb-btn):active:not(:disabled) { transform: scale(var(--ifl-press-scale)); transition-duration: var(--ifl-motion-press); }
.ifs-btn { position: relative; display: grid; place-items: center; padding: 0; line-height: 1; }
.ifb { border-radius: var(--ifl-radius-sheet); }
.ifb-code, .ifb-note { border-radius: var(--ifl-radius-row); }
.ifs-btn::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; }

/* Allow flex/grid text to shrink before it can push a control outside its surface. */
.ifh-t, .ifm-who, .ifm-l, .ifm-val, .ifm-note-tx, .ifb-facts > *,
.row .tx, .ifl-tx, .tc-meta, .tc-app { min-width: 0; }
.ifh-name { line-height: 1.2; }
.ifm-who b, .ifm-who small, .ifm-l, .ifm-note-tx, .ifb-facts, .ifl-sub { white-space: normal; overflow-wrap: anywhere; }
.ifm-val { max-width: min(40vw, 18ch); white-space: normal; overflow-wrap: anywhere; text-align: end; }
.ifm-row:has(.ifm-val:not(:empty)) { grid-template-columns: 30px minmax(0, 1.2fr) minmax(0, 0.8fr) 15px; }
.ifm-row { border-radius: var(--ifl-radius-row); min-height: 52px !important; height: auto !important; padding-top: var(--ifl-space-2) !important; padding-bottom: var(--ifl-space-2) !important; }
.ifh-pick { border-radius: var(--ifl-radius-row); padding: 4px 6px; margin: -4px -6px; }
.ifa-sheet button { display: grid; place-items: center; padding: 10px 16px; border-radius: var(--ifl-radius-pill); }
.ifm-switch::before { content: ""; position: absolute; inset: -7px 0; }
:is(.pill, .btn, .ifl-btn) { max-width: 100%; overflow-wrap: anywhere; }
:is(.pill, .btn, .ifl-btn):focus-visible { outline: 2px solid var(--tint-text, var(--tint, currentColor)); outline-offset: 3px; }

/* CSS presentation motion rests while data and navigation retain their own lifetimes. */
html[data-motion-paused] *, html[data-motion-paused] *::before, html[data-motion-paused] *::after { animation-play-state: paused !important; }

/* Accessibility preferences apply to the shared chrome in every standalone app. */
@media (prefers-reduced-motion: reduce) {
  .ifm-pop, .ifm-pop.closing, .ifa-sheet, .ifm-note { transform: none !important; transition: opacity 0.12s ease !important; }
  .ifh-me, .ifh-act, .ifl-back, .ifs-btn, .ifm-switch::after, .ifm-row, .ifm-card, .ifa-go, .ifa-later, .ifb-btn { transition: none; }
  .ifh-me:active, .ifh-act:active, .ifl-back:active, .ifs-btn:active, .ifm-row:active, .ifm-card:active, .ifa-go:active, .ifa-later:active, .ifb-btn:active { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .ifm-pop, .ifm-note, .ifa-sheet, .ifl-tabs, .ifl-back, .ifb, .ifh.ifh-up, .ifh-acts {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ifl-chrome-solid);
  }
  .ifm-grp { background: var(--ifl-chrome-solid); }
}
@media (forced-colors: active) {
  .ifm-pop, .ifm-grp, .ifm-note, .ifa-sheet, .ifl-tabs, .ifl-back { background: Canvas; color: CanvasText; border: 1px solid ButtonText; }
}
.ifm-in-today { --ifm-tint: var(--ifl-accent-ink); }
/* ==== end of InFlite's menu ==== */

/* ==== InFlite's way in, shared: from .tools/inflite/signin.css by node .tools/signin.mjs (change it there) ==== */
/* InFlite's way in, the same in every app (Chat, Fitness, Mail): where everything on it sits, so no app's drifts.
   Markup, in each app's own words:
     .ifl-in                      the screen
       .ifl-top                   at its head, held from the top of the screen:
         .ifl-logo > the mark     the app's icon, 96px, in a 150px box for its glow
         .ifl-title, .ifl-tagline its name and its line (either may be left out)
       .ifl-cta                   at its foot, held 55px over the screen's safe area:
         .ifl-brand               Powered by InFlite: <img src="inflite.svg"> and the words
         the app's Sign in button, .ifl-go
         .ifl-new                 New here? (if the app has it), just under the button
   (--ifl-short, set by an app that finds its Home Screen page laid out short of the screen, holds the foot lower by as
   much.) Each app keeps its own colours, glow, scene and motion; the pill takes its colours from --ifl-pill, --ifl-pill-ink
   and --ifl-pill-edge, set on .ifl-in. Both blocks are measured from the screen itself (position: fixed), not from a
   viewport unit, which a phone's Home Screen can make a toolbar's height short. */
.ifl-in .ifl-top {
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: calc(env(safe-area-inset-top, 0px) + max(16vh, 80px));
  max-width: 420px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.ifl-in .ifl-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  margin: 0 0 -18px;
}

.ifl-in .ifl-title {
  margin: 0;
  padding: 0;
  font-size: 40px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.4px;
}

.ifl-in .ifl-tagline {
  margin: 4px 0 0;
  font-size: 16px;
  font-style: normal;
  letter-spacing: normal;
}

.ifl-in .ifl-cta {
  position: fixed;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(55px + env(safe-area-inset-bottom, 0px) - var(--ifl-short, 0px));
  max-width: 420px;
  margin: 0 auto;
  padding: 0 max(20px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.ifl-in .ifl-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 5px 13px 5px 5px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--ifl-muted);
  background: var(--ifl-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--ifl-shadow-control);
}

.ifl-in .ifl-brand img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.ifl-in .ifl-go {
  width: 100%;
  max-width: 420px;
}

.ifl-in .ifl-new {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 8px 0 0;
  text-align: center;
  font-size: 15px;
}

/* A short screen (a phone on its side): the name and the way in side by side, the name on the left, Sign in on the
   right, rather than one over the other */
@media (max-height: 500px) and (orientation: landscape) {
  .ifl-in .ifl-top { top: calc(env(safe-area-inset-top, 0px) + 28px); right: 50%; max-width: none; padding-left: max(24px, env(safe-area-inset-left, 0px)); }
  .ifl-in .ifl-logo { width: 116px; height: 116px; margin-bottom: -10px; }
  .ifl-in .ifl-title { font-size: 34px; }
  .ifl-in .ifl-cta { left: 50%; max-width: none; bottom: calc(44px + env(safe-area-inset-bottom, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
}
/* ==== end of InFlite's way in ==== */

/* ---- swiping between an app's sections (swipe.js): the screen pans up and down by itself and hands a sideways drag to
   the script; the section under the finger and the one coming in, moved by --sx; the one coming in shown from --sy;
   a release settles with a spring ---- */
.ifl-screen[data-app]:is([data-app="weather"], [data-app="fitness"], [data-app="markets"]) > [role=tabpanel] { touch-action: pan-y pinch-zoom; }
.ifl-swiping .ifl-screen:not([hidden]) { overflow-x: clip; }
.ifl-swiping .ifl-screen:not([hidden]) > [role=tabpanel] { position: relative; }
/* (not inherited: moving a section restyles that section alone, never everything inside it, frame after frame) */
@property --sx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --sy { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --sw-d { syntax: "*"; inherits: false; }
section.ifl-sw-ready { will-change: transform; }
.ifl-swiping section.ifl-sw-cur { transform: translate3d(var(--sx, 0px), 0, 0); will-change: transform; }
.ifl-swiping section.ifl-sw-peek { display: var(--sw-d, block) !important; content-visibility: visible !important; position: absolute; left: 0; right: 0;
  top: var(--sy, 0px); transform: translate3d(var(--sx, 0px), 0, 0); will-change: transform; pointer-events: none; }
.ifl-sw-go section:is(.ifl-sw-cur, .ifl-sw-peek) { transition: transform var(--motion-release, 0.38s) var(--motion-glide, cubic-bezier(0.32, 0.72, 0, 1)); }
@media (prefers-reduced-motion: reduce) { .ifl-sw-go section:is(.ifl-sw-cur, .ifl-sw-peek) { transition-duration: 0.12s; } }

/* ---- acting from a card: a reply typed on Chat's card, and today's session changed on Fitness's ---- */
.tc-reply { margin-top: 12px; }
.tc-reply-f { display: flex; align-items: center; gap: 8px; animation: tc-content-in var(--ifl-motion-enter, .36s) var(--ease-spring); }
.tc-reply-f input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; font: inherit; font-size: 16px; color: var(--text); background: var(--field); box-shadow: inset 0 0 0 0.5px var(--line); }
.tc-reply-f input:focus-visible { outline: 2px solid var(--tint); outline-offset: 1px; }
.tc-reply-f .pill { flex: none; }
.tc-reply-f .tc-reply-x { width: 44px; padding: 0; justify-content: center; }
.tc-reply-f .tc-reply-x svg { width: 16px; height: 16px; }
.tc-foot button.pill:disabled { opacity: 0.5; }

/* ---- the bell's sheet (bell.js): the notifications this phone's been shown, by day, each slid away either way to clear ---- */
/* (the sheet as tall as its rows, up to most of the screen, its list scrolling under the head: the sheet itself never
   scrolls, so the toast, put in it while it's open, stays at its foot) */
dialog.ifl-sheet[data-sheet="notifications"] { max-height: min(78dvh, calc(var(--vvh, 100dvh) - env(safe-area-inset-top, 0px) - 24px)); overflow: hidden; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
dialog.ifl-sheet[data-sheet="notifications"] .ifs-body { overflow: hidden auto; overscroll-behavior: contain; margin: 0 -18px; padding: 0 18px; scrollbar-width: thin; }
@media (min-width: 700px) { dialog.ifl-sheet[data-sheet="notifications"] { max-height: min(72vh, 720px); padding-bottom: 12px; } }
dialog.ifl-sheet[data-sheet="notifications"] .ifl-toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px); }
.ifl-nts { padding-bottom: 4px; transition: opacity var(--ifl-motion-fast, .16s) ease; }
.ifl-nts.out { opacity: 0; }
.ifl-nt-sec { display: grid; transition: height var(--ifl-motion-layout, .28s) var(--ease-glide, ease), opacity var(--ifl-motion-fast, .16s) ease; }
.ifl-nt-sec + .ifl-nt-sec { margin-top: 18px; }
.ifl-nt-sec.gone { height: var(--h); overflow: hidden; }
.ifl-nt-sec.gone.shut { height: 0; opacity: 0; margin-top: 0; }
.ifl-nt-h { margin: 2px 4px 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.ifl-nt { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ifl-nt-row { position: relative; display: grid; border-radius: 22px; transition: height var(--ifl-motion-layout, .28s) var(--ease-glide, ease), margin var(--ifl-motion-layout, .28s) var(--ease-glide, ease), opacity var(--ifl-motion-fast, .16s) ease; }
/* (a stack: the next one peeping out beneath; opened out, the rest a little in from the edge) */
.ifl-nt-row.stack { margin-bottom: 7px; }
.ifl-nt-row.stack::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 14px; z-index: 0; border-radius: 0 0 16px 16px; background: color-mix(in srgb, var(--solid) 88%, var(--text)); box-shadow: var(--edge), 0 3px 8px -3px rgba(0, 0, 0, 0.22); opacity: 0.85; }
.ifl-nt-row.stack:is(.dragging, .gone)::after { opacity: 0; }
.ifl-nt-row.sub { margin-left: 14px; }
.ifl-nt-row.back { animation: ifl-nt-in var(--ifl-motion-enter, .36s) var(--ease-spring) backwards; }
@keyframes ifl-nt-in { from { opacity: .86; transform: translateY(-4px); } }
.ifl-nt-back { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-radius: inherit; color: #fff; background: #d70015;
  font-size: 15px; font-weight: 600; opacity: 0; transition: opacity var(--ifl-motion-fast, .16s) ease, background-color var(--ifl-motion-fast, .16s) ease; }
.ifl-nt-back > span { display: flex; align-items: center; gap: 6px; }
.ifl-nt-back .ifl-glyph { display: grid; place-items: center; width: 18px; height: 18px; transform: scale(calc(0.4 + 0.6 * var(--p, 0))); transition: transform 0.12s; }
.ifl-nt-back .ifl-glyph svg { width: 18px; height: 18px; stroke-width: 2.2; }
.ifl-nt-row.far .ifl-nt-back .ifl-glyph { transform: scale(1.15); }
.ifl-nt-row:is(.dragging, .gone) .ifl-nt-back { opacity: 1; }
.ifl-nt-row[data-dir="left"] .ifl-nt-back > span:first-child, .ifl-nt-row[data-dir="right"] .ifl-nt-back > span:last-child { visibility: hidden; }
.ifl-nt-row:not(.far):not(.gone) .ifl-nt-back { background: color-mix(in srgb, #d70015 70%, var(--solid)); }
.ifl-nt-card { position: relative; z-index: 1; display: flex; align-items: stretch; border-radius: inherit; background: var(--sheen), linear-gradient(var(--glass), var(--glass)), var(--solid); box-shadow: var(--edge), var(--lift);
  transform: translate3d(var(--dx, 0px), 0, 0) scale(var(--press-s, 1)); transition: transform var(--ifl-motion-release, .42s) var(--ease-spring); touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
/* (pressed: a little give, as a tap on a phone feels) */
.ifl-nt-row:not(.dragging):not(.gone) .ifl-nt-card:has(.ifl-nt-main:active) { --press-s: var(--ifl-press-card, .985); transition-duration: var(--ifl-motion-press, .09s); }
.ifl-nt-row.dragging .ifl-nt-card { transition: none; }
.ifl-nt-row.gone .ifl-nt-card { transition-duration: var(--ifl-motion-exit, .22s); transition-timing-function: var(--ease-glide); }
.ifl-nt-row.gone.to-left .ifl-nt-card { --dx: -110%; }
.ifl-nt-row.gone.to-right .ifl-nt-card { --dx: 110%; }
.ifl-nt-row.gone { height: var(--h); overflow: hidden; pointer-events: none; }
.ifl-nt-row.gone.shut { height: 0; margin-bottom: -8px; opacity: 0; }
.ifl-nt-main { position: relative; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 0; border-radius: inherit; font: inherit; text-align: left; color: var(--text); background: none; cursor: pointer; }
.ifl-nt-main:active { background: var(--press); }
.ifl-nt-main:focus-visible { outline: 2px solid var(--tint-text); outline-offset: -2px; }
.ifl-nt-main .ifl-appic { margin-top: 1px; }
/* (unseen as the sheet opened: a dot, and the title a touch bolder) */
.ifl-nt-row[data-fresh] .ifl-nt-main::before { content: ""; position: absolute; left: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--tint-text); }
.ifl-nt-row[data-fresh] .ifl-nt-t { font-weight: 700; }
.ifl-nt-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ifl-nt-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ifl-nt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.ifl-nt-meta { flex: none; display: flex; gap: 0; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ifl-nt-app::after { content: "\00a0·\00a0"; }
.ifl-nt-b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; }
/* (the rest of a stack: its count, a small pill at the card's foot, as a chevron once opened out) */
.ifl-nt-row:has(.ifl-nt-more) .ifl-nt-main { padding-bottom: 16px; }
.ifl-nt-row:has(.ifl-nt-more) .ifl-nt-b { padding-right: 34px; }
.ifl-nt-more { position: absolute; right: 10px; bottom: 9px; min-width: 34px; height: 24px; padding: 0 8px; border: 0; border-radius: 12px; display: grid; place-items: center; font: inherit; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text-2); background: rgba(120, 120, 128, 0.16); cursor: pointer; transition: transform 0.15s; }
.ifl-nt-more::after { content: ""; position: absolute; inset: -10px -8px; }
.ifl-nt-more:active { transform: scale(0.92); }
.ifl-nt-more:focus-visible { outline: 2px solid var(--tint-text); outline-offset: 1px; }
.ifl-nt-more .ifl-glyph { display: grid; place-items: center; width: 14px; height: 14px; transform: rotate(-90deg); }
.ifl-nt-more .ifl-glyph svg { width: 14px; height: 14px; stroke-width: 2.6; }
/* (Clear, for the keyboard and VoiceOver: out of sight until it's focused, or the row's under a pointer that hovers) */
.ifl-nt-x { position: absolute; top: -6px; left: -6px; z-index: 2; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--text);
  background: var(--glass-strong); box-shadow: var(--edge), 0 1px 4px rgba(0, 0, 0, 0.2); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.ifl-nt-x .ifl-glyph, .ifl-nt-x svg { width: 12px; height: 12px; display: grid; place-items: center; stroke-width: 3; }
.ifl-nt-x:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--tint-text); outline-offset: 1px; }
@media (hover: hover) { .ifl-nt-row:hover .ifl-nt-x { opacity: 1; pointer-events: auto; } }
.ifl-nt-none { display: grid; justify-items: center; gap: 10px; padding: 34px 0 26px; color: var(--text-3); }
.ifl-nt-none .ifl-glyph { display: grid; place-items: center; width: 34px; height: 34px; opacity: 0.7; }
.ifl-nt-none .ifl-glyph svg { width: 34px; height: 34px; stroke-width: 1.8; }
.ifl-nt-none p { margin: 0; font-size: 15px; }
.ifl-nt-foot { display: flex; justify-content: center; padding: 14px 0 2px; }
.ifl-nt-set { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 500; color: var(--text-3); background: none; cursor: pointer; }
.ifl-nt-set:hover { color: var(--text-2); }
.ifl-nt-set:active { background: var(--press); }
.ifl-nt-set:focus-visible { outline: 2px solid var(--tint-text); outline-offset: 1px; }
.ifl-nt-all { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; color: var(--tint-text); background: rgba(120, 120, 128, 0.2); cursor: pointer; }
.ifl-nt-all:active { transform: scale(0.95); }
.ifl-nt-all:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ifl-nt-all[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ifl-nts, .ifl-nt-sec, .ifl-nt-row, .ifl-nt-card, .ifl-nt-back, .ifl-nt-back .ifl-glyph, .ifl-nt-x, .ifl-nt-more { transition: none; }
  .ifl-nt-row.back { animation: none; }
  .ifl-nt-row:not(.dragging):not(.gone) .ifl-nt-card:has(.ifl-nt-main:active) { --press-s: 1; }
}