/* =====================================================================
 * BrowserPsyLab — app.css v2
 * ResearchGate-inspired design system. See docs/08-design-system.md and
 * design/reference/design-tokens.md for the full token reference.
 *
 * Phase 1 rollout: this stylesheet only fully covers the three pages
 * restyled in Phase 1 (login, dashboard, studies). Other pages still
 * reference legacy class names and will look raw until Phase 2 ports
 * them across — intentional, per the rollout brief.
 * ===================================================================== */

:root {
  /* Part 1 — BrowserScale (BS) palette tokens. These are the canonical
   * names new code reaches for. The --bpl-* aliases below resolve to
   * these so existing class names keep working without a mass rewrite.
   *
   * The brand cyan stays scoped to the B/P/L wordmark only (--bpl-brand
   * a few lines down); every other surface moves to the BS navy/blue
   * accent pair. */
  --bg:               #f5f4f0;   /* paper-stock body background */
  --surface:          #ffffff;   /* card & sheet background */
  --accent:           #1a3a5c;   /* deep navy — strong CTAs, focused borders */
  --accent2:          #2e6da4;   /* medium blue — hover, links, in-progress glow */
  --success:          #1a6645;
  --success-bg:       #f0faf5;
  --success-border:   #b8e0cc;
  --border:           #d6d3cf;   /* light warm gray sitting against --bg */

  /* Brand cyan — strictly the MBPL wordmark + logo mark. Never used
   * for buttons, links, or status. See bpl-tri / bpl-brand rules. */
  --bpl-brand:      #0891b2;
  --bpl-mcgill-red: #ED1B2F;

  /* Primary (interactive blue) — aliased to BS accents. */
  --bpl-blue:        var(--accent2);
  --bpl-blue-hover:  var(--accent);
  --bpl-blue-light:  #e6eef7;

  /* Status families */
  --bpl-mint:        var(--success-bg);
  --bpl-mint-dark:   var(--success);
  --bpl-amber:       #FEF3C7;
  --bpl-amber-dark:  #92400E;
  --bpl-rose:        #FCE7E9;
  --bpl-rose-dark:   #B91C1C;
  --bpl-purple-light:#EDE9FE;
  --bpl-purple-dark: #6D28D9;
  --bpl-error:       #D9534F;

  /* Neutrals — aliased to BS surface family. */
  --bpl-bg:            var(--bg);
  --bpl-card:          var(--surface);
  --bpl-border:        var(--border);
  --bpl-border-strong: #b8b4af;
  --bpl-text:          #1A1F36;
  --bpl-text-muted:    #6B7280;
  --bpl-text-subtle:   #9CA3AF;

  /* Typography — DM family per the BS visual language. DM Sans body,
   * DM Serif Display for hero titles, DM Mono for IDs / resume codes /
   * monospace inputs. */
  --bpl-font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --bpl-font-serif: 'DM Serif Display', Georgia, serif;
  --bpl-font-mono:  'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --bpl-radius-pill: 999px;
  --bpl-radius-lg:   8px;
  --bpl-radius-md:   6px;
  --bpl-radius-sm:   4px;

  /* Shadows — subtle by design. */
  --bpl-shadow-card:  0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  --bpl-shadow-focus: 0 0 0 3px rgba(30, 91, 198, 0.15);
}

/* ---------- reset / base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html, body {
  font-family: var(--bpl-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--bpl-text);
  background: var(--bpl-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--bpl-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Part 1 — DM Mono for IDs, resume codes, copy-paste tokens, and
 * any inline cells that should read as "machine text". Apply via the
 * .bpl-mono utility on inline elements or .bpl-id on the dt/dd pair
 * that surfaces UUIDs in inboxes / study pages. */
code, kbd, pre, samp,
.bpl-mono, .bpl-id, .bpl-code,
input.bpl-input-mono, textarea.bpl-input-mono {
  font-family: var(--bpl-font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.bpl-id, .bpl-code {
  font-size: 0.875em;
  letter-spacing: 0.01em;
}

img { max-width: 100%; height: auto; }
button { font-family: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--bpl-shadow-focus);
  border-radius: var(--bpl-radius-sm);
}

/* ---------- header / global nav ---------- */

.bpl-header {
  background: var(--bpl-card);
  border-bottom: 1px solid var(--bpl-border);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.bpl-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: 32px;
}

.bpl-brand:hover { text-decoration: none; }

.bpl-brand-mark {
  width: 32px;
  height: 24px;
  background-color: var(--bpl-brand);
  -webkit-mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
          mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
  flex-shrink: 0;
}

/* Hero placement used on the login + run-login pitch surfaces. Inherits
   color from the surrounding container, so currentColor-tinted SVG works. */
.bpl-pitch-logo {
  display: block;
  width: 96px;
  height: 71px;
  color: var(--bpl-brand);
  background-color: currentColor;
  -webkit-mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
          mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
  margin: 0 0 16px;
}

/* Subtle mark for empty states. */
.bpl-empty-logo {
  display: block;
  width: 56px;
  height: 41px;
  background-color: var(--bpl-text-subtle);
  -webkit-mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
          mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
  margin: 8px auto 12px;
  opacity: .6;
}

/* Wordmark letter tint — B/P/L glyphs in "BrowserPsyLab" pick up the
   brand cyan, the rest of the wordmark stays in the surrounding color. */
.bpl-tri { color: var(--bpl-brand); }

/* Locale prefix ("Montréal · ") rendered ahead of the BrowserPsyLab
   wordmark — muted so it reads as a qualifier, not part of the name. */
.bpl-locale { color: var(--bpl-text-muted); font-weight: 400; }

/* Footer hero logo — significantly larger than the 32×24 header mark. */
.bpl-footer-logo {
  display: block;
  width: 132px;
  height: 98px;
  background-color: var(--bpl-brand);
  -webkit-mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
          mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
  margin: 0 0 10px;
}

/* Inline glyph used in the copyright bar — sized to the legal-row text. */
.bpl-inline-mark {
  display: inline-block;
  vertical-align: -3px;
  width: 19px;
  height: 14px;
  background-color: var(--bpl-brand);
  -webkit-mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
          mask: url(/img/mbpl-logo.svg) center/contain no-repeat;
}

.bpl-brand-name {
  font-family: var(--bpl-font-serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--bpl-text);
  letter-spacing: -0.01em;
}

.bpl-brand-tagline {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--bpl-border);
  font-size: 13px;
  color: var(--bpl-text-muted);
}

.bpl-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}

.bpl-nav-item {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  text-decoration: none;
  color: var(--bpl-text-muted);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.bpl-nav-item:hover { color: var(--bpl-text); text-decoration: none; }

.bpl-nav-item.is-active {
  color: var(--bpl-blue);
  border-bottom-color: var(--bpl-blue);
  font-weight: 600;
}

.bpl-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.bpl-search { position: relative; }

.bpl-search input {
  width: 280px;
  font-family: var(--bpl-font-sans);
  font-size: 14px;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-pill);
  background: var(--bpl-bg);
  color: var(--bpl-text);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.bpl-search input:focus {
  outline: none;
  border-color: var(--bpl-blue);
  background: var(--bpl-card);
  box-shadow: var(--bpl-shadow-focus);
}

.bpl-search::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.5;
  pointer-events: none;
}

.bpl-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bpl-text-muted);
  font-size: 16px;
  padding: 0;
}

.bpl-icon-btn:hover { background: var(--bpl-bg); color: var(--bpl-text); }

.bpl-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1E5BC6, #0D7560);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--bpl-font-sans);
  border: none;
  text-decoration: none;
}

.bpl-avatar:hover { text-decoration: none; }

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

.bpl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--bpl-font-sans);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: var(--bpl-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.2;
}

.bpl-btn:hover { text-decoration: none; }

.bpl-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bpl-btn-primary {
  background: var(--bpl-blue);
  color: white;
}

.bpl-btn-primary:hover:not(:disabled) {
  background: var(--bpl-blue-hover);
  color: white;
}

.bpl-btn-ghost {
  background: transparent;
  border-color: var(--bpl-border-strong);
  color: var(--bpl-text);
}

.bpl-btn-ghost:hover:not(:disabled) {
  background: var(--bpl-bg);
  border-color: var(--bpl-text-muted);
  color: var(--bpl-text);
}

.bpl-btn-text {
  background: transparent;
  color: var(--bpl-blue);
  padding: 6px 12px;
}

.bpl-btn-text:hover:not(:disabled) {
  background: var(--bpl-blue-light);
  color: var(--bpl-blue);
}

.bpl-btn-sm {
  font-size: 13px;
  padding: 6px 14px;
}

.bpl-btn-block {
  width: 100%;
  padding: 11px 24px;
  font-size: 15px;
}

/* ---------- shell + layout ---------- */

.bpl-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}

.bpl-shell-narrow {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px;
}

.bpl-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.bpl-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- page header ---------- */

.bpl-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 8px;
}

.bpl-page-header h1 {
  font-family: var(--bpl-font-serif);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--bpl-text);
  margin: 0;
  line-height: 1.2;
}

.bpl-page-header .bpl-sub {
  font-size: 14px;
  color: var(--bpl-text-muted);
  margin-top: 2px;
}

/* ---------- card ---------- */

.bpl-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-lg);
  box-shadow: var(--bpl-shadow-card);
  overflow: hidden;
}

.bpl-card-body { padding: 24px; }

.bpl-card-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--bpl-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.bpl-card-header h3 {
  font-family: var(--bpl-font-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--bpl-text);
  margin: 0;
  line-height: 1.3;
}

.bpl-card-header h3.sans {
  font-family: var(--bpl-font-sans);
  font-size: 15px;
  font-weight: 600;
}

.bpl-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--bpl-border);
  text-align: center;
}

/* Heading hero — for login-style large cards */
.bpl-card-hero { padding: 32px; }
.bpl-card-hero h2 {
  font-family: var(--bpl-font-serif);
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--bpl-text);
  line-height: 1.25;
}
.bpl-card-hero .bpl-card-sub {
  font-size: 14px;
  color: var(--bpl-text-muted);
  margin-bottom: 24px;
}

/* ---------- forms ---------- */

.bpl-field { margin-bottom: 16px; }

.bpl-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--bpl-text);
  margin-bottom: 6px;
}

.bpl-input,
.bpl-select,
.bpl-textarea {
  width: 100%;
  font-family: var(--bpl-font-sans);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--bpl-border-strong);
  border-radius: var(--bpl-radius-md);
  background: var(--bpl-card);
  color: var(--bpl-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bpl-textarea { min-height: 6rem; resize: vertical; }

.bpl-input:focus,
.bpl-select:focus,
.bpl-textarea:focus {
  outline: none;
  border-color: var(--bpl-blue);
  box-shadow: var(--bpl-shadow-focus);
}

.bpl-input:disabled,
.bpl-select:disabled,
.bpl-textarea:disabled {
  background: var(--bpl-bg);
  color: var(--bpl-text-subtle);
  cursor: not-allowed;
}

.bpl-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.bpl-link {
  color: var(--bpl-blue);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.bpl-link:hover { text-decoration: underline; }

.bpl-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--bpl-text-subtle);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bpl-divider::before, .bpl-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bpl-border);
}

.bpl-bottom-link {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--bpl-text-muted);
}

.bpl-error-msg {
  color: var(--bpl-error);
  font-size: 13px;
  margin-top: 12px;
  min-height: 1.25em;
}

/* ---------- stat row ---------- */

.bpl-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bpl-stat {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-lg);
  padding: 20px;
  box-shadow: var(--bpl-shadow-card);
}

