:root[data-theme="dark"]{
  --bg:#0E1D13; --panel:#15281B; --card:#1C3323; --raised:#24402D;
  --line:rgba(243,238,223,.16); --hair:rgba(243,238,223,.08); --hairline:rgba(243,238,223,.08);
  --ink:#F3EEDF; --soft:#CDC6AE; --muted:#9DAE99; --faint:#8F9D90;
  --gold:#C9A961; --goldink:#E4D19A; --gold-hi:#E4D19A; --gold-deep:#9C7A34; --ongold:#14251B;
  --ok:#8FC17E; --warn:#E2B45A; --bad:#C96257; --ivok:#46803B; --ivwarn:#9A660F; --ivneutral:#83704A; --cardshadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -18px rgba(0,0,0,.6);
  --shadow-raise:0 2px 4px rgba(0,0,0,.35),0 16px 40px -20px rgba(0,0,0,.7);
  --thread-edge-shadow:inset 0 8px 8px -8px rgba(0,0,0,.45),inset 0 -8px 8px -8px rgba(0,0,0,.45);
  --goldline:rgba(201,169,97,.55);
  --btnfill:linear-gradient(180deg,#E4D19A,#C9A961 65%); --onbtn:#14251B;
  --btnline:rgba(20,37,27,.22);
  --headerbg:rgba(14,29,19,.92);
  --met-hi:#EADFB8; --met-mid:#C9A961; --met-lo:#AD8A42;
  --acc:#D98F72;
  --badgeink:#14251B;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --ease2:cubic-bezier(.22,.9,.3,1); --dur:.22s;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#EFE7D2; --panel:#EFE7D2; --card:#FBF8EE; --raised:#FFFDF6;
  --line:rgba(31,61,46,.28); --hair:rgba(31,61,46,.10); --hairline:rgba(31,61,46,.20);
  --ink:#1F3D2E; --soft:#3F5546; --muted:#5A6C5E; --faint:#78826F;
  --gold:#C9A961; --goldink:#85662A; --gold-hi:#B99441; --gold-deep:#5E4718; --ongold:#14251B;
  --ok:#3A7230; --warn:#8F5E0D; --bad:#A83A28; --ivok:#3A7230; --ivwarn:#8F5E0D; --ivneutral:#7A6748; --cardshadow:0 1px 2px rgba(31,61,46,.08),0 10px 28px -16px rgba(31,61,46,.32);
  --shadow-raise:0 3px 10px rgba(31,61,46,.16),0 16px 38px -18px rgba(31,61,46,.26);
  --thread-edge-shadow:inset 0 8px 8px -8px rgba(31,61,46,.28),inset 0 -8px 8px -8px rgba(31,61,46,.28);
  --goldline:rgba(133,102,42,.55);
  --btnfill:linear-gradient(180deg,#2C5540,#1F3D2E 65%); --onbtn:#F5EFE0;
  --btnline:rgba(245,239,224,.28);
  --headerbg:rgba(245,239,224,.92);
  --met-hi:#A17F34; --met-mid:#85662A; --met-lo:#5E4718;
  --acc:#B5573A;
  --badgeink:#FFFDF6;
  --r-sm:6px; --r:10px; --r-lg:14px; --ease2:cubic-bezier(.22,.9,.3,1); --dur:.22s;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.55;transition:background .35s ease,color .35s ease;-webkit-tap-highlight-color:transparent}
button,a,[role="button"],input,select,textarea{touch-action:manipulation}
button{font-family:inherit;cursor:pointer}
.serif{font-family:'Cormorant Garamond',serif}
.k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--goldink)}
.mut{color:var(--muted)} .sm{font-size:13px}
.icon{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Gap A (imagery audit, 2026-07-27): one crop/grade/frame for every horse
   photo render site, layered on top of each site's own sizing class - the
   crop/aspect stays per-context (unchanged), this only unifies the grade
   filter and a gold-hairline frame so mismatched source photos read as one
   catalogue. Applied directly to whichever element renders the photo (an
   <img>, or the background-image box itself when there is no separate
   <img>) - never to a wrapper that also holds unrelated UI chrome (a match
   badge, a caption), so the filter never bleeds onto anything but the photo. */
.hphoto{
  filter:saturate(.82) contrast(1.04) brightness(.99);
  outline:1px solid var(--goldline);
  outline-offset:-1px;
  box-shadow:inset 0 0 0 1px rgba(201,169,97,.12);
}
/* branded placeholder (Part 2): stands in for a horse with no real photo yet -
   replaces craft.webp/oldway.webp (the landing page's own editorial photos,
   borrowed here before this fix) so nothing in the app claims a photo it
   doesn't have. Sizing comes from whatever already sizes this element
   (the site's own class, or an inline style passed by hphotoImg/hphotoBg) -
   this rule only supplies the look. */
.hplaceholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--card),var(--raised) 70%)}
.hplaceholder .hpk{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--goldink);line-height:1}
/* the 3 fixed <img id="cf-img"/"ib-img"/"sh-img"> modal previews use an inline
   SVG data URI instead (see setPhotoImg in app.js) since they can't be swapped
   for a <div> - fixed dark-forest colors like .farmpin/.ck elsewhere, not
   theme tokens, since a data URI can't react to the theme toggle. */
.hplaceholder-img{object-fit:contain !important;background:#1F3D2E}

/* top bar */
header{position:sticky;top:0;z-index:200;background:var(--headerbg);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline);box-shadow:none}
.bar{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:15px 24px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
a.brand{text-decoration:none}
.brand img{height:48px;width:auto;display:block}
.brand b{letter-spacing:.34em;font-size:16px;font-weight:600}
nav{display:flex;gap:4px;flex:1;flex-wrap:nowrap}
nav button{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--muted);font-size:12.5px;letter-spacing:.04em;font-weight:500;padding:9px 14px;border-radius:999px;white-space:nowrap;min-height:40px;transition:color var(--dur) var(--ease2),background var(--dur) var(--ease2)}
nav button:hover{color:var(--ink);background:rgba(201,169,97,.07)}
nav button.on{color:var(--gold-hi);background:rgba(201,169,97,.12)}
.nbadge{min-width:18px;height:18px;border-radius:999px;background:var(--gold);color:#14251B;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;flex:0 0 auto}
:root[data-theme="light"] nav button.on{color:var(--ink);background:rgba(31,61,46,.08)}

.wrap{max-width:1180px;margin:0 auto;padding:20px 24px 60px}
.demofoot{margin-top:56px;padding-top:14px;border-top:1px solid var(--hair);font-size:10.5px;color:var(--muted);text-align:center;letter-spacing:.08em;text-transform:uppercase}
section.screen{display:none} section.screen.on{display:block}

/* staggered list reveal (v51): children of .rlist fade/rise in on screen entry.
   Bound to .rlist.replay (not plain .rlist) because `animation` isn't inherited: toggling
   it on the .rlist container itself cannot restart a child's own animation, so JS toggles
   the .replay class (remove -> reflow -> add) to make the child's animation genuinely restart. */
.screen.on .rlist.replay>*{opacity:0;transform:translateY(12px);animation:rup .45s var(--ease2) forwards}
.screen.on .rlist.replay>*:nth-child(1){animation-delay:.03s}
.screen.on .rlist.replay>*:nth-child(2){animation-delay:.09s}
.screen.on .rlist.replay>*:nth-child(3){animation-delay:.15s}
.screen.on .rlist.replay>*:nth-child(4){animation-delay:.21s}
.screen.on .rlist.replay>*:nth-child(5){animation-delay:.27s}
.screen.on .rlist.replay>*:nth-child(n+6){animation-delay:.33s}
@keyframes rup{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen.on .rlist.replay>*{animation:none;opacity:1;transform:none}}
h1.pagetitle{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;margin:2px 0 4px;text-wrap:balance}
#threadTitle.clickable{cursor:pointer;width:max-content}
#threadTitle.clickable:hover{color:var(--goldink)}
#threadTitle .tgo{color:var(--faint);font-size:16px;margin-left:4px}
.thread-title-av{display:none}
.pill.thread-title-badge{display:none}
/* desktop-only header row unification (see .convo-split.duo below): inert
   here so mobile, where the horse name lives inside the aside/bottom sheet
   as .dr-namehead instead, is completely unaffected */
.thread-horsename{display:none}
.sub{font-size:12.5px;color:var(--muted);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
/* the translation caption duplicated the horse-tab strip that already sits
   right below it (and duplicated the title on desktop, already hidden
   there) - dropped everywhere, freeing its slot for the strip on mobile */
#threadSub{display:none}
#s-agenda .pagetitle,#s-agenda .sub{text-align:center}
#s-agenda .sub{border-bottom:none;padding-bottom:0}
:root[data-theme="light"] .sub{color:var(--soft)}

/* generic card */
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:15px 17px;box-shadow:var(--cardshadow)}
.pill{display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;border-radius:999px;padding:3px 8px}
.pill.gold{background:rgba(201,169,97,.12);border:1px solid var(--goldline);color:var(--goldink)}
.pill.line{border:1px solid var(--line);color:var(--soft)}
/* one consistent treatment regardless of role - farm and broker both source
   this text from SELLERS[key].badge, just different strings, so there was
   never a reason for a per-role color variant. Same family as .pill.gold
   (the verification pills elsewhere) but a notch quieter - border+tinted
   background, not just text color, so it reads clearly against both themes'
   panel color instead of just barely ("οριακά δεν φαίνεται" feedback) while
   still sitting behind the seller's name in visual weight. Overrides
   .pill.line's neutral border/color from the badge markup's own classlist. */
.pill.thread-title-badge{border:1px solid var(--goldline);color:var(--goldink);background:rgba(201,169,97,.08)}
.pill.ok{color:var(--ok);border:1px solid var(--ok);background:rgba(107,170,91,.14)}
.pill.warn{color:var(--warn);border:1px solid var(--warn);background:rgba(210,160,60,.16)}
.pill.bad{color:var(--bad);border:1px solid var(--bad);background:rgba(184,66,42,.16)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--btnfill);color:var(--onbtn);border:1px solid var(--btnfill);border-radius:999px;padding:10px 18px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;transition:background .3s ease,color .3s ease,border-color .3s ease;outline:1px solid var(--btnline);outline-offset:-3px}
.btn:hover{background:transparent;color:var(--goldink);border-color:var(--gold);outline-color:transparent}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--goldline);color:var(--goldink);outline:none}
.btn.ghost:hover{background:rgba(201,169,97,.1);border-color:var(--gold)}
.btn.quiet{background:none;color:var(--muted);box-shadow:none;letter-spacing:.06em}
.btn.quiet:hover{color:var(--ink)}
.btn[disabled]{opacity:.4;cursor:default;pointer-events:none}

/* widget buttons: small card-shaped actions, shared by the demand hero and proposal cards */
.wact{display:flex;gap:8px;align-items:stretch}
.wbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1 1 0;min-width:0;min-height:56px;padding:9px 8px 8px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);color:var(--soft);cursor:pointer;transition:border-color var(--dur) var(--ease2),background var(--dur) var(--ease2)}
.wbtn .icon{width:16px;height:16px;color:var(--soft)}
.wbtn .wl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted);line-height:1.3;text-align:center}
@media (hover:hover) and (pointer:fine){.wbtn:hover{border-color:var(--line);background:var(--raised)}}
.wbtn:active{transform:translateY(1px)}
.wbtn.pri{background:var(--btnfill);border-color:transparent}
.wbtn.pri .icon,.wbtn.pri .wl{color:var(--onbtn)}
.wbtn.on{border-color:var(--ok)}
.wbtn.on .icon{color:var(--ok)}
.wbtn[disabled]{cursor:default;pointer-events:none;opacity:.75}
@media (prefers-reduced-motion:reduce){.wbtn{transition:none}}

.mact{display:flex;align-items:center}
.mact .wbtn{flex:0 1 auto;min-width:82px;padding:9px 12px 8px}
@media (max-width:700px){.mact{width:100%}.mact .wact{width:100%}.mact .wbtn{flex:1 1 0;min-width:0}}

/* FLUX layout */
.flux{display:grid;grid-template-columns:210px minmax(0,1fr) 300px;gap:20px;align-items:start}
@media (max-width:1180px){.flux{grid-template-columns:210px minmax(0,1fr)}.flowaside{grid-column:1/-1}}
@media (max-width:820px){.flux{grid-template-columns:minmax(0,1fr)}}
.flowaside{display:flex;flex-direction:column;gap:16px;min-width:0}
/* section tabs and the list filter share one line; stacked they made three rows of
   pills before you reached the first inquiry */
.ctlrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 16px}
.funnel{max-width:620px}
.fnr{display:grid;grid-template-columns:150px minmax(0,1fr) 34px;align-items:center;gap:14px;padding:7px 0}
.fnl{font-size:12.5px;color:var(--soft)}
.fnb{height:9px;border-radius:999px;background:var(--card);border:1px solid var(--hairline);overflow:hidden}
.fnb i{display:block;height:100%;background:var(--soft);border-radius:999px}
.fnv{font-family:'Inter',sans-serif;font-weight:600;font-size:17px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.fnnote{font-size:12px;color:var(--faint);margin-top:12px;line-height:1.6;max-width:52ch}
.lh{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--soft);line-height:1.45;padding:4px 0}
.lh .lhk{flex:none;width:13px;text-align:center}
.lh .ok2{color:var(--ok)}.lh .warn2{color:var(--warn)}.lh .miss{color:var(--bad)}
/* listing-health rows that lead somewhere: an alert you can tap is a task, one you can't is decor */
button.lh.lha{display:block;width:100%;box-sizing:border-box;background:none;border:none;text-align:left;font-family:inherit;cursor:pointer;padding:6px 8px;margin:0 -8px;width:calc(100% + 16px);border-radius:var(--r-sm);transition:background var(--dur) var(--ease2)}
button.lh.lha:hover{background:rgba(201,169,97,.10)}
button.lh.lha:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.lh.lha .row1{display:flex;align-items:center;gap:9px}
.lh.lha .chev{margin-left:auto;color:var(--goldink);flex:none;transition:transform var(--dur) var(--ease2)}
@media (hover:hover) and (pointer:fine){button.lh.lha:hover .chev{transform:translateX(2px)}}
.lh.lha .fixline{display:block;font-size:10px;color:var(--goldink);font-weight:600;margin:2px 0 0 22px;letter-spacing:.03em}
.hcard.fixjump{animation:newpulse 2.4s ease 3}
@media (max-width:560px){.fnr{grid-template-columns:1fr 34px;gap:6px 12px}.fnb{grid-column:1/-1}}
.ctlrow .mapfilter{margin-bottom:0}
/* On a phone the filter rail ate the screen before the feed even started, so it
   collapses behind a button that reports how many are on. */
