/* EquiPortal — Manager Web. Ported verbatim from the approved prototype
   (EquiPortal_Manager_Web.html) so the shipped app matches it visually.
   Fonts: Cormorant Garamond (display) + Outfit (everything else). Palette: cream / gold / dark. No blue. */
/* Type system. Two faces, no exceptions: Cormorant Garamond for display,
   Outfit for everything else. --serif and --sans match the marketing site's
   :root (resources/views/marketing/layout.blade.php) exactly, and every entry
   point requests the same two families — keep all of that in step.
   --figures is the app-only alias for money that sits in columns: same face as
   the UI plus font-variant-numeric:tabular-nums, since Outfit's digits are
   proportional by default and tabular on request.
   --numerals is the display-figure face, matching the marketing site's :root —
   EB Garamond, whose "1" reads as a 1. Use it for standalone big figures
   (metric tiles); keep --figures anywhere digits must line up column-wise. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
/* Text colours here are measured against the backgrounds they actually sit
   on, not against white in the abstract — the muted grey-brown carries most of
   the secondary text on the site and used to fail WCAG AA on cream and on the
   parchment panels. Darken, don't lighten. scratchpad contrast check lives in
   the iOS repo at docs/contrast.py. */
:root{
  --cream:#f5f0e8;--parchment:#ede6d8;--gold:#876829;--gold-light:#846921;--gold-pale:#d4b483;
  --dark:#1a1408;--dark-2:#241a0c;--brown:#5c4420;--warm-white:#faf8f4;--text:#3a2e1a;--muted:#736550;
  --border:rgba(138,106,42,0.18);--border-strong:rgba(138,106,42,0.35);
  /* `--line` was used (property map, its stat tiles and list, rooms, horse
     status card) but never defined, so those borders silently vanished and
     the map sat on the page unframed beside its bordered cards. */
  --line:var(--border);
  --green-bg:#e8f5e8;--green-text:#427b42;
  --red-bg:#fdf0ee;--red-text:#9a3a2a;
  --amber-bg:#fef3e2;--amber-text:#95671f;
  --sky-bg:#eef3ec;
  --r:10px;--rs:4px;--sw:246px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --figures:var(--sans);
  --numerals:'EB Garamond',Georgia,serif;
}
html,body{height:100%;font-family:var(--sans);background:var(--warm-white);color:var(--text);font-size:14px;font-weight:300;}
body{display:flex;min-height:100vh;}
::selection{background:var(--gold-pale);color:var(--dark);}
button{font-family:var(--sans);cursor:pointer;}
input,select,textarea{font-family:var(--sans);}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
[x-cloak]{display:none!important;}

/* ─────────── LOGIN ─────────── */
.login{position:fixed;inset:0;z-index:200;background:var(--dark);display:flex;align-items:center;justify-content:center;padding:2rem;}
.login-inner{width:100%;max-width:400px;}
.l-mark{display:block;width:64px;height:64px;margin-bottom:26px;}
.l-eyebrow{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-pale);opacity:.75;margin-bottom:22px;display:flex;align-items:center;gap:11px;}
.l-eyebrow::before{content:'';width:26px;height:1px;background:var(--gold-pale);opacity:.5;}
.l-title{font-family:var(--serif);font-size:52px;font-weight:300;color:#fff;line-height:1;margin-bottom:10px;letter-spacing:.5px;}
.l-title em{font-style:italic;color:var(--gold-pale);}
.l-sub{font-size:14px;font-weight:300;color:rgba(255,255,255,.5);margin-bottom:36px;}
.lf{margin-bottom:15px;}
.ll{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(212,180,131,.55);display:block;margin-bottom:7px;}
.li{width:100%;padding:13px 16px;border-radius:var(--rs);border:1px solid rgba(138,106,42,.35);background:rgba(138,106,42,.08);color:#fff;font-size:15px;font-weight:300;outline:none;transition:border-color .2s;}
.li:focus{border-color:var(--gold-light);}
.li::placeholder{color:rgba(212,180,131,.35);}
.l-btn{width:100%;padding:15px;border-radius:var(--rs);background:var(--gold);color:#fff;border:none;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-top:8px;transition:background .15s;}
.l-btn:hover{background:var(--gold-light);}
.l-keep{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:12px;color:rgba(255,255,255,.62);cursor:pointer;}
.l-keep input{accent-color:var(--gold-pale);width:15px;height:15px;cursor:pointer;}
.l-foot{margin-top:26px;font-size:12px;color:rgba(255,255,255,.4);text-align:center;line-height:1.7;}
.l-foot a{color:var(--gold-pale);text-decoration:none;}
.l-error{margin-top:14px;font-size:13px;color:#f0b8a8;background:rgba(154,58,42,.18);border:1px solid rgba(154,58,42,.4);border-radius:var(--rs);padding:10px 14px;}
.l-note{margin-bottom:22px;font-size:13px;color:var(--gold-pale);background:rgba(138,106,42,.14);border:1px solid rgba(138,106,42,.4);border-radius:var(--rs);padding:11px 14px;line-height:1.6;}
/* Invite acceptance (/join): two doors on one page, so each needs a heading
   and they need to be told apart at a glance. */
.j-head{font-family:var(--serif);font-size:19px;font-weight:400;color:#fff;margin-bottom:14px;}
.j-aside{margin-top:14px;font-size:13px;}
.j-aside a{color:var(--gold-pale);text-decoration:none;opacity:.8;}
.j-aside a:hover{opacity:1;text-decoration:underline;}
.j-or{display:flex;align-items:center;gap:14px;margin:30px 0;color:rgba(212,180,131,.5);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.j-or::before,.j-or::after{content:"";flex:1;height:1px;background:rgba(138,106,42,.35);}

/* ─────────── SIDEBAR ─────────── */
.sidebar{width:var(--sw);flex-shrink:0;background:var(--dark);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50;}
.sb-brand{padding:26px 24px 20px;border-bottom:1px solid rgba(138,106,42,.2);}
.sb-logo{font-family:'Libre Caslon Text',Georgia,serif;font-size:21px;font-weight:700;color:#f5eddb;line-height:1;letter-spacing:-.01em;}
.sb-logo em{font-style:normal;color:#d4b483;}
.sb-logo{display:flex;align-items:center;gap:10px;}
.sb-logo .brand-mark{width:34px;height:34px;flex-shrink:0;}
.sb-barn{margin-top:6px;font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.02em;}
.sb-nav{flex:1;overflow-y:auto;padding:16px 12px 12px;}
.sb-group{font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(212,180,131,.5);padding:14px 12px 8px;}
.sb-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--rs);color:rgba(255,255,255,.62);font-size:13.5px;font-weight:400;margin-bottom:1px;position:relative;transition:background .15s,color .15s;border:none;background:none;width:100%;text-align:left;text-decoration:none;}
.sb-item:hover{background:rgba(138,106,42,.14);color:rgba(255,255,255,.9);}
.sb-item.active{background:rgba(138,106,42,.2);color:#fff;}
.sb-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--gold-pale);}
.sb-ico{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.6;}
/* Every notification badge, one style (Bryan, parity with the app): solid
   red, white, bold, at least 12px — the sidebar counts and Billing's "!",
   the billing tabs, the phone Billing menu. The selected/active nav
   colours are the row's, never the badge's. */
:root{--badge-red:#d92d20;--badge-text:#fff;}
.sb-badge{margin-left:auto;display:inline-block;min-width:20px;text-align:center;font-size:12px;line-height:18px;font-weight:700;background:var(--badge-red);color:var(--badge-text);border-radius:20px;padding:1px 7px;letter-spacing:.02em;}
.sb-badge.red,.sb-badge.warn{background:var(--badge-red);color:var(--badge-text);}
.sb-account{padding:14px 16px;border-top:1px solid rgba(138,106,42,.2);display:flex;align-items:center;gap:11px;}
.sb-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--brown));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;color:#fff;flex-shrink:0;}
.sb-acc-name{font-size:13px;color:#fff;font-weight:400;}
/* A photo in any avatar box: same size and shape as the letters it replaces. */
img.av-img{object-fit:cover;display:block;padding:0;background:var(--parchment);}
.sb-av-link{display:block;flex-shrink:0;text-decoration:none;}
.chip-av{width:18px;height:18px;border-radius:50%;object-fit:cover;vertical-align:-4px;margin-right:6px;}
.sb-acc-role{font-size:10.5px;color:rgba(255,255,255,.4);letter-spacing:.04em;}
.sb-out{margin-left:auto;background:none;border:none;color:rgba(255,255,255,.4);padding:4px;}
.sb-out:hover{color:var(--gold-pale);}

/* ─────────── MAIN ─────────── */
.main{margin-left:var(--sw);flex:1;min-width:0;display:flex;flex-direction:column;}
/* Size containers for the table-stacking rule (see .tbl below). */
body,.main{container-type:inline-size;}
.topbar{height:64px;border-bottom:1px solid var(--border);background:var(--warm-white);display:flex;align-items:center;gap:18px;padding:0 34px;position:sticky;top:0;z-index:30;}
.tb-switch{display:flex;align-items:center;gap:9px;background:var(--cream);border:1px solid var(--border);border-radius:var(--rs);padding:8px 14px;font-size:13px;color:var(--text);}
.tb-switch svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.6;}
.tb-switch .chev{margin-left:4px;stroke:var(--muted);}
.tb-spacer{flex:1;}
.tb-setup{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:none;}
.tb-ring{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p,58)*1%),var(--border) 0);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;}
.tb-ring::after{content:'';width:26px;height:26px;border-radius:50%;background:var(--warm-white);}
.tb-ring span{position:absolute;font-size:8.5px;font-weight:600;color:var(--gold);line-height:1;letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.tb-btn{background:var(--gold);color:#fff;border:none;border-radius:var(--rs);padding:9px 16px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background .15s;text-decoration:none;display:inline-flex;align-items:center;}
.tb-btn:hover{background:var(--gold-light);}
.tb-btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--border-strong);}
.tb-btn.ghost:hover{background:var(--cream);}
.tb-qa{position:relative;}
.tb-qa-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;background:var(--warm-white);border:1px solid var(--border-strong);border-radius:var(--rs);padding:6px;z-index:40;box-shadow:0 14px 34px rgba(60,44,20,.16);}
.tb-qa-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:7px;font-size:13px;color:var(--text);text-decoration:none;}
.tb-qa-opt:hover{background:var(--cream);color:var(--gold);}
.tb-qa-opt svg{width:15px;height:15px;flex-shrink:0;stroke:var(--gold);fill:none;stroke-width:1.6;}

.scroll{flex:1;overflow-y:auto;}
.view{display:block;padding:34px 34px 70px;max-width:1180px;}
.view.wide{max-width:1400px;}

