/* ============================================================
   G-Reader — the signed-in app.

   Same "order rail" world as the public site (main-page/style.css):
   a dark pass, paper tickets docketed onto it. Written by hand rather
   than generated, and with NO external font or CDN dependency -- this
   screen is propped on a counter during service, and it has to be
   legible whether or not the network is having a good day.

   Reading order is service order: what came in today, then who is
   coming. Payment type is carried by a colour stripe as well as a
   word, because across a counter you see the stripe first.
   ============================================================ */

:root {
  --board:      #1F1B17;   /* the pass, steel at night */
  --board-2:    #28221D;   /* panel */
  --board-3:    #332C25;   /* the rail bar */
  --paper:      #FBF6EC;   /* ticket paper */
  --paper-dim:  #C9BCA2;
  --ink:        #241F1A;   /* ink on paper */
  --ink-dim:    #6B6255;
  --copper:     #D98B4A;
  --copper-deep:#B96E33;

  /* Semantic, and genuinely meaningful here: these three are what a
     cook is distinguishing at a glance. Kept apart from the copper
     accent so "which kind of thing is this" never competes with
     "what can I press". */
  --epassi:     #6FAE8C;
  --edenred:    #6C93B8;
  --booking:    #C97A6B;

  --line:       rgba(251,246,236,0.14);
  --line-paper: #E3D9C6;
  --shadow:     rgba(0,0,0,0.45);
  --danger:     #C4574B;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--board);
  color: var(--paper);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  text-wrap: balance;
  margin: 0;
}

