/* Layout: a lotus-pink ledger. Soft blush paper, petal-cut cards (two rounded corners, two tight), coral for action, sand for notes. Venue table, summary petals, treatment notes, ledger, export tray. */
:root{
  color-scheme:light;
  --paper:#fcf6f4; --sheet:#ffffff; --ink:#3b2624; --muted:#7c5c57; --crease:#f0dcd6; --shade:#f7e7e2;
  --accent:#bf5244; --accent-ink:#ad4639; --accent-soft:#fbe4df; --on-accent:#ffffff;
  --sand:#efcfae; --sand-soft:#fbf0e4;
  --loss:#a3302a; --loss-soft:#f8e1de; --gain:#2b7a52; --gain-soft:#e2f1e8; --flag:#8f5a12; --flag-soft:#fbefe2;
  --v-hl:#cf5f52; --v-xyz:#2f857e; --v-par:#8b5fae; --v-pt:#4a2c2a; --v-fork:#b27822; --v-spot:#3b6ea5; --v-vault:#6b8e3a; --v-stake:#a0527a; --v-core:#8a8178; --v-evm:#2b7a9b;
  --petal:22px 6px 22px 6px; --round:16px; --grain:.55; --grain-blend:multiply;
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --data:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
body{
  background:var(--paper);
  color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.55;
}
html::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60rem 36rem at 8% -10%, var(--accent-soft), transparent 70%),
             radial-gradient(50rem 30rem at 100% 105%, var(--sand-soft), transparent 70%)}
/* paper grain: fine fractal noise plus faint horizontal fibres, tiled */
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grain); mix-blend-mode:var(--grain-blend);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .34 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .34 0 0 0 0 .3 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px, 180px 180px}
.wrap{position:relative; z-index:1}
.wrap{max-width:1160px; margin:0 auto; padding-block:28px 64px;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  display:flex; flex-direction:column; gap:30px}
.num{font-variant-numeric:tabular-nums}

header{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px}
.brand{display:flex; align-items:center; gap:16px}
.brand picture{display:flex; flex:none}
.brand img{width:88px; height:auto; flex:none; filter:drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 18%, transparent))}
.wordmark{font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,46px); letter-spacing:-.03em; margin:0; line-height:1}
.wordmark span{color:var(--accent)}
.tagline{font-size:14px; color:var(--muted); margin:6px 0 0}

.banner{display:flex; gap:12px; align-items:baseline; font-size:13px; color:var(--flag); background:var(--sand-soft);
  border:1px solid color-mix(in srgb, var(--sand) 70%, transparent); padding:10px 14px; border-radius:var(--round)}
.banner b{font-family:var(--data); font-weight:500; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; flex:none}

.sheet{background:var(--sheet); border:1px solid var(--crease); position:relative; border-radius:var(--round)}
.fold{border-radius:var(--petal)}
form.sheet{padding:18px; display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:end;
  box-shadow:0 10px 30px -18px color-mix(in srgb, var(--accent) 45%, transparent)}
@media (max-width:760px){ form.sheet{grid-template-columns:1fr} }
label{display:block; font-family:var(--data); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
input[type=text],select{width:100%; font-family:var(--data); font-size:13.5px; color:var(--ink); background:var(--paper);
  border:1px solid var(--crease); padding:11px 14px; border-radius:12px}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn{font-family:var(--body); font-size:14px; font-weight:600; cursor:pointer; padding:12px 22px; border-radius:999px;
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); white-space:nowrap}
.btn:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--crease); padding:8px 16px; font-size:13px}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent-ink); background:transparent}

.section-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
h2{font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0}
.section-h p{margin:0; font-size:13px; color:var(--muted)}

