/* slev.me — the public site (ADR-052). The app's palette (Theme.swift, variant A′ toned): a muted violet field,
   coral for the price cut, gold for the member. The map is the page; everything else floats on it. */
:root {
  --pad-column: 56px;   /* the right column of the filter block: "later", each ruler's page numbers, the star (owner, 2026-10-30) */
  --primary: #665c8c;
  --primary-deep: #45305f;
  --chrome: #403352;
  --on-chrome: #f7f2fa;
  --on-chrome-faint: #c7bdd6;
  --accent: #ffa88f;
  --accent-deep: #b83d29;
  --loyal: #8c660d;
  --gold: #facc5c;          /* the logo's gold, and ".me" in the brand on the chrome (owner, 2026-10-28: "W6 se zlatým .me") */
  --logo-ink: #2e2340;      /* the logo's violet — the words on its gold (the sponsored price tag) */
  --loyal-light: #d9b24a;   /* the member's gold as a label on the dark chrome (the business list's "Sponzorováno") */
  --surface: #f9f7f5;
  --card: #ffffff;
  --card-dark: #3c304f;   /* the app's card in its dark scheme (Theme.swift 0.235 · 0.190 · 0.310) — the panels' groups */
  --hairline: #e0d9d1;
  --ink: #241c21;
  --ink-soft: #61575c;
  --ink-faint: #70666b;
  --good: #29754d;
  --link: #8676c9;    /* the arrows and the links between a pin and its row: the violet a step lighter than primary, toned (owner, 2026-10-25: "less vivid colour of arrow") */
  --radius: 12px;
  --pad: 14px;
  --font: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;   /* rounded FIRST, as the app (2026-10-27) */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: var(--font); color: var(--ink); background: var(--surface); }
#map { position: fixed; inset: 0; }

/* The chrome across the top: the brand, then the slider. */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;   /* above the log rail (22): the deals panel drops out of it */
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--chrome) 92%, transparent);
  color: var(--on-chrome);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 21px; white-space: nowrap; }
.brand .dot { color: var(--gold); }
/* CS | EN (owner, 2026-10-27, as AlphaCardio): two plain links at the top right, the current one on a light pill. */
.top .lang { margin-left: auto; display: flex; gap: 2px; font-size: 11px; font-weight: 600; }
.lang a { color: var(--on-chrome-faint); text-decoration: none; padding: 3px 8px; border-radius: 999px; }
.lang a[aria-current="page"] { color: var(--on-chrome); background: color-mix(in srgb, var(--on-chrome) 18%, transparent); }
.mark { width: 24px; height: 24px; }
/* The logo (owner, 2026-10-28): the percent sign in its schematic form, violet on a gold rounded square — the geometry of
   ios/logo-schematic.swift at 128 px, in six layers (/logo/): the ground, the bar, and four faces holding the globe and the clock.
   It MOVES ("prohoď je všude a aplikuj animaci … prohození jednou za 12 sec, po 2 sec zpět … po 4 prohozeních prohození podél
   horizontální osy a po čtyřech dalších zpět"): a 120-second cycle of ten slots. In each slot, 4 s in, the two turn 180° in 3D
   about the BAR (0.8 s), stay swapped 2 s and turn on round home (0.8 s); the fifth slot instead turns the bar and both about the
   logo's HORIZONTAL axis (1 s) and the logo stays so — the bar the other diagonal — for the next four swaps; the tenth turns it home.
   Two registered angles carry it: --logo-turn (the horizontal axis) and --logo-swap (the bar, in the turned logo's own frame).
   A face shows only from the front, so each object needs a face for each of the four ways it can lie (a / a-back: at home and
   swapped; b-back / b: turned and turned-swapped — those two drawn a quarter-turn back, which the two turns together undo); the
   face not in use is faded out while it faces away. A browser without @property steps instead of turning; a reader who asks
   for less motion sees it still. */
