/* Shared by both standalone tests. Sync with node tools/sync_test_theme.cjs. */
:root {
  --brand: #805064;
  --brand-dark: #5c3545;
  --primary: var(--brand);
  --pf-border: #e8e0e5;
  --pf-muted: #6b7280;
}
body.pf-shell {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  background: #f8f5f7;
  color: #374151;
}
.pf-shell .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
.pf-shell .btn-primary { background: var(--brand); color: #fff; }
.pf-shell .btn-primary:hover { background: var(--brand-dark); }
.pf-shell #btnShowInstructions { padding-inline: 20px; font-size: .95rem; }
.pf-shell .btn-secondary { background: #fff; color: var(--brand-dark); border-color: #d9cdd5; }
.pf-shell .btn-secondary:hover { background: #faf6f8; border-color: #bc8eaa; }
.pf-shell .btn:disabled { background: #e5e7eb; color: #6b7280; border-color: #d1d5db; cursor: not-allowed; opacity: 1; }
.pf-shell .btn:focus-visible, .pf-shell a:focus-visible,
.pf-shell .lang-switch button:focus-visible { outline: 2px solid #bc8eaa; outline-offset: 3px; }
.pf-shell .welcome, .pf-shell .setup, .pf-shell .qr-section, .pf-shell .pf-card {
  border: 1px solid var(--pf-border);
  border-radius: 20px;
  background: #fff;
  padding: 32px;
  box-shadow: 0 4px 20px #5c354508;
}
.pf-shell .welcome h2, .pf-shell .setup h2, .pf-shell .qr-section h2, .pf-shell .pf-card h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
}
.pf-shell .page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.pf-shell .page-title { display: block; margin: 0; font-size: .95rem; line-height: 1.4; color: var(--pf-muted); font-weight: 600; letter-spacing: 0; }
body.pf-shell:has(#welcomeArea:not(.hidden)) .page-title { display: block; }
body.pf-shell .page-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pf-shell .lang-switch { display: inline-flex; flex-shrink: 0; margin-left: auto; border: 1px solid #d9cdd5; border-radius: 3px; overflow: hidden; }
.pf-shell .lang-switch button { font: inherit; font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .75rem; font-weight: 600; line-height: 1.5; min-height: 28px; padding: 4px 10px; border: 0; border-radius: 0; background: #fff; color: #756a72; cursor: pointer; }
.pf-shell .lang-switch button[aria-pressed="true"] { background: #f0e9ed; color: var(--brand-dark); }
.pf-shell .lang-switch.locked { display: none; }
.pf-shell .pf-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pf-shell .pf-links .home-link { margin: 0; }
.pf-shell .pf-links .btn { min-height: 36px; padding: 7px 14px; font-size: .85rem; border-radius: 999px; }
.pf-shell .privacy, .pf-shell .note { font-size: .85rem; line-height: 1.6; color: var(--pf-muted); }
.pf-shell .qr-section { max-width: 640px; text-align: center; }
.pf-shell .researcher-info { width: 100%; max-width: 640px; margin: 20px auto 0; color: var(--pf-muted); font-size: .85rem; line-height: 1.6; }
.pf-shell .researcher-info > summary { cursor: pointer; width: fit-content; }
.pf-shell .researcher-info[open] > summary { margin-bottom: 16px; }
.pf-shell .text-action { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--brand-dark); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pf-shell .researcher-info .btn { min-height: 36px; font-size: .85rem; padding: 7px 12px; }
.pf-shell .pf-links .home-link { padding: 0; border: 0; border-radius: 0; min-height: 0; background: transparent; font-weight: 500; }
.pf-shell.pf-compact .btn { min-height: 36px; padding: 0 14px; border-radius: 3px; font-size: .84rem; box-shadow: none; }
.pf-shell.pf-compact #toolbar #start { min-width: 104px; }
.pf-shell.pf-compact #viewOptionsToggle { font-size: .84rem; }
.pf-shell.pf-compact .pf-card, .pf-shell.pf-compact .view-options-panel,
.pf-shell.pf-compact dialog, .pf-shell.pf-compact #viewport,
.pf-shell.pf-compact #qr, .pf-shell.pf-compact #readyPanel .researcher-info { border-radius: 6px; }
@media (pointer: coarse) { .pf-shell.pf-compact .btn { min-height: 44px; } }
@media (max-width: 480px) {
  .pf-shell .welcome, .pf-shell .setup, .pf-shell .qr-section, .pf-shell .pf-card { padding: 24px 20px; }
  .pf-shell .page-head { gap: 10px; }
  .pf-shell .page-title { font-size: .85rem; }
}