/* Datacenter vertical styles. Loaded after site.css and pages.css, before the tenant's theme.css, so a tenant can restyle.
   The build adds this file and body[data-vertical="datacenter"] to every page of a datacenter build, core pages included.
   A datacenter market starts in light mode like every other market (ui.js); the dark theme is the technical counterpart.
   Selectors use :where() so the defaults carry no extra weight and theme.css wins when it sets the same variable. */

:root:where(:has(body[data-vertical="datacenter"])) {
  --accent: #A85F00; --accent-d: #8A4D00; --accent-soft: rgba(168, 95, 0, .10); --on-accent: #FFFFFF;
  --navy: #0F3A5C;
  --bg: #F3F6F9; --bg-2: #E9EEF3; --surface: #FFFFFF; --line: #D3DCE4; --line-2: #E4EAF0;
  --ink: #0D1A26; --ink2: #22323F; --muted: #566676; --faint: #8493A1;
  /* Status colours darkened for the light theme: core's --ok/--warn/--info on their own 10 to 12% tints are 3.2 to 4.4:1; these are 5.0 to 6.4:1. */
  --ok: #0B6B4F; --warn: #855407; --info: #1F52B0;
  --dc-s0: #0F6B8E; --dc-s1: #A85F00; --dc-s2: #4B6A2A; --dc-s3: #7A3E9D; --dc-s4: #B23A48; --dc-s5: #2F5DA8; --dc-s6: #6B6F2A; --dc-s7: #5A6772;
}
:root[data-theme="dark"]:where(:has(body[data-vertical="datacenter"])) {
  --accent: #F5A524; --accent-d: #D98E10; --accent-soft: rgba(245, 165, 36, .14); --on-accent: #0A0F14;
  --bg: #080D12; --bg-2: #0D141B; --surface: #101820; --line: #1E2B37; --line-2: #17222C;
  --ink: #E8EEF3; --ink2: #CBD5DD; --muted: #9AA9B6; --faint: #6E7F8D;
  --dc-s0: #38B6E0; --dc-s1: #F5A524; --dc-s2: #8CC152; --dc-s3: #B58AE0; --dc-s4: #EE7B87; --dc-s5: #6C9BF0; --dc-s6: #D4D26A; --dc-s7: #8FA1AE;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .4);
}

body[data-vertical="datacenter"] .page-hero .btn-link { padding-top: 6px; }

/* Header: the datacenter menu has seven items (the y3k five plus Funding path and Truth ledger), so links sit tighter, the
   Investor login button folds into the menu below 1380px and the burger menu takes over below 1240px (core switches at 1080px). */
body[data-vertical="datacenter"] .nav { gap: 0; }
body[data-vertical="datacenter"] .nav-link { padding: 10px 8px; font-size: 14.5px; }
@media (max-width: 1440px) { body[data-vertical="datacenter"] .head-actions .btn-ghost.hide-m { display: none; } }
@media (max-width: 1240px) {
  body[data-vertical="datacenter"] .nav { display: none; }
  body[data-vertical="datacenter"] .menu-btn { display: grid; }
  body[data-vertical="datacenter"] .head-actions .hide-m { display: none; }
  body[data-vertical="datacenter"] .mobile-nav.open {
    display: grid; position: fixed; inset: 72px 12px auto 12px; max-height: calc(100dvh - 90px); overflow: auto; padding: 10px; z-index: 70; color: var(--ink);
    background: var(--glass-strong);
  }
  body[data-vertical="datacenter"] .mobile-nav a { padding: 14px 12px; border-radius: 12px; font-weight: 600; border-bottom: 1px solid var(--line-2); }
  body[data-vertical="datacenter"] .mobile-nav a:last-child { border-bottom: 0; }
  body[data-vertical="datacenter"] .mobile-nav .group { padding: 14px 12px 6px; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
}
.dc-h2 { font-size: 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Banner for an illustrative project */
.dc-banner { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 0; padding: 10px 14px; border-radius: var(--r-s); border: 1px solid var(--warn); background: var(--warn-bg); color: var(--ink); font-size: 14px; }
.dc-banner b { text-transform: uppercase; letter-spacing: .1em; font: 700 11px/1 var(--mono); color: var(--warn); }
[data-dc-banner]:empty { display: none; }

/* Wide visuals scroll inside their own box, never the page */
.dc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.dc-scroll > svg { min-width: 760px; width: 100%; height: auto; }
.dc-scroll > .dc-bar, .dc-scroll .dc-bar { min-width: 520px; }

/* Stepper */
.dc-stepper .dc-rail { stroke: var(--line); stroke-width: 3; }
.dc-node circle { fill: var(--surface); stroke: var(--line); stroke-width: 3; transition: fill .2s, stroke .2s; }
.dc-node text { fill: var(--ink2); font-family: var(--sans); }
.dc-node .dc-node-n { font: 700 17px var(--mono); fill: var(--ink); }
.dc-node .dc-node-label { font: 600 12.5px var(--sans); fill: var(--muted); }
.dc-node:hover circle { stroke: var(--accent); }
.dc-node[data-stage-status="done"] circle { fill: var(--ok); stroke: var(--ok); }
.dc-node[data-stage-status="done"] .dc-node-n { fill: var(--bg); }
.dc-node[data-stage-status="active"] circle { fill: var(--accent); stroke: var(--accent-d); }
.dc-node[data-stage-status="active"] .dc-node-n { fill: var(--on-accent); }
.dc-node[data-stage-status="active"] .dc-node-label { fill: var(--ink); }
.dc-node[data-stage-status="next"] circle { stroke: var(--accent); }

/* Stage cards */
.dc-stage { display: grid; gap: 16px; scroll-margin-top: 96px; }
.dc-stage[data-stage-status="active"] { border-color: var(--accent); }
.dc-stage-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dc-stage-head h3 { flex: 1; min-width: 0; }
.dc-stage-n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 16px var(--mono); }
.dc-stage-note { margin: 0; color: var(--ink2); }
.dc-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.dc-cols h4, .dc-source h4 { font: 700 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.dc-cols ul, .dc-source ul, .dc-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; }
.dc-cols p { margin: 0; font-size: 14.5px; }
.dc-linklist { margin-top: 10px !important; }
.dc-linklist a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dc-token { margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-s) var(--r-s) 0; }
.badge.dc-state[data-stage-state="done"] { background: var(--ok-bg); color: var(--ok); }
.badge.dc-state[data-stage-state="active"] { background: var(--accent-soft); color: var(--accent); }

