/* ==========================================================================
   StrataHawk — auth.css
   login.html · signup.html · pending.html

   These three pages carried three copies of the same centred-card layout with
   three slightly different paddings and radii. One file now.
       <link rel="stylesheet" href="css/tokens.css">
       <link rel="stylesheet" href="css/auth.css">
   shared.css is NOT needed here — these pages use a handful of controls and
   loading the full component sheet for them would be waste.

   NOTE FOR THE TEAM, not a styling matter: #firstRunNotice on login.html prints
   the default administrator email and password to every visitor. That should be
   removed or gated regardless of this redesign.
   ========================================================================== */

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-6);
  /* The banner navy, carried down the page. This is the first thing anyone sees
     of the product, so it is the brand statement and nothing else competes. */
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(155deg, var(--blue-900) 0%, #071a29 100%);
  color: var(--text-primary);
}

.page-wrap { width: 100%; max-width: 430px; }

.app-header { text-align: center; margin-bottom: var(--space-7); }
.app-icon { width: 84px; height: 84px; margin: 0 auto var(--space-5); display: flex; align-items: center; justify-content: center; }
.app-icon img { width: 84px; height: 84px; object-fit: contain; }
.app-name { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-on-dark); letter-spacing: var(--tracking-tight); }
.app-tagline { margin-top: var(--space-2); font-size: var(--text-sm); color: rgba(255,255,255,0.55); }

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  overflow: hidden;
}

/* Sign in / Request access */
.tab-bar { display: flex; border-bottom: 1px solid var(--border); }
.tab {
  flex: 1; padding: var(--space-5); min-height: var(--target-min);
  font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--text-muted); background: transparent;
  border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; text-align: center;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--text-secondary); }
.tab.active { color: var(--blue-700); border-bottom-color: var(--blue-700); }