.bpl-stat-label {
  font-size: 13px;
  color: var(--bpl-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.bpl-stat-value {
  font-family: var(--bpl-font-serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--bpl-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.bpl-stat-value .unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--bpl-text-muted);
}

.bpl-stat-delta {
  font-size: 12px;
  margin-top: 4px;
  color: var(--bpl-mint-dark);
  font-weight: 500;
}

.bpl-stat-delta.is-neutral { color: var(--bpl-text-muted); }
.bpl-stat-delta.is-negative { color: var(--bpl-rose-dark); }

/* ---------- study list item ---------- */

.bpl-study {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--bpl-border);
  transition: background 0.1s;
  cursor: pointer;
  color: var(--bpl-text);
  text-decoration: none;
}

.bpl-study:last-child { border-bottom: none; }
.bpl-study:hover { background: var(--bpl-bg); text-decoration: none; }

.bpl-study-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--bpl-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.bpl-study-icon img { width: 24px; height: 24px; display: block; }

.bpl-study-icon.questionnaire { background: var(--bpl-blue-light);   color: var(--bpl-blue); }
.bpl-study-icon.voice         { background: var(--bpl-rose);         color: var(--bpl-rose-dark); }
.bpl-study-icon.writing       { background: var(--bpl-amber);        color: var(--bpl-amber-dark); }
.bpl-study-icon.scale         { background: var(--bpl-mint);         color: var(--bpl-mint-dark); }
.bpl-study-icon.materials     { background: var(--bpl-purple-light); color: var(--bpl-purple-dark); }

.bpl-study-body { flex: 1; min-width: 0; }

.bpl-study-title {
  font-family: var(--bpl-font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--bpl-text);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bpl-study-meta {
  font-size: 13px;
  color: var(--bpl-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bpl-study-meta .bpl-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bpl-text-subtle);
}

.bpl-study-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
  flex-shrink: 0;
}

.bpl-progress-bar {
  width: 100px;
  height: 6px;
  background: var(--bpl-border);
  border-radius: 3px;
  overflow: hidden;
}

.bpl-progress-fill {
  height: 100%;
  background: var(--bpl-blue);
  border-radius: 3px;
}

.bpl-progress-fill.is-muted { background: var(--bpl-text-subtle); }
.bpl-progress-fill.is-amber { background: #D97706; }

.bpl-progress-text {
  font-size: 12px;
  color: var(--bpl-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
}

/* ---------- badges ---------- */

.bpl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: var(--bpl-radius-sm);
  line-height: 1.4;
}

.bpl-badge.bpl-badge-published  { background: var(--bpl-mint);  color: var(--bpl-mint-dark); }
.bpl-badge.bpl-badge-draft      { background: var(--bpl-bg);    color: var(--bpl-text-muted); border: 1px solid var(--bpl-border-strong); }
.bpl-badge.bpl-badge-in_review  { background: var(--bpl-amber); color: var(--bpl-amber-dark); }
.bpl-badge.bpl-badge-review     { background: var(--bpl-amber); color: var(--bpl-amber-dark); }
.bpl-badge.bpl-badge-archived   { background: var(--bpl-rose);  color: var(--bpl-rose-dark); }
.bpl-badge.bpl-badge-paused     { background: var(--bpl-bg);    color: var(--bpl-text-muted); border: 1px solid var(--bpl-border-strong); }
.bpl-badge.bpl-badge-closed     { background: var(--bpl-rose);  color: var(--bpl-rose-dark); }
.bpl-badge.bpl-badge-pilot      { background: var(--bpl-blue-light); color: var(--bpl-blue); }
.bpl-badge.bpl-badge-trash      { background: var(--bpl-bg);    color: var(--bpl-text-subtle); border: 1px solid var(--bpl-border); }

/* Compact role pill */
.bpl-role-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--bpl-radius-pill);
  background: var(--bpl-blue-light);
  color: var(--bpl-blue);
  border: 1px solid #d6e0f5;
}

/* ---------- aside cards ---------- */

.bpl-promo-card {
  background: linear-gradient(135deg, #E8EFFB 0%, #D4ECE7 100%);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-lg);
  padding: 20px;
}

.bpl-promo-card h4 {
  font-family: var(--bpl-font-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--bpl-text);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.bpl-promo-card p {
  font-size: 13px;
  color: var(--bpl-text-muted);
  margin: 0 0 14px;
}

.bpl-promo-card .bpl-btn {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border-strong);
  color: var(--bpl-text);
}

.bpl-promo-card .bpl-btn:hover { background: var(--bpl-bg); }

.bpl-activity {
  display: flex;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bpl-border);
  font-size: 13px;
}

.bpl-activity:last-child { border-bottom: none; }

.bpl-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bpl-blue);
  margin-top: 7px;
  flex-shrink: 0;
}

.bpl-activity-dot.is-green { background: var(--bpl-mint-dark); }
.bpl-activity-dot.is-amber { background: #D97706; }

.bpl-activity-text { color: var(--bpl-text); line-height: 1.4; }
.bpl-activity-text strong { font-weight: 600; }

.bpl-activity-time {
  color: var(--bpl-text-subtle);
  font-size: 12px;
  margin-top: 2px;
}

.bpl-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px;
}

.bpl-quick-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border-radius: var(--bpl-radius-md);
  border: 1px solid var(--bpl-border);
  background: var(--bpl-card);
  cursor: pointer;
  text-decoration: none;
  color: var(--bpl-text);
  transition: border-color 0.15s, background 0.15s;
}

.bpl-quick-action:hover {
  border-color: var(--bpl-blue);
  background: var(--bpl-blue-light);
  text-decoration: none;
}

.bpl-quick-action .icon { font-size: 18px; }
.bpl-quick-action .label { font-size: 13px; font-weight: 600; }

.bpl-storage { padding: 16px 20px; }

.bpl-storage-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 8px;
}

.bpl-storage-label { color: var(--bpl-text-muted); }
.bpl-storage-value {
  font-weight: 600;
  color: var(--bpl-text);
  font-variant-numeric: tabular-nums;
}

.bpl-storage-bar {
  height: 8px;
  background: var(--bpl-border);
  border-radius: 4px;
  overflow: hidden;
}

.bpl-storage-fill {
  height: 100%;
  background: var(--bpl-blue);
  border-radius: 4px;
}

.bpl-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--bpl-text-muted);
  font-size: 13px;
}

/* Compact list inside a card (e.g. labs list) */
.bpl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bpl-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--bpl-border);
}

.bpl-list-item:last-child { border-bottom: none; }

.bpl-list-item .bpl-list-name {
  font-weight: 500;
  color: var(--bpl-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.bpl-list-item .bpl-list-sub {
  color: var(--bpl-text-muted);
  font-size: 0.85rem;
  margin-left: 0.4rem;
}

/* Key/value blocks (account card etc.) */
.bpl-kv {
  display: grid;
  grid-template-columns: 9rem 1fr;
  row-gap: 0.5rem;
  column-gap: 1rem;
  margin: 0;
}

.bpl-kv dt { color: var(--bpl-text-muted); font-size: 0.9rem; }
.bpl-kv dd { margin: 0; font-size: 0.95rem; }

/* Utility */
.bpl-muted    { color: var(--bpl-text-muted); }
.bpl-subtle   { color: var(--bpl-text-subtle); }
.bpl-small    { font-size: 13px; }
.bpl-strong   { font-weight: 600; }
.bpl-mt-0     { margin-top: 0; }
.bpl-mt-1     { margin-top: 8px; }
.bpl-mt-2     { margin-top: 16px; }
.bpl-mt-3     { margin-top: 24px; }
.bpl-text-center { text-align: center; }
.bpl-hidden   { display: none !important; }

/* ---------- pagination ---------- */

.bpl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 24px 0 8px;
}

.bpl-page {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--bpl-text);
  font-family: var(--bpl-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  text-decoration: none;
}

.bpl-page:hover { background: var(--bpl-bg); text-decoration: none; }

.bpl-page.is-current {
  background: var(--bpl-blue);
  color: white;
}

.bpl-page.is-disabled {
  color: var(--bpl-text-subtle);
  cursor: not-allowed;
}

.bpl-page.is-disabled:hover { background: transparent; }

.bpl-page-ellipsis {
  color: var(--bpl-text-muted);
  padding: 0 4px;
}

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

.bpl-footer {
  background: var(--bpl-card);
  border-top: 1px solid var(--bpl-border);
  padding: 48px 32px 24px;
  margin-top: 48px;
}

.bpl-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr auto;
  gap: 32px;
  align-items: start;
}

.bpl-footer-brand-name {
  font-family: var(--bpl-font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--bpl-text);
  letter-spacing: -0.01em;
}

.bpl-footer-col h5 {
  font-family: var(--bpl-font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--bpl-text);
  margin: 0 0 14px;
}

.bpl-footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.bpl-footer-col a {
  font-size: 14px;
  color: var(--bpl-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.bpl-footer-col a:hover { color: var(--bpl-text); }

.bpl-footer-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}

.bpl-social { display: flex; gap: 14px; }

.bpl-social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bpl-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.15s;
}

.bpl-social a:hover { background: var(--bpl-bg); text-decoration: none; }

.bpl-footer-legal {
  max-width: 1280px;
  margin: 32px auto 0;
  border-top: 1px solid var(--bpl-border);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--bpl-text-muted);
}

/* Slice I — .bpl-footer-legal-links removed. The Terms / Privacy /
 * Copyright / Imprint strip was dropped (none of those pages
 * existed); the language switcher moved into .bpl-footer-lang
 * managed by public/js/footer-component.js. */

/* ---------- login page (two-column hero) ---------- */

.bpl-login-main {
  display: flex;
  min-height: calc(100vh - 64px - 200px);
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.bpl-login-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 960px;
  width: 100%;
  gap: 64px;
  align-items: center;
}

.bpl-pitch h1 {
  font-family: var(--bpl-font-serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bpl-text);
  margin: 0 0 16px;
}

.bpl-pitch .bpl-lead {
  font-size: 16px;
  color: var(--bpl-text-muted);
  margin: 0 0 32px;
  max-width: 420px;
}

.bpl-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.bpl-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--bpl-text);
}

.bpl-feature-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bpl-mint);
  color: var(--bpl-mint-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
}

.bpl-feature strong { font-weight: 600; }

.bpl-feature span {
  color: var(--bpl-text-muted);
  display: block;
  margin-top: 2px;
}

/* Slice H — pitch body paragraph replacing the checkmark bullets.
 * Sits below .bpl-lead, same column. Reads as a longer-form line
 * about what the platform covers end-to-end. */
.bpl-pitch-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bpl-text);
  max-width: 520px;
  margin: 0;
}

/* Slice H — Bluesky social link. Wider than the legacy emoji
 * social pills because it carries an SVG logo. Color comes from
 * Bluesky's brand cyan; hover lifts the background per the BS
 * card hover pattern. */
.bpl-social-bsky {
  color: #0085ff !important;
  width: 36px !important;
  height: 36px !important;
}
.bpl-social-bsky:hover { background: rgba(0, 133, 255, 0.08) !important; }
.bpl-social-bsky svg { display: block; }

/* Slice 2 of feat/unified-users — 3-tab strip at the top of the
 * login card. Tabs are role hints; the form below is shared. */
.bpl-login-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.bpl-login-tab {
  appearance: none;
  background: transparent;
  border: none;
  font: 600 14px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.bpl-login-tab:hover { color: var(--bpl-text); }
.bpl-login-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.bpl-login-secondary {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--bpl-text-muted);
}
.bpl-link-strong { font-weight: 600; }

/* feat/participant-pool Slice 1 — Two-path entry layout for
 * /run/:studyId. The guest path is the primary affordance; the
 * sign-in form sits behind a <details> collapse so credentialed
 * participants reach it in one click but it doesn't dominate the
 * visual hierarchy. */
.bpl-entry-path { margin: 16px 0; }
.bpl-entry-divider {
  text-align: center;
  color: var(--bpl-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 16px 0;
  position: relative;
}
.bpl-entry-divider::before,
.bpl-entry-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 36%;
  height: 1px;
  background: var(--border);
}
.bpl-entry-divider::before { left: 0; }
.bpl-entry-divider::after  { right: 0; }
.bpl-entry-signin {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  background: var(--surface);
}
.bpl-entry-signin > summary {
  cursor: pointer;
  padding: 14px 18px;
  list-style: none;
  font-weight: 600;
  color: var(--bpl-text);
}
.bpl-entry-signin > summary::-webkit-details-marker { display: none; }
.bpl-entry-signin > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 120ms ease;
}
.bpl-entry-signin[open] > summary::before { transform: rotate(90deg); }
.bpl-entry-signin > form {
  padding: 0 18px 18px;
}
.bpl-turnstile-slot { margin-top: 10px; min-height: 0; }

