/* ===========================================================================
   I2S Orchestra — Auth (Runway-style split: full-bleed left, compact right)
   Depends on tokens.css (vars) + base.css (reset) + chrome.css (header)
   Works with existing classes from your PHP: .auth-grid, .auth-inspire-col,
   .auth-form-col, .auth-card, .inspire, .inspire__quote, etc.
   ======================================================================== */

/* Shell */
.i2s-auth-wrap {
  /* allow sticky header; fill the viewport beneath it */
  min-height: calc(100dvh - var(--bar-h-desktop));
  display: block;
  background: var(--surface);
}

/* Grid: full-bleed visual LEFT, narrow form RIGHT */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr min(34vw, 520px);
  gap: 0;
}

@media (max-width: 1023px) {
  .auth-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------ LEFT: full-bleed inspiration ------------------ */
.auth-inspire-col {
  position: relative;
  min-height: 100dvh;       /* true fullscreen feel */
  background:
    radial-gradient(80% 60% at 10% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 50%),
    var(--surface-2);
  overflow: hidden;
}
:root[data-theme="dark"] .auth-inspire-col {
  background:
    radial-gradient(80% 60% at 10% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    var(--surface-2);
}

/* Optional media layer (video/image) if you ever add it */
.auth-inspire-col .inspire__media {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  filter: saturate(105%) contrast(102%);
  opacity: .85;
}

/* Subtle glass veil for readability */
.auth-inspire-col::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.20), rgba(0,0,0,.08));
  mix-blend-mode: multiply;
  pointer-events: none;
}
:root[data-theme="light"] .auth-inspire-col::after { background: linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.04)); }

/* Quote stack (center-left vibe like your reference) */
.inspire {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}

.inspire__rotator {
  position: relative;
  width: min(720px, 80%);
}

/* Individual quotes */
.inspire__rotator .q,
.inspire__quote {                  /* fallback if you keep a single .inspire__quote */
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.28;
  letter-spacing: -0.2px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  font-weight: 600;
  opacity: 0;
  position: absolute;
  inset: 0 auto auto 0;
}

/* Fade cycle (add 2–5 quotes; delays stagger automatically below) */
@keyframes i2sFadeRotate {
  0%, 8%   { opacity: 0; transform: translateY(8px); }
  10%, 30% { opacity: 1; transform: translateY(0); }
  38%, 100%{ opacity: 0; transform: translateY(-6px); }
}

/* If you include multiple quotes inside .inspire__rotator, these will cycle */
.inspire__rotator .q:nth-child(1){ animation: i2sFadeRotate 12s var(--ease) infinite;}
.inspire__rotator .q:nth-child(2){ animation: i2sFadeRotate 12s var(--ease) 3s infinite;}
.inspire__rotator .q:nth-child(3){ animation: i2sFadeRotate 12s var(--ease) 6s infinite;}
.inspire__rotator .q:nth-child(4){ animation: i2sFadeRotate 12s var(--ease) 9s infinite;}

/* If you kept only .inspire__quote (single), just show it statically */
.inspire__quote { position: static; opacity: 1; }

/* Small subline under quotes (optional) */
.inspire__sub {
  margin-top: 10px;
  font-size: clamp(13px, 1.2vw, 14.5px);
  color: rgba(255,255,255,.85);
}

/* ------------------------ RIGHT: compact auth card column --------------- */
.auth-form-col {
  min-height: 100dvh;
  background: var(--surface);
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  border-left: 1px solid var(--hairline);
}
:root[data-theme="dark"] .auth-form-col {
  background: var(--surface);
}

/* The card itself: small and centered */
.auth-card {
  width: min(92vw, 440px);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--elev-1);
  padding: clamp(18px, 2.4vw, 24px);
}

/* Title + helper text */
.auth-title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-700);
  font-weight: 750;
  line-height: 1.2;
}
.auth-sub {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--muted);
  font-size: var(--fs-400);
}

