/* Dprod Presenter Ingest - component styles.
   Colours come from the theme's custom properties where it defines them. */
.pi {
  --pi-bg: var(--bg, #f6f7f9);
  --pi-surface: var(--surface, #fff);
  --pi-text: var(--text, #14171f);
  --pi-muted: var(--muted, #5d6575);
  --pi-border: var(--border, #dde1e8);
  --pi-accent: var(--accent, #e5402a);
  --pi-accent-text: var(--accent-text, #fff);
  --pi-radius: var(--radius, 12px);
  --pi-success: #1f9d55;
  --pi-success-bg: #e3f6eb;
  --pi-info: #1f6fd1;
  --pi-info-bg: #e5effb;
  --pi-warning: #a86400;
  --pi-warning-bg: #fff3dc;
  --pi-danger: #c62828;
  --pi-danger-bg: #fde7e7;
  --pi-neutral: #5d6575;
  --pi-neutral-bg: #eceef2;
  color: var(--pi-text);
}

.pi h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pi h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.pi h3 { font-size: 1rem; margin: 0 0 .75rem; }
.pi-muted { color: var(--pi-muted); }
.pi-small { font-size: .875rem; }
.pi-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.pi-crumb { margin: 0 0 1rem; font-size: .9rem; }
.pi-crumb a { color: var(--pi-muted); text-decoration: none; }
.pi-crumb a:hover { color: var(--pi-text); }

.pi-pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.pi-pagehead p { margin: 0; }
.pi-section { margin-top: 2.5rem; scroll-margin-top: 5rem; }

/* buttons */
.pi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1rem; border-radius: 8px; border: 1px solid var(--pi-border);
  background: var(--pi-surface); color: var(--pi-text); font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 1.2;
}
.pi-btn:hover { border-color: var(--pi-muted); }
.pi-btn:disabled { opacity: .6; cursor: default; }
.pi-btn--primary { background: var(--pi-accent); border-color: var(--pi-accent); color: var(--pi-accent-text); }
.pi-btn--primary:hover { filter: brightness(1.08); border-color: var(--pi-accent); }
.pi-btn--ghost { background: transparent; }
.pi-btn--sm { padding: .4rem .7rem; font-size: .85rem; }
.pi-btn--lg { padding: .85rem 1.5rem; font-size: 1.05rem; }
.pi-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.pi-actions form { margin: 0; }

/* badges */
.pi-badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.pi-badge--success { background: var(--pi-success-bg); color: var(--pi-success); }
.pi-badge--info { background: var(--pi-info-bg); color: var(--pi-info); }
.pi-badge--warning { background: var(--pi-warning-bg); color: var(--pi-warning); }
.pi-badge--neutral { background: var(--pi-neutral-bg); color: var(--pi-neutral); }

/* cards */
.pi-card { background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); padding: 1.25rem; }
.pi-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.pi-booking-card { padding: 0; }
.pi-card__link { display: block; padding: 1.25rem; color: inherit; text-decoration: none; height: 100%; box-sizing: border-box; }
.pi-booking-card:hover { border-color: var(--pi-muted); }
.pi-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.pi-card__title { font-size: 1.1rem !important; margin: 0 0 .75rem !important; overflow-wrap: anywhere; }
.pi-card__cta { display: block; margin-top: 1rem; font-weight: 600; color: var(--pi-accent); }
.pi-facts { margin: 0; display: grid; gap: .35rem; }
.pi-facts div { display: flex; gap: .75rem; }
.pi-facts dt { width: 6.5rem; flex: none; color: var(--pi-muted); }
.pi-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.pi-empty { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--pi-border); border-radius: var(--pi-radius); }
.pi-empty p { color: var(--pi-muted); max-width: 34rem; margin: .5rem auto 0; }

.pi-callout { border-radius: var(--pi-radius); padding: 1rem 1.25rem; background: var(--pi-neutral-bg); margin-bottom: 1.5rem; }
.pi-callout p { margin: .25rem 0; }
.pi-callout h2 { margin-bottom: .25rem; }
.pi-callout--warning { background: var(--pi-warning-bg); }
.pi-callout--info { background: var(--pi-info-bg); }

/* forms */
.pi-form { margin: 0; }
.pi-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; min-width: 0; }
.pi-field > span, .pi-field__label { font-weight: 600; font-size: .9rem; }
.pi input[type=text], .pi input[type=url], .pi input[type=date], .pi input[type=email], .pi select {
  width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid var(--pi-border); border-radius: 8px;
  background: var(--pi-surface); color: var(--pi-text); font: inherit; font-size: .95rem; min-width: 0;
}
.pi input:focus, .pi select:focus { outline: 2px solid var(--pi-accent); outline-offset: 1px; border-color: transparent; }
.pi input[readonly] { background: var(--pi-bg); }
.pi-grid2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pi-total output { font-size: 1.6rem; font-weight: 700; line-height: 1.6; }

.pi-tiers { border: 0; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pi-tiers legend { font-weight: 600; margin-bottom: .75rem; padding: 0; }
.pi-tier { position: relative; display: block; cursor: pointer; }
.pi-tier input { position: absolute; opacity: 0; inset: 0; }
.pi-tier__body { display: flex; flex-direction: column; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 1rem; border: 2px solid var(--pi-border); border-radius: var(--pi-radius); background: var(--pi-surface); }
.pi-tier input:checked + .pi-tier__body { border-color: var(--pi-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pi-accent) 18%, transparent); }
.pi-tier input:focus-visible + .pi-tier__body { outline: 2px solid var(--pi-accent); outline-offset: 2px; }
.pi-tier__seats { font-size: 2rem; font-weight: 800; line-height: 1; }
.pi-tier__unit { color: var(--pi-muted); font-size: .85rem; }
.pi-tier__label { font-weight: 600; margin-top: .5rem; }
.pi-tier__price { margin-top: auto; padding-top: .75rem; font-weight: 700; color: var(--pi-text); }
.pi-tier__price small { font-weight: 400; color: var(--pi-muted); }
.pi-tier--contact { cursor: default; }
.pi-tier--contact .pi-tier__body { border-style: dashed; }
.pi-tier--contact a.pi-tier__price { color: var(--pi-accent); }

/* live control */
.pi-control { display: grid; gap: 1rem 1.25rem; align-items: start; }
@media (min-width: 900px) { .pi-control { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pi-control__col { display: grid; gap: 1rem; min-width: 0; }
.pi-control__heading { margin: 0 0 -.4rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pi-muted); }
.pi-feedback { font-size: .9rem; }
.pi-feedback--ok { color: var(--pi-success); }
.pi-feedback--fail { color: var(--pi-danger); }
.pi-presence__list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.pi-presence__row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 11rem) auto auto; gap: .5rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--pi-border); }
.pi-presence__row:last-child { border-bottom: 0; }
.pi-presence__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-presence__text { grid-column: 2 / 4; }
.pi .pi-presence__cue, .pi .pi-presence__text { padding: .35rem .5rem; font-size: .85rem; }
.pi-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--pi-border); flex: none; }
.pi-dot--on { background: var(--pi-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pi-success) 25%, transparent); }

