/* =========================================================
   VPNTd components.css
   Cross-page components: tabs / toc / faq / plan cards /
   route tables / platform cards / post cards / callout /
   promo block / feature browser / prose / preview helpers
   ========================================================= */

/* ---------------- tabs ---------------- */
.tab-list{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  padding:11px 18px;
  border-radius:var(--radius-s) var(--radius-s) 0 0;
  border:1px solid transparent;
  border-bottom:none;
  min-height:44px;
  position:relative;
  transition:color .15s;
}
.tab:hover{color:var(--text)}
.tab.is-active{color:var(--text);background:var(--panel);border-color:var(--border)}
.tab.is-active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:2px;
  background:var(--accent);
}
.tab-panel{padding-top:24px;min-width:0}
.tab-panel[hidden]{display:none}

/* ---------------- toc (sticky section nav, behavior in reveal.js) ---------------- */
.toc-tabs{
  position:sticky;
  top:calc(var(--nav-h) + 12px);
  z-index:40;
  display:flex;
  gap:8px;
  align-items:center;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px;
  margin-bottom:28px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  max-width:100%;
}
.toc-tabs::-webkit-scrollbar{display:none}
.toc-tabs a{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-size:13px;
  color:var(--muted);
  padding:8px 14px;
  border-radius:999px;
  min-height:34px;
  flex-shrink:0;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .15s,background-color .15s;
}
.toc-tabs a:hover{color:var(--text)}
.toc-tabs a.is-current{color:var(--ink-on-accent);background:var(--accent);font-weight:600}
body:has(.toc-tabs) section[id]{scroll-margin-top:calc(var(--nav-h) + var(--toc-h) + 36px)}

/* ---------------- faq ---------------- */
.faq-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  margin-bottom:10px;
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:56px;
  padding:15px 20px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:17px;
  color:var(--muted);
  flex-shrink:0;
  transition:color .2s;
}
.faq-item[open] summary::after{content:"−";color:var(--accent)}
.faq-body{padding:0 20px 18px;font-size:14px;color:var(--muted);line-height:1.75}

/* ---------------- plan cards ---------------- */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 24px;
  transition:border-color .15s,transform .15s;
}
.plan-card:hover{border-color:var(--accent-dark);transform:translateY(-2px)}
.plan-card.is-featured{
  border-color:var(--accent-dark);
  box-shadow:0 0 0 1px var(--accent-dark),0 12px 36px var(--accent-glow-soft);
}
.plan-badge{
  position:absolute;
  top:-11px;
  left:20px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--ink-on-accent);
  background:linear-gradient(150deg,var(--accent),var(--accent-dark));
  border-radius:999px;
  padding:4px 12px;
}
.plan-name{font-size:16px;font-weight:700}
.plan-volume{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--muted);
  margin-top:4px;
}
.plan-price{display:flex;align-items:baseline;gap:6px;margin:16px 0 6px}
.plan-price .num{
  font-family:var(--font-display);
  font-size:38px;
  font-weight:800;
  letter-spacing:-.02em;
}
.plan-price .unit{font-size:13px;color:var(--muted)}
.plan-note{font-size:12.5px;color:var(--muted);margin-bottom:16px}
.plan-features{margin:0 0 20px;flex:1 1 auto;min-width:0}
.plan-features li{
  display:flex;
  gap:9px;
  align-items:flex-start;
  font-size:13.5px;
  color:var(--muted);
  padding:5px 0;
}
.plan-features li::before{
  content:"";
  flex:0 0 auto;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent-dark);
  margin-top:8px;
}
.plan-card .btn-primary,
.plan-card .btn-secondary{width:100%}
@media (max-width:880px){.plan-grid{grid-template-columns:1fr}}

/* ---------------- wide tables ---------------- */
.table-scroll{
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}
.route-table,
.data-table,
.compare-table{
  width:100%;
  border-collapse:collapse;
}
.route-table{min-width:640px}
.route-table th{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.route-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:14px;
  color:var(--text);
}
.route-table tr.tr-group td{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--accent-dark);
  padding-top:24px;
  background:none;
}
.route-table .rt-type{font-family:var(--font-mono);font-size:12px;color:var(--text)}
.route-table .rt-yes{color:var(--success)}
.route-table .rt-no{color:var(--muted)}

