: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:nowrap; align-items:center; gap:0 28px; min-height:56px;
}
/* The bar stays one row on a laptop (Don, 11/04); it wraps only at phone and small-tablet widths, below. */
header.top nav { white-space:nowrap; }
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; }
/* The person's name opens a small menu (a details element, no script) holding the account links. The print pages embed this stylesheet, so no link text here. */
header.top .user-menu { position:relative; }
header.top .user-menu > summary { cursor:pointer; list-style:none; color:var(--ink); padding:6px 0; }
header.top .user-menu > summary::-webkit-details-marker { display:none; }
header.top .user-menu > summary::after { content:" ▾"; color:var(--muted); font-size:12px; }
header.top .user-menu .menu { position:absolute; right:0; top:100%; min-width:180px; background:#fff; border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:6px 0; display:flex; flex-direction:column; z-index:6; }
header.top .user-menu .menu a, header.top .user-menu .menu button.link { display:block; width:100%; text-align:left; padding:8px 14px; font-size:14px; color:var(--ink); text-decoration:none; letter-spacing:0; background:none; border:0; cursor:pointer; }
header.top .user-menu .menu a:hover, header.top .user-menu .menu button.link:hover { background:#f5f3ef; }
/* 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:3px 5px; font-size:12.5px; line-height:1.3; letter-spacing:0; display:inline-flex; align-items:center; }
header.top .size .mag { flex:none; }
/* The person's own name opens the change-password page: where people look for account things. */
.sandbox { background:var(--flag); color:var(--flag-ink); border-bottom:1px solid #e3cf8a; padding:8px 28px; text-align:center; font-size:14.5px; font-weight:500; }
.sandbox a { color:inherit; }
.sandbox form { display:inline; }
/* The banner's buttons (the tour's offer, the way back) are real buttons, not words in the sentence: a person in a sample firm must find them at a glance. */
.sandbox button { margin-left:12px; padding:4px 12px; font-size:13.5px; vertical-align:baseline; }

/* The guided tour's panel (layout.tsx TourCard): a card fixed at the bottom right, the bottom edge on a phone. */
.tour {
  position:fixed; right:20px; bottom:20px; z-index:6; width:360px; max-width:calc(100vw - 32px);
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:4px;
  padding:14px 16px 12px; box-shadow:0 14px 36px -14px rgba(23,25,28,.5); font-size:15px; line-height:1.45;
}
.tour .tour-step { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.tour h3 { font:600 17px/1.3 var(--serif); margin:2px 0 8px; color:var(--ink); }
.tour p { margin:0 0 10px; color:var(--ink-soft); }
.tour .tour-done { color:var(--accent-ink); font-weight:600; }
.tour .tour-elsewhere { font-size:14px; color:var(--muted); }
.tour .tour-actions { display:flex; align-items:center; gap:8px; }
.tour .tour-actions form { display:inline; }
.tour .tour-actions button { padding:6px 13px; font-size:14px; }
.tour .tour-skip { margin-left:auto; }
/* Step ▾ on the card (Don, 11/05): the step names, to jump to one; the list scrolls inside the card on a short screen. */
.tour .tour-jump summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tour .tour-jump .tour-all { text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--accent); background:var(--card); border:1px solid var(--line-strong); border-radius:4px; padding:3px 10px; }
.tour .tour-jump summary:hover .tour-all, .tour .tour-jump[open] .tour-all { border-color:var(--accent); background:var(--accent-wash); }
.tour .tour-jump summary::-webkit-details-marker { display:none; }
.tour .tour-jump ol.tour-steps { max-height:55vh; overflow-y:auto; margin:6px 0 10px; padding-bottom:4px; text-transform:none; letter-spacing:0; font-weight:400; font-size:14px; }
/* The tour's steps by name (views/tour-steps.tsx): on Welcome › Guided tour and in the card's Step ▾. */
ol.tour-steps { margin:4px 0 0; padding-left:26px; }
ol.tour-steps li { margin:2px 0; }
ol.tour-steps button.link { padding:0; font-size:inherit; text-align:left; }
ol.tour-steps li.current button.link { font-weight:700; text-decoration:none; color:var(--ink); }
.tour .tour-skip button.link { font-size:13px; color:var(--muted); padding:0; }
/* Room under the card at every width, so it never hides the bottom of a long table. */
body.tour-on main { padding-bottom:260px; }
@media (max-width:900px) {
  .tour { right:0; bottom:0; left:0; width:auto; max-width:none; border-radius:0; border-left:0; border-top:3px solid var(--accent); padding:12px 16px 10px; }
}

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; }
/* A row with a tall text box lines its labels up at the top instead; the button still sits level with the boxes. */
form.inline:has(textarea) { align-items:flex-start; }
form.inline:has(textarea) > button { align-self:flex-end; }
label, .field { display:flex; flex-direction:column; gap:5px; font-size:13.5px; line-height:17px; font-weight:600; color:var(--ink-soft); letter-spacing:.01em; }
/* A dropdown in a label is as tall as a text box beside it (browsers give dropdowns their own line height), so a row
   of boxes lines up top and bottom and every label's top is level (Don, 11/05). */
label > select { height:33px; }
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, a.button.quiet { background:transparent; color:var(--accent-ink); border-color:var(--line-strong); font-weight:500; }
button.quiet:hover, a.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); }
/* A button that reads as a link, for an action that sits inside a sentence (the sample firm offer, before 11/05). */
button.link { background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; text-underline-offset:2px; font:inherit; cursor:pointer; }
button.link:hover { color:var(--accent-ink); }

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; }
.export-files th { white-space:nowrap; }
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-line { background:var(--flag); color:var(--flag-ink); padding:3px 7px; border-radius:2px; font-size:12.5px; margin:4px 0; }
.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; }
.tag-unbilled { background:var(--flag); color:var(--flag-ink); border:1px solid #e3c97a; }
.tag-fill { background:var(--card); color:var(--muted); border:1px dashed var(--line-strong); font-weight:500; }
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 (Clients, Reports, Firm), the active one underlined, or a button (Invoices: Create new draft invoice). */
.page-head { display:flex; align-items:baseline; gap:28px; margin-bottom:14px; flex-wrap:wrap; }
.page-head h1 { margin:0; }
.page-head .head-action { margin-left:auto; }
nav.subnav { display:flex; flex-wrap:wrap; gap:0 18px; margin:0; }
nav.subnav a { padding:8px 0; white-space:nowrap; 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:not(.link) { margin-top:4px; padding:10px 16px; }
.auth p { margin:4px 0 0; }
/* The sample-data offer: its own small form under the sign-in one (a form inside a form is not HTML), set off by a rule. */
.auth form.try { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
/* Sign-in and sign-up: the form's card and the "Just looking?" card side by side, both at the top; the offer comes first when they stack. */
.auth-pair { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:20px; max-width:920px; margin:64px auto; padding:0 }
.auth-pair .auth { margin:0; flex:1 1 360px; }
.auth-pair .try-card { order:1; }
.auth-pair .try-card h2 { margin:0 0 8px; }
.auth-pair .try-card p { margin:0 0 14px; }
.auth-pair .try-card form p { margin:0; }
@media (max-width:900px) {
  .auth-pair { margin:24px auto; }
  .auth-pair .try-card { order:0; }
}

/* The public front page at the domain root (signed out): one column of words; the ways in stack (the button, the sample-firm sentence, the sign-in line). */
.front { max-width:720px; margin:48px auto 0; }
.front .brand { font:600 18px/1 var(--serif); color:var(--accent-ink); letter-spacing:.02em; margin:0 0 22px; }
.front h1 { font-size:34px; line-height:1.15; margin:0 0 14px; }
.front .lead { font-size:18px; line-height:1.5; color:var(--ink-soft); margin:0 0 24px; max-width:60ch; }
/* The three ways in (Don, 11/05): cards side by side under the opening words, each with its button at the foot;
   they stack on a narrow screen. The sign-in and sign-up pages use the same cards (.way). */
.ways-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; max-width:1060px; margin:8px auto 20px; }
.ways-cards .card { margin:0; }
.card.way { display:flex; flex-direction:column; padding:22px 24px; }
.card.way h2 { margin:0 0 8px; }
.card.way p { margin:0 0 10px; }
.card.way .way-go { margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.card.way .way-go p { margin:0; }
.card.way a.button, .card.way button { align-self:flex-start; padding:10px 18px; }
.way-more { text-align:center; margin:-40px 0 40px; }
@media (max-width:900px) { .ways-cards { grid-template-columns:minmax(0,1fr); max-width:520px; } .way-more { margin:0 0 24px; } }
.front h2 { font:600 20px/1.3 var(--serif); margin:28px 0 10px; }
.front ul.does { padding-left:1.2em; margin:0; }
.front ul.does li { margin:0 0 10px; line-height:1.5; }

/* 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; }
.inv-taxid { margin-top:10px; color:var(--ink-soft); font-size:12.5px; }
/* A letterhead's bands: dashed placeholders on screen; on paper blank room of the band's exact height, which the
   firm's own bands are stamped into after rendering (src/letterhead.ts). */
.pro-title { display:block; font-size:12px; color:var(--muted); }
.inv-letterhead, .inv-closing { display:block; border:1px dashed var(--line-strong); color:var(--muted); font:500 11px/1.4 var(--sans); text-align:center; padding-top:8px; box-sizing:border-box; text-decoration:none; }
.inv-letterhead { margin-bottom:18px; min-height:28px; }
/* Drawn on screen by the page's script (js.ts): the letterhead itself in place of the dashed placeholder. */
.inv-letterhead.drawn, .inv-closing.drawn { border:0; padding:0; height:auto !important; min-height:0; }
.inv-closing { margin-top:18px; break-inside:avoid; break-before:avoid; }
.inv-head .inv-billto { margin-bottom:0; }
/* 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 Client-Matter box: an arrow always showing, and the list the script draws (js.ts), number then matter and client in grey. */
.mp { position:relative; display:block; }
.mp::after { content:""; position:absolute; right:12px; top:50%; width:6px; height:6px; border-right:1.6px solid var(--muted); border-bottom:1.6px solid var(--muted); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.mp .matter-input { padding-right:30px; cursor:pointer; }
.mp .matter-input:focus { cursor:text; }
.mp .matter-input::-webkit-calendar-picker-indicator { display:none !important; }
.mp-list { position:absolute; left:0; right:0; top:calc(100% + 3px); z-index:6; max-height:50vh; overflow:auto; margin:0; padding:4px 0; list-style:none; background:var(--card); border:1px solid var(--line-strong); border-radius:4px; box-shadow:0 10px 28px -12px rgba(23,25,28,.45); }
.mp-list li { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; padding:6px 12px; cursor:pointer; font-weight:600; color:var(--ink); line-height:1.35; }
.mp-list li.on, .mp-list li:hover { background:var(--accent-wash); }
.mp-v { white-space:nowrap; }
.mp-h { font-weight:400; font-size:.92em; color:var(--muted); }
.mp-list li.mp-none { font-weight:400; color:var(--muted); cursor:default; background:none; }
/* A matter named on a screen (MatterName): the number, then client and matter in grey, as in the Client-Matter list. */
.mn-names { color:var(--muted); font-weight:400; }
/* 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 .tick { width:1%; }
.inv-list .status, .inv-list .period { white-space:nowrap; }
/* The Invoices tab's list (Don, 11/05): its Status and Period cells may take two lines (the pieces in them stay whole),
   and the table scrolls sideways in its own box when the screen is narrower still. */
.inv-tab .status, .inv-tab .period { white-space:normal; }
.inv-tab .status .tag { margin-left:0; margin-right:4px; }
.table-scroll { overflow-x:auto; }
/* The pinned sideways bar the page script adds under a .table-scroll box (Don, 11/05), which then hides the box's own
   bar. Drawn always (not only while scrolling, as a Mac draws a plain one), thick enough to grab. */
.table-scroll.pinned { scrollbar-width:none; }
.table-scroll.pinned::-webkit-scrollbar { display:none; }
.scroll-pin { position:sticky; bottom:0; z-index:3; overflow-x:auto; overflow-y:hidden; height:16px; background:var(--paper); border-top:1px solid var(--line); }
.scroll-pin[hidden] { display:none; }
.scroll-pin > div { height:1px; }
.scroll-pin::-webkit-scrollbar { height:14px; }
.scroll-pin::-webkit-scrollbar-track { background:var(--paper); }
.scroll-pin::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:7px; border:3px solid var(--paper); }
.scroll-pin::-webkit-scrollbar-thumb:hover { background:var(--muted); }
@supports not selector(::-webkit-scrollbar) { .scroll-pin { scrollbar-width:auto; scrollbar-color:var(--line-strong) var(--paper); } }
/* Paid or Partly paid sits on its own line under the tags, and the report's "written off" under its Paid, so neither widens its column. */
.inv-list .status-paid { display:block; margin-top:3px; }
.rp-entries .status-sub { display:block; font-size:13px; color:var(--muted); }
.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, .sandbox, .tour, 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; }
  /* body main and .card.paper outrank the narrow-screen padding further down, which also matches the 7 in printed page. */
  body main { margin:0; padding:0; max-width:none; }
  .two-col { display:block; }
  .card.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; }
  .inv-letterhead, .inv-closing { border:0; color:transparent; padding:0; min-height:0; }
  .inv-letterhead { margin:0; }
  .inv-closing { margin-top:6px; }
  @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; }
