/* =============================================================================
   auth.css — Apple-touched styling for the server-rendered public/auth pages.
   Standalone (no ui-kit bundle, no Bootstrap). The :root / [data-theme="dark"]
   token blocks below are MIRRORED VERBATIM from
   resources/ui-kit/src/styles/tokens.css — keep the two in sync.
   ============================================================================ */
:root{
  /* Tells the browser which palette to draw native UI with — select popups,
     scrollbars, date pickers. Without it those stay light-on-light in dark mode. */
  color-scheme: light;
  --bg:#F5F7F4; --surface:#ffffff; --surface-2:#FBFCFA; --field:#ffffff;
  --text:#16323C; --muted:#6A7A74; --subtle:#93A39D;
  --brand:#0E6E68; --brand-2:#0A524E; --brand-strong:#0A524E; --brand-ink:#0A524E; --brand-tint:#E3F0EE; --on-brand:#ffffff;
  --sensitive:#7A3E63; --sensitive-tint:#F3E9EF;
  --sep:#EDF0ED; --border:#E2E7E2; --border-strong:#D3DBD3;
  --specular:transparent; --knob:#ffffff;
  --green:#2E7D5B; --green-tint:#E4F1EA; --red:#A63A46; --red-tint:#F7E7E9;
  --amber:#8A5A0F; --amber-tint:#F6EEDA; --blue:#2C6E8F; --blue-tint:#E6EEF4;
  --purple:#7A3E63; --purple-tint:#F3E9EF; --grey-tint:#EDF0ED;
  --overlay:rgba(22,50,60,.34);
  --glass:rgba(255,255,255,.82); --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(22,50,60,.04),0 10px 30px -18px rgba(22,50,60,.28);
  --shadow-lg:0 8px 40px -12px rgba(22,50,60,.30);
  --wall:none;
  --toggle-track-off:rgba(120,120,128,.32);
  --font-display:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  /* The select caret is an inline SVG, so --muted cannot reach it; keep the two
     in step by hand (light #6A7A74 / dark #93A7A1). */
  --select-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236A7A74' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0E1A1C; --surface:#152528; --surface-2:#101F21; --field:#101F21;
  --text:#E8EDEB; --muted:#93A7A1; --subtle:#6E807A;
  --brand:#3FB0A8; --brand-2:#63C6BE; --brand-strong:#63C6BE; --brand-ink:#63C6BE; --brand-tint:#12312F; --on-brand:#06211F;
  --sensitive:#CB8CB2; --sensitive-tint:#2A1B25;
  --sep:#1A2E30; --border:#223A3D; --border-strong:#2C4649;
  --specular:transparent; --knob:#5b5b5e;
  --green:#5CB98A; --green-tint:#14291F; --red:#DB7C87; --red-tint:#2C1519;
  --amber:#D6A64F; --amber-tint:#2A2312; --blue:#6FB1D4; --blue-tint:rgba(44,110,143,.22);
  --purple:#CB8CB2; --purple-tint:#2A1B25; --grey-tint:rgba(120,120,128,.24);
  --overlay:rgba(0,0,0,.55);
  --glass:rgba(21,37,40,.82);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -18px rgba(0,0,0,.6);
  --shadow-lg:0 8px 40px -12px rgba(0,0,0,.7);
  --wall:none;
  --toggle-track-off:rgba(120,120,128,.40);
  --select-caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2393A7A1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* --- base (mirrors ui-kit/base.css) --- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:var(--font-body);
  color:var(--text);
  /* Split long-hand rather than the `background:var(--wall),var(--bg)` shorthand:
     --wall is `none` in the current token set, and only the last layer of the
     shorthand may carry a colour. */
  background-color:var(--bg);
  background-image:var(--wall);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.01em;
  transition:background .35s,color .3s;
}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* --- page + card --- */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{
  width:100%;max-width:420px;
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow),inset 0 1px 0 var(--specular);
  padding:36px 32px;color:var(--text);
}
.auth-card--wide{max-width:480px}
/* Message cards (404 and friends): centred, with a tinted status glyph. */
.auth-card--center{text-align:center}
.auth-card--center .btn{margin-top:18px}
.auth-icon{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--brand-tint);color:var(--brand)}
.auth-icon svg{width:28px;height:28px;display:block}
.auth-logo{height:34px;width:auto;display:block;margin:0 auto 22px}
.auth-title{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;text-align:center}
.auth-subtitle{font-size:.9rem;color:var(--muted);text-align:center;margin-bottom:24px}

/* --- fields --- */
.auth-field{margin-bottom:14px}
.form-control,.form-select{
  width:100%;background:var(--field);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  padding:.72rem .9rem;font-size:.95rem;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
.form-control::placeholder{color:var(--subtle)}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.form-control.is-invalid,.form-select.is-invalid{border-color:var(--red)}
textarea.form-control{resize:vertical;min-height:64px}
.form-select{appearance:none;-webkit-appearance:none;background-image:var(--select-caret);background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.2rem}

.form-label{display:block;font-size:.85rem;font-weight:550;color:var(--text);margin-bottom:6px}
.auth-help{font-size:.8125rem;color:var(--muted);margin-top:6px}

/* --- checkbox --- */
.form-check{display:flex;align-items:center;gap:8px}
.form-check-input{width:18px;height:18px;accent-color:var(--brand);margin:0;cursor:pointer}
.form-check-label{font-size:.9rem;color:var(--muted)}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:.95rem;font-weight:600;border:none;border-radius:var(--radius-sm);padding:.72rem 1rem;cursor:pointer;transition:filter .15s,transform .02s;text-decoration:none}
.btn-primary,.btn-info,.btn-accept{width:100%;background:var(--brand);color:var(--on-brand)}
.btn-primary:hover,.btn-info:hover,.btn-accept:hover{filter:brightness(1.06);text-decoration:none}
.btn-primary:active,.btn-info:active,.btn-accept:active{transform:translateY(1px)}

