/* Costs and Shopping, the private tabs, drawn in the app beside the sheet's frame.
   The sheet's own token names are mapped onto the app's palette here, so these rules read the
   same as they did inside the sheet. Everything is scoped to .xp. */
#wed .xp{--paper:var(--card);--moss:#5a6a48;--moss-soft:#dfe3d2;--lantern:#7d6548;--lantern-soft:#eadfcd;--warn:#9b3b22;--umber:#36302a;
  padding-top:22px;font-family:var(--body);color:var(--ink)}
.xp h2{font-family:var(--display);font-weight:400;font-size:2.1rem;margin:0 0 4px}
.xp .lede{color:var(--ink-2);margin:6px 0 0}
.xp .eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--moss)}
.xp .skel{border:1px dashed var(--line);border-radius:10px;padding:20px;color:var(--ink-2);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-align:center}
.xp .errbar{margin:12px 0;padding:12px 15px;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:8px;background:var(--paper);color:var(--ink-2)}

.xp .btots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.xp .btot{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0;text-align:left;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.xp button.btot{cursor:pointer}
.xp .btot span{display:block;font-size:.78rem;letter-spacing:.03em;color:var(--ink-2)}
.xp .btot b{display:block;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp .btot.due b{color:var(--warn)}
.xp .btot.in b{color:var(--moss)}
.xp .btot[aria-pressed="true"]{background:var(--moss-soft);border-color:var(--moss);box-shadow:inset 0 0 0 1px var(--moss)}
.xp .btot.net{background:none;border-style:dashed}
@media (max-width:560px){
  .xp .btots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xp .btot{padding:8px 10px}
  .xp .btot.net{grid-column:1 / -1}
}

.xp .bbar{display:flex;flex-direction:column;gap:10px;margin:12px 0 0}
.xp .bbar input,.xp .bbar select{height:44px;border:1px solid var(--line);border-radius:10px;background-color:var(--paper);color:var(--ink);font:inherit;font-size:1rem;-webkit-appearance:none;appearance:none}
.xp .bbar input{width:100%;padding:0 12px}
.xp .bbar input::placeholder{color:var(--ink-2)}
.xp .picks{display:flex;gap:8px}
.xp .picks select{flex:1;min-width:0;padding:0 34px 0 12px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:right 17px center,right 11px center;background-size:6px 6px;background-repeat:no-repeat}
.xp .picks #w-sort{flex:0 1 42%}
.xp .bbar input:focus-visible,.xp .bbar select:focus-visible,.xp button.btot:focus-visible{outline:2px solid var(--moss);outline-offset:2px}

.xp #w-txlist{margin-top:6px}
.xp .bmonth{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:18px 2px 6px;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.xp .bmonth b{letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.xp .bgroup{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.xp .brow{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-top:1px solid var(--line)}
.xp .brow:first-child{border-top:0}
.xp .shopitem{cursor:pointer}
.xp .shopitem input{width:22px;height:22px;flex:none;accent-color:var(--moss)}
.xp .shopitem input:checked + .bmain{opacity:.5;text-decoration:line-through;text-decoration-color:var(--tan)}
.xp .bmain{flex:1;min-width:0}
.xp .bnm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp .bsub{display:flex;align-items:center;gap:6px;min-width:0;font-size:.82rem;color:var(--ink-2)}
.xp .bsub .bwhen{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp .bamt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.xp .bamt.in{color:var(--moss)}
.xp .btag{flex:none;padding:1px 7px;border-radius:9px;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--lantern);background:var(--lantern-soft)}
.xp .btag.late{color:var(--warn);background:#f1d9d0}
.xp .btag.quiet{background:none;color:var(--ink-2);border:1px solid var(--line)}
.xp .bnone{padding:32px 4px;text-align:center;color:var(--ink-2)}

.xp .vendorlist{margin-top:22px;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden}
.xp .vendorlist.totals{margin-top:12px}
.xp .vrow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 15px;border-top:1px solid var(--line)}
.xp .vrow:first-child{border-top:none}
.xp .vrow .vn{font-weight:700}
.xp .vrow .vr{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.xp .gamt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.xp .lamt{font-variant-numeric:tabular-nums;white-space:nowrap}
.xp .gamt.good{color:var(--moss)}
.xp .gamt.warn{color:var(--warn)}

/* Shopping: each store is a drop-down, and two small buttons open or close them all */
.xp .shophead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.xp .shopbtns{display:flex;gap:6px}
.xp .shopbtns button{font:inherit;font-size:.74rem;line-height:1;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.xp .shopbtns button:active{background:var(--moss-soft)}
.xp .shopstore summary{list-style:none;cursor:pointer;align-items:center;padding:12px 2px;-webkit-tap-highlight-color:transparent}
.xp .shopstore summary::-webkit-details-marker{display:none}
.xp .shopstore summary span{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.xp .shopstore summary span::before{content:"";width:7px;height:7px;flex:none;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(-45deg);transition:transform .15s}
.xp .shopstore[open] summary span::before{transform:rotate(45deg)}
.xp .shopstore[open] .bgroup{margin-bottom:6px}