@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,wght@0,400..700;1,400..700&display=swap');
@import 'tokens.css';

* { box-sizing: border-box; }

/* Every layout rule below sets display, which outranks the UA's [hidden] rule.
   Without this, setting element.hidden does nothing. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-3); line-height: 1.5; }

a { color: inherit; }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

/* The focus ring was paprika red, which measures 2.79 against the dark green
   background -- under the 3:1 a focus indicator needs -- and disappears
   completely when the focused thing is itself a paprika button. Text colour
   flips with the theme and clears 8.7 against the page in both. */
:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* App shell */

.app-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-chrome);
}

.app-header img {
  height: 32px;
}

main {
  flex: 1;
  padding: var(--space-4);
  padding-bottom: calc(var(--nav-height) + var(--space-5));
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}


.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text);
  opacity: 0.75;
}

/* Bottom nav */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: var(--nav-height);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-chrome);
  border-top: 1px solid var(--color-border);
}

.bottom-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  background: none;
  border: none;
  color: var(--color-chrome-text);
  opacity: 0.75;
  font-size: 0.75rem;
  font-family: var(--font-body);
}

.bottom-nav button[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
}

.bottom-nav button svg {
  width: 24px;
  height: 24px;
}

/* Buttons */

/* Deepened fill so white text clears AA at 5.02, with the lighter brand red as
   the rim. Both are needed and neither is enough alone: white on the light red
   only reaches 3.46, while the deepened red only reaches 1.93 against the dark
   green page -- so the button would blend into the background in dark mode.
   The rim measures 3.46 against that page, which is what identifies the button
   as a button. */
.btn-primary {
  background: var(--color-action-strong);
  color: #FFFFFF;
  border: 2px solid var(--color-action-rim);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  min-height: var(--tap-target);
  font-size: 1rem;
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-weight: 600;
  min-height: var(--tap-target);
  font-size: 1rem;
}

.btn-block { width: 100%; }

/* Boot splash */

.boot {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: #2F4A3E;
  color: #FAF3E7;
}

/* Auth */

#auth-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: #2F4A3E;
  min-height: 100vh;
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-logo {
  display: block;
  width: 160px;
  margin: 0 auto var(--space-5);
}

.segmented {
  display: flex;
  background: rgba(250, 243, 231, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  margin-bottom: var(--space-5);
}

.segmented button {
  flex: 1;
  min-height: var(--tap-target);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #FAF3E7;
  font-weight: 600;
  font-size: 1rem;
}

.segmented button[aria-selected="true"] {
  background: #FAF3E7;
  color: #2F4A3E;
}

#auth-form label {
  display: block;
  margin-bottom: var(--space-2);
  color: #FAF3E7;
  font-weight: 500;
}

#auth-form input {
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: #FAF3E7;
  color: #2F4A3E;
  font-size: 1rem;
  font-family: var(--font-body);
}

#auth-form input:focus-visible {
  border-color: var(--color-accent);
  outline: none;
}

.hint {
  opacity: 0.8;
  font-size: 0.875rem;
}

/* Both of these belong to the auth card and nowhere else: the cream is for its
   fixed green background, and the negative margin tucks a hint under the input
   above it. Loose in the app they made hints invisible on a light page and made
   this one land on top of the button it explains. */
#auth-view .hint {
  color: #FAF3E7;
  margin-top: calc(var(--space-2) * -1);
}

.error,
.success {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}

.error {
  background: #FBE4DE;
  color: #8A2A12;
}

.success {
  background: #FAF3E7;
  color: #2F4A3E;
}

/* Auth: forgot-password and recovery states */

.auth-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: #FAF3E7;
  margin: 0 0 var(--space-2);
}

.auth-intro {
  margin: 0 0 var(--space-4);
}

.link-btn {
  display: block;
  width: 100%;
  min-height: var(--tap-target);
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: none;
  border: none;
  color: #FAF3E7;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  text-decoration: underline;
  cursor: pointer;
}

/* Sections */

.section-heading {
  font-size: 1.0625rem;
  margin: var(--space-5) 0 var(--space-3);
}

.section-heading:first-of-type { margin-top: 0; }

/* Chips */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--color-control-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9375rem;
}

.chip.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.chip:disabled { opacity: 0.5; }

/* Photo scan */