@property --logo-turn { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --logo-swap { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.brand-mark { position: relative; flex: none; width: 26px; height: 26px; perspective: 120px; transform: scaleX(-1);   /* MIRRORED (owner, 2026-10-30, M0): the globe top-right, the bar \ — the faces draw the hands mirrored, so the clock still reads a quarter past one */
  animation: logo-swap 120s cubic-bezier(.65, 0, .35, 1) infinite, logo-turn 120s cubic-bezier(.65, 0, .35, 1) infinite; }   /* 15 %, then a hair (~5 %) smaller than the first 32, beside the 21 px brand (owner, 2026-10-28) */
.brand-mark img, .brand-mark .turn, .brand-mark .swap, .brand-mark .face { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.brand-mark .turn { transform-style: preserve-3d; transform: rotateX(var(--logo-turn)); }
.brand-mark .swap { transform-style: preserve-3d; transform: rotate3d(1, -1, 0, var(--logo-swap)); }
.brand-mark .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: 120s linear infinite; }
.brand-mark .face.back { transform: rotate3d(1, -1, 0, 180deg); }
.brand-mark .face.a { animation-name: logo-face-a; }
.brand-mark .face.a.back { animation-name: logo-back-a; }
.brand-mark .face.b { opacity: 0; animation-name: logo-face-b; }
.brand-mark .face.b.back { animation-name: logo-back-b; }
@keyframes logo-swap {
  0%, 3.333% { --logo-swap: 0deg; }         4%, 5.667% { --logo-swap: 180deg; }
  6.333%, 13.333% { --logo-swap: 360deg; }  14%, 15.667% { --logo-swap: 540deg; }
  16.333%, 23.333% { --logo-swap: 720deg; } 24%, 25.667% { --logo-swap: 900deg; }
  26.333%, 33.333% { --logo-swap: 1080deg; } 34%, 35.667% { --logo-swap: 1260deg; }
  36.333%, 53.333% { --logo-swap: 1440deg; } 54%, 55.667% { --logo-swap: 1620deg; }
  56.333%, 63.333% { --logo-swap: 1800deg; } 64%, 65.667% { --logo-swap: 1980deg; }
  66.333%, 73.333% { --logo-swap: 2160deg; } 74%, 75.667% { --logo-swap: 2340deg; }
  76.333%, 83.333% { --logo-swap: 2520deg; } 84%, 85.667% { --logo-swap: 2700deg; }
  86.333%, 100% { --logo-swap: 2880deg; }
}
@keyframes logo-turn { 0%, 43.333% { --logo-turn: 0deg; } 44.167%, 93.333% { --logo-turn: 180deg; } 94.167%, 100% { --logo-turn: 360deg; } }
/* Each face is swapped for its twin only while both face away: the fronts while the logo lies turned at rest, the backs at home. */
@keyframes logo-face-a { 0%, 46% { opacity: 1; } 50%, 88% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes logo-face-b { 0%, 46% { opacity: 0; } 50%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes logo-back-a { 0%, 38% { opacity: 1; } 42%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes logo-back-b { 0%, 38% { opacity: 0; } 42%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand-mark, .brand-mark .face { animation: none; } }
/* The words centred on the logo by EYE (owner, 2026-10-28): the box is centred already, but the lowercase body sits
   2.5 px under the logo's middle and the ascenders 1 px over it — lifted 1.5 px to split the difference. */
.brand .word { transform: translateY(-1.5px); }

/* The time (owner, 2026-10-25): SIX BUTTONS instead of the slider — today morning … tomorrow evening — each over its
   DEALS strip: the businesses on offer then, a dot (free) or the mark (PRO), edged in the colour of the usual place they
   are within 5 km of then (`--place`, set by site.js; the neutral ink when no place is usual). Six columns; three on a
   phone, today over tomorrow. */
.when { flex: 1; min-width: 0; display: grid; gap: 4px; }
/* ONE label style for the three rows of the matrix — time, place, intent (design check 2026-10-25): 12 px, weight 500,
   the light ink; the two that open a configuration are buttons and say so with a chevron. */
.when-label, .row-label { font-size: 14px; font-weight: 500; color: var(--on-chrome); }
.row-label { font: inherit; font-size: 14px; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.row-label::after { content: " \203A"; color: var(--on-chrome-faint); }
.filter-row { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.when-row { display: flex; align-items: center; gap: 10px; }   /* the clock, then the four windows (2026-10-29) */
.when-row .when-grid { flex: 1; min-width: 0; }
.when-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 2px var(--pad-column); gap: 4px; }   /* the first three over the chips' three columns, "later" over the arrows' column (owner, 2026-10-30) */
.when-grid .cell:nth-child(4) { grid-column: 5; }   /* 4 + 2 + 4 = the rulers' 10 px before their column */
.when-grid .cell.step .when-btn { border-color: transparent; }   /* "later" and "earlier" without a border (owner, 2026-10-30) */
.when-grid .cell:nth-child(4) .when-btn { padding: 4px 0; }
.when-grid .cell.step .when-btn:disabled { color: var(--on-chrome-faint); opacity: .4; }   /* the ladder's end */
.when-grid .cell { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 8px; }   /* relative: the corner magnifier and its panel hang off the cell */
.when-btn {
  font: inherit; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  padding: 4px 8px; border-radius: 8px; border: 1.5px solid transparent;   /* the chips' height (2026-10-29) */ background: transparent; color: var(--on-chrome);
}
.when-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--on-chrome-faint) 45%, transparent); }
/* The FILTERS (owner, 2026-10-31, the mock-up's "B": "no background and no border, only a yellow outline for the chosen
   one"): the word alone at rest; chosen, the logo's gold outline and the word in gold. */
.when-grid .cell.on .when-btn { border-color: var(--gold); color: var(--gold); }   /* no bold: "dnes odpoledne" clipped at 375 pt */
.when-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.when-btn:disabled { cursor: default; }
/* The deals strip (owner, 2026-10-25, chosen from four mocks): one ROW per place — its name small in its colour, then
   the businesses in ALIGNED slots of a logo's size; the first row strong, the others faint. Two rows in the strip. */

/* The visitor is a LOCATOR — a white puck with a violet core, nothing like an offer (owner, 2026-10-24: the two were
   the same violet dot). */
.you { width: 20px; height: 20px; border-radius: 50%; background: var(--on-chrome); border: 5px solid var(--primary-deep); box-shadow: 0 0 0 2px var(--on-chrome), 0 2px 6px rgba(0,0,0,.45); }
/* Owner, 2026-10-24 (composed from the four shown, then tightened): the offer is a HEARTBEAT on the business. One
   3.6-second cycle: a small breath of the dot (0–0.6 s), two pings close together (0.6 s and 0.95 s), a short rest.
   The element is the 40 px pulse box centred on the business; the price label hangs above it (below when it would
   collide with a neighbour's — site.js). */
.pin { position: relative; width: 40px; height: 40px; cursor: pointer; }
/* An ordinary offer's label (owner, 2026-10-24): no white — the strip's half-vivid violet at 50 % transparency, light
   ink on it, the price in the light coral. */
.pin .label {
  position: absolute; left: 50%; bottom: calc(100% - 6px); transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 5px; white-space: nowrap; color: var(--on-chrome);
  background: color-mix(in srgb, color-mix(in srgb, var(--primary) 50%, var(--ink-faint)) 50%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: 4px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--on-chrome) 25%, transparent);
  font-size: 13px; /* map */ text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* A FEATURED (PRO) business (ADR-054): the one white card on the map — its mark, its name, the exact hour, both prices
   and the call button — and a bigger, gold-ringed beat. */
.pin.featured { z-index: 3; }
.pin.featured .label {
  align-items: center; gap: 8px; padding: 6px 6px 6px 6px; border-radius: 14px; color: var(--ink); text-shadow: none;
  background: var(--card); border: 2px solid var(--loyal); box-shadow: 0 6px 18px rgba(0,0,0,.35); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.pin.featured .logo {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-deep); color: var(--on-chrome); font-weight: 700; font-size: 13px; /* map */ letter-spacing: .5px;
}
.pin.featured .who { display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.pin.featured .who strong { font-size: 13px; /* map */ }
.pin.featured .line { display: flex; align-items: baseline; gap: 5px; }
.pin.featured .label s { color: var(--ink-faint); }
.pin.featured .label b { color: var(--accent-deep); }
.pin.featured .label small { color: var(--ink-soft); }
.pin.featured .call {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good); color: var(--on-chrome); margin-left: 2px;
}
.pin.featured .call svg { width: 18px; height: 18px; fill: currentColor; }
.pin.featured .dot { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: var(--loyal); }
/* Owner, 2026-10-25: a PRO business that is NOT the selected one SHRINKS to its SPOT — the monogram on a transparent
   ground inside the gold ring — instead of the full label; the selected one (the log's open row) shows the label. */
.pin .spot-logo { display: none; }
.pin.featured:not(.sibling):not(.picked) .label { display: none; }
.pin.featured:not(.sibling):not(.picked):hover .label { display: flex; }
.pin.featured:not(.sibling):not(.picked) .dot { display: none; }
/* And a FREE business (owner, 2026-10-25: "going off the dot, the price disappears, and only the dot stays"): its price
   shows while the pointer is on it and while it is the selected one; otherwise the beating dot alone. */
.pin:not(.featured):not(.picked) .label { display: none; }
.pin:not(.featured):not(.picked):hover .label { display: flex; z-index: 2; }
.pin.featured:not(.sibling):not(.picked) .spot-logo {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary-deep) 35%, transparent); border: 1.5px solid var(--loyal); color: var(--on-chrome);
  font-size: 10px; /* map */ font-weight: 700; letter-spacing: .3px; text-shadow: 0 1px 2px rgba(0,0,0,.6); animation: breath 3.6s ease-in-out infinite;
}
.pin.featured .ring { border-color: var(--loyal); }
.call-cta { background: var(--good); }
/* A featured business's further offers: a smaller dot, no label (the card counts them). */
.pin.sibling .label { display: none; }
.pin.featured.sibling .dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.pin.featured.sibling { z-index: 1; }
.pin.below .label { bottom: auto; top: calc(100% - 6px); }
.pin.quiet .label { display: none; }
.pin:hover .label, .pin.quiet:hover .label { display: flex; z-index: 2; }
.pin .pulse { position: absolute; inset: 0; }
.pin .dot, .pin .ring { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
.pin .dot { background: var(--primary); border: 2px solid var(--on-chrome); box-shadow: 0 1px 4px rgba(0,0,0,.45); animation: breath 3.6s ease-in-out infinite; }
.pin .ring { border: 2px solid var(--primary); opacity: 0; animation: ping 3.6s ease-out infinite; }
.pin .ring:nth-child(2) { animation-delay: .35s; }
.pin.promoted .dot { background: var(--loyal); }
@keyframes breath { 0% { transform: scale(1); } 8% { transform: scale(1.2); } 17%, 100% { transform: scale(1); } }
@keyframes ping { 0%, 16% { transform: scale(1); opacity: 0; } 17% { opacity: .9; } 45%, 100% { transform: scale(5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin .dot, .pin .ring { animation: none; } .pin .ring { display: none; } }
.pin .label s { color: var(--on-chrome-faint); font-size: 11px; }
.pin .label s:empty { display: none; }
.pin .label b { color: var(--accent); font-weight: 700; font-size: 14px; }
.pin .label small { color: var(--on-chrome-faint); font-size: 11px; }
.pin.promoted .label { border-color: var(--loyal); }

/* The arrows at the edge for pins off the screen (the app's edge arrows, ADR-014). */
.arrows { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
.edge {
  position: absolute; pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap;   /* a pill at the right edge had wrapped to five lines (check 2026-10-25) */
  background: var(--card); border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 10px 4px 6px;
  font-size: 12px; /* map */ color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.2); transform: translate(-50%, -50%);
}
.edge .arrow { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--accent-deep); }
.edge b { color: var(--accent-deep); }

/* Owner, 2026-10-24: the "x nabídek" strip's GROUND is the violet at half vividness — the primary mixed one-to-one
   with the faint ink — and its words are the chrome's light ink on it. Owner, 2026-10-25: the strip is the BOTTOM PANEL's
   first line, the same lighter colour at 45 % — more transparent, the map showing through. */
.status {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--on-chrome);
  background: color-mix(in srgb, color-mix(in srgb, var(--primary) 50%, var(--ink-faint)) 45%, transparent); border: 0;
  border-radius: var(--radius); padding: 6px 12px;
}
#count, #summary { color: var(--on-chrome); }

.bottom {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--chrome) 72%, transparent); color: var(--on-chrome);
}
.pill {
  font: inherit; font-size: 14px; border: 1px solid var(--on-chrome-faint); background: transparent; color: var(--on-chrome);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.pill:hover, .pill[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); }
