/* Nutrition with Grace, the app (grace/SPEC.md section 9). Every class starts with "gr-", every token "--gr-",
   everything is scoped to .gr-root. The host declares the fonts (Literata roman + italic, Inter, Archivo) and sets
   --gr-w / --gr-h on the mount; app.js writes the geometry table (--gr-tdCard, --gr-gpPill, …) next to them, so the
   rects the API returns and the boxes drawn here are the same numbers. Light only: her kitchen, a cookbook.
   Motion: transform, opacity, clip-path and stroke-dashoffset only. */

.gr-root {
  --gr-ground: #F6F0E6; --gr-s1: #FFFDF8; --gr-s2: #EDE4D3; --gr-s3: #DCCFB8;
  --gr-hair: rgba(29, 25, 21, .10); --gr-hair2: rgba(29, 25, 21, .16);
  --gr-text: #1D1915; --gr-muted: #6A6157; --gr-faint: #A69B8C;
  --gr-tomato: #D4472A; --gr-tomato-ink: #A9361F; --gr-tomato-press: #BC3B22;
  --gr-pea: #5B8A2E; --gr-pea-ink: #3F6620; --gr-butter: #E7A93A; --gr-meat: #8A5A3B;
  --gr-card-sh: 0 1px 1px rgba(70, 45, 25, .05), 0 12px 28px -18px rgba(70, 45, 25, .34);
  --gr-lift-sh: 0 18px 40px -18px rgba(70, 45, 25, .28);
  --gr-ios: cubic-bezier(.32, .72, 0, 1); --gr-out: cubic-bezier(.22, 1, .36, 1); --gr-drop: cubic-bezier(.2, 1.4, .4, 1);
  --gr-serif: "Literata", Georgia, "Times New Roman", serif;
  --gr-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gr-label: "Archivo", "Inter", -apple-system, "Segoe UI", sans-serif;
  --gr-hl: 1px;
  position: relative; display: block; overflow: hidden; overflow: clip;
  width: var(--gr-w, 393px); height: var(--gr-h, 852px);
  background: var(--gr-ground); color: var(--gr-text);
  font: 400 17px/1.3 var(--gr-sans); letter-spacing: 0; text-align: left;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-kerning: normal;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  touch-action: pan-y; isolation: isolate; contain: layout paint style;
}
@media (min-resolution: 2dppx) { .gr-root { --gr-hl: .5px; } }
.gr-root :where(*), .gr-root :where(*)::before, .gr-root :where(*)::after { box-sizing: border-box; touch-action: pan-y; }
.gr-root :where(button) { -webkit-appearance: none; appearance: none; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.gr-root :where(h2, h3, h4, p, ul, ol, li, figure, blockquote) { margin: 0; padding: 0; font: inherit; list-style: none; }
.gr-root :where(img, video, svg) { display: block; max-width: none; }
.gr-root :where(img) { -webkit-user-drag: none; }
.gr-root :where(b, strong) { font-weight: inherit; }
.gr-root :where(i, em) { font-style: normal; }
.gr-root :where(small) { font-size: inherit; }
.gr-story { pointer-events: none; }
.gr-desk.gr-live :where(button, [role="button"]) { cursor: pointer; }
.gr-root :focus { outline: none; }
.gr-root :focus-visible { outline: 2px solid var(--gr-tomato-ink); outline-offset: 3px; border-radius: 12px; }
.gr-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ shared type and parts */
.gr-lt { font: 600 28px/34px var(--gr-serif); letter-spacing: -.012em; color: var(--gr-text); }
.gr-st { font: 600 22px/28px var(--gr-serif); letter-spacing: -.008em; color: var(--gr-text); }
.gr-ov { display: block; font: 600 11px/14px var(--gr-label); letter-spacing: .1em; text-transform: uppercase; color: var(--gr-muted); }
.gr-her { font: italic 400 16px/1.38 var(--gr-serif); color: var(--gr-text); }
.gr-card { position: relative; background: var(--gr-s1); border-radius: 20px; box-shadow: var(--gr-card-sh); }
.gr-draft { display: inline-flex; align-items: center; height: 18px; padding: 1px 6px 0; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--gr-faint); font: 600 10px/1 var(--gr-label); letter-spacing: .1em; color: var(--gr-muted); vertical-align: middle; white-space: nowrap; flex: none; }
.gr-src { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/14px var(--gr-label); letter-spacing: .02em; color: var(--gr-muted); white-space: nowrap; }
.gr-src__ic { width: 12px; height: 12px; flex: none; }
.gr-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--gr-s2); font: 600 13px/1 var(--gr-sans); color: var(--gr-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-av { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: var(--gr-s3); }
.gr-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29, 25, 21, .08); }
.gr-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gr-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.gr-dot.gr-c-p { background: var(--gr-tomato); } .gr-dot.gr-c-fi { background: var(--gr-pea); } .gr-dot.gr-c-fa { background: var(--gr-butter); } .gr-dot.gr-c-c { background: var(--gr-muted); }
.gr-ic-check { width: 14px; height: 14px; }
.gr-mb { display: block; }
.gr-nw { white-space: nowrap; }
.gr-potato { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-left: 2px; }

