/* ============================================================
   THE GENERAL — Parkes NSW
   Cream, charcoal, maroon. Bebas Neue (signwriting) + Times (reading).
   Mobile first. No framework, no build step.
   ============================================================ */

:root {
  /* ---------- The palette ----------
     Three colours and nothing else. Every other value in this file is
     one of these three, either thinned with opacity or mixed with
     another. No grey is imported from outside it. */

  --cream:    #F1ECE3;   /* the page */
  --charcoal: #2B2B2B;   /* everything you read */
  --maroon:   #6E1B25;   /* the accent, and never more than an accent */

  /* Surfaces: cream carrying a little charcoal, so a card can sit on
     the page without becoming a second colour. Written flat rather
     than as color-mix so an older browser cannot end up with no
     surface at all — the mix each one represents is noted beside it. */
  --cream-raised: #E9E4DC;   /* cream 96% + charcoal  4% */
  --cream-card:   #E1DDD4;   /* cream 92% + charcoal  8% */
  --rule:         #D5D1C9;   /* cream 86% + charcoal 14% */
  --rule-strong:  #BEBAB3;   /* cream 74% + charcoal 26% */

  /* Text below the headline: charcoal thinned, never a different hue.
     Charcoal on cream is 12:1, which is AAA. These land at 6.3:1 and
     5.0:1, so secondary text and fine print both still clear AA. */
  --charcoal-soft:  rgba(43, 43, 43, 0.82);
  --charcoal-faint: rgba(43, 43, 43, 0.70);

  /* Charcoal thinned right down, for anything laid over the page. */
  --scrim:       rgba(43, 43, 43, 0.55);
  /* Maroon at a whisper — the ground under an error message. */
  --maroon-wash: rgba(110, 27, 37, 0.09);

  /* ---------- Type ----------
     One face, Times New Roman, for everything. It is on every Mac and
     Windows machine already, so the site asks the network for no fonts
     at all. --display is still its own token: it marks the things that
     are set as signage rather than prose — headings, navigation,
     buttons, labels, prices — which are tracked, capitalised and
     bolder than the reading text even though the letters are the same.
     Bebas is set tight by default and is given air below. */
  --display: 'Times New Roman', Times, 'Liberation Serif', 'Nimbus Roman', serif;
  --body:    'Times New Roman', Times, 'Liberation Serif', 'Nimbus Roman', serif;

  --gutter: clamp(20px, 5vw, 40px);
  --band-pad: clamp(52px, 11vw, 96px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The `hidden` attribute is only a UA-stylesheet `display: none`, so any
   author rule that sets display (grid/flex) silently defeats it. Several
   panels below do exactly that, so make `hidden` mean hidden. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky bar */
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Grain. Sits over everything, catches no clicks. Keeps the dark
   from going flat and plasticky. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Links, focus, skip ---------- */

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--maroon);
  color: var(--cream);
  padding: 12px 18px;
  font-family: var(--display);
  letter-spacing: 0.08em; text-transform: uppercase;
  z-index: 10000;
}
.skip:focus { left: 0; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 236, 227, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.mark {
  text-decoration: none;
  display: flex;
  align-items: center;
  flex: none;
}

.mark img {
  display: block;
  height: 21px;
  width: auto;
}

.mark-the {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--charcoal-faint);
}

.mark-general {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal);
}

.topnav {
  display: flex;
  gap: clamp(12px, 3.4vw, 26px);
  flex: none;
}

.topnav a {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--charcoal-soft);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.topnav a:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

/* ---------- Hero ---------- */

.hero {
  padding: clamp(44px, 12vw, 96px) 0 clamp(40px, 10vw, 80px);
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  font-family: var(--display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--charcoal-faint);
  margin-bottom: 20px;
}

.hero-title {
  line-height: 0;
  margin-bottom: 30px;
}

.hero-logo {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.hero-the {
  display: block;
  font-family: var(--display);
  font-size: clamp(19px, 5.2vw, 32px);
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--charcoal-soft);
  margin-bottom: 6px;
  margin-left: 0.2em;
}

.hero-general {
  display: block;
  font-family: var(--display); font-weight: 700;
  /* Playfair sets noticeably wider than the condensed sans this
     replaced — at 19vw the L fell off the right edge of a phone. */
  font-size: clamp(46px, 14.5vw, 124px);
  letter-spacing: 0.03em;
  color: var(--charcoal);
}

.hero-line {
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.6;
  color: var(--charcoal-soft);
  max-width: 34ch;
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.hero-opening {
  font-size: 15px;
  color: var(--charcoal-soft);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.hero-opening strong { color: var(--charcoal); font-weight: 600; }

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--maroon);
  vertical-align: 0.12em;
}

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

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--rule-strong);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

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

.btn-primary:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--cream);
}

.btn-quiet { color: var(--charcoal-soft); background: transparent; }

.btn-quiet:hover { color: var(--maroon); border-color: var(--maroon); }

/* ---------- Bands ---------- */

.band {
  padding: var(--band-pad) 0;
  border-bottom: 1px solid var(--rule);
}

.section-title {
  font-family: var(--display);
  font-size: clamp(13px, 3.4vw, 15px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 30px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

/* ---------- Hours — the thing people came for ---------- */

.band-hours {
  background: var(--cream-raised);
  border-top: 2px solid var(--maroon);
}

.hours { margin-bottom: 0; }

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

.hours-row:last-child { border-bottom: none; }

.hours dt,
.hire-hours dt {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(15px, 4vw, 18px);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--charcoal-soft);
}

.hours dd,
.hire-hours dd {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 6.4vw, 30px);
  letter-spacing: 0.02em;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}



/* ---------- Menu ---------- */

.menu-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

.menu-caption {
  caption-side: top;
  text-align: left;
  font-family: var(--display); font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--charcoal);
  padding-bottom: 14px;
}

.menu-table thead th {
  font-family: var(--display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-faint);
  text-align: right;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--rule-strong);
  vertical-align: bottom;
}

.menu-table thead th:first-child { text-align: left; }

.oz {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--charcoal-faint);
}

.menu-table tbody th {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 21px;
  text-align: left;
  color: var(--charcoal);
  padding: 15px 12px 15px 0;
  border-bottom: 1px solid var(--rule);
}

.menu-table tbody td {
  font-family: var(--display); letter-spacing: 0.03em;
  font-weight: 400;
  font-size: 17px;
  text-align: right;
  white-space: nowrap;
  color: var(--charcoal-soft);
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
  width: 5.5em;
}

.menu-table tbody tr:last-child th,
.menu-table tbody tr:last-child td { border-bottom: none; }

.menu-block {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}

.menu-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.menu-block h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--charcoal);
}

.price {
  font-family: var(--display); letter-spacing: 0.03em;
  font-size: 18px;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}

.menu-block p { color: var(--charcoal-soft); font-size: 16px; }

.menu-extras {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal-faint);
}

.menu-extras .plus { color: var(--maroon); }
.menu-extras .sep { padding: 0 10px; }

/* ---------- The place ---------- */

.place-grid { display: grid; gap: 30px; }

.place-copy p { color: var(--charcoal-soft); margin-bottom: 16px; max-width: 46ch; }
.place-copy p:last-child { margin-bottom: 0; }

.place-later {
  font-style: italic;
  color: var(--charcoal-faint) !important;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.shot {
  border: 1px solid var(--rule-strong);
  background: var(--cream-card);
  line-height: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}


.shot-pair {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

/* ---------- Find us ---------- */

.find-grid { display: grid; gap: 34px; }

.address {
  font-style: normal;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 6.4vw, 32px);
  line-height: 1.25;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.address a {
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--maroon);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.address a:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

.contact { margin-top: 30px; }

.contact-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.contact dt {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal-faint);
}

.contact dd { font-size: 16px; color: var(--charcoal-soft); }
.contact dd a { color: var(--maroon); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }

/* Unfilled placeholders — deliberately obvious so they can't ship by accident */
.todo {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal-faint);
}

.find-hours {
  background: var(--cream-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--maroon);
  padding: 22px;
}

.find-hours-h {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--charcoal-faint);
  margin-bottom: 14px;
}

.mini-hours { list-style: none; }

.mini-hours li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--charcoal-soft);
  font-variant-numeric: tabular-nums;
}

.mini-hours li:last-child { border-bottom: none; }
.mini-hours li span:last-child { color: var(--charcoal); white-space: nowrap; }

/* ---------- Footer ---------- */

.footer { padding: 44px 0 56px; }

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-mark {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--charcoal);
}

.social { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.social a {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--charcoal-soft);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.social a:hover { color: var(--maroon); }

.footer-meta { font-size: 14px; color: var(--charcoal-faint); }

/* ============================================================
   Wider screens
   ============================================================ */

@media (min-width: 720px) {
  body { font-size: 18px; }

  .place-grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 40px; }

  .shot-pair { grid-template-columns: 1fr 1fr; }

  .find-grid { grid-template-columns: 1.3fr 1fr; align-items: start; gap: 44px; }

  .hours-row { padding: 22px 0; }

  .menu-table tbody td { width: 6.5em; }
}

/* Light by design, matching the printed identity. The dark-scheme
   preference is honoured only so far as keeping form controls and
   scrollbars light — there is no dark palette. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

/* ============================================================
   ORDER AHEAD  (order.html)
   Same room, different job: this one is a tool, so the touch
   targets are bigger and the type is plainer.
   ============================================================ */

.order-head {
  padding: clamp(36px, 9vw, 72px) 0 clamp(26px, 5vw, 40px);
  border-bottom: 1px solid var(--rule);
}

.order-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 11vw, 68px);
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  margin: 12px 0 18px;
}

.link { color: var(--maroon); }

.closed-notice {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--maroon);
  color: var(--charcoal);
  font-size: 16px;
}

.loading { color: var(--charcoal-faint); font-style: italic; }

/* ---------- menu list ---------- */

.ocat { margin-bottom: 40px; }

.ocat-name {
  font-family: var(--display); font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--charcoal);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 6px;
}

.ocat-blurb { color: var(--charcoal-faint); font-style: italic; font-size: 15px; margin-bottom: 10px; }

