/* ===========================================================================
   Anchor Run-off LMS — design system
   Deep-navy Momenta sidebar + light, numbers-first workspace.
   =========================================================================== */
/* Momenta fonts, served from our own /static/fonts (the security policy allows nothing outside 'self').
   font-display: swap shows the fallback face at once and switches when the file arrives. */
@font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/tenor-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/libre-franklin-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/libre-franklin-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/libre-franklin-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/libre-franklin-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Momenta brand palette (momentafinance.co.uk): navy #041946, deep navy #011843, gold #956b2d,
     light gold #b69e68, champagne #cbbb93, blue-grey #ecf0f9, off-white #fbfafa, warm grey #dad7d4. */
  --navy-900: #011843;   /* deep navy: sidebar base */
  --navy-800: #07215a;
  --navy-700: #12306e;   /* sidebar hover / current item */
  --navy: #041946;       /* Momenta navy */
  --brand2: #1f4e9c;     /* links and keyboard focus: a blue drawn from the navy, so it is not mistaken for the gold accent */
  --gold: #956b2d;       /* Momenta gold accent */
  --gold-2: #b69e68;     /* light gold: accents on navy */
  --gold-soft: #cbbb93;  /* champagne */

  --bg: #ecf0f9;         /* workspace: blue-grey */
  --card: #ffffff;
  --paper: #fbfafa;      /* off-white */
  --tint: #f6f8fc;       /* faint row / header shading */
  --ink: #0e1c3d;
  --ink-2: #33415c;
  --muted: #566279;      /* 5:1 on white and on the workspace background */
  --line: #dad7d4;       /* warm grey */
  --line-2: #e9e7e4;
  --focus: var(--brand2);
  --focus-dark: #cbbb93; /* keyboard focus on navy */

  /* Green, amber and red mean good, warning and problem - nothing else. */
  --green: #15803d; --green-bg: #e7f4ec;
  --amber: #b45309; --amber-bg: #fbf0dc;
  --red: #b4232a;   --red-bg: #fbe7e8;
  --grey: #4f5b6d;  --grey-bg: #eceff3;

  /* Badge and tag colours that used to be hard-coded further down the file. */
  --info: #1f4e9c;    --info-bg: #e3eaf8;     /* frozen interest, MCA, selected count */
  --purple: #6d3fc0;  --purple-bg: #f0e8fb;   /* recovery loan holding an archive recovery */
  --teal: #0f6b5c;    --teal-bg: #e0f1ed;     /* BBB guarantee claim */
  --orange: #8f5200;  --orange-bg: #fdecd8;   /* part-paid arrears */
  --settled: #2b6343; --settled-bg: #e1f0e6;  /* paid off, balance nil */
  --credit: #1e3a72;  --credit-bg: #dfe9f7;   /* account in credit */
  --gold-ink: #7a5723; --gold-bg: #f6eeda;    /* guarantor tag */
  --note-bg: #fff6d6; --note-line: #f0d67a; --note-ink: #6a4e05; /* review-mode notices */

  --shadow-sm: 0 1px 2px rgba(1,24,67,.06), 0 1px 3px rgba(1,24,67,.05);
  --shadow-md: 0 4px 12px rgba(1,24,67,.10);
  --shadow-lg: 0 16px 48px rgba(1,24,67,.22);
  --scrim: rgba(1,24,67,.45);
  --r: 12px; --r-sm: 9px;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --font-body: "Libre Franklin", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Tenor Sans", "Libre Franklin", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand2); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Tenor Sans has a single weight, so headings are set at 400 (a bold would be a smeared copy of it). */
h1,h2,h3 { margin: 0; font-family: var(--font-head); font-weight: 400; letter-spacing: 0; }
/* Money is set in the body face with lining, equal-width digits so columns line up (B21). Only references
   and IDs (.mono) use the typewriter face; "num mono" on old markup still reads as a figure. */
