/* ==========================================================================
   THE BAKERY'S ORDER AHEAD PAGE (render/bakery-order-page.ts), shared by Build and QA. Prefix bko-.
   The bakery's own colors (Foundations' --bk-* values), not house tokens: it is a picture of someone else's site,
   so it looks the same in the day and night themes. Every size inside it is in em, from one font size set by the
   width the drawing is given (container query units), so it scales like a picture and reflows to its phone layout
   when its box is narrow, whatever the viewport.
   ========================================================================== */
.bko {
  --bk-ground: #F6F1E7; --bk-ink: #2B2219; --bk-ink-2: #5E4F40; --bk-photo: #E7DCC8; --bk-rule: #D9CCB5;
  --bk-crust: #7A3E1D;   /* the bakery's one action color: 8.4:1 on the ground */
  --bk-error: #9E2A1C;   /* 6.6:1 on the ground */
  --bk-field: #FFFDF8;
  container-type: inline-size;
  min-width: 0;
  border: 1px solid var(--rule-firm);
  background: var(--paper-deep);
}
.bko__bar { display: flex; align-items: center; gap: var(--s3); margin: 0; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule-firm); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-2); }
.bko__dots { display: inline-flex; gap: 4px; flex: none; }
.bko__dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--rule-firm); }
.bko__addr { flex: 1; min-width: 0; padding: 2px var(--s2); border: 1px solid var(--rule); background: var(--paper); overflow-wrap: anywhere; }

.bko__pg { position: relative; margin: var(--s3); padding: 1.4em 1.6em 1.8em; background: var(--bk-ground); color: var(--bk-ink); font: clamp(.625rem, 2.05cqi, 1rem)/1.45 var(--ui); }
:where(.bko__pg) p { margin: 0; }
.bko__nav { display: flex; align-items: baseline; gap: 1.4em; padding-bottom: .8em; margin-bottom: 1.6em; border-bottom: 1px solid var(--bk-rule); font-size: .82em; color: var(--bk-ink-2); }
.bko__nav b { margin-right: auto; font: 800 1.15em/1 var(--display); letter-spacing: -.01em; color: var(--bk-ink); }
.bko__nav span { position: relative; }
.bko__nav .is-here { color: var(--bk-ink); text-decoration: underline; text-decoration-color: var(--bk-crust); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.bko__nav i { display: none; font-style: normal; }
.bko__h { position: relative; font: 800 2.6em/1 var(--display); letter-spacing: -.035em; color: var(--bk-ink); }
.bko__intro { position: relative; max-width: 34em; margin-top: .7em; font-size: 1.05em; color: var(--bk-ink-2); }
.bko__deliv { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin-top: .6em; font-size: .9em; color: var(--bk-ink-2); }
.bko__deliv .vis-mark { color: var(--bk-ink); border-color: var(--bk-ink-2); }

.bko__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.2em; align-items: start; margin-top: 1.8em; }
.bko__items, .bko__form { position: relative; }
.bko__h2 { position: relative; margin-bottom: .6em; font: 750 1.35em/1.1 var(--display); letter-spacing: -.02em; }
.bko__items ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bk-rule); }
.bko__items li { display: flex; align-items: center; gap: 1em; padding: .8em 0; border-bottom: 1px solid var(--bk-rule); }
.bko__name { position: relative; flex: 1; min-width: 0; overflow-wrap: break-word; }
.bko__name b { position: relative; display: block; font: 700 1.05em/1.25 var(--display); }
.bko__name small { display: block; font-size: .85em; color: var(--bk-ink-2); }
.bko__stars { position: relative; display: block; margin-top: .2em; font-size: .8em; letter-spacing: .1em; color: var(--bk-crust); }
.bko__qty { position: relative; flex: none; display: inline-flex; align-items: center; border: 1px solid var(--bk-ink-2); white-space: nowrap; }
.bko__qty i, .bko__qty b { display: inline-grid; place-items: center; width: 2em; height: 2em; font: 600 .95em/1 var(--ui); }
.bko__qty b { border-inline: 1px solid var(--bk-rule); }
.bko__none { position: relative; padding: 1.4em 0 .4em; border-top: 1px solid var(--bk-rule); font: 700 1.05em/1.3 var(--display); }
.bko__link { color: var(--bk-crust); text-decoration: underline; text-underline-offset: .25em; }
.bko__ghost { position: relative; display: block; flex: 1; height: 2.2em; background: var(--bk-photo); }
.bko__ghost--qty { flex: 0 0 6em; }

