@layer reset, base, modules, layout, utilities;

@layer reset {

*,
*::before,
*::after {
  box-sizing:border-box
}
html,
body,
div,
span,
applet,
button,
input,
select,
textarea,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  background:rgba(0,0,0,0);
  border:0;
  font:inherit;
  font-size:100%;
  margin:0;
  min-width:0;
  outline:0;
  padding:0;
  vertical-align:baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display:block
}
ol,
ul,
menu {
  list-style:none
}
blockquote,
q {
  quotes:none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content:none
}
img,
svg {
  display:block
}
table {
  border-collapse:collapse;
  border-spacing:0
}
a {
  color: inherit;
  text-decoration: none;
}

}
:root {
  --font-family: Inter, sans-serif;

  --min-font-size: 1rem;
  --font-size: clamp(var(--min-font-size), 0.8397rem + 0.5128vw, 1.25rem);
  --line-height: 1.4;

  --main-small-width: min(100%, 30rem);
  --main-medium-width: min(100%, 46rem);
  --main-large-width: min(100%, 69rem);

  /* HSL Color Variables */
  --hsl-white: 0, 0%, 100%;
  --hsl-black: 0, 0%, 0%;

  --hsl-base-50: 43, 100%, 96%;
  --hsl-base-100: 39, 44%, 90%;
  --hsl-base-200: 33, 53%, 86%;
  --hsl-base-300: 41, 35%, 80%;
  --hsl-base-400: 42, 20%, 67%;
  --hsl-base-500: 49, 95%, 59%; /* Yellow */
  --hsl-base-600: 42, 100%, 45%; /* Amber */
  --hsl-base-700: 39, 100%, 39%; /* Deep amber */
  --hsl-base-800: 55, 73%, 23%;
  --hsl-base-900: 42, 24%, 7%;

  --hsl-success-100: 131, 44%, 92%;
  --hsl-success-200: 131, 44%, 83%;
  --hsl-success-300: 131, 44%, 77%;
  --hsl-success-600: 131, 44%, 44%;
  --hsl-success-700: 131, 44%, 37%;
  --hsl-success-800: 131, 44%, 23%;

  --hsl-warning-200: 31, 44%, 86%;
  --hsl-warning-300: 31, 44%, 77%;
  --hsl-warning-600: 31, 44%, 44%;

  --hsl-error-50:  14, 77%, 96%;
  --hsl-error-100: 14, 77%, 92%;
  --hsl-error-200: 14, 77%, 83%;
  --hsl-error-300: 14, 77%, 77%;
  --hsl-error-600: 14, 77%, 44%;
  --hsl-error-700: 14, 77%, 37%;
  --hsl-error-800: 14, 77%, 23%;

  --hsl-info-50:  216, 100%, 96%;
  --hsl-info-100: 216, 100%, 92%;
  --hsl-info-200: 216, 100%, 83%;
  --hsl-info-300: 216, 100%, 77%;
  --hsl-info-500: 216, 100%, 50%;
  --hsl-info-600: 216, 100%, 44%;
  --hsl-info-950: 216, 100%, 12%;

  --hsl-purple-200: 272, 52%, 85%;
  --hsl-purple-800: 278, 57%, 20%;

  /* A store's own colour as a scale, like the palette above: 50 and 200 are
     tints of it, 400 a deeper shade, 500 the colour itself. Store pages set
     them from the chef's colour (store/application/_store_style). */
  --color-store-50: hsl(var(--hsl-base-50));
  --color-store-200: hsl(var(--hsl-base-100));
  --color-store-400: hsl(var(--hsl-base-200));
  --color-store-500: hsl(var(--hsl-base-500));

  --color-main-bg: hsl(var(--hsl-base-50));
  --color-text: hsla(var(--hsl-black), 0.9);
  --color-text-error: hsl(var(--hsl-error-700));
  --color-text-muted: hsla(var(--hsl-black), 0.6);
  /* A line between things, and the edge of a panel such as a card, a dialog,
     a sheet or the board. */
  --color-line: hsl(var(--hsl-base-200));
  --color-border: hsl(var(--hsl-base-300));
  /* Cards and sheets on the page. */
  --color-panel-bg: hsl(var(--hsl-base-50));
  /* The main thing to do, such as a primary button or a step done, and the
     text on it. */
  --color-primary-bg: hsl(var(--hsl-success-600));
  --color-primary-color: hsl(var(--hsl-white));

  --color-link-color: hsla(var(--hsl-black), 0.9);

  --color-input-color: hsla(var(--hsl-black), 0.9);
  --color-input-bg: hsl(var(--hsl-white));
  --color-input-border: hsla(var(--hsl-black), 0.9);
  --color-input-error-color: hsl(var(--hsl-error-700));
  --color-input-disabled-color: hsl(var(--hsl-base-800));
  --color-input-disabled-bg: hsl(var(--hsl-base-100));
  --color-input-suffix-bg: hsl(var(--hsl-base-200));

  --color-button-bg: transparent;
  --color-button-border: hsla(var(--hsl-black), 0.4);
  --color-button-color: hsla(var(--hsl-black), 0.9);

  --color-button-primary-bg: var(--color-primary-bg);
  --color-button-primary-border: var(--color-primary-bg);
  --color-button-primary-color: var(--color-primary-color);

  --color-shadow: hsla(var(--hsl-black), 0.07);
  --color-shadow-strong: hsla(var(--hsl-black), 0.13);

  --color-star: hsl(var(--hsl-base-600));

  /* White panels raised a little off the page, like a day's dishes. */
  --color-surface: hsl(var(--hsl-white));
  --shadow-raised: 0 1px 2px var(--color-shadow-strong);

  --color-toolbar-bg: hsla(var(--hsl-black), 0.9);
  --color-toolbar-color: hsl(var(--hsl-white));

  --color-board-bg: var(--color-surface);
  --color-board-header-bg: var(--color-main-bg);
  --color-board-header-color: hsl(var(--hsl-base-900));

  --color-dialog-bg: var(--color-main-bg);
  --color-dialog-border: var(--color-border);

  --color-video-trigger-bg: hsl(var(--hsl-base-50));
  --color-video-trigger-color: hsla(var(--hsl-black), 0.9);
  --color-video-trigger-border: hsla(var(--hsl-black), 0.4);
  --color-video-player-bg: hsl(var(--hsl-black));

  --color-card-bg: var(--color-panel-bg);
  --color-card-color: var(--color-text);
  --color-card-border: var(--color-border);
  --color-card-strong-bg: hsla(var(--hsl-white), 0.5);

  --color-card-error-bg: hsla(var(--hsl-error-700), 0.05);
  --color-card-error-border: hsl(var(--hsl-error-700));
  /* A card in a colour, on its border and its header, with the header's text. */
  --color-card-red: hsl(0, 70%, 45%);
  --color-card-yellow: hsl(var(--hsl-base-500));
  --color-card-blue: hsl(var(--hsl-info-500));
  --color-card-green: hsl(var(--hsl-success-700));
  --color-card-white: hsl(var(--hsl-white));
  --color-card-header-color: hsl(var(--hsl-white));

  --color-sheet-bg: var(--color-panel-bg);
  --color-sheet-border: var(--color-border);
  --color-sheet-error-border: hsl(var(--hsl-error-700));

  --color-receipt-bg: hsl(var(--hsl-white));

  --color-pill-bg: hsl(var(--hsl-base-200));
  --color-pill-color: hsl(var(--hsl-base-800));

  --color-tape-bg: hsl(var(--hsl-base-500));
  --color-tape-color: hsl(var(--hsl-base-900));

  --color-status-bg: hsl(var(--hsl-base-50));
  --color-status-color: hsl(var(--hsl-base-400));

  --color-notice-bg:             hsl(var(--hsl-info-50));
  --color-notice-color:          hsl(var(--hsl-info-950));
  --color-notice-border:         hsl(var(--hsl-info-200));
  --color-notice-error-bg:       hsl(var(--hsl-error-50));
  --color-notice-error-color:    hsl(var(--hsl-error-800));
  --color-notice-error-border:   hsl(var(--hsl-error-200));
  --color-notice-success-bg:     hsl(var(--hsl-success-100));
  --color-notice-success-color:  hsl(var(--hsl-success-800));
  --color-notice-success-border: hsl(var(--hsl-success-200));
  --color-notice-alert-bg:       var(--color-card-error-bg);
  --color-notice-alert-color:    var(--color-text-error);
  --color-notice-alert-border:   var(--color-card-error-border);

  --color-status-success-bg: hsl(var(--hsl-success-200));
  --color-status-success-color: hsl(var(--hsl-success-600));
  --color-status-error-bg: hsl(var(--hsl-error-200));
  --color-status-error-color: hsl(var(--hsl-error-600));
  --color-status-warning-bg: hsl(var(--hsl-warning-200));
  --color-status-warning-color: hsl(var(--hsl-warning-600));

  --color-marker-bg: hsl(var(--hsl-base-500));
  --color-marker-color: hsla(var(--hsl-black), 0.9);
  --color-marker-border: hsla(var(--hsl-black), 0.9);
  --color-marker-primary-bg: hsla(var(--hsl-black), 0.9);
  --color-marker-primary-color: hsl(var(--hsl-white));
  --color-marker-secondary-bg: hsl(var(--hsl-white));
  --color-marker-secondary-color: hsla(var(--hsl-black), 0.9);

  --color-metric-positive: hsl(var(--hsl-success-600));
  --color-metric-negative: hsl(var(--hsl-error-600));

  --color-radio-button-bg: hsla(var(--hsl-white), 0.25);
  --color-radio-button-outline: hsla(var(--hsl-black), 0.15);
  --color-radio-button-hover-outline: hsla(var(--hsl-black), 0.35);
  --color-radio-button-checked-outline: hsl(var(--hsl-info-500));
  --color-radio-button-checked-bg: hsl(var(--hsl-white));

  --color-autocomplete-bg: hsl(var(--hsl-white));
  --color-autocomplete-border: hsla(var(--hsl-black), 0.9);
  --color-autocomplete-highlight-bg: hsla(var(--hsl-black), 0.06);
  --color-autocomplete-message-color: hsl(var(--hsl-base-400));
  --color-autocomplete-hint-bg: hsl(var(--hsl-base-100));
  --color-autocomplete-category-bg: #e5e7eb;
  --color-autocomplete-category-color: #374151;

  --color-icon-success-bg: hsl(var(--hsl-success-600));
  --color-inline-form-bg: hsl(var(--hsl-base-100));
  --color-inline-form-border: hsl(var(--hsl-base-200));

  --color-checkbox-border: hsla(var(--hsl-black), 0.8);
  --color-checkbox-hover-bg: hsla(var(--hsl-black), 0.05);
  --color-checkbox-checked-border: hsl(var(--hsl-success-300));
  --color-checkbox-checked-bg: hsl(var(--hsl-success-100));
  --color-checkbox-checked-color: hsl(var(--hsl-success-600));

  --color-popup-menu-bg: hsl(var(--hsl-success-600));
  --color-popup-menu-color: hsl(var(--hsl-white));

  --color-action-group-button-bg: hsla(var(--hsl-white), 0.3);
  --color-action-group-button-color: hsl(var(--hsl-white));
  --color-action-group-button-active-bg: hsla(var(--hsl-black), 0.3);

  --color-action-sheet-item-hover-bg: hsla(var(--hsl-black), 0.3);

  --color-file-upload-bg: hsl(var(--hsl-base-100));

  --color-flash-bg: hsla(var(--hsl-black), 0.8);
  --color-flash-color: hsl(var(--hsl-white));

  --color-description-list-check: hsla(var(--hsl-black), 0.5);
  --color-description-list-check-success: hsl(var(--hsl-success-600));

  --color-blockquote-border: hsla(var(--hsl-black), 0.5);
  --color-pre-bg: hsl(var(--hsl-base-100));

  --color-code-bg: hsl(var(--hsl-base-100));
  --color-code-border: hsla(var(--hsl-black), 0.1);

  --color-ring-bg: hsl(var(--hsl-base-50));
  --color-ring-border: hsl(var(--hsl-base-200));
  --color-ring-success-border: hsl(var(--hsl-success-600));

  --color-menu-bg: hsl(var(--hsl-base-100));
  --color-menu-border: var(--color-border);

  --radius-small: 0.375rem;
  --radius-medium: 0.625rem; /* icon tiles and thumbnails */
  --radius-large: 1rem; /* raised panels and the store's header */
  --card-radius: var(--radius-small);

  /* Something to tap is sized for a finger, so it stays put while the text
     grows with the screen. */
  --size-tap: 44px;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-family: InterVariable, sans-serif;
  }
}
/* Inter Font Faces - Local Files */

/* Variable Fonts with @supports for modern browsers */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/InterVariable-5db5a521938db7aaba812b5ef28f057725d3622a1e81c0a6ecd3ca6efd0a04ad.woff2) format('woff2');
    font-named-instance: 'Regular';
  }

  @font-face {
    font-family: 'InterVariable';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(/assets/InterVariable-Italic-635017f7110876734b249b2917840fc9ca2e4af3b066d5b326d4aaf071c05eaf.woff2) format('woff2');
    font-named-instance: 'Italic';
  }
}

/* latin */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/Permanent-Marker-7d39b9f14104d6d69f9fd583b3ef8cd7edda26c799e92fbef2514c1eddfcc3e3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Static font fallbacks for older browsers */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/Inter-Regular-5ff914dcc4f17d16b53a50999fa201bd71eff430101aa255cd2e2c4b3b9ca8f5.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/Inter-Bold-8b879e329596393ae87ea8776e1e1f3aa6ccd95da26927ed7108c25c5425d33e.woff2) format('woff2');
}
@layer base {
  html {
    font-family: var(--font-family);
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    font-size: var(--min-font-size);
    font-size: clamp(1rem, 0.8397rem + 0.5128vw, 1.25rem);
    line-height: var(--line-height);
    -webkit-text-size-adjust: 100%;
  }

  /* https://dbushell.com/2024/11/05/webkit-font-smoothing/ */
  body {
    -webkit-font-smoothing: antialiased;
  }

  /* Typography */

  p {
    font-size: 100%;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    sub, sup {
      font-weight: normal;
      font-size: 66.667%;
    }
  }

  h1 {
    font-size: 200%;
  }

  h2 {
    font-size: 150%;
  }

  h3 {
    font-size: 130%;
  }

  h4 {
    font-size: 120%;
  }

  h5 {
    font-size: 110%;
  }

  h6 {
    font-size: 100%;
  }

  .marked {
    --margin: 1rem;

    > *:first-child {
      margin-top: 0;
    }
    h2, h3 {
      margin-top: calc(var(--margin) * 2);
      margin-bottom: var(--margin);
    }
    h4, h5 {
      margin-top: var(--margin);
      margin-bottom: calc(var(--margin) * 0.5);
    }
    p {
      margin-bottom: var(--margin);
    }
    strong, b {
      font-weight: bold;
    }
    i, em {
      font-style: italic;
    }
    ul {
      list-style-type: disc;
    }
    ol {
      list-style-type: decimal;
    }
    blockquote {
      border-inline-start: 3px solid var(--color-blockquote-border);
      padding: 0 0 0 var(--margin);
      font-style: italic;
      color: var(--color-blockquote-border);
    }
    pre {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      font-family: monospace;
      font-size: 0.9em;
      padding: calc(var(--margin) * 0.5);
      white-space: pre;
      background-color: var(--color-pre-bg);
      border-radius: var(--radius-small);
      overflow-x: auto;
    }
    ul, ol {
      list-style-position: outside;
      margin-left: var(--margin);
      li {
        margin: calc(var(--margin) * 0.5) 0;
      }
    }
    > *:last-child {
      margin-bottom: 0;
    }
  }

  .marked mark {
    background-color: hsl(var(--hsl-warning-200));
    color: inherit;
    border-radius: 0.2em;
    padding: 0 0.15em;
  }

  .marked--dense {
    --margin: 0.5rem;
  }

  .marked a, .link {
    color: var(--color-link-color);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.0925em;
    &:hover {
      text-decoration: underline;
    }
  }

  .marker {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
    color: hsla(var(--hsl-black), 0.6);
  }

  .link--ease { text-decoration: none; }

  .price {
    font-feature-settings: "tnum";
    white-space: nowrap;
    text-align: right;
  }
}
@keyframes appear-then-fade {
  0%, 100% {
    opacity:0
  }
  5%, 60% {
    opacity:1
  }
}

@keyframes scale-pop {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.012);
  }
}

.scale-pop {
  animation: scale-pop 240ms ease-out;
  transform-origin: center;
}

turbo-frame.scale-pop {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .scale-pop {
    animation: none;
  }
}

/* A photo still being resized: its box in a soft pulse of the page's tint
   until it comes (see application.js). */
