/* Hallmark · genre: modern-minimal · tone: technical-utilitarian · anchor: cobalt · macrostructure: Workbench · knobs: dense-ledger/instrument-panels · theme: Cobalt · enrichment: none · nav: N13 · footer: Ft2 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34,49,50–57) */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
@import url("/assets/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
body {
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
code, kbd, pre, .machine-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.12;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-2xl); font-weight: 700; }
h2 { font-size: var(--text-lg); font-weight: 700; }
h3 { font-size: var(--text-md); font-weight: 700; }
a { color: var(--color-accent); }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.machine-label {
  color: var(--color-neutral);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-shell {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding: var(--space-lg) clamp(var(--space-md), 5vw, var(--space-2xl));
  background: var(--color-paper-2);
  color: var(--color-ink-2);
}
.login-panel {
  width: min(100%, 31rem);
  margin-inline: auto;
  padding-block: var(--space-xl);
  border-block: var(--rule-thin) solid var(--color-rule-2);
}
.login-panel h1 { margin-block: var(--space-sm); font-size: var(--text-display-s); }
.login-panel__lede { max-width: 54ch; color: var(--color-muted); }
.login-panel__meta { margin-block-start: var(--space-xl); color: var(--color-neutral); font-size: var(--text-sm); }

.form-stack { display: grid; gap: var(--space-md); margin-block-start: var(--space-xl); }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field__label { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; }
.field__control { position: relative; display: block; }
.field__control input { padding-inline-end: var(--space-xl); }
.field__state { position: absolute; inset-inline-end: var(--space-sm); inset-block-start: 50%; transform: translateY(-50%); color: var(--color-success); }
.field__help, .form-error { min-height: 1.3em; color: var(--color-neutral); font-size: var(--text-xs); }
.form-error { color: var(--color-error); }
.field-pair { display: grid; gap: var(--space-md); }

input, select {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  padding-inline: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-paper);
  color: var(--color-ink);
}
input::placeholder { color: var(--color-neutral); }
input:focus-visible, select:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--color-error); }
.field[data-state="error"] .field__state { color: var(--color-error); }
.field[data-state="error"] .field__state::before { content: "!"; }
.field[data-state="success"] .field__state::before { content: "✓"; }
.field[data-state="loading"] .field__state { width: var(--space-md); height: var(--space-md); border: 2px solid var(--color-rule); border-top-color: var(--color-accent); border-radius: 50%; animation: spin 800ms linear infinite; }

.button, .command-trigger, .side-nav__item, .text-action, .icon-button {
  min-height: var(--control-height);
  border: var(--rule-thin) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); padding-inline: var(--space-md); }
.button--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.button--outline { border-color: var(--color-rule-2); background: var(--color-paper); color: var(--color-ink); }
.button--quiet { color: var(--color-muted); }
.button:active, .command-trigger:active, .side-nav__item:active, .text-action:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.button[data-state="loading"]::before { content: ""; width: var(--space-md); height: var(--space-md); border: 2px solid var(--color-accent-ink); border-top-color: transparent; border-radius: 50%; animation: spin 800ms linear infinite; }
.button[data-state="success"] { border-color: var(--color-success); }
.button[data-state="error"] { border-color: var(--color-error); }

.operator-shell { min-height: 100dvh; padding-block-start: var(--banner-height); }
.topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-sticky-nav);
  height: var(--banner-height);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding-inline: clamp(var(--space-md), 3vw, var(--space-xl));
  border-block-end: var(--rule-thin) solid var(--color-rule);
  background: var(--color-paper);
  color: var(--color-ink-2);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; min-width: 0; }
