/* brain — application styles
 * Plain CSS, served by Propshaft. No build step.
 * Token-driven; semantic component classes.
 */

:root {
  /* Ledger palette — paper-warm neutrals + one umber accent.
     See design-system.md for canonical tokens. */
  --paper:        #f6f2e7;
  --paper-deep:   #ece6d3;
  --surface:      #ffffff;
  --bg:           var(--paper);
  --ink:          #1a1612;
  --ink-soft:     #3a3128;
  --muted:        #8a8377;
  --line:         #e0d9c5;
  --line-strong:  #b8af96;

  --accent:       #7a4f1f;   /* umber */
  --accent-deep:  #5a3914;
  --accent-soft:  #f0e6d3;
  --accent-fg:    #fdfbf5;

  --positive:     #2b6e3e;
  --positive-bg:  #e1eedb;
  --negative:     #9a3b1e;
  --negative-bg:  #f7e3d4;

  --radius:    0.25rem;     /* fewer rounded edges; this is a ledger, not a SaaS pill */
  --radius-lg: 0.5rem;
  --max-w:     28rem;
  --gap:       1.25rem;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Numeric utility — every money/quantity/date/reference uses mono.
   Tabular figures so columns of numbers align by glyph. */
.num,
[data-num] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100dvh; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* Layout */
.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 1.25rem 8rem;
}

.stack > * + * { margin-top: var(--gap); }

.row { display: flex; gap: 0.75rem; align-items: center; }
.row--gap-sm { gap: 0.5rem; }
.row--between { justify-content: space-between; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* Hero (root before the real landing exists) */
.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.25rem;
  gap: 0.5rem;
}
.hero__title { font-size: 2rem; }
.hero__sub   { color: var(--muted); }

/* Brand */
.brand { font-weight: 600; letter-spacing: -0.02em; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field__label { font-size: 0.875rem; color: var(--muted); }

.input, .select, .date {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.input:focus, .select:focus, .date:focus { border-color: var(--ink); }

.amount {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}
.amount:focus-within { border-color: var(--ink); }
.amount__currency { font-size: 1.875rem; font-weight: 300; color: var(--line-strong); }
.amount__input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 1.875rem;
  font-weight: 300;
  outline: none;
  color: var(--ink);
}
.amount__input::placeholder { color: #d6d3d1; }

.photo {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  color: var(--muted);
  cursor: pointer;
}
.photo input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.date-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.button--primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.button--full {
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
}

/* Sticky bottom action bar */
.bar-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(250, 250, 249, 0.95);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid var(--line);
  padding: 0.75rem 1.25rem;
}
.bar-bottom__inner { max-width: var(--max-w); margin: 0 auto; }

/* Receipt card — a small piece of paper sitting on the desk.
   The data block is the edit-link; click anywhere on it to edit. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card__body {
  display: block;
  padding: 1.25rem 1.5rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s;
}
.card__body:hover {
  background: var(--paper-deep);
}
.card__amount { font-size: 2rem; font-weight: 400; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.card__vendor { font-size: 1rem; }
.card__meta   { font-size: 0.875rem; color: var(--muted); margin-top: 0.125rem; }
.card__note   { font-style: italic; color: var(--ink-soft); font-size: 0.875rem; margin-top: 0.5rem; }

/* Compact action row under the card — no full-width primary buttons. */
.card-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.25rem;
}

.page__title {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
.receipt-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.receipt-form__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.button--quiet {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}
.button--quiet:hover { color: var(--ink); }

/* Messages */
.errors {
  background: var(--negative-bg);
  color: var(--negative);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.errors ul { margin: 0.25rem 0 0 1rem; padding: 0; }

.flash {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
}
.flash--notice { background: var(--positive-bg); color: var(--positive); }
.flash--alert  { background: var(--negative-bg); color: var(--negative); }

.saved {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--positive);
  font-size: 0.875rem;
  font-weight: 500;
}

.auth-page {
  max-width: 22rem;
  margin: 0 auto;
  padding: 4rem 1.25rem;
}
.auth-page h1 { margin-bottom: 1.5rem; }
.auth-page .meta { font-size: 0.875rem; color: var(--muted); margin-top: 1rem; }

/* App shell (authenticated layout) */
.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.shell__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.25rem 3rem 1rem;
  /* Match .bottom-nav: paper-tone translucency + frosted blur, so the
     sticky header lifts off the page the same way the mobile nav does. */
  background: rgba(246, 242, 231, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(184, 175, 150, 0.5);
  position: sticky;
  top: 0;
  z-index: 10;
}
@supports not (backdrop-filter: blur(1px)) {
  .shell__header { background: var(--paper); }
}
.shell__brand {
  font-weight: 600;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
}
.shell__nav {
  display: none;
  gap: 1.75rem;
  align-items: baseline;
}
.shell__nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  transition: color 0.12s;
}
.shell__nav a:hover,
.shell__nav a.active {
  color: var(--ink);
}
.shell__main {
  flex: 1;
  padding-bottom: 5rem; /* space for fixed bottom-nav on mobile */
}
.shell__flash {
  padding: 1rem 1.25rem 0;
  max-width: var(--max-w);
  margin: 0 auto;
}