/* Inputs */
.i2s-input { margin-bottom: var(--space-2); }
.i2s-input label {
  display: block; font-size: var(--fs-400); margin-bottom: .35rem; color: var(--text);
}
.i2s-input input {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.i2s-input input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Password reveal icon button */
.i2s-input--with-icon { position: relative; }
.i2s-input--with-icon .reveal {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
}

/* Socials */
.social-stack { display: grid; gap: 8px; margin-bottom: var(--space-3); }
.social-btn {
  display: grid; grid-template-columns: 28px 1fr; align-items: center;
  gap: 10px; height: 42px; padding: 0 10px;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface); color: var(--text);
  text-decoration: none; font-weight: 600; font-size: var(--fs-400);
}
.social-btn:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.social-btn__icon svg { width: 18px; height: 18px; display: block; }

/* Buttons (reuse global .btn styles; tighten height for auth) */
.auth-card .btn { --btn-h: 42px; width: 100%; }
.auth-actions { margin-top: var(--space-2); text-align: center; }
.auth-actions a { color: var(--text); opacity: .85; text-decoration: none; }
.auth-actions a:hover { opacity: 1; text-decoration: underline; }

/* Alerts */
.i2s-alert {
  margin-bottom: var(--space-2);
  padding: 10px 12px; border-radius: 10px; font-size: var(--fs-400);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}
.i2s-alert--error { border-color: color-mix(in srgb, var(--danger) 32%, var(--hairline)); }

/* ------------------------ Mobile stacking ------------------------------- */
@media (max-width: 1023px) {
  .auth-inspire-col {
    min-height: 40dvh;        /* a tasteful teaser on mobile */
  }
  .auth-form-col {
    min-height: 60dvh;
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }
  .auth-card {
    width: min(92vw, 520px);
  }
}
/* ===========================================================================
   MOBILE SPEC (Runway-style) — phones only
   Hides the inspiration column and centers a compact pill-form card.
   Paste at the bottom of auth.css
   ======================================================================== */
@media (max-width: 768px){

  /* 1) Kill the left inspiration column on mobile */
  .auth-inspire-col { display: none !important; }

  /* 2) The grid becomes one column; keep it full height */
  .auth-grid { grid-template-columns: 1fr !important; }

  /* 3) Center the form column with generous breathing room */
  .auth-form-col {
    min-height: 100dvh;
    display: grid;
    place-items: start center;          /* start for nice top spacing */
    padding: clamp(20px, 6vw, 32px) 16px;
    border: 0;                           /* seam-free */
    background: var(--surface);
  }

  /* 4) Card sizing/spacing (compact, not edge-to-edge) */
  .auth-card{
    width: min(92vw, 520px);
    margin-top: clamp(18px, 8vh, 56px); /* push down from top like the ref */
    padding: clamp(18px, 4.8vw, 24px);
    border-radius: 14px;
    box-shadow: var(--elev-1);
  }

  /* 5) Title scale similar to reference */
  .auth-title{
    font-size: clamp(22px, 5.2vw, 28px);
    line-height: 1.15;
    text-align: center;
    margin-bottom: 8px;
  }
  .auth-sub{
    text-align: center;
    margin-bottom: 16px;
  }

  /* 6) Inputs — taller with soft pills */
  .i2s-input input{
    height: 52px;
    border-radius: 14px;
    padding: 0 14px;
    font-size: 16px;
  }
  .i2s-input--with-icon .reveal{ right: 6px; width: 38px; height: 38px; }

  /* 7) Primary button — big pill */
  .auth-card .btn{
    --btn-h: 52px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
  }

  /* 8) “OR” separator styling */
  .auth-sep{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .02em;
  }
  .auth-sep > span{
    height: 1px;
    background: var(--hairline);
    display: block;
  }

  /* 9) Social pills like the ref */
  .social-stack{ gap: 12px; }
  .social-btn{
    height: 52px;
    border-radius: 999px;
    padding-inline: 14px;
    font-size: 16px;
  }
  .social-btn__icon svg{ width: 18px; height: 18px; }

  /* 10) Footer links under the form */
  .auth-actions{
    margin-top: 14px;
    text-align: center;
  }
}
/* ============================================================================
   I2S Orchestra — Auth hard layout rules
   Goal: 2 equal columns (desktop/laptop), no horizontal bleed, no page scroll.
         Mobile = single column with compact card.
   ========================================================================== */

/* 1) Global guards — kill accidental horizontal scroll */
html, body { overflow-x: hidden; }
.i2s-auth-wrap, .auth-grid, .auth-inspire-col, .auth-form-col { min-width: 0; }