/* A label styled as a button: the real file input stays hidden but reachable,
   so the camera opens on tap and on Enter without any script. */
.scan-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#scan-input:focus-visible ~ .scan-button {
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
}

.scan-preview {
  margin: var(--space-3) 0;
}

.scan-preview img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--color-control-border);
}

#scan-result {
  margin-top: var(--space-3);
}

#scan-chips {
  margin-bottom: var(--space-3);
}

/* Tapped away rather than deleted: it stays on screen so a mistake costs one
   more tap, not another photo. */
#scan-chips .chip[aria-pressed="false"] {
  opacity: 0.45;
  text-decoration: line-through;
}

/* Categories */

.category {
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  background: var(--color-surface);
  overflow: hidden;
}

.category summary {
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
}

.category[open] summary {
  border-bottom: 1px solid var(--color-border);
}

.category .chip-row { padding: var(--space-4); }

/* Inventory list */

.inventory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.inventory-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: 0.9375rem;
}

/* 44x44 of reachable area with a 32px circle painted inside it. The negative
   margin keeps the row exactly as tall as it was, so the thumb gets the target
   the spec asks for without the list growing. It measured 32x32 before -- on
   the control you press most often of all. */
.remove-btn {
  width: var(--tap-target);
  height: var(--tap-target);
  margin: calc((var(--tap-target) - 32px) / -2) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 243, 231, 0.2) 16px, transparent 16px);
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
}

/* Free text */

.freetext { margin-top: var(--space-5); }

.freetext label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
}

.freetext-row { display: flex; gap: var(--space-2); }

.freetext-row input {
  flex: 1;
  min-height: var(--tap-target);
  padding: var(--space-3);
  border: 2px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1rem;
  font-family: var(--font-body);
}

/* Account */

.account-email {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.setting-row input[type="checkbox"] {
  width: 44px;
  height: 26px;
  accent-color: var(--color-action);
}

/* Cooking mode -- fullscreen, above everything, nothing on screen but the step
   you are on. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cooking {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--color-base);
  overflow-y: auto;
}

.cooking-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.cooking-count {
  flex: 1;
  margin: 0;
  font-weight: 500;
  opacity: 0.75;
}

.cooking-icon {
  width: var(--tap-target);
  height: var(--tap-target);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

.cooking-icon svg { width: 22px; height: 22px; }

.cooking-icon[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* The whole point of the screen: readable at arm's length with wet hands. */
.cooking-step {
  flex: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.45;
}

.cooking-finish {
  margin-top: var(--space-5);
}

.cooking-finish h2 {
  font-size: 1.125rem;
}

.cook-used {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.cook-used label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  border-bottom: 1px solid var(--color-border);
}

.cook-used input {
  width: 22px;
  height: 22px;
  accent-color: var(--color-action);
}

.cooking-nav {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.cooking-nav button {
  flex: 1;
  min-height: 56px;
  font-size: 1.0625rem;
}

.cooking-nav button:disabled { opacity: 0.4; }

/* Recipe detail */

.detail {
  padding: var(--space-4);
  padding-bottom: calc(var(--nav-height) + var(--space-6));
}

.back-btn {
  min-height: var(--tap-target);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-3) 0 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
}

.back-btn::before {
  content: '←';
  margin-right: var(--space-2);
}

/* The card's small label is not enough on its own: the spec wants this to be
   unmissable when you open a recipe nobody has ever cooked. */
.ai-banner {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-action);
  background: var(--color-surface);
  font-size: 0.9375rem;
  font-weight: 500;
}

.detail-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-border);
  margin-bottom: var(--space-4);
}

.detail-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  line-height: 1;
  background: var(--color-base);
  border: 1px solid var(--color-control-border);
}

/* The zero-top-margin rule for a first heading is meant for the tab panels; in
   the detail these headings follow content and need their spacing back. */
