/* RamGO design system (v4 look, RamGO brand colours since v4.1: docs/brand.md). Dark only, flat (docs/v4/design.md is the contract).
   Tokens are --f-*, components are .f-*, so this file can sit next to app.css during the migration.
   Colours live only in the token block; components never hard-code a colour.
   v4: one flat background, flat surfaces, one flat accent. The gradient / glass / glow tokens of v3 keep their names
   (screens not ported yet still use them) but resolve to their flat equivalents. */

/* ---------------------------------------------------------------- fonts (self-hosted, OFL: fonts/OFL-*.txt) */
/* Variable WOFF2 from Google Fonts, latin + latin-ext (Slovak: ď ľ ť ĺ ŕ ô ä). Bricolage Grotesque 400–700 with its
   optical-size axis (display: titles, numbers), DM Sans 400–500 (text). */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-black-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-black-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------- surfaces */
  --f-bg: #141414;                   /* RamGO coal: the one flat page colour */
  --f-surface-1: #212121;            /* cards, number wells, boxes (neutral greys on coal) */
  --f-surface-2: #2A2A2A;            /* raised on the page: chips, steppers, the bar */
  --f-surface-3: #343434;            /* pressed / track fill */
  --f-bar: #2A2A2A;                  /* bottom bar (and its bulge: the SVG filter in index.html repeats this value) */
  --f-quiet: rgba(244, 239, 233, 0.08); /* quiet filled circle / secondary button */
  --f-quiet-pressed: rgba(244, 239, 233, 0.14);
  --f-outline: rgba(244, 239, 233, 0.28); /* outline circle button */
  --f-glass: #2A2A2A;                /* v3 name: was translucent glass, now the flat bar colour */
  --f-glass-strong: #2A2A2A;
  --f-scrim: rgba(8, 8, 10, 0.64);
  --f-sep: rgba(244, 239, 233, 0.07);
  --f-stroke: rgba(244, 239, 233, 0.12);
  --f-highlight: transparent;        /* v3: 1px top highlight on glass. Flat now. */

  /* ---------------------------------------------------------------- text */
  --f-text: #F4EFE9;   /* RamGO cream: primary */
  --f-text-2: #B9B3AC; /* RamGO muted-dark: secondary */
  --f-text-3: #6E6964; /* tertiary / disabled: large or non-essential text only */

  /* ---------------------------------------------------------------- accent (flat; once per screen: the thing to do next) */
  --f-accent: #FF5A1F;             /* RamGO ember */
  --f-accent-pressed: #FF7340;
  --f-accent-text: #FF6B33;       /* accent as text on dark surfaces (readable size) */
  --f-accent-soft: rgba(255, 90, 31, 0.14);
  --f-on-accent: #141414;         /* text on the accent: always coal, white fails contrast on ember */

  /* ---------------------------------------------------------------- v3 gradients + glass, resolved flat */
  /* Kept so screens not ported yet keep working: every one is a plain colour (or none/transparent) now. */
  --f-accent-hi: var(--f-accent);
  --f-accent-lo: var(--f-accent);
  --f-accent-glow: transparent;
  --f-dock-glow: transparent;
  --f-accent-edge: transparent;
  --f-on-accent-track: rgba(20, 20, 20, 0.18);
  --f-sheen: transparent;
  --f-grad-accent: var(--f-accent);
  --f-grad-page: var(--f-bg);
  --f-grad-sheet: var(--f-bg);
  --f-ember: none;
  --f-on-glass-1: var(--f-surface-1);
  --f-on-glass-2: var(--f-quiet);
  --f-on-glass-3: var(--f-quiet-pressed);
  --f-glass-fill: var(--f-surface-1);
  --f-glass-edge: transparent;
  --f-glass-shadow: none;
  --f-accent-shadow: none;
  --f-glass-pill: var(--f-quiet);
  --f-glass-pill-edge: transparent;
  --f-bar-prev: rgba(244, 239, 233, 0.2);
  --f-thumb-bg: var(--f-surface-1);  /* behind exercise pictures */
  --f-thumb-ring: var(--f-bg);

  /* ---------------------------------------------------------------- semantic */
  --f-better: #22C55E;            /* RamGO up: always with ▲ */
  --f-better-soft: rgba(34, 197, 94, 0.14);
  --f-worse: #E5484D;             /* RamGO down: always with ▼ (never the ember accent) */
  --f-worse-soft: rgba(229, 72, 77, 0.14);
  --f-same: #8A8A93;              /* RamGO same: always with = */
  --f-neutral-soft: rgba(244, 239, 233, 0.07);

  /* ---------------------------------------------------------------- data */
  --f-kcal: var(--f-accent);
  --f-protein: #7FB8E6;
  --f-carbs: #E3B867;
  --f-fat: #B79BE0;
  --f-water: #6FC3D6;
  --f-track: rgba(244, 239, 233, 0.08);

  /* ---------------------------------------------------------------- type */
  --f-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-font-display: "Bricolage Grotesque", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-font-brand: "Archivo Black", "Bricolage Grotesque", system-ui, sans-serif; /* RAMGO wordmark and short brand lines only, never paragraphs */
  --f-font-num: "Bricolage Grotesque", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* with tabular-nums */
  --f-track-display: -0.02em;     /* letter-spacing for the display font */
  --f-fs-hero: 54px;              /* the big calm number (exercise cards); Progres boxes use --f-fs-num */
  --f-fs-num: 44px;
  --f-fs-display: 28px;
  --f-fs-title: 21px;
  --f-fs-body: 17px;
  --f-fs-sub: 15px;
  --f-fs-caption: 13px;
  --f-fs-dock: 11px;
  --f-lh-tight: 1.05;
  --f-lh-head: 1.2;
  --f-lh-body: 1.45;

  /* ---------------------------------------------------------------- spacing */
  --f-s1: 4px;
  --f-s2: 8px;
  --f-s3: 12px;
  --f-s4: 16px;
  --f-s5: 24px;
  --f-s6: 32px;
  --f-s7: 48px;
  --f-gutter: 16px;               /* edge padding of the app frame (.app) and of fixed layers */
  --f-page-pad: 22px;             /* v4 screens: content distance from the screen edge (mockups: 22); inside .app add 6px */
  --f-card-pad: 20px;
  --f-section-gap: 32px;
  --f-tap: 44px;

  /* ---------------------------------------------------------------- radii */
  --f-r-sm: 12px;   /* thumbnails, inputs */
  --f-r-md: 16px;   /* tiles, rows inside cards */
  --f-r-lg: 24px;   /* cards */
  --f-r-pic: 20px;  /* exercise pictures */
  --f-r-xl: 28px;   /* the popup sheet */
  --f-r-pill: 999px;/* buttons, pills */
  --f-r-dock: 22px; /* the bottom bar */

  /* ---------------------------------------------------------------- elevation (flat: only floating layers keep a soft drop) */
  --f-shadow-1: 0 0 0 transparent;
  --f-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.35);
  --f-shadow-3: none;
  --f-blur: 0px;
  --f-focus: 0 0 0 2px var(--f-bg), 0 0 0 4px var(--f-accent);

  /* ---------------------------------------------------------------- motion */
  --f-dur-1: 120ms;  /* press */
  --f-dur-2: 220ms;  /* toggles, pills */
  --f-dur-3: 300ms;  /* sheets, entrances: nothing a tap starts runs longer */
  --f-dur-exit: 180ms; /* leaving is quicker than arriving */
  --f-stagger: 40ms;
  --f-dur-ring: 700ms;
  --f-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* v4: short and soft */
  --f-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --f-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --f-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --f-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --f-ease-glide: cubic-bezier(0.3, 1.2, 0.5, 1); /* a small overshoot, then it settles (the bar's bulge) */

  /* ---------------------------------------------------------------- layers */
  --f-z-content: 1;
  --f-z-sticky: 10;
  --f-z-fab: 20;
  --f-z-dock: 25;
  --f-z-scrim: 40;
  --f-z-sheet: 41;
  --f-z-menu: 45;
  --f-z-timer: 50;
  --f-z-toast: 60;

  /* bottom bar: 58 high, 14 from the bottom (or the home indicator), inset 16 from the sides */
  --f-dock-h: 58px;
  --f-dock-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  --f-dock-space: calc(var(--f-dock-h) + var(--f-dock-bottom) + 48px); /* room a scrolling page leaves under its content */

  /* the popup sheet's margin from the screen edges */
  --f-sheet-gap: 10px;
}

