/* ==========================================================================
   ipourquality Joomla template
   Design tokens ported from the ipourquality.com landing page.
   ========================================================================== */

:root{
  --bg:#08090c;
  --bg-elev:#111319;
  --bg-elev-2:#161a22;
  --line:#232a36;
  --text:#eef1f5;
  --text-dim:#8a93a3;
  --text-faint:#565f6e;
  --cyan:#6fe9d4;
  --cyan-dim:rgba(73,224,232,.14);
  --blue:#4f7fd6;
  --radius:14px;
  --wrap:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3,h4,h5{font-weight:600;letter-spacing:-.01em;margin:0 0 .5em;}
p{line-height:1.6;color:var(--text-dim);margin:0 0 1em;}

/* optional CRT scanline overlay — toggled by the "scanline" template param */
body.has-scanline::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.018) 0px,
    rgba(255,255,255,0.018) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- SITE HEADER / NAV ---------- */
header.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(8,9,12,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site-header .header-inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
  gap:24px;
}
.site-logo img{height:20px;width:auto;opacity:.95;}
.site-logo{text-decoration:none;display:flex;align-items:center;}

/* primary nav module (mod_menu, "none" chrome) rendered as a flat inline list */
#nav-menu ul{
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}
#nav-menu ul ul{display:none;} /* keep it flat; sub-levels can be styled later */
#nav-menu a{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--text-dim);
  font-family:'JetBrains Mono',monospace;
  transition:color .2s ease;
}
#nav-menu a:hover,
#nav-menu li.current > a{color:var(--cyan);}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--text);
  padding:8px 10px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  cursor:pointer;
}

/* cta module position, styled as the pill button used across the brand */
#nav-cta a,
.btn-cta{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--bg);
  background:var(--cyan);
  padding:9px 16px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  display:inline-block;
  transition:filter .2s ease, transform .2s ease;
}
#nav-cta a:hover,
.btn-cta:hover{filter:brightness(1.12);transform:translateY(-1px);}

/* ---------- HERO / BANNER POSITION ---------- */
.site-banner{
  padding:96px 0 64px;
  border-bottom:1px solid var(--line);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--cyan);
  text-transform:uppercase;
  margin-top:0;
  margin-bottom:22px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px 1px var(--cyan);
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:.25;}
}

/* two-column hero layout — wrap your banner-module content in
   <div class="hero-grid"> to get the text-left / scope-right split */
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:start;
}
/* hero heading is scoped to .site-banner so regular article/page H1s
   elsewhere on the site aren't affected by the big hero sizing */
.site-banner h1,
.hero-grid h2{
  font-size:clamp(38px,5.4vw,64px);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 22px;
  font-weight:600;
}
.site-banner h1 .accent,
.hero-grid h2 .accent{color:var(--cyan);}
.hero-sub{
  font-size:17px;
  line-height:1.6;
  color:var(--text-dim);
  max-width:480px;
  margin:0 0 34px;
}

/* email capture form — used in both the hero and the beta-funnel section */
form.capture{
  display:flex;
  gap:10px;
  max-width:440px;
  margin-bottom:14px;
}
form.capture input[type="email"]{
  flex:1;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:9px;
  padding:14px 16px;
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:13.5px;
  outline:none;
  transition:border-color .2s ease;
}
form.capture input[type="email"]::placeholder{color:var(--text-faint);}
form.capture input[type="email"]:focus{border-color:var(--cyan);}
form.capture button{
  background:var(--cyan);
  color:var(--bg);
  border:none;
  border-radius:9px;
  padding:0 22px;
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  white-space:nowrap;
  transition:filter .2s ease, transform .2s ease;
}
form.capture button:hover{filter:brightness(1.12);transform:translateY(-1px);}
.capture-note{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--text-faint);
  letter-spacing:.02em;
}
.capture-success{
  display:none;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  color:var(--cyan);
  padding:14px 0 4px;
}
.capture-success.show{display:flex;}
.capture-success::before{content:"✓";}

/* ---------- RULER DIVIDER ---------- */
/* full-bleed trick: this pulls the bar edge-to-edge even though it'll be
   nested inside a max-width, padded wrapper (the content-top module) */
.ruler{
  border-bottom:1px solid var(--line);
  background:var(--bg);
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.ruler .wrap{
  display:flex;
  justify-content:space-between;
  padding:14px 28px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-faint);
  text-transform:uppercase;
}

