/* ============================================================================
   WMB PROMOTER PORTAL — portal-specific UI extending colors_and_type.css
   Editorial newspaper meets metal poster. Sharp corners. Hairlines.
   ========================================================================= */

@import url('./colors_and_type.css');

html, body { height: 100%; margin: 0; }

* { box-sizing: border-box; }

/* ---- Screen container ----------------------------------------------- */
.pp-screen {
  background: var(--wmb-black);
  color: var(--wmb-white);
  font-family: var(--font-text);
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---- Top bar (desktop/tablet) --------------------------------------- */
.pp-topbar {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--wmb-border);
  background: var(--wmb-black);
  gap: 24px;
  flex-shrink: 0;
}
.pp-topbar__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wmb-white);
}
.pp-topbar__brand-mark {
  width: 28px; height: 28px; object-fit: contain;
}
.pp-topbar__brand-slash { color: var(--wmb-red); }
.pp-topbar__divider {
  width: 1px; height: 24px; background: var(--wmb-border);
}
.pp-topbar__country {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wmb-white);
}
.pp-topbar__country-flag { font-size: 18px; line-height: 1; }
.pp-topbar__country-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}
.pp-topbar__spacer { flex: 1; }
.pp-topbar__user {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wmb-white);
  cursor: pointer;
}
.pp-topbar__avatar {
  width: 32px; height: 32px;
  background: var(--wmb-surface);
  border: 1px solid var(--wmb-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--wmb-white);
}
.pp-topbar__chev {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--wmb-muted);
}

/* ---- Mobile top bar -------------------------------------------------- */
.pp-mtopbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--wmb-border);
  flex-shrink: 0;
}
.pp-mtopbar__brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pp-mtopbar__brand img { width: 22px; height: 22px; object-fit: contain; }
.pp-mtopbar__country {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Sidebar (desktop) ---------------------------------------------- */
.pp-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.pp-sidebar {
  width: 240px;
  border-right: 1px solid var(--wmb-border);
  background: var(--wmb-black);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.pp-sidebar__group {
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--wmb-border);
}
.pp-sidebar__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
  padding: 0 20px;
  margin-bottom: 12px;
  display: block;
}
.pp-sidebar__label::before { content: "// "; color: var(--wmb-red); }
.pp-sidebar__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wmb-muted);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.pp-sidebar__item:hover { color: var(--wmb-white); }
.pp-sidebar__item--active {
  color: var(--wmb-white);
  border-left-color: var(--wmb-red);
  background: var(--wmb-surface);
}
.pp-sidebar__item-icon {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
}
.pp-sidebar__badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--wmb-red);
  color: #fff;
  padding: 2px 6px;
}

/* ---- Main content area ---------------------------------------------- */
.pp-main {
  flex: 1;
  overflow: auto;
  min-width: 0;
}
.pp-main__inner {
  padding: 32px;
  max-width: 1200px;
}
.pp-main__inner--narrow { max-width: 720px; }
.pp-main__inner--profile { max-width: 600px; }

/* ---- Section header (eyebrow + headline + rule) --------------------- */
.pp-section {
  margin-bottom: 32px;
}
.pp-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.pp-eyebrow::before { content: "// "; color: var(--wmb-red); }
.pp-headline {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--wmb-white);
  margin: 0;
}
.pp-headline--lg { font-size: 64px; }
.pp-headline--sm { font-size: 32px; }
.pp-rule {
  display: block;
  width: 64px;
  height: 4px;
  background: var(--wmb-red);
  margin-top: 16px;
  border: 0;
}
.pp-deck {
  margin-top: 16px;
  font-family: var(--font-text);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--wmb-muted);
  max-width: 600px;
}

/* ---- Buttons -------------------------------------------------------- */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--wmb-red);
  color: #fff;
  border: 1px solid var(--wmb-red);
  cursor: pointer;
  border-radius: 0;
  transition: background var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.pp-btn:hover  { background: var(--wmb-red-hover); border-color: var(--wmb-red-hover); }
