/* ================================================= records and the audit log
   Every list in the app that shows one row per thing — earths on an
   isolation, the team holding them, the fleet, an AP's own earths — is a
   .earth row. Restyling it here lifts all of them at once, and the board's
   two lists add a status badge on top.

   The audit log is deliberately the plainest thing on the screen. It is the
   evidence: it stays monospaced, it does not animate, and nothing in it is
   emphasised that the record itself does not emphasise.
   ---------------------------------------------------------------------- */

.earth {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; margin-bottom: 10px;
  border-radius: 16px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016) 60%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .15s;
}
.earth::before {
  content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 1.5px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45) 50%, transparent);
  opacity: .4;
}
.earth:hover { border-color: rgba(255, 255, 255, .2); }

/* the row's own state, where the list sets one */
.earth.out { border-color: rgba(229, 67, 60, .42); }
.earth.out::before {
  background: linear-gradient(90deg, transparent, #ff8178 50%, transparent);
  opacity: .9; box-shadow: 0 0 10px rgba(229, 67, 60, .6);
}
.earth.ok { border-color: rgba(47, 227, 106, .3); }

.rec-badge {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #b8c6bd;
}
.rec-badge svg { width: 20px; height: 20px; }
.earth.out .rec-badge {
  background: rgba(229, 67, 60, .18); border-color: rgba(229, 67, 60, .5); color: #ff8178;
}
.earth.ok .rec-badge {
  background: rgba(47, 227, 106, .14); border-color: rgba(47, 227, 106, .42); color: #6bffa0;
}

.earth > div:first-of-type,
.rec-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.earth .serial {
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800; letter-spacing: -.2px; line-height: 1.25;
  color: #fff; overflow-wrap: anywhere;
}
.earth .meta {
  font-size: 12.5px; line-height: 1.45; color: #93a899; overflow-wrap: anywhere;
}
/* a person's name is not a serial, so it is not set like one */
.earth .serial.who { letter-spacing: .1px; }

/* The status pill rides at the top right of the row, beside the serial, the
   way the chip does on an isolation card. The controls then get a line of
   their own and all three sit on it — sharing one line with the pill pushed
   the third button onto a second row and squeezed the serial to nothing. */
.earth > .pill {
  flex: 0 0 auto; align-self: center; margin-left: auto;
}

.rec-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.earth.has-act { flex-wrap: wrap; }
/* A grid, not a flex row: the controls share the width equally and stay on
   one line whatever the label says and however narrow the phone is. Wrapping
   put "Reprint tag" on a second row on anything under about 500px. */
.earth.has-act .rec-end {
  flex: 1 1 100%;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
  padding-top: 12px; margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.earth.has-act .rec-end > button.mini {
  min-width: 0; margin-left: 0; padding: 0 8px;
  font-size: 11px; letter-spacing: .4px;
  overflow: hidden; text-overflow: ellipsis;
}
.earth.out.has-act .rec-end { border-top-color: rgba(229, 67, 60, .26); }
.earth.ok.has-act .rec-end { border-top-color: rgba(47, 227, 106, .2); }

/* ------------------------------------------------------------- the pills */
.earth .pill, .pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 6px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
}
/* still on the line is the app's one alarm colour, everywhere it appears */
.pill.issued {
  background: rgba(229, 67, 60, .16); color: #ff8178;
  border: 1px solid rgba(229, 67, 60, .6);
}
.pill.returned {
  background: rgba(47, 227, 106, .14); color: #6bffa0;
  border: 1px solid rgba(47, 227, 106, .55);
}
.pill.available {
  background: rgba(255, 255, 255, .06); color: #a7b7ac;
  border: 1px solid rgba(255, 255, 255, .13);
}

.earth button.mini {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
.rec-late { color: #ff8178; font-weight: 700; }

.photo-thumb {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 10px; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .16);
}

/* ------------------------------------------------------------ audit log
   A timeline, not a table. One spine runs the whole record; each event sits
   on it as a node carrying the mark of what happened, so the eye finds the
   return, the hand back or the warning without reading a word. Nothing here
   animates and nothing is emphasised that the record does not emphasise —
   this is the evidence.
   ---------------------------------------------------------------------- */

.panel.log {
  position: relative;
  padding: 18px 16px 6px; border-radius: 18px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014) 60%),
    #0a0e0b;
  border: 1px solid rgba(255, 255, 255, .1);
}

