/* ═══════════════════════════════════════════════════════════════
   DAYBOOK — a visual system for software that handles money,
   records, contracts, and anything else people need to trust.

   Framework-agnostic. This file is the source of truth; the
   Tailwind theme and React components both derive from it.

   Rules that never bend:
     · border-radius is 0. Everywhere.
     · Separation is a 1px hairline. Never a shadow.
     · One accent, on the primary action and credits only.
     · Two typefaces: an old-style serif and a mono. No sans.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Ground & ink ─────────────────────────────────────────── */
  --d-paper:        #F7F6F2;  /* the page */
  --d-paper-raised: #FDFCF9;  /* inputs, hovered rows — barely lifted */
  --d-paper-sunk:   #F1EFE8;  /* table headers, disabled fields */

  --d-ink:          #1A1D1A;  /* body text, strong rules */
  --d-ink-muted:    #514F45;  /* secondary text */
  --d-ink-faint:    #726F61;  /* labels, captions, placeholders */

  --d-rule:         #DAD7CC;  /* the standard hairline */
  --d-rule-faint:   #E6E3D9;  /* row dividers */

  /* ── Accent — Daybook Green ────────────────────────────────── */
  --d-accent:       #1F4D3D;
  --d-accent-hover: #173B2E;
  --d-accent-wash:  #EAEFEB;  /* selection only. Never a page section. */

  /* ── Semantic. Ink colors, not fills. ─────────────────────── */
  --d-credit:       #1F4D3D;  /* settled, paid, positive */
  --d-hold:         #8A6A1F;  /* pending, awaiting, in review */
  --d-debit:        #8C2B22;  /* failed, overdue, destructive */

  /* ── Type ─────────────────────────────────────────────────── */
  --d-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
             Palatino, "Book Antiqua", Georgia, serif;
  --d-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular,
             Menlo, Consolas, monospace;

  /* The whole scale. If a size isn't here, it doesn't exist. */
  --d-text-micro:   9.5px;   /* mono, uppercase — labels, nav, buttons */
  --d-text-caption: 11px;    /* mono — metadata, help text */
  --d-text-body:    15px;    /* serif — running text, table cells */
  --d-text-lead:    17px;    /* serif — intro paragraphs */
  --d-text-title:   21px;    /* serif — panel and section titles */
  --d-text-figure:  29px;    /* serif — statistics */
  --d-text-display: 34px;    /* serif — page titles */

  --d-track-micro:  0.14em;  /* uppercase mono always gets this */
  --d-track-tight:  -0.015em;/* large serif always gets this */

  /* ── Space. Base unit 11. Vertical rhythm is 22. ──────────── */
  --d-space-1:  4px;
  --d-space-2:  8px;
  --d-space-3:  11px;
  --d-space-4:  16px;
  --d-space-5:  20px;   /* horizontal padding, fixed */
  --d-space-6:  22px;   /* vertical rhythm, fixed */
  --d-space-7:  33px;
  --d-space-8:  44px;
  --d-space-9:  66px;

  --d-hairline: 1px;
  --d-motion:   120ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Night palette ─────────────────────────────────────────────
   Not an inversion. Ink and paper both warm, the accent lifted
   enough to hold contrast without turning mint.
   ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --d-paper:        #141512;
    --d-paper-raised: #1B1C18;
    --d-paper-sunk:   #101110;
    --d-ink:          #E8E5DA;
    --d-ink-muted:    #9A978A;
    --d-ink-faint:    #85837A;
    --d-rule:         #31332C;
    --d-rule-faint:   #24261F;
    --d-accent:       #6FB394;
    --d-accent-hover: #86C4A7;
    --d-accent-wash:  #1C2A23;
    --d-credit:       #6FB394;
    --d-hold:         #C9A24B;
    --d-debit:        #D4746A;
  }
}