.pp-btn:active { background: var(--wmb-red-deep);  border-color: var(--wmb-red-deep); }
.pp-btn--ghost { background: transparent; color: var(--wmb-white); border-color: var(--wmb-white); }
.pp-btn--ghost:hover { background: transparent; color: var(--wmb-red-hover); border-color: var(--wmb-red-hover); }
.pp-btn--outline { background: transparent; color: var(--wmb-white); border-color: var(--wmb-border-bold); }
.pp-btn--outline:hover { background: transparent; color: var(--wmb-red-hover); border-color: var(--wmb-red-hover); }
.pp-btn--danger { background: transparent; color: var(--wmb-red); border-color: var(--wmb-red); }
.pp-btn--danger:hover { background: var(--wmb-red); color: #fff; }
.pp-btn--full { width: 100%; }
.pp-btn--lg { padding: 18px 28px; font-size: 16px; }
.pp-btn--sm { padding: 10px 16px; font-size: 12px; letter-spacing: 0.12em; }
.pp-btn--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* ---- Form fields ---------------------------------------------------- */
.pp-field { display: flex; flex-direction: column; gap: 8px; }
.pp-field__label {
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}
.pp-field__label--req::after { content: " *"; color: var(--wmb-red); }
.pp-field__input,
.pp-field__select,
.pp-field__textarea {
  background: var(--wmb-surface);
  border: 1px solid var(--wmb-border);
  padding: 14px 16px;
  font-family: var(--font-text);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--wmb-white);
  outline: none;
  border-radius: 0;
  width: 100%;
  min-height: 48px;
}
.pp-field__input::placeholder,
.pp-field__textarea::placeholder { color: var(--wmb-muted-2); }
.pp-field__input:focus,
.pp-field__select:focus,
.pp-field__textarea:focus { border-color: var(--wmb-red); outline: 2px solid var(--wmb-red); outline-offset: -1px; }
.pp-field__input--err { border-color: var(--wmb-red); }
.pp-field__err {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--wmb-red-hover);
  text-transform: uppercase;
}
.pp-field__err::before { content: "// "; }
.pp-field__hint {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--wmb-muted-2);
  text-transform: none;
}
.pp-field__textarea { min-height: 140px; resize: vertical; font-family: var(--font-text); }
.pp-field__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--wmb-muted) 50%),
                    linear-gradient(135deg, var(--wmb-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.pp-field__locked {
  display: flex; align-items: center; gap: 10px;
  background: var(--wmb-surface);
  border: 1px solid var(--wmb-border);
  padding: 14px 16px;
  min-height: 48px;
  color: var(--wmb-muted);
  font-family: var(--font-text);
  font-size: 16px;
  letter-spacing: 0.04em;
}
.pp-field__locked-icon {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--wmb-muted-2);
  letter-spacing: 0.12em;
}

/* ---- Status badges -------------------------------------------------- */
.pp-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--wmb-border-bold);
  color: var(--wmb-muted);
  background: transparent;
}
.pp-badge::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  display: inline-block;
}
.pp-badge--pending { color: var(--wmb-white); border-color: var(--wmb-white); }
.pp-badge--approved { color: var(--wmb-white); border-color: var(--wmb-white); background: rgba(244,244,244,0.04); }
.pp-badge--approved::before { background: var(--wmb-green); }
.pp-badge--rejected { color: var(--wmb-red); border-color: var(--wmb-red); }
.pp-badge--draft { color: var(--wmb-muted); border-color: var(--wmb-border-bold); }
.pp-badge--draft::before { background: var(--wmb-muted); }

.pp-typebadge {
  display: inline-flex; align-items: center;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--wmb-border-bold);
  color: var(--wmb-muted);
}
.pp-typebadge--event { color: var(--wmb-white); border-color: var(--wmb-white); }
.pp-typebadge--news { color: var(--wmb-red); border-color: var(--wmb-red); }

/* ---- Stat tile ------------------------------------------------------ */
.pp-stat {
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 140px;
}
.pp-stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}
.pp-stat__value {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--wmb-white);
  margin-top: 8px;
}
.pp-stat__value--red { color: var(--wmb-red); }
.pp-stat__sub {
  margin-top: auto;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}

/* ---- Card ----------------------------------------------------------- */
.pp-card {
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.pp-card--clickable { cursor: pointer; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.pp-card--clickable:hover { transform: translateY(-2px); border-color: var(--wmb-border-bold); }
.pp-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--wmb-white);
  text-transform: uppercase;
  margin: 0;
}
.pp-card__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}
.pp-card__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}

/* ---- Activity table (desktop) --------------------------------------- */
.pp-table { width: 100%; border-collapse: collapse; border: 1px solid var(--wmb-border); }
.pp-table th, .pp-table td {
  text-align: left; padding: 14px 16px;
  border-bottom: 1px solid var(--wmb-border);
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--wmb-white);
}
.pp-table th {
  background: var(--wmb-surface);
  color: var(--wmb-muted);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--wmb-border-bold);
  font-family: var(--font-mono);
}
.pp-table tbody tr { transition: background var(--dur-fast) var(--ease-out); cursor: pointer; }
.pp-table tbody tr:hover { background: var(--wmb-surface); }
.pp-table__title { font-family: var(--font-display); font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.pp-table__date { font-family: var(--font-mono); font-size: 12px; color: var(--wmb-muted); letter-spacing: 0.06em; }
.pp-table__arrow { color: var(--wmb-muted); text-align: right; }

/* ---- Bottom nav (mobile) -------------------------------------------- */
.pp-bottomnav {
  height: 64px;
  border-top: 1px solid var(--wmb-border);
  background: var(--wmb-black);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  flex-shrink: 0;
}
.pp-bottomnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  font-family: var(--font-text);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wmb-muted);
  cursor: pointer;
  position: relative;
}
.pp-bottomnav__item--active { color: var(--wmb-white); }
.pp-bottomnav__item--active::before {
  content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 2px; background: var(--wmb-red);
}
.pp-bottomnav__icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}

