/* ============================================================================
   Putty Party — global styles. Tokens + atoms lifted from Putty Party.dc.html.
   ========================================================================== */

:root {
  --pp-page-bg: #e5e1d5;
  --pp-cream: #f6f1e6;
  --pp-card: #fffdf8;
  --pp-admin: #f1ece0;
  --pp-panel-head: #fbf8f0;

  --pp-turf-from: #2e8b57;
  --pp-turf-to: #14442f;
  --pp-flag: #e2533b;
  --pp-flag-press: #b73c28;
  --pp-sunny: #f2c14e;
  --pp-ink: #16261f;

  --pp-gold: #d8a72b;
  --pp-silver: #9aa3a0;
  --pp-bronze: #c0824e;

  --pp-text: #16261f;
  --pp-text-muted: #44524a;
  --pp-text-soft: #6b7b6e;
  --pp-text-faint: #8a9488;
  --pp-green-text: #1d6b43;
  --pp-red-text: #b3402b;

  --pp-border-cream: #e6dec9;
  --pp-border-input: #e0d8c2;
  --pp-dash: #d8cfb6;

  --pp-turf-grad: linear-gradient(165deg, var(--pp-turf-from), var(--pp-turf-to));
  --pp-turf-grad-board:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 6px),
    linear-gradient(165deg, var(--pp-turf-from), var(--pp-turf-to));

  --font-head: "Baloo 2", system-ui, sans-serif;
  --font-score: "Anton", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--pp-page-bg);
  font-family: var(--font-body);
  color: var(--pp-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Keyframes (from the design) ---- */
@keyframes pp-wave {
  0%,
  100% {
    transform: rotate(-3deg) skewX(0deg);
  }
  50% {
    transform: rotate(3deg) skewX(-6deg);
  }
}
@keyframes pp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 193, 78, 0.55);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(242, 193, 78, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 193, 78, 0);
  }
}
@keyframes pp-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes pp-fall {
  0% {
    transform: translateY(-14px) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translateY(150px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes pp-toast {
  from {
    transform: translate(-50%, 14px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    /* biome-ignore lint/complexity/noImportantStyles: must beat specific animation selectors for a11y */
    animation: none !important;
  }
}

/* ---- Typography helpers ---- */
.pp-h {
  font-family: var(--font-head);
}
.pp-mono {
  font-family: var(--font-mono);
}
.pp-score {
  font-family: var(--font-score);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}

/* ---- Buttons ---- */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border: none;
  border-radius: 13px;
  padding: 12px 18px;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 0.05s ease,
    box-shadow 0.05s ease,
    filter 0.15s ease;
}
.pp-btn:disabled,
.pp-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}
.pp-btn--lg {
  font-weight: 700;
  font-size: 18px;
  border-radius: 14px;
  padding: 16px;
}
.pp-btn--sm {
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 10px;
}
.pp-btn--block {
  width: 100%;
}

.pp-btn--primary {
  background: var(--pp-flag);
  color: var(--pp-card);
  font-weight: 700;
  box-shadow:
    0 4px 0 var(--pp-flag-press),
    0 10px 20px rgba(226, 83, 59, 0.3);
}
.pp-btn--primary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--pp-flag-press);
}

/* Every solid/soft button shares the same pressable "key" — a flat offset shadow
   that compresses on :active — so the whole app reads as one button system. Ghost
   (a text button) stays flat on purpose. */
.pp-btn--secondary {
  background: var(--pp-cream);
  color: var(--pp-green-text);
  border: 1.5px solid #cfdccf;
  box-shadow: 0 4px 0 #d3d9cf;
}
.pp-btn--secondary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d3d9cf;
}
.pp-btn--ghost {
  background: transparent;
  color: var(--pp-text-soft);
}
.pp-btn--danger {
  background: #fbe7e2;
  color: var(--pp-red-text);
  border: 1.5px solid #f1c4b9;
  box-shadow: 0 4px 0 #ecc3b8;
}
.pp-btn--danger:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #ecc3b8;
}
.pp-btn--danger-solid {
  background: var(--pp-flag);
  color: var(--pp-card);
  font-weight: 700;
  box-shadow: 0 4px 0 var(--pp-flag-press);
}
.pp-btn--danger-solid:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--pp-flag-press);
}
.pp-btn--gold {
  background: var(--pp-sunny);
  color: var(--pp-turf-to);
  font-weight: 700;
  box-shadow: 0 4px 0 #c99a2f;
}
.pp-btn--gold:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #c99a2f;
}
.pp-btn--dark {
  background: var(--pp-turf-to);
  color: var(--pp-cream);
  box-shadow: 0 4px 0 #0b2418;
}
.pp-btn--dark:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #0b2418;
}
.pp-btn--outline {
  background: var(--pp-card);
  color: var(--pp-text-muted);
  border: 1.5px solid var(--pp-border-input);
  box-shadow: 0 4px 0 #e6ddca;
}
.pp-btn--outline:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #e6ddca;
}

/* ---- Status pills ---- */
.pp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
}
.pp-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.pp-status--open {
  background: #e4f0e8;
  color: var(--pp-green-text);
  border: 1px solid #bcdcc8;
}
.pp-status--open .dot {
  background: var(--pp-turf-from);
}
.pp-status--locked {
  background: #fbe7e2;
  color: var(--pp-red-text);
  border: 1px solid #f1c4b9;
}
.pp-status--locked .dot {
  background: var(--pp-flag);
}
.pp-status--archived {
  background: #ece9df;
  color: var(--pp-text-soft);
  border: 1px solid #d8d2c0;
}
.pp-status--archived .dot {
  background: var(--pp-silver);
}

/* ---- Forms ---- */
.pp-label {
  display: block;
}
.pp-label > span:first-child,
.pp-field-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--pp-ink);
  margin-bottom: 6px;
}
.pp-req {
  color: var(--pp-flag);
}
.pp-opt {
  color: var(--pp-silver);
  font-weight: 500;
}

.pp-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--pp-ink);
  background: var(--pp-cream);
  border: 1.5px solid var(--pp-border-input);
  border-radius: 12px;
  padding: 13px 14px;
  outline: none;
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
.pp-input:focus {
  border-color: var(--pp-turf-from);
}
.pp-input:focus-visible {
  outline: 2px solid var(--pp-turf-from);
  outline-offset: 2px;
}
.pp-input--score {
  font-family: var(--font-score);
  font-size: 22px;
  font-feature-settings: "tnum" 1;
  padding: 11px 14px;
}
.pp-input--invalid {
  background: #fbe7e2;
  border-color: var(--pp-flag);
  color: var(--pp-red-text);
}
/* Drop the native spinner arrows on number fields — nobody taps them and they
   clutter the score inputs. The numeric keypad still shows on mobile via the
   inputmode="numeric" hint. */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pp-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--pp-red-text);
  margin-top: 7px;
}
.pp-field-error .bang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pp-flag);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  flex: none;
}

/* ---- Cards ---- */
.pp-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-border-cream);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(22, 38, 31, 0.06);
}

/* ---- Toast ---- */
.pp-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pp-ink);
  color: var(--pp-cream);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: pp-toast 0.22s ease-out;
}
.pp-toast .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pp-turf-from);
  color: #fff;
  font-size: 11px;
}

/* ---- Confetti ---- */
.pp-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.pp-confetti span {
  position: absolute;
  animation: pp-fall 2.6s ease-in infinite;
}

/* ---- Icons (flag + ball) ---- */
.pp-ball {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff, #e9e3d2 60%, #cfc8b4);
  box-shadow: inset -1.5px -1.5px 2px rgba(22, 38, 31, 0.18);
  flex: none;
}

/* ============================================================================
   PUBLIC · Entry screen (phone-first)
   ========================================================================== */
.pp-body--entry {
  min-height: 100svh;
  /* A few muted minigolf pitches scattered behind the card so the turf isn't
       bare. Listed before the gradient so they layer on top of it; the opaque
       entry card covers the center, so they only peek through the margins.
       Purely decorative (the SVGs are aria-hidden). The /board view keeps its
       own --pp-turf-grad-board and is intentionally left clean. */
  background-image:
    url("/img/pitch-1.svg"), url("/img/pitch-3.svg"), url("/img/pitch-5.svg"),
    url("/img/pitch-2.svg"), var(--pp-turf-grad);
  background-repeat: no-repeat;
  background-position:
    left -28px top 7%,
    right -24px top 13%,
    left -20px bottom 11%,
    right -34px bottom 8%,
    center;
  background-size:
    175px auto,
    175px auto,
    150px auto,
    150px auto,
    cover;
  display: grid;
  place-items: center;
  padding: 20px;
}
/* On wide screens the four corner pitches strand themselves in the far corners
   and read as specks, leaving the middle bare. Swap in a richer set: six larger
   pitches in three tiers per side, pulled inward to flank the centered card. */
