/* =====================================================================================================================
   GLASS: the client dashboard's design kit, stylesheet (29 Oct 2026). "Plain graphite, light type, glass that floats,
   colour only as a signal." The written source is GLASS-GUIDE.md; every value here comes from the refined board
   (designs/dashboard-directions-2026-10-29/project/Glass-Refined.dc.html) where it has one, and from the guide's tokens
   where it does not. When this file and the guide disagree, the guide wins and this file is the bug.

   LOAD ORDER (the bridge, plan review B1): kit.css, deltas.css, glass.css, then app.css (frame and pages); kit.js, then
   glass.js, then app.js. The old kit stays loaded; nothing old is deleted. Charts drawn by glass.js use gc- classes,
   styled ONLY in glass-charts.css; this file never styles a gc- class.

   FOUR LAYERS
   1. TOKENS      the glass tokens on :root, dark only; the room (vignette), Inter, optical sizing, cv11.
   2. THE BRIDGE  every old kit and frame token redefined to its glass value, then every old class the pages and the frame
                  use restyled, so a page that has not been restyled yet already reads as glass.
   3. THE PARTS   the g- classes of the guide's section 6, each with every state it can have (3.0 to 3.25); then words on
                  a lifted face (3.26); last the parts by width, the touch sizes and the phone scope (3.27), so they win
                  over every part above at the same weight.
   4. MOTION      arrival, part transitions and keyframes, each keyframe in A and B twins; reduced motion and html.still.

   THE PARTS (layer 3)
   3.0 type: .g-display, .g-lede (button.g-lede, a lede he presses), .g-ptitle, .g-period, .g-stitle, .g-body, .g-body-s, .g-cap, .g-axis, .g-brand, .g-fig
       (.g-fig-hero, -l, -m; the half-size .g-cur, .g-dec, .g-u), .g-up    3.1 line drawings: .g-ln1, .g-ln2, .g-ln3, .g-lnf
   3.2 the shared key states    3.3 panel .g-panel (.g-panel-lit), head .g-head and .g-open, inset tile .g-tile, the data
       states (.g-data, .g-empty, .g-fail with .g-fail-line, .g-behind)    3.4 figure chips .g-chips, .g-chip (a.g-chip's 44px box; button.g-chip.g-chip-hit's)
   3.5 stat tile .g-stat, .g-pair, a.g-tile.g-stat, button.g-tile.g-stat[aria-pressed], a direct .g-empty or .g-fail for its Empty and Failed    3.6 signals .g-sig-ok, .g-sig-warn, .g-sig-alert, .g-badge, .g-dot
   3.7 status chips .g-status (-grey, -amber, -green; a green chip leads with a tick; -dashed for being checked or a guess, -small at 22px in a row)    3.8 needs you .g-needs, .g-row,
       .g-thin, .g-suggest, .g-orbtile, the foot .g-needs-foot, .g-needs-more    3.8b sorted row .g-sorted (one a screen, What needs you's Sorted tab only)
   3.9 the place rail .g-rail, .g-rail-mark, .g-rail-list, .g-rail-sep, .g-place, .g-rail-tip; the desk head .g-find,
       .g-ibtn, .g-avatar    3.10 tab pills .g-tabs, .g-tab; segment .g-seg
   3.11 pills .g-pill, .g-pill-strong    3.12 switch .g-switch    3.13 field .g-field, .g-input    3.14 hover chip .tip
   3.15 sheet .g-scrim, .g-sheet    3.16 drawer .g-drawer    3.17 toast .g-toast    3.18 table .g-table
   3.19 pencil .g-pencil    3.20 freshness .g-fresh    3.21 the phone place bar .g-placebar, .g-veil; More .g-more
   3.22 still loading blocks .g-skel    3.23 the bar .g-bar    3.24 the IntegrateAI-only line .g-only
   3.25 the design note .g-note    3.25b Home's parts: period key .g-per and menu .g-permenu, one place for every word
   .g-slot (.g-nw), link line .g-link-line, page foot .g-foot, line rows .g-lines, .g-lines-at, .g-line (-name, -fig, -say),
   link rows .g-links, .g-link (-t), the drawing's .g-art, .g-roaster, .g-capsule (-t), compact needs .g-needs.is-compact,
   own-width stat .g-stat.is-own    3.26 words on a lifted face    3.27 by width, touch, the phone scope .g-phone

   STATE CLASSES (any part; the specimen shows a state without the pointer): is-hover, is-pressed, is-focus, is-current,
   is-open, is-loading, is-updating, is-empty, is-behind, is-failed. aria-current="page", aria-selected="true",
   aria-pressed="true" and aria-checked="true" also mark the current or chosen key; [disabled] and aria-disabled="true"
   disable.

   DATA STATES (3.3; the guide's section 6 and G9). A data panel writes .g-data, .g-empty, .g-fail and .g-behind once and
   its state class chooses what shows. The show and hide rules carry :root, so they outweigh any one part class: a chip
   written class="g-status g-status-amber g-behind" stays hidden until its panel is behind. Loading: still blocks where
   the figures and the chart go; the delta and the caption beside them wait. Updating: the figures dim to t2, then count.
   Empty: one plain line, a small drawing at most. Behind: the figures and their delta dim to t2 and the amber .g-behind
   chip names their day or time. Failed: no figure and no maroon; the panel keeps its glass and .g-fail holds the amber
   triangle beside one sentence (.g-fail-line) and the chart's shape in pencil. Green is said only of fresh figures (1.1):
   while Behind, Updating or Loading every green mark greys to t2 and the sorted row takes the tile face; amber stays.

   WORDS ON A LIFTED FACE (3.26). Hover and press lift a face, a chosen tile sits on the key face, and a panel's lit corner
   adds its sheen there, so grey words on those faces step up: --t2 and --t3, and the old --mut and --em, become
   --g-t2-lit, as on the lit panel. Measured on 29 Oct the way check-all measures (words hidden, the face sampled under
   each word), on the faces the specimen and Home draw (specimen at 1,440 and 390, Home at 1,366 and 390; hover, press and
   chosen): every word on a lifted face reads 5.0:1 or more (it was 4.08 on a pressed needs row, 4.14 on a pressed Home
   card). Resting faces are unchanged: a t3 word in a panel's lit corner or on a chart band is the page's or chart's care.

   THE PHONE SCOPE (3.27). Under an ancestor with .g-phone every part takes its phone size, so a phone-sized part can sit
   beside its desk size in the specimen and in design notes: the phone's radii (--r 24, --rt 18), every phone rule and
   every touch rule. Each of those rules is written a second time as :where(.g-phone) <selector>, which adds no weight,
   straight after its media block, so it wins and loses exactly where its phone twin does. Two phone rules belong to the
   window and stay out: under .g-phone the place bar shows in flow, never pinned to the window, and the veil stays off.
   A sheet, toast or place bar drawn in place still takes .g-static. Put .g-phone on a wrapper (a figure, a frame), never
   on the part itself. The bridge's old classes keep their own phone rules (2c), and the phone sheet's timing (4.4) stays
   with the window. A rule changed in a phone block is changed in its twin.

   BLUR (G3). A backdrop blur only on a layer that floats over moving content: .g-bar (the head once the page scrolls),
   .g-placebar, .g-sheet, and the old .sheet and .dock .bar; at most three on screen at once. A sheet with another opened
   over it (.is-under) drops its blur, takes a solid face and fades back; the sheet on top of a stack takes a solid face
   too (--g-sheet-solid) and drops its blur, so nothing under it shows through its glass and a stack adds no blurred layer.

   DOM CONTRACT (made by glass.js or the pages, styled here)
   - Hover chip: IA.tip's .tip (.tv value, .tl label, .tr rows). One line: value, a middle dot, the label.
   - Segment: .seg or .g-seg with buttons; IA.ui.seg adds .thumb (kept at left:0, top = the track padding).
   - Tabs: .tabs or .g-tabs with role="tab" buttons; IA.ui.tabs adds .bar, drawn here as the sliding soft-grey key.
   - Sheet: IA.glass.sheet.open({title, back, body, foot, wide}) builds .g-scrim + section.g-sheet[role=dialog] with
     .g-grab (phone), .g-sheet-head (.g-sheet-back when back is given, h2.g-sheet-title, .g-sheet-close), .g-sheet-body,
     .g-sheet-foot. Wide: .is-wide with .g-sheet-wide (also accepted: .wide, [data-wide]). One shared .g-scrim.
     As glass.js does it: scrim and sheet show with .is-open (.on is also accepted); closing removes it and the exit runs
     1.25 times faster; a sheet with another opened over it carries .is-under, and the sheet over it (opened later, so a
     later sibling in the body) takes a solid face and no blur while it is on top. The close button is empty and draws
     its own X; the back button is text only and draws its own chevron, so its label carries no arrow ("What needs you").
     glass.js focuses the sheet itself as it opens; the sheet never wears the focus ring (3.15), its controls do.
   - Toast: IA.glass.toast(text) reuses one .g-toast (an icon and .g-toast-t), shown with .is-open for 2.4s. It sits
     above the phone's place bar.
   - Signals need no svg: <span class="g-sig-ok" role="img" aria-label="On rhythm"></span>, .g-sig-warn (amber
     triangle), .g-sig-alert (the one red triangle a screen may carry), .g-badge (red number), .g-dot (amber dot).
   - Icons: any svg inside a part takes the part's size and currentColor. Parts that need an intrinsic glyph draw it
     when left empty: .g-open (the open arrow), .g-chev (chevron), .g-sheet-close (X), .g-sheet-back (chevron).

   THE PARTS' OWN DOM (sub-classes this file styles)
   - Panel .g-panel (.g-panel-lit once a screen) > .g-head > h3.g-ptitle (with span.g-period "· last 30 days") and
     a.g-open (empty, or an svg). Data panels wrap figures and charts in .g-data, and may carry .g-empty, .g-fail and
     .g-behind, each shown only in its state; .g-fail > p.g-fail-line (a .g-sig-warn, then one sentence in a span) and
     the chart's shape in pencil. Inset .g-tile; a pair of tiles .g-pair; .g-stat > a signal, .g-stat-label,
     .g-stat-fig; a linked one is a.g-tile.g-stat, one that chooses the list under it button.g-tile.g-stat[aria-pressed].
     Figure chips .g-chips > .g-chip > b (the figure), a.g-chip when it opens something. A lede he presses: button.g-lede.
   - Needs .g-panel.g-needs > .g-needs-head, .g-needs-sec (svg, words, .g-needs-count), .g-row(.is-open) >
     button.g-row-head[aria-expanded] > .g-badge or a signal, .g-row-text (.g-row-title, .g-row-sub), .g-chev; then
     .g-row-body > .g-row-in > .g-thin > (button or div > .g-thin-name, .g-thin-sub) and .g-suggest > .g-orbtile (the orb's
     canvas) and a div (.g-suggest-label, .g-suggest-text, a .g-pill).
   - The needs panel's foot: .g-needs-foot > button.g-needs-more, .g-fresh.
   - Sorted row (1.1) div.g-sorted > div.g-row-head > span.g-sig-ok[role=img][aria-label="Sorted"], .g-row-text
     (.g-row-title, .g-row-sub): no button, no chevron.
   - Drawer .g-drawer(.is-open) > button.g-drawer-head > .g-drawer-title, .g-drawer-fig, .g-chev; .g-drawer-body >
     .g-drawer-in.
   - Place rail: nav.g-rail > span.tile.s.g-rail-mark (the still glyph), div.g-rail-list > a.g-place or button.g-place
     [aria-label][aria-current="page"] > svg (18px, stroke 1.6; or the kit's <i data-ic> holding one) + span.g-rail-tip
     [aria-hidden] (the place's name), and
     span.g-rail-sep[aria-hidden] before Your team; .g-tip-off on a key puts its chip away. .g-static draws it in place.
   - Head: .g-brand (the place he is in), the business, button.g-find (words, then an svg or none),
     button.g-ibtn (svg, .g-badge), button.g-avatar. Tabs .g-tabs > .g-tab; segment .g-seg > button.
   - Keys .g-pill, .g-pill-strong (an icon optional: an svg, or the kit's <i data-ic> that holds one); switch
     button.g-switch[role=switch][aria-checked]; field label.g-field > .g-field-label, input or textarea or select (or
     .g-input on its own), .g-field-note.
   - table.g-table (th, td, .g-num, .g-sub, .g-tickcell, tr.is-link; under 360px it drops its grey figure column, or the
     one marked .g-drop on its th and tds, so a name stays whole: 3.27); .g-pencil > .g-status.g-status-grey and
     .g-pencil-line; .g-fresh(.is-behind); nav.g-placebar > a or button (svg, label, .g-badge) with div.g-veil before it;
     .g-more > a > .g-more-ic, .g-more-text (.g-more-name, .g-more-line), .g-chev, and .g-more-sep; .g-skel with
     .g-skel-line, .g-skel-fig, .g-skel-block. .g-static shows a sheet, toast, hover chip, scrim, place bar, place rail
     or rail chip in place; a place bar in place is 358px wide (its container's width when narrower; a page that pins it with both insets sets
     max-width:none), each key at least its label and 44px wide, and it stays in the page's layer (z-index auto).
   - Period: button.g-per[aria-expanded][aria-controls] (in a .g-ptitle; the words, then .g-chev) and div.g-permenu[hidden]
     > .g-seg > button[data-p][aria-pressed], then any button that opens a sheet (data-mark names the period it stands for,
     so it is pressed while that period shows). Both share a positioned ancestor. IA.glass.period(key, opts) (.g-static draws
     the menu in place).
   - Slot: .g-slot, filled by IA.glass.slot(el, words): each word in span[aria-hidden], then the span that shows.
   - Link line a or button.g-link-line (words, then an svg or a ›), in a panel's foot or in p.g-foot > .g-cap, .g-link-line.
   - Line rows .g-lines (inside .g-lines-at to go three across) > a or button.g-line > .g-line-name, .g-line-fig (a .g-slot
     if it changes), .g-cap.g-line-say. Link rows .g-links > a or button.g-link > .g-link-t (words, an svg or a .g-chev), .g-cap.
   - Capsule: .g-art > svg.g-roaster (IA.glass.roaster(host, {label})) + span.g-capsule > span.g-capsule-t.
   - Compact needs: .g-needs.is-compact > .g-needs-head, .g-row (a button.g-row-head[aria-haspopup=dialog] each), optional
     flat .g-suggest (.g-orbtile, .g-suggest-label, .g-suggest-text, .g-pill as its children), .g-needs-foot.
   - Own-width stat: .g-stat.is-own, the same children as .g-stat, in anything that gives it a width.
   - The bar: .g-bar on the head once the page scrolls under it (the page or the frame adds it; the head's own
     transition fades it in). The IntegrateAI-only line: .g-only > span.g-status.g-status-grey ("IntegrateAI only"),
     then the line in a p or a span. The design note (D26): .g-note > span.g-note-label ("Design note · not in the
     build"), then the note in a span or a p.

   HELPERS ADDED (g- prefix, outside the contract): --g-font, --g-red (needs-you red that no bridge remap can grey),
   --g-green (good and done green that no bridge remap can grey; 1.1), --g-sorted (the green glass face, the sorted row
   only; 1.1),
   --g-t2-lit (the grey for words on a lit or lifted face), --g-glass-hover, --g-glass-press, --g-focus, --g-bar,
   --g-sheet, --g-sheet-solid (a stacked sheet's solid face), --g-strong; .g-data, .g-empty, .g-fail, .g-fail-line,
   .g-behind (what each data state shows or hides), .g-period, .g-open, .g-chev, .g-brand, .g-veil (the fade under the
   place bar), .g-phone (the phone scope), .g-rise, .g-slide, .g-fade, .g-grow, .g-draw (motion classes), .sr-only (the old
   kit's .sr under its other name; both visually hidden).

   FONT: this file does not import a font. The page must load exactly
   https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..600&display=swap (plan review M12), or every
   300 figure silently draws at 400.

   UK English. No em dashes, no en dashes (the build fails on them). Example names only.
   ===================================================================================================================== */


/* =====================================================================================================================
   1. TOKENS (dark only)
   The selector :root:root:root is deliberate. Its weight (three pseudo-classes) outranks every themed :root block the
   old kit, deltas and the frame use (bare :root, [data-theme="light"], [data-theme="dark"], and :root:not(
   [data-theme="light"]) inside prefers-color-scheme) and any page that redefines a token on its root, whatever order
   the files load in. So the room is dark whatever the device or a stored theme says, with no appearance control.
   ===================================================================================================================== */
:root:root:root{
  color-scheme:dark;

  /* the room and the glass */
  --room:#111211;
  --room-edge:#0B0C0B;
  --glass:rgba(36,38,35,0.58);
  --sheen:radial-gradient(62% 220px at 0 0,rgba(255,255,255,0.09),rgba(255,255,255,0));
  --sheen-lit:radial-gradient(70% 240px at 0 0,rgba(255,255,255,0.14),rgba(255,255,255,0));
  --hair:rgba(255,255,255,0.06);
  --shadow:0 30px 60px -30px rgba(0,0,0,0.75);
  --tile:rgba(255,255,255,0.035);
  --tline:rgba(255,255,255,0.05);
  --key:rgba(255,255,255,0.08);
  --key-line:rgba(255,255,255,0.07);
  --maroon:rgba(118,38,38,0.32);
  --float:rgba(46,48,45,0.95);

  /* words (contrast on panel / tile / maroon / green glass: t1 14.3 / 13.0 / 12.7 / 12.6, t2 6.1 / 5.5 / 5.4 / 5.4,
     t3 5.2 / 4.7 / 4.6 / 4.6; on both tinted rows words are t1 and t2 only, as a sheet's lit corner takes t3 to 4.2) */
  --t1:#ECEDEA;
  --t2:#9A9C96;
  --t3:#8E908A;
  --t4:#6C6F69;     /* decoration only: 3.3:1, never a word */

  /* signals */
  --green:#4FC77E;
  --amber:#E2A447;
  --red:#D63C42;

  /* charts */
  --ink:#E7E8E4;
  --ink-2:rgba(236,237,234,0.45);
  --ink-prev:rgba(236,237,234,0.30);
  --ink-faint:rgba(236,237,234,0.22);
  --target:rgba(255,255,255,0.32);
  --band:rgba(255,255,255,0.04);
  --grid:rgba(255,255,255,0.05);

  /* shape and motion */
  --r:28px;
  --rt:20px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-draw:cubic-bezier(0.45,0,0.15,1);

  /* helpers (g- additions; see the header) */
  --g-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --g-red:#D63C42;                          /* needs-you red: never remapped, so a real badge is never greyed */
  /* 1.1 (COLOUR-1.1.md): green says good and done. --g-green is --green's value under a name no bridge remap can grey,
     as --g-red is for red: 7.84:1 on a panel, 7.92 on a sheet, 7.12 on a tile, 6.03 at a panel's brightest lit corner,
     7.01 on the green glass. --g-sorted is the green glass, the sorted row's face only (3.8b): it reads #1B2B21 on a
     panel and #1A2A20 on a sheet, 1.130 lighter than the panel (maroon 1.128); fixed at 13%, never lighter than maroon */
  --g-green:#4FC77E;
  --g-sorted:rgba(20,130,70,0.13);
  /* the Bean to bank blueprint's cobalt, a drawing and never a signal (Chad, Q4; guide G12). Only that drawing uses
     these; words on it stay t1 and t2 */
  --g-bp-line:#5F7AEA;
  --g-bp-detail:rgba(95,122,234,.62);
  --g-bp-hair:rgba(95,122,234,.30);
  --g-bp-grid:rgba(95,122,234,.07);
  --g-bp-dash:rgba(95,122,234,.75);
  --g-bp-top:#2A3249;                       /* solid, so lines behind a room never show through its faces */
  --g-bp-left:#242A3D;
  --g-bp-right:#1E2331;
  --g-bp-floor:rgba(95,122,234,.035);
  --g-t2-lit:#AEB0AB;                       /* t2 on a lit panel: 5.2:1 where words sit (t2 itself falls to 4.3) */
  --g-glass-hover:rgba(51,53,50,0.60);      /* the glass face lifted 4% white */
  --g-glass-press:rgba(61,63,60,0.61);      /* the glass face lifted 7% white */
  --g-focus:rgba(236,237,234,0.62);         /* the focus ring: 6.6:1 on the room, 6.3:1 on a panel */
  --g-bar:rgba(30,32,29,0.97);              /* the phone place bar's face (97% opaque) */
  --g-sheet:rgba(30,32,29,0.88);            /* a sheet's face, over the dimmed page */
  --g-sheet-solid:#1B1D1A;                  /* that face as it reads over the dimmed page, solid: the top sheet of a stack */
  --g-strong:rgba(255,255,255,0.14);        /* the strong pill's brighter face */
}
@media (max-width:899px){
  :root:root:root{--r:24px;--rt:18px}
}
/* the phone's radii under an ancestor .g-phone (the phone scope, 3.27); the old kit's radii follow them there */
.g-phone{--r:24px;--rt:18px;--r-card:var(--r);--r-deck:var(--r);--r-med:var(--rt)}

