@import url("./controls.css");

/* InFlite's framework styles (One roof, spec §3.13, D18). Linked after app.css by index.html, so app.css's tokens
   (--text*, --glass*, --solid, --line, --press, --edge, --lift, --sheen, --blur, --r-card/-group/-hero, --danger,
   --good, --good-text, --warn, --ease-out/-glide/-spring, --c-<app>, and the shared surfaces every app uses rather than
   its own light and dark pairs: --inset (a card set into a card), --raised (the chosen one of a few), --badge (a count))
   stay as they are; this adds the framework's.
   The shared --ifl-* palette supplies neutral surfaces and the green action accent in both themes.
   No inline styles: a figure a drawing needs is a custom property set by script.

   Accent sets: --acc (graphics, indicator, rings, charts), --acc-ink (text on a surface), --acc-fill + --on-acc (a
   filled button), --acc-wash, per html[data-app] and any [data-app] (a screen, a sheet, a tile).
   Action colours are shared; app identity remains in its symbol and semantic data colours. */

/* Shared geometry and action colours. App symbols and chart tokens retain their identities. */
:root {
  --bar: var(--ifl-surface, #191c19);
  --r-sheet: var(--ifl-radius-sheet, 30px); --r-well: var(--ifl-radius-row, 16px); --r-pill: var(--ifl-radius-pill, 999px);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-press: var(--ifl-motion-press, 0.09s); --dur-fast: var(--ifl-motion-fast, 0.16s); --dur-base: var(--ifl-motion-enter, 0.36s); --dur-sheet-in: var(--ifl-motion-sheet, 0.46s); --dur-sheet-out: var(--ifl-motion-exit, 0.22s);
  --tabs-h: var(--ift-h, 64px); --gutter: 16px;
  --hd-h: 112px;
  --pos: var(--good-text); --neg: var(--danger);
  --chart-grid: var(--line); --chart-axis: var(--text-2); --chart-now: var(--text-3);
  --motion-glide: var(--ifl-motion-glide);
  --motion-spring: var(--ifl-motion-spring);
  --motion-press: var(--ifl-motion-press, 0.09s); --motion-release: var(--ifl-motion-release, 0.42s);
  --motion-page: var(--ifl-motion-page, 0.46s); --motion-tab: var(--ifl-motion-tab, 0.28s); --motion-fade: var(--ifl-motion-fast, 0.16s);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --motion-spring: var(--ifl-motion-spring); }
}
:root, [data-app] {
  --acc: var(--ifl-accent, #73d781); --acc-ink: var(--ifl-accent-ink, #97e84e);
  --acc-fill: var(--ifl-accent-fill, #73d781); --on-acc: var(--ifl-on-accent, #10150d);
  --acc-wash: var(--ifl-accent-wash, color-mix(in srgb, var(--acc) 15%, transparent));
  --acc-tint-bg: transparent; --ifl-lens: var(--ifl-raised, #2b302b);
}

/* ---- the frame and screens ---- */
body::after { content: none; }
.ifl-screen { position: relative; }
.ifl-screen[data-app]:not([data-app="inflite"]) { max-width: 1180px; }
.ifl-zoom-slot { position: absolute; z-index: 3; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); top: 4px; pointer-events: none; }
.ifl-zoom-slot > * { margin: 0 !important; }
.ifl-vt-zoom { view-transition-name: ifl-zoom; }
html.ifl-fill, html.ifl-fill body { overflow: hidden; overscroll-behavior: none; }

/* ---- the header (header.js): row 1 is the shared .ifh; the crumb, Back, the compact title and row 2 are the framework's ---- */
.ifl-hd.ifh { grid-template-columns: auto minmax(112px, 1fr) auto; grid-template-rows: auto; view-transition-name: ifl-hd; --ifh-tint: var(--text);
  height: calc(var(--ifh-pt0) + 90px - 42px * var(--p)); margin-bottom: calc(var(--ifh-mb, 0px) + 42px * var(--p)); }
.ifl-hd.ifh.has-secs { grid-template-rows: auto auto; row-gap: 10px; height: calc(var(--ifh-pt0) + 140px - 42px * var(--p)); }
/* (with sections, the band reaches below them: nothing scrolls visibly under the switcher) */
.ifl-hd.ifh.has-secs::before { background: linear-gradient(to bottom, var(--ifh-band, var(--ifl-page, #f8f9f6)) 82%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.ifl-hd .ifl-back { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--text); }
.ifl-hd .ifl-back .ifl-glyph, .ifl-hd .ifl-back svg { width: 22px; height: 22px; display: grid; place-items: center; }
.ifl-hd .ifl-back svg { stroke-width: 2.4; }
.ifh-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; height: calc(18px * (1 - var(--p))); overflow: hidden; opacity: calc(1 - var(--p) * 1.6);
  font-size: 13px; font-weight: 600; line-height: 18px; color: var(--text-3); white-space: nowrap; text-overflow: ellipsis; }
.ifl-hd:not([data-app="inflite"]) .ifh-crumb { color: var(--text-2); }
.ifh-crumb img { flex: none; width: 16px; height: 16px; border-radius: 4.5px; }
.ifh-crumb[hidden] { display: none; }
.ifh-ttl, .ifh-plain { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifl-hd .ifh-pick { color: inherit; }
.ifl-hd .ifh-act[data-word] { width: auto; min-width: 44px; padding: 0 12px !important; border-radius: 999px !important; font-size: 16px; font-weight: 600; }
.ifl-hd .ifh-act .ifl-glyph { display: grid; place-items: center; }
.ifl-row2 { grid-column: 1 / -1; min-width: 0; }
.ifl-row2[hidden] { display: none; }
@media (max-width: 360px) { .ifl-hd.ifh { column-gap: 8px; } }
/* (an app's screen is wider than Today's column on a big screen: its header goes with it) */
@media (min-width: 672px) { html[data-app]:not([data-app="inflite"]) #hd .ifl-hd.ifh { padding-left: max(16px, calc((100% - 1180px) / 2 + 16px)); padding-right: max(16px, calc((100% - 1180px) / 2 + 16px)); } }

/* the section switcher: a track, the sections, a lens that slides to the chosen one (manual activation: header.js) */
.ifl-segs { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--glass-ctl); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.ifl-segs::-webkit-scrollbar { display: none; }
.ifl-segs.over { -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.ifl-sec { position: relative; z-index: 1; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: color var(--dur-fast); }
.ifl-sec::after { content: ""; position: absolute; inset: -5px 0; }
.ifl-sec[aria-selected="true"] { color: var(--on-acc); }
.ifl-sec { transition: transform var(--motion-release) var(--motion-spring), color var(--motion-fade); }
.ifl-sec:active { transform: scale(var(--ifl-press-scale, 0.97)); transition-duration: var(--motion-press); }
.ifl-sec:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: -2px; }
.ifl-lens { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--lw, 0); transform: translateX(var(--lx, 0)); border-radius: var(--r-pill);
  background: var(--ifl-accent-gradient, var(--acc-fill)); box-shadow: var(--ifl-shadow-control); transition: transform var(--motion-release) var(--motion-spring), width var(--motion-release) var(--motion-spring); }
.ifl-sec-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: var(--badge, var(--danger)); }

/* ---- the tab bar (tabs.js): menu.css's bar, with a pill that slides; its static pill off under it (D18) ---- */
/* Keep interactive tabs inside the fixed viewport. The shared screen-height correction can be stale after iOS
   resumes and may exceed the home-indicator inset; subtracting it moves the labels below the screen. */
.ifl-tabs.has-pill { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.ifl-tabs.has-pill .ifl-tab[aria-current] { background: none; color: var(--ifl-on-accent, var(--text)); }
.ifl-tabs.has-pill .ifl-tab { position: relative; z-index: 1; }
.ifl-tab-pill { position: absolute; z-index: 0; top: var(--ift-pad); bottom: var(--ift-pad); left: 0; width: var(--pw, 0); transform: translateX(var(--px, 0)); border-radius: 999px;
  background: var(--ifl-accent-gradient, var(--acc-fill)); transition: transform var(--motion-release) var(--motion-spring), width var(--motion-release) var(--motion-spring); pointer-events: none; }
.ifl-tab-pill[hidden] { display: none; }
/* (all the way past the bottom, and out of sight: it floats above the edge, by the home bar's gap, so half again its own
   height wasn't enough on a phone, and its top showed under a chat's composer) */
.ifl-tabs.away { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); visibility: hidden; }
body.kb-up .ifl-tabs { visibility: hidden; }
/* The tab bar keeps one shared action accent on every screen; a tab's count remains semantic red. */
.ifl-tabs.has-pill.chats { --ifl-tab-on: var(--ifl-accent-ink, var(--text)); }
.ifl-tab-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; background: var(--badge, var(--danger)); pointer-events: none; }

/* ---- sheets (sheet.js) on <dialog>: the frozen markup, Weather's motion ---- */
/* Sheets stay inside the visible viewport; a Home Screen layout correction must not move their actions below it. */
dialog.ifl-sheet { --sheet-inset: 20px; --sheet-bottom-pad: calc(28px + env(safe-area-inset-bottom, 0px)); position: fixed; inset: auto 0 var(--sheet-foot, 0px); z-index: 60; box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 0 max(var(--sheet-inset), env(safe-area-inset-right, 0px)) var(--sheet-bottom-pad) max(var(--sheet-inset), env(safe-area-inset-left, 0px));
  max-height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top, 0px) - 24px); overflow: hidden auto; overscroll-behavior: contain; display: none; flex-direction: column;
  border: 0; border-radius: var(--r-sheet); color: var(--text); background: var(--ifl-surface, var(--glass-strong)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--ifl-shadow-card, var(--lift));
  transform: translateY(var(--drag, 0px)); animation: ifl-sheet-in var(--dur-sheet-in) var(--ease-glide); font: inherit; }
dialog.ifl-sheet[open] { display: flex; }
@media (min-width: 600px) { dialog.ifl-sheet { --sheet-inset: 24px; } }
/* (the keyboard up, the sheet on it (sheet.js --sheet-foot): no room kept for the home bar, which the keyboard covers) */
dialog.ifl-sheet.ifs-kb { --sheet-bottom-pad: 12px; padding-bottom: var(--sheet-bottom-pad); border-radius: var(--r-sheet); }
/* (and as tall as what's in sight, from the top of it down: what's typed and what it finds start at the top, where the
   keyboard's bars, see-through and taller than iOS says, can't cover them) */
@media (hover: none) { dialog.ifl-sheet.ifs-kb { top: calc(var(--vv-top, 0px) + max(env(safe-area-inset-top, 0px), 12px) + 6px); max-height: calc(var(--vvh, 100dvh) - max(env(safe-area-inset-top, 0px), 12px) - 6px); } }
dialog.ifl-sheet::backdrop { background: var(--dim); animation: ifl-fade-in var(--dur-sheet-in) ease; }
dialog.ifl-sheet.closing { animation: ifl-sheet-out var(--dur-sheet-out) var(--ease-in) forwards; }
dialog.ifl-sheet.closing::backdrop { animation: ifl-fade-out var(--dur-sheet-out) ease forwards; }
dialog.ifl-sheet.ifs-touched:not(.closing) { animation: none; transition: transform var(--motion-release) var(--motion-spring); }
dialog.ifl-sheet.dragging:not(.closing) { animation: none; transition: none; }
@keyframes ifl-sheet-in { from { transform: translateY(100%); } }
@keyframes ifl-sheet-out { to { transform: translateY(100%); } }
@keyframes ifl-fade-in { from { opacity: 0; } }
@keyframes ifl-fade-out { to { opacity: 0; } }
@media (min-width: 700px) {
  dialog.ifl-sheet { --sheet-bottom-pad: 24px; inset: 0; margin: auto; width: min(560px, calc(100% - 48px)); height: fit-content; border-radius: var(--r-sheet); padding-bottom: var(--sheet-bottom-pad); animation-name: ifl-sheet-pop; }
  dialog.ifl-sheet.closing { animation-name: ifl-sheet-unpop; }
  @keyframes ifl-sheet-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
  @keyframes ifl-sheet-unpop { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
}
.ifs-grab { flex: none; width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--line); background: color-mix(in srgb, var(--text) 22%, transparent); touch-action: none; }
.ifl-sheet .ifs-head { position: sticky; top: 0; z-index: 2; display: flex; flex-shrink: 0; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; touch-action: none; }
/* A quiet, opaque title strip keeps scrolling form text clear of the controls without another live blur. */
.ifl-sheet .ifs-head::before { content: ""; position: absolute; z-index: -1; inset: -12px calc(0px - max(var(--sheet-inset), env(safe-area-inset-right, 0px))) 0 calc(0px - max(var(--sheet-inset), env(safe-area-inset-left, 0px))); background: var(--ifl-surface, var(--solid)); box-shadow: 0 0.5px 0 var(--line); pointer-events: none; }
.ifl-sheet .ifs-head h2 { flex: 1; min-width: 0; margin: 0; font: 700 22px/1.2 var(--font-d); letter-spacing: -0.2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ifl-sheet .ifs-head h2:focus { outline: none; }
.ifl-sheet .ifs-head h2.vh { flex: 1; position: static !important; width: auto; height: auto; clip: auto; clip-path: none; visibility: hidden; }
.ifl-sheet .ifs-btn .ifl-glyph { display: grid; place-items: center; width: 18px; height: 18px; }
.ifl-sheet .ifs-btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
.ifl-sheet:not(.pushed) .ifs-back { display: none; }
.ifl-sheet .ifs-body { flex: 1 1 auto; min-height: 0; box-sizing: border-box; padding-top: 12px; }
.ifl-sheet .ifs-hero img { width: 64px; height: 64px; border-radius: 15px; }
.ifl-sheet .ifs-acts { position: sticky; bottom: calc(-28px - env(safe-area-inset-bottom, 0px)); z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 12px calc(-1 * max(var(--sheet-inset), env(safe-area-inset-left, 0px))) 0; padding: 12px max(var(--sheet-inset), env(safe-area-inset-left, 0px)) 4px; }
/* One surface through the bottom padding/home-indicator area. Extending only the
   paint keeps sticky positioning, button spacing and scrolling unchanged. */
.ifl-sheet .ifs-acts::before { content: ""; position: absolute; z-index: -1; inset: 0 0 calc(0px - var(--sheet-bottom-pad));
  background: var(--ifl-surface, var(--glass-strong)); pointer-events: none; }
.ifl-sheet .ifs-acts .ifl-btn { flex: 1 1 auto; }
.ifl-sheet[aria-busy="true"] .ifs-body { cursor: progress; }
.ifs-page { display: grid; gap: 12px; }
body.sheet-up { overflow: hidden; }

/* ---- the toast (toast.js): the shared note's look, an action when it has one ---- */
.ifl-toast { max-width: calc(100vw - 32px); bottom: calc(var(--tabs-h) + 24px + env(safe-area-inset-bottom, 0px) - var(--fix-gap, 0px)); }
/* (the bar away, a chat's composer in its place: above the composer, as it grows to a few lines; stage 3) */
body:has(.ifl-tabs.away) .ifl-toast { bottom: calc(max(var(--tabs-h), 120px) + 16px + env(safe-area-inset-bottom, 0px) - var(--fix-gap, 0px)); }
.ifl-toast .ifm-note-tx b { overflow-wrap: anywhere; }
.ifl-toast.has-act { pointer-events: auto; padding-right: 8px; }
.ifl-toast-act { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 600; color: var(--acc-ink); background: var(--acc-wash); position: relative; }
.ifl-toast-act::after { content: ""; position: absolute; inset: -4px; }

/* ---- components (ui.js) ---- */
.ifl-glyph { display: inline-grid; place-items: center; flex: none; }
.ifl-glyph svg { width: 1.2em; height: 1.2em; stroke-width: 2; }
.ifl-appic { flex: none; border-radius: 22.5%; object-fit: cover; }
.ifl-appic.s16 { width: 16px; height: 16px; } .ifl-appic.s24 { width: 24px; height: 24px; } .ifl-appic.s32 { width: 32px; height: 32px; }
.ifl-appic.s40 { width: 40px; height: 40px; } .ifl-appic.s64 { width: 64px; height: 64px; }
.ifl-card { position: relative; display: block; margin: 0 0 12px; padding: 16px 18px; border-radius: var(--r-card); color: var(--text); text-decoration: none; text-align: left; width: 100%;
  background: var(--ifl-surface, var(--glass)); box-shadow: var(--ifl-shadow-card, var(--lift)); }
.ifl-card.hero { border-radius: var(--r-hero); background: var(--ifl-surface, var(--glass)); }
.ifl-card.list { padding: 4px 0; }
.ifl-card.tappable { cursor: pointer; transition: transform var(--dur-press); }
.ifl-card.tappable:active { transform: scale(0.98); }
.ifl-card-t { margin: 0 0 6px; font: 600 17px/1.25 var(--font-d); }
.ifl-label { margin: 18px 18px 8px; font: 600 13px/1.2 var(--font); letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-3); }
.ifl-sheet .ifl-label, .ifl-group .ifl-label { color: var(--text-2); }
.ifl-list { border-radius: var(--r-group); overflow: hidden; background: var(--ifl-surface, var(--glass)); box-shadow: var(--ifl-shadow-card, var(--lift)); }
.ifl-sheet .ifl-list { background: var(--glass-ctl); box-shadow: none; }
.ifl-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 12px 18px; border-radius: var(--r-well); color: var(--text); text-decoration: none; text-align: left; }
a.ifl-row, button.ifl-row, label.ifl-row { cursor: pointer; }
:is(a, button, label).ifl-row:active { background: var(--press); }
.ifl-row:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: -2px; border-radius: var(--r-well); }
.ifl-row + .ifl-row::before { content: ""; position: absolute; top: 0; left: 18px; right: 0; height: 0.5px; background: var(--line); }
.ifl-row:has(> .ifl-lead) + .ifl-row::before, .ifl-row:has(> .ifl-lead) + .ifl-row:has(> .ifl-lead)::before { left: 64px; }
.ifl-lead { flex: none; display: grid; place-items: center; }
.ifl-lead.ic { width: 32px; height: 32px; border-radius: 9px; color: var(--on-acc); background: var(--ifl-accent-gradient, var(--acc-fill)); }
.ifl-lead.tm { width: 46px; font-weight: 650; font-variant-numeric: tabular-nums; }
/* (the words keep at least two fifths of the row and break between words, never letter by letter; a long value beside
   them gives way, onto a second line, and only past that cut short) */
