/* ==========================================================================
   stellik — single stylesheet.

   Brand tokens live in exactly one place: the :root block below. Nothing
   downstream hardcodes a hex value, so per-tenant theming later is a matter of
   emitting an overriding :root block from the tenants table, not a rewrite.
   ========================================================================== */

:root {
  /* --- Napoli Pizza brand ------------------------------------------------ */
  --color-primary: #5D7441;      /* olive green, from the logo */
  --color-text: #000000;
  --color-bg: #FFFFFF;
  --color-bg-subtle: #FAFAFA;
  --color-text-muted: #6B6B6B;

  /* --- Derived / structural --------------------------------------------- */
  --color-border: #E5E5E5;
  --color-primary-ink: #FFFFFF;  /* text on a primary-filled surface */
  --color-danger: #A33A2B;

  /* --- Scale ------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 8px;
  --tap-min: 64px;               /* minimum touch height, tablet use */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
}

/* The super-admin panel is internal tooling, not tenant-facing: neutral. */
[data-theme="admin"] {
  --color-primary: #1F1F1F;
  --color-bg-subtle: #F5F5F5;
  --color-primary-ink: #FFFFFF;
}

/* --- Reset ---------------------------------------------------------------- */

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

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
}

body { font-size: 16px; line-height: 1.5; }

/* One fluid step per level rather than a media query per level. The floor is
   the phone size and the ceiling the laptop one, so nothing is ever smaller
   than it was or larger than the layout was designed around. */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(22px, 1.2rem + 1vw, 28px); line-height: 1.2; }
h2 { font-size: clamp(17px, 1rem + 0.4vw, 20px); line-height: 1.3; }
h3 { font-size: 16px; line-height: 1.35; }

p { margin: 0; }

a { color: var(--color-primary); }

img { max-width: 100%; display: block; }

/* --- Layout --------------------------------------------------------------- */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: 0 var(--space-5);
  min-height: 72px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.topbar__brand {
  font-size: 18px;
  font-weight: 600;
  margin-right: auto;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Both needed for the row to survive a narrow screen: min-width lets the nav
     shrink below its content (flex items refuse to by default), and the scroll
     gives the overflow somewhere to go other than off the side of the page. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__nav > * { flex: none; }

/* Who is holding the tablet. Outside the nav so it survives the nav scrolling
   away, and quiet enough not to compete with the section links. */
.topbar__who {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  padding: 6px var(--space-3);
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  max-width: 180px;
}
.topbar__who:hover { background: var(--color-bg-subtle); }
.who__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.who__name {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Below a laptop the section links take their own full-width row and scroll
   if they must, while the brand, the operator and Sign out stay on the row
   above where they are always reachable. Sign out previously sat at the end of
   the one scrolling strip, which put it off the right-hand edge on every
   tablet and phone -- behind a horizontal swipe nobody thinks to try.

   Safe to change the header's height here: the order screen only depends on a
   72px bar at 1024px and up, where this does not apply. */
@media (max-width: 1023px) {
  .topbar {
    padding-top: var(--space-2);
    padding-bottom: 0;
    row-gap: 0;
  }
  .topbar__nav {
    order: 3;
    flex: 1 0 100%;
    padding-bottom: var(--space-2);
    /* The links run under the right-hand edge when they overflow; the mask
       fades them out so it reads as "more this way" instead of as a clipped
       word. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .brand__tagline { display: none; }
}

.navlink {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 500;
}

.navlink:hover { background: var(--color-bg-subtle); }

.navlink[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-bg-subtle);
}

.main { flex: 1; padding: var(--space-6) var(--space-5); }

.container { max-width: 1200px; margin: 0 auto; }
.container--narrow { max-width: 440px; margin: 0 auto; }
/* Focused task screens -- a form or a picker -- that still need room to
   breathe. 440px is the width of a login card and crushes anything with
   more than one column in it. */
.container--mid { max-width: 760px; margin: 0 auto; }

.stack > * + * { margin-top: var(--space-4); }
.stack--tight > * + * { margin-top: var(--space-2); }
.stack--loose > * + * { margin-top: var(--space-5); }

/* --- Typography helpers ---------------------------------------------------- */

.muted { color: var(--color-text-muted); }
.small { font-size: 14px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { background: var(--color-bg-subtle); }

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

.btn--primary:hover { filter: brightness(0.94); background: var(--color-primary); }

.btn--block { width: 100%; }

.btn--small { min-height: 44px; padding: 0 var(--space-4); font-weight: 500; }

.btn--danger { color: var(--color-danger); border-color: var(--color-border); }

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

/* --- Forms ----------------------------------------------------------------- */

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 14px;
  font-weight: 600;
}

.field__hint { margin-top: var(--space-2); font-size: 13px; color: var(--color-text-muted); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
}

.textarea { min-height: 96px; padding-top: var(--space-3); resize: vertical; }

.input:focus, .textarea:focus, .select:focus,
.btn:focus-visible, .navlink:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* --- Panels and cards ------------------------------------------------------- */

.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: var(--space-5);
}

/* --- Alerts ----------------------------------------------------------------- */

.alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  font-size: 14px;
}

.alert--ok { border-left-color: var(--color-primary); }

/* --- Login ------------------------------------------------------------------ */

.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--color-bg-subtle);
}