/* 2) Grid frame */
.auth-grid{
  display: grid;
  grid-template-columns: 1fr;             /* mobile: single column */
  min-height: 100dvh;                      /* always fill viewport height */
  width: 100%;
  overflow: hidden;                        /* prevent any bleed */
  inset: 0;
}

/* Desktop/Laptop: two equal columns, no document scroll */
@media (min-width: 1024px){
  .auth-grid{
    grid-template-columns: 1fr 1fr;       /* equal widths */
    height: 100dvh;                        /* lock to viewport */
  }
  /* Remove vertical scroll on the page when in two-column mode */
  html, body { height: 100%; overflow-y: hidden; }
}

/* 3) Left column (inspiration) — full-bleed, centered quotes */
.auth-inspire-col{
  position: relative;
  background:
    radial-gradient(60% 80% at 10% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-right: 1px solid var(--hairline);
  overflow: hidden;                        /* keep visuals inside the pane */
}
:root[data-theme="dark"] .auth-inspire-col{
  background:
    radial-gradient(60% 80% at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}

/* Rotating quotes layer */
.inspire{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 28px);
  text-align: center;
}
.inspire__quote{
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  font-weight: 700;
  max-width: 26ch;
  color: var(--text);
  opacity: .92;
}

/* 4) Right column (form) — card centered, compact */
.auth-form-col{
  position: relative;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 32px);
  overflow: hidden;
}

/* The card itself: compact, never overgrows viewport */
.auth-card{
  width: min(420px, 92vw);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--elev-1);
  padding: clamp(16px, 3vw, 22px);
}

/* Tighten vertical rhythm so it fits comfortably in 100dvh */
.auth-title{ margin: 0 0 var(--space-2); font-size: var(--fs-700); }
.i2s-input{ margin-bottom: var(--space-2); }
.i2s-input input{ height: 42px; }

/* Social stack under forms, separated by “or” */
.auth-sep{ display:flex; align-items:center; gap:.75rem; margin: var(--space-3) 0; }
.auth-sep > span{ flex:1; height:1px; background: var(--hairline); }
.auth-sep > em{ font-style: normal; color: var(--muted); font-size: var(--fs-400); }

/* Social buttons live below the form */
.social-stack{ display: grid; gap: .6rem; margin-top: var(--space-2); }
.social-btn{
  display:flex; align-items:center; gap:.6rem; justify-content:center;
  height: 40px; border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text); text-decoration: none; font-weight: 600;
}
.social-btn__icon svg, .social-btn__icon img{ width:18px; height:18px; display:block; }

/* Eye toggle button inside password fields */
.i2s-input--with-icon{ position:relative; }
.i2s-input--with-icon .reveal{
  position:absolute; right:8px; bottom:8px;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius: 8px; border:1px solid var(--hairline);
  background: var(--surface-2);
}

/* 5) Mobile presentation — single column with compact card only */
@media (max-width: 1023.98px){
  .auth-inspire-col{ display: none; }            /* drop the inspiration panel */
  .auth-form-col{ padding-block: clamp(24px, 8vh, 48px); }
  html, body { overflow-y: auto; }               /* allow vertical scroll on mobile */
}

/* 6) Safety: ensure header doesn’t push the auth layout off height */
.i2s-header{ position: static; }                 /* if header is present, it won’t introduce unexpected sticky space */
@media (min-width:1024px){
  .i2s-header{ display:none; }                   /* immersive auth on desktop/laptop; remove header entirely */
}

/* 7) Final bleed guards for any inner element */
.auth-grid *{ max-width: 100%; box-sizing: border-box; }
/* ============================================================================
   Final touches — clean card, fixed eye icon, darker inspiration
   ========================================================================== */

/* 1) Form card: remove gradients, keep premium simplicity */
.auth-card{
  background: var(--surface);              /* solid, no gradient */
  box-shadow: var(--elev-1);
  border: 1px solid var(--hairline);
}

/* 2) Inputs + Eye icon inside password fields */
.i2s-input{ position: relative; }
.i2s-input input{
  width: 100%;
  height: 42px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 0 42px 0 12px;                  /* reserve space for the eye */
  font: 600 14.5px/1 var(--font);
}