.log .ev {
  position: relative;
  padding: 0 0 20px 44px;
  font-size: 13px; line-height: 1.5; color: #a7b7ac;
  border: 0;
}
/* the spine: drawn by each entry, so it ends with the last one */
.log .ev::before {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 1.5px;
  background: rgba(255, 255, 255, .12);
}
.log .ev:last-child { padding-bottom: 6px; }
.log .ev:last-child::before { display: none; }

.ev-node {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #121a15;
  border: 1.5px solid rgba(255, 255, 255, .2);
  color: #9fb3a6;
}
.ev-node svg { width: 15px; height: 15px; }

.ev-main { display: block; min-width: 0; }
.log .t {
  display: block; margin: 0 0 3px;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  color: #6c7d72; font-variant-numeric: tabular-nums;
  background: none; padding: 0; border-radius: 0;
}
.ev-txt { display: block; overflow-wrap: anywhere; }
.log .ev b { color: #eef3ee; font-weight: 700; }

/* what the node says, by kind */
.log .ev.issue .ev-node {
  border-color: rgba(201, 135, 42, .75); color: #e8a84a;
  background: rgba(201, 135, 42, .14);
}
.log .ev.return .ev-node {
  border-color: rgba(47, 227, 106, .6); color: #6bffa0;
  background: rgba(47, 227, 106, .12);
}
.log .ev.open .ev-node {
  border-color: rgba(47, 227, 106, .45); color: #6bffa0;
}
.log .ev.clear .ev-node,
.log .ev.handback .ev-node {
  border-color: #2fe36a; color: #06240f; background: #2fe36a;
  box-shadow: 0 0 14px rgba(47, 227, 106, .55);
}
.log .ev.warn .ev-node {
  border-color: #e5433c; color: #ff8178; background: rgba(229, 67, 60, .2);
  box-shadow: 0 0 14px rgba(229, 67, 60, .45);
}
/* events with no mark of their own are a plain point on the line */
.log .ev.info .ev-node, .log .ev.fleet .ev-node { width: 28px; height: 28px; }
.log .ev.info .ev-node::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .34);
}

.log .ev.warn, .log .ev.warn b { color: #ff8178; }
.log .ev.clear, .log .ev.clear b,
.log .ev.handback b { color: #6bffa0; }

@media (max-width: 460px) {
  .earth.has-act .rec-end { gap: 7px; }
}

@media (max-width: 400px) {
  .earth { padding: 12px; gap: 10px; border-radius: 14px; }
  .rec-badge { width: 36px; height: 36px; border-radius: 11px; }
  .rec-badge svg { width: 18px; height: 18px; }
  .earth .serial { font-size: 15px; }
  .earth .meta { font-size: 12px; }
  .earth .pill, .pill { font-size: 9.5px; padding: 5px 9px; letter-spacing: .7px; }
  .earth button.mini { padding: 8px 10px; font-size: 10.5px; }
  .photo-thumb { width: 38px; height: 38px; }
  .panel.log { padding: 16px 13px 4px; }
  .log .ev { font-size: 12.5px; padding-left: 40px; padding-bottom: 18px; }
  .ev-node { width: 26px; height: 26px; }
  .ev-node svg { width: 14px; height: 14px; }
  .log .ev::before { left: 12px; top: 24px; }
}

/* ============================================================ tool panels
   Reports and the tag sheet: a panel that explains what a document is and
   then produces it. Same head as the issue-an-earth panel, same fields, same
   submit — so the only thing that changes between screens is the content.
   ---------------------------------------------------------------------- */

.tool-panel {
  position: relative;
  display: flex; flex-direction: column; gap: 15px;
  margin: 0 0 16px; padding: 18px 16px 17px;
  border-radius: 20px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018) 60%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .11);
}
.tool-panel::before {
  content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 1.5px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 50%, transparent);
  opacity: .5;
}

