/* =============================================================================
   Plutus Analytics �?MBS Section Styles
   ---------------------------------------------------------------------------
   MBS-specific section card styles. To modify MBS section appearance, edit
   ONLY this file (values come from theme.css tokens).
   ========================================================================== */

/* --- MBS Section Card (collapsible) --------------------------------------- */
.mbs-section-card {
  border: 1px solid var(--tk-section-border);
  border-radius: var(--tk-section-radius);
  background: var(--tk-section-bg);
  margin-bottom: var(--tk-section-gap, 16px);
  overflow: hidden;
}

/* --- MBS Section Header --------------------------------------------------- */
.mbs-section-card .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  background: var(--tk-primary-soft);
  cursor: pointer;
  color: var(--tk-text-strong);
  font-family: var(--tk-font-header);
  font-size: 1.05rem;
  font-weight: 700;
}

.mbs-section-card .card-header .toggle-icon {
  margin-left: auto;
  color: var(--tk-text-muted);
  font-size: 0.9rem;
}

/* section-level action buttons (Add Shock / Load a Saved Trade) align right */
.mbs-section-card .card-header .pt-card-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mbs-section-card .card-header .pt-card-actions .toggle-icon { margin-left: 0; }
.mbs-section-card .card-header #loadTrade { margin-left: auto; }
.mbs-section-card .card-header#cardHeader .toggle-icon { margin-left: 0; }

/* --- MBS Section Number in Header ----------------------------------------- */
.mbs-section-card .card-header .pt-section-num {
  margin-right: 4px;
}

/* --- MBS Section Body ----------------------------------------------------- */
.mbs-section-card .card-body {
  padding: 18px 18px;
}

/* --- MBS Form Layout (row-based) ------------------------------------------ */
.mbs-section-card .form-group.row {
  margin-bottom: 12px;
}
.mbs-section-card .form-group.row:last-child {
  margin-bottom: 0;
}

/* --- MBS Bottom Action Bar (notify + Reset + Run Analysis) ---------------- */
.pt-mbs-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--tk-border);
}
.pt-mbs-actions-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* --- MBS single-page form layout ------------------------------------------ */
/* Section 1: two-column (market fields left, pool fields right) */
.pt-mbs-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px 34px;
  align-items: start;
}
@media (max-width: 1100px) { .pt-mbs-2col { grid-template-columns: 1fr; } }
/* inside the two columns, fields stack vertically */
.pt-mbs-2col .pt-fields-grid { grid-template-columns: 1fr; }

/* MBS form fields: label on the left, control on the right (as the design) */
.mbs-section-card .pt-field {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
}
.mbs-section-card .pt-field > .pt-field-label { grid-column: 1; margin: 0; }
.mbs-section-card .pt-field > :not(.pt-field-label) { grid-column: 2; }
/* a field with no label: its control starts at the far left and uses the full width */
.mbs-section-card .pt-field.pt-field--full { grid-template-columns: minmax(0, 1fr); }
.mbs-section-card .pt-field.pt-field--full > * { grid-column: 1; }

/* Tighter label column + shorter inputs on specific cards:
   #2 MBS Attributes, #3 ARM, #4 Percentage, #7 Analytics */
#collapseAttributes .pt-field,
#collapsePercentage .pt-field { grid-template-columns: 100px minmax(0, 150px); gap: 4px 8px; }
/* "Primary Residence(%)" is long: give just that field a wider label column */
#collapsePercentage .pt-field.pt-field--wide-label { grid-template-columns: 155px minmax(0, 150px); }
#collapsePercentage .pt-field.pt-field--wide-label > .pt-field-label { white-space: nowrap; }
#collapseARM .pt-field { grid-template-columns: 240px minmax(0, 150px); gap: 4px 8px; }
#collapseAnalytics .pt-field { grid-template-columns: 60px minmax(0, 150px); gap: 4px 8px; }

/* Row breaks inside a single fields grid, so row spacing also comes from `gap` */
.pt-grid-2-2-3 > .pt-field:nth-child(3),
.pt-grid-2-2-3 > .pt-field:nth-child(5),
.pt-grid-2-3-2-1 > .pt-field:nth-child(3),
.pt-grid-2-3-2-1 > .pt-field:nth-child(6),
.pt-grid-2-3-2-1 > .pt-field:nth-child(8) { grid-column-start: 1; }

/* roomier spacing between field groups */
.mbs-section-card .pt-fields-grid { gap: 16px; }

/* stacked field rows within one section (e.g. MBS Attributes 2/2/3) */
.mbs-section-card .card-body > .pt-fields-grid + .pt-fields-grid { margin-top: 20px; }

/* short-label multi-column rows (e.g. State Percentage): label hugs a short control */
.mbs-section-card .pt-cols-4 .pt-field {
  grid-template-columns: max-content minmax(0, 120px);
}

/* A row of input + inline action buttons */
.pt-input-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.pt-input-row > .pt-input,
.pt-input-row > .pt-input-wrap { flex: 1 1 auto; min-width: 0; }
.pt-input-row .pt-btn { flex: 0 0 auto; white-space: nowrap; }
/* CUSIP input + its Load button form one combined control */
.pt-input-row > .pt-input-group { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; }
.pt-input-group > .pt-input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.pt-input-group > .pt-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Give the MBS Screener button the same width as the "Use Custom Yield Curve"
   button below it, so the input/Load group matches the valuation-date input. */
.pt-input-row .pt-btn.pt-mbs-inline-btn {
  flex: 0 0 230px;
  width: 230px;
  white-space: nowrap;
}

/* Custom yield curve chips row — the chips take an equal share of the row so both curves are
   the same width and the Clear button stays on the same line (as in the batch settings card) */
.pt-custom-curve-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.pt-custom-curve-row .pt-custom-curve {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  margin-bottom: 0;
  min-height: 30px;
  padding: 4px 8px;
  line-height: 20px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-custom-curve-row .pt-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.8rem;
}

/* Analytics: security component + calculation mode + risk measures, all on one row.
   Every column has the same structure �?a head (title + optional control) followed by the
   options �?so the option rows line up across the columns. */
.pt-analytics-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: stretch;
}
/* pages without a "Security Component" column (e.g. CMO) */
.pt-analytics-grid--2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 1100px) {
  .pt-analytics-grid { grid-template-columns: 1fr; }
  .pt-analytics-col { padding: 0; }
  .pt-analytics-col + .pt-analytics-col { border-left: none; }
}
/* Single-security pages: one size for every input/select, matching the Price/OAS fields */
.pt-single-form .form-control {
  height: 34px;
  min-height: 34px;
  padding: 4px 10px;
  font-size: 0.9rem;
}
/* `.mbs-section-card .custom-file-label` below sets `height:auto`, so match its specificity.
   `line-height` = height - borders keeps the file name vertically centred in the box. */
.pt-single-form .mbs-section-card .custom-file-label {
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.9rem;
  line-height: 32px;
}
/* Severity has no label (the card header already says it); its input matches the WAC field */
#collapseSeverity .pt-input { max-width: 150px; justify-self: start; }
/* shocks: the "bps" add-on and the remove button must match the input height */
.pt-single-form .input-group-text,
.pt-single-form .input-group .btn {
  height: 34px;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
}
/* the remove button is a small square, not a padded pill */
.pt-single-form .input-group .btn {
  width: 34px;
  padding: 0;
  justify-content: center;
}
/* ...and the buttons in the same rows are the same height */
.pt-single-form .pt-btn {
  height: 34px;
  padding: 0 14px;
  font-size: 0.9rem;
  gap: 6px;
}
.pt-single-form .pt-btn .ph { font-size: 1.1em; }
.pt-single-form .btn-sm {
  height: 34px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
}