.i2s-input--with-icon .reveal{
  /* true icon look (not a “button” visually) */
  appearance: none;
  background: transparent;
  border: 0;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);             /* vertically centered */
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;

  /* no scaling, no shadows */
  transition: none;
  box-shadow: none;
}
.i2s-input--with-icon .reveal:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--hairline);   /* subtle focus ring for a11y */
  border-radius: 6px;
}
.i2s-input--with-icon .reveal svg{
  width: 18px;
  height: 18px;
  display: block;
  color: var(--muted);
}
.i2s-input--with-icon .reveal:hover svg{
  color: var(--text);
}

/* 3) Inspiration column — dark always; pure black in dark mode */
.auth-inspire-col{
  background:
    linear-gradient(180deg, #121622, #0E1116);  /* restrained dark in light mode */
  color: var(--text);
}
:root[data-theme="dark"] .auth-inspire-col{
  background: #000;                             /* pure black in dark mode */
  color: #fff;
}

/* Quote color/legibility */
.inspire__quote{
  color: color-mix(in srgb, #ffffff 94%, transparent);
  text-shadow: 0 1px 18px rgba(0,0,0,.28);
}
:root[data-theme="dark"] .inspire__quote{
  color: #fff;
}

/* 4) Social buttons harmonize with clean card */
.social-btn{
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text);
}

/* 5) Keep layout guards intact (no bleed, no scaling side effects) */
.auth-grid, .auth-inspire-col, .auth-form-col { min-width: 0; overflow: hidden; }

.inspire__quote{
  text-align:center;
  font-weight:800;
  line-height:1.25;
  font-size: clamp(20px, 2.6vw, 34px);
  transition: opacity var(--fast) var(--ease);
  opacity: 1;
}
/* Password reveal inside input */
.i2s-input--with-icon { position: relative; }
.i2s-input--with-icon input {
  padding-right: 42px; /* space for the eye */
}
.i2s-input--with-icon .reveal {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.i2s-input--with-icon .reveal svg {
  width: 18px; height: 18px; flex: 0 0 18px;
}
.i2s-input--with-icon .reveal:hover { color: var(--text); }
.i2s-input--with-icon .reveal:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 6px;
}
/* Field wrapper anchors the icon correctly */
.i2s-input--with-icon .i2s-field {
  position: relative;
}

/* Ensure input has room for the icon inside */
.i2s-input--with-icon .i2s-field input[type="password"],
.i2s-input--with-icon .i2s-field input[type="text"] {
  padding-right: 44px; /* space for the eye */
}

/* The reveal control sits INSIDE the input, centered vertically */
.i2s-input--with-icon .i2s-field [data-reveal] {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);

  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0; /* prevent line-height from shifting things */
}

.i2s-input--with-icon .i2s-field [data-reveal]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px;
}

/* Eye icon sizing + swap when pressed */
.i2s-input--with-icon .i2s-field [data-reveal] svg { width: 18px; height: 18px; display: block; }
.i2s-input--with-icon .i2s-field [data-reveal] .eye-off { display: none; }
.i2s-input--with-icon .i2s-field [data-reveal][aria-pressed="true"] .eye { display: none; }
.i2s-input--with-icon .i2s-field [data-reveal][aria-pressed="true"] .eye-off { display: block; }

/* Dark mode legibility */
:root[data-theme="dark"] .i2s-input--with-icon .i2s-field [data-reveal] { color: var(--muted); }
/* ===== Eye icon vertical centering (robust, minimal) =================== */
/* Tunables */
:root{
  --field-h: 42px;   /* input height on desktop */
  --icon:    22px;   /* eye icon box size */
}

/* Ensure the with-icon wrapper is the positioning context */
.i2s-input--with-icon { position: relative; }

/* 1) Preferred markup: label + .i2s-field { input + [data-reveal] } */
.i2s-input--with-icon .i2s-field{ position: relative; }
.i2s-input--with-icon .i2s-field input{
  height: var(--field-h);
  padding-right: 44px; /* space for the eye */
}
.i2s-input--with-icon .i2s-field [data-reveal]{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: var(--icon);
  height: var(--icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
}
.i2s-input--with-icon .i2s-field [data-reveal] svg{
  width: 18px; height: 18px; display: block;
}
.i2s-input--with-icon .i2s-field [data-reveal]:hover{ color: var(--text); }
.i2s-input--with-icon .i2s-field [data-reveal]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px;
}

