/* Noveaulab field expenses — brand: Rubik, Emerald #2cc570, Black #222222 */
:root{
  --emerald:#2cc570; --mint:#3be4a8; --teal:#0fa3a3; --chartreuse:#b0dc5d;
  --ink:#222222; --ink-2:#4d5754; --ink-3:#79837f;
  --paper:#ffffff; --ground:#f3f6f4; --paper-2:#e9edeb;
  --rule:#d7deda; --rule-soft:#e6ebe8;
  --emerald-ink:#12793f; --emerald-soft:#def5e8;
  --warn:#8f6206; --warn-soft:#f5e8ca;
  --crit:#a32e24; --crit-soft:#f7ddd9;
  --on-emerald:#222222;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#edf2ef; --ink-2:#b1bcb7; --ink-3:#818d89;
    --paper:#181e1b; --ground:#111614; --paper-2:#222a26;
    --rule:#2d3632; --rule-soft:#232b28;
    --emerald-ink:#3bd880; --emerald-soft:#123322;
    --warn:#ddad4d; --warn-soft:#312812;
    --crit:#eb8578; --crit-soft:#3a1d19;
    --on-emerald:#12200f;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  /* THE SAFE AREA LIVES HERE, NOT ON THE SCREEN (2026-09-03).
   *
   * Jonah, on an iPhone: the status bar sat over the buttons. Two causes, and both
   * are fixed by moving the inset up one level. The banners below are siblings of
   * the screens, so an inset applied only to `.screen` left them under the notch —
   * and being `position:fixed` they then covered the header the inset was meant to
   * protect. With the padding on `body` the banners sit inside it, and sticky keeps
   * them in the flow so they push the header down instead of sitting on it. */
  padding:var(--safe-t) 0 var(--safe-b);
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Rubik,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
.mono{font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.screen{
  min-height:calc(100dvh - var(--safe-t) - var(--safe-b));
  display:flex;flex-direction:column;max-width:520px;margin:0 auto;
}
[hidden]{display:none !important;}

/* Sticky, not fixed: a banner that overlays the header hides the very controls
   somebody is being told about. In the flow it pushes the page down and still
   stays put while they scroll. */
.offline-bar{
  position:sticky;top:0;z-index:50;
  background:var(--warn-soft);color:var(--warn);
  font-size:.8rem;font-weight:500;text-align:center;padding:.4rem .8rem;
}

/* bar */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--rule-soft);
}
.bar .t{font-weight:500;}
.bar .who{font-size:.85rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.link{
  background:none;border:0;padding:.3rem 0;font:inherit;font-size:.85rem;font-weight:500;
  color:var(--emerald-ink);cursor:pointer;
}
.link.small{font-size:.8rem;color:var(--ink-3);font-weight:400;}

/* sign in */
.signin{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.5rem;gap:.1rem;}
.signin .logo{width:min(190px,54vw);height:auto;margin-bottom:.9rem;}
.signin h1{font-size:1.5rem;font-weight:400;letter-spacing:-.02em;margin:0;}
.signin .sub{font-size:.9rem;color:var(--ink-3);margin:.4rem 0 1.6rem;max-width:22rem;}
.signin .note{font-size:.75rem;color:var(--ink-3);margin-top:1.3rem;}
.signin .devnote{font-size:.75rem;color:var(--warn);margin:0 0 .6rem;}
#dev-signin{width:100%;max-width:19rem;}
#dev-signin input{
  width:100%;padding:.7rem .85rem;font:inherit;border:1px solid var(--rule);
  border-radius:8px;background:var(--paper);color:var(--ink);margin-bottom:.6rem;
}

/* home / capture */
.home{flex:1;display:flex;flex-direction:column;align-items:center;padding:1rem 1.1rem 1.6rem;}
.viewfinder{
  width:100%;flex:1;min-height:200px;border-radius:14px;border:1px solid var(--rule);
  background:repeating-linear-gradient(115deg,var(--paper-2) 0 3px,transparent 3px 9px),var(--paper-2);
  position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;
}
.recguide{
  width:56%;max-width:200px;height:72%;border:2px dashed var(--emerald);border-radius:6px;
  background:var(--paper);padding:.7rem .6rem;display:flex;flex-direction:column;gap:.35rem;
}
.recguide i{display:block;height:4px;border-radius:2px;background:var(--rule);}
.recguide i.w1{width:70%}.recguide i.w2{width:88%}.recguide i.w3{width:52%}
.recguide i.big{height:9px;width:60%;background:var(--ink-3);margin-top:.3rem;}
.vf-hint{position:absolute;bottom:.7rem;left:0;right:0;text-align:center;font-size:.72rem;color:var(--ink-3);margin:0;}
.shutter{
  width:74px;height:74px;border-radius:50%;background:var(--emerald);
  border:4px solid var(--paper);box-shadow:0 0 0 4px var(--emerald-soft);
  display:block;cursor:pointer;flex:0 0 auto;
}
.shutter:active{transform:scale(.96);}
.gpsline{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--ink-3);margin:.9rem 0 .3rem;}
.pip{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:0 0 auto;}
.pip.ok{background:var(--emerald);}
.pip.off{background:var(--warn);}
.queue-hint{font-size:.78rem;color:var(--teal);margin:.7rem 0 0;font-weight:500;}
/* Quiet on purpose. Somebody who knows what they are doing should be able to look
   straight past it every day for a year. */
.guide-line{margin:.55rem 0 0;text-align:center;}
.guide-line a{text-decoration:none;border-bottom:1px solid var(--rule-soft);padding-bottom:1px;}

/* form */
.form{flex:1;overflow-y:auto;padding:1rem 1.1rem 2rem;display:flex;flex-direction:column;gap:.1rem;}
.preview{width:100%;max-height:170px;object-fit:cover;border-radius:10px;border:1px solid var(--rule);margin-bottom:.9rem;background:var(--paper-2);}
.srcflag{background:var(--warn-soft);color:var(--warn);font-size:.75rem;font-weight:500;padding:.45rem .6rem;border-radius:6px;margin-bottom:.9rem;}
.field{margin-bottom:.95rem;}
.field label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:500;margin-bottom:.35rem;}
.hintlabel{text-transform:none;letter-spacing:0;font-weight:400;opacity:.8;}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .8rem;font:inherit;border:1px solid var(--rule);border-radius:8px;
  background:var(--paper);color:var(--ink);
}
.field textarea{resize:vertical;}
.amtwrap{display:flex;align-items:center;border:1px solid var(--rule);border-radius:8px;background:var(--paper);padding-left:.8rem;}
.amtwrap:focus-within{border-color:var(--emerald);box-shadow:0 0 0 3px var(--emerald-soft);}
.amtwrap .peso{font-size:1.25rem;color:var(--ink-3);}
.amtwrap input{border:0;background:none;font-size:1.5rem;font-weight:500;padding:.55rem .8rem;font-variant-numeric:tabular-nums;}
.amtwrap input:focus{outline:none;}
.chiprow{display:flex;flex-wrap:wrap;gap:.4rem;}
.chip{
  font:inherit;font-size:.85rem;padding:.5rem .8rem;border-radius:22px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink-2);cursor:pointer;
}
.chip[aria-pressed="true"]{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald);font-weight:500;}

.btn{
  width:100%;font:inherit;font-size:1rem;font-weight:500;padding:.85rem;border-radius:10px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;
}
.btn.primary{background:var(--emerald);border-color:var(--emerald);color:var(--on-emerald);}
.btn[disabled]{opacity:.55;cursor:default;}
.err{background:var(--crit-soft);color:var(--crit);font-size:.82rem;padding:.55rem .7rem;border-radius:6px;margin:.2rem 0 .8rem;}

/* done */
.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.5rem;gap:.5rem;}
.tick{width:62px;height:62px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald-ink);display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin-bottom:.4rem;}
.tick.queued{background:var(--warn-soft);color:var(--warn);font-size:1.3rem;}
.done .ref{font-size:1.05rem;font-weight:500;}
.done .sub{font-size:.86rem;color:var(--ink-3);margin:0 0 1.4rem;max-width:20rem;}
.done .btn{max-width:20rem;}
.dupe{background:var(--warn-soft);color:var(--warn);font-size:.8rem;padding:.6rem .75rem;border-radius:8px;margin-bottom:1.1rem;max-width:22rem;text-align:left;}
/* The redundant-claim notice is information, not a warning. Same shape, quieter
   colour — someone who genuinely spent ₱250 twice should not see an alarm. */
/* Nothing outstanding on record — so which of the two this is genuinely is not
   obvious, and the row asks for a deliberate look rather than sitting quiet. */
.chiprow.askme{outline:2px solid var(--warn-soft);outline-offset:4px;border-radius:8px;}
/* Same footprint as the offline bar, opposite meaning — so it reads as news rather
   than as a warning. Full-width and tappable: a thin link here gets missed. */
.update-bar{position:sticky;top:0;z-index:60;border:0;width:100%;
  font:inherit;font-size:.8rem;padding:.55rem .75rem;text-align:center;cursor:pointer;
  background:var(--brand,#2cc570);color:#fff;}
.build{margin-top:1.5rem;text-align:center;font-size:.7rem;opacity:.45;}
/* A gap is not a value. Muted so the eye still reads the row as empty, but the
   reason is there when it matters. */
.ln-facts dd.gap{opacity:.6;font-style:italic;}
.ln-facts dd.gap .why{display:block;font-style:normal;font-size:.72rem;opacity:.85;margin-top:.15rem;}
/* Someone who has left is shown, greyed, never hidden. Their filed lines are still
   in the record, and a list that pretends they never existed makes those lines
   unexplainable a year later. */
.person.off{opacity:.55;}
.person.off h3 .pill{background:var(--ink-soft,#f1f3f5);color:var(--muted,#5b6470);font-size:.65rem;
  padding:.1rem .4rem;border-radius:99px;vertical-align:middle;margin-left:.4rem;}
.owedbox{margin-top:.5rem;font-size:.78rem;line-height:1.45;padding:.55rem .7rem;border-radius:8px;background:var(--ink-soft,#f1f3f5);color:var(--muted,#5b6470);text-align:left;}
.dupe.soft{background:var(--ink-soft,#f1f3f5);color:var(--muted,#5b6470);}

/* ledger */
.ledger{flex:1;overflow-y:auto;padding:1rem 1.1rem 2rem;}
.ledger-top{background:var(--paper-2);border-radius:12px;padding:.9rem 1rem;margin-bottom:1rem;}
.ledger-top .lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:500;}
.ledger-top .big{font-size:1.7rem;font-weight:500;letter-spacing:-.02em;line-height:1.2;}
.meterkey{font-size:.75rem;color:var(--ink-3);margin-top:.2rem;}
.list{display:flex;flex-direction:column;gap:.5rem;}
.item{border:1px solid var(--rule-soft);border-radius:9px;padding:.65rem .75rem;display:flex;justify-content:space-between;gap:.6rem;background:var(--paper);}
.item .l{min-width:0;}
.item .l .top{font-size:.88rem;font-weight:500;}
.item .l .bot{font-size:.72rem;color:var(--ink-3);margin-top:.15rem;}
.item .r{text-align:right;flex:0 0 auto;}
.item .r .amt{font-size:.9rem;font-weight:500;font-variant-numeric:tabular-nums;}
.item .r .st{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem;}
.item.queued{border-color:var(--teal);}
.item.queued .st{color:var(--teal);}
.item.sent .st{color:var(--emerald-ink);}
.item.failed{border-color:var(--crit);background:var(--crit-soft);}
.item.failed .st{color:var(--crit);}
.empty{text-align:center;color:var(--ink-3);font-size:.88rem;margin-top:2rem;}

/* ledger — the real position, then the phone's own view */
.sect{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:500;margin:1.4rem 0 .5rem;}
.ledger-top.plain{background:none;padding:0;}
.gatebox{margin-top:.7rem;padding:.6rem .75rem;border-radius:8px;font-size:.8rem;}
.gatebox.blocked{background:var(--crit-soft);color:var(--crit);}
.gatebox.clear{background:var(--emerald-soft);color:var(--emerald-ink);}
.item .why{font-size:.75rem;margin-top:.35rem;line-height:1.45;}
.item.needs{border-color:var(--warn);background:var(--warn-soft);}
.item.needs .st{color:var(--warn);}

/* answering a question, directly under the question. Same warm border as the row
 * it belongs to, joined to it rather than floating beside it, because a reply box
 * that reads as a separate card is a reply box people answer the wrong row with. */
.item .why.handed{color:var(--ink-3);font-style:italic;}
.reply{border:1px solid var(--warn);border-top:0;background:var(--warn-soft);
  border-radius:0 0 10px 10px;margin:-6px 0 .7rem;padding:.6rem .75rem .7rem;}
.reply .said{font-size:.78rem;line-height:1.45;color:var(--ink-2);}
.reply .said + .btn{margin-top:.5rem;}
.reply-text{width:100%;box-sizing:border-box;font:inherit;font-size:.85rem;
  padding:.5rem .6rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--paper);color:var(--ink);resize:vertical;}
.reply-act{display:flex;align-items:center;gap:.6rem;margin-top:.45rem;}
.reply-msg{font-size:.75rem;color:var(--ink-3);}

/* the reply, on the reviewer's line screen */
.ln-answer{margin:.8rem 0;padding:.65rem .8rem;border-radius:10px;
  background:var(--emerald-soft);border:1px solid var(--emerald);}
.ln-answer .albl{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--emerald-ink);font-weight:500;}
.ln-answer .atxt{font-size:.9rem;line-height:1.5;margin-top:.25rem;}
.ln-answer .ameta{font-size:.72rem;color:var(--ink-3);margin-top:.35rem;}
.item.overdue{border-color:var(--crit);}
.item.overdue .st{color:var(--crit);}

/* ───────────────────────────── review ─────────────────────────────
 * Same tokens, same components, same type. The ONLY difference from the capture
 * screens is width: a phone captures one receipt, a desk reviews forty. Nothing
 * here introduces a colour, a radius or a weight that the rest of the app does
 * not already use. */
.screen.wide{max-width:1040px;}
.rv-tabs{display:flex;gap:.4rem;padding:.7rem 1.1rem 0;border-bottom:1px solid var(--rule-soft);}
.rv-tab{
  font:inherit;font-size:.85rem;font-weight:500;padding:.5rem .85rem;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-3);
}
.rv-tab[aria-selected="true"]{color:var(--emerald-ink);border-bottom-color:var(--emerald);}
.review{flex:1;overflow-y:auto;padding:1rem 1.1rem 2rem;}
.rv-list{display:flex;flex-direction:column;gap:.5rem;}
.rv-item{
  display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;font:inherit;
  border:1px solid var(--rule-soft);border-radius:10px;padding:.7rem .85rem;
  background:var(--paper);color:var(--ink);cursor:pointer;
}
.rv-item:hover{border-color:var(--rule);}
.rv-item .rv-amt{font-size:1.05rem;font-weight:500;font-variant-numeric:tabular-nums;flex:0 0 6.5rem;}
.rv-item .rv-mid{flex:1;min-width:0;}
.rv-item .rv-top{font-size:.9rem;font-weight:500;}
.rv-item .rv-sub{font-size:.75rem;color:var(--ink-3);margin-top:.15rem;}
.rv-item .rv-right{flex:0 0 auto;text-align:right;}
.rv-item.attn{border-color:var(--crit);background:var(--crit-soft);}
.rv-item.stale{border-color:var(--warn);}
.pill{
  display:inline-block;font-size:.65rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.06em;padding:.2rem .45rem;border-radius:4px;
  background:var(--paper-2);color:var(--ink-3);
}
.pill.attn{background:var(--crit-soft);color:var(--crit);}
.pill.warn{background:var(--warn-soft);color:var(--warn);}
.pill.ok{background:var(--emerald-soft);color:var(--emerald-ink);}

/* one line */
.linebody{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr;gap:1.2rem;padding:1rem 1.1rem 2rem;}
@media (min-width:820px){.linebody{grid-template-columns:1fr 1fr;align-items:start;}}
.ln-photo{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:12px;overflow:hidden;}
.ln-photo img{display:block;width:100%;height:auto;}
.ln-amounts{display:flex;gap:1.4rem;margin-bottom:1rem;}
.ln-amounts .lbl{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:500;}
.ln-amounts .big{font-size:1.6rem;font-weight:500;letter-spacing:-.02em;}
.ln-read .big{color:var(--ink-3);}
.ln-facts{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin:0 0 1rem;font-size:.85rem;}
.ln-facts dt{color:var(--ink-3);}
.ln-facts dd{margin:0;}
.flagbox{border-radius:8px;padding:.6rem .75rem;margin-bottom:.5rem;font-size:.8rem;}
.flagbox.review{background:var(--crit-soft);color:var(--crit);}
.flagbox.note{background:var(--warn-soft);color:var(--warn);}
.flagbox.ok{background:var(--emerald-soft);color:var(--emerald-ink);}
.flagbox .fcode{font-weight:500;}
.flagbox .fask{display:block;margin-top:.2rem;opacity:.85;}
.ln-actions{display:flex;flex-direction:column;gap:.5rem;margin-top:1.2rem;}
.ln-row{display:flex;gap:.5rem;}
.ln-row .btn{flex:1;}
.btn.danger{border-color:var(--crit);color:var(--crit);}
.ln-form{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--rule-soft);}
.ln-done{margin-top:1.1rem;padding:.7rem .85rem;border-radius:8px;background:var(--emerald-soft);color:var(--emerald-ink);font-size:.87rem;}

.cashform{border:1px solid var(--rule);border-radius:12px;padding:1rem;margin-bottom:1.2rem;background:var(--paper);}
.checkline{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--ink-2);margin:.2rem 0 1rem;}
.person{border:1px solid var(--rule-soft);border-radius:12px;padding:.9rem 1rem;margin-bottom:.7rem;background:var(--paper);}
.person h3{font-size:.95rem;font-weight:500;margin:0 0 .1rem;}
.person .pos{font-size:.8rem;color:var(--ink-3);margin-bottom:.6rem;}
.person .out{font-size:1.35rem;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.person.over .out{color:var(--crit);}
.adv{display:flex;justify-content:space-between;gap:.7rem;font-size:.8rem;padding:.4rem 0;border-top:1px solid var(--rule-soft);}
.adv .agone{opacity:.5;text-decoration:line-through;}
.adv button{font:inherit;font-size:.75rem;background:none;border:0;color:var(--emerald-ink);cursor:pointer;padding:0;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}
:focus-visible{outline:2px solid var(--emerald);outline-offset:2px;}

/* ─────────────────────────── reporting ───────────────────────────
   Same tokens as capture — this is one app, not two bolted together. */
.seg{display:flex;gap:.25rem;background:var(--paper-2);padding:.22rem;border-radius:10px;
     max-width:520px;margin:.7rem auto 0;width:calc(100% - 2rem);}
.seg.small{max-width:200px;margin-top:.5rem;}
.seg-b{flex:1;border:0;background:transparent;color:var(--ink-3);font:inherit;font-size:.82rem;
       font-weight:500;padding:.45rem .3rem;border-radius:8px;cursor:pointer;}
.seg-b[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:600;
       box-shadow:0 1px 2px rgba(0,0,0,.08);}
.seg-b:focus-visible{outline:2px solid var(--emerald);outline-offset:1px;}
/* Five day types will not sit on one line of a phone, and shrinking them until
   they do makes five unreadable labels rather than one honest second row. */
.seg.seg-wrap{flex-wrap:wrap;margin:.35rem 0 0;width:100%;max-width:none;}
.seg.seg-wrap .seg-b{flex:1 1 8.5rem;padding:.5rem .4rem;}

/* A quiet divider for a second block on a screen that already has a lead line. */
/* One RFQ line. Item takes the room; qty and ABC are short and fixed, and the
   remove button must never be the widest thing on the row. */
.itemrow{display:flex;gap:.35rem;margin:0 0 .35rem;}
.itemrow .inp{flex:1 1 auto;min-width:0;}
.itemrow .inp:nth-child(2){flex:0 0 4.2rem;}
.itemrow .inp:nth-child(3){flex:0 0 7rem;}
.itemx{flex:0 0 2rem;border:1px solid var(--rule);background:var(--paper);color:var(--ink-3);
   border-radius:8px;font-size:1rem;line-height:1;cursor:pointer;}
.itemx:hover{color:var(--crit);border-color:var(--crit);}
.itemrow + .inp{margin-top:.45rem;}

/* Nobody to ring here. Loud enough to be answered, not so loud it reads as an error —
   it is a gap in the record, not a mistake the rep made. */
.nocontact{font-size:.84rem;font-weight:500;color:var(--warn);background:var(--warn-soft);
   border-radius:8px;padding:.5rem .6rem;margin:0 0 .7rem;}

/* The quotation request. Set apart from the fields above it because it is the one
   control on this screen that leaves the building. */
#cd-rfq{border-top:1px solid var(--rule-soft);margin-top:1.1rem;padding-top:.9rem;}
.rfq-state{font-size:.84rem;color:var(--emerald-ink);background:var(--emerald-soft);
   border-radius:8px;padding:.5rem .6rem;margin:0 0 .6rem;font-weight:500;}
.rfq-acts{display:flex;gap:.5rem;margin:.6rem 0 .3rem;}
.rfq-acts .btn{flex:1;width:auto;}

.at-thumb{display:block;width:100%;max-width:220px;margin:.55rem auto 0;border-radius:10px;
   border:1px solid var(--rule);}

/* Card photos: a row of thumbnails that wraps, each with its own remove control
   and a state dot — a photo the server does not have yet must LOOK different from
   one it does, or the rep believes it is filed when it is not. */
.shots{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem;}
.shot{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;
      border:1px solid var(--rule);background:var(--paper-2);}
.shot img{width:100%;height:100%;object-fit:cover;display:block;}
.shot.pending{opacity:.55;}
.shot .x{position:absolute;top:2px;right:2px;width:22px;height:22px;line-height:20px;
   padding:0;border-radius:50%;border:none;background:rgba(0,0,0,.62);color:#fff;
   font-size:.9rem;cursor:pointer;}
.shot .st{position:absolute;left:0;right:0;bottom:0;font-size:.6rem;text-align:center;
   background:rgba(0,0,0,.62);color:#fff;padding:1px 0;}

h2.sec{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
       font-weight:600;margin:1.6rem 0 .5rem;}

.pad{padding:0 1rem 2rem;max-width:520px;margin:0 auto;width:100%;}
.rp-lead{font-size:.85rem;color:var(--ink-2);margin:.6rem 0 .9rem;}
.cardlist{display:flex;flex-direction:column;gap:.55rem;}
.rcard{border:1px solid var(--rule);border-radius:11px;background:var(--paper);padding:.7rem .8rem;
       cursor:pointer;text-align:left;width:100%;font:inherit;color:var(--ink);}
.rcard:hover{border-color:var(--emerald);}
.rcard .rc-top{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;}
.rcard .rc-title{font-weight:600;font-size:.9rem;}
.rcard .rc-tag{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
       border:1px solid var(--rule);border-radius:999px;padding:.1rem .4rem;white-space:nowrap;}
.rcard .rc-body{font-size:.8rem;color:var(--ink-2);margin:.3rem 0 0;}
.rcard .rc-body b{font-weight:500;color:var(--ink);}

.field{margin:.9rem 0;}
.field>label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;
       color:var(--ink-3);font-weight:500;margin-bottom:.3rem;}
.field .opt{text-transform:none;letter-spacing:0;color:var(--emerald-ink);}
.inp{width:100%;border:1px solid var(--rule);border-radius:9px;background:var(--paper);
     padding:.55rem .65rem;font:inherit;font-size:.9rem;color:var(--ink);}
.inp::placeholder{color:var(--ink-3);font-style:italic;}
.inp:focus{outline:2px solid var(--emerald);outline-offset:-1px;border-color:var(--emerald);}
textarea.inp{min-height:62px;resize:vertical;line-height:1.5;}
.hint{font-size:.72rem;color:var(--ink-3);margin:.3rem 0 0;}
.meta{font-size:.75rem;color:var(--ink-3);margin:.8rem 0;}

.sugg{border:1px solid var(--rule);border-radius:9px;margin-top:.25rem;overflow:hidden;background:var(--paper);}
.sugg button{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;
     padding:.5rem .65rem;cursor:pointer;border-bottom:1px solid var(--rule-soft);color:var(--ink);}
.sugg button:last-child{border-bottom:0;}
.sugg button:hover,.sugg button:focus{background:var(--emerald-soft);outline:none;}
.sugg .s-name{font-size:.85rem;font-weight:500;}
.sugg .s-sub{font-size:.72rem;color:var(--ink-3);}
.sugg .s-more{font-size:.72rem;color:var(--ink-3);padding:.4rem .65rem;}

.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem;}
.chip{border:1px dashed var(--rule);background:transparent;color:var(--ink-2);font:inherit;
      font-size:.74rem;padding:.28rem .55rem;border-radius:999px;cursor:pointer;}
.chip:hover{border-style:solid;border-color:var(--emerald);color:var(--emerald-ink);}

.bl{display:flex;gap:.4rem;align-items:flex-start;margin-bottom:.45rem;}
.bl textarea{flex:1;}
.bl .x{border:0;background:transparent;color:var(--ink-3);font-size:1.1rem;cursor:pointer;padding:.2rem .35rem;}
.bl .x:hover{color:var(--crit);}
.todo{margin:.15rem 0 .6rem 0;display:flex;gap:.4rem;}
.todo .inp{font-size:.82rem;}
.todo input[type="date"]{max-width:9.5rem;}

.confirm{background:var(--warn-soft);color:var(--warn);border:1px solid currentColor;border-radius:9px;
     padding:.5rem .6rem;font-size:.78rem;margin:.5rem 0;display:flex;gap:.5rem;align-items:center;}
.confirm button{margin-left:auto;border:0;background:var(--warn);color:var(--paper);border-radius:7px;
     font:inherit;font-size:.74rem;font-weight:600;padding:.25rem .6rem;cursor:pointer;}

.threads{font-size:.78rem;color:var(--ink-2);background:var(--paper-2);border-radius:9px;
     padding:.55rem .65rem;margin:.8rem 0;}
.rp-foot{display:flex;gap:.5rem;margin-top:1.1rem;}
.rp-foot .btn{flex:1;}
.btn.ghost{background:transparent;border:1px dashed var(--rule);color:var(--ink-2);}
.btn.wide{width:100%;margin-top:.8rem;}
.link.danger{color:var(--crit);}
/* Not .preview: that class is the receipt photo, and its max-height:170px would
   silently crop the email to two and a half lines. Same page, two different things
   being previewed. */
.mailpreview{background:var(--paper-2);border:1px solid var(--rule);border-radius:9px;padding:.7rem .8rem;
     font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.55;
     white-space:pre-wrap;overflow:auto;max-height:min(58vh,520px);margin:.9rem 0;color:var(--ink);}
.err{color:var(--crit);font-size:.8rem;margin-top:.7rem;}

/* Laptops: FAS work on them, and a phone column stranded mid-screen reads as broken. */
/* ---------------------------------------------------------------- sizing
 * One layout, three shapes. The phone is the base: everything below is what a
 * wider screen is allowed to change, and nothing here moves a control to a place
 * a thumb cannot reach on the small one.
 *
 *   < 700px   phone — a single column, 520px cap (unchanged)
 *   >= 700px  tablet, and a phone turned sideways — wider column, roomier taps
 *   >= 900px  laptop — cards two across, but prose and fields stay readable-width
 *   >= 1280px large display — cards three across; the column stops growing
 */

/* Tablets, and any phone in landscape. One column still: two columns of cards on
 * a 768px portrait iPad gives 340px each, which is narrower than the phone. */
@media (min-width:700px){
  .screen.wide-report{max-width:680px;}
  .pad{max-width:680px;padding:0 1.5rem 2.5rem;}
  .rp-lead{font-size:1rem;}
  /* Touch targets grow rather than shrink with the screen — a tablet is still
     used with a finger, often standing up in a corridor. */
  .btn,.seg-b,.chip{min-height:46px;}
  .todo{grid-template-columns:1fr 11rem;}
  /* Off the phone there is a left edge to line up with, so the toggles stop
     floating in the middle of a column of left-aligned fields. */
  .seg{margin-left:0;}
}

@media (min-width:900px){
  .screen.wide-report{max-width:960px;}
  .pad{max-width:960px;padding:0 2rem 3rem;}
  .cardlist{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-items:start;}
  /* The card and send screens are a form and a letter, not a grid: a 30-word line
     is unreadable however much room the window has, so those screens stop growing
     — header bar included, or the Remove button ends up a hand-span from the text
     it belongs to. */
  #s-card,#s-send{max-width:720px;}
  /* Only the card grid uses the full width. Everything that is typed into or read
     as a sentence keeps a column, left-aligned under the cards rather than
     stretched across the window. */
  #rp-add,#rp-open,.rp-notes-wrap,.rp-foot{max-width:660px;}
  .rp-foot{max-width:420px;}
  .seg{margin-left:0;}
  .mailpreview{font-size:.86rem;}
}

@media (min-width:1280px){
  .screen.wide-report{max-width:1180px;}
  .pad{max-width:1180px;}
  .cardlist{grid-template-columns:repeat(3,1fr);}
}

/* Companies found while mapping. Deliberately tighter than the entry it sits under —
   it is a list of small facts, not prose, and it should read as a block rather than
   compete with the sentence above it. */
.finds{display:flex;flex-direction:column;gap:.4rem;margin:.15rem 0 .6rem .75rem;
     padding-left:.75rem;border-left:2px solid var(--rule);}
.find{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.4rem;align-items:center;}
.find .inp{font-size:.85rem;padding:.5rem .55rem;}
.btn.small{min-height:38px;font-size:.85rem;padding:.4rem .7rem;}
/* On a phone three fields across is unusable, so they stack and the row reads as a
   little card of its own. */
@media (max-width:600px){
  /* Stacked, three fields become a wall of identical boxes and you cannot see where
     one company ends and the next begins. The grouping has to be drawn. */
  .find{grid-template-columns:1fr auto;grid-template-areas:"company x" "person person" "contact contact";
        background:var(--paper-2);border:1px solid var(--rule);border-radius:9px;padding:.5rem;gap:.35rem;}
  .find .inp{background:var(--paper);}
  .find .inp:nth-of-type(1){grid-area:company;}
  .find .inp:nth-of-type(2){grid-area:person;}
  .find .inp:nth-of-type(3){grid-area:contact;}
  .find .x{grid-area:x;}
}

/* ------------------------------------------------------------- follow-up tiles
   Closed by default, opened by tapping the head. The left edge carries the urgency:
   red for overdue, amber for due within two days, nothing for later. The colour is
   a second signal only — every tile also says the words, because a coloured edge
   tells a colour-blind reader nothing at all. */
.rcard.fu{cursor:default;padding:0;overflow:hidden;border-left:4px solid transparent;}
.rcard.fu.late{border-left-color:var(--crit);}
.rcard.fu.soon{border-left-color:var(--warn);}
.fu-head{display:block;width:100%;text-align:left;background:none;border:0;padding:.85rem .9rem;
     font:inherit;color:inherit;cursor:pointer;}
.fu-head:focus-visible{outline:2px solid var(--emerald);outline-offset:-2px;}
.rcard.fu .rc-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;}
.rcard.fu .rc-body{margin:.35rem 0 0;}
.rcard.fu.late .rc-tag{color:var(--crit);}
.rcard.fu.soon .rc-tag{color:var(--warn);}
.fu-body{padding:0 .9rem .85rem;border-top:1px solid var(--rule);}
.fu-from{font-size:.78rem;color:var(--ink-3);margin:.6rem 0 .7rem;}
.fu-act{display:flex;gap:.45rem;align-items:center;}
.fu-act .fu-date{flex:1 1 auto;min-width:0;}
.fu-act .btn{width:auto;padding:.45rem .9rem;flex:0 0 auto;}