@media (min-width: 900px) {
  .pp-body--entry {
    background-image:
      url("/img/pitch-1.svg"), url("/img/pitch-3.svg"), url("/img/pitch-5.svg"),
      url("/img/pitch-2.svg"), url("/img/pitch-6.svg"), url("/img/pitch-4.svg"), var(--pp-turf-grad);
    background-position:
      left 6% top 13%,
      right 7% top 17%,
      left 9% bottom 13%,
      right 7% bottom 11%,
      left 19% center,
      right 18% center,
      center;
    background-size:
      250px auto,
      250px auto,
      225px auto,
      215px auto,
      250px auto,
      245px auto,
      cover;
  }
}
.pp-screen {
  width: 100%;
  max-width: 420px;
  background: var(--pp-cream);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(20, 68, 47, 0.3);
  position: relative;
}
.pp-screen--success {
  background: linear-gradient(170deg, var(--pp-turf-from), var(--pp-turf-to));
}
.pp-entry-head {
  padding: 26px 22px 20px;
  text-align: center;
}
.pp-entry-form {
  background: var(--pp-card);
  border-top: 2px dashed var(--pp-dash);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pp-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pp-card);
  border: 1px solid var(--pp-border-cream);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--pp-text-soft);
}
.pp-holes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pp-hole {
  position: relative;
}
.pp-hole > .idx {
  position: absolute;
  top: 4px;
  left: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--pp-silver);
}
.pp-hole input {
  width: 100%;
  text-align: center;
  font-family: var(--font-score);
  font-size: 20px;
  color: var(--pp-ink);
  background: var(--pp-cream);
  border: 1.5px solid var(--pp-border-input);
  border-radius: 10px;
  padding: 16px 4px 8px;
  outline: none;
  font-feature-settings: "tnum" 1;
  transition:
    border-color 0.12s ease,
    background 0.12s ease,
    box-shadow 0.12s ease;
}
/* A hole that's been filled in reads as "done" — subtle turf tint + accent. */
.pp-hole input:not(:placeholder-shown) {
  background: var(--pp-card);
  border-color: var(--pp-turf-from);
}
.pp-hole input:focus {
  border-color: var(--pp-turf-from);
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.16);
}
/* "+n" pickup-penalty badge, shown when a hole reaches the stroke limit. */
.pp-hole__badge {
  position: absolute;
  top: 4px;
  right: 5px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: var(--pp-card);
  background: var(--pp-flag);
  border-radius: 999px;
  padding: 2px 5px;
  pointer-events: none;
}
.pp-hole-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--pp-turf-to);
  border-radius: 12px;
  padding: 12px 16px;
}

/* ---- Hybrid self-entry: "Wer bist du?" roster picker + bound (claim) identity ----
   Player-facing, so it lives on the entry-screen card (cream) and stays phone-first. */
.pp-picker-body {
  background: var(--pp-card);
  border-top: 2px dashed var(--pp-dash);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pp-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--pp-border-cream);
  border-radius: 14px;
  background: var(--pp-cream);
  text-decoration: none;
  transition:
    border-color 0.12s ease,
    transform 0.06s ease;
}
.pp-picker-row:active {
  transform: scale(0.99);
}
.pp-picker-row:hover {
  border-color: var(--pp-turf-from);
}
.pp-picker-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pp-picker-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--pp-ink);
}
.pp-picker-team {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--pp-text-soft);
}
.pp-picker-badge {
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pp-picker-badge--played {
  background: #fbf3dd;
  color: var(--pp-green-text);
  border: 1px solid #ecd9a3;
}
.pp-picker-badge--wait {
  background: #ece9df;
  color: var(--pp-text-soft);
}
.pp-picker-go {
  flex: none;
  font-size: 18px;
  color: var(--pp-turf-from);
}
.pp-picker-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 13px 16px;
  border: 1.5px dashed #cfc6ac;
  border-radius: 14px;
  background: transparent;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--pp-green-text);
  text-decoration: none;
}
.pp-picker-new-plus {
  font-size: 17px;
}

/* Bound (claim) form: the player picked their row, so the name is fixed. */
.pp-bound-id {
  background: var(--pp-cream);
  border: 1px solid var(--pp-border-cream);
  border-radius: 14px;
  padding: 12px 16px;
}
.pp-bound-id-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-soft);
}
.pp-bound-id-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  color: var(--pp-turf-to);
  margin: 2px 0 4px;
}
.pp-bound-id-switch {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-green-text);
  text-decoration: none;
}

/* ============================================================================
   PUBLIC · Board (big screen + mobile fallback)
   ========================================================================== */
.pp-body--board {
  height: 100svh;
  overflow: hidden;
  background: var(--pp-turf-grad-board);
}
/* Kiosk frame: header + podium are fixed; the list panel scrolls inside it
   (.pp-board-list overflow-y:auto). The mobile fallback below unlocks this to a
   normal scrolling page. */
.pp-board {
  height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--pp-cream);
  position: relative;
  overflow: hidden;
}
.pp-board-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: clamp(16px, 2.4vw, 30px) clamp(20px, 3vw, 40px) 31px;
  z-index: 3;
}
/* Title block takes the slack and is allowed to shrink (min-width:0) so a long
   tournament name wraps within its column instead of shoving the LIVE/count
   cluster off-screen. That cluster wraps to its own line on narrow widths. */
.pp-board-headline {
  flex: 1 1 auto;
  min-width: 0;
}
.pp-board-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pp-board-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1;
  color: var(--pp-card);
  margin: 0;
}
.pp-board-sub {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.1vw, 15px);
  color: rgba(246, 241, 230, 0.7);
  margin-top: 4px;
}
.pp-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(226, 83, 59, 0.18);
  border: 1px solid rgba(242, 193, 78, 0.4);
  border-radius: 999px;
  padding: 9px 16px;
}
.pp-live .glow {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff, #efe8d4);
  animation: pp-pulse 1.8s ease-out infinite;
}
.pp-live .lbl {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.08em;
  color: var(--pp-sunny);
}
.pp-live--mini {
  padding: 5px 11px;
  gap: 6px;
}
.pp-live--mini .glow {
  width: 8px;
  height: 8px;
  animation: pp-blink 1.6s ease-in-out infinite;
}

.pp-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 18px);
  padding: clamp(8px, 1.5vw, 14px) clamp(20px, 3vw, 40px) 0;
  /* Sit above the list panel so the cards' shadows fall onto it, not behind it. */
  position: relative;
  z-index: 4;
}
/* The podium reads as floating tiles on the turf (fully rounded + a soft drop
   shadow), with a clear gap to the list below — rather than trying to stand on
   the translucent list panel, which let the cards ghost through it. */
.pp-podium-card {
  width: clamp(150px, 18vw, 248px);
  background: var(--pp-cream);
  border-radius: 18px;
  padding: 18px 18px 22px;
  text-align: center;
  box-shadow: 0 16px 30px rgba(12, 30, 20, 0.32);
}
.pp-podium-card--first {
  width: clamp(170px, 20vw, 272px);
  background: var(--pp-card);
  padding: 24px 20px 26px;
  border-top: 4px solid var(--pp-gold);
  box-shadow:
    0 18px 34px rgba(12, 30, 20, 0.36),
    0 -6px 24px rgba(216, 167, 43, 0.35);
  position: relative;
}
.pp-rank-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.13);
}
.pp-podium-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 19px);
  color: var(--pp-ink);
}
.pp-podium-team {
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  color: var(--pp-text-soft);
  margin-bottom: 12px;
}
.pp-podium-score {
  font-family: var(--font-score);
  line-height: 1;
  color: var(--pp-ink);
  font-feature-settings: "tnum" 1;
}
.pp-podium-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--pp-silver);
  margin-top: 2px;
}

