/* The shell (spec §6, §10; canvas "Orbit" boards): the frame every screen shares — the header with the brand, the
   pill nav, the account menu, the phone's tab bar and the footer — and the controls every screen uses: cards,
   buttons, fields, chips, notices and banners, and long lists folded to their newest five; plus the sign-in screen,
   First sign-in's card over it, the agreement and error pages.

   Intention: every screen looks like its canvas board, drawn only from the Orbit skin's tokens, so a screen's own
   stylesheet (today.css, meals.css, ...) only adds what is particular to it.
   Design: classes only (the CSP forbids inline styles); colors and fonts come from static/skins/orbit.css. The
   frame is the desktop boards' (1312 px wide, 64 px gutters, cards with 28 px corners); under 720 px it becomes the
   mobile boards' (20 px gutters, no brand bar, a tab bar at the bottom). Widths that depend on data (a macro bar's
   share, a meter's fill) use the w-0 … w-100 classes at the end. The Google button follows Google's branding.
   Shared components live here once, for every page that draws them: one focus outline; the note box (with its warn
   and alert tints); the time field and its time pill; the amount stepper; small chips (chip-sm, chip-xs) and small
   links (link-xs); the 38 px field (input-sm); the page title; the range picker (7, 30 or 90 days); the empty row;
   the 18 px checkbox; the meal picker; Test with a meal's form; and what drag.js puts on a dragged item, the page
   and the target under it. A screen's own stylesheet only places them or adjusts them. */

/* ---- the frame ---- */

.frame {
  position: relative; z-index: 1; max-width: 1312px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 64px) 40px;
  font-variant-numeric: tabular-nums;
}
.page { position: relative; z-index: 1; }
.page-plain { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; box-sizing: border-box; }

.topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0;
}
.topbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.brand {
  display: flex; align-items: center; gap: 10px; color: var(--o-text); font-size: 15px; font-weight: 600;
  text-decoration: none;
}
.brand-mark { flex: none; }
.brand-outer { fill: none; stroke: var(--o-line-4); }
.brand-inner { fill: none; stroke: var(--o-flare); }
.brand-moon { fill: var(--o-flare); }

.tabs {
  display: flex; gap: 6px; padding: 4px; border-radius: 22px; background: var(--o-card); border: 1px solid var(--o-line);
}
.tab { padding: 9px 18px; border-radius: 18px; color: var(--o-muted); font-size: 14px; text-decoration: none; }
.tab:hover { color: var(--o-text); }
.tab[aria-current="page"] { background: var(--o-pill); color: var(--o-strong); }


.icon-button {
  width: 44px; height: 44px; box-sizing: border-box; border-radius: 22px; border: 1px solid var(--o-line);
  background: var(--o-card); color: var(--o-soft); display: flex; align-items: center; justify-content: center;
  cursor: pointer; list-style: none;
}
.icon-button::-webkit-details-marker { display: none; }
.icon-button:hover { color: var(--o-strong); }

/* the account menu: the round account button opens a small panel */
.account-menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: 52px; z-index: 6; min-width: 220px; padding: 6px; border-radius: 18px;
  background: var(--o-raised); border: 1px solid var(--o-line-2); box-shadow: 0 24px 48px var(--o-shadow);
}
.menu-pop form { margin: 0; }
.menu-who { margin: 0; padding: 10px 12px 8px; font-size: 12px; color: var(--o-muted); overflow-wrap: anywhere; }
.menu-who strong { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--o-text); }
.menu-item {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--o-text); font: inherit; font-size: 14px; text-align: left;
  text-decoration: none; cursor: pointer;
}
.menu-item:hover { background: var(--o-pill); }
.menu-item:focus-visible { outline-offset: -2px; }  /* the focus ring inside its menu, for the arrow keys */

/* the phone's tab bar (hidden on wide screens) */
.tabbar { display: none; }

.foot {
  margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px;
  color: var(--o-faint);
}
.foot-short { display: none; }

/* a table of contents beside a page's sections (partials/controls.html toc: Settings): groups of links, the current
   one raised; it stays in view while the sections scroll (scrolling itself in a window too short for it), and a
   phone, which stacks every section, has none. With unsaved changes a section's dot shows (settings.js) */