.oitem { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.oitem:last-child { border-bottom: none; }

.oitem-name {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 22px;
  color: var(--charcoal);
}

.oitem-desc { font-size: 15px; color: var(--charcoal-soft); margin-top: 2px; }

.oitem-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;               /* thumb-sized */
  padding: 10px 18px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  color: var(--charcoal);
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.chip:hover:not(:disabled) { background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }
.chip-price { color: var(--charcoal); font-variant-numeric: tabular-nums; }
.chip:hover:not(:disabled) .chip-price { color: var(--cream); }

/* ---------- the cart bar ---------- */

.cart-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: rgba(241, 236, 227, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule-strong);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}

.cart-bar.bump { animation: bump 0.26s ease; }
@keyframes bump { 50% { transform: translateY(-4px); } }

.cart-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 20px;
  background: var(--maroon);
  border: none;
  color: var(--cream);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}

.cart-count {
  min-width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  background: var(--charcoal); color: var(--cream);
  border-radius: 50%;
  font-size: 14px; font-weight: 600;
}

.cart-label { flex: 1; text-align: left; }
.cart-total { font-variant-numeric: tabular-nums; }

/* ---------- the cart panel ---------- */

.cart-panel {
  position: fixed; inset: 0; z-index: 300;
  background: var(--scrim);
  display: flex; align-items: flex-end; justify-content: center;
  overflow-y: auto;
}

.cart-panel-inner {
  width: 100%;
  max-width: 560px;
  background: var(--cream);
  border-top: 2px solid var(--maroon);
  padding: 22px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  max-height: 94vh;
  overflow-y: auto;
}

.cart-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.cart-panel-head h2 {
  font-family: var(--display); font-size: 15px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--charcoal);
}

.cart-close {
  background: none; border: none; color: var(--charcoal-soft);
  font-size: 30px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px;
}
.cart-close:hover { color: var(--maroon); }

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.cart-line-info { display: flex; flex-direction: column; min-width: 0; }
.cart-line-name { color: var(--charcoal); font-size: 16px; }
.cart-line-sub {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal-faint); margin-top: 3px;
}

.qty { display: flex; align-items: center; gap: 2px; }

.qty-btn {
  width: 40px; height: 40px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  color: var(--charcoal);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.qty-btn:hover:not(:disabled) { border-color: var(--maroon); color: var(--maroon); }
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.qty-n {
  min-width: 34px; text-align: center;
  font-family: var(--display); letter-spacing: 0.03em; font-size: 16px;
  font-variant-numeric: tabular-nums; color: var(--charcoal);
}

.cart-line-price {
  font-family: var(--display); letter-spacing: 0.03em; font-size: 16px;
  color: var(--charcoal); font-variant-numeric: tabular-nums;
  min-width: 4.5em; text-align: right;
}

.cart-foot { padding-top: 18px; }

.cart-foot-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--display); font-size: 15px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal-soft);
  padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong);
}

.cart-foot-row strong {
  font-size: 26px; color: var(--charcoal); font-variant-numeric: tabular-nums;
}

.cart-note { font-size: 14px; color: var(--charcoal-faint); margin: 12px 0 20px; font-style: italic; }

/* ---------- checkout form ---------- */

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-family: var(--display); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal-faint); margin-bottom: 7px;
}

.field .opt { font-family: var(--body); letter-spacing: 0.02em; font-style: italic; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 16px;               /* 16px stops iOS zooming on focus */
  border-radius: 0;
}

.field textarea { min-height: 72px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--charcoal-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--maroon); outline-offset: 1px; border-color: var(--maroon);
}

.btn-block { display: block; width: 100%; text-align: center; border: none; cursor: pointer; }
.btn-block:disabled { opacity: 0.6; cursor: default; }

.form-error {
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--maroon-wash);
  border-left: 3px solid var(--maroon);
  color: var(--charcoal); font-size: 15px;
}

/* ---------- confirmation ---------- */

.done-screen {
  position: fixed; inset: 0; z-index: 400;
  background: var(--cream);
  display: grid; place-items: center;
  padding: var(--gutter);
  overflow-y: auto;
}

.done-inner { width: 100%; max-width: 460px; text-align: center; }

/* The name the counter will call. Sized for a name rather than a
   four-character code — 'Christopher' has to fit on one line on a
   phone, and the old size broke it across two. */
.done-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 9vw, 54px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin: 6px 0 12px;
  overflow-wrap: anywhere;
}

.done-name:focus { outline: none; }

.done-line { color: var(--charcoal-soft); margin-bottom: 26px; }

.done-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin-bottom: 20px;
}
.done-meta > div { background: var(--cream-raised); padding: 16px 12px; }
.done-meta dt {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal-faint); margin-bottom: 6px;
}
.done-meta dd { font-family: var(--display); letter-spacing: 0.03em; font-size: 18px; color: var(--charcoal); }

@media (min-width: 720px) {
  .cart-panel { align-items: center; }
  .cart-panel-inner { border: 1px solid var(--rule-strong); border-top: 2px solid var(--maroon); }
  .cart-summary { border-radius: 999px; }
}

.pickup-note { font-size: 14px; color: var(--charcoal-faint); margin-top: 7px; font-style: italic; }

/* ============================================================
   SEND US A MESSAGE
   ============================================================ */

.msg-form {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  max-width: 560px;
}

.msg-form-h {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 22px;
}

/* Honeypot. Taken off-screen rather than display:none — some bots skip
   fields that are display:none, and the whole point is that they fill
   this one in. Hidden from assistive tech and from the tab order. */
.msg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.msg-row { display: grid; gap: 0 16px; }

.msg-form .btn-block { margin-top: 6px; }

@media (min-width: 560px) {
  .msg-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- the two plain outcome pages ---------- */

.note-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: var(--band-pad) 0;
}

.note-inner { max-width: 46ch; text-align: center; }

.note-title {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.1;
  margin: 14px 0 16px;
}

.note-body { color: var(--charcoal-soft); margin-bottom: 28px; }
.note-body a { color: var(--maroon); }

/* ---------- work with us ----------
   A card rather than a band of copy. Hiring earns a place on the page
   without earning the room the coffee gets: bordered, centred, and
   narrow enough that it reads as an aside to the rest of the page. */

.work-card {
  background: var(--cream-raised);
  border: 1px solid var(--rule);
  text-align: center;
  padding: clamp(30px, 6vw, 54px) 22px;
  max-width: 54ch;
  margin: 0 auto;
}

.work-card .eyebrow { margin-bottom: 12px; }

.work-card-h {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: clamp(24px, 4.4vw, 34px);
  line-height: 1.14;
  margin: 0 auto;
  max-width: 20ch;
}

.work-card-copy {
  color: var(--charcoal-soft);
  max-width: 44ch;
  margin: 16px auto 26px;
}

/* ---------- the shop, switched off ----------
   A screen, not a sentence. It sits at the top of the menu page when
   online ordering is off, and the menu carries on underneath it: the
   prices are still true and still worth reading. Sized so it cannot be
   mistaken for a footnote, because the thing it has to communicate is
   the absence of every button below it. */

.closed-notice {
  background: var(--cream-card);
  border: 1px solid var(--rule);
  text-align: center;
  padding: clamp(34px, 8vw, 66px) 22px;
  margin-bottom: clamp(28px, 6vw, 46px);
}

.closed-notice .eyebrow { margin-bottom: 14px; }

.closed-title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: clamp(26px, 5.4vw, 40px);
  line-height: 1.12;
  max-width: 17ch;
  margin: 0 auto;
}

.closed-note {
  color: var(--charcoal-soft);
  max-width: 42ch;
  margin: 18px auto 0;
}

.closed-sub {
  color: var(--charcoal-faint);
  font-size: 15px;
  max-width: 42ch;
  margin: 10px auto 0;
}

/* ---------- price cells that became buttons ---------- */

.price-btn {
  font-family: var(--display); letter-spacing: 0.03em;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 9px 14px;
  min-width: 5.2em;
  min-height: 44px;              /* thumb-sized */
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.price-btn:hover { background: var(--maroon); border-color: var(--maroon); color: var(--cream); }
.price-btn:active { transform: translateY(1px); }

/* the table needs more room once the prices are buttons */
body.shop-open .menu-table tbody td { padding: 9px 0 9px 10px; }
body.shop-open .menu-table tbody th { padding-right: 14px; }

.menu-how {
  margin-top: 14px;
  color: var(--charcoal-soft);
  font-size: 16px;
}

/* ---------- the size, written on the button ---------- */

.price-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
}

/* On a laptop the column heading above already says the size, so the
   copy on the button would be the same words twice. It is there in the
   markup either way; this is the width at which it earns its space. */
.pb-size { display: none; }

.pb-name {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pb-note {
  font-size: 10px;
  letter-spacing: 0.1em;
  opacity: 0.72;
  margin-left: 0.4em;
}

.pb-amt { font-variant-numeric: tabular-nums; }

/* Something went in the cart. The bar that says so is at the bottom of
   the screen, under the thumb that just tapped — this says it where
   the eye already is. */
.price-btn.is-added {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--cream);
}

