/* nrg.market cabinet — page layout only.
   Rule (cabinet-plan §K8): no colour, size or radius literal outside tokens.

   That rule — not CSP — is why the screens carry no inline style attributes:
   an inline style is a value with nowhere to put the token. Do not put them
   back on the grounds that CSP tolerates them. It very likely does: htm and
   preact write string style props through element.style.cssText, a CSSOM
   write, which style-src does not police — setAttribute with "style" appears
   nowhere in web/vendor/preact.mjs. К8 forbids them regardless, and
   web/tests/inline-styles.test.mjs fails if one comes back.

   Colours, spacing, radii below are all var(--nrg-*). The only bare pixel
   values are structural grid tracks and breakpoints taken straight from the
   design handoff ("сетка 216px 1fr", rail collapses to 62px at 760px). */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--nrg-bg);
  color: var(--nrg-text);
  font-family: var(--nrg-font-sans);
  font-size: var(--nrg-text-sm);
  line-height: var(--nrg-leading-normal);
  -webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; font-weight: var(--nrg-weight-semibold); letter-spacing: var(--nrg-tracking-tight); }
h2 { font-size: var(--nrg-text-md); }
a { color: var(--nrg-accent); text-decoration: none; }
a:hover { color: var(--nrg-accent-hover); }
code { font-family: var(--nrg-font-mono); font-size: var(--nrg-text-xs); }

/* ---------- cabinet chrome: rail + main ---------- */
.cab { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }
.cab__rail {
  display: flex; flex-direction: column;
  border-right: var(--nrg-border-width) solid var(--nrg-line);
  background: var(--nrg-surface);
  padding: var(--nrg-space-4) var(--nrg-space-3);
  gap: var(--nrg-space-4);
  position: sticky; top: 0; height: 100vh;
}
.cab__brand { font-size: var(--nrg-text-lg); padding: 0 var(--nrg-space-2); }
.cab__brand span { color: var(--nrg-text-dim); }
.cab__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nrg-space-1); flex: 1; }
.cab__link {
  display: flex; align-items: center; gap: var(--nrg-space-3);
  padding: var(--nrg-space-2) var(--nrg-space-3);
  border-radius: var(--nrg-radius);
  color: var(--nrg-text-muted);
  min-height: var(--nrg-tap-min);
}
.cab__link:hover { background: var(--nrg-surface-hover); color: var(--nrg-text); }
.cab__link.is-active { background: var(--nrg-accent-soft); color: var(--nrg-accent); }
.cab__mono {
  font-family: var(--nrg-font-mono); font-size: var(--nrg-text-2xs);
  color: var(--nrg-text-dim); width: 34px; letter-spacing: var(--nrg-tracking-caps);
}
.cab__link.is-active .cab__mono { color: var(--nrg-accent); }
.cab__signout { align-self: flex-start; }

.cab__main { display: flex; flex-direction: column; min-width: 0; }
.cab__header {
  display: flex; align-items: center; gap: var(--nrg-space-4);
  padding: var(--nrg-space-3) var(--nrg-space-6);
  border-bottom: var(--nrg-border-width) solid var(--nrg-line);
  background: var(--nrg-surface-2);
  position: sticky; top: 0; z-index: var(--nrg-z-sticky);
}
.cab__bal { display: flex; align-items: center; gap: var(--nrg-space-2); flex-wrap: wrap; }
.cab__bal .nrg-balance__label { margin-left: var(--nrg-space-3); }
.cab__content { padding: var(--nrg-space-6); overflow-x: hidden; }

/* ---------- generic screen scaffolding ---------- */
.screen { display: flex; flex-direction: column; gap: var(--nrg-space-6); }
.screen--full { height: calc(100vh - 120px); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nrg-space-6); }
.cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--nrg-space-4); }
.stack { display: flex; flex-direction: column; gap: var(--nrg-space-3); }
.row-gap { display: flex; gap: var(--nrg-space-3); flex-wrap: wrap; }
/* Empty div that eats the free space of a flex row, pushing what follows to
   the far end. Used in the header, both toolbars and the api-keys panel head. */
.spacer { flex: 1; }