/* The room: a soft fall-off, never a wash. The vignette is fixed to the window, as on the board's frames. */
html{background-color:var(--room);color-scheme:dark}
body{
  background:transparent;
  color:var(--t1);
  font-family:var(--g-font);
  font-optical-sizing:auto;
  font-feature-settings:"cv11" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 110% at 50% 38%,var(--room) 52%,var(--room-edge) 100%);
}
::selection{background:rgba(236,237,234,0.20);color:var(--t1)}
:focus-visible{outline:2px solid var(--g-focus);outline-offset:3px}


/* =====================================================================================================================
   2. THE BRIDGE
   2a. Old tokens to glass values. Every custom property kit.css, deltas.css and frame.css define and the pages or the
   frame read (96 names), mapped by meaning under the one colour law: old sales blue, sea and second-category marks
   become --ink-2, the period being read becomes --ink, money leaving is no longer red (it reads by its sign and words),
   amber stays amber, green stays the "kept, sorted, on rhythm" signal, the card and deck faces become the glass face,
   mono becomes Inter. Same weight as the tokens above, for the same reason.
   ===================================================================================================================== */
:root:root:root{
  /* faces. --card and --card2 stay opaque: pages paint sheets, popovers and svg halos with them */
  --card:#1C1E1B;                  /* the panel face as it reads over the room */
  --card2:#242623;                 /* the tile face as it reads on a panel */
  --sunk:rgba(255,255,255,0.035);  /* = --tile */
  --sunk2:rgba(255,255,255,0.06);  /* tracks, inputs, wells */
  --hair2:rgba(255,255,255,0.10);  /* the outline of a key or chip */

  /* words */
  --ink2:#ECEDEA;                  /* body text = t1 */
  --mut:#9A9C96;                   /* grey words = t2 */
  --faint:#6C6F69;                 /* decoration = t4 */
  --em:#9A9C96;                    /* the grey half of a title = t2 */
  --ghost:rgba(236,237,234,0.22);  /* empty marks = ink-faint */
  --ring:#6C6F69;                  /* the ring of an empty dot = t4 */

  /* status and goal colours: words keep their signal; blue and sea were never signals */
  --green-t:#4FC77E;
  --amber-t:#E2A447;
  --red-t:#ECEDEA;                 /* red words are gone: money leaving reads by its minus sign */
  --blue:rgba(236,237,234,0.45);
  --blue-t:#9A9C96;
  --sea:rgba(236,237,234,0.45);
  --sea-t:#9A9C96;
  --need-100:rgba(255,255,255,0.035);   /* tints become the tile face: the maroon row is the one tinted surface */
  --ok-100:rgba(255,255,255,0.035);
  --blue-100:rgba(255,255,255,0.035);
  --sea-100:rgba(255,255,255,0.035);
  --red-100:rgba(118,38,38,0.32);       /* the old red tint becomes the maroon row (needs you); a failed read is never maroon (G9) */

  /* chart marks */
  --c-now:#E7E8E4;                      /* = ink */
  --c-2:rgba(236,237,234,0.45);         /* = ink-2 */
  --c-prev:rgba(236,237,234,0.30);      /* = ink-prev */
  --c-grid:rgba(255,255,255,0.05);      /* = grid */
  --c-area:rgba(255,255,255,0);         /* no fill under a line */
  --c-empty:rgba(255,255,255,0.10);

  /* material */
  --lift:inset 0 0 0 1px rgba(255,255,255,0.06),0 30px 60px -30px rgba(0,0,0,0.75);
  --lift-sm:inset 0 0 0 1px rgba(255,255,255,0.06),0 18px 36px -22px rgba(0,0,0,0.7);
  --lift-hover:inset 0 0 0 1px rgba(255,255,255,0.08),0 34px 64px -30px rgba(0,0,0,0.8);

  /* the deck (the old lead band) becomes the lit glass panel */
  --deck-bg:radial-gradient(70% 240px at 0 0,rgba(255,255,255,0.14),rgba(255,255,255,0)),rgba(36,38,35,0.58);
  --deck-shadow:inset 0 0 0 1px rgba(255,255,255,0.06),0 30px 60px -30px rgba(0,0,0,0.75);
  --deck-glow:rgba(255,255,255,0);      /* no glow */
  --deck-fg:#ECEDEA;
  --deck-mut:#AEB0AB;                   /* words on a lit face */
  --deck-faint:#AEB0AB;
  --deck-hair:rgba(255,255,255,0.08);
  --deck-ok:#4FC77E;
  --deck-need:#E2A447;
  --deck-blue:rgba(236,237,234,0.45);
  --deck-sea:rgba(236,237,234,0.45);
  --deck-red:rgba(236,237,234,0.45);
  --deck-key:rgba(255,255,255,0.08);
  --deck-key-h:rgba(255,255,255,0.12);
  --deck-ring:rgba(255,255,255,0.22);
  --orb-ink:236,237,234;

  /* the logo's tile becomes the orb tile */
  --tile-bg:linear-gradient(180deg,#2B2D2A,#191A18);
  --tile-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 0 0 1px rgba(255,255,255,0.07);
  --logo-filter:none;

  /* keys: the selected key is the soft grey key, never white */
  --key-bg:rgba(255,255,255,0.08);
  --key-fg:#ECEDEA;
  --key-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
  --key-shadow-h:inset 0 0 0 1px rgba(255,255,255,0.12);
  --seg-on:rgba(255,255,255,0.08);
  --tip-bg:rgba(46,48,45,0.95);
  --tip-fg:#ECEDEA;
  --tip-mut:#9A9C96;
  --dock:rgba(30,32,29,0.97);
  --scrim:rgba(0,0,0,0.6);              /* the page behind dims to 40% */

  /* type: one family */
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* motion: calm, never bouncy (the overshoot curve is retired) */
  --out:cubic-bezier(0.16,1,0.3,1);
  --spring:cubic-bezier(0.16,1,0.3,1);
  --brand:cubic-bezier(0.16,1,0.3,1);
  --crisp:cubic-bezier(0.2,0,0.2,1);
  --d-micro:100ms;
  --d-press:150ms;      /* the release; the press itself is set to 90ms on :active */
  --d-trans:150ms;      /* hover */
  --d-drawer:300ms;     /* drawer, thumb */
  --d-arrive:900ms;
  --d-draw:1600ms;
  --d-count:1100ms;

  /* radii */
  --r-card:var(--r);
  --r-deck:var(--r);
  --r-med:var(--rt);
  --r-key:14px;
  --r-tip:11px;

  /* the frame's tokens (frame.css defines them for light, system dark and chosen dark) */
  --dm-cur-bg:rgba(255,255,255,0.08);
  --dm-cur-fg:#ECEDEA;
  --dm-cur-shadow:inset 0 0 0 1px rgba(255,255,255,0.07);
  --dm-glow-ok:rgba(79,199,126,0);
}

/* Money leaving was red (D29); in glass red only says "needs you" (G7). Inside the old containers the old pages draw
   in, --red reads as --ink-2, so a cost bar, a bills stem or a key dot turns grey; a real badge reads --g-red.
   A category key dot is decoration under the colour law: it keeps only amber. */
.card,.deck,.sheet,.inset,.chart,.legend,.dm-ft,.dm-drawer,.dm-pop-in,.dm-pal{--red:rgba(236,237,234,0.45)}
.gdot{--red:rgba(236,237,234,0.45);--green:rgba(236,237,234,0.45);--blue:rgba(236,237,234,0.45);--sea:rgba(236,237,234,0.45);--c-now:rgba(236,237,234,0.45);--c-2:rgba(236,237,234,0.45);--ink:rgba(236,237,234,0.45)}


/* ---------------------------------------------------------------------------------------------------------------------
   2b. Old classes restyled. Same weight as kit.css and later, so these win; where kit.css themes a rule under
   :root[data-theme="dark"] or the prefers-color-scheme block, the selector is matched weight for weight.
   The frame's own dm- classes load after this file and are left to the frame: they follow through the tokens above.
   --------------------------------------------------------------------------------------------------------------------- */

/* base */
body{font-size:15px;line-height:1.45;font-weight:400;color:var(--t1);transition:none}
button{font-family:inherit}
/* the visually hidden class under both its names, the old kit's .sr and .sr-only, wherever a page uses it: read by a screen
   reader, never drawn, never taking room (a table head's "Cover" stayed on screen because .sr-only had no rule at all) */
.sr,.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* The font shorthand resets font-feature-settings, so every kit rule written with font: drops Inter's cv11 (the single
   storey a). Rules below that restyle these classes set it again; this line covers the ones they leave alone. */
.mrail .search kbd,.dock .tab,.lockup .ctx,.notexact .what{font-feature-settings:"cv11" 1}
.deck :focus-visible{outline-color:var(--g-focus)}

/* type: sentence case everywhere, no mono, no capitals as labels */
.eyebrow{font:400 12.5px/1.35 var(--g-font);letter-spacing:0;text-transform:none;color:var(--t2);font-feature-settings:"cv11" 1}
.eyebrow.ink{color:var(--t1)}
.annot{font:400 12px/1.45 var(--g-font);letter-spacing:0;color:var(--t2);font-feature-settings:"cv11" 1}
.ctl{font:500 13px/1 var(--g-font);letter-spacing:0;text-transform:none;font-feature-settings:"cv11" 1}
.h1{font-size:58px;line-height:1.04;font-weight:300;letter-spacing:-0.032em;text-wrap:balance}
.h1 em,.h2 em,.h3 em{font-style:normal;color:var(--t2)}
.h2{font-size:22px;line-height:1.2;font-weight:300;letter-spacing:-0.018em;text-wrap:balance}
.h3{font-size:15px;line-height:1.35;font-weight:400;letter-spacing:-0.01em}
.lede{font-size:20px;line-height:1.3;font-weight:300;letter-spacing:-0.01em;color:var(--t2)}
.body{font-size:15px;line-height:1.35;color:var(--t1)}
.small{font-size:12.5px;line-height:1.4;color:var(--t2)}
.small b,.body b{font-weight:400;color:var(--t1)}
.num{font-variant-numeric:normal;font-feature-settings:"tnum" 1,"cv11" 1}
.fig{font-family:var(--g-font);font-weight:300;letter-spacing:-0.03em;line-height:1;font-variant-numeric:normal;font-feature-settings:"tnum" 1,"cv11" 1;color:var(--t1)}
.fig .cur,.fig .suf{font-size:max(11px,0.5em);color:var(--t2);letter-spacing:0;top:0;vertical-align:baseline}
.fig .cur{margin-right:0.06em}
.fig .suf{margin-left:0.12em}
.fig.xl{font-size:46px}
.fig.l{font-size:40px}
.fig.m{font-size:30px}
.fig.s{font-size:22px;letter-spacing:-0.02em}
.fig.xs{font-size:17px;letter-spacing:-0.015em}
.amt{font:400 15px/1.2 var(--g-font);letter-spacing:0;font-feature-settings:"tnum" 1,"cv11" 1}
.unit{font:400 12px/1.3 var(--g-font);letter-spacing:0;color:var(--t2);font-feature-settings:"cv11" 1}
.delta{gap:5px;font:400 12.5px/1 var(--g-font);letter-spacing:0;font-feature-settings:"tnum" 1,"cv11" 1}
.delta.up{color:var(--green)}
.delta.down,.delta.flat{color:var(--t2)}
.link{gap:6px;font:400 13.5px/1 var(--g-font);letter-spacing:0;text-transform:none;color:var(--t1);font-feature-settings:"cv11" 1}
.link .ic{color:var(--t2);transition:transform 150ms var(--ease),color 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){.link:hover .ic{color:var(--t1)}}

/* layout: the guide's spacing (desk 28px gutters, columns 28 apart, panels 16 apart; content stops at 1,440px) */
.page{max-width:1496px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.grid{gap:16px 28px}

/* cards become glass panels; the deck becomes the lit glass panel */
.card{
  border-radius:var(--r);
  background-color:var(--glass);background-image:var(--sheen);
  box-shadow:inset 0 0 0 1px var(--hair),var(--shadow);
  color:var(--t1);
  transition:background-color 150ms var(--ease),box-shadow 150ms var(--ease),transform 150ms var(--ease);
}
.card.pad{padding:22px 24px 20px}
.card.tight{padding:18px 20px 16px}
.card.flat{background-image:none;box-shadow:inset 0 0 0 1px var(--hair)}
.card.is-link{cursor:pointer}
@media (hover:hover) and (pointer:fine){.card.is-link:hover{transform:none;background-color:var(--g-glass-hover);box-shadow:inset 0 0 0 1px var(--hair),var(--shadow)}}
.card.is-link:active{transform:scale(0.98);background-color:var(--g-glass-press);transition-duration:90ms}
.inset{border-radius:var(--rt);background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline)}
.inset.quote{background:var(--tile)}
.divider{background:var(--hair)}
.src{font:400 12px/1.4 var(--g-font);letter-spacing:0;color:var(--t3);font-feature-settings:"cv11" 1}
.src .ic{opacity:1}

.deck{border-radius:var(--r);background:var(--deck-bg);box-shadow:var(--deck-shadow);color:var(--t1)}
.deck::after{display:none}
.deck .eyebrow,.deck .annot,.deck .src,.deck .small,.deck .fig .cur,.deck .fig .suf,.deck .unit{color:var(--g-t2-lit)}
.deck .key.ghost{background:var(--key);color:var(--t1);box-shadow:inset 0 0 0 1px var(--key-line)}
@media (hover:hover) and (pointer:fine){.deck .key.ghost:hover{background:rgba(255,255,255,0.12)}}
.tile{border-radius:var(--r-key);background:var(--tile-bg);box-shadow:var(--tile-shadow)}
.tile.s{border-radius:11px}
.tile.l{border-radius:17px}
.lockup .ctx{font:400 12.5px/1 var(--g-font);letter-spacing:0;text-transform:none;color:var(--t2);font-feature-settings:"cv11" 1}
.wordmark{font:400 17px/1.1 var(--g-font);letter-spacing:-0.015em;color:var(--t1);font-feature-settings:"cv11" 1}

/* keys become glass pills: never white, never filled with a colour */
.key{
  height:36px;padding:0 15px;gap:7px;border-radius:18px;
  font:500 13px/1 var(--g-font);letter-spacing:0;text-transform:none;color:var(--t1);
  background:var(--key);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
  transition:transform 150ms var(--ease),background-color 150ms var(--ease),box-shadow 150ms var(--ease),color 150ms var(--ease);font-feature-settings:"cv11" 1
}
.key:active{transform:scale(0.98);transition-duration:90ms}
.key.ink{background:var(--g-strong);color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12)}
.key.line{background:var(--key);color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10)}
.key.ghost{background:transparent;color:var(--t2);box-shadow:none}
.key.white{background:var(--key);color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10)}
.key.sm{height:32px;padding:0 13px;border-radius:16px;gap:6px}
.key.lg{height:44px;padding:0 20px;border-radius:22px;gap:8px;font-size:14px}
.key.icon{width:36px;padding:0}
.key.icon.sm{width:32px}
@media (hover:hover) and (pointer:fine){
  .key.ink:hover{background:rgba(255,255,255,0.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16)}
  .key.line:hover,.key.white:hover{background:rgba(255,255,255,0.12);color:var(--t1)}
  .key.ghost:hover{background:var(--tile);color:var(--t1)}
}
.key.done-state{background:var(--key);color:var(--green);box-shadow:inset 0 0 0 1px rgba(79,199,126,0.5)}
:root:root .deck .key.white{background:var(--g-strong);color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12)}

/* chips (filters and periods): a tile face; the chosen one on the soft grey key */
.chips{gap:6px}
.chip{
  height:32px;padding:0 13px;border-radius:16px;gap:6px;
  font:400 13px/1 var(--g-font);letter-spacing:0;color:var(--t2);
  background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline);
  transition:background-color 150ms var(--ease),color 150ms var(--ease),box-shadow 150ms var(--ease),transform 150ms var(--ease);font-feature-settings:"cv11" 1
}
.chip:active{transform:scale(0.98);transition-duration:90ms}
@media (hover:hover) and (pointer:fine){.chip:hover{color:var(--t1);background:rgba(255,255,255,0.075)}}
.chip[aria-pressed="true"],.chip.on{background:var(--key);color:var(--t1);box-shadow:inset 0 0 0 1px var(--key-line)}
.chip .n{font:400 13px/1 var(--g-font);color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1;opacity:1}

/* status words become outlined status chips (26px, signal at 50% for the edge, full for the words); no dot */
.st{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px;
  font:500 12px/1 var(--g-font);letter-spacing:0;text-transform:none;white-space:nowrap;
  color:var(--c-t,var(--t2));box-shadow:inset 0 0 0 1px var(--c-e,rgba(154,156,150,0.5));font-feature-settings:"cv11" 1
}
.st::before{display:none}
.st.need{--c-t:var(--amber);--c-e:rgba(226,164,71,0.5)}
.st.ok,.st.live{--c-t:var(--green);--c-e:rgba(79,199,126,0.5)}
.st.stop{--c-t:var(--t1);--c-e:rgba(214,60,66,0.6)}
.st.idle,.st.blue,.st.sea{--c-t:var(--t2);--c-e:rgba(154,156,150,0.5)}
.st.plain{height:auto;padding:0;border-radius:0;box-shadow:none;font:400 12.5px/1.3 var(--g-font);white-space:normal;font-feature-settings:"cv11" 1}
.st.pulse::before,.st.need.pulse::before,.st.live.pulse::before{animation:none}
.deck .st.need{--c-t:var(--amber);--c-e:rgba(226,164,71,0.5)}
.deck .st.ok,.deck .st.live{--c-t:var(--green);--c-e:rgba(79,199,126,0.5)}
.deck .st.idle{--c-t:var(--g-t2-lit);--c-e:rgba(174,176,171,0.5)}
.g{font:400 12.5px/1.2 var(--g-font);letter-spacing:0;text-transform:none;color:var(--t2);font-feature-settings:"cv11" 1}
.g.green{color:var(--green)}
.g.amber{color:var(--amber)}
.g.blue,.g.sea,.g.red{color:var(--t2)}
.g.ink{color:var(--t1)}
.deck .g.blue,.deck .g.sea,.deck .g.red{color:var(--g-t2-lit)}
.pill{height:26px;padding:0 11px;border-radius:13px;background:transparent;box-shadow:inset 0 0 0 1px rgba(154,156,150,0.5);font:500 12px/1 var(--g-font);letter-spacing:0;color:var(--t2);font-feature-settings:"cv11" 1}
.pill.need{background:transparent;color:var(--amber);box-shadow:inset 0 0 0 1px rgba(226,164,71,0.5)}
.pill.ok{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1px rgba(79,199,126,0.5)}
.pill.red,.pill.blue{background:transparent;color:var(--t2);box-shadow:inset 0 0 0 1px rgba(154,156,150,0.5)}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;font:500 11px/1 var(--g-font);font-feature-settings:"tnum" 1,"cv11" 1;background:var(--key);color:var(--t1)}
.badge.need,.badge.red{background:var(--g-red);color:#FFFFFF}
.face{background:var(--key);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);font:400 12px/1 var(--g-font);color:var(--t1);font-feature-settings:"cv11" 1}
.face.s{font-size:11px}
.face.l{font-size:15px}
.faces .face+.face{box-shadow:0 0 0 2px var(--card),inset 0 0 0 1px rgba(255,255,255,0.08)}
.owner{color:var(--t1)}
.glyph{border-radius:12px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline);color:var(--t2)}
.glyph.s{border-radius:10px}

/* lists: rows on a 5% rule */
.rows>*+*{border-top-color:var(--grid)}
.ri .name{font-size:15px;font-weight:400;letter-spacing:-0.01em;color:var(--t1)}
.ri .meta{font-size:12.5px;line-height:1.35;color:var(--t2)}
.ri.press{transition:background-color 150ms var(--ease),transform 150ms var(--ease)}
.ri.press:active{transform:scale(0.99);transition-duration:90ms}
.rows>.ri.press+.ri.press{box-shadow:0 -1px 0 0 var(--grid)}
@media (hover:hover) and (pointer:fine){.ri.press:hover{background:var(--tile)}.ri.press:hover .chev{color:var(--t1)}}
.ri .chev{color:var(--t2)}

