/* =========================================================================
   VPNSort · nodes.css
   Page-specific styling for the server nodes / route catalogue page.
   All colour values come from :root tokens in base.css.
   ========================================================================= */

:root{
  --flag-orange:#E87722;
}

/* ---------- inline flag sprite ---------- */

.flag-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}

.fl-orange{fill:var(--flag-orange)}
.fl-stroke-white{fill:none;stroke:var(--flag-white)}
.fl-stroke-yellow{fill:none;stroke:var(--flag-yellow)}
.fl-stroke-green{fill:none;stroke:var(--flag-green)}
.fl-stroke-red-thin{fill:none;stroke:var(--flag-red);stroke-width:1.2}

/* ---------- page header panel ---------- */

.nodes-hero{
  position:relative;
  margin-top:12px;
  padding:var(--space-7) var(--space-6);
  border:1px solid var(--panel-border);
  border-radius:var(--r-panel);
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 300px at 50% 112%, var(--white-a96) 0%, var(--white-a00) 70%),
    linear-gradient(160deg, var(--sand-1) 0%, var(--sand-mid) 54%, var(--sand-2) 100%);
  box-shadow:var(--shadow-panel);
}

.nodes-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:radial-gradient(circle, var(--dot-strong) 1px, var(--dot-strong-clear) 1.15px);
  background-size:16px 16px;
  opacity:.45;
  pointer-events:none;
}

.nodes-hero::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-120px;
  width:1100px;
  height:320px;
  margin-left:-550px;
  z-index:1;
  background:radial-gradient(ellipse 50% 100% at 50% 100%, var(--white-a96) 0%, var(--white-a00) 72%);
  pointer-events:none;
}

.nodes-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--space-6);
  align-items:center;
}

.nodes-hero-copy{
  min-width:0;
}

.nodes-title{
  margin:0;
  max-width:18ch;
  font-size:var(--fs-h1);
  line-height:1.06;
  letter-spacing:-.03em;
}

.nodes-lede{
  margin-top:14px;
  max-width:56ch;
}

.nodes-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:var(--space-5);
}

.nodes-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}

/* ---------- region badge wall ---------- */

.region-wall{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-content:start;
  min-width:0;
}

.region-badge{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--panel-border-soft);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  box-shadow:var(--shadow-chip);
}

.region-badge svg{
  width:20px;
  height:14px;
  flex:0 0 auto;
  border-radius:3px;
  box-shadow:0 0 0 1px var(--ink-a12);
}

.region-badge-text{
  display:grid;
  gap:1px;
  min-width:0;
}

.region-badge-text b{
  font-size:12.5px;
  font-weight:700;
  line-height:1.25;
  color:var(--text);
  white-space:nowrap;
}

.region-badge-text span{
  font-family:var(--font-mono);
  font-size:9.5px;
  line-height:1.35;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}

/* ---------- route table note ---------- */

.table-note{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.6;
  color:var(--text-muted);
}

/* ---------- line type cards ---------- */

.type-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5);
}

.type-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.type-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.type-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:0 0 auto;
  border-radius:var(--r-xs);
  background:var(--accent-a08);
  color:var(--accent);
}

.type-index{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--text-muted);
  white-space:nowrap;
}

.type-card h3{
  margin:0;
}

.type-card p{
  margin:0;
  font-size:13.6px;
  line-height:1.7;
  color:var(--text-muted);
}

.type-list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  font-size:12.8px;
  line-height:1.6;
  color:var(--text-muted);
}

.type-list li{
  display:flex;
  align-items:flex-start;
  gap:7px;
}

.type-list li::before{
  content:"";
  width:5px;
  height:5px;
  margin-top:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--accent-a45);
}

.type-list b{
  flex:0 0 auto;
  font-weight:700;
  color:var(--text);
}

/* ---------- route pick cards ---------- */

.pick-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--space-4);
}

.pick-card{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.pick-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:0 0 auto;
  border-radius:var(--r-xs);
  background:var(--accent-a08);
  color:var(--accent);
}

.pick-card h3{
  margin:0;
  font-size:15.5px;
}

.pick-card p{
  margin:0;
  font-size:13.2px;
  line-height:1.66;
  color:var(--text-muted);
}

.pick-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-top:auto;
  padding-top:4px;
  font-size:11.5px;
  color:var(--text-muted);
}

.pick-line .chip{
  min-height:22px;
  padding:0 8px;
  font-size:10.5px;
}

/* ---------- responsive ---------- */

@media (max-width:1100px){
  .type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .nodes-hero{padding:var(--space-6) var(--space-5)}
  .nodes-hero-inner{grid-template-columns:minmax(0,1fr)}
  .type-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
  .nodes-hero{
    margin-top:8px;
    padding:var(--space-5) var(--space-4);
    border-radius:20px;
  }
  .nodes-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .nodes-actions .btn{
    width:100%;
    max-width:320px;
  }
  .nodes-facts{gap:6px}
  .region-wall{grid-template-columns:minmax(0,1fr)}
  .region-badge{padding:8px 10px}
}

@media (max-width:380px){
  .nodes-hero{padding:var(--space-4) var(--space-3)}
}