.filtbtn{display:none;align-items:center;gap:8px;border:1px solid var(--hairline);background:var(--card);
  border-radius:999px;padding:0 15px;min-height:42px;color:var(--soft);font:inherit;font-size:13px;margin-bottom:10px}
.filtbtn .icon{width:15px;height:15px;color:var(--faint)}
.filtbtn .fcount{margin-left:auto;min-width:20px;height:20px;border-radius:999px;background:var(--gold);color:var(--ongold);
  font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 6px}
.filtbtn .fcount[data-n="0"]{display:none}
.filtbtn[aria-expanded="true"]{border-color:var(--gold);color:var(--ink)}
.filtscrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:310}
.fsheet-h{display:none}
.fsheet-h b{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:var(--ink)}
.fsheet-x{margin-left:auto;background:none;border:1px solid var(--goldline);border-radius:999px;
  padding:8px 18px;min-height:40px;color:var(--goldink);font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.filters{background:var(--panel);border:1px solid var(--hair);border-radius:8px;padding:14px}
.filters .grp{margin-bottom:16px}
.filters label{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--soft);padding:3px 0;cursor:pointer}
.filters input{accent-color:#C9A961}
.radar{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:8px;font-size:12px;color:var(--soft);box-shadow:var(--cardshadow)}
.radar .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:7px}
.feed{display:flex;flex-direction:column;gap:14px;max-width:760px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pu 1.6s ease infinite}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.25}}

/* FLOW v64 - structured demand cards (spec 5) */
.fx2{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);padding:18px;transition:border-color var(--dur) var(--ease2),transform var(--dur) var(--ease2)}
.fx2.radar{border-color:var(--gold);background:linear-gradient(135deg,var(--card),rgba(201,169,97,.07));cursor:pointer}
.fx2-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fx2-radar-badge{display:flex;align-items:center;gap:5px;background:var(--gold);color:var(--ongold);font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:20px}
.fx2-ref{font-size:11px;letter-spacing:.1em;color:var(--faint)}
.fx2-h{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:var(--ink)}
.fx2-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fx2-slot{border:1px solid var(--hairline);border-radius:var(--r-sm);background:var(--raised);padding:9px 11px;min-width:0}
.fx2-slot i{display:block;font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.fx2-slot b{font-size:13px;color:var(--ink);font-weight:600}
.fx2-slot.urgent b{color:var(--warn)}
.fx2-cred{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);background:var(--raised);border:1px solid var(--hairline);border-radius:8px;padding:8px 12px}
.fx2-cred svg{width:14px;height:14px;flex:none;color:var(--gold)}
.fx2-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fx2-prog{flex:1;min-width:0}
.fx2-prog .pl{font-size:10.5px;color:var(--faint);margin-bottom:4px}
.fx2-prog .pb{height:4px;border-radius:2px;background:var(--hairline);overflow:hidden}
.fx2-prog .pb i{display:block;height:100%;background:var(--ok)}
.fx2detail{display:none;border-top:1px solid var(--hairline);margin-top:2px;padding-top:14px;cursor:default}
.fx2.open .fx2detail{display:block}
.fx2-timeline{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fx2-tl-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--soft)}
.fx2-tl-row b{color:var(--ink)}
.fx2-fit{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.fx2-fit .fitcard{flex:0 0 auto;width:150px;border:1px solid var(--hairline);border-radius:var(--r-sm);overflow:hidden;background:var(--raised);cursor:pointer}
.fx2-fit .fitcard img{width:100%;height:80px;object-fit:cover;display:block}
.fx2-fit .fitcard .fb{padding:8px 10px}
.fx2-fit .fitcard b{display:block;font-size:12px;color:var(--ink)}
.fx2-fit .fitcard span{display:block;font-size:10.5px;color:var(--faint);margin-top:2px}
@media (max-width:700px){.fx2{padding:16px}.fx2-slots{grid-template-columns:repeat(2,1fr)}}

/* modal */
.mback{position:fixed;inset:0;background:rgba(6,14,9,.66);display:none;align-items:center;justify-content:center;z-index:250;padding:16px}
.mback.on{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:10px;max-width:520px;width:100%;padding:20px 22px;max-height:88vh;overflow:auto;overscroll-behavior:contain}
.mh{font-family:'Cormorant Garamond',serif;font-size:22px;margin-bottom:2px}
.hpick{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap}
.hopt{flex:1;min-width:130px;border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer;background:var(--card)}
.hopt.sel{border-color:var(--gold);background:var(--raised)}
.hopt b{display:block;font-size:13px;font-weight:600}
.fit{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
textarea{width:100%;background:var(--card);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:10px;font-family:inherit;font-size:13px;min-height:64px;resize:vertical}
.cnt{font-size:11px;color:var(--muted);text-align:right;margin-top:4px}
.mrow{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
/* confirm-beat: shared restatement step for the 3 expensive/irreversible actions
   (send proposal, first message to a seller, share full profile) - one card,
   object + consequence lines + primary/ghost-back, never a new modal */
.cfmobj{display:flex;align-items:center;gap:13px;margin:14px 0 12px}
.cfmobj img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--goldline);flex:0 0 auto}
.cf-nm{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--ink);line-height:1.15}
.cf-to{font-size:12.5px;color:var(--soft)}
.cfmlines{border-top:1px solid var(--hair);padding-top:11px;display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.cfmline{display:flex;gap:9px;font-size:13px;color:var(--soft);align-items:baseline}
.cfmline i{font-style:normal;color:var(--goldink);flex:0 0 auto;width:14px;text-align:center}
.cfmline b{color:var(--ink);font-weight:600}
.cfmline.warnline{color:var(--warn)}
.cfmline.warnline b{color:var(--warn)}
.cfmquote{font-size:12.5px;color:var(--soft);font-style:italic;border-left:2px solid var(--hairline);padding:2px 0 2px 12px;margin-bottom:13px}
/* cfmcard: the confirm-beat used inline (not inside a .mback modal) - the
   buyer's first-message intro. Same warm layered depth as the propose
   modal's #mconfirm step, just carrying its own border/shadow since it has
   no .modal ancestor to inherit them from. */
.cfmcard{background:linear-gradient(150deg,var(--card),rgba(201,169,97,.07));border:1px solid var(--goldline);
  box-shadow:0 0 0 1px rgba(201,169,97,.25),var(--cardshadow);border-radius:10px;padding:16px 18px 14px;margin-bottom:12px}
.cfmcard .mh{font-size:18px}
.cfmcard .cfmobj{margin-top:12px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--btnfill);color:var(--onbtn);padding:10px 20px;border-radius:2px;font-size:12.5px;font-weight:600;transition:transform .4s cubic-bezier(.16,1,.3,1);z-index:260;outline:1px solid var(--btnline);outline-offset:-3px}
.toast.on{transform:translateX(-50%) translateY(0)}

/* INBOX */
.mandate{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--card),var(--raised));border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;box-shadow:var(--shadow-raise)}
.mandate::before{content:"";position:absolute;inset:0;background:url('img/bg-course.webp') center/cover no-repeat;opacity:.14;pointer-events:none}
.mandate>div{position:relative}
:root[data-theme="light"] .mandate{background:linear-gradient(120deg,#1F3D2E,#24402D);border-color:rgba(245,239,224,.16);box-shadow:0 3px 10px rgba(31,61,46,.22),0 16px 38px -18px rgba(31,61,46,.3)}
:root[data-theme="light"] .mandate .k{color:#C9A961}
:root[data-theme="light"] .mandate .mline{color:#F5EFE0}
:root[data-theme="light"] .mandate .sm.mut{color:rgba(245,239,224,.72)}
:root[data-theme="light"] .mandate .pill.gold{color:#E4D19A;border-color:rgba(228,209,154,.45);background:rgba(201,169,97,.16)}
:root[data-theme="light"] .mandate .wbtn{background:rgba(245,239,224,.06);border-color:rgba(245,239,224,.22)}
:root[data-theme="light"] .mandate .wbtn .icon,:root[data-theme="light"] .mandate .wbtn .wl{color:rgba(245,239,224,.85)}
@media (hover:hover) and (pointer:fine){:root[data-theme="light"] .mandate .wbtn:hover{border-color:#C9A961;background:rgba(201,169,97,.14)}}
@media (max-width:700px){.mandate{padding:16px 18px}}
.mandate .wbtn{flex-direction:row;gap:7px;min-height:0;padding:8px 13px;border-radius:999px;background:transparent;border-color:var(--line)}
.props{display:flex;flex-direction:column;gap:10px}
.pbody{padding:13px 15px;display:flex;flex-direction:column;gap:8px;flex:1}
.pname{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink)}
.decl{position:relative}
.declmenu{position:absolute;bottom:110%;left:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px;display:none;min-width:170px;z-index:5}
.declmenu.on{display:block}
.declmenu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--soft);font-size:12px;padding:7px 9px;border-radius:5px}
.declmenu button:hover{background:var(--raised);color:var(--ink)}

/* INBOX v46 */
.pgroup2{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px;margin-bottom:18px}
.pg-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--hairline);margin-bottom:12px;flex-wrap:wrap}
.pg-head .gw{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pg-head .gt{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--ink)}
.pg-head .gsp{flex:1}
.pg-head .gc{font-size:12px;color:var(--faint)}
/* ranking without shouting: same card for every proposal, the score and the reason
   carry the hierarchy, and the leader gets a single gold rail */
/* the score is a fact about this horse against your demand, so it rides on the horse:
   a dial notched into the corner of the photo, readable down the column without
   reading a word of any card */
.phcol{position:relative;flex:0 0 auto;align-self:stretch}
.prow .pph .newdot{left:auto;right:7px}
.mbadge{position:absolute;top:8px;right:8px;background:var(--acc);color:var(--badgeink);font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:-.01em;padding:5px 8px;border-radius:6px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.25)}
/* match strength changes the badge's tone, not just its number - great/fair are visibly
   different colors from the default "good" tier, so a 93% and a 52% don't read the same */
.mbadge.great{background:var(--ok)}
.mbadge.fair{background:var(--muted)}
.mbadge i{font-style:normal;font-size:10px;font-weight:600;margin-left:1px;opacity:.85}
.mbest{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ongold);
  background:var(--gold);border-radius:999px;padding:3px 9px}
/* one rank signal per proposal card: the score reads in the text line, not stamped on the photo -
   gold at a strong match, quiet below, so "first" is said once by position + this number, not thrice */
.score{display:inline-flex;align-items:baseline;gap:3px;font-family:'Inter',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--goldink);line-height:1}
.score i{font-style:normal;font-size:10.5px;font-weight:600;opacity:.8}
.score .sl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-left:5px}
.score.dim{color:var(--muted)}
.mwhy{font-size:12.5px;color:var(--soft);line-height:1.55;margin:7px 0 2px;max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums;font-size:16px;color:var(--gold-hi);font-weight:600;white-space:nowrap}
/* .pfb .price sits on the always-dark photo band gradient (fine as-is in both themes);
   .prow .price sits directly on the card/panel surface, where gold-hi is too light in light theme */
