/* Jyvery 2026 UI
 * One visual system for client, partner and rider surfaces. The palette keeps
 * the existing orange/violet brand while the density adapts to each job. */

:root {
  --violet: #5B40DD;
  --violet-dark: #402ab3;
  --violet-soft: #eeeafd;
  --orange: #FBA004;
  --orange-dark: #c96f00;
  --orange-soft: #fff0ce;
  --ink: #211d2d;
  --ink-strong: #17131f;
  --ink-soft: #686373;
  --paper: #fffcf7;
  --paper-deep: #f7f1e8;
  --surface: #ffffff;
  --line: #e9e1d6;
  --line-strong: #d2c7b8;
  --success: #147a52;
  --success-soft: #e4f6ee;
  --warning: #9a4d00;
  --warning-soft: #fff0dc;
  --error: #b4232c;
  --error-soft: #fff0f1;
  --info: #334bc3;
  --info-soft: #eef1ff;
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgb(47 32 18 / 5%);
  --shadow: 0 18px 48px rgb(47 32 18 / 8%);
  --shadow-lift: 0 22px 58px rgb(47 32 18 / 12%);
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-ticket: ui-monospace, SFMono-Regular, "SF Mono", "Roboto Mono", Menlo, monospace;
  --header-height: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  isolation: isolate;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-glow {
  position: absolute;
  width: clamp(260px, 30vw, 520px);
  aspect-ratio: 1;
  opacity: 0.28;
  filter: blur(1px);
  will-change: transform;
}
.ambient-glow--orange {
  top: 8%;
  right: -18%;
  border-radius: 42% 58% 68% 32% / 46% 36% 64% 54%;
  background: var(--orange-soft);
  animation: ambient-drift-a 20s ease-in-out infinite alternate;
}
.ambient-glow--violet {
  bottom: -22%;
  left: -16%;
  border-radius: 61% 39% 43% 57% / 38% 62% 38% 62%;
  background: var(--violet-soft);
  animation: ambient-drift-b 24s ease-in-out infinite alternate;
}
.ambient-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.32;
}
.ambient-route path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 1 6;
  animation: route-flow 18s linear infinite;
}

@keyframes ambient-drift-a {
  to { transform: translate3d(-9vw, 7vh, 0) rotate(8deg); }
}
@keyframes ambient-drift-b {
  to { transform: translate3d(10vw, -6vh, 0) rotate(-10deg); }
}
@keyframes route-flow {
  to { stroke-dashoffset: -100; }
}

img { max-width: 100%; }
button, input, select, textarea { touch-action: manipulation; }
button, summary, select { cursor: pointer; }
[hidden] { display: none !important; }

a { color: var(--violet-dark); }
a:hover { color: var(--violet); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-xs);
  background: var(--ink-strong);
  color: #fff;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* Header and navigation */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-height);
  border-bottom: 1px solid rgb(233 225 214 / 92%);
  background: rgb(255 252 247 / 92%);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.site-header__inner {
  width: min(1360px, 100%);
  min-height: var(--header-height);
  margin: 0 auto;
  padding: 0.65rem clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  text-decoration: none;
  color: var(--ink);
}
.brand-link:hover { color: var(--ink); }
.wordmark { width: auto; height: 34px; display: block; }

.site-header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.site-header nav::-webkit-scrollbar { display: none; }