/* venue ledger */
.tablebox{overflow-x:auto; margin-top:12px; border:1px solid var(--crease); background:var(--sheet); border-radius:var(--round)}
table{border-collapse:collapse; width:100%; font-size:13px}
th{font-family:var(--data); font-weight:500; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  text-align:left; padding:11px 12px; border-bottom:1px solid var(--crease); background:var(--shade); white-space:nowrap}
td{padding:10px 12px; border-bottom:1px solid var(--crease); vertical-align:top}
tr:last-child td{border-bottom:0}
td.r, th.r{text-align:right}
td .sub{display:block; color:var(--muted); font-size:12px}
.venues table{min-width:980px}
.venues tr.off td:not(:first-child){opacity:.42}
.venues tfoot td{border-top:1px solid var(--crease); border-bottom:0; font-weight:600; background:var(--shade)}
.vname{display:flex; gap:10px; align-items:flex-start}
.swatch{width:10px; height:14px; margin-top:4px; flex:none; background:var(--vc); border-radius:10px 2px 10px 2px}
.vname b{font-weight:600}
.kind{font-family:var(--data); font-size:11.5px; color:var(--muted); letter-spacing:.03em}
.how{font-family:var(--data); font-size:12px; color:var(--muted)}
.toggle{width:18px; height:18px; accent-color:var(--accent); cursor:pointer}
.mono{font-family:var(--data); font-size:12px}
.neg{color:var(--loss)} .pos{color:var(--gain)}
.forknote{margin:10px 0 0; font-size:13px; color:var(--muted); max-width:90ch}
.forknote b{color:var(--ink); font-weight:600}

/* tiles */
.tiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:12px}
@media (max-width:860px){ .tiles{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:360px){ .tiles{grid-template-columns:1fr} }
.tile{padding:16px 20px 18px; display:flex; flex-direction:column; gap:4px; min-width:0}
.tile .k{font-family:var(--data); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tile .v{font-family:var(--display); font-weight:700; font-size:clamp(22px,2.8vw,30px); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.2}
.tile .s{font-size:12.5px; color:var(--muted)}
.v.loss{color:var(--loss)} .v.gain{color:var(--gain)}
.tile.flagged{background:var(--sand-soft); border-color:color-mix(in srgb, var(--sand) 70%, transparent)}

/* treatment */
.treat{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:12px; border:1px solid var(--crease); background:var(--sheet); border-radius:var(--round); overflow:hidden}
@media (max-width:760px){ .treat{grid-template-columns:1fr} }
.treat div{padding:14px 18px; border-bottom:1px solid var(--crease); min-width:0}
.treat div:nth-child(odd){border-right:1px solid var(--crease)}
@media (max-width:760px){ .treat div:nth-child(odd){border-right:0} }
.treat h3{margin:0 0 4px; font-size:14.5px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.treat p{margin:0; font-size:13.5px; color:var(--muted); max-width:62ch}
.treat .where{font-family:var(--data); font-size:11.5px; color:var(--muted); display:block; margin-top:6px}

.chip{display:inline-flex; align-items:center; gap:5px; font-family:var(--data); font-size:11.5px; letter-spacing:.02em;
  padding:2px 9px; border:1px solid transparent; white-space:nowrap; line-height:1.5; border-radius:999px}
.chip.loss{color:var(--loss); background:var(--loss-soft)}
.chip.gain{color:var(--gain); background:var(--gain-soft)}
.chip.flag{color:var(--flag); background:var(--flag-soft); border-color:color-mix(in srgb, var(--sand) 60%, transparent)}
.chip.info{color:var(--accent-ink); background:var(--accent-soft)}
.chip.none{color:var(--muted); border-color:var(--crease)}
.vchip{display:inline-flex; align-items:center; gap:6px; font-family:var(--data); font-size:12px; white-space:nowrap}
.vchip i{width:8px; height:11px; background:var(--vc); display:inline-block; border-radius:8px 2px 8px 2px}

/* ledger */
.controls{display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; align-items:center}
.filters{display:flex; flex-wrap:wrap; gap:6px}
.filters button{font-family:var(--body); font-size:12.5px; font-weight:500; padding:6px 13px; background:var(--sheet); color:var(--muted); border:1px solid var(--crease); cursor:pointer; border-radius:999px}
.filters button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb, var(--accent) 45%, transparent)}
.controls select{width:auto; padding:6px 12px; font-size:12px; border-radius:999px}
.ledger table{min-width:1000px}
.ledger .scroll{max-height:560px; overflow:auto}
.ledger th{position:sticky; top:0; z-index:1}
.hash{color:var(--muted); font-family:var(--data); font-size:11.5px; white-space:nowrap}

/* export */
.export{display:grid; grid-template-columns:260px minmax(0,1fr); margin-top:12px; border:1px solid var(--crease); background:var(--sheet); border-radius:var(--round); overflow:hidden}
@media (max-width:760px){ .export{grid-template-columns:1fr} }
.export nav{display:flex; flex-direction:column; border-right:1px solid var(--crease)}
@media (max-width:760px){ .export nav{flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--crease)} }
.export nav button{text-align:left; padding:14px 16px; background:transparent; border:0; border-bottom:1px solid var(--crease);
  color:var(--ink); cursor:pointer; font-family:var(--body); font-size:14px; font-weight:500; flex:1 1 180px}
