/* Counter: the staff screens at /orders, plus the service order form that the
   admin reuses. Phone-first — big tap targets, a sticky total. Runs inside
   body.admin, so the admin tokens (--a-*) and a-btn / a-field / a-pill apply. */

/* Fixed zoom. touch-action: manipulation drops the double-tap-to-zoom gesture
   (the stepper's + and − are tapped fast enough to trigger it), and the
   text-size-adjust stops mobile Safari and Chrome inflating text of their own
   accord. Pinch itself is cancelled in no_zoom_controller.js. */
body.counter {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Status pills for orders ──────────────────────── */
/* A status is a label, never a button: always a pale tint with a leading dot,
   never a solid fill, and never the section accent the Mark buttons are
   painted in. Ready is green of its own rather than teal for that reason. */
.a-pill--received, .a-pill--ready, .a-pill--claimed {
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: inset 0 0 0 1px currentColor;
}
.a-pill--received::before, .a-pill--ready::before, .a-pill--claimed::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.a-pill--received { background: var(--a-warn-bg); color: var(--a-warn); }
.a-pill--ready    { background: #E6F5EC; color: #1F6E43; }
.a-pill--claimed  { background: #EEF1F0; color: var(--a-muted); }

/* The Mark buttons move an order on: solid, raised, and led by a check, so
   they cannot be mistaken for the flat status label beside them. */
.c-mark { box-shadow: 0 1px 0 var(--a-accent-d), 0 2px 6px rgba(0,0,0,.12); }
.c-mark::before { content: "✓"; font-weight: 800; }
.c-mark:active { transform: translateY(1px); box-shadow: 0 0 0 var(--a-accent-d); }

/* ── Top bar ──────────────────────────────────────── */
.c-bar {
  background: #0D4F47;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
}
/* Wider than the page under it (.c-main is 880px): with every section showing,
   the brand, eight links, the signed-in name and Sign out measure about
   870–1040px in one row, and at 880 the nav slid over the brand's name. */
.c-bar__inner {
  display: flex; align-items: center; gap: 8px 12px;
  max-width: 1100px; margin-inline: auto;
  padding: 0 16px; min-height: 68px;
}
/* Never the item that gives: shrinking it is what put the nav on top of the
   name. Where the row is short of width the name steps aside instead (below). */
.c-bar__brand { display: flex; align-items: center; gap: 11px; flex: none; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
/* The logo is black artwork: invert it on the dark bar. */
.c-bar__logo { width: 42px; filter: brightness(0) invert(1); }
/* Two lines, as on the admin bar, but the second is the section rather than
   the full name: this bar already carries eight sections and the signed-in
   name in one row, so a 190px subtitle here is
   paid for by something else. It was being paid for by the name. */
.c-bar__name { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; min-width: 0; }
.c-bar__tag { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; opacity: .74; white-space: nowrap; }
/* Source order is brand, account, nav so the account stays beside the brand
   when the nav drops to its own row on a phone; on a wide bar the nav slides
   back between them. */
.c-bar__nav { order: 2; display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* Never the item that gives: who is signed in is the one thing on this bar
   that cannot be worked out from the page. It shrinks only past a long name,
   and then by ellipsis rather than to nothing. */
.c-bar__account { order: 3; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; min-width: 0; }
.c-bar__out { order: 4; margin: 0; }
/* The sections and Sign out are wrapped so phone width has one thing to
   collapse; display:contents keeps them direct children of the bar on a wide
   screen, where the order properties above do the arranging. The admin bar
   takes the same shape. */
.c-bar__menu { display: contents; }
.c-bar__toggle { display: none; }
/* Who is signed in — the counter is shared, so this is the audit trail people
   can actually see, so it stays visible — smaller, but never hidden. */
.c-bar__who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}
.c-bar__who svg { width: 16px; height: 16px; opacity: .85; flex-shrink: 0; }
/* A long name shrinks rather than pushing Sign out off the bar. */
.c-bar__who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.c-bar__link {
  display: inline-block; padding: 8px 11px; border-radius: 6px; border: 0; background: none;
  color: rgba(255,255,255,.85); font: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.c-bar__link:hover { background: rgba(255,255,255,.12); color: #fff; }
.c-bar__link.is-active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
/* Between the drawer and a bar wide enough for everything, the logo carries
   the brand alone and a long signed-in name ellipsises sooner — measured to
   fit an admin's full nav at 901px. The name is hidden visually rather than
   removed, since the logo's alt is empty and it is the link's only name. */
@media (min-width: 901px) and (max-width: 1080px) {
  .c-bar__name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .c-bar__who-name { max-width: 120px; }
}
/* A section whose name is too long for the bar in one row carries both: the
   short one in the bar, the whole words in the drawer under 900px. */
.c-bar__short { text-decoration: none; }
.c-bar__long { display: none; }
/* A link whose label is a word shorter on a phone. Both are in the markup and
   the media query picks one, so nothing here depends on JS and the hidden half
   is out of the accessible name too. */
.c-bar__signout {
  padding: 8px 11px; border-radius: 6px; border: 0; background: none;
  color: rgba(255,255,255,.65); font: inherit; font-size: 14.5px; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.c-bar__signout:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Phones and the shop tablet in portrait: seven links can't share a row with
   the brand and the signed-in name, and splitting the width between them made
   a strip of cramped abbreviations under the bar. They go behind a toggle
   instead, as the admin bar's do — a column with room for whole words.
   Two things stay out of the drawer and in the bar itself: the brand, and who
   is signed in. Sign out goes in, since it is the one thing here nobody
   should reach for by accident. */
@media (max-width: 900px) {
  .c-bar__inner { flex-wrap: nowrap; padding-bottom: 8px; min-height: 52px; }
  .c-bar__account { order: 2; margin-left: auto; min-width: 0; }
  .c-bar__who-name { max-width: 42vw; }

  .c-bar__toggle {
    order: 3; display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex: none;
    padding: 0; border: 0; border-radius: 8px;
    background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  }
  .c-bar__bars, .c-bar__bars::before, .c-bar__bars::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  }
  .c-bar__bars { position: relative; }
  .c-bar__bars::before, .c-bar__bars::after { content: ""; position: absolute; left: 0; }
  .c-bar__bars::before { top: -6px; }
  .c-bar__bars::after { top: 6px; }
  .c-bar__toggle[aria-expanded="true"] .c-bar__bars { background: transparent; }
  .c-bar__toggle[aria-expanded="true"] .c-bar__bars::before { top: 0; transform: rotate(45deg); }
  .c-bar__toggle[aria-expanded="true"] .c-bar__bars::after { top: 0; transform: rotate(-45deg); }

  .c-bar__menu { display: none; }
  .c-bar__menu.is-open {
    order: 4; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    flex-basis: 100%;
    max-height: calc(100svh - 74px); overflow-y: auto;
    padding: 12px 0 4px; margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.16);
  }
  .c-bar__inner:has(.c-bar__menu.is-open) { flex-wrap: wrap; }

  .c-bar__nav { flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; }
  .c-bar__link { padding: 11px 12px; border-radius: 8px; font-size: 15.5px; }
  .c-bar__link.is-active { background: rgba(255,255,255,.95); color: #0D4F47; font-weight: 700; }
  .c-bar__short { display: none; }
  .c-bar__long { display: inline; }

  .c-bar__out { width: 100%; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16); }
  .c-bar__signout { width: 100%; padding: 11px 12px; text-align: left; font-size: 15.5px; }
}

.c-main { max-width: 880px; margin-inline: auto; padding: 18px 16px 120px; }

.c-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.c-head h1 { margin: 0; font-size: 21px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.c-head h1 svg { width: 21px; height: 21px; color: var(--a-accent); flex-shrink: 0; }

/* ── One accent per counter section ───────────────── */
/* The counter's sections share a shell — a bar, tiles, a span bar, a list of
   cards — so two of them a tap apart can read as the same screen. Each section
   gets a colour of its own, declared once here and used twice: to retint the
   accent token while you are in that section, and to tint that section's tile
   on the hub, so the colour is learned before it is relied on.

   Retinting the token is what does the work — every accent-coloured thing on the
   page (the tile icons, the scan tile, the active tab, the day separators, the
   primary button, a focused field) follows it at once, with no per-page rule.

   The brand bar stays teal whatever the section: it is the product's own colour,
   and moving it would read as a different app rather than a different page.
   Orders keeps the teal too — it is the main workflow, so it is the one that
   should look like home.

   Colour is never the only cue: the two tile-led sections also name themselves
   and say which way the money goes in a .c-hat, and every other section already
   carries its name and icon in a .c-head. */
body.counter {
  --sec-orders:     #16736A; --sec-orders-d:   #115A53; --sec-orders-soft:   #E7F2F0;
  --sec-expenses:   #A75E15; --sec-expenses-d: #80460F; --sec-expenses-soft: #FBF0E2;
  --sec-time:       #3B5BA5; --sec-time-d:     #2C4680; --sec-time-soft:     #EAEFFA;
  --sec-schedule:   #7A4E9E; --sec-schedule-d: #5F3B7D; --sec-schedule-soft: #F3ECF9;
  --sec-log-book:   #8A3A5E; --sec-log-book-d: #6B2B48; --sec-log-book-soft: #F8ECF1;
  --sec-bank:       #8A6410; --sec-bank-d:     #6B4D0B; --sec-bank-soft:     #F7F0DC;
  --sec-petty-cash: #4E7A1E; --sec-petty-cash-d: #3B5E15; --sec-petty-cash-soft: #EEF5E4;
}
body.counter[data-counter-section="expenses"] {
  --a-accent: var(--sec-expenses); --a-accent-d: var(--sec-expenses-d); --a-soft: var(--sec-expenses-soft);
}
body.counter[data-counter-section="time_records"] {
  --a-accent: var(--sec-time); --a-accent-d: var(--sec-time-d); --a-soft: var(--sec-time-soft);
}
body.counter[data-counter-section="schedule"] {
  --a-accent: var(--sec-schedule); --a-accent-d: var(--sec-schedule-d); --a-soft: var(--sec-schedule-soft);
}
body.counter[data-counter-section="log_book"] {
  --a-accent: var(--sec-log-book); --a-accent-d: var(--sec-log-book-d); --a-soft: var(--sec-log-book-soft);
}
body.counter[data-counter-section="bank"] {
  --a-accent: var(--sec-bank); --a-accent-d: var(--sec-bank-d); --a-soft: var(--sec-bank-soft);
}
body.counter[data-counter-section="petty_cash"] {
  --a-accent: var(--sec-petty-cash); --a-accent-d: var(--sec-petty-cash-d); --a-soft: var(--sec-petty-cash-soft);
}
/* On a phone the active bar link inverts to a white pill, which is the one
   place the bar can carry the section's colour without the brand moving. */
@media (max-width: 560px) {
  .c-bar__link.is-active { color: var(--a-accent-d); }
}

/* ── Section hat ──────────────────────────────────── */
/* Orders and expenses both open on a row of tiles, which is what made them
   twins. This says which one you are on, and — the part staff actually need —
   which way the money is going. */
.c-hat {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--a-soft); border-radius: 12px;
  border-left: 4px solid var(--a-accent);
}
.c-hat__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--a-accent); color: #fff;
}
.c-hat__icon svg { width: 20px; height: 20px; }
.c-hat strong { display: block; font-size: 16.5px; color: var(--a-accent-d); }
.c-hat small { display: block; font-size: 13px; color: var(--a-muted); }

/* ── Big actions ──────────────────────────────────── */
.c-actions, .c-scanform__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.c-action {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; min-height: 76px;
  background: var(--a-surface); border: 1.5px solid var(--a-line); border-radius: 12px;
  color: var(--a-ink); text-decoration: none; cursor: pointer;
}
.c-action:hover, .c-action:focus-within { border-color: var(--a-accent); }
.c-action strong { display: block; font-size: 15.5px; }
.c-action small { display: block; color: var(--a-muted); font-size: 13px; }
.c-action__icon { font-size: 26px; line-height: 1; }
/* Tiles take either an emoji or an icon() SVG; match the emoji's size. */
.c-action__icon svg { display: block; width: 26px; height: 26px; color: var(--a-accent); }
/* The hub's three sections. */
.c-actions--three { grid-template-columns: repeat(3, 1fr); }
.c-actions--four { grid-template-columns: repeat(4, 1fr); }
/* Five to seven across is too tight on a counter tablet, so they wrap to rows
   of three. */
.c-actions--five, .c-actions--six, .c-actions--seven { grid-template-columns: repeat(3, 1fr); }
/* On the hub every tile wears its own section's colour, so staff meet the
   pairing before they have to rely on it. */
.c-action--s-orders   .c-action__icon svg { color: var(--sec-orders); }
.c-action--s-expenses .c-action__icon svg { color: var(--sec-expenses); }
.c-action--s-time     .c-action__icon svg { color: var(--sec-time); }
.c-action--s-schedule .c-action__icon svg { color: var(--sec-schedule); }
.c-action--s-log-book .c-action__icon svg { color: var(--sec-log-book); }
.c-action--s-bank     .c-action__icon svg { color: var(--sec-bank); }
.c-action--s-petty-cash .c-action__icon svg { color: var(--sec-petty-cash); }

.c-action--scan { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
.c-action--scan small { color: rgba(255,255,255,.8); }
.c-action--scan:hover { background: var(--a-accent-d); }

.c-section { margin-bottom: 22px; }
.c-section__title { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--a-muted); margin: 0 0 10px; }

.c-search { display: flex; gap: 8px; margin-bottom: 12px; }
.c-search input {
  flex: 1; min-width: 0; padding: 11px 13px 11px 40px;
  border: 1.5px solid var(--a-line); border-radius: 8px; font: inherit; font-size: 16px;
}
/* A magnifying glass inside a counter search box — the orders list's .c-search,
   and .c-glass on a .so-bar__search (the expenses list). A background, so it needs
   no markup and is never a tap target; a data URI can't read tokens, so it spells
   out --a-muted. The .c-glass selector outranks .so-bar input's own background. */
.c-search input, .c-glass input[type="search"] {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361726F' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 13px center / 18px;
}
.c-glass input[type="search"] { padding-left: 34px; background-position: 11px center; background-size: 16px; }
.c-search input:focus { outline: none; border-color: var(--a-accent); }
.c-tabs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
/* Said only when a search has reached past the last week, with the way back. */
.c-window { margin: 0; align-self: center; font-size: 14px; color: var(--a-muted); }

/* The results frame dims while a live search is in flight, so a slow reply
   reads as "fetching" rather than as a list that stopped responding. */
#order_results[aria-busy="true"] { opacity: 0.55; transition: opacity 120ms ease-in 80ms; }

/* ── Order list ───────────────────────────────────── */
.c-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-order {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
  padding: 14px; background: var(--a-surface);
  border: 1px solid var(--a-line); border-radius: 10px;
}
.c-order__main { color: inherit; text-decoration: none; min-width: 0; }
.c-order__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.c-order__no { font-size: 17px; font-weight: 700; color: var(--a-accent); letter-spacing: .4px; }
.c-order__name { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-order__meta { display: block; font-size: 13px; color: var(--a-muted); }
.c-order__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.c-order__total { font-size: 16px; font-variant-numeric: tabular-nums; }
.c-order__pay { font-size: 12.5px; font-weight: 600; color: var(--a-muted); text-align: right; }
.c-order__buttons { grid-column: 1 / -1; display: flex; gap: 8px; }
.c-order__buttons form { margin: 0; }
/* The orders list puts the name between the number and the status, and the
   payment method in front of the total, one line each. The pill never shrinks,
   since the status is what somebody acts on; a long name gives way instead.
   The expense list shares .c-order and keeps its own stacked layout. */
.c-order--so .c-order__top { flex-wrap: nowrap; }
.c-order--so .c-order__no,
.c-order--so .a-pill { flex: none; }
.c-order--so .c-order__top .c-order__name { flex: 0 1 auto; min-width: 0; font-size: 15.5px; }
.c-order--so .c-order__side { flex-direction: row; align-items: baseline; gap: 8px; }
@media (max-width: 520px) {
  /* The name sits right under the number, with no gap of its own. */
  .c-order--so .c-order__top { flex-wrap: wrap; row-gap: 0; }
  .c-order--so .c-order__top .c-order__name { order: 1; flex-basis: 100%; margin-top: 2px; }
  /* The total holds the top right corner and the method goes under it, or
     "Cash + GCash" squeezes the pill off the first line. */
  .c-order--so .c-order__side { flex-direction: column; align-items: flex-end; align-self: start; gap: 2px; }
  .c-order--so .c-order__pay { order: 1; }
}
/* The three printouts, joined: a printer, then SO · Stub · Tags. Pushed to the
   row's far end so the status button keeps the left, where the thumb starts. */
.c-printset {
  display: inline-flex; align-items: stretch; margin-left: auto;
  border: 1px solid var(--a-line); border-radius: 6px; overflow: hidden;
  background: var(--a-surface);
}
.c-printset__icon {
  display: inline-flex; align-items: center; padding: 0 9px;
  background: var(--a-soft); color: var(--a-accent);
  border-right: 1px solid var(--a-line);
}
.c-printset__icon svg { width: 16px; height: 16px; }
.c-printset a {
  display: inline-flex; align-items: center; padding: 5px 12px;
  font-size: 13px; font-weight: 600; color: var(--a-ink); text-decoration: none;
}
.c-printset a + a { border-left: 1px solid var(--a-line); }
.c-printset a:hover, .c-printset a:focus-visible { background: var(--a-soft); color: var(--a-accent-d); }

/* The separator between days on the list. The rows are newest first, so each
   one heads the orders taken in on that day. */
.c-day {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-bottom: 2px; border-bottom: 1px solid var(--a-line);
}
.c-day:first-child { margin-top: 0; }
.c-day__label { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--a-accent); }
.c-day__count { font-size: 12.5px; color: var(--a-muted); }

/* One page of the list fetches the next as it is scrolled into view; the frame
   is a child of the <ul>, so it has to lay its rows out as if it weren't there.
   Except while it is still waiting to load: Turbo's lazy loading watches the
   frame itself with an IntersectionObserver, and a `display: contents` element
   has no box, so it never "appears" and the next page is never fetched. Until
   Turbo stamps it `complete` it is a plain block holding "Loading more…". */
turbo-frame.c-page { display: contents; }
turbo-frame.c-page[loading="lazy"]:not([complete]) { display: block; }
.c-more { padding: 14px; text-align: center; color: var(--a-muted); font-size: 14px; }

.c-scan {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px;
  background: var(--a-warn-bg); border-radius: 9px; color: var(--a-warn);
  font-weight: 600; text-decoration: none;
}
.c-scan small { font-weight: 400; }
.c-scanrow { display: flex; align-items: center; gap: 8px; }
.c-scanrow .c-scan { flex: 1; }
.c-scanrow form { margin: 0; }
.c-head__actions form { margin: 0; }
.c-wait form { margin-top: 18px; }

/* ── Show page ────────────────────────────────────── */
.c-print-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
/* Secondary to the status buttons above them: printing happens once, moving
   the order along is the page's job. */
.c-print {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px 12px; min-height: 48px; border-radius: 10px;
  background: #fff; border: 1.5px solid var(--a-line); color: var(--a-accent-d);
  font-weight: 700; font-size: 14.5px; text-decoration: none;
}
.c-print:hover { border-color: var(--a-accent); background: var(--a-soft); }

/* A record's header card on the counter — who, how much, the few facts that
   matter, and what to do next. The order and the expense pages both open on
   it, tinted by the section's accent. */
.c-hero {
  background: #fff; border: 1px solid var(--a-line); border-top: 4px solid var(--a-accent);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
}
.c-hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.c-hero__who { min-width: 0; }
.c-hero__name { display: block; font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.c-hero__phone {
  display: inline-block; margin-top: 4px; font-weight: 600; font-size: 15px;
  color: var(--a-accent-d); text-decoration: none;
}
.c-hero__phone:hover { text-decoration: underline; }
.c-hero__sum { text-align: right; flex-shrink: 0; }
.c-hero__total { display: block; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.c-hero__paid { font-size: 13px; color: var(--a-muted); }
.c-hero__facts {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--a-line);
}
.c-hero__facts li {
  background: var(--a-soft); border-radius: 8px; padding: 6px 10px; font-size: 14px; font-weight: 600;
}
.c-hero__facts span { font-weight: 400; color: var(--a-muted); margin-right: 2px; }
.c-hero__facts .c-hero__fact--warn { background: var(--a-warn-bg); color: var(--a-warn); }
.c-hero__sub { display: block; margin-top: 4px; font-size: 14px; color: var(--a-muted); }
.c-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.c-hero__actions form { margin: 0; }

/* Details under the header card: tighter, and label beside value on a phone
   too, since what is left is short. */
.so-view .a-def { grid-template-columns: minmax(110px, max-content) 1fr; gap: 8px 18px; }
.so-view .a-def dt { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; padding-top: 2px; }
.so-view .a-def dd { margin: 0; overflow-wrap: anywhere; }
.so-view .a-def a { color: var(--a-accent-d); }
.c-footer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.c-footer-actions form { margin: 0; }
.so-lines tfoot th { font-size: 15px; border-top: 2px solid var(--a-line); }

/* ── Scanning ─────────────────────────────────────── */
.c-hint { color: var(--a-muted); font-size: 14px; margin: 0 0 14px; }
.c-alt { text-align: center; color: var(--a-muted); margin-top: 18px; }
.c-visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.c-scanform__preview { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: 10px; border: 1px solid var(--a-line); margin-bottom: 14px; background: #fff; }
.c-scanform__submit { width: 100%; justify-content: center; padding: 15px; font-size: 16px; }
.c-scanform__submit:disabled { opacity: .45; cursor: not-allowed; }

.c-wait { text-align: center; padding: 40px 10px 20px; }
.c-wait h1 { font-size: 20px; margin: 16px 0 6px; }
.c-wait p { color: var(--a-muted); margin: 0; }
.c-wait__spinner {
  width: 46px; height: 46px; margin: 0 auto;
  border: 4px solid var(--a-soft); border-top-color: var(--a-accent); border-radius: 50%;
  animation: c-spin .9s linear infinite;
}
@keyframes c-spin { to { transform: rotate(360deg); } }

.c-photo { margin: 0 0 16px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px; overflow: hidden; }
.c-photo summary { padding: 12px 14px; font-weight: 600; cursor: pointer; }
.c-photo img { display: block; width: 100%; max-height: 80vh; object-fit: contain; background: #fff; }
.c-photo--static { margin-top: 16px; }

/* ── Service order form (counter + admin) ─────────── */
.so-form { max-width: 880px; }
.so-card {
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 12px;
  padding: 16px; margin-bottom: 14px;
}
.so-card__title { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.so-card__title small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--a-muted); }
.so-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.so-grid__wide { grid-column: 1 / -1; }
.so-form .a-field input, .so-form .a-field textarea, .so-form .a-field select { font-size: 16px; padding: 11px 12px; } /* 16px stops iOS zooming */

/* Fields the AI wasn't sure about. */
.is-uncertain > label::after, .so-card.is-uncertain > .so-card__title::after {
  content: "Check"; margin-left: 8px; padding: 1px 8px; border-radius: 99px;
  background: var(--a-warn-bg); color: var(--a-warn); font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.a-field.is-uncertain input { border-color: #E2B45C; background: #FFFBF2; }
.so-card.is-uncertain { border-color: #E2B45C; }

.so-group { margin: 18px 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--a-muted); }
.so-group:first-of-type { margin-top: 0; }
.so-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

.so-item {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--a-line); border-radius: 11px; background: #fff;
  overflow: hidden; transition: border-color .15s, background .15s;
}
.so-item.is-picked { border-color: var(--a-accent); background: var(--a-soft); }
.so-item__main {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 13px 8px; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.so-item__name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.so-item__meta { font-size: 13px; color: var(--a-muted); }
.so-item__amount { font-size: 14px; font-weight: 700; color: var(--a-accent-d); min-height: 1.3em; font-variant-numeric: tabular-nums; }

.so-stepper { display: grid; grid-template-columns: 48px 1fr 48px; border-top: 1px solid var(--a-line); }
.so-item.is-picked .so-stepper { border-top-color: rgba(22,115,106,.25); }
.so-stepper__btn {
  height: 46px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--a-accent);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.so-stepper__btn:active { background: rgba(22,115,106,.12); }
.so-stepper__qty {
  width: 100%; min-width: 0; border: 0; background: transparent; text-align: center;
  font: inherit; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.so-stepper__qty:read-only { cursor: default; caret-color: transparent; }
.so-stepper__qty::-webkit-inner-spin-button, .so-stepper__qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.so-other {
  display: grid; grid-template-columns: 1fr 76px 100px; gap: 8px 10px; align-items: end;
  padding: 10px 0; border-top: 1px dashed var(--a-line);
}
.so-other:first-of-type { border-top: 0; }
.so-other .so-item__amount { grid-column: 1 / -1; }

.so-status { display: flex; gap: 0; margin: 0 0 16px; padding: 0; border: 0; }
.so-status legend { font-size: 13px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.so-status__option { flex: 1; }
.so-status__option input { position: absolute; opacity: 0; }
.so-status__option span {
  display: block; padding: 12px; text-align: center; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--a-line); background: #fff; color: var(--a-muted);
}
.so-status__option:first-of-type span { border-radius: 9px 0 0 9px; }
.so-status__option:last-of-type span { border-radius: 0 9px 9px 0; border-left: 0; }
.so-status__option input:checked + span { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
.so-status__option input:focus-visible + span { outline: 3px solid rgba(22,115,106,.35); outline-offset: 2px; }

/* Transaction screenshot for a non-cash payment. */
.so-proof { margin: -4px 0 16px; }
.so-proof > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.so-proof input[type=file] { font-size: 14px; }
.so-proof__pick { margin-bottom: 0; }
.so-proof__current { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.so-proof__current img, .so-proof__preview {
  display: block; width: 120px; max-height: 160px; object-fit: contain;
  border: 1px solid var(--a-line); border-radius: 8px; background: #fff;
}
.so-proof__preview { margin-top: 10px; }
.so-proof__remove { font-size: 13px; color: var(--a-muted); }

/* Part paid in cash — see cash_part_controller.js. Folded, a dashed tile that
   says what it will do; open, a small receipt of the two halves. */
.so-split { margin-bottom: 16px; }
.so-split__open {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px; border: 1.5px dashed var(--a-line); border-radius: 10px;
  background: #fff; color: var(--a-ink); font: inherit; text-align: left; cursor: pointer;
}
.so-split__open:hover { border-color: var(--a-accent); background: var(--a-soft); }
.so-split__open strong { display: block; font-size: 14px; color: var(--a-accent-d); }
.so-split__open small { display: block; font-size: 12.5px; color: var(--a-muted); }
.so-split__plus {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--a-soft); color: var(--a-accent-d); font-size: 18px; font-weight: 700; line-height: 1;
}

.so-split__card { border: 1.5px solid var(--a-accent); border-radius: 10px; background: #fff; overflow: hidden; }
.so-split__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 6px 6px 14px; background: var(--a-soft);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--a-accent-d);
}
.so-split__clear {
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--a-accent-d); font-size: 15px; cursor: pointer;
}
.so-split__clear:hover { background: rgba(255,255,255,.7); }
.so-split__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 6px 14px; border-top: 1px solid var(--a-line);
  font-size: 15px;
}
.so-split__head + .so-split__row { border-top: 0; }
.so-split__row > label { margin: 0; font-size: 15px; font-weight: 600; }
.so-split__row strong { font-variant-numeric: tabular-nums; }
.so-split__row--total { background: #FAFBFB; color: var(--a-muted); }
.so-split__row--total strong { color: var(--a-ink); font-size: 16px; }
.so-split__money { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--a-muted); }
.so-split__money input {
  width: 7.5em; padding: 8px 10px; text-align: right;
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.so-split__money input::-webkit-inner-spin-button,
.so-split__money input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.so-split__warn {
  margin: 0; padding: 8px 14px; border-top: 1px solid #F2D9A6;
  background: #FFF6E3; color: #7A5200; font-size: 13px;
}
.so-split__card.is-over { border-color: #E0A93B; }

.so-proof__shot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--a-line); }
.so-proof__shot h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.so-proof__shot img {
  display: block; width: 100%; max-width: 300px; border: 1px solid var(--a-line); border-radius: 8px; background: #fff;
}

.so-totalbar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--a-line);
  box-shadow: 0 -6px 18px rgba(7,48,42,.08);
  backdrop-filter: blur(6px);
}
.so-totalbar__sum span { display: block; font-size: 12.5px; color: var(--a-muted); }
.so-totalbar__sum strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.so-totalbar__save { padding: 14px 26px; font-size: 16px; }

/* Admin-only bits */
.so-filter .a-panel__body { align-items: end; }
.so-filter__go { justify-content: flex-end; }

/* The orders list's bar: where you are, how to move, what to look for — one
   row, so the list starts high on the page. */
.so-bar {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px;
}
.so-bar__when { display: flex; align-items: center; gap: 8px; min-width: 0; }
.so-bar__now {
  font-size: 16px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap;
}
.so-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--a-line); border-radius: 50%;
  background: #fff; color: var(--a-muted); font-size: 17px; line-height: 1; text-decoration: none;
}
.so-step:hover { border-color: var(--a-accent); background: var(--a-soft); color: var(--a-accent-d); }

.so-bar__jump, .so-bar__search { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The search takes whatever the date picker and the buttons leave. */
.so-bar__search { flex: 1 1 220px; }
.so-bar input {
  padding: 7px 11px;
  border: 1.5px solid var(--a-line); border-radius: 6px;
  font: inherit; font-size: 14px;
  background: #fff; color: var(--a-ink);
}
.so-bar__search input[type="search"] { width: 100%; }
.so-bar input:focus { outline: none; border-color: var(--a-accent); box-shadow: 0 0 0 3px rgba(22,115,106,.13); }
/* The span the sheet covers, pushed to the end of the bar. */
.so-bar__span { margin: 0 0 0 auto; font-size: 13px; color: var(--a-muted); white-space: nowrap; }

/* The status tabs and the bucket's figures share a line. */
.so-tally { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 12px; }
.so-summary { margin: 0; font-size: 14px; color: var(--a-muted); white-space: nowrap; }
.so-summary strong { color: var(--a-ink); font-variant-numeric: tabular-nums; }

/* The admin orders list: the span's figures, the status tabs and the table in
   one panel, read top to bottom. */
.so-figures {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0; border-bottom: 1px solid var(--a-line);
}
.so-figures > div { padding: 14px 18px; min-width: 0; }
.so-figures > div + div { border-left: 1px solid var(--a-line); }
.so-figures dt {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--a-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.so-figures dd {
  margin: 4px 0 0; font-size: 19px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.so-figures__total { background: var(--a-soft); }
.so-figures__total dd { color: var(--a-accent-d); }

.so-list__tabs {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--a-line);
}
.so-list__cap { margin: 0; font-size: 13px; color: var(--a-muted); }
/* The count rides in the tab as a quiet badge rather than in brackets. */
.so-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.so-tabs__n {
  min-width: 20px; padding: 0 6px; border-radius: 999px;
  background: #EEF1F0; color: var(--a-muted);
  font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.so-tabs a.is-active .so-tabs__n { background: rgba(255,255,255,.22); color: #fff; }

/* The table itself: two-line cells carry what used to be two columns. */
.so-table .a-pill { white-space: nowrap; }
.so-table td small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--a-muted); }
.so-table__when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.so-table__no { white-space: nowrap; }
.so-table__no .a-rowlink { font-variant-numeric: tabular-nums; }
.so-table .so-phone { display: none; }
.so-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 4px; vertical-align: 1px;
  background: #EEF1FA; color: #3B4A7A; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}

@media (max-width: 820px) {
  /* Five figures in a row stop fitting: the total takes a line of its own. */
  .so-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .so-figures > div + div { border-left: 0; }
  .so-figures > div { border-bottom: 1px solid var(--a-line); }
  .so-figures > div:nth-child(even) { border-left: 1px solid var(--a-line); }
  .so-figures__total { grid-column: 1 / -1; border-bottom: 0 !important; }
  /* The cash split is in the figures above; the rows keep the total. */
  .so-table .so-col-split { display: none; }
  .so-table th, .so-table td { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 620px) {
  /* Loads are in the figures too; the status is what a phone has to show. */
  .so-table .so-col-loads, .so-table .so-col-when { display: none; }
  .so-table .so-phone { display: block; }
  .so-table th, .so-table td { padding-left: 8px; padding-right: 8px; }
  .so-table th:first-child, .so-table td:first-child { padding-left: 14px; }
  .so-table .a-pill { padding: 3px 8px; font-size: 10.5px; letter-spacing: .3px; }
  /* Stacked, but the day and its arrows stay together on their own line. */
  .so-bar__when { width: 100%; justify-content: space-between; }
  .so-bar__jump, .so-bar__search { flex: 1 1 100%; }
}
.so-scan { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 18px; align-items: start; }
.so-scan img { border-radius: 8px; border: 1px solid var(--a-line); }
.so-scan pre { font-size: 12.5px; background: #F6F9F8; padding: 12px; border-radius: 6px; overflow-x: auto; }

/* The admin order page: where it stands and what to do on top, the services
   beside the customer and the pick-up underneath. */
.sov-steps {
  display: flex; gap: 0; margin: 0; padding: 16px 18px; list-style: none;
  border-bottom: 1px solid var(--a-line);
}
.sov-steps li { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The line joining one step to the next stretches, so the steps sit at the
   start, the middle and the end of the bar. */
.sov-steps li + li { flex: 1; }
.sov-steps li + li::before {
  content: ""; flex: 1 1 28px; min-width: 12px; height: 2px; margin: 0 4px; background: var(--a-line);
}
.sov-steps li.is-done + li::before, .sov-steps li.is-current + li.is-done::before,
.sov-steps li.is-done + li.is-current::before { background: var(--a-accent); }
.sov-steps__dot {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--a-line); background: #fff; color: var(--a-muted);
  font-size: 13px; font-weight: 700;
}
.sov-steps .is-done .sov-steps__dot { border-color: var(--a-accent); background: var(--a-soft); color: var(--a-accent-d); }
.sov-steps .is-current .sov-steps__dot { border-color: var(--a-accent); background: var(--a-accent); color: #fff; }
.sov-steps__label { font-size: 14px; font-weight: 600; color: var(--a-muted); line-height: 1.25; min-width: 0; }
.sov-steps .is-current .sov-steps__label, .sov-steps .is-done .sov-steps__label { color: var(--a-ink); }
.sov-steps__label small { display: block; font-size: 12px; font-weight: 400; color: var(--a-muted); }

.sov-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 18px; }
.sov-actions form { margin: 0; }
.sov-actions__rule { width: 1px; height: 26px; margin: 0 4px; background: var(--a-line); }
.sov-actions__delete { margin-left: auto !important; }

.sov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 18px; align-items: start; }
.sov-paid { font-size: 13.5px; color: var(--a-muted); }
.sov-paid strong { color: var(--a-ink); }
.sov-total { font-size: 17px; color: var(--a-accent-d); }
.sov-notes { white-space: pre-wrap; }
.sov-def { grid-template-columns: 96px 1fr; gap: 9px 12px; margin: 0; font-size: 14px; }
.sov-def dt { color: var(--a-muted); font-size: 13px; }
.sov-def dd { margin: 0; overflow-wrap: anywhere; }
.sov-def dd small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--a-muted); }
.sov-def a { color: var(--a-accent-d); }
.sov-proof { margin: 0; border-top: 0; }

@media (max-width: 900px) {
  .sov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sov-steps { padding: 14px; }
  .sov-steps__dot { width: 24px; height: 24px; font-size: 12px; }
  .sov-steps__label { font-size: 12.5px; }
  .sov-steps__label small { font-size: 11px; }
  .sov-actions__rule { display: none; }
  .sov-actions__delete { margin-left: 0 !important; }
}

@media (max-width: 560px) {
  .so-grid { grid-template-columns: 1fr; }
  .so-items { grid-template-columns: 1fr 1fr; }
  .so-item__name { font-size: 14px; }
  .so-other { grid-template-columns: 1fr 64px 84px; }
  .c-bar__who { padding: 3px 9px; gap: 5px; font-size: 13.5px; }
  .c-bar__who svg { width: 14px; height: 14px; }
  /* Hub tiles: two to a row with the icon over the label, so the sections fit
     one screen instead of a column of wide bars. Every count, or the gated
     tiles would be the ones left as wide bars. */
  .c-actions--three, .c-actions--four,
  .c-actions--five, .c-actions--six, .c-actions--seven { grid-template-columns: 1fr 1fr; }
  .c-actions--three .c-action, .c-actions--four .c-action,
  .c-actions--five .c-action, .c-actions--six .c-action, .c-actions--seven .c-action {
    flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 13px;
  }
  .t-day { grid-template-columns: 1fr auto; }
  .t-day__punches { grid-column: 1 / -1; }
  .so-scan { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .c-bar__brand span { display: none; }
}
@media (max-width: 360px) {
  .so-items, .c-actions, .c-scanform__pick, .c-print-buttons { grid-template-columns: 1fr; }
}

/* Returning-customer dropdown at the top of the order form. Full width above
   the two-column grid so it reads as a shortcut, not another field. */
.so-picker { margin-bottom: 14px; }
.so-picker select { width: 100%; }
.so-picker__hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--a-accent-d);
}

/* The type-ahead under the customer name field. The list floats over the grid
   rather than sitting in it, so the fields below don't jump as matches land
   under somebody's thumb. */
.so-suggest { position: relative; }
.so-suggest__list {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  max-height: 268px; overflow-y: auto;
  margin: 3px 0 0; padding: 4px; list-style: none;
  background: var(--a-surface);
  border: 1.5px solid var(--a-accent); border-radius: 12px;
  box-shadow: 0 12px 26px rgba(13, 79, 71, .18);
}
.so-suggest__option {
  display: grid; gap: 1px;
  padding: 10px 11px; border-radius: 8px; cursor: pointer;
}
.so-suggest__option strong { font-size: 15px; font-weight: 600; }
.so-suggest__option span { font-size: 12.5px; color: var(--a-muted); }
.so-suggest__option.is-active,
.so-suggest__option:hover { background: var(--a-soft); }

/* The three-answer dialog on "Mark ready for pickup" — text the customer, or
   don't, or neither. Built by sms_prompt_controller.js, so it exists only
   where the browser can actually open a Messages app. */
.c-ask {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 20px;
  border: none; border-radius: 16px;
  background: var(--a-surface); color: inherit;
  box-shadow: 0 18px 44px rgba(13, 79, 71, .28);
}
.c-ask::backdrop { background: rgba(13, 79, 71, .45); }
.c-ask h2 { margin: 0 0 6px; font-size: 19px; }
.c-ask p { margin: 0 0 4px; font-size: 15px; }
.c-ask__actions { display: grid; gap: 9px; margin-top: 18px; }

/* ── Daily time record ────────────────────────────── */
.t-clock {
  display: grid; justify-items: center; gap: 8px;
  padding: 26px 18px; margin-bottom: 22px;
  background: var(--a-surface); border: 1.5px solid var(--a-line); border-radius: 14px; text-align: center;
}
.t-clock--on { border-color: var(--a-accent); }
.t-clock--stale { border-color: var(--a-warn, #C2761B); }
.t-clock__label { margin: 0; font-size: 14px; color: var(--a-muted); }
.t-clock__time { margin: 0; font-size: 38px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.t-clock__hint { margin: 0; font-size: 13.5px; color: var(--a-muted); max-width: 44ch; }
/* Deliberately large: this is pressed with wet hands on a shared tablet. */
.t-punch {
  margin-top: 6px; padding: 16px 44px; border: 0; border-radius: 12px;
  background: var(--a-accent); color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.t-punch:hover { filter: brightness(1.06); }
.t-punch--out { background: var(--a-accent-d, #0D4F47); }
.t-clock form { margin: 0; }

.t-day {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 10px;
}
/* A row carrying a button after its hours — the admin's "on the clock" list. */
.t-day--action { grid-template-columns: 1fr auto auto auto; }
.t-day__date { font-weight: 600; }
.t-day__date small { display: block; font-weight: 400; font-size: 12px; color: var(--a-muted); }
.t-day__punches { font-variant-numeric: tabular-nums; color: var(--a-muted); font-size: 13.5px; }
.t-day__hours { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.t-day__hours small { display: block; font-weight: 400; font-size: 12px; color: var(--a-muted); }

/* The admin's day view. The head carries the two ways off the page, the bar
   carries the day, and the table sits flush in its panel. */
.t-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.t-daybar .so-bar__now { display: inline-flex; align-items: center; gap: 8px; min-width: 190px; justify-content: center; }
.t-daybar__tag {
  padding: 2px 8px; border-radius: 999px; background: var(--a-soft); color: var(--a-accent-d);
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.so-step.is-disabled { opacity: .35; cursor: default; }
.so-step.is-disabled:hover { border-color: var(--a-line); background: #fff; color: var(--a-muted); }
.t-table td small.muted { display: block; font-size: 12px; margin-top: 2px; }
.t-table__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-table__act { text-align: right; }
@media (max-width: 620px) { .t-daybar .so-bar__now { min-width: 0; } }
/* The sheet's bar carries the quick ranges and two dates beside the arrows. */
.t-daybar .a-filters { flex-wrap: nowrap; }
.t-range { margin-left: auto; }
.t-range input[type="date"] { min-width: 0; }

/* Open days the sheet leaves out, each a row with its way to a correction. */
.t-open { border-color: var(--a-warn); }
.t-open .a-panel__head { background: var(--a-warn-bg); }
.t-open__list { list-style: none; margin: 0; padding: 0; }
.t-open__list li {
  display: grid; grid-template-columns: minmax(120px, auto) 1fr auto; align-items: center; gap: 6px 14px;
  padding: 10px 18px; border-bottom: 1px solid var(--a-line); font-size: 14.5px;
}
.t-open__list li:last-child { border-bottom: 0; }

/* Regular and overtime as one bar per person, drawn against the longest. */
.t-col-bar { width: 26%; min-width: 170px; }
.t-bar { display: inline-flex; vertical-align: middle; width: calc(100% - 46px); height: 10px; border-radius: 999px; background: #EEF1F0; overflow: hidden; }
.t-bar__reg { background: var(--a-accent); }
.t-bar__ot  { background: var(--a-warn); }
.t-bar__pct { display: inline-block; width: 40px; margin-left: 6px; text-align: right; font-size: 13px; color: var(--a-muted); font-variant-numeric: tabular-nums; }
.t-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--a-muted); }
.t-legend__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.t-legend__key--reg { background: var(--a-accent); }
.t-legend__key--ot  { background: var(--a-warn); }

@media (max-width: 620px) {
  .t-range { margin-left: 0; }
  .t-daybar .a-filters { flex-wrap: wrap; }
  .t-open__list li { grid-template-columns: 1fr auto; }
  .t-open__list li .muted { grid-column: 1; grid-row: 2; }
  .t-col-bar { min-width: 130px; }
}
.t-missing { margin: 0; padding: 12px 18px; border-top: 1px solid var(--a-line); background: var(--a-warn-bg); color: var(--a-warn); }

/* The missing-punch banner. Unlike .a-flash it isn't transient — it stays until
   the punch is actually fixed, on the counter and in the admin alike. */
.c-notice {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 10px 16px; background: var(--a-accent-d, #0D4F47); color: #fff; font-size: 14px; font-weight: 600;
}
.c-notice a { color: #fff; text-decoration: underline; }
.c-notice--warn { background: #A15C12; }
/* In-page notices need room; the layout banner stays flush. */
.c-notice--spaced { margin-top: 16px; }

/* ── The missing-punch banner ─────────────────────── */
/* It sits directly under the bar, and both were the same dark teal, so it read
   as part of the header and got looked straight past — by admins most of all,
   who see it on /admin where nothing else is that colour. It is a call to
   action, not chrome, so it gets a colour of its own that no bar shares and no
   section's accent can turn into.

   Deliberately not the section accent: an admin who has not clocked in should
   see the same band whichever page they are standing on. */
.c-notice--punch      { background: #B4551A; }
.c-notice--punch-open { background: #9E3325; }
/* The action is a button rather than an underlined word: this is the one banner
   that exists to be tapped, and it is tapped with a wet thumb. */
.c-notice--punch a, .c-notice--punch-open a {
  padding: 5px 14px; border-radius: 999px;
  background: rgba(255,255,255,.95); color: #22160C;
  font-weight: 700; text-decoration: none;
}
.c-notice--punch a:hover, .c-notice--punch-open a:hover { background: #fff; }

/* The AI's read of a day, in the admin. */
.t-findings { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.t-finding {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px; border-left: 3px solid var(--a-line); background: var(--a-surface); border-radius: 0 8px 8px 0;
}
.t-finding--medium { border-left-color: #C2761B; }
.t-finding--high { border-left-color: #A3312A; }
.t-review-run { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 14px; }
.t-review-run__label { font-size: 13px; font-weight: 600; color: var(--a-muted); margin: 0; }
/* The select runs one review; this is the only thing here that saves anything. */

/* ── The admin customer book ──────────────────────── */
/* It borrows the orders list's bar, figures and tabs; these are only its own
   cells. The phone number rides under the name once the contact column goes. */
.so-figures dd small { font-size: 12.5px; font-weight: 600; color: var(--a-muted); }
.cu-table td small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--a-muted); }
.cu-table .a-pill { margin-left: 4px; vertical-align: 1px; }
.cu-name { display: flex; align-items: center; gap: 12px; }
.cu-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--a-soft); color: var(--a-accent-d); font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
}
.cu-table .cu-phone { display: none; }
.cu-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cu-table th .bk-sort { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 820px) {
  .cu-table .cu-col-contact, .cu-table .cu-col-avg { display: none; }
  .cu-table .cu-phone { display: block; }
}
@media (max-width: 520px) {
  .cu-avatar { display: none; }
}

/* ── Deleting an order ──────────────────────────────── */
/* Its own panel at the foot of the order page, well clear of the status
   buttons a thumb is aiming for. */
.so-delete { margin-top: 32px; }
.so-delete .a-panel__body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.so-delete p { flex: 1 1 280px; margin: 0; font-size: 14px; color: var(--a-muted); }
.so-delete .a-btn--danger { border-color: var(--a-bad); background: var(--a-bad-bg); }