/* Allergens.
 *
 * This screen is read with a customer standing at the till, often on a phone held at arm's length,
 * and the answer it gives can put somebody in hospital. Two things follow from that and they drive
 * every rule below.
 *
 * The first is that a status is never carried by colour alone. Every mark is a word, a shape and a
 * colour together, so it survives a colourblind reader, a sun-washed screen and a greyscale print.
 *
 * The second is that the four statuses must look like four different things. "Contains" and "May
 * contain" are answers. "Not listed" is also an answer -- the kitchen looked and did not list it --
 * and it is deliberately quiet, because a quiet mark is one a person checks rather than trusts.
 * "Not assessed" is not an answer at all, and it is drawn as an interruption: a dashed edge and a
 * struck dash, so it can never be skimmed as a blank.
 */

.allergens-main{
  /* The status ramp, declared here rather than on :root because these mean state and are not the
     tenant's branding: a workspace recolouring "Contains" is not a thing to make possible. Every
     other colour on this screen is a brand token. */
  --warn:#a5651d;--warn-soft:#f7e9d3;--warn-ink:#6d430f;--warn-ink-strong:#5c3a0d;
  --bad:#963d2d;--bad-soft:#f4dcd6;
  --good:#2b6f52;--good-soft:#e1efe7;--good-ink:#1f5039;
  --quiet:#6f615b;--quiet-soft:var(--lp-soft);
  --allergen-gap:16px;
}
.allergens-main{background:var(--lp-ground);color:var(--lp-ink);font-family:var(--lp-body);-webkit-font-smoothing:antialiased}
.allergens-main button,.allergens-main input{font-family:inherit}
.allergens-main .dataset-badge{border-radius:10px;border-color:var(--lp-line);background:var(--lp-card);box-shadow:none}
.allergens-main .module-shell{width:100%;margin:0 auto;padding:0 20px 48px;overflow-y:auto;min-height:0;height:100%}
.allergens-main .topbar,.allergens-main .module-shell{min-width:0}
.allergens-main button:focus-visible,.allergens-main input:focus-visible,.allergens-main [tabindex]:focus-visible{outline:3px solid color-mix(in srgb, var(--lp-accent) 55%, transparent);outline-offset:2px}

/* ── The search bar and the page it sits on ───────────────────────────────────────────────────── */

/* One column, centred: find the item, tick the allergies, read the answer. Nothing beside it and
   nothing sticky, so the page scrolls like a page and no box can pin another out of reach. */
.allergens-page{max-width:840px;margin:0 auto;display:grid;gap:16px;padding:28px 0 8px}
.allergens-title{margin:0 0 4px;font-family:var(--lp-display);font-size:34px;font-weight:600;letter-spacing:-.015em;line-height:1.1;color:var(--lp-ink)}
.allergens-label{margin:0;color:var(--lp-muted);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.allergens-panel{padding:18px 20px;border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-card);box-shadow:var(--lp-shadow)}
.allergens-item{display:grid;gap:10px}

.allergens-combo{position:relative}
.allergens-field{
  display:flex;align-items:center;gap:10px;
  height:calc(var(--control-height) + 8px);padding:0 8px 0 16px;
  background:var(--lp-ground);border:1px solid var(--lp-line);border-radius:var(--radius-control);
}
.allergens-field:focus-within{border-color:var(--lp-accent);background:var(--lp-card);box-shadow:0 0 0 3px color-mix(in srgb, var(--lp-accent) 18%, transparent)}
.allergens-field-glyph{width:20px;height:20px;flex:none;fill:none;stroke:var(--lp-muted);stroke-width:2;stroke-linecap:round}
.allergens-field input{flex:1;min-width:0;height:100%;border:0;background:none;font:inherit;font-size:17px;font-weight:600;color:var(--lp-ink)}
.allergens-field input::placeholder{color:var(--lp-muted);font-weight:400}
.allergens-field input:focus{outline:none}
.allergens-field input::-webkit-search-cancel-button{display:none}
.allergens-clear{
  position:relative;
  flex:none;height:32px;padding:0 12px;border:1px solid var(--lp-line);border-radius:var(--radius-control-sm);
  background:var(--lp-card);color:var(--lp-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.allergens-clear:hover{color:var(--lp-ink)}
/* Thirty-two pixels of Clear, forty-four of finger: the hit area is extended rather than the
   control made taller, so the field keeps its height. */
.allergens-clear::after{content:"";position:absolute;inset:-6px -4px}

/* The matches drop under the field and close once one is picked: the item is the question, not a
   list to read. */
.allergens-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;max-height:min(380px,60vh);overflow-y:auto;
  padding:6px;border:1px solid var(--lp-line);border-radius:12px;background:var(--lp-card);box-shadow:var(--lp-shadow-lifted)}
.allergens-suggest[hidden]{display:none}
.allergens-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:8px 12px;
  border:0;border-radius:9px;background:transparent;color:var(--lp-ink);font:inherit;text-align:left;cursor:pointer}
