/*
 * ლურჯი სუფრა across the whole app: the beta skin.
 *
 * Linked by the locale layout only when an administrator has switched the
 * beta on (lib/design.ts), which also sets data-design="supra" on <html>.
 * Nobody else downloads this file, and without that attribute none of it
 * applies.
 *
 * The app's pages are already built from tokens (globals.css), so the skin is
 * mostly a set of tokens rather than a second copy of every page:
 *
 *   the cloth   the page itself: indigo, cotton-white type, yolk for the one
 *               action. A dark scheme in blue, which every page already knows
 *               how to be, because every page already supports dark mode.
 *   the paper   every .card is a sheet of cotton paper laid on the cloth, with
 *               ink type: the same tokens again, redefined inside the card, so
 *               whatever a card holds (bars, chips, fields) turns to paper too.
 *
 * Titles (.display) are set in Mtavruli by a font, not by changing the text:
 * supra-caps.woff2 is Noto Sans Georgian with every Mkhedruli letter drawn as
 * its Mtavruli capital. CSS uppercase does nothing to Georgian in Chrome, and
 * rewriting the text would change what is copied and what a screen reader
 * reads. Figures keep the face's full width, heavy: narrow figures read small.
 *
 * The two fonts are preloaded with the page (layout.tsx) and set to
 * font-display: block: a title waits, unseen, the moment it takes them to
 * arrive and then appears once, in its capitals. With swap it was drawn in
 * ordinary Mkhedruli first and jumped to Mtavruli seconds later, which read
 * as text resizing; with optional a phone on 4G missed the window and showed
 * no capitals at all on a first visit.
 *
 * The selectors carry :root three times so they outrank every scheme and
 * Chamiko+ colour theme in globals.css (the strongest is (0,3,0)) whatever
 * order the two files arrive in.
 */