/* ---------- SCOPE CARD (reusable oscilloscope-style panel) ---------- */
.scope{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border-radius:var(--radius);
  padding:18px 18px 0;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
}
.scope-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--text-faint);
  padding-bottom:14px;
  text-transform:uppercase;
}
.scope-head span.live{color:var(--cyan);}
.scope-body{position:relative;}
.scope canvas{
  width:100%;
  height:220px;
  display:block;
  border-radius:8px 8px 0 0;
}
.scope-illustration{
  position:absolute;
  right:0;
  top:50%;
  width:85px;
  transform:translateY(-49.2%);
  opacity:.95;
  filter:drop-shadow(0 0 10px rgba(111,233,212,.6)) drop-shadow(0 0 20px rgba(111,233,212,.3));
  pointer-events:none;
}

.scope-phases{
  display:flex;
  justify-content:space-between;
  padding:14px 18px 16px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--text-faint);
}
.scope-phases span{transition:color .3s ease;}
.scope-phases span.active{color:var(--cyan);}


/* ---------- MAIN LAYOUT / CONTENT AREAS ---------- */
main.site-main{
  padding:10px 0 64px;
  min-height:40vh;
}
.layout-row{
  display:flex;
  gap:48px;
  align-items:flex-start;
}
.layout-main{flex:1 1 0;min-width:0;}
.layout-sidebar{flex:0 0 280px;}

.breadcrumbs{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--text-faint);
  margin-bottom:32px;
  letter-spacing:.02em;
}
.breadcrumbs a{color:var(--text-dim);text-decoration:none;}
.breadcrumbs a:hover{color:var(--cyan);}

/* modules dropped in content-top / content-bottom / sidebar get a
   consistent card treatment so ad-hoc modules don't look bare */
.content-top .moduletable,
.content-bottom .moduletable,
.layout-sidebar .moduletable{
  border:1px solid var(--line);
  background:var(--bg-elev);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:24px;
}
.moduletable h3{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:14px;
}

/* Joomla system messages */
#system-message-container{max-width:var(--wrap);margin:24px auto 0;padding:0 28px;}
.alert{
  border:1px solid var(--line);
  background:var(--bg-elev);
  border-radius:10px;
  padding:14px 18px;
  margin-bottom:12px;
  font-size:13.5px;
  color:var(--text);
}

/* ---------- CHANNELS (four-card grid) ---------- */
section.channels{
  padding:88px 0 96px;
  border-bottom:1px solid var(--line);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:44px;
  gap:24px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(26px,3vw,36px);
  margin:0;
  font-weight:600;
  letter-spacing:-.01em;
}
.section-head p{
  margin:0;
  color:var(--text-dim);
  max-width:360px;
  font-size:14.5px;
  line-height:1.55;
}
.channel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.channel{
  background:var(--bg-elev);
  padding:30px 26px 28px;
  display:flex;
  flex-direction:column;
  min-height:250px;
  position:relative;
  transition:background .25s ease;
}
.channel:hover{background:var(--bg-elev-2);}
.channel-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--cyan);
  margin-bottom:18px;
}
.channel h3{font-size:19px;margin:0 0 12px;font-weight:600;}
.channel p{font-size:13.5px;line-height:1.55;color:var(--text-dim);margin:0 0 auto;}

/* ---------- channel-grid thumbnail mini-scopes ----------
   Small bordered box + canvas used for the looping preview
   animation at the top of each channel tile (homepage + downloads
   channel-grid). Added to pair with template.js's ipqWireThumbnails(). ---------- */
.channel-scope{
  background:var(--bg);
  border:1px solid rgba(111,233,212,.18);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:16px;
}
.channel-canvas{
  display:block;
  width:100%;
  height:auto;
}

.channel-link{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--text-faint);
  padding-bottom:2px;
  width:fit-content;
  transition:color .2s ease, border-color .2s ease, gap .2s ease;
}
.channel-link:hover{color:var(--cyan);border-color:var(--cyan);gap:9px;}

