/* ===================================================================
   Aurelius — the approved look, taken straight from the mockup file.
   Paper white, form-book type (Archivo + Source Serif 4), PURPLE AND
   GOLD, silks squares as horse avatars, ledger tables with tabular
   figures.

   The gold is the logo's own colour, read straight out of
   "Aurelius Thoroughbreds.png": every solid pixel in that file is
   #D3A62E. The purple is its partner — deep and heraldic, dark enough
   to carry white text on a button.

   Purple does everything the racing green used to do: buttons, active
   tabs, links, highlights, positive figures. Gold is the SECONDARY
   accent and is used sparingly — the underline beneath an active tab,
   the silks band, a rule or two. Paper, type and layout are unchanged.
   =================================================================== */

/* HIDDEN MEANS HIDDEN. The `hidden` attribute is only the browser's own
   `display: none`, and any rule here that gives an element a display of its
   own — a button, a tick-box row, the camera's picture — quietly beats it. That
   is how the recorder came to show Stop, Flip camera and an empty black screen
   before anything had been pressed. One rule, so no screen has to remember. */
[hidden] { display: none !important; }

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/Archivo.ttf') format('truetype');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4-Italic.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #FCFCFA;
  --ink: #15150F;

  /* The brand. Gold is the logo's exact colour; purple is its partner. */
  --purple: #4B2E64;
  --purple-deep: #3A2350;      /* hover / pressed */
  --gold: #D3A62E;             /* the logo, exactly */
  --gold-deep: #A8811F;        /* gold text on paper, where it must be read */
  --gold-line: #E7D3A0;
  --gold-tint: #FBF6E9;

  --chalk: #87877E;
  --line: #E4E4DE;
  --red: #A93A2A;
  --amber: #B07C1E;
  /* Racing green. The one place it is used is the unread badge on a member's
     Updates tab, where it has to read as "something new for you" without
     competing with the gold. Deep enough to carry white text. */
  --green: #2F6B4C;
  --card: #FFFFFF;
  --tint: #F4F1F7;             /* the palest purple — panels, flashes, pills */
  --tint-line: #C9BAD6;

  /* THE PAGE GUTTER — the space between the content and the edge of the
     screen. Set once, here, and used by the page container and nothing else,
     so every card, banner, heading and line of text sits inside it without
     being told to. 16px on a phone. */
  --gutter: 24px;
}
@media (max-width: 560px) { :root { --gutter: 16px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: 'Source Serif 4', Georgia, serif; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* ---------- page chrome ---------- */
/* `.wrap` is the page container and the ONLY thing that sets the gutter. Any
   rule that goes on the same element must leave its left and right padding
   alone — set padding-top and padding-bottom by name, never the shorthand. */
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 720px; }

.topbar {
  border-bottom: 1px solid var(--line);
  background: #FAFAF7;
  position: sticky; top: 0; z-index: 20;
}
.topline {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; padding: 14px 0;
}
/* ---------- the mark ----------
   The logo replaces the text wordmark in every header and on both login
   screens. It is a wide, transparent PNG at 1033×574, so it is sized by
   HEIGHT and left to find its own width; `height: auto` on the image with a
   fixed height on the box would letterbox it. Rendering it at roughly half
   its natural size keeps it crisp on a 2× phone screen without asking the
   phone to download anything extra. */
.brand { display: flex; align-items: center; }
.brand a { display: block; line-height: 0; }
.brand img { display: block; height: 34px; width: auto; }
@media (max-width: 560px) { .brand img { height: 28px; } }

/* On the login card and the other one-thing-only screens it stands alone,
   centred, and can afford to be bigger. */
.mark { display: block; margin: 0 auto 18px; }
.mark img { display: block; height: 74px; width: auto; max-width: 100%; margin: 0 auto; }
@media (max-width: 560px) { .mark img { height: 60px; } }
.tabs { display: flex; gap: 22px; font-size: 13px; color: var(--chalk); font-weight: 600; letter-spacing: .03em; flex-wrap: wrap; }
.tabs a { padding-bottom: 3px; border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--gold); }
.whoami { font-size: 12px; color: var(--chalk); }
.whoami b { color: var(--ink); font-weight: 600; }

main { padding: 26px 0 70px; }

h1.screen-title, h3.screen-title {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
  font-size: 23px; margin: 4px 0 2px;
}
h2.section {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
  font-size: 19px; margin: 30px 0 10px;
}
p.sub { color: var(--chalk); font-size: 13.5px; margin-bottom: 18px; }
p.note { color: var(--chalk); max-width: 640px; margin-bottom: 18px; font-size: 13.5px; }

