/* servers.css — page styles for the Servers list, the create-server flow, resize and the setup
   guide (Phase 3; loaded by base.html after wy.css, tokens only). Only layout that no primitive
   covers lives here: the quota row and filter row on the list, the create page's two-column grid
   with its sticky summary, radio fieldsets, the details-as-card disclosure and the setup-guide
   stepper. Everything else on these pages is a primitive from wy.css. */

/* ---- Servers list ---- */
.wy-srv-quotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--wy-space-16) * 3)), 1fr)); /* min 192 */ gap: var(--wy-space-4) var(--wy-space-8); }
.wy-srv-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--wy-space-3); }
.wy-srv-filters > .wy-field { flex: 1 1 calc(var(--wy-space-16) * 2.5); /* 160 */ max-width: calc(var(--wy-space-16) * 4); /* 256 */ }
/* A filtered-out row stays hidden in the stacked layout too (wy.css turns rows into blocks there). */
.wy-srv-list tr[hidden] { display: none; }
/* The auto-sleep banner slot (server page, refreshed out of band): empty means nothing to show. */
.wy-sleep-banner:empty { display: none; }

/* ---- Narrow pages: resize and the setup guide ---- */
.wy-page-narrow { max-width: calc(var(--wy-space-16) * 11); /* 704 */ }
.wy-page-narrow p { margin: 0; }

/* ---- Create server: sections on the left, the summary sticky on the right from 1024 ---- */
.wy-create { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wy-space-4); align-items: start; margin: 0; }
.wy-create__main { display: flex; flex-direction: column; gap: var(--wy-space-4); min-width: 0; }
.wy-create__side { min-width: 0; }
@media (min-width: 1024px) {
  .wy-create { grid-template-columns: minmax(0, 1fr) calc(var(--wy-space-16) * 5); /* 320 */ gap: var(--wy-space-6); }
  .wy-create__side { position: sticky; top: calc(var(--wy-topbar) + var(--wy-space-6)); }
}
.wy-create__hint { color: var(--wy-text-muted); font-size: var(--wy-text-sm); font-weight: var(--wy-weight-normal); }

/* Radio groups: one fieldset per group with its legend as the section label. */
.wy-create__group { min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.wy-create__group + .wy-create__group { margin-top: var(--wy-space-6); }
.wy-create__group + .wy-help { margin-top: var(--wy-space-6); }
.wy-create__group > .wy-help { margin-top: var(--wy-space-3); }
.wy-create__legend { display: block; margin: 0 0 var(--wy-space-3); padding: 0; color: var(--wy-text-muted); font-size: var(--wy-text-sm); font-weight: var(--wy-weight-medium); line-height: var(--wy-leading); }
.wy-create__legend + .wy-help { margin: calc(var(--wy-space-2) * -1) 0 var(--wy-space-3); }

/* Disclosure styled as a card: the advanced options on /new (the details keeps the class the
   tests pin) and the key how-to on the setup guide. */
.wy-create .adv, .wy-disclosure { border: 1px solid var(--wy-border); border-radius: var(--wy-radius-lg); background: var(--wy-surface); }
.wy-create .adv > summary, .wy-disclosure > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wy-space-2) var(--wy-space-3); padding: var(--wy-space-3) var(--wy-space-4); border-radius: inherit; color: var(--wy-text); font-size: var(--wy-text-lg); font-weight: var(--wy-weight-semibold); line-height: var(--wy-leading-tight); list-style: none; cursor: pointer; }
.wy-create .adv > summary::-webkit-details-marker, .wy-disclosure > summary::-webkit-details-marker { display: none; }
.wy-create .adv > summary:hover, .wy-disclosure > summary:hover { background: var(--wy-surface-sunken); }
.wy-create .adv > summary:focus-visible, .wy-disclosure > summary:focus-visible { outline: 2px solid var(--wy-focus); outline-offset: 2px; }
.wy-create .adv > summary > .wy-icon, .wy-disclosure > summary > .wy-icon { margin-left: auto; color: var(--wy-text-muted); transition: rotate var(--wy-motion-fast) var(--wy-ease); }
.wy-create .adv[open] > summary, .wy-disclosure[open] > summary { border-bottom: 1px solid var(--wy-border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wy-create .adv[open] > summary > .wy-icon, .wy-disclosure[open] > summary > .wy-icon { rotate: 180deg; }
.wy-disclosure__body { display: flex; flex-direction: column; gap: var(--wy-space-3); padding: var(--wy-space-4); }
.wy-disclosure__body > * { margin: 0; }
.wy-disclosure__body h3 { margin-top: var(--wy-space-2); color: var(--wy-text); font-size: var(--wy-text-md); font-weight: var(--wy-weight-semibold); line-height: var(--wy-leading-tight); }
.wy-disclosure__body h3:first-child { margin-top: 0; }
@media (min-width: 640px) {
  .wy-create .adv > summary, .wy-disclosure > summary { padding-left: var(--wy-space-6); padding-right: var(--wy-space-6); }
  .wy-disclosure__body { padding: var(--wy-space-6); }
}

/* ---- Setup guide stepper: numbered badges, the current step in accent, done steps in green ---- */
.wy-stepper { display: flex; flex-wrap: wrap; gap: var(--wy-space-3) var(--wy-space-6); margin: 0 0 var(--wy-space-6); padding: 0; list-style: none; color: var(--wy-text-muted); font-size: var(--wy-text-sm); line-height: var(--wy-leading); }
.wy-stepper li { display: inline-flex; align-items: center; gap: var(--wy-space-2); }
.wy-stepper .step-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--wy-space-6); height: var(--wy-space-6); border: 1px solid var(--wy-border-strong); border-radius: 50%; background: var(--wy-surface); color: var(--wy-text-muted); font-size: var(--wy-text-xs); font-weight: var(--wy-weight-semibold); font-variant-numeric: tabular-nums; }
.wy-stepper .on { color: var(--wy-text); font-weight: var(--wy-weight-medium); }
.wy-stepper .on .step-n { border-color: var(--wy-accent); background: var(--wy-accent); color: var(--wy-text-on-accent); }
.wy-stepper .done .step-n { border-color: var(--wy-success-border); background: var(--wy-success-bg); color: var(--wy-success-fg); }