/* ==========================================================================
   PAM-Z · shared design system
   One theme for every page: light ocean palette, Baloo 2 + Inter + JetBrains Mono.
   Page-specific CSS should only add what is unique to that page and should
   use the tokens below instead of hard-coded colours.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --ocean-deep:    #072C4F;   /* header, headings, dark surfaces            */
  --ocean-deep-2:  #0A3A66;
  --turquoise:     #00C2CB;   /* decoration, borders, focus                  */
  --turquoise-dark:#049AA3;
  --accent-strong: #049AA3;   /* = turquoise-dark, matches homepage accent   */
  --coral:         #FF6B4A;
  --coral-dark:    #E5502F;
  --sun:           #FFD166;
  --sun-dark:      #E2A227;
  --sun-text:      #8A5A00;   /* amber that is readable as text on white     */
  --mint:          #EAFBFA;
  --mint-2:        #F3FEFE;

  /* --- Neutrals --------------------------------------------------------- */
  --ink:           #0B2A40;   /* body text                                   */
  --ink-soft:      #5A7A8C;   /* secondary text (matches homepage)           */
  --line:          #DCEEF0;   /* hairlines, card borders                     */
  --line-strong:   #B9DCE0;   /* input borders                               */
  --surface:       #FFFFFF;
  --bg:            #FBFEFE;

  /* --- Status ----------------------------------------------------------- */
  --ok:            #0E9F6E;
  --warn:          #C98A00;
  --danger:        #E5502F;
  --info:          #2F80ED;

  /* --- Data colours: the SAME colour means the SAME thing on every page --- */
  --c-ocean:  #4F6BED;   /* Oceanophony (waves, wind, rain)  - geophysical   */
  --c-anthro: #E5502F;   /* Anthrophony (boats, engines)     - human noise   */
  --c-bio:    #0E9F6E;   /* Biophony (fish, shrimp, dolphins) - marine life  */
  --c-shi:    #E2A227;   /* Soundscape Health Index                          */
  --c-tide:   #0891B2;   /* Tide level                                       */
  --c-wind:   #22A6D8;   /* Wind speed                                       */
  --c-purple: #7C5CFC;   /* neutral accent series (e.g. NDI)                 */

  /* --- Type ------------------------------------------------------------- */
  --font-head: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Shape ------------------------------------------------------------ */
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(7, 44, 79, .05);
  --shadow:    0 12px 30px -14px rgba(7, 44, 79, .22);
  --pz-header-h: 64px;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--pz-header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(ellipse 55% 35% at 6% 0%, rgba(0, 194, 203, .12), transparent 60%),
    radial-gradient(ellipse 50% 32% at 100% 6%, rgba(255, 209, 102, .14), transparent 60%),
    radial-gradient(ellipse 45% 30% at 90% 90%, rgba(255, 107, 74, .10), transparent 60%),
    var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ocean-deep); line-height: 1.2; margin: 0; }
