/* ==========================================================================
   TopOfSex — design system
   1. Tokens
   2. Reset
   3. Typography
   4. Layout primitives
   5. Components
   6. Utilities
   7. Responsive
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Surfaces, from deepest to highest */
  --tos-bg:        #07070e;
  --tos-bg-2:      #0d0d18;
  --tos-surface:   #12121f;
  --tos-surface-2: #1a1a2b;
  --tos-surface-3: #232338;
  --tos-line:      #262638;
  --tos-line-soft: #1c1c2a;

  /* Text */
  --tos-text:      #f4f4f8;
  --tos-text-2:    #a8a8c0;
  --tos-text-3:    #6e6e8c;

  /* Brand */
  --tos-brand:     #ff2e63;
  --tos-brand-2:   #ff6b9d;
  --tos-brand-dim: rgba(255, 46, 99, 0.12);
  --tos-violet:    #7c5cff;
  --tos-cyan:      #22d3ee;
  --tos-amber:     #fbbf24;
  --tos-green:     #34d399;

  --tos-grad-brand:  linear-gradient(135deg, #ff2e63, #d91e4f);
  --tos-grad-duo:    linear-gradient(135deg, #ff2e63, #7c5cff);
  --tos-grad-cool:   linear-gradient(135deg, #7c5cff, #22d3ee);

  /* Type scale — 1.200 minor third */
  --tos-fs-xs:   11px;
  --tos-fs-sm:   12.5px;
  --tos-fs-base: 14px;
  --tos-fs-md:   15.5px;
  --tos-fs-lg:   18px;
  --tos-fs-xl:   22px;
  --tos-fs-2xl:  28px;
  --tos-fs-3xl:  36px;

  /* Spacing — 4px base */
  --tos-s-1: 4px;
  --tos-s-2: 8px;
  --tos-s-3: 12px;
  --tos-s-4: 16px;
  --tos-s-5: 20px;
  --tos-s-6: 24px;
  --tos-s-8: 32px;
  --tos-s-10: 40px;
  --tos-s-12: 48px;

  /* Radii */
  --tos-r-sm: 10px;
  --tos-r:    14px;
  --tos-r-lg: 20px;
  --tos-r-xl: 26px;
  --tos-r-pill: 999px;

  /* Shadows */
  --tos-sh-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --tos-sh:    0 6px 22px rgba(0, 0, 0, 0.4);
  --tos-sh-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  --tos-sh-brand: 0 6px 20px rgba(255, 46, 99, 0.32);

  /* Motion */
  --tos-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tos-fast: 140ms;
  --tos-base: 220ms;

  --tos-shell: 480px;
  --tos-nav-h: 62px;
  --tos-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              'Helvetica Neue', 'Noto Sans', sans-serif;
}

/* ── 2. Reset ──────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--tos-bg);
  color: var(--tos-text);
  font-family: var(--tos-font);
  font-size: var(--tos-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--tos-brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--tos-brand); color: #fff; }

/* ── 3. Typography ─────────────────────────────────────────────────────── */

.tos-h1 { font-size: var(--tos-fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tos-h2 { font-size: var(--tos-fs-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.tos-h3 { font-size: var(--tos-fs-lg); font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.tos-h4 { font-size: var(--tos-fs-md); font-weight: 650; letter-spacing: -0.01em; }

.tos-eyebrow {
  font-size: var(--tos-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tos-text-3);
}

.tos-lede { font-size: var(--tos-fs-md); color: var(--tos-text-2); line-height: 1.6; }
.tos-muted { color: var(--tos-text-3); }
.tos-num { font-variant-numeric: tabular-nums; }

/* ── 4. Layout primitives ──────────────────────────────────────────────── */

.tos-shell {
  position: relative;
  max-width: var(--tos-shell);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--tos-bg);
  isolation: isolate;
}

/* Ambient glow behind everything */
.tos-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 50% at 50% -8%, rgba(255, 46, 99, 0.15), transparent 68%),
    radial-gradient(ellipse 60% 40% at 110% 12%, rgba(124, 92, 255, 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.tos-main { flex: 1; padding: 0 var(--tos-s-4) var(--tos-s-8); }

.tos-section { margin-top: var(--tos-s-6); }
.tos-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tos-s-3);
  margin-bottom: var(--tos-s-3);
}

.tos-row { display: flex; align-items: center; gap: var(--tos-s-3); }
.tos-row--between { justify-content: space-between; }
.tos-grow { flex: 1; min-width: 0; }

.tos-stack { display: flex; flex-direction: column; gap: var(--tos-s-2); }

/* ── 5. Components ─────────────────────────────────────────────────────── */

/* Brand mark */
.tos-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tos-s-2);
}

/* Brand lockup. The mark is an inline SVG, so it scales from the width on the
   <svg> rather than from a fixed box, and carries its own drop shadow. */
.tos-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--tos-s-2);
  line-height: 0;
}
.tos-logo__glyph {
  flex: 0 0 auto;
  display: block;
  border-radius: var(--tos-r-sm);
  filter: drop-shadow(0 4px 12px rgba(255, 46, 99, 0.3));
}
.tos-logo__word {
  font-size: var(--tos-fs-md);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tos-text);
  line-height: 1.1;
  white-space: nowrap;
}