.export nav button span{display:block; font-size:12px; color:var(--muted); font-weight:400}
.export nav button[aria-selected="true"]{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.out{padding:14px; display:flex; flex-direction:column; gap:10px; min-width:0}
.out-h{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--muted); font-family:var(--data)}
pre{margin:0; font-family:var(--data); font-size:11.5px; line-height:1.6; background:var(--paper); border:1px solid var(--crease);
  padding:12px; overflow:auto; max-height:320px; white-space:pre; color:var(--ink); border-radius:12px}
footer{font-size:12.5px; color:var(--muted); border-top:1px solid var(--crease); padding-top:14px; display:flex; flex-direction:column; gap:4px; max-width:84ch}
footer b{color:var(--ink); font-weight:600}

/* view switch */
.viewbar{display:inline-flex; gap:4px; padding:4px; background:var(--sheet); border:1px solid var(--crease); border-radius:999px; align-self:flex-start}
.viewbar button{font-family:var(--body); font-size:13.5px; font-weight:600; padding:8px 18px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer}
.viewbar button[aria-selected="true"]{background:var(--accent); color:var(--on-accent)}
.hint{font-size:13px; color:var(--muted); margin:8px 0 0}
.status-line{font-size:13px; color:var(--accent-ink); margin:10px 0 0; min-height:1.4em}

/* clients */
.clients table{min-width:860px}
.clients tr.cur td{background:var(--accent-soft)}
.clients .btn.ghost{padding:6px 14px}
.clientbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px}