/* ---- Hero card (centered login etc) --------------------------------- */
.pp-centerstage {
  flex: 1;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: var(--s-6); padding-bottom: var(--s-6);
  padding-left: 16px; padding-right: 16px;
  background: var(--wmb-black);
  position: relative;
  overflow-y: auto;
}
.pp-centerstage__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(200,16,46,0.08), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200,16,46,0.04), transparent 50%);
  pointer-events: none;
}
.pp-loginbox {
  position: relative;
  width: 100%; max-width: 420px;
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  padding: 40px 32px 32px;
}
.pp-loginbox__logo {
  width: 56px; height: 56px;
  margin: 0 auto 24px;
  display: block;
}
.pp-loginbox__title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wmb-white);
  text-align: center;
  margin: 0;
}
.pp-loginbox__rule {
  display: block; width: 48px; height: 3px;
  background: var(--wmb-red);
  margin: 16px auto 16px;
}
.pp-loginbox__sub {
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wmb-muted);
  text-align: center;
  margin: 0 0 28px;
}
.pp-loginbox__field { margin-bottom: 16px; }
.pp-loginbox__links {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: center;
}
.pp-loginbox__link {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wmb-muted);
  cursor: pointer;
}
.pp-loginbox__link:hover { color: var(--wmb-red-hover); }
.pp-loginbox__link--accent { color: var(--wmb-white); }
.pp-loginbox__link--accent::before { content: "// "; color: var(--wmb-red); }

.pp-footer-mark {
  position: absolute; bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted-2);
  text-transform: uppercase;
}

/* ---- Quick actions row --------------------------------------------- */
.pp-quick {
  display: grid;
  gap: 16px;
  margin-bottom: 32px;
}

/* ---- Recent feed: desktop table vs mobile cards -------------------- */
/* The dashboard emits BOTH the desktop table (.pp-feedtable) and the design's
   stacked cards (.pp-feedlist); exactly one is revealed per breakpoint — see the
   MOBILE CONTENT block. Default = desktop: the table shows, the cards are hidden. */
.pp-feedlist {
  display: none; flex-direction: column; gap: 12px;
}
/* Admin rejection / changes reason inside a mobile feed card. Plain reading text
   (not the mono/uppercase card meta) so the promoter can actually read it. */
.pp-card__reason {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--wmb-muted);
  text-transform: none;
}

/* ---- Form layout helpers ------------------------------------------ */
.pp-form { display: flex; flex-direction: column; gap: 20px; }
.pp-formrow { display: grid; gap: 20px; }
.pp-formactions {
  display: flex; gap: 12px; padding-top: 12px;
  border-top: 1px solid var(--wmb-border);
}

/* ---- Upload zone --------------------------------------------------- */
.pp-upload {
  border: 1px dashed var(--wmb-border-bold);
  padding: 32px 16px;
  text-align: center;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--wmb-muted);
  text-transform: uppercase;
  background: rgba(20,20,20,0.4);
  cursor: pointer;
  min-height: 140px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.pp-upload:hover { border-color: var(--wmb-red); color: var(--wmb-red-hover); }
.pp-upload__icon {
  width: 32px; height: 32px;
  border: 1px solid currentColor;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px;
}
.pp-upload__preview {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  background: var(--wmb-surface-2);
  border: 1px solid var(--wmb-border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--wmb-muted-2);
  overflow: hidden;
}
.pp-upload__preview-bar {
  display: flex; gap: 8px; margin-top: 12px;
}

/* ---- Stepper --------------------------------------------------- */
.pp-stepper {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 24px;
}
.pp-stepper__step {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--wmb-muted-2);
  text-transform: uppercase;
}
.pp-stepper__num {
  width: 24px; height: 24px;
  border: 1px solid var(--wmb-border-bold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px;
  color: var(--wmb-muted);
}
.pp-stepper__step--active .pp-stepper__num { border-color: var(--wmb-red); background: var(--wmb-red); color: #fff; }
.pp-stepper__step--active { color: var(--wmb-white); }
.pp-stepper__step--done .pp-stepper__num { border-color: var(--wmb-white); color: var(--wmb-white); }
.pp-stepper__sep {
  flex: 1; height: 1px; background: var(--wmb-border); margin: 0 12px; min-width: 16px;
}

/* ---- Toast --------------------------------------------------- */
.pp-toast {
  position: absolute; top: 16px; left: 16px; right: 16px;
  padding: 14px 18px;
  background: var(--wmb-surface);
  border: 1px solid #2a6b34;
  border-left: 4px solid var(--wmb-green);
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wmb-white);
  display: flex; align-items: center; gap: 12px;
  z-index: 100;
}
.pp-toast__mark { color: var(--wmb-green); font-family: var(--font-display); }
.pp-toast--err { border-color: var(--wmb-red); border-left-color: var(--wmb-red); }
.pp-toast--err .pp-toast__mark { color: var(--wmb-red); }

/* ---- Empty state --------------------------------------------------- */
.pp-empty {
  border: 1px dashed var(--wmb-border-bold);
  padding: 64px 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.pp-empty__mark {
  width: 56px; height: 56px;
  border: 1px solid var(--wmb-border-bold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 28px;
  color: var(--wmb-muted);
}
.pp-empty__title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wmb-white);
  margin: 0;
}
.pp-empty__sub {
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--wmb-muted);
  text-transform: uppercase;
  max-width: 280px;
}