/* headings / shared */
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold);opacity:.5;}
.page-title{font-family:var(--serif);font-size:38px;font-weight:300;line-height:1.05;color:var(--text);letter-spacing:.3px;}
.page-title em{font-style:italic;color:var(--gold);}
.page-sub{font-size:14px;color:var(--muted);margin-top:8px;max-width:620px;line-height:1.6;}
.view-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;gap:20px;flex-wrap:wrap;}

.card{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;}
.card.parch{background:var(--parchment);}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
/* Phone: a card title plus an action button doesn't fit on one 375px line —
   the button rode up over the title. Let the action drop underneath. */
@media(max-width:820px){.card-head{flex-wrap:wrap;gap:10px;}}
.card-title{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.card-link{font-size:12px;color:var(--gold);text-decoration:none;font-weight:400;cursor:pointer;}
.card-link:hover{color:var(--gold-light);}

/* A pill is a label, not a paragraph. Squeezed into a narrow column, "No
   access yet" wrapped into a three-line blob the height of the whole row.
   Exception below: a cell that holds several of them is a set of labels, and a
   two-word one ("Lesson student", "Haul-in / day use") may take two lines
   rather than force the whole table wider than its card. */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;letter-spacing:.04em;padding:3px 9px;border-radius:20px;text-transform:uppercase;white-space:nowrap;}
.pill.green{background:var(--green-bg);color:var(--green-text);}
.pill.red{background:var(--red-bg);color:var(--red-text);}
.pill.amber{background:var(--amber-bg);color:var(--amber-text);}
.pill.grey{background:var(--cream);color:var(--muted);}
.pill.gold{background:rgba(138,106,42,.12);color:var(--gold);}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:var(--rs);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--border-strong);background:transparent;color:var(--gold);transition:.15s;text-decoration:none;}
.btn:hover{background:var(--cream);}
.btn.primary{background:var(--gold);color:#fff;border-color:var(--gold);}
.btn.primary:hover{background:var(--gold-light);}
.btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;}
.btn.primary:disabled:hover{background:var(--gold);}

/* Card copy, two sizes and no more: .card-p is the sentence or two under a
   card's eyebrow, .card-help the smaller note under a form. Settings used to
   set these inline in five slightly different sizes. */
.card-p{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:520px;margin-top:6px;}
.card-p strong{font-weight:500;}
.card-help{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px;max-width:520px;}
.form-error{color:var(--red-text);font-size:12px;margin-top:8px;}
/* A card that needs the eye — a trial about to end with no card on file.
   Gold border, gold eyebrow, nothing louder: measured 4.9:1 on warm-white. */
.card.attention{border-color:var(--gold);}
.card-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px;}

/* ── DASHBOARD ── */
.setup-card{background:linear-gradient(120deg,var(--dark),var(--dark-2));border-radius:var(--r);padding:26px 28px;color:#fff;margin-bottom:26px;position:relative;overflow:hidden;}
.setup-card::after{content:'';position:absolute;right:-40px;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(138,106,42,.22),transparent 70%);}
.setup-flex{display:flex;justify-content:space-between;gap:30px;align-items:center;position:relative;z-index:1;flex-wrap:wrap;}
.setup-l{flex:1;min-width:280px;}
.setup-eyebrow{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:10px;}
.setup-h{font-family:var(--serif);font-size:28px;font-weight:300;line-height:1.15;margin-bottom:8px;}
.setup-h em{font-style:italic;color:var(--gold-pale);}
.setup-p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;max-width:440px;}
.setup-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.12);margin-top:18px;overflow:hidden;}
.setup-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-pale));border-radius:5px;transition:width .4s;}
.setup-steps{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;}
.step-chip{display:flex;align-items:center;gap:7px;font-size:12px;padding:7px 12px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(212,180,131,.18);color:rgba(255,255,255,.7);cursor:pointer;transition:.15s;text-decoration:none;}
.step-chip:hover{background:rgba(138,106,42,.2);}
.step-chip.done{color:var(--gold-pale);}
.step-chip .tick{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(212,180,131,.4);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.step-chip.done .tick{background:var(--gold);border-color:var(--gold);color:#fff;}

/* auto-fit rather than a fixed count: four tiles across a desk, and as many
   as fit on a phone instead of the last one hanging off the edge. The inline
   repeat(3,1fr) some pages set is overridden below at phone width, since an
   inline style beats a class. */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:26px;}
.metric{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;}
a.metric{display:block;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;}
a.metric:hover,a.metric:focus-visible{border-color:var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.06);}
.metric-label{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
/* Money and metrics: the UI face with tabular figures, so columns line up and
   the "1" stays unambiguous (the serif display face renders it like an "I"). */
.metric-val{font-family:var(--numerals);font-size:32px;font-weight:400;color:var(--text);line-height:1;}
.metric-val em{font-style:normal;color:var(--gold);}
.metric-val small{font-size:18px;color:var(--muted);}
/* A tile whose figure is a word ("Unlimited") rather than a number. */
.metric-val.word{font-size:24px;line-height:32px;}
.metric-sub{font-size:11.5px;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:5px;}
.metric-sub.up{color:var(--green-text);}
.metric-sub.warn{color:var(--red-text);}

.dash-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;}
.sched-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);}
.sched-row:last-child{border-bottom:none;}
.sched-time{font-family:var(--serif);font-size:17px;color:var(--gold);width:64px;flex-shrink:0;font-weight:400;}
.sched-body{flex:1;}
.sched-title{font-size:14px;color:var(--text);font-weight:400;}
.sched-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.sched-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
/* The labels and buttons at the end of a row, kept together so several of
   them wrap as one group. */
.sched-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
/* Phone: the status pill was competing with the title for a 375px row and
   squeezing event names to three or four lines. Drop it below the body,
   right-aligned, and let the time column size to its content. */
@media(max-width:820px){
  .sched-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"time dot body" ". . status";column-gap:11px;row-gap:5px;align-items:start;}
  .sched-time{grid-area:time;width:auto;line-height:1.35;}
  .sched-dot{grid-area:dot;margin-top:7px;}
  .sched-body{grid-area:body;min-width:0;}
  .sched-row > .pill,.sched-row > .sched-tags{grid-area:status;justify-self:end;}
}

/* Week view: seven day columns that collapse to a readable list on narrow screens. */
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;}
.week-day{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--r);padding:12px 10px;min-height:150px;display:flex;flex-direction:column;}
.week-day.today{border-color:var(--border-strong);background:var(--cream);}
.week-day.past{opacity:.72;}
.week-day-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:10px;}
.week-dow{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.week-dom{font-family:var(--numerals);font-size:20px;line-height:1;color:var(--text);}
.week-day.today .week-dom{color:var(--gold);}
.week-add{border:none;background:transparent;color:var(--muted);font-size:15px;line-height:1;padding:0 2px;opacity:0;transition:.15s;}
.week-day:hover .week-add,.week-add:focus-visible{opacity:1;color:var(--gold);}
.week-events{display:flex;flex-direction:column;gap:6px;}
.evt{display:flex;gap:7px;align-items:flex-start;text-align:left;width:100%;border:1px solid var(--border);border-radius:var(--rs);background:var(--warm-white);padding:6px 7px;transition:.15s;}
.evt:hover{border-color:var(--gold);}
.evt.clash{border-color:var(--red-text);background:var(--red-bg);}
.evt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.evt-time{display:block;font-family:var(--figures);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--gold);letter-spacing:.02em;}
.evt-title{display:block;font-size:12px;color:var(--text);line-height:1.3;word-break:break-word;}
.evt-meta{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;}
.week-empty{font-size:11.5px;color:var(--muted);font-style:italic;}
.notice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--amber-text);background:var(--amber-bg);color:var(--amber-text);border-radius:var(--r);padding:12px 15px;font-size:13px;margin-bottom:18px;}
@media (max-width:1100px){
  .week-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .week-day{min-height:0;}
}
@media (max-width:620px){.week-grid{grid-template-columns:1fr;}}

.activity{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.activity:last-child{border-bottom:none;}
.act-dot{width:30px;height:30px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold);}
.act-dot svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;}
.act-text{font-size:13px;color:var(--text);line-height:1.5;}
.act-text b{font-weight:500;}
.act-time{font-size:11px;color:var(--muted);margin-top:2px;}

/* ── FORM (profile) ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;}
.fg{display:flex;flex-direction:column;gap:7px;}
.fg.full{grid-column:1/-1;}
.fg.third{grid-column:span 1;}
.fl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.fi,.fs,.fta{padding:11px 14px;border:1px solid var(--border-strong);border-radius:var(--rs);background:var(--warm-white);font-size:14px;color:var(--text);font-weight:300;outline:none;transition:border-color .15s;width:100%;}
.fi:focus,.fs:focus,.fta:focus{border-color:var(--gold);}
.fta{resize:vertical;min-height:88px;line-height:1.6;}
.fi.invalid,.fta.invalid,.fs.invalid{border-color:var(--red-text);}
.field-error{font-size:12px;color:var(--red-text);}
.field-hint{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5;}
.notice{border:1px solid var(--border-strong);background:var(--warm-white);border-radius:10px;padding:12px 14px;}
/* .notice is declared twice: the first is a flex row for the icon+text variant
   (the schedule's warning). This second one only meant to restyle the box, but
   display:flex leaked through — so a titled notice put its heading in a narrow
   column beside the text instead of above it. Titled ones stack; the icon
   variant keeps its row. */
.notice:has(.notice-title){display:block;}
.notice-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
.notice p{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip-toggle{padding:7px 14px;border-radius:20px;border:1px solid var(--border-strong);background:var(--warm-white);font-size:12.5px;color:var(--muted);transition:.15s;}
.chip-toggle.on{background:var(--gold);color:#fff;border-color:var(--gold);}
.chip-toggle:not(.on):hover{border-color:var(--gold);color:var(--gold);}
.toggle{display:flex;align-items:center;gap:12px;}
.switch{width:44px;height:24px;border-radius:20px;background:var(--border-strong);position:relative;transition:.2s;flex-shrink:0;border:none;}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.switch.on{background:var(--gold);}
.switch.on::after{left:22px;}

.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start;}
.stack>*+*{margin-top:16px;}

/* ── PLACEHOLDER (later phases) ── */
.placeholder{border:1.5px dashed var(--border-strong);border-radius:var(--r);background:var(--parchment);padding:48px;text-align:center;}
.placeholder .ph-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);background:rgba(138,106,42,.12);border-radius:20px;padding:5px 14px;margin-bottom:18px;}
.placeholder h2{font-family:var(--serif);font-size:30px;font-weight:400;color:var(--text);margin-bottom:10px;}
.placeholder p{font-size:14px;color:var(--muted);max-width:520px;margin:0 auto;line-height:1.7;}