:root[data-theme="dark"] {
  --d-paper:        #141512;
  --d-paper-raised: #1B1C18;
  --d-paper-sunk:   #101110;
  --d-ink:          #E8E5DA;
  --d-ink-muted:    #9A978A;
  --d-ink-faint:    #85837A;
  --d-rule:         #31332C;
  --d-rule-faint:   #24261F;
  --d-accent:       #6FB394;
  --d-accent-hover: #86C4A7;
  --d-accent-wash:  #1C2A23;
  --d-credit:       #6FB394;
  --d-hold:         #C9A24B;
  --d-debit:        #D4746A;
}

:root[data-theme="light"] {
  --d-paper:        #F7F6F2;
  --d-paper-raised: #FDFCF9;
  --d-paper-sunk:   #F1EFE8;
  --d-ink:          #1A1D1A;
  --d-ink-muted:    #514F45;
  --d-ink-faint:    #726F61;
  --d-rule:         #DAD7CC;
  --d-rule-faint:   #E6E3D9;
  --d-accent:       #1F4D3D;
  --d-accent-hover: #173B2E;
  --d-accent-wash:  #EAEFEB;
  --d-credit:       #1F4D3D;
  --d-hold:         #8A6A1F;
  --d-debit:        #8C2B22;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */

.daybook,
.daybook *,
.daybook *::before,
.daybook *::after { box-sizing: border-box; }

.daybook {
  background: var(--d-paper);
  color: var(--d-ink);
  font-family: var(--d-serif);
  font-size: var(--d-text-body);
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

.daybook :focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 2px;
}

/* Form controls do not inherit type by default. Without this, a
   bare <input> that missed its class falls back to Arial and
   quietly puts a third typeface on the page. */
.daybook input,
.daybook select,
.daybook textarea,
.daybook button {
  font-family: inherit;
  font-size: inherit;
}

/* Emphasis in prose is italic, not bold. Daybook loads weight 400
   only, so a <strong> would otherwise be synthesised — a faked
   bold serif is the single ugliest thing that can happen to this
   system. Italic is also what a ledger would actually use. */
.daybook strong,
.daybook b {
  font-weight: 400;
  font-style: italic;
}

/* Every numeric column, always. */
.daybook .d-num { font-variant-numeric: tabular-nums lining-nums; }

/* ── Type primitives ──────────────────────────────────────────
   .d-label is the workhorse: nav, table headers, buttons, field
   labels, eyebrows. If text is small and structural, it's this.
   ─────────────────────────────────────────────────────────── */
.daybook .d-label {
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-ink-faint);
  font-weight: 400;
  line-height: 1.4;
}

.daybook .d-caption {
  font-family: var(--d-mono);
  font-size: var(--d-text-caption);
  color: var(--d-ink-muted);
  line-height: 1.5;
}

/* Reference codes — transaction ids, invoice numbers, account
   refs. They never wrap: a code broken across two lines at its
   hyphen stops being one identifier and cannot be read back. */
.daybook .d-ref {
  font-family: var(--d-mono);
  font-size: var(--d-text-caption);
  color: var(--d-ink-faint);
  white-space: nowrap;
}

.daybook .d-display,
.daybook .d-title {
  font-family: var(--d-serif);
  font-weight: 400;           /* never bold a serif heading */
  letter-spacing: var(--d-track-tight);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.daybook .d-display { font-size: var(--d-text-display); }
.daybook .d-title   { font-size: var(--d-text-title); }

.daybook .d-lead {
  font-size: var(--d-text-lead);
  line-height: 1.55;
  color: var(--d-ink-muted);
  margin: 0;
  max-width: 62ch;
}

.daybook .d-prose { max-width: 66ch; }
.daybook .d-prose p { margin: 0 0 var(--d-space-6); }
.daybook .d-prose p:last-child { margin-bottom: 0; }

/* ── Rules ────────────────────────────────────────────────────
   Strong rule closes a region. Faint rule separates peers.
   ─────────────────────────────────────────────────────────── */
.daybook .d-rule        { border: 0; border-top: var(--d-hairline) solid var(--d-ink); margin: 0; }
.daybook .d-rule-soft   { border: 0; border-top: var(--d-hairline) solid var(--d-rule); margin: 0; }
.daybook .d-rule-faint  { border: 0; border-top: var(--d-hairline) solid var(--d-rule-faint); margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.daybook .d-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: var(--d-space-5);
  padding-right: var(--d-space-5);
}

.daybook .d-masthead {
  display: flex;
  align-items: center;
  gap: var(--d-space-7);
  padding-top: var(--d-space-4);
  padding-bottom: var(--d-space-4);
  border-bottom: var(--d-hairline) solid var(--d-ink);
}

.daybook .d-wordmark {
  font-family: var(--d-serif);
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--d-ink);
  text-decoration: none;
}

