/* Sats 'n Shake — red, cream, checkerboard, and neon at night. Tokens: [data-room="shake"] in tokens.css. */

/* ---- hero: the sign, Patty, the menu board ---------------------------------------------------- */
.sh-hero { position: relative; padding: clamp(20px, 4vw, 44px) 0 0; overflow: hidden; }
.sh-hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: end; }
.sh-hero__copy .eyebrow { margin-bottom: var(--space-3); }
.sh-sign { max-width: 560px; margin: 0 0 var(--space-4); }
.sh-sign svg { display: block; width: 100%; height: auto; }
.sh-hero .lede { font-size: var(--step-1); max-width: 34ch; margin-bottom: var(--space-4); }
.sh-bubble {
  position: relative; display: inline-block; max-width: 40ch; padding: 10px 16px; margin-bottom: var(--space-5);
  font: 700 1.2rem/1.25 'Caveat', var(--font-body), cursive; background: var(--surface); border: var(--border);
  border-radius: 18px; box-shadow: var(--shadow-sm, 3px 3px 0 var(--shadow-color));
}
.sh-bubble::after { content: ""; position: absolute; right: -14px; bottom: 14px; border: 8px solid transparent; border-left: 12px solid var(--line); }
.sh-hero__art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px; align-items: end; padding-bottom: 18px; }
.sh-patty svg { display: block; width: 100%; max-width: 260px; height: auto; margin-inline: auto; color: var(--ink); }
.sh-board-mini {
  background: #1B1A2E; color: #FFF3DC; border: 3px solid #1B1A2E; border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 0 0 4px #D7262E, 5px 5px 0 4px #1B1A2E; transform: rotate(1.5deg); font-size: 0.82rem;
}
.sh-board-mini ul { list-style: none; margin: 0; padding: 0; }
.sh-board-mini li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dashed rgba(255, 243, 220, 0.18); }
.sh-board-mini b { color: #FFD23F; }
.sh-mb__t { margin: 0 0 6px; font: 800 1rem/1 var(--font-display); letter-spacing: 0.12em; color: #FF4F8B; text-shadow: 0 0 6px #FF4F8B; }
.sh-mb__f { margin: 6px 0 0; font: 700 0.62rem/1.2 var(--font-mono); letter-spacing: 0.08em; color: #5CF2FF; }
.sh-checks {
  height: 28px; border-block: 3px solid #1B1A2E;
  background: conic-gradient(#1B1A2E 25%, #FFF3DC 0 50%, #1B1A2E 0 75%, #FFF3DC 0) 0 0 / 28px 28px;
}

/* the sign's art */
.sa-sign-board { fill: #1B1A2E; stroke: #D7262E; stroke-width: 6; }
.sa-sign-post { stroke: #1B1A2E; stroke-width: 10; stroke-linecap: round; }
.sa-checks rect { fill: #FFF3DC; opacity: 0.85; }
.sa-neon-word { font: 800 56px/1 var(--font-display); fill: none; stroke: #FF4F8B; stroke-width: 2.4; paint-order: stroke; }
.sa-neon-word { fill: #FFE3EC; }
.sa-neon-sub { font: 700 15px/1 var(--font-mono); letter-spacing: 0.18em; fill: #5CF2FF; }
.sa-neon-bolt { fill: none; stroke: #FFD23F; stroke-width: 3; stroke-linejoin: round; }
.sa-bulbs circle { fill: #FFD23F; animation: sa-chase 1.6s steps(1) infinite; animation-delay: calc(var(--i) * 0.1s); }
.sa-neon { animation: sa-flicker 7s infinite; }
@keyframes sa-chase { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
@keyframes sa-flicker { 0%, 91%, 94%, 100% { opacity: 1; } 92% { opacity: 0.55; } 93% { opacity: 0.9; } }

/* Patty */
.sa-shadow { fill: rgba(27, 26, 46, 0.14); }
.sa-zoom { stroke: #D7262E; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 6; opacity: 0.6; }
.sa-ride { animation: sa-roll 2.4s ease-in-out infinite; transform-origin: 100px 190px; }
@keyframes sa-roll { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(6px) rotate(-1.5deg); } }
.sa-apron { fill: #FFFBF2; stroke: #1B1A2E; stroke-width: 0.8; }
.sa-apron-pocket { stroke: #D7262E; stroke-width: 1.2; }
.sa-cap { fill: #FFFBF2; stroke: #1B1A2E; stroke-width: 0.9; stroke-linejoin: round; }
.sa-cap-band { stroke: #D7262E; stroke-width: 1.6; }
.sa-boot { fill: #D7262E; stroke: #1B1A2E; stroke-width: 0.8; stroke-linejoin: round; }
.sa-wheel { fill: #FFD23F; stroke: #1B1A2E; stroke-width: 0.7; }
.sa-arm { fill: none; stroke: #1B1A2E; stroke-width: 5.4; stroke-linecap: round; }
.sa-tray { fill: #A9A5C2; stroke: #1B1A2E; stroke-width: 2.4; }
.sa-glass { fill: #FFC6D6; stroke: #1B1A2E; stroke-width: 2.4; stroke-linejoin: round; }
.sa-cream { fill: #FFFBF2; stroke: #1B1A2E; stroke-width: 2.4; stroke-linejoin: round; }
.sa-cherry { fill: #D7262E; stroke: #1B1A2E; stroke-width: 2; }
.sa-stem, .sa-straw { fill: none; stroke: #1B1A2E; stroke-width: 2.2; stroke-linecap: round; }
.sa-straw { stroke: #D7262E; stroke-width: 4; }
.sa-stripe { stroke: #FFFBF2; stroke-width: 3; opacity: 0.8; }

/* ---- lessons -------------------------------------------------------------------------------- */
.sh-lessons { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; margin: clamp(22px, 3vw, 36px) 0; }
.sh-lessons li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface); border: var(--border); border-radius: var(--radius-md, 12px); box-shadow: 3px 3px 0 var(--shadow-color); }
.sh-lessons li:nth-child(odd) { transform: rotate(-0.6deg); }
.sh-lessons li:nth-child(even) { transform: rotate(0.5deg); }
.sh-lessons b { color: var(--accent); }
.sh-lessons span { font-size: var(--step--1); color: var(--ink-soft); }

/* ---- menu + tray ------------------------------------------------------------------------------ */
.sh-order { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(18px, 3vw, 34px); align-items: start; }
.sh-menu-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: var(--space-4); }
.sh-menu-head h2 { margin: 0; }
.sh-hh { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sh-hh__chip { font: 700 var(--step--1)/1 var(--font-mono); padding: 7px 12px; border: var(--border); border-radius: 999px; background: var(--surface); }
.sh-hh__chip.is-on { background: #FF4F8B; color: #fff; box-shadow: 0 0 12px #FF4F8B; }
.sh-hh__wind { display: flex; align-items: center; gap: 6px; font-size: var(--step--1); color: var(--ink-soft); cursor: pointer; }
.sh-menu { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.sh-menu__loading { grid-column: 1 / -1; padding: 20px; }
.sh-item {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--surface);
  border: var(--border); border-radius: var(--radius-md, 12px); box-shadow: 4px 4px 0 var(--shadow-color);
  border-top: 8px solid #D7262E;
}
.sh-item--side { border-top-color: #FFD23F; }
.sh-item--shake { border-top-color: #FF4F8B; }
.sh-item__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sh-item__name { margin: 0; font-size: var(--step-0, 1rem); }
.sh-item__price { font-weight: 700; white-space: nowrap; }
.sh-item__price s { color: var(--ink-soft); font-weight: 400; }
.sh-item__price small { font-weight: 400; color: var(--ink-soft); }
.sh-item__note { margin: 0; font-size: var(--step--1); color: var(--ink-soft); font-style: italic; }
.sh-item__hh { position: absolute; top: -14px; right: 10px; padding: 3px 8px; font: 700 0.7rem/1 var(--font-mono); background: #FF4F8B; color: #fff; border: 2px solid #1B1A2E; border-radius: 6px; transform: rotate(4deg); }
.sh-item__mods { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--step--1); }
.sh-item__mods label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sh-item__opt select { width: 100%; }
.sh-item__add { margin-top: auto; align-self: flex-start; }
.sh-item.is-hop { animation: sh-hop 0.4s var(--ease-spring, ease-out); }
@keyframes sh-hop { 40% { transform: translateY(-6px) rotate(-1deg); } }

.sh-tray { position: sticky; top: 84px; }
.sh-tray__card { padding: 16px; background: var(--surface); border: var(--border); border-radius: var(--radius-lg, 16px); box-shadow: 5px 5px 0 var(--shadow-color); }
.sh-tray__head { display: flex; justify-content: space-between; align-items: baseline; }
.sh-tray__head h2 { margin: 0 0 8px; font-size: var(--step-1); }
.sh-tray__lines { list-style: none; padding: 0; margin: 0 0 10px; }
.sh-tray__empty { color: var(--ink-soft); font-style: italic; padding: 8px 0; }
.sh-line { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--paper-dot); font-size: var(--step--1); }
.sh-line--disc { color: #1D7A5F; grid-template-columns: 1fr auto; }
.sh-line__x { width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface-2); cursor: pointer; font-weight: 900; line-height: 1; }
.sh-badge { display: inline-block; padding: 1px 6px; font: 700 0.66rem/1.4 var(--font-mono); background: #FFD23F; border: 1.5px solid #1B1A2E; border-radius: 5px; vertical-align: 1px; }
.sh-badge--hh { background: #FF4F8B; color: #fff; }
.sh-tray__running { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; }
.sh-tray__running span { color: var(--ink-soft); font-size: 0.78rem; }
.sh-ring { width: 100%; }

/* the frozen ticket: curly thermal paper */
.sh-ticket-zone { margin-top: 14px; }
.sh-tk {
  position: relative; padding: 18px 16px 22px; background: #FFFEF8; color: #26242F; font-family: var(--font-mono); font-size: 0.8rem;
  box-shadow: 0 6px 14px rgba(27, 26, 46, 0.18); transform: rotate(-1deg);
  --zig: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
  -webkit-mask: radial-gradient(6px at 50% 0, #0000 98%, #000) 50% 0 / 12px 51% repeat-x, radial-gradient(6px at 50% 100%, #0000 98%, #000) 50% 100% / 12px 51% repeat-x;
  mask: radial-gradient(6px at 50% 0, #0000 98%, #000) 50% 0 / 12px 51% repeat-x, radial-gradient(6px at 50% 100%, #0000 98%, #000) 50% 100% / 12px 51% repeat-x;
}
.sh-tk__shop { margin: 0; text-align: center; font-weight: 700; letter-spacing: 0.1em; }
.sh-tk__meta { margin: 2px 0 8px; text-align: center; color: #6B6878; font-size: 0.7rem; }
.sh-tk__rows { list-style: none; padding: 6px 0; margin: 0; border-block: 1px dashed #9B98A8; }
.sh-tk__rows li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.sh-tk__total { display: flex; justify-content: space-between; margin: 8px 0 4px; font-weight: 700; font-size: 0.95rem; }
.sh-tk__digest, .sh-tk__clock { margin: 2px 0; text-align: center; font-size: 0.7rem; color: #6B6878; }
.sh-tk__clock span { font-weight: 700; color: #D7262E; }
.sh-tk__stamp { position: absolute; top: 34%; right: 10px; padding: 4px 10px; border: 3px solid #1D7A5F; color: #1D7A5F; font: 800 1rem/1 var(--font-display); text-transform: uppercase; transform: rotate(-12deg); opacity: 0.8; border-radius: 6px; }
.sh-tk[data-state="paid"] .sh-tk__stamp { border-color: #D7262E; color: #D7262E; }
.sh-tk[data-state="void"], .sh-tk[data-state="melted"] { opacity: 0.55; filter: grayscale(0.8); }
.sh-tk[data-state="void"] .sh-tk__stamp, .sh-tk[data-state="melted"] .sh-tk__stamp { border-color: #6B6878; color: #6B6878; }
.sh-tk__note { font-size: var(--step--1); color: var(--ink-soft); margin: 10px 0 0; }

/* ---- pay ---------------------------------------------------------------------------------------- */
.sh-pay { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(18px, 3vw, 40px); align-items: start; margin-block: clamp(36px, 5vw, 64px); scroll-margin-top: 90px; }
.sh-pay__door { display: flex; justify-content: center; padding-top: 10px; }
.sh-pay__side h2 { margin-top: 0; }
.sh-pay__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.sh-invoice { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin-top: 16px; padding: 12px; background: var(--surface); border: var(--border); border-radius: 12px; }
.sh-invoice__qr svg { display: block; width: 100%; height: auto; }
.sh-invoice__amt { margin: 0; font-size: 1.1rem; font-weight: 700; }
.sh-invoice__inv { margin: 2px 0 6px; font-size: 0.72rem; color: var(--ink-soft); word-break: break-all; }
.sh-invoice__note { margin: 0; font-size: var(--step--1); }

.sh-conf { margin-top: 18px; display: grid; gap: 14px; padding: 16px; background: var(--surface); border: var(--border); border-radius: var(--radius-lg, 16px); box-shadow: 5px 5px 0 #D7262E; }
.sh-conf__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.sh-conf__k { margin: 0; font: 700 0.72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); width: 100%; }
.sh-conf__n { margin: 0; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700; line-height: 1; color: #D7262E; }
.sh-conf__where { margin: 0; }
.sh-conf__code { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; }
.sh-conf__qr svg { display: block; width: 100%; height: auto; border: 2px solid var(--line); border-radius: 6px; }
.sh-conf__c { margin: 2px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; }
.sh-conf__hint { margin: 0 0 8px; font-size: var(--step--1); color: var(--ink-soft); }
.sh-receipt {
  justify-self: start; width: min(100%, 340px); padding: 16px 14px 20px; background: #FFFEF8; font: 0.78rem/1.45 var(--font-mono); color: #26242F;
  box-shadow: 0 6px 14px rgba(27, 26, 46, 0.18); transform: rotate(0.8deg);
  -webkit-mask: radial-gradient(6px at 50% 100%, #0000 98%, #000) 50% 100% / 12px 100% repeat-x;
  mask: radial-gradient(6px at 50% 100%, #0000 98%, #000) 50% 100% / 12px 100% repeat-x;
}
.sh-receipt__h { margin: 0 0 6px; text-align: center; font-weight: 700; letter-spacing: 0.2em; }
.sh-receipt__l { display: flex; justify-content: space-between; gap: 10px; margin: 0; }
.sh-receipt__t { border-top: 1px dashed #9B98A8; margin-top: 6px; padding-top: 4px; font-weight: 700; }
.sh-receipt__hash { margin: 8px 0 4px; font-size: 0.68rem; color: #6B6878; word-break: break-all; }
.sh-receipt__note { margin: 0; font-size: 0.7rem; color: #6B6878; font-family: var(--font-body); }
.sh-conf__again { margin: 0; }

/* ---- night: the board + the window --------------------------------------------------------------- */
.sh-night { background: #14102A; color: #FFF3DC; padding: clamp(28px, 4vw, 52px) 0; border-block: 4px solid #1B1A2E; background-image: radial-gradient(rgba(92, 242, 255, 0.07) 1.2px, transparent 1.6px); background-size: 18px 18px; }
.sh-night__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.sh-board { padding: 16px; border: 3px solid #FF4F8B; border-radius: 16px; box-shadow: 0 0 18px rgba(255, 79, 139, 0.45), inset 0 0 18px rgba(255, 79, 139, 0.18); }
.sb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.sb-title { margin: 0; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--font-display); letter-spacing: 0.08em; }
.sb-title__neon { color: #FFE3EC; text-shadow: 0 0 4px #FF4F8B, 0 0 12px #FF4F8B, 0 0 24px #FF4F8B; }
.sb-flavor { margin: 0; font: 700 0.78rem/1.2 var(--font-mono); color: #5CF2FF; flex: 1; min-width: 180px; }
.sb-flap { display: inline-block; padding: 2px 6px; background: #221C40; border-radius: 4px; color: #FFD23F; }
.sb-flap.is-flipping { animation: sb-clatter 0.36s steps(3); }
@keyframes sb-clatter { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.sb-bell { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; color: #FFF3DC; background: transparent; border: 2px solid #5CF2FF; border-radius: 999px; font: 700 0.74rem/1 var(--font-mono); cursor: pointer; }
.sb-bell[aria-pressed="true"] { background: #5CF2FF; color: #14102A; }
.sb-bell svg { width: 22px; height: 18px; }
.sa-bell-dome { fill: #FFD23F; stroke: #14102A; stroke-width: 2; }
.sa-bell-base, .sa-bell-knob { fill: #A9A5C2; stroke: #14102A; stroke-width: 2; }
.sb-bell.is-ringing svg { animation: sb-ding 0.5s ease-in-out 2; }
@keyframes sb-ding { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.sb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font: 700 0.7rem/1 var(--font-mono); text-transform: uppercase; color: #C9C3E6; }
.sb-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sb-legend svg { width: 14px; height: 14px; }
.sb-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.sb-empty { padding: 18px; color: #A9A5C2; font-style: italic; }
.sb-row { display: grid; grid-template-columns: 74px auto 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; background: #1F1A3A; border-radius: 10px; border: 2px solid transparent; }
.sb-row.is-mine { border-color: #FFD23F; box-shadow: 0 0 12px rgba(255, 210, 63, 0.5); }
.sb-row.is-agent { border-color: #5CF2FF; }
.sb-row.is-new { animation: sb-new 0.9s ease-out; }
@keyframes sb-new { 0% { background: #3B2F6B; } 100% { background: #1F1A3A; } }
.sb-num { font-size: 1.5rem; font-weight: 700; color: #FFE3EC; }
.sb-tag { grid-column: 2; font: 700 0.62rem/1 var(--font-mono); text-transform: uppercase; padding: 3px 6px; border-radius: 5px; background: #FFD23F; color: #14102A; }
.sb-tag--agent { background: #5CF2FF; }
.sb-row:not(.is-mine):not(.is-agent) .sb-lamps { grid-column: 2 / 4; }
.sb-lamps { display: inline-flex; gap: 8px; }
.sb-status { font: 700 0.74rem/1 var(--font-mono); color: #C9C3E6; text-align: right; }
.sb-row.is-ready .sb-status { color: #3DDC97; }
.sb-foot { margin: 10px 0 0; font-size: 0.78rem; color: #A9A5C2; }
.sa-lamp { width: 24px; height: 24px; }
.sa-lamp circle:first-child { fill: #2C2650; stroke: #0B0918; stroke-width: 2; }
.sa-lamp-shine { fill: rgba(255, 255, 255, 0.12); }
.sa-lamp.is-on.sa-lamp--paid circle:first-child { fill: #FFD23F; filter: drop-shadow(0 0 4px #FFD23F); }
.sa-lamp.is-on.sa-lamp--cooking circle:first-child { fill: #FF7A1A; filter: drop-shadow(0 0 4px #FF7A1A); }
.sa-lamp.is-on.sa-lamp--ready circle:first-child { fill: #3DDC97; filter: drop-shadow(0 0 5px #3DDC97); }
.sa-lamp.is-on.sa-lamp--picked_up circle:first-child { fill: #5CF2FF; filter: drop-shadow(0 0 5px #5CF2FF); }
.sa-lamp.is-on .sa-lamp-shine { fill: rgba(255, 255, 255, 0.6); }

.sh-window { padding: 16px; background: #FFF3DC; color: #1B1A2E; border: 3px solid #1B1A2E; border-radius: 16px; box-shadow: 6px 6px 0 #D7262E; }
.sh-window__t { margin: 0 0 6px; font-size: var(--step-1); }
.sh-window__say { margin: 0 0 12px; font: 700 1.3rem/1.2 'Caveat', var(--font-body), cursive; color: #D7262E; }
.sh-window__say[data-kind="good"] { color: #1D7A5F; }
.sh-window__row { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.sh-window__note { margin: 12px 0 0; font-size: var(--step--1); color: #5C4A3A; }

/* ---- the car hop -------------------------------------------------------------------------------- */
.sh-agent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
.sh-agent__copy h2 { margin-top: 0; }
.sh-agent__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.sh-bags { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.sh-bags__h { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sh-bags__h svg, .sh-bagt svg { width: 28px; height: 30px; flex: none; }
.sa-bag path:first-child { fill: #E8C58F; stroke: #1B1A2E; stroke-width: 2; }
.sa-bag-fold { fill: none; stroke: #1B1A2E; stroke-width: 2; }
.sa-bag-mark { fill: #D7262E; }
.sh-bagt { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "ic n what" "ic code btn"; gap: 4px 10px; align-items: center; padding: 10px; background: var(--surface); border: var(--border); border-radius: 12px; }
.sh-bagt svg { grid-area: ic; }
.sh-bagt__n { grid-area: n; font-weight: 700; color: #D7262E; }
.sh-bagt__what { grid-area: what; font-size: var(--step--1); }
.sh-bagt__code { grid-area: code; font-weight: 700; }
.sh-bagt .btn { grid-area: btn; justify-self: start; }
.sh-radio-wrap { background: #1B1A2E; color: #E8E4FF; border-radius: 16px; border: 3px solid #1B1A2E; box-shadow: 6px 6px 0 #D7262E; padding: 14px; }
.sh-radio__t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 0.85rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: #5CF2FF; }
.sh-radio__dot { width: 10px; height: 10px; border-radius: 50%; background: #FF4F8B; box-shadow: 0 0 8px #FF4F8B; animation: sa-chase 1.2s steps(1) infinite; }
.sh-radio { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; font: 0.8rem/1.45 var(--font-mono); }
.sh-radio li { padding: 5px 0; border-bottom: 1px dashed rgba(232, 228, 255, 0.15); }
.sh-radio time { color: #8C86B0; margin-right: 4px; }
.sh-radio__empty { color: #A9A5C2; font-style: italic; }
.sh-radio__i.is-ask { color: #FFD23F; }
.sh-radio__i.is-good { color: #3DDC97; }
.sh-radio__i.is-bad, .sh-radio__i.is-budget { color: #FF8FB0; }

.sh-ask { display: grid; gap: 8px; }
.sh-ask__patty svg { width: 64px; height: auto; color: var(--ink); }
.sa-mini { color: #1B1A2E; }
.sh-ask__q { margin: 0; font: 800 1.35rem/1.2 var(--font-display); }
.sh-ask__list { list-style: none; padding: 0; margin: 0; }
.sh-ask__list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--paper-dot); font-size: var(--step--1); }
.sh-ask__meta { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }

/* ---- what this would take for real: one plain strip ----------------------------------------------- */
.sh-real { margin-block: clamp(26px, 4vw, 44px); padding: 14px 18px; border: 2px dashed var(--line); border-radius: 12px; background: var(--surface); }
.sh-real__t { margin: 0 0 6px; font-size: var(--step-0, 1rem); }
.sh-real p { margin: 0; font-size: var(--step--1); }

/* ---- for agents ----------------------------------------------------------------------------------- */
.sh-agents { border: var(--border); border-radius: 14px; background: var(--surface); }
.sh-agents__sum { padding: 12px 16px; font-weight: 900; cursor: pointer; }
.sh-agents__body { padding: 0 16px 16px; }
.sh-snip { overflow-x: auto; padding: 12px; background: #1B1A2E; color: #E8E4FF; border-radius: 10px; font-size: 0.74rem; line-height: 1.5; white-space: pre; }

.sh-parody { margin-block: 10px 30px; text-align: center; font-weight: 700; font-size: var(--step--1); color: var(--ink-soft); }

/* the inspector prints this room's 200s on thermal paper too */
[data-room="shake"] .ix--ok .ix__detail pre { background: #FFFEF8; color: #26242F; }

/* ---- responsive ------------------------------------------------------------------------------------ */
@media (max-width: 980px) {
  .sh-hero__in, .sh-order, .sh-pay, .sh-night__in, .sh-agent { grid-template-columns: 1fr; }
  .sh-tray { position: static; }
  .sh-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-bubble::after { display: none; }
}
@media (max-width: 560px) {
  .sh-lessons { grid-template-columns: 1fr; }
  .sh-hero__art { grid-template-columns: 1fr 1fr; }
  .sh-pay__fields, .sh-agent__fields, .sh-window__row { grid-template-columns: 1fr; }
  .sh-invoice, .sh-conf__code { grid-template-columns: 96px 1fr; }
  .sb-row { grid-template-columns: 56px 1fr auto; }
  .sb-tag { grid-column: 2; grid-row: 2; justify-self: start; }
  .sb-row .sb-lamps, .sb-row:not(.is-mine):not(.is-agent) .sb-lamps { grid-column: 2; grid-row: 1; }
  .sb-status { grid-column: 3; }
  .sb-num { font-size: 1.2rem; }
  .sa-lamp { width: 20px; height: 20px; }
  .sh-bagt { grid-template-columns: auto 1fr; grid-template-areas: "ic n" "what what" "code code" "btn btn"; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-ride, .sa-bulbs circle, .sa-neon, .sh-radio__dot { animation: none; }
  .sh-tk, .sh-receipt, .sh-lessons li, .sh-board-mini { transform: none; }
}

/* ---- the online-ordering steps: location, order type, time, categories, tender, tracker -------- */
.sh-steps ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0; margin: 0 0 clamp(18px, 3vw, 30px); }
.sh-steps a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border: var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font: 700 var(--step--1)/1 var(--font-body); box-shadow: 2px 2px 0 var(--shadow-color); }
.sh-steps b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #D7262E; color: #FFF3DC; font: 800 0.75rem/1 var(--font-mono); }
.sh-steps a:hover { background: #FFF3DC; }

.sh-start { margin-bottom: clamp(26px, 4vw, 44px); scroll-margin-top: 90px; }
.sh-start h2 { margin: 0 0 var(--space-3); }
.sh-locs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sh-loc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: var(--border); border-radius: 14px; box-shadow: 4px 4px 0 var(--shadow-color);
  font: inherit; transition: transform 0.15s ease;
}
.sh-loc:hover:not(:disabled) { transform: translate(-1px, -1px) rotate(-0.4deg); }
.sh-loc.is-on { background: #1B1A2E; color: #FFF3DC; box-shadow: 0 0 0 3px #D7262E, 5px 5px 0 3px #1B1A2E; }
.sh-loc.is-on .sh-loc__name { color: #FF4F8B; text-shadow: 0 0 8px #FF4F8B; }
.sh-loc:disabled { cursor: default; opacity: 0.75; }
.sh-loc__name { font: 800 1.2rem/1.1 var(--font-display); }
.sh-loc__where { font-size: var(--step--1); }
.sh-loc__hours { font: 700 0.78rem/1.3 var(--font-mono); }
.sh-loc__open { padding: 1px 6px; border-radius: 6px; background: #A9A5C2; color: #1B1A2E; }
.sh-loc__open.is-open { background: #5CF2FF; }
.sh-loc__types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sh-loc__types span { padding: 1px 7px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 0.72rem; }
.sh-loc__note { font: 700 1.05rem/1.1 'Caveat', var(--font-body), cursive; color: #D7262E; }
.sh-loc.is-on .sh-loc__note { color: #FFD23F; }

.sh-start__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 34px); margin-top: var(--space-4); }
.sh-start__h { margin: 0 0 8px; font-size: var(--step-0, 1rem); }
.sh-start__how { margin: 8px 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.sh-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sh-type {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; cursor: pointer; font: 700 var(--step--1)/1.15 var(--font-body);
  background: var(--surface); color: var(--ink); border: var(--border); border-radius: 12px; box-shadow: 3px 3px 0 var(--shadow-color); text-align: center;
}
.sh-type.is-on { background: #D7262E; color: #FFF3DC; }
.sh-type.is-off { background: repeating-linear-gradient(-45deg, var(--surface) 0 8px, rgba(27, 26, 46, 0.06) 8px 16px); color: var(--ink-soft); box-shadow: none; }
.sh-type small { font: 700 0.95rem/1 'Caveat', var(--font-body), cursive; color: #D7262E; }
.sh-ico { width: 28px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sh-when { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.sh-when__opt { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; cursor: pointer; }
.sh-when__slot { max-width: 260px; }
.sh-start__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: var(--space-4) 0 0; padding: 10px 14px; border: 2px dashed var(--line); border-radius: 12px; font: 700 var(--step--1)/1.3 var(--font-mono); }

.sh-cats { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 3px solid #1B1A2E; }
.sh-cat { padding: 8px 16px; border: var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface); color: var(--ink); font: 800 var(--step--1)/1 var(--font-display); letter-spacing: 0.04em; cursor: pointer; margin-bottom: -3px; }
.sh-cat.is-on { background: #1B1A2E; color: #FFD23F; }
.sh-handoff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 10px; background: #FFF3DC; color: #1B1A2E; border-radius: 8px; font: 700 0.78rem/1.3 var(--font-mono); }
.sh-handoff a { color: #D7262E; }
.sh-handoff .sh-ico { width: 22px; height: 16px; }

.sh-pay__fine { margin: -4px 0 12px; font-size: var(--step--1); color: var(--ink-soft); }
.sh-tender { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 14px 14px; border: var(--border); border-radius: 14px; background: var(--surface); }
.sh-tender__t { padding: 0 6px; font: 800 var(--step--1)/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.sh-tender__btc { flex: 1 1 260px; }
.sh-tender__card { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.sh-tender__card .btn { opacity: 0.55; cursor: not-allowed; }
.sh-tender__card small { font: 700 1.05rem/1 'Caveat', var(--font-body), cursive; color: #D7262E; }

.sh-tracker { margin-bottom: clamp(18px, 3vw, 30px); padding: 16px 18px; background: #FFF3DC; color: #1B1A2E; border: 3px solid #1B1A2E; border-radius: 16px; box-shadow: 6px 6px 0 #FF4F8B; scroll-margin-top: 90px; }
.sh-tracker__t { margin: 0 0 6px; }
.sh-tracker__none { margin: 0; font: 700 1.25rem/1.25 'Caveat', var(--font-body), cursive; color: #D7262E; }
.sh-trk__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.sh-trk__n { margin: 0; font-size: 2rem; font-weight: 800; color: #D7262E; }
.sh-trk__status { margin: 0; font: 800 1.3rem/1 var(--font-display); }
.sh-trk__meta { margin: 0; flex-basis: 100%; font: 700 0.8rem/1.3 var(--font-mono); color: #5C4A3A; }
.sh-trk__lamps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 14px 0; }
.sh-trk__step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; background: #1B1A2E; color: #A9A5C2; font: 700 0.8rem/1.1 var(--font-body); text-align: center; }
.sh-trk__step .sa-lamp { width: 30px; height: 30px; }
.sh-trk__step.is-on { color: #FFF3DC; }
.sh-trk__step.is-now { box-shadow: 0 0 0 3px #FFD23F, 0 0 16px #FFD23F; }
.sh-trk__act { margin: 6px 0; }
.sh-trk__acks { margin: 8px 0 0; font: 700 0.78rem/1.4 var(--font-mono); color: #5C4A3A; }
.sh-here { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.sh-here__say { flex-basis: 100%; margin: 0; font: 700 1.3rem/1.2 'Caveat', var(--font-body), cursive; color: #D7262E; }
.sh-here .field { min-width: 140px; }
.sh-here__fine { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: #5C4A3A; }

.sh-real__list { margin: 6px 0 8px; padding-left: 1.2em; font-size: var(--step--1); display: grid; gap: 4px; }
.sh-real__open { margin: 0; font-size: var(--step--1); }

@media (max-width: 980px) {
  .sh-locs { grid-template-columns: 1fr; }
  .sh-start__row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sh-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-trk__lamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-cat { padding: 8px 10px; }
  .sh-tender__btc { flex-basis: 100%; }
}
.sh-agent__fields > :nth-child(4) { grid-column: span 2; }
@media (max-width: 560px) { .sh-agent__fields > :nth-child(4) { grid-column: auto; } }