.site-header nav a {
  min-height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 620;
  white-space: nowrap;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.site-header nav a:hover { background: var(--paper-deep); color: var(--violet-dark); }
.site-header nav a[aria-current="page"] { color: var(--violet-dark); box-shadow: inset 0 -2px var(--violet); }
.site-header nav a.nav-back { color: var(--ink-soft); }
.site-header nav a.nav-back:hover { color: var(--ink); }
.site-header nav a.nav-action { color: var(--ink-soft); }
.site-header nav a.nav-action:hover { background: transparent; color: var(--error); }
.site-header nav a.btn {
  margin-left: 0.35rem;
  padding-inline: 1rem;
  border-color: var(--violet);
  border-radius: var(--radius-xs);
  background: var(--violet);
  color: #fff;
  box-shadow: none;
  font-weight: 700;
}
.site-header nav a.btn:hover { border-color: var(--violet-dark); background: var(--violet-dark); color: #fff; }

/* Main frame and typography */

.main {
  width: min(1280px, 100%);
  flex: 1;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) 5rem;
}
.surface-sell .main { width: min(1440px, 100%); }
.surface-rider .main { width: min(960px, 100%); }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}
h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
  font-weight: 760;
}
h2 {
  margin: 2.25rem 0 0.85rem;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 730;
}
h3 { font-size: 1.05rem; }
p { max-width: 72ch; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.875rem; }
.eyebrow {
  margin: 0 0 0.6rem;
  color: var(--violet-dark);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer__inner {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 1.4rem clamp(1rem, 3vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}
.site-footer__inner span:first-child { color: var(--ink); font-weight: 720; }

/* Layout primitives */

.row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.card {
  margin-bottom: 1rem;
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}
.card:has(.card-row) { overflow: hidden; }

.section-head {
  margin: 3.25rem 0 1.15rem;
  scroll-margin-top: calc(var(--header-height) + 1rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.section-head h2, .section-head .eyebrow { margin-top: 0; }
.section-head h2 { margin-bottom: 0; }

.page-head {
  margin-bottom: 0.9rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.page-head h1 { margin: 0; }
.page-head p:not(.eyebrow) { margin: 0.55rem 0 0; color: var(--ink-soft); }
.page-head > :last-child:not(div) { flex: none; }

.accent-rule {
  width: 64px;
  height: 5px;
  border-radius: 2px;
  background: var(--orange);
}

/* Buttons */

.btn {
  min-height: 48px;
  padding: 0.7rem 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--violet);
  border-radius: var(--radius-xs);
  background: var(--violet);
  color: #fff;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 680;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease,
    box-shadow 180ms ease, transform 160ms ease;
}
.btn:hover { background: var(--violet-dark); border-color: var(--violet-dark); color: #fff; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.46; cursor: not-allowed; box-shadow: none; transform: none; }
.btn.secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); box-shadow: none; }
.btn.secondary:hover { background: var(--paper); border-color: var(--violet); color: var(--violet-dark); }
.btn.danger { background: var(--surface); border-color: #edc3c6; color: var(--error); box-shadow: none; }
.btn.danger:hover, .btn.danger.solid { background: var(--error); border-color: var(--error); color: #fff; }
.btn.danger.solid:hover { background: #8f1720; border-color: #8f1720; }
.btn.small { min-height: 44px; padding: 0.55rem 0.95rem; font-size: 0.85rem; }
.btn-accent { background: var(--orange); border-color: var(--orange); color: var(--ink-strong); box-shadow: none; }
.btn-accent:hover { background: #ffb11f; border-color: #ffb11f; color: var(--ink-strong); }
.btn-accent::after { content: "\2192"; font-size: 1.05em; transition: transform 180ms ease; }
.btn-accent:hover::after { transform: translateX(3px); }

.add {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--violet);
  font: inherit;
  font-size: 1.45rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 150ms ease;
}
.add:hover { background: var(--violet); border-color: var(--violet); color: #fff; }
.add:active { transform: scale(0.94); }
.add.wide { width: auto; padding: 0 1rem; border-radius: var(--radius-xs); font-size: 0.82rem; }
.add.done { background: var(--success); border-color: var(--success); color: #fff; font-size: 1.1rem; }

/* Forms and dialogs */

label { display: block; margin-bottom: 0.38rem; color: var(--ink); font-size: 0.88rem; font-weight: 750; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  /* After `font`, never before: the shorthand resets line-height, so the body's
     1.55 came back and pushed an input to 49.8px while a select stayed at the
     48px floor. Two controls in one row, two heights, and the row's baseline
     visibly off. This is the line that makes every control the same size. */
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
textarea { min-height: 96px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #ac9d8c; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--violet); box-shadow: 0 0 0 4px rgb(91 64 221 / 12%); }
input[type="checkbox"], input[type="radio"] { min-height: auto; accent-color: var(--violet); }
input:disabled, select:disabled, textarea:disabled { background: var(--paper-deep); color: var(--ink-soft); cursor: not-allowed; }
.field { margin-bottom: 1.05rem; }
.field .small { display: block; margin-top: 0.3rem; }

dialog {
  width: min(520px, calc(100% - 2rem));
  max-height: min(86dvh, 760px);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
dialog[open] { animation: dialog-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
dialog::backdrop { background: rgb(20 15 27 / 60%); backdrop-filter: blur(4px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Feedback, status and loading */

.notice {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.notice.error { background: var(--error-soft); border-color: #edbec2; color: #7d1820; }
.notice.info { background: var(--info-soft); border-color: #cbd3ff; color: #293998; }
.empty {
  padding: clamp(2.2rem, 7vw, 4rem) 1.25rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 58%);
  color: var(--ink-soft);
  text-align: center;
}
.empty strong { color: var(--ink); font-size: 1.05rem; }
.empty .btn { margin-top: 0.35rem; }

.badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: max-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.badge { padding: 0.28rem 0.65rem; font-size: 0.76rem; font-weight: 800; }
.tag { padding: 0.22rem 0.6rem; font-size: 0.74rem; font-weight: 700; }
a.tag:hover { border-color: var(--violet); color: var(--violet-dark); }
.tag.open, .badge.ready, .badge.picked_up, .badge.delivered { background: var(--success-soft); border-color: #9ddbc6; color: #0e6543; }
.badge.created { background: var(--violet-soft); border-color: #cfc6fb; color: var(--violet-dark); }
.badge.accepted, .badge.preparing, .badge.assigned, .badge.in_transit { background: var(--warning-soft); border-color: #f3c896; color: #864000; }
.badge.failed, .badge.canceled { background: var(--error-soft); border-color: #edbec2; color: var(--error); }
.tag.rating { background: var(--orange-soft); border-color: #f1ca80; color: #704000; }
.tag.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, #eee5da 25%, #fff6e9 38%, #eee5da 62%);
  background-size: 400% 100%;
  animation: shimmer 1.35s ease infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Customer home */

.hero {
  position: relative;
  margin-bottom: 2rem;
  padding: clamp(1.6rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--orange-soft);
}
.hero h1 { margin-bottom: 0.75rem; }
.hero p { color: #57505d; }

.hero-home {
  min-height: 610px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
  align-items: stretch;
  border: 0;
  background: #241b18;
  box-shadow: 0 24px 70px rgb(47 32 18 / 10%);
  animation: hero-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 5vw, 4.75rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-copy .eyebrow { color: #ffc45a; }
.hero-home h1 {
  max-width: none;
  color: #fff;
  font-size: clamp(3rem, 4.4vw, 4.25rem);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.hero-home h1 span { display: block; }
.hero-home h1 span + span { margin-top: 0.08em; }
.hero-home .hero-lead { max-width: 50ch; margin: 0; color: #e7ddd5; font-size: clamp(1rem, 1.7vw, 1.15rem); }
.hero-actions { margin-top: 1.6rem; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.hero-proof { color: #cfc1b7; font-size: 0.88rem; }
.hero-proof strong { color: #fff; }
.hero-visual { position: relative; min-width: 0; min-height: 100%; margin: 0; overflow: hidden; }
.hero-visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset 38px 0 50px -28px #241b18; pointer-events: none; }
.hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 610px;
  display: block;
  object-fit: cover;
  object-position: 54% center;
  transform: scale(1.01);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-home:hover .hero-visual img { transform: scale(1.035); }

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.benefit-strip {
  margin-top: 0;
  padding: 0.9rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.benefit-strip p { margin: 0; padding: 0.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
.benefit-strip p + p { border-left: 1px solid var(--line); }
.benefit-strip strong { color: var(--ink); font-size: 0.9rem; font-weight: 680; }
.benefit-strip span { color: var(--ink-soft); font-size: 0.78rem; }

.surface-client #list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.shop {
  min-width: 0;
  min-height: 106px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.shop:hover { border-color: var(--violet); color: var(--ink); transform: translateY(-1px); }
.shop:active { transform: translateY(0); }
.shop-avatar {
  width: 68px;
  height: 68px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--orange);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 760;
  letter-spacing: -0.04em;
  box-shadow: inset 0 -10px 22px rgb(159 84 0 / 10%);
}
.shop-name { margin: 0; display: flex; align-items: center; gap: 0.45rem; color: var(--ink-strong); font-size: 1.02rem; font-weight: 800; }
.shop-meta { margin: 0.15rem 0 0; color: var(--ink-soft); font-size: 0.84rem; }
.open-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgb(20 122 82 / 12%); }

/* Restaurant, cart and checkout */

.shop-head {
  position: relative;
  min-height: 220px;
  padding: clamp(1.5rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #241b18;
  color: #fff;
  box-shadow: var(--shadow);
}
.shop-head::after { content: "JYVERY"; position: absolute; right: -0.05em; top: -0.18em; color: rgb(251 160 4 / 13%); font-size: clamp(5rem, 16vw, 10rem); font-weight: 900; letter-spacing: -0.08em; }
.shop-head h1, .shop-head p, .shop-head .row { position: relative; z-index: 1; }
.shop-head h1 { margin: 0 0 0.4rem; color: #fff; font-size: clamp(2rem, 6vw, 3.5rem); }
.shop-head p { margin: 0; color: #ded2ca; }

.catnav {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  margin: 0.75rem 0 0;
  padding: 0.8rem 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: rgb(255 250 242 / 94%);
  scrollbar-width: none;
  backdrop-filter: blur(12px);
}
.catnav::-webkit-scrollbar { display: none; }
.catnav a { min-height: 42px; padding: 0.55rem 0.95rem; flex: none; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 0.84rem; font-weight: 750; }
.catnav a:hover { border-color: var(--violet); color: var(--violet-dark); }
.catnav a[aria-current="true"] { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }
.menu-category { margin: 2rem 0 0.4rem; scroll-margin-top: calc(var(--header-height) + 76px); color: var(--ink-soft); font-size: 0.74rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }

.dish { min-height: 92px; padding: 1rem 0; display: flex; align-items: center; gap: 0.9rem; border-bottom: 1px solid var(--line); }
.dish:last-child { border-bottom: 0; }
.dish-body { flex: 1; min-width: 0; }
.dish-name { margin: 0; color: var(--ink-strong); font-weight: 800; }
.dish-desc { margin: 0.15rem 0 0; display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: 0.86rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dish-price { margin: 0.35rem 0 0; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish-thumb { width: 82px; height: 82px; flex: none; border-radius: var(--radius-sm); object-fit: cover; background: var(--paper-deep); }
.dish.sold-out { opacity: 0.52; }
.dish.sold-out .dish-thumb { filter: grayscale(1); }

.choice { min-height: 58px; margin-bottom: 0.6rem; padding: 0.8rem; display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-weight: 500; cursor: pointer; transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease; }
.choice:last-child { margin-bottom: 0; }
.choice:hover { border-color: #b7aa9a; }
.choice:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); box-shadow: 0 0 0 2px rgb(91 64 221 / 9%); }
.choice input { width: 18px; flex: none; margin-top: 0.25rem; accent-color: var(--violet); }
.choice > span { min-width: 0; flex: 1; }
.choice strong { font-weight: 800; }

.cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgb(255 250 242 / 95%); box-shadow: 0 -12px 32px rgb(47 32 18 / 12%); transform: translateY(120%); transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1); backdrop-filter: blur(12px); }
.cart-bar.visible { transform: translateY(0); }
.cart-bar .btn { width: min(1028px, 100%); margin: 0 auto; display: flex; justify-content: space-between; }
.cart-bar .count { padding: 0.12rem 0.6rem; border-radius: 999px; background: rgb(255 255 255 / 20%); font-variant-numeric: tabular-nums; }
body.has-cart-bar .main { padding-bottom: 8rem; }

.stepper { display: inline-flex; align-items: center; gap: 0.25rem; }
.stepper button { width: 44px; height: 44px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--violet); font: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer; }
.stepper button:hover { border-color: var(--violet); background: var(--violet-soft); }
.stepper output { min-width: 2ch; text-align: center; font-weight: 850; font-variant-numeric: tabular-nums; }

/* Auth screens */

.auth-layout { min-height: min(700px, calc(100dvh - var(--header-height) - 150px)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); gap: clamp(1.25rem, 5vw, 4rem); align-items: center; }
.auth-intro { position: relative; min-height: 520px; padding: clamp(2rem, 6vw, 4.5rem); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--radius-lg); background: #241b18; color: #fff; box-shadow: var(--shadow); }
.auth-intro::before { content: ""; position: absolute; top: -70px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: var(--orange); }
.auth-intro::after { content: ""; position: absolute; top: 35px; right: 55px; width: 90px; height: 90px; border: 18px solid var(--violet); border-radius: 50%; }
.auth-intro > * { position: relative; z-index: 1; }
.auth-intro .eyebrow { color: #ffc45a; }
.auth-intro h1 { max-width: 12ch; color: #fff; }
.auth-intro > p:not(.eyebrow) { margin: 0; color: #ddcfc5; }
.auth-benefits { margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.65rem; list-style: none; color: #fff; font-size: 0.9rem; font-weight: 700; }
.auth-benefits li { display: flex; align-items: center; gap: 0.6rem; }
.auth-benefits li::before { content: "✓"; width: 25px; height: 25px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--ink-strong); font-size: 0.75rem; font-weight: 900; }
.auth-card { width: min(460px, 100%); margin: 0 auto; padding: clamp(1.35rem, 4vw, 2rem); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.auth-card h2 { margin: 0 0 1.5rem; font-size: clamp(1.65rem, 4vw, 2.2rem); }
.auth-submit { width: 100%; }
.auth-note { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.auth-rider .auth-intro { background: var(--violet-dark); }
.auth-rider .auth-intro::before { background: var(--orange); }
.auth-partner .auth-intro::after { border-radius: 12px; transform: rotate(12deg); }

/* Partner workspace */

.surface-sell { background: #faf7f2; }
.surface-sell .main > .row:first-child,
.surface-rider .main > h1:first-child {
  margin-bottom: 0.25rem;
}
.surface-sell .accent-rule, .surface-rider .accent-rule { margin-bottom: 2rem !important; }

.columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; padding: 0.25rem 0 1.25rem; }
.column { min-height: 420px; padding: 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-deep); scroll-snap-align: start; }
.column h2 { margin: 0 0 0.8rem; padding: 0.2rem 0.3rem; display: flex; justify-content: space-between; font-size: 0.96rem; }
.column-count { color: var(--ink-soft); font-weight: 650; }
.column .card { margin: 0; background: var(--surface); }
.column .empty { padding: 2rem 0.5rem; border: 0; background: transparent; }

/* Ticket, status timeline and ratings */

.ticket { position: relative; padding: 1.7rem 1.4rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.ticket::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: var(--orange); }
.ticket-label { margin: 0; color: var(--ink-soft); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.ticket-number { margin: 0.4rem 0 0.8rem; color: var(--ink-strong); font-family: var(--font-ticket); font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ticket-foot { margin: 1.4rem -1.4rem 0; padding: 1.15rem 1.4rem 0; border-top: 1px dashed var(--line-strong); color: var(--ink-soft); font-size: 0.86rem; }

.timeline { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 1.25rem 2rem; color: var(--ink-soft); }
.timeline li::before { content: ""; position: absolute; top: 0.35rem; left: 0; width: 14px; height: 14px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.timeline li:not(:last-child)::after { content: ""; position: absolute; top: 1.3rem; bottom: 0.05rem; left: 6px; width: 2px; background: var(--line); }
.timeline li.done, .timeline li.current { color: var(--ink); }
.timeline li.done::before { border-color: var(--violet); background: var(--violet); }
.timeline li.done:not(:last-child)::after { background: var(--violet); }
.timeline li.current::before { border-color: var(--orange); background: var(--orange); animation: pulse 1.8s ease-in-out infinite; }
.timeline .step-name { font-weight: 800; }
.timeline .step-time { color: var(--ink-soft); font-size: 0.8rem; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(251 160 4 / 40%); } 50% { box-shadow: 0 0 0 8px rgb(251 160 4 / 0%); } }

.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.1rem; }
.stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stars label { margin: 0; color: var(--line-strong); font-size: 1.8rem; line-height: 1; cursor: pointer; transition: color 130ms ease, transform 130ms ease; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: var(--orange); }
.stars label:hover { transform: scale(1.08); }
.stars input:focus-visible + label { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 5px; }
.stars-read { color: var(--orange-dark); font-size: 1.05rem; letter-spacing: 0.07em; }

/* Responsive */

@media (min-width: 1200px) {
  .columns { grid-auto-flow: initial; grid-auto-columns: initial; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
}

@media (max-width: 820px) {
  :root { --header-height: 112px; }
  .site-header__inner { min-height: var(--header-height); padding: 0.5rem 1rem; flex-wrap: wrap; gap: 0.2rem 0.75rem; }
  .site-header:has(nav:empty),
  .site-header:has(nav:empty) .site-header__inner { min-height: 64px; }
  .brand-link { min-height: 48px; }
  .wordmark { height: 32px; }
  .site-header nav { width: 100%; margin-left: 0; justify-content: flex-start; padding-bottom: 0.3rem; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .site-header nav a { min-height: 44px; padding: 0.45rem 0.75rem; font-size: 0.82rem; }
  .main { padding-top: 1.5rem; }
  .hero-home { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 2.3rem 1.35rem 2rem; }
  .hero-home h1 { font-size: clamp(2.35rem, 11vw, 3.7rem); }
  .hero-visual { min-height: 270px; }
  .hero-visual::after { box-shadow: inset 0 32px 40px -26px #241b18; }
  .hero-visual img { min-height: 270px; max-height: 380px; }
  .benefit-strip { margin-top: 1rem; grid-template-columns: 1fr; }
  .benefit-strip p { padding: 0.65rem 0.4rem; }
  .benefit-strip p + p { border-top: 1px solid var(--line); border-left: 0; }
  .auth-layout { min-height: auto; grid-template-columns: 1fr; }
  .auth-intro { min-height: 360px; padding: 2rem 1.4rem; }
  .auth-intro::before { width: 190px; height: 190px; }
  .auth-intro::after { top: 18px; right: 38px; width: 65px; height: 65px; border-width: 13px; }
  .page-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 640px) {
  .main { padding-inline: 0.9rem; padding-bottom: 4rem; }
  .site-footer__inner { flex-direction: column; gap: 0.2rem; }
  .surface-client #list { grid-template-columns: 1fr; }
  .hero-home { margin-inline: 0; border-radius: 14px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-proof { text-align: center; }
  .hero-visual figcaption { display: none; }
  .section-head { margin-top: 2.5rem; }
  .card-row { align-items: flex-start; }
  .shop { min-height: 100px; }
  .shop-avatar { width: 60px; height: 60px; border-radius: 9px; }
  .dish { align-items: flex-start; }
  .dish-thumb { width: 70px; height: 70px; }
  .columns { grid-auto-columns: minmax(82vw, 1fr); }
  dialog { width: calc(100% - 1rem); padding: 1.15rem; border-radius: 12px; }
}

@media (max-width: 420px) {
  .wordmark { height: 32px; }
  .hero-copy { padding-inline: 1.1rem; }
  .card { border-radius: var(--radius); }
  .row > .field { min-width: 100%; width: 100% !important; }
  .surface-sell .main > .row:first-child { align-items: flex-start; }
}

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

@media (forced-colors: active) {
  .btn, .badge, .tag, .card, .shop, .choice { border: 1px solid ButtonText; }
  .open-dot { outline: 2px solid CanvasText; }
}

/* --- Joining Jyvery (P0, D52) ------------------------------------------
   The photograph is the page, not a panel on it. It runs the full width of
   the viewport with square corners and stops on a clean horizontal edge; the
   form card is the single object floating over that edge, half on the picture
   and half on the paper below. Two rounded cards side by side was what made
   the form read as pasted in. */

.join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
  /* Cancel .main's top padding so the picture meets the header. */
  margin-top: calc(-1 * clamp(1.75rem, 4vw, 3.5rem));
}

/* Full-bleed, and in normal flow rather than absolutely positioned: the words
   live inside it, so its height is whatever they need. Absolute positioning
   gave it a fixed height, and on a narrow screen the lead and the figures
   spilled out the bottom — white type on paper, invisible. */
.join-stage {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  left: calc(50% - 50vw);
  width: 100vw;
  min-height: clamp(26rem, 54vh, 34rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #241b18;
  animation: hero-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.join-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 46%;
}
/* Warm, not grey: the wash is the theme's own brown, so the photograph stays
   inside the palette instead of being tinted toward neutral. */
.join-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* A second wash from the top. The side gradient alone left the eyebrow at
       4.65:1 — over the floor, but only just, and only for this photograph.
       This one backs the type wherever the picture is bright up there, so the
       page survives being given a real restaurant's photo later. */
    linear-gradient(180deg,
      rgb(30 22 19 / 55%) 0%,
      rgb(30 22 19 / 12%) 42%,
      rgb(30 22 19 / 0%) 70%),
    linear-gradient(101deg,
      rgb(30 22 19 / 94%) 0%,
      rgb(30 22 19 / 88%) 32%,
      rgb(30 22 19 / 52%) 58%,
      rgb(30 22 19 / 24%) 100%);
}

/* The picture is full-bleed but its words are not: this re-establishes the
   page's own column and gutters inside it. */
.join-words {
  position: relative;
  z-index: 1;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 4rem) clamp(1rem, 3vw, 2rem);
  color: #fff;
}
.join-words > * { max-width: 30rem; }
.join-words .eyebrow { color: #ffc45a; }
.join-words h1 {
  /* A real width, not `none`. The <br> tags happen to keep the glyphs on the
     left, but the box was running the full 1216px — across the bright half of
     the photograph and under the form card. One reworded line, one longer
     word, one translation, and the title would have followed it there. */
  max-width: 30rem;
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: clamp(2rem, 3.1vw, 2.9rem);
  font-weight: 760;
  line-height: 1.03;
  letter-spacing: -0.045em;
}
.join-lead {
  margin: 0;
  max-width: 34ch;
  color: #e7ddd5;
  font-size: 1rem;
}

/* The signature: the same figure twice. On a commission platform these two
   numbers differ, and every restaurateur knows by how much. */
.join-arith {
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
}
.join-arith li {
  position: relative;
  padding-right: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.join-arith li + li::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: rgb(255 255 255 / 22%);
}
.join-arith li:last-child { padding-right: 0; }
.join-arith span {
  color: #cfc1b7;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.join-arith strong {
  color: #ffc45a;
  font-size: 1.28rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Beside the form, filling what was a thousand pixels of empty paper under
   the photograph. */
.join-why {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 30rem;
  padding: clamp(2rem, 5vh, 3.5rem) 0 0;
  display: grid;
  gap: 1.5rem;
}
.join-why h2 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.join-why h3 {
  margin: 0 0 0.35rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--violet);
  font-size: 1rem;
  font-weight: 700;
}
.join-why p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }

/* Pulled up onto the picture. A negative margin rather than absolute
   positioning, so the card still occupies its row and the page below it knows
   where it ends. */
.join-card {
  grid-column: 2;
  grid-row: 2;
  z-index: 1;
  margin: calc(-1 * clamp(20rem, 42vh, 27rem)) 0 0;
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  box-shadow: var(--shadow-lift);
}

.join-legend {
  margin: 1.9rem 0 1.1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.join-legend:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.join-legend svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--violet);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.9rem; }
/* The controls line up even when one label wraps and the other does not: each
   cell is a column and the control is pushed to its bottom. Shortening a label
   fixes today's case and not tomorrow's — a narrower screen wraps anything. */
.field-row > .field { min-width: 0; display: flex; flex-direction: column; }
.field-row > .field > label { margin-bottom: auto; }
.field-row > .field > :is(input, select, .slug-field) { margin-top: 0.35rem; }

fieldset.field { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
fieldset.field > legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 650;
  color: var(--ink);
}
.join-modes { display: grid; gap: 0.4rem; }
.join-modes .choice { padding: 0.6rem 0.75rem; }

/* The public address, shown as the URL it becomes rather than as a bare word. */
.slug-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: var(--surface);
  overflow: hidden;
}
.slug-field:focus-within {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgb(91 64 221 / 12%);
}
.slug-prefix {
  display: flex;
  align-items: center;
  padding: 0 0.15rem 0 0.7rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  white-space: nowrap;
}
.slug-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-left: 0;
}
.slug-field input:focus { box-shadow: none; }

.join-submit { width: 100%; margin-top: 0.4rem; }
.join-legal {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* The steps. A fieldset carries no styling of its own here — it exists to
   group what is shown and hidden together. */
.join-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.join-steps {
  margin: 0 0 1.2rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.join-steps span { color: var(--violet-dark); }
.join-actions { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; }
.join-actions .join-submit { margin-top: 0; }

@media (max-width: 900px) {
  /* No room to float anything: the picture is a banner, the form follows it. */
  .join { grid-template-columns: minmax(0, 1fr); }
  .join-stage { min-height: clamp(17rem, 34vh, 22rem); align-items: flex-end; }
  .join-words { padding-top: clamp(5rem, 14vh, 8rem); }
  .join-words > * { max-width: none; }
  /* The form first. In the source the reasons come before it, which is right
     for the two-column layout and wrong on a phone — nobody should scroll past
     an argument to reach the thing they came to fill in. */
  .join-card { grid-column: 1; grid-row: auto; order: 1; margin-top: 1.25rem; }
  .join-why {
    grid-column: 1;
    grid-row: auto;
    order: 2;
    max-width: none;
    padding-top: 2.5rem;
  }
  .join-arith { gap: 0 1rem; }
  .join-arith li { padding-right: 1rem; }
  .join-arith li + li::before { left: -1rem; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .slug-prefix { font-size: 0.82rem; }
  .join-arith strong { font-size: 1.1rem; }
}

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

/* The legal pages (D56) — long prose, read once, on any surface. */
.site-footer__legal { display: flex; gap: 1rem; }
.site-footer__legal a { color: var(--ink-soft); text-decoration: none; }
.site-footer__legal a:hover { color: var(--violet-dark); text-decoration: underline; }

.legal { max-width: 46rem; margin: 0 auto; }
.legal h1 { margin-bottom: 0.6rem; }
.legal > p:first-of-type { color: var(--ink-soft); }
.legal h2 {
  margin: 2.4rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 1.2rem;
}
.legal h3 { margin: 1.6rem 0 0.5rem; font-size: 1rem; }
.legal p, .legal li { color: var(--ink); font-size: 0.96rem; line-height: 1.65; }
.legal ul, .legal ol { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.legal th, .legal td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal th { font-weight: 700; }
/* Everything the owner still has to supply, impossible to miss while reading. */
.legal mark {
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-xs);
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 650;
}
@media (max-width: 560px) {
  .site-footer__inner { flex-direction: column; gap: 0.6rem; }
}
.legal blockquote {
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: var(--paper-deep);
}
.legal blockquote p { margin: 0; }

/* A dish photograph in the catalogue editor (D59). */
.dish-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-deep);
  overflow: hidden;
  cursor: pointer;
}
.dish-photo:hover { border-color: var(--violet); }
.dish-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish-photo__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

/* The back office (D60). Denser than the other surfaces on purpose: it is a
   working list, read by one person who knows it by heart, not a shop window. */
.surface-admin { background: #f6f4fb; }
.surface-admin .main { width: min(1440px, 100%); }
.auth-admin .auth-intro { background: var(--ink-strong); }

.admin-tally { display: flex; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.admin-tally div {
  flex: 1 1 8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.admin-tally strong { display: block; font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; }
.admin-tally span { color: var(--ink-soft); font-size: 0.84rem; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.admin-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table td strong { display: block; }
.admin-table td .small { display: block; }
.admin-actions { text-align: right; white-space: nowrap; }
.admin-actions .btn + .btn { margin-left: 0.4rem; }

@media (max-width: 760px) {
  .admin-table thead { display: none; }
  .admin-table tr { display: block; border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
  .admin-table td { display: block; border: 0; padding: 0.2rem 1rem; }
  .admin-actions { text-align: left; padding-top: 0.6rem !important; }
}

/* The back-office desk (D61): filters above a list, panels on a dossier. */
.admin-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 1rem;
  align-items: end;
  margin-bottom: 1.2rem;
}
.admin-filters .field { margin-bottom: 0.9rem; }
.admin-filters .row { padding-bottom: 0.9rem; }
.admin-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.admin-panels h2:first-child { margin-top: 0; }
.admin-panels h2 { font-size: 1rem; margin-top: 1.4rem; }