.toc {
  box-sizing: border-box; padding: 18px 14px; border-radius: 24px; background: var(--o-card); border: 1px solid var(--o-line);
  position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto;
}
.toc-group { padding: 6px 0; }
.toc-name { padding: 6px 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--o-muted); }
.toc-name-on { color: var(--o-text); }
.toc-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; color: var(--o-muted);
  font-size: 14px; text-decoration: none;
}
.toc-item > span:first-child { flex: 1; min-width: 0; }
.toc-item:hover { color: var(--o-text); }
.toc-item[aria-current="true"] { background: var(--o-pill); color: var(--o-strong); }
.dirty-dot { flex: none; width: 7px; height: 7px; border-radius: 4px; background: var(--o-flare); visibility: hidden; }
.toc-item[data-dirty] .dirty-dot { visibility: visible; }

/* ---- cards and text ---- */

.card {
  box-sizing: border-box; padding: 24px 28px; border-radius: 28px; background: var(--o-card);
  border: 1px solid var(--o-line);
}
.card + .card { margin-top: 24px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-title { margin: 0; font-size: 15px; font-weight: 500; color: var(--o-text); }
h1, h2, h3 { color: var(--o-text); font-weight: 500; line-height: 1.25; margin: 0 0 12px; }
h1 { font-size: 22px; }
h2 { font-size: 15px; }
p { line-height: 1.5; }
a { color: var(--o-soft); text-underline-offset: 3px; }
a:hover { color: var(--o-strong); }
.muted { color: var(--o-muted); font-size: 13px; }
.soft { color: var(--o-soft); }
.bad { color: var(--o-danger); }  /* a failure said in words: a rejected key, a failed count */
.eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--o-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
code { font-size: 13px; color: var(--o-soft); }
.phone-only { display: none; }
.hide-empty:empty { display: none; }  /* a slot that fills later (a result, a message, a panel): no box until then */
/* one focus outline: every control a keyboard reaches, and a label whose hidden radio or checkbox has focus (chips,
   segments, radio cards); zero specificity (:where), so a control with its own focus look keeps it */
:where(a, button, summary, input:not(.visually-hidden), select, textarea, [tabindex]):focus-visible,
:where(label:has(> input.visually-hidden:focus-visible)) { outline: 2px solid var(--o-blue-bright); outline-offset: 2px; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 4px; }
.dot-protein { background: var(--o-protein); }
.dot-carbs { background: var(--o-carbs); }
.dot-fat { background: var(--o-fat); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--o-muted); }
.legend span { display: flex; align-items: center; gap: 6px; }

/* ---- notices and banners ---- */

.notice {
  position: relative; z-index: 1; margin: 8px 0; padding: 12px 14px; border-radius: 16px;
  background: var(--o-warn-tint); color: var(--o-text); font-size: 13px; line-height: 1.5;
}
.notice-error { background: var(--o-pink-tint); }
.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 12px; padding: 14px 16px 14px 18px;
  border-radius: 20px; background: var(--o-card); border: 1px solid var(--o-line-2); font-size: 14px; line-height: 1.5;
}
.banner > span:first-of-type { flex: 1 1 240px; min-width: 0; }
.banner-icon { flex: none; stroke: var(--o-blue-soft); }
.banner-text { flex: 1 1 240px; min-width: 0; font-size: 14px; line-height: 1.5; }
.banner-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--o-muted); }
.banner-move { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 13px; }
.banner-move .check-line { display: flex; align-items: center; gap: 8px; }
.travel-records summary { color: var(--o-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; list-style: none; }
.travel-records ul { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--o-muted); }
.banner-buttons { display: flex; gap: 6px; margin-left: auto; }
.banner-buttons .button { height: 38px; font-size: 14px; }