/* Buttons */
.tos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tos-s-2);
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: var(--tos-r);
  font-size: var(--tos-fs-base);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--tos-fast) var(--tos-ease),
              opacity var(--tos-fast) var(--tos-ease),
              border-color var(--tos-fast) var(--tos-ease),
              background var(--tos-fast) var(--tos-ease);
}
.tos-btn:active { transform: scale(0.98); }
.tos-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.tos-btn--primary {
  background: var(--tos-grad-brand);
  color: #fff;
  box-shadow: var(--tos-sh-brand);
}
.tos-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }

.tos-btn--ghost {
  background: transparent;
  border-color: var(--tos-line);
  color: var(--tos-text-2);
}
.tos-btn--ghost:hover:not(:disabled) {
  border-color: var(--tos-surface-3);
  color: var(--tos-text);
}

.tos-btn--block { display: flex; width: 100%; }
.tos-btn--sm { padding: 9px 14px; font-size: var(--tos-fs-sm); border-radius: var(--tos-r-sm); }

/* Text link */
.tos-link {
  color: var(--tos-brand-2);
  font-size: var(--tos-fs-sm);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tos-link:hover { color: #ff8fb3; }

/* Card */
.tos-card {
  display: block;
  width: 100%;
  padding: var(--tos-s-3) var(--tos-s-4);
  background: var(--tos-surface);
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-r-lg);
  color: inherit;
  text-align: left;
  transition: border-color var(--tos-fast) var(--tos-ease),
              background var(--tos-fast) var(--tos-ease),
              transform var(--tos-fast) var(--tos-ease);
}
.tos-card:hover {
  border-color: var(--tos-surface-3);
  background: var(--tos-surface-2);
}
.tos-card:active { transform: scale(0.99); }

/* Avatar */
.tos-ava {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tos-grad-duo);
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  user-select: none;
}
.tos-ava img { width: 100%; height: 100%; object-fit: cover; }
.tos-ava--sm { width: 38px; height: 38px; font-size: var(--tos-fs-base); }
.tos-ava--md { width: 54px; height: 54px; font-size: var(--tos-fs-lg); }
.tos-ava--lg { width: 88px; height: 88px; font-size: var(--tos-fs-2xl); }
.tos-ava--xl { width: 112px; height: 112px; font-size: var(--tos-fs-3xl); }