.brand__mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--color-graphite); color: var(--color-graphite-ink); border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: 600; }
.brand__copy { display: grid; min-width: 0; }
.brand__copy strong { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.1; }
.brand__copy strong { white-space: nowrap; }
.brand__copy small { color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-trigger { display: none; align-items: center; justify-content: space-between; min-width: 13rem; padding-inline: var(--space-sm); border-color: var(--color-rule); color: var(--color-neutral); }
.command-trigger kbd, .command-search kbd { padding: var(--space-2xs) var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-xs); background: var(--color-paper-2); font-size: var(--text-xs); }
.topbar__status { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); }
.logout-label--short { display: none; }
.merchant-picker { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.merchant-picker select { max-width: 15rem; min-height: 2.25rem; border: var(--rule-thin) solid var(--color-rule-2); border-radius: var(--radius-xs); background: var(--color-paper); color: var(--color-ink); padding-inline: var(--space-xs); }
.connection-state { display: none; align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.status-dot { width: var(--space-xs); height: var(--space-xs); border-radius: 50%; background: var(--color-warning); }
.connection-state.is-online .status-dot { background: var(--color-success); }
.connection-state.is-offline .status-dot { background: var(--color-error); }

.side-rail { display: none; }
.mobile-view-picker { display: grid; gap: var(--space-2xs); padding: var(--space-md); border-block-end: var(--rule-thin) solid var(--color-rule); background: var(--color-paper-2); font-size: var(--text-xs); }
.operator-content { width: 100%; max-width: var(--content-max); margin-inline: auto; }
.workspace { padding: var(--space-xl) clamp(var(--space-md), 4vw, var(--space-2xl)) var(--space-2xl); }
.workspace-head { display: grid; gap: var(--space-md); align-items: end; padding-block-end: var(--space-lg); border-block-end: var(--rule-thin) solid var(--color-rule-2); }
.workspace-head p, .data-section__head p { margin-block-start: var(--space-xs); color: var(--color-muted); max-width: 64ch; }

.balance-strip { display: grid; border-block-end: var(--rule-thin) solid var(--color-rule); }
.balance-strip article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xs); padding-block: var(--space-lg); }
.balance-strip article + article { border-block-start: var(--rule-thin) solid var(--color-rule); }
.balance-strip span { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); }
.balance-strip strong { color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; line-height: 1; }
.balance-strip small { color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); }

.overview-grid, .workbench-grid { display: grid; gap: var(--space-lg); margin-block-start: var(--space-xl); }
.instrument-panel, .tool-panel, .connection-sheet { border: var(--rule-thin) solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink-2); }
.instrument-panel, .connection-sheet { padding: var(--space-lg); }
.instrument-panel--dark { background: var(--color-graphite); color: var(--color-graphite-ink); border-color: var(--color-graphite-2); }
.instrument-panel--dark h2 { color: var(--color-graphite-ink); }
.instrument-panel header, .tool-panel header, .data-section__head { display: flex; justify-content: space-between; gap: var(--space-md); align-items: start; }
.tool-panel { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-lg); }
.tool-panel header { display: grid; }
.tool-panel header p { color: var(--color-muted); font-size: var(--text-sm); }
.readout-list, .spec-sheet { display: grid; margin: var(--space-lg) 0 0; }
.readout-list div, .spec-sheet div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); padding-block: var(--space-sm); border-block-start: var(--rule-thin) solid var(--color-rule); }
.readout-list dt, .spec-sheet dt { color: var(--color-muted); }
.readout-list dd, .spec-sheet dd { margin: 0; color: var(--color-ink); font-family: var(--font-mono); text-align: end; overflow-wrap: anywhere; }
.attention-readout { display: grid; gap: var(--space-lg); margin-block-start: var(--space-xl); }
.attention-readout strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); }

.text-action { min-height: 2.75rem; padding-inline: var(--space-sm); color: var(--color-accent); }
.text-action--inverse { color: var(--color-graphite-ink); }
.data-section { margin-block-start: var(--space-2xl); }
.data-section__head { display: grid; gap: var(--space-md); align-items: end; padding-block-end: var(--space-md); }
.compact-filter { display: grid; grid-template-columns: auto minmax(8rem, 1fr); align-items: center; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.compact-filter select { height: 2.5rem; }

.activity-list { display: grid; margin-block-start: var(--space-sm); border-block-start: var(--rule-thin) solid var(--color-rule); }
.activity-row { display: grid; grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.5fr) auto; gap: var(--space-md); align-items: center; padding-block: var(--space-sm); border-block-end: var(--rule-thin) solid var(--color-rule); }
.activity-row code { color: var(--color-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }

.data-table-wrap { width: 100%; overflow-x: auto; border-block-start: var(--rule-thin) solid var(--color-rule-2); }
.data-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: var(--text-sm); }
.data-table th, .data-table td { padding: var(--space-sm) var(--space-xs); text-align: start; vertical-align: middle; border-block-end: var(--rule-thin) solid var(--color-rule); }
.data-table th { color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.data-table td { color: var(--color-ink-2); }
.data-table td.tnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); justify-content: flex-end; }
.row-actions .button { min-height: 2.4rem; padding-inline: var(--space-sm); font-size: var(--text-xs); }
.empty-state { display: grid; gap: var(--space-xs); justify-items: start; padding-block: var(--space-xl); color: var(--color-muted); }
.empty-state strong { color: var(--color-ink); }