.shell__signout-form { display: inline; margin: 0; padding: 0; }
.shell__signout {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  font-size: 0.875rem;
  cursor: pointer;
}
.shell__signout:hover { color: var(--ink); }

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Paper-tone with translucency + a real frosted-glass blur. Stream
     content shows softly through, no hard white seam. More transparent
     than the desktop header — on iOS the stream visibly drifts under. */
  background: rgba(246, 242, 231, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid rgba(184, 175, 150, 0.5);  /* faded --line-strong */
  /* Respect the iOS Safari home-indicator inset so the nav items stay
     above the system UI bar. With viewport-fit=cover, the frosted
     background fills this padding region too, so the safe-area space
     below the nav looks like part of the same glass — no white seam. */
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
/* No backdrop-filter? Fall back to opaque paper so it stays readable. */
@supports not (backdrop-filter: blur(1px)) {
  .bottom-nav { background: var(--paper); }
}
.bottom-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 0.25rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.8125rem;
  min-height: 56px;
}
.bottom-nav a.active {
  color: var(--ink);
  font-weight: 500;
}

@media (min-width: 768px) {
  .shell__nav { display: flex; }
  .bottom-nav { display: none; }
  .shell__main { padding-bottom: 0; }
}

/* Invoices index — ledger-shaped, no card frames. */
.invoices-page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 3rem 2.5rem 6rem;
}
.invoices__head { margin-bottom: 2rem; }
.invoices__title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Draft block — a typographic header above the history list. */
.invoices__draft {
  padding: 1.25rem 0 1.5rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
}
.invoices__draft--empty { padding: 1rem 0; }
.invoices__draft-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.invoices__draft-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.invoices__draft-open {
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.invoices__draft-open:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.invoices__draft-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.invoices__draft-client { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.invoices__draft-amount { font-size: 1.5rem; font-weight: 500; }

.invoice-start-form { margin: 0; padding: 0; display: inline; }

/* History — ledger rows. */
.invoices__history { margin-top: 1rem; }
.invoices__section-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--line-strong);
}
.invoices__list { list-style: none; margin: 0; padding: 0; }
.invoices__row { border-bottom: 1px solid var(--line); }
.invoices__row:last-child { border-bottom: 0; }
.invoices__entry {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto 7rem auto;
  grid-template-areas: "number client period amount status";
  gap: 1rem;
  align-items: baseline;
  padding: 0.625rem 0;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.1s;
}
.invoices__entry:hover {
  background: var(--paper-deep);
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.invoices__number { grid-area: number; color: var(--muted); font-size: 0.8125rem; }
.invoices__client { grid-area: client; font-size: 0.9375rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoices__period { grid-area: period; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.invoices__amount { grid-area: amount; text-align: right; font-size: 0.9375rem; }
.invoices__entry .entry__pill { grid-area: status; }

/* Mobile: two-line layout so nothing truncates. */
@media (max-width: 600px) {
  .invoices-page { padding: 2rem 1.25rem 6rem; }
  .invoices__entry {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "client amount"
      "number status"
      "period status";
    row-gap: 0.0625rem;
    column-gap: 1rem;
  }
  .invoices__client { white-space: normal; }
  .invoices__entry .entry__pill { align-self: center; }
}

/* Invoice document view */
/* Invoice — a document, not a card. No rounded frame, no white surface
   floating on paper. Just generous margins and thin rules between
   sections. The page itself is the paper. */
.invoice-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}
.invoice {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  border-top:    1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: 2.5rem 0;
}
.invoice__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}
.invoice__title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.invoice__sub   { color: var(--muted); margin-top: 0.25rem; font-size: 0.9375rem; }

.invoice__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.invoice__party-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.375rem;
}
.invoice__party-name { font-weight: 500; }
.invoice__party-meta { color: var(--muted); font-size: 0.875rem; margin-top: 0.125rem; }

