/* ==========================================================================
   VPNUJ — nodes.css
   Line & region page: page head, region side panel, line-type cards,
   pick list, region cards, decorative arc band, subscription ledger.
   ========================================================================== */

/* shared flag clip definition host */
.flag-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

/* ==========================================================================
   1. Page head
   ========================================================================== */

.node-hero{
  position:relative;
  max-width:100%;
  overflow-x:clip;
  padding-block:clamp(26px,3.6vw,44px) clamp(18px,2.4vw,28px);
}

.node-hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}

.node-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}

.node-title{
  font-size:clamp(32px,4.2vw,54px);
  line-height:1.1;
  letter-spacing:-.03em;
}

.node-lede{
  max-width:58ch;
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
}

.node-lede strong{color:var(--text);font-weight:600;}

.node-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:2px;
}

.node-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

/* ==========================================================================
   2. Region side panel
   ========================================================================== */

.node-side{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  padding:22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
}

.node-side-note{
  font-size:13px;
  line-height:1.65;
  color:var(--text-muted);
}

.region-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.region-chips li{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 12px;
  border-radius:var(--r-pill);
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}

.node-flags{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  padding-top:13px;
  border-top:1px solid var(--border);
}

.node-flag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
}

.node-flag .flag{flex:none;}

.node-side-foot{
  font-size:11px;
  letter-spacing:.06em;
  color:var(--text-soft);
}

/* ==========================================================================
   3. Document sections
   ========================================================================== */

.node-doc{
  position:relative;
  padding-bottom:var(--sp-6);
}

.node-sec{
  padding-block:clamp(26px,3.4vw,44px);
  border-top:1px solid var(--border);
}

.node-sec:first-of-type{border-top:0;}
.node-sec > *{min-width:0;}
.node-sec > .section-head{margin-bottom:var(--sp-5);}

.table-note{
  display:block;
  margin-top:12px;
  font-size:11.5px;
  line-height:1.7;
  color:var(--text-soft);
}

.stream-flag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

.stream-flag.is-yes{color:var(--text);}

/* ==========================================================================
   4. Line type cards
   ========================================================================== */

.line-types{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.line-type{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:24px 22px;
  border-radius:var(--r-xl);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}

.line-type:hover{
  transform:translateY(-2px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card-hover);
}

.lt-index{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--text-soft);
}

.line-type h3{font-size:18px;}

.lt-lead{
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

.lt-list{
  display:grid;
  gap:6px;
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}

.lt-list li{
  position:relative;
  padding-left:14px;
}

.lt-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
}

.lt-cost{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:12px;
  border-top:1px dashed var(--border);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--text-soft);
}

.lt-cost b{color:var(--text);font-weight:600;}

/* ink variant */
.line-type.is-ink{
  overflow:hidden;
  color:var(--ink-text);
  border-color:transparent;
  background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 58%,var(--ink-3) 100%);
  box-shadow:inset 0 1px 0 var(--ink-line-hi),var(--shadow-sky);
}

.line-type.is-ink::after{
  content:"";
  position:absolute;
  left:-10%;
  top:-45%;
  width:90%;
  height:130%;
  pointer-events:none;
  background:radial-gradient(closest-side,var(--glow-sun),var(--glow-sun-2) 46%,var(--glow-sun-0) 72%);
}

.line-type.is-ink > *{position:relative;z-index:1;}
.line-type.is-ink h3{color:var(--white);}
.line-type.is-ink .lt-index{color:var(--ink-muted);}
.line-type.is-ink .lt-lead,
.line-type.is-ink .lt-list{color:var(--ink-muted);}

.line-type.is-ink .lt-cost{
  color:var(--ink-muted);
  border-top-color:var(--ink-line-hi);
}

.line-type.is-ink .lt-cost b{color:var(--white);}

.line-type.is-ink:hover{
  border-color:transparent;
  box-shadow:inset 0 1px 0 var(--ink-line-hi),var(--shadow-ink-hover);
}

/* ==========================================================================
   5. Pick list (by usage)
   ========================================================================== */

.pick-list{
  display:grid;
  gap:12px;
}

.pick-row{
  display:grid;
  grid-template-columns:minmax(0,250px) minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:18px 20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}

.pick-row:hover{
  border-color:var(--border-strong);
  box-shadow:var(--shadow-card);
}

.pick-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.pick-head h3{font-size:16px;}

.pick-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.pick-text{
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ==========================================================================
   6. Region cards + decorative arc band
   ========================================================================== */

.region-arcs{
  width:100%;
  height:auto;
  margin-bottom:var(--sp-5);
  color:var(--accent);
}

.ra-base{stroke:var(--border);stroke-width:1;}
.ra-arc{stroke:var(--accent-line);stroke-width:1.4;}
.ra-arc-soft{stroke:var(--border-strong);}
.ra-node{fill:var(--accent);}

.region-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.region-card .panel-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.region-card h3{font-size:17px;}

.region-meta{
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  letter-spacing:.02em;
  color:var(--text-soft);
}

.region-card p:last-child{
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}

/* ==========================================================================
   7. Access grid + subscription ledger
   ========================================================================== */

.access-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.access-card .panel-body{padding:22px;}

.access-card .fact-ledger{
  margin-top:0;
  border-top:0;
}

.access-card .fact-ledger > div:last-child{border-bottom:0;}

.faq-more{
  display:block;
  margin-top:var(--sp-4);
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.faq-more a{
  color:var(--accent-dark);
  text-underline-offset:2px;
}

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width:1080px){
  .node-hero-inner{grid-template-columns:minmax(0,1fr);}
  .node-side{max-width:640px;}
}

@media (max-width:980px){
  .line-types{grid-template-columns:minmax(0,1fr);}
  .access-grid{grid-template-columns:minmax(0,1fr);}
  .region-grid{grid-template-columns:minmax(0,1fr);}
  .pick-row{grid-template-columns:minmax(0,1fr);gap:10px;}
}

@media (max-width:640px){
  .node-title{font-size:clamp(28px,7.4vw,34px);}
  .node-lede{font-size:15px;}
  .node-side{padding:18px;max-width:100%;}
  .node-sec{padding-block:26px;}
  .line-type{padding:20px 18px;}
  .pick-row{padding:16px;}
  .access-card .panel-body{padding:18px;}
  .region-arcs{margin-bottom:var(--sp-4);}
}