/* ============================================================================
   core.css — JainSansar shared design tokens + UI primitives
   ----------------------------------------------------------------------------
   In-house CSS, no third-party imports, no @font-face calls.
   Extracted from the inline <style> in Auth/Views/auth_shell.php so the CSP
   surface shrinks and styles become editable in one place.

   Sections:
     1. Tokens (custom properties)
     2. Reset
     3. Layout primitives (.card, .brand, .grid2)
     4. Typography (.title, .subtitle, .footnote, .link)
     5. Buttons (.btn, .btn--primary, --secondary, --ghost, --full)
     6. Form controls (.field, .label, .control, .hint, error states)
     7. Feedback (.alert, .pill, .row, .divider)
     8. Utilities (.is-hidden, .stack, .danger-zone)

   USAGE
     <link rel="stylesheet" href="/assets/css/core.css">

   See SecurityHeaders for the current CSP. style-src still allows
   'unsafe-inline' for legacy inline style="" attributes; this file is a
   step toward tightening to nonce-only once those attributes are migrated
   to classes.
   ========================================================================== */

/* 1. Tokens ----------------------------------------------------------------- */
:root {
  --bg: #FBF7F2;
  --surface: #FFFFFF;
  --surface-2: #FFF6EC;
  --text: #1F2937;
  --text-muted: #6B7280;
  --text-inverted: #FFFFFF;
  --border: rgba(17, 24, 39, .10);
  --divider: rgba(17, 24, 39, .08);

  --primary: #D97706;
  --primary-hover: #B45309;
  --primary-soft: #FFF1DF;

  --danger-soft: #FDECEC;
  --danger-ink: #991B1B;
  --danger-border: rgba(220, 38, 38, .18);
  --danger-border-strong: #FECACA;

  --success-soft: #ECFDF3;
  --success-ink: #065F46;
  --success-border: rgba(16, 185, 129, .18);

  --focus-ring: rgba(217, 119, 6, .38);

  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06);
  --shadow-md: 0 12px 26px rgba(17, 24, 39, .10);

  --s3: 3px;
  --s5: 5px;
  --s6: 6px;
  --s8: 8px;
  --s9: 9px;
  --s10: 10px;
  --s12: 12px;
  --s14: 14px;
  --s16: 16px;
  --s20: 20px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;

  --max-card: 432px;
  --tap: 36px;

  --font:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    "Noto Sans", "Helvetica Neue", sans-serif;
}