/* Adding a card is the thing people do most on this screen, so it earns the accent —
   as an outline rather than a filled button, because Send is the one action on the
   screen that ends the day and it must stay the only solid green. */
#rp-add{border-color:var(--emerald);color:var(--emerald);border-style:dashed;}
#rp-add:hover{background:var(--emerald-soft);}

/* The way back to what already went out. Quiet — it is a reassurance, not a task. */
.rp-mine-wrap{margin:1.1rem 0 0;text-align:center;}
/* A ledger tile is a fact by default. It becomes a control only when the report
   behind it can still be changed, and then it must look like one. */
.rcard.rl{cursor:default;}
button.rcard.rl{cursor:pointer;}
.rcard.rl.late{border-left:4px solid var(--crit);}
.rcard.rl.late .rc-tag{color:var(--crit);}

.rc-meta{font-size:.78rem;color:var(--ink-3);margin:.35rem 0 0;}
/* What tapping this tile will do. Deliberately in the accent colour rather than
   the muted one the meta line uses: it is the only line on the tile that is an
   invitation rather than a fact. */
.rc-hint{font-size:.78rem;color:var(--emerald-ink);margin:.3rem 0 0;font-weight:500;}
.rcard.rl .rc-tag{white-space:nowrap;}


/* Discard: a link, not a button, and red only once it has asked. A destructive
   control that looks like the primary action is a trap. */
