/*
 * The scene engine's styles, from Argusmetrics' site, in FreeSMS's palette:
 * graphite, grey and white, orange for something to note, red only for
 * something wrong now -- the same tokens the application uses.
 *
 * Scenes are drawn in px on a 960x540 canvas, 520x650 on a phone (.an-m),
 * and the engine scales the canvas to fit. Every class has a prefix (an- for
 * the engine, wf- for the wifi scene) so scenes cannot collide.
 */
.an-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #e9ebef; border: 1px solid #d3d7de; color: #14171c; text-align: left; }
.an-wrap.an-m { aspect-ratio: 4 / 5; }
.an-canvas { position: absolute; left: 0; top: 0; width: 960px; height: 540px; transform-origin: 0 0;
  font-size: 15px; line-height: 1.35; }
.an-m .an-canvas { width: 520px; height: 650px; }
.an-m .an-hide-m { display: none !important; }
/* Not in the still frame: hidden until the engine runs, so a page with no
   script shows one moment rather than every moment at once. The generator
   marks these. */
.an-wrap:not(.an-js) .an-off { display: none; }
.an-js [data-t] { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.an-js [data-t].an-r { transform: translateX(40px); }
.an-js [data-t].an-pop { transform: scale(.92); }
.an-js [data-t].an-fade { transform: none; }
.an-js [data-t].an-on { opacity: 1; transform: none; }
.an-card { position: absolute; background: #fff; border: 1px solid #d3d7de; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20,23,28,.06); overflow: hidden; }
.an-btn { display: inline-flex; align-items: center; justify-content: center; background: #1f2328; color: #fff;
  border-radius: 9px; padding: .55em 1em; font-weight: 600; font-size: .88em; }
.an-muted { color: #5b6270; }
.an-cap { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: #1f2328; color: #fff;
  border-radius: 22px; padding: .5em 1.15em; font-size: 15px; font-weight: 600; line-height: 1.35;
  white-space: normal; text-align: center; width: max-content; max-width: 860px;
  box-shadow: 0 6px 20px rgba(20,23,28,.25); z-index: 20; }
.an-js .an-cap[data-t] { transform: translate(-50%, 8px); }
.an-js .an-cap[data-t].an-on { transform: translate(-50%, 0); }
.an-m .an-cap { white-space: normal; text-align: center; width: max-content; max-width: 470px; font-size: 16px; }
.an-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 30; pointer-events: none; will-change: transform; }
.an-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.an-cursor::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(31,35,40,.3); transform: scale(0); opacity: 0; }
.an-cursor.an-click::after { animation: anClick .45s ease-out; }
@keyframes anClick { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.an-caret::after { content: ''; display: inline-block; width: 2px; height: 1.05em; background: #1f2328;
  vertical-align: -.15em; margin-left: 1px; }
.an-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #e9ebef;
  font-size: 12.5px; font-weight: 600; color: #3a4049; }
.an-dots::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c9ccd2;
  box-shadow: 13px 0 0 #c9ccd2, 26px 0 0 #c9ccd2; margin-right: 32px; }

/* ── Scene: the wifi goes down in the pit (wf-) ───────────────────────── */
.wf-phone { left: 44px; top: 26px; width: 300px; height: 488px; border-radius: 30px; border: 8px solid #1f2328; }
.wf-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 6px;
  font-size: 12px; font-weight: 700; }
.wf-wifi { position: relative; width: 20px; height: 16px; }
.wf-wifi svg { position: absolute; inset: 0; width: 20px; height: 16px; }
.wf-off { color: #c0261f; }
.wf-bar { background: #fff; border-bottom: 1px solid #e9ebef; padding: 8px 14px; font-size: 12px; color: #5b6270; }
.wf-bar b { color: #14171c; font-size: 15px; letter-spacing: .04em; }
.wf-body { padding: 10px 14px; }
.wf-h { font-size: 13px; font-weight: 700; margin: 4px 0 6px; }
.wf-field { border: 1px solid #d3d7de; border-radius: 8px; padding: 8px 10px; font-size: 13px; min-height: 18px; margin-top: 6px; background: #fff; }
.wf-field .lbl { display: block; font-size: 10.5px; color: #9aa3b2; font-weight: 600; line-height: 1.2; }
.wf-add { width: 100%; margin-top: 10px; padding: .7em 1em; }
/* In the flow, as in the application: the banner arrives at the top and
   pushes the page down, rather than covering it. Its height opens with it. */
.wf-held { background: #c2410c; color: #fff; text-align: center; font-size: 12px; font-weight: 600;
  max-height: 0; padding: 0 8px; overflow: hidden; }
.an-js .wf-held[data-t] { transition: opacity .35s ease, max-height .35s ease, padding .35s ease; }
.an-js .wf-held[data-t].an-on { max-height: 40px; padding: 6px 8px; }
/* A browser's own dialog: the page behind it dims. */
.wf-dim { position: absolute; inset: 0; background: rgba(20,23,28,.35); z-index: 5; }
.wf-alert { position: absolute; left: 18px; right: 18px; top: 170px; background: #fff; border: 1px solid #d3d7de;
  border-radius: 12px; padding: 14px; font-size: 13px; line-height: 1.45; box-shadow: 0 12px 30px rgba(20,23,28,.25); z-index: 6; }
.wf-alert .ok { display: block; text-align: right; margin-top: 10px; font-weight: 700; }
/* The sign-in page the phone opens on once the session has run out. */
.wf-signin { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; background: #fff; padding: 14px; z-index: 4; }
.wf-store { position: absolute; left: 14px; right: 14px; bottom: 14px; border: 1px dashed #c2410c; border-radius: 10px;
  padding: 8px 10px; font-size: 11.5px; color: #c2410c; background: #fff7ed; }
.wf-store code { font-size: 11px; }

.wf-desk { left: 404px; top: 26px; width: 512px; height: 300px; }
.wf-desk .wf-body { padding: 12px 18px; }
  border-top: 2px solid #1f2328; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* The line travelling from the pit to the front desk when the wifi is back:
   on screen while it is on its way, gliding across as it does. */
.wf-packet { position: absolute; left: 330px; top: 300px; z-index: 8; background: #0a7d37; color: #fff;
  border-radius: 99px; padding: 5px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.an-js .wf-packet[data-t] { transform: translateX(0); }
.an-js .wf-packet[data-t].an-on { transform: translateX(150px); transition: opacity .2s ease, transform 1.1s cubic-bezier(.4,0,.2,1); }

/* On a phone: the phone above, the front desk below. */
.an-m .wf-phone { left: 16px; top: 16px; width: 250px; height: 540px; }
.an-m .wf-desk { left: 274px; top: 16px; width: 230px; height: 300px; }
.an-m .wf-packet { left: 200px; top: 300px; }
.an-m .an-js .wf-packet[data-t].an-on, .an-m .wf-packet.an-on { transform: translateX(70px); }

.wf-gap { margin-top: 18px; }
.wf-secondary { background: #fff; color: #1f2328; border: 1px solid #1f2328; }
.wf-card { border: 1px solid #d3d7de; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; }
.wf-plate { font-weight: 800; letter-spacing: .05em; font-size: 15px; }
.wf-noticed { margin-top: 4px; color: #c2410c; font-weight: 700; }
.wf-other { opacity: .7; }
/* Invented data is said to be invented: a plate, a customer, a technician. */
.wf-example { display: inline-block; font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .06em;
  color: #9a3412; background: #ffedd5; border: 1px solid #fdba74; border-radius: 4px; padding: 0 5px; line-height: 16px; }
.an-head .wf-example { margin-left: auto; }

/* ── Scene: "when is it ready?" (rd-) ─────────────────────────────────── */
.rd-job { left: 44px; top: 92px; width: 440px; height: 270px; }
.rd-board { left: 516px; top: 92px; width: 400px; height: 150px; }
.rd-slot { position: absolute; left: 14px; right: 14px; top: 50px; }
.rd-frame { position: absolute; left: 14px; right: 14px; top: 76px; }
.rd-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.rd-dl dt { color: #5b6270; }
.rd-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.rd-tag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 8px;
  background: #e9ebef; color: #3a4049; margin-left: 4px; }
.rd-risk { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
.rd-meter { display: block; width: 100%; height: 10px; margin-top: 14px; }
.rd-track { fill: #e9ebef; }
.rd-fill { fill: #1f2328; }
.rd-note { font-size: 12px; color: #5b6270; margin: 8px 0 0; }
/* The wall clock: what moves in this scene is time. */
.rd-clock { position: absolute; left: 44px; top: 26px; width: 400px; height: 52px; font-size: 34px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rd-clock span { position: absolute; left: 0; top: 0; }
.rd-late { color: #c2410c; }

.an-m .rd-job { left: 16px; top: 76px; width: 488px; height: 260px; }
.an-m .rd-clock { left: 16px; top: 14px; }
.an-m .rd-board { left: 16px; top: 350px; width: 488px; height: 150px; }

/* ── Scene: the morning (mo-) ─────────────────────────────────────────── */
.mo-card { width: 430px; height: 232px; }
.mo-1 { left: 36px; top: 20px; }
.mo-2 { left: 494px; top: 20px; }
.mo-3 { left: 36px; top: 268px; }
.mo-4 { left: 494px; top: 268px; }
.mo-1 .wf-field { margin-top: 5px; padding: 5px 10px; }
.mo-btn { margin-top: 10px; }
.mo-state { position: relative; height: 22px; font-weight: 700; font-size: 14px; }
.mo-state span { position: absolute; left: 0; top: 0; }
.mo-done { color: #0a7d37; }
.mo-2 .an-btn { position: absolute; left: 14px; top: 110px; }
.mo-note { position: absolute; left: 14px; right: 14px; bottom: 6px; font-size: 12px; color: #5b6270; }
.mo-inv { font-size: 13px; }
.mo-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #e9ebef;
  font-variant-numeric: tabular-nums; }
.mo-row small { font-size: 11.5px; }
.mo-sub { color: #5b6270; }
.mo-total { font-weight: 800; border-bottom: 0; border-top: 2px solid #1f2328; }
.mo-sie { margin: 10px 0 0; font: 11.5px/1.45 ui-monospace, Menlo, Consolas, monospace; background: #f4f5f7;
  border: 1px solid #e9ebef; border-radius: 8px; padding: 8px 10px; white-space: pre; overflow: hidden; }

/* On a phone, one screen at a time: each arrives over the one before. */
.an-m .mo-card { left: 16px; top: 16px; width: 488px; height: 540px; }

/* ── Scene: one job, two screens (tw-) ────────────────────────────────── */
.tw-screen { top: 20px; width: 430px; height: 448px; }
.tw-tech { left: 36px; }
.tw-desk { left: 494px; }
.tw-plate { font-weight: 800; letter-spacing: .04em; font-size: 15px; }
.tw-plate .an-muted { font-weight: 400; letter-spacing: 0; font-size: 12.5px; }
.tw-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.tw-lines th { text-align: left; font-size: 11px; color: #5b6270; font-weight: 600; border-bottom: 1px solid #e9ebef; padding: 3px 0; }
.tw-lines td { padding: 4px 0; border-bottom: 1px solid #e9ebef; font-variant-numeric: tabular-nums; }
.tw-lines td:nth-child(n+2), .tw-lines th:nth-child(n+2) { text-align: right; }
.tw-customer { position: relative; margin-top: 12px; font-size: 13px; }
.tw-ring { position: absolute; left: -8px; right: -8px; top: -6px; bottom: -6px; border: 2px solid #c2410c;
  border-radius: 10px; }
.tw-actions { margin-top: 14px; }
.tw-absent { margin-top: 14px; border: 1px dashed #9aa3b2; border-radius: 10px; padding: 10px; font-size: 12.5px;
  color: #5b6270; text-align: center; }
.tw-tech .wf-field { padding: 6px 10px; }

.an-m .tw-screen { left: 16px; width: 488px; height: 290px; }
.an-m .tw-tech { top: 14px; }
.an-m .tw-desk { top: 314px; }

/* ── Scene: the customer's link (cl-) ─────────────────────────────────── */
.cl-tech { left: 30px; top: 20px; width: 300px; height: 326px; }
.cl-desk { left: 30px; top: 358px; width: 600px; height: 116px; }
.cl-desk .wf-body { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cl-phone { left: 652px; top: 14px; width: 280px; height: 512px; border-radius: 28px; border: 8px solid #1f2328; }
.cl-item { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.cl-actions { display: flex; gap: 6px; margin-top: 8px; }
.cl-actions .an-btn { font-size: 11.5px; padding: .45em .7em; }
.cl-photo { margin-top: 8px; width: 120px; height: 70px; border-radius: 6px; overflow: hidden; }
.cl-photo svg { width: 100%; height: 100%; display: block; }
.cl-photo-big { width: 100%; height: 120px; }
.cl-share { font-size: 12px; }
.cl-share code { display: block; font-size: 11.5px; background: #f4f5f7; border-radius: 6px; padding: 4px 8px; margin-top: 2px; }
.cl-decided { font-weight: 700; color: #0a7d37; font-size: 13px; }
.cl-plate { font-weight: 800; font-size: 20px; letter-spacing: .04em; }
.cl-small { font-size: 12px; margin: 4px 0; }
.cl-tiny { font-size: 10.5px; margin-top: 8px; }
.cl-answer { margin-top: 8px; display: flex; gap: 6px; }
.cl-answer .an-btn { font-size: 12px; }
.cl-said { margin-top: 8px; font-size: 12px; color: #0a7d37; font-weight: 700; }

.an-m .cl-tech { left: 16px; top: 16px; width: 240px; height: 360px; }
.an-m .cl-phone { left: 266px; top: 16px; width: 240px; height: 520px; }
.an-m .cl-desk { left: 16px; top: 390px; width: 240px; height: 240px; }
.cl-frame { position: absolute; left: 0; right: 0; top: 37px; }
.cl-answer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.cl-answer-row > span:first-child { flex: 1; min-width: 0; }
.cl-slot { position: relative; flex: none; width: 190px; height: 28px; }
.cl-slot > * { position: absolute; right: 0; top: 50%; translate: 0 -50%; white-space: nowrap; }
.cl-on { background: #effaf2; color: #0a7d37; border: 1px solid #c7ecd2; }
.cl-make { font-size: 12px; padding: .4em .8em; }
.cl-noticed { font-size: 12px; font-weight: 700; color: #c2410c; margin-bottom: 4px; min-height: 16px; }
.an-m .cl-answer-row { flex-direction: column; align-items: flex-start; }
.cl-desk .cl-frame-answer { display: block; }

/* ── Scene: one car, one working day (wj-) ──────────────────────────────
   One screen at a time in the middle, the role and the clock above it,
   and a dot per chapter so the length of the day is visible. */
.wj-dots { position: absolute; left: 0; right: 0; top: 18px; display: flex; justify-content: center; gap: 10px; }
.wj-dots { height: 10px; }
.wj-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #d3d7de; }
.wj-dot.wj-on { position: relative; margin-left: -20px; background: #d92d20; box-shadow: 0 0 0 3px rgba(217,45,32,.18); }
.wj-who { position: absolute; left: 0; right: 0; top: 40px; display: flex; justify-content: center; align-items: baseline; gap: 12px; }
.wj-who b { font-size: 22px; letter-spacing: -.01em; }
.wj-who span { font-size: 15px; color: #5b6270; font-variant-numeric: tabular-nums; }
.wj-screen { left: 200px; top: 96px; width: 560px; height: auto; min-height: 200px; }
.wj-phone { left: 340px; top: 86px; width: 280px; height: 360px; border-radius: 28px; border: 8px solid #1f2328; }
.wj-phone .an-head { display: none; }
.wj-card { margin-top: 12px; }
.wj-state { margin-top: 12px; font-weight: 700; color: #c2410c; }
.wj-scan { margin-top: 12px; font-size: 13px; background: #f4f5f7; border-radius: 8px; padding: 8px 10px; }
.wj-scan code { font-size: 12px; }
.wj-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.wj-told { margin-top: 6px; font-weight: 700; color: #0a7d37; font-size: 13px; position: relative; min-height: 20px; }
.wj-told > * { position: absolute; left: 0; top: 0; }
.wj-phone-line { margin-top: 14px; font-size: 13px; }
.wj-paid { margin-top: 10px; font-size: 13px; color: #0a7d37; font-weight: 700; }
.wj-screen .wf-field, .wj-phone .wf-field { margin-top: 8px; }
.wj-screen .mo-row { font-size: 13.5px; }

.an-m .wj-screen { left: 16px; top: 92px; width: 488px; height: auto; min-height: 240px; }
.an-m .wj-phone { left: 110px; top: 88px; width: 300px; height: 470px; }
.an-m .wj-dots { gap: 6px; }
.an-m .wj-dot { width: 8px; height: 8px; }
.an-m .wj-dot.wj-on { margin-left: -14px; }

/* The planner scene: a day as the planner draws it, eleven hours from 07:00,
   a block placed by its wall clock as a share of the lane. */
.pn-day { left: 40px; top: 24px; width: 880px; height: 300px; }
.pn-next { left: 40px; top: 344px; width: 880px; height: 120px; }
.pn-note { border-left: 3px solid #c2410c; padding: 4px 10px; margin: 2px 0 10px; font-size: 13px; }
.pn-hours, .pn-row { display: grid; grid-template-columns: 110px 1fr; }
.pn-hours { grid-template-columns: 110px repeat(11, 1fr); font-size: 10.5px; color: #9aa3b2; margin-bottom: 4px; }
.pn-hours span + span { border-left: 1px solid #e3e6eb; padding-left: 3px; }
.pn-name { font-size: 13px; font-weight: 700; align-self: center; }
.pn-away { display: block; font-weight: 400; color: #5b6270; font-size: 12px; }
.pn-lane { position: relative; height: 150px; background: #fff; border: 1px solid #d3d7de; border-radius: 8px; overflow: hidden; }
.pn-hatch { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #fff 0 6px, #e3e6eb 6px 8px); }
.pn-block { position: absolute; display: grid; grid-template-areas: "time" "plate" "say"; gap: 1px; width: 9.09%; min-width: 132px;
  background: #1f2328; color: #fff; border-radius: 6px; padding: 5px 7px; font-size: 11.5px; line-height: 1.25; }
.pn-a { left: 18.18%; top: 6px; }
.pn-b { left: 22.73%; top: 78px; }
.pn-time { opacity: .85; font-size: 10.5px; font-variant-numeric: tabular-nums; }
/* The two things a block can say share one place: one fades out as the
   other fades in, and neither pushes the block taller. */
.pn-say { grid-area: say; font-size: 10.5px; }
.an-m .pn-day { left: 16px; top: 16px; width: 488px; height: 360px; }
.an-m .pn-next { left: 16px; top: 392px; width: 488px; height: 120px; }
.an-m .pn-hours, .an-m .pn-row { grid-template-columns: 60px 1fr; }
.an-m .pn-hours { grid-template-columns: 60px repeat(11, 1fr); font-size: 9px; }
.an-m .pn-lane { height: 190px; }
.an-m .pn-block { min-width: 124px; }
.an-m .pn-b { top: 96px; }
/* As the planner marks it: somebody is missing. A dashed edge, not a colour. */
.pn-short { background: #fff; color: #14171c; outline: 2px dashed #c2410c; outline-offset: -2px; }

/* The "for me" scene: the header's count and a list item, as the app draws them. */
.fm-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: #c2410c;
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle; }
.fm-item { border-bottom: 1px solid #e9ebef; padding: 8px 0; font-size: 12.5px; line-height: 1.45; }
.fm-item b { letter-spacing: .04em; }
.fm-empty { color: #9aa3b2; font-size: 12.5px; padding: 8px 0; }
.fm-dealt { display: inline-block; margin-top: 6px; padding: .35em .8em; font-size: 11.5px; }
.fm-clock { margin-top: 14px; }
.fm-note { margin-top: 14px; }
/* Things that take each other's place share one: what is hidden takes no room. */
.fm-stack { display: grid; align-items: start; justify-items: start; }
.fm-stack > * { grid-area: 1 / 1; }
.fm-stack > .fm-item, .fm-stack > .fm-empty { justify-self: stretch; }
.fm-act { margin-top: 14px; } .fm-act > .fm-note { justify-self: stretch; } .fm-act > * { margin-top: 0; }

/* The rota scene. */
.ro-card { left: 40px; top: 60px; width: 880px; height: 240px; }
.ro-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ro-table th, .ro-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #e9ebef; white-space: nowrap; }
.ro-stack { display: grid; } .ro-stack > * { grid-area: 1 / 1; }
.ro-changed { box-shadow: inset 3px 0 0 #c2410c; padding-left: 6px; }
.ro-changed i, .ro-tag { font-style: normal; color: #c2410c; font-size: 11px; }
.ro-phone { left: 330px; }
.ro-day { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e9ebef; font-size: 12.5px; }
.ro-away { color: #9a3412; background: #ffedd5; border-radius: 4px; padding: 0 6px; }
.ro-half { top: 120px; width: 400px; height: 130px; }
.ro-left { left: 60px; } .ro-right { left: 500px; }
.an-m .ro-card { left: 16px; top: 40px; width: 488px; height: 300px; }
.an-m .ro-table { font-size: 10.5px; } .an-m .ro-table th, .an-m .ro-table td { padding: 6px 3px; }
.an-m .ro-phone { left: 135px; top: 16px; }
.an-m .ro-half { width: 488px; left: 16px; height: 120px; }
.an-m .ro-left { top: 60px; } .an-m .ro-right { top: 210px; }
.ro-phone .fm-stack > * { justify-self: stretch; }

/* Telling the customer. */
.ml-desk { left: 40px; top: 40px; width: 500px; height: 320px; }
.ml-phone { left: 600px; }
.ml-stack > * { justify-self: stretch; }
.ml-tick { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 6px 0 8px; }
.ml-box { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid #5b6270; border-radius: 4px; font-size: 12px; }
.ml-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-top: 1px solid #e9ebef; margin-top: 12px; padding-top: 8px; font-size: 12px; }
.ml-mail { font-size: 12.5px; line-height: 1.5; margin: 8px 0; word-break: break-word; }
.ml-big { font-size: 17px; margin-top: 10px; }
.an-m .ml-desk { left: 16px; top: 16px; width: 488px; height: 250px; }
.an-m .ml-phone { left: 135px; top: 282px; height: 330px; }
/* The quote the customer is asked about, over the finding they said yes to. */
.cl-quote { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff; padding: 14px 14px 0; }
.cl-qrow { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin: 5px 0; }
.cl-qrow > span:first-child { flex: 1; min-width: 0; }

/* A label as the product prints it: the bars, then the number as text. */
.bc-label { display: inline-block; border: 1px dashed #b8bfcc; border-radius: 6px; padding: 8px 10px; background: #fff; }
.bc-label svg { display: block; width: 240px; height: 60px; }
.bc-label .wf-h { margin: 2px 0 0; letter-spacing: .08em; }