/* ==========================================================================
   Restaurant pages — page-scoped styles (rs-)
   --------------------------------------------------------------------------
   Loaded after styles.css by ai-receptionist.html and alpha-pos.html. It
   draws the restaurant figures — a WhatsApp-style chat, the order notice
   the managers' group receives, and the dashboard's order card with its
   "Entered in POS" button (FIG.01) — plus the extra marks and legend of the
   receptionist's flow (FIG.02), the six-card grid, and Alpha POS's two-lane
   FIG.01, an outage mid-service. Shared classes are only placed or scoped
   here, never restyled.
   ========================================================================== */

/* ---- FIG.01 · a message becomes an order ---------------------------------
   Plain HTML and CSS, complete without JS: three panes, read top to bottom
   — the customer's chat, the managers' group, the dashboard's Orders tab —
   in one column no wider than a phone, at every width. Only the sequenced
   rise is animated, gated on .hero-booted, with the static end state
   restored for reduced motion. */
/* the block padding keeps the panes clear of the frame's corner ticks */
.rs-stage { padding-block: 1.75rem; }
.rs-flow {
  display: grid;
  gap: 1.1em;
  max-width: 26rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums lining-nums;
}
/* a time range stays on one line */
.rs-nb { white-space: nowrap; }

.rs-label {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin-bottom: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.rs-label__idx { color: var(--accent); }

/* a WhatsApp-style chat, in its dark theme: the customer's own messages on
   the right, the receptionist's on the left */
.rs-chat {
  display: grid;
  gap: 0.45em;
  margin: 0;
  padding: 0.75em 0.85em 0.8em;
  list-style: none;
  border: 1px solid #1f2c34;
  border-radius: 14px;
  background: #0b141a;
  color: #e9edef;
}
.rs-bubble {
  position: relative;
  justify-self: start;
  max-width: 88%;
  padding: 0.42em 0.6em 0.36em;
  border-radius: 8px;
  border-top-left-radius: 0;
  background: #202c33;
  overflow-wrap: break-word;
}
/* the tail on the side the message comes from */
.rs-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -7px;
  width: 8px;
  height: 10px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.rs-bubble--out {
  justify-self: end;
  border-top-left-radius: 8px;
  border-top-right-radius: 0;
  background: #005c4b;
}
.rs-bubble--out::before {
  left: auto;
  right: -7px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* the time floats into the last line when it fits, as WhatsApp sets it */
.rs-time {
  float: right;
  margin: 0.45em 0 -0.25em 0.75em;
  font-size: 0.78em;
  line-height: 1.4;
  color: #8696a0;
}
.rs-bubble--out .rs-time { color: rgba(255, 255, 255, 0.7); }

/* the notice the managers' group receives, line for line */
.rs-notice { max-width: 96%; }
.rs-notice p + p { margin-top: 0.7em; }

/* the dashboard's Orders tab: one order card, still to enter in the POS */
.rs-dash {
  padding: 0.85em;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-2);
}
.rs-dash__title {
  margin-bottom: 0.6em;
  font-weight: 600;
  color: var(--text);
}
.rs-order {
  display: grid;
  gap: 0.6em;
  padding: 0.85em 0.95em 0.95em;
  border: 1px solid var(--accent);
  border-inline-start-width: 5px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-dim);
}
.rs-order__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
}
.rs-order__ref {
  margin-inline-end: auto;
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.rs-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.75em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.875em;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-dim);
}
.rs-chip--new {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}
.rs-order__ready {
  font-size: 1.08em;
  color: var(--text);
}
.rs-order__ready span {
  margin-inline-start: 0.3em;
  font-size: 0.85em;
  color: var(--text-faint);
}
.rs-order__who {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em 0.75em;
}
.rs-order__lines {
  display: grid;
  gap: 0.45em;
  margin: 0;
  padding: 0.65em 0;
  list-style: none;
  border-block: 1px solid var(--border);
}
.rs-order__lines li {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto;
  gap: 0.6em;
  align-items: baseline;
}
.rs-order__lines li > :first-child {
  font-weight: 700;
  color: var(--text);
}
.rs-order__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em 0.9em;
}
.rs-order__total {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--text);
}
.rs-order__total span {
  font-size: 0.65em;
  font-weight: 400;
  color: var(--text-faint);
}
/* the button staff tap once the order is in the till — shown untapped */
.rs-pos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 1.2em;
  border-radius: 999px;
  background: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
}