/* ---- Skeleton --------------------------------------------------- */
.pp-skel {
  background: linear-gradient(90deg, var(--wmb-surface) 0%, var(--wmb-surface-2) 50%, var(--wmb-surface) 100%);
  background-size: 200% 100%;
  animation: pp-shimmer 1.6s linear infinite;
}
@keyframes pp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- Filter bar --------------------------------------------------- */
.pp-filterbar {
  display: flex; gap: 12px;
  margin-bottom: 24px;
  align-items: center;
}
.pp-filterbar__select {
  background: var(--wmb-surface);
  border: 1px solid var(--wmb-border);
  padding: 12px 14px;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--wmb-white);
  text-transform: uppercase;
  appearance: none;
  border-radius: 0;
  padding-right: 36px;
  min-height: 44px;
}
.pp-filterbar__search {
  flex: 1; background: var(--wmb-surface);
  border: 1px solid var(--wmb-border);
  padding: 12px 14px;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--wmb-white);
  outline: none;
  border-radius: 0;
  min-height: 44px;
}

/* ---- Drawer (tablet) ----------------------------------------------- */
.pp-drawer-fab {
  width: 40px; height: 40px;
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}
.pp-drawer-fab span {
  display: block; width: 18px; height: 1px; background: var(--wmb-white);
}

/* ---- Modal --------------------------------------------------------- */
.pp-modal {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 24px;
}
.pp-modal__box {
  background: var(--wmb-surface);
  border: 1px solid var(--wmb-border);
  width: 100%;
  max-width: 420px;
  padding: 32px;
}

/* ---- Helpers --------------------------------------------------- */
.pp-stack { display: flex; flex-direction: column; }
.pp-stack--gap-1 { gap: 4px; }
.pp-stack--gap-2 { gap: 8px; }
.pp-stack--gap-3 { gap: 12px; }
.pp-stack--gap-4 { gap: 16px; }
.pp-stack--gap-5 { gap: 24px; }
.pp-row { display: flex; align-items: center; gap: 12px; }
.pp-row--space { justify-content: space-between; }
.pp-mono { font-family: var(--font-mono); letter-spacing: 0.16em; color: var(--wmb-muted); font-size: 11px; text-transform: uppercase; }
.pp-mono::before { content: "// "; color: var(--wmb-red); }
.pp-muted { color: var(--wmb-muted); }
.pp-redtext { color: var(--wmb-red); }

.pp-hr { border: 0; height: 1px; background: var(--wmb-border); margin: 24px 0; }

/* ---- Toast inline modifier (server-rendered toasts inside the card) -- */
.pp-toast--inline { position: static; inset: auto; left: auto; right: auto; top: auto; margin: var(--s-4) 0 0; }

/* ---- Focus-visible (WCAG 2.4.7) ------------------------------------ */
.pp-btn:focus-visible,
.pp-loginbox__link:focus-visible { outline: 2px solid var(--wmb-red); outline-offset: 2px; }
.pp-field__input:focus-visible { outline: 2px solid var(--wmb-red); outline-offset: 2px; }

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

/* ============================================================================
   PHASE 2 — DOCUMENTS · TRUST SCORE · COMPLIANCE   (Batch B1)
   Backfilled from design/design-system/portal.css (append-only). The Phase-1
   base-layout classes (.pp-screen / .pp-centerstage / html,body) are
   intentionally NOT modified here — their production-scroll deviations from the
   fixed-frame design are deliberate and tracked under the visual-drift audit.
   ========================================================================= */

/* ---- Status badge variants (signed / unsigned / expired) ----------- */
.pp-badge--signed { color: var(--wmb-green); border-color: var(--wmb-green-deep); background: rgba(107,194,107,0.06); }
.pp-badge--signed::before { background: var(--wmb-green); }
.pp-badge--unsigned { color: var(--wmb-red); border-color: var(--wmb-red); background: rgba(200,16,46,0.06); }
.pp-badge--unsigned::before { background: var(--wmb-red); }
.pp-badge--expired { color: var(--wmb-muted-2); border-color: var(--wmb-border-bold); }
.pp-badge--expired::before { background: var(--wmb-muted-2); }

