/* ============================================================
   LEDGER - the design system from the UI spec, as approved in
   the client-reviewed preview.

   A veterinary clipboard and a county agricultural form:
   durable, direct, administratively credible.

   Three rules carry the whole thing:
     1. Structure with rules, bands and labels. Not cards.
     2. Hue encodes STATE, never category. Categories are
        boxed uppercase typographic stamps.
     3. Hierarchy legible from six feet.

   Every colour is a token defined on bare :root. The dark values
   are redefined twice, under prefers-color-scheme AND under
   [data-theme="dark"], so the manual override wins both ways.

   No web fonts: the server CSP is default-src 'self' and blocks
   fonts.googleapis.com outright. System stacks carry the spec's
   sizes instead.
   ============================================================ */

:root{
  /* Day - warm form paper, tuned for direct sunlight */
  --bg:#EEE9DB;
  --surface:#FFFDF5;
  --raised:#FFFFFF;
  --ink:#171A16;          /* ~18:1 on surface */
  --ink-2:#4B5148;        /* 8.1:1 - the FLOOR. There is no third text colour. */
  --rule:#71776C;
  --rule-strong:#4B5148;
  --accent:#174A72;       /* registrar blue - white on it is 9.3:1 */
  --on-accent:#FFFFFF;
  --warn:#8A4B00;
  --warn-field:#FFF1CB;
  --danger:#982B25;
  --danger-field:#F7E4E2;
  --on-danger:#FFFFFF;
  --success:#24613D;
  --success-field:#E2EFE7;
  --on-success:#FFFFFF;
  --focus:#174A72;
  --lift:0 2px 10px rgba(23,26,22,.14);   /* the ONLY shadow token */
  --frame:#C9C2AF;

  --tap:56px; --tap-list:64px; --tap-primary:64px;
  --radius:4px; --radius-control:6px;
  --gutter:16px;
  --header-h:56px; --nav-h:60px; --band-h:64px;

  --font-display:Georgia,"Times New Roman",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Night - low glare, tuned for a stall at 9pm.
       Ink is deliberately NOT pure white, because pure white halos. */
    --bg:#10130F;
    --surface:#1A1E18;
    --raised:#252A22;
    --ink:#F5F1E4;        /* 15:1 */
    --ink-2:#BCC3B6;      /* 9.4:1 */
    --rule:#737B6D;
    --rule-strong:#BCC3B6;
    --accent:#76B9E8;
    --on-accent:#10130F;
    --warn:#F0B44D;
    --warn-field:#2A2214;
    --danger:#FF8178;
    --danger-field:#2E1A18;
    --on-danger:#10130F;
    --success:#76CE99;
    --success-field:#16261C;
    --on-success:#10130F;
    --focus:#8EC0FF;
    --lift:0 2px 10px rgba(0,0,0,.55);
    --frame:#2A2F27;
  }
}
:root[data-theme="dark"]{
  --bg:#10130F; --surface:#1A1E18; --raised:#252A22;
  --ink:#F5F1E4; --ink-2:#BCC3B6;
  --rule:#737B6D; --rule-strong:#BCC3B6;
  --accent:#76B9E8; --on-accent:#10130F;
  --warn:#F0B44D; --warn-field:#2A2214;
  --danger:#FF8178; --danger-field:#2E1A18; --on-danger:#10130F;
  --success:#76CE99; --success-field:#16261C; --on-success:#10130F;
  --focus:#8EC0FF; --lift:0 2px 10px rgba(0,0,0,.55); --frame:#2A2F27;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:17px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  overscroll-behavior-y:none;
}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}
[hidden]{display:none !important;}

/* ============================================================
   APP SHELL
   Two fixed bands at the bottom, one at the top. Nothing else
   is ever fixed, so a tap during a page swap can only land on a
   target that is the same on both screens.
   ============================================================ */

.app-header{
  position:fixed;top:0;left:0;right:0;z-index:8;
  min-height:var(--header-h);
  display:flex;align-items:center;gap:8px;
  padding:0 var(--gutter);
  padding-top:env(safe-area-inset-top,0);
  border-bottom:1px solid var(--rule);
  background:var(--surface);
}
.app-header.is-warn{border-bottom:3px solid var(--warn);}
.app-title{
  font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;
}
.app-date{font-size:13px;color:var(--ink-2);white-space:nowrap;}