.num { font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.num.mono { font-family: inherit; }
td.num, th.num { text-align: right; white-space: nowrap; }
.neg { color: var(--red); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.strong { font-weight: 650; }

/* ---- app shell ---------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex: 0 0 232px; background: var(--navy-900);
  color: #cdd8ea; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; color: #fff; font-weight: 700; letter-spacing: .2px; }
.sidebar .brand .mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.sidebar .brand small { display: block; font-weight: 400; font-size: 12px; letter-spacing: 1.5px; color: var(--gold-soft); }
.sidebar .brand { font-family: var(--font-head); font-weight: 400; font-size: 17px; }
/* The menu list scrolls when it is taller than the window; brand and signed-in name stay pinned. */
.sidebar nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sidebar .brand { flex: 0 0 auto; }
.sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #c3cee3; font-weight: 500; }
.sidebar nav a:hover { background: var(--navy-700); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--navy-700); color: #fff; box-shadow: inset 3px 0 0 var(--gold-2); }
/* Menu group headings (Loans, Money in, ...). */
.sidebar .nav-h { margin: 14px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft); }
.sidebar nav a .ic { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.sidebar nav a.active .ic { opacity: 1; }
/* A count of things waiting for someone: gold. Red is kept for something that has FAILED (.bad). */
.navcount { margin-left: auto; background: var(--gold-soft); color: var(--navy-900); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 0 8px; }
.navcount.bad { background: var(--red-bg); color: var(--red); }
/* A count that is information, not a job to do (Release notes) - grey. */
.navcount.neutral { background: rgba(255,255,255,.16); color: #dbe3f2; }
.sidebar .who-role { color: var(--gold-soft); }
.sidebar .spacer { display: none; }
.sidebar .who { flex: 0 0 auto; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #c3cee3; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sidebar .who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .who form { margin: 0; }
.sidebar .who .link { color: var(--gold-soft); background: none; border: none; cursor: pointer; font: inherit; padding: 0; }

.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
/* Generous bottom padding so the last thing on a page is never pressed against the window edge. */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 30px 96px; }
/* The two page widths: the standard 1180px, and .narrow (820px) for forms, single-purpose pages and messages. */
.wrap.narrow { max-width: 820px; }

/* ---- workspace topbar + global account search --------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 30px; background: rgba(251,250,250,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1 1 220px; min-width: 0; max-width: 460px; display: flex; align-items: center; gap: 9px; background: var(--tint); border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; transition: border-color .12s, box-shadow .12s; }
.search:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; background: #fff; }
.search .s-ic { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
.search input { border: none; background: none; margin: 0; padding: 9px 0; font: inherit; font-size: 13px; box-shadow: none; }
.search input:focus, .search input:focus-visible { outline: none; box-shadow: none; }
.search kbd { font: inherit; font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 5px; z-index: 30; max-height: 340px; overflow-y: auto; }
.sr-item { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--ink); }
.sr-item:hover, .sr-item.on { background: var(--line-2); text-decoration: none; }
.sr-ref { font-family: var(--mono); font-size: 12.5px; font-weight: 650; color: var(--navy); }
.sr-bor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-book { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sr-empty { padding: 12px 10px; color: var(--muted); font-size: 13px; }

/* ---- confirm modal ------------------------------------------------------ */
.modal-scrim { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 80; opacity: 0; transition: opacity .16s; }
/* The [hidden] attribute must win over the display:grid above, or this invisible
   full-screen overlay silently swallows every click on the page. */
.modal-scrim[hidden] { display: none !important; }
.modal-scrim.open { opacity: 1; }
.modal { width: 420px; max-width: 92vw; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 22px 22px 18px; transform: translateY(6px); transition: transform .16s; }
.modal-scrim.open .modal { transform: none; }
.modal h3 { font-size: 17px; margin-bottom: 8px; }
.modal p { margin: 0 0 18px; color: var(--ink-2); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---- layout utilities (prefer these over inline styles) ----------------- */
.u-flex { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u-center { display: flex; align-items: center; gap: 8px; }
.u-wrap { flex-wrap: wrap; }
.u-gap-sm { gap: 8px; } .u-gap { gap: 12px; }
.u-mt-0 { margin-top: 0; } .u-mt { margin-top: 12px; } .u-mt-lg { margin-top: 18px; }
.u-mb { margin-bottom: 14px; } .u-mb-lg { margin-bottom: 18px; }

/* ---- daily-collections cards (moved out of the page's inline <style>) ---- */
.collgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 860px){ .collgrid { grid-template-columns: 1fr; } }
.collcard .card-h { align-items: flex-start; }
.upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.upload-row input[type=file] { flex: 1; min-width: 180px; }
.colllinks { display: flex; gap: 8px; margin-top: 12px; }
.failedbox { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.failedbox .label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.failed-details > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.failed-details > summary:hover { color: var(--ink); }

/* ---- generic page header ----------------------------------------------- */
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.pagehead > div:first-child { flex: 1 1 280px; min-width: 0; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inlineform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pagehead h1 { font-size: 22px; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.statuspick { width: auto; margin: 0; padding: 4px 26px 4px 9px; font-size: 12px; font-weight: 600; color: var(--ink-2); border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.statuspick:hover { border-color: var(--gold-soft); }

/* breadcrumb */
.crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.crumb .sep { margin: 0 7px; opacity: .6; }

/* books landing */
.bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 18px; }
.bookcard { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .14s, border-color .14s, transform .14s; color: inherit; }
.bookcard:hover { box-shadow: var(--shadow-md); border-color: var(--gold-soft); transform: translateY(-2px); text-decoration: none; }
.bookcard-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bookcard .bookname { font-size: 17px; font-weight: 700; color: var(--ink); }
.bookcard .chev { color: var(--gold); font-size: 18px; font-weight: 700; }
.bookstats { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 16px 0 14px; }
.bookstats .bookval { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.bookbadges { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-2); min-height: 30px; align-items: center; }
.pagehead .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ---- cards -------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.card .card-h { padding: 14px 18px; border-bottom: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.card .card-h h2, .card .card-h h3 { font-size: 14px; }
.card .card-b { padding: 18px; overflow-x: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px){ .grid2,.grid3 { grid-template-columns: 1fr; } }

/* ---- stat tiles --------------------------------------------------------- */
/* auto-fit: three tiles share the row evenly instead of wrapping two-and-one. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; box-shadow: var(--shadow-sm); }
a.tile-link { display: block; text-decoration: none; color: inherit; transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease; }
a.tile-link:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); border-color: var(--navy); }
.tile .k { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.tile .v { font-size: 22px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.tile.accent { background: linear-gradient(160deg, var(--navy), var(--navy-700)); border-color: var(--navy); color: #fff; }
.tile.accent .k { color: var(--gold-soft); }
.tile .sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.tile.accent .sub { color: #dbe3f2; }

/* ---- definition facts --------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 26px; }
.facts > div { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.facts .label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 2px; }
.sup { vertical-align: super; font-size: 12px; }

/* ---- badges ------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; text-transform: none; letter-spacing: .2px; padding: 3px 9px; border-radius: 999px; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.performing { background: var(--green-bg); color: var(--green); }
.badge.arrears { background: var(--amber-bg); color: var(--amber); }
.badge.default { background: var(--red-bg); color: var(--red); }
.badge.closed { background: var(--grey-bg); color: var(--grey); }
.badge.frozen { background: var(--info-bg); color: var(--info); }
.badge.settled { background: var(--settled-bg); color: var(--settled); } /* balance ≤ £0 on an open account */
.badge.atrisk { background: var(--red-bg); color: var(--red); }
.badge.b-mca { background: var(--info-bg); color: var(--info); }
.badge.b-recovery { background: var(--purple-bg); color: var(--purple); } /* shadow loan holding a legacy-archive recovery */
.badge.b-partpaid { background: var(--orange-bg); color: var(--orange); } /* arrears of less than one whole instalment (Daniela #30) */
.badge.b-bbb { background: var(--teal-bg); color: var(--teal); } /* BBB guarantee claimed, with the amount owed back to BBB (Caryn #38) */
/* neutral, dot-less tag for non-status labels (MCA, repaid/written-off) */
.tag { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--grey-bg); color: var(--grey); }

/* ---- buttons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 9px; padding: 8px 13px; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; }
.btn:hover { background: var(--tint); border-color: var(--gold-soft); text-decoration: none; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.primary:hover { background: var(--navy-700); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.gold:hover { background: var(--gold-ink); }
.btn.danger { color: var(--red); border-color: var(--red); background: #fff; }
.btn.danger:hover { background: var(--red-bg); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.linkbtn { border: none; background: none; color: var(--brand2); cursor: pointer; font: inherit; padding: 0; }
.linkbtn.danger { color: var(--red); }
.iconx { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px; border-radius: 6px; }
.iconx:hover { background: var(--red-bg); color: var(--red); }

.actionbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }

/* ---- tabs --------------------------------------------------------------- */
/* overflow-y:hidden - overflow-x:auto alone makes y compute to auto too, and the 1px underline overlap
   on the buttons then produced a tiny vertical scroller at the end of every tab strip. */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tabs button { font: inherit; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 11px 15px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--navy); border-bottom-color: var(--gold); }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* count pill on a collections tab (items needing action) */
.tabcount { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--red-bg); color: var(--red); vertical-align: middle; }

/* ---- daily collections (per-book tab panel) ---------------------------- */
.collhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.collbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--grey-bg); margin-bottom: 12px; }
.collbar.amber { background: var(--amber-bg); }
.collbar.amber strong { color: var(--amber); }
.collbar.green { background: var(--green-bg); color: var(--green); font-weight: 600; }
.collactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-2); }
.collactions .upload-row { display: flex; align-items: center; gap: 6px; margin: 0; }
.collactions form { margin: 0; }
.stack-lg > * + * { margin-top: 18px; }

/* ---- tables ------------------------------------------------------------- */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-2); }
table.grid thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tbody tr:hover { background: var(--tint); }
table.grid.rowlink tbody tr { cursor: pointer; }
table.grid .strong { font-weight: 700; }
table.statement tr.opening td, table.statement tr.closing td { background: var(--tint); font-weight: 650; }
table.statement tr.receipt td.desc { color: var(--green); }
table.statement tr.adjustment td.desc { color: var(--red); }
table.grid tfoot td { border-top: 2px solid var(--line); font-weight: 650; }
.mini th, .mini td { padding: 7px 10px; font-size: 13px; }
/* overflow-x:auto, not hidden: a wide table scrolls inside its box instead of being cut off. */
.tablecard { overflow-x: auto; overflow-y: hidden; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; }
.tablecard .card-h { padding: 13px 16px; border-bottom: 1px solid var(--line-2); display:flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items:center; }
.tablewrap { overflow-x: auto; max-width: 100%; }
/* Dates and account references stay on one line; borrower names get room so they do not break into 3-4 lines. */
.nw { white-space: nowrap; }
.bor { min-width: 170px; }
.totaldue { text-align: right; font-size: 15px; margin-top: 14px; padding: 12px 4px 0; }