.allergens-option:hover,.allergens-option[aria-selected="true"]{background:var(--lp-soft)}
.allergens-option-copy{display:grid;gap:1px;min-width:0}
.allergens-option-name{font-size:15.5px;font-weight:650}
.allergens-option-where{font-size:12.5px;color:var(--lp-muted)}
.allergens-option-none{margin:0;padding:14px 12px;color:var(--lp-muted);font-size:14px}
.allergens-pill{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.allergens-pill[data-verdict="stop"]{background:var(--bad);color:var(--lp-card)}
.allergens-pill[data-verdict="check"]{background:var(--warn-soft);color:var(--warn-ink);border:1px dashed var(--warn)}
.allergens-pill[data-verdict="clear"]{background:var(--good-soft);color:var(--good-ink);border:1px solid color-mix(in srgb, var(--good) 40%, transparent)}
/* The count persists as the search's live region; the options are rebuilt in their own box. */
.allergens-count{margin:0;font-size:12px;color:var(--lp-muted);min-height:0}
.allergens-count:empty{display:none}

/* The customer's allergies are checkboxes, three by three: a box and a word, big enough for a
   finger at the till. A ticked one carries the warning colour rather than the brand's. */
.allergens-avoiding{display:grid;gap:12px}
.allergens-avoiding-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:22px}
.allergens-avoiding-reset{position:relative;padding:2px 4px;border:0;background:none;color:var(--lp-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.allergens-avoiding-reset::after{content:"";position:absolute;inset:-10px -6px}
.allergens-avoiding-reset[hidden]{display:none}
.allergens-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.allergens-chip{
  position:relative;display:flex;align-items:center;gap:11px;
  min-height:50px;padding:0 14px;border-radius:11px;cursor:pointer;
  border:1px solid var(--lp-line);background:var(--lp-ground);color:var(--lp-ink);
  font:inherit;font-size:15px;font-weight:600;text-align:left;
}
.allergens-chip:hover{border-color:color-mix(in srgb, var(--lp-ink) 30%, var(--lp-line));background:var(--lp-card)}
.allergens-check{flex:none;width:22px;height:22px;border:2px solid color-mix(in srgb, var(--lp-ink) 38%, var(--lp-line));border-radius:6px;background:var(--lp-card);position:relative}
.allergens-chip[aria-checked="true"]{background:color-mix(in srgb, var(--bad) 10%, var(--lp-card));border-color:var(--bad);color:var(--bad)}
.allergens-chip[aria-checked="true"] .allergens-check{background:var(--bad);border-color:var(--bad)}
.allergens-chip[aria-checked="true"] .allergens-check::after{content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;border:solid var(--lp-card);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

.allergens-never-safe{margin:4px 0 0;padding:0;color:var(--lp-muted);font-size:12.5px;line-height:1.45;text-align:center}
.allergens-error{margin:0;padding:11px 14px;border-radius:var(--radius-control-sm);background:var(--bad-soft);border:1px solid color-mix(in srgb, var(--bad) 36%, transparent);color:var(--bad);font-size:14px}

/* ── The answer ───────────────────────────────────────────────────────────────────────────────── */

/* A box the width of the page, read from arm's length: a translucent wash of the answer's colour,
 * with the mark solid in the middle of it, the item named, and the answer in the display face. The
 * colour, the mark and the words each say it alone, so it survives a colourblind reader, a
 * sun-washed screen and a greyscale print. */
.allergens-verdict{
  --tone:var(--lp-muted);
  position:relative;display:grid;justify-items:center;align-content:center;gap:6px;text-align:center;
  min-height:320px;padding:40px 28px 36px;border-radius:22px;
  border:1.5px solid color-mix(in srgb, var(--tone) 34%, transparent);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tone) 20%, transparent), transparent 70%),
    color-mix(in srgb, var(--tone) 9%, var(--lp-card));
  box-shadow:0 28px 60px -34px color-mix(in srgb, var(--tone) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--lp-card) 70%, transparent);
  color:var(--lp-ink);
  animation:allergens-arrive .32s cubic-bezier(.2,.8,.2,1);
}
.allergens-verdict[data-verdict="stop"]{--tone:var(--bad)}
.allergens-verdict[data-verdict="clear"]{--tone:var(--good)}
.allergens-verdict[data-verdict="check"]{--tone:var(--warn);border-style:dashed}
.allergens-verdict-mark{
  display:grid;place-items:center;width:112px;height:112px;margin-bottom:14px;border-radius:50%;
  background:var(--tone);color:var(--lp-card);
  box-shadow:0 0 0 12px color-mix(in srgb, var(--tone) 14%, transparent),0 16px 30px -12px color-mix(in srgb, var(--tone) 75%, transparent);
  animation:allergens-stamp .42s cubic-bezier(.3,1.4,.5,1);
}
.allergens-verdict-mark svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.allergens-verdict-item{margin:0;color:color-mix(in srgb, var(--tone) 70%, var(--lp-ink));font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.allergens-verdict-title{margin:0;max-width:18ch;font-family:var(--lp-display);font-size:46px;font-weight:600;line-height:1.05;letter-spacing:-.02em;color:color-mix(in srgb, var(--tone) 82%, var(--lp-ink))}
.allergens-verdict-lines{display:grid;gap:6px;margin-top:10px;max-width:56ch}
.allergens-verdict-line{margin:0;font-size:17px;line-height:1.5;color:var(--lp-ink)}
.allergens-verdict-line b{font-weight:700;color:color-mix(in srgb, var(--tone) 80%, var(--lp-ink))}
.allergens-verdict[data-verdict="waiting"],.allergens-verdict[data-verdict="empty"]{
  min-height:200px;border:2px dashed var(--lp-line);background:transparent;box-shadow:none;animation:none}
.allergens-verdict[data-verdict="waiting"] .allergens-verdict-title,.allergens-verdict[data-verdict="empty"] .allergens-verdict-title{font-size:26px;color:var(--lp-ink)}
.allergens-verdict[data-verdict="waiting"] .allergens-verdict-item{color:var(--lp-muted)}
.allergens-verdict[data-verdict="waiting"] .allergens-verdict-line,.allergens-verdict[data-verdict="empty"] .allergens-verdict-line{color:var(--lp-muted);font-size:15px}
@keyframes allergens-arrive{from{opacity:.35;transform:translateY(6px) scale(.985)}}
@keyframes allergens-stamp{from{transform:scale(.55)}}

/* ── Every allergen, folded under the answer ──────────────────────────────────────────────────── */

.allergens-full{border:1px solid var(--lp-line);border-radius:14px;background:var(--lp-card);box-shadow:var(--lp-shadow);overflow:hidden}
.allergens-full[hidden]{display:none}
.allergens-full-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:0 20px;
  border:0;background:transparent;color:var(--lp-ink);font:inherit;font-size:15px;font-weight:650;text-align:left;cursor:pointer}
