/* Phase 4, explicit opt-in. Existing palette and card primitives.
   Do not apply to pricing cards; callers retain data, permissions and actions. */
html .ep-cards-v4 .ep-stats { gap: 16px; }
html .ep-cards-v4 .ep-stat { padding: 20px; gap: 12px; border-radius: 16px; }
html .ep-cards-v4 .ep-stat-label { font-size: 12px; color: var(--ep-ink-3); }
html .ep-cards-v4 .ep-stat-value { font-size: 28px; line-height: 1.3; letter-spacing: -.4px; }
html .ep-cards-v4 .ep-stat-unit { font-size: 12px; color: var(--ep-ink-3); }
html .ep-cards-v4 .ep-stat-caption { font-size: 12px; color: var(--ep-ink-3); line-height: 1.8; }
/* The subscription card retains its pre-Phase4 appearance. */
html .ep-cards-v4 .ep-card:not(.ep-dash-plan) {
  border-radius: 16px; background: var(--ep-surface); border-color: var(--ep-border);
  box-shadow: inset 0 1px 0 var(--ep-border); min-width: 0;
}
html .ep-cards-v4 .ep-card-head { padding: 20px 24px; gap: 12px; }
html .ep-cards-v4 .ep-card-titles { min-width: 0; overflow-wrap: anywhere; }
html .ep-cards-v4 .ep-card-titles .ep-title { font-size: 16px; line-height: 1.8; }
html .ep-cards-v4 .ep-sub:not(.ep-dash-plan *) { font-size: 12px; line-height: 1.8; color: var(--ep-ink-3); }
html .ep-cards-v4 .ep-card-icon { width: 40px; height: 40px; border-radius: 10px; }
html .ep-cards-v4 .ep-card-body:not(.flush) { padding: 24px; }
html .ep-cards-v4 .ep-card-body.flush { padding: 0; }
html .ep-cards-v4 .ep-card-foot { padding: 18px 24px; border-top: 1px solid var(--ep-border); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
html .ep-cards-v4 .ep-card-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-block: 12px; border-bottom: 1px solid var(--ep-border); }
html .ep-cards-v4 .ep-card-detail:first-child { padding-top: 0; }
html .ep-cards-v4 .ep-card-detail:last-child { border-bottom: 0; padding-bottom: 0; }
html .ep-cards-v4 .ep-card-detail dt { color: var(--ep-ink-3); font-size: 13px; }
html .ep-cards-v4 .ep-card-detail dd { font-size: 14px; margin: 0; text-align: end; overflow-wrap: anywhere; }
html .ep-cards-v4 .ep-card-links { display: grid; gap: 10px; }
html .ep-cards-v4 .ep-card-link {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 16px;
  background: var(--ep-inset); color: var(--ep-ink); border: 1px solid var(--ep-border);
  border-radius: 10px; text-decoration: none; font: inherit; text-align: start;
  transition: border-color 150ms ease, background-color 150ms ease;
}
html .ep-cards-v4 .ep-card-link .ep-sub { display: block; margin-top: 2px; }
html .ep-cards-v4 .ep-card-link .ep-link-arrow { margin-inline-start: auto; color: var(--ep-ink-3); flex: none; }
html .ep-cards-v4 .ep-card-link:focus-visible { outline: 2px solid var(--ep-accent); outline-offset: 3px; }
html .ep-cards-v4 .ep-card-empty { display: grid; justify-items: center; gap: 12px; padding: 32px 24px; text-align: center; }
html .ep-cards-v4 .ep-card-empty p { max-width: 32em; margin: 0; font-size: 13px; color: var(--ep-ink-3); line-height: 1.9; }
@media (hover: hover) and (pointer: fine) {
  html .ep-cards-v4 .ep-card-link:hover { border-color: var(--ep-accent); background: var(--ep-surface-2); }
}
@media (max-width: 640px) {
  html .ep-cards-v4 .ep-stats { gap: 12px; }
  html .ep-cards-v4 .ep-stat { padding: 16px; gap: 10px; }
  html .ep-cards-v4 .ep-stat-value { font-size: 24px; }
  html .ep-cards-v4 .ep-card-head { padding: 18px; }
  html .ep-cards-v4 .ep-card-body:not(.flush), html .ep-cards-v4 .ep-card-foot { padding: 18px; }
  html .ep-cards-v4 .ep-card-head .ep-card-actions { flex-basis: 100%; margin-inline-start: 0; }
  html .ep-cards-v4 .ep-card-foot .ep-button { flex: 1; }
  html .ep-cards-v4 .ep-card-empty { padding: 28px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html .ep-cards-v4 .ep-card-link { transition: none; }
}

/* Connections summary cards remain opted into Phase4. Subscription layout
   falls through to its original utility classes; Phase5 duration text stays. */
html .ep-cards-v4 .ep-summary-card { padding: 20px; }
@media (max-width: 640px) {
  html .ep-cards-v4 .ep-summary-card { padding: 16px; }
}

/* Approved subscription option 3. Scoped to the real plan card; the existing
   usage chart, heatmap, server analytics and shared navigation stay intact. */
html body.ep-navigation-live .ep-subscription-v3 {
 display:grid;grid-template-columns:minmax(0,1fr) 220px;
 grid-template-areas:"head head" "meters stats" "recent stats" "actions actions";
 gap:20px 26px;padding:22px;border-radius:16px;
}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-plan-head {grid-area:head;margin:0;flex-wrap:wrap;}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-meters {grid-area:meters;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-recent {grid-area:recent;min-width:0;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-metric {padding:18px;min-width:0;border:1px solid var(--ep-border);background:var(--ep-inset);border-radius:12px;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-metric-head {display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--ep-ink-2);}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-muted {font-size:11px;line-height:1.8;color:var(--ep-ink-3);}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-value {display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:14px 0;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-value>strong {font-size:38px;font-weight:900;line-height:1.3;overflow-wrap:anywhere;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-value>span {font-size:11px;color:var(--ep-ink-3);}
html body.ep-navigation-live .ep-subscription-v3 .ep-validity-total {display:block;flex-basis:auto;font-size:10px;line-height:1.8;margin-top:2px;text-align:start;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-validity {display:flex;flex-direction:column;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-metric-foot {display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:10px;line-height:1.8;color:var(--ep-ink-3);}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-validity .ep-plan-metric-foot {margin-top:auto;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-traffic-meter {display:flex;direction:rtl;height:8px;overflow:hidden;background:var(--ep-border-2);border-radius:8px;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-traffic-meter>span {height:100%;flex:none;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-down {background:#10b981;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-up {background:var(--ep-cyan,#06b6d4);}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-unknown {background:var(--ep-ink-4);}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-traffic-legend {display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:10px;line-height:1.8;color:var(--ep-ink-3);}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-traffic-legend bdi {margin-inline-start:4px;}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-down-label {color:var(--ep-accent-2);}
html body.ep-navigation-live .ep-subscription-v3 .ep-plan-up-label {color:var(--ep-cyan,#06b6d4);}
html:not(.dark) body.ep-navigation-live .ep-subscription-v3 .ep-plan-down-label {color:#047857;}
html:not(.dark) body.ep-navigation-live .ep-subscription-v3 .ep-plan-up-label {color:#0e7490;}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats {grid-area:stats;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:0;padding:8px 16px;margin:0;background:var(--ep-inset);border:1px solid var(--ep-border);border-radius:12px;min-width:0;}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat {display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;gap:2px 10px;padding:12px 0;background:transparent;border:0;box-shadow:none;border-radius:0;text-align:start;min-width:0;}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat+.mini-stat {border-top:1px solid var(--ep-border);}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat>div:first-child {grid-column:2;grid-row:1/3;align-self:center;font-size:21px;}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat>div:nth-child(n+2) {grid-column:1;justify-content:flex-start;font-size:11px;color:var(--ep-ink-3);}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats small {font-size:10px;font-weight:400;color:var(--ep-ink-3);}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats [role=link]:focus-visible {outline:2px solid var(--ep-accent);outline-offset:3px;border-radius:6px;}
html body.ep-navigation-live .ep-subscription-v3 .ep-dash-actions {grid-area:actions;border-top:1px solid var(--ep-border);padding-top:14px;margin:0;gap:8px;}
@media(min-width:641px) and (max-width:1199px){
 html body.ep-navigation-live .ep-subscription-v3 {grid-template-columns:minmax(0,1fr) 180px;gap:18px;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-meters {grid-template-columns:1fr;}
}
@media(max-width:640px){
 html body.ep-navigation-live .ep-subscription-v3 {grid-template-columns:1fr;grid-template-areas:"head" "meters" "recent" "stats" "actions";padding:16px;gap:18px;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-meters {grid-template-columns:1fr;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-plan-metric {padding:16px;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-plan-value>strong {font-size:34px;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats {grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;padding:12px 0;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat {display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px;gap:3px;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat+.mini-stat {border-top:0;border-inline-start:1px solid var(--ep-border);}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat>div:first-child {font-size:20px;order:1;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat>div:nth-child(2) {order:0;font-size:10px;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-stats>.mini-stat>div:nth-child(3) {order:2;}
 html body.ep-navigation-live .ep-subscription-v3 .ep-dash-actions>* {flex:1 1 calc(50% - 8px);justify-content:center;}
}