p { margin: 0 0 .8em; }
a { color: var(--accent-strong); }
a:hover { color: var(--ocean-deep); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono  { font-family: var(--font-mono); }
.muted { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.pz-skip { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--ocean-deep); color: #fff; padding: 10px 16px; border-radius: 0 0 12px 12px; text-decoration: none; font-weight: 600; }
.pz-skip:focus { top: 0; color: #fff; }

/* --- Layout -------------------------------------------------------------- */
.pz-container { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* --- Header + navigation -------------------------------------------------- */
.pz-status-bar{
  background:linear-gradient(90deg,var(--coral),var(--sun));
  color:#3a1f0d;font-size:13.5px;font-weight:600;text-align:center;padding:9px 16px;
}
.pz-status-bar span{opacity:.85;font-weight:500;}
.pz-header {
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 107, 74, .35);
}
.pz-header__inner { max-width: 1440px; margin: 0 auto; height: var(--pz-header-h); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pz-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.pz-brand:hover { color: var(--ink); }
.pz-brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(0, 194, 203, .14); font-size: 1.3rem; }
.pz-brand__text b { display: block; font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; letter-spacing: -.3px; line-height: 1; color: var(--ink); }
.pz-brand__text small { display: block; font-size: .68rem; opacity: .8; margin-top: 3px; letter-spacing: .02em; color: var(--ink-soft); }
.pz-nav { display: flex; gap: 6px; }
.pz-nav__link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .85rem; white-space: nowrap;
  background: transparent; border: 1px solid transparent;
  transition: background .2s, color .2s;
}
.pz-nav__link:hover { background: var(--mint); color: var(--turquoise-dark); }
.pz-nav__link.is-active { background: var(--mint); color: var(--turquoise-dark); border-color: var(--line); }
.pz-nav__link--home { color: var(--coral-dark); border-color: color-mix(in srgb, var(--coral) 35%, transparent); }
.pz-nav__link--home:hover { background: #FFF1EC; color: var(--coral-dark); }
.pz-header__logo { height: 34px; width: auto; object-fit: contain; }

@media (max-width: 1000px) { .pz-brand__text small { display: none; } }
@media (max-width: 860px)  { .pz-header__logo { display: none; } }

/* Phones: navigation becomes a bottom tab bar (thumb reach, always visible) */
@media (max-width: 760px) {
  .pz-container { padding: 0 14px; }
  .pz-nav {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0; z-index: 1000;
    justify-content: space-around; gap: 0;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(7, 44, 79, .08);
  }
  .pz-nav__link { flex-direction: column; gap: 2px; padding: 6px 12px; border-radius: 14px; background: transparent; border: 0; color: var(--ink-soft); font-size: .68rem; }
  .pz-nav__link:hover { background: var(--mint); color: var(--ocean-deep); }
  .pz-nav__link.is-active { background: var(--mint); color: var(--accent-strong); box-shadow: 0 2px 8px rgba(0, 194, 203, .2); }
  .pz-nav__link--home { color: var(--coral-dark); }
  .pz-nav__link--home:hover { background: #FFF1EC; color: var(--coral-dark); }
  .pz-nav__icon { font-size: 1.3rem; }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* --- Page title block ---------------------------------------------------- */
.pz-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 30px 0 22px; }
.pz-pagehead__text { min-width: 0; flex: 1 1 420px; }
.pz-eyebrow { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 6px; }
.pz-pagehead h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.5px; }
.pz-pagehead p { margin: 8px 0 0; max-width: 72ch; color: var(--ink-soft); font-size: 1rem; }
.pz-pagehead__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.pz-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font-size: .78rem; color: var(--ink);
}
.pz-chip--live { border-color: var(--turquoise); background: var(--mint); color: var(--accent-strong); font-family: var(--font-mono); font-size: .72rem; }
.pz-chip--admin { background: #FFF3D6; border-color: var(--sun-dark); color: var(--sun-text); font-weight: 700; }
.pz-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--turquoise-dark); animation: pz-pulse 2s ease-in-out infinite; }
@keyframes pz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* In-page jump menu */
.pz-toc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 26px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.pz-toc__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.pz-toc a { padding: 5px 12px; border-radius: 999px; background: var(--mint); color: var(--ocean-deep); text-decoration: none; font-size: .78rem; font-weight: 600; transition: background .2s, color .2s; }
.pz-toc a:hover { background: var(--accent-strong); color: #fff; }

/* --- Cards + section titles --------------------------------------------- */
.card, .glass-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
@media (max-width: 600px) { .card, .glass-card { padding: 18px; border-radius: var(--r); } }

.section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--ocean-deep);
  margin: 0 0 16px;
}
.section-title::before { content: ''; flex-shrink: 0; width: 4px; height: 1.1em; border-radius: 2px; background: linear-gradient(180deg, var(--turquoise), var(--turquoise-dark)); }
.section-desc { margin: -8px 0 18px; max-width: 80ch; color: var(--ink-soft); font-size: .9rem; line-height: 1.65; }
.section-desc strong { color: var(--ink); }
.subsection-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--ocean-deep); margin: 30px 0 14px; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 20px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--font-body); font-size: .85rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--turquoise); color: #00303a; box-shadow: 0 10px 22px rgba(0, 194, 203, .3); }
.btn-primary:hover { background: var(--turquoise); color: #00303a; }
.btn-secondary { background: var(--coral); color: #fff; box-shadow: 0 10px 22px rgba(255, 107, 74, .3); }
.btn-secondary:hover { background: var(--coral); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: .75rem; }
.btn-block { width: 100%; }

/* --- Forms --------------------------------------------------------------- */
.filter-form, .filter-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filter-group, .form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group { margin-bottom: 16px; }
.filter-group label, .form-group label {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong);
}
select, input[type="text"], input[type="number"], input[type="search"], input[type="datetime-local"] {
  font-family: var(--font-body); font-size: .88rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 9px 14px; min-height: 40px; width: 100%;
}
.filter-group select, .filter-group input { width: auto; min-width: 140px; }
select:focus, input:focus { outline: none; border-color: var(--turquoise-dark); box-shadow: 0 0 0 3px rgba(0, 194, 203, .18); }
.reset-link { align-self: flex-end; padding: 9px 4px; font-size: .82rem; font-weight: 600; }
@media (max-width: 640px) { .filter-form, .filter-row { flex-direction: column; align-items: stretch; } .filter-group select, .filter-group input { width: 100%; } }

/* --- Stat tiles (KPIs) ---------------------------------------------------- */
.metrics-grid, .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.metric-card, .kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 14px; text-align: center; box-shadow: var(--shadow-sm);
}
.metric-label, .kpi-label { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.metric-value, .kpi-value { font-family: var(--font-head); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ocean-deep); margin: 8px 0 4px; }
.kpi-sub { font-size: .72rem; color: var(--ink-soft); margin-top: 3px; }

