/* Expense splitter base (kit-spec-1, expense_splitter, r2), v2 editorial */
body{--hl:1px solid var(--line)}
.top{display:grid;gap:var(--s-5);padding-block:var(--s-7) var(--s-6)}
.brand{display:grid;gap:var(--s-3);min-width:0}
.kick{display:flex;align-items:center;gap:10px;margin:0;font:700 var(--t-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.mark{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font:700 var(--t-sm)/1 var(--serif)}
html[data-app-kit] body>[data-sec=nav] .brand h1{font:600 var(--h1,clamp(2.5rem,1.5rem + 2.6vw,4rem))/1.04 var(--serif);letter-spacing:-.025em}
html:is([data-l-app=rail],[data-l-app=trio]) body>[data-sec=nav]{height:auto;min-height:100vh;--h1:2.5rem}
.sub{margin:var(--s-3) 0 0;max-width:56ch;color:var(--ink-2)}
.totals{display:flex;flex-wrap:wrap;align-content:start;gap:var(--s-4) var(--s-6)}
.answer{flex:1 1 100%;margin:0;max-width:30ch;font:500 clamp(1.5rem,1.15rem + 1.2vw,2.125rem)/1.22 var(--serif)}
.answer b{font-weight:700}
.answer .v-amt{color:var(--accent)}
.tot{display:grid;gap:2px;padding-top:var(--s-3);border-top:var(--hl);font:600 var(--t-xs)/1.4 var(--sans);text-transform:uppercase;color:var(--ink-2)}
.tot b{font:600 var(--t-xl)/1.15 var(--serif);color:var(--ink)}
@media (min-width:960px){html:not([data-l-app]) .top{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--s-8);align-items:end}
html:not([data-l-app]) .totals{padding-left:var(--s-6);border-left:var(--hl)}}
.grid{display:grid;gap:var(--s-7);padding-block:var(--s-5) var(--s-8)}
@media (min-width:960px){.grid{grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:var(--s-8);align-items:start}
html:not([data-l-app]) .grid>[data-sec=feature]{grid-column:2;grid-row:1/span 2;position:sticky;top:var(--s-4)}}
@media (max-width:959px){html:not([data-l-app=chartsfirst],[data-l-app=tablefirst]) [data-main]>[data-sec=list]{order:1}}
.panel{display:grid;gap:var(--s-3);align-content:start;padding:0;background:none}
.panel h2,.c-footer h2{padding-top:var(--s-3);border-top:2px solid var(--ink);font:600 var(--t-xl)/1.2 var(--serif)}
.side{display:grid;gap:var(--s-7)}
.inputs{padding:var(--s-5);border:var(--hl);border-radius:var(--r-card);background:var(--surface)}
.inputs h2{padding:0;border:0}
.side ul,.side ol,.panel ul{margin:0;padding:0;list-style:none}
.plist li,.splitlist li{display:flex;align-items:center;gap:var(--s-2);min-height:44px;border-bottom:var(--hl)}
.dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--pc,var(--accent))}
.rm{width:32px;height:32px;margin-left:auto;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);font-size:var(--t-md);cursor:pointer}
.rm:hover{background:var(--sunk);color:var(--bad)}
.addrow,.frow{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.addrow input{flex:1 1 9rem;min-width:0}
#exp-open{width:100%;margin-top:var(--s-3)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden}
.error{margin:0}
.expform{display:grid;gap:var(--s-3);margin-top:var(--s-3);padding-top:var(--s-4);border-top:var(--hl)}
.frow.end{justify-content:flex-end}
.field{display:grid;gap:6px;align-content:start;min-width:0}
.field.grow{flex:1;min-width:140px}
.field.amt{width:110px}
fieldset.field{margin:0;padding:0;border:0}
legend,.lab{font:600 var(--t-sm)/1.4 var(--sans);padding:0;margin-bottom:6px}
.seg{display:flex;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.seg button{flex:1;min-height:44px;border:0;background:var(--surface);color:var(--ink-2);font:600 var(--t-sm)/1 var(--sans)}
.seg button[aria-checked=true]{background:var(--ink);color:var(--surface)}
.splitlist li{font-size:var(--t-sm)}
.share{width:70px;margin-left:auto}
.elist li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px var(--s-4);padding:var(--s-3) 0;border-bottom:var(--hl)}
.what,.who{font-weight:600}
.elist .amt{font-weight:600;text-align:right}
.meta{grid-column:1/-1;display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-sm);color:var(--ink-2)}
[data-sec=list],.bal{container-type:inline-size}
@container (min-width:600px){.elist li{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) 8rem 44px;align-items:center;min-height:52px;padding:4px 0}
.elist .amt{grid-area:1/3}
.meta{display:contents}
.meta span{grid-area:1/2}
.meta .rm{grid-area:1/4}}
.balist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px var(--s-2);padding:var(--s-2) 0;font-size:var(--t-sm)}
.balist .who{grid-area:1/2}
.balist .amt{grid-area:1/3;font-weight:700;white-space:nowrap}
.bbar{position:relative;grid-column:1/-1;height:14px}
.bbar::before{content:"";position:absolute;inset:-6px auto -6px 50%;border-left:1px solid var(--ink-2)}
.bbar span{position:absolute;inset-block:3px;width:calc(var(--f)*(50% - 2px));border-radius:2px}
.bp{left:50%;background:var(--good)}
.bn{right:50%;background:var(--bad)}
@container (min-width:460px){.balist li{grid-template-columns:auto minmax(5rem,9rem) minmax(0,1fr);padding:0}
.bbar{grid-area:1/3;height:44px}
.bbar span{inset-block:13px;width:calc(var(--f)*(50% - 7.5rem))}
.balist .amt{margin-inline:calc(50% + var(--f)*(50% - 7.5rem) + 8px)}
.up .amt{justify-self:start;margin-right:0!important}
.down .amt{justify-self:end;margin-left:0!important}
}
.pos{color:var(--good)}
.neg{color:var(--bad)}
.setlist{counter-reset:s}
.setlist li{display:flex;align-items:baseline;gap:var(--s-2);min-height:44px;padding:var(--s-2) 0;border-bottom:var(--hl);font:500 var(--t-lg)/1.3 var(--serif)}
.setlist li::before{counter-increment:s;content:counter(s);width:1.5rem;font:600 var(--t-xs)/1 var(--sans);color:var(--ink-2)}
.setlist span:nth-of-type(3){display:flex;flex:1;gap:var(--s-2)}
.setlist span:nth-of-type(3)::after{content:"";flex:1;min-width:var(--s-4);border-bottom:1px dotted var(--edge);transform:translateY(-.3em)}
.setlist b{font:700 var(--t-md)/1.3 var(--sans)}
.empty{margin:0;padding:var(--s-4) 0;border-bottom:var(--hl);color:var(--ink-2);font:italic var(--t-md)/1.5 var(--serif)}
.c-footer{display:grid;gap:var(--s-2) var(--s-8);padding-block:0 var(--s-8);font-size:var(--t-sm);color:var(--ink-2)}
.c-footer h2{color:var(--ink)}
.c-footer p{margin:0}
.how{color:var(--ink);font-size:var(--t-md)}
@media (min-width:960px){.c-footer{grid-template-columns:1fr 2fr}
.c-footer h2{grid-row:span 2}}


/* tap-targets: comfortable phone taps -- the sizes win on phones, the page's own layout stays */
@media (max-width: 600px) {
  a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a), button, [role=button], [onclick], summary, select, input:not([type=hidden], [type=checkbox], [type=radio], [type=range]) { min-height: 44px !important; min-width: 44px !important; }
  :where(a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a)) { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
}