/* ============================================================
   Bridge: AAMS User Growth plugin markup, AAMS design tokens.

   The plugin owns the behaviour and the data. Nothing here changes
   either. This file only maps its class names onto the design system
   so the workspace, the auth screens and the gated surfaces look like
   the rest of the site, in both themes.
   ============================================================ */

/* ---------------------------------------------------------------
   Welcome strip (theme-supplied, sits above the plugin app)
   --------------------------------------------------------------- */
.ws-welcome{ display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.ws-welcome__cta{ margin-left:auto; }
@media(max-width:560px){ .ws-welcome__cta{ margin-left:0; width:100%; } }

/* ---------------------------------------------------------------
   Workspace shell
   --------------------------------------------------------------- */
.wl-dashboard{ display:grid; gap:22px; }

.wl-dashboard-hero{
  background:linear-gradient(135deg,#0a2540 0%,#1a3a5c 100%);
  border-radius:18px; padding:clamp(24px,3vw,34px);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 10px 30px rgba(10,37,64,.15);
}
.wl-dashboard-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 88% 6%, rgba(201,162,39,.20) 0%, transparent 62%);
}
.wl-dashboard-hero > *{ position:relative; z-index:1; }
.wl-dashboard-hero h1,.wl-dashboard-hero h2,.wl-dashboard-hero h3{ color:#fff; }
.wl-dashboard-hero p{ color:rgba(255,255,255,.82); font-size:.97rem; }

.wl-dashboard-app{
  display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:1fr; align-items:start;
}
@media(min-width:960px){
  .wl-dashboard-app{
    grid-template-columns:250px minmax(0,1fr);
    transition:grid-template-columns .25s var(--ease);
  }
}

/* ---------------------------------------------------------------
   Sidebar collapse. Theme-supplied toggle and state; the plugin's
   own sidebar markup is untouched. Collapsing hides the column
   rather than shrinking it to icons, since the plugin's button
   markup isn't ours to assume a wrappable label inside.
   --------------------------------------------------------------- */
.wl-sidebar-toggle{
  display:none; align-items:center; gap:9px; margin-bottom:14px;
  padding:10px 15px; border-radius:9px; border:1px solid var(--border-light);
  background:var(--bg-white); color:var(--text-muted); cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.87rem;
  transition:border-color .18s var(--ease), color .18s var(--ease);
}
@media(min-width:960px){ .wl-sidebar-toggle{ display:inline-flex; } }
.wl-sidebar-toggle:hover{ border-color:var(--secondary); color:var(--heading); }
.wl-sidebar-toggle svg{ width:16px; height:16px; flex:none; }

html.sidebar-collapsed .wl-sidebar-toggle__label::before{ content:attr(data-expand-label); }
.wl-sidebar-toggle__label::before{ content:attr(data-collapse-label); }

@media(min-width:960px){
  html.sidebar-collapsed .wl-dashboard-app{ grid-template-columns:0px minmax(0,1fr); }
  html.sidebar-collapsed .wl-dashboard-sidebar{
    opacity:0; pointer-events:none; padding:0; border-width:0; overflow:hidden;
  }
}
.wl-dashboard-sidebar{
  transition:opacity .18s var(--ease), padding .18s var(--ease), border-width .18s var(--ease);
}
@media(prefers-reduced-motion:reduce){
  .wl-dashboard-app,.wl-dashboard-sidebar{ transition:none; }
}

/* ---------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------- */
.wl-dashboard-sidebar{
  display:grid; gap:3px; padding:12px;
  background:var(--bg-white); border:1px solid var(--border-light);
  border-radius:14px; box-shadow:var(--shadow-card);
}
@media(min-width:960px){ .wl-dashboard-sidebar{ position:sticky; top:88px; } }

.wl-dashboard-sidebar button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:11px 13px; border:0; border-radius:9px; background:transparent; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:.91rem; color:var(--text-muted);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.wl-dashboard-sidebar button:hover{ background:var(--bg-cream); color:var(--heading); }
.wl-dashboard-sidebar button[aria-selected="true"]{
  background:var(--tint-gold); color:var(--heading);
}
.wl-dashboard-sidebar button:focus-visible{ outline:2px solid var(--secondary); outline-offset:-2px; }

/* Plain nav link (Library) inside the sidebar's tablist: the plugin styles
   its tab buttons via the `[role="tab"]` attribute selector in its own
   frontend.css (dark-glass look, with `!important` on background/border),
   not via the element type, so a `<a>` here needs its own rule rather than
   relying on `.wl-dashboard-sidebar button`. Values mirror the plugin's own
   tab look so the exit link reads as part of the same list. */
.wl-dashboard-sidebar-link{
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:center;
  min-height:48px; padding:8px 10px; border-radius:12px;
  color:#b9c9d2; text-decoration:none;
  font-family:var(--display); font-weight:700; font-size:.76rem;
  transition:color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  border:1px solid transparent;
}
.wl-dashboard-sidebar-link:hover,
.wl-dashboard-sidebar-link:focus-visible{
  color:#fff; background:rgba(90,167,255,.08); border-color:rgba(90,167,255,.22); outline:none;
}
@media(max-width:860px){
  .wl-dashboard-sidebar-link{
    flex:0 0 auto; grid-template-columns:28px auto; min-height:44px; padding:7px 10px 7px 7px;
    white-space:nowrap;
  }
}

/* Counters and step numbers must stay legible, not wash out. */
.wl-dashboard-tab-index{
  display:grid; place-items:center; min-width:24px; height:24px; flex:none;
  border-radius:7px; background:var(--bg-cream); border:1px solid var(--border-light);
  font-family:var(--display); font-size:.7rem; font-weight:800; color:var(--text-muted);
}
.wl-dashboard-sidebar button[aria-selected="true"] .wl-dashboard-tab-index{
  background:var(--secondary); border-color:var(--secondary); color:#0a2540;
}

/* ---------------------------------------------------------------
   Panels: one section visible at a time
   --------------------------------------------------------------- */
.wl-dashboard-content{ min-width:0; }
.wl-dashboard-panel{ display:grid; gap:18px; }
.wl-dashboard-panel[hidden]{ display:none; }

.wl-dashboard-panel-heading{ margin-bottom:2px; }
.wl-dashboard-panel-heading h2{ font-size:clamp(1.3rem,2.2vw,1.65rem); margin-bottom:7px; }
.wl-dashboard-panel-heading p{ font-size:.96rem; }

.wl-auth-kicker,
.wl-tab-panel__eyebrow{
  font-family:var(--display); font-size:.73rem; text-transform:uppercase;
  letter-spacing:1.4px; color:var(--secondary); font-weight:700; margin-bottom:8px;
}
.wl-tab-panel__note{ font-size:.88rem; color:var(--text-light); }

/* ---------------------------------------------------------------
   Cards and generic panels
   --------------------------------------------------------------- */
.wl-dashboard-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }

.wl-dashboard-card,
.wl-profile-panel,
.wl-privacy-panel,
.wl-security-panel,
.wl-delete-account-panel,
.wl-knowledge-hub,
.wl-notification-center,
.wl-assessment-archive,
.wl-download-history,
.wl-onboarding,
.wl-lead-magnets{
  background:var(--bg-white); border:1px solid var(--border-light); border-radius:14px;
  padding:clamp(18px,2.2vw,24px); box-shadow:var(--shadow-card);
}
.wl-dashboard-card{ transition:box-shadow .2s var(--ease), transform .2s var(--ease); }
.wl-dashboard-card:hover{ box-shadow:var(--shadow-soft); transform:translateY(-2px); }
/* "Your path" cards are links wrapping a heading and body text. The plugin's
   own frontend.css already sets text-decoration:none on .wl-dashboard-card,
   this just guarantees it here too and keeps the lift-on-hover above as the
   affordance instead of an underline. */
.wl-dashboard-card,
.wl-dashboard-card:hover,
.wl-dashboard-card:focus-visible{ text-decoration:none; }
.wl-dashboard-card h3,
.wl-dashboard-card h4{ font-size:1.06rem; margin-bottom:7px; }
.wl-dashboard-card p{ font-size:.93rem; }

.wl-knowledge-hub__header,
.wl-notification-center__header,
.wl-assessment-archive__header,
.wl-download-history__header,
.wl-lead-magnets__header,
.wl-onboarding__header{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:16px; padding-bottom:13px; border-bottom:2px solid var(--border-light);
}
.wl-knowledge-hub__header h2,.wl-knowledge-hub__header h3,
.wl-notification-center__header h2,.wl-notification-center__header h3,
.wl-assessment-archive__header h2,.wl-assessment-archive__header h3,
.wl-download-history__header h2,.wl-download-history__header h3,
.wl-lead-magnets__header h2,.wl-lead-magnets__header h3,
.wl-onboarding__header h2,.wl-onboarding__header h3{ font-size:1.1rem; margin:0; }

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.wl-button,
.wl-button-secondary,
.wl-button-danger{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:.9rem;
  padding:12px 22px; border-radius:10px; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.wl-button{ background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(10,37,64,.18); }
.wl-button:hover{ background:var(--primary-light); transform:translateY(-1px); color:#fff; }
body.dark .wl-button{ background:var(--secondary); color:#12202e; }
body.dark .wl-button:hover{ background:var(--secondary-light); color:#12202e; }

.wl-button-secondary{ background:var(--bg-cream); color:var(--heading); border-color:var(--border-light); }
.wl-button-secondary:hover{ border-color:var(--secondary); transform:translateY(-1px); color:var(--heading); }

.wl-button-danger{ background:transparent; color:var(--warning); border-color:var(--warning); }
.wl-button-danger:hover{ background:var(--warning); color:#fff; }

/* ---------------------------------------------------------------
   Forms
   --------------------------------------------------------------- */
.wl-form,
.wl-password-form,
.wl-delete-account-form{ display:grid; gap:15px; }
.wl-form-grid{ display:grid; gap:15px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.wl-form label,
.wl-password-form label,
.wl-delete-account-form label{
  display:grid; gap:6px;
  font-family:var(--display); font-weight:700; font-size:.85rem; color:var(--heading);
}
.wl-form input:not([type="checkbox"]):not([type="radio"]),
.wl-form select,
.wl-form textarea,
.wl-password-form input:not([type="checkbox"]),
.wl-delete-account-form input:not([type="checkbox"]),
.wl-dashboard input[type="text"],
.wl-dashboard input[type="email"],
.wl-dashboard input[type="password"],
.wl-dashboard input[type="search"],
.wl-dashboard select,
.wl-dashboard textarea{
  width:100%; padding:11px 13px; border-radius:10px;
  font-family:var(--body); font-size:.95rem; font-weight:400;
  background:var(--bg-cream); color:var(--text-dark);
  border:1px solid var(--border-light);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.wl-dashboard input:focus,
.wl-dashboard select:focus,
.wl-dashboard textarea:focus{
  outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px var(--tint-gold);
}
.wl-form-helper{ font-size:.84rem; color:var(--text-light); font-weight:400; }
.wl-check{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--text-muted); font-weight:400; }
.wl-check input{ margin-top:3px; accent-color:var(--accent-green); width:16px; height:16px; flex:none; }

/* ---------------------------------------------------------------
   Compliance score. The numeric reading is allowed here, in the
   authenticated workspace, and never on the public result.
   --------------------------------------------------------------- */
.wl-compliance-score{
  display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:14px;
  background:linear-gradient(135deg,var(--tint-green),transparent);
  border:1px solid var(--tint-green);
}
.wl-compliance-score__label{ flex:1; min-width:200px; }
.wl-compliance-score__label h2{ font-size:clamp(1.25rem,2.2vw,1.6rem); margin:0 0 6px; }
.wl-compliance-score__label p{ font-size:.93rem; margin:0; }
.wl-compliance-score{ flex-wrap:wrap; }

/* 3. "Pending" and "No score generated" are separate inline elements: stack them. */
.wl-rrcs-mini-empty{
  display:grid; gap:3px; justify-items:center; text-align:center;
  padding:16px 20px; min-width:150px; border-radius:12px;
  background:var(--bg-white); border:1px dashed var(--border-strong);
}
.wl-rrcs-mini-empty strong{
  font-family:var(--display); font-size:.95rem; color:var(--heading);
}
.wl-rrcs-mini-empty span{ font-size:.84rem; color:var(--text-light); }

/* ---------------------------------------------------------------
   Onboarding meter
   --------------------------------------------------------------- */
.wl-onboarding__meter{
  height:7px; border-radius:99px; background:var(--border-light); overflow:hidden; margin:12px 0;
}
.wl-onboarding__meter > *{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--secondary),var(--accent-green));
}
.wl-onboarding__steps{ display:grid; gap:11px; }
.wl-onboarding__steps > li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:14px 16px; border-radius:12px;
  background:var(--bg-cream); border:1px solid var(--border-light);
}
.wl-onboarding__steps > li.is-done{ background:var(--tint-green); border-color:var(--tint-green); }
.wl-onboarding__number{
  display:inline-grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:8px; background:var(--tint-gold);
  font-family:var(--display); font-size:.76rem; font-weight:800; color:var(--secondary);
}
.wl-onboarding__body{ display:grid; gap:4px; }
.wl-onboarding__body h3{ font-size:1rem; margin:0; }
.wl-onboarding__body p{ font-size:.91rem; margin:0; }
.wl-onboarding__status{ font-size:.84rem; color:var(--text-light); }
.wl-onboarding__steps .is-done .wl-onboarding__number{ background:var(--accent-green); color:#fff; }

/* ---------------------------------------------------------------
   Status chips
   --------------------------------------------------------------- */
.wl-consent-badge,
.wl-consent-item__state,
.wl-notification-count{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:20px;
  font-family:var(--display); font-size:.74rem; font-weight:700;
  background:var(--bg-cream); color:var(--text-muted); border:1px solid var(--border-light);
}
.is-on,
.wl-consent-badge.is-on,
.wl-consent-item__state.is-on{ background:var(--tint-green); color:var(--accent-green); border-color:var(--tint-green); }
.is-off,
.wl-consent-badge.is-off,
.wl-consent-item__state.is-off{ background:var(--bg-cream); color:var(--text-light); }
.is-pending,
.wl-consent-badge.is-pending{ background:var(--tint-gold); color:var(--secondary); border-color:var(--tint-gold); }
.wl-notification-count{ background:var(--secondary); color:#0a2540; border-color:var(--secondary); }

/* ---------------------------------------------------------------
   Lists: consent, downloads, notifications, resources
   --------------------------------------------------------------- */
.wl-consent-list,
.wl-download-history__list,
.wl-notification-list,
.wl-privacy-stack,
.wl-security-stack,
.wl-knowledge-news{ display:grid; gap:11px; list-style:none; margin:0; padding:0; }

.wl-consent-list > li,
.wl-download-history__list > li,
.wl-notification-list > li,
.wl-knowledge-news > li{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:13px 15px; border-radius:11px;
  background:var(--bg-cream); border:1px solid var(--border-light);
  font-size:.92rem; color:var(--text-muted);
}
.wl-consent-item__text{ flex:1; min-width:180px; }
.wl-consent-docs{ font-size:.85rem; color:var(--text-light); }

.wl-notification-item__message{ flex:1; min-width:200px; color:var(--text-dark); }
.wl-notification-item__meta{ font-size:.8rem; color:var(--text-light); }
.wl-notification-item__actions{ display:flex; gap:8px; margin-left:auto; }

/* Empty states must read as intentional, not broken. */
.wl-notification-empty,
.wl-assessment-archive__empty,
.wl-rrcs-mini-empty,
.wl-admin-empty{
  text-align:center; padding:30px 22px; border-radius:12px;
  border:1px dashed var(--border-strong); background:var(--bg-cream);
  color:var(--text-light); font-size:.93rem;
}

/* ---------------------------------------------------------------
   Lead magnets inside the workspace
   --------------------------------------------------------------- */
.wl-lead-magnets__grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.wl-lead-magnet-card{
  display:flex; flex-direction:column; gap:8px; padding:18px;
  background:var(--bg-cream); border:1px solid var(--border-light); border-radius:12px;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wl-lead-magnet-card:hover{ border-color:var(--secondary); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.wl-lead-magnet-card h3,.wl-lead-magnet-card h4{ font-size:1rem; margin:0; }
.wl-lead-magnet-card__meta{
  font-family:var(--display); font-size:.73rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; color:var(--secondary);
}
.wl-lead-magnet-card__download{ margin-top:auto; padding-top:12px; }

.wl-library-resource{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  background:var(--bg-cream); border:1px solid var(--border-light); border-radius:12px;
}
.wl-library-resource__icon{
  width:40px; height:40px; border-radius:10px; flex:none;
  display:grid; place-items:center; background:var(--tint-gold); color:var(--secondary);
}
.wl-library-resource__content{ flex:1; min-width:0; }
.wl-library-resource__actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.wl-library-resource__all{ margin-top:14px; }

/* ---------------------------------------------------------------
   Assessments
   --------------------------------------------------------------- */
.wl-assessment-archive__actions{ display:flex; flex-wrap:wrap; gap:9px; margin-left:auto; }
.wl-profile-summary{ display:grid; gap:12px; }

/* ---------------------------------------------------------------
   Security, privacy, account deletion
   --------------------------------------------------------------- */
.wl-security-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.wl-delete-account-panel{
  border-color:var(--tint-red);
  background:linear-gradient(135deg,var(--tint-red),transparent);
}
.wl-delete-account-panel h2,
.wl-delete-account-panel h3{ color:var(--warning); }

/* ---------------------------------------------------------------
   Inner tab lists (knowledge hub)
   --------------------------------------------------------------- */
.wl-tab-list{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.wl-tab-list button{
  padding:8px 15px; border-radius:9px; cursor:pointer;
  background:var(--bg-cream); border:1px solid var(--border-light); color:var(--text-muted);
  font-family:var(--display); font-weight:600; font-size:.86rem;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.wl-tab-list button:hover{ border-color:var(--secondary); color:var(--heading); }
.wl-tab-list button[aria-selected="true"]{ background:var(--secondary); border-color:var(--secondary); color:#0a2540; }
.wl-tab-panel[hidden]{ display:none; }

/* ---------------------------------------------------------------
   Auth screens and gate cards
   --------------------------------------------------------------- */
.wl-auth-alt{ font-size:.9rem; color:var(--text-muted); margin-top:14px; }
.wl-auth-alt a{ color:var(--accent-green); font-weight:600; }

.aams-gate,
.wl-gate-card{
  max-width:560px; margin:clamp(40px,7vw,80px) auto; padding:clamp(26px,3vw,36px);
  background:var(--bg-white); border:1px solid var(--border-light); border-radius:16px;
  box-shadow:var(--shadow-lift); text-align:center;
}
.aams-gate__note{ font-size:.88rem; color:var(--text-light); margin-top:14px; }

/* ---------------------------------------------------------------
   Notification popup
   --------------------------------------------------------------- */
.wl-notification-popup-backdrop{
  position:fixed; inset:0; z-index:90; background:rgba(10,37,64,.5); backdrop-filter:blur(3px);
}
.wl-notification-popup{
  position:fixed; z-index:91; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px)); padding:clamp(22px,3vw,30px);
  background:var(--bg-white); border:1px solid var(--border-light); border-radius:16px;
  box-shadow:var(--shadow-lift);
}
.wl-notification-popup__close{
  position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid var(--border-light); color:var(--text-muted);
}
.wl-notification-popup__close:hover{ border-color:var(--warning); color:var(--warning); }
.wl-notification-popup__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */
@media(max-width:640px){
  .wl-dashboard-sidebar{
    display:flex; overflow-x:auto; gap:6px; padding:9px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .wl-dashboard-sidebar::-webkit-scrollbar{ display:none; }
  .wl-dashboard-sidebar button{ width:auto; white-space:nowrap; flex:none; }
  .wl-form-grid{ grid-template-columns:1fr; }
  .wl-notification-item__actions{ margin-left:0; width:100%; }
  .wl-assessment-archive__actions{ margin-left:0; }
  .wl-button,.wl-button-secondary,.wl-button-danger{ width:100%; }
  .wl-library-resource{ flex-direction:column; }
}

/* ============================================================
   THEME MY LOGIN forms
   TML owns the markup and the behaviour. This only restyles it.
   ============================================================ */
.wl-auth-card{ display:grid; gap:4px; }
.wl-auth-card > h1{ font-size:clamp(1.5rem,2.6vw,1.95rem); margin-bottom:6px; }
.wl-auth-card > p{ font-size:.96rem; margin-bottom:14px; }

.tml{ display:grid; gap:15px; }
.tml-field-wrap{ display:grid; gap:6px; }
.tml-label{
  font-family:var(--display); font-weight:700; font-size:.86rem; color:var(--heading);
}
.tml input[type="text"],
.tml input[type="email"],
.tml input[type="password"],
.tml input[type="url"],
.tml input[type="tel"],
.tml select,
.tml textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  font-family:var(--body); font-size:.96rem;
  background:var(--bg-cream); color:var(--text-dark);
  border:1px solid var(--border-light);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tml input:focus,.tml select:focus,.tml textarea:focus{
  outline:none; border-color:var(--secondary); box-shadow:0 0 0 3px var(--tint-gold);
}
.tml-pwd-wrap{ position:relative; display:grid; }
.tml-button,
.tml input[type="submit"],
.tml button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:14px 24px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(10,37,64,.18);
  transition:background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tml-button:hover,
.tml input[type="submit"]:hover,
.tml button[type="submit"]:hover{
  background:var(--primary-light); transform:translateY(-1px); color:#fff;
}
body.dark .tml-button,
body.dark .tml input[type="submit"],
body.dark .tml button[type="submit"]{ background:var(--secondary); color:#12202e; }
body.dark .tml-button:hover,
body.dark .tml input[type="submit"]:hover,
body.dark .tml button[type="submit"]:hover{ background:var(--secondary-light); color:#12202e; }

.tml-checkbox,
.tml-rememberme-wrap label{
  display:flex; gap:10px; align-items:flex-start;
  font-family:var(--body); font-weight:400; font-size:.9rem; color:var(--text-muted);
}
.tml-rememberme-wrap input,
.tml-checkbox input{ margin-top:3px; accent-color:var(--accent-green); width:16px; height:16px; flex:none; }

.tml-links{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:4px;
  font-size:.89rem; list-style:none; padding:0;
}
.tml-links a{ color:var(--accent-green); text-decoration:none; font-weight:600; }
.tml-links a:hover{ text-decoration:underline; }

.tml-alerts:empty{ display:none; }
.tml-message,
.tml-alerts > *{
  padding:13px 16px; border-radius:11px; font-size:.91rem;
  border-left:4px solid var(--secondary);
  background:linear-gradient(90deg,var(--tint-gold),transparent);
  color:var(--text-dark);
}
.tml-alerts .tml-error,
.tml-message.error{
  border-left-color:var(--warning);
  background:linear-gradient(90deg,var(--tint-red),transparent);
}

/* Captcha field from the login-protection plugin */
.tml img[src*="captcha"],
.wl-auth-card img[src*="captcha"]{
  border:1px solid var(--border-light); border-radius:8px; background:#fff; padding:2px;
}

/* Collapsible extras: forgotten password, resend verification */
.wl-auth-details{
  border:1px solid var(--border-light); border-radius:11px;
  background:var(--bg-cream); overflow:hidden;
}
.wl-auth-details > summary{
  list-style:none; cursor:pointer; padding:13px 16px;
  font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--heading);
  position:relative; padding-right:42px;
}
.wl-auth-details > summary::-webkit-details-marker{ display:none; }
.wl-auth-details > summary::after{
  content:""; position:absolute; right:18px; top:19px; width:8px; height:8px;
  border-right:2px solid var(--secondary); border-bottom:2px solid var(--secondary);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.wl-auth-details[open] > summary::after{ transform:rotate(-135deg); top:23px; }
.wl-auth-details > *:not(summary){ padding:0 16px 16px; }
.wl-auth-details .tml{ padding-top:4px; }

.wl-resend{ display:grid; gap:11px; }
.wl-resend label{
  display:grid; gap:6px;
  font-family:var(--display); font-weight:700; font-size:.86rem; color:var(--heading);
}
.wl-resend input[type="text"]{
  width:100%; padding:11px 13px; border-radius:10px; font-family:var(--body); font-size:.94rem;
  background:var(--bg-white); color:var(--text-dark); border:1px solid var(--border-light);
}
.wl-resend button{
  justify-self:start; padding:10px 18px; border-radius:9px; cursor:pointer;
  background:var(--bg-white); border:1px solid var(--border-light); color:var(--heading);
  font-family:var(--display); font-weight:700; font-size:.87rem;
}
.wl-resend button:hover{ border-color:var(--secondary); }

/* The checkbox is a sibling of its label, not inside it, so the label rule
   alone left it stacked. Lay out the wrapper instead. */
.tml-rememberme-wrap{ display:flex; align-items:center; gap:9px; }
.tml-rememberme-wrap input{ margin:0; }
.tml-rememberme-wrap label{ margin:0; font-weight:400; font-size:.9rem; color:var(--text-muted); }

/* Login-protection plugin badge: useful in admin, noise on a branded page. */
.wps-limit-login-badge,
#wps-limit-login-badge,
[class*="limit-login"][class*="badge"]{ display:none !important; }