/* HCI Comparison Dashboard specific styles */

body.page-hci-comparison{
  --nutanix:var(--cat-3);
  --proxmox:var(--cat-6);
  --sangfor:var(--cat-4);
  --zstack:var(--cat-1);
  --warn:var(--accent6);
  --risk:var(--accent);
  --good:var(--accent3);
  --neutral:var(--ink3);
  --hero-desc-max-width:680px;
  --container-max:1120px;
}

body.page-hci-comparison .nav-home{text-decoration:none}
body.page-hci-comparison .hci-disclaimer-wrap{}
body.page-hci-comparison .article-wrap{max-width:760px;margin:0 auto;padding:0 var(--container-padding)}
body.page-hci-comparison .article-wide{max-width:1120px;margin:0 auto;padding:0 var(--container-padding)}
body.page-hci-comparison .lead{font-size:18px;line-height:1.7;font-weight:300;color:var(--ink);margin-bottom:18px}
body.page-hci-comparison .muted{color:var(--ink2);font-weight:300}
body.page-hci-comparison .mono{font-family:'DM Mono',monospace}
body.page-hci-comparison .small-note{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3);line-height:1.6}

body.page-hci-comparison .toc-section{padding:28px 0 10px}
body.page-hci-comparison .toc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
body.page-hci-comparison .toc-item{background:var(--paper2);border:1px solid var(--border);border-radius:var(--r);padding:13px 15px;color:var(--ink2);font-size:12px;display:flex;gap:10px;align-items:center;transition:transform .15s,box-shadow .15s,border-color .15s}
body.page-hci-comparison .toc-item:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border2);color:var(--ink)}
body.page-hci-comparison .toc-num{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3)}

body.page-hci-comparison .snapshot-grid,
body.page-hci-comparison .profile-grid,
body.page-hci-comparison .decision-grid,
body.page-hci-comparison .risk-grid,
body.page-hci-comparison .checklist-grid,
body.page-hci-comparison .market-grid{
  display:grid;gap:16px;margin-top:28px
}
body.page-hci-comparison .snapshot-grid{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
body.page-hci-comparison .profile-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
body.page-hci-comparison .decision-grid{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
body.page-hci-comparison .risk-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
body.page-hci-comparison .checklist-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
body.page-hci-comparison .market-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

body.page-hci-comparison .card,
body.page-hci-comparison .snapshot-card,
body.page-hci-comparison .profile-card,
body.page-hci-comparison .decision-card,
body.page-hci-comparison .market-card,
body.page-hci-comparison .risk-card,
body.page-hci-comparison .checklist-card,
body.page-hci-comparison .chart-card{
  background:var(--paper2);border:1px solid var(--border);border-radius:var(--r2);box-shadow:var(--shadow);position:relative;overflow:hidden
}
body.page-hci-comparison .snapshot-card,
body.page-hci-comparison .profile-card,
body.page-hci-comparison .decision-card,
body.page-hci-comparison .market-card,
body.page-hci-comparison .risk-card,
body.page-hci-comparison .checklist-card{padding:20px}
body.page-hci-comparison .card:hover,
body.page-hci-comparison .snapshot-card:hover,
body.page-hci-comparison .profile-card:hover,
body.page-hci-comparison .decision-card:hover{box-shadow:var(--shadow2);transform:translateY(-2px);transition:.18s}

body.page-hci-comparison .bar-top::before,
body.page-hci-comparison .profile-card::before,
body.page-hci-comparison .decision-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
body.page-hci-comparison .nutanix::before{background:var(--nutanix)}
body.page-hci-comparison .proxmox::before{background:var(--proxmox)}
body.page-hci-comparison .sangfor::before{background:var(--sangfor)}
body.page-hci-comparison .zstack::before{background:var(--zstack)}

body.page-hci-comparison .kicker{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
body.page-hci-comparison .card-title{font-family:'Fraunces',serif;font-size:18px;font-weight:700;line-height:1.2;margin-bottom:6px}
body.page-hci-comparison .card-body{font-size:12px;color:var(--ink2);font-weight:300;line-height:1.6}
body.page-hci-comparison .platform-name{font-family:'Fraunces',serif;font-size:22px;font-weight:700;line-height:1.1;margin-bottom:3px}
body.page-hci-comparison .platform-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3);line-height:1.4;margin-bottom:12px}
body.page-hci-comparison .platform-verdict{font-size:12px;color:var(--ink2);font-weight:300;line-height:1.55;margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
body.page-hci-comparison .platform-verdict strong{color:var(--ink)}

body.page-hci-comparison .badge-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
body.page-hci-comparison .tag{font-family:'DM Mono',monospace;font-size:9px;padding:3px 8px;border-radius:5px;background:var(--paper3);color:var(--ink3);border:1px solid var(--border)}
body.page-hci-comparison .tag.nutanix{color:var(--nutanix);border-color:color-mix(in srgb, var(--accent3) 25%, transparent);background:color-mix(in srgb, var(--accent3) 8%, transparent)}
body.page-hci-comparison .tag.proxmox{color:var(--proxmox);border-color:color-mix(in srgb, var(--accent6) 25%, transparent);background:color-mix(in srgb, var(--accent6) 8%, transparent)}
body.page-hci-comparison .tag.sangfor{color:var(--sangfor);border-color:color-mix(in srgb, var(--accent4) 25%, transparent);background:color-mix(in srgb, var(--accent4) 8%, transparent)}
body.page-hci-comparison .tag.zstack{color:var(--zstack);border-color:color-mix(in srgb, var(--accent) 25%, transparent);background:color-mix(in srgb, var(--accent) 8%, transparent)}

body.page-hci-comparison .list{list-style:none;margin-top:12px}
body.page-hci-comparison .list li{font-size:12px;color:var(--ink2);line-height:1.5;padding:6px 0;border-top:1px solid var(--border);font-weight:300}
body.page-hci-comparison .list li:first-child{border-top:none}
body.page-hci-comparison .list li::before{content:'→';font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3);margin-right:7px}
body.page-hci-comparison .list.check li::before{content:'✓';color:var(--good)}
body.page-hci-comparison .list.warn li::before{content:'⚠';color:var(--warn)}

body.page-hci-comparison .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r2);margin-top:24px;background:var(--paper2)}
body.page-hci-comparison table{width:100%;border-collapse:collapse;min-width:980px;font-size:12px}
body.page-hci-comparison th{background:var(--paper3);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:12px 13px;border-bottom:1px solid var(--border2);white-space:nowrap}
body.page-hci-comparison td{padding:12px 13px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--ink2);font-weight:300;line-height:1.45}
body.page-hci-comparison tr:last-child td{border-bottom:none}
body.page-hci-comparison tbody tr:hover td{background:var(--paper)}
body.page-hci-comparison td:first-child{color:var(--ink);font-weight:500}
body.page-hci-comparison .score{font-family:'DM Mono',monospace;font-weight:500;color:var(--ink)}
body.page-hci-comparison .score-pill{display:inline-block;font-family:'DM Mono',monospace;font-size:10px;border-radius:999px;padding:2px 8px;border:1px solid var(--border2);background:var(--paper3);color:var(--ink2)}
body.page-hci-comparison .pill-high{color:var(--good);border-color:color-mix(in srgb, var(--accent3) 25%, transparent);background:color-mix(in srgb, var(--accent3) 8%, transparent)}
body.page-hci-comparison .pill-mid{color:var(--warn);border-color:color-mix(in srgb, var(--accent6) 25%, transparent);background:color-mix(in srgb, var(--accent6) 8%, transparent)}
body.page-hci-comparison .pill-low{color:var(--risk);border-color:color-mix(in srgb, var(--accent) 25%, transparent);background:color-mix(in srgb, var(--accent) 8%, transparent)}