.menu-extras .plus-free {
  color: var(--charcoal-faint);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* The cart bar is fixed to the bottom of the window. Without this it
   covers whatever the page ends with, which on the menu is a drink. */
body.cart-showing { padding-bottom: 88px; }

/* ============================================================
   THE MENU ON A PHONE
   ============================================================
   Below this width the table stops being a table and becomes a list
   of drinks, each with its sizes as buttons underneath it.

   The table was losing on two counts. Two fixed price columns squeezed
   the name until "Hot chocolate" broke across two lines, and the size
   headings — the only thing distinguishing $5.00 from $5.50 — scrolled
   off the top after the second row. Both problems come from asking a
   440px column set to do a 900px job.

   The markup does not change. It is still a real table with real
   prices in it, which is what Google reads and what somebody with
   JavaScript switched off gets.
   ============================================================ */

@media (max-width: 620px) {
  .menu-table,
  .menu-table tbody,
  .menu-table tr,
  .menu-table tbody th,
  .menu-table tbody td { display: block; width: auto; }

  /* The size is on each button now, so the heading row is repetition
     that costs a scroll. */
  .menu-table thead { display: none; }

  /* The row is a flex line: the name takes the whole of it, and the
     sizes share what is left in equal parts. Equal parts rather than
     halves, so a drink whose other size is hidden takes the width back
     instead of leaving a gap where a button is not. */
  .menu-table tr[data-item] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0 16px;
    border-bottom: 1px solid var(--rule);
  }

  .menu-table tr[data-item]:last-child { border-bottom: none; }

  .menu-table tbody th {
    flex: 0 0 100%;
    font-size: 20px;
    padding: 0 0 2px;
    border-bottom: none;
  }

  .menu-table tbody td {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    border-bottom: none;
    text-align: left;
  }

  .price-btn {
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    font-size: 18px;
  }

  .pb-size { display: flex; align-items: baseline; }

  /* No JavaScript: the price is plain text in the cell, so the size
     has to come from the cell's own attribute or there is nothing to
     tell the two apart. The class is added only when a button has
     replaced the text, so the two can never both appear. */
  .menu-table tbody td:not(.is-shop)[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--charcoal-faint);
    margin-bottom: 2px;
  }

  /* Espresso has no regular size. On a laptop the dash keeps the
     column honest; here there is no column to keep, and an empty box
     reading "—" is just something to wonder about. Hidden rather than
     emptied, so the flex line gives its width to the size that does
     exist. */
  .menu-table tbody td[aria-label="not available"] { display: none; }

  .menu-caption { font-size: 18px; }
  .menu-table { margin-bottom: 30px; }

  body.shop-open .menu-table tbody td { padding: 0; }
  body.shop-open .menu-table tbody th { padding-right: 0; }
}

.menu-noscript {
  margin-top: 26px;
  padding: 14px 16px;
  background: var(--cream-raised);
  border-left: 3px solid var(--maroon);
  color: var(--charcoal-soft);
  font-size: 15px;
}

/* ============================================================
   THE COUNTER SCREEN  (counter.html)
   A working screen, not a shopfront: bigger type, higher contrast,
   readable at arm's length across a bench.
   ============================================================ */

.counter-body { background: var(--cream); }

.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); }
.gate-inner { width: 100%; max-width: 380px; }
.gate-title {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
  font-size: clamp(38px, 9vw, 54px); margin: 8px 0 10px;
}
.gate-note { color: var(--charcoal-soft); margin-bottom: 24px; }

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

.counter-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px var(--gutter);
  background: var(--cream-raised); color: var(--charcoal);
  border-bottom: 1px solid var(--rule-strong);
}

.counter-bar-left, .counter-bar-right { display: flex; align-items: center; gap: 12px; }

.counter-mark {
  font-family: var(--display);
  font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
}

.counter-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--charcoal); flex: none;
}
.counter-dot.stale { background: var(--maroon); }

.counter-clock {
  font-family: var(--display); letter-spacing: 0.03em; font-size: 15px;
  font-variant-numeric: tabular-nums; color: var(--charcoal-faint);
}

.counter-msgs {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--maroon); text-decoration: none;
}

.counter-btn {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--charcoal-soft);
  border: 1px solid var(--rule-strong);
  padding: 8px 12px; cursor: pointer; min-height: 38px;
}
.counter-btn:hover { color: var(--charcoal); border-color: var(--charcoal); }

.counter-main { flex: 1; padding: var(--gutter); }

.counter-empty { text-align: center; padding: 18vh 0; color: var(--charcoal-faint); }
.counter-empty p { font-family: var(--display); font-weight: 700; letter-spacing: 0.03em; font-size: 22px; }
.counter-empty .counter-empty-sub {
  font-family: var(--body); font-size: 15px !important;
  font-style: italic; letter-spacing: 0; margin-top: 8px;
}

.counter-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  align-items: start;
}

.ocard {
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--rule-strong);
  padding: 16px 18px 14px;
}

/* the left edge carries the state, so it reads across a room */
.ocard--pending   { border-left-color: var(--rule-strong); }
.ocard--confirmed { border-left-color: var(--charcoal-faint); }
.ocard--preparing { border-left-color: var(--maroon); }
.ocard--ready     { border-left-color: var(--charcoal); background: var(--cream-card); }

.ocard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.ocard-code {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  letter-spacing: 0.04em;
}

.ocard-status {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal-faint);
}

.ocard-name { font-size: 19px; margin-top: 4px; }

.ocard-when {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal-soft); margin-top: 6px;
}
.ocard-age { color: var(--charcoal-faint); text-transform: none; letter-spacing: 0.02em; }

.ocard-items { list-style: none; margin: 14px 0 0; }
.ocard-items li {
  display: block; padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.ocard-items li:last-child { border-bottom: none; }
.ocard-qty {
  font-family: var(--display); letter-spacing: 0.03em; font-size: 17px;
  font-variant-numeric: tabular-nums; flex: none; min-width: 2em;
}

.ocard-notes {
  margin-top: 12px; padding: 9px 12px;
  background: var(--cream-card); border-left: 2px solid var(--maroon);
  font-style: italic; font-size: 15px; color: var(--charcoal-soft);
}

.ocard-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.ocard-total {
  font-family: var(--display); letter-spacing: 0.03em; font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.ocard-phone { font-size: 15px; color: var(--maroon); }

.ocard-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.ocard-go { flex: 1; min-height: 48px; border: none; cursor: pointer; }
.ocard-cancel {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: none;
  color: var(--charcoal-faint); cursor: pointer; padding: 10px;
}
.ocard-cancel:hover { color: var(--maroon); }

/* ============================================================
   ADMIN  (admin.html)
   ============================================================ */

.admin-main { flex: 1; padding: var(--gutter); max-width: 900px; width: 100%; margin: 0 auto; }

.admin-sec { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.admin-sec:last-child { border-bottom: none; }

.admin-h {
  font-family: var(--display); font-size: 13px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--charcoal);
  margin-bottom: 20px;
}
/* ============================================================
   THE CALENDAR  (admin.html)
   ============================================================
   One grid answering two questions, because they are asked at the
   same moment and for the same reason — deciding what next week
   looks like. Behind today it shows what was taken. Ahead of today
   it shows whether the shop is open, and a day can be shut by
   tapping it.
   ============================================================ */

.cal { max-width: 720px; }

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cal-month {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
}

.cal-step {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  width: 44px;
  min-height: 44px;
  color: var(--charcoal);
  background: transparent;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
}

.cal-step:hover { border-color: var(--maroon); color: var(--maroon); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dows { margin-bottom: 4px; }

.cal-dow {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal-faint);
  text-align: center;
  padding-bottom: 2px;
}

.cal-pad { display: block; }

.cal-day {
  position: relative;
  display: block;
  min-height: 82px;
  padding: 0;
  text-align: left;
  font-family: var(--body);
  color: var(--charcoal);
  background: var(--cream-raised);
  border: 1px solid var(--rule);
  cursor: pointer;
}

/* Everything the cell shows sits in here. Clipped to the cell at rest;
   lifted out of it on hover, which is why it is its own box and why
   the cell is only its anchor. */
.cal-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  height: 100%;
  min-height: 80px;
  padding: 7px 8px;
  overflow: hidden;
}

/* The rest of a day that did not fit. The last visible line ends in an
   ellipsis rather than being cut mid-word, and hovering the cell shows
   the whole thing over the top of the days around it — the grid does
   not reflow, so nothing moves under the cursor. */
.cal-day:hover,
.cal-day:focus-visible { z-index: 30; }

.cal-day:hover .cal-body,
.cal-day:focus-visible .cal-body {
  position: absolute;
  top: -1px;
  /* A little wider than the cell as well as taller. A day's worth of
     text in a 90px column is a tall thin ribbon; twenty pixels either
     side is the difference between four words a line and two. */
  left: -20px;
  right: -20px;
  height: auto;
  min-height: calc(100% + 2px);
  overflow: visible;
  background: var(--cream-card);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 10px 24px rgba(43, 43, 43, 0.22);
}

.cal-day.is-closed:hover .cal-body,
.cal-day.is-closed:focus-visible .cal-body { border-color: var(--maroon); }


.cal-n {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.cal-take {
  font-family: var(--display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--charcoal);
}

.cal-note {
  width: 100%;
  font-size: 11px;
  line-height: 1.3;
  color: var(--charcoal-soft);
  /* A line can be 120 characters and a cell is about ten wide. Two
     lines each, ending in an ellipsis; the rest arrives on hover, and
     is in the cell's aria-label whether you hover or not. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.cal-day:hover .cal-note,
.cal-day:focus-visible .cal-note {
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Today. A rule down the left rather than a fill, so it can be today
   AND closed AND have takings on it without three colours fighting. */
.cal-day.is-today {
  border-left: 3px solid var(--charcoal);
  background: var(--cream-card);
}

/* Behind today. Nothing to decide, so it does not invite a tap. */
.cal-day.is-past { cursor: default; opacity: 0.88; }
.cal-day.is-past:hover { border-color: var(--rule); }

/* Normally shut — a Sunday in a six-day week. Quieter than a closure,
   because it is not news. */
.cal-day.is-usual-shut { background: transparent; }

/* Shut on purpose. The one place maroon is spent on this screen. */
.cal-day.is-closed {
  background: var(--maroon-wash);
  border-color: var(--maroon);
}

.cal-day.is-closed .cal-note { color: var(--maroon); }

/* ---------- the day panel ----------
   Opens under the grid when a day is tapped. Two things in it, under a
   rule from each other, because a day carries two: what has to be
   remembered on it, and whether the shop is open. See admin.js for why
   neither of them is a browser dialog. */

.cal-day-panel {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--cream-raised);
  border-left: 3px solid var(--maroon);
  max-width: 720px;
}

.cal-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.cal-day-when {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--charcoal);
}

.cal-day-shut {
  font-size: 13px;
  color: var(--maroon);
  margin-bottom: 10px;
}

.cal-day-empty {
  font-size: 13px;
  color: var(--charcoal-faint);
  margin-bottom: 12px;
}

/* What is on the day. Undone first, so the list opens on the part of
   it that still needs doing. */
.cal-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.cal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 7px;
  background: var(--cream);
}

