/* ================================================================
   Payment Approval Form — Apple / iOS-style UI
   ================================================================ */
:root{
  color-scheme:light;           /* always light — native controls stay light */
  /* Apple system palette (light) */
  --bg:#dfe2e9;                 /* grouped background (darkened for card contrast) */
  --card:#ffffff;               /* secondarySystemGroupedBackground */
  --card-2:#f9f9fb;
  --fill:rgba(118,118,128,.12); /* tertiary system fill (inputs) */
  --fill-strong:rgba(118,118,128,.20);
  --separator:rgba(60,60,67,.29);
  --separator-2:rgba(60,60,67,.12);
  --label:#1c1c1e;
  --label-2:#3c3c4399;          /* secondary */
  --label-3:#3c3c434d;          /* tertiary / placeholder */
  --blue:#007aff;
  --blue-press:#0060df;
  --blue-tint:rgba(0,122,255,.12);
  --green:#34c759;
  --green-tint:rgba(52,199,89,.14);
  --red:#ff3b30;
  --nav-bg:rgba(249,249,251,.8);
  --navbar:#1f3358;              /* solid colored bottom tab bar */

  /* legacy aliases used by the form-output/print block */
  --navy:var(--label);
  --line:var(--separator-2);
  --muted:var(--label-2);
  --accent:var(--green);
  --accent-d:#248a3d;
  --danger:var(--red);
  --text:var(--label);

  --radius-card:16px;
  --radius-ctrl:12px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --topbar-h:50px;
  --tabbar-h:56px;
  --actionbar-h:62px;

  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
[hidden]{display:none!important;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--label);
  font-size:16px;
  line-height:1.4;
  overscroll-behavior-y:none;
  letter-spacing:-.01em;
}
button{font-family:inherit;cursor:pointer;color:inherit;}
/* No lingering focus ring after a tap/click (it reads as a double outline);
   keyboard users still get a visible ring via :focus-visible. */
button:focus{outline:none;}
button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
input,textarea,select{font-family:inherit;}

#app{max-width:600px;margin:0 auto;min-height:100vh;position:relative;}

/* ---------- Pull to refresh ---------- */
.ptr{
  position:fixed;top:calc(var(--safe-t) + 6px);left:50%;z-index:40;
  width:34px;height:34px;border-radius:50%;
  background:var(--card);box-shadow:0 4px 14px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;
  transform:translateX(-50%) translateY(-60px);opacity:0;
  transition:opacity .2s;pointer-events:none;
}
.ptr__spin{
  width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--separator);border-top-color:var(--blue);
  transition:transform .1s;
}
.ptr.is-ready .ptr__spin{transform:rotate(180deg);}
.ptr.is-refreshing .ptr__spin{animation:ptr-spin .7s linear infinite;}
@keyframes ptr-spin{to{transform:rotate(360deg);}}

/* ---------- Nav bar (translucent, iOS) ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding-top:var(--safe-t);
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--separator);
  display:flex;align-items:center;gap:4px;padding-left:8px;padding-right:8px;
}
.topbar__title{font-weight:600;font-size:17px;flex:1;text-align:center;letter-spacing:-.02em;color:var(--label);}
.topbar__back,.topbar__action{
  background:transparent;border:0;color:var(--blue);
  font-size:17px;font-weight:400;height:40px;min-width:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.topbar__back{font-size:30px;font-weight:300;}
.topbar__action{font-size:26px;font-weight:300;}
.topbar__back:active,.topbar__action:active{opacity:.4;}
.topbar__icon{font-size:0;}
/* text + icon action buttons */
.topbar__btn{
  gap:5px;padding:0 12px;font-size:16px;font-weight:590;
  letter-spacing:-.01em;width:auto;
}
.topbar__btn svg{flex:none;}
.topbar__icon svg{display:block;}

/* ---------- Views ---------- */
.view{
  padding:16px 16px 8px;
}
/* Queue and History have no in-flow action bar, so they clear the fixed tab bar */
.view--queue,
.view--history{padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 20px);}
.view--preview{padding:0 0 8px;background:var(--bg);}