/* Pregnancy mode uses the same ember accent as everyone (owner, 2026-11-09); data-mode stays for its own features. */

/* ====================================================================== base (scoped) */
.f-app {
  min-height: 100dvh;
  background: var(--f-bg);
  color: var(--f-text);
  font-family: var(--f-font);
  font-size: var(--f-fs-body);
  line-height: var(--f-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal;
  /* DM Sans ships 400–500 only: a bolder weight asked for by older CSS renders as 500, never as faux bold */
  font-synthesis-weight: none;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
.f-app *, .f-app *::before, .f-app *::after { box-sizing: border-box; }
/* Zero specificity (:where on both parts): the resets must not beat a component class, old or new, that sets margin, padding or a background. */
:where(.f-app) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(.f-app) :where(ul, ol) { padding: 0; list-style: none; }
:where(.f-app) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.f-app :where(img, svg) { display: block; max-width: 100%; }
.f-app :focus-visible { outline: none; box-shadow: var(--f-focus); }

.f-num { font-family: var(--f-font-num); font-variant-numeric: tabular-nums; letter-spacing: var(--f-track-display); }
/* display type: titles and numbers (Bricolage Grotesque 500–600, tight tracking) */
.f-display { font-family: var(--f-font-display); font-weight: 600; letter-spacing: var(--f-track-display); line-height: 1.1; }
/* a small quiet label over a group (Ja "Navyše", Progres "Váha"): 15px / 500, secondary */
.f-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--f-s3); padding: 26px 0 12px; font-size: var(--f-fs-sub); font-weight: 500; color: var(--f-text-2); }
.f-label > span { color: var(--f-text-3); font-weight: 400; }
.f-muted { color: var(--f-text-2); }
.f-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page column: gutters + room for the dock */
.f-screen { padding: 0 var(--f-gutter) var(--f-dock-space); display: grid; gap: var(--f-s4); }
.f-section { display: grid; gap: var(--f-s3); margin-top: var(--f-s5); }
.f-section__title { font-family: var(--f-font-display); letter-spacing: var(--f-track-display); font-size: var(--f-fs-title); font-weight: 600; line-height: var(--f-lh-head); display: flex; align-items: center; gap: var(--f-s2); }
.f-section__title .f-info { margin-left: auto; }

