:root {
  --bg:#111010; --surface:#181614; --card:#1E1B18; --border:#2C2420;
  --gold:#C8A97E; --gold-dim:#6B5744; --text:#EDE8E0; --text-muted:#8F8478;
  --success:#4CAF6E; --danger:#CF6666; /* danger ≥4.5:1 on --card (was #C85A5A at 4.13:1 — failed AA for the small text it colors: .err, .badge.bad, .btn-danger) */
  /* Danger derivatives (2026-07-30 audit): every red wash derives from #CF6666
     (the old rgba(200,90,90,…) tints predated the F11 hue fix); danger TEXT
     sitting on a tinted bg needs the brighter tone to clear 4.5:1 (#CF6666
     measures ~4.2:1 over card+tint — fails; #D97C7C ≥5.2:1 — passes). */
  --danger-tint:rgba(207,102,102,.08); --danger-bright:#D97C7C;
  /* Type scale (2026-07-05 overhaul). Three voices, hard roles:
     display serif = titles/prices; body sans = everything readable;
     mono-caps = decorative micro-records ONLY (≤12px, never nav/buttons/
     form labels/anything the user must parse to act). */
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'Space Mono',monospace;
  --text-body:1rem;      /* paragraphs, descriptions, form help — the 16px floor */
  --text-ui:.9375rem;    /* nav links, buttons, inputs' little siblings, list meta */
  --text-sm:.875rem;     /* secondary UI text, labels, compact meta */
  --text-micro:.7rem;    /* mono micro-labels; the ceiling for mono-caps is 12px */
  --media-grad:linear-gradient(160deg,#221E1A,#15120F); /* bottle-media placeholder wash — one source, six former hardcoded copies */
}
/* --text-muted must hold ≥4.5:1 on --card (#1E1B18), not just on --bg — muted
   text sits on panels/cards at least as often as on the page wall. #8F8478 is
   ~4.7:1 on card, ~5.2:1 on bg; the previous #8A7E74 measured 4.3:1 on card. */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display)}
.mono{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.12em;text-transform:uppercase}
a{color:inherit;text-decoration:none}
button{font-family:'DM Sans',sans-serif;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:var(--font-body);background:var(--surface);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:4px;font-size:var(--text-body);width:100%;outline:none;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
input:disabled,select:disabled,textarea:disabled{color:var(--text-muted);cursor:not-allowed}
::placeholder{color:var(--text-muted);opacity:1} /* opacity .7 dropped muted below AA (2026-07-30 audit) */
option{background:var(--surface);color:var(--text)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--surface) inset;-webkit-text-fill-color:var(--text);
  caret-color:var(--text);transition:background-color 9999s ease-in-out 0s;
}
.btn-gold:focus-visible,.btn-outline:focus-visible,.btn-danger:focus-visible,.btn-text:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}

/* 1fr auto 1fr grid so the link cluster sits at the true center of the bar
   regardless of how wide the logo / signed-in controls on either side are —
   flex space-between only centered it when both sides happened to match. */