/* Back. An installed app and an Android wrap have no browser chrome, so the
   only way out of a horse record is the one we draw. Negative margin so the
   48px target does not push the title off a narrow phone. */
.hdr-back{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-left:-12px;margin-right:-4px;
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--ink);font-size:24px;line-height:1;font-family:inherit;
}
.hdr-back[hidden]{display:none;}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.conn{
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--success);background:none;border:0;padding:0;font-family:inherit;
}
.conn.slow,.conn.offline{color:var(--warn);}
.posture{
  min-height:40px;
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:none;border:1px solid var(--rule);border-radius:var(--radius-control);
  padding:6px 9px;color:var(--ink);cursor:pointer;font-family:inherit;
}

main.screen{
  display:block;
  padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px));
  padding-bottom:calc(var(--band-h) + var(--nav-h) + 24px + env(safe-area-inset-bottom,0px));
  min-height:100vh;
}
main.screen.no-chrome{
  padding-bottom:calc(var(--band-h) + 24px + env(safe-area-inset-bottom,0px));
}
/* No action band on this screen, so the content only has to clear the nav. */
main.screen.no-band{
  padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom,0px));
}
main.screen.no-band.no-chrome{
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
}

.action-band{
  position:fixed;left:0;right:0;z-index:7;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  height:var(--band-h);
  border-top:1px solid var(--rule);
  background:var(--surface);
  padding:0;
}
.action-band.no-nav{bottom:env(safe-area-inset-bottom,0px);}
.action-band .btn{height:var(--band-h);border-radius:0;border-left:0;border-right:0;border-bottom:0;}

.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:7;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);background:var(--surface);
}
.nav a{
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;
  border-right:1px solid var(--rule);border-top:3px solid transparent;
  color:var(--ink-2);
}
.nav a:last-child{border-right:0;}
.nav a[aria-current="page"]{color:var(--accent);border-top-color:var(--accent);font-weight:600;}

/* ============================================================
   BANDS, ROWS, STAMPS, PILLS
   ============================================================ */

.band{
  display:flex;align-items:baseline;gap:10px;
  padding:14px var(--gutter) 8px;border-top:1px solid var(--rule);background:var(--bg);
}
main.screen > .band:first-child{border-top:0;}
.band h2{font-family:var(--font-display);font-size:22px;font-weight:600;margin:0;letter-spacing:.01em;}
.band .count{margin-left:auto;font-size:14px;font-weight:600;color:var(--ink-2);}
.band-note{padding:0 var(--gutter) 12px;color:var(--ink-2);font-size:15px;margin:0;}

.row{
  display:block;width:100%;text-align:left;font-family:inherit;
  background:var(--surface);border:0;border-bottom:1px solid var(--rule);
  border-left:4px solid transparent;padding:12px var(--gutter);color:var(--ink);font-size:16px;
}
a.row{text-decoration:none;color:var(--ink);}
button.row{cursor:pointer;min-height:var(--tap-list);}
.row.is-danger{border-left-color:var(--danger);}
.row.is-warn{border-left-color:var(--warn);}
.row.is-success{border-left-color:var(--success);}
.row.is-accent{border-left-color:var(--accent);}
.row:active{background:var(--raised);transform:scale(.985);}
.row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.row-time{font-size:14px;font-weight:600;color:var(--ink-2);min-width:62px;}
.row-name{font-size:19px;font-weight:600;}
.row-sub{font-size:15px;color:var(--ink-2);margin-top:2px;}
.row-right{margin-left:auto;font-size:15px;font-weight:600;}

