/* teashop/MODULES.md "css/closeups-shop.css" */

.cu { position: relative; min-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px calc(var(--sar) + 12px) 12px 12px; font-size: var(--ts-font); color: var(--text); }
.cu h3 { margin: 0; font-size: 1em; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.cu p { margin: 0; }
.cu .muted { color: var(--muted); }
.cu .small { font-size: var(--ts-small); }
.cu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cu-head h2 { margin: 0; font: 400 var(--ts-big)/1.1 "Lilita One", var(--font); color: var(--text); }
.cu .btn.round.small { width: 44px; min-width: 44px; height: 44px; padding: 0; }
.btn.round.cu-close { flex: none; align-self: center; width: 44px; min-width: 44px; height: 44px; padding: 0; }
.btn.round.cu-close svg { width: 22px; height: 22px; }
.cu .btn .glyph, .scale .btn .glyph { width: 1.2em; height: 1.2em; }
.cu .btn.small, .scale .btn.small { font-size: var(--ts-font); white-space: normal; line-height: 1.1; text-align: center; padding-top: 4px; padding-bottom: 4px; }
.cu .btn[aria-disabled="true"], .scale .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }

/* ---------- cues: an icon and its word ---------- */
.cu .cue { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: var(--ts-small); line-height: 1.15; min-width: 0; }
.cu .cue-icon, .scale .cue-icon { width: 1.3em; height: 1.3em; flex: none; fill: currentColor; }
.cu .cue-icon.wide { width: 1.5em; }
.cu .cue-icon.stars { width: auto; height: 1em; }
.cu .cue.face[data-face="happy"] { color: var(--accent-text); }
.cu .cue.face[data-face="unsure"] { color: var(--warn); }
.cu .cue.level { flex-wrap: wrap; }
.cu .cue.level .meter { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cu .cue.level .meter i { display: block; height: 100%; background: var(--turquoise); }
.cu .cue.level[data-level="low"] .meter i { background: var(--sunset); }
.cu .flag { display: inline-block; padding: 1px 6px; border-radius: 999px; background: var(--warn); color: var(--warn-ink); font-size: max(11px, 0.72em); font-weight: 900; }
.cu .mark { display: inline-flex; align-items: center; gap: 3px; font-size: max(11px, 0.75em); font-weight: 900; color: var(--accent-text); }
.cu .flavors { font-size: var(--ts-small); font-weight: 700; }
.cu .flavors.hidden { color: var(--muted); font-style: italic; }
.cu .prices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--ts-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.cu .prices li { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 6px; }
.cu .prices b { font-weight: 900; }
.cu .jar-pic { width: 36px; height: 48px; flex: none; }
/* a family's brewing line: the water, the minutes, and iced or hot */
.cu .cue.brew { flex-wrap: wrap; column-gap: 12px; row-gap: 2px; }
.cu .brew-part { display: inline-flex; align-items: center; gap: 4px; }
.cu .cue.brew:not([data-cold="hot"]) .cold { color: var(--accent-text); }

/* ---------- a tea's card, in a sheet over the close-up ---------- */
.cu-serve .cu-card { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 78%; overflow-y: auto; }
.cu-shelf .cu-card { position: sticky; bottom: 0; z-index: 3; margin: 0 -8px -12px; max-height: 70vh; overflow-y: auto; }
.cu-card-in { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px calc(var(--sab) + 14px); background: var(--surface); border-top: 2px solid var(--line); box-shadow: 0 -6px 18px rgba(46, 42, 38, 0.18); border-radius: 18px 18px 0 0; }
.cu .tea-card { display: flex; flex-direction: column; gap: 6px; }
.cu .tea-card-head { display: flex; align-items: center; gap: 10px; }
.cu .tea-card-head h3 { font-size: 1.1em; }
.cu .tea-card .row { display: flex; align-items: flex-start; gap: 10px; }
.cu .tea-card .row > .lbl { flex: 0 0 6.2em; font-size: var(--ts-small); font-weight: 800; color: var(--muted); padding-top: 2px; }
.cu .tea-card .row .prices { flex: 0 1 12em; }
.cu .tea-card .row > .cue.level { flex: 1 1 auto; }
/* how they took a sniff: the coach's ring stands 6 points off it with a
   3-point edge, so the row keeps that much clear of the Price row above */
.cu .tea-card .row.sniffed { margin-top: 6px; align-items: center; }
.cu .tea-card .row.sniffed > .lbl { padding-top: 0; }

/* ---------- serving: the customer ---------- */
.cu-serve > .cu-head { position: absolute; top: 8px; right: calc(var(--sar) + 10px); z-index: 2; }
.cu-serve .cu-customer { padding-right: 52px; grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "face who" "face said" "sense sense"; }
.cu-customer { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "face who" "face said"; column-gap: 10px; row-gap: 6px; align-items: start; border-radius: 16px; padding: 4px; transition: box-shadow 0.15s; }
.cu-face { grid-area: face; width: 76px; height: 80px; border-radius: 16px; background: var(--accent-soft); overflow: hidden; }
.cu-face .portrait { width: 100%; height: 100%; display: block; }
/* their face in the ring of their patience, the room's own (room.css): the
   ring drawn at 16 of its 40 with a 3-wide stroke, its outer edge on the
   box's and the face filling inside it, the part used up a faint track */
.cu-serve .cu-face { width: 80px; height: 80px; border-radius: 50%; background: none; overflow: visible; }
.cu-face .ro-ringbox { width: 100%; height: 100%; }
.cu-face .ro-ring { inset: auto; left: -7.15%; top: -7.15%; width: 114.3%; height: 114.3%; }
.cu-face .ro-track { fill: var(--accent-soft); stroke: var(--line); stroke-width: 3; }
.cu-face .ro-arc { stroke-width: 3; }
.cu-face .ro-ringbox .portrait { position: relative; width: 82.8%; height: 82.8%; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
:root.ts-still .cu-face .ro-ringbox { animation: none; }
@media (prefers-reduced-motion: reduce) { .cu-face .ro-ringbox { animation: none; } }
/* a Perfect match: the ring pops and glows once */
.cu-face.pop .ro-ring { animation: ts-ring-pop 0.5s ease-out; }
@keyframes ts-ring-pop { 40% { transform: scale(1.14); filter: drop-shadow(0 0 6px var(--accent)); } 100% { transform: none; filter: none; } }
:root.ts-still .cu-face.pop .ro-ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .cu-face.pop .ro-ring { animation: none; } }
/* Sense what they'd like, with the intuition held on it; then what it sensed */
.cu-sense { grid-area: sense; display: flex; align-items: center; gap: 6px; min-width: 0; }
/* (across the whole card, under the close button's corner too, which it is
   clear of: one line on a 375-point phone) */
.cu-serve .cu-sense { margin-right: -46px; }
.cu-sense .count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.35em; border-radius: 999px; background: #FFFFFF; color: var(--ts-ink); font-size: 0.85em; text-shadow: none; }
.cu .cu-sense.sensed { font-weight: 800; font-size: var(--ts-small); line-height: 1.2; }
.cu-sense.sensed .cue-icon { color: var(--accent); }
.cu-who { grid-area: who; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cu-name { font-size: 1.05em; font-weight: 900; }
.cu .badges { display: flex; flex-wrap: wrap; gap: 4px; }
.cu .badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: max(11px, 0.75em); font-weight: 800; }
.cu .badge.special { background: var(--ts-badge); color: #fff; }
.cu-want { display: flex; align-items: center; gap: 6px; }
.cu-want .lbl { font-size: max(11px, 0.75em); font-weight: 800; color: var(--muted); }
.cu .bubble { grid-area: said; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); font-weight: 800; line-height: 1.3; min-height: 2.2em; }
.cu .bubble::before { content: ""; position: absolute; left: -9px; top: 12px; border: 8px solid transparent; border-right-color: var(--line); border-left: 0; }
.cu .bubble .sniffing { display: inline-flex; align-items: center; gap: 4px; font-size: var(--ts-small); color: var(--muted); }

/* ---------- serving: a question the customer asks, and its answers ---------- */
/* The question is what their bubble says, which takes the width under the
   close button too; its answers share one row under them, each wrapping its
   words, so a hard question's two teas read whole on a 375-point phone and
   Pour stays in sight. */
.cu .bubble.asking { border-color: var(--accent); }
.cu .bubble.asking::before { border-right-color: var(--accent); }
.cu-serve .cu-customer.asking .bubble { margin-right: -46px; }
.cu-ask-slot[hidden] { display: none; }
.cu .ask-chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
/* (a rounded box rather than a pill, without the pill's sheen, so an answer
   on several lines reads whole) */
.cu .ask-chips .btn.ask-chip { min-width: 0; min-height: 44px; padding: 4px 8px; border-radius: 14px; white-space: normal; line-height: 1.15; }
.cu .ask-chips .btn.ask-chip::before { display: none; }
/* (a 667-point phone keeps Pour in sight while a question waits, the
   scale's status line giving up its room while it has nothing to say) */
@media (max-height: 700px) {
  .cu-serve:has(> .cu-ask-slot:not([hidden])) { gap: 6px; }
  .cu-serve:has(> .cu-ask-slot:not([hidden])) .scale-status:has(> .scale-said:empty):has(> .scale-streak:empty) { display: none; }
  .cu-serve .cu-customer.asking .bubble { padding-top: 5px; padding-bottom: 5px; }
  .cu .ask-chips .btn.ask-chip { font-size: var(--ts-small); padding-top: 2px; padding-bottom: 2px; }
}
/* how they took the answer: a heart that beats once, or a quiet line and
   the right answer */
.cu .bubble .said-answer { display: flex; align-items: center; gap: 6px; }
.cu .bubble .ask-mark { flex: none; width: 1.3em; height: 1.3em; }
.cu .bubble.right { border-color: var(--accent); background: var(--accent-soft); }
.cu .bubble.right::before { border-right-color: var(--accent); }
.cu .bubble.right .ask-mark { color: var(--chile); animation: ts-ask-beat 0.45s ease-out; }
.cu .bubble.wrong .ask-mark { color: var(--muted); }
.cu .bubble .ask-was { font-size: var(--ts-small); font-weight: 800; color: var(--muted); }
@keyframes ts-ask-beat { 0% { transform: scale(0.6); } 55% { transform: scale(1.25); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cu .bubble.right .ask-mark { animation: none; } }

/* ---------- serving: the scale and what is beside it ---------- */
.cu-middle { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
/* (the tray and the register have the middle to themselves) */
.cu-middle.one { grid-template-columns: minmax(0, 1fr); }
.cu-scale { min-width: 0; }
.scale { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.scale .scale-dial { position: relative; border-radius: 18px; padding: 2px; transition: box-shadow 0.15s; }
.scale .dial { display: block; width: 100%; max-width: 190px; margin: 0 auto; }
@media (max-height: 760px) { .scale .dial { max-width: 150px; } }
.scale .dial-rim { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.scale .dial-face { fill: var(--surface); }
.scale .dial-arc { fill: none; stroke: var(--line); stroke-width: 2; }
.scale .dial-ticks line { stroke: var(--text); stroke-linecap: round; }
.scale .dial-ticks line.minor { stroke-width: 1; opacity: 0.45; }
.scale .dial-ticks line.major { stroke-width: 2.2; }
/* (in the dial's own units: 15 of 200 stays over 11 points at the 150-point
   dial a short phone gets) */
.scale .dial-ticks text { font: 800 15px var(--font); fill: var(--muted); text-anchor: middle; }
/* the band a pour lands in: a wide pale arc between its two marks, the
   Perfect window darker inside it, under the line */
.scale .dial-band { fill: none; stroke: var(--sage); stroke-width: 15; stroke-opacity: 0.6; }
.scale .dial-perfect { fill: none; stroke: var(--accent); stroke-width: 15; stroke-opacity: 0.55; }
.scale .dial-mark { stroke: var(--ts-ink); stroke-width: 3.5; stroke-linecap: round; }
:root[data-theme="dark"] .scale .dial-mark { stroke: var(--text); }
.scale .dial-target line { stroke: var(--turquoise); stroke-width: 4; stroke-linecap: round; }
.scale .dial-target path { fill: var(--turquoise); }
.scale .dial.glow .dial-target line { stroke-width: 6; filter: drop-shadow(0 0 4px var(--turquoise)); }
.scale .dial-needle { transform-origin: 100px 100px; transform-box: view-box; transition: transform 0.1s linear; }
.scale .dial-needle line { stroke: var(--chile); stroke-width: 3.2; stroke-linecap: round; }
.scale .dial-needle circle { fill: var(--ts-ink); }
.scale .dial-bag path { fill: var(--adobe); stroke: var(--ts-ink); stroke-opacity: 0.4; stroke-width: 1.5; }
.scale .dial-bag .bag-tea { fill: var(--brown); opacity: 0.75; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 0.1s linear; }
/* a pour let go outside the marks: the needle and the bag drain back */
.scale.again .dial-needle, .scale.again .bag-tea { transition: transform 0.6s ease-in; }
.scale.empty .dial-bag, .scale.empty .dial-target, .scale.empty .dial-band, .scale.empty .dial-perfect, .scale.empty .dial-mark, .scale.empty .dial-needle { opacity: 0.25; }
.scale .scale-read { display: flex; align-items: center; justify-content: center; gap: 4px; line-height: 1.1; }
.scale .scale-readout { font-size: calc(var(--ts-big) * 1.15); font-weight: 900; font-variant-numeric: tabular-nums; }
.scale .scale-where:empty { display: none; }
.scale .scale-where .cue-icon { width: 1.4em; height: 1.4em; }
/* between the marks, and past them: the readout says so with its icon */
.scale .scale-read { border-radius: 999px; padding: 1px 12px; margin: 0 auto; transition: background 0.1s; }
.scale[data-band="in"] .scale-read { background: var(--accent-soft); color: var(--accent-text); }
.scale[data-band="over"] .scale-read { color: var(--warn); }
.scale .scale-status { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 1.4em; }
.cu .weigh-word, .scale .weigh-word { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: var(--ts-small); }
.cu .weigh-word[data-weigh="perfect"], .scale .weigh-word[data-weigh="perfect"] { color: var(--accent-text); }
.cu .weigh-word[data-weigh="under"], .scale .weigh-word[data-weigh="under"], .scale .weigh-word[data-weigh="again"] { color: var(--warn); }
.scale .scale-streak { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: var(--ts-small); color: var(--sunset-text); }
.scale .scale-streak .cue-icon { color: var(--sunset); }
/* a Perfect pour: its word pops as the bag seals, and the streak's star as
   it grows (at the counter the bag stays on the dial for the beat: pour.js) */
.scale .scale-said .weigh-word[data-weigh="perfect"], .scale .scale-streak.grew .cue-icon { animation: ts-ask-beat 0.45s ease-out; }
:root.ts-still .scale .scale-said .weigh-word, :root.ts-still .scale .scale-streak .cue-icon { animation: none; }
@media (prefers-reduced-motion: reduce) { .scale .scale-said .weigh-word, .scale .scale-streak .cue-icon { animation: none; } }
.scale .scale-buttons { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.scale.done .scale-buttons, .scale.empty .scale-buttons { display: none; }
.scale .pour-btn { min-height: 56px; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; font-size: var(--ts-big); }
.scale .pour-btn .glyph { width: 1.2em; height: 1.2em; }
.scale .pour-btn[aria-pressed="true"] { transform: translateY(calc(var(--lift) - 1px)) scale(0.97); box-shadow: 0 1px 0 var(--brown), inset 0 3px 8px rgba(0, 0, 0, 0.25); }

.cu-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cu .tray, .cu .bags, .cu .register, .cu .waiting { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--surface-2); border: 2px solid var(--line); transition: box-shadow 0.15s; }
.cu .tray-slot { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 52px; padding: 4px 6px; border-radius: 12px; border: 2px dashed var(--line); font-size: var(--ts-small); font-weight: 700; color: var(--muted); }
.cu .tray-slot.full { border-style: solid; background: var(--surface); color: var(--text); }
/* (the x sits on the slot's corner so the name has the slot's whole width:
   the tray is about 150 points wide on a phone and in the side column) */
.cu button.tray-slot { position: relative; justify-content: flex-start; width: 100%; font: inherit; font-size: var(--ts-small); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cu button.tray-slot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cu .tray-x { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--brown); }
.cu .tray-x .glyph { width: 12px; height: 12px; }
.cu .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cu .mini { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cu .mini .jar-pic { width: 27px; height: 36px; }
.cu .mini b { min-width: 0; line-height: 1.1; font-size: var(--ts-small); }
.cu .lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: var(--ts-small); }
.cu .lines li { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 8px; row-gap: 2px; padding: 4px 6px; border-radius: 10px; }
.cu .lines li.current { background: var(--accent-soft); }
.cu .lines .tick { color: var(--accent-text); }
.cu .lines .price { font-variant-numeric: tabular-nums; font-weight: 900; }
.cu .lines li > span:first-child { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* (a bag's line while pouring: its tick beside its words, which fit or wrap: serve.js tighten) */
.cu .bags .lines li > span:first-child { flex-wrap: nowrap; min-width: 0; }
.cu .bags .bag-tea { min-width: 0; }
.cu .total { font-weight: 900; font-variant-numeric: tabular-nums; }
/* Ring up sale with the total on it */
.cu .btn.take { gap: 0.6em; }
.cu .btn.take .price { padding-left: 0.6em; border-left: 2px solid rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
/* a card's sniffs left, over its buttons and clear of a ring round them */
.cu-card-in .sniffs-left { margin-bottom: 4px; }

/* ---------- serving: the jar strip ---------- */
.cu-strip { margin: auto -12px 0; padding: 4px 12px 2px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; overscroll-behavior-x: contain; }
.cu .strip-row { display: flex; gap: 8px; width: max-content; padding-bottom: 4px; }
.cu .jar-tile {
  position: relative; flex: 0 0 auto; width: 88px; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px;
  border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: grab; touch-action: pan-x;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* (a name wraps between its words rather than being cut: Darjeeling First
   Flush and Second Flush must not both read as Darjeel...; and a word is never
   split: one too wide for its tile steps down a size, serve.js) */
.cu .jar-tile .jar-name { font-size: max(11px, min(var(--ts-small), 12.5px)); letter-spacing: -0.02em; font-weight: 900; line-height: 1.15; max-width: 100%; text-align: center; overflow-wrap: normal; }
.cu .jar-tile .jar-name.tight { font-size: 11px; letter-spacing: -0.04em; }
.cu .jar-tile .cue { font-size: max(11px, min(0.72em, 12.5px)); max-width: 100%; text-align: center; }
.cu .jar-tile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cu .jar-tile[data-tray="on"] { border-style: dashed; border-color: var(--accent); }
.cu .jar-tile[data-pour="from"] { border-color: var(--turquoise); box-shadow: 0 0 0 3px var(--accent-soft); }
.cu .jar-tile[data-state="empty"] { opacity: 0.6; }
.cu .jar-tile.dragging { opacity: 0.4; }
.cu .jar-tile:focus-visible, .cu .pick-row:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* a jar under the finger (on the page, over everything), and where it may go */
.jar-ghost { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 14px; background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 8px 20px rgba(46, 42, 38, 0.3); font-size: var(--ts-small); color: var(--text); }
.jar-ghost .jar-pic { width: 36px; height: 48px; }
.cu-customer.drop-over, .cu .tray.drop-over, .scale .scale-dial.drop-over { box-shadow: 0 0 0 3px var(--accent); }

/* ---------- serving on a phone: the bottom half of the screen ---------- */
/* (teashop.css .closeup-half) The sheet holds every step whole at the
   phone's text size, for the longest request and answer the grammar makes:
   their name and badges beside a smaller face, and what they say across the
   whole sheet under it; the tray's places and Offer in one row under no
   heading (its spare place says what it is for); a jar tile's On the tray by
   its icon in its corner, and while they choose no family line (the jar's
   picture shows it, and its card names it); while pouring, the jar poured
   from beside the dial, and their order with Pour under it on the right
   (while a question waits, every jar in a row below, names only). */
@media (max-width: 599.98px) {
  .closeup-half .cu-serve { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .closeup-half .cu-serve .cu-customer { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "face who" "said said" "sense sense"; column-gap: 8px; row-gap: 4px; padding: 2px; }
  .closeup-half .cu-serve .cu-face { width: 48px; height: 48px; }
  .closeup-half .cu-serve .cu-who { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 4px; row-gap: 3px; align-self: center; margin-right: 50px; }
  .closeup-half .cu-serve .cu-name { flex-basis: 100%; }
  .closeup-half .cu-serve .cu-sense, .closeup-half .cu-serve .cu-customer.asking .bubble { margin-right: 0; }
  .closeup-half .cu-serve .bubble { padding: 5px 10px; min-height: 0; font-size: max(14px, calc(var(--ts-font) * 0.94)); line-height: 1.2; }
  /* (the bubble's tail points up at their face) */
  .closeup-half .cu-serve .bubble::before { left: 16px; top: -9px; border-width: 0 8px 8px; border-color: transparent transparent var(--line); }
  .closeup-half .cu-serve .bubble.asking::before, .closeup-half .cu-serve .bubble.right::before { border-color: transparent transparent var(--accent); }
  .closeup-half .cu-serve .tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; }
  .closeup-half .cu-serve .tray:has(> #offerBtn) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.95fr); }
  .closeup-half .cu-serve .tray > h3 { display: none; }
  /* (Offer beside the places, a rounded box rather than a pill so its words
     read whole on three lines) */
  .closeup-half .cu-serve .tray > #offerBtn { grid-column: 4; grid-row: 1; min-width: 0; min-height: 48px; padding: 4px 6px; border-radius: 14px; font-size: max(13.5px, var(--ts-small)); }
  .closeup-half .cu-serve .tray > #offerBtn::before { display: none; }
  .closeup-half .cu-serve .jar-tile .mark.on-tray { position: absolute; top: 4px; right: 4px; }
  .closeup-half .cu-serve .jar-tile .mark.on-tray > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .closeup-half .cu-serve[data-step="sample"] .tray, .closeup-half .cu-serve[data-step="sample"] .tray:has(> #offerBtn) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closeup-half .cu-serve[data-step="sample"] .tray > #offerBtn { grid-column: 2; }
  .closeup-half .cu-serve .tray[data-count="0"] .spare { grid-column: 1 / -1; }
  .closeup-half .cu-serve .tray[data-count="1"] .spare { grid-column: span 2; }
  .closeup-half .cu-serve[data-step="sample"] .tray[data-count="0"] .spare { grid-column: 1 / -1; }
  .closeup-half .cu-serve .tray-slot { min-height: 48px; line-height: 1.15; }
  .closeup-half .cu-serve .tray-slot:not(.full) { justify-content: center; text-align: center; font-size: max(11px, 0.75em); }
  .closeup-half .cu-serve .mini { flex-direction: column; gap: 2px; width: 100%; }
  .closeup-half .cu-serve .mini b { max-width: 100%; text-align: center; font-size: max(11px, min(var(--ts-small), 12.5px)); letter-spacing: -0.02em; }
  .closeup-half .cu-serve .mini b.tight { font-size: 11px; letter-spacing: -0.04em; }
  /* (a name keeps to one line where a size smaller lets it, else it wraps
     between its words: serve.js tighten) */
  .closeup-half .cu-serve .mini b, .closeup-half .cu-serve .jar-tile .jar-name, .closeup-half .cu-serve .bags .bag-tea { white-space: nowrap; }
  .closeup-half .cu-serve .mini b.wrap, .closeup-half .cu-serve .jar-tile .jar-name.wrap, .closeup-half .cu-serve .bags .bag-tea.wrap { white-space: normal; }
  .closeup-half .cu-serve .bags .bag-tea.tight { font-size: 11px; letter-spacing: -0.04em; }
  .closeup-half .cu-serve .tray-slot.full { padding: 4px 3px; }
  .closeup-half .cu-serve .mini .jar-pic { width: 21px; height: 28px; }
  .closeup-half .cu-serve .jar-tile { width: 80px; padding: 3px 2px; gap: 2px; }
  .closeup-half .cu-serve .jar-tile .jar-pic { width: 21px; height: 28px; }
  .closeup-half .cu-serve[data-step="request"] .jar-tile { width: 88px; }
  .closeup-half .cu-serve[data-step="request"] .jar-tile .cue.fam { display: none; }
  /* while pouring: the jar poured from, the dial, and their order and Pour */
  .closeup-half .cu-serve[data-step="pour"] { display: grid; grid-template-columns: 46px minmax(0, 136px) minmax(0, 1fr); column-gap: 8px; row-gap: 6px; align-content: start; }
  .closeup-half .cu-serve[data-step="pour"] > .cu-customer, .closeup-half .cu-serve[data-step="pour"] > .cu-ask-slot { grid-column: 1 / -1; }
  .closeup-half .cu-serve[data-step="pour"] > .cu-middle, .closeup-half .cu-serve[data-step="pour"] .cu-scale, .closeup-half .cu-serve[data-step="pour"] .scale { display: contents; }
  .closeup-half .cu-serve[data-step="pour"] .scale-dial { grid-column: 2; grid-row: 3 / span 3; align-self: start; }
  .closeup-half .cu-serve[data-step="pour"] .cu-side { grid-column: 3; grid-row: 3; }
  .closeup-half .cu-serve[data-step="pour"] .scale-buttons { grid-column: 3; grid-row: 4; align-self: start; }
  .closeup-half .cu-serve[data-step="pour"] .scale-status { grid-column: 3; grid-row: 5; min-height: 0; }
  .closeup-half .cu-serve[data-step="pour"] > .cu-strip { grid-column: 1; grid-row: 3 / span 3; align-self: center; margin: 0; padding: 0; overflow: visible; }
  .closeup-half .cu-serve[data-step="pour"] > .cu-strip .strip-row { justify-content: center; width: auto; padding: 0; }
  .closeup-half .cu-serve[data-step="pour"] > .cu-strip .jar-tile { width: 46px; padding: 6px 1px; }
  .closeup-half .cu-serve[data-step="pour"] > .cu-strip .jar-tile .jar-name { display: none; }
  .closeup-half .cu-serve[data-step="pour"] .jar-tile .mark.pour > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .closeup-half .cu-serve[data-step="pour"]:has(> .cu-ask-slot:not([hidden])) > .cu-strip { grid-column: 1 / -1; grid-row: 6; align-self: start; margin: 0 -12px; padding: 4px 12px 2px; overflow-x: auto; }
  .closeup-half .cu-serve[data-step="pour"]:has(> .cu-ask-slot:not([hidden])) > .cu-strip .strip-row { justify-content: flex-start; width: max-content; padding-bottom: 4px; }
  .closeup-half .cu-serve[data-step="pour"]:has(> .cu-ask-slot:not([hidden])) > .cu-strip .jar-tile { width: 80px; padding: 4px 2px; }
  .closeup-half .cu-serve[data-step="pour"]:has(> .cu-ask-slot:not([hidden])) > .cu-strip .jar-tile .jar-name { display: block; }
  .closeup-half .cu-serve[data-step="pour"]:has(> .cu-ask-slot:not([hidden])) .jar-tile .mark.pour > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .closeup-half .cu-serve[data-step="pour"] .bags { padding: 6px; gap: 4px; }
  .closeup-half .cu-serve[data-step="pour"] .bags .lines li { padding: 3px 4px; }
  .closeup-half .cu-serve[data-step="pour"] .bags > h3 { display: none; }
  /* (room above Suggest Bigger for the coach's ring round it, clear of the order) */
  .closeup-half .cu-serve[data-step="pour"] .bags > #biggerBtn { margin-top: 12px; }
  .closeup-half .cu-serve[data-step="pour"] .jar-tile .cue { display: none; }
  /* (the dial's numbers drawn 17 of its 200 units, so 11 points at 132) */
  .closeup-half .cu-serve .scale .dial { max-width: 132px; }
  .closeup-half .cu-serve .scale .dial-ticks text { font-size: 17px; }
  .closeup-half .cu-serve .scale .scale-readout { font-size: var(--ts-big); }
  .closeup-half .cu-serve .scale .pour-btn { min-height: 52px; }
}
/* (a short phone's sheet is 400 points: their words a size smaller, and the
   gaps, the face and the tray's row a little tighter) */
@media (max-width: 599.98px) and (max-height: 700px) {
  .closeup-half .cu-serve { gap: 4px; }
  .closeup-half .cu-serve .cu-customer { grid-template-columns: 44px minmax(0, 1fr); row-gap: 3px; }
  .closeup-half .cu-serve .cu-face { width: 44px; height: 44px; }
  .closeup-half .cu-serve .bubble { font-size: max(13.5px, calc(var(--ts-font) * 0.875)); line-height: 1.15; }
  .closeup-half .cu-serve .tray-slot, .closeup-half .cu-serve .tray > #offerBtn { min-height: 44px; }
  .closeup-half .cu-serve .jar-tile { padding: 2px; gap: 1px; }
}

/* ---------- the talk card: small, over the room on a phone ---------- */
.cu-talk { min-height: 0; padding-right: calc(var(--sar) + 64px); }
.cu-talk .cu-close { position: absolute; top: 10px; right: calc(var(--sar) + 12px); }
@media (max-width: 599.98px) {
  .closeup-open .side:has(#closeup[data-closeup="talk"]) { top: auto; max-height: 50%; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(46, 42, 38, 0.2); }
}

/* ---------- the Shelf: one row per jar, the title pinned ---------- */
.cu-shelf .cu-head, .cu-display .cu-head { position: sticky; top: 0; z-index: 4; margin: -10px -8px 0; padding: 10px 8px 6px; background: var(--surface); }
.cu .shelf { container-type: inline-size; }
.cu-shelf { padding-left: 8px; padding-right: calc(var(--sar) + 8px); }
.cu .shelf-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@container (min-width: 560px) { .cu .shelf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cu .shelf-row {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 4px 10px 4px 6px; text-align: left;
  border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.cu .shelf-row .jar-pic { width: 34px; height: 45px; }
.cu .shelf-row .row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cu .shelf-row .row-name { max-width: 100%; font-weight: 900; line-height: 1.15; }
.cu .shelf-row .row-main.muted { font-weight: 800; font-size: var(--ts-small); }
.cu .shelf-row .cue.level { width: 100%; }
.cu .shelf-row > .flag, .cu .shelf-row > .mark { flex: none; }
.cu .shelf-row[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cu .shelf-row[data-state="empty"] { border-color: var(--warn); }
.cu .shelf-row.none { border-style: dashed; }
.cu .shelf-row:focus-visible, .cu .spot:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
/* Tea for orders: the bin's row, and what it keeps beside it */
.cu .shelf-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cu .shelf-line .shelf-row { flex: 1 1 auto; }
.cu .shelf-line .shelf-par { flex: none; gap: 4px; margin: 0; font-size: var(--ts-small); }
.cu .shelf-line .shelf-par-n { width: 4.2em; line-height: 1.15; }

/* ---------- a display's spots: a small card over the room ---------- */
.cu-display { min-height: 0; }
.cu .spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.cu .spot { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 4px 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font: 800 var(--ts-small)/1.15 var(--font); text-align: left; cursor: pointer; touch-action: manipulation; }
.cu .spot.none { border-style: dashed; color: var(--muted); }
.cu .spot[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.cu-display .cu-card { position: sticky; bottom: 0; z-index: 3; margin: 0 -12px -12px; }
@media (max-width: 599.98px) {
  .closeup-open .side:has(#closeup[data-closeup="display"]) { top: auto; max-height: 72%; border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(46, 42, 38, 0.2); }
}

.cu .picker .pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
.cu .pick-row { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main side" "cues side"; gap: 4px 10px; align-items: center; min-height: 52px; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.cu .pick-main { grid-area: main; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cu .pick-cues { grid-area: cues; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.cu .pick-side { grid-area: side; display: flex; flex-direction: column; gap: 2px; font-weight: 800; font-size: var(--ts-small); }
.cu .pick-side .prices { min-width: 7.5em; }

/* reduced motion: the needle jumps rather than sweeps */
:root.ts-still .scale .dial-needle, :root.ts-still .scale .bag-tea { transition: none; }
@media (prefers-reduced-motion: reduce) { .scale .dial-needle, .scale .bag-tea { transition: none; } }

/* what a bin at Tea for orders keeps, filled to each morning */
.shelf-par { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 8px; font-weight: 800; }
.shelf-par-n { min-width: 0; text-align: center; }