/* mobile: rows become stacked cards, no horizontal scrolling needed */
@media (max-width:720px){
  .route-table{min-width:0}
  .route-table thead{display:none}
  .route-table tr{
    display:block;
    border:1px solid var(--border);
    border-radius:var(--radius-s);
    background:var(--panel);
    margin:0 0 10px;
    padding:4px 14px;
  }
  .route-table tr.tr-group{
    border:none;
    background:none;
    padding:12px 2px 0;
    margin-bottom:2px;
  }
  .route-table tr.tr-group td{padding:0;border:none}
  .route-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:9px 0;
    border-bottom:1px solid var(--border);
  }
  .route-table td:last-child{border-bottom:none}
  .route-table td::before{
    content:attr(data-label);
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.14em;
    color:var(--muted);
    flex-shrink:0;
  }
  .route-table td:first-child{font-weight:600}
}

.data-table{min-width:560px}
.data-table th{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td{
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  font-size:14px;
  color:var(--text);
}
.data-table td:first-child{font-family:var(--font-mono);font-size:13px}
.data-table .yes{color:var(--success)}
.data-table .no{color:var(--muted)}
/* defensive: bare tables dropped into blog article bodies */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* ---------------- platform cards ---------------- */
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.platform-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 14px;
  transition:border-color .15s,transform .15s;
}
.platform-card:hover{border-color:var(--accent-dark);transform:translateY(-2px)}
.platform-card svg{width:26px;height:26px;color:var(--muted);flex-shrink:0}
.platform-card:hover svg{color:var(--accent)}
.platform-name{font-size:14px;font-weight:600}
.platform-card .btn-ghost{width:100%;justify-content:center}
@media (max-width:960px){.platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------- blog post cards ---------------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  transition:border-color .15s,transform .15s;
}
.post-card:hover{border-color:var(--accent-dark);transform:translateY(-2px)}
.post-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.post-tag{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--accent-dark);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.post-date{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.post-title{font-size:16.5px;font-weight:700;line-height:1.45;margin-bottom:10px}
.post-title a{color:var(--text)}
.post-title a:hover{color:var(--accent)}
.post-summary{font-size:13.5px;color:var(--muted);line-height:1.7;flex:1 1 auto}
@media (max-width:880px){.post-grid{grid-template-columns:1fr}}

/* ---------------- callout ---------------- */
.callout{
  border-left:3px solid var(--accent-dark);
  background:var(--panel);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:16px 20px;
  font-size:14px;
  color:var(--muted);
  line-height:1.75;
  margin:20px 0;
}
.callout strong{color:var(--text)}

/* ---------------- end-of-article promo block ---------------- */
.promo-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 28px;
}
.promo-block .promo-copy{flex:1 1 300px;min-width:0}
.promo-block .promo-brand{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--accent-dark);
  margin-bottom:6px;
}
.promo-block .promo-line{font-size:16px;font-weight:700}
.promo-block .btn-primary{flex:0 0 auto}

/* ---------------- badges & chips ---------------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12.5px;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:999px;
  padding:6px 14px;
  max-width:100%;
}
.badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--success);
  box-shadow:0 0 8px var(--success);
  flex-shrink:0;
}
.badge-accent{color:var(--accent);border-color:var(--accent-dark)}
.chip{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:999px;
  padding:7px 15px;
  max-width:100%;
  overflow:hidden;
}

/* ---------------- feature browser ("trace worklist") ---------------- */
.feature-browser{
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.feature-list{display:flex;flex-direction:column;gap:6px}
.feature-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  font-size:14.5px;
  font-weight:600;
  color:var(--muted);
  background:none;
  border:none;
  border-left:2px solid var(--border);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:13px 14px;
  min-height:48px;
  transition:color .15s,border-color .15s,background-color .15s;
}
.feature-item:hover{color:var(--text);background:var(--panel)}
.feature-item.is-active{color:var(--text);border-left-color:var(--accent);background:var(--panel)}
.feature-no{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--accent-dark);
  flex-shrink:0;
}
.feature-stage{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  min-width:0;
}
.feature-panel[hidden]{display:none}
.feature-panel h3{margin-bottom:12px}
.feature-panel p{font-size:14.5px;color:var(--muted);line-height:1.8}
.feature-demo{
  margin-top:20px;
  height:64px;
  border:1px dashed var(--border);
  border-radius:var(--radius-s);
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:14px 14px;
}

