/* --------------------------------------------------------------------------
   The Global Relevance of Padel — access gate and subscriber admin.
   Tokens deliberately mirror the report itself, so the sign-in screen reads
   as the first page of the same document rather than a bolted-on form.
   -------------------------------------------------------------------------- */

:root {
  --navy-900: #08182b;
  --navy-800: #0e2741;
  --navy-700: #123255;
  --navy:     #002c5c;
  --sky-600:  #1576a8;
  --sky:      #29aae1;
  --sky-300:  #6cc4ea;
  --sky-100:  #d5eef9;
  --sky-050:  #edf6fd;
  --orange:   #ff6000;

  --ink:     #11233b;
  --slate:   #59637e;
  --muted:   #8a93a6;
  --line:    #dfe6ef;
  --line-d:  rgba(255, 255, 255, .12);
  --paper:   #ffffff;
  --paper-2: #f4f8fc;
  --bad:     #c8362b;
  --good:    #1a7f5a;

  --display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --head:    "Oswald", "Titillium Web", system-ui, sans-serif;
  --body:    "Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:      cubic-bezier(.2, .7, .2, 1);
  --shadow:    0 1px 2px rgba(0, 44, 92, .06), 0 8px 24px rgba(0, 44, 92, .08);
  --shadow-lg: 0 24px 60px rgba(0, 44, 92, .20);
  --radius:    10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
::selection { background: var(--sky); color: #fff; }

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: .92;
}

a { color: var(--sky-600); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- the gate */

.gate {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.gate--solo { grid-template-columns: 1fr; place-items: center; }

.gate__aside {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
  display: flex;
}

.gate__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Same crop the report's own hero uses, so the two show the same part of
     the photograph. */
  object-position: center 42%;
}

/* Treated the way the report treats its hero: the image is left at full
   opacity and all the darkening is done by the wash above it, in the same
   navy and with the same sky glow. The stops differ because the panels do.
   The report puts its text to one side and can fade the photograph across;
   this panel stacks title, figures and credit down its lower half, so the
   gradient runs vertically and closes hard at the bottom. That is also why
   it cannot go as clear in the middle as the report does. */
.gate__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 12% 8%, rgba(41, 170, 225, .18), transparent 62%),
    linear-gradient(180deg,
      rgba(6, 20, 36, .62) 0%,
      rgba(6, 20, 36, .56) 34%,
      rgba(6, 20, 36, .85) 62%,
      rgba(6, 20, 36, .95) 100%);
}

/* The upper band is deliberately left clear enough to see the photograph, and
   the lighter type sitting over it needs its own backing to stay legible on a
   bright sky. The title carries itself at that weight and size. */
.gate__eyebrow,
.gate__lede,
.gate__credit,
.gate__figure dt {
  text-shadow: 0 1px 12px rgba(6, 20, 36, .85);
}

.gate__aside-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 52px);
  padding: clamp(32px, 5vw, 72px);
  width: 100%;
}

.gate__brands { display: flex; align-items: center; gap: 18px; }
.gate__brand--fip { height: 34px; width: auto; }
.gate__brand--oe  { height: 22px; width: auto; opacity: .9; }
.gate__brand-sep  { width: 1px; height: 26px; background: var(--line-d); }

.gate__pitch { margin-top: auto; }

.gate__eyebrow {
  margin: 0 0 14px;
  font-family: var(--head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;

  /* The sky accent lands on the brightest part of the photograph, where it is
     close to the sky in hue as well as in brightness. What carries it is the
     wash below being dark enough up here, plus the shadow above — not the
     colour itself. Lighten that top stop and this line is the first thing to
     go. */
  color: var(--sky);
}

.gate__title {
  margin: 0;
  font-size: clamp(48px, 6.4vw, 92px);
  color: #fff;
}

.gate__lede {
  margin: 20px 0 0;
  max-width: 40ch;
  font-size: clamp(15px, 1.1vw, 17px);
  color: rgba(255, 255, 255, .72);
}

.gate__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 0;
  padding-top: clamp(20px, 3vh, 32px);
  border-top: 1px solid var(--line-d);
}

.gate__figure dt {
  font-family: var(--head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.gate__figure dd {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  color: #fff;
}

.gate__figure dd span { color: var(--sky); }

.gate__credit {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .42);
}

/* ------------------------------------------------------------- form panel */

.gate__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 64px);
  background: var(--paper);
}

.gate__form-wrap { width: 100%; max-width: 420px; }
.gate__form-wrap--wide { max-width: 560px; }

.gate__step {
  margin: 0 0 10px;
  font-family: var(--head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sky-600);
}

.gate__heading {
  margin: 0;
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  color: var(--navy-900);
}

.gate__sub { margin: 10px 0 30px; color: var(--slate); font-size: 15px; }

.gate__foot {
  margin: 34px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  font-family: var(--head);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------------- fields */

.field { margin-bottom: 20px; }
.field--tight { margin-bottom: 0; }

.field label,
.filters label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
}

.field input,
.field select,
.filters input,
.filters select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s;
}

.field select,
.filters select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%),
                    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.field input:hover,
.field select:hover { border-color: var(--sky-300); }

.field input:focus,
.field select:focus,
.filters input:focus,
.filters select:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(41, 170, 225, .16);
}

