:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --ink: #1a2233;
  --muted: #66708a;
  --line: #e3e6ec;
  --accent: #2456e6;
  --accent-soft: #e8eeff;
  --green: #14804a;
  --green-soft: #e1f4ea;
  --amber: #9a6700;
  --amber-soft: #fff3d1;
  --red: #b42318;
  --red-soft: #fde8e6;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(20,30,60,.08);
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }

#app { display: flex; min-height: 100vh; }
#sidebar { width: 210px; background: #101828; color: #cdd5e4; padding: 20px 14px; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; }
/* Now an anchor to the dashboard, so it needs the underline taken off and a hover that says
   it is pressable. display: block keeps the original margins doing what they did. */
#sidebar .logo { display: block; font-size: 20px; font-weight: 700; color: #fff;
  margin: 4px 8px 24px; text-decoration: none; }
#sidebar .logo:hover { opacity: .85; }
#sidebar .logo:focus-visible { outline: 2px solid #7c9aff; outline-offset: 3px; border-radius: 5px; }
#sidebar .logo span { color: #7c9aff; font-weight: 400; }
#sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link { color: #cdd5e4; text-decoration: none; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; }
.nav-link:hover { background: rgba(255,255,255,.07); }
.nav-link.active { background: var(--accent); color: #fff; }
/* Business / user area, pinned to the bottom of the sidebar */
.biz-area {
  margin-top: auto; position: relative; display: flex; align-items: center; gap: 9px;
  padding: 8px 8px 8px 9px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid transparent;
}
.biz-area.active { background: rgba(36,86,230,.22); border-color: rgba(124,154,255,.4); }
.biz-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 30px;
  background: linear-gradient(140deg, #3b5bdb, #7c9aff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .02em;
}
.biz-avatar.sm { width: 26px; height: 26px; flex: 0 0 26px; font-size: 10.5px; border-radius: 7px; }
.biz-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.biz-name { color: #eef2fa; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-sub { color: #6d7c96; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the only clickable part — a chevron that opens the menu upward */
.biz-toggle {
  flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border: none; border-radius: 7px;
  background: transparent; color: #7d8ca6; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .18s, color .15s, background .15s;
}
.biz-toggle:hover { background: rgba(255,255,255,.1); color: #eef2fa; }
.biz-toggle:focus-visible { outline: 2px solid #7c9aff; outline-offset: 1px; }
.biz-area.open .biz-toggle { transform: rotate(180deg); background: rgba(255,255,255,.12); color: #fff; }

/* popup menu */
.biz-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; width: 258px; z-index: 80;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 40px rgba(10,15,30,.28); animation: bizIn .13s ease-out;
}
@keyframes bizIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.biz-menu-head { display: flex; align-items: center; gap: 9px; padding: 8px 9px 10px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.biz-menu-head > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.biz-menu-name { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-menu-mail { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biz-menu-item {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 7px 9px; border: none; background: none; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--ink);
}
.biz-menu-item:hover { background: var(--accent-soft); color: var(--accent); }
.biz-menu-hint { font-size: 11px; color: var(--muted); }
.biz-menu-item:hover .biz-menu-hint { color: #6a86d8; }
.biz-menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.biz-menu-foot { font-size: 10.5px; color: var(--muted); text-align: center; padding: 8px 6px 4px; border-top: 1px solid var(--line); margin-top: 5px; }

/* highlight the card you jumped to */
.card.flash { animation: cardFlash 1.2s ease-out; }
@keyframes cardFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); } 100% { box-shadow: var(--shadow); } }

#main { flex: 1; margin-left: 210px; padding: 28px 34px 60px; width: calc(100% - 210px); max-width: 1600px; }

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 12px; }
.sub { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; }
.view-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.view-head .actions { display: flex; gap: 8px; }
/* Financial-year switcher, top right of the Dashboard */
.fy-switch { display: inline-flex; align-items: center; gap: 6px; }
/* The chevron sizing below is deliberately tight, so it must only reach the switcher's own
   buttons — a sibling with a word in it inherited height:30px and padding:0 and rendered as a
   squashed blob. */
.view-head .actions { display: flex; align-items: center; gap: 10px; }
.fy-switch .fy-today {
  height: 30px; padding: 0 12px; margin-right: 6px; font-size: 13px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border-color: transparent;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.fy-switch .fy-today:hover { background: #dbe5ff; border-color: transparent; }
.fy-switch button { min-width: 30px; height: 30px; padding: 0; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.fy-switch button:hover:not(:disabled) { color: var(--ink); border-color: #c8cdd8; }
.fy-switch button:disabled { opacity: .3; }
.fy-switch .fy-year { font-size: 17px; font-weight: 700; letter-spacing: .01em; min-width: 108px; text-align: center; font-variant-numeric: tabular-nums; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.grid { display: grid; gap: 14px; }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 20px; }
.kpi .label { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 24px; font-weight: 700; margin-top: 6px; }
.kpi .hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: #f7f9ff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A column of status chips sitting at the end of a row of figures. Right-aligned like the
   numbers it follows, so the row has one edge rather than two — but not .num, because a chip
   is a word and tabular figures would space it oddly. */
td.chip-col, th.chip-col { text-align: right; white-space: nowrap; }

/* ---------- The row menu ----------

   Every row had its rare actions spelled out in full, which meant the common ones — the pay
   controls you use every week — were competing for width with a Print button you press twice a
   year. The rare ones move behind a ⋯ at the end of the row, and what the menu offers depends
   on the state of the thing: you cannot void a draft, and reinstating only makes sense on
   something already void.

   The cell has to be position: relative for the menu to hang off it, and the row above needs a
   higher stacking order than the rows below, or the menu opens underneath the next one. */
td.menu-col { width: 46px; text-align: right; position: relative; }
tr:has(.row-menu.open) { position: relative; z-index: 30; }
.menu-dots { width: 30px; height: 30px; padding: 0; border-radius: 8px; line-height: 1;
  font-size: 17px; color: var(--muted); background: transparent; border-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; }
.menu-dots:hover { background: #eef1f7; color: var(--ink); border-color: transparent; }
.row-menu.open .menu-dots { background: var(--accent-soft); color: var(--accent); }
.row-menu { position: relative; display: inline-block; }
.row-menu-panel { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 5px; box-shadow: 0 12px 34px rgba(10,15,30,.18); text-align: left; }
.row-menu.open .row-menu-panel { display: block; }
/* Near the bottom of a long list a menu would fall off the page, so it opens upward instead. */
.row-menu.up .row-menu-panel { top: auto; bottom: calc(100% + 4px); }
.row-menu-panel button { display: block; width: 100%; text-align: left; border: none;
  background: none; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink);
  white-space: nowrap; }
.row-menu-panel button:hover { background: var(--accent-soft); color: var(--accent); }
.row-menu-panel button.danger:hover { background: var(--red-soft); color: var(--red); }
.row-menu-panel .sep { height: 1px; background: var(--line); margin: 4px 5px; }
.row-menu-panel .note { padding: 5px 10px 7px; font-size: 11.5px; color: var(--muted); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.draft { background: #eef0f4; color: var(--muted); }
.badge.sent { background: var(--accent-soft); color: var(--accent); }
.badge.paid { background: var(--green-soft); color: var(--green); }
.badge.overdue { background: var(--red-soft); color: var(--red); }
/* money still owed to a supplier — the same amber used for spending on the chart */
.badge.outstanding { background: var(--amber-soft); color: var(--amber); }
/* A void document is still in the books, so it is shown — just plainly, and struck through so
   it can never be mistaken for a live one at a glance. */
.badge.void { background: #eef0f4; color: var(--muted); }
tr.is-void td { color: var(--muted); }
tr.is-void td strong, tr.is-void td .num { text-decoration: line-through; }
.void-note { background: #eef0f4; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px; color: var(--muted); }
.void-note strong { color: var(--ink); }
.badge.cur { background: #eef0f4; color: var(--ink); font-weight: 500; }
/* A bill nobody has recorded yet. Deliberately not a colour: it is not late, not paid and not
   due — it is missing, and an outline reads as an empty slot rather than a state. */
.badge.outline { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong, #c8cede); }
.badge.muted { background: transparent; color: var(--muted); font-weight: 500; }
/* A chip you can press. Same shape as the badge beside it so the row reads as one thing, but
   it lifts on hover so it is clear which of the two does something. */
button.badge { border: 0; cursor: pointer; font-family: inherit; line-height: 1.35; }
button.badge:hover { filter: brightness(0.94); }
button.badge.outline { border: 1px dashed var(--line-strong, #c8cede); }

/* ---------- The roster ----------

   The first attempt at this was a card whose contents simply flowed, and at a narrow column
   width everything went where it liked: two badges stacked one per line, the meta line wrapped
   to two, and the action button — centred against a body that had grown tall — ended up
   floating in the middle of the card. Flow is not layout.

   So the card is three fixed regions, and nothing can leave the one it belongs to:

     identity   avatar, name, one line of facts, status, chevron — one row, never wraps
     metrics    three equal columns, labels above figures, aligned across every card
     actions    a footer, right-aligned, present only when there is something to press

   Two rules keep it honest. The name and the meta line truncate rather than wrap, because a
   card that changes height with the length of a job title makes a grid of them ragged. And
   only one badge is ever shown — the thing that needs doing — because a row of chips is where
   the first version fell apart. Attributes like "director" are facts, so they live in the meta
   line as words.

   The column is 460px because six pieces of information need the room; below that the grid
   drops to one per row rather than squeezing. */
.people-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }

.person-card { display: block; width: 100%; text-align: left; padding: 0; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; font: inherit; color: inherit; }
.person-card:hover { border-color: var(--accent); }
.person-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.person-card.gone { opacity: .7; }
/* Selecting someone does not leave the page — the panel below becomes theirs. So the card has
   to say "this is the one you are looking at" and stay saying it, which a hover state cannot
   do once the pointer moves away. */
.person-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.person-card.selected .person-id { background: var(--accent-soft); }
.person-card.selected .chev { transform: rotate(90deg); color: var(--accent); }
.person-card .chev { display: inline-block; transition: transform .15s; }
/* Clicking the empty part of the roster clears the selection, so it needs to feel like a
   surface rather than dead space. */
.roster-surface { min-height: 8px; }

/* identity — one row, fixed shape */
.person-id { display: flex; align-items: center; gap: 13px; padding: 14px 16px; }
.person-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.person-card.gone .person-avatar { background: #eef0f4; color: var(--muted); }
.person-id .naming { flex: 1; min-width: 0; }
.person-id .naming b { display: block; font-size: 15px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-id .naming span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-id .flag { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.person-id .chev { color: var(--muted); font-size: 19px; line-height: 1; }
.person-card:hover .chev { color: var(--accent); }

/* metrics — three equal columns, so figures line up across the whole grid */
.person-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); }
/* Direct children only. Without the ">" this also matched the label and the value inside each
   column, giving them 10px of padding each and prising them ~20px apart — a label and the
   figure it names have to read as one thing. */
.person-metrics > div { padding: 10px 16px; min-width: 0; }
.person-metrics .k { font-size: 11.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.person-metrics .v { font-size: 14px; font-weight: 600; margin-top: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.person-metrics .v.none { color: var(--muted); font-weight: 400; }
.person-metrics .v em { font-style: normal; font-weight: 400; color: var(--muted); }

/* actions — a footer, so a button can never end up in the middle of anything */
.person-do { display: flex; justify-content: flex-end; gap: 8px;
  padding: 9px 16px; border-top: 1px solid var(--line); background: #fbfcfe; }

.person-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.person-head .who { flex: 1; min-width: 0; }
.person-head h2 { margin: 0 0 4px; }
.back-link { display: inline-block; margin-bottom: 12px; color: var(--muted); font-size: 13px; }
.back-link:hover { color: var(--accent); }

/* ---------- The pay run window ----------

   Six number boxes in a flat grid gave every figure the same weight, when only one of them is
   typed and the other five follow from it. These rules put that back: gross pay leads, and the
   rest are grouped by the thing that decides everything downstream — whether a figure comes
   OUT of the employee's pay or is paid ON TOP by the company. */
.sub-head { grid-column: 1 / -1; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin: 6px 0 -4px; }
.sub-head .why { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.field.lead input { font-size: 19px; font-weight: 600; padding-top: 9px; padding-bottom: 9px; }
.field.lead > label { font-size: 13.5px; color: var(--ink); }

/* What the pay run comes to, as a statement rather than three floating lines. */
.pay-summary { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; }
.pay-summary .line { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 14px; font-size: 13.5px; }
.pay-summary .line + .line { border-top: 1px solid var(--line); }
.pay-summary .line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-summary .line.sub { color: var(--muted); background: #fbfcfe; font-size: 13px; }
.pay-summary .line.strong { font-weight: 600; }
.pay-summary .line.grand { background: var(--accent-soft); font-weight: 700; font-size: 15px;
  color: var(--accent); }
.pay-summary .line.warn { background: var(--red-soft); color: var(--red); font-weight: 600; }

/* The PAYE block at the foot of the pay run window. It is a different kind of thing from the
   fields above it — a bill rather than a figure you type — so it is boxed rather than ruled. */
.paye-panel { margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fbfcfe; padding: 14px 16px; }
.paye-panel.settled { background: var(--green-soft); border-color: #bfe3cd; }
.paye-panel.late { background: var(--red-soft); border-color: #f2c9c9; }
.paye-panel .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.paye-panel .what { font-weight: 600; }
.paye-panel .when { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.paye-panel .figures { display: flex; gap: 22px; margin: 12px 0 0; flex-wrap: wrap; }
.paye-panel .figures div { font-size: 12.5px; color: var(--muted); }
.paye-panel .figures strong { display: block; font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums; }
/* flex-end aligns the MARGIN box, and .field carries 16px of bottom margin — so without
   clearing it the inputs float 16px above the button they are supposed to sit level with.
   That is the whole reason the button looked dropped. */
.paye-panel .act { margin-top: 14px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.paye-panel .act .field { flex: 0 0 150px; margin-bottom: 0; }
.paye-panel .act > button { margin-bottom: 0; height: 38px; padding: 0 16px; }
.paye-panel .covers { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.paye-panel .receipt { margin-top: 10px; font-size: 13px; }
.status-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-cell .paid-on { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

button, .btn { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 14px; }
button:hover, .btn:hover { border-color: #c8cdd8; }
/* The variants apply to .btn as well as <button>, because a control nested inside another
   control cannot be a <button> — the HTML is invalid and the click never reaches the inner one.
   "Run pay" inside a person card is exactly that case, so it is a span carrying these classes. */
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover, .btn.primary:hover { background: #1d48c6; }
button.danger, .btn.danger { color: var(--red); }
button.small, .btn.small { padding: 4px 10px; font-size: 12.5px; }
button:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; }
.btn { display: inline-block; white-space: nowrap; }
/* Inline "mark paid" controls — one consistent height, never wrapping */
.pay-inline { display: inline-flex; align-items: stretch; gap: 5px; vertical-align: middle; }
td .pay-inline + button, .pay-inline ~ button { vertical-align: middle; }
.row-actions { display: flex; align-items: stretch; justify-content: flex-end; gap: 5px; flex-wrap: nowrap; }
.row-actions > *, .pay-inline > * {
  height: 30px; line-height: 1; padding: 0 9px; font-size: 12.5px;
  border-radius: 7px; white-space: nowrap; box-sizing: border-box;
}
.row-actions button, .pay-inline button { display: inline-flex; align-items: center; }
input.small-date, select.small-date { width: auto; }
select.small-date { padding-right: 22px; }
.row-actions input.pay-amt { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.row-actions input.pay-amt.over { border-color: var(--red); background: var(--red-soft); color: var(--red); }

input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; width: 100%; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
/* Only ever taller, never wider — dragging a textarea sideways breaks the grid */
textarea { resize: vertical; line-height: 1.45; min-height: 64px; }
/* Grows to fit what's in it, so nothing is hidden behind a scrollbar */
textarea.grow { overflow-y: hidden; resize: none; }
label { font-size: 12.5px; font-weight: 600; color: var(--muted); display: block;
  margin-bottom: 6px; line-height: 18px; }
.field { margin-bottom: 16px; }
.row { display: flex; gap: 18px; align-items: flex-start; }
.row > * { flex: 1; min-width: 0; }

/* Every field is the same three stacked blocks — label, control, hint — each a known height,
   so the controls in a row line up because they are all the same distance from the top. An
   earlier version let the label stretch to fill the field and pushed the control to the
   bottom, which lined things up only while every field had the same amount of text under it;
   add a hint to some and not others and the controls drifted apart down the row.
   Both [hidden] rules are load-bearing: the browser hides that attribute with a plain
   element selector, which any class selector here would outrank, so hiding a field or a row
   would otherwise do nothing at all. */
.row[hidden], .row .field[hidden] { display: none; }
.row .field { display: block; }
.row .field > label { height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field .hint { font-size: 11.5px; color: var(--muted); line-height: 16px; margin-top: 6px; }

/* Modal */
#modal-root:empty { display: none; }
.modal-overlay { position: fixed; inset: 0; background: rgba(10,15,30,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.modal { background: #fff; border-radius: 14px; padding: 24px 26px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.wide { max-width: 860px; }
.modal h2 { margin-bottom: 18px; font-size: 18px; }
/* Grouped form sections. A long form of bare fields reads as one undifferentiated wall; a
   quiet rule and a small heading every few fields turn it into three short questions —
   what did you buy, how much was it, and has it been paid. */
.form-section + .form-section { margin-top: 22px; }
.form-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding-bottom: 7px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  /* A section may carry one action on its right — "work this out for me" and the like.
     Bare text still sits where it always did, because a lone child in a flex row with
     space-between stays at the start. */
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.form-section-title button { text-transform: none; letter-spacing: 0; }
/* Three across is the widest a row gets; a field may take two of those shares when what goes
   in it is prose rather than a number. */
.field.w-wide { flex: 2; }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--line); }
.modal-actions .left { margin-right: auto; }

/* Invoice items editor */
.items-table input { padding: 6px 8px; }
.items-table td { padding: 6px 4px; border-bottom: none; }
.items-table .num input { text-align: right; }

/* Payments block — give it room to breathe */
.pay-block { margin: 26px 0 22px; padding: 16px 18px 14px; background: #fafbfd; border: 1px solid var(--line); border-radius: var(--radius); }
.pay-block > label { margin-bottom: 10px; }
.pay-table { margin-bottom: 6px; }
.pay-table th { padding-bottom: 6px; }
.pay-table td { padding: 5px 5px; }
.pay-table input, .pay-table select { padding: 7px 9px; background: #fff; }
.pay-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.totals-box { text-align: right; margin-top: 10px; font-size: 14.5px; }
.totals-box .grand { font-size: 18px; font-weight: 700; }

/* Dropzone */
.dropzone { border: 2px dashed #c3cbe0; border-radius: var(--radius); padding: 26px; text-align: center; color: var(--muted); cursor: pointer; transition: all .15s; background: #fbfcff; }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone .big { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.dropzone.slim { padding: 14px; font-size: 12.5px; }
.dropzone.slim .big { font-size: 14px; margin-bottom: 2px; }

.scan-result { background: var(--green-soft); border: 1px solid #bfe6d2; border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; font-size: 13.5px; }
.scan-result.warn { background: var(--amber-soft); border-color: #ecd9a0; }
.match-suggest { background: var(--accent-soft); border: 1px solid #c8d8ff; border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; font-size: 13.5px; }
.match-suggest button { margin-top: 8px; }

/* Combobox (type-ahead) */
.combo-drop { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,30,60,.15); max-height: 260px; overflow-y: auto; z-index: 60; }
.combo-item { padding: 9px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid #f0f2f6; }
.combo-item:last-child { border-bottom: none; }
.combo-item:hover { background: var(--accent-soft); }

/* Toast */
#toast-root { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: #101828; color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: slideIn .2s ease; }
.toast.error { background: var(--red); }
@keyframes slideIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 14px; }
/* Long-form document pages (About, Terms & Privacy) */
.doc { max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.doc .card { padding: 22px 24px; }
.doc h2 { font-size: 17px; margin-bottom: 10px; }
.doc h3 { font-size: 14px; margin: 18px 0 6px; color: var(--ink); }
.doc h3:first-of-type { margin-top: 10px; }
.doc p { margin: 0 0 10px; line-height: 1.62; font-size: 14px; color: #333c4f; }
.doc p:last-child { margin-bottom: 0; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc li { margin-bottom: 7px; line-height: 1.58; font-size: 14px; color: #333c4f; }
.doc code { background: #eef0f4; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
#legal-summary, #about-intro { background: var(--accent-soft); border-color: #c8d8ff; }
#legal-summary li, #about-intro p { color: #24304a; }
#about-intro h2 { color: var(--ink); }

/* Currency picker */
.cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; margin-top: 4px; }
.cur-pick { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--ink); margin: 0; }
.cur-pick:hover { background: var(--accent-soft); }
.cur-pick input { width: auto; margin: 0; flex: 0 0 auto; }
.cur-pick input:disabled + span { color: var(--muted); }
.cur-pick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.setup-list { padding-left: 20px; margin: 0 0 14px; }
.setup-list li { margin-bottom: 14px; line-height: 1.55; }
.setup-list button { margin-top: 6px; }
.muted { color: var(--muted); }
.small-text { font-size: 12.5px; }
.filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filters select, .filters input { width: auto; }
.link { color: var(--accent); cursor: pointer; text-decoration: underline; background: none; border: none; padding: 0; font-size: inherit; }

/* align-items: start so each card is only as tall as its own content — otherwise a short
   card (Financial year) stretches to match a tall neighbour and leaves a block of empty space */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  #sidebar { width: 64px; }
  #main { margin-left: 64px; width: calc(100% - 64px); }
  #sidebar .logo span { display: none; }
  .biz-area { padding: 6px; flex-direction: column; gap: 4px; }
  .biz-text { display: none; }
  .biz-menu { left: calc(100% + 8px); bottom: 0; }
}

/* ---------- Month-by-month chart ----------
   Income and spending differ by an order of magnitude — a good month invoices £6,000 and
   spends £200. Drawn on one scale, every expense bar collapses to the same sliver and the
   difference between a £48 month and a £397 one is lost.

   So spending gets its own lane underneath, with its own scale, the way trading volume sits
   under a price. Each lane is honest within itself, the two are never confused, and the
   spending months become comparable with each other, which is the question being asked. */
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chart-head h2 { margin-bottom: 2px; }

.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }

/* The gap has to clear more than it looks: the top scale label is nudged up half its own
   height to centre on the £6k line, so it reaches above the plot and closes on the subtitle.
   38px leaves a clear band between the heading and the chart. */
.chart { display: flex; gap: 10px; margin-top: 38px; }
.chart-axis { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.chart-main { flex: 1; min-width: 0; position: relative; }

/* the money scale beside the income lane */
.chart-scale {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 168px; text-align: right;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.chart-scale span { line-height: 1; transform: translateY(-50%); white-space: nowrap; }

/* the spending lane's own top figure, so it is never mistaken for the same scale */
.spend-scale {
  height: 46px; display: flex; flex-direction: column; justify-content: space-between;
  text-align: right; font-size: 10.5px; color: var(--amber);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.spend-scale span:first-child { opacity: .5; transform: translateY(-2px); }
.spend-scale span:last-child { font-weight: 600; }

.chart-plot { position: relative; height: 168px; pointer-events: none; }
.chart-grid { position: absolute; inset: 0; pointer-events: none; }
.chart-grid i { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.chart-grid i.base { background: #cfd4de; }

.chart-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
/* height: 100% is load-bearing. The bars are sized in per cent, and a percentage height only
   resolves against a parent with a definite height. align-items: flex-end above stops these
   columns from stretching, so without this they would be auto-height and every bar in the
   chart would collapse to nothing. */
.chart-cols > div { flex: 1; min-width: 0; height: 100%;
  display: flex; align-items: flex-end; justify-content: center; }

.chart-bar { width: 46%; max-width: 22px; display: flex; flex-direction: column;
  justify-content: flex-end; border-radius: 4px 4px 0 0; overflow: hidden; }
.chart-bar .seg { width: 100%; }
.chart-bar .seg.paid { background: var(--accent); }
.chart-bar .seg.owed { background: #9db9f7; }

/* The spending lane hangs down from the line, so a deeper bar reads as more spent. */
.chart-spend { position: relative; height: 46px; margin-top: 8px;
  border-top: 1px solid var(--line); pointer-events: none; }
.chart-spend .chart-cols { align-items: flex-start; }
.chart-spend .chart-cols > div { align-items: flex-start; }
.chart-spend .chart-bar {
  border-radius: 0 0 4px 4px; justify-content: flex-start;
  min-height: 3px;   /* a real amount always leaves a mark, however small the month */
}
.chart-spend .chart-bar .seg { background: var(--amber); }

/* The caption that used to sit under the chart is gone. This holds open the space below the
   month labels so the card's bottom edge does not ride up against them — a little less than
   the caption itself took, which was more air than the chart needed. */
.chart-tail { height: 17px; }

/* a month with nothing in it reads as deliberate rather than missing */
.chart-empty { width: 22px; height: 2px; border-radius: 2px; background: var(--line); }

.chart-labels { display: flex; gap: 2px; margin-top: 7px; position: relative; pointer-events: none; }
.chart-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; min-width: 0; }
.chart-labels span.now { color: var(--accent); font-weight: 700; }

/* One band of hit areas spanning both lanes, so hovering anywhere in a month lights the
   whole column and shows one panel. It sits behind the bars — the lanes above it ignore the
   pointer — so the highlight never washes over the colours it is meant to explain. */
.chart-hit { position: absolute; left: 0; right: 0; top: 0; height: 222px;
  display: flex; gap: 2px; }
/* a year with no spending yet drops the lane rather than leaving an empty strip */
.chart.no-spend .chart-hit { height: 168px; }
.chart-hit i { flex: 1; min-width: 0; border-radius: 6px; transition: background .12s; }
.chart-hit i:hover { background: rgba(36,86,230,.07); }
.chart-hit i.now { background: rgba(36,86,230,.05); }

/* hover panel */
.chart-tip {
  position: fixed; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: #101828; color: #fff; border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.5; box-shadow: 0 10px 30px rgba(10,15,30,.32);
  min-width: 200px;
}
.chart-tip.on { opacity: 1; }
.chart-tip b { display: block; font-size: 13px; margin-bottom: 6px; white-space: nowrap; }
.chart-tip .row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; white-space: nowrap; }
.chart-tip .row > span:first-child { color: #aab6cc; }
.chart-tip .row > span:last-child { font-variant-numeric: tabular-nums; }
.chart-tip .row.total { border-top: 1px solid rgba(255,255,255,.16); margin-top: 5px; padding-top: 5px; }
.chart-tip .row.total > span:last-child { font-weight: 700; }
.chart-tip .k { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 7px; vertical-align: 0; }

@media (max-width: 720px) {
  .chart-labels span { font-size: 10px; }
  .chart-scale, .chart-plot { height: 132px; }
  .chart-hit { height: 186px; }
  .chart.no-spend .chart-hit { height: 132px; }
}

/* ---------- Reports ----------
   Two cards side by side where there is room, stacking on a narrow screen. */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } }
.report-grid .card { margin: 0; }

/* A proportional bar behind each row. The eye reads concentration off the bar lengths long
   before it reads the numbers, which is the point — one client at 40% of turnover should be
   obvious without arithmetic. */
.share-table { width: 100%; }
.share-table td { border-bottom: 1px solid var(--line); padding: 8px 10px 8px 0; vertical-align: middle; }
.share-table tr:last-child td { border-bottom: none; }
.share-name { font-size: 14px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-bar { width: 45%; padding-right: 12px !important; }
.share-bar span { display: block; height: 8px; border-radius: 4px; background: var(--accent); opacity: .8; min-width: 2px; }
.share-pct { color: var(--muted); font-size: 12.5px; width: 54px; }
.share-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.total-row td { border-top: 2px solid var(--line); border-bottom: none; }
td.neg { color: var(--red); }

/* A plain-English aside under a figure — what it is built from, or what to be careful of. */
.report-note { margin-top: 14px; padding: 12px 14px; background: #f7f9fd; border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 13px; line-height: 1.55; color: #46506a; }
.report-note.warn { background: var(--amber-soft); border-color: #f0dfae; color: #6b4b06; }
.report-note strong { color: var(--ink); }
.report-note.warn strong { color: #5a3f05; }

.settled { font-size: 12.5px; color: var(--green); white-space: nowrap; }

/* The profit and loss column: sub-lines indented under what they add up to */
.pl td { padding: 8px 10px 8px 0; }
.pl .sub-row td { color: var(--muted); padding-left: 16px; font-size: 13px; }
.pl .sub-row td:first-child { padding-left: 16px; }
.pl .link { margin-left: 8px; }

.handover { margin-top: 14px; }
.handover table td { font-size: 15px; padding: 9px 10px; }
.handover table td.num { font-size: 16px; }

/* Change against last year, beside the figure rather than under it */
.delta { font-size: 12.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px; vertical-align: 3px; margin-left: 6px; }
.delta.up { background: var(--green-soft); color: var(--green); }
.delta.down { background: var(--red-soft); color: var(--red); }
.delta.flat { background: #eef0f4; color: var(--muted); }

/* The report is meant to be printed and handed over, so it gets a proper header on paper and
   loses everything that only makes sense on screen. */
.print-head { display: none; }
@media print {
  #sidebar, .no-print, .view-head { display: none !important; }
  #main { margin: 0 !important; width: 100% !important; padding: 0 !important; max-width: none !important; }
  body { background: #fff; }
  .print-head { display: block; margin-bottom: 18px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
  .print-head h1 { font-size: 20px; margin: 0 0 2px; }
  .print-head div { font-size: 13px; color: var(--muted); }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; margin-bottom: 12px; }
  .report-grid { display: block; }
  .report-grid .card { margin-bottom: 12px; }
  .kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
  .share-bar span { background: #888 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .delta { border: 1px solid #ccc; background: none !important; color: #333 !important; }
}

/* Print (invoice PDF) */
@media print {
  body > #app, #toast-root, #modal-root { display: none !important; }
  #print-root { display: block !important; }
  body { background: #fff; }
}
#print-root { display: none; }
.inv-print { font-size: 14px; color: #111; max-width: 720px; margin: 0 auto; padding: 30px 10px; }
.inv-print header { display: flex; justify-content: space-between; margin-bottom: 34px; }
.inv-print .biz-name { font-size: 22px; font-weight: 700; }
.inv-print .inv-title { font-size: 28px; font-weight: 300; letter-spacing: .1em; color: #555; text-align: right; }
.inv-print .meta { text-align: right; font-size: 13px; color: #444; margin-top: 6px; }
.inv-print .parties { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 24px; font-size: 13px; }
.inv-print .parties > div { flex: 1; }
.inv-print .meta-table { background: #f5f5f5; font-size: 13px; }
.inv-print .meta-table td { border-bottom: 1px solid #fff; padding: 7px 12px; }
.inv-print table { margin: 10px 0 6px; }
.inv-print th { border-bottom: 2px solid #222; color: #222; }
.inv-print td { border-bottom: 1px solid #e5e5e5; }
.inv-print .totals { margin-left: auto; width: 260px; font-size: 14px; margin-top: 12px; }
.inv-print .totals div { display: flex; justify-content: space-between; padding: 4px 0; }
.inv-print .totals .grand { border-top: 2px solid #222; font-weight: 700; font-size: 16px; padding-top: 8px; margin-top: 4px; }
.inv-print .foot { margin-top: 36px; font-size: 12.5px; color: #555; white-space: pre-wrap; }

/* ---------- Signed-out screens ---------- */
body.signed-out { background: var(--bg); }
/* #app is a flex row for the sidebar layout. Signed out there is no sidebar, so it becomes a
   plain block — otherwise the card is a flex item and sits hard against the left edge. */
body.signed-out #app { display: block; }
.auth-wrap { min-height: 100vh; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 32px 20px; gap: 14px; }
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 32px 26px; width: 100%; max-width: 400px; }
/* The wordmark is a link everywhere it appears — the way back from a screen that is otherwise
   a dead end. It must not look like body copy with an underline, so the anchor is stripped
   back to what the old <div> looked like and only lifts on hover. */
.auth-brand { display: inline-block; font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  margin-bottom: 20px; color: var(--accent); text-decoration: none; }
.auth-brand span { color: var(--muted); font-weight: 600; margin-left: 3px; }
a.auth-brand { cursor: pointer; }
a.auth-brand:hover { opacity: .78; }
a.auth-brand:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; }
.auth-card h1 { font-size: 20px; margin: 0 0 6px; }
.auth-intro { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; line-height: 1.5; }
/* Something went wrong, said in place rather than in a toast that vanishes. Used where the
   person needs to still be reading it while they decide what to do — a failed restore, say. */
.err-text { color: var(--red); }

/* How much of the allowance these books have used. A bar rather than a number alone, because
   "184 MB of 250 MB" needs arithmetic and a bar does not. */
.storage-track { height: 7px; background: #eef0f4; border-radius: 4px; overflow: hidden; }
.storage-track span { display: block; height: 100%; background: var(--accent); border-radius: 4px;
  transition: width .3s; min-width: 2px; }
.storage-track span.high { background: var(--amber); }
.storage-track span.full { background: var(--red); }

/* Prose where a form would normally be — the "sign-ups are shut" explanation. Slightly
   darker than .auth-intro because this is the message, not a subtitle above one. */
.auth-note { color: var(--ink); font-size: 13.5px; line-height: 1.6; margin: 0 0 14px; }
.auth-note a { color: var(--accent); }
.auth-field { display: block; margin-bottom: 14px; }
.auth-field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.auth-field small { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; line-height: 1.4; }
.auth-pw { position: relative; display: block; }
.auth-pw input { padding-right: 62px; }
.auth-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--muted); font-size: 12.5px; font-weight: 600;
  padding: 5px 8px; cursor: pointer; box-shadow: none; }
.auth-eye:hover { color: var(--accent); background: none; }
.auth-submit { width: 100%; margin-top: 6px; justify-content: center; }
.auth-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); text-align: center; }
.auth-foot a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.auth-sep { margin: 0 6px; opacity: .5; }
.auth-msg { font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px;
  background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); }
.auth-msg.error { background: #fdeceb; border-color: #f3c4c0; color: #8a2018; }
.auth-msg.ok { background: #eaf6ef; border-color: #bfe3cd; color: #14603a; }
.auth-locallink { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--accent); }
.auth-legal { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0; }
.auth-legal a { color: var(--muted); text-decoration: underline; }

/* Business switcher inside the account menu */
.biz-switch { padding: 4px 0; }
.biz-switch-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 6px 12px 4px; font-weight: 600; }
.biz-menu-item.current { color: var(--accent); font-weight: 600; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -6px 0 18px; }
a.tab { text-decoration: none; }
.tab {
  appearance: none; background: none; border: 0; box-shadow: none;
  padding: 9px 16px; margin-bottom: -1px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
}
.tab:hover { color: var(--ink); background: rgba(36,86,230,.05); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); background: none; }
.tab:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
.tab-actions { margin-top: 16px; }

/* Settings columns: cards stack in the column they were put in, rather than being
   auto-placed by the grid and leaving ragged gaps between them. */
.two-col > .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* A field that has been complained about, and where the complaint appears */
.auth-field.bad input { border-color: #d9534f; }
.auth-field.bad input:focus { outline-color: #fbdad8; border-color: #d9534f; }
.auth-field.bad > span { color: #8a2018; }
.auth-err { display: block; color: #8a2018; font-size: 12.5px; margin-top: 5px; line-height: 1.4; }
.auth-hint { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; line-height: 1.4; }

/* ---------- Setting up a new business ---------- */
.auth-card.wide { max-width: 620px; }
.setup-progress { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.setup-dot { width: 26px; height: 4px; border-radius: 2px; background: var(--line); }
.setup-dot.done { background: #9db9f7; }
.setup-dot.now { background: var(--accent); }
.setup-count { margin-left: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.setup-body { margin-bottom: 4px; }
.setup-body .row { display: flex; gap: 12px; flex-wrap: wrap; }
.setup-body .row > .auth-field { flex: 1; min-width: 180px; }
.setup-body .cur-grid { max-height: 260px; overflow-y: auto; padding: 2px; }
.setup-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
}
.setup-nav-right { display: flex; gap: 8px; align-items: center; }

/* A card for something you cannot undo */
.danger-card { border-color: #f0c8c4; }
.danger-card h2 { color: var(--red); }
.doc a { color: var(--accent); }

/* About and Terms read by someone who has not signed in */
.public-wrap { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; }
.public-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 22px; }
.public-head .auth-brand { margin: 0; }
.public-body .view-head { margin-bottom: 18px; }
.public-body .doc { display: flex; flex-direction: column; gap: 14px; }
.public-wrap .auth-legal { margin-top: 26px; }