/* ---- buttons ---- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; box-sizing: border-box;
  padding: 0 16px; border-radius: 12px; border: 1px solid var(--o-line-2); background: transparent;
  color: var(--o-text); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.button:hover { background: var(--o-pill); color: var(--o-text); }
.button-primary { border: 0; background: var(--o-flare); color: var(--o-on-ring); font-weight: 600; }
.button-primary:hover { background: var(--o-flare); color: var(--o-on-ring); opacity: 0.9; }
.button-raised { border-color: var(--o-line-2); background: var(--o-pill); color: var(--o-strong); }
.button-quiet { border-color: transparent; color: var(--o-muted); }
.button-quiet:hover { background: transparent; color: var(--o-strong); }
.button-danger { color: var(--o-danger); border-color: var(--o-danger-line); }
.button-small { height: 32px; padding: 0 12px; font-size: 12px; }
.button[disabled] { opacity: 0.4; cursor: default; }

.link {
  background: none; border: 0; padding: 0; color: var(--o-soft); font: inherit; font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link:hover { color: var(--o-strong); }
.link-danger { color: var(--o-danger); }
.link-xs { font-size: 11px; }  /* a card's small links: an ingredient's Nutrients and Remove, a workout's Use estimate */

/* ⋯ buttons, and the small menus they open */
.dots {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 18px; background: transparent;
  color: var(--o-muted); display: flex; align-items: center; justify-content: center; cursor: pointer;
  list-style: none;
}
.dots::-webkit-details-marker { display: none; }
.dots:hover { background: var(--o-pill); color: var(--o-strong); }
.more { position: relative; flex: none; }
.more .menu-pop { top: 40px; min-width: 160px; }