.note { font-size: 11px; color: var(--on-chrome-faint); }

/* The one card — the DETAIL of the selected log row (owner, 2026-10-25: "just one pane, only as selected, not in the
   fixed place"): it sits INSIDE the row it belongs to (site.js moves it there), on the row's own ground — brief, the
   page's own type and colours. Until 2026-10-25 it was a fixed overlay at the bottom right. */
/* ADR-054 amended: a PRO business's NEXT FREE SPOTS — its open hours ahead, from the product's own read. */
.spots ul { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.spots li { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--on-chrome-faint); }
.spots li b { color: var(--accent); margin-left: 6px; }
.muted { color: var(--ink-soft); font-size: 11px; }
.close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; /* glyph */ color: var(--ink-faint); cursor: pointer; }
[hidden] { display: none !important; }  /* `display: block` on .cta had been beating the `hidden` attribute (check 2026-10-24). */
.cta {
  display: block; text-align: center; margin: 10px 0 4px; padding: 12px; border-radius: var(--radius);
  background: var(--primary); color: var(--on-chrome); text-decoration: none; font-weight: 600;
}

/* Where are you? — the usual places, kept in this browser only. A FULL-SCREEN overlay (owner, 2026-10-25): the page
   beneath BLURRED, the ground 80 % transparent (the chrome at 20 %), light ink on it; the content in one column of at
   most 520 px. The fields keep their white ground. */
.where {
  position: fixed; inset: 0; z-index: 40; overflow: auto; color: var(--on-chrome);
  background: color-mix(in srgb, var(--chrome) 20%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-shadow: 0 1px 2px rgba(0,0,0,.45);
  padding: calc(28px + env(safe-area-inset-top)) max(16px, calc((100vw - 520px) / 2)) calc(28px + env(safe-area-inset-bottom));
}
.where .close { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 16px; font-size: 28px; /* glyph */ color: var(--on-chrome); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.where .muted { color: var(--on-chrome-faint); }
.where input { text-shadow: none; }
.where ul { list-style: none; margin: 8px 0; padding: 0; }
.where li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--on-chrome) 25%, transparent); font-size: 14px; }
.where li .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.where li .usual { font-size: 11px; color: var(--accent); }
.where li button { font: inherit; font-size: 14px; font-weight: 400; min-width: 52px; text-align: right; border: 0; background: none; color: var(--accent); cursor: pointer; }
.where li.active { font-weight: 600; }
#place-form { display: grid; gap: 8px; }
#place-form input[type="text"], #place-form input[type="number"] { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--hairline); border-radius: 8px; }
#place-address:disabled { background: var(--surface); color: var(--ink-faint); cursor: not-allowed; }
/* The week (owner, 2026-10-25): a 0–24 bar per day, Monday first; a period is a violet span on it, several a day. */
.week { display: grid; gap: 5px; }
.week .day { display: grid; grid-template-columns: 26px 1fr 72px; align-items: center; gap: 8px; font-size: 11px; }
.week .day .name { color: var(--on-chrome-faint); }
.week .bar { position: relative; height: 22px; border-radius: 4px; background: color-mix(in srgb, var(--primary) 10%, var(--card)); border: 1px solid var(--hairline); cursor: crosshair; touch-action: none; }
.week .bar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hairline); }   /* midday */
.week .bar .period { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: color-mix(in srgb, var(--primary) 75%, transparent); cursor: pointer; }
.week .bar .period.draft { background: color-mix(in srgb, var(--primary) 40%, transparent); pointer-events: none; }
/* The places already saved, faint in their own colour (owner, 2026-10-25: "super-low vivid"): a fifth of the colour into
   the bar's own ground; never in the way of a drag. */