.daybook .d-nav {
  display: flex;
  gap: var(--d-space-5);
  align-items: center;
}

.daybook .d-nav a {
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-ink-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: var(--d-hairline) solid transparent;
  transition: color var(--d-motion), border-color var(--d-motion);
}
.daybook .d-nav a:hover { color: var(--d-ink); }
.daybook .d-nav a[aria-current] {
  color: var(--d-ink);
  border-bottom-color: var(--d-accent);
}

.daybook .d-spacer { flex: 1; }

/* Avatar is a square. There are no circles in Daybook. */
.daybook .d-avatar {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: var(--d-hairline) solid var(--d-ink);
  font-family: var(--d-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--d-ink);
}

.daybook .d-pagehead {
  display: flex;
  align-items: flex-end;
  gap: var(--d-space-4);
  flex-wrap: wrap;
  padding-top: var(--d-space-8);
  padding-bottom: var(--d-space-6);
}
.daybook .d-pagehead .d-spacer { min-width: var(--d-space-4); }

/* ═══════════════════════════════════════════════════════════════
   PANEL — a bordered region. Not a card: no radius, no shadow,
   no elevation. It is a ruled-off area of the same sheet.
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-panel {
  border: var(--d-hairline) solid var(--d-rule);
  background: var(--d-paper);
}

.daybook .d-panel-head {
  display: flex;
  align-items: baseline;
  gap: var(--d-space-3);
  padding: var(--d-space-4) var(--d-space-5);
  border-bottom: var(--d-hairline) solid var(--d-rule);
}
.daybook .d-panel-head .d-title { font-size: 17px; }

.daybook .d-panel-body { padding: var(--d-space-6) var(--d-space-5); }

.daybook .d-panel-foot {
  display: flex;
  align-items: center;
  gap: var(--d-space-3);
  padding: var(--d-space-4) var(--d-space-5);
  border-top: var(--d-hairline) solid var(--d-rule);
}

/* ═══════════════════════════════════════════════════════════════
   STAT — a figure with its label. Serif numeral, never bold.
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: var(--d-hairline) solid var(--d-ink);
  border-bottom: var(--d-hairline) solid var(--d-ink);
}

.daybook .d-stat {
  display: flex;
  flex-direction: column;
  gap: var(--d-space-1);
  padding: var(--d-space-6) var(--d-space-5);
  border-right: var(--d-hairline) solid var(--d-rule);
}
.daybook .d-stat:last-child { border-right: 0; }

.daybook .d-stat-figure {
  font-family: var(--d-serif);
  font-size: var(--d-text-figure);
  font-weight: 400;
  letter-spacing: var(--d-track-tight);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}

.daybook .d-stat-delta {
  font-family: var(--d-mono);
  font-size: var(--d-text-caption);
  font-variant-numeric: tabular-nums;
}
.daybook .d-stat-delta[data-dir="up"]   { color: var(--d-credit); }
.daybook .d-stat-delta[data-dir="down"] { color: var(--d-debit); }
.daybook .d-stat-delta[data-dir="flat"] { color: var(--d-ink-faint); }

.daybook .d-stat-row {
  display: flex;
  align-items: baseline;
  gap: var(--d-space-2);
}

.daybook .d-spark {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: var(--d-space-2);
  overflow: visible;
}
.daybook .d-spark polyline { fill: none; stroke: var(--d-accent); stroke-width: 1.2; }
.daybook .d-spark circle   { fill: var(--d-accent); }

/* ═══════════════════════════════════════════════════════════════
   TABLE — the centerpiece. A ledger is a table.
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-tablewrap { overflow-x: auto; }

.daybook .d-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--d-text-body);
}

.daybook .d-table th {
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-ink-faint);
  font-weight: 400;
  text-align: left;
  padding: var(--d-space-3) var(--d-space-5);
  border-bottom: var(--d-hairline) solid var(--d-ink);
  white-space: nowrap;
}

.daybook .d-table td {
  padding: var(--d-space-3) var(--d-space-5);
  border-bottom: var(--d-hairline) solid var(--d-rule-faint);
  vertical-align: baseline;
}

.daybook .d-table tbody tr:last-child td { border-bottom: 0; }

.daybook .d-table tbody tr[data-interactive] { cursor: pointer; }
.daybook .d-table tbody tr[data-interactive]:hover { background: var(--d-paper-raised); }

/* Numeric cells never wrap. A date broken across two lines stops
   being scannable down the column, which is the only reason the
   column exists. The wrapper scrolls instead. */