/* --- Callouts / notes ------------------------------------------------------ */
.callout, .note-box, .interpret-box {
  background: var(--mint); border-left: 4px solid var(--turquoise);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 14px 18px; margin-top: 18px;
  font-size: .86rem; line-height: 1.65; color: var(--ink-soft);
}
.callout strong, .note-box strong, .interpret-box strong { color: var(--ink); }
.callout--warn { background: #FFF8E5; border-left-color: var(--sun-dark); }

/* --- Tables --------------------------------------------------------------- */
.table-wrap, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r); }
table.data, .table-wrap table { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.data th, .table-wrap th {
  padding: 12px 10px; background: var(--mint); color: var(--ocean-deep);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-align: center; white-space: nowrap; position: sticky; top: 0;
}
table.data td, .table-wrap td { padding: 10px; border-bottom: 1px solid var(--line); text-align: center; }
table.data tbody tr:last-child td, .table-wrap tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td, .table-wrap tbody tr:hover td { background: var(--mint-2); }

/* --- Pagination (server-side links and JS buttons share one look) ---------- */
.pagination, .pagination-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.pagination { margin-top: 28px; }
.pagination a, .pagination span, .pagination-btn {
  min-width: 40px; padding: 7px 14px; border-radius: 999px; text-align: center;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--font-body); font-size: .82rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.pagination a:hover, .pagination-btn:hover:not(:disabled) { background: var(--mint); border-color: var(--turquoise-dark); color: var(--ocean-deep); }
.pagination .active, .pagination-btn.active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.pagination span:not(.active), .pagination-btn:disabled { opacity: .45; cursor: default; }
.pagination-container { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; font-size: .82rem; }
.info-text { color: var(--ink-soft); font-size: .8rem; }

/* --- Empty states ----------------------------------------------------------- */
.empty, .empty-state, .empty-message { text-align: center; padding: 48px 24px; color: var(--ink-soft); background: var(--mint); border-radius: var(--r); }
.empty h3, .empty-state h3 { font-size: 1.2rem; margin-bottom: 10px; }
.card.empty, .card.empty-state { background: var(--surface); }

/* --- Footer ------------------------------------------------------------------ */
.pz-footer {
  margin-top: 48px; padding: 32px 20px 30px; text-align: center;
  border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, var(--mint));
  color: var(--ink-soft); font-size: .8rem; line-height: 1.75;
}
@media (max-width: 760px) { .pz-footer { margin-top: 32px; } }
.pz-footer a { color: var(--accent-strong); }
.pz-footer__partners { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.pz-partner { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: .78rem; color: var(--ocean-deep); }
.pz-partner img { height: 28px; width: auto; max-width: 96px; object-fit: contain; }
.pz-partner.is-text img { display: none; }
.pz-footer__notes p { margin: 0 0 4px; }
.pz-footer__credit { margin-top: 12px; }
.pz-footer__credit strong { font-family: var(--font-head); font-size: .95rem; color: var(--ocean-deep); }

.pz-glossary { max-width: 900px; margin: 0 auto 18px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 20px; }
.pz-glossary summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--ocean-deep); font-size: .9rem; }
.pz-glossary dl { margin: 0; padding: 0 0 12px; display: grid; gap: 12px; }
.pz-glossary dt { font-weight: 700; color: var(--ink); font-size: .84rem; }
.pz-glossary dd { margin: 2px 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.6; }

/* --- Misc helpers used by more than one page ------------------------------------ */
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.dot-ocean  { background: var(--c-ocean); }
.dot-anthro { background: var(--c-anthro); }
.dot-bio    { background: var(--c-bio); }


/* ==========================================================================
   Access control: sign-in, request-data form, locked panels
   ========================================================================== */