.login__card {
  width: 100%;
  max-width: 420px;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.login__brand { text-align: center; margin-bottom: var(--space-6); }
.login__brand h1 { font-size: 26px; }
.login__brand p { margin-top: var(--space-1); color: var(--color-text-muted); font-size: 14px; }

/* --- Full-page status messages (shop not found, suspended) ------------------- */

.status-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  text-align: center;
  background: var(--color-bg-subtle);
}

.status-page__inner { max-width: 420px; }
.status-page h1 { font-size: 22px; margin-bottom: var(--space-3); }

/* --- Tables (admin) ---------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: 15px; }

/* Wide tables scroll inside their own box. Squeezing five columns into a
   narrow panel turns every heading into a three-line stack and makes the
   numbers unreadable, which defeats the point of a comparison table. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .table { min-width: 520px; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.table th, .table td {
  text-align: left;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.table th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.table tr:last-child td { border-bottom: none; }

/* --- Badges ------------------------------------------------------------------ */

.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.badge--active { color: var(--color-primary); border-color: currentColor; }
.badge--suspended { color: var(--color-danger); border-color: currentColor; }

/* ==========================================================================
   Brand mark
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
  text-decoration: none;
  color: var(--color-text);
  min-width: 0;         /* or a long shop name pushes the nav off the screen */
  min-height: 44px;     /* a tap target, not just a wordmark */
}

.brand__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.brand__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  /* Truncate rather than overflow. A shop called something long is a layout
     problem on every screen otherwise. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__signout { margin: 0; }

.navlink--button {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.login__logo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-3);
}

/* ==========================================================================
   Shared page furniture
   ========================================================================== */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.empty {
  padding: var(--space-7) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}

.empty h2 { margin-bottom: var(--space-2); }
.empty .btn { margin-top: var(--space-5); }

.button-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.button-row form { margin: 0; }

.inline-form { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.inline-form .input {
  flex: 1;
  /* Wide enough to type into, never wider than what contains it. */
  min-width: min(220px, 100%);
}

.btn--tall { min-height: 72px; font-size: 17px; }

.btn--danger-solid {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #FFF;
}

.btn--danger-solid:hover { background: var(--color-danger); filter: brightness(0.94); }

/* ==========================================================================
   Order screen
   ========================================================================== */

.main--order { padding: 0; }

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: start;
  min-height: calc(100vh - 72px);
}

.order-menu { padding: var(--space-5); min-width: 0; }

/* --- Category tabs --- */

.tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  min-height: 56px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.tab--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-ink);
}

/* --- Menu item cards --- */

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}

.item-grid[hidden] { display: none; }

.card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  min-height: var(--tap-min);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, transform 120ms ease;
}

.card:hover { border-color: var(--color-primary); }

/* A press should feel acknowledged instantly, before the server responds. */
.card:active { transform: scale(0.985); }

.card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border);
}