/* A field whose name sits to its left, not above it: the Expenses tab's Status (Don, 11/05). */
.field.field-left { flex-direction:row; align-items:center; gap:8px; }
.ex-pickers { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.pick-status form { min-width:220px; }
.pick-note { margin:2px 0 0; font-size:12.5px; max-width:16rem; }
/* A box's own footnote, right under it (the Matter number box's "* optional"), and the New matter forms' live number. */
/* It hangs just below its box, so its label stays the height of the others and every label's top lines up (Don, 11/05). */
label:has(> .field-note) { position:relative; }
.field-note { position:absolute; top:100%; left:0; margin-top:2px; white-space:nowrap; font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0; }
form.inline:has(.field-note) { padding-bottom:16px; }
form.export-from { margin-bottom:14px; }
.numbering-note p { margin:0 0 6px; }
.numbering-note p:last-child { margin-bottom:0; }
.number-preview { margin:10px 0 0; font-size:15px; }
.number-preview strong { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.number-preview .preview-error { color:#a32d2d; }
/* The Invoices list's sent record for the ticked bills, and the dialogs that prompt for it (Don, 11/05). */
.mark-sent { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:0 0 10px; }
.send-result:empty { display:none; }
/* The Invoices list's small Clear all, beside Select all, and the note under the buttons (Don, 11/05). */
button.small { padding:4px 10px; font-size:13px; }
.bill-pdfs .pdfs-hint { margin:-6px 0 10px; font-size:13.5px; }
/* "Making the PDF…" beside a first download (Don, 11/05). */
.making-pdf { color:var(--accent-ink); font-weight:500; margin:6px 0 0; }
.making-pdf[hidden] { display:none; }
.send-result { color:var(--accent-ink); font-weight:500; }
.send-dialog { max-width:36rem; width:calc(100% - 32px); border:1px solid var(--line-strong); border-radius:6px; padding:22px 26px; background:var(--card); color:var(--ink); box-shadow:0 18px 48px -18px rgba(23,25,28,.55); }
.send-dialog::backdrop { background:rgba(23,25,28,.45); }
.send-dialog h2 { margin-top:0; }
.send-dialog .send-list { font-weight:600; }
.send-fields { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; }
.send-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:0; }
.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; }
/* Inside a report's form the Status boxes have no form of their own: the panel opens under the button, left-aligned, and the report's Run button sends them. */
.pick-matters .pick-panel { position:absolute; left:0; top:calc(100% + 4px); z-index:4; min-width:220px; 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); }
form.inline .pick-status > summary { padding:7px 12px; }
.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 */
/* A report's Download Excel button sits at the right of its first line (Don, 11/05). */
.rp-download { float:right; margin:0 0 10px 14px; }
.rp-download a.button { padding:5px 12px; font-size:14px; }
.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; }