/* ====================================================================== buttons */
.f-btn {
  min-height: var(--f-tap);
  padding: 0 22px;
  border-radius: var(--f-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--f-s2);
  font-size: var(--f-fs-sub);
  font-weight: 500;
  white-space: nowrap;
  transition: transform var(--f-dur-1) var(--f-ease), background-color var(--f-dur-2) var(--f-ease), opacity var(--f-dur-2) var(--f-ease);
  -webkit-user-select: none;
  user-select: none;
}
.f-btn:active { transform: scale(0.97); }
.f-btn svg { flex: none; }
.f-btn svg { width: 20px; height: 20px; }
/* primary: the light pill (one per screen, the main action) */
.f-btn--primary { background: var(--f-text); color: #141414; }
.f-btn--primary:active { opacity: 0.85; }
/* accent: the one thing to do next (e.g. the suggested exercise), flat coral */
.f-btn--accent { background: var(--f-accent); color: var(--f-on-accent); }
.f-btn--accent:active { background: var(--f-accent-pressed); }
/* secondary: a quiet filled pill; outline: a 1px light ring (−15 / +15 next to the primary) */
.f-btn--secondary, .f-btn--soft { background: var(--f-quiet); color: var(--f-text); }
.f-btn--secondary:active, .f-btn--soft:active { background: var(--f-quiet-pressed); }
.f-btn--outline { background: none; color: var(--f-text); box-shadow: inset 0 0 0 1px var(--f-outline); }
.f-btn--ghost { color: var(--f-text); padding: 0 12px; }
.f-btn--lg { min-height: 64px; font-size: var(--f-fs-body); padding: 0 28px; }
.f-btn--block { width: 100%; }

/* round icon button (44 px): close, back, ⋯, stepper ±. Quiet filled circle; --outline is the 1px ring version. */
.f-icon-btn {
  width: var(--f-tap);
  height: var(--f-tap);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--f-quiet);
  color: var(--f-text);
  transition: transform var(--f-dur-1) var(--f-ease), background-color var(--f-dur-2) var(--f-ease);
}
.f-icon-btn:active { transform: scale(0.92); background: var(--f-quiet-pressed); }
.f-icon-btn--outline { background: none; box-shadow: inset 0 0 0 1px var(--f-outline); }
.f-icon-btn--outline:active { background: var(--f-quiet); }
.f-icon-btn--accent { background: var(--f-accent); color: var(--f-on-accent); }
.f-icon-btn svg { width: 18px; height: 18px; }

/* (i) info button: small visual, full 44 px hit area */
.f-info {
  width: var(--f-tap);
  height: var(--f-tap);
  margin: -10px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--f-text-3);
}
.f-info::before {
  content: "i";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  font: 700 13px/1 Georgia, "Times New Roman", serif;
}
.f-info:hover, .f-info:active { color: var(--f-text-2); }

/* ====================================================================== header block */
/* The top of a screen. v4: no coloured block any more (no coral header): a quiet title on the page grey, a small
   secondary line, at most one calm number. The tab (.f-head__tab) stays for the markup that still uses it. */
.f-head {
  position: relative;
  margin: 0 calc(var(--f-gutter) * -1);
  padding: calc(var(--f-s5) + env(safe-area-inset-top, 0px)) var(--f-page-pad) var(--f-s3);
  background: transparent;
  color: var(--f-text);
}
.f-head__eyebrow { font-size: var(--f-fs-sub); font-weight: 500; color: var(--f-text-2); }
.f-head__title { font-family: var(--f-font-display); font-size: var(--f-fs-display); font-weight: 600; letter-spacing: var(--f-track-display); line-height: var(--f-lh-head); }
.f-head__hero { display: flex; align-items: baseline; gap: var(--f-s2); margin-top: var(--f-s3); }
.f-head__hero b { font-family: var(--f-font-num); font-variant-numeric: tabular-nums; font-size: var(--f-fs-num); font-weight: 500; letter-spacing: var(--f-track-display); line-height: var(--f-lh-tight); }
.f-head__hero span { font-size: var(--f-fs-sub); font-weight: 500; color: var(--f-text-2); }
.f-head__tab {
  position: absolute;
  left: 0;
  top: 100%;
  min-height: 52px;
  max-width: 62%;
  padding: 0 var(--f-s5) var(--f-s2);
  display: flex;
  align-items: center;
  gap: var(--f-s2);
  font-size: var(--f-fs-sub);
  font-weight: 500;
  white-space: nowrap;
}
.f-head__tab::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: var(--f-r-xl);
  height: var(--f-r-xl);
  display: none;
}
/* quiet variant: the same now (kept for the markup that asks for it) */
.f-head--quiet { padding-bottom: var(--f-s3); }
.f-head--tab { margin-bottom: 0; }

/* ====================================================================== card / widget */
.f-card {
  background: var(--f-surface-1);
  border-radius: var(--f-r-lg);
  padding: var(--f-card-pad);
  display: grid;
  gap: var(--f-s4);
  min-width: 0;
}
.f-card__head { display: flex; align-items: center; gap: var(--f-s3); min-width: 0; }
.f-card__title { font-size: var(--f-fs-body); font-weight: 500; line-height: var(--f-lh-head); }
.f-card__meta { font-size: var(--f-fs-caption); color: var(--f-text-2); }
.f-card__head > :is(.f-btn, .f-icon-btn, .f-info, .f-delta, .f-row__chev):last-child:not(:first-child) { margin-left: auto; }
.f-card--hero { padding: var(--f-s5); }
.f-card--hero .f-card__title { font-family: var(--f-font-display); font-size: var(--f-fs-title); font-weight: 600; letter-spacing: var(--f-track-display); }
.f-card--flush { padding: var(--f-s2) 0; gap: 0; }
.f-card--tap { transition: transform var(--f-dur-1) var(--f-ease-out); }
.f-card--tap:active { transform: scale(0.985); }

/* side-by-side widgets */
.f-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--f-s3); }
.f-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--f-s2); }

