/* ============ TOKENS ============ */
:root{
  --paper:#F2EFE6;        /* thermal paper */
  --paper-hi:#FBF9F2;     /* receipt card */
  --ink:#191714;          /* thermal ink */
  --ink-faint:#8A857A;    /* faded print */
  --stamp:#D6362B;        /* rubber-stamp red */
  --stamp-ink:#B32A21;
  --ok:#1F7A4D;           /* PAID green */
  --line:#D9D4C5;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Archivo',system-ui,sans-serif;
  --rad:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* overscroll-behavior kills pull-to-refresh: on mobile Chrome/Safari a downward
   swipe near the top reloads the page, which used to wipe a half-finished split.
   Set on both html and body — browsers disagree about which one the viewport
   takes the value from. */
html{font-size:16px;overscroll-behavior-y:contain}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--disp);
  min-height:100dvh;
  overscroll-behavior-y:contain;
  /* faint paper grain */
  background-image:radial-gradient(rgba(25,23,20,.028) 1px, transparent 1px);
  background-size:5px 5px;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit;color:inherit}
input:focus-visible,button:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.app{max-width:480px;margin:0 auto;padding:0 16px 120px;position:relative}

/* ============ STICKY TOP BAR (title + progress) ============ */
/* pinned so the step rail — the overall progress — stays visible on every screen.
   negative side margins let the opaque background bleed past .app's padding. */
.topbar{
  position:sticky;top:0;z-index:20;
  margin:0 -16px;padding:0 16px 14px;
  background:var(--paper);
}
/* soft fade so content slides under the bar instead of colliding with it */
.topbar::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  background:linear-gradient(var(--paper), rgba(242,239,230,0));
  pointer-events:none;
}
/* condense once scrolled — keeps the rail on screen without eating the viewport */
.topbar.compact header{padding:10px 2px 6px}
.topbar.compact .logo{font-size:1.25rem}
.topbar.compact .logo small{display:none}

/* ============ HEADER ============ */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 2px 10px;transition:padding .15s ease;
}
.logo{
  font-family:var(--disp);
  font-weight:900;font-stretch:80%;
  font-size:1.55rem;letter-spacing:-.03em;line-height:1;
  text-transform:uppercase;transition:font-size .15s ease;
}
.logo em{font-style:normal;color:var(--stamp)}
.logo small{
  display:block;font-family:var(--mono);font-weight:400;font-size:.6rem;
  letter-spacing:.14em;color:var(--ink-faint);text-transform:uppercase;margin-top:4px;
}
.gear{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  border:1.5px solid var(--ink);border-radius:99px;padding:7px 13px;
  background:var(--paper-hi);
}
.hbtns{display:flex;gap:8px;flex:none}
.gear.danger{border-color:var(--stamp);color:var(--stamp)}

/* ============ STEP RAIL (receipt tear line) ============ */
.rail{
  display:flex;gap:0;align-items:center;margin:6px 0 0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;color:var(--ink-faint);
  text-transform:uppercase;
}
.rail .dot{
  width:22px;height:22px;border-radius:50%;
  border:1.5px dashed var(--ink-faint);
  display:grid;place-items:center;font-weight:700;flex:none;background:var(--paper);
}
.rail .seg{flex:1;border-top:1.5px dashed var(--line);margin:0 4px}
.rail .st{display:flex;align-items:center;gap:6px}
.rail .st.on .dot{border:1.5px solid var(--stamp);color:var(--stamp);background:var(--paper-hi)}
.rail .st.done .dot{border-style:solid;background:var(--ink);border-color:var(--ink);color:var(--paper-hi)}
.rail .lbl{display:none}
.rail .st.on .lbl{display:inline;color:var(--ink);font-weight:700}

/* ============ RECEIPT CARD ============ */
.receipt{
  background:var(--paper-hi);
  border-radius:4px;
  padding:22px 18px 26px;
  position:relative;
  box-shadow:0 1px 0 rgba(25,23,20,.12), 0 10px 24px -14px rgba(25,23,20,.35);
}
/* perforated bottom edge */
.receipt::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:14px;
  background:radial-gradient(circle at 7px 0, transparent 6.2px, var(--paper-hi) 6.6px);
  background-size:14px 14px;background-position:0 7px;background-repeat:repeat-x;
  filter:drop-shadow(0 2px 2px rgba(25,23,20,.10));
}
.receipt + .receipt, .receipt + .btn-row, .stack > * + *{margin-top:26px}

.r-head{
  text-align:center;font-family:var(--mono);
  border-bottom:1.5px dashed var(--line);padding-bottom:12px;margin-bottom:14px;
}
.r-head h2{font-family:var(--disp);font-weight:900;font-stretch:75%;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase}
.r-head p{font-size:.66rem;color:var(--ink-faint);letter-spacing:.1em;margin-top:4px;text-transform:uppercase}
/* editable receipt title (the merchant name on the items screen) */
.r-title{
  display:block;width:100%;text-align:center;background:transparent;
  font-family:var(--disp);font-weight:900;font-stretch:75%;font-size:1.05rem;
  letter-spacing:.02em;text-transform:uppercase;
  border:none;border-bottom:1.5px dotted var(--line);padding:2px 0 5px;
}
.r-title::placeholder{color:var(--ink-faint)}
.r-title:focus{border-bottom:1.5px solid var(--stamp);outline:none}

/* ============ BUTTONS ============ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px;border-radius:var(--rad);
  font-weight:800;font-size:1rem;font-stretch:90%;letter-spacing:.01em;
  border:1.5px solid var(--ink);
  transition:transform .06s ease;
  user-select:none;
}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:var(--paper-hi)}
.btn-stamp{background:var(--stamp);border-color:var(--stamp-ink);color:#fff}
.btn-ghost{background:var(--paper-hi)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* ============ SCAN SCREEN ============ */
.scan-hero{
  text-align:center;padding:8px 4px 4px;
}
.scan-hero h1{
  font-weight:900;font-stretch:70%;font-size:2.5rem;line-height:.98;
  letter-spacing:-.02em;text-transform:uppercase;
}
.scan-hero h1 .flip{color:var(--stamp);display:inline-block}
.scan-hero p{font-family:var(--mono);font-size:.74rem;color:var(--ink-faint);margin-top:10px;line-height:1.6}
.drop{
  margin-top:18px;border:2px dashed var(--ink-faint);border-radius:var(--rad);
  padding:26px 16px;text-align:center;background:var(--paper-hi);
}
.drop img{max-width:100%;max-height:280px;border-radius:8px;box-shadow:0 4px 14px rgba(25,23,20,.2)}
.drop .hint{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);margin-top:10px}
.privacy{
  font-family:var(--mono);font-size:.64rem;line-height:1.7;
  color:var(--ink-faint);text-align:center;margin-top:12px;padding:0 4px;
}

/* stamp animation while parsing */
.stamp-wait{text-align:center;padding:30px 0 10px}
.stamp-mark{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:.9rem;
  color:var(--stamp);border:3px solid var(--stamp);border-radius:8px;
  padding:8px 18px;letter-spacing:.2em;text-transform:uppercase;
  transform:rotate(-6deg);animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.35}}
.stamp-wait p{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);margin-top:14px}

/* ============ ITEMS ============ */
.line-item{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.85rem;
  padding:9px 0;border-bottom:1px dotted var(--line);
}
.line-item input{
  background:transparent;border:none;border-bottom:1px solid transparent;
  font-family:var(--mono);font-size:.85rem;padding:2px 0;
}
.line-item input:focus{border-bottom:1px solid var(--stamp);outline:none}
.li-name{flex:1;min-width:0}
.li-price{width:84px;text-align:right}
.li-del{color:var(--ink-faint);font-size:1rem;padding:4px 6px}
.li-fee .li-name, .li-fee .li-price{color:var(--stamp)}
.li-disc .li-name, .li-disc .li-price{color:var(--ok)}
.fee-tag{font-size:.55rem;border:1px solid var(--stamp);color:var(--stamp);border-radius:4px;padding:1px 5px;letter-spacing:.05em}
.disc-tag{font-size:.55rem;border:1px solid var(--ok);color:var(--ok);border-radius:4px;padding:1px 5px;letter-spacing:.05em}
.totline{
  display:flex;justify-content:space-between;font-family:var(--mono);
  font-weight:700;font-size:.95rem;padding-top:14px;
}
.add-line{
  width:100%;text-align:left;font-family:var(--mono);font-size:.78rem;
  color:var(--ink-faint);padding:12px 0 2px;
}
.cur-row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--ink-faint);text-transform:uppercase;margin-bottom:8px;
}
.cur-row select{
  font-family:var(--mono);font-size:.85rem;color:var(--ink);
  border:1.5px solid var(--line);border-radius:8px;background:var(--paper);
  padding:5px 8px;
}

/* ============ PEOPLE ============ */
.people-input{display:flex;gap:8px;margin-bottom:14px}
.people-input input{
  flex:1;padding:13px 14px;border:1.5px solid var(--ink);border-radius:var(--rad);
  background:var(--paper-hi);font-size:1rem;
}
.people-input .btn{width:auto;padding:0 20px;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.82rem;font-weight:500;
  border:1.5px solid var(--ink);border-radius:99px;padding:8px 8px 8px 14px;
  background:var(--paper-hi);
}
.chip b{font-family:var(--disp);font-weight:800}
.chip button{color:var(--ink-faint);font-size:.95rem;line-height:1;padding:2px 6px}
.chip .avatar{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:.62rem;font-weight:800;font-family:var(--disp);flex:none;
}

/* ============ ASSIGN ============ */
.assign-item{padding:14px 0;border-bottom:1.5px dashed var(--line)}
.assign-item:last-child{border-bottom:none}
.ai-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.85rem;font-weight:700;margin-bottom:10px;gap:10px}
.ai-top .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill-row{display:flex;flex-wrap:wrap;gap:7px}
.pill{
  font-family:var(--mono);font-size:.74rem;font-weight:500;
  border:1.5px solid var(--line);border-radius:99px;padding:7px 13px;
  background:var(--paper);color:var(--ink-faint);
  transition:transform .06s ease;
}
.pill:active{transform:scale(.94)}
.pill.on{border-color:var(--ink);background:var(--ink);color:var(--paper-hi);font-weight:700}
.pill-all{border-style:dashed;border-color:var(--ink);color:var(--ink)}
.pill-all.on{border-style:solid;border-color:var(--ink);background:var(--ink);color:var(--paper-hi)}
.assign-help{font-family:var(--mono);font-size:.66rem;color:var(--ink-faint);text-align:center;margin-bottom:8px;line-height:1.6}
.warn{font-family:var(--mono);font-size:.68rem;color:var(--stamp);margin-top:4px}
.bill-compare{margin:22px 0 0}
/* centered pill + chevron so it reads as a tappable dropdown, not a caption */
.bill-compare summary{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:max-content;max-width:100%;margin:0 auto;
  font-family:var(--mono);font-size:.72rem;color:var(--ink-faint);
  cursor:pointer;padding:10px 16px;list-style:none;
  border:1.5px dashed var(--line);border-radius:99px;background:var(--paper-hi);
}
.bill-compare summary::-webkit-details-marker{display:none}
.bill-compare summary .chev{font-size:.55rem;transition:transform .15s ease}
.bill-compare[open] summary{color:var(--ink);border-color:var(--ink-faint)}
.bill-compare[open] summary .chev{transform:rotate(180deg)}
.bill-compare img{display:block;width:100%;margin-top:8px;border-radius:8px;box-shadow:0 4px 14px rgba(25,23,20,.2)}

/* ============ RESULTS ============ */
.pay-card{position:relative;overflow:hidden}
.pay-head{display:flex;align-items:center;gap:12px;border-bottom:1.5px dashed var(--line);padding-bottom:12px;margin-bottom:12px}
.pay-head .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-family:var(--disp);font-size:1rem}
.pay-head .who{flex:1}
.pay-head .who b{font-size:1.05rem;font-weight:800;font-stretch:85%;display:block}
.pay-head .who span{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase}
.pay-amt{font-family:var(--mono);font-weight:700;font-size:1.35rem;letter-spacing:-.02em}
.pay-lines{font-family:var(--mono);font-size:.74rem}
.pay-lines .pl{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:var(--ink)}
.pay-lines .pl span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-lines .pl.fee{color:var(--stamp)}
.pay-lines .pl.disc{color:var(--ok)}
.pay-lines .pl small{color:var(--ink-faint)}
.grand{
  text-align:center;font-family:var(--mono);margin-top:4px;
  font-size:.72rem;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;
}
.grand b{display:block;font-size:1.5rem;color:var(--ink);letter-spacing:-.02em;margin-top:4px}
.big-stamp{
  position:absolute;right:-6px;top:6px;transform:rotate(10deg);
  font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.18em;
  color:var(--stamp);border:2.5px solid var(--stamp);border-radius:6px;
  padding:5px 10px;opacity:.85;text-transform:uppercase;
}

/* ============ FOOTER NAV ============ */
.foot{
  position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--paper) 30%);
  pointer-events:none;
  transition:transform .18s ease;
}
/* iOS keeps the layout viewport at full height when the on-screen keyboard opens,
   so this bar holds its old slot and ends up floating halfway up the screen, on
   top of the content. Nothing pins it above the keyboard reliably across iOS
   versions, so get it out of the way — the keyboard would cover it anyway.
   Set from app.js via visualViewport; Android shrinks the layout viewport itself
   and never gets the class. */
.foot.kb-open{transform:translateY(110%);visibility:hidden}
.foot .inner{max-width:480px;margin:0 auto;display:flex;gap:10px;pointer-events:auto}
.foot .btn{flex:1}
.hide{display:none!important}

/* ============ SETTINGS SHEET ============ */
.sheet-bg{position:fixed;inset:0;background:rgba(25,23,20,.45);z-index:40}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:41;
  background:var(--paper-hi);border-radius:18px 18px 0 0;
  padding:22px 20px calc(26px + env(safe-area-inset-bottom));
  max-width:480px;margin:0 auto;
}
.sheet h3{font-weight:900;font-stretch:80%;text-transform:uppercase;font-size:1rem;margin-bottom:6px}
.sheet p{font-family:var(--mono);font-size:.68rem;color:var(--ink-faint);line-height:1.7;margin-bottom:14px}
.sheet input{
  width:100%;padding:13px 14px;border:1.5px solid var(--ink);border-radius:var(--rad);
  background:var(--paper);font-family:var(--mono);font-size:.85rem;margin-bottom:12px;
}
.sheet select{
  width:100%;padding:13px 14px;border:1.5px solid var(--ink);border-radius:var(--rad);
  background:var(--paper);font-family:var(--mono);font-size:.85rem;margin-bottom:12px;
  -webkit-appearance:none;appearance:none;
}
.err{
  font-family:var(--mono);font-size:.72rem;color:var(--stamp);
  border:1.5px solid var(--stamp);border-radius:var(--rad);
  padding:12px 14px;margin-top:14px;line-height:1.6;background:var(--paper-hi);
}