.status-badge { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 1.75rem; padding-inline: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-xs); color: var(--color-muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.status-badge::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--color-neutral); }
.status-badge[data-tone="success"] { border-color: var(--color-success); color: var(--color-success); }
.status-badge[data-tone="success"]::before { background: var(--color-success); }
.status-badge[data-tone="warning"] { border-color: var(--color-warning); color: var(--color-warning); }
.status-badge[data-tone="warning"]::before { background: var(--color-warning); }
.status-badge[data-tone="error"] { border-color: var(--color-error); color: var(--color-error); }
.status-badge[data-tone="error"]::before { background: var(--color-error); }
.status-badge[data-tone="info"] { border-color: var(--color-accent); color: var(--color-accent); }
.status-badge[data-tone="info"]::before { background: var(--color-accent); }

.inline-fund-form { display: grid; gap: var(--space-md); align-items: end; margin-block-start: var(--space-xl); padding-block-start: var(--space-lg); border-block-start: var(--rule-thin) solid var(--color-rule); }
.foot-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) clamp(var(--space-md), 4vw, var(--space-xl)); border-block-start: var(--rule-thin) solid var(--color-rule); color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); }

dialog { border: 0; padding: 0; color: var(--color-ink-2); }
dialog::backdrop { background: var(--color-overlay); }
.command-palette, .detail-dialog { position: fixed; inset: 0; margin: auto; width: min(38rem, calc(100% - 2rem)); max-height: min(80dvh, 44rem); border-radius: var(--radius-md); background: var(--color-paper); color: var(--color-ink-2); box-shadow: 0 1px 2px var(--color-shadow); }
.command-palette__panel, .detail-dialog article { display: grid; max-height: inherit; }
.command-palette header, .detail-dialog header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md); border-block-end: var(--rule-thin) solid var(--color-rule); }
.icon-button { width: var(--control-height); padding: 0; font-size: var(--text-xl); }
.command-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); align-items: center; padding: var(--space-sm); border-block-end: var(--rule-thin) solid var(--color-rule); }
.command-search input { border: 0; outline: 0; }
.command-results { display: grid; gap: var(--space-2xs); min-height: 12rem; overflow-y: auto; padding: var(--space-sm); }
.command-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; min-height: var(--control-height); padding-inline: var(--space-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink-2); text-align: start; cursor: pointer; }
.command-item.is-active { background: var(--color-accent-soft); color: var(--color-ink); }
.command-item small { color: var(--color-neutral); font-family: var(--font-mono); }
.command-palette footer { display: flex; justify-content: flex-end; gap: var(--space-md); padding: var(--space-sm); border-block-start: var(--rule-thin) solid var(--color-rule); color: var(--color-neutral); font-size: var(--text-xs); }
.detail-dialog article { padding: var(--space-md); }
.detail-dialog form { display: grid; gap: var(--space-md); padding: var(--space-md); }
.detail-dialog header { padding: 0 0 var(--space-sm); }
.detail-dialog pre { margin: var(--space-md) 0 0; padding: var(--space-md); overflow: auto; border-radius: var(--radius-sm); background: var(--color-graphite); color: var(--color-graphite-ink); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere; }

.toast-stack { position: fixed; inset-inline-end: var(--space-md); inset-block-end: var(--space-md); z-index: var(--z-toast); display: grid; gap: var(--space-xs); width: min(24rem, calc(100% - 2rem)); }
.toast { padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-error); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--color-error); box-shadow: 0 1px 2px var(--color-shadow); animation: toast-in var(--dur-long) var(--ease-out) both; }