/* ---------- BETA FUNNEL ---------- */
section.funnel{
  padding:96px 0;
  border-bottom:1px solid var(--line);
  position:relative;
}
.funnel-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:64px;
  align-items:start;
}
.funnel h2{
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.12;
  margin:0 0 20px;
  font-weight:600;
  letter-spacing:-.01em;
}
.funnel-sub{color:var(--text-dim);font-size:15px;line-height:1.6;max-width:420px;margin-bottom:0;}
.funnel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.funnel-list li{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line);}
.funnel-list li:last-child{border-bottom:1px solid var(--line);}
.funnel-index{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan);padding-top:2px;min-width:34px;}
.funnel-item h4{margin:0 0 6px;font-size:15.5px;font-weight:600;}
.funnel-item p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-dim);}
.funnel-form-card{
  margin-top:0px;
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
}
.funnel-form-card form{display:flex;gap:10px;}
.funnel-form-card form input{
  flex:1;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:9px;
  padding:13px 15px;
  color:var(--text);
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  outline:none;
}
.funnel-form-card form input:focus{border-color:var(--cyan);}
.funnel-form-card form button{
  background:var(--cyan);
  color:var(--bg);
  border:none;
  border-radius:9px;
  padding:0 20px;
  font-family:'JetBrains Mono',monospace;
  font-weight:600;
  font-size:12.5px;
  cursor:pointer;
  white-space:nowrap;
}



/* ---------- FOOTER ---------- */
footer.site-footer{
  padding:56px 0 40px;
  border-top:1px solid var(--line);
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.footer-brand{display:flex;align-items:center;gap:14px;}
.footer-brand img{width:44px;border-radius:9px;}
.footer-brand-text{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text-faint);
  line-height:1.5;
  max-width:260px;
}
/* footer-position module content — just the Products/Project/Elsewhere columns.
   The badge, tagline, and copyright already render automatically from the
   template itself, so this module should NOT include a <footer> wrapper. */
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h5{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin:0 0 14px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{text-decoration:none;font-size:13.5px;color:var(--text-dim);transition:color .2s ease;}
.footer-col a:hover{color:var(--cyan);}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px;
  color:var(--text-faint);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .layout-row{flex-direction:column;}
  .layout-sidebar{flex:1 1 auto;width:100%;}
  .hero-grid{grid-template-columns:1fr;}
  .scope-illustration{display:none;}
  .channel-grid{grid-template-columns:repeat(2,1fr);}
  .funnel-grid{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:760px){
  .nav-toggle{display:inline-block;}
  #nav-menu{
    display:none;
    width:100%;
    order:3;
    padding-top:16px;
  }
  #nav-menu.is-open{display:block;}
  #nav-menu ul{flex-direction:column;align-items:flex-start;gap:16px;}
  header.site-header .header-inner{flex-wrap:wrap;height:auto;padding:16px 20px;}
}
@media (max-width:640px){
  .channel-grid{grid-template-columns:1fr;}
  form.capture{flex-direction:column;}
  .funnel-form-card form{flex-direction:column;}
  .ruler .wrap{font-size:9.5px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .eyebrow::before{animation:none;}
}


/* ==========================================================
   Registration form — append to css/template.css
   (This replaces every previous version of this block — remove
   any earlier copies before pasting, to avoid duplicate rules.)
   ========================================================== */

.scope.scope-form{
  padding-bottom:20px;
}
.scope-body-form{
  padding-top:4px;
}

.funnel-form-card form.form-stacked{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
}

.ipq-fieldset{
  display:flex;
  flex-direction:column;
}

.funnel-form-card form.form-stacked label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:15px;
}

.funnel-form-card form.form-stacked input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line, rgba(111,233,212,.25));
  color:#eaeaea;
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  padding:11px 20px;
  border-radius:999px;
  margin-bottom:24px;
}
.funnel-form-card form.form-stacked input::placeholder{
  color:var(--text-faint);
}

.funnel-form-card form.form-stacked input:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(111,233,212,.4);
}

.funnel-form-card form.form-stacked button{
  align-self:flex-start;
}

.form-stacked .invalid-feedback,
.form-stacked .alert-danger{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:#ff8a8a;
  margin-top:-8px;
}

/* ==========================================================
   Portal login module (mod_login) — styles the core login
   form's generic markup (labels/inputs/button) to match the
   rest of the page. Sits in the left column, below the intro
   text module.
   ========================================================== */

.ipq-portal-login{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line, rgba(111,233,212,.2));
}

.ipq-portal-login label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}