.daybook .d-table th.d-num,
.daybook .d-table td.d-num { text-align: right; white-space: nowrap; }

/* Dates get tabular figures so they stack, but stay left-aligned:
   a date is a label, not a quantity, and right-aligning it makes
   the eye read it as money. */
.daybook .d-table th.d-date,
.daybook .d-table td.d-date {
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.daybook .d-table td.d-primary { color: var(--d-ink); }
.daybook .d-table td.d-secondary { color: var(--d-ink-muted); }

/* A total row closes the ledger. Strong rule above it. */
.daybook .d-table tfoot td {
  padding: var(--d-space-3) var(--d-space-5);
  border-top: var(--d-hairline) solid var(--d-ink);
  font-family: var(--d-mono);
  font-size: var(--d-text-caption);
  letter-spacing: 0.06em;
}
.daybook .d-table tfoot td.d-num {
  font-family: var(--d-serif);
  font-size: 17px;
  letter-spacing: var(--d-track-tight);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   STATUS — a dot and a word. Not a pill. Nothing is filled.
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-status {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.daybook .d-status::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
  flex: none;
  transform: translateY(-1px);
}
.daybook .d-status[data-tone="credit"]  { color: var(--d-credit); }
.daybook .d-status[data-tone="hold"]    { color: var(--d-hold); }
.daybook .d-status[data-tone="debit"]   { color: var(--d-debit); }
.daybook .d-status[data-tone="neutral"] { color: var(--d-ink-faint); }

/* A tag is an outlined square. Used for categories, never status. */
.daybook .d-tag {
  display: inline-block;
  padding: 2px 7px;
  border: var(--d-hairline) solid var(--d-rule);
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--d-space-2);
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px var(--d-space-6);
  border: var(--d-hairline) solid transparent;
  background: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--d-motion), color var(--d-motion),
              border-color var(--d-motion);
}

.daybook .d-btn:disabled,
.daybook .d-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
}

/* One primary action per screen. */
.daybook .d-btn-primary {
  background: var(--d-accent);
  border-color: var(--d-accent);
  color: var(--d-paper);
}
.daybook .d-btn-primary:not(:disabled):hover {
  background: var(--d-accent-hover);
  border-color: var(--d-accent-hover);
}

.daybook .d-btn-secondary {
  border-color: var(--d-ink);
  color: var(--d-ink);
}
.daybook .d-btn-secondary:not(:disabled):hover {
  background: var(--d-ink);
  color: var(--d-paper);
}

.daybook .d-btn-ghost {
  color: var(--d-ink-muted);
  padding-left: var(--d-space-3);
  padding-right: var(--d-space-3);
}
.daybook .d-btn-ghost:not(:disabled):hover { color: var(--d-ink); }