.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__media-empty {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg,
      var(--color-bg-subtle) 0 10px,
      #F2F2F2 10px 20px);
}

.card__flag {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-2);
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--color-text-muted);
}

.card__body { display: block; padding: var(--space-4); }

.card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.card__name { font-weight: 600; font-size: 15px; }
.card__price { font-weight: 700; font-size: 15px; white-space: nowrap; }

.card__desc {
  display: block;
  margin-top: var(--space-1);
  font-size: 13px;
  color: var(--color-text-muted);
}

.card--off { cursor: not-allowed; opacity: 0.5; }
.card--off:hover { border-color: var(--color-border); }
.card--off:active { transform: none; }

/* ==========================================================================
   Cart
   ========================================================================== */

.order-cart {
  position: sticky;
  top: 0;
  align-self: stretch;
  border-left: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  min-height: calc(100vh - 72px);
}

.cart {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 72px);
  position: sticky;
  top: 0;
}

.cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.cart__head h2 { font-size: 16px; }

.cart__clear {
  border: 0;
  background: none;
  padding: var(--space-2);
  font: inherit;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline;
}

.cart__empty { flex: 1; display: grid; place-items: center; padding: var(--space-6); text-align: center; }

.cart__lines {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-line { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }

.cart-line__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.cart-line__name { font-weight: 600; font-size: 15px; }
.cart-line__total { font-weight: 700; white-space: nowrap; }

.cart-line__bottom {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.cart-line__unit { margin-right: auto; }

.cart-line__remove {
  border: 0;
  background: none;
  padding: var(--space-2);
  font: inherit;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline;
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  overflow: hidden;
}

.stepper__btn {
  width: 52px;
  height: 52px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stepper__btn:hover { background: var(--color-bg-subtle); }

.stepper__qty {
  min-width: 40px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--color-border);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart__foot {
  padding: var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
}

.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  font-size: 15px;
}

.cart__total strong { font-size: 24px; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Menu editor
   ========================================================================== */

.category { padding: 0; overflow: hidden; }

.category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  flex-wrap: wrap;
}

.category__rename { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 240px; }
.category__actions { display: flex; gap: var(--space-2); }
.category__empty { padding: var(--space-5); }

.input--ghost {
  border-color: transparent;
  background: transparent;
  font-weight: 600;
  font-size: 17px;
  padding-inline: var(--space-3);
  min-height: 52px;
}

.input--ghost:hover { border-color: var(--color-border); background: var(--color-bg); }

.item-list { list-style: none; margin: 0; padding: 0; }

.item-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.item-row:last-child { border-bottom: 0; }
.item-row--off { opacity: 0.55; }

.item-row__thumb { flex: none; width: 64px; height: 64px; }

.item-row__thumb img,
.thumb-placeholder {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  object-fit: cover;
  display: block;
  background: var(--color-bg-subtle);
}

.item-row__body { flex: 1; min-width: 0; }
.item-row__title { font-weight: 600; }
.item-row__desc { max-width: 46ch; }
.item-row__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-row__toggle { flex: none; }

/* --- Availability toggle --- */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.toggle__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.toggle--on { color: var(--color-primary); border-color: var(--color-primary); }

/* --- Item form --- */

.input--file { padding: var(--space-3); }

.checkline { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.checkline input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--color-primary); }
.checkline span span { display: block; }

.checkline--boxed {
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-height: var(--tap-min);
}

.photo-current { margin-bottom: var(--space-3); }

.photo-current img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   Super admin: one-time credential handoff
   ========================================================================== */

.credential {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.credential:last-child { border-bottom: 0; }

.credential__label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }

.credential__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  user-select: all;                 /* one tap selects the whole value */
  word-break: break-all;
}

.table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ==========================================================================
   Menu badges — vegetarian leaf and chilli heat, as on the printed menu
   ========================================================================== */

.badge-icon {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: var(--space-2);
  color: var(--color-primary);
  vertical-align: -2px;
}

.badge-icon svg { display: block; }

/* ==========================================================================
   Items priced by size
   ========================================================================== */

.card--sized { cursor: default; }
.card--sized:hover { border-color: var(--color-border); }