/* 2) Legacy markup fallback (no .i2s-field wrapper):
   Structure: <div class="i2s-input i2s-input--with-icon">
                <label>...</label>
                <input ...>
                <button class="reveal" data-reveal>...</button>
              </div>
   We anchor the button to the bottom of the input’s box using calc().
*/
.i2s-input--with-icon > input{
  height: var(--field-h);
  padding-right: 44px;
}
.i2s-input--with-icon > input + [data-reveal],
.i2s-input--with-icon > .reveal{
  position: absolute;
  right: 10px;
  /* center within the input box, independent of the label above */
  bottom: calc( (var(--field-h) - var(--icon)) / 2 );
  width: var(--icon);
  height: var(--icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
}
.i2s-input--with-icon > input + [data-reveal] svg,
.i2s-input--with-icon > .reveal svg{
  width: 18px; height: 18px; display: block;
}
.i2s-input--with-icon > input + [data-reveal]:hover,
.i2s-input--with-icon > .reveal:hover{ color: var(--text); }
.i2s-input--with-icon > input + [data-reveal]:focus-visible,
.i2s-input--with-icon > .reveal:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px;
}

/* 3) Mobile adjustments (match your taller inputs) */
@media (max-width: 1023.98px){
  :root{ --field-h: 50px; }         /* your mobile input height */
}
/* Fine-tune eye icon vertical position */
.i2s-input--with-icon .reveal,
.i2s-input--with-icon .i2s-field [data-reveal] {
  transform: translateY(-0%); /* was -50%; lowering by ~3px */
}
/* Single-quote rotator styles */
.inspire { position: relative; display:grid; place-items:center; height:100%; }
.inspire__quote{
  max-width: 26ch;
  text-align: center;
  font-weight: 750;
  line-height: 1.28;
  font-size: clamp(20px, 2.4vw, 32px);
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.inspire__quote.is-out { opacity: 0; transform: translateY(-6px); }

/* Single-quote rotator — make timing authoritative here */
.inspire__quote{
  --fade-ms: 320ms;   /* fade duration */
  --hold-ms: 3800ms;  /* time fully visible before fading */
  transition: opacity var(--fade-ms) var(--ease),
              transform var(--fade-ms) var(--ease);
}
.inspire__quote.is-out { opacity: 0; transform: translateY(-6px); }
/* === Password reveal icon — resilient rules (append to end of auth.css) === */

/* Positioning inside the input */
.i2s-input--with-icon { position: relative; }
.i2s-input--with-icon input { padding-right: 44px; }

/* The control itself (works for .reveal and [data-reveal]) */
.i2s-input--with-icon .reveal,
.i2s-input--with-icon [data-reveal]{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);   /* center vertically */
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  line-height: 0;
}

/* Base SVG look (inherit currentColor) */
.i2s-input--with-icon .reveal svg,
.i2s-input--with-icon [data-reveal] svg{
  width: 18px; height: 18px; display: block;
  fill: none;                 /* prevents fill from hiding strokes */
  stroke: currentColor;
  stroke-width: 1.8;
}

/* Swap logic: eye open by default, eye-off when pressed */
.i2s-input--with-icon .reveal .eye-off,
.i2s-input--with-icon [data-reveal] .eye-off{ display: none; }

.i2s-input--with-icon .reveal[aria-pressed="true"] .eye,
.i2s-input--with-icon [data-reveal][aria-pressed="true"] .eye{ display: none; }

.i2s-input--with-icon .reveal[aria-pressed="true"] .eye-off,
.i2s-input--with-icon [data-reveal][aria-pressed="true"] .eye-off{ display: block; }

/* Hover/focus polish */
.i2s-input--with-icon .reveal:hover,
.i2s-input--with-icon [data-reveal]:hover{ color: var(--text); }
.i2s-input--with-icon .reveal:focus-visible,
.i2s-input--with-icon [data-reveal]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 6px;
}
/* =========================
   Auth card: consistent compact sizing
   ========================= */

