/* =========================================================================
   Pacewave — Core Network page (core-network.html)
   Loaded after styles.css. Reuses the homepage diagram language (.e2e-*),
   subpage primitives (.subpage-hero, .sub-h2, .feature-card, .detail-card,
   .cta-box, .related-card). All new classes are prefixed cn-.
   ========================================================================= */

/* diagram tokens (same values as .e2e-wrap on the homepage) available page-wide */
.cn-page {
  --e2e-teal: #14a3b8;
  --e2e-teal-soft: rgba(20, 163, 184, 0.14);
  --e2e-cell: #2a2e36;
  --e2e-panel: rgba(255, 255, 255, 0.025);
  --e2e-line: rgba(255, 255, 255, 0.09);
}
.cn-section { margin-top: 3.5rem; }
.cn-section .sub-h2 { margin-top: 0; }
.cn-foot { margin-top: .75rem; font-size: .8rem; color: var(--text-muted); font-style: italic; }

/* ── Hero stats ─────────────────────────────────────────────────────────── */
.cn-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.cn-stat { padding: 1.25rem 1.5rem; }
.cn-stat + .cn-stat { border-left: 1px solid var(--border); }
.cn-stat-v {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  background: var(--gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cn-stat-l { margin-top: .35rem; font-size: .85rem; color: var(--text-muted); }
.cn-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.5rem;
  padding: .5rem 0;
  font-size: .9rem;
  color: var(--text-muted);
  transition: color var(--t-fast);
}
.cn-back:hover { color: var(--primary); }
.cn-back .material-icons-outlined { font-size: 18px; }


/* ── Architecture diagram ───────────────────────────────────────────────── */
.cn-arch-wrap { margin-top: 1.5rem; }
.cn-arch {
  display: grid;
  grid-template-columns: 170px 96px minmax(0, 1fr) 96px 220px;
  grid-template-rows: auto repeat(4, auto);
  align-items: center;
  position: relative;
}
.cn-arch > * { position: relative; z-index: 1; }

.cn-head {
  grid-row: 1;
  align-self: end;
  padding-bottom: .75rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--e2e-teal);
}
.cn-head--access { grid-column: 1; }
.cn-head--core   { grid-column: 3; padding: 1rem 1rem .75rem; }
.cn-head--int    { grid-column: 5; }

.cn-core-bg {
  grid-column: 3;
  grid-row: 1 / 6;
  align-self: stretch;
  z-index: 0;
  border: 1px solid var(--e2e-line);
  border-radius: 14px;
  background: var(--e2e-panel);
}

.cn-r1 { grid-row: 2; }
.cn-r2 { grid-row: 3; }
.cn-r3 { grid-row: 4; }
.cn-r4 { grid-row: 5; }
.cn-access          { grid-column: 1; }
.cn-conn--in        { grid-column: 2; }
.cn-sub             { grid-column: 3; }
.cn-conn--out       { grid-column: 4; }
.cn-dest            { grid-column: 5; }
.cn-conn--api       { grid-column: 4; grid-row: 2 / 4; }
.cn-int             { grid-column: 5; grid-row: 2 / 4; }

.cn-access {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem .8rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.25;
  background: var(--e2e-cell);
  border-radius: 10px;
}
.cn-access .material-icons-outlined { color: var(--e2e-teal); font-size: 24px; flex-shrink: 0; }

.cn-sub { margin: 0 1rem .9rem; }
.cn-r4.cn-sub { margin-bottom: 1rem; }
.cn-cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* network functions are buttons */
.cn-nf {
  font: inherit;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.e2e-cell.cn-nf { font-size: .82rem; font-weight: 500; color: var(--text); }
.e2e-up.cn-nf { width: 100%; border: 1.5px solid transparent; }
.cn-nf:hover,
.cn-nf:focus-visible,
.cn-nf.is-on {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(20,163,184,.35);
  outline: none;
}
.e2e-cell--data.cn-nf:hover, .e2e-cell--data.cn-nf.is-on { border-color: #fff; }

.cn-up-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30%;
  gap: .45rem;
}
.cn-up-grid .cn-ims { grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center; }
.cn-iface {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-muted);
}

