/* Ye Olde Spud Shoppe.
   The palette is sampled straight out of their own logo file: the fill is
   #104820, the drop shadow is #e83020, and the trailer is white with green
   trim and a red roof, which is the same three colours again. So the site is
   white, with green doing the structural work and red kept back for the one
   thing that has to shout, which is whether the van is open.

   Arial throughout. Hierarchy comes from size, weight and colour, never from a
   second typeface, and there is no webfont to download.

   One stylesheet, no framework, no build step. */

:root {
  --green:    #104820;
  --green-d:  #0a3216;
  --green-l:  #1c6b34;
  --green-w:  #eef4ef;   /* the faintest wash of it, for panels */
  --red:      #c1281a;   /* on text and borders, contrast-safe */
  --red-br:   #e83020;   /* the logo red, for fills and dots */

  --ink:      #17201a;
  --muted:    #5d6b61;
  --line:     #dde5df;
  --card:     #ffffff;
  --paper:    #ffffff;
  --wash:     #f5f8f5;

  --radius:   14px;
  --shadow:   0 1px 2px rgba(16,72,32,.05), 0 8px 24px rgba(16,72,32,.06);
  --shadow-l: 0 10px 34px rgba(16,72,32,.13);

  /* Older markup still names the brown variables. Kept pointing at the green
     so nothing renders un-themed if one is missed. */
  --crust:    #0a3216;
  --crust-2:  #104820;
  --butter:   #e83020;
  --butter-d: #c1281a;
  --good:     #1c6b34;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.62 Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--green-d);
}
h1 { font-size: 2.5rem; margin: 0 0 .5rem; }
h2 { font-size: 1.7rem; margin: 2.6rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 0 0 .25rem; letter-spacing: -.01em; }

p { margin: 0 0 1rem; }
a { color: var(--green); }
img { max-width: 100%; display: block; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 700px; }
.lede { font-size: 1.08rem; color: var(--muted); max-width: 620px; }

/* A small green rule above a heading. Cheap, and it does the job that a
   display face used to do. */
.eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--green-l); margin: 0 0 .5rem;
}

/* --- demo ribbon --------------------------------------------------------- */
.demo-ribbon {
  background: var(--green-d); color: #cfe3d5; font-size: 13px;
  padding: 8px 20px; text-align: center;
}
.demo-ribbon strong { color: #fff; }
.demo-ribbon button {
  background: none; border: 1px solid rgba(255,255,255,.28); color: #cfe3d5;
  border-radius: 20px; font: inherit; font-size: 11px; padding: 2px 10px;
  margin-left: 10px; cursor: pointer;
}
.demo-ribbon button:hover { background: rgba(255,255,255,.1); }

/* --- header -------------------------------------------------------------- */
header.site {
  background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
header.site .wrap {
  display: flex; align-items: center; gap: 20px;
  padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; }
.brand img { height: 56px; width: auto; }
.brand .words { display: flex; flex-direction: column; }
.brand b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--green-d); }
.brand span { font-size: 11.5px; color: var(--muted); letter-spacing: .01em; }

nav.site { display: flex; align-items: center; gap: 2px; }
nav.site a {
  color: var(--green-d); text-decoration: none; padding: 9px 13px;
  border-radius: 9px; font-size: 15px; font-weight: 600;
}
nav.site a:hover { background: var(--green-w); }
nav.site a.cta {
  background: var(--green); color: #fff; margin-left: 8px; padding: 10px 20px;
}
nav.site a.cta:hover { background: var(--green-l); }