.payment-page { min-height: 100dvh; display: grid; align-items: center; padding: var(--space-lg); background: var(--color-paper-2); color: var(--color-ink-2); }
.payment-panel { width: min(100%, 32rem); margin-inline: auto; padding-block: var(--space-xl); border-block: var(--rule-thin) solid var(--color-rule-2); }
.payment-panel h1 { margin-block: var(--space-xs); font-size: var(--text-display-s); }
.payment-status { color: var(--color-accent); font-weight: 600; }
.payment-amount { margin-block: var(--space-xl); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.payment-details { display: grid; margin: 0; }
.payment-details div { display: grid; grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr); gap: var(--space-md); padding-block: var(--space-sm); border-block-start: var(--rule-thin) solid var(--color-rule); }
.payment-details dt { color: var(--color-muted); }
.payment-details dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.payment-actions { display: grid; gap: var(--space-sm); margin-block-start: var(--space-xl); }
.payment-notice { margin-block: var(--space-md); padding: var(--space-sm); border-inline-start: var(--rule-thin) solid var(--color-warning); background: var(--color-warning-soft); color: var(--color-ink-2); }
.payment-meta { margin-block-start: var(--space-xl); color: var(--color-neutral); font-size: var(--text-sm); }

@keyframes spin { to { transform: rotate(1turn); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-xs)); } to { opacity: 1; transform: none; } }

@media (hover: hover) and (pointer: fine) {
  input:hover, select:hover, .button--outline:hover, .command-trigger:hover { background: var(--color-paper-2); }
  .button:hover, .text-action:hover { transform: translateY(-1px); }
  .side-nav__item:hover { color: var(--color-ink); }
}

@media (min-width: 40rem) {
  .field-pair, .inline-fund-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-head, .data-section__head { grid-template-columns: minmax(0, 1fr) auto; }
  .balance-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .balance-strip article { padding-inline: var(--space-lg); }
  .balance-strip article + article { border-block-start: 0; border-inline-start: var(--rule-thin) solid var(--color-rule); }
  .balance-strip article:first-child { padding-inline-start: 0; }
  .overview-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .workbench-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .connection-state { display: inline-flex; }
}

@media (min-width: 60rem) {
  .operator-shell { padding-inline-start: 15rem; }
  .topbar { grid-template-columns: minmax(14rem, 1fr) minmax(15rem, 0.8fr) minmax(18rem, 1fr); }
  .command-trigger { display: flex; }
  .side-rail { position: fixed; inset-block: var(--banner-height) 0; inset-inline-start: 0; z-index: var(--z-sticky); display: flex; flex-direction: column; justify-content: space-between; width: 15rem; padding: var(--space-lg) var(--space-md); border-inline-end: var(--rule-thin) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink-2); }
  .side-nav { display: grid; gap: var(--space-2xs); }
  .side-nav__item { width: 100%; padding-inline: var(--space-sm); text-align: start; color: var(--color-muted); }
  .side-nav__item.is-active { background: var(--color-accent-soft); color: var(--color-ink); }
  .side-nav__item.is-active::before { content: ""; display: inline-block; width: var(--space-xs); height: var(--space-xs); margin-inline-end: var(--space-xs); border-radius: 50%; background: var(--color-accent); }
  .side-rail__foot { display: grid; gap: var(--space-2xs); padding-block-start: var(--space-md); border-block-start: var(--rule-thin) solid var(--color-rule); color: var(--color-neutral); font-size: var(--text-xs); }
  .side-rail__foot strong { color: var(--color-ink); font-family: var(--font-display); }
  .mobile-view-picker { display: none; }
}

@media (min-width: 40rem) and (max-width: 59.999rem) {
  .brand__copy strong { white-space: nowrap; }
  .merchant-picker > span, .connection-state, .topbar__status .button--quiet { display: none; }
  .merchant-picker select { max-width: 11rem; }
}

@media (max-width: 39.999rem) {
  .merchant-picker { display: none; }
  .brand__copy strong { font-size: var(--text-sm); }
  .logout-label--long { display: none; }
  .logout-label--short { display: inline; }
  .topbar__status .button--quiet { display: none; }
  .brand__copy small { max-width: 8rem; }
  .data-table-wrap { overflow: visible; border-block-start: 0; }
  .data-table, .data-table tbody { display: block; }
  .data-table thead { display: none; }
  .data-table tr { display: grid; gap: var(--space-xs); padding-block: var(--space-md); border-block-start: var(--rule-thin) solid var(--color-rule); }
  .data-table td { display: grid; grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr); gap: var(--space-sm); padding: 0; border: 0; overflow-wrap: anywhere; }
  .data-table td::before { content: attr(data-label); color: var(--color-neutral); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }
  .row-actions { justify-content: flex-start; }
  .activity-row { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .payment-details div { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

@media (pointer: coarse) {
  .button, .side-nav__item, .command-trigger, .text-action, .icon-button { min-height: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .button:hover, .text-action:hover { transform: none; }
}