.allergens-full-toggle:hover{background:var(--lp-ground)}
.allergens-full-chevron{width:10px;height:10px;border:solid var(--lp-muted);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.allergens-full-toggle[aria-expanded="true"] .allergens-full-chevron{transform:rotate(-135deg) translateX(-3px)}
.allergens-full-body{padding:0 20px 20px;border-top:1px solid var(--lp-line)}
.allergens-provenance{margin:14px 0 0;font-size:13px;color:var(--lp-muted);line-height:1.5}

/* Nine allergens, one per row, each a word and a mark on a shared right edge. */
.allergens-grid{margin:14px 0 0;border-top:1px solid var(--lp-line)}
.allergens-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--lp-line)}
.allergens-line-name{font-size:15px;font-weight:550}
.allergens-state{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  height:27px;padding:0 11px;border-radius:999px;font-size:13px;font-weight:600;
}
.allergens-state-mark{font-size:11px;line-height:1;width:11px;text-align:center}
.allergens-state[data-status="contains"]{background:var(--bad);color:var(--lp-card)}
.allergens-state[data-status="may-contain"]{background:var(--warn-soft);color:var(--warn-ink);border:1px solid var(--warn)}
.allergens-state[data-status="not-listed"]{background:var(--quiet-soft);color:var(--quiet);border:1px solid var(--lp-line)}
.allergens-state[data-status="not-assessed"]{background:transparent;color:var(--quiet);border:1px dashed var(--quiet)}
.allergens-line[data-status="not-assessed"] .allergens-line-name{color:var(--quiet)}