@keyframes image-pending {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

img.image-pending {
  background-color: var(--color-store-200);
  animation: image-pending 900ms ease-in-out infinite alternate;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}
@layer modules {
  /*
   * Default Trix editor styles. See Action Text overwrites below.
  */

  trix-editor {
    border: 1px solid #bbb;
    border-radius: 3px;
    margin: 0;
    padding: 0.4em 0.6em;
    min-height: 5em;
    outline: none; }

  trix-toolbar * {
    box-sizing: border-box; }

  trix-toolbar .trix-button-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow-x: auto; }

  trix-toolbar .trix-button-group {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #bbb;
    border-top-color: #ccc;
    border-bottom-color: #888;
    border-radius: 3px; }
    trix-toolbar .trix-button-group:not(:first-child) {
      margin-left: 1.5vw; }
      @media (max-width: 768px) {
        trix-toolbar .trix-button-group:not(:first-child) {
          margin-left: 0; } }

  trix-toolbar .trix-button-group-spacer {
    flex-grow: 1; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group-spacer {
        display: none; } }

  trix-toolbar .trix-button {
    position: relative;
    float: left;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    padding: 0 0.5em;
    margin: 0;
    outline: none;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    background: transparent; }
    trix-toolbar .trix-button:not(:first-child) {
      border-left: 1px solid #ccc; }
    trix-toolbar .trix-button.trix-active {
      background: #cbeefa;
      color: black; }
    trix-toolbar .trix-button:not(:disabled) {
      cursor: pointer; }
    trix-toolbar .trix-button:disabled {
      color: rgba(0, 0, 0, 0.125); }
    @media (max-width: 768px) {
      trix-toolbar .trix-button {
        letter-spacing: -0.01em;
        padding: 0 0.3em; } }

  trix-toolbar .trix-button--icon {
    font-size: inherit;
    width: 2.6em;
    height: 1.6em;
    max-width: calc(0.8em + 4vw);
    text-indent: -9999px; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon {
        height: 2em;
        max-width: calc(0.8em + 3.5vw); } }
    trix-toolbar .trix-button--icon::before {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0.6;
      content: "";
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain; }
      @media (max-width: 768px) {
        trix-toolbar .trix-button--icon::before {
          right: 6%;
          left: 6%; } }
    trix-toolbar .trix-button--icon.trix-active::before {
      opacity: 1; }
    trix-toolbar .trix-button--icon:disabled::before {
      opacity: 0.125; }

  trix-toolbar .trix-button--icon-attach::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    top: 8%;
    bottom: 4%; }

  trix-toolbar .trix-button--icon-bold::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-italic::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-link::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-strike::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-quote::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-heading-1::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-code::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-bullet-list::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-number-list::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-undo::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-redo::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-decrease-nesting-level::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-button--icon-increase-nesting-level::before {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

  trix-toolbar .trix-dialogs {
    position: relative; }

  trix-toolbar .trix-dialog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 0.75em;
    padding: 15px 10px;
    background: #fff;
    box-shadow: 0 0.3em 1em #ccc;
    border-top: 2px solid #888;
    border-radius: 5px;
    z-index: 5; }

  trix-toolbar .trix-input--dialog {
    font-size: inherit;
    font-weight: normal;
    padding: 0.5em 0.8em;
    margin: 0 10px 0 0;
    border-radius: 3px;
    border: 1px solid #bbb;
    background-color: #fff;
    box-shadow: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none; }
    trix-toolbar .trix-input--dialog.validate:invalid {
      box-shadow: #F00 0px 0px 1.5px 1px; }

  trix-toolbar .trix-button--dialog {
    font-size: inherit;
    padding: 0.5em;
    border-bottom: none; }

  trix-toolbar .trix-dialog--link {
    max-width: 600px; }

  trix-toolbar .trix-dialog__link-fields {
    display: flex;
    align-items: baseline; }
    trix-toolbar .trix-dialog__link-fields .trix-input {
      flex: 1; }
    trix-toolbar .trix-dialog__link-fields .trix-button-group {
      flex: 0 0 content;
      margin: 0; }

  trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }

  trix-editor [data-trix-mutable]::-moz-selection,
  trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
    background: none; }

  trix-editor [data-trix-mutable]::selection,
  trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
    background: none; }

  trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
    background: highlight; }

  trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
    background: highlight; }

  trix-editor [data-trix-mutable].attachment.attachment--file {
    box-shadow: 0 0 0 2px highlight;
    border-color: transparent; }

  trix-editor [data-trix-mutable].attachment img {
    box-shadow: 0 0 0 2px highlight; }

  trix-editor .attachment {
    position: relative; }
    trix-editor .attachment:hover {
      cursor: default; }

  trix-editor .attachment--preview .attachment__caption:hover {
    cursor: text; }

  trix-editor .attachment__progress {
    position: absolute;
    z-index: 1;
    height: 20px;
    top: calc(50% - 10px);
    left: 5%;
    width: 90%;
    opacity: 0.9;
    transition: opacity 200ms ease-in; }
    trix-editor .attachment__progress[value="100"] {
      opacity: 0; }

  trix-editor .attachment__caption-editor {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    text-align: center;
    vertical-align: top;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none; }

  trix-editor .attachment__toolbar {
    position: absolute;
    z-index: 1;
    top: -0.9em;
    left: 0;
    width: 100%;
    text-align: center; }

  trix-editor .trix-button-group {
    display: inline-flex; }

  trix-editor .trix-button {
    position: relative;
    float: left;
    color: #666;
    white-space: nowrap;
    font-size: 80%;
    padding: 0 0.8em;
    margin: 0;
    outline: none;
    border: none;
    border-radius: 0;
    background: transparent; }
    trix-editor .trix-button:not(:first-child) {
      border-left: 1px solid #ccc; }
    trix-editor .trix-button.trix-active {
      background: #cbeefa; }
    trix-editor .trix-button:not(:disabled) {
      cursor: pointer; }

  trix-editor .trix-button--remove {
    text-indent: -9999px;
    display: inline-block;
    padding: 0;
    outline: none;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid highlight;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
    trix-editor .trix-button--remove::before {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: 0.7;
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 90%; }
    trix-editor .trix-button--remove:hover {
      border-color: #333; }
      trix-editor .trix-button--remove:hover::before {
        opacity: 1; }

  trix-editor .attachment__metadata-container {
    position: relative; }

  trix-editor .attachment__metadata {
    position: absolute;
    left: 50%;
    top: 2em;
    transform: translate(-50%, 0);
    max-width: 90%;
    padding: 0.1em 0.6em;
    font-size: 0.8em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 3px; }
    trix-editor .attachment__metadata .attachment__name {
      display: inline-block;
      max-width: 100%;
      vertical-align: bottom;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    trix-editor .attachment__metadata .attachment__size {
      margin-left: 0.2em;
      white-space: nowrap; }

  .trix-content {
    line-height: var(--line-height);
    overflow-wrap: break-word;
    word-break: break-word; }
    .trix-content * {
      box-sizing: border-box;
      margin: 0;
      padding: 0; }
    .trix-content h1 {
      font-size: 1.2em;
      line-height: 1.2; }
    .trix-content blockquote {
      border: 0 solid #ccc;
      border-left-width: 0.3em;
      margin-left: 0.3em;
      padding-left: 0.6em; }
    .trix-content [dir=rtl] blockquote,
    .trix-content blockquote[dir=rtl] {
      border-width: 0;
      border-right-width: 0.3em;
      margin-right: 0.3em;
      padding-right: 0.6em; }
    .trix-content li {
      margin-left: 1em; }
    .trix-content [dir=rtl] li {
      margin-right: 1em; }
    .trix-content pre {
      display: inline-block;
      width: 100%;
      vertical-align: top;
      font-family: monospace;
      font-size: 0.9em;
      padding: 0.5em;
      white-space: pre;
      background-color: #eee;
      overflow-x: auto; }
    .trix-content img {
      max-width: 100%;
      height: auto; }
    .trix-content .attachment {
      display: inline-block;
      position: relative;
      max-width: 100%; }
      .trix-content .attachment a {
        color: inherit;
        text-decoration: none; }
        .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
          color: inherit; }
    .trix-content .attachment__caption {
      text-align: center; }
      .trix-content .attachment__caption .attachment__name + .attachment__size::before {
        content: ' \2022 '; }
    .trix-content .attachment--preview {
      width: 100%;
      text-align: center; }
      .trix-content .attachment--preview .attachment__caption {
        color: #666;
        font-size: 0.9em;
        line-height: 1.2; }
    .trix-content .attachment--file {
      color: #333;
      line-height: 1;
      margin: 0 2px 2px 2px;
      padding: 0.4em 1em;
      border: 1px solid #bbb;
      border-radius: 5px; }
    .trix-content .attachment-gallery {
      display: flex;
      flex-wrap: wrap;
      position: relative; }
      .trix-content .attachment-gallery .attachment {
        flex: 1 0 33%;
        padding: 0 0.5em;
        max-width: 33%; }
      .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
        flex-basis: 50%;
        max-width: 50%; }

  /*
   * We need to override trix.css's image gallery styles to accommodate the
   * <action-text-attachment> element we wrap around attachments. Otherwise,
   * images in galleries will be squished by the max-width: 33%; rule.
  */
  .trix-content .attachment-gallery > action-text-attachment,
  .trix-content .attachment-gallery > .attachment {
    flex: 1 0 33%;
    padding: 0 0.5em;
    max-width: 33%;
  }

  .trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
  .trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
  .trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
    flex-basis: 50%;
    max-width: 50%;
  }

  .trix-content action-text-attachment .attachment {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Rounded like the other photos, such as in a chef's story. */
  .trix-content .attachment--preview img {
    border-radius: var(--radius-medium);
  }
}
@layer base {
  html {
    background: var(--color-main-bg);
    color: var(--color-text);
    min-height: 100vh;
  }

  /* A <summary> opens its <details>, and the chevron in it turns along. */
  summary {
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker { display: none; }

    .chevron { transition: rotate 150ms ease; }
  }

  details[open] > summary .chevron { rotate: 90deg; }

  .field_with_errors {
    input, textarea, select {
      border-color: var(--color-input-error-color);
    }
  }

  .field-group {
    display: grid;
    column-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}
/* Where and how big: spacing, display, position, flex, grid, sizes, text alignment.
   bin/utilities writes sm:, md: and lg: variants of these classes to layout_breakpoints.css. */
@layer layout {
  .m-0   { margin:        0; }
  .mt-0  { margin-top:    0; }
  .mb-0  { margin-bottom: 0; }
  .mr-0  { margin-right:  0; }
  .ml-0  { margin-left:   0; }

  .mt-025 { margin-top:    .25rem; }
  .mb-025 { margin-bottom: .25rem; }
  .ml-025 { margin-left:   .25rem; }
  .mr-025 { margin-right:  .25rem; }
  .my-025 { margin-top:    .25rem; margin-bottom: .25rem; }
  .mx-025 { margin-left:   .25rem; margin-right:  .25rem; }
  .m-025  { margin:        .25rem; }

  .mt-05 { margin-top:    .5rem; }
  .mb-05 { margin-bottom: .5rem; }
  .ml-05 { margin-left:   .5rem; }
  .mr-05 { margin-right:  .5rem; }
  .my-05 { margin-top:    .5rem; margin-bottom: .5rem; }
  .mx-05 { margin-left:   .5rem; margin-right:  .5rem; }
  .m-05  { margin:        .5rem; }

  .mt-1  { margin-top:    1rem; }
  .mb-1  { margin-bottom: 1rem; }
  .ml-1  { margin-left:   1rem; }
  .mr-1  { margin-right:  1rem; }
  .my-1  { margin-top:    1rem; margin-bottom: 1rem; }
  .mx-1  { margin-left:   1rem; margin-right:  1rem; }
  .m-1   { margin:        1rem; }

  .mt-2  { margin-top:    2rem; }
  .mb-2  { margin-bottom: 2rem; }
  .ml-2  { margin-left:   2rem; }
  .mr-2  { margin-right:  2rem; }
  .my-2  { margin-top:    2rem; margin-bottom: 2rem; }
  .mx-2  { margin-left:   2rem; margin-right:  2rem; }
  .m-2   { margin:        2rem; }

  .mt-3  { margin-top:    3rem; }
  .mb-3  { margin-bottom: 3rem; }
  .ml-3  { margin-left:   3rem; }
  .mr-3  { margin-right:  3rem; }
  .my-3  { margin-top:    3rem; margin-bottom: 3rem; }
  .mx-3  { margin-left:   3rem; margin-right:  3rem; }
  .m-3   { margin:        3rem; }

  .p-0   { padding: 0;            }
  .px-0  { padding-left: 0; padding-right: 0; }

  .pt-025 { padding-top:    .25rem; }
  .pb-025 { padding-bottom: .25rem; }
  .pl-025 { padding-left:   .25rem; }
  .pr-025 { padding-right:  .25rem; }
  .py-025 { padding-top:    .25rem; padding-bottom: .25rem;  }
  .px-025 { padding-left:   .25rem; padding-right: .25rem;  }
  .p-025  { padding:        .25rem; }

  .pt-05 { padding-top:    .5rem; }
  .pb-05 { padding-bottom: .5rem; }
  .pl-05 { padding-left:   .5rem; }
  .pr-05 { padding-right:  .5rem; }
  .py-05 { padding-top:    .5rem; padding-bottom: .5rem;  }
  .px-05 { padding-left:   .5rem; padding-right: .5rem;  }
  .p-05  { padding:        .5rem; }

  .pt-1  { padding-top:    1rem; }
  .pb-1  { padding-bottom: 1rem; }
  .pl-1  { padding-left:   1rem; }
  .pr-1  { padding-right:  1rem; }
  .py-1  { padding-top:    1rem; padding-bottom: 1rem; }
  .px-1  { padding-left:   1rem; padding-right: 1rem;  }
  .p-1   { padding:        1rem; }

  .pt-2  { padding-top:    2rem; }
  .pb-2  { padding-bottom: 2rem; }
  .pl-2  { padding-left:   2rem; }
  .pr-2  { padding-right:  2rem; }
  .py-2  { padding-top:    2rem; padding-bottom: 2rem;  }
  .px-2  { padding-left:   2rem; padding-right: 2rem; }
  .p-2   { padding:        2rem; }

  .pt-3  { padding-top:    3rem; }
  .pb-3  { padding-bottom: 3rem; }
  .pl-3  { padding-left:   3rem; }
  .pr-3  { padding-right:  3rem; }
  .py-3  { padding-top:    3rem; padding-bottom: 3rem; }
  .px-3  { padding-left:   3rem; padding-right: 3rem;  }
  .p-3   { padding:        3rem; }


  .block        { display: block; }
  .inline       { display: inline; }
  .inline-block { display: inline-block; }
  .invisible    { visibility: hidden; }
  .hidden       { display: none; }
  .flow-root    { display: flow-root; }

  .relative { position: relative; }
  .sticky   { position: sticky; top: 1rem; }

  .flex                  { display: flex; }
  .flex-inline           { display: inline-flex; }
  .flex-column           { flex-direction: column; }
  .flex-row              { flex-direction: row; }
  .flex-shrink-0         { flex-shrink: 0; }
  .min-width-0           { min-width: 0; }
  .flex-wrap             { flex-wrap: wrap; }
  .flex-grow             { flex-grow: 1; }
  .align-center          { align-items: center; }
  .align-baseline        { align-items: baseline; }
  .align-start           { align-items: flex-start; }
  .align-end             { align-items: flex-end; }
  .justify-space-between { justify-content: space-between; }
  .justify-center        { justify-content: center; }
  .justify-end           { justify-content: flex-end; }
  .order-first           { order: -1; }

  .grid       { display: grid;                       }
  .grid-1-1   { grid-template-columns: 1fr 1fr;      }
  .grid-1-1-1 { grid-template-columns: 1fr 1fr 1fr;  }
  .grid-auto  { grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); }
  .grid-2-1   { grid-template-columns: 2fr 1fr;      }

  .gap-05 { gap: 0.5rem; }
  .gap-025 { gap: 0.25rem; }
  .gap-1 { gap: 1rem; }
  .gap-2 { gap: 2rem; }

  .mt-auto { margin-top: auto; }
  .ml-auto { margin-left: auto; }
  .mx-auto { margin-left: auto; margin-right: auto; }

  .height-100p { height: 100%; }
  .width-100 { width: 100%; }
  .width-auto { width: auto; }
  .width-min-content { width: min-content; }
  .width-fit-content { width: fit-content; }

  .text-center  { text-align: center; }
  .text-right   { text-align: right; }
  .text-left    { text-align: left; }
  .text-justify { text-align: justify; }

  .text-nowrap  { white-space: nowrap; }
  .float-left { float: left; }
  .float-right { float: right; }
  .clear-left { clear: left; }
  .clear-right { clear: right; }
  .overflow-scroll { overflow-x: scroll; }
  .overflow-auto   { overflow: auto;     }
  /* A row to swipe sideways, under the page's 1rem gutter to the screen's edges. */
  .overflow-swipe  { overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
}
/* Generated by bin/utilities from layout.css. Do not edit. */
@layer layout {
  @media (min-width: 40em) {
    .sm\:m-0 { margin: 0; }
    .sm\:mt-0 { margin-top: 0; }
    .sm\:mb-0 { margin-bottom: 0; }
    .sm\:mr-0 { margin-right: 0; }
    .sm\:ml-0 { margin-left: 0; }
    .sm\:mt-025 { margin-top: .25rem; }
    .sm\:mb-025 { margin-bottom: .25rem; }
    .sm\:ml-025 { margin-left: .25rem; }
    .sm\:mr-025 { margin-right: .25rem; }
    .sm\:my-025 { margin-top: .25rem; margin-bottom: .25rem; }
    .sm\:mx-025 { margin-left: .25rem; margin-right: .25rem; }
    .sm\:m-025 { margin: .25rem; }
    .sm\:mt-05 { margin-top: .5rem; }
    .sm\:mb-05 { margin-bottom: .5rem; }
    .sm\:ml-05 { margin-left: .5rem; }
    .sm\:mr-05 { margin-right: .5rem; }
    .sm\:my-05 { margin-top: .5rem; margin-bottom: .5rem; }
    .sm\:mx-05 { margin-left: .5rem; margin-right: .5rem; }
    .sm\:m-05 { margin: .5rem; }
    .sm\:mt-1 { margin-top: 1rem; }
    .sm\:mb-1 { margin-bottom: 1rem; }
    .sm\:ml-1 { margin-left: 1rem; }
    .sm\:mr-1 { margin-right: 1rem; }
    .sm\:my-1 { margin-top: 1rem; margin-bottom: 1rem; }
    .sm\:mx-1 { margin-left: 1rem; margin-right: 1rem; }
    .sm\:m-1 { margin: 1rem; }
    .sm\:mt-2 { margin-top: 2rem; }
    .sm\:mb-2 { margin-bottom: 2rem; }
    .sm\:ml-2 { margin-left: 2rem; }
    .sm\:mr-2 { margin-right: 2rem; }
    .sm\:my-2 { margin-top: 2rem; margin-bottom: 2rem; }
    .sm\:mx-2 { margin-left: 2rem; margin-right: 2rem; }
    .sm\:m-2 { margin: 2rem; }
    .sm\:mt-3 { margin-top: 3rem; }
    .sm\:mb-3 { margin-bottom: 3rem; }
    .sm\:ml-3 { margin-left: 3rem; }
    .sm\:mr-3 { margin-right: 3rem; }
    .sm\:my-3 { margin-top: 3rem; margin-bottom: 3rem; }
    .sm\:mx-3 { margin-left: 3rem; margin-right: 3rem; }
    .sm\:m-3 { margin: 3rem; }
    .sm\:p-0 { padding: 0; }
    .sm\:px-0 { padding-left: 0; padding-right: 0; }
    .sm\:pt-025 { padding-top: .25rem; }
    .sm\:pb-025 { padding-bottom: .25rem; }
    .sm\:pl-025 { padding-left: .25rem; }
    .sm\:pr-025 { padding-right: .25rem; }
    .sm\:py-025 { padding-top: .25rem; padding-bottom: .25rem; }
    .sm\:px-025 { padding-left: .25rem; padding-right: .25rem; }
    .sm\:p-025 { padding: .25rem; }
    .sm\:pt-05 { padding-top: .5rem; }
    .sm\:pb-05 { padding-bottom: .5rem; }
    .sm\:pl-05 { padding-left: .5rem; }
    .sm\:pr-05 { padding-right: .5rem; }
    .sm\:py-05 { padding-top: .5rem; padding-bottom: .5rem; }
    .sm\:px-05 { padding-left: .5rem; padding-right: .5rem; }
    .sm\:p-05 { padding: .5rem; }
    .sm\:pt-1 { padding-top: 1rem; }
    .sm\:pb-1 { padding-bottom: 1rem; }
    .sm\:pl-1 { padding-left: 1rem; }
    .sm\:pr-1 { padding-right: 1rem; }
    .sm\:py-1 { padding-top: 1rem; padding-bottom: 1rem; }
    .sm\:px-1 { padding-left: 1rem; padding-right: 1rem; }
    .sm\:p-1 { padding: 1rem; }
    .sm\:pt-2 { padding-top: 2rem; }
    .sm\:pb-2 { padding-bottom: 2rem; }
    .sm\:pl-2 { padding-left: 2rem; }
    .sm\:pr-2 { padding-right: 2rem; }
    .sm\:py-2 { padding-top: 2rem; padding-bottom: 2rem; }
    .sm\:px-2 { padding-left: 2rem; padding-right: 2rem; }
    .sm\:p-2 { padding: 2rem; }
    .sm\:pt-3 { padding-top: 3rem; }
    .sm\:pb-3 { padding-bottom: 3rem; }
    .sm\:pl-3 { padding-left: 3rem; }
    .sm\:pr-3 { padding-right: 3rem; }
    .sm\:py-3 { padding-top: 3rem; padding-bottom: 3rem; }
    .sm\:px-3 { padding-left: 3rem; padding-right: 3rem; }
    .sm\:p-3 { padding: 3rem; }
    .sm\:block { display: block; }
    .sm\:inline { display: inline; }
    .sm\:inline-block { display: inline-block; }
    .sm\:invisible { visibility: hidden; }
    .sm\:hidden { display: none; }
    .sm\:flow-root { display: flow-root; }
    .sm\:relative { position: relative; }
    .sm\:sticky { position: sticky; top: 1rem; }
    .sm\:flex { display: flex; }
    .sm\:flex-inline { display: inline-flex; }
    .sm\:flex-column { flex-direction: column; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex-shrink-0 { flex-shrink: 0; }
    .sm\:min-width-0 { min-width: 0; }
    .sm\:flex-wrap { flex-wrap: wrap; }
    .sm\:flex-grow { flex-grow: 1; }
    .sm\:align-center { align-items: center; }
    .sm\:align-baseline { align-items: baseline; }
    .sm\:align-start { align-items: flex-start; }
    .sm\:align-end { align-items: flex-end; }
    .sm\:justify-space-between { justify-content: space-between; }
    .sm\:justify-center { justify-content: center; }
    .sm\:justify-end { justify-content: flex-end; }
    .sm\:order-first { order: -1; }
    .sm\:grid { display: grid; }
    .sm\:grid-1-1 { grid-template-columns: 1fr 1fr; }
    .sm\:grid-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
    .sm\:grid-auto { grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); }
    .sm\:grid-2-1 { grid-template-columns: 2fr 1fr; }
    .sm\:gap-05 { gap: 0.5rem; }
    .sm\:gap-025 { gap: 0.25rem; }
    .sm\:gap-1 { gap: 1rem; }
    .sm\:gap-2 { gap: 2rem; }
    .sm\:mt-auto { margin-top: auto; }
    .sm\:ml-auto { margin-left: auto; }
    .sm\:mx-auto { margin-left: auto; margin-right: auto; }
    .sm\:height-100p { height: 100%; }
    .sm\:width-100 { width: 100%; }
    .sm\:width-auto { width: auto; }
    .sm\:width-min-content { width: min-content; }
    .sm\:width-fit-content { width: fit-content; }
    .sm\:text-center { text-align: center; }
    .sm\:text-right { text-align: right; }
    .sm\:text-left { text-align: left; }
    .sm\:text-justify { text-align: justify; }
    .sm\:text-nowrap { white-space: nowrap; }
    .sm\:float-left { float: left; }
    .sm\:float-right { float: right; }
    .sm\:clear-left { clear: left; }
    .sm\:clear-right { clear: right; }
    .sm\:overflow-scroll { overflow-x: scroll; }
    .sm\:overflow-auto { overflow: auto; }
    .sm\:overflow-swipe { overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  }

  @media (min-width: 48em) {
    .md\:m-0 { margin: 0; }
    .md\:mt-0 { margin-top: 0; }
    .md\:mb-0 { margin-bottom: 0; }
    .md\:mr-0 { margin-right: 0; }
    .md\:ml-0 { margin-left: 0; }
    .md\:mt-025 { margin-top: .25rem; }
    .md\:mb-025 { margin-bottom: .25rem; }
    .md\:ml-025 { margin-left: .25rem; }
    .md\:mr-025 { margin-right: .25rem; }
    .md\:my-025 { margin-top: .25rem; margin-bottom: .25rem; }
    .md\:mx-025 { margin-left: .25rem; margin-right: .25rem; }
    .md\:m-025 { margin: .25rem; }
    .md\:mt-05 { margin-top: .5rem; }
    .md\:mb-05 { margin-bottom: .5rem; }
    .md\:ml-05 { margin-left: .5rem; }
    .md\:mr-05 { margin-right: .5rem; }
    .md\:my-05 { margin-top: .5rem; margin-bottom: .5rem; }
    .md\:mx-05 { margin-left: .5rem; margin-right: .5rem; }
    .md\:m-05 { margin: .5rem; }
    .md\:mt-1 { margin-top: 1rem; }
    .md\:mb-1 { margin-bottom: 1rem; }
    .md\:ml-1 { margin-left: 1rem; }
    .md\:mr-1 { margin-right: 1rem; }
    .md\:my-1 { margin-top: 1rem; margin-bottom: 1rem; }
    .md\:mx-1 { margin-left: 1rem; margin-right: 1rem; }
    .md\:m-1 { margin: 1rem; }
    .md\:mt-2 { margin-top: 2rem; }
    .md\:mb-2 { margin-bottom: 2rem; }
    .md\:ml-2 { margin-left: 2rem; }
    .md\:mr-2 { margin-right: 2rem; }
    .md\:my-2 { margin-top: 2rem; margin-bottom: 2rem; }
    .md\:mx-2 { margin-left: 2rem; margin-right: 2rem; }
    .md\:m-2 { margin: 2rem; }
    .md\:mt-3 { margin-top: 3rem; }
    .md\:mb-3 { margin-bottom: 3rem; }
    .md\:ml-3 { margin-left: 3rem; }
    .md\:mr-3 { margin-right: 3rem; }
    .md\:my-3 { margin-top: 3rem; margin-bottom: 3rem; }
    .md\:mx-3 { margin-left: 3rem; margin-right: 3rem; }
    .md\:m-3 { margin: 3rem; }
    .md\:p-0 { padding: 0; }
    .md\:px-0 { padding-left: 0; padding-right: 0; }
    .md\:pt-025 { padding-top: .25rem; }
    .md\:pb-025 { padding-bottom: .25rem; }
    .md\:pl-025 { padding-left: .25rem; }
    .md\:pr-025 { padding-right: .25rem; }
    .md\:py-025 { padding-top: .25rem; padding-bottom: .25rem; }
    .md\:px-025 { padding-left: .25rem; padding-right: .25rem; }
    .md\:p-025 { padding: .25rem; }
    .md\:pt-05 { padding-top: .5rem; }
    .md\:pb-05 { padding-bottom: .5rem; }
    .md\:pl-05 { padding-left: .5rem; }
    .md\:pr-05 { padding-right: .5rem; }
    .md\:py-05 { padding-top: .5rem; padding-bottom: .5rem; }
    .md\:px-05 { padding-left: .5rem; padding-right: .5rem; }
    .md\:p-05 { padding: .5rem; }
    .md\:pt-1 { padding-top: 1rem; }
    .md\:pb-1 { padding-bottom: 1rem; }
    .md\:pl-1 { padding-left: 1rem; }
    .md\:pr-1 { padding-right: 1rem; }
    .md\:py-1 { padding-top: 1rem; padding-bottom: 1rem; }
    .md\:px-1 { padding-left: 1rem; padding-right: 1rem; }
    .md\:p-1 { padding: 1rem; }
    .md\:pt-2 { padding-top: 2rem; }
    .md\:pb-2 { padding-bottom: 2rem; }
    .md\:pl-2 { padding-left: 2rem; }
    .md\:pr-2 { padding-right: 2rem; }
    .md\:py-2 { padding-top: 2rem; padding-bottom: 2rem; }
    .md\:px-2 { padding-left: 2rem; padding-right: 2rem; }
    .md\:p-2 { padding: 2rem; }
    .md\:pt-3 { padding-top: 3rem; }
    .md\:pb-3 { padding-bottom: 3rem; }
    .md\:pl-3 { padding-left: 3rem; }
    .md\:pr-3 { padding-right: 3rem; }
    .md\:py-3 { padding-top: 3rem; padding-bottom: 3rem; }
    .md\:px-3 { padding-left: 3rem; padding-right: 3rem; }
    .md\:p-3 { padding: 3rem; }
    .md\:block { display: block; }
    .md\:inline { display: inline; }
    .md\:inline-block { display: inline-block; }
    .md\:invisible { visibility: hidden; }
    .md\:hidden { display: none; }
    .md\:flow-root { display: flow-root; }
    .md\:relative { position: relative; }
    .md\:sticky { position: sticky; top: 1rem; }
    .md\:flex { display: flex; }
    .md\:flex-inline { display: inline-flex; }
    .md\:flex-column { flex-direction: column; }
    .md\:flex-row { flex-direction: row; }
    .md\:flex-shrink-0 { flex-shrink: 0; }
    .md\:min-width-0 { min-width: 0; }
    .md\:flex-wrap { flex-wrap: wrap; }
    .md\:flex-grow { flex-grow: 1; }
    .md\:align-center { align-items: center; }
    .md\:align-baseline { align-items: baseline; }
    .md\:align-start { align-items: flex-start; }
    .md\:align-end { align-items: flex-end; }
    .md\:justify-space-between { justify-content: space-between; }
    .md\:justify-center { justify-content: center; }
    .md\:justify-end { justify-content: flex-end; }
    .md\:order-first { order: -1; }
    .md\:grid { display: grid; }
    .md\:grid-1-1 { grid-template-columns: 1fr 1fr; }
    .md\:grid-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
    .md\:grid-auto { grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); }
    .md\:grid-2-1 { grid-template-columns: 2fr 1fr; }
    .md\:gap-05 { gap: 0.5rem; }
    .md\:gap-025 { gap: 0.25rem; }
    .md\:gap-1 { gap: 1rem; }
    .md\:gap-2 { gap: 2rem; }
    .md\:mt-auto { margin-top: auto; }
    .md\:ml-auto { margin-left: auto; }
    .md\:mx-auto { margin-left: auto; margin-right: auto; }
    .md\:height-100p { height: 100%; }
    .md\:width-100 { width: 100%; }
    .md\:width-auto { width: auto; }
    .md\:width-min-content { width: min-content; }
    .md\:width-fit-content { width: fit-content; }
    .md\:text-center { text-align: center; }
    .md\:text-right { text-align: right; }
    .md\:text-left { text-align: left; }
    .md\:text-justify { text-align: justify; }
    .md\:text-nowrap { white-space: nowrap; }
    .md\:float-left { float: left; }
    .md\:float-right { float: right; }
    .md\:clear-left { clear: left; }
    .md\:clear-right { clear: right; }
    .md\:overflow-scroll { overflow-x: scroll; }
    .md\:overflow-auto { overflow: auto; }
    .md\:overflow-swipe { overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  }

  @media (min-width: 60em) {
    .lg\:m-0 { margin: 0; }
    .lg\:mt-0 { margin-top: 0; }
    .lg\:mb-0 { margin-bottom: 0; }
    .lg\:mr-0 { margin-right: 0; }
    .lg\:ml-0 { margin-left: 0; }
    .lg\:mt-025 { margin-top: .25rem; }
    .lg\:mb-025 { margin-bottom: .25rem; }
    .lg\:ml-025 { margin-left: .25rem; }
    .lg\:mr-025 { margin-right: .25rem; }
    .lg\:my-025 { margin-top: .25rem; margin-bottom: .25rem; }
    .lg\:mx-025 { margin-left: .25rem; margin-right: .25rem; }
    .lg\:m-025 { margin: .25rem; }
    .lg\:mt-05 { margin-top: .5rem; }
    .lg\:mb-05 { margin-bottom: .5rem; }
    .lg\:ml-05 { margin-left: .5rem; }
    .lg\:mr-05 { margin-right: .5rem; }
    .lg\:my-05 { margin-top: .5rem; margin-bottom: .5rem; }
    .lg\:mx-05 { margin-left: .5rem; margin-right: .5rem; }
    .lg\:m-05 { margin: .5rem; }
    .lg\:mt-1 { margin-top: 1rem; }
    .lg\:mb-1 { margin-bottom: 1rem; }
    .lg\:ml-1 { margin-left: 1rem; }
    .lg\:mr-1 { margin-right: 1rem; }
    .lg\:my-1 { margin-top: 1rem; margin-bottom: 1rem; }
    .lg\:mx-1 { margin-left: 1rem; margin-right: 1rem; }
    .lg\:m-1 { margin: 1rem; }
    .lg\:mt-2 { margin-top: 2rem; }
    .lg\:mb-2 { margin-bottom: 2rem; }
    .lg\:ml-2 { margin-left: 2rem; }
    .lg\:mr-2 { margin-right: 2rem; }
    .lg\:my-2 { margin-top: 2rem; margin-bottom: 2rem; }
    .lg\:mx-2 { margin-left: 2rem; margin-right: 2rem; }
    .lg\:m-2 { margin: 2rem; }
    .lg\:mt-3 { margin-top: 3rem; }
    .lg\:mb-3 { margin-bottom: 3rem; }
    .lg\:ml-3 { margin-left: 3rem; }
    .lg\:mr-3 { margin-right: 3rem; }
    .lg\:my-3 { margin-top: 3rem; margin-bottom: 3rem; }
    .lg\:mx-3 { margin-left: 3rem; margin-right: 3rem; }
    .lg\:m-3 { margin: 3rem; }
    .lg\:p-0 { padding: 0; }
    .lg\:px-0 { padding-left: 0; padding-right: 0; }
    .lg\:pt-025 { padding-top: .25rem; }
    .lg\:pb-025 { padding-bottom: .25rem; }
    .lg\:pl-025 { padding-left: .25rem; }
    .lg\:pr-025 { padding-right: .25rem; }
    .lg\:py-025 { padding-top: .25rem; padding-bottom: .25rem; }
    .lg\:px-025 { padding-left: .25rem; padding-right: .25rem; }
    .lg\:p-025 { padding: .25rem; }
    .lg\:pt-05 { padding-top: .5rem; }
    .lg\:pb-05 { padding-bottom: .5rem; }
    .lg\:pl-05 { padding-left: .5rem; }
    .lg\:pr-05 { padding-right: .5rem; }
    .lg\:py-05 { padding-top: .5rem; padding-bottom: .5rem; }
    .lg\:px-05 { padding-left: .5rem; padding-right: .5rem; }
    .lg\:p-05 { padding: .5rem; }
    .lg\:pt-1 { padding-top: 1rem; }
    .lg\:pb-1 { padding-bottom: 1rem; }
    .lg\:pl-1 { padding-left: 1rem; }
    .lg\:pr-1 { padding-right: 1rem; }
    .lg\:py-1 { padding-top: 1rem; padding-bottom: 1rem; }
    .lg\:px-1 { padding-left: 1rem; padding-right: 1rem; }
    .lg\:p-1 { padding: 1rem; }
    .lg\:pt-2 { padding-top: 2rem; }
    .lg\:pb-2 { padding-bottom: 2rem; }
    .lg\:pl-2 { padding-left: 2rem; }
    .lg\:pr-2 { padding-right: 2rem; }
    .lg\:py-2 { padding-top: 2rem; padding-bottom: 2rem; }
    .lg\:px-2 { padding-left: 2rem; padding-right: 2rem; }
    .lg\:p-2 { padding: 2rem; }
    .lg\:pt-3 { padding-top: 3rem; }
    .lg\:pb-3 { padding-bottom: 3rem; }
    .lg\:pl-3 { padding-left: 3rem; }
    .lg\:pr-3 { padding-right: 3rem; }
    .lg\:py-3 { padding-top: 3rem; padding-bottom: 3rem; }
    .lg\:px-3 { padding-left: 3rem; padding-right: 3rem; }
    .lg\:p-3 { padding: 3rem; }
    .lg\:block { display: block; }
    .lg\:inline { display: inline; }
    .lg\:inline-block { display: inline-block; }
    .lg\:invisible { visibility: hidden; }
    .lg\:hidden { display: none; }
    .lg\:flow-root { display: flow-root; }
    .lg\:relative { position: relative; }
    .lg\:sticky { position: sticky; top: 1rem; }
    .lg\:flex { display: flex; }
    .lg\:flex-inline { display: inline-flex; }
    .lg\:flex-column { flex-direction: column; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-shrink-0 { flex-shrink: 0; }
    .lg\:min-width-0 { min-width: 0; }
    .lg\:flex-wrap { flex-wrap: wrap; }
    .lg\:flex-grow { flex-grow: 1; }
    .lg\:align-center { align-items: center; }
    .lg\:align-baseline { align-items: baseline; }
    .lg\:align-start { align-items: flex-start; }
    .lg\:align-end { align-items: flex-end; }
    .lg\:justify-space-between { justify-content: space-between; }
    .lg\:justify-center { justify-content: center; }
    .lg\:justify-end { justify-content: flex-end; }
    .lg\:order-first { order: -1; }
    .lg\:grid { display: grid; }
    .lg\:grid-1-1 { grid-template-columns: 1fr 1fr; }
    .lg\:grid-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
    .lg\:grid-auto { grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); }
    .lg\:grid-2-1 { grid-template-columns: 2fr 1fr; }
    .lg\:gap-05 { gap: 0.5rem; }
    .lg\:gap-025 { gap: 0.25rem; }
    .lg\:gap-1 { gap: 1rem; }
    .lg\:gap-2 { gap: 2rem; }
    .lg\:mt-auto { margin-top: auto; }
    .lg\:ml-auto { margin-left: auto; }
    .lg\:mx-auto { margin-left: auto; margin-right: auto; }
    .lg\:height-100p { height: 100%; }
    .lg\:width-100 { width: 100%; }
    .lg\:width-auto { width: auto; }
    .lg\:width-min-content { width: min-content; }
    .lg\:width-fit-content { width: fit-content; }
    .lg\:text-center { text-align: center; }
    .lg\:text-right { text-align: right; }
    .lg\:text-left { text-align: left; }
    .lg\:text-justify { text-align: justify; }
    .lg\:text-nowrap { white-space: nowrap; }
    .lg\:float-left { float: left; }
    .lg\:float-right { float: right; }
    .lg\:clear-left { clear: left; }
    .lg\:clear-right { clear: right; }
    .lg\:overflow-scroll { overflow-x: scroll; }
    .lg\:overflow-auto { overflow: auto; }
    .lg\:overflow-swipe { overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  }
}
@layer modules {
  .action-group {
    display: flex;
    flex-flow: row wrap;
    gap: 0.5rem;
    width: 100%;
  }

  .action-group__title {
    font-size: 80%;
    text-transform: uppercase;
    font-weight: 500;
    flex-basis: 100%;
  }

  .action-group__item {
    flex: 1 1 45%;
  }

  .action-group__icon {
    filter: invert(1) drop-shadow(0 2px 2px var(--color-shadow-strong));
  }

  .action-group__button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
    padding: 1rem;
    font-weight: 500;
    background-color: var(--color-action-group-button-bg);
    color: var(--color-action-group-button-color);
    border-radius: var(--radius-small);
    text-shadow: 0 2px 2px var(--color-shadow-strong);
  }

  .action-group__button--active {
    background-color: var(--color-action-group-button-active-bg);
  }

  .action-group__button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
  }

  .action-group__note {
    flex-basis: 100%;
    font-size: 80%;
  }
}
@layer modules {
  .action-sheet {
    display: flex;
    flex-direction: column;
    margin: -.8rem;
  }

  .action-sheet__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    filter: invert(1) drop-shadow(0 2px 2px var(--color-shadow-strong));
  }

  .action-sheet__item {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: .5rem .8rem;
    border-radius: var(--radius-small);
    text-shadow: 0 2px 2px var(--color-shadow-strong);
    color: inherit;
    width: 100%;
    cursor: pointer;
  }

  .action-sheet__item:hover {
    background-color: var(--color-action-sheet-item-hover-bg);
  }

  /* A menu of actions is as wide as its longest label, so labels stay on one line. */
  .popup-menu:has(> .action-sheet) {
    width: max-content;
    max-width: calc(100vw - 2rem);
  }
}
@layer modules {
  /* A square app tile, like on a phone's home screen. */
  .app-icon {
    --size: 64px;

    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: var(--size);
    block-size: var(--size);
    padding: calc(var(--size) * 0.14);
    border-radius: calc(var(--size) * 0.24);
    background: hsl(var(--hsl-white));
    border: 1px solid var(--color-line);
    box-shadow: 0 2px 6px var(--color-shadow);
    object-fit: contain;
  }

  .app-icon--initial {
    font-weight: 800;
    font-size: calc(var(--size) * 0.42);
    background: hsl(var(--hsl-base-100));
  }
}
@layer modules {
  /* The assistant apps page: Stewday in ChatGPT and Claude. */
  .container.assistants-hero {
    display: grid;
    gap: 2rem;
    align-items: center;
    padding-block: 1rem 3rem;

    @media (min-width: 56em) {
      grid-template-columns: 1.1fr 1fr;
      gap: 3rem;
      padding-block: 2rem 4rem;
    }
  }

  .assistants-apps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 2rem;

    .consent__connector::before,
    .consent__connector::after {
      border-color: hsla(var(--hsl-black), 0.35);
    }
  }

  .assistant-chat {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1.5rem 3rem hsla(var(--hsl-black), 0.15);
    font-size: 90%;

    .button {
      pointer-events: none;
    }
  }

  .assistant-chat__bubble {
    justify-self: end;
    max-inline-size: 85%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem 1rem 0.25rem 1rem;
    background: hsl(var(--hsl-base-100));
  }

  .assistant-chat__reply {
    position: relative;
    display: grid;
    gap: 0.4rem;
    justify-items: start;
  }

  .assistant-chat__tool {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--color-line);
    font-size: 80%;
    font-weight: 600;
  }

  .assistant-chat__card {
    inline-size: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--color-line);
    background: hsl(var(--hsl-base-50));
  }

  .assistant-chat__suggestion {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    > img,
    .assistant-chat__idea-icon {
      flex-shrink: 0;
      inline-size: 2.75rem;
      block-size: 2.75rem;
      border-radius: 0.5rem;
      object-fit: cover;
    }
  }

  .assistant-chat__reason {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 80%;
    color: hsla(var(--hsl-black), 0.6);
  }

  .assistant-chat__suggestion--idea {
    border-style: dashed;
    border-color: hsl(var(--hsl-success-600));
    background: hsl(var(--hsl-success-100));
  }

  .assistant-chat__idea-icon {
    display: grid;
    place-items: center;
    background: hsl(var(--hsl-white));

    img {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
  }

  .assistant-chat__attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.5rem;
    background: hsl(var(--hsl-white));
    font-size: 85%;
    font-weight: 600;
  }

  .assistant-chat__file {
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    background: hsl(var(--hsl-error-600));
    color: hsl(var(--hsl-white));
    font-size: 75%;
    font-weight: 800;
  }

  .assistant-chat__week {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    & + & {
      margin-block-start: 0.5rem;
      padding-block-start: 0.5rem;
      border-block-start: 1px solid var(--color-line);
    }

    > img,
    .assistant-chat__idea-icon {
      flex-shrink: 0;
      inline-size: 2.25rem;
      block-size: 2.25rem;
      border-radius: 0.5rem;
      object-fit: cover;
    }

    .assistant-chat__idea-icon {
      border: 1px dashed hsl(var(--hsl-success-600));
    }
  }

  .assistant-chat__week-label {
    flex-shrink: 0;
    inline-size: 3.5rem;
    font-size: 80%;
    font-weight: 700;
    color: hsla(var(--hsl-black), 0.6);
  }

  /* Three dots while the assistant is working, only during playback. They lie over the reply
     that is still hidden, so the conversation keeps its height. */
  .assistant-chat__typing {
    display: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    gap: 0.25rem;
    padding: 0.6rem 0.8rem;
    border-radius: 1rem;
    background: hsl(var(--hsl-base-100));

    span {
      inline-size: 0.4rem;
      block-size: 0.4rem;
      border-radius: 50%;
      background: hsla(var(--hsl-black), 0.4);
      animation: typing-dot 1s infinite;
    }

    span:nth-child(2) { animation-delay: 0.15s; }
    span:nth-child(3) { animation-delay: 0.3s; }
  }

  @keyframes typing-dot {
    30% { transform: translateY(-0.25rem); }
  }

  /* The consent page, without its form controls. */
  .assistant-consent {
    max-inline-size: 26rem;
    margin-inline: auto;
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1.5rem 3rem hsla(var(--hsl-black), 0.12);

    .button {
      pointer-events: none;
    }
  }

  .assistant-consent__store {
    padding: 0;
    object-fit: cover;
  }

  .assistant-consent__option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem;
    border: 1px solid var(--color-line);
    border-radius: 0.75rem;

    & + & {
      margin-block-start: 0.4rem;
    }
  }

  .assistant-consent__option--chosen {
    border-color: hsl(var(--hsl-success-600));
    background: hsl(var(--hsl-success-100));
  }

  .assistant-consent__radio {
    flex-shrink: 0;
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: 0.6rem;
    border-radius: 50%;
    border: 2px solid hsl(var(--hsl-base-400));

    .assistant-consent__option--chosen & {
      border: 0.3rem solid hsl(var(--hsl-success-600));
    }
  }

  .assistant-consent__muted {
    color: hsla(var(--hsl-black), 0.6);
  }

  /* More room for the brochure and the conversation than for the text. */
  .section__split.assistants-split {
    @media (min-width: 48em) {
      grid-template-columns: 0.8fr 1.2fr;
    }
  }

  /* A wholesaler's brochure lying behind the conversation. */
  .assistant-stage {
    display: grid;

    > * {
      grid-area: 1 / 1;
    }

    /* The chat covers the brochure's right side; its stickers and highlights stay visible. */
    > .assistant-chat {
      position: relative;
      justify-self: end;
      inline-size: calc(100% - 3.5rem);
      margin-block-start: 8rem;

      @media (min-width: 48em) {
        inline-size: calc(100% - 10rem);
        margin-block-start: 2rem;
      }
    }
  }

  .brochure {
    align-self: start;
    inline-size: 11rem;
    margin-inline-start: 0.5rem;

    @media (min-width: 48em) {
      inline-size: 13rem;
      margin-inline-start: 0;
    }
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1rem 2rem hsla(var(--hsl-black), 0.15);
    rotate: -4deg;
  }

  .brochure__header {
    display: grid;
    margin: -0.75rem -0.75rem 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem 0.5rem 0 0;
    background: hsl(var(--hsl-error-600));
    color: hsl(var(--hsl-white));
  }

  .brochure__kicker {
    font-size: 70%;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
  }

  .brochure__title {
    font-family: "Permanent Marker", cursive;
    font-size: 125%;
    line-height: 1.1;
  }

  .brochure__deals {
    display: grid;
    gap: 0.5rem;
  }

  .brochure__deal {
    position: relative;
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem;
    border: 2px solid transparent;
    border-radius: 0.4rem;
    background: hsl(var(--hsl-base-50));
    font-size: 70%;
  }

  .brochure__deal--picked {
    border-color: hsl(var(--hsl-success-600));
    background: hsl(var(--hsl-success-100));
  }

  .brochure__sticker {
    position: absolute;
    inset-block-start: -0.5rem;
    inset-inline-start: -0.4rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: hsl(var(--hsl-base-500));
    font-weight: 800;
    rotate: -8deg;
  }

  .brochure__product {
    font-weight: 600;
    padding-block-start: 0.35rem;
  }

  .brochure__price {
    s { opacity: 0.5; }
    strong { font-size: 130%; color: hsl(var(--hsl-error-700)); }
  }

  .assistants-steps {
    display: grid;
    gap: 1.25rem;
    counter-reset: step;

    li {
      display: grid;
      grid-template-columns: 2.25rem 1fr;
      gap: 0.75rem;
      counter-increment: step;
    }

    li::before {
      content: counter(step);
      display: grid;
      place-items: center;
      block-size: 2.25rem;
      border-radius: 50%;
      background: hsl(var(--hsl-base-500));
      font-weight: 800;
    }
  }

  .assistants-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 2rem;

    @media (min-width: 48em) {
      justify-content: center;
    }

    li {
      padding: 0.6rem 1rem;
      border-radius: 999px;
      border: 1px solid hsla(var(--hsl-white), 0.25);
      background: hsla(var(--hsl-white), 0.08);
    }
  }

  .assistants-cards {
    display: grid;
    gap: 1rem;
    margin-block-start: 2rem;

    @media (min-width: 48em) {
      grid-template-columns: repeat(3, 1fr);
    }

    > * {
      padding: 1.5rem;
      border-radius: 1rem;
      background: hsl(var(--hsl-white));
      border: 1px solid var(--color-line);
    }

    img {
      inline-size: 2.5rem;
      block-size: 2.5rem;
      padding: 0.55rem;
      margin-block-end: 0.75rem;
      border-radius: 0.75rem;
      background: hsl(var(--hsl-base-500));
    }
  }

  .assistants-panel {
    padding: 1.5rem;
    border-radius: 1rem;
    background: hsl(var(--hsl-white));
    border: 1px solid var(--color-line);
  }

  /* Like usps, with a cross for what is never shared. */
  .usps.usps--never li::before {
    background: url(/assets/icons/close-white-9b132e03ace2d1a32abdf03f2601a618e8f33e0b735c14378a8d28b52e87971e.svg) center center/0.6em auto no-repeat hsl(var(--hsl-error-600));
  }

  .assistants-code {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: hsl(var(--hsl-base-900));
    color: hsl(var(--hsl-white));
    font-size: 85%;
    overflow-wrap: anywhere;
  }

  /* Playback (play controller): steps appear one after another, the typing dots show just
     before the reply, and brochure deals light up with the week that uses them. */
  .play--waiting :is(.play__step, .play__typing) {
    opacity: 0;
  }

  .play--waiting .play__pick {
    border-color: transparent;
    background: hsl(var(--hsl-base-50));
  }

  .play--playing {
    .play__step {
      opacity: 0;
      animation: play-step 0.4s ease-out calc(var(--step) * 0.8s) forwards;
    }

    .play__typing {
      display: inline-flex;
      opacity: 0;
      animation: play-typing 1.2s ease-in-out 0.6s forwards;
    }

    .play__pick {
      animation: play-pick 0.6s ease-out calc(var(--step) * 0.8s) backwards;
    }
  }

  @keyframes play-step {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: none; }
  }

  @keyframes play-typing {
    20%, 80% { opacity: 1; }
  }

  @keyframes play-pick {
    0% { border-color: transparent; background: hsl(var(--hsl-base-50)); }
    50% { transform: scale(1.08); }
  }
}
@layer modules {
  /* Address autocomplete styles */
  .autocomplete-container {
    position: relative;
  }

  .autocomplete-results {
    position: absolute;
    background-color: var(--color-autocomplete-bg);
    border-radius: 0 0 var(--radius-small) var(--radius-small);
    border: 1px solid var(--color-autocomplete-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 35vh; /* dont hide dropdown behind keyboard on mobile */
    overflow-y: auto;
    z-index: 1000;
    left: 0.5rem;
    right: 0.5rem;
    margin-top: -1rem;
  }

  /* A field with an error keeps less space below, for its message. */
  .input--error + .autocomplete-results {
    margin-top: -0.25rem;
  }

  .autocomplete-results--inline {
    margin-top: 0;
    border-radius: 0 var(--radius-small) var(--radius-small) var(--radius-small);
  }

  .autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-autocomplete-border);
  }

  .autocomplete-item:last-child {
    border-bottom: none;
  }

  .autocomplete-item--highlighted {
    background-color: var(--color-autocomplete-highlight-bg);
  }

  .autocomplete-message {
    padding: 0.75rem 1rem;
    color: var(--color-autocomplete-message-color);
    font-style: italic;
    text-align: center;
    border-bottom: none;
  }

  /* Guidance below the results, set apart by its background and still visible when they scroll */
  .autocomplete-message--hint {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 0.5rem;
    background-color: var(--color-autocomplete-hint-bg);
    color: var(--color-text);
    font-style: normal;
    text-align: start;
  }

  .autocomplete-message--hint::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1lh;
    background: url(/assets/icons/location-0b08ddf9249d539321016897115faa58884fa5f3f2a7ef4e77107487da077504.svg) center / 1rem no-repeat;
  }

  /* A result that leads to a next step, like a street that still needs a house number */
  .autocomplete-item--next {
    position: relative;
    padding-inline-end: 2.5rem;
  }

  .autocomplete-item--next::after {
    content: "";
    position: absolute;
    inset-inline-end: 1rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    translate: 0 -50%;
    rotate: -90deg;
    background: url(/assets/icons/caret-down-df9a543a616a3face3caa13f5eaf53ca3260680b8142125e4a0f149efdda997f.svg) center / contain no-repeat;
    opacity: 0.6;
  }

  /* Food autocomplete modifier styles */
  .autocomplete--food .autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .autocomplete-item__name strong {
    font-weight: 700;
  }

  .autocomplete--food .autocomplete-item__meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .autocomplete--food .autocomplete-item__label {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background-color: var(--color-autocomplete-category-bg);
    color: var(--color-autocomplete-category-color);
    border-radius: 0.25rem;
  }
}
@layer modules {
  .avatar {
    --avatar-size: 3.5rem;
    --avatar-hue: 30;

    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    border-radius: 50%;
    object-fit: cover;
    background: hsl(var(--avatar-hue) 55% 85%);
    color: hsl(var(--avatar-hue) 45% 25%);
    font-size: calc(var(--avatar-size) * 0.32);
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 0 0 3px var(--color-card-bg), 0 0 0 4px hsl(var(--hsl-base-300));
  }
}
@layer modules {
  /* The chef's message while away, as a speech bubble in a soft tone of the
     store's colour, beside their portrait in its ring. */
  .away {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0.5rem 0;
  }

  .away .store-image {
    --store-image-size: 3rem;
  }

  .away__bubble {
    padding: 0.75rem 1rem;
    border-radius: 1.125rem 1.125rem 1.125rem 0.25rem;
    background: var(--color-store-200);
  }

  .away__message {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.4;
  }

  .away__caption {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }
}
@layer modules {
  /* A day of the menu: its heading, then one white card with its dishes. */
  .board {
    display: flow-root;
  }

  .board__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 1rem;
    /* Flush with the card below. */
    padding: 0.75rem 0 0.5rem;
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    background: var(--color-board-header-bg);
    color: var(--color-board-header-color);
  }

  /* A pinned header floats over the menu scrolling under it. It reaches into
     the page's 1rem gutter, like the week buttons above it, so its text keeps
     its place with room to the bar's edges; square, so the card can't show
     past its corners. A line in the store's color fills up as you scroll
     through the day, so you see when the next day takes over. */
  .board__header--stuck {
    margin-inline: -1rem;
    padding-inline: 1rem;
    border-radius: 0;
    box-shadow: 0 6px 8px -6px var(--color-shadow-strong);
  }

  .board__header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    height: 3px;
    background: var(--color-store-500);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
  }

  .board__body {
    background: var(--color-board-bg);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-raised);
    overflow: clip;
  }

  .board__last-order {
    font-size: 80%;
    opacity: 0.7;
  }

  .board__title {
    font-size: 1.0625rem;
    font-weight: 800;
  }

  .board__item {
    position: relative;
    padding: 1rem;
    /* Jumping to a meal lands it about mid-screen above the cart bar, clear of
       the sticky header. */
    scroll-margin-top: max(5rem, 50vh - 14rem);
  }

  .board__item + .board__item {
    border-top: 1px solid var(--color-line);
  }

  /* Sides, bread and drinks are extras to add to a meal. Smaller rows say so
     by their shape, so no label has to name them: any name is wrong for some. */
  .board__extras {
    border-top: 1px solid var(--color-line);
    /* Clips the outer edges of the extras' lines, the board draws those. */
    overflow: hidden;
  }

  .board__extra {
    padding: 0.75rem 1rem;
    box-shadow: 1px 0 var(--color-line), 0 1px var(--color-line);
    scroll-margin-top: max(5rem, 50vh - 14rem);
  }
}
@layer modules {
  .button {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.5rem;
    width: fit-content;
    cursor: pointer;
    font-weight: 600;
    font-size: 100%;
    font-family: inherit;
    text-decoration: none;
    border-radius: 3rem;
    padding: 0.75rem 1rem;
    background: var(--color-button-bg);
    border: 1px solid var(--color-button-border);
    color: var(--color-button-color);
    transition: filter 0.2s ease-in-out; /* Add this line */

    /* The border darkens to the text color. Filled buttons set --button-ring
       to their border color instead and thicken it with a flush outline, which
       keeps any box-shadow a button has. */
    &:hover {
      border-color: var(--button-ring, currentColor);
      outline: 1px solid var(--button-ring);
    }
  }

  .button--small {
    padding: 0.25rem 1rem;
  }

  .button--micro {
    padding: 0.25rem 0.5rem;
  }

  .button--large {
    font-size: 125%;
    padding: 1rem 1.5rem;
  }

  /* Rounded corners instead of round ends, for a button with more than one
     line, like a week to jump to. */
  .button--squared {
    border-radius: var(--radius-medium);
  }

  .button--primary {
    --button-ring: var(--color-button-primary-border);
    background: var(--color-button-primary-bg);
    border-color: var(--color-button-primary-border);
    color: var(--color-button-primary-color);
  }

  /* Quiet, on a light tint, like a filter or a link to part of the page. */
  .button--soft {
    background: var(--color-store-200);
    border-color: transparent;
    color: var(--color-text);
  }

  /* Black, for one strong action that isn't the main one, like following. */
  .button--dark {
    --button-ring: hsl(var(--hsl-black));
    background: hsl(var(--hsl-base-900));
    border-color: hsl(var(--hsl-base-900));
    color: hsl(var(--hsl-white));
  }

  /* Light on a photo or a tint, like the share button over the store's photos,
     and tall enough to tap. */
  .button--floating {
    min-height: var(--size-tap);
    background: hsla(var(--hsl-white), 0.9);
    border-color: hsla(var(--hsl-black), 0.15);
    box-shadow: 0 1px 4px var(--color-shadow-strong);
  }

  /* A full-width row like a link list: a tile with an icon or picture, the
     label with a line below it, and a chevron. White and raised; filled with
     --primary; or --ruled, flat between two lines. */
  .button--tile {
    --button-ring: var(--color-line);

    width: 100%;
    min-height: 3.5rem;
    padding: 0.375rem 1rem 0.375rem 0.5rem;
    gap: 0.75rem;
    border-color: transparent;
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
    text-align: left;
  }

  .button--tile.button--primary {
    background: var(--color-button-primary-bg);
  }

  .button--ruled {
    border-inline-color: transparent;
    border-block-color: var(--color-line);
    border-radius: 0;
    background: none;
    box-shadow: none;

    &:hover {
      outline: 0;
      background: hsla(var(--hsl-black), 0.03);
    }
  }

  .button__tile {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    overflow: clip;
    border-radius: var(--radius-medium);
    background: var(--color-store-200);
    font-size: 0.9375rem;
    font-weight: 800;

    svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    .button--primary & {
      background: hsla(var(--hsl-white), 0.25);
    }
  }

  /* The store's image in place of a tile, as large. */
  .button--tile .store-image {
    --store-image-size: 2.5rem;
  }

  .button__label {
    flex-grow: 1;
    line-height: 1.25;

    small {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8125rem;
      font-weight: 400;
      opacity: 0.8;
    }
  }

  .button__chevron {
    flex-shrink: 0;
    opacity: 0.6;

    svg {
      display: block;
      width: 0.875rem;
      height: 0.875rem;
    }
  }

  .button--disabled,
  .button[disabled="disabled"] {
    cursor: auto;
    filter: opacity(30%);
    outline: none;
  }

  .button--icon {
    aspect-ratio: 1; /* or 1/1 */
    padding: 0.5rem;
    justify-content: center;
  }

  .button--icon.button--micro {
    padding: 0.25rem;
  }

  /* As tall as a small text button: one line of text plus its padding and border. */
  .button--icon.button--small {
    height: calc(1lh + 0.5rem + 2px);
    padding: 0;
  }

  /* Large enough to tap, like closing a dialog or adding a meal on a phone. */
  .button--icon.button--large {
    width: var(--size-tap);
    height: var(--size-tap);
    padding: 0;

    > svg {
      width: calc(var(--size-tap) * 0.375);
      height: calc(var(--size-tap) * 0.375);
    }
  }

  .button__divider {
    align-self: stretch;
    width: 1px;
    margin-inline: 0.125rem;
    background: var(--color-button-border);
  }

  .button--full {
    width: 100%;
    justify-content: center;
  }

  .button--pressed {
    box-shadow: inset 0 0 0 30px rgba(0,0,0,0.05), inset 0 3px 8px rgba(0,0,0,0.5);
    text-shadow: 0 1px 1px rgb(255,255,255);
  }

  .button--on-dark {
    border-color: white;
    border-width: 3px;
    color: white;
  }

  .button--support {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 20;
    background: #79CE70;
    background: linear-gradient(180deg, rgba(121, 206, 112, 1) 0%, rgba(86, 176, 76, 1) 100%);
    color: white;
    box-shadow: 0 2px 4px 3px var(--color-shadow-strong);
    svg {
      padding: 0.25rem;
      height: 2.5rem;
      width: 2.5rem;
    }
  }

  .button-group {
    display: flex;
    > :first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    > :last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 0;
    }
    :not(:first-child):not(:last-child) {
      border-radius: 0;
      border-left: 0;
    }
  }
}
@layer modules {
  /* How a subscription works, as a story with real dates: the steps of a week
     that goes by itself, each a small picture on a line that leads to the
     next. Accents in a deeper shade of the store's colour, so the form's
     button below is the one thing in its full colour. */
  .cadence {
    --cadence-ink: color-mix(in oklab, var(--color-store-500), hsl(var(--hsl-black)) 15%);
  }

  /* The picture beside what happens then. */
  .cadence__step {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 0.875rem;
  }

  /* Small, in its own font size, with a line down to the next step. */
  .cadence__picture {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding-bottom: 0.5rem;
    font-size: 0.625rem;

    .cadence__step:not(:last-child) &::after {
      content: "";
      flex: 1;
      align-self: center;
      width: 2px;
      min-height: 1rem;
      margin-top: 0.5rem;
      background: var(--color-store-200);
    }
  }

  .cadence__icon {
    display: grid;
    place-items: center;
    align-self: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-store-200);
    color: var(--cadence-ink);

    svg { width: 1.375rem; height: 1.375rem; }
  }

  .cadence__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-bottom: 1.25rem;
    font-size: 0.875rem;
  }

  .cadence__when {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cadence-ink);
  }

  .cadence__title {
    font-size: 1rem;
    font-weight: 800;
  }

  /* What you order on a day, in the store's tint, checked off on its corner.
     Its text starts where the repeat's below does, and the check sits above
     the repeat's icon. */
  .cadence__delivery {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem 0.625rem 1.1875rem;
    border-radius: var(--radius-medium);
    background: var(--color-store-200);
    color: var(--cadence-ink);
    font-weight: 700;
  }

  /* As large as the repeat's icon, over the icon's own size. */
  .cadence__delivery > .cadence__check {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 0 2px hsl(var(--hsl-white));
  }

  /* The deliveries measure their own width, for the dishes beside them. */
  .cadence__deliveries {
    container-type: inline-size;
  }

  /* The dishes side by side, one below the other when a row is too narrow
     for them beside its text. */
  .cadence__thumbs {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem 0.25rem;
    padding: 0.375rem 0.375rem 0 0; /* Room for the counts on their corners */

    @container (max-width: 17.5rem) {
      flex-direction: column;
    }
  }

  /* How many portions of a dish come, on its corner. */
  .cadence__count {
    position: absolute;
    z-index: 1;
    top: -0.375rem;
    right: -0.375rem;
    padding: 0 0.3125rem;
    border-radius: 999px;
    background: hsl(var(--hsl-base-900));
    box-shadow: 0 0 0 2px var(--color-store-200);
    color: hsl(var(--hsl-white));
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.4;
  }

  /* Beside the first line of what follows. */
  .cadence__repeat {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--cadence-ink);

    /* Under the checks on the days' corners. */
    svg { flex-shrink: 0; margin: 0.125rem 0 0 -5px; }
  }
}
@layer modules {
  .card {
    --border: var(--color-card-border);
    --bg: var(--color-card-bg);
    --color: var(--color-card-color);
    --header-bg: transparent;
    --header-color: inherit;

    background-color: var(--bg);
    color: var(--color);
    box-shadow: 0 2px 2px 0 var(--color-shadow-strong);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    @media (min-width: 30em) {
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      border-radius: var(--card-radius);
    }
  }

  .card--error {
    --border: var(--color-card-error-border);
    --bg: var(--color-card-error-bg);
  }

  .card--strong {
    --bg: var(--color-card-strong-bg);
  }

  .card--framed {
    border-inline: 1px solid var(--border);
    border-radius: var(--card-radius);
  }

  /* A note beside the cards, like how the chef delivers: a shade on the page,
     not raised. An open <details> card too, so the cards in it stand out. */
  .card--quiet,
  .card--expandable[open] {
    --bg: hsla(var(--hsl-black), 0.035);
    --border: transparent;
    box-shadow: none;
  }

  .card--compact {
    .card__header, .card__body, .card__footer { padding-block: 0.75rem; }
  }

  /* A <details> card: its summary is the closed card, a chevron says it opens.
     Opening, it fades into a shade. */
  .card--expandable {
    transition: background-color 200ms ease, box-shadow 200ms ease;

    > summary + .card__body { padding-top: 0; }

    /* Its summary says one thing closed and another open, like the order in
       short that becomes a title over everything in it. */
    &:not([open]) > summary .card__open,
    &[open] > summary .card__closed { display: none; }

    .card__chevron {
      flex-shrink: 0;
      opacity: 0.5;
    }
  }

  /* A coloured header framed in its own colour; white keeps the card border, which shows on cream. */
  .card--red    { --border: var(--color-card-red);    --header-bg: var(--color-card-red);    --header-color: var(--color-card-header-color); }
  .card--yellow { --border: var(--color-card-yellow); --header-bg: var(--color-card-yellow); --header-color: var(--color-text); }
  .card--blue   { --border: var(--color-card-blue);   --header-bg: var(--color-card-blue);   --header-color: var(--color-card-header-color); }
  .card--green  { --border: var(--color-card-green);  --header-bg: var(--color-card-green);  --header-color: var(--color-card-header-color); }
  .card--white  { --header-bg: var(--color-card-white); --header-color: var(--color-text); }

  /* A heading in the store's tint, like each day of an order. */
  .card--tinted { --header-bg: var(--color-store-200); }

  .card--red, .card--yellow, .card--blue, .card--green, .card--white, .card--tinted {
    overflow: clip;
  }

  .card--faded {
    filter: opacity(30%);
  }

  .card--selected {
    --border: hsl(var(--hsl-success-600));
    box-shadow: 0 0 0 2px hsl(var(--hsl-success-600)), 0 0 8px hsla(var(--hsl-success-600), 0.4);
  }

  .card__header {
    border-bottom: 1px solid var(--border);
    background-color: var(--header-bg);
    color: var(--header-color);
  }

  .card__title {
    font-size: 125%;
  }

  /* A card's title with its links or buttons on the right, all on the title's
     baseline, wrapping when they do not fit. In the body, or on a header band
     as card__header card__heading. */
  .card__heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1rem;
  }

  .card__intro {
    margin-top: 0.5rem;
  }

  .card__body { }

  .card__footer {
    border-top: 1px solid var(--border);
  }

  .card__image {
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    width: 100%;
    object-fit: cover;
  }

  .card {
    .card__body + .card__body {
      border-top: 1px solid var(--border);
    }
  }

  .card__body--separated {
    border-top: 1px solid var(--border);
  }

  .card__header, .card__body, .card__footer {
    padding: 1rem;
    @media (min-width: 40em) { padding: 1rem 1.25rem; }
    @media (min-width: 60em) { padding: 1.25rem 1.5rem; }
  }

  .card__attention {
    background: hsl(var(--hsl-base-500));
    font-size: 70%;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    margin: 0 1rem;
    padding: 0.25rem 1rem;
    border-radius: var(--radius-small) var(--radius-small) 0 0;
  }
}
@layer modules {
  /* A to-do checkbox, also as a button with role="checkbox" and aria-checked. */
  .checkbox {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.05em;
    padding: 0;
    border: 2px solid var(--color-checkbox-border);
    border-radius: 20%;
    background-color: transparent;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
  }

  button.checkbox {
    cursor: pointer;

    &:hover { background-color: var(--color-checkbox-hover-bg); }
  }

  .checkbox--checked,
  .checkbox[aria-checked="true"] {
    border-color: var(--color-checkbox-checked-border);
    background-color: var(--color-checkbox-checked-bg);

    &::after {
      content: "";
      width: 60%;
      height: 60%;
      background-color: var(--color-checkbox-checked-color);
      mask: url(/assets/icons/check-5351443ac95e8f6533bb5f9400b2ea487db68bc8873128f4b86dd753ce6f81e1.svg) center / contain no-repeat;
    }
  }
}
@layer modules {
  .code {
    display: inline-block;
    vertical-align: middle;
    font-feature-settings: "tnum";
    font-size: 0.9em;
    font-weight: 800;
    overflow-wrap: anywhere;
    padding: 0.5em;
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-code-border);
    border-radius: var(--radius-small);
  }

  .code--mono {
    font-family: monospace;
  }
}
@layer modules {
  /* Stays in view at the bottom while an ad visitor looks around, without
     blocking the store: a bar on phones, a card on wide screens.
     Dark, so it stands out from the store. */
  .consent-bar {
    position: fixed;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    background-color: hsl(var(--hsl-base-900));
    color: hsl(var(--hsl-white));
    box-shadow: 0 -5px 10px 5px var(--color-shadow-strong);
    --color-button-border: hsla(var(--hsl-white), 0.5);
    --color-button-color: hsl(var(--hsl-white));

    .link {
      color: inherit;
    }

    /* Centered over the menu, so it is hard to miss without covering it all. */
    @media (min-width: 60em) {
      bottom: 1rem;
      width: 24rem;
      margin-inline: auto;
      border-radius: var(--radius-small);
    }
  }

  /* Above the order menu, which takes the bottom once the basket fills. */
  body:has(.order-menu) .consent-bar {
    bottom: 10.5rem;

    @media (min-width: 40em) { bottom: 6rem; }
    @media (min-width: 60em) { bottom: 7rem; }
  }

  /* The privacy link left, the answers right, centered on one line. */
  .consent-bar__footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
}
@layer modules {
  /* OAuth consent: which app wants which access to which store. */
  .consent__apps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-block-end: 1rem;
  }

  .consent__connector {
    display: flex;
    align-items: center;
    gap: 0.25rem;

    &::before, &::after {
      content: "";
      inline-size: 1.25rem;
      border-block-start: 2px dotted hsl(var(--hsl-base-400));
    }

    img {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      padding: 0.2rem;
      border-radius: 50%;
      background: hsl(var(--hsl-success-600));
    }
  }

  .consent__domain {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-block-start: 0.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: hsl(var(--hsl-base-100));
    font-size: 85%;
  }

  .consent__section-title {
    font-size: 100%;
    font-weight: 600;
    margin-block-end: 0.5rem;
  }

  /* A legend sits in the fieldset's border unless it floats into the content. */
  .consent__legend {
    float: inline-start;
    inline-size: 100%;

    & + * {
      clear: both;
    }
  }

  /* Secondary text that still reads well on the cream background. */
  .consent__note {
    font-size: 85%;
    color: hsla(var(--hsl-black), 0.65);
  }

  .consent__choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .permission {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .permission__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-small);
    background: hsl(var(--hsl-base-100));

    img {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }

  .permission__title {
    font-weight: 600;
  }

  .permission__description {
    font-size: 90%;
    color: hsla(var(--hsl-black), 0.65);
  }

  .consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;

    .button {
      inline-size: 100%;
      justify-content: center;
    }
  }
}
@layer modules {
  .container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .container--narrow {
    @media (max-width: 40em) { padding: 0 0.25rem; }
  }
}
@layer modules {
  .description-list {
    dt {
      font-weight: bold;
    }
    dd + dt {
      margin-top: 1rem;
    }
  }

  .description-list--checklist {
    --check-bg: var(--color-description-list-check);
    dt, dd {
      padding-left: 1.75rem;
    }
    dt::before {
      position: absolute;
      margin-left: -1.75rem;
      content: '';
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1.25rem;
      width: 1.25rem;
      line-height: 1;
      border-radius: 100%;
      background: url(/assets/icons/check-white-73456349327790c99d99bdb9d4d448292f829e122141b60902e20888935cbdf8.svg) center center/0.55em auto no-repeat var(--check-bg);
    }
  }

  .description-list--checklist-success {
    --check-bg: var(--color-description-list-check-success);
  }

  /* Each term beside its value, one row each, between thin lines. */
  .description-list--rows {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: 0.75rem;

    dt, dd {
      padding-block: 0.625rem;
    }

    dt {
      font-weight: 400;
      color: var(--color-text-muted);
    }

    dd + dt {
      margin-top: 0;
    }

    dt:not(:first-of-type), dt:not(:first-of-type) + dd {
      border-top: 1px solid var(--color-line);
    }
  }
}
@layer modules {
  body:has(dialog[data-dialog-target="dialog"][open]) {
    overflow: hidden;
  }

  /* Normal text size, whatever opens it. */
  .dialog {
    font-size: 1rem;
    background-color: var(--color-dialog-bg);
    border: 1px solid var(--color-dialog-border);

    box-shadow: 0 0 0 100vw rgb(0 0 0 / 0.3), 0 2px 10px 0 var(--color-shadow-strong);
    border-radius: var(--radius-small);
    padding: 0;
  }

  .dialog--sheet {
    width: min(calc(100vw - 1rem), 42rem);
    max-height: calc(100dvh - 1rem);
    margin: auto auto 0;
    overflow: auto;
    border-radius: var(--radius-small) var(--radius-small) 0 0;
    box-shadow: 0 -0.25rem 1rem 0 var(--color-shadow-strong);
    transform: translateY(100%);
    transition: transform 180ms ease-out;
  }

  .dialog--sheet::backdrop {
    background-color: rgb(0 0 0 / 0.3);
    opacity: 1;
    transition: opacity 180ms ease-out;
  }

  @media (max-width: 40em) {
    .dialog--sheet {
      width: calc(100vw - 1rem);
      max-height: calc(100dvh - 1rem);
    }
  }

  .dialog--sheet[open] {
    transform: translateY(0);
  }

  .dialog--sheet[closing] {
    transform: translateY(100%);
    transition-duration: 160ms;
    transition-timing-function: ease-in;
  }

  .dialog--sheet[closing]::backdrop {
    opacity: 0;
    transition-duration: 160ms;
    transition-timing-function: ease-in;
  }

  @starting-style {
    .dialog--sheet[open] {
      transform: translateY(100%);
    }

    .dialog--sheet[open]::backdrop {
      opacity: 0;
    }
  }

  /* On wider screens a sheet floats in the middle instead of rising from the
     bottom edge, which is far from where you look and click there. */
  @media (min-width: 40em) {
    .dialog--sheet {
      margin: auto;
      border-radius: var(--radius-large);
      box-shadow: 0 0.5rem 2rem 0 var(--color-shadow-strong);
      opacity: 0;
      transform: translateY(1rem) scale(0.98);
      transition: transform 180ms ease-out, opacity 180ms ease-out;
    }

    .dialog--sheet[open] {
      opacity: 1;
      transform: none;
    }

    .dialog--sheet[closing] {
      opacity: 0;
      transform: translateY(1rem) scale(0.98);
    }

    @starting-style {
      .dialog--sheet[open] {
        opacity: 0;
        transform: translateY(1rem) scale(0.98);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dialog--sheet,
    .dialog--sheet::backdrop {
      transition: none;
    }
  }

  /* Over the whole page, light text on a dark backdrop, like receipts spread
     out on the table. */
  .dialog--overlay {
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: hsl(var(--hsl-white));

    &::backdrop {
      background: rgb(20 16 10 / 0.82);
      backdrop-filter: blur(6px);
    }

    .dialog__header,
    .dialog__body {
      max-width: 72rem;
      margin-inline: auto;
    }

    .dialog__header {
      position: static;
      border: 0;
      background: none;

      .stars { --stars-off: hsla(var(--hsl-white), 0.25); --stars-off-edge: hsla(var(--hsl-white), 0.35); }
      .store-image { --store-image-size: 4.5rem; }
    }

    .dialog__body {
      padding-bottom: 3rem;
    }

    /* Light on whatever passes under it. */
    .dialog__close {
      --color-button-bg: rgb(20 16 10 / 0.55);
      --color-button-border: hsl(var(--hsl-white));
      --color-button-color: hsl(var(--hsl-white));

      /* Sticky, so its 1rem is from the dialog's scrollbar, not the window's edge. */
      top: 1rem;
      margin: 1rem 1rem calc(-1 * (var(--size-tap) + 1rem)) auto;
    }
  }

  /* In the top right corner, also over a photo or showcase at the top, and it
     stays there while the dialog scrolls. It takes no room of its own. Floating
     like the share button on the store's photos. */
  .dialog__close {
    position: sticky;
    top: 0.75rem;
    z-index: 2;
    margin: 0.75rem 0.75rem calc(-1 * (var(--size-tap) + 0.75rem)) auto;
  }

  .dialog__header {
    border-bottom: 1px solid var(--color-dialog-border);
    background-color: var(--color-dialog-bg);
    position: sticky;
    top: 0;

    .dialog:has(> .dialog__close) > & {
      padding-right: calc(var(--size-tap) + 1.5rem);
    }
  }

  /* For a picture and a short form, like the menu by email or a gift voucher. */
  .dialog--narrow {
    width: min(calc(100vw - 1rem), 30rem);
  }

  .dialog__title {
    font-size: 125%;
  }

  /* The first thing you read in a store's dialog. */
  .dialog__title--large {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  /* What you sign up for or buy, shown before the form, on a band in the
     store's colour: the menu by email, a gift voucher. */
  .dialog__showcase {
    position: relative;
    padding: 1.5rem 1.25rem 0;
    background: linear-gradient(var(--color-store-200), var(--color-dialog-bg));
  }

  /* The chef's photo, large and centred, for who wants to see who cooks. The
     close button stays beside it, so it needs no room of its own, and what
     follows sits close under the name. */
  .dialog__showcase--portrait {
    .dialog:has(> .dialog__close) > & { padding-inline: 1rem; }

    .store-image { --store-image-size: min(12rem, 50vw); }

    + .dialog__body { padding-top: 0; }
  }

  /* A large photo across the top of the dialog. */
  .dialog__cover {
    display: block;
    width: 100%;
    max-height: 16rem;
    object-fit: cover;
  }

  .dialog__footer {
    border-top: 1px solid var(--color-dialog-border);
  }

  .dialog__header, .dialog__body, .dialog__footer {
    padding: 1rem;
    @media (min-width: 40em) { padding: 1rem 1.25rem; }
    @media (min-width: 60em) { padding: 1.25rem 1.5rem; }
  }
}
@layer modules {
  /* A dish on the menu: photo, name and a taste of the description open the
     dish; its portions follow right below the text, each with its order
     button. The photo spans both, so a short text leaves no gap: the portions
     then line up with the bottom of the photo. */
  .dish {
    --dish-image-size: 5.5rem;
    --dish-gap: 0.875rem;

    display: grid;
    grid-template-columns: var(--dish-image-size) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--dish-gap);
    row-gap: 0.375rem;

    &:not(:has(.dish__image)) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .dish__summary {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    align-items: start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;

    &:focus-visible {
      outline: 2px solid var(--color-text);
      outline-offset: 4px;
      border-radius: var(--radius-small);
    }
  }

  .dish__image {
    grid-row: 1 / -1;
    width: var(--dish-image-size);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-medium);
  }

  .dish__text {
    grid-column: -2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .dish__name {
    font-weight: 700;
    line-height: 1.3;
  }

  /* Only there for Turbo Streams: the pill sits in the column without the
     wrapper's taller line box, and no pill leaves no gap. */
  .dish__availability {
    display: contents;
  }

  /* Like the profile's links: this opens. It nudges along on hover. */
  .dish__chevron {
    display: inline-block;
    color: var(--color-text-muted);
    transition: translate 150ms ease;

    svg {
      width: 0.75em;
      height: 0.75em;
      vertical-align: -0.05em;
    }
  }

  @media (hover: hover) {
    .dish__summary:hover {
      .dish__label { text-decoration: underline; text-underline-offset: 0.15em; }
      .dish__chevron { translate: 0.15em 0; }
      .dish__image { scale: 1.03; }
    }
  }

  .dish__image {
    transition: scale 200ms ease;
  }

  /* A tap shows on the whole dish before its details open. */
  .board__item:has(.dish__summary:active),
  .board__extra:has(.dish__summary:active) {
    background: hsla(var(--hsl-black), 0.04);
  }

  @media (prefers-reduced-motion: reduce) {
    .dish__chevron, .dish__image { transition: none; }
  }

  /* A taste of the dish keeps the menu calm; the dish itself has the full text. */
  .dish__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .dish__orders {
    grid-column: -2;
    grid-row: 2;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;

    &:empty { display: none; }
  }

  /* A small square photo beside a shorter text, for extras like sides and drinks. */
  .dish--compact {
    --dish-image-size: 3.5rem;
    --dish-gap: 0.75rem;

    font-size: 90%;

    .dish__description {
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }
  }
}
@layer modules {
  .faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    details {
      border-radius: var(--radius-small);
      border: 1px solid var(--color-card-border);
      summary {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.5rem 1rem;
        border-radius: var(--radius-small);
        cursor: pointer;
        font-weight: 600;
        list-style: none;
        &:after {
          content: "\002B";
        }
      }
      article {
        margin-top: 1rem;
        padding: 0 1rem 1rem;
      }
    }
    details[open] {
      background-color: var(--color-card-strong-bg);
      summary:after{
        content: "\00D7";
      }
    }
  }
}
@layer modules {
  body:has(.deck[open]) { overflow: hidden; }

  /* Chapter cards */

  .chapters {
    display: grid;
    gap: 0.75rem;
    @media (min-width: 40em) {
      grid-template-columns: 1fr 1fr;
    }
    @media (min-width: 64em) {
      grid-template-columns: repeat(3, 1fr);
      .chapter:first-child, .chapter:last-child { grid-column: span 2; }
    }
  }

  .chapter {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid hsl(var(--hsl-base-300));
    border-radius: 1.25rem;
    background: hsl(var(--hsl-base-50));
    transition: transform 200ms ease, box-shadow 200ms ease;

    .art { height: 15rem; }
  }

  .chapter:has(.chapter__open:hover),
  .chapter:has(.chapter__open:focus-visible) {
    transform: translateY(-0.2rem);
    box-shadow: 0 1rem 2.5rem hsla(var(--hsl-black), 0.12);
  }

  .chapter__copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.25rem;
    font-size: 0.9rem;
  }

  .chapter__number,
  .deck__eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: hsl(var(--hsl-success-700));
  }

  .chapter__name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  .chapter__open {
    margin-top: auto;
    padding: 0.5rem 0 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: 800;
    cursor: pointer;
  }

  .chapter__open::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .chapter__open:focus-visible { outline: 0; }
  .chapter:has(.chapter__open:focus-visible) { outline: 2px solid hsl(var(--hsl-base-900)); outline-offset: 2px; }

  /* Deck */

  .deck {
    width: min(76rem, calc(100vw - 2rem));
    height: min(48rem, calc(100dvh - 2rem));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.5rem;
    background: hsl(var(--hsl-base-50));
    color: var(--color-text);
    box-shadow: 0 2rem 5rem hsla(var(--hsl-black), 0.3);
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
    transition: opacity 220ms ease, transform 220ms ease, display 220ms allow-discrete, overlay 220ms allow-discrete;
  }

  .deck[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .deck[open] { opacity: 0; transform: translateY(1rem) scale(0.98); }
  }

  .deck::backdrop { background: hsla(var(--hsl-base-900), 0.72); }

  .deck__toolbar,
  .deck__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
  }

  .deck__toolbar { border-bottom: 1px solid hsl(var(--hsl-base-200)); }
  .deck__footer { border-top: 1px solid hsl(var(--hsl-base-200)); }

  .deck__brand {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    span { color: hsl(var(--hsl-success-600)); }
    @media (max-width: 40em) { display: none; }
  }

  .deck__tabs {
    display: flex;
    gap: 0.25rem;
    min-width: 0;
  }

  .deck__tab,
  .deck__close {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border: 0;
    border-radius: 10rem;
    background: none;
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }

  .deck__tab { color: hsl(var(--hsl-base-400)); }
  .deck__tab:hover { color: var(--color-text); background: hsl(var(--hsl-base-100)); }
  .deck__tab-name { display: none; }

  .deck__tab[aria-selected="true"] {
    background: hsl(var(--hsl-base-900));
    color: hsl(var(--hsl-base-50));
    @media (min-width: 40em) {
      .deck__tab-name { display: inline; }
    }
  }

  .deck__close {
    border: 1px solid hsl(var(--hsl-base-300));
    span { font-size: 1rem; line-height: 0.8; }
  }

  .deck__close:hover { background: hsl(var(--hsl-base-100)); }

  @media (max-width: 40em) {
    .deck__tabs { gap: 0; }
    .deck__tab { padding-inline: 0.45rem; }
    .deck__close-label { display: none; }
  }

  .deck__slides {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .deck__slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) 1.45fr;
    overflow-y: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;

    > .art {
      margin: 0.75rem;
      border-radius: 1rem;
    }
  }

  .deck__story {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(1.5rem, 4vw, 3.5rem);
  }

  .deck__title {
    max-width: 14ch;
    margin-top: 1rem;
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
  }

  .deck__summary {
    max-width: 36ch;
    margin-top: 1rem;
    font-size: 1.05rem;
  }

  .deck__note {
    max-width: 36ch;
    margin-top: 1.5rem;
    font-style: italic;
    color: hsla(var(--hsl-black), 0.6);
  }

  .deck__points {
    max-width: 36ch;
    margin-top: 1.5rem;
    font-size: 0.9rem;
  }

  .deck__recap {
    align-self: center;
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 1rem;
    background: hsl(var(--hsl-base-500));

    button {
      display: flex;
      gap: 1rem;
      width: 100%;
      padding: 0.6rem 0;
      border: 0;
      border-bottom: 1px solid hsla(var(--hsl-black), 0.15);
      background: none;
      color: inherit;
      font-size: 1.1rem;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }

    button:hover { text-decoration: underline; }
    span { color: hsla(var(--hsl-black), 0.45); }
  }

  .deck__nav {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid hsl(var(--hsl-base-300));
    border-radius: 50%;
    background: hsl(var(--hsl-white));
    color: var(--color-text);
    font-size: 1.2rem;
    cursor: pointer;
  }

  .deck__nav:disabled { opacity: 0.35; cursor: default; }

  .deck__next {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: right;
    cursor: pointer;

    .deck__nav {
      border-color: var(--color-button-primary-bg);
      background: var(--color-button-primary-bg);
      color: var(--color-button-primary-color);
    }
  }

  .deck__next[hidden] { display: none; }
  .deck__next-label { color: hsl(var(--hsl-base-400)); font-weight: 500; }
  .deck__nav:not(:disabled):hover, .deck__next:hover .deck__nav { filter: brightness(0.92); }

  @media (max-width: 48em) {
    .deck {
      width: calc(100vw - 1rem);
      height: calc(100dvh - 1rem);
      border-radius: 1rem;
    }

    .deck__slide {
      display: flex;
      flex-direction: column;

      > .art { flex: 1 0 18rem; }
    }

    .deck__story { padding: 1.25rem 1.25rem 0.5rem; }
    .deck__title { margin-top: 0.5rem; font-size: 1.75rem; }
    .deck__summary { margin-top: 0.5rem; font-size: 0.95rem; }
    .deck__points { margin-top: 0.75rem; font-size: 0.85rem; }
    .deck__next-label { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .chapter, .deck { transition: none; }
  }

  /* Chapter art: each visual scales with its frame */

  .art {
    container-type: size;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: hsl(var(--hsl-base-100));

    /* Each visual sets the space it needs in em, as --span × --rise */
    > * { font-size: clamp(6px, min(100cqi / var(--span, 40), 100cqb / var(--rise, 30)), 18px); }
  }


  .art > .shop { font-size: var(--font-size); }

  /* On a card the phone fills the width and peeks out from behind the text */
  .chapter .shop {
    top: 0.75rem;
    translate: -50% 0;
    transform-origin: top center;
    scale: min(1, 0.85 * var(--fit-width, 0.5));
  }

  .art--shop, .art--return { background: hsl(var(--hsl-base-500)); }
  .art--ai, .art--cook, .art--grow, .art--subscribe { background: hsl(var(--hsl-success-100)); }
  .art--pay { background: hsl(var(--hsl-base-900)); }
  .art--extras { background: hsl(var(--hsl-base-500)); }

  /* Plan: a week with a few cooking days */

  .week {
    --span: 44;
    --rise: 25;
    display: grid;
    grid-template-columns: repeat(7, 5.2em);
    gap: 0.6em;
    height: 22em;
  }

  .week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 1em 0.4em;
    border: 0.1em dashed hsl(var(--hsl-base-400));
    border-radius: 1em;
    color: hsl(var(--hsl-base-400));
  }

  .week__day--cooking {
    border: 0;
    background: hsl(var(--hsl-white));
    color: var(--color-text);
    box-shadow: 0 0.6em 1.5em hsla(var(--hsl-black), 0.1);
  }

  .week__date {
    font-size: 0.85em;
    text-align: center;
    strong { display: block; text-transform: uppercase; }
  }

  .week__dish {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35em;
    font-size: 0.75em;
    font-weight: 700;

    img {
      width: 4.5em;
      height: 4.5em;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  .week__meter {
    width: 4.5em;
    height: 0.5em;
    border-radius: 1em;
    background: linear-gradient(90deg, hsl(var(--hsl-success-600)) var(--fill), hsl(var(--hsl-base-200)) 0);
  }

  @media (max-width: 40em) {
    .week {
      --span: 34;
      grid-template-columns: repeat(7, 4.4em);
      gap: 0.35em;
    }

    .week__dish img, .week__meter { width: 3.6em; }
    .week__dish img { height: 3.6em; }
  }

  .week__free {
    margin-block: auto;
    font-size: 0.8em;
    font-weight: 600;
  }

  /* Shop: the order page with a nutrition label */

  /* The phone mock is sized in rem, so the shop is drawn once at slide size
     and scaled as a whole; the deck controller sets --fit-width and
     --fit-height for each frame */
  .shop {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rem;
    height: 40rem;
    padding-right: 6rem;
    translate: -50% -50%;
    scale: min(1, var(--fit-width, 0.5), var(--fit-height, 0.5));

    .mobile {
      position: relative;
      right: auto;
      bottom: auto;
      flex-shrink: 0;
      width: 17rem;
    }
  }

  .shop__label {
    z-index: 3;
    flex-shrink: 0;
    width: 12em;
    margin-left: -3em;
    font-size: 0.95rem;
    padding: 1em 1.2em;
    border-radius: 0.8em;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1em 2em hsla(var(--hsl-black), 0.18);

    div {
      display: flex;
      justify-content: space-between;
      padding: 0.3em 0;
      border-top: 1px solid hsl(var(--hsl-base-200));
    }

    dd { font-weight: 700; }
    .pill { font-size: 0.85em; background: hsl(var(--hsl-warning-200)); padding: 0.15em 0.5em; }
  }

  .shop__label-title {
    padding-bottom: 0.4em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8em;
  }

  .shop__allergens dd { display: flex; gap: 0.3em; }

  /* AI: a chef's quick note becomes a finished dish */

  .ai {
    --span: 42;
    --rise: 27;
    display: flex;
    align-items: center;
    gap: 1.2em;
  }

  @media (max-width: 40em) {
    .ai {
      --span: 22;
      --rise: 42;
      flex-direction: column;
      gap: 0.6em;
    }
  }

  .ai__note {
    width: 12em;
    padding: 1.1em 1.2em;
    border-radius: 0.3em;
    background: hsl(var(--hsl-base-500));
    box-shadow: 0 0.8em 1.8em hsla(var(--hsl-success-800), 0.18);
    transform: rotate(-3deg);

    p { margin-top: 0.5em; font-family: "Permanent Marker", cursive; font-size: 0.95em; line-height: 1.35; }
  }

  .ai__label,
  .ai__preparation {
    font-size: 0.75em;
    font-weight: 700;
  }

  .ai__label { text-transform: uppercase; letter-spacing: 0.08em; }
  .ai__spark { font-size: 2em; }

  .ai__dish {
    width: 17em;
    overflow: hidden;
    border-radius: 1em;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1em 2.5em hsla(var(--hsl-success-800), 0.2);
  }

  .ai__photo {
    display: block;
    width: 100%;
    height: 8em;
    object-fit: cover;
  }

  .ai__body {
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    padding: 1em 1.1em 1.2em;
    line-height: 1.3;

    strong { font-size: 1.05em; font-weight: 800; }
    p { font-size: 0.85em; color: hsla(var(--hsl-black), 0.65); }
  }

  .ai__ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    padding-top: 0.5em;
    border-top: 1px solid hsl(var(--hsl-base-200));

    li { padding: 0.2em 0.55em; border-radius: 1em; background: hsl(var(--hsl-success-100)); font-size: 0.75em; }
  }

  .ai__facts {
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.85em;

    .pill { font-size: 0.8em; padding: 0.15em 0.5em; background: hsl(var(--hsl-warning-200)); }
  }

  /* Cook: the cooking list as a kitchen ticket */

  .ticket {
    --span: 28;
    --rise: 25;
    width: 24em;
    padding: 1.6em 1.6em 2.4em;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1em 2.5em hsla(var(--hsl-success-800), 0.18);
    transform: rotate(-2deg);
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 1.2em 100%;
  }

  .ticket__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 0.8em;
    border-bottom: 0.15em solid var(--color-text);
    font-size: 0.9em;
    strong { text-transform: uppercase; letter-spacing: 0.08em; }
  }

  .ticket__row {
    display: grid;
    grid-template-columns: 3.4em 1fr;
    gap: 0.6em;
    padding: 0.8em 0;
    border-bottom: 0.1em dashed hsl(var(--hsl-base-300));
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.25;
  }

  .ticket__quantity { font-size: 1.5em; font-weight: 800; line-height: 1; }

  .ticket__split {
    display: flex;
    gap: 0.3em;
    margin-top: 0.4em;
    .pill { font-size: 0.72em; padding: 0.15em 0.5em; }
  }

  .ticket__split .ticket__cold { background: hsl(var(--hsl-info-200)); color: hsl(var(--hsl-info-600)); }
  .ticket__split .ticket__frozen { background: hsl(var(--hsl-info-600)); color: hsl(var(--hsl-white)); }
  .ticket__split .ticket__warm { background: hsl(var(--hsl-error-200)); color: hsl(var(--hsl-error-700)); }

  .ticket__total {
    padding-top: 0.8em;
    text-align: right;
    strong { font-size: 1.6em; }
  }

  /* Deliver: a route through the delivery area */

  .route {
    --span: 40;
    --rise: 31;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }

  .route__map { width: 38em; height: auto; }
  .route__area { fill: hsl(var(--hsl-success-100)); stroke: hsl(var(--hsl-success-300)); stroke-width: 2; stroke-dasharray: 6 6; }
  .route__road { fill: none; stroke: hsl(var(--hsl-white)); stroke-width: 10; stroke-linecap: round; }
  .route__path { fill: none; stroke: hsl(var(--hsl-success-700)); stroke-width: 3; stroke-dasharray: 7 5; stroke-linejoin: round; }
  .route__stop circle { fill: hsl(var(--hsl-success-600)); stroke: hsl(var(--hsl-white)); stroke-width: 3; }
  .route__stop text { fill: hsl(var(--hsl-white)); font-size: 13px; font-weight: 800; text-anchor: middle; }
  .route__kitchen circle { fill: hsl(var(--hsl-base-900)); }
  .route__kitchen path { fill: none; stroke: hsl(var(--hsl-base-500)); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }

  .route__message {
    position: absolute;
    right: 5%;
    bottom: 7%;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    max-width: 16em;
    padding: 0.9em 1.1em;
    border-radius: 1em;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1em 2em hsla(var(--hsl-black), 0.15);
    font-size: 0.85em;
  }

  /* Return: the weekly loop */

  .loop {
    --span: 34;
    --rise: 29;
    position: relative;
    width: 26em;
    height: 26em;
  }

  .loop__ring {
    position: absolute;
    inset: 0;
    circle { fill: none; stroke: hsla(var(--hsl-black), 0.3); stroke-width: 1.2; stroke-dasharray: 3 4; }
    path { fill: none; stroke: hsla(var(--hsl-black), 0.6); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  }

  .loop__step {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.9em;
    border-radius: 2em;
    background: hsl(var(--hsl-white));
    box-shadow: 0 0.5em 1.2em hsla(var(--hsl-black), 0.12);
    font-size: 0.9em;
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }

  .loop__step--new_menu { left: 50%; top: 10%; }
  .loop__step--order { left: 90%; top: 50%; }
  .loop__step--meal { left: 50%; top: 90%; }
  .loop__step--feedback { left: 10%; top: 50%; }
  .loop__step--feedback .loop__icon { color: hsl(var(--hsl-warning-600)); letter-spacing: -0.1em; }

  .loop__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    text-align: center;

    strong { font-size: 4.5em; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
  }

  .loop__split {
    margin-top: 0.3em;
    font-size: 0.8em;
    color: hsla(var(--hsl-black), 0.55);
  }

  /* Grow: where orders come from, and a flyer from the marketing kit */

  .sources {
    --span: 42;
    --rise: 17;
    display: flex;
    align-items: center;
    gap: 2.2em;

    .sources__bars { width: 27em; }
  }

  @media (max-width: 40em) {
    .sources {
      --span: 30;
      --rise: 32;
      flex-direction: column;
    }
  }

  .flyer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    width: 9.5em;
    padding: 1em;
    border-radius: 0.4em;
    background: hsl(var(--hsl-base-500));
    box-shadow: 0 1em 2em hsla(var(--hsl-success-800), 0.2);
    transform: rotate(4deg);
    font-size: 0.9em;
    text-align: center;

    strong { font-size: 1.1em; font-weight: 800; letter-spacing: -0.02em; }
    span { font-size: 0.8em; font-weight: 700; }
  }

  .flyer__qr {
    width: 6.5em;
    height: 6.5em;
    padding: 0.5em;
    background: hsl(var(--hsl-white));
    fill: hsl(var(--hsl-base-900));
    shape-rendering: crispEdges;
  }

  .sources__bars {
    display: grid;
    gap: 0.8em;

    li {
      display: grid;
      grid-template-columns: 8.5em 1fr 2em;
      align-items: center;
      gap: 0.8em;
    }
  }

  .sources__name { font-size: 0.9em; font-weight: 600; white-space: nowrap; }
  .sources__count { font-weight: 800; text-align: right; }

  .sources__bar {
    width: var(--share);
    height: 1.4em;
    border-radius: 0.4em;
    background: hsl(var(--hsl-success-600));
  }

  /* Subscribe: one subscriber's weeks, collected by SEPA direct debit */

  .subscription {
    --span: 34;
    --rise: 29;
    position: relative;
  }

  .subscription__card {
    width: 26em;
    padding: 1.3em;
    border-radius: 1.2em;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1em 2.5em hsla(var(--hsl-success-800), 0.18);
    font-size: 0.9em;
  }

  .subscription__header {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding-bottom: 0.9em;
    border-bottom: 1px solid hsl(var(--hsl-base-200));
    line-height: 1.25;

    > span:nth-child(2) { display: flex; flex-direction: column; font-size: 0.9em; }
    .pill { margin-left: auto; padding: 0.3em 0.6em; background: hsl(var(--hsl-success-100)); font-weight: 700; }
  }

  .subscription__avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    background: hsl(var(--hsl-base-500));
    font-weight: 800;
  }

  .subscription__week {
    display: grid;
    grid-template-columns: 5em 3.8em 1fr auto;
    align-items: center;
    gap: 0.6em;
    padding: 0.6em 0;
    border-bottom: 1px dashed hsl(var(--hsl-base-300));
  }

  .subscription__date { font-size: 0.9em; strong { text-transform: capitalize; } }

  .subscription__dishes {
    display: flex;
    img { width: 2.2em; height: 2.2em; border-radius: 50%; object-fit: cover; border: 0.15em solid hsl(var(--hsl-white)); }
    img + img { margin-left: -0.7em; }
  }

  .subscription__status {
    padding: 0.25em 0.6em;
    border-radius: 1em;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
  }

  .subscription__week--paid .subscription__status { background: hsl(var(--hsl-success-100)); color: hsl(var(--hsl-success-800)); }
  .subscription__week--paused { color: hsl(var(--hsl-base-400)); }
  .subscription__week--paused .subscription__status { border: 1px dashed currentColor; }
  .subscription__week--planned .subscription__status { background: hsl(var(--hsl-base-100)); }

  .subscription__actions {
    display: flex;
    gap: 0.5em;
    padding-top: 1em;

    span {
      padding: 0.35em 0.8em;
      border: 1px solid hsla(var(--hsl-black), 0.4);
      border-radius: 2em;
      font-size: 0.85em;
      font-weight: 600;
    }
  }

  .subscription__income {
    position: absolute;
    bottom: -3.4em;
    right: -2.5em;
    display: flex;
    flex-direction: column;
    padding: 0.8em 1.1em;
    border-radius: 1em;
    background: hsl(var(--hsl-base-900));
    color: hsl(var(--hsl-base-50));
    box-shadow: 0 1em 2em hsla(var(--hsl-black), 0.25);
    transform: rotate(-3deg);

    strong { font-size: 1.6em; font-weight: 800; line-height: 1.1; }
    span { font-size: 0.75em; color: hsl(var(--hsl-base-300)); }
  }

  /* Pay: many payment methods, one payout */

  .payout {
    --span: 39;
    --rise: 21;
    display: flex;
    align-items: center;
  }

  .payout__methods {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 16em;

    li {
      display: flex;
      align-items: center;
      gap: 0.6em;
      width: 12.5em;
      padding: 0.45em 0.6em;
      border: 1px solid hsla(var(--hsl-white), 0.25);
      border-radius: 0.6em;
      background: hsla(var(--hsl-white), 0.08);
      color: hsl(var(--hsl-white));
      font-size: 0.9em;
      font-weight: 700;
    }

  }

  .payout__logos {
    display: flex;
    gap: 0.25em;
    flex-shrink: 0;

    img { height: 1.9em; width: auto; border-radius: 0.3em; }
  }

  .payout__flow {
    width: 5em;
    height: 16em;
    path { fill: none; stroke: hsl(var(--hsl-base-500)); stroke-width: 2; vector-effect: non-scaling-stroke; }
  }

  .payout__card {
    width: 17em;
    padding: 1.5em 1.8em;
    border-radius: 1.2em;
    background: hsl(var(--hsl-base-50));
    box-shadow: 0 1em 3em hsla(var(--hsl-black), 0.4);
  }

  .payout__label {
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: hsl(var(--hsl-success-700));
  }

  .payout__amount {
    display: block;
    margin: 0.1em 0 0.6em;
    font-size: 2.6em;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .payout__days {
    display: flex;
    align-items: flex-end;
    gap: 0.3em;
    height: 2.8em;

    span {
      flex: 1;
      height: var(--height);
      border-radius: 0.2em 0.2em 0 0;
      background: hsl(var(--hsl-success-600));
    }
  }

  .payout__days-label {
    display: block;
    margin: 0.3em 0 0.6em;
    font-size: 0.7em;
    color: hsl(var(--hsl-base-400));
  }

  .payout__lines {
    font-size: 0.85em;

    div {
      display: flex;
      justify-content: space-between;
      padding: 0.45em 0;
      border-top: 1px solid hsl(var(--hsl-base-200));
    }

    dd { font-weight: 700; }
  }

  /* Extras: the smaller features as one list */

  .extras {
    --span: 42;
    --rise: 23;
    display: grid;
    grid-template-columns: repeat(2, 16em);
    column-gap: 2em;
    padding: 0.6em 1.8em;
    border-radius: 1.2em;
    background: hsl(var(--hsl-white));
    box-shadow: 0 1em 2.5em hsla(var(--hsl-black), 0.12);
  }

  @media (max-width: 40em) {
    .extras {
      --span: 22;
      --rise: 34;
      grid-template-columns: 17em;
    }
  }

  .extras__item {
    display: flex;
    align-items: center;
    gap: 0.9em;
    min-height: 4.6em;
    border-bottom: 1px solid hsl(var(--hsl-base-200));
    line-height: 1.3;

    strong { display: block; font-size: 0.95em; font-weight: 800; }
    span span { display: block; font-size: 0.8em; color: hsla(var(--hsl-black), 0.55); }
  }

  .extras__item:nth-last-child(-n + 2) { border-bottom: 0; }

  @media (max-width: 40em) {
    .extras__item:nth-last-child(2) { border-bottom: 1px solid hsl(var(--hsl-base-200)); }
  }

  .extras__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    background: hsl(var(--hsl-base-100));
    font-size: 1.1em;
  }
}
@layer modules {
  .file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-radius: var(--radius-small);
    outline: 1px solid var(--color-input-border);
  }

  .file-upload__image {
    object-fit: scale-down;
    border-radius: var(--radius-small);
    background-color: var(--color-file-upload-bg);
  }
  /* Removed, until the form is saved. */
  .file-upload__image--removed {
    opacity: 0.2;
  }
  .file-upload__label {
    margin-top: 1rem;
  }
  .file-upload__input {
    display: none;
  }
}
@layer modules {
  .flash {
    position: fixed;
    top: 3rem;
    left: 50%;
    transform: translate(-50%, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 90%;
    width: max-content;
    z-index: 1000;
  }

  .flash__message {
    border-radius: 1rem;
    padding: 1rem;
    background: var(--color-flash-bg);
    color: var(--color-flash-color);
    animation: appear-then-fade 4s both;
  }
}
@layer modules {
  /* A meal as a gift: the voucher itself, the A6 postcard, scaled down and
     tilted a little, as if it were handed over. */
  .gift__postcard {
    --gift-scale: 0.56;

    overflow: hidden;
    width: calc(148mm * var(--gift-scale));
    height: calc(105mm * var(--gift-scale));
    margin-inline: auto;
    border-radius: var(--radius-medium);
    box-shadow: 0 0.5rem 1.5rem var(--color-shadow-strong);
    rotate: -2deg;

    @media (min-width: 40em) { --gift-scale: 0.68; }

    iframe {
      width: 148mm;
      height: 105mm;
      border: 0;
      transform: scale(var(--gift-scale));
      transform-origin: 0 0;
      pointer-events: none;
    }
  }

  /* On a page of its own, as large as the screen allows, up to its real size. */
  .gift__postcard--large {
    @media (min-width: 40em) { --gift-scale: 0.85; }
    @media (min-width: 48em) { --gift-scale: 1; }
  }
}
@layer modules {
  .icon {
    display: inline-block;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    flex-grow: 0;
    vertical-align: baseline;
  }

  .icon > :is(svg, img) {
    display: block;
    width: 100%;
    height: 100%;
  }

  .icon--small {
    height: 1em;
    width: 1em;
  }

  /* A big sign, like the check when an order is placed: as wide as the photos
     in the cards below it, so their text starts on the same line. */
  .icon--large {
    width: 40px;
    height: 40px;
    font-size: 40px;
  }

  .icon--check {
    background: url(/assets/icons/check-white-73456349327790c99d99bdb9d4d448292f829e122141b60902e20888935cbdf8.svg) center center/0.55em auto no-repeat var(--color-icon-success-bg);
  }
}
@layer modules {
  .inline-form {
    border: 1px dashed var(--color-inline-form-border);
    border-radius: var(--radius-small);
    background: var(--color-inline-form-bg);
  }

  .inline-form__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px dashed var(--color-inline-form-border);
  }

  .inline-form__header, .inline-form__body {
    padding: 0.5rem;
    @media (min-width: 40em) { padding: 1rem; }
  }

  .inline-form .input-error {
    /* Put the error at the last position */
    order: 1000;
    margin: 0;
  }
}
@layer modules {
  .input-error {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 90%;
    color: var(--color-input-error-color);
  }
}
@layer modules {
  .input {
    margin-bottom: 1rem;
    line-height: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: var(--color-input-color);
    opacity: 1;
    border-radius: var(--radius-small);
    background: var(--color-input-bg);
    outline: 1px solid var(--color-input-border);
    padding: 0.75rem 0.5ch;
    @media (min-width: 40em) {
      padding-left: 1ch;
    }
  }

  .input--full {
    display: block;
    width: 100%;
  }

  .input--search {
    border-radius: 2em;
    margin: 0;
    font-size: 80%;
    padding: 0.5rem 1rem;
  }

  .input-color {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    outline: 1px solid var(--color-input-border);
    cursor: pointer;

    border-radius: 50%;
    height: 2em;
    width: 2em;
    border: transparent;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    &::-webkit-color-swatch{
      border: 0;
      border-radius: 0;
    }

    &::-moz-color-swatch,
    &::-moz-focus-inner{
      border: 0;
    }

    &::-moz-focus-inner{
      padding: 0;
    }
  }


  .input:disabled,
  .input--disabled {
    color: var(--color-input-disabled-color);
    background-color: var(--color-input-disabled-bg);
  }

  .input--small {
    padding: 0.25rem 0.5rem;
    width: auto;
  }

  /* Outlined in red, with its message close below in the space the field
     keeps under it. Selects too, which otherwise keep their own margin. */
  :is(.input, .select).input--error {
    margin-bottom: 0.25rem;
    outline: 2px solid var(--color-input-error-color);
  }

  .input-suffix {
    display: flex;
    margin-bottom: 1rem;
    align-items: baseline;
    flex-wrap: wrap;
    row-gap: 0.5rem;

    .input-error {
      order: 1000;
    }
  }

  .input-suffix__input {
    margin-bottom: 0;
    border-radius: var(--radius-small) 0 0 var(--radius-small);
    flex: 1;
  }

  .input-suffix__suffix {
    padding: 0.75rem 1ch;
    background: var(--color-input-suffix-bg);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    outline: 1px solid var(--color-input-border);
    font-variant-caps: small-caps;
    flex: 0 0 auto;
  }

  /* The mirror of .input-suffix: a block attached to the start of the input. */
  .input-prefix {
    display: flex;
    margin-bottom: 1rem;

    .autocomplete-results {
      top: 100%;
      margin-top: 0;
    }
  }

  .input-prefix__prefix {
    display: flex;
    align-items: center;
    padding: 0 1ch;
    background: var(--color-input-suffix-bg);
    border-radius: var(--radius-small) 0 0 var(--radius-small);
    outline: 1px solid var(--color-input-border);
    flex: 0 0 auto;
  }

  .input-prefix__input {
    margin-bottom: 0;
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    flex: 1;
  }
}
@layer modules {
  /* Trigger button in topnav */
  .jump__trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: var(--color-text);
    border-radius: var(--radius-small);
    transition: background 150ms ease;

    &:hover {
      background: hsla(var(--hsl-black), 0.05);
    }
  }

  .jump__kbd {
    margin-left: 0.25rem;
  }

  .jump__logo {
    height: 1.25rem;
  }

  .jump__caret {
    height: 0.875rem;
    width: auto;
    opacity: 0.5;
  }

  /* Dialog */
  .jump {
    border: none;
    border-radius: 0.75rem;
    background: var(--color-dialog-bg);
    box-shadow:
      0 0 0 1px hsla(var(--hsl-black), 0.08),
      0 8px 40px hsla(var(--hsl-black), 0.12),
      0 2px 8px hsla(var(--hsl-black), 0.06);
    padding: 0;
    width: min(28rem, calc(100vw - 2rem));
    max-height: min(36rem, calc(100dvh - 4rem));
    margin-top: 8dvh;

    opacity: 0;
    transform: scale(0.9);
    transform-origin: top center;
    transition-property: display, opacity, overlay, transform;
    transition-duration: 120ms;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;

    &[open] {
      opacity: 1;
      transform: scale(1);
      transition-duration: 200ms;
      transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    @starting-style {
      &[open] {
        opacity: 0;
        transform: scale(0.9);
      }
    }

    &::backdrop {
      background: hsla(var(--hsl-black), 0.25);
      backdrop-filter: blur(4px);
      opacity: 0;
      transition-property: display, opacity, overlay;
      transition-duration: 120ms;
      transition-behavior: allow-discrete;
    }

    &[open]::backdrop {
      opacity: 1;
      transition-duration: 200ms;
    }

    @starting-style {
      &[open]::backdrop {
        opacity: 0;
      }
    }
  }

  .jump__content {
    display: flex;
    flex-direction: column;
    max-height: inherit;
  }

  /* Search row */
  .jump__search {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-line);
  }

  .jump__search-icon {
    flex-shrink: 0;
    opacity: 0.35;
    display: flex;
    width: 1.125rem;
    height: 1.125rem;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .jump__input {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--color-input-color);
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    width: 100%;

    &::placeholder {
      color: var(--color-text-muted);
    }

    &::-webkit-search-cancel-button {
      display: none;
    }
  }

  .jump__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: hsla(var(--hsl-black), 0.03);
    border: 1px solid var(--color-line);
    border-radius: 50%;
    color: var(--color-text-muted);

    svg {
      width: 0.75rem;
      height: 0.75rem;
    }
    cursor: pointer;
  }

  /* Scrollable body */
  .jump__body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Nav section — visible by default, hidden when searching */
  .jump__nav {
    padding: 0.5rem;
  }

  .jump[data-searching] .jump__nav {
    display: none;
  }

  /* Search results — hidden by default, visible when searching */
  .jump__results {
    display: none;
    padding: 0.375rem;
  }

  .jump[data-searching] .jump__results {
    display: block;
  }

  /* Hotkey navigation cards (primary nav) */
  .jump__cards {
    display: flex;
    gap: 0.375rem;
    padding: 0.25rem 0;
  }

  .jump__card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    position: relative;
    text-align: center;
    border-radius: var(--radius-small);
    background: hsla(var(--hsl-black), 0.03);
    border: 1px solid var(--color-line);
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--color-text);
    text-decoration: none;
    transition: background 150ms ease;

    &.jump__item--selected {
      background: var(--color-autocomplete-highlight-bg);
    }

    img {
      height: 1.25rem;
      width: 1.25rem;
      opacity: 0.65;
    }
  }

  .jump__hotkey {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    font-family: inherit;
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-muted);
    background: hsl(var(--hsl-base-100));
    border: 1px solid var(--color-line);
    border-radius: 0.1875rem;
    padding: 0.125rem 0.25rem;
  }

  /* Section header */
  .jump__section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 0.75rem 0.625rem 0.25rem;
  }

  /* Menu items */
  .jump__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-small);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;

    &.jump__item--selected {
      background: var(--color-autocomplete-highlight-bg);
    }

    img {
      height: 1.25rem;
      width: 1.25rem;
      opacity: 0.5;
    }
  }

  .jump__item--disabled {
    filter: opacity(30%);
    cursor: auto;
    &:hover {
      background: inherit;
    }
  }

  /* Search result items */
  .jump__result {
    border-bottom: none;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-small);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;

    &.jump__result--selected {
      background: var(--color-autocomplete-highlight-bg);
    }
  }

  .jump__result-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Search result group headers */
  .jump__group-header {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 0.625rem 0.625rem 0.25rem;

    .jump__group + & {
      padding-top: 0.375rem;
      margin-top: 0.25rem;
      border-top: 1px solid var(--color-line);
    }
  }

  /* Empty / no results */
  .jump__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }

  /* Footer with keyboard hints */
  .jump__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.6875rem;
    color: var(--color-text-muted);

    kbd {
      font-size: 0.625rem;
      border-radius: 0.1875rem;
      padding: 0.125rem 0.3125rem;
    }
  }

  /* Prevent body scroll when jump dialog is open */
  html:has(.jump[open]) {
    overflow: hidden;
  }
}
@layer modules {
  .label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    em {
      font-weight: 400;
    }
    i {
      display: block;
      font-weight: 400;
    }
  }
  .label--small {
    font-size: 80%;
    font-weight: 400;
    margin-bottom: 0.25rem;
  }
}
@layer modules {
  .letter {
    width: min(90vw, 38.25em);
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    position: relative;
    font-size: 110%;

    article {
      display: flex;
      flex-direction: column;
      z-index: 1;
      position: relative;
      background: hsl(var(--hsl-white));
      border-radius: 0.1em;
      transform: rotate(-0.4deg);
      padding: 1.5em;
      box-shadow: 0 0 0 1px hsla(var(--hsl-black), 0.02), 0 0.2em 1.6em -0.8em hsla(var(--hsl-black), 0.1), 0 0.4em 2.4em -1.2em hsla(var(--hsl-black), 0.2), 0 0.4em 0.8em -1.2em hsla(var(--hsl-black), 0.3), 0 0.8em 1.2em -1.6em hsla(var(--hsl-black), 0.4), 0 1.2em 1.6em -2.0em hsla(var(--hsl-black), 0.5);
      @media (min-width: 48em) {
        font-size: 120%;
        padding: 2.5em;
      }
      @media (min-width: 64em) {
        transform: rotate(-0.8deg);
        padding: 3.5em;
        font-size: 130%;
      }

      > * + * {
        margin-top: 1rem;
      }
    }

    &:before, &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: hsl(var(--hsl-white));
      border-radius: 0.1em;
      box-shadow: 0 0 0 1px hsla(var(--hsl-black), 0.02), 0 0.4em 2.4em -1.2em hsla(var(--hsl-black), 0.05), 0 1.6em 2.0em -2.4em hsla(var(--hsl-black), 0.05);
    }

    &:before {
      width: 99.1%;
      transform: rotate(-1.45deg) translate(0.2%, 0.1%);
      @media (min-width: 64em) {
        transform: rotate(-2.9deg) translate(0.2%, 0.1%)
      }
    }

    &:after {
      height: 98.5%;
      width: 99.3%;
      transform: rotate(0.3deg) translate(0.3%, 0.8%);
      @media (min-width: 64em) {
        transform: rotate(0.6deg) translate(0.3%, 0.8%)
      }
    }
  }

  .letter__signature {
    object-fit: scale-down;
    object-position: left center;
  }
}
@layer modules {
  .list {
    border-top: 1px dashed var(--color-line);
  }

  .list-item {
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--color-line);
  }

  /* Rows between thin solid lines, with none above or below, like the lines
     of an order. --card puts them on a raised white panel, like a dish's
     portions or ways to get in touch. */
  .list--ruled,
  .list--card {
    border: 0;

    > .list-item {
      border-bottom-style: solid;
    }

    > .list-item:last-child {
      border-bottom: 0;
    }
  }

  .list--card {
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);

    > .list-item {
      padding-inline: 1rem;
    }
  }

  /* A whole row to tap: an icon, the text, and what tapping does. */
  .list-item:has(> .list-item__link) {
    padding-block: 0;
  }

  .list-item__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    color: inherit;
    text-decoration: none;
  }
}
@layer modules {
  /* A mail from the store as it comes in: a white card, tilted a little like a
     letter that just arrived, never wider than a phone's mail. Sized in ems, so
     it shrinks with its font. */
  .mail-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    max-width: 19rem;
    margin-inline: auto;
    padding: 1em;
    border-radius: 1.15em;
    background: hsl(var(--hsl-white));
    box-shadow: 0 0.5em 1.5em var(--color-shadow-strong);
    rotate: -2deg;
    font-size: 0.875rem;
  }

  /* At the size of the text around it, like in a picture: dense, just the
     subject on one line and the photos. */
  .mail-preview--small {
    gap: 0.4em;
    padding: 0.6em;
    font-size: inherit;

    .mail-preview__sender { display: none; }
    .mail-preview__subject { font-size: 0.9em; white-space: nowrap; }
  }

  .mail-preview__sender {
    display: flex;
    align-items: center;
    gap: 0.4em;

    .store-image { --store-image-size: 1.75em; }
  }

  .mail-preview__subject {
    font-size: 1.15em;
    font-weight: 800;
  }

  .mail-preview__photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3em;

    img {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 0.4em;
      object-fit: cover;
    }
  }
}
@layer modules {
  .main {
    margin: 0 auto;
    padding: 0rem;
    @media (min-width: 30em) { padding: 0 0.5rem; }
    @media (min-width: 40em) { padding: 0 1rem; }
  }

  .main--small {
    width: var(--main-small-width);
  }

  .main--medium {
    width: var(--main-medium-width);
  }

  .main--large {
    width: var(--main-large-width);
  }

  .main--full {
    width: auto;
  }

  /* The same 1rem gutter on every screen, for a page that sits in a column of
     its own and lines everything up on it. */
  .main--padded {
    width: auto;
    padding-inline: 1rem;
  }

  /* One thing in the middle of the page, like a login: as narrow as a small
     page, between the header and the footer. */
  .main--center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-inline: 1rem;

    > * { width: var(--main-small-width); }
  }

  .main__spacing {
    margin-left: 1rem;
    margin-right: 1rem;
    @media (min-width: 40em) { margin-left: 1.25rem; margin-right: 1.25rem; }
    @media (min-width: 60em) { margin-left: 1.5rem; margin-right: 1.5rem; }
  }

  .main__title {
    font-size: 150%;
    font-weight: 800;
    @media (min-width: 30em) { font-size: 180%; }
    @media (min-width: 40em) { font-size: 200%; }
  }
}
@layer modules {
  .map .leaflet-overlay-pane svg {
    transform-origin: 0 0;
  }

  .map-marker {
    background: var(--color-marker-bg);
    color: var(--color-marker-color);
    border: 2px solid var(--color-marker-border);
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    line-height: 26px;
    font-size: 16px;
    width: 30px;
    height: 30px;
  }

  .map-marker--primary {
    background: var(--color-marker-primary-bg);
    color: var(--color-marker-primary-color);
    border: 2px solid var(--color-marker-primary-color);
  }

  .map-marker--secondary {
    background: var(--color-marker-secondary-bg);
    color: var(--color-marker-secondary-color);
    border: 2px solid var(--color-marker-secondary-color);
  }

  .route-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    background: var(--route-color);
  }

  .map-marker:has(.map-marker__route) {
    border-color: var(--color-marker-border);
    overflow: hidden;
  }

  .map-marker__route {
    display: block;
    height: 100%;
    background: var(--route-color);
    color: white;
  }

  /* Styled by hand: with accent-color, Chrome darkens the track behind light route colours. */
  .shift-slider {
    --fill: 0%;
    --thumb: 1.25rem;

    appearance: none;
    inline-size: 100%;
    block-size: 0.5rem;
    margin-block: calc((var(--thumb) - 0.5rem) / 2);
    border-radius: 1rem;
    background: linear-gradient(to right, var(--route-color) var(--fill), hsl(var(--hsl-base-200)) var(--fill));
    cursor: pointer;

    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: var(--thumb);
      block-size: var(--thumb);
      border: 3px solid white;
      border-radius: 50%;
      background: var(--route-color);
      box-shadow: 0 1px 3px hsla(var(--hsl-black), 0.3);
    }

    &::-moz-range-thumb {
      inline-size: var(--thumb);
      block-size: var(--thumb);
      border: 3px solid white;
      border-radius: 50%;
      background: var(--route-color);
      box-shadow: 0 1px 3px hsla(var(--hsl-black), 0.3);
    }

    &:disabled {
      cursor: default;
    }
  }

  /* The route you are on, shown over its stops once you scroll past their top.
     The bar takes no space, so nothing moves when it appears. */
  .route-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 0;
  }

  .route-bar__content {
    position: absolute;
    inset-inline: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--color-main-bg);
    box-shadow: 0 4px 8px -2px var(--color-shadow-strong);
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition: opacity 150ms, transform 150ms;
  }

  .route-bar--stuck .route-bar__content {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .route-board__route {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 0.75rem 0.85rem;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-small);
    background: var(--color-card-bg);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 2px 2px 0 var(--color-shadow-strong);

    &:hover {
      border-color: var(--route-color);
    }
  }

  .route-board__route--current {
    border-color: var(--route-color);
    box-shadow: 0 0 0 2px var(--route-color);
  }

  .route-board__done {
    display: inline-grid;
    place-items: center;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    margin-block: 0.1rem 0.15rem;
    border-radius: 50%;
    background: hsl(var(--hsl-success-600));
  }

  .route-progress {
    block-size: 0.4rem;
    border-radius: 1rem;
    overflow: hidden;
    background: hsl(var(--hsl-base-200));

    &::after {
      content: "";
      display: block;
      block-size: 100%;
      inline-size: calc(var(--fill, 0) * 100%);
      border-radius: 1rem;
      background: var(--route-color);
      transition: inline-size 400ms ease-out;
    }
  }
}
@layer modules {
  /* Columns that pack items of any height without gaps, reading down each column. */
  .masonry {
    columns: 20rem;
    column-gap: 1rem;
  }

  .masonry__item {
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  /* Narrow columns: two on a phone, more on a wide screen. */
  .masonry--narrow {
    columns: 9.5rem 5;
  }
}
@layer modules {
  .menu {
    background-color: var(--color-menu-bg);
    border-radius: var(--radius-small);
    overflow: hidden;
    > * + * {
      border-top: 1px solid var(--color-menu-border);
    }
  }

  .menu__item {
    padding: 0.75rem 1rem;
    display: flex;
    font-weight: 500;
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
    &:hover {
      background: rgba(0,0,0,0.1);
    }
  }

  .menu__item--disabled {
    filter: opacity(30%);
    cursor: auto;
    &:hover {
      background: inherit;
    }
  }
}
@layer modules {
  .metric {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-small);
    padding: 0.5rem;
    width: 100%;
  }

  .metric__value {
    font-size: 125%;
    font-weight: 500;
    font-feature-settings: "tnum";
    white-space: nowrap;
    letter-spacing: -0.05rem;
  }

  .metric__delta {
    margin-left: 0.125rem;
    vertical-align: super;
    font-size: 80%;
    font-weight: 800;
    font-feature-settings: "tnum";
    white-space: nowrap;
    letter-spacing: -0.05rem;
    display: inline-flex;
    flex-direction: column;
  }

  .metric__caret {
    display: block;
    line-height: 0.25em;
    height: 0.25em;
  }

  .metric__delta--positive {
    color: var(--color-metric-positive);
  }

  .metric__delta--negative {
    color: var(--color-metric-negative);
  }

  .metric__label {
    font-weight: 500;
    font-size: 55%;
    text-transform: uppercase;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@layer modules {
  .nested-fields { }

  .nested-fields .input-error {
    /* Put the error at the last position */
    order: 1000;
    margin: 0;
  }
}
@layer modules {
  .notice {
    border-radius: var(--radius-small);
    background: var(--color-notice-bg);
    color: var(--color-notice-color);
    border: 1px solid var(--color-notice-border);

    padding: 1rem;
    @media (min-width: 40em) { padding: 1rem 1.25rem; }
    @media (min-width: 60em) { padding: 1.25rem 1.5rem; }
  }

  /* Something to do: what, why, and the buttons to do it. */
  .notice--task {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .notice__text {
    flex: 1 1 12em;
  }

  .notice__title {
    display: block;
    font-weight: 700;
  }

  .notice__hint {
    font-size: 90%;
    margin-block-start: 0.25rem;
  }

  .notice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .notice--error {
    background:   var(--color-notice-error-bg);
    color:        var(--color-notice-error-color);
    border-color: var(--color-notice-error-border);
  }

  .notice--alert {
    background:   var(--color-notice-alert-bg);
    color:        var(--color-notice-alert-color);
    border-color: var(--color-notice-alert-border);
  }

  .notice--success {
    background:   var(--color-notice-success-bg);
    color:        var(--color-notice-success-color);
    border-color: var(--color-notice-success-border);
  }
}
@layer modules {
  .offer {
    position: relative;
    display: grid;
    row-gap: 0.375rem;
    container-type: inline-size;
  }

  /* Between the portions of one dish, lighter than the line between dishes. */
  .offer__separator {
    border: 0;
    border-top: 1px dashed var(--color-line);
  }

  /* Portion first, its price against its button, like a menu. Each row on its
     own, so only the row that goes in the cart makes room for minus. */
  .offer__order {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
  }

  .offer__variant {
    flex: 1;
    font-size: 0.875rem;
  }

  /* In the cart on a narrow phone, a portion reads like its line in the cart:
     its price under its name, so minus and the quantity fit beside it. Wider,
     it stays on its line. Both lines fit the buttons' height, so the + under
     a finger does not move between taps. */
  @container (width < 24rem) {
    .offer__order--ordered {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas: "variant actions" "price actions";
      gap: 0 0.5rem;

      .offer__variant { grid-area: variant; line-height: 1; }
      .offer__price { grid-area: price; text-align: left; line-height: 1; }
      .offer__actions { grid-area: actions; }
    }
  }

  .offer__order--sold-out {
    text-decoration: line-through;
  }

  .offer__price {
    font-weight: 700;
    font-feature-settings: "tnum";
    white-space: nowrap;
    text-align: right;
  }
}
@layer modules {
  .order-menu {
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    box-shadow: 0 5px 10px 10px var(--color-shadow-strong);
    background-color: var(--color-main-bg);

    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    /* Side by side within the content width: the deliveries left, the button right. */
    @media (min-width: 40em) {
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      inset-inline: max(0px, (100% - var(--main-medium-width)) / 2);
      padding-inline: 2rem;

      .button--full {
        width: auto;
      }
    }
  }

  /* Room to scroll the last meal above the fixed bar, so it can still be tapped;
     in the column, so it has the page's colour. */
  .page-column:has(#order_menu .order-menu) {
    padding-bottom: 10.5rem;

    @media (min-width: 40em) { padding-bottom: 6rem; }
  }

  /* One row to swipe on phones, so many deliveries do not make the bar tall;
     wider, they wrap. */
  .order-menu__deliveries {
    display: flex;
    gap: 0.5rem;

    > * { flex-shrink: 0; }

    @media (min-width: 40em) { flex-wrap: wrap; }
  }
}
@layer modules {
  /* The page as one column in the main colour, on a deeper shade of the store's
     colour once the screen is wider than the column. */
  .page-column {
    display: flow-root;
    min-height: 100vh;
    background: var(--color-main-bg);

    @media (min-width: 40em) {
      width: var(--main-medium-width);
      margin-inline: auto;
      box-shadow: 0 0 2rem var(--color-shadow-strong);
    }
  }

  /* Leaves a centred page the height between its header and footer. */
  .page-column:has(> .main--center) {
    display: flex;
    flex-direction: column;
  }

  html:has(.page-column) {
    background: var(--color-store-400);
  }
}
@layer modules {
  /* The payment QR while the customer pays. Once paid, the code fades out and a check
     takes its place, so the deliverer sees it at a glance. */
  .payment-status__code {
    position: relative;
    display: flex;
    justify-content: center;
  }

  .payment-status__line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 1.75rem;
    margin: 0.5rem 0 0;
    color: var(--color-text-muted);
  }

  .payment-status--paid {
    .qr-code {
      animation: payment-status-code-out 350ms ease-in forwards;
    }

    .payment-status__line {
      font-size: 125%;
      font-weight: 700;
      color: hsl(var(--hsl-success-700));
    }
  }

  .payment-status__check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--hsl-success-600));
    animation: payment-status-check-in 450ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms backwards;

    svg {
      width: min(45%, 9rem);
      height: auto;
      aspect-ratio: 1;
    }
  }

  @keyframes payment-status-code-out {
    to {
      opacity: 0;
      transform: scale(0.85);
    }
  }

  @keyframes payment-status-check-in {
    from {
      opacity: 0;
      transform: scale(0.4);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .payment-status--paid .qr-code {
      animation: none;
      opacity: 0;
    }

    .payment-status__check {
      animation: none;
    }
  }
}
@layer modules {
  .pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    border-radius: 1rem;
    padding: 0.2em 0.5em;
    font-size: 75%;
    font-weight: 500;
    color: var(--color-pill-color);
    position: relative;
    background-color: var(--color-pill-bg);
    line-height: 1;
    font-feature-settings: "tnum";

    img,
    svg {
      height: 1em;
      width: 1em;
    }
  }

  /* Dark text on a clear tint, like completed progress steps, so a colored pill stands out and stays readable. */
  .pill--success {
    background-color: hsl(var(--hsl-success-200));
    color: hsl(var(--hsl-success-800));
  }

  .pill--info {
    background-color: hsl(var(--hsl-info-200));
    color: hsl(var(--hsl-info-950));
  }

  .pill--error {
    background-color: hsl(var(--hsl-error-200));
    color: hsl(var(--hsl-error-800));
  }

  /* Purple, the HACCP color kitchens use for allergens. */
  .pill--purple {
    background-color: hsl(var(--hsl-purple-200));
    color: hsl(var(--hsl-purple-800));
  }

  /* Temperatures: chilled light blue, frozen deep blue, warm red. */
  .pill--cold {
    background-color: hsl(var(--hsl-info-200));
    color: hsl(var(--hsl-info-950));
  }

  .pill--frozen {
    background-color: hsl(var(--hsl-info-600));
    color: hsl(var(--hsl-white));
  }

  .pill--warm {
    background-color: hsl(var(--hsl-error-200));
    color: hsl(var(--hsl-error-800));
  }

  .pill--large {
    padding: 0.35em 0.75em;
    font-size: 85%;
  }

  .pill--super {
    top: -0.5rem;
  }
}
@layer modules {
  .popup-menu {
    position: absolute;
    padding: 1rem;
    background-color: var(--color-popup-menu-bg);
    color: var(--color-popup-menu-color);
    z-index: 10;
    border-radius: var(--radius-small);
    box-shadow: 0 10px 10px 0 var(--color-shadow);
    width: 16rem;
    transition-duration: .15s;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
  }

  .popup-menu--appear {
    opacity: 1;
    transform: scale(100%);
  }

  .popup-menu--fade {
    opacity: 0;
    transform: scale(95%);
  }

  .popup-menu--right {
    right: 0;
  }
}
@layer modules {
  .page-header {
    padding-top: 1rem;
    overflow: hidden;
    background-color: hsl(var(--hsl-base-500));
  }

  .page-header__heading,
  .page-header__outro {
    max-width: 38rem;
  }

  .preview {
    direction: rtl;
    max-width: 56rem;
  }

  .desktop {
    direction: ltr;
    width: 56rem;
    aspect-ratio: 4 / 3;
    margin-right: 14%;
    overflow: hidden;
    outline: 1px solid hsla(var(--hsl-black), 0.3);
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 3rem hsla(var(--hsl-black), 0.2);
  }

  .desktop__window-controls {
    position: absolute;
    gap: 0.375rem;
    height: 1.5rem;
    padding: 0 0.75rem;
  }

  .desktop__window-controls span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
  }

  .desktop__window-controls span:nth-child(1) { background: hsl(var(--hsl-error-600)); }
  .desktop__window-controls span:nth-child(2) { background: hsl(var(--hsl-base-500)); }
  .desktop__window-controls span:nth-child(3) { background: hsl(var(--hsl-success-600)); }

  .desktop__screen {
    flex: 1;
    overflow: hidden;
    background: hsl(var(--hsl-base-50));
  }

  .desktop__viewport {
    --desktop-scale: 0.84;
    contain: paint;
    width: calc(100% / var(--desktop-scale));
    min-height: calc(100% / var(--desktop-scale));
    transform: scale(var(--desktop-scale));
    transform-origin: top left;
  }

  .desktop__viewport > .topnav {
    inset-inline-start: clamp(0rem, calc(43rem - 65vw), 27rem);
  }

  .desktop__viewport > .main {
    position: relative;
    inset-inline-start: clamp(0rem, calc(64rem - 120vw), 36rem);
  }

  .mobile {
    --mobile-scale: 0.6;
    direction: ltr;
    position: absolute;
    right: 0;
    bottom: -2rem;
    width: clamp(14rem, calc(18rem - 5vw), 16rem);
    aspect-ratio: 9 / 19.5;
    overflow: hidden;
    border-radius: 10% / 5%;
    box-shadow: 0 1.5rem 3rem hsla(var(--hsl-black), 0.25);
  }

  .mobile::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 3px solid hsl(var(--hsl-base-900));
    border-radius: inherit;
    pointer-events: none;
  }

  .mobile__viewport {
    contain: paint;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / var(--mobile-scale));
    height: calc(100% / var(--mobile-scale));
    background: hsl(var(--hsl-base-50));
    transform: scale(var(--mobile-scale));
    transform-origin: top left;
  }

  .mobile__status {
    padding: 1rem 2rem 1px;
    margin-bottom: -1px;
    font-size: 110%;
    color: var(--color-text);
    background: var(--color-store-500);
  }

  .mobile__status-icons svg {
    width: 1.1rem;
    height: 0.8rem;
    fill: currentColor;
  }

  .mobile__storefront {
    flex: 1;
    overflow: hidden;
  }

  @media(min-width: 48em) {
    .page-header {
      padding-top: 3rem;
    }

    .preview {
      margin-top: 3rem;
    }
  }
}
.pro-locked {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: hsla(var(--hsl-base-50), 0.85);
  backdrop-filter: blur(2px);
  z-index: 50;
  pointer-events: auto;
  padding: 1rem;
}
@layer modules {
  /* Where you are in a few steps, like a chef's sign-up or the checkout: done
     in the accent colour, the current one filled, the rest still open. A line
     leads to each step and fills once you get there. */
  .progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .progress__step {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-muted);
    text-decoration: none;

    &:first-child {
      flex: none;
    }

    &:not(:first-child)::before {
      content: "";
      flex: 1;
      height: 2px;
      margin-right: 0.125rem;
      background: var(--progress-line, var(--color-line));
    }
  }

  /* A step to go back to, inside a step that is a list item. */
  .progress__link {
    display: flex;
    align-items: center;
    gap: inherit;
    color: inherit;
  }

  .progress__number {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    font-size: 0.8125rem;
    font-feature-settings: "tnum";
  }

  .progress__step--completed,
  .progress__step--active {
    --progress-line: var(--color-primary-bg);
    color: var(--color-text);
  }

  .progress__step--completed .progress__number {
    border-color: var(--color-primary-bg);
    background: var(--color-primary-bg);
    color: var(--color-primary-color);
  }

  .progress__step--active .progress__number {
    border-color: hsl(var(--hsl-base-900));
    background: hsl(var(--hsl-base-900));
    color: hsl(var(--hsl-white));
  }
}
@layer modules {
  .qr-code {
    aspect-ratio: 1;
    max-width: 12em;
  }

  /* Shown to a customer on the chef's phone: as large as fits, on white so it scans reliably. */
  .qr-code--large {
    display: block;
    width: 100%;
    max-width: min(20rem, 70dvh);
    padding: 1rem;
    background-color: white;
    border-radius: var(--radius-small);
  }
}
@layer modules {
  .quote {
    margin-inline: 0;
  }

  .quote--large blockquote {
    font-size: 150%;
  }

  .quote__author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .quote__avatar {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .quote__name {
    font-size: 85%;
    font-weight: 700;
  }
}
@layer modules {
  .radio-button {
    cursor: pointer;
    padding: 0.75rem 0.5rem;
    background: var(--color-radio-button-bg);
    outline: 1px solid var(--color-radio-button-outline);
    border-radius: var(--radius-small);
  }

  .radio-button:hover {
    outline-color: var(--color-radio-button-hover-outline);
  }

  .radio-button input {
    flex-shrink: 0;
    accent-color: var(--color-radio-button-checked-outline);
  }

  .radio-button:has(input:checked) {
    background: var(--color-radio-button-checked-bg);
    outline: 2px solid var(--color-radio-button-checked-outline);
  }

  .radio-button:has(input:focus-visible) {
    outline-offset: 2px;
  }

  .radio-button input:focus-visible {
    outline: none;
  }
}
@layer modules {
  /* A printed kitchen ticket ("bon"): square paper with torn edges. The teeth
     stick out of the paper, so the drop shadow follows the edge. */
  .receipt {
    --receipt-padding: 1.25rem;
    @media (min-width: 40em) { --receipt-padding: 2rem; }
    @media (min-width: 60em) { --receipt-padding: 3rem; }

    --receipt-tooth: 0.4rem;

    /* Paper is lighter than the page, so it needs a darker muted tone. */
    --color-text-muted: hsla(var(--hsl-black), 0.55);

    position: relative;
    margin-block: var(--receipt-tooth);
    padding: var(--receipt-padding);
    background-color: var(--color-receipt-bg);
    filter: drop-shadow(0 2px 2px var(--color-shadow-strong));

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: var(--receipt-tooth);
      background-size: calc(var(--receipt-tooth) * 2) 100%;
      background-repeat: repeat-x;
    }

    &::before {
      bottom: 100%;
      background-image: conic-gradient(from 135deg at top, var(--color-receipt-bg) 90deg, transparent 0);
    }

    &::after {
      top: 100%;
      background-image: conic-gradient(from -45deg at bottom, var(--color-receipt-bg) 90deg, transparent 0);
    }
  }

  /* Money rows read like the bottom of a receipt: no rules, one above the total. */
  .table.receipt__totals {
    tr {
      border-bottom: none;
    }

    th, td {
      padding-block: 0.25rem;
    }
  }

  .receipt__total {
    border-top: 1px dashed var(--color-line);

    th, td {
      padding-top: 0.5rem;
    }
  }

  /* A small slip in monospace, tilted a little and overlapping the next one,
     as if dropped on the table. Its fine teeth are cut out of the paper, so
     its soft shadow follows them and falls on the slip it lies on. */
  .receipt--slip {
    --receipt-padding: 1rem 0.875rem;
    --receipt-tooth: 0.375rem;

    isolation: isolate;
    margin-block: 0 -0.625rem;
    background: none;
    color: hsla(var(--hsl-black), 0.9);
    font: 0.8125rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.45));
    rotate: -1.25deg;

    :nth-child(3n + 2) > & { rotate: 1deg; translate: -0.125rem 0; }
    :nth-child(3n + 3) > & { rotate: -0.5deg; translate: 0.125rem 0; }

    &::before {
      inset: 0;
      z-index: -1;
      height: auto;
      background: var(--color-receipt-bg);
      mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--receipt-tooth) 51% repeat-x,
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--receipt-tooth) 51% repeat-x;
    }

    &::after { content: none; }

    figcaption {
      font-size: 0.6875rem;
      letter-spacing: 0.04em;
      color: var(--color-text-muted);
    }
  }

  .receipt__text {
    margin-block: 0.5rem;
    padding-block: 0.5rem;
    border-block: 1px dashed hsla(var(--hsl-black), 0.3);
    font-size: 0.875rem;
  }

  /* A tiny slip, at the size of the text around it, like in a picture. */
  /* Each line of the slip on one line, wider than its column when the count
     needs it. */
  .receipt--small {
    --receipt-padding: 0.4375rem 0.4375rem 0.625rem;

    width: max-content;
    min-width: 100%;
    margin-block: 0;
    font-size: inherit;
    white-space: nowrap;
    filter: drop-shadow(0 1px 3px var(--color-shadow-strong));
  }
}
.ring {
  --percentage: 0;
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-ring-success-border) calc(var(--percentage) * 1%),
    var(--color-ring-border) 0
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring::before {
  content: "";
  position: absolute;
  inset: 0.25rem;
  border-radius: 50%;
  background: var(--color-ring-bg);
}