.rp-discard-wrap{text-align:center;margin:.9rem 0 .2rem;}
.link.danger{color:var(--ink-3);}
.link.danger.armed{color:#b3261e;font-weight:600;}


/* The addition notice. Not an error — a report added to is a legitimate thing — so
   it reads as a note, and only the third one warms up. */
.addnote{font-size:.82rem;line-height:1.45;color:var(--ink-2);background:var(--paper-2);
  border-left:3px solid var(--rule);border-radius:0 8px 8px 0;padding:.6rem .75rem;margin:.7rem 0 0;}
.addnote.firm{border-left-color:#c9871a;}


/* A question from the office, sitting among the rep's own follow-ups. Neutral until
   it has been asked twice — the point is one tap, not guilt. */
.contactask{display:flex;flex-direction:column;gap:.5rem;}
.contactask.done{opacity:.55;}
.ct-acts,.ct-acts2{display:flex;flex-wrap:wrap;gap:.4rem;}
.ct-acts .btn{width:auto;flex:0 1 auto;font-size:.82rem;padding:.42rem .7rem;}
.ct-fix{display:flex;flex-direction:column;gap:.4rem;padding-top:.2rem;}
.ct-fix label{font-size:.78rem;color:var(--ink-3);}
.ct-acts2 .btn{width:auto;}

/* The office's own view of what reps have captured. */
.cq-row{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:start;
  padding:.75rem 0;border-bottom:1px solid var(--rule);}
.cq-who{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.cq-who b{font-size:.95rem;}
.cq-who span{font-size:.82rem;color:var(--ink-3);}
.cq-state{font-size:.8rem;color:var(--ink-2);text-align:right;white-space:normal;max-width:16rem;}
.cq-acts{grid-column:1 / -1;display:flex;gap:.4rem;flex-wrap:wrap;}
.cq-acts .btn{width:auto;font-size:.8rem;padding:.35rem .65rem;}


/* A lead: captured, but not yet attached to an institution. Marked, not alarmed —
   it is a normal state for somebody met at a company nobody has dealt with. */
.cq-row.unmatched{border-left:3px solid var(--warn);padding-left:.6rem;}
.cq-match{grid-column:1 / -1;display:flex;flex-direction:column;gap:.4rem;
  margin-top:.5rem;padding:.7rem;background:var(--paper-2);border-radius:8px;}
.cq-match label{font-size:.82rem;color:var(--ink-2);}
/* Recording a reply that came by email. The warning is amber and stated before the
   buttons, not after — a person should know they are replacing somebody's own answer
   while they still have the option not to. */
.cq-reply-acts{display:flex;flex-wrap:wrap;gap:.4rem;}
.cq-warn{margin:0;font-size:.82rem;background:var(--warn-soft);color:var(--warn);
  border-left:3px solid var(--warn);border-radius:0 6px 6px 0;padding:.5rem .6rem;}
.cq-hits{display:flex;flex-direction:column;gap:.25rem;max-height:14rem;overflow-y:auto;}
.cq-hit{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;
  text-align:left;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:7px;
  background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;}
.cq-hit:hover{border-color:var(--emerald);background:var(--emerald-soft);}
.cq-hit b{font-size:.88rem;font-weight:600;}
.cq-hit span{font-size:.76rem;color:var(--ink-3);}


/* Installed on a home screen, the web view can extend under the status bar. If the
   inset ever resolves to zero there — an older iOS, a viewport-fit that did not
   take — a floor keeps the top row of controls reachable rather than under the
   carrier and battery icons. */
@media (display-mode: standalone){
  body{ padding-top:max(var(--safe-t), 22px); }
}


/* ─────────────────────────── the batch desk ───────────────────────────
   The office desk's way in, and the screen behind it. The button is NOT a
   fourth segment: Receipt / Visit / Attendance answer "what are you
   recording?", and a batch is a second way to record the first of those. So it
   sits with the other alternative input, under the shutter, and only for a
   designation that works a desk. */
.batch-line{margin:.9rem 0 0;text-align:center;display:flex;flex-direction:column;
            align-items:center;gap:.2rem;}
.batch-b{background:var(--emerald-soft);color:var(--emerald-ink);
         border:1px solid var(--emerald);border-radius:9px;
         font:inherit;font-weight:600;font-size:.92rem;
         padding:.6rem 1.1rem;cursor:pointer;}
.batch-b:active{transform:translateY(1px);}
.batch-why{font-size:.72rem;color:var(--ink-3);}

/* Amber, not emerald: this one is not an invitation, it is an outstanding
   question. Same shape as the batch line so it reads as the same kind of thing,
   different colour so it does not read as the same errand. Hidden entirely at
   zero — a permanent "0 waiting" is furniture, and furniture stops being read. */
.held-line{margin:.9rem 0 0;text-align:center;display:flex;flex-direction:column;
           align-items:center;gap:.2rem;}
.held-b{background:var(--warn-soft);color:var(--warn);
        border:1px solid var(--warn);border-radius:9px;
        font:inherit;font-weight:600;font-size:.92rem;
        padding:.6rem 1.1rem;cursor:pointer;}
.held-b:active{transform:translateY(1px);}

/* An unfinished day, and the banner when one is open. Amber for the same reason
   the held line is amber: it is an outstanding question, not an invitation. */
.rp-unfinished{display:flex;flex-direction:column;gap:.35rem;margin:.2rem 0 .8rem;}
.rp-resume{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn);
           border-radius:8px;font:inherit;font-size:.85rem;font-weight:600;
           padding:.55rem .8rem;text-align:left;cursor:pointer;}
.rp-resume:active{transform:translateY(1px);}
.rp-stale{background:var(--warn-soft);color:var(--warn);border-left:3px solid var(--warn);
          border-radius:0 8px 8px 0;padding:.6rem .75rem;font-size:.85rem;margin:0 0 .7rem;}
.rp-stale.over{font-weight:600;}

/* Who did you deal with — the people already on file, as names to tap. Chips rather
   than a dropdown: on a phone at a gate, three names visible beat a select nobody
   opens, and the one already chosen has to be obvious without opening anything. */
.known{margin-bottom:.2rem;}
.known-row{display:flex;flex-wrap:wrap;gap:.4rem;}
.known-b{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--rule);
  border-radius:9px;padding:.5rem .7rem;font:inherit;text-align:left;cursor:pointer;}
.known-b:active{transform:translateY(1px);}
.known-b.on{background:var(--emerald-soft);border-color:var(--emerald);}
.known-n{font-size:.9rem;font-weight:600;}
.known-b.on .known-n{color:var(--emerald-ink);}
.known-t{font-size:.72rem;color:var(--ink-3);}

/* The picker reads as the shutter's equivalent for a stack: one wide target,
   because the whole point is that it is pressed once for fourteen receipts. */
.shutter-wide{display:block;text-align:center;background:var(--emerald);
              color:var(--on-emerald);font-weight:700;font-size:1rem;
              border-radius:10px;padding:.95rem 1rem;margin:1rem 0 .4rem;
              cursor:pointer;}
.shutter-wide:active{transform:translateY(1px);}

.shots{list-style:none;margin:.6rem 0 0;padding:0;display:flex;
       flex-direction:column;gap:.05rem;background:var(--rule-soft);
       border:1px solid var(--rule);border-radius:8px;overflow:hidden;}
.shots:empty{display:none;}
.shots li{background:var(--paper);padding:.5rem .7rem;display:flex;
          align-items:center;gap:.6rem;font-size:.82rem;}
.shots .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
           color:var(--ink-2);}