.cal-item.is-done .cal-item-text {
  text-decoration: line-through;
  color: var(--charcoal-faint);
}

.cal-item-text { flex: 1 1 auto; min-width: 0; font-size: 14px; word-break: break-word; }

.cal-tick {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  color: var(--maroon);
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  cursor: pointer;
}

.cal-item.is-done .cal-tick { background: var(--maroon-wash); border-color: var(--maroon); }
.cal-tick:hover { border-color: var(--maroon); }

.cal-bin {
  flex: none;
  width: 30px; height: 30px;
  font-size: 17px; line-height: 1;
  color: var(--charcoal-faint);
  background: transparent;
  border: none;
  cursor: pointer;
}
.cal-bin:hover { color: var(--maroon); }

.cal-day-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.cal-day-input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 16px;            /* under 16px and iOS zooms the page */
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--rule-strong);
}

.cal-day-panel .btn { min-height: 44px; }

/* The shop's own state, kept under a rule so it reads as a second
   thing rather than more of the note. */
.cal-shop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
}

.cal-shop-state {
  font-size: 13px;
  color: var(--charcoal-faint);
  margin-right: 4px;
}

.cal-shop-state.is-closed { color: var(--maroon); }

.cal-shop-why {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--rule-strong);
}

/* What a cell says. The note is the point of the grid, so it gets the
   room; a closed day still has to say it is closed, and can carry a
   note as well. */
.cal-shut {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-faint);
}

.cal-day.is-closed .cal-shut { color: var(--maroon); }

/* A day with something written on it. */
.cal-day.has-note { border-color: var(--rule-strong); }

/* The day the panel is showing. */
.cal-day.is-open {
  border-color: var(--maroon);
  box-shadow: inset 0 0 0 1px var(--maroon);
}

.cal-note.is-done { text-decoration: line-through; opacity: 0.55; }

/* ---------- applications, one at a time ---------- */

.app-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.app-pick {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 460px;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--rule-strong);
}

.app-of {
  font-size: 13px;
  color: var(--charcoal-faint);
}

/* ---------- the calendar on a phone ---------- */

@media (max-width: 560px) {
  .cal-day { min-height: 54px; }
  .cal-body { min-height: 52px; padding: 5px; gap: 0; }

  /* Seven columns do not get narrower than seven columns, so the words
     go and the colour stays. "PUBLIC HOLID" clipped mid-word says less
     than a maroon square does. Both are still in the aria-label. There
     is no hover on a phone either, so the day panel is the way in. */
  .cal-note, .cal-shut { display: none; }
  /* A tickbox is the control you use most on this screen, and 30px is
     not a thumb. */
  .cal-tick, .cal-bin { width: 40px; height: 40px; }
  .cal-item { padding: 5px 6px 5px 5px; }
  .cal-day.is-closed .cal-n { color: var(--maroon); }
}

.admin-count {
  font-family: var(--body); font-size: 13px; letter-spacing: 0.02em;
  color: var(--charcoal-faint); font-style: italic; margin-left: 8px;
}

/* ---------- today ---------- */

.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 24px;
}
.stat { background: var(--cream-raised); padding: 18px 16px; }
.stat-n {
  display: block; font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
  font-size: clamp(24px, 5vw, 32px); font-variant-numeric: tabular-nums;
}
.stat-l {
  display: block; margin-top: 6px;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--charcoal-faint);
}

.week { display: flex; flex-direction: column; gap: 7px; }
.week-row { display: grid; grid-template-columns: 4.5em 1fr 5em; gap: 12px; align-items: center; }
.week-day, .week-amt {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.06em;
  color: var(--charcoal-soft); font-variant-numeric: tabular-nums;
}
.week-amt { text-align: right; }
.week-track { height: 10px; background: var(--cream-card); }
.week-bar { height: 100%; background: var(--maroon); }

/* ---------- switches ---------- */

.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 22px;
  background: var(--cream-raised); border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--maroon);
}
.switch-label { font-family: var(--display); letter-spacing: 0.03em; font-size: 17px; }
.switch-note { font-size: 14px; color: var(--charcoal-faint); margin-top: 3px; }

.admin-form .field { margin-bottom: 16px; }
.saved-note {
  margin-left: 12px; font-family: var(--display); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--maroon);
}

/* ---------- square ---------- */

.square-box { background: var(--cream-raised); border: 1px solid var(--rule); padding: 18px; }
.square-state {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px;
}
.square-state--on  { color: var(--charcoal); }
.square-state--off { color: var(--charcoal-faint); }
.square-list { margin-top: 12px; }
.square-list > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.square-list > div:last-child { border-bottom: none; }
.square-list dt { color: var(--charcoal-soft); font-size: 15px; }
.square-list dd {
  font-family: var(--display); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; font-size: 16px;
}

/* ---------- messages ---------- */

.messages { display: flex; flex-direction: column; gap: 12px; }
.msg {
  background: var(--cream-raised); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong); padding: 14px 16px;
}
.msg--new { border-left-color: var(--maroon); }
.msg-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.msg-name { font-family: var(--display); letter-spacing: 0.03em; font-size: 17px; }
.msg-when { font-size: 13px; color: var(--charcoal-faint); }
.msg-contact { font-size: 14px; margin-top: 3px; }
.msg-contact a { color: var(--maroon); }
.msg-body { margin-top: 10px; color: var(--charcoal-soft); white-space: pre-wrap; }
.msg-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.msg-btn {
  font-family: var(--display); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; background: transparent; color: var(--charcoal-soft);
  border: 1px solid var(--rule-strong); padding: 8px 12px; cursor: pointer; min-height: 36px;
}
.msg-btn:hover { border-color: var(--maroon); color: var(--maroon); }

.square-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- card payment ---------- */

.card-holder {
  min-height: 52px;
  padding: 6px 10px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
}

.pay-secure {
  margin-top: 10px;
  font-size: 13px;
  color: var(--charcoal-faint);
  text-align: center;
  font-style: italic;
}

/* ============================================================
   THE TILL  (pos.html)
   iPad first. Every target 56px or bigger, nothing hidden behind
   a long press, and the ticket column never reflows while a
   thumb is on it.
   ============================================================ */

.pos-body { background: var(--cream); overflow: hidden; }

.pos {
  display: grid;
  grid-template-columns: 1fr 360px;
  height: 100vh;
  height: 100dvh;
}

/* ---------- menu side ---------- */

.pos-menu { display: flex; flex-direction: column; min-width: 0; }

.pos-tabs {
  display: flex; gap: 0; overflow-x: auto;
  background: var(--cream-raised); flex: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-top: env(safe-area-inset-top, 0);
}

.pos-tab {
  flex: 1 0 auto; min-width: 130px; min-height: 62px;
  padding: 0 22px;
  background: transparent; border: none;
  border-bottom: 3px solid transparent;
  color: var(--charcoal-faint);
  font-family: var(--display); font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
}
.pos-tab.is-on { color: var(--charcoal); border-bottom-color: var(--maroon); }

/* The arrangement is worked out in pos.js from the space actually on
   the screen, so the columns and rows are set inline. What is left here
   is the fallback for before that runs, and the scrolling mode it falls
   back to when there are more items than will ever fit. */
.pos-grid {
  flex: 1; min-height: 0; overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 118px;
  align-content: start;
  gap: 12px; padding: 16px;
}
.pos-grid.is-scrolling {
  overflow-y: auto;
  grid-auto-rows: 108px;
  align-content: start;
}

.pos-tile {
  min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 10px 14px; overflow: hidden;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--maroon);
  text-align: left; cursor: pointer;
  transition: background 0.12s ease, transform 0.06s ease;
}
.pos-tile:active { transform: scale(0.98); background: var(--cream-card); }

.pos-tilename {
  font-family: var(--display); letter-spacing: 0.03em; line-height: 1.1;
  font-size: clamp(17px, calc(var(--tile-h, 108px) * 0.2), 34px);
}
.pos-tileprice {
  font-family: var(--display); letter-spacing: 0.03em; color: var(--charcoal);
  font-size: clamp(14px, calc(var(--tile-h, 108px) * 0.15), 24px);
  font-variant-numeric: tabular-nums;
}
.pos-tilesizes {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal-faint);
}

/* ---------- ticket side ---------- */

.pos-ticket {
  display: flex; flex-direction: column;
  background: var(--cream-raised);
  border-left: 1px solid var(--rule-strong);
  min-width: 0;
}

.pos-tickethead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--cream-card); color: var(--charcoal);
  border-bottom: 1px solid var(--rule-strong);
}
.pos-ticketlabel {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal-faint);
}
.pos-ticketno { font-family: var(--display); font-weight: 700; letter-spacing: 0.03em; font-size: 20px; }

.pos-onlinebtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  color: var(--charcoal-soft);
  border: 1px solid var(--rule-strong);
  padding: 10px 12px; min-height: 44px;
}
.pos-onlinebtn.has-waiting { border-color: var(--maroon); color: var(--maroon); }
.pos-badge {
  min-width: 22px; height: 22px; border-radius: 11px;
  display: inline-grid; place-items: center;
  background: var(--maroon); color: var(--cream);
  font-size: 12px; font-family: var(--display); letter-spacing: 0.03em;
}

.pos-lines { flex: 1; overflow-y: auto; padding: 6px 14px; }

.pos-emptyticket {
  color: var(--charcoal-faint); font-style: italic; text-align: center; padding: 40px 10px;
}