nav{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;column-gap:20px;align-items:center;padding:18px 5vw;background:rgba(17,16,16,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.logo{font-family:var(--font-display);font-size:1.6rem;font-weight:700;cursor:pointer;justify-self:start}
.logo span{color:var(--gold)}
/* Header avatar (1C): far-left account affordance, adjacent to the wordmark.
   Initials in a gold-ring circle; signed-out renders nothing (the right side
   already carries Sign in / Get started). */
.nav-left{display:flex;align-items:center;gap:14px;justify-self:start;grid-column:1}
.nav-avatar{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;border:1.5px solid var(--gold-dim);background:var(--surface);color:var(--gold);font-family:var(--font-display);font-weight:700;font-size:.8rem;cursor:pointer;padding:0;transition:border-color .15s,background .15s}
.nav-avatar:hover,.nav-avatar.active{border-color:var(--gold);background:rgba(200,169,126,.08)}
.nav-links{display:flex;gap:28px;align-items:center;grid-column:2}
.nav-links a{font-size:var(--text-ui);color:var(--text-muted);transition:color .15s;border-bottom:1px solid transparent;padding:4px 0;cursor:pointer}
.nav-links a:hover,.nav-links a.active{color:var(--text);border-bottom-color:var(--gold)}
.nav-right{display:flex;gap:16px;align-items:center;grid-column:3;justify-self:end}
.nav-right a,.nav-right button{white-space:nowrap}
/* Staff sees six links; below ~1200px the full-width gaps make the bar snug,
   so tighten them before anything is forced to wrap. */
@media(max-width:1200px){.nav-links{gap:16px}.nav-right{gap:10px}}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;padding:0}
.nav-burger span{display:block;width:22px;height:2px;background:var(--text);transition:transform .2s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 5vw 14px}
.nav-mobile.show{display:flex}
.nav-mobile a{padding:12px 0;font-size:var(--text-body);color:var(--text-muted);border-bottom:1px solid var(--border)}
.nav-mobile a:last-child{border-bottom:none}
.nav-mobile a.active{color:var(--gold)}
/* Notification bell (0045). Badge numeral is gold-dim: the nav's one full-gold
   element stays the List a Fragrance CTA (One Gold Rule). */
.nav-bell{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--text-muted);cursor:pointer;background:none;border:none;padding:0;transition:color .15s}
.nav-bell:hover{color:var(--text)}
.nav-bell-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--gold-dim);color:var(--text);font-family:var(--font-mono);font-size:.62rem;line-height:16px;text-align:center}
.notif-panel{display:none;position:absolute;top:calc(100% + 6px);right:5vw;width:min(360px,92vw);max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:60}
.notif-panel.show{display:block}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border)}
.notif-head .mono{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted)}
.notif-item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--border);padding:12px 14px;cursor:pointer;transition:background .15s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--card)}
.notif-item .notif-title{display:block;font-size:var(--text-ui);color:var(--text-muted)}
.notif-item.unread .notif-title{color:var(--text)}
.notif-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold-dim);margin-right:7px;vertical-align:2px}
.notif-item .notif-body{display:block;font-size:var(--text-sm);color:var(--text-muted);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-item .notif-time{display:block;font-size:.62rem;color:var(--text-muted);margin-top:5px;letter-spacing:.08em}
/* Messaging (§6) — inbox list + conversation thread. */
.msg-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.msg-row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background .15s}
.msg-row:last-child{border-bottom:none}
.msg-row:hover{background:var(--card)}
.msg-row-main{display:flex;align-items:baseline;gap:8px;min-width:0}
.msg-row-name{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-row.unread .msg-row-name{color:var(--gold)}
.msg-row-context{font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-row-preview{grid-column:1/2;font-size:var(--text-sm);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.msg-row-time{grid-column:2/3;grid-row:1/3;align-self:start;font-size:.68rem;letter-spacing:.06em}
.msg-thread-header{margin-bottom:16px}
.msg-thread{display:flex;flex-direction:column;gap:14px;max-height:56vh;overflow-y:auto;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.msg-bubble-row{display:flex;flex-direction:column;max-width:75%}
.msg-bubble-row.mine{align-self:flex-end;align-items:flex-end}
.msg-bubble-row:not(.mine){align-self:flex-start;align-items:flex-start}
.msg-bubble{padding:10px 14px;border-radius:14px;background:var(--card);border:1px solid var(--border);white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--text-ui)}
.msg-bubble-row.mine .msg-bubble{background:var(--gold-dim);border-color:var(--gold-dim);color:var(--text)}
.msg-bubble-meta{display:flex;align-items:center;gap:10px;margin-top:4px}
.msg-bubble-row.mine .msg-bubble-meta{flex-direction:row-reverse}
.msg-bubble-time{font-size:.62rem;letter-spacing:.06em}
.msg-report-btn{letter-spacing:.02em;text-decoration:none;padding:2px 0}
.msg-report-btn:hover{text-decoration:underline}
.msg-send-row{display:flex;gap:10px;align-items:flex-end;margin-top:14px}
.msg-send-row textarea{flex:1;resize:vertical;min-height:44px;max-height:160px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:var(--text-ui)}
.msg-send-row textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
@media (max-width:600px){
  .msg-row{grid-template-columns:1fr}
  .msg-row-time{grid-row:auto;grid-column:1/2;justify-self:start}
  .msg-bubble-row{max-width:88%}
}
/* Watchlist heart (0047): muted until SAVED — gold is reserved for the saved
   state so the affordance never competes with the card's gold hover CTA. */
.card-heart{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(17,16,16,.55);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:color .15s,transform .12s}
.card-heart:hover{color:var(--text)}
.card-heart:active{transform:scale(.88)}
.card-heart.saved{color:var(--gold)}
.card-heart.saved svg{fill:var(--gold)}
.card-unavail .card-img{opacity:.35}
.card-unavail .fname,.card-unavail .house{color:var(--text-muted)}
.detail-heart{position:static;width:44px;height:44px;flex:none}
.btn-gold{background:var(--gold);color:#111010;font-weight:500;font-size:var(--text-ui);padding:10px 22px;border-radius:4px;transition:transform .15s,box-shadow .15s;display:inline-block;text-align:center;cursor:pointer}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(200,169,126,.25)}
.btn-gold:disabled{opacity:.5;cursor:wait;transform:none}
.btn-outline{border:1px solid var(--gold);color:var(--gold);font-size:var(--text-ui);padding:10px 22px;border-radius:4px;transition:background .15s;cursor:pointer}
.btn-outline:hover{background:rgba(200,169,126,.08)}
.btn-danger{border:1px solid var(--danger);color:var(--danger);font-size:var(--text-ui);padding:10px 22px;border-radius:4px;transition:background .15s;cursor:pointer}
.btn-danger:hover{background:var(--danger-tint)}
.btn-text{color:var(--text-muted);font-size:var(--text-sm);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.btn-text:hover{color:var(--gold)}
/* Touch devices: primary controls must clear the ~44px tap-target floor.
   Desktop keeps the tighter 10px padding — pointer:coarse only. */
@media(pointer:coarse){
  .btn-gold,.btn-outline,.btn-danger{padding-top:13px;padding-bottom:13px}
  .btn-text{padding:10px 4px;display:inline-block}
  /* Nav icon cluster clears the 44px tap floor on touch devices. */
  .nav-avatar{width:44px;height:44px;font-size:.95rem}
  .nav-bell{width:44px;height:44px}
  .nav-burger{width:44px;height:44px;align-items:center}
  /* Card save-hearts too (A3) — same floor. The heart is a z-index:2 sibling
     ABOVE the card link, so the larger corner target eats into the image's
     click area by design; it can never trigger navigation. */
  .card-heart{width:44px;height:44px}
  /* Secondary interactive controls to the same 44px floor on touch. */
  .modal .mc{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .notif-item{min-height:44px}
  .msg-report-btn{min-height:44px;display:inline-flex;align-items:center;padding:0 6px}
  #a-toggle{min-height:44px;padding:10px 4px}
  .auth-toggle button{padding:10px 6px;display:inline-block}
  .toast-close{min-width:36px;min-height:36px}
  /* Money-rail expandables + row links clear the same 44px floor. */
  .money-exp summary{padding-top:12px;padding-bottom:12px}
  .me-item{padding-top:10px;padding-bottom:10px}
}

.page{display:none;animation:pageIn .2s ease-out}
.page.active{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.container{max-width:1240px;margin:0 auto;padding:0 5vw}
/* Narrow single-column pages (sell, account) — same width as the trade
   tracker, the app's established form-page measure. Replaces the per-page
   inline 680px caps that read as "condensed" next to every other page. */
.container.narrow{max-width:860px}
.sec-h{font-size:2rem;font-weight:600}
.sec-h::after{content:'';display:block;width:40px;height:2px;background:var(--gold);margin-top:10px}
.muted{color:var(--text-muted)}

.hero{padding:100px 5vw 70px;text-align:center;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(200,169,126,.07),transparent)}
.hero h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:600;line-height:1.1}
.hero p{color:var(--text-muted);margin:20px auto 34px;max-width:500px}
.hero-ctas{display:flex;gap:20px;justify-content:center;align-items:center}

.auth-wrap{max-width:520px;margin:70px auto;padding:0 5vw}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:38px}
.auth-card h1{font-size:2rem;font-weight:600;text-align:center;margin-bottom:6px}
.auth-card .sub{text-align:center;color:var(--text-muted);font-size:var(--text-body);margin-bottom:28px}
.auth-card .field{margin-bottom:18px}
.auth-card label{display:block;font-size:var(--text-sm);margin-bottom:6px;color:var(--text-muted)}
.auth-toggle{text-align:center;margin-top:20px;font-size:var(--text-ui);color:var(--text-muted)}
.auth-toggle button{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.auth-msg{display:block;overflow:hidden;max-height:0;opacity:0;padding:0 14px;margin-bottom:0;border:1px solid transparent;border-radius:4px;font-size:var(--text-sm);transition:max-height .25s ease,opacity .25s ease,padding .25s ease,margin-bottom .25s ease}
.auth-msg.show{max-height:280px;opacity:1;padding:10px 14px;margin-bottom:18px}
.auth-msg.err{background:var(--danger-tint);border-color:var(--danger);color:var(--danger-bright)}
.auth-msg.ok{background:rgba(76,175,110,.1);border-color:var(--success);color:var(--success)}
@media(prefers-reduced-motion:reduce){.auth-msg{transition:none}}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;margin-top:30px}
.grid>.card{max-width:340px} /* card cap for over-wide tracks (1-col/2-col windows) — a max in minmax() would change auto-fill's column count */
.card{background:var(--card);border:1px solid var(--border);border-radius:6px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.card-link{display:block;color:inherit;text-decoration:none}
.card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 28px rgba(200,169,126,.12)}
.card-img{aspect-ratio:3/4;background:var(--media-grad);display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Designed fallback for any user-content image that fails to load (404,
   expired signed URL): the container gets .img-err (via each <img>'s onerror,
   which removes the broken node) and paints the brand bottle glyph — the
   browser's broken-image icon must never appear. */
.img-err{background:var(--media-grad) !important}
.img-err::before{content:'';display:block;width:100%;height:100%;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 60 100' fill='none' stroke='%238F8478' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='23' y='5' width='14' height='11' rx='2'/%3E%3Crect x='26' y='16' width='8' height='7'/%3E%3Cpath d='M14 31 Q14 23 22 23 L38 23 Q46 23 46 31 L46 88 Q46 96 38 96 L22 96 Q14 96 14 88 Z'/%3E%3Cline x1='14' y1='44' x2='46' y2='44'/%3E%3C/svg%3E") center/32% no-repeat;opacity:.4}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img svg{width:54px;opacity:.35}
.card-body{padding:18px}
.card .house{color:var(--gold);margin-bottom:4px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.card .fname{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;line-height:1.2;margin-bottom:6px}
.card .meta{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:14px}
.card-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);padding-top:12px}
.card-hover-cta{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent);color:var(--text);font-size:.78rem;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.card:hover .card-hover-cta{opacity:1;transform:translateY(0)}
.price{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--gold);font-variant-numeric:lining-nums}
.pill{font-size:.68rem;padding:3px 10px;border-radius:20px;border:1px solid var(--text-muted);color:var(--text-muted)}
.pill.gold{color:var(--gold);border-color:var(--gold)}

.market{padding-top:60px;padding-bottom:90px} /* top/bottom only — .container's 0 5vw horizontal padding must survive */
.market-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.market-search{flex:1;min-width:240px;max-width:420px}
.filter-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.filter-row select,.filter-row input{width:auto;min-width:150px;font-size:var(--text-sm);padding:9px 12px}
.result-count{font-size:var(--text-sm);color:var(--text-muted);margin-top:14px}
/* Compact pager + review stars keep their tight desktop padding via class (not
   inline style) so the coarse-pointer block below can actually reach them. */
.pager-btn{padding:6px 12px}
.pager-num{padding:6px 12px;min-width:40px}
.rv-star{background:none;border:none;cursor:pointer;font-size:1.7rem;line-height:1;padding:4px;color:var(--text-muted)}
/* Coarse-pointer overrides MUST come after these three base rules (not in the
   early global @media(pointer:coarse) block above) — a same-specificity rule
   earlier in source order loses to one of these three's `padding` shorthand
   regardless of the media condition. Confirmed live: .pager-btn rendered at
   33.5px tall on an emulated mobile viewport despite an (unreachable) coarse
   override claiming 12px 16px padding. */
@media(pointer:coarse){
  .pager-btn{padding:12px 16px}
  .pager-num{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:6px 12px}
  .rv-star{padding:10px}
}
/* Screen-reader-only text — for disclaimers/context that sighted users get
   from layout or hover but AT users would otherwise miss entirely. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Skip link — hidden above the viewport until keyboard focus lands on it.
   z-index 150 slots between nav (100) and modal (300) in the semantic scale:
   it must clear the sticky nav, and a trapped modal correctly outranks it.
   #app carries tabindex="-1" as its focus target; the router intercepts the
   click (an in-page #app anchor would otherwise fight the hash router). */
.skip-link{position:fixed;left:12px;top:-60px;z-index:150;background:var(--card);color:var(--gold);border:1px solid var(--gold);border-radius:4px;padding:12px 18px;font-size:var(--text-ui);transition:top .15s}
.skip-link:focus{top:12px}
#app:focus{outline:none}
.empty-state{grid-column:1/-1;text-align:center;padding:90px 0;color:var(--text-muted)}
.es-tag{color:var(--gold);margin-bottom:14px} /* unscoped from .empty-state — trust.js's hero kicker uses it too (2026-07-30 audit) */
.empty-state h3{font-size:1.7rem;color:var(--text);margin-bottom:10px}
.empty-state p{max-width:400px;margin:0 auto 22px;font-size:var(--text-body)}
.loader{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:70px 0;color:var(--text-muted);font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.loader::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);animation:loaderPulse 1.3s ease-in-out infinite}
@keyframes loaderPulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.loader::before{animation:none;opacity:.85}}

/* Skeleton loading — shape-matched placeholders. The .skeleton container runs a
   subtle gold-tinted shimmer sweep over the existing --card surface; the inner
   blocks (.sk-*) are solid --surface fills sized to mirror real content so data
   arrival causes no layout shift. Reuses .card/.order-row/.detail-layout/.panel
   for exact outer dimensions. Under reduced motion the sweep is dropped for a
   flat muted block. */
.skeleton{position:relative;overflow:hidden}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(200,169,126,.06),transparent);animation:skShimmer 1.4s ease-in-out infinite}
@keyframes skShimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.skeleton::after{animation:none}.skeleton .sk-line,.skeleton .sk-img,.skeleton .sk-badge,.skeleton .sk-price,.skeleton .sk-avatar,.sk-img.skeleton{opacity:.7}}
.sk-line{height:12px;border-radius:4px;background:var(--surface);margin:8px 0}
/* Stripe card mount targets: shimmer placeholder until the cross-origin field
   paints (Stripe's 'ready' event) — a real skeleton CHILD would be wiped the
   instant mount() clears the node, so this rides on a pseudo-element and a
   class the JS removes on ready. min-height matches the mounted field so the
   iframe's arrival causes no layout shift. */