.daybook .d-btn-danger {
  border-color: var(--d-debit);
  color: var(--d-debit);
}
.daybook .d-btn-danger:not(:disabled):hover {
  background: var(--d-debit);
  color: var(--d-paper);
}

.daybook .d-btn-sm { padding: 8px var(--d-space-4); }

/* Inline text link: underlined, in ink. Accent is for actions. */
.daybook .d-link {
  color: var(--d-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--d-rule);
  transition: text-decoration-color var(--d-motion);
}
.daybook .d-link:hover { text-decoration-color: var(--d-accent); }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.daybook .d-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--d-space-6);
  border: 0;
  margin: 0;
  padding: 0;
}

.daybook .d-input,
.daybook .d-select,
.daybook .d-textarea {
  font-family: var(--d-serif);
  font-size: var(--d-text-body);
  color: var(--d-ink);
  background: var(--d-paper-raised);
  border: var(--d-hairline) solid var(--d-rule);
  padding: 10px var(--d-space-3);
  width: 100%;
  transition: border-color var(--d-motion);
}
.daybook .d-input:hover,
.daybook .d-select:hover,
.daybook .d-textarea:hover { border-color: var(--d-ink-faint); }

.daybook .d-input:focus,
.daybook .d-select:focus,
.daybook .d-textarea:focus {
  border-color: var(--d-accent);
  outline: none;
  box-shadow: inset 0 -2px 0 var(--d-accent);
}

.daybook .d-input::placeholder,
.daybook .d-textarea::placeholder {
  color: var(--d-ink-faint);
  font-style: italic;
}

.daybook .d-input:disabled,
.daybook .d-select:disabled,
.daybook .d-textarea:disabled {
  background: var(--d-paper-sunk);
  color: var(--d-ink-faint);
  cursor: not-allowed;
}

.daybook .d-input[data-numeric] {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.daybook .d-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% + 1px),
                       calc(100% - 11px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--d-space-7);
}

.daybook .d-textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.daybook .d-help { color: var(--d-ink-faint); }
.daybook .d-error {
  font-family: var(--d-mono);
  font-size: var(--d-text-caption);
  color: var(--d-debit);
}
.daybook .d-field[data-invalid] .d-input,
.daybook .d-field[data-invalid] .d-select,
.daybook .d-field[data-invalid] .d-textarea { border-color: var(--d-debit); }

/* A prefix cell fused to the input — currency, units, protocol. */
.daybook .d-input-group {
  display: flex;
  align-items: stretch;
  border: var(--d-hairline) solid var(--d-rule);
  background: var(--d-paper-raised);
}
.daybook .d-input-group:focus-within {
  border-color: var(--d-accent);
  box-shadow: inset 0 -2px 0 var(--d-accent);
}
.daybook .d-input-group .d-input {
  border: 0;
  background: none;
  box-shadow: none;
}
.daybook .d-input-group .d-input:focus { box-shadow: none; }
.daybook .d-affix {
  display: grid;
  place-items: center;
  padding: 0 var(--d-space-3);
  border-right: var(--d-hairline) solid var(--d-rule);
  background: var(--d-paper-sunk);
  font-family: var(--d-mono);
  font-size: var(--d-text-caption);
  color: var(--d-ink-muted);
}

/* Checkbox — a square that fills with ink. Daybook has no toggle. */
.daybook .d-check {
  display: flex;
  align-items: flex-start;
  gap: var(--d-space-2);
  cursor: pointer;
}
.daybook .d-check input {
  appearance: none;
  width: 15px;
  height: 15px;
  flex: none;
  margin: 3px 0 0;
  border: var(--d-hairline) solid var(--d-ink);
  background: var(--d-paper-raised);
  cursor: pointer;
  transition: background var(--d-motion);
}
.daybook .d-check input:checked {
  background: var(--d-accent);
  border-color: var(--d-accent);
}
.daybook .d-check input:checked::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin: 1px auto 0;
  border: solid var(--d-paper);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}