@font-face {
  font-family: "Supra Caps";
  src: url("/beta/supra-caps.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: block;
}
@font-face {
  font-family: "Supra Noto";
  src: url("/beta/supra-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: block;
}

/* ---------- the cloth ---------- */
:root:root:root[data-design="supra"] {
  color-scheme: dark;

  --background: #1f3a93;
  --background-tint: #1a3282;
  --surface: #2a48a8;
  /* Inset, a shade under the cloth, so a selected tab or a well reads as one. */
  --surface-muted: #1d3587;
  --foreground: #fbfaf6;
  --foreground-2: #dfe3f2;
  --muted: #c3cbe8;
  --border: #4560bb;
  --border-soft: #3550ae;

  --primary: #ffc233;
  --primary-hover: #ffd15e;
  --primary-soft: #33468f;
  --on-primary: #14204f;

  --gold: #ffd27a;
  --gold-soft: rgba(255, 210, 122, 0.12);
  --gold-line: rgba(255, 210, 122, 0.4);

  --protein: #ff8a6e;
  --fat: #ffc233;
  --carbs: #f3e3c0;
  --track: #2f4ca6;

  --cat-bakery: #f0a868;
  --cat-fresh: #8fe0ae;

  --danger: #ffa08c;
  --success: #8fe0ae;

  /* Printed, not lit: a solid offset in the cloth's own shadow. */
  --shadow-card: 4px 6px 0 rgba(13, 24, 74, 0.45);

  /* The cloth itself, which a colour theme changes (see the end of the file):
     its colour, the same in shadow (header, footer), and the action colour
     on paper, which is the cloth's own. */
  --sp-cloth: #1f3a93;
  --sp-deep: #172b73;
  --sp-header: rgba(23, 43, 115, 0.9);
  --sp-paper-primary: #1f3a93;
  --sp-paper-primary-hover: #2c4bb0;
  --sp-paper-primary-soft: #e3e8f7;

  /* The phone pieces (tab bar, log sheet, rows) read these, so one set of
     rules serves both schemes. In the dark they are deep cloth. */
  --sp-paper: var(--sp-deep);
  --sp-paper-glass: color-mix(in srgb, var(--sp-deep) 97%, transparent);
  --sp-paper-2: rgba(251, 250, 246, 0.08);
  --sp-ink: #fbfaf6;
  --sp-ink-2: #c3cbe8;
  --sp-line: rgba(251, 250, 246, 0.14);
  --sp-tile-shadow: 3px 4px 0 rgba(0, 0, 0, 0.22);
  --sp-danger: #ffa08c;
  --sp-tab-on: rgba(251, 250, 246, 0.16);
  --sp-tab-on-ink: #fbfaf6;
  --sp-lead: #2c4bb0;
  --sp-page: var(--sp-cloth);
  /* The phone's status bar (lib/theme.ts reads it). */
  --sp-chrome: var(--sp-deep);

  /* The cloth's field: small printed diamonds, barely there. */
  --sp-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23fbfaf6' fill-opacity='.075'%3E%3Cpath d='M18 14.5l3 3.5-3 3.5-3-3.5z'/%3E%3Cpath d='M54 50.5l3 3.5-3 3.5-3-3.5z'/%3E%3C/g%3E%3C/svg%3E");
  --sp-field-cloth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23fbfaf6' fill-opacity='.075'%3E%3Cpath d='M18 14.5l3 3.5-3 3.5-3-3.5z'/%3E%3Cpath d='M54 50.5l3 3.5-3 3.5-3-3.5z'/%3E%3C/g%3E%3C/svg%3E");
  --sp-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 8L7 0l7 8z' fill='%23fbfaf6'/%3E%3C/svg%3E");
}
:root[data-design="supra"] body {
  background: var(--background) var(--sp-field);
}

/* ---------- the light scheme: the cloth turned over ---------- */
/* Paper is the ground and ink the print; the cloth's blue becomes the colour
   of the buttons, and yolk stays the one action. Four :root so it outranks
   the colour themes below, whose cloth colours (--sp-cloth, --sp-deep) it
   still reads. */
:root:root:root:root[data-design="supra"][data-scheme="light"] {
  color-scheme: light;

  --background: #f1efe7;
  --background-tint: #e9e7de;
  --surface: #fbfaf6;
  --surface-muted: #e9e8df;
  --foreground: #14204f;
  --foreground-2: #3a4573;
  --muted: #5d6688;
  --border: #d9d8cc;
  --border-soft: #e4e3da;

  --primary: var(--sp-paper-primary);
  --primary-hover: var(--sp-paper-primary-hover);
  --primary-soft: var(--sp-paper-primary-soft);
  --on-primary: #fbfaf6;

  --gold: #7d5300;
  --gold-soft: rgba(154, 108, 24, 0.1);
  --gold-line: rgba(154, 108, 24, 0.3);

  --protein: #c4452c;
  --fat: #c68b00;
  --carbs: #a8865a;
  --track: #e4e3da;

  --cat-bakery: #b06a3c;
  --cat-fresh: #2f6b4f;

  --danger: #b3392c;
  --success: #2f6b4f;

  --shadow-card: 4px 6px 0 rgba(13, 24, 74, 0.12);
  --sp-header: rgba(241, 239, 231, 0.9);

  --sp-paper: #fbfaf6;
  --sp-paper-glass: rgba(251, 250, 246, 0.98);
  --sp-paper-2: #e9e8df;
  --sp-ink: #14204f;
  --sp-ink-2: #5d6688;
  --sp-line: #e4e3da;
  --sp-tile-shadow: 3px 4px 0 rgba(13, 24, 74, 0.14);
  --sp-danger: #b3392c;
  --sp-tab-on: var(--sp-deep);
  --sp-tab-on-ink: #fbfaf6;
  --sp-lead: var(--sp-deep);
  --sp-page: #f1efe7;
  --sp-chrome: #f1efe7;

  /* The same diamonds, printed in ink. */
  --sp-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%2314204f' fill-opacity='.05'%3E%3Cpath d='M18 14.5l3 3.5-3 3.5-3-3.5z'/%3E%3Cpath d='M54 50.5l3 3.5-3 3.5-3-3.5z'/%3E%3C/g%3E%3C/svg%3E");
}
/* The header is a strip of paper; the footer stays cloth, with its own
   light print. */
:root[data-design="supra"][data-scheme="light"] header.sticky {
  border-bottom-color: rgba(20, 32, 79, 0.12);
}
:root[data-design="supra"][data-scheme="light"] footer.border-t::before {
  /* The fish band is printed white; on paper it keeps its strip of cloth. */
  background-color: var(--sp-cloth);
}
:root:root:root:root[data-design="supra"][data-scheme="light"] footer.border-t {
  --foreground: #fbfaf6;
  --foreground-2: #dfe3f2;
  --muted: #c3cbe8;
  --border: #4560bb;
  --border-soft: #3550ae;
  --primary: #ffc233;
  color: var(--foreground);
}

/* ---------- cards in the dark: a shade deeper than the cloth ---------- */
:root:root:root[data-design="supra"] .card {
  --background: var(--sp-deep);
  --background-tint: rgba(0, 0, 0, 0.1);
  --surface: var(--sp-deep);
  --surface-muted: rgba(251, 250, 246, 0.07);
  --border: rgba(251, 250, 246, 0.2);
  --border-soft: rgba(251, 250, 246, 0.12);
  --primary-soft: rgba(255, 194, 51, 0.14);
  --track: rgba(251, 250, 246, 0.14);
  /* Resolved where they are set (on :root, from other tokens), so named
     again for the card. */
  --cat-dish: #ffd27a;
  --cat-fast: #ff8a6e;
  --cat-dairy: #9cc4f0;
  --cat-other: #c3cbe8;
  --cat-fresh: #8fe0ae;
  --cat-bakery: #f0a868;

  background-color: var(--sp-deep);
  color: var(--foreground);
  border-color: rgba(251, 250, 246, 0.14);
  border-radius: 0.5rem;
}

/* ---------- the paper ---------- */
/* In the light scheme everything inside a card reads its colours from here:
   ink on cotton. */
:root:root:root:root[data-design="supra"][data-scheme="light"] .card {
  --background: #fbfaf6;
  --background-tint: #f3f2ea;
  --surface: #fbfaf6;
  --surface-muted: #efeee6;
  --foreground: #14204f;
  --foreground-2: #3a4573;
  --muted: #565f86;
  --border: #d9d8cc;
  --border-soft: #e7e6dc;

  --primary: var(--sp-paper-primary);
  --primary-hover: var(--sp-paper-primary-hover);
  --primary-soft: var(--sp-paper-primary-soft);
  --on-primary: #fbfaf6;

  --gold: #7d5300;
  --gold-soft: rgba(154, 108, 24, 0.1);
  --gold-line: rgba(154, 108, 24, 0.3);

  --protein: #c4452c;
  --fat: #c68b00;
  --carbs: #a8865a;
  --track: #e4e3da;

  /* The category swatches are set on :root from other tokens, and a custom
     property is resolved where it is set, so inside a card they would still
     be the cloth's pale versions. Named again for paper. */
  --cat-dish: #7d5300;
  --cat-fast: #c4452c;
  --cat-dairy: #3f6f9e;
  --cat-other: #565f86;
  --cat-fresh: #2f6b4f;
  --cat-bakery: #b06a3c;

  --danger: #b3392c;
  --success: #2f6b4f;

  background-color: #fbfaf6;
  color: var(--foreground);
  border-color: #d9d8cc;
  border-radius: 0.5rem;
}
/* A card inside a card stays paper; the shadow belongs to the outer sheet. */
:root[data-design="supra"] .card .card {
  box-shadow: none;
}

/* ---------- type ---------- */
:root[data-design="supra"] .display {
  font-family: "Supra Caps", var(--font-georgian), sans-serif;
  font-weight: 850;
  font-stretch: 70%;
  letter-spacing: 0;
}
/* Figures: heavy and at full width. */
:root[data-design="supra"] .display.tnum,
:root[data-design="supra"] .tnum.display {
  font-family: "Supra Noto", var(--font-georgian), sans-serif;
  font-weight: 900;
  font-stretch: 100%;
}
:root[data-design="supra"] .eyebrow {
  border-radius: 999px;
}
/* The ledger rule, in the colour of whatever it is drawn on. */
:root[data-design="supra"] .ruled {
  border-top-color: currentColor;
}

/* ---------- controls ---------- */
/* Controls are pills, as on the front page. */
:root[data-design="supra"] .btn {
  border-radius: 999px;
  font-weight: 600;
}
:root[data-design="supra"] .btn-primary {
  font-weight: 700;
}
:root[data-design="supra"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-design="supra"] select,
:root[data-design="supra"] textarea {
  border-radius: 0.75rem;
}
:root[data-design="supra"] input[type="search"] {
  border-radius: 999px;
}

/* ---------- the header ---------- */
/* The sticky header is a strip of the cloth, a shade deeper. */
:root[data-design="supra"] body > header.sticky,
:root[data-design="supra"] header.sticky {
  background: var(--sp-header);
  border-bottom-color: rgba(251, 250, 246, 0.16);
}

/* ---------- the footer ---------- */
/* The cloth's border over the footer: fish and rosettes. */
:root[data-design="supra"] footer.border-t {
  position: relative;
  margin-top: 4rem;
  border-top: 0;
  background: var(--sp-deep);
}
:root[data-design="supra"] footer.border-t::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 64px;
  background: url("/beta/art/band.svg?v=2") repeat-x 0 0 / 100px 64px;
  pointer-events: none;
}

/* ---------- marks with their own colours ---------- */
/* The Wolt and Glovo chips take light or dark text from the browser's scheme;
   the cloth is dark whatever the scheme, so they always take the dark one. */
:root[data-design="supra"] .chip-wolt { color: #5ec8f2; }
:root[data-design="supra"] .chip-glovo { color: #ffd475; }
:root[data-design="supra"][data-scheme="light"] .chip-wolt { color: #0077b3; }
:root[data-design="supra"][data-scheme="light"] .chip-glovo { color: #7a5000; }
/* The estimate dot is a fixed sky blue, which all but vanished on the cloth. */
:root[data-design="supra"] .bg-sky-500 { background-color: #7fd3ff; }
:root[data-design="supra"][data-scheme="light"] .bg-sky-500 { background-color: #1f8fd6; }

/* ---------- pictures ---------- */
/* The foods page's plate of khinkali comes in two versions: a cutout for the
   light page and one printed on the dark page's near-black. On the cloth that
   near-black showed as a dark box behind the plate, so the beta always uses
   the cutout, whichever scheme the browser is in. */
:root:root:root[data-design="supra"] .foods-hero-dark {
  display: none;
}
:root:root:root[data-design="supra"] .foods-hero-light {
  display: block;
}
/* On a phone the plate sits behind the figures, so it stays faint there. */
@media (max-width: 47.99rem) {
  :root:root:root[data-design="supra"] .foods-hero-light {
    opacity: 0.45;
  }
}

/* ---------- colour themes ---------- */
/*
 * On the beta a Chamiko+ colour theme dyes the cloth rather than the buttons:
 * the yolk stays the one action colour, and the page around it turns teal,
 * wine, violet or slate. The default theme (ტყე) is the beta's own blue.
 * Generated from each theme's colour and checked like the rest: cotton-white
 * and muted type clear 4.5:1 on the cloth and on every surface laid on it.
 * The front page reads the same colours through its own variables (.supra).
 */
:root[data-design="supra"] .swatch-forest { --swatch: #1f3a93; }

:root:root:root[data-design="supra"][data-accent="sea"] {
  --background: #134c5f;
  --background-tint: #114354;
  --surface: #265a6b;
  --surface-muted: #114657;
  --foreground-2: #e4e9e7;
  --muted: #cdd7d8;
  --border: #467280;
  --border-soft: #2f6171;
  --primary-soft: #336474;
  --track: #285c6d;
  --sp-cloth: #134c5f;
  --sp-deep: #0f3b4a;
  --sp-header: rgba(15, 59, 74, 0.9);
  --shadow-card: 4px 6px 0 rgba(9, 34, 43, 0.45);
  --sp-paper-primary: #134c5f;
  --sp-paper-primary-hover: #336474;
  --sp-paper-primary-soft: #dfe5e4;
}
:root[data-design="supra"][data-accent="sea"] .supra {
  --lurji: #134c5f;
  --lurji-deep: #0f3b4a;
  --lurji-lift: #336474;
  --sp-shadow: rgba(9, 34, 43, 0.5);
}
:root[data-design="supra"] .swatch-sea { --swatch: #134c5f; }

:root:root:root[data-design="supra"][data-accent="saperavi"] {
  --background: #7a2643;
  --background-tint: #6b213b;
  --surface: #843751;
  --surface-muted: #70233e;
  --foreground-2: #eee5e4;
  --muted: #e1d0d2;
  --border: #96556a;
  --border-soft: #893f58;
  --primary-soft: #8c445c;
  --track: #863953;
  --sp-cloth: #7a2643;
  --sp-deep: #5f1e34;
  --sp-header: rgba(95, 30, 52, 0.9);
  --shadow-card: 4px 6px 0 rgba(55, 17, 30, 0.45);
  --sp-paper-primary: #7a2643;
  --sp-paper-primary-hover: #8c445c;
  --sp-paper-primary-soft: #ece1e1;
}
:root[data-design="supra"][data-accent="saperavi"] .supra {
  --lurji: #7a2643;
  --lurji-deep: #5f1e34;
  --lurji-lift: #8c445c;
  --sp-shadow: rgba(55, 17, 30, 0.5);
}
:root[data-design="supra"] .swatch-saperavi { --swatch: #7a2643; }

:root:root:root[data-design="supra"][data-accent="lavender"] {
  --background: #4f3787;
  --background-tint: #463077;
  --surface: #5d4790;
  --surface-muted: #49337c;
  --foreground-2: #eae6eb;
  --muted: #d9d3e0;
  --border: #75629f;
  --border-soft: #644e94;
  --primary-soft: #675297;
  --track: #5e4991;
  --sp-cloth: #4f3787;
  --sp-deep: #3e2b69;
  --sp-header: rgba(62, 43, 105, 0.9);
  --shadow-card: 4px 6px 0 rgba(36, 25, 61, 0.45);
  --sp-paper-primary: #4f3787;
  --sp-paper-primary-hover: #675297;
  --sp-paper-primary-soft: #e6e3e9;
}
:root[data-design="supra"][data-accent="lavender"] .supra {
  --lurji: #4f3787;
  --lurji-deep: #3e2b69;
  --lurji-lift: #675297;
  --sp-shadow: rgba(36, 25, 61, 0.5);
}
:root[data-design="supra"] .swatch-lavender { --swatch: #4f3787; }

:root:root:root[data-design="supra"][data-accent="graphite"] {
  --background: #2c3542;
  --background-tint: #272f3a;
  --surface: #3d4550;
  --surface-muted: #28313d;
  --foreground-2: #e6e6e4;
  --muted: #d2d3d2;
  --border: #5a606a;
  --border-soft: #454d58;
  --primary-soft: #49515b;
  --track: #3f4752;
  --sp-cloth: #2c3542;
  --sp-deep: #222933;
  --sp-header: rgba(34, 41, 51, 0.9);
  --shadow-card: 4px 6px 0 rgba(20, 24, 30, 0.45);
  --sp-paper-primary: #2c3542;
  --sp-paper-primary-hover: #49515b;
  --sp-paper-primary-soft: #e2e2e0;
}
:root[data-design="supra"][data-accent="graphite"] .supra {
  --lurji: #2c3542;
  --lurji-deep: #222933;
  --lurji-lift: #49515b;
  --sp-shadow: rgba(20, 24, 30, 0.5);
}
:root[data-design="supra"] .swatch-graphite { --swatch: #2c3542; }

/* ---------- phones: the tab bar, the log sheet, the diary's day card ---------- */
/*
 * Below lg the beta gets an app's shape: a tab bar under the thumb with the
 * add button in the middle, one sheet holding every way to log food, and on
 * the diary one card that answers the day (or the week). From lg up none of
 * it is drawn and the header row and the desktop diary carry on as before.
 * The colours are the cloth's tokens, so a Chamiko+ theme dyes these too.
 */
.sp-tabs,
.sp-dayview {
  display: none;
}

@media (max-width: 63.99rem) {
  :root[data-design="supra"] body:has(.sp-tabs) {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }
  /* The bottom cards sit above the bar, not under it. */
  :root[data-design="supra"] body:has(.sp-tabs) .fixed.inset-x-0.bottom-0 {
    bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }

  /* ----- tab bar ----- */
  .sp-tabs {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr 1fr 4.25rem 1fr 1fr;
    align-items: center;
    padding: 0.35rem;
    border-radius: 999px;
    /* Near-solid, not frosted: a blur under a fixed bar is redrawn on every
       scroll frame, which is what made scrolling stutter on phones. */
    background: var(--sp-paper-glass);
    box-shadow: 3px 5px 0 rgba(13, 24, 74, 0.35);
  }
  .sp-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.45rem 0 0.4rem;
    border-radius: 999px;
    color: var(--sp-ink-2);
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.2s var(--soft), color 0.2s var(--soft);
  }
  .sp-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sp-tab svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  .sp-tab.is-on {
    background: var(--sp-tab-on);
    color: var(--sp-tab-on-ink);
    font-weight: 600;
  }
  .sp-fab {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    /* Yolk in both schemes: the one action, wherever --primary goes. */
    background: #ffc233;
    color: #14204f;
    box-shadow: 2px 4px 0 rgba(13, 24, 74, 0.4);
    cursor: pointer;
    transition: transform 0.15s var(--soft);
  }
  .sp-fab:active {
    transform: scale(0.94);
  }
  .sp-fab svg {
    width: 1.7rem;
    height: 1.7rem;
    stroke-width: 2.4;
  }
}

/* ----- log sheet ----- */
/* A <dialog>, so focus, Esc and the backdrop come from the platform. */
.sp-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 34rem;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: var(--sp-ink);
}
.sp-sheet::backdrop {
  /* A plain dim: blurring the whole page behind the sheet cost the slide
     its frames on a phone. */
  background: rgba(10, 16, 48, 0.58);
}
.sp-sheet[open] .sp-sheet-panel {
  animation: sp-sheet-up 0.32s var(--out);
}
@keyframes sp-sheet-up {
  from {
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sp-sheet[open] .sp-sheet-panel {
    animation: none;
  }
}
.sp-sheet-panel {
  position: relative;
  padding: 1.25rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  border-radius: 2rem 2rem 0 0;
  background: var(--sp-paper);
}
.sp-sheet-close {
  position: absolute;
  left: 50%;
  top: -3.6rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--sp-paper);
  color: var(--sp-ink);
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.sp-sheet-close svg {
  width: 1.25rem;
  height: 1.25rem;
}
.sp-sheet h2 {
  text-align: center;
  font-size: 1.35rem;
  line-height: 1.2;
}
.sp-meals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.25rem;
  margin-top: 0.9rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--sp-paper-2);
}
.sp-meals button {
  padding: 0.5rem 0;
  border-radius: 999px;
  color: var(--sp-ink-2);
  font-size: 0.8rem;
  cursor: pointer;
}
.sp-meals button[aria-checked="true"] {
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(20, 32, 79, 0.15);
}
.sp-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.sp-way,
.sp-way2 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.15rem;
  background: var(--sp-paper-2);
  color: var(--sp-ink);
  font-weight: 600;
  text-align: center;
  transition: transform 0.15s var(--soft);
}
.sp-way:active,
.sp-way2:active {
  transform: scale(0.97);
}
.sp-way {
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 0.25rem 0.9rem;
  font-size: 0.82rem;
}
.sp-way svg {
  width: 1.5rem;
  height: 1.5rem;
}
.sp-way.is-lead {
  background: var(--sp-lead);
  color: #fbfaf6;
}
.sp-ways2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.sp-way2 {
  gap: 0.5rem;
  padding: 0.8rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
}
.sp-way2 svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}
.sp-freq {
  margin-top: 1rem;
}
.sp-freq-head {
  display: flex;
  justify-content: space-between;
  padding: 0 0.15rem 0.5rem;
  color: var(--sp-ink-2);
  font-size: 0.75rem;
}
.sp-freq-empty {
  padding: 0.6rem 0.15rem;
  color: var(--sp-ink-2);
  font-size: 0.82rem;
}
.sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  background: var(--sp-paper);
  color: var(--sp-ink);
  font-size: 0.8rem;
  cursor: pointer;
}
.sp-chip span {
  color: var(--sp-ink-2);
  font-size: 0.72rem;
}
.sp-chip svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  color: var(--sp-ink-2);
}
.sp-chip:disabled {
  opacity: 0.6;
}

/* ----- diary: the day card ----- */
@media (max-width: 63.99rem) {
  .sp-dayview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  /* The diary on a phone, as in the mockup: the header and the day card are
     one block of deep cloth across the top, and below it the page is paper
     with the meals as rows on it. */
  :root[data-design="supra"] body:has(.sp-dayview, .sp-page-block) {
    background: var(--sp-page);
  }
  /* The fish band is drawn on the cloth; give it the cloth back on paper,
     and carry the footer's colour down under the tab bar's padding. */
  :root[data-design="supra"] body:has(.sp-dayview, .sp-page-block) footer.border-t::before {
    background-color: var(--sp-cloth);
  }
  :root[data-design="supra"] body:has(.sp-dayview, .sp-page-block) footer.border-t {
    box-shadow: 0 7rem 0 var(--sp-deep);
  }
  :root[data-design="supra"]:not([data-scheme="light"]) body:has(.sp-dayview, .sp-page-block) header.sticky {
    background: var(--sp-deep);
    border-bottom-color: transparent;
  }
  /* The block is cloth in both schemes, so in the light one it takes the
     cloth's own colours back, and sits under the paper header as a card
     instead of running into it. */
  :root:root:root:root[data-design="supra"][data-scheme="light"] .sp-day {
    --foreground: #fbfaf6;
    --foreground-2: #dfe3f2;
    --muted: #c3cbe8;
    --surface: color-mix(in srgb, var(--sp-cloth), white 10%);
    --border: color-mix(in srgb, var(--sp-cloth), white 22%);
    --border-soft: color-mix(in srgb, var(--sp-cloth), white 14%);
    --track: color-mix(in srgb, var(--sp-cloth), white 12%);
    --primary: #ffc233;
    --on-primary: #14204f;
    --protein: #ff8a6e;
    --fat: #ffc233;
    --carbs: #f3e3c0;
    --danger: #ffa08c;
    --success: #8fe0ae;
    --gold: #ffd27a;
    --gold-soft: rgba(255, 210, 122, 0.12);
    --gold-line: rgba(255, 210, 122, 0.4);
    --background: var(--sp-deep);
    --surface-muted: rgba(0, 0, 0, 0.14);
    margin: -1rem -0.25rem 0;
    border-radius: 1.75rem;
    background: var(--sp-deep) var(--sp-field-cloth);
    box-shadow: 0 10px 24px -14px rgba(13, 24, 74, 0.55);
  }
  /* The diary's bowl and sprig would peek out from behind the card. */
  :root[data-design="supra"] body:has(.sp-dayview, .sp-page-block) .diary-deco {
    display: none;
  }
  .sp-day {
    /* Out to the screen's edges and up to the header: cancels main's px-5
       and the page's top padding. */
    margin: -2rem -1.25rem 0;
    padding: 0.5rem 1.25rem 1.2rem;
    border-radius: 0 0 2rem 2rem;
    background: var(--sp-deep);
    color: #fbfaf6;
  }
  @media (min-width: 40rem) {
    .sp-day {
      margin-top: -2.5rem; /* main is sm:py-10 from here */
    }
  }
  .sp-weight {
    box-shadow: var(--sp-tile-shadow);
    border-radius: 0.9rem;
  }

  /* ----- the scanner's block: title and the three-way switch ----- */
  .sp-day.sp-scan-block,
  .sp-day.sp-title-block {
    margin-top: -2rem; /* these pages' main is py-8 at every width */
  }
  .sp-title-block h1 {
    padding-top: 0.5rem;
  }
  /* A card inside the block (the "what fits" budget) is a well in the cloth,
     not a sheet of paper laid on it. Outranks the light scheme's paper card. */
  :root:root:root:root:root[data-design="supra"] .sp-day .card {
    --foreground: #fbfaf6;
    --foreground-2: #dfe3f2;
    --muted: #c3cbe8;
    --border: color-mix(in srgb, var(--sp-cloth), white 22%);
    --border-soft: color-mix(in srgb, var(--sp-cloth), white 14%);
    --surface: color-mix(in srgb, var(--sp-cloth), white 10%);
    --surface-muted: rgba(0, 0, 0, 0.14);
    --background: var(--sp-deep);
    --primary: #ffc233;
    --primary-hover: #ffd15e;
    --primary-soft: rgba(255, 194, 51, 0.14);
    --on-primary: #14204f;
    --gold: #ffd27a;
    --gold-soft: rgba(255, 210, 122, 0.12);
    --gold-line: rgba(255, 210, 122, 0.4);
    --danger: #ffa08c;
    background: rgba(0, 0, 0, 0.14);
    border-color: color-mix(in srgb, var(--sp-cloth), white 14%);
    box-shadow: none;
    color: var(--foreground);
  }
  /* The "what fits" plate sits behind the title on the old layout; over the
     block it would cover it. */
  :root[data-design="supra"] body:has(.sp-page-block) .fits-plate {
    display: none;
  }
  .sp-scan-block h1 {
    padding-top: 0.5rem;
  }

  /* ----- the food database's block and list ----- */
  .sp-foods-block .foods-head {
    margin-top: 0.5rem;
  }
  .sp-foods-block .foods-hero {
    opacity: 0.35;
  }
  .sp-foods-results .food-list {
    padding: 0.15rem 0.9rem;
    border-radius: 0.9rem;
    background: var(--sp-paper);
    box-shadow: var(--sp-tile-shadow);
  }

  /* ----- the weight log's dark block ----- */
  .sp-day.sp-day-weight {
    margin-top: -2rem; /* the weight page's main is py-8 at every width */
    padding-top: 0.25rem;
  }
  .sp-weight-title {
    font-size: 1.6rem;
    line-height: 1.2;
  }
  .sp-weight-now {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-top: 0.75rem;
  }
  .sp-weight-now small {
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-weight-now .sp-big {
    font-size: 2.6rem;
  }
  .sp-weight-change {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.8rem;
  }
  .sp-weight-change b {
    font-weight: 700;
  }
  .sp-weight-line {
    flex: 1;
    min-width: 0;
    height: 3.25rem;
    margin-bottom: 0.4rem;
  }
  .sp-weight-line polyline {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .sp-weight-meta {
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-weight-goal {
    margin-top: 0.9rem;
    padding: 0.7rem 0.8rem 0.8rem;
    border: 1px solid var(--border-soft);
    border-radius: 1.1rem;
    background: rgba(0, 0, 0, 0.12);
  }
  .sp-weight-goal p {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
  }
  .sp-weight-goal p span:last-child {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 400;
  }
  .sp-weight-form {
    margin-top: 0.9rem;
  }
  .sp-weight-form > p {
    margin-bottom: 0.4rem;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-weight-form > div {
    display: flex;
    gap: 0.5rem;
  }
  .sp-weight-form input {
    min-width: 0;
    height: 3rem;
    padding: 0 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.16);
    color: #fbfaf6;
    font-size: 0.95rem;
    color-scheme: dark;
  }
  .sp-weight-form input[type="date"] {
    flex: 1;
  }
  .sp-weight-form input[inputmode] {
    width: 5.5rem;
    flex: none;
  }
  .sp-weight-form input::placeholder {
    color: var(--muted);
  }
  .sp-weight-form input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
  }
  .sp-weight-form button {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  .sp-weight-form button svg {
    width: 1.4rem;
    height: 1.4rem;
    stroke-width: 2.4;
  }
  .sp-weight-error {
    display: block;
    margin-top: 0.4rem;
    color: var(--danger);
    font-size: 0.75rem;
  }

  /* ----- the account page's dark block ----- */
  .sp-day.sp-day-account {
    margin-top: -2rem; /* the account page's main is py-8 at every width */
    padding-top: 0.5rem;
  }
  .sp-acct-who {
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }
  .sp-acct-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 1.8rem;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.3);
  }
  .sp-acct-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .sp-acct-mail {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.78rem;
    word-break: break-all;
  }
  .sp-acct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
  }
  .sp-acct-chips > *,
  .sp-acct-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--foreground-2);
    font-size: 0.75rem;
  }
  .sp-acct-chip svg {
    width: 0.85rem;
    height: 0.85rem;
  }
  .sp-acct-chip.is-ok {
    border-color: rgba(143, 224, 174, 0.5);
    color: var(--success);
  }
  .sp-acct-chip.is-plus {
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
  }
  .sp-acct-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.9rem;
  }
  .sp-acct-stats > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.15rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.12);
  }
  .sp-acct-stats dd {
    font-family: "Supra Noto", var(--font-georgian), sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2;
  }
  .sp-acct-stats > div:last-child dd {
    font-family: var(--font-georgian), sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.35;
  }
  .sp-acct-stats dt {
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.3;
  }
  .sp-acct-target {
    margin-top: 0.6rem;
    padding: 0.75rem 0.8rem 0.8rem;
    border: 1px solid var(--border-soft);
    border-radius: 1.1rem;
    background: rgba(0, 0, 0, 0.12);
  }
  .sp-acct-target-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .sp-acct-target small {
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-acct-target .sp-big {
    font-size: 1.7rem;
  }
  .sp-acct-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.78rem;
    font-weight: 600;
  }
  .sp-acct-edit svg {
    width: 0.85rem;
    height: 0.85rem;
  }
  .sp-acct-macros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-acct-macros li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
  }
  .sp-acct-macros li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--carbs);
  }
  .sp-acct-macros [data-tone="protein"]::before { background: var(--protein); }
  .sp-acct-macros [data-tone="fat"]::before { background: var(--fat); }
  .sp-acct-macros b {
    color: #fbfaf6;
  }

  /* ----- settings as rows on paper ----- */
  .sp-fold,
  .sp-fold-row {
    border-radius: 0.9rem;
    background: var(--sp-paper);
    color: var(--sp-ink);
    box-shadow: var(--sp-tile-shadow);
  }
  .sp-fold > summary,
  .sp-fold-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.6rem 0.9rem;
    list-style: none;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .sp-fold > summary::-webkit-details-marker {
    display: none;
  }
  .sp-fold-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
    background: var(--sp-paper-2);
  }
  .sp-fold-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .sp-fold-title {
    flex: 1;
    min-width: 0;
  }
  .sp-fold-hint {
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sp-ink-2);
    font-size: 0.8rem;
    font-weight: 400;
  }
  .sp-fold-chev {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    color: var(--sp-ink-2);
    transition: transform 0.2s var(--soft);
  }
  .sp-fold[open] .sp-fold-chev {
    transform: rotate(180deg);
  }
  .sp-fold[data-danger] .sp-fold-title,
  .sp-fold[data-danger] .sp-fold-icon {
    color: var(--sp-danger);
  }
  /* The card inside a fold is the fold's body: paper already, no frame of
     its own, and its heading is the row above it. */
  .sp-fold-body > .card,
  .sp-fold-body > section {
    border: 0;
    border-radius: 0 0 0.9rem 0.9rem;
    box-shadow: none;
    padding-top: 0.25rem;
  }
  .sp-fold-body h2 {
    display: none;
  }
  .sp-fold-body {
    border-top: 1px solid var(--sp-line);
  }
  .sp-logout {
    justify-content: center;
    color: var(--sp-ink);
  }

  /* ----- the meals, as rows on paper ----- */
  .sp-mealrows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--sp-ink);
  }
  .sp-mealrows-head {
    padding: 0 0.25rem;
    color: var(--sp-ink-2);
    font-size: 0.78rem;
  }
  .sp-mealrow {
    border-radius: 0.9rem;
    background: var(--sp-paper);
    box-shadow: var(--sp-tile-shadow);
  }
  .sp-mealrow-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.65rem 0.7rem 0.9rem;
  }
  .sp-mealrow-main {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
    cursor: pointer;
  }
  .sp-mealrow-main:disabled {
    cursor: default;
  }
  .sp-mealrow-title {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
  }
  .sp-mealrow-title span {
    color: var(--sp-ink-2);
    font-size: 0.85rem;
  }
  .sp-mealrow-what {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sp-ink-2);
    font-size: 0.78rem;
  }
  .sp-mealrow-add {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--sp-paper-2);
    color: var(--sp-ink);
    cursor: pointer;
  }
  .sp-mealrow-add svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .sp-mealrow-items {
    margin: 0 0.9rem;
    padding: 0.2rem 0 0.4rem;
    border-top: 1px solid var(--sp-line);
  }
  .sp-mealrow-items li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    font-size: 0.85rem;
  }
  .sp-item-name {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
  }
  .sp-item-name small {
    color: var(--sp-ink-2);
    font-size: 0.72rem;
  }
  .sp-item-kcal {
    font-weight: 600;
  }
  .sp-mealrow-items button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-right: -0.4rem;
    border-radius: 50%;
    color: var(--sp-ink-2);
    cursor: pointer;
  }
  .sp-mealrow-items button svg {
    width: 1rem;
    height: 1rem;
  }
  .sp-hello {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.1rem 0.85rem;
  }
  .sp-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 1rem;
    font-weight: 700;
  }
  .sp-hello small {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-hello strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
  }
  .sp-date {
    margin-left: auto;
    flex: none;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
  }
  .sp-seg button {
    padding: 0.5rem 0;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
  }
  .sp-seg button[aria-pressed="true"] {
    background: var(--surface);
    color: #fbfaf6;
    font-weight: 600;
  }
  .sp-streak {
    margin-top: 0.65rem;
    padding: 0.6rem 0.75rem 0.7rem;
    border: 1px solid var(--border-soft);
    border-radius: 1.2rem;
    background: rgba(0, 0, 0, 0.12);
  }
  .sp-streak-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
  }
  .sp-streak-top > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .sp-streak-start {
    color: var(--muted);
    font-weight: 400;
  }
  .sp-flame {
    width: 1rem;
    height: 1rem;
    color: var(--protein);
    fill: currentColor;
  }
  .sp-weeknav {
    display: inline-flex;
    gap: 0.15rem;
    flex: none;
  }
  .sp-weeknav button {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
  }
  .sp-weeknav button:disabled {
    opacity: 0.35;
  }
  .sp-weeknav svg {
    width: 1rem;
    height: 1rem;
  }
  .sp-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 0.35rem;
    text-align: center;
  }
  .sp-week button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    padding: 0.2rem 0;
    color: var(--muted);
    font-size: 0.7rem;
    cursor: pointer;
  }
  .sp-week button[data-future] {
    opacity: 0.55;
  }
  .sp-week button[aria-current] {
    color: #fbfaf6;
    font-weight: 700;
  }
  .sp-mark {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 0.72rem;
  }
  .sp-week button[aria-current] .sp-mark {
    border: 1.5px dashed var(--primary);
  }
  .sp-kcal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
  }
  .sp-kcal small,
  .sp-chart-head small {
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-big {
    font-family: "Supra Noto", var(--font-georgian), sans-serif;
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.15;
  }
  .sp-big span {
    font-family: var(--font-georgian), sans-serif;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
  }
  .sp-fits {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.35rem;
    padding: 0.25rem 0.4rem 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 194, 51, 0.14);
    color: var(--primary);
    font-size: 0.75rem;
  }
  .sp-fits svg {
    width: 0.85rem;
    height: 0.85rem;
  }
  .sp-fits.is-over {
    padding-right: 0.65rem;
    background: rgba(255, 106, 77, 0.16);
    color: var(--danger);
  }
  .sp-ring {
    position: relative;
    flex: none;
    width: 3.9rem;
    height: 3.9rem;
    cursor: pointer;
  }
  .sp-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .sp-ring circle {
    fill: none;
    stroke-width: 3.5;
  }
  .sp-ring-track {
    stroke: var(--border-soft);
  }
  .sp-ring-arc {
    stroke: var(--primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s var(--out);
  }
  .sp-ring-arc.is-over {
    stroke: var(--danger);
  }
  .sp-ring-core {
    position: absolute;
    inset: 0.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    color: #fbfaf6;
  }
  .sp-ring-core svg {
    position: static;
    width: 1.4rem;
    height: 1.4rem;
    transform: none;
    stroke-width: 2.3;
  }
  .sp-macros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
  }
  .sp-macros b {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
  }
  .sp-bar {
    display: block;
    height: 0.3rem;
    margin: 0.35rem 0 0.3rem;
    overflow: hidden;
    border-radius: 99px;
    background: var(--track);
  }
  .sp-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
  }
  .sp-bar [data-tone="protein"] { background: var(--protein); }
  .sp-bar [data-tone="fat"] { background: var(--fat); }
  .sp-bar [data-tone="carbs"] { background: var(--carbs); }
  .sp-macros small {
    color: var(--muted);
    font-size: 0.7rem;
  }

  /* ----- the week ----- */
  .sp-chart {
    margin-top: 0.65rem;
    padding: 0.8rem 0.75rem 0.6rem;
    border: 1px solid var(--border-soft);
    border-radius: 1.2rem;
    background: rgba(0, 0, 0, 0.12);
  }
  .sp-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .sp-chart-head b {
    font-family: "Supra Noto", var(--font-georgian), sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
  }
  .sp-chart-head b span {
    font-family: var(--font-georgian), sans-serif;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
  }
  .sp-bars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 0.5rem;
    height: 7.5rem;
    margin-top: 0.75rem;
  }
  .sp-bars i {
    display: block;
    border-radius: 0.5rem 0.5rem 0.25rem 0.25rem;
    background: var(--primary);
  }
  .sp-bars i[data-state="over"] { background: var(--danger); }
  .sp-bars i[data-state="empty"] { background: var(--border-soft); }
  .sp-bars i[data-current] {
    outline: 1.5px solid #fbfaf6;
    outline-offset: 2px;
  }
  .sp-goal {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed var(--muted);
    opacity: 0.8;
    pointer-events: none;
  }
  .sp-goal span {
    position: absolute;
    right: 0;
    top: -1.1rem;
    color: var(--muted);
    font-size: 0.65rem;
  }
  .sp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.68rem;
    text-align: center;
  }
  .sp-verdict {
    margin-top: 0.75rem;
    color: var(--foreground-2);
    font-size: 0.8rem;
    line-height: 1.5;
  }

  /* The weight card is a .card, so it is paper with ink. */
  .sp-weight {
    padding: 0.9rem 0.9rem 0.75rem;
  }
  .sp-weight-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .sp-weight small {
    color: var(--muted);
    font-size: 0.75rem;
  }
  .sp-weight .sp-big {
    font-size: 1.65rem;
  }
  .sp-weight-empty {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.85rem;
  }
  .sp-delta {
    color: var(--success);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .sp-delta.is-up {
    color: var(--foreground-2);
  }
  .sp-mini-add {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--foreground);
  }
  .sp-mini-add svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  .sp-spark {
    display: block;
    width: 100%;
    height: 2.75rem;
    margin-top: 0.4rem;
  }
  .sp-spark polyline {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
}