/* seats */
.pi-seats { display: grid; gap: 1rem; }
.pi-seat { margin: 0; border: 1px solid var(--pi-border); border-radius: var(--pi-radius); background: var(--pi-surface); padding: 1rem 1.25rem .25rem; display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); scroll-margin-top: 5rem; }
.pi-seat legend { font-weight: 700; padding: 0 .35rem; }
.pi-seat:target { border-color: var(--pi-accent); }
.pi-seat__link { grid-column: 1 / -1; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.pi-copy { display: flex; flex-wrap: wrap; gap: .5rem; }
.pi-copy input { flex: 1 1 260px; }
.pi-switch { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; margin-bottom: 1rem; align-self: end; padding-bottom: .6rem; }
.pi-switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--pi-accent); }
.pi-sticky-save { position: sticky; bottom: 0; padding: .75rem 0; background: linear-gradient(to top, var(--pi-bg) 70%, transparent); }
.pi-help { margin-top: 1rem; }
.pi-help summary { cursor: pointer; font-weight: 600; }
.pi-help ul { color: var(--pi-muted); padding-left: 1.25rem; }

/* ------------------------------------------------------------ presenter (studio) page */
body.pi-studio {
  --bg: #0d1118;
  --surface: #161c27;
  --text: #eef1f6;
  --muted: #9aa3b2;
  --border: #283142;
  background: var(--bg);
  color: var(--text);
}
.pi-studio .pi { --pi-neutral-bg: #232b3a; --pi-neutral: #c3cad6; }
.pi-studio__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .75rem 1.25rem; border-bottom: 1px solid #283142; background: #111621; }
.pi-studio__event { display: flex; flex-direction: column; min-width: 0; }
.pi-studio__brand { font-size: .75rem; color: #9aa3b2; letter-spacing: .04em; text-transform: uppercase; }
.pi-studio__who { display: flex; align-items: center; gap: .6rem; }
.pi-studio__seat { background: #232b3a; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }

.pi-presenter { padding: 1rem; max-width: 1600px; margin: 0 auto; box-sizing: border-box; }
.pi-studio__signals { display: grid; gap: .5rem; margin-bottom: 1rem; }
.pi-studio__signals:not(:has(> :not([hidden]))) { margin-bottom: 0; }
.pi-signal { border-radius: 10px; padding: .85rem 1.1rem; font-weight: 700; font-size: 1.15rem; background: #232b3a; }
.pi-signal[hidden] { display: none; }
.pi-signal--cue { font-size: clamp(1.25rem, 3vw, 2rem); text-align: center; }
.pi-signal__until { font-weight: 400; }
.pi-tone--success { background: #14532d; color: #dcfce7; }
.pi-tone--info { background: #173d6e; color: #dbeafe; }
.pi-tone--warning { background: #7a4b00; color: #fff3d6; }
.pi-tone--danger { background: #8f1d1d; color: #ffe4e4; }
.pi-tone--neutral { background: #2b3445; color: #dfe4ec; }
.pi-signal--flash { animation: pi-flash 1.2s ease-out 2; }
@keyframes pi-flash { 0%, 100% { filter: none; } 40% { filter: brightness(1.6); } }
@media (prefers-reduced-motion: reduce) { .pi-signal--flash { animation: none; } }

.pi-studio__grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) {
  .pi-studio__grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (min-width: 1200px) {
  /* a Q&A sits in the side column, under the clicker: a little wider for it on bigger screens */
  .pi-studio__grid--qa { grid-template-columns: minmax(0, 1fr) 380px; }
}
.pi-studio__side { display: grid; gap: 1rem; align-content: start; }
.pi-panel { background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: var(--pi-radius); padding: 1rem; min-width: 0; }
.pi-panel__title { font-size: .8rem !important; text-transform: uppercase; letter-spacing: .06em; color: var(--pi-muted); margin: 0 0 .75rem !important; font-weight: 700; }
details.pi-panel > summary { cursor: pointer; margin-bottom: 0 !important; }
details.pi-panel[open] > summary { margin-bottom: .75rem !important; }
.pi-panel--help ul { margin: 0; padding-left: 1.1rem; color: var(--pi-muted); font-size: .9rem; }
.pi-panel--help li + li { margin-top: .35rem; }
.pi-panel--help a { color: var(--pi-text); }
.pi-call { position: relative; width: 100%; max-width: 100%; box-sizing: border-box; aspect-ratio: 16 / 10; min-height: 420px; border-radius: 8px; overflow: hidden; background: #000; }
.pi-call iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pi-panel__empty { padding: 3rem 1rem; text-align: center; color: var(--pi-muted); }
/* presenter page: waiting for the studio to add the connection */
.pi-waiting p + p { margin-top: .6rem; }
.pi-waiting__title { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.25rem; font-weight: 700; color: #eef1f6; }
.pi-waiting__dot { width: .7rem; height: .7rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: pi-waiting 1.8s ease-out infinite; }
@keyframes pi-waiting { 70% { box-shadow: 0 0 0 .7rem rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .pi-waiting__dot { animation: none; } }
.pi-panel--qa iframe { display: block; width: 100%; height: 560px; border: 0; border-radius: 8px; background: #fff; margin-bottom: .5rem; }
.pi-qa__away { padding: 1.5rem 1rem; }
.pi-qa__away .pi-btn { margin-top: .6rem; }
.pi-closed { max-width: 40rem; margin: 3rem auto; text-align: center; padding: 2.5rem 1.5rem; }
.pi-closed p { color: var(--pi-muted); }

/* the clicker's own panel (dprod-interspace-clicker inline mode) inside a panel */
.pi-panel--clicker .ic-clicker__panel { background: transparent; padding: 0; }
.pi-panel--clicker .ic-clicker__btn { background: #232b3a; }
.pi-panel--clicker .ic-clicker__btn:hover { background: #2d3749; }

@media (max-width: 600px) {
  .pi-presence__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pi-presence__cue { grid-column: 2 / 3; }
  .pi-presence__text { grid-column: 2 / 4; }
  .pi-call { min-height: 300px; aspect-ratio: 3 / 4; }
}

/* the studio page uses the full width; the panels bring their own spacing */
body.pi-studio .site-main { padding: 0; }
body.pi-studio .site-main > .wrap { max-width: none; padding: 0; }
@media (max-width: 600px) { .pi-presenter { padding: .75rem; } }

.pi-extend { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.pi-extend .pi-field { margin-bottom: 0; min-width: 10rem; }

/* billing + invoices */
.pi textarea { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); color: var(--pi-text); font: inherit; font-size: .95rem; resize: vertical; }
.pi textarea:focus { outline: 2px solid var(--pi-accent); outline-offset: 1px; border-color: transparent; }
.pi-billing { border: 1px solid var(--pi-border); border-radius: var(--pi-radius); padding: 1rem 1.25rem 0; margin: 0 0 1rem; background: var(--pi-surface); }
.pi-billing legend { font-weight: 600; padding: 0 .35rem; }
.pi-invoices { list-style: none; margin: 0 0 .75rem; padding: 0; border: 1px solid var(--pi-border); border-radius: var(--pi-radius); background: var(--pi-surface); }
.pi-invoices li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; padding: .7rem 1rem; border-bottom: 1px solid var(--pi-border); }
.pi-invoices li:last-child { border-bottom: 0; }
.pi-invoices li > :last-child { margin-left: auto; }
.pi-invoices a { color: var(--pi-accent); }
.pi-agree { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 1rem; font-size: .95rem; }
.pi-agree input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex: none; accent-color: var(--pi-accent); }
.pi-agree a { color: var(--pi-accent); }

/* ------------------------------------------------------------ device check (/p/<link>/check) */
.pi-dc { display: grid; gap: 1rem; }
.pi-dc h1 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); margin: 0 0 .35rem; }
.pi-dc-intro__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.pi-dc-intro__head p { margin: 0; max-width: 44rem; }
.pi-dc-intro__head .pi-actions { margin-top: 0; }
.pi-dc-summary { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; }
.pi-dc-summary li { display: grid; gap: .1rem; padding: .6rem .8rem; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-dc-well); }
.pi-dc-summary li span { font-size: .78rem; color: var(--pi-muted); }
.pi-dc-summary li b { font-weight: 650; }
.pi-dc-summary li.is-ok { border-color: var(--pi-dc-ok-line); background: var(--pi-dc-ok-bg); }
.pi-dc-summary li.is-ok b { color: var(--pi-dc-ok-text); }
.pi-dc-summary li.is-warn { border-color: var(--pi-dc-warn-line); background: var(--pi-dc-warn-bg); }
.pi-dc-summary li.is-warn b { color: var(--pi-dc-warn-text); }
.pi-dc-summary li.is-bad { border-color: var(--pi-dc-bad-line); background: var(--pi-dc-bad-bg); }
.pi-dc-summary li.is-bad b { color: var(--pi-dc-bad-text); }
.pi-dc-alert { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; padding: .75rem 1rem; border-radius: 8px; background: var(--pi-dc-bad-bg); border: 1px solid var(--pi-dc-bad-line); }
.pi-dc-alert a { color: inherit; }
.pi-dc-grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 980px) { .pi-dc-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.pi-dc-side { display: grid; gap: 1rem; }
.pi-dc-video { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.pi-dc-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.pi-dc-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 1.5rem; text-align: center; color: var(--pi-muted); }
.pi-dc-empty strong { color: var(--pi-text); font-size: 1.05rem; }
.pi-dc-empty .pi-dc-i { width: 2.2rem; height: 2.2rem; }
.pi-dc-empty[hidden] { display: none; }
.pi-dc-field { display: grid; gap: .3rem; margin: .9rem 0 0; font-size: .85rem; color: var(--pi-muted); }
.pi .pi-dc-field select { background: var(--pi-dc-well); }
.pi-panel__title + .pi-dc-field { margin-top: 0; }
.pi-dc-meter { position: relative; height: 14px; margin: .9rem 0 .4rem; border-radius: 999px; background: var(--pi-dc-well); border: 1px solid var(--pi-border); overflow: hidden; }
.pi-dc-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--pi-muted); transition: width .06s linear; }
.pi-dc-meter.is-good span { background: var(--pi-dc-go); }
.pi-dc-meter.is-hot span { background: var(--pi-dc-stop); }
.pi-dc-hint { margin: 0 0 .5rem; font-size: .9rem; }
.pi-dc-ask { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; font-weight: 600; }
.pi-dc-ask[hidden], .pi-dc-tips[hidden] { display: none; }
.pi-dc-tips { margin-top: .75rem; padding: .6rem .9rem; border-radius: 8px; background: var(--pi-dc-warn-bg); border: 1px solid var(--pi-dc-warn-line); font-size: .9rem; }
.pi-dc-tips p { margin: 0 0 .3rem; }
.pi-dc-tips ul, .pi-dc-tips ol { margin: 0; padding-left: 1.2rem; }
.pi-dc-tips li { margin: .3rem 0; }
.pi-dc-tips li ul { margin-top: .25rem; list-style: disc; }
.pi-dc-tips a { color: inherit; font-weight: 600; text-decoration: underline; }
.pi-dc-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.pi-dc-list li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.45; }
.pi-dc-list li .pi-dc-i { margin-top: .15rem; color: var(--pi-muted); }
.pi-dc-list li.is-ok .pi-dc-i { color: var(--pi-dc-go); }
.pi-dc-list li.is-warn .pi-dc-i { color: var(--pi-dc-caution); }
.pi-dc-list li.is-bad .pi-dc-i { color: var(--pi-dc-stop); }
.pi-dc-i { width: 1.1rem; height: 1.1rem; flex: none; vertical-align: -.2em; }
.pi-dc-alert .pi-dc-i { color: var(--pi-dc-bad-text); margin-top: .1rem; }
.pi-dc-blink { color: var(--pi-dc-stop); animation: pi-dc-blink 1s steps(2) infinite; }
@keyframes pi-dc-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .pi-dc-blink { animation: none; } }
.pi-studio .pi .pi-btn { background: #232b3a; border-color: #2f3a4f; color: var(--pi-text); }
.pi-studio .pi .pi-btn:hover { border-color: #4a5874; }
.pi-studio .pi .pi-btn--primary { background: var(--pi-accent); border-color: var(--pi-accent); color: var(--pi-accent-text); }
.pi-dc-link { margin-top: .75rem; }

/* Device check colours: light on the public site, dark on the studio pages */
.pi {
  --pi-dc-well: #f1f3f6;
  --pi-dc-ok-bg: #e3f6eb; --pi-dc-ok-line: #9bd5b3; --pi-dc-ok-text: #1f7a45;
  --pi-dc-warn-bg: #fff3dc; --pi-dc-warn-line: #f0c674; --pi-dc-warn-text: #8a5a00;
  --pi-dc-bad-bg: #fde7e7; --pi-dc-bad-line: #f1a5a5; --pi-dc-bad-text: #c62828;
  --pi-dc-go: #1f9d55; --pi-dc-caution: #d48806; --pi-dc-stop: #d93025;
}
body.pi-studio .pi {
  --pi-dc-well: #111621;
  --pi-dc-ok-bg: #12301f; --pi-dc-ok-line: #1f7a45; --pi-dc-ok-text: #7ee2a8;
  --pi-dc-warn-bg: #2e2208; --pi-dc-warn-line: #8a5a00; --pi-dc-warn-text: #ffcf70;
  --pi-dc-bad-bg: #331414; --pi-dc-bad-line: #8f2d2d; --pi-dc-bad-text: #ff9b9b;
  --pi-dc-go: #2ecc71; --pi-dc-caution: #f5b041; --pi-dc-stop: #e74c3c;
}
/* the public device check sits in the light site layout */
.pi-dc--public .pi-panel { background: var(--pi-surface); }
.pi-dc--public .pi-dc-empty strong { color: #fff; }
.pi-dc--public .pi-dc-empty { color: #c3cad6; }

/* account: Settings menu, settings tabs, past bookings */
.pi-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.pi-icon { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pi-menu { position: relative; }
.pi-menu > summary { list-style: none; }
.pi-menu > summary::-webkit-details-marker { display: none; }
.pi-menu > summary::after { content: ""; width: .4em; height: .4em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.15em) rotate(45deg); margin-left: .15rem; }
.pi-menu[open] > summary { border-color: var(--pi-muted); }
.pi-menu__list {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; min-width: 14rem; margin: 0; padding: .35rem; list-style: none;
  background: var(--pi-surface); border: 1px solid var(--pi-border); border-radius: 10px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .3);
}
.pi-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .75rem; border-radius: 7px; color: var(--pi-text); text-decoration: none; font-weight: 500; }
.pi-menu__list a:hover, .pi-menu__list a:focus-visible { background: var(--pi-neutral-bg); }
.pi-menu__list a[aria-current] { font-weight: 700; color: var(--pi-accent); }
.pi-tabs { display: flex; gap: .25rem; overflow-x: auto; overflow-y: hidden; box-shadow: inset 0 -1px 0 var(--pi-border); margin-bottom: 1.5rem; scrollbar-width: thin; }
.pi-tabs a { padding: .6rem .9rem; border-bottom: 2px solid transparent; color: var(--pi-muted); text-decoration: none; font-weight: 600; white-space: nowrap; }
.pi-tabs a:hover { color: var(--pi-text); }
.pi-tabs a[aria-current] { color: var(--pi-text); border-bottom-color: var(--pi-accent); }
.pi-section--first { margin-top: 0; }
.pi-booking-card--past { display: flex; flex-direction: column; }
.pi-booking-card--past .pi-card__link { height: auto; flex: 1; padding-bottom: .75rem; }
.pi-booking-card--past .pi-card__title { color: var(--pi-muted); }
.pi-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .75rem 1.25rem 1rem; border-top: 1px solid var(--pi-border); }
.pi-card__actions form { margin: 0 0 0 auto; }
.pi-option { border: 1px solid var(--pi-border); border-radius: var(--pi-radius); background: var(--pi-surface); padding: 1rem 1.25rem; margin-bottom: 1rem; max-width: 42rem; }
.pi-option p { margin: .35rem 0 0; }
.pi-switch--block { margin: 0; padding: 0; }
@media (max-width: 600px) {
  .pi-pagehead__actions { width: 100%; }
  .pi-pagehead__actions > .pi-btn { flex: 1; }
}

/* weeks or months */
.pi-field > label { font-weight: 600; font-size: .9rem; }
.pi-length { display: flex; gap: .5rem; }
.pi-length select { flex: 1 1 0; min-width: 0; }
.pi-length select[name=unit] { flex: 0 0 auto; width: auto; padding-right: 2rem; }
.pi-tier__alt { display: block; font-weight: 400; color: var(--pi-muted); }
.pi-tier--unavailable { opacity: .45; cursor: not-allowed; }
.pi-extend .pi-length { min-width: 12rem; }

/* device check: what it checks, and connection troubleshooting */
.pi-dc-scope { margin: .5rem 0 0; }
.pi-dc-scope a, .pi-dc-trouble a { color: inherit; font-weight: 600; text-decoration: underline; }
.pi-dc-trouble { margin-top: 1rem; scroll-margin-top: 5rem; }
.pi-dc-trouble > p { margin: 0 0 .5rem; }
.pi-dc-trouble ol { margin: 0; padding-left: 1.2rem; }
.pi-dc-trouble li { margin: .45rem 0; }
.pi-dc-trouble li p { margin: .4rem 0 0; }
.pi-dc-ports { overflow-x: auto; margin-top: .5rem; }
.pi-dc-ports table { border-collapse: collapse; min-width: 22rem; font-size: .9rem; }
.pi-dc-ports th, .pi-dc-ports td { text-align: left; padding: .4rem .75rem .4rem 0; border-bottom: 1px solid var(--pi-border); white-space: nowrap; }
.pi-dc-ports th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pi-muted); }
.pi-dc-ports td:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.pi-dc-trouble > summary { cursor: pointer; list-style: revert; margin-bottom: 0 !important; }
.pi-dc-trouble[open] > summary { margin-bottom: .75rem !important; }

/* account: Important info */
.pi-important__card { margin-bottom: 1rem; max-width: 52rem; }
.pi-important__card h3 { font-size: 1.05rem !important; }
.pi-important__card p { margin: 0 0 .6rem; }
.pi-important__card ol { margin: 0 0 .6rem; padding-left: 1.2rem; }
.pi-important__card li { margin: .3rem 0; }
.pi-important__card a { color: var(--pi-accent); }
.pi .pi-important__copy { width: 100%; box-sizing: border-box; margin: .5rem 0; padding: .6rem .7rem; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-bg); color: var(--pi-text); font: .85rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; resize: vertical; }

/* booking dates and countdowns */
.pi-when { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .6rem !important; }
.pi-countdown { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.pi-countdown .pi-icon { width: 1em; height: 1em; }
.pi-countdown--open { background: var(--pi-success-bg); color: var(--pi-success); }
.pi-countdown--upcoming { background: var(--pi-info-bg); color: var(--pi-info); }
.pi-card__when { margin: .75rem 0 0; }
.pi-period { margin: .25rem 0 1rem; padding: .65rem .85rem; border-radius: 8px; background: var(--pi-neutral-bg); font-size: .92rem; }
.pi-period:empty { display: none; }
.pi-extend .pi-period { flex: 1 1 100%; margin: 0; }

/* presenter page options: slide clicker style */
.pi-option--choice { margin: 0 0 1rem; }
.pi-option--choice legend { font-weight: 700; padding: 0 .35rem; }
.pi-option--choice > p { margin: 0 0 .5rem; }
.pi-choice { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .75rem; border: 1px solid var(--pi-border); border-radius: 10px; cursor: pointer; }
.pi-choice + .pi-choice { margin-top: .5rem; }
.pi-choice input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; flex: none; accent-color: var(--pi-accent); }
.pi-choice > span { display: grid; gap: .2rem; justify-items: start; }
.pi-choice:has(input:checked) { border-color: var(--pi-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pi-accent) 15%, transparent); }
[data-black-option].is-off { opacity: .55; }

/* presenter page: GlobalCue's own presenter page, embedded */
.pi-panel--clicker-embed iframe { display: block; width: 100%; min-height: 480px; border: 0; border-radius: 8px; background: #fff; margin-bottom: .5rem; }

/* countdown: on the presenter page */
.pi-signal--timer { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .25rem 1rem; text-align: center; background: #1b2232; border: 1px solid #283142; }
.pi-timer__label { font-size: 1rem; font-weight: 700; color: #c3cad6; text-transform: uppercase; letter-spacing: .06em; }
.pi-timer__clock { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 800; line-height: 1.1; color: #fff; }
.pi-timer--soon { background: #3a2a0c; border-color: #a86400; }
.pi-timer--soon .pi-timer__clock { color: #ffd27a; }
.pi-timer--up { background: #4a1414; border-color: #c62828; animation: pi-timer-up 1s ease-in-out infinite alternate; }
.pi-timer--up .pi-timer__clock, .pi-timer--up .pi-timer__label { color: #ffd2d2; }
@keyframes pi-timer-up { from { box-shadow: 0 0 0 0 rgba(198, 40, 40, .0); } to { box-shadow: 0 0 0 6px rgba(198, 40, 40, .35); } }
@media (prefers-reduced-motion: reduce) { .pi-timer--up { animation: none; } }

/* countdown: the dashboard card */
.pi-segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; border-radius: 10px; background: var(--pi-neutral-bg); margin-bottom: .9rem; }
.pi-segmented label { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 7px; font-size: .9rem; font-weight: 600; cursor: pointer; }
.pi-segmented input { accent-color: var(--pi-accent); }
.pi-segmented label:has(input:checked) { background: var(--pi-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.pi .pi-timer-control input[type=number], .pi .pi-timer-control input[type=time] { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); color: var(--pi-text); font: inherit; }
.pi-timer-quick { display: flex; flex-wrap: wrap; gap: .4rem; }
.pi-timer-now { margin: .75rem 0 0; padding: .5rem .75rem; border-radius: 8px; background: var(--pi-info-bg); color: var(--pi-info); font-size: .9rem; }
.pi-timer-now[hidden] { display: none; }

/* presenter page: open the clicker in its own window */
.pi-clicker-popout { margin: .6rem 0 .25rem; }
/* the clicker on its own, in a small window */
.pi-studio--clicker .pi-clicker-window { padding: .75rem; max-width: 30rem; margin: 0 auto; }
.pi-studio--clicker .pi-panel--clicker-embed iframe { min-height: 460px; }

/* booking page: what to paste in the vMix Call and GlobalCue fields */
.pi-formats { border: 1px solid var(--pi-border); border-radius: var(--pi-radius); background: var(--pi-surface); padding: .7rem 1.1rem; margin: 0 0 1rem; }
.pi-formats__title { font-weight: 700; cursor: pointer; }
.pi-formats[open] > .pi-formats__title { margin-bottom: .6rem; }
.pi-formats dl { margin: 0; display: grid; gap: .6rem; }
.pi-formats dt { font-weight: 600; font-size: .9rem; }
.pi-formats dd { margin: .15rem 0 0; font-size: .9rem; color: var(--pi-muted); overflow-wrap: anywhere; }
.pi-formats mark { background: color-mix(in srgb, var(--pi-accent) 18%, transparent); color: var(--pi-text); border-radius: 3px; padding: 0 .1em; }
.pi-formats > p:last-child { margin: .6rem 0 0; }

/* live control: what presenters see now, in the presenter page's dark style */
.pi-preview { margin: 0 0 1.25rem; }
.pi-preview__title { margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pi-muted); }
.pi-preview__screen { display: grid; gap: .5rem; padding: .75rem; border-radius: var(--pi-radius); background: #0d1118; color: #eef1f6; min-height: 3.2rem; }
.pi-preview__screen .pi-signal { font-size: 1.05rem; }
.pi-preview__screen .pi-timer__clock { font-size: 2rem; }
.pi-preview__empty { margin: 0; align-self: center; color: #9aa3b2; font-size: .9rem; text-align: center; }
.pi-preview__empty[hidden] { display: none; }
.pi-preview > .pi-small { margin: .4rem 0 0; }

/* the studio banner with the countdown on its right, as one bar */
.pi-signal-bar { display: flex; align-items: stretch; }
.pi-signal-bar[hidden] { display: none; }
.pi-signal-bar > .pi-signal--banner { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0 .35rem; min-width: 0; }
.pi-signal-bar > .pi-signal--timer { flex: 1 1 auto; }
/* both showing: joined, the countdown compact on the right */
.pi-signal-bar > .pi-signal--banner:not([hidden]) + .pi-signal--timer:not([hidden]) {
  flex: 0 0 auto; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0;
  align-items: center; flex-wrap: nowrap; gap: .6rem; padding-left: 1.25rem; padding-right: 1.25rem;
}
.pi-signal-bar > .pi-signal--banner:has(+ .pi-signal--timer:not([hidden])) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pi-signal-bar > .pi-signal--banner:not([hidden]) + .pi-signal--timer .pi-timer__clock { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.pi-signal-bar > .pi-signal--banner:not([hidden]) + .pi-signal--timer .pi-timer__label { font-size: .8rem; }
@media (max-width: 560px) {
  .pi-signal-bar { flex-direction: column; }
  .pi-signal-bar > .pi-signal--banner:has(+ .pi-signal--timer:not([hidden])) { border-radius: 10px 10px 0 0; }
  .pi-signal-bar > .pi-signal--banner:not([hidden]) + .pi-signal--timer:not([hidden]) { border-radius: 0 0 10px 10px; border-left: 1px solid #283142; border-top: 0; justify-content: center; }
}

/* seats: unsaved changes */
.pi-seat.is-unsaved { border-color: var(--pi-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pi-warning) 18%, transparent); }
.pi-seat__unsaved { margin-left: .35rem; }
.pi-seat__unsaved[hidden] { display: none; }
.pi-save-status { font-size: .9rem; color: var(--pi-muted); }
.pi-sticky-save.is-unsaved { background: linear-gradient(to top, var(--pi-warning-bg) 75%, transparent); }
.pi-sticky-save.is-unsaved .pi-save-status { color: var(--pi-warning); font-weight: 700; }

/* presenter page: who and what it's for, as a slim line at the bottom (no header) */
.pi-studio__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1rem; padding: .45rem 1.25rem; border-top: 1px solid #1d2432; color: #7d8697; font-size: .78rem; line-height: 1.4; }
.pi-studio__foot .pi-studio__brand { font-size: inherit; color: #9aa3b2; }
.pi-studio__foot a { color: #9aa3b2; }

/* countdown: overtime, counting up after time's up */
.pi-timer--over { background: #5a1010; border-color: #ef4444; }
.pi-timer--over .pi-timer__label { color: #fff; background: #c62828; padding: .1rem .55rem; border-radius: 6px; letter-spacing: .08em; }
.pi-timer--over .pi-timer__clock { color: #ffd2d2; }
.pi-timer-overtime { margin: 0 0 .75rem; padding: 0; align-self: auto; }
.pi-timer-overtime small { font-weight: 400; }

/* banner and countdown: a little smaller, so the studio connection gets more room */
.pi-signal--banner, .pi-signal--timer { padding: .55rem .95rem; font-size: 1rem; }
.pi-timer__clock { font-size: clamp(1.5rem, 4vw, 2.3rem); }
.pi-timer__label { font-size: .85rem; }
.pi-signal-bar > .pi-signal--banner:not([hidden]) + .pi-signal--timer .pi-timer__clock { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
.pi-signal-bar > .pi-signal--banner:not([hidden]) + .pi-signal--timer .pi-timer__label { font-size: .72rem; }
.pi-preview__screen .pi-signal { font-size: .95rem; }
.pi-preview__screen .pi-timer__clock { font-size: 1.5rem; }

/* countdown paused by the organiser */
.pi-timer--paused { animation: none !important; }
.pi-timer--paused .pi-timer__clock { opacity: .6; }

/* countdown card: presets, and the controls for a running countdown */
.pi-timer-row__title { margin: .25rem 0 .4rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pi-muted); }
.pi-timer-live { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--pi-border); }
.pi-timer-adjust { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.pi-timer-adjust__group { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.pi-timer-pause { min-width: 5.5rem; }

/* live control: a presenter with a cue showing */
.pi-presence__row.is-cued .pi-presence__cue { border-color: var(--pi-info); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pi-info) 20%, transparent); }
.pi-presence__row.is-cued .pi-presence__name strong { color: var(--pi-info); }
.pi-cue-actions { margin-top: .6rem; }

/* billing: country, and the note for businesses outside the UK */
.pi-field-stack { display: flex; flex-direction: column; }
.pi-billing-note { margin: .25rem 0 1rem; padding: .6rem .85rem; border-radius: 8px; background: var(--pi-info-bg); color: var(--pi-info); }
.pi-billing-note[hidden] { display: none; }

/* sales reports */
.pi-report-period { margin-bottom: 1.5rem; }
.pi-report-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.pi-report-dates[hidden] { display: none; }
.pi-report-dates .pi-field { margin-bottom: 0; }
.pi-report-table { overflow-x: auto; border: 1px solid var(--pi-border); border-radius: var(--pi-radius); background: var(--pi-surface); }
.pi-report-table table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pi-report-table th, .pi-report-table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--pi-border); }
.pi-report-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pi-muted); }
.pi-report-table .num { text-align: right; white-space: nowrap; }
.pi-report-table tfoot td { font-weight: 700; border-bottom: 0; }
.pi-report-table a { color: var(--pi-accent); }
.pi-report-downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pi-report-downloads li { display: grid; grid-template-columns: minmax(12rem, auto) 1fr; gap: .4rem 1rem; align-items: center; }
@media (max-width: 640px) { .pi-report-downloads li { grid-template-columns: 1fr; } }
.pi-report-steps { color: var(--pi-text); padding-left: 1.2rem; }
.pi-report-steps li { margin: .35rem 0; }
.pi-menu__admin { border-top: 1px solid var(--pi-border); margin-top: .25rem; padding-top: .25rem; }

/* live control: one set of countdown controls */
.pi-timer-set { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; margin: .75rem 0; }
.pi-timer-display { flex: 1 1 14rem; display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .6rem .9rem; border-radius: 10px; background: #111827; border: 1px solid #1f2937; color: #fff; }
.pi-timer-display__clock { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 2.4rem; font-weight: 800; line-height: 1.05; }
.pi-timer-display__state { font-size: .8rem; color: #c3cad6; }
.pi-timer-control.is-setting .pi-timer-display__clock { color: #c3cad6; }
.pi-timer-control.is-running .pi-timer-display { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22, 163, 74, .25); }
.pi-timer-control.is-paused .pi-timer-display { border-color: #a86400; }
.pi-timer-control.is-paused .pi-timer-display__clock { color: #ffd27a; }
.pi-timer-until { flex: 0 1 11rem; margin: 0; }
.pi-timer-control .pi-timer-quick { margin-bottom: .5rem; }
.pi-timer-control .pi-timer-quick .pi-btn.is-selected { background: var(--pi-accent); border-color: var(--pi-accent); color: var(--pi-accent-text); }
.pi-timer-control .pi-timer-adjust { justify-content: space-between; }
.pi-timer-transport { margin-top: .9rem; }
.pi-timer-transport .pi-timer-start, .pi-timer-transport .pi-timer-pause { min-width: 7rem; }
.pi-timer-options { margin-top: .9rem; padding-top: .6rem; border-top: 1px solid var(--pi-border); }
.pi-timer-options summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--pi-muted); }
.pi-timer-options[open] summary { margin-bottom: .6rem; }
.pi-timer-options .pi-timer-overtime { margin: .6rem 0 0; }
.pi-timer-control .pi-timer-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.pi-timer-control .pi-timer-adjust { display: grid; grid-template-columns: 1fr; gap: .3rem; }
.pi-timer-control .pi-timer-adjust__group { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
@media (min-width: 1300px) { .pi-timer-control .pi-timer-adjust { grid-template-columns: 1fr 1fr; gap: .3rem .75rem; } }
.pi-timer-control .pi-timer-quick .pi-btn, .pi-timer-control .pi-timer-adjust .pi-btn { padding-left: .3rem; padding-right: .3rem; justify-content: center; text-align: center; }

/* booking page: optional auto-renew */
.pi-autorenew { margin-top: 1.25rem; }
.pi-autorenew h3 { margin-top: 0; }
.pi-autorenew .pi-actions form { display: inline; margin: 0; }
.pi-autorenew__form { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.pi-autorenew__form .pi-field { margin: 0; }
.pi-autorenew--active { border-color: var(--pi-success); }

/* presenter page: WHIP seats send the camera and mic from this page */
.pi-whip__preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; transform: scaleX(-1); }
.pi-whip__badge { position: absolute; left: .6rem; top: .6rem; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: rgba(0, 0, 0, .6); color: #fff; }
.pi-whip__badge.is-connecting { background: #a86400; }
.pi-whip__badge.is-live { background: #16a34a; }
.pi-whip__controls { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.pi-whip__controls .pi-field { margin: 0; }
.pi-whip__controls select { width: 100%; }
.pi-whip__meter { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.pi-whip__meter i { display: block; width: 0; height: 100%; background: #22c55e; transition: width .1s linear; }
.pi-whip__actions { margin-top: .75rem; flex-wrap: wrap; }
.pi-whip [aria-pressed="true"] { background: #a86400; border-color: #a86400; color: #fff; }
@media (max-width: 640px) { .pi-whip__controls { grid-template-columns: 1fr; } }

/* booking page: a seat's studio connection fields, one platform at a time */
.pi-seat [data-pi-platform-field][hidden] { display: none; }
.pi-seat__platform select { width: 100%; }

/* ------------------------------------------------------------ voucher box (booking and extend forms) */
.pi-voucher { max-width: 26rem; }
.pi-voucher__row { display: flex; gap: .5rem; }
.pi-voucher__row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.pi-voucher__row input::placeholder { text-transform: none; letter-spacing: 0; }
.pi-voucher__msg { margin: .35rem 0 0; min-height: 1.2em; font-size: .875rem; color: var(--pi-muted); }
.pi-voucher.is-ok .pi-voucher__msg { color: var(--pi-success); font-weight: 600; }
.pi-voucher.is-bad .pi-voucher__msg { color: var(--pi-danger); }
.pi-total s, .pi-was { color: var(--pi-muted); font-weight: 400; font-size: .75em; margin-right: .35rem; }
.pi-extend .pi-voucher { flex: 1 1 100%; margin-bottom: 0; }