/* Badge / chip */
.tos-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--tos-r-pill);
  background: rgba(124, 92, 255, 0.14);
  border: 1px solid rgba(124, 92, 255, 0.3);
  color: #b9a8ff;
  font-size: var(--tos-fs-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
}
.tos-chip--good { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.28); color: var(--tos-green); }
.tos-chip--warn { background: var(--tos-brand-dim); border-color: rgba(255, 46, 99, 0.28); color: var(--tos-brand-2); }
.tos-chip--info { background: rgba(34, 211, 238, 0.12); border-color: rgba(34, 211, 238, 0.26); color: var(--tos-cyan); }
.tos-chip--amber { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.28); color: var(--tos-amber); }

.tos-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }

/* Stat */
.tos-stat {
  padding: var(--tos-s-3) var(--tos-s-2);
  background: var(--tos-surface);
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-r);
  text-align: center;
}
.tos-stat__value {
  display: block;
  font-size: var(--tos-fs-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tos-stat__label {
  display: block;
  margin-top: 2px;
  font-size: var(--tos-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tos-text-3);
}
.tos-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tos-s-2); }

/* Progress */
.tos-progress {
  height: 4px;
  background: var(--tos-line);
  border-radius: var(--tos-r-pill);
  overflow: hidden;
}
.tos-progress__bar {
  height: 100%;
  width: 0;
  background: var(--tos-grad-duo);
  border-radius: var(--tos-r-pill);
  transition: width var(--tos-base) var(--tos-ease);
}

/* Form */
.tos-field { display: flex; flex-direction: column; gap: 5px; }
.tos-field__label {
  padding-left: 2px;
  font-size: var(--tos-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tos-text-3);
}
.tos-field__control {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-r);
  background: var(--tos-surface);
  color: var(--tos-text);
  font-size: var(--tos-fs-base);
  transition: border-color var(--tos-fast) var(--tos-ease);
}
.tos-field__control::placeholder { color: var(--tos-text-3); }
.tos-field__control:focus {
  outline: none;
  border-color: var(--tos-brand);
}
.tos-field__control--select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236e6e8c' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.tos-field__control--area { resize: vertical; min-height: 92px; line-height: 1.5; }

.tos-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tos-s-2); }
.tos-form-grid > .tos-field--full { grid-column: 1 / -1; }

/* Modal */
.tos-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--tos-s-5);
  background: rgba(4, 4, 10, 0.84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: tos-fade var(--tos-base) var(--tos-ease) both;
}
.tos-modal[hidden] { display: none; }

.tos-modal__card {
  position: relative;
  width: 100%;
  max-width: 358px;
  padding: var(--tos-s-8) var(--tos-s-6) var(--tos-s-6);
  background: var(--tos-surface-2);
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-r-xl);
  text-align: center;
  animation: tos-pop var(--tos-base) var(--tos-ease) both;
}
.tos-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--tos-text-3);
  font-size: 22px;
  line-height: 1;
  transition: color var(--tos-fast) var(--tos-ease);
}
.tos-modal__close:hover { color: var(--tos-text); }
.tos-modal__art {
  width: 58px;
  height: 58px;
  margin: 0 auto var(--tos-s-3);
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--tos-grad-duo);
  color: #fff;
  font-size: 25px;
  box-shadow: 0 10px 30px rgba(255, 46, 99, 0.4);
}
.tos-modal__title { font-size: var(--tos-fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.tos-modal__body { margin-top: var(--tos-s-2); color: var(--tos-text-2); line-height: 1.6; }

.tos-perks {
  margin: var(--tos-s-5) 0;
  padding: var(--tos-s-4);
  text-align: left;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--tos-r);
}
.tos-perks li {
  position: relative;
  padding-left: 24px;
  color: var(--tos-text-2);
  line-height: 1.6;
}
.tos-perks li + li { margin-top: var(--tos-s-2); }
.tos-perks li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 4px;
  width: 7px;
  height: 12px;
  border: solid var(--tos-cyan);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Toast */
.tos-toast {
  position: fixed;
  left: 50%;
  bottom: var(--tos-s-6);
  transform: translateX(-50%);
  z-index: 10000;
  max-width: calc(100vw - 40px);
  padding: 11px 20px;
  background: var(--tos-surface-2);
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-r-pill);
  font-size: var(--tos-fs-base);
  font-weight: 600;
  box-shadow: var(--tos-sh-lg);
  animation: tos-toast var(--tos-base) var(--tos-ease) both;
}
.tos-toast[hidden] { display: none; }

