/* ===========================================================================
   CareRite Receipts — design system.

   The same world as the CareRite AP platform: warm stone desk, paper surfaces,
   ink type, one green accent used relentlessly. The tokens below are lifted
   from that product's own app.css so the two belong to each other — the serif
   is there because the CareRite monogram is a serif, and the ink values are
   the ones that were darkened after a render audit found half the labels in
   the product sitting at the bottom of the legible range.

   What is DIFFERENT here, because this is a phone in one hand in a car park:
     - Touch targets are 48px minimum, not 32.
     - The capture screen is a full-bleed black stage. The camera is the
       subject; chrome gets out of its way.
     - Nothing important is below the fold on a 667px tall screen.
     - Every state a cardholder can be in has a sentence, not an icon.
   =========================================================================== */

@font-face{font-family:"Source Sans 3";src:url("/fonts/SourceSans3-Variable.woff2") format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/fonts/SourceSerif4-Variable.woff2") format("woff2-variations");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#DCD4C1;        /* the desk */
  --sunk:#F1ECE0;      /* recessed: rails, table heads, toolbars, wells */
  --raise:#FFFFFF;     /* paper — documents and primary cards */
  --rule:#A79E88;      /* a separator you are meant to see */
  --hair:#DED6C4;      /* a cell divider you are not */

  --ink:#12100A; --ink2:#332E23; --ink3:#4A4336; --ink4:#584F3D;

  --accent:#0A5A3B; --accent-dim:#BFD6C8; --accent-ghost:rgba(10,90,59,.07);
  --bar:#5A9E80;

  --warn:#8A5A12; --bad:#8C2F20; --good:#0A5A3B;
  --info:#2F4A63; --info-ghost:rgba(47,74,99,.07);

  --paper-edge:0 0 0 1px var(--hair), inset 0 1px 0 rgba(255,255,255,.65),
               0 2px 6px rgba(22,19,13,.07), 0 10px 30px -8px rgba(22,19,13,.13);
  --well-edge:inset 0 1px 0 rgba(22,19,13,.06), inset 0 -1px 0 rgba(255,255,255,.65),
              0 0 0 1px #E3DCCB;

  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",ui-serif,Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Touch. 48px is the floor for a thumb; 44 is Apple's and it is not enough
     for somebody holding a bag. */
  --tap:48px;
  --pad:16px;
}

:root[data-theme="dark"]{
  --bg:#0C1620; --raise:#11202E; --sunk:#0A131C;
  --rule:#1D3145; --hair:#16283A;
  --ink:#E4EBF2; --ink2:#AFC1D3; --ink3:#7C93AA; --ink4:#55697E;
  --accent:#3FB984; --accent-dim:#1E5C46; --accent-ghost:rgba(63,185,132,.10);
  --bar:#3FA077;
  --warn:#D79A45; --bad:#CF6B5C; --good:#3FB984;
  --paper-edge:0 0 0 1px var(--hair), 0 2px 6px rgba(0,0,0,.4);
  --well-edge:inset 0 1px 0 rgba(0,0,0,.3), 0 0 0 1px var(--hair);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.45;font-weight:400;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* The capture screen takes the whole viewport on a phone with a notch. */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------------------------------------------------------------- typography */

h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance;
  letter-spacing:-.011em;line-height:1.18}
h1{font-size:26px}
h2{font-size:20px}
h3{font-size:17px}
p{margin:0 0 .7em}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
a:hover{border-bottom-color:var(--accent)}

.eyebrow{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink4)}
.lede{font-size:17px;color:var(--ink2);max-width:62ch}
.hint{font-size:13px;color:var(--ink3);max-width:66ch}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--ink3)}
.right{text-align:right}
.nowrap{white-space:nowrap}

/* ------------------------------------------------------------------ surfaces */

.wrap{max-width:1180px;margin:0 auto;padding:var(--pad)}
.narrow{max-width:460px;margin:0 auto;padding:var(--pad)}

.paper{background:var(--raise);border-radius:4px;box-shadow:var(--paper-edge);
  padding:20px}
.well{background:var(--sunk);border-radius:4px;box-shadow:var(--well-edge);padding:14px}

.row{display:flex;gap:12px;align-items:center}
.row.wrapped{flex-wrap:wrap}
/* A control inside a row shares the line. Without this the base
   `input,select{width:100%}` rule makes every one of them claim the whole row,
   and a card with a dropdown, a button and a text box becomes four stacked
   full-width controls — twice the height for the same two actions. */
