/* CDexplorer control kit — D-03.
   One primary (filled gold pill), one secondary (outlined pill), one tertiary (text).
   Sentence-case verb/object labels; no uppercase tracking on controls (eyebrows keep it).
   48 px default, 36 px compact (.cta-sm) for table rows and toolbars, 32 px dense (.cta-xs) for the desk.
   Legacy button classes are adapted below so pages need no markup churn; new markup uses .cta classes.
   Loaded after tokens.css on every page. docs/design-tokens.md */

/* ---------- base ---------- */
html .cta,
html .btn-buy, html .btn-sold, html .btn-scenario, html .btn-buy-restricted,
html .bt-btn-continue, html .bt-btn-back, html .bt-btn-submit,
html .btn-submit-ioi, html .btn-confirm, html .btn-cancel-confirm,
html .calc-run, html .calc-buy-btn, html .blotter-buy-all, html .blotter-buy-one,
html .tool-run, html .tool-launch, html .mat-roll-btn, html .mat-open-btn, html .otl-btn,
html #chart-tooltip .tooltip-buy-btn, html .filter-reset, html .port-refresh-btn,
html .nav-signout, html .nav-about-btn,
html .btn-sm, html .btn-full, html .at-btn-approve, html .at-btn-reject, html .atc-btn-save,
html #atc-banner .atc-banner-resume, html .ob-buy-btn,
html .btn-primary, html .btn-secondary, html .card .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  box-sizing: border-box; min-height: 48px; padding: 0 24px; margin: 0;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
html .cta:active:not(:disabled), html .btn-buy:active:not(:disabled), html .btn-scenario:active,
html .bt-btn-continue:active:not(:disabled), html .btn-submit-ioi:active, html .btn-confirm:active,
html .calc-run:active, html .calc-buy-btn:active, html .blotter-buy-all:active:not(:disabled),
html .blotter-buy-one:active, html .tool-run:active, html .tool-launch:active, html .mat-roll-btn:active,
html .mat-open-btn:active, html .otl-btn:active, html .btn-sm:active:not(:disabled), html .btn-full:active:not(:disabled),
html .at-btn-approve:active, html .at-btn-reject:active, html .atc-btn-save:active, html .ob-buy-btn:active,
html .btn-primary:active, html .btn-secondary:active, html .card .btn:active {
  transform: translateY(1px) scale(.985);
}
html .cta:focus-visible, html .btn-buy:focus-visible, html .btn-scenario:focus-visible,
html .bt-btn-continue:focus-visible, html .bt-btn-back:focus-visible, html .btn-submit-ioi:focus-visible,
html .btn-confirm:focus-visible, html .btn-cancel-confirm:focus-visible, html .calc-run:focus-visible,
html .calc-buy-btn:focus-visible, html .blotter-buy-all:focus-visible, html .blotter-buy-one:focus-visible,
html .tool-run:focus-visible, html .tool-launch:focus-visible, html .mat-roll-btn:focus-visible,
html .mat-open-btn:focus-visible, html .otl-btn:focus-visible, html .btn-sm:focus-visible, html .btn-full:focus-visible,
html .at-btn-approve:focus-visible, html .at-btn-reject:focus-visible, html .atc-btn-save:focus-visible,
html .ob-buy-btn:focus-visible, html .btn-primary:focus-visible, html .btn-secondary:focus-visible,
html .card .btn:focus-visible, html .filter-reset:focus-visible, html .nav-signout:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--surface-0), 0 0 0 5px var(--gold);
}
html .cta:disabled, html .cta.is-disabled,
html .btn-buy:disabled, html .bt-btn-continue:disabled, html .btn-submit-ioi:disabled, html .btn-confirm:disabled,
html .calc-run:disabled, html .calc-buy-btn:disabled, html .blotter-buy-all:disabled, html .btn-sm:disabled,
html .btn-full:disabled, html .at-btn-approve:disabled, html .atc-btn-save:disabled, html .card .btn:disabled {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ---------- primary: filled gold pill ---------- */
html .cta.cta-primary,
html .btn-buy, html .bt-btn-continue, html .bt-btn-submit, html .btn-submit-ioi, html .btn-confirm,
html .calc-run, html .calc-buy-btn, html .blotter-buy-all, html .tool-run, html .tool-launch, html .mat-roll-btn,
html #chart-tooltip .tooltip-buy-btn,
html .btn-full, html .at-btn-approve, html .atc-btn-save, html #atc-banner .atc-banner-resume, html .ob-buy-btn,
html .btn-primary, html .card .btn {
  background: var(--gold); color: var(--text-on-accent); border-color: var(--gold-deep);
}
html .cta.cta-primary:hover:not(:disabled),
html .btn-buy:hover:not(:disabled), html .bt-btn-continue:hover:not(:disabled), html .bt-btn-submit:hover, html .btn-submit-ioi:hover:not(:disabled),
html .btn-confirm:hover:not(:disabled), html .calc-run:hover:not(:disabled), html .calc-buy-btn:hover:not(:disabled),
html .blotter-buy-all:hover:not(:disabled), html .tool-run:hover, html .tool-launch:hover, html .mat-roll-btn:hover,
html #chart-tooltip .tooltip-buy-btn:hover,
html .btn-full:hover:not(:disabled), html .at-btn-approve:hover, html .atc-btn-save:hover, html #atc-banner .atc-banner-resume:hover,
html .ob-buy-btn:hover, html .btn-primary:hover, html .card .btn:hover:not(:disabled) {
  background: var(--gold-light); border-color: var(--gold); color: var(--text-on-accent);
}

/* ---------- secondary: outlined pill ---------- */
html .cta.cta-secondary,
html .btn-sold, html .btn-cancel-confirm, html .otl-btn, html .nav-signout, html .port-refresh-btn,
html .btn-sm, html .btn-secondary {
  background: transparent; color: var(--text-hi); border-color: var(--text-4);
}
html .cta.cta-secondary:hover:not(:disabled),
html .btn-cancel-confirm:hover, html .otl-btn:hover, html .nav-signout:hover, html .port-refresh-btn:hover,
html .btn-sm:hover:not(:disabled), html .btn-secondary:hover {
  background: var(--surface-3); border-color: var(--text-2); color: var(--text-hi);
}
/* secondary, gold accent */
html .cta.cta-secondary.cta-gold,
html .btn-scenario, html .blotter-buy-one, html .mat-open-btn, html .btn-sm.gold {
  background: transparent; color: var(--gold); border-color: var(--gold);
}
html .cta.cta-secondary.cta-gold:hover:not(:disabled),
html .btn-scenario:hover, html .blotter-buy-one:hover, html .mat-open-btn:hover, html .btn-sm.gold:hover:not(:disabled) {
  background: var(--gold-glow); color: var(--gold); border-color: var(--gold);
}
/* secondary, danger */
html .cta.cta-secondary.cta-danger, html .btn-sm.danger, html .at-btn-reject {
  background: transparent; color: var(--danger); border-color: var(--danger);
}
html .cta.cta-secondary.cta-danger:hover:not(:disabled), html .btn-sm.danger:hover:not(:disabled), html .at-btn-reject:hover {
  background: var(--danger-tint-1); color: var(--danger); border-color: var(--danger);
}
/* states that read as secondary */
html .btn-sold, html .btn-buy-restricted { color: var(--text-4); border-color: var(--line-3); cursor: not-allowed; }
html .blotter-buy-one.done { color: var(--success); border-color: var(--success); }

/* ---------- tertiary: text ---------- */
html .cta.cta-tertiary, html .bt-btn-back, html .filter-reset, html .nav-about-btn {
  background: transparent; color: var(--gold); border-color: transparent; padding: 0 12px;
}
html .cta.cta-tertiary:hover:not(:disabled), html .bt-btn-back:hover, html .filter-reset:hover, html .nav-about-btn:hover {
  background: var(--gold-glow); color: var(--gold);
}

/* ---------- sizes ---------- */
html .cta.cta-sm,
html .btn-buy, html .btn-sold, html .btn-scenario, html .blotter-buy-one, html .mat-roll-btn, html .mat-open-btn,
html .otl-btn, html #chart-tooltip .tooltip-buy-btn, html .filter-reset, html .port-refresh-btn, html .nav-signout,
html .nav-about-btn, html .at-btn-reject, html #atc-banner .atc-banner-resume {
  min-height: 36px; padding: 0 16px; font-size: 14px;
}
html .cta.cta-xs, html .btn-sm, html .ob-buy-btn {
  min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600;
}
html .cta.cta-tertiary.cta-sm, html .filter-reset, html .nav-about-btn { padding: 0 10px; }
html .cta.cta-block, html .calc-run, html .btn-full, html .card .btn, html .bt-btn-submit { display: flex; width: 100%; }