.card--sized .card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card--sized .card__name { display: block; font-weight: 600; font-size: 15px; }
.card--sized .card__desc { margin-top: var(--space-1); }

.sizes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
}

.size {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tap-min);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font: inherit;
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.size:hover { border-color: var(--color-primary); background: var(--color-bg-subtle); }
.size:active { transform: scale(0.97); }
.size:disabled { cursor: not-allowed; opacity: 0.5; }

.size__name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.size__price {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Size chip on a cart line */
.cart-line__size {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  vertical-align: 1px;
}

/* Per-size prices in the menu editor list */
.item-row__price { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }

.price-size { display: flex; gap: var(--space-2); align-items: baseline; }

.price-size__name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Menu editor: size rows and heat picker
   ========================================================================== */

.fieldset { border: 0; margin: 0; padding: 0; }
.fieldset legend { padding: 0; }

.variant-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

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

.radio-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.radio-chip input { position: absolute; opacity: 0; pointer-events: none; }
.radio-chip:has(input:checked) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg-subtle);
}
.radio-chip:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* ==========================================================================
   Napoli house style — the tagline from the printed menu
   ========================================================================== */

.login__tagline {
  margin-top: var(--space-2);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.login__tagline em { font-style: italic; }

/* Shop name and tagline in the topbar */
.brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }

.brand__tagline {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Extras attached to a cart line
   ========================================================================== */

.cart__count {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  vertical-align: 1px;
}

.cart-line__addons {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0 0 0 var(--space-3);
  border-left: 2px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

.cart-line__addons li + li { margin-top: 2px; }

.cart-line__extras {
  min-height: 44px;
  padding: 0 var(--space-3);
  margin-right: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.cart-line__extras.is-open {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg-subtle);
}

.addon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}

.addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  font: inherit;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.addon:hover { border-color: var(--color-primary); }

.addon--on {
  border-color: var(--color-primary);
  background: var(--color-bg-subtle);
  font-weight: 600;
}

.addon--on .addon__name::before {
  content: "✓";
  margin-right: 5px;
  color: var(--color-primary);
  font-weight: 700;
}

.addon__name { display: inline-flex; align-items: center; }
.addon__price { color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Decorative line art from the printed menu
   ========================================================================== */

.cart__art, .empty__art, .login__art {
  opacity: 0.55;
  margin: 0 auto var(--space-4);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.login__art { position: absolute; opacity: 0.4; z-index: 0; }

/* ==========================================================================
   Responsive

   Three states rather than a dozen:
     >=1024px  the tablet-in-landscape and desktop case -- cart as a sidebar
     <1024px   cart becomes a bottom sheet, collapsed to a summary bar
     <600px    phone spacing and a compact header
   ========================================================================== */

:root { --handle-h: 68px; }

.cart-toggle { position: absolute; opacity: 0; pointer-events: none; }
.cart-handle, .cart-scrim { display: none; }

@media (max-width: 1023px) {
  .order-layout { grid-template-columns: 1fr; min-height: 0; }

  /* Leave room for the collapsed sheet so the last row of cards stays reachable. */
  .order-menu { padding-bottom: calc(var(--handle-h) + var(--space-6)); }

  .order-cart {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    max-height: min(84vh, 720px);
    min-height: 0;
    border-left: 0;
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--color-bg);
    box-shadow: 0 -1px 0 var(--color-border);
    transform: translateY(calc(100% - var(--handle-h)));
    transition: transform 200ms ease;
  }

  #cart-open:checked ~ .order-layout .order-cart { transform: translateY(0); }

  .cart-handle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--handle-h);
    flex: none;
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .cart-handle__label { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }

  .cart-handle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-ink);
    font-size: 13px;
    font-weight: 700;
  }

  .cart-handle__total {
    margin-left: auto;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .cart-handle__chevron {
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-135deg);
    transition: transform 200ms ease;
  }

  #cart-open:checked ~ .order-layout .cart-handle__chevron { transform: rotate(45deg); }

  .cart { height: auto; position: static; flex: 1; min-height: 0; }
  .cart__head { display: none; }        /* the handle already says what this is */
  .cart__lines { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cart__empty { padding: var(--space-6) var(--space-5); }
  .cart__art { width: 110px; }

  .cart-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }

  #cart-open:checked ~ .order-layout .cart-scrim { opacity: 1; pointer-events: auto; }
}