.row > input,.row > select,.row > textarea{width:auto;flex:1 1 180px;min-width:0}
.row > button,.row > .btn{flex:0 0 auto}
.spread{display:flex;gap:12px;align-items:center;justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.fill{flex:1;min-width:0}

/* -------------------------------------------------------------------- chrome */

.bar{
  position:sticky;top:0;z-index:40;background:var(--sunk);
  box-shadow:0 1px 0 var(--rule), 0 6px 18px -14px rgba(22,19,13,.5);
}
.bar .inner{max-width:1180px;margin:0 auto;padding:10px var(--pad);
  display:flex;gap:14px;align-items:center}
.brand{display:flex;gap:9px;align-items:center;font-family:var(--serif);
  font-weight:600;font-size:17px;color:var(--ink);white-space:nowrap}
.brand .mark{width:26px;height:26px;border-radius:3px;background:var(--accent);
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;
  font-family:var(--serif)}
.brand small{display:block;font-family:var(--sans);font-size:10.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);
  line-height:1}

.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  appearance:none;border:0;background:transparent;font:inherit;font-size:14px;
  font-weight:500;color:var(--ink3);padding:9px 13px;border-radius:3px;
  cursor:pointer;white-space:nowrap;min-height:40px;
  border-bottom:2px solid transparent;
}
.tabs button:hover{color:var(--ink);background:var(--accent-ghost)}
.tabs button[aria-current="true"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ------------------------------------------------------------------ controls */

button,.btn{
  appearance:none;font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  min-height:var(--tap);padding:0 18px;border-radius:3px;
  border:1px solid var(--rule);background:var(--raise);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .12s, border-color .12s;
  -webkit-tap-highlight-color:transparent;
}
button:hover,.btn:hover{background:var(--sunk)}
button:active,.btn:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{filter:brightness(1.1)}
button.danger{color:var(--bad);border-color:var(--bad)}
button.danger:hover{background:var(--bad);color:#fff}
button.ghost{border-color:transparent;background:transparent;color:var(--ink2);
  font-weight:500}
button.ghost:hover{background:var(--accent-ghost);color:var(--accent)}
button.small{min-height:36px;font-size:13.5px;padding:0 12px}
button.wide{width:100%}

:where(button,a,input,select,textarea):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink4);margin-bottom:5px}

input,select,textarea{
  font:inherit;width:100%;min-height:var(--tap);padding:10px 12px;
  border-radius:3px;border:1px solid var(--rule);background:var(--raise);
  color:var(--ink);
  /* 16px minimum or iOS zooms the page when the field is focused, which on the
     capture screen throws the camera out of frame. */
  font-size:16px;
}
textarea{min-height:88px;resize:vertical;line-height:1.45}
input::placeholder,textarea::placeholder{color:var(--ink4)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ghost);outline:none}
input[inputmode="numeric"],input.code{font-family:var(--mono);letter-spacing:.14em}
.field{margin-bottom:14px}
.field .hint{margin-top:5px}

/* A file input, hidden behind a label that looks like every other button.
   The native control renders differently in every browser and says "No file
   chosen" in grey next to it, which reads as an error. */
.filepick{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
label.btn{margin-bottom:0;text-transform:none;letter-spacing:normal;
  font-size:15px;color:var(--ink)}

details{border-top:1px solid var(--hair);padding-top:10px}
details summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--accent);
  list-style:none;padding:6px 0;min-height:36px;display:flex;align-items:center;gap:6px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";font-family:var(--mono);font-size:15px;
  color:var(--ink4)}
details[open] summary::before{content:"‘2"}

/* ---------------------------------------------------------------- status */

/* A dot and a word, never a fleet of coloured pills. */
.state{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  font-weight:600;color:var(--ink2);white-space:nowrap}
.state::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ink4);flex:none}
.state.good::before{background:var(--good)}
.state.warn::before{background:var(--warn)}
.state.bad::before{background:var(--bad)}
.state.info::before{background:var(--info)}
.state.open::before{background:transparent;box-shadow:inset 0 0 0 2px var(--ink4)}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:3px 8px;border-radius:2px;background:var(--sunk);color:var(--ink3);
  box-shadow:inset 0 0 0 1px var(--hair)}
.chip.accent{background:var(--accent-ghost);color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent-dim)}
.chip.bad{color:var(--bad);box-shadow:inset 0 0 0 1px rgba(140,47,32,.3)}
.chip.warn{color:var(--warn);box-shadow:inset 0 0 0 1px rgba(138,90,18,.3)}