/* Slice 3 of feat/unified-users — /participant and /requester
 * membership lists, plus the cross-role section on /dashboard. */
.bpl-section-h {
  font-family: var(--bpl-font-serif);
  font-size: 18px;
  color: var(--accent);
  margin: 18px 0 10px;
}
.bpl-membership-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bpl-membership-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.bpl-membership-row:hover {
  border-color: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(46, 109, 164, 0.08);
  text-decoration: none;
}
.bpl-membership-row-middle { flex: 1; min-width: 0; }
.bpl-membership-row-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bpl-membership-row-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.bpl-membership-status-invited     { background: rgba(46, 109, 164, 0.08); color: var(--accent); }
.bpl-membership-status-active      { background: rgba(46, 109, 164, 0.08); color: var(--accent); }
.bpl-membership-status-in_progress { background: rgba(46, 109, 164, 0.15); color: var(--accent); }
.bpl-membership-status-awaiting_review { background: #fffbeb; color: #92400e; }
.bpl-membership-status-approved    { background: var(--success-bg); color: var(--success); }
.bpl-membership-status-rejected    { background: #fee2e2; color: #b91c1c; }
.bpl-membership-status-completed   { background: var(--success-bg); color: var(--success); }
.bpl-membership-status-withdrawn   { background: var(--bg); color: var(--bpl-text-muted); }

/* Slice 4 of feat/unified-users — Free-tier banner on /dashboard.
 * Sits above the stat-grid widgets; tinted with the accent2 fill so
 * it reads as an informational nudge, not a warning. */
.bpl-free-tier-banner {
  background: rgba(46, 109, 164, 0.05);
  border: 1px solid rgba(46, 109, 164, 0.2);
  margin-bottom: 16px;
}
.bpl-free-tier-banner h3 {
  font-family: var(--bpl-font-serif);
  margin: 0 0 6px;
  color: var(--accent);
}

/* Slice I — Footer language switcher. Three small buttons replacing
 * the legacy dead "EN · FR · 中文" anchor. Sits in the bottom-legal
 * strip, right-aligned next to the copyright. */
.bpl-footer-lang {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* feat/editor-complete Slice 1 — HTML5 drag-and-drop reorder
 * affordances on the StudyTask list. The row being dragged fades;
 * the drop target gains an inset border to mark the insertion
 * point. Falls back to up/down arrow buttons for keyboard users. */
.bpl-task-row { transition: opacity 120ms ease, box-shadow 120ms ease; }
.bpl-task-row.is-dragging { opacity: 0.35; }
.bpl-task-row.is-drop-target {
  box-shadow: inset 0 2px 0 var(--accent), 0 0 0 1px var(--accent);
}

/* feat/cleanup-followups Slice 2 — at narrow viewports the language
 * switcher previously got clipped because the bpl-header-right strip
 * doesn't wrap. The footer toggle inherits flex-wrap above; at
 * widths where the wordmark + copyright + lang triplet stops fitting
 * we also force the buttons compact (smaller padding) so all three
 * fit on a single row down to ~320px. */
@media (max-width: 480px) {
  .bpl-footer-lang { width: 100%; justify-content: flex-start; }
  .bpl-footer-lang-btn { padding: 3px 6px; font-size: 11px; }
}

.bpl-footer-lang-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  font: inherit;
  font-size: 12px;
  color: var(--bpl-text-muted);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.bpl-footer-lang-btn:hover {
  color: var(--accent);
  background: rgba(46, 109, 164, 0.06);
}
.bpl-footer-lang-btn.is-active {
  color: var(--accent);
  border-color: var(--border);
  font-weight: 600;
}

/* Slice H — "Coming soon" badge on placeholder pages. Pill with the
 * BS accent2 tint; sits above the page title. */
.bpl-coming-soon-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(46, 109, 164, 0.08);
  color: var(--accent);
  font-family: var(--bpl-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ---------- studies-list page filter bar ---------- */

.bpl-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-lg);
  box-shadow: var(--bpl-shadow-card);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.bpl-filterbar .bpl-filter-label {
  font-size: 13px;
  color: var(--bpl-text-muted);
  font-weight: 500;
}

.bpl-filterbar .bpl-chip {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--bpl-radius-pill);
  border: 1px solid var(--bpl-border-strong);
  background: var(--bpl-card);
  color: var(--bpl-text);
  cursor: pointer;
  font-family: inherit;
}

.bpl-filterbar .bpl-chip:hover { background: var(--bpl-bg); }

.bpl-filterbar .bpl-chip.is-active {
  background: var(--bpl-blue);
  color: white;
  border-color: var(--bpl-blue);
}

.bpl-filterbar .bpl-spacer { flex: 1; }

/* ---------- pre-registration (M83) ---------- */

.bpl-prereg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.bpl-prereg-preview { position: sticky; top: 16px; align-self: start; }

.bpl-prereg-md h2 {
  font: 700 22px/1.25 var(--bpl-font-serif);
  margin: 0 0 8px;
}
.bpl-prereg-md h3 {
  font: 700 15px/1.3 var(--bpl-font-serif);
  margin: 12px 0 4px;
  color: var(--bpl-text);
}
.bpl-prereg-md p {
  font: 400 14px/1.5 var(--bpl-font-sans);
  margin: 0 0 8px;
  color: var(--bpl-text);
}

/* ---------- modals (M83 lock confirmation) ---------- */

.bpl-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.bpl-modal[hidden] { display: none; }
.bpl-modal-shell {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-lg);
  padding: 24px;
  width: min(420px, 92vw);
  box-shadow: var(--bpl-shadow-card);
}

/* ---------- file drop zone (M78 import + M80 asset upload) ---------- */

.bpl-dropzone {
  border: 2px dashed var(--bpl-border-strong);
  border-radius: var(--bpl-radius-md);
  padding: 24px;
  text-align: center;
  background: var(--bpl-bg);
  transition: border-color 120ms ease;
}

.bpl-dropzone.is-drop {
  border-color: var(--bpl-blue);
  background: var(--bpl-blue-light);
}

.bpl-dropzone code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.bpl-dropzone-prompt {
  color: var(--bpl-text-muted);
  font: 400 14px/1.4 var(--bpl-font-sans);
}

/* ---------- audio review (M68) ---------- */

.bpl-btn-row { display: flex; gap: 8px; align-items: center; }
.bpl-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.bpl-audio-row {
  margin-bottom: 16px;
  padding: 20px 24px;
}

.bpl-audio-head {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.bpl-audio-check { display: flex; align-items: center; }
.bpl-audio-check input { width: 16px; height: 16px; cursor: pointer; }

.bpl-audio-title { min-width: 0; }

.bpl-qc-flags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

.bpl-audio-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.bpl-waveform {
  width: 200px;
  height: 36px;
  border-radius: var(--bpl-radius-sm);
  background: var(--bpl-bg);
  display: block;
}

.bpl-audio-body audio {
  width: 100%;
  height: 36px;
}

.bpl-audio-tx-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text);
  margin-bottom: 4px;
}

.bpl-audio-tx {
  font-family: var(--bpl-font-sans);
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  min-height: 44px;
}

.bpl-audio-acoustic {
  margin-top: 12px;
  border-top: 1px solid var(--bpl-border);
  padding-top: 12px;
}

.bpl-audio-acoustic-summary {
  font: 500 13px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
  cursor: pointer;
  user-select: none;
}

.bpl-audio-acoustic-summary:hover { color: var(--bpl-text); }

.bpl-audio-acoustic .bpl-kv {
  margin-top: 12px;
  width: 100%;
}

.bpl-audio-acoustic .bpl-kv th {
  text-align: left;
  font: 400 13px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
  padding: 4px 0;
  width: 40%;
}

.bpl-audio-acoustic .bpl-kv td {
  font: 500 13px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text);
  padding: 4px 0;
}

.bpl-audio-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 8px;
}

.bpl-audio-job-status {
  font: 400 13px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
  margin-left: auto;
}

/* ---------- version history (M74) ---------- */

.bpl-version-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bpl-version-item {
  position: relative;
  padding: 16px 0 16px 32px;
  border-left: 2px solid var(--bpl-border);
}

.bpl-version-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--bpl-card);
  border: 2px solid var(--bpl-border-strong);
}

.bpl-version-item.is-active::before {
  background: var(--bpl-blue);
  border-color: var(--bpl-blue);
}

.bpl-version-item.is-superseded { opacity: 0.85; }

.bpl-version-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.bpl-version-num {
  font: 700 17px/1.3 var(--bpl-font-serif);
  color: var(--bpl-text);
}

.bpl-version-when {
  font: 400 13px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
}

.bpl-version-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.bpl-version-config {
  font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bpl-bg);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-md);
  padding: 12px;
  white-space: pre;
  overflow: auto;
  max-height: 400px;
  margin-top: 12px;
}

.bpl-diff-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 13px/1.5 var(--bpl-font-sans);
  margin-top: 12px;
}

.bpl-diff-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--bpl-border);
  font-weight: 600;
  font-size: 13px;
}

.bpl-diff-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--bpl-border);
  vertical-align: top;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.bpl-diff-row.added { background: rgba(13, 117, 96, 0.06); }
.bpl-diff-row.removed { background: rgba(185, 28, 28, 0.06); }
.bpl-diff-row.changed { background: rgba(146, 64, 14, 0.06); }

.bpl-diff-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--bpl-text-muted); font-size: 12px; }
.bpl-diff-old { color: var(--bpl-rose-dark); }
.bpl-diff-new { color: var(--bpl-mint-dark); }

/* ---------- i18n language switcher (M87, retired Slice I) ----------
 * .bpl-lang-switcher was the dashboard top-bar <select> + .bpl-lang-
 * toggle was the request/run hub EN·中文 chip pair. Both were
 * consolidated into the footer language switcher (.bpl-footer-lang
 * managed by public/js/footer-component.js). The /run/login.html
 * picker is a *participant-side* per-study language picker — not
 * the same widget — so its #lang-pick is unaffected. The legacy
 * .bpl-lang-switcher rules stay for back-compat with
 * /run/login.html (which still references the class on its picker
 * wrapper) but the new top-bar surfaces no longer mount them. */

.bpl-lang-switcher {
  position: relative;
}

.bpl-lang-switcher select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--bpl-border-strong);
  background: var(--bpl-card);
  color: var(--bpl-text);
  font: 500 13px/1.4 var(--bpl-font-sans);
  padding: 6px 28px 6px 12px;
  border-radius: var(--bpl-radius-pill);
  cursor: pointer;
}

.bpl-lang-switcher::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bpl-text-muted);
  pointer-events: none;
  font-size: 10px;
}

/* ---------- data table (Phase 2c shared) ----------
 * Used by sessions, api-tokens, audit-log, applications, etc. */

.bpl-data-table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14px/1.5 var(--bpl-font-sans);
  color: var(--bpl-text);
}

.bpl-data-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--bpl-text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--bpl-border);
  background: var(--bpl-bg);
}

.bpl-data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bpl-border);
  vertical-align: middle;
}

.bpl-data-table tbody tr:last-child td { border-bottom: 0; }

.bpl-data-table tbody tr:hover {
  background: var(--bpl-blue-light);
}

.bpl-data-table .bpl-badge { vertical-align: middle; }

/* Chip with icon */
.bpl-chip .ph { font-size: 14px; margin-right: 4px; vertical-align: -2px; }

/* ---------- icons (Phosphor — self-hosted at /icons/phosphor/) ----------
 * Default size 24px, current text color. Modifier classes provide the
 * four sizes documented in docs/08-design-system.md. */

.ph {
  font-size: 24px;
  line-height: 1;
  color: currentColor;
  vertical-align: middle;
}