.week .bar .period.other { background: color-mix(in srgb, var(--other) 22%, transparent); pointer-events: none; }
.week .day .text { text-align: right; color: var(--on-chrome); font-variant-numeric: tabular-nums; }
.week .day .text.none { color: var(--on-chrome-faint); }
#place-form .pill { color: var(--on-chrome); border-color: var(--on-chrome); justify-self: start; }
#place-form .pill:hover { background: var(--primary); border-color: var(--primary); }

/* The map's credit is the status strip's last line — never a floating bar over the buttons (the phone-width check). */
.status .attribution { flex-basis: 100%; font-size: 11px; color: var(--on-chrome-faint); }
.maplibregl-ctrl-attrib { display: none; }

@media (max-width: 640px) {
  .top { row-gap: 6px; }
  .wants button { padding: 6px 12px; }   /* a thumb's target */
  .when { flex-basis: 100%; }
  .when-btn { padding: 7px 1px; font-size: 11px; }   /* "příští měsíc" in the 11 fits a third of a 375 px phone; "tento mě…" was cut at 14 (2026-10-30) */
}
@media (max-width: 480px) {
  .top { gap: 10px; }
  .brand { font-size: 21px; }
}

/* The LOG (owner, 2026-10-25: "showing businesses as log on the right, a slider, new ones go beneath; the selected one
   50 % vivid violet, the others as transparent as on the map, 50 % more"): the businesses the visitor tapped, as rows
   between the ruler and the status strip, the newest at the bottom, a thin violet scrollbar. Every row's ground is the
   map label's at HALF its opacity (25 %). A tap on a row EXPANDS it in place into the detail (the #card moves into it;
   owner, later that morning: "just one pane"). */
/* Every row keeps the one ground (owner, 2026-10-25: "I like the higher transparency, so all"); the selected row is told
   by its gold arrow and by its detail. The AIM: a super-small triangle at the row's left edge, rotated by site.js to
   point at the business on the map — the link violet, GOLD once selected. */
@media (max-width: 480px) { .log { width: min(240px, 62vw); top: calc(112px + env(safe-area-inset-top)); } }

/* The LINKS (owner, 2026-10-25: "also draw the line to the top right corner, where the pair arrow is placed to arrow back
   to the panel"): one thin line per logged business from its pin to its row's arrow, and at the pin's end the PAIR of
   that arrow pointing back at the rail — the link violet, gold for the selected row; from the top-right corner of the
   label when one shows, else of the spot. Under the rail, over the map. */
/* Dotted (owner, 2026-10-25: "dot and 3 dots space repeating"): a dash as long as the stroke is wide, then three widths
   of gap. A zero-length round-capped dash renders NOTHING on a <line> here (measured 2026-10-25), so the dot is square. */

/* A place's colour (ADR-021 on the site, 2026-10-25): the product's six, as swatches; none picked = the name's own. */
.swatches { display: flex; gap: 6px; }
.swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatches button.on { border-color: var(--on-chrome); box-shadow: 0 0 0 2px var(--card) inset; }
.swatches button.picked { outline: 2px solid var(--on-chrome); outline-offset: 2px; }

/* A place's week in MINIATURE (owner, 2026-10-25): seven hair-thin 0–24 tracks, Monday on top, the periods in the
   place's own colour (site.js) — in place of the hours as text. */
/* At the right, beside "Odebrat", so every row's miniature lines up (owner, 2026-10-25); the tracks a light violet tint. */
.where li .mini { position: relative; display: grid; gap: 1px; width: 72px; flex: none; margin-left: auto; }
.where li .mini i { position: relative; display: block; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--primary) 18%, var(--card)); }
.where li .mini i.today { background: color-mix(in srgb, var(--primary) 34%, var(--card)); }
/* NOW (owner, 2026-10-25): the hour marked ON TODAY in the page's saturated violet; across the other days only a faint
   hint of the same line. */
.where li .mini .now { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: color-mix(in srgb, var(--primary) 22%, transparent); }
.where li .mini .now-today { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--primary-deep); z-index: 1; }
.where li .mini b { position: absolute; top: 0; bottom: 0; border-radius: 1px; }

/* Odd and even weeks (owner, 2026-10-25): the switch under the hint; split, the week stands TWICE — the odd week on the
   left, the even on the right, each under its heading, the current one named — and the miniature in the list doubles
   the same way, the NOW tick in the current week's half only. One column on a phone. */
