/* ======================================================================================
   TRUKVIA Customer App (App 4): module colours and the few pieces it adds.
   It also uses the components in driver.css and supplier.css.
   ====================================================================================== */
#m01 { --acc: #0a2150; --acc-t: #eef2fa; --acc-f: #123a7a; }
#m02 { --acc: #0b8bc9; --acc-t: #e5f6fd; --acc-f: #0b6f9f; }
#m03 { --acc: #1652b8; --acc-t: #eef4ff; --acc-f: #1652b8; }
#m04 { --acc: #0b8a55; --acc-t: #e7f7ef; --acc-f: #0b7a4b; }
#m05 { --acc: #6a4cf0; --acc-t: #f0ecff; --acc-f: #5a3ee0; }
#m06 { --acc: #e26d00; --acc-t: #fff4e8; --acc-f: #c45d00; }
#m07 { --acc: #071a3a; --acc-t: #eef1f6; --acc-f: #2b3a4c; }
#m08 { --acc: #0f766e; --acc-t: #e6f6f4; --acc-f: #0f766e; }
#m09 { --acc: #c47a00; --acc-t: #fff5df; --acc-f: #9a5b00; }
#m10 { --acc: #db2777; --acc-t: #fdf0f6; --acc-f: #be185d; }
.sh.teal { --sh1: #14a090; --sh2: #0b5f58; }
.sh.pink { --sh1: #ec4b8c; --sh2: #a3165a; }

/* LR copies: what the customer may open, and what stays with the office */
.chip.locked { opacity: 0.55; }
.chip.locked .ic { width: 13px; height: 13px; margin-right: 5px; }
.chip .ic { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }

/* a secure share link, opened in the browser */
.app.web { background: #f2f4f8; }
.safari { display: flex; align-items: center; gap: 8px; margin: 52px 12px 0; padding: 9px 12px; border-radius: 12px; background: #e6e9ef; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.safari .ic { width: 13px; height: 13px; flex: none; color: var(--muted); }
.safari b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; text-align: center; }
.webpage { flex: 1; overflow-y: auto; padding: 16px 16px 120px; }
.web-brand { display: flex; align-items: center; gap: 10px; font: 800 14px/1 var(--display); letter-spacing: 0.04em; color: var(--navy-950); }
.web-brand img { width: 30px; height: 30px; border-radius: 8px; background: #fff; padding: 3px; box-shadow: 0 0 0 1px #e1e6ee; }

/* the note that payments are not taken in the app */
.nopay { display: flex; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #dfe4ec; font: 500 12.5px/1.45 var(--sans); color: var(--ink-2); }
.nopay .ic { width: 18px; height: 18px; flex: none; color: var(--blue-600); }

/* a copy the customer may not open */
.lk-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; background: #eef1f6; font: 600 13.5px/1 var(--sans); color: var(--faint); cursor: pointer; }
.lk-chip .ic { width: 13px; height: 13px; }

/* the step tracker on a white card */
.hstep.light > div { color: var(--muted); }
.hstep.light > div + div::before { background: #dfe4ec; }
.hstep.light > div.done + div::before { background: var(--green-500); }
.hstep.light i { background: #eef1f6; color: var(--muted); }
.hstep.light .done i { background: var(--green-500); color: #fff; }
.hstep.light .now i { background: var(--blue-600); color: #fff; box-shadow: 0 0 0 4px var(--blue-100); }
.hstep.light .now { color: var(--ink); }
.orig { padding: 14px 16px 16px; }
.orig + .orig { border-top: 0.5px solid var(--line); }
.orig-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 700 14px/1.2 var(--sans); color: var(--ink); }
.orig-h small { font: 500 12px/1.3 var(--sans); color: var(--muted); }

/* tile colours this app adds */
.t-teal { background: #e6f6f4; color: #0f766e; }
.t-navy { background: #eef1f6; color: #0a2150; }
.t-pink { background: #fdf0f6; color: #be185d; }
.receipt-logo.t { background: #e6f6f4; color: #0f766e; }
.safari .reload { display: grid; place-items: center; flex: none; cursor: pointer; }
.f-row .box.mail { min-width: 0; flex: 0 1 auto; max-width: 74%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
/* chips that wrap onto a second line when every choice must stay visible */
.chips.wrap { flex-wrap: wrap; row-gap: 8px; }
.qa.three { grid-template-columns: repeat(3, 1fr); }