/* From lg up a fold is only its card: no row, always open. The script in
   Fold.tsx opens it; ::details-content lets supporting browsers skip even
   the first closed paint. */
@media (min-width: 64rem) {
  .sp-fold > summary {
    display: none;
  }
  .sp-fold::details-content {
    content-visibility: visible;
    display: contents;
  }
}

/* ---------- sign in and sign up (components/AuthForm) ---------- */
/* One card, after the registration screen the owner sent: a header of
   cloth with the title, and a sheet laid over its lower edge with round
   Apple and Google buttons, an "or", filled fields and one yellow button.
   On a phone it runs to the screen's edges like the other pages' blocks
   (an inset card in the light scheme); from sm up it is a card in the
   middle of the page. Here, not in globals.css, because this file is
   unlayered and its input rules would otherwise win. */
.auth {
  max-width: 26rem;
  margin: 0 auto;
}
.auth-hero {
  padding: 2.25rem 1.5rem 3.6rem;
  border-radius: 1.75rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sp-cloth), white 14%), var(--sp-deep)), var(--sp-deep);
  background-image: var(--sp-field-cloth), linear-gradient(160deg, color-mix(in srgb, var(--sp-cloth), white 14%), var(--sp-deep));
  color: #fbfaf6;
  text-align: center;
}
.auth-hero h1 {
  font-size: 1.9rem;
  line-height: 1.15;
}
.auth-hero p {
  max-width: 22rem;
  margin: 0.6rem auto 0;
  color: #dfe3f2;
  font-size: 0.88rem;
  line-height: 1.5;
}
.auth-sheet {
  position: relative;
  margin-top: -2rem;
  padding: 1.6rem 1.25rem 1.5rem;
  border-radius: 1.75rem;
  background: var(--sp-paper);
  color: var(--sp-ink);
  box-shadow: 0 -10px 30px -18px rgba(13, 24, 74, 0.45);
}
:root[data-scheme="dark"] .auth-sheet {
  background: color-mix(in srgb, var(--sp-deep), black 32%);
}
@media (max-width: 39.99rem) {
  /* Out to the edges and up to the header, as the other pages' blocks. */
  .auth {
    max-width: none;
    margin: -2rem -1.25rem 0;
  }
  .auth-hero {
    border-radius: 0;
    background-image: var(--sp-field-cloth), linear-gradient(180deg, var(--sp-deep), var(--sp-cloth));
  }
  .auth-sheet {
    border-radius: 1.75rem 1.75rem 0 0;
    padding-bottom: 2rem;
  }
  :root[data-scheme="light"] .auth {
    margin: -1rem -0.25rem 0;
  }
  :root[data-scheme="light"] .auth-hero {
    border-radius: 1.75rem 1.75rem 0 0;
    background-image: var(--sp-field-cloth), linear-gradient(160deg, color-mix(in srgb, var(--sp-cloth), white 14%), var(--sp-deep));
  }
  :root[data-scheme="light"] .auth-sheet {
    border-radius: 1.75rem;
  }
}