:root[data-theme="light"] .prow .price{color:var(--goldink)}
.ministage{display:flex;align-items:center;gap:4px;margin-top:6px}
.ministage i{width:7px;height:7px;border-radius:50%;background:var(--hairline);border:1px solid var(--line)}
.ministage i.done{background:var(--ok);border-color:var(--ok)}
.ministage i.now{border-color:var(--ok);box-shadow:none}
.ministage span{font-size:11px;color:var(--faint);margin-left:5px;letter-spacing:.04em}
.prow{display:flex;gap:18px;flex-wrap:wrap;padding:14px;border-radius:var(--r);background:var(--card);border:1px solid var(--hairline);transition:background var(--dur) var(--ease2),border-color var(--dur) var(--ease2)}
.prow:hover{background:var(--raised)}
.pgroup2 .prow+.prow{margin-top:10px}
.prow .pph{position:relative;width:120px;height:132px;border-radius:var(--r-sm);overflow:hidden;flex:0 0 auto;border:1px solid var(--hairline);cursor:pointer}
.prow .pph img{width:100%;height:100%;object-fit:cover}
.prow .pph .newdot{position:absolute;top:7px;left:7px;width:9px;height:9px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 8px rgba(228,209,154,.9)}
.prow .pm{flex:1;min-width:0}
.prow .pn{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--ink)}
.prow .pinfo{cursor:pointer}
@media (hover:hover) and (pointer:fine){.prow .pinfo:hover .pn{color:var(--goldink)}}
.prow .ps{font-size:13px;color:var(--soft);margin-top:1px}
.prow .pby{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px;cursor:pointer}
.prow .pby .icon{width:13px;height:13px;color:var(--gold)}
.pact2{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.prow .pact2{flex-direction:column;gap:8px;justify-content:center;flex:0 0 auto}
@media (max-width:700px){.prow{gap:12px}.prow .pact2{flex-direction:row;width:100%}}
.prow .pact2.wact{flex-direction:row;align-items:stretch;gap:8px;flex:1 1 100%;width:100%;margin-top:0}
.prow .pact2.wact .decl{display:flex;flex:1 1 0;min-width:0}
.prow .pact2.wact .decl .wbtn{width:100%}
.pgroupbroker{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);box-shadow:var(--cardshadow);overflow:hidden;min-width:0}
.pgbhead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hairline);flex-wrap:nowrap}
.pgbhead .av2{width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline);background:var(--panel);background-size:cover;background-position:center;color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:16px;flex:0 0 auto;cursor:pointer}
.pgbinfo{min-width:0;flex:1}
.pgbinfo .pgbname{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer}
.pgbinfo .pgbname b{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pgbinfo .pgbname .pill{flex:0 0 auto}
.pgbwith{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgbwith i{flex:0 0 auto}
.pgbwith i{font-style:normal;color:var(--ok)}
.pgroupbroker .prow{border:none;border-radius:0;background:none;border-top:1px solid var(--hairline)}
.pgroupbroker .prow:first-of-type{border-top:none}
.pgroupbroker .prow .pby{display:none}
.revs{display:flex;flex-direction:column;gap:14px;margin-top:4px;max-width:680px}
.revrow p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--soft);line-height:1.5;margin:0}
.revrow span{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.pempty{position:relative;overflow:hidden;text-align:center;padding:34px 18px;color:var(--faint);font-size:13px;border-radius:var(--r)}
.pempty::before{content:"";position:absolute;inset:0;background:url('img/bg-knight.webp') center/45% auto no-repeat;opacity:.07;pointer-events:none}

/* CHAT */
.chatwrap{max-width:640px}
/* base default: the message history scrolls in its own bounded place
   instead of stretching the whole page - the send box stays reachable
   without hunting for it, even on a long thread. Re-affirmed on mobile
   (see the max-width:980px override below, which also adds the edge-shadow
   affordance) and desktop keeps its own separate override too
   (.convo-split.duo .deal .thread further down). */
.thread{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;max-height:60vh;overflow-y:auto}
/* bubbles live inside this wrapper (rather than as direct children of
   .thread) so the desktop split view can bottom-anchor them via
   margin-top:auto without touching .thread's own scroll/overflow rules -
   see the .convo-split.duo .thread-inner rule below for why */
.thread-inner{display:flex;flex-direction:column;gap:10px;width:100%}
.bub{max-width:82%;border-radius:11px;padding:10px 13px;font-size:13.5px}
.bub .lang{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:4px;color:var(--goldink)}
.bub .orig{display:block;font-size:11.5px;color:var(--muted);font-style:italic;margin-top:5px;border-top:1px dashed var(--hair);padding-top:5px}
.bub.in{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:2px}
.bub.out{align-self:flex-end;background:linear-gradient(135deg,rgba(201,169,97,.2),var(--raised) 55%);border:1.5px solid var(--gold);border-bottom-right-radius:2px}
.miles{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.sendrow{display:flex;gap:8px}
.sendrow input{flex:1;background:var(--card);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:10px 12px;font-family:inherit;font-size:13px}
/* mobile only: iOS Safari auto-zooms the viewport when a focused input's
   font-size is under 16px, and the zoom often can't be undone by the user -
   that's the "screen zooms in when I go to type" complaint. Bumping to 16px
   here (rather than globally) keeps desktop's tighter visual density
   untouched. Also a bigger, more comfortable tap target on mobile. */
@media (max-width:980px){
  .sendrow input{font-size:16px;padding:14px;min-height:48px}
}

/* DEAL ROOM v47 */
.deal{display:grid;grid-template-columns:minmax(0,1fr) 280px;background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:980px){.deal{grid-template-columns:1fr}}
/* lives inside the horse-info panel, above its stats - the conversation
   column stays just the title and the messages, nothing else */
.tctx{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px 6px}
.tchip{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--hairline);border-radius:999px;padding:7px 14px;color:var(--soft);font-size:12px;cursor:pointer;min-height:40px;transition:border-color var(--dur) var(--ease2),color var(--dur) var(--ease2)}
.tchip:hover{border-color:var(--goldline);color:var(--ink)}
.tchip .tgo{color:var(--faint);font-size:14px}
.tchip .av{width:24px;height:24px;border-radius:50%;border:1px solid var(--goldline);background:radial-gradient(circle at 35% 30%,#2C4A38,#1C3323);color:var(--gold-hi);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:11px;flex:0 0 auto}
.dr-ctx{border-left:1px solid var(--line);background:var(--card)}
/* the seller sheet only ever exists as a mobile bottom sheet (see the
   max-width:980px block below) - on desktop it stays fully hidden rather
   than falling into normal document flow under .chatwrap */
#sellerSheet{display:none}
/* the context strip that opens the sheet below - a compact left-aligned
   pill (not a full-width row), hidden on desktop where the aside is
   always visible as its own column already */
.tstrip{display:none}
/* on mobile the horse-info panel used to stack right under the messages,
   pushing the send box down the page. It now opens as a bottom sheet on
   tap of the context strip instead - same mechanism as the filter sheets.
   The strip sits in the slot the translation caption used to occupy,
   right below the title, left-aligned so it reads as its own distinct
   horse-tab flowing naturally under the title above it. */
@media (max-width:980px){
  .tstrip{display:flex;align-items:center;gap:5px;width:auto;margin:0;background:var(--card);
    border:1px solid var(--hairline);border-radius:999px;padding:4px 10px 4px 4px;min-height:36px;
    color:var(--soft);font:inherit;text-align:left;cursor:pointer;flex:1 1 0;min-width:0}
  .tstrip:active{border-color:var(--goldline)}
  .tstrip-thumb{width:24px;height:24px;border-radius:50%;background-size:cover;background-position:center;flex:0 0 auto}
  .tstrip-name{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:600;color:var(--ink);min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* dropped on mobile only - with the arrow and seller pill sharing the row
     too there isn't room for thumbnail+name+price+chevron on a 375px
     screen without either truncating the name too aggressively or
     shrinking the tap target below usable. Name + thumbnail carry the
     "which horse" info on their own; price is one tap away in the sheet. */
  .tstrip-price{display:none}
  .tstrip .tgo{color:var(--faint);font-size:13px;flex:0 0 auto}
  /* compact icon-only back arrow, reusing the same circular icon-button
     convention as .cnav (calendar prev/next) instead of a full-width
     "← All conversations" text link - scoped to #threadBack only, the
     other .backlink instances elsewhere in the file are untouched. Kept at
     a full 40x40 tap target even though the two pills beside it shrink -
     back navigation is the one control here that must stay easy to hit. */
  #threadBack{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    flex:0 0 auto;border-radius:999px;border:1px solid var(--hairline);color:var(--muted);
    font-size:18px;line-height:1;text-decoration:none}
  #threadBack:active{border-color:var(--goldline)}
  #threadBack .threadback-txt{display:none}
  /* seller name becomes a pill matching .tstrip's own visual treatment
     (thumbnail + name + chevron) instead of a bare heading, only when it's
     actually clickable (a real seller/farm/broker) - buyer-counterparty
     threads have no seller to link to and keep the plain heading. */
  #threadTitle.clickable{display:flex;align-items:center;gap:5px;width:auto;
    background:var(--card);border:1px solid var(--hairline);border-radius:999px;
    padding:4px 10px 4px 4px;min-height:36px;font-family:'Cormorant Garamond',serif;
    font-size:13px;font-weight:600;margin:0;flex:1.3 1 0;min-width:0}
  #threadTitle.clickable:active{border-color:var(--goldline)}
  #threadTitle.clickable .tgo{margin-left:auto;color:var(--faint);font-size:13px;flex:0 0 auto}
  .thread-title-av{display:block;width:24px;height:24px;border-radius:50%;
    background-size:cover;background-position:center;border:none;flex:0 0 auto}
  #threadTitle.clickable .pill.thread-title-badge{display:none}
  /* back arrow + seller pill + horse pill all share ONE row (requested:
     all three together, not the arrow+seller row with the horse pill on
     its own line below). .thread-heads is always the flex row now, not
     just when the title happens to be a clickable pill - a plain
     non-clickable heading (buyer-counterparty thread, no seller) still
     needs to sit next to the arrow and the horse pill, just without the
     pill chrome. Both pills get min-width:0 + their own text truncation so
     they can shrink to fit a 375px screen without overflowing; the seller
     pill gets a slightly larger flex-grow share since a farm/broker name
     tends to run longer than a horse name. */
  .thread-heads{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:10px}
  /* buyer-counterparty thread: no seller to link to, so the title stays a
     plain (non-pill) heading - still needs to shrink to fit next to the
     arrow and the horse pill instead of rendering at its default 26px
     desktop size, which would blow the row out on a 375px screen. */
  #threadTitle:not(.clickable){display:flex;align-items:center;flex:1.3 1 0;min-width:0;font-size:17px;margin:0}
  #threadTitle{min-width:0}
  /* direct flex child of a flex parent in every case now (the pill layouts
     above, or the plain heading rule just above) so it can actually shrink
     with the row instead of relying on a guessed fixed max-width */
  .thread-title-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* both the horse-info sheet (.dr-ctx) and the seller sheet share this
     look and the same slide-up/slide-down mechanism: always rendered
     (never display:none, since CSS transitions can't animate display),
     parked off-screen via transform when closed, pointer-events:none while
     parked so the closed sheet can't intercept taps on the thread behind
     it. .32s matches the backdrop fade below so sheet + scrim move as one. */
  .dr-ctx,#sellerSheet{display:flex;flex-direction:column;border-left:none;position:fixed;left:0;right:0;bottom:0;z-index:320;
    max-height:82vh;overflow-y:auto;background:var(--panel);border-top:1px solid var(--goldline);
    border-radius:16px 16px 0 0;padding:0 0 calc(20px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -18px 44px rgba(0,0,0,.55);margin:0;
    transform:translateY(100%);pointer-events:none;transition:transform .32s var(--ease2)}
  .dr-ctx.open,#sellerSheet.open{transform:translateY(0);pointer-events:auto}
  .dr-ctx #threadAsideBody,#sellerSheet #sellerSheetBody{overflow-y:auto}
  /* fades in sync with the sheet's slide instead of the old instant
     display:none/block snap - always display:block so opacity can
     transition, pointer-events off while invisible so it can't swallow
     taps on the thread underneath */
  #threadscrim{display:block;opacity:0;pointer-events:none;transition:opacity .32s var(--ease2)}
  #threadscrim.on{opacity:1;pointer-events:auto}
  /* same duplication as desktop's .convo-split.duo rule: inside the sheet the
     horse photo+name (.dr-photo/.drn) already sit at the top and the seller
     name is already the thread's title bar, so these two chips repeat info
     already visible right above them - keep only demand (and deal, broker-only) */
  .dr-ctx .tchip-seller,.dr-ctx .tchip-horse{display:none}
  @media (prefers-reduced-motion:reduce){.dr-ctx,#sellerSheet,#threadscrim{transition:none}}
}
/* THREAD SCREEN, MOBILE ONLY: the message list is its own bounded,
   internally-scrolling region (standard chat-app pattern - iMessage,
   WhatsApp) so a long conversation doesn't push the input far down the
   page. The base .thread{max-height:60vh;overflow-y:auto} rule above
   already does this; re-affirmed explicitly here for mobile so it reads as
   deliberate rather than inherited. A plain page-level-scroll variant was
   tried instead (see git history around ebe1455) and reverted after the
   repo owner found the input impractically far down the page on long
   threads in preview. The edge shadow below is a subtle affordance
   signalling "this list scrolls independently". Desktop's own .thread
   override (.convo-split.duo .deal .thread, a separate and already-correct
   per-pane scroll mechanism) is untouched. (A flex/100dvh/visualViewport
   containment scheme was also tried here and reverted after repeated
   real-device regressions - see git history around 0efec8b..bd5dc92 - in
   favor of this simpler, previously-stable pattern.) */
@media (max-width:980px){
  /* shrunk by the same 84px the sendrow below reserves for the fixed bottom
     nav, so that reservation comes out of the internally-scrolling message
     list's budget instead of pushing the whole page taller than the
     viewport - the thread screen stays a single non-scrolling page (only
     .thread itself scrolls internally) with .sendrow still guaranteed clear
     of the nav, rather than trading nav-clipping for page-level dead scroll. */
  .thread{max-height:calc(60vh - 84px);overflow-y:auto;box-shadow:var(--thread-edge-shadow)}
  /* separates the send box from both the message list above (divider) and
     the fixed bottom nav below (margin) - was sitting flush against the nav
     buttons with nothing to break up the two ("κολλητά με τα κουμπιά κάτω",
     no divider). The 84px bottom margin below is the nav's own clearance,
     moved here from .wrap's blanket padding (see the comment below) - not
     just breathing room, .sendrow needs it or it renders behind the fixed
     nav bar. FIX (post d00e2a8 regression, real-iPhone report): the first
     version of this rule kept only a 10px margin here, trusting .wrap's
     blanket padding-bottom to clear the nav - but that padding is zeroed
     out two rules below for this exact screen, so .sendrow ended up with
     no real nav clearance at all and rendered clipped behind the nav on a
     real device. 84px matches the proven value body.authed .wrap already
     uses everywhere else nav clearance is needed. */
  #s-thread.on .sendrow{border-top:1px solid var(--hairline);padding-top:14px;margin:4px 0 84px}
  /* .wrap's blanket 84px bottom padding (meant for other mobile screens
     whose last element has no such clearance built in) and the .demofoot
     disclaimer below it in document flow are pure excess here now that
     .sendrow carries its own nav clearance directly above - measured at
     375/390/414px with both a short (4-message) and a capped-long (60vh,
     internally-scrolling) thread: without zeroing .wrap's padding here,
     document.documentElement.scrollHeight ran past window.innerHeight,
     leaving blank page scroll below .sendrow. Scoped narrowly to the thread
     screen, same pattern as the desktop body:has(.convo-split.duo) .demofoot
     rule above - .demofoot stays visible on every other mobile screen. */
  body:has(#s-thread.on) .demofoot{display:none}
  body:has(#s-thread.on) .wrap{padding-bottom:0}
}
.dr-sheet-h{display:none}
@media (max-width:980px){.dr-sheet-h{display:flex;align-items:center;gap:12px;padding:14px 16px 4px}
  .dr-sheet-h b{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:var(--ink)}}
.dr-photo{height:130px;overflow:hidden;position:relative;cursor:pointer}
.dr-photo img{width:100%;height:100%;object-fit:cover}
/* single-horse aside: the horse's name used to overlay the photo on a dark
   scrim. Moved to a plain header line above the (now clean) photo instead. */
.dr-namehead{padding:14px 18px 8px;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--ink)}
.dr-body{padding:12px 18px 18px}
.dr-row{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px solid var(--hairline)}
.dr-row span{color:var(--faint)} .dr-row b{color:var(--soft);font-weight:500;text-align:right}
.stage{display:flex;align-items:center;margin:18px 0 12px}
.stage .st{flex:1;text-align:center;position:relative}
.stage .st .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--faint);margin:0 auto 6px;background:var(--card)}
.stage .st.done .dot{background:var(--ok);border-color:var(--ok)}
.stage .st.now .dot{border-color:var(--ok);box-shadow:none}
.stage .st .lb{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.stage .st.done .lb,.stage .st.now .lb{color:var(--soft)}
.stage .st::before{content:"";position:absolute;top:5px;left:-50%;width:100%;height:1px;background:var(--hairline)}
.stage .st:first-child::before{display:none}
.stage .st.done::before{background:var(--ok)}
.dr-doc{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:5px 0}
.dr-doc .icon{width:14px;height:14px;color:var(--ok)}
/* multi-horse conversations: the aside becomes a compact index of the seller's
   proposed horses, one .hmini row each, per-horse ministage. Not sticky - the
   column scrolls with the thread, same as the single-horse aside today. */
.dr-mhead{padding:14px 18px 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dr-hlist{display:flex;flex-direction:column;gap:8px;padding:12px 12px 16px;min-width:0}
.dr-hlist .hmini{min-width:0}
.dr-hlist .hmini .tgo{color:var(--faint);font-size:14px;flex:0 0 auto}
.conv2 .cthumb{width:52px;height:52px;border-radius:var(--r-sm);overflow:hidden;flex:0 0 auto;border:1px solid var(--hairline)}
.conv2 .cthumb img{width:100%;height:100%;object-fit:cover}
@media (max-width:700px){.conv2 .cavatar{display:none}}

/* STABLE */
.stable{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--cardshadow)}
.hcard[role="button"]{cursor:pointer;transition:border-color var(--dur) var(--ease2)}
.hcard[role="button"]:hover{border-color:var(--line)}
.himg{aspect-ratio:16/10;background-size:cover;background-position:center}
.hbody{padding:12px 14px;display:flex;flex-direction:column;gap:7px}
.match{font-size:11.5px;color:var(--goldink);font-weight:600;border-top:1px solid var(--hair);padding-top:7px;margin-top:2px;display:flex;align-items:center;gap:6px}
.match .chev{margin-left:auto;color:var(--goldink);flex:none;transition:transform var(--dur) var(--ease2)}
@media (hover:hover) and (pointer:fine){.match:hover .chev{transform:translateX(2px)}}
.match .icon{width:12px;height:12px}
.stale{font-size:11px;color:var(--warn)}
.lswitch{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--soft);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 0;min-height:40px}
.lswitch .tr{width:34px;height:18px;border-radius:999px;border:1px solid var(--goldline);position:relative;transition:background .25s ease}
.lswitch .tr::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .25s ease,background .25s ease}
.lswitch[aria-checked="true"] .tr{background:rgba(201,169,97,.25)}
.lswitch[aria-checked="true"] .tr::after{transform:translateX(16px);background:var(--gold)}
.scopegrp{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.scopegrp .sbtn{background:none;border:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:10px 12px;border-radius:999px;min-height:40px}
.scopegrp .sbtn[aria-pressed="true"]{border-color:var(--gold);color:var(--goldink);background:rgba(201,169,97,.10)}
.comp{display:flex;gap:10px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--muted)}
.comp .ok2{color:var(--ok)} .comp .warn2{color:var(--warn)} .comp .miss{color:var(--warn)}
.hcard.off{opacity:.55}

/* THE PULSE */
.pulselist{display:flex;flex-direction:column;gap:14px;max-width:760px}
.pcard2{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px;box-shadow:var(--cardshadow);cursor:pointer;transition:border-color .25s ease}
.pcard2:hover{border-color:var(--line)}
.pcard2 .ptop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.pcard2 .ptitle{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--ink);line-height:1.2}
.pcard2 .pbody{font-size:13px;color:var(--soft);line-height:1.6;max-height:44px;overflow:hidden;transition:max-height .35s ease}
.pcard2.open .pbody{max-height:400px}
.pcard2 .pmeta{font-size:11px;color:var(--muted);margin-top:6px}
.pcard2{padding:0;overflow:hidden}
.pcard2 .pcart{height:88px;position:relative;overflow:hidden}
.pcard2 .pcart img,.pcard2 .pcart .artf{width:100%;height:100%;object-fit:cover;display:block}
.pcard2 .pcart .artf{background-position:center;background-size:cover;opacity:.5}
.pcard2 .pcart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(14,29,19,.75))}
/* the dark wash reads fine on the dark card in dark theme, but sits as a floating dark
   band on the near-white light card; lighten it so the art/photo blends into the card */