.ipq-portal-login input[type="text"],
.ipq-portal-login input[type="password"]{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line, rgba(111,233,212,.25));
  color:#eaeaea;
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  padding:11px 13px;
  border-radius:9px;
  margin-bottom:14px;
}

.ipq-portal-login input[type="text"]:focus,
.ipq-portal-login input[type="password"]:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(111,233,212,.4);
}

.ipq-portal-login button,
.ipq-portal-login input[type="submit"]{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  background:transparent;
  border:1px solid var(--cyan);
  color:var(--cyan);
  padding:10px 20px;
  border-radius:9px;
  cursor:pointer;
}

.ipq-portal-login button:hover,
.ipq-portal-login input[type="submit"]:hover{
  background:var(--cyan);
  color:var(--bg);
}

/* ==========================================================
   Login module buttons — Joomla ships these as generic
   Bootstrap-style classes (.btn/.btn-secondary/.btn-primary)
   with no site styling and no icon sizing, hence the huge
   passkey icon and black default text. Scoped to
   .ipq-portal-login so it only affects this login form.
   ========================================================== */

/* All form buttons match #nav-cta a / .btn-cta exactly:
   JetBrains Mono, full pill radius, solid mint bg, dark text,
   same hover lift+brightness behavior. */

.funnel-form-card form.form-stacked button,
.ipq-portal-login .btn{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--bg);
  background:var(--cyan);
  padding:9px 16px;
  border:none;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:filter .2s ease, transform .2s ease;
}

.funnel-form-card form.form-stacked button:hover,
.ipq-portal-login .btn:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
  background:var(--cyan);
  color:var(--bg);
}

/* password show/hide toggle icon, same unsized-SVG issue */
.ipq-portal-login .input-password-toggle svg,
.ipq-portal-login .icon-eye,
.ipq-portal-login .icon-user{
  width:16px;
  height:16px;
}

/* Passkey button hidden — delete or comment out this line if you
   ever want the "Sign in with a passkey" button visible again */
.ipq-portal-login .plg_system_webauthn_login_button{ display:none; }

/* Each login field becomes a proper vertical stack — label above,
   input below, matching the sign-up form's layout exactly. Joomla's
   markup puts <label> AFTER <input> in the HTML, which is why it
   was rendering to the right; flex "order" repositions it visually
   without touching Joomla's actual markup. */
.ipq-portal-login .input-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.ipq-portal-login .input-group label{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.ipq-portal-login .input-group input{
  order:0;
  margin-bottom:24px;
  border-radius:999px;
  padding:11px 20px;
}
.ipq-portal-login .input-group input::placeholder{
  color:var(--text-faint);
}
/* decorative user/eye icon badge that normally sits beside the
   input — dropped since the field is now full-width on its own line */
.ipq-portal-login .input-group-text{
  display:none;
}
/* Show Password styled to match the Remember Me checkbox exactly:
   a small square + label, not a pill button */
.ipq-portal-login .input-password-toggle{
  order:1;
  margin-top:-14px;
  margin-bottom:10px;
  align-self:flex-start;
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text-faint);
}
.ipq-portal-login .input-password-toggle::before{
  content:"";
  width:14px;
  height:14px;
  flex-shrink:0;
  border:1px solid var(--line, rgba(111,233,212,.4));
  border-radius:3px;
  background:var(--bg);
}
.ipq-portal-login .input-password-toggle svg,
.ipq-portal-login .input-password-toggle .icon-eye{
  display:none;
}
/* override the global visually-hidden treatment just for this one
   span — we want "Show Password" visible here, unlike the field
   labels above */
