/* Headcount, over the demo's own styles (Dan, 28 Oct): the staff side in
   Headcount's identity, as in the app (mill-preorders-app,
   public/assets/css/staff-shell.css and ds.css), each pub keeping its own look
   on the guest's side. Loaded last; the demo's markup and behaviour are
   unchanged apart from the staff bar and the opening screen. */
:root {
  --hc-ink: #10192b;
  --hc-ink-2: #2b3447;
  --hc-cobalt: #1059fc;
  --hc-cobalt-deep: #0638c4;
  --hc-canvas: #f3f6fc;
  --hc-surface: #ffffff;
  --hc-line: #e3e6ee;
  --hc-muted: #586174;
  --hc-blue-soft: #eaf0ff;
  --hc-display: 'Outfit', 'Figtree', system-ui, sans-serif;
  --hc-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* The sign-in's gradient, still (the app's --hc-still), and the phone bar's. */
  --hc-still-base: #7b7ff8;
  --hc-still: radial-gradient(62% 20% at 28% 36%, rgb(46 76 240 / 42%), rgb(46 76 240 / 0%)),
    radial-gradient(83% 49% at 8% 93%, rgb(0 91 254 / 100%), rgb(0 91 254 / 0%)), radial-gradient(35% 106% at 8% 75%, rgb(0 88 253 / 100%), rgb(0 88 253 / 0%)),
    radial-gradient(44% 18% at 62% 86%, rgb(252 179 255 / 100%), rgb(252 179 255 / 0%)),
    radial-gradient(41% 37% at 82% 15%, rgb(255 181 253 / 100%), rgb(255 181 253 / 0%)),
    radial-gradient(49% 44% at 91% 42%, rgb(255 133 58 / 94%), rgb(255 133 58 / 0%)),
    radial-gradient(35% 42% at 98% 8%, rgb(255 206 80 / 59%), rgb(255 206 80 / 0%)),
    radial-gradient(55% 14% at 76% 101%, rgb(156 113 255 / 63%), rgb(156 113 255 / 0%)),
    radial-gradient(23% 27% at 18% 20%, rgb(0 83 253 / 100%), rgb(0 83 253 / 0%)), linear-gradient(120deg, #429ffd 0%, #6c6ffd 33%, #f78cf1 66%, #ffbe86 100%);
  --hc-bar: linear-gradient(100deg, #1059fc 0%, #2f63f8 55%, #4a63f0 100%);
  /* The demo's own variables, pointed at Headcount's: ink for the teal. */
  --m-charcoal: var(--hc-ink);
  --m-teal: var(--hc-ink);
  --m-teal-deep: var(--hc-cobalt-deep);
  --m-teal-soft: var(--hc-blue-soft);
  --m-line: var(--hc-line);
  --m-muted: var(--hc-muted);
  --font-body: var(--hc-ui);
  --font-shell: var(--hc-ui);
}
body {
  font-family: var(--hc-ui);
}

/* ---------- The demo bar: the demo's own strip, in Headcount's ink */
.demo-bar {
  background: var(--hc-ink);
  font-family: var(--hc-ui);
}
.demo-bar b {
  background: var(--hc-cobalt);
  color: #fff;
}
.demo-bar__link {
  color: #fff;
}

/* ---------- The opening screen: Headcount first, the pub second */
.start__hc {
  display: block;
  width: 188px;
  height: auto;
  margin: 4px 0 18px;
}
.start__at {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  color: var(--hc-muted);
  font-size: 14px;
  font-weight: 600;
}
.start__at img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.start .m-h {
  font-family: var(--hc-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.start__steps .n {
  background: var(--hc-cobalt);
  color: #fff;
}

/* ---------- Staff side: Headcount's type and colours */
.po {
  --font-head: var(--hc-display);
  --font-m-head: var(--hc-display);
  --font-m-body: var(--hc-ui);
  color: var(--hc-ink);
}
.po-app {
  background: var(--hc-canvas);
}
.po-title,
.po-day__h,
.po h1,
.po h2 {
  letter-spacing: -0.01em;
}
.po-btn--go,
.po-nav__add {
  background: var(--hc-cobalt);
  color: #fff;
}
.po-btn--line {
  box-shadow: inset 0 0 0 1.5px var(--hc-cobalt);
  color: var(--hc-cobalt);
}
.po-tab[aria-current='page'] {
  background: var(--hc-ink);
}
/* This week opens on its title, not a photograph (the app's Concept 4). */
.po-hero {
  min-height: 0;
  padding-top: 22px;
  padding-bottom: 6px;
  background: none;
  color: var(--hc-ink);
}
.po-hero::before {
  display: none;
}
.po-hero__photo {
  display: none;
}
.po-hero__h,
.po-hero__when {
  color: var(--hc-ink);
  text-shadow: none;
}
.po-hero__h {
  font-family: var(--hc-display);
  font-weight: 800;
}

/* The bar: Headcount and the pub on the gradient, the places in white. */
.po-top.hc-side {
  border: 0;
  background: var(--hc-cobalt) var(--hc-bar);
  color: #fff;
}
.hc-side__brand img {
  display: block;
  width: 132px;
  height: auto;
}
.hc-side__venue {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 6px 12px 6px 6px;
  border-radius: 12px;
  background: rgb(6 18 80 / 22%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 26%);
}
.hc-side__venue img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.hc-side__venue b {
  display: block;
  font-size: 14.5px;
}
.hc-side__venue small {
  display: block;
  color: rgb(255 255 255 / 88%);
  font-size: 12px;
}
.hc-side .po-nav__tab {
  color: #fff;
}
.hc-side .po-nav__tab[aria-current='page'] {
  background: rgb(6 18 80 / 26%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 24%);
  color: #fff;
}
.hc-side .po-nav__add {
  background: #fff;
  box-shadow: none;
  color: var(--hc-cobalt);
}
.hc-side .count {
  background: #ff8a4c;
  color: var(--hc-ink);
}

/* Wide: the gradient sidebar, full height, the screen beside it. */
@media (min-width: 900px) {
  .po-app {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-content: start;
  }
  .po-app > * {
    grid-column: 2;
    min-width: 0;
  }
  .po-app > .po-top.hc-side {
    grid-column: 1;
    grid-row: 1 / span 40;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 22px 14px;
    background-color: var(--hc-still-base);
    background-image: var(--hc-still);
  }
  .hc-side .po-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .hc-side .po-nav__add {
    order: -1;
    justify-content: center;
    margin-bottom: 12px;
  }
  .hc-side .po-nav__tab {
    justify-content: flex-start;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
  }
}
/* The demo's controls beside the app only where both have room. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .po-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .ctl {
    position: static;
    margin: 0 20px 22px;
  }
}

/* ---------- The staff side fills the screen, as the app does: no frame. */
.stage:has(> .screen--wide) {
  max-width: none;
  padding: 0;
}
.screen--wide {
  max-width: none;
  width: 100%;
  margin: 0;
}
.screen--wide .po-app {
  min-height: calc(100dvh - var(--bar-h));
  border-radius: 0;
  box-shadow: none;
}

/* ---------- Choosing food: the app's customer pages (mill-preorders-app,
   order-screens.js). Course tabs as pills, each dish its own card with a
   filled add button, a chosen dish in green with a tick. The pub's welcome
   keeps its own serif. */
.m-top__title {
  font-family: var(--hc-ui);
  font-size: 18px;
  font-weight: 700;
}
.m-section .m-h {
  font-family: var(--hc-ui);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.courses {
  border-radius: 999px;
  background: #f1f3f7;
  box-shadow: none;
}
.course {
  border-radius: 999px;
  color: var(--hc-muted);
}
.course[aria-selected='true'] {
  background: var(--hc-ink);
  box-shadow: none;
  color: #fff;
}
.course[aria-selected='true'] .i {
  color: #fff;
}
.item {
  width: calc(100% - 32px);
  margin: 0 16px 10px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--hc-line);
  border-radius: 14px;
  background: #fff;
}
.item--on {
  border-color: #9ad5b0;
  background: #e9f7ef;
}
.add {
  width: 36px;
  height: 36px;
  border: 0;
  background: var(--hc-ink);
  color: #fff;
}
.item--on .add {
  background: #1f9d55;
  color: #fff;
}
.item__chosen {
  color: #17784a;
}

/* ---------- The table: the app's landing (Concept 2). The pub's photograph
   with its logo, then a white card over it with the welcome in the pub's own
   serif, the booking, time and party size, and "Saved as you go". */
body {
  background: #eef1f6;
}
.hub-hero.hc-hub {
  min-height: 0;
  height: 230px;
  padding: 0;
  background: var(--hc-ink);
}
.hub-hero.hc-hub::before {
  display: none;
}
.hc-hub .hub-hero__logo {
  top: auto;
  right: auto;
  bottom: 40px;
  left: 50%;
  width: 76px;
  height: 76px;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px #fff, 0 6px 18px rgb(16 25 43 / 30%);
}
.hc-hub__card {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
  margin-top: -28px;
  padding: 26px 16px 4px;
  border-radius: 26px 26px 0 0;
  background: #fff;
  text-align: center;
}
.hc-hub__hi {
  color: var(--hc-ink);
  font-family: var(--font-head);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
.hc-hub__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: left;
}
.hc-hub__facts > span {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f4f6fa;
}
.hc-hub__facts .i {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--hc-muted);
}
.hc-hub__facts small {
  display: block;
  color: var(--hc-muted);
  font-size: 11.5px;
  line-height: 1.2;
}
.hc-hub__facts b {
  display: block;
  color: var(--hc-ink);
  font-size: 13.5px;
  line-height: 1.25;
}
.hc-hub__saved {
  color: var(--hc-muted);
  font-size: 12.5px;
}