/* Tea Shop's page, after the menus' own styles (../game-menus.css): the room,
   its doors' pinned signs and the side column in the three layouts PLAN
   "Phones, tablets and computers" sets by width (a phone under 600, a tablet
   from 600, a computer from 840), and Tea Shop's own screens, light and dark,
   in the graybox palette with turquoise leading. The menus' cards and candy buttons keep
   their own look in both, as the joldi.in pages keep the logo's yellow. */
@font-face { font-family: "Lilita One"; src: url("../fonts/lilita-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* the graybox palette (BRIEF "Graybox art"), the same in both looks */
  --adobe: #D8B48A; --turquoise: #27A69A; --chile: #C4452F; --sunset: #E8893A; --sage: #9DB38A; --ts-ink: #2E2A26; --ts-cream: #F6EFE4;
  /* words that must read in sunlight, 4.5:1 or more: cream on the deeper
     turquoise of the doors' signs and pins (src/view/signs.js), and the money's
     word in coral on the menus' cream card, the same in both looks */
  --ts-sign: #17756C; --ts-cash: #B5482A;
  /* white on the deeper sunset of the count badges, 4.5:1 or more, the same
     in both looks */
  --ts-badge: #9C5118;
  /* the page, light */
  --bg: #F6EFE4; --surface: #FFFBF4; --surface-2: #EFE3D1; --text: #2E2A26; --muted: #6E6257;
  --line: rgba(46, 42, 38, 0.16); --accent: #1F9A8E; --accent-soft: #D3EFEB; --accent-ink: #FFFFFF; --warn: #B83A26;
  --shade: rgba(46, 42, 38, 0.35);
  /* words in the accent and the sunset, deeper, so they read at 4.5:1 on every
     surface, the soft accent among them */
  --accent-text: #146C63; --sunset-text: var(--ts-badge); --warn-ink: #FFFFFF;
  /* the clock pill and the pinned signs, in the shop's cream and wood */
  --ts-pill: #FFF8EC; --ts-tab: #F1E4CF; --ts-tab-ink: #7A5236; --ts-float: 0 6px 16px rgba(92, 52, 22, 0.24), 0 1px 3px rgba(92, 52, 22, 0.18);
  --ts-float-low: 0 2px 6px rgba(92, 52, 22, 0.24), 0 1px 2px rgba(92, 52, 22, 0.18);
  /* on the clock: its time while stopped, and Doors closed */
  --ts-still: #856C5E; --ts-pill-coral: var(--ts-cash);
  --ts-green: #6FA05A;
  /* Tea Shop's own text, scaled by the Text size setting */
  --ts-scale: 1;
  --ts-font: calc(16px * var(--ts-scale));
  --ts-small: calc(13.5px * var(--ts-scale));
  --ts-big: calc(20px * var(--ts-scale));
  /* where things sit: under the menus' top bar, and the side column */
  --below-hud: calc(var(--sat) + var(--gap) * 2 + var(--hud-h));
  --side-w: 0px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #1D1A17; --surface: #2A2622; --surface-2: #37312B; --text: #F6EFE4; --muted: #C9BCAB;
  --line: rgba(246, 239, 228, 0.16); --accent: #3CC0B2; --accent-soft: #1F3F3B; --accent-ink: #0E2724; --warn: #FF8F7A;
  --shade: rgba(0, 0, 0, 0.55);
  --accent-text: var(--accent); --sunset-text: var(--sunset); --warn-ink: var(--ts-ink);
  --ts-pill: #2E2924; --ts-tab: #3B342D; --ts-tab-ink: #E6D3BA; --ts-float: 0 6px 16px rgba(0, 0, 0, 0.45); --ts-float-low: 0 2px 6px rgba(0, 0, 0, 0.45);
  --ts-still: #A29482; --ts-pill-coral: var(--coral);
  color-scheme: dark;
}
:root[data-text-size="2"] { --ts-scale: 1.15; }
:root[data-text-size="3"] { --ts-scale: 1.3; }

html, body { background: var(--bg); }

/* ---------- the room ---------- */
#room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.room-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.room-overlay > * { pointer-events: auto; }

/* ---------- the top bar: the money in the score card's place (#hudScore),
   the clock in the middle (#hudMid) ---------- */
/* The money is the score (the owner's decision 14), so it looks as the score
   does in every game: its word in coral where Score would be, its sum at the
   score's size. The card gives way before the clock does, and a sum too long
   for it shrinks (hud.js sets --ts-fit) rather than being cut. Its word keeps
   Tea Shop's 11 pixels and the Text size, where the other games' Score is
   smaller. */
#scoreCard { flex: 0 1 auto; padding-left: clamp(8px, 2.4vmin, 18px); padding-right: clamp(8px, 2.4vmin, 18px); }
.ts-money-label { font-size: calc(11px * var(--ts-scale)); font-weight: 900; letter-spacing: 0.14em; margin-right: -0.14em; color: var(--ts-cash); text-transform: uppercase; white-space: nowrap; }
.ts-money { font-size: calc(min(clamp(20px, 6vmin, 34px), calc(var(--hud-h) * 0.37)) * var(--ts-fit, 1)); font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: center; }
/* Money coming in bumps the sum as a score does (hud.js), as the menus' bump
   does: a transform, so the width it is fitted to stays as it is, and only as
   far as its card has room for (hud.js sets --ts-bump). */
.ts-money.bump { animation: ts-bump 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ts-money.bump2 { animation: ts-bump2 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes ts-bump { 0% { transform: scale(1); } 40% { transform: scale(var(--ts-bump, 1)); } 100% { transform: scale(1); } }
@keyframes ts-bump2 { 0% { transform: scale(1); } 40% { transform: scale(var(--ts-bump, 1)); } 100% { transform: scale(1); } }
:root.ts-still .ts-money.bump, :root.ts-still .ts-money.bump2 { animation: none; }
@media (prefers-reduced-motion: reduce) { .ts-money.bump, .ts-money.bump2 { animation: none; } }
/* (hud.js measures it: under reduced motion's short transitions it would
   measure the size it is leaving) */
#tsMoney { transition: none !important; }
/* The clock never gives way (the middle is at least as wide as it), and is a
   step smaller than the money, which leaves the money more room on a phone. */
.hud-mid { flex: 1 0 auto; }
.ts-clock {
  height: var(--hud-h); flex: none; padding: 0 clamp(8px, 1.9vw, 16px) 0 clamp(4px, 1vw, 9px); gap: clamp(3px, 0.8vw, 8px);
  display: flex; align-items: center; justify-content: center; line-height: 1;
  border: 0; border-radius: 999px; background: var(--ts-pill); box-shadow: var(--ts-float);
}
.ts-sun { width: clamp(21px, 5.4vw, calc(var(--hud-h) * 0.5)); height: clamp(21px, 5.4vw, calc(var(--hud-h) * 0.5)); flex: none; fill: #FFE3A6; }
.ts-sun circle { fill: var(--sunset); }
.ts-time { font-size: min(clamp(14px, 3.7vw, 24px), calc(var(--hud-h) * 0.3)); letter-spacing: -0.02em; font-weight: 900; color: var(--ts-tab-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* (the three round buttons leave a small phone no room for the sun) */
@media (max-width: 385px) { .ts-sun { display: none; } .ts-clock { padding-left: 9px; } }
/* stopped, dimmed by colour: an opacity would take the time under 4.5:1 */
.ts-clock.stopped .ts-time { color: var(--ts-still); }
.ts-clock.stopped .ts-sun { fill: var(--ts-tab); }
.ts-clock.stopped .ts-sun circle { fill: var(--ts-still); }
/* Fast forward, on the clock: its mark beside the time while it can be used,
   and the clock turquoise while time runs fast */
.ts-ff { display: none; width: clamp(18px, 4.6vw, calc(var(--hud-h) * 0.42)); height: clamp(18px, 4.6vw, calc(var(--hud-h) * 0.42)); flex: none; fill: var(--turquoise); }
.ts-clock.can-fast { cursor: pointer; touch-action: manipulation; min-width: 44px; }
.ts-clock.can-fast .ts-ff { display: block; }
.ts-clock.can-fast .ts-sun { display: none; }
.ts-clock.fast { background: linear-gradient(180deg, #1B8278 0%, var(--ts-sign) 60%, #105A53 100%); }
.ts-clock.fast .ts-time, .ts-clock.fast .ts-ff { color: #FFFFFF; fill: #FFFFFF; }
.ts-clock:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* past closing, with people still inside: the time over "Doors closed" */
.ts-doors { display: none; }
.ts-clock.closing { flex-direction: column; gap: 1px; }
.ts-clock.closing .ts-sun { display: none; }
.ts-clock.closing .ts-time { font-size: min(clamp(13px, 3.4vw, 20px), calc(var(--hud-h) * 0.27)); }
.ts-clock.closing .ts-doors { display: block; font-size: calc(11px * var(--ts-scale)); font-weight: 900; letter-spacing: 0.04em; color: var(--ts-pill-coral); white-space: nowrap; }

/* ---------- a door's sign pinned to the room's edge (src/view/pins.js) ---------- */
.room-pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.room-pin {
  position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 4px 12px 4px 6px; border: 2px solid #3E2A1C; border-radius: 12px;
  background: var(--ts-sign); color: var(--ts-cream); box-shadow: var(--ts-float);
  font: 800 var(--ts-small)/1.1 var(--font); white-space: nowrap; cursor: pointer; touch-action: manipulation; will-change: translate;
}
.room-pin .pin-arrow { width: 18px; height: 18px; flex: none; }
.room-pin .pin-icon { width: 22px; height: 22px; flex: none; }
.room-pin .pin-text { display: flex; flex-direction: column; align-items: flex-start; }
.room-pin.glow { box-shadow: 0 0 0 3px #FFD27A, 0 0 16px 5px rgba(255, 196, 92, 0.85), var(--ts-float); }
.room-pin:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The menus' toasts over the room, clear of the side column, and every toast
   at the Text size (the menus' size times its scale). */
.in-day .toasts { left: 0; right: var(--side-w); padding: 0 12px; }
.in-day .toast { max-width: 100%; }
.toast { font-size: calc(clamp(14px, 3.8vmin, 17px) * var(--ts-scale)); }

/* ---------- the side column ---------- */
.side {
  position: absolute; z-index: 4; right: 0; top: var(--below-hud); bottom: 0; width: var(--side-w);
  display: flex; flex-direction: column; background: var(--surface); color: var(--text);
  border-left: 2px solid var(--line); padding-bottom: var(--sab); font-size: var(--ts-font);
}
.side-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; padding: 12px calc(var(--sar) + 12px) 12px 12px; }
.side-list h3 { margin: 10px 0 6px; font-size: var(--ts-small); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.side-list h3:first-child { margin-top: 0; }
.side-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px; margin: 0 0 6px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: 800 1em/1.2 var(--font);
  text-align: left; cursor: pointer; touch-action: manipulation;
}
.side-row small { display: block; font-weight: 700; font-size: 0.8em; color: var(--muted); }
.side-empty { margin: 0; color: var(--muted); font-weight: 700; }
.closeup { position: relative; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
.closeup-open .side-list { display: none; }

/* A phone: the room fills the screen; a close-up covers it below the top bar,
   or its bottom half, a sheet, for one that asks (serving), the room in sight
   above it. */
@media (max-width: 599.98px) {
  .side { display: none; }
  .closeup-open .side { display: flex; left: 0; width: auto; z-index: 6; border-left: 0; border-top: 2px solid var(--line); }
  .closeup-half .side { top: auto; height: min(var(--half-sheet), calc(100% - var(--below-hud))); border-radius: 20px 20px 0 0; box-shadow: 0 -8px 24px rgba(46, 42, 38, 0.22); }
}
:root { --half-sheet: max(50dvh, 400px); }
/* On a phone a close-up slides up over the room as it opens and down as it
   goes (closeups.js): hidden for the frame the room measures it in, where it
   will rest, then risen from below; going, it takes no tap. Still while motion
   is reduced, and on a phone playing from the list. */
.closeup-leaving .side { pointer-events: none; }
@media (max-width: 599.98px) and (prefers-reduced-motion: no-preference) {
  :root:not(.ts-still) body:not(.no-room).closeup-coming .side { visibility: hidden; }
  :root:not(.ts-still) body:not(.no-room).closeup-rising .side { animation: ts-sheet-up 0.26s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
  :root:not(.ts-still) body:not(.no-room).closeup-leaving .side { animation: ts-sheet-down 0.18s ease-in both; }
}
@keyframes ts-sheet-up { from { transform: translateY(100%); } }
@keyframes ts-sheet-down { to { transform: translateY(100%); } }
/* A phone that cannot draw the room plays from the side column's list. */
@media (max-width: 599.98px) {
  .no-room .side { display: flex; left: 0; width: auto; bottom: 0; border-left: 0; }
}
/* A tablet or small window: the room on the left three-fifths, the side
   column on the right. */
@media (min-width: 600px) {
  :root { --side-w: 40vw; }
}
/* A computer or large tablet: the room on the left and the side column on
   the right. */
@media (min-width: 840px), (min-width: 600px) and (max-height: 520px) {
  :root { --side-w: min(34vw, 440px); }
}
/* A phone turned sideways: close-ups in a right-hand panel (PLAN "Three
   layouts"). */
@media (min-width: 600px) and (max-height: 520px) {
  :root { --side-w: min(38vw, 340px); }
}

/* ---------- Tea Shop's screens ---------- */
.ts-screen { background: var(--bg); color: var(--text); align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; font-size: var(--ts-font); }
.ts-page { width: min(100%, 520px); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.ts-page.wide { width: min(100%, 1100px); }
.ts-head { margin: 4px 0 0; font: 400 clamp(28px, 8vmin, 40px)/1.05 "Lilita One", var(--font); color: var(--text); text-align: center; letter-spacing: 0.01em; }
.ts-sub { margin: -6px 0 0; text-align: center; font-weight: 800; color: var(--muted); }
.ts-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface); color: var(--text);
  border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 3px 0 var(--line);
}
.ts-card h2, .ts-card h3 { margin: 0; font-size: 1.1em; font-weight: 900; }
.ts-card p { margin: 0; line-height: 1.35; font-weight: 700; }
.ts-card .muted, .muted { color: var(--muted); }
.ts-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.ts-lines li { display: flex; justify-content: space-between; gap: 12px; }
.ts-lines li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-lines li.total { border-top: 2px solid var(--line); padding-top: 4px; font-weight: 900; }
.ts-lines li.bad b { color: var(--warn); }
/* the summary's reviews: stars over their words */
.ts-lines.ts-reviews li { flex-direction: column; gap: 2px; }
.ts-lines.ts-reviews p { margin: 0; font-weight: 600; }
/* (on the Customers or Orders card, under its counts) */
.ts-lines + .ts-lines.ts-reviews { padding-top: 8px; border-top: 2px solid var(--line); }
.ts-lines li.ts-stars-line { align-items: center; }
.ts-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ts-actions .btn { flex: 1 1 auto; }
.ts-actions.stack { flex-direction: column; align-items: stretch; }
.ts-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; text-align: left; cursor: pointer; touch-action: manipulation;
  background: var(--surface); color: var(--text); border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 3px 0 var(--line); font: inherit;
}
.ts-choice[aria-pressed="true"], .ts-choice[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ts-choice b { display: block; font-size: 1.08em; font-weight: 900; }
.ts-choice span { font-weight: 700; color: var(--muted); }
.ts-choice .ts-tag { background: var(--accent-soft); color: var(--text); }
.ts-choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ts-tag { display: inline-block; padding: 0.15em 0.6em; border-radius: 999px; background: var(--ts-sign); color: #fff; font-size: 0.78em; font-weight: 900; }
.btn.teal { background: linear-gradient(180deg, #8FE3DA 0%, var(--turquoise) 52%, #1B8278 100%); }
.btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
/* Text size reaches the buttons on Tea Shop's own screens, the coach's, the
   close-ups' and Re-center: the menus' sizes (../game-menus.css) times its
   scale, so at Normal they are the menus' own. The shared Paused and
   Settings keep theirs (BRIEF "The menus"). From Large up a button's words wrap
   rather than run off a phone. */
:where(.ts-screen, .ts-title-body, .ts-sheet, .side, .ts-coach) .btn { font-size: calc(clamp(15px, 4.2vmin, 22px) * var(--ts-scale)); }
:where(.ts-screen, .ts-title-body, .ts-sheet, .side, .ts-coach) .btn.small, .btn.room-recenter { font-size: calc(clamp(14px, 3.8vmin, 17px) * var(--ts-scale)); }
:where(.ts-screen, .ts-title-body, .ts-sheet, .side, .ts-coach) .btn.big { font-size: calc(clamp(21px, 6.2vmin, 32px) * var(--ts-scale)); }
:root:is([data-text-size="2"], [data-text-size="3"]) :where(.ts-screen, .ts-title-body, .ts-sheet, .side, .ts-coach) .btn { white-space: normal; line-height: 1.1; text-align: center; }
.ts-field { display: flex; flex-direction: column; gap: 6px; font-weight: 800; }
.ts-field input[type="text"] {
  min-height: 48px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--text);
  font: 800 max(16px, 1em) var(--font); -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.ts-field input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.ts-field small { color: var(--muted); font-weight: 700; text-align: right; }
.ts-swatch { display: inline-flex; gap: 3px; flex: none; }
.ts-swatch i { display: block; width: 14px; height: 30px; border-radius: 4px; border: 1px solid var(--line); }
/* the player head to shoes (start.js playerWhole); Pick your apron's cards
   two across, each that picture over the apron's name */
.ts-whole { display: block; width: 72px; height: 144px; flex: none; object-fit: contain; }
.ts-aprons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ts-choice.ts-apron { flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 0; padding: 10px 6px 12px; text-align: center; }
.ts-note { margin: 0; text-align: center; font-weight: 800; color: var(--warn); }

/* ---------- the look maker (src/ui/look-maker.js) ---------- */
/* On a phone the picture and the tabs stay in sight at the top of whatever
   scrolls (the new game's screen, a panel's body) while the rows scroll under
   them, and Done stays at the foot; from a computer the picture stands on the
   left and the tabs and rows on the right. The maker fills the height it is
   given, on the page and in a panel (which is the screen's full height while
   it holds the maker), so the picture, the tabs and Done stay where they are
   from tab to tab. Over the rows, the picture gives up what the tallest tab
   needs, down to --lm-pic-least (look-maker.js fit). On the page, Back and
   Done rest on the screen's foot, where the bar sticks when the rows scroll
   too, and its ground covers the home bar's strip. */
.lm { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; --lm-pic: clamp(210px, 38vh, 330px); --lm-pic-least: 150px; --lm-ground: var(--bg); }
.ts-panel-body .lm { --lm-ground: var(--surface); --lm-pic: clamp(190px, 32vh, 300px); }
.ts-page.maker { width: min(100%, 1100px); min-height: 100%; padding-bottom: 0; }
.ts-screen:has(> .ts-page.maker) { padding-bottom: 0; }
#panel > .panel:has(.lm) { height: 100%; }
.ts-panel-body > .fr-flow:has(.lm) { flex: 1 0 auto; display: flex; flex-direction: column; }
.lm-body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lm-stage { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; background: var(--lm-ground); }
.lm-picture {
  position: relative; height: var(--lm-pic); overflow: hidden;
  background: var(--surface); border: 2px solid var(--line); border-radius: 18px; box-shadow: 0 3px 0 var(--line);
}
.ts-panel-body .lm-picture { background: var(--bg); }
.lm-figure { display: block; width: 100%; height: 100%; cursor: grab; }
.lm-corner { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.lm-corner .btn { pointer-events: auto; }
/* (a greyed Undo stays solid over the person: only its word and arrow fade) */
.lm-corner .btn[aria-disabled="true"] { opacity: 1; color: rgba(107, 58, 31, 0.4); }
/* (each tab as wide as its name, so Clothes fits beside four others) */
.lm .pn-tabs .tab { flex: 1 1 auto; min-width: 44px; padding: 0 6px; }
.lm-rows { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lm-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.lm-row[hidden] { display: none; }
.lm-name { flex: 0 0 6.6em; min-width: 0; font-weight: 900; line-height: 1.15; }
/* the shopkeeper's Glasses: a row like the sliders', its switch at the end */
.lm-row.pn-switch { padding: 0; border: 0; border-radius: 0; background: none; }
/* A slider (role slider): its track, a dot for each shape or the colours side
   by side, a mark at a size's middle, and the knob, in the chosen colour on a
   colour track. The whole row's height takes a finger. */
.lm-slider {
  --pad: 17px; position: relative; flex: 1 1 auto; min-width: 0; height: 44px; border-radius: 14px;
  cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.lm-slider:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lm-track {
  position: absolute; left: var(--pad); right: var(--pad); top: 50%; height: 12px; transform: translateY(-50%);
  border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.lm-colours .lm-track, .lm-gray .lm-track { height: 22px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.lm-dot { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 999px; background: var(--muted); }
.lm-mid { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--muted); }
.lm-knob {
  position: absolute; top: 50%; left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--f, 0)); width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 999px; background: var(--surface); border: 3px solid var(--accent); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); pointer-events: none;
}
.lm-colours .lm-knob, .lm-gray .lm-knob { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-color: var(--surface); box-shadow: 0 0 0 2px var(--accent), 0 2px 5px rgba(0, 0, 0, 0.3); }
.lm-slider.pressed .lm-knob { transform: scale(1.12); }
/* a colour track on two lines, each colour at least 18 points (look-maker.js
   SWATCH), the knob on the chosen line */
.lm-two .lm-track { height: 40px; }
.lm-two .lm-knob { top: calc(50% + (var(--line, 0) - 0.5) * 20px); width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.lm-acts { position: sticky; bottom: 0; z-index: 3; padding: 8px 0 calc(8px + var(--sab, 0px)); background: var(--lm-ground); }
.ts-panel-body .lm-acts { padding-bottom: 8px; }
.ts-panel-body .lm .ts-head { font-size: 1.5em; }
/* Tight (look-maker.js fit): a screen too short for the tallest tab with the
   picture at its least, as an iPhone SE is, keeps less room between the parts
   and none under Done in a panel. */
.lm.lm-tight { gap: 6px; }
.lm-tight .ts-head { margin-top: 0; }
.lm-tight .lm-body { gap: 4px; }
.lm-tight .lm-stage { padding-bottom: 2px; }
.lm-tight .lm-rows { gap: 0; }
.ts-panel-body .lm-tight .lm-acts { padding-bottom: 0; }
/* A phone: a colour row's name above a track the row's whole width, so the
   knob covers one colour beside the chosen one rather than two. Tight, the
   name comes down over the slider's edge above the knob, the slider over it,
   so the whole 44 points still take a finger. */
@media (max-width: 599.98px) {
  .lm-row.lm-colour-row { flex-direction: column; align-items: stretch; gap: 0; padding-top: 4px; }
  .lm-colour-row .lm-name, .lm-colour-row .lm-slider { flex: none; }
  .lm-tight .lm-row.lm-colour-row { padding-top: 2px; }
  .lm-tight .lm-colour-row .lm-name { margin-bottom: -3px; }
}
/* A tablet held upright: the picture about half the screen's height. */
@media (min-width: 600px) and (orientation: portrait) {
  .lm { --lm-pic: clamp(330px, 50vh, 720px); }
  .ts-panel-body .lm { --lm-pic: clamp(300px, 42vh, 600px); }
  .ts-page.maker { width: min(100%, 720px); }
}
@media (min-width: 840px) and (orientation: landscape) {
  .lm { --lm-pic: min(560px, 68vh); }
  .lm-body { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px 24px; align-items: start; }
  .lm-stage { display: contents; }
  .lm-picture { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; }
  .lm .pn-tabs { grid-column: 2; grid-row: 1; }
  .lm-rows { grid-column: 2; grid-row: 2; }
  /* (a panel is narrower than the screen) */
  .ts-panel-body .lm { --lm-pic: min(420px, 60vh); }
  .ts-panel-body .lm-body { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
}

/* ---------- characters (src/ui/characters.js) ---------- */
/* The characters as cards, each a portrait over a name, as many across as
   fit; Back at the foot of whatever scrolls (the new game's screen, or the
   Staff panel's body), on its ground, as the look maker's Done is. */
.ch-list, .ch-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
/* (from a tablet up the text is larger, and three across keeps a long first
   name whole) */
@media (min-width: 600px) { .ch-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.ts-choice.ch-card { flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 0; padding: 8px 4px 10px; text-align: center; }
.ch-card > div { width: 100%; min-width: 0; }
/* (a name wraps between its words only, drawn smaller when a word is wider
   than the card, dom.js fitWords; a word too wide even at its least takes
   the whole row) */
.ch-card b { display: block; font-size: 0.94em; line-height: 1.15; }
.ch-card b > span { white-space: nowrap; }
.ch-grid > .ch-card:has(b.fit-whole) { grid-column: 1 / -1; }
.ch-face { display: block; width: 84px; height: 90px; flex: none; border-radius: 14px; background: var(--surface-2); }
.ch-face.ch-big { width: 112px; height: 120px; align-self: center; }
.ch-foot { position: sticky; bottom: 0; z-index: 2; padding: 8px 0 calc(8px + var(--sab, 0px)); background: var(--bg); }
.ts-panel-body .ch-foot { padding-bottom: 8px; background: var(--surface); }
/* (on the new game's screen a foot sticks through the screen's own padding to
   its very edge, so nothing scrolls by beneath it; the look maker's needs
   none, the screen keeping no padding while it is up) */
#newGame .ch-foot { bottom: calc(-1 * (var(--sab) + var(--gap))); padding-bottom: calc(8px + var(--sab) + var(--gap)); }
.ch-ask { align-items: center; text-align: center; }
.ch-ask .ts-actions { width: 100%; }

/* ---------- the title ---------- */
/* (by id, as the menus' own #title rule is) */
#title.ts-title { background: radial-gradient(ellipse at 50% 38%, #FFFFFF 0%, #FBF4EA 45%, #EAD5B6 100%); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
:root[data-theme="dark"] #title.ts-title { background: radial-gradient(ellipse at 50% 38%, #2F3B38 0%, #242120 55%, #171513 100%); }
:root[data-theme="dark"] .tea-ad { color: var(--muted); background: rgba(42, 38, 34, 0.72); }
:root[data-theme="dark"] .tea-ad b { color: var(--text); }
.ts-title-body { width: 100%; display: flex; flex-direction: column; gap: 12px; font-size: var(--ts-font); color: var(--text); }
.ts-slot { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; text-align: left; }
.ts-slot .slot-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-slot .slot-name { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-slot .slot-line { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ts-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ts-link svg { width: 18px; height: 18px; }

/* ---------- the morning ---------- */
.ts-rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ts-rooms .ts-choice { flex-direction: column; justify-content: center; text-align: center; min-height: 72px; padding: 8px; gap: 4px; }
.ts-rooms .ts-choice svg { width: 24px; height: 24px; }
/* a tap on the greyed Start day: the rooms pulse in the coach's orange, as its
   nudge does, a little less so as not to touch each other */
.ts-rooms.nudge .ts-choice { border-color: var(--sunset); animation: ts-rooms-nudge 0.4s ease-in-out 3; }
@keyframes ts-rooms-nudge { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ts-rooms.nudge .ts-choice { animation: none; } }

/* ---------- the day summary ---------- */
/* The menus' top bar stays over the summary, for the scores and Settings; its
   Pause has nothing to stop there. It stands on a band of the page's colour,
   fading out under its pills, so the results scroll under a surface rather
   than show between the pills (a panel over the summary too). */
.ts-summary-up .hud { z-index: 11; }
.ts-summary-up .hud::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--below-hud); pointer-events: none;
  background: linear-gradient(var(--bg) calc(100% - var(--gap)), transparent);
}
.ts-summary-up #pauseBtn { visibility: hidden; }
#summary { padding-top: var(--below-hud); }
.ts-cards { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
/* Wider, the cards flow down columns at least 260 wide, so a tall card
   leaves no gap beside it, as a row of a grid would. */
@media (min-width: 600px) {
  .ts-cards { display: block; columns: 260px; column-gap: 12px; }
  .ts-cards > * { break-inside: avoid; margin-bottom: 12px; }
}
/* The panels a decision opens, as the Shop menu's tiles (panels.js): equal
   thirds, a short last row centred, each its icon over its name, in the
   page's own look rather than Paused's card's. */
.ts-places { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(100%, 520px); margin: 0 auto; }
.ts-places .ts-menu-item {
  flex: 0 1 calc((100% - 16px) / 3); min-width: 0; flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 4px;
  text-align: center; font-size: max(13px, 0.875em); background: var(--surface); box-shadow: 0 3px 0 var(--line);
}

/* ---------- the Shop menu and its panels ---------- */
/* (the notice that another tab has the game, and the sign-in choice, above everything) */
#oneTab { z-index: 12; }
.ts-sheet { font-size: var(--ts-font); }
.ts-sheet .panel { background: var(--surface); color: var(--text); border-color: var(--brown); }
.ts-sheet .panel-title { color: var(--text); font-family: "Lilita One", var(--font); font-weight: 400; }
.ts-sheet .panel-text { color: var(--text); }
.ts-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
/* The Shop menu's buttons at the top of the menus' Paused card (index.html
   #gamePaused), three across, in the menus' own look in both themes; a card
   wide enough to hold them from a tablet up (the menus' own cards stop at
   380). Each is its icon over its name, 44 points tall on one line: beside
   its icon, Buying List would not fit a tile a third of an iPhone SE wide.
   The top bar stays over Paused, so the card starts below it, which with
   twelve tiles leaves it whole on an iPhone SE, at Largest too (below). */
.ts-paused { width: 100%; font-size: var(--ts-font); }
#pause .ts-menu-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
#pause .ts-menu-item {
  flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; padding: 3px 4px; text-align: center;
  font-size: max(12px, 0.8em); background: #FFFFFF; color: var(--ink, #3B2314); border-color: rgba(107, 58, 31, 0.2);
}
#pause .ts-menu-item svg { width: 18px; height: 18px; color: var(--turquoise); }
body.ts-paused-up #pause { padding-top: var(--below-hud); }
/* (on a short phone at Large and Largest the grown tiles leave no room for
   three full-width buttons: Close early and Restart day share a row under
   Resume, so Paused fits whole down to its foot) */
@media (max-height: 760px) {
  :root:is([data-text-size="2"], [data-text-size="3"]) #pause .panel-actions:has(#restartBtn) { display: grid; grid-template-columns: 1fr 1fr; }
  :root:is([data-text-size="2"], [data-text-size="3"]) #pause .panel-actions:has(#restartBtn) > #resumeBtn { grid-column: 1 / -1; }
  :root:is([data-text-size="2"], [data-text-size="3"]) #pause .panel-actions:has(#restartBtn) > .btn { min-width: 0; padding: 0 0.6em; }
}
/* (an iPhone SE's height: the card's own edge and gaps a little tighter, so
   Paused fits whole with nothing to scroll at every text size) */
@media (max-height: 700px) { #pause .panel:has(.ts-paused) { padding: 12px 14px; gap: 6px; } }
@media (min-width: 600px) { #pause .panel:has(.ts-paused) { width: min(100%, 520px); } }
/* the coach over Paused, whose menu its lines may point at */
body.ts-paused-up .ts-coach, body.ts-paused-up .ts-coach-ring { z-index: 12; }
.ts-menu-item {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--bg); color: var(--text); font: 800 1em/1.15 var(--font); text-align: left; cursor: pointer; touch-action: manipulation;
}
.ts-menu-item svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.ts-menu-item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.ts-menu-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ts-sheet .panel.ts-big { width: min(100%, 720px); max-height: 100%; align-items: stretch; text-align: left; overflow: hidden; }
/* a panel's title, and from the menu its Back arrow at the left (the title
   stays centred: the column across from the arrow is as wide as it) */
.ts-panel-head { width: 100%; display: flex; justify-content: center; }
.ts-panel-head.back { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.ts-panel-head .btn.round { width: 44px; height: 44px; }
.ts-panel-head .btn.round svg { width: 22px; height: 22px; }
.ts-panel-body { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; text-align: left; }
.ts-panel-body h3 { margin: 6px 0 0; font-size: 1.05em; font-weight: 900; }
.ts-panel-body ol, .ts-panel-body ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; line-height: 1.35; font-weight: 700; }
/* room for a two-digit step's number, which the panel would otherwise cut */
.ts-panel-body ol { padding-left: 2em; }

/* ---------- the testing section and text size in Settings ---------- */
/* The menus' Music switch shows once the shop's music.json names a song
   (app.js), since before then it would change nothing. */
html:not(.ts-music) .set-row:has(#optMusic) { display: none; }
.ts-jump { display: inline-flex; align-items: center; gap: 8px; }
.set-row.ts-buttons { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding-top: 8px; padding-bottom: 8px; }
.ts-day-input { width: 5.5em; flex: none; }
/* Reduce motion held on by the phone's own setting (app.js) */
.ts-settings .toggle:disabled { opacity: 0.6; cursor: default; }
.ts-testing[aria-disabled="true"] .btn, .ts-testing[aria-disabled="true"] .tab { opacity: 0.45; pointer-events: none; }

/* ---------- a press ---------- */
/* Tea Shop's own tappables answer the finger as it lands, as the candy
   buttons do: a touch smaller, a shadow under one lowered (not a ring saying
   what is chosen). By scale, which goes with the transform a nudge animates
   and the translate a pin is placed by; shaded instead while motion is
   reduced. The choices are candy buttons (dom.js) pressed this way instead. */
:root { --ts-press: 0.97; --ts-press-shade: none; }
:root.ts-still { --ts-press: 1; --ts-press-shade: brightness(0.94); }
@media (prefers-reduced-motion: reduce) { :root { --ts-press: 1; --ts-press-shade: brightness(0.94); } }
:is(.ts-menu-item, .ts-choice, .side-row, .room-pin, .ts-clock.can-fast,
  .cu .jar-tile, .cu button.tray-slot, .cu .shelf-row, .cu .spot, .cu .pick-row,
  .so-station, .so-orderrow, button.so-bagrow, button.so-rackbag, .so-boxtile, .so-paper, .so-notein, .so-service,
  .wh-station, .wh-case, .wh-bin.takes, .wh-bin[aria-pressed], .wh-row-open, .wh-sort, .wh-lot, .wh-step, .wh-fam, .wh-pick, .wh-add,
  .pn-reply-option, .pn-piece, .pn-problem, .bk-chip, .bk-row, .hp-hint):active:not(:disabled, [aria-disabled="true"]) {
  scale: var(--ts-press); filter: var(--ts-press-shade);
}
.btn.ts-choice:active, .so-service:active { transform: none; box-shadow: 0 1px 0 var(--line); }
.btn.lk-gift:active { box-shadow: none; }
.room-pin:active, .ts-clock.can-fast:active { box-shadow: var(--ts-float-low); }
.room-pin.glow:active { box-shadow: 0 0 0 3px #FFD27A, 0 0 16px 5px rgba(255, 196, 92, 0.85), var(--ts-float-low); }

/* ---------- loading ---------- */
.loading {
  position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg); color: var(--text); font: 400 28px/1 "Lilita One", var(--font); transition: opacity 0.4s;
}
.loading img { border-radius: 24%; }
.loading.gone { opacity: 0; pointer-events: none; }
/* Opened from joldi.in, the screen joldi.in dashed into is the loading screen. */
.launching .loading { display: none; }

/* ---------- reduced motion, as the player chose it in Settings ---------- */
:root.ts-still *, :root.ts-still *::before, :root.ts-still *::after {
  animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important;
}