.panel {
  border: var(--nrg-border-width) solid var(--nrg-line);
  border-radius: var(--nrg-radius-lg);
  background: var(--nrg-surface);
  padding: var(--nrg-space-6);
  display: flex; flex-direction: column; gap: var(--nrg-space-4);
  min-width: 0;
}
.panel__head { display: flex; align-items: center; gap: var(--nrg-space-3); }
/* .panel is a flex column with gap var(--nrg-space-4); these margins add to
   that gap, setting the trailing blocks off from the body of the panel. */
.panel__error { margin-top: var(--nrg-space-3); }
.panel__actions { margin-top: var(--nrg-space-4); }
.card {
  border: var(--nrg-border-width) solid var(--nrg-line);
  border-radius: var(--nrg-radius-lg);
  background: var(--nrg-surface);
  padding: var(--nrg-space-4);
  display: flex; flex-direction: column; gap: var(--nrg-space-2);
}
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nrg-space-2); }

.toolbar {
  display: flex; align-items: center; gap: var(--nrg-space-3);
  padding-bottom: var(--nrg-space-3);
}
.table-scroll { overflow: auto; flex: 1; border: var(--nrg-border-width) solid var(--nrg-line); border-radius: var(--nrg-radius-lg); }
.table-scroll .nrg-table thead th { position: sticky; top: 0; z-index: var(--nrg-z-sticky); }
.pager-bar { display: flex; gap: var(--nrg-space-3); padding-top: var(--nrg-space-3); }

.deposit-row { display: flex; gap: var(--nrg-space-6); flex-wrap: wrap; align-items: flex-start; }
.deposit-detail { display: flex; flex-direction: column; gap: var(--nrg-space-3); flex: 1; min-width: 240px; }

/* ---------- page-level sizing of design-system components ----------
   Sizes the design system leaves to the page. Where the component already sets
   the property, the selector is compound (component class + page class) so it
   outranks the single-class rule in components.css — that file is vendored
   verbatim and its SRI hash is in index.html, so it must not be edited. */
.nrg-input.input--area { height: auto; padding: var(--nrg-space-3); }
/* Skeletons hold the height of the block they stand in for, so the panel does
   not jump when data lands; .nrg-skeleton's own height is a single 10px bar.
   Both heights are whole steps of the spacing scale: 5 × 16 and 5 × 24. */
.nrg-skeleton.skeleton--fields { height: calc(var(--nrg-space-4) * 5); }
.nrg-skeleton.skeleton--table { height: calc(var(--nrg-space-6) * 5); }
/* The savings item takes the slack of the balance row. 180px is the width it
   may shrink to before wrapping — a structural track like .cards-row's 200px
   and .deposit-detail's 240px, not a value off the spacing scale. */
.balance-grow { flex: 1; min-width: 180px; }

/* ---------- auth screens ---------- */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--nrg-space-6); background: var(--nrg-bg);
}
.auth-card {
  width: min(400px, 100%);
  border: var(--nrg-border-width) solid var(--nrg-line);
  border-radius: var(--nrg-radius-lg);
  background: var(--nrg-surface);
  padding: var(--nrg-space-8);
  display: flex; flex-direction: column; gap: var(--nrg-space-4);
}
.auth-brand { display: flex; align-items: baseline; gap: var(--nrg-space-2); color: var(--nrg-text-dim); }
.auth-brand strong { color: var(--nrg-text); font-size: var(--nrg-text-lg); }
.auth-title { font-size: var(--nrg-text-xl); }
.auth-form { display: flex; flex-direction: column; gap: var(--nrg-space-4); }
.auth-form .nrg-btn { width: 100%; }
.auth-links { display: flex; flex-direction: column; gap: var(--nrg-space-2); font-size: var(--nrg-text-sm); }
.auth-error { margin: 0; }

/* ---------- responsive: rail collapses to monograms ---------- */
@media (max-width: 760px) {
  .cab { grid-template-columns: 62px 1fr; }
  .cab__brand span, .cab__link .cab__label, .cab__signout { display: none; }
  .cab__mono { width: auto; }
  .grid-2 { grid-template-columns: 1fr; }
  .cab__bal { display: none; }
}