.card-el-loading{position:relative;min-height:44px}
.card-el-loading::before{content:'';position:absolute;left:12px;right:12px;top:13px;height:18px;border-radius:4px;background:var(--border);opacity:.55;animation:loaderPulse 1.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.card-el-loading::before{animation:none}}
.sk-line.sk-sm{height:10px}
.sk-line.w-40{width:40%}.sk-line.w-60{width:60%}.sk-line.w-80{width:80%}
.sk-img{aspect-ratio:3/4;background:var(--surface)}
.sk-badge{width:88px;height:24px;border-radius:20px;background:var(--surface)}
.sk-price{width:64px;height:20px;border-radius:4px;background:var(--surface)}
.sk-avatar{border-radius:50%;background:var(--surface);flex:none}

.detail{padding-top:60px;padding-bottom:90px} /* top/bottom only — .container's 0 5vw horizontal padding must survive (same fix .market carries) */
.detail-layout{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:52px;align-items:start}
.detail-img{aspect-ratio:3/4;background:linear-gradient(160deg,#241F1A,#141110);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.detail-img img{width:100%;height:100%;object-fit:cover}
.detail-img svg{width:100px;opacity:.3}
.detail-info .house{color:var(--gold);margin-bottom:8px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.detail-info h1{font-size:2.6rem;font-weight:600;line-height:1.1;margin-bottom:14px}
.detail-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:6px;margin-bottom:24px}
.spec .sl{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-family:'Space Mono',monospace;margin-bottom:4px}
.spec .sv{font-size:var(--text-body)}
.fill-bar{height:5px;background:var(--border);border-radius:4px;margin-top:8px;overflow:hidden}
.fill-bar div{height:100%;background:var(--gold)}
.detail-desc{color:var(--text-muted);font-size:var(--text-body);margin-bottom:26px;max-width:560px;white-space:pre-wrap}
.detail-price{font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:600;color:var(--gold);margin-bottom:24px}
/* Buyer-facing market reference under the ask (feature #1). Pulls up under the
   price; muted gold, matching the sell-page comps source line. */
.price-context{margin:-16px 0 20px;font-size:.7rem;letter-spacing:.05em;color:var(--text-muted)}
.detail-ctas{display:flex;gap:14px;align-items:center;margin-bottom:28px;flex-wrap:wrap}
.escrow-banner{display:flex;gap:12px;align-items:center;padding:16px 18px;border:1px solid var(--gold-dim);border-radius:6px;background:rgba(200,169,126,.05);font-size:var(--text-ui);color:var(--text-muted);max-width:560px}
.escrow-banner .ic{color:var(--gold)}

.std-page{padding-top:60px;padding-bottom:90px}
.std-page .sec-h{margin-bottom:8px}
.payout-card,.panel{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:30px;max-width:680px;margin-top:24px}
.panel h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600;line-height:1.2;margin-bottom:14px}
.panel-tag{display:block;color:var(--gold);margin-bottom:6px}
.ledger-panel{display:flex;flex-direction:column;padding:0}
.ledger-row{display:flex;gap:22px;align-items:flex-start;padding:30px 32px;border-bottom:1px solid var(--border)}
.ledger-row:last-child{border-bottom:none}
.ledger-row-icon{color:var(--gold);flex-shrink:0;padding-top:3px}
.ledger-row-body{flex:1;min-width:0}
.ledger-row-tag{color:var(--gold);margin-bottom:8px}
.ledger-row-body h3{font-size:1.2rem;font-weight:600;margin-bottom:6px}
.ledger-row-body p{font-size:var(--text-body)}
@media(max-width:700px){.ledger-row{padding:24px 20px}}
.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-family:'Space Mono',monospace}
.badge.completed,.badge.ok{color:var(--success);border:1px solid var(--success)}
.badge.bad{color:var(--danger);border:1px solid var(--danger)}
.badge.neutral{color:var(--gold);border:1px solid var(--gold)}
.badge.verified{color:var(--gold);border:1px solid var(--gold);background:rgba(200,169,126,.12);font-weight:700}
.order-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:12px;transition:border-color .15s}
.order-row:hover{border-color:var(--gold)}
.order-row .oi{font-size:var(--text-sm);color:var(--text-muted)}
.order-row .on{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600}
.order-row .price{font-size:1.2rem}
.order-row .or-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
@media(max-width:480px){.order-row{flex-direction:column;align-items:flex-start}.order-row .or-right{flex-direction:row;align-items:center;gap:12px}}
/* 2026-07-31 card upgrade: stretched-link card (thumb, era chip, next-step
   line, tracking links, mini stepper). The whole card clicks through via
   .or-link::after; tracking anchors float above it on their own z layer. */
.order-row{position:relative}
.or-link{text-decoration:none;color:inherit}
.or-link::after{content:'';position:absolute;inset:0;z-index:1}
.or-link:focus-visible{outline:none}
.or-link:focus-visible::after{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.or-thumb{width:44px;height:56px;flex:none;align-self:flex-start;border-radius:4px;overflow:hidden;background:var(--media-grad);border:1px solid var(--border)}
.or-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.or-main{flex:1;min-width:0}
.or-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.era-chip{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);border-radius:4px;padding:4px 8px;white-space:nowrap}
/* Structured Q&A (DECISIONS #14): quiet spec-block — answered pairs read like
   an extended spec table; the asker is never rendered anywhere. */