/* bi-directional connectors (same language as the homepage) */
.cn-conn {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background: linear-gradient(var(--e2e-teal), var(--e2e-teal)) center / calc(100% - 12px) 2px no-repeat;
}
.cn-conn::before,
.cn-conn::after {
  content: '';
  position: absolute;
  top: calc(50% - 5px);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.cn-conn::before { left: 0;  border-right: 8px solid var(--e2e-teal); }
.cn-conn::after  { right: 0; border-left: 8px solid var(--e2e-teal); }
.cn-conn em {
  transform: translateY(-14px);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--e2e-teal);
  white-space: nowrap;
}

.cn-dest {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .2rem;
  padding: 1.1rem .9rem;
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 999px / 60%;
  background: rgba(255,255,255,.03);
}
.cn-dest .material-icons-outlined { color: var(--e2e-teal); font-size: 30px; }
.cn-dest strong { font-size: .95rem; }
.cn-dest small { font-size: .75rem; color: var(--text-muted); }

.cn-int {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: 1rem;
  border: 1px solid var(--e2e-line);
  border-radius: 14px;
  background: var(--e2e-panel);
}
.cn-int .e2e-chip--api { margin-bottom: .2rem; }
.cn-int-item { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.cn-int-item .material-icons-outlined { color: var(--e2e-teal); font-size: 22px; }

/* detail panel */
.cn-nf-detail {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--e2e-line);
  border-left: 3px solid var(--e2e-teal);
  border-radius: 12px;
  background: var(--e2e-panel);
  min-height: 92px;
}
.cn-nf-detail > .material-icons-outlined { color: var(--e2e-teal); }
.cn-nf-detail strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.cn-nf-detail p { color: var(--text-muted); font-size: .92rem; }
.cn-nf-ifaces { display: inline-block; margin-top: .35rem; font-family: var(--font-mono); font-size: .78rem; color: var(--e2e-teal); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.cn-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.cn-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.cn-table th, .cn-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.cn-table thead th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255,255,255,.02);
}
.cn-table tbody tr:last-child > * { border-bottom: 0; }
.cn-table tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
.cn-table td { color: var(--text-muted); }
.cn-table td:last-child { font-family: var(--font-mono); font-size: .8rem; color: var(--e2e-teal, #14a3b8); white-space: nowrap; }
.cn-table--num td { font-family: var(--font-mono); font-size: .82rem; color: var(--text); text-align: right; }
.cn-table--num th:not(:first-child) { text-align: right; }

/* ── Deployment models ──────────────────────────────────────────────────── */
.cn-models { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.cn-model {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.cn-model-badge {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: .75rem;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-weight: 700;
}
.cn-model h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin-bottom: .4rem; }
.cn-model p { color: var(--text-muted); font-size: .93rem; }
.cn-model-fig { padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: #15171c; min-width: 0; }

.cn-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--e2e-teal);
}
.cn-mini-head .material-icons-outlined, .cn-mini-icons .material-icons-outlined { font-size: 20px; color: var(--e2e-teal); }
.cn-mini-icons { display: inline-flex; gap: .3rem; }
.cn-model-fig .e2e-cell, .cn-model-fig .e2e-up { font-size: .76rem; padding: .45rem .3rem; }

/* A: all-in-one */
.cn-aio { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: .45rem .75rem; align-items: center; }
.cn-aio-l { font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.cn-aio-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.cn-span2 { grid-column: span 2; }

/* B: distributed */
.cn-dist { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.3fr); align-items: center; }
.cn-dist-ctrl {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .8rem;
  border: 1.5px solid var(--e2e-teal);
  border-radius: 12px;
}
.cn-dist-links {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(90deg, var(--e2e-teal) 0 5px, transparent 5px 9px) center / 100% 2px no-repeat;
}
.cn-dist-links em { transform: translateY(-14px); font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--e2e-teal); }
.cn-dist-sites { display: flex; flex-direction: column; gap: .5rem; }
.cn-dist-sites li { display: flex; align-items: center; gap: .75rem; }
.cn-dist-sites .e2e-up { flex: 1; }
.cn-breakout { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.cn-breakout .material-icons-outlined { color: var(--e2e-teal); font-size: 20px; }

/* C: active–standby */
.cn-ha { display: grid; grid-template-columns: 80px 90px minmax(0, 1fr); align-items: stretch; }
.cn-ha-ran { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; font-size: .78rem; color: var(--text-muted); }
.cn-ha-ran .material-icons-outlined { color: var(--e2e-teal); font-size: 30px; }
.cn-ha-links { display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem 0; }
.cn-ha-link {
  display: flex;
  justify-content: center;
  height: 22px;
  background: linear-gradient(var(--e2e-teal), var(--e2e-teal)) center / 100% 2px no-repeat;
}
.cn-ha-link--fail { background: repeating-linear-gradient(90deg, var(--e2e-teal) 0 5px, transparent 5px 9px) center / 100% 2px no-repeat; }
.cn-ha-link em { transform: translateY(-12px); font-style: normal; font-family: var(--font-mono); font-size: .7rem; color: var(--e2e-teal); }
.cn-ha-cores { display: flex; flex-direction: column; gap: .5rem; }
.cn-ha-core { padding: .7rem; border: 1.5px solid var(--e2e-teal); border-radius: 12px; }
.cn-ha-core--standby { border-style: dashed; border-color: rgba(255,255,255,.35); }
.cn-ha-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.cn-ha-sync { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-left: .3rem; font-size: .78rem; color: var(--text-muted); }
.cn-ha-sync .material-icons-outlined { font-size: 18px; color: var(--e2e-teal); }
.cn-ha-sync strong { color: var(--text); }

.cn-benefits { margin-top: 1rem; }

/* ── Pricing chart ──────────────────────────────────────────────────────── */
.cn-chart-card {
  position: relative;
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  --y1: #14a3b8;
  --y23: #5b7cf0;
}
.cn-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .85rem; color: var(--text-muted); }
.cn-legend li { display: inline-flex; align-items: center; gap: .5rem; }
.cn-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.cn-sw--y1 { background: var(--y1); }
.cn-sw--y23 { background: var(--y23); }

.cn-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 1.25rem; }
.cn-chart figcaption { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem; }
.cn-bars { display: flex; flex-direction: column; gap: .9rem; }
.cn-bar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .25rem .9rem; align-items: center; }
.cn-bar-name { font-size: .88rem; color: var(--text); }
.cn-bar-row--pw .cn-bar-name { font-weight: 600; }
.cn-bar-line { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cn-track { flex: 0 0 auto; min-width: 8px; display: flex; gap: 2px; height: 20px; }
.cn-bar-line { border-left: 1px solid rgba(255,255,255,.25); }
.cn-seg {
  height: 100%;
  min-width: 3px;
  cursor: pointer;
  outline: none;
  transition: filter var(--t-fast);
}
.cn-seg--y1 { background: var(--y1); }
.cn-seg--y23 { background: var(--y23); border-radius: 0 4px 4px 0; }
.cn-seg:hover, .cn-seg:focus-visible, .cn-seg.is-on { filter: brightness(1.25); box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px rgba(255,255,255,.5); }
.cn-total { flex: 0 0 auto; font-family: var(--font-mono); font-size: .8rem; color: var(--text); white-space: nowrap; line-height: 1.3; }
.cn-save { display: block; font-family: var(--font-body); font-size: .74rem; color: var(--text-muted); }

.cn-tip {
  position: absolute;
  z-index: 5;
  padding: .55rem .75rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text);
  background: #0b0d11;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.8);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap;
}
.cn-tip strong { display: block; }