/* ====================================================================== stat tile */
.f-stat {
  background: var(--f-surface-2);
  border-radius: var(--f-r-md);
  padding: var(--f-s3) var(--f-s3) var(--f-s3) var(--f-s4);
  display: grid;
  gap: 2px;
  min-width: 0;
  position: relative;
}
.f-stat__label { font-size: var(--f-fs-caption); color: var(--f-text-2); display: flex; align-items: center; gap: 6px; }
.f-stat__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f-stat-color, var(--f-text-3)); flex: none; }
.f-stat__value { font-family: var(--f-font-num); font-variant-numeric: tabular-nums; letter-spacing: var(--f-track-display); font-size: var(--f-fs-title); font-weight: 500; line-height: 1.15; white-space: nowrap; }
.f-stat__value small { font-family: var(--f-font); letter-spacing: 0; font-size: var(--f-fs-caption); font-weight: 400; color: var(--f-text-2); margin-left: 2px; }
.f-stat__bar { height: 4px; border-radius: 2px; background: var(--f-track); margin-top: 6px; overflow: hidden; }
.f-stat__bar i { display: block; height: 100%; width: calc(var(--f-p, 0) * 100%); background: var(--f-stat-color, var(--f-text-2)); border-radius: inherit; }
.f-stat--protein { --f-stat-color: var(--f-protein); }
.f-stat--carbs { --f-stat-color: var(--f-carbs); }
.f-stat--fat { --f-stat-color: var(--f-fat); }
.f-stat--water { --f-stat-color: var(--f-water); }
.f-stat--plain .f-stat__label::before { display: none; }
.f-stat__add { position: absolute; right: 4px; top: 4px; }

/* ====================================================================== delta pill */
/* Arrow glyph + signed number + colour. Colour is never the only signal. */
.f-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: var(--f-r-pill);
  font-size: var(--f-fs-caption);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--f-neutral-soft);
  color: var(--f-text-2);
}
.f-delta::before { font-size: 9px; line-height: 1; }
.f-delta--better { background: var(--f-better-soft); color: var(--f-better); }
.f-delta--better::before { content: "▲"; }
.f-delta--worse { background: var(--f-worse-soft); color: var(--f-worse); }
.f-delta--worse::before { content: "▼"; }
.f-delta--neutral { color: var(--f-same); }
.f-delta--neutral::before { content: "="; font-size: 12px; }
.f-delta--pop { animation: f-pop var(--f-dur-2) var(--f-ease-out); }
@keyframes f-pop { from { transform: scale(0.85); opacity: 0; } }

/* ====================================================================== ring */
/* Fits today's ring() markup: add class "f-ring" next to "ring" and it picks these rules up.
   <div class="ring f-ring" role="img" aria-label="…">
     <svg viewBox="0 0 76 76"><circle class="track" cx="38" cy="38" r="32" …/><circle class="value" … stroke-dasharray="C" stroke-dashoffset="OFF"/></svg>
     <div class="ring-label"><b>3/12</b><span>dnes</span></div>
   </div>
   Size with --f-ring-size, colour with --f-ring-color or a modifier, stroke with --f-ring-stroke (in viewBox units). */
.f-ring {
  --f-ring-size: 76px;
  --f-ring-color: var(--f-accent);
  --f-ring-stroke: 6;
  width: var(--f-ring-size);
  height: var(--f-ring-size);
  position: relative;
  flex: none;
}
.f-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.f-ring .track { stroke: var(--f-track); stroke-width: var(--f-ring-stroke); }
.f-ring .value { stroke: var(--f-ring-color); stroke-width: var(--f-ring-stroke); stroke-linecap: round; transition: stroke-dashoffset var(--f-dur-ring) var(--f-ease-out); }
.f-ring .ring-label, .f-ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.f-ring .ring-label b, .f-ring__label b { font-family: var(--f-font-num); font-variant-numeric: tabular-nums; font-size: calc(var(--f-ring-size) * 0.24); font-weight: 500; letter-spacing: var(--f-track-display); }
.f-ring .ring-label span, .f-ring__label span { font-size: max(11px, calc(var(--f-ring-size) * 0.12)); color: var(--f-text-2); }
.f-ring--sm { --f-ring-size: 56px; --f-ring-stroke: 7; }
.f-ring--lg { --f-ring-size: 120px; --f-ring-stroke: 5; }
.f-ring--protein { --f-ring-color: var(--f-protein); }
.f-ring--water { --f-ring-color: var(--f-water); }
.f-ring--done { --f-ring-color: var(--f-better); }
/* ring with a name under it, and a row of rings spread across a card */
.f-ring-fig { display: grid; justify-items: center; gap: var(--f-s2); margin: 0; }
.f-ring-fig figcaption { font-size: var(--f-fs-caption); font-weight: 500; color: var(--f-text-2); display: flex; align-items: center; gap: 6px; }
.f-ring-fig figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f-ring-color, var(--f-accent)); }
.f-ring-fig:has(.f-ring--protein) { --f-ring-color: var(--f-protein); }
.f-rings { display: flex; justify-content: space-around; align-items: center; gap: var(--f-s4); }

/* ====================================================================== charts (inline SVG) */
/* Line: <svg class="f-chart f-chart--line" viewBox="0 0 320 140"> grid lines, <path class="f-chart__area">, <path class="f-chart__line">, <circle class="f-chart__dot">, <text class="f-chart__axis"> */
.f-chart { width: 100%; height: auto; overflow: visible; }
.f-chart__grid { stroke: var(--f-sep); stroke-width: 1; }
.f-chart__axis { fill: var(--f-text-3); font-size: 11px; font-family: var(--f-font); font-variant-numeric: tabular-nums; }
.f-chart__line { fill: none; stroke: var(--f-chart-color, var(--f-text)); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.f-chart__area { fill: var(--f-chart-color, var(--f-text)); opacity: 0.06; }
.f-chart__goal { stroke: var(--f-text-3); stroke-width: 1.5; stroke-dasharray: 4 5; }
.f-chart__dot { fill: var(--f-bg); stroke: var(--f-chart-color, var(--f-text)); stroke-width: 2.5; }
.f-chart__dot--last { fill: var(--f-chart-color, var(--f-text)); }
.f-chart__label { fill: var(--f-text); font-size: 12px; font-weight: 500; font-family: var(--f-font-num); font-variant-numeric: tabular-nums; }
/* Bar: <rect class="f-chart__bar"> per value, add f-chart__bar--now on the current one */
.f-chart__bar { fill: var(--f-surface-3); }
.f-chart__bar--now { fill: var(--f-chart-color, var(--f-accent)); }
.f-chart--weight { --f-chart-color: var(--f-text); }
.f-chart--volume { --f-chart-color: var(--f-accent); }

/* ====================================================================== list row */
/* thumbnail + title + meta + trailing action. Long-press ready: no callout, no text selection. */
.f-list { display: grid; }
.f-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--f-s3);
  min-height: 64px;
  padding: var(--f-s2) 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}
.f-card--flush .f-row { padding-inline: var(--f-s4); }
.f-row + .f-row::before { content: ""; position: absolute; top: 0; left: 72px; right: 0; height: 1px; background: var(--f-sep); }
.f-card--flush .f-row + .f-row::before { left: calc(72px + var(--f-s4)); }
.f-row__thumb { width: 60px; height: 60px; border-radius: var(--f-r-sm); background: var(--f-surface-2); object-fit: cover; flex: none; -webkit-user-drag: none; }
.f-row__thumb--icon { display: grid; place-items: center; color: var(--f-text-2); }
.f-row__thumb--icon svg { width: 24px; height: 24px; }
.f-row__main { min-width: 0; display: grid; gap: 2px; }
.f-row__title { font-size: var(--f-fs-body); font-weight: 500; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; } /* long exercise names wrap to 2 lines instead of "…" */
.f-row__meta { font-size: var(--f-fs-caption); color: var(--f-text-2); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.f-row__meta b { color: var(--f-text); font-weight: 500; }
.f-row--tap { cursor: pointer; transition: background-color var(--f-dur-2) var(--f-ease-out); border-radius: var(--f-r-md); }
.f-row--tap:active { background: var(--f-neutral-soft); }
.f-row--done .f-row__title { color: var(--f-text-2); }
.f-row--done .f-row__thumb { opacity: 0.55; }

/* trailing actions */
.f-row__add, .f-row__check {
  width: var(--f-tap);
  height: var(--f-tap);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform var(--f-dur-1) var(--f-ease-out), background-color var(--f-dur-2) var(--f-ease-out);
}
.f-row__add { background: var(--f-quiet); color: var(--f-text); }
.f-row__add svg { width: 18px; height: 18px; }
.f-row__add:active, .f-row__check:active { transform: scale(0.92); }
.f-row__check { border: 2px solid var(--f-stroke); color: transparent; }
.f-row__check svg { width: 18px; height: 18px; }
.f-row__check[aria-pressed="true"] { background: var(--f-better); border-color: var(--f-better); color: var(--f-on-accent); }
.f-row__start {
  min-height: 36px;
  padding: 0 14px 0 10px;
  border-radius: var(--f-r-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--f-accent);
  color: var(--f-on-accent);
  font-size: var(--f-fs-caption);
  font-weight: 500;
  position: relative;
}
.f-row__start::after { content: ""; position: absolute; inset: -4px; } /* 44 px hit area */
.f-row__start svg { width: 16px; height: 16px; }
.f-row__chev { width: 24px; height: var(--f-tap); display: grid; place-items: center; color: var(--f-text-3); }
.f-row__chev svg { width: 8px; height: 14px; }

/* ====================================================================== collapsible */
.f-fold { border-radius: var(--f-r-lg); background: var(--f-surface-1); }
.f-fold > summary {
  list-style: none;
  min-height: 56px;
  padding: 0 var(--f-s4) 0 var(--f-card-pad);
  display: flex;
  align-items: center;
  gap: var(--f-s3);
  cursor: pointer;
  font-weight: 500;
  border-radius: inherit;
  -webkit-user-select: none;
  user-select: none;
}
.f-fold > summary::-webkit-details-marker { display: none; }
.f-fold > summary .f-fold__meta { margin-left: auto; font-size: var(--f-fs-caption); font-weight: 400; color: var(--f-text-2); font-variant-numeric: tabular-nums; }
.f-fold > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 6px 4px 4px;
  border-right: 2px solid var(--f-text-3);
  border-bottom: 2px solid var(--f-text-3);
  transform: rotate(45deg);
  transition: transform var(--f-dur-2) var(--f-ease-out);
}
.f-fold[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
.f-fold__body { padding: 0 var(--f-s4) var(--f-s4); }
.f-fold--plain { background: transparent; }
.f-fold--plain > summary { padding-left: 0; }
.f-fold--plain .f-fold__body { padding-inline: 0; }

/* ====================================================================== bottom sheet */
/* Same engine as today (#sheet + .is-open), new skin. Sticky footer bar for the main action.
   <div class="f-scrim is-open"></div>
   <div class="f-sheet is-open" role="dialog" aria-modal="true" aria-labelledby="…">
     <div class="f-sheet__handle"><span></span></div>
     <div class="f-sheet__scroll"> … </div>
     <div class="f-sheet__footer"> <button class="f-btn f-btn--primary f-btn--lg f-btn--block">Hotovo</button> </div>
   </div> */
.f-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--f-z-scrim);
  background: var(--f-scrim);
  opacity: 0;
  transition: opacity var(--f-dur-3) var(--f-ease-out);
}
.f-scrim.is-open { opacity: 1; }
.f-sheet {
  position: fixed;
  left: var(--f-sheet-gap);
  right: var(--f-sheet-gap);
  bottom: max(var(--f-sheet-gap), env(safe-area-inset-bottom, 0px));
  z-index: var(--f-z-sheet);
  max-width: 640px;
  margin: 0 auto;
  max-height: calc(100% - env(safe-area-inset-top, 0px) - 2 * var(--f-sheet-gap));
  display: flex;
  flex-direction: column;
  background: var(--f-bg);
  border-radius: var(--f-r-xl);
  transform: translateY(calc(100% + 2 * var(--f-sheet-gap) + env(safe-area-inset-bottom, 0px)));
  transition: transform var(--f-dur-3) var(--f-ease-sheet);
}
.f-sheet.is-open { transform: translateY(0); }
.f-sheet.is-dragging { transition: none; }
.f-sheet__handle { flex: none; height: 24px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.f-sheet__handle span { width: 40px; height: 5px; border-radius: 3px; background: var(--f-surface-3); }
.f-sheet__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 max(var(--f-gutter), env(safe-area-inset-right, 0px)) var(--f-s5) max(var(--f-gutter), env(safe-area-inset-left, 0px));
  display: grid;
  align-content: start;
  gap: var(--f-s4);
}
.f-sheet__top { display: flex; align-items: center; gap: var(--f-s3); }
.f-sheet__top h2 { font-family: var(--f-font-display); font-size: var(--f-fs-title); font-weight: 600; letter-spacing: var(--f-track-display); line-height: var(--f-lh-head); min-width: 0; }
.f-sheet__top .f-icon-btn:last-child { margin-left: auto; }
.f-sheet__hero { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--f-r-md); object-fit: cover; background: var(--f-surface-2); }
.f-sheet__footer {
  flex: none;
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--f-s3);
  padding: var(--f-s3) var(--f-gutter);
  background: var(--f-bg);
}
.f-sheet__footer .f-btn--primary { flex: 1; }

