/* ============================================
   HerPlace Global Theme — Black & Gold Luxury
   background #080808 · gold #c9a96e
   Cormorant Garamond (headings) · Jost (body)
   ============================================ */

:root {
  --bg: #080808;
  --bg-card: #111111;
  --bg-elevated: #161616;
  --gold: #c9a96e;
  --gold-bright: #dfc08a;
  --gold-dim: #8f7648;
  --text: #f0ebe3;
  --muted: #9a9284;
  --border: rgba(201, 169, 110, 0.25);
  --danger: #c0392b;
  --success: #4caf50;

  /* Row states for any list — HerMail messages, HerCloud files.
     Three distinct steps above the card, not two: unread sits just
     above it, hover above that, selection highest. Keep them in that
     order or an unread selected row reads as merely hovered. */
  --row-unread: rgba(201, 169, 110, 0.055);
  --row-hover: rgba(201, 169, 110, 0.10);
  --row-selected: rgba(201, 169, 110, 0.17);

  /* Small text on a card. --gold and --muted are tuned for fills and
     large type; at 11-13px they fall under 4.5:1 on the light theme's
     near-white cards, so anything set as small text uses these instead.
     Every pairing in both themes is >= 4.5:1 against --bg, --bg-card,
     --bg-elevated and --row-selected. */
  --gold-text: #c9a96e;
  --muted-text: #9a9284;
  --danger-text: #e05a4a;

  /* Legacy variable remap — pages still using the old pink vars
     pick up gold automatically once their inline :root is removed */
  --pink: #c9a96e;
  --pink-dark: #8f7648;
  --pink-light: #161616;

  /* Alias names used by individual pages — all point at canonical values above
     so no page needs its own :root block. Add aliases here, never new colors. */
  --card: #111111;
  --surface: #111111;
  --elevated: #161616;
  --gold-light: #dfc08a;
  --gold-dark: #8f7648;
  --gold-pale: rgba(201, 169, 110, 0.12);
  --gold-border: rgba(201, 169, 110, 0.25);
  --gold-glow: rgba(201, 169, 110, 0.15);
  --danger-bright: #e05a4a;
  --error: #e05a4a;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--text);
  font-weight: 600;
}

a { color: var(--gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold-bright); }

/* ---------- Nav ---------- */
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--text);
}
.nav-logo span { color: var(--gold); }
.nav-logo img { height: 42px; width: auto; display: block; }

/* ---------- Cards / panels ---------- */
.card, .panel, .box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* ---------- Buttons ---------- */
button, .btn, input[type="submit"] {
  font-family: 'Jost', sans-serif;
  background: var(--gold);
  color: #080808;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background: var(--gold-bright);
}
.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
/* was a hardcoded gold rgba — showed gold on hover in the light theme */
.btn-outline:hover { background: var(--gold-pale); }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="url"],
textarea, select {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Jost', sans-serif;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
}
::placeholder { color: var(--muted); }

/* ---------- Tables ---------- */
table { border-collapse: collapse; }
th { color: var(--gold); font-family: 'Jost', sans-serif; }
td, th { border-bottom: 1px solid var(--border); }