/* Skeleton shimmer */
.tos-skel {
  border-radius: var(--tos-r);
  background: linear-gradient(90deg, var(--tos-surface) 25%, var(--tos-surface-2) 37%, var(--tos-surface) 63%);
  background-size: 400% 100%;
  animation: tos-shimmer 1.4s ease infinite;
}
@keyframes tos-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* ── 6. Utilities ──────────────────────────────────────────────────────── */

.tos-hidden { display: none !important; }
.tos-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tos-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tos-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tos-center { text-align: center; }

@keyframes tos-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tos-pop {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tos-toast {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes tos-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── 7. Responsive ─────────────────────────────────────────────────────── */

@media (min-width: 720px) {
  .tos-shell {
    min-height: calc(100vh - 48px);
    margin: 24px auto;
    border: 1px solid var(--tos-line);
    border-radius: var(--tos-r-xl);
    box-shadow: var(--tos-sh-lg);
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   TopOfSex — login surface
   Styles wp-login.php. Shares tokens from theme.css; overrides the WordPress
   admin stylesheet, which otherwise wins on specificity.

   Composition: split panel. Form on the left where the work happens, proof on
   the right carrying the six dimensions the product actually measures. On
   narrow screens the form comes first and the proof follows as a reason to
   scroll, not as decoration above the fold.
   ========================================================================== */

body.login {
  --tos-bg:        #07070e;
  --tos-surface:   #12121f;
  --tos-surface-2: #1a1a2b;
  --tos-surface-3: #232338;
  --tos-line:      #262638;
  --tos-text:      #f4f4f8;
  --tos-text-2:    #a8a8c0;
  --tos-text-3:    #6e6e8c;
  --tos-brand:     #ff2e63;
  --tos-brand-2:   #ff6b9d;
  --tos-violet:    #7c5cff;
  --tos-cyan:      #22d3ee;
  --tos-green:     #34d399;
  --tos-amber:     #fbbf24;
  --tos-grad-duo:  linear-gradient(135deg, #ff2e63, #7c5cff);
  --tos-r:        14px;
  --tos-r-lg:     20px;
  --tos-r-pill:   999px;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--tos-bg);
  color: var(--tos-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Ambient wash, tinted toward the brand so the dark never reads as flat black */
body.login::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 8% -6%, rgba(255, 46, 99, 0.16), transparent 66%),
    radial-gradient(ellipse 55% 40% at 98% 8%, rgba(124, 92, 255, 0.12), transparent 68%);
  pointer-events: none;
}

/* ── Shell ────────────────────────────────────────────────────────────── */

body.login #login {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

body.login #login h1 a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: none;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-indent: 0;
  color: var(--tos-text);
  text-decoration: none;
}

/* The core sprite is 84x84 and pushes the wordmark off-centre, and core paints
   its own bullet on the anchor. Hide both — the inline SVG that login.js
   injects is the entire mark, so nothing pseudo needs to draw. */
body.login #login h1 a img {
  display: none;
}
body.login #login h1 a::before,
body.login #login h1 a::after {
  content: none;
  display: none;
}
body.login #login h1 {
  margin: 0 0 6px;
  text-align: center;
}
body.login #login h1 a {
  gap: 10px;
  text-indent: 0;
  /* The anchor's own text is cleared by JS; zero the size so it cannot affect
     optical centring, then restore the real size on the injected lockup. */
  font-size: 0;
}
body.login #login h1 .tos-logo,
body.login #login h1 .tos-logo__word {
  font-size: var(--tos-fs-md);
}

