/* One border value for the dark theme (owner 2026-09-28): 22 percent white on every screen, 35 on
   iOS, where the same line reads fainter ("more in iphone safari"). Every border on the site reads
   var(--bv-line) (or --bv-line-solid where a solid grey is needed), so this is the one place to move it. */
:root { --bv-line: rgba(255,255,255,0.15); --bv-line-solid: #35354f; --bv-lift: 0 1px 3px rgba(255,255,255,0.06); }
/* One value on every device (owner 2026-09-28): the stronger iPhone line of 2026-09-27 answered a Safari extension (Noir) darkening the page, not the phone. */
/* ============================================================
   BOOKVELT — Bookvelt design-system primitives
   Single source of truth for BUTTONS and PILLS site-wide.
   Vertical-alignment quirks (Inter vs FA icon metrics) solved
   ONCE here so consumers just slap on .bookvelt-btn / .bookvelt-pill +
   a colour modifier. No padding tweaking elsewhere.
   ============================================================ */

/* ============================================================
   .bookvelt-btn — canonical button
   Usage:
     <a class="bookvelt-btn bookvelt-btn-primary">Action</a>
     <button class="bookvelt-btn bookvelt-btn-ghost bookvelt-btn-sm">Cancel</button>
     <a class="bookvelt-btn bookvelt-btn-secondary bookvelt-btn-block">Full-width</a>
   ============================================================ */
.bookvelt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font-family: var(--font-condensed, 'Roboto Condensed'), 'Roboto', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  white-space: nowrap;
  flex-wrap: nowrap;
  user-select: none;
  box-sizing: border-box;
}
/* Defensive: every direct child stays on the single inline line, perfectly
   centered. Prevents any cascading rule from stacking the icon above the
   text on mobile or in narrow contexts. */
