/* pools.css: /pools page additions on top of use-case.css.
   Tokens come from use-case.css (--uc-*); this file only adds the pool
   figure, the scale tiles, the pool row, and the pool/standalone pair. */

:root {
  --pools-vm-bg:     rgba(107, 126, 159, 0.24);
  --pools-vm-border: rgba(71, 87, 116, 0.55);
  --pools-disk:      #475774;
  --pools-outline:   rgba(37, 47, 61, 0.62);
}
@media (prefers-color-scheme: dark) {
  :root {
    --pools-vm-bg:     rgba(138, 163, 201, 0.20);
    --pools-vm-border: rgba(166, 187, 217, 0.50);
    --pools-disk:      #a6bbd9;
    --pools-outline:   rgba(233, 236, 242, 0.55);
  }
}

/* ===== HERO ===== */
.pools-hero { padding: 36px 0 64px; }
.pools-hero .uc-hero-sub { margin-bottom: 0; }
.pools-hero .uc-hero-cta { margin-top: 32px; }

/* ===== POOL FIGURE (shared by hero, scale, row, pair) ===== */
.pools-figure { margin: 48px auto 0; max-width: 760px; }
.pools-pool {
  border: 1px solid var(--pools-outline);
  border-radius: 4px;
  background: var(--uc-card);
  font-family: var(--uc-mono);
  color: var(--uc-ink);
}
.pools-pool-head,
.pools-pool-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 16px;
  font-size: 13px;
}
.pools-pool-head { border-bottom: 1px dashed var(--uc-rule); }
.pools-pool-foot { border-top: 1px dashed var(--uc-rule); color: var(--uc-ink-soft); justify-content: flex-end; }
.pools-pool-name { font-weight: 600; }
.pools-pool-size { color: var(--uc-ink-soft); }

.pools-vms {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 64px;
  gap: 10px;
}
.pools-vm {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px 0;
  border: 1px solid var(--pools-vm-border);
  border-radius: 4px;
  background: var(--pools-vm-bg);
  font-size: 13px;
  overflow: hidden;
}
.pools-vm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pools-vm-state { font-size: 11px; }
/* Every VM's own disk: a strip along the bottom edge. */
.pools-vm-disk {
  margin: 8px -12px 0;
  padding: 1px 12px;
  background: var(--pools-disk);
  color: var(--uc-paper);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 14px;
  min-height: 6px;
}
.pools-vm-l { grid-column: span 3; grid-row: span 2; }
.pools-vm-m { grid-column: span 2; }
.pools-vm-s { grid-column: span 1; }
.pools-vm-stopped {
  border-style: dashed;
  border-color: var(--uc-ink-mute);
  background: transparent;
  color: var(--uc-ink-soft);
}

/* ===== SCALE TILES ===== */
.pools-scale { max-width: 960px; margin: 40px auto 0; }
.pools-scale .pools-pool { background: var(--uc-card); }
.pools-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pools-tile { padding: 24px 22px 26px; border-right: 1px solid var(--uc-rule); }
.pools-tile:last-child { border-right: 0; }
.pools-tile-label { margin: 0 0 6px; font-size: 13px; color: var(--uc-ink-soft); }
.pools-tile-value {
  margin: 0 0 10px;
  font-family: var(--uc-mono);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--uc-ink);
}
.pools-scale-next {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  color: var(--uc-ink-soft);
  font-size: 18px;
}

/* ===== POOL ROW (several pools) ===== */
.pools-row {
  display: grid;
  grid-template-columns: minmax(0, 12fr) minmax(0, 8fr) minmax(0, 4fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 40px;
}
.pools-row .pools-pool { display: flex; flex-direction: column; }
.pools-row .pools-pool-head { flex-direction: column; align-items: flex-start; }
.pools-row .pools-vms {
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  grid-auto-rows: 52px;
  align-content: start;
  gap: 8px;
  padding: 12px;
}
.pools-row .pools-vm { grid-column: auto; grid-row: auto; padding: 8px 10px 0; font-size: 12px; }
.pools-row .pools-vm-disk { margin: 6px -10px 0; padding: 0 10px; }
.pools-row-cmds { max-width: 760px; margin: 32px auto 0; }

/* ===== POOL / STANDALONE PAIR ===== */
.pools-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.pools-pair-card {
  border: 1px solid var(--uc-rule);
  border-radius: 4px;
  background: var(--uc-term-bg);
  padding: 26px 26px 18px;
}
.pools-pair-card h3 {
  font-family: var(--uc-serif);
  font-weight: 500;
  font-size: 24px;
  margin: 0 0 18px;
}
.pools-pair-visual {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 92px;
  margin-bottom: 18px;
}
.pools-pair-visual .pools-pool {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.pools-pair-visual .pools-vm { width: 64px; height: 52px; box-sizing: border-box; padding: 6px 8px 0; font-size: 11px; }
.pools-pair-visual .pools-vm-disk { margin: 4px -8px 0; padding: 0 8px; }
.pools-pair-cmd {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--uc-rule);
  border-radius: 4px;
  background: var(--uc-card-strong);
  font-family: var(--uc-mono);
  font-size: 13.5px;
  color: var(--uc-ink);
}
.pools-pair-card .uc-bullets li { font-size: 16px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .pools-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pools-tile:nth-child(2) { border-right: 0; }
  .pools-tile:nth-child(-n+2) { border-bottom: 1px solid var(--uc-rule); }
}
@media (max-width: 800px) {
  .pools-hero { padding: 20px 0 40px; }
  .pools-figure { margin-top: 36px; }
  .pools-vms { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 58px; gap: 8px; padding: 12px; }
  .pools-vm-l { grid-column: span 4; grid-row: span 1; }
  .pools-vm-m { grid-column: span 2; }
  .pools-vm-s { grid-column: span 2; }
  .pools-row { grid-template-columns: 1fr; }
  .pools-pair { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pools-hero .uc-hero-headline { font-size: 34px; }
  .pools-closing { font-size: 28px; }
  .pools-tile { padding: 18px 14px 20px; }
  .pools-tile-value { font-size: 26px; }
  .pools-pair-card { padding: 22px 18px 14px; }
}