:root[data-theme="light"] .pcard2 .pcart::after{background:linear-gradient(180deg,rgba(244,239,223,.1),rgba(244,239,223,.7))}
.pcard2 .pcin{padding:14px 18px 16px}
.pcard2 .ptitle{font-size:22px}
.pcard2 .pbody{margin-top:6px}

/* PULSE STRIP (Flow) */

/* THE MARKET - real interactive Leaflet map */
.mapfilter{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;width:max-content;margin-bottom:12px}
#fluxdesk{margin-left:auto;margin-right:auto}
.mapfilter button{background:none;border:none;color:var(--muted);font-size:11px;letter-spacing:.06em;padding:6px 16px;border-radius:999px;white-space:nowrap;min-height:40px}
.mapfilter button.on{background:var(--btnfill);color:var(--onbtn)}
.mapfilter button:hover:not(.on){color:var(--ink)}
.mapframe{position:relative;border:1px solid rgba(31,61,46,.18);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(31,61,46,.08),0 14px 38px -16px rgba(31,61,46,.38)}
:root[data-theme="dark"] .mapframe{border-color:rgba(243,238,223,.16);box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 38px -16px rgba(0,0,0,.6)}
#realmap{height:460px;position:relative;z-index:0}
/* warm the base tiles toward the cream palette — light theme only; dark CARTO tiles stay untouched */
:root[data-theme="light"] #realmap .leaflet-tile-pane{filter:sepia(.22) saturate(.85) contrast(.97) brightness(1.01)}
/* glass overlays — siblings of #realmap inside .mapframe; its z-index:0 stacking
   context keeps ALL leaflet panes underneath z-index:5 siblings */