/* ---------- Cards (inset grouped) ---------- */
.card{
  background:var(--card);
  border-radius:var(--radius-card);
  padding:16px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
}
.card__title{
  margin:0 0 14px;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;color:var(--label-2);
}
.card__hint{margin:-8px 0 14px;font-size:13px;color:var(--label-2);line-height:1.35;}
.card--conditional{}

/* ---------- Fields ---------- */
.field{margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.field > label{display:block;font-size:15px;font-weight:600;margin-bottom:8px;color:var(--label);}
.muted{color:var(--label-2);font-weight:400;}
.req{
  display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;
  color:var(--blue);background:var(--blue-tint);border-radius:6px;padding:2px 7px;margin-left:4px;vertical-align:middle;letter-spacing:0;
}
input[type=text],input[type=number],input[type=date],input[type=search],textarea{
  width:100%;
  border:0;
  border-radius:var(--radius-sm);
  padding:13px 14px;
  font-size:17px;
  background:var(--fill);
  color:var(--label);
  transition:box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:var(--label-3);}
input:focus,textarea:focus{
  outline:none;
  box-shadow:0 0 0 3.5px var(--blue-tint);
}
textarea{resize:none;min-height:46px;line-height:1.4;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ---------- Missing required-field highlight ---------- */
.is-invalid,
input.is-invalid,textarea.is-invalid{
  box-shadow:0 0 0 2px var(--red)!important;
  border-radius:var(--radius-sm);
}
.money.is-invalid,.calendar.is-invalid,.card.is-invalid,
.approver-btn.is-invalid,.sigpad.is-invalid{
  box-shadow:0 0 0 2px var(--red)!important;
}
.sigpad.is-invalid{border-color:var(--red);}

/* ---------- Checkbox row ---------- */
.chk{display:flex;align-items:center;gap:10px;margin-bottom:14px;cursor:pointer;user-select:none;font-size:15px;font-weight:600;color:var(--label);}
.chk input{position:absolute;opacity:0;pointer-events:none;}
.chk__box{
  width:24px;height:24px;flex:none;border-radius:7px;border:2px solid var(--separator);
  background:var(--card);display:flex;align-items:center;justify-content:center;transition:.15s;
}
.chk input:checked + .chk__box{background:var(--blue);border-color:var(--blue);}
.chk input:checked + .chk__box::after{content:"✓";color:#fff;font-size:15px;font-weight:800;line-height:1;}
.chk input:focus-visible + .chk__box{box-shadow:0 0 0 3px var(--blue-tint);}

.money{display:flex;align-items:center;border-radius:var(--radius-sm);background:var(--fill);overflow:hidden;}
.money:focus-within{box-shadow:0 0 0 3.5px var(--blue-tint);}
.money span{padding:0 2px 0 14px;color:var(--label-2);font-weight:500;font-size:17px;white-space:nowrap;}
.money input{border:0;background:transparent;box-shadow:none!important;padding-left:4px;}
.money--inline{margin-top:10px;}
.money--total{background:var(--green-tint);}

.refrow{display:flex;gap:8px;}
.refrow input{flex:1;}

/* ---------- Inline calendar (activity date) ---------- */
.calendar{background:var(--fill);border-radius:var(--radius-ctrl);padding:10px 10px 12px;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.cal-title{font-size:16px;font-weight:600;letter-spacing:-.01em;}
.cal-nav{
  width:36px;height:36px;border:0;background:transparent;color:var(--blue);
  font-size:24px;line-height:1;border-radius:10px;display:flex;align-items:center;justify-content:center;
}
.cal-nav:active{background:var(--fill-strong);}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-wd{text-align:center;font-size:12px;font-weight:600;color:var(--label-2);padding:4px 0 6px;}
.cal-day{
  aspect-ratio:1;border:0;background:transparent;color:var(--label);
  font-size:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background .1s;
}
.cal-day.is-empty{visibility:hidden;}
.cal-day.is-today{color:var(--blue);font-weight:700;}
.cal-day.is-selected{background:var(--blue)!important;color:#fff;font-weight:600;}
.cal-day:active{background:var(--fill-strong);}
/* collapsed (a date is chosen) */
.calendar.is-collapsed{background:transparent;padding:0;}
.cal-selected{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px;border:0;border-radius:var(--radius-sm);background:var(--fill);
}
.cal-selected:active{background:var(--fill-strong);}
.cal-selected__date{font-size:17px;font-weight:600;color:var(--label);}
.cal-selected__edit{font-size:15px;font-weight:500;color:var(--blue);}

/* ================================================================
   WIZARD — auto-advancing questions
   ================================================================ */
.wiz-head{display:flex;align-items:center;gap:10px;min-height:36px;margin-bottom:20px;}
.wiz-back{
  background:transparent;border:0;color:var(--blue);font-weight:400;font-size:17px;
  padding:6px 2px;
}
.wiz-back:active{opacity:.4;}
.wiz-progress{display:flex;gap:7px;margin-left:auto;}
.wiz-dot{width:7px;height:7px;border-radius:50%;background:var(--separator);transition:.25s;}
.wiz-dot.is-done{background:var(--blue);}
.wiz-dot.is-active{background:var(--blue);transform:scale(1.4);}

.wiz-step{animation:wizIn .28s cubic-bezier(.32,.72,0,1);}
@keyframes wizIn{from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:translateX(0);}}
.wiz-q{
  font-size:28px;font-weight:700;color:var(--label);line-height:1.2;letter-spacing:-.02em;
  margin:4px 2px 8px;
}
.wiz-sub{font-size:15px;color:var(--label-2);margin:0 2px 20px;}
.wiz-continue{width:100%;margin-top:22px;}
.submit-inline{width:100%;margin-bottom:16px;}
.opts{display:flex;flex-direction:column;gap:12px;}
.opts--grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.opt{position:relative;display:block;}
.opt input{position:absolute;opacity:0;pointer-events:none;}
.opt__box{
  display:block;padding:18px;border-radius:var(--radius-card);
  background:var(--card);box-shadow:var(--shadow);
  border:2px solid transparent;transition:transform .12s,border-color .15s,background .15s;
}
.opt__box b{display:block;font-size:17px;font-weight:600;color:var(--label);letter-spacing:-.01em;}
.opt__box small{display:block;margin-top:3px;font-size:14px;color:var(--label-2);font-weight:400;}
.opts--grid .opt__box{text-align:center;padding:24px 8px;}
.opts--grid .opt__box b{font-size:16px;}
.opt:active .opt__box{transform:scale(.97);}
.opt input:checked + .opt__box{
  border-color:var(--blue);background:var(--blue-tint);
}
.opt input:checked + .opt__box::after{
  content:"✓";position:absolute;top:14px;right:16px;
  color:var(--blue);font-size:18px;font-weight:700;
}
.opts--grid .opt input:checked + .opt__box::after{top:8px;right:10px;font-size:15px;}

/* ---------- Summary chips ---------- */
.summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.summary:empty{display:none;}
.sum-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--fill);color:var(--label);font-weight:500;font-size:14px;
  padding:8px 14px;border-radius:999px;border:0;
}
.sum-chip::after{content:"⌄";font-size:13px;color:var(--label-2);margin-top:-4px;}
.sum-chip:active{background:var(--fill-strong);}

/* ---------- Approver buttons ---------- */
.approvers{display:flex;flex-direction:column;gap:12px;}
.approver-btn{
  display:flex;flex-direction:column;gap:3px;text-align:left;
  padding:16px;border-radius:var(--radius-ctrl);
  background:var(--blue-tint);border:0;transition:transform .12s;position:relative;
}
.approver-btn:active{transform:scale(.98);}
.approver-btn__role{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--blue);}
.approver-btn__name{font-size:18px;font-weight:600;color:var(--label);letter-spacing:-.01em;}
.approver-btn__status{font-size:14px;font-weight:400;color:var(--label-2);}
.approver-btn.is-signed{background:var(--green-tint);}
.approver-btn.is-signed .approver-btn__role{color:var(--accent-d);}
.approver-btn.is-signed .approver-btn__status{color:var(--accent-d);font-weight:500;}
.approver-btn.is-signed::after{
  content:"✓";position:absolute;top:50%;right:18px;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
}

/* ---------- Choice modal ---------- */
.choice-list{display:flex;flex-direction:column;gap:10px;}
.choice-opt{
  display:block;width:100%;text-align:center;padding:16px 18px;
  border:0;border-radius:var(--radius-ctrl);background:var(--fill);
  font-size:17px;font-weight:500;color:var(--blue);transition:.12s;
}
.choice-opt:active{background:var(--fill-strong);transform:scale(.98);}

/* ================================================================
   Segmented control / chips (legacy, still styled)
   ================================================================ */
.segmented{display:flex;gap:2px;background:var(--fill);border-radius:9px;padding:2px;}
.seg{flex:1;position:relative;}
.seg input{position:absolute;opacity:0;pointer-events:none;}
.seg span{display:block;text-align:center;padding:8px 6px;border-radius:7px;font-size:14px;font-weight:500;color:var(--label);transition:.15s;}
.seg input:checked + span{background:var(--card);box-shadow:var(--shadow);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{position:relative;}
.chip input{position:absolute;opacity:0;pointer-events:none;}
.chip span{display:block;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;background:var(--fill);color:var(--label);transition:.15s;}
.chip input:checked + span{background:var(--blue-tint);color:var(--blue);}

/* ---------- Signature pad ---------- */
.sigpad{
  height:94px;border:1.5px dashed var(--blue);border-radius:var(--radius-ctrl);
  background:var(--blue-tint);display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:15px;font-weight:500;position:relative;overflow:hidden;
  cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform .12s;
}
.sigpad::before{
  content:"";width:20px;height:20px;margin-right:8px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16c2 0 2-6 4-6s2 4 4 4 3-9 5-9 2 5 4 5'/><path d='M3 20h18'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16c2 0 2-6 4-6s2 4 4 4 3-9 5-9 2 5 4 5'/><path d='M3 20h18'/></svg>") center/contain no-repeat;
}
.sigpad::after{content:"Add signature";}
.sigpad.has-sig::before{display:none;}
.sigpad:active{transform:scale(.99);opacity:.85;}
.sigpad.has-sig{border-style:solid;border-color:var(--separator);background:var(--card);}
.sigpad.has-sig::after{content:"";}
.sigpad img{max-height:86%;max-width:92%;object-fit:contain;}
.sigpad__clear{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  border:0;background:var(--fill-strong);color:var(--label-2);font-size:14px;line-height:1;
  display:none;align-items:center;justify-content:center;z-index:2;
}
.sigpad.has-sig .sigpad__clear{display:flex;}
.sig-caption{display:block;font-size:12px;color:var(--label-2);margin:6px 2px 0;}
.sigrow{display:flex;gap:10px;align-items:stretch;margin-top:10px;}
.sigrow .sigpad{flex:1 1 auto;min-width:0;}
.sigrow .sigdate{flex:0 0 118px;width:118px;align-self:stretch;}

/* ---------- Receipts ---------- */
.receipts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.receipts:empty{display:none;}
.receipt{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:#000;}
.receipt img{width:100%;height:100%;object-fit:cover;display:block;}
.receipt__del{
  position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:0;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.uploader{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px;border-radius:var(--radius-ctrl);
  color:var(--blue);font-weight:500;font-size:15px;background:var(--fill);
}
.uploader:active{background:var(--fill-strong);}
.uploader__icon{display:inline-flex;}
.uploader__icon svg{width:20px;height:20px;}

/* ---------- Tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  max-width:600px;margin:0 auto;height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:var(--navbar);
  border-top:0;
  display:flex;
}
/* Hide the bar while a text field is focused so it doesn't float up over the
   on-screen keyboard — it stays pinned to the bottom otherwise. */
body.kbd-open .tabbar{display:none;}
.tab{
  flex:1;background:transparent;border:0;color:rgba(255,255,255,.7);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:11px;font-weight:600;transition:color .15s;
}
.tab__ico{display:flex;align-items:center;justify-content:center;}
.tab__ico svg{width:25px;height:25px;}
.tab.is-active{color:#fff;}
.tab.is-active .tab__ico{
  background:rgba(255,255,255,.22);border-radius:11px;padding:3px 12px;margin-bottom:-1px;
}

/* ---------- Action bar (scrolls with content) ---------- */
.actionbar{
  display:flex;gap:10px;align-items:center;
  padding:8px 16px calc(var(--tabbar-h) + var(--safe-b) + 20px);
}
/* During preview the tab bar is hidden, so only clear the safe area */
#previewActions{padding-bottom:calc(var(--safe-b) + 20px);}

.btn{
  border:0;border-radius:var(--radius-ctrl);padding:13px 16px;font-size:17px;font-weight:600;
  background:var(--fill);color:var(--blue);flex:0 1 auto;transition:transform .1s,opacity .1s;
  letter-spacing:-.01em;white-space:nowrap;             /* keep labels on one line */
}
.btn:active{transform:scale(.97);opacity:.85;}
.btn--primary{background:var(--blue-tint);color:var(--blue);}
/* the primary action button takes the remaining width so its label fits */
.btn--accent{background:var(--blue);color:#fff;flex:1 1 auto;min-width:0;}
.btn--ghost{background:transparent;color:var(--blue);flex:0 0 auto;padding:13px 14px;font-weight:400;}
.btn--sm{padding:9px 14px;font-size:15px;flex:0 0 auto;}
.btn:disabled{opacity:.4;}

/* ---------- History ---------- */
.history-head{margin-bottom:16px;}
.history-search{width:100%;}
.history-list{display:flex;flex-direction:column;gap:12px;}
.hcard{
  background:var(--card);border-radius:var(--radius-card);
  padding:14px 16px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;
}
.hcard__body{flex:1;min-width:0;}
.hcard__top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.hcard__payee{font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;}
.hcard__amount{font-weight:600;color:var(--label);white-space:nowrap;}
.hcard__meta{font-size:14px;color:var(--label-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;}
.hcard__tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.tag{font-size:12px;font-weight:500;padding:3px 9px;border-radius:7px;background:var(--fill);color:var(--label-2);}
.tag--type{background:var(--blue-tint);color:var(--blue);}
.tag--cat{background:var(--green-tint);color:var(--accent-d);}
.hcard__actions{display:flex;gap:14px;margin-top:12px;}
.linkbtn{background:none;border:0;color:var(--blue);font-size:15px;font-weight:400;padding:2px 0;}
.linkbtn--danger{color:var(--red);}
.hcard__txnno{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.02em;margin-top:2px;}
/* version footer + changelog */
.app-version{
  display:block;margin:26px auto 8px;padding:8px 14px;
  background:transparent;border:0;color:var(--label-3);
  font-size:13px;font-weight:500;letter-spacing:.01em;
}
.app-version:active{opacity:.5;}
.changelog{display:flex;flex-direction:column;gap:14px;max-height:64vh;overflow-y:auto;padding:2px;}
.changelog__item{
  background:var(--fill);border-radius:var(--radius-ctrl);padding:14px 16px;
}
.changelog__item.is-current{box-shadow:0 0 0 2px var(--blue);}
.changelog__v{font-size:15px;font-weight:700;color:var(--label);display:flex;align-items:center;gap:8px;}
.changelog__badge{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--blue);background:var(--blue-tint);border-radius:999px;padding:2px 8px;
}
.changelog__notes{margin-top:6px;font-size:14px;line-height:1.45;color:var(--label-2);}
.hcard__docs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.hdoc{
  width:56px;height:56px;border:0;padding:0;border-radius:9px;overflow:hidden;
  background:#000;flex:none;
}
.hdoc img{width:100%;height:100%;object-fit:cover;display:block;}
.hdoc:active{transform:scale(.96);}

/* ---------- Queue (workflow buckets) ---------- */
.queue-list{display:flex;flex-direction:column;gap:22px;}
.queue-group{}
.queue-head{
  display:flex;align-items:center;gap:8px;margin:0 4px 10px;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--label-2);
}
.queue-count{
  background:var(--fill);color:var(--label);border-radius:999px;
  font-size:12px;font-weight:700;padding:1px 9px;letter-spacing:0;
}
.queue-total{
  margin-left:auto;color:var(--accent-d);font-weight:700;font-size:13px;
  text-transform:none;letter-spacing:0;
}
.queue-empty{
  padding:16px;text-align:center;color:var(--label-3);font-size:14px;
  background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow);
}
.hcard__chev{color:var(--label-3);font-size:26px;font-weight:300;line-height:1;margin-left:2px;}

/* ---------- Stage summary (read-only header in a stage) ---------- */
.stage-summary{
  background:var(--card);border-radius:var(--radius-card);
  padding:16px;margin-bottom:16px;box-shadow:var(--shadow);
}
.stage-summary__status{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:3px 9px;border-radius:7px;margin-bottom:10px;background:var(--blue-tint);color:var(--blue);
}
.stage-summary__payee{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.stage-summary__amount{font-size:20px;font-weight:700;color:var(--label);float:right;}
.stage-summary__meta{font-size:14px;color:var(--label-2);margin-top:4px;clear:both;}
.stage-summary__purpose{font-size:14px;color:var(--label);margin-top:8px;}
.stage-amount{margin-top:14px;}
.stage-amount label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--label);}

.empty{text-align:center;padding:64px 20px;color:var(--label-2);}
.empty__icon{margin-bottom:12px;display:flex;justify-content:center;}
.empty__icon svg{width:46px;height:46px;color:var(--label-3);}
.tag__ico{width:12px;height:12px;vertical-align:-2px;}
.empty .btn{flex:0 0 auto;display:inline-block;margin-top:14px;padding:13px 24px;background:var(--blue);color:#fff;}

/* ---------- Modals / sheets ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);}
.modal__sheet{
  position:relative;width:100%;max-width:600px;background:var(--card);
  border-radius:20px 20px 0 0;padding:10px 16px calc(16px + var(--safe-b));
  animation:sheetUp .34s cubic-bezier(.32,.72,0,1);
}
.modal__sheet::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:36px;height:5px;border-radius:3px;background:var(--separator);
}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.modal__head{display:flex;justify-content:space-between;align-items:center;margin:14px 0 14px;}
.modal__head strong{font-size:18px;font-weight:600;letter-spacing:-.02em;}
.modal__x{background:var(--fill);border:0;width:30px;height:30px;border-radius:50%;font-size:14px;color:var(--label-2);display:flex;align-items:center;justify-content:center;}
.modal__foot{display:flex;gap:10px;margin-top:14px;}

/* ---------- Full-screen document viewer ---------- */
.docviewer{position:fixed;inset:0;z-index:70;background:#000;display:flex;align-items:center;justify-content:center;}
.docviewer__backdrop{position:absolute;inset:0;}
.doc-view{
  position:relative;z-index:1;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.doc-view img{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.docviewer__bar{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
  background:linear-gradient(rgba(0,0,0,.55),transparent);
}
.docviewer__title{flex:1;color:#fff;font-size:15px;font-weight:600;}
.docviewer__btn{
  width:38px;height:38px;flex:none;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.docviewer__btn:active{background:rgba(255,255,255,.28);}
.docviewer__save{
  display:flex;align-items:center;gap:6px;flex:none;border:0;
  padding:0 14px;height:38px;border-radius:19px;
  background:rgba(255,255,255,.16);color:#fff;font-size:15px;font-weight:600;
}
.docviewer__save:active{background:rgba(255,255,255,.28);}
.docviewer__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.docviewer__nav--prev{left:12px;}
.docviewer__nav--next{right:12px;}
.docviewer__nav:disabled{opacity:.3;}
.sig-canvas{
  width:100%;height:230px;border-radius:var(--radius-ctrl);
  background:#fff;touch-action:none;display:block;border:.5px solid var(--separator);
}
/* Done turns solid once a signature exists */
#sigDone.is-active{background:var(--blue);color:#fff;}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 18px);
  z-index:80;background:rgba(30,30,32,.92);color:#fff;padding:11px 20px;border-radius:999px;
  font-size:15px;font-weight:500;box-shadow:0 8px 30px rgba(0,0,0,.3);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  animation:toastIn .25s ease;max-width:90%;text-align:center;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

.form-spacer{height:8px;}

/* =========================================================
   FILLED FORM OUTPUT — real PAF image with value overlay
   ========================================================= */
.preview-mount{padding:14px;}
.paf-sheet{max-width:900px;margin:0 auto;box-shadow:0 6px 24px rgba(0,0,0,.25);background:#fff;border-radius:6px;overflow:hidden;}
.paf-fill{
  position:relative;width:100%;
  /* The page body uses negative letter-spacing; the PDF/PNG renderer
     (html2canvas) draws non-zero letter-spacing one glyph at a time, which
     scatters the characters. Keep overlay text at normal spacing. */
  letter-spacing:normal;word-spacing:normal;
  container-type:inline-size;      /* enables cqw units for text scaling */
  font-family:Arial,Helvetica,sans-serif;color:#0b1f3a;line-height:1;
}
.paf-bg{display:block;width:100%;height:auto;}
/* overlay text */
.pf-t{
  position:absolute;letter-spacing:normal;font-size:1.65cqw;font-weight:600;color:#0b2350;
  white-space:pre-wrap;word-break:break-word;transform-origin:left top;
}
.pf-b{font-weight:800;font-size:1.9cqw;}
.pf-sm{font-size:1.4cqw;font-weight:600;}
/* checkbox mark */
.pf-x{
  position:absolute;transform:translate(-50%,-50%);
  font-size:2.3cqw;font-weight:900;color:#0b2350;line-height:1;
}
/* signature */
.pf-sig{position:absolute;display:flex;align-items:flex-end;justify-content:flex-start;}
.pf-sig img{max-width:100%;max-height:100%;object-fit:contain;object-position:left bottom;}
/* transaction number — upper-right corner of the printed form */
.pf-txnno{
  position:absolute;top:1.1cqw;right:1.4cqw;
  font-size:1.9cqw;font-weight:800;color:#0b2350;letter-spacing:.02em;
  border:0.18cqw solid #0b2350;border-radius:0.6cqw;padding:0.4cqw 0.9cqw;
  background:#fff;line-height:1;
}

/* receipts appended below the form */
.paf-receipts{max-width:900px;margin:14px auto 0;background:var(--card);border-radius:var(--radius-card);padding:14px;box-shadow:var(--shadow);}
.paf-receipts h4{margin:0 0 10px;font-size:13px;color:var(--label-2);text-transform:uppercase;letter-spacing:.02em;}
.paf-receipts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.pf-receipt{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:#fff;box-shadow:var(--shadow);}
.pf-receipt img{width:100%;display:block;}
.pf-receipt figcaption{font-size:11px;color:var(--label-2);padding:5px 9px;}

@media (max-width:520px){
  .grid2{grid-template-columns:1fr;}
  .sigrow .sigdate{flex-basis:112px;width:112px;}
}

/* ---------- Print ---------- */
@media print{
  :root{--safe-b:0px;}
  body{background:#fff;}
  .topbar,.tabbar,.actionbar,.modal,.toast{display:none!important;}
  .view{padding:0!important;}
  #app{max-width:none;}
  .view--preview{background:#fff;}
  .preview-mount{padding:0;}
  .paf-sheet{max-width:none;box-shadow:none;border-radius:0;}
  .paf-receipts{max-width:none;page-break-before:always;box-shadow:none;}
  @page{size:letter portrait;margin:8mm;}
}