/* honest states */
.pencil{
  border:0;border-radius:var(--rt);padding:16px 18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='20' ry='20' fill='none' stroke='%23fff' stroke-opacity='0.14' stroke-width='2' stroke-dasharray='3 4'/%3E%3C/svg%3E") no-repeat;
}
.pencil .st{margin-bottom:10px}
svg .pen{stroke:rgba(236,237,234,0.26);stroke-width:1;stroke-dasharray:3 4}
svg .pen-fill{fill:rgba(236,237,234,0.03)}
.notexact .what{font:400 15px/1.35 var(--g-font);color:var(--t1);font-feature-settings:"cv11" 1}
.notexact .why{font-size:12.5px;line-height:1.4;color:var(--t2)}
.notice{border-radius:14px;font-size:13.5px;line-height:1.4;color:var(--t1);background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline)}
.notice.need,.notice.ok,.notice.plain{background:var(--tile);color:var(--t1)}
.notice.need .ic{color:var(--amber)}
.notice.ok .ic{color:var(--green)}
.notice.red{background:var(--maroon);color:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05)}
.notice.red .ic{color:var(--t1)}
.is-stale .fig,.is-stale .fig .cur,.is-stale .amt{color:var(--t1)}
.is-stale .fig .cur{color:var(--t2)}
.skel{border-radius:10px;background:var(--tile)}

/* charts the pages still draw themselves: hairlines, Inter, no hue; red never in a chart */
.chart text{font-family:var(--g-font);font-size:11px;fill:var(--t3);letter-spacing:0;font-feature-settings:"tnum" 1,"cv11" 1}
.chart text.ink{fill:var(--t1)}
.chart text.strong{fill:var(--t1);font-weight:400;font-size:12px}
.chart .grid-l{stroke:var(--grid)}
.chart .base-l{stroke:rgba(255,255,255,0.10)}
.chart .tgt-l{stroke:var(--target);stroke-opacity:1;stroke-dasharray:3 4}
.chart .now-l{stroke:var(--ink);stroke-width:1.25}
.chart .two-l{stroke:var(--ink-2);stroke-width:1.25}
.chart .prev-l{stroke:var(--ink-prev);stroke-width:1}
.chart .area{fill:transparent}
.chart .cross{stroke:rgba(255,255,255,0.18);stroke-opacity:1}
.legend{gap:6px 16px;font-size:11.5px;line-height:1.3;color:var(--t2);font-feature-settings:"tnum" 1,"cv11" 1}
.legend .k b{font:400 11.5px/1 var(--g-font);letter-spacing:0;color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1}
.legend .sw{width:16px;height:1.5px;border-radius:1px;background:var(--ink)}
.legend .sw.prev{background:var(--ink-prev)}
.legend .sw.two{background:var(--ink-2)}
.legend .sw.dot{width:7px;height:7px;border-radius:50%}
.legend .sw.ring{width:8px;height:8px;box-shadow:inset 0 0 0 1.25px var(--amber)}
.legend .sw.grey{background:var(--ghost)}
.axis-row{font:400 11px/1 var(--g-font);letter-spacing:0;text-transform:none;color:var(--t3);font-feature-settings:"tnum" 1,"cv11" 1}

/* ranked lines and meters still built in HTML by a page (the old kit's divs): the tick meter, a 1px track at 12%, a
   1.5px fill, a 1px target notch at 55%. glass.js draws its own meters in svg (gc-mt, styled in glass-charts.css) and
   reuses the class names there on svg marks, so these rules name the div. */
.hb{gap:14px}
.hb-l{font-size:13.5px;color:var(--t1)}
.hb-l b{font:400 13.5px/1 var(--g-font);letter-spacing:0;color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1}
.hb-n{font-size:12.5px;color:var(--t2)}
div.hb-t:not(.gc-hb-t),div.mt-t:not(.gc-mt){height:9px;border-radius:0;box-shadow:none;background:linear-gradient(rgba(255,255,255,0.12),rgba(255,255,255,0.12)) 0 4px/100% 1px no-repeat}
div.hb-f,div.mt-f{top:3.75px;bottom:auto;height:1.5px;border-radius:0;background:var(--ink)}
div.hb-f.two,div.mt-f.two,div.hb-f.red,div.mt-f.red{background:var(--ink-2)}
div.hb-f.amber,div.mt-f.amber{background:var(--amber)}
div.hb-f.grey,div.mt-f.grey{background:var(--ghost)}
div.hb-f.ink,div.mt-f.ink{background:var(--ink)}
div.mt-g{top:0;bottom:0;width:1px;margin-left:-0.5px;border-radius:0;background:rgba(255,255,255,0.55);opacity:1}

/* the old desk rail and phone dock: glass faces, the current place on the soft grey key */
.rail{background:transparent;border-right-color:var(--hair)}
.rail .ritem{color:var(--t2)}
@media (hover:hover) and (pointer:fine){.rail .ritem:hover{background:var(--tile);color:var(--t1)}}
.rail .ritem[aria-current="page"],
:root:root .rail .ritem[aria-current="page"],
:root:root .dock .tab[aria-current="page"],
:root:root .mrail .mi[aria-current="page"]{background:var(--key);color:var(--t1);box-shadow:inset 0 0 0 1px var(--key-line)}
.rail .ritem .n,.dock .tab .n{background:var(--g-red);color:#FFFFFF;font:500 11px/16px var(--g-font);box-shadow:0 0 0 2px var(--room);font-feature-settings:"tnum" 1,"cv11" 1}
.rail .rtip{background:var(--float);color:var(--t1);border-radius:11px;font-size:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10),0 10px 24px -10px rgba(0,0,0,0.75)}
.dock .bar{
  background:var(--dock);
  -webkit-backdrop-filter:blur(26px) saturate(1.15);backdrop-filter:blur(26px) saturate(1.15);
  box-shadow:inset 0 0 0 1px var(--hair),0 20px 40px -16px rgba(0,0,0,0.8);
}
.dock .tab{color:var(--t2);font:500 12px/1 var(--g-font);letter-spacing:0;text-transform:none;font-feature-settings:"cv11" 1}

/* the old sheet and scrim: blurred glass over the dimmed page */
.scrim{background:var(--scrim)}
.sheet{
  border-radius:var(--r);
  background-color:var(--g-sheet);background-image:var(--sheen);
  -webkit-backdrop-filter:blur(26px) saturate(1.15);backdrop-filter:blur(26px) saturate(1.15);
  box-shadow:inset 0 0 0 1px var(--hair),0 40px 80px -30px rgba(0,0,0,0.8);
}
@media (max-width:767px){.sheet{border-radius:var(--r) var(--r) 0 0}}

/* 2c. The bridge by width. The rules above carry no media query, so they would also override the old kit's phone sizes;
   these restore the guide's values per band: two columns from 900 to 1,279 (display 46, hero 42, padding 20), the phone
   under 900 (16px gutter, display 36, lede 17, hero 40, panels 14 apart, padding 20). */
@media (min-width:900px) and (max-width:1279px){
  .h1{font-size:46px}
  .fig.xl{font-size:42px}
  .grid{gap:16px 20px}
  .card.pad{padding:20px}
}
@media (max-width:899px){
  .page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .grid{gap:14px}
  .h1{font-size:36px;letter-spacing:-0.03em}
  .lede{font-size:17px}
  .fig.xl{font-size:40px}
  .fig.l{font-size:36px}
  .card.pad{padding:20px}
  .card.tight{padding:16px 18px 14px}
}
/* touch: every target 44px (the old keys and chips are drawn at 44, as deltas.css did) */
@media (pointer:coarse),(max-width:899px){
  .key,.key.sm{height:44px;border-radius:22px}
  .key.icon,.key.icon.sm{width:44px}
  .chip{height:44px;border-radius:22px;min-width:44px}
  .link{min-height:44px}
}


/* =====================================================================================================================
   3. THE PARTS (the guide's section 6). Look and states here; every movement is in layer 4.
   ===================================================================================================================== */

/* ---------- 3.0 type helpers ---------- */
.g-display{margin:0;font-size:58px;line-height:1.04;font-weight:300;letter-spacing:-0.032em;color:var(--t1);text-wrap:balance}
.g-lede{margin:0;font-size:20px;line-height:1.3;font-weight:300;letter-spacing:-0.01em;color:var(--t2);text-wrap:pretty}
/* a lede he presses (button.g-lede, Home's "Five things need you ›" that opens the bell's sheet), lifted from Home's
   .hm-lede, values unchanged: the words stay as the lede draws them, a 36px box rides on ::after (44px to a finger and
   under 900), they lift to t1 under the pointer, and focus rings them 3px out. :where() keeps the weight of .g-lede, so
   a page rule of its own (Home's margin) still wins; a .g-lede that is not a button is exactly as above */
:where(button).g-lede{position:relative;display:block;padding:0;border:0;background:none;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 150ms var(--ease)}
:where(button).g-lede::after{content:"";position:absolute;left:-8px;right:-8px;top:min(0px,calc(50% - 18px));bottom:min(0px,calc(50% - 18px))}
@media (pointer:coarse),(max-width:899px){:where(button).g-lede::after{top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}}
:where(.g-phone) :where(button).g-lede::after{top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
@media (hover:hover) and (pointer:fine){:where(button).g-lede:hover{color:var(--t1)}}
:where(button).g-lede:is(.is-hover,.is-pressed){color:var(--t1)}
:where(button).g-lede:is(:focus-visible,.is-focus){outline:2px solid var(--g-focus);outline-offset:3px}
.g-ptitle{margin:0;font-size:16px;line-height:1.25;font-weight:300;letter-spacing:-0.012em;color:var(--t1)}
.g-period{color:var(--t2)}                      /* write the period with its middle dot: "Sales <span class=g-period>· last 30 days</span>" */
.g-stitle{margin:0;font-size:22px;line-height:1.2;font-weight:300;letter-spacing:-0.018em;color:var(--t1)}
.g-body{font-size:15px;line-height:1.35;font-weight:400;color:var(--t1)}
.g-body-s{font-size:14px;line-height:1.45;font-weight:400;color:var(--t1)}
.g-cap{font-size:12.5px;line-height:1.4;font-weight:400;color:var(--t2)}
.g-axis{font-size:11px;line-height:1;font-weight:400;color:var(--t3);font-feature-settings:"tnum" 1,"cv11" 1;white-space:nowrap}
.g-brand{font-size:17px;line-height:1;font-weight:400;letter-spacing:-0.015em;color:var(--t1);white-space:nowrap}
.g-fig{font-family:var(--g-font);font-weight:300;line-height:1;letter-spacing:-0.03em;color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1;white-space:nowrap}
.g-fig-hero{font-size:46px}
.g-fig-l{font-size:40px}
.g-fig-m{font-size:30px}
.g-cur,.g-dec,.g-u{font-size:max(11px,0.5em);font-weight:300;letter-spacing:0;color:var(--t2)}
.g-cur{margin-right:0.06em}
.g-u{margin-left:0.12em}
.g-dec+.g-u{margin-left:0.3em}
.g-up{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;line-height:1;font-weight:400;color:var(--green);font-feature-settings:"tnum" 1,"cv11" 1;white-space:nowrap}
.g-up::before{content:"";flex:none;width:12px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5M6.5 11L12 5.5l5.5 5.5'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5M6.5 11L12 5.5l5.5 5.5'/%3E%3C/svg%3E") center/12px 12px no-repeat}

/* ---------- 3.1 line drawings (the drum roaster family): simple geometry, hairline strokes ---------- */
.g-ln1{fill:none;stroke:rgba(236,237,234,0.72);stroke-width:1.15px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.g-ln2{fill:none;stroke:rgba(236,237,234,0.38);stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.g-ln3{fill:none;stroke:rgba(236,237,234,0.14);stroke-width:1px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.g-lnf{fill:rgba(236,237,234,0.55);stroke:none}

/* ---------- 3.2 the shared key states ----------
   Every key-like part declares its faces as custom properties and these rules move it between them, so hover, press,
   focus, current and disabled behave the same everywhere. --g-bg rest face, --g-bg-h hover (the face lifts 4% white),
   --g-bg-p pressed (lighter again, and the part settles to 98%), --g-bg-on current or chosen, --g-fg / --g-fg-h /
   --g-fg-on the words, --g-edge / --g-edge-on the inset hairline. */
:is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile){
  position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  background-color:var(--g-bg,transparent);color:var(--g-fg,var(--t1));box-shadow:var(--g-edge,none);
  text-decoration:none;
}
@media (hover:hover) and (pointer:fine){
  :is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile):hover{
    background-color:var(--g-bg-h,var(--g-bg,transparent));color:var(--g-fg-h,var(--t1))}
}
:is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile).is-hover{
  background-color:var(--g-bg-h,var(--g-bg,transparent));color:var(--g-fg-h,var(--t1))}
:is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile):is(:active,.is-pressed){
  background-color:var(--g-bg-p,var(--g-bg-h,var(--g-bg,transparent)));color:var(--g-fg-h,var(--t1));transform:scale(0.98)}
:is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile):is(:focus-visible,.is-focus){
  outline:2px solid var(--g-focus);outline-offset:2px}
:is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile):is(.is-current,.is-open,[aria-current="page"],[aria-current="true"],[aria-selected="true"],[aria-pressed="true"],[aria-expanded="true"]){
  background-color:var(--g-bg-on,var(--g-bg,transparent));color:var(--g-fg-on,var(--t1));box-shadow:var(--g-edge-on,var(--g-edge,none))}
:is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile):is([disabled],[aria-disabled="true"]){
  opacity:0.4;pointer-events:none;cursor:default}

/* ---------- 3.3 panel, panel head, inset tile ---------- */
.g-panel{
  position:relative;min-width:0;padding:20px 22px;border-radius:var(--r);color:var(--t1);
  background-color:var(--glass);background-image:var(--sheen);
  box-shadow:inset 0 0 0 1px var(--hair),var(--shadow);
}
.g-panel-lit{background-image:var(--sheen-lit);--t2:var(--g-t2-lit);--t3:var(--g-t2-lit)}   /* one per screen at most */
:is(a,button).g-panel,.g-panel.is-link{display:block;width:100%;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){:is(a,button).g-panel:hover,.g-panel.is-link:hover{background-color:var(--g-glass-hover)}}
.g-panel.is-hover{background-color:var(--g-glass-hover)}
:is(a,button).g-panel:active,.g-panel.is-link:active,.g-panel.is-pressed{background-color:var(--g-glass-press);transform:scale(0.98)}
:is(a,button).g-panel:focus-visible,.g-panel.is-focus{outline:2px solid var(--g-focus);outline-offset:3px}

.g-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}
.g-head>:first-child{min-width:0}
.g-open{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:-10px -11px -10px 0;border-radius:50%;--g-fg:var(--t2);--g-fg-h:var(--t1)}
.g-open svg{width:15px;height:15px}
.g-open:empty::before{content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 16.5L16.5 7.5M9 7.5h7.5V15'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 16.5L16.5 7.5M9 7.5h7.5V15'/%3E%3C/svg%3E") center/15px 15px no-repeat}

.g-tile{position:relative;min-width:0;padding:18px 20px;border-radius:var(--rt);background-color:var(--tile);box-shadow:inset 0 0 0 1px var(--tline);color:var(--t1)}
/* a tile that opens or chooses is a block, except a stat tile, which keeps 3.5's grid: :where() leaves this rule its old
   weight, so a page rule on a linked tile wins as before, and a.g-tile.g-stat or button.g-tile.g-stat needs no page rule of its own */
:is(a,button).g-tile:where(:not(.g-stat)){display:block}
:is(a,button).g-tile{text-align:left;--g-bg:var(--tile);--g-edge:inset 0 0 0 1px var(--tline);--g-bg-h:rgba(255,255,255,0.075);--g-bg-p:rgba(255,255,255,0.10);--g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line)}

/* data states on any panel or tile: .g-data holds the figures and charts; .g-empty, .g-fail and .g-behind show only in
   their state, so a page writes all four once and the state class chooses. :root in front outweighs any one part
   class, so a part that sets its own display (a .g-status chip that is also .g-behind) still hides out of its state */
:root :is(.g-empty,.g-fail,.g-behind){display:none}
:root .is-empty .g-empty{display:flex}
:root :is(.is-empty,.is-failed) .g-data{display:none}
:root .is-failed .g-fail{display:block}
:root .is-behind .g-behind{display:inline-flex}
.g-empty{flex-direction:column;align-items:flex-start;gap:12px;padding:6px 0 2px;font-size:14px;line-height:1.45;color:var(--t2)}
.g-empty svg{max-width:100%;height:auto}
/* failed (G9): no figure and no maroon (maroon says he must act; a failed read needs nothing from him, the team reads
   again). The panel keeps its glass; inside .g-fail the page puts the amber triangle beside one plain sentence
   (.g-fail-line: what we could not read, since when, that the team is on it) and the chart's shape in pencil */
.g-fail{padding:0;background:none;box-shadow:none;font-size:14px;line-height:1.45;color:var(--t1)}
.g-fail .g-cap{display:block;margin-top:2px}
.g-fail-line{display:flex;align-items:flex-start;gap:10px;min-width:0;font-size:14px;line-height:1.45;color:var(--t1)}
.g-fail-line>:is(.g-sig-warn,.g-sig-alert){margin-top:1px}
/* loading: still blocks in the tile face where the figures and the chart go; the head stays; nothing shimmers. The delta
   and the caption beside a blocked figure wait with it */
.is-loading :is(.g-fig,.g-stat-fig,.fig),.is-loading :is(.g-fig,.g-stat-fig,.fig) *{color:transparent;border-radius:8px}
.is-loading :is(.g-fig,.g-stat-fig,.fig){background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline);min-width:2.2em;display:inline-block}
.is-loading .g-data :is(.g-up,.g-cap){visibility:hidden}
/* Loading: the chart's place is a still block. The chart itself is hidden (visibility), so the half-drawn host under the
   block takes no touch, no hover, no focus and says nothing to a screen reader; the block is its ::before, which takes
   no pointer either (a pseudo-element's hit would land on the host) */
.is-loading :is(.chart,.g-chart){visibility:hidden}
.is-loading :is(.chart,.g-chart)::before{content:"";position:absolute;inset:0;z-index:1;visibility:visible;pointer-events:none;border-radius:12px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline)}
/* Loading says nothing yet (kit pass 4, item 1; Card states' review): only the titles, the head's caption and the inert
   period key show. Every status chip and every axis word inside a loading panel or tile waits, hidden by visibility so
   its place holds and nothing moves when the figures arrive: the kit's .g-axis and .axis-row, and a chart's .gc-axis
   and .gc-vaxis drawn outside a .chart host. A page no longer leaves them out by hand */
.is-loading :is(.g-status,.g-axis,.axis-row,.gc-axis,.gc-vaxis){visibility:hidden}
/* updating (a period tap): the panel's own figures dim to t2 for a moment, then count to the new ones; K07: their
   change chip (its words and its up arrow) dims with them, as in Behind */
.is-updating :is(.g-fig,.g-stat-fig,.fig,.g-up){color:var(--t2)}
.is-updating .g-up::before{background:var(--t2)}
/* behind (the guide's section 6): the figures stay, dimmed to t2 with their delta; the amber .g-behind chip names their
   day ("Sunday's figures") or, the same day, the time ("Read at 06:10"); the tool's last answer sits at the foot */
.is-behind :is(.g-fig,.g-stat-fig,.fig,.g-up){color:var(--t2)}
.is-behind .g-up::before{background:var(--t2)}
/* 1.1, the stale rule: green is said only of fresh figures. While a panel, a sheet's view or the part itself is behind,
   updating or loading, every green mark in it (the tick signal, a green chip and its tick, a stage ring's done ring and
   tick) greys to t2 with the figures, and the sorted row falls back to the tile face. Amber (the behind chip) is
   untouched. A page sets the state class on the panel or the view whose reads are behind or refreshing */
:is(.is-behind,.is-updating,.is-loading) :is(.g-sorted,.g-sig-ok,.g-status-green,.gc-stage),
:is(.g-sorted,.g-status-green):is(.is-behind,.is-updating,.is-loading){--g-green:var(--t2);--green:var(--t2)}
:is(.is-behind,.is-updating,.is-loading) .g-sorted,.g-sorted:is(.is-behind,.is-updating,.is-loading){background-color:var(--tile);box-shadow:inset 0 0 0 1px var(--tline)}
:is(.is-behind,.is-updating,.is-loading) .g-status-green,.g-status-green:is(.is-behind,.is-updating,.is-loading){box-shadow:inset 0 0 0 1px rgba(154,156,150,0.5)}

/* ---------- 3.4 figure chips ---------- */
.g-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
/* a chip keeps its own width, so a row that wraps (24 wholesale accounts, 186 subscribers, 2 shops wrap 2 + 1 at 440px
   on a desk and at 358px on a phone) never stretches a lone chip across the row */
