/* Slate.
   Built for a 390px phone held in one hand in a dark bar, then allowed to grow.
   Big targets, high contrast, no framework. */

:root{
  --ink:#10151B; --body:#2A3440; --muted:#6B7783; --faint:#98A2AD;
  --paper:#FFFFFF; --card:#F4F6F8; --rule:#DDE3E8;
  --accent:#14513E; --accent-soft:#E8F1ED;
  --hot:#8C2F1E; --hot-soft:#FBEDEA;
  --tap:#0F6B4F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F2F0EB; --body:#D6DCE3; --muted:#98A4B0; --faint:#77828E;
    --paper:#12171D; --card:#1B222A; --rule:#2C353F;
    --accent:#7FC3A6; --accent-soft:#16261F;
    --hot:#E8917E; --hot-soft:#2A1A16;
    --tap:#2E9E77;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--body);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{ max-width:560px; margin:0 auto; padding:14px 14px 40px; }
.wrap.narrow{ max-width:380px; padding-top:48px; }

h1{ font-size:1.35rem; color:var(--ink); margin:4px 0 6px; }
h2{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent); margin:22px 0 7px; padding-bottom:4px;
    border-bottom:1px solid var(--rule); }
p{ margin:0 0 8px; }
.muted{ color:var(--muted); }
.sm{ font-size:.82rem; }
.bad{ color:var(--hot); font-weight:600; }
a{ color:var(--accent); }

.bar{ display:flex; align-items:center; justify-content:space-between;
      gap:10px; padding-bottom:9px; border-bottom:1px solid var(--rule); margin-bottom:12px; }
.counter{ font-weight:700; color:var(--ink); letter-spacing:.02em; }
.queued{ font-size:.76rem; color:var(--hot); background:var(--hot-soft);
         padding:3px 8px; border-radius:99px; }

/* buttons: nothing under 52px, because this is used with one thumb */
button{ font:inherit; cursor:pointer; }
.big{ display:block; width:100%; min-height:56px; margin:8px 0 0;
      border:none; border-radius:12px; background:var(--accent); color:#fff;
      font-size:1.05rem; font-weight:650; }
.big:disabled{ background:var(--rule); color:var(--faint); }
.big.go{ background:var(--tap); margin-top:14px; }
.stack .big{ margin-top:10px; }
.back{ background:none; border:none; color:var(--muted); padding:6px 0; font-size:.9rem; }

.search{ width:100%; min-height:56px; padding:0 14px; font-size:1.05rem;
         color:var(--ink); background:var(--card);
         border:1px solid var(--rule); border-radius:12px; }
.search:focus{ outline:2px solid var(--accent); outline-offset:1px; }

.results{ margin-top:10px; }
.hit{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
      width:100%; min-height:60px; padding:10px 14px; margin-bottom:8px;
      text-align:left; background:var(--card); color:var(--body);
      border:1px solid var(--rule); border-radius:12px; }
.hit-name{ font-weight:650; color:var(--ink); font-size:1.02rem; }
.hit-state{ font-size:.84rem; color:var(--muted); }

.who{ margin:10px 0 4px; }
.who b{ color:var(--ink); font-size:1.08rem; display:block; }

.amount{ display:flex; align-items:baseline; justify-content:center; gap:4px;
         padding:14px 0 8px; color:var(--ink); }
.amount .cur{ font-size:1.2rem; color:var(--muted); }
#amt{ font-size:2.6rem; font-weight:700; font-variant-numeric:tabular-nums; }

.pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px; }
.pad button{ min-height:60px; font-size:1.3rem; font-weight:600;
             color:var(--ink); background:var(--card);
             border:1px solid var(--rule); border-radius:12px; }
.pad button:active{ background:var(--accent-soft); }
.pad button:disabled{ opacity:0; pointer-events:none; }

.dots{ display:flex; gap:12px; justify-content:center; padding:16px 0 4px; }
.dots i{ width:15px; height:15px; border-radius:50%;
         border:2px solid var(--rule); background:transparent; }
.dots i.on{ background:var(--accent); border-color:var(--accent); }

