/* Hallmark · shape: app screen · genre: modern-minimal · theme: Wayfind (deal 1/3, seed remote-control-panel-game-2e96·d3d38530·2026-10-30·r0)
 * nav: top bar with the server name and sign-out · signature: the state board that flips to an amber plate when the server is live, over four bordered gauges with a shared crosshair · states: loading, offline, starting, running, stopping, suspended, no connection, command sending, command armed · wayfind: platform
 * axes: light/mono/cool · posture: committed · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, three buttons could be any panel; the board reads the state at a glance from across the room */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --text-board: clamp(1.75rem, 8.5vw, 4.75rem); --page: 60rem;
  --color-series-1: var(--color-accent); --color-series-2: oklch(62% 0.14 70);
  --color-series-1-fill: color-mix(in oklch, var(--color-series-1) 20%, transparent);
  --color-series-2-fill: color-mix(in oklch, var(--color-series-2) 26%, transparent);
}

body { font-variant-numeric: tabular-nums; }

/* кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-bar) solid var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); font: 800 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--color-paper-2); }
.btn:active:not(:disabled) { background: var(--color-rule); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { color: var(--color-muted); border-color: var(--color-rule); background: transparent; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover:not(:disabled) { background: var(--color-ink); border-color: var(--color-ink); }
.btn--primary:active:not(:disabled) { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn--power { min-height: 88px; padding: 0 var(--space-xs); font-size: var(--text-xl); }
.btn.is-armed, .btn.is-armed:hover:not(:disabled) { background: var(--color-accent-2); border-color: var(--color-ink); color: var(--color-ink); }
.btn--bar, .btn--plate { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); border-color: currentColor; color: inherit; }
.btn--bar:hover:not(:disabled), .btn--plate:hover:not(:disabled) { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
.btn--bar:active:not(:disabled), .btn--plate:active:not(:disabled) { background: var(--color-paper-2); border-color: var(--color-paper-2); color: var(--color-ink); }
.btn--bar:focus-visible, .btn--plate:focus-visible { outline-color: currentColor; }

/* верхняя полоса */
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) max(var(--gutter), calc((100% - var(--page)) / 2)); background: var(--color-ink); color: var(--color-paper); }
.bar__name { max-width: none; min-width: 0; font-size: var(--text-md); line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }

.wrap { width: 100%; max-width: calc(var(--page) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-lg) var(--gutter) var(--space-xl); }

/* табло */
.board { padding: var(--space-lg); border: var(--rule-bar) solid var(--color-ink); margin: 0; background: var(--color-ink); color: var(--color-paper); }
.board dd { margin: 0; }
.board__label { font-size: var(--text-sm); font-weight: 500; }
.board .board__state { margin-block: var(--space-2xs) var(--space-lg); font-size: var(--text-board); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1; overflow-wrap: break-word; }
.board[data-state="starting"] .board__state, .board[data-state="stopping"] .board__state { color: var(--color-accent-2); }
.board[data-state="running"], .board[data-state="suspended"] { background: var(--color-accent-2); color: var(--color-ink); }
.board__addr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); padding-top: var(--space-md); border-top: var(--rule-bar) solid currentColor; }
.board .board__value { flex: 1 1 14rem; min-width: 0; font-size: var(--text-lg); font-weight: 800; overflow-wrap: anywhere; }

/* три кнопки */
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-md); }
.help { min-height: 1lh; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

/* показатели */
.gauges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-sm); touch-action: pan-y; }
.gauge { position: relative; display: flex; flex-direction: column; min-height: 11rem; padding: var(--space-sm); border: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-3); overflow: hidden; }
.gauge > :not(.spark) { position: relative; z-index: var(--z-base); }
.gauge h2 { display: flex; align-items: center; gap: var(--space-xs); max-width: none; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; line-height: 1.2; }
.ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.gauge__value { font-size: var(--text-sm); color: var(--color-ink-2); overflow-wrap: anywhere; }
.gauge__value b { display: block; font-size: var(--text-xl); line-height: 1.15; color: var(--color-ink); }
.gauge__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.gauge__legend b { color: var(--color-ink); }
.mark { flex: none; width: 10px; height: 10px; background: var(--color-series-1); }
.mark--2 { background: var(--color-series-2); }
.spark { position: absolute; inset: auto 0 0; width: 100%; height: 55%; }
.spark__area { fill: var(--color-series-1-fill); }
.spark__line { fill: none; stroke: var(--color-series-1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark__area--2 { fill: var(--color-series-2-fill); }
.spark__line--2 { stroke: var(--color-series-2); }
.spark__cross { stroke: var(--color-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-md); margin-top: var(--space-xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.row b { font-weight: 800; }
.updated { min-height: 1lh; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* вход */
.login { width: 100%; max-width: calc(26rem + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-3xl) var(--gutter); }
.login h1 { font-size: var(--text-3xl); margin-bottom: var(--space-xl); }
.login label { display: block; margin-bottom: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
.login input { display: block; width: 100%; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: 0; background: var(--color-paper-3); color: var(--color-ink); }
.login input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.login .btn { width: 100%; margin-top: var(--space-md); }

.notice { padding: var(--space-lg) var(--gutter); background: var(--color-accent-2); color: var(--color-ink); font-weight: 500; }

@media (max-width: 52rem) {
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .gauge { min-height: 10rem; }
  .board { padding: var(--space-md); }
  .btn--power { min-height: 76px; font-size: var(--text-lg); }
  .board__label { flex-basis: 100%; }
  .board .board__value { flex-basis: 100%; font-size: var(--text-md); }
  .board__action, .btn--plate { width: 100%; }
}