.g-chip{
  flex:0 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 16px;border-radius:22px;
  background-color:var(--tile);box-shadow:inset 0 0 0 1px var(--tline);
  font-size:14.5px;line-height:1;font-weight:300;color:var(--t2);white-space:nowrap;
}
.g-chip :is(b,strong,.g-n){font-weight:300;color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1}
:is(a,button).g-chip{--g-bg:var(--tile);--g-edge:inset 0 0 0 1px var(--tline);--g-fg:var(--t2);--g-bg-h:rgba(255,255,255,0.075);--g-bg-p:rgba(255,255,255,0.10);--g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line)}
/* a linked chip (a.g-chip) is 38px on a phone, so to a finger and under 900 a 44px box rides on ::after (3px each way at
   38, nothing at 44), as Home's .hm-biz chips first did; a narrow chip ("3") is 44px across too */
@media (pointer:coarse),(max-width:899px){a.g-chip::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}}
:where(.g-phone) a.g-chip::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
/* a chip that is a button (it opens a sheet or chooses in place) takes the same 44px box when it asks for it with
   .g-chip-hit (kit pass 4, item 3). Opt-in, so the pages that draw button chips today (Insights, Acts, and Report and
   Your shops with their own boxes) are unchanged until each swaps to it */
@media (pointer:coarse),(max-width:899px){button.g-chip.g-chip-hit::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}}
:where(.g-phone) button.g-chip.g-chip-hit::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}

/* ---------- 3.5 stat tile: a signal, a short label, a large figure at the right ---------- */
.g-stat{
  position:relative;flex:1 1 0;min-width:0;min-height:108px;padding:18px 20px;border-radius:var(--rt);
  background-color:var(--tile);box-shadow:inset 0 0 0 1px var(--tline);
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;grid-template-areas:"sig ." "label fig";
  column-gap:10px;align-items:last baseline;
}
.g-stat>:is(.g-sig-ok,.g-sig-warn,.g-sig-alert,.g-badge,.g-dot){grid-area:sig;align-self:start}
.g-stat-label{grid-area:label;max-width:118px;font-size:14px;line-height:1.3;font-weight:300;color:var(--t1)}
.g-stat-fig{grid-area:fig;font-family:var(--g-font);font-size:42px;font-weight:300;line-height:1;letter-spacing:-0.03em;color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1;white-space:nowrap}
.g-pair{display:flex;gap:10px;min-width:0}
/* a stat tile that chooses the list under it (Money's Owed to you and Bills to pay on a phone) is a button.g-tile.g-stat
   carrying aria-pressed, and 3.2 draws its states: hover lifts the tile 4%, a press settles it to 98% on a lighter face,
   focus rings it, and the chosen one (aria-pressed="true") sits on the soft grey key with the key's hairline, never
   white. As on every chosen key, hover leaves the chosen face as it is; a press still settles it. 3.26 steps its grey
   words up. Here the button's own border, margin and type go, so it draws exactly as a.g-tile.g-stat, and it fills its cell. :where() gives the rule no weight, so a page's width still wins */
:where(button.g-tile.g-stat){width:100%;margin:0;border:0;font:inherit}
/* a stat tile's Empty and Failed (kit pass 4, item 5). The tile writes its .g-empty or .g-fail as a direct child, beside
   the label and the figure, and its state class chooses, as on a panel. In the state the figure and the signal go
   (exact or absent; Empty has no mark), the words take the signal's place at the top in 13px and the label stays at the
   foot, so the tile keeps its 108px and its neighbour's height. Failed's .g-fail holds the .g-fail-line: the amber
   triangle and one short sentence, which runs on under the triangle so a narrow tile never squeezes it to a word a line. Keyed on the child, so a tile that answers its state in its own words is unchanged */
.g-stat:is(.is-empty:has(>.g-empty),.is-failed:has(>.g-fail)){grid-template-areas:"state" "label";grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;row-gap:10px;align-items:start}
.g-stat:is(.is-empty:has(>.g-empty),.is-failed:has(>.g-fail))>:is(.g-stat-fig,.g-sig-ok,.g-sig-warn,.g-sig-alert,.g-badge,.g-dot){display:none}
.g-stat:is(.is-empty:has(>.g-empty),.is-failed:has(>.g-fail))>.g-stat-label{align-self:end;max-width:none}
.g-stat>:is(.g-empty,.g-fail){grid-area:state;align-self:start;min-width:0;padding:0;font-size:13px;line-height:1.35}
.g-stat>.g-empty{gap:0;color:var(--t2)}
.g-stat>.g-fail .g-fail-line{display:block;font-size:13px;line-height:1.35}
.g-stat>.g-fail .g-fail-line>:is(.g-sig-warn,.g-sig-alert){margin:-3px 7px 0 0;vertical-align:middle}

/* ---------- 3.6 signals: say status at a glance, always beside words that say it too ---------- */
.g-sig-ok,.g-sig-warn,.g-sig-alert{display:inline-block;flex:none;width:18px;height:18px;vertical-align:middle}
.g-sig-ok{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 9.2l2.4 2.4 4.6-4.9' fill='none' stroke='%230F1F15' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat,
    radial-gradient(circle at 50% 50%,var(--green) 7.6px,rgba(79,199,126,0) 8.1px);
}
.g-sig-warn,.g-sig-alert{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 1.6L16.7 15.1Q17.2 16 16.1 16H1.9Q0.8 16 1.3 15.1Z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 1.6L16.7 15.1Q17.2 16 16.1 16H1.9Q0.8 16 1.3 15.1Z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}
.g-sig-warn{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 6.4v4.2' stroke='%232B1D08' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='13.1' r='0.95' fill='%232B1D08'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--amber)}
.g-sig-alert{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 6.4v4.2' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='13.1' r='0.95' fill='%23fff'/%3E%3C/svg%3E") center/18px 18px no-repeat,var(--g-red)}
.g-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--g-red);color:#FFFFFF;font:500 11px/1 var(--g-font);letter-spacing:0;font-feature-settings:"tnum" 1,"cv11" 1;
}
.g-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--amber);vertical-align:middle}

/* ---------- 3.7 status chips: outlined, never filled ---------- */
.g-status{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px;flex:none;
  font:500 12px/1 var(--g-font);letter-spacing:0;font-feature-settings:"tnum" 1,"cv11" 1;white-space:nowrap;
  color:var(--t2);box-shadow:inset 0 0 0 1px rgba(154,156,150,0.5);
}
.g-status-grey{color:var(--t2);box-shadow:inset 0 0 0 1px rgba(154,156,150,0.5)}
.g-status-amber{color:var(--amber);box-shadow:inset 0 0 0 1px rgba(226,164,71,0.5)}
.g-status-green{color:var(--green);box-shadow:inset 0 0 0 1px rgba(79,199,126,0.5)}
/* the dashed chip (kit pass 4, item 4): "Being checked", or a figure that is a guess. A 1px dashed border in the second
   ink, its words t2, no inset edge; it outweighs a colour class, so .g-status-grey.g-status-dashed draws dashed. The
   small chip: 22px tall, 9px each side, for a chip inside a row (a bill, a coffee, a planned cost); 12px words as
   before. The two combine (Packaging's 22px dashed "Being checked") */
.g-status.g-status-dashed{box-shadow:none;border:1px dashed var(--ink-2);color:var(--t2)}
.g-status.g-status-small{height:22px;padding:0 9px}
/* 1.1: a green chip leads with a small tick, so a green chip and an amber chip differ by shape as well as word (its
   words stay the signal: 7.84:1). A page that wants a green chip without one is asking for a different part */
.g-status-green::before{
  content:"";flex:none;width:11px;height:11px;margin-left:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.1'/%3E%3C/svg%3E") center/11px 11px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.1'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}

/* ---------- 3.8 needs you: sections, maroon rows that open to a thin-line list and the team's suggestion ---------- */
.g-needs{padding:20px 18px 18px}
.g-needs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 14px}
.g-needs-sec{display:flex;align-items:center;gap:9px;margin:0 4px 8px;font-size:15px;line-height:1.3;font-weight:300;color:var(--t1)}
.g-needs-sec>svg{flex:none;width:17px;height:17px;color:var(--t2)}
.g-needs-count{color:var(--t2)}
.g-row+.g-needs-sec{margin-top:16px}
.g-row+.g-row{margin-top:8px}

/* words on the maroon row are t1 and t2 only (1.1): a t3 word steps up to t2 (it changes no element today; a guard) */
.g-row{position:relative;min-width:0;border-radius:var(--rt);background-color:var(--maroon);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);color:var(--t1);--t3:var(--t2)}
.g-row-head{display:flex;align-items:flex-start;gap:11px;width:100%;padding:13px 14px;border-radius:inherit;text-align:left;color:var(--t1);cursor:pointer;-webkit-tap-highlight-color:transparent}
div.g-row-head{cursor:default}
.g-row-head>:is(.g-badge,.g-sig-ok,.g-sig-warn,.g-sig-alert){margin-top:1px}
.g-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.g-row-title{font-size:15px;line-height:1.35;font-weight:400;letter-spacing:-0.01em;color:var(--t1);text-wrap:pretty}
.g-row-sub{font-size:12.5px;line-height:1.35;color:var(--t2)}
@media (hover:hover) and (pointer:fine){.g-row:has(>button.g-row-head:hover){background-color:rgba(134,63,63,0.347)}}
.g-row.is-hover{background-color:rgba(134,63,63,0.347)}           /* the maroon lifted 4% white */
.g-row:has(>button.g-row-head:active),.g-row.is-pressed{background-color:rgba(144,79,79,0.368)}
.g-row:not(.is-open):has(>button.g-row-head:active),.g-row.is-pressed:not(.is-open){transform:scale(0.98)}
.g-row-head:focus-visible,.g-row.is-focus>.g-row-head{outline:2px solid var(--g-focus);outline-offset:2px}
.g-chev{flex:none;display:inline-block;width:16px;height:16px;margin-top:2px;color:var(--t2)}
span.g-chev:empty,i.g-chev:empty{background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.g-row.is-open>.g-row-head .g-chev,.g-row-head[aria-expanded="true"] .g-chev{transform:rotate(180deg)}
.g-row-body{display:grid;grid-template-rows:0fr;visibility:hidden}
.g-row.is-open>.g-row-body,.g-row:has(>.g-row-head[aria-expanded="true"])>.g-row-body{grid-template-rows:1fr;visibility:visible}
.g-row-in{min-height:0;overflow:hidden}
.g-row-in>*{margin-left:14px;margin-right:14px;opacity:0}
.g-row.is-open .g-row-in>*,.g-row:has(>.g-row-head[aria-expanded="true"]) .g-row-in>*{opacity:1}
.g-row-in>:first-child{margin-top:-1px}
.g-row-in>:last-child{margin-bottom:14px}
.g-row-in>.g-thin{margin-left:43px}
.g-row-in :focus-visible{outline-offset:-2px}            /* the body clips, so rings sit inside */

.g-thin{display:flex;flex-direction:column;gap:8px;min-width:0}
.g-thin>*{display:flex;flex-direction:column;gap:2px;padding:1px 0 1px 12px;border-left:1px solid rgba(255,255,255,0.22);text-align:left;color:var(--t1)}
.g-thin-name{font-size:14px;line-height:1.3;font-weight:400;color:var(--t1)}
.g-thin-sub{font-size:12.5px;line-height:1.3;color:var(--t2)}
.g-thin>:is(a,button){cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){.g-thin>:is(a,button):hover{border-left-color:rgba(255,255,255,0.55)}}
.g-thin>.is-hover{border-left-color:rgba(255,255,255,0.55)}

.g-suggest{display:flex;gap:12px;min-width:0;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.07)}
.g-suggest>:not(.g-orbtile){flex:1;min-width:0}
.g-suggest-label{font-size:12.5px;line-height:1.3;color:var(--t2)}
.g-suggest-text{margin-top:3px;font-size:14px;line-height:1.45;font-weight:400;color:var(--t1)}
.g-suggest :is(.g-pill,.g-pill-strong){margin-top:10px}
.g-orbtile{
  flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(180deg,#2B2D2A,#191A18);box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),0 0 0 1px rgba(255,255,255,0.07);
}
.g-orbtile canvas,.g-orbtile svg{display:block;width:26px;height:26px}

/* the needs panel's foot (Home 3a): .g-needs-more, a line that opens the bell's sheet ("Six more need a look, none
   urgent ›"), and the freshness line beside it. .g-needs-foot owns the 10px under the last row, so the line's target can
   reach up 9px and always stops 1px short of the row above: an empty ::after, 36px tall at a desk and 44px on a phone
   (3.27), where it grows downward; a freshness line that wraps under it sits clear of it (12px, 20px on a phone).
   DOM: div.g-needs-foot > button.g-needs-more[type=button][aria-haspopup=dialog], span.g-fresh */
.g-needs-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;min-width:0;margin:10px 4px 0}
.g-needs-more{position:relative;min-width:0;padding:0;border:0;background:none;font-size:13.5px;line-height:1.3;font-weight:400;color:var(--t2);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 150ms var(--ease)}
.g-needs-more::after{content:"";position:absolute;left:-8px;right:-8px;top:-9px;bottom:-10px}
@media (hover:hover) and (pointer:fine){.g-needs-more:hover{color:var(--t1)}}
.g-needs-more.is-hover{color:var(--t1)}
.g-needs-more:is(:focus-visible,.is-focus){outline:2px solid var(--g-focus);outline-offset:3px}

/* ---------- 3.8b the sorted row: green glass, once in the dashboard (COLOUR-1.1 section 3) ----------
   The twin of the maroon row: maroon where he must act, this one row where his team's flags were settled. Its one place
   is the head of What needs you's Sorted tab (the bell's sheet), never more than one on a screen; never on a figure, a
   chart, a tile, a done mark, "Nothing needs you" or stale data. A statement he rests on, not a control: no hover, no
   press, no focus, no chevron. Its own part, not a .g-row modifier, so it never takes maroon's hover and press faces or
   the needs rows' spacing. Face --g-sorted at 13% (fixed), maroon's 5% hairline and one lit top edge at 16% green; no
   gradient, glow, sheen or blur. Words t1 and t2 only (a t3 word steps up to t2). Lead mark: the green tick .g-sig-ok
   where maroon has its red count. Stale (3.3): the tile face and a grey tick.
   DOM: div.g-sorted > div.g-row-head > span.g-sig-ok[role=img][aria-label="Sorted"] + span.g-row-text > .g-row-title
   + .g-row-sub */
.g-sorted{
  position:relative;min-width:0;border-radius:var(--rt);color:var(--t1);
  background-color:var(--g-sorted);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05),inset 0 1px 0 0 rgba(79,199,126,0.16);
  --green:var(--g-green);--t3:var(--t2);
}
.g-sorted>.g-row-head{cursor:default}

/* ---------- 3.9 the place rail (900px and up), then the desk head: Find, icon buttons, the account face ----------
   The rail (Chad, 31 Oct: "everyone knows the icons, icons are much more efficient"; it replaces the labelled place pills
   of 29 Oct on a desk; the phone's place bar is unchanged). Copied value for value from the frame's .dm-rail
   (src/frame/frame.css, buildRail in frame.js), which is live and reviewed: when the two disagree, the frame is right
   and this block is the bug. Small icons down the left, 64px plus the left safe area, sticky at the full height, its
   edge a hairline on the right. The IntegrateAI mark on top (.tile.s, 36px, the still glyph, not an orb; its centre
   32px down), then the seven places: 18px icons at stroke 1.6 on 40px round keys 4px apart (the first 63 to 103px
   down), no face at rest, the place he is in on the soft grey key; Your team under a 20px hairline. Each key names
   itself in .g-rail-tip, the hover chip's look: on hover with a fine pointer and on keyboard focus, never on touch; a
   press or Escape puts it away (.g-tip-off) until focus moves or the pointer leaves (glass.js wires it). The rail never
   scrolls on its own (overflow would cut the chips): a short window drops the mark, then tightens the keys, then lets
   the rail scroll with the page. Hidden under 900px (the place bar takes over) and in print; a live one where data-chrome is none (a .g-static
   drawing stays: the kit page is itself such a page).
   .g-static draws one in place (a specimen): in flow, its own height, never pinned to the window. */
.g-rail{display:none}
@media (min-width:900px){
  .g-rail{position:sticky;top:0;z-index:46;flex:none;display:flex;flex-direction:column;align-items:center;width:calc(64px + env(safe-area-inset-left,0px));height:100vh;height:100dvh;padding:14px 0 16px env(safe-area-inset-left,0px);box-shadow:inset -1px 0 0 var(--hair)}
  .g-static.g-rail{position:relative;top:auto;z-index:auto;height:auto}
}
.g-rail-list{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:13px}
.g-rail-sep{flex:none;width:20px;height:1px;margin:4px 0;background:var(--hair)}
.g-place{
  display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border-radius:50%;
  --g-fg:var(--t2);--g-bg-h:rgba(255,255,255,0.04);--g-bg-p:rgba(255,255,255,0.07);--g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line);
}
.g-place>svg,.g-place>i>svg{flex:none;width:18px;height:18px}
.g-place>i{display:flex}   /* the kit's <i data-ic> holding the svg, as a pill may carry one */
.g-rail-tip{position:absolute;left:calc(100% + 12px);top:50%;padding:7px 10px;border-radius:11px;background:var(--float);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10),0 10px 24px -10px rgba(0,0,0,0.75);color:var(--t1);font-size:12px;line-height:1.3;font-weight:400;letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-4px,-50%);transition:opacity 140ms var(--ease),transform 140ms var(--ease),visibility 140ms}
.g-place:focus-visible>.g-rail-tip,.g-static.g-rail-tip{opacity:1;visibility:visible;transform:translate(0,-50%)}
@media (hover:hover) and (pointer:fine){.g-place:hover>.g-rail-tip{opacity:1;visibility:visible;transform:translate(0,-50%)}}
.g-place.g-tip-off>.g-rail-tip{opacity:0;visibility:hidden}
/* a short window (a big phone held sideways, a squeezed desk window): the mark goes, then the keys tighten, then the
   rail scrolls with the page. The 44px touch box goes too (3.27, after the touch list): at gap 0 it would cover the next key */
@media (min-width:900px) and (max-height:443px){
  .g-rail-mark{display:none}
  .g-rail{padding-top:8px;padding-bottom:8px}
  .g-rail-list{margin-top:0;gap:0}
}
@media (min-width:900px) and (max-height:363px){.g-place{width:36px;height:36px}}
@media (min-width:900px) and (max-height:323px){.g-rail{position:relative;height:auto}}
:root[data-chrome="none"] .g-rail:not(.g-static){display:none!important}
@media print{.g-rail{display:none!important}}

/* the desk head */
.g-find{
  display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:236px;height:40px;padding:0 14px 0 18px;border-radius:20px;
  font-size:14px;line-height:1;font-weight:300;white-space:nowrap;text-align:left;
  --g-bg:rgba(255,255,255,0.045);--g-edge:inset 0 0 0 1px var(--hair);--g-fg:var(--t2);--g-fg-h:var(--t1);
  --g-bg-h:rgba(255,255,255,0.085);--g-bg-p:rgba(255,255,255,0.11);--g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line);
}
.g-find svg{flex:none;width:17px;height:17px}
.g-find:not(:has(svg))::before{content:"";order:1;flex:none;width:17px;height:17px;background:currentColor;   /* ::after is the touch box */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") center/17px 17px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") center/17px 17px no-repeat}
.g-ibtn{
  display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;
  --g-bg:rgba(255,255,255,0.045);--g-edge:inset 0 0 0 1px var(--hair);--g-bg-h:rgba(255,255,255,0.085);--g-bg-p:rgba(255,255,255,0.11);
  --g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line);
}
.g-ibtn svg{width:18px;height:18px}
.g-ibtn>.g-badge{position:absolute;top:-4px;right:-4px;box-shadow:0 0 0 2px var(--room)}
.g-avatar{
  display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;
  font-size:15px;line-height:1;font-weight:400;
  --g-bg:var(--key);--g-edge:inset 0 0 0 1px rgba(255,255,255,0.08);--g-bg-h:rgba(255,255,255,0.12);--g-bg-p:rgba(255,255,255,0.15);
  --g-bg-on:rgba(255,255,255,0.12);--g-edge-on:inset 0 0 0 1px rgba(255,255,255,0.16);
}

/* ---------- 3.10 tab pills and segments: a sliding soft-grey key (IA.ui.tabs adds .bar, IA.ui.seg adds .thumb) ---------- */
.g-tabs,.tabs{position:relative;display:flex;align-items:center;gap:2px;min-width:0;border-bottom:0}
.g-tab,.tabs button{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;height:32px;padding:0 14px;border-radius:16px;
  font-size:13.5px;line-height:1;font-weight:400;letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--t2);
}
.g-tab{--g-fg:var(--t2);--g-bg-h:rgba(255,255,255,0.04);--g-bg-p:rgba(255,255,255,0.07);--g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line)}
.tabs button[aria-selected="true"]{color:var(--t1)}
@media (hover:hover) and (pointer:fine){.tabs button:hover{color:var(--t1)}}
.tabs:not(:has(>.bar)) button[aria-selected="true"]{background:var(--key);box-shadow:inset 0 0 0 1px var(--key-line)}
.tabs button .n,.g-tab .n{font:400 13px/1 var(--g-font);color:var(--t2);font-feature-settings:"tnum" 1,"cv11" 1}
.g-tabs .bar,.tabs .bar{position:absolute;z-index:0;left:0;top:50%;bottom:auto;height:32px;margin-top:-16px;border-radius:16px;background:var(--key);box-shadow:inset 0 0 0 1px var(--key-line)}
.g-tabs:has(>.bar)>.g-tab{--g-bg-on:transparent;--g-edge-on:none}