/* Line items table: explicit column widths so headers align with cells.
   Document-feel: no vertical rules, only a head underline + tight gutters. */
.invoice__lines {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.invoice__col-desc { width: auto; }
.invoice__col-num  { width: 5.5rem; }
.invoice__col-amt  { width: 6.5rem; }
.invoice__col-rm   { width: 2rem; }

.invoice__th {
  font-weight: 500;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 0.625rem 0.5rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.invoice__th--desc { text-align: left;  padding-left: 0.5rem; }
.invoice__th--num  { text-align: right; }
.invoice__th--amt  { text-align: right; padding-right: 0; }
.invoice__th--rm   { width: 2rem; padding: 0; }

.invoice__cell {
  padding: 0.5rem 0.625rem 0.5rem 0.5rem;
  vertical-align: middle;
}
.invoice__cell:first-child { padding-left: 0; }
.invoice__cell--num,
.invoice__cell--amt { text-align: right; }
/* Num cells: kill cell padding-right so the input's right edge sits flush
   with the column edge; the input's own padding-right matches the header's,
   so header text and input text share the same right edge. */
.invoice__cell--num { padding-right: 0; }
.invoice__cell--amt { padding-right: 0; font-variant-numeric: tabular-nums; color: var(--ink); }
.invoice__cell--rm  { padding: 0; text-align: right; width: 2rem; }

/* Mobile: stack each invoice line vertically — description full-width on
   row 1; quantity / rate / amount / remove inline on row 2. The table
   becomes a stack of grids, one per <tr>. */
@media (max-width: 600px) {
  .invoice__lines        { display: block; }
  .invoice__lines colgroup,
  .invoice__lines thead  { display: none; }
  .invoice__lines tbody  { display: block; }
  .invoice__lines tr.invoice__line {
    display: grid;
    grid-template-columns: 1fr 1fr auto 1.75rem;
    grid-template-areas:
      "desc desc desc desc"
      "qty  rate amt  rm";
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .invoice__cell { display: block; padding: 0; }
  .invoice__cell--desc { grid-area: desc; }
  .invoice__cell--qty  { grid-area: qty; }
  .invoice__cell--rate { grid-area: rate; }
  .invoice__cell--amt  { grid-area: amt; min-width: 0; }
  .invoice__cell--rm   { grid-area: rm; }

  /* Small caps mono labels above each numeric cell on mobile, pulled
     from the data-mobile-label attribute. */
  .invoice__cell--qty::before,
  .invoice__cell--rate::before {
    content: attr(data-mobile-label);
    display: block;
    font-family: var(--mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 0.25rem;
  }
}

/* Inputs are writable patches on the paper — paper-deep at rest, white
   only on focus when the user is actively typing. Subtle bottom rule
   for affordance. */
.invoice__input {
  width: 100%;
  border: 0;
  background: var(--paper-deep);
  font: inherit;
  color: inherit;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.25rem;
  text-align: inherit;
  box-shadow: inset 0 -1px 0 var(--line-strong);
  transition: background-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}
.invoice__input:hover { background: #e3dcc4; box-shadow: inset 0 -1px 0 var(--ink-soft); }
.invoice__input:focus {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.invoice__input::placeholder { color: var(--line-strong); }
.invoice__input--num  { text-align: right; font-variant-numeric: tabular-nums; }
.invoice__input--desc { text-align: left; }
.invoice__line-remove { text-align: right; padding-left: 0.25rem; vertical-align: middle; }
.invoice__remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
}
.invoice__remove:hover { color: var(--negative); background: var(--negative-bg); }

.invoice__add-row {
  display: flex;
  justify-content: flex-start;
  padding: 0.5rem 0.5rem 0;
}
.invoice__add-line {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
}
.invoice__add-line:hover { color: var(--ink); background: var(--line); }

.invoice__save {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.invoice__save-hint {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}

.invoice__head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}
.invoice__saved-pill {
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-height: 1rem;
  transition: color 0.15s;
}
.invoice__saved-pill[data-state="error"] { color: var(--negative); }

.invoice__period-select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  padding: 0 0.125rem;
  cursor: pointer;
}
.invoice__period-select:hover  { border-bottom-color: var(--line-strong); }
.invoice__period-select:focus  { outline: none; border-bottom-color: var(--ink); }

.invoice__party-input {
  font: inherit;
  font-weight: 500;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  padding: 0;
  width: 100%;
}
.invoice__party-input:hover { border-bottom-color: var(--line-strong); }
.invoice__party-input:focus { outline: none; border-bottom-color: var(--ink); }

.invoice__sub-period {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
.invoice__sub-sep { color: var(--muted); }
.invoice__period-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed transparent;
  padding: 0 0.125rem;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.invoice__period-input:hover { border-bottom-color: var(--line-strong); }
.invoice__period-input:focus { outline: none; border-bottom-color: var(--ink); }
/* Hide the native calendar icon — clicking anywhere on the input opens the picker. */
.invoice__period-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.invoice__settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.875rem 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
  .invoice__settings { grid-template-columns: minmax(0, 1fr); }
}
.invoice__settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.invoice__settings-field--wide { grid-column: 1 / -1; }
.invoice__settings-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
}
.invoice__settings-input {
  font: inherit;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-deep);
  border: 0;
  border-radius: 0.25rem;
  box-shadow: inset 0 -1px 0 var(--line-strong);
  padding: 0.5rem 0.625rem;
  width: 100%;
  height: 2.25rem;            /* explicit so <select> + <input> match */
  box-sizing: border-box;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.invoice__settings-input:hover {
  background: #e3dcc4;
  box-shadow: inset 0 -1px 0 var(--ink-soft);
}
.invoice__settings-input:focus {
  outline: none;
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--accent);
}
/* Native <select> chevron is gone with appearance:none — replace with a
   custom one in --muted, matched to the field height. */
select.invoice__settings-input {
  padding-right: 1.875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8377' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.625rem 0.375rem;
}
/* Textarea overrides height + line-height since auto-sizing matters there. */
textarea.invoice__settings-input {
  height: auto;
  line-height: 1.45;
  resize: vertical;
  min-height: 3.5rem;
}
.invoice__settings-input--area {
  resize: vertical;
  min-height: 3.25rem;
}

.invoice__totals {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  align-self: flex-end;
}
.invoice__totals-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 2rem;
  font-size: 0.9375rem;
  color: var(--muted);
}
.invoice__totals-row--total {
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  font-size: 1.125rem;
  color: var(--ink);
  font-weight: 500;
}
.invoice__totals-value { font-variant-numeric: tabular-nums; min-width: 6rem; text-align: right; }

.invoice__legal {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
}
.invoice__notes {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--ink);
}
.invoice__payment-block {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.invoice__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.invoice__send-form { display: inline; margin: 0; padding: 0; }

.invoice__footer-meta {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: right;
}

.entry__pill--sending  { color: var(--accent-deep); background: transparent; }
.entry__pill--draft    { color: var(--muted); background: transparent; }
.entry__pill--approved { color: var(--accent); background: transparent; }

/* Home: stream + tray */
/* Home — a ledger page, not a card collection.
   Full-width on desktop; the stream gets the real estate, the tray sits
   as a marginal column on the right, divided by a thin vertical rule. */
.home {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem 1.25rem 4rem;
  max-width: 84rem;
  margin: 0 auto;
}
@media (min-width: 980px) {
  .home {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3.5rem;
    padding: 3rem 3rem 4rem;
    align-items: start;
  }
  .home .stream { grid-column: 1; grid-row: 1; }
  .home .tray   { grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem;
                  border-left: 1px solid var(--line); padding-left: 2rem; }
}

/* Stream — ledger lines, not cards. Dense, one row per entry, mono
   numbers right-aligned. Day labels with thin rule. */
.stream__empty { padding: 2rem 0; color: var(--muted); font-style: italic; }
.stream__days  { display: flex; flex-direction: column; gap: 1.5rem; }

.stream__day-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 0.375rem;
  font-weight: 500;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--line-strong);
}