.fortnight { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.fortnight input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.week.split { grid-template-columns: 1fr 1fr; gap: 5px 16px; }
.week .head { font-size: 11px; color: var(--on-chrome-faint); padding-bottom: 2px; }
.week .head.now { color: var(--on-chrome); font-weight: 600; }
.week.split .day { grid-template-columns: 22px 1fr 56px; font-size: 11px; }
.where li .fortnight-mini { display: flex; gap: 4px; margin-left: auto; }
.where li .fortnight-mini .mini { margin-left: 0; width: 56px; opacity: .55; }
.where li .fortnight-mini .mini.current { opacity: 1; }
@media (max-width: 480px) { .week.split { grid-template-columns: 1fr; } }

/* The SELECTED business (owner, 2026-10-25: "select by circle — rounding the selected spot"): a gold ring round its
   point in every deals strip, and round its spot on the map. */
.pin.picked .dot, .pin.picked .spot-logo { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 3.5px var(--loyal); }

/* The row's PLACE (owner, 2026-10-25: "every card a faint outline in the colour of its line — and the line in the colour
   of the location"): `--place` is the colour of the usual place the business is reachable from at its hour (site.js),
   the toned link violet when it is only the visitor's own position. The outline faint; the selected row's firmer. */

/* The TYPE chips in "Co si přejete?" (owner, 2026-10-25): one per service type on offer; none pressed = everything. */
.wants { display: flex; flex-wrap: wrap; gap: 4px; }
.wants button {
  font: inherit; font-size: 14px; cursor: pointer; padding: 4px 11px; border-radius: 8px; line-height: 1.3;
  border: 1.5px solid transparent; background: transparent; color: var(--on-chrome);
}
.wants button:hover { border-color: color-mix(in srgb, var(--on-chrome-faint) 45%, transparent); }
.wants button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); font-weight: 600; }   /* the mock-up's "B" (owner, 2026-10-31) */
.wants button.place { color: var(--place); }   /* a place in its own colour at rest (owner, 2026-10-31) */
.wants button.place[aria-pressed="true"] { color: var(--gold); border-color: var(--place); }   /* chosen: the word gold as the others, the outline its colour */
.wants button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "Moje poloha" is just the ARROW (owner, 2026-10-25). */
.pill.icon { padding: 7px 9px; display: grid; place-items: center; }
.pill.icon svg { width: 16px; height: 16px; fill: currentColor; }
/* The FILTER LINE under the time buttons: the word opens the configuration, the chips toggle in place. */
/* The overlays' headings (Poloha: usual places, particular businesses, add a place; Záměr: types, filters). */
/* The panels in the app's spirit (owner, 2026-10-27: "take the app's style, unify the panels"): the title centred in the 21
   on the close button's line, the section headers in the plain 14, faint and not in capitals, the hint and every list on
   the app's card (its dark-scheme card, Theme.swift) — the overlay keeps its blur and its 80 % transparency (2026-10-25). */
.where .panel-title { margin: 0 40px 16px; font-size: 21px; font-weight: 600; line-height: 1.3; text-align: center; }
.where h3 { font-size: 14px; margin: 18px 4px 6px; color: var(--on-chrome-faint); font-weight: 400; }
.where > .hint, .where ul:not(:empty) { border-radius: 18px; background: color-mix(in srgb, var(--card-dark) 82%, transparent); }
.where > .hint { margin: 0 0 6px; padding: 10px 14px; }
.where ul:not(:empty) { padding: 2px 14px; }
.where ul:not(:empty) > li:last-child { border-bottom: 0; }
.where ul.businesses:not(:empty) { padding: 4px; }
/* POLOHA's "Konkrétní podniky" (owner, 2026-10-25: "make a nicer list; the first is always sponsored — if none, slev.me's
   advert for its higher tier"): a row is one button — mark, name over its line, a check at the right; pressed = a violet
   ground. The sponsored row (a PRO business, or the advert) wears the loyal gold hairline and its small label. */
.businesses { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.businesses .business, .businesses .advert {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 12px; text-align: left;
  font: inherit; font-size: 14px; color: var(--on-chrome); cursor: pointer;
  background: color-mix(in srgb, var(--on-chrome) 7%, transparent); border: 1px solid color-mix(in srgb, var(--on-chrome) 14%, transparent);
}
.businesses .business:hover { background: color-mix(in srgb, var(--primary) 35%, transparent); }
.businesses .business[aria-pressed="true"] { background: color-mix(in srgb, var(--primary) 70%, transparent); border-color: var(--primary); }
.businesses .business:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.businesses li:first-child .business, .businesses .advert { border-color: color-mix(in srgb, var(--loyal) 80%, transparent); }
.businesses .advert { cursor: default; background: color-mix(in srgb, var(--loyal) 14%, transparent); }
.businesses .mark { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-deep); font-size: 11px; font-weight: 700; border: 1.5px solid var(--loyal); text-shadow: none; }
.businesses .mark.plain { background: var(--primary); border-color: transparent; }
.businesses .mark.brand { background: var(--primary); border-color: var(--loyal); }
.businesses .text { display: grid; gap: 1px; min-width: 0; flex: 1; }
/* The sponsored label is the PRICE TAG (owner, 2026-10-28: "štítek se slevou použij pro top offers sponzorované" — the
   logo samples' W7): the logo's gold, a pointed left end with a punched hole, the words in the logo's violet. */
.businesses .text i {
  justify-self: start; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--logo-ink); background: var(--gold); padding: 2px 8px 2px 15px; border-radius: 0 4px 4px 0;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle 2.2px at 8.5px 50%, transparent 95%, #000 100%);
  mask: radial-gradient(circle 2.2px at 8.5px 50%, transparent 95%, #000 100%);
}
.businesses .text b { font-weight: 600; }
.businesses .business:not(.featured) .text b { font-weight: 500; }
.businesses .text small { color: var(--on-chrome-faint); font-size: 11px; white-space: normal; }
.businesses .check { flex: none; width: 18px; text-align: center; color: var(--on-chrome); font-weight: 700; }
.businesses .advert .pill { flex: none; font-size: 14px; padding: 6px 12px; color: var(--on-chrome); border-color: var(--on-chrome); }
.businesses .advert .pill:hover { background: var(--primary); border-color: var(--primary); }
.wish .cta { max-width: 320px; }

/* The wished SERVICES as cards (owner, 2026-10-25: "show the services the user defined as cards — each has a range in
   days (hours) for particular places"): one card per chosen type, its own week of hours and its places. */
.services { display: grid; gap: 10px; margin-top: 8px; }
.service { border: 1px solid color-mix(in srgb, var(--on-chrome) 30%, transparent); border-radius: var(--radius); padding: 10px 12px 12px; background: color-mix(in srgb, var(--chrome) 35%, transparent); }
.service h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.service h4 .drop { margin-left: auto; font: inherit; font-size: 14px; font-weight: 400; border: 0; background: none; color: var(--accent); cursor: pointer; }
.service .part { font-size: 11px; color: var(--on-chrome-faint); text-transform: uppercase; letter-spacing: .3px; margin: 8px 0 4px; }
.service .week { gap: 3px; }
.service .week .day { grid-template-columns: 22px 1fr 64px; font-size: 11px; }
.service .week .bar { height: 18px; }
.service .places { display: flex; flex-wrap: wrap; gap: 6px; }
.service .places button {
  font: inherit; font-size: 14px; cursor: pointer; padding: 4px 10px 4px 8px; border-radius: 999px; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--on-chrome-faint); background: transparent; color: var(--on-chrome);
}
.service .places button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.service .places button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); }
.service .summary { font-size: 11px; color: var(--on-chrome-faint); margin-top: 6px; }

/* NAMED FILTERS (owner, 2026-10-25): the saved wishes as chips in the filter line (accent-edged, first), and their list
   in the configuration. */
/* ONE chip language (design check 2026-10-25): every chip the same shape, 12 px, pressed = the primary fill; what a chip
   IS is said by a glyph or a dot, never by a border colour — a place by its colour dot, a favourite by the star, a named
   filter and a type by their words alone. */
