/* public/till/optionsPanel.css  (Till v2 — options panel, build-queue slice 10)
 *
 * Spec 5: semantic tokens only, never a raw hex in a component. Every colour
 * below reads a token with a fallback, so this file works on its own AND drops
 * into till.css (slice 06) without redefining anything that file owns.
 *
 * Targets are the spec's, not a guess: 48 px minimum for anything tappable,
 * 56 for chips, 64 for Done. Nothing here animates except transform and
 * opacity, and prefers-reduced-motion turns even those into instant swaps. */

.opt-panel {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  background: var(--surface, #ffffff);
  color: var(--ink, #17191c);
  font-size: var(--t-md, 17px);
  line-height: 24px;
  /* The bill stays visible beside the panel: the panel covers the MENU pane
     only, so the line you are building is on screen while you build it. */
  animation: opt-slide-in 200ms ease-out;
}

.opt-panel[hidden] {
  display: none !important;
}

@keyframes opt-slide-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* ------------------------------- header -------------------------------- */

.opt-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #d6d6d2);
  background: var(--surface, #ffffff);
}

.opt-heading {
  flex: 1;
  min-width: 0;
}

.opt-title {
  margin: 0;
  font-size: var(--t-lg, 20px);
  line-height: 28px;
  font-weight: 700;
}

.opt-sub {
  margin: 2px 0 0;
  font-size: var(--t-sm, 15px);
  line-height: 20px;
  color: var(--ink-2, #5c6168);
}

.opt-x {
  flex: none;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--line, #d6d6d2);
  border-radius: 12px;
  background: var(--surface-2, #ececE9);
  color: var(--ink, #17191c);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ----------------------------- operators ------------------------------- */

.opt-ops {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line, #d6d6d2);
  overflow-x: auto;
}

.opt-ops[hidden] {
  display: none !important;
}

.opt-op {
  flex: 1 0 auto;
  min-width: 72px;
  min-height: 48px;
  border: 1px solid var(--line, #d6d6d2);
  border-radius: 12px;
  background: var(--surface-2, #ececE9);
  color: var(--ink, #17191c);
  font-size: var(--t-sm, 15px);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.opt-op.is-on {
  background: var(--accent, #1c3a2e);
  border-color: var(--accent, #1c3a2e);
  color: var(--accent-ink, #ffffff);
}

/* ------------------------------- body ---------------------------------- */

.opt-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.opt-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opt-group.is-nested {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 3px solid var(--line, #d6d6d2);
}

.opt-group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.opt-group-title {
  font-size: var(--t-sm, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink, #17191c);
}

.opt-group-rule {
  font-size: var(--t-xs, 13px);
  line-height: 16px;
  color: var(--ink-2, #5c6168);
}

/* "needed" is the only thing on the panel that shouts, and it shouts in the
   same colour as every other thing that stops a send. */
.opt-group-flag {
  font-size: var(--t-xs, 13px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warn, #b26a00);
}

.opt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.opt-chips[hidden] {
  display: none !important;
}

.opt-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid var(--line, #d6d6d2);
  border-radius: 14px;
  background: var(--surface-2, #ececE9);
  color: var(--ink, #17191c);
  font-size: var(--t-md, 17px);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease-out, background-color 120ms ease-out;
}

/* Hit area 4 px beyond the visible edge, so the gap between two chips is not
   a dead strip (spec 5.4). */
.opt-chip::after {
  content: '';
  position: absolute;
  inset: -4px;
}

.opt-chip.is-on {
  background: var(--accent, #1c3a2e);
  border-color: var(--accent, #1c3a2e);
  color: var(--accent-ink, #ffffff);
}

.opt-chip.is-pressing {
  transform: scale(0.97);
}

/* Sold out stays VISIBLE and refuses: a chip that vanished would move every
   other chip under a finger already on its way down. */
.opt-chip.is-out {
  opacity: 0.55;
  border-style: dashed;
  color: var(--ink-2, #5c6168);
  background: var(--surface, #ffffff);
}

.opt-chip.is-out .opt-chip-price {
  color: var(--danger, #b3261e);
  font-weight: 700;
}

/* A manager approved this 86'd choice on this line. It is full strength again,
   because it is genuinely being sold — but it keeps the dashed edge and the
   red OUT, so nobody reads it as "back on" and rings the next one without
   asking. */
.opt-chip.is-out.is-override {
  opacity: 1;
  border-color: var(--danger, #b3261e);
  color: var(--ink, #14161a);
}

/* An ingredient change is not the same kind of thing as an extra you added, and
   at arm's length across a busy panel it must not look like one. Each mode
   keeps the panel's ground and states itself in its own colour — a 3 px edge
   and the word — so NO reads as a removal, not as a selection. These come after
   .is-on deliberately: an ingredient chip is "on", but it is not an accent. */
.opt-chip.is-remove,
.opt-chip.is-light,
.opt-chip.is-side,
.opt-chip.is-extra {
  background: var(--surface, #ffffff);
  border-width: 3px;
  font-weight: 700;
}

.opt-chip.is-remove {
  border-color: var(--danger, #b3261e);
  color: var(--danger, #b3261e);
}

.opt-chip.is-light,
.opt-chip.is-side {
  border-color: var(--warn, #b26a00);
  color: var(--warn, #b26a00);
}

.opt-chip.is-extra {
  border-color: var(--ok, #1e7f4f);
  color: var(--ok, #1e7f4f);
}

/* An ingredient chip grows by a word when it is cycled — "tomato" becomes
   "LIGHT tomato" — and a chip that grows pushes its neighbours sideways, out
   from under a finger already on its way down to the next one. Holding a width
   that the cycle's words fit inside means the row does not move while it is
   being used. */
.opt-group-ingredients .opt-chip {
  min-width: 168px;
}

.opt-chip-name {
  font-weight: 600;
}

.opt-chip-price {
  font-size: var(--t-sm, 15px);
  font-variant-numeric: tabular-nums;
  /* "+£1.50" never breaks across two lines: a price split in half is a price
     somebody misreads. */
  white-space: nowrap;
  opacity: 0.85;
}

.opt-more {
  align-self: flex-start;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px dashed var(--line, #d6d6d2);
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2, #5c6168);
  font-size: var(--t-sm, 15px);
  cursor: pointer;
}

.opt-note {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line, #d6d6d2);
  border-radius: 12px;
  background: var(--surface, #ffffff);
  color: var(--ink, #17191c);
  font: inherit;
}

.opt-status {
  flex: none;
  margin: 0;
  padding: 0 16px;
  min-height: 20px;
  font-size: var(--t-sm, 15px);
  line-height: 20px;
  color: var(--ink-2, #5c6168);
}

/* A standing condition of this line, not a passing message: it stays until the
   choice comes off, and it is coloured like the thing it is warning about. */
.opt-notice {
  flex: none;
  margin: 0;
  padding: 6px 16px;
  font-size: var(--t-sm, 15px);
  line-height: 20px;
  font-weight: 600;
  color: var(--danger, #b3261e);
}

.opt-notice[hidden] {
  display: none;
}

/* ------------------------------- footer -------------------------------- */

.opt-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line, #d6d6d2);
  background: var(--surface, #ffffff);
}

.opt-spacer {
  flex: 1;
}

.opt-same {
  min-height: 56px;
  padding: 8px 16px;
  border: 1px solid var(--line, #d6d6d2);
  border-radius: 14px;
  background: var(--surface-2, #ececE9);
  color: var(--ink, #17191c);
  font-size: var(--t-md, 17px);
  cursor: pointer;
}

.opt-same[hidden] {
  display: none !important;
}

/* Done is 64 tall, on the right, and never within 16 px of anything
   destructive — there is nothing destructive on this panel at all. */
.opt-done {
  min-height: 64px;
  min-width: 200px;
  padding: 8px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--accent, #1c3a2e);
  color: var(--accent-ink, #ffffff);
  font-size: var(--t-md, 17px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

/* Disabled wears the reason, so it is a sentence and not a dead grey slab. */
.opt-done:disabled,
.opt-done.is-blocked {
  background: var(--surface-2, #ececE9);
  color: var(--ink-2, #5c6168);
  border: 1px solid var(--line, #d6d6d2);
  cursor: not-allowed;
}

.opt-panel :focus-visible {
  outline: 3px solid var(--focus, #1f5fbf);
  outline-offset: 2px;
}

/* ---------------------------- half and half ----------------------------- */

/* Two columns, side by side, because that is what a half and half IS: the
   pizza the guest is describing has a left and a right, and a panel that made
   you switch tabs between them would lose the one thing the shape is for —
   seeing both halves at once while you build them. */

.opt-halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.opt-half {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #d6d6d2);
  border-radius: 12px;
  background: var(--surface-2, #f7f7f4);
}

/* The Left/Right heading is the loudest thing in its column: on a busy pass
   the only mistake that matters here is putting the 'nduja on the wrong side. */
.opt-group-halfpick > .opt-group-head .opt-group-title {
  font-size: var(--t-md, 17px);
  letter-spacing: 0.04em;
}

/* The Whole / Half & half row sits across the full width, above the columns. */
.opt-group-half .opt-chips {
  gap: 8px;
}

.opt-group-half .opt-chip {
  border-style: dashed;
}

/* ------------------------------- phone --------------------------------- */

@media (max-width: 767px) {
  .opt-panel {
    position: fixed;
    inset: 0;
    z-index: 50;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .opt-chip,
  .opt-group-ingredients .opt-chip {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  /* All five operators fit across a phone rather than hiding SWAP off the
     right-hand edge, where nobody would ever find it. */
  .opt-op {
    min-width: 56px;
    padding: 0 4px;
  }

  .opt-done {
    line-height: 1.25;
  }

  .opt-done {
    min-width: 0;
    flex: 1;
  }
}

/* ------------------------------ motion --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .opt-panel,
  .opt-chip {
    animation: none;
    transition: none;
  }

  .opt-chip.is-pressing {
    transform: none;
    border-width: 3px;
  }
}