.g-seg,.seg{position:relative;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:19px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline)}
.g-seg button,.seg button{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-width:32px;padding:0 14px;border-radius:16px;
  font:400 13px/1 var(--g-font);letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--t2);cursor:pointer;-webkit-tap-highlight-color:transparent;font-feature-settings:"cv11" 1
}
.g-seg.icons button,.seg.icons button{width:32px;padding:0}
@media (hover:hover) and (pointer:fine){.g-seg button:hover,.seg button:hover{color:var(--t1)}}
.g-seg button.is-hover,.seg button.is-hover{color:var(--t1)}
:is(.g-seg,.seg) button:is([aria-checked="true"],[aria-pressed="true"],[aria-selected="true"],.is-current){color:var(--t1)}
:is(.g-seg,.seg) button:is(:active,.is-pressed){transform:scale(0.98)}
:is(.g-seg,.seg) button:is(:focus-visible,.is-focus){outline:2px solid var(--g-focus);outline-offset:-1px}
:is(.g-seg,.seg) button:is([disabled],[aria-disabled="true"]){opacity:0.4;pointer-events:none}
.g-seg .thumb,.seg .thumb{position:absolute;z-index:0;top:3px;left:0;height:32px;border-radius:16px;background:var(--key);box-shadow:inset 0 0 0 1px var(--key-line)}
:is(.g-seg,.seg):not(.has-thumb) button:is([aria-checked="true"],[aria-pressed="true"],[aria-selected="true"],.is-current){background:var(--key);box-shadow:inset 0 0 0 1px var(--key-line)}

/* ---------- 3.11 pills: the only kind of button. Never white, never filled with a colour ---------- */
.g-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;height:32px;padding:0 14px;border-radius:16px;
  font:500 13px/1 var(--g-font);letter-spacing:0;font-feature-settings:"cv11" 1;white-space:nowrap;
  --g-bg:var(--key);--g-edge:inset 0 0 0 1px rgba(255,255,255,0.10);--g-bg-h:rgba(255,255,255,0.12);--g-bg-p:rgba(255,255,255,0.15);
  --g-bg-on:rgba(255,255,255,0.12);--g-edge-on:inset 0 0 0 1px rgba(255,255,255,0.18);
}
.g-pill>:is(svg,[data-ic]):first-child{margin-left:-2px}           /* an svg, or the kit's <i data-ic> that holds one */
.g-pill svg{flex:none;width:14px;height:14px}
.g-pill.is-done>:is(svg,[data-ic]){color:var(--green)}
.g-pill-strong{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;height:40px;padding:0 18px;border-radius:20px;
  font:500 14px/1 var(--g-font);letter-spacing:0;font-feature-settings:"cv11" 1;white-space:nowrap;
  --g-bg:var(--g-strong);--g-edge:inset 0 0 0 1px rgba(255,255,255,0.12);--g-bg-h:rgba(255,255,255,0.18);--g-bg-p:rgba(255,255,255,0.22);
  --g-edge-on:inset 0 0 0 1px rgba(255,255,255,0.16);
}
.g-pill-strong svg{flex:none;width:16px;height:16px}

/* ---------- 3.12 switch: off is a tile face, on is green with a dark knob ---------- */
.g-switch{
  position:relative;flex:none;display:inline-block;width:44px;height:26px;padding:0;border:0;border-radius:13px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background-color:var(--tile);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);
}
.g-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--t2);box-shadow:0 1px 3px rgba(0,0,0,0.45)}
@media (hover:hover) and (pointer:fine){.g-switch:hover{background-color:rgba(255,255,255,0.075)}}
.g-switch.is-hover{background-color:rgba(255,255,255,0.075)}
.g-switch:is([aria-checked="true"],.is-current){background-color:var(--green);box-shadow:none}
.g-switch:is([aria-checked="true"],.is-current)::after{transform:translateX(18px);background:var(--room);box-shadow:none}
.g-switch:is(:active,.is-pressed){transform:scale(0.98)}
.g-switch:is(:focus-visible,.is-focus){outline:2px solid var(--g-focus);outline-offset:3px}
.g-switch:is([disabled],[aria-disabled="true"]){opacity:0.4;pointer-events:none}

/* ---------- 3.13 field: a tile face, 44px, a hairline, the focus ring; its label above in t2 ---------- */
.g-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.g-field-label{font-size:12.5px;line-height:1.3;color:var(--t2)}
.g-field-note{font-size:12.5px;line-height:1.4;color:var(--t2)}
.g-input,.g-field :is(input,textarea,select){
  width:100%;min-width:0;height:44px;padding:0 14px;border:0;border-radius:14px;appearance:none;-webkit-appearance:none;
  background-color:var(--tile);box-shadow:inset 0 0 0 1px var(--hair);
  font:400 15px/1.2 var(--g-font);font-feature-settings:"cv11" 1;color:var(--t1);
}
textarea.g-input,.g-field textarea{height:auto;min-height:88px;padding:12px 14px;line-height:1.45;resize:vertical}
.g-input::placeholder,.g-field :is(input,textarea)::placeholder{color:var(--t3);opacity:1}
@media (hover:hover) and (pointer:fine){.g-input:hover,.g-field :is(input,textarea,select):hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12)}}
.g-input.is-hover,.g-field.is-hover :is(input,textarea,select){box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12)}
.g-input:is(:focus-visible,.is-focus),.g-field :is(input,textarea,select):focus-visible,.g-field.is-focus :is(input,textarea,select){outline:2px solid var(--g-focus);outline-offset:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16)}
.g-input:is([disabled],[aria-disabled="true"]),.g-field :is(input,textarea,select):disabled{opacity:0.4;cursor:default}
.g-input[aria-invalid="true"],.g-field :is(input,textarea,select)[aria-invalid="true"]{box-shadow:inset 0 0 0 1px rgba(226,164,71,0.6)}
.g-field:has([aria-invalid="true"]) .g-field-note{color:var(--amber)}

/* ---------- 3.14 the hover chip: IA.tip's .tip. One line, value first, then the label ---------- */
.tip{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:5px;min-width:0;max-width:300px;padding:7px 10px;border-radius:11px;
  background:var(--float);color:var(--t1);font:400 12px/1.3 var(--g-font);letter-spacing:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10),0 10px 24px -10px rgba(0,0,0,0.75);
  transform:translateY(4px);font-feature-settings:"cv11" 1
}
.tip.on{transform:none}
.tip .tv{font:400 12px/1.3 var(--g-font);letter-spacing:0;color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1}
.tip .tl{margin:0;font-size:12px;line-height:1.3;color:var(--t2)}
.tip .tv+.tl::before{content:"\00B7\00A0"}
/* a label that wraps under the value takes its own line and drops the dot, so no line of the chip starts with "· "
   (kit pass 4, item 2): IA.tip.show marks the chip .g-tip-wrap when the label's first line sits below the value's */
.tip.g-tip-wrap .tv+.tl{flex-basis:100%}
.tip.g-tip-wrap .tv+.tl::before{content:none}
.tip .tr{flex:0 0 100%;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;font-size:12px;line-height:1.3;color:var(--t2)}
.tip .tr b{font:400 12px/1.3 var(--g-font);color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1}
.tip .tr i{width:12px;height:1.5px;margin-right:7px;border-radius:1px;background:var(--ink)}
.tip .tr i.prev{background:var(--ink-prev)}
.tip .tr i.two{background:var(--ink-2)}
.tip .tr i.amber,:root:root .tip .tr i.amber{background:var(--amber)}

/* ---------- 3.15 sheet: blurred glass; from the right on a desk (480 or 720 wide), from the bottom on a phone ---------- */
.g-scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,0.6);opacity:0;pointer-events:none}   /* dims to 40%, no blur */
.g-scrim:is(.is-open,.on){opacity:1;pointer-events:auto}
.g-sheet{
  position:fixed;z-index:71;top:12px;right:12px;bottom:12px;width:min(480px,calc(100vw - 24px));
  display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r);color:var(--t1);
  background-color:var(--g-sheet);background-image:var(--sheen);
  -webkit-backdrop-filter:blur(26px) saturate(1.15);backdrop-filter:blur(26px) saturate(1.15);
  box-shadow:inset 0 0 0 1px var(--hair),0 40px 80px -30px rgba(0,0,0,0.8);
  opacity:0;transform:translateX(24px);visibility:hidden;
}
.g-sheet:is(.is-open,.on){opacity:1;transform:none;visibility:visible}
.g-sheet:is(.is-wide,.g-sheet-wide,.wide,[data-wide]){width:min(720px,calc(100vw - 24px))}
/* glass.js focuses the sheet itself as it opens (tabindex -1), so nothing inside it rings at once and Tab starts at its
   first control; the sheet as a whole never wears the ring, opened from the keyboard or not */
.g-sheet:is(:focus,:focus-visible){outline:none}
/* a sheet with another opened over it (glass.js marks it is-under): it sits back a step, a shade darker, and drops its
   blur, which the sheet on top covers anyway; so a stack never adds a blurred layer. Its face is solid, so a sheet under
   it never shows through, and it fades back (dimmed, as the page behind a sheet is) while the sheet on top arrives, so
   on a phone, where it still shows above a short sheet, it reads as behind */
.g-sheet.is-under{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:#181A17;filter:brightness(0.6);transform:translateX(-14px) scale(0.985)}
/* the sheet on top of a stack: its 88% face would let the sheet under it show faintly through, so it takes the same face
   made solid (as a lone sheet reads over the dimmed page) and drops its blur, which would show nothing. glass.js opens
   each sheet later in the body, so the top sheet is a later sibling of the one under it */
.g-sheet.is-under~.g-sheet:not(.is-under){background-color:var(--g-sheet-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
/* the centred sheet (.is-centre; Chad, 6 Nov: Ask "bang in the center, rather than to the side"): on a desk the assistant
   sheet is a conversation in the middle of the screen, an article column wide (680px, 920px opened wide), as tall as the
   window allows up to 880px, and the page behind it dims and softly blurs, so it recedes but is not gone. It rises a little
   and grows from 98% as it fades in, and fades out with a smaller sink. A sheet opened from it (a draft, a record) comes
   up centred over it too, and the centred sheet steps back in place (no sideways shift). Under 900px it is the phone's
   sheet, unchanged. The only blurred scrim: the dimmed page behind a centred sheet (blur stays a floating layer's, G3) */
@media (min-width:900px){
  .g-sheet.is-centre,.g-sheet.is-centre~.g-sheet{inset:0;margin:auto;height:min(880px,calc(100vh - 64px));transform:translateY(10px) scale(0.98);transform-origin:50% 60%}
  .g-sheet.is-centre{width:min(680px,calc(100vw - 48px))}
  .g-sheet.is-centre:is(.is-wide,.g-sheet-wide,.wide,[data-wide]){width:min(920px,calc(100vw - 48px))}
  .g-sheet.is-centre~.g-sheet{width:min(720px,calc(100vw - 48px))}
  .g-sheet.is-centre:is(.is-wide,.g-sheet-wide)~.g-sheet{width:min(920px,calc(100vw - 48px))}   /* over Ask opened wide: as wide, so the one under never frames it */
  .g-sheet.is-centre:is(.is-open,.on),.g-sheet.is-centre~.g-sheet:is(.is-open,.on){transform:none}
  .g-sheet.is-centre.is-under{transform:scale(0.97)}
  /* a sheet the centred one was opened from (a record's "Ask about") recedes with the page: dimmed and softly blurred */
  .g-sheet.is-under:not(.is-centre):has(~.g-sheet.is-centre){filter:brightness(0.5) blur(8px)}
  body:has(>.g-sheet.is-centre)>.g-scrim{background:rgba(0,0,0,0.6);-webkit-backdrop-filter:blur(10px) saturate(0.9);backdrop-filter:blur(10px) saturate(0.9)}
}
.g-grab{display:none;flex:none;width:36px;height:5px;margin:8px auto 0;border-radius:3px;background:rgba(255,255,255,0.22)}
.g-sheet-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title close";align-items:center;column-gap:12px;padding:18px 16px 14px 24px}
.g-sheet-head:has(>.g-sheet-back){grid-template-areas:"back close" "title title";row-gap:10px}
.g-sheet-title{grid-area:title;margin:0;min-width:0;font-size:22px;line-height:1.2;font-weight:300;letter-spacing:-0.018em;color:var(--t1);overflow-wrap:break-word}
.g-sheet-back{
  grid-area:back;justify-self:start;display:inline-flex;align-items:center;gap:5px;height:32px;margin-left:-10px;padding:0 12px 0 8px;border-radius:16px;
  font-size:13px;line-height:1;font-weight:400;white-space:nowrap;
  --g-fg:var(--t2);--g-fg-h:var(--t1);--g-bg-h:rgba(255,255,255,0.05);--g-bg-p:rgba(255,255,255,0.08);
}
.g-sheet-back svg{flex:none;width:14px;height:14px}
.g-sheet-back:not(:has(svg))::before{content:"";flex:none;width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5L9 12l5.5 5.5'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5L9 12l5.5 5.5'/%3E%3C/svg%3E") center/14px 14px no-repeat}
.g-sheet-close{
  grid-area:close;align-self:start;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  --g-bg:rgba(255,255,255,0.045);--g-edge:inset 0 0 0 1px var(--hair);--g-bg-h:rgba(255,255,255,0.085);--g-bg-p:rgba(255,255,255,0.11);
}
.g-sheet-close svg{width:16px;height:16px}
.g-sheet-close:empty::before{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/16px 16px no-repeat}
.g-sheet-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 24px 24px}
.g-sheet-foot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 24px 18px;border-top:1px solid var(--hair)}
.g-sheet-foot:empty{display:none}
/* .g-static shows an overlay part (sheet, scrim, toast, hover chip) in place, for the specimen */
.g-static:is(.g-sheet,.g-toast,.tip,.g-scrim){position:relative;inset:auto;z-index:auto;opacity:1;visibility:visible;transform:none;pointer-events:auto}
.g-static.g-sheet{width:min(480px,100%);height:auto;max-height:none}
.g-static.g-sheet:is(.is-wide,.g-sheet-wide,.wide,[data-wide]){width:min(720px,100%)}
.g-static.g-toast{left:auto;bottom:auto;display:inline-flex}

/* ---------- 3.16 drawer: a row that opens in place; its closed row still carries the figure ---------- */
.g-drawer{position:relative;min-width:0;border-top:1px solid var(--grid)}
.g-drawer-head{
  display:flex;align-items:center;gap:12px;width:calc(100% + 24px);min-height:52px;margin:0 -12px;padding:10px 12px;border-radius:14px;
  text-align:left;color:var(--t1);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.g-drawer-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.35;font-weight:400;color:var(--t1)}
.g-drawer-fig{flex:none;font:400 15px/1 var(--g-font);color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1;white-space:nowrap}
.g-drawer-head .g-chev{margin-top:0}
@media (hover:hover) and (pointer:fine){.g-drawer-head:hover{background-color:var(--tile)}.g-drawer-head:hover .g-chev{color:var(--t1)}}
.g-drawer.is-hover>.g-drawer-head{background-color:var(--tile)}
.g-drawer-head:active,.g-drawer.is-pressed>.g-drawer-head{background-color:rgba(255,255,255,0.06);transform:scale(0.98)}
.g-drawer-head:focus-visible,.g-drawer.is-focus>.g-drawer-head{outline:2px solid var(--g-focus);outline-offset:0}
.g-drawer.is-open>.g-drawer-head .g-chev,.g-drawer-head[aria-expanded="true"] .g-chev{transform:rotate(180deg)}
.g-drawer-body{display:grid;grid-template-rows:0fr;visibility:hidden}
.g-drawer.is-open>.g-drawer-body,.g-drawer:has(>.g-drawer-head[aria-expanded="true"])>.g-drawer-body{grid-template-rows:1fr;visibility:visible}
.g-drawer-in{min-height:0;overflow:hidden}
.g-drawer-in>*{opacity:0}
.g-drawer.is-open .g-drawer-in>*,.g-drawer:has(>.g-drawer-head[aria-expanded="true"]) .g-drawer-in>*{opacity:1}
.g-drawer-in>:last-child{margin-bottom:14px}
.g-drawer-in :focus-visible{outline-offset:-2px}

/* ---------- 3.17 toast: a small glass pill above the bottom edge ---------- */
.g-toast{
  position:fixed;z-index:90;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 14px;border-radius:20px;white-space:nowrap;
  background:var(--float);color:var(--t1);font:400 13.5px/1 var(--g-font);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10),0 16px 32px -16px rgba(0,0,0,0.8);
  opacity:0;transform:translate(-50%,8px);pointer-events:none;font-feature-settings:"cv11" 1
}
.g-toast:is(.is-open,.on){opacity:1;transform:translate(-50%,0)}
.g-toast svg{flex:none;width:16px;height:16px;color:var(--green)}
/* a long one wraps by itself, 16px clear of each edge, and grows; one line stays the 40px pill. A fixed part's width
   otherwise stops at half the window (left:50%), so its width is its words. Drawn in place (.g-static) it stays as it is */
.g-toast:not(.g-static){width:max-content;max-width:calc(100% - 32px);height:auto;min-height:40px;padding-top:10px;padding-bottom:10px;white-space:normal}
.g-toast:not(.g-static) .g-toast-t{min-width:0;line-height:1.35;overflow-wrap:break-word}

/* ---------- 3.18 table: rows on a 5% rule, head in 11px t3, figures right and tabular ---------- */
.g-table{width:100%;border-collapse:collapse;border-spacing:0;font-feature-settings:"cv11" 1}
.g-table th{padding:0 0 7px;font:400 11px/1 var(--g-font);letter-spacing:0;color:var(--t3);text-align:left;vertical-align:bottom;white-space:nowrap;font-feature-settings:"cv11" 1}
.g-table td{padding:7px 0;border-top:1px solid var(--grid);font-size:13.5px;line-height:1.3;color:var(--t1);vertical-align:middle}
.g-table :is(th,td)+:is(th,td){padding-left:12px}
.g-table :is(.g-num,.num){text-align:right;white-space:nowrap;font-feature-settings:"tnum" 1,"cv11" 1}
.g-table .g-sub{color:var(--t2)}
.g-table .g-tickcell{width:1%;white-space:nowrap}
.g-table tr.is-link{cursor:pointer}
@media (hover:hover) and (pointer:fine){.g-table tr.is-link:hover td{background:rgba(255,255,255,0.025)}}
.g-table tr.is-hover td{background:rgba(255,255,255,0.025)}

/* ---------- 3.19 pencil: Coming next. A dashed 14% edge (3 4), no fill, a grey status chip, one plain line, no figure ---------- */
.g-pencil{
  position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px;border-radius:var(--r);color:var(--t1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='28' ry='28' fill='none' stroke='%23fff' stroke-opacity='0.14' stroke-width='2' stroke-dasharray='3 4'/%3E%3C/svg%3E") no-repeat;
}
.g-pencil-line{margin:0;max-width:52ch;font-size:14px;line-height:1.45;color:var(--t2)}

/* ---------- 3.20 freshness: "Updated 07:42" in t3; no dot when fresh, an amber dot when behind ---------- */
.g-fresh{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;line-height:1.3;color:var(--t3);font-feature-settings:"tnum" 1,"cv11" 1;white-space:nowrap}
.g-fresh::before{content:"";display:none;flex:none;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.g-fresh.is-behind::before,.is-behind .g-fresh::before{display:block}

/* ---------- 3.21 the phone place bar (under 900px) and the More sheet's list of places ---------- */
.g-placebar{
  display:none;align-items:stretch;gap:2px;height:64px;padding:6px;border-radius:32px;
  background-color:var(--g-bar);-webkit-backdrop-filter:blur(26px) saturate(1.15);backdrop-filter:blur(26px) saturate(1.15);
  box-shadow:inset 0 0 0 1px var(--hair),0 20px 40px -16px rgba(0,0,0,0.8);
}
.g-veil{display:none}
/* a place bar drawn in place (.g-static: the specimen, a design note, a phone picture) is a phone column wide,
   358px (a 390 phone inside its 16px gutters), or its container's width when narrower: never shrunk to its words,
   never past 358. A page that pins one with both insets (a phone picture: left and right 12px) sets max-width:none
   and the insets size it. In place it sits in the page's own layer (z-index auto), so it passes under a sticky
   head; only the real bar floats (40) */
.g-static.g-placebar{display:flex;position:relative;z-index:auto;width:-webkit-fill-available;width:-moz-available;width:stretch;max-width:min(358px,100%)}
.g-placebar>:is(a,button){
  flex:1 1 0;min-width:max-content;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:26px;
  font:500 11px/1 var(--g-font);letter-spacing:0;white-space:nowrap;
  --g-fg:var(--t2);--g-bg-h:rgba(255,255,255,0.04);--g-bg-p:rgba(255,255,255,0.07);--g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line);font-feature-settings:"cv11" 1
}
/* a key is never narrower than its label (min-width:max-content above, labels never run into each other) nor than 44px:
   this zero-height strut sets the floor, and its -4px cancels the column's gap, so the icon and label do not move */
.g-placebar>:is(a,button)::before{content:"";flex:none;width:44px;height:0;margin-bottom:-4px}
.g-placebar svg{flex:none;width:20px;height:20px}
.g-placebar .g-badge{position:absolute;top:3px;left:calc(50% + 5px);box-shadow:0 0 0 2px #1E201D}
.g-more{display:flex;flex-direction:column;gap:2px;min-width:0}
.g-more>:is(a,button){
  display:flex;align-items:center;gap:14px;width:calc(100% + 24px);min-height:56px;margin:0 -12px;padding:10px 12px;border-radius:16px;text-align:left;
  --g-bg-h:var(--tile);--g-bg-p:rgba(255,255,255,0.06);--g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line);
}
.g-more-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline);color:var(--t2)}
.g-more-ic svg{width:18px;height:18px}
.g-more-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.g-more-name{font-size:15px;line-height:1.3;font-weight:400;color:var(--t1)}
.g-more-line{font-size:12.5px;line-height:1.35;color:var(--t2);overflow-wrap:break-word}
.g-more-line .g-dot{margin-right:6px;vertical-align:1px}
.g-more .g-chev{margin-top:0;transform:rotate(-90deg)}
.g-more-sep{height:1px;margin:8px 0;background:var(--hair)}