.ring > span {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 90%;
}
@layer modules {
  .section {
    padding: 2rem 0;
    @media(min-width: 48em) {
      padding: 4rem 0;
    }
  }

  .section__title {
    font-weight: 800;
    font-size: 150%;
    @media(min-width: 48em) {
      font-size: 175%;
      text-align: center;
    }
  }

  .section__intro {
    font-size: 115%;
    @media(min-width: 48em) {
      text-align: center;
    }
  }

  .section--black {
    background: hsl(var(--hsl-base-900));
    color: hsl(var(--hsl-white));
  }

  .section--contrast {
    background: hsl(var(--hsl-base-100));
  }

  .section__box {
    border-radius: var(--radius-small);
    background-color: hsla(var(--hsl-black), 50%);
    backdrop-filter: blur(0.4rem);
    padding: 2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.50);
  }

  .section--image {
    background-size: cover;
    background-position: 50% 50%;
  }

  .section__split {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    @media(min-width: 48em) {
      gap: 2rem;
      grid-template-columns: 1fr 1fr;
      align-items: center;
    }
    @media(min-width: 60em) {
      gap: 3rem;
    }
  }

  .section__text {
    @media(min-width: 48em) {
      padding: 2rem 0;
    }
  }

  .section__photo {
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius-small);
    order: -1;
    @media(min-width: 48em) {
      order: 0;
      height: 100%;
    }
  }
}
@layer modules {
  .select {
    margin-bottom: 1rem;
    background: var(--color-input-bg);
    outline: 1px solid var(--color-input-border);
    border-radius: var(--radius-small);
    border: 0px solid transparent;
    font-family: inherit;
    font-size: inherit;
    color: var(--color-input-color);
    line-height: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1ch center;
    background-size: 1.5ch;
    text-overflow: ellipsis;
    padding: 0.75rem 2.5ch 0.75rem 1ch;
  }

  .select--small {
    padding: 0.25rem 2.5ch 0.25rem 1ch;
  }

  /* Remove default arrow in IE10+ */
  .select::-ms-expand {
    display: none;
  }

  .select--full {
    display: block;
    width: 100%;
  }

  /* Fix for iOS styling */
  @supports (-webkit-touch-callout: none) {
    .select {
      padding-right: 3rem;
      background-size: 1.2em;
    }
  }
}
@layer modules {
  /* A row that opens a settings page: icon, title with hint, chevron. */
  .settings-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
    color: inherit;
    text-decoration: none;

    & + & {
      border-block-start: 1px dashed var(--color-line);
    }

    &:hover .settings-link__title {
      text-decoration: underline;
    }
  }

  .settings-link__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-small);
    background: hsl(var(--hsl-base-100));

    img {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }

  .settings-link__text {
    flex: 1;
  }

  .settings-link__title {
    display: block;
    font-weight: 600;
  }

  .settings-link__hint {
    display: block;
    font-size: 85%;
    color: hsla(var(--hsl-black), 0.65);
  }

  .settings-link__chevron {
    flex-shrink: 0;
    rotate: -90deg;
    opacity: 0.5;
  }
}
@layer modules {
  .sheet {
    --sheet-padding: 1rem;
    @media (min-width: 40em) { --sheet-padding: 2rem; }
    @media (min-width: 60em) { --sheet-padding: 3rem; }

    --sheet-border: 1px solid var(--color-sheet-border);

    background-color: var(--color-sheet-bg);
    box-shadow: 0 2px 2px 0 var(--color-shadow-strong);
    border-top: var(--sheet-border);
    border-bottom: var(--sheet-border);
    padding: var(--sheet-padding);

    @media (min-width: 30em) {
      border-left: var(--sheet-border);
      border-right: var(--sheet-border);
      border-radius: var(--radius-small);
    }
  }

  .sheet--error {
    border-color: var(--color-sheet-error-border);
  }

  .sheet__bottom {
    margin-left: calc(var(--sheet-padding) * -1);
    margin-right: calc(var(--sheet-padding) * -1);
    margin-bottom: calc(var(--sheet-padding) * -1);
    border-radius: 0 0 var(--radius-small) var(--radius-small);
    border-top: 1px solid var(--color-sheet-border);
  }
}
@layer modules {
  .skeleton {
    position: relative;
    overflow: hidden;
    opacity: 0.3;
  }
  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, hsla(var(--hsl-base-200), 0.6), transparent);
    animation: shimmer 1.5s ease-in-out infinite;
  }
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }
}
@layer modules {
  .sparkline {
    vertical-align: middle;
    color: var(--color-text-muted);
  }

  .sparkline polyline {
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
@layer modules {
  /* A special day in its own colour, the way a store page is in the store's:
     a tint to stand on, a soft tone for details, the full colour for its date,
     and a deep shade for text and its button. Its page takes the store theme in
     this colour; in the menu, among the store's colour, it is this card. */
  .special-day, .button--special {
    --special-tint: color-mix(in srgb, var(--special-color) 10%, hsl(var(--hsl-base-50)));
    --special-soft: color-mix(in srgb, var(--special-color) 25%, hsl(var(--hsl-base-50)));
    --special-deep: color-mix(in oklab, var(--special-color), hsl(var(--hsl-black)) 50%);
  }

  .special-day {
    --color-button-primary-bg: var(--special-deep);
    --color-button-primary-border: var(--special-deep);
    --color-button-primary-color: hsl(var(--hsl-white));

    overflow: clip;
    border-radius: var(--radius-large);
    background: var(--special-tint);
    box-shadow: var(--shadow-raised);
  }

  /* Its dishes in up to three photos: one fills it, two side by side, three
     with the first one large. Without photos, a band in its colour. */
  .special-day__photos {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
    height: 12.5rem;
    background: linear-gradient(135deg, var(--special-color), var(--special-deep));

    &:not(:has(img)) { height: 7.5rem; }

    &:has(> img:nth-child(3)) {
      grid-auto-flow: row;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: repeat(2, minmax(0, 1fr));

      > img:first-child { grid-row: span 2; }
    }

    > img {
      width: 100%;
      height: 100%;
      min-height: 0;
      object-fit: cover;
    }
  }

  .special-day__label {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-medium);
    background: var(--special-color);
    color: var(--on-special-color);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Like a tear-off calendar, on the edge of the photos. */
  .special-day__date {
    position: absolute;
    left: 1rem;
    bottom: -1.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3.75rem;
    padding-block: 0.4375rem 0.5rem;
    border-radius: var(--radius-medium);
    background: var(--special-color);
    color: var(--on-special-color);
    box-shadow: 0 0 0 3px var(--special-tint), 0 6px 14px var(--color-shadow-strong);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .special-day__day {
    font-size: 1.625rem;
    font-weight: 800;
  }

  .special-day__body {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 2.25rem 1rem 1rem;
  }

  .special-day__name {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--special-deep);
  }

  .special-day__meta {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--special-deep) 80%, transparent);
  }

  .special-day__dishes {
    --color-pill-bg: var(--special-soft);
    --color-pill-color: var(--special-deep);

    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  /* Before its menu is ready: an invitation to follow the store. */
  .special-day__soon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border-radius: var(--radius-large);
    background: var(--special-soft);
    color: var(--special-deep);
    font-size: 0.875rem;
  }

  /* On its own page the special day is the header: photos edge to edge, then
     its name and what to know before ordering. */
  .special-day--page {
    position: relative;
    border-radius: 0;
    box-shadow: none;

    .special-day__photos { height: 14.5rem; }
    .special-day__body { padding-bottom: 0.5rem; }
  }

  .special-day__back {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
  }

  /* Among the store's links on its profile: a tile with its date. */
  .button--special.button--tile {
    background: var(--special-tint);
    color: var(--special-deep);
  }

  .button__tile--date {
    gap: 0;
    align-content: center;
    background: var(--special-color);
    color: var(--on-special-color);
    font-size: 1.0625rem;
    line-height: 1;

    small {
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
    }
  }

  .special-day__instructions {
    padding: 0.875rem 1rem;
    border-radius: var(--radius-large);
    background: var(--special-soft);
    color: var(--special-deep);
    font-size: 0.875rem;
  }
}
@layer modules {
  .spinner,
  .spinner:after {
    box-sizing: border-box;
  }
  .spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
  }
  .spinner:after {
    content: " ";
    display: block;
    width: 1;
    height: calc(1em - 4px);
    margin: 4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-color: currentColor transparent currentColor transparent;
    animation: spinner 1.2s linear infinite;
  }


  @keyframes spinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