.ph-16 { font-size: 16px; }
.ph-20 { font-size: 20px; }
.ph-24 { font-size: 24px; }
.ph-32 { font-size: 32px; }

/* Inline icons inside buttons: small + non-shrinking */
.bpl-btn .ph {
  font-size: 16px;
  margin-right: 6px;
  vertical-align: -2px;
}
.bpl-btn.bpl-btn-lg .ph { font-size: 20px; }
.bpl-icon-btn .ph { font-size: 20px; margin-right: 0; }
.bpl-nav-item .ph { font-size: 18px; margin-right: 4px; vertical-align: -3px; }

/* Study-type icon backgrounds keep their tints; replace the unicode
 * glyph children with <i class="ph ph-..."></i> for visual consistency. */
.bpl-study-icon .ph { font-size: 22px; line-height: 1; }
.bpl-type-card .bpl-study-icon .ph { font-size: 28px; }

/* ---------- runner pages (Area U) ----------
 * Participant-facing pages: larger fonts, larger touch targets,
 * minimal chrome. No researcher nav. The runner-internal aliases at
 * the bottom let public/js/run-study.js keep emitting legacy
 * `.card`/`.btn`/etc. class names — they render with the same bpl-*
 * tokens via the alias rules. */

.bpl-runner {
  background: var(--bpl-bg);
  min-height: 100vh;
}

.bpl-runner-header {
  background: var(--bpl-card);
  border-bottom: 1px solid var(--bpl-border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bpl-runner-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bpl-btn-danger {
  color: var(--bpl-rose-dark);
}
.bpl-btn-danger:hover {
  background: var(--bpl-rose);
}

.bpl-runner-progress {
  height: 4px;
  background: var(--bpl-border);
  width: 100%;
  position: sticky;
  top: 64px;
  z-index: 9;
}
.bpl-runner-progress-bar {
  height: 100%;
  background: var(--bpl-blue);
  width: 0;
  transition: width 200ms ease;
}
.bpl-runner-progress-text {
  text-align: center;
  font: 400 13px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
  margin: 8px 0 0;
}

.bpl-runner-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

.bpl-runner-h1 {
  font: 700 32px/1.2 var(--bpl-font-serif);
  margin: 0 0 8px;
  color: var(--bpl-text);
}

.bpl-runner-sub {
  font: 400 16px/1.5 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
  margin: 0 0 24px;
}

.bpl-input-lg {
  font-size: 17px;
  padding: 14px 16px;
  min-height: 48px;
}

.bpl-btn-lg {
  font-size: 16px;
  padding: 14px 28px;
  min-height: 48px;
}

/* Runner cards have larger padding + readable text */
.bpl-runner .bpl-card {
  padding: 32px;
}

.bpl-runner .bpl-card p,
.bpl-runner .bpl-card label,
.bpl-runner .bpl-card .item-label {
  font-size: 16px;
  line-height: 1.6;
}

.bpl-runner .bpl-card h2,
.bpl-runner .bpl-card h3 {
  font-family: var(--bpl-font-serif);
}

/* Consent body — long readable text */
.bpl-runner .consent-body {
  font: 400 16px/1.7 var(--bpl-font-sans);
  color: var(--bpl-text);
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 8px;
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-md);
  background: var(--bpl-bg);
  margin: 0 0 16px;
}

/* Checkbox + option rows — large touch targets */
.bpl-runner .checkline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  min-height: 44px;
  cursor: pointer;
  border-radius: var(--bpl-radius-md);
}
.bpl-runner .checkline:hover {
  background: var(--bpl-blue-light);
}
.bpl-runner .checkline input[type="checkbox"],
.bpl-runner .checkline input[type="radio"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Likert row */
.bpl-runner .likert-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 20px;
}
.bpl-runner .likert-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  min-width: 64px;
  min-height: 64px;
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-md);
  cursor: pointer;
  background: var(--bpl-card);
  transition: background 120ms ease, border-color 120ms ease;
  flex: 1 1 0;
}
.bpl-runner .likert-cell:hover {
  background: var(--bpl-blue-light);
  border-color: var(--bpl-blue);
}
.bpl-runner .likert-cell input[type="radio"] {
  width: 24px;
  height: 24px;
}

/* Item wrapper (per-question) */
.bpl-runner .item {
  margin-bottom: 24px;
}
.bpl-runner .item-label {
  font: 500 17px/1.5 var(--bpl-font-sans);
  color: var(--bpl-text);
  margin-bottom: 8px;
  display: block;
}

/* Options (multi-choice etc) */
.bpl-runner .options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Writing meta (word counter + timer) */
.bpl-runner .writing-meta {
  display: flex;
  justify-content: space-between;
  font: 500 14px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
  margin: 8px 0 16px;
}

/* Action button row at bottom of each page */
.bpl-runner .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--bpl-border);
}

/* Voice — large mic button + waveform */
.bpl-runner .bpl-mic {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--bpl-blue);
  color: white;
  border: 0;
  font-size: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto;
  transition: background 120ms ease, transform 120ms ease;
}
.bpl-runner .bpl-mic:hover { background: var(--bpl-blue-hover); }
.bpl-runner .bpl-mic.is-recording {
  background: var(--bpl-rose-dark);
  animation: bpl-pulse 1.4s ease-in-out infinite;
}
@keyframes bpl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.4); }
  50%      { box-shadow: 0 0 0 14px rgba(185, 28, 28, 0); }
}

/* Runner-internal legacy aliases: public/js/run-study.js emits these
 * class names dynamically (.card, .btn, .btn-primary, .btn-ghost,
 * .btn-inline, .field, .form). Render them with the same tokens as
 * their bpl-* equivalents so the runner gets the new look without
 * touching 1179 lines of DOM-building JS. */
.bpl-runner .card,
.bpl-runner-shell .card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-lg);
  box-shadow: var(--bpl-shadow-card);
  padding: 32px;
  margin-bottom: 16px;
}
.bpl-runner .btn,
.bpl-runner-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 16px/1 var(--bpl-font-sans);
  border-radius: var(--bpl-radius-pill);
  padding: 14px 28px;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease;
}
.bpl-runner .btn-primary {
  background: var(--bpl-blue);
  color: white;
  border-color: var(--bpl-blue);
}
.bpl-runner .btn-primary:hover { background: var(--bpl-blue-hover); border-color: var(--bpl-blue-hover); }
.bpl-runner .btn-ghost {
  background: transparent;
  color: var(--bpl-text);
  border-color: var(--bpl-border-strong);
}
.bpl-runner .btn-ghost:hover { background: var(--bpl-bg); }
.bpl-runner .btn-inline { padding: 8px 18px; min-height: 36px; font-size: 14px; }
.bpl-runner .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.bpl-runner .field > label {
  font: 600 14px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text);
}
.bpl-runner .field input[type="text"],
.bpl-runner .field input[type="email"],
.bpl-runner .field input[type="password"],
.bpl-runner .field input[type="number"],
.bpl-runner .field textarea,
.bpl-runner .field select {
  font: 400 17px/1.4 var(--bpl-font-sans);
  padding: 14px 16px;
  min-height: 48px;
  border: 1px solid var(--bpl-border-strong);
  border-radius: var(--bpl-radius-md);
  background: var(--bpl-card);
  color: var(--bpl-text);
  width: 100%;
}
.bpl-runner .field input:focus,
.bpl-runner .field textarea:focus,
.bpl-runner .field select:focus {
  outline: none;
  border-color: var(--bpl-blue);
  box-shadow: var(--bpl-shadow-focus);
}
.bpl-runner .muted { color: var(--bpl-text-muted); }
.bpl-runner .small { font-size: 13px; }
.bpl-runner .error { color: var(--bpl-error); font-size: 14px; }

/* ---------- new-study type grid (Area V) ---------- */

.bpl-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.bpl-type-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-lg);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  text-align: left;
  font-family: inherit;
}

.bpl-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  border-color: var(--bpl-border-strong);
}

.bpl-type-card.is-selected,
.bpl-type-card:has(input[type="radio"]:checked) {
  border-color: var(--bpl-blue);
  background: var(--bpl-blue-light);
}
.bpl-type-card:focus-within {
  box-shadow: var(--bpl-shadow-focus);
}

.bpl-type-card .bpl-study-icon {
  width: 56px;
  height: 56px;
  font-size: 28px;
}

.bpl-type-card-name {
  font: 700 17px/1.3 var(--bpl-font-serif);
  color: var(--bpl-text);
}

.bpl-type-card-sub {
  font: 400 14px/1.5 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
}

.bpl-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---------- study editor (Area V) ---------- */

.bpl-shell-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

/* Three-column editor shell (Wenjuan parity Tier 0).
   Wraps inside .bpl-shell-wide so the page header + tabs above it stay
   centered at the same width. Bumps the shell-wide to a wider max so
   the rails + canvas all breathe. */
.bpl-editor-page .bpl-shell-wide { max-width: 1440px; }
.bpl-editor-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.bpl-editor-left,
.bpl-editor-right {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-lg);
  box-shadow: var(--bpl-shadow-card);
  position: sticky;
  top: 80px;       /* clears the sticky bpl-header */
  max-height: calc(100vh - 100px);
  overflow: auto;
}
.bpl-editor-canvas {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0; /* prevent grid overflow */
}
.bpl-rail-header {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--bpl-border);
}
.bpl-rail-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--bpl-text);
}
.bpl-rail-body {
  padding: 12px 12px 16px;
}
.bpl-rail-section { margin-bottom: 14px; }
.bpl-rail-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bpl-text-muted);
  margin: 0 0 6px 4px;
}
.bpl-rail-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
}
.bpl-rail-type-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bpl-radius-md);
  font: inherit;
  color: var(--bpl-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bpl-rail-type-btn:hover {
  background: var(--bpl-bg);
  border-color: var(--bpl-border);
}
.bpl-rail-type-btn .ph {
  font-size: 16px;
  color: var(--bpl-text-muted);
  flex-shrink: 0;
}
.bpl-rail-type-btn:hover .ph { color: var(--bpl-text); }

/* Canvas item stub (replaces the old inline item card). Compact row
   the researcher clicks to select; settings render in the right rail. */
.bpl-canvas-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-md);
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.bpl-canvas-item:hover { border-color: var(--bpl-border-strong); }
.bpl-canvas-item.is-selected {
  border-color: #1E5BC6;
  box-shadow: var(--bpl-shadow-focus);
}
.bpl-canvas-item-icon .ph {
  font-size: 18px;
  color: var(--bpl-text-muted);
}
.bpl-canvas-item-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bpl-canvas-item-label {
  font-weight: 500;
  color: var(--bpl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bpl-canvas-item-meta {
  font-size: 12px;
  color: var(--bpl-text-muted);
}
.bpl-canvas-item-type {
  font-size: 11px;
}
.bpl-canvas-item-type.is-required::after {
  content: ' *';
  color: #C0392B;
}
.bpl-canvas-item-tools {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.bpl-canvas-item:hover .bpl-canvas-item-tools,
.bpl-canvas-item.is-selected .bpl-canvas-item-tools { opacity: 1; }
.bpl-canvas-item--unsupported {
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 6px,
    rgba(217, 119, 6, 0.06) 6px, rgba(217, 119, 6, 0.06) 12px
  );
}

/* Responsive collapse: the rails become <details> blocks at the top
   of the canvas, then the canvas takes the full width. */
@media (max-width: 960px) {
  .bpl-editor-shell {
    grid-template-columns: 1fr;
  }
  .bpl-editor-left,
  .bpl-editor-right {
    position: static;
    max-height: none;
  }
}

/* Voice runner — VU meter + recording-timer animation (BVC parity). */
.bpl-meter-bar {
  height: 8px;
  background: var(--bpl-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.bpl-meter-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2e6da4, #27ae60);
  border-radius: 4px;
  transition: width 0.05s linear;
}
.bpl-meter-fill.is-clipping {
  background: linear-gradient(90deg, #e67e22, #c0392b);
}
@keyframes bpl-rec-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Pre-publish checklist on the study overview lifecycle card. */
.bpl-checklist {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.bpl-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
  color: var(--bpl-text);
}
.bpl-checklist li .ph {
  font-size: 16px;
  flex-shrink: 0;
}

/* Matrix Likert (runner-side) — compact grid of statements rated on a
   shared scale. Used inside the runner's renderItem 'matrix_likert'
   branch and inside the editor's right-rail settings preview. */
.bpl-matrix-likert {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.bpl-matrix-likert thead th {
  font-weight: 500;
  color: var(--bpl-text-muted);
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--bpl-border);
  font-size: 12px;
}
.bpl-matrix-likert .bpl-matrix-likert-row-label {
  font-weight: 500;
  color: var(--bpl-text);
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--bpl-border);
  vertical-align: middle;
  max-width: 320px;
}
.bpl-matrix-likert .bpl-matrix-likert-cell {
  text-align: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--bpl-border);
}
.bpl-matrix-likert tbody tr:hover {
  background: var(--bpl-bg);
}
.bpl-matrix-likert input[type=radio] {
  margin: 0;
  cursor: pointer;
}

.bpl-editor-item {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-md);
  margin-bottom: 8px;
}

.bpl-editor-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bpl-border);
  background: var(--bpl-bg);
}