.pos-line {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.pos-lineinfo { min-width: 0; }
.pos-linename { display: block; font-size: 16px; }
.pos-linesub {
  display: block; margin-top: 2px;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal-faint);
}
.pos-qty { display: flex; align-items: center; gap: 2px; }
.pos-qtybtn {
  width: 44px; height: 44px;
  background: var(--cream); border: 1px solid var(--rule-strong);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.pos-qtybtn:active { background: var(--cream-card); }
.pos-qtyn {
  min-width: 30px; text-align: center;
  font-family: var(--display); letter-spacing: 0.03em; font-size: 17px; font-variant-numeric: tabular-nums;
}
.pos-lineprice {
  font-family: var(--display); letter-spacing: 0.03em; font-size: 16px;
  font-variant-numeric: tabular-nums; min-width: 4.4em; text-align: right;
}

.pos-tally { padding: 14px 16px; border-top: 1px solid var(--rule-strong); }
.pos-tallyrow {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--display); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal-soft);
  padding: 3px 0;
}
.pos-tallyrow--total { font-size: 15px; padding-top: 8px; }
.pos-tallyrow--total strong { font-size: 32px; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.pos-gst { font-size: 12px; color: var(--charcoal-faint); font-style: italic; margin-top: 4px; }

.pos-actions {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: var(--rule-strong);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.pos-act {
  min-height: 72px; border: none; cursor: pointer;
  font-family: var(--display); font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.pos-act:disabled { opacity: 0.4; cursor: default; }
.pos-act--clear { background: var(--cream); color: var(--charcoal-soft); }
.pos-act--cash  { background: var(--cream-card); color: var(--charcoal); }
.pos-act--card  { background: var(--maroon); color: var(--cream); }
.pos-act:active:not(:disabled) { filter: brightness(0.94); }

/* ---------- sheets ---------- */

.pos-sheet {
  position: fixed; inset: 0; z-index: 300;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.pos-sheet-inner {
  width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: var(--cream); border-top: 3px solid var(--maroon);
}
.pos-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--rule);
}
.pos-sheet-head h2 { font-family: var(--display); font-weight: 700; letter-spacing: 0.03em; font-size: 22px; }
.pos-sheet-body { padding: 16px 18px; }
.pos-sheet-label {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--charcoal-faint); margin: 4px 0 10px;
}
.pos-sheet-add { margin: 0; border-radius: 0; min-height: 64px; }

.pos-sizes, .pos-mods { display: grid; gap: 10px; margin-bottom: 20px; }
.pos-size, .pos-mod {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 12px 16px;
  background: var(--cream-raised); border: 1px solid var(--rule-strong);
  font-size: 17px; cursor: pointer; text-align: left;
}
/* The sheet now opens with a size and a milk already chosen, so the
   selected state is on screen every single time. A maroon fill twice
   over was more of the accent than the whole page is meant to carry,
   and it read as an alarm rather than an answer. A heavy left edge and
   a darker ground says the same thing quietly, and still carries to
   arm's length because nothing else in the sheet has either. */
.pos-size.is-on, .pos-mod.is-on {
  background: var(--cream-card);
  border-color: var(--rule-strong);
  border-left: 5px solid var(--maroon);
  padding-left: 12px;
}
.pos-sizename { font-family: var(--display); letter-spacing: 0.03em; }
.pos-sizeprice, .pos-modprice { font-family: var(--display); letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }

/* ---------- cash ---------- */

.pos-cash { padding: 16px 18px; }
.pos-cashrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-soft);
}
.pos-cashrow strong { font-size: 24px; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.pos-cashrow--change strong { color: var(--charcoal); }
.pos-cashrow--change.is-short strong { color: var(--maroon); }

.pos-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 16px 0; }
.pos-quickbtn {
  min-height: 52px; background: var(--cream-raised);
  border: 1px solid var(--rule-strong); cursor: pointer;
  font-family: var(--display); letter-spacing: 0.03em; font-size: 14px; font-variant-numeric: tabular-nums;
}
.pos-quickbtn:active { background: var(--cream-card); }

.pos-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pos-key {
  min-height: 62px; background: var(--cream-raised);
  border: 1px solid var(--rule-strong); cursor: pointer;
  font-family: var(--display); font-weight: 700; letter-spacing: 0.03em; font-size: 22px;
}
.pos-key:active { background: var(--cream-card); }

/* ---------- card ---------- */

.pos-card { padding: 22px 18px; text-align: center; }
.pos-cardamt {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
  font-size: clamp(40px, 10vw, 58px); font-variant-numeric: tabular-nums;
}
.pos-cardstate { color: var(--charcoal-soft); margin-top: 6px; }
.pos-cardnote {
  margin-top: 20px; padding: 14px 16px; text-align: left;
  background: var(--cream-card); border-left: 3px solid var(--maroon);
  font-size: 14px; color: var(--charcoal-soft); line-height: 1.6;
}

/* ---------- narrow / portrait iPad ---------- */

@media (max-width: 820px) {
  .pos { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .pos-ticket { border-left: none; border-top: 1px solid var(--rule-strong); max-height: 46vh; }
  .pos-tickethead { padding-top: 14px; }
}

/* ---------- till: the sale is done ---------- */

.pos-done { padding: 26px 18px 20px; text-align: center; }
.pos-donelabel {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--charcoal-faint);
}
.pos-doneamount {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
  font-size: clamp(48px, 12vw, 68px); line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--charcoal);
  margin: 4px 0 24px;
}

/* ---------- till: recent sales ---------- */

.pos-recent { padding: 8px 18px 18px; max-height: 62vh; overflow-y: auto; }

.pos-recentrow {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.pos-recentrow.is-void { opacity: 0.5; }

.pos-recentleft { display: flex; flex-direction: column; min-width: 0; }
.pos-recentcode { font-family: var(--display); letter-spacing: 0.03em; font-size: 17px; }
.pos-recentmeta {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-faint); margin-top: 2px;
}
.pos-recentamt {
  font-family: var(--display); letter-spacing: 0.03em; font-size: 17px;
  font-variant-numeric: tabular-nums; min-width: 4.4em; text-align: right;
}
.pos-void {
  min-height: 44px; padding: 8px 14px;
  background: transparent; border: 1px solid var(--rule-strong);
  color: var(--charcoal-soft); cursor: pointer;
  font-family: var(--display); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.pos-void:hover { border-color: var(--maroon); color: var(--maroon); }
.pos-void:disabled { opacity: 0.4; cursor: default; }
.pos-recentvoid {
  font-family: var(--display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-faint); padding: 8px 14px;
}

/* ---------- the wait clock on an order card ---------- */

.ocard-clock {
  font-family: var(--display); font-weight: 700;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--charcoal-soft);
  margin-top: 8px;
  line-height: 1;
}
.ocard-clock.is-warm { color: var(--maroon); }
.ocard-clock.is-late {
  color: var(--cream); background: var(--maroon);
  display: inline-block; padding: 1px 10px 3px;
}

.counter-lastwait {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--charcoal-faint);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   SCREENS  (screens.html)
   The way in to the staff screens: one menu, one passcode. Sized
   for a thumb on an iPad rather than a mouse, because that is what
   it will be opened on.
   ============================================================ */

.screens-main { flex: 1; padding: var(--gutter); max-width: 1000px; width: 100%; margin: 0 auto; }

.screens-sec { margin-bottom: 44px; }

.screens-lede {
  color: var(--charcoal-soft);
  max-width: 56ch;
  margin: -8px 0 20px;
}

.screens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* Names only — the notes came off, and a card that is one word does not
   need the height of one that was a paragraph. */
.screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: 86px;
  padding: 16px 20px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--maroon);
  text-decoration: none;
  color: inherit;
}

a.screen:hover { background: var(--cream-card); }

.screen-name {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 30px;
  line-height: 1;
}

.screen-note {
  font-size: 15px;
  line-height: 1.5;
  color: var(--charcoal-soft);
}

/* Named, but nothing behind it yet. Kept on the menu on purpose —
   a gap you can see is one that gets closed. */
.screen.is-todo {
  border-left-color: var(--rule-strong);
  background: transparent;
}
.screen.is-todo .screen-name { color: var(--charcoal-faint); }
.screen.is-todo .screen-note { color: var(--charcoal-faint); }

/* ============================================================
   THE STAFF MENU  (staff-nav.js)
   The hamburger in each staff bar. It borrows whichever button
   class that screen's bar already uses, so it only brings its
   own bars.
   ============================================================ */

[data-staff-nav] > a {
  display: inline-flex; align-items: center; justify-content: center;
}

.burger-bars {
  display: block;
  width: 17px; height: 2px;
  background: currentColor;
  position: relative;
}
.burger-bars::before,
.burger-bars::after {
  content: ""; position: absolute; left: 0;
  width: 17px; height: 2px; background: currentColor;
}
.burger-bars::before { top: -5px; }
.burger-bars::after  { top:  5px; }

/* ---------- admin: the new starter form ---------- */
/* A piece of paper you hand someone, so it is presented as one thing
   with two ways out of it rather than a link buried in a sentence. */

/* A link to a PDF, not an announcement. It was set at the size of a
   headline with a 24px name and buttons to match, which on a screen
   that also carries the day's takings and a month of trading made the
   New Starter form the loudest thing in view. Narrowed and quietened:
   still a card, still one tap from the form. */
.paper {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  max-width: 560px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--maroon);
}
.paper-copy { flex: 1 1 200px; min-width: 0; }
.paper-name {
  font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.06em; line-height: 1.15;
}
.paper-note {
  font-size: 13px; color: var(--charcoal-soft);
  margin-top: 3px; max-width: 52ch;
}
.paper-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The buttons come down with it, or a small card with full-size
   buttons in it is just a button rack with a label. */
.paper .btn {
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 8px 14px;
  min-height: 36px;
}

/* On a phone the card wraps and the buttons get a line to themselves,
   so there is room to put the thumb-sized target back. 36px is fine
   beside a 15px name on a laptop; it is not fine under a thumb. */
@media (max-width: 560px) {
  .paper .btn { min-height: 44px; padding: 11px 14px; }
}

/* ---------- the till's tools row ---------- */
/* Switches for whoever is on the till, sat under the tiles rather than
   in the ticket, because they change what the menu side shows. Prices
   are off by default: staff know them, and at speed the name is the
   thing being read. */

.pos-tools {
  flex: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 16px 14px;
}

.pos-tool {
  min-height: 44px; padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--charcoal-soft);
  font-family: var(--display); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}
.pos-tool:hover { border-color: var(--charcoal); color: var(--charcoal); }
.pos-tool.is-on {
  background: var(--cream-card);
  border-color: var(--maroon);
  color: var(--charcoal);
}

