/* NERV finance dashboard. Brand v1 values come from brand.css (a copy of the brand token build).
   Cream ground, white cards, 4 px corners, no gradients, no glow, no shadows. */
@font-face {
  font-family: "Host Grotesk";
  src: url("fonts/HostGrotesk-wght.woff2") format("woff2-variations"),
       url("fonts/HostGrotesk-wght.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: var(--brand-color-text-primary);
  --muted: var(--brand-color-text-muted);
  --ground: var(--brand-color-ground-page);
  --sunken: var(--brand-color-ground-sunken);
  --card: var(--brand-card-ground);
  --line: var(--brand-card-border);
  --blue: var(--brand-color-action-secondary-default);
  --radius: var(--brand-radius-default);
  --good-ink: var(--brand-color-status-success-ink);
  --good-field: var(--brand-color-status-success-field);
  --warn-ink: var(--brand-color-status-warning-ink);
  --warn-field: var(--brand-color-status-warning-field);
  --bad-ink: var(--brand-color-status-danger-ink);
  --bad-field: var(--brand-color-status-danger-field);
  --grey-ink: var(--brand-color-text-muted);
  --grey-field: var(--brand-color-ground-sunken);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--brand-type-body-default-family);
  font-size: var(--brand-type-body-default-size);
  line-height: var(--brand-type-body-default-line-height);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; }
:focus-visible { outline: var(--brand-stroke-focus) solid var(--brand-color-focus-default); outline-offset: var(--brand-stroke-focus-offset); }

/* Buttons and inputs */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--brand-button-primary-height-phone);
  padding: 0 var(--brand-button-primary-pad-x);
  border: 0; border-radius: var(--brand-button-primary-radius);
  background: var(--brand-button-primary-ground); color: var(--brand-button-primary-ink);
  font-weight: var(--brand-font-weight-medium); cursor: pointer;
}
.btn-primary:hover { background: var(--brand-button-primary-ground-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

/* Sign-in */
.login, .state { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; gap: 16px; }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 24px; display: flex; flex-direction: column; gap: 8px;
}
.login-title { font-size: var(--brand-type-display-3-size); line-height: var(--brand-type-display-3-line-height); letter-spacing: var(--brand-type-display-3-tracking); font-weight: 400; }
.login-sub { color: var(--muted); margin-bottom: 16px; }
.field-label { font-size: var(--brand-type-label-default-size); font-weight: 500; }
#password {
  height: var(--brand-input-height); padding: 0 16px;
  border: var(--brand-input-border-width) solid var(--brand-input-border); border-radius: var(--brand-input-radius);
  background: var(--brand-input-ground); color: var(--ink);
}
.login-error { color: var(--bad-ink); font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); }
.login-card .btn-primary { margin-top: 16px; width: 100%; }
.state-text { color: var(--muted); max-width: 480px; text-align: center; }

/* Top bar: freshness always visible */
.topbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between;
  padding: 12px clamp(16px, 4vw, 48px);
  background: var(--ground); border-bottom: 1px solid var(--line);
}
.topbar-name { font-weight: 500; color: var(--blue); }
.freshness { color: var(--muted); font-size: var(--brand-type-body-small-size); }
.topbar-right { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.signout {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-size: var(--brand-type-body-small-size); text-decoration: underline; text-underline-offset: 2px;
}
.signout:hover { color: var(--blue); }
.banner { margin: 0; padding: 10px clamp(16px, 4vw, 48px); font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); border-bottom: 1px solid var(--line); }
.banner-warn { background: var(--warn-field); color: var(--warn-ink); }
.banner-sample { background: var(--sunken); color: var(--ink); }

/* Layout */
.wrap { max-width: 1200px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px) 64px; display: flex; flex-direction: column; gap: 16px; }
.headline {
  font-size: var(--brand-type-display-3-size); line-height: var(--brand-type-display-3-line-height);
  letter-spacing: var(--brand-type-display-3-tracking); font-weight: 400;
  max-width: 36ch; margin-bottom: 16px;
}
.row { display: grid; gap: 16px; }
.row-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .row-four { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .row-hero, .row-two { grid-template-columns: minmax(0, 1fr); } }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 4px solid var(--line);
  padding: 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.card-wide { border-left-width: 1px; }
.card[data-status="green"] { border-left-color: var(--good-ink); }
.card[data-status="amber"] { border-left-color: var(--warn-ink); }
.card[data-status="red"] { border-left-color: var(--bad-ink); }
.card[data-status="grey"] { border-left-color: var(--grey-ink); }
.card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.card-name { font-size: var(--brand-type-label-default-size); line-height: var(--brand-type-label-default-line-height); font-weight: 500; letter-spacing: var(--brand-type-label-default-tracking); }
.chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; line-height: 16px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius); white-space: nowrap; }
.chip-green { background: var(--good-field); color: var(--good-ink); }
.chip-amber { background: var(--warn-field); color: var(--warn-ink); }
.chip-red { background: var(--bad-field); color: var(--bad-ink); }
.chip-grey { background: var(--grey-field); color: var(--grey-ink); }
.chip-estimate { background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 3px 7px; }