.mapfly{position:absolute;z-index:5}
.mapfly.tr{top:12px;right:12px;border-radius:999px;padding:2px}
.mapfly.bl{left:12px;bottom:12px}
.glass{background:rgba(251,248,238,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(31,61,46,.14);box-shadow:0 2px 10px rgba(31,61,46,.14)}
:root[data-theme="dark"] .glass{background:rgba(28,51,35,.85);border-color:rgba(243,238,223,.16);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.mapfly .mapfilter{margin-bottom:0;border:none;background:none}
.mapfly .mapfilter button{min-height:34px;padding:5px 14px;font-weight:500}

/* WORKSPACE TABS (broker desk cluster) — underline tabs, distinct from the .mapfilter
   pill: navigation between screens should never wear the same costume as a data filter */
.wtabs{display:flex;gap:26px;border-bottom:1px solid var(--hairline);margin-bottom:20px}
.wtabs button{background:none;border:none;padding:2px 2px 11px;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;position:relative;min-height:40px}
.wtabs button.on{color:var(--goldink)}
.wtabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.wtabs button:hover:not(.on){color:var(--soft)}
.wtabs .cnt{font-weight:500;color:var(--faint);margin-left:5px;letter-spacing:0}
@media (max-width:420px){.wtabs{gap:18px}.wtabs button{font-size:11px;letter-spacing:.06em}}
.legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:'Inter',sans-serif;
  font-size:10.5px;letter-spacing:.02em;color:var(--soft);border-radius:999px;padding:6px 14px 6px 8px}
.legend .li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.legend .sw{display:inline-flex;align-items:center;justify-content:center;flex:none}
.legend .sw.dem{width:15px;height:15px;border-radius:50%;background:#C9A961;color:#14251B;font-size:8px;border:1.5px solid rgba(255,255,255,.7)}
.legend .sw.frm{width:15px;height:15px;border-radius:4px;background:#1F3D2E;color:#C9A961;font-size:9px;border:1.5px solid #C9A961}
.mappin{width:30px;height:30px;border-radius:50%;background:#C9A961;color:#14251B;border:2px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;box-shadow:0 0 0 3px rgba(201,169,97,.28),0 3px 8px rgba(31,61,46,.35)}
.farmpin{width:30px;height:30px;border-radius:8px;background:#1F3D2E;color:#C9A961;border:2px solid #C9A961;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;box-shadow:0 2px 6px rgba(31,61,46,.32),0 6px 14px -6px rgba(31,61,46,.4)}
/* quiet leaflet chrome — brand zoom control + faded attribution */
.leaflet-touch .leaflet-control-zoom{border:1px solid rgba(31,61,46,.14);border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(31,61,46,.14)}
.leaflet-touch .leaflet-control-zoom a{width:32px;height:32px;line-height:32px;font-size:15px;
  background:rgba(251,248,238,.92);color:#1F3D2E;border-bottom:1px solid rgba(31,61,46,.1)}
.leaflet-touch .leaflet-control-zoom a:last-child{border-bottom:none}
.leaflet-touch .leaflet-control-zoom a:hover{background:#FFFDF6;color:#1F3D2E}
:root[data-theme="dark"] .leaflet-touch .leaflet-control-zoom{border-color:rgba(243,238,223,.16)}
:root[data-theme="dark"] .leaflet-touch .leaflet-control-zoom a{background:rgba(28,51,35,.92);color:#F3EEDF;border-bottom-color:rgba(243,238,223,.12)}
:root[data-theme="dark"] .leaflet-touch .leaflet-control-zoom a:hover{background:#24402D;color:#F3EEDF}
.leaflet-control-attribution{background:rgba(251,248,238,.6)!important;color:rgba(63,85,70,.55)!important;font-size:9px!important}
.leaflet-control-attribution a{color:rgba(63,85,70,.6)!important}
:root[data-theme="dark"] .leaflet-control-attribution{background:rgba(21,40,27,.6)!important;color:rgba(205,198,174,.55)!important}
:root[data-theme="dark"] .leaflet-control-attribution a{color:rgba(205,198,174,.6)!important}
.leaflet-popup-content-wrapper{background:var(--card);color:var(--ink);border:1px solid rgba(201,169,97,.5);border-radius:14px;
  box-shadow:0 4px 14px rgba(31,61,46,.14),0 18px 44px -18px rgba(31,61,46,.4)}
.leaflet-popup-tip{background:var(--card);border:1px solid rgba(201,169,97,.5);box-shadow:none}
a.leaflet-popup-close-button{color:var(--faint);font-size:16px;padding:6px 6px 0 0}
a.leaflet-popup-close-button:hover{color:var(--ink)}
.leaflet-popup-content{margin:12px 14px;font-size:13px}
.leaflet-popup-content .k{display:block;margin-bottom:6px}
.leaflet-popup-content ul{list-style:none}
.leaflet-popup-content li{padding:3px 0;border-bottom:1px dashed var(--hair)}
.leaflet-popup-content li:last-child{border:none}
.heat{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;min-width:0}
/* auto-fit's minmax(150px,...) demands 150px per column regardless of the container's
   real width once nested a few grids deep (folio > fmain > cblock) - with 3 stat tiles
   that floor is 3*150+gaps=474px, wider than any phone, and it was dragging the whole
   profile column out to match instead of wrapping. Fixed 2-up under 700px avoids it. */
@media (max-width:700px){.heat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:none;border:none;border-bottom:1px solid var(--hairline);border-radius:0;padding:8px 4px 12px;box-shadow:none;transition:border-color var(--dur)}
.agstats .heat .stat{text-align:center}
.agstats .csub{display:block;text-align:center}
.agstats .csub::after{display:none}
.heat .stat[role="button"]{cursor:pointer}
.heat .stat[role="button"]:hover{border-color:var(--line)}
.heat .stat.active{border-color:var(--gold)}
.stat .n{font-family:'Inter',sans-serif;font-size:26px;font-weight:600;color:var(--acc);line-height:1.2;font-variant-numeric:tabular-nums}
.stat .l{font-size:10.5px;color:var(--muted);letter-spacing:.02em;margin-top:3px}
.trend{display:block;font-size:10px;letter-spacing:.06em;margin-top:4px}
.stat .trend.up{color:var(--ok)} .stat .trend.down{color:var(--warn)}

#login{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 18px;text-align:center}
#login .lg{height:96px;width:auto;filter:drop-shadow(0 4px 18px rgba(201,169,97,.25));margin-bottom:6px}
#login .wm{letter-spacing:.34em;font-size:16px;font-weight:600;color:var(--ink)}
#login .sub2{font-size:12.5px;color:var(--muted);margin-bottom:26px}
.plist{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.pcardL{width:240px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--cardshadow);padding:22px 18px;cursor:pointer;text-align:center;transition:border-color .25s ease,transform .25s ease}
.pcardL .av{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--raised);color:var(--soft);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:20px;margin:0 auto 12px}
.pcardL b{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--ink);margin-bottom:3px}
.pcardL .rl{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--goldink);margin-bottom:8px}
.pcardL p{font-size:12.5px;color:var(--muted);line-height:1.5}
/* on a phone three stacked portrait cards need a scroll before you can even choose.
   Lay them out as rows: face on the left, who they are on the right. */
@media (max-width:700px){
  #login{padding:24px 18px;gap:6px}
  #login .lg{height:58px;width:auto}
  #login .sub2{margin-bottom:16px}
  #login .plist{gap:10px;width:100%;align-items:center;flex-direction:column}
  #login .founderwrap{margin-top:14px}
  #login .foot{margin-top:12px;font-size:10.5px}
  #login .wm{font-size:17px}
  #login .pcardL{width:100%;max-width:420px;display:grid;grid-template-columns:44px 1fr;gap:14px;
    align-items:center;text-align:left;padding:13px 15px}
  #login .pcardL .av{width:44px;height:44px;margin:0;font-size:17px;grid-row:span 3}
  #login .pcardL b{font-size:17px;margin-bottom:1px}
  #login .pcardL .rl{margin-bottom:3px;font-size:9.5px}
  #login .pcardL p{font-size:11.5px;line-height:1.4}
}
#login .foot{font-size:11px;color:var(--muted);margin-top:26px}
#login .founderwrap{position:relative;margin-top:22px;z-index:60}
.adminbtn{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;min-height:40px;transition:color .25s ease,border-color .25s ease}
.adminbtn:hover,.adminbtn[aria-expanded="true"]{color:var(--goldink);border-color:var(--goldline)}
.founderpick{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--cardshadow);padding:6px;z-index:50;width:236px}
.founderpick.on{display:block}
.fpick{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;text-align:left;padding:10px 12px;border-radius:7px;cursor:pointer;transition:background .2s ease}
.fpick:hover{background:rgba(201,169,97,.08)}
.fpick .av{width:38px;height:38px;border-radius:50%;border:1px solid var(--goldline);background:radial-gradient(circle at 35% 30%,#2C4A38,#1C3323);color:var(--gold-hi);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:14px;flex:0 0 auto}
.fpick .fpt{display:flex;flex-direction:column;line-height:1.3}
.fpick .fpt b{font-size:13.5px;color:var(--ink)}
.fpick .fpt i{font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--goldink)}
header,.wrap{display:none}
body.authed header{display:block}
body.authed .wrap{display:block}
body.authed #login{display:none}
.userchip{display:flex;align-items:center;gap:10px;white-space:nowrap;position:relative}
.avbtn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:block}
.userchip .av{width:40px;height:40px;border-radius:50%;border:1px solid var(--hairline);background:#1F3D2E;color:#F5EFE0;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:14px}
.avbtn[aria-expanded="true"] .av{box-shadow:0 0 0 2px var(--goldline)}
.usermenu{position:absolute;top:calc(100% + 8px);right:0;width:250px;max-width:82vw;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--cardshadow);padding:6px;display:none;z-index:300}
.usermenu.on{display:block}
.um-id{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--hair);margin-bottom:4px}
.um-id .av{flex:0 0 auto}
.um-id .um-idt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.um-id b{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-id i{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--goldink)}
.um-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;border:none;text-align:left;padding:9px 10px;font-size:13px;letter-spacing:.01em;color:var(--soft);border-radius:6px;min-height:40px;cursor:pointer;transition:background var(--dur) var(--ease2),color var(--dur) var(--ease2)}
.um-item:hover{background:rgba(201,169,97,.08);color:var(--ink)}
.um-item .um-val{font-size:11px;color:var(--faint);letter-spacing:.04em;flex:0 0 auto}
.um-out{color:var(--muted);border-top:1px solid var(--hair);margin-top:4px;border-radius:0}
.um-out:hover{color:var(--bad);background:rgba(184,66,42,.08)}
/* deal record */
.dealhero{border:1px solid var(--hairline);border-radius:var(--r);background:var(--card);padding:18px;margin-bottom:18px}
.dh-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.dh-when{font-size:11.5px;color:var(--faint)}
.dh-name{font-family:'Cormorant Garamond',serif;font-size:27px;font-weight:500;color:var(--ink);line-height:1.1}
.dh-name:focus{outline:none}
.dh-sub{font-size:12.5px;color:var(--soft);margin-top:4px}
.dnote{font-size:13px;color:var(--soft);line-height:1.6;max-width:60ch}
.dacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
/* deal record spec2: hero row, other-buyers details, stage rail, momentum, withdraw link */
.dh-row{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.dh-img{width:72px;height:72px;border-radius:var(--r-sm);background-size:cover;background-position:center;border:1px solid var(--hairline);flex:none}
.dh-main{min-width:0;flex:1}
.dh-row .dh-top{margin-left:auto;margin-bottom:0;flex:none}
.dh-sub b{color:var(--ink);font-weight:600}
.dh-others{margin-top:7px}
.dh-others summary{list-style:none;cursor:pointer;width:max-content;font-size:11.5px;color:var(--faint);text-decoration:underline;text-underline-offset:2px}
.dh-others summary::-webkit-details-marker{display:none}
.dh-others[open] summary{color:var(--soft)}
.dh-orow{display:flex;align-items:center;gap:10px;padding:7px 0 0;font-size:12.5px;color:var(--soft);cursor:pointer;width:max-content}
.dh-orow:hover span:first-child{color:var(--ink)}
.dstage{display:flex;margin-top:18px}
.ds-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}
.ds-step::before{content:"";position:absolute;top:4px;left:calc(-50% + 10px);right:calc(50% + 10px);height:1px;background:var(--hairline)}
.ds-step:first-child::before{display:none}
.ds-dot{width:9px;height:9px;border-radius:50%;border:1px solid var(--line);flex:none}
.ds-step.done .ds-dot{background:var(--ok);border-color:var(--ok)}
.ds-step.done::before,.ds-step.now::before{background:var(--ok)}
.ds-step.now .ds-dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,169,97,.22)}
.ds-label{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);text-align:center}
.ds-step.done .ds-label{color:var(--soft)}
.ds-step.now .ds-label{color:var(--goldink)}
.dstage.declined{opacity:.6}
.dstage.declined .ds-step:last-child .ds-dot{background:var(--bad);border-color:var(--bad)}
.dstage.declined .ds-step:last-child .ds-label{color:var(--bad)}
.dmoment{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15.5px;color:var(--ink);margin-bottom:8px}
.dwithdraw{display:block;background:none;border:none;padding:0;margin-top:12px;font-size:11.5px;color:var(--faint);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dwithdraw:hover{color:var(--soft)}
.dcard{display:flex;gap:14px;align-items:center;border:1px solid var(--hairline);border-radius:var(--r);background:var(--card);padding:12px;cursor:pointer;transition:border-color var(--dur) var(--ease2)}
.dcard:hover{border-color:var(--line)}
.dc-img{width:78px;height:60px;border-radius:var(--r-sm);background-size:cover;background-position:center;flex:none}
.dcard b{display:block;color:var(--ink);font-size:14px}
.dcard span{display:block;font-size:11.5px;color:var(--soft)}
.dc-go{color:var(--goldink)!important;margin-top:5px;font-size:11px!important}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.dg{border:1px solid var(--hairline);border-radius:var(--r-sm);background:var(--card);padding:11px 13px}
.dg i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.dg b{font-size:12.5px;color:var(--ink);font-weight:500}
.cblock{margin-bottom:26px}
.csub{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:var(--ink);margin-bottom:12px;display:flex;align-items:center;gap:14px}
.csub::after{content:"";flex:1;height:1px;background:var(--hair)}
.qlist{display:flex;flex-direction:column;gap:12px}
.qrow{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;box-shadow:var(--cardshadow);transition:opacity .4s,transform .4s}
.qrow>*:first-child{flex:1 1 auto;min-width:0}
.qrow>*+*{flex:0 1 auto;min-width:0}
.qrow[role="button"]{transition:border-color .25s ease}
.qrow[role="button"]:hover{border-color:var(--line)}
.qrow b{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:500;color:var(--ink)}
.qrow .qmeta{font-size:12px;color:var(--muted);margin-top:2px}
#s-cohort .qrow b,#s-comms .qrow b{font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600}
#s-cohort .qmeta,#s-comms .qmeta{color:var(--faint)}
/* My desk (broker): a proposal is a horse first - photo + name lead, same
   card language as the buyer's Proposals list, instead of a plain text row. */
.desklist{display:flex;flex-direction:column;gap:10px}
.deskcard{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);box-shadow:var(--cardshadow);padding:12px 14px;cursor:pointer;transition:border-color var(--dur) var(--ease2)}
.deskcard:hover{border-color:var(--goldline)}
.deskcard .dcimg{width:60px;height:60px;border-radius:8px;background-size:cover;background-position:center;flex:0 0 auto;border:1px solid var(--hairline)}
.deskcard .dcbody{flex:1;min-width:0}
.deskcard .dctop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.deskcard .dcname{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--ink)}
.deskcard .dcbuyer{font-size:12px;color:var(--muted);margin-top:2px}
.deskcard .dcnote{font-size:11.5px;color:var(--soft);margin-top:4px}
/* proposals grouping spec3: one <details> per horse */
.hg-head{list-style:none;display:flex;align-items:center;gap:11px;padding:9px 2px;cursor:pointer;-webkit-user-select:none;user-select:none}
.hg-head::-webkit-details-marker{display:none}
.hg-head:hover .hg-chev{color:var(--soft)}
.hg-img{width:44px;height:44px;border-radius:var(--r-sm);background-size:cover;background-position:center;border:1px solid var(--hairline);flex:none}
.hg-name{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hg-count{font-size:11px;color:var(--faint);flex:none}
.hg-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;min-width:0}
.hg-chips .pill{font-size:8.5px;padding:2px 7px}
.hg-chev{flex:none;color:var(--faint);font-size:11px;transition:transform var(--dur) var(--ease2)}
.hgroup[open] .hg-chev{transform:rotate(180deg)}
.hgroup .deskcard+.deskcard{margin-top:10px}
@media (prefers-reduced-motion:reduce){.hg-chev{transition:none}}
@media (max-width:700px){.hg-head{gap:9px}.hg-name{font-size:16.5px}}
.hopt2{display:flex;gap:12px;align-items:center}
.hoptimg{width:44px;height:44px;border-radius:7px;background-size:cover;background-position:center;flex:0 0 auto;border:1px solid var(--hairline)}
/* CONSOLE INLINE QUEUES (v60) */
.qacc{display:none}
.qacc.open{display:block}
.qacc .qrow b{font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600}
.qacc .qmeta{color:var(--faint)}
.qcaret{display:inline-block;flex:0 0 auto;color:var(--faint);font-size:11px}
[aria-expanded="true"] .qcaret{transform:rotate(180deg);color:var(--goldink)}
.greet{margin:18px 0 28px;text-align:center}
.greet .gdate{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.greet .gevent{display:block;font-size:12px;letter-spacing:.1em;color:var(--goldink);margin-top:-8px;margin-bottom:10px}
.greet .gname{display:block;font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:500;margin-bottom:5px;color:var(--ink)}
.greet .gname .g{color:var(--gold-hi)}
.greet .gsub{display:block;font-size:13px;color:var(--muted)}
:root[data-theme="light"] .greet .gname .g{color:var(--goldink)}
/* TODAY card: what you actually have to do, before the screens */
.tdcount{font-size:11px;color:var(--faint);letter-spacing:.06em;margin-top:10px}
/* The Flow's right rail mirrors the buyer's home: what is coming, then the market. */
.agendarail .arh{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.agendarail .arh h3{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:500;color:var(--ink)}
.agendarail .arh span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.arrow2{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:12.5px;color:var(--soft);line-height:1.5}
.arrow2 i{font-style:normal;color:var(--goldink);flex:none;width:13px;text-align:center}
.arrow2.warn i{color:var(--warn)}
.ardate{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.ardate:first-of-type{margin-top:0}
.agwrap{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
@media (min-width:900px){.agwrap{grid-template-columns:300px minmax(0,1fr);gap:38px}
  .agcal{position:sticky;top:88px}}
.agwrap3{grid-template-areas:"cal" "list" "pulse"}
.agwrap3 .agcal{grid-area:cal}
.agwrap3 .aglist{grid-area:list}
.agwrap3 .agpulse{grid-area:pulse}
@media (min-width:900px){.agwrap3{grid-template-areas:"cal list" "pulse list"}.agwrap3 .agcal{position:static}}
.agcal{border:1px solid var(--hairline);border-radius:var(--r);background:var(--card);padding:15px 16px 13px}
.calhead{margin-bottom:12px}
.calhead b{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;color:var(--ink)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cdow{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:center;padding-bottom:5px}
.cd{position:relative;aspect-ratio:1;min-height:34px;border:0;background:none;border-radius:var(--r-sm);
  font:inherit;font-size:12px;color:var(--faint);display:flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease2),color var(--dur) var(--ease2)}
.cd.pad{pointer-events:none}
.cd:disabled{cursor:default}
.cd.has,.cd.today{color:var(--ink);cursor:pointer}
.cd.today{border:1px solid var(--goldline);font-weight:600}
.cd.has i{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold)}
.cd.sel{background:var(--gold);color:var(--ongold)}
.cd.sel i{background:var(--ongold)}
@media (hover:hover) and (pointer:fine){.cd.has:hover,.cd.today:hover{background:var(--raised)}}
.callegend{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:10.5px;color:var(--faint)}
.callegend .lgd{width:4px;height:4px;border-radius:50%;background:var(--gold);flex:none}
.agstats .heat{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.agstats .stat .n small{font-size:11px;color:var(--ok);font-family:'Inter',sans-serif;margin-left:5px;font-weight:500}
.calweek{display:none}
@media (max-width:899px){.calmonth{display:none}.calweek{display:block}}
.calhead-w{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calhead-w b{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:500;color:var(--ink)}
.cnav{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--hairline);border-radius:999px;color:var(--muted);font-size:18px;line-height:1;transition:border-color var(--dur) var(--ease2)}
.cnav:disabled{opacity:.3;pointer-events:none}
@media (hover:hover) and (pointer:fine){.cnav:hover{border-color:var(--line);color:var(--ink)}}
.tdcard{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);padding:2px 14px;max-width:680px}
.tdcard .dnote{padding:10px 0}
.cupbtn{display:flex;align-items:center;gap:10px;background:none;border:none;font:inherit;color:inherit;text-align:left;padding:0;min-height:44px}
.cupbtn .scount{font-family:'Inter',sans-serif;font-size:12px;color:var(--faint);letter-spacing:0;font-weight:400}
.cupbtn .mchev{width:15px;height:15px;color:var(--faint);transition:transform var(--dur) var(--ease2)}
.cupbtn[aria-expanded="true"] .mchev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.cupbtn .mchev{transition:none}}
.agpulse .rail-card{margin-bottom:0;max-width:680px}
.agpulse .rail-card .rch{display:none}
.agday{border:1px solid var(--hairline);border-radius:var(--r);background:var(--card);padding:13px 15px;margin-bottom:10px;max-width:680px;transition:border-color var(--dur) var(--ease2)}
.agday.lit{border-color:var(--gold)}
.spot{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r);transition:outline-color .5s}
.agd-h{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.agd-h b{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--ink)}
.agd-h span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.agrow{display:flex;gap:11px;align-items:flex-start;padding:6px 0;font-size:13px;color:var(--soft);line-height:1.5}
.agrow i{font-style:normal;color:var(--goldink);flex:none;width:15px;text-align:center}
.agrow.warn i{color:var(--warn)}
.tditem{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border:none;border-top:1px solid var(--hair);background:none;cursor:pointer;text-align:left;width:100%;min-height:44px}
.tditem:first-of-type{border-top:none}
.tdbox{width:19px;height:19px;border-radius:5px;border:1px solid var(--goldline);flex:0 0 auto;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:transparent}
.tditem.done .tdbox{background:var(--gold);border-color:var(--gold);color:var(--ongold)}
.tditem .tdt{font-size:13.5px;color:var(--soft);line-height:1.45}
.tditem.done .tdt{color:var(--faint);text-decoration:line-through}
@media (hover:hover) and (pointer:fine){.tditem:hover .tdt{color:var(--ink)}}
.bell{position:relative}
.bellbtn{position:relative;width:40px;height:40px;border-radius:50%;background:none;border:1px solid var(--hairline);color:var(--soft);display:flex;align-items:center;justify-content:center}
#navtoggle{display:none;position:relative;width:40px;height:40px;border-radius:50%;background:none;border:1px solid var(--goldline);color:var(--soft);align-items:center;justify-content:center}
@media (max-width:940px){
  /* mobile: the nav becomes a fixed bottom bar (app-style), no hamburger.
     the header's backdrop-filter would trap position:fixed in a containing block, so drop it here */
  header{backdrop-filter:none;background:var(--panel)}
  #navtoggle{display:none}
  /* the nav left the header, so the icons must claim the right edge themselves:
     brand on the left, you (bell + avatar) on the right, nothing in between */
  #kbdsearch{display:none}
  .bell{margin-left:auto}
  nav#nav{display:flex;position:fixed;top:auto;bottom:0;left:0;right:0;flex-direction:row;align-items:stretch;justify-content:space-around;
    background:var(--panel);border-top:1px solid var(--hairline);box-shadow:0 -10px 26px rgba(0,0,0,.34);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));gap:2px;z-index:200}
  nav#nav button{position:relative;flex:1 1 0;flex-direction:column;justify-content:center;gap:5px;padding:8px 4px;border-radius:14px;font-size:10.5px;letter-spacing:.05em;min-height:54px;white-space:normal;text-align:center;line-height:1.15}
  nav#nav button:not(.on){color:var(--acc)}
  nav#nav button .icon{width:20px;height:20px}
  nav#nav button .nbadge{position:absolute;top:3px;left:50%;margin-left:4px;min-width:16px;height:16px;font-size:10px}
  body.authed .wrap{padding-bottom:84px}
  .sec{flex-wrap:wrap;gap:8px;margin:26px 0 14px}
  .cmpg{grid-template-columns:1fr 1fr;font-size:11.5px}
  .cmpg .ch:first-child{display:none}
  .cmpg .cm{grid-column:1 / -1;color:var(--goldink);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
  .sec .srule{display:none}
  .sec h2{font-size:20px}
}
.bellbtn:hover{border-color:var(--line);color:var(--ink)}
.bdg{position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;border-radius:8px;background:var(--gold);color:var(--ongold);font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 3px}
.bellmenu{position:absolute;top:120%;right:0;width:320px;max-width:82vw;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--cardshadow);padding:6px;display:none;z-index:300}
.bellmenu.on{display:block}
.bitem{padding:11px 12px;border-bottom:1px solid var(--hair);text-align:left}
.bitem:last-child{border-bottom:none}
.bitem b{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.bitem span{display:block;font-size:12px;color:var(--muted)}
.ctable{width:max-content;min-width:100%;border-collapse:collapse;font-size:12.5px}
.ctable th{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:500;color:var(--ink);text-align:left;padding:8px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.ctable td{padding:9px 14px;border-bottom:1px solid var(--hair);color:var(--soft);vertical-align:top;white-space:nowrap}
.ctable td:first-child{color:var(--soft);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;white-space:nowrap}
/* compare modal as a decision surface (spec 7): photo columns, gold winner
   cells, sticky row labels so 3+ horses scroll under the labels on mobile */
.ctable.cmp2 th,.ctable.cmp2 td{white-space:normal;vertical-align:top;min-width:150px;max-width:210px}
.ctable.cmp2 th:first-child,.ctable.cmp2 td:first-child{position:sticky;left:0;background:var(--panel);z-index:1;min-width:0;max-width:none;white-space:nowrap}
.cph{position:relative;width:132px;height:96px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--hairline);cursor:pointer}
.cph img{width:100%;height:100%;object-fit:cover;display:block}
.cph.top{border-color:var(--gold);box-shadow:0 0 0 1px var(--goldline)}
.cph .mbadge{top:6px;right:6px}
.cmp2 .mbest{display:inline-block;margin-top:7px}
.cph-n{margin-top:6px}
.cmp2 .cwhy td+td{font-size:12px;color:var(--soft);line-height:1.5}
.cmp2 .cwin{background:rgba(201,169,97,.10);color:var(--goldink);font-weight:600}
.cmp2 .cact td{border-bottom:none;padding-top:12px}
.cmp2 .cact .btn{min-height:40px;padding:9px 14px;font-size:10.5px;white-space:nowrap}
/* compare chip strip (spec 8): one chip per shortlisted horse, toggling which
   columns render in the table below. Active = gold ring; inactive = dimmed
   outline. The dot reuses the badge tier language: --ok >=80, --muted <65,
   --acc between - same thresholds as .mbadge, never a new color logic. */
.cchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.01em;line-height:1;border:1px solid var(--hairline);background:var(--panel);color:var(--ink);cursor:pointer;min-height:32px}
.cchip i{font-style:normal;width:7px;height:7px;border-radius:50%;background:var(--acc);flex:0 0 auto}
.cchip i.great{background:var(--ok)}
.cchip i.fair{background:var(--muted)}
.cchip b{font-weight:600;color:var(--soft);font-size:11px;margin-left:1px}
.cchip.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--goldline);background:rgba(201,169,97,.08)}
.cchip.on b{color:var(--goldink)}
.cchip:not(.on){opacity:.55}
.cchip:not(.on) i{opacity:.6}
.cchips-hint{font-size:11px;color:var(--soft);margin-top:8px}
.convlist{display:flex;flex-direction:column;gap:12px;max-width:680px}
.conv{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;box-shadow:var(--cardshadow);cursor:pointer;transition:border-color .25s ease}
.conv:hover{border-color:var(--line)}
.conv.dim{opacity:.75}
.cavatar{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--raised);color:var(--soft);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:16px;flex:0 0 auto}
.cbody2{flex:1;min-width:0}
.ctop2{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.ctop2 b{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--ink)}
.ctime{font-size:11px;color:var(--muted);flex:0 0 auto}
.convdem{font-size:10px;letter-spacing:.08em;color:var(--goldink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csnip{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 6px}
.ctags{display:flex;gap:6px;flex-wrap:wrap}
.unread{min-width:20px;height:20px;border-radius:8px;background:var(--gold);color:var(--ongold);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 6px;flex:0 0 auto}
.backlink{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;text-decoration:none}
.backlink:hover{color:var(--goldink)}
/* Desktop split inbox: list | thread | context. Below 981px the two-screen
   mobile flow is untouched - .duo has no effect outside this query. */
@media (min-width:981px){
  .convo-split.duo{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;align-items:start}
  /* each of the 3 panes (list, messages, horse context) scrolls on its
     own instead of one long page scroll - the app header above stays
     put regardless of which pane you're scrolled down in */
  .convo-split.duo>.screen{display:flex;flex-direction:column;min-width:0;height:calc(100vh - 99px)}
  /* thin line between list and thread, matching the existing one between
     messages and horse-info (.dr-ctx) - was a bare 24px gap before */
  .convo-split.duo>.screen:first-child{padding-right:24px}
  .convo-split.duo>.screen:last-child{padding-left:24px;border-left:1px solid var(--line)}
  .convo-split.duo #s-chat .convlist{flex:1;overflow-y:auto;min-height:0}
  .convo-split.duo #s-thread .backlink{display:none}
  .convo-split.duo #s-chat .sub,.convo-split.duo #s-thread .sub{display:none}
  .convo-split.duo .chatwrap{max-width:none;flex:1;min-height:0;display:flex}
  .convo-split.duo .deal{flex:1;min-height:0}
  .convo-split.duo .deal>div:first-child{display:flex;flex-direction:column;min-height:0}
  .convo-split.duo .deal .thread{flex:1;max-height:none;overflow-y:auto}
  /* bottom-anchor short conversations like a normal chat UI: the newest
     bubble sits flush above .sendrow, and any slack space from a short
     thread shows up ABOVE the oldest bubble instead of below the last one.
     NOTE: justify-content:flex-end directly on the scrolling flex container
     was tried first and rejected - Chrome then reports scrollHeight===
     clientHeight (no overflow) and clips everything before the visible
     area instead of making it reachable by scrolling up. Wrapping the
     bubbles in an inner block with margin-top:auto keeps the container's
     own alignment untouched (still overflow-y:auto, content starts at the
     top) so long threads scroll normally in both directions. */
  .convo-split.duo .deal .thread .thread-inner{margin-top:auto}
  .convo-split.duo .deal .sendrow{flex:0 0 auto}
  /* header-row unification: seller name (column 1's title) and the horse
     name now share one baseline, in a 2-col grid mirroring the deal's own
     message/aside split - so "Haras du Marais" and "Quintus Z" line up. */
  .convo-split.duo .thread-heads{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:center}
  .convo-split.duo #threadTitle{display:flex;align-items:center;gap:8px}
  .convo-split.duo .thread-title-av{display:block;width:32px;height:32px;border-radius:50%;background-size:cover;background-position:center;border:1px solid var(--hairline);flex:0 0 auto}
  .convo-split.duo .pill.thread-title-badge{display:inline-block;flex:0 0 auto}
  .convo-split.duo .thread-horsename{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;margin:2px 0 4px;padding-left:18px;border-left:1px solid var(--line);color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .convo-split.duo .thread-horsename:hover{color:var(--goldink)}
  .convo-split.duo .thread-horsename:empty{display:none}
  .convo-split.duo .thread-horsename .tgo{color:var(--faint);font-size:16px;margin-left:4px}
  /* the aside's own name header (used by mobile's bottom sheet) is now
     redundant on desktop - the horse name moved up into the shared header
     row above. Kept in the DOM (unchanged) for mobile's sake. */
  .convo-split.duo .dr-ctx .dr-namehead{display:none}
  /* aside CTA docking: the trailing "Request viewing"/checklist content
     sits flush at the aside's bottom, mirroring the messages column's
     send-row - instead of leaving dead space below a short checklist.
     The auto-margin lives on the space-filling element ahead of the CTA
     button rather than on the button itself, since the button's own inline
     style="margin-top:14px..." would otherwise fight a margin-top:auto set
     directly on it. */
  .convo-split.duo .dr-ctx{overflow-y:auto;display:flex;flex-direction:column}
  .convo-split.duo #threadAsideBody{display:flex;flex-direction:column;flex:1}
  .convo-split.duo #threadAsideBody>.dr-photo,.convo-split.duo #threadAsideBody>.tctx,.convo-split.duo #threadAsideBody>.dr-mhead{flex:0 0 auto}
  .convo-split.duo #threadAsideBody .dr-body{display:flex;flex-direction:column;flex:1 0 auto}
  .convo-split.duo #threadAsideBody .dr-body>.dr-doc:last-of-type{margin-bottom:auto}
  /* "no horses left" aside variant (the only remaining user of .dr-mhead/
     .dr-hlist now that the multi-horse index has been removed - every other
     thread renders the classic single-horse .dr-body card above instead):
     .dr-hlist is the sibling of .dr-mhead that should absorb the remaining
     vertical space inside #threadAsideBody (itself already flex:1), same
     role .dr-body plays for the single-horse variant above. Centering its
     one-paragraph message (rather than leaving it flush to the top) turns
     the same leftover space that used to read as a cut-off blank strip
     below it into deliberate breathing room. justify-content:center is a
     no-op if content ever fills or exceeds the pane (.dr-ctx's own
     overflow-y:auto still governs), so this never fights scrolling. */
  .convo-split.duo #threadAsideBody>.dr-hlist{flex:1;justify-content:center}
  /* measured at 720/900/1080px viewport heights with the 3-doc/2-button
     quintus thread: the flex chain above already clamps correctly - when
     content is taller than the pane, .dr-ctx's own overflow-y:auto (which
     gives it an automatic min-height of 0 per spec, since overflow isn't
     visible) takes over and the auto-margin above resolves to 0, so nothing
     is ever clipped by the aside or by .deal's overflow:hidden; everything
     stays reachable by scrolling .dr-ctx. What's NOT guaranteed cross-OS is
     a visible cue that there's more below: Windows Chrome draws a normal
     ~16px scrollbar (confirmed here), but macOS's default auto-hidden
     overlay scrollbars show nothing until a scroll gesture is mid-flight -
     a static view of an overflowing aside then looks identical to a
     finished, fully-visible one. Forcing a slim persistent scrollbar removes
     that ambiguity on both OSes without touching the layout math above. */
  .convo-split.duo .dr-ctx{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .convo-split.duo .dr-ctx::-webkit-scrollbar{width:6px}
  .convo-split.duo .dr-ctx::-webkit-scrollbar-track{background:transparent}
  .convo-split.duo .dr-ctx::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  /* NOTE: a padding-top:18px rule used to live here, added back when the
     aside opened with the (now desktop-hidden) .dr-namehead label as its
     flush top element - it aligned the label's baseline with the first
     message bubble. Now that the horse name lives in the shared
     .thread-heads row above both columns, that padding just left a stale
     gap between the header row and the photo. Removed - the photo now
     sits directly below the shared header, same as the messages column. */
  .convo-split.duo .convlist{max-width:none;gap:8px}
  .convo-split.duo .conv{padding:10px 12px;gap:10px}
  .convo-split.duo .conv .cavatar,.convo-split.duo .conv .ctags{display:none}
  .convo-split.duo .conv2 .cthumb{width:42px;height:42px}
  .convo-split.duo .ctop2 b{font-size:15px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .convo-split.duo .csnip{margin:2px 0 0}
  .convo-split.duo .conv.sel{background:var(--raised);border-color:var(--soft)}
  /* the duo split's 3 panes each already bound their own height to the
     viewport (above); the demo-data footer note below them in document
     flow adds just enough extra height to make the whole page scroll
     a few px - hide it while the split is active so the page doesn't */
  body:has(.convo-split.duo) .demofoot{display:none}
  /* the split view's own 1180px cap (inherited from .wrap) left ~400px of
     dead space per side on wide desktops - widen just this view, nothing
     else in the app, by targeting .wrap only while the split is active */
  body:has(.convo-split.duo) .wrap{max-width:1580px;padding-bottom:0}
  /* the title and horse photo already open the same seller/horse profiles -
     these chips are the identical click, redundant once both are visible
     side by side. Mobile keeps all of them inside the sheet, where the
     title/photo aren't sitting right next to it. */
  .convo-split.duo .tchip-seller,.convo-split.duo .tchip-horse{display:none}
}
.dlist{display:flex;flex-direction:column;gap:14px;max-width:760px}
/* BUYER HOME (v45, from proto reference) */
.bgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
@media (max-width:980px){.bgrid{grid-template-columns:minmax(0,1fr)}}
.hero-act{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--card),var(--raised));border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;box-shadow:var(--shadow-raise);margin-bottom:26px}
.hero-act::before{content:"";position:absolute;inset:0;background:url('img/bg-course.webp') center/cover no-repeat;opacity:.14;pointer-events:none}
.hero-act .ha-main{position:relative;width:100%}
.hero-act .ha-kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:4px;text-align:center}
.hero-act .btn{position:relative}
:root[data-theme="light"] .hero-act{background:linear-gradient(120deg,#1F3D2E,#24402D);border-color:rgba(245,239,224,.16);box-shadow:0 3px 10px rgba(31,61,46,.22),0 16px 38px -18px rgba(31,61,46,.3)}
:root[data-theme="light"] .hero-act .ha-kick{color:#C9A961}
:root[data-theme="light"] .hero-act h2{color:#F5EFE0}
:root[data-theme="light"] .hero-act .ha-sub{color:rgba(245,239,224,.72)}
:root[data-theme="light"] .hero-act .btn{background:linear-gradient(180deg,#E4D19A,#C9A961 65%);color:#14251B;border-color:rgba(20,37,27,.22)}
.hero-act h2{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;line-height:1.25;color:var(--ink)}
.hero-act .ha-sub{font-size:13px;color:var(--muted);margin-top:3px}
#s-mandate .hero-act,#s-flux .hero-act,#s-inquiries .hero-act,#s-proposals .hero-act{padding:16px 18px;gap:10px;margin-bottom:18px}
#s-mandate .hero-act .ha-kick,#s-flux .hero-act .ha-kick,#s-inquiries .hero-act .ha-kick,#s-proposals .hero-act .ha-kick{margin-bottom:2px}
#s-mandate .hero-act h2,#s-flux .hero-act h2,#s-inquiries .hero-act h2,#s-proposals .hero-act h2{font-size:18px}
#s-mandate .hero-act .ha-sub,#s-flux .hero-act .ha-sub,#s-inquiries .hero-act .ha-sub,#s-proposals .hero-act .ha-sub{font-size:12.5px;margin-top:2px}
#s-mandate .hero-act .btn,#s-flux .hero-act .btn,#s-inquiries .hero-act .btn,#s-proposals .hero-act .btn{padding:9px 14px;font-size:10.5px}
@media (max-width:700px){
  #s-mandate .hero-act,#s-flux .hero-act,#s-inquiries .hero-act,#s-proposals .hero-act{padding:14px 16px;gap:10px}
}
.sec{display:flex;align-items:center;gap:12px;margin:36px 0 16px}
.sec .icon{color:var(--soft)}
.sec h2{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--ink)}
.sec .scount{font-size:12px;color:var(--faint)}
.sec .srule{flex:1;height:1px;background:var(--hairline)}
.dmrow{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);padding:18px;margin-bottom:12px;cursor:pointer;transition:border-color var(--dur) var(--ease2),transform var(--dur) var(--ease2),box-shadow var(--dur) var(--ease2)}
@media (hover:hover) and (pointer:fine){
  .fx2.radar:hover{transform:translateY(-1px)}
  .pcardL:hover{border-color:var(--gold);transform:translateY(-2px)}
  .dmrow:hover{border-color:var(--line);transform:translateY(-1px);box-shadow:var(--cardshadow)}
  .dmrow:hover .dgo{transform:translateX(3px)}
}
.dmrow.dim{opacity:.62}
.dmrow .dm-main{flex:1;min-width:0}
.dmrow .dm-top{display:flex;align-items:center;gap:10px;margin-bottom:2px;flex-wrap:wrap}
.dmrow .dm-title{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--ink)}
.dmrow .dm-crit{font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmrow .dm-meta{font-size:12px;color:var(--faint);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap}
.dmrow .dm-meta b{color:var(--muted);font-weight:600}
.pill.new{color:var(--ongold);background:var(--gold-hi);border:none;animation:newpulse 2.4s ease 3}
@keyframes newpulse{0%,100%{box-shadow:0 0 0 0 rgba(228,209,154,0)}50%{box-shadow:0 0 0 5px rgba(228,209,154,.12)}}
.dspark{width:74px;height:30px;flex:0 0 auto}
.dspark rect{fill:var(--acc);opacity:.65}
.dexp{width:104px;flex:0 0 auto}
.dexp .xl{font-size:10.5px;color:var(--faint);margin-bottom:5px;text-align:right}
.dexp .xb{height:3px;border-radius:2px;background:var(--hairline);overflow:hidden}
.dexp .xb i{display:block;height:100%;border-radius:2px;background:var(--ok)}
.dexp .xb i.low{background:var(--warn)}
.dmrow .dgo{color:var(--faint);transition:color var(--dur) var(--ease2),transform var(--dur) var(--ease2)}
.dmrow:hover .dgo{color:var(--ink)}
#s-mandate .btn.ghost{border-color:var(--line);color:var(--ink);}
#s-mandate .btn.ghost:hover{background:rgba(31,61,46,.06);border-color:var(--soft)}
#s-mandate .bgrid>aside .rch h3{color:var(--muted)}
#s-mandate .bgrid>aside .rch .icon{color:var(--faint)}
@media (max-width:980px){#s-mandate .bgrid>aside,#s-proposals .bgrid>aside{margin-top:10px}}
@media (max-width:700px){
  .dspark{display:none}
  .dmrow{flex-wrap:wrap;gap:12px;padding:16px}
  .dm-top{margin-bottom:4px}
  .dm-crit{white-space:normal}
  .dm-meta{margin-top:6px}
  .dexp{order:1;flex:1 1 100%;width:auto;display:flex;align-items:center;gap:10px;margin-top:2px}
  .dexp .xl{text-align:left;margin-bottom:0;white-space:nowrap;flex:0 0 auto}
  .dexp .xb{flex:1 1 auto}
}
/* needs-you state on the real row (spec 6) - replaces the hero-act banner:
   gold ring + wash, same visual language as the Flow's radar cards */
.needsyou{box-shadow:0 0 0 1px var(--goldline),0 1px 10px rgba(201,169,97,.14);background:linear-gradient(135deg,var(--card),rgba(201,169,97,.06))}
.dmrow.needsyou,.dmrow.needsyou:hover{border-color:var(--goldline)}
.hgroup.needsyou{border:1px solid var(--goldline);border-radius:var(--r);padding:2px 14px 12px}
.ny-line{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.ny-why{font-size:12px;color:var(--goldink)}
.hgroup .ny-line{margin:0 2px 12px}
.rail-card{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:18px;margin-bottom:18px}
.rail-card .rch{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.rail-card .rch .icon{color:var(--gold)}
.rail-card .rch h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
:root[data-theme="light"] .rail-card .rch h3{color:var(--goldink)}
.tickr{padding:9px 0;border-bottom:1px solid var(--hairline);font-size:13px;color:var(--soft);display:flex;gap:9px;align-items:baseline;transition:opacity .5s var(--ease2)}
.tickr:last-child{border-bottom:none}
.tickr.fade{opacity:.25}
.tickr .tw{font-size:10.5px;color:var(--faint);flex:0 0 58px}
.strow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--hairline);cursor:pointer;transition:opacity var(--dur)}
.strow:hover{opacity:.8}
.strow:last-child{border-bottom:none}
.strow .sl{font-size:13px;color:var(--muted)}
.strow .sv{font-family:'Inter',sans-serif;font-weight:600;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.strow .sv small{font-size:11px;color:var(--ok);font-family:'Inter',sans-serif;margin-left:5px}
.privnote{font-size:12px;color:var(--faint);line-height:1.6}
.privnote b{color:var(--muted)}
.tlcard{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);max-width:680px}
.tlrow{display:flex;align-items:baseline;gap:10px;padding:10px 14px;border-top:1px solid var(--hair)}
.tlrow:first-child{border-top:none}
.tlrow .tmark{font-style:normal;flex:0 0 14px;text-align:center;font-size:11px;color:var(--ok);line-height:1}
.tlrow.now .tmark::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.tlrow b{font-size:13px;font-weight:600;color:var(--ink)}
.tlrow span{font-size:12px;color:var(--muted);margin-left:auto;text-align:right;line-height:1.5}
@media (max-width:700px){
  .tlrow{flex-wrap:wrap}
  .tlrow span{flex:1 1 100%;margin-left:24px;text-align:left;margin-top:1px}
}
.hstrip{display:flex;gap:12px;flex-wrap:wrap}
.hmini{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 14px 9px 9px;box-shadow:var(--cardshadow);cursor:pointer;transition:border-color .25s ease}
.hmini:hover{border-color:var(--line)}
.hthumb{width:52px;height:40px;border-radius:6px;background-size:cover;background-position:center;flex:0 0 auto}
.hmini b{display:block;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:500;color:var(--ink)}
.hmini span{font-size:11px;color:var(--muted)}
.lfilter{display:flex;align-items:center;gap:9px;border:1px solid var(--hairline);border-radius:999px;padding:0 15px;margin-bottom:14px;background:var(--card);transition:border-color var(--dur) var(--ease2)}
.lfilter:focus-within{border-color:var(--soft)}
.lfilter .icon{width:14px;height:14px;color:var(--faint);flex:none}
.lfilter input{flex:1;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;padding:11px 0;min-height:42px;outline:none}
.lfilter input::placeholder{color:var(--faint)}
.lfempty{margin-top:4px}
.ivs{display:flex;flex-direction:column;max-width:680px}
.ivrow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--hairline)}
.ivrow:first-child{border-top:none}
.ivicon{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px;background:none;color:#FFFDF6;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;line-height:1}
.ivicon.good{background:var(--ivok)}
.ivicon.watch{background:var(--ivwarn)}
.ivicon.neutral{width:28px;height:25px;border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--ivneutral);font-size:12px;padding-top:7px}
.ivrow b{display:block;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.ivrow>div>span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.55}
.ivband{display:flex;gap:24px;margin-top:8px;flex-wrap:wrap}
.ivband span{display:flex;flex-direction:column;gap:2px;margin-top:0}
.ivband i{font-style:normal;font-size:10.5px;color:var(--faint)}
.ivband b{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--ink)}
/* Activity milestone rail — chronology, deliberately distinct from .ivrow badges */
.tml{list-style:none;margin:0;padding:0;max-width:680px}
.tmr{position:relative;padding:9px 0 9px 26px}
.tmr::before{content:'';position:absolute;left:0;top:15px;width:9px;height:9px;border-radius:50%;background:var(--faint)}
.tmr:not(:last-child)::after{content:'';position:absolute;left:4px;top:28px;bottom:-13px;width:1px;background:var(--hairline)}
.tmr b{display:block;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.tmr>span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.55}
.tmr.live::before{left:-1px;top:14px;width:11px;height:11px;box-sizing:border-box;background:var(--bg);border:2px solid var(--acc);animation:tmlpulse 2.6s ease-out infinite}
.tmr.done::before{left:-1px;top:14px;width:11px;height:11px;background:var(--ink)}
@keyframes tmlpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 30%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.tmr.live::before{animation:none}}
.reachline{font-size:13px;color:var(--soft);margin-bottom:16px;max-width:60ch}
.funnel2{display:flex;align-items:flex-end;gap:8px;max-width:680px}
.fseg{flex:1 1 0;min-width:0;text-align:center}
.fseg .fn{font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--ink);margin-bottom:6px}
.fseg .fbar{background:var(--ink);border-radius:4px 4px 2px 2px}
.fseg .fl{font-size:10px;color:var(--muted);margin-top:7px;line-height:1.3}
.fseg .fw{font-size:9.5px;color:var(--faint);margin-top:3px;font-style:italic}
.folio.single{grid-template-columns:minmax(0,1fr)}
.ivc{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);padding:14px 16px 14px 19px;box-shadow:none;position:relative;overflow:hidden}
.ivc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hairline)}
.ivc.good::before{background:var(--gold)}
.ivc.watch::before{background:var(--warn)}
.ivc b{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:500;color:var(--ink);line-height:1.25}
.ivc span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.ivc.good b{color:var(--gold-hi)}
:root[data-theme="light"] .ivc.good b{color:var(--goldink)}
/* broker: how a mandate compares to your book and to the platform */
.cmpg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;max-width:680px}
.cmpg>*{background:var(--card);padding:10px 12px;font-size:12px;color:var(--soft)}
.cmpg .ch{background:var(--panel);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.cmpg .cm{color:var(--ink)}
.cmpg .cme{color:var(--gold-hi);font-weight:600}
:root[data-theme="light"] .cmpg .cme{color:var(--goldink)}
.ivc.good{border-color:var(--goldline)}
.gauge{position:relative;height:48px;margin:18px 2px 0;max-width:680px}
.gtrack{position:absolute;left:0;right:0;top:12px;height:2px;background:var(--hair)}
.grange{position:absolute;top:8px;height:10px;border-radius:5px}
.grange.plat{background:var(--line)}
.grange.you{border:1px solid var(--acc);background:transparent}
.glab{position:absolute;top:28px;left:0;right:0;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.ccard{display:flex;gap:12px;align-items:flex-start;background:var(--raised);border:1px solid var(--goldline);border-radius:8px;padding:14px 16px;max-width:680px}
.ccard .ck{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--goldink);line-height:1;flex:0 0 auto}
.ccard span{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:var(--ink);line-height:1.5}
.advis{margin-top:14px;background:rgba(226,180,90,.08);border:1px solid var(--warn);border-radius:8px;padding:11px 14px;font-size:12.5px;color:var(--soft);max-width:680px}
.advis a{color:var(--goldink)}
.sellhead{display:flex;gap:16px;align-items:center;background:var(--raised);border:1px solid var(--hairline);box-shadow:var(--cardshadow);border-radius:8px;padding:16px 18px;margin-bottom:8px;flex-wrap:wrap}
.sellhead .av2{width:64px;height:64px;border-radius:50%;border:1px solid var(--hairline);background:var(--panel);background-size:cover;background-position:center;color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:24px;flex:0 0 auto}
.sh-name{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;color:var(--ink)}
.sh-meta{font-size:12px;color:var(--muted);margin-top:3px}
.sh-r{margin-left:auto}
.habout{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;color:var(--soft);max-width:60ch;margin:14px 0 26px;line-height:1.6}
.hmini.hl{border-color:var(--gold);background:var(--raised)}
.hmini .htag{margin-left:auto;flex:0 0 auto}
#intro{position:fixed;inset:0;z-index:400;background:var(--headerbg);display:flex;align-items:center;justify-content:center;pointer-events:none;animation:introLift .6s cubic-bezier(.16,1,.3,1) .95s forwards}
#intro .im{display:flex;flex-direction:column;align-items:center;gap:14px}
#intro .im-mark{width:auto;height:96px;display:block;opacity:0;animation:introMark .6s cubic-bezier(.16,1,.3,1) .05s forwards}
#intro .word{font-weight:600;font-size:17px;text-transform:uppercase;color:var(--ink);letter-spacing:.9em;padding-left:.9em;opacity:0;animation:introWord .8s cubic-bezier(.16,1,.3,1) .25s forwards}
@keyframes introMark{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
@keyframes introWord{from{opacity:0;letter-spacing:1.4em}to{opacity:1;letter-spacing:.42em}}
@keyframes introLift{to{transform:translateY(-100%);visibility:hidden}}
@media (prefers-reduced-motion:reduce){#intro{display:none}.pulse{animation:none}.pill.new{animation:none}.pcard2 .pbody{transition:none}.hcard.fixjump{animation:none}}
.edf2{margin-top:14px;text-align:left}
.edf2 .k{display:block;margin-bottom:7px}
.edf2 input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:6px;color:var(--ink);padding:10px 12px;font-family:'Cormorant Garamond',serif;font-size:16px}
.pgroup{display:flex;gap:8px;flex-wrap:wrap}
.pbtn{background:var(--card);border:1px solid var(--line);color:var(--soft);border-radius:999px;padding:7px 16px;font-size:12px;transition:border-color .2s ease,color .2s ease}
.pbtn:hover{border-color:var(--line)}
.pbtn.sel{border-color:var(--goldink);color:var(--goldink);background:rgba(201,169,97,.08)}
.edhint{font-size:11px;color:var(--muted);margin-top:7px;font-style:italic}
#s-demand .mandate::after{content:"♞";position:absolute;right:18px;bottom:-24px;font-family:'Cormorant Garamond',serif;font-size:110px;line-height:1;color:var(--gold);opacity:.07;pointer-events:none}
.folio{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;margin-top:26px}
.frail{position:sticky;top:96px}
.frail .heat{grid-template-columns:1fr 1fr;margin-top:0}
.frail .cblock{margin-bottom:26px}
@media (max-width:980px){.folio{grid-template-columns:minmax(0,1fr)}.frail{position:static}#s-horse .frail{order:-1}}
.hphero{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.hpimg{width:340px;max-width:100%;aspect-ratio:4/3;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--hairline);box-shadow:var(--cardshadow);flex:0 0 auto;position:relative}
.vidbadge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(31,61,46,.72);border:1px solid rgba(245,239,224,.4);display:flex;align-items:center;justify-content:center;color:#F5EFE0;cursor:pointer;transition:background .2s ease,transform .2s ease}
.vidbadge:hover{background:rgba(31,61,46,.88);transform:translate(-50%,-50%) scale(1.05)}
.vidbadge .icon{width:20px;height:20px;margin-left:3px}
.vidcap{position:absolute;left:10px;bottom:10px;background:rgba(31,61,46,.72);color:#F5EFE0;font-size:10.5px;letter-spacing:.04em;padding:4px 9px;border-radius:999px}
.hpname{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:500;color:var(--ink);line-height:1.1}
.hpsub{font-size:13px;color:var(--soft);margin:6px 0 10px}
.hpids{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pedt{width:100%;border-collapse:collapse;max-width:680px}
.pedt td{border:1px solid var(--hair);padding:9px 12px;vertical-align:middle}
.pedt b{display:block;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:500;color:var(--ink)}
.pedt span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.pedt td.gen0 b{font-size:19px;color:var(--acc)}
.rrow{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--hair);font-size:13px;color:var(--soft);max-width:680px}
.rrow:last-child{border-bottom:none}
.rrow b{color:var(--ink);font-weight:600}
.rrow .rwhen{font-size:11px;color:var(--muted);flex:0 0 auto}
.vrow{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--soft);padding:7px 0;border-bottom:1px dashed var(--hair);max-width:680px}
.vrow:last-child{border-bottom:none}
.vscore{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--goldink);flex:0 0 auto;min-width:26px}
.pricebox{background:var(--raised);border:1px solid var(--hairline);box-shadow:var(--cardshadow);border-radius:8px;padding:16px 18px}
.pricebox .pb-p{font-family:'Inter',sans-serif;font-weight:600;font-size:25px;color:var(--ink);font-variant-numeric:tabular-nums}
.pricebox .pb-band{font-size:11px;color:var(--muted);margin-bottom:12px}
.tstack{margin:12px 0;display:flex;flex-direction:column;gap:7px}
.tstack .ts{display:flex;gap:8px;font-size:12px;color:var(--soft)}
.tstack .ts i{font-style:normal;color:var(--ok);flex:0 0 auto}
.pricebox .btn{width:100%;margin-top:8px}
.sellmini{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px;cursor:pointer;transition:border-color .25s ease;margin-top:14px}
.sellmini:hover{border-color:var(--line)}
.sellmini .av{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--raised);background-size:cover;background-position:center;color:var(--soft);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:15px;flex:0 0 auto}
.sellmini b{display:block;font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:500;color:var(--ink)}
.sellmini span{display:block;font-size:11px;color:var(--muted)}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible,input:focus-visible,textarea:focus-visible,.pbtn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold)}