.shots .st{font-size:.72rem;color:var(--ink-3);white-space:nowrap;}
.shots li.ok .st{color:var(--emerald-ink);}
.shots li.dupe .st{color:var(--warn);}
.shots li.bad .st{color:var(--crit);}


/* ───────────────────── correcting a batch: table, then cards ─────────────────
   Eight columns on a desk. On a phone eight boxes in a row is unusable and eight
   stacked is a wall you cannot tell apart, so the row becomes a card with the two
   things that identify a receipt — supplier and total — given the width, and the
   rest arranged under them. Same markup either way: the grid areas move, nothing
   is hidden, because a field you cannot reach on a phone is a receipt somebody
   has to go back to a computer for. */
.corr-head{display:none;}
.corr-row{display:grid;gap:.35rem;align-items:center;background:var(--paper);
          border:1px solid var(--rule);border-radius:9px;padding:.55rem;margin:.5rem 0;
          grid-template-areas:"sup sup" "tot vat" "dat cat" "inv tin" "st st";
          grid-template-columns:1fr 1fr;}
.corr-row input,.corr-row select{font:inherit;font-size:.85rem;padding:.45rem .5rem;
          border:1px solid var(--rule);border-radius:6px;background:var(--ground);
          color:var(--ink);width:100%;min-width:0;}