.pp-board-body {
  flex: 1;
  display: flex;
  gap: 24px;
  padding: 0 clamp(20px, 3vw, 40px);
  /* Clear gap below the floating podium. */
  margin-top: clamp(10px, 1.6vw, 18px);
  min-height: 0;
}
.pp-board-list {
  flex: 1;
  background: rgba(255, 253, 248, 0.96);
  border-radius: 14px 14px 0 0;
  /* Extra right padding keeps the expand ▾ off the panel edge. */
  padding: 8px 30px 0 22px;
  display: flex;
  flex-direction: column;
  /* Header + podium stay put; the leaderboard scrolls inside its own panel. */
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(22, 38, 31, 0.25) transparent;
}
.pp-board-list::-webkit-scrollbar {
  width: 8px;
}
.pp-board-list::-webkit-scrollbar-thumb {
  background: rgba(22, 38, 31, 0.22);
  border-radius: 8px;
}
.pp-board-list::-webkit-scrollbar-track {
  background: transparent;
}
.pp-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(7px, 1vw, 11px) 0;
  border-bottom: 1px dashed #e2dac4;
}
.pp-row:last-child {
  border-bottom: none;
}
.pp-row-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--pp-text-muted);
}
.pp-row-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--pp-ink);
}
.pp-row-team {
  font-family: var(--font-body);
  font-size: clamp(11px, 1vw, 13px);
  color: var(--pp-text-soft);
}
.pp-row-score {
  margin-left: auto;
  font-family: var(--font-score);
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--pp-ink);
  font-feature-settings: "tnum" 1;
}
.pp-tie {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  color: var(--pp-text-faint);
  background: #ece9df;
  border-radius: 999px;
  padding: 2px 8px;
}
.pp-move {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
}
.pp-move--up {
  color: var(--pp-green-text);
}
.pp-move--down {
  color: var(--pp-red-text);
}

/* ---- Sparse leaderboard filler (4+ players, only a few past the podium) ----
   The kiosk list panel is flex:1 (full height); with just a handful of rows it
   would be a flat white void. Fill the slack with faint ledger stripes (covering
   whatever height the short list leaves) plus a few "open position" rows — a
   hollow ring + em-dash, deliberately empty rather than a loading skeleton — and
   a gentle invite centred over the open area. The 44px stripe band matches the
   open-row height so the rows land as alternating zebra bands. */
.pp-board-list-fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 44px,
    rgba(22, 38, 31, 0.03) 44px,
    rgba(22, 38, 31, 0.03) 88px
  );
}
.pp-open-row {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  box-sizing: border-box;
}
/* Faint echo of the real rank column — reads as the next open positions. */
.pp-open-rank {
  width: 30px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  color: rgba(22, 38, 31, 0.24);
}
/* Hollow ring (solid, NOT dashed — a dashed ring reads as a spinner) = open seat. */
.pp-open-ring {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(22, 38, 31, 0.18);
}
.pp-open-dash {
  margin-left: auto;
  font-family: var(--font-score);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: rgba(22, 38, 31, 0.18);
}
/* auto top+bottom margins centre the invite in the striped space below the rows. */
.pp-board-list-hint {
  margin: auto 0;
  padding: 14px 0 4px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 14px);
  color: var(--pp-text-faint);
}

/* ---- Per-hole expandable scorecard (per_hole games only) ---- */
/* Expandable list rows wrap so the scorecard drops onto its own line. */
.pp-row--exp {
  flex-wrap: wrap;
  cursor: pointer;
}
.pp-row--exp:focus-visible,
.pp-podium-card--exp:focus-visible {
  outline: 2px solid var(--pp-turf-from);
  outline-offset: 2px;
}
.pp-row-caret {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1;
  color: var(--pp-text-faint);
  margin-left: 10px;
  transition: transform 0.15s ease;
}
.pp-row--exp.pp-open .pp-row-caret {
  transform: rotate(180deg);
}
.pp-podium-card--exp {
  cursor: pointer;
}
/* Expand affordance on the podium cards (centred under the unit), mirroring the
   list rows' ▾ so it's clear the top three open to reveal their scorecards. */
.pp-podium-caret {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  color: var(--pp-silver);
  transition: transform 0.15s ease;
}
.pp-podium-card--exp.pp-open .pp-podium-caret {
  transform: rotate(180deg);
}

/* Scorecard detail: collapsed until the row/card carries .pp-open. */
.pp-row-card {
  display: none;
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2dac4;
}
.pp-row--exp.pp-open .pp-row-card {
  display: block;
}
.pp-podium-card .pp-scorecard {
  display: none;
  margin-top: 12px;
  justify-content: center;
}
.pp-podium-card--exp.pp-open .pp-scorecard {
  display: flex;
}
/* biome-ignore lint/style/noDescendingSpecificity: base rule; the higher-specificity
   .pp-podium-card overrides above intentionally hide scorecards until expanded. */
.pp-scorecard {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pp-sc-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 26px;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(22, 38, 31, 0.05);
}
.pp-sc-cell b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 9px;
  color: var(--pp-text-faint);
}
.pp-sc-cell i {
  font-family: var(--font-score);
  font-style: normal;
  font-size: 15px;
  line-height: 1.1;
  color: var(--pp-ink);
}
.pp-sc-cell--total {
  background: rgba(242, 193, 78, 0.22);
}
.pp-sc-cell--total i {
  color: var(--pp-turf-to);
}

.pp-board-aside {
  width: 200px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 26px;
  text-align: center;
}
.pp-qr {
  background: var(--pp-card);
  border-radius: 14px;
  padding: 11px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  display: block;
}
.pp-qr img,
.pp-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Showcase: 1–3 players (no leaderboard list yet) ----
   With fewer than four players there's no list panel, so the podium becomes the
   hero — centered on the turf above a prominent join card — instead of a lone
   tile floating over a big empty box. The server swaps back to the list layout
   the moment a fourth player joins. */
.pp-board-showcase {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  padding: 0 clamp(20px, 3vw, 40px) clamp(24px, 3vw, 44px);
}
/* Larger, more celebratory cards when the podium stands on its own. */
.pp-podium--show .pp-podium-card {
  width: clamp(168px, 20vw, 264px);
  padding: 22px 20px 26px;
}
.pp-podium--show .pp-podium-card--first {
  width: clamp(190px, 23vw, 300px);
  padding: 28px 22px 32px;
}
/* Join card: QR (or padlock) beside the prompt, reading as a clear invitation. */
.pp-board-join {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  padding: clamp(14px, 1.4vw, 20px) clamp(20px, 2.2vw, 30px);
  background: rgba(255, 253, 248, 0.08);
  border: 1px solid rgba(246, 241, 230, 0.16);
  border-radius: 20px;
}
.pp-board-join-qr {
  flex: none;
  width: clamp(116px, 12vw, 150px);
  height: clamp(116px, 12vw, 150px);
  box-sizing: border-box;
}
.pp-board-join-lock {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(104px, 11vw, 132px);
  height: clamp(104px, 11vw, 132px);
  background: var(--pp-card);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.pp-board-join-text {
  text-align: left;
}
.pp-board-join-h {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  color: #fffdf8;
}

.pp-board-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  z-index: 3;
}

/* Empty board: float the message across the full board width so it sits
   dead-center, while the QR aside keeps its normal bottom-right spot. Without
   this the message centers only in the flex:1 column left of the QR, shoving it
   off to the left. */
.pp-board-body--empty {
  position: relative;
  justify-content: flex-end;
}
.pp-board-body--empty .pp-board-empty {
  position: absolute;
  inset: 0;
}

/* Board confetti accent on the leader */
.pp-board-confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 4;
}
.pp-board-confetti--hidden {
  display: none;
}
/* Showcase (1–3 players): the podium is centred on the turf, so the top-anchored
   confetti would rain onto empty space above it. Drop the confetti origin down to
   just above the leader card (which sits ~22% from the top here). The mobile
   fallback nudges it further down to match the lower podium there. */
.pp-board--few .pp-board-confetti {
  top: 12%;
}

