/**
 * Listing, spec and lead-form styles.
 *
 * EVERY COLOUR IS A THEME CUSTOM PROPERTY, with a hard fallback. The theme
 * defines --ink, --brand, --line and the rest in _design-system.css; reading
 * them means a brand change there reaches these components without anybody
 * remembering this file exists. The fallbacks are the September 2026 values,
 * so the plugin still renders sanely if it is ever activated under a different
 * theme.
 *
 * Tables carry almost no rules: the theme's `.prose-credsir table` already
 * styles a plain <table>, and a listing has to be indistinguishable from a
 * table an editor typed. What is here is only what the theme has no opinion on.
 */

/* ---------------- listing furniture ---------------- */

.credsir-sortline {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-4, #97a1ae);
  margin: 0 0 0.5em;
}

.credsir-listing .credsir-sub {
  display: block;
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-4, #97a1ae);
  font-variant-numeric: tabular-nums;
}

.credsir-listing .credsir-unit {
  color: var(--ink-4, #97a1ae);
  font-weight: 400;
  font-size: 0.85em;
}

/* An absent value says so. A blank cell reads as zero, and on a fee column
   that is the difference between "free" and "nobody has checked". */
.credsir-unset {
  color: var(--ink-4, #97a1ae);
}

.credsir-chip {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border: 1px solid var(--line, #e2e4e9);
  border-radius: 999px;
  background: var(--bg-2, #f7f8fa);
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3, #6b7684);
}

.credsir-tag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--brand-200, #cfcafb);
  border-radius: 999px;
  background: var(--bg, #fff);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--brand-800, #382b9e);
}

/* ---------------- the apply control ---------------- */

.credsir-apply {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--brand, #4335c4);
  border-radius: var(--radius-sm, 8px);
  background: var(--brand, #4335c4);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.credsir-apply:hover,
.credsir-apply:focus-visible {
  background: var(--brand-800, #382b9e);
  border-color: var(--brand-800, #382b9e);
  color: #fff;
  text-decoration: none;
}

.credsir-apply--ghost {
  background: var(--bg, #fff);
  border-color: var(--brand-200, #cfcafb);
  color: var(--brand, #4335c4);
}

.credsir-apply--ghost:hover {
  background: var(--brand-tint, #f3f1fe);
  border-color: var(--brand-200, #cfcafb);
  color: var(--brand-ink, #2c2185);
}

/* ---------------- provenance ---------------- */

.credsir-prov {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line, #e2e4e9);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-2, #f7f8fa);
}

.credsir-prov__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--accent, #b45309);
}

.credsir-prov__label,
.credsir-prov__detail,
.credsir-prov__link {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.credsir-prov__label {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #b45309);
  margin-right: -6px;
}

.credsir-prov__detail { color: var(--ink-3, #6b7684); }
.credsir-prov__link   { margin-left: auto; color: var(--brand, #4335c4); }

.credsir-prov--pos .credsir-prov__dot   { background: var(--pos, #0f766e); }
.credsir-prov--pos .credsir-prov__label { color: var(--pos, #0f766e); }

.credsir-prov--neg { background: var(--neg-tint, #fef3f2); border-color: #f3c9c4; }
.credsir-prov--neg .credsir-prov__dot   { background: var(--neg, #b42318); }
.credsir-prov--neg .credsir-prov__label { color: var(--neg, #b42318); }

.credsir-prov--muted .credsir-prov__dot   { background: var(--ink-3, #6b7684); }
.credsir-prov--muted .credsir-prov__label { color: var(--ink-3, #6b7684); }

.credsir-disclosure {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3, #6b7684);
}

/* Only editors see this: a reader gets nothing rather than an apology. */
.credsir-empty {
  padding: 12px 14px;
  border: 1px dashed var(--neg, #b42318);
  border-radius: var(--radius-sm, 8px);
  background: var(--neg-tint, #fef3f2);
  font-size: 13px;
  color: var(--ink-2, #3d4654);
}

/* ---------------- card spec panel ---------------- */

.credsir-spec {
  border: 1px solid var(--line, #e2e4e9);
  border-radius: var(--radius, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 3px rgb(13 17 23 / 0.08));
  margin: 1.4em 0;
}

.credsir-spec__head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--brand-tint, #f3f1fe);
  border-bottom: 1px solid var(--line, #e2e4e9);
}

.credsir-spec__art    { flex: none; width: 108px; height: auto; border-radius: var(--radius-sm, 8px); }
.credsir-spec__id     { flex-grow: 1; min-width: 0; }
.credsir-spec__issuer {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3, #6b7684);
}
.credsir-spec__name {
  font-size: 19px; font-weight: 700; letter-spacing: -0.018em;
  line-height: 1.2; color: var(--ink, #0d1117); margin-top: 2px;
}
.credsir-spec__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.credsir-spec__rating { flex: none; text-align: right; }
.credsir-spec__score  {
  font-size: 28px; font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--brand, #4335c4);
  font-variant-numeric: tabular-nums;
}
.credsir-spec__outof,
.credsir-spec__rating a {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11.5px; color: var(--ink-3, #6b7684); display: block; margin-top: 2px;
}

.credsir-spec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-bottom: 1px solid var(--line, #e2e4e9);
}
.credsir-spec__cell  { padding: 14px 20px; border-right: 1px solid var(--line, #e2e4e9); }
.credsir-spec__label {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3, #6b7684);
}
.credsir-spec__value {
  font-size: 17px; font-weight: 650; color: var(--ink, #0d1117);
  margin-top: 3px; font-variant-numeric: tabular-nums;
}
.credsir-spec__note { font-size: 12px; color: var(--ink-3, #6b7684); line-height: 1.35; margin-top: 2px; }

.credsir-spec__waiver {
  display: flex; gap: 10px; align-items: baseline;
  padding: 12px 20px; background: var(--amber-100, #fdf3e7);
  border-bottom: 1px solid var(--line, #e2e4e9);
  font-size: 14px; color: var(--ink-2, #3d4654);
}
.credsir-spec__waiver .credsir-spec__label { color: var(--accent, #b45309); flex: none; }

.credsir-spec__body { padding: 16px 20px; }
.credsir-spec__body ul { margin: 8px 0 0; padding-left: 1.1em; }
.credsir-spec__body li { font-size: 14px; color: var(--ink-2, #3d4654); line-height: 1.45; }

.credsir-spec .credsir-prov { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.credsir-spec__cta { padding: 14px 20px; }

/* ---------------- lender block ---------------- */

.credsir-lender { border: 1px solid var(--line, #e2e4e9); border-radius: var(--radius, 12px); overflow: hidden; margin: 1.4em 0; }
.credsir-lender__head  { padding: 14px 18px; background: var(--brand-tint, #f3f1fe); border-bottom: 1px solid var(--line, #e2e4e9); }
.credsir-lender__name  { font-size: 16px; font-weight: 700; color: var(--ink, #0d1117); letter-spacing: -0.014em; }
.credsir-lender__count {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11.5px; color: var(--ink-3, #6b7684); margin-top: 2px;
}
.credsir-lender__group { padding: 14px 18px; border-bottom: 1px solid var(--line, #e2e4e9); }
.credsir-lender__list  { list-style: none; margin: 9px 0 0; padding: 0; }
.credsir-lender__list li { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; font-size: 14px; }
.credsir-lender__list li > :first-child { flex-grow: 1; min-width: 0; font-weight: 550; }
.credsir-lender__fig  { font-weight: 600; color: var(--ink, #0d1117); font-variant-numeric: tabular-nums; white-space: nowrap; }
.credsir-lender__unit {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11.5px; color: var(--ink-4, #97a1ae); width: 5.5rem; text-align: right; white-space: nowrap;
}
.credsir-lender .credsir-prov { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }

/* ---------------- the read-more row ---------------- */

/* The expander lives in its own <tr>. The theme's table CSS puts a rule under
   every row; this one carries the product above it, so its own top border is
   removed and the bottom one kept — otherwise each product reads as two rows. */
.credsir-listing .credsir-more-cell {
  padding: 0;
  background: var(--bg, #fff);
}

.credsir-more { display: block; }

.credsir-more__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand, #4335c4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* Safari draws its own triangle unless both of these are set. */
.credsir-more__toggle::-webkit-details-marker { display: none; }
.credsir-more__toggle::marker { content: ""; }

.credsir-more__toggle:hover { color: var(--brand-ink, #2c2185); }
.credsir-more__toggle:focus-visible { outline: 2px solid var(--brand, #4335c4); outline-offset: 2px; border-radius: 4px; }

.credsir-more__caret { transition: transform 0.15s ease; flex: none; }
.credsir-more[open] .credsir-more__caret { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .credsir-more__caret { transition: none; }
}

.credsir-more__panel { padding: 0 12px 14px; }

.credsir-more__inner {
  display: grid;
  /* Two columns where there is room, one where there is not. A fixed
     two-column grid at 390px gives two unreadable 150px columns. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 24px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e2e4e9);
  border-radius: 10px;
  background: var(--bg-2, #f7f8fa);
}

.credsir-more__h {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3, #6b7684);
  margin-bottom: 7px;
}

.credsir-more__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.credsir-more__list li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; line-height: 1.45; color: var(--ink-2, #3d4654);
}
.credsir-more__list svg { flex: none; margin-top: 2px; color: var(--brand, #4335c4); }

.credsir-more__specs { display: flex; flex-direction: column; gap: 6px; }
.credsir-more__spec {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line, #e2e4e9);
  font-size: 13px; color: var(--ink-2, #3d4654);
}
.credsir-more__spec:last-child { border-bottom: 0; padding-bottom: 0; }
.credsir-more__spec b { font-weight: 600; color: var(--ink, #0d1117); font-variant-numeric: tabular-nums; white-space: nowrap; }

.credsir-more__foot {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--line, #e2e4e9);
}
.credsir-more__waiver {
  flex-grow: 1; min-width: 12rem;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-3, #6b7684);
}

/* ---------------- section index ---------------- */

/* Two columns where there is room, one on a phone. Not a bare <ul>: each entry
   carries the child page's own excerpt, and a list marker beside a two-line
   blurb reads as a bullet point rather than a destination. */
.credsir-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2px 28px;
  margin: 1em 0 1.6em;
}

.credsir-index__item {
  padding: 11px 0;
  border-bottom: 1px solid var(--line, #e2e4e9);
  min-width: 0;
}

.credsir-index__title {
  display: block;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--brand, #4335c4);
  text-decoration: none;
  text-wrap: pretty;
}
.credsir-index__title:hover { color: var(--brand-ink, #2c2185); text-decoration: underline; }

.credsir-index__blurb {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3, #6b7684);
  text-wrap: pretty;
}

/* ---------------- key-fact stat ---------------- */

/* The two-cell box at the top of a rate page. Kept visually identical to the
   stored tables it replaces, so a page that swaps one for the other does not
   suddenly look different above the fold. */
.credsir-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  margin: 1.2em 0;
  padding: 13px 16px;
  border: 1px solid var(--line, #e2e4e9);
  border-radius: var(--radius, 12px);
  background: var(--bg-2, #f7f8fa);
}

.credsir-stat__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2, #3d4654);
}

.credsir-stat__value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink, #0d1117);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------- the lead dialog ---------------- */

.credsir-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-2, #d0d4dc);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-lg, 0 16px 40px -12px rgb(13 17 23 / 0.18));
  color: var(--ink, #0d1117);
  background: var(--bg, #fff);
  font-size: 15px;
  line-height: 1.6;
}
.credsir-dialog::backdrop { background: rgb(13 17 23 / 0.45); }

.credsir-lead__head {
  display: flex; gap: 13px; align-items: center;
  padding: 15px 18px;
  background: var(--brand-tint, #f3f1fe);
  border-bottom: 1px solid var(--line, #e2e4e9);
}
.credsir-lead__head > div:first-child { flex-grow: 1; min-width: 0; }
.credsir-lead__eyebrow {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11px; font-weight: 500; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3, #6b7684);
}
.credsir-lead__product { font-size: 15px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.3; }
.credsir-lead__close {
  flex: none; border: 0; background: none; cursor: pointer;
  color: var(--ink-3, #6b7684); padding: 6px; line-height: 0;
}

.credsir-lead__body { padding: 16px 18px; }

.credsir-lead__elig {
  margin: 0 0 14px;
  padding: 11px 13px;
  background: var(--amber-100, #fdf3e7);
  border-radius: var(--radius-sm, 8px);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2, #3d4654);
}
.credsir-lead__elig strong { color: var(--ink, #0d1117); font-weight: 650; }

.credsir-lead__grid { display: flex; flex-direction: column; gap: 13px; }

.credsir-field { display: block; }
.credsir-field > span:first-child {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2, #3d4654); margin-bottom: 4px;
}
.credsir-field input,
.credsir-field select {
  width: 100%;
  box-sizing: border-box;
  /* 44px is the floor for a touch target; a 32px input on a phone is a miss. */
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--line-2, #d0d4dc);
  border-radius: var(--radius-sm, 8px);
  font: inherit;
  font-size: 14.5px;
  color: var(--ink, #0d1117);
  background: var(--bg, #fff);
}
.credsir-field input:focus-visible,
.credsir-field select:focus-visible { outline: 2px solid var(--brand, #4335c4); outline-offset: 1px; }

.credsir-field__prefixed { display: flex; align-items: stretch; }
.credsir-field__prefix {
  display: inline-flex; align-items: center; padding: 0 11px;
  border: 1px solid var(--line-2, #d0d4dc); border-right: 0;
  border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
  background: var(--bg-2, #f7f8fa); color: var(--ink-3, #6b7684);
  font-size: 14.5px; font-variant-numeric: tabular-nums;
}
.credsir-field__prefixed input { border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0; }

.credsir-field em,
.credsir-lead__error {
  display: block; font-style: normal; font-size: 12px;
  color: var(--neg, #b42318); margin-top: 4px;
}
.credsir-field em:empty,
.credsir-lead__error:empty { display: none; }

.credsir-field--bad input,
.credsir-field--bad select { border-color: var(--neg, #b42318); }

.credsir-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 13px; padding: 12px;
  border: 1px solid var(--line, #e2e4e9);
  border-radius: var(--radius-sm, 8px);
  background: var(--bg-2, #f7f8fa);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2, #3d4654);
}
.credsir-consent input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--brand, #4335c4); }
.credsir-consent strong { color: var(--ink, #0d1117); font-weight: 650; }

.credsir-lead__submit {
  width: 100%; min-height: 48px; margin-top: 13px; padding: 13px;
  border: 0; border-radius: var(--radius-sm, 8px);
  background: var(--brand, #4335c4); color: #fff;
  font: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
}
.credsir-lead__submit:hover { background: var(--brand-800, #382b9e); }
.credsir-lead__submit[disabled] { opacity: 0.6; cursor: progress; }

.credsir-lead__fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3, #6b7684); }

/* Off-screen rather than display:none — some autofill implementations skip
   hidden inputs, and some bots check for exactly that. */
.credsir-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.credsir-lead__done { padding: 26px 22px; }
.credsir-lead__donehead {
  display: flex; align-items: center; gap: 11px; margin-bottom: 13px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.016em; color: var(--ink, #0d1117);
}
.credsir-lead__donehead svg {
  flex: none; width: 34px; height: 34px; padding: 8px; box-sizing: border-box;
  border-radius: 50%; background: var(--cat-lime-tint, #e3f6ec); color: var(--pos, #0f766e);
}
.credsir-lead__done p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-2, #3d4654); }
.credsir-lead__receipt { margin: 0; border: 1px solid var(--line, #e2e4e9); border-radius: var(--radius-sm, 8px); overflow: hidden; }
.credsir-lead__receipt > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 13px; border-bottom: 1px solid var(--line, #e2e4e9);
}
.credsir-lead__receipt > div:last-child { border-bottom: 0; }
.credsir-lead__receipt dt {
  font-family: var(--font-mono-var, "IBM Plex Mono"), ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3, #6b7684);
}
.credsir-lead__receipt dd {
  margin: 0; font-size: 13px; font-weight: 600;
  color: var(--ink, #0d1117); font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
  .credsir-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
}