:root {
  color-scheme: light;
  font: 16px/1.5 'DM Sans', system-ui, sans-serif;
  color: #19342d;
  background: #f5f3ec;
  --ink: #19342d;
  --pine: #153f35;
  --muted: #53685f;
  --line: #dedfd2;
  --paper: #fffef9;
  --mint: #e7efe1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.masthead { background: var(--pine); color: #fffef9; }
.bar, main { width: min(1120px, calc(100% - 40px)); margin: auto; }
.bar { min-height: 70px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 1.25rem; font-weight: 760; letter-spacing: -.025em; color: inherit; text-decoration: none; }
.brand img { border-radius: 11px; }
#account { display: flex; align-items: center; gap: 12px; font-size: .88rem; }
.masthead .quiet { color: white; border-color: #7b9e91; background: transparent; }
main { padding: 30px 0 65px; }
.environment { color: var(--muted); font-size: .8rem; letter-spacing: .045em; margin: 0 0 16px; font-weight: 700; }
.environment span { padding: 0 4px; }
h1, h2, h3, p { margin: 0; }
h1 { font: 600 clamp(2.35rem, 6vw, 4rem)/1.04 'Instrument Serif', Georgia, serif; letter-spacing: -.045em; margin-bottom: 9px; }
h2 { font: 600 1.55rem/1.16 'Instrument Serif', Georgia, serif; letter-spacing: -.025em; margin-bottom: 12px; }
h3 { font-size: 1rem; }
.muted, small { color: var(--muted); }
.heading { margin-bottom: 22px; }
.heading-row, .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.heading-row { justify-content: space-between; margin-bottom: 22px; }
.invoice-total { width: 100%; font-weight: 700; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 19px; padding: clamp(16px, 3vw, 27px); margin-bottom: 14px; }
.panel.tint { background: #e9efe3; }
.auth { max-width: 455px; margin-inline: auto; }
.clock-grid, .manage-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.status { display: inline-block; padding: 5px 10px; border-radius: 99px; background: var(--mint); color: var(--pine); font-weight: 700; font-size: .8rem; }
.status.pending { color: #69480e; background: #f6edcf; }
.status.declined { color: #813a31; background: #fae9e2; }
.clock { font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 680; line-height: 1.2; letter-spacing: -.055em; font-variant-numeric: tabular-nums; margin: 10px 0; }
form { display: grid; gap: 12px; }
form + form { margin-top: 16px; }
label { display: grid; gap: 5px; font-size: .88rem; font-weight: 680; }
input, select, textarea, button { font: inherit; }
input, select, textarea { min-width: 0; width: 100%; background: #fff; color: var(--ink); border: 1px solid #bfc8bc; border-radius: 9px; padding: 10px 11px; min-height: 44px; }
input[type="checkbox"] { width: 1.1rem; min-height: auto; margin: 0; }
textarea { resize: vertical; min-height: 70px; }
button { cursor: pointer; color: #fffef9; background: var(--pine); border: 1px solid var(--pine); border-radius: 9px; min-height: 44px; padding: 8px 14px; font-weight: 700; }
button:disabled { cursor: wait; opacity: .6; }
button.quiet { background: transparent; color: var(--pine); border-color: #9daea0; }
button.danger { background: transparent; color: #813a31; border-color: #b38d80; }
button.link { background: transparent; color: var(--pine); border: 0; padding-inline: 0; text-decoration: underline; justify-self: start; }
:focus-visible { outline: 3px solid #986719; outline-offset: 3px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.tabs button { background: transparent; color: var(--pine); border-color: transparent; }
.tabs button[aria-current="page"] { background: var(--pine); color: white; }
.notice { border: 1px solid #b5c7aa; background: #e6efdf; border-radius: 9px; padding: 11px 14px; margin: 0 0 14px; overflow-wrap: anywhere; }
.notice.error { background: #f9e9e0; border-color: #d5a895; color: #76352d; }
.entry { padding: 13px 0; border-top: 1px solid var(--line); }
.entry:first-of-type { margin-top: 8px; }
.entry .row { justify-content: space-between; }
.entry p + .row, .entry .row + p { margin-top: 7px; }
details { border-top: 1px solid var(--line); padding: 11px 0; }
summary { cursor: pointer; font-weight: 700; }
details > :not(summary) { margin-top: 9px; }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.metric { background: #e9efe3; border-radius: 13px; padding: 14px; }
.metric strong { display: block; font-size: clamp(1.15rem, 3vw, 1.75rem); letter-spacing: -.04em; overflow-wrap: anywhere; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { border-bottom: 1px solid var(--line); text-align: right; padding: 9px 11px; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-size: .81rem; }
.statement-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.statement-head h2 { margin: 0 0 4px; }
.statement-total { text-align: right; font-weight: 750; }
.status.deferred { background: #f6edcf; color: #69480e; }
#print-area { display: none; }
@media print {
  @page { margin: 0.65in; }
  body { background: white; color: black; font-size: 10pt; }
  body.printing > :not(#print-area) { display: none !important; }
  body.printing #print-area { display: block; }
  #print-area h1 { font-size: 26pt; }
  #print-area h2 { margin-top: 13pt; }
  #print-area .table-wrap { overflow: visible; }
  #print-area th, #print-area td { padding: 5pt; white-space: normal; }
  #print-area tr { break-inside: avoid; }
  #print-area thead { display: table-header-group; }
  #print-area .statement-attachment { break-before: page; }
}
.compact { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.compact label { flex: 1 1 136px; }
.audit-json { white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px; background: #f5f3ec; }
@media (max-width: 690px) {
  .bar, main { width: calc(100% - 28px); }
  main { padding-top: 22px; }
  .clock-grid, .manage-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}