/* 2. Reset ----------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, var(--primary-soft), transparent 60%),
    radial-gradient(1200px 600px at 90% 10%, #FFE8CC, transparent 55%),
    var(--bg);
  display: grid;
  place-items: center;
  padding: var(--s24) var(--s16) var(--s48);
  line-height: 1.45;
}

/* 3. Layout primitives ---------------------------------------------------- */
.card {
  width: min(var(--max-card), 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s20);
}
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  margin-bottom: var(--s9);
}
.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), #FBBF24);
  box-shadow: var(--shadow-sm);
}
.brand__name {
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 16px;
}
.brand__logo { width: 100%; object-fit: contain; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
}
@media (max-width: 520px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* 4. Typography ----------------------------------------------------------- */
.title {
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 var(--s8);
  font-weight: 700;
  text-align: center;
}
.subtitle {
  margin: 0 0 var(--s9);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.footnote {
  margin-top: var(--s16);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}
.toplinks {
  display: flex;
  justify-content: center;
  gap: var(--s6);
  margin-top: var(--s6);
  flex-wrap: wrap;
}
.link {
  color: var(--primary-hover);
  font-weight: 900;
  text-decoration: none;
  font-size: 12px;
}
.link:hover { text-decoration: underline; }

/* 5. Buttons -------------------------------------------------------------- */
.btn {
  height: var(--tap);
  padding: 0 var(--s16);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  background: transparent;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--primary);
  color: var(--text-inverted);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn--secondary:hover { background: var(--surface-2); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn--ghost:hover { background: rgba(17, 24, 39, .04); }
.btn--danger {
  background: var(--danger-ink);
  color: var(--text-inverted);
  font-weight: 800;
}
.btn--full { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* 6. Form controls -------------------------------------------------------- */
.field { margin-bottom: 15px; }
.label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 5px;
}
.control {
  width: 100%;
  height: var(--tap);
  padding: 0 var(--s12);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  outline: none;
  font: inherit;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.control:focus {
  border-color: rgba(217, 119, 6, .45);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
textarea.control {
  height: auto;
  padding: var(--s12);
  min-height: 120px;
  resize: vertical;
}
.hint {
  margin-top: var(--s3);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.field--error .control {
  border-color: rgba(220, 38, 38, .35);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);
  background: #FFF9F9;
}
.field__error {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--danger-ink);
  display: none;
}
.field--error .field__error { display: block; }

/* Success state for live-validated fields (e.g. an available username). */
.field--ok .control {
  border-color: rgba(16, 185, 129, .40);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
  background: #F6FFFB;
}
.field--ok .field__error {
  display: block;
  color: #047857;
}

/* Split date-of-birth control: Day / Month / Year on a single line. */
.dob-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.1fr;
  gap: var(--s12);
}
/* min-width:0 stops a long option label from forcing a column wider than its
   track, which would otherwise push the row out of a single line. */
.dob-row .control {
  min-width: 0;
}
select.control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* 7. Feedback ------------------------------------------------------------- */
.alert {
  margin: var(--s12) 0 var(--s16);
  padding: var(--s12);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.alert--error {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger-ink);
}
.alert--success {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success-ink);
}

.pill {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 var(--s16);
}
.pill--error {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger-ink);
}
.pill--success {
  background: var(--success-soft);
  border-color: var(--success-border);
  color: var(--success-ink);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s5);
  margin: var(--s8) 0 var(--s5);
  flex-wrap: wrap;
}
.divider {
  display: flex;
  align-items: center;
  gap: var(--s5);
  margin: var(--s10) 0 var(--s8);
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: var(--divider);
  flex: 1;
}

/* 8. Utilities ------------------------------------------------------------ */
.is-hidden { display: none !important; }
.stack-12 { display: flex; flex-direction: column; gap: var(--s12); }
.stack-14 { display: flex; flex-direction: column; gap: var(--s14); }
.stack-16 { display: flex; flex-direction: column; gap: var(--s16); }
.stack-20 { display: flex; flex-direction: column; gap: var(--s20); }
.actionrow {
  display: flex;
  align-items: center;
  gap: var(--s8);
  flex-wrap: wrap;
  margin-top: var(--s12);
}
.actionrow > .control { flex: 1 1 220px; }

.danger-zone {
  border: 1px solid var(--danger-border-strong);
  background: var(--danger-soft);
  border-radius: 14px;
  padding: var(--s16);
}
.danger-zone h2 { color: var(--danger-ink); margin: 0 0 var(--s8); font-size: 16px; font-weight: 800; }
.danger-zone p { margin: 0 0 var(--s12); color: #7F1D1D; line-height: 1.5; font-size: 14px; }

.consent-card {
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: var(--s16);
  background: var(--surface);
}
.consent-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s12);
  flex-wrap: wrap;
}
.consent-card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.consent-card p  { margin: 0; color: var(--text-muted); line-height: 1.45; font-size: 14px; }
.consent-card dl {
  margin: var(--s12) 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--s10);
  row-gap: 4px;
  font-size: 13px;
  color: #374151;
}
.consent-card dt { font-weight: 600; }
.consent-card dd { margin: 0; }

.badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
}
.badge--active   { background: var(--success-soft); color: var(--success-ink); border-color: #A7F3D0; }
.badge--inactive { background: var(--danger-soft);  color: var(--danger-ink);  border-color: var(--danger-border-strong); }
.badge--inline   { padding: 6px 10px; }

/* ============================================================================
   Utility classes
   ----------------------------------------------------------------------------
   Single-property helpers that replace recurring inline style="" attributes
   so CSP can run with strict style-src (nonce-only, no 'unsafe-inline').
   Prefer building richer components in core.css over expanding this list.
   ========================================================================== */

/* Display + positioning */
.is-hidden       { display: none !important; }
.is-relative     { position: relative; }
.text-center     { text-align: center; }
.is-disabled     { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Font weights */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* Margin resets / overrides */
.m-0     { margin: 0; }
.mt-0    { margin-top: 0; }
.mt-8    { margin-top: var(--s8); }
.mt-12   { margin-top: var(--s12); }
.mt-16   { margin-top: var(--s16); }

/* Row modifiers (the .row primitive already provides flex justify-between) */
.row--tight   { margin: 0 0 var(--s8); }
.row--end     { justify-content: flex-end; }
.row--gap-form{ margin: var(--s8) 0 var(--s16); }
.row--mb-md   { margin: 0 0 var(--s16); }

/* Custom-color dot used by the topnav popups. The actual color is provided
   via the --dot-color CSS variable on a per-request nonced <style> block
   (see partials/topnav.php). */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dot-color, var(--text-muted));
  flex: 0 0 auto;
  margin-top: 6px;
}

/* Form layout helpers */
.checkbox-md { width: 18px; height: 18px; }

.consent-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* Password input with a right-side reveal button */
.control--with-eye { padding-right: 48px; }

.eye-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.eye-toggle__img { width: 20px; height: 20px; opacity: .9; }

/* OTP segmented input */
.otp-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.otp-input {
  text-align: center;
  font-weight: 900;
  letter-spacing: .02em;
  width: 100%;
  max-width: 52px;
}

/* ============================================================================
   Settings-page section primitives
   ========================================================================== */
.settings-card {
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: var(--s16);
  background: var(--surface);
  margin-top: var(--s16);
}
.settings-card__head {
  margin: 0 0 var(--s8);
  font-size: 16px;
  font-weight: 800;
}
.settings-card__body {
  margin: 0 0 var(--s12);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Consent card refinements (the .consent-card base already exists above) */
.consent-card__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--s16);
}

/* Stacked form for the delete-account form */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}
.form-stack > .label { font-weight: 600; }

/* Spacers — for the legacy <div style="height:N"> filler pattern.
   Prefer margin/padding when restructuring, but these let mechanical
   migrations land without altering rhythm. */
.spacer-8  { height: 8px;  }
.spacer-10 { height: 10px; }
.spacer-12 { height: 12px; }
.spacer-14 { height: 14px; }

/* Alert spacing variant — preserves the legacy "<alert> with margin-bottom:12" */
.alert--mb { margin-bottom: var(--s12); }

/* Hint spacing variants */
.hint--mt-8 { margin-top: var(--s8); }
.hint--mb-8 { margin-bottom: var(--s8); }

/* Row gap variant used by onboarding steps */
.row--gap-10 { gap: 10px; justify-content: space-between; }

/* Inline-form margin reset for sessions/2FA/status pages */
.form-inline   { margin: 0; }
.form-inline-m16 { margin-top: var(--s16); }

/* Static label/value display used by onboarding step 8 */
.kv-stat__label { font-size: 13px; color: var(--text-muted); }
.kv-stat__value { font-size: 18px; font-weight: 900; margin-top: 4px; }

/* Block titles inside onboarding callout cards */
.callout-title { font-weight: 900; }

/* Onboarding mobile/email small status block */
.identity-block {
  margin: 10px 0 var(--s16);
}
.identity-block__label {
  font-size: 14px;
  opacity: .85;
}
.identity-block__value {
  font-size: 18px;
  margin-top: 4px;
}

/* Small uniform input cell (used by some onboarding OTP grids) */
.cell-otp {
  width: 44px;
  text-align: center;
  font-size: 18px;
}