/* Altitude Finance — Phase 1 shell.
   Black and white; colour only signals state. Montserrat throughout. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --ink: #000000;
  --paper: #ffffff;
  --graphite: #5c5c5c;
  --rule: #e3e3e3;
  --wash: #f6f6f6;
  --attention: #9a5a00;
  --settled: #2d6a3b;
  --font: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  font-variant-numeric: tabular-nums lining-nums;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Top band */
.band { background: var(--ink); color: var(--paper); }
.band__inner {
  max-width: 920px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 14px;
}
.band__mark { width: 30px; height: 30px; display: block; }
.band__name { font-weight: 600; letter-spacing: .01em; margin-right: auto; }
.band__name span { font-weight: 300; }
.band__user { color: #bdbdbd; font-size: 13px; }
.band button {
  font: inherit; font-size: 13px; color: var(--paper); background: none;
  border: 1px solid #555; border-radius: 3px; padding: 5px 12px; cursor: pointer;
}
.band button:hover { border-color: var(--paper); }

main { max-width: 920px; margin: 0 auto; padding: 40px 24px 80px; }
section + section { margin-top: 56px; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 14px; }
.lede { color: var(--graphite); margin: 0 0 20px; max-width: 62ch; }

/* The ledger: available cash built up line by line (Definitions §4) */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; max-width: 640px; }
.ledger__title { font-size: 15px; font-weight: 500; margin: 0 0 4px; }
.ledger__total {
  grid-column: 1 / -1; font-size: clamp(44px, 9vw, 76px); font-weight: 300;
  letter-spacing: -0.02em; line-height: 1; margin: 0 0 6px;
}
.ledger__note { grid-column: 1 / -1; color: var(--graphite); margin: 0 0 22px; }
.ledger__row { display: contents; }
.ledger__row > * { padding: 9px 0; border-top: 1px solid var(--rule); }
.ledger__row .value { text-align: right; color: var(--graphite); font-size: 13px; align-self: center; }
.ledger__row .less::before { content: 'less '; color: var(--graphite); }
.ledger__row--sum > * { border-top: 2px solid var(--ink); font-weight: 600; }

/* Tax position */
.owed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.owed > div { padding: 14px 18px 4px 0; }
.owed > div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.owed p { margin: 0; }
.owed .figure { font-size: 28px; font-weight: 300; margin: 2px 0; }
.owed .sub { color: var(--graphite); font-size: 13px; }

/* Build progress — a real sequence, so it is numbered */
.phases { list-style: none; margin: 0; padding: 0; counter-reset: phase; max-width: 680px; }
.phases li {
  counter-increment: phase; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); align-items: baseline;
}
.phases li::before { content: counter(phase); font-weight: 600; }
.phases strong { font-weight: 500; }
.phases .detail { display: block; color: var(--graphite); font-size: 13px; }

.state { font-size: 13px; white-space: nowrap; }
.state--done { color: var(--settled); }
.state--now { color: var(--attention); font-weight: 600; }
.state--later { color: var(--graphite); }

/* System */
.system { display: grid; grid-template-columns: 180px minmax(0, 1fr); max-width: 680px; margin: 0; }
.system dt, .system dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--rule); }
.system dt { color: var(--graphite); }
.action {
  font: inherit; font-weight: 500; background: var(--ink); color: var(--paper);
  border: 0; border-radius: 3px; padding: 9px 16px; cursor: pointer; margin-top: 18px;
}
.action:disabled { opacity: .45; cursor: progress; }
.message { margin: 10px 0 0; font-size: 13px; min-height: 1.5em; }
.message--error { color: #a3261b; }

/* Sign-in page */
.signin { min-height: 100vh; display: grid; place-items: center; background: var(--ink); color: var(--paper); padding: 24px; }
.signin__box { width: 100%; max-width: 360px; }
.signin__mark { width: 56px; height: 56px; display: block; margin-bottom: 28px; }
.signin h1 { font-size: 26px; font-weight: 300; margin: 0 0 6px; }
.signin h1 strong { font-weight: 600; }
.signin p { color: #bdbdbd; margin: 0 0 28px; }
.signin a.go {
  display: inline-block; background: var(--paper); color: var(--ink); text-decoration: none;
  font-weight: 600; padding: 11px 20px; border-radius: 3px;
}
.signin .problem { color: #ffc77a; margin-top: 20px; min-height: 1.5em; }

@media (max-width: 640px) {
  .band__user { display: none; }
  .owed { grid-template-columns: 1fr; }
  .owed > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .system { grid-template-columns: 1fr; }
  .system dd { border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }