/* ============================================================================
   FOOD ORDERS · Mel's Drive-In for a member (2026-10-20)
   DESIGN READ  in-product order composer for floor staff on a phone or a desk,
                Backline v2 dark ops language, leaning a diner guest check.
   TOKEN PLAN   app tokens for everything around the check (--surf / --surf3 /
                --line2 cards, --ink / --mut text, --teal for the armed confirm,
                --ok / --warn / --bad status). The check itself carries three
                local values only: paper #F2EEE3, check ink #1E1B16, Mel's rule
                red #B8322A. --sans body, --mono for every number.
   SIGNATURE    the guest check: a paper ticket with a notched tear edge whose
                biggest line is what the member pays, the TRC card amount under
                it. It is the only light surface in the app, so the money is the
                one thing the eye lands on.
   SELF-CRITIQUE first plan was a teal KPI pair like every other money screen;
                that repeats the app, so the money moved onto the check.
   ============================================================================ */
.fo { --chk-paper: #F2EEE3; --chk-ink: #1E1B16; --chk-mut: #5E574B; --chk-red: #B8322A; }
.fo { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }
.fo :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 8px; }
.fo-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 14px; }
.fo-head .screen-title { margin: 0; }
.fo-sub { font-size: 12.5px; color: var(--mut); margin-top: 4px; }
.fo-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fo-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-size: 13.5px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }
.fo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1024px) {
  .fo-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; }
  .fo-side { position: sticky; top: 12px; }
}
.fo-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fo-card { background: var(--surf2); border: 1px solid var(--line2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fo-h { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 0; }
.fo-note { font-size: 12.5px; color: var(--mut); line-height: 1.45; margin: 0; }
.fo-warn { font-size: 12.5px; color: var(--warn); line-height: 1.45; margin: 0; }
.fo-err { font-size: 13px; color: var(--bad); line-height: 1.45; margin: 0; }
.fo-ok { font-size: 13px; color: var(--ok); line-height: 1.45; margin: 0; }

/* member */
.fo-member { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fo-member .grow { min-width: 0; flex: 1 1 auto; }
.fo-member-name { font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.fo-member-sub { font-size: 12px; color: var(--mut); margin-top: 2px; }
.fo-btn { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line2); background: var(--surf3); color: var(--ink);
  font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.fo-btn:hover:not(:disabled) { border-color: var(--mut); }
.fo-btn:disabled { opacity: .5; cursor: not-allowed; }
.fo-btn.teal { border-color: var(--tealStroke); color: var(--teal); }
.fo-btn.full { width: 100%; }
.fo-btn.quiet { background: none; border-color: transparent; color: var(--mut); text-decoration: underline; padding: 0 6px; }
.fo-chips { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 2px; scrollbar-width: none; }
.fo-chips::-webkit-scrollbar { display: none; }
.fo-chip { flex-shrink: 0; min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surf);
  color: var(--ink2); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fo-chip[aria-pressed="true"] { background: var(--surf3); color: var(--ink); border-color: var(--teal); }
.fo-chip.live { border-color: var(--redStroke); color: var(--ink); }
.fo-chip.live::before { content: 'LIVE'; font-family: var(--mono); font-size: 10px; color: var(--bad); margin-right: 7px; letter-spacing: .06em; }

/* fields */
.fo-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fo-field label, .fo-label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.fo-input, .fo-textarea { width: 100%; min-width: 0; background: var(--surf); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px;
  font-family: var(--sans); font-size: 16px; color: var(--ink); }
.fo-input::placeholder, .fo-textarea::placeholder { color: var(--mut); }
.fo-input:focus, .fo-textarea:focus { border-color: var(--teal); outline: none; }
.fo-textarea { resize: vertical; min-height: 64px; line-height: 1.4; }
.fo-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.fo-seg { display: flex; width: 100%; background: var(--surf); border: 1px solid var(--hair); border-radius: 12px; padding: 3px; gap: 3px; }
.fo-seg button { flex: 1 1 0; min-height: 40px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--mut);
  font-size: 13.5px; font-weight: 600; cursor: pointer; }
.fo-seg button[aria-pressed="true"] { background: var(--surf3); border-color: var(--line2); color: var(--ink); font-weight: 700; }

/* member picker + menu lists */
.fo-list { display: flex; flex-direction: column; min-width: 0; }
.fo-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 4px; border: 0; border-top: 1px solid var(--hair);
  background: none; color: var(--ink); text-align: left; cursor: pointer; font-family: var(--sans); }
.fo-pick:first-child { border-top: 0; }
.fo-pick:hover { background: var(--surf3); }
.fo-pick .grow { flex: 1 1 auto; min-width: 0; }
.fo-pick-t { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fo-pick-s { font-size: 12px; color: var(--mut); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink2); flex-shrink: 0; }
.fo-add { font-family: var(--mono); font-size: 18px; color: var(--teal); width: 28px; text-align: center; flex-shrink: 0; }
.fo-menu-scroll { max-height: 460px; overflow-y: auto; overscroll-behavior: contain; }
.fo-cat-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); padding: 12px 4px 4px; }

/* item sheet (in place, never a native dialog) */
.fo-sheet { border: 1px solid var(--teal); background: var(--surf3); }
.fo-sheet-t { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
.fo-group { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--hair); padding-top: 10px; }
.fo-group-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.fo-group-h .req { font-family: var(--mono); font-size: 11px; color: var(--warn); font-weight: 600; }
.fo-group-h .req.met { color: var(--ok); }
.fo-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fo-opt { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--surf); color: var(--ink2);
  font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fo-opt[aria-pressed="true"] { border-color: var(--teal); color: var(--ink); background: var(--tealSoft); }
.fo-opt .fo-price { font-size: 11.5px; }
.fo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* cart */
.fo-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--hair); }
.fo-line:first-child { border-top: 0; }
.fo-line-t { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.fo-line-s { font-size: 12px; color: var(--mut); grid-column: 1 / -1; overflow-wrap: anywhere; }
.fo-step { display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.fo-step button { width: 44px; height: 40px; border: 0; background: var(--surf3); color: var(--ink); font-size: 18px; cursor: pointer; font-family: var(--mono); }
.fo-step span { min-width: 30px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); }

/* THE GUEST CHECK */
.fo-check { position: relative; background: var(--chk-paper); color: var(--chk-ink); border-radius: 4px; padding: 20px 18px 18px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle 6px at 50% 0, #0000 98%, #000) 0 0 / 18px 100% repeat-x;
          mask: radial-gradient(circle 6px at 50% 0, #0000 98%, #000) 0 0 / 18px 100% repeat-x; }
.fo-check-h { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--chk-mut); border-bottom: 2px solid var(--chk-red); padding-bottom: 8px; margin-bottom: 8px; }
.fo-check-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 3px 0; color: var(--chk-ink); }
.fo-check-row .k { font-family: var(--sans); color: var(--chk-mut); }
.fo-check-row.sub { border-top: 1px dashed #1E1B1640; margin-top: 4px; padding-top: 7px; }
.fo-check-big { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--chk-ink); }
.fo-check-big .k { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--chk-mut); }
.fo-check-big .v { font-size: 38px; font-weight: 600; line-height: 1.1; color: var(--chk-ink); letter-spacing: -.01em; }
.fo-check-card { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; font-size: 15px; }
.fo-check-card .k { font-family: var(--sans); font-size: 12.5px; color: var(--chk-mut); }
.fo-check-card .v { color: var(--chk-red); font-weight: 600; }
.fo-check-empty { font-family: var(--sans); font-size: 13px; color: var(--chk-mut); padding: 8px 0; }
.fo-check.loading .v, .fo-check.loading .fo-check-row span:last-child { opacity: .45; }

/* place order (two-tap, never moves) */
.fo-place { width: 100%; min-height: 52px; border-radius: 13px; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
  background-image: var(--grad-btn); color: #0A0C11; transition: opacity .15s ease; }
.fo-place.armed { background: var(--surf3); background-image: none; border-color: var(--teal); color: var(--teal); }
.fo-place:disabled { opacity: .5; cursor: not-allowed; }
.fo-cancel-row { min-height: 44px; display: flex; justify-content: center; align-items: center; }

/* result */
.fo-status { display: flex; flex-direction: column; gap: 4px; border-left: 3px solid var(--ok); padding: 2px 0 2px 12px; }
.fo-status.warn { border-color: var(--warn); }
.fo-status.bad { border-color: var(--bad); }
.fo-status.mut { border-color: var(--line2); }
.fo-status-t { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.fo-text { white-space: pre-wrap; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--ink); background: var(--surf);
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; margin: 0; overflow-wrap: anywhere; }
.fo-send { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fo-send .fo-btn.primary { background-image: var(--grad-btn); color: #0A0C11; border-color: transparent; font-weight: 700; }

/* orders list */
.fo-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; width: 100%; padding: 12px 4px; border: 0;
  border-top: 1px solid var(--hair); background: none; text-align: left; cursor: pointer; color: var(--ink); text-decoration: none; min-height: 60px; }
.fo-order:first-child { border-top: 0; }
.fo-order:hover { background: var(--surf3); }
.fo-order .t { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.fo-order .s { font-size: 12px; color: var(--mut); }
.fo-order .m { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; color: var(--ink); }
.fo-pill { justify-self: end; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; border: 1px solid var(--line2); color: var(--mut); }
.fo-pill.ok { color: var(--ok); border-color: var(--okStroke); background: var(--okSoft); }
.fo-pill.warn { color: var(--warn); border-color: var(--amberStroke); background: var(--warnSoft); }
.fo-pill.bad { color: var(--bad); border-color: var(--redStroke); background: var(--badSoft); }
.fo-added { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px;
  border: 1px solid var(--tealStroke); border-radius: 11px; background: var(--tealSoft); font-size: 13px; color: var(--ink); }
@media (min-width: 1024px) { .fo-added-host { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 420px) { .fo-send { grid-template-columns: minmax(0, 1fr); } .fo-row2 { grid-template-columns: minmax(0, 1fr) 96px; } }
@media (prefers-reduced-motion: reduce) { .fo-btn, .fo-place { transition: none; } }