.filters { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.filters li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--on-chrome) 25%, transparent); font-size: 14px; }
.filters li small { color: var(--on-chrome-faint); font-size: 11px; }
.filters li button { margin-left: auto; font: inherit; font-size: 14px; border: 0; background: none; color: var(--accent); cursor: pointer; }
.filters li button.open { margin-left: 0; font-size: 14px; color: var(--on-chrome); }
.filters li.muted { font-size: 11px; border: 0; }
.filter-form { display: flex; gap: 8px; align-items: center; }
.filter-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--hairline); border-radius: 8px; }
.filter-form .pill { color: var(--on-chrome); border-color: var(--on-chrome); white-space: nowrap; }

/* FAVOURITE OFFERS (owner, 2026-10-25): a star on the card (gold when starred), a small star before a favourite row's
   name, and the "Oblíbené" chip in the filter line. */

/* The RULERS (owner, 2026-10-25): each section's filters on ONE line that scrolls sideways, a thin violet bar. */
.wants.ruler { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 8px) / 3); overflow: hidden; scroll-behavior: smooth;   /* THREE values to its width, a page at a time behind the page numbers (owner, 2026-10-29: "arrows instead of a carousel"; 2026-10-30: numbers instead of arrows) */ }
.wants.ruler button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }   /* ONE line, every chip as high as the others */
.pager { flex: none; align-self: center; display: flex; align-items: center; gap: 3px; max-width: var(--pad-column); overflow: hidden; scroll-behavior: smooth; }   /* the page numbers 1 … N (owner, 2026-10-30): really small, dark grey, each in a small ring, the shown one lit and kept centred, the row centred on its ruler; more than fit scroll */
.pager button { flex: none; width: 14px; height: 14px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; background: none; color: #8a8692; font: inherit; font-size: 8px; /* tiny */ line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; }
.pager button:first-child { margin-left: auto; }   /* centred when they fit, scrollable from the left when they do not */
.pager button:last-child { margin-right: auto; }
.pager button.on { color: var(--on-chrome-faint); font-weight: 700; }
/* LOCKED (owner, 2026-10-25): what the app unlocks wears a lock glyph and sits back; a tap opens the section and its
   lock line says so. */
.wants button.locked { opacity: .55; }
.lock { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 14px; background: color-mix(in srgb, var(--loyal) 35%, transparent); color: var(--on-chrome); }
.row-label.locked::after { content: " \1F512"; }
/* The right-hand panels reorder (owner, 2026-10-25): two small arrows on a collapsed row. */
#fav-save { color: var(--on-chrome); border-color: var(--on-chrome); margin: 10px 0 4px; }
#fav-save:disabled, .pill:disabled { opacity: .5; cursor: default; }

/* The QUOTES (owner, 2026-10-27: "I love the quotes — make the background beneath them transparent 50 %, make the same
   quotes to web for not logged-in users"): the app's landing block — a justified story between two big serif quote
   marks, the case's three words under it in the accent — floating at the bottom left above the footer (site.js sets
   `bottom` from the footer's height), on the chrome at 50 %. The text cross-fades (.fading) every 20 s; the marks stay. */
.quote {
  position: fixed; left: 16px; bottom: 72px; z-index: 19; width: min(380px, calc(100vw - 32px));
  padding: 2px 16px 10px; border-radius: var(--radius); color: var(--on-chrome);
  background: color-mix(in srgb, var(--chrome) 50%, transparent);
}
.quote .qmark, .join .story .qmark { display: block; font: 700 40px/0.8 Georgia, "Times New Roman", serif; /* glyph */ color: var(--on-chrome-faint); height: 22px; }
.quote .qmark.open, .join .story .qmark.open { text-align: left; padding-top: 10px; }
.quote .qmark.end, .join .story .qmark.end { text-align: right; margin-top: -6px; }
.quote p, .join .story p { margin: 0; font-size: 14px; line-height: 1.4; text-align: justify; white-space: pre-line; transition: opacity .6s ease-in-out; }
.quote .quote-cta { margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--accent); text-align: right; white-space: normal; }
.quote.fading p { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .quote p { transition: none; } }
@media (max-width: 480px) { .quote { left: 12px; width: calc(100vw - 24px); padding: 2px 12px 8px; } .quote p { font-size: 14px; } }
@media (max-height: 560px) { .quote { display: none; } }   /* a phone on its side: the map keeps the room */

/* JOIN (owner, 2026-10-27: "adding a place on the web should be no possible — clicking it will overlay the request to join:
   offers the features and click to the register form"; "registration only in the app, businesses in the preview and on the
   web too"): one overlay for every locked thing and every app button — two sides as tabs, what the app unlocks for that
   side as a ticked list, the side's story on the quotes' half-ground, and ONE button: the store link (site-config.json
   `join.storeLink`) or, while it is empty, "Brzy v App Store" disabled. The lock lines in the three sections open it too. */
.join .sides { display: flex; justify-content: center; gap: 8px; margin: 0 0 16px; }
.join .side { color: var(--on-chrome); border-color: var(--on-chrome-faint); }
.join .side[aria-selected="true"] { background: var(--primary); border-color: var(--primary); }
.join .features li { display: block; position: relative; padding: 8px 0 8px 24px; border-bottom: 1px solid color-mix(in srgb, var(--on-chrome) 20%, transparent); }
.join .features li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); font-weight: 700; }
.join .story { margin: 18px 0 8px; padding: 2px 16px 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--chrome) 50%, transparent); }
.join .story p { transition: none; }
.join .cta.soon { font: inherit; width: 100%; border: 0; cursor: default; opacity: .65; color: var(--on-chrome); }
.lock.opens { cursor: pointer; }
.lock.opens b { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* The two rulers and the FAVOURITE STAR (owner, 2026-10-30): the location behind the logo's globe and the intent behind a
   sparkle, both in the logo's gold; on the right ONE column as high as both rows holds each ruler's page numbers level with it and the
   star between them. Every button of the block — time, place, intent — is the same rounded rectangle. */
.rulers { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--pad-column); grid-template-rows: auto auto; gap: 4px 10px; align-items: center; }
.rulers .filter-row { grid-column: 1; min-width: 0; flex-wrap: nowrap; }
.rulers .pad { grid-column: 2; grid-row: 1 / 3; align-self: stretch; position: relative; display: grid; grid-template-rows: 1fr 1fr; justify-items: center; align-items: center; }   /* each pager level with its row, the star centred over both */
.fav-star { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font: inherit; font-size: 21px; line-height: 1; background: none; border: 0; padding: 0; cursor: pointer; color: var(--gold); }
.fav-star.locked { opacity: .7; }
.row-label.glyph { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.row-label.glyph::after { content: none; }
.row-label.glyph svg { width: 18px; height: 18px; fill: var(--gold); }
.row-label.glyph.locked::after { content: none; }
.wants button .fav-x { color: var(--gold); cursor: pointer; }
/* The locate arrow floats over the map's bottom-right, just above the bottom panel. */
/* Since 2026-10-30 (owner: "L2 … A", the app's locate disc): the Maps arrow in the logo's ink on the logo's yellow disc. */
.bottom .pill.icon.float { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 10px); width: 32px; height: 32px; padding: 0; border: 0; background: var(--gold); color: var(--logo-ink); }
.bottom .pill.icon.float:hover { background: var(--gold); border-color: var(--gold); }