.tp-head { display: flex; align-items: flex-start; gap: 13px; }
.tp-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(47, 227, 106, .14);
  border: 1px solid rgba(47, 227, 106, .42);
  color: #6bffa0;
}
.tp-ico svg { width: 22px; height: 22px; }
.tp-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tp-text b {
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 800; letter-spacing: .2px; line-height: 1.25; color: #fff;
}
.tp-text i { font-style: normal; font-size: 12.5px; line-height: 1.5; color: #93a899; }

.tp-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-acts .nf-submit { flex: 1 1 180px; margin-top: 0; }

.tp-sep { height: 1px; background: rgba(255, 255, 255, .1); margin: 2px 0; }

/* the two label types, side by side */
.tp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.tp-fact {
  padding: 13px; border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
}
.tp-fact b {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
  font-family: var(--font-display, inherit);
  font-size: 13.5px; font-weight: 800; letter-spacing: .2px; color: #eef3ee;
}
.tp-fact em {
  font-style: normal; font-family: var(--font-mono, monospace);
  font-size: 10.5px; font-weight: 600; color: #6bffa0;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(47, 227, 106, .13);
  border: 1px solid rgba(47, 227, 106, .34);
}
.tp-fact i { font-style: normal; display: block; font-size: 12px; line-height: 1.5; color: #93a899; }

/* a second action is never the loud one, and a destructive one is never green */
.nf-submit.ghost {
  color: #dbe6de;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
}
.nf-submit.ghost svg { color: #9fb3a6; }
.nf-submit.ghost:hover {
  background: rgba(255, 255, 255, .09); filter: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.nf-submit.danger {
  color: #ff8178;
  background: rgba(229, 67, 60, .14);
  box-shadow: inset 0 0 0 1px rgba(229, 67, 60, .55);
}
.nf-submit.danger svg { color: #ff8178; }
.nf-submit.danger:hover { background: rgba(229, 67, 60, .26); filter: none; }

@media (max-width: 460px) {
  .tp-facts { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .tool-panel { padding: 16px 14px 15px; gap: 13px; border-radius: 18px; }
  .tp-ico { width: 40px; height: 40px; }
  .tp-text b { font-size: 15px; }
  .tp-text i { font-size: 12px; }
  .tp-acts .nf-submit { flex: 1 1 100%; }
}

/* ======================================================= table actions
   Quarantine, Cancel tag, Reprint, Reset PIN, Enable/Disable, Allocate.
   These had no rule of their own — only a browser default and an inline
   colour — which rendered them 20px tall with no padding. This app is used
   on a phone, outdoors, in gloves, next to a live railway: nothing you have
   to press is allowed under 44px.
   ---------------------------------------------------------------------- */

button.mini {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px;
  border-radius: 11px; cursor: pointer; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  color: #dbe6de;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background .15s, border-color .15s;
}
button.mini:hover {
  background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .28); color: #fff;
}
button.mini:active { transform: translateY(1px); }
button.mini + button.mini { margin-left: 6px; }

/* Only what cannot be undone wears the alarm colour. This rule used to read
   ".earth button.mini", which turned Reset PIN, Unlock, Reprint tag and Pay
   now red the moment those lists moved into record rows — every control on
   the screen shouting at once says nothing. */
button.mini.danger {
  background: rgba(229, 67, 60, .16);
  border-color: rgba(229, 67, 60, .6);
  color: #ff8178;
}
button.mini.danger:hover {
  background: rgba(229, 67, 60, .3); border-color: #e5433c; color: #ffb4ae;
}

/* the rows have to breathe now that the controls are a real size */
.fleet td, .fleet th { padding: 10px 12px; vertical-align: middle; }
.fleet td:last-child { white-space: nowrap; }

/* a read-only field that shows a figure rather than taking one */
.nf-input.nf-static {
  cursor: default;
  background: rgba(255, 255, 255, .03);
}
.nf-input.nf-static > span {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-display, inherit);
  font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: #6bffa0;
}

.tp-total {
  font-size: 13.5px; font-weight: 600; color: #c2d0c6;
  font-variant-numeric: tabular-nums;
}
.tp-total:empty { display: none; }

.tp-note {
  display: flex; align-items: flex-start; gap: 9px; margin: 0;
  font-size: 12px; line-height: 1.5; color: #8fa094;
}
.tp-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: #6bffa0; }

/* the person who placed an order, named in the row */
.rec-who { color: #dbe6de; font-weight: 700; }

/* ============================================================== the toast
   What the app says when a scan does not land. It has to be readable at
   arm's length, in daylight, by someone holding an earth — so it is a solid
   card with an icon, not a tinted strip, and it arrives and leaves rather
   than blinking in and out.
   ---------------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: calc(26px + var(--sa-bottom)); z-index: 90;
  display: none; align-items: center; gap: 13px;
  max-width: min(92vw, 460px); padding: 15px 19px 15px 15px;
  border-radius: 18px;
  font-family: var(--font-body, inherit);
  font-size: 14.5px; font-weight: 600; line-height: 1.4; text-align: left;
  color: #ffd9d5;
  background:
    linear-gradient(158deg, rgba(229, 67, 60, .22), rgba(229, 67, 60, .08) 62%),
    #140b0a;
  border: 1px solid rgba(229, 67, 60, .6);
  box-shadow: 0 0 36px rgba(229, 67, 60, .28), 0 18px 44px rgba(0, 0, 0, .64);
  /* translateX stays in every keyframe, or the card jumps off-centre */
  transform: translateX(-50%);
}
.toast.in, .toast.out { display: flex; }

.toast-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(229, 67, 60, .22);
  border: 1px solid rgba(229, 67, 60, .5);
  color: #ff8178;
}
.toast-ico svg { width: 20px; height: 20px; }
.toast-msg { min-width: 0; overflow-wrap: anywhere; }

.toast.ok {
  color: #d7ffe7;
  background:
    linear-gradient(158deg, rgba(47, 227, 106, .2), rgba(47, 227, 106, .06) 62%),
    #08140d;
  border-color: rgba(47, 227, 106, .62);
  box-shadow: 0 0 36px rgba(47, 227, 106, .26), 0 18px 44px rgba(0, 0, 0, .64);
}
.toast.ok .toast-ico {
  background: rgba(47, 227, 106, .2); border-color: rgba(47, 227, 106, .5); color: #6bffa0;
}

/* a lit top edge, like every other card in the app */
.toast::before {
  content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff8178 50%, transparent);
  box-shadow: 0 0 12px rgba(229, 67, 60, .8);
}
.toast.ok::before {
  background: linear-gradient(90deg, transparent, #6bffa0 50%, transparent);
  box-shadow: 0 0 12px rgba(47, 227, 106, .75);
}

@keyframes toast-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(26px) scale(.94); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.012); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes toast-out {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.96); }
}
.toast.in  { animation: toast-in .42s cubic-bezier(.24, 1.3, .4, 1) both; }
.toast.out { animation: toast-out .4s cubic-bezier(.4, 0, .7, .4) both; }

