/* Send to MMM (start.js): upload states, the send box result, the customer status page. Same look as start.css. */
.file { align-items: center; }
.file__txt { display: grid; gap: 2px; min-width: 0; }
.file__txt .file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.file .file__state { font-size: 12px; color: #66635d; white-space: normal; max-width: 260px; overflow: visible; }
.file .file__state.is-ok { color: #1f6b3a; font-weight: 600; }
.file .file__state.is-err { color: #b3261e; }
.file progress { width: 90px; height: 6px; vertical-align: middle; accent-color: #111; }
.file--failed { box-shadow: inset 0 0 0 1px #e9b9b4; }
.drop span + span { font-size: 12px; }
.send__alt { font-size: 13px; }
.send__alt .sb__link { color: #fff; font-size: 13px; }
.send__warn { margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; }
.send__warn a { color: #fff; }
.hpf { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.send--done { background: #f4f2ee; color: #111; box-shadow: inset 0 0 0 2px #111; }
.send--done h3 { color: #111; }
.send--done .sb__muted { color: #66635d; }
.send--done .btn--dark { background: #111; color: #fff; }
.send--done .btn--light { background: #fff; color: #111; box-shadow: inset 0 0 0 1px #cbc6bf; }
.send--done .send__warn { background: #fff3e0; color: #5c3d00; }
.send--done .send__warn a { color: #5c3d00; }
.sent-ok, .sent-fail { display: grid; gap: 10px; outline: none; }
.sent-ok h3, .sent-fail h3 { font-size: 18px; }
.sent-ok .done__check { margin-bottom: 2px; }
.sent-ref { font-size: 16px; }
.sent-ref b { font-family: "Inter Tight", "Inter", system-ui, sans-serif; font-weight: 900; font-size: 22px; letter-spacing: .02em; white-space: nowrap; }   /* the ref never breaks across lines (phones) */
.sent-fail h3 { color: #fff; }
/* customer status page */
.st { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; display: grid; gap: 14px; }
.st__card { padding: 18px; border-radius: 14px; background: #f6f5f2; display: grid; gap: 8px; }
.st__state { display: inline-block; justify-self: start; padding: 5px 12px; border-radius: 999px; background: #111; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
.st__state--closed { background: #8a867f; }
.st__line { font-size: 17px; }
.st__items { display: grid; gap: 10px; }
.st__items div { display: grid; gap: 2px; padding-top: 10px; border-top: 1px solid #dcd8d1; }
.st__items div:first-child { border-top: 0; padding-top: 0; }
.st__items span { font-size: 14px; color: #3e3c38; }
/* Phase 1 (M-12/M-13): the status page leads into the job page ("See your order") and, when a link is wrong, to /find/ */
.st__job { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 6px; padding: 0 20px; border-radius: 10px; background: #111; color: #fff; font-weight: 700; font-size: 16px; }
.st__job .arr { width: 16px; height: 16px; }
.st__find { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; color: #111; font-weight: 600; }
.st__job:focus-visible, .st__find:focus-visible { outline: 2px solid #111; outline-offset: 3px; }