/* MAP or LIST (owner, 2026-10-29, the app's switch): the capsule at the band's top-right, the chosen glyph on the thumb.
   Its ground at 68 % since 2026-10-30 (owner, "O3": the cards' 35 % with its transparency halved). In LIST the capsule
   also carries + and − — the LINES per offer — and a hairline between them and the switch. */
.view-switch { position: fixed; right: 12px; top: 120px; z-index: 23; display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, black 68%, transparent); border: 0; cursor: pointer; }
.view-switch button { height: 24px; min-width: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--on-chrome-faint); display: grid; place-items: center; cursor: pointer; padding: 0; }
.view-switch .lines { display: grid; min-width: 26px; color: var(--on-chrome); font: inherit; font-size: 14px; font-weight: 600; }   /* in both views since 2026-10-30 */
.view-switch .lines[disabled] { opacity: .35; cursor: default; }
.view-switch .factor { width: 36px; text-align: center; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }   /* "Z1": the factor, always, on a fixed width — "16×" and "1/4×" fit without moving the buttons (owner, 2026-10-30) */
.view-switch .hair { display: block; width: 1px; height: 14px; margin: 0 3px; background: color-mix(in srgb, var(--on-chrome-faint) 50%, transparent); }
.view-switch button[aria-pressed="true"] { background: radial-gradient(circle closest-side, var(--gold) calc(100% - 1px), transparent 100%); color: var(--logo-ink); box-shadow: none; }   /* the selection a YELLOW CIRCLE (owner, 2026-10-30, the app's) */
.view-switch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.view-switch svg circle { fill: currentColor; stroke: none; }
.as-split .listing { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--on-chrome-faint) 40%, transparent); }   /* MAP + LIST (owner, 2026-10-30): the lower half */
.as-split .quote { display: none; }
/* The LISTING over the map's band: rows on a neutral glass, each edged in its place's colour. */
.listing { position: fixed; left: 0; right: 0; top: 112px; z-index: 18; overflow-y: auto; background: var(--chrome); padding: 44px 16px 56px; }
.listing ul { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 8px; max-width: 720px; }
.listing button { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--place) 70%, transparent); background: color-mix(in srgb, black 35%, transparent); color: var(--on-chrome); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.listing button:hover { border-color: var(--place); }
.listing i { width: 10px; height: 10px; border-radius: 50%; background: var(--place); margin-top: 5px; }
.listing span { display: grid; min-width: 0; align-content: start; gap: 2px; align-self: stretch; }
.listing b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing b small { display: inline; font-weight: 400; }
.listing small { font-size: 11px; color: var(--on-chrome-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listing small s { margin-left: 6px; }
/* The FIRST LINE (owner, 2026-10-30): "N shown", then a chip per filter that hides some — its name, "−k", the red disc with a
   yellow × that lifts it; the chips scroll sideways on a narrow phone. The listing's button rule is for the rows, so the × is undone of it. */
.headline { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: 11px; color: var(--on-chrome); min-height: 24px; }
.headline b { flex: none; font-weight: 600; }
.headline b { display: inline-flex; align-items: center; gap: 4px; }
.headline b.to-list { cursor: pointer; }
.headline .count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--logo-ink); font-size: 8px; /* tiny */ font-weight: 700; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }   /* the shown NUMBER on the logo's gold disc (owner, 2026-10-30: red is the filters' remove) (owner, 2026-10-30) */
.map-headline { position: fixed; left: 50%; transform: translateX(-50%); z-index: 23; width: max-content; max-width: calc(100% - 24px); padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, black 68%, transparent); }   /* the first line over the map (2026-10-30) */
.map-headline[hidden] { display: none; }
.headline .narrow { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 8px; border-radius: 999px; background: color-mix(in srgb, black 35%, transparent); box-shadow: inset 0 0 0 1px var(--on-chrome-faint); }
.headline .narrow small { color: var(--on-chrome-faint); font-variant-numeric: tabular-nums; }
.headline button.lift { display: block; width: 14px; height: 14px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #9e3333; position: relative; cursor: pointer; }
.headline button.lift::before, .headline button.lift::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; border-radius: 1px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.headline button.lift::after { transform: translate(-50%, -50%) rotate(-45deg); }
.listing .nothing { display: grid; place-items: center; min-height: 60vh; }   /* nothing in the window: the grey disc with a cross (owner, 2026-10-30) */
.listing .nothing .cross { width: 56px; height: 56px; border-radius: 50%; background: #b9b3c0; position: relative; margin: 0; }
.listing .nothing .cross::before, .listing .nothing .cross::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 3px; border-radius: 2px; background: var(--surface); transform: translate(-50%, -50%) rotate(45deg); }
.listing .nothing .cross::after { transform: translate(-50%, -50%) rotate(-45deg); }
.listing strong { color: var(--accent); font-size: 14px; }
/* The row's ZOOM (owner, 2026-10-30): one line is the name · the type and the price; two put the time to start as HH:MM:ss
   under the price, the seconds at half size; four add the address, "starts in …" and the cancellation type on a ring;
   eight a sentence, the rank.tips miniature under the right column and Book · Call at the foot. */
body.as-list .quote { display: none; }   /* the quote stands on the map; in LIST the rows take its band (2026-10-30: at eight lines it covered the second row) */
.listing button[data-lines="1"] { align-items: center; }
.listing button[data-lines="1"] i { margin-top: 0; }
.listing .right { display: grid; justify-items: end; align-content: start; gap: 4px; }
.listing .countdown { display: block; white-space: nowrap; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--on-chrome); }
.listing .countdown small { font-size: 7px; /* half */ font-weight: 600; color: var(--on-chrome); font-variant-numeric: tabular-nums; }
.listing .ring { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--on-chrome-faint); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.listing .sentence { white-space: normal; color: var(--on-chrome); margin-top: 2px; }
.listing button[data-lines="8"] { grid-template-rows: 1fr auto; }   /* the actions' line at the row's foot */
.listing .actions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 14px; padding-top: 8px; }   /* Book · star · i · phone, centred across the row (owner, 2026-10-30) */
.listing .actions > * { position: relative; cursor: pointer; width: 39px; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--on-chrome-faint); display: grid; place-items: center; color: var(--on-chrome); }
.listing .actions .book { background: var(--accent); color: var(--logo-ink); box-shadow: none; }
.listing .actions .star { font-size: 14px; line-height: 1; cursor: pointer; }
.listing .actions .star.on { color: var(--loyal-light); }
.listing .actions svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.listing .actions svg .dot { fill: currentColor; stroke: none; }
.listing .actions .off { opacity: .4; cursor: default; }   /* an action this offer cannot take: greyed and crossed out, still in its place */
.listing .actions .off::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 1.5px; border-radius: 1px; background: var(--on-chrome); transform: rotate(-32deg); }
.listing .info-box { white-space: pre-line; overflow: visible; color: var(--on-chrome); padding-top: 4px; }
.listing .info-box[hidden] { display: none; }
.listing .mini { width: 56px; height: 56px; margin-top: 2px; }
.listing .mini .grid { fill: none; stroke: color-mix(in srgb, var(--on-chrome-faint) 60%, transparent); stroke-width: 1; }
.listing .mini .web { fill: color-mix(in srgb, var(--link) 22%, transparent); stroke: var(--link); stroke-width: 1.5; }
.listing .mini .dot { stroke: none; }
.as-list .arrows, .as-list .links { display: none; }