.daybook .d-check input[type="radio"]:checked::after {
  width: 5px; height: 5px; margin: 4px auto 0;
  border: 0; background: var(--d-paper); transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   TABS — underline only.
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-tabs {
  display: flex;
  gap: var(--d-space-6);
  border-bottom: var(--d-hairline) solid var(--d-rule);
}

.daybook .d-tab {
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-ink-faint);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0 0 var(--d-space-3);
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--d-motion), border-color var(--d-motion);
}
.daybook .d-tab:hover { color: var(--d-ink); }
.daybook .d-tab[aria-selected="true"] {
  color: var(--d-ink);
  border-bottom-color: var(--d-accent);
}

/* ═══════════════════════════════════════════════════════════════
   KEY / VALUE — the receipt block
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-kv { display: flex; flex-direction: column; margin: 0; }
.daybook .d-kv > div {
  display: flex;
  align-items: baseline;
  gap: var(--d-space-4);
  padding: var(--d-space-3) 0;
  border-bottom: var(--d-hairline) solid var(--d-rule-faint);
}
.daybook .d-kv > div:last-child { border-bottom: 0; }
.daybook .d-kv dt {
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-ink-faint);
  min-width: 160px;
  flex: none;
}
.daybook .d-kv dd { margin: 0; flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   NOTICE — a ruled band. Left rule carries the tone.
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-notice {
  display: flex;
  flex-direction: column;
  gap: var(--d-space-1);
  padding: var(--d-space-3) var(--d-space-4);
  border: var(--d-hairline) solid var(--d-rule);
  border-left-width: 3px;
  border-left-color: var(--d-ink-faint);
  background: var(--d-paper-raised);
}
.daybook .d-notice[data-tone="credit"] { border-left-color: var(--d-credit); }
.daybook .d-notice[data-tone="hold"]   { border-left-color: var(--d-hold); }
.daybook .d-notice[data-tone="debit"]  { border-left-color: var(--d-debit); }
.daybook .d-notice-title {
  font-family: var(--d-mono);
  font-size: var(--d-text-micro);
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-ink);
}
.daybook .d-notice p { margin: 0; color: var(--d-ink-muted); font-size: 14px; }

/* ═══════════════════════════════════════════════════════════════
   DIALOG
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-dialog {
  border: var(--d-hairline) solid var(--d-ink);
  background: var(--d-paper);
  color: var(--d-ink);
  padding: 0;
  max-width: 440px;
  width: calc(100% - var(--d-space-8));
}
.daybook .d-dialog::backdrop { background: rgba(26, 29, 26, 0.42); }
.daybook .d-dialog .d-panel-head { border-bottom-color: var(--d-ink); }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE & PAGINATION
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--d-space-3);
  padding: var(--d-space-8) var(--d-space-5);
  border: var(--d-hairline) dashed var(--d-rule);
}
.daybook .d-empty p { margin: 0; color: var(--d-ink-muted); max-width: 46ch; }

.daybook .d-pagination {
  display: flex;
  align-items: center;
  gap: var(--d-space-4);
  font-family: var(--d-mono);
  font-size: var(--d-text-caption);
  color: var(--d-ink-muted);
}
.daybook .d-pagination .d-count { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   MONEY — components that exist because of Part B of CLAUDE.md,
   not because of how the system looks.
   ═══════════════════════════════════════════════════════════════ */

/* Status plus the age of that status. A status with no age is
   unactionable: "Pending" tells you nothing, "Pending since
   11 Aug" tells you whether to chase it. */
.daybook .d-status-group {
  display: inline-flex;
  align-items: baseline;
  gap: var(--d-space-2);
  white-space: nowrap;
}

/* A total always carries its record count, so it can be checked. */
.daybook .d-total {
  display: inline-flex;
  align-items: baseline;
  gap: var(--d-space-3);
}
.daybook .d-total .d-num {
  font-family: var(--d-serif);
  font-size: var(--d-text-lead);
  letter-spacing: var(--d-track-tight);
}