/* ============================================================
   THE MENU, ON PAPER  (menu-print.html)
   A printing sheet rather than a page of the site. It reads the
   live menu, so what comes out of the printer is right on the day
   it is printed — which a PDF exported once is not.
   ============================================================ */

.print-body { background: var(--cream-card); }

.print-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: var(--cream-raised);
  border-bottom: 1px solid var(--rule-strong);
}
.print-note { font-size: 15px; color: var(--charcoal-soft); }
.print-bar-actions { display: flex; gap: 10px; }

/* A4 with its own margins, sat on the darker ground so the edge of the
   paper is visible before it is paper. */
.sheet {
  width: 210mm;
  min-height: 297mm;
  max-width: 100%;
  margin: 26px auto;
  padding: 18mm 16mm 14mm;
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  display: flex; flex-direction: column;
}

.sheet-head { text-align: center; margin-bottom: 12mm; }
.sheet-logo { width: 108mm; max-width: 78%; height: auto; }
.sheet-sub {
  font-family: var(--display);
  font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--charcoal-faint);
  margin-top: 5mm;
}

.sheet-body { flex: 1; }

.sheet-cat { margin-bottom: 9mm; break-inside: avoid; }
.sheet-catname {
  font-family: var(--display);
  font-size: 15px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase;
  padding-bottom: 3mm;
  border-bottom: 1px solid var(--maroon);
}

.sheet-table { width: 100%; border-collapse: collapse; }
.sheet-table th, .sheet-table td { padding: 2.6mm 0; vertical-align: baseline; }
.sheet-size {
  font-family: var(--display);
  font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-faint);
  text-align: right; width: 26mm;
}
.sheet-item {
  font-family: var(--display);
  font-size: 21px; font-weight: 400; letter-spacing: 0.03em;
  text-align: left;
}
.sheet-price {
  font-family: var(--display);
  font-size: 19px; letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  text-align: right; width: 26mm;
}

.sheet-extras {
  font-family: var(--display);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--charcoal-soft);
  padding-top: 4mm;
  border-top: 1px solid var(--rule-strong);
}

.sheet-foot { margin-top: 10mm; text-align: center; }
.sheet-hours {
  font-family: var(--display);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--charcoal-soft);
}
.sheet-fine {
  font-size: 13px; font-style: italic;
  color: var(--charcoal-faint);
  margin-top: 3mm;
}

@media print {
  @page { size: A4; margin: 0; }
  .no-print { display: none !important; }
  .print-body { background: none; }
  .sheet {
    width: auto; min-height: 0;
    margin: 0; border: none; background: none;
    padding: 16mm 16mm 12mm;
  }
}

/* ============================================================
   THE KIOSK  (kiosk.html)
   The screen by the door, stood on end. Read from further away
   than the till — the customer is arm's length back and has not
   used it before — so everything is a size up on /pos and the
   price is never hidden. Every target is 64px or bigger.
   ============================================================ */

.kiosk-body { background: var(--cream); overflow: hidden; }

.kiosk { height: 100vh; height: 100dvh; }

/* ---------- the bar ---------- */

.kiosk-bar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gutter);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--cream-card);
  border-bottom: 1px solid var(--rule-strong);
}
.kiosk-mark {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 15px;
  /* it is also the staff door — five taps. Nothing says so. */
  cursor: default; -webkit-user-select: none; user-select: none;
}
.kiosk-quit {
  min-height: 52px; padding: 0 20px;
  background: transparent; border: 1px solid var(--rule-strong);
  color: var(--charcoal-soft); cursor: pointer;
  font-family: var(--display); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- 1. waiting for somebody ---------- */

.kiosk-attract {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: var(--gutter); text-align: center;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.kiosk-attract-h {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0.04em; line-height: 0.95;
  font-size: clamp(64px, 16vw, 190px);
}
.kiosk-attract-sub {
  font-family: var(--display); letter-spacing: 0.24em; text-transform: uppercase;
  font-size: clamp(14px, 2.4vw, 22px); color: var(--charcoal-soft);
}
/* A maroon rule that breathes, rather than an animated hand. It is the
   only thing moving on a screen that will be on all day. */
.kiosk-attract-hand {
  width: clamp(60px, 14vw, 140px); height: 4px; background: var(--maroon);
  animation: kiosk-breathe 2.6s ease-in-out infinite;
}
@keyframes kiosk-breathe {
  0%, 100% { opacity: 0.25; transform: scaleX(0.6); }
  50%      { opacity: 1;    transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .kiosk-attract-hand { animation: none; opacity: 1; }
}

/* ---------- 2. choosing ---------- */

.kiosk-order { height: 100%; display: flex; flex-direction: column; }

/* The menu, in the shape the shop already reads in — the printed menu
   and the table on menu.html, one size up and with the prices as
   buttons. Names down the left, sizes across the top, price in the
   cell. Columns come from the data, so `--cols` is set per section by
   kiosk.js and this file never learns what a coffee is. */

.kiosk-board {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 24px var(--gutter) 30px;
  -webkit-overflow-scrolling: touch;
}

/* A menu is read in a column, not stretched across a wall. On a big
   landscape screen the names would end up an arm's length from their
   prices, so the board stops widening and centres instead. */
.kiosk-sec, .kiosk-extras { max-width: 900px; margin-inline: auto; }
.kiosk-sec { margin-bottom: 34px; }
.kiosk-sec:last-of-type { margin-bottom: 0; }

/* One grid shared by the heading row and every row under it, so the
   prices line up under their column headings without a table. */
.kiosk-sechead, .kiosk-row {
  display: grid;
  grid-template-columns: 1fr repeat(var(--cols, 1), minmax(4.6em, max-content));
  align-items: end;
  gap: 0 8px;
}

.kiosk-sechead {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
}
.kiosk-sech {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 3.4vw, 26px);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.kiosk-colh { text-align: right; padding-right: 18px; }
.kiosk-colname {
  display: block;
  font-family: var(--display); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal-faint);
}
.kiosk-colnote {
  display: block;
  font-family: var(--display); font-size: 12px;
  letter-spacing: 0.1em; color: var(--charcoal-faint);
}

.kiosk-row { align-items: stretch; border-bottom: 1px solid var(--rule); }
.kiosk-sec .kiosk-row:last-child { border-bottom: none; }

.kiosk-rowname {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 14px 12px 14px 0;
  min-height: 74px;                      /* a thumb, on every row */
}
.kiosk-itemname {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0.03em; line-height: 1.1;
  font-size: clamp(21px, 3.6vw, 27px);
}
.kiosk-itemdesc { font-size: 15px; line-height: 1.35; color: var(--charcoal-faint); }

/* The price IS the button. It fills its cell so the target is the whole
   height of the row, not the height of the digits. */
.kiosk-cell {
  min-height: 74px; padding: 0 18px;
  background: transparent; border: none;
  border-left: 1px solid var(--rule);
  cursor: pointer; text-align: right;
  font-family: var(--display); letter-spacing: 0.03em;
  font-size: clamp(19px, 3vw, 23px);
  font-variant-numeric: tabular-nums;
  color: var(--charcoal);
  transition: background 0.12s ease, color 0.12s ease;
}
.kiosk-cell:active { background: var(--maroon); color: var(--cream); }
@media (hover: hover) {
  .kiosk-cell:hover { background: var(--cream-card); }
}

/* Espresso has no regular. The printed menu says so with a dash and so
   does this, rather than leaving a hole to interpret. */
.kiosk-cellgap {
  display: grid; place-items: center; min-height: 74px; padding: 0 18px;
  border-left: 1px solid var(--rule);
  color: var(--charcoal-faint);
}

/* With one size there is nothing else a tap could mean, so the name is
   part of the target too. */
.kiosk-row.is-wholerow .kiosk-rowname { cursor: pointer; }
.kiosk-row.is-wholerow:active { background: var(--cream-raised); }

.kiosk-sec--note { padding-top: 4px; }
.kiosk-sec--note .kiosk-sech {
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-strong); display: block;
}
.kiosk-secnote { padding: 16px 0; font-size: 17px; color: var(--charcoal-soft); }

.kiosk-extras {
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--display); font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal-faint);
}
.kiosk-extra { white-space: nowrap; }
.kiosk-extraplus { color: var(--maroon); padding-left: 6px; }
.kiosk-extrasep { padding: 0 10px; }

/* ---------- the running order ---------- */

.kiosk-tray {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--cream-card);
  border-top: 1px solid var(--rule-strong);
}
.kiosk-traysum {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--display); letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 14px; color: var(--charcoal-soft);
}
.kiosk-traysum strong {
  font-size: 30px; letter-spacing: 0.03em; text-transform: none;
  color: var(--charcoal); font-variant-numeric: tabular-nums;
}
.kiosk-traybtn {
  min-height: 68px; padding: 0 34px; border: none; cursor: pointer;
  background: var(--maroon); color: var(--cream);
  font-family: var(--display); font-size: 17px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.kiosk-traybtn:active { filter: brightness(0.94); }

/* Twenty is the cap the database enforces. Saying so at the tap that
   went over beats saying it after a card has been entered. */
.kiosk-tray.is-capped { background: var(--maroon-wash); }
.kiosk-tray.is-capped .kiosk-traysum::after {
  content: 'That is as much as this screen takes — please order the rest at the counter.';
  text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--maroon);
}

/* ---------- 3, 4, 5. the full-screen panels ---------- */

.kiosk-panel { height: 100%; display: flex; flex-direction: column; }
.kiosk-panel-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 26px var(--gutter);
}
.kiosk-h {
  font-family: var(--display); font-weight: 700;
  letter-spacing: 0.04em; font-size: clamp(30px, 6vw, 46px); margin-bottom: 18px;
}