/* same base text size as the other section cards (radio/checkbox labels otherwise
   inherit the 16px page default) */
#collapseAnalytics { font-size: 0.9rem; }
.pt-analytics-col { display: flex; flex-direction: column; gap: 12px; padding: 0 30px 0 18px; }
.pt-analytics-col:first-child { padding-left: 0; }
.pt-analytics-col:last-child { padding-right: 0; }
.pt-analytics-col + .pt-analytics-col { border-left: 1px solid var(--tk-border); }

.pt-analytics-head { display: flex; align-items: center; gap: 16px; min-height: 24px; }
.pt-analytics-head .pt-field-label { margin: 0; line-height: 24px; }

/* options: one per row. The row height matches the inputs (40px), so every column has the
   same row pitch and each row's label stays vertically centred with its control. */
.pt-analytics-body {
  display: grid;
  grid-template-columns: max-content;
  grid-auto-rows: 34px;
  align-items: center;
  gap: 6px;
  justify-content: start;
}
/* checkboxes that wrap into rows */
.pt-analytics-body--wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pt-analytics-body--wrap > .custom-control { height: 34px; display: flex; align-items: center; }
/* the box is normally pinned 0.25rem from the top; centre it in the 40px row instead */
.pt-analytics-body--wrap > .custom-control .custom-control-label::before,
.pt-analytics-body--wrap > .custom-control .custom-control-label::after {
  top: calc(50% - 0.5rem);
}
/* calculation mode: the mode and the value it needs share a row */
.pt-analytics-body--calc {
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: 6px 16px;
}
.pt-analytics-body--calc > .pt-calc-mode-row { display: contents; }
/* Calculation Mode: each mode shares a row with the value it needs, so the link between
   the choice and its input is obvious. The input that the selected mode does not use is
   dimmed (but stays editable so the form still posts the same fields). */
.pt-calc-mode-row .pt-field-error { grid-column: 1 / -1; margin-top: 0; }
.pt-calc-mode-row .custom-control-label { white-space: nowrap; }
/* centre the radio circle on its label text */
.pt-calc-mode-row .custom-control { display: inline-flex; align-items: center; min-height: 0; }
.pt-calc-mode-row .custom-control-label::before,
.pt-calc-mode-row .custom-control-label::after { top: 50%; transform: translateY(-50%); }
/* the value label gets a fixed column so "Price" and "OAS" inputs start at the same x */
.pt-calc-mode-input {
  display: grid;
  grid-template-columns: 42px 100px;
  align-items: center;
  gap: 8px;
}
.pt-calc-mode-input .pt-field-label { margin: 0; white-space: nowrap; }
.pt-calc-mode-row.is-inactive .pt-calc-mode-input { opacity: 0.45; }

/* =============================================================================
   Rates Products — Term Structure page
   ========================================================================== */
.pt-ts-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-md);
  background: var(--tk-surface-soft);
}
/* label on the left of its control */
.pt-ts-control {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 260px;
}
.pt-ts-control .pt-field-label { margin: 0; white-space: nowrap; }
.pt-ts-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.75fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1100px) { .pt-ts-grid { grid-template-columns: 1fr; } }
/* left column = statistics + model parameters stacked; right = chart spanning both rows,
   stretched so its height matches the two cards on the left */
@media (min-width: 1101px) {
  .pt-ts-grid > .mbs-section-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .pt-ts-grid > .mbs-section-card:nth-child(2) { grid-column: 1; grid-row: 2; }
  .pt-ts-grid > .mbs-section-card:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
  }
  .pt-ts-grid > .mbs-section-card:nth-child(3) .card-body { flex: 1 1 auto; display: flex; }
}
.pt-ts-stats { display: flex; flex-direction: column; }
.pt-ts-stat {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--tk-border);
}
.pt-ts-stat:last-child { border-bottom: 0; }
.pt-ts-stat span { color: var(--tk-text-muted); }
.pt-ts-stat b { color: var(--tk-text-strong); font-weight: 600; }
.pt-ts-chart { position: relative; flex: 1 1 auto; min-height: 650px; width: 100%; }
.pt-ts-takeaway { margin-top: 20px; }
.pt-ts-takeaway .card-body { display: flex; align-items: flex-start; gap: 14px; }
.pt-ts-takeaway__icon { font-size: 1.6rem; color: var(--tk-accent); }
.pt-ts-takeaway__title { font-weight: 700; color: var(--tk-navy); margin-bottom: 4px; }
.pt-ts-takeaway__text { color: var(--tk-text); }

/* =============================================================================
   Rates Products — single-task input form
   every input lives in ONE card ("Input Parameters"): Model & Market Data on the
   left, Security Terms on the right, Calculation Mode as a full-width row below;
   inside a column the fields stack one per row with the label left / control right
   ========================================================================== */
.pt-input-params { padding: 0; }
/* the header keeps the section background colour (like the MBS cards) */
.pt-input-params .card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--tk-primary-soft);
  border-bottom: 1px solid var(--tk-section-border);
  color: var(--tk-text-strong);
  font-family: var(--tk-font-header);
  font-size: 1.05rem;
  font-weight: 700;
}
.pt-input-params .card-header .pt-section-title { font-size: 1.05rem; }
.pt-input-params .card-header .pt-collapse-btn { margin-left: auto; }
.pt-input-params .pt-input-body { padding: var(--tk-section-padding); }

.pt-input-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 34px;
  align-items: start;
}
.pt-input-col { min-width: 0; }
/* calculation mode sits in its own full-width row under the two columns */
.pt-input-mode {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--tk-section-border);
}
.pt-input-mode__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--tk-section-title-color);
  font-family: var(--tk-font-header);
  font-size: 1rem;
  font-weight: 700;
}
.pt-input-mode__title .ph { color: var(--tk-icon-color); }