.allergens-legend{margin:11px 0 0;font-size:12px;color:var(--lp-muted);line-height:1.5}
.allergens-legend b{color:var(--lp-ink);font-weight:650}

.allergens-warning{
  margin:14px 0 0;padding:12px 14px;border-radius:var(--radius-control-sm);
  background:var(--warn-soft);border:1px solid color-mix(in srgb, var(--warn) 36%, transparent);
  color:var(--warn-ink);font-size:13.5px;line-height:1.5;
}
.allergens-warning strong{display:block;margin-bottom:2px;color:var(--warn-ink-strong)}

.allergens-about{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--lp-line)}
.allergens-about ul{margin:5px 0 0;padding:0;list-style:none}
.allergens-about li{position:relative;padding:0 0 0 15px;margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--lp-muted)}
.allergens-about li::before{content:"\2014";position:absolute;left:0;color:var(--quiet)}
.allergens-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--lp-line)}
.allergens-note p:last-child{margin:4px 0 0;font-size:14.5px;line-height:1.55}

.allergens-more{
  margin-top:16px;height:var(--control-height);width:100%;
  border:1px solid var(--lp-line);border-radius:var(--radius-control);
  background:var(--lp-ground);color:var(--lp-ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.allergens-more:hover{background:var(--lp-soft)}
.allergens-ingredients{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--lp-line)}
.allergens-ingredients ul{margin:6px 0 0;padding:0;list-style:none;columns:2;column-gap:20px}
.allergens-ingredients li{font-size:14.5px;line-height:1.55;padding:1px 0;break-inside:avoid}
.allergens-ingredients li::before{content:"·";color:var(--lp-accent);font-weight:700;margin-right:7px}
.allergens-unlinked{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--lp-muted)}
.allergens-source{margin:8px 0 0;font-size:12.5px;color:var(--lp-muted)}

/* ── Phone ────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width:880px){
  .allergens-main .module-shell{padding:0 14px 32px}
  .allergens-page{padding-top:16px;gap:12px}
  .allergens-title{font-size:28px}
  .allergens-panel{padding:14px}
  .allergens-chips{gap:6px}
  .allergens-chip{gap:7px;min-height:50px;padding:4px 8px;font-size:13.5px;line-height:1.2}
  .allergens-check{width:18px;height:18px;border-radius:5px}
  .allergens-chip[aria-checked="true"] .allergens-check::after{left:4.5px;top:.5px;width:4.5px;height:9px}
  .allergens-verdict{min-height:280px;padding:30px 18px 28px;border-radius:18px}
  .allergens-verdict-mark{width:92px;height:92px;margin-bottom:10px}
  .allergens-verdict-mark svg{width:50px;height:50px}
  .allergens-verdict-title{font-size:36px}
  .allergens-verdict-line{font-size:16px}
  .allergens-ingredients ul{columns:1}
  .allergens-field input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.allergens-main *{transition:none!important;animation:none!important}}