/* Hallmark · shape: app screen · genre: playful · theme: Arcade (deal 2/3, seed web-panel-start-watch-0ea0·b1430daf·2026-10-28·r0)
 * nav: top bar with wordmark, the play address and sign-out · signature: the live server console in a CRT well · states: loading, empty (machine asleep or off), error (API unreachable), full · arcade: ember/grille
 * axes: dark/pixel/chromatic-ember · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the side column stacks four wells, so only the clock figures carry Silkscreen and the console owns the screen */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-ok: var(--color-accent-2);
  --color-warn: var(--color-accent);
  --log-height: min(68vh, 720px);
}

body { min-height: 100vh; }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.noscript { padding: var(--space-lg); }

h2 { font-family: var(--font-body); font-weight: 900; letter-spacing: -0.02em; line-height: 1; font-size: var(--text-lg); }

.wordmark {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 1.02;
  font-size: var(--text-3xl);
  text-shadow: -1.5px 0 0 var(--color-crt-r), 1.5px 0 0 var(--color-crt-c);
}
.wordmark--small { font-size: var(--text-xl); }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 40px; padding: var(--space-xs) var(--space-lg);
  background: var(--color-accent); color: var(--color-accent-ink);
  border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card);
  font-weight: 700; cursor: pointer;
  box-shadow: 4px 4px 0 var(--color-accent-2);
  transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.btn:hover { translate: -1px -1px; box-shadow: 5px 5px 0 var(--color-accent-2); }
.btn:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--color-accent-2); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-busy="true"] { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; translate: none; box-shadow: 2px 2px 0 var(--color-rule); }
.btn[aria-busy="true"] { cursor: progress; }
.btn--ghost { background: transparent; color: var(--color-ink); box-shadow: 4px 4px 0 var(--color-rule); }
.btn--ghost:hover { box-shadow: 5px 5px 0 var(--color-rule); }
.btn--ghost:active { box-shadow: 1px 1px 0 var(--color-rule); }
.btn--danger { background: var(--color-paper-3); color: var(--color-error); border-color: var(--color-error); box-shadow: 4px 4px 0 var(--color-rule); }
.btn--small { min-height: 32px; padding: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }

.chip {
  min-height: 32px; padding: var(--space-2xs) var(--space-sm);
  background: var(--color-paper-3); color: var(--color-ink-2);
  border: var(--rule-hair) solid var(--color-rule); border-radius: 0;
  font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--dur-micro) steps(1), color var(--dur-micro) steps(1);
}
.chip:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.chip:active { translate: 1px 1px; }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- вход ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: var(--space-md); }
.login__card { width: min(100%, 420px); display: grid; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); }
.field { display: grid; gap: var(--space-2xs); }
.field__label { font-weight: 700; font-size: var(--text-sm); }
.field input, .cmd input {
  min-height: 44px; padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper); color: var(--color-ink);
  border: var(--rule-bar) solid var(--color-muted); border-radius: 0;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.field input:hover, .cmd input:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .cmd input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
.field input:disabled, .cmd input:disabled { opacity: 0.5; cursor: not-allowed; }
.field input[aria-invalid="true"] { border-color: var(--color-error); }
.form-error { color: var(--color-error); font-weight: 700; }

/* ---------- верхняя полоса ---------- */
.topbar { border-bottom: var(--rule-bar) solid var(--color-rule); background: var(--color-paper-2); }
.topbar__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; flex-wrap: wrap; padding-block: var(--space-xs); }
.address { display: flex; align-items: center; gap: var(--space-sm); margin-inline-start: auto; flex-wrap: wrap; min-width: 0; }
.address__label { color: var(--color-muted); font-size: var(--text-sm); }
.address__value { color: var(--color-accent-2); font-weight: 700; overflow-wrap: anywhere; }

.banner {
  margin: 0; padding: var(--space-sm) var(--gutter);
  background: var(--color-paper-3); color: var(--color-ink); font-weight: 700;
  border-bottom: var(--rule-bar) solid var(--color-accent);
}

