/* Country detail pages. Tokens come from theme.css. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); }

.top-banner {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1rem;
}

.top-banner-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.back-link {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--text-muted); font-size: 0.85rem;
  transition: color 0.15s ease;
}
.back-link:hover { color: var(--accent); }
.back-link svg { width: 15px; height: 15px; }

.logo {
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem; color: var(--green);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.logo:hover { color: var(--green-bright); }

.container { max-width: 900px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* Hero */
.country-hero { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.country-hero-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.country-flag { font-size: 3rem; line-height: 1; }
.country-hero h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; line-height: 1.15; }

.status-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600;
  border: 1px solid;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.status-pill.active { background: var(--green-dim); border-color: var(--green-edge); color: var(--green); }
.status-pill.active .dot { background: var(--green); }
.status-pill.blocked { background: var(--red-dim); border-color: var(--red-edge); color: var(--red); }
.status-pill.blocked .dot { background: var(--red); }

.country-lede { font-size: 1rem; color: var(--text-muted); max-width: 62ch; text-wrap: pretty; }

/* Live counter */
.counter-card {
  padding: 1.5rem; border-radius: 12px; border: 1px solid; margin-bottom: 1.5rem;
}
.counter-card.active { background: linear-gradient(135deg, var(--green-dim), transparent); border-color: var(--green-edge); }
.counter-card.blocked { background: linear-gradient(135deg, var(--red-dim), transparent); border-color: var(--red-edge); }
.counter-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.counter-label .dot { width: 8px; height: 8px; border-radius: 50%; }
.counter-card.active .counter-label .dot { background: var(--green); }
.counter-card.blocked .counter-label .dot { background: var(--red); }
.counter-value { font-family: 'Space Mono', monospace; font-size: clamp(2.5rem, 9vw, 4rem); font-weight: 700; line-height: 1; margin-bottom: 0.6rem; }
.counter-card.active .counter-value { color: var(--green); }
.counter-card.blocked .counter-value { color: var(--red); }
.counter-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8rem; color: var(--text-muted); }
.counter-meta strong { color: var(--text); }

/* Sections */
section { margin-bottom: 2rem; }
h2 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin-bottom: 0.85rem; font-weight: 600;
}
h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.5rem; }
p { margin-bottom: 0.85rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1.25rem;
}

.split { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* Map */
.map-card { padding: 0; overflow: hidden; }
.map-card svg { width: 100%; height: auto; display: block; background: var(--bg); }
.map-card .country-path { fill: var(--map-base); stroke: var(--map-stroke); stroke-width: 0.3; }
.map-card .country-path.fsd-allowed { fill: var(--map-go); stroke: var(--map-go-stroke); stroke-width: 0.4; }
.map-card .country-path.fsd-blocked { fill: var(--map-stop); stroke: var(--map-stop-stroke); stroke-width: 0.4; }
.map-card .country-path.subject { stroke-width: 0.9; }
.map-card .country-path.subject.fsd-allowed { fill: var(--green); stroke: var(--green-bright); }
.map-card .country-path.subject.fsd-blocked { fill: var(--red); stroke: var(--red-bright); }
.map-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1rem; border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--text-muted);
}
.map-legend { display: flex; gap: 0.9rem; }
.map-legend span { display: flex; align-items: center; gap: 0.35rem; }
.legend-dot { width: 9px; height: 9px; border-radius: 2px; }
.legend-dot.allowed { background: var(--green); }
.legend-dot.blocked { background: var(--red); }
.legend-dot.none { background: var(--border-light); }

/* Key-value list */
.kv { display: flex; flex-direction: column; }
.kv-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border);
}
.kv-row:last-child { border-bottom: none; }
.kv-key { font-size: 0.8rem; color: var(--text-muted); }
.kv-val { font-family: 'Space Mono', monospace; font-size: 0.9rem; font-weight: 700; text-align: right; }
.kv-val .unit { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.75rem; color: var(--text-muted); margin-left: 0.25rem; }
.kv-val.green { color: var(--green); }
.kv-val.red { color: var(--red); }

/* Quality badge */
.quality {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: 'Space Mono', monospace; font-size: 0.65rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem; border-radius: 4px; border: 1px solid;
}
.quality.official { background: var(--green-dim); border-color: var(--green-edge); color: var(--green); }
.quality.high, .quality.medium-high { background: var(--accent-dim); border-color: var(--accent-edge); color: var(--accent); }
.quality.medium, .quality.low-medium { background: var(--yellow-dim); border-color: var(--yellow); color: var(--yellow); }
.quality.low, .quality.estimate { background: var(--surface-elevated); border-color: var(--border-light); color: var(--text-dim); }

.source-note { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; }
.source-list { font-family: 'Space Mono', monospace; font-size: 0.7rem; color: var(--text-dim); margin-top: 0.5rem; }

/* Registrations */
.regs-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.regs-table th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); font-weight: 600; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.regs-table th:not(:first-child), .regs-table td:not(:first-child) { text-align: right; }
.regs-table td { padding: 0.6rem 0; border-bottom: 1px solid var(--border); font-family: 'Space Mono', monospace; }
.regs-table td:first-child { font-family: 'Inter', sans-serif; color: var(--text-muted); }
.regs-table tr:last-child td { border-bottom: none; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.regs-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; margin-top: 0.35rem; }
.regs-bar span { display: block; height: 100%; background: var(--accent); }

/* Formula */
.formula {
  font-family: 'Space Mono', monospace; font-size: 0.85rem;
  color: var(--green); line-height: 1.7; word-break: break-word;
}
.formula .op { color: var(--text-muted); }

/* Country navigation */
.country-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.country-nav a {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.65rem; font-size: 0.78rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted);
}
.country-nav a:hover { border-color: var(--border-light); color: var(--text); }
.country-nav a .status-dot { width: 6px; height: 6px; border-radius: 50%; }
.country-nav a .status-dot.allowed { background: var(--green); }
.country-nav a .status-dot.blocked { background: var(--red); }

footer {
  border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 3rem;
  text-align: center; font-size: 0.8rem; color: var(--text-muted);
}
footer a { color: var(--accent); }

.delta.partial {
  font-family: 'Inter', sans-serif; font-size: 0.72rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em;
}