/* AIVI home: data-center card refresh. Scoped to .dc-card so nothing else on the page changes.
   Uses the homepage tokens (--h-*) from home.css. All motion sits behind prefers-reduced-motion. */
.dc-card { gap: 0; }
.dc-card .home-card-label { margin-bottom: 2px; }

.dc-stamp { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 11px; color: var(--h-muted); }
.dc-stamp time { font-weight: 700; color: var(--h-slate); }
.dc-stamp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--h-dteal); box-shadow: 0 0 0 3px rgba(0,107,139,.14); flex: none; }

.dc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 12px; border: 1px solid var(--h-line); border-radius: 12px; overflow: hidden; }
.dc-stats > div { padding: 8px 10px 9px; }
.dc-stats > div + div { border-left: 1px solid var(--h-line); }
.dc-stats dt { margin: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); line-height: 1.25; min-height: 2.5em; }
.dc-stats dd { margin: 2px 0 0; font-size: 24px; font-weight: 800; line-height: 1; color: var(--h-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-fn { display: block; width: max-content; margin: 3px 0 0; font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .02em; text-transform: none; color: var(--h-dteal) !important; vertical-align: baseline; }
.dc-fn:hover { color: var(--h-blue) !important; text-decoration: underline !important; }

.dc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.dc-filters button {
    appearance: none; border: 1px solid var(--h-line); background: #fff; color: var(--h-slate); cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1; padding: 7px 11px; border-radius: 999px;
}
.dc-filters button b { margin-left: 4px; font-weight: 800; color: var(--h-dteal); }
.dc-filters button:hover { border-color: var(--h-dteal); }
.dc-filters button[aria-pressed="true"] { background: var(--h-navy); border-color: var(--h-navy); color: #fff; }
.dc-filters button[aria-pressed="true"] b { color: var(--h-teal); }

.dc-plate { margin: 4px 0 0; }
.dc-pin { cursor: pointer; }
.dc-ring { position: absolute; inset: -2px; border-radius: 4px; border: 2px solid var(--h-dteal); opacity: 0; pointer-events: none; }
.dc-pin.is-active, .dc-pin:hover { z-index: 3; box-shadow: 0 0 0 6px rgba(0,107,139,.26); }
.dc-pin.is-active .home-pin-tip { opacity: 1; visibility: visible; }
.dc-pin.is-dim { opacity: .16; }
.dc-pin.is-pre-open { background: #fff; }
.dc-caption {
    position: absolute; left: 0; bottom: 2px; margin: 0; padding: 5px 9px; border-radius: 8px;
    background: var(--h-navy); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.2;
    opacity: 0; pointer-events: none;
}
.dc-caption.is-on { opacity: 1; }

.dc-timeline { position: relative; margin: 10px 2px 2px; }
.dc-track { position: relative; height: 4px; border-radius: 4px; background: var(--h-line); }
.dc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--dc-now, 98%); border-radius: 4px; background: linear-gradient(90deg, #CDEFEB, var(--h-dteal)); }
.dc-head { position: absolute; top: 50%; left: var(--dc-now, 98%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--h-navy); box-shadow: 0 0 0 3px #fff; }
.dc-mark { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff; border: 2px solid var(--h-dteal); }
.dc-mark--opened { background: var(--h-dteal); }
.dc-mark--groundbreaking { border-radius: 2px; transform: rotate(45deg) scale(.85); }
.dc-years { position: relative; height: 14px; margin-top: 6px; font-size: 9.5px; font-weight: 700; color: var(--h-muted); font-variant-numeric: tabular-nums; }
.dc-year { position: absolute; top: 0; transform: translateX(-50%); }
.dc-year:first-child { transform: none; }
.dc-replay {
    position: absolute; right: 0; top: -26px; appearance: none; border: 0; background: none; cursor: pointer; padding: 2px 0;
    font: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--h-dteal);
}
.dc-replay:hover { color: var(--h-navy); }
.dc-card .home-legend { margin-top: 8px; }

/* Expandable rows (native <details>: works without JS, keyboard and screen readers get it for free) */
.dc-list .dc-item { border-bottom: 1px solid var(--h-line); }
.dc-list .dc-item[hidden] { display: none; }
.dc-list summary {
    display: grid; grid-template-columns: 10px minmax(0,1fr) auto 12px; align-items: center; gap: 10px;
    padding: 7px 2px; font-size: 12.5px; line-height: 1.35; cursor: pointer; list-style: none;
}
.dc-list summary::-webkit-details-marker { display: none; }
.dc-list summary:hover .home-dc-name, .dc-item.is-active .home-dc-name { color: var(--h-blue); }
.dc-list summary i { width: 10px; height: 10px; border-radius: 3px; }
.dc-chev { width: 7px; height: 7px; border-right: 2px solid var(--h-muted); border-bottom: 2px solid var(--h-muted); transform: rotate(45deg) translate(-2px,-2px); }
details[open] > summary .dc-chev { transform: rotate(225deg) translate(-1px,-1px); }
.dc-detail { padding: 2px 2px 12px 20px; font-size: 12px; line-height: 1.45; color: var(--h-slate); }
.dc-facts { margin: 0; display: grid; gap: 3px; }
.dc-facts > div { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 8px; }
.dc-facts dt { color: var(--h-muted); font-weight: 600; }
.dc-facts dd { margin: 0; font-weight: 700; color: var(--h-navy); }
.dc-sub { margin: 10px 0 3px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--h-muted); }
.dc-srcs, .dc-rel { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.dc-srcs a, .dc-rel a { color: var(--h-dteal); font-weight: 700; }
.dc-srcs a:hover, .dc-rel a:hover, .dc-state-link:hover { color: var(--h-blue); text-decoration: underline; }
.dc-srcs span { color: var(--h-muted); font-size: 11px; }
.dc-rel-type { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 999px; background: var(--h-chipbg); font-size: 10px; font-weight: 800; color: var(--h-slate); }
.dc-empty { margin: 10px 0 0; font-size: 11.5px; font-style: italic; color: var(--h-muted); }
.dc-state-link { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--h-dteal); }

@media (max-width: 420px) {
    .dc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-stats > div:nth-child(3) { border-left: 0; }
    .dc-stats > div:nth-child(n+3) { border-top: 1px solid var(--h-line); }
    .dc-stats dt { min-height: 0; }
    .dc-filters button { padding: 9px 12px; }   /* bigger tap targets on phones */
    .dc-list summary { padding: 10px 2px; }
}

/* ---------- Motion (only when the reader allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .dc-pin { transition: opacity .35s ease, transform .45s cubic-bezier(.3,1.7,.5,1), background-color .45s ease, box-shadow .2s ease; }
    .dc-playing .dc-pin.is-future { opacity: 0; transform: scale(.2); }
    .dc-playing .dc-fill, .dc-playing .dc-head { transition: none; }
    .dc-mark { transition: transform .3s ease, box-shadow .3s ease; }
    .dc-playing .dc-mark:not(.is-past) { opacity: .35; }
    .dc-mark.is-hit { box-shadow: 0 0 0 5px rgba(0,107,139,.22); }
    .dc-caption { transition: opacity .25s ease; }
    .dc-done .dc-pin[data-status="opened"] .dc-ring { animation: dc-pulse 2.6s ease-out 3; }
    .dc-done .dc-pin[data-status="under_construction"] .dc-ring { border-style: dashed; animation: dc-breathe 2.6s ease-in-out 3; }
    .dc-pin.is-active .dc-ring { animation: dc-pulse 1.8s ease-out infinite; }
    .dc-pin.is-pop .dc-ring { animation: dc-pulse 1s ease-out 1; }
    details[open] > .dc-detail { animation: dc-open .28s ease-out; }
    .dc-filters button { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
}
@keyframes dc-pulse { 0% { opacity: .65; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
@keyframes dc-breathe { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: .6; transform: scale(1.9); } }
@keyframes dc-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* home.css styles every `.home-dc-list a` as a grid row; detail links are plain inline links. */
.dc-list .dc-detail a { display: inline; padding: 0; font-size: inherit; line-height: inherit; }
.dc-list .dc-detail .dc-state-link { display: inline-block; font-size: 11px; }
.dc-stats dd [data-count].is-pending::after { content: ""; }

@media (max-width: 420px) { .dc-years > :nth-child(2) { visibility: hidden; } }
/* Before the announcement date the investment figure is shown as a dash, not as $0B. */
.dc-stats dd[data-pending] { font-size: 0; }
.dc-stats dd[data-pending]::before { content: "—"; font-size: 24px; color: var(--h-muted); }