.bpl-editor-item-tools {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.bpl-editor-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bpl-border);
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 0;
}

.bpl-editor-tab {
  padding: 12px 16px;
  font: 500 14px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
}
.bpl-editor-tab:hover { color: var(--bpl-text); }
.bpl-editor-tab.is-active {
  color: var(--bpl-blue);
  border-bottom-color: var(--bpl-blue);
}

.bpl-save-bar {
  position: sticky;
  bottom: 16px;
  margin-top: 32px;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-pill);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
  z-index: 5;
}

.bpl-save-bar-status {
  flex: 1;
  font: 400 13px/1.4 var(--bpl-font-sans);
  color: var(--bpl-text-muted);
}

.bpl-lang-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 8px;
  background: var(--bpl-bg);
  padding: 4px;
  border-radius: var(--bpl-radius-pill);
}
.bpl-lang-tab {
  font: 500 12px/1 var(--bpl-font-sans);
  padding: 6px 12px;
  border-radius: var(--bpl-radius-pill);
  background: transparent;
  border: 0;
  color: var(--bpl-text-muted);
  cursor: pointer;
}
.bpl-lang-tab.is-active {
  background: var(--bpl-card);
  color: var(--bpl-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

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

@media (max-width: 1024px) {
  .bpl-shell { grid-template-columns: 1fr; }
  .bpl-stat-row { grid-template-columns: repeat(2, 1fr); }
  .bpl-search input { width: 180px; }
  .bpl-footer-inner { grid-template-columns: 1fr 1fr; }
  .bpl-footer-brand { grid-column: 1 / -1; }
  .bpl-footer-side { grid-column: 1 / -1; align-items: flex-start; }
  .bpl-footer-legal { flex-direction: column; gap: 12px; align-items: flex-start; }
}

@media (max-width: 768px) {
  .bpl-login-shell {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bpl-pitch { text-align: center; }
  .bpl-pitch .bpl-lead { margin-left: auto; margin-right: auto; }
  .bpl-feature-list { text-align: left; max-width: 360px; margin: 0 auto; }
  .bpl-brand-tagline { display: none; }
  .bpl-page-header { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .bpl-nav { display: none; }
  .bpl-search { display: none; }
  .bpl-stat-row { grid-template-columns: 1fr 1fr; }
  .bpl-study-progress { display: none; }
  .bpl-header { padding: 0 16px; }
  .bpl-shell, .bpl-shell-narrow { padding: 16px; }
  .bpl-card-body { padding: 16px; }
  .bpl-card-header { padding: 14px 16px; }
  .bpl-study { padding: 14px 16px; }

  /* Runner pages: stretch buttons to full width on phones, drop side padding. */
  .bpl-runner-shell { padding: 16px 12px 80px; }
  .bpl-runner .bpl-card,
  .bpl-runner-shell .bpl-card,
  .bpl-runner .card,
  .bpl-runner-shell .card { padding: 20px; }
  .bpl-runner .actions { flex-direction: column-reverse; align-items: stretch; }
  .bpl-runner .actions .btn,
  .bpl-runner .actions .bpl-btn { width: 100%; }
  .bpl-runner-h1 { font-size: 26px; }
  .bpl-runner .likert-cell { min-width: 48px; padding: 8px; }
}

/* ----- M105 external hub task cards (Part 2 F2) -------------------
 * 5 distinct visual states. Part 1 (BS visual language) replaces
 * these with the full card metaphor — these are the minimum-viable
 * distinct treatments so the demo doesn't show identical cards. */
.bpl-task-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.bpl-task-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid var(--bpl-border, #e5e7eb);
  background: var(--bpl-card, #fff);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.bpl-task-card-title { font-weight: 600; flex: 1; }
.bpl-task-card-status {
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
}
.bpl-task-card-locked { opacity: 0.55; cursor: not-allowed; }
.bpl-task-card-locked .bpl-task-card-status { color: #6b7280; }
.bpl-task-card-available { border-color: var(--border); }
.bpl-task-card-available:hover {
  border-color: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(46, 109, 164, 0.08);
}
.bpl-task-card-in_progress {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(46, 109, 164, 0.15);
}
.bpl-task-card-in_progress .bpl-task-card-status { color: var(--accent); font-weight: 600; }
.bpl-task-card-awaiting_review {
  border-color: #e0b34a;
  background: #fffbeb;
}
.bpl-task-card-awaiting_review .bpl-task-card-status {
  color: #92400e;
  font-weight: 600;
}
.bpl-task-card-completed {
  background: var(--success-bg);
  border-color: var(--success-border);
}
.bpl-task-card-completed .bpl-task-card-status {
  color: var(--success);
  font-weight: 600;
}
.bpl-task-card-completed .bpl-task-card-status::before {
  content: '✓ ';
  font-weight: 700;
}

/* ============================================================ */
/* Slice A — centered hub layout per BrowserScale main.html.     */
/*                                                                */
/* Pattern: full-bleed topbar + actionbar; centered max-width     */
/* container for content. Mirrors BS main.html lines 18-19, 31,   */
/* 88-89 (.topbar/.topbar-inner, .page-wrap, .bottom-nav-inner).  */
/* ============================================================ */
.bpl-hub-root {
  display: block;
  padding: 0;
  margin: 0;
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: 80px; /* room for the fixed actionbar */
}
.bpl-hub-inner {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.bpl-hub-wrap {
  padding: 28px 24px 24px;
}

.bpl-hub-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
}
.bpl-hub-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bpl-hub-topbar-title {
  font-family: var(--bpl-font-serif);
  font-size: 18px;
  color: var(--accent);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Slice I — .bpl-lang-toggle / .bpl-lang-btn rules removed. The
 * top-bar EN/中文 chip toggle on the request and run hubs was
 * consolidated into the shared footer (.bpl-footer-lang managed
 * by public/js/footer-component.js). */

/* Task card v2 — number badge + middle column. The badge sits in the
 * absolute top-right corner per the BS reference; the middle column
 * carries the wrapped title and status. */
.bpl-task-card {
  position: relative;
  border-width: 1.5px;
  border-radius: 14px;
  animation: bplFadeUp 320ms cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.bpl-task-card-number {
  position: absolute;
  top: 10px; right: 14px;
  font-family: var(--bpl-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--bpl-text-subtle);
  letter-spacing: 0.06em;
}
.bpl-task-card-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@keyframes bplFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Re-send pill */
.bpl-resend-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-size: 13px;
  color: var(--bpl-text-muted);
}
.bpl-resend-label { font-weight: 600; color: var(--bpl-text); }
.bpl-btn-sm { padding: 4px 10px; font-size: 12px; }
.bpl-resend-status { color: var(--success); font-size: 12px; }

/* Slice A — Action bar is fixed to viewport bottom, full-bleed.
 * Inner content respects the same centered container width. */
.bpl-hub-actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  z-index: 10;
}
.bpl-hub-actionbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* Mobile collapse — keep centered but tighter side padding. */
@media (max-width: 600px) {
  .bpl-hub-wrap { padding: 20px 16px 20px; }
  .bpl-hub-topbar { padding: 10px 16px; }
  .bpl-hub-actionbar { padding: 10px 16px; }
  .bpl-hub-topbar-title { font-size: 16px; }
}

/* Slice B — consent / payment_confirm pill rows. The success-green
 * flip is the BS pattern from main.html (a checked item becomes a
 * subtly tinted pill so the participant sees their progress). */
.bpl-consent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 8px 0;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  transition: background-color 140ms ease, border-color 140ms ease;
  cursor: pointer;
}
.bpl-consent-row label { cursor: pointer; flex: 1; }
.bpl-consent-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--success);
  flex-shrink: 0;
}
.bpl-consent-row-ticked {
  background: var(--success-bg);
  border-color: var(--success-border);
}
.bpl-consent-row-ticked label { color: var(--success); font-weight: 600; }

/* Slice E — Hub tasks editor list. Minimal viable: numbered rows
 * with up/down/edit/delete buttons on the right. Drag-and-drop is a
 * follow-up. */
.bpl-tasks-tab { margin-top: 16px; }
.bpl-tasks-tab .bpl-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.bpl-tasks-add {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bpl-tasks-add .bpl-input { width: auto; padding: 6px 10px; }
.bpl-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bpl-task-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
}
.bpl-task-row-handle {
  font-family: var(--bpl-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--bpl-text-subtle);
  width: 24px;
  text-align: center;
}
.bpl-task-row-middle { flex: 1; min-width: 0; }
.bpl-task-row-title { display: flex; align-items: baseline; gap: 6px; }
.bpl-task-row-actions { display: flex; gap: 4px; }
.bpl-icon-btn-danger:hover { color: #b91c1c; }

/* Slice F — Dashboard widgets + notification bell. */
.bpl-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.bpl-stat-card {
  display: block;
  padding: 18px 20px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.bpl-stat-card:hover {
  border-color: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(46, 109, 164, 0.08);
  text-decoration: none;
}
.bpl-stat-num {
  font-family: var(--bpl-font-serif);
  font-size: 28px;
  color: var(--accent);
  line-height: 1.2;
}
.bpl-stat-label {
  font-size: 13px;
  color: var(--bpl-text-muted);
  margin-top: 4px;
}

.bpl-bell-badge {
  position: absolute;
  top: 0; right: 0;
  background: #b91c1c;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  pointer-events: none;
  transform: translate(35%, -35%);
}
.bpl-header-right .bpl-icon-btn { position: relative; }
.bpl-bell-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 320px;
  max-height: 420px;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
  z-index: 50;
}
.bpl-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.bpl-bell-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.bpl-bell-row:hover { background: var(--bg); }
.bpl-bell-row:last-child { border-bottom: none; }
.bpl-bell-row.is-unread { background: rgba(46, 109, 164, 0.06); }
.bpl-bell-row.is-unread .kind { font-weight: 600; color: var(--accent); }

/* Slice F — Audit log timeline. Two-column rows: timestamp left, body right. */
.bpl-audit-timeline {
  border-left: 2px solid var(--border);
  padding-left: 14px;
  margin-top: 12px;
}
.bpl-audit-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
}
.bpl-audit-row:last-child { border-bottom: none; }
.bpl-audit-when { font-size: 12px; color: var(--bpl-text-muted); }
.bpl-audit-body { min-width: 0; }
@media (max-width: 600px) {
  .bpl-audit-row { grid-template-columns: 1fr; gap: 2px; }
}

/* BS-style confirmation modal */
.bpl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: bplFadeIn 160ms ease both;
}
.bpl-modal-card {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 32px 28px 24px;
  max-width: 420px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
.bpl-modal-icon { font-size: 32px; margin-bottom: 8px; }
.bpl-modal-card h3 {
  font-family: var(--bpl-font-serif);
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--accent);
}
.bpl-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.bpl-btn-danger {
  background: #b91c1c;
  color: white;
  border-color: #b91c1c;
}
.bpl-btn-danger:hover { background: #991b1b; border-color: #991b1b; }
@keyframes bplFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ========================================================================
 * feat/folders — folder view (Slice 3) + study card overflow (Slice 4)
 * ====================================================================== */

/* Breadcrumbs — wenjuan-style "Personal projects > Voice perception > …".
 * The chain is built in JS from the /workspaces/:id `breadcrumbs` field. */
.bpl-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--bpl-text-muted);
  margin: 0 0 12px;
}
.bpl-breadcrumb a {
  color: var(--bpl-text-muted);
  text-decoration: none;
}
.bpl-breadcrumb a:hover { color: var(--bpl-text); }
.bpl-breadcrumb .sep { color: var(--bpl-text-subtle); user-select: none; }
.bpl-breadcrumb .current { color: var(--bpl-text); font-weight: 500; }

/* Folder + study card grid. Three columns on desktop, gracefully collapses. */
.bpl-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin: 0;
}

/* Folder card — folder icon, name, "N studies" count, ··· menu. */
.bpl-folder-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bpl-folder-card:hover {
  border-color: var(--bpl-border-strong);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  text-decoration: none;
}
.bpl-folder-card .bpl-folder-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bpl-amber);
  color: var(--bpl-amber-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.bpl-folder-card .bpl-folder-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--bpl-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bpl-folder-card .bpl-folder-meta {
  color: var(--bpl-text-muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bpl-folder-card .bpl-folder-meta .bpl-dot {
  display: inline-block; width: 3px; height: 3px;
  border-radius: 50%; background: currentColor; opacity: 0.5;
}

/* Study card — same grid slot as folder card but distinguished by the
 * type badge in the top-left. Slice 4 enhances with the full ··· menu;
 * Slice 3 ships a basic but extensible shape. */
.bpl-study-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bpl-study-card:hover {
  border-color: var(--bpl-border-strong);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.bpl-study-card .bpl-card-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 999px;
  width: max-content;
}
.bpl-card-type.questionnaire { background: var(--bpl-blue-light);  color: var(--bpl-blue); }
.bpl-card-type.voice         { background: var(--bpl-rose);        color: var(--bpl-rose-dark); }
.bpl-card-type.writing       { background: var(--bpl-amber);       color: var(--bpl-amber-dark); }
.bpl-card-type.scale         { background: var(--bpl-mint);        color: var(--bpl-mint-dark); }
.bpl-card-type.materials     { background: var(--bpl-purple-light); color: var(--bpl-purple-dark); }
.bpl-card-type.media         { background: var(--bpl-blue-light);  color: var(--bpl-blue); }

.bpl-study-card .bpl-card-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--bpl-text);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bpl-study-card .bpl-card-stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--bpl-text-muted);
  align-items: center;
}
.bpl-study-card .bpl-card-stats .stat-strong {
  color: var(--bpl-text);
  font-weight: 600;
}
.bpl-study-card .bpl-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--bpl-border);
}
.bpl-study-card .bpl-card-actions .bpl-btn { flex: 1; min-width: 0; }