/* Mobile board fallback: stack podium + list, hide the QR aside column. */
@media (max-width: 720px) {
  .pp-body--board,
  .pp-board {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
  .pp-board-body {
    flex-direction: column;
  }
  /* Whole page scrolls on mobile, so the list flows instead of scrolling itself.
       The QR sits below it now, so round the bottom too (no longer flush to the
       screen edge) and pad the last row off the rounded corner. */
  .pp-board-list {
    overflow: visible;
    border-radius: 14px;
    padding-bottom: 10px;
  }
  .pp-board-aside {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    padding: 16px 0 24px;
  }
  .pp-podium-card,
  .pp-podium-card--first {
    width: 33%;
    padding: 12px 8px;
  }
  /* Showcase podium on a phone: override the larger desktop widths and size by
       player count — a full 3-card row sits at 33%, but one or two cards would
       look stranded that narrow, so widen them. A definite width is required for
       the percentage card widths below to resolve: the showcase centres the
       podium (align-items:center), which would otherwise shrink-wrap it to an
       indefinite width and strand a lone card off-centre. */
  .pp-podium--show {
    width: 100%;
    /* The showcase container already insets content; drop the podium's own
           side padding so three cards aren't squeezed by double padding. */
    padding-left: 0;
    padding-right: 0;
  }
  /* min-width:0 lets cards honour their % width instead of growing to a long
       name's min-content width, which would push three cards past a phone edge. */
  .pp-podium--show .pp-podium-card,
  .pp-podium--show .pp-podium-card--first {
    padding: 12px 8px;
    min-width: 0;
  }
  .pp-podium--n1 .pp-podium-card--first {
    width: 56%;
  }
  .pp-podium--n2 .pp-podium-card,
  .pp-podium--n2 .pp-podium-card--first {
    width: 44%;
  }
  .pp-podium--n3 .pp-podium-card,
  .pp-podium--n3 .pp-podium-card--first {
    width: 33%;
  }
  /* Podium staircase: the narrow mobile cards end up nearly equal height, so the
       big-screen "taller first card" read is lost. Lift them into a 2nd–1st–3rd
       silhouette (bottoms no longer flush) so the ranking reads at a glance. */
  .pp-podium--n2 .pp-podium-card--first,
  .pp-podium--n3 .pp-podium-card--first {
    transform: translateY(-22px);
  }
  .pp-podium--n3 .pp-podium-card:nth-child(1) {
    transform: translateY(-9px);
  }
  /* Podium sits lower on the taller phone board — drop the confetti to match. */
  .pp-board--few .pp-board-confetti {
    top: 22%;
  }
  .pp-board-showcase {
    gap: 28px;
    padding-bottom: 24px;
  }
  .pp-board-join {
    max-width: 100%;
    box-sizing: border-box;
  }
  .pp-board-cta {
    display: flex;
  }
}

/* Direct entry CTA on the board — hidden on the big screen, shown on mobile. */
.pp-board-cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 20px 24px;
  background: var(--pp-flag);
  color: var(--pp-card);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  border-radius: 14px;
  padding: 15px;
  text-decoration: none;
  box-shadow: 0 4px 0 var(--pp-flag-press);
}

/* ============================================================================
   ADMIN
   ========================================================================== */
.pp-body--admin {
  background: var(--pp-admin);
}
.pp-admin-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}
.pp-admin-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.pp-whoami {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pp-card);
  border: 1px solid var(--pp-border-cream);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--pp-text-muted);
}
.pp-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) {
  .pp-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .pp-cards-grid {
    grid-template-columns: 1fr;
  }
}

.pp-game-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-border-cream);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(22, 38, 31, 0.06);
}
.pp-game-card--archived {
  background: #fbf8f0;
  opacity: 0.86;
}
.pp-card-accent {
  height: 5px;
}

.pp-newcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 168px;
  background: transparent;
  border: 2px dashed #c9bfa6;
  border-radius: 18px;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--pp-text-muted);
}

/* Segmented toggle (status / entry-mode) */
.pp-seg {
  display: flex;
  background: var(--pp-admin);
  border: 1.5px solid var(--pp-border-input);
  border-radius: 11px;
  padding: 3px;
}
.pp-seg button {
  flex: 1;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--pp-text-soft);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}
.pp-seg button[aria-pressed="true"] {
  color: var(--pp-card);
  background: var(--pp-turf-from);
}

/* Toggle switch */
.pp-switch {
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--pp-silver);
  padding: 3px;
  cursor: pointer;
  border: none;
  transition: background 0.15s ease;
}
.pp-switch[aria-checked="true"] {
  background: var(--pp-turf-from);
}
.pp-switch .knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pp-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: margin 0.15s ease;
}
.pp-switch[aria-checked="true"] .knob {
  margin-left: auto;
}

/* Modal */
.pp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 68, 47, 0.42);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  z-index: 40;
  overflow: auto;
}
.pp-modal-backdrop.is-open {
  display: flex;
}
.pp-modal {
  position: relative;
  width: 540px;
  max-width: 100%;
  background: var(--pp-card);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* Game form layout (responsive) */
.pp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pp-form-grid__full {
  grid-column: 1 / -1;
}
.pp-form-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
}
.pp-form-row > * {
  flex: 1 1 220px;
  min-width: 0;
}
@media (max-width: 520px) {
  .pp-form-grid {
    grid-template-columns: 1fr;
  }
}
/* Below the app-shell breakpoint the edit/create form opens as a full-screen view
   (its own header + footer) rather than a floating dialog. It fills the viewport and
   scrolls INTERNALLY — the base .pp-modal has overflow:hidden, so without an explicit
   overflow-y the form below the fold would be clipped and unreachable. */
@media (max-width: 720px) {
  .pp-modal-backdrop {
    padding: 0;
  }
  .pp-modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Confirm dialog — the themed replacement for the native confirm() that htmx's
   hx-confirm would otherwise trigger. Built + torn down from src/client/admin.ts;
   sits above the modal (z 40) and toast (z 50). */
.pp-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 68, 47, 0.42);
  animation: pp-confirm-fade 0.15s ease-out;
}
.pp-confirm {
  width: 380px;
  max-width: 100%;
  background: var(--pp-card);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  padding: 24px 24px 20px;
  animation: pp-confirm-pop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.pp-confirm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fbe7e2;
  color: var(--pp-red-text);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 14px;
}
.pp-confirm--neutral .pp-confirm__icon {
  background: var(--pp-cream);
  color: var(--pp-turf-to);
}
.pp-confirm__title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--pp-ink);
}
.pp-confirm__msg {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--pp-text-soft);
}
.pp-confirm__actions {
  display: flex;
  gap: 10px;
}
.pp-confirm__actions .pp-btn {
  flex: 1;
}
@keyframes pp-confirm-fade {
  from {
    opacity: 0;
  }
}
@keyframes pp-confirm-pop {
  from {
    transform: scale(0.94);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp-confirm-backdrop,
  .pp-confirm {
    animation: none;
  }
}

/* Manage layout */
.pp-manage-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 22px;
  align-items: start;
}
/* Stack to one column while there's still room: in two columns the entries
   card shrinks below the row's fixed widths (~398px) and clips the actions. */
@media (max-width: 900px) {
  .pp-manage-grid {
    grid-template-columns: 1fr;
  }
}
.pp-entries-row {
  display: grid;
  grid-template-columns: 44px 1fr 130px 70px 74px;
  gap: 10px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f0ead9;
}
/* Games without teams drop the Team column so the grid stays aligned. */
.pp-entries-row--noteam {
  grid-template-columns: 44px 1fr 70px 74px;
}
.pp-entries-row--edit {
  background: #fbfcf8;
  box-shadow: inset 3px 0 0 var(--pp-turf-from);
}
.pp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  background: var(--pp-admin);
  color: var(--pp-text-soft);
}
.pp-iconbtn--del {
  background: #fbe7e2;
  color: var(--pp-red-text);
}
.pp-iconbtn--ok {
  background: var(--pp-turf-from);
  color: #fff;
}
.pp-danger-zone {
  margin-top: 22px;
  background: #fcf1ee;
  border: 1.5px solid #f1c4b9;
  border-radius: 18px;
  padding: clamp(14px, 4vw, 24px);
}
.pp-danger-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.pp-danger-bang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp-flag);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pp-danger-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--pp-red-text);
}
.pp-danger-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 760px) {
  .pp-danger-grid {
    grid-template-columns: 1fr;
  }
}
.pp-danger-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(11px, 3.5vw, 15px);
  background: var(--pp-card);
  border: 1px solid #f1cfc6;
  border-radius: 14px;
}
.pp-danger-cell-t {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--pp-ink);
}
.pp-danger-cell-n {
  flex: 1;
  font-family: var(--font-body);
  font-size: 12px;
  color: #8a6258;
  line-height: 1.4;
}
.pp-danger-btn {
  width: 100%;
}

