/* Rate Areas section styles. Most layout reuses filings/css/styles.css. */

/* ── Detail-tab table (one issuer's rate areas) ── */

.ra-detail-info{
  font-family:var(--cond);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text3);
  margin-bottom:.6rem;
}
.ra-detail-info span{color:var(--text2);font-weight:600;}

.ra-detail-table{
  width:100%;
  max-width:640px;
  border-collapse:collapse;
  background:var(--navy2);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.ra-detail-table th{
  font-family:var(--cond);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3);
  background:var(--navy3);
  padding:8px 14px;
  text-align:right;
  border-bottom:1px solid var(--border);
}
.ra-detail-table th.left{text-align:left;}
.ra-detail-table td{
  padding:9px 14px;
  border-bottom:1px solid rgba(30,58,95,.5);
  font-size:13px;
}
.ra-detail-table td.left{color:var(--text);}
.ra-detail-table td.num{
  font-family:var(--mono);
  font-size:12px;
  text-align:right;
  color:var(--text);
}
.ra-detail-table tr:last-child td{border-bottom:none;}

/* ── State Matrix table ── */

.ra-matrix-wrap{
  background:var(--navy2);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:auto;
  max-height:75vh;
}
.ra-matrix{
  border-collapse:collapse;
  font-size:12px;
  /* No fixed width — let it size to content so wide states scroll horizontally. */
}
.ra-matrix thead th{
  font-family:var(--cond);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text2);
  background:var(--navy3);
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  border-left:1px solid var(--border);
  white-space:nowrap;
  text-align:right;
  position:sticky;
  top:0;
  z-index:2;
}
.ra-matrix thead th.area-col{
  text-align:left;
  position:sticky;
  left:0;
  top:0;
  z-index:3;
  background:var(--navy3);
  border-left:none;
}
.ra-matrix tbody td{
  padding:6px 12px;
  border-bottom:1px solid rgba(30,58,95,.5);
  border-left:1px solid rgba(30,58,95,.4);
  font-family:var(--mono);
  text-align:right;
  white-space:nowrap;
  color:var(--text);
}
.ra-matrix tbody td.area-cell{
  font-family:var(--cond);
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text2);
  background:var(--navy2);
  text-align:left;
  position:sticky;
  left:0;
  z-index:1;
  border-left:none;
}
.ra-matrix tbody tr:hover td{background:rgba(255,255,255,0.03);}
.ra-matrix tbody tr:hover td.area-cell{background:var(--navy3);}
.ra-matrix tbody tr:last-child td{border-bottom:none;}

/* "Not offered / 0" cell treatment — distinct from a low factor. */
.ra-matrix td.not-offered{color:var(--text3);font-style:italic;}

.ra-matrix-legend{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:1rem;
  font-size:11px;
  color:var(--text3);
}
.ra-matrix-legend-bar{
  display:inline-flex;
  align-items:center;
  height:14px;
  border-radius:2px;
  overflow:hidden;
  width:240px;
}
.ra-matrix-legend-bar > span{flex:1;}

/* ── Premium Ranking table (extends .ra-matrix) ── */

/* Section label above each grid (Premium / Rank). */
.rk-section-label{
  font-family:var(--cond);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text2);
  margin-bottom:.4rem;
}

/* Multi-row header. Disable the global thead-sticky and only stick the
   top (company-name) row, so the four header rows stack normally. */
.ra-rk-table thead th{position:static;}
.ra-rk-table thead tr:first-child th{
  position:sticky;
  top:0;
  z-index:2;
}
.ra-rk-table thead tr:first-child th.area-col{z-index:3;}

