/* Page scaffolding for the finance application.
 *
 * Layout only. Every value is a Botnest token — nothing here invents a colour,
 * a radius or a spacing step, and nothing redefines an upstream one. Anything
 * finance-specific and reusable belongs in packages/botnest-finance under the
 * .bnf- prefix, not here. ADR 0005 records why. */

body {
  background: var(--bn-bg);
  color: var(--bn-text);
  margin: 0;
}

.kmhf-header {
  padding: var(--bn-sp-4) var(--bn-sp-5);
}

.kmhf-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--bn-sp-4);
  flex-wrap: wrap;
}

.kmhf-brand {
  font-weight: 700;
  font-size: var(--bn-text-lg);
  color: inherit;
  text-decoration: none;
}

.kmhf-nav {
  flex: 1;
  min-width: 0;
}

.kmhf-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--bn-sp-6) var(--bn-sp-5) var(--bn-sp-8);
}

.kmhf-centred {
  max-width: 26rem;
  margin: var(--bn-sp-8) auto;
}

.kmhf-card {
  padding: var(--bn-sp-5);
}

.kmhf-block {
  display: block;
  width: 100%;
}

.kmhf-mt {
  margin-top: var(--bn-sp-4);
}

.kmhf-section {
  margin-top: var(--bn-sp-7);
}

/* `min(…, 100%)`: a lone auto-fit column otherwise keeps its stated minimum in a
   narrower container and stands outside it. Same fix as the preview pages. */
.kmhf-grid {
  display: grid;
  gap: var(--bn-sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.kmhf-grid > * {
  min-width: 0;
}

.kmhf-stat {
  padding: var(--bn-sp-4);
}

.kmhf-stat-label {
  color: var(--bn-text-muted);
  font-size: var(--bn-text-sm);
}

.kmhf-stat-value {
  font-size: var(--bn-text-2xl);
  font-weight: 700;
  margin: var(--bn-sp-1) 0;
}

.kmhf-list {
  list-style: none;
  margin: var(--bn-sp-3) 0 0;
  padding: 0;
}

.kmhf-list-row {
  display: flex;
  align-items: center;
  gap: var(--bn-sp-3);
  padding: var(--bn-sp-3) 0;
  border-bottom: 1px solid var(--bn-border);
}

.kmhf-list-row > span:first-child {
  flex: 1;
}

.kmhf-controls {
  display: flex;
  gap: var(--bn-sp-2);
  flex-wrap: wrap;
  align-items: center;
}

/* A five-column statement is wider than a phone. It scrolls in its own box; the
   page never scrolls sideways. */
.kmhf-scroll {
  overflow-x: auto;
}

.kmhf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A capture awaiting review, and its own form. */
.kmhf-capture {
  margin-bottom: var(--bn-sp-4);
  max-width: 44rem;
}

.kmhf-capture-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bn-sp-3);
}

.kmhf-capture-head .bn-help {
  display: block;
}

.kmhf-capture-amount {
  font-size: var(--bn-text-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kmhf-capture-tags {
  display: flex;
  gap: var(--bn-sp-2);
  flex-wrap: wrap;
  margin-top: var(--bn-sp-2);
}

.kmhf-fieldset {
  border: 1px solid var(--bn-border);
  border-radius: var(--bn-radius-md);
  padding: var(--bn-sp-3);
}

/* The entity-type choice. No option is pre-selected — the structure decides
   which owner transactions are even possible, and a default here would be an
   answer nobody gave. */
.kmhf-choice {
  display: flex;
  gap: var(--bn-sp-3);
  align-items: flex-start;
  padding: var(--bn-sp-3);
  border-radius: var(--bn-radius-md);
  cursor: pointer;
}

.kmhf-choice:hover {
  background: var(--bn-surface-2);
}

.kmhf-choice .bn-help {
  display: block;
}