.detail .section-heading:first-of-type { margin-top: var(--space-5); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.tag {
  padding: 2px var(--space-2);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
}

.portions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

/* Not the auth screen's .segmented: those colours are fixed to cream-on-green
   and this control sits on the page background. */
.portion-switch {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.portion-switch button {
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

.portion-switch button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.detail-ingredients {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.detail-ingredients li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.detail-amount {
  flex: none;
  opacity: 0.75;
}

.missing-flag {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #2F4A3E;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Sits under the ingredient it belongs to, so it reads as an aside rather than
   as another thing to buy. */
.swaps-row {
  display: block;
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.swaps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-3);
  border-left: 2px solid var(--color-border);
  font-size: 0.875rem;
}

.swaps li {
  margin-top: var(--space-2);
  line-height: 1.45;
  opacity: 0.85;
}

.swaps li.is-in-stock { opacity: 1; }

.swap-flag {
  display: inline-block;
  white-space: nowrap;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: 0.6875rem;
  font-weight: 500;
}

.detail-steps {
  margin: 0;
  padding-left: var(--space-5);
}

.detail-steps li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-1);
  line-height: 1.55;
}

.nutrition {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 0 0 var(--space-3);
}

.nutrition dt,
.nutrition dd {
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.nutrition dd {
  text-align: right;
  font-weight: 600;
}

/* A fixed two-column grid rather than a wrapping row: with labels of very
   different lengths, wrapping produced one full-width button, then another,
   then two side by side. */
.detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.detail-actions button {
  min-width: 0;
  padding: var(--space-2);
  font-size: 0.9375rem;
}

#fav-toggle[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

.swap-use {
  padding: 0;
  font-size: 0.8125rem;
  min-height: 0;
}

.shopping-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.shopping-list label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-target);
  border-bottom: 1px solid var(--color-border);
}

.shopping-list input {
  width: 22px;
  height: 22px;
  accent-color: var(--color-action);
}

/* Stats */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.stat {
  padding: var(--space-3);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.stat dt {
  font-size: 0.75rem;
  opacity: 0.75;
  margin-bottom: var(--space-1);
}

.stat dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
}

.cooked-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.cooked-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.cooked-list time {
  flex: none;
  opacity: 0.75;
  font-size: 0.875rem;
}

/* Discover -- pantry mirror */

.pantry { margin-bottom: var(--space-4); }

.pantry-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0;
  font-weight: 500;
}

/* Collapsed: one line that scrolls sideways. Open: wraps to the full list. */
.pantry-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.pantry-chips::-webkit-scrollbar { display: none; }

.pantry-chips.is-open {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Read-only, so no hover or pressed state -- the row itself is the tap target. */
.chip-static {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
}

.pantry-toggle {
  display: block;
  margin-top: var(--space-1);
  padding-left: 0;
  text-align: left;
}

.link-inline {
  min-height: var(--tap-target);
  padding: 0 var(--space-2);
  background: none;
  border: none;
  /* Paprika red is the only brand colour that fails AA on the dark green
     background, so the underline carries the affordance instead. */
  color: currentColor;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: underline;
}

/* Discover */

.filters {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.filter {
  flex: 1;
  min-width: 0;
}

.filter label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 0.875rem;
  font-weight: 500;
}

.filter select {
  width: 100%;
  min-height: var(--tap-target);
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-control-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
}

.discover-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.discover-status {
  margin: 0 0 var(--space-4);
}

.recipe-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.recipe-card {
  display: flex;
  width: 100%;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  color: inherit;
  font-family: var(--font-body);
  text-align: left;
}

.recipe-image {
  width: 88px;
  height: 88px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-border);
}

.recipe-body {
  min-width: 0;
}

.recipe-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.recipe-meta {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Stands in for the photo a generated recipe has none of. */
.recipe-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  line-height: 1;
  background: var(--color-base);
  border: 1px solid var(--color-control-border);
}

/* Herb green outline rather than a filled badge: it has to be readable at a
   glance without competing with the butter-yellow "bijna klaar" badge. */
.badge-ai {
  display: inline-block;
  margin: var(--space-2) 0 0;
  padding: 2px var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
}

/* Butter yellow, so a near miss reads differently at a glance from a card in
   "klaar om te maken". */
.badge-missing {
  display: inline-block;
  margin: var(--space-2) 0 var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #2F4A3E;
  font-size: 0.8125rem;
  font-weight: 600;
}

.recipe-missing {
  margin: 0;
  font-size: 0.875rem;
}

/* Toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-height) + var(--space-4));
  transform: translateX(-50%);
  z-index: 10;
  max-width: calc(100% - var(--space-6));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: 0.9375rem;
  text-align: center;
}