/* CountryCompass — stylesheet
 *
 * Split out of index.html so every hand-edited file stays under the project's
 * 500-line break-glass limit (Phase 2 spec: "under 500 lines or cleanly split").
 * No build tool is involved: the browser loads this file directly.
 *
 * Palette is fixed by CLAUDE.md — navy, teal, bronze, parchment. Do not change.
 */

:root {
  --navy: #1B2A4A;
  --teal: #0D7C6B;
  --teal-light: #E8F4F1;
  --parchment: #F8F5F0;
  --bronze: #C8943A;
  --text: #1E2434;
  --muted: #6B7A8A;
  --border: #D9D2C5;
  --good: #1F8B4C;
  --good-bg: #EAF7EE;
  --average: #C8943A;
  --average-bg: #FCF5E8;
  --poor: #C44E4E;
  --poor-bg: #FDEAEA;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--parchment);
  line-height: 1.6;
  min-height: 100vh;
}

/* Header */
.header { background: var(--navy); color: #fff; padding: 2.5rem 1.5rem 2rem; text-align: center; }
.header h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 2.25rem; font-weight: 400; letter-spacing: -.02em; margin-bottom: .5rem;
}
.header h1 span { color: var(--bronze); }
.header p { color: #B0C4D8; font-size: .95rem; max-width: 34rem; margin: 0 auto; }
.header .badge {
  display: inline-block; margin-top: .75rem;
  background: rgba(255,255,255,.08); color: var(--bronze);
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; padding: .25rem .75rem; border-radius: 100px;
}

/* Filters */
.filters {
  max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  background: #fff; border-bottom: 1px solid var(--border);
}
.filters label {
  font-size: .8rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.filters select, .filters input[type="search"] {
  font-family: Inter, sans-serif; font-size: .875rem; color: var(--text);
  padding: .4rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; min-width: 140px;
}
.filters input[type="search"] { min-width: 190px; }
.filters input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.filters .count { margin-left: auto; font-size: .85rem; color: var(--muted); }
.filters .clear-btn {
  font-size: .8rem; color: var(--teal); background: none; border: none;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.filters .clear-btn:hover { color: var(--navy); }

/* Table */
.table-wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem; overflow-x: auto; }
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; font-size: .875rem;
  /* Full-width table needs room for 11 columns. Below 900px the optional
     columns are hidden and this minimum is released, so the five remaining
     columns fit a phone without sideways scrolling. */
  min-width: 1040px;
}
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--navy); color: #fff;
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; padding: .85rem .65rem;
  text-align: left; white-space: nowrap;
  cursor: pointer; user-select: none; transition: background .15s;
}
thead th:hover { background: #243558; }
thead th .sort-icon { display: inline-block; margin-left: 4px; opacity: .3; font-size: .65rem; }
thead th.sorted-asc .sort-icon, thead th.sorted-desc .sort-icon { opacity: 1; }
thead th.col-country { padding-left: 1rem; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--teal-light); }
tbody td { padding: .75rem .65rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }

/* Row striping — helps the eye track across 30+ rows */
tbody tr.data-row:nth-of-type(4n+3) { background: #FCFAF6; }

.col-country { min-width: 165px; }
.country-cell {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; padding-left: .35rem;
}
.country-cell .flag { font-size: 1.3rem; line-height: 1; }
.country-notes-toggle {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .7rem; padding: 0 .15rem; opacity: .5; transition: opacity .15s;
}
.country-notes-toggle:hover, .country-notes-toggle[aria-expanded="true"] { opacity: 1; color: var(--teal); }

/* Tier badges */
.tier {
  display: inline-block; padding: .2rem .55rem; border-radius: 100px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.tier-good { background: var(--good-bg); color: var(--good); }
.tier-average { background: var(--average-bg); color: var(--average); }
.tier-poor { background: var(--poor-bg); color: var(--poor); }
.tier-easy { background: var(--good-bg); color: var(--good); }
.tier-moderate { background: var(--average-bg); color: var(--average); }
.tier-hard { background: var(--poor-bg); color: var(--poor); }

.sub-label {
  display: block; font-size: .65rem; color: var(--muted);
  font-weight: 400; margin-top: 2px;
  max-width: 170px; white-space: normal; line-height: 1.35;
}
.inline-value { font-variant-numeric: tabular-nums; }
.visa-detail { font-size: .75rem; line-height: 1.35; }
.visa-detail .visa-meta { display: block; font-size: .65rem; color: var(--muted); }

/* The verified column carries a badge and a link, so it needs its own width */
td:last-child { min-width: 120px; }
th:last-child { min-width: 120px; }

/* "Best for" tags */
.tags { display: flex; flex-wrap: wrap; gap: 3px; max-width: 150px; }
.tag {
  display: inline-block; font-size: .65rem; line-height: 1.5;
  padding: .05rem .4rem; border-radius: 3px;
  background: var(--teal-light); color: var(--teal); white-space: nowrap;
}

/* Trust Engine — per-row verification badge + source link */
.verify-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 600; white-space: nowrap;
  padding: .1rem .4rem; border-radius: 100px;
}
.verify-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.verify-fresh { background: var(--good-bg); color: var(--good); }
.verify-aging { background: var(--average-bg); color: var(--average); }
.verify-stale { background: var(--poor-bg); color: var(--poor); }
.source-link { display: block; font-size: .65rem; margin-top: 3px; }
.source-link a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--border); }
.source-link a:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* Expanded notes row */
.notes-row { display: none; }
.notes-row.visible { display: table-row; }
.notes-row td {
  background: #FBFAF7; padding: .75rem 1rem; font-size: .8rem;
  color: var(--muted); border-bottom: 1px solid var(--border);
}
.notes-row td strong { color: var(--text); }
.notes-extra { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: .5rem; }
.notes-extra span { font-size: .75rem; }
.notes-extra b { color: var(--text); font-weight: 600; }