.field--bad input,
.field--bad select { border-color: var(--bad); background: #fdf5f4; }

.field__error { margin: 7px 0 0; font-size: 13px; color: var(--bad); }
.field__hint  { margin: 7px 0 0; font-size: 13px; color: var(--muted); }

.grid { display: grid; gap: 0 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The honeypot is off-screen rather than display:none, which bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consents {
  margin: 6px 0 26px;
  padding: 18px 20px;
  background: var(--sky-050);
  border: 1px solid var(--sky-100);
  border-radius: var(--radius);
}

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
  cursor: pointer;
}

.check + .check { margin-top: 14px; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--sky-600); flex: none; }
.check em { font-style: normal; color: var(--muted); font-size: 13px; }
.check--bad span { color: var(--bad); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background .24s var(--ease), border-color .24s, transform .24s var(--ease), box-shadow .24s;
}

.btn:hover {
  background: var(--sky-600);
  border-color: var(--sky-600);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 44, 92, .22);
}

.btn:active { transform: translateY(0); box-shadow: none; }
.btn__arrow { transition: transform .24s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper-2); color: var(--navy); border-color: var(--sky-300); box-shadow: none; }
.btn--sm { padding: 10px 18px; font-size: 11px; }

/* --------------------------------------------------------------- notices */

.notice {
  margin: 0 0 22px;
  padding: 13px 16px;
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: 14px;
}

.notice--bad { background: #fdf3f2; border-color: var(--bad); color: #8f2a22; }
.notice--ok  { background: #eff9f4; border-color: var(--good); color: #146144; }

/* ----------------------------------------------------------------- admin */

.admin { min-height: 100vh; background: var(--paper-2); }

.admin__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(18px, 3vw, 40px);
  height: 62px;
  background: var(--navy-900);
  border-bottom: 1px solid var(--line-d);
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin__identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin__logo { height: 26px; width: auto; }

.admin__title {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}

.admin__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--head);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.admin__nav a { color: var(--sky); }
.admin__nav a:hover { color: #fff; text-decoration: none; }
.admin__who { color: rgba(255, 255, 255, .5); }

.admin__body { padding: clamp(20px, 3vw, 36px) clamp(18px, 3vw, 40px) 64px; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat {
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-top: 3px solid var(--sky);
  box-shadow: var(--shadow);
}

.stat__value { display: block; font-size: 40px; line-height: 1; color: var(--navy-900); }

.stat__label {
  display: block;
  margin-top: 8px;
  font-family: var(--head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.filters {
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 18px;
}

.filters__row {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) repeat(4, minmax(110px, 1fr)) repeat(2, minmax(105px, .8fr)) auto;
  gap: 14px;
  align-items: end;
}

.filters__actions { display: flex; gap: 8px; }

.admin__resultbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.admin__count { margin: 0; font-size: 14px; color: var(--slate); }
.admin__count strong { color: var(--navy-900); font-size: 16px; }

.table-scroll {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }

/* Not sticky: inside the overflow-x wrapper a sticky header anchors to the
   wrapper rather than the page and sits on top of the first row. */
.table th {
  text-align: left;
  padding: 12px 16px;
  background: var(--navy-800);
  font-family: var(--head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
  white-space: nowrap;
}

.table th a { color: inherit; }
.table th a:hover { color: #fff; text-decoration: none; }
.table th a.is-sorted { color: var(--sky); }

.table td {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.table tbody tr { transition: background .18s; }
.table tbody tr:hover { background: var(--sky-050); }

.cell--name { font-weight: 600; color: var(--navy-900); white-space: nowrap; }
.cell--date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--slate); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--head);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tag--yes     { background: #e4f5ed; color: var(--good); }
.tag--no      { background: var(--paper-2); color: var(--muted); }
.tag--pending { background: rgba(255, 96, 0, .10); color: #b64500; }
.tag--admin { background: rgba(255, 96, 0, .12); color: var(--orange); margin-left: 8px; }

.empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pager__status { color: var(--muted); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 980px) {
  .gate { grid-template-columns: 1fr; }

  .gate__aside { min-height: 46vh; }

  .gate__figures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 12px; }

  .filters__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters__actions { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .grid--2 { grid-template-columns: 1fr; }
  .gate__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .gate__aside { min-height: 38vh; }
  .gate__title { font-size: clamp(38px, 12vw, 56px); }
  .filters__row { grid-template-columns: 1fr; }
  .admin__nav { gap: 14px; }
  .admin__who { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ----------------------------------------------------------- legal footer */

/* The gate and the admin screen each asked for a full viewport of their own.
   Handing the body a column and letting them grow into what is left puts the
   footer on the first screen instead of a scroll below it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.gate,
.admin {
  flex: 1 0 auto;
  min-height: 0;
}

.legal {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 14px clamp(18px, 3vw, 40px);
  background: var(--navy-900);
  color: rgba(255, 255, 255, .5);
  font-family: var(--head);
  font-size: 12px;
  letter-spacing: .08em;
}

.legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.legal__links a {
  color: var(--sky);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .22s;
}

.legal__links a:hover { color: #fff; }

.legal__links a:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 3px;
}

.legal__credit { margin: 0; }

@media (max-width: 620px) {
  .legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}