/* ---------- 3.22 still loading blocks: no shimmer, nothing loops ---------- */
.g-skel,.g-skel-line,.g-skel-fig,.g-skel-block{display:block;background:var(--tile);border-radius:10px}
.g-skel-line{height:12px;border-radius:6px}
.g-skel-fig{height:40px;width:55%}
.g-skel-block{height:140px;border-radius:var(--rt)}

/* ---------- 3.23 the bar: the head's face once the page scrolls under it (G3) ----------
   Blurred glass for the head, added by the page or the frame when the page scrolls under the head (the head's own
   transition fades it in). It is one of the three blurred layers a screen may carry. */
.g-bar{background-color:var(--g-sheet);-webkit-backdrop-filter:blur(26px) saturate(1.15);backdrop-filter:blur(26px) saturate(1.15);box-shadow:inset 0 0 0 1px var(--hair),0 20px 40px -16px rgba(0,0,0,0.8)}

/* ---------- 3.24 the IntegrateAI-only line: a grey status chip "IntegrateAI only", then the line in t2 ---------- */
.g-only{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;font-size:14px;line-height:1.45;color:var(--t2)}

/* ---------- 3.25 the design note (D26): a note for the people building the page, never words a build could copy ----------
   A dashed 1px edge at 10% white, radius 13, the label "Design note · not in the build" in 12px t3, then the note. */
.g-note{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:520px;padding:14px 16px;border-radius:13px;border:1px dashed var(--hair2);font-size:13.5px;line-height:1.5;color:var(--t2)}
.g-note-label{font-size:12px;color:var(--t3)}

/* ---------- 3.25b Home's parts, lifted 31 Oct (src/pages/home names them hm-; values unchanged, its session moves to these names) ----------
   The period menu, one height in every period, the grey link line, the page's foot, the line and link rows, the capsule on
   the roaster, the compact needs list, stat tiles sized by their own width. Touch boxes have their .g-phone twins just after
   each block. */

/* the period key: the head's grey period opens a small float. IA.glass.period(key, opts) wires it. The menu is drawn
   in place, not in the sheet layer: the key and its menu share a positioned ancestor (.g-panel is one) */
.g-per{position:relative;display:inline-flex;align-items:center;gap:2px;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit;color:var(--t2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 150ms var(--ease)}
.g-per::after{content:"";position:absolute;left:-6px;right:-6px;top:min(0px,calc(50% - 18px));bottom:min(0px,calc(50% - 18px))}
@media (pointer:coarse),(max-width:899px){.g-per::after{top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}}
:where(.g-phone) .g-per::after{top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
@media (hover:hover) and (pointer:fine){.g-per:hover{color:var(--t1)}}
.g-per.is-hover,.g-per.is-pressed{color:var(--t1)}
.g-per:is(:focus-visible,.is-focus){outline:2px solid var(--g-focus);outline-offset:3px}
.g-per .g-chev{margin-top:0;color:inherit}
.g-per[aria-expanded="true"] .g-chev{transform:rotate(180deg)}
/* the float: the --float face on the solid sheet face, so nothing shows through. Keys in a .g-seg (the frame remembers a
   .g-seg's press), then any key that opens a sheet (Dates). Written with .g-seg where 3.27 would otherwise size them */
.g-permenu{position:absolute;z-index:20;width:176px;padding:6px;border-radius:16px;background:linear-gradient(var(--float),var(--float)),var(--g-sheet-solid);box-shadow:inset 0 0 0 1px var(--key-line),0 16px 32px -16px var(--room-edge)}
.g-permenu[hidden]{display:none}
.g-permenu.g-static{position:relative;z-index:auto;max-width:100%}
.g-permenu .g-seg{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border-radius:0;background:none;box-shadow:none}
.g-permenu button,.g-permenu .g-seg button{position:relative;display:flex;align-items:center;justify-content:flex-start;width:100%;height:36px;padding:0 12px;border:0;border-radius:11px;background:none;font-size:13.5px;line-height:1;font-weight:400;color:var(--t2);cursor:pointer;transition:background-color 150ms var(--ease),color 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){.g-permenu button:hover,.g-permenu .g-seg button:hover{background:var(--tile);color:var(--t1)}}
.g-permenu button:focus-visible{outline:2px solid var(--g-focus);outline-offset:-2px}
.g-permenu button[aria-pressed="true"],.g-permenu .g-seg button[aria-pressed="true"]{background:var(--key);color:var(--t1);box-shadow:inset 0 0 0 1px var(--key-line)}
@media (pointer:coarse),(max-width:899px){.g-permenu button,.g-permenu .g-seg button{height:44px}}
:where(.g-phone) .g-permenu button,:where(.g-phone) .g-permenu .g-seg button{height:44px}

/* one place for every period's words: the unseen ones hold the place, so a panel never changes height (D20).
   IA.glass.slot(el, words) writes them and hands back the one that shows */
.g-slot{display:grid;min-width:0}
.g-slot>*{grid-area:1/1;min-width:0}
.g-slot>[aria-hidden]{visibility:hidden}
.g-nw{white-space:nowrap}

/* a line of grey words that opens a place: a panel's foot, never a pill */
.g-link-line,.g-link{-webkit-tap-highlight-color:transparent}
.g-link-line{position:relative;display:inline-block;margin-top:8px;padding:0;border:0;background:none;text-align:left;font-size:12.5px;line-height:1.4;color:var(--t2);text-decoration:none;cursor:pointer;transition:color 150ms var(--ease)}
.g-link-line::after{content:"";position:absolute;left:-8px;right:-8px;top:min(0px,calc(50% - 18px));bottom:min(0px,calc(50% - 18px))}
@media (pointer:coarse),(max-width:899px){.g-link-line::after{top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}}
:where(.g-phone) .g-link-line::after{top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
@media (hover:hover) and (pointer:fine){.g-link-line:hover{color:var(--t1)}}
.g-link-line.is-hover,.g-link-line.is-pressed{color:var(--t1)}
.g-link-line:is(:focus-visible,.is-focus){outline:2px solid var(--g-focus);outline-offset:3px}
.g-panel>.g-link-line{display:block;width:fit-content}
.g-line-name svg,.g-link-line svg,.g-link-t svg{display:inline-block;width:13px;height:13px;margin-left:4px;vertical-align:-1px;color:var(--t2)}

/* the page's foot: one slim line, no card */
.g-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:2px 0 0;padding:0 4px}
.g-foot .g-link-line{margin-top:0;color:var(--t1)}

/* a row that opens its own place: a name, its figure at the right, a grey line under them. .g-lines stacks them; inside a
   .g-lines-at 540px or wider they sit three across, so a page never has to work that out from the window */
.g-lines{display:grid;margin-top:8px}
.g-lines-at{container:g-lines/inline-size}
.g-line{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name fig" "say say";align-content:start;column-gap:12px;margin:0 -10px;padding:7px 10px;border:0;border-radius:13px;border-top:1px solid var(--grid);background:none;text-align:left;color:var(--t1);text-decoration:none;cursor:pointer;transition:background-color 150ms var(--ease),transform 150ms var(--ease)}
.g-line:first-child{border-top:0}
@media (hover:hover) and (pointer:fine){.g-line:hover{background-color:var(--tile)}}
.g-line.is-hover{background-color:var(--tile)}
.g-line:is(:active,.is-pressed){background-color:var(--key);transform:scale(0.98);transition-duration:90ms}
.g-line:is(:focus-visible,.is-focus){outline:2px solid var(--g-focus);outline-offset:0}
.g-line-name{grid-area:name;min-width:0;font-size:13.5px;line-height:1.35;color:var(--t1)}
.g-line-fig{grid-area:fig;justify-items:end;font-size:15px;line-height:1.3;font-weight:300;font-feature-settings:"tnum" 1,"cv11" 1;color:var(--t1)}
.is-updating .g-line-fig{color:var(--t2)}
.g-line-say{grid-area:say;margin-top:1px}
@container g-lines (min-width:540px){
  .g-lines{grid-template-columns:minmax(0,1fr) minmax(max-content,1fr) minmax(max-content,1fr);column-gap:14px;margin-top:6px}
  .g-line{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "fig" "say";border-top:0;padding-top:5px;padding-bottom:5px}
  .g-line-fig{font-size:17px;justify-items:start}
}

/* a link row: words that open a place or a sheet, with a grey line under them. .g-links holds them */
.g-links{display:grid;margin-top:8px}
.g-link{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:calc(100% + 20px);margin:0 -10px;padding:9px 10px;border:0;border-radius:13px;background:none;color:var(--t1);text-align:left;text-decoration:none;cursor:pointer;transition:background-color 150ms var(--ease),transform 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){.g-link:hover{background-color:var(--tile)}}
.g-link.is-hover{background-color:var(--tile)}
.g-link:is(:active,.is-pressed){background-color:var(--key);transform:scale(0.98);transition-duration:90ms}
.g-link:is(:focus-visible,.is-focus){outline:2px solid var(--g-focus);outline-offset:0}
.g-link-t{display:flex;align-items:center;font-size:14px;line-height:1.35;color:var(--t1)}
.g-link-t .g-chev{margin-top:0;margin-left:2px;transform:rotate(-90deg)}

/* the capsule on a line drawing: IA.glass.roaster draws svg.g-roaster into .g-art, and the capsule sits on the machine */
.g-art{position:relative;width:100%;max-width:280px;min-width:0}
.g-roaster{display:block;width:100%;height:auto;overflow:visible}
.g-capsule{position:absolute;left:65.8%;top:78%;display:inline-flex;align-items:center;min-height:38px;max-width:66%;padding:4px 14px;border-radius:999px;background:var(--float);box-shadow:inset 0 0 0 1px var(--key),0 12px 24px -12px var(--room-edge);transform:translate(-50%,-50%)}
.g-capsule-t{font-size:14px;line-height:1.12;font-weight:300;letter-spacing:-0.01em;color:var(--t1);font-feature-settings:"tnum" 1,"cv11" 1}

/* the compact needs list: Home's measured trims. On .g-panel.g-needs it is the panel; on a plain .g-needs inside a panel it
   adds no padding of its own. Its rows open the bell's sheet, so each chevron points there. Fewer rows is the page's
   choice: every row that counts still wears its count, the rest go to the foot, so the badges still add up. It is a size
   container, so it takes its width from outside (a block parent, a grid cell), never from its words */
.g-needs.is-compact{container:g-needs/inline-size;padding:18px 18px 16px}
.g-needs.is-compact:not(.g-panel){padding:0}
.g-needs.is-compact>.g-needs-head{margin-bottom:10px}
.g-needs.is-compact>.g-row>.g-row-head{padding-top:11px;padding-bottom:11px}
.g-needs.is-compact>.g-row>.g-row-head .g-chev{transform:rotate(-90deg)}
.g-needs.is-compact>.g-suggest{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"orb label pill" "orb text pill";column-gap:12px;row-gap:0;align-items:center;margin:6px 0 0;padding:2px 4px 0 6px;border-top:0}
.g-needs.is-compact>.g-suggest+.g-row{margin-top:8px}
.g-needs.is-compact>.g-suggest>.g-orbtile{grid-area:orb;align-self:start}
.g-needs.is-compact>.g-suggest>.g-suggest-label{grid-area:label}
.g-needs.is-compact>.g-suggest>.g-suggest-text{grid-area:text;margin-top:3px}
.g-needs.is-compact>.g-suggest>.g-pill{grid-area:pill;margin-top:0}
@container g-needs (max-width:440px){
  .g-needs.is-compact>.g-suggest{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"orb label" "orb text" "orb pill"}
  .g-needs.is-compact>.g-suggest>.g-pill{justify-self:start;margin-top:10px}
}
@container g-needs (min-width:510px){
  .g-needs.is-compact>.g-suggest{grid-template-areas:"orb label pill" "orb text text"}
}

/* a stat tile sized by its own width (.is-own): the tile is its own container, so its figure and label take their form from
   the tile, never the window: up to 225px of the tile's inside width (its content box, so about 265px outer at the desk's
   20px padding, about 257px at the phone's 16px) the figure sits beside the signal at 34px, the label under; wider, the
   figure sits at the right at 42px. Inline-size containment gives the tile no width of its own, so it needs one from outside (.g-pair,
   a grid cell). A container cannot style itself: padding and min-height still follow the window. A .g-stat without
   .is-own is exactly as 3.5 and 3.27 draw it */
.g-stat.is-own{container:g-stat/inline-size}
@container g-stat (min-width:226px){
  .g-stat.is-own>:is(.g-sig-ok,.g-sig-warn,.g-sig-alert,.g-badge,.g-dot){grid-area:auto;grid-row:1;grid-column:1}
  .g-stat.is-own>.g-stat-label{grid-area:auto;grid-row:2;grid-column:1;align-self:last baseline;max-width:118px}
  .g-stat.is-own>.g-stat-fig{grid-area:auto;grid-row:2;grid-column:2;align-self:last baseline;margin-top:0;font-size:42px}
}
@container g-stat (max-width:225px){
  .g-stat.is-own>:is(.g-sig-ok,.g-sig-warn,.g-sig-alert,.g-badge,.g-dot){grid-area:auto;grid-row:1;grid-column:1}
  .g-stat.is-own>.g-stat-fig{grid-area:auto;grid-row:1;grid-column:2;align-self:start;margin-top:-4px;font-size:34px}
  .g-stat.is-own>.g-stat-label{grid-area:auto;grid-row:2;grid-column:1/-1;align-self:end;max-width:none}
}

/* ---------- 3.26 words on a lifted face ----------
   Hover and press lift a face, a chosen tile or More row sits on the key face, and a panel's lit corner adds its sheen,
   so grey words on those faces step up to the lit grey, as on the lit panel: every word stays at 4.5:1 or more on every
   lifted face. The old pages paint grey words with --mut and --em, so those step too. The faces are exactly the
   ones that lift above: 3.2 (tiles, chips, More rows), 3.3 (panels), 3.8 (needs rows), 3.16 (drawer heads), 3.18
   (table rows), 3.25b (line and link rows) and the bridge's .card.is-link and .ri.press. */
@media (hover:hover) and (pointer:fine){
  :is(a,button).g-panel:hover,.g-panel.is-link:hover,.card.is-link:hover,:is(a,button):is(.g-tile,.g-chip):hover,.g-more>:is(a,button):hover,
  .g-row:has(>button.g-row-head:hover),.g-drawer-head:hover,.ri.press:hover,.g-table tr.is-link:hover,.g-line:hover,.g-link:hover{--t2:var(--g-t2-lit);--t3:var(--g-t2-lit);--mut:var(--g-t2-lit);--em:var(--g-t2-lit)}
}
.g-panel:is(.is-hover,.is-pressed),:is(a,button).g-panel:active,.g-panel.is-link:active,.card.is-link:active,
:is(a,button):is(.g-tile,.g-chip):is(.is-hover,.is-pressed,:active,.is-current,.is-open,[aria-current="page"],[aria-current="true"],[aria-selected="true"],[aria-pressed="true"],[aria-expanded="true"]),
.g-more>:is(a,button):is(.is-hover,.is-pressed,:active,.is-current,.is-open,[aria-current="page"],[aria-current="true"],[aria-selected="true"],[aria-pressed="true"],[aria-expanded="true"]),
.g-row:is(.is-hover,.is-pressed),.g-row:has(>button.g-row-head:active),.g-drawer:is(.is-hover,.is-pressed)>.g-drawer-head,.g-drawer-head:active,
.g-table tr.is-hover,.g-line:is(.is-hover,.is-pressed,:active),.g-link:is(.is-hover,.is-pressed,:active){--t2:var(--g-t2-lit);--t3:var(--g-t2-lit);--mut:var(--g-t2-lit);--em:var(--g-t2-lit)}

/* ---------- 3.27 by width: two columns 900 to 1,279; touch targets 44px; the phone under 900; the phone scope ----------
   Each touch and phone rule is written again as :where(.g-phone) <selector> straight after its block (see the header). */
@media (min-width:900px) and (max-width:1279px){
  .g-display{font-size:46px}
  .g-fig-hero{font-size:42px}
  .g-panel,.g-pencil{padding:20px}
}
/* every target 44px on a touch screen, whatever its drawn size: a centred hit box rides on ::after (K05: the sheet's
   Close too; its X is drawn on ::before). Its edges sit at min(0, 50% - 22px), so it is max(100%, 44px) each way with no
   transform: WebKit counts a transformed box's untransformed place toward the page's width, the trap K12 and K15 hit */
@media (pointer:coarse),(max-width:899px){
  :is(.g-place,.g-pill,.g-tab,.g-ibtn,.g-avatar,.g-find,.g-sheet-back,.g-sheet-close,.g-seg button,.seg button,.tabs button)::after{
    content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px));
  }
  .g-switch::before{content:"";position:absolute;left:0;right:0;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
  .g-seg,.seg{padding:4px;border-radius:22px}
  .g-seg button,.seg button,.g-seg .thumb,.seg .thumb{height:36px;border-radius:18px}
  .g-seg .thumb,.seg .thumb{top:4px}
  .g-seg.icons button,.seg.icons button{width:36px;min-width:36px}
  .tabs button{height:32px;min-width:0}
  .g-tabs,.tabs{gap:4px}
  .g-thin>:is(a,button){min-height:44px;justify-content:center}   /* K11: a thin-line item he presses is 44px tall, whatever its words */
  .g-needs-more::after{bottom:-18px}                              /* 44px, grown downward: it stops 1px short of the row above */
  .g-needs-foot{row-gap:20px}
}
/* the rail's keys take the 44px box only when the window is 400px tall or more, as the frame's rail does (3.9). The class
   is doubled to outweigh the list above, whose :is() takes the weight of its heaviest entry (.g-seg button) */
@media (pointer:coarse) and (max-height:443px){.g-place.g-place::after{content:none}}
/* K15: at a desk (a fine pointer, 900px and wider) every target is 36px, whatever its drawn size: a centred box whose
   edges sit at min(0, 50% - 18px), so it is max(100%, 36px) each way with no transform (WebKit counts a transformed
   box's untransformed place toward the page's width); the switch's on ::before, its knob being ::after. Written before
   the phone scope, so a part inside the phone picture keeps its 44px box. */
@media (pointer:fine) and (min-width:900px){
  :is(.g-pill,.g-tab,.g-sheet-back,.g-seg button,.seg button,.tabs button)::after{content:"";position:absolute;top:min(0px,calc(50% - 18px));bottom:min(0px,calc(50% - 18px));left:min(0px,calc(50% - 18px));right:min(0px,calc(50% - 18px))}
  .g-switch::before{content:"";position:absolute;left:0;right:0;top:min(0px,calc(50% - 18px));bottom:min(0px,calc(50% - 18px))}
}
/* the touch sizes again under .g-phone */
:where(.g-phone) :is(.g-place,.g-pill,.g-tab,.g-ibtn,.g-avatar,.g-find,.g-sheet-back,.g-sheet-close,.g-seg button,.seg button,.tabs button)::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}
:where(.g-phone) .g-switch::before{content:"";position:absolute;left:0;right:0;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
:where(.g-phone) .g-seg,:where(.g-phone) .seg{padding:4px;border-radius:22px}
:where(.g-phone) .g-seg button,:where(.g-phone) .seg button,:where(.g-phone) .g-seg .thumb,:where(.g-phone) .seg .thumb{height:36px;border-radius:18px}
:where(.g-phone) .g-seg .thumb,:where(.g-phone) .seg .thumb{top:4px}
:where(.g-phone) .g-seg.icons button,:where(.g-phone) .seg.icons button{width:36px;min-width:36px}
:where(.g-phone) .tabs button{height:32px;min-width:0}
:where(.g-phone) .g-tabs,:where(.g-phone) .tabs{gap:4px}
:where(.g-phone) .g-thin>:is(a,button){min-height:44px;justify-content:center}
:where(.g-phone) .g-needs-more::after{bottom:-18px}
:where(.g-phone) .g-needs-foot{row-gap:20px}
@media (max-width:899px){
  .g-display{font-size:36px;letter-spacing:-0.03em}
  .g-lede{font-size:17px}
  .g-fig-hero{font-size:40px}
  .g-panel,.g-pencil,.g-needs{padding:20px}
  .g-pencil{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24' ry='24' fill='none' stroke='%23fff' stroke-opacity='0.14' stroke-width='2' stroke-dasharray='3 4'/%3E%3C/svg%3E")}
  .g-chips{gap:6px}
  .g-chip{height:38px;padding:0 12px;gap:6px;font-size:13.5px}
  .g-stat{min-height:104px;padding:16px 16px 15px;grid-template-areas:"sig fig" "label label";grid-template-rows:auto 1fr;align-items:start}
  .g-stat-fig{font-size:34px;align-self:start;margin-top:-4px}
  .g-stat-label{align-self:end;max-width:none}
  .g-rail{display:none}
  .g-tabs{gap:0}                                                    /* four tabs (Roastery's) fit 343px, at 13px with 8px sides; the 44px touch box rides on ::after */
  .g-tab{padding:0 8px;font-size:13px}
  .g-ibtn,.g-avatar{width:38px;height:38px}
  .g-find{width:38px;height:38px;padding:0;gap:0;justify-content:center;border-radius:50%;font-size:0}
  .g-open{width:44px;height:44px;margin:-14px -15px -14px 0}
  .g-sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:92vh;max-height:92dvh;border-radius:var(--r) var(--r) 0 0;opacity:1;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom,0px)}
  .g-sheet:is(.is-wide,.g-sheet-wide,.wide,[data-wide]){width:auto}
  .g-sheet:is(.is-open,.on){transform:none}
  .g-static.g-sheet{transform:none;width:100%;border-radius:var(--r)}
  .g-grab{display:block}
  .g-sheet-head{padding:10px 12px 12px 20px}
  .g-sheet-close{width:40px;height:40px}
  .g-sheet-body{padding:4px 20px 20px}
  .g-sheet-foot{padding:12px 20px 16px}
  .g-sheet-foot>.g-pill-strong{flex:1}
  .g-sheet-foot>.g-pill{height:44px;padding:0 16px;border-radius:22px}
  .g-pill-strong{height:44px;border-radius:22px}
  .g-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .g-table td{padding:8px 0}
  .g-table tr.is-link td{height:44px}
  .g-placebar{
    position:fixed;z-index:40;display:flex;
    left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));
  }
  .g-static.g-placebar{position:relative;left:auto;right:auto;bottom:auto;z-index:auto}
  .g-veil{display:block;position:fixed;left:0;right:0;bottom:0;z-index:39;height:calc(104px + env(safe-area-inset-bottom,0px));pointer-events:none;background:linear-gradient(to top,var(--room-edge) 22%,rgba(11,12,11,0))}
}
/* the phone sizes again under .g-phone: the place bar in flow, no veil (the header says why) */
:where(.g-phone) .g-display{font-size:36px;letter-spacing:-0.03em}
:where(.g-phone) .g-lede{font-size:17px}
:where(.g-phone) .g-fig-hero{font-size:40px}
:where(.g-phone) .g-panel,:where(.g-phone) .g-pencil,:where(.g-phone) .g-needs{padding:20px}
:where(.g-phone) .g-pencil{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' rx='24' ry='24' fill='none' stroke='%23fff' stroke-opacity='0.14' stroke-width='2' stroke-dasharray='3 4'/%3E%3C/svg%3E")}
:where(.g-phone) .g-chips{gap:6px}
:where(.g-phone) .g-chip{height:38px;padding:0 12px;gap:6px;font-size:13.5px}
:where(.g-phone) .g-stat{min-height:104px;padding:16px 16px 15px;grid-template-areas:"sig fig" "label label";grid-template-rows:auto 1fr;align-items:start}
:where(.g-phone) .g-stat-fig{font-size:34px;align-self:start;margin-top:-4px}
:where(.g-phone) .g-stat-label{align-self:end;max-width:none}
:where(.g-phone) .g-rail{display:none}
:where(.g-phone) .g-tabs{gap:0}
:where(.g-phone) .g-tab{padding:0 8px;font-size:13px}
:where(.g-phone) .g-ibtn,:where(.g-phone) .g-avatar{width:38px;height:38px}
:where(.g-phone) .g-find{width:38px;height:38px;padding:0;gap:0;justify-content:center;border-radius:50%;font-size:0}
:where(.g-phone) .g-open{width:44px;height:44px;margin:-14px -15px -14px 0}
:where(.g-phone) .g-sheet{top:auto;left:0;right:0;bottom:0;width:auto;max-height:92vh;max-height:92dvh;border-radius:var(--r) var(--r) 0 0;opacity:1;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom,0px)}
:where(.g-phone) .g-sheet:is(.is-wide,.g-sheet-wide,.wide,[data-wide]){width:auto}
:where(.g-phone) .g-sheet:is(.is-open,.on){transform:none}
:where(.g-phone) .g-static.g-sheet{transform:none;width:100%;border-radius:var(--r)}
:where(.g-phone) .g-grab{display:block}
:where(.g-phone) .g-sheet-head{padding:10px 12px 12px 20px}
:where(.g-phone) .g-sheet-close{width:40px;height:40px}
:where(.g-phone) .g-sheet-body{padding:4px 20px 20px}
:where(.g-phone) .g-sheet-foot{padding:12px 20px 16px}
:where(.g-phone) .g-sheet-foot>.g-pill-strong{flex:1}
:where(.g-phone) .g-sheet-foot>.g-pill{height:44px;padding:0 16px;border-radius:22px}
:where(.g-phone) .g-pill-strong{height:44px;border-radius:22px}
:where(.g-phone) .g-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
:where(.g-phone) .g-table td{padding:8px 0}
:where(.g-phone) .g-table tr.is-link td{height:44px}
:where(.g-phone) .g-placebar{display:flex}
:where(.g-phone) .g-static.g-placebar{z-index:auto}
/* K04: under 360px (a small phone) nothing pushes the page sideways. A tab row wraps onto a second row; the sliding key
   cannot follow a wrapped row, so it goes and the chosen tab wears its own key (the old kit's tabs too). The rows sit
   12px apart so each 32px tab keeps its whole 44px touch box (at 4px the tab above a wrapped one kept 36px). A table's
   columns sit 8px apart, its word heads may wrap and it drops its least important column, so a name stays whole. Written
   after the phone scope so it outranks both; no table-layout:fixed (it collapses the Cover column). */