/* ---------- silks ---------- */
.silk {
  width: 26px; height: 26px; border-radius: 4px; flex: none;
  border: 1px solid rgba(0,0,0,.15); display: inline-block; vertical-align: middle;
  background: var(--sa, #4B2E64);
}
.silk.lg { width: 34px; height: 34px; }
.silk.xl { width: 46px; height: 46px; border-radius: 6px; }
.silk.quarter { background: conic-gradient(var(--sa) 0 90deg, var(--sb) 90deg 180deg, var(--sa) 180deg 270deg, var(--sb) 270deg 360deg); }
.silk.hoop    { background: linear-gradient(var(--sa) 0 38%, var(--sb) 38% 62%, var(--sa) 62% 100%); }
.silk.sash    { background: linear-gradient(135deg, var(--sa) 0 44%, var(--sb) 44% 56%, var(--sa) 56% 100%); }
.silk.spot    { background: radial-gradient(circle at 50% 50%, var(--sb) 0 22%, var(--sa) 22%); }
.silk.plain   { background: var(--sa); }
.silk.stripe  { background: repeating-linear-gradient(90deg, var(--sa) 0 25%, var(--sb) 25% 50%); }
.silk.star    { background: var(--sa); position: relative; }
.silk.star::after {
  content: '★'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: var(--sb); font-size: 15px; line-height: 1;
}
.silk.chevron { background: linear-gradient(135deg, var(--sa) 0 33%, var(--sb) 33% 66%, var(--sa) 66% 100%); }

/* ---------- panels & cards ---------- */
.panel {
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; padding: 20px 22px; margin-bottom: 20px;
}
.panel h5 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--chalk); font-weight: 700; margin-bottom: 12px;
}
.panel.flush { padding: 0; overflow: hidden; }
.panel.flush h5 { padding: 18px 22px 0; }
.panel.flush table { margin-bottom: 0; }
.panel.flush table td:first-child, .panel.flush table th:first-child { padding-left: 22px; }
.panel.flush table td:last-child, .panel.flush table th:last-child { padding-right: 22px; }

.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: start; }
.even-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 840px) {
  .two-col, .even-col { grid-template-columns: 1fr; gap: 0; }
  /* A grid column is never narrower than its widest content unless it is told
     it may be — so a wide table, even inside its own scrolling box, pushed the
     whole column (and the page) past the edge of a phone. Told here, once the
     columns have stacked, so the table scrolls in its box instead. */
  .two-col > *, .even-col > * { min-width: 0; }
}

/* A file path or anything else with no spaces in it, which would otherwise run
   straight off a narrow screen. */
.break-any, .kv b.break-any { overflow-wrap: anywhere; white-space: normal; }

.kv { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: none; }
.kv b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.kv.strong span { font-weight: 700; }

/* A component of the figure on the line below it: indented, quieter, and with
   no rule under it, so the eye reads the parts as belonging to the total. */
.kv.sub-line { padding-left: 14px; border-bottom: none; color: var(--chalk); padding-top: 4px; padding-bottom: 4px; }
.kv.sub-line b { font-weight: 500; color: var(--ink); }
.kv.sub-line .tiny { font-weight: 400; }