.note{border-left:3px solid var(--rule);padding:11px 13px;font-size:14px;
  color:var(--ink2);background:var(--sunk);border-radius:0 3px 3px 0}
.note.bad{border-left-color:var(--bad)}
.note.warn{border-left-color:var(--warn)}
.note.good{border-left-color:var(--good)}
.note.info{border-left-color:var(--info)}
.note strong{color:var(--ink)}

/* --------------------------------------------------------------- stat tiles */

.stat{background:var(--raise);border-radius:4px;box-shadow:var(--paper-edge);
  padding:14px 16px;min-width:0}
.stat .k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink4);margin-bottom:5px}
.stat .v{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--ink)}
.stat .v.small{font-size:22px}
.stat .sub{font-size:12.5px;color:var(--ink3);margin-top:5px}
.stat.alert .v{color:var(--bad)}
.stat.alert{box-shadow:0 0 0 1px rgba(140,47,32,.35), var(--paper-edge)}

/* ------------------------------------------------------------------- tables */

.sheet{width:100%;border-collapse:collapse;font-size:14px}
.sheet th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink4);padding:9px 10px;
  background:var(--sunk);position:sticky;top:0;z-index:1;
  box-shadow:inset 0 -1px 0 var(--rule)}
.sheet td{padding:10px;border-bottom:1px solid var(--hair);vertical-align:top}
.sheet tbody tr:hover{background:var(--accent-ghost)}
.sheet tr.picked{background:var(--accent-ghost);
  box-shadow:inset 3px 0 0 var(--accent)}
.sheet td.num,.sheet th.num{text-align:right;font-variant-numeric:tabular-nums}
.scroller{overflow:auto;max-height:70vh;border-radius:4px;background:var(--raise);
  box-shadow:var(--paper-edge)}

/* On a phone a table is a stack of cards. The headers come from data-label so
   one markup serves both, rather than two screens drifting apart. */
/* ---------------------------------------------------------------- the phone

   Two things break first at 390px and both are visible the moment you look at
   a real screenshot rather than at a response body:

     1. The top bar. Brand plus seven tabs plus a sign-out button do not fit,
        so the last tabs are cut off and "Sign out" wraps onto two lines. The
        tabs get their own row.
     2. Three stat tiles, each the full width of the screen, push the thing a
        person actually came to do below the fold. They go three across.         */
@media (max-width:620px){
  .bar .inner{flex-wrap:wrap;row-gap:6px;padding:8px 12px}
  .bar .brand{flex:1 1 auto;min-width:0}
  .bar .brand span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar .inner > .fill{display:none}
  .bar .inner > button:last-child{flex:0 0 auto;white-space:nowrap;
    min-height:36px;padding:0 10px;font-size:13px}
  .tabs{order:3;flex:1 0 100%;margin:0 -12px;padding:0 12px;
    box-shadow:inset 0 1px 0 var(--hair)}
  .tabs button{padding:8px 11px;font-size:13.5px}

  /* Three numbers across, not three screens deep. */
  .grid.three,.grid.four{grid-template-columns:repeat(3,1fr);gap:8px}
  .grid.three .stat,.grid.four .stat{padding:10px 11px}
  .grid.three .stat .k,.grid.four .stat .k{font-size:9.5px;letter-spacing:.06em}
  .grid.three .stat .v,.grid.four .stat .v{font-size:24px}
  .grid.three .stat .sub,.grid.four .stat .sub{font-size:11px;line-height:1.25}

  .wrap{padding:12px}
  h1{font-size:23px}
  .paper{padding:16px}
}

@media (max-width:720px){
  .sheet thead{display:none}
  .sheet,.sheet tbody,.sheet tr,.sheet td{display:block;width:100%}
  .sheet tr{border-bottom:1px solid var(--rule);padding:10px 0}
  .sheet td{border:0;padding:3px 10px;display:flex;gap:10px}
  .sheet td::before{content:attr(data-label);flex:0 0 42%;font-size:11px;
    font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink4)}
  .sheet td.num{text-align:left}
}

/* ------------------------------------------------------------- the camera */

.stage{
  position:fixed;inset:0;background:#07090C;display:grid;
  /* meters, the charge being answered, the picture, the shutter. The picture
     takes what is left; the other three size to their content.
     Each child is pinned to its own row BY NAME below rather than by its
     position in the markup, because `.hide` is display:none — a hidden banner
     stops being a grid item, every later child slides up a row, and the video
     ends up on an auto track and collapses to nothing. */
  grid-template-rows:auto auto 1fr auto;z-index:50;
}
.stage > .meters{grid-row:1}
.stage > .answering{grid-row:2}
.stage > .vid{grid-row:3}
.stage > .shutters{grid-row:4}