.kiosk-lines { border-top: 1px solid var(--rule); }
.kiosk-line {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.kiosk-lineinfo { min-width: 0; }
.kiosk-linename { display: block; font-size: 21px; }
.kiosk-linesub {
  display: block; margin-top: 3px;
  font-family: var(--display); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal-faint);
}
.kiosk-qty { display: flex; align-items: center; gap: 4px; }
.kiosk-qtybtn {
  width: 64px; height: 64px; cursor: pointer;
  background: var(--cream); border: 1px solid var(--rule-strong);
  font-size: 26px; line-height: 1;
}
.kiosk-qtybtn:active { background: var(--cream-card); }
.kiosk-qtyn {
  min-width: 44px; text-align: center;
  font-family: var(--display); letter-spacing: 0.03em;
  font-size: 22px; font-variant-numeric: tabular-nums;
}
.kiosk-lineprice {
  font-family: var(--display); letter-spacing: 0.03em; font-size: 21px;
  font-variant-numeric: tabular-nums; min-width: 4.4em; text-align: right;
}

.kiosk-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 22px; padding-top: 14px; border-top: 2px solid var(--charcoal);
  font-family: var(--display); font-size: 17px;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.kiosk-total strong {
  font-size: clamp(38px, 8vw, 58px); letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.kiosk-gst { font-size: 14px; font-style: italic; color: var(--charcoal-faint); margin-top: 6px; }

.kiosk-foot {
  flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule-strong);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.kiosk-foot:has(> :only-child) { grid-template-columns: 1fr; }
.kiosk-act {
  min-height: 92px; border: none; cursor: pointer;
  font-family: var(--display); font-size: 19px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.kiosk-act--quiet { background: var(--cream-raised); color: var(--charcoal-soft); }
.kiosk-act--go { background: var(--maroon); color: var(--cream); }
.kiosk-act:disabled { opacity: 0.45; cursor: default; }
.kiosk-act:active:not(:disabled) { filter: brightness(0.94); }

/* ---------- 4. the card ---------- */

.kiosk-payamt {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
  font-size: clamp(48px, 12vw, 78px); font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
}
/* Square draws its own fields in here. Give it room and a plain ground;
   the iframe brings its own type. */
.kiosk-cardfield {
  min-height: 96px; padding: 6px 0;
}
.kiosk-cardnote { color: var(--charcoal-faint); font-style: italic; margin-top: 10px; }

/* ---------- 5. done ---------- */

.kiosk-panel--done { background: var(--cream-raised); }
.kiosk-donebody {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
}
.kiosk-donelabel {
  font-family: var(--display); letter-spacing: 0.2em; text-transform: uppercase;
  font-size: clamp(14px, 2.4vw, 20px); color: var(--charcoal-soft);
}
.kiosk-donecode {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.04em;
  font-size: clamp(56px, 15vw, 150px); line-height: 1; color: var(--maroon);
}
.kiosk-donesub { font-size: 20px; color: var(--charcoal-soft); }
.kiosk-donetotal {
  font-family: var(--display); letter-spacing: 0.03em; font-size: 26px;
  font-variant-numeric: tabular-nums; margin-top: 14px;
}

/* ---------- switched off ---------- */

.kiosk-panel--paused { background: var(--cream-raised); }
.kiosk-pausedh {
  font-family: var(--display); font-weight: 700; letter-spacing: 0.03em;
  font-size: clamp(30px, 6vw, 56px); line-height: 1.1; max-width: 18ch;
}

/* ---------- still there? ---------- */

.kiosk-idle { text-align: center; padding: 30px 22px; }
.kiosk-idlesub { color: var(--charcoal-soft); margin: 10px 0 24px; font-size: 18px; }

/* ---------- staff ---------- */

.kiosk-staffacts { display: grid; gap: 12px; margin-top: 8px; }
.kiosk-signout {
  background: transparent; border: 1px solid var(--rule-strong);
  color: var(--charcoal-soft); min-height: 56px; cursor: pointer;
  font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px;
}

/* The sheets are the till's, one size up — the customer is further back. */
.kiosk-sheet { max-width: 560px; }
.kiosk-sheet .pos-size, .kiosk-sheet .pos-mod { min-height: 72px; font-size: 20px; }
.kiosk-sheet .pos-sheet-add { min-height: 82px; font-size: 18px; }
.kiosk-sheet .pos-sheet-head h2 { font-size: 28px; }

/* The sheet's Add button carries the running price of this drink. */
.pos-sheet-add:has(.kiosk-addprice) {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.kiosk-addprice { font-variant-numeric: tabular-nums; opacity: 0.85; }

/* ============================================================
   CHOOSING THE MILK  (shop.js)
   The website's version of the till's option sheet. Same shape of
   decision, so the same shape of answer: one milk, any extras.
   ============================================================ */

.opt-sheet {
  position: fixed; inset: 0; z-index: 300;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

.opt-inner {
  width: 100%; max-width: 420px; max-height: 88vh;
  overflow-y: auto;
  background: var(--cream);
  border-top: 3px solid var(--maroon);
}

/* The size under the name rather than run on after it. Set in tracked
   capitals, "FLAT WHITE · REGULAR (12OZ)" wraps mid-bracket on a phone
   and reads as one long string. */
.opt-h-size {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--charcoal-faint);
}

.opt-body { padding: 16px 18px 4px; }

.opt-label {
  font-family: var(--display);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--charcoal-faint);
  margin: 6px 0 10px;
}

.opt-list { display: grid; gap: 8px; margin-bottom: 18px; }

/* Named opt-row, not opt: `.opt` was already the "optional" hint beside a
   form label, and a bare class name that generic will always be somebody
   else's too. Claiming it turned every optional-field hint on the site
   into a bordered box. */
.opt-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 54px; padding: 12px 16px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  color: inherit;
  font-family: var(--body); font-size: 17px;
  text-align: left; cursor: pointer;
}
.opt-row:hover { border-color: var(--charcoal-faint); }

/* Chosen. A heavy edge on a darker ground rather than a filled block —
   something is always selected here, so a fill would put a slab of the
   accent on screen every time the sheet opens. */
.opt-row.is-on {
  background: var(--cream-card);
  border-left: 5px solid var(--maroon);
  padding-left: 12px;
}

.opt-price {
  font-family: var(--display);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--charcoal-soft);
}

.opt-add { margin: 0; min-height: 58px; }

/* The message form sits beside the address now, in the column the hours
   card used to hold, so the rule and the space that separated it from
   what was above it are no longer separating anything. */
.msg-form--beside { max-width: none; }

@media (min-width: 720px) {
  .msg-form--beside { margin-top: 0; padding-top: 0; border-top: none; }
}

/* ============================================================
   ORDER ONLINE  (index.html)
   The pitch, and a working preview of the thing being pitched.
   ============================================================ */

.order-promo {
  display: grid;
  gap: 34px;
  align-items: center;
}

.order-copy p {
  color: var(--charcoal-soft);
  max-width: 44ch;
  margin-bottom: 16px;
}
.order-copy .btn { margin-top: 6px; }

/* A phone, drawn rather than photographed. The screen holds the real
   ordering page in an iframe: a screenshot would show whatever the
   prices were the day it was taken, and a menu that lies about its own
   prices is worse than no picture at all. */
.phone {
  --phone-w: 300px;
  --phone-h: 600px;
  --shrink: 0.72;                 /* how much of a real phone is shown */

  width: var(--phone-w);
  height: var(--phone-h);
  padding: 10px;
  background: var(--charcoal);
  border-radius: 26px;
  justify-self: center;
  flex: none;
}

.phone-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  border-radius: 17px;
  position: relative;
}

/* The frame is scaled down from a real phone width rather than being a
   narrow viewport of its own, so the preview shows the mobile layout
   the customer will actually get. */
.phone-screen iframe {
  position: absolute;
  top: 0; left: 0;
  width: calc(var(--phone-w) - 20px);
  height: calc(var(--phone-h) - 20px);
  transform: scale(var(--shrink));
  transform-origin: 0 0;
  width: calc((var(--phone-w) - 20px) / var(--shrink));
  height: calc((var(--phone-h) - 20px) / var(--shrink));
  border: 0;
  pointer-events: none;           /* the button is the way in, not this */
}

@media (min-width: 860px) {
  .order-promo { grid-template-columns: 1fr auto; gap: 56px; }
  .phone { justify-self: end; }
}

/* A phone frame is decoration. On a phone it is a picture of the thing
   you are already holding, so it goes away and the copy gets the room. */
@media (max-width: 600px) {
  .phone { display: none; }
}

/* ---------- work with us  (hire.html) ---------- */

.hire-lede {
  font-size: 19px;
  color: var(--charcoal-soft);
  max-width: 50ch;
}

/* The hours, reusing the rows the homepage band already uses so the two
   cannot drift apart in how they read. Narrower here — it sits under a
   heading rather than filling a band of its own. */
.hire-hours {
  margin-top: 26px;
  max-width: 420px;
}
.hire-hours .hours-row { padding: 13px 0; }
.hire-hours dt { font-size: 14px; }
.hire-hours dd { font-size: clamp(19px, 5vw, 23px); }

.hire-form { max-width: 620px; }


.field-note {
  font-size: 14px;
  font-style: italic;
  color: var(--charcoal-faint);
  margin: -8px 0 18px;
}

.cv-field input[type="file"] {
  width: 100%;
  padding: 12px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  font-family: var(--body);
  font-size: 15px;
  cursor: pointer;
}
.cv-field .field-note { margin: 8px 0 0; }

/* ---------- admin: applications ---------- */

.app-avail {
  font-size: 15px;
  font-style: italic;
  color: var(--charcoal-faint);
  margin-top: 6px;
}

/* The only maroon in the section, on the only button that destroys
   something — and it destroys somebody else's document, not ours. */
.app-del { border-color: var(--maroon); color: var(--maroon); }
.app-del:hover { background: var(--maroon); color: var(--cream); }

/* The address in the footer. Underlined rather than coloured — the
   footer is quiet type and a maroon line down there would be the
   loudest thing on a page that has finished talking. */
.footer-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.footer-meta a:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

/* Off is worth seeing at a glance on a screen full of numbers — but it
   is a state, not an alarm, so it is the accent rather than a fill. */
.switch-note.is-off { color: var(--maroon); }

/* ---------- admin: the shop's two switches ---------- */
/* One card each, holding its own settings. The message fields used to
   sit below both switches belonging to neither, so you had to read the
   label to know which screen you were about to change. */

.shop-cards {
  display: grid;
  gap: 18px;
  margin-bottom: 26px;
}