.corr-row .f-dat{grid-area:dat;} .corr-row .f-sup{grid-area:sup;}
.corr-row .f-inv{grid-area:inv;} .corr-row .f-tin{grid-area:tin;}
.corr-row .f-cat{grid-area:cat;} .corr-row .f-tot{grid-area:tot;}
.corr-row .f-vat{grid-area:vat;} .corr-row .f-st{grid-area:st;}
.corr-row .f-sup input{font-weight:600;}
.corr-row .f-tot input{font-weight:600;text-align:right;}
.corr-row .f-st{display:flex;gap:.5rem;align-items:center;justify-content:space-between;
          border-top:1px solid var(--rule-soft);padding-top:.45rem;margin-top:.15rem;}
.corr-note{font-size:.74rem;color:var(--ink-3);flex:1;}
.corr-row.flag{border-color:var(--warn);}
.corr-row.flag .corr-note{color:var(--warn);}
.corr-row.done{opacity:.55;}
.corr-row.done .corr-note{color:var(--emerald-ink);}
/* A phone turned sideways. It buys width and SPENDS HEIGHT, and editing needs
   height: the keyboard takes most of a landscape viewport, so a full eight-column
   table there shows about two rows above the keys. So landscape gets a denser
   card — supplier, total and category on one line, the rest under — rather than
   the table, and the padding tightens so more rows survive the keyboard. */