/* ··· overflow button + menu — used by both folder card and study card. */
.bpl-overflow-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--bpl-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 120ms ease;
}
.bpl-overflow-btn:hover { background: var(--bpl-bg); color: var(--bpl-text); }
.bpl-overflow-btn[aria-expanded="true"] { background: var(--bpl-bg); color: var(--bpl-text); }

.bpl-overflow-menu {
  position: absolute;
  top: 40px;
  right: 10px;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  min-width: 200px;
  z-index: 50;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bpl-overflow-menu[hidden] { display: none; }
.bpl-overflow-menu button,
.bpl-overflow-menu a {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--bpl-text);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  width: 100%;
}
.bpl-overflow-menu button:hover,
.bpl-overflow-menu a:hover {
  background: var(--bpl-bg);
  text-decoration: none;
}
.bpl-overflow-menu .danger { color: var(--bpl-error); }
.bpl-overflow-menu hr {
  border: none;
  border-top: 1px solid var(--bpl-border);
  margin: 4px 0;
}

/* Folder-view empty state. */
.bpl-folder-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--bpl-text-muted);
}
.bpl-folder-empty .ph {
  font-size: 48px;
  display: block;
  margin: 0 auto 12px;
  color: var(--bpl-text-subtle);
}
.bpl-folder-empty h3 {
  margin: 0 0 8px;
  color: var(--bpl-text);
  font-weight: 600;
}

/* Section header inside a folder view. */
.bpl-folder-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 12px;
}
.bpl-folder-section-header h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bpl-text-muted);
}
.bpl-folder-section-header .count {
  color: var(--bpl-text-subtle);
  font-size: 13px;
}

/* Modal scaffolding for move-to-folder picker (Slice 5). */
.bpl-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.bpl-modal-backdrop[hidden] { display: none; }
.bpl-modal {
  background: var(--bpl-card);
  border-radius: 12px;
  width: min(520px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.2);
}
.bpl-modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--bpl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bpl-modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.bpl-modal-body { padding: 16px 24px; overflow-y: auto; }
.bpl-modal-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--bpl-border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.bpl-folder-tree-picker {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bpl-folder-tree-picker li { margin: 0; }
.bpl-folder-tree-picker button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--bpl-text);
}
.bpl-folder-tree-picker button:hover { background: var(--bpl-bg); }
.bpl-folder-tree-picker button.is-selected {
  background: var(--bpl-blue-light);
  color: var(--bpl-blue);
}
.bpl-folder-tree-picker ul {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}

/* Slice 5 — drag-drop affordances. */
.bpl-study-card.is-dragging { opacity: 0.5; }
.bpl-folder-card.is-drop-target {
  border-color: var(--bpl-blue);
  background: var(--bpl-blue-light);
}

/* ========================================================================
 * feat/folders Slice 6 — researcher left rail.
 *
 * Opt-in via <body class="bpl-with-rail">. Pushes .bpl-shell* content
 * right by the rail width on screens wide enough; collapses out of
 * the way on narrow viewports.
 * ====================================================================== */

.bpl-sidebar {
  position: fixed;
  top: 56px;
  left: 0;
  bottom: 0;
  width: 220px;
  background: var(--bpl-card);
  border-right: 1px solid var(--bpl-border);
  padding: 16px 8px;
  overflow-y: auto;
  z-index: 20;
}
.bpl-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bpl-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--bpl-text);
  text-decoration: none;
  position: relative;
}
.bpl-sidebar-item:hover { background: var(--bpl-bg); text-decoration: none; }
.bpl-sidebar-item.is-active {
  background: var(--bpl-blue-light);
  color: var(--bpl-blue);
  font-weight: 600;
}
.bpl-sidebar-item .ph { font-size: 18px; flex-shrink: 0; }
.bpl-sidebar-soon {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bpl-amber);
  color: var(--bpl-amber-dark);
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
}

@media (min-width: 1100px) {
  body.bpl-with-rail .bpl-shell,
  body.bpl-with-rail .bpl-shell-narrow {
    margin-left: 220px;
  }
}
@media (max-width: 1099px) {
  .bpl-sidebar { width: 56px; padding: 16px 4px; }
  .bpl-sidebar-item span:not(.bpl-sidebar-soon) { display: none; }
  .bpl-sidebar-soon { display: none; }
  body.bpl-with-rail .bpl-shell,
  body.bpl-with-rail .bpl-shell-narrow {
    margin-left: 56px;
  }
}

/* ========================================================================
 * fix/ui-structure Slice 2 — public landing page.
 * ====================================================================== */

.bpl-landing-hero {
  background: linear-gradient(180deg, var(--bpl-bg) 0%, var(--bpl-card) 100%);
  padding: 64px 24px 56px;
  border-bottom: 1px solid var(--bpl-border);
  text-align: center;
}
.bpl-landing-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.bpl-landing-hero h1 {
  font-size: 40px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.bpl-landing-hero .bpl-lead {
  font-size: 18px;
  color: var(--bpl-text-muted);
  margin: 0 0 16px;
}
.bpl-landing-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bpl-text);
  margin: 0 auto 24px;
  max-width: 640px;
}
.bpl-landing-cta {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.bpl-landing-section {
  padding: 40px 24px;
}
.bpl-landing-section h2 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bpl-text-muted);
  margin: 0 0 16px;
}
.bpl-landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.bpl-landing-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bpl-landing-card:hover {
  border-color: var(--bpl-border-strong);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  text-decoration: none;
}
.bpl-landing-card .ph {
  font-size: 28px;
  color: var(--bpl-blue);
}
.bpl-landing-card h3 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
  color: var(--bpl-text);
}
.bpl-landing-card p {
  margin: 0;
  font-size: 14px;
  color: var(--bpl-text-muted);
  line-height: 1.5;
}

/* =========================================================
   feat/protocols Phase 3 — researcher UI for /protocols/*.
   Reuses existing tokens; no new --bpl-* root variables.
   Token substitutions vs the brief draft:
     --bpl-bg-soft   → literal #FAFAF9 (warm white, matches the
                       restraint of the rest of the site)
     --bpl-danger-bg → var(--bpl-rose)
     --bpl-danger    → var(--bpl-rose-dark)
     --bpl-muted     → var(--bpl-text-muted)
     --bpl-accent    → var(--bpl-blue)
     --bpl-card-bg   → var(--bpl-card)
   ========================================================= */

/* ---- protocols list page ---- */
.bpl-protocol-card { display: block; height: 100%; }
.bpl-protocol-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bpl-protocol-card-title {
  font: 600 16px/1.3 var(--bpl-font-sans);
  color: var(--bpl-text);
  margin-bottom: 6px;
}
.bpl-protocol-card-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
  min-height: 36px;
}
.bpl-protocol-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* ---- /protocols/new ---- */
.bpl-protocol-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.bpl-protocol-langs label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--bpl-text);
}

/* ---- /protocols/:id/edit ---- */
.bpl-protocol-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bpl-protocol-tab { margin-top: 16px; }
.bpl-protocol-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 0 16px;
}
@media (max-width: 720px) {
  .bpl-protocol-overview-grid { grid-template-columns: 1fr; }
}

/* Stage builder grid (Stages tab) */
.bpl-builder-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .bpl-builder-grid { grid-template-columns: 1fr; }
}
.bpl-builder-left {
  position: sticky;
  top: 16px;
  align-self: start;
}

/* Stage list (left column) */
.bpl-stage-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.bpl-stage-row {
  display: grid;
  grid-template-columns: 24px 28px 28px 1fr 32px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}
.bpl-stage-row:hover { border-color: var(--bpl-border-strong); }
.bpl-stage-row.is-selected { border-color: var(--bpl-blue); }
.bpl-stage-row.is-dragging { opacity: 0.35; }
.bpl-stage-row.is-drop-target { box-shadow: inset 0 0 0 2px var(--bpl-blue); }
.bpl-stage-grip {
  color: var(--bpl-text-muted);
  cursor: grab;
  font-size: 16px;
}
.bpl-stage-grip:active { cursor: grabbing; }
.bpl-stage-num {
  font: 500 12px/1 var(--bpl-font-mono);
  color: var(--bpl-text-muted);
  text-align: center;
}
.bpl-stage-icon {
  color: var(--bpl-blue);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bpl-stage-meta { min-width: 0; }
.bpl-stage-name {
  font: 500 14px/1.3 var(--bpl-font-sans);
  color: var(--bpl-text);
}
.bpl-stage-summary {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bpl-stage-del {
  background: none;
  border: none;
  padding: 4px;
  color: var(--bpl-text-muted);
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bpl-stage-del:hover {
  background: var(--bpl-rose);
  color: var(--bpl-rose-dark);
}

/* Right-column kind picker */
.bpl-protocol-picker-group {
  margin: 16px 0 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bpl-text-muted);
}
.bpl-protocol-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.bpl-protocol-kind-card {
  text-align: left;
  cursor: pointer;
}
.bpl-protocol-kind-card:hover { border-color: var(--bpl-blue); }

/* Right-column config form */
.bpl-stage-config-form { display: block; }

/* Status banner (non-draft protocols) */
.bpl-status-banner {
  padding: 10px 14px;
  background: #FAFAF9;
  border: 1px solid var(--bpl-border);
  border-radius: var(--bpl-radius-sm);
  font-size: 13px;
  color: var(--bpl-text-muted);
  margin-bottom: 16px;
}
.bpl-status-banner strong { color: var(--bpl-text); font-weight: 600; }

/* Toast — reusable shell for inline non-modal feedback. */
.bpl-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bpl-text);
  color: #FFFFFF;
  padding: 10px 14px;
  border-radius: var(--bpl-radius-md);
  font-size: 13px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  max-width: 360px;
}