.pt-form .pt-fields-grid {
  grid-template-columns: minmax(0, 1fr);   /* one field per row inside a column */
  gap: 16px 18px;
}
.pt-form .pt-field {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);   /* widest label is 165px, so nothing wraps */
  align-items: center;
  gap: 4px 6px;
}
.pt-form .pt-field > .pt-field-label { margin: 0; white-space: nowrap; }
.pt-form .pt-field > .pt-input,
.pt-form .pt-field > .pt-input-wrap { width: 100%; }
/* Rates (fixed income) and ALM single forms: keep the inputs to two thirds of the field width */
.pt-fip-form .pt-field > .pt-input,
.pt-fip-form .pt-field > .pt-input-wrap { width: 66.66%; }
.pt-form .pt-field > .pt-field-error { grid-column: 2; }
/* the "custom yield curve" chip renders under the select, not under the label */
.pt-form .pt-field > .pt-custom-curve { grid-column: 2; margin-top: 0; margin-bottom: 0; }
/* market data order: term structure, yield curve, valuation date, ... */
.pt-market-grid > [data-field="vol_type"] { order: 1; }
.pt-market-grid > [data-field="yield_curve"] { order: 2; }
.pt-market-grid > [data-field="valuation_date"] { order: 3; }
.pt-market-grid > [data-field="settlement_date"] { order: 4; }
.pt-market-grid > [data-field="discounting"] { order: 5; }
.pt-market-grid > [data-field="mbs_type"] { order: 6; }
.pt-market-grid > [data-field="mbs_method"] { order: 7; }
/* a product with no model/market fields uses the full width, two fields per row */
.pt-input-columns--single { grid-template-columns: minmax(0, 1fr); }
.pt-input-columns--single .pt-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .pt-input-columns { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   Rates Products > Bonds — "Bond Lookup" cards
   ========================================================================== */
.pt-bond-lookup { margin-top: 28px; }
.pt-bond-lookup__title {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tk-navy);
}
.pt-bond-lookup__subtitle { margin: 0 0 18px; color: var(--tk-text-muted); }
.pt-bond-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.pt-bond-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px 22px;
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-md);
  /* same background as the section card header */
  background: var(--tk-primary-soft);
  color: var(--tk-text);
  text-align: center;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pt-bond-card:hover {
  border-color: var(--tk-accent);
  box-shadow: var(--tk-shadow-soft);
  color: var(--tk-text);
  text-decoration: none;
}
/* mute the content only, so the card keeps the same background as the others */
.pt-bond-card.is-disabled { cursor: not-allowed; }
.pt-bond-card.is-disabled .pt-bond-card__icon,
.pt-bond-card.is-disabled .pt-bond-card__title,
.pt-bond-card.is-disabled .pt-bond-card__desc,
.pt-bond-card.is-disabled .pt-bond-card__go { opacity: .5; }
.pt-bond-card.is-disabled:hover { border-color: var(--tk-border); box-shadow: none; }
/* two classes so it beats components.css `.ph { font-size: var(--tk-icon-size) }` (1.5rem) */
.pt-bond-card .pt-bond-card__icon { font-size: 2.8rem; color: var(--tk-accent); }
.pt-bond-card__title { font-size: 1.05rem; font-weight: 700; color: var(--tk-navy); }
.pt-bond-card__desc { font-size: 0.92rem; color: var(--tk-text-muted); }
.pt-bond-card__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  /* pushed to the bottom so it lines up across cards with different description lengths */
  margin-top: auto;
  border-radius: 50%;
  background: var(--tk-accent);
  color: var(--tk-surface-solid);
}
.pt-bond-card__go .ph { font-size: 1.05rem; }

/* =============================================================================
   MBS landing (index) page
   ========================================================================== */

/* Sidebar heading ("Securitized Products") */
.pt-sidebar-heading {
  padding: 2px 22px 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tk-text-strong);
}

/* Sidebar top-level category items (icon + normal-case label) */
.pt-sidebar .nav-link.group-title.pt-sidebar-cat {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--tk-text);
  margin-top: 2px;
  min-height: 42px;
  border-radius: var(--tk-radius-sm);
}
.pt-sidebar .nav-link.group-title.pt-sidebar-cat > i {
  width: var(--tk-icon-size-sidebar);
  margin-right: 10px;
  text-align: center;
  color: currentColor;
}
.pt-sidebar .nav-link.group-title.pt-sidebar-cat.active {
  color: var(--tk-primary);
  background: var(--tk-primary-soft);
  box-shadow: inset 3px 0 0 var(--tk-sidebar-active-bar);
}

/* Breadcrumb + tagline (index header) */
.pt-breadcrumb {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tk-text-muted);
}
.pt-page-tagline {
  text-align: right;
  color: var(--tk-navy);
  font-size: 1.3rem;
  line-height: 1.3;
  font-style: italic;
  white-space: nowrap;
}
.pt-page-tagline::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin: 10px 0 0 auto;
  background: var(--tk-gold);
  border-radius: 2px;
}

/* Key capabilities checklist */
.pt-cap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pt-cap-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tk-text);
  font-size: 0.9rem;
  line-height: 1.4;
}
.pt-cap-list li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tk-cap-icon-size);
  height: var(--tk-cap-icon-size);
  border-radius: 50%;
  background: var(--tk-cap-icon-bg);
  color: var(--tk-icon-color);
  font-size: var(--tk-icon-size-cap);
  flex-shrink: 0;
}

/* Hide the floating help card on MBS pages (help is shown inline on the landing) */
.mbs-page .pt-need-help { display: none; }

/* Responsive */
@media (max-width: 1100px) {
  .pt-page-tagline { text-align: left; white-space: normal; }
  .pt-page-tagline::after { margin-left: 0; }
}

/* =============================================================================
   Batch page (MBS �?Multiple Securities)
   ========================================================================== */

/* two-column settings layout with a vertical divider between the columns */
.pt-batch-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: stretch;
}
/* `align-content: start` keeps the rows at their natural height; without it the
   shorter column's auto rows stretch to match the taller column (extra whitespace) */
.pt-batch-2col .pt-fields-grid { grid-template-columns: 1fr; align-content: start; }
.pt-batch-2col > .pt-fields-grid { padding: 0 24px; }
.pt-batch-2col > .pt-fields-grid:first-child { padding-left: 0; }
.pt-batch-2col > .pt-fields-grid:last-child { padding-right: 0; }
.pt-batch-2col > .pt-fields-grid + .pt-fields-grid { border-left: 1px solid var(--tk-border); }
@media (max-width: 1100px) {
  .pt-batch-2col { grid-template-columns: 1fr; }
  .pt-batch-2col > .pt-fields-grid { padding: 0; }
  .pt-batch-2col > .pt-fields-grid + .pt-fields-grid { border-left: none; }
}

/* a row of radios / checkboxes */
.pt-choice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

/* file upload area: fields on the left, sample box on the right. Both grid items are
   top-aligned, so the sample box lines up with the first field (not the input file row). */
.pt-batch-upload {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
.pt-batch-upload-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1100px) { .pt-batch-upload { grid-template-columns: 1fr; } }

/* single pages: the file input takes the free width and its download links sit on the
   right of the same row, boxed like the batch page's */
.pt-file-row {
  display: grid;
  /* the download box has a fixed width, so every file input ends up the same width */
  grid-template-columns: minmax(0, 1fr) 480px;
  align-items: stretch;
  gap: 12px;
}
@media (max-width: 1100px) { .pt-file-row { grid-template-columns: 1fr; } }
.pt-file-row .pt-field-error { grid-column: 1 / -1; margin-top: 0; }
/* keep the box exactly as tall as the input next to it */
.pt-file-row .pt-file-links { height: 34px; padding: 0 12px; }
.pt-file-row .pt-file-links a { line-height: 1; }

/* CUSIP or Pool Attributes: narrower file inputs, with the download link(s) for each file
   on the same row as that file's input */
#collapseUpload .pt-field:not(.pt-field--full) { grid-template-columns: 100px minmax(0, 1fr); }
#collapseUpload .pt-input-row { flex-wrap: wrap; }
/* all the file rows share one grid: label | input | download links. The input column is
   the same for every row, so the inputs match �?the narrowest (widest link set) wins. */
.pt-file-rows {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) max-content;
  align-items: stretch;
  gap: 18px 12px;
}
.pt-file-rows .pt-field,
.pt-file-rows .pt-field > .pt-input-row { display: contents; }
/* explicit columns, otherwise `.mbs-section-card .pt-field > :not(.pt-field-label)`
   (grid-column: 2) puts the download box under the input instead of beside it */
.pt-file-rows .pt-field > .pt-field-label { grid-column: 1; }
.pt-file-rows .pt-field .custom-file { grid-column: 2; width: 100%; }
.pt-file-rows .pt-field > .pt-file-links { grid-column: 3; }
/* the two pool-attribute options must stay on one line */
#collapseUpload .pt-choice-row .custom-control-label { white-space: nowrap; }
/* "Run MBS Screener" lives in the card header */
.mbs-section-card .pt-card-btn { height: 30px; padding: 0 12px; font-size: 0.8rem; gap: 6px; }
.mbs-section-card .pt-card-btn .ph { font-size: 1.1em; }
/* each file's download links keep the boxed look, and the boxes all match the input height */
.pt-file-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  padding: 4px 12px;
  background: var(--tk-primary-soft);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
}
.pt-file-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tk-primary);
  font-size: 0.85rem;
  text-decoration: none;
}
.pt-file-links a:hover { text-decoration: underline; }
.pt-file-links .ph { font-size: 1.1em; }