.auth-card {
  width: 100%;
  max-width: 360px;            /* lock petit width everywhere */
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--elev-1);
  padding: clamp(14px, 3vw, 20px);
}

/* Typography inside card */
.auth-title {
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}
.auth-sub {
  font-size: 0.9rem;
  margin: var(--space-1) 0 var(--space-3);
  text-align: center;
}

/* Inputs */
.i2s-input { margin-bottom: var(--space-2); }
.i2s-input label { font-size: 0.85rem; }
.i2s-input input {
  height: 40px;
  font-size: 0.9rem;
  border-radius: 8px;
  padding: 0 38px 0 10px; /* reserve for eye */
}

/* Eye icon */
.i2s-input--with-icon .reveal {
  width: 20px; height: 20px;
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
}

/* Buttons */
.auth-card .btn {
  --btn-h: 40px;
  font-size: 0.9rem;
  border-radius: 8px;
}

/* Social logins */
.social-stack { gap: 10px; margin-top: var(--space-2); }
.social-btn {
  height: 42px;
  font-size: 0.9rem;
  border-radius: 999px;
  padding: 0 12px;
}

/* Desktop: if form has too many fields, allow inner scroll */
@media (min-width: 1024px) {
  .auth-card {
    max-height: 85vh;
    overflow-y: auto;
  }
}
/* ==========================================================================
   AUTH — Center-align all form headings + subtexts
   Applies to: login, register, reset, set-password
   ========================================================================== */

.auth-card {
  text-align: center;
}

/* Headings */
.auth-card .auth-title {
  width: 100%;
  text-align: center;
  margin-bottom: clamp(6px, 1.6vh, 10px);
  font-weight: 750;
  line-height: 1.2;
}

/* Subtexts under headings */
.auth-card .auth-sub {
  text-align: center;
  margin-bottom: clamp(14px, 3vh, 20px);
  color: var(--muted);
  font-size: var(--fs-400);
}

/* Keep form fields left-aligned (important for readability) */
.auth-card .i2s-input,
.auth-card .i2s-alert,
.auth-card .auth-sep,
.auth-card .social-stack,
.auth-card .auth-actions {
  text-align: left;
}

/* ===========================================================================
   AUTH-ONLY BUTTONS (scoped) — safe to remove ui-core.css afterward
   ======================================================================== */

/* Local elevation fallbacks (kept inside auth scope only) */
.i2s-auth-wrap{
  --elev-0: var(--shadow-0, 0 2px 6px rgba(0,0,0,.06));
  --elev-1: var(--shadow-1, 0 6px 20px rgba(0,0,0,.10));
  --elev-2: var(--shadow-2, 0 12px 32px rgba(0,0,0,.14));
}

/* Base buttons (scoped so they don't touch the rest of the site) */
.i2s-auth-wrap .btn,
.i2s-auth-wrap .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .7rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--elev-1);
  cursor: pointer;
  text-decoration: none;

  /* motion */
  transition:
    transform var(--fast, 160ms) var(--ease, cubic-bezier(.2,.8,.2,1)),
    box-shadow var(--fast, 160ms) var(--ease, cubic-bezier(.2,.8,.2,1)),
    background var(--med, 220ms) var(--ease, cubic-bezier(.2,.8,.2,1)),
    color var(--med, 220ms) var(--ease, cubic-bezier(.2,.8,.2,1));
}
@media (prefers-reduced-motion: reduce){
  .i2s-auth-wrap .btn,
  .i2s-auth-wrap .button{ transition: none; }
}

/* Variants */
.i2s-auth-wrap .btn--primary,
.i2s-auth-wrap .button--primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2, var(--accent)));
  color: #fff;
  border-color: transparent;
}

.i2s-auth-wrap .btn--ghost,
.i2s-auth-wrap .button--ghost{
  background: transparent;
  border-color: var(--hairline);
  color: var(--text);
}

.i2s-auth-wrap .btn--danger,
.i2s-auth-wrap .button--danger{
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}

/* States */
.i2s-auth-wrap .btn:is(:hover,:focus-visible),
.i2s-auth-wrap .button:is(:hover,:focus-visible){
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
}

.i2s-auth-wrap .btn:disabled,
.i2s-auth-wrap .button:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}