@media (max-width:820px){
  .flux{grid-template-columns:minmax(0,1fr)}
  .filtbtn{display:flex;width:100%}
  /* opening this inline pushed the whole page down, because the rail sits before
     the feed in the document. As a sheet it changes nothing underneath it. */
  .filters{display:none}
  .filters.open{display:flex;flex-direction:column;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:320;
    max-height:72vh;overflow-y:auto;background:var(--panel);border-top:1px solid var(--goldline);
    border-radius:16px 16px 0 0;padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -18px 44px rgba(0,0,0,.55);margin:0}
  .filters .grp{margin:0;min-width:0}
  .fsheet-h{display:flex;align-items:center;gap:12px;padding-bottom:4px}
  .filtscrim.on{display:block}
  .bar{gap:12px;padding:12px 16px}
  .wrap{padding:18px 16px 60px}
  .brand b{font-size:12px;letter-spacing:.26em}
  .brand img{height:40px}
  nav{gap:2px}
  .ivs{gap:8px}
}
@media (max-width:400px){.bar{gap:8px}}
/* login backdrop: gold jump-course line art, faint (brand layer, not content) */
#login{position:relative}
#login::before{content:"";position:absolute;inset:0;background:url('img/bg-course.webp') center/cover no-repeat;opacity:.10;pointer-events:none}
#login>*{position:relative;z-index:1}

