/* ═══════════════════════════════════════════════════════════════════
   auth.css — login / register panels, the dashboard, the captcha gate
   and the sign-out screen.

   Note: the captcha gate is a friction control, not an auth boundary.
   Hiding it with CSS or devtools grants nothing — every protected read
   and write is authorised server-side.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Auth panels ─────────────────────────────────────────────────── */
.auth-panel {
  max-width: 420px;
  margin: var(--sp-8) auto;
  padding: var(--sp-7) var(--sp-6);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.auth-panel h2 { text-align: center; margin-bottom: var(--sp-1); }
.auth-panel .auth-sub {
  margin-bottom: var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.auth-panel .btn-block { margin-top: var(--sp-2); }

.auth-switch {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.auth-switch a { font-weight: var(--fw-semibold); }

/* The first-run panel's footnote. Quieter than .auth-switch and left-aligned,
   because it is a consequence to read rather than a link to click: the account
   created on that screen claims the administrator role permanently. */
.auth-note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Generic, non-enumerating message — the server never tells the client
   whether it was the address or the password that was wrong. */
.auth-error {
  display: none;
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--red-text);
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-radius: var(--r-sm);
}
.auth-error.show { display: block; }

.auth-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Captcha gate ────────────────────────────────────────────────── */
.captcha-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--scrim);
  backdrop-filter: blur(6px);
}
.captcha-overlay.open { display: flex; }

.captcha-card {
  width: 100%;
  max-width: 400px;
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.captcha-icon { color: var(--accent); margin-bottom: var(--sp-3); }
.captcha-icon svg { width: 40px; height: 40px; }
.captcha-card h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.captcha-card p { font-size: var(--fs-sm); color: var(--text-muted); }

.captcha-question {
  margin: var(--sp-5) 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.captcha-input { text-align: center; }
.captcha-btn { width: 100%; margin-top: var(--sp-3); }
.captcha-error {
  display: none;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--red-text);
}
.captcha-error.show { display: block; }
.captcha-footer {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ── Sign-out screen ─────────────────────────────────────────────── */
.logout-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: var(--bg);
}
.logout-screen.open { display: flex; }

.logout-card {
  width: 100%;
  max-width: 460px;
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--sp-4);
  color: var(--green);
  background: var(--green-light);
  border-radius: 50%;
}
.logout-icon svg { width: 26px; height: 26px; }
.logout-sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.logout-progress {
  height: 4px;
  margin: var(--sp-5) 0 var(--sp-2);
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.logout-progress-bar {
  --progress-current: 0;
  --progress-total: 1;
  height: 100%;
  width: calc(100% * var(--progress-current) / var(--progress-total));
  background: var(--accent);
  transition: width 1s linear;
}
.logout-countdown { font-size: var(--fs-xs); color: var(--text-muted); }
.logout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-5);
}

/* ── Dashboard ───────────────────────────────────────────────────── */
.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.dashboard-header p {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.project-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition);
}
.project-card:hover { border-color: var(--accent); }
.project-info { flex: 1 1 220px; min-width: 0; }
.project-info .pname {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  word-break: break-word;
}
.project-info .pmeta {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* A legacy row is read-only by construction — say so, do not hide it. */
.project-card[data-legacy] { background: var(--bg-sunken); }
.project-card[data-legacy] .pname::after {
  content: 'Legacy — exports only';
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  vertical-align: middle;
  color: var(--text-secondary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.audit-log { margin-top: var(--sp-8); }
.audit-log h3 { margin-bottom: var(--sp-3); font-size: var(--fs-lg); }
.audit-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-sm);
}
.audit-row time {
  flex: 0 0 132px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.audit-row .audit-event { flex: 1; min-width: 0; word-break: break-word; }

@media (max-width: 599px) {
  .auth-panel { margin: var(--sp-4) auto; padding: var(--sp-6) var(--sp-5); }
  .project-actions .btn { flex: 1 1 auto; }
  .audit-row { flex-direction: column; gap: 2px; }
  .audit-row time { flex: none; }
}

/* The server's own legacy notice, verbatim — the client never paraphrases why
   a row is read-only. */
.project-info .pnotice {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}