/* ---------- summary chips ---------- */
.chips { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 22px; }
.chip { border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; min-width: 150px; background: #FDFDFB; }
.chip small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); font-weight: 700; margin-bottom: 3px; }
.chip strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pos { color: var(--purple); }
.neg { color: var(--red); }
.muted { color: var(--chalk); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
th {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk);
  text-align: left; font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
td { padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
td.r, th.r { text-align: right; }
td.c, th.c { text-align: center; }
tr.total td { border-bottom: none; border-top: 2px solid var(--ink); font-weight: 700; padding-top: 14px; }
tr.reversed td { color: var(--chalk); text-decoration: line-through; }
tbody tr:hover td { background: #FDFDFB; }

.horse { display: flex; align-items: center; gap: 11px; }
.horse .nm { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 15.5px; letter-spacing: .01em; }
.horse .meta { font-size: 12px; color: var(--chalk); }

/* Pedigree — sire × dam, set in the form-book italic directly under the name,
   a shade lighter than the name and a shade darker than the meta line beneath,
   so the three lines read as a hierarchy rather than a stack. */
.ped {
  font-family: 'Source Serif 4', Georgia, serif; font-style: italic;
  font-size: 12.5px; color: #6E6E64; line-height: 1.35; margin-top: 1px;
}
.ped a { text-decoration: none; }
.ped a:hover { text-decoration: underline; }
.pname + .ped, .horse-head .ped { font-size: 14px; margin: 2px 0 0; }

/* The silks editor: the silk drawn large, its three controls beside it. */
.silks-edit .silks-row { display: flex; gap: 18px; align-items: flex-start; }
.silks-edit .silk.xl { width: 62px; height: 62px; border-radius: 8px; margin-top: 18px; }
.silks-edit .silks-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; flex: 1; }
.silks-edit .field { margin-bottom: 0; }
.silks-edit input[type=color] {
  width: 100%; height: 40px; padding: 3px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; cursor: pointer;
}
.silks-edit p.tiny { margin-top: 10px; }
@media (max-width: 640px) {
  .silks-edit .silks-row { flex-direction: column; align-items: center; gap: 12px; }
  .silks-edit .silk.xl { margin-top: 0; }
  .silks-edit .silks-fields { grid-template-columns: 1fr 1fr; width: 100%; }
  .silks-edit .silks-fields .field:first-child { grid-column: 1 / -1; }
}
.bal { font-weight: 700; }

.tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; color: var(--chalk); background: #FAFAF7; white-space: nowrap;
}
.tag.brand { color: var(--purple); border-color: var(--tint-line); background: var(--tint); }
.tag.gold { color: var(--gold-deep); border-color: var(--gold-line); background: var(--gold-tint); }
.tag.red { color: var(--red); border-color: #E3C2BA; background: #FBF2EF; }
.tag.amber { color: var(--amber); border-color: #E7D6AE; background: #FBF7EC; }

.scroll-x { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/* ---------- tasks ---------- */
.task { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.task:last-child { border-bottom: none; }
.task .body { flex: 1; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 6px; background: #D8D8D0; }
.dot.done { background: var(--purple); }
.dot.due, .dot.overdue { background: var(--red); }
.dot.amber { background: var(--amber); }
.task small { display: block; color: var(--chalk); font-size: 12px; }

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-block; background: var(--purple); color: #fff; border: 1px solid var(--purple);
  border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: 14px;
  letter-spacing: .02em; text-align: center;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.danger { background: var(--red); border-color: var(--red); }
.btn.block { display: block; width: 100%; padding: 13px; border-radius: 12px; }
.btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); font-weight: 700; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=file], select, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 10px 12px; font: inherit; font-size: 14.5px; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
textarea { min-height: 96px; resize: vertical; }
.field { margin-bottom: 14px; }
.field .hint { font-size: 12px; color: var(--chalk); margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .row2, .row3 { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.check input { width: auto; }
.check label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); font-weight: 500; }

fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
legend { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk); font-weight: 700; padding: 0 6px; }

/* ---------- the monthly income and expenditure table ----------
   Categories down the side, months across. A twelve-month range is wider than
   a laptop and much wider than a phone, so the table scrolls sideways inside
   its own box and the category column is pinned to the left edge: a figure
   with no row label is no use to anybody. */
.monthly-scroll { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
table.monthly { margin-bottom: 0; min-width: 100%; }
table.monthly th, table.monthly td { white-space: nowrap; }
table.monthly td { font-size: 13.5px; padding: 9px 12px; }
table.monthly th { padding: 10px 12px; }

table.monthly .sticky {
  position: sticky; left: 0; z-index: 2;
  background: #fff; text-align: left;
  min-width: 172px; max-width: 240px;
  white-space: normal;
  box-shadow: 1px 0 0 var(--line);
}
table.monthly thead th.sticky { background: #FAFAF7; z-index: 3; }
table.monthly tbody tr:hover td { background: #FDFDFB; }
table.monthly tbody tr:hover td.sticky { background: #FDFDFB; }

table.monthly tr.section td {
  background: #FAFAF7; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--chalk); font-weight: 700;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
}
table.monthly tr.subtotal td { font-weight: 700; border-top: 1px solid var(--ink); }
table.monthly tr.subtotal td.sticky { background: #fff; }
table.monthly tfoot tr.total td {
  border-top: 2px solid var(--ink); border-bottom: none;
  font-weight: 700; padding-top: 13px; padding-bottom: 13px;
}
table.monthly tfoot tr.total td.sticky { background: #fff; }
table.monthly .total-col { border-left: 2px solid var(--ink); font-weight: 700; }

@media (max-width: 560px) {
  table.monthly td { font-size: 12.5px; padding: 8px 10px; }
  table.monthly .sticky { min-width: 130px; }
}

/* ---------- an invoice, split into lines ----------
   A grid rather than a table, so a row can wrap onto a phone without the
   columns coming apart. The diamond and the gold edge mark the lines that come
   off the prize money pot. */
fieldset.lines { padding: 16px 18px; }
.line-head, .line-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) minmax(140px, 1.6fr) 110px 100px 40px;
  gap: 10px; align-items: center;
}
/* A stud or livery bill names a horse per line, so the breeding side carries
   one column more. Racing invoices are one horse and keep the shorter row. */
.line-head.with-horse, .line-row.with-horse {
  grid-template-columns: minmax(130px, 1.1fr) minmax(130px, 1.2fr) minmax(120px, 1fr) 110px 100px 40px;
}
.line-head.with-horse span:nth-child(3) { text-align: left; }
.line-head.with-horse span:nth-child(4), .line-head.with-horse span:nth-child(5) { text-align: right; }
.line-head {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--chalk); font-weight: 700; margin-bottom: 8px;
}
.line-head span:nth-child(3), .line-head span:nth-child(4) { text-align: right; }
.line-row { margin-bottom: 10px; padding-left: 9px; border-left: 3px solid transparent; }
.line-row.pot { border-left-color: var(--gold); background: var(--gold-tint); border-radius: 0 8px 8px 0; padding: 6px 6px 6px 9px; }
.line-row input, .line-row select { padding: 8px 10px; font-size: 14px; }
.line-row input[type=number] { text-align: right; }
.line-row .js-drop { padding: 8px 0; width: 100%; }
/* "Which race" — a second line under a racing cost, across the whole row. It is
   there only when the category comes off the prize money pot. */
.line-row .line-race {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  /* A grid item is as wide as its widest content unless told otherwise, and a
     select is as wide as its longest option — so on a phone this pushed the
     row off the screen. */
  min-width: 0;
}
.line-row .line-race[hidden] { display: none; }
.line-row .line-race label { margin: 0; font-size: 12px; color: var(--gold-deep); font-weight: 600; }
.line-row .line-race select { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.line-row > * { min-width: 0; }
.line-total { margin-left: auto; align-self: center; }
.line-total b { font-variant-numeric: tabular-nums; color: var(--ink); font-size: 14px; }

@media (max-width: 720px) {
  .line-head { display: none; }
  /* `.with-horse` is named as well: its six-column rule above is the more
     specific of the two, and without it here a bill that could be split
     across horses kept all six columns on a phone — 680px of them. */
  .line-row.with-horse, .line-row {
    grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 10px; border: 1px solid var(--line); border-radius: 10px;
    border-left-width: 3px; margin-bottom: 12px;
  }
  .line-row select, .line-row input[type=text] { grid-column: 1 / -1; }
  .line-row .js-drop { grid-column: 1 / -1; }
}

/* ---------- messages ---------- */
.flash { border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; border: 1px solid; }
.flash.ok { background: var(--tint); border-color: var(--tint-line); color: var(--purple); }
.flash.bad { background: #FBF2EF; border-color: #E3C2BA; color: var(--red); }
.flash.info { background: #FAFAF7; border-color: var(--line); color: var(--ink); }
.notconnected {
  border: 1px dashed var(--chalk); border-radius: 10px; padding: 12px 16px;
  font-size: 13px; color: var(--chalk); background: #FAFAF7; margin-bottom: 18px;
}
.notconnected b { color: var(--ink); }

/* ---------- statement ---------- */
.stmt { max-width: 640px; border: 1px solid var(--line); border-radius: 12px; padding: 30px 34px; background: #fff; }
.stmt .hd { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 6px; gap: 16px; }
.stmt .hd h4 { font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; font-weight: 600; }
.stmt .hd p { font-size: 12.5px; color: var(--chalk); margin-top: 2px; }
.stmt table td { font-size: 13.5px; padding: 10px 6px; }
.stmt .payline {
  margin-top: 18px; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 10px;
  padding: 14px 18px; display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; color: var(--purple); gap: 12px;
}
.stmt .vatnote { font-size: 12px; color: var(--chalk); margin-top: 12px; }

/* The statement's two directions, each with its own heading. */
.stmt-section { margin: 22px 0 4px; padding-left: 11px; border-left: 3px solid var(--line); }
.stmt-section:first-of-type { margin-top: 14px; }
.stmt-section h5 {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
  font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0;
}
.stmt-section.owed { border-left-color: var(--purple); }
.stmt-section.topay { border-left-color: var(--red); }
.stmt-sub { font-size: 12px; color: var(--chalk); margin: 3px 0 0; line-height: 1.45; }

/* ---------- a member's two accounts, in plain sentences ---------- */
/* PRIZE MONEY and FEES. The number lives inside the sentence — no label above
   a figure with a hint beneath it. */
.money-line {
  font-size: 14.5px; line-height: 1.5; margin: 0 0 4px; color: var(--ink);
}
.money-line b { font-variant-numeric: tabular-nums; font-weight: 700; }
.money-line.big { font-size: 17px; margin-bottom: 6px; }
.money-line.owing { color: var(--red); }
.money-line.owing b { color: var(--red); }
.money-line.clear { color: var(--chalk); }
.hcard .money-line { margin-top: 6px; }
.hcard .money-line:first-of-type { margin-top: 10px; }

/* The "to pay" banner that heads the portfolio. */
.topay-banner {
  border: 1px solid #E3C2BA; background: #FBF2EF; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px; font-size: 14px; color: var(--red); font-weight: 600;
}
.topay-banner a { text-decoration: underline; }

/* ---------- the payments table ---------- */
.pay-total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pay-total .figure { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-total .figure.owing { color: var(--red); }
.pay-total .figure.clear { color: var(--purple); }

table.pay tr.outstanding td { background: #FDF5F3; }
table.pay tr.outstanding td:first-child { box-shadow: inset 3px 0 0 var(--red); }
table.pay tr.failed td { background: #FBF2EF; }
table.pay tr.paid td:first-child { box-shadow: inset 3px 0 0 var(--purple); }
table.pay td .what, .stmt td .what { font-size: 12px; color: var(--chalk); line-height: 1.35; }
table.pay .amt { font-weight: 700; }

/* A member's Races page for one horse: five short columns that have to sit on
   a phone side by side — at the usual spacing "Runners" slid off the edge. */
table.results th, table.results td { padding-left: 7px; padding-right: 7px; }
table.results th { letter-spacing: 0.03em; }
table.results th:first-child, table.results td:first-child { padding-left: 2px; }
table.results th:last-child, table.results td:last-child { padding-right: 2px; }

.seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.seg a {
  flex: 1; text-align: center; padding: 9px 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: var(--chalk); border-right: 1px solid var(--line);
}
.seg a:last-child { border-right: none; }
.seg a:hover { text-decoration: none; color: var(--ink); }
.seg a.on { background: var(--ink); color: #fff; }
.seg a.on.owing { background: var(--red); }
.seg a.on.done { background: var(--purple); }

/* The statement is drawn at 640px. On a phone it keeps all four columns —
   a statement with a column missing is not a statement. The date and the two
   figure columns are never broken; the item text is the one thing allowed to
   wrap, so the table gives the figures the room they need and squeezes the
   description instead of pushing the page sideways. */
.stmt table { table-layout: auto; }
.stmt table td:nth-child(2) { overflow-wrap: anywhere; }
.stmt table td:nth-child(1),
.stmt table td:nth-child(3), .stmt table th:nth-child(3),
.stmt table td:nth-child(4), .stmt table th:nth-child(4) { white-space: nowrap; }

@media (max-width: 560px) {
  .stmt { padding: 20px 16px; }
  .stmt .hd { flex-direction: column; gap: 10px; }
  .stmt .hd .action { align-items: flex-start; width: 100%; }
  .stmt .hd .action p { text-align: left !important; }
  .stmt table td, .stmt table th { padding: 9px 4px; font-size: 12.5px; }
  .stmt table th { letter-spacing: .06em; }
  .stmt .payline { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- member portal (phone first) ---------- */
/* Top and bottom only. This sits on the same element as `.wrap`, and written
   as the shorthand `4px 0 30px` it zeroed the gutter — every member page ran
   edge to edge on a phone, and nothing noticed, because nothing overflowed. */
.pcontent { padding-top: 4px; padding-bottom: 30px; }
.phead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.phead .who { font-size: 12px; color: var(--chalk); }
.phead .who b { display: block; color: var(--ink); font-size: 13.5px; }
.pname { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.15; }
.pline { font-size: 13px; color: var(--chalk); margin: 4px 0 14px; }
.pbal {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; margin-bottom: 10px;
}
.pbal small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); font-weight: 700; }
.pbal strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.nextrace {
  border: 1px solid var(--tint-line); background: var(--tint); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; margin-bottom: 16px; color: var(--purple); font-weight: 600;
}
.nextrace.compact { padding: 8px 13px; font-size: 13px; }
.feedlbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk); font-weight: 700; margin: 20px 0 8px; }

.hcard {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px;
}
.hcard:hover { text-decoration: none; border-color: var(--tint-line); }
.hcard .top { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.hcard .nm { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 18px; }
.hcard .meta { font-size: 12.5px; color: var(--chalk); }

.post { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 12px; }
.post .media { display: block; width: 100%; background: linear-gradient(160deg, #E7E0EE, #C6B5D6 55%, #9E8CB2); }
.post .media img, .post .media video { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; background: #E7E0EE; }
.post .body { padding: 12px 14px 14px; }
.post .from { font-size: 11.5px; color: var(--chalk); margin-bottom: 4px; }
/* Whose horse this is — on the Updates tab, where every horse is mixed in. */
.post-badge {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); background: #FAFAF7;
}
.post-badge .who { display: inline-flex; align-items: center; gap: 8px; }
.post-badge .silk { width: 20px; height: 20px; border-radius: 3px; }
.post-badge b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.post .txt { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.pill-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--chalk); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  background: #fff; display: inline-block;
}
.pill.brand { color: var(--purple); border-color: var(--tint-line); background: var(--tint); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 10px; }
.thumbs img, .thumbs video { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }

/* composer */
.comp-media { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.comp-media .thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
/* A voice note has nothing to show, so it gets a tile rather than a thumbnail. */
.comp-media .thumb-audio {
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--purple); font-size: 24px; line-height: 1;
}

/**
 * A VOICE NOTE IN A POST.
 *
 * Deliberately not dressed up as a photo: no gradient, no 16:9 box. It is a
 * line of controls on paper, the full width of the card, with enough height
 * either side that a thumb finds the play button on a phone.
 */
.post .voice { padding: 12px 14px 2px; }
.post .voice audio { display: block; width: 100%; height: 40px; }

/**
 * A heading with a button on the right of it — "This season      [Add race]".
 *
 * Lives inside a `.panel.flush`, which has no padding of its own, so this row
 * carries it. The h5 inside is told to drop the padding `.panel.flush h5` would
 * otherwise give it — that rule is the more specific of the two, so it has to
 * be overridden by name or the heading ends up indented twice over and the
 * button sits off the right edge.
 */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
}
.panel-head h5,
.panel.flush .panel-head h5 { margin-bottom: 0; padding: 0; }
/* Clear of the border on every side, not just the two the row gives it. */
.panel-head .btn { flex: 0 0 auto; margin: 0; }

/**
 * A sheet — a form that comes up over the page rather than sitting open
 * underneath it. Used by Add race, where the form is long enough that having it
 * permanently on the screen buried the table it belongs to.
 *
 * On a phone it is the whole screen; on a laptop a column in the middle. It
 * scrolls inside itself so the head and the button stay put.
 */
dialog.sheet {
  width: min(680px, 100%); max-width: 100%;
  max-height: 100dvh; height: auto;
  margin: auto; padding: 0; border: 0; border-radius: 14px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px rgba(21, 21, 15, .28);
  overflow: hidden;
}
dialog.sheet::backdrop { background: rgba(21, 21, 15, .45); }
/* The Bank list: each waiting line carries its own posting. The dropdowns sit
   one under another in their cell and are no wider than the cell. */
.bank-lines td.post-to { min-width: 250px; max-width: 320px; }
.bank-lines .js-row select, .bank-lines .js-row input[type=text] {
  display: block; width: 100%; padding: 6px 8px; font-size: 13px; margin: 0 0 4px;
}
.bank-lines .js-row [hidden] { display: none; }
.bank-lines td { vertical-align: top; }

/* The bank transactions ledger: a cash book. What each line has become is a
   quiet note beside the figures, and a fixed date or amount looks fixed. */
.bank-ledger td { vertical-align: top; }
.bank-ledger td.what { font-size: 12.5px; color: var(--chalk); min-width: 150px; }
/* Its sheet is a short form, so it is as tall as the form and no taller. */
dialog.sheet.line-sheet { width: min(560px, 100%); height: fit-content; }
.line-sheet input:disabled { background: #FAFAF7; color: var(--chalk); }

/* "Received on [date] [Mark paid]" — the date sits beside its button, and the
   date box is no wider than a date. */
.inline-form.paid-on { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.inline-form.paid-on input[type=date] { width: auto; padding: 5px 8px; font-size: 13px; }

/* A race's breakdown is read, not filled in, so it is narrower than a form and
   scrolls as one piece. A row that opens one says so with the pointer. */
dialog.sheet.race-sheet { width: min(520px, 100%); height: fit-content; }
dialog.sheet.race-sheet[open] { display: flex; flex-direction: column; }
tr.race-row { cursor: pointer; }
tr.race-row:hover td, tr.race-row:focus-visible td { background: var(--tint); }
tr.race-row:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
dialog.sheet form { display: flex; flex-direction: column; max-height: 100dvh; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line); background: #fff;
}
.sheet-head h2 { font-size: 17px; margin: 0; }
.sheet-body { overflow-y: auto; padding: 18px 20px 4px; -webkit-overflow-scrolling: touch; }
.sheet-body .panel:last-child { margin-bottom: 14px; }
.sheet-foot { padding: 14px 20px 18px; border-top: 1px solid var(--line); background: #fff; }
@media (max-width: 560px) {
  dialog.sheet { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* The recorders in the composer — one for video, one for a voice note. */
/* `overflow: hidden` is the backstop: whatever the camera reports, nothing in
   here is allowed outside the card. */
.rec { padding: 4px 0 2px; overflow: hidden; }
.rec + .rec { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; }
.rec .btn-row { align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-time {
  font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: var(--red);
}
/* The camera's pop-out: the picture, with Stop under it. As tall as it needs to
   be on a laptop; the whole screen on a phone, where the picture takes all the
   room the head and the buttons leave. It can open over another sheet (Add
   race), and sits on top of it. */
dialog.sheet.rec-pop { width: min(720px, 100%); height: fit-content; }
dialog.sheet.rec-pop[open] { display: flex; flex-direction: column; }
.rec-pop .sheet-body { padding-top: 14px; }
.rec-pop .rec-stage { margin-top: 0; max-height: min(64dvh, 420px); }
.rec-pop .js-pop-hint { margin: 8px 0 12px; }
.rec-pop .sheet-foot .btn-row { margin-top: 0; align-items: center; }
@media (max-width: 560px) {
  dialog.sheet.rec-pop { height: 100dvh; }
  .rec-pop .sheet-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .rec-pop .rec-stage { flex: 1 1 auto; min-height: 0; max-height: none; aspect-ratio: auto; height: auto; }
}
/**
 * The live camera, and the playback afterwards: the same box, so pressing stop
 * does not make the panel jump.
 *
 * IT MUST STAY INSIDE THE CARD WHATEVER THE CAMERA HANDS IT. A `<video>` is a
 * replaced element: its intrinsic size is the stream's own, 1280×720 from a
 * laptop and 1080×1920 from a phone held upright. Left to itself it lays out at
 * that size and pushes straight out of the panel. So the BOX is fixed here — a
 * 16:9 frame that never exceeds the card's width or a sensible slice of the
 * viewport — and `object-fit: contain` letterboxes the picture inside it. A
 * portrait clip then sits in the middle with dark bars either side, which is
 * what it will look like to a member anyway.
 */
.rec-stage {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* Never taller than the box above, and never more than a screenful. */
  max-height: min(60vh, 340px);
  margin-top: 10px;
  border-radius: 10px;
  background: #1B1420;
  object-fit: contain;
}
.comp-media .add {
  width: 64px; height: 64px; border-radius: 10px; border: 1.5px dashed var(--chalk);
  display: flex; align-items: center; justify-content: center; color: var(--chalk);
  font-size: 22px; font-weight: 300;
}

/* The member's menu sits at the top of every one of their screens. */
/* The member's four tabs, in the same small-caps as a table header, spread
   evenly across the width of the bar rather than bunched to the left. */
.member-nav {
  display: flex; justify-content: space-between; gap: 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 0 2px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--chalk); scrollbar-width: none;
}
.member-nav::-webkit-scrollbar { display: none; }
.member-nav a {
  white-space: nowrap; padding-bottom: 6px; border-bottom: 2px solid transparent;
}
.member-nav a:hover { color: var(--ink); text-decoration: none; }
.member-nav a.on { color: var(--purple); border-bottom-color: var(--gold); }
/**
 * "(2)" beside Updates when there is something unread, and beside Documents
 * when an agreement is waiting for their tick — one per agreement.
 *
 * Green, and the only green on the site, so it means one thing: there is
 * something new for you. It stays inside the tab's own small caps rather than
 * being a floating dot, because the tabs already scroll on a narrow phone and
 * an absolutely positioned bubble would be the thing that overflows.
 */
.member-nav a .new {
  color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: 0;
  margin-left: 2px;
}
/* Five tabs will not fit a phone at the full size, so the small caps tighten
   rather than the bar starting to scroll sideways. */
@media (max-width: 430px) {
  .member-nav { font-size: 10px; letter-spacing: .06em; gap: 10px; }
}
.member-bar { border-bottom: 1px solid var(--line); background: #FAFAF7; }
.member-bar .wrap { padding-top: 0; }

/* What "Owed to you" means — shown outright the first time, tappable after. */
.what-note {
  font-size: 12.5px; line-height: 1.5; color: var(--chalk);
  background: #FAFAF7; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; margin: -4px 0 12px;
}
details.what > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: 12px; color: var(--chalk); text-decoration: underline;
  margin: -4px 0 10px;
}
details.what > summary::-webkit-details-marker { display: none; }
details.what[open] > summary { margin-bottom: 8px; }

/* ---------- a member page's title and headline figure ---------- */

/* The tab's own name, and nothing above it. */
h1.ptitle {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
  font-size: 22px; line-height: 1.15; margin: 0 0 10px;
}

/* The one figure the page is about, stated as a sentence. */
.headline { font-size: 15px; margin: 0; }
.headline b { font-weight: 700; font-variant-numeric: tabular-nums; }
.headline b.owing { color: var(--red); }
.headline b.clear { color: var(--purple); }
.headline-note { font-size: 12px; color: var(--chalk); margin: 4px 0 0; }

/* ---------- the fees filters ----------
   One compact line on a laptop, under a hairline rule. Each control carries a
   tiny label above it in the same style as a table header. */
.fees-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; margin-bottom: 16px;
}
/* margin: 0 matters. These wrappers are <label>s, and the global label rule
   gives every label a 5px bottom margin — which, in a flex-end row, would push
   the fields 5px up off the button's bottom edge. */
.fees-filters .ff { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.fees-filters .ff > span {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--chalk); font-weight: 700;
}
.fees-filters select, .fees-filters input {
  height: 32px; padding: 0 9px; font-size: 13px; line-height: 1;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  width: auto; min-width: 0; margin: 0;
}
.fees-filters .w-show  { width: 110px; }
.fees-filters .w-horse { width: 130px; }
.fees-filters .w-date  { width: 118px; }
.fees-filters .ff-go {
  height: 32px; padding: 0 16px; margin: 0; border: 1px solid var(--purple); border-radius: 8px;
  background: var(--purple); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
  font-family: inherit; cursor: pointer;
}
.fees-filters .ff-go:hover { background: var(--purple-deep); border-color: var(--purple-deep); }

/* Narrow enough that the row can no longer hold one line: let it wrap tidily,
   two controls to a line, with the button across the bottom for a thumb. */
@media (max-width: 700px) {
  .fees-filters .ff { flex: 1 1 46%; }
  .fees-filters select, .fees-filters input { width: 100%; }
  .fees-filters .ff-go { flex: 1 1 100%; }
}

/* A statement's own action, top right of the card. */
.stmt .hd .action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.stmt .hd .action p { margin: 0; }
a.pill-btn {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--purple); background: var(--tint);
  border: 1px solid var(--tint-line); border-radius: 999px; padding: 6px 13px; white-space: nowrap;
}
a.pill-btn:hover { text-decoration: none; background: #EAE3F0; }

/* Subtabs on a horse's page — one thing at a time. */
.horse-head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 0; }
.subtabs {
  display: flex; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 2px solid var(--ink); margin: 0 0 22px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--chalk); scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { white-space: nowrap; padding: 10px 0 8px; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.subtabs a:hover { color: var(--ink); text-decoration: none; }
.subtabs a.on { color: var(--ink); border-bottom-color: var(--gold); }
.subtabs a .count { color: var(--chalk); font-weight: 600; }

/* Overview has to fit a laptop screen without scrolling, so its panels sit a
   little tighter than the ones you scroll through on the other tabs. */
.panel.tight { padding: 16px 18px; margin-bottom: 16px; }
.panel.tight h5 { margin-bottom: 8px; }
.panel.tight .kv { padding: 5px 0; }
.panel.tight hr.rule { margin: 8px 0; }
.panel.tight .btn-row { margin-top: 10px; }
.panel.tight .tiny { margin-top: 6px; }

/* ---------- signing in, and the other one-thing-only screens ---------- */

/* The card sits in the middle of the paper, the way the mockup frames a
   screen: hairline border, generous radius, one very soft shadow. */
.login-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 32px var(--gutter);
}
.login-card {
  width: 100%; max-width: 400px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(21, 21, 15, .35);
}

/* A jockey's silks across the head of the card. */
.silks-band {
  height: 6px;
  background: linear-gradient(90deg,
    var(--purple) 0 20%, var(--gold) 20% 40%, var(--purple) 40% 60%,
    var(--gold) 60% 80%, var(--purple) 80% 100%);
}

.login-body { padding: 30px 28px 28px; }
.login-body .mast {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
  font-size: 32px; line-height: 1.1; margin-bottom: 6px;
}
.login-body .mast span { color: var(--gold-deep); }
.login-body p.sub { margin-bottom: 22px; }
.login-body h1.screen-title { margin: 2px 0 4px; }
.login-body .field { margin-bottom: 16px; }
.login-body .field:last-of-type { margin-bottom: 20px; }
.login-body input { padding: 12px 13px; }
.login-body .btn.block { padding: 13px; border-radius: 10px; }
/* The last line is help, not part of the form — set off by its own rule. */
.login-body p.tiny.mt {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.5;
}

.login-foot {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--chalk); font-weight: 700;
}

/* ---------- misc ---------- */
footer.foot { padding: 40px 0 60px; color: var(--chalk); font-size: 12.5px; }
footer.foot .wrap { border-top: 1px solid var(--line); padding-top: 18px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.tiny { font-size: 12px; color: var(--chalk); }
.mt { margin-top: 18px; }
.mb { margin-bottom: 18px; }
.empty { padding: 28px 0; color: var(--chalk); font-size: 14px; text-align: center; }
hr.rule { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.inline-form { display: inline; }

@media print {
  .topbar, .member-nav, .btn, .btn-row, footer.foot { display: none !important; }
  body { background: #fff; }
  .stmt { border: none; padding: 0; max-width: none; }
}

/**
 * A transaction line that is money COMING TO the member — prize money paid out,
 * or their share of a sale. Marked so it reads differently from a fee at a
 * glance, without being added to or subtracted from anything: the two are
 * different kinds of fact, not two sides of a sum.
 */
.pay tr.paid-in td { background: var(--tint); }
.pay tr.paid-in .amt { color: var(--purple); font-weight: 700; }
.money-line.paid-line { color: var(--purple); }

/* ---------- membership agreements ----------
   The document set on a phone. It reads like the PDF it mirrors: the same
   wording, the same order, the same tick box at the end — so nobody has to
   download anything to know what they are agreeing to.

   The one colour here is gold, which is what this system uses for "this needs
   you". Green remains reserved for the unread badge and nothing else. */

.backlink { font-size: 13px; margin: 0 0 10px; }
.backlink a { color: var(--chalk); }

.awaiting-banner {
  border: 1px solid var(--gold-line); background: var(--gold-tint); border-radius: 10px;
  padding: 12px 16px; margin: 14px 0 16px; font-size: 14px; line-height: 1.5;
}
.awaiting-banner b { color: var(--gold-deep); }

.agreed-banner {
  border: 1px solid var(--tint-line); background: var(--tint); border-radius: 10px;
  padding: 12px 16px; margin: 14px 0 16px; font-size: 14px; color: var(--purple); font-weight: 600;
}

/* A waiting agreement on the Documents tab, so it is not read as one more
   file already dealt with. */
.hcard.waiting { border-color: var(--gold-line); background: var(--gold-tint); }
.pill.gold { color: var(--gold-deep); border-color: var(--gold-line); background: #fff; }

/* The document itself. */
.deed {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 20px 18px; margin-top: 14px;
}
.deed-field { font-size: 14px; margin: 0 0 6px; }
.deed-field span { color: var(--chalk); }
.deed-field b { font-weight: 700; }
.deed-h {
  font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 16px;
  color: var(--purple); margin: 20px 0 8px;
}
.deed-p, .deed-item, .deed-sub { font-size: 14px; line-height: 1.55; margin: 0 0 9px; }
.deed-item.in { padding-left: 16px; }
.deed-sub { padding-left: 16px; }
.deed-ref { font-size: 12px; color: var(--chalk); margin: 18px 0 2px; }
.deed-foot { font-size: 11.5px; color: var(--chalk); margin: 0; }
.deed-note { font-size: 12px; color: var(--chalk); margin: 10px 0 0; }

/* The tick box, which is the whole point of the screen. */
.tickbox {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid var(--gold-line); background: var(--gold-tint);
  border-radius: 10px; padding: 14px 16px; margin: 4px 0 14px;
}
.tickbox input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--gold-deep); }
.tickbox label { margin: 0; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--ink);
  text-transform: none; letter-spacing: 0; }
.tickbox.done .tick { color: var(--gold-deep); font-size: 19px; line-height: 1.1; }
.tickbox.done span:last-child { font-size: 14.5px; line-height: 1.45; font-weight: 600; }

/* The agreement preview on Liam's side: the PDF itself, not a description of
   it, because the only way to check wording before it goes is to read it. */
.pdf-preview { display: block; width: 100%; height: 620px; border: 0; border-top: 1px solid var(--line); background: #FAFAF7; }
@media (max-width: 760px) { .pdf-preview { height: 420px; } }

/* The agreement column on Members: one line per horse, so a member who is
   agreed on one and waiting on another reads as exactly that. */
.agr-cell { min-width: 230px; }
.agr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.agr a { font-size: 13px; }

/* ---------- The chart of accounts (Bank) ----------
   A code, a name that can be changed where it stands, and what has gone
   through it. The code box is narrow because a nominal code is four figures. */
table.chart th.code, table.chart td.code { width: 96px; }
table.chart td.code input { width: 78px; padding: 6px 8px; font-variant-numeric: tabular-nums; }
table.chart td input[name=label] { max-width: 340px; padding: 6px 8px; font-weight: 600; }

/* ---------- Racing accounts / Bloodstock accounts ----------
   Whose books are on the screen, said once above the bar that goes to every
   page of them. The bar scrolls sideways on a phone like any other subtabs. */
.acct-head {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; margin: 0 0 2px;
}
.acct-nav { margin-bottom: 26px; }
table.chart .acct-name { font-weight: 600; }
/* A statement: the section headings sit inside the one table. */
table.statement tr + tr th { padding-top: 22px; }
table.statement tr.total.grand td { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: 15px; }
table.nominal td:nth-child(2) { min-width: 260px; }
table.aged th, table.aged td { white-space: nowrap; }
table.aged td:first-child { white-space: normal; min-width: 180px; }
/* Eleven pages do not fit one line on a laptop; they wrap to two rather than
   hide the last ones off the edge. On a phone the bar scrolls sideways. */
@media (min-width: 760px) { .acct-nav { flex-wrap: wrap; overflow: visible; column-gap: 20px; } }