/* ---- Logo shadow lift (logo on dark) ------------------------------- */
.pp-topbar__brand-mark,
.pp-mtopbar__brand img {
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)) drop-shadow(0 2px 0 rgba(0,0,0,0.4));
}
.pp-logo-lift {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)) drop-shadow(0 0 1px rgba(255,255,255,0.06));
}

/* ---- Sidebar alert badge ------------------------------------------- */
.pp-sidebar__badge--alert {
  background: transparent;
  color: var(--wmb-red);
  border: 1px solid var(--wmb-red);
}
.pp-bottomnav__dot {
  position: absolute;
  top: -2px; right: -6px;
  width: 7px; height: 7px;
  background: var(--wmb-red);
}

/* ---- Compliance banner --------------------------------------------- */
.pp-compliance {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--wmb-red);
  border-left: 4px solid var(--wmb-red);
  background: linear-gradient(90deg, rgba(200,16,46,0.10), rgba(200,16,46,0.02) 60%, transparent);
  margin-bottom: 32px;
  position: relative;
}
.pp-compliance__icon {
  display: flex; align-items: center; justify-content: center;
  padding: 0 20px;
  border-right: 1px solid rgba(200,16,46,0.4);
  color: var(--wmb-red);
}
.pp-compliance__body {
  flex: 1;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.pp-compliance__type {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--wmb-red);
  text-transform: uppercase;
}
.pp-compliance__type::before { content: "// "; }
.pp-compliance__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--wmb-white);
  text-transform: uppercase;
  margin: 0;
}
.pp-compliance__action {
  display: flex; align-items: center;
  padding: 0 24px;
  border-left: 1px solid rgba(200,16,46,0.4);
}
.pp-compliance__more {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--wmb-muted);
  text-transform: uppercase;
  border-top: 1px solid rgba(200,16,46,0.3);
  padding: 10px 20px;
}
.pp-compliance__more::before { content: "+ "; color: var(--wmb-red); }
.pp-compliance--stack { flex-direction: column; }
.pp-compliance--stack .pp-compliance__icon { border-right: 0; border-bottom: 1px solid rgba(200,16,46,0.4); padding: 14px; }
.pp-compliance--stack .pp-compliance__action { border-left: 0; padding: 0 16px 16px; }

/* ---- Document card -------------------------------------------------- */
.pp-doccard {
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  min-height: 180px;
}
.pp-doccard--alert {
  border-color: var(--wmb-red);
  border-left: 3px solid var(--wmb-red);
}
.pp-doccard--signed {
  border-left: 3px solid var(--wmb-green);
}
.pp-doccard--expired {
  border-left: 3px solid var(--wmb-border-bold);
  opacity: 0.85;
}
.pp-doccard__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.pp-doccard__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.0;
  letter-spacing: 0.02em;
  color: var(--wmb-white);
  text-transform: uppercase;
  margin: 0;
}
.pp-doccard__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}
.pp-doccard__meta-strong { color: var(--wmb-white); }
.pp-doccard__metalist {
  display: flex; flex-direction: column; gap: 4px;
}
.pp-doccard__actions {
  display: flex; gap: 8px; margin-top: auto;
  flex-wrap: wrap;
}

/* ---- Trust score ---------------------------------------------------- */
.pp-trust {
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  padding: 24px;
  display: grid;
  gap: 24px;
}
.pp-trust--row { grid-template-columns: 220px 1fr; align-items: center; }
.pp-trust__big {
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--wmb-border);
  padding-right: 24px;
}
.pp-trust--row .pp-trust__big { padding-right: 24px; }
.pp-trust__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}
.pp-trust__num {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.85;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.pp-trust__num--strong { color: var(--wmb-green); }
.pp-trust__num--moderate { color: var(--wmb-amber); }
.pp-trust__num--needs { color: var(--wmb-red); }
.pp-trust__num--none { color: var(--wmb-muted-2); }
.pp-trust__band {
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pp-trust__band--strong { color: var(--wmb-green); }
.pp-trust__band--moderate { color: var(--wmb-amber); }
.pp-trust__band--needs { color: var(--wmb-red); }
.pp-trust__band--none { color: var(--wmb-muted-2); }

.pp-trust__subs { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-sub {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
}
.pp-sub__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--wmb-white);
  text-transform: uppercase;
}
.pp-sub__band {
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pp-sub__band--strong { color: var(--wmb-green); }
.pp-sub__band--moderate { color: var(--wmb-amber); }
.pp-sub__band--needs { color: var(--wmb-red); }
.pp-sub__band--none { color: var(--wmb-muted-2); }
.pp-sub__bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--wmb-surface-2);
  border: 1px solid var(--wmb-border);
  position: relative;
}
.pp-sub__bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--wmb-white);
}
.pp-sub__bar-fill--strong { background: var(--wmb-green); }
.pp-sub__bar-fill--moderate { background: var(--wmb-amber); }
.pp-sub__bar-fill--needs { background: var(--wmb-red); }
.pp-sub__desc {
  grid-column: 1 / -1;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--wmb-muted);
  line-height: 1.5;
  margin-top: 2px;
}