/* ── TOAST (flash) ── */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--dark);color:var(--gold-pale);padding:12px 22px;border-radius:var(--rs);font-size:13px;font-weight:400;letter-spacing:.03em;z-index:300;opacity:0;transition:.3s;box-shadow:0 12px 32px rgba(0,0,0,.3);pointer-events:none;}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* responsive */
@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr);}.dash-grid,.two-col{grid-template-columns:1fr;}.form-grid{grid-template-columns:1fr;}}
/* .detail-grid's collapse lives next to its own rule further down — it is
   declared after this block, so overriding it from here does nothing. */

/* Off-canvas drawer backdrop. Only ever visible while .sidebar.open is set,
   which can only happen below the drawer breakpoint. */
.sb-backdrop{position:fixed;inset:0;background:rgba(26,20,8,.5);z-index:45;opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;}
.sb-backdrop.on{opacity:1;visibility:visible;}

@media(max-width:820px){
  /* The sidebar keeps its real width and slides off-canvas; only .main loses
     the gutter. Zeroing --sw collapsed the sidebar's OWN width too, so
     translateX(-100%) moved it nowhere and its children spilled across the
     page (and pushed body.scrollWidth past the viewport). */
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;}
  .sidebar.open{transform:none;box-shadow:0 0 46px rgba(0,0,0,.5);}
  .main{margin-left:0;}
  .menu-btn{display:inline-flex!important;}

  /* Fit the bar to a phone: nothing wraps, the barn name gives up space first. */
  .topbar{padding:0 14px;gap:10px;}
  .tb-switch{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;line-height:34px;padding:0 12px;}
  .tb-switch svg{display:none;}
  .tb-setup{flex-shrink:0;font-size:0;gap:0;}
  .tb-btn{white-space:nowrap;flex-shrink:0;padding:9px 12px;letter-spacing:.06em;}
  .tb-qa{flex-shrink:0;}

}
@media(min-width:821px){
  /* A stale .open from a resize must never dim the desktop layout. */
  .sb-backdrop{display:none;}
}
/* Phone-only, and the only way to reach the sidebar: 40x40 was just under the
   44pt target everything else on a phone is measured against. The topbar is
   64px tall, so it costs nothing. */
.menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:var(--rs);padding:8px 11px;color:var(--gold);align-items:center;justify-content:center;min-width:44px;min-height:44px;flex-shrink:0;font-size:15px;line-height:1;}

/* ── SECTION TABS ── */
/* One feature spread over several pages (Hours: timesheets, approvals,
   payable, your own weeks). Deliberately not the .filter chip: a filter
   narrows what you are looking at, a tab moves you to another page of the
   same thing, and a page carries both at once. */
/* The border lives on the wrapper, not the scroller: an underlined tab has to
   meet a line that stays put, and a strip that wraps leaves the active
   underline stranded a row above the border it is supposed to join. Four tabs
   need ~332px and a 375px phone gives the page 307px, so on a phone this
   scrolls sideways instead. */
.section-tabs{border-bottom:1px solid var(--border);margin:-8px 0 22px;}
.section-tabs-row{display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.section-tabs-row::-webkit-scrollbar{display:none;}
.section-tabs a{padding:9px 14px;font-size:13px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:.15s;}
.section-tabs a:hover{color:var(--gold);}
.section-tabs a.on{color:var(--text);border-bottom-color:var(--gold);font-weight:600;}
.section-tabs .sb-badge{margin-left:6px;}

/* ── SETTINGS PLAN MATRIX ── The /pricing ladder, inside Settings: one card
   per plan, one Monthly | Annual toggle over all of them. */
.cadence-toggle{display:inline-flex;border:1px solid var(--border-strong);border-radius:20px;padding:3px;gap:2px;margin:12px 0 16px;}
.cadence-toggle button{border:0;background:transparent;padding:6px 14px;border-radius:16px;font-size:12.5px;color:var(--muted);cursor:pointer;font-family:inherit;}
/* Selected state via aria-pressed only: a static class="on" plus Alpine
   x-bind:class left both buttons looking selected after toggling Annual. */
.cadence-toggle button[aria-pressed="true"]{background:var(--dark);color:var(--gold-pale);}
.cadence-save{font-size:10.5px;opacity:.8;margin-left:4px;}
.plan-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.plan-card{border:1px solid var(--border);border-radius:var(--rs);padding:16px;display:flex;flex-direction:column;gap:6px;background:var(--warm-white);}
.plan-card.popular{border-color:var(--border-strong);}
.plan-card.current{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;}
.plan-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.plan-name{font-weight:600;font-size:15px;color:var(--text);}
.plan-outcome{font-size:12.5px;color:var(--muted);line-height:1.5;min-height:38px;}
.plan-price{font-size:24px;font-weight:500;color:var(--text);font-variant-numeric:tabular-nums;}
.plan-price small{font-size:12px;color:var(--muted);font-weight:400;margin-left:2px;}
.plan-billed{font-size:12px;color:var(--muted);line-height:1.5;}
.plan-limit{font-size:12.5px;color:var(--text);margin-top:6px;}
.plan-feat-label{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-top:8px;}
.plan-feats{list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--muted);line-height:1.55;flex:1;}
.plan-feats li{padding-left:14px;position:relative;margin:3px 0;}
.plan-feats li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-size:11px;}
.plan-action{margin-top:10px;}
.plan-action .btn{width:100%;justify-content:center;}
.plan-action .btn[disabled]{opacity:.6;cursor:default;}
@media(max-width:1100px){.plan-matrix{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.plan-matrix{grid-template-columns:1fr;}}

/* Service providers: chips, then a search line with its checkbox beside it. */
.provider-filters{margin-bottom:24px;}
.provider-filters .filter-bar{margin-bottom:14px;}
.provider-search{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;}
.provider-search .fi{flex:0 1 320px;min-width:0;}
.check-inline{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;}
.check-inline input{accent-color:var(--gold);margin:0;}
/* Horse care's day row: the "Earlier…" menu wears the chip's clothes. */
.filter.day-earlier{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;font:inherit;font-size:12.5px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat;}
.filter.day-earlier.on{background-color:var(--dark);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);}
/* ── FILTER BAR ── */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;align-items:center;}
.filter{padding:7px 14px;border-radius:20px;border:1px solid var(--border-strong);background:var(--warm-white);font-size:12.5px;color:var(--muted);transition:.15s;text-decoration:none;display:inline-flex;align-items:center;}
.filter.on{background:var(--dark);color:var(--gold-pale);border-color:var(--dark);}
.filter:not(.on):hover{border-color:var(--gold);color:var(--gold);}
.filter .n{opacity:.6;margin-left:5px;font-size:11px;}
/* A sidebar badge reused inside a filter chip. In the sidebar its
   margin-left:auto shoves it to the far right of a full-width row; inside a
   chip that resolves to no gap at all, so the count sits against the last
   letter and reads as one word ("Done1"). Give it a real gap here. */
.filter .sb-badge{margin-left:6px;}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--warm-white);border:1px solid var(--border-strong);border-radius:20px;padding:6px 14px;}
.search input{border:none;background:none;outline:none;font-size:13px;color:var(--text);width:180px;}
/* Phone: margin-left:auto strands the search box mid-row once the filter
   chips wrap. Give it the full width of its own line instead. */
@media(max-width:820px){
  .filter-bar .search{margin-left:0;width:100%;}
  .filter-bar .search input{width:100%;}
}
.search svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;}

/* ── TASK BOARD ──
   Ported verbatim from the prototype (EquiPortal_Manager_Web.html:263-272).
   These rules were never carried across when the Tasks screen was built, so
   .task-row/.task-check/.task-title/.task-meta/.task-assignee had no styling
   at all and the board rendered as unstyled stacked text on every viewport.
   .task-check is a <button> here (it was a <div> in the prototype), so it
   also needs the padding/appearance reset a div didn't. */
.task-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--border);border-radius:var(--r);background:var(--warm-white);margin-bottom:10px;transition:.15s;}
.task-row.done{opacity:.55;background:var(--cream);}
.task-check{width:22px;height:22px;padding:0;border-radius:6px;border:1.5px solid var(--border-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--warm-white);transition:.15s;position:relative;}
.task-check svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.4;opacity:0;}
.task-row.done .task-check{background:var(--gold);border-color:var(--gold);}
.task-row.done .task-check svg{opacity:1;}
.task-row.done .task-title{text-decoration:line-through;color:var(--muted);}
.task-title{font-size:14px;color:var(--text);font-weight:400;flex:1;}
.task-meta{font-size:12px;color:var(--muted);}
/* A job that opens the feed chart says so beside its title. */
.feed-job-cue{margin-left:8px;white-space:nowrap;}
.task-assignee{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);}
/* Off for stall rest: on the list, struck through and labelled, with no box
   to tick. Greyed by colour, not by fading the row — the words stay as
   readable as any hint on the page (--muted on --cream, the grey pill's own
   pair), because somebody still has to read what is off. */
.task-row.skipped{background:var(--cream);}
.task-row.skipped .task-label{text-decoration:line-through;color:var(--muted);}
.task-check-off{border-style:dashed;background:transparent;}
/* "Couldn't be done": the mark, and the button that opens its form. Neither
   shows on a ticked row — a mark and a tick never stand together — and the
   button gives way to the mark once there is one. */
.task-cant{font-size:12px;flex-shrink:0;}
.task-row.done .task-cant,.task-row.done .task-not-done{display:none;}
.task-row[data-marked] .task-cant{display:none;}
.cant-open{background:none;border:none;padding:0;white-space:nowrap;}
.task-not-done{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:12px;color:var(--text);cursor:default;}
.task-not-done-clear{display:inline;margin:0;}
.readable .task-cant,.readable .task-not-done{font-size:14px;}
/* The same mark and button on the horse's own care card. A line there is
   the .kv row and, under it, a line of its own for "Couldn't be done" — so a
   long reason neither squeezes the item's name nor pushes the order controls
   off a phone. The rule under the line belongs to the line, not the row. */
.care-line{border-bottom:1px solid var(--border);}
.care-line > .kv{border-bottom:none;}
.care-line-after{display:flex;justify-content:flex-end;text-align:right;padding:0 0 10px;margin-top:-5px;}
.care-line-after .task-not-done{justify-content:flex-end;margin-top:0;}

/* Reordering care within a shift: a drag handle and Move up / Move down on
   each row (partials.care-order-controls). The handle takes the touch itself
   (touch-action:none) so a finger on it drags the row instead of scrolling
   the page; everywhere else on the row still scrolls. */
.care-order{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;}
.care-grip,.care-move{width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:6px;background:none;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;transition:.15s;}
.care-grip{cursor:grab;touch-action:none;}
.care-grip svg,.care-move svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.care-grip:hover,.care-move:hover:not(:disabled){border-color:var(--border-strong);color:var(--text);}
.care-move:disabled{opacity:.3;cursor:default;}
.care-dragging{position:relative;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.16);background:var(--warm-white);}
.care-ordering{user-select:none;-webkit-user-select:none;}
.care-ordering .care-grip{cursor:grabbing;}
/* On a horse's page the rows are .kv lines: the words left, the detail and
   the controls right; each keeps its rule under it though it is now the
   last child of its shift. */
