/* Connecter indigo redesign — auth dialog.
   ALL rules are scoped under .dc-auth (the class on the .modal element) so they
   override the legacy connecter modal CSS only for these dialogs and never leak.
   Consumes the design tokens defined in redesign-tokens.css.

   SPECIFICITY NOTE (why every selector is .dc-auth-prefixed):
   The legacy stylesheets style the SAME modal elements through descendant
   selectors — e.g. `.modal h1` (0,1,1), `.modal-body button` (0,1,1),
   `.modal-body input[type="button"]` (0,2,1), `.modal-body label` (0,1,1),
   `.modal-body a` (0,1,1). Those out-specify bare single-class component
   selectors, so each component rule is raised to at least (0,2,0) — and the
   gradient buttons to (0,3,0) via `.dc-btn-wrap` to beat `input[type="button"]`
   (0,2,1) — with explicit neutralizers (text-transform, border-radius, height,
   min-width, color, font-weight). The redesign sheets also load LAST in every
   layout so equal-specificity collisions (e.g. `.modal-login .modal-body`
   {height:594px}) resolve in our favour.

   UNITS NOTE: this site sets html { font-size: 62.5% } so 1rem = 10px. To avoid
   that 0.625× surprise (which made every rem-based size render ~62% too small),
   all dimensions here are explicit px. */

/* Reset the legacy Bootstrap modal chrome for our dialogs */
.dc-auth .modal-dialog { width:92%; max-width:920px; margin:6vh auto; }
.dc-auth .modal-content { border:0; border-radius:var(--dc-radius-card); box-shadow:var(--dc-shadow-card); overflow:hidden; }
.dc-auth .modal-body { padding:0; background:transparent; height:auto; }
.dc-auth .modal-footer { display:none; } /* footer is rendered inside the card */

.dc-auth { font-family:var(--dc-font-body); color:var(--dc-ink); }

/* FONT ENFORCEMENT (!important).
   A shared/global legacy rule applies `font-family: designconnected !important`
   to these modal elements — it is NOT in any connecter sheet we own (it cascades
   in from another app's stylesheet) and it beats even id-level selectors, so the
   redesign fonts only stick when re-declared with !important. Glyph spans
   (.cnnctr-icon) are deliberately EXCLUDED so the 'connecter' icon font keeps
   winning for the arrow/close icons. */
.dc-auth .dc-auth__title,
.dc-auth .dc-auth__aside-title,
.dc-auth .dc-auth__eyebrow { font-family:var(--dc-font-display) !important; }
.dc-auth,
.dc-auth .dc-auth__subtitle,
.dc-auth .dc-auth__lede,
.dc-auth .dc-auth__note,
.dc-auth .dc-bullet,
.dc-auth .dc-auth__card a,
.dc-auth .dc-field__label,
.dc-auth .dc-field__input,
.dc-auth .dc-checkbox,
.dc-auth .dc-link-btn,
.dc-auth .dc-btn-wrap .dc-btn,
.dc-auth .dc-auth__footer,
.dc-auth .dc-field__error,
.dc-auth .requiredMsg,
.dc-auth .message.required,
.dc-auth .dc-reset__help { font-family:var(--dc-font-body) !important; }

/* Two-column card. No forced min-height — the card hugs its content (the taller
   aside column defines the height), so login / register / lost-password states
   each size the modal to their own content. */
.dc-auth .dc-auth__card { display:grid; grid-template-columns:minmax(0,340px) 1fr; background:var(--dc-white); }
.dc-auth .dc-auth__aside { background:var(--dc-lavender); padding:40px 32px; display:flex; flex-direction:column; gap:16px; }
.dc-auth .dc-auth__main { position:relative; padding:40px 40px 32px; display:flex; flex-direction:column; }

/* Aside content. eyebrow is INTENTIONALLY uppercase + tracked (matches Figma). */
.dc-auth .dc-auth__eyebrow { font-family:var(--dc-font-display); font-weight:500; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--dc-grad-to); margin:0; }
.dc-auth .dc-auth__aside-title { font-size:24px; line-height:1.2; font-weight:700; letter-spacing:normal; text-transform:none; margin:4px 0 8px; color:var(--dc-ink); }
.dc-auth .dc-auth__lede { font-size:15px; line-height:1.5; letter-spacing:normal; text-transform:none; color:var(--dc-muted); margin:0; }
.dc-auth .dc-auth__note { font-size:13px; line-height:1.5; letter-spacing:normal; text-transform:none; color:var(--dc-muted); margin-top:auto; }

/* Links — beat `.modal-body a` (white, no underline). (0,2,1) */
.dc-auth .dc-auth__card a { color:var(--dc-grad-to); text-decoration:underline; text-transform:none; font-weight:inherit; }
.dc-auth .dc-auth__card a:hover,
.dc-auth .dc-auth__card a:focus { color:var(--dc-grad-to); text-decoration:underline; }