/* mobile: degrades to a full-row accordion (pure CSS reflow,
   switching handled by tabs.js role=tab logic) */
@media (max-width:880px){
  .feature-browser{display:flex;flex-direction:column;gap:0}
  .feature-list{display:contents}
  .feature-stage{display:contents}
  .feature-item{
    border-left:none;
    border:1px solid var(--border);
    border-radius:var(--radius-s);
    background:var(--panel);
  }
  .feature-item.is-active{border-color:var(--accent-dark)}
  .feature-panel{
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 var(--radius-s) var(--radius-s);
    background:var(--panel);
    padding:18px 20px;
    margin-bottom:10px;
  }
  .feature-item:nth-child(1){order:2}
  .feature-item:nth-child(2){order:4}
  .feature-item:nth-child(3){order:6}
  .feature-item:nth-child(4){order:8}
  .feature-item:nth-child(5){order:10}
  .feature-item:nth-child(6){order:12}
  .feature-panel:nth-child(1){order:3}
  .feature-panel:nth-child(2){order:5}
  .feature-panel:nth-child(3){order:7}
  .feature-panel:nth-child(4){order:9}
  .feature-panel:nth-child(5){order:11}
  .feature-panel:nth-child(6){order:13}
}

/* ---------------- article prose ---------------- */
.prose{font-size:15px;line-height:1.85;color:var(--text);min-width:0}
.prose p{margin-bottom:16px}
.prose h2{margin:40px 0 14px;font-size:24px}
.prose h3{margin:30px 0 10px;font-size:18px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:0}
.prose ul li{
  position:relative;
  margin-bottom:8px;
  padding-left:18px;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;top:11px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent-dark);
}
.prose ol{counter-reset:step}
.prose ol li{
  position:relative;
  margin-bottom:10px;
  padding-left:36px;
}
.prose ol li::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;top:3px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--accent-dark);
  border:1px solid var(--border);
  border-radius:50%;
  width:24px;height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{
  border-left:3px solid var(--accent-dark);
  padding:8px 18px;
  margin:18px 0;
  color:var(--muted);
  background:var(--panel);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
}

/* ---------------- design-preview-only helpers ---------------- */
.pv-sec{padding-top:52px;padding-bottom:52px;border-bottom:1px solid var(--border)}
.pv-title{font-size:24px;font-weight:800;margin-bottom:6px}
.pv-sub{color:var(--muted);font-size:14px;margin-bottom:26px}
.pv-note{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:14px;letter-spacing:.04em}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.pv-swatch{
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  overflow:hidden;
  background:var(--panel);
}
.pv-swatch .sw{height:60px}
.pv-swatch .sw-meta{
  padding:8px 10px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--muted);
  letter-spacing:.03em;
  line-height:1.6;
}
.sw-bg{background:var(--bg)}
.sw-panel{background:var(--panel)}
.sw-panel2{background:var(--panel2)}
.sw-border{background:var(--border)}
.sw-accent{background:var(--accent)}
.sw-accent-dark{background:var(--accent-dark)}
.sw-text{background:var(--text)}
.sw-muted{background:var(--muted)}
.sw-success{background:var(--success)}
.sw-warn{background:var(--warn)}
.sw-error{background:var(--error)}
.sw-trace{background:var(--trace)}
.sw-dot{background:var(--dot)}
.sw-ink{background:var(--ink-on-accent)}
.pv-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
.pv-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--muted);
  flex:0 0 110px;
}
.pv-h1-demo{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(30px,4vw,44px);
  line-height:1.15;
  letter-spacing:-.015em;
  margin-bottom:8px;
}
.pv-block{margin-bottom:22px;min-width:0}