/* ── Layout ───────────────────────────────────────────────────────────── */

.tos-auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.tos-auth__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 24px;
}

.tos-auth__inner {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.tos-auth__proof {
  display: none;
  padding: 40px;
  border-left: 1px solid var(--tos-line);
  background:
    linear-gradient(180deg, rgba(124, 92, 255, 0.05), transparent 40%),
    var(--tos-surface);
}

@media (min-width: 900px) {
  .tos-auth {
    grid-template-columns: minmax(440px, 46%) 1fr;
  }
  .tos-auth__proof {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ── Header block ─────────────────────────────────────────────────────── */

body.login #login h1 {
  margin: 0 0 6px;
  text-align: center;
}

.tos-auth__lede {
  margin: 0 0 28px;
  text-align: center;
  color: var(--tos-text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */

.tos-auth__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 24px;
  padding: 4px;
  background: var(--tos-surface);
  border: 1px solid var(--tos-line);
  border-radius: 12px;
}

.tos-auth__tab {
  padding: 9px 8px;
  border-radius: 9px;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  color: var(--tos-text-3);
  transition: background 140ms cubic-bezier(0.22, 1, 0.36, 1),
              color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tos-auth__tab:hover { color: var(--tos-text-2); }
.tos-auth__tab.is-active {
  background: var(--tos-grad-duo);
  color: #fff;
  box-shadow: 0 3px 12px rgba(255, 46, 99, 0.28);
}

/* ── Card ─────────────────────────────────────────────────────────────── */

body.login #loginform {
  margin: 0;
  padding: 24px;
  background: var(--tos-surface);
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-r-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

body.login #loginform .tos-field { margin-bottom: 16px; }

body.login #loginform label {
  display: block;
  margin-bottom: 6px;
  padding-left: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tos-text-3);
  line-height: 1.4;
}

body.login #loginform .input,
body.login #loginform input[type='text'],
body.login #loginform input[type='email'],
body.login #loginform input[type='password'],
body.login #loginform input[type='number'],
body.login #loginform input[type='search'],
body.login #loginform input[type='tel'],
body.login #loginform input[type='url'] {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-r);
  background: var(--tos-bg);
  color: var(--tos-text);
  font-family: inherit;
  font-size: 15px; /* 16px prevents iOS zoom on focus */
  line-height: 1.4;
  box-shadow: none;
  transition: border-color 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.login #loginform .input:hover { border-color: var(--tos-surface-3); }

/* Focus reads as focus, not as a warning. WordPress autofocuses the first
   field, and a brand-red ring plus a glow on a pristine page looks like a
   validation error. Focus therefore gets a violet halo; brand red is reserved
   for a field the user has actually failed. */
body.login #loginform .input:focus,
body.login #loginform input:focus {
  border-color: var(--tos-violet);
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.2);
}

/* Chrome paints a red ring on an empty required field the moment the page
   loads. Suppress it until the user has actually tried, so red only ever
   means a real problem. */
body.login #loginform .input[aria-invalid='true']:not(.tos-touched),
body.login #loginform input[aria-invalid='true']:not(.tos-touched) {
  border-color: var(--tos-line);
  background: var(--tos-bg);
  box-shadow: none;
  outline: none;
}
body.login #loginform .input[aria-invalid='true'].tos-touched,
body.login #loginform input[aria-invalid='true'].tos-touched {
  border-color: var(--tos-brand);
  background: rgba(255, 46, 99, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 46, 99, 0.14);
}

body.login .user-pass-wrap { position: relative; }

/* WordPress appends this description inside the password wrap. Hide it: the
   label already says what the field is, and the toggle says what it does. */
body.login .user-pass-wrap .description { display: none; }