@media (min-width:640px){
  .corr-row{grid-template-areas:"sup sup tot" "dat cat vat" "inv tin st";
            grid-template-columns:1fr 1fr 8rem;}
  .corr-row .f-st{border:0;padding:0;margin:0;}
}
@media (orientation:landscape) and (max-height:520px){
  .corr-row{padding:.4rem;margin:.35rem 0;gap:.3rem;}
  .corr-row input,.corr-row select{padding:.35rem .45rem;}
}

@media (min-width:860px){
  .corr-head{display:grid;grid-template-columns:6.5rem 1fr 8rem 9rem 10rem 6.5rem 6rem 7rem;
             gap:.35rem;padding:0 .55rem;font-size:.68rem;letter-spacing:.06em;
             text-transform:uppercase;color:var(--ink-3);}
  .corr-row{grid-template-areas:"dat sup inv tin cat tot vat st";
            grid-template-columns:6.5rem 1fr 8rem 9rem 10rem 6.5rem 6rem 7rem;
            border-radius:7px;}
  .corr-row .f-st{border:0;padding:0;margin:0;flex-direction:column;align-items:stretch;gap:.2rem;}
  .corr-note{font-size:.68rem;}
}

/* TIN and the VAT/Non-VAT choice share one cell: they answer one question about
   the supplier, and separating them invites filling in a TIN while the row still
   says non-VAT. */
.corr-row .f-tin{display:flex;gap:.3rem;align-items:center;}
.corr-row .f-tin input{flex:1;min-width:0;}
.corr-row .f-tin select{width:auto;flex:0 0 auto;font-size:.78rem;padding:.45rem .3rem;}

/* The receipt, opened under the held row that is asking about it. Capped so a
   tall thermal strip does not push every other row off the screen. */
.corr-img{display:block;width:100%;max-width:520px;max-height:60vh;object-fit:contain;
  margin:.5rem 0 .2rem;border:1px solid var(--rule);border-radius:6px;background:#fff;}

/* the contacts screen, grouped by what the office has to do */
.cq-group{margin-top:1.4rem;}
.cq-group:first-child{margin-top:.2rem;}
.cq-why{display:block;font-size:.75rem;color:var(--warn);margin-top:.2rem;}
.cq-age{display:block;font-size:.72rem;color:var(--ink-3);margin-top:.15rem;}
.cq-age.stale{color:var(--warn);font-weight:500;}

/* Filling in a contact's missing email — on a picked person, and on Follow-ups. */
.known-gap{margin-top:.5rem;}
.rcard.gap .gap-f{display:flex;flex-direction:column;gap:.4rem;margin-top:.4rem;}
.rcard.gap.done{opacity:.7;}

/* The reader disagrees — the two answers, on the tile that asks. */
.amountfix .af-act{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.3rem;}
.amountfix .af-form{display:flex;flex-direction:column;gap:.35rem;margin-top:.45rem;}
.amountfix .af-l{font-size:.72rem;color:var(--ink-3);}
.amountfix .af-amt,.amountfix .af-note{width:100%;box-sizing:border-box;font:inherit;
  font-size:.85rem;padding:.5rem .6rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--paper);color:var(--ink);}
.amountfix .af-msg{display:block;font-size:.75rem;color:var(--ink-3);margin-top:.3rem;}

/* Whether this phone is actually keeping the day. */
.rp-saved{font-size:.72rem;color:var(--ink-3);margin:.2rem 0 .6rem;}
.rp-saved.bad{color:var(--attn,#b3261e);font-weight:600;}