.stamp{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;border:1px solid var(--rule);border-radius:var(--radius);
  padding:2px 6px;color:var(--ink-2);white-space:nowrap;
}
.pill{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;
  font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-radius:var(--radius);padding:5px 9px;border:1px solid transparent;
}
.pill.overdue{background:var(--danger-field);color:var(--danger);border-color:var(--danger);}
.pill.duetoday{background:var(--warn-field);color:var(--danger);border-color:var(--danger);}
.pill.soon{background:var(--warn-field);color:var(--warn);border-color:var(--warn);}
.pill.upcoming{background:var(--surface);color:var(--ink-2);border-color:var(--rule);}
.pill.done{background:var(--success-field);color:var(--success);border-color:var(--success);}
.pill .glyph{font-size:13px;}

/* DUE rows lead with WHAT is due, not with the status pill.
   Jeneva could not tell whether a due item was Coggins or farrier, and she was
   right: the horse name and the action come first, status goes underneath. */
.due-what{
  font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.15;
  margin-bottom:6px;
  /* The chevron rides the far edge of the first line, not the end of the
     wrapped text, so a two-line "Vaccination, core - Ranger" still reads. */
  display:flex;align-items:baseline;gap:8px;
}
.due-what > span:first-child{min-width:0;}
.due-what > .row-chev{margin-left:auto;}
.due-when{font-size:14px;font-weight:600;color:var(--ink-2);}

/* ============================================================
   BUTTONS
   Primary 64, secondary 56, floor 48, 12px between adjacent
   targets and 20px if either is destructive. Disabled is a
   different colour, never a lower opacity.
   ============================================================ */

.btn{
  display:block;width:100%;min-height:var(--tap-primary);
  font-family:inherit;font-size:17px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  background:var(--accent);color:var(--on-accent);
  border:1px solid var(--accent);border-radius:var(--radius-control);cursor:pointer;padding:12px;
  overflow-wrap:anywhere;text-wrap:balance;
}
.btn:active{transform:scale(.985);}
/* An anchor styled as a button still has to look like one: no underline,
   centred, and the whole 64px box is the target. */
a.btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  text-decoration:none;
}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--rule-strong);min-height:var(--tap);font-size:15px;}
.btn.ghost{background:none;color:var(--accent);border-color:var(--rule);min-height:var(--tap);font-size:15px;}
.btn.danger{background:var(--danger);color:var(--on-danger);border-color:var(--danger);}
.btn.small{min-height:48px;font-size:14px;padding:8px 12px;width:auto;}
.btn[disabled],.btn[aria-disabled="true"]{
  background:var(--bg);color:var(--ink-2);border-color:var(--rule);cursor:default;
}
.row-actions{
  display:grid;gap:12px;padding:12px var(--gutter);
  background:var(--surface);border-bottom:1px solid var(--rule);
}
.row-actions.two{grid-template-columns:1fr 1fr;}
.row-actions.destructive{gap:20px;}

/* ============================================================
   WEATHER STRIP
   ============================================================ */

.weather{
  background:var(--surface);border-bottom:1px solid var(--rule);
  padding:12px var(--gutter);
}
.weather-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:15px;font-weight:600;
}
.weather-label{
  font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
}
.weather-hours{display:flex;gap:14px;margin-top:8px;overflow-x:auto;}
.wx-hour{min-width:56px;font-size:13px;color:var(--ink-2);}
.wx-hour b{display:block;font-size:15px;color:var(--ink);font-weight:600;}
.weather-out{font-size:15px;color:var(--ink-2);}

/* ============================================================
   STALENESS + CONNECTION
   ============================================================ */

.stale-strip{
  position:fixed;left:0;right:0;z-index:8;
  top:calc(var(--header-h) + env(safe-area-inset-top,0px));
  display:flex;align-items:center;gap:12px;
  min-height:40px;padding:6px var(--gutter);
  background:var(--warn-field);color:var(--ink);
  border-bottom:1px solid var(--warn);font-size:14px;font-weight:600;
}
.stale-strip .btn{width:auto;min-height:48px;font-size:13px;padding:6px 12px;margin-left:auto;}
body.has-stale main.screen{padding-top:calc(var(--header-h) + 40px + env(safe-area-inset-top,0px));}

/* ============================================================
   STALL CARD + COMPLIANCE STRIP
   ============================================================ */

