/* server.css — the server detail page (server.html and its polled controls fragment), the
   noVNC console page (console.html) and the chart chrome wycharts.js injects (.wy-chart*,
   shared with the admin Host page, which loads the same library). Phase 3, group B.
   Same rules as wy.css: tokens only, no colour literals, no px except 0, 1 and 2, every
   selector under .wy-* or a page root class. Layout only; the primitives come from wy.css. */

/* ----------------------------------------------------------------------------
   Server page — .wy-server is the page root inside .wy-content
   -------------------------------------------------------------------------- */
.wy-server > .hero, .wy-server > .wy-card { margin-bottom: var(--wy-space-6); }
.wy-server__addr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wy-space-2); min-width: 0; font-family: var(--wy-font-mono); font-size: var(--wy-text-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wy-server__addr > a { display: inline-flex; align-items: center; gap: var(--wy-space-1); min-width: 0; overflow-wrap: anywhere; }
.wy-server__addr .wy-cmd { font-size: var(--wy-text-lg); }
.wy-server__addr .wy-cmd code { padding: var(--wy-space-2) 0; }
.wy-server__note { margin: 0; color: var(--wy-text-muted); font-size: var(--wy-text-sm); line-height: var(--wy-leading); }
.wy-server__prose { margin: 0; white-space: pre-line; }
.wy-server__stack { display: flex; flex-direction: column; gap: var(--wy-space-2); min-width: 0; }
.wy-server__stack > .wy-row { min-width: 0; }

/* Inline forms (add a port forward, add a domain, take a snapshot, save an image): the
   fields share the row and the button sits on the input's baseline. */
.wy-server__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--wy-space-3); min-width: 0; }
.wy-server__form > .wy-field { flex: 1 1 calc(var(--wy-space-16) * 3); /* 192 */ min-width: 0; }
.wy-server__form > .wy-field--short { flex: 0 1 calc(var(--wy-space-16) * 2); /* 128 */ }
.wy-server__form > .wy-btn { flex: none; }

/* Toggle rows (nightly restart, auto-sleep): a switch beside a small field. */
.wy-server__toggle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wy-space-3) var(--wy-space-4); min-width: 0; }
.wy-server__toggle > .wy-field { flex-direction: row; align-items: center; gap: var(--wy-space-2); }
.wy-server__toggle > .wy-field > .wy-label { white-space: nowrap; }
.wy-server__toggle .wy-input { width: calc(var(--wy-space-16) * 2); /* 128 */ }
.wy-server__toggle .wy-select { width: auto; min-width: calc(var(--wy-space-16) * 2); }

/* A form or text block under a flush table, inside the same card. */
.wy-server__pad { padding: var(--wy-space-4); border-top: 1px solid var(--wy-border); }
.wy-server__pad > :first-child { margin-top: 0; }
.wy-server__pad > :last-child { margin-bottom: 0; }
.wy-server__pad > * + * { margin-top: var(--wy-space-3); }

/* Numbered setup steps (push to deploy), each with its code block. */
.wy-server__steps { display: flex; flex-direction: column; gap: var(--wy-space-3); margin: 0; padding-left: var(--wy-space-6); }
.wy-server__steps > li > .wy-code { margin-top: var(--wy-space-2); }

/* The read-only cloud-config disclosure. */
.wy-server__details > summary { cursor: pointer; color: var(--wy-accent); font-size: var(--wy-text-sm); }
.wy-server__details > summary:focus-visible { outline: 2px solid var(--wy-focus); outline-offset: 2px; border-radius: var(--wy-radius-sm); }
.wy-server__details[open] > summary { margin-bottom: var(--wy-space-2); }
.wy-server__details > .wy-code > pre { max-height: calc(var(--wy-space-16) * 6); /* 384 */ overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .wy-server__pad { padding: var(--wy-space-4) var(--wy-space-6); }
}

/* ----------------------------------------------------------------------------
   Charts — wycharts.js turns each [data-chart] node into .wy-card.wy-chart with a
   .wy-card__header (title, current value) and a .wy-card__body (plot, legend, tooltip).
   .wy-charts lays the cards out two up from 640 px; .wy-chart--wide spans the row.
   -------------------------------------------------------------------------- */