/* Audit rows read as a running record, not a list of cards. */
.daybook .d-audit {
  display: flex;
  align-items: baseline;
  gap: var(--d-space-4);
  padding: var(--d-space-3) 0;
  border-bottom: var(--d-hairline) solid var(--d-rule-faint);
  font-size: 14px;
  color: var(--d-ink-muted);
}
.daybook .d-audit:last-child { border-bottom: 0; }
.daybook .d-audit > .d-caption { min-width: 148px; flex: none; }
.daybook .d-audit strong { font-style: normal; color: var(--d-ink); }
.daybook .d-audit-from {
  color: var(--d-ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.daybook .d-audit-to { color: var(--d-ink); }

/* A closed accounting period must look closed, not merely behave
   that way. Daybook has no greyed-card idiom, so it reads as a
   struck-through sheet: dimmed, and visibly not for editing. */
.daybook .d-locked {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}

/* Variance — the difference between two ledgers being reconciled.
   It carries its own resolution state, because "0.00" and "88.40"
   mean opposite things and the colour has to say which. */
.daybook .d-variance {
  display: inline-flex;
  align-items: baseline;
  gap: var(--d-space-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.daybook .d-variance[data-resolved="true"]  { color: var(--d-credit); }
.daybook .d-variance[data-resolved="false"] { color: var(--d-debit); }
.daybook .d-variance .d-caption { color: inherit; }

/* A deadline is a date plus how much time is left. Showing the date
   alone makes the reader do the arithmetic, and in a dispute the
   arithmetic is the whole point. */
.daybook .d-deadline {
  display: inline-flex;
  align-items: baseline;
  gap: var(--d-space-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.daybook .d-deadline[data-urgency="open"]     { color: var(--d-ink); }
.daybook .d-deadline[data-urgency="soon"]     { color: var(--d-hold); }
.daybook .d-deadline[data-urgency="critical"] { color: var(--d-debit); }
.daybook .d-deadline[data-urgency="passed"]   { color: var(--d-ink-faint); }

/* ── Document ─────────────────────────────────────────────────
   An invoice or statement: a sheet meant to be read, exported and
   printed. Narrower measure than an app screen, and the only place
   in Daybook that centres its content — because a document is an
   object on a desk, not a region of an interface. */
.daybook .d-doc {
  max-width: 760px;
  margin: 0 auto;
  border: var(--d-hairline) solid var(--d-rule);
  background: var(--d-paper);
  padding: var(--d-space-8) var(--d-space-7);
}
.daybook .d-doc-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d-space-6);
  align-items: flex-start;
  padding-bottom: var(--d-space-6);
  border-bottom: var(--d-hairline) solid var(--d-ink);
}
.daybook .d-doc-parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--d-space-6);
  padding: var(--d-space-6) 0;
}
.daybook .d-doc-party { display: flex; flex-direction: column; gap: var(--d-space-2); }
.daybook .d-doc-party address { font-style: normal; line-height: 1.55; }
.daybook .d-doc-totals {
  margin-left: auto;
  width: min(300px, 100%);
  display: flex;
  flex-direction: column;
}
.daybook .d-doc-totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--d-space-5);
  padding: var(--d-space-2) 0;
}
.daybook .d-doc-totals > div.d-doc-grand {
  border-top: var(--d-hairline) solid var(--d-ink);
  margin-top: var(--d-space-2);
  padding-top: var(--d-space-3);
}
.daybook .d-doc-grand .d-num {
  font-size: var(--d-text-title);
  letter-spacing: var(--d-track-tight);
}

/* Screen-reader-only. Used to carry the exact figure alongside an
   approximated one, and the masked account's spoken form. */
.daybook .d-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES — the only ones. Everything else is a component.
   ═══════════════════════════════════════════════════════════════ */