[data-care-order] .kv .v{margin-left:auto;}
.kv .care-order{margin:-5px 0;}
[data-order-said][hidden]{display:none !important;}
[data-order-said]{margin:2px 0 12px;}

/* Phone: the title gets the full width beside the checkbox, and meta +
   assignee drop to a second line indented under it. Grid rather than
   flex-wrap — wrapping just let flex shrink the title into a narrow column
   instead of pushing the meta down. The checkbox keeps its 22px look but gets
   a 44px invisible hit area; this gets tapped with barn gloves on. Must sit
   after the base rules above, or .task-row{display:flex} wins on source order. */
@media(max-width:820px){
  .task-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"check title title" ". meta assignee";column-gap:12px;row-gap:6px;padding:13px 14px;}
  .task-check{grid-area:check;}
  .task-title{grid-area:title;font-size:15px;min-width:0;}
  .task-meta{grid-area:meta;}
  .task-assignee{grid-area:assignee;justify-self:end;}
  .task-check::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;}
  /* The order controls take a third line of their own, at fingertip size. */
  .task-row .task-cant{grid-column:2 / -1;}
  /* "Couldn't be done" and "Take back" are tapped with gloves on too. */
  .cant-open,.task-not-done-clear button{min-height:36px;}
  .task-row .care-order{grid-column:2 / -1;justify-self:end;gap:6px;}
  /* On the horse's page the three fingertip-sized order buttons left the
     detail a column one word wide. There the row wraps instead: the words,
     then the detail, then the controls, each as wide as it needs. */
  [data-care-order] .kv{flex-wrap:wrap;row-gap:6px;}
  [data-care-order] .kv .care-order{margin:0 0 0 auto;gap:6px;}
  .care-grip,.care-move{width:40px;height:36px;border-color:var(--border);}
}

/* ── PREVIOUS DAYS ──
   The barn's record of the last fortnight, as a register: jobs down, days
   across. It replaced a stack of per-day cards, which answered "what happened
   on Tuesday" but never "who keeps skipping the night check" — and reading a
   fortnight meant scrolling fourteen cards and holding the pattern in your
   head. A grid puts the pattern on the page, and it puts the thing you tick at
   the intersection of a job and a day, which is exactly what a correction
   names.

   The table scrolls inside .pd-wrap rather than widening the page, with the
   job column pinned, so 375px shows a week of columns and swipes to the rest
   while you can still see whose job it is. Newest day first: the day somebody
   is asking about is nearly always yesterday. */
.pd-wrap{border:1px solid var(--border);border-radius:var(--r);background:var(--warm-white);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pd{border-collapse:separate;border-spacing:0;width:100%;}
.pd th,.pd td{padding:0;font-weight:inherit;}
.pd thead th{background:var(--cream);border-bottom:1px solid var(--border);}
/* What a person typed, the way they typed it. A line break in a note is a
   line break on the page; a word in capitals stays in capitals and one in
   lower case stays lower. Put on any element that shows text somebody
   wrote, never on a label of ours. */
.as-typed{white-space:pre-line;overflow-wrap:anywhere;}
/* An eyebrow-styled heading that carries a name somebody spelled: the
   name keeps its own case and letter-spacing. */
.keep-case,.card-title.keep-case{text-transform:none;letter-spacing:0;}
/* The care round's three blocks — AM, Midday, PM — each a run of horse cards. */
.care-shift{margin-bottom:10px;}
.care-shift-head{margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border);font-size:inherit;font-weight:inherit;}
.care-shift + .care-shift .care-shift-head{margin-top:18px;}

/* Pinned so a job never scrolls away from its own row of ticks. */
.pd-job{position:sticky;left:0;z-index:2;background:var(--warm-white);border-right:1px solid var(--border);width:210px;min-width:210px;max-width:210px;padding:9px 14px;text-align:left;vertical-align:middle;}
.pd thead .pd-job{z-index:3;background:var(--cream);}
.pd tbody tr:hover .pd-job{background:var(--parchment);}
.pd-job-head{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.pd-title{font-size:13.5px;color:var(--text);line-height:1.3;}
.pd-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.pd-day{width:42px;min-width:42px;padding:7px 0 8px;text-align:center;}
.pd-day.today{background:rgba(138,106,42,.09);}
.pd-dow{display:block;font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.pd-dom{display:block;font-family:var(--figures);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--text);margin-top:1px;}
.pd-day.today .pd-dom{color:var(--gold);font-weight:600;}
.pd-cell{text-align:center;border-top:1px solid var(--border);height:40px;vertical-align:middle;}
.pd-cell.today{background:rgba(138,106,42,.05);}
.pd tbody tr:hover .pd-cell{background:var(--parchment);}
.pd-foot td{border-top:1px solid var(--border-strong);font-family:var(--figures);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--muted);text-align:center;padding:7px 0;}
.pd-foot .pd-job{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}

/* One cell. A button when it can be corrected, a span when it can't — the
   difference has to be felt, not just enforced on the server. */
.pd-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:1.5px solid transparent;background:transparent;padding:0;position:relative;}
.pd-mark svg{width:13px;height:13px;fill:none;stroke-width:2.4;}
/* Who signed the day off, shown in the square itself rather than only on
   hover. Two letters against the gold "done" fill. */
.pd-who{font-size:8.5px;font-weight:700;letter-spacing:.02em;line-height:1;color:#fff;}
/* The sign-off time, under the square, so who AND when are both on the page
   rather than only in the hover. A corrected day shows the date it was typed
   instead — its clock time would misstate when the work was actually done. */
.pd-cell{text-align:center;}
.pd-time{display:block;font-size:9px;line-height:1.2;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pd-mark.done.amended .pd-who{color:var(--gold-pale);}
.pd-mark.done{background:var(--gold);border-color:var(--gold);}
.pd-mark.done svg{stroke:#fff;}
/* Pencilled in afterwards. Outlined rather than filled on purpose: this record
   is argued from, and a sign-off written down on Tuesday about Saturday must
   never look like one made in the aisle on Saturday. */
.pd-mark.amended{background:rgba(138,106,42,.16);border-style:dashed;border-color:var(--gold);}
.pd-mark.amended svg{stroke:var(--gold);}
.pd-mark.missed{background:var(--red-bg);border-color:rgba(154,58,42,.4);}
.pd-mark.open{background:var(--warm-white);border-style:dashed;border-color:var(--border-strong);}
/* Somebody said it couldn't be done, and why: still not done, but answered
   for — a solid edge and a mark in the square, where a plain miss is empty. */
.pd-mark.cant{border-color:var(--red-text);color:var(--red-text);font-size:13px;font-weight:700;line-height:1;}
/* Off for stall rest that day: not a miss and not a tick. */
.pd-mark.skipped{background:var(--cream);border-style:dashed;border-color:var(--border-strong);color:var(--muted);font-size:12px;line-height:1;}
/* Not this job's day. A blank, not a failure — a weekdays job with empty
   weekends has to read as a weekdays job. */
.pd-mark.none{border:none;color:var(--border-strong);font-size:15px;line-height:1;}
button.pd-mark{cursor:pointer;transition:.12s;}
button.pd-mark:hover{box-shadow:0 0 0 3px rgba(138,106,42,.18);}
button.pd-mark.missed:hover,button.pd-mark.open:hover{border-color:var(--gold);}
.pd-mark.late::after{content:'';position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-radius:50%;background:var(--amber-text);}
.pd-tally{font-family:var(--figures);font-variant-numeric:tabular-nums;}
.pd-tally.warn{color:var(--red-text);}

.pd-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:11.5px;color:var(--muted);align-items:center;}
.pd-legend span{display:inline-flex;align-items:center;gap:7px;}
.pd-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:12px;}
.pd-note a{color:var(--gold);text-decoration:none;}
.pd-note a:hover{color:var(--gold-light);}

/* ── PREVIOUS DAYS · one day ──
   A column of the register opened in full: every job and care item that day,
   done or not, with who, when, late and after-the-fact corrections. */
.pd-day-link{display:block;text-decoration:none;color:inherit;padding:1px 0;border-radius:var(--rs);}
.pd-day-link:hover .pd-dow,.pd-day-link:focus-visible .pd-dow{color:var(--gold);}
.pd-day-link:hover .pd-dom{color:var(--gold);}
.pd-di-summary{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:16px;}
.pd-di-summary strong{font-family:var(--figures);font-variant-numeric:tabular-nums;color:var(--text);font-weight:600;}
.pd-di-count.warn strong{color:var(--red-text);}
.pd-di-dot{color:var(--border-strong);}
.pd-di-card{margin-bottom:16px;}
.pd-di-group + .pd-di-group{margin-top:18px;}
.pd-di-group-head{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.pd-di-horse-group{margin-bottom:10px;}
.pd-di-horse-group:last-child{margin-bottom:0;}
.pd-di-horse-name{font-family:var(--serif);font-size:14px;color:var(--gold);margin:6px 0 2px;}
.pd-di-list{list-style:none;margin:0;padding:0;}
.pd-di{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);}
.pd-di:last-child{border-bottom:none;}
.pd-di-mark{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:1.5px solid transparent;margin-top:1px;}
.pd-di-mark svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.4;}
.pd-di-mark.done{background:var(--gold);border-color:var(--gold);}
.pd-di-mark.done.amended{background:rgba(138,106,42,.16);border-style:dashed;border-color:var(--gold);}
.pd-di-mark.done.amended svg{stroke:var(--gold);}
.pd-di-mark.missed{background:var(--red-bg);border-color:rgba(154,58,42,.4);}
.pd-di-mark.open{background:var(--warm-white);border-style:dashed;border-color:var(--border-strong);}
.pd-di-mark.skipped{background:var(--cream);border-style:dashed;border-color:var(--border-strong);}
.pd-di.skipped .pd-di-title > span:first-child{text-decoration:line-through;color:var(--muted);}
.pd-di-body{flex:1;min-width:0;}
.pd-di-title{font-size:14px;color:var(--text);line-height:1.3;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;}
.pd-di-horse{font-size:11.5px;color:var(--muted);}
.pd-di-meta{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.pd-di.missed .pd-di-meta{color:var(--red-text);}
.pd-di-note{font-size:12.5px;color:var(--text);opacity:.85;margin-top:4px;line-height:1.5;font-style:italic;}

/* Phone: narrower everything, so a week of columns fits beside the job name
   at 375px and the rest is a swipe away. The tap target stays 40px tall even
   though the mark is 22px — this gets tapped with barn gloves on. */
@media(max-width:820px){
  .pd-job{width:132px;min-width:132px;max-width:132px;padding:9px 10px;}
  .pd-title{font-size:12.5px;}
  .pd-day{width:38px;min-width:38px;}
  .pd-legend{gap:12px;}
}

/* ── ANNOUNCEMENT FEED ──
   Lifted verbatim out of the inline styles on the post header so the phone
   breakpoint has something to hook. Desktop declarations are unchanged. */
.ann-head{display:flex;align-items:flex-start;gap:10px;}
.ann-who{flex:1;min-width:0;}
.ann-actions{display:flex;gap:12px;align-items:center;margin-left:8px;}
/* Phone: avatar + author on the first line, audience pill and Edit/Delete
   wrapped below — at 375px all four children collided and the pill printed
   on top of the author's name. */
@media(max-width:820px){
  .ann-head{flex-wrap:wrap;}
  .ann-head .pill{order:3;margin-left:34px;}
  .ann-actions{order:4;margin-left:auto;}
}

/* ── TIME CLOCK ── */
.clock-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px;}
.clock-state{display:flex;align-items:center;gap:14px;min-width:0;}
.clock-dot{width:10px;height:10px;border-radius:50%;background:var(--border-strong);flex-shrink:0;}
.clock-dot.on{background:var(--green-text);box-shadow:0 0 0 4px rgba(74,138,74,.15);}
.clock-title{font-size:15px;color:var(--text);}
.clock-sub{font-size:12.5px;color:var(--muted);margin-top:3px;}
/* Phone: the button goes full width under the state rather than squeezing
   the "since 7:02 AM · 3h 10m" line to nothing. */