/* ===== Desk home (broker, spec B; redesign v2 - ledger + focal demand + rail) ===== */
/* ZONE CARD: every major section of the Desk home is one clearly bounded card
   on the page background - distinct card background, hairline border, soft
   shadow, consistent 24px rhythm. Generic name, but Desk home is currently
   the only screen using it (verified by grep at spec time) - if a second
   screen wants this pattern later, scope it there rather than assuming this
   block covers it. */
.zone{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--cardshadow);padding:16px 20px 14px}
.zone+.zone,.rail-blk+.rail-blk{margin-top:24px}
.eyebrow{display:flex;align-items:baseline;gap:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--goldink);padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--hairline)}
.eyebrow .cnt{color:var(--gold);font-weight:700}
.eyebrow .spacer{flex:1}
.eyebrow a{font-size:11px;letter-spacing:.06em;text-transform:none;color:var(--goldink);white-space:nowrap}
/* the needs-you ledger: one zone, gold-tinted border, hairline-separated rows
   instead of the old dn-strip's stack of separately-gold-boxed dn-rows */
.ledger{border-color:var(--goldline);padding-bottom:4px;margin-bottom:24px}
.lrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--hairline);cursor:pointer}
.lrow:first-of-type{border-top:none}
.lrow:hover .dn-go{color:var(--gold)}
.lrow .dn-what{flex:1;min-width:0;font-size:13px;color:var(--ink);line-height:1.45}
.lrow .dn-what em{font-style:normal;color:var(--goldink);font-weight:600}
.dn-go{flex:none;font-size:11px;letter-spacing:.06em;color:var(--goldink);white-space:nowrap}
/* 2-column grid: focal demand / rail - same 24px gap as the vertical rhythm */
.dh2{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
@media (max-width:959px){.dh2{grid-template-columns:1fr}}
.blk-link{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--goldink)}
/* inner elements go flat inside a zone - the zone carries the card chrome */
.zone .mh-sum{background:transparent;border:none;box-shadow:none;padding:0}
.zone .mkcard{background:transparent;border:none;box-shadow:none;padding:2px 0}
.zone .mkcard:hover .dn-go{color:var(--gold)}
.zone .blk-link{display:inline-block;margin-top:10px}
.mh-sum .lead{font-size:13px;color:var(--ink);margin-bottom:10px}
.mh-sum .lead b{color:var(--goldink)}
.mh-mini{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--hairline);cursor:pointer}
.mh-mini:first-of-type{border-top:none}
.mh-mini .hg-img{width:32px;height:32px}
.mh-mini .nm{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.mh-mini .why{font-size:11.5px;color:var(--goldink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-mini:hover .nm{color:var(--goldink)}
.mkcard{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--hairline);border-radius:var(--r);padding:16px 18px;cursor:pointer;box-shadow:var(--cardshadow)}
.mkcard:hover{border-color:var(--goldline)}
.mk-dot{flex:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--raised);display:flex;align-items:center;justify-content:center}
.mk-dot svg{width:20px;height:20px;color:var(--gold)}
.mk-body{flex:1;min-width:0}
.mk-t{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--ink)}
.mk-s{font-size:12px;color:var(--soft);margin-top:2px}
.mk-s b{color:var(--ink)}
/* The Market mini-map: a real, live Leaflet instance built from the same
   regions[]/farms[] data as the full #s-marche map, but fully inert (no
   zoom/drag/pointer events) so the whole rail card stays one tap target to
   the full map screen. Carries the same "warm layered depth" chrome already
   ported to the live full map: sepia tile filter (light theme), frame +
   pin drop-shadows via the shared .mappin/.farmpin classes. */