/* ============================================================
 * feat/protocols Phase 4 — Researcher UI B (invite/participants)
 * ============================================================
 *
 * No new --bpl-* root tokens introduced. Reuses existing tokens
 * everywhere. Components: sub-nav, summary grid, participant
 * table primitives, status pills, drawer scaffolding, password
 * modal, invite preview + CSV dropzone.
 */

/* Sub-nav (Overview / Edit / Invite / Participants tabs across
   the four /protocols/:id/* pages). */
.bpl-protocol-subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bpl-border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.bpl-protocol-subnav-item {
  padding: 10px 16px;
  text-decoration: none;
  color: var(--bpl-text-muted);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.bpl-protocol-subnav-item:hover {
  color: var(--bpl-text);
  border-bottom-color: var(--bpl-border);
}
.bpl-protocol-subnav-item.is-active {
  color: var(--bpl-blue);
  border-bottom-color: var(--bpl-blue);
}

/* Overview summary grid + dl layout. */
.bpl-protocol-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 700px) {
  .bpl-protocol-summary-grid { grid-template-columns: 1fr; gap: 16px; }
}
.bpl-summary-col { margin: 0; }
.bpl-summary-col dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--bpl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 12px;
}
.bpl-summary-col dt:first-child { margin-top: 0; }
.bpl-summary-col dd {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: var(--bpl-text);
}

/* Read-only stages list on overview page. */
.bpl-stage-readonly-list {
  list-style: none;
  padding: 0; margin: 0;
}
.bpl-stage-readonly-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--bpl-border);
  font-size: 14px;
  color: var(--bpl-text);
}
.bpl-stage-readonly-item:last-child { border-bottom: 0; }
.bpl-stage-pos {
  color: var(--bpl-text-muted);
  font-weight: 500;
  display: inline-block;
  min-width: 28px;
}
.bpl-stage-label { font-weight: 500; }

/* Participants table — filter row + chip group + small input. */
.bpl-filter-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bpl-filter-group {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.bpl-chip-filter {
  padding: 6px 12px;
  border: 1px solid var(--bpl-border);
  border-radius: 999px;
  background: var(--bpl-card);
  color: var(--bpl-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bpl-chip-filter:hover {
  background: var(--bpl-bg);
  color: var(--bpl-text);
}
.bpl-chip-filter.is-active {
  background: var(--bpl-blue);
  color: #FFFFFF;
  border-color: var(--bpl-blue);
}
.bpl-input-sm {
  padding: 6px 10px;
  font-size: 13px;
  min-width: 220px;
}

.bpl-table-wrap {
  overflow-x: auto;
  margin: 8px 0 12px 0;
}
.bpl-row-click { cursor: pointer; }
.bpl-row-error td { background: rgba(220, 38, 38, 0.04); }

/* Status pills — one per ProtocolMembershipStatus.
   Reuses --bpl-blue/--bpl-mint/--bpl-amber/--bpl-rose tokens. */
.bpl-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bpl-bg);
  color: var(--bpl-text-muted);
  border: 1px solid var(--bpl-border);
  text-transform: capitalize;
  line-height: 1.6;
}
.bpl-pill-invited      { background: var(--bpl-blue-light);  color: var(--bpl-blue);       border-color: transparent; }
.bpl-pill-in_progress  { background: var(--bpl-amber);       color: var(--bpl-amber-dark); border-color: transparent; }
.bpl-pill-paused       { background: #FEF3C7;                color: #92400E;               border-color: transparent; }
.bpl-pill-abandoned    { background: var(--bpl-rose);        color: var(--bpl-rose-dark);  border-color: transparent; }
.bpl-pill-completed    { background: var(--bpl-mint);        color: var(--bpl-mint-dark);  border-color: transparent; }
.bpl-pill-withdrawn    { background: var(--bpl-bg);          color: var(--bpl-text-muted); }
.bpl-pill-screened_out { background: #EDE9FE;                color: #5B21B6;               border-color: transparent; }

/* Drawer — slide-in panel on the right; full-width bottom sheet
   on narrow screens. */
.bpl-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 90;
}
.bpl-drawer-backdrop[hidden] { display: none; }
.bpl-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 92vw);
  background: var(--bpl-card);
  border-left: 1px solid var(--bpl-border);
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: bplDrawerIn 180ms ease-out;
}
.bpl-drawer[hidden] { display: none; }
@keyframes bplDrawerIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@media (max-width: 700px) {
  .bpl-drawer {
    top: auto;
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--bpl-border);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    max-height: 90vh;
    animation: bplDrawerInBottom 180ms ease-out;
  }
  @keyframes bplDrawerInBottom {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}
.bpl-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bpl-border);
}
.bpl-drawer-username {
  font-weight: 600;
  font-size: 16px;
}
.bpl-icon-btn {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--bpl-text-muted);
  cursor: pointer;
  padding: 4px 8px;
}
.bpl-icon-btn:hover { color: var(--bpl-text); }
.bpl-drawer-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--bpl-border);
  padding: 0 16px;
  overflow-x: auto;
}
.bpl-drawer-tab {
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--bpl-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.bpl-drawer-tab.is-active {
  color: var(--bpl-blue);
  border-bottom-color: var(--bpl-blue);
}
.bpl-drawer-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.bpl-drawer-section-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--bpl-text);
}

.bpl-meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}
.bpl-meta-list dt {
  color: var(--bpl-text-muted);
  font-weight: 500;
}
.bpl-meta-list dd { margin: 0; color: var(--bpl-text); }

.bpl-progress-list {
  list-style: none;
  padding: 0; margin: 0 0 16px 0;
}
.bpl-prog-row {
  padding: 6px 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bpl-text-muted);
}
.bpl-prog-row.is-done    { color: var(--bpl-mint-dark); }
.bpl-prog-row.is-current { color: var(--bpl-blue); font-weight: 600; }
.bpl-prog-icon {
  width: 18px;
  display: inline-block;
  text-align: center;
}
.bpl-prog-label { flex: 1; }

.bpl-collapsible {
  margin: 12px 0;
  border-top: 1px solid var(--bpl-border);
  padding-top: 12px;
}
.bpl-collapsible summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  color: var(--bpl-text-muted);
}
.bpl-code-block {
  background: var(--bpl-bg);
  border-radius: 6px;
  padding: 8px 12px;
  font: 12px/1.5 var(--bpl-font-mono);
  overflow-x: auto;
  margin: 8px 0 0 0;
  white-space: pre-wrap;
}

.bpl-danger-zone .bpl-divider { margin: 16px 0; }

/* Password reveal modal (used by drawer reset/resend) */
.bpl-password-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bpl-bg);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--bpl-border);
  margin: 12px 0;
  font: 14px/1.4 var(--bpl-font-mono);
}
.bpl-password-box code {
  flex: 1;
  font-size: 15px;
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* Card-header right-aligned actions slot (results card). */
.bpl-card-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Invite — paste-mode preview list. */
.bpl-email-preview {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  max-height: 240px;
  overflow-y: auto;
}
.bpl-email-row {
  padding: 6px 0;
  font-size: 13px;
  color: var(--bpl-text);
  border-bottom: 1px dashed var(--bpl-border);
}
.bpl-email-row:last-child { border-bottom: 0; }
.bpl-email-row.is-bad { color: var(--bpl-rose-dark); }
.bpl-email-status {
  display: inline-block;
  min-width: 18px;
  font-weight: 700;
}
.bpl-email-row.is-ok .bpl-email-status { color: var(--bpl-mint-dark); }
.bpl-email-row.is-bad .bpl-email-status { color: var(--bpl-rose-dark); }

/* CSV dropzone. */
.bpl-csv-dropzone {
  border: 2px dashed var(--bpl-border);
  border-radius: 8px;
  padding: 32px 16px;
  text-align: center;
  background: var(--bpl-bg);
  cursor: pointer;
  margin: 12px 0;
  transition: border-color 0.15s, background 0.15s;
}
.bpl-csv-dropzone:hover,
.bpl-csv-dropzone:focus-visible { border-color: var(--bpl-blue); }
.bpl-csv-dropzone.is-dragover {
  border-color: var(--bpl-blue);
  background: var(--bpl-blue-light);
}
.bpl-csv-dropzone.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bpl-invite-mode[hidden] { display: none; }

/* ============================================================
 * feat/protocols Phase 5 — Participant runtime chrome
 * ============================================================
 *
 * Pages under /p/:slug/* run in isolated chrome — no global nav,
 * no sidebar, no avatar. Centered single-column layout, generous
 * padding, calm tone. Stage page adds the progress dot bar and a
 * top-right "Pause" button.
 */

.bpl-p-body {
  background: var(--bpl-bg);
  margin: 0;
  font-family: var(--bpl-font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--bpl-text);
}

.bpl-p-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--bpl-border);
  background: var(--bpl-card);
  flex-wrap: wrap;
}
.bpl-p-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.bpl-p-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
}
.bpl-p-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--bpl-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bpl-p-langs {
  display: inline-flex;
  gap: 4px;
}
.bpl-p-lang {
  padding: 4px 10px;
  border: 1px solid var(--bpl-border);
  border-radius: 999px;
  background: var(--bpl-card);
  color: var(--bpl-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.bpl-p-lang.is-active {
  background: var(--bpl-blue);
  color: #FFFFFF;
  border-color: var(--bpl-blue);
}

.bpl-p-chrome-stage {
  /* stage chrome has progress dots in the middle and pause btn on right */
  flex-wrap: nowrap;
}
.bpl-p-stage-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bpl-p-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 24px 24px;
}
.bpl-p-main-narrow { max-width: 520px; }
.bpl-p-main-stage  { padding-top: 24px; }

.bpl-p-h1 {
  font-family: var(--bpl-font-serif, var(--bpl-font-sans));
  font-size: 32px;
  margin: 0 0 12px 0;
  line-height: 1.2;
}
.bpl-p-h2 {
  font-size: 18px;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.bpl-p-blurb {
  font-size: 16px;
  color: var(--bpl-text);
  line-height: 1.55;
  margin: 12px 0 24px 0;
}

.bpl-p-form { margin: 16px 0; }
.bpl-p-link-row {
  margin-top: 16px;
  font-size: 14px;
}
.bpl-p-text-link {
  color: var(--bpl-text-muted);
  text-decoration: underline;
  font-size: 14px;
}

/* Welcome page grid (duration + compensation cards). */
.bpl-p-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 24px 0;
}
@media (max-width: 560px) {
  .bpl-p-grid { grid-template-columns: 1fr; }
}
.bpl-p-meta-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 8px;
  padding: 12px 16px;
}
.bpl-p-meta-label {
  font-size: 12px;
  color: var(--bpl-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.bpl-p-meta-value {
  font-size: 18px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--bpl-text);
}

.bpl-p-stages-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0 24px 0;
}
.bpl-p-stages-list {
  list-style: none;
  padding: 0; margin: 8px 0 0 0;
}
.bpl-p-stage-li {
  padding: 8px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px dashed var(--bpl-border);
}
.bpl-p-stage-li:last-child { border-bottom: 0; }
.bpl-p-stage-li .ph { color: var(--bpl-blue); font-size: 18px; }

.bpl-p-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.bpl-p-footer {
  text-align: center;
  padding: 24px;
  font-size: 12px;
  color: var(--bpl-text-muted);
}
.bpl-p-footer p { margin: 0; }