.qa-block{margin-top:28px;padding-top:18px;border-top:1px solid var(--border)}
.qa-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed var(--border);font-size:var(--text-sm)}
.qa-row:last-child{border-bottom:none}
.qa-row .qa-q{color:var(--text-muted)}
.qa-row .qa-a{color:var(--text);text-align:right;flex:none}
.qa-row .qa-state{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);flex:none;align-self:center}
.qa-open{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:9px 0;border-bottom:1px dashed var(--border)}
.qa-open .qa-q{flex:1 1 100%;font-size:var(--text-sm);color:var(--text)}
.qa-open .qa-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qa-open select,.qa-open input{min-width:140px}
.qa-open .err{flex-basis:100%}
@media(pointer:coarse){.qa-open select,.qa-open input{min-height:44px}}
.or-next{font-size:var(--text-sm);color:var(--text);margin-top:4px}
.or-next .or-who{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-right:8px}
.or-next .or-who.you{color:var(--gold)}
.or-tracks{display:flex;gap:4px 16px;flex-wrap:wrap;margin-top:4px;font-size:var(--text-sm);color:var(--text-muted)}
.or-track{position:relative;z-index:2}
a.or-track{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
a.or-track:hover{color:var(--gold)}
.or-track .mono{font-size:.68rem;letter-spacing:.02em}
.or-steps{display:flex;gap:3px;margin-top:10px;max-width:220px}
/* Non-text contrast (2026-08-02 audit): done fill uses the trust-ladder ink
   (#98865E, ≥3:1 on card) instead of gold-dim (2.5:1); terminal bars drop the
   half-opacity wash. Pending stays gold-dim — better than the old border fill,
   residual gap noted in DEFERRED. */
.or-steps .os{flex:1;height:3px;border-radius:2px;background:var(--gold-dim)}
.or-steps .os.done{background:#98865E}
.or-steps .os.cur{background:var(--gold)}
.or-steps.terminal{height:3px;border-radius:2px}
.or-steps.terminal.ok{background:var(--success)}
.or-steps.terminal.bad{background:var(--danger)}
@media(max-width:480px){.or-thumb{display:none}}

.tracker{max-width:860px;margin:0 auto}
.tracker .topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:6px}

.stepper-wrap{margin:34px 0 14px}
.stepper{display:flex;gap:4px}
.step{flex:1;min-width:0;text-align:center;font-family:'Space Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);position:relative;padding-top:26px}
.step-label{display:block;overflow-wrap:break-word}
.step-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--border);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:background-color .2s,border-color .2s,box-shadow .2s;z-index:1}
.step:not(:first-child)::before{content:'';position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--border);z-index:0;transition:background-color .3s}
.step.done .step-dot,.step.current .step-dot{background:var(--gold);border-color:var(--gold)}
.step.current .step-dot{box-shadow:0 0 0 4px rgba(200,169,126,.22)}
.step.exception .step-dot{background:var(--danger);border-color:var(--danger);border-radius:3px}
.step.done:not(:first-child)::before,.step.current:not(:first-child)::before{background:var(--gold)}
.step.exception:not(:first-child)::before{background:var(--danger)}
.step.done,.step.current,.step.exception{color:var(--text)}
.step.exception{color:var(--danger)}

.stepper-compact{display:none;align-items:center;gap:12px}
.stepper-compact .sc-count{color:var(--text-muted);white-space:nowrap;font-size:.68rem}
.stepper-compact .sc-rail{flex:1;height:2px;background:var(--border);border-radius:2px;overflow:hidden}
.stepper-compact .sc-fill{height:100%;width:100%;background:var(--gold);transform-origin:left;transition:transform .3s ease}
.stepper-compact .sc-fill.exception{background:var(--danger)}
.stepper-compact .sc-label{color:var(--text);white-space:nowrap;font-size:.68rem}
.stepper-compact .sc-label.exception{color:var(--danger)}
@media(max-width:860px){.stepper{display:none}.stepper-compact{display:flex}}
@media(prefers-reduced-motion:reduce){.step-dot,.step::before,.sc-fill{transition:none}}
.money-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.money-box{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:center}
.money-box .ml{font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-family:var(--font-mono)}
.money-box .mv{font-size:1.3rem;font-family:'Cormorant Garamond',serif;font-weight:600;margin-top:4px;font-variant-numeric:lining-nums}
.action-bar{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}
.confidence-center{margin:26px 0;background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.confidence-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:22px 24px;border-bottom:1px solid var(--border)}
.confidence-header h2{font-size:1.55rem;font-weight:600;margin:3px 0 0}
.confidence-kicker{font-size:.62rem;letter-spacing:.14em;color:var(--text-muted)}
.confidence-rails{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--border)}
.confidence-rail{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:19px 22px;min-height:132px}
.confidence-rail:nth-child(odd){border-right:1px solid var(--border)}
.confidence-rail:nth-child(-n+2){border-bottom:1px solid var(--border)}
.confidence-rail-index{font-size:.62rem;letter-spacing:.1em;color:var(--gold);padding-top:2px}
.confidence-rail-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted)}
.confidence-rail h3{font-family:var(--font-body);font-size:1rem;font-weight:600;line-height:1.35;margin:6px 0}
.confidence-rail p{font-size:var(--text-sm);line-height:1.55;color:var(--text-muted);margin:0}
.confidence-rail[data-tone="success"] h3{color:var(--success)}
.confidence-rail[data-tone="danger"] h3,.confidence-rail[data-tone="attention"] h3{color:var(--danger-bright)}
.confidence-next{padding:23px 24px;background:rgba(200,169,126,.045);border-bottom:1px solid var(--border)}
.confidence-next-copy{max-width:650px}
.confidence-next h3{font-size:1.3rem;font-weight:600;margin:4px 0 6px}
.confidence-next p{font-size:var(--text-ui);line-height:1.55;color:var(--text-muted);margin:0}
.confidence-next-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 0}
.confidence-next-meta div{border-top:1px solid var(--border);padding-top:10px}
.confidence-next-meta dt{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.confidence-next-meta dd{font-size:var(--text-ui);font-weight:500;margin:4px 0 0}
.confidence-actions{margin:18px 0 0}
.confidence-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);border-bottom:1px solid var(--border)}
.confidence-inspection,.confidence-help{padding:20px 24px}
.confidence-inspection{border-right:1px solid var(--border)}
.confidence-inspection h3{font-family:var(--font-body);font-size:1rem;font-weight:600;margin:6px 0}
.confidence-inspection p{font-size:var(--text-sm);color:var(--text-muted);margin:3px 0}
.confidence-help{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.confidence-problem{padding:8px 0;text-align:left}
.confidence-history-wrap{padding:22px 24px 24px}
.confidence-history-wrap>h3{font-family:var(--font-body);font-size:1rem;font-weight:600;margin:5px 0 16px}
.confidence-history{list-style:none;margin:0;padding:0}
.confidence-event{position:relative;display:grid;grid-template-columns:14px minmax(0,1fr);gap:11px;padding:0 0 18px}
.confidence-event:last-child{padding-bottom:0}
.confidence-event:not(:last-child)::after{content:'';position:absolute;left:5px;top:11px;bottom:0;width:1px;background:var(--border)}
.confidence-event-dot{position:relative;z-index:1;width:11px;height:11px;margin-top:4px;border:2px solid var(--gold);border-radius:50%;background:var(--card)}
.confidence-event-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.confidence-event-head strong{font-size:var(--text-sm);font-weight:600}
.confidence-event-head time{flex:none;font-size:.58rem;letter-spacing:.06em;color:var(--text-muted)}
.confidence-event p{font-size:var(--text-sm);line-height:1.5;color:var(--text-muted);margin:3px 0 0}
.confidence-history-state{font-size:var(--text-sm);color:var(--text-muted);padding:14px 0}
.confidence-history-error{display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--danger-bright)}
@media(max-width:700px){
  .confidence-header{padding:19px 18px;align-items:flex-start}
  .confidence-header .badge{max-width:46%;text-align:center}
  .confidence-rails{grid-template-columns:1fr}
  .confidence-rail{min-height:0;padding:17px 18px}
  .confidence-rail:nth-child(odd){border-right:none}
  .confidence-rail:nth-child(-n+3){border-bottom:1px solid var(--border)}
  .confidence-next{padding:20px 18px}
  .confidence-next-meta{grid-template-columns:1fr;gap:12px}
  .confidence-detail-grid{grid-template-columns:1fr}
  .confidence-inspection,.confidence-help{padding:18px}
  .confidence-inspection{border-right:none;border-bottom:1px solid var(--border)}
  .confidence-history-wrap{padding:20px 18px 22px}
  .confidence-event-head{display:block}
  .confidence-event-head time{display:block;margin-top:3px}
  .confidence-history-error{align-items:flex-start;flex-direction:column}
  .confidence-actions>*{width:100%}
}
.timeline{margin-top:30px;border-left:2px solid var(--border);padding-left:20px}
.tl-item{position:relative;padding:8px 0;font-size:.82rem;color:var(--text-muted)}
.tl-item::before{content:'';position:absolute;left:-26px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.tl-item b{color:var(--text);font-weight:500}
.note-banner{padding:14px 16px;border-radius:8px;font-size:var(--text-ui);margin:16px 0;border:1px solid}
.note-banner.good{border-color:var(--success);background:rgba(76,175,110,.08);color:var(--success)}
.note-banner.bad{border-color:var(--danger);background:var(--danger-tint);color:var(--danger-bright)}
.note-banner.info{border-color:var(--gold-dim);background:rgba(200,169,126,.05);color:var(--text-muted)}
.note-banner.gold{border-color:var(--gold);background:rgba(200,169,126,.08);color:var(--text)}

/* Account rail + pane (item 5). Rail links speak the ledger label voice; the
   active entry is gold text only (no side-stripe — ../docs/design/DESIGN.md bans colored
   border accents). Below 768px the rail flattens into a horizontal
   scrollable tab row above the pane. */
.acct-layout{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:start;margin-top:24px}
.acct-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:90px}
/* Rail entries are NAV, not ledger records — body face, normal case (the
   mono-caps voice is capped at decorative micro-labels; nav is banned). */