/* ====================================================================== segmented control */
/* <div class="f-seg" role="tablist" style="--f-seg-n:3;--f-seg-i:0"> <button role="tab" aria-selected="true">…</button> … </div>
   The moving thumb is driven by --f-seg-i (index), so switching only animates transform. */
.f-seg {
  --f-seg-n: 2;
  --f-seg-i: 0;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 3px;
  border-radius: var(--f-r-pill);
  background: var(--f-surface-2);
  isolation: isolate;
}
.f-seg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--f-seg-n));
  border-radius: var(--f-r-pill);
  background: var(--f-surface-3);
  transform: translateX(calc(var(--f-seg-i) * 100%));
  transition: transform var(--f-dur-2) var(--f-ease-out);
}
.f-seg > button { min-height: 38px; border-radius: var(--f-r-pill); font-size: var(--f-fs-sub); font-weight: 500; color: var(--f-text-2); position: relative; }
.f-seg > button::after { content: ""; position: absolute; inset: -3px 0; } /* 44 px hit area */
.f-seg > button[aria-selected="true"] { color: var(--f-text); }

/* ====================================================================== chip */
/* Filters and toggles only (not decoration). aria-pressed="true" = selected. */
.f-chips { display: flex; flex-wrap: wrap; gap: var(--f-s2); }
.f-chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--f-r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--f-surface-2);
  color: var(--f-text-2);
  font-size: var(--f-fs-caption);
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}
.f-chip::after { content: ""; position: absolute; inset: -4px 0; }
.f-chip svg { width: 14px; height: 14px; }
.f-chip[aria-pressed="true"] { background: var(--f-text); color: var(--f-bg); }

/* ====================================================================== FAB + action menu */
.f-fab {
  position: fixed;
  z-index: var(--f-z-fab);
  right: max(var(--f-gutter), env(safe-area-inset-right, 0px));
  bottom: calc(var(--f-dock-h) + var(--f-dock-bottom) + 24px);
  min-height: 56px;
  padding: 0 22px 0 18px;
  border-radius: var(--f-r-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--f-s2);
  background: var(--f-accent);
  color: var(--f-on-accent);
  font-size: var(--f-fs-body);
  font-weight: 500;
  transition: transform var(--f-dur-1) var(--f-ease-out);
}
.f-fab:active { transform: scale(0.96); background: var(--f-accent-pressed); }
.f-fab svg { width: 22px; height: 22px; }
.f-fab--round { width: 56px; padding: 0; justify-content: center; }

/* menu: a floating list of icon rows. Anchored near the FAB, or near a long-pressed row. */
.f-menu {
  position: fixed;
  z-index: var(--f-z-menu);
  min-width: 232px;
  padding: 6px;
  border-radius: var(--f-r-lg);
  background: var(--f-bar);
  box-shadow: var(--f-shadow-2);
  transform-origin: var(--f-menu-origin, bottom right);
  animation: f-menu-in var(--f-dur-2) var(--f-ease-out);
}
@keyframes f-menu-in { from { opacity: 0; transform: scale(0.92); } }
.f-menu__item {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--f-s4) 0 var(--f-s3);
  border-radius: var(--f-r-md);
  display: flex;
  align-items: center;
  gap: var(--f-s3);
  font-size: var(--f-fs-body);
  font-weight: 500;
  text-align: left;
  color: var(--f-text);
}
.f-menu__item:active, .f-menu__item:hover { background: var(--f-neutral-soft); }
.f-menu__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--f-quiet); color: var(--f-text); flex: none; }
.f-menu__icon svg { width: 18px; height: 18px; }
.f-menu__item--danger { color: var(--f-worse); }
.f-menu__item--danger .f-menu__icon { background: var(--f-worse-soft); color: var(--f-worse); }
.f-menu__sep { height: 1px; margin: 4px var(--f-s3); background: var(--f-sep); }

