:root {
  --paper:#e8e2d2;
  --card:#ffffff;
  --ink:#17191c;
  --ink-soft:#26292d;
  --muted:#4d5158;
  --line:#cdc5b2;
  --line-strong:#a69d87;
  --accent:#1f4d3a;
  --accent-ink:#163a2c;
  --accent-wash:#e6efe9;
  --pick:#cfe4d7;
  --flag:#fbe9b7;
  --flag-ink:#6b4a00;
  --danger:#8f2a2a;
  --danger-wash:#f8e7e5;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Avenir Next","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
html { background:var(--paper); }
body {
  margin:0; color:var(--ink); background:var(--paper);
  font:16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px, rgba(23,25,28,.07) 1px, transparent 0);
  background-size:22px 22px;
}
a { color:var(--accent); text-decoration-color:rgba(31,77,58,.35); text-underline-offset:2px; }
a:hover { color:var(--accent-ink); text-decoration-color:currentColor; }

header.top {
  position:sticky; top:0; z-index:5;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line);
  padding:0 28px; display:flex; flex-wrap:wrap; align-items:center; gap:0 28px; min-height:56px;
}
header.top .brand { font:600 20px/1 var(--serif); letter-spacing:.01em; color:var(--ink); }
header.top .brand::after { content:""; display:inline-block; width:6px; height:6px; margin-left:6px; border-radius:50%; background:var(--accent); vertical-align:2px; }
header.top nav a { margin-right:18px; color:var(--ink-soft); text-decoration:none; font-size:15px; font-weight:500; letter-spacing:.02em; padding:18px 0; border-bottom:2px solid transparent; }
header.top nav a:hover { color:var(--ink); }
header.top nav a.active { color:var(--accent-ink); border-bottom-color:var(--accent); }
header.top .who { margin-left:auto; color:var(--ink-soft); display:flex; gap:12px; align-items:center; font-size:15px; white-space:nowrap; padding:10px 0; }
header.top .who a.welcome { font-size:13px; color:var(--muted); text-decoration:none; }
/* Text size: two small buttons that scale the whole page (html zoom, remembered per browser; see js.ts). */
header.top .size { display:flex; gap:4px; }
header.top .size button { padding:2px 7px; font-size:12.5px; line-height:1.3; letter-spacing:0; }
header.top .who a.welcome:hover { text-decoration:underline; }

main { max-width:1120px; margin:28px auto 64px; padding:0 28px; }
/* The PDF view of a bill: the page widens on a large screen so the PDF beside the right column is big enough to read. */
main.wide { max-width:1700px; }
footer.foot { max-width:1120px; margin:28px auto 24px; padding:0 28px; font-size:13px; color:var(--muted); }
footer.foot a { color:inherit; }
h1 { font:600 28px/1.2 var(--serif); letter-spacing:-.005em; margin:0 0 18px; }
h2 { font:600 18px/1.3 var(--serif); margin:26px 0 10px; }
h2:first-child { margin-top:0; }
main > p { margin:0 0 16px; color:var(--ink-soft); }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  padding:18px 22px; margin-bottom:18px;
  box-shadow:0 1px 0 rgba(23,25,28,.06), 0 10px 28px -18px rgba(23,25,28,.4);
}