/* ---- Utility ---- */
.pp-divider-dotted {
  height: 2px;
  background-image: linear-gradient(90deg, #c9bfa6 0 10px, transparent 10px 18px);
  background-size: 18px 2px;
}

/* Radio-segmented control (create/edit form) — JS-free via :has() */
.pp-seg--radio label {
  position: relative;
  flex: 1;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--pp-text-soft);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}
.pp-seg--radio input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.pp-seg--radio label:has(input:checked) {
  color: var(--pp-card);
  background: var(--pp-turf-from);
}

/* Icon variant (entry-mode picker): a leading glyph + label, sized to span the
   full form width with roomier tap targets. */
.pp-seg--icons label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 10px;
  font-size: 14px;
}
.pp-seg--icons svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.8;
}
.pp-seg--icons label:has(input:checked) svg {
  opacity: 1;
}

/* Checkbox switch (form field) */
.pp-switch-field {
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--pp-silver);
  padding: 3px;
  cursor: pointer;
  flex: none;
  transition: background 0.15s ease;
}
.pp-switch-field input {
  display: none;
}
.pp-switch-field .knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pp-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: margin 0.15s ease;
}
.pp-switch-field:has(input:checked) {
  background: var(--pp-turf-from);
}
.pp-switch-field:has(input:checked) .knob {
  margin-left: auto;
}

/* ---- Themed date picker (calendar popover) ---- */
.pp-datepicker {
  position: relative;
}
.pp-datepicker__input {
  padding-right: 50px;
}
.pp-datepicker__btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: var(--pp-turf-grad);
  color: var(--pp-cream);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(20, 68, 47, 0.25);
  transition: filter 0.12s ease;
}
.pp-datepicker__btn:hover {
  filter: brightness(1.07);
}
.pp-datepicker__btn:focus-visible {
  outline: 2px solid var(--pp-turf-from);
  outline-offset: 2px;
}
/* A little waving flag, echoing the brand mark. */
.pp-datepicker__flag {
  position: relative;
  width: 15px;
  height: 15px;
}
.pp-datepicker__flag::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 2px;
  height: 13px;
  background: currentColor;
  border-radius: 1px;
}
.pp-datepicker__flag::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 8px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pp-cal {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 300px;
  max-width: calc(100vw - 40px);
  background: var(--pp-card);
  border: 1.5px solid var(--pp-border-cream);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20, 38, 31, 0.22);
  overflow: hidden;
  animation: pp-cal-in 0.14s ease-out;
}
@keyframes pp-cal-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pp-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  background: var(--pp-turf-grad);
  color: var(--pp-cream);
}
.pp-cal__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.2px;
}
.pp-cal__nav {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--pp-cream);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease;
}
.pp-cal__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}
.pp-cal__nav:focus-visible {
  outline: 2px solid var(--pp-cream);
  outline-offset: 1px;
}
.pp-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 10px 12px 4px;
}
.pp-cal__wd {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--pp-text-faint);
  padding-bottom: 4px;
}
.pp-cal__day {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--pp-ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  position: relative;
  transition:
    background 0.1s ease,
    color 0.1s ease;
}
.pp-cal__day:hover {
  background: var(--pp-cream);
}
.pp-cal__day--we {
  color: var(--pp-text-soft);
}
.pp-cal__day--out {
  color: var(--pp-text-faint);
  opacity: 0.55;
}
.pp-cal__day--today {
  box-shadow: inset 0 0 0 1.5px var(--pp-turf-from);
  color: var(--pp-green-text);
}
/* Golf-ball dot under today's number. */
.pp-cal__day--today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--pp-turf-from);
}
.pp-cal__day--selected,
.pp-cal__day--selected:hover {
  background: var(--pp-flag);
  color: #fff;
  box-shadow: 0 2px 0 var(--pp-flag-press);
}
.pp-cal__day--selected::after {
  display: none;
}
.pp-cal__day:focus-visible {
  outline: 2px solid var(--pp-turf-from);
  outline-offset: 1px;
}
.pp-cal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 12px 12px;
}
.pp-cal__today-btn {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--pp-green-text);
  background: var(--pp-cream);
  border: 1.5px solid var(--pp-border-input);
  border-radius: 9px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.pp-cal__today-btn:hover {
  background: #eef3ea;
}

/* ---- Print: entry QR sheet (admin "Drucken") ---- */
.pp-print-only {
  display: none;
}
/* Hang-up flyer layout (rendered only when printing) */
.pp-print-sheet {
  text-align: center;
  padding: 52px 40px;
  color: var(--pp-ink);
}
.pp-print-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.pp-print-wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 24px;
  color: var(--pp-turf-to);
}
.pp-print-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.1;
  color: var(--pp-turf-to);
  margin: 0;
}
.pp-print-meta {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--pp-text-soft);
  margin-top: 10px;
}
.pp-print-qr {
  display: inline-flex;
  justify-content: center;
  margin: 36px 0 26px;
  padding: 20px;
  border: 3px solid var(--pp-turf-from);
  border-radius: 28px;
}
.pp-print-cta {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.3;
  color: var(--pp-ink);
  max-width: 420px;
  margin: 0 auto;
}
.pp-print-url {
  font-size: 14px;
  color: var(--pp-text-soft);
  margin-top: 20px;
}
@media print {
  body {
    background: #fff;
  }
  .pp-no-print {
    display: none;
  }
  .pp-print-only {
    display: block;
  }
  /* Print the brand mark + QR frame reliably (don't drop background graphics). */
  .pp-print-sheet {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================================================
   LANDING
   ========================================================================== */
.pp-body--landing {
  background: var(--pp-page-bg);
}
.pp-landing-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
}
.pp-landing-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--pp-turf-to);
}
.pp-login {
  margin-left: auto;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--pp-text-soft);
  text-decoration: none;
  background: var(--pp-card);
  border: 1px solid var(--pp-border-cream);
  border-radius: 999px;
  padding: 8px 14px;
}

.pp-hero {
  /* Same muted minigolf pitches as the entry screen, tucked into the band's
       corners and bottom edge so they accent the turf without crowding the
       headline (top-left) or the screenshot (right column). Decorative only —
       the SVGs are aria-hidden. */
  background-image:
    url("/img/pitch-5.svg"), url("/img/pitch-2.svg"), url("/img/pitch-4.svg"), var(--pp-turf-grad);
  background-repeat: no-repeat;
  background-position:
    left -34px top -8px,
    left 3% bottom -22px,
    right 4% bottom -18px,
    center;
  background-size:
    170px auto,
    205px auto,
    195px auto,
    cover;
  color: var(--pp-cream);
}
.pp-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}
.pp-hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 16px;
  color: #fffdf8;
}
.pp-hero p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  color: rgba(246, 241, 230, 0.82);
  margin: 0 0 26px;
  max-width: 30em;
}
.pp-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pp-hero-shot img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: block;
}

.pp-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px;
}
.pp-section h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--pp-turf-to);
  text-align: center;
  margin: 0 0 8px;
}
.pp-lead {
  text-align: center;
  font-family: var(--font-body);
  color: var(--pp-text-soft);
  margin: 0 auto 36px;
  max-width: 34em;
}
.pp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pp-step {
  background: var(--pp-card);
  border: 1px solid var(--pp-border-cream);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(22, 38, 31, 0.06);
}
.pp-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pp-flag);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  margin-bottom: 12px;
}
.pp-step h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--pp-ink);
  margin: 0 0 6px;
}
.pp-step p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--pp-text-soft);
  margin: 0;
  line-height: 1.5;
}

.pp-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}
.pp-feature:last-child {
  margin-bottom: 0;
}
.pp-feature-img img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(20, 68, 47, 0.18);
  display: block;
}
.pp-feature h3 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--pp-turf-to);
  margin: 0 0 10px;
}
.pp-feature p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--pp-text-muted);
  line-height: 1.55;
  margin: 0;
}

.pp-cta-band {
  /* Decorative pitches flank the centred call-to-action in the otherwise
       empty green margins. Dropped on narrow screens (see media query) where
       they'd sit under the text. */
  background-image: url("/img/pitch-1.svg"), url("/img/pitch-6.svg"), var(--pp-turf-grad);
  background-repeat: no-repeat;
  background-position:
    left 5% center,
    right 5% center,
    center;
  background-size:
    205px auto,
    205px auto,
    cover;
  color: var(--pp-cream);
  text-align: center;
}
.pp-cta-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px;
}
.pp-cta-band h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 34px);
  color: #fffdf8;
  margin: 0 0 18px;
}