/* what follows the pointer while something is dragged to another meal (static/js/drag.js: Today and Review) */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 40; max-width: 220px; padding: 8px 12px; border-radius: 14px;
  background: var(--o-raised); border: 1px solid var(--o-line-4); box-shadow: 0 16px 32px var(--o-shadow);
  color: var(--o-text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
/* drag.js's own classes: the item lifts, the page shows the grab, and the target under the pointer lights up (outlines
   and shadows only, so nothing shifts while dragging) */
.drag-lifted { opacity: 0.4; }
body.dragging, body.dragging [data-move] { cursor: grabbing; }
body.dragging .drop-target {
  background: var(--o-raised); box-shadow: 0 0 0 6px var(--o-raised); outline: 1.5px dashed var(--o-flare);
  outline-offset: 6px;
}

/* ---- chips, tags, toasts, counters and tables ---- */

a.chip { text-decoration: none; display: inline-flex; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid var(--o-line-2); border-radius: 16px; background: transparent; color: var(--o-muted);
  font: inherit; font-size: 13px; cursor: pointer;
}
.chip:hover { color: var(--o-text); }
.chip-on, .chip:has(input:checked) { background: var(--o-pill); color: var(--o-strong); border-color: var(--o-pill); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
/* smaller chips: chip-sm for Settings' and Trends' rows, chip-xs inside a card (a workout's activities, an
   ingredient's portions, a blood sugar reading's context), whose picked one takes the flare's outline */
.chip-sm { height: 30px; padding: 0 13px; border-radius: 15px; font-size: 13px; }
.chip-xs { height: 28px; padding: 0 11px; border-radius: 14px; font-size: 12px; list-style: none; }
.chip-xs::-webkit-details-marker { display: none; }
.chip-xs.chip-on, .chip-xs:has(input:checked) { border-color: var(--o-flare); }

/* a segmented control: one pill group, the picked part raised */
.segments {
  display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--o-raised); border: 1px solid var(--o-line);
}
.segment {
  flex: 1; display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px;
  border-radius: 10px; color: var(--o-muted); font-size: 13px; text-decoration: none; cursor: pointer;
}
.segment:hover { color: var(--o-text); }
.segment[aria-current="page"], .segment:has(input:checked) { background: var(--o-pill); color: var(--o-strong); }
/* the meal picker (partials/controls.html meal_picker): the four meals in one row, on Review, Meals and the Move sheet */
.meal-picker { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 16px; background: var(--o-card); }
.meal-picker .segment { height: 36px; padding: 0; border-radius: 12px; font-size: 12px; }

/* the range picker: 7, 30 or 90 days (Admin's sections, Trends), its links as chips in one pill group; range-fill
   spreads them over the width on a phone */
.range { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--o-line); border-radius: 18px; background: var(--o-bg); }
.range a { padding: 7px 14px; border-radius: 14px; color: var(--o-muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.range a:hover { color: var(--o-strong); }
.range a[aria-current] { background: var(--o-pill); color: var(--o-strong); }

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px;
  white-space: nowrap;
}
.tag-ai { border: 1px dashed var(--o-faint); color: var(--o-soft); }
/* where a food's numbers come from: the ingredient card and Settings' meal test */
.source-chip { flex: none; padding: 1px 7px; border-radius: 9px; font-size: 11px; white-space: nowrap; }
.source-usda { padding: 2px 8px; background: var(--o-usda-bg); color: var(--o-usda); }
.source-ai { border: 1px dashed var(--o-faint); color: var(--o-soft); }
.source-nutritionist_ai { padding: 2px 8px; background: var(--o-certified-bg); color: var(--o-certified); }  /* certified: green */
.source-user, .source-label { border: 1px solid var(--o-line-4); color: var(--o-text); }
/* a part of a page that refreshes itself (AI status after a meal test): no box of its own, so the layout is the same */
.live { display: contents; }
/* a long list folded to its newest five (partials/fold.html): while shut, the rows past five hide; app.js opens it */
[data-fold="shut"] > [data-fold-rest] { display: none; }
.fold-bar { margin-top: 10px; }  /* Show all N / Show fewer, under its list */
/* a fold: a details whose summary carries a drawn chevron that turns when it opens (Settings' AI card, and Foods &
   meals' names for catalog items) */
.fold { margin-top: 18px; border-top: 1px solid var(--o-line); }
.fold + .fold { margin-top: 14px; }
.fold > summary {
  display: flex; align-items: center; gap: 10px; padding-top: 14px; font-size: 14px; cursor: pointer; list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before {
  content: ""; flex: none; width: 6px; height: 6px; margin: 0 3px; border: solid var(--o-muted);
  border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform 120ms ease;
}
.fold[open] > summary::before { transform: rotate(45deg); }
/* Test with a meal (partials/ai.html, Settings' AI card and Admin's AI status): the meal's box and Run beside it, then
   the result: each food, its source, the total */
.try-form { display: flex; gap: 10px; margin: 0; }
.try-text { flex: 1; min-width: 0; }
.try-result { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--o-bg); border: 1px solid var(--o-line); }
.try-result .note-box { margin: 0; }
.try-result:has(> .note-box) { padding: 0; border: 0; background: none; }  /* a failure: the alert note alone */
.try-meta { margin: 0 0 6px; font-size: 12px; color: var(--o-muted); }
.try-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.try-table th, .try-table td { padding: 8px 0; border-bottom: 1px solid var(--o-line); text-align: left; }
.try-table th { width: 100%; font-weight: 500; }  /* the name takes the spare width; amounts sit by the calories */
.try-table td { padding-left: 14px; white-space: nowrap; }
.try-amount, .try-kcal { text-align: right !important; color: var(--o-muted); }
.try-kcal { color: var(--o-text); }
.try-table tfoot th, .try-table tfoot td { border-bottom: 0; font-weight: 500; }
.tag-check { background: var(--o-warn-tint); color: var(--o-warn); }
.time-chip { flex: none; padding: 4px 10px; border-radius: 12px; background: var(--o-track); font-size: 12px; }
.icon { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--o-warn); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.toast { list-style: none; padding: 12px 14px; border-radius: 14px; background: var(--o-pill); font-size: 13px; }
.counter { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--o-muted); }
.counter-warn { color: var(--o-warn); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--o-line); }
th { color: var(--o-muted); font-weight: 400; font-size: 12px; }

/* a thin bar: a track with a fill whose width is a w-N class */
.bar { display: block; height: 3px; border-radius: 2px; background: var(--o-track); }
.bar-fill { display: block; height: 3px; border-radius: 2px; background: var(--o-soft); }
.bar-fill-warn { background: var(--o-warn); }
.bar-fill-over { background: var(--o-comet); }
.bar-fill-ring { background: var(--o-flare); }

