/* Audit fixes, 28 September. Keep the approved Candy Club composition. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --content-width: 1120px;
}
body { padding:var(--safe-top) var(--safe-right) 0 var(--safe-left); }
.skip-link { top:calc(12px + var(--safe-top)); left:calc(12px + var(--safe-left)); }
.food-card,.food-bubble { scroll-margin-block:16px calc(var(--dock-height,0px) + 16px); }
.browse-shell { width:100%; max-width:var(--content-width); margin-inline:auto; }
.browse-header { display:flex; flex-wrap:wrap; gap:.625rem .75rem; padding:14px 16px 12px; }
.browse-header .brand img { width:75px; height:auto; }
.header-date { flex:1 1 8rem; min-width:0; margin:0; font-size:.8125rem; }
.header-date span { display:inline-block; font-size:.75rem; }
.browse-header .signin { font-size:.8125rem; max-width:100%; white-space:normal; text-align:center; }
.browse-main { padding-inline:16px; }
.candy-hero { container-type:inline-size; }
.candy-hero h1 { font-size:clamp(2rem,calc(1rem + 10vw),4.5rem); overflow-wrap:normal; }
.hero-copy { max-width:26rem; }
.candy-collage { width:100%; }
.bubble-price { white-space:nowrap; }
.hero-sticker { max-width:45%; }
.list-heading > span { font-size:.75rem; }

/* Minimum track width follows the visitor's text size. Normal phones retain
   two columns; larger text naturally reduces the number of columns. */
body[data-layout='tiles'] .food-grid {
  --card-gap:12px;
  --minimum-column:calc((100% - var(--card-gap)) / 2);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,max(8.5rem,var(--minimum-column))),1fr));
  gap:24px var(--card-gap);
  align-items:stretch;
}
.dish-card { display:flex; }
body[data-layout='tiles'] .food-card { display:flex; flex-direction:column; width:100%; height:100%; gap:0; align-items:stretch; border-radius:19px; }
body[data-layout='tiles'] .food-card .photo { flex:none; }
body[data-layout='tiles'] .food-card-body { display:flex; flex:1; width:100%; padding:10px 2px 0; gap:4px; align-items:flex-start; }
body[data-layout='tiles'] .food-card h3 { display:block; min-height:0; margin:0; overflow:visible; -webkit-line-clamp:unset; font-size:1rem; line-height:1.25; font-weight:650; }
.card-restaurant { white-space:normal; overflow:visible; text-overflow:clip; font-size:.8125rem; line-height:1.35; }
body[data-layout='tiles'] .card-price { margin-top:auto; padding-top:.375rem; font-size:2.05rem; }
.save-card { width:44px; height:44px; }
.food-card:hover { background:none; }
.food-card:focus-visible { outline-offset:5px; }

/* Text stays inside the rounded restaurant surface. */
.branch-page { max-width:920px; margin-inline:auto; }
.branch-dish .dish-copy { padding:16px; }
.branch-dish .dish-copy h3 { margin:0; }
.branch-dish .dish-copy .offer-price { margin:12px 0 0; font-size:2rem; }
.branch-dish .dish-copy .offer-price small { display:inline-block; font-size:.9375rem; }
.branch-dish .dish-copy > :last-child { margin-bottom:0; }
.branch-dish .dish-copy .offer-full-text { margin:10px 0 0; color:var(--muted); font-size:.9375rem; }
.dish-copy .sub { white-space:pre-line; }
.branch-facts { margin-top:16px; }
.branch-facts summary { min-height:44px; }
.branch-facts .visit-source { font-size:.75rem; }

/* Shared edge protection is counted once. The measured dock includes its
   bottom inset; --dock-height includes that whole rectangle plus 18px. */
.with-dock { padding-bottom:var(--dock-height); }
.dock { left:var(--safe-left); right:var(--safe-right); width:auto; padding:10px 16px max(12px,var(--safe-bottom)); }
.dock-inner { max-width:calc(var(--content-width) - 32px); width:100%; }
.dock .button { min-height:49px; }
.dock-flow .browse-shell { display:flex; flex-direction:column; }
.dock-flow .browse-header { order:0; }
.dock-flow .dock { order:1; position:static; margin:0 16px 16px; padding:10px 0 max(12px,var(--safe-bottom)); background:transparent; box-shadow:none; border-radius:0; }
.dock-flow .browse-main { order:2; }
.dock-flow .with-dock { padding-bottom:24px; }
.dock-flow .dock-inner { max-width:none; }
.dock-flow .dock .button { max-width:28rem; margin-inline:auto; }