.bookvelt-btn > * {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.bookvelt-btn:hover { transform: translateY(-1px); }
.bookvelt-btn:active { transform: translateY(0); }

.bookvelt-btn:disabled,
.bookvelt-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.bookvelt-btn > i,
.bookvelt-btn > .fa-solid,
.bookvelt-btn > .fa-regular,
.bookvelt-btn > .fa-brands {
  font-size: 0.95em;
  line-height: 1;
}

/* — Sizes (height-driven for reliable centering) — */
.bookvelt-btn-xs { height: 26px; padding: 0 10px; font-size: 0.65rem; gap: 5px;  border-radius: 7px;  }
.bookvelt-btn-sm { height: 32px; padding: 0 14px; font-size: 0.72rem; gap: 6px; border-radius: 8px;  }
.bookvelt-btn-lg { height: 46px; padding: 0 24px; font-size: 0.95rem; gap: 10px; border-radius: 12px; }
.bookvelt-btn-xl { height: 56px; padding: 0 32px; font-size: 1.05rem; gap: 12px; border-radius: 14px; }
.bookvelt-btn-block { display: flex; width: 100%; }

/* — Solid variants — */
.bookvelt-btn-primary   { background: var(--brand-blue, #4aa1d9);   color: #fff; }
.bookvelt-btn-primary:hover   { background: #5db3ed; box-shadow: 0 6px 16px rgba(74,161,217,0.3); }

.bookvelt-btn-secondary { background: var(--brand-orange, #f39220); color: #fff; }
.bookvelt-btn-secondary:hover { background: #ffa843; box-shadow: 0 6px 16px rgba(243,146,32,0.3); }

.bookvelt-btn-success   { background: #22c55e; color: #fff; }
.bookvelt-btn-success:hover   { background: #34d770; box-shadow: 0 6px 16px rgba(34,197,94,0.3); }

.bookvelt-btn-danger    { background: #ef4444; color: #fff; }
.bookvelt-btn-danger:hover    { background: #f55757; box-shadow: 0 6px 16px rgba(239,68,68,0.3); }

.bookvelt-btn-warning   { background: #eab308; color: #1a1a1a; }
.bookvelt-btn-warning:hover   { background: #fbbf24; box-shadow: 0 6px 16px rgba(234,179,8,0.3); }

.bookvelt-btn-dark      { background: #1a1a2e; color: #fff; border-color: var(--bv-line); }
.bookvelt-btn-dark:hover      { background: #24243e; border-color: rgba(255,255,255,0.2); }

/* — Outline / ghost — */
.bookvelt-btn-ghost {
  background: transparent;
  color: var(--text, #fff);
  border-color: var(--bv-line);
}
.bookvelt-btn-ghost:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.25);
}

.bookvelt-btn-outline-primary { background: transparent; color: var(--brand-blue, #4aa1d9); border-color: var(--brand-blue, #4aa1d9); }
.bookvelt-btn-outline-primary:hover { background: var(--brand-blue, #4aa1d9); color: #fff; }

.bookvelt-btn-outline-secondary { background: transparent; color: var(--brand-orange, #f39220); border-color: var(--brand-orange, #f39220); }
.bookvelt-btn-outline-secondary:hover { background: var(--brand-orange, #f39220); color: #fff; }

.bookvelt-btn-outline-danger { background: transparent; color: #ef4444; border-color: #ef4444; }
.bookvelt-btn-outline-danger:hover { background: #ef4444; color: #fff; }

/* — Link / text — */
.bookvelt-btn-link {
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--brand-blue, #4aa1d9);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}
.bookvelt-btn-link:hover { text-decoration: underline; transform: none; }


/* ============================================================
   .bookvelt-pill — canonical pill
   Usage:
     <span class="bookvelt-pill"><i class="fa-solid fa-tv"></i> 6 TVs</span>
     <span class="bookvelt-pill bookvelt-pill-blue">Premier League</span>
     <span class="bookvelt-pill bookvelt-pill-red bookvelt-pill-live">LIVE</span>
     <span class="bookvelt-pill bookvelt-pill-sm bookvelt-pill-green">Open</span>
   ============================================================ */
.bookvelt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-family: var(--font-condensed, 'Roboto Condensed'), 'Roboto', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bv-line);
  color: #b8bfcc;
  box-sizing: border-box;
}
.bookvelt-pill > i,
.bookvelt-pill > strong,
.bookvelt-pill > .pill-label,
.bookvelt-pill > span,
.bookvelt-pill > span > strong { font-size: 12px; line-height: 1; }
/* Number wrapped in <strong> — bright white + bold; icon also bright white;
   only the label text stays dimmer for visual hierarchy. */
.bookvelt-pill > i,
.bookvelt-pill > strong,
.bookvelt-pill > span > strong { color: #fff; }
.bookvelt-pill > strong,
.bookvelt-pill > span > strong { font-weight: 800; }
.bookvelt-pill > .pill-label {
  font-style: normal;
  letter-spacing: 0.06em;
  transition: max-width 0.25s ease, opacity 0.2s ease, margin-left 0.2s ease;
}

/* Mobile: collapse pill to icon + number only. Tap (or focus) re-expands
   the pill with the label visible. Uses actual layout growth (max-width on
   the label) so neighbors reflow rather than getting overlapped. */
@media (max-width: 600px) {
  .bookvelt-pill > .pill-label {
    max-width: 0;
    opacity: 0;
    margin-left: -4px;  /* swallow the gap when collapsed */
    overflow: hidden;
    white-space: nowrap;
  }
  .bookvelt-pill:hover,
  .bookvelt-pill:focus,
  .bookvelt-pill:focus-within,
  .bookvelt-pill.is-expanded {
    background: rgba(74,161,217,0.16);
    border-color: rgba(74,161,217,0.4);
  }
  .bookvelt-pill:hover > .pill-label,
  .bookvelt-pill:focus > .pill-label,
  .bookvelt-pill:focus-within > .pill-label,
  .bookvelt-pill.is-expanded > .pill-label {
    max-width: 80px;
    opacity: 1;
    margin-left: 0;
  }
}

.bookvelt-pill > i,
.bookvelt-pill > .fa-solid,
.bookvelt-pill > .fa-regular,
.bookvelt-pill > .fa-brands {
  font-size: 12px;
  line-height: 1;
}

/* All children sit on the same flex centerline. Roboto Condensed metrics
   match FA icon em-box well enough that no per-pixel nudges are needed. */
.bookvelt-pill > i,
.bookvelt-pill > strong,
.bookvelt-pill > em,
.bookvelt-pill > span,
.bookvelt-btn > i,
.bookvelt-btn > strong,
.bookvelt-btn > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-style: normal;
}
/* FA icons match text size exactly (1em = current font-size). Override
   the inline `style="font-size: 14px"` that bookveltIcon emits. */
.bookvelt-pill > i,
.bookvelt-btn > i { font-size: 1em !important; }

/* — Sizes (height-driven, identical centering technique) — */
.bookvelt-pill-xs { height: 20px; padding: 0 8px;  font-size: 0.58rem; gap: 4px; }
.bookvelt-pill-xs > i { font-size: 10px; }
.bookvelt-pill-sm { height: 24px; padding: 0 10px; font-size: 0.65rem; gap: 5px; }
.bookvelt-pill-sm > i { font-size: 11px; }
.bookvelt-pill-lg { height: 34px; padding: 0 16px; font-size: 0.78rem; gap: 8px; }
.bookvelt-pill-lg > i { font-size: 14px; }
.bookvelt-pill-xl { height: 40px; padding: 0 20px; font-size: 0.88rem; gap: 10px; }
.bookvelt-pill-xl > i { font-size: 16px; }

/* — Soft / outline-coloured variants — */
.bookvelt-pill-blue   { background: rgba(74,161,217,0.15); border-color: rgba(74,161,217,0.3); color: #4aa1d9; }
.bookvelt-pill-orange { background: rgba(243,146,32,0.15); border-color: rgba(243,146,32,0.3); color: #f39220; }
.bookvelt-pill-green  { background: rgba(34,197,94,0.15);  border-color: rgba(34,197,94,0.3);  color: #22c55e; }
.bookvelt-pill-red    { background: rgba(239,68,68,0.15);  border-color: rgba(239,68,68,0.3);  color: #ef4444; }
.bookvelt-pill-yellow { background: rgba(234,179,8,0.15);  border-color: rgba(234,179,8,0.3);  color: #eab308; }
.bookvelt-pill-purple { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.3); color: #a855f7; }
.bookvelt-pill-gray   { background: rgba(255,255,255,0.04); border-color: var(--bv-line); color: var(--text-muted, rgba(255,255,255,0.6)); }

/* — Solid filled variants — */
.bookvelt-pill-solid                   { border-color: transparent; color: #fff; }
.bookvelt-pill-solid.bookvelt-pill-blue     { background: var(--brand-blue, #4aa1d9); }
.bookvelt-pill-solid.bookvelt-pill-orange   { background: var(--brand-orange, #f39220); }
.bookvelt-pill-solid.bookvelt-pill-green    { background: #22c55e; }
.bookvelt-pill-solid.bookvelt-pill-red      { background: #ef4444; }
.bookvelt-pill-solid.bookvelt-pill-yellow   { background: #eab308; color: #1a1a1a; }
.bookvelt-pill-solid.bookvelt-pill-purple   { background: #a855f7; }
.bookvelt-pill-solid.bookvelt-pill-gray     { background: rgba(255,255,255,0.12); color: var(--text, #fff); }

/* — LIVE pulsing dot — */
.bookvelt-pill-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: bookvelt-pill-pulse 1.6s ease-in-out infinite;
}

@keyframes bookvelt-pill-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .bookvelt-btn { transition: none; }
  .bookvelt-pill-live::before { animation: none; }
}


/* ── Date picker ──────────────────────────────────────────────────────
   Was in frontpage.css, used only by the public calendar and results
   pages. The panel planner needed the same picker and got a native
   <input type="date"> instead, which looked nothing like it (owner
   2026-09-01: "too poor. why not bringing the one from calendar page").
   Moved here, which both layouts load, so there is ONE picker. */
.calendar-popup {
  display: none;
  position: fixed;
  z-index: 1000;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  min-width: 280px;
  animation: fadeInUp 0.2s ease;
}

.calendar-popup.open { display: block; }

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calendar-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.calendar-nav {
  display: flex;
  gap: 8px;
}

.calendar-nav button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-secondary);
  font-size: 0.8rem;
  transition: all var(--transition);
}

.calendar-nav button:hover {
  color: var(--text);
  border-color: var(--accent);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.calendar-dow {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0;
  text-transform: uppercase;
}

.calendar-day {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  margin: 0 auto;
}

.calendar-day:hover {
  background: var(--bg-glass);
  color: var(--text);
}

.calendar-day.today {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 700;
}

.calendar-day.selected {
  background: var(--accent);
  color: #000;
  font-weight: 700;
}

.calendar-day.other-month {
  color: var(--text-muted);
  opacity: 0.4;
}


/* ── Date ribbon ──────────────────────────────────────────────────────
   The strip of day tiles from the public calendar page. The panel planner
   had its own `af-ribbon-*` version that looked nothing like it and could
   not reach past four weeks. One ribbon now, used by both. */
.date-ribbon {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  user-select: none;
  position: relative;
}

/* TODAY pill — fixed at left of ribbon */
.date-ribbon-today {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 64px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: rgba(102,179,46,0.1);
  border: 1px solid #66b32e;
  color: #fff;
  cursor: pointer;
  transition: all var(--transition);
}
.drt-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #66b32e;
}
.drt-day {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}
.drt-month {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #66b32e;
}
@media (hover: hover) {
  .date-ribbon-today:hover {
    background: rgba(102,179,46,0.25);
    box-shadow: 0 0 12px rgba(102,179,46,0.3);
  }
}
.date-ribbon-today:active {
  transform: scale(0.95);
}

.date-ribbon-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(74,161,217,0.08);
  border: 1px solid rgba(74,161,217,0.15);
  color: var(--brand-blue);
  transition: all var(--transition);
  font-size: 1rem;
  cursor: pointer;
}

.date-ribbon-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.date-ribbon-arrow svg {
  width: 18px;
  height: 18px;
  stroke: var(--brand-blue);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .date-ribbon-arrow:hover {
    background: var(--brand-blue-dim);
    border-color: var(--brand-blue);
  }
}
.date-ribbon-arrow:active {
  transform: scale(0.93);
  background: var(--brand-blue-dim);
}

.date-ribbon-scroll {
  position: relative;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
  padding: 4px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(135deg, rgba(74,161,217,0.05) 0%, rgba(15,15,25,0.6) 50%, rgba(243,147,34,0.03) 100%);
  border: 1px solid rgba(74,161,217,0.1);
  border-radius: var(--radius-sm);
}

.date-ribbon-scroll.dragging {
  cursor: grabbing;
}

.date-ribbon-scroll::-webkit-scrollbar { display: none; }

.date-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--bv-line);
  cursor: pointer;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 64px;
  width: 64px;
  height: 72px;
  justify-content: center;
}

.date-item-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.date-item-day {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.2;
}

.date-item-month {
  font-size: 0.55rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (hover: hover) {
  .date-item:hover {
    background: var(--bg-glass-hover);
    border-color: var(--bv-line);
  }
}
.date-item:active {
  transform: scale(0.93);
}

/* Selected day - solid blue border, blue tinted bg */
.date-item.active {
  background: var(--brand-blue-dim);
  border-color: var(--brand-blue);
  box-shadow: 0 0 16px rgba(74,161,217,0.3), 0 0 4px rgba(74,161,217,0.15);
  z-index: 2;
  position: relative;
}

.date-item.active .date-item-label { color: var(--brand-blue); }
.date-item.active .date-item-day { color: #fff; }
.date-item.active .date-item-month { color: var(--brand-blue); }

/* Today marker when not selected */
.date-item.today:not(.active) .date-item-label {
  color: var(--brand-blue);
  font-weight: 700;
}
.date-item.today:not(.active) {
  border-color: rgba(74,161,217,0.3);
}

/* Owner rule 2026-09-27, restated in anger: inside a chip, a pill or a button the
   icon is the SAME size as the text, and the padding is the SAME on all four
   sides. The icon helper writes its size inline, so the pill overrides it. */
.bookvelt-pill { height: auto; padding: 8px; gap: 6px; }
.bookvelt-pill > i, .bookvelt-pill > span > i { font-size: 12px !important; width: 12px; height: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }

/* Same optical centring for every uppercase site button and pill (owner 2026-09-27). */
.bookvelt-btn > span { transform: translateY(0.08em); }
.bookvelt-pill > strong, .bookvelt-pill > .pill-label, .bookvelt-pill > span > strong { transform: translateY(0.08em); }

/* Owner 2026-09-27, second round (icons are bigger now): an icon at the text's
   font size draws the whole em, while uppercase text draws only its cap height,
   so the icon looks bigger. The glyph is sized to the CAP height: 0.78em of the
   text. And every site button gets the same padding on all four sides. */
.bookvelt-pill > i, .bookvelt-pill > span > i { font-size: 9.5px !important; width: 12px; height: 12px; }
.bookvelt-btn { height: auto; padding: 10px; }
.bookvelt-btn-sm { height: auto; padding: 8px; }
.bookvelt-btn > i, .bookvelt-btn > span > i { font-size: 0.78em !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; }

/* Font Awesome glyphs sit a little above the middle of their em box: with the
   text nudged onto its ink centre, the icon has to come down too, or it reads
   higher than the capitals (owner 2026-09-27). */
.bookvelt-btn > i, .bookvelt-btn > span > i { transform: translateY(0.12em); }
.bookvelt-pill > i, .bookvelt-pill > span > i { transform: translateY(0.1em); }

/* Pixel-measured at 4x (2026-09-27): the values below put the ink of the text and
   of the glyph in the middle of the box. The glyph is 0.9em because a Font Awesome
   glyph draws about three quarters of its em, so 0.9em reads as the cap height. */
.bookvelt-btn > span { transform: translateY(0.05em); }
.bookvelt-btn > i, .bookvelt-btn > span > i { font-size: 0.9em !important; transform: translateY(0); }
/* Fifth measurement (owner 2026-09-27, zoomed): the ticket glyph draws only three
   quarters of its em, so at 0.9em it was 7.75px tall beside 8.25px capitals and sat
   a quarter to three quarters of a pixel low. 0.95em draws it at the cap height and
   -0.04em lifts its centre onto the text's. */
.bookvelt-btn > i, .bookvelt-btn > span > i { font-size: 0.95em !important; transform: translateY(0.05em); }
/* A glyph that fills its em (circle-info, circle-check, the round ones) is drawn at
   the cap height, 0.78em; the ticket draws three quarters of its em and needs 0.95em
   to reach the same height. Measured at 4x, six buttons, 2026-09-27. */
.bookvelt-btn > i.fa-circle-info, .bookvelt-btn > i.fa-circle-check, .bookvelt-btn > i.fa-circle-xmark, .bookvelt-btn > i.fa-circle-plus, .bookvelt-btn > i.fa-circle-question { transform: translateY(-0.005em) scale(0.84); }
.bookvelt-pill > strong, .bookvelt-pill > .pill-label, .bookvelt-pill > span > strong { transform: translateY(0.02em); }
.bookvelt-pill > i, .bookvelt-pill > span > i { font-size: 10.5px !important; transform: translateY(-0.08em); }

/* Third round, measured again at 4x (owner 2026-09-27, "text is aligned but the
   icon is too up"): at 10.5px the glyph ink was 9.75px tall against 8.5px capitals
   and its centre sat 0.4 to 0.75px above the text's. 9.5px draws the ink at the
   cap height and -0.055em puts its centre on the text's, within a quarter pixel. */
.bookvelt-pill > i, .bookvelt-pill > span > i { font-size: 9.5px !important; transform: translateY(-0.055em); }

/* The icon follows the TEXT size, never a fixed pixel: the phone venue rows set the
   pill to 10px and a fixed 9.5px icon came out bigger and higher than the number
   (owner 2026-09-27, "align the icon with text in the middle of the button").
   0.79em is 9.5px beside 12px capitals and 7.9px beside 10px ones. */
.bookvelt-pill > i, .bookvelt-pill > span > i { font-size: 0.79em !important; width: 1em; height: 1em; transform: translateY(0.04em); }
.fixture-opener .bookvelt-pill > i, .fixture-opener .bookvelt-pill > span > i { font-size: 0.79em !important; }
/* Measured at 4x with the icon in a 1em box: the glyph ink sat 0.9px above the
   capitals' centre at 12px, so +0.04em; in the phone venue rows (22px pill, 10px
   text) it sat 1.5px above, so +0.135em there. */
@media (max-width: 600px) {
  /* Same computed style, but at phone width the glyph lands 1px lower than at
     desktop width (measured at 4x on both), so the phone gets its own number. */
  .bookvelt-pill > i, .bookvelt-pill > span > i { transform: translateY(-0.045em); }
  /* The phone venue rows set the PILL to 10px but the number stays 12px (the
     `> strong` rule), so the icon is sized from the number, not the pill:
     0.79 x 12px = 9.5px (owner 2026-09-27, zoomed in: "icons stay smaller than text"). */
  .fixture-opener .bookvelt-pill > i, .fixture-opener .bookvelt-pill > span > i { font-size: 9.5px !important; transform: translateY(0.055em); }
  .fixture-opener .bookvelt-pill > i.fa-chair, .fixture-opener .bookvelt-pill > span > i.fa-chair { transform: translateY(0.055em) scale(0.92); }
}

/* No iOS-only lift. Two rounds of it (2026-09-27) were set from screenshots and both overshot by about a
   pixel: measured on the owner's iPhone, the venue row pills read 0.65 to 1.2 px low and the Reserve button
   icon 1.15 px low, which is the lift itself. WebKit places these glyphs where Chrome does; the Chrome
   values above are the values. */

/* Borders on every object (owner 2026-09-27): a button of any colour carries a light edge. */
.bookvelt-btn { border: 1px solid var(--bv-line); }