@media(max-width:820px){
  .clock-card{flex-direction:column;align-items:stretch;gap:14px;}
  .clock-card .btn{width:100%;justify-content:center;}
}

/* ── HORSE CARDS ── */
.horse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.horse-card{border:1px solid var(--border);border-radius:var(--r);background:var(--warm-white);overflow:hidden;transition:.15s;text-decoration:none;display:block;color:inherit;}
.horse-card:hover{box-shadow:0 6px 18px rgba(90,68,32,.1);border-color:var(--border-strong);}
.hc-top{display:flex;gap:14px;padding:18px 18px 14px;}
.hc-portrait{width:52px;height:52px;border-radius:10px;background:linear-gradient(150deg,var(--gold-pale),var(--brown));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:24px;color:#fff;flex-shrink:0;}
.hc-name{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--text);line-height:1;}
.hc-breed{font-size:12px;color:var(--muted);margin-top:4px;}
.hc-rows{padding:0 18px 16px;}
.hc-row{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-top:1px solid var(--border);}
.hc-row:first-child{border-top:none;}
.hc-k{color:var(--muted);}
.hc-v{color:var(--text);font-weight:400;}
.hc-foot{padding:12px 18px;background:var(--cream);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.add-horse-card{border:1.5px dashed var(--border-strong);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);min-height:180px;cursor:pointer;transition:.15s;background:none;width:100%;}
.add-horse-card:hover{border-color:var(--gold);color:var(--gold);background:var(--cream);}
.add-horse-card svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.4;}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 16px 12px;border-bottom:1px solid var(--border);}
.tbl td{padding:15px 16px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--cream);}
.tbl .name{font-weight:400;}
/* Row actions — Edit / Resend / Deactivate / Remove and friends.
   Held on one nowrap line with fixed left margins, this cell is wider than
   the column it gets on a narrow desktop window (a laptop with the sidebar
   open), so the last link hung off the right edge of the card. Wrapping is
   the honest answer: the row grows a line instead of losing a button. */
.tbl .row-actions{text-align:right;}
.tbl .row-actions .row-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 14px;}
.tbl .row-actions .row-acts a,.tbl .row-actions .row-acts button{margin-left:0!important;}
/* An address is one long unbreakable word to a browser. Let it break rather
   than push every other column off the card — but put the rule on the address
   itself: applied to the whole cell it also broke the phone number mid-digits,
   which is the one thing in there nobody can read back out. */
.tbl .wraps{overflow-wrap:anywhere;}
/* Phone: a four-column table can't fit 375px — the actions column fell off
   the right edge and took the page into horizontal scroll. Each row becomes
   its own stacked card instead. The !importants override per-cell inline
   styles (text-align:right, white-space:nowrap) that only make sense in a
   real table. Applies to every .tbl, so Customers and Billing stop
   overflowing too even though they aren't phone-first screens.
   Measured against the CONTENT column, not the window: a laptop window at
   ~900px keeps the 246px sidebar, leaving ~650px for a six-column table,
   which then ran past its card and broke emails a letter per line. .main
   (and body, for layouts without one) are size containers, so this fires
   whenever the space the table actually has is phone-narrow. */
@container (max-width:820px){
  .tbl thead{display:none;}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%;}
  .tbl tr{border:1px solid var(--border);border-radius:var(--r);padding:13px 14px;margin-bottom:12px;}
  .tbl tr:hover td{background:none;}
  .tbl td{border-bottom:none;padding:4px 0;text-align:left!important;white-space:normal!important;}
  .tbl td:first-child{padding-top:0;font-size:15px;}
  /* The action links sit together on their own line under the row. */
  .tbl td:last-child{padding-top:12px;display:flex!important;flex-wrap:wrap;gap:16px;align-items:center;}
  .tbl td:last-child a,.tbl td:last-child button,.tbl td:last-child form{margin-left:0!important;}
  /* Stacked, the row is a card and the actions read from the left. */
  .tbl .row-actions{text-align:left!important;}
  .tbl .row-actions .row-acts{justify-content:flex-start;}
}
.amt{font-family:var(--figures);font-size:15px;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.mini-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--brown));color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-family:var(--serif);flex-shrink:0;}
.horse-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);text-decoration:none;font-size:13.5px;}
.horse-link:hover{color:var(--gold-light);}
.horse-link .hdot{width:22px;height:22px;border-radius:6px;background:linear-gradient(150deg,var(--gold-pale),var(--brown));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:12px;flex-shrink:0;}
.no-horse{color:var(--muted);font-size:13px;font-style:italic;}
.type-cell{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;}
.type-cell .pill{white-space:normal;}
.owner-link{color:var(--gold);text-decoration:none;}
.owner-link:hover{text-decoration:underline;}

/* ── DETAIL PAGE ── */
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start;}
/* Detail pages (horse, customer, staff) go single-column before the sidebar
   collapses — the side column was still 1fr of 375px and got clipped. */
@media(max-width:1100px){.detail-grid{grid-template-columns:1fr;}}
.detail-hero{display:flex;gap:18px;align-items:center;margin-bottom:6px;}
.detail-portrait{width:72px;height:72px;border-radius:14px;background:linear-gradient(150deg,var(--gold-pale),var(--brown));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:34px;color:#fff;flex-shrink:0;}
/* A horse's photo sits in the same box its initial did — list card, detail
   hero, the care round's header — cropped to fill, never stretched. */
.hc-portrait.has-photo,.detail-portrait.has-photo,.care-portrait.has-photo{background:var(--parchment);overflow:hidden;}
.hc-portrait img,.detail-portrait img,.care-portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.care-horse-head{display:flex;align-items:center;gap:10px;min-width:0;}
.care-portrait{width:32px;height:32px;border-radius:8px;background:linear-gradient(150deg,var(--gold-pale),var(--brown));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;color:#fff;flex-shrink:0;}
.photo-actions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.photo-actions .btn{padding:6px 11px;font-size:10.5px;}
.kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--muted);}
.kv .v{color:var(--text);text-align:right;}
/* The way back off a detail page. This was a bare 12px text link with a 13px
   chevron and no padding at all: 50x15 CSS px of hit area, which is under
   WCAG 2.2's 24x24 minimum on the short edge and nowhere near Apple's ~44pt
   touch target. On a phone you aimed at a word and missed. It is now a real
   chip -- a 44px-tall bordered control with its own padding, so a thumb has
   something to land on and the eye reads it as pressable rather than as a
   caption above the title. The chevron grew with it (13 -> 17px) so it still
   reads as an arrow next to a 13.5px word instead of a speck. */
.crumb{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 15px 0 12px;font-size:13.5px;color:var(--gold);text-decoration:none;border:1px solid var(--border-strong);border-radius:var(--rs);background:transparent;transition:.15s;margin-bottom:18px;}
.crumb:hover{color:var(--gold-light);background:var(--cream);}
.crumb:active{background:var(--parchment);}
.crumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.crumb svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
/* .crumb used to double as "a small gold link", and one page borrowed it for
   an out-of-app help link sitting in a row of .btns. Now that .crumb is a
   44px back control, that borrowing would tower over the buttons beside it,
   so the quiet-link job gets its own name. Sized to sit on the .btn baseline
   (34px) rather than to be a touch target -- it is a footnote, not a way out
   of the page. */
.link-quiet{display:inline-flex;align-items:center;min-height:34px;font-size:13px;color:var(--gold);text-decoration:none;}
.link-quiet:hover{color:var(--gold-light);text-decoration:underline;}
.danger-link{color:var(--red-text);background:none;border:none;font-size:12px;cursor:pointer;text-decoration:none;}
.danger-link:hover{text-decoration:underline;}

/* ── MODAL ── */
.overlay{position:fixed;inset:0;background:rgba(26,20,8,.55);z-index:150;display:none;align-items:center;justify-content:center;padding:2rem;backdrop-filter:blur(2px);}
.overlay.on{display:flex;}
.modal{background:var(--warm-white);border-radius:14px;width:100%;max-width:440px;overflow:hidden;box-shadow:0 30px 80px rgba(26,20,8,.4);animation:pop .2s ease;}
.modal.wide-m{max-width:520px;}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0;}}
/* padding-right reserves the corner the (now 44px) close button occupies, so
   a long modal title can't run underneath it. Every .modal-head in the app
   carries exactly one .x-btn, so this is unconditional. */
.modal-head{padding:22px 62px 16px 24px;border-bottom:1px solid var(--border);position:relative;}
.modal-head .eyebrow{margin-bottom:8px;}
.modal-title{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--text);}
.modal-body{padding:22px 24px;max-height:60vh;overflow-y:auto;}
.modal-foot{padding:16px 24px;background:var(--cream);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;}
/* Dismissing a dialog is the same problem as going back. The bare glyph
   measured 19.5x29.4 px -- narrower than WCAG 2.2's 24px minimum, and the
   only escape from a modal on a phone. Now a 44x44 square centred on the
   same corner, with a hover ground so it looks like a button. */