/* --- status strip -------------------------------------------------------- */
.status {
  padding: 11px 0; font-size: 15px; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--wash);
}
.status .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #b3bdb6; margin-right: 10px; vertical-align: 1px;
}
.status.open { background: var(--green-w); border-bottom-color: #cfe0d4; color: var(--green-d); font-weight: 600; }
.status.open .dot { background: var(--red-br); box-shadow: 0 0 0 0 rgba(232,48,32,.55); animation: ping 2s infinite; }
.status.later .dot { background: var(--green-l); }
@keyframes ping {
  70%  { box-shadow: 0 0 0 9px rgba(232,48,32,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,48,32,0); }
}
.status a { margin-left: 12px; font-weight: 700; color: var(--green); }

/* --- hero ---------------------------------------------------------------- */
/* Their own photograph of the hatch, with the green pulled over the left of it
   so the type has something to sit on. Left aligned: centred hero text is the
   tell of a template.

   The scrim clears to nothing by two thirds across rather than washing the
   whole frame green. Tint the entire photograph and it stops looking like a
   photograph, which defeats the point of having theirs. */
.hero {
  position: relative; background: var(--green-d);
  background-size: cover; background-position: center 42%;
  color: #fff;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg,
              rgba(7,34,15,.95) 0%, rgba(7,34,15,.88) 30%,
              rgba(7,34,15,.58) 52%, rgba(7,34,15,.12) 72%,
              rgba(7,34,15,0) 88%);
}
.hero .wrap { position: relative; padding-top: 70px; padding-bottom: 70px; }
.hero-inner { max-width: 560px; }
.hero .eyebrow { color: #8fd3a6; }
.hero h1 {
  color: #fff; font-size: 3.05rem; margin-bottom: .55rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero p.tag { font-size: 1.15rem; color: #b9d6c3; margin: 0 0 1rem; font-weight: 600; }
.hero .blurb { color: #dcebe1; margin-bottom: 1.6rem; font-size: 1.05rem; }
.hero .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero p.tag { font-size: 1.15rem; color: #b9d6c3; margin: 0 0 1rem; font-weight: 600; }
.hero .blurb { color: #dcebe1; margin-bottom: 1.6rem; font-size: 1.05rem; }
.hero .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-block; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; background: var(--green); color: #fff;
  font: inherit; font-weight: 700; font-size: 15.5px; padding: 12px 24px;
  border-radius: 10px; line-height: 1.3; text-align: center;
}
.btn:hover { background: var(--green-l); }
.btn.ghost { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.4); }
.btn.ghost:hover { background: rgba(255,255,255,.16); }
.btn.quiet { background: #fff; color: var(--green-d); border-color: var(--line); }
.btn.quiet:hover { background: var(--green-w); border-color: #c9dccf; }
.btn.red { background: var(--red); }
.btn.red:hover { background: var(--red-br); }
.btn.wide { display: block; width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* --- cards --------------------------------------------------------------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}
.card.lift { box-shadow: var(--shadow); border-color: #e8eee9; }

.section-head { margin: 2.6rem 0 1rem; }
.section-head h2, .section-head h3 { margin: 0; }
.section-head .blurb { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.section-head::before {
  content: ""; display: block; width: 46px; height: 4px; border-radius: 2px;
  background: var(--red-br); margin-bottom: 12px;
}

/* --- menu ---------------------------------------------------------------- */
.menu-list { list-style: none; margin: 0 0 30px; padding: 0; }
.menu-list li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.menu-list li:last-child { border-bottom: 0; }
.menu-list .m-thumb {
  width: 84px; height: 84px; flex: 0 0 84px; border-radius: 10px;
  object-fit: cover; background: var(--green-w);
}
.menu-list .m-body { flex: 1; min-width: 0; }
.menu-list .m-name { font-weight: 700; color: var(--green-d); }
.menu-list .m-desc { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.menu-list .m-price {
  font-size: 1.12rem; font-weight: 700; white-space: nowrap; color: var(--green);
  padding-top: 1px;
}
.menu-list li.gone { opacity: .45; }
.menu-list li.gone .m-name::after {
  content: "Sold out"; background: #f6dedb; color: var(--red);
  font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px;
  margin-left: 9px; vertical-align: 1px; letter-spacing: .03em;
}

.tag-v, .tag-vg {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  border-radius: 4px; padding: 2px 6px; margin-left: 8px; vertical-align: 1.5px;
  background: var(--green-w); color: var(--green-l);
}
.tag-vg { background: #dcece0; color: var(--green); }

/* --- picture grid -------------------------------------------------------- */
/* Used on the home page. Their photographs, cropped square, with the name of
   the thing sitting on a green fade at the bottom. */
.shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.shot {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--green-w); text-decoration: none;
  display: block;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.shot:hover img { transform: scale(1.05); }
.shot .cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; color: #fff;
  background: linear-gradient(180deg, rgba(8,40,18,0), rgba(8,40,18,.88));
  font-weight: 700; font-size: 14.5px; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.shot .cap .p { margin-left: auto; font-weight: 700; opacity: .92; }

/* --- grid ---------------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid.two   { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* A grid item defaults to min-width:auto, so anything that scrolls sideways
   inside a column widens the column instead of scrolling. */
.grid > * { min-width: 0; }

/* A photograph beside a block of words. */
.split { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.split img { border-radius: var(--radius); width: 100%; height: 100%; max-height: 340px; object-fit: cover; }

/* --- forms --------------------------------------------------------------- */
label.field { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 700; color: var(--green-d); }
label.field span.hint { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
input[type=text], input[type=tel], input[type=email], input[type=date],
input[type=time], input[type=number], input[type=password], select, textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  margin-top: 6px; color: var(--ink);
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green-l);
  box-shadow: 0 0 0 3px rgba(28,107,52,.16);
}

.errors { background: #fdeceb; border: 1px solid #f2ccc8; color: #8f2318; border-radius: 10px; padding: 13px 16px; margin-bottom: 18px; }
.errors ul { margin: 0; padding-left: 18px; }
.flash { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 15px; }
.flash.ok { background: var(--green-w); border: 1px solid #cfe0d4; color: var(--green-d); }
.flash.error { background: #fdeceb; border: 1px solid #f2ccc8; color: #8f2318; }

/* --- picking a day ------------------------------------------------------
   The client pointed at a pizza van site and said they liked it because the
   days were kept separate. So the order page is a strip of days across the
   top and the pitches for that day underneath, rather than one "we are open
   tonight" gate. Green carries the structure, red is held back for the one
   night that is actually trading now. */

.backlink { display: inline-block; font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--green-l); }

.open-now {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--green-d); color: #fff; border-radius: var(--radius);
  padding: 16px 18px; margin: 0 0 26px; box-shadow: var(--shadow-l);
}
.open-now:hover { background: #07280f; }
.open-now .dot {
  width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%;
  background: var(--red-br); animation: ping 2s infinite;
}
.open-now .on-body { flex: 1; min-width: 0; }
.open-now .on-body b { display: block; font-size: 1.12rem; }
.open-now .on-body span { color: #b9d6c3; font-size: 14px; }
.open-now .btn { background: var(--red-br); flex: 0 0 auto; }

.daytabs { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.daytab {
  flex: 1 1 140px; text-align: left; cursor: pointer; font: inherit;
  background: #fff; border: 1px solid var(--line); border-bottom-width: 3px;
  border-radius: 12px; padding: 11px 14px; color: var(--muted);
}
.daytab b { display: block; color: var(--green-d); font-size: 1.05rem; letter-spacing: -.01em; }
.daytab span { font-size: 13px; }
.daytab:hover { border-color: #c9dccf; background: var(--green-w); }
.daytab[aria-selected="true"] {
  background: var(--green-w); border-color: #c9dccf;
  border-bottom-color: var(--green); color: var(--green);
}

/* No JavaScript means no tab strip, so every day stays on the page as its own
   headed list and every order button still works. */
.daystack.tabbed .daypanel { display: none; }
.daystack.tabbed .daypanel.on { display: block; }
.daystack.tabbed .dayhead { display: none; }
.dayhead { margin: 1.8rem 0 .8rem; font-size: 1.35rem; }

.pitch {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 12px;
}
.pitch.now { border-left-color: var(--red-br); background: #fffdfc; }
.pitch.ahead { border-left-color: var(--green); }
.pitch.late, .pitch.soon { border-left-color: #d79a1c; }
.pitch.off { opacity: .62; }
.pitch-body { flex: 1 1 260px; min-width: 0; }
.pitch-body h3 { margin: 0 0 .2rem; font-size: 1.22rem; }
.pitch .when { margin: 0 0 .3rem; font-weight: 700; color: var(--green-l); font-size: 14.5px; }
.pitch .addr { margin: 0 0 .4rem; color: var(--muted); font-size: 14.5px; }
.pitch .links { margin: 0; font-size: 14px; }
.pitch .note { margin: .5rem 0 0; font-size: 13.5px; color: var(--muted); font-style: italic; }
.pitch-act { flex: 0 0 210px; text-align: right; }
.pitch-act .state { margin: 0 0 .55rem; font-size: 13.5px; color: var(--muted); }
.pitch-act .btn { width: 100%; }

.foot-note { margin: 26px 0 0; color: var(--muted); font-size: 14.5px; }

/* The consent line on the nudge sign-up. Sits between the field and the
   button, at reading size rather than shrunk to small print, because it is the
   thing they are agreeing to and it has to be legible to count. */
.consent {
  margin: 12px 0 14px; padding: 10px 12px;
  background: var(--green-w); border-left: 3px solid var(--green-l);
  border-radius: 0 8px 8px 0;
  color: #2c3b30; font-size: 14px; line-height: 1.5;
}

/* The night an order is being placed against, restated at the top of the
   basket so nobody buys a potato for the wrong Thursday. */
.for-night {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--green-w); border: 1px solid #c9dccf;
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 18px;
}
.for-night.now { background: #fff1ef; border-color: #f2c9c3; }
.for-night > div { flex: 1 1 240px; min-width: 0; }
.for-night strong { display: block; font-size: 1.15rem; color: var(--green-d); letter-spacing: -.01em; }
.for-night .sub { font-size: 14px; color: var(--muted); }
.for-night .btn { flex: 0 0 auto; }

.card.narrow { max-width: 520px; }

/* --- order page ---------------------------------------------------------- */
.order-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.order-item .m-thumb { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 10px; object-fit: cover; }
.order-item .m-body { flex: 1; min-width: 0; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.stepper button { width: 38px; height: 38px; border: 0; background: var(--wash); font-size: 19px; line-height: 1; cursor: pointer; color: var(--green-d); font-family: inherit; }
.stepper button:hover { background: var(--green); color: #fff; }
.stepper input { width: 42px; border: 0; text-align: center; font: inherit; font-weight: 700; margin: 0; padding: 0; height: 38px; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.extras { margin-top: 10px; display: none; flex-wrap: wrap; gap: 7px; }
.extras.show { display: flex; }
.extras label {
  font-size: 13px; border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 12px; cursor: pointer; background: #fff; user-select: none;
}
.extras label:has(input:checked) { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.extras input { margin-right: 6px; vertical-align: -1px; }

.basket-bar {
  position: sticky; bottom: 0; background: var(--green-d); color: #fff;
  border-radius: var(--radius) var(--radius) 0 0; padding: 14px 20px;
  display: flex; align-items: center; gap: 16px; margin-top: 24px;
  box-shadow: 0 -4px 20px rgba(8,40,18,.22); z-index: 20;
}
.basket-bar .total { font-size: 1.3rem; font-weight: 700; margin-right: auto; letter-spacing: -.02em; }
.basket-bar .btn { background: #fff; color: var(--green-d); }
.basket-bar .btn:hover { background: #dcece0; }

.pay-choice { display: grid; gap: 10px; margin-bottom: 18px; }
.pay-choice label {
  border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px;
  background: #fff; cursor: pointer; font-size: 15px; display: flex; gap: 11px; align-items: flex-start;
}
.pay-choice label:has(input:checked) { border-color: var(--green); background: var(--green-w); box-shadow: 0 0 0 2px rgba(16,72,32,.18); }
.pay-choice .sub { display: block; color: var(--muted); font-size: 13.5px; font-weight: 400; }

/* --- tables -------------------------------------------------------------- */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid-table { width: 100%; border-collapse: collapse; font-size: 15px; }
table.grid-table th, table.grid-table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }

/* --- pills --------------------------------------------------------------- */
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; border-radius: 20px; padding: 3px 10px; text-transform: uppercase; }
.pill.open      { background: var(--red-br); color: #fff; }
.pill.planned   { background: var(--green-w); color: var(--green); }
.pill.closed    { background: #ecefed; color: var(--muted); }
.pill.cancelled { background: #f6dedb; color: var(--red); }
.pill.paid      { background: #dcece0; color: var(--green); }
.pill.unpaid    { background: #fbead0; color: #8a5a10; }
.pill.event     { background: #e2e8f5; color: #2f3d72; }

/* --- footer -------------------------------------------------------------- */
footer.site { background: var(--green-d); color: #a8c3b1; margin-top: 64px; padding: 40px 0 34px; font-size: 14.5px; }
footer.site a { color: #dcebe1; text-decoration: none; }
footer.site a:hover { text-decoration: underline; }
footer.site img.mark { height: 84px; width: auto; background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
footer.site strong { color: #fff; }
footer.site .allergen { color: #7fa08c; font-size: 12.5px; margin: 26px 0 0; max-width: 640px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; }

/* --- phone --------------------------------------------------------------- */
@media (max-width: 720px) {
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.42rem; margin-top: 2.1rem; }
  .hero .wrap { padding-top: 34px; padding-bottom: 34px; }
  .hero h1 { font-size: 2.05rem; }
  /* On a phone the type runs the full width, so the angled scrim would leave
     the last words sitting on bare photograph. Go vertical instead. */
  .hero::before {
    background: linear-gradient(180deg,
                rgba(7,34,15,.72) 0%, rgba(7,34,15,.88) 55%, rgba(7,34,15,.95) 100%);
  }
  .hero .btn-row .btn { flex: 1 1 100%; }
  header.site { position: static; }
  header.site .wrap { gap: 10px; }
  .brand img { height: 46px; }
  /* "Where to find us" is the only label that will not fit four across on a
     375px screen, so it becomes "Where" and the nav stays on one line instead
     of turning into a sideways scroller with the Order button off the edge. */
  nav.site .long { display: none; }
  nav.site { width: 100%; gap: 4px; }
  nav.site a { white-space: nowrap; font-size: 14px; padding: 7px 9px; }
  nav.site a.cta { margin-left: auto; }
  .menu-list .m-thumb { width: 64px; height: 64px; flex-basis: 64px; }
  .basket-bar { flex-wrap: wrap; }
  .basket-bar .btn { width: 100%; }

  /* Three days will not sit side by side at 375px without the location line
     wrapping, so they stack and the strip reads as a short list instead. */
  .daytab { flex: 1 1 100%; display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; }
  .daytab b { font-size: 1rem; }
  .daytab span { margin-left: auto; }
  .pitch { padding: 16px; gap: 12px; }
  .pitch-act { flex: 1 1 100%; text-align: left; }
  .open-now { flex-wrap: wrap; }
  .open-now .btn { width: 100%; }
  .for-night .btn { width: 100%; }
}

/* --- admin ---------------------------------------------------------------- */
/* Written for a phone propped on the counter of a van, not a desk. Big
   targets, the open/close switch first, orders underneath. */
body.admin { background: var(--wash); }

header.admin { background: var(--green-d); color: #fff; }
header.admin .wrap { display: flex; align-items: center; gap: 10px; padding: 13px 20px; flex-wrap: wrap; }
header.admin .who { font-size: 1.05rem; font-weight: 700; color: #fff; margin-right: auto; letter-spacing: -.01em; }
nav.admin { display: flex; gap: 3px; overflow-x: auto; width: 100%; }
nav.admin a {
  color: #bcd6c5; text-decoration: none; padding: 8px 13px; border-radius: 8px;
  font-size: 14.5px; white-space: nowrap; font-weight: 600;
}
nav.admin a:hover { background: rgba(255,255,255,.1); color: #fff; }
nav.admin a.on { background: #fff; color: var(--green-d); }
nav.admin a.out { margin-left: auto; color: #7fa08c; }

.admin-wrap { max-width: 1140px; margin: 0 auto; padding: 20px; }

.now-card {
  background: var(--green-d); color: #fff; border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px;
}
.now-card h2 { color: #fff; margin: 0 0 4px; font-size: 1.45rem; }
.now-card .where { color: #b9d6c3; margin: 0 0 16px; }
.now-card form { display: inline; }
.now-card .btn { margin-right: 8px; background: #fff; color: var(--green-d); }
.now-card .btn:hover { background: #dcece0; }
.now-card .btn.red { background: var(--red-br); color: #fff; }
.now-card .btn.red:hover { background: var(--red); }

.board { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.order-card {
  background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--muted);
  border-radius: var(--radius); padding: 15px 17px; box-shadow: var(--shadow);
}
.order-card.s-new { border-left-color: var(--red-br); }
.order-card.s-preparing { border-left-color: #d79a1c; }
.order-card.s-ready { border-left-color: var(--green-l); }
.order-card.s-collected { border-left-color: #b4beb7; opacity: .6; }
.order-card.s-cancelled { border-left-color: var(--red); opacity: .45; }
.order-card .head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.order-card .when { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--green-d); }
.order-card .ref { color: var(--muted); font-size: 13px; margin-left: auto; }
.order-card ul { list-style: none; margin: 10px 0; padding: 0; font-size: 14.5px; }
.order-card ul li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.order-card ul li:last-child { border-bottom: 0; }
.order-card .note { background: #fdf3da; border-radius: 8px; padding: 8px 11px; font-size: 13.5px; margin: 9px 0; }
.order-card .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.order-card .acts .btn { padding: 8px 13px; font-size: 14px; }

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions .btn { padding: 7px 12px; font-size: 13.5px; }

details.editor { margin-top: 10px; }
details.editor > summary { cursor: pointer; color: var(--green); font-size: 14px; padding: 5px 0; font-weight: 600; }
details.editor .card { margin-top: 8px; }

.switch { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 12px; }
.switch input { width: 20px; height: 20px; margin: 0; }