/* ---------- Misc ---------- */
hr { border: none; border-top: 1px solid var(--border); }
::selection { background: var(--gold); color: #080808; }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---- Light / pink theme. Mirrors every :root variable above.
       Add new colors to :root first, then mirror them here. ---- */
[data-theme="light"] {
  --bg: #fdf6f8;
  --bg-card: #ffffff;
  --bg-elevated: #fbeef2;
  --gold: #ec2a8c;
  --gold-bright: #f560a8;
  --gold-dim: #c11f6f;
  --text: #2a1f24;
  --muted: #8d7a81;
  --border: rgba(236, 42, 140, 0.35);
  --danger: #c0392b;
  --success: #3d9142;

  --row-unread: rgba(236, 42, 140, 0.05);
  --row-hover: rgba(236, 42, 140, 0.09);
  --row-selected: rgba(236, 42, 140, 0.16);

  --gold-text: #c11f6f;
  --muted-text: #6f5f65;
  --danger-text: #c0392b;

  --pink: #ec2a8c;
  --pink-dark: #c11f6f;
  --pink-light: #fbeef2;

  --card: #ffffff;
  --surface: #ffffff;
  --elevated: #fbeef2;
  --gold-light: #f560a8;
  --gold-dark: #c11f6f;
  --gold-pale: rgba(236, 42, 140, 0.14);
  --gold-border: rgba(236, 42, 140, 0.35);
  --gold-glow: rgba(236, 42, 140, 0.25);
  --danger-bright: #e05a4a;
  --error: #e05a4a;
}

/* ---- The password rule, shown on the form ----------------------
   Objective 39, finding 10. The rule used to exist only as a
   refusal after submit ("Password must be at least 8 characters"),
   which is the form telling somebody off for not knowing something
   it never said. This is the same rule, said first.

   IT IS THE FIELD'S HINT, NOT A NEW COMPONENT. Same 0.72rem Jost and
   the same --muted-text as every other .hint on these forms, so it
   reads as belonging to the password box rather than as a panel
   stapled underneath it. Wrapping inline rather than a stacked list
   because register-creator.php is already a long form.

   NOT A STRENGTH METER. A coloured bar rates her password on a
   scale nobody can act on; five named requirements tell her exactly
   what is missing. The breach check cannot be shown here at all —
   it is a 20MB file on the server (includes/password-policy.php) —
   so that one arrives as a message after submit, which is the right
   place for it: it is not a rule she can read off in advance.

   BOTH THEMES COME FREE. Every value is a token: --muted-text for a
   requirement not yet met, --gold-text once it is, --bg-card for the
   check knocked out of the filled mark.

   WITH SCRIPTING OFF nothing adds .is-met and this renders as a
   plain, legible list of requirements — which is the whole point,
   so the no-JS case is the same information without the feedback. */
.pw-rules {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted-text, #9a9284);
}
.pw-rules li { display: flex; align-items: center; gap: 0.38rem; transition: color 0.15s ease; }
.pw-rules li.is-met { color: var(--gold-text, #c9a96e); }
.pw-mark {
  position: relative;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.55;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.pw-rules li.is-met .pw-mark { opacity: 1; background-color: currentColor; }
/* The check is drawn, not a glyph, so it cannot fall back to a box
   in a font that lacks it. Knocked out in the card colour. */
.pw-mark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 6px;
  border: solid var(--bg-card, #111111);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}
.pw-rules li.is-met .pw-mark::after { transform: rotate(45deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .pw-rules li, .pw-mark, .pw-mark::after { transition: none; }
}

/* ------------------------------------------------------------------
   Switch pair — the foot of the Identity Check card on both signup
   forms.

   IT LIVES HERE AND NOT IN A PAGE, because the two signup forms are
   deliberately near-identical files and this is the third thing they
   would each have kept their own copy of. objective 38's skip switch
   used page-local .skip-* rules; those are now these, so the two
   controls cannot drift apart while sitting side by side.

   THE SWITCH IS A PILL because every control on these forms that
   commits to something is a pill — .submit-btn is 50px. Track and
   knob are palette tokens, so it reads correctly on the light theme's
   pink without a second rule.

   THE LABEL SITS UNDER THE SWITCH rather than beside it. With two
   controls in a row there is no width for label-left/switch-right
   twice over, and stacking keeps both columns the same shape so
   neither looks like the primary one. Sentence case, not the tracked
   uppercase of .form-group label: these are not field names.
   ------------------------------------------------------------------ */
.tgl-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.tgl-row > * { flex: 1 1 0; min-width: 0; }
.tgl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.35rem 0;
  cursor: pointer;
  text-align: center;
}
.tgl-switch {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  border-radius: 50px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--gold-border);
  transition: background 0.18s, border-color 0.18s;
}
.tgl-switch::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted-text, #9a9284);
  transition: transform 0.18s, background 0.18s;
}
.tgl input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.tgl input:checked + .tgl-switch { background: var(--gold); border-color: var(--gold); }
.tgl input:checked + .tgl-switch::after { transform: translateX(20px); background: var(--bg); }
.tgl input:focus-visible + .tgl-switch { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.tgl-label { font-size: 0.86rem; line-height: 1.35; color: var(--text); }
.tgl-hint {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted-text, #a9a297);
}

/* A control that is off because another one is on. Not disabled-looking
   for its own sake — it is showing that the decision has been made
   elsewhere on the card, and it comes back the moment that changes. */
.tgl.is-suppressed { opacity: 0.38; cursor: not-allowed; }
.tgl.is-suppressed .tgl-switch { border-style: dashed; }

@media (prefers-reduced-motion: reduce) {
  .tgl-switch, .tgl-switch::after { transition: none; }
}