.wy-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wy-space-4); }
.wy-chart { position: relative; }
.wy-chart__now { color: var(--wy-text); font-size: var(--wy-text-sm); font-weight: var(--wy-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wy-chart__plot { position: relative; min-height: calc(var(--wy-space-16) * 2 + var(--wy-space-6) - 2px); /* 150, the SVG height */ }
.wy-chart__plot > svg { display: block; width: 100%; height: auto; }
.wy-chart__tick { fill: var(--wy-text-muted); font-family: var(--wy-font-mono); font-size: var(--wy-text-xs); font-variant-numeric: tabular-nums; }
.wy-chart__legend { display: flex; flex-wrap: wrap; gap: var(--wy-space-4); margin-top: var(--wy-space-2); }
.wy-chart__legend:empty { display: none; }
.wy-chart__key { display: inline-flex; align-items: center; gap: var(--wy-space-2); color: var(--wy-text-muted); font-size: var(--wy-text-xs); }
.wy-chart__key > i, .wy-chart__tip-row > i { display: inline-block; flex: none; width: var(--wy-space-3); height: 2px; border-radius: 1px; }
.wy-chart__empty { padding: var(--wy-space-8) var(--wy-space-4); color: var(--wy-text-muted); font-size: var(--wy-text-sm); text-align: center; }
.wy-chart.is-loading .wy-chart__plot { opacity: 0.5; transition: opacity var(--wy-motion-fast) var(--wy-ease); }
.wy-chart__tip { position: absolute; z-index: 20; min-width: calc(var(--wy-space-16) + var(--wy-space-6)); /* 88 */ padding: var(--wy-space-1) var(--wy-space-2); border: 1px solid var(--wy-border); border-radius: var(--wy-radius-md); background: var(--wy-surface-raised); color: var(--wy-text); box-shadow: var(--wy-shadow); font-size: var(--wy-text-xs); line-height: var(--wy-leading); pointer-events: none; }
.wy-chart__tip[hidden] { display: none; }
.wy-chart__tip-time { color: var(--wy-text-muted); font-family: var(--wy-font-mono); }
.wy-chart__tip-row { display: flex; align-items: center; gap: var(--wy-space-2); }
.wy-chart__tip-row > b { font-weight: var(--wy-weight-semibold); font-variant-numeric: tabular-nums; }
/* The monitoring uptime figure carries a tone the library sets from the percentage. */
.wy-stat__value[data-tone="success"] { color: var(--wy-success-fg); }
.wy-stat__value[data-tone="warning"] { color: var(--wy-warning-fg); }
.wy-stat__value[data-tone="danger"] { color: var(--wy-danger-fg); }
@media (min-width: 640px) {
  .wy-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wy-charts > .wy-chart--wide { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------------------------
   Console page — body.wy-console: a 48 px bar (breadcrumbs, hostname and SSH command
   with copy buttons, the connection badge) over the noVNC screen, which fills the rest.
   -------------------------------------------------------------------------- */
body.wy-console { display: flex; flex-direction: column; height: 100vh; min-height: 0; overflow: hidden; }
.wy-console__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wy-space-2) var(--wy-space-3); flex: none; min-height: var(--wy-topbar); padding: var(--wy-space-1) var(--wy-space-4); border-bottom: 1px solid var(--wy-border); background: var(--wy-surface); }
.wy-console__bar > .wy-breadcrumbs { flex: 1 1 auto; min-width: 0; }
.wy-console__bar > .wy-breadcrumbs ol { flex-wrap: nowrap; overflow: hidden; }
.wy-console__bar > .wy-breadcrumbs li { flex: none; }
.wy-console__bar > .wy-breadcrumbs li:nth-child(2) { flex: 0 1 auto; }
.wy-console__bar > .wy-breadcrumbs li:nth-child(2) > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wy-console__bar > .wy-badge { flex: none; }
.wy-console__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wy-space-2); min-width: 0; }
.wy-console__meta > .wy-cmd { max-width: 100%; }
.wy-console__screen { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 0; overflow: hidden; background: var(--wy-neutral-950); }
.wy-console__hint { position: absolute; max-width: calc(var(--wy-space-16) * 6); /* 384 */ margin: 0 var(--wy-space-4); padding: var(--wy-space-3) var(--wy-space-4); border: 1px solid var(--wy-border); border-radius: var(--wy-radius-lg); background: var(--wy-surface-raised); color: var(--wy-text); font-size: var(--wy-text-sm); line-height: var(--wy-leading); text-align: center; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .wy-console__meta { order: 1; width: 100%; }
}

/* errored server: the raw job text, admins only, under the customer-safe summary */
.wy-server__error-detail { margin-top: var(--wy-space-2); }
.wy-server__error-detail > summary { cursor: pointer; color: var(--wy-text-muted); font-size: var(--wy-text-sm); }
.wy-server__error-detail > pre { margin: var(--wy-space-2) 0 0; padding: var(--wy-space-3); overflow-x: auto; border: 1px solid var(--wy-border); border-radius: var(--wy-radius-md); background: var(--wy-surface-sunken); color: var(--wy-text); font-size: var(--wy-text-xs); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ----------------------------------------------------------------------------
   Game server page additions (this product): a labelled second command in the Connect
   address row, the reason text beside a stage badge, and the ask-for-a-change form.
   -------------------------------------------------------------------------- */
.wy-server__addr-label { margin-left: var(--wy-space-2); color: var(--wy-text-muted); font-family: var(--wy-font-sans); font-size: var(--wy-text-sm); }
.wy-server__reason { color: var(--wy-text-muted); font-size: var(--wy-text-sm); line-height: var(--wy-leading); }
.wy-server__ask { display: flex; flex-direction: column; gap: var(--wy-space-3); }
.wy-server__ask > .wy-row { justify-content: flex-end; }
.wy-server__list { display: flex; flex-direction: column; gap: var(--wy-space-2); margin: 0; padding: 0; list-style: none; }
.wy-server__list > li { display: flex; align-items: center; gap: var(--wy-space-2); font-size: var(--wy-text-sm); }