/* a macro mix: protein, carbs and fat as three segments whose widths are w-N classes */
.mix { display: flex; gap: 2px; height: 4px; }
.seg { display: block; height: 4px; border-radius: 2px; }
.seg-protein { background: var(--o-protein); }
.seg-carbs { background: var(--o-carbs); }
.seg-fat { background: var(--o-fat); }

/* a nutrient's dot: calories, the three macros, and the minors */
.ndot { flex: none; width: 7px; height: 7px; border-radius: 4px; }
.ndot-calories { background: var(--o-flare); }
.ndot-protein { background: var(--o-protein); }
.ndot-carbs { background: var(--o-carbs); }
.ndot-fat { background: var(--o-fat); }
.ndot-minor { background: var(--o-line-4); }

/* ---- forms ---- */

.field { display: grid; gap: 8px; min-width: 0; font-size: 14px; color: var(--o-text); }
.field select, .field input, .field textarea {
  height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 14px; border: 1px solid var(--o-line-2);
  background: var(--o-bg); color: var(--o-text); font: inherit; font-size: 15px; color-scheme: var(--o-scheme);
  width: 100%; min-width: 0;
}
.field textarea { height: auto; min-height: 96px; padding: 10px 12px; }
.hint { margin: -2px 0 0; font-size: 12px; line-height: 1.5; color: var(--o-muted); }
input::placeholder, textarea::placeholder { color: var(--o-faint); }
/* the 38 px field: a compact box or select in a row (Settings' rows and cells, Admin's counters, Test with a meal);
   input and select in the selector, so it wins over .field's 44 px boxes */
input.input-sm, select.input-sm {
  height: 38px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--o-line-2); border-radius: 12px;
  background: var(--o-bg); color: var(--o-text); font: inherit; font-size: 14px; color-scheme: var(--o-scheme);
}
input.input-sm:focus-visible, select.input-sm:focus-visible { border-color: var(--o-line-4); }
.checkbox { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--o-flare); }  /* the 18 px checkbox */

/* the time field: a row with its words and the time as a pill (Review's Eaten at, the Move sheet's Time); the pill
   alone where a time sits in a sentence (Meals' Log it for) */
.time-field {
  display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 16px; border-radius: 16px;
  background: var(--o-card); border: 1px solid var(--o-line); font-size: 14px;
}
.time-field > span:first-child { flex: 1; min-width: 0; }
.time-pill {
  height: 36px; box-sizing: border-box; padding: 0 10px; border: 0; border-radius: 12px; background: var(--o-pill);
  color: var(--o-strong); font: inherit; font-size: 14px; color-scheme: var(--o-scheme);
}

/* the amount stepper: − box + on the track (an ingredient's amount, a workout's minutes) */
.stepper { display: flex; align-items: center; border-radius: 14px; background: var(--o-track); }
.step {
  width: 30px; height: 34px; border: 0; background: transparent; color: var(--o-soft); font: inherit; font-size: 16px;
  cursor: pointer;
}
.step:hover { color: var(--o-strong); }

/* a page's title (Settings, Admin, Trends) */
.page-title { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -0.02em; }

/* an empty list's row: a dashed line with what isn't there yet (a meal on Today, the day's workouts) */
.empty-row { margin: 0; padding: 14px 0; border-bottom: 1px dashed var(--o-line-2); font-size: 13px; color: var(--o-faint); }

/* ---- a note box: a quiet note with its icon (info), warn-tinted (a free plan's lock, a refused plan) or an alert
   (a failure, a missing key) ---- */

.note-box {
  display: flex; gap: 10px; margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--o-bg);
  border: 1px solid var(--o-line); font-size: 13px; line-height: 1.5; color: var(--o-soft);
}
.note-box svg {
  flex: none; margin-top: 2px; fill: none; stroke: var(--o-muted); stroke-width: 1.75; stroke-linecap: round;
  stroke-linejoin: round;
}
.note-box-warn { background: var(--o-warn-tint); border-color: transparent; color: var(--o-text); }
.note-box-warn svg { stroke: var(--o-warn); }
.note-box-alert { background: var(--o-comet-tint); border-color: var(--o-comet-line); color: var(--o-comet-soft); }
.note-box-alert svg { stroke: var(--o-comet); }

