/* ===========================================================================
   Ledger — the MTD receipts design system
   Warm paper, an ink base, a Newsreader serif for anything that matters
   (headings & money), and terracotta reserved for the one action per screen.
   Status badges are outlined pills throughout.
   =========================================================================== */
:root {
  --pp: #f3ecdd;   /* paper — app background / warm surfaces */
  --sf: #fffdf7;   /* surface — cards, fields */
  --ink: #2a251d;  /* primary text */
  --ink2: #4a4234; /* secondary text */
  --mut: #8f8570;  /* muted / meta */
  --ln: #e6ddc9;   /* hairlines */
  --acc: #b5502f;  /* terracotta — the one action */
  --acc2: #9a3f22; /* terracotta, pressed / links */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* legacy aliases kept so nothing referencing the old names breaks */
  --brand: var(--acc);
  --brand-light: #f6e7de;
  --muted: var(--mut);
  --line: var(--ln);
  --bg: var(--pp);
  --warn: #946512;
  --err: #932020; /* deep red — errors/destructive; keep distinct from --acc */
  --ok: #2f6b46;
}
* { box-sizing: border-box; }
/* The HTML `hidden` attribute must always win: several components (the photo
   preview, the splash, the no-JS submit fallback) rely on it, and an author
   `display:` rule would otherwise override the UA `[hidden]{display:none}`. */
[hidden] { display: none !important; }
body {
  margin: 0; background: #e4dcc9; color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: 90px;
}

/* On phones the app itself sits on paper, edge to edge. The tinted body
   colour only shows through as a hairline around the max-width column. */
main { max-width: 480px; margin: 0 auto; background: var(--pp); min-height: 100vh; }
main { padding: 4px 18px 24px; }

/* ---- serif display ---- */
h1 { font: 600 27px/1.05 var(--serif); letter-spacing: -.02em; margin: 10px 0 3px; }
h2 { font: 600 17px var(--serif); margin: 0 0 10px; }
.eyebrow {
  font: 600 10px ui-monospace, Menlo, monospace; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mut);
}
.rule { height: 2px; width: 40px; background: var(--acc); border-radius: 2px; margin: 8px 0 16px; }
.muted { color: var(--mut); font-size: 14px; }
.money { font: 600 15px var(--serif); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }

/* ---- top header (client app) ---- */
.topbar { background: var(--pp); border-bottom: 1px solid var(--ln); }
.topbar-inner {
  max-width: 480px; margin: 0 auto; padding: 12px 18px 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.brand { color: var(--ink); text-decoration: none; font: 600 20px/1 var(--serif); letter-spacing: -.01em; }
.topbar nav { display: flex; gap: 14px; align-items: center; }
.topbar nav a { color: var(--acc2); text-decoration: none; font-size: 14px; font-weight: 600; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 600 14px var(--serif);
  text-decoration: none; flex: none;
}

/* ---- auth screens (login, invite, 2FA) ---- */
.auth { max-width: 360px; margin: 0 auto; min-height: 74vh; padding: 36px 4px 24px; display: flex; flex-direction: column; }
.auth-brand { text-align: center; margin-bottom: 4px; }
.wordmark { font: 600 26px/1 var(--serif); color: var(--ink); letter-spacing: -.01em; }
.wordmark-sub { display: block; margin-top: 4px; font: italic 400 12px var(--serif); color: var(--mut); letter-spacing: .02em; }
.auth .rule { margin: 20px auto 28px; }
.auth-foot { margin-top: auto; padding-top: 24px; text-align: center; font: 12.5px system-ui; color: var(--mut); }
.auth-foot b { color: var(--ink2); }
.auth-icon {
  width: 56px; height: 56px; border-radius: 50%; align-self: center; margin-bottom: 20px;
  border: 2px solid #e6b2a6; background: #f9ece7; color: var(--acc2);
  display: flex; align-items: center; justify-content: center; font: 600 26px var(--serif);
}
.qr { align-self: center; width: 168px; height: 168px; background: var(--sf); border: 1px solid var(--ln); border-radius: 14px; padding: 12px; margin-bottom: 8px; }
.qr img { width: 100%; height: 100%; display: block; }
.manual-key { font-family: ui-monospace, Menlo, monospace; color: var(--ink2); letter-spacing: .04em; }

/* ---- cards & flashes ---- */
.card { background: var(--sf); border: 1px solid var(--ln); border-radius: 15px; }
.card.pad { padding: 16px; }
.flash { padding: 11px 14px; border-radius: 11px; margin-bottom: 12px; font-size: 14px; border: 1px solid; }
.flash.success { background: #e7efe6; color: var(--ok); border-color: #b6cfba; }
.flash.error   { background: #f6e2dd; color: var(--err); border-color: #e6b2a6; }
.flash.info    { background: #faefd6; color: var(--warn); border-color: #e8ce93; }

/* ---- status badges: outlined pill + leading dot ---- */
.badge, .b {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 600 11px/1 system-ui; padding: 4px 9px 4px 8px; border-radius: 999px; border: 1px solid;
}
.badge::before, .b::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.pending,      .b-pr { background: #efe9dd; color: #6f6551; border-color: #ddd2ba; }
.badge.needs_review, .b-nr { background: #faefd6; color: #946512; border-color: #e8ce93; }
.badge.awaiting_payment     { background: #faefd6; color: #946512; border-color: #e8ce93; }
.badge.extracted,    .b-ex { background: #f6e7de; color: #b5502f; border-color: #e6bca6; }
.badge.confirmed,    .b-cf { background: #e7efe6; color: #2f6b46; border-color: #b6cfba; }
.badge.failed,       .b-fl { background: #f6e2dd; color: #a5391f; border-color: #e6b2a6; }

/* ---- receipt feed rows ---- */
.mhead { font: italic 500 13px var(--serif); color: var(--mut); margin: 16px 2px 7px; }
.receipt-row, .rrow {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 15px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--ln);
}
.receipt-row:last-child, .rrow:last-child { border-bottom: 0; }
.rv { font: 500 14.5px system-ui; color: var(--ink); }
.receipt-row .meta, .rm { font: 12px/1.3 system-ui; color: var(--mut); font-variant-numeric: tabular-nums; margin-top: 2px; }
.amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.stack-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* ---- quarter hero strip ---- */
.qtr { background: var(--ink); color: #f3ecdd; border-radius: 16px; padding: 15px 17px 14px; margin-bottom: 16px; }
.qtr-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 10px; }
.qtr-top .e { font: 600 9.5px ui-monospace, Menlo, monospace; letter-spacing: .15em; color: #b6a98c; }
.qtr-when { font: italic 500 14px var(--serif); color: #e9c9ba; }
.qtr-figs { display: flex; gap: 6px; }
.qf { flex: 1; }
.qf-n { font: 600 20px var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fff; }
.qf-n small { font-size: 13px; }
.qf-l { font: 600 9px ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: #9a8f77; margin-top: 3px; }
.qtr-foot { margin-top: 13px; padding-top: 11px; border-top: 1px solid #453e30; font: 12px/1.3 system-ui; color: #c3b89f; }
.qtr-foot b { color: #e9c9ba; }
/* quarter prev/next arrows in the dark hero — round, bordered tap targets so
   switching date ranges is discoverable */
.qnav, .qnav-spacer { width: 32px; height: 32px; flex: none; }
.qnav {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); border: 1px solid rgba(243,236,221,.35);
  border-radius: 50%; color: #f3ecdd; text-decoration: none; font: 600 18px/1 system-ui;
}
.qnav:hover, .qnav:active { background: rgba(255,255,255,.26); }

/* ---- review nudge card ---- */
.rev {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--sf);
  border: 1px solid #e8ce93; border-left: 3px solid var(--acc); border-radius: 13px;
  margin-bottom: 9px; text-decoration: none; color: inherit;
}
.rev-th {
  width: 44px; height: 52px; border-radius: 7px; flex: none; border: 1px solid var(--ln);
  background: repeating-linear-gradient(135deg, #efe6d4, #efe6d4 5px, #e7dcc4 5px, #e7dcc4 10px);
  background-size: cover; background-position: center;
}
.rev-arrow { margin-left: auto; color: var(--acc); font: 600 18px system-ui; }

/* ---- segmented control ---- */
.seg { display: flex; gap: 3px; background: #e9e0cd; border-radius: 11px; padding: 3px; margin-bottom: 14px; }
.seg a { flex: 1; text-align: center; font: 600 12.5px system-ui; padding: 8px 4px; border-radius: 8px; color: var(--ink2); text-decoration: none; }
.seg a.on { background: var(--sf); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ---- forms ---- */
form p { margin: 0 0 14px; }
label, .lab { display: block; font: 600 12px system-ui; color: var(--ink2); margin: 0 0 5px; }
input, select, textarea, .fld {
  width: 100%; padding: 12px 13px; font: 15px system-ui; color: var(--ink);
  border: 1.5px solid var(--ln); border-radius: 11px; background: var(--sf);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: var(--acc); }
input[type=checkbox] { width: auto; }
/* Fixed height: with appearance:none, iOS WebKit collapses an *empty* date
   input (no value = no content height), leaving it shorter than a filled one. */
input[type=date] { -webkit-appearance: none; appearance: none; min-width: 0; height: calc(1.2em + 27px); line-height: 1.2; font-family: inherit; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* checkbox rows (VAT registered, calendar quarters) */
.check { margin: 0 0 12px; }
.check label { display: inline-flex; align-items: center; gap: 8px; font: 600 13px system-ui; color: var(--ink2); }
.check input[type=checkbox] { width: auto; margin: 0; }
.errorlist { color: var(--err); font-size: 13px; margin: 4px 0; padding-left: 18px; }

/* password-strength meter */
.pw-meter { display: flex; gap: 4px; margin: 6px 0 14px; }
.pw-meter span { flex: 1; height: 4px; border-radius: 2px; background: var(--ln); }
.pw-meter span.on { background: var(--acc); }

/* ---- buttons ---- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--acc); color: #fff; border: 0; border-radius: 12px;
  padding: 14px 18px; font: 600 15px system-ui; cursor: pointer; text-decoration: none; text-align: center;
}
button:disabled { opacity: .6; cursor: default; }
.btn.secondary, .btn-2 { background: var(--sf); color: var(--acc2); border: 1.5px solid #e0b9a8; }
.btn.ghost, .btn-g { background: #eee7d7; color: var(--ink2); border: 1px solid var(--ln); }
/* Destructive actions are outlined red — deliberately unlike the solid
   terracotta primary, so Delete never masquerades as Confirm. */
.btn.danger { background: var(--sf); color: var(--err); border: 1.5px solid #d9a095; }
.btn.block, button.block { width: 100%; }
button.linklike { background: none; border: 0; padding: 0; color: var(--acc2); font: 600 14px system-ui; cursor: pointer; }
.inline { display: inline; }
.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.actions form, .actions .btn, .actions button { flex: 1; }

/* ---- sticky bottom bar (capture / save-confirm) ---- */
.capbar {
  position: sticky; bottom: 0; margin: 16px -18px 0; padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: var(--pp); border-top: 1px solid var(--ln); display: flex; gap: 9px;
}
.capbar .btn { flex: 1; }

/* ---- FAB (kept as a global add affordance; suppressed where a capbar exists) ---- */
.fab {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; background: var(--acc); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  text-decoration: none; box-shadow: 0 6px 18px -4px rgba(60,45,25,.5);
}

/* ===========================================================================
   Loading mark & cold-start splash (design L1)
   A torn-receipt glyph with a terracotta scan bar sweeping it — "reading".
   =========================================================================== */
@keyframes lg-scan   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(84px); } }
@keyframes lg-bar    { 0% { transform: translateX(-46px); } 100% { transform: translateX(140px); } }
@keyframes lg-breathe{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes lg-fadeup { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }

.rmark { display: block; overflow: visible; width: 118px; height: auto; }
.rmark-scan { animation: lg-scan 1.9s ease-in-out infinite; }

.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(#f5efe1, #efe6d2); transition: opacity .5s ease;
}
.splash[hidden] { display: none; }           /* hidden by default; JS shows it on cold start only */
.splash.hide { opacity: 0; pointer-events: none; }
.splash-mark { animation: lg-breathe 4s ease-in-out infinite; }
.splash-wordmark { text-align: center; margin-top: 26px; animation: lg-fadeup .6s ease both; }
.splash-wordmark .wm { font: 600 27px/1 var(--serif); color: var(--ink); letter-spacing: -.02em; }
.splash-wordmark .tag { font: 600 9.5px ui-monospace, Menlo, monospace; letter-spacing: .22em; color: var(--mut); margin-top: 8px; }
.splash-progress { width: 132px; height: 4px; border-radius: 2px; background: #e2d7bd; overflow: hidden; margin-top: 24px; }
.splash-progress i { display: block; width: 44px; height: 100%; border-radius: 2px; background: var(--acc); animation: lg-bar 1.4s ease-in-out infinite; }
.splash-by { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font: italic 400 12px var(--serif); color: var(--mut); }

/* the mark reused inline as a "reading" indicator on the processing state */
.mark-processing { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 0 6px; text-align: center; }
.mark-processing .rmark { width: 72px; }

@media (prefers-reduced-motion: reduce) {
  .rmark-scan, .splash-mark, .splash-wordmark, .splash-progress i { animation: none; }
}

/* ---- receipt detail ---- */
.receipt-img { width: 100%; border-radius: 13px; border: 1px solid var(--ln); display: block; }
.receipt-hero {
  position: relative; border-radius: 13px; overflow: hidden; border: 1px solid var(--ln);
}
.receipt-hero .zoom {
  position: absolute; right: 9px; bottom: 9px; background: rgba(42,37,29,.82); color: #f3ecdd;
  font: 600 10px system-ui; padding: 5px 9px; border-radius: 8px;
}
/* label column + left-justified value beside it, so long values (the HMRC
   category names especially) get the row's full remaining width and wrap
   instead of being cut off against the right edge */
.frow { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--ln); }
.frow:last-child { border-bottom: 0; }
.fk { flex: 0 0 112px; font: 500 13.5px system-ui; color: var(--ink2); }
.fv { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 600 15px var(--serif); font-variant-numeric: tabular-nums; color: var(--ink); }
.receipt-delete { text-align: center; margin: 18px 0 4px; }
.receipt-delete button { color: var(--err); font: 600 13px system-ui; }
.frow.total { background: #faf5ea; }
.frow.total .fk { font-weight: 600; color: var(--ink); }
dl.review { margin: 0; }
dl.review dt, dl.review dd { display: none; } /* superseded by .frow rows */

/* receipt detail header: vendor + status side by side */
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.detail-head h1 { margin: 0; font-size: 23px; }
/* editable figure rows — inputs read as tap-to-edit values, not boxy fields */
.frow-form p { margin: 0; }
.frow-form .fv { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.frow-form input, .frow-form select {
  flex: 1; width: auto; min-width: 0; text-align: left; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  font: 600 15px var(--serif); color: var(--ink);
}
.frow-form input:focus, .frow-form select:focus {
  outline: 0; border-color: var(--acc); background: var(--sf);
}
/* £ prefix on editable money fields; inputs kept narrow so it sits by the value */
.frow-form .cur { font: 600 15px var(--serif); color: var(--mut); }
.frow-form input[type=number] { flex: 0 1 96px; }
.frow-form input[type=checkbox] { flex: 0 0 auto; width: auto; }
/* category select: the HMRC headings are too long to share a line with the
   label, and a <select> can't wrap its text — stack it full-width instead */
.frow.stack { flex-wrap: wrap; row-gap: 4px; }
.frow.stack .fk { flex-basis: 100%; }
.frow.stack select { font: 500 13px system-ui; padding: 6px 4px; }
/* Restore the native date control (the global appearance:none strips the
   calendar picker, leaving an empty date field looking like static text). */
.frow-form input[type=date] {
  -webkit-appearance: auto; appearance: auto;
  border-color: var(--ln); background: var(--sf); text-align: left; min-width: 150px;
}
.frow-form input[type=date]::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
.frow-form .errorlist { width: 100%; text-align: left; }
/* quarter-hero prev/next arrows (client home + admin client page) */
.qnav { color: #fff; opacity: .55; text-decoration: none; font-size: 22px; line-height: 1; padding: 0 6px; }
.qnav:hover { opacity: .9; }
.qnav-spacer { width: 22px; }
.conf-note { display: flex; align-items: center; gap: 8px; margin: 13px 0 6px; flex-wrap: wrap; }
.conf-note .muted { font-size: 12px; }

/* ---- 2FA code boxes ---- */
.code-boxes { display: flex; gap: 7px; justify-content: center; margin: 4px 0 18px; }
.code-boxes input { width: 40px; text-align: center; padding: 14px 0; font: 600 20px var(--serif); }

/* ===========================================================================
   Advisor console — a dense desktop shell: persistent ink sidebar,
   the same serif-and-terracotta language scaled up.
   =========================================================================== */
body.admin { padding-bottom: 0; background: var(--pp); }
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-sidebar {
  width: 220px; flex: 0 0 220px; background: var(--ink); color: #b8ad93;
  display: flex; flex-direction: column; padding: 20px 0;
}
.admin-brand { color: #fff; font: 600 18px var(--serif); padding: 0 22px; }
.admin-practice { color: #9a8f77; font: italic 400 12px var(--serif); padding: 2px 22px 18px; }
.admin-sidebar nav { display: flex; flex-direction: column; margin-top: 4px; }
.admin-sidebar nav a {
  color: #b8ad93; text-decoration: none; padding: 11px 22px; font: 500 14px system-ui;
  border-left: 3px solid transparent;
}
.admin-sidebar nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-sidebar nav a.on { background: rgba(255,255,255,.06); color: #fff; border-left-color: var(--acc); }
.admin-side-foot { margin-top: auto; padding: 16px 22px 0; border-top: 1px solid #453e30; }
.admin-side-foot .admin-who { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
a.admin-who:hover { color: #fff; text-decoration: underline; }
.admin-side-foot a { color: #9a8f77; text-decoration: none; font-size: 13px; display: block; margin-bottom: 6px; }
.admin-side-foot a:hover { color: #fff; }
.admin-logout { color: #9a8f77; font: 400 13px system-ui; padding: 0; }
.admin-main { flex: 1; max-width: none; margin: 0; padding: 26px 30px; background: var(--pp); min-height: auto; }
.admin-main h1 { font: 600 26px var(--serif); letter-spacing: -.01em; margin: 0 0 3px; }
.admin-main h2 { margin-top: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--sf); border: 1px solid var(--ln); border-radius: 13px; padding: 15px 17px; }
.stat .n { font: 600 30px var(--serif); line-height: 1; letter-spacing: -.02em; }
.stat .l { color: var(--mut); font: 12px system-ui; margin-top: 5px; }
.stat.alert { border-color: #e8ce93; background: #faefd6; }
.stat.alert .n { color: var(--acc2); }

.utable {
  width: 100%; border-collapse: collapse; background: var(--sf);
  border: 1px solid var(--ln); border-radius: 13px; overflow: hidden;
}
.utable th, .utable td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--ln); font: 14px system-ui; vertical-align: middle; }
.utable th { font: 600 10.5px ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.utable td.num, .utable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.utable tbody tr:last-child td { border-bottom: 0; }
.utable tbody tr:hover { background: #faf5ea; }
.utable tbody tr[data-href] { cursor: pointer; }
.utable a.rowlink { text-decoration: none; color: var(--ink); font: 600 14.5px system-ui; }
.utable .sub { font: 12px system-ui; color: var(--mut); }

/* drillable figures: click through to the receipts behind the number.
   They read as plain figures; the hover colour carries the affordance. */
.utable a.drillable { color: inherit; text-decoration: none; }
.utable a.drillable:hover { color: var(--acc2); }
/* expanded P&L items: tinted indented rows whose amount shares the drilled figure's column */
.utable tr.drill-item { background: #faf5ea; cursor: pointer; }
.utable tr.drill-item td { padding-top: 9px; padding-bottom: 9px; }
.utable tr.drill-item td:first-child { padding-left: 28px; }

.panel { background: var(--sf); border: 1px solid var(--ln); border-radius: 15px; padding: 20px 22px; }
.panel h2 { font: 600 17px var(--serif); margin: 0 0 14px; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.page-head .btn { flex: 0 0 auto; width: auto; padding: 11px 18px; }
.admin-two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.admin-main .qtr { color: #f3ecdd; }
.admin-main .qtr-figs { gap: 10px; }

/* filing-readiness dial */
.dial { position: relative; width: 56px; height: 56px; border-radius: 50%; flex: none; }
.dial > span { position: absolute; inset: 6px; background: var(--sf); border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 14px var(--serif); }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; }
.camera-btn { margin-bottom: 0; }
#photo-preview { margin-bottom: 12px; }

@media (max-width: 700px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: auto; flex: none; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 4px 14px; }
  .admin-practice { display: none; }
  .admin-sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; margin-top: 0; }
  .admin-sidebar nav a { padding: 6px 10px; border-left: 0; border-radius: 8px; }
  /* keep Log out / back-to-app reachable: the side foot moves inline, right-aligned */
  .admin-side-foot { margin: 0 0 0 auto; padding: 0; border-top: 0; display: flex; align-items: center; gap: 14px; }
  .admin-side-foot .admin-who { display: none; }
  .admin-side-foot a { margin: 0; }
  .admin-side-foot form { margin: 0; }
  .admin-main { padding: 18px 16px; }
  .admin-two-col { grid-template-columns: 1fr !important; }
}

/* ---- pull-to-refresh (receipts feed) ------------------------------------
   A pill that follows the drag down from the top of the feed; past the
   threshold it arms ("Release to refresh") and reloads on release, picking
   up anything new — e.g. receipts emailed in since the page loaded. */
.ptr {
  position: fixed; left: 50%; top: calc(6px + env(safe-area-inset-top));
  transform: translate(-50%, -58px); z-index: 60;
  display: flex; align-items: center; gap: 8px; padding: 9px 15px;
  border-radius: 999px; background: var(--sf); border: 1px solid var(--ln);
  box-shadow: 0 4px 16px rgba(42,37,29,.14);
  font: 600 12.5px system-ui; color: var(--ink2);
  pointer-events: none; white-space: nowrap;
}
.ptr .arr { color: var(--acc2); font-size: 14px; line-height: 1; transition: transform .18s; }
.ptr.armed .arr { transform: rotate(180deg); }
.ptr.busy .arr { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.busy .arr { animation: none; } }