.ifl-tx { flex: 1 1 auto; min-width: min(40%, 9em); display: grid; gap: 2px; }
.ifl-tx b { font-weight: 500; font-size: 17px; overflow-wrap: break-word; }
.ifl-tx small { font-size: 14px; color: var(--text-2); overflow-wrap: break-word; }
.ifl-val { flex: 0 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: break-word; text-align: right; line-height: 1.3; font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ifl-trail { flex: none; display: grid; place-items: center; color: var(--text-3); }
.ifl-trail .ifl-glyph svg { width: 17px; height: 17px; stroke-width: 2.6; }
.ifl-row[aria-current="true"] .ifl-trail, .ifl-row[aria-selected="true"] .ifl-trail { color: var(--acc-ink); }
.ifl-results .ifl-row { padding: 10px 12px; min-height: 52px; }
.ifl-results .ifl-tx b, .ifl-results .ifl-tx small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifl-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--acc-ink); background: var(--acc-wash); text-decoration: none; }
.ifl-chip.action { min-height: 36px; padding: 0 14px; font-size: 14px; color: var(--text); background: var(--glass-ctl); cursor: pointer; }
.ifl-chip.action::after { content: ""; position: absolute; inset: -4px 0; }
.ifl-chip[data-tone="warn"] { color: var(--warn); } .ifl-chip[data-tone="bad"] { color: var(--danger); } .ifl-chip[data-tone="good"] { color: var(--good-text); }
.ifl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 12px 0 0; }
.ifl-stat { margin: 0; padding: 9px 12px; border-radius: var(--r-well); background: var(--glass-ctl); }
.ifl-stat dt { font-size: 12px; color: var(--text-2); }
.ifl-stat dd { margin: 2px 0 0; font: 700 19px/1.2 var(--font-d); font-variant-numeric: tabular-nums; }
.ifl-stat small { display: block; font-size: 12px; color: var(--text-3); }
.ifl-stat[data-tone="pos"] dd, .ifl-stat[data-tone="good"] dd { color: var(--good-text); } .ifl-stat[data-tone="neg"] dd, .ifl-stat[data-tone="bad"] dd { color: var(--danger); }
.ifl-stat[data-tone="warn"] dd { color: var(--warn); } .ifl-stat[data-tone="acc"] dd { color: var(--acc-ink); }
/* Button and switch aliases share roof/controls.css with Today's cards. */
:is(.ifl-icon-btn, .ifl-chip):focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; }
.ifl-icon-btn { position: relative; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--acc-ink); background: var(--glass-ctl); cursor: pointer; transition: transform var(--dur-press); }
.ifl-icon-btn::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.ifl-icon-btn.filled { color: var(--on-acc); background: var(--acc-fill); }
.ifl-icon-btn:active { transform: scale(0.92); }
.ifl-icon-btn .ifl-glyph { display: grid; place-items: center; line-height: 1; }
.ifl-icon-btn .ifl-glyph svg { width: 20px; height: 20px; }
.ifl-seg-sm { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--glass-ctl); }
.ifl-seg-sm [role="radio"] { position: relative; min-height: 32px; padding: 0 13px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--text-2); }
.ifl-seg-sm [role="radio"]::after { content: ""; position: absolute; inset: -6px 0; }
.ifl-seg-sm [role="radio"][aria-checked="true"] { color: var(--on-acc); background: var(--acc-fill); }
.ifl-seg-sm [role="radio"]:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 1px; }
.ifl-switch { display: inline-grid; }
.ifl-field { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--ifl-radius-row, 16px); background: var(--ifl-surface-2, var(--field)); }
.ifl-field .ifl-glyph { color: var(--text-3); }
.ifl-field input, .ifl-field input:focus-visible { outline: none; border-radius: inherit; }
.ifl-field input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; outline: none; font-size: 16px; color: var(--text); padding: 10px 0; box-sizing: border-box; }
.ifl-field { transition: box-shadow 0.18s, background-color 0.18s; }
/* (focused: a ring drawn inside the field, never clipped by the sheet or the list around it, and lighter than a button's) */
.ifl-field:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acc-ink) 55%, transparent); background: color-mix(in srgb, var(--field) 70%, var(--acc-ink) 4%); }
.ifl-field:focus-within .ifl-glyph { color: var(--acc-ink); }
.ifl-field input::-webkit-search-cancel-button { display: none; }
.ifl-clear { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: var(--glass-ctl); }
.ifl-clear::after { content: ""; position: absolute; inset: -8px; }
.ifl-clear[hidden] { display: none; }
.ifl-tile { position: relative; display: grid; gap: 8px; align-content: start; min-height: 128px; padding: 16px; border-radius: var(--r-card); color: var(--text); text-decoration: none;
  background: var(--ifl-surface, var(--glass)); box-shadow: var(--ifl-shadow-card, var(--lift)); transition: transform var(--dur-fast) var(--ease-out); }