/* pills: tomato is the primary action; ink and soft are secondary */
.gr-pill { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 26px; background: var(--gr-tomato); color: #FFFDF8; font: 600 17px/1 var(--gr-sans); letter-spacing: -.005em; box-shadow: 0 10px 22px -14px rgba(169, 54, 31, .7); transition: transform .16s var(--gr-out), background-color .16s linear; }
.gr-pill svg { width: 18px; height: 18px; flex: none; }
.gr-pill.is-press { transform: scale(.97); background: var(--gr-tomato-press); }
.gr-live .gr-pill:active { transform: scale(.97); background: var(--gr-tomato-press); }
.gr-pill.is-off { background: var(--gr-s3); color: var(--gr-muted); box-shadow: none; }
/* pill glyphs: the closed pills ("Day closed") trade theirs for a check */
.gr-pill__i { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.gr-pill__i--ok { display: none; }
.gr-pill.is-closed .gr-pill__i--ok { display: inline-flex; }
.gr-pill.is-closed .gr-pill__i:not(.gr-pill__i--ok) { display: none; }
.gr-pill.is-closed { background: var(--gr-text); color: #FFFDF8; box-shadow: none; }
.gr-live .gr-pill.is-closed { pointer-events: none; }
/* story: Calculate warms from paper to tomato with the scroll (--gr-off 1 to 0, written by applyNumbers) */
.gr-story .gr-pill.gr-nu__calc:not(.is-press) { background: color-mix(in srgb, var(--gr-s3) calc(var(--gr-off, 0) * 100%), var(--gr-tomato)); color: color-mix(in srgb, var(--gr-muted) calc(var(--gr-off, 0) * 100%), #FFFDF8); box-shadow: 0 10px 22px -14px rgba(169, 54, 31, calc(.7 * (1 - var(--gr-off, 0)))); }
.gr-pill--ink { background: var(--gr-text); color: #FFFDF8; box-shadow: 0 10px 22px -14px rgba(29, 25, 21, .7); }
.gr-pill--ink.is-press, .gr-live .gr-pill--ink:active { background: #3A332C; }
.gr-pill--soft { background: var(--gr-s2); color: var(--gr-text); box-shadow: none; }
.gr-pill--soft.is-press, .gr-live .gr-pill--soft:active { background: var(--gr-s3); }
.gr-story .gr-pill, .gr-story .gr-send { transition: none; }

/* the three rings (protein outside, fiber, fat): tracks at 14% of their colour, round caps, from 12 o'clock */
.gr-rg { position: absolute; }
.gr-rg__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gr-rg__tr { fill: none; stroke-opacity: .14; }
.gr-rg__a { fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.gr-rg__tr.gr-c-p, .gr-rg__a.gr-c-p { stroke: var(--gr-tomato); }
.gr-rg__tr.gr-c-fi, .gr-rg__a.gr-c-fi { stroke: var(--gr-pea); }
.gr-rg__tr.gr-c-fa, .gr-rg__a.gr-c-fa { stroke: var(--gr-butter); }
.gr-rg__fl { fill: #FFFDF8; opacity: 0; }
/* arcs that draw past full (the closed overlay): 1.1 turns long, 1 unit = 1 turn */
.gr-rg__a--over { stroke-dasharray: 1.1 1.1; stroke-dashoffset: 1.1; }
/* end caps (A2.4): a disc at the arc's leading end that lies on the arc's start when the ring closes, casting a soft
   filled contact shadow ahead of it (a gradient, no stroke, no outline; app.js shows it only while the ends meet);
   turned with the arc's end about the rings' centre; hidden on an empty arc */
.gr-rg__cap { transform-box: view-box; transform-origin: 50% 50%; opacity: 0; }
.gr-rg__cs { opacity: 0; }
.gr-rg__cap.gr-c-p .gr-rg__cb { fill: var(--gr-tomato); }
.gr-rg__cap.gr-c-fi .gr-rg__cb { fill: var(--gr-pea); }
.gr-rg__cap.gr-c-fa .gr-rg__cb { fill: var(--gr-butter); }
/* the lap (A2.4): an 18 degree paper highlight that travels once around a closed ring */
.gr-rg__lap { fill: none; stroke: #FFFDF8; stroke-linecap: round; stroke-dasharray: .05 .95; stroke-dashoffset: 0; opacity: 0; }
.gr-icon { display: block; overflow: visible; }
.gr-icon--done .gr-rg__a { stroke-dashoffset: 0; }

/* video slots: the poster, the clip over it once it plays */
.gr-vs { position: relative; display: block; overflow: hidden; background: var(--gr-s3); }
.gr-vs__p, .gr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gr-video { opacity: 0; transition: opacity .18s linear; pointer-events: none; }
.gr-vs.is-playing .gr-video { opacity: 1; }

/* the prompt field (Prep, Ask Grace): the page's comment field, inside the app */
.gr-prompt { position: relative; display: flex; align-items: center; height: 52px; padding: 0 8px 0 18px; border-radius: 26px; background: var(--gr-s1); box-shadow: inset 0 0 0 1px var(--gr-hair), var(--gr-card-sh); }
.gr-prompt__t { position: relative; flex: 1; min-width: 0; height: 22px; font: 500 16px/22px var(--gr-sans); white-space: nowrap; overflow: hidden; }
.gr-prompt__ph { position: absolute; left: 0; top: 0; color: var(--gr-faint); }
.gr-prompt__txt { color: var(--gr-text); }
.gr-caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; border-radius: 1px; background: var(--gr-tomato); opacity: 0; }
.gr-send { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gr-s2); color: var(--gr-faint); transition: background-color .16s linear, color .16s linear, transform .16s var(--gr-out); }
.gr-send.is-on { background: var(--gr-tomato); color: #FFFDF8; }
.gr-send.is-press { transform: scale(.9); }

/* 44 pt minimum targets: the small controls extend their hit area (invisible) */
.gr-pc__swap, .gr-ib, .gr-rc__back, .gr-gc__rem, .gr-meal__add { position: relative; }
.gr-pc__swap::after, .gr-ib::after, .gr-rc__back::after, .gr-gc__rem::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }

/* the roller: odometer numerals (one line per cell; the strips are generated content, so innerText keeps the sr text) */
.gr-odo { display: inline-block; vertical-align: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: var(--odh, 1.2em); height: var(--odh, 1.2em); }
.gr-od { display: inline-block; vertical-align: top; height: var(--odh, 1.2em); overflow: hidden; }
/* the window is the figure band, not the line box: the cap line to the baseline plus 2 px of air (font metrics:
   ascent --od-a, descent --od-d, figure height --od-c, figure overshoot --od-u). A rolling digit never shows above
   the cap line or below the baseline; while it rolls (--odk 0 to 1) the band's edges soften like a drum. At rest
   (--odk 0) the edges are hard and fall in the air, so a resting digit is pixel-exact. */
.gr-od {
  --od-a: .878em; --od-d: .21em; --od-c: .703em; --od-u: .016em;
  --odT: calc((var(--odh, 1.2em) - var(--od-a) - var(--od-d)) / 2 + var(--od-a) - var(--od-c) - 2px);
  --odB: calc((var(--odh, 1.2em) - var(--od-a) - var(--od-d)) / 2 + var(--od-d) - var(--od-u) - 2px);
  --odF: calc(var(--odk, 0) * .14em);
  -webkit-mask-image: linear-gradient(180deg, transparent var(--odT), #000 calc(var(--odT) + var(--odF)), #000 calc(100% - var(--odB) - var(--odF)), transparent calc(100% - var(--odB)));
  mask-image: linear-gradient(180deg, transparent var(--odT), #000 calc(var(--odT) + var(--odF)), #000 calc(100% - var(--odB) - var(--odF)), transparent calc(100% - var(--odB)));
}
.gr-od__s { display: inline-block; vertical-align: top; line-height: var(--odh, 1.2em); will-change: transform; }
.gr-od__s::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0"; display: block; white-space: pre; }
.gr-od__c::before { content: attr(data-ch); white-space: pre; }
.gr-od.is-off, .gr-od__c.is-off { visibility: hidden; }
.gr-od.is-gone, .gr-od__c.is-gone { display: none; }
.gr-odo__sr { display: inline-block; width: 1px; height: 1px; margin-right: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; vertical-align: top; }

/* ------------------------------------------------------------------ the glass, layers, chrome */
.gr-glass { position: absolute; inset: 0; overflow: hidden; background: var(--gr-ground); }
.gr-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--gr-ground); contain: layout style size; }
.gr-layer:not(.is-on):not(.is-leaving) { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.gr-layer.is-moving { box-shadow: -14px 0 38px -10px rgba(70, 45, 25, .22); }
/* the splash departure: the recipe recedes as a card into the icon tile (radius written per frame by app.js) */
.gr-layer.gr-depart { box-shadow: 0 0 0 var(--gr-hl) rgba(29, 25, 21, .07), 0 22px 44px -20px rgba(70, 45, 25, .38); }
/* prewarm: two frames at opacity .001 behind the screen, every part visible, so text rasters and images decode */
.gr-layer.gr-warm:not(.is-on):not(.is-leaving) { opacity: .001 !important; visibility: visible; z-index: 0 !important; }
.gr-layer.gr-warm :where(*) { visibility: visible !important; }
/* the sheet stack: the screen under a sheet recedes about its top centre over a deeper ground */
.gr-l-prep, .gr-l-grace { transform-origin: 50% 0; }
.gr-bd { position: absolute; inset: 0; z-index: 0; background: #3A3129; opacity: 0; pointer-events: none; }
.gr-l-numbers, .gr-l-recipe, .gr-l-gap { z-index: 3; }
.gr-l-grocery, .gr-l-coach { z-index: 6; background: transparent; }
.gr-l-closed { z-index: 8; background: transparent; }
/* live: the closed overlay is its own layer; primed (painted, at opacity 0, never hit) while the gap waits for her taps */
.gr-live .gr-l-closed, .gr-live .gr-l-today { will-change: opacity; }
.gr-live .gr-layer.gr-prime:not(.is-on) { visibility: visible; opacity: .001 !important; }
.gr-l-splash { z-index: 9; background: transparent; }
.gr-scroll { position: absolute; inset: 0; overflow: hidden; overscroll-behavior: auto; scrollbar-width: none; }
.gr-scroll::-webkit-scrollbar { display: none; }
.gr-live .gr-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* the native scroll chrome (A2.7, live): a top material under the status bar (opaque cream: without a blur any
   translucency lets the scrolled content ghost through (measured: at alpha .984 a card title still reads); no
   backdrop-filter, a hairline at its bottom) and the inline title on the navigation line, written per scroll frame by app.js (opacity 0 at rest) */
.gr-mat { position: absolute; left: 0; right: 0; top: 0; height: 98px; z-index: 4; pointer-events: none; opacity: 0; background: rgb(246, 240, 230); }
.gr-mat__hl { position: absolute; left: 0; right: 0; bottom: 0; height: var(--gr-hl); background: var(--gr-hair2); opacity: 0; }
.gr-mat__t { position: absolute; left: 72px; right: 72px; top: 54px; height: 44px; display: flex; align-items: center; justify-content: center; font: 600 17px/1 var(--gr-sans); letter-spacing: -.012em; color: var(--gr-text); white-space: nowrap; opacity: 0; }
.gr-td__lt, .gr-rs__lt, .gr-pg__title { transform-origin: 0 100%; }

.gr-status { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; pointer-events: none; color: var(--gr-text); }
.gr-status__t { position: absolute; left: 0; width: 140px; top: 18px; text-align: center; font: 600 17px/1 var(--gr-sans); letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.gr-status__r { position: absolute; right: 26px; top: 20px; display: flex; align-items: center; gap: 6px; }
.gr-status.is-light { color: #FFFDF8; }
.gr-status.is-light .gr-status__t, .gr-status.is-light .gr-status__r { filter: drop-shadow(0 1px 2px rgba(29, 25, 21, .4)); }
.gr-homeind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(29, 25, 21, .86); z-index: 20; pointer-events: none; }
.gr-full .gr-status, .gr-full .gr-homeind { display: none; }
.gr-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; z-index: 5; display: flex; padding: 0 6px 34px; background: rgb(246, 240, 230); box-shadow: inset 0 var(--gr-hl) 0 var(--gr-hair2); }
/* no backdrop-filter anywhere (a blur under a scaled, composited phone costs every frame): the material is opaque, and
   content dissolves into it over 14 px instead of ghosting through it (no text on text) */
.gr-story .gr-tabbar, .gr-live .gr-tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(246, 240, 230); }
.gr-tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; pointer-events: none; background: linear-gradient(180deg, rgba(246, 240, 230, 0), rgb(246, 240, 230)); }
.gr-tabbar { transform-origin: 50% calc(83px - var(--gr-h, 852px)); }
.gr-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; padding-top: 7px; color: var(--gr-muted); font: 600 11px/1.2 var(--gr-sans); letter-spacing: .005em; }
.gr-tab svg { width: 26px; height: 26px; }
.gr-tab.is-on { color: var(--gr-text); }
.gr-touch { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; background: rgba(29, 25, 21, .16); box-shadow: 0 0 0 1.5px rgba(255, 253, 248, .95), 0 6px 18px rgba(70, 45, 25, .3); }
.gr-ripple { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; z-index: 21; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px rgba(29, 25, 21, .55), inset 0 0 0 1px rgba(255, 253, 248, .6); }
.gr-toast { position: absolute; left: 50%; bottom: 95px; z-index: 22; transform: translate3d(-50%, 8px, 0); opacity: 0; padding: 10px 16px; border-radius: 18px; background: var(--gr-s1); color: var(--gr-text); font: 600 14px/1.2 var(--gr-sans); white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 1px var(--gr-hair), 0 14px 30px -14px rgba(70, 45, 25, .45); transition: opacity .2s linear, transform .3s var(--gr-out); }
.gr-toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ------------------------------------------------------------------ splash */
.gr-sp { position: absolute; inset: 0; }
.gr-sp__ground { position: absolute; inset: 0; background: var(--gr-ground); }
.gr-sp__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 40px; }
/* .gr-sp__tile and .gr-sp__wm are fixed layout anchors (the host may measure them); .gr-sp__ic and .gr-sp__wf fly */
.gr-sp__tile { position: relative; width: 96px; height: 96px; }
.gr-sp__ic { position: absolute; left: 0; top: 0; width: 96px; height: 96px; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.gr-sp__sh { position: absolute; inset: 0; border-radius: 26px; box-shadow: 0 1px 1px rgba(70, 45, 25, .06), 0 15px 37px -15px rgba(70, 45, 25, .38); opacity: 0; }
.gr-sp__sq { position: absolute; inset: 0; border-radius: 26px; background: var(--gr-s1); box-shadow: inset 0 0 0 1px rgba(29, 25, 21, .07); }
.gr-sp__icon { width: 96px; height: 96px; }
.gr-sp__wm { margin-top: 26px; }
.gr-sp__wf { display: inline-block; transform-origin: 0 0; will-change: transform; }
.gr-sp .gr-wm { font-size: 34px; }
.gr-sp .gr-wm__a, .gr-sp .gr-wm__b { display: inline-block; opacity: 0; }
.gr-wm { display: inline-block; font: 600 31px/1.1 var(--gr-serif); letter-spacing: -.008em; font-optical-sizing: none; font-variation-settings: "opsz" 20; color: var(--gr-text); white-space: nowrap; }
.gr-wm__b { font-style: italic; font-weight: 500; }
.gr-wm--sm { font-size: 17px; }
.gr-sp__lock { margin-top: 18px; font: 600 13px/1 var(--gr-label); letter-spacing: .12em; color: var(--gr-muted); white-space: nowrap; opacity: 0; }

/* ------------------------------------------------------------------ numbers */
.gr-nu { position: absolute; inset: 0; }
/* everything under the brand row: it rises in only once the splash flyers have landed in the brand row */
.gr-nu__body { position: absolute; inset: 0; }
.gr-nu__brand { position: absolute; left: 16px; top: var(--gr-nuBrand); height: 26px; display: flex; align-items: center; gap: 9px; }
.gr-nu__icon { width: 26px; height: 26px; padding: 0; border-radius: 7px; background: var(--gr-s1); box-shadow: 0 0 0 .5px rgba(29, 25, 21, .1), 0 4px 10px -4px rgba(70, 45, 25, .35); }
.gr-nu__title { position: absolute; left: 16px; top: var(--gr-nuTitle); }
.gr-nu__rows { position: absolute; left: 16px; right: 16px; top: var(--gr-nuRows); padding: 0 16px; }
.gr-nu__row { height: var(--gr-nuRowH); display: flex; align-items: center; justify-content: space-between; box-shadow: inset 0 calc(-1 * var(--gr-hl)) 0 var(--gr-hair); }
.gr-nu__row:last-child { box-shadow: none; }
.gr-nu__k { font: 400 16px/1 var(--gr-sans); color: var(--gr-muted); }
.gr-nu__v { font: 600 17px/1 var(--gr-sans); color: var(--gr-text); font-variant-numeric: tabular-nums; opacity: 0; }
.gr-nu__calc { position: absolute; left: 16px; right: 16px; top: var(--gr-nuCalc); }
.gr-nu__rec { position: absolute; left: 32px; right: 32px; height: 30px; display: flex; align-items: center; gap: 10px; font: 500 15px/1 var(--gr-sans); color: var(--gr-muted); opacity: 0; }
.gr-nu__rec1 { top: var(--gr-nuCalc); } .gr-nu__rec2 { top: calc(var(--gr-nuCalc) + 30px); }
.gr-nu__rec i { flex: 1; height: 0; border-bottom: 1.5px dotted var(--gr-faint); transform: translateY(4px); transform-origin: 0 50%; }
.gr-nu__rec b { font: 700 15px/1 var(--gr-label); color: var(--gr-text); font-variant-numeric: tabular-nums; }
.gr-nu__bud { position: absolute; left: 16px; right: 16px; top: var(--gr-nuBud); display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 10px; opacity: 0; }
.gr-nu__bk { grid-column: 1 / 3; font: 600 15px/18px var(--gr-sans); color: var(--gr-muted); margin-bottom: 2px; }
.gr-nu__n { font: 800 56px/58px var(--gr-label); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gr-text); --odh: 58px; }
.gr-nu__plat { position: absolute; left: -2px; top: 82px; width: 236px; height: 2px; border-radius: 1px; background: var(--gr-text); }
.gr-nu__plat i { position: absolute; top: 2px; width: 6px; height: 3px; border-radius: 0 0 1.5px 1.5px; background: var(--gr-text); }
.gr-nu__plat i:first-child { left: 8%; } .gr-nu__plat i:last-child { left: 92%; margin-left: -6px; }
.gr-nu__u { font: 500 15px/1 var(--gr-sans); color: var(--gr-muted); padding-bottom: 11px; }
.gr-nu__chips { position: absolute; left: 16px; right: 16px; top: var(--gr-nuChips); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gr-nu__chip { position: relative; height: var(--gr-nuChipH); padding: 10px 12px 0 13px; border-radius: 16px; background: var(--gr-s1); box-shadow: var(--gr-card-sh); opacity: 0; }
.gr-nu__ck { display: flex; align-items: center; gap: 6px; font: 600 12px/14px var(--gr-sans); color: var(--gr-muted); }
.gr-nu__cv { display: inline-block; margin-top: 5px; font: 800 22px/24px var(--gr-label); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gr-nu__cs { margin-left: 6px; font: 500 12px/1 var(--gr-sans); color: var(--gr-muted); }
.gr-nu__plan { position: absolute; left: 16px; right: 16px; top: var(--gr-nuPlan); display: flex; align-items: center; justify-content: space-between; gap: 10px; opacity: 0; }
.gr-nu__m { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.gr-nu__chip100 { gap: 6px; padding: 0 12px 0 7px; background: var(--gr-s1); box-shadow: inset 0 0 0 1px var(--gr-hair2); font-weight: 700; }
.gr-nu__chip100 .gr-icon { width: 16px; height: 16px; }
.gr-nu__m .gr-src { padding-left: 2px; }
.gr-nu__pl { display: inline-flex; align-items: baseline; gap: 4px; padding-top: 2px; font: 500 15px/1 var(--gr-sans); color: var(--gr-muted); white-space: nowrap; }
.gr-nu__pl b { font: 700 15px/1 var(--gr-label); color: var(--gr-text); font-variant-numeric: tabular-nums; }
.gr-nu__cta { position: absolute; left: 16px; right: 16px; top: var(--gr-nuCta); opacity: 0; }
.gr-short .gr-nu__chip { padding-top: 8px; }
.gr-short .gr-nu__cv { margin-top: 3px; font-size: 20px; }

/* ------------------------------------------------------------------ today */
.gr-td__in { position: relative; height: calc(var(--gr-tdMeals) + var(--gr-tdMealsH) + 6px + 3 * var(--gr-tdRowH) + 12px + 66px + 24px + 83px); }
.gr-td__date { position: absolute; left: 16px; top: 58px; }
.gr-td__top { position: absolute; left: 16px; right: 16px; top: 72px; height: 34px; display: flex; align-items: center; justify-content: space-between; }
.gr-streak { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 7px; border-radius: 15px; background: var(--gr-s1); box-shadow: var(--gr-card-sh); font: 500 13px/1 var(--gr-sans); color: var(--gr-muted); white-space: nowrap; }
.gr-streak b { font: 800 14px/1 var(--gr-label); color: var(--gr-text); font-variant-numeric: tabular-nums; }
.gr-td__her { position: absolute; left: 16px; right: 16px; top: 110px; font-size: 16px; line-height: 20px; }
.gr-td__src { position: absolute; left: 16px; top: 132px; }
.gr-td__rc { position: absolute; left: 16px; right: 16px; top: var(--gr-tdCard); height: var(--gr-tdCardH); }
.gr-td__rg { left: calc(50% - var(--gr-tdD) / 2); top: calc(var(--gr-tdRingT) - var(--gr-tdCard)); width: var(--gr-tdD); height: var(--gr-tdD); }
.gr-rg__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 2px; }
.gr-rg__n { font: 800 34px/36px var(--gr-label); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gr-text); --odh: 36px; }
.gr-rg__u { margin-top: 2px; font: 600 13px/16px var(--gr-sans); color: var(--gr-muted); }
.gr-short .gr-rg__n { font-size: 30px; line-height: 32px; --odh: 32px; }
.gr-td__legs { position: absolute; left: 8px; right: 8px; top: calc(var(--gr-tdLeg) - var(--gr-tdCard)); height: 44px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.gr-leg { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gr-leg + .gr-leg { box-shadow: inset var(--gr-hl) 0 0 var(--gr-hair); }
.gr-leg__k { display: flex; align-items: center; gap: 6px; font: 600 12px/14px var(--gr-sans); color: var(--gr-muted); }
.gr-leg__v { font: 700 17px/20px var(--gr-label); font-variant-numeric: tabular-nums; color: var(--gr-text); white-space: nowrap; }
.gr-leg__v small { font-weight: 600; font-size: 13px; color: var(--gr-muted); }
.gr-td__rh { position: absolute; left: 16px; right: 12px; top: 13px; height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gr-td__rl { display: flex; flex-direction: column; gap: 3px; }
.gr-td__rl b { font: 700 13px/14px var(--gr-sans); letter-spacing: -.005em; }
.gr-td__rl .gr-src { font-size: 10.5px; line-height: 12px; }
.gr-done-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 13px; background: var(--gr-text); color: #FFFDF8; font: 600 12px/1 var(--gr-sans); opacity: 0; transform-origin: 50% 50%; white-space: nowrap; }
.gr-done-chip__ck { position: relative; display: inline-flex; width: 12px; height: 12px; }
.gr-done-chip .gr-ic-check { width: 12px; height: 12px; }
/* the stamp's one paper frame on the check (A2.5) */
.gr-done-chip__fl { position: absolute; left: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: #FFFDF8; opacity: 0; }
/* the streak's mini rings (A2.5): their protein arc closes with the day while they spin once */
.gr-streak__ic { width: 18px; height: 18px; flex: none; transform-origin: 50% 50%; }
.gr-streak__ic .gr-rg__a { stroke-dashoffset: 0; }
.gr-td__carbs { position: absolute; left: 16px; right: 16px; top: var(--gr-tdCarb); height: var(--gr-tdCarbH); padding: 14px 16px 0; }
.gr-td__ch { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gr-td__ct { font: 600 17px/22px var(--gr-serif); letter-spacing: -.005em; }
.gr-td__cs { margin-top: 1px; font: italic 400 14px/18px var(--gr-serif); color: var(--gr-muted); }
.gr-cb { position: relative; margin-top: 11px; height: 10px; border-radius: 5px; overflow: hidden; background: repeating-linear-gradient(135deg, var(--gr-s2) 0 5px, #F3ECDF 5px 9px); }
.gr-cb i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0); }
.gr-cb__fuel { background: var(--gr-muted); }
.gr-cb__fib { background: var(--gr-pea); }
.gr-td__cl { display: flex; align-items: center; gap: 14px; margin-top: 9px; font: 500 13px/16px var(--gr-sans); color: var(--gr-muted); white-space: nowrap; }
.gr-td__cl b { font: 700 13px/16px var(--gr-label); color: var(--gr-text); font-variant-numeric: tabular-nums; }
.gr-td__fun { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gr-text); }
.gr-sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.gr-sw--fuel { background: var(--gr-muted); } .gr-sw--fib { background: var(--gr-pea); }
.gr-sw--fun { margin-right: 0; background: repeating-linear-gradient(135deg, var(--gr-s3) 0 2px, var(--gr-s2) 2px 4px); box-shadow: inset 0 0 0 1px var(--gr-hair2); }
.gr-short .gr-td__carbs { padding-top: 12px; } .gr-short .gr-cb { margin-top: 9px; } .gr-short .gr-td__cl { margin-top: 8px; }
.gr-td__meals { position: absolute; left: 16px; right: 16px; top: var(--gr-tdMeals); padding: 0 0 6px; }
.gr-td__mh { height: var(--gr-tdMealsH); padding: 14px 16px 0; font: 600 17px/22px var(--gr-serif); }
.gr-short .gr-td__mh { padding-top: 12px; }
.gr-meal { position: relative; display: flex; align-items: center; gap: 12px; height: var(--gr-tdRowH); padding: 0 16px; }
.gr-meal + .gr-meal::before { content: ""; position: absolute; left: 72px; right: 16px; top: 0; height: var(--gr-hl); background: var(--gr-hair); }
.gr-meal__th { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--gr-s2); }
.gr-meal__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--gr-faint); }
.gr-meal__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gr-meal__k { font: 600 10.5px/12px var(--gr-label); letter-spacing: .1em; text-transform: uppercase; color: var(--gr-muted); }
/* a meal title takes up to two lines ("Squash, potatoes, kale + 3 meatballs" is never cut, A2.8) */
.gr-meal__n { font: 600 16px/20px var(--gr-sans); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gr-meal.is-empty .gr-meal__n { font-weight: 500; color: var(--gr-muted); }
.gr-meal__cal { flex: none; font: 600 14px/1 var(--gr-label); color: var(--gr-muted); font-variant-numeric: tabular-nums; }
.gr-meal__ck { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gr-text); color: #FFFDF8; }
.gr-meal__ck .gr-ic-check { width: 12px; height: 12px; }
.gr-meal__go { flex: none; color: var(--gr-faint); }
.gr-meal__add { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px 0 9px; border-radius: 15px; background: var(--gr-s2); font: 600 14px/1 var(--gr-sans); color: var(--gr-text); }
.gr-meal__add svg { width: 14px; height: 14px; }
.gr-td__steps { position: absolute; left: 16px; right: 16px; top: calc(var(--gr-tdMeals) + var(--gr-tdMealsH) + 6px + 3 * var(--gr-tdRowH) + 12px); height: 66px; padding: 14px 16px 0; display: grid; grid-template-columns: 1fr auto; row-gap: 10px; }
.gr-td__sk { font: 600 15px/18px var(--gr-sans); }
.gr-td__sv { font: 700 15px/18px var(--gr-label); font-variant-numeric: tabular-nums; }
.gr-td__sv small { font-weight: 600; color: var(--gr-muted); }
.gr-td__sbar { grid-column: 1 / 3; position: relative; height: 6px; border-radius: 3px; overflow: hidden; background: var(--gr-s2); }
.gr-td__sbar i { position: absolute; inset: 0; background: var(--gr-text); transform-origin: 0 50%; }

/* ------------------------------------------------------------------ recipes (live) */
.gr-rs__in { position: relative; padding: 62px 16px 120px; }
.gr-rs__in .gr-lt { margin: 8px 0 12px; }
.gr-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--gr-s2); color: var(--gr-muted); font: 400 16px/1 var(--gr-sans); }
.gr-rs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 12px; margin-top: 16px; }
.gr-rcard { display: flex; flex-direction: column; align-items: center; }
.gr-rcard__th { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: var(--gr-s3); box-shadow: var(--gr-card-sh); }
.gr-tc { display: inline-block; background: #FFFFFF; color: var(--gr-text); font: 400 24px/30px var(--gr-serif); font-variation-settings: "opsz" 14; font-optical-sizing: none; font-variant-numeric: lining-nums; text-align: center; white-space: nowrap; padding: .35em .6em; }
.gr-tc--sm { margin-top: -17px; font-size: 15px; line-height: 20px; box-shadow: 0 6px 16px -10px rgba(70, 45, 25, .5); }
.gr-rcard__m { margin-top: 8px; font: 600 13px/1 var(--gr-label); color: var(--gr-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ recipe */
.gr-rc { position: absolute; inset: 0; }
.gr-rc__in { position: relative; padding-bottom: 132px; }
.gr-rc__hd { position: relative; height: var(--gr-hdr); overflow: hidden; background: var(--gr-s3); }
.gr-rc__media { position: absolute; inset: 0; }
.gr-rc__media .gr-vs, .gr-rc__still { position: absolute; inset: 0; width: 100%; height: 100%; }
.gr-rc__tc { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; top: calc(var(--gr-hdr) - 23.4px); height: 46.8px; z-index: 2; box-shadow: 0 10px 24px -14px rgba(70, 45, 25, .55); }
.gr-rc__body { padding: 40px 16px 0; }
.gr-rc__her { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; padding: 0 18px; }
.gr-rc__her .gr-her { font-size: 17px; line-height: 24px; }
.gr-rc__note { text-align: center; font: 500 14px/1 var(--gr-sans); color: var(--gr-muted); }
.gr-rc__mac { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 18px; padding: 14px 4px 12px; }
.gr-rc__mac.is-4 { grid-template-columns: repeat(4, 1fr); }
.gr-mac { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gr-mac + .gr-mac { box-shadow: inset var(--gr-hl) 0 0 var(--gr-hair); }
.gr-mac__v { font: 800 18px/22px var(--gr-label); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-mac__v.is-p { color: var(--gr-tomato-ink); }
.gr-mac__k { font: 500 12px/14px var(--gr-sans); color: var(--gr-muted); }
.gr-mac__calc { margin-top: 2px; padding: 2px 5px 1px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--gr-hair2); font: 600 9.5px/1 var(--gr-label); letter-spacing: .04em; color: var(--gr-muted); }
.gr-rc__body .gr-st { margin: 26px 2px 10px; }
.gr-rc__wh { display: flex; align-items: center; gap: 10px; }
.gr-rc__ing { padding: 4px 16px; }
.gr-rc__ing li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; box-shadow: inset 0 calc(-1 * var(--gr-hl)) 0 var(--gr-hair); }
.gr-rc__ing li:last-child { box-shadow: none; }
.gr-rc__ing b { flex: none; width: 58px; text-align: right; font: 700 15px/20px var(--gr-label); font-variant-numeric: tabular-nums; }
.gr-rc__ing span { font: 400 16px/20px var(--gr-sans); }
.gr-rc__steps li { display: flex; gap: 12px; padding: 8px 2px; font: 400 16px/22px var(--gr-sans); }
.gr-rc__steps i { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: -2px; border-radius: 50%; background: var(--gr-s2); font: 700 13px/1 var(--gr-label); font-style: normal; }
.gr-rc__why { padding: 14px 16px; }
.gr-rc__why p { font: italic 400 17px/26px var(--gr-serif); }
.gr-rc__nav { position: absolute; left: 0; right: 0; top: 0; height: 98px; z-index: 3; opacity: 0; background: rgb(246, 240, 230); box-shadow: inset 0 calc(-1 * var(--gr-hl)) 0 var(--gr-hair2); pointer-events: none; }
.gr-rc__nav, .gr-live .gr-rc__nav { background: rgb(246, 240, 230); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gr-rc__nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; pointer-events: none; background: linear-gradient(0deg, rgba(246, 240, 230, 0), rgb(246, 240, 230)); }
.gr-rc__nt { position: absolute; left: 60px; right: 60px; bottom: 0; height: 44px; display: flex; align-items: center; justify-content: center; font: 600 17px/1 var(--gr-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-rc__back { position: absolute; left: 12px; top: 58px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 253, 248, .92); color: var(--gr-text); box-shadow: 0 4px 14px -6px rgba(70, 45, 25, .5); }
.gr-rc__back svg { width: 18px; height: 18px; margin-left: -2px; }
.gr-story .gr-rc__back, .gr-story .gr-nav__back { visibility: hidden; }
.gr-rc__foot { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--gr-h, 852px) - var(--gr-rcPill) + 26px); z-index: 3; background: linear-gradient(rgba(246, 240, 230, 0), var(--gr-ground) 42%); pointer-events: none; }
.gr-rc__add { position: absolute; left: 16px; right: 16px; top: 26px; pointer-events: auto; }

/* ------------------------------------------------------------------ prep */
.gr-pp { position: absolute; inset: 0; }
.gr-pp__title { position: absolute; left: 16px; top: var(--gr-ppTitle); }
.gr-pp__tag { position: absolute; left: 16px; right: 16px; top: var(--gr-ppTag); height: 24px; display: flex; align-items: center; gap: 8px; }
.gr-ai { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--gr-sans); color: var(--gr-text); }
.gr-ai svg { color: var(--gr-tomato); width: 15px; height: 15px; }
.gr-pp__pills { position: absolute; left: 16px; right: 16px; top: var(--gr-ppPills); display: flex; gap: 6px; }
.gr-pp__prompt { position: absolute; left: 16px; right: 16px; top: var(--gr-ppPrompt); }
.gr-pp__status { position: absolute; left: 20px; right: 20px; top: var(--gr-ppStatus); height: 20px; }
.gr-pp__status span { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; font: 500 14px/20px var(--gr-sans); color: var(--gr-muted); opacity: 0; }
.gr-pp__status span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gr-tomato); box-shadow: 0 0 0 3px rgba(212, 71, 42, .16); }
.gr-pp__cards { position: absolute; left: 16px; right: 16px; top: var(--gr-ppCards); display: flex; flex-direction: column; gap: var(--gr-ppCardGap); }
.gr-pc { position: relative; height: var(--gr-ppCardH); }
.gr-pc__cs { position: absolute; left: 7%; right: 7%; bottom: -9px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 45, 25, .9), rgba(70, 45, 25, .35) 55%, rgba(70, 45, 25, 0)); opacity: 0; }
.gr-pc__sk { position: absolute; inset: 0; border-radius: 18px; background: var(--gr-s1); box-shadow: inset 0 0 0 1px var(--gr-hair); overflow: hidden; opacity: 0; }
.gr-pc__sk i { position: absolute; border-radius: 6px; background: var(--gr-s2); }
.gr-pc__s1 { left: 12px; top: 12px; bottom: 12px; width: calc(var(--gr-ppCardH) - 24px); border-radius: 12px !important; }
.gr-pc__s2 { left: calc(var(--gr-ppCardH) + 2px); top: calc(50% - 15px); width: 46%; height: 12px; }
.gr-pc__s3 { left: calc(var(--gr-ppCardH) + 2px); top: calc(50% + 5px); width: 28%; height: 10px; }
.gr-pc__band { position: absolute; top: 0; bottom: 0; left: 0; width: 60%; opacity: 0; background: linear-gradient(100deg, rgba(255, 253, 248, 0) 0%, rgba(255, 253, 248, .95) 45%, rgba(231, 169, 58, .14) 55%, rgba(255, 253, 248, 0) 100%); }
.gr-pc__c { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-radius: 18px; background: var(--gr-s1); box-shadow: var(--gr-card-sh); opacity: 0; }
.gr-pc__th { flex: none; width: calc(var(--gr-ppCardH) - 24px); height: calc(var(--gr-ppCardH) - 24px); border-radius: 12px; overflow: hidden; background: var(--gr-s2); }
.gr-pc__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gr-pc__k { font: 600 10.5px/12px var(--gr-label); letter-spacing: .1em; color: var(--gr-muted); }
.gr-pc__n { font: 600 17px/21px var(--gr-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-pc__q { font: 500 14px/18px var(--gr-sans); color: var(--gr-muted); }
.gr-pc__swap { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px 0 10px; border-radius: 16px; background: var(--gr-s2); font: 600 13px/1 var(--gr-sans); }
.gr-pc__swap svg { width: 14px; height: 14px; }
.gr-pp__sum { position: absolute; left: 18px; right: 18px; top: var(--gr-ppSum); height: 22px; display: flex; align-items: center; gap: 8px; font: 600 15px/1 var(--gr-sans); color: var(--gr-text); opacity: 0; }
.gr-pp__sum svg { color: var(--gr-muted); }
.gr-pp__n { font-weight: inherit; --odh: 18px; }
.gr-pp__n .gr-od { --od-a: .97em; --od-d: .24em; --od-c: .74em; --od-u: .01em; }
.gr-pp__btn { position: absolute; left: 16px; right: 16px; top: var(--gr-ppBtn); opacity: 0; }

/* sheets: grocery list, 1:1 coaching (iOS page sheets over the tab bar) */
.gr-sheet { position: absolute; inset: 0; }
.gr-sheet__scrim { position: absolute; inset: 0; background: rgba(29, 25, 21, .14); opacity: 0; }
.gr-sheet__p { position: absolute; left: 0; right: 0; top: var(--gr-glTop); bottom: 0; background: var(--gr-s1); border-radius: 28px 28px 0 0; overflow: hidden; transform: translate3d(0, 100%, 0); box-shadow: 0 -10px 40px -14px rgba(70, 45, 25, .4); }
.gr-grab { position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(29, 25, 21, .16); }
.gr-sheet__hd { height: var(--gr-glHead); padding: 20px 14px 0 20px; display: flex; align-items: flex-start; justify-content: space-between; }
.gr-sheet__hd .gr-st { margin-top: 3px; }
.gr-ib { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--gr-s2); color: var(--gr-muted); }
.gr-gl__sc { top: var(--gr-glHead); }
.gr-gl__list { padding-bottom: 58px; }
/* the sheet's foot: the list dissolves into the paper under the home indicator (a row is never struck by it) */
.gr-sheet__p::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 253, 248, 0), var(--gr-s1) 72%); }
.gr-gl__sec { height: var(--gr-glSec); padding: 16px 20px 0; font: 600 11px/14px var(--gr-label); letter-spacing: .1em; color: var(--gr-muted); }
.gr-gi { display: flex; align-items: center; gap: 12px; width: 100%; height: var(--gr-glRow); padding: 0 20px; }
.gr-gi__ck { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--gr-faint); color: #FFFDF8; }
.gr-gi__f { position: absolute; inset: 0; border-radius: 50%; background: var(--gr-text); transform: scale(.6); opacity: 0; }
.gr-gi__ck .gr-ic-check { position: relative; width: 13px; height: 13px; opacity: 0; }
.gr-gi__t { position: relative; }
.gr-gi__s { position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; margin-top: -.25px; border-radius: 1px; background: var(--gr-faint); transform: scaleX(0); transform-origin: 0 50%; }
.gr-gi.is-on .gr-gi__f { transform: none; opacity: 1; }
.gr-gi.is-on .gr-gi__ck .gr-ic-check { opacity: 1; }
.gr-gi.is-on .gr-gi__s { transform: none; }
.gr-live .gr-gi__f { transition: transform .2s var(--gr-ios), opacity .14s linear; }
.gr-live .gr-gi__ck .gr-ic-check { transition: opacity .14s linear; }
.gr-live .gr-gi__s { transition: transform .1s var(--gr-out); }
/* the strike draws left to right, visibly, after the circle has filled */
.gr-live .gr-gi.is-on .gr-gi__s { transition: transform .34s cubic-bezier(.55, 0, .3, 1) .1s; }
.gr-live .gr-gi.is-on .gr-gi__f { animation: gr-ckpop .34s linear both; }
.gr-live .gr-gi.is-on .gr-gi__ck .gr-ic-check { transition-delay: .08s; }
@keyframes gr-ckpop { 0% { transform: scale(.6); opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 25% { opacity: 1; } 58% { transform: scale(1.1); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 100% { transform: scale(1); opacity: 1; } }
.gr-osrm.gr-live .gr-gi.is-on .gr-gi__f { animation: none; }
.gr-rm .gr-gi__f, .gr-rm .gr-gi__s { transform: none; animation: none; transition: opacity .15s linear; }
.gr-rm .gr-gi__s { opacity: 0; } .gr-rm .gr-gi.is-on .gr-gi__s { opacity: 1; }
.gr-rm.gr-live .gr-gi.is-on .gr-gi__s { transition: opacity .15s linear; }
.gr-gi__n { flex: 1; min-width: 0; font: 500 16px/20px var(--gr-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-gi__q { flex: none; font: 600 14px/1 var(--gr-label); color: var(--gr-muted); font-variant-numeric: tabular-nums; }
.gr-gi.is-on .gr-gi__n { color: var(--gr-muted); }
.gr-story .gr-gi__ck, .gr-story .gr-gi__f, .gr-story .gr-gi__s, .gr-story .gr-gi__ck .gr-ic-check { transition: none; animation: none; }

/* ------------------------------------------------------------------ gap (the signature screen) */
.gr-gp { position: absolute; inset: 0; }
.gr-nav { position: absolute; left: 0; right: 0; top: 54px; height: 44px; }
.gr-nav__back { position: absolute; left: 6px; top: 0; height: 44px; display: flex; align-items: center; gap: 1px; padding: 0 10px 0 4px; color: var(--gr-text); font: 400 17px/1 var(--gr-sans); }
.gr-nav__back svg { width: 22px; height: 22px; }
.gr-nav__t { position: absolute; left: 90px; right: 90px; top: 0; height: 44px; display: flex; align-items: center; justify-content: center; font: 600 17px/1 var(--gr-sans); pointer-events: none; }
.gr-gp__rc { position: absolute; left: 16px; right: 16px; top: var(--gr-gpCard); height: var(--gr-gpCardH); transform-origin: 50% 50%; }
.gr-gp__rg { left: calc(var(--gr-gpRingL) - 16px); top: calc(var(--gr-gpRingT) - var(--gr-gpCard)); width: var(--gr-gpD); height: var(--gr-gpD); }
.gr-gp__legs { position: absolute; left: calc(var(--gr-gpRingL) - 16px + var(--gr-gpD) + 22px); right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; }
.gr-gl2 { display: flex; align-items: center; gap: 8px; height: 26px; }
.gr-gl2__k { flex: 1; font: 500 15px/1 var(--gr-sans); color: var(--gr-muted); }
.gr-gl2__v { font: 700 16px/1 var(--gr-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gr-gl2__v small { font-weight: 600; font-size: 13px; color: var(--gr-muted); }
.gr-gl2__ck { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gr-s2); color: transparent; }
.gr-gl2__ck .gr-ic-check { width: 11px; height: 11px; }
.gr-gl2.is-closed .gr-gl2__ck { background: var(--gr-text); color: #FFFDF8; }
.gr-gp__plate { position: absolute; left: 16px; right: 16px; top: var(--gr-gpPlate); height: var(--gr-gpPlateH); }
.gr-gp__ph { position: absolute; left: 16px; top: 16px; bottom: 16px; width: var(--gr-gpPhoto); border-radius: 14px; overflow: hidden; background: var(--gr-s3); }
.gr-gp__ph img { transform: scale(1.5); transform-origin: 18% 12%; }
.gr-gp__pk { position: absolute; left: calc(var(--gr-gpPhoto) + 32px); top: 18px; font: 600 10.5px/12px var(--gr-label); letter-spacing: .1em; color: var(--gr-muted); }
.gr-gp__pn { position: absolute; left: calc(var(--gr-gpPhoto) + 32px); right: 14px; top: 34px; font: 600 16px/20px var(--gr-sans); }
.gr-gp__pm { position: absolute; left: calc(var(--gr-gpPhoto) + 32px); top: 58px; display: inline-flex; align-items: center; gap: 5px; font: 500 14px/16px var(--gr-sans); color: var(--gr-muted); }
.gr-gp__pm .gr-ic-check { width: 12px; height: 12px; }
.gr-short .gr-gp__pk { top: 16px; } .gr-short .gr-gp__pn { top: 31px; } .gr-short .gr-gp__pm { top: 53px; }
.gr-gp__slots { position: absolute; left: var(--gr-gpSlotL); top: var(--gr-gpSlotT); display: flex; gap: var(--gr-gpSlotGap); }
/* a slot (A2.2): an oat ground and a dashed ring in SVG; on impact a solid ring fills over it (stroke-dashoffset) */
.gr-slot { position: relative; display: block; width: var(--gr-gpSlotD); height: var(--gr-gpSlotD); border-radius: 50%; background: rgba(237, 228, 211, .55); }
.gr-slot.is-full { background: transparent; }
.gr-slot__rg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gr-slot__ds { fill: none; stroke: var(--gr-faint); stroke-width: 1.5; stroke-dasharray: .03 .02; transform-box: fill-box; transform-origin: 50% 50%; }
.gr-slot__fi { fill: none; stroke: var(--gr-meat); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.gr-slot__mb { position: absolute; left: 3px; top: 3px; width: calc(var(--gr-gpSlotD) - 6px); height: calc(var(--gr-gpSlotD) - 6px); opacity: 0; }
.gr-slot__mb svg, .gr-gp__fly svg { position: relative; width: 100%; height: 100%; }
/* the contact shadow: the same sprite under a resting meatball and under the flyer (no filter) */
.gr-mbsh, .gr-gp__sh { position: absolute; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 45, 25, .95), rgba(70, 45, 25, .45) 55%, rgba(70, 45, 25, 0)); pointer-events: none; }
.gr-mbsh { left: 7%; width: 86%; top: 100%; margin-top: -2px; opacity: .3; }
.gr-gp__sh { left: calc((var(--gr-gpSlotD) - 6px) * -.43); top: -4px; width: calc((var(--gr-gpSlotD) - 6px) * .86); z-index: 3; opacity: 0; will-change: transform, opacity; }
/* the flyer: it squashes on its bottom (the contact point) */
.gr-gp__fly { position: absolute; left: 0; top: 0; z-index: 4; width: calc(var(--gr-gpSlotD) - 6px); height: calc(var(--gr-gpSlotD) - 6px); opacity: 0; pointer-events: none; transform-origin: 50% 100%; will-change: transform, opacity; }
.gr-gp__line { position: absolute; left: 16px; right: 16px; top: var(--gr-gpLine); height: 68px; font: 600 28px/34px var(--gr-serif); letter-spacing: -.014em; }
.gr-gp__l1, .gr-gp__l2 { position: absolute; left: 0; right: 0; top: 0; display: block; }
/* "Day closed." keeps one line centred in the two-line box: no hole opens above the tip card (A2.3) */
.gr-gp__l2 { top: 17px; opacity: 0; }
/* "36 g" on the roller: Literata's figure metrics */
.gr-gp__gn { --odh: 34px; }
.gr-gp__gn .gr-od { --od-a: 1.18em; --od-d: .31em; --od-c: .75em; --od-u: .02em; }
.gr-gp__g { color: var(--gr-tomato); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.gr-gp__tip { position: absolute; left: 16px; right: 16px; top: var(--gr-gpTip); height: var(--gr-gpTipH); padding: 14px 16px 0; }
.gr-gp__tsrc { display: flex; align-items: center; gap: 8px; height: 24px; }
.gr-gp__tt { display: block; margin-top: 10px; font: 600 24px/28px var(--gr-serif); letter-spacing: -.01em; }
.gr-gp__tq { display: block; margin-top: 3px; font: italic 400 15px/20px var(--gr-serif); color: var(--gr-muted); }
.gr-gp__tm { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 7px; border-radius: 15px; background: var(--gr-s2); font: 700 14px/1 var(--gr-label); font-variant-numeric: tabular-nums; }
.gr-gp__tm .gr-mb { width: 18px; height: 18px; }
.gr-short .gr-gp__tip { padding-top: 12px; } .gr-short .gr-gp__tt { margin-top: 8px; } .gr-short .gr-gp__tm { bottom: 12px; }
/* live, the parts a drop moves are their own layers for as long as the app is live (no repaint or raster on a tap) */
.gr-live .gr-gp__pill, .gr-live .gr-gp__plate, .gr-live .gr-gp__slots, .gr-live .gr-gp__rc { will-change: transform; }
/* the pill: its squash and spring are written per frame (no transform transition) */
.gr-gp__pill { position: absolute; left: 16px; right: 16px; top: var(--gr-gpPill); font-size: 18px; transition: background-color .16s linear; }
.gr-gp__pmb { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 253, 248, .92); transform-origin: 50% 100%; }
.gr-pill .gr-gp__pmb svg { width: 16px; height: 16px; }
/* the hint (A2.6), until her first touch: every 2.4 s the pill dips 3 px; the meatball on it hops 6 px with a 12 degree
   roll and lands with a squash; the empty slot 0's dashes turn by .1 and back. Transform only. */
.gr-gp__pill.is-hint { animation: gr-hp 2.4s .8s infinite both; }
.gr-gp__pmb.is-hint { animation: gr-hm 2.4s .8s infinite both; }
.gr-slot__ds.is-hint { animation: gr-hs 2.4s .8s infinite both; }
.gr-osrm .gr-gp .is-hint, .gr-rm .gr-gp .is-hint { animation: none !important; }
@keyframes gr-hp {
  0% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  6.25% { transform: translate3d(0, 3px, 0); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  15.83%, 100% { transform: translate3d(0, 0, 0); }
}
@keyframes gr-hm {
  0%, 6.25% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  12% { transform: translate3d(0, -6px, 0) scale(1, 1) rotate(9deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  17.9% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(12deg); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  18.6%, 20.4% { transform: translate3d(0, 0, 0) scale(1.12, .88) rotate(12deg); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  27%, 100% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); }
}
@keyframes gr-hs {
  0%, 6.25% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  17.9% { transform: rotate(36deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  30%, 100% { transform: rotate(0deg); }
}

/* ------------------------------------------------------------------ closed (the overlay) */
.gr-cl { position: absolute; inset: 0; }
.gr-cl__bg { position: absolute; inset: 0; background: var(--gr-ground); opacity: 0; will-change: opacity; }
.gr-cl__grp { position: absolute; left: calc(50% - var(--gr-clD) / 2); top: calc(var(--gr-clCY) - var(--gr-clD) / 2); width: var(--gr-clD); height: var(--gr-clD); transform-origin: 0 0; will-change: transform; }
.gr-cl__echo, .gr-cl__rg { position: absolute; inset: 0; }
.gr-cl__echo { transform-origin: 50% 50%; opacity: 0; }
.gr-cl__clip { position: absolute; left: 50%; top: 50%; width: calc(var(--gr-clD) * .524); height: calc(var(--gr-clD) * .524); border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%); background: var(--gr-s3); opacity: 0; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.gr-cl__clip .gr-vs { position: absolute; inset: 0; background: transparent; }
.gr-cl__grey { position: absolute; inset: 0; filter: grayscale(1); opacity: 0; will-change: opacity; }
/* her clip grows and fades on its own layer: the rings group never re-rasters its masked, filtered image per frame */
.gr-cl__clip { will-change: transform, opacity; }
.gr-cl__line { position: absolute; left: 12px; right: 12px; top: var(--gr-clLine); text-align: center; font: italic 500 26px/32px var(--gr-serif); letter-spacing: -.01em; color: var(--gr-text); white-space: nowrap; opacity: 0; }
.gr-cl__off { color: transparent; }
.gr-cl__line .gr-caret { height: 24px; vertical-align: -4px; }
.gr-cl__draft { margin-left: 8px; vertical-align: 5px; }
.gr-cl__data { position: absolute; left: 8px; right: 8px; top: var(--gr-clData); text-align: center; font: 600 13px/18px var(--gr-label); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--gr-muted); white-space: nowrap; }
.gr-cl__dp, .gr-cl__sep { display: inline-block; opacity: 0; white-space: pre; }
.gr-cl__dp:first-child { color: var(--gr-tomato-ink); }

/* ------------------------------------------------------------------ progress */
.gr-pg__in { position: relative; padding: 62px 16px 110px; }
.gr-pg__title { margin: 8px 0 14px; }
.gr-short .gr-pg__title { margin: 4px 0 10px; }
.gr-pg__chart { padding: 16px 16px 12px; }
.gr-pg__hl { display: block; margin-top: 6px; font: 800 28px/32px var(--gr-label); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.gr-pg__sub { margin-top: 3px; font: 400 15px/20px var(--gr-sans); color: var(--gr-muted); }
.gr-pg__svg { display: block; width: 100%; height: auto; margin-top: 10px; overflow: visible; }
.gr-pg__gl { stroke: var(--gr-hair); stroke-width: 1; stroke-dasharray: 2 4; }
.gr-pg__d { fill: var(--gr-faint); fill-opacity: .55; opacity: 0; }
.gr-pg__line { fill: none; stroke: var(--gr-text); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.gr-pg__pt { fill: var(--gr-s1); stroke: var(--gr-text); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.gr-pg__pv { font: 700 11px var(--gr-label); fill: var(--gr-text); opacity: 0; paint-order: stroke; stroke: var(--gr-s1); stroke-width: 4px; stroke-linejoin: round; }
.gr-pg__x { display: flex; justify-content: space-around; margin-top: 6px; font: 600 10.5px/1 var(--gr-label); letter-spacing: .08em; color: var(--gr-muted); }
.gr-pg__ci { margin-top: 12px; padding: 14px 16px 10px; }
.gr-short .gr-pg__ci { margin-top: 10px; padding-bottom: 6px; }
.gr-pg__cih { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.gr-pg__cih b { font: 600 17px/22px var(--gr-serif); }
.gr-pg__cih span { font: 600 11px/1 var(--gr-label); letter-spacing: .1em; text-transform: uppercase; color: var(--gr-muted); }
.gr-ci { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.gr-short .gr-ci { height: 31px; }
.gr-ci + .gr-ci { box-shadow: inset 0 var(--gr-hl) 0 var(--gr-hair); }
.gr-ci__k { font: 500 15px/1 var(--gr-sans); }
.gr-ci__dots { display: flex; gap: 7px; }
.gr-ci__d { width: 11px; height: 11px; border-radius: 50%; background: var(--gr-s2); box-shadow: inset 0 0 0 1px var(--gr-hair); }
.gr-ci__d.is-on { background: var(--gr-text); box-shadow: none; }
.gr-pg__st { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; }
.gr-short .gr-pg__st { margin-top: 10px; padding: 10px 16px; }
.gr-pg__st span { display: flex; flex-direction: column; gap: 3px; }
.gr-pg__sn { font: 600 17px/20px var(--gr-sans); }
.gr-pg__ss { font: 500 13px/1 var(--gr-sans); color: var(--gr-muted); }

/* ------------------------------------------------------------------ grace + coach */
.gr-gc { position: absolute; inset: 0; }
.gr-gc__title { position: absolute; left: 16px; top: 70px; }
.gr-short .gr-gc__title { top: 66px; }
.gr-gc__live { position: absolute; left: 16px; right: 16px; top: var(--gr-gcLive); height: var(--gr-gcCardH); display: flex; overflow: hidden; }
.gr-gc__img { position: relative; flex: none; display: block; width: var(--gr-gcPW); height: 100%; background: var(--gr-s3); }
.gr-gc__info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 14px 14px 14px; }
.gr-gc__badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 5px; border-radius: 12px; background: var(--gr-s2); font: 600 12px/1 var(--gr-sans); color: var(--gr-text); }
.gr-gc__badge svg { width: 15px; height: 15px; color: var(--gr-tomato); }
.gr-gc__lt { display: block; margin-top: 10px; font: 600 21px/25px var(--gr-serif); letter-spacing: -.01em; }
.gr-gc__when { display: block; margin-top: 5px; font: 500 14px/19px var(--gr-sans); color: var(--gr-muted); }
.gr-gc__when .gr-draft { margin-left: 6px; vertical-align: 1px; }
.gr-gc__rem { width: 100%; height: 40px; margin-top: auto; border-radius: 20px; font-size: 14px; justify-content: center; padding: 0 10px; gap: 6px; }
.gr-gc__rem svg { width: 16px; height: 16px; }
.gr-gc__rem.is-on { background: var(--gr-text); color: #FFFDF8; }
.gr-gc__ask { position: absolute; left: 16px; right: 16px; top: var(--gr-gcAsk); height: var(--gr-gcAskH); padding: 14px 16px; }
.gr-gc__ah { display: flex; align-items: center; gap: 10px; height: 30px; }
.gr-gc__ah .gr-st { flex: 1; font-size: 20px; line-height: 24px; }
.gr-gc__q { height: 46px; margin-top: 12px; box-shadow: inset 0 0 0 1px var(--gr-hair2); }
.gr-gc__q .gr-send { width: 32px; height: 32px; }
.gr-gc__samples { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.gr-q { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--gr-s2); font: 500 14px/1 var(--gr-sans); }
.gr-short .gr-gc__q { height: 42px; margin-top: 10px; } .gr-short .gr-gc__samples { margin-top: 8px; }
.gr-gc__coach { position: absolute; left: 16px; right: 16px; top: var(--gr-gcCoach); height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 4px; box-shadow: inset 0 var(--gr-hl) 0 var(--gr-hair2); font: 500 17px/1 var(--gr-sans); color: var(--gr-muted); }
.gr-gc__coach svg { color: var(--gr-faint); }
.gr-co__p { top: auto; height: 404px; }
.gr-short .gr-co__p { height: 384px; }
.gr-sheet__x { position: absolute; right: 14px; top: 16px; }
.gr-co__in { display: flex; flex-direction: column; align-items: center; padding: 44px 24px 0; text-align: center; }
.gr-co__av { box-shadow: 0 10px 24px -12px rgba(70, 45, 25, .5); }
.gr-co__t { margin-top: 18px; font: 600 26px/30px var(--gr-serif); letter-spacing: -.012em; }
.gr-co__s { margin-top: 6px; font: 400 16px/22px var(--gr-sans); color: var(--gr-muted); }
.gr-co__apply { width: 100%; margin-top: 26px; }
.gr-co__apply.is-hidden { display: none; }
.gr-co__done { display: none; flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; }
.gr-co__done.is-on { display: flex; }
.gr-co__ck { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gr-text); color: #FFFDF8; margin-bottom: 6px; }
.gr-co__done b { font: 600 17px/22px var(--gr-sans); }
.gr-co__done span:last-child { font: 400 15px/20px var(--gr-sans); color: var(--gr-muted); }

/* ------------------------------------------------------------------ hover (desktop, live) */
@media (hover: hover) {
  .gr-desk.gr-live .gr-tab:hover { color: var(--gr-text); }
  .gr-desk.gr-live .gr-pill--soft:hover, .gr-desk.gr-live .gr-pc__swap:hover, .gr-desk.gr-live .gr-meal__add:hover { background: var(--gr-s3); }
  .gr-desk.gr-live .gr-pill:not(.gr-pill--soft):not(.gr-pill--ink):not(.is-closed):hover { background: #C9401F; }
  .gr-desk.gr-live .gr-meal:hover, .gr-desk.gr-live .gr-gi:hover { background: rgba(237, 228, 211, .45); }
}