/* ---- sign-in ---- */

/* The board's screen: padded, the content centred in the whole window, and the notice pinned 24 px above the bottom
   outside the flow (back in the flow on a window too short to keep it clear of the content). */
.signin-body {
  position: relative; box-sizing: border-box; min-height: 100vh; padding: 48px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.signin-body .page-plain {
  width: 100%; max-width: none; padding: 0; display: flex; flex-direction: column; align-items: center;
}
.signin { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.signin-art { position: relative; width: 300px; height: 300px; }
.signin-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.signin-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--o-muted); }
.art-line { fill: none; stroke: var(--o-line); }
.art-tick { stroke: var(--o-faint); }
.art-track { fill: none; stroke: var(--o-track); }
.art-ring { fill: none; stroke: var(--o-flare); }
.art-protein { fill: none; stroke: var(--o-protein); }
.art-carbs { fill: none; stroke: var(--o-carbs); }
.art-fat { fill: none; stroke: var(--o-fat); }
.art-glow { fill: var(--o-flare); }
.art-now { fill: var(--o-bg); stroke: var(--o-flare); }
.signin-title {
  margin: 28px 0 0; font-size: 34px; font-weight: 300; line-height: normal; letter-spacing: -0.03em; color: var(--o-text);
}
.signin-heading {
  margin: 28px 0 0; font-size: 28px; font-weight: 300; line-height: normal; letter-spacing: -0.02em; color: var(--o-text);
}
.signin-lede { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--o-muted); }
.signin-lede strong { color: var(--o-text); font-weight: 400; }
.signin-form { display: flex; flex-direction: column; align-items: center; margin: 0; }
.signin-form .google-button { margin-top: 28px; }  /* nothing to tick above it */
.signin > .google-button { margin-top: 20px; }
.signin-fine { margin: 18px 0 0; font-size: 12px; line-height: 1.5; color: var(--o-faint); }
.signin-fine a { color: var(--o-soft); text-underline-offset: auto; }
.signin-foot {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 1; box-sizing: border-box; max-width: 760px;
  margin: 0 auto; padding: 0 16px; text-align: center; font-size: 11px; line-height: 1.6; color: var(--o-faint);
}
.signin-foot a { color: var(--o-faint); }
@media (max-height: 620px) { .signin-foot { position: static; margin-top: 24px; padding: 0; } }

/* 46 px tall: the board's 44 px button plus its 1 px border. */
.google-button {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; box-sizing: border-box; padding: 0 16px 0 12px;
  border-radius: 22px; border: 1px solid var(--o-g-line); background: var(--o-g-bg); color: var(--o-g-text);
  font-family: "Roboto", system-ui, sans-serif; font-weight: 500; font-size: 14px;
  text-decoration: none; cursor: pointer;
}
.google-button:hover { background: var(--o-g-hover); color: var(--o-g-text); }
.google-mark { flex: none; }

/* ---- the agreement and errors ---- */

.agreement { max-width: 760px; margin: 0 auto; }
.agreement-text ol { padding-left: 20px; display: grid; gap: 10px; }
.agreement-text li { line-height: 1.55; color: var(--o-soft); }
.agreement-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.agreement-actions form { margin: 0; }
.error-page { max-width: 560px; margin: 48px auto; text-align: center; }

/* ---- phones: the mobile boards (390 px) ---- */