/* The SELECTED business on the map (owner, 2026-10-30): the listing's eight-line row on the list's ground over the band's lower half. */
.listing.picked { top: auto; z-index: 24; overflow: visible; background: none; padding: 0 16px; pointer-events: none; }
body.has-picked .quote { display: none; }
.listing.picked ul { padding: 6px; border-radius: 16px; background: var(--chrome); pointer-events: auto; animation: picked-in .04s cubic-bezier(.2, .9, .3, 1.1); transform-origin: 50% 100%; }
@keyframes picked-in { from { opacity: 0; transform: scale(.08); } to { opacity: 1; transform: none; } }   /* grown out of its BOTTOM CENTRE (the card stands at the band's foot again, owner 2026-10-31 evening), eight times faster than the .32 s it took from the bottom-right corner */
@media (prefers-reduced-motion: reduce) { .listing.picked ul { animation: none; } }

/* THE FOCUS (owner, 2026-10-31, the app's): the picked offer's pin is the slev.me LOGO, breathing, a gold ring leaving it; a
   dashed gold line runs from the card at the top centre to it (site.js `drawFocusLink`). */
.links { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 16; overflow: visible; }
.links .focus-link { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.7)); }
.links .focus-knot { fill: var(--gold); }
.pin.focus { z-index: 4; }
.pin.focus .label, .pin.focus .pulse { display: none; }
.pin .focus-logo { display: none; }
.pin.focus .focus-logo { display: block; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.pin.focus .focus-logo img { position: relative; display: block; width: 100%; height: 100%; border-radius: 7px; box-shadow: 0 2px 6px rgba(0,0,0,.5); animation: focus-breath 1s ease-in-out infinite alternate; }
.pin.focus .focus-logo .ring { position: absolute; inset: 0; margin: 0; width: auto; height: auto; border: 2.5px solid var(--gold); border-radius: 50%; opacity: 0; animation: focus-ring 1s ease-out infinite; }
@keyframes focus-breath { from { transform: scale(.94); } to { transform: scale(1.12); } }
@keyframes focus-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pin.focus .focus-logo img, .pin.focus .focus-logo .ring { animation: none; } }
.listing .sentence.lock { color: var(--on-chrome-faint); cursor: pointer; }
.listing .sentence.lock b { color: var(--gold); font-weight: 600; }

/* THE INTRO (owner, 2026-10-31: "on coming to webpage display the logo and one animation cycle"): over everything, the logo
   large and the word under it; the logo makes ONE of its swaps — globe and clock about the bar, held, and back (the header's
   own move, 12 s apart there) — then the intro fades and stays gone. CSS only: nothing to store, nothing to click. */
.intro { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--chrome); color: var(--on-chrome); pointer-events: none; animation: intro-out .5s ease 2.6s forwards; }
.intro .brand-mark { width: 120px; height: 120px; perspective: 560px; animation: intro-swap 2.4s cubic-bezier(.65, 0, .35, 1) 1 forwards; }
.intro .brand-mark .face { animation: none; }
.intro .word { font-weight: 500; font-size: 42px; /* glyph — the intro's word, twice the brand */ letter-spacing: .5px; }
.intro .word .dot { color: var(--gold); }
@keyframes intro-swap { 0%, 18% { --logo-swap: 0deg; } 42%, 58% { --logo-swap: 180deg; } 82%, 100% { --logo-swap: 360deg; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro { animation-delay: .9s; } .intro .brand-mark { animation: none; } }

/* The LOCATE disc at the bottom CENTRE of the map, above the panel (owner, 2026-10-31: "location position in the bottom
   center is not shown" — the app's LocateDisc): `left: 50%` on the rule above; the quote is lifted over it (site.js). The
   focus card's × over its top-right corner, on the chrome (owner, the same evening: "add cross button on detail to close"). */
#picked .picked-close { position: absolute; left: auto; bottom: auto; min-height: 0; display: grid; place-items: center; z-index: 2; right: 22px; top: -16px; width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer; pointer-events: auto;
  font: 700 18px/1 var(--font); /* glyph */ color: var(--on-chrome); background: var(--chrome); border: 1px solid color-mix(in srgb, var(--on-chrome-faint) 60%, transparent); }
#picked .picked-close:hover { background: var(--primary); }
#picked .picked-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* WHERE YOU ARE as the locate ARROW in the location ruler (owner, 2026-10-31: "instead of 'Vy' use again the arrow"), in the
   logo's gold; chosen, the gold outline of every chosen chip. */
.wants button.here { display: grid; place-items: center; color: var(--gold); }
.wants button.here svg { width: 16px; height: 16px; fill: currentColor; }
.when-grid .cell.locked .when-btn { color: var(--on-chrome-faint); }   /* a window the app unlocks (owner, 2026-10-31): only "within 2 hours" without it */