/* who speaks, for screen readers; the bubbles' sides say it on screen */
.rs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rs-note {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* the chat plays out once the figure has risen in, then the notice and the
   order card arrive; the card flashes as the dashboard marks a new order */
.hero-booted .rs-chat li {
  animation: rs-rise 0.36s var(--ease-out) both;
  animation-delay: calc(1.05s + var(--i, 0) * 0.32s);
}
.hero-booted .rs-pane:nth-child(n + 2) {
  animation: rs-rise 0.42s var(--ease-out) both;
}
.hero-booted .rs-pane:nth-child(2) { animation-delay: 2.4s; }
.hero-booted .rs-pane:nth-child(3) { animation-delay: 2.7s; }
.hero-booted .rs-order {
  animation: rs-arrive 2.4s ease-out 2.7s both;
}
@keyframes rs-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes rs-arrive {
  0%, 30% { background-color: var(--blue-50); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22); }
  100% { background-color: var(--bg); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* ---- FIG.02 · from the channels to the staff -----------------------------
   The .archmap wires and nodes come from styles.css and are visible without
   JS. Added here: the dashed boxes for what the receptionist works from and
   for the till, dotted ties to the first two only (nothing links the till),
   and pulse paths that follow a call and a message. */
.rs-how {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.rs-how .pipeline { margin: 0; }

.rs-arch .pulse {
  fill: none;
  stroke-dasharray: 0.07 0.93;
  animation-duration: 7s;
}
.rs-ties line {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.rs-box rect {
  fill: var(--bg-2);
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.rs-box text {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-faint);
  text-anchor: middle;
  dominant-baseline: middle;
}

/* the legend carries each step in words the figure has no room for */
.rs-legend {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.rs-legend li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  column-gap: var(--space-xs);
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--border);
}
.rs-legend__num {
  grid-row: span 2;
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.rs-legend h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.rs-legend p {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* the two restaurant pages link each other from their answers: an underline
   as well as the colour, so the link reads as one */
.pipeline__notes a,
.faq__item a {
  color: var(--accent-deep);
  border-bottom: 1px solid var(--blue-500);
  transition: border-color 0.2s var(--ease);
}
.pipeline__notes a:hover,
.faq__item a:hover { border-color: var(--accent); }

/* ---- Six-card grid ------------------------------------------------------- */
@media (min-width: 1000px) {
  .rs-how {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-xl);
  }
  .rs-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Alpha POS FIG.01 · an outage, mid-service --------------------------
   Two lanes in the same phone-width column: the venue, which keeps trading
   on its box and puts the order on the ticket, then the owner's phone,
   dashed in the info blue, which waits for the internet and catches up.
   Plain HTML and CSS, complete without JS: only the steps' rise and the
   second lane's arrival wait for .hero-booted. */
.rs-lane {
  display: grid;
  gap: 0.75em;
}
.rs-lane .rs-label { flex-wrap: wrap; margin-bottom: 0; }
.rs-steps {
  display: grid;
  gap: 0.7em;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rs-step;
  font-size: 1.0833em;
}
/* a numbered marker per step, joined to the next by the rail */
.rs-steps > li {
  position: relative;
  display: grid;
  grid-template-columns: 1.65em minmax(0, 1fr);
  column-gap: 0.7em;
  row-gap: 0.55em;
  align-items: start;
  counter-increment: rs-step;
}
.rs-steps > li::before {
  content: counter(rs-step);
  display: grid;
  place-items: center;
  width: 1.65em;
  height: 1.65em;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--accent);
}
.rs-steps > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.65em;
  bottom: -0.7em;
  inset-inline-start: 0.825em;
  border-inline-start: 1px solid var(--border-strong);
}
/* the first line of each step sits level with its marker */
.rs-steps > li > p {
  padding-top: 0.125em;
  color: var(--text);
}
/* the notice keeps the receptionist figure's 12px */
/* the owner's lane is dashed in the info blue: it waits for the internet */
.rs-lane--plan {
  margin-top: 0.4em;
  padding-top: 1.3em;
  border-top: 1px dashed var(--border-strong);
}
.rs-lane--plan .rs-steps > li::before {
  border: 1px dashed rgba(143, 193, 240, 0.6);
  color: var(--info);
}
.rs-lane--plan .rs-steps > li:not(:last-child)::after {
  border-inline-start: 1px dashed rgba(143, 193, 240, 0.45);
}
.rs-lane--plan .rs-steps > li > p { color: var(--text-dim); }
.rs-ticket {
  grid-column: 2;
  justify-self: start;
  min-width: 13em;
  padding: 0.6em 0.9em 0.75em;
  border: 1px dashed rgba(143, 193, 240, 0.6);
  border-radius: 10px;
  background: var(--info-bg);
  color: var(--text-dim);
}
.rs-ticket__label {
  margin-bottom: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--info);
}
.rs-ticket ul {
  display: grid;
  gap: 0.3em;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* on the venue's lane the ticket is real: solid, on the page */
.rs-lane--now .rs-ticket {
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
}
.rs-lane--now .rs-ticket__label { color: var(--accent); }
.rs-ticket li span {
  margin-inline-end: 0.35em;
  font-weight: 700;
  color: var(--text);
}

/* the venue's steps play out once the figure has risen in; then the owner's
   lane arrives */
.hero-booted .rs-lane--now .rs-steps > li {
  animation: rs-rise 0.36s var(--ease-out) both;
  animation-delay: calc(1.05s + var(--i, 0) * 0.2s);
}
.hero-booted .rs-lane--plan { animation: rs-rise 0.42s var(--ease-out) 2.75s both; }

/* ---- Reduced motion ------------------------------------------------------
   styles.css stops the shared hero, wire and pulse motion, but only shortens
   durations, so a delayed rise would still sit hidden first. These
   selectors match the animated ones exactly: every message, pane, the order
   card, and Alpha POS's steps and second lane are drawn from the start. */
@media (prefers-reduced-motion: reduce) {
  .hero-booted .rs-chat li,
  .hero-booted .rs-pane:nth-child(n + 2),
  .hero-booted .rs-order,
  .hero-booted .rs-lane--now .rs-steps > li,
  .hero-booted .rs-lane--plan {
    animation: none;
    opacity: 1;
    transform: none;
  }
}