/* VPS Operations adapter for the original Founder Command Deck v0.2.
   Original design CSS/SVG live under design/; runtime/auth remain independent. */
:root {
  color-scheme: light;
  --paper: var(--deck-canvas);
  --surface: var(--deck-paper);
  --ink: var(--deck-ink);
  --muted: var(--deck-ink2);
  --line: var(--deck-rule);
  --deep: var(--deck-deep);
  --green: var(--deck-ok);
  --red: var(--deck-danger);
  --amber: color-mix(in srgb,var(--deck-warn) 75%,var(--deck-ink));
  --pale: var(--deck-pale);
  --active: var(--deck-deep);
  --focus: var(--p120-brand-focus);
  --p120-identity-ring: #173E3D;
  --p120-identity-point: #2F7D78;
  --mono: var(--deck-mono);
}
body {font-size:15px;line-height:1.55}
[hidden] {display:none!important}
button,a,input,select,summary {touch-action:manipulation}
button,input,select {font-family:var(--deck-sans)}
button.quiet {background:transparent;color:var(--ink);border-color:var(--line)}
button:disabled {opacity:.5;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {outline:3px solid var(--focus);outline-offset:3px}
a {text-underline-offset:3px}
label {font-size:13px}
input,select {min-width:0;min-height:44px;background:var(--surface)}
.connection {font:10px/1.4 var(--mono);color:var(--muted)}
.deck-header__right {gap:12px;flex-wrap:nowrap}
.deck-header__center .deck-badge {white-space:nowrap}
.deck-header__inner {min-width:0}
.deck-header__inner.p120-vis2-shell-inner {min-height:calc(var(--p120-vis2-header-desktop) - 4px);padding-block:6px}
.deck-identity .p120-vis2-identity {width:192px}
.deck-identity__surface {font-size:7px;letter-spacing:.1em}
.vis2-coordinate-field {
  width:min(440px,calc(100% - 32px));
  min-height:280px;
  padding-block:12px;
  /* Equal side tracks keep the mark centered regardless of label widths. */
  grid-template-columns:minmax(60px,1fr) minmax(72px,240px) minmax(60px,1fr);
  grid-template-rows:max-content 1fr max-content;
  gap:14px 16px;
}
.vis2-coordinate-mark {grid-column:2;grid-row:2;width:100%;max-width:240px}
.vis2-coordinate-field span:nth-of-type(n) {
  position:static;
  inset:auto;
  transform:none;
  font:400 13px/1.4 "Prata",serif;
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
  text-align:center;
}
.vis2-coordinate-field span:nth-of-type(1) {grid-column:1/-1;grid-row:1}
.vis2-coordinate-field span:nth-of-type(2) {grid-column:3;grid-row:2}
.vis2-coordinate-field span:nth-of-type(3) {grid-column:1/-1;grid-row:3}
.vis2-coordinate-field span:nth-of-type(4) {grid-column:1;grid-row:2}
.vis2-coordinate-field[data-label-font="sans"] span:nth-of-type(n) {font-family:var(--deck-sans);font-weight:500;font-size:12px;letter-spacing:.04em}
.vis2-coordinate-field[data-label-font="mono"] span:nth-of-type(n) {font-family:var(--deck-mono);font-weight:400;font-size:12px;letter-spacing:0}
.login-panel {margin:12px 0 40px}
.login-panel h1 {font-size:clamp(40px,5vw,74px)}
#login-form {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;max-width:630px}
#login-submit {grid-column:1/-1;justify-self:start;margin-top:5px;min-width:150px}
.eyebrow {font:600 9px/1.4 var(--mono);letter-spacing:.13em;color:var(--deck-accent)}
.muted {font-size:13px}
.mono {overflow-wrap:anywhere}
.error {color:var(--red)}
#navigation {display:flex;flex-wrap:wrap;gap:7px;padding-bottom:18px;border-bottom:1px solid var(--line)}
#navigation button {background:transparent;border-color:transparent;color:var(--muted);font-size:12px;font-weight:500;min-height:44px}
#navigation button.active {color:var(--surface);background:var(--deep)}
.page-rail {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:22px 0}
.page-rail #updated {margin-left:auto;font:10px/1.5 var(--mono)}
.hero h1 {max-width:650px}
.hero .lead {max-width:650px}
.hero .actions {margin-top:24px}
.metric-grid {grid-template-columns:repeat(4,minmax(0,1fr));margin:22px 0}
.metric span {font-size:clamp(23px,2.1vw,34px);overflow-wrap:anywhere}
.metric {min-width:0}
.resource-monitor {margin:22px 0;border:1px solid var(--line);background:var(--surface);padding:24px}
.resource-heading {margin:0 0 14px}
.resource-heading h2 {font-size:28px}
.resource-live {display:inline-flex;align-items:center;gap:8px;font:10px/1.4 var(--mono);color:var(--muted);white-space:nowrap}
.resource-live:before {content:'';width:7px;height:7px;flex:none;border-radius:50%;background:var(--muted)}
.resource-live.is-live:before {background:var(--deep);animation:resource-pulse 2s ease-in-out infinite}
@keyframes resource-pulse {50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--deep) 10%,transparent)}}
.resource-controls {display:flex;gap:7px;flex-wrap:wrap}
.resource-controls button {font-size:11px;min-height:44px;padding:0 14px}
.resource-controls button[aria-pressed="true"] {background:var(--deep);color:var(--surface);border-color:var(--deep)}
.resource-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.resource-card {min-width:0;border-top:1px solid var(--line);padding-top:18px}
.resource-card-heading {display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.resource-card h3 {font-size:24px;margin:0}
.resource-value {font:500 30px/1.2 var(--deck-display);font-variant-numeric:tabular-nums}
.resource-detail {font:10px/1.6 var(--mono);color:var(--muted);min-height:32px;margin:10px 0}
.resource-meter {height:6px;background:var(--pale);overflow:hidden;border-radius:3px}
.resource-meter-fill {height:100%;background:var(--deep);transform:scaleX(0);transform-origin:left center}
.resource-chart {display:block;width:100%;height:140px;margin-top:12px;cursor:crosshair;overflow:visible}
.resource-gridline {stroke:var(--line);stroke-opacity:.45;stroke-dasharray:2 4;stroke-width:.7}
.resource-line {stroke:var(--deep);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.resource-point {fill:var(--deep)}
.resource-cursor {stroke:var(--deck-warm);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.resource-axis {display:flex;justify-content:space-between;font:9px/1.5 var(--mono);color:var(--muted)}
.resource-caption {min-height:32px;font:10px/1.6 var(--mono);color:var(--muted);margin:10px 0 0}
.operations-grid {margin-bottom:22px}
.operations-grid h2 {font-size:clamp(25px,2vw,33px);max-width:360px}
.operations-grid .panel-rail .badge {font-size:8px}
.deck-panel--deep .badge {background:color-mix(in srgb,white 9%,transparent);color:#d8e2dc;border-color:color-mix(in srgb,white 30%,transparent)}
.deck-panel--deep button.quiet {color:var(--surface);border-color:color-mix(in srgb,white 50%,transparent)}
.activity-panel {border:1px solid var(--line);margin:22px 0;background:color-mix(in srgb,var(--surface) 97%,transparent)}
.activity-panel .section-rail {margin-top:0}
.source-grid {margin-top:0}
.source-grid .deck-panel {padding:24px}
.section-rail {display:flex;align-items:center;justify-content:space-between;gap:15px;margin:32px 0 16px}
.section-rail h2 {margin:0;font-size:clamp(26px,2.2vw,34px)}
.panels {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.panel {background:var(--surface);border:1px solid var(--line);padding:24px;min-width:0}
.panel.deep {background:var(--deep);color:var(--surface)}
.panel.deep .muted {color:#d8e2dc}
.run-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.run-row:first-child {padding-top:8px}
.run-row h3 {font:500 17px/1.5 var(--deck-sans);margin:0 0 6px;overflow-wrap:anywhere}
.run-row .row-details {display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font:11px/1.55 var(--mono)}
.run-actions {display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.badge {white-space:nowrap;font-size:9px;line-height:1.4}
.badge:before {flex:none;background:currentColor}
.badge.passed,.badge.completed,.badge.finished {color:var(--green)}
.badge.failed,.badge.interrupted {color:var(--red)}
.badge.running,.badge.current {color:var(--active)}
.badge.pending,.badge.queued,.badge.hold,.badge.previous,.badge.canceled,.badge.skipped {color:var(--amber)}
.deck-panel--deep .badge {color:var(--surface)}
.badge.running:before,.badge.current:before {width:10px;height:10px;background:transparent;border:2px solid currentColor;border-right-color:transparent;animation:spin 1s linear infinite}
@keyframes spin {to{transform:rotate(360deg)}}
.notice {padding:14px 18px;border-left:3px solid var(--amber);background:var(--pale);margin-bottom:20px;font-size:13px}
.toolbar {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0}
.toolbar input {flex:1;min-width:180px}
.toolbar select {width:auto;max-width:230px}
.empty {padding:18px 0;color:var(--muted);font-size:13px}
.detail-header {display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.detail-header h2 {flex:1;margin:0;min-width:180px}
.meta-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 28px}
.meta-grid dt {font:11px var(--mono);color:var(--muted);margin-bottom:6px}
.meta-grid dd {margin:0;overflow-wrap:anywhere;font-size:14px}
.step {background:var(--surface);border:1px solid var(--line);margin-bottom:10px}
.step summary {display:flex;align-items:center;gap:14px;flex-wrap:wrap;cursor:pointer;padding:17px 20px;min-height:56px}
.step summary:before {content:'›';font-size:22px;color:var(--muted)}
.step[open] summary:before {content:'⌄'}
.step-title {flex:1;min-width:140px;overflow-wrap:anywhere}
.step-body {padding:0 20px 20px}
.step .muted {font-family:var(--mono);font-size:11px}
pre {margin:12px 0 0;padding:18px;background:var(--p120-identity-ring);color:var(--surface);white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 var(--mono);max-height:540px;overflow:auto}
progress {width:100%;height:9px;margin-top:14px;accent-color:var(--deep);border:0}
progress::-webkit-progress-bar {background:var(--pale);border-radius:3px}
progress::-webkit-progress-value {background:var(--deep);border-radius:3px}
.source-note {font:10px/1.6 var(--mono);color:var(--muted);overflow-wrap:anywhere;margin:8px 0 18px}
.table-wrap {overflow-x:auto}
table {width:100%;border-collapse:collapse;font-size:13px}
td,th {text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
th {font:11px/1.5 var(--mono);color:var(--muted)}
.artifact-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
iframe.preview {display:block;width:100%;height:560px;border:1px solid var(--line);background:var(--surface)}
img.preview {max-width:100%;height:auto;border:1px solid var(--line)}
footer {max-width:1680px;margin:auto;padding:20px var(--deck-gutter);border-top:1px solid var(--line);font:10px var(--mono);color:var(--muted);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.footer-identity {display:block;width:181.8px;height:auto;flex:none}
ul {padding-left:20px}
.metric,.panel,.hero,.meta-grid,.run-row,.deck-panel {overflow-wrap:anywhere}
@media(max-width:1080px) {
  .deck-header__inner.p120-vis2-shell-inner {min-height:calc(var(--p120-vis2-header-drawer) - 4px);padding-block:6px}
  .deck-identity .p120-vis2-identity {width:44px;justify-content:center}
  .deck-identity .p120-vis2-identity[data-mode="mark-only"] .p120-vis2-identity__mark {width:36px}
  .connection {display:none}
  .metric-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px) {
  .panels,.artifact-grid {grid-template-columns:1fr}
  .meta-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px) {
  .resource-monitor {padding:18px}
  .resource-grid {grid-template-columns:1fr;gap:18px}
  .resource-heading {flex-wrap:wrap}
  .resource-heading h2 {font-size:26px}
  .metric-grid {grid-template-columns:1fr 1fr}
  .metric {padding:16px;min-height:112px}
  .metric span {font-size:26px}
  .login-panel h1 {font-size:42px}
  #login-form {grid-template-columns:1fr}
  #login-submit {justify-self:stretch}
  .run-row {grid-template-columns:1fr}
  .run-actions {justify-content:flex-start}
  .meta-grid {grid-template-columns:1fr}
  .page-rail #updated {margin-left:0}
  .step summary {padding:14px}
  .step-body {padding:0 14px 14px}
  #navigation button {padding:0 12px;font-size:12px}
  .table-wrap {margin-inline:-6px}
  .operations-grid .panel-rail {flex-direction:row;align-items:center}
}
@media(prefers-reduced-motion:reduce) {
  .badge.running:before,.badge.current:before,.resource-live.is-live:before {animation:none}
}