.mono, .amount, .when {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- shell ---------- */
.shell { max-width: 940px; margin-inline: auto; padding-inline: 20px; padding-block: 0 72px; }

.topbar {
  border-bottom: 1px solid var(--line);
  background: var(--board);
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
}
.topbar-inner {
  max-width: 940px; margin-inline: auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.place { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.place h1 { font-size: 1.22rem; letter-spacing: .2px; }
.place .who { font-size: .8rem; color: var(--paper-dim); }
.place .who strong { color: var(--paper); font-weight: 600; }

.topnav { display: flex; align-items: center; gap: 4px; }
.topnav a {
  color: var(--paper-dim); text-decoration: none; font-size: .88rem;
  padding: 7px 12px; border-radius: 8px;
}
.topnav a:hover { color: var(--paper); background: rgba(251,246,236,.06); }

/* ---------- the rail: today's takings ---------- */
.rail {
  background: var(--board-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-block: 22px;
  overflow: hidden;
}
/* Perforation, the way a real docket tears off the rail. */
.rail-perf {
  height: 11px;
  background: var(--board-3);
  -webkit-mask: radial-gradient(circle at 7px 0, transparent 0 5px, #000 5.5px) 0 0 / 14px 11px repeat-x;
          mask: radial-gradient(circle at 7px 0, transparent 0 5px, #000 5.5px) 0 0 / 14px 11px repeat-x;
}
.rail-grid { display: grid; grid-template-columns: 1fr 1fr; }
.takings {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--line);
}
.takings:last-child { border-right: 0; }
.takings .label {
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--paper-dim); display: flex; align-items: center; gap: 7px;
}
.takings .label::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; flex: none;
}
.takings.is-epassi .label::before { background: var(--epassi); }
.takings.is-edenred .label::before { background: var(--edenred); }
.takings .figure {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1.1; letter-spacing: -.02em;
}
.takings .figure .cur { font-size: .55em; color: var(--paper-dim); margin-left: 4px; }
.takings .count { font-size: .82rem; color: var(--paper-dim); }

/* ---------- section headings ---------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 30px 0 12px;
}
.section-head h2 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); font-family: inherit; font-weight: 600; }
.section-head .hint { font-size: .78rem; color: var(--paper-dim); }

/* ---------- tickets ---------- */
/* ---------- a restaurant's own fields, on the ticket ----------
   Rendered from whatever their labels captured, so the app styles a shape it
   has never seen: two columns, label then value, wrapping on a narrow screen.
   Values come from third-party order emails, so they are escaped like all
   template output -- an item called "<script>" prints as text. */
.fields {
  margin: 8px 0 0;
  display: grid;
  gap: 2px 12px;
  font-size: .86rem;
}
.fields > div {
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  gap: 12px;
  align-items: baseline;
}
.fields dt {
  color: var(--ink-dim);
  font-size: .78rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.fields dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;   /* a long item list must not widen the ticket */
}
@media (max-width: 520px) {
  .fields > div { grid-template-columns: 1fr; gap: 0; }
  .fields dt { margin-top: 4px; }
}

/* ---------- today's activity: a box, not a column that keeps growing -------
   This list runs to dozens of tickets across a service, and it used to push
   "Coming up" off the bottom of the screen -- so the bookings staff most need
   at a glance vanished exactly when the day got busy enough to need them.
   Capped with its own scroll instead, so the takings, the activity and the
   bookings are all on screen at once, whatever kind of day it is.

   The floor matters as much as the ceiling: clamp() keeps at least a couple
   of tickets visible on a short screen rather than collapsing to a sliver. */
.tickets {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: clamp(220px, 48vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* flicking the list doesn't drag the page */
  padding-right: 4px;             /* the tickets' own shadow needs the room */

  /* Scroll affordance with no JavaScript: `local` layers scroll with the
     content, `scroll` layers stay put -- so a shadow appears at an edge only
     when there is genuinely more in that direction, and fades out at the end
     of the list by itself. */
  background:
    linear-gradient(var(--board) 40%, transparent)         top    / 100% 26px no-repeat local,
    linear-gradient(transparent, var(--board) 60%)         bottom / 100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0,    rgba(0,0,0,.45), transparent) top    / 100% 13px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.45), transparent) bottom / 100% 13px no-repeat scroll;

  scrollbar-width: thin;
  scrollbar-color: var(--board-3) transparent;
}

/* A scrollbar belonging to this board rather than to the operating system --
   a bright native bar down the side of a dark counter screen is the sort of
   thing you stop noticing and customers never do. */
.tickets::-webkit-scrollbar { width: 10px; }
.tickets::-webkit-scrollbar-track { background: transparent; }
.tickets::-webkit-scrollbar-thumb {
  background: var(--board-3);
  border: 3px solid var(--board);
  border-radius: 999px;
}
.tickets::-webkit-scrollbar-thumb:hover { background: var(--line); }

/* Nothing to scroll when nothing has happened yet: the empty state shouldn't
   sit in a capped box hinting at content that isn't there. */
.tickets:has(> .empty) {
  max-height: none;
  overflow: visible;
  background: none;
  padding-right: 0;
}

.ticket {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 14px 16px 14px 20px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  box-shadow: 0 10px 22px -16px var(--shadow);
}
/* The stripe IS the type. Read before any word is. */
.ticket::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border-radius: 10px 0 0 10px; background: var(--ink-dim);
}
.ticket.is-epassi::before  { background: var(--epassi); }
.ticket.is-edenred::before { background: var(--edenred); }
.ticket.is-booking::before { background: var(--booking); }

.ticket-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* A payment says one thing -- money arrived, from here. It gets a single
   row, so it sits visually lighter than a booking, which has to be read. */