/* Resume code input — monospace, large, letter-spaced. */
.bpl-input-code {
  font-family: var(--bpl-font-mono);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-align: center;
}

/* Password strength meter (forced first-password-change). */
.bpl-strength-meter {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bpl-strength-bar {
  flex: 1;
  height: 6px;
  background: var(--bpl-bg);
  border-radius: 3px;
  overflow: hidden;
}
.bpl-strength-fill {
  height: 100%;
  width: 0%;
  background: var(--bpl-rose);
  transition: width 0.2s, background 0.2s;
}
.bpl-strength-fill[data-score="0"],
.bpl-strength-fill[data-score="1"] { background: var(--bpl-rose); }
.bpl-strength-fill[data-score="2"] { background: var(--bpl-amber); }
.bpl-strength-fill[data-score="3"] { background: var(--bpl-amber-dark); }
.bpl-strength-fill[data-score="4"],
.bpl-strength-fill[data-score="5"] { background: var(--bpl-mint-dark); }

/* Stage progress dot bar. */
.bpl-p-progress-dots {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.bpl-p-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bpl-border);
}
.bpl-p-dot.is-done    { background: var(--bpl-mint-dark); }
.bpl-p-dot.is-current { background: var(--bpl-blue); box-shadow: 0 0 0 3px var(--bpl-blue-light); }

.bpl-p-stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--bpl-border);
}

/* Exit/Pause modal styling (in addition to the existing bpl-modal). */
.bpl-exit-modal {
  width: min(480px, 92vw);
  padding: 24px;
}
.bpl-exit-modal h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}
.bpl-resume-code-box {
  display: block;
  width: 100%;
  margin: 16px 0 8px 0;
  padding: 20px 16px;
  background: var(--bpl-bg);
  border: 2px solid var(--bpl-border);
  border-radius: 8px;
  font-family: var(--bpl-font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-align: center;
  cursor: pointer;
  color: var(--bpl-text);
  transition: background 0.15s, border-color 0.15s;
}
.bpl-resume-code-box:hover { border-color: var(--bpl-blue); }
.bpl-resume-code-box.is-copied {
  background: var(--bpl-mint);
  border-color: var(--bpl-mint-dark);
  color: var(--bpl-mint-dark);
}
.bpl-resume-code-help { margin: 0 0 12px 0; }
.bpl-checkbox-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
  font-size: 14px;
  color: var(--bpl-text);
  cursor: pointer;
}
.bpl-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* Completion-page summary card. */
.bpl-p-summary-card,
.bpl-p-cert-card,
.bpl-p-resources-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
}
.bpl-p-resource-list {
  margin: 0; padding-left: 18px;
}
.bpl-p-resource-list li { padding: 4px 0; }

/* ============================================================
 * feat/protocols Phase 6 — Stage runner widgets
 * ============================================================ */

/* Consent + debrief body */
.bpl-consent-body { margin: 16px 0; line-height: 1.6; }
.bpl-consent-body p { margin: 0 0 12px 0; }
.bpl-consent-items {
  background: var(--bpl-bg);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 16px 0;
}
.bpl-consent-item { display: flex; gap: 8px; padding: 6px 0; align-items: flex-start; }
.bpl-required-mark { color: var(--bpl-rose-dark); font-style: normal; }

/* Radio rows used by screener + demographic */
.bpl-radio-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  cursor: pointer;
}

/* Calibration step list */
.bpl-calib-list {
  list-style: none;
  padding: 0; margin: 0;
}
.bpl-calib-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bpl-border);
}
.bpl-calib-row:last-child { border-bottom: 0; }
.bpl-calib-step {
  font-weight: 600;
  color: var(--bpl-text-muted);
  min-width: 24px;
}
.bpl-calib-body { flex: 1; }
.bpl-calib-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.bpl-calib-action {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 6px 0;
}
.bpl-calib-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bpl-calib-audio,
.bpl-calib-video {
  display: block;
  margin-top: 6px;
}
.bpl-calib-result { margin-top: 4px; }

/* Break-stage countdown */
.bpl-break-card { text-align: center; }
.bpl-break-clock {
  font-family: var(--bpl-font-mono);
  font-size: 64px;
  font-weight: 600;
  margin: 24px 0;
  letter-spacing: 0.05em;
  color: var(--bpl-blue);
}

/* Feedback rating buttons */
.bpl-rating-row {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.bpl-rating-btn {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid var(--bpl-border);
  background: var(--bpl-card);
  color: var(--bpl-text);
  cursor: pointer;
  font-weight: 600;
}
.bpl-rating-btn:hover { background: var(--bpl-bg); }
.bpl-rating-btn.is-selected {
  background: var(--bpl-blue);
  color: #FFFFFF;
  border-color: var(--bpl-blue);
}

/* Referral cards */
.bpl-referral-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 12px;
}
.bpl-referral-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 8px;
  padding: 16px 20px;
}
.bpl-referral-title {
  font-weight: 600;
  margin-bottom: 4px;
}

/* ============================================================
 * Sprint C (2026-05-26) — login chooser + dual-door + onboarding
 * ============================================================ */
.bpl-chooser-page { background: var(--bpl-bg); margin: 0; min-height: 100vh; }
.bpl-chooser-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}
.bpl-chooser-h1 {
  font-family: var(--bpl-font-serif, var(--bpl-font-sans));
  font-size: 36px;
  margin: 0 0 8px 0;
  color: var(--bpl-text);
}
.bpl-chooser-sub {
  margin: 0 0 32px 0;
  font-size: 15px;
}
.bpl-chooser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 auto 24px auto;
  max-width: 720px;
}
@media (max-width: 640px) {
  .bpl-chooser-grid { grid-template-columns: 1fr; gap: 16px; }
}
.bpl-chooser-card {
  display: block;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 12px;
  padding: 32px 24px;
  text-align: left;
  text-decoration: none;
  color: var(--bpl-text);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.bpl-chooser-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
  border-color: var(--bpl-blue);
}
.bpl-chooser-icon { font-size: 40px; color: var(--bpl-blue); }
.bpl-chooser-card-h2 {
  margin: 12px 0 6px 0;
  font-size: 18px;
  font-weight: 600;
}
.bpl-chooser-cta {
  display: inline-block;
  margin-top: 16px;
  font-weight: 500;
  color: var(--bpl-blue);
}
.bpl-chooser-foot { margin-top: 16px; }

/* Door pages (researcher / participant sign-in) */
.bpl-door-main {
  max-width: 440px;
  margin: 48px auto;
  padding: 0 24px;
}
.bpl-door-card {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 12px;
  padding: 28px 24px;
}
.bpl-door-h1 {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bpl-door-h1 .ph { color: var(--bpl-blue); font-size: 22px; }
.bpl-door-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  color: var(--bpl-text-muted);
  font-size: 12px;
}
.bpl-door-divider::before,
.bpl-door-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bpl-border);
}
.bpl-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bpl-google-btn .ph-google-logo { font-size: 18px; }
.bpl-door-foot { margin-top: 16px; }

/* Onboarding flow — shared step machinery */
.bpl-onb-progress {
  height: 4px;
  background: var(--bpl-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.bpl-onb-progress-fill {
  height: 100%;
  width: 33%;
  background: var(--bpl-blue);
  transition: width 0.25s ease;
}
.bpl-onb-step { margin: 16px 0; }
.bpl-onb-h1 {
  font-family: var(--bpl-font-serif, var(--bpl-font-sans));
  font-size: 24px;
  margin: 12px 0 8px 0;
}
.bpl-onb-radios { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.bpl-onb-nav {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 24px;
}
.bpl-onb-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) {
  .bpl-onb-pair { grid-template-columns: 1fr; }
}
.bpl-onb-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 0 0;
}
/* Reuse .bpl-chip-filter from Phase 4 for language picker.
   The hidden checkbox lets is-active reflect actual state. */

/* Phase 7 — iframe-embedded study runner */
.bpl-embed-card { padding: 0; }
.bpl-embed-card .bpl-card-body { padding: 0; }
.bpl-study-iframe {
  width: 100%;
  min-height: 600px;
  border: 0;
  display: block;
  background: var(--bpl-card);
}
.bpl-p-embed-body { background: var(--bpl-bg); margin: 0; }

/* ============================================================
 * Sprint E (2026-05-26) — folder grid for /dashboard
 * ============================================================ */
.bpl-folder-section { margin: 24px 0; }
.bpl-folder-section-h2 {
  font-family: var(--bpl-font-serif, var(--bpl-font-sans));
  font-size: 22px;
  margin: 0 0 16px 0;
}
.bpl-folder-section-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--bpl-text-muted);
  margin: 16px 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bpl-folder-grid { display: flex; flex-direction: column; gap: 24px; }
.bpl-folder-section-group { margin-bottom: 8px; }
.bpl-folder-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.bpl-folder-card {
  position: relative;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 12px;
  padding: 16px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.bpl-folder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
  border-color: var(--bpl-blue);
}
.bpl-folder-card-link {
  display: block;
  text-decoration: none;
  color: var(--bpl-text);
}
.bpl-folder-card-icon {
  font-size: 36px;
  color: var(--bpl-blue);
  margin-bottom: 8px;
  position: relative;
  width: 36px;
  height: 36px;
}
.bpl-folder-icon-open { display: none; position: absolute; top: 0; left: 0; }
.bpl-folder-card:hover .bpl-folder-icon-closed { display: none; }
.bpl-folder-card:hover .bpl-folder-icon-open { display: inline-block; }
.bpl-folder-card-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
}
.bpl-folder-card-meta {
  font-size: 12px;
  color: var(--bpl-text-muted);
  margin-bottom: 8px;
}
.bpl-folder-card-status .bpl-pill { font-size: 11px; }

/* Hamburger ⋮ menu using native <details> */
.bpl-folder-card-menu {
  position: absolute;
  top: 8px;
  right: 8px;
}
.bpl-folder-card-menu summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--bpl-text-muted);
  font-size: 16px;
}
.bpl-folder-card-menu summary::-webkit-details-marker { display: none; }
.bpl-folder-card-menu summary:hover {
  background: var(--bpl-bg);
  color: var(--bpl-text);
}
.bpl-folder-menu-pop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
  min-width: 200px;
  z-index: 10;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.bpl-folder-menu-pop a,
.bpl-folder-menu-pop button {
  display: block;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  font-size: 13px;
  color: var(--bpl-text);
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.bpl-folder-menu-pop a:hover,
.bpl-folder-menu-pop button:hover {
  background: var(--bpl-bg);
}
.bpl-folder-menu-danger { color: var(--bpl-rose-dark) !important; }

/* ============================================================
 * Sprint DE-completion (2026-05-27) — opened-folder stage tiles
 * + View Transitions API hooks
 * ============================================================ */
.bpl-stage-tile-row {
  list-style: none;
  padding: 0; margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.bpl-stage-tile {
  background: var(--bpl-card);
  border: 1px solid var(--bpl-border);
  border-radius: 10px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.bpl-stage-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  border-color: var(--bpl-blue);
}
.bpl-stage-tile.is-study { border-color: var(--bpl-blue-light); border-style: dashed; border-width: 2px; }
.bpl-stage-tile-link {
  display: block;
  padding: 16px 14px;
  text-decoration: none;
  color: var(--bpl-text);
  text-align: center;
}
.bpl-stage-tile-icon { font-size: 32px; color: var(--bpl-blue); margin-bottom: 6px; }
.bpl-stage-tile-label { font-weight: 600; font-size: 13px; margin-bottom: 4px; line-height: 1.35; }
.bpl-stage-tile-meta { font-size: 11px; color: var(--bpl-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* View Transitions API names. Browsers that don't support
   view-transition-name ignore the property — no fallback needed. */
.bpl-folder-card { view-transition-name: var(--vt-name, none); }
.bpl-protocol-overview-header { view-transition-name: var(--vt-name, none); }

@media (prefers-reduced-motion: reduce) {
  .bpl-stage-tile { transition: none; }
}