/* --- links + meta rows --- */
.auth-link,.text-link{color:var(--brand-ink);font-size:.875rem;font-weight:500}
.auth-meta{text-align:center;margin-top:18px;font-size:.85rem;color:var(--muted)}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}

/* --- inline alerts (replace SweetAlert + Bootstrap alerts) --- */
.auth-alert{border-radius:var(--radius-sm);padding:.7rem .9rem;font-size:.875rem;margin-bottom:16px;border:1px solid transparent}
.auth-alert--error{background:var(--red-tint);color:var(--red);border-color:var(--red)}
.auth-alert--success{background:var(--green-tint);color:var(--green);border-color:var(--green)}

/* --- password toggle (works with assets/js/pages/password-toggle.js) --- */
.password-field{position:relative}
.password-field .form-control{padding-right:3rem}
.password-toggle{position:absolute;top:0;right:0;height:100%;width:3rem;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer}
.password-toggle:hover,.password-toggle:focus{color:var(--text);outline:none}
.password-toggle svg{width:20px;height:20px;display:block}

/* --- password requirements + strength (activate page) --- */
.password-requirements{margin-top:10px;font-size:.8125rem}
.requirement{display:flex;align-items:center;margin-bottom:5px;color:var(--muted);transition:color .3s ease}
.requirement-icon{width:16px;height:16px;border-radius:50%;margin-right:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:bold;background:var(--surface-2);color:var(--muted);transition:all .3s ease}
.requirement.valid{color:var(--green)}
.requirement.valid .requirement-icon{background:var(--green);color:#fff}
.requirement.invalid{color:var(--red)}
.requirement.invalid .requirement-icon{background:var(--red);color:#fff}
.password-strength{margin-top:10px}
.strength-bar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:5px}
.strength-fill{height:100%;transition:all .3s ease;border-radius:3px}
.strength-weak{background:var(--red);width:25%}
.strength-fair{background:var(--amber);width:50%}
.strength-good{background:var(--blue);width:75%}
.strength-strong{background:var(--green);width:100%}
.strength-text{font-size:.75rem;margin-top:3px;font-weight:500}

/* --- two-column login --- */
.auth-split{
  width:100%;max-width:1040px;
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-lg),inset 0 1px 0 var(--specular);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,440px) 1fr;
}
.auth-split__form{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.auth-split__hero{padding:48px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,var(--brand-tint),transparent)}
/* inside the split, the form card is "naked" (the split itself is the card) */
.auth-split .auth-card{background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;max-width:none}
.auth-split .auth-logo{margin-left:0;margin-right:auto}
.auth-split .auth-title,.auth-split .auth-subtitle{text-align:left}
.auth-hero-title{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px}
.auth-hero-sub{font-size:1rem;color:var(--muted);margin-bottom:24px}
.auth-hero-img{max-width:100%;border-radius:var(--radius-sm);box-shadow:var(--shadow)}
@media (max-width:860px){
  .auth-split{grid-template-columns:1fr;max-width:440px}
  .auth-split__hero{display:none}
  .auth-split__form{padding:36px 28px}
}

/* --- terms reading card (content + gate) --- */
.terms-card{width:100%;max-width:800px;margin:48px auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 36px;color:var(--text)}
.terms-card h1{font-size:1.6rem;font-weight:700;margin-bottom:4px}
.terms-card h2{font-size:1.1rem;font-weight:600;margin-top:2rem;margin-bottom:.5rem}
.terms-card p,.terms-card li{font-size:.9375rem;color:var(--text);line-height:1.65}
.terms-card ul{padding-left:1.4rem}
.terms-card .warning{font-weight:600;text-transform:uppercase}
.terms-card .effective-date{color:var(--muted);font-size:.875rem}
.terms-scroll{max-height:420px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.25rem 1.5rem;background:var(--bg);font-size:.875rem;line-height:1.6;color:var(--text)}
.terms-scroll h2{font-size:.9375rem;font-weight:600;margin-top:1.25rem;margin-bottom:.35rem}
.terms-scroll h2:first-child{margin-top:0}
.terms-footer{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--sep);font-size:.85rem;color:var(--muted)}
.gate-footer{margin-top:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.gate-footer .legal-links{font-size:.8125rem;color:var(--muted)}

/* --- theme toggle --- */
.auth-theme-toggle{position:fixed;top:18px;right:18px;z-index:10;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:var(--glass);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);color:var(--text);cursor:pointer;box-shadow:var(--shadow)}
.auth-theme-toggle:hover{border-color:var(--border-strong)}
.auth-theme-toggle svg{width:18px;height:18px;display:block}

/* --- spacing shims ---
   The surgically-converted pages (staff/activate.php, terms/gate.php) keep a few
   Bootstrap spacing utility classes in their preserved markup. Bootstrap is no
   longer loaded on auth pages, so re-provide just the utilities those pages use
   (matching Bootstrap's rem values) instead of rewriting their markup. */
.mb-3{margin-bottom:1rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:1rem}
.mt-4{margin-top:1.5rem}
.w-100{width:100%}
.py-2{padding-top:.5rem;padding-bottom:.5rem}