/* Capital stack */
.dc-stack-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.dc-stack-controls { display: grid; gap: 20px; }
.dc-layer { display: grid; gap: 8px; }
.dc-layer label { display: flex; justify-content: space-between; gap: 12px; font: 600 14px/1.3 var(--sans); }
.dc-layer input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 28px; }
.dc-layer output { font-size: 15px; font-weight: 600; }
.dc-bar { display: block; height: auto; border-radius: var(--r-s); }
.dc-seg { stroke: var(--surface); stroke-width: 2; transition: width .15s, x .15s; }
.dc-seg-label { fill: #fff; font: 700 13px var(--mono); pointer-events: none; }
.dc-s0 { fill: var(--dc-s0); background: var(--dc-s0); } .dc-s1 { fill: var(--dc-s1); background: var(--dc-s1); }
.dc-s2 { fill: var(--dc-s2); background: var(--dc-s2); } .dc-s3 { fill: var(--dc-s3); background: var(--dc-s3); }
.dc-s4 { fill: var(--dc-s4); background: var(--dc-s4); } .dc-s5 { fill: var(--dc-s5); background: var(--dc-s5); }
.dc-s6 { fill: var(--dc-s6); background: var(--dc-s6); } .dc-s7 { fill: var(--dc-s7); background: var(--dc-s7); }
.dc-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.dc-legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.dc-sw { width: 14px; height: 14px; border-radius: 4px; display: block; }
.dc-totals { margin: 6px 0 0; }
.dc-stack-error { margin: 0; padding: 18px; border: 1px solid var(--bad); background: var(--bad-bg); color: var(--ink); border-radius: var(--r-s); font-weight: 600; }

/* Sources and truth */
.dc-source { display: grid; gap: 14px; align-content: start; scroll-margin-top: 96px; }
.dc-source > header { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.dc-source h3 { margin: 0; }
.dc-source p { margin: 0; }
.dc-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14.5px; }
.dc-facts dt { color: var(--muted); } .dc-facts dd { margin: 0; }
.dc-filter { gap: 8px; }
.dc-filter button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.dc-table { width: 100%; }
.dc-table th, .dc-table td { vertical-align: top; text-align: left; }
.dc-table .dc-price { white-space: nowrap; font-weight: 600; }
.dc-hash { word-break: break-all; font-size: 12.5px; }
.dc-legend-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dc-legend-item { display: grid; gap: 10px; padding: 18px; }
.dc-legend-item p { margin: 0; }
.claim { border-bottom: 1px dotted var(--faint); }
.claim[data-status="REAL"] { border-bottom-color: var(--ok); }
.claim[data-status="CLIENT-STATED"] { border-bottom-color: var(--info); }
.claim[data-status="VERIFY-WITH-COUNSEL"] { border-bottom-color: var(--warn); }
.dc-snapshot { grid-template-columns: max-content 1fr; }
.dc-mini { display: grid; gap: 8px; align-content: start; }
.dc-mini h3 { margin: 0; } .dc-mini p { margin: 0; }
.dc-perimeter { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-s); font-size: 14px; color: var(--ink2); }
.site-foot .dc-perimeter { border-color: #24272C; color: #A2A8B1; font-size: 12.5px; padding: 0; border: 0; }

@media (max-width: 960px) {
  .dc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-stack-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dc-cols { grid-template-columns: minmax(0, 1fr); }
  .dc-facts, .dc-snapshot { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dc-facts dd { margin-bottom: 8px; }
  .dc-legend li { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .dc-legend li .num.muted { display: none; }
}
@media (max-width: 480px) {
  body[data-vertical="datacenter"] .head-actions > .btn-primary { display: none; } /* the mobile menu carries the same link */
}

/* Header fit. The datacenter header has six links and a long brand name, where the other markets have five and a short one. Core .brand is
   flex: none, so the brand gets a width box that wraps to two lines and never runs under the nav or pushes the menu button off a phone.
   Below 1240px the nav links tighten so six links still clear the brand and the actions down to the 1080px width where core swaps the nav
   for the menu button. Everything else about the header and footer is core's. */
body[data-vertical="datacenter"] .head-in { max-width: 1400px; }
body[data-vertical="datacenter"] .head-in .brand { flex: 0 1 250px; min-width: 0; }
body[data-vertical="datacenter"] .head-in .brand-name { display: block; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; }
body[data-vertical="datacenter"] .head-in .brand-sub { display: none; }
body[data-vertical="datacenter"] .brand img { border-radius: 9px; } /* the UnyKorn mark is a black tile; round it so it sits on the light header like the other markets' marks */
body[data-vertical="datacenter"] .nav-link { white-space: nowrap; }
body[data-vertical="datacenter"] .head-in .head-actions { margin-left: auto; }
@media (max-width: 1400px) { body[data-vertical="datacenter"] .nav-link { padding: 10px 10px; font-size: 14.5px; } body[data-vertical="datacenter"] .head-in { gap: 12px; } }
@media (max-width: 1240px) { body[data-vertical="datacenter"] .head-in .brand { flex-basis: 220px; } body[data-vertical="datacenter"] .head-in .brand-name { font-size: 14px; } body[data-vertical="datacenter"] .nav-link { padding: 10px 7px; font-size: 13.5px; } body[data-vertical="datacenter"] .head-in { gap: 10px; } }
@media (max-width: 640px) { body[data-vertical="datacenter"] .head-in .brand { flex: 1 1 auto; } }

/* Text that sits on an accent-soft tint uses --accent-d in the light theme: --accent (#A85F00) on that tint is 3.97 to 4.28:1, --accent-d is 5.43 to 5.86:1.
   These rules are the vertical's, so every datacenter tenant gets them; a tenant whose accent already clears 4.5:1 on the tint loses nothing. */
:root:not([data-theme="dark"]) .dc-stage-n,
:root:not([data-theme="dark"]) .badge.dc-state[data-stage-state="active"],
:root:not([data-theme="dark"]) .badge.accent,
:root:not([data-theme="dark"]) .ico-tile { color: var(--accent-d); }

/* The footer is dark in both themes, so the brand's accent word in it uses the on-dark amber, not the light-theme accent (3.96:1 on the footer). */
body[data-vertical="datacenter"] .site-foot .brand-name em { color: #F5A524; }

/* A source link inside a table cell or a small note reads as a link (core links inherit the text colour). */
body[data-vertical="datacenter"] main td a, body[data-vertical="datacenter"] main .xs a { color: var(--accent-d); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }


/* ==================== UNYKORN SOVEREIGN NETWORK STRIP ==================== */
body[data-vertical="datacenter"] .unykorn-sovereign-bar {
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 11.5px;
  position: relative;
  z-index: 60;
}
:root[data-theme="dark"] body[data-vertical="datacenter"] .unykorn-sovereign-bar {
  background: rgba(10, 15, 24, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sovereign-in {
  max-width: 1400px;
  margin: 0 auto;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.sovereign-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sovereign-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px #10B981;
}
.sovereign-badge {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 9.5px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
}
.sovereign-sub {
  color: var(--muted);
  font-size: 11px;
}
.sovereign-links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.sovereign-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.sovereign-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.sovereign-links .dot {
  color: var(--faint);
  font-size: 9px;
}
@media (max-width: 768px) {
  .sovereign-sub { display: none; }
  .sovereign-links { font-size: 10px; gap: 6px; }
}

/* ==================== 3D LIQUID GLASS SHADOWING SYSTEM ==================== */
body[data-vertical="datacenter"] {
  --glass-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 249, 253, 0.72) 100%);
  --glass-card-border: rgba(255, 255, 255, 0.95);
  --glass-card-specular: inset 0 1px 1.5px 0 #ffffff, inset 0 -1px 1px 0 rgba(15, 35, 55, 0.02);
  --glass-card-shadow: 0 20px 48px -12px rgba(15, 35, 55, 0.08), 0 4px 14px -2px rgba(15, 35, 55, 0.04);
  --glass-card-hover: 0 32px 64px -14px rgba(15, 35, 55, 0.13), 0 8px 22px -4px rgba(15, 35, 55, 0.05);
}
:root[data-theme="dark"] body[data-vertical="datacenter"],
body[data-vertical="datacenter"][data-theme="dark"] {
  --glass-card-bg: linear-gradient(135deg, rgba(17, 24, 38, 0.84) 0%, rgba(10, 15, 24, 0.72) 100%);
  --glass-card-border: rgba(255, 255, 255, 0.12);
  --glass-card-specular: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
  --glass-card-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.6), 0 8px 20px -4px rgba(0, 0, 0, 0.35);
  --glass-card-hover: 0 36px 72px -16px rgba(0, 0, 0, 0.75), 0 12px 28px -4px rgba(0, 0, 0, 0.45);
}

body[data-vertical="datacenter"] .card,
body[data-vertical="datacenter"] .dc-stage,
body[data-vertical="datacenter"] .stat-strip,
body[data-vertical="datacenter"] .dc-banner,
body[data-vertical="datacenter"] .nw-band,
body[data-vertical="datacenter"] .feat-card,
body[data-vertical="datacenter"] .mock {
  background: var(--glass-card-bg) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  border: 1px solid var(--glass-card-border) !important;
  box-shadow: var(--glass-card-specular), var(--glass-card-shadow) !important;
  border-radius: var(--r-l);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

body[data-vertical="datacenter"] .card:hover,
body[data-vertical="datacenter"] .dc-stage:hover,
body[data-vertical="datacenter"] .feat-card:hover {
  transform: translateY(-4px) scale(1.002);
  box-shadow: inset 0 1px 2px 0 #ffffff, var(--glass-card-hover) !important;
  border-color: rgba(168, 95, 0, 0.3) !important;
}

/* Institutional Rails Band */
.institutional-rails-band {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-card-border);
  box-shadow: var(--glass-card-specular), var(--glass-card-shadow);
  border-radius: var(--r-l);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
}
.rails-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.rails-head h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  font-family: var(--mono);
}
.rails-head .badge {
  font-size: 11px;
}
.rails-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.rail-tile {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 14px;
  transition: transform 0.2s, box-shadow 0.2s;
}
:root[data-theme="dark"] .rail-tile {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}
.rail-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(15, 35, 55, 0.08);
}
.rail-tag {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--accent);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.rail-tile b {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 2px;
}
.rail-tile small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}