/* Trust compact (stat-style with band) */
.pp-trust-compact {
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 140px;
}

/* ---- Document signing layout --------------------------------------- */
.pp-doc-stage {
  display: grid;
  grid-template-columns: 1fr 460px;
  flex: 1;
  min-height: 0;
}
.pp-doc-stage--stack { grid-template-columns: 1fr; }
.pp-doc-preview {
  background: var(--wmb-parchment);
  color: var(--wmb-parchment-ink);
  padding: 48px 56px;
  overflow: auto;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 14px;
  line-height: 1.6;
  border-right: 1px solid var(--wmb-border);
  position: relative;
}
.pp-doc-preview::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(24,20,13,0.03) 28px 29px),
    radial-gradient(circle at 10% 0%, rgba(24,20,13,0.04), transparent 40%);
  pointer-events: none;
}
.pp-doc-preview__inner { position: relative; max-width: 640px; margin: 0 auto; }
.pp-doc-preview h1 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 4px;
  text-align: center;
}
.pp-doc-preview .pp-doc-preview__sub {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(24,20,13,0.6);
  margin: 0 0 24px;
}
.pp-doc-preview .pp-doc-preview__rule {
  display: block;
  width: 64px; height: 3px;
  background: var(--wmb-red);
  margin: 0 auto 24px;
}
.pp-doc-preview h2 {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 24px 0 8px;
}
.pp-doc-preview p { margin: 0 0 12px; }
.pp-doc-preview .pp-doc-merge {
  background: rgba(200,16,46,0.10);
  border-bottom: 1px solid rgba(200,16,46,0.4);
  padding: 0 2px;
  font-weight: 600;
}
.pp-doc-preview ol, .pp-doc-preview ul { padding-left: 22px; margin: 0 0 12px; }
.pp-doc-preview li { margin-bottom: 6px; }

.pp-doc-signpane {
  background: var(--wmb-black);
  padding: 32px 28px;
  overflow: auto;
  display: flex; flex-direction: column;
  position: sticky; top: 0;
}
.pp-doc-stage--stack .pp-doc-signpane { position: static; border-top: 1px solid var(--wmb-border); }
.pp-doc-stage--stack .pp-doc-preview { border-right: 0; border-bottom: 1px solid var(--wmb-border); max-height: 60vh; padding: 32px 28px; }

/* The server renders ONE markup (always .pp-doc-stage, no --stack modifier), so
   below the desktop breakpoint we apply the same stacking the modifier would:
   single column, preview on top (capped + scrollable), signpane static below. */
@media (max-width: 1023px) {
  .pp-doc-stage { grid-template-columns: 1fr; }
  .pp-doc-signpane { position: static; border-top: 1px solid var(--wmb-border); }
  .pp-doc-preview {
    border-right: 0;
    border-bottom: 1px solid var(--wmb-border);
    max-height: 60vh;
    padding: 32px 28px;
  }
}

.pp-doc-summary {
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  padding: 16px 18px;
  margin: 16px 0 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.pp-doc-summary__row {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px;
  align-items: baseline;
}
.pp-doc-summary__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}
.pp-doc-summary__v {
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--wmb-white);
  text-transform: uppercase;
}
.pp-doc-legal {
  border-left: 2px solid var(--wmb-border-bold);
  padding-left: 14px;
  margin: 20px 0 24px;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--wmb-muted);
}
.pp-doc-legal strong { color: var(--wmb-white); font-weight: 600; }