.error, .notice { padding:11px 14px; border-radius:4px; margin-bottom:16px; border:1px solid; font-size:15px; font-weight:500; }
.error { background:var(--danger-wash); color:var(--danger); border-color:#e5bfbb; }
.notice { background:var(--accent-wash); color:var(--accent-ink); border-color:#c2d6ca; }

form.inline { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end; }
label { display:flex; flex-direction:column; gap:5px; font-size:13.5px; line-height:17px; font-weight:600; color:var(--ink-soft); letter-spacing:.01em; }
input, select, textarea {
  font:inherit; color:var(--ink); background:#fff;
  padding:7px 9px; border:1px solid var(--line-strong); border-radius:3px;
  transition:border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,77,58,.15); }
input::placeholder { color:#a9a69c; }
input[type=number] { text-align:right; }
input[type=date] { font-variant-numeric:tabular-nums; }
textarea { line-height:1.4; }

/* The primary button, and a link that acts as one (Create new draft invoice): one rule, so the two cannot drift. */
button, a.button {
  font:inherit; font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:8px 15px; border:1px solid var(--accent-ink); background:var(--accent); color:#fff;
  border-radius:3px; cursor:pointer; transition:background .12s, transform .06s, box-shadow .12s;
}
a.button { display:inline-block; text-decoration:none; line-height:1.5; }
button:hover, a.button:hover { background:var(--accent-ink); }
button:active { transform:translateY(1px); }
button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(31,77,58,.25); }
button.quiet { background:transparent; color:var(--accent-ink); border-color:var(--line-strong); font-weight:500; }
button.quiet:hover { background:var(--accent-wash); border-color:var(--accent); }
button.danger { background:transparent; color:var(--danger); border-color:#d6b3af; font-weight:500; }
button.danger:hover { background:var(--danger-wash); border-color:var(--danger); }

table { width:100%; border-collapse:collapse; background:transparent; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
tbody tr:last-child td { border-bottom-color:var(--line-strong); }
th { font-size:14px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line-strong); }
td.num, th.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
tbody tr:hover td { background:rgba(23,25,28,.025); }
.muted { color:var(--muted); }
.nowrap { white-space:nowrap; }
.hint { color:var(--muted); font-size:14px; margin:6px 0 0; max-width:60ch; }
.flag { background:var(--flag); color:var(--flag-ink); padding:1px 7px; border-radius:2px; font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.locked { color:var(--muted); font-size:14px; }
.tag { display:inline-block; padding:1px 8px; border-radius:2px; font-size:12.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap; text-decoration:none; margin-left:10px; vertical-align:1px; }
.tag:first-child { margin-left:0; }
.tag-draft { background:var(--accent-wash); color:var(--accent-ink); border:1px solid #b9d2c3; }
.tag-billed { background:#ecebe6; color:var(--muted); border:1px solid var(--line); }
.tag-final { background:var(--card); color:var(--ink-soft); border:1px solid var(--line-strong); }
.tag-unsent { background:var(--flag); color:var(--flag-ink); border:1px solid #e3c97a; }
tr.billed td { color:var(--muted); }
tr.billed .de-matter, tr.billed .num { color:var(--ink-soft); }

/* A tab's heading line carrying more than its title: the h1 and, beside it, the links that switch between the
   tab's views (Invoices: Finalized / Drafts), the active one underlined. */
.page-head { display:flex; align-items:baseline; gap:28px; margin-bottom:14px; flex-wrap:wrap; }
.page-head h1 { margin:0; }
nav.subnav { display:flex; gap:18px; margin:0; }
nav.subnav a { padding:8px 0; color:var(--ink-soft); text-decoration:none; font-weight:500; border-bottom:2px solid transparent; }
nav.subnav a:hover { color:var(--ink); }
nav.subnav a.active { color:var(--accent-ink); border-bottom-color:var(--accent); }
p.actions { margin:0 0 16px; }
/* Filter dropdowns sized to their words within limits: never stretched across the line, never shrunk to the width
   of "All" when a list is still empty; the Filter button stays beside them. */
form.inline select.pick { min-width:12rem; max-width:22rem; }
/* The number of a bill in a list: the row's main link, underlined and bold. */
a.strong-link { text-decoration:underline; text-underline-offset:3px; font-weight:600; }

.auth { max-width:440px; margin:64px auto; padding:28px 30px; }
.auth form { display:flex; flex-direction:column; gap:14px; }
.auth button { margin-top:4px; padding:10px 16px; }
.auth p { margin:4px 0 0; }

/* Draft invoice page: the bill on the left, controls on the right */
.two-col { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px; align-items:start; }
.two-col.one { grid-template-columns:minmax(0,1fr); }
/* The right column: compact cards, so Finalized, Sent and Payments fit without scrolling. */
.two-col > div:last-child .card { padding:12px 14px; margin-bottom:12px; }
.two-col > div:last-child .card h2 { font-size:15px; margin:0 0 8px; }
.two-col > div:last-child .card h2 + h2, .two-col > div:last-child .card table + h2, .two-col > div:last-child .card p + h2 { margin-top:12px; }
.two-col > div:last-child .card p { margin:6px 0; }
details.disclose > summary { cursor:pointer; font-weight:600; color:var(--accent-ink); font-size:13.5px; list-style:none; }
details.disclose > summary::before { content:"▸ "; }
details.disclose[open] > summary::before { content:"▾ "; }
details.disclose > summary::-webkit-details-marker { display:none; }
details.disclose[open] > summary { margin-bottom:8px; }
.pdf-view { padding:0; overflow:hidden; }
.pdf-view object { display:block; width:100%; height:85vh; min-height:720px; border:0; }
.card.paper.pdf-view { padding:14px 16px 16px; }
.pdf-refused { padding:28px 32px; max-width:60ch; }
.pdf-refused p { margin:0 0 12px; }
.pdf-view p { padding:18px 22px; }
.preview-link { margin:0 0 10px; text-align:right; font-size:13px; }
.view-link { margin:-8px 0 14px; text-align:right; font-size:13px; }
.paper-wrap .card { margin-bottom:0; }
.period-form { display:flex; flex-direction:column; gap:8px; }
.period-row { display:flex; gap:10px; align-items:flex-end; }
.period-row label:first-child { flex:1 1 auto; }
.period-row select { width:100%; }
.period-row input[type=date] { width:9.5em; }
.period-form p.actions { margin:2px 0 0; }
.paper {
  background:#fff; padding:48px 52px; border-color:var(--line-strong);
  box-shadow:0 1px 0 rgba(23,25,28,.04), 0 18px 40px -24px rgba(23,25,28,.45);
}
.invoice { font:13.5px/1.45 var(--serif); color:var(--ink); }
.inv-head { display:flex; justify-content:space-between; gap:28px; margin-bottom:30px; align-items:flex-start; }
.inv-firm { font-size:13px; line-height:1.5; }
.inv-firm strong { font-size:17px; display:block; margin-bottom:3px; }
.inv-title { font-size:22px; font-weight:600; letter-spacing:.14em; text-align:right; margin-bottom:10px; color:var(--ink); }
.inv-meta table.meta { width:auto; margin-left:auto; }
.inv-meta table.meta th { text-align:left; padding:2px 12px 2px 0; color:var(--muted); font:500 11px/1.6 var(--sans); letter-spacing:.08em; text-transform:uppercase; border:0; }
.inv-meta table.meta td { padding:2px 0; border:0; font-variant-numeric:tabular-nums; }
.inv-billto { margin-bottom:26px; padding-left:14px; border-left:3px solid var(--accent); line-height:1.5; }
.inv-billto .label { font:600 10.5px/1.6 var(--sans); text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.inv-billto strong { font-size:15px; }
.invoice h3 { font:600 11.5px/1.4 var(--sans); text-transform:uppercase; letter-spacing:.14em; margin:28px 0 6px; padding-bottom:5px; border-bottom:1.5px solid var(--ink); }
.invoice table { font-size:13px; }
.invoice th { font:600 10.5px/1.4 var(--sans); letter-spacing:.1em; border-bottom:1px solid var(--line-strong); padding:5px 8px; }
.invoice td { padding:6px 8px; border-bottom:1px solid var(--line); }
.invoice tbody tr:hover td { background:none; }
.invoice tr.total td { font-weight:700; border-top:1px solid var(--ink); border-bottom:0; }
.invoice tr.early td { background:#fdf6df; }
.inv-summary { margin:14px 0 0 auto; width:auto; min-width:62%; }
.inv-due { display:flex; justify-content:space-between; align-items:baseline; font-size:18px; font-weight:700; border-top:2px solid var(--ink); margin-top:24px; padding-top:10px; font-variant-numeric:tabular-nums; }
.inv-due span:first-child { font:600 11.5px/1 var(--sans); text-transform:uppercase; letter-spacing:.14em; }
.inv-pay { margin-top:22px; color:var(--ink-soft); white-space:pre-line; font-size:12.5px; }
/* Credit on account under the total due: a lighter line, no second rule; the amount now payable follows in full weight. */
.inv-credit { border-top:0; margin-top:6px; padding-top:0; font-size:15px; font-weight:500; }
.inv-credit + .inv-due { border-top:1px solid var(--ink); margin-top:6px; }
/* A void: VOID banded across the top of the bill, in text so it prints and copies. A replacement cites the void under its meta. */
.inv-void { display:flex; justify-content:center; align-items:baseline; gap:18px; margin:0 0 26px; padding:8px 0; border-top:3px solid var(--danger); border-bottom:3px solid var(--danger); color:var(--danger); font:700 34px/1.1 var(--sans); letter-spacing:.32em; text-indent:.32em; }
.inv-void small { font:600 12px/1 var(--sans); letter-spacing:.08em; text-indent:0; }
.inv-void-note { margin:-14px 0 26px; text-align:center; font-size:12.5px; color:var(--ink-soft); }
.inv-replaces { margin-top:8px; text-align:right; font-size:12.5px; color:var(--ink-soft); }
label.check { flex-direction:row; align-items:center; gap:8px; font-weight:500; color:var(--ink); }
label.check input { width:16px; height:16px; margin:0; accent-color:var(--accent); }

.row { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:3px 0; flex-wrap:wrap; }
.row button { padding:6px 11px; font-size:13px; }
/* Editing on the bill: an Edit link at the end of each line of a draft; the open line is a row of boxes with its
   Save, No charge and Remove buttons in that last cell. The boxes belong to an empty form before the table. */
.inv-lines tr.editing td { vertical-align:middle; }
.inv-lines tr.editing input { width:100%; min-width:0; font:inherit; font-size:13px; padding:5px 7px; }
.inv-lines tr.editing input[type=date] { width:auto; }
/* The description box fills its column and grows downward for a narrative of more than one line. */
.inv-lines tr.editing td.line-desc { width:100%; }
.inv-lines tr.editing textarea { width:100%; min-width:16em; font:inherit; font-size:13px; line-height:1.45; padding:6px 8px; resize:vertical; display:block; }
/* Hours over fixed amount, each right-aligned under the Hours heading; an expense's amount box the same width. */
.inv-lines tr.editing td.num input { display:block; width:5.5em; margin-left:auto; text-align:right; }
.inv-lines tr.editing td.num input + input { margin-top:4px; }
.inv-lines td.line-act, .inv-lines th.line-act { white-space:nowrap; text-align:right; font-size:12.5px; width:1%; }
.inv-lines td.line-act a { font-family:var(--sans); }
/* The open line's buttons stand one above another in that narrow last cell, so the table never outgrows the bill. */
.inv-lines td.line-act .row { flex-direction:column; align-items:stretch; gap:4px; padding:0; }
.inv-lines td.line-act .row button { white-space:nowrap; padding:5px 10px; font-size:12.5px; }

/* Time: one day at a time. One grid: the entry form top-left, the day's entries under it, and a small month calendar
   on the right spanning both rows, so no gap opens under the entry form. The selected day's square and the Date box
   share one fill; today's square and the Today link share one outline. */
.time-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:18px; align-items:stretch; }
.time-grid > .card { margin-bottom:0; }
.time-grid .month-cal { grid-column:2; grid-row:1; }
.time-grid .day-list { grid-column:1 / -1; }
.day-label { display:flex; align-items:center; gap:12px; font:600 22px/1.2 var(--serif); margin:0 0 14px; }
.day-arrow { display:inline-flex; align-items:center; justify-content:center; width:32px; height:30px; border:1px solid var(--line-strong); border-radius:3px; background:var(--card); text-decoration:none; font-size:24px; line-height:1; }
.day-arrow:hover { background:var(--accent-wash); border-color:var(--accent); }
.day-who { margin:0 0 6px; font-size:14px; color:var(--muted); letter-spacing:.02em; }
.day-who strong { color:var(--ink); font-weight:600; }
/* With more than one professional, their names are links; the one whose day is shown is marked. */
.who-links { display:inline-flex; flex-wrap:wrap; gap:0 14px; }
.who-links a { text-decoration:none; color:var(--muted); }
.who-links a.active { color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.day-head { font:600 20px/1.3 var(--serif); margin:0 0 12px; text-align:center; }
.delete-entry { margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); }
.day-head .day-total { font:500 15px/1 var(--sans); color:var(--ink-soft); letter-spacing:.01em; margin-left:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.day-list .muted { margin:0; }

.month-cal { padding:6px 8px; margin:0; }
.month-cal .cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.month-cal .cal-head h2 { flex:1; margin:0; font-size:14px; text-align:center; white-space:nowrap; }
.cal-arrow { flex:none; padding:0 8px; border-radius:3px; font-size:22px; line-height:1; text-decoration:none; }
.cal-arrow:hover { background:var(--accent-wash); }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,1.3fr); gap:1px; font-variant-numeric:tabular-nums; }
.cal-dow { padding-bottom:2px; text-align:center; font-size:10.5px; font-weight:600; color:var(--ink-soft); }
.cal-dow.cal-wk { border-left:1px solid var(--line); }
.cal-day { display:flex; flex-direction:column; align-items:center; min-height:27px; padding:1px 0 0; border:1.5px solid transparent; border-radius:3px; color:var(--ink); text-decoration:none; }
.cal-day:hover { background:rgba(23,25,28,.05); }
.cal-day.out { color:#8e8b82; }
.cal-day.today, .today-link { border:1.5px solid var(--accent); }
.cal-day.selected { background:var(--pick); color:var(--accent-ink); font-weight:600; }
.cal-num { font-size:11.5px; line-height:13px; font-weight:500; }
.cal-hours { min-height:11px; line-height:11px; font-size:9.5px; font-weight:600; color:var(--accent-ink); }
.cal-day.out .cal-hours { color:inherit; font-weight:500; }
.cal-week-total { display:flex; align-items:center; justify-content:center; min-height:27px; border-left:1px solid var(--line); font-size:11px; font-weight:700; color:var(--ink); }
.today-link { display:inline-block; flex:none; padding:0 7px; border-radius:3px; font-size:12.5px; text-decoration:none; font-weight:600; }
.today-link:hover { background:var(--accent-wash); }
.ef-date input { background:var(--pick); width:9.5em; }

/* The entry form: quick entry on the day view and the edit page. Two rows: professional, date, matter and the amount
   box with its Hours / Fixed $ dropdown, then the description the width of the card with the buttons at its right. The description box grows with the
   narrative (field-sizing where supported, app.js elsewhere), never smaller than three lines. */
.quick-entry form { height:100%; }
.entry-form { display:flex; flex-direction:column; gap:10px; height:100%; }
.ef-row { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; }
/* One height for every box in the top row, so their tops line up as well as their bottoms. */
.ef-row:not(.ef-bottom) input, .ef-row:not(.ef-bottom) select:not(.ef-amount select) { height:36px; box-sizing:border-box; }
.ef-who select { max-width:9rem; }
.ef-matter { flex:1 1 160px; }
.ef-matter input { width:100%; }
/* The Hours / Fixed $ dropdown stands where a label would, so it is dressed as one: no box, label type, same height. */
.ef-amount { display:flex; flex-direction:column; gap:5px; }
.ef-amount select { width:auto; align-self:flex-start; height:17px; padding:0 2px 0 0; border:0; border-radius:0; background:transparent; font-size:13.5px; line-height:17px; font-weight:600; color:var(--ink-soft); letter-spacing:.01em; cursor:pointer; }
.ef-amount select:focus { box-shadow:none; outline:2px solid var(--accent); outline-offset:2px; }
.ef-amount input { width:4.5em; }
.ex-amount input { width:7em; }
.ef-bottom { flex-wrap:nowrap; flex:1; align-items:stretch; }
.ef-desc { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ef-desc textarea { width:100%; flex:1; field-sizing:content; min-height:calc(3em + 16px); resize:vertical; }
.ef-actions { display:flex; gap:12px; align-items:center; align-self:flex-end; flex:0 0 auto; padding-bottom:1px; }

.quick-entry { padding:14px 18px; }
.day-entries td { padding:10px; }
.day-entries .num { font-weight:600; }
.inv-list tfoot td, .day-entries tfoot td, .admin-firms tfoot td { font-weight:700; border-top:1px solid var(--ink); border-bottom:0; }
/* The invoice lists: Number and Date take only the width they need; the status tags and the two period dates each stay on one line. */
.inv-list .number, .inv-list .date { width:1%; white-space:nowrap; }
.inv-list .status, .inv-list .period { white-space:nowrap; }
.day-entries .de-matter { font-weight:600; margin-bottom:3px; }
.day-entries .de-matter .muted { font-weight:500; }
.day-entries .de-desc { white-space:pre-line; overflow-wrap:anywhere; }
.day-entries .de-actions { width:1%; }

@media print {
  html { zoom:1 !important; }
  header.top, footer.foot, main > h1, main > p, .two-col > div:last-child, .flag, .line-act, #line-form, #expense-form, .preview-link, .view-link { display:none !important; }
  .inv-lines tr.editing input, .inv-lines tr.editing textarea, .inv-lines tr.editing button { display:none !important; }
  html, body { background:#fff; }
  main { margin:0; padding:0; max-width:none; }
  .two-col { display:block; }
  .paper { border:0; box-shadow:none; padding:0; }
  .invoice tr.early td { background:none; }
  /* Page breaks: never inside a row; a heading stays with its table; the professional summary and the
     expense section each stay whole when they fit on a page; the total due and the payment instructions
     stay together and with the block above them. A block taller than a page still breaks inside. */
  tr { break-inside:avoid; }
  .invoice h3 { break-after:avoid; }
  .inv-summary, .inv-expenses { break-inside:avoid; }
  .inv-foot { break-inside:avoid; break-before:avoid; }
  @page { size:letter; margin:.75in; }
}
/* Expenses: everyone's expenses on the chosen matters, each matter collapsed to a line until opened */
.ef-file { flex:0 0 auto; }
.ef-file input { padding:5px 6px; max-width:230px; }
.ex-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; }
.ex-head .day-head { margin:0; text-align:left; }
.pick-matters { position:relative; font-size:14px; }
.pick-matters > summary { list-style:none; cursor:pointer; padding:5px 12px; border:1px solid var(--line-strong); border-radius:3px; background:var(--card); font-weight:600; color:var(--accent-ink); user-select:none; }
.pick-matters > summary::-webkit-details-marker { display:none; }
.pick-matters > summary:hover { background:var(--accent-wash); border-color:var(--accent); }
.pick-matters form { position:absolute; right:0; top:calc(100% + 4px); z-index:4; min-width:320px; max-height:60vh; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:var(--card); border:1px solid var(--line-strong); border-radius:4px; box-shadow:0 10px 28px -12px rgba(23,25,28,.45); }
.pick-matters label { flex-direction:row; align-items:center; gap:8px; font-weight:500; color:var(--ink); cursor:pointer; white-space:nowrap; }
.pick-matters input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.pick-matters button { align-self:flex-end; padding:4px 12px; font-size:13px; }
.ex-matter { border-top:1px solid var(--line); }
.ex-matter:last-of-type { border-bottom:1px solid var(--line-strong); }
.ex-matter > summary { display:flex; align-items:baseline; gap:14px; padding:10px 6px; cursor:pointer; list-style:none; }
.ex-matter > summary::-webkit-details-marker { display:none; }
.ex-matter > summary::before { content:"›"; display:inline-block; width:12px; color:var(--muted); transition:transform .12s; align-self:center; }
.ex-matter[open] > summary::before { transform:rotate(90deg); }
.ex-matter > summary:hover { background:rgba(23,25,28,.03); }
.exm-name { font:600 16px/1.3 var(--serif); color:var(--ink); }
.exm-facts { color:var(--muted); font-size:14px; flex:1 1 auto; font-variant-numeric:tabular-nums; }
.exm-total { font-weight:700; font-variant-numeric:tabular-nums; }
.ex-matter table { margin:0 0 12px; }
.ex-entries tr.subtotal td { font-weight:600; border-bottom:0; }
.ex-entries .ex-desc { white-space:pre-line; overflow-wrap:anywhere; }
.ex-entries tbody tr.subtotal:hover td { background:none; }
.ex-total { display:flex; justify-content:space-between; margin:12px 6px 0; font-size:16px; font-variant-numeric:tabular-nums; }

/* Payments: the record card's boxes, the split step's amount boxes at the right of each bill, and a payment's facts. */
.pay-card .pay-amount input { width:8em; }
.pay-card select.pick { max-width:18rem; }
.pay-splits td input { width:8em; text-align:right; font-variant-numeric:tabular-nums; }
.pay-splits .number, .pay-splits .date { width:1%; white-space:nowrap; }
.pay-facts { margin:0 0 14px; color:var(--ink-soft); }
.pay-facts strong { color:var(--ink); }
.pay-credit { font-size:17px; font-weight:600; margin:14px 0 0; font-variant-numeric:tabular-nums; }
.pay-actions { display:flex; gap:14px; align-items:center; margin-top:14px; }
/* A finalized bill's money line under its number: paid in full, partly paid, or the balance. */
.inv-balance { font-size:17px; font-weight:600; margin:0 0 10px; font-variant-numeric:tabular-nums; }

/* Reports */
.rp-summary { margin:0 0 12px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.rp-entries tr.rp-group th { font:600 15px/1.3 var(--serif); color:var(--ink); padding-top:16px; border-bottom:1px solid var(--line-strong); }
.rp-entries tr.subtotal td { font-weight:600; border-bottom:1px solid var(--line-strong); }
.rp-entries tr.subtotal.client td { font-weight:700; }
.rp-entries tr.total td { font-weight:700; border-top:1px solid var(--ink); border-bottom:0; }
.rp-entries .mt-desc { white-space:pre-line; overflow-wrap:anywhere; }
.rp-entries tbody tr.rp-group:hover th, .rp-entries tbody tr.subtotal:hover td, .rp-entries tbody tr.total:hover td { background:none; }

/* Report tables */
.mt-entries .mt-desc { white-space:pre-line; overflow-wrap:anywhere; }
.initials { display:inline-block; min-width:2.4em; font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.mt-totals tr.total td { font-weight:700; border-top:1px solid var(--ink); border-bottom:0; }

/* Welcome: the tour list and the share note */
ul.tour { padding-left:1.2em; }
ul.tour li { margin:6px 0; }
.share-note { width:100%; max-width:60ch; }

/* Terms and Privacy: the text from src/legal/, in a readable measure; a bracketed item still in the text is flagged. */
.legal { max-width:72ch; }
.legal h2 { font-size:19px; margin:26px 0 8px; }
.legal h3 { font-size:16px; margin:22px 0 6px; }
.legal p, .legal li { line-height:1.55; }
.legal mark.todo { background:var(--flag); color:var(--flag-ink); padding:0 4px; }

/* Feedback: the form (Good / Needs work as two radios on one line, a subject, a comment) and the operator's list */
form.feedback { display:flex; flex-direction:column; gap:14px; align-items:flex-start; max-width:60ch; }
form.feedback > label { width:100%; }
form.feedback select { align-self:flex-start; }
fieldset.rating { border:0; padding:0; margin:0; display:flex; gap:18px; }
fieldset.rating legend { font-size:13.5px; font-weight:600; color:var(--ink-soft); letter-spacing:.01em; padding:0; margin-bottom:6px; }
fieldset.rating label { flex-direction:row; align-items:center; gap:7px; font-size:15px; font-weight:500; color:var(--ink); cursor:pointer; }
fieldset.rating input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.fb-list .fb-comment { white-space:pre-wrap; overflow-wrap:anywhere; min-width:24ch; }
/* The operator's Firms page: every column but the firm's name takes only the width it needs. */
.admin-firms th, .admin-firms td { white-space:nowrap; }
.admin-firms .firm { white-space:normal; width:100%; }

@media (max-width:600px) {
  .day-entries tr { display:grid; grid-template-columns:minmax(0,1fr) auto; border-bottom:1px solid var(--line); }
  .day-entries td { border-bottom:0; padding:6px 4px; }
  .day-entries .de-actions { grid-column:1 / -1; width:auto; text-align:left; }
}
@media (max-width:900px) {
  .two-col, .time-grid { grid-template-columns:minmax(0,1fr); }
  .time-grid { align-items:start; }
  .time-grid .month-cal, .time-grid .day-list { grid-column:auto; grid-row:auto; }
  .month-cal { max-width:420px; }
  .ef-bottom { flex-wrap:wrap; }
  .paper { padding:28px 24px; }
  header.top { padding:0 16px; gap:16px; }
  header.top .who a.welcome { display:none; }
  main, footer.foot { padding:0 16px; }
}