.acct-rail a{font-family:var(--font-body);font-size:var(--text-ui);color:var(--text-muted);padding:10px 12px;border-radius:4px;text-decoration:none;transition:color .15s}
@media(pointer:coarse){.acct-rail a{padding:12px}}
.acct-rail a:hover{color:var(--text)}
.acct-rail a.active{color:var(--gold);font-weight:500;background:rgba(200,169,126,.06)}
.acct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}
.acct-stats a{text-decoration:none}
.acct-stats .money-box{height:100%;transition:border-color .15s}
.acct-stats a:hover .money-box{border-color:var(--gold)}
@media(max-width:768px){
  .acct-layout{grid-template-columns:1fr;gap:18px}
  .acct-rail{position:static;flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:6px;border-bottom:1px solid var(--border)}
  .acct-rail a{white-space:nowrap}
}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:300;padding:20px}
html.modal-open{overflow:hidden} /* page scroll locks behind the active modal */
.modal-bg.show{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:30px;max-width:460px;width:100%;max-height:92vh;overflow:auto;position:relative}
.modal h3{font-size:1.6rem;margin-bottom:8px}
.modal .mc{position:absolute;top:10px;right:12px;font-size:1.4rem;color:var(--text-muted);cursor:pointer;line-height:1;background:none;border:none;padding:6px 10px;border-radius:4px}
.modal .mc:hover{color:var(--text)}

#toast-root{position:fixed;top:20px;right:20px;z-index:400;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.toast{position:relative;display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--gold);padding:12px 14px 12px 22px;border-radius:6px;font-size:var(--text-ui);opacity:0;transform:translateX(40px);transition:opacity .3s,transform .3s;max-width:90vw;pointer-events:auto}
.toast.show{opacity:1;transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}
.toast.err{border-color:var(--danger);color:var(--danger)}
.toast-msg{flex:1}
.toast-close{flex:none;background:none;border:none;color:var(--text-muted);font-size:1.15rem;line-height:1;cursor:pointer;padding:2px 6px;border-radius:4px;transition:color .15s}
.toast-close:hover{color:var(--text)}
.toast.err .toast-close{color:var(--danger)}
@media(prefers-reduced-motion:reduce){.page{animation:none}}

footer{border-top:1px solid var(--border);padding:46px 5vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
footer .tagline{color:var(--text-muted);font-family:'Cormorant Garamond',serif;font-style:italic;margin-top:4px}

@media(max-width:900px){.detail-layout{grid-template-columns:1fr}.money-grid{grid-template-columns:1fr}}
@media(max-width:768px){.nav-links{display:none}.nav-burger{display:flex}.nav-right{gap:10px}.nav-sell-btn,.nav-support-link{display:none}.hero{padding:70px 5vw 50px}}
/* Signed-out 360px: Sign in + Get started + burger overflowed the bar by 32px,
   pushing the burger off-viewport (2026-08-02 audit L1). Tighten, don't hide. */
@media(max-width:480px){
  nav{padding:14px 12px;column-gap:8px}
  .nav-right{gap:8px}
  .nav-right .btn-gold{padding:9px 12px;font-size:var(--text-sm)}
}

/* ── rebuild-only additions (UI the single-file original didn't have): same tokens/fonts ── */
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--text-sm);margin-bottom:6px;color:var(--text-muted)}
.profile-hero{background:linear-gradient(160deg,var(--surface),var(--bg));border-bottom:1px solid var(--border);padding:56px 0 40px}
.avatar{border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.avatar-initials{background:var(--gold);color:#111010;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-weight:700;box-shadow:0 0 0 3px var(--bg)}
.upload-box{border:1.5px dashed var(--border);border-radius:6px;padding:28px;text-align:center;cursor:pointer;color:var(--text-muted);margin:14px 0;transition:border-color .15s,color .15s}
.upload-box:hover,.upload-box:focus-visible{border-color:var(--gold);color:var(--text)}
.combo-list{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:4px;max-height:240px;overflow:auto;margin-top:2px}
.combo-item{padding:9px 12px;cursor:pointer;font-size:var(--text-ui)}
@media(pointer:coarse){.combo-item{padding:12px}}
.combo-item:hover,.combo-item.hl{background:var(--card)}
.combo-empty{padding:9px 12px;color:var(--text-muted);font-size:var(--text-ui)}
.row{display:flex;gap:12px}.row>*{flex:1}
@media(max-width:600px){.row{flex-direction:column;gap:0}}
.err{color:var(--danger);font-size:var(--text-sm);min-height:16px;margin-top:4px}
/* gap: at 375px "Buyer protection & authentication fee" wraps to two lines and
   its label box reached the amount with zero space between them. The gap keeps
   a readable channel on every money-row site (payment modal, receipt, preview);
   the amount stays flush right and never shrinks — only the label wraps. */
.money-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:var(--text-ui)}
.money-row .mono{flex:none}
.money-row.total{border-top:1px solid var(--border);margin-top:6px;padding-top:11px;font-weight:500;color:var(--text)}
/* Fee-breakdown VALUES: mono for tabular alignment, but sized to be read —
   these are numbers the user must parse before paying, not micro-records.
   Overrides the .mono default (11.2px tracked caps) at every money-row site. */
.money-row .mono{font-size:var(--text-ui);letter-spacing:.02em;text-transform:none;font-variant-numeric:lining-nums}
/* Protected-total preview (components/fee-table.js). A supporting note under
   a breakdown — never the headline, so it stays muted and small. */
.fee-note{font-size:.8125rem;margin:10px 0 0;line-height:1.5}
/* Progressive-disclosure form used on the listing page: the total is the only
   line visible at rest, the ledger opens beneath it. Borrows .receipt-exp's
   +/− affordance so the two expandables read as one idiom, but keeps the
   summary at body scale — this one carries a price the buyer must actually
   read, not a section label. */
.fee-disclosure{border:1px solid var(--border);border-radius:6px;padding:12px 14px;margin:0 0 20px;max-width:560px;background:var(--surface)}
.fee-disclosure summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;cursor:pointer;list-style:none;padding:2px 0}
.fee-disclosure summary::-webkit-details-marker{display:none}
.fee-disclosure summary::after{content:'+';font-family:var(--font-mono);color:var(--text-muted);flex:none;align-self:center}
.fee-disclosure[open] summary::after{content:'−'}
.fee-disclosure summary:hover .fee-sum-label{color:var(--gold)}
.fee-disclosure summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.fee-sum-label{font-size:var(--text-ui);color:var(--text-muted)}
.fee-sum-total{font-size:var(--text-ui);color:var(--text);font-weight:500;letter-spacing:.02em;text-transform:none;font-variant-numeric:lining-nums}
.fee-disclosure-body{border-top:1px solid var(--border);margin-top:10px;padding-top:4px}
@media(max-width:600px){.fee-disclosure summary{min-height:44px;align-items:center}}
/* Trades dashboard panel (1A). Summary rail beside the list ≥1024px, stacked
   above it below. Panel is one ledger card: hairline-divided sections, serif
   micro-headings, mono kickers — no wall of stat cards. */