.pp-doc-readmore {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  color: var(--wmb-white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 24px;
}
.pp-doc-readmore::before { content: "// "; color: var(--wmb-red); }

.pp-doc-mininote {
  border-top: 1px solid var(--wmb-border);
  padding-top: 14px;
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}

/* Mobile sticky sign bar */
.pp-doc-sticky {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 16px;
  background: var(--wmb-black);
  border-top: 1px solid var(--wmb-border);
  display: flex;
}

/* ---- Signed receipt screen ----------------------------------------- */
.pp-receipt {
  width: 100%;
  max-width: 640px;
  border: 1px solid var(--wmb-border);
  background: var(--wmb-surface);
  padding: 48px 40px 40px;
  position: relative;
}
.pp-receipt__seal {
  width: 64px; height: 64px;
  border: 1px solid var(--wmb-green);
  background: rgba(107,194,107,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--wmb-green);
  margin: 0 0 20px;
}
.pp-receipt__title {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.pp-receipt__sub {
  margin-top: 16px;
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.55;
  color: var(--wmb-muted);
}
.pp-receipt__meta {
  margin: 32px 0;
  border: 1px solid var(--wmb-border);
  border-left: 3px solid var(--wmb-green);
  background: var(--wmb-black);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.pp-receipt__row {
  display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  align-items: baseline;
  border-bottom: 1px dashed var(--wmb-border);
  padding-bottom: 12px;
}
.pp-receipt__row:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-receipt__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--wmb-muted);
  text-transform: uppercase;
}
.pp-receipt__v {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--wmb-white);
  word-break: break-all;
}
.pp-receipt__v--name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pp-receipt__actions {
  display: flex; gap: 12px;
  margin-top: 8px;
}

/* ---- Document hub grid --------------------------------------------- */
.pp-doc-grid { display: grid; gap: 16px; }

/* ---- View-only chip (read-only state) ------------------------------ */
.pp-readonly-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--wmb-red);
  border: 1px solid var(--wmb-red);
  text-transform: uppercase;
  background: rgba(200,16,46,0.04);
}
.pp-readonly-chip::before {
  content: ""; width: 6px; height: 6px; background: var(--wmb-red);
}

/* ---- Dashboard grids (Batch B0) ------------------------------------ */
/* Stat-tile row + quick-action row. Responsive: 4→2→1 / 2→1 columns.
   .pp-quick already sets display:grid + gap upstream; this only adds columns. */
.pp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.pp-quick { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .pp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* Stats stay 2-col on phones (design mobile frame = 2-col); inherited from the
     ≤900 rule above. Only the quick-action pair collapses to a single column. */
  .pp-quick { grid-template-columns: 1fr; }
}

/* ---- Toggle switch (Batch B2 — notification prefs) ----------------- */
/* Real <input type=checkbox> visually hidden; the adjacent switch is driven by
   :checked. No JS. Mirrors the design's 44×24 switch (red on, knob right). */
.pp-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--wmb-border);
  cursor: pointer;
}
.pp-toggle:last-of-type { border-bottom: 0; }
.pp-toggle__label {
  font-family: var(--font-text);
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--wmb-white); text-transform: uppercase;
  flex: 1;
}
.pp-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.pp-toggle__switch {
  position: relative; flex-shrink: 0;
  width: 44px; height: 24px;
  border: 1px solid var(--wmb-border-bold);
  background: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.pp-toggle__switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--wmb-muted);
  transition: left 0.15s, right 0.15s, background 0.15s;
}
.pp-toggle__input:checked + .pp-toggle__switch { border-color: var(--wmb-red); background: var(--wmb-red); }
.pp-toggle__input:checked + .pp-toggle__switch::after { left: auto; right: 2px; background: #fff; }
.pp-toggle__input:focus-visible + .pp-toggle__switch { outline: 2px solid var(--wmb-red); outline-offset: 2px; }
/* contain the visually-hidden checkbox within the row (B2 ui-ux M3) */
.pp-toggle { position: relative; }

/* ---- B2 profile fidelity fixes (ui-ux review) ---------------------- */
.pp-main__inner--profile { max-width: 640px; }       /* spec is 640, not 600 (L2) */
.pp-form .pp-hr { margin: 16px 0; }                  /* tighter in-form rhythm per spec (M2) */
@media (max-width: 767px) {
  .pp-formactions { flex-direction: column-reverse; } /* SAVE above CANCEL on mobile (H1) */
  .pp-formactions .pp-btn { width: 100%; }            /* full-width action buttons on mobile (H1) */
  .pp-formactions > span[style*="flex"] { display: none; } /* neutralize the desktop horizontal spacer when stacked (D ui-ux M1) */
}

/* ---- Batch C — event form: width, formrow column variants, locked field -- */
/* The event form is the wide-but-capped column — design spec max-width 880 (ui-ux H1). */
.pp-main__inner--event { max-width: 880px; }
/* Multi-column form rows (the base .pp-formrow is a grid with gap 20px). */
.pp-formrow--2 { grid-template-columns: 1fr 1fr; }
.pp-formrow--3 { grid-template-columns: 1fr 1fr 1fr; }
/* Collapse to single column at/below the tablet breakpoint — the design renders
   these rows single-column on anything narrower than desktop (ui-ux H2). */
@media (max-width: 768px) {
  .pp-formrow--2,
  .pp-formrow--3 { grid-template-columns: 1fr; }
}

/* Locked / read-only display field — mirrors .pp-field__locked visual language
   but is a standalone component (.pp-lockedfield) for the event form country row.
   No interactive state (no focus ring, no hover) — value is not user-editable. */
.pp-lockedfield {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--wmb-surface);
  border: 1px solid var(--wmb-border);
  padding: 14px 16px;
  min-height: 48px;
  color: var(--wmb-muted);
  font-family: var(--font-text);
  font-size: 16px;
  letter-spacing: 0.04em;
  cursor: default;
  user-select: none;
}
.pp-lockedfield__flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.pp-lockedfield__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-lockedfield__suffix {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--wmb-muted);            /* muted-2 (#6a6a6a) failed AA at 10px; muted (#9a9a9a) clears 4.5:1 (ui-ux M4) */
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Cover-upload: surface a focus ring on the box when the visually-hidden file
   input inside receives keyboard focus (the input itself is invisible) (ui-ux H4). */