.shop-card {
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--maroon);
  padding: 18px 20px 4px;
}

.shop-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.shop-card .field { margin-bottom: 16px; }
.shop-card .switch-note { margin-top: 4px; }

@media (min-width: 860px) {
  .shop-cards { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* A sub-heading inside the Square panel, for the readers list. */
.square-sub {
  font-family: var(--display);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--charcoal-faint);
  margin: 22px 0 4px;
}
.square-list dd.is-off { color: var(--maroon); }

/* ---------- the orders screen's settings ---------- */

/* A gear, drawn rather than fetched — one more icon is not worth a
   font or a sprite. Eight teeth is enough to read as one at 16px. */
.gear {
  display: block;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--gear-svg) center / contain no-repeat;
  mask: var(--gear-svg) center / contain no-repeat;
}

:root {
  --gear-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zm0 5.5a2 2 0 110-4 2 2 0 010 4z'/%3E%3Cpath d='M20.6 13.5l-1.4-.8a7.4 7.4 0 000-1.4l1.4-.8a.6.6 0 00.2-.8l-1.6-2.7a.6.6 0 00-.8-.2l-1.4.8a7.3 7.3 0 00-1.2-.7V5.3a.6.6 0 00-.6-.6h-3.2a.6.6 0 00-.6.6v1.6c-.4.2-.8.4-1.2.7l-1.4-.8a.6.6 0 00-.8.2L6.4 9.7a.6.6 0 00.2.8l1.4.8a7.4 7.4 0 000 1.4l-1.4.8a.6.6 0 00-.2.8l1.6 2.7a.6.6 0 00.8.2l1.4-.8c.4.3.8.5 1.2.7v1.6c0 .3.3.6.6.6h3.2a.6.6 0 00.6-.6v-1.6c.4-.2.8-.4 1.2-.7l1.4.8a.6.6 0 00.8-.2l1.6-2.7a.6.6 0 00-.2-.8z'/%3E%3C/svg%3E");
}

.settings-menu {
  position: absolute;
  right: var(--gutter);
  z-index: 40;
  min-width: 200px;
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--maroon);
  display: flex; flex-direction: column;
}

.settings-item {
  font-family: var(--display);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: left; text-decoration: none;
  color: var(--charcoal-soft);
  background: none; border: none;
  border-bottom: 1px solid var(--rule);
  padding: 14px 18px; min-height: 48px;
  cursor: pointer;
}
.settings-item:last-child { border-bottom: none; }
.settings-item:hover { background: var(--cream-raised); color: var(--charcoal); }

/* ---------- the orders board: a card is a button ---------- */
/* Start and Cancel are gone. One tap on the card serves it, and a double
   tap on the board brings the last one back — which is the safety net
   that makes a target this large reasonable. */

.ocard {
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, transform 0.06s ease;
  -webkit-tap-highlight-color: transparent;
}
.ocard:hover { background: var(--cream-card); }
.ocard:active { transform: scale(0.995); }
.ocard:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }

/* Between the tap and the board coming back, so nobody taps twice. */
.ocard.is-going { opacity: 0.45; pointer-events: none; }

/* The clock moved into the head, beside the name. Small: it is a glance,
   not a headline, and it was previously the largest thing on the card. */
.ocard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ocard-head .ocard-clock {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--charcoal-faint);
  margin: 0;
  line-height: 1;
  display: inline-block;
  padding: 0;
  background: none;
}
.ocard-head .ocard-clock.is-warm { color: var(--maroon); background: none; }
.ocard-head .ocard-clock.is-late {
  color: var(--cream);
  background: var(--maroon);
  padding: 2px 8px 3px;
}

.ocard .ocard-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.03em;
  line-height: 1.05;
  margin: 0;
}

.ocard-phone { color: var(--charcoal-faint); font-size: 14px; }

/* ---------- the till: who it is for ---------- */
/* The orders screen leads with the name, so the till has to be able to
   put one on. It sits at the top of the ticket because it is the first
   thing said at a counter, not the last. */

.pos-name {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--cream-raised);
  flex: none;
}

.pos-namelabel {
  font-family: var(--display);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--charcoal-faint);
  flex: none;
}

.pos-name input {
  flex: 1; min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule-strong);
  padding: 8px 2px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.03em;
  color: var(--charcoal);
}
.pos-name input:focus { outline: none; border-bottom-color: var(--maroon); }

/* ---------- a ticket being rung up ---------- */
/* Drawn as unfinished on purpose: it is not an order, there is nothing
   to hand over, and nothing is owed yet. Dashed rather than solid, and
   it cannot be tapped — a card you can serve and a card you cannot must
   not look the same. */

.ocard--draft {
  background: transparent;
  border: 1px dashed var(--rule-strong);
  border-left: 4px dashed var(--charcoal-faint);
  cursor: default;
}
.ocard--draft:hover { background: transparent; }
.ocard--draft:active { transform: none; }

.ocard--draft .ocard-name { color: var(--charcoal-soft); }



/* Change a line that is already on the ticket. A wrong milk is the
   commonest mistake at a till, and re-ringing the drink is a worse way
   to fix it than changing the thing that is wrong. Quiet, because it is
   the exception rather than the flow. */
.pos-lineedit {
  flex: none;
  min-height: 40px;
  padding: 6px 12px;
  margin-left: 10px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--charcoal-faint);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.pos-lineedit:hover { border-color: var(--maroon); color: var(--maroon); }

/* ---------- an order card's drinks ---------- */
/* The drink on one line, what was done to it beneath. It used to run
   together — 'Flat white · Small (8oz) · Full cream · Extra shot' —
   which wrapped, and made the coffee and the changes to it read as the
   same kind of fact. A barista reads the drink first. */

.ocard-itemhead {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ocard-item {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* The size belongs to the drink, so it sits on the same line — but it is
   not the drink, so it is lighter. */
.ocard-size {
  font-weight: 400;
  color: var(--charcoal-soft);
}

.ocard-mods {
  list-style: none;
  margin: 4px 0 0;
  padding-left: 34px;              /* clears the quantity above it */
}

.ocard-mods li {
  position: relative;
  display: block;
  padding: 1px 0 1px 16px;
  border: none;
  font-size: 16px;
  color: var(--charcoal-soft);
}

.ocard-mods li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--charcoal-faint);
}

/* The undo, offered at the moment it is wanted. */
.flash-action {
  margin-left: 12px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--maroon);
  color: var(--maroon);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.flash-action:hover { background: var(--maroon); color: var(--cream); }

/* A change, shown as the change. The barista may already be pouring, so
   what was swapped matters more than what it ended up as. */
.ocard-mods li.is-changed::before { background: var(--maroon); }
.ocard-was { color: var(--charcoal-faint); text-decoration: line-through; }
.ocard-arrow { color: var(--charcoal-faint); }
.ocard-now { color: var(--maroon); font-weight: 700; }

/* Asking for a name before the money goes in. The placeholder already
   says "Who is it for?", so the field just has to draw the eye to
   itself — there is no message to read and nothing to dismiss. */
.pos-name input.is-asking {
  border-color: var(--maroon);
  background: var(--cream);
  animation: name-ask 0.9s ease 2;
}

@keyframes name-ask {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: inset 0 0 0 2px var(--maroon); }
}

@media (prefers-reduced-motion: reduce) {
  .pos-name input.is-asking { animation: none; box-shadow: inset 0 0 0 2px var(--maroon); }
}

/* ---------- the card field ---------- */
/* Square draws the inputs inside an iframe it owns, so this is only the
   box it lands in. The card number never reaches this page's JavaScript
   and never reaches our server. */

.card-field #cardHolder {
  min-height: 52px;
  padding: 4px;
  background: var(--cream-raised);
  border: 1px solid var(--rule-strong);
}
.card-field .field-note { margin-top: 8px; }

/* The code, kept as a reference for when two people are both called Ben
   — but not the thing anybody is asked to say out loud. */
.done-ref {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal-faint);
  margin-top: 18px;
}

/* Take a whole line off the ticket. Small and quiet — it destroys
   something, so it should not be the easiest thing on the row to hit by
   accident, and the quantity buttons beside it are what get used. */
.pos-linedrop {
  flex: none;
  width: 40px;
  min-height: 40px;
  margin-left: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--charcoal-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pos-linedrop:hover { border-color: var(--maroon); color: var(--maroon); }

/* ---------- the hire page on a phone ---------- */
/* Most people applying for a café job are doing it on a phone, probably
   standing up. The page inherited the site's editorial spacing, which is
   right for reading and wasteful for a form: 171px of heading band and
   another 96 above the first field is most of a screen before anything
   can be filled in. */

@media (max-width: 700px) {
  .order-head { padding: 28px 0 24px; }

  .hire-form {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  /* The band wrapping the form loses its editorial padding — the rule
     above the heading was separating it from a heading band that is now
     right up against it. */
  .band-hire { padding: 26px 0 40px; }

  /* Thumb-sized. 44px is the documented minimum and a minimum is not a
     target; these are what actually get tapped. */
  .hire-form input,
  .hire-form textarea,
  .hire-form select { min-height: 54px; font-size: 17px; }

  .hire-form textarea { min-height: 96px; }

  .hire-form .btn-block {
    min-height: 58px;
    font-size: 16px;
    margin-top: 8px;
  }

  /* Email and phone side by side is two cramped boxes on a 375px screen.
     They stack, and the labels stop being abbreviations of themselves. */
  .hire-form .msg-row { grid-template-columns: 1fr; gap: 0; }

  .cv-field input[type="file"] { min-height: 54px; padding: 14px 12px; }
}

/* Which position they are after — the first thing worth knowing about an
   application, so it reads above the rest rather than inside it. */
.app-role {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  margin-top: 8px;
}

/* The job dropdown. A select styles itself differently to an input in
   every browser, so it is pinned to match the fields around it — an
   arrow that is ours rather than the operating system's. */
.hire-form select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 14px 40px 14px 14px;
  background-color: var(--cream-raised);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232B2B2B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  border: 1px solid var(--rule-strong);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 17px;
  border-radius: 0;
}
.hire-form select:invalid { color: var(--charcoal-faint); }