/* ====================================================================== bottom bar */
/* One connected rounded bar; the current tab has a soft bulge (gooey: the #f-goo SVG filter blurs the bar and the
   bump together and thresholds them into one flat shape). The bulge slides when the tab changes; icons never move up,
   the current one only grows. Lays out 3, 4 or 5 tabs: ui.js renderNav sets --n (tabs shown) and --i (current).
   <nav class="f-nav" id="tabbar" style="--n:3;--i:0"> <svg><filter id="f-goo"/></svg>
     <div class="f-nav__goo"><i class="f-nav__bar"></i><i class="f-nav__bump"></i></div>
     <button class="f-nav__tab" data-view="…" aria-current="page"><svg/><span>Label</span></button> … </nav> */
.f-nav {
  --n: 3;
  --i: 0;
  position: fixed;
  z-index: var(--f-z-dock);
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: var(--f-dock-bottom);
  height: var(--f-dock-h);
  max-width: calc(370px + (var(--n) - 3) * 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
.f-nav__defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.f-nav__goo { position: absolute; inset: -24px 0 0 0; filter: url(#f-goo); pointer-events: none; container-type: inline-size; }
.f-nav__bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--f-dock-h); border-radius: var(--f-r-dock); background: var(--f-bar); }
.f-nav__bump {
  /* 60 px, narrower when 5 tabs share a small phone (so the bulge never runs into the bar's end); it always rises
     8 px above the bar */
  --bw: min(60px, 100cqw / var(--n) - 12px);
  position: absolute;
  bottom: calc(var(--f-dock-h) + 8px - var(--bw));
  left: calc(100cqw / var(--n) * var(--i) + 100cqw / (2 * var(--n)) - var(--bw) / 2);
  width: var(--bw);
  height: var(--bw);
  border-radius: 50%;
  background: var(--f-bar);
  transition: left 0.5s var(--f-ease-glide);
}
.f-nav__tab {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  font-size: var(--f-fs-dock);
  font-weight: 500;
  line-height: 1.1;
  color: var(--f-text-3);
  transition: color 0.3s var(--f-ease);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.f-nav__tab[hidden] { display: none; }
.f-nav__tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-nav__tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: scale 0.4s var(--f-ease); }
.f-nav__tab[aria-current="page"] { color: var(--f-text); }
.f-nav__tab[aria-current="page"] svg { scale: 1.22; }
.f-nav__tab:focus-visible { box-shadow: none; outline: 2px solid var(--f-accent); outline-offset: -4px; border-radius: 16px; }
/* the page fades out under the bar instead of running into it */
.f-nav-fade { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--f-dock-h) + var(--f-dock-bottom) + 46px); background: linear-gradient(to top, var(--f-bg) 34%, transparent); pointer-events: none; z-index: calc(var(--f-z-dock) - 1); }

/* ====================================================================== full-screen timer */
/* <div class="f-timer" role="dialog" aria-label="Časovač"> close, ring with time, label, round, actions </div>
   The ring uses a 200-unit viewBox (r = 90): dasharray 565.5. */
.f-timer {
  position: fixed;
  inset: 0;
  z-index: var(--f-z-timer);
  background: var(--f-bg);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--f-s3) + env(safe-area-inset-top, 0px)) var(--f-gutter) calc(var(--f-s5) + env(safe-area-inset-bottom, 0px));
}
.f-timer__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--f-tap); }
.f-timer__round { font-size: var(--f-fs-sub); font-weight: 600; color: var(--f-text-2); font-variant-numeric: tabular-nums; }
.f-timer__center { display: grid; place-items: center; align-content: center; gap: var(--f-s5); }
.f-timer__ring { --f-ring-size: min(78vw, 320px); --f-ring-stroke: 7; }
.f-timer__ring .f-ring__label b { font-size: calc(var(--f-ring-size) * 0.26); font-weight: 700; letter-spacing: 0; }
.f-timer__ring .f-ring__label span { font-size: var(--f-fs-body); color: var(--f-text-2); }
.f-timer__label { font-size: var(--f-fs-title); font-weight: 700; text-align: center; }
.f-timer__next { font-size: var(--f-fs-sub); color: var(--f-text-2); text-align: center; margin-top: calc(var(--f-s4) * -1); }
.f-timer__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f-s3); }
.f-timer.is-paused .f-ring .value { opacity: 0.45; }
.f-timer .f-ring .value { transition: stroke-dashoffset 1s linear; }

/* ====================================================================== set stepper */
/* One row per value (kg, opak.): big − value +, ghost "minule" under the value. */
.f-set { display: grid; gap: var(--f-s3); padding: var(--f-s4); border-radius: var(--f-r-lg); background: var(--f-surface-1); }
.f-set__head { display: flex; align-items: center; gap: var(--f-s2); font-size: var(--f-fs-sub); font-weight: 500; }
.f-set__head .f-delta { margin-left: auto; }
.f-set__ghost { font-size: var(--f-fs-caption); color: var(--f-text-3); font-variant-numeric: tabular-nums; }
.f-set--done { background: transparent; }
.f-set--done .f-set__head { color: var(--f-text-2); }
.f-stepper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: var(--f-s2); }
.f-stepper__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  box-shadow: inset 0 0 0 1px var(--f-outline);
  color: var(--f-text);
  transition: transform var(--f-dur-1) var(--f-ease-out);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.f-stepper__btn:active { transform: scale(0.92); }
