/* Expenses (docs/expenses-v1.md). The staff system's look (../app.css), made for a
   phone first: big boxes, one-tap choices, the Save button always in reach. */

body.xp main{max-width:1100px; padding:12px 14px 120px}
.xnav{display:flex; gap:6px; flex-wrap:wrap}
.xnav button{background:rgba(255,255,255,.10); border:0; color:var(--head-ink); padding:7px 12px; border-radius:8px;
  cursor:pointer; font-size:13.5px; font-weight:600; opacity:.85}
.xnav button:hover{opacity:1; background:rgba(255,255,255,.18)}
.xnav button[aria-current="true"]{background:var(--head-ink); color:var(--head); opacity:1}
.xnav .badge{display:inline-block; min-width:18px; padding:0 5px; margin-left:5px; border-radius:9px; font-size:11.5px;
  background:var(--amber-soft); color:var(--amber)}

/* ---------- quick entry ---------- */
.xform{max-width:560px; margin:0 auto; display:grid; gap:14px}
.xform .panel{padding:14px}
.xf{display:grid; gap:6px}
.xf > label, .xf > .lbl{font-size:13px; font-weight:600; color:var(--ink2)}
.xf .opt{font-weight:400; color:var(--ink3)}
.xf input[type=text], .xf input[type=search]{font-size:18px; padding:11px 12px; width:100%}
.xf input.big{font-size:22px; font-weight:700}
.xf .hint{font-size:12.5px; color:var(--ink2)}
.xf .hint.warn{color:var(--amber); font-weight:600}
.xrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
@media (max-width:420px){ .xrow{grid-template-columns:minmax(0,1fr)} }

/* one-tap choices */
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chips button{border:1px solid var(--rule2); background:var(--card); color:var(--ink); border-radius:999px;
  padding:8px 14px; font-size:15px; cursor:pointer; line-height:1.2}
.chips button:hover{border-color:var(--rule3)}
.chips button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-on); font-weight:600}
.chips button.add{border-style:dashed; color:var(--ink2)}
.chips button.more{border-color:transparent; color:var(--accent); font-weight:600}
.seg{display:flex; border:1px solid var(--rule2); border-radius:10px; overflow:hidden}
.seg button{flex:1; border:0; background:var(--card); padding:11px 6px; font-size:15px; cursor:pointer; color:var(--ink)}
.seg button + button{border-left:1px solid var(--rule2)}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-on); font-weight:700}

/* the date: the friendly text, with the phone's own date picker over it */
.xdate{position:relative; display:flex; align-items:center; gap:10px; border:1px solid var(--rule2); border-radius:10px;
  padding:10px 12px; background:var(--card); font-size:18px; font-weight:700; cursor:pointer}
.xdate .when{font-size:13px; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:2px 8px; border-radius:6px}
.xdate .when.other{color:var(--amber); background:var(--amber-soft)}
.xdate .tap{margin-left:auto; font-size:12.5px; font-weight:500; color:var(--ink3)}
.xdate input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0}

/* Particulars and what's remembered */
.sugg{display:grid; border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--card)}
.sugg:empty{display:none}
.sugg button{display:grid; text-align:left; gap:1px; border:0; background:none; padding:10px 12px; cursor:pointer; color:var(--ink)}
.sugg button + button{border-top:1px solid var(--rule)}
.sugg button:hover, .sugg button:focus{background:var(--sunken)}
.sugg .sn{font-size:16px; font-weight:600}
.sugg .sd{font-size:12.5px; color:var(--ink2)}
.remembered{font-size:12px; color:var(--accent); font-weight:600}
input.mono{font-family:var(--font-mono)}

/* the amount */
.peso{position:relative}
.peso::before{content:"₱"; position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:700; color:var(--ink3)}
.peso input{padding-left:34px !important}
.vatline{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; font-size:14px; color:var(--ink2)}
.vatline b{color:var(--ink); font-variant-numeric:tabular-nums}
.vatline .btn{margin-left:auto}
.vatedit{display:flex; gap:8px; align-items:center}
.vatedit input{max-width:160px}

