/* Account-only styles; preserve the study site's blueprint palette and layout. */
#peAccountUI,
#peAccountNotice,
#peAccountGate,
.pe-account-sidebar,
#accountMount {
  --pe-blue: var(--blueprint, #123b5d);
  --pe-blue-hover: var(--blueprint-2, #0d2f49);
  --pe-ink: var(--ink, #12202d);
  --pe-muted: var(--slate, #526575);
  --pe-line: var(--line, #c8d1d8);
  --pe-panel: var(--panel, #fff);
  --pe-soft: #edf2f6;
  --pe-error: #8e3332;
  --pe-warning: #704112;
  --pe-small: .875rem;
  --pe-body: 1rem;
  --pe-heading: 1.25rem;
  color: var(--pe-ink);
  font-family: inherit;
  font-size: var(--pe-small);
  line-height: 1.5;
}
#peAccountUI [hidden],
#peAccountNotice[hidden],
#peAccountNotice [hidden],
#peAccountGate[hidden],
#peAccountGate [hidden] { display: none !important; }
#studyApp[data-pe-locked] { display: none !important; }
#accountMount { display: flex; align-items: center; min-width: 0; }
#peAccountButton { white-space: nowrap; overflow-wrap: normal; }
.pe-account-button,
.pe-account-text-button,
.pe-account-close,
.pe-auth-tabs button,
.pe-password-wrap button {
  appearance: none;
  font: inherit;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pe-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pe-line, #c8d1d8);
  border-radius: 7px;
  padding: 10px 14px;
  background: var(--pe-panel, #fff);
  color: var(--pe-blue, #123b5d);
  font-size: var(--pe-small, .875rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
.pe-account-button:hover { background: var(--pe-soft, #edf2f6); }
.pe-account-button.pe-account-primary {
  background: var(--pe-blue, #123b5d);
  color: #fff;
  border-color: var(--pe-blue, #123b5d);
}
.pe-account-button.pe-account-primary:hover { background: var(--pe-blue-hover, #0d2f49); }
.pe-account-button.pe-account-danger { color: #fff; background: #8e3332; border-color: #8e3332; }
.pe-account-button.pe-account-danger:hover { background: #712626; }
#peAccountUI button:disabled,
#peAccountNotice button:disabled,
#peAccountGate button:disabled { opacity: .55; cursor: wait; }
#peAccountUI :is(button, input):focus-visible,
#peAccountNotice button:focus-visible,
#peAccountGate button:focus-visible,
#peAccountButton:focus-visible,
.pe-account-sidebar button:focus-visible {
  outline: 3px solid #3278ac;
  outline-offset: 3px;
}
.pe-account-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--pe-line);
  border-radius: 12px;
  background: var(--pe-panel);
  color: var(--pe-ink);
  box-shadow: 0 20px 70px rgba(13,47,73,.24);
}
.pe-account-dialog::backdrop { background: rgba(13,31,46,.6); }
.pe-account-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pe-account-heading > div { min-width: 0; }
.pe-account-eyebrow,
.pe-account-label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: var(--pe-muted); margin: 0 0 8px; }
.pe-account-heading h2,
.pe-account-gate h2 { margin: 0; font-size: var(--pe-heading); font-weight: 800; line-height: 1.25; color: var(--pe-blue); }
.pe-account-close {
  border: 0;
  background: transparent;
  color: var(--pe-muted);
  font-size: .75rem;
  padding: 8px;
  margin: -8px -8px 0 0;
}
.pe-account-close:hover { color: var(--pe-blue); background: var(--pe-soft); border-radius: 6px; }
.pe-account-intro { color: var(--pe-muted); margin: 12px 0 20px; }
.pe-account-setup-note { color: var(--pe-warning); background: #fbf1df; border: 1px solid #e4cfa8; border-radius: 6px; padding: 12px; margin: 0 0 16px; font-size: .75rem; }
.pe-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--pe-soft);
  padding: 4px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.pe-auth-tabs button {
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--pe-muted);
  font-size: var(--pe-small);
  font-weight: 600;
  line-height: 1.25;
}
.pe-auth-tabs button:hover { background: rgba(255,255,255,.7); color: var(--pe-blue); }
.pe-auth-tabs button[aria-selected="true"] { background: var(--pe-panel); color: var(--pe-blue); border-color: var(--pe-line); }
.pe-account-field { margin: 0 0 16px; }
.pe-account-field label { display: block; font-weight: 700; margin-bottom: 6px; }
.pe-account-field input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  border: 1px solid #98a9b7;
  border-radius: 6px;
  background: var(--pe-panel);
  color: var(--pe-ink);
  padding: 10px 12px;
  font: inherit;
  font-size: var(--pe-body);
}
.pe-password-wrap { position: relative; }
.pe-password-wrap input { padding-right: 72px; }
.pe-password-wrap button {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  min-width: 62px;
  border: 0;
  border-left: 1px solid var(--pe-line);
  border-radius: 0 5px 5px 0;
  background: var(--pe-soft);
  color: var(--pe-blue);
  font-size: var(--pe-small);
  font-weight: 700;
  padding: 8px;
}
.pe-password-wrap button:hover { background: #dce7ef; }
.pe-account-help { color: var(--pe-muted); font-size: .75rem; margin: 12px 0 16px; }
.pe-account-submit { width: 100%; margin-top: 4px; }
.pe-account-copy { margin: 0 0 20px; color: var(--pe-muted); }
.pe-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pe-account-message,
.pe-discard-panel {
  margin: 16px 0 0;
  padding: 12px;
  border-radius: 6px;
  background: var(--pe-soft);
  color: var(--pe-blue);
  font-size: var(--pe-small);
  overflow-wrap: anywhere;
}
.pe-account-message p,
.pe-discard-panel p { margin: 0 0 12px; }
.pe-account-error { color: var(--pe-error); background: #faeeee; border: 1px solid #e7c5c5; }
.pe-account-warning,
.pe-discard-panel { color: var(--pe-warning); background: #fbf1df; border: 1px solid #e4cfa8; }
.pe-account-footnote { color: var(--pe-muted); font-size: .75rem; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--pe-line); }
.pe-account-text-button { border: 0; background: transparent; padding: 8px 0; color: var(--pe-blue); font-size: var(--pe-small); font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.pe-account-text-button:hover { color: var(--pe-blue-hover); }
.pe-profile-email { margin: 0 0 16px; font-size: var(--pe-body); font-weight: 700; overflow-wrap: anywhere; }
.pe-account-sidebar { border-top: 1px solid var(--pe-line); padding: 20px 0 0; margin-top: 20px; }
.pe-sidebar-identity { font-weight: 700; overflow-wrap: anywhere; margin: 0 0 4px; }
.pe-sidebar-status { color: var(--pe-muted); font-size: .75rem; margin: 0 0 4px; }
.pe-account-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 4%;
  border-bottom: 1px solid var(--pe-line);
  background: var(--pe-soft);
  margin-left: var(--sidebar-width, 0px);
}
.pe-account-notice > p { margin: 0; max-width: 80ch; }
.pe-account-notice .pe-account-actions { flex-shrink: 0; }
.pe-account-notice.pe-notice-warning { background: #fbf1df; color: var(--pe-warning); border-color: #e4cfa8; }
.pe-account-gate { max-width: 600px; margin: 64px auto 64px max(calc(var(--sidebar-width, 0px) + 24px), calc((100vw - 600px + var(--sidebar-width, 0px)) / 2)); padding: 32px; background: var(--pe-panel); border: 1px solid var(--pe-line); border-radius: 10px; }
.pe-account-gate > p:not(.pe-account-eyebrow) { color: var(--pe-muted); margin: 16px 0 24px; }
#peConfirmPanel > .pe-account-button { margin-bottom: 8px; }
@media (max-width: 900px) {
  :root { --topbar-height: 128px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; height: var(--topbar-height); gap: 8px 12px; }
  .topbar .global-search { grid-column: 1 / -1; grid-row: 2; }
  .topbar .top-actions { align-items: center; min-width: 0; }
  #accountMount { flex-shrink: 0; width: auto; }
  #accountStatusMount .pe-account-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; margin-top: 8px; padding: 8px 0; white-space: normal; }
  #accountStatusMount .pe-account-label { display: none; }
  #accountStatusMount .pe-sidebar-identity { font-size: .75rem; }
  #accountStatusMount .pe-sidebar-status { grid-column: 1; }
  #peSidebarAccount { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: .75rem; }
}
@media (max-width: 600px) {
  .topbar .top-actions > .btn { display: none; }
  #accountMount { width: auto; max-width: 190px; }
  #peAccountButton { width: auto; font-size: .75rem; padding: 10px; }
  .pe-account-dialog { padding: 20px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .pe-account-heading { gap: 12px; }
  .pe-account-heading h2 { max-width: 245px; }
  .pe-account-notice { align-items: stretch; flex-direction: column; gap: 12px; padding: 16px; }
  .pe-account-notice .pe-account-actions { flex-shrink: 1; }
  .pe-account-gate { margin: 24px 12px; padding: 24px; }
  .pe-discard-panel .pe-account-actions > button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #peAccountUI *, #peAccountNotice *, #peAccountGate * { transition: none !important; }
}