.auth-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.auth-round {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
}
.auth-round:active:not(:disabled) {
  transform: scale(0.94);
}
.auth-round:disabled {
  opacity: 0.7;
  cursor: progress;
}
.auth-round svg {
  width: 1.45rem;
  height: 1.45rem;
}
/* Each brand in its own colours, as its guidelines ask. */
.oauth-apple {
  background: #000;
  color: #fff;
}
:root[data-scheme="dark"] .oauth-apple {
  box-shadow: inset 0 0 0 1px rgba(251, 250, 246, 0.22);
}
.oauth-google {
  background: #fff;
  color: #1f1f1f;
  box-shadow: inset 0 0 0 1px #dadce0;
}
.auth-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0 1rem;
  color: var(--sp-ink-2);
  font-size: 0.78rem;
}
.auth-or span {
  flex: 1;
  height: 1px;
  background: var(--sp-line);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.auth-form > label:not(.auth-agree) {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.auth-form > label > span {
  color: var(--sp-ink);
  font-size: 0.8rem;
  font-weight: 700;
}
:root[data-design="supra"] .auth-form input:not([type="checkbox"]) {
  height: 3.1rem;
  padding: 0 1rem;
  border: 1.5px solid transparent;
  border-radius: 0.9rem;
  background: var(--sp-paper-2);
  color: var(--sp-ink);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}
:root[data-design="supra"] .auth-form input:not([type="checkbox"]):focus {
  border-color: #ffc233;
}
.auth-form input::placeholder {
  color: var(--sp-ink-2);
  opacity: 0.75;
}
.auth-forgot {
  align-self: flex-end;
  margin-top: -0.4rem;
  color: var(--sp-ink-2);
  font-size: 0.78rem;
}
.auth-agree {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--sp-ink);
  font-size: 0.82rem;
  line-height: 1.45;
}
.auth-agree input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  accent-color: #ffc233;
}
.auth-agree a {
  color: var(--sp-paper-primary, #1f3a93);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
:root[data-scheme="dark"] .auth-agree a {
  color: #ffc233;
}
.auth-error {
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--sp-danger), transparent 88%);
  color: var(--sp-danger);
  font-size: 0.85rem;
}
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.3rem;
  margin-top: 0.3rem;
  border-radius: 999px;
  background: #ffc233;
  color: #14204f;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 12px 26px -14px rgba(255, 194, 51, 0.9);
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s;
}
.auth-submit:hover:not(:disabled) {
  background: #ffd15e;
}
.auth-submit:active:not(:disabled) {
  transform: scale(0.98);
}
.auth-submit:disabled {
  opacity: 0.65;
}
.auth-switch {
  margin-top: 1.15rem;
  color: var(--sp-ink-2);
  font-size: 0.85rem;
  text-align: center;
}
.auth-switch a {
  color: var(--sp-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}