.pt-sample-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--tk-primary-soft);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  padding: 16px 18px;
}
.pt-sample-box p { margin: 0; color: var(--tk-text); }
.pt-sample-box a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tk-primary);
  font-weight: 600;
  text-decoration: none;
}
.pt-sample-box a:hover { text-decoration: underline; }

/* file input restyled to match the theme */
.mbs-section-card .custom-file-label {
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  min-height: var(--tk-input-height);
  height: auto;
  padding: 10px 12px;
  color: var(--tk-placeholder);
  line-height: normal;
}
.mbs-section-card .custom-file-label::after {
  content: "Browse";
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--tk-surface-solid);
  border-left: 1px solid var(--tk-border-strong);
  border-radius: 0 var(--tk-radius-sm) var(--tk-radius-sm) 0;
  color: var(--tk-text);
}
.pt-input-row > .custom-file { flex: 1 1 auto; min-width: 0; }

.pt-form-errors {
  margin-top: 16px;
  color: var(--tk-danger-text);
  font-size: 0.9rem;
}
.pt-form-errors ul { padding-left: 18px; }

.pt-batch-actions { margin-top: 18px; }
/* the "Run MBS Screener" action sits directly under the file input (the field column's own
   18px gap applies), lined up with the input rather than with the field labels */
#collapseUpload .pt-batch-actions { margin-top: 0; margin-left: 112px; }
@media (max-width: 700px) { #collapseUpload .pt-batch-actions { margin-left: 0; } }

/* Compact form sizing, shared by both batch cards ("Model & Calculation Settings" and
   "CUSIP or Pool Attributes") so their fonts / inputs / buttons are the same size. */
.pt-form-compact { font-size: 0.85rem; }
.pt-form-compact .pt-field { grid-template-columns: 155px minmax(0, 1fr); gap: 4px 8px; }
.pt-form-compact .pt-field-label { font-size: 0.8rem; white-space: nowrap; line-height: 1.5; }
.pt-form-compact .pt-input { min-height: 30px; padding: 4px 10px; font-size: 0.85rem; }
/* Match the single page's Yield Curve Selection width on multiple/batch pages. */
.pt-form-compact .pt-field > select[name="yield_curve"] { width: 66.66%; }
/* explicit height: <button> and <a> otherwise compute slightly different content heights */
.pt-form-compact .pt-btn { height: 30px; padding: 0 10px; font-size: 0.78rem; }
/* `.ph` is 1.5rem globally, which would otherwise make compact buttons taller than inputs */
.pt-form-compact .pt-btn .ph { font-size: 1.1em; }
.pt-form-compact .custom-file-label { min-height: 30px; padding: 4px 10px; font-size: 0.85rem; line-height: 20px; }
.pt-form-compact .custom-file-label::after { padding: 0 10px; font-size: 0.85rem; }
.pt-form-compact .pt-choice-row { gap: 6px 18px; }
/* "Select All" is a master control over the options, so it gets its own line above them
   instead of sitting inline as if it were just another option */
.pt-form-compact .pt-choice-row .pt-select-all { flex: 1 0 100%; }
/* compact radios/checkboxes �?NOT switches: `.custom-switch` draws its track with
   `::before` (1.75rem wide), so shrinking it here would hide the track entirely */
.pt-form-compact .custom-control:not(.custom-switch) { min-height: 1.3rem; padding-left: 1.4rem; }
.pt-form-compact .custom-control:not(.custom-switch) .custom-control-label::before,
.pt-form-compact .custom-control:not(.custom-switch) .custom-control-label::after {
  width: 0.9rem;
  height: 0.9rem;
  top: 0.2rem;
  left: -1.4rem;
}

/* --- Model & Calculation Settings: two-column layout specifics -------------- */
#collapseSettings .pt-batch-2col > .pt-fields-grid:first-child { gap: 10px 0; }
/* right column: keep labels top-aligned with the first line of (possibly multi-line) option rows */
#collapseSettings .pt-batch-2col > .pt-fields-grid:last-child .pt-field { align-items: start; }
/* keep the left-hand controls from stretching across the whole column */
#collapseSettings .pt-field > .pt-input { max-width: 320px; justify-self: start; }
#collapseSettings .pt-field > .pt-input-row { max-width: 320px; justify-self: start; }
#collapseSettings .pt-input-row { flex-wrap: wrap; }
/* small flex-basis so the (wide) native date input does not force a wrap */
#collapseSettings .pt-input-row > .pt-input { flex: 1 1 100px; min-width: 100px; }

/* only the Discounting select should match the date input width */
#collapseSettings #discounting { max-width: 130px; }

/* the curve field has no label, so its controls use the whole column width (the compact
   chip/button sizing lives in the base `.pt-custom-curve-row` rule) */
#collapseSettings .pt-field--full { grid-template-columns: minmax(0, 1fr); }
#collapseSettings .pt-field--full > .pt-custom-curve-row { grid-column: 1; }
/* =============================================================================
   Analysis Queue / Results table
   ========================================================================== */
.pt-queue-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--tk-table-row-bg);
}
.pt-queue-table thead th {
  background: var(--tk-table-head-bg);
  color: var(--tk-table-head-color);
  font-size: 0.9rem;
  line-height: 1.25;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--tk-table-border);
}
.pt-queue-table tbody td {
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--tk-table-border);
  color: var(--tk-text);
  font-size: 0.85rem;
  line-height: 0.85;
  vertical-align: middle;
}
/* keep the timestamp on one line (the column would otherwise wrap the time) */
.pt-queue-table thead th:first-child,
.pt-queue-table tbody td:first-child { white-space: nowrap; }
/* vertical separators between columns (not on the outer edges). The header uses a lighter
   colour than its own background, otherwise the line is invisible. */
.pt-queue-table thead th + th { border-left: 1px solid var(--tk-table-head-sep); }
.pt-queue-table tbody td + td { border-left: 1px solid var(--tk-table-border); }

.pt-queue-table tbody tr:last-child td { border-bottom: 0; }
/* zebra striping: alternate rows use the card background colour */
.pt-queue-table tbody tr:nth-child(even) td { background: var(--tk-table-row-alt); }
.pt-queue-table tbody tr:hover td { background: var(--tk-table-row-hover); }
/* ordinary links inside the table; `.pt-btn` links keep their own colours
   (otherwise a primary button would get blue text on a blue background) */
.pt-queue-table a:not(.pt-btn) { color: var(--tk-accent); text-decoration: none; }
.pt-queue-table a:not(.pt-btn):hover { text-decoration: underline; }

/* A base task and its shock sub-tasks are rendered as one block so it is clear
   which shocks belong together: emphasise the base row, indent the shock rows
   (shock rows keep the same font colour as ordinary rows). */
.pt-queue-table tbody tr.pt-group-base > td { font-weight: 600; }
.pt-queue-table tbody tr.pt-group-shock > td:first-child { padding-left: 26px; }

.pt-queue-table .pt-queue-curve {
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-queue-table .pt-queue-actions { white-space: nowrap; }
.pt-queue-table .pt-queue-actions a {
  display: inline-flex;
  align-items: center;
  margin: 0 7px;
}
.pt-queue-table .pt-queue-actions i { font-size: 1.2rem; }
/* keep the loading spinner aligned with the action icons */
.pt-queue-table .pt-queue-actions .spinner-border { margin: 0 7px; vertical-align: middle; }

/* the table sits in a bordered, rounded frame */
.pt-queue-frame {
  border: 1px solid var(--tk-table-border);
  border-radius: var(--tk-radius-sm);
}

/* pagination (prev / page numbers / next) */
.pt-queue-pagination {
  display: flex;
  justify-content: flex-end;
  padding: 14px 8px 8px;
}
.pt-queue-pagination .pagination { margin-bottom: 0; }
.pt-queue-pagination .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  margin: 0 3px;
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  background: var(--tk-surface-soft);
  color: var(--tk-text-muted);
  font-size: 0.9rem;
}
.pt-queue-pagination .page-link:hover {
  background: var(--tk-primary-soft);
  color: var(--tk-accent);
}
.pt-queue-pagination .page-item.active .page-link {
  background: var(--tk-accent);
  border-color: var(--tk-accent);
  color: var(--tk-surface-solid);
  font-weight: 600;
}
.pt-queue-pagination .page-item.disabled .page-link {
  color: var(--tk-placeholder);
  opacity: 0.6;
}

.pt-queue-info {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--tk-text-muted);
}
/* the info line is pushed right; the collapse caret tucks in after it */
.mbs-section-card .card-header .pt-queue-info + .toggle-icon { margin-left: 0; }

/* =============================================================================
   Batch detail page
   ========================================================================== */
/* top status bar: wrapping meta chips on the left, fixed actions on the right */
.pt-detail-header {
  padding: 2px 2px 12px;
  border-bottom: 1px solid var(--tk-border);
}
/* info row: descriptive chips; the statistics group below wraps as a unit */
.pt-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 8px;
}
.pt-detail-stats {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 8px;
}
.pt-detail-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 10px;
  background: var(--tk-primary-soft);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-text);
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: nowrap;
}
a.pt-detail-meta__item { text-decoration: none; }
a.pt-detail-meta__item:hover { border-color: var(--tk-border-strong); text-decoration: none; }
.pt-detail-meta__value { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the icons are 1.5rem globally, which makes them taller than the chip text */
.pt-detail-meta .ph {
  font-size: 1.05em;
}

.pt-detail-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
/* "Display 1 - N of M" (left) + pagination links (right): the table's footer row,
   sitting inside .pt-queue-frame and separated by a top border (not a separate box) */
.pt-detail-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--tk-table-border);
  padding: 6px 12px;
}
.pt-detail-pager__start { display: flex; align-items: center; gap: 16px; }
.pt-detail-pager__info { color: var(--tk-text-muted); font-size: 0.95rem; }
.pt-detail-pager .pt-queue-pagination { margin-top: 0; padding: 0; }
.pt-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}
.pt-detail-actions .btn,
.pt-detail-actions .pt-btn { white-space: nowrap; }
/* icon-only buttons must not be taller than the text buttons (Back) next to them */
.pt-detail-actions .btn .ph {
  font-size: 1.1em;
  vertical-align: middle;
}

/* =============================================================================
   MBS > Single result area (Results / Hedge Results / Yield Table)
   ========================================================================== */
/* underline tabs (same accent as the top navigation) */
.pt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--tk-border); margin: 0 0 18px; }
.pt-tabs .nav-link {
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--tk-text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  cursor: pointer;
}
.pt-tabs .nav-link:hover { color: var(--tk-primary); }
.pt-tabs .nav-link.active { color: var(--tk-primary); border-bottom-color: var(--tk-accent); }

.pt-result-pane { overflow-x: auto; transition: none !important; animation: none !important; }

/* the transposed results table: the first cell of each row is a field name */
.pt-result-table .pt-queue-table tbody th {
  width: 15%;
  background: var(--tk-table-head-bg);
  color: var(--tk-table-head-color);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--tk-table-head-sep);
}
/* the label cell uses the header background, so its separators use the same light
   colour as the table-head separators (--tk-table-head-sep) */
.pt-result-table .pt-queue-table tbody th + td { border-left: 1px solid var(--tk-table-head-sep); }
.pt-result-cell-failure { color: var(--tk-danger-text); background: var(--tk-danger-bg); }
/* the Yield Table's Price column looks like the rest of the row, only bolder */
.pt-result-rowhead { font-weight: 700; }

.pt-result-subtitle {
  color: var(--tk-section-title-color);
  font-family: var(--tk-font-header);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.pt-result-hedge, .pt-result-yield { margin-bottom: 22px; }

/* =============================================================================
   History page (Past Results)
   ========================================================================== */
/* filter bar: bordered box holding the security-type select and the quick filters */
.pt-history-filter {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-sm);
  background: var(--tk-surface-solid);
}
.pt-history-filter__type {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pt-history-filter__label {
  margin: 0;
  color: var(--tk-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}
.pt-history-filter__divider {
  align-self: stretch;
  width: 1px;
  background: var(--tk-border);
}
.pt-history-filter__quick {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pt-filter-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 170px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  background: var(--tk-surface-solid);
  color: var(--tk-text);
  font-size: 0.9rem;
  text-decoration: none;
}
.pt-filter-select:hover,
.pt-filter-select:focus { border-color: var(--tk-input-hover-border); color: var(--tk-text); text-decoration: none; }
.pt-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pt-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  background: var(--tk-surface-solid);
  color: var(--tk-text);
  font-size: 0.9rem;
  text-decoration: none;
}
.pt-filter-pill:hover,
.pt-filter-pill:focus { border-color: var(--tk-primary); color: var(--tk-primary); text-decoration: none; }
.pt-filter-pill.is-active {
  background: var(--tk-accent);
  border-color: var(--tk-accent);
  color: var(--tk-surface-solid);
}
.pt-filter-pill.is-active:hover,
.pt-filter-pill.is-active:focus { color: var(--tk-surface-solid); }
/* the filter that is currently applied is not clickable (the status dropdown stays
   clickable so its menu can still be opened) */
.pt-filter-pill.is-active:not(.dropdown-toggle) {
  pointer-events: none;
  cursor: default;
}

/* status badge inside the history table */
.pt-status-pill {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--tk-primary-soft);
  color: var(--tk-text-muted);
}
.pt-status-pill--success { background: var(--tk-success-bg); color: var(--tk-success); }
.pt-status-pill--failure { background: var(--tk-danger-bg); color: var(--tk-danger-text); }

/* footer: "Show N entries" on the left, selection actions + pagination on the right */
.pt-history-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 16px;
}
.pt-history-footer .pt-queue-pagination { margin-top: 0; margin-left: auto; }
.pt-history-page-size {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tk-text-muted);
  font-size: 0.9rem;
}
.pt-history-page-size select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  background: var(--tk-surface-solid);
  color: var(--tk-text);
  font-size: 0.9rem;
}
.pt-history-selection {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* same height as the "New Task" button */
.pt-history-selection .btn {
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
}
.pt-history-selection .btn .ph { font-size: 1.1em; }
/* primary action of the page: pushed to the right end of the filter toolbar, behind a
   divider that separates it from the filters */
.pt-history-filter__divider--end { margin-left: auto; }
.pt-history-new-task {
  margin-left: 18px;
  height: 34px;
  padding: 0 16px;
  font-size: 0.9rem;
}
.pt-history-new-task .ph { font-size: 1.1em; }
@media (max-width: 900px) {
  .pt-history-filter { flex-wrap: wrap; }
  .pt-history-filter__divider { display: none; }
  .pt-history-new-task { margin-left: 0; }
}

/* =============================================================================
   Account > Product Parameter
   ========================================================================== */
/* roomier section headers than the MBS form cards (icon + title + chevron) */
.pt-param-form .mbs-section-card .card-header {
  padding: 18px 18px;
  font-size: 1.15rem;
  gap: 14px;
}
.pt-param-form .mbs-section-card .card-header .pt-section-icon { font-size: 1.4rem; }
.pt-param-form .mbs-section-card .card-header .toggle-icon {
  color: var(--tk-primary);
  font-size: 1.1rem;
  line-height: 1;
}
.pt-param-form .mbs-section-card .card-body { padding: 22px 24px; }

/* one field per row: label (with its default hint) left, input right */
.pt-param-form .pt-param-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.pt-param-form .mbs-section-card .pt-param-grid .pt-field {
  /* 3rd column is empty: the input keeps the design's width instead of filling the row */
  grid-template-columns: minmax(0, 25fr) minmax(0, 23fr) minmax(0, 52fr);
  gap: 6px 40px;
}
.pt-param-form .mbs-section-card .pt-param-grid .pt-field-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tk-text-strong);
}
.pt-param-form .mbs-section-card .pt-param-grid .pt-field-hint {
  margin-left: 8px;
  font-size: 0.88rem;
}
.pt-param-form .pt-param-actions { margin-top: 26px; }
@media (max-width: 900px) {
  .pt-param-form .mbs-section-card .pt-param-grid .pt-field {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =============================================================================
   Account > Download Client Tool
   ========================================================================== */
.pt-download-card .card-body { padding: 32px 32px 26px; }
.pt-download-head { display: flex; align-items: flex-start; gap: 22px; }
.pt-download-badge {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--tk-btn-primary-gradient);
  color: var(--tk-surface-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.pt-download-title {
  font-family: var(--tk-font-header);
  color: var(--tk-primary);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 4px 0 8px;
}
.pt-download-text {
  color: var(--tk-text-muted);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  max-width: 800px;
}
.pt-download-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 760px;
  margin-top: 28px;
}
.pt-download-meta__item { display: flex; align-items: flex-start; gap: 14px; }
.pt-download-meta__item > .ph { color: var(--tk-primary); font-size: 1.4rem; }
.pt-download-meta__label {
  display: block;
  color: var(--tk-text-strong);
  font-size: 0.98rem;
  font-weight: 650;
  margin-bottom: 2px;
}
.pt-download-meta__value { display: block; color: var(--tk-text-muted); font-size: 0.95rem; }
.pt-download-actions { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--tk-border); }
.pt-download-actions .pt-btn { height: 46px; padding: 0 22px; }
.pt-download-note {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tk-text-muted);
  font-size: 0.95rem;
  margin: 22px 0 0;
}
.pt-download-note > .ph { color: var(--tk-accent); font-size: 1.25rem; flex-shrink: 0; }
@media (max-width: 900px) {
  .pt-download-meta { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* =============================================================================
   Account > API Information
   ========================================================================== */
.pt-api-card .card-header { padding: 14px 20px; font-size: 1.1rem; }
.pt-api-card .card-header .pt-section-icon { font-size: 1.35rem; }
.pt-api-card .card-body { padding: 20px 22px; }
.pt-api-card .card-header .pt-api-num { margin-right: 2px; }

/* --- credentials --------------------------------------------------------- */
.pt-api-row { display: flex; align-items: center; gap: 14px; }
.pt-api-row + .pt-api-row { margin-top: 12px; }
.pt-api-row__label { flex: 0 0 100px; color: var(--tk-text-strong); font-size: 0.95rem; font-weight: 600; }
.pt-api-row__field { display: flex; align-items: center; gap: 10px; flex: 0 1 420px; min-width: 0; }
.pt-api-row__field > .pt-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
}
.pt-api-copy {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  background: var(--tk-surface-solid);
  color: var(--tk-text-muted);
  cursor: pointer;
  font-size: 1.1rem;
}
.pt-api-copy:hover { color: var(--tk-primary); border-color: var(--tk-primary); }
.pt-api-note { color: var(--tk-text-muted); font-size: 0.9rem; margin: 16px 0 0; }

/* --- user guide panels --------------------------------------------------- */
.pt-api-intro { color: var(--tk-text); font-size: 0.98rem; line-height: 1.6; margin: 0 0 20px; }
.pt-api-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pt-api-panel { background: var(--tk-primary-soft); border-radius: var(--tk-radius-md); padding: 18px 22px; }
.pt-api-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tk-primary);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.pt-api-panel__head .ph { font-size: 1.2rem; }
.pt-api-panel ol { margin: 0; padding-left: 20px; color: var(--tk-text); }
.pt-api-panel ol li { margin-bottom: 4px; }
.pt-api-checks { list-style: none; margin: 0; padding: 0; }
.pt-api-checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--tk-text); margin-bottom: 6px; }
.pt-api-checks .ph { color: var(--tk-accent); font-size: 1.15rem; flex-shrink: 0; }

/* --- numbered sections --------------------------------------------------- */
.pt-api-num { color: var(--tk-text-strong); font-weight: 700; }
.pt-api-section .card-body { color: var(--tk-text); font-size: 0.98rem; line-height: 1.6; }
.pt-api-section .card-body > :last-child { margin-bottom: 0; }
.pt-api-section h4 { color: var(--tk-text-strong); font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; }
.pt-api-section ul { padding-left: 20px; }
.pt-api-section p { margin-bottom: 10px; }
.pt-api-code { position: relative; margin-top: 12px; }
.pt-api-code pre {
  margin: 0;
  padding: 18px 20px;
  background: var(--tk-surface-solid);
  border: 1px solid var(--tk-border);
  border-radius: var(--tk-radius-md);
  overflow: auto;
  max-height: 460px;
}
.pt-api-code pre code { background: transparent; padding: 0; font-size: 0.85rem; }
.pt-api-code .pt-api-copy { position: absolute; top: 10px; right: 10px; }
@media (max-width: 1100px) {
  .pt-api-panels { grid-template-columns: minmax(0, 1fr); }
}

/* --- "Need Help?" card inside the sidebar column ------------------------- */
.pt-sidebar-help { margin: 22px 14px 0 22px; }
.pt-sidebar-help__card {
  background: var(--tk-primary-soft);
  border-radius: var(--tk-radius-md);
  padding: 18px;
}
.pt-sidebar-help__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tk-text-strong);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.pt-sidebar-help__title .ph { color: var(--tk-primary); font-size: 1.2rem; }
.pt-sidebar-help__text { color: var(--tk-text-muted); font-size: 0.9rem; margin: 0 0 10px; }
.pt-sidebar-help__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tk-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}
.pt-sidebar-help__link:hover { text-decoration: underline; }
/* the fixed support widget would duplicate the in-column card */
.api-page .pt-need-help { display: none; }

/* =============================================================================
   Contact Us / Request a Demo
   ========================================================================== */
.pt-contact-lead {
  color: var(--tk-text);
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 780px;
}
.pt-contact-lead a { color: var(--tk-primary); font-weight: 600; }

