/* The account bar in the header, its messages and the sign-out dialog (account.js), and the plan notes
   on the test start pages. Uses the page's theme tokens (home.css or app.css) plus the few below. */
:root {
  --account-ok-bg: #e6f6f3;
  --account-ok-text: #0f766e;
  --account-error-bg: #fef2f2;
  --account-error-text: #b91c1c;
  --account-free-bg: #fff7ed;
  --account-free-text: #9a3412;
  --account-full-bg: #e8f7ee;
  --account-full-text: #166534;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --account-ok-bg: #12332f;
    --account-ok-text: #5eead4;
    --account-error-bg: #3a1d24;
    --account-error-text: #fca5a5;
    --account-free-bg: #3b2414;
    --account-free-text: #fdba74;
    --account-full-bg: #12301f;
    --account-full-text: #4ade80;
  }
}

:root[data-theme="dark"] {
  --account-ok-bg: #12332f;
  --account-ok-text: #5eead4;
  --account-error-bg: #3a1d24;
  --account-error-text: #fca5a5;
  --account-free-bg: #3b2414;
  --account-free-text: #fdba74;
  --account-full-bg: #12301f;
  --account-full-text: #4ade80;
}

.site-header { flex-wrap: wrap; gap: 10px 16px; }

.account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.account-email {
  max-width: 220px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.plan-full { background: var(--account-full-bg); color: var(--account-full-text); }

.account-button {
  padding: 6px 12px;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.account-button:hover:not(:disabled) { border-color: var(--accent); }
.account-button:disabled { opacity: 0.6; cursor: default; }
.account-button.primary { border-color: var(--accent); background: var(--accent); color: #ffffff; }

.account-status {
  max-width: 920px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.92rem;
}

.account-status.ok { background: var(--account-ok-bg); color: var(--account-ok-text); }
.account-status.error { background: var(--account-error-bg); color: var(--account-error-text); }

.account-dialog {
  width: min(460px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
}

.account-dialog::backdrop { background: rgb(15 23 42 / 0.45); }
.account-dialog h2 { margin: 0 0 12px; font-size: 1.25rem; }
.account-dialog p { margin: 0 0 12px; color: var(--muted); line-height: 1.5; }
.account-dialog p strong { color: var(--text); }
.account-dialog .account-dialog-error { color: var(--account-error-text); }

.account-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* Progress, "where you struggle" and wrong answers: E-mail report under the heading, and how it went. */
.report-row { margin: 4px 0 20px; }
.report-row .account-status { margin: 10px 0 0; }

/* Test start pages: what a free account can do, and why a run could not start. Scoped to the panel so
   they win over its general paragraph style (app.css). */
.panel .plan-note,
.panel .start-error {
  max-width: 560px;
  margin: 4px auto 16px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}

.panel .plan-note { margin: 28px auto 0; background: var(--account-free-bg); color: var(--account-free-text); }

/* Buttons for what comes with full access (progress, where you struggle), greyed out with a label. */
.btn.locked:disabled { opacity: 0.55; cursor: not-allowed; }

.btn.locked::after {
  content: "Full access";
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--account-full-bg);
  color: var(--account-full-text);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* The snackbar: a free account's examples left, above the example while a run lasts (app.js). */
.snackbar {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 8px 18px;
  border-radius: 999px;
  background: #facc15; /* yellow in both themes, with dark text */
  color: #1f2937;
  font-weight: 600;
  text-align: center;
}

.snackbar[hidden] { display: none; }
.panel .start-error { background: var(--account-error-bg); color: var(--account-error-text); }

/* Smaller screens: the header becomes exactly two rows. The logo and the light/dark switch on the first;
   "All tests" (test pages), the e-mail address (shortened with … when long) and Sign out on the second. */
@media (max-width: 860px) {
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo logo theme" "back account account";
    align-items: center;
    gap: 12px 16px;
  }
  .site-header .header-actions { display: contents; }
  .site-header .wordmark { grid-area: logo; }
  .site-header .theme-toggle { grid-area: theme; justify-self: end; }
  .site-header .back-link { grid-area: back; white-space: nowrap; }
  .site-header .account { grid-area: account; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .account-email { flex: 0 1 auto; min-width: 0; }
}

/* Elements above set their own display, so hidden ones need this to stay hidden. */
.account[hidden],
.account-status[hidden],
.plan-note[hidden],
.start-error[hidden] { display: none; }