/* The Approve card (js/approve.js): what a paid step costs, line by line, before it runs. Over the page and every other
   card (nothing under it moves), light and dark from the page's own tokens, phone width with a 16px gutter. */
.ap-bg{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgb(0 0 0 / .4)}
.ap{width:100%;max-width:460px;max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--pop);padding:20px}
.ap-h{display:flex;align-items:center;gap:4px}
.ap-h h2{font-size:18px;line-height:24px;font-weight:700}
.ap-l{list-style:none;margin:14px 0 0;border-top:1px solid var(--line)}
/* a Run's card: where it looks, one row in place of the lines */
.ap-where{margin:14px 0 0;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px;line-height:20px;color:var(--ink)}
.ap-where b{font-weight:600}
/* the rubric on a Run's or a job agent's card: red letters, no box (js/approve.js rubric) */
.ap-rb{margin:12px 0 0;color:var(--bad);font-size:13px;line-height:19px}
.ap-rbh{margin:0 0 4px;display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--bad)}
.ap-rbp{margin:0 0 4px}
.ap-rb b{font-weight:600}
.ap-rbl{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.ap-l li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:20px}
.ap-lb{flex:1;min-width:0}
.ap-l b{flex:none;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ap-l b.ap-free{color:var(--good);font-weight:500}
.ap-tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0 2px;font-size:14px}
.ap-tot span{color:var(--ink2)}
/* a line's or the total's (i): beside its words */
.ap-lb .rm-tip,.ap-tot .rm-tip{margin-left:2px}
.ap-tot b{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
/* a range with its dollars ("2 to 10 credits (0.01 to 0.05 USD)") wraps on a small phone */
@media (max-width:480px){.ap-tot b{white-space:normal;text-align:right}}
.ap-n{font-size:12.5px;line-height:18px;color:var(--ink3);margin-top:8px}
.ap-n.ap-bad{color:var(--bad)}
.ap-f{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
@media (max-width:420px){.ap{padding:16px}.ap-f .btn{flex:1}}

/* RM.confirm: its words, and the red button of a step that takes something away */
.ap-cft{font-size:14px;line-height:20px;color:var(--ink2);margin-top:10px}
.ap-f .btn.bad{background:#B91C1C;border-color:#B91C1C;color:#fff}
.ap-f .btn.bad:hover{background:#991B1B;border-color:#991B1B}
.ap-f .btn.bad:focus-visible{outline:2px solid #B91C1C;outline-offset:2px}
/* Don't ask again (a tick under the total) */
.ap-skip{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;line-height:18px;color:var(--ink2);cursor:pointer}
.ap-skip input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--brand);cursor:pointer}
/* Settings: the kinds approved without asking */

/* A phone (Max 2026-10-20: "Make it like real monile app UI now its confusing to look at on phone"), the app's phone
   query: the card is a sheet from the bottom of the screen (over the tab bar), its buttons stacked, 44 px tall and pinned
   at its foot (the lines scroll above them when there are many); the tick and the (i)s get touch-sized targets. */
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  .ap-bg{place-items:end center;padding:0}
  .ap{max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);padding:8px 16px 0;border-width:1px 0 0;border-radius:16px 16px 0 0;box-shadow:0 -12px 40px -12px rgb(0 0 0 / .35);overscroll-behavior:contain;animation:ap-sheet .2s ease-out}
  .ap::before{content:"";display:block;width:36px;height:4px;margin:0 auto 12px;border-radius:2px;background:var(--line)}
  .ap-f{position:sticky;bottom:0;flex-direction:column;flex-wrap:nowrap;gap:8px;margin:12px -16px 0;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
  .ap-f .btn{flex:none;width:100%;min-height:44px}
  .ap-f .btn.pri,.ap-f .btn.bad{order:-1}
  .ap-skip{min-height:44px}
  .ap-skip input{width:20px;height:20px}
  .ap .rm-tip{position:relative}
  .ap .rm-tip::after{content:"";position:absolute;inset:-9px}
}
@keyframes ap-sheet{from{transform:translateY(32px);opacity:0}}
.ap-tot.ap-us{padding-bottom:0}.ap-tot.ap-us b{font-size:14px;font-weight:600}