/* Show password toggle */
.tos-reveal {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tos-text-3);
  cursor: pointer;
  transition: color 140ms, background 140ms;
}
.tos-reveal:hover { color: var(--tos-text-2); background: var(--tos-surface-2); }
.tos-reveal:focus-visible {
  outline: 2px solid var(--tos-brand);
  outline-offset: 1px;
  color: var(--tos-text);
}
.tos-reveal svg { width: 17px; height: 17px; }
.tos-reveal .tos-eye-off { display: none; }
.tos-reveal[aria-pressed='true'] .tos-eye-on  { display: none; }
.tos-reveal[aria-pressed='true'] .tos-eye-off { display: block; }

/* Password strength meter, used on the register form */
body.login .password-strength-wrap { margin-bottom: 16px; }
body.login .password-strength-wrap .strength-meter {
  height: 4px;
  margin-bottom: 8px;
  background: var(--tos-line);
  border-radius: var(--tos-r-pill);
}
body.login .password-strength-wrap .strength-meter-fill {
  height: 100%;
  width: 0;
  background: var(--tos-brand);
  border-radius: var(--tos-r-pill);
  transition: width 200ms ease, background 200ms ease;
}
body.login .password-strength-wrap .strength-meter-text {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tos-text-3);
}

/* Field-level validation, injected by login.js */
.tos-field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: #ff8fae;
  font-size: 12.5px;
  line-height: 1.5;
}
.tos-field-error[hidden] { display: none; }
.tos-field-error::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tos-brand);
}

/* ── Row: remember me + lost password ─────────────────────────────────── */

body.login #loginform .forgetmenot,
body.login #loginform .user-pass-wrap + .form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
}

body.login #loginform .forgetmenot label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tos-text-2);
  cursor: pointer;
}

/* Square the native checkbox off the default OS rendering */
body.login #loginform .forgetmenot input[type='checkbox'] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--tos-brand);
  cursor: pointer;
}

body.login #loginform .forgetmenot a,
body.login #loginform a,
body.login .tos-auth a {
  color: var(--tos-brand-2);
  text-decoration: none;
}
body.login #loginform .forgetmenot a:hover,
body.login #loginform a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.login #nav,
body.login #backtoblog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

body.login #nav a,
body.login #backtoblog a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--tos-text-3);
  transition: color 140ms;
}
body.login #nav a:hover,
body.login #backtoblog a:hover { color: var(--tos-text-2); }

/* ── Submit ───────────────────────────────────────────────────────────── */

body.login #loginform .submit .button-primary,
body.login #loginform #wp-submit,
body.login .wp-core-ui .button-primary {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--tos-r);
  background: linear-gradient(135deg, #ff2e63, #d91e4f);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: 0 5px 16px rgba(255, 46, 99, 0.3);
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 140ms, opacity 140ms;
}
body.login #loginform .submit .button-primary:hover,
body.login #loginform #wp-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 46, 99, 0.38);
}
body.login #loginform .submit .button-primary:active,
body.login #loginform #wp-submit:active { transform: scale(0.985); }
body.login #loginform .submit .button-primary:focus-visible,
body.login #loginform #wp-submit:focus-visible {
  outline: 2px solid var(--tos-brand-2);
  outline-offset: 2px;
}

/* Loading state: label swaps, button stops accepting input */
body.login #loginform.is-busy .submit .button-primary,
body.login #loginform.is-busy #wp-submit {
  opacity: 0.7;
  pointer-events: none;
}
body.login #loginform.is-busy .submit .button-primary::after,
body.login #loginform.is-busy #wp-submit::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tos-spin 700ms linear infinite;
}
@keyframes tos-spin { to { transform: rotate(360deg); } }

/* ── Messages: error, success, notice ─────────────────────────────────── */

body.login .tos-auth__msg {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: var(--tos-r);
  font-size: 13.5px;
  line-height: 1.55;
}
body.login .tos-auth__msg p { margin: 0; }

body.login .tos-auth__msg.is-error {
  background: rgba(255, 46, 99, 0.1);
  border: 1px solid rgba(255, 46, 99, 0.3);
  color: #ffb3c8;
}
body.login .tos-auth__msg.is-ok {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #8ef0c6;
}