@media (max-width: 719px) {
  .frame { padding: 20px 20px calc(112px + env(safe-area-inset-bottom)); }
  .topbar { padding: 0; }
  .topbar-left, .account-menu { display: none; }
  .topbar-right { width: 100%; flex-direction: column; gap: 8px; }
  .topbar-right:empty { display: none; }
  .card { padding: 18px 16px; border-radius: 24px; }
  .card + .card { margin-top: 18px; }
  .foot { margin-top: 20px; font-size: 11px; }
  .banner { gap: 8px 10px; padding: 12px 12px 12px 14px; margin-top: 14px; }
  .banner-text { font-size: 13px; }
  .banner-sub { font-size: 11px; }
  .banner-buttons .button { height: 34px; font-size: 13px; }
  .foot-long { display: none; }
  .foot-short { display: inline; }
  .desk-only { display: none; }
  .phone-only { display: inline; }
  .tabbar {
    position: fixed; left: 20px; right: 20px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 10;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 6px; border-radius: 28px;
    background: var(--o-raised); border: 1px solid var(--o-line-2);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 22px;
    color: var(--o-muted); font-size: 11px; text-decoration: none;
  }
  .tabbar a[aria-current="page"] { background: var(--o-pill); color: var(--o-strong); }
  .tabbar svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .signin-body { padding: 40px 24px; }
  .signin-art { width: 240px; height: 240px; }
  .signin-title { margin-top: 24px; font-size: 30px; }
  .signin-heading { margin-top: 24px; font-size: 24px; }
  .page-title { font-size: 22px; }
  .toc { display: none; }
  .range-fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .range-fill a {
    display: flex; align-items: center; justify-content: center; min-height: 36px; box-sizing: border-box;
    padding: 0 4px; font-size: 12px;
  }
  body.dragging .drop-target { box-shadow: 0 0 0 4px var(--o-raised); outline-offset: 4px; }
}

/* ---- widths that depend on data (a share, a fill), in whole percent ---- */

.w-0 { width: 0; } .w-1 { width: 1%; } .w-2 { width: 2%; } .w-3 { width: 3%; } .w-4 { width: 4%; }
.w-5 { width: 5%; } .w-6 { width: 6%; } .w-7 { width: 7%; } .w-8 { width: 8%; } .w-9 { width: 9%; }
.w-10 { width: 10%; } .w-11 { width: 11%; } .w-12 { width: 12%; } .w-13 { width: 13%; } .w-14 { width: 14%; }
.w-15 { width: 15%; } .w-16 { width: 16%; } .w-17 { width: 17%; } .w-18 { width: 18%; } .w-19 { width: 19%; }
.w-20 { width: 20%; } .w-21 { width: 21%; } .w-22 { width: 22%; } .w-23 { width: 23%; } .w-24 { width: 24%; }
.w-25 { width: 25%; } .w-26 { width: 26%; } .w-27 { width: 27%; } .w-28 { width: 28%; } .w-29 { width: 29%; }
.w-30 { width: 30%; } .w-31 { width: 31%; } .w-32 { width: 32%; } .w-33 { width: 33%; } .w-34 { width: 34%; }
.w-35 { width: 35%; } .w-36 { width: 36%; } .w-37 { width: 37%; } .w-38 { width: 38%; } .w-39 { width: 39%; }
.w-40 { width: 40%; } .w-41 { width: 41%; } .w-42 { width: 42%; } .w-43 { width: 43%; } .w-44 { width: 44%; }
.w-45 { width: 45%; } .w-46 { width: 46%; } .w-47 { width: 47%; } .w-48 { width: 48%; } .w-49 { width: 49%; }
.w-50 { width: 50%; } .w-51 { width: 51%; } .w-52 { width: 52%; } .w-53 { width: 53%; } .w-54 { width: 54%; }
.w-55 { width: 55%; } .w-56 { width: 56%; } .w-57 { width: 57%; } .w-58 { width: 58%; } .w-59 { width: 59%; }
.w-60 { width: 60%; } .w-61 { width: 61%; } .w-62 { width: 62%; } .w-63 { width: 63%; } .w-64 { width: 64%; }
.w-65 { width: 65%; } .w-66 { width: 66%; } .w-67 { width: 67%; } .w-68 { width: 68%; } .w-69 { width: 69%; }
.w-70 { width: 70%; } .w-71 { width: 71%; } .w-72 { width: 72%; } .w-73 { width: 73%; } .w-74 { width: 74%; }
.w-75 { width: 75%; } .w-76 { width: 76%; } .w-77 { width: 77%; } .w-78 { width: 78%; } .w-79 { width: 79%; }
.w-80 { width: 80%; } .w-81 { width: 81%; } .w-82 { width: 82%; } .w-83 { width: 83%; } .w-84 { width: 84%; }
.w-85 { width: 85%; } .w-86 { width: 86%; } .w-87 { width: 87%; } .w-88 { width: 88%; } .w-89 { width: 89%; }
.w-90 { width: 90%; } .w-91 { width: 91%; } .w-92 { width: 92%; } .w-93 { width: 93%; } .w-94 { width: 94%; }
.w-95 { width: 95%; } .w-96 { width: 96%; } .w-97 { width: 97%; } .w-98 { width: 98%; } .w-99 { width: 99%; }
.w-100 { width: 100%; }