.stall{
  display:flex;gap:14px;align-items:center;padding:16px var(--gutter);
  background:var(--surface);border-bottom:1px solid var(--rule);
}
.stall-thumb{
  width:72px;height:72px;flex:0 0 72px;border-radius:var(--radius);
  background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:30px;font-weight:600;
}
.stall-name{font-family:var(--font-display);font-size:28px;font-weight:600;line-height:1.1;}
.stall-line{font-size:15px;color:var(--ink-2);margin-top:3px;}

.compliance{background:var(--surface);border-bottom:1px solid var(--rule);}
.comp-row{
  display:flex;align-items:center;gap:10px;padding:10px var(--gutter);
  border-left:4px solid transparent;border-top:1px solid var(--rule);font-size:15px;
}
.comp-row:first-child{border-top:0;}
.comp-row.is-danger{border-left-color:var(--danger);}
.comp-row.is-warn{border-left-color:var(--warn);}
.comp-row.is-success{border-left-color:var(--success);}
.comp-label{
  font-weight:600;min-width:84px;letter-spacing:.04em;text-transform:uppercase;font-size:13px;
}
.comp-state{color:var(--ink-2);}

/* ============================================================
   THE LEDGER ROW
   The four-column version left the text column ~101px at 390px
   and 0px at 320px. Worse, .l-sum and .l-meta were spans inside
   a span: they stayed display:inline, and overflow/text-overflow
   DO NOT APPLY to a non-replaced inline box, so the ellipsis was
   dead code while white-space:nowrap still applied. That printed
   "whole tube" on top of "+91 days".
   display:block plus min-width:0 is the fix and it is load-bearing.
   ============================================================ */

.month{
  display:flex;align-items:baseline;gap:10px;padding:10px var(--gutter);background:var(--bg);
  border-bottom:1px solid var(--rule);font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);position:sticky;
  top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:2;
}
.month .m-right{margin-left:auto;}

.ledger{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto;
  grid-template-areas:
    "date stamp right"
    "date body  body";
  column-gap:10px;row-gap:3px;align-items:baseline;
  padding:12px var(--gutter);background:var(--surface);
  border-bottom:1px solid var(--rule);border-left:4px solid transparent;font-size:16px;
  width:100%;text-align:left;font-family:inherit;color:var(--ink);
}
a.ledger{text-decoration:none;}
button.ledger{border-top:0;border-right:0;cursor:pointer;min-height:var(--tap-list);}
.ledger.is-danger{border-left-color:var(--danger);}
.ledger.is-warn{border-left-color:var(--warn);}
.ledger.is-success{border-left-color:var(--success);}
.ledger > .l-date{grid-area:date;}
.ledger > .stamp{grid-area:stamp;justify-self:start;}
.ledger > .l-body{grid-area:body;}
.ledger > .l-right{grid-area:right;}
.l-date{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:.03em;}
.l-body{min-width:0;}
/* display:block is load-bearing; ellipsis never applies to an inline box. */
.l-sum{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.l-meta{display:block;min-width:0;font-size:13px;color:var(--ink-2);margin-top:2px;overflow-wrap:anywhere;}
.l-right{text-align:right;font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;}
.next-due{color:var(--warn);}

/* record filters */
.filters{
  display:flex;gap:12px;padding:10px var(--gutter);background:var(--bg);
  border-bottom:1px solid var(--rule);overflow-x:auto;
}
/* An appointment's outcome menu. Closed by default: the row is the control,
   and the options only exist once she has said which appointment she means. */
.outcomes{display:grid;gap:10px;padding:12px var(--gutter);
  background:var(--raised);border-bottom:1px solid var(--rule);}
.outcomes[hidden]{display:none;}
.row.is-open{border-left-color:var(--accent);}
.ledger.is-open{border-left-color:var(--accent);background:var(--raised);}
/* How many files hang off this one record. Quiet: it is a fact about the row,
   not a state of the horse, so it never takes a hue. */
.l-clip{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-top:2px;}
.row-chev{margin-left:8px;color:var(--ink-2);font-size:15px;font-weight:600;}

/* ============================================================
   FILES - the paperwork on a horse
   ============================================================ */

.docs{display:block;}
.doc{
  display:flex;align-items:center;gap:12px;
  min-height:var(--tap-list);padding:10px var(--gutter);
  background:var(--surface);border-bottom:1px solid var(--rule);
  border-left:4px solid transparent;
  color:var(--ink);text-decoration:none;
}
.doc-thumb{
  flex:0 0 auto;width:52px;height:52px;border-radius:var(--radius);
  border:1px solid var(--rule);background:var(--raised);
  object-fit:cover;
}
/* A PDF has no thumbnail without an image pipeline, so it gets a stamp that
   reads as one rather than a broken picture. */
.doc-thumb.is-pdf{
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink-2);
}
/* min-width:0 is what lets the name below actually ellipsis inside a flex row. */
.doc-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.doc-name{
  font-size:16px;font-weight:600;
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.doc-meta{font-size:14px;color:var(--ink-2);}
.doc .stamp{align-self:flex-start;}

/* The kind chooser. Filing happens at the moment of adding, never after. */
.kind-pick{display:flex;flex-wrap:wrap;gap:8px;}
.kind-pick .filter{flex:0 0 auto;}

.filter{
  min-height:56px;padding:0 16px;font-family:inherit;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-control);
  color:var(--ink);cursor:pointer;
}
.filter[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}