.bko__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8em; padding: 1.2em; border: 1px solid var(--bk-rule); background: var(--bk-field); }
.bko__field { position: relative; display: grid; gap: .25em; font-size: .85em; color: var(--bk-ink-2); }
.bko__field > span:first-child { position: relative; }
.bko__in { min-width: 0; overflow-wrap: anywhere; display: flex; justify-content: space-between; min-height: 2.3em; align-items: center; padding: 0 .7em; border: 1px solid var(--bk-ink-2); background: var(--bk-field); color: var(--bk-ink); font-size: 1.1em; }
.bko__in i { font-style: normal; color: var(--bk-ink-2); }
.bko__field.is-bad .bko__in { border: 2px solid var(--bk-error); }
.bko__msg { color: var(--bk-error); font-weight: 600; overflow-wrap: anywhere; }
.bko__msg::before { content: "! "; }
.bko__summary { position: relative; padding: .7em .8em; border-left: 3px solid var(--bk-error); background: #F9E9E4; color: var(--bk-error); font: 700 .95em/1.35 var(--ui); }
.bko__btn { position: relative; display: block; padding: .8em 1em; background: var(--bk-crust); color: var(--bk-ground); font: 650 1em/1 var(--ui); text-align: center; }

/* pins sit in the page's left margin, level with the top of their slot, so they never cover the words */
.bko .bko__pin { position: absolute; z-index: 1; top: -.1rem; left: calc(-1 * (1.6em + .9rem)); }
.bko__name .bko__pin, .bko__stars .bko__pin { left: calc(-1 * (1.6em + .9rem)); }
.bko__nav .bko__pin { top: -.4rem; }
.bko__qty .bko__pin { top: -1rem; left: auto; right: -1rem; }
.bko__btn .bko__pin { top: -.8rem; left: -.8rem; }

/* the drifted draft: the gap nobody chose, drawn as a measurement */
.bko__gap { position: relative; display: flex; align-items: center; justify-content: center; height: 3.6em; border-block: 1px dashed var(--bk-ink-2); }
.bko__gap b { padding: 0 .5em; background: var(--bk-ground); font: .8em/1 var(--mono); color: var(--bk-ink-2); }
.bko--drifted .bko__body { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bko--drifted .bko__form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
.bko--drifted .bko__btn { align-self: end; }

/* a crop: just the region under the heading, for the four state frames */
.bko--crop .bko__pg { padding-bottom: 1.2em; }
.bko--crop .bko__h { font-size: 1.9em; margin-bottom: .8em; }
.bko--crop .bko__items, .bko--crop .bko__form { margin-top: 0; }

/* phone width: one column, the menu folds away */
.bko--phone { max-width: 20rem; }
@container (max-width: 26rem) {
  .bko__pg { margin: var(--s2); padding: 1.1em 1.1em 1.4em; font-size: clamp(.6875rem, 4.1cqi, .9375rem); }
  .bko .bko__pin { left: calc(-1 * (1.1em + .6rem)); }
  .bko__nav span { display: none; }
  .bko__nav span.is-new { display: inline; }
  .bko__nav i { display: inline; }
  .bko__h { font-size: 2.1em; }
  .bko__body { grid-template-columns: minmax(0, 1fr); gap: 1.4em; }
  .bko--drifted .bko__form { grid-template-columns: minmax(0, 1fr); }
}

/* the narrowest crops (a phone frame inside a two-up grid): tighter steppers */
@container (max-width: 15rem) {
  .bko__items li { flex-wrap: wrap; gap: .4em .5em; }
  .bko__name { flex-basis: 100%; }
  .bko__qty i, .bko__qty b { width: 1.6em; }
  .bko__ghost--qty { flex-basis: 4.5em; }
  .bko__nav i { display: none; }
}

/* ---- the plan, before anything is built (S3): an outline, numbered by step ---- */
.bko--plan .bko__pg { background: var(--bk-field); }
.bko--plan .bko__nav .is-new { color: var(--bk-crust); }
.bko__wire { position: relative; padding: 1.2em; border: 1.5px dashed var(--bk-ink-2); }
.bko__wh { position: relative; font: 750 1.4em/1.1 var(--display); letter-spacing: -.02em; }
.bko__wl { height: .55em; margin-top: .7em; background: var(--bk-rule); }
.bko__wl--short { width: 60%; }
.bko__wbody { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1em; margin-top: 1.2em; }
.bko__wbox { position: relative; display: flex; align-items: flex-end; min-height: 7em; padding: .7em; border: 1px dashed var(--bk-ink-2); font: .8em/1.3 var(--mono); color: var(--bk-ink-2); }
.bko__wbox--form { border-style: solid; border-color: var(--bk-crust); color: var(--bk-crust); }
.bko__map { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1em; margin-top: 1.2em; padding-top: .8em; border-top: 1px solid var(--bk-rule); font-size: .85em; color: var(--bk-ink-2); }
.bko__mapk { font: .9em/1 var(--mono); }
.bko__map ul { display: flex; flex-wrap: wrap; gap: .3em 1em; list-style: none; margin: 0; padding: 0; }
.bko__map li { position: relative; }
.bko__map li.is-new { color: var(--bk-crust); font-weight: 650; }
.bko__map li.is-cut s { text-decoration-color: var(--bk-error); text-decoration-thickness: 2px; }
.bko--plan .bko__pin { position: relative; top: auto; left: auto; margin-right: .5em; vertical-align: middle; }
.bko__map .bko__pin { position: absolute; top: -1.4em; left: -.4em; }
.bko__map > .bko__pin { position: relative; top: auto; left: auto; }
@container (max-width: 26rem) { .bko__wbody { grid-template-columns: minmax(0, 1fr); } .bko__wbox { min-height: 4em; } }

/* ---- the approved homepage (Foundations' drawing) ---- */
.bko__photo { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--bk-photo); }
.bko__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.bko__photo .bko__pin { top: .6rem; left: .6rem; }
.bko__h--home { margin-top: .6em; font-size: 2.3em; }
.bko--home .bko__intro { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.bko--home .bko__intro .vis-mark { color: var(--bk-ink); border-color: var(--bk-ink-2); }

/* ---- the order button with its focus ring (QA's fixed crop; E4: the focus style lives in the button component) ---- */
.bko--focus-button .bko__btn { outline: 3px solid var(--bk-ink); outline-offset: 3px; }

/* ---- the menu page (QA, 2026-10-08): six cards on white, the allergens link, a cookie banner. As found (bko--found)
   it carries what E2, E3 and E4 recorded; bko--fixed draws it after the fixes. The two caption colors are E4's own
   token values on white: #8C8C8C (about 3.4:1) as found, #6B6B6B (about 5.3:1) as fixed. ---- */
.bko--menu .bko__pg { padding-bottom: 0; }
.bko__lab { position: relative; }
.bko__lab .bko__pin { top: -1.9em; left: 50%; transform: translateX(-50%); }
.bko__space { position: relative; display: block; height: 2.2em; }
.bko__space .bko__pin { top: .5em; }
.bko__cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; margin: 0; padding: 0; }
.bko__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .35em; min-width: 0; overflow-wrap: break-word; padding: .9em .9em 1em; background: #FFFFFF; border: 1px solid var(--bk-rule); }
.bko__cn { font: 700 1.05em/1.2 var(--display); color: var(--bk-ink); }
.bko__cn u { text-decoration-color: var(--bk-crust); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.bko__cd { position: relative; font-size: .85em; line-height: 1.4; color: var(--bk-ink-2); }
.bko__cc { position: relative; display: block; font-size: .78em; }
.bko--found .bko__cc { color: #8C8C8C; }
/* the failing caption is a picture of E4's finding: its words are generated, so a checker reads the page, not the picture */
.bko--found .bko__cc::after { content: attr(data-t); }
.bko--fixed .bko__cc { color: #6B6B6B; }
.bko__more { position: relative; justify-self: start; margin-top: .2em; font-size: .85em; color: var(--bk-crust); text-decoration: underline; text-underline-offset: .2em; }
.bko__card .bko__pin { left: calc(-1 * (.9em + 1.6em + .9rem)); }
.bko__card .bko__more .bko__pin { left: calc(100% + .5rem); top: -.2rem; }
.bko__end { position: relative; display: block; height: 3em; }
.bko__end .bko__pin { top: 1em; }
.bko__base { position: relative; margin: 0 -1.6em; }
.bko__foot { display: flex; gap: 1.6em; padding: 1em 1.6em 1.2em; border-top: 1px solid var(--bk-rule); font-size: .85em; color: var(--bk-ink-2); }
.bko__allerg { color: var(--bk-crust); text-decoration: underline; text-underline-offset: .2em; }
.bko__allerg.is-focus { outline: 3px solid var(--bk-ink); outline-offset: 3px; }
.bko__banner { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em 1.6em; background: var(--bk-ink); color: var(--bk-ground); font-size: .85em; }
.bko__banner b { padding: .35em 1em; background: var(--bk-ground); color: var(--bk-ink); font-weight: 650; }
/* as found, the banner sits over the page's last line, the focused allergens link included (2.4.11) */
.bko--found .bko__banner { position: absolute; inset: auto 0 0 0; }
.bko--found .bko__allerg { outline: 3px solid var(--bk-ink); outline-offset: 3px; }
.bko__banner .bko__pin { left: 6.2em; top: -1rem; }
/* phone header: the links fold behind "Menu"; fixed, the order link stays out */
.bko__burger { position: relative; }
.bko__burger .bko__pin { left: auto; right: -1.5rem; top: -1.1rem; }
.bko__nav span .bko__pin { top: -1.9em; left: 50%; transform: translateX(-50%); }
.bko--only-header .bko__pg { padding-bottom: 1em; }
.bko--only-header .bko__h { font-size: 1.9em; }
/* one card at 200% zoom with WCAG's text spacing (1.4.12): as found, its fixed height cuts the description off */
.bko--only-card .bko__pg { padding: 1em; }
.bko__cards--zoom { grid-template-columns: minmax(0, 1fr); }
.bko__cards--zoom .bko__card { font-size: 1.6em; line-height: 1.5; letter-spacing: .12em; word-spacing: .16em; }
.bko__cards--zoom .bko__cd, .bko__cards--zoom .bko__cc { line-height: 1.5; }
.bko--found .bko__cards--zoom .bko__cd { display: block; height: 4.5em; overflow: hidden; }
@container (max-width: 26rem) {
  .bko__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
  .bko__card { padding: .7em .7em .8em; }
  /* as found, the phone header still names the page you're on; the order link is the one folded away (E2) */
  .bko--found .bko__nav span.bko__lab { display: inline; }
  .bko--menu .bko__nav span.bko__keep { display: inline; margin-left: auto; color: var(--bk-crust); font-weight: 650; }
  .bko__nav span.bko__pin { display: inline-grid; }
  .bko__card .bko__pin { left: calc(-1 * (.9em + 1.1em + .6rem)); }
  .bko__card .bko__more .bko__pin { left: calc(100% + .5rem); }
  .bko__base { margin: 0 -1.1em; }
  .bko__foot, .bko__banner { padding-inline: 1.1em; }
}
@container (max-width: 15rem) { .bko__cards { grid-template-columns: minmax(0, 1fr); } }