.pp-upload:focus-within { outline: 2px solid var(--wmb-red); outline-offset: 2px; }

/* ============================================================================
   RESPONSIVE CHROME SWITCH — desktop ⇄ mobile navigation
   ----------------------------------------------------------------------------
   The portal DOM (inc/ui/layout.php) emits BOTH chrome sets in one document:
   desktop = .pp-topbar + .pp-sidebar (240px), mobile = .pp-mtopbar + .pp-bottomnav.
   The design was authored as three fixed device artboards (each hand-picking its
   own chrome), so the show/hide media queries were never written — leaving every
   block visible at all widths. On phones/tablets the 240px sidebar squeezed the
   main column to an unreadable strip (.pp-screen has overflow-x:hidden, so the
   sidebar compresses content instead of scrolling off).

   Desktop-first: the base rules above keep the desktop chrome; here we hide the
   mobile-only chrome by default, then swap the two sets below 1024px. 1024px is
   the chrome breakpoint (not the canonical 768/1280) because the sidebar only
   has room on true laptop/desktop widths; tablets fall back to the bottom nav.
   The design's tablet "drawer" hamburger is an unbuilt visual hint with no JS,
   so it is removed from layout entirely (nav is fully served by the sidebar on
   desktop and the bottom nav on mobile/tablet).
   ========================================================================= */
.pp-mtopbar,
.pp-bottomnav { display: none; }

.pp-drawer-fab { display: none; }

@media (max-width: 1023px) {
  .pp-topbar,
  .pp-sidebar { display: none; }
  .pp-mtopbar { display: flex; }
  .pp-bottomnav { display: grid; }
}

/* ============================================================================
   MOBILE CONTENT — phone-width layout (≤767px, below the 768 tablet artboard)
   ----------------------------------------------------------------------------
   Mirrors design/screens/dashboard.jsx bp="mobile": 16px gutters, the display
   headline dropped to the --sm size, single-column quick actions, and the
   recent-activity feed switched from the desktop <table> to the design's
   stacked cards. The dashboard template emits BOTH markups (.pp-feedtable +
   .pp-feedlist) — exactly as the design renders a <table> on desktop and
   FeedRowMobile cards on mobile — so this block only flips which one is visible;
   it does NOT reflow a table with CSS. 767px (not 768) keeps the tablet artboard
   on the desktop table, exactly as the design renders it.
   ========================================================================= */
@media (max-width: 767px) {
  /* Tighter gutters — the desktop 32px padding wastes a phone's narrow column;
     drop any inner max-width cap so the column uses the full phone width. */
  .pp-main__inner { padding: 16px; max-width: none; }

  /* The 48px display headline overruns a ~343px content column; the design uses
     the --sm size on mobile, and long single tokens are allowed to wrap. */
  .pp-headline { font-size: 32px; overflow-wrap: break-word; }

  /* Stat tiles: minmax(0,1fr) lets the two columns split the row evenly instead
     of the big 64px value (e.g. "50%") forcing its track wider than the phone —
     plain 1fr is minmax(auto,1fr), which refuses to shrink below that min-content
     and blows the grid past .pp-main. The value + padding shrink so the number
     still fits the ~158px tile. Gap matches the design's 12px mobile frame. */
  .pp-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pp-stat { padding: 16px; min-height: 0; }
  .pp-stat__value { font-size: 40px; }

  /* Quick actions stack into a single column on the phone frame. */
  .pp-quick { grid-template-columns: 1fr; }

  /* Activity feed: hide the desktop table, reveal the design's stacked cards
     (the dashboard template emits both — components.jsx → FeedRowMobile). */
  .pp-feedtable { display: none; }
  .pp-feedlist { display: flex; }

  /* Trust card (Batch G): the 220px + 1fr split is too wide for the phone
     column — stack the big-number block above the sub-scores and move its
     divider from the right edge to the bottom so the rule still reads. */
  .pp-trust--row { grid-template-columns: 1fr; }
  .pp-trust--row .pp-trust__big {
    border-right: none;
    border-bottom: 1px solid var(--wmb-border);
    padding-right: 0;
    padding-bottom: 16px;
  }
}