.f-stepper__btn svg { width: 20px; height: 20px; }
.f-stepper__value { text-align: center; display: grid; line-height: 1.05; }
.f-stepper__value output, .f-stepper__value input {
  font-family: var(--f-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: var(--f-track-display);
  color: var(--f-text);
  background: none;
  border: 0;
  text-align: center;
  width: 100%;
  padding: 0;
}
.f-stepper__value span { font-size: var(--f-fs-caption); color: var(--f-text-2); }
.f-stepper__value small { font-size: var(--f-fs-caption); color: var(--f-text-3); font-variant-numeric: tabular-nums; }
.f-set__done-row { display: flex; align-items: center; gap: var(--f-s3); }

/* ====================================================================== toast */
.f-toast {
  position: fixed;
  z-index: var(--f-z-toast);
  left: var(--f-gutter);
  right: var(--f-gutter);
  bottom: calc(var(--f-dock-h) + var(--f-dock-bottom) + 16px);
  max-width: 480px;
  margin: 0 auto;
  min-height: 52px;
  padding: 6px 6px 6px var(--f-s4);
  display: flex;
  align-items: center;
  gap: var(--f-s3);
  border-radius: var(--f-r-pill);
  background: var(--f-bar);
  color: var(--f-text);
  font-size: var(--f-fs-sub);
  font-weight: 500;
  box-shadow: var(--f-shadow-2);
  animation: f-toast-in var(--f-dur-3) var(--f-ease-out);
}
.f-toast__text { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
.f-toast__undo { min-height: 40px; padding: 0 16px; border-radius: var(--f-r-pill); background: var(--f-quiet); color: var(--f-text); font-weight: 500; position: relative; }
.f-toast__undo::after { content: ""; position: absolute; inset: -2px 0; }
@keyframes f-toast-in { from { opacity: 0; transform: translateY(16px); } }

/* ====================================================================== empty state */
.f-empty { display: grid; justify-items: center; gap: var(--f-s3); padding: var(--f-s4); text-align: center; }
.f-empty__art { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--f-surface-1); color: var(--f-text-3); }
.f-empty__art svg { width: 44px; height: 44px; }
.f-empty__title { font-size: var(--f-fs-body); font-weight: 500; }
.f-empty__text { font-size: var(--f-fs-sub); color: var(--f-text-2); max-width: 28ch; }

/* ====================================================================== misc pieces used by screens */
.f-kv { display: flex; align-items: baseline; gap: 6px; }
.f-kv b { font-family: var(--f-font-num); font-variant-numeric: tabular-nums; letter-spacing: var(--f-track-display); font-size: var(--f-fs-display); font-weight: 500; line-height: 1; }
.f-kv span { font-size: var(--f-fs-caption); color: var(--f-text-2); }
.f-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--f-s3); min-height: 44px; }
.f-duel + .f-duel { border-top: 1px solid var(--f-sep); }
.f-duel__label { font-size: var(--f-fs-sub); color: var(--f-text-2); }
.f-duel__value { font-family: var(--f-font-num); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ====================================================================== flat skin (every tab and the sheet) */
/* v4: one flat page grey, flat cards (#212121), no glass, no edges, no glow. The page has no gradient layer.
   A card inside a card is not a second card: it drops its fill (the owner calls layered paper "slop"). */
html { background: var(--f-bg); }
body.f-app { background: var(--f-bg); }

:is(.view, .sheet) :is(.f-card, .f-fold, .fd-meters, .fd-split, .fd-amount, .fd-routine) { position: relative; background: var(--f-surface-1); border-radius: var(--f-r-lg); box-shadow: none; }
:is(.view, .sheet) :is(.fd-split, .fd-amount, .fd-routine) { border-radius: var(--f-r-md); }
:is(.view, .sheet) :is(.f-card, .f-fold) :is(.f-card, .f-fold, .fd-meters, .fd-split) { background: transparent; border-radius: var(--f-r-md); box-shadow: none; }
/* inside a card, raised pieces (chips, steppers, small buttons) use the quiet fill, not a darker grey */
:is(.f-card, .f-fold) { --f-surface-2: var(--f-quiet); --f-surface-3: var(--f-quiet-pressed); }

/* ====================================================================== motion: entrances and exits */
/* A view's blocks arrive top to bottom and size up (main.js enterView sets --f-i). `backwards` only: once done,
   no transform is left on the block. The coral header drops in from the top edge instead of scaling. */
.f-enter { animation: f-enter var(--f-dur-3) var(--f-ease-out) backwards; animation-delay: calc(var(--f-i, 0) * var(--f-stagger)); transform-origin: 50% 0; }
.f-head.f-enter { animation-name: f-enter-head; }
@keyframes f-enter { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@keyframes f-enter-head { from { opacity: 0; transform: translateY(-12px); } }

/* Layers leaving (ui.js leave()): ease-in, shorter than the way in, no taps while going. */
.is-leaving { pointer-events: none; animation: f-fade-out var(--f-dur-exit) var(--f-ease-in) forwards !important; }
.f-menu.is-leaving, .is-leaving .f-menu { animation: f-menu-out var(--f-dur-exit) var(--f-ease-in) forwards !important; }
.f-toast.is-leaving { animation-name: f-toast-out !important; }
@keyframes f-fade-out { to { opacity: 0; } }
@keyframes f-menu-out { to { opacity: 0; transform: scale(0.95); } }
@keyframes f-toast-out { to { opacity: 0; transform: translateY(12px); } }

/* A hint opened by its (i) fades in under it. */
.sh-note:not([hidden]) { animation: f-reveal var(--f-dur-2) var(--f-ease-out); }
@keyframes f-reveal { from { opacity: 0; transform: translateY(-4px); } }

/* ====================================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  .f-app *, .f-app *::before, .f-app *::after,
  .f-sheet, .f-scrim, .f-menu, .f-toast, .f-ring .value, .f-seg::before, .f-nav__bump, .f-nav__tab, .f-nav__tab svg {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    transition-property: opacity, color, background-color !important;
  }
  .f-btn:active, .f-icon-btn:active, .f-fab:active, .f-card--tap:active, .f-stepper__btn:active { transform: none; }
  .f-nav__bump { transition: none !important; }
  .f-nav__tab svg { transition: none !important; }
}

/* A control with its (i) on the same line; the hint below stays hidden until the (i) is tapped. */
.dx-info-row { display: flex; align-items: center; gap: var(--f-s2); }
.dx-info-row > :first-child { flex: 1; min-width: 0; }