.value { font-size: var(--brand-type-display-3-size); line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; word-break: break-word; }
.card-hero .value { font-size: var(--brand-type-figure-size); line-height: var(--brand-type-figure-line-height); letter-spacing: var(--brand-type-figure-tracking); margin: 8px 0; }
.value[data-status="green"] { color: var(--good-ink); }
.value[data-status="amber"] { color: var(--warn-ink); }
.value[data-status="red"] { color: var(--bad-ink); }
.value-none { color: var(--muted); }
.meaning-line { color: var(--ink); }
.note { color: var(--muted); font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); }
.estimate-line { color: var(--muted); font-size: 13px; line-height: 18px; }

.parts { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.parts li { display: flex; justify-content: space-between; gap: 16px; font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); }
.parts li span:first-child { color: var(--muted); }
.parts li span:last-child { white-space: nowrap; }

details.meaning { font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); }
details.meaning summary { cursor: pointer; color: var(--blue); font-weight: 500; padding: 4px 0; list-style-position: inside; }
details.meaning p { margin-top: 4px; color: var(--ink); }

/* Chart: HTML bars so text stays crisp at every width */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 13px; line-height: 18px; margin-top: 4px; }
.legend { gap: 4px 16px; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.key { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 2px; }
.key-rev { background: var(--blue); }
.key-out { background: var(--ink); }
.key-target { height: 0; width: 16px; border-top: 2px dashed var(--muted); border-radius: 0; }
.chart { position: relative; margin-top: 16px; }
.plot { position: relative; height: 240px; display: flex; align-items: flex-end; gap: clamp(8px, 3vw, 40px); border-bottom: 1px solid var(--ink); padding: 0 4px; }
.target-line { position: absolute; z-index: 0; left: 0; right: 0; border-top: 2px dashed var(--muted); pointer-events: none; }
.target-label { position: absolute; right: 0; transform: translateY(-100%); font-size: 12px; line-height: 16px; color: var(--muted); background: var(--card); padding: 0 0 2px 4px; }
.month { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.bar { position: relative; flex: 0 1 48px; min-width: 14px; border-radius: 2px 2px 0 0; }
.bar-rev { background: var(--blue); }
.bar-out { background: var(--ink); }
.month.open .bar-rev { background: var(--card); border: 2px solid var(--blue); border-bottom: 0; }
.month.open .bar-out { background: var(--card); border: 2px solid var(--ink); border-bottom: 0; }
.bar-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: 11px; line-height: 14px; color: var(--muted); white-space: nowrap; }
.axis { display: flex; gap: clamp(8px, 3vw, 40px); padding: 8px 4px 0; }
.axis-month { flex: 1 1 0; min-width: 0; text-align: center; font-size: 13px; line-height: 18px; }
.axis-month b { display: block; font-weight: 500; }
.axis-month span { display: block; color: var(--muted); }
.axis-month .res { font-weight: 500; }
.res[data-status="green"] { color: var(--good-ink); }
.res[data-status="amber"] { color: var(--warn-ink); }
.res[data-status="red"] { color: var(--bad-ink); }
.res[data-status="grey"] { color: var(--grey-ink); }
.chart-empty { color: var(--muted); padding: 24px 0; }

.table-scroll { overflow-x: auto; margin-top: 8px; }
.month-table { border-collapse: collapse; width: 100%; font-size: var(--brand-type-body-small-size); }
.month-table th, .month-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.month-table th:first-child, .month-table td:first-child { text-align: left; }
.month-table th { font-weight: 500; color: var(--muted); }

/* Where the money goes */
.groups { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.group-top { display: flex; justify-content: space-between; gap: 16px; font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); }
.group-top span:last-child { white-space: nowrap; }
.group-track { height: 8px; background: var(--sunken); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.group-fill { height: 100%; background: var(--blue); }

.card-later .value { color: var(--muted); }
.later, .generated { color: var(--muted); font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); }

@media (max-width: 480px) {
  .card { padding: 16px; }
  .plot { height: 200px; }
  .bar-label { font-size: 10px; }
}

/* Currency prefix smaller than the number, so a big figure never breaks across lines */
.value .cur { font-size: 0.5em; letter-spacing: 0; vertical-align: 0.12em; }
.value .num { white-space: nowrap; }

/* Incoming payments to classify: a quiet notice, never counted as revenue */
.notice { background: var(--warn-field); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--warn-ink); border-radius: var(--radius); padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; }
.notice-title { font-size: var(--brand-type-body-default-size); line-height: var(--brand-type-body-default-line-height); font-weight: 500; color: var(--warn-ink); }
.notice-sub { font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); color: var(--muted); }
.notice-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.notice-list li { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: var(--brand-type-body-small-size); line-height: var(--brand-type-body-small-line-height); }
.notice-list .c-date { color: var(--muted); white-space: nowrap; min-width: 6.5em; }
.notice-list .c-payer { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.notice-list .c-amount { white-space: nowrap; }