@media (max-width:359px){
  .g-tabs,.tabs{flex-wrap:wrap;row-gap:12px}
  .g-tabs>.bar,.tabs>.bar{display:none}
  .g-tabs:has(>.bar)>.g-tab{--g-bg-on:var(--key);--g-edge-on:inset 0 0 0 1px var(--key-line)}
  .tabs:has(>.bar)>button[aria-selected="true"]{background:var(--key);box-shadow:inset 0 0 0 1px var(--key-line)}
  .g-table :is(th,td)+:is(th,td){padding-left:8px}
  .g-table th{white-space:normal}
  /* a name never breaks mid-word (design lead, 30 Oct: "Nyamashek" then "e"). So a table gives up its least important
     column, and the name keeps its room: the column of grey figures (.g-num.g-sub cells, drawn grey because they matter
     least), its head with it, or whichever column a page marks .g-drop on its th and its tds. break-word only ever breaks
     a word longer than the whole cell */
  .g-table .g-drop,
  .g-table:has(td.g-num.g-sub:nth-child(2)) :is(th,td):nth-child(2),
  .g-table:has(td.g-num.g-sub:nth-child(3)) :is(th,td):nth-child(3),
  .g-table:has(td.g-num.g-sub:nth-child(4)) :is(th,td):nth-child(4),
  .g-table:has(td.g-num.g-sub:nth-child(5)) :is(th,td):nth-child(5){display:none}
  .g-table td:first-child{overflow-wrap:break-word}
  /* the keys share the spare room round every label, not equally between keys, so the closest labels sit 5px apart at 320 */
  .g-placebar>:is(a,button){flex:1 1 auto}
}


/* =====================================================================================================================
   4. MOTION. Calm, never bouncy: it orients, confirms, or tells a figure's story; it arrives once, then stays still.
   Only the orb loops, and it is a canvas (glass.js), not CSS. Every keyframe exists twice (A and B): an ancestor with
   .g-play-1 swaps each animation to its B twin, so toggling the class (IA.glass.replay) restarts it. Transitions need
   no twins. The rise and the slide move `translate`, never `transform`, so a finished arrival never pins a transform
   and the 98% press still works on anything that arrived.
   ===================================================================================================================== */

/* ---------- 4.1 a page opens still (Chad, 4 Nov): the cards in view just show, the ones below reveal on scroll (4.7).
   The old kit's [data-a] and .is-in are kept; kit.css's half-hidden start is undone, so no card is ever hidden by CSS. ---------- */
.js [data-a]:not(.is-in){opacity:1;transform:none;translate:none;animation:none}
.js [data-a].is-in{
  opacity:1;translate:none;animation:none;
  transition:background-color 150ms var(--ease),box-shadow 150ms var(--ease),transform 150ms var(--ease),color 150ms var(--ease);
}

/* ---------- 4.2 motion classes for the kit and the specimen (the board's grammar; --delay sets the stagger) ---------- */
.g-rise{animation:gRiseA 900ms var(--ease) var(--delay,0ms) backwards}          /* a panel: 8px rise, 70ms apart */
.g-slide{animation:gSlideA 800ms var(--ease) var(--delay,0ms) backwards}        /* rows in a panel: 10px from the right, 90ms apart */
.g-fade{animation:gFadeA 700ms var(--ease) var(--delay,0ms) backwards}          /* story dots and labels, after the line */
.g-grow{transform-origin:left center;animation:gGrowA 1000ms var(--ease) var(--delay,0ms) backwards}   /* a meter grows from the left */
.g-draw{stroke-dasharray:1;animation:gDrawA 1600ms var(--ease-draw) var(--delay,0ms) backwards}       /* a line, pathLength="1" */
.g-play-1 .g-rise,.g-play-1.g-rise{animation-name:gRiseB}
.g-play-1 .g-slide,.g-play-1.g-slide{animation-name:gSlideB}
.g-play-1 .g-fade,.g-play-1.g-fade{animation-name:gFadeB}
.g-play-1 .g-grow,.g-play-1.g-grow{animation-name:gGrowB}
.g-play-1 .g-draw,.g-play-1.g-draw{animation-name:gDrawB}

/* ---------- 4.3 the charts the pages still draw themselves: one movement per chart, the marks still ----------
   The old kit dropped every dot in on its own (up to 90 at once); in glass the marks are still. A line still draws in
   (1.6s), labels fade after it, a meter grows; columns and dots simply arrive with their panel. */
.js .chart:not(.drawn) .dt.anim{opacity:var(--o,1);transform:none}
.chart.drawn .dt.anim{animation:none}
.js .chart:not(.drawn) .grow-y{transform:none}
.chart.drawn .grow-y{animation:none}
.chart.drawn .draw{animation:gDrawA 1600ms var(--ease-draw) var(--dd,0ms) both}
.chart.drawn .fade-in{animation:gFadeA 700ms var(--ease) var(--dd,300ms) both}
.chart.drawn :is(.grow-x,.hb-anim){animation:gGrowA 1000ms var(--ease) var(--dd,0ms) both}
.g-play-1 .chart.drawn .draw{animation-name:gDrawB}
.g-play-1 .chart.drawn .fade-in{animation-name:gFadeB}
.g-play-1 .chart.drawn :is(.grow-x,.hb-anim){animation-name:gGrowB}
.pop{animation:gPopA 300ms var(--ease) backwards}
.g-play-1 .pop{animation-name:gPopB}

/* ---------- 4.4 every part's transitions ----------
   Hover 150ms (the face lifts 4% white); press in under 100ms to 98% and a lighter face, released in 150ms. */
:is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile),
:is(a,button).g-panel,.g-panel.is-link,.g-row,.g-drawer-head,.g-switch,.g-input,.g-field :is(input,textarea,select),.g-thin>*,.g-table td{
  transition:background-color 150ms var(--ease),color 150ms var(--ease),box-shadow 150ms var(--ease),border-color 150ms var(--ease),transform 150ms var(--ease),opacity 150ms var(--ease);
}
:is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile):active,
:is(a,button).g-panel:active,.g-panel.is-link:active,.g-row:has(>button.g-row-head:active),.g-drawer-head:active,.g-switch:active{transition-duration:90ms}
:is(.g-seg,.seg) button,.tabs button{transition:color 150ms var(--ease),transform 150ms var(--ease)}
:is(.g-seg,.seg) button:active,.tabs button:active{transition-duration:90ms}
/* the segment and tab key slides to the new key in 300ms */
.g-seg .thumb,.seg .thumb,.g-tabs .bar,.tabs .bar{transition:transform 300ms var(--ease),width 300ms var(--ease)}
/* the switch's knob slides in 300ms */
.g-switch::after{transition:transform 300ms var(--ease),background-color 300ms var(--ease)}
/* drawers and needs rows open to their height in 300ms while their content fades in; the chevron turns in 200ms;
   closing runs 1.25 times faster (240ms) and hides what it held once the fold ends */
.g-chev{transition:transform 200ms var(--ease)}
.g-row-body,.g-drawer-body{transition:grid-template-rows 240ms var(--ease),visibility 0s linear 240ms}
.g-row.is-open>.g-row-body,.g-row:has(>.g-row-head[aria-expanded="true"])>.g-row-body,
.g-drawer.is-open>.g-drawer-body,.g-drawer:has(>.g-drawer-head[aria-expanded="true"])>.g-drawer-body{transition:grid-template-rows 300ms var(--ease),visibility 0s}
.g-row-in>*,.g-drawer-in>*{transition:opacity 160ms var(--ease)}
.g-row.is-open .g-row-in>*,.g-row:has(>.g-row-head[aria-expanded="true"]) .g-row-in>*,
.g-drawer.is-open .g-drawer-in>*,.g-drawer:has(>.g-drawer-head[aria-expanded="true"]) .g-drawer-in>*{transition:opacity 300ms var(--ease) 60ms}
/* sheets: desk in from the right 24px and fades (420ms); phone up from the bottom (480ms); the page dims to 40%;
   closing 1.25 times faster (336ms, 384ms) */