/* Header buttons */
.pz-actions { display: flex; align-items: center; gap: 8px; }
.pz-logout { margin: 0; }
.pz-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ocean-deep);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s;
}
.pz-pill:hover { background: var(--mint); border-color: var(--turquoise-dark); color: var(--ocean-deep); }
.pz-pill--login { background: var(--turquoise); border-color: var(--turquoise); color: #00303a; }
.pz-pill--login:hover { background: var(--turquoise); color: #00303a; }
.pz-pill--user { background: #E7F8F1; border-color: var(--ok); }
@media (max-width: 420px) {
  .pz-pill { padding: 6px 10px; font-size: .74rem; }
  .pz-pill__icon { display: none; }
}

/* More form controls (same look as the existing inputs) */
input[type="email"], input[type="password"], input[type="date"], textarea {
  font-family: var(--font-body); font-size: .88rem; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 9px 14px; min-height: 40px; width: 100%;
}
textarea { resize: vertical; line-height: 1.5; }
textarea:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus {
  outline: none; border-color: var(--turquoise-dark); box-shadow: 0 0 0 3px rgba(0, 194, 203, .18);
}
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field-error { color: var(--danger); font-size: .78rem; font-weight: 600; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-row--3 { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 700px) { .form-row, .form-row--3 { grid-template-columns: 1fr; } }
.rq-fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.rq-fieldset legend { padding: 0; margin-bottom: 8px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; font-size: .88rem; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; }
.checkbox-row input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent-strong); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Alerts */
.pz-alert { padding: 12px 16px; border-radius: var(--r-sm); margin-bottom: 18px; font-weight: 600; font-size: .88rem; }
.pz-alert--err { background: #FFF1EC; border: 1px solid var(--danger); color: #7A2412; }

/* Sign-in page */
.pz-auth-wrap { display: flex; justify-content: center; }
.pz-auth-card { width: 100%; max-width: 440px; }
.pz-auth-alt { margin: 18px 0 0; font-size: .85rem; color: var(--ink-soft); text-align: center; }

/* Request-data page */
.rq-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .rq-grid { grid-template-columns: 1fr; } }
.rq-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: .88rem; color: var(--ink-soft); }
.rq-steps strong { color: var(--ink); }
.rq-mail { margin: 0 0 6px; font-size: .88rem; word-break: break-all; }
.pz-done { max-width: 620px; margin: 10px auto 24px; text-align: center; }
.pz-done__icon { font-size: 2.6rem; }
.pz-done h2 { margin: 6px 0 12px; }
.pz-done__ref { color: var(--ink-soft); }

/* Locked panel (shown instead of players / downloads) */
.pz-lock { text-align: center; padding: 36px 24px; background: var(--mint); border: 1px dashed var(--turquoise-dark); border-radius: var(--r); }
.pz-lock__icon { font-size: 2.4rem; }
.pz-lock h3 { font-size: 1.2rem; margin: 6px 0 8px; }
.pz-lock p { max-width: 56ch; margin: 0 auto 16px; color: var(--ink-soft); font-size: .9rem; }
.pz-lock__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* --- Phones: keep the header (brand + Request data / Sign in) visible ------
   backdrop-filter makes the header the containing block of the position:fixed
   tab bar, which pinned the tab bar on top of the header and hid these buttons.
   Without it the tab bar sits at the bottom of the screen as designed. */
@media (max-width: 760px) {
  .pz-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .pz-header__inner { gap: 8px; padding: 0 12px; }
  .pz-actions { margin-left: auto; min-width: 0; gap: 6px; }
  .pz-brand { gap: 8px; }
  .pz-nav { backdrop-filter: none; }
}
@media (max-width: 380px) {
  .pz-brand__mark { display: none; }
}
@media (max-width: 760px) {
  /* five tabs share the width equally instead of overflowing on narrow phones */
  .pz-nav { gap: 2px; }
  .pz-nav__link { flex: 1 1 0; min-width: 0; padding: 6px 2px; font-size: .64rem; }
  .pz-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 760px) {
  .pz-nav__link { white-space: normal; text-align: center; line-height: 1.15; }
  .pz-nav__label { text-overflow: clip; }
}
@media (max-width: 380px) {
  .pz-nav__link { font-size: .6rem; }
}

/* Email test page + success alert */
.pz-alert--ok { background: #E7F8F1; border: 1px solid var(--ok); color: #0B5A3F; }
.pz-log { margin: 0 0 18px; padding: 12px 14px; background: var(--ocean-deep); color: #D8F3F5; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: .74rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }