/* ── picks-table.css — Sovereign comparison table + interactive features ─── */

/* ── Compact top bar: back link + lang switcher ──────────────── */
.picks-topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1rem;
}
.picks-back {
  font-size:       .82rem;
  font-weight:     500;
  color:           var(--teal);
  text-decoration: none;
  transition:      opacity .15s;
}
.picks-back:hover { opacity: .7; }

/* ── Compact article title ───────────────────────────────────── */
.article-title { margin-bottom: 1.25rem; }

/* ── Intro — collapsible ─────────────────────────────────────── */
.sov-intro {
  font-size:   .95rem;
  line-height: 1.75;
  color:       var(--text);
  margin-bottom: 1.25rem;
}
.sov-intro p { margin-bottom: .75rem; }
.sov-intro ul {
  margin:      0 0 .75rem 1.2rem;
  padding:     0;
  line-height: 1.75;
}

/* Hidden intro content (collapsed state) */
.sov-intro-extra {
  overflow: hidden;
  max-height: 0;
  opacity:    0;
  transition: max-height .3s ease, opacity .25s ease;
}
.sov-intro-extra.open {
  max-height: 400px;
  opacity:    1;
}

/* Toggle button */
.sov-intro-toggle {
  font-size:       .8rem;
  font-weight:     600;
  color:           var(--teal);
  background:      none;
  border:          none;
  padding:         0;
  cursor:          pointer;
  margin-bottom:   1rem;
  display:         inline-flex;
  align-items:     center;
  gap:             .3rem;
  transition:      opacity .15s;
}
.sov-intro-toggle:hover { opacity: .7; }
.sov-intro-toggle-arrow { transition: transform .25s; }
.sov-intro-toggle.open .sov-intro-toggle-arrow { transform: rotate(180deg); }

/* ── Table wrapper ──────────────────────────────────────────── */
.sov-table-wrap {
  overflow-x:    auto;
  margin:        0 0 2rem;
  border-radius: 12px;
  border:        1px solid var(--border);
  box-shadow:    var(--card-shadow);
  width:         100vw;
  max-width:     1060px;
  margin-left:   50%;
  transform:     translateX(-50%);
  position:      relative;
}

.sov-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       .85rem;
  min-width:       820px;
}

/* ── Table header ───────────────────────────────────────────── */
.sov-table thead th {
  background:     var(--surface2);
  color:          var(--text-2);
  font-size:      .7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding:        .75rem .7rem;
  text-align:     center;
  border-bottom:  1px solid var(--border);
  white-space:    nowrap;
  position:       sticky;
  top:            0;
  z-index:        2;
  cursor:         pointer;
  user-select:    none;
  transition:     color .15s;
}
.sov-table thead th:hover {
  color: var(--teal);
}
.sov-table thead th:first-child,
.sov-table thead th:nth-child(2) {
  text-align: left;
}

/* ── Sort arrows ────────────────────────────────────────────── */
.sov-sort-arrow {
  font-size:   .55rem;
  margin-left: .25rem;
  opacity:     .3;
  transition:  opacity .15s, color .15s;
}
th.sov-sorted .sov-sort-arrow {
  opacity: 1;
  color:   var(--teal);
}

/* ── Table body ─────────────────────────────────────────────── */
.sov-table tbody td {
  padding:        .7rem .7rem;
  color:          var(--text);
  border-bottom:  1px solid var(--border-2);
  vertical-align: middle;
  text-align:     center;
}
.sov-table tbody td:first-child {
  font-weight: 600;
  text-align:  left;
  white-space: nowrap;
}
.sov-table tbody td:nth-child(2) {
  text-align:  left;
  font-size:   .75rem;
  color:       var(--text-2);
  white-space: nowrap;
}

.sov-table tbody tr:last-child td { border-bottom: none; }
.sov-table tbody tr:hover { background: var(--surface2); }

/* ── Yield cells ────────────────────────────────────────────── */
.sov-yield {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size:   .82rem;
}
.sov-yield-high {
  color:       var(--teal);
  font-weight: 600;
}
.sov-na {
  color:   var(--text-3);
  opacity: .5;
  font-size: .75rem;
  cursor:  help;
}

/* ── Risk rating pills ──────────────────────────────────────── */
.risk-pill {
  display:       inline-block;
  font-size:     .65rem;
  font-weight:   600;
  padding:       .15rem .5rem;
  border-radius: 4px;
  letter-spacing:.02em;
}
.risk-prime {
  background: rgba(26,107,90,.08);
  color:      var(--teal);
  border:     1px solid var(--teal-border);
}
.risk-high-grade {
  background: rgba(26,107,90,.06);
  color:      #2d8b6f;
  border:     1px solid rgba(45,139,111,.2);
}
.risk-upper-medium {
  background: rgba(232,170,42,.08);
  color:      #b8860b;
  border:     1px solid rgba(184,134,11,.2);
}
.risk-lower-medium {
  background: rgba(232,131,42,.08);
  color:      #c6590a;
  border:     1px solid rgba(198,89,10,.2);
}

/* ── Legend ──────────────────────────────────────────────────── */
.sov-legend {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .75rem;
  margin-bottom: 1.5rem;
  padding:       .75rem 1rem;
  background:    var(--surface2);
  border-radius: 8px;
  border:        1px solid var(--border);
  font-size:     .72rem;
  color:         var(--text-2);
}
.sov-legend-item {
  display:     flex;
  align-items: center;
  gap:         .35rem;
}

/* ── "Last updated" label ───────────────────────────────────── */
.sov-updated {
  font-size:     .75rem;
  color:         var(--text-3);
  margin-bottom: .75rem;
  font-style:    italic;
}

/* ── Rating filter bar ──────────────────────────────────────── */
.sov-filters {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .5rem;
  margin-bottom: 1.25rem;
}
.sov-filter-btn {
  font-size:      .72rem;
  font-weight:    600;
  padding:        .35rem .75rem;
  border-radius:  6px;
  border:         1px solid var(--border);
  background:     var(--surface);
  color:          var(--text-2);
  cursor:         pointer;
  transition:     all .15s;
  white-space:    nowrap;
}
.sov-filter-btn:hover {
  border-color: var(--teal-border);
  color:        var(--teal);
}
.sov-filter-btn.active {
  background:   var(--teal);
  color:        #fff;
  border-color: var(--teal);
}

/* ── Maturity column toggles ────────────────────────────────── */
.sov-col-toggles {
  display:       flex;
  flex-wrap:     wrap;
  align-items:   center;
  gap:           .5rem;
  margin-bottom: 1.25rem;
}
.sov-col-toggles-label {
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin-right:   .25rem;
}
.sov-col-toggle {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  font-size:   .72rem;
  color:       var(--text-2);
  cursor:      pointer;
}
.sov-col-toggle input {
  accent-color: var(--teal);
  cursor:       pointer;
}
.sov-col-toggle.unchecked {
  opacity: .45;
}

/* ── Column hide ────────────────────────────────────────────── */
.col-hidden { display: none !important; }

/* ── Country flag ───────────────────────────────────────────── */
.sov-flag {
  margin-right: .35rem;
  font-size: 1.1em;
  vertical-align: middle;
}

/* ── Footnote ───────────────────────────────────────────────── */
.sov-footnote {
  font-size:   .72rem;
  color:       var(--text-3);
  font-style:  italic;
  margin-top:  -.5rem;
  margin-bottom: 2rem;
}

/* ── Single-column layout — no TOC sidebar on this page ────── */
.article-layout { grid-template-columns: minmax(0, 680px); justify-content: center; }

/* ── Sticky header fix ──────────────────────────────────────── */
@media (min-width: 860px) {
  .sov-table-wrap { overflow-x: visible; }
  .sov-table thead th {
    position: sticky;
    top:      64px;
    z-index:  2;
  }
}
@media (max-width: 859px) {
  .sov-table thead th { position: static; }
}

/* ── Mobile scroll hint ─────────────────────────────────────── */
.sov-table-wrap.sov-scrollable::after {
  content:        attr(data-scroll-hint);
  position:       absolute;
  right:          12px;
  top:            50%;
  transform:      translateY(-50%);
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  6px;
  padding:        .3rem .7rem;
  font-size:      .72rem;
  color:          var(--text-2);
  box-shadow:     var(--card-shadow);
  animation:      sov-hint-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
  z-index:        3;
}

@keyframes sov-hint-pulse {
  0%, 100% { opacity: .7; transform: translateY(-50%) translateX(0); }
  50%      { opacity: 1;  transform: translateY(-50%) translateX(4px); }
}

/* ── Clickable rows ─────────────────────────────────────────── */
.sov-table tbody tr[data-country-code] {
  cursor: pointer;
}
.sov-table tbody tr[data-country-code]:hover td:first-child::after {
  content:     ' →';
  color:       var(--teal);
  font-size:   .75rem;
  opacity:     .7;
}

/* ── About section (details/summary below table) ────────────── */
.sov-about {
  margin-top:    1rem;
  border:        1px solid var(--border);
  border-radius: 10px;
  overflow:      hidden;
}
.sov-about summary {
  font-size:    .82rem;
  font-weight:  600;
  color:        var(--text-2);
  padding:      .85rem 1.1rem;
  cursor:       pointer;
  user-select:  none;
  list-style:   none;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  transition:   background .15s, color .15s;
}
.sov-about summary::-webkit-details-marker { display: none; }
.sov-about summary::after {
  content:    '▾';
  font-size:  .7rem;
  color:      var(--text-3);
  transition: transform .2s;
}
.sov-about[open] summary::after { transform: rotate(180deg); }
.sov-about summary:hover {
  background: var(--surface2);
  color:      var(--teal);
}
.sov-about-body {
  padding:     1rem 1.1rem;
  font-size:   .88rem;
  line-height: 1.7;
  color:       var(--text-2);
  border-top:  1px solid var(--border);
}
.sov-about-body p { margin-bottom: .6rem; }
.sov-about-body p:last-child { margin-bottom: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .article-layout { padding: 1.5rem 1rem 4rem; }
  .sov-filters    { gap: .35rem; }
  .sov-filter-btn { padding: .3rem .55rem; font-size: .68rem; }
}