.pp-landing-foot {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 48px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pp-text-faint);
  flex-wrap: wrap;
}
.pp-landing-foot a {
  color: var(--pp-text-soft);
}

@media (max-width: 760px) {
  .pp-hero-inner,
  .pp-feature {
    grid-template-columns: 1fr;
  }
  .pp-hero-shot {
    order: -1;
  }
  .pp-steps {
    grid-template-columns: 1fr;
  }
  /* The flanking CTA pitches would sit under the centred text once the band
       narrows; keep just the gradient there. The hero's corner pitches stay —
       they hug the edges and read fine on phones. */
  .pp-cta-band {
    background: var(--pp-turf-grad);
  }
}

/* Injected legal HTML (generated Datenschutz). Brand the headings + links so the
   raw markup matches the hand-written Impressum. */
.pp-legal h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 28px;
  color: var(--pp-turf-to);
  margin: 0 0 18px;
}
.pp-legal h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--pp-turf-to);
  margin: 28px 0 8px;
}
.pp-legal h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--pp-turf-to);
  margin: 18px 0 6px;
}
.pp-legal a {
  color: var(--pp-green-text, #2e8b57);
}
.pp-legal ul {
  padding-left: 20px;
}
.pp-legal li {
  margin: 4px 0;
}
.pp-legal .seal {
  margin-top: 32px;
  font-size: 12px;
  color: var(--pp-text-soft);
}

/* ============================================================================
   Scorekeeper (Phase 2): manager roster + order surfaces, board warming-up strip.
   Phone-first — the manager scores while walking the course, so tap targets are
   generous — but comfortable on the kiosk/laptop too.
   ========================================================================== */

/* ---- Manager tab strip (per_hole games) ---- */
.pp-station {
  min-width: 0;
}
.pp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
/* Desktop-only tab strip (the phone shell swaps to the bottom nav below 720px), so
   it can afford some personality. Styled to speak the app's pressable-key button
   language: a flat offset shadow that compresses on click, a leading nav glyph
   (shared with the bottom nav), and a turf-gradient active pill that lifts and glows
   so the selected section clearly pops instead of reading as a flat swatch. */
.pp-tab {
  flex: 1 1 auto;
  min-width: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--pp-text-muted);
  background: var(--pp-card);
  border: 1.5px solid var(--pp-border-cream);
  border-radius: 13px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 #e6ddca;
  transition:
    transform 0.06s ease,
    box-shadow 0.12s ease,
    background 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease;
}
.pp-tab svg {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: 0.7;
  transition: opacity 0.14s ease;
}
.pp-tab:hover {
  border-color: #cfdccf;
  color: var(--pp-green-text);
}
.pp-tab:hover svg {
  opacity: 1;
}
.pp-tab:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #e6ddca;
}
.pp-tab.is-active {
  color: var(--pp-card);
  background: var(--pp-turf-grad);
  border-color: transparent;
  box-shadow:
    0 4px 0 #0b2418,
    0 9px 20px rgba(20, 68, 47, 0.26);
}
.pp-tab.is-active svg {
  opacity: 1;
}
.pp-tab.is-active:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #0b2418;
}
.pp-tab--soon {
  opacity: 0.5;
  cursor: default;
}
.pp-station-panel {
  min-width: 0;
}

/* ---- Scorecard (Tabelle): a minigolf scoresheet, horizontally scrollable ---- */
/* One row per player (ranked); the player column is sticky-left and the total    */
/* column sticky-right, so the Bahn columns scroll between them on a phone.        */
.pp-sc-wrap {
  background: var(--pp-card);
  border: 1px solid var(--pp-border-cream);
  border-radius: 16px;
  overflow: hidden;
}
.pp-sc-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--pp-border-cream);
  background: var(--pp-panel-head);
}
.pp-sc-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 16px;
  color: var(--pp-ink);
}
.pp-sc-sub {
  color: var(--pp-text-faint);
  font-weight: 600;
  font-size: 13px;
}
.pp-sc-bar .pp-btn {
  margin-left: auto;
  flex: none;
}
.pp-sc-empty {
  padding: 30px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--pp-text-soft);
  line-height: 1.5;
}
.pp-sc-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.pp-sctable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 13px;
  white-space: nowrap;
}
.pp-sctable th,
.pp-sctable td {
  border-bottom: 1px solid var(--pp-border-cream);
}
/* Header row: turf-green band with white hole numbers. */
.pp-sctable thead th {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  background: var(--pp-turf-to);
  padding: 9px 4px;
}
/* Bahn (hole) columns — centred, tabular figures. width:auto (not a fixed 34px)
   makes these the flexible columns, so when the table is wider than its content
   (few holes on a laptop) the slack spreads evenly across the Bahnen instead of
   bloating the name column. They never shrink below 34px, so a full 18-hole board
   still scrolls between the sticky name/total columns on a phone. */
.pp-sc-c-hole {
  width: auto;
  min-width: 34px;
  text-align: center;
  padding: 9px 4px;
  color: var(--pp-text);
  font-variant-numeric: tabular-nums;
}
.pp-sc-c-empty {
  color: var(--pp-text-faint);
}
/* Player column — sticky to the left edge while the Bahnen scroll. width:1% keeps
   it minimised to its content (bounded by min/max below) rather than being the lone
   auto column that soaks up all the table's slack. */
.pp-sc-c-name {
  position: sticky;
  left: 0;
  text-align: left;
  padding: 8px 12px 8px 10px;
  width: 1%;
  min-width: 132px;
  max-width: 168px;
  white-space: nowrap;
}
.pp-sctable thead .pp-sc-c-name {
  z-index: 3;
  background: var(--pp-turf-to);
}
.pp-sctable tbody .pp-sc-c-name {
  z-index: 2;
  background: var(--pp-card);
  box-shadow: 6px 0 7px -6px rgba(20, 40, 30, 0.28);
}
.pp-sc-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  flex: none;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--pp-admin);
  color: var(--pp-text-soft);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  vertical-align: middle;
}
.pp-sc-who {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  min-width: 0;
  max-width: 122px;
}
.pp-sc-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--pp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-sc-team {
  font-size: 10.5px;
  color: var(--pp-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Medal accents for the top three (rank badge + a coloured left edge). */
.pp-sc-row--gold .pp-sc-rank {
  background: var(--pp-gold);
  color: #4a3a08;
}
.pp-sc-row--silver .pp-sc-rank {
  background: var(--pp-silver);
  color: #2b302e;
}
.pp-sc-row--bronze .pp-sc-rank {
  background: var(--pp-bronze);
  color: #38200d;
}
.pp-sctable tbody .pp-sc-row--gold .pp-sc-c-name {
  box-shadow:
    inset 3px 0 0 var(--pp-gold),
    6px 0 7px -6px rgba(20, 40, 30, 0.28);
}
.pp-sctable tbody .pp-sc-row--silver .pp-sc-c-name {
  box-shadow:
    inset 3px 0 0 var(--pp-silver),
    6px 0 7px -6px rgba(20, 40, 30, 0.28);
}
.pp-sctable tbody .pp-sc-row--bronze .pp-sc-c-name {
  box-shadow:
    inset 3px 0 0 var(--pp-bronze),
    6px 0 7px -6px rgba(20, 40, 30, 0.28);
}
/* Total column — sticky to the right edge, emphasised. */
.pp-sc-c-tot {
  position: sticky;
  right: 0;
  width: 48px;
  min-width: 48px;
  text-align: center;
  padding: 9px 6px;
  font-family: var(--font-head);
  font-weight: 800;
}
.pp-sctable thead .pp-sc-c-tot {
  z-index: 3;
  background: var(--pp-turf-from);
}
.pp-sctable tbody .pp-sc-c-tot {
  z-index: 2;
  color: var(--pp-turf-to);
  background: var(--pp-panel-head);
  box-shadow: -6px 0 7px -6px rgba(20, 40, 30, 0.28);
}
.pp-sctable tbody tr:last-child th,
.pp-sctable tbody tr:last-child td {
  border-bottom: none;
}
/* "Warming up" — staged players with no score yet. */
.pp-sc-pending {
  padding: 10px 16px;
  border-top: 1px solid var(--pp-border-cream);
  background: var(--pp-panel-head);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--pp-text-soft);
  line-height: 1.5;
}
.pp-sc-pending-lbl {
  font-weight: 700;
  color: var(--pp-text-faint);
}

/* ---- Roster (Aufstellung + Reihenfolge): add card + ordered list card ---- */
.pp-roster-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Add card */
.pp-roster-add-card {
  padding: 16px 18px;
}
.pp-roster-add-h {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--pp-ink);
}
.pp-roster-add-sub {
  margin: 2px 0 12px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--pp-text-soft);
  line-height: 1.45;
}
/* Ordered list card */
.pp-roster {
  padding: 0;
  overflow: hidden;
}
.pp-roster-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #ece5d3;
  background: var(--pp-panel-head);
}
.pp-roster-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--pp-ink);
}
.pp-roster-count {
  color: var(--pp-text-faint);
  font-weight: 600;
}
.pp-roster-hint {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--pp-text-faint);
}
.pp-roster-shuffle {
  margin-left: auto;
  flex: none;
}