/* ---------- раскладка ---------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--space-lg); padding-block: var(--space-lg) var(--space-2xl); align-items: start;
}
.col { display: grid; gap: var(--space-lg); min-width: 0; }
.col--console { position: sticky; top: var(--space-md); }

.well {
  background: var(--color-paper-2); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg); display: grid; gap: var(--space-sm); min-width: 0;
}
.well__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }

.state { font-weight: 700; font-size: var(--text-sm); padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid currentColor; }
.state[data-tone="ok"] { color: var(--color-ok); }
.state[data-tone="warn"] { color: var(--color-warn); }
.state[data-tone="bad"] { color: var(--color-error); }
.state[data-tone="idle"] { color: var(--color-muted); }

.clock { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.figure {
  font-family: var(--font-outlier); font-weight: 700; font-size: 2.6rem; line-height: 1;
  color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.figure--acid { color: var(--color-accent-2); }
.clock__label { font-weight: 700; color: var(--color-ink-2); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-2xs); }

/* переключатели */
.switch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; cursor: pointer; padding-block: var(--space-2xs); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__box {
  width: 44px; height: 24px; margin-top: var(--space-3xs); position: relative;
  border: var(--rule-bar) solid var(--color-muted); background: var(--color-paper);
  transition: background-color var(--dur-micro) steps(1), border-color var(--dur-micro) steps(1);
}
.switch__box::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--color-muted);
  transition: translate var(--dur-micro) var(--ease-out), background-color var(--dur-micro) steps(1);
}
.switch:hover .switch__box { border-color: var(--color-ink-2); }
.switch input:checked + .switch__box { background: var(--color-accent); border-color: var(--color-ink); }
.switch input:checked + .switch__box::after { translate: 20px 0; background: var(--color-accent-ink); }
.switch input:focus-visible + .switch__box { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch input:disabled + .switch__box { background: var(--color-paper-3); border-color: var(--color-rule); cursor: progress; }
.switch__text { font-size: var(--text-sm); color: var(--color-ink-2); }
.switch__text b { color: var(--color-ink); font-size: var(--text-md); }

/* таблица служб */
.svc { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.svc th { text-align: left; font-weight: 400; color: var(--color-muted); padding: var(--space-2xs) 0; }
.svc td { text-align: right; font-weight: 700; padding: var(--space-2xs) 0; }
.svc tr + tr th, .svc tr + tr td { border-top: var(--rule-hair) solid var(--color-rule); }
.svc td[data-tone="ok"] { color: var(--color-ok); }
.svc td[data-tone="bad"] { color: var(--color-error); }

/* журнал */
.events { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--text-sm); }
.events li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-2xs) 0; }
.events li + li { border-top: var(--rule-hair) solid var(--color-rule); }
.events time { color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ---------- нагрузка ---------- */
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-sm); }
.meter {
  background: var(--color-paper-2); border: var(--rule-bar) solid var(--color-rule); border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md); display: grid; gap: var(--space-2xs); align-content: start; min-width: 0;
}
.meter__label { font-weight: 700; font-size: var(--text-sm); color: var(--color-ink-2); }
.meter__value { display: flex; align-items: baseline; gap: var(--space-2xs); }
.meter .figure { font-size: 2.5rem; font-variant-numeric: tabular-nums; }
.meter__unit { font-weight: 700; color: var(--color-muted); font-size: var(--text-sm); }
.meter__note { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.meter[data-tone="warn"] .figure { color: var(--color-accent); }
.meter[data-tone="bad"] .figure { color: var(--color-error); }
.spark { width: 100%; height: 36px; overflow: visible; cursor: crosshair; touch-action: none; }
.spark .spark__area { fill: color-mix(in oklab, var(--color-accent) 22%, transparent); stroke: none; }
.spark .spark__line { fill: none; stroke: var(--color-accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark__base { stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark .spark__cross { stroke: var(--color-ink-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- консоль ---------- */
.console { padding: var(--space-md); gap: var(--space-sm); }
.crt { position: relative; isolation: isolate; }
.crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
  background-image:
    repeating-linear-gradient(to right, color-mix(in oklab, var(--color-crt-r) 4%, transparent) 0 1px, color-mix(in oklab, var(--color-crt-g) 4%, transparent) 1px 2px, color-mix(in oklab, var(--color-crt-b) 4%, transparent) 2px 3px);
}
.log {
  margin: 0; height: var(--log-height); overflow: auto;
  background: var(--color-shade); color: var(--color-ink-2);
  border: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-sm); font: 0.82rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; position: relative; z-index: 1;
}
.log:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.log .l-warn { color: var(--color-accent); }
.log .l-err { color: var(--color-error); }
.log .l-join { color: var(--color-accent-2); }
.log .l-chat { color: var(--color-ink); font-weight: 700; }
.skeleton-line { display: block; height: 0.8em; margin-block: 0.5em; background: var(--color-paper-3); width: 70%; }
.skeleton-line:nth-child(2) { width: 52%; }
.skeleton-line:nth-child(3) { width: 61%; }

.log-empty {
  height: var(--log-height); display: grid; place-content: center; justify-items: center; gap: var(--space-md); text-align: center;
  background: var(--color-shade); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-lg);
  position: relative; z-index: 1;
}
.log-empty p { max-width: 36ch; color: var(--color-ink-2); }

.cmd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; position: relative; z-index: 3; }
.cmd__prompt { font-family: var(--font-outlier); font-weight: 700; color: var(--color-accent-2); font-size: var(--text-lg); }
.cmd input { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.quick { display: flex; flex-wrap: wrap; gap: var(--space-xs); position: relative; z-index: 3; }
.follow { font-size: var(--text-sm); color: var(--color-muted); display: inline-flex; gap: var(--space-2xs); align-items: center; cursor: pointer; }
.follow input { accent-color: var(--color-accent); }
.follow input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- уведомление ---------- */
.toast {
  position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-toast);
  max-width: min(420px, calc(100% - 2 * var(--space-md)));
  background: var(--color-ink); color: var(--color-paper); font-weight: 700;
  padding: var(--space-sm) var(--space-md); border: var(--rule-bar) solid var(--color-ink);
  box-shadow: 4px 4px 0 var(--color-accent);
}
.toast[data-tone="bad"] { box-shadow: 4px 4px 0 var(--color-error); }

/* ---------- узкие экраны ---------- */
@media (max-width: 60rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .col--console { position: static; order: -1; }
  :root { --log-height: 52vh; }
}
@media (max-width: 40rem) {
  .address__label { display: none; }
  .cmd { grid-template-columns: minmax(0, 1fr) auto; }
  .cmd__prompt { display: none; }
  .figure { font-size: 2.2rem; }
}