/* The charge being answered. Shown on the camera and again on the review
   sheet, because "which charge am I photographing" is the one question a
   person must not have to remember the answer to. */
.answering{
  background:var(--info-ghost);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);padding:9px 14px;display:grid;gap:4px;
}
.stage > .answering{
  background:rgba(47,74,99,.30);border-color:rgba(255,255,255,.12);
  color:#fff;backdrop-filter:blur(6px);
}
.stage > .answering .hint{color:rgba(255,255,255,.76)}
.stage > .answering .mk{color:rgba(255,255,255,.62)}
.answering .mk{
  font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink4);
}
.answering b{font-size:15px}
.answering .spread{align-items:center;gap:10px}
.stage .vid{position:relative;overflow:hidden;background:#07090C}
.stage video{width:100%;height:100%;object-fit:cover;display:block}
.stage canvas.work{display:none}

/* The frame. Four corners, not a box: a box tells you where to put the
   receipt and then covers the edge you are trying to see. */
.guides{position:absolute;inset:7% 5%;pointer-events:none}
.guides i{position:absolute;width:38px;height:38px;border:3px solid rgba(255,255,255,.62);
  transition:border-color .18s, transform .18s}
.guides i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.guides i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 3px 0 0}
.guides i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 3px}
.guides i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 3px 0}
.stage[data-ready="yes"] .guides i{border-color:#3FD39A;transform:scale(1.06)}

/* The countdown ring, drawn with a conic gradient so there is no SVG to
   animate and no layout to thrash. */
.ring{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#3FD39A calc(var(--p,0)*1%), rgba(255,255,255,.14) 0);
  opacity:0;transition:opacity .2s}
.stage[data-ready="yes"] .ring{opacity:1}
.ring span{width:52px;height:52px;border-radius:50%;background:rgba(7,9,12,.82);
  display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:15px}

.coach{position:absolute;left:0;right:0;bottom:96px;text-align:center;
  pointer-events:none;padding:0 16px}
.coach b{display:inline-block;background:rgba(7,9,12,.74);color:#fff;
  padding:8px 15px;border-radius:999px;font-size:14.5px;font-weight:600;
  backdrop-filter:blur(8px);max-width:92%}
.stage[data-ready="yes"] .coach b{background:rgba(10,90,59,.86)}

/* The three live meters. Visible on purpose: a person who can see WHY it is
   not firing moves the phone instead of jabbing the shutter. */
.meters{display:flex;gap:1px;background:rgba(255,255,255,.08);
  padding:8px 10px;align-items:stretch}
.meters div{flex:1;padding:4px 8px;min-width:0}
.meters .mk{font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.5);white-space:nowrap}
.meters .mv{font-family:var(--mono);font-size:12.5px;color:#fff;margin:2px 0 4px}
.meters .mb{height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.meters .mb i{display:block;height:100%;background:#D79A45;width:0;
  transition:width .14s linear, background .2s}
.meters div[data-pass="yes"] .mb i{background:#3FD39A}
.meters div[data-pass="yes"] .mk{color:rgba(63,211,154,.85)}

.shutters{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#07090C}
.shutters .big{width:70px;height:70px;border-radius:50%;background:#fff;
  border:4px solid rgba(255,255,255,.35);padding:0;flex:none}
.shutters .big:hover{background:#fff}
.shutters .side{background:transparent;border-color:rgba(255,255,255,.28);
  color:#fff;min-height:44px;font-size:13.5px;padding:0 13px}
.shutters .side:hover{background:rgba(255,255,255,.1)}

.toggle{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13.5px;
  font-weight:600;cursor:pointer;user-select:none;min-height:44px}
.toggle input{width:auto;min-height:0;margin:0}

/* ------------------------------------------------------------ review sheet */

.sheetover{position:fixed;inset:0;z-index:60;background:rgba(10,8,4,.55);
  display:grid;place-items:end center;backdrop-filter:blur(3px)}
.sheetover .card{background:var(--raise);width:100%;max-width:560px;
  border-radius:8px 8px 0 0;max-height:94vh;overflow:auto;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.4);animation:rise .22s ease-out}
@keyframes rise{from{transform:translateY(22px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .sheetover .card{animation:none}
  *{transition-duration:0s !important}
}
.shot{width:100%;border-radius:4px;background:var(--sunk);display:block;
  max-height:38vh;object-fit:contain;box-shadow:var(--well-edge)}

/* ------------------------------------------------------- the GL suggestion */

.pick{display:flex;flex-direction:column;gap:7px}
.pick button{
  justify-content:flex-start;text-align:left;padding:11px 13px;min-height:auto;
  font-weight:500;line-height:1.3;flex-direction:column;align-items:flex-start;gap:3px;
}
.pick button strong{font-weight:600;font-size:15px}
.pick button em{font-style:normal;font-size:12.5px;color:var(--ink3);font-weight:400}
.pick button[aria-pressed="true"]{border-color:var(--accent);
  background:var(--accent-ghost);box-shadow:inset 3px 0 0 var(--accent)}
.pick button[aria-pressed="true"] em{color:var(--accent)}

/* --------------------------------------------------------------- utilities */

.sep{height:1px;background:var(--rule);margin:18px 0;border:0}
.gap{height:14px}
.gap.big{height:26px}
.hide{display:none !important}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--accent-dim);border-top-color:var(--accent);
  animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:90;background:var(--ink);color:var(--raise);
  padding:12px 18px;border-radius:3px;font-size:14.5px;font-weight:500;
  max-width:92vw;box-shadow:0 8px 28px rgba(0,0,0,.35);animation:rise .18s}
.toast.bad{background:var(--bad);color:#fff}
.toast.good{background:var(--accent);color:#fff}

/* A bar chart drawn in a table cell. --bar, not --accent-dim: a wash measures
   1.52:1 on paper and every proportion bar drawn in one was invisible. */
.meter{height:7px;border-radius:2px;background:var(--sunk);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--hair);min-width:60px}
.meter i{display:block;height:100%;background:var(--bar)}
.meter i.bad{background:var(--bad)}
.meter i.warn{background:var(--warn)}

.empty{padding:36px 20px;text-align:center;color:var(--ink3)}
.empty h3{color:var(--ink2);margin-bottom:6px}

/* Print: the manual is a document somebody will print and put in a drawer. */
@media print{
  body{background:#fff;font-size:11pt}
  .bar,.tabs,button{display:none !important}
  .paper{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  a{color:#000;border:0}
}

/* ------------------------------------------------- the outstanding list --
   A list to be scanned and tapped, not a stack of cards to be read. Each row
   is the tap target: a full-width button on every row made the rows 140px
   tall, so one and a half charges fitted on a phone and the same green button
   repeated down the page carried no information at all. */
.listhead{
  display:flex;align-items:baseline;gap:10px;
  padding:2px 4px 10px;
}
.listhead strong{font-size:17px}
.listhead .hint{font-size:13px}

.chargerow{
  display:flex;align-items:center;gap:12px;width:100%;
  /* Comfortably over the 44px minimum, with the whole row live. */
  min-height:72px;padding:12px 14px;margin:0 0 1px;
  background:var(--raise);border:0;border-radius:0;
  box-shadow:var(--paper-edge);
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.chargerow:first-of-type{border-radius:var(--r) var(--r) 0 0}
.chargerow:last-of-type{border-radius:0 0 var(--r) var(--r)}
.chargerow:hover{background:var(--accent-ghost)}
.chargerow:active{background:var(--accent-dim)}
.chargerow:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.chargerow.started{box-shadow:var(--paper-edge), inset 3px 0 0 var(--warn)}

.cr-what{flex:1;min-width:0;display:grid;gap:3px}
.cr-what strong{
  font-size:16px;font-weight:650;line-height:1.25;
  /* A long merchant descriptor must not push the amount off the row. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cr-what .hint{font-size:13px;display:flex;align-items:center;gap:6px}
.cr-what .dot{opacity:.5}

.cr-amt{display:flex;align-items:center;gap:8px;flex:none}
/* The amount is the thing people match against the paper in their hand, so it
   is the heaviest thing on the row — and tabular, so the column scans. */
.cr-amt .num{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:700;
}
.cr-amt .chev{color:var(--ink4);font-size:22px;line-height:1}

.tag{
  justify-self:start;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  background:var(--accent-ghost);color:var(--accent);
}
.tag.warn{background:rgba(138,90,18,.10);color:var(--warn)}

/* A phone layout stretched across a desktop reads as broken: a tap target a
   thousand pixels wide, and the merchant and the amount at opposite ends of
   the screen. The sheet keeps its width and sits where the eye already is.

   Scoped to the cardholder app by its own class. `.wrap` is shared with the
   admin console, which is a table-heavy desktop screen and needs every one of
   its 1180 pixels — narrowing that selector would have crushed it. */
body.phoneapp .wrap{max-width:720px}