/* journal */
.jgrid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:12px}
@media (max-width:860px){ .jgrid{grid-template-columns:repeat(2, minmax(0,1fr))} }
.jstat{padding:14px 16px; display:flex; flex-direction:column; gap:2px; min-width:0}
.jstat .k{font-family:var(--data); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.jstat .v{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.jstat .s{font-size:12px; color:var(--muted)}
.bars{margin-top:12px; padding:16px 18px; display:flex; flex-direction:column; gap:9px}
.bars h3{margin:0 0 4px; font-size:14px; font-weight:600}
.bar{display:grid; grid-template-columns:120px minmax(0,1fr) 96px; gap:10px; align-items:center; font-size:12.5px}
.bar .lbl{font-family:var(--data); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar .track{position:relative; height:14px; background:var(--shade); border-radius:999px}
.bar .track::after{content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--crease)}
.bar .fill{position:absolute; top:0; bottom:0; border-radius:999px}
.bar .fill.pos{background:var(--gain); left:50%}
.bar .fill.neg{background:var(--loss); right:50%}
.bar .val{text-align:right; font-family:var(--data); font-size:12px; font-variant-numeric:tabular-nums}

/* year-end */
.ye table{min-width:760px}
.ye-head{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.ye-head .pill{font-family:var(--data); font-size:12px; padding:6px 12px; border-radius:999px; background:var(--sheet); border:1px solid var(--crease)}
.ye-head .pill b{font-weight:500; color:var(--ink)}
.ye-note{margin:10px 0 0; font-size:13px; color:var(--muted); max-width:90ch}

/* plans */
.plans{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:12px}
@media (max-width:980px){ .plans{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:520px){ .plans{grid-template-columns:1fr} }
.plan{padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; min-width:0}
.plan.featured{border-color:var(--accent); box-shadow:0 14px 30px -20px color-mix(in srgb, var(--accent) 70%, transparent)}
.plan .tag{font-family:var(--data); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
.plan h3{margin:0; font-family:var(--display); font-size:20px; font-weight:700}
.plan .price{font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-.02em}
.plan .price small{font-family:var(--body); font-size:13px; font-weight:500; color:var(--muted); letter-spacing:0}
.plan ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--muted); display:flex; flex-direction:column; gap:4px; flex:1}
.plan .btn{align-self:flex-start}
.addons{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:14px}
@media (max-width:760px){ .addons{grid-template-columns:1fr} }
.addon{padding:18px 20px; display:flex; flex-direction:column; gap:8px; min-width:0}
.addon h3{margin:0; font-size:16px; font-weight:600; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.addon h3 span{font-family:var(--display); color:var(--accent-ink)}
.addon p{margin:0; font-size:13.5px; color:var(--muted); max-width:60ch}
.refform{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:4px}
.refform > div:not(.hp){flex:1 1 220px; min-width:0}
.refform > div:not(.hp):nth-of-type(3){flex:0 1 180px}
.refform select{width:100%}
.refform .btn{flex:0 0 auto}
@media (max-width:640px){ .refform .btn{flex:1 1 100%} }
.refform input[type=email]{width:100%; font-family:var(--data); font-size:13px; color:var(--ink); background:var(--paper); border:1px solid var(--crease); padding:10px 14px; border-radius:12px}

/* app additions */
.out-actions{display:inline-flex; gap:8px}
.btn[disabled]{opacity:.6; cursor:progress}
.status-line.err{color:var(--loss)}
.empty{padding:18px; color:var(--muted); font-size:14px}
.demo-link{background:none; border:0; padding:0; color:var(--accent-ink); font:inherit; text-decoration:underline; cursor:pointer}
td.num, td.mono.r{white-space:nowrap}

/* theme switch */
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* static content: how it works, FAQ, agents */
.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}
.steps{list-style:none; counter-reset:s; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
@media (max-width:860px){ .steps{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:360px){ .steps{grid-template-columns:1fr} }
.steps li{counter-increment:s; background:var(--sheet); border:1px solid var(--crease); border-radius:var(--petal); padding:16px 18px; display:flex; flex-direction:column; gap:4px; min-width:0}
.steps li::before{content:counter(s); font-family:var(--display); font-weight:700; font-size:22px; color:var(--accent)}
.steps b{font-weight:600}
.steps span{font-size:13.5px; color:var(--muted)}
.faqlist{margin-top:12px; border:1px solid var(--crease); background:var(--sheet); border-radius:var(--round); overflow:hidden}
.faqlist details{border-bottom:1px solid var(--crease); padding:0 18px}
.faqlist details:last-child{border-bottom:0}
.faqlist summary{cursor:pointer; padding:14px 0; font-weight:600; list-style-position:inside}
.faqlist summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.faqlist p{margin:0 0 14px; color:var(--muted); font-size:14px; max-width:75ch}
.agentgrid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:12px}
@media (max-width:860px){ .agentgrid{grid-template-columns:1fr} }
.agents code{font-family:var(--data); font-size:12.5px; background:var(--paper); padding:1px 6px; border-radius:6px; word-break:break-all}
.agents a{color:var(--accent-ink)}

/* ---------- accounts and payments ---------- */
.paywall{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px 28px; align-items:center; padding:20px 22px; margin-top:12px;
  border-color:color-mix(in srgb, var(--accent) 55%, var(--crease)); background:linear-gradient(135deg, var(--accent-soft), var(--sheet) 60%)}
.paywall h3{margin:4px 0 6px; font-family:var(--display); font-size:21px; letter-spacing:-.01em}
.paywall p{margin:0; font-size:13.5px; color:var(--muted); max-width:62ch}
.paywall .tag{font-family:var(--data); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
.pw-cta{display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:240px}
.pw-cta .status-line{margin:0}
@media (max-width:760px){ .paywall{grid-template-columns:1fr} .pw-cta{min-width:0} }
.lockrow td{text-align:center; padding:16px 12px; background:linear-gradient(180deg, transparent, var(--accent-soft)); color:var(--ink)}
.lockrow a, .footlinks a, .hint a{color:var(--accent-ink)}
button.btn:disabled{opacity:.45; cursor:not-allowed}
.footlinks{font-size:12.5px}

/* account page */
.acct-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
@media (max-width:860px){ .acct-grid{grid-template-columns:1fr} }
.card{padding:20px 22px; display:flex; flex-direction:column; gap:10px; min-width:0}
.card h2{margin:0; font-family:var(--display); font-size:20px}
.card p{margin:0; font-size:13.5px; color:var(--muted)}
.card .row{display:flex; gap:10px; flex-wrap:wrap; align-items:end}
.card .row > div{flex:1 1 180px; min-width:0}
.card input[type=email], .card input[type=text], .card input[type=number]{width:100%; font-family:var(--data); font-size:13px; color:var(--ink); background:var(--paper); border:1px solid var(--crease); padding:10px 14px; border-radius:12px}
.card label{display:block; font-family:var(--data); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.plan-pill{display:inline-flex; gap:8px; align-items:center; font-family:var(--data); font-size:12px; padding:4px 12px; border-radius:999px; background:var(--shade); border:1px solid var(--crease)}
.keybox{font-family:var(--data); font-size:12.5px; word-break:break-all; background:var(--paper); border:1px dashed var(--accent); padding:10px 12px; border-radius:10px}
.wlist{width:100%; border-collapse:collapse; font-size:13.5px}
.wlist td{padding:9px 8px; border-bottom:1px solid var(--crease); vertical-align:middle}
.wlist td.act{text-align:right; white-space:nowrap}
.choice{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
@media (max-width:520px){ .choice{grid-template-columns:1fr} }
.choice .plan{padding:14px 16px}
.legal{max-width:760px}
.legal h2{font-family:var(--display); margin:26px 0 8px; font-size:20px}
.legal p, .legal li{font-size:14.5px; color:var(--ink); line-height:1.65}
.legal .meta{color:var(--muted); font-size:13px}
form.card.sheet{display:flex; flex-direction:column; grid-template-columns:none; align-items:stretch}
[hidden]{display:none !important}
.export nav button{flex:0 0 auto}
@media (max-width:760px){ .export nav button{flex:1 1 180px} }
.empty-note{padding:14px 16px; font-size:13.5px; color:var(--muted)}
pre.wrap{white-space:pre-wrap}
.status-line{color:var(--gain)}
.status-line.err{color:var(--loss)}

/* ---------- UX pass: focus, targets, layout at every width ---------- */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
a{text-underline-offset:2px}
.filters button, #vfilter{min-height:34px}
.footlinks a{display:inline-block; padding:4px 0}
#rows td:nth-child(3){white-space:nowrap}
#rows td:nth-child(4) .sub{white-space:normal}
.tile .v, .jstat .v{overflow-wrap:anywhere}
@media (pointer:coarse){
  .filters button, .btn.ghost, select, .viewbar button, .signin{min-height:44px}
  .footlinks a{padding:10px 0}
}
/* the wallet form: two rows on tablets so the button never overflows */
@media (max-width:900px) and (min-width:761px){
  form.sheet:not(.card){grid-template-columns:1fr auto}
  form.sheet:not(.card) > div:first-child{grid-column:1 / -1}
}
/* phones */
@media (max-width:640px){
  .wrap{gap:24px; padding-block:18px 48px}
  .brand img{width:64px}
  .section-h{flex-direction:column; align-items:flex-start; gap:2px}

  .ledger table, .ye table{min-width:0}
  /* ledger: one card per event */
  .ledger .tablebox{overflow:visible; max-height:none}
  .ledger table, .ledger tbody, .ledger tr, .ledger td{display:block}
  .ledger thead{display:none}
  .ledger tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"ev pnl" "mk fee" "cls cls" "vn tm"; gap:4px 12px; padding:12px 14px; border-bottom:1px solid var(--crease)}
  .ledger td{padding:0; border:0; white-space:normal !important}
  .ledger td:nth-child(1){grid-area:tm; font-size:11.5px; color:var(--muted); text-align:right; align-self:center; white-space:nowrap !important}
  .ledger td:nth-child(2){grid-area:vn}
  .ledger td:nth-child(3){grid-area:ev; font-weight:600}
  .ledger td:nth-child(4){grid-area:mk}
  .ledger td:nth-child(5){grid-area:pnl; text-align:right; font-weight:600}
  .ledger td:nth-child(6){grid-area:fee; text-align:right}
  .ledger td:nth-child(7){display:none}
  .ledger td:nth-child(8){grid-area:cls; margin-top:2px}
  .ledger td:nth-child(9){display:none}
  .ledger tr.lockrow, .ledger tr.morerow, .ledger td[colspan]{display:block; grid-template-areas:none}
  .ledger td[colspan]{white-space:normal !important; text-align:center; font-size:13.5px; color:var(--ink); padding:14px}

  /* year-end: position and result first */
  .ye table, .ye tbody, .ye tr, .ye td{display:block}
  .ye thead{display:none}
  .ye tbody tr{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"pos upnl" "vn mg" "fx fx"; gap:4px 12px; padding:12px 14px; border-bottom:1px solid var(--crease)}
  .ye td{padding:0; border:0}
  .ye td:nth-child(1){grid-area:vn}
  .ye td:nth-child(2){grid-area:pos; font-weight:600}
  .ye td:nth-child(3){grid-area:mg; text-align:right; color:var(--muted)}
  .ye td:nth-child(4){grid-area:upnl; text-align:right; font-weight:600}
  .ye td:nth-child(5){grid-area:fx; font-size:13px; color:var(--muted)}
  .ye td[colspan]{display:block}

  .export pre{max-height:240px}
  .paywall{padding:18px}
  .paywall h3{font-size:19px}
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important; transition:none !important; animation:none !important} }
.morerow td{text-align:center; padding:14px}
.morerow .btn{width:auto}
@media (min-width:641px){ .morerow{display:none} }
/* tablets: quieter header, venues table without the explanatory column */
@media (max-width:1000px){
  .venues th:nth-child(3), .venues td.how{display:none}
  .venues table{min-width:0}
}

/* venues as cards on phones and small tablets */
@media (max-width:820px){
  /* venues: name row, then the figures in a labelled grid */
  .venues table, .venues tbody, .venues tfoot, .venues tr, .venues td{display:block}
  .venues table{min-width:0}
  .venues thead{display:none}
  .venues tr{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px 12px; padding:12px 14px; border-bottom:1px solid var(--crease)}
  .venues td{padding:0; border:0; text-align:left !important}
  .venues td:nth-child(1){grid-column:1; grid-row:1; align-self:center; width:auto}
  .venues td:nth-child(2){grid-column:1 / 3; grid-row:1; padding-left:34px; min-width:0}
  .venues tbody td:nth-child(10), .venues tfoot td:nth-child(10){grid-column:3; grid-row:1; text-align:right !important; font-weight:600}
  .venues td.how, .venues tfoot td:nth-child(1), .venues tfoot td:nth-child(3){display:none}
  .venues td[data-l]::before{content:attr(data-l); display:block; font-family:var(--data); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
  .venues tfoot tr{background:var(--shade)}
  .venues tfoot td{border:0; background:transparent}
  .venues tfoot td:nth-child(2){grid-column:1 / 3; padding-left:0; align-self:center}
  .venues .empty{grid-column:1 / -1}

}
.card .status-line:empty{display:none}
#dash > .section-h{margin-bottom:14px}

/* ---------- header navigation ---------- */
.topnav{display:flex; align-items:center; gap:6px; margin-left:auto}
.navlink{font-size:14px; font-weight:500; color:var(--muted); text-decoration:none; padding:10px 12px; border-radius:999px}
.navlink:hover{color:var(--ink); background:color-mix(in srgb, var(--accent-soft) 70%, transparent)}
.signin{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; margin-left:6px; border-radius:999px;
  background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; text-decoration:none;
  box-shadow:0 6px 16px -10px color-mix(in srgb, var(--ink) 80%, transparent)}
.signin:hover{background:var(--accent-ink); color:#fff}
.signin .avatar{display:none}
.signin.is-in{padding-left:5px; background:var(--sheet); color:var(--ink); border:1px solid var(--crease); box-shadow:none}
.signin.is-in:hover{border-color:var(--accent); background:var(--sheet); color:var(--ink)}
.signin.is-in .avatar{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; font-weight:700}
.signin.is-in .avatar:empty::before{content:""; width:10px; height:10px; border-radius:50%; background:#fff}
header{flex-wrap:nowrap}
@media (max-width:760px){ .navlink{display:none} }
@media (max-width:640px){ header{align-items:center} .brand .tagline{display:none} .brand img{width:52px} .wordmark{font-size:30px} }
.switch{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--ink); text-transform:none; letter-spacing:0; font-family:var(--body); cursor:pointer; margin:4px 0}
.switch input{width:18px; height:18px; accent-color:var(--accent)}
.card .sub{color:var(--muted); font-size:12.5px}

/* ---------- account page polish ---------- */
.acct-grid > [data-wide]{grid-column:1 / -1}
.card > h2 + p{margin-top:-4px}
/* one control height: inputs and buttons line up in every row */
.card input[type=email], .card input[type=text], .card input[type=number]{height:42px; padding:0 14px}
.card .row .btn, .card .plan-actions .btn, .savedcard .btn{height:42px; padding-top:0; padding-bottom:0; display:inline-flex; align-items:center; justify-content:center}
.card .row > .btn{flex:0 0 auto}
a.btn{text-decoration:none; display:inline-flex; align-items:center}
.wlist td{padding:10px 0}
.wlist td.act{padding-left:12px}
.wlist td.act .btn{padding:6px 14px}
.wlist tr:last-child td{border-bottom:0}
/* plan choice: equal cards, actions pinned to the bottom, full-width buttons */
.choice .plan{gap:8px}
.choice .plan > p{flex:1}
.plan-actions{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.plan-actions .btn{width:100%; align-self:stretch}
.plan-actions .seats label{margin-bottom:4px}
/* agent purchases */
#cardstate{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.savedcard{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; font-size:13.5px; color:var(--ink);
  background:var(--paper); border:1px solid var(--crease); border-radius:12px; padding:8px 8px 8px 14px}
.savedcard .btn{height:34px}
.card .switch{display:flex; gap:10px; align-items:flex-start; line-height:1.4; font-family:var(--body); font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink); margin:2px 0 6px; cursor:pointer}
.card .switch input{flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent)}
.card .switch:has(input:disabled){color:var(--muted); cursor:not-allowed}
/* footer rule spans the page; text stays a readable width */
footer{max-width:none}
footer > span{max-width:84ch}

/* ---------- guides ---------- */
.guide{max-width:760px}
.guide h1{font-size:clamp(30px, 5vw, 42px); line-height:1.08; margin:8px 0 6px}
.guide .lead{font-size:17px; line-height:1.6; color:var(--ink); margin:14px 0 4px}
.guide ul, .guide ol{padding-left:22px}
.guide li{margin:4px 0}
.guide a{color:var(--accent-ink)}
.crumbs{font-size:13px; color:var(--muted)}
.crumbs a{color:var(--muted)}
.cta{margin:30px 0 8px; padding:20px 22px; display:flex; flex-direction:column; gap:8px; box-shadow:0 14px 34px -22px color-mix(in srgb, var(--accent) 60%, transparent)}
.cta h2{margin:0 !important}
.cta p{margin:0; font-size:14px; color:var(--muted)}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.cta-row input[type=text]{flex:1 1 260px; width:auto; height:46px}
.cta-row .btn{flex:0 0 auto; height:46px}
@media (max-width:520px){ .cta-row .btn{flex:1 1 100%} }
.related{display:flex; flex-wrap:wrap; gap:8px; padding:0 !important; list-style:none}
.related li{margin:0}
.related a{display:inline-block; padding:8px 14px; border:1px solid var(--crease); border-radius:999px; background:var(--sheet); text-decoration:none; font-size:14px}
.related a:hover{border-color:var(--accent)}
.guide-list{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:18px}
@media (max-width:640px){ .guide-list{grid-template-columns:1fr} }
.guide-list a{text-decoration:none; color:inherit}
.guide-list a:hover{border-color:var(--accent)}
.guide-list h2{font-size:18px !important; margin:0 !important}
.guide .faqlist p{margin:0 0 14px}
form.cta.sheet{display:flex; flex-direction:column; grid-template-columns:none; align-items:stretch}
.navlink, .signin{white-space:nowrap}
@media (max-width:1000px){ .navlink.wide-only{display:none} }
/* ledger: long classifications wrap instead of widening the table */
#rows .chip{white-space:normal; max-width:200px; line-height:1.35; padding-top:3px; padding-bottom:3px}

/* ---------- share card ---------- */
.sharecta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:13.5px; color:var(--muted)}
.sharecta .btn{flex:0 0 auto}
.sharedlg{width:min(920px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:20px 22px; border:1px solid var(--crease); color:var(--ink); overflow:auto}
.sharedlg::backdrop{background:color-mix(in srgb, var(--ink) 45%, transparent); backdrop-filter:blur(2px)}
.sd-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.sharedlg canvas{display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:14px; border:1px solid var(--crease); background:var(--paper)}
.sharedlg .switch{margin:14px 0 4px}
.sd-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.sd-actions .btn{text-decoration:none}
@media (max-width:520px){ .sd-actions .btn{flex:1 1 calc(50% - 10px); justify-content:center} .sharedlg{padding:16px} }
.sharedlg .status-line:empty{display:none}
/* while a wallet is being read, dim the previous (sample) figures so they aren't mistaken for the user's */
body.reading main > section:not(#acctview), body.reading .wrap > section:not(#acctview){opacity:.35; filter:saturate(.6); pointer-events:none; transition:opacity .2s}
@media (prefers-reduced-motion: reduce){ body.reading .wrap > section{transition:none} }
/* results sections appear once a real wallet has been read */
body:not(.has-ledger) [data-results]{display:none}
body.has-ledger .formhint{display:none} .formhint{margin:-6px 2px 0}
.nowrap{white-space:nowrap}

/* guide tables and sources */
.guide .tablescroll{overflow-x:auto; border:1px solid var(--crease); border-radius:var(--round); background:var(--sheet); margin:12px 0 4px}
.guide table{border-collapse:collapse; width:100%; min-width:560px; font-size:14px}
.guide th, .guide td{text-align:left; vertical-align:top; padding:10px 14px; border-bottom:1px solid var(--crease); line-height:1.5}
.guide thead th{font-family:var(--data); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--shade)}
.guide tbody th{font-weight:600; width:24%}
.guide tbody tr:last-child th, .guide tbody tr:last-child td{border-bottom:0}
.guide h3{font-family:var(--display); font-size:17px; margin:20px 0 4px}
.guide .sources{padding-left:20px; font-size:14px}
.guide-list .featured{grid-column:1 / -1; border-color:var(--accent)}
/* very small phones (320–360px): keep logo, wordmark and Sign in on one line */
@media (max-width:360px){
  header{gap:10px}
  .brand{gap:10px; min-width:0}
  .brand img{width:44px}
  .wordmark{font-size:26px}
  .signin{padding:0 14px; margin-left:0}
  .signin.is-in{padding-left:4px}
}
.addon code{white-space:nowrap}
/* desktop ledger: fit the box instead of scrolling sideways */
@media (min-width:641px){
  .ledger table{min-width:0}
  #rows td:nth-child(2), #rows td:nth-child(3), #rows td:nth-child(4){white-space:normal}
  #rows td:nth-child(3){min-width:110px}
  #rows td:nth-child(4){min-width:150px}
  .ledger td:nth-child(2) .vchip{white-space:normal; align-items:flex-start}
  .ledger td:nth-child(2) .vchip i{margin-top:5px; flex:none}
  .ledger td:nth-child(1){white-space:nowrap}
}
.guide tbody th{font-family:var(--body); font-size:14px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink); background:var(--sheet); white-space:normal}
.beta-note{font-size:14px; background:var(--flag-soft); color:var(--flag); border:1px solid color-mix(in srgb, var(--flag) 25%, transparent); border-radius:12px; padding:10px 14px}
.guide-list > :last-child:nth-child(even){grid-column:1 / -1}