/* Forms keep a readable line length on large displays, and normal document
   scrolling when the keyboard or enlarged text needs more room. */
.screen { width:min(100%,30rem); padding:24px 24px max(20px,var(--safe-bottom)); }
.profile-screen { padding-top:0; }
.profile-screen > .browse-header { margin-inline:-8px; }
.question-art:has(.festival-ticket) { margin-bottom:18px; }
.question-art .festival-ticket.compact { max-width:180px; }
.question-art .compact .ticket-meta { display:none; }
.question-art .compact .ticket-inner > .festival-logo { width:100px; max-height:64px; margin:4px auto 8px; }
.question-art .compact .ticket-date { font-size:.6875rem; }
.question-art .compact .ticket-owner { margin-top:6px; padding-top:6px; }
.question-art .compact .ticket-inner { padding-top:9px; padding-bottom:8px; }
.ticket-band { background:var(--action); color:#fffdfa; overflow-wrap:anywhere; hyphens:auto; }
.ticket-meta { flex-wrap:wrap; }
.taste-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,5rem),1fr)); }
.screen .prices { flex-wrap:wrap; }
.screen .prices li { flex:1 1 5rem; }
.phone-row { flex-wrap:wrap; }
.phone-row input { min-width:7rem; }
.field .otp-input { max-width:100%; font-size:1.5rem; letter-spacing:.12em; }
dialog { max-width:calc(100% - 24px - var(--safe-left) - var(--safe-right)); max-height:calc(100svh - 24px - var(--safe-top) - var(--safe-bottom)); }

@media(min-width:700px) {
  .browse-header { padding-block:22px 16px; }
  .browse-header .brand img { width:90px; }
  .header-date { font-size:.9375rem; }
  .header-date span { font-size:.875rem; }
  .candy-hero { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; align-items:center; padding-block:16px 22px; }
  .candy-hero h1 { grid-column:1; align-self:end; }
  .hero-copy { grid-column:1; align-self:start; margin:0; font-size:1.0625rem; }
  .candy-collage { grid-column:2; grid-row:1 / 3; margin:0 auto; }
  body[data-layout='tiles'] .food-grid { --card-gap:20px; --minimum-column:calc((100% - 2 * var(--card-gap)) / 3); }
  .dock-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .dock-caption { margin:0; text-align:left; font-size:.875rem; }
  .dock .button { flex:0 1 340px; width:auto; margin-left:auto; }
  .branch-dish { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; }
  .branch-dish .dish-copy { padding:24px; }
  .branch-dish > img { height:100%; min-height:240px; }
}
@media(min-width:1000px) {
  body[data-layout='tiles'] .food-grid { --minimum-column:calc((100% - 3 * var(--card-gap)) / 4); }
}
@media(max-height:650px) {
  .question-body { margin-top:18px; }
  .question-art .festival-ticket.compact { max-width:160px; }
  .question-art .compact .ticket-inner > .festival-logo { width:76px; max-height:48px; }
  .question-art .compact .ticket-date { display:none; }
  .question-art .compact .ticket-band { padding-block:5px; }
  .question-art:has(.festival-ticket) { margin-bottom:14px; }
}
@media(max-height:600px) and (max-width:699px) {
  .candy-collage { height:190px; max-width:300px; }
  .bubble-main { width:174px; height:174px; top:0; }
  .bubble-left { width:82px; height:82px; }
  .bubble-right { width:90px; height:90px; top:95px; }
}
@media(max-height:450px) and (min-width:700px) {
  .candy-hero { padding-block:0 14px; }
  .candy-collage { height:170px; max-width:300px; }
  .bubble-main { width:158px; height:158px; }
  .bubble-left { width:76px; height:76px; }
  .bubble-right { width:82px; height:82px; top:85px; }
}
@media(forced-colors:active) {
  .save-card,.ticket-band { border:1px solid CanvasText; }
}