.x-btn{position:absolute;top:9px;right:9px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--rs);color:var(--muted);font-size:24px;line-height:1;padding:0;cursor:pointer;transition:.15s;}
.x-btn:hover{background:var(--cream);color:var(--text);}
.x-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ── FACILITIES MAP ── */
.fac-tabs{display:flex;gap:4px;background:var(--cream);border:1px solid var(--border);border-radius:var(--rs);padding:4px;margin-bottom:22px;width:fit-content;}
.fac-tab{padding:8px 18px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--muted);background:none;border:none;transition:.15s;}
.fac-tab.active{background:var(--warm-white);color:var(--gold);box-shadow:0 1px 3px rgba(90,68,32,.12);}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:20px;font-size:12px;color:var(--muted);align-items:center;}
.legend span{display:flex;align-items:center;gap:6px;}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;}

.aisle{background:var(--parchment);border:1px solid var(--border);border-radius:var(--r);padding:20px 22px;margin-bottom:20px;}
.aisle-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.aisle-name{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--text);}
.aisle-name em{font-style:italic;color:var(--gold);font-size:15px;font-family:var(--sans);font-weight:400;margin-left:8px;}
.aisle-lane{position:relative;display:flex;align-items:center;justify-content:center;}
.lane-strip{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:26px;background:repeating-linear-gradient(90deg,rgba(138,106,42,.08) 0 14px,transparent 14px 28px);border-top:1px dashed var(--border-strong);border-bottom:1px dashed var(--border-strong);border-radius:3px;}
/* The row is drawn to what's in it: --cols is the sum of the boxes' widths,
   set per aisle. A four-stall barn used to get a six-column lane and a long
   dashed run of nothing. */
.stall-line{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(84px,150px));gap:10px;width:100%;position:relative;z-index:1;}
/* A room is a box in the same row that no horse goes in — read as a fixture
   rather than a vacancy, so it can't be mistaken for an empty stall. */