body.page-hci-comparison .chart-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:16px;margin-top:24px}
body.page-hci-comparison .chart-card{padding:22px}
body.page-hci-comparison .chart-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--nutanix),var(--proxmox),var(--sangfor),var(--zstack))}
body.page-hci-comparison .chart-title{font-family:'Fraunces',serif;font-size:16px;font-weight:700;margin-bottom:4px}
body.page-hci-comparison .chart-hint{font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3);margin-bottom:18px}
body.page-hci-comparison .chart-wrap{height:340px;position:relative}
body.page-hci-comparison .bar-list{display:flex;flex-direction:column;gap:12px;margin-top:12px}
body.page-hci-comparison .rankbar-label{display:flex;align-items:center;justify-content:space-between;font-family:'DM Mono',monospace;font-size:10px;color:var(--ink3);margin-bottom:5px}
body.page-hci-comparison .rankbar-track{height:7px;border-radius:99px;background:var(--paper3);overflow:hidden}
body.page-hci-comparison .rankbar-fill{height:100%;border-radius:99px;background:var(--accent);width:0;transition:width .6s ease}

body.page-hci-comparison .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
body.page-hci-comparison .callout{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r);padding:16px 18px;background:var(--paper2);margin-top:22px}
body.page-hci-comparison .callout strong{color:var(--ink)}
body.page-hci-comparison .callout p{font-size:12px;color:var(--ink2);font-weight:300;line-height:1.7}

body.page-hci-comparison .risk-card{border-left:3px solid var(--risk)}
body.page-hci-comparison .risk-card.good{border-left-color:var(--good)}
body.page-hci-comparison .risk-card.warn{border-left-color:var(--warn)}
body.page-hci-comparison .risk-title{font-size:13px;font-weight:600;margin-bottom:4px}
body.page-hci-comparison .risk-body{font-size:11px;color:var(--ink2);font-weight:300;line-height:1.55}

body.page-hci-comparison .choice-line{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
body.page-hci-comparison .choice-line:last-child{border-bottom:none}
body.page-hci-comparison .choice-scenario{font-size:12px;font-weight:600;color:var(--ink)}
body.page-hci-comparison .choice-reco{font-size:12px;color:var(--ink2);font-weight:300;line-height:1.55}

body.page-hci-comparison .section-subtitle{font-family:'Fraunces',serif;font-size:20px;font-weight:600;margin:34px 0 10px}

@media(max-width:820px){
  body.page-hci-comparison .nav-links{display:none}
  body.page-hci-comparison .chart-grid,
  body.page-hci-comparison .two-col{grid-template-columns:1fr}
  body.page-hci-comparison .choice-line{grid-template-columns:1fr}
}

@media print{
  body.page-hci-comparison nav,
  body.page-hci-comparison footer,
  body.page-hci-comparison .theme-btn{display:none}
  body.page-hci-comparison .section{page-break-inside:avoid}
}

/* Replacements for inline styles to satisfy strict constraints */
body.page-hci-comparison .market-card.bar-top { --accent: var(--good); }
body.page-hci-comparison .callout { --accent: var(--warn); }
body.page-hci-comparison .bar-list > div:nth-child(1) .rankbar-fill { background: var(--nutanix); width: 84.8%; }
body.page-hci-comparison .bar-list > div:nth-child(2) .rankbar-fill { background: var(--sangfor); width: 80.8%; }
body.page-hci-comparison .bar-list > div:nth-child(3) .rankbar-fill { background: var(--zstack); width: 66%; }
body.page-hci-comparison .bar-list > div:nth-child(4) .rankbar-fill { background: var(--proxmox); width: 60%; }
body.page-hci-comparison .small-note { margin-top: 16px; }
body.page-hci-comparison #summary .card { padding: 22px; }