.dash-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:24px}
@media(min-width:1024px){.dash-layout{grid-template-columns:320px minmax(0,1fr);align-items:start}}
.dash-panel{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.dash-sec{padding:20px 22px;border-bottom:1px solid var(--border)}
.dash-sec:last-child{border-bottom:none}
.dash-sec h3{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin:2px 0 12px}
.dash-act{display:block;padding:10px 12px;margin:0 -12px;border-radius:6px;text-decoration:none;transition:background .15s}
.dash-act:hover{background:rgba(200,169,126,.06)}
.dash-act .da-name{display:block;font-size:var(--text-ui);font-weight:500;color:var(--text)}
.dash-act .da-do{display:block;font-size:var(--text-sm);color:var(--gold);margin-top:2px}
/* Getting-started checklist — the dashboard's zero-trade activation path. */
.gs-list{margin-top:2px}
.gs-step{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:0 -12px;border-radius:6px;text-decoration:none;font-size:var(--text-ui);color:var(--text);transition:background .15s}
@media(pointer:coarse){.gs-step{padding:12px}}
a.gs-step:hover{background:rgba(200,169,126,.06)}
.gs-mark{flex:0 0 auto;width:18px;height:18px;border:1px solid var(--gold-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;color:var(--gold)}
.gs-step.done .gs-mark{border-color:var(--gold);background:rgba(200,169,126,.12)}
.gs-step.done .gs-label{color:var(--text-muted)}
.gs-label{flex:1;min-width:0}
.gs-go{color:var(--gold)}
.gs-tag{font-size:.6rem;letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase}
.dash-flow{display:flex;flex-wrap:wrap;gap:6px 14px}
/* Pipeline chips stay ledger-voice (they mirror the locked stepper's stage
   vocabulary — records that happen to filter), but at the interactive floor,
   not decoration size (2026-08-02 audit A6). */
.dash-flow .df-step{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.dash-flow .df-step.zero{color:var(--text-muted)} /* token-only dimming — opacity stacking broke AA (2026-07-30) */
.dash-flow .df-n{font-family:var(--font-mono);color:var(--gold)}
.dash-flow .df-step.zero .df-n{color:var(--text-muted)}
.dash-flow .df-step.exc{color:var(--danger)}
.dash-flow .df-step.exc .df-n{color:var(--danger)}
/* A3a: nonzero chips are buttons that filter the list to that stage. */
button.df-btn{background:none;border:1px solid transparent;border-radius:4px;padding:4px 6px;margin:-4px -6px;cursor:pointer}
button.df-btn:hover{border-color:var(--gold-dim)}
button.df-btn.on{border-color:var(--gold);background:rgba(200,169,126,.08)}
button.df-btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:.62rem}
.filter-bar>.mono{color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase}
.filter-bar .df-step{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text);border:1px solid var(--gold);border-radius:4px;padding:4px 8px;background:rgba(200,169,126,.08)}
.filter-bar .df-n{font-family:var(--font-mono);color:var(--gold)}
/* Verbal action controls are body voice, not mono-caps — the token rule bans
   mono from anything the user must parse to act (2026-08-02 audit A6). */
.filter-clear{background:none;border:none;color:var(--text-muted);font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;padding:8px;min-height:32px;text-decoration:underline;text-underline-offset:3px}
.filter-clear:hover{color:var(--gold)}
/* A3b tab controls: reuse the .filter-row control sizing, tighter to the tabs. */
.trade-controls{margin:14px 0 16px}
.trade-controls input[type="search"]{flex:1;min-width:180px}
/* A3c event timelines: rail 04 expandables + per-card history drawers, both
   feeding off the same lazy trade_events loader. */
.act-exp summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;font-size:var(--text-sm);cursor:pointer;list-style:none;color:var(--text)}
.act-exp summary::-webkit-details-marker{display:none}
.act-exp summary::after{content:'+';font-family:var(--font-mono);color:var(--text-muted);flex:none}
.act-exp[open] summary::after{content:'−'}
.act-exp .ae-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-exp:hover .ae-name{color:var(--gold)}
.act-exp .ae-time{font-size:.62rem;letter-spacing:.08em;color:var(--text-muted)}
.tl-body{padding:2px 0 8px;border-bottom:1px solid var(--border)}
.tl-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;font-size:var(--text-sm)}
.tl-row b{font-weight:600;color:var(--text)}
.tl-row .tl-note{display:block;color:var(--text-muted);font-size:.78rem}
.tl-row .tl-meta{flex:none;font-size:.62rem;letter-spacing:.06em;color:var(--text-muted)}
.tl-none{font-size:var(--text-sm);margin:4px 0}
.or-hist{position:relative;z-index:2;background:none;border:none;color:var(--text-muted);font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;padding:8px 0 0;margin-top:2px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
.or-hist:hover{color:var(--gold)}
.or-drawer{border-bottom:none;border-top:1px dashed var(--border);margin-top:6px;position:relative;z-index:1}
@media(pointer:coarse){
  .or-hist{padding:12px 12px 12px 0}
  .filter-clear{min-height:44px}
  button.df-btn{padding:10px 8px;margin:-10px -8px;min-height:44px}
  .act-exp summary,.receipt-exp summary,.money-exp summary{min-height:44px}
  .filter-row select,.filter-row input{min-height:44px}
  .view-toggle button{min-height:44px}
  .era-chip{min-height:44px;display:inline-flex;align-items:center}
}
/* Keyboard focus on the summary expandables joins the global gold ring. */
.act-exp summary:focus-visible,.receipt-exp summary:focus-visible,.money-exp summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
/* A3d saved tab: card + saved-date caption as one grid cell. */
.saved-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.saved-cell .card{flex:1}
.saved-when{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-left:2px}
/* A3e receipt block (trade page) + print isolation. */
.receipt-exp summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;color:var(--text-muted);font-size:.7rem;padding:2px 0}
.receipt-exp summary::-webkit-details-marker{display:none}
.receipt-exp summary::after{content:'+';font-family:var(--font-mono);color:var(--text-muted);flex:none}
.receipt-exp[open] summary::after{content:'−'}
.receipt-exp summary:hover{color:var(--gold)}
.rc-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:14px 0 4px;flex-wrap:wrap}
.rc-brand{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:600}
.rc-brand span{color:var(--gold)}
.rc-id{font-size:.62rem;letter-spacing:.06em;color:var(--text-muted);word-break:break-all}
.rc-item{font-family:'Cormorant Garamond',serif;font-size:1.15rem;margin:2px 0 10px}
.rc-era{font-size:.6rem;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase}
.rc-dates{margin-top:12px;border-top:1px dashed var(--border);padding-top:8px}
.rc-date{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-sm);color:var(--text-muted);padding:2px 0}
.rc-date .mono{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}
.rc-ref{margin-top:10px;font-size:.62rem;color:var(--text-muted);word-break:break-all}
/* AC3 trust ladder bar. */
.tier-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.tier-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.tier-rate{font-size:.62rem;letter-spacing:.08em;color:var(--text-muted)}
.tier-bar{display:flex;gap:4px;margin-top:10px}
.tb-seg{flex:1;height:6px;border-radius:3px;background:var(--surface)}
.tb-seg.on{background:var(--gold);opacity:.85}
/* AC2 fees at a glance. */
.fee-list{margin:10px 0 0 20px;display:flex;flex-direction:column;gap:8px}
.fee-list li{font-size:var(--text-sm);color:var(--text-muted);line-height:1.5}
.fee-list li b{color:var(--text);font-weight:600}
/* M6 freshness: a vanished listing eases out, no label, no error. */
.card-fade{opacity:0;transform:scale(.97);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
@media(prefers-reduced-motion:reduce){.card-fade{transition:none}}
/* M4 house index + recently-viewed strips. */
.house-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.house-strip:empty{margin-top:0}
.hs-label{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.hs-chip.on{border-color:var(--gold);color:var(--gold)}
#rv-strip{margin-top:36px}
#rv-strip:empty{margin-top:0}
.rv-row{display:flex;gap:12px;overflow-x:auto;padding:10px 0 6px;scrollbar-width:thin}
.rv-item{flex:none;display:flex;flex-direction:column;gap:4px;width:120px;text-decoration:none;color:var(--text)}
.rv-item:hover .rv-name{color:var(--gold)}
.rv-thumb{width:120px;height:90px;border-radius:6px;overflow:hidden;background:var(--media-grad);border:1px solid var(--border)}
.rv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rv-name{font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-price{font-size:.68rem;color:var(--text-muted)}
/* M3 quick view: card trigger + modal media. */
/* Scrim at .92 + full-ink label: the .82/muted pairing failed 4.5:1 over
   bright listing photos (2026-08-02 audit). */
.card-qv{position:absolute;top:12px;left:12px;z-index:2;background:rgba(17,16,16,.92);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;cursor:pointer;opacity:0;transition:opacity .15s}
.card:hover .card-qv,.card-qv:focus-visible{opacity:1}
.card-qv:hover{color:var(--gold);border-color:var(--gold-dim)}
@media(pointer:coarse){.card-qv{opacity:1;min-height:44px}}
.qv-img{width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--media-grad);border:1px solid var(--border);margin:6px 0 10px}
.qv-img img{width:100%;height:100%;object-fit:cover;display:block}
.qv-meta{font-size:.68rem;letter-spacing:.06em;color:var(--text-muted);margin-bottom:6px}
.qv-price{font-size:1.4rem;margin:10px 0 14px}
.qv-caveat{font-size:.78rem;color:var(--text-muted);margin:6px 0 0}
/* M2 listing-card chips: sealed / new / era / guidance position. */
.lc-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.lc-chip{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);border-radius:4px;padding:2px 6px;white-space:nowrap}
.lc-chip.sealed{color:var(--gold);border-color:var(--gold-dim)}
.lc-chip.guid{color:var(--text)}
/* M1 marketplace: active-filter chips, price range, mobile filter collapse. */
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.active-filters:empty{margin-top:0}
.af-count{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.af-chip{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);background:rgba(200,169,126,.08);border:1px solid var(--gold-dim);border-radius:4px;padding:6px 10px;cursor:pointer;min-height:32px}
.af-chip:hover{border-color:var(--gold)}
.price-range{display:flex;align-items:center;gap:6px}
.price-range input{width:86px;min-width:0;font-size:var(--text-sm);padding:9px 10px}
.input-bad{border-color:var(--danger)!important} /* invalid price input — visible instead of silently ignored */
.price-range .mono{color:var(--text-muted)}
.filters-toggle{display:none;margin-top:18px}
@media(max-width:719px){
  .filters-toggle{display:inline-block}
  .market-filters{display:none}
  .market-filters.open{display:flex;position:sticky;top:78px;z-index:50;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--border)} /* 78px = mobile sticky-nav height; 64px slid under it */
}
@media(pointer:coarse){.af-chip{min-height:44px}}
/* B1 vault: header stats strip, insight bars, duplicate chip. */
.vault-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0 0 22px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.vault-stats .vs-b{display:inline-flex;align-items:baseline;gap:6px}
.vault-stats .vs-n{color:var(--gold);letter-spacing:.04em}
.vault-stats .vs-sep{color:var(--text-muted)} /* gold-dim is borders/decoration, never character ink */
.ins-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;margin-top:12px}
@media(max-width:640px){.ins-cols{grid-template-columns:1fr}}
.ins-head{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.ins-row{display:flex;align-items:center;gap:10px;padding:3px 0}
.ins-label{flex:none;width:110px;font-size:var(--text-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-bar{flex:1;height:6px;border-radius:3px;background:var(--surface);overflow:hidden}
.ins-fill{display:block;height:100%;border-radius:3px;background:var(--gold);opacity:.75}
.ins-n{flex:none;font-size:.68rem;color:var(--text-muted)}
.ins-conc{font-size:var(--text-sm);margin:12px 0 0}
.dup-chip{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border);border-radius:3px;padding:2px 6px;white-space:nowrap}
a.vault-era{display:inline-block;margin:4px 0 2px;text-decoration:none}
a.vault-era:hover{border-color:var(--gold)}
/* B4 own/want side-by-side: bottles lead, wishlist rides alongside on wide
   viewports, stacks below it otherwise. (Live listing-availability signals
   next to wishes need the server-only listing_wishlist_matches ledger —
   deferred, see DEFERRED.md.) */
.vault-cols{display:grid;grid-template-columns:1fr;gap:0 22px;align-items:start}
@media(min-width:1080px){.vault-cols{grid-template-columns:2fr 1fr}}
/* B3 vault controls + list view. */
.vault-controls{margin:14px 0 16px}
.vault-controls input[type="search"]{flex:1;min-width:160px}
.view-toggle{display:flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.view-toggle button{background:none;border:none;color:var(--text-muted);font-size:1rem;padding:9px 14px;cursor:pointer;min-width:44px}
.view-toggle button[aria-pressed="true"]{color:var(--gold);background:rgba(200,169,126,.08)}
.view-toggle button:hover{color:var(--gold)}
.vault-grid.list{grid-template-columns:1fr}
.vault-grid.list .vault-item{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:11px 16px}
.vault-grid.list .vault-item-head{flex:1;min-width:200px}
.vault-grid.list .vault-actions{margin-left:auto}
/* Print isolation (receipt + vault sheet): printElement() clones the target
   to the body root, everything else is display:none — the clone stays in
   normal flow so multi-page content paginates instead of clipping or
   repeating (the old position:fixed bug). */
@media print{
  body.print-receipt,body.print-vault{background:#fff}
  body.print-receipt > :not(.print-clone),body.print-vault > :not(.print-clone){display:none !important}
  .print-clone{display:block;background:#fff;padding:24px}
  .print-clone,.print-clone *{color:#000}
  .print-clone .money-row{border-color:#ccc}
}
/* B5 vault inventory: header tools + a print-only record sheet. */
.vault-tools{display:flex;align-items:center;gap:6px}
#vault-print-sheet{display:none}
.vp-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.vp-table{width:100%;border-collapse:collapse;font-size:.8rem}
.vp-table th{text-align:left;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid #999}
.vp-table td{padding:6px 8px;border-bottom:1px solid #ddd}
.vp-note{font-size:.8rem;margin-top:12px}
/* (print isolation for body.print-vault lives in the shared @media print
   block above — the clone pattern replaced the per-surface fixed blocks.) */
/* Offers tab (DECISIONS #9): quiet rows, no urgency chrome — the countdown is
   muted mono text, never a pressure element (../docs/product/PRODUCT.md anti-references). */
.offers-h{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;margin:20px 0 10px}
.offer-row{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--border);border-radius:6px;margin-bottom:10px;background:var(--card)}
.offer-row.closed{opacity:.75}
.offer-row .of-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.offer-row .of-name{font-weight:600}
.offer-row .of-state{font-size:var(--text-sm);color:var(--text-muted)}
.offer-row .of-state b{color:var(--text);font-weight:600}
.offer-row .of-exp{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.offer-row .of-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.offers-closed{margin-top:4px}
.dash-note{display:block;padding:8px 0;border-bottom:1px solid var(--border);text-decoration:none}
.dash-note:last-child{border-bottom:none}
.dash-note .dn-t{font-size:var(--text-sm);color:var(--text);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-note .dn-time{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:var(--text-muted)}
.dash-note:hover .dn-t{color:var(--gold)}
/* Rail 03 money module (2026-07-31 overhaul). Ledger voice: native <details>
   expandables (keyboard/AT for free), hairline sub-rows, mono values, one
   gold sparkline. Mono money values re-size to be read (same override the
   .money-row .mono rule carries). */
.money-exp summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;font-size:var(--text-ui);cursor:pointer;list-style:none}
.money-exp summary::-webkit-details-marker{display:none}
.money-exp summary::after{content:'+';font-family:var(--font-mono);color:var(--text-muted);flex:none}
.money-exp[open] summary::after{content:'−'}
.money-exp .me-sum{font-size:var(--text-ui);letter-spacing:.02em;text-transform:none;font-variant-numeric:lining-nums;margin-left:auto}
.money-exp .me-list{padding:2px 0 8px;border-bottom:1px solid var(--border)}
.me-item{display:flex;align-items:center;gap:10px;padding:7px 0;text-decoration:none}
.me-item:hover .me-name{color:var(--gold)}
.me-thumb{width:26px;height:34px;flex:none;border-radius:3px;overflow:hidden;background:var(--media-grad);border:1px solid var(--border)}
.me-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.me-name{flex:1;min-width:0;font-size:var(--text-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-name .me-note{display:block;font-size:.6rem;letter-spacing:.08em;color:var(--text-muted);white-space:normal}
.me-name .me-note.exc{color:var(--danger)}
.me-amt{font-size:var(--text-sm);letter-spacing:.02em;text-transform:none;font-variant-numeric:lining-nums;color:var(--text)}
/* (.me-lines removed — the dashboard's per-trade fee itemization was a third
   fee-breakdown surface beyond the two locked ones; rows now show the held
   total and point at the trade-page receipt.) */
.me-foot{font-size:.72rem;color:var(--text-muted);padding-top:4px}
.money-strip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:14px}
.money-strip .ms-b{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.money-strip .ms-b.zero{color:var(--text-muted)}
.money-strip .ms-n{color:var(--gold)}
.money-strip .ms-b.zero .ms-n{color:var(--text-muted)}
.money-strip .ms-b.exc,.money-strip .ms-b.exc .ms-n{color:var(--danger)}
.money-strip .ms-arrow{color:var(--text-muted);font-family:var(--font-mono);font-size:.62rem}
.ms-label{display:block;color:var(--text-muted);font-size:.62rem;letter-spacing:.12em;margin-top:16px}
.money-spark .spark{display:block;width:100%;height:36px;margin-top:8px;border-bottom:1px solid var(--border)}
.money-spark .spark rect{fill:var(--gold);opacity:.85}
.money-spark .spark-cap{display:block;font-size:.72rem;margin-top:6px}
.money-life .ms-label{margin-bottom:2px}

/* flex-wrap + minmax(0,1fr) below: at 360px four tabs total ~357px min-content,
   which used to stretch the dashboard's auto grid track past the container and
   force page-level horizontal scroll (2026-07-30 audit, measured live). */
.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--border);margin:20px 0}
.tab{padding:10px 16px;font-size:var(--text-ui);font-weight:400;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;background:none}
@media(pointer:coarse){.tab{padding-top:13px;padding-bottom:13px}}
.tab.active{color:var(--text);border-bottom-color:var(--gold)}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photos img{width:90px;height:90px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
details summary{cursor:pointer}

.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 4px;cursor:pointer;font-size:1rem;text-align:left}
.faq-q .faq-icon{color:var(--gold);font-family:'Space Mono',monospace;font-size:1.2rem;flex-shrink:0;margin-left:16px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--text-muted);font-size:var(--text-body);line-height:1.6}
.faq-a-inner{padding:0 4px 18px}
.faq-item.open .faq-a{max-height:900px} /* 400px clipped long answers on narrow screens */
@media(prefers-reduced-motion:reduce){.faq-a{transition:none}}

/* ── My Vault, Trust page, comps panel (0057–0059 feature work) ──────────── */
.btn-sm { padding:7px 13px; font-size:.82rem; }
@media(pointer:coarse){.btn-sm{padding-top:14px;padding-bottom:14px}}
.panel-head-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }

/* Vault */
.vault-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.vault-item { border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:15px 16px; display:flex; flex-direction:column; gap:7px; }
.vault-item-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.vault-item-head h2 { font-family:var(--font-display); font-size:1.15rem; font-weight:500; margin:0; line-height:1.2; }
.vault-spec, .vault-batch { font-size:.72rem; letter-spacing:.03em; color:var(--text-muted); }
.vault-batch { color:var(--text-muted); }
/* Collection value (feature #3) — quiet market-reference lines, never a claim. */
.vault-value { font-size:.72rem; letter-spacing:.05em; color:var(--text-muted); }
.vault-total { margin:-4px 0 14px; font-size:.85rem; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.vault-total .price { font-size:1.05rem; }
.vault-total-label { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.vault-total-note { font-size:.75rem; }
.vault-actions { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.vault-match-list { display:flex; flex-direction:column; gap:12px; }
.vault-match { border:1px solid var(--gold-dim); border-radius:8px; background:linear-gradient(120deg,#1e1915,var(--card)); padding:15px 17px; }
.vault-match .badge { margin-bottom:8px; }
.vault-match p { margin:0; }
.wish-list { display:flex; flex-direction:column; }
.wish-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 2px; border-bottom:1px solid var(--border); }
.wish-row:last-child { border-bottom:none; }

/* Comps panel (sell form) */
.comps-panel { border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:13px 15px; margin:4px 0 4px; }
.comps-head { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; }
.comps-rows { display:flex; flex-direction:column; gap:6px; }
.comps-rows > div { display:flex; justify-content:space-between; gap:12px; font-size:.9rem; }
.comps-k { color:var(--text-muted); }
.comps-v { font-family:var(--font-mono); color:var(--text); }
.comps-warn { margin-top:10px; padding:9px 11px; border-radius:6px; background:rgba(207,102,102,.09); border:1px solid rgba(207,102,102,.28); color:var(--danger); font-size:.84rem; line-height:1.4; }
.comps-src { margin-top:9px; font-size:.66rem; letter-spacing:.03em; color:var(--text-muted); }
/* Wishlist demand signal (0067). Quiet muted line; only ever shows the 3+ count. */
.demand-note { font-size:.875rem; color:var(--text-muted); margin:6px 0 14px; }
/* Seller trust ladder badge (0069). Quiet Space-Mono chip; a restrained buyer
   signal, not a trophy — escalating gold with tier, no icon, no border. */
/* Tier ink ladder re-anchored 2026-07-30: every tier ≥4.5:1 on --card (the old
   #6b5744/#85694a inks measured 2.5:1/3.4:1). Rank still reads as ascending
   brightness + background density; tier 5 stays full gold. */
.trust-badge { display:inline-block; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; padding:2px 7px; border-radius:4px; vertical-align:middle; margin-left:8px; color:#98865E; background:rgba(200,169,126,.06); }
.trust-badge[data-tier="1"] { color:#98865E; background:rgba(200,169,126,.05); }
.trust-badge[data-tier="2"] { color:#A0855F; background:rgba(200,169,126,.07); }
.trust-badge[data-tier="3"] { color:#AC9068; background:rgba(200,169,126,.09); }
.trust-badge[data-tier="4"] { color:#B89B72; background:rgba(200,169,126,.12); }
.trust-badge[data-tier="5"] { color:var(--gold); background:rgba(200,169,126,.16); font-weight:700; }

/* Trust page */
.trust-hero { text-align:center; padding:44px 0 18px; }
.trust-h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(2.4rem,8vw,4rem); line-height:1.02; margin:14px 0 0; }
.gold-em { color:var(--gold); font-style:italic; }
.trust-lede { max-width:60ch; margin:20px auto 0; color:var(--text-muted); font-size:1.05rem; line-height:1.55; }
.trust-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.trust-stepper { margin:34px 0; text-align:center; }
.trust-steps { display:grid; gap:14px; grid-template-columns:1fr; margin:12px 0 34px; }
.trust-step { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; border:1px solid var(--border); border-radius:8px; background:var(--card); padding:18px 20px; }
.trust-step-n { font-family:var(--font-mono); color:var(--gold); font-size:.7rem; letter-spacing:.12em; padding-top:6px; }
.trust-step h2 { font-family:var(--font-display); font-weight:500; font-size:1.35rem; margin:0 0 5px; }
.trust-step p { margin:0; color:var(--text-muted); line-height:1.5; }
.trust-cards { display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:34px; }
.trust-card { border:1px solid var(--border); border-radius:8px; background:var(--surface); padding:20px; }
.trust-card-tag { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.trust-card h2 { font-family:var(--font-display); font-weight:500; font-size:1.3rem; margin:9px 0 7px; }
.trust-card p { margin:0; color:var(--text-muted); line-height:1.5; }
.trust-foot { text-align:center; border-top:1px solid var(--border); padding:36px 0 20px; }
.trust-foot h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(1.6rem,5vw,2.4rem); margin:0 0 8px; }
@media (min-width:640px) {
  .trust-steps { grid-template-columns:1fr 1fr; }
  .trust-cards { grid-template-columns:repeat(3,1fr); }
}