@media (max-width: 599px) {

  /* Everything in the header stays on one line: wrapping a two-word shop name
     and "Sign out" onto second lines was pushing the bar to double height. */
  .topbar { min-height: 60px; padding: 0 var(--space-3); gap: var(--space-2); }
  .topbar__nav { gap: 2px; }
  .brand { gap: var(--space-2); min-width: 0; }
  .brand__mark { width: 32px; height: 32px; }
  .brand__name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__tagline { display: none; }

  .navlink {
    padding: var(--space-2);
    min-height: 44px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Name and price stop competing for one row on a narrow card. */
  .card__row { flex-wrap: wrap; gap: 0 var(--space-2); }
  .card__price { width: 100%; }

  .main { padding: var(--space-5) var(--space-4); }
  .order-menu { padding: var(--space-4); }

  .item-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: var(--space-3); }
  .card__body { padding: var(--space-3); }
  .card__name, .card__price { font-size: 14px; }
  .sizes { padding-top: var(--space-3); gap: var(--space-1); }
  /* Two size buttons share ~140px on a phone, so the price has to stay on one
     line at a smaller size rather than wrapping inside the button. */
  .size { min-height: 56px; padding: var(--space-1); }
  .size__name { font-size: 10px; }
  .size__price { font-size: 13px; }

  .tab { min-height: 48px; padding: 0 var(--space-4); }

  .cart-line { padding: var(--space-4); }
  .cart__foot { padding: var(--space-4); }
  .addon-picker { grid-template-columns: 1fr 1fr; }

  /* The editor's item rows stop being a single line and stack. */
  .item-row { flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4); }
  .item-row__body { flex: 1 1 100%; order: 2; }
  .item-row__thumb { order: 1; }
  .item-row__price { order: 1; margin-left: auto; align-items: flex-end; }
  .item-row__toggle { order: 3; }
  .item-row .btn { order: 4; margin-left: auto; }
  .item-row__desc { max-width: none; white-space: normal; }

  .category__head { gap: var(--space-3); }
  .category__rename { min-width: 0; flex: 1 1 100%; }
  .category__actions { flex: 1 1 100%; }
  .category__actions .btn { flex: 1; }

  .page-head { align-items: stretch; }
  .page-head .btn { width: 100%; }

  .variant-row { grid-template-columns: 1fr; }
}

/* Below this the shop name has to go; the logo still identifies the shop. */
@media (max-width: 379px) {
  .brand__name { display: none; }
  .button-row { flex-direction: column; align-items: stretch; }
  .button-row .btn, .button-row form { width: 100%; }
  .inline-form .input { min-width: 0; }
}

/* Coarse pointers (finger, not mouse) never get hover styling stuck on. */
@media (hover: none) {
  .card:hover, .size:hover, .addon:hover { border-color: var(--color-border); }
  .btn:hover { background: var(--color-bg); }
  .btn--primary:hover { background: var(--color-primary); }
}

@media (prefers-reduced-motion: reduce) {
  /* Covers the transitions added since, without having to remember to list
     each new one here -- forgetting is how a reduced-motion setting quietly
     stops being honoured. */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:active, .size:active { transform: none; }
}

.tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  vertical-align: 2px;
}

/* Login backdrop: the two drawings from the printed menu, kept well behind
   the card and dropped entirely on small screens where they would crowd it. */
.login { position: relative; overflow: hidden; }
.login__card { position: relative; z-index: 1; }

.login__art--left  { left: max(2vw, 12px); bottom: 6vh; }
.login__art--right { right: max(2vw, 12px); bottom: 8vh; }

@media (max-width: 900px) {
  .login__art { display: none; }
}

/* ==========================================================================
   Order history — exists so a receipt can be reprinted, not for reporting
   ========================================================================== */

.order-list { list-style: none; margin: 0; padding: 0; }

