/*
  Expense claims, RoR UK office.
  Subject: the UK paper expense claim form. Two inks, as on a printed form: black text and ballpoint blue
  (the pen people sign claims with). Status colours are the only others. One typeface, Public Sans, made for
  government forms and tables. Signature detail: the "Claimed by / Approved by / Paid by" strip every paper claim ends with.
*/
:root {
  --ink: #16181d;
  --ink-2: #3a3f4a;
  --muted: #5f6673;
  --faint: #8b919c;
  --rule: #dde0e6;
  --rule-2: #c9cdd5;
  --sheet: #ffffff;
  --desk: #eceef2;
  --tint: #f5f6f8;

  --biro: #2437b0;
  --biro-dark: #1a2988;
  --biro-wash: #e9ecfb;

  --ok: #13703f;
  --ok-wash: #e3f3e9;
  --no: #b0281c;
  --no-wash: #fbe8e6;
  --ask: #9a5506;
  --ask-wash: #fdf1dc;

  --r: 6px;
  --r-lg: 10px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --font: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; animation-timing-function: var(--ease); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 22px; color: var(--ink); background: var(--desk); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd { margin: 0; }
a { color: var(--biro); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.min0 { min-width: 0; }
.pre { white-space: pre-line; overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-12 { margin-top: 12px; }
.mt-20 { margin-top: 20px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 2px solid var(--biro); outline-offset: 2px; }

/* Masthead: the printed header of the form. Office left, sections, who is signed in right. */
.mast { background: var(--sheet); border-bottom: 1px solid var(--rule); }
.mast-in { max-width: 1240px; margin: 0 auto; padding: 0 24px; min-height: 56px; display: flex; align-items: center; gap: 24px; }
.mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.mark img { width: 26px; height: 26px; border-radius: 50%; }
.mark b { font-weight: 700; letter-spacing: -.01em; }
.mark span { color: var(--muted); }
.sections { display: flex; align-self: stretch; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.sections a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color 150ms var(--ease), box-shadow 150ms var(--ease); }
.sections a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--biro); }
.count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--biro); color: #fff; font-size: 12px; line-height: 20px; font-weight: 700; text-align: center; }
.mast-end { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.me { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-2); }

/* Buttons. Primary is ballpoint blue, approve green, decline outlined red. Press settles slightly. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--r); border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 20px; text-decoration: none; white-space: nowrap; cursor: pointer; transition-property: background-color, border-color, color, scale; transition-duration: 150ms; transition-timing-function: var(--ease); }
.btn:not(:disabled):active { scale: .97; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--biro); color: #fff; }
.btn-plain { background: var(--sheet); border-color: var(--rule-2); color: var(--ink); }
.btn-approve { background: var(--ok); color: #fff; }
.btn-decline { background: var(--sheet); border-color: #e7b4ae; color: var(--no); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.btn-lg { min-height: 48px; padding-inline: 20px; }
.btn-block { width: 100%; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r); background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; transition: background-color 150ms var(--ease), color 150ms var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .sections a:hover { color: var(--ink); }
  .btn-primary:not(:disabled):hover { background: var(--biro-dark); }
  .btn-plain:not(:disabled):hover { border-color: var(--faint); background: var(--tint); }
  .btn-approve:not(:disabled):hover { background: #0e5a32; }
  .btn-decline:not(:disabled):hover { background: var(--no-wash); }
  .icon-btn:hover { background: var(--tint); color: var(--ink); }
  .entry:hover, .tray-row:hover { background: var(--tint); }
  .thumbs button:hover { border-color: var(--faint); }
}

/* Page */
.page { max-width: 1240px; margin: 0 auto; padding: 32px 24px 96px; }
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.title-row h1 { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.title-row p { margin-top: 4px; color: var(--muted); }
.title-row .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--muted); font-weight: 500; text-decoration: none; }
.back:hover { color: var(--ink); }

.sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-lg); min-width: 0; }
.sheet-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--rule); }
.sheet-h h2 { font-size: 16px; line-height: 22px; font-weight: 700; }
.sheet-h span { color: var(--muted); font-size: 14px; }
.pad { padding: 20px 24px; }

/* Status, marked the way a clerk would annotate the form */
.status { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.status svg { width: 14px; height: 14px; }
.st-wait { background: var(--biro-wash); color: var(--biro-dark); }
.st-ask { background: var(--ask-wash); color: var(--ask); }
.st-ok { background: var(--ok-wash); color: var(--ok); }
.st-no { background: var(--no-wash); color: var(--no); }
.role { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--rule); font-size: 12px; font-weight: 600; color: var(--ink-2); }

.avatar { flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--ink-2); font-weight: 600; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 36px; height: 36px; font-size: 13px; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }

/* Running position: one printed line of figures, not a row of cards */
.position { display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 18px 24px; margin-bottom: 20px; }
.position div { display: grid; }
.position dt { color: var(--muted); font-size: 14px; }
.position dd { font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; }
.position dd small { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.callout { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 20px; border-radius: var(--r-lg); border: 1px solid; }
.callout > svg { flex-shrink: 0; }
.callout > div { flex: 1; min-width: 0; }
.callout strong { font-weight: 700; display: block; }
.callout-ask { background: #fffaf0; border-color: #efcf96; color: #5f3504; }
.callout-wait { background: var(--sheet); border-color: var(--rule); }
.callout-ok { background: #f3faf5; border-color: #a9d6b9; color: #0b4727; }
.callout-no { background: #fdf4f3; border-color: #ebb9b3; color: #6f1a12; }
.quote { margin-top: 6px; padding: 8px 12px; border-radius: var(--r); background: rgba(255,255,255,.75); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }

/* The claims book: one ledger, grouped by month with the month total on the right */
.book-month { display: flex; justify-content: space-between; padding: 9px 24px; background: var(--tint); border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; font-weight: 700; }
.book-month:not(:first-child) { border-top: 1px solid var(--rule); }
.entries { list-style: none; margin: 0; padding: 0; }
.entry { position: relative; display: grid; grid-template-columns: 44px 64px minmax(0, 1fr) 220px 110px; align-items: center; gap: 16px; padding: 12px 24px; transition: background-color 150ms var(--ease); }
.entry + .entry { border-top: 1px solid var(--rule); }
.entry .when { color: var(--muted); font-size: 14px; }
.entry b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry .amt { text-align: right; font-weight: 700; }
.entry.with-person { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 220px 110px; }
a.cover { color: inherit; text-decoration: none; }
a.cover::after { content: ""; position: absolute; inset: 0; }
.thumb { width: 44px; height: 52px; border-radius: 4px; object-fit: cover; object-position: top; background: var(--tint); box-shadow: 0 0 0 1px rgba(0,0,0,.1); display: grid; place-items: center; color: var(--faint); }

.empty { padding: 56px 24px; text-align: center; }
.empty h2 { font-size: 18px; font-weight: 700; }
.empty p { max-width: 400px; margin: 6px auto 20px; color: var(--muted); }
.empty > svg { margin: 0 auto 14px; color: var(--biro); }

/* Filters and search */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.filter { display: flex; gap: 2px; padding: 3px; border-radius: var(--r); background: var(--tint); overflow-x: auto; max-width: 100%; }
.filter a { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 4px; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.filter a[aria-current="page"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.1); }
.filter a span { color: var(--faint); font-weight: 500; }
.search { position: relative; min-width: 220px; }
.search svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--faint); pointer-events: none; }
.search .input { padding-left: 36px; height: 40px; }

/* Forms */
.field { display: grid; gap: 6px; }
.field + .field { margin-top: 18px; }
label, .label { font-weight: 600; color: var(--ink); font-size: 15px; }
.opt { font-weight: 400; color: var(--muted); }
.hint { color: var(--muted); font-size: 14px; line-height: 20px; font-weight: 400; }
.err { color: var(--no); font-size: 14px; line-height: 20px; }
.input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--sheet); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.input:focus { outline: none; border-color: var(--biro); box-shadow: 0 0 0 3px rgba(36,55,176,.15); }
.input[aria-invalid="true"] { border-color: var(--no); }
textarea.input { height: auto; min-height: 84px; padding: 10px 12px; line-height: 22px; resize: vertical; }
select.input { appearance: none; padding-right: 32px; background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235f6673' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center; }
.money { position: relative; }
.money span { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.money .input { padding-left: 26px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.radios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.radios label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r); font-weight: 500; cursor: pointer; transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
.radios input { accent-color: var(--biro); width: 16px; height: 16px; margin: 0; }
.radios label:has(input:checked) { border-color: var(--biro); background: var(--biro-wash); }

/* New claim: receipt first, then lines, then send */
.claim-form { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.claim-form .stack { display: grid; gap: 20px; min-width: 0; }
.step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.receipt-panel { position: sticky; top: 20px; }
.drop { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; min-height: 260px; padding: 24px; text-align: center; border: 1.5px dashed var(--rule-2); border-radius: var(--r-lg); background: var(--tint); cursor: pointer; transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop.is-over, .drop:focus-within { border-color: var(--biro); background: var(--biro-wash); }
.drop b { font-weight: 700; font-size: 16px; }
.drop > svg { color: var(--biro); }
.drop.has-files { min-height: 0; padding: 12px; display: flex; justify-content: center; gap: 8px; }
.drop.has-files .drop-big { display: none; }
.drop .drop-small { display: none; font-weight: 600; color: var(--biro); }
.drop.has-files .drop-small { display: inline; }
.picked { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.picked:empty { display: none; }
.picked li { position: relative; border-radius: var(--r); overflow: hidden; background: var(--tint); box-shadow: 0 0 0 1px var(--rule); animation: enter 200ms var(--ease); }
.picked .pk-img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: top; display: grid; place-items: center; color: var(--muted); font-weight: 700; font-size: 13px; }
.picked .pk-cap { padding: 4px 6px; font-size: 12px; line-height: 16px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--sheet); border-top: 1px solid var(--rule); }
.picked .pk-cap.err { color: var(--no); }
.picked .pk-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(22,24,29,.75); color: #fff; cursor: pointer; }
.picked li.is-removed .pk-img { opacity: .3; }
.picked li.is-removed .pk-cap { text-decoration: line-through; }

.items-h, .item { display: grid; grid-template-columns: 148px 160px minmax(0, 1fr) 118px 36px; gap: 8px; align-items: start; }
.items-h { padding: 14px 24px 0; color: var(--muted); font-size: 14px; font-weight: 500; }
.items-h .r { text-align: right; }
.item { padding: 8px 24px; }
.item .field + .field { margin-top: 0; }
.item .err { grid-column: 1 / -1; }
.item .i-del { margin-top: 4px; }
.item-new { animation: enter 220ms var(--ease); }
.items-foot { padding: 10px 24px 20px; }
.more summary { cursor: pointer; color: var(--biro); font-weight: 600; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary { margin-bottom: 14px; }
.send { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; flex-wrap: wrap; }
.send .tot { display: grid; }
.send .tot span { color: var(--muted); font-size: 14px; }
.send .tot b { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.01em; }

/* Claim document */
.doc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.doc-main { display: grid; gap: 20px; min-width: 0; }
.doc-head { padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; }
.doc-head h1 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.doc-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); font-size: 14px; }
.doc-head .amount { grid-row: 1 / 3; grid-column: 2; text-align: right; }
.doc-head .amount span { display: block; color: var(--muted); font-size: 14px; }
.doc-head .amount b { font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -.02em; }
.claimant { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--rule); }
.claimant b { display: block; font-weight: 600; }
.claimant span { color: var(--muted); font-size: 14px; }

table.lines { width: 100%; border-collapse: collapse; }
.lines th { padding: 12px 24px 8px; text-align: left; color: var(--muted); font-size: 14px; font-weight: 500; }
.lines td { padding: 12px 24px; border-top: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.lines .r { text-align: right; white-space: nowrap; }
.lines td.d { white-space: nowrap; color: var(--muted); }
.lines .cat { color: var(--muted); font-size: 14px; }
.lines tfoot td { border-top: 2px solid var(--ink); font-weight: 700; font-size: 16px; }

/* Signature detail: the sign-off strip from the foot of a paper claim form, filled in as the claim moves. */
.signoff { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.signoff > div { padding: 16px 24px 18px; min-width: 0; }
.signoff > div + div { border-left: 1px solid var(--rule); }
.signoff dt { color: var(--muted); font-size: 13px; font-weight: 500; }
.signoff .sig { margin-top: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ink-2); font-weight: 700; color: var(--biro-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signoff .sig.blank { color: var(--faint); font-weight: 500; border-bottom-style: dashed; border-color: var(--rule-2); }
.signoff .dated { margin-top: 6px; font-size: 13px; color: var(--muted); }
.signoff .v-ok { color: var(--ok); font-weight: 600; }
.signoff .v-no { color: var(--no); font-weight: 600; }
.signoff .v-ask { color: var(--ask); font-weight: 600; }

.viewer { position: sticky; top: 20px; display: grid; gap: 12px; }
.viewer-main { display: block; border-radius: var(--r-lg); overflow: hidden; background: #2b2e34; aspect-ratio: 3 / 4; }
.viewer-main img { width: 100%; height: 100%; object-fit: contain; }
.viewer-main .pdf { height: 100%; display: grid; place-items: center; align-content: center; gap: 10px; color: #fff; text-align: center; padding: 24px; text-decoration: none; }
.viewer-main .pdf b { font-size: 20px; }
.viewer-cap { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; }
.viewer-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs button { width: 56px; height: 68px; padding: 0; border-radius: 4px; overflow: hidden; border: 1.5px solid var(--rule); background: var(--tint); cursor: pointer; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); transition: border-color 150ms var(--ease); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.thumbs [aria-pressed="true"] { border-color: var(--biro); }

/* Activity */
.feed { list-style: none; margin: 0; padding: 4px 24px; }
.feed li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.feed li + li { border-top: 1px solid var(--rule); }
.feed .act { font-size: 14px; line-height: 20px; }
.feed .act b { font-weight: 700; }
.feed time { display: block; color: var(--faint); font-size: 13px; line-height: 18px; }
.feed .body { margin-top: 6px; padding: 8px 12px; border-radius: 2px var(--r) var(--r) var(--r); background: var(--tint); white-space: pre-line; overflow-wrap: anywhere; }
.feed .t-approved .act span, .feed .t-paid .act span { color: var(--ok); font-weight: 600; }
.feed .t-rejected .act span { color: var(--no); font-weight: 600; }
.feed .t-changes_requested .act span { color: var(--ask); font-weight: 600; }
.reply { display: grid; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--rule); }
.reply .btn { justify-self: end; }

/* Action strip pinned to the foot of the claim: decide, or record payment */
.action { position: sticky; bottom: 16px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 14px 16px; border-radius: var(--r-lg); background: var(--sheet); border: 1px solid var(--rule-2); box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 12px 32px -12px rgba(16,24,40,.25); }
.action textarea { min-height: 44px; height: 44px; }
.action .btns { display: flex; gap: 8px; }
.action .err { grid-column: 1 / -1; }
.action.pay { grid-template-columns: minmax(0, 1fr) 170px auto; }

/* Approver in-tray: claims on the left, the open claim on the right */
.tray { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.tray-list { position: sticky; top: 20px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; }
.tray-tools { padding: 12px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.tray-tools .search { min-width: 0; }
.tray-rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.tray-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--rule); transition: background-color 150ms var(--ease); }
.tray-row[aria-current="true"] { background: var(--biro-wash); box-shadow: inset 3px 0 0 var(--biro); }
.tray-row b { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-row small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-row .amt { text-align: right; font-weight: 700; font-size: 14px; }
.tray-row .late { color: var(--ask); font-weight: 600; }
.tray-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.tray-detail .doc { grid-template-columns: minmax(0, 1fr) 300px; }

/* Payments: each approved claim is a row with its own pay form */
.payrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px minmax(0, 420px); gap: 16px; align-items: center; padding: 14px 24px; }
.payrow + .payrow { border-top: 1px solid var(--rule); }
.payrow b { display: block; font-weight: 600; }
.payrow small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.payrow .amt { text-align: right; font-weight: 700; }
.payrow form { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 8px; }
.payrow form .input { height: 40px; }

/* People and roles */
table.people { width: 100%; border-collapse: collapse; }
.people th { padding: 12px 24px; text-align: left; color: var(--muted); font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--rule); }
.people td { padding: 12px 24px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.people tr:last-child td { border-bottom: 0; }
.people .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.people .who b { display: block; font-weight: 600; }
.people .who small { display: block; color: var(--muted); font-size: 13px; }
.people form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: var(--r); font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; transition: border-color 150ms var(--ease), background-color 150ms var(--ease), color 150ms var(--ease); }
.toggle input { accent-color: var(--biro); margin: 0; }
.toggle:has(input:checked) { border-color: var(--biro); background: var(--biro-wash); color: var(--biro-dark); }
.toggle.locked { opacity: .7; cursor: default; }
.legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.legend div { padding: 16px 20px; }
.legend b { display: block; font-weight: 700; margin-bottom: 2px; }
.legend p { color: var(--muted); font-size: 14px; }

/* Help requests */
.notes { list-style: none; margin: 0; padding: 0; }
.notes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; padding: 18px 24px; }
.notes li + li { border-top: 1px solid var(--rule); }
.notes .from { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--muted); }
.notes .from b { color: var(--ink); font-size: 15px; }
.notes .msg { grid-column: 1; margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; max-width: 72ch; }
.notes form { grid-row: 1 / 3; grid-column: 2; align-self: start; }

.help-wrap { max-width: 620px; }
.sent { text-align: center; padding: 40px 24px; }
.sent > svg { margin: 0 auto 12px; color: var(--ok); }
.sent h2 { font-size: 20px; font-weight: 700; }
.sent p { margin-top: 6px; color: var(--muted); }

/* Toast */
.toast { position: fixed; z-index: 40; left: 50%; bottom: 24px; translate: -50% 0; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--r-lg); background: var(--ink); color: #fff; font-weight: 500; box-shadow: 0 12px 32px -12px rgba(16,24,40,.4); animation: toast-in 240ms var(--ease); transition: opacity 160ms ease-in, translate 160ms ease-in; }
.toast.is-error { background: var(--no); }
.toast.is-gone { opacity: 0; translate: -50% 8px; }
.toast svg { flex-shrink: 0; }

/* Sign in and public help: a single sheet on the desk */
.single { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.single > .sheet { width: 100%; max-width: 440px; padding: 32px; }
.single > .sheet.wide { max-width: 560px; }
.single .mark { margin-bottom: 28px; }
.single h1 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
.single h1 + p { margin-top: 6px; color: var(--muted); }
.single .kc { margin-top: 24px; }
.single .kc img { width: 20px; height: 20px; border-radius: 4px; background: #fff; padding: 2px; }
.single .foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.alert { margin-top: 20px; padding: 12px 14px; border-radius: var(--r); background: var(--no-wash); color: var(--no); font-size: 14px; }
.alert p { margin: 0; color: inherit; }
.alert p + p { margin-top: 2px; opacity: .85; }

.error-page { max-width: 460px; margin: 80px auto; text-align: center; padding: 0 24px; }
.error-page b { display: block; color: var(--muted); font-weight: 600; }
.error-page h1 { margin-top: 4px; font-size: 24px; line-height: 32px; font-weight: 700; }
.error-page p { margin: 8px 0 24px; color: var(--muted); }
.dev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); }
.dev-row .who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.dev-row .who b { display: block; font-weight: 600; font-size: 14px; }
.dev-row .who small { display: block; color: var(--muted); font-size: 13px; }
.dev-list { max-height: 60vh; overflow-y: auto; margin-top: 16px; border: 1px solid var(--rule); border-radius: var(--r-lg); }

@keyframes enter { from { opacity: 0; transform: translateY(4px); } }
@keyframes toast-in { from { opacity: 0; translate: -50% 12px; } }
.page > .title-row, .page > .back { animation: enter 220ms var(--ease) both; }

@media (max-width: 1100px) {
  .doc, .tray-detail .doc { grid-template-columns: 1fr; }
  .viewer { position: static; grid-row: 1; }
  .viewer-main { aspect-ratio: 4 / 3; }
  .claim-form { grid-template-columns: 1fr; }
  .receipt-panel { position: static; }
  .drop { min-height: 150px; }
  .payrow { grid-template-columns: 44px minmax(0, 1fr) 110px; }
  .payrow form { grid-column: 1 / -1; }
  .entry.with-person { grid-template-columns: 44px minmax(0, 1fr) 200px 110px; }
  .entry.with-person .person { display: none; }
}
@media (max-width: 900px) {
  .tray { grid-template-columns: 1fr; }
  .tray-list { position: static; max-height: none; }
  .tray.has-open .tray-list { display: none; }
  .tray:not(.has-open) .tray-detail { display: none; }
  .legend { grid-template-columns: 1fr; gap: 10px; }
  .mast-in { flex-wrap: wrap; padding-top: 10px; gap: 0 16px; }
  .sections { order: 3; width: 100%; height: 44px; margin: 0 -24px; padding: 0 24px; border-top: 1px solid var(--rule); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .mast-in { padding: 10px 16px 0; }
  .sections { margin: 0 -16px; padding: 0 16px; }
  .mark span, .me-name { display: none; }
  .mast .btn-new span { display: none; }
  .mast .btn-new { padding-inline: 10px; }
  .page { padding: 20px 16px 120px; }
  .title-row h1 { font-size: 26px; line-height: 32px; }
  .position { padding: 14px 16px; gap: 6px 24px; }
  .position dd { font-size: 18px; line-height: 26px; }
  .sheet-h, .pad, .feed, .reply, .send, .items-foot, .claimant, .book-month, .payrow, .notes li { padding-inline: 16px; }
  .entry, .entry.with-person { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; }
  .entry .when { display: none; }
  .entry .thumb { grid-row: 1 / 3; }
  .entry .status { grid-column: 2; grid-row: 2; justify-self: start; }
  .entry .amt { grid-column: 3; grid-row: 1; }
  .items-h { display: none; }
  .item { grid-template-columns: 1fr 1fr; padding: 14px 16px; border-top: 1px solid var(--rule); }
  .item .i-desc { grid-column: 1 / -1; }
  .item .i-del { justify-self: end; align-self: center; margin: 0; }
  .doc-head { grid-template-columns: 1fr; padding: 18px 16px; }
  .doc-head .amount { grid-row: auto; grid-column: auto; text-align: left; }
  .lines th, .lines td { padding-inline: 16px; }
  .lines .hide-sm { display: none; }
  .signoff { grid-template-columns: 1fr; }
  .signoff > div { padding-inline: 16px; }
  .signoff > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .action, .action.pay { grid-template-columns: 1fr; bottom: 8px; }
  .action .btns { display: grid; grid-template-columns: 1fr 1fr; }
  .action .btn-approve { grid-column: 1 / -1; }
  .payrow form { grid-template-columns: 1fr 1fr; }
  .payrow form .btn { grid-column: 1 / -1; }
  .callout { flex-wrap: wrap; }
  .callout .btn { width: 100%; }
  .people thead { display: none; }
  .people tr { display: grid; padding: 12px 16px; gap: 10px; border-bottom: 1px solid var(--rule); }
  .people td { padding: 0; border: 0; }
  .people form { justify-content: flex-start; }
  .notes form { grid-row: auto; grid-column: 1; }
  .radios { grid-template-columns: 1fr; }
  .single > .sheet { padding: 24px; }
  .search { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  @view-transition { navigation: none; }
}

/* ───────────── Additions and the responsive system ─────────────
   Breakpoints: desktop > 1100 · laptop and landscape tablet 901-1100 · portrait tablet 721-900 · phone ≤ 720.
   Everything below is authoritative and sits after the earlier blocks on purpose. */

[hidden] { display: none !important; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; }
.doc-head .h1-like { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.callout > div > strong + * { margin-top: 2px; }
.signoff .sig { white-space: normal; overflow-wrap: anywhere; }
.entry .status { justify-self: start; }
.show-sm { display: none; }

/* Fixed header */
:root { --mast-h: 57px; --tabbar-h: 0px; }
.mast { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.2) blur(6px); }
.receipt-panel, .viewer, .tray-list { top: calc(var(--mast-h) + 20px); }
.tray-list { max-height: calc(100vh - var(--mast-h) - 40px); }
html { scroll-padding-top: calc(var(--mast-h) + 16px); }

/* Admin sub-sections */
.subnav { display: flex; gap: 4px; margin-bottom: 20px; padding: 4px; border-radius: var(--r-lg); background: var(--sheet); border: 1px solid var(--rule); width: fit-content; max-width: 100%; overflow-x: auto; }
.subnav a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r); color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.subnav a[aria-current="page"] { background: var(--biro-wash); color: var(--biro-dark); }

/* Phone tab bar (shown only on phones, only when there is more than one section) */
.tabbar { display: none; }

/* "Other" category: the detail field appears only when Other is picked. Pure CSS, works without JS. */
.item .i-other { display: none; grid-column: 2 / 4; grid-row: 2; }
.item:has(select option[value="Other"]:checked) .i-other { display: grid; }

/* Decision and payment strip */
.action { grid-template-columns: 1fr; align-items: stretch; }
.action .btns { justify-content: flex-end; flex-wrap: wrap; }
.action.pay { grid-template-columns: minmax(0, 1fr) 160px; }
.action.pay .btn { grid-column: 1 / -1; justify-self: end; }

/* Receipt viewer: neutral mat so paper receipts read clearly, height capped so it never swallows the screen */
.viewer-main { background: #d9dce2; }
.viewer-main .pdf { color: var(--ink); }

/* In-tray */
.tray { grid-template-columns: 300px minmax(0, 1fr); }
.tray-tools .filter a { padding: 0 6px; font-size: 13px; }
.tray-tools .filter a:not([aria-current="page"]) span { display: none; }

/* Ledger rows: status column sizes to its label */
.entry { grid-template-columns: 44px 64px minmax(0, 1fr) auto 110px; }
.entry.with-person { grid-template-columns: 44px minmax(0, .8fr) minmax(0, 1fr) auto 110px; }

@media (max-width: 1360px) { .mark span { display: none; } .sections { gap: 16px; } }

/* Laptop and landscape tablet */
@media (max-width: 1100px) {
  .doc { grid-template-columns: minmax(0, 1fr) 300px; }
  .doc > .viewer { position: sticky; grid-row: auto; }
  .doc .viewer-main { aspect-ratio: 3 / 4; }
  .tray { grid-template-columns: 280px minmax(0, 1fr); }
  .tray-detail .doc { grid-template-columns: 1fr; }
  .tray-detail .viewer { position: static; grid-row: 1; }
  .tray-detail .viewer-main { aspect-ratio: auto; height: 340px; }
  .claim-form { grid-template-columns: 1fr; }
  .receipt-panel { position: static; }
  .drop { min-height: 120px; }
  .picked { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .entry.with-person .person { display: block; }
  .people thead { display: none; }
  .people tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 14px 24px; border-bottom: 1px solid var(--rule); }
  .people td { padding: 0; border: 0; }
  .people td:nth-child(2) { grid-row: 2; grid-column: 1; padding-left: 48px; font-size: 14px; }
  .people td:nth-child(3) { grid-row: 1 / 3; grid-column: 2; }
  .legend { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* Portrait tablet */
@media (max-width: 900px) {
  :root { --mast-h: 101px; }
  .doc, .tray-detail .doc { grid-template-columns: 1fr; }
  .doc > .viewer, .tray-detail .viewer { position: static; grid-row: 1; }
  .doc .viewer-main, .tray-detail .viewer-main { aspect-ratio: auto; height: 360px; }
  .tray { grid-template-columns: 1fr; }
  .tray-list { position: static; max-height: none; }
  .tray.has-open .tray-list { display: none; }
  .tray:not(.has-open) .tray-detail { display: none; }
  .tray-tools .filter a:not([aria-current="page"]) span { display: inline; }
  .entry.with-person .person { display: none; }
  .entry.with-person { grid-template-columns: 44px minmax(0, 1fr) auto 100px; }
  .legend { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 720px) {
  :root { --mast-h: 57px; --tabbar-h: 64px; }
  .mast-in { flex-wrap: nowrap; padding: 0 12px 0 16px; min-height: 56px; gap: 8px; }
  .mast .sections { display: none; }
  .mast-end { gap: 4px; }
  .me .avatar { display: none; }
  .page.has-tabbar { padding-bottom: calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)); }
  .has-tabbar ~ .toast { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }

  .tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: saturate(1.2) blur(6px); border-top: 1px solid var(--rule); }
  .tabbar a { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 4px 2px; border-radius: var(--r); color: var(--muted); font-size: 11px; line-height: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 150ms var(--ease); }
  .tabbar a[aria-current="page"] { color: var(--biro); }
  .tabbar .tb-ico { position: relative; display: grid; place-items: center; width: 48px; height: 28px; border-radius: 14px; transition: background-color 150ms var(--ease); }
  .tabbar a[aria-current="page"] .tb-ico { background: var(--biro-wash); }
  .tabbar .count { position: absolute; top: -4px; right: 2px; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; padding: 0 5px; box-shadow: 0 0 0 2px #fff; }

  .doc .viewer-main, .tray-detail .viewer-main { height: 280px; }
  .entry, .entry.with-person { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .item .i-other { grid-column: 1 / -1; grid-row: 2; }
  .lines .show-sm { display: block; margin-top: 2px; }
  .action.pay { grid-template-columns: 1fr; }
  .action.pay .btn { justify-self: stretch; }
  .people tr { grid-template-columns: 1fr; padding: 14px 16px; }
  .people td:nth-child(2) { grid-row: auto; padding-left: 48px; }
  .people td:nth-child(3) { grid-row: auto; grid-column: 1; }
  .people form { justify-content: flex-start; }
  .subnav { width: 100%; }
  .subnav a { flex: 1; justify-content: center; }
}

/* Touch screens: every control at least 44px tall */
@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .btn, .btn-sm { min-height: 44px; }
  .filter a { height: 40px; }
  .toggle { height: 44px; padding: 0 12px; }
  .back { padding: 10px 0; margin: -10px 0 4px; }
  .single .foot a, .notes .from a { display: inline-flex; align-items: center; min-height: 44px; }
  .thumbs button { width: 60px; height: 72px; }
  .picked .pk-x { width: 36px; height: 36px; }
  .subnav a { height: 44px; }
}
@media (pointer: coarse) and (max-width: 720px) { .mast .btn-new { width: 44px; padding: 0; } }
/* Phones: the decision strip sits in the flow so it never covers the claim or the tab bar. */
@media (max-width: 720px) { .action { position: static; box-shadow: none; } }

/* ───────── Receipts per expense line ───────── */
.claim-form { display: block; max-width: 1040px; }
.item { row-gap: 10px; padding-block: 14px; }
.item + .item { border-top: 1px solid var(--rule); }
.item .i-rc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rc { list-style: none; margin: 0; padding: 0; display: contents; }
.rc li { position: relative; animation: enter 200ms var(--ease); }
.rc-img { display: grid; place-items: center; width: 48px; height: 56px; border-radius: 4px; object-fit: cover; object-position: top; background: var(--tint); box-shadow: 0 0 0 1px rgba(0,0,0,.12); font-size: 11px; font-weight: 700; color: var(--muted); }
.rc-x { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; padding: 0; background: var(--ink); color: #fff; cursor: pointer; }
.rc-add { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; border: 1.5px dashed var(--rule-2); border-radius: var(--r); color: var(--biro); font-weight: 600; font-size: 14px; cursor: pointer; transition: border-color 150ms var(--ease), background-color 150ms var(--ease); }
.rc-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rc-add:focus-within, .rc-add.is-over { border-color: var(--biro); background: var(--biro-wash); }
.item:has(.err) .rc:empty + .rc-add { border-color: var(--no); color: var(--no); }
.rc-note { color: var(--no); font-size: 13px; }

.send { border-top: 1px solid var(--rule); align-items: flex-end; }
.send-actions { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; justify-content: flex-end; flex: 1; }
.send-actions .more { flex: 1; min-width: 240px; max-width: 460px; }
.send-actions .more summary { min-height: 48px; }
.send-actions .more[open] summary { margin-bottom: 8px; min-height: 0; }

/* Receipt beside each line on the claim */
.rc-cell { white-space: nowrap; }
.rc-mini { width: 32px; height: 38px; padding: 0; margin-right: 4px; border-radius: 3px; overflow: hidden; border: 1px solid var(--rule-2); background: var(--tint); cursor: pointer; vertical-align: middle; font-size: 9px; font-weight: 700; color: var(--muted); }
.rc-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rc-mini[aria-pressed="true"] { border-color: var(--biro); box-shadow: 0 0 0 1px var(--biro); }

@media (hover: hover) and (pointer: fine) {
  .rc-add:hover { border-color: var(--biro); background: var(--biro-wash); }
  .rc-mini:hover { border-color: var(--faint); }
}
@media (max-width: 720px) {
  .item { padding: 16px; }
  .rc-add { flex: 1; justify-content: center; height: 56px; }
  .send { flex-direction: column; align-items: stretch; }
  .send-actions { flex-direction: column; align-items: stretch; }
  .send-actions .more { max-width: none; }
  .send-actions .btn { width: 100%; }
}
@media (pointer: coarse) {
  .rc-x { width: 30px; height: 30px; top: -10px; right: -10px; }
  .rc-mini { width: 40px; height: 48px; }
}

/* Note disclosure: the same link cancels it once open */
.more .if-open, .more[open] .if-closed { display: none; }
.more[open] .if-open, .more .if-closed { display: inline-flex; align-items: center; gap: 6px; }
.more[open] summary { color: var(--muted); }

/* ───────── Overflow fixes ─────────
   The viewer caption is long ("Line 1: Deposit for…"). Grid and flex items default to min-width:auto,
   so the caption pushed the viewer past its column. Let them shrink and truncate instead. */
.doc > *, .tray-detail, .doc-main, .viewer { min-width: 0; }
.viewer-cap > span { min-width: 0; }
.viewer-cap > span:last-child { flex-shrink: 0; }
.doc-head > * { min-width: 0; }

/* Phones: each expense line becomes a small card, receipt underneath, so the table never forces the page wider. */
@media (max-width: 720px) {
  table.lines, .lines tbody, .lines tfoot { display: block; }
  .lines thead { display: none; }
  .lines tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-top: 1px solid var(--rule); }
  .lines tbody td { padding: 0; border: 0; }
  .lines tbody td.d { grid-column: 1; grid-row: 1; font-size: 13px; }
  .lines tbody td:nth-child(2) { grid-column: 1; grid-row: 2; overflow-wrap: anywhere; }
  .lines tbody td.r { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .lines tbody td.rc-cell { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; white-space: normal; }
  .lines tbody td.rc-cell .muted { font-size: 13px; }
  .lines tfoot tr { display: flex; justify-content: space-between; padding: 14px 16px; border-top: 2px solid var(--ink); }
  .lines tfoot td { padding: 0; border: 0; }
  .lines tfoot td:empty, .lines tfoot td.hide-sm { display: none; }
  .doc-head .meta { gap: 6px 10px; }
}
.viewer { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) { .doc-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .doc, .tray-detail .doc, .tray { grid-template-columns: minmax(0, 1fr); } }
.doc-main, .stack { grid-template-columns: minmax(0, 1fr); }
.action { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  .action .btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action .btn { white-space: normal; padding-inline: 10px; }
}
/* In-tray: list + claim + receipt is too many columns below 1400px; the receipt moves above the claim instead. */
@media (max-width: 1400px) {
  .tray-detail .doc { grid-template-columns: minmax(0, 1fr); }
  .tray-detail .viewer { position: static; grid-row: 1; }
  .tray-detail .viewer-main { aspect-ratio: auto; height: 340px; }
}
/* Below laptop width the decision/payment strip sits in the flow so it never covers the claim. */
@media (max-width: 1100px) { .action { position: static; box-shadow: none; } }

/* Notifications admin */
.notify-status { display: grid; gap: 16px; }
.ns-line { display: flex; align-items: center; gap: 14px; }
.ns-line b { display: block; font-weight: 700; }
.ns-line .muted { font-size: 14px; }
.ns-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-steps { margin: 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 4px; }