.pp-roster-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pp-roster-add-plus {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pp-turf-from);
  color: #fff;
}
.pp-roster-add .pp-input {
  flex: 1 1 150px;
  min-width: 0;
}
.pp-roster-team-input {
  flex: 1 1 110px;
}
.pp-roster-add-btn {
  flex: none;
}
.pp-roster-err {
  padding: 8px 0 0;
}

.pp-roster-empty {
  text-align: center;
  padding: 30px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--pp-text-soft);
  line-height: 1.5;
}

.pp-roster-list {
  display: flex;
  flex-direction: column;
}
.pp-roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 8px;
  border-bottom: 1px solid #f0ead9;
  background: var(--pp-card);
}
/* Drag handle (⠿) — touch-action:none so a touch-drag from the grip never scrolls. */
.pp-roster-grip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--pp-text-faint);
  font-size: 17px;
  line-height: 1;
  border-radius: 8px;
  cursor: grab;
  touch-action: none;
}
.pp-roster-grip:hover {
  background: var(--pp-admin);
  color: var(--pp-text-soft);
}
.pp-roster-grip:active {
  cursor: grabbing;
}
.pp-roster-grip--idle {
  opacity: 0.35;
  cursor: default;
}
/* The lifted row while dragging (position:fixed is set inline by admin.ts). */
.pp-roster-row--drag {
  border-radius: 12px;
  border-bottom-color: transparent;
  box-shadow: 0 14px 30px rgba(20, 68, 47, 0.18);
}
/* Drop slot that follows the pointer (height set inline, minus the vertical margin). */
.pp-roster-ph {
  margin: 6px 10px;
  border: 1.5px dashed var(--pp-turf-from);
  border-radius: 10px;
  background: rgba(46, 139, 87, 0.07);
}
.pp-roster-pos {
  flex: none;
  width: 22px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--pp-text-faint);
  font-variant-numeric: tabular-nums;
}
.pp-roster-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pp-roster-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--pp-ink);
}
.pp-roster-team {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--pp-text-soft);
}
/* Bigger tap targets than the desktop entries table — a thumb on the course. */
.pp-roster-row .pp-iconbtn {
  width: 38px;
  height: 38px;
  font-size: 16px;
}

/* Progress / pending chips */
.pp-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.pp-chip--wait {
  background: #ece9df;
  color: var(--pp-text-soft);
}
.pp-chip--thru {
  background: #fbf3dd;
  color: var(--pp-green-text);
  border: 1px solid #ecd9a3;
}
.pp-chip--done {
  background: #e4f0e8;
  color: var(--pp-green-text);
  border: 1px solid #bcdcc8;
}

@media (max-width: 520px) {
  .pp-roster-add-btn {
    flex: 1 1 100%;
  }
  .pp-roster-hint {
    display: none;
  }
}

/* ---- Board: "warming up" strip (staged roster players, no score yet) ----
   Rendered on the turf inside #pp-board-live, in the sparse-filler visual
   language: faint dashed cream chips, so the board shows the field assembling. */
.pp-warmup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px clamp(20px, 3vw, 40px) 18px;
}
.pp-warmup-h {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: 0.02em;
  color: rgba(246, 241, 230, 0.6);
  margin-right: 4px;
}
.pp-warm-name {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(12px, 1.05vw, 14px);
  color: rgba(246, 241, 230, 0.85);
  background: rgba(255, 253, 248, 0.1);
  border: 1px dashed rgba(246, 241, 230, 0.28);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ============================================================================
   Scorekeeper (Phase 3): hole-by-hole station. Phone-first — the manager scores
   one-handed on the course, so the current player gets a big card + big numeric
   field + one prominent "Speichern & weiter"; the others are a compact status
   list. Comfortable on the kiosk/laptop too.
   ========================================================================== */
.pp-stn-wrap {
  min-width: 0;
}
.pp-stn {
  padding: 0;
  overflow: hidden;
}

/* ---- Header: Bahn N / M with ◀ ▶ steppers ---- */
.pp-stn-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #ece5d3;
  background: var(--pp-panel-head);
}
.pp-stn-step {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--pp-border-cream);
  background: var(--pp-card);
  color: var(--pp-green-text);
  font-size: 17px;
  cursor: pointer;
}
.pp-stn-step:disabled {
  opacity: 0.38;
  cursor: default;
}
.pp-stn-hole {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
.pp-stn-hole-label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-text-faint);
}
.pp-stn-hole-num {
  font-family: var(--font-score);
  font-size: 30px;
  color: var(--pp-turf-to);
}
.pp-stn-hole-of {
  font-size: 18px;
  color: var(--pp-text-faint);
}

/* ---- Current-player card ---- */
.pp-stn-card {
  display: block;
  padding: 20px;
  border-bottom: 1px solid #ece5d3;
  background: linear-gradient(180deg, #fbfcf8, var(--pp-card));
  box-shadow: inset 4px 0 0 var(--pp-turf-from);
}
.pp-stn-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.pp-stn-card-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp-stn-dran {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pp-turf-from);
  border-radius: 999px;
  padding: 3px 9px;
}
.pp-stn-card-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--pp-ink);
}
.pp-stn-card-team {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--pp-text-soft);
}
.pp-stn-card-thru {
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  color: var(--pp-green-text);
  background: #fbf3dd;
  border: 1px solid #ecd9a3;
  border-radius: 999px;
  padding: 5px 11px;
  white-space: nowrap;
}
.pp-stn-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.pp-stn-input {
  width: 100%;
  font-family: var(--font-score);
  font-size: 40px;
  text-align: center;
  color: var(--pp-ink);
  background: var(--pp-cream);
  border: 1.5px solid var(--pp-border-input);
  border-radius: 14px;
  padding: 16px;
  outline: none;
  font-feature-settings: "tnum" 1;
}
.pp-stn-input:focus {
  border-color: var(--pp-turf-from);
}
.pp-stn-input:focus-visible {
  outline: 2px solid var(--pp-turf-from);
  outline-offset: 2px;
}
.pp-stn-badge {
  position: absolute;
  right: 14px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--pp-red-text);
  background: #fbe7e2;
  border: 1px solid #f1c4b9;
  border-radius: 999px;
  padding: 4px 10px;
}
.pp-stn-hint {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--pp-text-soft);
  text-align: center;
}
.pp-stn-err {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pp-red-text);
  text-align: center;
}
.pp-stn-save {
  margin-top: 16px;
}

/* ---- Hole-complete / round-complete states ---- */
.pp-stn-done {
  padding: 22px 20px;
  border-bottom: 1px solid #ece5d3;
  text-align: center;
}
.pp-stn-done-note {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--pp-text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.pp-stn-done--final {
  background: linear-gradient(180deg, #fbf3dd, var(--pp-card));
}
.pp-stn-final-badge {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 6px;
}
.pp-stn-final-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--pp-turf-to);
}
.pp-stn-final-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--pp-text-soft);
  margin: 4px 0 18px;
}

/* ---- Compact status list of the other players ---- */
.pp-stn-list {
  display: flex;
  flex-direction: column;
}
.pp-stn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #f0ead9;
}
.pp-stn-row--scored {
  background: #fbfcf8;
}
.pp-stn-pos {
  flex: none;
  width: 24px;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--pp-text-faint);
}
.pp-stn-row-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pp-stn-row-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--pp-ink);
}
.pp-stn-row-team {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--pp-text-soft);
}
.pp-stn-row-val {
  flex: none;
  font-family: var(--font-score);
  font-size: 22px;
  color: var(--pp-green-text);
  font-feature-settings: "tnum" 1;
}
.pp-stn-row-open {
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--pp-text-soft);
  background: #ece9df;
  border-radius: 999px;
  padding: 5px 11px;
}
.pp-stn-edit {
  width: 38px;
  height: 38px;
  font-size: 16px;
}