.cn-data { margin-top: 1.25rem; }
.cn-split { display: none; font-size: .74rem; color: var(--text-muted); }
.cn-data summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--primary);
  border: 1px solid rgba(14,165,233,.35);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}
.cn-data summary::-webkit-details-marker { display: none; }
.cn-data summary .material-icons-outlined { font-size: 18px; }
.cn-notes { margin-top: 1rem; padding-left: 1.2rem; list-style: decimal; font-size: .8rem; color: var(--text-muted); font-style: italic; }
.cn-notes li + li { margin-top: .35rem; }

.cn-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.cn-related .related-card { margin-top: 0; }

/* touch screens: segments are not tap targets; the year split is shown as text */
@media (pointer: coarse), (max-width: 640px) {
  .cn-split { display: block; grid-column: 1 / -1; }
  .cn-seg { cursor: default; }
}

/* ── Tablet / phone ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .cn-arch { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .cn-arch > * { grid-column: 1 !important; grid-row: auto !important; }
  .cn-head, .cn-core-bg { display: none; }
  .cn-sub, .cn-r4.cn-sub { margin: 0; }
  .cn-sub { background: var(--e2e-panel); }
  .cn-conn--out.cn-r3 { order: 13; }
  .cn-dest            { order: 14; }
  .cn-conn--api       { order: 15; }
  .cn-int             { order: 16; }
  .cn-access + .cn-conn { margin-top: 0; }
  .cn-r1.cn-access, .cn-r2.cn-access, .cn-r3.cn-access, .cn-r4.cn-access, .cn-conn--out.cn-r3, .cn-conn--api { margin-top: 1rem; }
  .cn-r1.cn-access { margin-top: 0; }
  .cn-conn {
    min-height: 48px;
    justify-content: flex-start;
    background-size: 2px calc(100% - 12px);
  }
  .cn-conn::before, .cn-conn::after { left: calc(50% - 5px); right: auto; border-left: 6px solid transparent; border-right: 6px solid transparent; }
  .cn-conn::before { top: 0; border-top: 0; border-bottom: 8px solid var(--e2e-teal); }
  .cn-conn::after  { top: auto; bottom: 0; border-bottom: 0; border-top: 8px solid var(--e2e-teal); }
  .cn-conn em { transform: none; margin-left: calc(50% + 12px); }
  .cn-dest { border-radius: 18px; }

  .cn-model { grid-template-columns: minmax(0, 1fr); }
  .cn-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cn-section { margin-top: 2.75rem; }
  .cn-stats { grid-template-columns: minmax(0, 1fr); }
  .cn-stat + .cn-stat { border-left: 0; border-top: 1px solid var(--border); }
  .cn-cells-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e2e-cell.cn-nf { min-height: 40px; }
  .e2e-up.cn-nf { min-height: 40px; }

  /* NF table → stacked cards */
  .cn-table:not(.cn-table--num) thead { display: none; }
  .cn-table:not(.cn-table--num) tr { display: block; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
  .cn-table:not(.cn-table--num) tbody tr:last-child { border-bottom: 0; }
  .cn-table:not(.cn-table--num) th,
  .cn-table:not(.cn-table--num) td { display: block; padding: 0; border: 0; white-space: normal; }
  .cn-table:not(.cn-table--num) td { margin-top: .2rem; }

  .cn-model { padding: 1.1rem; }
  .cn-aio { grid-template-columns: minmax(0, 1fr); }
  .cn-aio-l { margin-top: .35rem; }
  .cn-model-fig .e2e-cell, .cn-model-fig .e2e-up { font-size: .7rem; padding: .45rem .15rem; overflow-wrap: anywhere; }
  .cn-dist { grid-template-columns: minmax(0, 1fr); }
  .cn-dist-links { min-height: 46px; justify-content: flex-start; background: repeating-linear-gradient(180deg, var(--e2e-teal) 0 5px, transparent 5px 9px) center / 2px 100% no-repeat; }
  .cn-dist-links em { transform: none; margin-left: calc(50% + 12px); }
  .cn-ha { grid-template-columns: 64px 64px minmax(0, 1fr); }

  .cn-chart-card { padding: 1.1rem; }
  .cn-bar-row { grid-template-columns: minmax(0, 1fr); }
  .cn-tip { white-space: normal; max-width: 220px; }
  .cn-table--num th, .cn-table--num td { padding: .6rem .55rem; font-size: .74rem; }
  .cn-table--num thead th { letter-spacing: .04em; }
}

@media (max-width: 480px) {
  /* pricing table → one card per component */
  .cn-table--num thead { display: none; }
  .cn-table--num tr { display: block; padding: .75rem .9rem; border-bottom: 1px solid var(--border); }
  .cn-table--num tbody tr:last-child { border-bottom: 0; }
  .cn-table--num th, .cn-table--num td { display: flex; justify-content: space-between; padding: .15rem 0; border: 0; text-align: left; }
  .cn-table--num th { margin-bottom: .2rem; font-size: .9rem; }
  .cn-table--num td::before { content: attr(data-label); font-family: var(--font-body); color: var(--text-muted); }

  /* model C: RAN above the cores, single column */
  .cn-ha { grid-template-columns: minmax(0, 1fr); }
  .cn-ha-ran { flex-direction: row; justify-content: flex-start; gap: .5rem; margin-bottom: .6rem; }
  .cn-ha-ran::after { content: '→ active core, fails over to standby'; color: var(--text-muted); font-size: .74rem; }
  .cn-ha-links { display: none; }
}