@layer modules {
  /* Rating stars (application/_stars): soft gold from light to amber with a warm
     edge and a glint, over grey ones that take the page's tone. */
  .stars {
    --stars-off: hsla(var(--hsl-black), 0.12);
    --stars-off-edge: hsla(var(--hsl-black), 0.16);

    display: inline-block;
    flex-shrink: 0;
    overflow: visible;
    vertical-align: middle;

    use {
      stroke-width: 1.4;
      stroke-linejoin: round;
    }
  }

  .stars__off {
    fill: var(--stars-off);
    stroke: var(--stars-off-edge);
  }

  .stars__on {
    stroke: hsl(var(--hsl-base-700));
  }

  .stars__light { stop-color: hsl(var(--hsl-base-500)); }
  .stars__deep  { stop-color: var(--color-star); }

  .stars__glint {
    fill: hsl(var(--hsl-white));
    opacity: 0.75;
  }
}
@layer modules {
  .status {
    padding: 0.25em 0.5em;
    border-radius: var(--radius-small);
    border-width: 1px;
    border-style: solid;
    text-transform: uppercase;
    font-feature-settings: "tnum";
    font-weight: 600;
    font-size: 0.70rem;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--color-status-bg);
    color: var(--color-status-color);
  }

  .status--icon {
    display: inline-flex;
    padding: 0.25em;
    border-radius: 50%;
    font-size: 0.85rem;

    svg {
      display: block;
      width: 1em;
      height: 1em;
    }
  }

  .status--success {
    background: var(--color-status-success-bg);
    color: var(--color-status-success-color);
  }

  .status--error {
    background: var(--color-status-error-bg);
    color: var(--color-status-error-color);
  }

  .status--warning {
    background: var(--color-status-warning-bg);
    color: var(--color-status-warning-color);
  }
}
@layer modules {
  /* The top of a store's pages: three photos, then the chef's profile on a
     panel in the store's tint that slides over them. --compact above the
     store's other pages, --slim over the checkout. */
  .store-header {
    --store-header-surface: var(--color-store-50);
  }

  /* Edge to edge across the column. Between the photos the page shows as a thin
     divider; without photos the strip is a band in the store's colour. */
  .store-header__strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    min-height: 7.5rem;
    background: var(--store-header-surface);

    &:not(:has(.store-header__photo)) {
      background: var(--color-store-500);
    }
  }

  .store-header__photo {
    width: 100%;
    height: 9.5rem;
    object-fit: cover;

    @media (min-width: 40em) { height: 12rem; }
  }

  .store-header__share {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }

  /* Its text lines up with the menu below: 1rem from the column's edge. */
  .store-header__panel {
    position: relative;
    margin-top: -1.25rem;
    padding: 0 1rem 0.5rem;
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    background: var(--store-header-surface);
  }

  /* Taps through to who the chef is, without looking like a button. */
  .store-header__portrait {
    display: flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* The store's image half over the photos. It stands on the surface it
     overlaps, so it keeps an edge in that surface's colour. */
  .store-header__image {
    --store-image-edge: var(--store-header-surface);

    box-sizing: content-box;
    margin-top: calc(var(--store-image-size) / -2);
    border: 4px solid var(--store-header-surface);
  }

  .store-header__image.store-image--portrait {
    background: var(--store-header-surface);
  }

  /* On its own line under the name, so the menu by email button beside the
     photo never covers it on a phone. */
  .store-header__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.375rem;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .store-header__score {
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .store-header__name {
    margin-top: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .store-header__line {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
  }

  /* Beside the first line of a line that may wrap. */
  .store-header__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15em;

    svg { display: block; width: 100%; height: 100%; }
  }

  .store-header__summary {
    margin-top: 0.75rem;
    line-height: 1.45;
  }

  .store-header--compact {
    .store-header__strip { min-height: 4.5rem; }
    .store-header__photo { height: 5.5rem; }
    .store-header__image { --store-image-size: 4rem; }
    .store-header__name { margin-top: 0.5rem; font-size: 1.25rem; }
  }

  /* Over the checkout: one white bar with a stripe of the store's colour, and
     who you order from as the way back. Its button's padding lines the store
     up with the page below. */
  .store-header--slim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0.5rem;
    border-top: 4px solid var(--color-store-500);
    background: var(--color-surface);
    box-shadow: 0 1px 0 var(--color-line);

    /* With the button's padding as tall as a tap. */
    .store-image { --store-image-size: 2.25rem; }
  }
}
@layer modules {
  /* Who a store is, wherever it shows: the chef in a ring of the store's colour
     with the logo as a badge; or the logo alone on white; or the store's
     initials in its colour. Where it shows sets its size; the ring, corners
     and initials follow. */
  .store-image {
    --store-image-size: 5.75rem;

    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: var(--store-image-size);
    height: var(--store-image-size);
    border-radius: calc(var(--store-image-size) * 0.18);
    background: hsl(var(--hsl-white));
  }

  .store-image--portrait {
    border-radius: 50%;
  }

  .store-image__portrait {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 max(2px, calc(var(--store-image-size) * 0.035)) var(--color-store-500);
  }

  .store-image__badge {
    position: absolute;
    right: -0.5rem;
    bottom: -0.25rem;
    width: calc(var(--store-image-size) * 0.41);
    height: calc(var(--store-image-size) * 0.41);
    padding: 0.125rem;
    border: 2px solid var(--store-image-edge, hsl(var(--hsl-white)));
    border-radius: var(--radius-medium);
    background: hsl(var(--hsl-white));
    object-fit: contain;
    box-shadow: 0 1px 3px var(--color-shadow-strong);
  }

  .store-image--logo {
    padding: calc(var(--store-image-size) * 0.05);
    object-fit: contain;
  }

  .store-image--initials {
    background: var(--color-primary-bg);
    color: var(--color-primary-color);
    font-size: calc(var(--store-image-size) * 0.36);
    font-weight: 800;
  }
}
@layer modules {
  /* Like a Basecamp to-do: the line is a background, so it can draw from left to right. */
  .strikethrough {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 60%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .strikethrough--animated {
    animation: strikethrough 150ms ease-out;

    @media (prefers-reduced-motion: reduce) { animation: none; }
  }
}

@keyframes strikethrough {
  from { background-size: 0 2px; }
}
@layer modules {
  .table {
    width: 100%;
    th {
      font-weight: 600;
      text-align: inherit;
    }
    th, td {
      padding: 0.5rem 0;
    }
    tr {
      border-bottom: 1px dashed var(--color-line);
      th + td {
        padding-left: 0.5rem;
      }
    }
  }

  .table--fixed {
    table-layout: fixed;
  }

  .table--padded {
    th, td {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
  }

  .table__td--min {
    width: 0px;
  }
}
@layer modules {
  /* A strip of yellow kitchen tape with a word shouted on it in marker, like the
     website's "JA!": crepe paper, torn off by hand and stuck on a little askew. */
  .tape {
    --tear: 0.22em;

    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.25em calc(0.45em + var(--tear));
    font-size: 75%;
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    /* The marker font sits differently from the text around it, so on the baseline
       the strip would hang low; centered, it sits evenly on the line. */
    vertical-align: middle;
    color: var(--color-tape-color);
    background-color: var(--color-tape-bg);
    /* Crepe paper crinkles across the width of the tape; two spacings keep it from looking ruled. */
    background-image:
      repeating-linear-gradient(to right, rgb(0 0 0 / 0.022) 0 1px, transparent 1px 2.6px),
      repeating-linear-gradient(to right, rgb(255 255 255 / 0.14) 0 1px, transparent 1px 3.9px);
    /* Paper tape is a little translucent, so it takes on the surface it is stuck to. */
    mix-blend-mode: multiply;
    /* Uneven teeth, different at each end, as tape tears by hand. */
    clip-path: polygon(
      0.05em 0, 100% 0,
      calc(100% - 0.55 * var(--tear)) 14%, 100% 27%, calc(100% - var(--tear)) 43%,
      calc(100% - 0.2 * var(--tear)) 57%, calc(100% - 0.8 * var(--tear)) 72%, 100% 86%,
      calc(100% - 0.45 * var(--tear)) 100%,
      0 100%,
      calc(0.7 * var(--tear)) 88%, calc(0.1 * var(--tear)) 74%, var(--tear) 60%,
      calc(0.3 * var(--tear)) 45%, calc(0.85 * var(--tear)) 31%, 0 17%
    );
    /* A slight tilt that changes from row to row, as if each strip was stuck on separately. */
    rotate: var(--row-tilt, -0.5deg);
  }

  li:nth-child(2n) .tape { --row-tilt: 0.6deg; }
  li:nth-child(3n) .tape { --row-tilt: -0.9deg; }
  li:nth-child(5n) .tape { --row-tilt: 0.3deg; }
}
@layer modules {
  .titlebar {
    position: relative;
    margin-bottom: 2rem;
  }
  .titlebar__title {
    font-size: 150%;
    text-align: center;
  }
  .titlebar__description {
    margin-top: 0.5rem;
    font-size: 115%;
    text-align: center;
  }
  /* A title with a small control next to it, such as a menu button. */
  .titlebar__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .titlebar__actions {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    @media (min-width: 40em) {
      position: absolute;
      top: -1.5rem;
      right: -1.5rem;
      margin-top: 0rem;
    }
  }
  .titlebar__search {
    border-radius: 2em;
    margin: 0;
    font-size: 80%;
    padding: 0.5rem 1rem;
    outline: 1px solid var(--color-input-border);
    &:focus {
      background: white;
    }
  }
}
@layer modules {
  .toolbar {
    background-color: var(--color-toolbar-bg);
    color: var(--color-toolbar-color);
    padding: 1rem;
    a, .link {
      color: inherit;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
@layer modules {
  .topnav {
    position: relative;
    z-index: 100;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
  }

  .topnav--home {
    background: hsl(var(--hsl-base-50));
    justify-content: space-between;
  }

  .topnav__logo {
    display: flex;
    align-items: center;
    gap: 0.25em;
    line-height: 1;
    sup {
      font-size: clamp(0.75rem, 2vw, 1rem);
      white-space: nowrap;
    }
  }

  .topnav__left, .topnav__right {
    display: flex;
    gap: 0.5rem;
  }

  .topnav__right {
    flex-shrink: 0;
  }

  .topnav__menu {
    display: none;
  }

  .topnav__menu--open {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    padding: 4rem;
    z-index: 99;
    background: hsla(var(--hsl-base-50), 0.95);
    backdrop-filter: blur(0.5em);
    flex-direction: column;
    a {
      font-size: 150%;
      font-weight: 600;
      padding: 1rem;
      text-align: center;
      color: var(--color-link-color);
      text-decoration: underline;
      text-underline-offset: 0.0925em;
      &:hover {
        color: hsl(var(--hsl-success-600));
      }
    }
  }

  .topnav__toggle {
    width: 1.2rem;
    height: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    span {
      display: block;
      width: 100%;
      height: 2px;
      background: #333;
      transition: all 0.2s ease;
    }
  }

  /* Hamburger to cross animation */
  .topnav__toggle--open {
    span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    span:nth-child(2) {
      opacity: 0;
    }
    span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
  }
}
@layer modules {
  .usps {
    font-weight: 500;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    li {
      display: flex;
      align-items: flex-start;
      gap: .5rem;
    }
    li:before {
      margin-top: .05em;
      content: '';
      background: url(/assets/icons/check-white-73456349327790c99d99bdb9d4d448292f829e122141b60902e20888935cbdf8.svg) center center/0.55em auto no-repeat var(--color-description-list-check-success);
      height: 1.25em;
      width: 1.25em;
      border-radius: 100%;
      font-size: 1em;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
  }

  .usps--split {
    @media(min-width: 32em) {
      grid-template-columns: 1fr 1fr;
    }
  }
}
@layer modules {
  .video-trigger {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 30rem;
    padding: 0.375rem;
    color: var(--color-video-trigger-color);
    background: var(--color-video-trigger-bg);
    outline: 1px solid var(--color-video-trigger-border);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1.5rem var(--color-shadow-strong);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: left;
  }

  .video-trigger__thumbnail {
    position: relative;
    flex: 0 0 8rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-video-trigger-bg);
    border-radius: 0.625rem;
  }

  .video-trigger__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .video-trigger__thumbnail svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    transform: translate(-50%, -50%);
  }

  .video-player {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    padding: 0;
    border: 0;
    background: var(--color-video-player-bg);
  }

  .video-player::backdrop {
    background: hsla(var(--hsl-black), 0.85);
  }

  .video-player video {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .video-player__close {
    position: fixed;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.75rem;
    border: 0;
    border-radius: 50%;
    color: white;
    background: hsla(var(--hsl-black), 0.65);
    cursor: pointer;
  }

  .video-player__close svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  @media (min-width: 48em) {
    .video-player {
      width: min(32rem, calc((100dvh - 4rem) * 1280 / 2276), calc(100vw - 4rem));
      height: auto;
      aspect-ratio: 1280 / 2276;
      margin: auto;
      border-radius: 1rem;
      box-shadow: 0 1.5rem 3rem hsla(var(--hsl-black), 0.4);
      overflow: hidden;
    }

    .video-player__close {
      position: absolute;
    }
  }
}
@layer modules {
  /* Seven days in a row only when every day has room for its buttons. */
  .week-hours {
    container-type: inline-size;
  }

  .week-hours__days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;

    @container (min-width: 34rem) { grid-template-columns: repeat(7, 1fr); }
  }

  .week-hours__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid hsl(var(--hsl-success-200));
    border-radius: var(--radius-small);
    background: hsl(var(--hsl-success-100));
    padding: 0.5rem 0.25rem;
  }

  .week-hours__day--off {
    border: 1px dashed hsl(var(--hsl-base-300));
    background: transparent;
    color: var(--color-text-muted);
  }

  .week-hours__label {
    font-size: 70%;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .week-hours__value {
    font-size: 125%;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .week-hours__stepper {
    display: flex;
    gap: 0.25rem;
  }

  .week-hours__step {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 1px solid var(--color-button-border);
    border-radius: 50%;
    background: var(--color-card-bg);
    color: var(--color-text);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;

    &:focus-visible {
      outline: 2px solid hsl(var(--hsl-base-900));
      outline-offset: 2px;
    }

    &:hover:not(:disabled) {
      border-color: hsl(var(--hsl-success-600));
      color: hsl(var(--hsl-success-700));
    }

    &:disabled {
      opacity: 0.3;
      cursor: default;
    }
  }
}
@layer utilities {

  .fw-300 { font-weight: 300; }
  .fw-400 { font-weight: 400; }
  .fw-500 { font-weight: 500; }
  .fw-600 { font-weight: 600; }
  .fw-700 { font-weight: 700; }
  .fw-800 { font-weight: 800; }
  .fw-900 { font-weight: 900; }

  .fs-150 { font-size: 150%; }
  .fs-125 { font-size: 125%; }
  .fs-200 { font-size: 200%; }
  .fs-250 { font-size: 250%; }
  .fs-300 { font-size: 300%; }
  .fs-100 { font-size: 100%; }
  .fs-90 { font-size: 90%; }
  .fs-80 { font-size: 80%; }
  .fs-70 { font-size: 70%; }
  .fs-60 { font-size: 60%; }
  .italic { font-style: italic; }

  .font-tnum { font-feature-settings: "tnum"; }
  .font-mono { font-family: monospace; }
  .font-permanent { font-family: 'Permanent Marker'; }

  .line-through { text-decoration: line-through; }
  .underline    { text-decoration: underline; }
  .uppercase    { text-transform: uppercase; }

  .bg-base-100 { background-color: hsl(var(--hsl-base-100)); }
  .bg-white { background-color: hsl(var(--hsl-white)); }
  .text-inherit { color: inherit; }
  .text-muted { color: var(--color-text-muted); }
  .text-error { color: var(--color-text-error); }

  .b-0      { border: 0; }
  .b-1      { border-width:        1px; }
  .bb-1     { border-bottom-width: 1px; }
  .bt-1     { border-top-width:    1px; }
  .bl-1     { border-left-width:   1px; }
  .br-1     { border-right-width:  1px; }
  .b-2      { border-width:        2px; }
  .bb-2     { border-bottom-width: 2px; }
  .bt-2     { border-top-width:    2px; }
  .bl-2     { border-left-width:   2px; }
  .br-2     { border-right-width:  2px; }
  .b-3      { border-width:        3px; }
  .bb-3     { border-bottom-width: 3px; }
  .bt-3     { border-top-width:    3px; }
  .bl-3     { border-left-width:   3px; }
  .br-3     { border-right-width:  3px; }

  .b        { border-color: var(--color-line); border-style: solid; }
  .b-dashed { border-style: dashed; }

  .border-radius { border-radius: var(--radius-small); }
  .border-circle { border-radius: 50% }

  .overflow-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: clip;
  }

  .overflow-scroll-centered {
    overflow: auto;
    *:first-child {
      margin-left: auto;
    }
    *:last-child {
      margin-right: auto;
    }
  }

  .line-clamp-2 {
   display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cursor-move    { cursor: move; }
  .cursor-pointer { cursor: pointer; }

  .click-through { pointer-events: none; }

  /* Screen reader only - visually hidden but accessible */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .inset-shadow {
    position: relative;
    overflow: hidden;
    box-shadow:
      inset 0 1rem 1rem -1rem var(--color-shadow-strong),
      inset 0 -1rem 1rem -1rem var(--color-shadow-strong);
  }

  .inset-shadow::before,
  .inset-shadow::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1rem;
    pointer-events: none;
    z-index: 1;
  }

  .inset-shadow::before {
    left: 0;
    background: linear-gradient(to right, var(--color-shadow-strong), transparent);
  }

  .inset-shadow::after {
    right: 0;
    background: linear-gradient(to left, var(--color-shadow-strong), transparent);
  }

  .kbd {
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-muted);
    background: hsl(var(--hsl-base-100));
    border: 1px solid var(--color-line);
    border-radius: 0.25rem;
    padding: 0.2rem 0.375rem;
  }

  .hide-on-touch {
    @media (any-hover: none) {
      display: none;
    }
  }

  .show-on-touch {
    @media (any-hover: hover) {
      display: none;
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *








 */