.mkmap-wrap{border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;margin-bottom:12px;position:relative;cursor:pointer;
  box-shadow:0 1px 2px rgba(31,61,46,.08),0 14px 38px -16px rgba(31,61,46,.38)}
:root[data-theme="dark"] .mkmap-wrap{box-shadow:0 1px 2px rgba(0,0,0,.3),0 14px 38px -16px rgba(0,0,0,.6)}
#dhmap{height:172px;pointer-events:none}
:root[data-theme="light"] #dhmap .leaflet-tile-pane{filter:sepia(.22) saturate(.85) contrast(.97) brightness(1.01)}
#dhmap .leaflet-control-attribution{font-size:8px;opacity:.55;background:rgba(255,255,255,.6)}
:root[data-theme="dark"] #dhmap .leaflet-control-attribution{background:rgba(28,51,35,.6)}
@media (max-width:700px){
  .lrow{flex-direction:column;align-items:flex-start;gap:6px}
  .mkcard{flex-wrap:wrap}
}

/* ===== My horses merged (spec C): two-line group summary + actions row ===== */
.hg-head.mh2{align-items:flex-start}
.hg-head.mh2 .hg-chev{margin-left:auto;margin-top:6px}
.mh2-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mh2-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mh2-spec{font-size:12px;color:var(--soft)}
.mh2-man{font-size:11.5px;color:var(--goldink);font-weight:600}
.mh2-acts{display:flex;gap:18px;align-items:center;margin:12px 2px 4px}
.mh2-acts .blk-link{margin-top:0}
@media (max-width:700px){.mh2-top{gap:6px}.mh2-top .hg-count{flex-basis:100%}}