.daybook .d-stack   { display: flex; flex-direction: column; gap: var(--d-space-6); }
.daybook .d-stack-sm{ display: flex; flex-direction: column; gap: var(--d-space-3); }
.daybook .d-row     { display: flex; align-items: center; gap: var(--d-space-3); }
.daybook .d-row-end { display: flex; align-items: center; gap: var(--d-space-3); justify-content: flex-end; }
.daybook .d-grid-2  { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--d-space-6); }
.daybook .d-muted   { color: var(--d-ink-muted); }
.daybook .d-faint   { color: var(--d-ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .daybook *, .daybook *::before, .daybook *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT

   Invoices and statements get printed and saved as PDFs, and that
   copy is often the one that ends up in an audit file. It has to
   be right, so print is a supported target here rather than an
   afterthought.

   Daybook prints unusually well by construction — it is already
   ink on paper with no elevation — so most of this is removing
   the interface around the document and fixing what paper does
   differently from a screen.
   ═══════════════════════════════════════════════════════════════ */

@media print {
  /* Force the day palette. A night-mode invoice wastes a cartridge
     and prints white text as nothing on most drivers. */
  .daybook {
    --d-paper:        #FFFFFF;
    --d-paper-raised: #FFFFFF;
    --d-paper-sunk:   #FFFFFF;
    --d-ink:          #000000;
    --d-ink-muted:    #333333;
    --d-ink-faint:    #555555;
    --d-rule:         #999999;
    --d-rule-faint:   #CCCCCC;
    --d-accent:       #000000;
    --d-credit:       #000000;
    --d-hold:         #000000;
    --d-debit:        #000000;
    background: #fff;
    color: #000;
  }

  /* Semantic colour is gone, so status has to survive in form
     alone. The marker becomes an outline for anything that is not
     settled, which is the distinction a reader actually needs off
     a printed page. */
  .daybook .d-status::before { background: #000; }
  .daybook .d-status[data-tone="hold"]::before,
  .daybook .d-status[data-tone="debit"]::before {
    background: #fff;
    box-shadow: inset 0 0 0 1px #000;
  }
  .daybook .d-status[data-tone="debit"] { text-decoration: underline; }

  /* The interface is not part of the document. */
  .daybook .d-masthead,
  .daybook .d-nav,
  .daybook .d-tabs,
  .daybook .d-btn,
  .daybook .d-pagination,
  .daybook .d-panel-foot,
  .d-no-print { display: none !important; }

  /* The document becomes the page. */
  .daybook .d-doc {
    border: 0;
    max-width: none;
    margin: 0;
    padding: 0;

    /* Print has a hard constraint a screen does not: the sheet
       ends. Inside a document the rhythm steps down one notch —
       22 becomes 16, 33 becomes 22 — which is enough to keep a
       normal invoice on one page. The scale is still the scale;
       it is read at a different step, not abandoned. */
    --d-space-6: 16px;
    --d-space-7: 22px;
  }
  .daybook .d-container { max-width: none; padding: 0; }
  .daybook .d-panel { break-inside: avoid; }

  /* Keep the blocks a reader needs whole, whole. Payment details
     split across a page break are the worst possible break on an
     invoice — those are the lines somebody needs in order to pay
     you, and half of them on page two reads as a printing error
     rather than a document. */
  .daybook .d-doc-parties,
  .daybook .d-doc-party,
  .daybook .d-doc-totals,
  .daybook .d-kv > div,
  .daybook .d-audit { break-inside: avoid; }

  /* Rows must not split across sheets, and a table that runs long
     must repeat its header — otherwise page two is a column of
     unlabelled numbers. */
  .daybook .d-table { break-inside: auto; }
  .daybook .d-table thead { display: table-header-group; }
  .daybook .d-table tfoot { display: table-footer-group; }
  .daybook .d-table tr { break-inside: avoid; break-after: auto; }
  .daybook .d-tablewrap { overflow: visible; }

  /* A URL is useless on paper; the reference beside it is not. */
  .daybook .d-link { text-decoration: none; color: #000; }

  .daybook .d-display { font-size: 24pt; }
  .daybook .d-title   { font-size: 14pt; }
  .daybook { font-size: 10pt; }

  @page { margin: 18mm; }
}