/* ======================================================================================
   TRUKVIA Driver App (App 2): components added on top of mockup.css
   ====================================================================================== */
@font-face { font-family: "Noto Sans Devanagari"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/noto-sans-devanagari-devanagari-wght-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+25CC, U+A830-A839, U+A8E0-A8FF; }
:root {
  --sans: "Inter", "Noto Sans Telugu", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Manrope", "Inter", "Noto Sans Telugu", "Noto Sans Devanagari", system-ui, sans-serif;
  --dv: "Noto Sans Devanagari", "Inter", sans-serif;
}
.dv { font-family: var(--dv); }

/* ---------- home: the trip on the road ---------- */
.d-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 2px; }
.d-top .plate { flex: none; }
.dh { position: relative; margin-top: 14px; padding: 16px 16px 14px; border-radius: 24px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, rgba(43, 107, 224, 0.55), transparent 60%), linear-gradient(160deg, var(--navy-800), var(--navy-950));
  box-shadow: 0 18px 40px -22px rgba(7, 26, 58, 0.9); }
.dh-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 650 12px/1 var(--sans); color: rgba(255, 255, 255, 0.72); }
.dh-top .live { display: inline-flex; align-items: center; gap: 6px; color: #9fe7c4; }
.dh-top .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.22); }
.dh-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 14px; }
.dh-route b { display: block; font: 800 19px/1.1 var(--display); letter-spacing: -0.01em; }
.dh-route small { display: block; margin-top: 4px; font: 500 12px/1.2 var(--sans); color: rgba(255, 255, 255, 0.66); }
.dh-route .end { text-align: right; }
.dh-route > .ic { width: 20px; height: 20px; color: var(--orange-400); }
.dh-bar { position: relative; height: 6px; margin: 16px 4px 0; border-radius: 6px; background: rgba(255, 255, 255, 0.16); }
.dh-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--orange-500), var(--orange-300)); }
.dh-bar .truck { position: absolute; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin-left: -14px; transform: translateY(-50%); border-radius: 50%; background: #fff; color: var(--navy-900); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.dh-bar .truck .ic { width: 15px; height: 15px; }
.dh-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font: 500 12.5px/1.2 var(--sans); color: rgba(255, 255, 255, 0.72); }
.dh-meta b { font-weight: 750; color: #fff; }
.next { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 20px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-600)); box-shadow: 0 14px 28px -16px rgba(226, 109, 0, 0.9); }
.next-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, 0.2); }
.next-ic .ic { width: 22px; height: 22px; }
.next > span:nth-child(2) { flex: 1; min-width: 0; }
.next small { display: block; font: 650 11.5px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.next b { display: block; margin-top: 5px; font: 800 18px/1.15 var(--display); }
.next > .ic { width: 20px; height: 20px; opacity: 0.9; }
.next.blue { background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); box-shadow: 0 14px 28px -16px rgba(22, 82, 184, 0.9); }
.next.green { background: linear-gradient(135deg, var(--green-500), var(--green-600)); box-shadow: 0 14px 28px -16px rgba(11, 138, 85, 0.9); }

/* ---------- place cards with a map ---------- */
.pc { margin-top: 12px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 10px 26px -16px rgba(13, 30, 60, 0.22); }
.pc-map { position: relative; height: 112px; background:
  linear-gradient(90deg, transparent 49.4%, #fff 49.4%, #fff 50.6%, transparent 50.6%) 0 0 / 62px 100%,
  linear-gradient(0deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%) 0 0 / 100% 44px,
  linear-gradient(160deg, #e7eef6, #dfe9e1 60%, #e9efe4); }
.pc-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-map .rt { fill: none; stroke: var(--blue-600); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pc-map .rt.ghost { stroke: rgba(22, 82, 184, 0.25); stroke-dasharray: 2 7; }
.pc-map .pin { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; margin: -30px 0 0 -15px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--orange-500); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.45); }
.pc-map .pin::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.pc-map .pin.g { background: var(--green-500); }
.pc-map .me { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 4px #fff, 0 0 0 12px rgba(22, 82, 184, 0.18); }
.pc-map .km { position: absolute; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font: 700 11.5px/1 var(--sans); color: var(--ink-2); }
.pc-body { padding: 14px 16px 4px; }
.pc-body .pill { margin-bottom: 8px; }
.pc-body b { display: block; font: 750 16px/1.25 var(--display); color: var(--ink); }
.pc-body p { margin-top: 4px; font: 450 13px/1.4 var(--sans); color: var(--muted); }
.pc-when { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 13px/1.2 var(--sans); color: var(--ink-2); }
.pc-when .ic { width: 16px; height: 16px; color: var(--blue-600); }
.pc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px 16px; }
.pc-acts > span { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 14px; background: var(--blue-50); font: 650 14px/1 var(--sans); color: var(--blue-600); cursor: pointer; }
.pc-acts > span.go { background: var(--navy-900); color: #fff; }
.pc-acts .ic { width: 18px; height: 18px; }

/* ---------- contacts with call and WhatsApp ---------- */
.ct { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ct + .ct::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 0.5px; background: var(--line); }
.ct .c-main { flex: 1; min-width: 0; }
.ct .c-main b { display: block; font: 650 14.5px/1.25 var(--sans); color: var(--ink); }
.ct .c-main span { display: block; margin-top: 3px; font: 450 12.5px/1.3 var(--sans); color: var(--muted); }
.rb { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-50); color: var(--blue-600); cursor: pointer; }
.rb .ic { width: 18px; height: 18px; }
.rb.wa { background: var(--green-50); color: var(--green-600); }

/* ---------- checklists ---------- */
.cl { padding: 6px 14px; }
.cl li { position: relative; display: flex; gap: 12px; padding: 10px 0; }
.cl li + li { border-top: 0.5px solid var(--line); }
.cl li > i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: #eef1f6; color: var(--faint); font-style: normal; }
.cl li > i .ic { width: 15px; height: 15px; }
.cl li.ok > i { background: var(--green-50); color: var(--green-600); }
.cl li.warn > i { background: var(--amber-50); color: var(--amber-700); }
.cl li.info > i { background: var(--blue-50); color: var(--blue-600); }
.cl li b { display: block; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.cl li span { display: block; margin-top: 2px; font: 450 12.5px/1.35 var(--sans); color: var(--muted); }
.cl li time { margin-left: auto; padding-left: 8px; font: 600 12px/1.3 var(--sans); color: var(--faint); white-space: nowrap; }

/* ---------- money ---------- */
.mh { margin-top: 12px; padding: 18px; border-radius: 24px; color: #fff; background: radial-gradient(120% 100% at 0% 0%, rgba(253, 154, 42, 0.32), transparent 55%), linear-gradient(150deg, var(--navy-800), var(--navy-950)); box-shadow: 0 18px 40px -22px rgba(7, 26, 58, 0.9); }
.mh small { display: block; font: 650 12px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mh > b { display: block; margin-top: 8px; font: 800 38px/1 var(--display); letter-spacing: -0.03em; }
.mh > span { display: block; margin-top: 6px; font: 500 13px/1.35 var(--sans); color: rgba(255, 255, 255, 0.75); }
.mh-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.mh-acts span { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, 0.14); font: 650 14px/1 var(--sans); color: #fff; cursor: pointer; }
.mh-acts span.pri { background: #fff; color: var(--navy-900); }
.mh-acts .ic { width: 17px; height: 17px; }
.amt-big { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 18px 0 6px; font: 800 44px/1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.amt-big .caret { height: 40px; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.keys span { display: grid; place-items: center; height: 40px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e1e6ee; font: 650 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.keys span.on { background: var(--navy-900); box-shadow: none; color: #fff; }

/* ---------- OTP and phone ---------- */
.cc { display: inline-flex; align-items: center; gap: 6px; padding-right: 10px; margin-right: 4px; border-right: 1px solid #e1e6ee; font-weight: 650; color: var(--ink); }
.code-boxes.err span { box-shadow: inset 0 0 0 2px var(--red-500); color: var(--red-600); }
.sms-chip { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 0.5px var(--line), 0 8px 18px -14px rgba(13, 30, 60, 0.3); font: 500 13px/1.3 var(--sans); color: var(--muted); cursor: pointer; }
.sms-chip b { color: var(--ink); }
.sms-chip .tile { width: 32px; height: 32px; border-radius: 10px; }
.resend { margin-top: 14px; text-align: center; font: 500 13.5px/1.4 var(--sans); color: var(--muted); }
.resend b { color: var(--ink); }

/* ---------- camera ---------- */
.app.cam { background: #000; color: #fff; }
.cam-top { display: flex; align-items: center; justify-content: space-between; padding: 58px 18px 10px; }
.cam-top span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font: 650 13px/1 var(--sans); cursor: pointer; }
.cam-top .ic { width: 16px; height: 16px; }
.cam-view { position: relative; flex: 1; margin: 0 0 8px; overflow: hidden; background: radial-gradient(120% 80% at 50% 30%, #4b4f57, #1b1d22 70%); }
.cam-doc { position: absolute; left: 50%; top: 47%; width: 236px; height: 318px; padding: 18px 16px; transform: translate(-50%, -50%) rotate(-3deg); border-radius: 3px; background: linear-gradient(180deg, #f7f4ec, #ebe6da); box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5); color: #33302a; }
.cam-doc b { display: block; font: 800 12px/1.2 var(--display); letter-spacing: 0.04em; }
.cam-doc i { display: block; height: 5px; margin-top: 8px; border-radius: 3px; background: rgba(51, 48, 42, 0.18); }
.cam-doc i.s { width: 60%; }
.cam-doc .stamp { position: absolute; right: 18px; bottom: 54px; width: 70px; height: 70px; border: 3px solid rgba(37, 79, 170, 0.6); border-radius: 50%; transform: rotate(-14deg); }
.cam-doc .sign { position: absolute; left: 20px; bottom: 34px; width: 110px; height: 40px; }
.cam-doc .sign path { fill: none; stroke: #1f3c88; stroke-width: 2; stroke-linecap: round; }
.cam-frame { position: absolute; left: 50%; top: 47%; width: 262px; height: 344px; transform: translate(-50%, -50%) rotate(-3deg); border: 2px solid #ffd60a; border-radius: 6px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28); }
.cam-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); font: 600 12.5px/1 var(--sans); white-space: nowrap; color: #ffd60a; }
.cam-modes { display: flex; justify-content: center; gap: 20px; font: 650 12.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.cam-modes span { cursor: pointer; }
.cam-modes .on { color: #ffd60a; }
.cam-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 30px 44px; }
.cam-thumb { width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(160deg, #f1ede3, #cfc8b8); box-shadow: 0 0 0 2px #fff; cursor: pointer; }
.cam-shutter { width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #000, 0 0 0 7px #fff; cursor: pointer; }
.cam-flip { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); cursor: pointer; }
.cam-flip .ic { width: 20px; height: 20px; }

/* ---------- uploads, photos and signature ---------- */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.shots > span { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #cfd8e3, #9fb0c4); cursor: pointer; }
.shots > span.p1 { background: linear-gradient(170deg, #c9d6e6 0 38%, #6f7d8c 38% 70%, #3b4450 70%); }
.shots > span.p2 { background: linear-gradient(160deg, #f2eee4, #d9d2c2); }
.shots > span.p2::before { content: ""; position: absolute; inset: 18% 20%; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(51, 48, 42, 0.18) 0 3px, transparent 3px 8px); }
.shots > span.p3 { background: linear-gradient(175deg, #d7e3ee 0 45%, #2b2f36 45% 62%, #a7b3c0 62%); }
.shots > span.add { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px #cdd5e1; color: var(--blue-600); }
.shots > span.add .ic { width: 22px; height: 22px; }
.shots > span i { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green-500); color: #fff; font-style: normal; }
.shots > span i .ic { width: 11px; height: 11px; stroke-width: 3; }
.up { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.up + .up::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: 0.5px; background: var(--line); }
.up .ph { flex: none; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(160deg, #cfd8e3, #9fb0c4); }
.up .ph.p2 { background: linear-gradient(160deg, #f2eee4, #d9d2c2); }
.up .ph.pdf { display: grid; place-items: center; background: var(--red-50); font: 800 10px/1 var(--display); color: var(--red-600); }
.up .c-main { flex: 1; min-width: 0; }
.up .c-main b { display: block; font: 600 14px/1.25 var(--sans); }
.up .c-main span { display: block; margin-top: 3px; font: 450 12px/1.3 var(--sans); color: var(--muted); }
.up-bar { height: 4px; margin-top: 7px; border-radius: 4px; background: #e6ebf2; overflow: hidden; }
.up-bar i { display: block; height: 100%; border-radius: 4px; background: var(--green-500); }
.up-bar.fail i { background: var(--red-500); }
.retry { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--red-50); font: 650 13px/1 var(--sans); color: var(--red-600); cursor: pointer; }
.retry .ic { width: 14px; height: 14px; }
.sig { position: relative; height: 110px; margin-top: 8px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px #dfe4ec; }
.sig svg { position: absolute; inset: 10px 16px 24px; width: calc(100% - 32px); height: calc(100% - 34px); }
.sig path { fill: none; stroke: var(--navy-900); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sig small { position: absolute; left: 16px; right: 16px; bottom: 8px; padding-top: 5px; border-top: 1px dashed #cdd5e1; font: 500 11px/1 var(--sans); color: var(--faint); }
.sig .clear { position: absolute; right: 12px; top: 10px; font: 650 12.5px/1 var(--sans); color: var(--blue-600); cursor: pointer; }

/* ---------- paper documents (LR, e-way bill, slips, statements) ---------- */
.paper { margin-top: 10px; padding: 18px 16px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(13, 30, 60, 0.08), 0 16px 32px -20px rgba(13, 30, 60, 0.4); font: 450 11.5px/1.45 var(--sans); color: var(--ink-2); }
.paper-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--navy-900); }
.paper-h b { display: block; font: 800 14px/1.15 var(--display); color: var(--navy-950); }
.paper-h small { display: block; margin-top: 3px; font: 500 10.5px/1.3 var(--sans); color: var(--muted); }
.paper-h .tag { flex: none; padding: 4px 8px; border-radius: 6px; background: var(--navy-900); font: 750 10px/1 var(--sans); letter-spacing: 0.06em; color: #fff; text-transform: uppercase; }
.paper-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 12px; }
.paper-g div small { display: block; font: 650 9.5px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.paper-g div b { display: block; margin-top: 4px; font: 650 12px/1.3 var(--sans); color: var(--ink); }
.paper-g .w { grid-column: 1 / -1; }
.paper-t { width: 100%; margin-top: 12px; border-collapse: collapse; font: 500 11px/1.3 var(--sans); }
.paper-t th { padding: 6px 4px; background: #f2f4f8; font: 700 9.5px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-align: left; color: var(--muted); }
.paper-t td { padding: 6px 4px; border-bottom: 0.5px solid var(--line); }
.paper-t td.r, .paper-t th.r { text-align: right; font-variant-numeric: tabular-nums; }
.paper-f { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #cdd5e1; font: 500 10.5px/1.35 var(--sans); color: var(--muted); }
.paper .bar { height: 26px; margin-top: 12px; background: repeating-linear-gradient(90deg, #0b1526 0 2px, transparent 2px 4px, #0b1526 4px 5px, transparent 5px 8px, #0b1526 8px 11px, transparent 11px 12px); opacity: 0.85; }

/* ---------- small pieces ---------- */
.offline { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: #eef1f6; font: 550 12.5px/1.35 var(--sans); color: var(--ink-2); }
.offline .ic { width: 16px; height: 16px; flex: none; color: var(--muted); }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.kv div { padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(13, 30, 60, 0.03), 0 8px 22px -14px rgba(13, 30, 60, 0.16); }
.kv small { display: block; font: 600 11.5px/1.2 var(--sans); color: var(--muted); }
.kv b { display: block; margin-top: 6px; font: 800 17px/1.1 var(--display); color: var(--ink); }
.kv b.g { color: var(--green-600); }
.kv b.a { color: var(--amber-700); }
.kv b.r { color: var(--red-600); }
.kv em { display: block; margin-top: 4px; font: 500 11px/1.2 var(--sans); font-style: normal; color: var(--faint); }
.big-ok { display: grid; place-items: center; width: 72px; height: 72px; margin: 26px auto 0; border-radius: 50%; background: var(--green-50); color: var(--green-600); box-shadow: 0 0 0 10px rgba(18, 163, 102, 0.08); }
.big-ok .ic { width: 34px; height: 34px; stroke-width: 2.6; }
.ok-title { margin-top: 18px; text-align: center; font: 800 22px/1.2 var(--display); color: var(--ink); }
.ok-sub { margin: 8px 12px 0; text-align: center; font: 450 14px/1.45 var(--sans); color: var(--muted); }
.loc-ok { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--green-50); font: 600 13.5px/1.35 var(--sans); color: #0b5e3b; }
.loc-ok .ic { width: 20px; height: 20px; flex: none; }
.lang-preview { margin-top: 2px; font: 450 12.5px/1.35 var(--sans); color: var(--muted); }
.d-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 10px; border-radius: 999px; background: var(--blue-50); font: 650 12px/1 var(--sans); color: var(--blue-600); }
.d-tag .ic { width: 13px; height: 13px; }
.doc-ph { position: relative; height: 150px; margin-top: 12px; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #f4f1e8, #e2dccd); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); cursor: pointer; }
.doc-ph::before { content: ""; position: absolute; inset: 22px 26px; background: repeating-linear-gradient(180deg, rgba(51, 48, 42, 0.16) 0 4px, transparent 4px 13px); }
.doc-ph::after { content: ""; position: absolute; right: 28px; bottom: 22px; width: 54px; height: 54px; border: 3px solid rgba(37, 79, 170, 0.45); border-radius: 50%; }
.doc-ph span { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 5px 9px; border-radius: 999px; background: rgba(11, 21, 38, 0.72); font: 650 11.5px/1 var(--sans); color: #fff; }

/* timeline rows that change state when filled in */
.tl li:not(.done) .d .ic { display: none; }