/* the Save button, always in reach at the bottom of the screen */
.savebar{position:fixed; left:0; right:0; bottom:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(6px); border-top:1px solid var(--rule); padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.savebar .in{max-width:560px; margin:0 auto; display:flex; gap:10px; align-items:center}
.savebar .btn.primary{flex:1; font-size:18px; padding:13px; border-radius:12px}
.savebar .btn{padding:13px 16px; border-radius:12px}
.editing{font-size:13px; color:var(--amber); font-weight:600; text-align:center}

/* ---------- history and all expenses ---------- */
.xlist{display:grid; gap:8px}
.xday{font-size:13px; font-weight:700; color:var(--ink2); margin:12px 2px 0; font-family:var(--font-head)}
.xent{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; text-align:left; width:100%; padding:11px 13px;
  background:var(--card); border:1px solid var(--rule); border-radius:11px; cursor:pointer; color:var(--ink)}
.xent:hover{border-color:var(--rule3)}
.xent .p{font-weight:700; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.xent .a{font-weight:700; font-size:15.5px; font-variant-numeric:tabular-nums; text-align:right}
.xent .d{font-size:12.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.xent .v{font-size:12px; color:var(--ink3); text-align:right; font-variant-numeric:tabular-nums}
.xent.waiting{border-style:dashed; border-color:var(--amber)}
.xent.deleted .p, .xent.deleted .a{text-decoration:line-through; color:var(--ink3)}
.tag{display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:5px; margin-right:6px;
  background:var(--amber-soft); color:var(--amber)}
.tag.bad{background:var(--flag-soft); color:var(--flag)}

.xtools{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:12px}
.xtools label{font-size:13px; color:var(--ink2); display:flex; align-items:center; gap:5px}
.xtools select{width:auto; padding:6px 8px}
.xtools select.set{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.xtools input[type=search]{width:auto; min-width:160px; flex:1; max-width:280px}
.totals{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:8px; margin-bottom:10px}
.totals .t{background:var(--card); border:1px solid var(--rule); border-radius:11px; padding:10px 12px}
.totals .k{font-size:12px; color:var(--ink2)}
.totals .n{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums}
.bycat{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.bycat button{border:1px solid var(--rule); background:var(--sunken); border-radius:8px; padding:5px 10px; font-size:13px; cursor:pointer; color:var(--ink)}
.bycat button b{font-variant-numeric:tabular-nums; margin-left:6px}

/* the changes made to one entry */
.xhist{display:grid; gap:6px; font-size:13px}
.xhist .h{padding:8px 10px; background:var(--sunken); border-radius:8px}
.xhist .w{color:var(--ink2); font-size:12px}
.xhist .ch{margin-top:2px}
.xhist .ch s{color:var(--ink3)}

/* ---------- lists ---------- */
.xlists{display:grid; gap:14px; max-width:820px}
.xlists .panel{padding:14px}
.xlists h2{margin:0 0 4px; font-size:16px}
.xlists p.lead{margin:0 0 10px; font-size:13px; color:var(--ink2)}
.lrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 0; border-top:1px solid var(--rule)}
.lrow .nm{font-weight:600; margin-right:auto}
.lrow .nm.off{color:var(--ink3); text-decoration:line-through}
.lrow .meta{font-size:12.5px; color:var(--ink2)}
.alike{padding:10px 0 12px; border-top:1px solid var(--rule)}
.alike > .hint{font-size:12.5px; font-weight:600}
.alike .lrow .nm, .alike .lrow .meta{flex-basis:100%}
.alike .lrow .primary{margin-left:auto}
.alike .btnrow{margin-top:6px}
.signoutrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ---------- the stores' entries (1.3.0) ---------- */
.xpill.fixed{cursor:default; background:var(--sunken)}
.xpill.fixed .pv::after{content:none}
.backnote{padding:9px 12px; border-radius:10px; background:var(--flag-soft); color:var(--ink); font-size:14px}
.backnote b{color:var(--flag)}
.devsetup{margin-top:14px}
.devsetup p{margin:0 0 10px}
#modalhost textarea{width:100%; font:inherit; font-size:16px; padding:9px 11px}
/* who's entering, by ID card (1.4.0) */
.scanpanel{display:grid; gap:10px; text-align:center}
.scanpanel h2{margin:0}
.scanpanel .lead, .scanpanel .hint{margin:0; color:var(--ink2); font-size:14px}
.scanvideo{width:100%; max-width:420px; margin:0 auto; border-radius:12px; background:#000; aspect-ratio:4/3; object-fit:cover}
.scanpanel .btn.primary{font-size:17px; padding:13px}
.xpill.person{border-color:var(--accent)}
.xpill.person .pl{color:var(--accent)}
.xpill.person .pv::after{content:none}
.paircode{font-family:var(--font-mono); font-size:32px; font-weight:700; letter-spacing:.06em; text-align:center; padding:6px 0; white-space:nowrap}
.typedform{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; border-top:1px solid var(--rule); padding-top:10px}
.typedform .hint{flex-basis:100%; margin:0}
.typedform input{max-width:200px; font-size:17px; text-align:center; text-transform:uppercase}
.btn.on{border-color:var(--accent); color:var(--accent)}
.paircodein{font-family:var(--font-mono); font-size:26px !important; letter-spacing:.15em; text-align:center}
/* Check: the list, and the entry open beside it on a wide screen (alone on a phone) */
.twopane{display:grid; gap:14px}
.twopane .tlist > .hint{font-size:13px; color:var(--ink2); margin:0 0 8px}
.twopane .empty.pick{display:none}
.twopane.open .tlist{display:none}
.xent.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
@media (min-width:900px){
  .twopane{grid-template-columns:minmax(300px, 380px) minmax(0, 1fr); align-items:start}
  .twopane.open .tlist{display:block}
  .twopane .empty.pick{display:block}
  .twopane .tlist{position:sticky; top:12px; max-height:calc(100vh - 140px); overflow:auto}
  .twopane .tpane .xform{margin:0}
}

@media (min-width:900px){
  .xall .xlist{grid-template-columns:repeat(2, minmax(0,1fr))}
  .xall .xday{grid-column:1 / -1}
}
.remembered:empty, .xf .hint.warn:empty{display:none}

/* ---------- quick entry, compact: one phone screen, no scrolling (1.1.0) ---------- */
.xform.compact{gap:8px}
.xstrip{display:flex; gap:6px; flex-wrap:wrap; align-items:stretch}
.xpill{position:relative; display:grid; text-align:left; gap:0; min-height:44px; padding:5px 11px; border-radius:10px;
  border:1px solid var(--rule2); background:var(--card); color:var(--ink); cursor:pointer; font:inherit; min-width:0}
.xpill .pl{font-size:10.5px; font-weight:600; color:var(--ink3); line-height:1.2}
.xpill .pv{font-size:15px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xpill .pv::after{content:" ▾"; font-size:11px; color:var(--ink3); font-weight:400}
.xpill.empty .pv{color:var(--accent)}
.xstrip > .xpill:first-child{flex:1 1 40%}
.xstrip .who{flex:0 1 auto; max-width:30%}
.xdatepill .pl{color:var(--accent)}
.xdatepill.other .pl{color:var(--amber)}
.xdatepill input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0}

.fl{position:relative; display:block; border:1px solid var(--rule2); border-radius:10px; background:var(--card);
  padding:16px 11px 5px; min-height:48px; cursor:text; min-width:0}
.fl:focus-within{border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 18%,transparent)}
.fl .fll{position:absolute; top:4px; left:11px; font-size:10.5px; font-weight:600; color:var(--ink3); pointer-events:none}
body.xp .fl input[type=text]{border:0; background:none; padding:0; font-size:16px; width:100%; box-shadow:none; outline:none; min-height:24px}
body.xp .fl.big input[type=text]{font-size:19px; font-weight:700}
.fl.peso .fll::after{content:" ₱"; font-weight:700}
.rel{position:relative}
.rel .sugg{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:6; box-shadow:var(--shadow)}
.xrow2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px}
.xrow2 .seg button{padding:8px 4px; font-size:14px; min-height:48px}
.xrow2.paynote{grid-template-columns:auto minmax(0,1fr)}
.xform.compact .vatline{font-size:13px; padding:0 2px}
.xform.compact .vatline:empty{display:none}
.xform.compact > .hint.warn{padding:0 2px; font-size:12.5px}
.remembered{padding:0 2px; font-size:12px}
.chips.strip{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:1px 0 3px; margin:0 -14px; padding-left:14px; padding-right:14px;
  scroll-padding:0 14px}
.chips.strip::-webkit-scrollbar{display:none}
.chips.strip button{flex:none; min-height:42px}
.chips.sheet{gap:8px}
.chips.sheet button{min-height:44px}
.xstrip{flex-wrap:nowrap}
.xstrip > .xpill:first-child{flex:1 1 0}
.xstrip .xdatepill{flex:none}
.xstrip .who{flex:0 1 auto; max-width:28%}
.xrow2 .seg button{white-space:nowrap; font-size:13.5px; padding:8px 2px}
.fl.peso .fll::after{content:none}
.fl.peso::before{content:"₱"; position:absolute; left:11px; bottom:7px; top:auto; transform:none; font-size:17px; font-weight:700; color:var(--ink3)}
body.xp .fl.peso input[type=text]{padding-left:15px !important}
body.xp .fl input.mono{font-size:15px; letter-spacing:-.02em}
/* With a mouse (a computer) or room to spare, every category shows, wrapped: a row that
   only slides sideways is hard to work with a mouse wheel (1.1.1) */
@media (hover:hover) and (pointer:fine), (min-width:600px){
  .chips.strip{flex-wrap:wrap; overflow-x:visible; margin:0; padding:1px 0 3px}
}