/* ==========================================================================
   hpc.css — scoped styles for the merged /hpc page (layouts/hpc/list.html)
   --------------------------------------------------------------------------
   Two concerns, both previously unstyled:

   1. .hpc-proof-* — the body of the Cloud HPC proof mockups (proof-hpc.html).
      The browser chrome + shell + sidebar come from the SHARED .proof-dashboard-*
      classes in hd.css (same recipe as proof-kaas.html / kaas.css); only the
      HPC-specific internals (platform card, Slurm queue, terminal) live here.
      Dark-console aesthetic with the orange accent used across every proof
      dashboard (#e67e22 / #ed7d2b) — literal hex inside the console is the
      established proof-dashboard convention (see kaas.css header note). The
      console is decorative + pinned dir="ltr", so no logical-property/RTL work.

   2. .hpc-compare-* — the Cloud / Private / Hybrid deployment-model matrix.
      Light, token-driven (mirrors .caas-compare-* in caas.css) with a
      highlighted Hybrid column and horizontal scroll on small screens.
   ========================================================================== */

/* ==========================================================================
   1 · Proof console internals
   ========================================================================== */
.hpc-proof-main { gap: 0.85rem; }
.hpc-proof-view { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }

/* ----- Sidebar: module badge + nav + health (replaces shared analytics block) */
.hpc-proof-module {
  display: flex; align-items: center; gap: 0.7rem;
  margin-top: 2rem;
  padding: 0.7rem 0.8rem;
  border: 0.0625rem solid #ffffff14;
  border-radius: 0.6rem;
  background: #ffffff08;
}
.hpc-proof-module-icon {
  width: 2.1rem; height: 2.1rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.5rem;
  color: #f2c296;
  background: #e67e2218;
  border: 0.0625rem solid #e67e2240;
}
.hpc-proof-module-icon svg { width: 1.25rem; height: 1.25rem; }
.hpc-proof-module strong { display: block; color: #fff; font-size: 0.92rem; line-height: 1.1; }
.hpc-proof-module span { color: #a8a8a8; font-size: 0.66rem; font-weight: 600; }

.hpc-proof-nav { display: grid; gap: 0.35rem; margin-top: 1.4rem; }
.hpc-proof-nav-btn {
  display: flex; align-items: center; gap: 0.55rem;
  border: 0.0625rem solid #ffffff10;
  border-radius: 0.45rem;
  background: #ffffff06;
  color: #c9c9c9;
  padding: 0.6rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.hpc-proof-nav-btn span { font-size: 0.9rem; line-height: 1; color: #f2c296; }
.hpc-proof-nav-active {
  border-color: #e67e2266;
  background: #e67e2218;
  color: #fff;
}

.hpc-proof-health {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: auto;
  padding: 0.7rem 0.8rem;
  border: 0.0625rem solid #ffffff10;
  border-radius: 0.6rem;
  background: #00000026;
}
.hpc-proof-health strong { display: block; color: #f2f2f2; font-size: 0.74rem; }
.hpc-proof-health span { color: #8f8f8f; font-size: 0.62rem; font-weight: 600; }

/* Status dots — shared by both variants */
.hpc-proof-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.hpc-proof-dot-ready { background: #46c08d; box-shadow: 0 0 0.5rem #46c08d99; }

/* ----- Header row */
.hpc-proof-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.hpc-proof-eyebrow {
  margin: 0; color: #f2c296; font-size: 0.56rem; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.hpc-proof-header h3 { margin: 0.2rem 0 0; color: #fff; font-size: 1.12rem; line-height: 1.15; }
.hpc-proof-refresh {
  display: inline-flex; align-items: center; gap: 0.4rem;
  flex: none;
  color: #9a9a9a; font-size: 0.62rem; font-weight: 700;
}
.hpc-proof-refresh i {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none;
  background: #46c08d; box-shadow: 0 0 0.5rem #46c08d99;
}

/* ----- Slurm: stat cards */
.hpc-proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.hpc-proof-stat {
  border: 0.0625rem solid #ffffff10;
  border-radius: 0.5rem;
  background: #ffffff06;
  padding: 0.6rem 0.7rem;
}
.hpc-proof-stat span {
  display: block; color: #858585; font-size: 0.5rem; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hpc-proof-stat strong { display: block; margin-top: 0.15rem; color: #f2f2f2; font-size: 1.05rem; }
.hpc-proof-stat-run strong { color: #6fd3a6; }
.hpc-proof-stat-pend strong { color: #f2c296; }

/* ----- Slurm: queue table */
.hpc-proof-queue {
  border: 0.0625rem solid #ffffff10;
  border-radius: 0.5rem;
  background: #00000024;
  overflow: hidden;
}
.hpc-proof-queue-head,
.hpc-proof-queue-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 0.7fr 0.8fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
}
.hpc-proof-queue-head {
  color: #858585; font-size: 0.5rem; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 0.0625rem solid #ffffff10;
}
.hpc-proof-queue-row {
  border-bottom: 0.0625rem solid #ffffff08;
  font-size: 0.68rem; font-weight: 700;
  color: #d0d0d0;
}
.hpc-proof-queue-row:last-child { border-bottom: 0; }
.hpc-proof-queue-row strong { font-size: 0.5rem; font-weight: 900; letter-spacing: 0.04em; }
.hpc-proof-row-run strong { color: #6fd3a6; }
.hpc-proof-row-pend strong { color: #f2c296; }
.hpc-proof-queue-row span:first-child { color: #f2f2f2; }

/* ----- Slurm: terminal */
.hpc-proof-terminal {
  border: 0.0625rem solid #ffffff10;
  border-radius: 0.5rem;
  background: #0d0d0e;
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.3rem;
  font-family: var(--hd-font-badge);
  font-size: 0.6rem;
  color: #b9b9b9;
}
.hpc-proof-terminal span { color: #6fd3a6; font-weight: 800; margin-inline-end: 0.35rem; }

/* ==========================================================================
   2 · Cloud / Private / Hybrid comparison matrix
   ========================================================================== */
.hpc-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hpc-compare-table {
  width: 100%;
  min-width: 46rem;                 /* keeps the 4 columns legible; scrolls below */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--hd-text-sm);
}
.hpc-compare-table th,
.hpc-compare-table td {
  text-align: start;
  padding: 0.9rem 1rem;
  border-block-end: var(--hd-button-border) solid var(--hd-color-neutral-200);
  vertical-align: top;
}

/* Header: model name + sublabel */
.hpc-compare-table thead th {
  border-block-end: var(--hd-button-border) solid var(--hd-color-neutral-300);
  background: var(--hd-color-white);
  white-space: nowrap;
}
.hpc-compare-model {
  display: block;
  font-family: var(--hd-font-heading);
  font-size: var(--hd-text-lg);
  font-weight: var(--hd-weight-heading);
  color: var(--hd-color-accent);
}
.hpc-compare-sub {
  display: block;
  margin-block-start: 0.15rem;
  font-family: var(--hd-font-badge);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hd-color-neutral-900);
}

/* Row label (feature) */
.hpc-compare-table tbody th {
  font-weight: var(--hd-weight-heading);
  color: var(--hd-color-accent);
  white-space: nowrap;
}
.hpc-compare-table tbody td { color: var(--hd-color-nav-link); }
.hpc-compare-table tbody tr:last-child th,
.hpc-compare-table tbody tr:last-child td { border-block-end: 0; }

/* Highlighted Hybrid column — name it by class so the schema controls which
   column lights up (no brittle nth-child). */
.hpc-compare-col-key {
  background: color-mix(in srgb, var(--hd-color-accent) 4%, var(--hd-color-white));
}
.hpc-compare-table thead th.hpc-compare-col-key { background: color-mix(in srgb, var(--hd-color-accent) 7%, var(--hd-color-white)); }
.hpc-compare-table thead th.hpc-compare-col-key .hpc-compare-sub { color: var(--hd-color-accent); }
.hpc-compare-table tbody tr:first-child .hpc-compare-col-key { box-shadow: inset 0 0.0625rem 0 color-mix(in srgb, var(--hd-color-accent) 16%, transparent); }

.hpc-compare-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex-wrap: wrap;
}

/* ==========================================================================
   3 · Hero deployment-model panel (light box, beside the Slurm proof)
   --------------------------------------------------------------------------
   Fills the square .overview_hero_grid-box.is-right via absolute inset:0 (the
   box is position:relative; overflow:hidden), so the box's own padding/centring
   don't interfere. Light + token-driven; the "key" row echoes the highlighted
   Hybrid column of the matrix below. Logical properties → RTL-safe.
   ========================================================================== */
.hpc-models {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
}
.hpc-models-eyebrow {
  margin: 0;
  font-family: var(--hd-font-badge);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hd-color-neutral-900);
}
.hpc-models-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.hpc-models-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: var(--hd-button-border) solid var(--hd-color-neutral-200);
  border-radius: var(--hd-radius);
  background: var(--hd-color-white);
}
.hpc-models-item.is-key {
  border-color: color-mix(in srgb, var(--hd-color-accent) 35%, var(--hd-color-neutral-200));
  background: color-mix(in srgb, var(--hd-color-accent) 5%, var(--hd-color-white));
}
.hpc-models-icon {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.55rem;
  color: var(--hd-color-accent);
  background: color-mix(in srgb, var(--hd-color-accent) 8%, var(--hd-color-white));
  border: var(--hd-button-border) solid color-mix(in srgb, var(--hd-color-accent) 18%, transparent);
}
.hpc-models-icon svg { width: 1.2rem; height: 1.2rem; }
.hpc-models-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hpc-models-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--hd-font-heading);
  font-weight: var(--hd-weight-heading);
  font-size: var(--hd-text-sm);
  color: var(--hd-color-accent);
}
.hpc-models-tag {
  flex: none;
  font-family: var(--hd-font-badge);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hd-color-accent);
  background: color-mix(in srgb, var(--hd-color-accent) 12%, var(--hd-color-white));
  border-radius: 999rem;
  padding: 0.12rem 0.45rem;
}
.hpc-models-note {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--hd-color-nav-link);
}
.hpc-models-link {
  align-self: flex-start;
  font-family: var(--hd-font-badge);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--hd-color-accent);
  text-decoration: none;
}
.hpc-models-link:hover { text-decoration: underline; }