.pt-contact-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.pt-contact-panel {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: var(--tk-primary-soft);
  border-radius: var(--tk-radius-md);
  padding: 26px 28px;
}
.pt-contact-badge {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tk-accent);
  color: var(--tk-surface-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.pt-contact-panel__title {
  font-family: var(--tk-font-header);
  color: var(--tk-text-strong);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 6px 0 8px;
}
.pt-contact-panel__text { color: var(--tk-text-muted); font-size: 0.98rem; line-height: 1.5; margin: 0 0 14px; }
.pt-contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tk-primary);
  font-size: 1.02rem;
  font-weight: 600;
  text-decoration: none;
}
.pt-contact-mail:hover { text-decoration: underline; }
.pt-contact-response {
  display: flex;
  align-items: center;
  gap: 20px;
  border-top: 1px solid var(--tk-border);
  margin-top: 26px;
  padding-top: 24px;
}
.pt-contact-response > .ph { color: var(--tk-text-strong); font-size: 1.6rem; flex-shrink: 0; }
.pt-contact-response__title {
  font-family: var(--tk-font-header);
  color: var(--tk-text-strong);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 2px;
}
.pt-contact-response__text { color: var(--tk-text-muted); font-size: 0.98rem; margin: 0; }

/* --- Request a Demo ------------------------------------------------------ */
.pt-demo { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; align-items: start; }
.pt-demo__field {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  align-items: center;
  gap: 6px 16px;
  margin-bottom: 16px;
}
.pt-demo__field > .pt-field-label { grid-column: 1; color: var(--tk-text-strong); font-size: 1rem; font-weight: 650; margin: 0; }
.pt-demo__field > .pt-input,
.pt-demo__field > .pt-auth-input { grid-column: 2; }
.pt-demo__field .pt-auth-input { position: relative; }
.pt-demo__field .pt-auth-input > .ph {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tk-text-muted);
  font-size: 1.15rem;
  pointer-events: none;
}
.pt-demo__field .pt-auth-input > .form-control { padding-left: 46px; }
.pt-demo__field textarea.pt-input { min-height: 110px; resize: vertical; }
.pt-demo__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 0 204px;
}
.pt-demo__actions a { color: var(--tk-primary); font-weight: 600; text-decoration: none; }
.pt-demo__actions a:hover { text-decoration: underline; }
.pt-demo__aside {
  background: var(--tk-primary-soft);
  border-radius: var(--tk-radius-md);
  padding: 26px 26px 22px;
}
.pt-demo__badge { display: inline-flex; color: var(--tk-accent); font-size: 2rem; margin-bottom: 10px; }
.pt-demo__title {
  font-family: var(--tk-font-header);
  color: var(--tk-text-strong);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 10px;
}
.pt-demo__text { color: var(--tk-text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0 0 16px; }
.pt-demo__aside .pt-api-checks { border-top: 1px solid var(--tk-border); padding-top: 16px; }
.pt-demo__aside .pt-api-checks li { color: var(--tk-text); font-size: 0.95rem; }
@media (max-width: 1200px) {
  .pt-demo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pt-contact-panels { grid-template-columns: minmax(0, 1fr); }
  .pt-demo__field { grid-template-columns: minmax(0, 1fr); }
  .pt-demo__field > .pt-input,
  .pt-demo__field > .pt-auth-input { grid-column: 1; }
  .pt-demo__actions { margin-left: 0; }
}

/* =============================================================================
   Rates Products > Bonds > Corporate Bonds
   ========================================================================== */
.pt-corp-filter {
  background: var(--tk-primary-soft);
  border: 1px solid var(--tk-section-border);
  border-radius: var(--tk-section-radius);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.pt-corp-filter .pt-field { display: grid; gap: 6px; min-width: 0; }
.pt-corp-filter .pt-field-label { color: var(--tk-text-strong); font-size: 0.95rem; font-weight: 650; margin: 0; }
.pt-corp-filter .pt-input.is-placeholder { color: var(--tk-text-muted); }
.pt-corp-filter__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.pt-corp-filter__top .pt-field { width: 210px; }
.pt-corp-filter__actions { display: flex; align-items: center; gap: 18px; }
.pt-corp-filter__clear { color: var(--tk-primary); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.pt-corp-filter__clear:hover { text-decoration: underline; }
/* the controls are as wide as the "Coupon Rate (e.g. 3-4)" label, evenly spaced,
   with a roomier Industry Group select */
.pt-corp-filter__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.pt-corp-filter__row .pt-field { width: 170px; min-width: 0; }
.pt-corp-filter__row .pt-field--wide { width: 260px; }
.pt-corp-filter__row .pt-field > .pt-input { width: 100%; }

/* --- results ------------------------------------------------------------- */
.pt-corp-results .card-header { gap: 14px; padding: 6px 15px; background: var(--tk-section-bg)}
.pt-corp-count {
  background: var(--tk-primary-soft);
  color: var(--tk-primary);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 650;
  padding: 3px 12px;
}
/* the table runs edge to edge inside the card: no body padding, no frame */
.pt-corp-results .card-body { padding: 0; }
.pt-corp-results .pt-queue-frame {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-x: auto;   /* wide tables scroll inside the card instead of spilling out */
}
.pt-corp-frame { margin: 0; border: 0; border-radius: 0; overflow-x: auto; }
/* these frames have no border of their own, so the table keeps its bottom line */
.pt-corp-results .pt-queue-table tbody tr:last-child td,
.pt-account-results .pt-queue-table tbody tr:last-child td { border-bottom: 1px solid var(--tk-table-border); }
.pt-corp-results .card-body > .alert,
.pt-corp-results .card-body > p { margin: 18px 20px; }
.pt-corp-table { min-width: 1750px; }
.pt-corp-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.pt-corp-sort .ph { font-size: 0.9rem; opacity: .5; }
.pt-corp-sort:hover { color: var(--tk-primary); text-decoration: none; }
.pt-corp-sort.is-active { color: var(--tk-primary); }
.pt-corp-sort.is-active .ph { opacity: 1; }
.pt-corp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0px 0px 0px 10px;
}
.pt-corp-footer__info { color: var(--tk-text-muted); font-size: 0.95rem; padding:8px 8px}
.pt-corp-footer .pt-queue-pagination { margin-top: 0; }
/* the tagline under the page title fits on one line */
.corp-page .pt-page-subtitle { max-width: none; }
@media (max-width: 1200px) {
  .pt-corp-filter__row { flex-wrap: wrap; }
}

/* =============================================================================
   Account > Update my Information
   ========================================================================== */
.pt-info { display: grid; grid-template-columns: minmax(0, 1fr) 335px; gap: 44px; align-items: start; }
.pt-info__form { max-width: 640px; }
.pt-info__form .pt-auth-field { margin-bottom: 18px; }
.pt-info__save { margin-top: 8px; }
.pt-info__aside {
  background: var(--tk-primary-soft);
  border-radius: var(--tk-radius-md);
  padding: 24px 26px;
}
.pt-info__block { display: flex; align-items: flex-start; gap: 16px; }
.pt-info__block > .ph { color: var(--tk-accent); font-size: 1.4rem; flex-shrink: 0; }
.pt-info__title {
  font-family: var(--tk-font-header);
  color: var(--tk-text-strong);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 2px 0 8px;
}
.pt-info__text { color: var(--tk-text-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.pt-info__block--divider { border-top: 1px solid var(--tk-border); margin-top: 18px; padding-top: 18px; }
@media (max-width: 1100px) {
  .pt-info { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* =============================================================================
   Account > Change my Password / Version Selection / Email Verification /
   Custom Term Structure Model
   ========================================================================== */
.pt-account-form { max-width: 440px; }
.pt-account-form .pt-auth-field { margin-bottom: 18px; }
.pt-account-actions { margin-top: 10px; }
.pt-account-note { color: var(--tk-text-muted); font-size: 0.98rem; line-height: 1.6; margin: 0 0 22px; max-width: 720px; }

/* version selection: each radio is a selectable card — the label fills the card,
   so clicking anywhere inside the rectangle selects the option */
.pt-account-form .custom-radio.custom-control {
  display: inline-block;
  padding: 0;
  margin: 0 14px 14px 0;
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-md);
  background: var(--tk-surface-solid);
}
.pt-account-form .custom-radio.custom-control:hover { border-color: var(--tk-primary); }
.pt-account-form .custom-radio .custom-control-label {
  display: block;
  padding: 12px 26px 12px 42px;
  margin: 0;
  color: var(--tk-text-strong);
  font-weight: 600;
  cursor: pointer;
}
.pt-account-form .custom-radio .custom-control-label::before,
.pt-account-form .custom-radio .custom-control-label::after {
  left: 18px;
  top: 50%;
  margin-top: -0.5rem;
}
.pt-account-form .custom-radio .custom-control-input:checked ~ .custom-control-label { color: var(--tk-primary); }
.pt-account-form .custom-radio.custom-control:has(.custom-control-input:checked) {
  border-color: var(--tk-primary);
  background: var(--tk-primary-soft);
}

/* custom term structure model: file rows + result table */
.pt-ctsm-file { display: flex; align-items: center; gap: 16px; }
.pt-ctsm-file > .custom-file { flex: 1 1 auto; min-width: 0; }
.pt-ctsm-sample { flex: 0 0 auto; color: var(--tk-text-muted); font-size: 0.9rem; white-space: nowrap; }
.pt-ctsm-file .custom-file-label {
  min-height: var(--tk-input-height);
  padding: 10px 12px;
  line-height: 20px;
  border: 1px solid var(--tk-border-strong);
  border-radius: var(--tk-radius-sm);
  color: var(--tk-placeholder);
}
.pt-ctsm-file .custom-file-label::after {
  padding: 10px 16px;
  line-height: 20px;
  background: var(--tk-primary-soft);
  color: var(--tk-primary);
  font-weight: 600;
  border-left: 1px solid var(--tk-border-strong);
}
.pt-ctsm-errors { color: var(--tk-danger-text); font-size: 0.9rem; margin: 16px 0 0; }
.pt-ctsm-errors ul { margin: 0; padding-left: 18px; }
/* this form's labels are longer than the batch page's, so the label column grows.
   Every row lives in one grid so the row spacing and the control column line up. */
.pt-ctsm-form .pt-ctsm-rows {
  display: grid;
  /* 2fr control column + a 1fr spacer: the inputs are a third narrower than full width */
  grid-template-columns: 210px minmax(0, 2fr) max-content minmax(0, 1fr);
  grid-auto-rows: minmax(34px, auto);   /* equal row heights -> equal row spacing */
  align-items: center;
  gap: 18px 12px;
}
.pt-ctsm-form .pt-ctsm-rows .pt-field,
.pt-ctsm-form .pt-ctsm-rows .pt-input-row { display: contents; }
.pt-ctsm-form .pt-ctsm-rows .pt-field-label { grid-column: 1; }
/* same control height as the file rows, so every gap looks identical */
.pt-ctsm-form .pt-ctsm-rows .pt-input { min-height: 34px; }
.pt-ctsm-form .pt-ctsm-rows .pt-input,
.pt-ctsm-form .pt-ctsm-rows .custom-file,
.pt-ctsm-form .pt-ctsm-rows .custom-control,
.pt-ctsm-form .pt-ctsm-rows .pt-field-error { grid-column: 2; }
.pt-ctsm-form .pt-ctsm-rows .pt-file-links { grid-column: 3; }
/* the Upload button lines up with the controls, not with the labels */
.pt-ctsm-form .pt-ctsm-actions { margin-left: 222px; }

/* =============================================================================
   MBS Screener
   ========================================================================== */
.pt-screener-filter__row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 18px 20px;
}
.pt-screener-filter__row .pt-field { display: grid; gap: 6px; min-width: 0; width: 170px; }
.pt-screener-filter__row .pt-field--action { width: auto; }
.pt-screener-filter__row .pt-field-label { color: var(--tk-text-strong); font-size: 0.95rem; font-weight: 650; margin: 0; }
.pt-screener-filter__row .pt-input.is-placeholder { color: var(--tk-text-muted); }
/* Modal variant: the window caps at 640px and shrinks to its content (no blank
   space at the bottom); the filter bar always stays on one line */
#mbsScreenerModal .modal-content { height: 860px; display: flex; flex-direction: column; }
#mbs-screener-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#mbs-screener-modal-body .pt-screener-filter__row { flex-wrap: nowrap; gap: 10px 12px; }
#mbs-screener-modal-body .pt-screener-filter__row .pt-field { width: auto; flex: 1 1 0; min-width: 0; }
#mbs-screener-modal-body .pt-screener-filter__row .pt-field--action { flex: 0 0 auto; }
.pt-screener-table { min-width: 1500px; }
.pt-screener-table .cusip_checkbox { cursor: pointer; }

/* =============================================================================
   Use Custom Yield Curve
   ========================================================================== */
/* One card (SOFR only) gets a single module width; two cards share the row. */
.pt-curve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 24px; align-items: start; }
#curveModal.curve-modal-narrow .modal-dialog { max-width: 600px; }
.pt-curve-card .card-header { flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.pt-curve-card .card-header > span { white-space: nowrap; }
.pt-curve-card .pt-curve-actions { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.pt-curve-card .pt-curve-sel,
.pt-curve-card .pt-curve-name { width: 140px; min-height: 32px; padding: 4px 8px; font-size: 0.85rem; }
.pt-curve-card .pt-btn-sm { height: 32px; padding: 6px 10px; font-size: 0.85rem; }
.pt-curve-body { height: 600px; overflow-y: auto; }
.pt-curve-table thead th { position: sticky; top: 0; z-index: 1; }
.pt-curve-table tbody td { padding: 5px 8px; }
.pt-curve-table .pt-input { min-height: 32px; padding: 4px 10px; font-size: 0.85rem; }
.pt-curve-table .pt-btn-sm { height: 32px; white-space: nowrap; }
.pt-curve-del { color: var(--tk-danger-text); border-color: var(--tk-danger-text); }
.pt-curve-del:hover { color: var(--tk-surface-solid); background: var(--tk-danger-text); border-color: var(--tk-danger-text); }
.pt-curve-actions { display: flex; justify-content: flex-end; gap: 12px; }
@media (max-width: 1200px) {
  .pt-curve-grid { grid-template-columns: minmax(0, 1fr); }
}
.pt-account-results .card-body { padding: 0; }
.pt-account-results .card-body > .alert,
.pt-account-results .card-body > p { margin: 18px 20px; }
.pt-account-results .pt-queue-frame { margin: 0; border: 0; border-radius: 0; overflow-x: auto; }
.pt-account-results .pt-queue-table { min-width: 900px; }
.pt-account-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pt-account-footer .pt-queue-pagination { margin-top: 0; }

/* =============================================================================
   MBS > Load a Saved Trade
   ========================================================================== */
.pt-loadtrade-filter .pt-screener-filter__row .pt-field:not(.pt-field--action) { width: 340px; }
.pt-loadtrade-table { min-width: 1100px; }
.pt-loadtrade-table .check_trade { cursor: pointer; }
.pt-loadtrade-footer { flex-wrap: wrap; }
.pt-loadtrade-footer__right { display: flex; align-items: center; margin-left: auto; flex-wrap: wrap; }
.pt-loadtrade-actions { display: flex; align-items: center; gap: 12px; padding: 6px;}
.pt-loadtrade-actions .pt-btn { height: 32px; }