.stream__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stream__row {
  border-bottom: 1px solid var(--line);
}
.stream__row:last-child { border-bottom: 0; }
/* Two-line ledger row, always. Predictable slots:
       [time]  [title — line 1]                       [amount]
       [time]  [meta tags + note — line 2]
   Title can wrap, note can wrap, kind/locale/photo/matched live in
   their always-same place. Amount sits at the same right edge for
   every entry. */
.stream__entry {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 6.5rem;
  grid-template-areas:
    "time title amount"
    ".    meta  meta";
  column-gap: 1rem;
  row-gap: 0.1875rem;
  padding: 0.625rem 0;
  align-items: baseline;          /* time / title / amount share a baseline */
  color: inherit;
  text-decoration: none;
}
.stream__entry--link { transition: background-color 0.1s; }
.stream__entry--link:hover {
  background: var(--paper-deep);
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.entry__time {
  grid-area: time;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.entry__title {
  grid-area: title;
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 450;
  letter-spacing: -0.005em;
  word-wrap: break-word;
}
.entry__meta {
  grid-area: meta;
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.4375rem;
  flex-wrap: wrap;
  min-width: 0;
}
.entry__amount-cell {
  grid-area: amount;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  align-self: start;
}
.entry__sep { color: var(--line-strong); }
.entry__tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Highlight the meaningful tags so they catch the eye. */
.entry__tag--photo,
.entry__tag--matched,
.entry__tag--note { color: var(--accent); }
.entry__tag--income { color: var(--positive); }
.entry__tag--tax,
.entry__tag--corporate { color: var(--ink-soft); }
.entry__note {
  font-style: italic;
  color: var(--ink-soft);
  word-break: break-word;
}

.entry__amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.entry__amount--negative { color: var(--ink); }
.entry__amount--positive { color: var(--positive); }

/* The "filed" pill is gone — being in the stream IS the filed state. */
.stream .entry__pill { display: none; }

/* Tray — marginal column. No box; just typography with a left rule
   established by the .home grid. */
.tray {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.tray__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-strong);
}
.tray__title {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
  margin: 0;
}
.tray__count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--ink);
  background: transparent;
  padding: 0;
  border-radius: 0;
  min-width: 0;
  text-align: right;
}
.tray__count[data-empty="true"] { color: var(--muted); }

.tray__body { display: flex; flex-direction: column; gap: 1.25rem; }
.tray__empty { font-size: 0.875rem; color: var(--muted); margin: 0; font-style: italic; }

.tray__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.tray__row { margin: 0; }

/* Tray item: no card, no rounded box. Just a small typographic block. */
.tray__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  padding: 0;
}
.tray__item-head { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.tray__item-title {
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.tray__item-from {
  font-size: 0.8125rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tray__pills,
.tray__actions { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.tray__pill-form { margin: 0; padding: 0; display: inline; }
.tray__pill {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.25rem 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.tray__pill:hover { border-bottom-color: var(--accent); color: var(--accent-deep); }
.tray__pill + .tray__pill { margin-left: 0.875rem; }
.tray__pill--accent { color: var(--accent); }
.tray__pill--send {
  background: transparent;
  color: var(--accent);
  border: 0;
  border-bottom: 1px solid var(--accent);
  font-weight: 500;
}
.tray__pill--send:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.tray__pill--quiet { color: var(--muted); border-bottom-color: var(--line); }
.tray__hint { margin: 0; font-size: 0.75rem; color: var(--muted); font-style: italic; }
.tray__overflow {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

.entry__time {
  font-size: 0.8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 0.0625rem;
}
/* Legacy block — replaced by the row-direction .entry__body below for the
   denser ledger layout. Kept as no-op to avoid breaking anything else.   */
.entry__body--legacy-noop {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.entry__title {
  font-size: 0.9375rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry__title .muted { color: var(--muted); }
.entry__meta {
  font-size: 0.8125rem;
  color: var(--muted);
}
.entry__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
.entry__amount {
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
}
.entry__amount--negative { color: var(--ink); }
.entry__amount--positive { color: var(--positive); }

/* Status indicators read as typography, not as UI chips. Small caps,
   letterspaced, no background pill. */
.entry__pill {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.entry__pill--filed,
.entry__pill--matched,
.entry__pill--paid,
.entry__pill--sent {
  color: var(--positive);
  background: transparent;
}
.entry__pill--needs_review,
.entry__pill--unmatched {
  color: var(--accent-deep);
  background: transparent;
}

/* Landing */
.landing {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
}
.landing__inner {
  max-width: 32rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.landing__brand {
  font-size: 2.5rem;
  line-height: 1;
}
.landing__tagline {
  font-size: 1.125rem;
  color: var(--ink);
}
.landing__scope {
  color: var(--muted);
  max-width: 28rem;
}
.landing__cta {
  margin-top: 1rem;
}

/* 0014 — proof-ledger components.
   These are functional styles for the new tray rows + match UI.
   The full design-system pass (0015) will retheme these. */

.shell__action {
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--accent);
  letter-spacing: -0.005em;
}
.shell__action:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }
.bottom-nav__action { color: var(--ink) !important; font-weight: 500; }

/* .tray__pill--accent now inherits the underlined accent pill style from
   .tray__pill — no special block-button treatment. */

/* Match candidates — ledger-shaped page (no rounded card list). */
.match-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
}
.match__back { margin: 0 0 1.5rem; font-size: 0.8125rem; color: var(--muted); }
.match__back-link { text-decoration: none; color: var(--muted); }
.match__back-link:hover { color: var(--ink); }

.match__head {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 1.5rem;
}
.match__title {
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.match__sub {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.match__sep { color: var(--line-strong); }

.match__section-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 0.5rem;
  font-weight: 500;
}

.match__list { list-style: none; margin: 0; padding: 0; }
.match__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.match__row:last-child { border-bottom: 0; }
.match__row-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.match__row-title {
  font-size: 0.9375rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.match__row-meta { font-size: 0.8125rem; color: var(--muted); }
.match__row-form { margin: 0; display: inline; }
.match__match-btn {
  font-size: 0.8125rem;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  padding: 0.125rem 0 0.125rem;
  cursor: pointer;
  font-weight: 500;
}
.match__match-btn:hover { color: var(--accent-deep); border-bottom-color: var(--accent-deep); }

.match__empty { padding: 1.5rem 0; color: var(--ink-soft); font-size: 0.9375rem; }
.match__meta { margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted); }
.match__dismiss-form { display: inline; margin: 0; padding: 0; }
.button--inline--muted { color: var(--muted); }

.button--small {
  font-size: 0.8125rem;
  padding: 0.4375rem 0.75rem;
}
.button--inline {
  display: inline;
  font: inherit;
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}
.button--inline:hover { color: var(--ink); }

/* Receipt photo on the saved-card view. Fixed aspect ratio + paper-deep
   filler so the layout doesn't jump while the image is loading. The link
   is invisible (no outline / underline / focus border) — only the image
   shows. */
.card__photo {
  display: block;
  background: var(--paper-deep);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--line);
  outline: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card__photo:focus,
.card__photo:focus-visible { outline: none; }
.card__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Subtle hint that the photo is clickable on hover. */
  transition: opacity 0.12s;
}
.card__photo:hover .card__photo-img { opacity: 0.9; }

.edit-photo {
  display: block;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem;
  text-decoration: none;
  color: var(--muted);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  outline: none;
}
.edit-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.25rem;
}
.edit-photo__hint {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  margin-top: 0.375rem;
}

/* Inline match candidate inside a tray row.
   One-tap Match button; falls back to the candidates page if no candidate
   or if the user wants to pick a different one. */
.tray__candidate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  background: var(--paper-deep);
  border-radius: 0.25rem;
  border-left: 2px solid var(--accent);
}
.tray__candidate-body {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
  flex: 1 1 auto;
}
.tray__candidate-title {
  font-size: 0.8125rem;
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tray__candidate-meta {
  font-size: 0.6875rem;
  color: var(--muted);
}

/* Weekly pulse — the digest page, also rendered into the email. */
.pulse-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}
.pulse__head {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 2rem;
}
.pulse__title { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.pulse__sub   { font-size: 0.875rem; color: var(--muted); margin-top: 0.25rem; }
.pulse__empty { color: var(--muted); font-style: italic; padding: 1.5rem 0; }
.pulse__section { margin-bottom: 2.25rem; }
.pulse__section--mtd { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pulse__section-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 0.625rem;
}
.pulse__total {
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.pulse__bucket {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--line);
}
.pulse__bucket:last-child { border-bottom: 0; }
.pulse__bucket-label { font-size: 0.9375rem; color: var(--ink-soft); }
.pulse__bucket-amount { font-size: 0.9375rem; }
.pulse__list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.pulse__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--line);
}
.pulse__line:last-child { border-bottom: 0; }
.pulse__line-title { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pulse__line-amount { font-size: 0.9375rem; }
.pulse__line-reason {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pulse__overflow { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted); }