.ipq-portal-login .input-password-toggle .visually-hidden{
  position:static !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  clip:auto !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Put "Log in" and "Remember Me" side by side on one row, button
   first. Username/password/options stay full-width on their own
   lines by forcing flex-basis:100%; remember + submit are left as
   auto-width so they share the remaining row together. */
.ipq-portal-login .mod-login__userdata{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
/* reset every direct child to an identical box model — removes
   any residual margin/padding difference that could shift one
   item's left edge relative to another's */
.ipq-portal-login .mod-login__userdata > div{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.ipq-portal-login .mod-login__username,
.ipq-portal-login .mod-login__password{
  flex:0 0 100%;
  order:0;
}
.ipq-portal-login .mod-login__submit{
  order:1;
  margin-right:16px !important;
  align-self:flex-start;
}
.ipq-portal-login .mod-login__submit button{
  margin:0;
}
.ipq-portal-login .mod-login__remember{ order:2; }
.ipq-portal-login .mod-login__options{
  flex:0 0 100%;
  order:3;
  list-style:none;
  padding:0;
  margin:24px 0 0 !important;
}

/* remove Altcha's built-in bordered frame — the widget exposes
   these as CSS custom properties specifically so its shadow DOM
   can be reskinned from outside */
altcha-widget{
  --altcha-border-width:0;
  --altcha-color-border:transparent;
  --altcha-color-base:transparent;
  background:transparent;
}

/* center the "I'm not a robot" captcha widget vertically inside
   its bordered box */
.ipq-fieldset .controls{
  display:flex;
  align-items:center;
  min-height:56px;
}

/* Chrome/Safari force a white autofill background that ignores
   normal CSS — this is the standard override trick */
.ipq-portal-login input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
  -webkit-text-fill-color:#eaeaea;
}

/* shrink fields to roughly 1/3 width, left-aligned rather than
   stretched to fill the column */
.ipq-portal-login .input-group{
  align-items:flex-start;
}
.ipq-portal-login .input-group input{
  width:calc(33% + 9ch);
}

.ipq-portal-login .form-check{
  display:flex;
  align-items:center;
  gap:8px;
}
.ipq-portal-login .form-check-label{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text-faint);
  white-space:nowrap;
}

/* ==========================================================
   Profile page (com_users profile view) — CSS-only skin.
   Targets Joomla's real core markup directly (no template
   override file), so there's no risk of the file-path issues
   from tonight's registration form work repeating here.
   ========================================================== */

.com-users-profile{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 34px;
  max-width:720px;
  margin:0 auto;
}

.com-users-profile .page-header h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:28px;
  font-weight:600;
  color:var(--text);
  margin:0 0 24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.com-users-profile__edit{
  list-style:none;
  padding:0;
  margin:0 0 28px;
  display:flex;
  justify-content:flex-end;
}
.com-users-profile__edit .btn{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--bg);
  background:var(--cyan);
  padding:9px 18px;
  border-radius:999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:filter .2s ease, transform .2s ease;
}
.com-users-profile__edit .btn:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
}

.com-users-profile fieldset{
  border:none;
  padding:0;
  margin:0 0 28px;
}
.com-users-profile legend{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
  padding:0 0 12px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
  width:100%;
}

.com-users-profile dl.dl-horizontal{
  margin:0;
  display:grid;
  grid-template-columns:180px 1fr;
  row-gap:12px;
  column-gap:16px;
}
.com-users-profile dl.dl-horizontal dt{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text-faint);
  font-weight:normal;
}
.com-users-profile dl.dl-horizontal dd{
  color:var(--text);
  font-size:14px;
  margin:0;
  word-break:break-word;
}

@media (max-width:640px){
  .com-users-profile dl.dl-horizontal{
    grid-template-columns:1fr;
    row-gap:4px;
  }
  .com-users-profile dl.dl-horizontal dd{
    margin-bottom:8px;
  }
}

/* ==========================================================
   Hide Joomla's admin-only "quick edit" pencil icons + tooltips
   that get injected into module markup when a Super User is
   previewing the frontend while logged in. Regular visitors
   never see this markup — this just cleans up your own view.
   ========================================================== */
.jmodedit,
[role="tooltip"]{
  display:none !important;
}

/* ==========================================================
   Edit Profile page (com_users profile.edit view) — CSS-only,
   reuses the same card/legend/label patterns as the profile
   view and login form.
   ========================================================== */

.com-users-profile__edit{
  background:var(--bg-elev);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 34px;
  max-width:720px;
  margin:0 auto;
}

.com-users-profile__edit .page-header h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:28px;
  font-weight:600;
  color:var(--text);
  margin:0 0 24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

.com-users-profile__edit-form fieldset{
  border:none;
  padding:0;
  margin:0 0 32px;
}
.com-users-profile__edit-form > fieldset > legend,
.com-users-profile__edit-form fieldset.com-users-profile__multifactor > legend{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
  padding:0 0 12px;
  margin:0 0 20px;
  border-bottom:1px solid var(--line);
  width:100%;
}
/* screen-reader-only legends inside switcher fieldsets stay hidden */
.com-users-profile__edit-form .switcher + legend,
.com-users-profile__edit-form fieldset .visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.com-users-profile__edit-form .control-group{
  margin-bottom:20px;
}
.com-users-profile__edit-form .control-label label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:8px;
}
.com-users-profile__edit-form .control-label .star{
  color:var(--cyan);
}

.com-users-profile__edit-form .form-control,
.com-users-profile__edit-form .form-select{
  width:100%;
  max-width:420px;
  background:var(--bg);
  border:1px solid var(--line, rgba(111,233,212,.25));
  color:#eaeaea;
  font-family:'JetBrains Mono',monospace;
  font-size:13.5px;
  padding:10px 14px;
  border-radius:9px;
}
.com-users-profile__edit-form .form-control:focus,
.com-users-profile__edit-form .form-select:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(111,233,212,.4);
}
.com-users-profile__edit-form .form-control[readonly]{
  opacity:.6;
}
.com-users-profile__edit-form small.form-text{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:var(--text-faint);
  margin-top:6px;
  max-width:420px;
}

/* password fields + their show/hide toggle */
.com-users-profile__edit-form .password-group .input-group{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:420px;
}
.com-users-profile__edit-form .password-group input{
  flex:1;
  max-width:none;
}
.com-users-profile__edit-form .input-password-toggle{
  flex:0 0 auto;
  background:none;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px 12px;
  color:var(--text-faint);
  cursor:pointer;
}
.com-users-profile__edit-form .input-password-toggle:hover{
  border-color:var(--cyan);
  color:var(--cyan);
}
.com-users-profile__edit-form .input-password-toggle svg,
.com-users-profile__edit-form .icon-eye{
  display:none;
}

/* toggle switches (Yes/No radios styled as a switcher) */
.com-users-profile__edit-form .switcher{
  display:flex;
  gap:8px;
  align-items:center;
}
.com-users-profile__edit-form .switcher label{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  color:var(--text-dim);
  cursor:pointer;
}

/* buttons — match the site pill style */
.com-users-profile__edit-form .btn,
.com-users-profile__edit .btn{
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:.04em;
  border-radius:999px;
  padding:9px 18px;
  border:1px solid var(--cyan);
  background:transparent;
  color:var(--cyan);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:filter .2s ease, transform .2s ease;
}
.com-users-profile__edit-form .btn-primary,
.com-users-profile__edit-form .btn-success{
  background:var(--cyan);
  color:var(--bg);
  border-color:var(--cyan);
}
.com-users-profile__edit-form .btn-danger{
  border-color:#ff8a8a;
  color:#ff8a8a;
}
.com-users-profile__edit-form .btn:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
}

/* passkey table */
.com-users-profile__edit-form .table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
  font-size:13px;
}
.com-users-profile__edit-form .table th,
.com-users-profile__edit-form .table td{
  border:1px solid var(--line);
  padding:10px 12px;
  color:var(--text-dim);
  text-align:left;
}
.com-users-profile__edit-form .table thead th{
  background:var(--bg);
  color:var(--cyan);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* MFA method cards */
.com-users-profile__edit-form .com-users-methods-list-method{
  background:var(--bg) !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
}
.com-users-profile__edit-form .com-users-methods-list-method-header{
  background:transparent !important;
  border-bottom:1px solid var(--line) !important;
}
.com-users-profile__edit-form .com-users-methods-list-method-image{
  background:var(--bg-elev-2) !important;
}
.com-users-profile__edit-form .com-users-methods-list-method h2,
.com-users-profile__edit-form .com-users-methods-list-method-info{
  color:var(--text-dim);
}
#com-users-methods-reset-container{
  background:var(--bg) !important;
  border-color:var(--line) !important;
  color:var(--text-dim);
}

.com-users-profile__edit-submit{
  margin-top:8px;
  display:flex;
  gap:12px;
}

/* The Edit Profile page has no dedicated menu item, so Joomla
   falls back to the site's default (Home) menu item's page
   heading — which is why it incorrectly says "Home" here. The
   first fieldset's legend ("Edit Your Profile") is the real,
   correct heading, so we just drop this mismatched one entirely
   rather than try to align two competing header lines. */
.com-users-profile__edit .page-header{
  display:none;
}