/* Issuer columns get a real min-width so full company names fit. */
.ra-rk-table thead th.rk-company-h{
  min-width:220px;
  text-align:center;
  white-space:normal;     /* allow wrapping for very long names */
  font-family:var(--cond);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text);
  background:var(--navy3);
  padding:10px 12px;
  border-left:1px solid var(--border);
}
.ra-rk-table thead th.rk-sub-h{
  font-family:var(--cond);
  font-size:11px;
  font-weight:500;
  color:var(--text3);
  background:var(--navy2);
  text-transform:none;
  letter-spacing:0;
  padding:4px 12px;
  border-top:1px solid rgba(30,58,95,.4);
  text-align:center;
  white-space:normal;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ra-rk-table thead th.rk-base-h{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  color:var(--text2);
  background:var(--navy2);
  text-transform:none;
  letter-spacing:0;
  padding:4px 12px;
  border-top:1px solid rgba(30,58,95,.4);
  border-bottom:1px solid var(--border);
  text-align:right;
}

/* Cell content layout — main dollar amount on top, delta beneath. */
.ra-rk-table tbody td{
  vertical-align:top;
  padding:7px 12px;
  min-width:140px;
}
.ra-rk-table .rk-rate{
  font-family:var(--mono);
  font-size:12px;
  color:var(--text);
  line-height:1.2;
}
.ra-rk-table .rk-delta{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text3);
  margin-top:2px;
}
.ra-rk-table .rk-rank-1{
  font-family:var(--cond);
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal2);
  margin-top:2px;
}

/* Rank highlights. Rank-1 is the loud one; rank-2 / rank-3 get faint tints. */
.ra-rk-table tbody td.rank-1{
  background:rgba(13,148,136,.18);
  border-left:1px solid rgba(13,148,136,.35);
}
.ra-rk-table tbody td.rank-1 .rk-rate{color:var(--white);font-weight:600;}
.ra-rk-table tbody td.rank-2{background:rgba(13,148,136,.07);}
.ra-rk-table tbody td.rank-3{background:rgba(13,148,136,.03);}

.ra-rk-table tbody tr:hover td.rank-1{background:rgba(13,148,136,.25);}
.ra-rk-table tbody tr:hover td.rank-2{background:rgba(13,148,136,.12);}
.ra-rk-table tbody tr:hover td.rank-3{background:rgba(13,148,136,.06);}

/* ── Ranks-only table (rendered below the premium grid) ── */
.ra-rk-ranks-table thead th.rk-company-h{
  min-width:140px;
}
.ra-rk-ranks-table tbody td{
  min-width:140px;
  text-align:center;
  font-family:var(--mono);
  font-size:14px;
  color:var(--text);
  padding:8px 12px;
}
.ra-rk-ranks-table tbody td.rank-1{
  background:rgba(13,148,136,.20);
  color:var(--white);
  font-weight:700;
}
.ra-rk-ranks-table tbody td.rank-2{background:rgba(13,148,136,.08);}
.ra-rk-ranks-table tbody td.rank-3{background:rgba(13,148,136,.04);}

/* ── Ranking Trend table (issuer × year) ── */
/* The wrap itself shrinks to fit the table's content. Otherwise the wrap
   stretches to the page width and the table inside, while sized to content,
   sits in a wide navy box with empty space to the right. */
.ra-rk-trend-wrap{
  width:max-content;
  max-width:100%;
  display:block;
}
.ra-rk-trend-table{
  width:max-content;
}
.ra-rk-trend-table thead th{
  min-width:80px;
  padding:8px 10px;
  text-align:center !important;
}
.ra-rk-trend-table thead th.area-col{
  min-width:220px;
  text-align:left !important;
}
.ra-rk-trend-table tbody td{
  vertical-align:top;
  padding:7px 10px;
  text-align:center !important;
}
.ra-rk-trend-table tbody td.area-cell{
  text-align:left !important;
}
.ra-rk-trend-table .rk-trend-rank{
  font-family:var(--mono);
  font-size:14px;
  font-weight:600;
  color:var(--text);
  line-height:1.2;
  text-align:center;
}
.ra-rk-trend-table .rk-trend-rate{
  font-family:var(--mono);
  font-size:10px;
  color:var(--text3);
  margin-top:2px;
  text-align:center;
}
.ra-rk-trend-table tbody td.rank-1 .rk-trend-rank{color:var(--white);}
.ra-rk-trend-table tbody td.rank-1{
  background:rgba(13,148,136,.22);
  border-left:1px solid rgba(13,148,136,.35);
}
.ra-rk-trend-table tbody td.rank-2{background:rgba(13,148,136,.08);}
.ra-rk-trend-table tbody td.rank-3{background:rgba(13,148,136,.04);}

/* Explanatory note under the grid. */
.rk-note{
  margin-top:1rem;
  font-size:12px;
  color:var(--text3);
  line-height:1.6;
  max-width:760px;
}
.rk-note b{color:var(--text2);}