/* The Welcome page's two columns, each flowing on its own: the guided tour's offer, the tab list, the feedback form and the sample-firm card on the wider left, the cost and share cards on the right. Cards keep their own bottom margin. */
.welcome-grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:0 20px; align-items:start; }
/* Welcome: the "What is where" list of the tabs and the share note */
ul.tabs { padding-left:1.2em; }
ul.tabs li { margin:6px 0; }
.share-note { width:100%; max-width:60ch; }
/* A new invitation link in the Firm page's notice, with its Copy button (data-copy, js.ts). */
.notice .invite-link { word-break:break-all; }
.notice button.quiet { margin-left:6px; padding:2px 10px; font-size:13px; vertical-align:baseline; }

/* 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); }
/* Firm > Import: the matching table and the problem list. */
.import-match select { min-width:14em; }
.import-match .hint { margin:2px 0 0; font-size:13px; }
.import-problems { color:#a32d2d; }
/* Firm > Professionals: earlier base rates behind a click. */
.rate-history summary { cursor:pointer; color:var(--accent); font-size:14px; margin-top:2px; }
.rate-history div { color:var(--muted); font-size:14px; }
/* The circled i beside a label and the explanation it opens (the browser's own pop-up, centred on screen). */
button.info { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; min-height:0; padding:0; margin:0 0 0 6px; border:1.5px solid var(--accent); border-radius:50%; background:transparent; color:var(--accent); font:italic 700 12px/1 Georgia, serif; cursor:pointer; vertical-align:middle; }
.label-line { display:flex; align-items:center; }
button.info:hover, button.info:focus-visible { background:var(--accent); color:#fff; }
.info-pop { max-width:min(42ch, calc(100vw - 32px)); padding:14px 16px; border:1px solid var(--ink-soft); border-radius:8px; background:#fff; color:var(--ink); font-size:15px; font-weight:400; line-height:1.5; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.info-pop::backdrop { background:rgba(0,0,0,.12); }
/* Firm > Numbering: the order boxes on the left, the choices on the right, the example under both. */
.numbering-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
@media (max-width:700px) { .numbering-grid { grid-template-columns:minmax(0,1fr); } }
#numbering fieldset { border:0; padding:0; margin:0 0 14px; }
#numbering legend { font-size:13.5px; font-weight:600; color:var(--ink-soft); padding:0; margin-bottom:6px; }
.numbering-part, .numbering-choice, .numbering-renumber { display:flex; flex-direction:row; align-items:center; gap:10px; font-size:15px; margin:6px 0; cursor:pointer; }
.numbering-part input { width:3em; text-align:center; }
.numbering-choice input, .numbering-renumber input { width:16px; height:16px; margin:0; accent-color:var(--accent); }
.error-text { color:#a32d2d; font-size:14px; margin:8px 0 0; min-height:1.2em; }
.numbering-example { background:var(--paper, #f6f5f1); border-radius:6px; padding:12px 16px; margin:8px 0 14px; }
.numbering-example .label { font-size:13px; color:var(--muted); }
.numbering-number { font-family:ui-monospace, Menlo, monospace; font-size:24px; font-weight:600; }
.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; }
  .front { margin-top:24px; }
  .front h1 { font-size:28px; }
  /* Phone: every tab stays visible (the row wraps), and a wide table scrolls sideways in its own box rather than
     being cut off: a card scrolls for the table inside it, and a table placed straight in the page (the invoice,
     payment and client lists) becomes its own scrolling box, so the headings, filters and totals above and below it
     stay put. main keeps a sideways scroll only as a fallback for anything wider still. */
  header.top nav { display:flex; flex-wrap:wrap; gap:0 14px; }
  header.top nav a { margin-right:0; padding:10px 0; }
  header.top .who { gap:8px; padding:6px 0; }
  main { overflow-x:auto; }
  .card:has(table) { overflow-x:auto; }
  main > table { display:block; overflow-x:auto; }
  th, td { padding:8px 8px; }
}
@media (max-width:900px) {
  .two-col, .time-grid, .welcome-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; }
  .sandbox { padding:8px 16px; }
  main, footer.foot { padding:0 16px; }
}
/* Narrower than a laptop: the tabs sit closer, then the text-size buttons go (a phone pinches to zoom). */
@media (max-width:1100px) {
  header.top { padding:0 16px; gap:0 16px; }
  header.top nav a { margin-right:12px; font-size:14px; }
}
@media (max-width:1000px) { header.top .size { display:none; } }
/* Phone and small tablet, after the blocks above so these win: the brand and the name share the first row and the
   tabs take the next (Don, 11/04: the fold is for phones only), so the sticky header takes as little of the screen
   as it can. */
@media (max-width:760px) {
  header.top { flex-wrap:wrap; padding:0 12px; gap:0 12px; }
  header.top nav { order:1; flex-basis:100%; display:flex; flex-wrap:wrap; gap:0 14px; white-space:normal; }
  header.top nav a { margin-right:0; padding:10px 0; }
}