@media (max-width: 400px) {
  .toast {
    bottom: calc(18px + var(--sa-bottom));
    padding: 13px 16px 13px 13px; gap: 11px; font-size: 13.5px;
  }
  .toast-ico { width: 34px; height: 34px; }
  .toast-ico svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast.in, .toast.out { animation: none; opacity: 1; }
}

/* takes something out of service, or unsticks it: attention, not alarm */
button.mini.warn {
  background: rgba(201, 135, 42, .16);
  border-color: rgba(201, 135, 42, .6);
  color: #e8a84a;
}
button.mini.warn:hover {
  background: rgba(201, 135, 42, .3); border-color: #c9872a; color: #ffc879;
}

/* puts something back into service */
button.mini.go {
  background: rgba(47, 227, 106, .14);
  border-color: rgba(47, 227, 106, .55);
  color: #6bffa0;
}
button.mini.go:hover {
  background: rgba(47, 227, 106, .26); border-color: #2fe36a; color: #9affc2;
}

/* ================================================ control centre watch
   An isolation can run all night. While an earth is on the infrastructure
   somebody in the control centre is accountable for it, so this panel states
   what is out, who last looked, and when the next look is due — and it turns
   red and breathes the moment that time passes, because a missed check is
   the thing it exists to make visible. With nothing out it goes quiet.
   ---------------------------------------------------------------------- */

.watch,
.ap-status {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  margin: 0 0 16px; padding: 18px 16px 17px;
  border-radius: 20px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .016) 60%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .11);
}
.watch::before,
.ap-status::before {
  content: ""; position: absolute; top: -1px; left: 16%; right: 16%; height: 1.5px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 50%, transparent);
  opacity: .5;
}