.stall.room{background:var(--parchment);border-style:solid;border-color:var(--gold);}
.stall.room .num{color:var(--gold);}
/* The resize handle, shown in edit mode only. */
.stall .grip{position:absolute;top:0;right:0;width:12px;height:100%;cursor:col-resize;background:linear-gradient(90deg,transparent,rgba(138,106,42,.22));border-radius:0 8px 8px 0;}
.stall .grip:hover{background:linear-gradient(90deg,transparent,rgba(138,106,42,.45));}
.stall{aspect-ratio:1/.92;border-radius:8px;border:1.5px solid var(--border-strong);background:var(--warm-white);padding:9px 8px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:.15s;position:relative;overflow:hidden;text-align:left;width:100%;}
.stall:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 16px rgba(90,68,32,.14);}
.stall .num{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--muted);}
.stall .horse{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--text);line-height:1;}
.stall .owner{font-size:10px;color:var(--muted);margin-top:2px;}
.stall.occupied{background:linear-gradient(160deg,#fbf7ee,#f3ead6);border-color:var(--gold);}
.stall.occupied .horse{color:var(--brown);}
.stall.empty{background:var(--warm-white);border-style:dashed;}
.stall.empty .horse{color:var(--border-strong);font-size:14px;font-style:italic;font-weight:400;}
.stall.maintenance{background:repeating-linear-gradient(135deg,#fef3e2,#fef3e2 8px,#fdeccf 8px,#fdeccf 16px);border-color:var(--amber-text);}
.stall .add-i{font-size:22px;color:var(--border-strong);align-self:center;margin:auto;font-weight:300;}
.stall.empty:hover .add-i{color:var(--gold);}
.stall.dragging{opacity:.4;}
.stall.editing{cursor:grab;}
.stall .rm{position:absolute;top:4px;right:6px;font-size:14px;color:var(--red-text);background:none;border:none;line-height:1;padding:2px;display:none;}
.stall.editing .rm{display:block;}

.pasture-map{background:linear-gradient(160deg,#eef3ea,#e4ecdf);border:1px solid var(--border);border-radius:var(--r);padding:20px;}
.pasture-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.pasture{border:2px solid rgba(74,138,74,.35);border-radius:12px;background:rgba(255,255,255,.55);padding:16px 18px;position:relative;cursor:pointer;transition:.15s;min-height:120px;text-align:left;width:100%;}
.pasture:hover{border-color:var(--green-text);background:rgba(255,255,255,.8);}
.pasture-name{font-family:var(--serif);font-size:20px;font-weight:500;color:#3a5a3a;}
.pasture-meta{font-size:11px;color:#6a8a6a;margin-top:3px;letter-spacing:.03em;}
.pasture-occ{position:absolute;top:14px;right:16px;font-size:11px;font-weight:600;color:var(--green-text);background:rgba(255,255,255,.7);border-radius:20px;padding:2px 9px;}
.pasture-occ.full{color:var(--red-text);}
.turnout{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.turnout .chip{font-size:13px;background:rgba(255,255,255,.75);border:1px solid rgba(74,138,74,.25);color:#3a5a3a;border-radius:20px;padding:3px 10px;font-family:var(--serif);}

.arena-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.arena{border:1px solid var(--border);border-radius:var(--r);background:var(--warm-white);padding:18px 20px;cursor:pointer;transition:.15s;text-align:left;width:100%;}
.arena:hover{border-color:var(--gold);box-shadow:0 4px 12px rgba(90,68,32,.1);}
.arena-ico{width:38px;height:38px;border-radius:9px;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:12px;}
.arena-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;}
.arena-name{font-family:var(--serif);font-size:19px;font-weight:500;color:var(--text);}
.arena-meta{font-size:12px;color:var(--muted);margin-top:3px;}
.arena-state{margin-top:12px;}
.stall-panel-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.stall-panel-row:last-child{border-bottom:none;}

/* ── PICKERS (horses on an event, days of the week on a repeat) ── */
.picker{position:relative;}
.picker-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer;}
.picker-toggle:hover{border-color:var(--gold);}
.picker-menu{position:absolute;z-index:20;top:calc(100% + 4px);left:0;right:0;border:1px solid var(--border-strong);border-radius:var(--rs);background:var(--warm-white);box-shadow:0 8px 24px rgba(90,68,32,.14);overflow:hidden;}
.picker-scroll{max-height:210px;overflow-y:auto;}
.picker-row{display:flex;align-items:center;gap:10px;padding:9px 13px;font-size:13.5px;color:var(--text);cursor:pointer;}
.picker-row:hover{background:var(--cream);}
.picker-row input{width:15px;height:15px;accent-color:var(--gold);flex-shrink:0;}
.picker-row.all{border-bottom:1px solid var(--border);font-weight:500;}

.day-picker{display:flex;flex-wrap:wrap;gap:6px;}
.day-chip{padding:7px 12px;border-radius:20px;border:1px solid var(--border-strong);background:var(--warm-white);font-size:12.5px;color:var(--muted);cursor:pointer;transition:.15s;}
.day-chip input{position:absolute;opacity:0;pointer-events:none;}
.day-chip:not(.on):hover{border-color:var(--gold);color:var(--gold);}
.day-chip.on{background:var(--gold);color:#fff;border-color:var(--gold);}
/* The day the event starts on is always in the run and can't be turned off. */
.day-chip.fixed{cursor:default;opacity:.85;}

/* ── PAGINATION + EMPTY ── */
.pagination-wrap{margin-top:22px;}
.empty-state{border:1.5px dashed var(--border-strong);border-radius:var(--r);background:var(--parchment);padding:40px;text-align:center;color:var(--muted);}
.empty-state h3{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--text);margin-bottom:8px;}
.empty-state p{font-size:13.5px;max-width:420px;margin:0 auto 16px;line-height:1.6;}


/* ---- phone: money screens -------------------------------------------------
   Billing and the invoice form were laid out for a desk and clipped on a
   phone: the third metric tile ran past the edge, and the line-item table is
   wider than any phone. */
@media (max-width: 720px) {
    /* Beats the inline grid-template-columns these pages set. */
    .metrics[style]{grid-template-columns:1fr 1fr !important;}
    .metric{padding:14px 15px;}
    .metric-val{font-size:26px;}

    /* A table can't scroll on its own without a wrapper, and these are written
       straight into the page. Making it its own scroll box keeps every column
       reachable instead of cutting the last ones off, and leaves the desktop
       layout alone. */
    .tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
    .tbl thead, .tbl tbody, .tbl tr{display:table;width:100%;table-layout:fixed;}
    .tbl td, .tbl th{padding-left:12px;padding-right:12px;}
    .tbl .fi{min-width:0;}

    /* Two columns of cards don't fit a phone; they were running off the edge
       on the invoice form. Declared here, at the end of the file, because
       .detail-grid's own rule is below the shared responsive block and would
       otherwise win. */
    .detail-grid{grid-template-columns:1fr;}
    .two-col{grid-template-columns:1fr;}
}

@media (max-width: 420px) {
    .metrics[style]{grid-template-columns:1fr !important;}
}

/* ── PROPERTY MAP ──────────────────────────────────────────────────────────
   The barn on the satellite picture of itself. Everything sits over dark
   imagery, so labels carry their own contrast rather than borrowing the
   page's. */
.prop-wrap{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start;}
.prop-map{height:620px;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;background:var(--parchment);}
.prop-map.drawing{cursor:crosshair;}
.prop-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;}
.prop-bar .sep{width:1px;height:22px;background:var(--line);margin:0 2px;}
.prop-hint{font-size:12px;color:var(--muted);}
.prop-map-wrap{position:relative;}
.crumbs{display:flex;align-items:center;gap:8px;margin:-8px 0 16px;font-size:13px;}
.crumb{background:none;border:none;color:var(--gold);font-weight:500;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.crumb.on{color:var(--ink);text-decoration:none;font-weight:600;}
.crumb-sep{color:var(--muted);}
.building{background:var(--parchment);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;width:fit-content;max-width:100%;min-width:min(100%,520px);margin-bottom:20px;}
.building .aisle.brow{background:none;border:none;padding:0;margin:0;}
.building .aisle.brow .lane-strip{display:none;}
.building .aisle.brow .aisle-head{margin-bottom:8px;}
.building .aisle.brow .aisle-name{font-size:15px;}
.building .aisle.brow .stall-line{width:auto;}
.lane-strip-row{height:30px;margin:12px 0;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(138,106,42,.08) 0 14px,transparent 14px 28px);border-top:1px dashed var(--border-strong);border-bottom:1px dashed var(--border-strong);}
.bld-setup{background:var(--parchment);border:1px solid var(--border);border-radius:var(--r);padding:22px 24px;margin-bottom:20px;}
.bld-setup h3{margin:0 0 4px;font-size:18px;}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:16px 0;}
.tpl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border:1px solid var(--line);border-radius:var(--rs);background:var(--warm-white);text-align:left;cursor:pointer;}
.tpl:hover{border-color:var(--gold);}
.tpl.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(196,163,90,.35);background:#fff;}
.tpl b{font-size:14px;margin-top:4px;} .tpl small{font-size:12px;color:var(--muted);line-height:1.4;}
.tpl-pic{display:block;width:100%;aspect-ratio:200/110;border-radius:6px;background:#f3ede0;overflow:hidden;}
.tpl-pic svg{width:100%;height:100%;display:block;}
.bld-setup-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.unplaced{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.prop-coach{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:1000;margin:0;max-width:min(92%,560px);
    padding:9px 14px;border-radius:var(--rs);background:#fff;color:var(--ink);font-size:13px;line-height:1.4;
    border:1px solid var(--gold);box-shadow:0 4px 18px rgba(0,0,0,.28);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.prop-coach[hidden]{display:none !important;}
.prop-hint strong{color:var(--gold);font-weight:600;}
/* Saving state: quiet until it isn't. */
/* This line now carries sentences ("there's no street address on file…"), not
   just "Saved" — and a sentence in small caps with letter-spacing is a wall. */
.prop-state{margin-left:auto;font-size:12px;color:var(--muted);line-height:1.5;max-width:520px;}
.prop-state.bad{color:#a3341f;}

/* The kind palette — one button per thing that can go on the map. */
.prop-kinds{display:flex;flex-wrap:wrap;gap:6px;}
.prop-kind{padding:6px 11px;border-radius:20px;border:1px solid var(--line);background:var(--warm-white);
  font-size:12px;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s;}
.prop-kind:hover{border-color:var(--gold);background:#fff;}
.prop-kind.on{border-color:var(--gold);background:var(--gold);color:#fff;}

/* The rail: what's on the property, and the overview numbers. */
.prop-rail{display:flex;flex-direction:column;gap:12px;}
.prop-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.prop-stat{border:1px solid var(--line);border-radius:var(--rs);padding:10px 12px;background:var(--warm-white);}
.prop-stat b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;color:var(--text);line-height:1.1;}
.prop-stat span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.prop-list{max-height:430px;overflow:auto;}
.prop-item{display:flex;gap:9px;align-items:baseline;width:100%;text-align:left;padding:9px 4px;
  border:none;border-bottom:1px solid var(--line);background:none;cursor:pointer;}
.prop-item:hover{background:var(--parchment);}
.prop-item.on{background:var(--parchment);}
.prop-item i{width:9px;height:9px;border-radius:50%;flex-shrink:0;transform:translateY(-1px);}
.prop-item .nm{font-size:13px;color:var(--text);}
.prop-item .mt{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap;}

/* The toolbar hides itself until the map is being edited. `hidden` alone
   loses to the layout rules above it. */
.prop-bar [hidden], .prop-rail [hidden], .prop-wrap [hidden]{display:none !important;}

/* Labels drawn on the imagery. White on a dark shadow reads over grass, dirt
   and a metal roof alike; the page's ink does not. Leaflet's stylesheet loads
   after this one, so the tooltip class has to be named alongside ours to win. */
.leaflet-tooltip.prop-label{font-size:11px;font-weight:500;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.7);
  background:none;border:none;box-shadow:none;padding:0;white-space:nowrap;pointer-events:none;}
.leaflet-tooltip.prop-label::before{display:none;}
.prop-pin{width:18px;height:18px;padding:2px;box-sizing:border-box;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.6);}
.prop-unplaced-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line);font-size:13px;}
.prop-unplaced-row small{color:var(--muted);}
.prop-pin svg{width:100%;height:100%;display:block;}
.prop-handle{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;pointer-events:auto;}
.prop-handle.grab{cursor:grab;} .prop-handle.grab:active{cursor:grabbing;}
.prop-handle .prop-pin{flex:none;display:block;}
.prop-handle-text{font-size:11.5px;font-weight:600;color:#fff;background:rgba(20,16,10,.72);padding:3px 8px;border-radius:12px;
    text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:0 1px 4px rgba(0,0,0,.4);line-height:1.2;}
.prop-handle:not(.pin){transform:translate(-50%,-50%);}
.prop-handle:not(.pin) .prop-handle-text{padding:5px 11px;font-size:12.5px;border:1px solid rgba(255,255,255,.55);}
.prop-rotate{width:14px;height:14px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.6);cursor:grab;}
.prop-found{width:18px;height:18px;border-radius:50%;background:rgba(224,167,60,.35);border:3px solid #e0a73c;box-shadow:0 0 0 2px #fff,0 1px 6px rgba(0,0,0,.6);}
.prop-vertex{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--gold);
  box-shadow:0 1px 3px rgba(0,0,0,.5);}

@media (max-width: 1100px) {
    .prop-wrap{grid-template-columns:1fr;}
    .prop-map{height:460px;}
    .prop-list{max-height:none;}
}

/* Which of these is your barn — shown only when the answer isn't obvious. */
.prop-hits{margin:8px 0 0;display:flex;flex-direction:column;gap:4px;max-width:560px;}
/* `hidden` loses to the display above it, as it did for the toolbar. */
.prop-hits[hidden]{display:none !important;}
.prop-hit{text-align:left;padding:7px 10px;border:1px solid var(--line);border-radius:var(--rs);
  background:var(--warm-white);font-size:12.5px;color:var(--text);cursor:pointer;line-height:1.4;}
.prop-hit:hover{border-color:var(--gold);background:#fff;}

/* The property map is out. One line above the map — the map still works, and
   it should stay the thing on the screen. */
.prop-down{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 4px;
  padding:9px 12px;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--rs);background:var(--parchment);font-size:12.5px;color:var(--text);line-height:1.5;}
.prop-down span{flex:1;min-width:260px;}

/* ── BILLING: dates, setup steps, and a phone layout that isn't a squeezed table ── */
.head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end;}
.invoice-dates{display:flex;flex-wrap:wrap;gap:4px 18px;}
.invoice-dates strong{font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-right:4px;}
.period-pair{display:flex;gap:12px;}
.period-pair > .fg{flex:1;min-width:0;}
.form-foot{display:none;margin-top:18px;}
a.pill{text-decoration:none;cursor:pointer;}
a.pill:hover{filter:brightness(.95);}
.tbl .dates div{line-height:1.5;}
.tbl .rm-label{display:none;}

/* The empty state as a checklist: what is done, what is next, where to go. */
.empty-setup{padding:16px 6px 4px;}
.empty-setup p{font-size:13px;color:var(--muted);line-height:1.6;margin:0;}
.setup-steps{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.setup-steps li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--text);}
.setup-steps li.done{color:var(--muted);}
.setup-steps li.done strong{text-decoration:line-through;font-weight:500;}
.step-mark{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:600;color:var(--gold);margin-top:1px;}
.setup-steps li.done .step-mark{background:var(--green-bg);color:var(--green-text);border-color:var(--green-text);}

@media (max-width: 720px) {
    /* Every head button on its own full-width row: three of them in one
       unwrapping flex row were the first thing to clip on a phone. */
    .view-head .head-actions{width:100%;justify-content:stretch;}
    .view-head .head-actions > *{flex:1 1 100%;}
    .view-head .head-actions .btn{width:100%;justify-content:center;}
    .view-head .head-actions form{display:contents;}
    .view-head .head-actions span{text-align:center;}

    /* The invoice list as cards. The generic phone rule above turns every
       table into one horizontal scroll box with equal fixed columns and no
       wrapping, which on seven columns means each is 50px wide and every
       name is cut off. A list of invoices reads better as a stack. */
    .tbl.stack{display:block;white-space:normal;overflow:visible;}
    .tbl.stack thead{display:none;}
    .tbl.stack tbody,.tbl.stack tr{display:block;width:auto;table-layout:auto;}
    .tbl.stack tr{padding:12px 10px;border-bottom:1px solid var(--border);}
    .tbl.stack tr:last-child{border-bottom:none;}
    .tbl.stack tr:hover td{background:transparent;}
    .tbl.stack td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:4px 0;border:none;font-size:13.5px;}
    .tbl.stack td[data-label]::before{content:attr(data-label);flex:0 0 38%;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px;}
    .tbl.stack td[data-label=""]::before{content:none;}
    .tbl.stack td.dates{white-space:normal!important;text-align:right;}
    .tbl.stack td.dates .dates-v{margin-left:auto;text-align:right;}
    /* Three narrow columns fit a phone as a real table; the scroll-box rule
       above only makes them look broken. */
    .tbl.plain{display:table!important;white-space:normal;overflow:visible;}
    .tbl.plain thead{display:table-header-group!important;}
    .tbl.plain tbody{display:table-row-group!important;width:auto;}
    .tbl.plain tr{display:table-row!important;width:auto;border:none;padding:0;margin:0;}
    .tbl.plain td{display:table-cell!important;width:auto;padding:10px 8px;border-bottom:1px solid var(--border);font-size:13.5px;}
    .tbl.plain td[style*="text-align:right"],.tbl.plain th[style*="text-align:right"]{text-align:right!important;}
    .tbl.plain tr:last-child td{border-bottom:none;}
    .tbl.plain th{padding-left:8px;padding-right:8px;}
    .tbl.stack td.amt{text-align:right;}
    .tbl.stack td.row-actions{justify-content:flex-end;padding-top:8px;}
    .tbl.stack td.row-actions .row-acts{gap:6px 18px;}
    .tbl.stack td[colspan]{display:block;}

    /* Line items on the invoice form: a description, an amount, a quantity
       and a remove — one line each, full width, instead of four inputs
       fighting for 375px. */
    .tbl.lines{display:block;white-space:normal;overflow:visible;}
    .tbl.lines thead{display:none;}
    .tbl.lines tbody,.tbl.lines tr{display:block;width:auto;table-layout:auto;}
    .tbl.lines tr{padding:10px 0 12px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;}
    .tbl.lines tr:last-child{border-bottom:none;}
    .tbl.lines tr:hover td{background:transparent;}
    .tbl.lines td{display:block;padding:0;border:none;text-align:left!important;}
    .tbl.lines td[data-label]::before{content:attr(data-label);display:block;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
    .tbl.lines td[data-label=""]::before{content:none;}
    .tbl.lines td:first-child{grid-column:1/-1;}
    .tbl.lines td:last-child{grid-column:1/-1;}
    .tbl.lines td .fi{width:100%;min-height:44px;}
    .tbl.lines .rm-label{display:inline;font-size:12px;}

    .period-pair{flex-direction:column;}
    .form-foot{display:block;}
    .invoice-dates{gap:2px 14px;}
}
.inv-preview{color:var(--text);font-size:12.5px;margin-top:2px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width: 720px){.tbl.stack .inv-preview{max-width:none;white-space:normal;text-align:right;}}
/* An invoice's status pills: one row that wraps with a gap, not a run of
   touching pills; on a phone they sit right, under one another if need be. */
.inv-pills{display:inline-flex;flex-wrap:wrap;gap:4px;max-width:220px;}
@media (max-width: 720px){.tbl.stack .inv-pills{justify-content:flex-end;max-width:62%;}}

/* Click the row or the box and the item opens (partials/open-rows). */
.tbl tr.row-link,.row-link{cursor:pointer;}
.tbl tr.row-link:focus-visible,.row-link:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
.card-link-box{cursor:pointer;transition:border-color .12s,box-shadow .12s;}
.card-link-box:hover{border-color:var(--gold);box-shadow:0 2px 10px rgba(58,46,26,.08);}
.card-link-box:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.btn.danger{border-color:var(--red-text);color:var(--red-text);}
.btn.danger:hover{background:var(--red-bg);}
.form-actions form{display:inline;}
.form-foot-bar{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}
@media (max-width: 720px){.form-actions{width:100%;}.form-actions > *{flex:1 1 100%;}.form-actions form{display:contents;}}

.invoice-actions{justify-content:flex-end;}
.invoice-actions form{display:inline;}
/* The secondary pair (PDF, Remind): an icon and one short word, so the
   primary Send button stays the thing on the bar. */
.btn.compact{padding:9px 11px;gap:5px;}
.btn.compact svg{width:14px;height:14px;}
/* A quantity has to be readable — "12" in a 40px box wasn't. */
.tbl.lines .fi.qty{min-width:5.5em;}
@media (max-width: 720px){.view-head .invoice-actions{width:100%;}.view-head .invoice-actions > *{flex:1 1 45%;}.view-head .invoice-actions form{display:contents;}}

/* ---- Task tags: the chips a care instruction is tagged with ------------
   A checkbox group drawn as pills. The box itself is visually hidden but
   still focusable, so the chip row tabs through and toggles with Space;
   the visible pill takes the focus ring. Checked chips use the same pill
   colours the round draws its tags in (.pill.red/.gold/.green/.amber/.grey),
   so no new colour and no new contrast pair is introduced here. */
.tag-chips{border:0;padding:0;margin:0;min-width:0;}
.tag-chips legend{padding:0;margin-bottom:6px;}
.tag-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.tag-chip{position:relative;display:inline-flex;cursor:pointer;}
.tag-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;}
.tag-chip span{display:inline-flex;align-items:center;padding:5px 11px;border-radius:20px;border:1px solid var(--border-strong);background:var(--warm-white);color:var(--muted);font-size:12px;line-height:1.2;transition:.15s;user-select:none;}
.tag-chip:hover span{border-color:var(--gold);color:var(--gold);}
.tag-chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px;}
.tag-chip input:checked + span{border-color:transparent;font-weight:500;}
.tag-chip.red input:checked + span{background:var(--red-bg);color:var(--red-text);}
.tag-chip.gold input:checked + span{background:rgba(138,106,42,.12);color:var(--gold);}
.tag-chip.green input:checked + span{background:var(--green-bg);color:var(--green-text);}
.tag-chip.amber input:checked + span{background:var(--amber-bg);color:var(--amber-text);}
.tag-chip.grey input:checked + span{background:var(--cream);color:var(--text);border-color:var(--border-strong);}
.task-tag{margin-left:6px;vertical-align:middle;}

/* ── Horse page: turnout + personality (API migration 075) ─────────────────
   The horse card is read in a barn aisle, often by older eyes, so muted text
   on this page is darkened — same warm hue as --muted (#736550), lightness
   only. #5a4f3f measures 7.54:1 on --warm-white (the page, the cards and the
   inputs all sit on it) and 7.05:1 on --cream, up from 5.34 / 4.99 — AAA
   for body text. Placeholders keep the old --muted (5.34:1) so an example
   still reads as an example and not as something already written. */
.horse-page{--muted:#5a4f3f;}
.horse-page ::placeholder{color:#736550;opacity:1;}
.companion-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px 14px;margin-top:8px;max-height:220px;overflow-y:auto;padding:2px;}
.companion{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;color:var(--text);cursor:pointer;}
.companion input{accent-color:var(--gold);width:16px;height:16px;flex:none;}
.companion-alone{margin-top:6px;}
.companion-list.is-disabled{opacity:.5;}
.companion-list.is-disabled .companion{cursor:not-allowed;}
.as-typed-input{white-space:pre-wrap;}
/* Horses list: the sort control, and a heading per field in Turnout order. */
.sort-control{display:inline-flex;align-items:center;gap:6px;margin-left:12px;font-size:13px;color:var(--muted);}
.sort-control a{padding:6px 10px;border-radius:var(--rs);border:1px solid var(--border-strong);color:var(--text);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;}
.sort-control a.on{background:var(--gold);border-color:var(--gold);color:#fff;}
.turnout-group{grid-column:1/-1;font-family:var(--serif);font-size:22px;color:var(--text);margin:14px 0 2px;border-bottom:1px solid var(--border);padding-bottom:4px;}
.turnout-group:first-child{margin-top:0;}

/* Read by screen readers, not drawn: a badge's number said in words. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* New/edit invoice: customer beside the line items on a wide screen, above
   them on a phone; dates under the customer. */
.invoice-grid{grid-template-areas:"lines customer" "lines dates";}
.invoice-grid .invoice-customer{grid-area:customer;}
.invoice-grid .invoice-lines{grid-area:lines;}
.invoice-grid .invoice-dates-card{grid-area:dates;}
@media(max-width:1100px){.invoice-grid{grid-template-areas:"customer" "lines" "dates";}}
/* "Not billed yet": the chosen customer's unbilled work, one tap per line. */
.unbilled-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;}
.unbilled-suggest-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px;}
.unbilled-chip{padding:5px 11px;border-radius:20px;border:1px dashed var(--border-strong);background:var(--warm-white);font-size:12.5px;color:var(--text);cursor:pointer;font-variant-numeric:tabular-nums;transition:.15s;}
.unbilled-chip:hover,.unbilled-chip:focus-visible{border-color:var(--gold);color:var(--gold);border-style:solid;}

/* ── BILLING: PHONE MENU ── */
/* Six tabs on a 375px phone were a cramped sideways strip. At 640px and
   under the strip hides and a full-width "Billing menu" opens a list of the
   six sections in large rows; the Overview also shows that list under its
   summary, like the iPhone app's Billing home. Wider, the tabs stay. */
.billing-menu,.billing-home-list{display:none;}
.billing-menu-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r);background:var(--warm-white);overflow:hidden;}
.billing-menu-list a{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 16px;color:var(--text);text-decoration:none;border-top:1px solid var(--border);}
.billing-menu-list a:first-child{border-top:none;}
.billing-menu-list a.on{font-weight:600;background:var(--cream);}
.billing-menu-list a > span:first-child{flex:1;min-width:0;}
.billing-menu-list .sb-badge{margin-left:0;}
.billing-menu-chev{color:var(--muted);}
@media (max-width:640px){
  .billing-tabs{display:none;}
  .billing-menu{display:block;margin:-4px 0 18px;}
  .billing-menu > summary{list-style:none;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--warm-white);cursor:pointer;}
  .billing-menu > summary::-webkit-details-marker{display:none;}
  .billing-menu-label{color:var(--muted);white-space:nowrap;}
  .billing-menu-current{flex:1;min-width:0;font-weight:600;color:var(--text);text-align:right;overflow-wrap:anywhere;}
  .billing-menu-caret{color:var(--gold);transition:transform .15s;}
  .billing-menu[open] .billing-menu-caret{transform:rotate(180deg);}
  .billing-menu[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .billing-menu .billing-menu-list{border-top:none;border-top-left-radius:0;border-top-right-radius:0;}
  .billing-home-list{display:block;margin-top:18px;}

  /* Phone type on billing pages: body 16px, nothing under 15px. Headings
     and the big figures keep their own sizes. */
  .view:has(.billing-menu){font-size:16px;}
  .view:has(.billing-menu) :is(p,li,td,a,span,div,label,input,select,textarea,button,summary,dd,dt,strong,em,small):not(.metric-val):not(.metric-val *):not(.page-title):not(.card-title):not(.sb-badge){font-size:16px!important;line-height:1.5;}
  .view:has(.billing-menu) :is(th,.eyebrow,.metric-label,.metric-sub,.pill,.page-sub,small,.sb-badge,.card-title){font-size:15px!important;}
  .view:has(.billing-menu) .metric-val{font-size:28px!important;}

  /* No sideways page scroll at 375px: grids fold, wide tables scroll inside
     their own box. */
  .view:has(.billing-menu) .metrics{grid-template-columns:1fr 1fr!important;}
  .view:has(.billing-menu) .tbl:not(.stack){display:block;max-width:100%;overflow-x:auto;}
  .view:has(.billing-menu) :is(.view-head,.head-actions,.card,.notice){min-width:0;max-width:100%;}
  .view:has(.billing-menu) .head-actions{flex-wrap:wrap;}
  .view:has(.billing-menu) :is(input,select,textarea){max-width:100%;}
}