/* ---------- dense grids keep rows tidy ---------- */
html .offerings-table .btn-buy, html .offerings-table .btn-sold, html .offerings-table .btn-scenario { min-height: 32px; padding: 0 14px; font-size: 13px; }

/* ======================================================================
   D-05 chips — one spec for every status / attribute chip in a grid.
   Uppercase small-caps by decision; shape and colour come from tokens.
   Semantics: jade = good / insured / filled, amber = attention / callable /
   pending, red = cancelled / halted, gold = brand attribute (rating, note).
   ====================================================================== */
.chip, .type-badge, .call-badge, .fdic-badge, .rating-badge, .status-badge {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 20px; padding: 0 8px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; vertical-align: middle;
  border: 1px solid var(--line-3); border-radius: var(--radius-2);
  color: var(--text-3); background: transparent;
}
.chip-neutral, .type-badge.CD, .call-badge.noncall { border-color: var(--line-3); color: var(--text-3); }
.chip-gold, .type-badge.Note, .rating-badge { border-color: var(--gold); color: var(--gold); background: var(--gold-tint-1); }
.chip-jade, .fdic-badge, .status-badge.FILLED, .status-badge.filled, .status-badge.SETTLED, .status-badge.settled { border-color: var(--jade); color: var(--jade); background: var(--jade-tint-1); }
.chip-amber, .call-badge.callable, .status-badge.PENDING, .status-badge.pending { border-color: var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.chip-red, .status-badge.CANCELLED, .status-badge.cancelled, .status-badge.CANCELED, .status-badge.canceled { border-color: var(--danger); color: var(--danger); background: var(--danger-tint-1); }
.fdic-badge, .rating-badge, .type-badge, .call-badge.callable { cursor: pointer; }
.fdic-badge:hover, .rating-badge:hover, .type-badge:hover, .call-badge.callable:hover { filter: brightness(1.15); }
[data-theme="light"] .chip-gold, [data-theme="light"] .type-badge.Note, [data-theme="light"] .rating-badge { color: var(--gold-deep); border-color: var(--gold-deep); }