/* WordPress core blocks carry its own .message / .notice / .error classes. */
body.login .message,
body.login .notice,
body.login .success,
body.login .error {
  margin: 0 0 18px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--tos-line) !important;
  border-radius: var(--tos-r) !important;
  background: var(--tos-surface) !important;
  box-shadow: none !important;
  color: var(--tos-text-2) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
body.login .notice-error,
body.login .error {
  background: rgba(255, 46, 99, 0.1) !important;
  border-color: rgba(255, 46, 99, 0.3) !important;
  color: #ffb3c8 !important;
}
body.login .message,
body.login .success {
  background: rgba(52, 211, 153, 0.1) !important;
  border-color: rgba(52, 211, 153, 0.28) !important;
  color: #8ef0c6 !important;
}
body.login .message a,
body.login .notice a,
body.login .error a,
body.login .success a { color: inherit; text-decoration: underline; }

/* ── Proof panel ──────────────────────────────────────────────────────── */

.tos-proof__eyebrow {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tos-text-3);
}
.tos-proof__title {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--tos-text);
}
.tos-proof__body {
  max-width: 46ch;
  margin: 0 0 32px;
  color: var(--tos-text-2);
  font-size: 15px;
  line-height: 1.65;
}

/* The six dimensions, each with a real bar. This is the product's actual
   intellectual content, not a decorative graphic. */
.tos-axes { display: grid; gap: 14px; margin: 0 0 32px; }

.tos-axis { display: grid; gap: 6px; }

.tos-axis__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tos-axis__name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--tos-text);
}
.tos-axis__val {
  font-size: 12px;
  font-weight: 700;
  color: var(--tos-text-3);
  font-variant-numeric: tabular-nums;
}
.tos-axis__bar {
  height: 5px;
  background: var(--tos-surface-3);
  border-radius: var(--tos-r-pill);
  overflow: hidden;
}
.tos-axis__fill {
  height: 100%;
  width: var(--w, 0%);
  border-radius: var(--tos-r-pill);
  background: var(--tos-grad-duo);
  transform-origin: left center;
  animation: tos-grow 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.tos-axis:nth-child(2) .tos-axis__fill { animation-delay: 60ms; }
.tos-axis:nth-child(3) .tos-axis__fill { animation-delay: 120ms; }
.tos-axis:nth-child(4) .tos-axis__fill { animation-delay: 180ms; }
.tos-axis:nth-child(5) .tos-axis__fill { animation-delay: 240ms; }
.tos-axis:nth-child(6) .tos-axis__fill { animation-delay: 300ms; }

@keyframes tos-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.tos-proof__note {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--tos-bg);
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-r);
  color: var(--tos-text-2);
  font-size: 13.5px;
  line-height: 1.6;
}
.tos-proof__note strong { color: var(--tos-text); font-weight: 650; }
.tos-proof__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.26);
  color: var(--tos-green);
  font-size: 15px;
}

/* ── Hide WordPress chrome we replace ─────────────────────────────────── */

body.login #backtoblog { display: none; }
body.login .language-switcher { display: none; }
body.login #login_footer { display: none; }
body.login .privacy-policy-text { display: none; }
body.login #login .tos-auth__legal { margin: 18px 0 0; }
body.login #login .tos-auth__legal p {
  margin: 0 0 4px;
  color: var(--tos-text-3);
  font-size: 12.5px;
  line-height: 1.6;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 899px) {
  .tos-auth__proof {
    padding: 32px 24px 44px;
    border-left: 0;
    border-top: 1px solid var(--tos-line);
  }
  .tos-auth__form { padding: 32px 24px 28px; }
}

@media (max-width: 400px) {
  .tos-auth__form { padding: 28px 18px 24px; }
  body.login #loginform { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  body.login *,
  body.login *::before,
  body.login *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}