/* ── Readable working screens (billing, boarder portal) ──
   Body ≥16px, labels and pills ≥14px, key amounts bold and larger. */
.tip{display:inline-flex;align-items:center;justify-content:center;margin-left:5px;font-size:15px;line-height:1;color:var(--muted);cursor:help;vertical-align:middle;}
.tip:focus{outline:2px solid var(--gold);outline-offset:2px;border-radius:50%;}
.readable{font-size:16px;}
.readable p,.readable li,.readable .tbl td,.readable input,.readable select,.readable textarea{font-size:16px;}
.readable .fl,.readable label,.readable .card-title,.readable .tbl th{font-size:14px;}
.readable .pill,.readable .btn{font-size:14px;}
.readable .amt,.readable .bp-big{font-weight:600;}
.readable .amt{font-size:20px;}
.price-edit > summary::-webkit-details-marker{display:none;}

/* ── Readable: the rest of the working screens ──
   Hints, meta lines and small labels the first pass didn't reach, plus the
   sidebar and top bar that frame every page. Text ≥14px, body 16px. */
.readable .page-sub{font-size:16px;}
.readable .field-hint,.readable .task-meta,.readable .card-help,.readable .prop-hint,.readable .sched-meta,.readable .act-time,.readable .metric-sub,.readable .metric-label,.readable .eyebrow,.readable .setup-eyebrow{font-size:14px;}
.readable .card-p,.readable .kv,.readable .notice p,.readable .act-text,.readable .setup-p,.readable .empty-state p,.readable .no-horse{font-size:16px;}
.readable .notice-title{font-size:16px;}
.readable .card-link,.readable .danger-link,.readable .chip-toggle,.readable .filter,.readable .step-chip,.readable .section-tabs a,.readable .crumbs{font-size:14px;}
.readable .filter .n,.readable .step-chip .tick{font-size:13px;}
.readable .metric-val{font-weight:700;}
.readable .tip{font-size:16px;}
.sb-item{font-size:15px;}
.sb-group{font-size:11.5px;}
.sb-barn{font-size:13px;}
.sb-badge{font-size:12px;}
.sb-acc-name{font-size:15px;}
.sb-acc-role{font-size:12.5px;}
.tb-switch,.tb-setup{font-size:14px;}
.tb-btn{font-size:13px;}
.tb-qa-opt{font-size:15px;}