.order-row {
  /* Grid, not flex. These rows carry a fixed-width stamp, free-flowing text, a
     nowrap amount and a cluster of buttons; with flex the text column is the
     only one that can shrink, so it collapses to one word per line and the
     nowrap children spill over it. Named areas let the whole row restack at
     narrow widths instead of relying on `order` -- which silently missed any
     button that was nested inside a wrapper rather than a direct child. */
  display: grid;
  /* Fixed columns rather than `auto`. Each row is its own grid, so content-
     sized columns settle at a different width per row and the amounts and
     buttons wander from line to line -- over sixty rows that reads as broken
     rather than as merely untidy. */
  grid-template-columns: 92px minmax(0, 1fr) 128px 196px;
  grid-template-areas: "when items total actions";
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.order-row:last-child { border-bottom: 0; }

.order-row__when {
  grid-area: when;
  min-width: 88px;
  display: flex;
  flex-direction: column;
}
.order-row__id {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.order-row__time {
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.order-row__items { grid-area: items; min-width: 0; font-size: 14px; line-height: 1.5; }
.order-row__item.is-addon { color: var(--color-text-muted); }
.order-row__sep { color: var(--color-border); margin: 0 4px; }

.order-row__total {
  grid-area: total;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Only the amount refuses to wrap. Putting `nowrap` on the cell instead kept
   the amount and the name beneath it on one line, so a long name ran off the
   side of the page rather than dropping below the figure. */
.order-row__amount { white-space: nowrap; }

.order-row__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* A row with nothing to act on gives the column back rather than leaving a
   gap where the buttons would be. */
.order-row--plain {
  grid-template-columns: 92px minmax(0, 1fr) 128px;
  grid-template-areas: "when items total";
}
.order-row__actions form { margin: 0; }

/* One column of buttons and a stacked row once there is no longer width for
   four columns. 767px rather than 599px: the row runs out of room well before
   a phone does, especially inside a panel. */
@media (max-width: 767px) {
  .order-row,
  .order-row--plain {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "when    total"
      "items   items"
      "actions actions";
  }
  .order-row__when { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .order-row__actions { justify-content: stretch; }
  .order-row__actions > * { flex: 1; }
  .order-row__actions .btn { width: 100%; }
}

/* Its own line under the amount, and it breaks anywhere it has to: a name
   typed as an email address has no spaces to break at. inline-block rather
   than block so a cancelled row's line-through does not propagate into it --
   decoration passes to descendants and cannot be switched off from inside,
   but it does not cross into an atomic inline-level box. */
.order-row__by {
  display: inline-block;
  width: 100%;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* --- The shift picker ----------------------------------------------------
   A focused task done standing up, one-handed, between customers, so it gets
   a narrow column rather than the width of the screen -- a four-digit PIN box
   stretched across a laptop is both ugly and harder to aim at. The column is
   the page container, not the card, so the heading and the card share an edge.
   ========================================================================== */

/* Name buttons on the shift picker. Sized for a thumb on a tablet held in one
   hand, because that is the only way it is ever used. */
.shift-people {
  display: grid;
  /* auto-fit, not auto-fill: with one or two people on the rota, auto-fill
     leaves empty tracks and strands a single name in the corner of a wide
     empty box. auto-fit collapses them so the names always fill the row. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.shift-person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 60px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--color-bg);
}
.shift-person:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}
.shift-person input { accent-color: var(--color-primary); }
.shift-person__name { font-weight: 600; }

/* Four to eight characters, aimed at with a thumb. Big enough to hit and to
   read back at a glance, and no wider than it needs to be -- the dots are
   centred, so extra width is just distance between the eye and the value.
   The right-side padding offsets the trailing letter-spacing so the dots sit
   optically centred rather than pushed left. */
.input--pin {
  font-size: 28px;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-align: center;
  padding-top: 14px;
  padding-bottom: 14px;
}

.staff-actions { flex: none; }
.staff-actions > summary { list-style: none; cursor: pointer; }
.staff-actions > summary::-webkit-details-marker { display: none; }
.staff-actions__panel {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

/* --- The day's three numbers ----------------------------------------------
   Gross, cancelled, net. Cancelled money gets its own column rather than being
   subtracted out of the total: a day that simply shows a smaller number is a
   day whose missing sales are invisible, which is the whole thing this is
   here to prevent. */

.takings { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.takings__cell { display: flex; flex-direction: column; min-width: 120px; }
.takings__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.takings__value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.takings__cell--flag .takings__value { color: var(--color-danger); }
.takings__cell--net { margin-left: auto; text-align: right; }
.takings__cell--net .takings__value { font-size: 26px; }

/* A cancelled order stays on the list, quieted but never hidden. */
.order-row--cancelled { background: var(--color-bg-subtle); }
.order-row--cancelled .order-row__item,
.order-row--cancelled .order-row__amount { text-decoration: line-through; opacity: 0.55; }

/* Who took it is not struck through -- the sale was reversed, the person was
   not. `text-decoration: none` alone cannot do this: decoration propagates
   from an ancestor and a descendant cannot switch it off, so the attribution
   has to be its own inline block to escape the line. */
.order-row--cancelled .order-row__by { text-decoration: none; opacity: 1; }
.order-row__void {
  font-weight: 700;
  color: var(--color-danger);
  margin-bottom: var(--space-1);
}

/* Unread count beside the owner's Cancellations link. */
.navlink__count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* --- Staff roster ---------------------------------------------------------
   Not an order row. A person is a name and a line of status, with a disclosure
   that has to open to full width -- reusing the order row's four-column grid
   left the panel auto-placed into whichever cell happened to be free. */

.roster-list { list-style: none; margin: 0; padding: 0; }

.roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.roster-row:last-child { border-bottom: 0; }
.roster-row__body { min-width: 0; }
.roster-row__name { font-size: 15px; }

/* Someone taken off the floor stays on the list -- they are attached to past
   orders -- but reads as inactive. */
.roster-row--off { background: var(--color-bg-subtle); }
.roster-row--off .roster-row__name { opacity: 0.6; }

/* Closed, the disclosure is a button in the right-hand column. Open, it cannot
   fit there without stretching the column, so it drops to its own full-width
   row underneath. */
.staff-actions { grid-column: 2; justify-self: end; }
.staff-actions[open] {
  grid-column: 1 / -1;
  justify-self: stretch;
  margin-top: var(--space-2);
}

@media (max-width: 599px) {
  .roster-row { grid-template-columns: minmax(0, 1fr); }
  .staff-actions,
  .staff-actions[open] { grid-column: 1; justify-self: stretch; }
  .staff-actions > summary { text-align: center; }
}

/* --- Cancellation row detail --------------------------------------------- */

/* What was actually cancelled. An owner reviewing a reversal needs to see the
   order, not a count of its rows. */
.order-row__lines {
  font-size: 13px;
  line-height: 1.5;
  margin-top: var(--space-1);
}

/* The staff member's own words, set apart from the fixed reason above it. */
.quote {
  margin-top: var(--space-1);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* --- Finish ---------------------------------------------------------------
   The last few rules, and the ones most easily forgotten: a focus ring that is
   actually visible, hit areas big enough for a thumb, and motion that is felt
   rather than watched. */

/* One ring, everywhere. `:where` keeps specificity at zero so any component
   with its own focus treatment still wins without needing !important. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Buttons and links settle rather than snap. Short enough to feel immediate;
   the reduced-motion block above switches it off entirely. */
.btn, .navlink, .topbar__who, .shift-person, .staff-actions > summary {
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* A link inside a table is still something a finger has to land on. Padding
   rather than a height, so the row does not grow taller than its text; 12px
   either side clears 44px on the body text size. */
.table a {
  display: inline-block;
  padding: var(--space-3) 0;
}

/* Back links read as navigation and are worth hitting. */
.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 14px;
}
.backlink:hover { color: var(--color-text); text-decoration: underline; }

/* Anything long and unbroken -- an email typed where a name belongs, a URL --
   wraps rather than widening the page. */
.panel, .order-row__items, .roster-row__body { overflow-wrap: anywhere; }