/* ============================================================
   MONEY
   ============================================================ */

.owed-total{padding:18px var(--gutter);background:var(--surface);border-bottom:1px solid var(--rule);}
.owed-figure{font-family:var(--font-display);font-size:38px;font-weight:600;line-height:1;}
.owed-cap{font-size:14px;color:var(--ink-2);margin-top:6px;}
.owed-client{padding:12px var(--gutter);background:var(--surface);border-bottom:1px solid var(--rule);
  border-left:4px solid transparent;}
.owed-client.settled{border-left-color:var(--success);}
.owed-head{display:flex;align-items:baseline;gap:10px;}
.owed-name{font-weight:600;font-size:19px;}
.owed-amt{margin-left:auto;font-weight:600;font-size:17px;}
.owed-books{font-size:14px;color:var(--ink-2);margin-top:2px;}
.owed-items{margin:8px 0 0;padding:0;list-style:none;}
.owed-items li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px 10px;align-items:center;
  font-size:15px;color:var(--ink-2);padding:8px 0;border-top:1px solid var(--rule);
}
.owed-items li:first-child{border-top:0;}
.owed-items li > .oi-amt{font-weight:600;color:var(--ink);}
.owed-items li > .btn,
.owed-items li > .paychips,
.owed-items li > .paid-tag{grid-column:1 / -1;justify-self:end;white-space:nowrap;}
.paid-tag{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--success);}
.settled-note{
  margin-top:8px;font-size:14px;font-weight:600;color:var(--success);
  letter-spacing:.04em;text-transform:uppercase;
}
.paychips{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}
.paychip{
  min-height:48px;padding:0 16px;font-family:inherit;font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:var(--radius-control);
  color:var(--ink);cursor:pointer;
}
.paychip:hover{border-color:var(--accent);color:var(--accent);}

/* ============================================================
   LOG CARE
   ============================================================ */

.step{
  padding:12px var(--gutter) 4px;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:8px var(--gutter) 14px;}
.type-btn{
  min-height:var(--tap-list);font-family:inherit;font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--radius);cursor:pointer;padding:6px 4px;
}
.type-btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.chips{display:flex;gap:12px;padding:8px var(--gutter) 14px;flex-wrap:wrap;}
.chip{
  min-height:var(--tap);padding:0 16px;font-family:inherit;font-size:14px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius-control);color:var(--ink);cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}