/* Footer */
.footer {
  max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem 3rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: .8rem; color: var(--muted);
}
.footer a { color: var(--teal); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .verify { display: flex; align-items: center; gap: .35rem; }
.footer .verify::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--good); flex-shrink: 0;
}

/* Methodology modal */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 100; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--radius); max-width: 560px; width: 100%;
  max-height: 80vh; overflow-y: auto; padding: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.2); position: relative;
}
.modal h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.35rem; font-weight: 400; margin-bottom: 1rem; color: var(--navy);
}
.modal h3 { font-size: .85rem; font-weight: 600; margin: 1rem 0 .35rem; color: var(--text); }
.modal p, .modal li { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.modal ul { padding-left: 1.2rem; }
.modal li { margin-bottom: .25rem; }
.modal-close {
  position: absolute; top: .75rem; right: 1rem; background: none; border: none;
  font-size: 1.5rem; color: var(--muted); cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--muted); display: none; }
.empty-state.visible { display: block; }
.empty-state h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.25rem; color: var(--text); margin-bottom: .5rem;
}

/* Mobile column toggle — only shown on narrow screens */
.mobile-toggle {
  display: none; font-size: .8rem; color: var(--teal); background: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .4rem .75rem; cursor: pointer;
}

/* Responsive */
@media (max-width: 900px) {
  .mobile-toggle { display: inline-block; }
  /* Compact view: show only the columns that matter for a first decision.
     Releasing min-width lets those five fit the screen with no h-scroll. */
  body:not(.show-all) .col-optional { display: none; }
  body:not(.show-all) table { min-width: 0; }
  body.show-all table { min-width: 1040px; }
  /* Tighten the surviving columns so five of them fit a 470px phone screen. */
  body:not(.show-all) .col-country { min-width: 92px; }
  body:not(.show-all) td:last-child,
  body:not(.show-all) th:last-child { min-width: 84px; }
  body:not(.show-all) .visa-detail { display: none; }
  body:not(.show-all) .source-link { display: none; }
  body:not(.show-all) tbody td { padding: .5rem .35rem; }
  body:not(.show-all) thead th { padding: .6rem .35rem; font-size: .62rem; }
  /* The tax exception notes are long sentences; at this width they must wrap
     tightly or they force the whole table wider than the screen. */
  body:not(.show-all) .sub-label { max-width: 74px; font-size: .58rem; line-height: 1.25; }
  body:not(.show-all) .country-cell { gap: .3rem; padding-left: 0; font-size: .78rem; }
  body:not(.show-all) .country-cell .flag { font-size: .95rem; }
}
@media (max-width: 768px) {
  .header h1 { font-size: 1.6rem; }
  .header { padding: 2rem 1rem 1.5rem; }
  .filters { padding: .75rem 1rem; }
  .filters select, .filters input[type="search"] { min-width: 100px; flex: 1; }
  .table-wrap { padding: 1rem; }
  thead th { font-size: .68rem; padding: .6rem .4rem; }
  tbody td { padding: .55rem .4rem; font-size: .8rem; }
  .col-country { min-width: 120px; }
  .footer { flex-direction: column; text-align: center; }
  .modal { padding: 1.5rem; }
}
@media (max-width: 480px) {
  .header h1 { font-size: 1.35rem; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters .count { margin-left: 0; }
  .country-cell .flag { font-size: 1rem; }
  .tier { font-size: .68rem; padding: .15rem .4rem; }
}