.watch-facts {
  display: flex; flex-wrap: wrap; gap: 9px 18px;
  font-size: 13.5px; line-height: 1.4; color: #c2d0c6;
}
.watch-facts > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.watch-facts svg { width: 16px; height: 16px; flex: 0 0 auto; color: #8fa094; }
.watch-time {
  padding: 3px 9px; border-radius: 999px; font-weight: 700;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #dbe6de; font-variant-numeric: tabular-nums;
}
.watch-time.late { background: rgba(229, 67, 60, .3); border-color: #e5433c; color: #ffb4ae; }

/* nothing out: the quiet state is quiet */
.watch.quiet .tp-ico,
.ap-status.clear .tp-ico {
  background: rgba(47, 227, 106, .13); border-color: rgba(47, 227, 106, .38); color: #6bffa0;
}

/* earths out, watch in date */
.watch.on,
.ap-status.clear { border-color: rgba(47, 227, 106, .45); }
.watch.on::before,
.ap-status.clear::before {
  background: linear-gradient(90deg, transparent, #6bffa0 50%, transparent);
  opacity: 1; box-shadow: 0 0 12px rgba(47, 227, 106, .7);
}

/* the check has been missed */
.watch.overdue,
.ap-status.out {
  border-color: rgba(229, 67, 60, .62);
  background:
    linear-gradient(158deg, rgba(229, 67, 60, .19), rgba(229, 67, 60, .05) 62%),
    #150a09;
  animation: watch-breathe 3.4s ease-in-out infinite;
}
.ap-status.out { animation: watch-breathe 3.4s ease-in-out infinite; }
.watch.overdue::before,
.ap-status.out::before {
  background: linear-gradient(90deg, transparent, #ff8178 50%, transparent);
  opacity: 1; box-shadow: 0 0 12px rgba(229, 67, 60, .8);
}
.watch.overdue .tp-ico,
.ap-status.out .tp-ico {
  background: rgba(229, 67, 60, .2); border-color: rgba(229, 67, 60, .55); color: #ff8178;
}
.watch.overdue .tp-text b,
.ap-status.out .tp-text b { color: #ff8178; }
.watch.overdue .watch-facts svg { color: #ff8178; }

@keyframes watch-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 67, 60, 0), 0 10px 28px rgba(0, 0, 0, .45); }
  50%      { box-shadow: 0 0 34px rgba(229, 67, 60, .4), 0 10px 28px rgba(0, 0, 0, .45); }
}

@media (max-width: 400px) {
  .watch,
  .ap-status { padding: 16px 14px 15px; gap: 12px; border-radius: 18px; }
  .watch-facts { font-size: 12.5px; gap: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .watch.overdue,
  .ap-status.out { animation: none; box-shadow: 0 0 22px rgba(229, 67, 60, .3); }
}

/* =============================================== the AP's own screen
   What an AP sees in the dark, in gloves, holding an earth: is anything of
   mine still on the wire, and where is the button that says it is off.
   ---------------------------------------------------------------------- */

/* scanned but not yet synced is its own state: an AP must never read it as
   "back in", because the nominated person cannot see it yet */
.ap-status.pending { border-color: rgba(201, 135, 42, .5); }
.ap-status.pending::before {
  background: linear-gradient(90deg, transparent, #e8a84a 50%, transparent);
  opacity: 1; box-shadow: 0 0 12px rgba(201, 135, 42, .6);
}
.ap-status.pending .tp-ico {
  background: rgba(201, 135, 42, .16); border-color: rgba(201, 135, 42, .55); color: #e8a84a;
}
.ap-status.pending .tp-text b { color: #e8a84a; }

.pill.pending {
  background: rgba(201, 135, 42, .16); color: #e8a84a;
  border: 1px solid rgba(201, 135, 42, .6);
}
.earth.pending { border-color: rgba(201, 135, 42, .4); }
.earth.pending .rec-badge {
  background: rgba(201, 135, 42, .16); border-color: rgba(201, 135, 42, .5); color: #e8a84a;
}

.ap-counts { grid-template-columns: repeat(2, 1fr); }

.scan-note {
  margin: 11px 0 0; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: #8fa094;
}

/* the offline queue: the one notice that must not look like page furniture */
.queued-note {
  display: flex; align-items: flex-start; gap: 13px;
  margin: 0 0 16px; padding: 15px 16px;
  border-radius: 18px;
  background:
    linear-gradient(158deg, rgba(201, 135, 42, .17), rgba(201, 135, 42, .05) 62%),
    #140f08;
  border: 1px solid rgba(201, 135, 42, .5);
}
.qn-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(201, 135, 42, .18);
  border: 1px solid rgba(201, 135, 42, .5);
  color: #e8a84a;
}
.qn-ico svg { width: 21px; height: 21px; }
.qn-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qn-text b {
  font-family: var(--font-display, inherit);
  font-size: 14.5px; font-weight: 800; line-height: 1.3; color: #e8a84a;
}
.qn-text i { font-style: normal; font-size: 12.5px; line-height: 1.45; color: #c9b08a; }

/* nothing issued: a statement, not an error */
.ap-empty {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 18px 16px;
  border-radius: 20px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .016) 60%),
    #0c110e;
  border: 1px solid rgba(255, 255, 255, .11);
}
.ap-empty .tp-ico {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13); color: #9fb3a6;
}

@media (max-width: 400px) {
  .queued-note { padding: 13px 14px; gap: 11px; }
  .qn-ico { width: 36px; height: 36px; }
  .qn-text b { font-size: 13.5px; }
  .qn-text i { font-size: 12px; }
}