.ticket.is-epassi .ticket-main,
.ticket.is-edenred .ticket-main {
  flex-direction: row; align-items: center; gap: 11px;
}
.ticket.is-epassi .detail,
.ticket.is-edenred .detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind {
  align-self: flex-start;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(36,31,26,.07); color: var(--ink-dim);
}
.ticket.is-epassi  .kind { color: #2E6B4F; background: rgba(111,174,140,.18); }
.ticket.is-edenred .kind { color: #355A78; background: rgba(108,147,184,.18); }
.ticket.is-booking .kind { color: #8C4A38; background: rgba(201,122,107,.18); }

.who-line {
  font-weight: 600; font-size: 1.02rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.who-line .tag { font-weight: 400; font-size: .78rem; color: var(--ink-dim); margin-left: 5px; }
.detail { font-size: .88rem; color: var(--ink-dim); }
.detail .when { color: var(--ink); }
.amount {
  flex: none; font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.amount .cur { font-size: .7em; color: var(--ink-dim); margin-left: 3px; }

.ticket-actions { flex: none; display: flex; gap: 14px; }
/* Big enough for a thumb on a counter tablet, and far enough apart that a
   rushed tap on Edit can't land on Delete. */
.ticket-actions .icon-btn { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
.icon-btn {
  border: 0; background: transparent; cursor: pointer; color: var(--ink-dim);
  padding: 7px; border-radius: 8px; display: inline-flex;
}
.icon-btn:hover { background: rgba(36,31,26,.08); color: var(--ink); }
.icon-btn.is-danger:hover { background: rgba(196,87,75,.14); color: var(--danger); }

/* ---------- empty states ---------- */
.empty {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 26px 20px; text-align: center; color: var(--paper-dim); font-size: .92rem;
}
.empty strong { display: block; color: var(--paper); font-weight: 600; margin-bottom: 3px; }

/* ---------- panels (locked states, settings) ---------- */
.panel {
  background: var(--board-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px; margin-block: 18px;
}
.panel h2 { font-size: 1.16rem; margin-bottom: 8px; }
.panel p { margin: 0 0 14px; color: var(--paper-dim); font-size: .94rem; }
.panel p:last-child { margin-bottom: 0; }
.panel.is-danger { border-color: rgba(196,87,75,.4); }
.panel.is-danger h2 { color: #E58C80; }

.chip {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(217,139,74,.14); color: var(--copper);
  border: 1px solid rgba(217,139,74,.3);
}
.chip.is-warn { background: rgba(201,122,107,.14); color: #E0A093; border-color: rgba(201,122,107,.34); }
.chip.is-ok { background: rgba(111,174,140,.14); color: var(--epassi); border-color: rgba(111,174,140,.32); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 9px; border: 1px solid transparent;
  font-size: .94rem; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--copper); color: #241505; }
.btn-primary:hover { background: var(--copper-deep); }
.btn-quiet { background: transparent; color: var(--paper); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--paper-dim); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #A8443A; }
.btn-danger[disabled] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- forms ---------- */
.field-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.span-2 { grid-column: span 2; }
.span-4 { grid-column: 1 / -1; }

input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="date"], input[type="time"], input:not([type]), textarea, select {
  width: 100%; font: inherit; font-size: .92rem;
  padding: 9px 11px; border-radius: 8px;
  background: rgba(0,0,0,.22); color: var(--paper);
  border: 1px solid var(--line);
}
input::placeholder, textarea::placeholder { color: rgba(201,188,162,.7); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(217,139,74,.2);
}
textarea { resize: vertical; }
label.stack { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; color: var(--paper-dim); }

/* Booking form lives on paper, so its fields invert. */
.on-paper input, .on-paper textarea {
  background: #fff; color: var(--ink); border-color: var(--line-paper);
}
.on-paper input::placeholder, .on-paper textarea::placeholder { color: #9A8F7E; }
.on-paper label.stack { color: var(--ink-dim); }

/* ---------- add-a-booking drawer ---------- */
.drawer {
  background: var(--board-2); border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 12px; overflow: hidden;
}
.drawer > summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font-size: .92rem; font-weight: 600; color: var(--copper);
  display: flex; align-items: center; gap: 9px;
}
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary:hover { background: rgba(217,139,74,.07); }
.drawer > summary svg { transition: transform .18s ease; }
.drawer[open] > summary svg { transform: rotate(45deg); }
.drawer-body { padding: 4px 16px 16px; }

/* ---------- edit-in-place ticket ---------- */
.ticket-edit {
  background: var(--paper); color: var(--ink);
  border-radius: 10px; padding: 16px; border-left: 5px solid var(--copper);
  display: flex; flex-direction: column; gap: 11px;
}

/* ---------- key/value rows (settings) ---------- */
.kv { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv .k { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--paper-dim); min-width: 150px; }
.kv .v { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .88rem; word-break: break-all; }

.note { font-size: .84rem; color: var(--paper-dim); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.note a { color: var(--paper-dim); text-decoration: underline; text-underline-offset: 3px; }
.note a:hover { color: var(--paper); }

/* ---------- htmx: a breath of feedback on swap ---------- */
.htmx-swapping { opacity: .55; transition: opacity .12s ease; }

/* ---------- narrow ---------- */
@media (max-width: 620px) {
  .rail-grid { grid-template-columns: 1fr; }
  .takings { border-right: 0; border-bottom: 1px solid var(--line); }
  .takings:last-child { border-bottom: 0; }
  .field-grid { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-4 { grid-column: 1 / -1; }
  .ticket { padding: 13px 14px 13px 18px; }
  .topbar-inner { padding: 13px 16px; }
  .shell { padding-inline: 16px; }
}

/* ============================================================
   Help widget.

   Bottom-LEFT on purpose: the right-hand side of this screen is where
   money and bookings land, and a floating bubble that covers the last
   ticket during service would be worse than no widget at all.
   ============================================================ */

.help-launcher {
  position: fixed; left: 20px; z-index: 60;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--copper); color: #241505;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
}
.help-launcher:hover { background: var(--copper-deep); }
.help-launcher .badge {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center;
  border: 2px solid var(--board);
}

.help-panel {
  position: fixed; left: 20px; z-index: 61;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: 360px; max-width: calc(100vw - 40px);
  max-height: min(620px, calc(100vh - 130px));
  background: var(--board-2); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.75);
}

.help-hero {
  padding: 22px 20px 18px;
  background: linear-gradient(160deg, var(--board-3), var(--board-2));
  border-bottom: 1px solid var(--line);
}
.help-avatar {
  width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px;
  background: var(--copper); color: #241505;
  display: flex; align-items: center; justify-content: center;
}
.help-hero h2 { font-size: 1.16rem; margin-bottom: 3px; }
.help-hero p { margin: 0 0 15px; font-size: .86rem; color: var(--paper-dim); }

/* min-height:0 matters: without it a flex child refuses to shrink below its
   content, so a long topic list pushes the tab bar out of the panel. */
.help-body { padding: 16px 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.help-body.is-thread { display: flex; flex-direction: column; gap: 10px; }

.help-group {
  margin: 4px 0 8px; font-size: .64rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--paper-dim);
}
.help-group:not(:first-child) { margin-top: 18px; }
.help-list { display: flex; flex-direction: column; gap: 7px; }

.help-topic {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: rgba(0,0,0,.2); border: 1px solid var(--line); color: var(--paper);
  border-radius: 10px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.help-topic:hover { border-color: var(--copper); background: rgba(217,139,74,.08); }
.help-topic strong { display: block; font-size: .93rem; font-weight: 600; }
.help-topic em { display: block; font-style: normal; font-size: .79rem; color: var(--paper-dim); margin-top: 1px; }
.help-topic svg { flex: none; color: var(--paper-dim); }

.help-alert {
  width: 100%; margin-bottom: 16px; cursor: pointer; font: inherit; text-align: left;
  background: rgba(111,174,140,.12); border: 1px solid rgba(111,174,140,.34);
  color: var(--epassi); border-radius: 10px; padding: 11px 13px; font-size: .86rem;
  display: flex; align-items: center; gap: 9px;
}
.help-alert .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--epassi); flex: none; }

.help-bar {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--line); background: var(--board-3);
}
.help-back {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  color: var(--paper-dim); font-size: .84rem; display: inline-flex; align-items: center; gap: 4px;
}
.help-back:hover { color: var(--paper); }
.help-title {
  font-size: .9rem; font-weight: 600; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ticket-no {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-style: normal;
  font-size: .7rem; color: var(--paper-dim); letter-spacing: .04em;
}

.help-thread-row {
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--paper);
  background: rgba(0,0,0,.2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 7px;
  display: flex; flex-direction: column; gap: 5px;
}
.help-thread-row:hover { border-color: var(--paper-dim); }
.help-thread-row .row-top,
.help-thread-row .row-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.help-thread-row strong { font-size: .91rem; font-weight: 600; }
.help-thread-row .status { font-size: .76rem; }
.help-thread-row .status.is-answered { color: var(--epassi); }
.help-thread-row .status.is-open { color: var(--copper); }
.help-thread-row .status.is-closed { color: var(--paper-dim); }
.help-thread-row .when {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem; color: var(--paper-dim);
}

.bubble { max-width: 88%; border-radius: 12px; padding: 10px 13px; font-size: .88rem; }
.bubble p { margin: 0; white-space: pre-wrap; }
.bubble.is-customer { align-self: flex-end; background: var(--copper); color: #241505; }
.bubble.is-support, .bubble.is-system {
  align-self: flex-start; background: var(--paper); color: var(--ink);
}
.bubble-who {
  display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 4px; font-weight: 600;
}
.bubble-when {
  display: block; margin-top: 5px; font-size: .68rem; opacity: .65;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}
.help-closed {
  text-align: center; font-size: .8rem; color: var(--paper-dim);
  border-top: 1px solid var(--line); padding-top: 12px; margin: 6px 0 0;
}

.help-compose {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--board-2);
}
.help-compose textarea { flex: 1; resize: none; font-size: .88rem; }
.help-compose .btn { padding: 10px 13px; flex: none; }

.help-tabs {
  display: flex; border-top: 1px solid var(--line); background: var(--board-2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.help-tabs button {
  flex: 1; border: 0; background: transparent; cursor: pointer; font: inherit;
  color: var(--paper-dim); font-size: .74rem; padding: 11px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.help-tabs button:hover { color: var(--paper); }
.help-tabs button.is-on { color: var(--copper); }

.help-empty {
  text-align: center; color: var(--paper-dim); font-size: .86rem;
  padding: 30px 14px; margin: 0;
}
.help-empty strong { display: block; color: var(--paper); margin-bottom: 3px; }

@media (max-width: 480px) {
  .help-panel {
    left: 12px; right: 12px; width: auto;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .help-launcher { left: 14px; }
}

/* ---------- auto-renew toggle ----------
   The ring-that-collapses mechanic, recoloured for this palette: a #333
   switch on a dark board would read as switched off in both positions. */
.toggle { position: relative; box-sizing: border-box; flex: none; }
.toggle input[type="checkbox"] {
  position: absolute; left: 0; top: 0; z-index: 10;
  width: 100%; height: 100%; cursor: pointer; opacity: 0;
}
.toggle label { position: relative; display: flex; align-items: center; height: 32px; box-sizing: border-box; }
.toggle label:before {
  content: ""; width: 64px; height: 32px; border-radius: 20px;
  position: relative; display: inline-block; box-sizing: border-box;
  transition: .3s cubic-bezier(.55,.06,.78,.21);
  background-color: var(--paper);
  box-shadow: 0 0 10px #0004, inset -32px 0 var(--ink-dim);
}
.toggle label:after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 4px solid var(--ink-dim); border-radius: 20px; box-sizing: border-box;
  left: 0; top: 0; transform: translate(7px, 7px);
  transition: .3s cubic-bezier(.55,.06,.78,.21);
}
.toggle input[type="checkbox"]:checked + label:before {
  box-shadow: 0 0 10px #0004, inset 32px 0 var(--epassi);
}
.toggle input[type="checkbox"]:checked + label:after {
  width: 0; border-color: var(--epassi); transform: translate(45px, 7px);
}
.toggle input[type="checkbox"]:focus-visible + label:before {
  outline: 2px solid var(--copper); outline-offset: 3px;
}

.renew-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.renew-row .renew-text { flex: 1; min-width: 210px; }
.renew-row .renew-text strong { display: block; font-size: .95rem; }
.renew-row .renew-text span { font-size: .84rem; color: var(--paper-dim); }

/* ---------- payment history ---------- */
.history {
  max-height: 188px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.2);
}
.history-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .86rem;
}
.history-row:last-child { border-bottom: 0; }
.history-row .tag {
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
}
.history-row.is-paid .tag { color: var(--epassi); background: rgba(111,174,140,.16); }
.history-row.is-failed .tag { color: #E0A093; background: rgba(201,122,107,.16); }
.history-row.is-refunded .tag { color: var(--paper-dim); background: rgba(251,246,236,.08); }
.history-row .when {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .8rem; color: var(--paper-dim);
}
.history-row .sum {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums; font-weight: 600; text-align: right;
}
.history-empty { padding: 20px 14px; text-align: center; color: var(--paper-dim); font-size: .86rem; }

/* Plan history: paid stretches, free access, and the testing period, in one
   list. Same rows as the payment history above, plus two more tag colours. */
.plan-history { max-height: 300px; }
.plan-history .history-row { grid-template-columns: 96px 1fr auto; }
.plan-history .history-row .tag { text-align: center; }
.history-row.is-free .tag    { color: var(--edenred); background: rgba(108,147,184,.16); }
.history-row.is-testing .tag { color: var(--copper);  background: rgba(217,139,74,.16); }
.history-row .now {
  margin-left: 6px; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--epassi); font-family: inherit;
}
.history-row .history-note { display: block; margin-top: 2px; font-size: .74rem; color: var(--paper-dim); font-style: italic; }
.plan-history .history-row .sum { font-weight: 500; font-size: .82rem; }
@media (max-width: 520px) {
  .plan-history .history-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .plan-history .history-row .when { grid-column: 1 / -1; order: 3; }
}

/* ================================================================
   Is the inbox actually being read?

   A board that only speaks up when something breaks gives you no way to
   tell "working" from "wedged" -- so the light is always there, and the
   prompt is the exception rather than the only signal.
   ================================================================ */

.conn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 8px; margin-right: 4px;
  border-radius: 999px; border: 1px solid var(--line);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-dim); white-space: nowrap;
}
.conn-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--epassi);
  box-shadow: 0 0 0 0 rgba(111,174,140,.55);
  animation: conn-beat 2.4s ease-out infinite;
}
.conn-expiring { background: var(--copper); box-shadow: 0 0 0 0 rgba(217,139,74,.55); animation-name: conn-beat-warn; }
.conn-broken   { background: var(--danger); box-shadow: 0 0 0 0 rgba(196,87,75,.6);  animation: conn-beat-bad 1.1s ease-out infinite; }

/* A slow heartbeat for healthy, a fast one for broken. The difference is
   readable from across the counter, which is the only place it matters. */
@keyframes conn-beat      { 0% { box-shadow: 0 0 0 0 rgba(111,174,140,.5); } 70%,100% { box-shadow: 0 0 0 7px rgba(111,174,140,0); } }
@keyframes conn-beat-warn { 0% { box-shadow: 0 0 0 0 rgba(217,139,74,.5); }  70%,100% { box-shadow: 0 0 0 7px rgba(217,139,74,0); } }
@keyframes conn-beat-bad  { 0% { box-shadow: 0 0 0 0 rgba(196,87,75,.6); }   70%,100% { box-shadow: 0 0 0 9px rgba(196,87,75,0); } }

@media (prefers-reduced-motion: reduce) {
  .conn-dot { animation: none !important; }
  /* Colour alone still separates the three states, so nothing is lost. */
}
@media (max-width: 620px) {
  .conn-label { display: none; }          /* the dot survives; the word doesn't need to */
  .conn { padding: 5px; }
}

/* ---------- the prompt ----------
   Bottom-right, above the board but not across it: the takings and the
   next booking stay readable and clickable underneath. It is an alertdialog
   that asks, not a modal that takes the screen hostage during service.
   The help widget lives bottom-LEFT, so the two never collide. */
.conn-prompt {
  position: fixed; z-index: 70;
  right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 400px; max-width: calc(100vw - 40px);
}
.conn-prompt-card {
  position: relative;
  background: var(--board-2); border: 1px solid var(--line);
  border-left: 3px solid var(--copper);
  border-radius: 14px; padding: 20px 20px 18px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.8);
}
.conn-prompt-card.is-broken { border-left-color: var(--danger); }
.conn-prompt-card p { margin: 0 0 12px; color: var(--paper-dim); font-size: .92rem; }
.conn-prompt-card .note { margin-top: 12px; margin-bottom: 0; font-size: .8rem; color: var(--ink-dim); }
.conn-why { font-size: .86rem !important; }

.conn-prompt-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding-right: 28px; }
.conn-prompt-head h2 { font-size: 1.04rem; line-height: 1.25; }
.conn-prompt-x { position: absolute; top: 12px; right: 12px; }
.conn-prompt .btn { padding: 9px 15px; font-size: .9rem; }

@media (max-width: 620px) {
  .conn-prompt { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- help panel: let the content scroll -------------------------------
   #help-body is the container htmx swaps every view into. It had no rules
   of its own -- the scrolling ones live on the .help-body CLASS, which only
   the thread view uses. So any view taller than the panel (the home list of
   topics, in practice) was simply cut off by the panel's overflow:hidden,
   with no way to reach what was underneath.

   min-height:0 is the part that does the real work: without it a flex child
   refuses to shrink below its content, so the box grows past the panel
   instead of scrolling inside it. */
#help-body {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}

/* The tabs stay reachable while the list above them scrolls. */
#help-body > .help-tabs {
  position: sticky; bottom: 0; flex: none;
  background: var(--board-2);
}

/* The thread's own scroller stays the inner one, so the compose box and the
   conversation header don't scroll away while reading. */
#help-body > .help-body.is-thread { flex: 1 1 auto; min-height: 0; }

/* ---------- when something goes wrong (see problems.js) ---------- */
.conn-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; font-size: .88rem; line-height: 1.4; text-align: center;
  background: #5A2A22; color: #FBE9E4; border-bottom: 1px solid rgba(196,87,75,.6);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.6);
}
.conn-bar[hidden], .problem-toast[hidden] { display: none; }
.conn-bar button, .problem-toast button {
  flex: none; font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer;
  padding: 6px 12px; border-radius: 8px;
  background: rgba(251,246,236,.12); color: inherit; border: 1px solid rgba(251,246,236,.3);
}
.conn-bar button:hover, .problem-toast button:hover { background: rgba(251,246,236,.22); }
.problem-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 96;
  width: min(92vw, 520px);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 14px 13px 16px; border-radius: 12px; font-size: .9rem; line-height: 1.45;
  background: var(--board-2); color: var(--paper);
  border: 1px solid rgba(196,87,75,.55); box-shadow: 0 18px 44px -14px rgba(0,0,0,.7);
}
.problem-toast span { flex: 1 1 220px; }
@media (prefers-reduced-motion: no-preference) {
  .problem-toast:not([hidden]) { animation: toast-in .18s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
}

/* A booking's note -- usually an allergy or a request. Meant to be noticed. */
.booking-note {
  display: block; margin-top: 6px; padding: 6px 10px; border-radius: 8px;
  font-size: .9rem; line-height: 1.4; color: var(--ink);
  background: rgba(201,122,107,.16); border-left: 3px solid var(--booking);
  overflow-wrap: anywhere;
}

/* Log out is a form button (a plain link let any web page sign a board
   out); styled to look exactly like the links next to it. */
button.linklike { background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
                  font: inherit; color: inherit; text-decoration: inherit; }

/* ---------- the board on a big screen (counter monitor, tablet landscape) ----------
   Read from across a room, glanced at mid-service. On wide screens the board
   uses the space instead of sitting in a narrow column, and the things staff
   actually look for -- today's totals, amounts, names, times -- get bigger. */
@media (min-width: 1280px) {
  .shell { max-width: 1240px; }
  .takings .figure { font-size: 3.2rem; }
  .takings .label, .takings .count { font-size: .95rem; }
  .ticket { padding: 18px 22px 18px 26px; }
  .who-line { font-size: 1.3rem; }
  .ticket .detail { font-size: 1.05rem; }
  .ticket .detail.arrived { font-size: 1.2rem; font-weight: 600; color: var(--ink); }
  .amount { font-size: 1.6rem; }
  .booking-note { font-size: 1.05rem; }
}

/* ---------- messages from us (see _announcements.html) ---------- */
.announce {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  margin: 16px 0 0; padding: 14px 16px; border-radius: 12px;
  background: rgba(108,147,184,.12); border: 1px solid rgba(108,147,184,.4);
}
.announce.is-problem { background: rgba(217,139,74,.12); border-color: rgba(217,139,74,.5); }
.announce-text { flex: 1 1 260px; }
.announce-text strong { display: block; color: var(--paper); margin-bottom: 4px; }
.announce-text p { margin: 0; color: var(--paper-dim); font-size: .92rem; line-height: 1.55; white-space: pre-line; }
.announce-ok {
  flex: none; font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
  padding: 8px 14px; min-height: 40px; border-radius: 8px;
  background: rgba(251,246,236,.1); color: var(--paper); border: 1px solid var(--line);
}