.form-panel { display: none; padding: var(--space-7); }
.form-panel.active { display: block; }
.form-group { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.form-label { font-size: var(--text-2xs); font-weight: var(--weight-bold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.form-input {
  width: 100%; padding: var(--space-5); min-height: var(--target-min);
  font-family: inherit; font-size: var(--text-md); color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-input); outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-input:focus { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.form-input.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

.pw-wrap { position: relative; }
.pw-wrap .form-input { padding-right: var(--space-11); }
.pw-toggle {
  position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
}
.pw-toggle:hover { color: var(--blue-700); }
.pw-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.check-row, .tos-check-row {
  display: flex; align-items: flex-start; gap: var(--space-4);
  margin-bottom: var(--space-6); min-height: var(--target-min);
  font-size: var(--text-base); color: var(--text-secondary);
  line-height: var(--leading-normal); cursor: pointer;
}
.check-row { align-items: center; }
.check-row input, .tos-check-row input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--blue-700); cursor: pointer; }
.tos-check-row input { margin-top: 2px; }
.tos-link {
  padding: 0; font-family: inherit; font-size: inherit; font-weight: var(--weight-semibold);
  color: var(--blue-700); background: none; border: none;
  text-decoration: underline; cursor: pointer;
}

.btn-submit {
  width: 100%; padding: var(--space-5); min-height: var(--target-min);
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--text-on-accent); background: var(--blue-700);
  border: none; border-radius: var(--radius-btn); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-submit:hover:not(:disabled) { background: var(--blue-600); }
.btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Feedback. Errors say what happened; they do not apologise and they are never
   vague. Both boxes use the same geometry so one does not read as louder. */
.error-box, .success-box, .first-run-notice, .request-info, .org-info, .info-box {
  padding: var(--space-5); margin-bottom: var(--space-5);
  font-size: var(--text-base); line-height: var(--leading-normal);
  border: 1px solid transparent; border-radius: var(--radius-sm);
}
.error-box   { display: none; background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }
.success-box { display: none; background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.error-box.show, .success-box.show { display: block; }
.first-run-notice { display: none; background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.first-run-notice strong { display: block; margin-bottom: var(--space-2); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.first-run-notice code { font-family: var(--font-mono); font-size: 0.92em; padding: 1px var(--space-3); background: rgba(0,0,0,0.06); border-radius: var(--radius-xs); }
.request-info, .org-info, .info-box { background: var(--bg-input); color: var(--text-secondary); border-color: var(--border); text-align: left; }
.request-info svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: var(--space-2); fill: none; stroke: var(--blue-600); stroke-width: 2; stroke-linecap: round; }
.info-box ul { padding-left: var(--space-6); }
.info-box li { margin-bottom: var(--space-2); }

/* Intent chooser — two real options, each a full-height target. */
.intent-group { display: flex; flex-direction: column; gap: var(--space-4); }
.intent-option { display: flex; cursor: pointer; }
.intent-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.intent-box {
  display: flex; flex-direction: column; gap: var(--space-1); width: 100%;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.intent-option:has(input:checked) .intent-box { border-color: var(--blue-700); background: var(--info-bg); box-shadow: inset 3px 0 0 var(--blue-700); }
.intent-option:has(input:focus-visible) .intent-box { box-shadow: var(--focus-ring); }
.intent-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.intent-desc { font-size: var(--text-sm); color: var(--text-muted); }

.footer-text { margin-top: var(--space-6); text-align: center; font-size: var(--text-xs); color: rgba(255,255,255,0.38); }

/* Terms modal (login) */
.tos-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--space-6);
  background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.tos-overlay.open { opacity: 1; pointer-events: all; }
.tos-modal { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 82vh; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); }
.tos-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: var(--space-6) var(--space-7); border-bottom: 1px solid var(--border-subtle); }
.tos-header h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.tos-close { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: var(--text-xl); color: var(--text-muted); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; }
.tos-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.tos-body { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-7); font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-normal); }
.tos-body h4 { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-2xs); font-weight: var(--weight-bold); color: var(--text-primary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.tos-body h4:first-child { margin-top: 0; }
.tos-body p { margin-bottom: var(--space-4); }
.tos-footer { flex-shrink: 0; padding: var(--space-5) var(--space-7); border-top: 1px solid var(--border-subtle); }
.tos-btn { width: 100%; padding: var(--space-5); min-height: var(--target-min); font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-on-accent); background: var(--blue-700); border: none; border-radius: var(--radius-btn); cursor: pointer; }
.tos-btn:hover { background: var(--blue-600); }

/* signup.html + pending.html */
.card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.card-subtitle { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-7); line-height: var(--leading-normal); }
.loading-state { padding: var(--space-10) var(--space-6); text-align: center; }
.loading-state p { margin-top: var(--space-5); font-size: var(--text-md); color: var(--text-muted); }
.spinner { width: 32px; height: 32px; margin: 0 auto; border: 3px solid var(--border); border-top-color: var(--blue-700); border-radius: var(--radius-circle); animation: auth-spin 0.7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.check-circle {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto var(--space-7);
  background: var(--success-bg); border: 2px solid var(--success-border); border-radius: var(--radius-circle);
}
.check-circle svg { width: 28px; height: 28px; fill: none; stroke: var(--success-fg); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); }
.subtitle { margin-bottom: var(--space-7); font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-normal); }
.subtitle strong { color: var(--blue-700); }
.btn-back {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-5) var(--space-8); min-height: var(--target-min);
  font-family: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--text-on-accent); background: var(--blue-700);
  border: none; border-radius: var(--radius-btn); text-decoration: none; cursor: pointer;
}
.btn-back:hover { background: var(--blue-600); }
.btn-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 440px) {
  body { padding: var(--space-6) var(--space-5); }
  .form-panel, .card { padding: var(--space-6); }
  .card { padding: 0; }
  .app-icon, .app-icon img { width: 68px; height: 68px; }
}