/* ---- heights that depend on data (a gridline, a goal), in whole percent from the top ---- */

.top-0 { top: 0%; } .top-1 { top: 1%; } .top-2 { top: 2%; } .top-3 { top: 3%; } .top-4 { top: 4%; }
.top-5 { top: 5%; } .top-6 { top: 6%; } .top-7 { top: 7%; } .top-8 { top: 8%; } .top-9 { top: 9%; }
.top-10 { top: 10%; } .top-11 { top: 11%; } .top-12 { top: 12%; } .top-13 { top: 13%; } .top-14 { top: 14%; }
.top-15 { top: 15%; } .top-16 { top: 16%; } .top-17 { top: 17%; } .top-18 { top: 18%; } .top-19 { top: 19%; }
.top-20 { top: 20%; } .top-21 { top: 21%; } .top-22 { top: 22%; } .top-23 { top: 23%; } .top-24 { top: 24%; }
.top-25 { top: 25%; } .top-26 { top: 26%; } .top-27 { top: 27%; } .top-28 { top: 28%; } .top-29 { top: 29%; }
.top-30 { top: 30%; } .top-31 { top: 31%; } .top-32 { top: 32%; } .top-33 { top: 33%; } .top-34 { top: 34%; }
.top-35 { top: 35%; } .top-36 { top: 36%; } .top-37 { top: 37%; } .top-38 { top: 38%; } .top-39 { top: 39%; }
.top-40 { top: 40%; } .top-41 { top: 41%; } .top-42 { top: 42%; } .top-43 { top: 43%; } .top-44 { top: 44%; }
.top-45 { top: 45%; } .top-46 { top: 46%; } .top-47 { top: 47%; } .top-48 { top: 48%; } .top-49 { top: 49%; }
.top-50 { top: 50%; } .top-51 { top: 51%; } .top-52 { top: 52%; } .top-53 { top: 53%; } .top-54 { top: 54%; }
.top-55 { top: 55%; } .top-56 { top: 56%; } .top-57 { top: 57%; } .top-58 { top: 58%; } .top-59 { top: 59%; }
.top-60 { top: 60%; } .top-61 { top: 61%; } .top-62 { top: 62%; } .top-63 { top: 63%; } .top-64 { top: 64%; }
.top-65 { top: 65%; } .top-66 { top: 66%; } .top-67 { top: 67%; } .top-68 { top: 68%; } .top-69 { top: 69%; }
.top-70 { top: 70%; } .top-71 { top: 71%; } .top-72 { top: 72%; } .top-73 { top: 73%; } .top-74 { top: 74%; }
.top-75 { top: 75%; } .top-76 { top: 76%; } .top-77 { top: 77%; } .top-78 { top: 78%; } .top-79 { top: 79%; }
.top-80 { top: 80%; } .top-81 { top: 81%; } .top-82 { top: 82%; } .top-83 { top: 83%; } .top-84 { top: 84%; }
.top-85 { top: 85%; } .top-86 { top: 86%; } .top-87 { top: 87%; } .top-88 { top: 88%; } .top-89 { top: 89%; }
.top-90 { top: 90%; } .top-91 { top: 91%; } .top-92 { top: 92%; } .top-93 { top: 93%; } .top-94 { top: 94%; }
.top-95 { top: 95%; } .top-96 { top: 96%; } .top-97 { top: 97%; } .top-98 { top: 98%; } .top-99 { top: 99%; }
.top-100 { top: 100%; }