/* ---- forms -------------------------------------------------------------- */
label { display: block; font-size: 12px; color: var(--ink-2); font-weight: 600; margin-bottom: 12px; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid #b9b5b0; border-radius: 9px; font: inherit; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
textarea { resize: vertical; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.inline-check { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.inline-check input { width: auto; margin: 0; }
.field-note { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }

/* ---- people cards ------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.person { border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; background: #fff; box-shadow: var(--shadow-sm); }
.person.borrower { border-top: 3px solid var(--navy); }
.person.guarantor { border-top: 3px solid var(--gold); }
.person.contact { border-top: 3px solid var(--brand2); }
.person-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.person-head .pname { font-weight: 700; font-size: 15px; }
.role-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--grey-bg); color: var(--grey); }
.role-tag.borrower { background: var(--bg); color: var(--navy); }
.role-tag.guarantor { background: var(--gold-bg); color: var(--gold-ink); }
.person-detail { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.person-detail dt { color: var(--muted); }
.person-detail dd { margin: 0; }

/* ---- memo / callout ----------------------------------------------------- */
.callout { border-left: 4px solid var(--gold); background: var(--paper); border-radius: var(--r-sm); padding: 14px 16px; overflow-x: auto; }
.callout.red { border-color: var(--red); background: var(--red-bg); }
.callout.green { border-color: var(--green); background: var(--green-bg); }
/* A warning that needs a look but is not a failure (the loan page uses this for four notices). */
.callout.amber { border-color: var(--amber); background: var(--amber-bg); }
.memo-lines { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 8px; }
.memo-lines .label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

/* ---- slide-over panels & modal ----------------------------------------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.scrim.open { opacity: 1; pointer-events: auto; }
/* visibility:hidden takes a closed panel out of the Tab order and away from screen readers; it flips at the
   end of the slide-out, and at once on slide-in. */
.panel { position: fixed; top: 0; right: 0; height: 100vh; width: 430px; max-width: 94vw; background: #fff; box-shadow: var(--shadow-lg); transform: translateX(100%); visibility: hidden; transition: transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s; z-index: 50; display: flex; flex-direction: column; }
.panel.open { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.4,0,.2,1); }
.panel .panel-h { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.panel .panel-h h3 { font-size: 16px; }
.panel .panel-b { padding: 20px; overflow-y: auto; flex: 1; }
.panel .panel-b .field-note { margin-bottom: 14px; }

/* ---- empty state / misc ------------------------------------------------- */
.empty { color: var(--muted); text-align: center; padding: 26px; }
.foot { color: var(--muted); font-size: 12px; padding: 18px 130px 18px 30px; border-top: 1px solid var(--line); }
.error { background: var(--red-bg); color: var(--red); padding: 11px 14px; border-radius: 9px; margin-bottom: 14px; }

/* ---- login -------------------------------------------------------------- */
.authpage { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 30% -10%, var(--navy-700), var(--navy-900)); }
.authcard { width: 360px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 30px; }
.authcard .mark { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 16px; }

.statement-toolbar > div { flex-wrap: wrap; }

@media print {
  .nav-scrim, .menu-toggle { display: none !important; }
  /* Print only the active tab (e.g. the Statement) — chrome hidden. */
  .sidebar, .topbar, .actionbar, .tabs, .scrim, .panel, .modal-scrim, .foot, .card-h .btn, .statement-toolbar > div { display: none !important; }
  .workspace, .wrap { padding: 0; max-width: none; }
  .card { box-shadow: none; border: none; }
  .tabpane:not(.active) { display: none !important; }
  body { background: #fff; }
}

/* ---- account cockpit (detail header) ----------------------------------- */
.acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 2px 0 16px; }
.acct-id h1 { font-size: 22px; }
.acct-id .sub { color: var(--muted); margin-top: 4px; }
.acct-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: 1 1 380px; max-width: 720px; }
@media (max-width: 1100px){ .acct-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 14px; min-width: 0; box-shadow: var(--shadow-sm); }
.kpi span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.kpi b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.kpi.primary { background: linear-gradient(160deg, var(--navy), var(--navy-700)); border-color: var(--navy); color: #fff; }
.kpi.primary span { color: var(--gold-soft); } .kpi.primary small { color: #dbe3f2; }
.kpi.alert { background: var(--red-bg); border-color: var(--red); } .kpi.alert b { color: var(--red); }
.kpi.ok b { color: var(--green); }

/* ---- "Account actions" dropdown (native <details>) ---------------------- */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 6px; z-index: 30; display: flex; flex-direction: column; gap: 1px; }
.menu-list button { text-align: left; background: none; border: none; font: inherit; padding: 9px 11px; border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.menu-list button:hover { background: var(--line-2); }
.menu-list button.danger { color: var(--red); } .menu-list button.danger:hover { background: var(--red-bg); }

/* ---- manage row (status / book editing in Summary) --------------------- */
.manage-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.manage-row form { margin: 0; }
.manage-row label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }

/* ---- tab helper note --------------------------------------------------- */
.tabnote { margin: -4px 0 16px; color: var(--muted); font-size: 13px; }

/* ---- dashboard "today's tasks" status strip ---------------------------- */
.daily-status { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; }
@media (max-width: 760px){ .daily-status { grid-template-columns: 1fr; } }
.ds-item { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r); padding: 13px 16px; box-shadow: var(--shadow-sm); }
.ds-item.ok { border-left-color: var(--green); }
.ds-item.warn { border-left-color: var(--amber); }
.ds-item.bad { border-left-color: var(--red); }
.ds-ic { width: 22px; height: 22px; flex: 0 0 22px; }
.ds-item.ok .ds-ic { color: var(--green); }
.ds-item.warn .ds-ic { color: var(--amber); }
.ds-item.bad .ds-ic { color: var(--red); }
.ds-body { flex: 1; min-width: 0; }
.ds-title { font-weight: 650; font-size: 13.5px; }
.ds-detail { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.ds-item .btn { margin-left: auto; }

/* ==== Pass 2: cockpit alerts, statement polish, a11y ===================== */
/* Consolidated alerts strip on the account cockpit (severity in the rail). */
.alerts { border: 1px solid var(--red-bg); border-left: 4px solid var(--red); background: var(--paper); border-radius: var(--r-sm); padding: 12px 15px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.alerts.amber { border-color: var(--amber-bg); border-left-color: var(--amber); background: var(--paper); }
.alerts .a { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.alerts .a .ai { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--red); }
.alerts .a.warn .ai { color: var(--amber); }
.alerts .a b { color: var(--ink); }

/* Statement: zebra + hover + emphasised balance for scannability. */
table.statement tbody tr:nth-child(2n) td { background: var(--paper); }
table.statement tbody tr:hover td { background: var(--tint); }
table.statement tbody td:last-child { font-weight: 600; }
table.statement tr.opening td, table.statement tr.closing td { background: var(--bg) !important; }

/* Keyboard focus (B12): a solid 2px outline on everything you can tab to, not a faint glow. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible, .tabs button:focus-visible, .linkbtn:focus-visible, .iconx:focus-visible,
.menu > summary:focus-visible, details.more > summary:focus-visible, .menu-toggle:focus-visible { border-radius: 6px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
.sidebar :focus-visible { outline-color: var(--focus-dark); }
.sidebar nav a:focus-visible { outline-offset: -2px; border-radius: 9px; }
.search input:focus-visible { outline: none; } /* the whole search box carries the outline (.search:focus-within) */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- "Report a problem" (bottom of the menu) + thank-you toast ------------ */
/* It used to float over the page (.fab). Now it sits pinned at the bottom of the menu, above the signed-in name. */
.sidebar .sidebar-report { flex: 0 0 auto; padding: 6px 12px 10px; }
.sidebar .report-btn { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #c3cee3; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.sidebar .report-btn:hover { background: var(--navy-700); color: #fff; }
.sidebar .report-btn .ic { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.sidebar .report-btn:focus-visible { outline-offset: -2px; border-radius: 9px; }
.fb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 41; background: var(--green); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.fb-toast[hidden] { display: none; }
@media print { .fb-toast { display: none !important; } }

/* ---- readonly reviewers: forms visible but non-functional ---------------- */
/* Reviewers can look at everything but change nothing. Historically we hid
   POST forms entirely — that led to complaints like "the Edit contact details
   button doesn't work" because the disclosure opened onto an empty form. Now
   we keep the form VISIBLE (so reviewers can see what fields exist and note
   what they'd change) but disable interaction; the top banner says why. Logout + the feedback form carry .ro-allow and remain fully live. */
body.role-readonly form[method="post"]:not(.ro-allow) {
  position: relative;
  opacity: .68;
  pointer-events: none;
}
/* (The "Review mode - edits disabled" line that used to sit under every form is gone: the banner at the top of
   the page says it once. The forms above stay disabled - opacity + pointer-events - and the server still refuses any post.) */

/* Persistent top banner for readonly users — sets context BEFORE they click
   into anything, so the disabled forms make immediate sense. */
.ro-banner { display: none; }
body.role-readonly .ro-banner {
  display: block;
  background: var(--note-bg);
  border-bottom: 1px solid var(--note-line);
  color: var(--note-ink);
  font-size: 13px;
  padding: 8px 20px;
  text-align: center;
}
body.role-readonly .ro-banner strong { font-weight: 700; }
body.role-readonly .ro-banner a { color: inherit; text-decoration: underline; }

/* ---- morning cockpit (home page) ---------------------------------------- */
.cockpit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 1000px){ .cockpit { grid-template-columns: 1fr; } }
.cp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.cp-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 10px; }
.cp-big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cp-money { padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.cp-lines { display: flex; flex-direction: column; gap: 7px; }
.cp-line { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink-2); }
.cp-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; margin-top: 6px; }
/* One element holds a line's wording, so text and bold/links never split into flex columns. */
.cp-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cp-more { margin-top: 4px; }
.cp-more summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.cp-more div { margin-top: 4px; color: var(--ink-2); }
.cp-line.ok .cp-dot { background: var(--green); }
.cp-line.warn .cp-dot { background: var(--amber); }
.cp-line.bad .cp-dot { background: var(--red); }
/* Not due yet — deliberately neutral, and dimmed so the eye skips it. Distinct
   from .bad so "09:00, nothing due" never looks like "the watchdog is wedged". */
.cp-line.pending { color: var(--muted); }
.cp-line.pending .cp-dot { background: var(--line); }
.cp-chips { display: flex; flex-direction: column; gap: 8px; }
.cp-chip { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-weight: 500; }
.cp-chip:hover { border-color: var(--brand2); text-decoration: none; background: #fff; }
.cp-chip .cp-n { min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-weight: 700; font-size: 12.5px; padding: 0 7px; }
.cp-chip .chev { margin-left: auto; color: var(--muted); }
.cp-clear { padding: 14px 4px; color: var(--green); font-weight: 600; }

/* ---- staging data-freshness note (review copy only) ---------------------- */
.staging-note { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--amber); background: var(--amber-bg); border-radius: 12px; padding: 4px 12px; white-space: normal; flex: 0 1 auto; max-width: 100%; }

/* ---- feedback conversation thread ---------------------------------------- */
.fb-thread { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.fb-msg { padding: 8px 12px; border-radius: 9px; max-width: 85%; }
.fb-msg.theirs { background: var(--amber-bg); align-self: flex-start; }
.fb-msg.mine { background: var(--line-2); align-self: flex-end; }

/* ---- Creditsafe report tab ---------------------------------------------- */
.cs-headline { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px){ .cs-headline { grid-template-columns: repeat(3, 1fr); } }
.cs-hcell { padding: 8px 10px; background: var(--bg); border-radius: 8px; }
.cs-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; }
.cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px){ .cs-grid2 { grid-template-columns: 1fr; } }

/* ---- Creditsafe risk-band colouring (matches PDF R/A/G banner) ---------- */
.cs-hcell.cs-risk-very-low { background: var(--green-bg); }
.cs-hcell.cs-risk-very-low .cs-big { color: var(--green); }
.cs-hcell.cs-risk-low { background: var(--green-bg); }
.cs-hcell.cs-risk-low .cs-big { color: var(--green); }
.cs-hcell.cs-risk-moderate { background: var(--amber-bg); }
.cs-hcell.cs-risk-moderate .cs-big { color: var(--amber); }
.cs-hcell.cs-risk-high { background: var(--red-bg); }
.cs-hcell.cs-risk-high .cs-big { color: var(--red); }
.cs-hcell.cs-risk-very-high { background: var(--red-bg); }
.cs-hcell.cs-risk-very-high .cs-big { color: var(--red); }
.cs-hcell.cs-risk-unknown { background: var(--grey-bg); }
.cs-hcell.cs-risk-unknown .cs-big { color: var(--grey); font-size: 20px; }

/* ---- Creditsafe indicator chips + detail blocks ------------------------- */
.cs-ind-chip { display: inline-block; color: var(--red); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red-bg); text-underline-offset: 3px; }
.cs-ind-chip:hover { text-decoration-color: var(--red); }
.cs-ind-block + .cs-ind-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.cs-ind-h { margin-bottom: 8px; color: var(--red); display: flex; align-items: center; gap: 6px; }
/* Scroll-margin so anchor jumps don't hide behind the sticky topbar. */
#cs-petitions, #cs-insolvency, #cs-court, #cs-indicators { scroll-margin-top: 72px; }

/* ---- side-panel forms: readable labels + full-width inputs -------------- */
/* Was: bare textarea in the Add-note panel rendered at ~20 chars wide with
   the label glued to it (Lubna's "there is no box to type in"). */
.panel .panel-b form { display: flex; flex-direction: column; gap: 12px; }
.panel .panel-b form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.panel .panel-b form input[type="text"],
.panel .panel-b form input[type="email"],
.panel .panel-b form input[type="tel"],
.panel .panel-b form input[type="number"],
.panel .panel-b form input[type="date"],
.panel .panel-b form select,
.panel .panel-b form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.panel .panel-b form textarea { min-height: 100px; resize: vertical; font-family: inherit; }
.panel .panel-b form input:focus, .panel .panel-b form textarea:focus, .panel .panel-b form select:focus { border-color: var(--focus); }
.panel .panel-b form .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Search: status chip beside borrower name — makes closed matches obvious. */
.sr-status { display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: 12px; font-weight: 700; border-radius: 999px; background: var(--green-bg); color: var(--green); text-transform: capitalize; }
.sr-status.closed { background: var(--grey-bg); color: var(--grey); }
.sr-status.arrears { background: var(--amber-bg); color: var(--amber); }
.sr-status.default { background: var(--red-bg); color: var(--red); }

/* ---- status-filter chips on book page (Jacqui + Stephen: clickable counts) */
.statfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.statfilter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.statfilter-chip:hover { text-decoration: none; border-color: var(--brand2); color: var(--ink); }
.statfilter-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.statfilter-chip.on .statfilter-n { background: rgba(255,255,255,.16); color: #fff; }
.statfilter-n { background: var(--line-2); color: var(--ink-2); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.statfilter-chip.performing:hover, .statfilter-chip.performing.on { border-color: var(--green); }
.statfilter-chip.arrears:hover, .statfilter-chip.arrears.on { border-color: var(--amber); }
.statfilter-chip.default:hover, .statfilter-chip.default.on { border-color: var(--red); }

/* ---- sortable table headers -------------------------------------------- */
table.sortable thead th[data-sort] { user-select: none; position: relative; padding-right: 18px; }
table.sortable thead th[data-sort]:hover { color: var(--brand2); }
/* app.js wraps each sortable heading in a real button so the keyboard can reach and use it. */
.sortbtn { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; font-weight: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
table.sortable thead th[data-sort]::after { content: '↕'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); opacity: .5; }
table.sortable thead th.sort-on::after { opacity: 1; color: var(--brand2); }
table.sortable thead th[data-dir="asc"]::after { content: '↑'; }
table.sortable thead th[data-dir="desc"]::after { content: '↓'; }

/* In-credit badge (Jake's negative-balance flag) — soft blue so it doesn't read as risk. */
.badge.b-credit { background: var(--credit-bg); color: var(--credit); }

/* Parties tab: inline edit form (matches side-panel form styling). */
.person .editc[open] { padding-top: 8px; border-top: 1px solid var(--line-2); }
.person .editc form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.person .editc form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.person .editc form input { width: 100%; box-sizing: border-box; padding: 7px 10px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.person .editc form input:focus { border-color: var(--focus); }

/* Date-range caption under the collection tiles on the book cards — the two
   tiles use different windows (rolling 7 days vs calendar month to date), so
   each states its own. */
.xsmall { font-size: 12px; letter-spacing: .01em; margin-top: 2px; }

/* "NEW" flag next to a feature a reviewer has not yet seen (see config/whats-new.ts).
   Deliberately louder than .badge: the whole point is that it catches the eye. */
.badge-new { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; background: var(--brand2); color: #fff; vertical-align: middle; margin-left: 5px; }

/* Negative money in transaction tables. A write-off and a refund share the "Adjustment"
   column and differ only in sign, so the sign has to survive a skim — a bare ASCII
   hyphen in a tabular-numerals grid does not. Paired with money2() in format.ts, which
   also swaps the hyphen for a true minus sign (U+2212). */
@media print { .num .neg, td .neg { color: #000; font-weight: 700; } }

/* A receipt that was later reversed. The row must not read as money kept — a failed
   direct debit that still looks like a payment is how an account gets misread. */
tr.reversed td { opacity: .72; }
tr.reversed td:nth-child(2) { text-decoration: line-through; text-decoration-thickness: 1px; }
.tag.warn { background: var(--amber-bg); color: var(--amber); }

/* ---- bank payments: status tabs + the dismissed/allocated lists ----------
   Added 2026-09-15 with the reinstate screen. Dismissed lines were in the data
   from the start and unreachable in the app, so a dismissal was final for anyone
   not at a command line. */
.segmented { display: flex; gap: 2px; margin: 16px 0 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.seg {
  border-bottom: 2px solid transparent; padding: 9px 14px; font-weight: 600;
  color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
.seg:hover { color: var(--ink); text-decoration: none; }
.seg[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); }
.seg .count {
  font-size: 12px; font-weight: 650;
  background: var(--grey-bg); color: var(--grey); padding: 1px 7px; border-radius: 999px;
}
.seg[aria-selected="true"] .count { background: var(--info-bg); color: var(--info); }

.past-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 12px; }
.past-search {
  flex: 1 1 280px; min-width: 0; padding: 7px 11px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink);
}
.past-search::placeholder { color: var(--muted); }
.chip {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }

/* The dismissal reason. Amber when none was recorded — those predate the reason being
   required, and they are the ones worth finding. */
.whybox {
  margin-top: 8px; padding: 8px 11px; background: var(--grey-bg); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; max-width: 620px;
}
.whybox .lbl {
  font-weight: 700; color: var(--grey); text-transform: uppercase;
  font-size: 12px; letter-spacing: .06em; margin-right: 6px;
}
.whybox.none { background: var(--amber-bg); color: var(--amber); }
.whybox.none .lbl { color: var(--amber); }

.reinstate { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.why-input {
  flex: 1 1 320px; min-width: 0; max-width: 460px; padding: 7px 11px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink);
}
.why-input::placeholder { color: var(--muted); }
.why-input:invalid:not(:placeholder-shown) { border-color: var(--red); }

/* ---- "i" disclosure for long explanatory notes (native <details>, no script) ---- */
details.more { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
details.more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: var(--brand2); font-size: 12.5px; font-weight: 600; list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "i"; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-grid; place-items: center; font: italic 700 12px/1 Georgia, serif; }
details.more[open] > summary { margin-bottom: 6px; }
details.more > .more-body { line-height: 1.55; max-width: 760px; }
details.more > .more-body p { margin: 0 0 8px; }

/* ---- menu: narrower between 900 and 1200px, a slide-in drawer below 900px ---- */
.menu-toggle { display: none; font: inherit; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 9px; padding: 6px 12px; cursor: pointer; }
.nav-scrim { display: none; }
@media (max-width: 1200px) {
  .sidebar { width: 204px; flex-basis: 204px; }
  .sidebar .brand { padding: 18px 14px 14px; }
  .sidebar nav { padding: 6px 8px; }
  .sidebar nav a { padding: 8px 10px; gap: 9px; }
  .sidebar .who { padding: 12px 14px; }
  .topbar { padding: 10px 20px; }
  .wrap { padding: 22px 20px 96px; }
  .foot { padding-left: 20px; }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 250px; flex-basis: auto; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 55; }
  .menu-toggle { display: inline-flex; }
  .topbar { padding: 8px 16px; }
  .wrap { padding: 18px 16px 96px; }
  .foot { padding-left: 16px; }
}

/* A destructive confirmation: solid red, labelled with what it does (app.js showConfirm, 30-Sep-2026). */
.modal .btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.modal .btn.danger:hover { filter: brightness(.92); background: var(--red); }
form[data-locked] button[disabled] { cursor: progress; opacity: .7; }

/* The hidden attribute always hides, whatever display a class sets (code review, 30-Sep-2026). */
[hidden] { display: none !important; }

/* ---- error / not-found page (B8) ------------------------------------------- */
.errorpage { margin-top: 40px; }
.errorpage-b { padding: 36px 34px 34px; text-align: left; }
.errorpage-n { font-family: var(--font-head); font-size: 54px; line-height: 1; color: var(--gold); margin-bottom: 10px; }
.errorpage h1 { font-size: 26px; margin-bottom: 10px; }
.errorpage p { margin: 0 0 22px; color: var(--ink-2); font-size: 15px; max-width: 560px; }
.errorpage-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- small additions (30-Sep-2026 UX pass) ---------------------------------- */
.linkbtn.small { font-size: 12px; }
/* The menu's "Books" link jumps to the book list on the home screen; keep it clear of the sticky top bar. */
#books { scroll-margin-top: 72px; }
/* Tenor Sans is lighter than the body face, so its headings are set a little larger. */
.pagehead h1, .acct-id h1 { font-size: 26px; }
.card .card-h h2, .card .card-h h3 { font-size: 15px; }
.bookcard .bookname { font-family: var(--font-head); font-weight: 400; font-size: 20px; }
.sidebar .navtag { font-size: 12px; font-weight: 400; color: var(--gold-soft); white-space: nowrap; }