/* Bullets */
.dc-auth .dc-bullets { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.dc-auth .dc-bullet { position:relative; padding-left:28px; font-size:14px; line-height:1.45; letter-spacing:normal; text-transform:none; }
.dc-auth .dc-bullets.is-check .dc-bullet::before { content:""; position:absolute; left:0; top:.15em; width:18px; height:18px;
  background:var(--dc-grad-to); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.2 11.3 3 8.1l1.1-1.1 2.1 2.1 5-5L12.3 5z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.2 11.3 3 8.1l1.1-1.1 2.1 2.1 5-5L12.3 5z'/></svg>") center/contain no-repeat; }
.dc-auth .dc-bullets.is-numbered { counter-reset:dcstep; }
.dc-auth .dc-bullets.is-numbered .dc-bullet { counter-increment:dcstep; }
.dc-auth .dc-bullets.is-numbered .dc-bullet::before { content:counter(dcstep); position:absolute; left:0; top:0; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff;
  background:var(--dc-grad-to); border-radius:50%; }

/* Right panel: title + close. close neutralizes `.modal-body button` (uppercase,
   213px min-width, 63px height). (0,2,0) */
.dc-auth .dc-auth__close { position:absolute; top:16px; right:16px; width:40px; height:40px; min-width:0; line-height:normal;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--dc-muted); background:none; border:0;
  padding:0; text-transform:none; font-weight:400; border-radius:0; }
.dc-auth .dc-auth__title { font-size:32px; line-height:1.15; font-weight:700; letter-spacing:normal; text-transform:none; color:var(--dc-ink); margin:0; }
.dc-auth .dc-auth__subtitle { font-size:15px; color:var(--dc-muted); letter-spacing:normal; text-transform:none; margin:4px 0 24px; }

/* Fields. Labels beat `.modal-body label` (blue #3D7FDF, weight 400). (0,2,0) */
.dc-auth .dc-field { margin-bottom:16px; }
.dc-auth .dc-field__label { display:block; font-size:14px; font-weight:500; color:var(--dc-ink); letter-spacing:normal; text-transform:none; margin-bottom:6px; }
.dc-auth .dc-field__input { width:100%; min-height:48px; height:auto; padding:8px 16px; font:inherit; font-size:15px; line-height:1.5; color:var(--dc-ink); text-transform:none; letter-spacing:normal;
  background:var(--dc-white); border:1px solid var(--dc-line); border-radius:var(--dc-radius-input); box-shadow:none; }
.dc-auth .dc-field__input::placeholder { font-size:15px; color:#a6a6b8; }
.dc-auth .dc-field__input:focus { outline:0; border-color:var(--dc-grad-to); box-shadow:0 0 0 3px rgba(9,0,205,.12); }
.dc-auth .dc-field__error { display:none; margin-top:6px; font-size:13px; color:var(--dc-error); }
.dc-auth .dc-field.has-error .dc-field__input { border-color:var(--dc-error); }
.dc-auth .dc-field.has-error .dc-field__error { display:block; }

/* Legacy ajaxRPC validation output. Forms that don't go through the
   .dc-field__error bridge (e.g. the lost-password fpass form) render errors as
   `<span class="message required">` / `.requiredMsg` after the input — legacy
   CSS leaves these serif/dark/centered. Normalize them to the redesign error
   look (sans handled by the !important font rule above). */
.dc-auth .message.required,
.dc-auth .requiredMsg { display:block; margin-top:6px; font-size:13px; font-weight:400; line-height:1.4;
  letter-spacing:normal; text-align:left; color:var(--dc-error); }
/* The fpass "success" message reuses the same span mechanism (#req_fsuccess) and
   duplicates the static .dc-reset__help guidance — suppress the duplicate. */
.dc-auth #req_fsuccess { display:none !important; }

/* Input with a trailing icon-button (password-reset: the arrow is integrated in
   the field, not a separate button). The button is a <button> so it is hit by
   `.modal-body button` (uppercase/213px/63px) — neutralized here. (0,2,0+) */
.dc-auth .dc-input-group { position:relative; }
.dc-auth .dc-input-group .dc-field__input { padding-right:48px; }
.dc-auth .dc-input-btn { position:absolute; right:6px; top:0; bottom:0; width:40px; min-width:0; height:auto; line-height:normal;
  display:flex; align-items:center; justify-content:center; padding:0; margin:0; background:none; border:0; border-radius:0;
  text-transform:none; color:var(--dc-ink); cursor:pointer; }
.dc-auth .dc-input-btn .cnnctr-icon { font-size:20px; }
.dc-auth .dc-input-btn:hover,
.dc-auth .dc-input-btn:focus { color:var(--dc-grad-to); }

/* Checkbox.
   The legacy modals.css/style.css use the `input[type=checkbox]:not(old)` pattern
   (opacity:0 + a sprite on the sibling `+ label`). Our markup nests the input
   inside the label with no sibling, so we must restore a real, native checkbox
   here — hence the higher-specificity reset (beats the legacy rules). The label
   itself also neutralizes `.modal-body label` (blue/400). */
.dc-auth .dc-checkbox { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--dc-ink); font-weight:400; letter-spacing:normal; text-transform:none; margin:8px 0 20px; cursor:pointer; }
.dc-auth .dc-checkbox input[type="checkbox"] {
  -webkit-appearance:auto; appearance:auto;
  float:none; opacity:1; position:static;
  width:18px; height:18px; min-width:18px; margin:0; padding:0;
  accent-color:var(--dc-grad-to); cursor:pointer;
}

/* Lost-password reveal. Toggled by toggleForgottenPasswordForm() (jQuery .toggle()
   on .lostpassword_content_wrapper), which overrides this display:none base. */
.dc-auth .dc-reset { display:none; margin:4px 0 16px; }
.dc-auth .dc-reset__help { font-size:13px; color:var(--dc-muted); margin-top:6px; }
.dc-auth .dc-auth__row { display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* Link-style button (Lost password?, etc.). The element is a <button>, so it is
   hit by `.modal-body button` (uppercase, 213px wide, 63px tall, centered, 700).
   Neutralize the lot back to a small inline text link. (0,2,0) */
.dc-auth .dc-link-btn { display:inline; min-width:0; width:auto; height:auto; line-height:normal; padding:0; margin:0;
  background:none; border:0; border-radius:0; text-align:left; font:inherit; font-size:13px; font-weight:400; text-transform:none;
  color:var(--dc-muted); text-decoration:none; cursor:pointer; }
.dc-auth .dc-link-btn:hover,
.dc-auth .dc-link-btn:focus { color:var(--dc-ink); text-decoration:underline; }

/* Gradient button + arrow (exact replica of connecterapp.com).
   The login submit is an <input type="button">, hit by `.modal-body
   input[type="button"]` (0,2,1: square, 63px, 213px, uppercase). The wrapper
   descendant lifts these to (0,3,0) so they win, plus explicit neutralizers.
   The reset button is an <a>, so text-decoration:none is required (it would
   otherwise inherit the .dc-auth__card a underline). */
/* Block wrap + width:100% so the pill fills the form column; the arrow ring sits
   in the 45px left margin (absolutely positioned at left:-45px). */
.dc-auth .dc-btn-wrap { position:relative; margin-left:45px; margin-top:20px; display:block; }
.dc-auth .dc-btn-wrap .dc-btn { z-index:2; position:relative; display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center; text-transform:none; text-decoration:none; letter-spacing:normal; background-color:transparent; background-image:var(--dc-btn-gradient);
  border:0; border-radius:var(--dc-radius-pill); padding:12px 24px; margin:0; font:inherit; font-size:15px; font-weight:400; line-height:normal;
  height:auto; width:100%; min-width:0; cursor:pointer; }
.dc-auth .dc-btn-wrap .dc-btn:hover,
.dc-auth .dc-btn-wrap .dc-btn:focus { text-decoration:none; color:#fff; }
.dc-auth .dc-btn-wrap .dc-btn[disabled] { opacity:.5; cursor:default; }
.dc-auth .dc-btn__arrow { z-index:1; position:absolute; top:0; left:-45px; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; border:1.5px solid var(--dc-indigo-deep);
  border-radius:50%; transition:all .3s; color:var(--dc-indigo-deep); }
.dc-auth .dc-btn-wrap:hover .dc-btn__arrow { transform:rotate(45deg); }

/* Footer toggle (centered, matches Figma) */
.dc-auth .dc-auth__footer { margin-top:auto; padding-top:24px; font-size:14px; text-align:center; letter-spacing:normal; text-transform:none; color:var(--dc-muted); }

/* Variant visibility (both blocks rendered; CSS shows the active one) */
.dc-auth.dc-auth--free  .dc-variant-trial { display:none; }
.dc-auth.dc-auth--trial .dc-variant-free  { display:none; }

/* Responsive: stack, info panel above the form. Selectors mirror the elevated
   base specificity above so these still win inside the media query. */
@media (max-width:768px){
  .dc-auth .modal-dialog{ width:96%; margin:3vh auto; }
  .dc-auth .dc-auth__card{ grid-template-columns:1fr; min-height:0; }
  .dc-auth .dc-auth__aside{ padding:28px 24px; }
  .dc-auth .dc-auth__main{ padding:28px 24px; }
  .dc-auth .dc-btn-wrap{ display:block; margin-left:0; }
  .dc-auth .dc-btn-wrap .dc-btn{ width:100%; }
  .dc-auth .dc-btn__arrow{ display:none; }
}