a.ifl-tile:active, .ifl-tile-main:active { transform: scale(0.97); }
.ifl-tile-main { display: grid; gap: 8px; align-content: start; border-radius: var(--r-well); color: inherit; text-decoration: none; }
.ifl-tile b { font-size: 16px; font-weight: 650; }
.ifl-tile small { font-size: 13px; line-height: 1.35; color: var(--text-2); }
.ifl-tile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ifl-mini { display: flex; align-items: flex-end; gap: 8px; min-height: 30px; margin-top: auto; }
.ifl-mini b.num { font: 700 24px/1 var(--font-d); font-variant-numeric: tabular-nums; }
.ifl-mini[data-tone="pos"] b.num { color: var(--good-text); } .ifl-mini[data-tone="neg"] b.num { color: var(--danger); }
.ifl-mini small { font-size: 12.5px; color: var(--text-2); }
.ifl-mini .bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.ifl-mini .bars i { width: 6px; height: calc(4px + 22px * var(--h, 0)); border-radius: 3px; background: color-mix(in srgb, var(--c-weather) 35%, transparent); }
.ifl-mini .bars i.w { background: var(--c-weather); }
/* the Markets day's shape: an area under the line, clipped by --pts (0…1 values from connectors.js), never a figure */
.ifl-mini .spark { display: block; width: 64px; height: 26px; color: var(--text-2); background: linear-gradient(currentColor, color-mix(in srgb, currentColor 20%, transparent)); clip-path: polygon(var(--pts)); }
.ifl-mini[data-tone="pos"] .spark { color: var(--good-text); } .ifl-mini[data-tone="neg"] .spark { color: var(--danger); }
.ifl-avatar { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.ifl-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-c1 { background: linear-gradient(160deg, #5aa9ff, #2a6ae6); } .av-c2 { background: linear-gradient(160deg, #ff8f62, #d84a28); }
.av-c3 { background: linear-gradient(160deg, #4fd27b, #1f8a49); } .av-c4 { background: linear-gradient(160deg, #a08cff, #5a4fe0); }
.av-c5 { background: linear-gradient(160deg, #ffb340, #c66a00); } .av-c6 { background: linear-gradient(160deg, #4fd6c4, #0f7f75); }
.av-c7 { background: linear-gradient(160deg, #ff6f9c, #c42d63); } .av-c8 { background: linear-gradient(160deg, #9aa3b8, #5b6379); }
.ifl-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--on-acc); background: var(--acc-fill); }
.ifl-empty, .ifl-error { display: grid; gap: 8px; justify-items: center; padding: 28px 20px; text-align: center; }
.ifl-empty b, .ifl-error b { font: 600 18px/1.3 var(--font-d); }
.ifl-empty p, .ifl-error p { margin: 0; max-width: 36ch; color: var(--text-2); font-size: 15px; }
.ifl-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.ifl-error { margin: 12px 0; border-radius: var(--r-card); background: var(--ifl-surface, var(--glass)); box-shadow: var(--ifl-shadow-card, var(--lift)); }
.ifl-skeleton { display: grid; gap: 12px; margin-bottom: 12px; }
.ifl-skeleton i { display: block; height: 84px; border-radius: var(--r-card); background: var(--glass); animation: ifl-pulse 1.4s ease-in-out infinite alternate; }
.ifl-skeleton.hero i { height: 220px; border-radius: var(--r-hero); }
.ifl-skeleton.rows i { height: 54px; border-radius: var(--ifl-radius-row, 16px); }
.ifl-skeleton.tile i { height: 128px; border-radius: var(--r-card); }
@keyframes ifl-pulse { to { opacity: 0.5; } }
.ifl-sub { margin: 0 0 12px; color: var(--text-2); font-size: 15px; }

/* search (search.js) and the connector sheet (connectors.js) */
.ifl-search { display: grid; gap: 4px; }
.ifl-none { margin: 14px 4px 0; color: var(--text-2); }
.ifl-none:empty { display: none; }
.ifl-sr-group .ifl-label { margin: 16px 4px 2px; }
/* (a sheet of one height, whatever's found, so nothing jumps as answers come in: the field stays, the results scroll
   under it; with the keyboard up, as tall as what's in sight, sheet.js's ifs-kb) */
dialog.ifl-sheet[data-sheet="search"] { height: min(640px, calc(var(--vvh, 100dvh) - env(safe-area-inset-top, 0px) - 24px)); overflow: hidden; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
dialog.ifl-sheet[data-sheet="search"].ifs-kb { padding-bottom: 8px; }
@media (hover: none) { dialog.ifl-sheet[data-sheet="search"].ifs-kb { height: auto; } }
@media (min-width: 700px) { dialog.ifl-sheet[data-sheet="search"] { height: min(600px, calc(100dvh - 96px)); padding-bottom: 12px; } }
dialog.ifl-sheet[data-sheet="search"] .ifs-body { display: flex; flex-direction: column; overflow: hidden; }
.ifl-search { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ifl-search > .ifl-field { flex: none; }
.ifl-search .ifl-results { flex: 1 1 auto; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; margin: 0 -18px; padding: 0 18px 12px; scrollbar-width: thin; }
.ifl-sr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ifl-sr-more { position: relative; flex: none; margin: 0 4px; padding: 0; font-size: 14px; font-weight: 600; color: var(--acc-ink); }
.ifl-sr-more::after { content: ""; position: absolute; inset: -12px -8px; }
.ifl-sr-more:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 3px; border-radius: 6px; }
.ifl-results [role="option"] { border-radius: var(--ifl-radius-row, 16px); scroll-margin: 8px 0; }
.ifl-results [role="option"][aria-selected="true"] { background: var(--press); }
.ifl-results .ifl-row[aria-selected="true"]::before, .ifl-results .ifl-row[aria-selected="true"] + .ifl-row::before { opacity: 0; }
.ifl-results .ifl-row { padding: 8px 10px; margin: 0 -6px; width: calc(100% + 12px); }
.ifl-results mark.ifl-hit { color: inherit; background: none; font-weight: 700; }
/* the empty field: your apps in a row, Recent, the shortcuts as chips */
.ifl-sr-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; margin: 4px -4px 0; }
.ifl-sr-app { display: grid; justify-items: center; gap: 5px; padding: 8px 2px 6px; color: var(--text); text-decoration: none; font-size: 12px; text-align: center; }
.ifl-sr-app span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ifl-sr-app .ifl-appic { transition: transform var(--dur-press); }
.ifl-sr-app:active .ifl-appic { transform: scale(0.92); }
.ifl-sr-app:focus-visible, .ifl-sr-cuts .ifl-chip:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: -2px; }
.ifl-sr-cuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ifl-sr-cuts .ifl-chip { border-radius: var(--r-pill); }
.ifl-sr-cuts .ifl-chip .ifl-glyph { color: var(--acc-ink); }
.ifl-sr-cuts .ifl-chip[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--acc-ink); background: var(--glass-ctl); }
@media (prefers-reduced-motion: reduce) { .ifl-sr-app .ifl-appic { transition: none; } }
.ifl-provides { display: grid; gap: 8px; margin: 4px 0 4px; }
.ifl-provides-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: var(--ifl-radius-row, 16px); background: var(--glass-ctl); font-size: 15px; }
.ifl-provides-row b { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--acc-ink); padding-top: 2px; }
@media (max-width: 360px) { .ifl-provides-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---- transitions (§3.7): View Transitions by kind on html[data-vt]; CSS animations where there are none ---- */
::view-transition-group(ifl-hd), ::view-transition-group(ifl-tabs) { animation: none; }
/* (the header's title and line change with the page: the old words gone quickly before the new come in, so the two
   never show over each other; its band and buttons stay put) */
::view-transition-old(ifl-hd) { animation: none; opacity: 0; }
::view-transition-new(ifl-hd) { animation: none; mix-blend-mode: normal; }
::view-transition-old(ifl-tabs) { animation: none; opacity: 0; }
::view-transition-new(ifl-tabs) { animation: none; mix-blend-mode: normal; }
::view-transition { pointer-events: none; }
/* (the group never morphs between a compact header and a full one: it takes the new one's place at once) */
::view-transition-group(ifl-hd) { animation: none; overflow: clip; }
::view-transition-image-pair(ifl-hd) { isolation: auto; }
/* (iOS-style: a push slides the new page in over the old from the edge, the old drifting back a third and dimming; a
   pop the reverse; a tab cross-fades with a slight settle and blur; a section glides; a zoom springs. The header and the
   tab bar stay where they are, as a navigation bar does) */
:root { --ease-ios: var(--motion-glide); --dur-push: var(--motion-page); --dur-tab: var(--motion-tab); }
html[data-vt="push"]::view-transition-old(root) { animation: var(--dur-push) var(--ease-ios) both ifl-push-under; }
html[data-vt="push"]::view-transition-new(root) { animation: var(--dur-push) var(--ease-ios) both ifl-push-over; box-shadow: -18px 0 40px -18px rgba(0, 0, 0, 0.45); }
html[data-vt="pop"]::view-transition-old(root) { z-index: 1; animation: var(--dur-push) var(--ease-ios) both ifl-pop-off; box-shadow: -18px 0 40px -18px rgba(0, 0, 0, 0.45); }
html[data-vt="pop"]::view-transition-new(root) { animation: var(--dur-push) var(--ease-ios) both ifl-pop-back; }
html[data-vt="tab"]::view-transition-old(root) { animation: var(--dur-tab) var(--ease-ios) both ifl-tab-out; }
html[data-vt="tab"]::view-transition-new(root) { animation: var(--dur-tab) var(--ease-ios) both ifl-tab-in; }
html[data-vt="fade"]::view-transition-old(root) { animation: var(--motion-fade) ease both ifl-fade-out; }
html[data-vt="fade"]::view-transition-new(root) { animation: var(--motion-fade) ease both ifl-fade-in; }
html[data-vt="zoom"]::view-transition-group(ifl-zoom) { animation-duration: var(--motion-page); animation-timing-function: var(--motion-spring); }
html[data-vt="zoom"]::view-transition-old(root) { animation: var(--motion-tab) ease both ifl-tab-out; }
html[data-vt="zoom"]::view-transition-new(root) { animation: var(--motion-release) var(--ease-ios) both ifl-fade-in; }
@keyframes ifl-push-over { from { transform: translateX(100%); } }
@keyframes ifl-push-under { to { transform: translateX(-22%) scale(0.985); opacity: 0.88; } }
@keyframes ifl-pop-off { to { transform: translateX(100%); } }
@keyframes ifl-pop-back { from { transform: translateX(-22%) scale(0.985); opacity: 0.88; } }
@keyframes ifl-tab-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ifl-tab-out { to { opacity: 0; } }
@keyframes ifl-in-right { from { opacity: 0.72; transform: translateX(24px); } }
@keyframes ifl-in-left { from { opacity: 0.72; transform: translateX(-16px); } }
@keyframes ifl-out-left { to { opacity: 0; transform: translateX(-30%); } }
@keyframes ifl-out-right { to { opacity: 0; transform: translateX(100%); } }
/* (where there are no View Transitions: the page coming in, the same way) */
.ifl-enter-push { animation: var(--dur-push) var(--ease-ios) ifl-in-right; }
.ifl-enter-pop { animation: var(--dur-push) var(--ease-ios) ifl-in-left; }
.ifl-enter-tab { animation: var(--dur-tab) var(--ease-ios) ifl-tab-in; }
.ifl-enter-fade { animation: var(--motion-fade) ease ifl-fade-in; }
.ifl-enter-zoom { animation: var(--motion-release) var(--motion-glide) ifl-tab-in; }
/* Transforming a screen containing a fixed composer would change its containing block. */
html.ifl-fill .ifl-screen[class*="ifl-enter-"] { animation-name: ifl-fade-in; }
.ifs-page.ifl-enter-push { animation-name: ifl-sheet-page-in; animation-duration: var(--motion-release); }
.ifs-body.ifl-enter-pop { animation-name: ifl-sheet-page-back; animation-duration: var(--motion-release); }
@keyframes ifl-sheet-page-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes ifl-sheet-page-back { from { opacity: 0; transform: translateX(-12px); } }
/* (sheets rise with a spring, and a pressed card or row gives a little) */
dialog.ifl-sheet { animation-duration: var(--ifl-motion-sheet, 0.46s); animation-timing-function: var(--motion-spring); }
dialog.ifl-sheet.closing { animation-duration: var(--ifl-motion-exit, 0.22s); animation-timing-function: var(--ease-in); }
:is(a, button).tcard, .ifl-tile-main, .ifl-card.tappable, a.ifl-card,
.ifs-btn, .ifl-icon-btn, .ifh-me, .ifh-act, .ifl-back, .ifl-tab,
.apps-shortcut, .wx-warn, .ft-next, .trip-card, .dw-chip, .bk-act, .dc-send, .ifl-nt-all {
  transition: transform var(--motion-release) var(--motion-spring), background-color var(--motion-fade) ease, opacity var(--motion-fade) ease;
}
:is(a, button).tcard:active, a.ifl-card:active, .ifl-card.tappable:active, .ifl-tile-main:active,
.apps-shortcut:active, .wx-warn:active, .ft-next:active, .trip-card:active, .dw-chip:active, .bk-act:active {
  transform: scale(var(--ifl-press-card, 0.985)); transition-duration: var(--motion-press);
}
:is(.ifs-btn, .ifl-icon-btn, .ifh-me, .ifh-act, .ifl-back, .ifl-tab, .dc-send, .ifl-nt-all):active:not(:disabled) {
  transform: scale(var(--ifl-press-icon, 0.94)); transition-duration: var(--motion-press);
}
:is(button, a).row, :is(button, a, label).ifl-row { transition: background-color var(--motion-fade) ease; }
.ifm-pop { transform: translateY(-4px) scale(0.96); transition: transform var(--motion-release) var(--motion-spring), opacity var(--motion-fade) ease; }
.ifm-pop.open { transform: none; }
.ifm-pop.closing { transform: translateY(-3px) scale(0.97); transition: transform 0.22s var(--motion-glide), opacity var(--motion-fade) ease; }
.ifm-note, .ifa-sheet { transition: transform var(--motion-release) var(--motion-spring), opacity var(--motion-fade) ease; }
.ifm-layer { transition: background-color var(--motion-fade) ease; }
.ifm-switch::before { transition-timing-function: var(--motion-spring); }
.ifl-nt-card { transition-duration: var(--motion-release); transition-timing-function: var(--motion-spring); }
.ifl-nt-row.gone .ifl-nt-card { transition-duration: var(--ifl-motion-exit, 0.22s); transition-timing-function: var(--motion-glide); }
/* Decorative loops rest while the document is behind the app switcher. */
html[data-motion-paused] :is(.aura, .pg-track .cb svg, .tcard.loading .sk i), html[data-motion-paused] .pg-track::before { animation-play-state: paused; }

/* ---- reduced motion, reduced transparency, more contrast, forced colours, a phone on its side ---- */
@media (prefers-reduced-motion: reduce) {
  .ifl-lens, .ifl-tab-pill, .ifl-sec { transition: none; }
  .ifl-sec:active { transform: none; }
  .ifl-skeleton i { animation: none; }
  dialog.ifl-sheet, dialog.ifl-sheet.closing { animation-name: ifl-fade-in; animation-duration: 0.15s; }
  html[data-vt]::view-transition-old(root), html[data-vt]::view-transition-new(root), html[data-vt]::view-transition-group(ifl-zoom) { animation: 0.18s ease both ifl-fade-in !important; box-shadow: none; filter: none; }
  html[data-vt]::view-transition-old(root) { animation-name: ifl-fade-out !important; }
  [class*="ifl-enter-"] { animation: 0.15s ease both ifl-fade-in !important; }
  :is(.tcard, .ifl-tile-main, .ifl-card, .ifs-btn, .ifl-icon-btn, .ifh-me, .ifh-act, .ifl-back, .ifl-tab,
    .apps-shortcut, .wx-warn, .ft-next, .trip-card, .dw-chip, .bk-act, .dc-send, .ifl-nt-all):active { transform: none !important; }
  dialog.ifl-sheet.ifs-touched:not(.closing) { transition: none; }
  dialog.ifl-sheet.closing { animation-name: ifl-fade-out; }
}
@media (prefers-reduced-transparency: reduce) {
  .ifl-card, .ifl-list, .ifl-tile, dialog.ifl-sheet, .ifl-tabs, .ifl-toast, .ifl-error { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ifl-hd.ifh::before { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-contrast: more) {
  :root { --text-2: color-mix(in srgb, var(--text) 90%, transparent); --text-3: color-mix(in srgb, var(--text) 80%, transparent); --line: color-mix(in srgb, var(--text) 30%, transparent); }
  .ifl-card, .ifl-list, .ifl-tile, dialog.ifl-sheet, .ifl-segs { box-shadow: 0 0 0 1px var(--line); }
}
@media (forced-colors: active) {
  .ifl-field:focus-within { outline: 2px solid Highlight; outline-offset: -2px; box-shadow: none; }
  .ifl-sec[aria-selected="true"], .ifl-tabs .ifl-tab[aria-current], .ifl-seg-sm [role="radio"][aria-checked="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ifl-lens, .ifl-tab-pill { display: none; }
  .ifl-mini .spark { forced-color-adjust: none; background: CanvasText; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --tabs-h: 48px; }
  .ifl-hd.ifh { --p: 1 !important; }
}

/* ---- on a computer (from 1100 px): the tab bar is a rail down the left (tabs.js puts InFlite's name, the keys, your
   apps and you in it, .ifl-rail-x, shown only here), and every screen sits beside it ---- */
.ifl-rail-x { display: none; }
@media (min-width: 1100px) {
  :root { --rail-w: 236px; --tabs-h: 0px; }
  .today-in { padding-left: var(--rail-w); }
  .today-in > .ifl-tabs, .ifl-tabs.has-pill { position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: var(--rail-w); max-width: none; height: auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 12px calc(env(safe-area-inset-bottom, 0px) + 14px) max(12px, env(safe-area-inset-left, 0px));
    border-radius: 0; box-shadow: inset -0.5px 0 0 var(--line); overflow-y: auto; overscroll-behavior: contain; transform: none; }
  .ifl-tabs.away { transform: none; visibility: visible; }
  .ifl-rail-x { display: revert; }
  .ifl-rail-brand { display: flex; align-items: center; gap: 10px; padding: 2px 10px 18px; font: 700 19px/1 var(--font-d); letter-spacing: -0.3px; color: var(--text); }
  .ifl-rail-logo { width: 30px; height: 30px; border-radius: 8px; }
  .ifl-tabs .ifl-tab, .ifl-rail-app { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: var(--ifl-radius-row, 16px);
    font-size: 15px; font-weight: 600; letter-spacing: -0.1px; color: var(--ifl-tab-ink); text-decoration: none; position: relative; z-index: 1; display: flex; }
  .ifl-tabs .ifl-tab-ic { width: 22px; height: 22px; }
  .ifl-tabs .ifl-tab:active, .ifl-rail-app:active { transform: none; opacity: 0.7; }
  .ifl-tabs .ifl-tab:hover, .ifl-rail-app:hover { background: color-mix(in srgb, var(--ifl-tab-ink) 7%, transparent); }
  .ifl-tabs .ifl-tab[aria-current]:hover { background: none; }
  .ifl-rail-app[aria-current] { color: var(--ifl-on-accent, var(--text)); }
  /* (in an app, the app's row is the one you're on, not Apps) */
  .ifl-tabs.in-app .ifl-tab[aria-current="true"] { color: var(--ifl-tab-ink); }
  .ifl-tab-pill { top: 0; left: 12px; right: 12px; width: auto; height: var(--ph, 0); bottom: auto; border-radius: var(--ifl-radius-row, 16px); transform: translateY(var(--py, 0));
    transition: transform var(--motion-release) var(--motion-spring), height var(--motion-release) var(--motion-spring); }
  .ifl-tab-k { margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--line); font: 600 11.5px/1 var(--font); color: var(--text-3); }
  .ifl-tab:has(.ifl-tab-badge) .ifl-tab-k { display: none; }
  .ifl-tab-badge { position: static; margin-left: auto; }
  .ifl-rail-h { padding: 18px 12px 6px; font-size: 12px; font-weight: 650; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-3); }
  .ifl-rail-ic { flex: none; width: 24px; height: 24px; border-radius: 6px; }
  .ifl-rail-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; text-decoration: none; color: var(--text);
    background: var(--ifl-surface-2, var(--glass)); box-shadow: none; position: relative; z-index: 1; }
  .ifl-rail-me:hover { background: var(--glass-2, var(--glass)); }
  .ifl-rail-ph { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--acc-fill); color: var(--on-acc); font-weight: 700; }
  .ifl-rail-ph > * { width: 100%; height: 100%; object-fit: cover; }
  .ifl-rail-who { display: grid; min-width: 0; }
  .ifl-rail-who b { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ifl-rail-who small { font-size: 12px; color: var(--text-2); }
  .ifl-tab:focus-visible, .ifl-rail-app:focus-visible, .ifl-rail-me:focus-visible { outline: 2px solid var(--ifl-tab-on); outline-offset: -2px; }
  /* (nothing floats over the foot of the page now: the screens' room for the bar goes) */
  .today-in .view { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: reduce) { .ifl-tab-pill { transition: none; } }

/* ---- a count on a header act (header.js count: Today's bell), the Home Screen badge's red ---- */
.ifl-hd .ifh-act-badge { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; background: #d70015; pointer-events: none; }

/* Conversation identity is compact even before the page has scrolled. */
.ifl-hd.ifh.ifh-conversation { --p: 0 !important; height: calc(var(--ifh-pt0) + 68px); min-height: 68px; margin-bottom: 0; column-gap: 10px; }
.ifh-conversation .ifh-crumb { display: none; }
.ifh-conversation .ifh-t { position: relative; padding-left: 50px; }
.ifh-person { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; }
.ifh-person[hidden] { display: none; }
.ifh-person .ifl-avatar { width: 40px; height: 40px; font-size: 18px; }
.ifh-conversation .ifh-name { font-size: 22px !important; line-height: 26px; letter-spacing: -.4px; }
.ifh-conversation .ifh-line { font-size: 12px; line-height: 16px; }
.ifh-conversation .ifh-acts { gap: 2px; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ifh-conversation .ifh-act { min-width: 44px; min-height: 44px; }
@media (max-width: 359px) { .ifh-conversation .ifh-t { padding-left: 40px; } .ifh-person, .ifh-person .ifl-avatar { width: 32px; height: 32px; } .ifh-conversation .ifh-name { font-size: 20px !important; } }