.done{ padding:26px 16px; margin:16px 0; text-align:center; font-size:1.08rem;
       color:var(--ink); background:var(--accent-soft); border-radius:12px; }
.done.bad{ background:var(--hot-soft); color:var(--hot); }

/* owner */
.headline{ display:flex; flex-direction:column; gap:1px; margin:6px 0 10px; }
.big-num{ font-size:2.1rem; font-weight:700; color:var(--ink);
          font-variant-numeric:tabular-nums; }
.warn{ background:var(--hot-soft); color:var(--hot); padding:8px 12px;
       border-radius:10px; font-size:.9rem; }
.today{ list-style:none; margin:0; padding:0; }
.today li{ padding:7px 0; border-bottom:1px solid var(--rule); font-size:.95rem; }
.today b{ color:var(--ink); }

.sec{ border-bottom:1px solid var(--rule); }
.sec > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
    font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent); padding:15px 2px; user-select:none; }
.sec > summary::-webkit-details-marker{ display:none; }
.sec > summary::before{ content:""; width:7px; height:7px; border-right:2px solid var(--accent);
    border-bottom:2px solid var(--accent); transform:rotate(-45deg); transition:transform .15s;
    flex:none; margin-right:2px; }
.sec[open] > summary::before{ transform:rotate(45deg); }
.sec > summary:hover{ color:var(--tap); }
.sec .tally{ margin-left:auto; font-size:.7rem; letter-spacing:.04em; color:var(--muted);
    background:var(--card); border-radius:20px; padding:2px 9px; font-weight:600; }
.sec-body{ padding:2px 0 16px; }

.manage-list{ list-style:none; margin:0 0 4px; padding:0; }
.manage-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px;
                 padding:11px 13px; margin:0 0 8px; background:var(--card);
                 border-radius:12px; }
.manage-list li.empty{ background:none; padding:8px 2px; color:var(--muted); }
.manage-list li.off{ opacity:.62; }
.manage-list .who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.manage-list .who b{ color:var(--ink); font-size:1rem; }
.manage-list .who .meta{ color:var(--muted); font-size:.8rem; }
.stmt-h{ font-size:1.05rem; color:var(--ink); margin:16px 0 2px; }
.entry b{ font-variant-numeric:tabular-nums; }
.entry.payment b{ color:var(--accent); }
.entry.voided{ opacity:.5; }
.entry.voided b{ text-decoration:line-through; }
.entry .void{ display:block; color:var(--hot); font-size:.78rem; margin-top:2px; }
.voidform{ display:flex; gap:6px; align-items:center; flex:none; margin:0; }
.voidform .mini{ width:88px; }

.actions{ display:flex; gap:6px; flex:none; }
.manage{ margin:0; flex:none; }
button.link{ background:var(--paper); border:1px solid var(--rule); border-radius:9px;
             padding:8px 13px; font:inherit; font-size:.85rem; cursor:pointer;
             color:var(--body); white-space:nowrap; }
button.link:hover{ border-color:var(--accent); color:var(--accent); }
button.link.danger{ color:var(--hot); border-color:transparent; background:var(--hot-soft); }
button.link.danger:hover{ border-color:var(--hot); }

table{ width:100%; border-collapse:collapse; }
th{ text-align:left; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); padding:0 8px 6px 0; border-bottom:1px solid var(--rule); }
td{ padding:9px 8px 9px 0; border-bottom:1px solid var(--rule); vertical-align:top;
    font-size:.95rem; }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.age.hot{ color:var(--hot); font-weight:600; }
.pay{ display:flex; gap:5px; justify-content:flex-end; }
.mini{ width:82px; min-height:38px; padding:0 8px; font-size:.9rem; text-align:right;
       color:var(--ink); background:var(--card);
       border:1px solid var(--rule); border-radius:8px; }
.pay button{ min-height:38px; padding:0 11px; border:none; border-radius:8px;
             background:var(--accent); color:#fff; font-size:.86rem; font-weight:600; }
.foot{ margin-top:20px; padding-top:10px; border-top:1px solid var(--rule); }

@media (min-width:560px){
  .pad button{ min-height:66px; }
}