.g-scrim{transition:opacity 336ms var(--ease)}
.g-scrim:is(.is-open,.on){transition-duration:420ms}
.g-sheet{transition:opacity 336ms var(--ease),transform 336ms var(--ease),visibility 0s linear 336ms}
.g-sheet:is(.is-open,.on){transition:opacity 420ms var(--ease),transform 420ms var(--ease),filter 420ms var(--ease),visibility 0s}
@media (max-width:899px){
  .g-scrim{transition-duration:384ms}
  .g-scrim:is(.is-open,.on){transition-duration:480ms}
  .g-sheet{transition:transform 384ms var(--ease),visibility 0s linear 384ms}
  .g-sheet:is(.is-open,.on){transition:transform 480ms var(--ease),filter 480ms var(--ease),visibility 0s}
}
/* the centred sheet's own pace (desk): in, a calm rise over 300ms; out, a softer fade over 220ms (the sheet is taken out at 350ms) */
@media (min-width:900px){
  .g-sheet.is-centre{transition:opacity 220ms var(--ease),transform 240ms var(--ease),filter 240ms var(--ease),visibility 0s linear 240ms}
  .g-sheet.is-centre:is(.is-open,.on){transition:opacity 280ms var(--ease),transform 300ms var(--ease),filter 300ms var(--ease),visibility 0s}
}
/* the toast rises 8px and fades in (300ms); it leaves 1.25 times faster */
.g-toast{transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
.g-toast:is(.is-open,.on){transition-duration:300ms}
/* the hover chip and the freshness dot; red never moves, a badge only fades in */
.tip{transition:opacity 150ms var(--ease),transform 150ms var(--ease)}
.g-badge{transition:opacity 150ms var(--ease)}
/* updating: the figures dim, then count to the new ones */
:is(.g-fig,.g-stat-fig,.fig){transition:color 150ms var(--ease)}

/* ---------- 4.5 keyframes, each with its twin ---------- */
@keyframes gRiseA{from{opacity:0;translate:0 8px}to{opacity:1;translate:none}}
@keyframes gRiseB{from{opacity:0;translate:0 8px}to{opacity:1;translate:none}}
@keyframes gSlideA{from{opacity:0;translate:10px 0}to{opacity:1;translate:none}}
@keyframes gSlideB{from{opacity:0;translate:10px 0}to{opacity:1;translate:none}}
@keyframes gFadeA{from{opacity:0}to{opacity:var(--o,1)}}
@keyframes gFadeB{from{opacity:0}to{opacity:var(--o,1)}}
@keyframes gGrowA{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gGrowB{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gDrawA{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes gDrawB{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes gPopA{from{opacity:0;scale:0.96}to{opacity:1;scale:none}}
@keyframes gPopB{from{opacity:0;scale:0.96}to{opacity:1;scale:none}}

/* ---------- 4.6 reduced motion and html.still (#still, screenshots): the last frame of everything, no movement ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-a],.js [data-a].is-in,.js [data-a]:not(.is-in){opacity:1;translate:none;animation:none!important}
  .g-rise,.g-slide,.g-fade,.g-grow,.g-draw,.pop,.chart.drawn .draw,.chart.drawn .fade-in,.chart.drawn :is(.grow-x,.hb-anim){animation:none!important}
  :is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile),
  :is(a,button).g-panel,.g-panel,.g-row,.g-needs-more,.g-drawer-head,.g-switch,.g-switch::after,.g-chev,.g-row-body,.g-drawer-body,.g-row-in>*,.g-drawer-in>*,
  .g-seg .thumb,.seg .thumb,.g-tabs .bar,.tabs .bar,:is(.g-seg,.seg) button,.tabs button,.g-scrim,.g-sheet,.g-toast,.tip,.g-rail-tip,.g-badge,.g-fig,.g-stat-fig,.fig{transition:none!important}
  :is(.g-place,.g-tab,.g-pill,.g-pill-strong,.g-ibtn,.g-avatar,.g-find,.g-open,.g-sheet-back,.g-sheet-close,.g-placebar>a,.g-placebar>button,.g-more>a,.g-more>button,a.g-chip,button.g-chip,a.g-tile,button.g-tile,.g-switch,.g-drawer-head,.g-row,.g-panel):active{transform:none}
}
/* the centred sheet with reduced motion (desk): a plain fade, nothing moves */
@media (prefers-reduced-motion:reduce) and (min-width:900px){
  .g-sheet.is-centre,.g-sheet.is-centre~.g-sheet{transform:none!important;transition:opacity 200ms linear,visibility 0s linear 200ms!important}
  .g-sheet.is-centre:is(.is-open,.on),.g-sheet.is-centre~.g-sheet:is(.is-open,.on){transition:opacity 200ms linear,visibility 0s!important}
}
html.still .js [data-a],html.still [data-a],html.still .g-rise,html.still .g-slide,html.still .g-fade,html.still .g-grow,html.still .g-draw,html.still .pop,
html.still .chart.drawn :is(.draw,.fade-in,.grow-x,.hb-anim){opacity:1;translate:none;animation:none!important}
html.still :is(.g-scrim,.g-sheet,.g-toast,.tip,.g-rail-tip,.g-chev,.g-row-body,.g-drawer-body,.g-row-in>*,.g-drawer-in>*,.thumb,.bar,.g-switch,.g-switch::after){transition:none!important}
html.still .g-sheet.is-centre,html.still .g-sheet.is-centre~.g-sheet{transition:none!important}

/* ---------- 4.7 reveal on scroll (Chad, 4 Nov): a card out of sight when its page opens fades in and rises the first
   time it scrolls into view, once a visit, a visit being one page load (glass.js IA.glass.reveal); its charts draw in with it.
   Round 2 (Chad on his iPhone): clearly visible, still calm. Strongest on the morning report (the morning page
   and Report), lighter and quicker everywhere else; cards arriving together stagger, at most 3 steps. Only the script
   adds .g-rv (hidden), so a card shows whatever fails. .g-rvd stays on a revealed card so the page arrival's rise never
   replays; .g-rv-go carries the move and the card's own 150ms transitions. Opacity and translate only: no layout shift,
   and the 98% press (transform) still works. ---------- */
:root{--rv-d:380ms;--rv-y:14px;--rv-s:60ms;--rv-ease:cubic-bezier(0.22,0.61,0.36,1)}   /* a gentle ease-out: the kit's --ease front-loads so hard the move is over before the eye finds it on a phone */
:root[data-page="morning"],:root[data-page="report"]{--rv-d:450ms;--rv-y:18px;--rv-s:60ms}
:root .g-rvd.g-rvd.g-rvd{opacity:1;translate:none;animation:none}
:root .g-rv.g-rv.g-rv{opacity:0;translate:0 var(--rv-y)}
:root .g-rv-go.g-rv-go.g-rv-go{transition:opacity var(--rv-d) var(--rv-ease) calc(var(--rv-i,0) * var(--rv-s)),translate var(--rv-d) var(--rv-ease) calc(var(--rv-i,0) * var(--rv-s)),background-color 150ms var(--ease),box-shadow 150ms var(--ease),transform 150ms var(--ease),color 150ms var(--ease)}
@media (prefers-reduced-motion:reduce){:root .g-rv.g-rv.g-rv{opacity:1;translate:none}}
html.still .g-rv.g-rv.g-rv{opacity:1;translate:none}
/* round 3: a chart waiting below the fold is held empty, then draws in once it is clearly on screen (glass.js
   IA.glass.reveal): ticks, lines, tracks and dot rows open left to right, bars and stacks (.gc-y) grow up, a ring
   sweeps; 800ms on the gentle ease, minis 80ms apart. .gc-done stops the opening replaying when a period change redraws
   the chart (its own draw-in still plays inside). Only the script adds .gc-hold, so a chart shows whatever fails. */
:root{--gc-in:800ms}
:root .gc-hold svg.gc.gc:not(#gc-k){clip-path:inset(0 100% 0 0)}
:root .gc-hold.gc-y svg.gc.gc:not(#gc-k){clip-path:inset(100% 0 0 0)}
:root .gc-go svg.gc.gc:not(#gc-k){animation:gcRevealXA var(--gc-in) var(--rv-ease) calc(var(--gc-d0,0ms) + var(--gc-i,0) * 80ms) backwards}
:root .gc-go.gc-y svg.gc.gc:not(#gc-k){animation-name:gcRevealYA}
:root .gc-go svg.gc .gc-arc:not(#gc-k){stroke-dasharray:1 1;animation:gcDrawA 900ms var(--rv-ease) calc(var(--gc-d0,0ms) + var(--gc-i,0) * 80ms + 120ms) backwards}
:root .gc-done svg.gc.gc:not(#gc-k){animation:none}
@media (prefers-reduced-motion:reduce){:root .gc-hold svg.gc.gc:not(#gc-k){clip-path:none}}
/* round 4: an answer arrives (glass.js IA.glass.answerIn): its blocks rise 12px in order, 60ms apart; its drawings wait
   for their block (--gc-d0) and then draw in as above. Only the script adds .g-ans-in, so an answer shows whatever fails */
@keyframes gAnsUp{from{opacity:0;translate:0 12px}to{opacity:1;translate:none}}
:root .g-ans-in.g-ans-in{animation:gAnsUp 420ms var(--rv-ease) calc(var(--ai,0) * 60ms) backwards}
@media (prefers-reduced-motion:reduce){:root .g-ans-in.g-ans-in{animation:none}}
html.still .g-ans-in.g-ans-in{animation:none}
html.still .gc-hold svg.gc.gc:not(#gc-k){clip-path:none}

/* ---------- 3.30 your team in every place (unit 3e, G14 to G16; GLASS-GUIDE section 6, "Your team in every place").
   The orb is the team: drawn still everywhere, turning only while the team works on his request (IA.glass.orb.work).
   Parts: the small still orb .g-orb-xs; the team line .g-teamline; the offer card .g-held (a row's mark is the
   kit's .g-status.g-status-grey.g-status-small, nothing new); the desk ask bar .g-ask and its float .g-askfloat; the
   place bar's Ask key .g-placebar-ask and its raised orb .g-placebar-orb; the context chip .g-ctx; the mic key .g-mic; the listening line .g-listen; the panel head's
   orb key .g-askkey; the sheet foot's "Ask about" pill .g-askabout ---------- */
.g-orb-xs{flex:none;display:inline-block;width:18px;height:18px;vertical-align:middle}
.g-orb-xs canvas{display:block;width:18px;height:18px}

/* the team line: no panel, no maroon. The orb at the first line's centre (15px at 1.45 is a 21.75px line) */
.g-teamline{display:flex;align-items:flex-start;gap:10px;max-width:760px;min-width:0}
.g-teamline>.g-orb-xs{margin-top:2px}
.g-teamline-t{flex:1;min-width:0;margin:0;font-size:15px;line-height:1.45;font-weight:400;color:var(--t1);text-wrap:pretty}
.g-teamline-go{position:relative;display:inline;padding:0;border:0;background:none;font:inherit;color:var(--t2);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 150ms var(--ease)}
.g-teamline-go::after{content:"";position:absolute;left:-4px;right:-4px;top:min(0px,calc(50% - 18px));bottom:min(0px,calc(50% - 18px))}
/* fix round 1 (A6): 44px to touch on a phone, as .g-link-line */
@media (pointer:coarse),(max-width:899px){.g-teamline-go::after{top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}}
:where(.g-phone) .g-teamline-go::after{top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
/* and the line keeps 6px clear below it on a phone, so its key's box never meets the next key's (a page's tabs under it) */
@media (max-width:899px){.g-teamline{margin-bottom:6px}}
:where(.g-phone) .g-teamline{margin-bottom:6px}
.g-teamline-go .g-chev{display:inline-block;vertical-align:-3px;margin:0 0 0 2px;color:inherit;transform:rotate(-90deg)}
@media (hover:hover) and (pointer:fine){.g-teamline-go:hover{color:var(--t1)}}
.g-teamline-go:focus-visible{outline:2px solid var(--g-focus);outline-offset:3px;border-radius:11px}

/* the offer card (law 1 as amended, 2 Nov: offer first; drawn by IA.glass.offer, the classes kept from the held-or-done
   block it replaces). Two states. The offer: the question ("Shall I ...?"), what the team has seen with its figure, to
   whom, the words, the key that answers it ("Yes, please"; "See the draft" for a message) and a quiet No thanks (no second confirm); left unanswered it lapses quietly (no time, badge, count or
   reminder). Done: what was done, the same words, Undo only where the platform truly allows it; undone for an order he
   cancelled. Apart from the card: yes (only money to a new payee or an unusual amount: the one strong pill opens Xero or
   his bank, where he approves it). A row's mark is the kit's grey status chip, only once done ("Ordered", "Sent") */
.g-held{display:grid;gap:12px;min-width:0}
.g-held-eb{display:flex;align-items:center;gap:12px;margin:0;font-size:13px;line-height:1.35;color:var(--t2)}
.g-held-to{margin:0;font-size:12.5px;line-height:1.35;color:var(--t2);overflow-wrap:anywhere}
.g-held-msg{margin:0;padding:14px 16px;font-size:14px;line-height:1.5;color:var(--t1);white-space:pre-line;overflow-wrap:break-word;-webkit-user-select:text;user-select:text}
.g-held-when{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:13px;line-height:1.35;color:var(--t2)}
.g-held-keys{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px}
.g-held-said{margin:0;font-size:14px;line-height:1.45;color:var(--t2);text-wrap:pretty}
.g-held-said+.g-held-keys{margin-top:-2px}
.g-held .g-link-line{justify-self:start;margin-top:0}
.g-held:is([data-state="done"],[data-state="undone"]) .g-held-msg{color:var(--t2)}
/* fix round, Chad's live bug (3 Nov): a done offer keeps its place with a quiet tick where the orb tile was, its words in t1;
   while it sends, the key reads "Sending…" and cannot be pressed twice */
.g-held[data-state="done"]>.g-held-eb{color:var(--t1)}
.g-held-tick{width:18px;height:18px}
.g-held-sending{opacity:0.7;cursor:default}
/* 3 Nov (readability): the kind icon leads the question; the question is the one strong line, t1; one reason line under it
   in t2; the keys answer it ("Yes, please" or "See the draft") with a quiet "No thanks" beside. Declined: one grey line
   with Undo for about five seconds, then gone. Done: one tick line, what went and when, a chevron to what went */
.g-held-eb{align-items:flex-start;gap:10px;font-size:15px;line-height:1.4;color:var(--t1)}
.g-held-kind{flex:none;display:inline-flex;width:20px;height:20px;margin-top:1px;color:var(--t2)}
.g-held-kind .ic{width:20px;height:20px}
.g-held-eb+.g-held-said{padding-left:30px;font-size:13.5px;line-height:1.4}
.g-held:not(.is-brief)>.g-held-eb+.g-held-said{margin-top:-4px}
.g-held-eb~.g-held-to,.g-held-eb~.g-held-msg,.g-held-eb~.g-held-keys{margin-left:30px}
.g-held-keys{gap:6px 18px}
.g-held-text{position:relative;padding:0;border:0;background:none;font:inherit;font-size:13.5px;line-height:1.35;color:var(--t2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-held-text::after{content:"";position:absolute;inset:-12px -10px}
@media (hover:hover) and (pointer:fine){.g-held-text:hover{color:var(--t1)}}
.g-held-text:focus-visible,.g-held-open:focus-visible{outline:2px solid var(--g-focus);outline-offset:3px;border-radius:11px}
.g-held-gone,.g-held-line{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font-size:14px;line-height:1.4;color:var(--t2)}
.g-held-dot{margin:0 -4px}
.g-held-line>.g-held-tick,.g-held-line>.g-held-kind{flex:none}
.g-held-open{display:flex;align-items:center;gap:6px;flex:1;min-width:0;min-height:36px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-held-what{flex:1;min-width:0;color:var(--t1)}
.g-held-at{color:var(--t2);white-space:nowrap}
.g-held-open .g-chev{flex:none;transform:rotate(-90deg);color:var(--t2)}
@media (hover:hover) and (pointer:fine){.g-held-open:hover .g-chev{color:var(--t1)}}
.g-held[data-state="declined"],.g-held[data-state="done"],.g-held[data-state="undone"]{gap:0}
.g-held.is-going{opacity:0;transition:opacity 220ms var(--ease)}

/* the desk ask bar: the head's Find becomes a real field, the orb at its left, "/" at its right */
.g-ask{position:relative;flex:none;display:flex;align-items:center;gap:10px;width:236px;height:40px;padding:0 10px 0 12px;border-radius:20px;
  background:rgba(255,255,255,0.045);box-shadow:inset 0 0 0 1px var(--hair);color:var(--t1);transition:width 220ms var(--ease),background-color 150ms var(--ease)}
@media (hover:hover) and (pointer:fine){.g-ask:hover{background:rgba(255,255,255,0.085)}}
.g-ask:focus-within,.g-ask.is-open{width:min(420px,46vw);background:rgba(255,255,255,0.085)}
.g-ask:has(input:focus-visible){outline:2px solid var(--g-focus);outline-offset:2px}
.g-ask>.g-orb-xs{width:20px;height:20px}
.g-ask>.g-orb-xs canvas{width:20px;height:20px}
.g-ask input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;outline:none;color:var(--t1);font:300 14px/1 var(--g-font);letter-spacing:0}
.g-ask input::placeholder{color:var(--t2);opacity:1}
.g-ask input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.g-kbd{flex:none;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:11px;box-shadow:inset 0 0 0 1px var(--hair2);font:400 11px/1 var(--g-font);color:var(--t3)}
.g-ask:focus-within .g-kbd{display:none}
/* its float: the solid sheet face under --float's edge, the bar's width, at most 60% of the window, scrolling inside */
.g-askfloat{position:absolute;z-index:60;top:calc(100% + 8px);left:0;right:0;max-height:60vh;overflow:auto;overscroll-behavior:contain;padding:8px;border-radius:16px;
  background-color:var(--g-sheet-solid);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10),0 30px 60px -20px rgba(0,0,0,0.85)}
.g-askfloat[hidden]{display:none}
.g-askfloat .g-cap{margin:10px 8px 4px}
.g-askfloat .g-cap:first-child{margin-top:4px}
.g-askfloat .g-more>button{width:100%;padding-left:8px;padding-right:8px;--g-bg-on:var(--tile);--g-edge-on:none;--g-fg-on:var(--t1)}

/* the place bar's Ask key (Chad, 1 Nov: "always have it in the menu at the bottom, neater that way"): the centre key, a
   key like the others (the 44px floor, its label "Ask" level with theirs), whose 20px icon place holds the orb on a 44px
   disc in the bar's own glass, its foot 2px above the label, so its top stands 7.5px above the bar. The orb is still (30px,
   G14); a press dims the disc as it does the key */
.g-placebar-orb{position:relative;flex:none;width:20px;height:20px}
.g-placebar-orb::before{content:"";position:absolute;left:50%;bottom:-2px;width:44px;height:44px;margin-left:-22px;border-radius:50%;
  background-color:var(--g-bar);box-shadow:inset 0 0 0 1px var(--hair),0 10px 22px -12px rgba(0,0,0,0.85);transition:transform 150ms var(--ease),background-color 150ms var(--ease)}
.g-placebar-orb canvas{position:absolute;left:50%;bottom:5px;width:30px;height:30px;margin-left:-15px}
.g-placebar-ask{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.g-placebar-ask:is(:active,.is-pressed) .g-placebar-orb::before{transform:scale(0.96);background-color:rgba(44,46,43,0.97)}

/* the context chip: where he is, or the record; its x removes it (32px on a desk, 44px on a phone) */
.g-ctx{display:inline-flex;align-items:center;gap:2px;max-width:100%;min-height:32px;padding:0 0 0 12px;border-radius:16px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline);font-size:13px;line-height:1.3;color:var(--t1)}
.g-ctx-t{min-width:0;padding:7px 0;overflow-wrap:anywhere}
.g-ctx-x{position:relative;flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:var(--t2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-ctx-x::before{content:"";width:13px;height:13px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/13px 13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/13px 13px no-repeat}
@media (hover:hover) and (pointer:fine){.g-ctx-x:hover{color:var(--t1);background:rgba(255,255,255,0.06)}}
.g-ctx-x:focus-visible{outline:2px solid var(--g-focus);outline-offset:-2px}
@media (pointer:coarse),(max-width:899px){.g-ctx{min-height:44px;border-radius:22px;padding-left:14px}.g-ctx-x{width:44px;height:44px}}

/* the box: a field with the mic key at its right end, then the round ask key .g-askgo */
.g-askbox{position:relative;flex:1 1 200px;min-width:0}
.g-askbox input{width:100%;height:44px;padding:0 48px 0 14px;border:0;border-radius:13px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--hair);color:var(--t1);font:400 15px/1 var(--g-font)}
.g-askbox input::placeholder{color:var(--t3);opacity:1}
.g-askbox input:focus-visible{outline:2px solid var(--g-focus);outline-offset:2px}
.g-askbox input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px rgba(226,164,71,0.6)}
.g-mic{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--t2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 150ms var(--ease),background-color 150ms var(--ease)}
.g-mic svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.g-mic:hover{color:var(--t1);background:rgba(255,255,255,0.06)}}
.g-mic[aria-pressed="true"]{color:var(--t1);background:var(--key);box-shadow:inset 0 0 0 1px var(--key-line)}
.g-mic:focus-visible{outline:2px solid var(--g-focus);outline-offset:0}
@media (pointer:coarse),(max-width:899px){.g-mic::after{content:"";position:absolute;inset:-4px}}
/* the box's ask key (fix round 1, A4): the head keys' quiet round face at 44px, an up arrow; never a strong pill. It reads
   t1 once there are words to ask */
.g-askgo{width:44px;height:44px}
.g-askgo svg{width:18px;height:18px}
.g-askbox:has(input:not(:placeholder-shown))+.g-askgo{--g-fg:var(--t1)}

/* listening: the orb turns, "Listening" in t1, one line in t2, a Stop pill */
.g-listen{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border-radius:var(--rt);background:var(--tile);box-shadow:inset 0 0 0 1px var(--tline)}
.g-listen-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.g-listen-t>:first-child{font-size:15px;line-height:1.3;color:var(--t1)}
.g-listen-t>:last-child{font-size:12.5px;line-height:1.35;color:var(--t2)}

/* the panel head's orb key (desk only): "Ask about this", 28px round, left of the open arrow; shown on hover and focus */
.g-askkey{display:none}
@media (min-width:900px){
  :is(.g-panel,[data-card]):is(:hover,:focus-within) .g-askkey{position:relative;flex:none;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,0.045);box-shadow:inset 0 0 0 1px var(--hair);transition:background-color 150ms var(--ease)}
  .g-askkey canvas{display:block;width:18px;height:18px}
  .g-askkey:hover{background:rgba(255,255,255,0.085)}
  .g-askkey:focus-visible{outline:2px solid var(--g-focus);outline-offset:2px}
  .g-askkey::after{content:"";position:absolute;inset:-4px}
}

/* the sheet foot's "Ask about <name>": a pill with the orb drawn still at 16px */
.g-askabout .g-orb-xs,.g-askabout .g-orb-xs canvas{width:16px;height:16px}
.g-askabout{white-space:normal;text-align:left}
.g-sheet-foot:has(.g-askabout){flex-wrap:wrap;justify-content:flex-end}

/* D4 (unit 4): a Coming next pencil in a page's grid is as tall as its words, never stretched to its row */
:is(.grid,[class$="-grid"],[class*="-grid "])>.g-pencil{align-self:start}
/* the neutral count (addendum call 2): new finds, never red or amber; the soft grey key face, the figure in t1 */
.g-badge.is-quiet{background:#3A3C38;color:var(--t1);box-shadow:0 0 0 2px var(--room),inset 0 0 0 1px rgba(255,255,255,0.10)}
.g-placebar .g-badge.is-quiet{box-shadow:0 0 0 2px #1E201D,inset 0 0 0 1px rgba(255,255,255,0.10)}
/* the assistant sheet on a phone: the full height, its box near the top so the keyboard never covers it */
@media (max-width:899px){.g-sheet.as-sheet{top:calc(8px + env(safe-area-inset-top,0px));max-height:none}}

/* A forecast (Chad, 4 Nov; GLASS-GUIDE section 6, "A forecast"). The one figure that is not exact, so it never looks like one:
   always a range, "likely" before it and "to" between in t2, its figures a step lighter than an exact figure (t2 on the
   panel, the unit at half size), a 1px dashed underline in ink-2 (dashed is the kit's word for "not settled": the dashed
   chip, the usual line, the band's edge), then the dashed "Forecast" chip and its record in plain words, t3. Never amber,
   never red, never green: a forecast is calm. Drawn only when DM.forecast proves it; otherwise nothing is drawn. */
.g-fc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.g-fc-fig{font-family:var(--g-font);font-weight:300;font-size:24px;line-height:1.15;letter-spacing:-0.02em;color:var(--t2);font-feature-settings:"tnum" 1;margin:0;
  padding-bottom:3px;background:linear-gradient(90deg,var(--ink-2) 50%,transparent 0) 0 100%/6px 1px repeat-x}
.g-fc-fig .g-nw{white-space:nowrap}
@media (max-width:899px){.g-fc-fig{font-size:22px}}
.g-fc-fig .g-fc-w{font-size:max(11px,0.5em);letter-spacing:0;color:var(--t2)}
.g-fc-fig .g-cur,.g-fc-fig .g-u{color:var(--t3)}
.g-fc-rec{flex-basis:100%;margin:0;font-size:12px;line-height:1.4;color:var(--t3)}
.g-fc-rec .g-status{margin-right:6px;vertical-align:middle}
/* A forecast in a line (.g-fc.is-line, round 2): the same part at body size, for a row inside a panel: its words, the range
   with its dashed underline, the chip and the record run on one line and wrap as words do */
.g-fc.is-line{display:block;line-height:1.7}
.g-fc.is-line>*{display:inline;margin-right:8px}
.g-fc.is-line .g-fc-fig{font-size:16px;line-height:1.5}
.g-fc.is-line .g-fc-rec .g-status{margin-right:6px}