/* multi-select horse row: a real checkbox mark, never colour alone */
.pick-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  min-height:var(--tap-list);padding:10px var(--gutter);font-family:inherit;font-size:17px;
  background:var(--surface);border:0;border-bottom:1px solid var(--rule);
  border-left:4px solid transparent;color:var(--ink);cursor:pointer;
}
.pick-row[aria-pressed="true"]{border-left-color:var(--accent);}
.box{
  width:26px;height:26px;flex:0 0 26px;border:2px solid var(--rule-strong);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;line-height:1;
}
.pick-row[aria-pressed="true"] .box{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.pr-name{font-weight:600;}
.pr-meta{margin-left:auto;font-size:14px;color:var(--ink-2);}
.optional-note{padding:4px var(--gutter) 14px;color:var(--ink-2);font-size:15px;margin:0;}

/* ============================================================
   RECEIPT - replaces every confirmation dialog. There are no
   modals in this product.
   ============================================================ */

.receipt{
  position:fixed;left:0;right:0;z-index:9;
  bottom:calc(var(--band-h) + var(--nav-h) + env(safe-area-inset-bottom,0px));
  background:var(--raised);border-top:1px solid var(--rule);
  border-left:4px solid var(--success);box-shadow:var(--lift);
  padding:12px var(--gutter);display:grid;gap:12px;max-height:70vh;overflow-y:auto;
}
.receipt.no-nav{bottom:calc(var(--band-h) + env(safe-area-inset-bottom,0px));}
.receipt.no-band{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));}
.receipt.no-band.no-nav{bottom:env(safe-area-inset-bottom,0px);}
.receipt.warn{border-left-color:var(--warn);}
.receipt.danger{border-left-color:var(--danger);}
.r-head{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--success);}
.receipt.warn .r-head{color:var(--warn);}
.receipt.danger .r-head{color:var(--danger);}
.r-body{font-size:17px;font-weight:600;}
.r-note{font-size:15px;color:var(--ink-2);}
.r-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ============================================================
   FORMS
   56px inputs at 17px so iOS never zoom-jumps the viewport.
   ============================================================ */

.form{padding:12px var(--gutter);background:var(--surface);border-bottom:1px solid var(--rule);display:grid;gap:12px;}
.field{display:grid;gap:6px;}
.field label{
  font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
}
.field input,.field select,.field textarea{
  min-height:var(--tap);font-family:inherit;font-size:17px;padding:10px 12px;
  background:var(--raised);color:var(--ink);
  border:1px solid var(--rule-strong);border-radius:var(--radius-control);
  width:100%;
}
.field textarea{min-height:180px;line-height:1.5;resize:vertical;}
.field .hint{font-size:15px;color:var(--ink-2);}
.error{
  margin:0;padding:12px var(--gutter);
  background:var(--danger-field);color:var(--danger);
  border-left:4px solid var(--danger);border-bottom:1px solid var(--rule);
  font-size:15px;font-weight:600;
}
.empty{padding:20px var(--gutter);color:var(--ink-2);font-size:15px;}
.empty.offline{
  background:var(--warn-field);color:var(--ink);
  border-top:1px solid var(--warn);border-bottom:1px solid var(--warn);
}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px var(--gutter);}
.seg button{
  min-height:var(--tap);font-family:inherit;font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--radius-control);cursor:pointer;
}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.micro{
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
}

/* ============================================================
   AUTH PAGES (login, claim) - no shell, no nav
   ============================================================ */

.auth{
  max-width:430px;margin:0 auto;padding:32px var(--gutter) 64px;
}
.auth h1{
  font-family:var(--font-display);font-size:27px;font-weight:600;margin:0 0 6px;line-height:1.15;
}
.auth .sub{margin:0 0 24px;color:var(--ink-2);font-size:17px;}
.auth .form{border:1px solid var(--rule);border-radius:var(--radius);}
.auth .btn{margin-top:4px;}
.auth .error{border-radius:var(--radius);margin-bottom:16px;border-bottom:0;}
.auth footer{margin-top:24px;font-size:15px;color:var(--ink-2);}

/* ============================================================
   PRINT - she prints a horse record for the physical folder.
   Each year starts a new page; the chrome is gone; the header
   carries only the fields that are actually filled in.
   ============================================================ */

.print-head{display:none;}