.pp-stn-empty {
  text-align: center;
  padding: 30px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--pp-text-soft);
  line-height: 1.5;
}

/* ---- Reset-round footer (distinct from the DangerZone's full reset) ---- */
.pp-stn-foot {
  display: flex;
  justify-content: center;
  padding: 14px 0 2px;
}

/* ============================================================================
   Scorekeeper (Phase 5): organiser "Helfer-Link" (scorer share) block on the
   manage page, and the reduced-caps helper page (/s) itself — phone-first, since
   a helper scores on their own phone. Hardcoded-German organiser surfaces.
   ========================================================================== */
/* ---- Share column: unified QR/link tiles (entry / board / helper) ---- */
.pp-share {
  padding: clamp(14px, 4vw, 22px);
}
.pp-share-h {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  color: var(--pp-ink);
}
.pp-share-sub {
  margin: 4px 0 16px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--pp-text-soft);
  line-height: 1.45;
}
.pp-share-tiles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* QR + info auto-place into row 1 (col 1 / col 2); the actions row spans both
   columns below — single-class selectors only, no descending-specificity. */
.pp-share-tile {
  display: grid;
  grid-template-columns: 84px 1fr;
  column-gap: clamp(10px, 3vw, 14px);
  row-gap: 11px;
  align-items: center;
  padding: clamp(10px, 3vw, 14px);
  background: var(--pp-cream);
  border: 1px solid var(--pp-border-cream);
  border-radius: 15px;
}
.pp-share-tile--feature {
  border: 1.5px solid #ecd9a3;
  background: #fdfaf0;
}
/* Placeholder square for the not-yet-minted helper tile. */
.pp-share-tile-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 1.5px dashed #cfc6ac;
  background: var(--pp-card);
  font-size: 30px;
}
.pp-share-tile-body {
  min-width: 0;
}
.pp-share-tile-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.pp-share-tile-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pp-ink);
}
.pp-share-tag {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.pp-share-tag--sunny {
  background: var(--pp-sunny);
  color: var(--pp-turf-to);
}
.pp-share-tag--muted {
  background: #e4e0d3;
  color: var(--pp-text-soft);
}
.pp-share-tag--green {
  background: #dbeee2;
  color: var(--pp-green-text);
}
.pp-share-tile-cap {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--pp-text-soft);
  line-height: 1.4;
}
.pp-share-tile-url {
  font-size: 10px;
  color: var(--pp-text-soft);
  word-break: break-all;
  margin: 7px 0 0;
}
/* Actions span the full tile width below the QR + info, so they stay thumb-sized
   and never clip on narrow screens. */
.pp-share-tile-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}
.pp-share-tile-actions .pp-btn {
  flex: 1;
}
/* Every "Link kopieren" reads the same across tiles — a white key with green text
   that pops on the cream tile (not the loud red / washed-out cream it used to be). */
.pp-share-tile-actions .pp-btn--secondary {
  background: var(--pp-card);
  border-color: #cfdccf;
}

/* ---- Helper (/s) page ---- */
/* Single centred column (no share/settings column like the owner manage grid), so
   it can take the same width the manage page gives its station column (~1180 − the
   340px settings rail). At the old 620px it read as a cramped phone card stranded
   in the middle of a laptop screen. */
.pp-scorer-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.pp-scorer-head {
  margin-bottom: 18px;
}
.pp-scorer-titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pp-scorer-title {
  margin: 0;
  font-weight: 800;
  font-size: 24px;
  color: var(--pp-turf-to);
}
.pp-scorer-titlerow .pp-btn {
  margin-left: auto;
}
.pp-scorer-note {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--pp-text-soft);
  line-height: 1.45;
}

/* ===================================================================== */
/* Manage: mobile app-shell (bottom nav). Desktop keeps the two-column   */
/* grid unchanged; below 720px the page becomes a phone app with a fixed */
/* app bar + bottom navigation, showing one section at a time.           */
/* ===================================================================== */
.pp-manage-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.pp-mobile-only {
  display: none;
}

/* --- Mobile app bar --- */
.pp-mbar {
  align-items: center;
  gap: 10px;
  /* Break out of the wrap's 10px top / 14px side padding so the bar is a
     full-bleed app bar pinned flush to the very top. Without the negative top
     margin the wrap's padding sat above it, so the "sticky" bar first scrolled
     up ~10px with the content before pinning. */
  margin: -10px -14px 12px;
  padding: 10px 14px 12px;
  position: sticky;
  top: 0;
  z-index: 30;
  /* Match the admin body so the sticky bar blends instead of reading as an inset
     grey band; a hairline separates it from content scrolling underneath. */
  background: var(--pp-admin);
  border-bottom: 1px solid #e2dccb;
}
.pp-mbar-back {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pp-card);
  color: var(--pp-text-soft);
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 2px 0 #e0d8c2;
}
.pp-mbar-title {
  flex: 1;
  min-width: 0;
}
.pp-mbar-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 19px;
  color: var(--pp-turf-to);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-mbar-sub {
  font-size: 11px;
  color: var(--pp-text-faint);
}

/* Status collapsed into one pill (colours driven by [data-manage][data-status]) */
.pp-mpill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid transparent;
}
.pp-mpill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
[data-manage][data-status="open"] .pp-mpill {
  background: #e4f0e8;
  color: var(--pp-green-text);
  border-color: #bcdcc8;
}
[data-manage][data-status="open"] .pp-mpill-dot {
  background: var(--pp-turf-from);
}
[data-manage][data-status="locked"] .pp-mpill {
  background: #f3e4df;
  color: var(--pp-red-text);
  border-color: #e6c3b8;
}
[data-manage][data-status="locked"] .pp-mpill-dot {
  background: var(--pp-flag);
}

/* --- "Mehr" section: full status toggle + quick links --- */
.pp-more-links {
  margin-bottom: 16px;
}
.pp-more-lbl {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--pp-text-faint);
  margin: 0 0 8px 2px;
}
.pp-more-hint {
  margin: -4px 2px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--pp-text-soft);
}
/* Inlaid sliding switch: a recessed track with a raised thumb that slides between
   Offen / Gesperrt, driven by [data-manage][data-status]. */
.pp-mstatus {
  position: relative;
  display: flex;
  background: #e2ddce;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 3px rgba(20, 40, 30, 0.16);
}
.pp-mstatus::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: var(--pp-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s ease;
}
.pp-mstatus button {
  position: relative;
  z-index: 1;
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 11px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  color: var(--pp-text-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}
[data-manage][data-status="open"] .pp-mstatus [data-status-set="open"] {
  color: var(--pp-green-text);
}
[data-manage][data-status="locked"] .pp-mstatus [data-status-set="locked"] {
  color: var(--pp-red-text);
}
[data-manage][data-status="locked"] .pp-mstatus::before {
  transform: translateX(100%);
  background: #fbeeea;
}
.pp-morelink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px;
  margin-bottom: 8px;
  background: var(--pp-card);
  border: 1px solid var(--pp-border-cream);
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--pp-ink);
}
.pp-morelink-chev {
  color: var(--pp-text-faint);
  font-size: 18px;
}

/* --- Bottom navigation --- */
.pp-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--pp-card);
  border-top: 1px solid #d8d1c0;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}
.pp-navbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 5px 2px;
  border-radius: 12px;
  color: var(--pp-text-faint);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10.5px;
}
.pp-navbtn svg {
  width: 23px;
  height: 23px;
}
.pp-navicon {
  width: 46px;
  height: 29px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.pp-navbtn.is-active {
  color: var(--pp-turf-from);
}
.pp-navbtn.is-active .pp-navicon {
  background: #e4f0e8;
}

@media (max-width: 720px) {
  .pp-desk-only {
    display: none;
  }
  .pp-mbar {
    display: flex;
  }
  .pp-more-links {
    display: block;
  }
  .pp-bottomnav {
    display: grid;
  }
  /* One section at a time; the bottom nav (not the sub-tab strip) switches them. */
  .pp-msec {
    display: none;
  }
  .pp-msec.is-shown {
    display: block;
  }
  .pp-tabs {
    display: none;
  }
  .pp-manage-grid {
    display: block;
  }
  .pp-admin-wrap.pp-manage {
    padding: 10px 14px 92px;
  }
}