@media print{
  /* All three selectors, deliberately. The night palette is defined on
     `:root:not([data-theme="light"])` and `:root[data-theme="dark"]`, which
     both out-specify a bare `:root` - a media query adds no specificity. A
     plain `:root` override here would lose, and a record printed at 9pm would
     come out as pale ink on white paper, because browsers drop backgrounds
     when printing and keep the text colour. */
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme="light"]){
    --bg:#FFFFFF; --surface:#FFFFFF; --raised:#FFFFFF;
    --ink:#000000; --ink-2:#333333; --rule:#666666; --rule-strong:#000000;
    --accent:#000000; --warn:#000000; --danger:#000000; --success:#000000;
    --warn-field:#FFFFFF; --danger-field:#FFFFFF; --success-field:#FFFFFF;
    --lift:none;
  }
  body{background:#FFFFFF;color:#000000;font-size:11pt;}
  .app-header,.nav,.action-band,.receipt,.stale-strip,.filters,
  .row-actions,.btn,.load-more,.stall{display:none !important;}
  .docs,.kind-pick{display:none !important;}
  main.screen{padding:0 !important;min-height:0;}
  .print-head{display:block;margin-bottom:12pt;}
  .print-head h1{font-family:var(--font-display);font-size:20pt;margin:0 0 4pt;}
  .print-head dl{
    display:grid;grid-template-columns:auto 1fr;gap:2pt 12pt;margin:0;font-size:10pt;
  }
  .print-head dt{font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
  .print-head dd{margin:0;}
  .stall-thumb{display:none;}
  .year-group{break-before:page;page-break-before:always;}
  .year-group:first-of-type{break-before:auto;page-break-before:auto;}
  .month{position:static;background:#FFFFFF;}
  .ledger,.comp-row,.month{break-inside:avoid;page-break-inside:avoid;}
  .l-sum{white-space:normal;overflow:visible;}
}

/* ============================================================
   DESKTOP: run the phone inside a frame

   On a phone (under 600px) NOTHING here applies and the app fills
   the screen exactly as before, safe-area insets and all.

   Above that the app is a phone-shaped panel on a muted ground,
   which is how it was shown in the shareable preview and what it
   is designed for. Three things make a phone app survive being
   put in a box, and each one is load-bearing:

   1. A transform on <body> makes it the containing block for the
      app's position:fixed header, action band, nav and receipt.
      Without it those four line up with the desktop window and
      the header stretches across the whole screen.
   2. A fixed-height box cannot scroll the document, so the screen
      itself becomes the scroller.
   3. .receipt is capped in percent, because its 70vh is measured
      against the real window, which is taller than the frame.
   ============================================================ */

@media (min-width:600px){
  html{background:var(--frame);}

  body{
    width:390px;
    height:min(780px, calc(100dvh - 32px));
    min-height:540px;
    margin:16px auto;
    position:relative;
    overflow:hidden;
    border-radius:8px;
    transform:translateZ(0);            /* see 1 above */
  }

  main.screen,
  main.auth{                            /* see 2 above */
    position:absolute;inset:0;
    overflow-y:auto;
    min-height:0;
    /* A desktop scrollbar draws a light bar down the inside of the frame and
       through its top corner. A phone has none, and this is standing in for a
       phone. */
    scrollbar-width:none;
  }
  main.screen::-webkit-scrollbar,
  main.auth::-webkit-scrollbar{display:none;}

  main.auth{padding-top:48px;}

  .receipt{max-height:60%;}             /* see 3 above */
}

@media (min-width:1000px){
  body{
    height:min(800px, calc(100dvh - 48px));
    margin:24px auto;
    border-radius:22px;
    box-shadow:var(--lift);
  }

  /* Chrome clips a fixed descendant to the transformed ancestor's BORDER BOX
     and ignores its rounding, so the header and the nav paint square over the
     rounded corners. Verified in a screenshot, not assumed. They have to carry
     the matching radius themselves. */
  .app-header{border-radius:22px 22px 0 0;}
  .nav{border-radius:0 0 22px 22px;}

  /* The screen fills the frame and scrolls under the nav, so without a matching
     radius a row's coloured left border shows through the wedge the nav's
     rounded corner leaves behind. */
  main.screen,
  main.auth{border-radius:22px;}
}