/* PlumberPlug: one centred column, phone first; on a desktop the same layout, larger. Public pages and the admin. */
:root {
  --accent: #1f5f8b; --accent-ink: #ffffff; --accent-wash: #e3eef6;
  --bg: #f3f6f9; --card: #ffffff; --ink: #18232d; --soft: #566572; --line: #dbe3ea; --danger: #b3261e; --ok: #1f7a4d;
  --radius: 14px; --radius-lg: 22px; --shadow: 0 1px 2px rgba(24, 35, 45, 0.05), 0 10px 30px rgba(24, 35, 45, 0.07);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --field-h: 48px; --tap: 54px;
}
/* colour presets (Settings > Colour) */
[data-accent="teal"] { --accent: #11706c; --accent-wash: #dff0ef; }
[data-accent="green"] { --accent: #2f6b3f; --accent-wash: #e2efe5; }
[data-accent="orange"] { --accent: #b4520f; --accent-wash: #f8e8da; }
[data-accent="slate"] { --accent: #34495e; --accent-wash: #e5eaef; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--sans); }
@media (min-width: 900px) { body { font-size: 18px; } }
a { color: var(--accent); }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* the page: a centred column of cards, the same at every width (wider and larger on a desktop) */
.page { width: 100%; max-width: 560px; margin: 0 auto; padding: clamp(16px, 4vw, 40px) 16px 40px; display: grid; gap: 16px; }
@media (min-width: 900px) { .page { max-width: 640px; gap: 20px; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(22px, 5vw, 40px); text-align: center; }
.mark { width: 64px; height: 64px; margin: 0 auto 14px; color: var(--accent); }
@media (min-width: 900px) { .mark { width: 76px; height: 76px; } }
.card h1 { font-size: clamp(30px, 7vw, 44px); font-weight: 750; line-height: 1.1; letter-spacing: -0.5px; margin: 0 0 10px; }
.card h2 { font-size: clamp(21px, 4.6vw, 26px); font-weight: 750; line-height: 1.2; margin: 0 0 14px; }
.blurb { color: var(--soft); margin: 0 auto 22px; max-width: 34ch; text-wrap: balance; font-size: 1.05em; }
.lead { color: var(--soft); margin: 0 auto 18px; max-width: 38ch; text-wrap: balance; }

/* STANDING RULE (docs/DESIGN.md): buttons on a centred card are centred under the text; on a phone a lone button is
   full width. Big tap targets everywhere. Checked by npm run check:centre. */
.actions { display: grid; gap: 12px; justify-items: stretch; max-width: 420px; margin: 0 auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 0 24px;
  border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); font: 650 1em/1.2 var(--sans); text-decoration: none;
  cursor: pointer; transition: transform 0.25s var(--spring), box-shadow 0.25s var(--ease); -webkit-tap-highlight-color: transparent; }
.btn svg { width: 22px; height: 22px; flex: none; }
/* a long phone number or email wraps onto a second centred line instead of pushing the page sideways */
.btn { max-width: 100%; min-width: 0; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.btn > span { display: inline-flex; flex-wrap: wrap; justify-content: center; column-gap: 0.35em; min-width: 0; }
.btn .sub { font-weight: 500; opacity: 0.9; overflow-wrap: anywhere; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(24, 35, 45, 0.16); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.secondary { background: var(--card); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.btn.danger { background: var(--card); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }

/* service area and hours: centred lines with a small icon, under the buttons */
.facts { list-style: none; margin: 22px auto 0; padding: 0; display: grid; gap: 6px; color: var(--soft); justify-items: center; max-width: 36ch; }
.facts li { text-wrap: balance; }
.facts svg { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; color: var(--accent); }   /* inline: it stays with the first word when the line wraps */
.actions + .facts { margin-top: 24px; }
.blurb + .facts { margin-top: 0; }
/* the area: a short line by the pin, then the cities and the note smaller; on a phone they fold under "Areas we serve" */
.facts .area .line { color: var(--ink); font-weight: 600; }
.facts .more { display: block; font-size: 0.86em; line-height: 1.5; margin-top: 4px; }
.facts .more .cities, .facts .more .note { display: block; }
.facts .more .cities { color: var(--ink); opacity: 0.8; }
.facts .city { white-space: nowrap; }
.facts li.area { max-width: 44ch; }
.facts:has(.area) { max-width: 44ch; }
.facts details.more summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.facts details.more summary::-webkit-details-marker { display: none; }
.facts details.more summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.facts details.more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.facts details.more[open] summary { min-height: 36px; }
.facts details.more { margin-top: 0; }
/* under the name: the tagline, then what he does as one quiet line */
.hero .tagline { margin: -6px 0 8px; font-size: 17px; color: var(--ink); }
.hero .services { margin: 0 0 18px; font-size: 14.5px; color: var(--soft); line-height: 1.6; text-wrap: balance; }
@media (min-width: 900px) { .hero .tagline { font-size: 18px; } }

/* what he does and what he holds: one quiet line of ticked labels, smaller and lighter than the services line above,
   flat (no pill, no border, no shadow) so they support the name instead of competing with the Call button */
.checks { list-style: none; margin: 0 auto 20px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 14px; font-size: 13px; color: var(--soft); }
.checks li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.checks svg { width: 15px; height: 15px; flex: none; color: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 1px 2px rgb(20 35 50 / 0.18);
  animation: pop 0.34s var(--spring) both; animation-delay: calc(var(--n, 0) * 80ms); }
@keyframes pop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* the three stay on one line at 390 by giving up a little type size first */
@media (max-width: 430px) { .checks { font-size: 12px; gap: 4px 10px; flex-wrap: nowrap; } .checks svg { width: 14px; height: 14px; } }

/* what kind of work: small chips under the description */
.chips { list-style: none; margin: -8px auto 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips li { padding: 4px 12px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-size: 14px; font-weight: 650; letter-spacing: 0.2px; }
/* the line drawing along the bottom of the main card: the card keeps room for it */
.card.hero.with-art { padding-bottom: calc(clamp(22px, 5vw, 40px) + clamp(64px, 15vw, 104px)); }
.card.hero .skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(64px, 15vw, 104px); color: var(--accent); opacity: 0.32; pointer-events: none; }
/* the optional round photo in place of the drop mark */
.portrait { width: 112px; height: 112px; margin: 0 auto 16px; border-radius: 50%; padding: 4px; background: var(--card); box-shadow: 0 0 0 3px var(--accent-wash), var(--shadow); }
.portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* work photos: one at a time on a phone, swiped and snapped; three across on a desktop, with arrows */
.card.photos { padding-left: 0; padding-right: 0; }
.card.photos h2 { padding: 0 clamp(22px, 5vw, 40px); }
.card.photos .section-sub { padding: 0 clamp(22px, 5vw, 40px); margin: -8px 0 16px; font-size: 14px; color: var(--soft); line-height: 1.5; }
.strip-wrap { position: relative; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 11% 6px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.strip figure { margin: 0; position: relative; scroll-snap-align: center; border-radius: var(--radius); overflow: hidden; background: var(--accent-wash); aspect-ratio: 4 / 3; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: #fff; font-weight: 650; font-size: 15px; text-align: left;
  background: linear-gradient(to top, rgba(10, 20, 28, 0.78), rgba(10, 20, 28, 0)); }
.arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, transparent); color: var(--accent); display: none; place-items: center; cursor: pointer; box-shadow: var(--shadow); }
.arrow svg { width: 22px; height: 22px; }
.arrow.back { left: 6px; } .arrow.next { right: 6px; }
.arrow:disabled { opacity: 0.35; cursor: default; }
.dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; margin-top: 10px; }
.dots a { display: grid; place-items: center; width: 24px; height: 24px; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background 0.2s, transform 0.2s; }
.dots a[aria-current="true"] span { background: var(--accent); transform: scale(1.3); }
@media (min-width: 700px) {
  .strip { grid-auto-columns: calc((100% - 24px) / 3); padding: 0 clamp(22px, 5vw, 40px) 6px; }
  .arrow { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .strip { scroll-behavior: auto; } }

/* the callback form: centred heading and button, fields full width with their labels */
.form { display: grid; gap: 14px; text-align: left; max-width: 420px; margin: 0 auto; }
.form label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: var(--soft); }
.form label .opt { font-weight: 500; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 14px; align-items: end; }
input, select, textarea { font: 17px/1.3 var(--sans); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; width: 100%; min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]), select { height: var(--field-h); }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form .hint { margin: -6px 0 0; color: var(--soft); font-size: 14px; text-align: center; }
.form .btn { width: 100%; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { display: flex; justify-content: center; min-height: 0; }
.notice { border-radius: var(--radius); padding: 12px 14px; margin: 0 auto 16px; max-width: 420px; text-align: center; font-weight: 600; }
.notice.ok { background: #e3f3ea; color: var(--ok); }
.notice.err { background: #fbe9e7; color: var(--danger); }

.foot { text-align: center; color: var(--soft); font-size: 14px; margin: 4px 0 0; }

/* pay page */
.who { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font-weight: 600; margin: 0 auto 14px; }
.who svg { width: 26px; height: 26px; color: var(--accent); }
.amount { font-size: clamp(40px, 10vw, 56px); font-weight: 750; letter-spacing: -1px; line-height: 1.05; margin: 0 0 6px; }
.for { margin: 0 auto 4px; max-width: 34ch; text-wrap: balance; font-weight: 600; }
.ref { color: var(--soft); font-size: 15px; margin: 0 0 20px; }
.lines { display: grid; gap: 6px; margin: 0 auto 20px; max-width: 420px; padding: 14px 16px; background: var(--bg); border-radius: var(--radius); text-align: left; }
.lines div { display: flex; justify-content: space-between; gap: 12px; }
.lines dt { color: var(--soft); }
.lines dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines .total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; font-weight: 700; }
.lines .total dt { color: var(--ink); }
.fine { color: var(--soft); font-size: 14px; margin: 14px auto 0; max-width: 40ch; text-wrap: balance; }
.badge { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); }
.badge svg { width: 36px; height: 36px; }
.badge.off { background: var(--line); color: var(--soft); }

/* status pages: the mark, a title and a line, centred in the card */
.status h1 { margin-bottom: 8px; }
.status p { color: var(--soft); margin: 0 auto 20px; max-width: 34ch; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ---------------- admin ---------------- */
.admin-top { background: var(--card); border-bottom: 1px solid var(--line); }
.admin-top .in { max-width: 920px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.admin-top .name { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; color: var(--ink); text-decoration: none; }
.admin-top .name svg { width: 26px; height: 26px; color: var(--accent); }
.admin-top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-top nav a { padding: 8px 12px; border-radius: 999px; color: var(--soft); text-decoration: none; font-weight: 650; font-size: 15px; white-space: nowrap; }
.admin-top nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; margin-left: 4px; }
.admin { max-width: 920px; margin: 0 auto; padding: 18px 16px 64px; }
.admin h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 750; margin: 8px 0 4px; }
.admin h2 { font-size: 20px; margin: 0 0 12px; }
.admin .lead { margin: 0 0 18px; text-align: left; max-width: none; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(16px, 3vw, 24px); box-shadow: var(--shadow); margin-bottom: 18px; }
/* STANDING RULE (docs/DESIGN.md): fields side by side line up: every row aligns its cells to the bottom, every
   single-line box is one height, and a switch row is that same height. Checked by npm run check:align. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; align-items: end; }
.grid + .grid, .grid + label, label + .grid, .hint + .grid, .hint + label, .panel label + label { margin-top: 14px; }
.panel label, .sheet label.field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--soft); align-content: start; min-width: 0; }
.sheet label.field { margin-top: 10px; }
.panel input, .panel select, .panel textarea { font-size: 16px; }
label.check { display: flex !important; align-items: center; gap: 10px; color: var(--ink) !important; font-weight: 500 !important; font-size: 16px !important; min-height: var(--field-h); }
label.check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.hint { margin: 6px 0 0; color: var(--soft); font-size: 14px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.field-error { color: var(--danger); font-size: 14px; font-weight: 600; }
.field-error:empty { display: none; }
.error { color: var(--danger); font-weight: 600; margin: 10px 0 0; }
.error:empty { display: none; }
.saved { color: var(--ok); font-weight: 650; margin: 0; align-self: center; }
.setup-warn { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #fbeee0; color: #6b3a12; border: 1px solid #ecc9a4; line-height: 1.5; }
.setup-warn code { font-size: 13px; background: #fff7ee; padding: 1px 5px; border-radius: 6px; word-break: break-word; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.filters button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font: 600 15px var(--sans); color: var(--soft); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.list { display: grid; gap: 10px; }
.item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 6px; }
.item .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item .amt { font-weight: 750; font-size: 18px; margin-left: auto; font-variant-numeric: tabular-nums; }
.item .what { font-weight: 650; }
.item .sub { color: var(--soft); font-size: 14px; }
.item .row-actions { margin-top: 6px; }
.pill { font-weight: 700; letter-spacing: 0.5px; font-size: 14px; padding: 2px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--line); color: var(--soft); }
.tag.pending { background: #fff3d6; color: #7a5300; }
.tag.paid { background: #e3f3ea; color: var(--ok); }
.tag.refunded, .tag.partly_refunded { background: #ece7f8; color: #4b3a8a; }
.tag.expired, .tag.cancelled { background: var(--line); color: var(--soft); }
.tag.new { background: #fbe9e7; color: var(--danger); }
.tag.called { background: #fff3d6; color: #7a5300; }
.tag.done { background: #e3f3ea; color: var(--ok); }
.empty { color: var(--soft); text-align: center; padding: 24px 0; }
/* the new link, ready to copy */
.made { border: 2px solid var(--accent); }
.linkbox { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.linkbox input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.preview { display: grid; gap: 4px; margin: 14px 0 0; padding: 12px 14px; background: var(--bg); border-radius: var(--radius); }
.preview div { display: flex; justify-content: space-between; gap: 10px; }
.preview .total { font-weight: 700; border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }
/* a sheet for confirmations (refund, cancel) */
dialog.sheet { border: 0; border-radius: var(--radius-lg); padding: clamp(18px, 4vw, 28px); width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
dialog.sheet::backdrop { background: rgba(24, 35, 45, 0.45); }
dialog.sheet h2 { margin-top: 0; }
.warn { background: #fbeee0; color: #6b3a12; border-radius: 12px; padding: 10px 12px; font-weight: 600; margin: 12px 0 0; }
.choice { display: grid; gap: 8px; margin: 12px 0 0; }
.choice label { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 16px; font-weight: 500; min-height: 44px; }
.choice input[type="radio"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
@media (max-width: 520px) { .admin-top .in { justify-content: center; } }

/* rating: five big stars; picking one fills it and every star before it (row reversed so ~ selects the lower ones) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stars { border: 0; margin: 0; padding: 0; min-width: 0; }
.star-row { display: flex; flex-direction: row-reverse; justify-content: center; gap: 6px; }
.star-row input { position: absolute; opacity: 0; pointer-events: none; }
.star-row label { width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer; border-radius: 14px; transition: transform 0.25s var(--spring); }
.star-row label::before { content: "★"; font-size: 40px; line-height: 1; color: var(--line); transition: color 0.15s; }
.star-row input:checked ~ label::before, .star-row label:hover::before, .star-row label:hover ~ label::before { color: #f2b01e; }
.star-row input:checked + label { transform: scale(1.12); }
.star-row input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.stars-shown { font-size: 30px; letter-spacing: 4px; color: #f2b01e; margin: 0 0 8px; }
.stars-shown span { color: var(--line); }
.stars-line { color: #f2b01e; font-size: 20px; letter-spacing: 2px; }
/* Messages to customers: one block per email */
.email-block { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.email-block h3 { font-size: 17px; margin: 0; }
.email-block .when { color: var(--soft); font-size: 14px; margin: 2px 0 8px; }
.mail-preview { margin-top: 12px; border: 1px dashed var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-preview b { display: block; margin-bottom: 6px; white-space: normal; }
.email-block.off .mail-preview { opacity: 0.55; }

/* ---------------- motion: water and pipes (none for reduced motion) ---------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn .splash { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 30%, rgba(255, 255, 255, 0.18) 31% 60%, transparent 61%);
  transform: scale(0); animation: splash 0.65s var(--ease) forwards; }
.btn.secondary .splash, .btn.danger .splash { background: radial-gradient(circle, color-mix(in srgb, currentColor 22%, transparent) 0 30%, color-mix(in srgb, currentColor 10%, transparent) 31% 60%, transparent 61%); }
@keyframes splash { to { transform: scale(1); opacity: 0; } }

/* the mark: the tap holds still while a drop swells at the spout tip, hangs, then lets go and rings out below.
   Calm: six seconds a cycle. The still frame, which is what reduced motion and every printed piece show, is the drop
   hanging at full size, so the animation never makes it bigger than the logo itself. */
.mark.drip { position: relative; margin-bottom: 30px; }
.mark.drip svg { overflow: visible; }
.mark.drip .drop { transform-box: fill-box; transform-origin: 50% 0; animation: drip 6s var(--ease) infinite; }
.mark .ring { position: absolute; left: 73%; top: calc(100% + 10px); width: 26px; height: 7px; margin-left: -13px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; transform: scale(0.2); animation: ring 6s var(--ease) infinite; }
@keyframes drip {
  0%, 42%  { transform: translateY(0) scale(1); }          /* the logo as drawn: the first frame on load */
  50%      { transform: translateY(0) scale(0.93, 1.1); }
  58%      { transform: translateY(0) scale(1); }
  74%      { transform: translateY(26px) scale(0.88, 1.16); opacity: 1; }
  82%      { transform: translateY(40px) scale(0.8, 1.2); opacity: 0; }
  83%      { transform: translateY(0) scale(0.2); opacity: 1; }   /* a new bead at the tip */
  100%     { transform: translateY(0) scale(1); }                 /* grown back to the drawn drop */
}
@keyframes ring { 0%, 80% { opacity: 0; transform: scale(0.2); } 82% { opacity: 0.75; transform: scale(0.3); } 95%, 100% { opacity: 0; transform: scale(1.6); } }

/* a thin pipe along the top of the main card, water flowing through it */
.card.hero { position: relative; overflow: hidden; }
.card.hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--accent-wash) 0 20%, var(--accent) 35%, var(--accent-wash) 50% 70%, var(--accent) 85%, var(--accent-wash) 100%) 0 0 / 200% 100%;
  animation: flow 7s linear infinite; }
@keyframes flow { to { background-position: -200% 0; } }

/* done: the wrench gives a turn, then the check settles in */
.badge.done { position: relative; }
.badge.done > span { position: absolute; inset: 0; display: grid; place-items: center; }
.badge.done .wrench { animation: turn 0.9s var(--ease) both; }
.badge.done .tick { opacity: 0; transform: scale(0.4); animation: settle 0.45s var(--spring) 0.8s forwards; }
@keyframes turn { 0% { transform: rotate(-90deg) scale(0.6); opacity: 0; } 25% { opacity: 1; } 75% { transform: rotate(270deg) scale(1); opacity: 1; } 100% { transform: rotate(270deg) scale(0.6); opacity: 0; } }
@keyframes settle { to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .mark.drip .drop, .mark .ring, .card.hero::before, .btn .splash, .checks svg { animation: none !important; }
  .mark .ring { display: none; }
  .badge.done .wrench { display: none; }
  .badge.done .tick { animation: none; opacity: 1; transform: none; }
}
/* admin: banners, the add tabs, notes, the storage meter */
.banner { border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.banner.soft { background: #fff3d6; color: #6b4a00; border: 1px solid #f0d58f; }
.banner.red { background: #fbe9e7; color: #8c1d16; border: 1px solid #efb4ad; }
.mode-tabs { margin-bottom: 12px; }
.item .notes { background: var(--bg); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.item .notes-edit { display: grid; gap: 8px; }
.item .notes-edit textarea { min-height: 70px; }
.tag.method { background: #e6f0e9; color: #2a5a3b; }
.stripe-link { font-size: 14px; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.meter-box { display: grid; gap: 8px; margin: 0 0 16px; }
.meter { height: 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--ok); border-radius: 999px; min-width: 3px; }
.meter.soft span { background: #d99a17; }
.meter.red span { background: var(--danger); }
.meter-box .sub { color: var(--soft); font-size: 14px; }
.pair-inline { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; }
.test-toggle { margin: -4px 0 12px; font-size: 15px !important; min-height: 36px !important; color: var(--soft) !important; }
/* the line under the Pay button: one line where it fits */
.fine.one-line { max-width: none; text-wrap: balance; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 10px; }
.list-head h2 { margin: 0; }
.downloads { margin: 0; color: var(--soft); font-size: 15px; display: flex; gap: 8px; align-items: center; }
.panel.search { padding: 14px 16px; }
.panel.search .row-actions { margin-top: 12px; }
details.fills summary { cursor: pointer; }
details.fills ul { margin: 6px 0 0; padding-left: 18px; }
details.fills code, .hint code { font-size: 13px; }
#site details ol { margin: 6px 0; padding-left: 20px; }
.travel-add { margin: 10px 0 0; }
.linklike { background: none; border: 0; padding: 4px 0; color: var(--accent); font: 600 15px var(--sans); cursor: pointer; min-height: 32px; }
.linklike:hover { text-decoration: underline; }

/* admin: orders (state chips, the order page, its sticky action bar and history) and customers */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.page-head h1 { margin: 8px 0 4px; }
.tag.st-unpaid { background: #fff3d6; color: #7a5300; }
.tag.st-link_sent { background: var(--accent-wash); color: var(--accent); }
.tag.st-link_expired { background: #fbeee0; color: #8a4a12; }
.tag.st-paid { background: #e3f3ea; color: var(--ok); }
.tag.st-refunded, .tag.st-partly_refunded { background: #ece7f8; color: #4b3a8a; }
.tag.st-cancelled { background: var(--line); color: var(--soft); }
.tag.sent { background: var(--bg); color: var(--soft); border: 1px solid var(--line); font-weight: 650; }
.tag.flag { background: #fbe9e7; color: var(--danger); }
.tag.from { background: #eef3e6; color: #4a6620; font-weight: 650; }
.tag.big { font-size: 14px; padding: 4px 12px; }
a.item.order-link { color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
a.item.order-link:hover, a.item.order-link:focus-visible { border-color: var(--accent); box-shadow: var(--shadow); }
.back { margin: 0 0 4px; }
.back a { color: var(--accent); font-weight: 650; text-decoration: none; }
.order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.order-head h1 { margin: 4px 6px 2px 0; letter-spacing: 0.5px; }
.admin > .sub, .order > .sub { color: var(--soft); margin: 4px 0 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--accent); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { border-color: var(--accent); }
.contact-lines { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.contact-lines .who { width: 100%; font-weight: 700; font-size: 18px; color: var(--ink); }
.suggest + label, .grid.travel, .travel-add + .grid { margin-top: 14px; }
.contact-lines .sub { width: 100%; margin: 0; color: var(--soft); font-size: 14px; }
.contact-form { display: grid; gap: 12px; }
.contact-form label { margin: 0 !important; }
.panel .notes { background: var(--bg); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; }
.panel .sub a { color: var(--accent); }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.history li { padding: 10px 0 10px 18px; border-left: 2px solid var(--line); position: relative; }
.history li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); }
.history li.flagged::before { border-color: var(--danger); }
.history .h-top { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; justify-content: space-between; }
.history .sub { color: var(--soft); font-size: 14px; overflow-wrap: anywhere; }
body.has-bar main.admin { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(24, 35, 45, 0.08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
/* on a phone the actions sit two by two, under the thumb; on a desktop they fit one row */
.action-bar .in { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action-bar .btn { min-width: 0; padding: 0 10px; }
.action-bar .btn.more { grid-column: 1 / -1; }
.action-bar .bar-hint { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 13px; }
.action-bar .bar-hint button { font-size: 13px; min-height: 0; }
@media (min-width: 560px) { .action-bar .in { display: flex; gap: 10px; } .action-bar .btn { flex: 1 1 0; } .action-bar .btn.more { flex: 0 0 auto; padding: 0 18px; } }
.sheet-list { display: grid; gap: 10px; }
.sheet-list .btn { width: 100%; }
.sheet .to { margin: 0 0 6px; overflow-wrap: anywhere; }
.sheet .field span span { font-weight: 700; color: var(--ink); }
.sheet textarea, .sheet input, .sheet select { font-size: 16px; }
fieldset.taxes { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 18px; align-items: start; }
fieldset.taxes legend { font-size: 14px; font-weight: 600; color: var(--soft); padding: 0; margin-bottom: 2px; }
fieldset.taxes label.check { margin: 0 !important; }
.chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; background: var(--accent-wash); color: var(--ink); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; }
.suggest { list-style: none; margin: 6px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); display: grid; gap: 2px; }
.suggest button { width: 100%; text-align: left; display: grid; gap: 2px; padding: 10px 12px; min-height: 48px; border: 0; border-radius: 10px; background: none; font: 16px var(--sans); color: var(--ink); cursor: pointer; }
.suggest button:hover, .suggest button:focus-visible { background: var(--accent-wash); }
.suggest .sub { color: var(--soft); font-size: 14px; }
.suggest button.new { color: var(--accent); font-weight: 650; }
.quick { margin: 0 0 16px; }
.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.details dt { color: var(--soft); font-weight: 600; }
.details dd { margin: 0; overflow-wrap: anywhere; }
.addresses { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.addresses li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; overflow-wrap: anywhere; }
.addresses a { color: var(--ink); }
.addresses .remove { margin-left: auto; color: var(--danger); }
.addr-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.customer textarea#notes { width: 100%; }
.alike { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; width: 100%; }
.customer section > h2, .customer .list-head { margin-top: 8px; }
.customer section { margin-bottom: 18px; }
.tag.repeat { background: #e6f0e9; color: #2a5a3b; }
.item .sub b { color: var(--ink); font-weight: 650; }
.customer #meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.stat-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 28px; }
.stat-cols h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--soft); margin: 0 0 8px; }
.stats .hint { margin-top: 14px; }
/* Settings: chip editors and the photo tiles */
.chip-edit { margin-top: 14px; display: grid; gap: 8px; }
.chip-label { font-size: 14px; font-weight: 600; color: var(--soft); }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 12px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-weight: 650; font-size: 15px; }
.chip-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.chip-x:hover { background: rgba(0, 0, 0, 0.06); }
.chip-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
/* Print and share: the design chooser and the previews of what will come out of the printer */
.design-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.design { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.design b { display: block; margin-bottom: 2px; }
.design span { font-size: 13px; color: var(--soft); }
.design.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.print-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.print-preview.wide { grid-template-columns: 1fr 1fr; }
.pp-side { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; line-height: 0; min-height: 60px; }
.pp-side svg { width: 100%; height: auto; display: block; }
.pp-side.small { max-width: 180px; }
@media (max-width: 560px) { .print-preview { grid-template-columns: 1fr; } }
/* An (i) beside a label, and the small note it opens. A button, so it works on a phone as well as under a mouse. */
.with-info { display: inline-flex; align-items: center; gap: 6px; }
button.info { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1px solid var(--accent); background: none;
  color: var(--accent); font: 600 11px/1 system-ui, sans-serif; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
button.info::after { content: ""; position: absolute; width: 44px; height: 44px; margin: -13px;   /* a finger-sized target */ }
label:has(> .with-info) { position: relative; }
.info-pop { position: absolute; z-index: 30; left: 0; top: calc(100% + 6px); max-width: 320px; background: var(--card, #fff);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgb(20 35 50 / 0.16); padding: 10px 12px;
  font-size: 13px; line-height: 1.45; color: var(--soft); font-weight: 400; }
/* The domain line in Settings: quiet until the date is close, then amber, then red */
.domain-line { margin: -4px 0 14px; font-size: 14px; color: var(--soft); }
.domain-line.amber { color: #8a5a06; font-weight: 600; }
.domain-line.red { color: var(--danger, #a3301f); font-weight: 600; }
.domain-line:empty { display: none; }

.cred-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.cred-list li { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; }
.cred-list input[type="text"], .cred-list li > input { width: 100%; }
.cred-list .row-actions { margin: 0; gap: 8px; }
@media (max-width: 620px) { .cred-list li { grid-template-columns: 1fr; } }


.photo-grid .pairing { display: grid; gap: 6px; margin-top: 6px; }
.photo-grid .pairing select { width: 100%; font-size: 14px; }
.photo-grid figure.paired { outline: 2px solid var(--accent-wash); outline-offset: 2px; }

/* A before and after: two pictures inside one slide, each labelled on the picture, so the comparison still reads at
   390 px. The slide keeps the same shape as a single photo, so the strip does not jump. */
.strip figure.ba { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2px; }
.strip figure.ba .half { position: relative; min-width: 0; line-height: 0; }
.strip figure.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 2px; }
.strip figure.trio .third { position: relative; min-width: 0; line-height: 0; }
/* a picture too small to fill the slide sits inside it on a soft ground, rather than being blown up or cropped */
.strip figure.fit { background: var(--accent-wash); }
.strip figure.fit img { width: 100%; height: 100%; object-fit: contain; }
.strip figure.ba .ba-tag { position: absolute; left: 7px; top: 7px; background: rgb(10 20 28 / 0.72); color: #fff;
  font-size: 10.5px; font-weight: 650; line-height: 1.6; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; }
.sub-head { font-size: 17px; margin: 22px 0 4px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.photo-grid:empty { display: none; }
.photo-grid figure { margin: 0; display: grid; gap: 4px; position: relative; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--accent-wash); }
.photo-grid.round img { width: 112px; aspect-ratio: 1; border-radius: 50%; }
.photo-grid input { font-size: 14px !important; height: 36px !important; padding: 4px 8px; }
.photo-grid figcaption { position: absolute; left: 6px; top: 6px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); font-size: 12px; font-weight: 700; color: var(--soft); }
.file-btn { cursor: pointer; }
details.sources { margin-top: 10px; }
details.sources ul { margin: 6px 0 0; padding-left: 18px; }

/* the admin's own navigation: a top row on a desktop, a tab bar within thumb reach on a phone */
.admin-top nav a > span { display: inline; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--card) 95%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; min-height: 58px; color: var(--soft); text-decoration: none; font-size: 12px; font-weight: 650; }
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--accent); }
.tabbar .count { position: absolute; top: 4px; left: 50%; margin-left: 4px; }
@media (min-width: 700px) { .tabbar { display: none; } }
@media (max-width: 699px) {
  .admin-top nav { display: none; }
  .admin-top .in { justify-content: center; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.has-bar .action-bar { bottom: calc(58px + env(safe-area-inset-bottom)); }
}
/* a file-picking label is a button, not a stacked field */
.panel label.file-btn { display: inline-flex !important; align-items: center; gap: 10px; font-size: 15px !important; font-weight: 700 !important; color: var(--accent) !important; }

/* a list that is a table on a desktop and a stack of row-cards on a phone (the same cells, same order) */
.table-wrap { overflow-x: auto; }
table.rows { width: 100%; border-collapse: collapse; font-size: 15px; }
table.rows th { text-align: left; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--soft); padding: 0 12px 8px; white-space: nowrap; }
table.rows th.num, table.rows td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.rows td { padding: 12px; border-top: 1px solid var(--line); background: var(--card); }
table.rows tr.row-open { cursor: pointer; }
table.rows tr.row-open:hover td, table.rows tr.row-open:focus-visible td { background: var(--accent-wash); }
table.rows tr.row-open td:first-child { border-radius: 10px 0 0 10px; }
table.rows tr.row-open td:last-child { border-radius: 0 10px 10px 0; }
table.rows .name-cell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
table.rows a { color: var(--accent); }
@media (max-width: 699px) {
  table.rows, table.rows tbody, table.rows tr, table.rows td { display: block; width: 100%; }
  table.rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.rows tr.row-open { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 6px 4px; }
  table.rows td { border: 0; padding: 6px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; }
  table.rows td::before { content: attr(data-label); color: var(--soft); font-size: 13px; font-weight: 650; text-align: left; }
  table.rows td[data-label="Name"] { padding-top: 8px; }
  table.rows td[data-label="Name"]::before { display: none; }
  table.rows td[data-label="Name"] { justify-content: flex-start; font-size: 17px; }
  table.rows tr.row-open:hover td { background: transparent; }
  table.rows tr.empty-row { border: 0; }
}
.lines .paid-so-far dd { color: var(--ok); }
/* the payments on a work order */
.pay-rows { display: grid; gap: 10px; }
.pay-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 4px; }
.pay-row .pay-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-row .pay-top b { font-size: 18px; }
.pay-row .pay-top .sub { margin-left: auto; color: var(--soft); font-size: 14px; }
.pay-row .row-actions { margin-top: 2px; }
.pay-row .row-actions:empty { display: none; }
.tax-hint { margin: -2px 0 12px; }
.email-block .sig-warn { margin: 10px 0 0; font-weight: 500; }
.email-block .sig-warn .linklike { font-weight: 700; }
/* paying on the spot: the QR fills the screen, as high-contrast as the display allows */
.action-bar .in { flex-wrap: wrap; }
.action-bar .bar-note { width: 100%; margin: 0 0 6px; text-align: center; color: var(--soft); font-size: 14px; font-weight: 650; }
/* his own notes on a work order */
.note-add { display: grid; gap: 8px; }
.note-add textarea { min-height: 62px; }
.note-add .row-actions { margin-top: 0; align-items: center; }
.tag.notes-mark { background: #fdf3df; color: #7a5300; }
/* the pay page: what was done, and any updates he has chosen to show */
.card .done { margin: 2px auto 6px; color: var(--ink); max-width: 38ch; white-space: pre-line; }
.updates { text-align: left; max-width: 420px; margin: 0 auto 20px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius); }
.updates h2 { font-size: 15px; letter-spacing: .4px; text-transform: uppercase; color: var(--soft); margin: 0 0 8px; }
.updates div { margin: 0 0 8px; }
.updates div:last-child { margin-bottom: 0; }
.updates .when { display: block; color: var(--soft); font-size: 13px; }
/* the two kinds of words on a work order */
.note-add .check { min-height: 40px; }
/* what the form says when something needs a second look */
.field-note { display: block; margin-top: 4px; color: var(--danger); font-size: 14px; font-weight: 600; text-align: left; }
.form input[aria-invalid="true"] { border-color: var(--danger); }
.qr-screen { position: fixed; inset: 0; z-index: 20; background: #fff; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 20px; }
.qr-screen .qr-close { position: absolute; top: 12px; right: 12px; }
.qr-box { width: min(78vw, 78vh, 460px); }
.qr-box svg { width: 100%; height: auto; display: block; }
.qr-amount { font-size: clamp(34px, 9vw, 54px); font-weight: 750; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.qr-ref { margin: 0; color: var(--soft); font-size: 18px; letter-spacing: .5px; }
.qr-tell { margin: 4px 0 0; color: var(--soft); }
.qr-done { position: absolute; inset: 0; background: #fff; display: grid; align-content: center; justify-items: center; gap: 14px; }
.qr-done .tick { width: 120px; height: 120px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 70px; line-height: 120px; text-align: center; }
.qr-done p { font-size: clamp(20px, 5.6vw, 30px); font-weight: 750; margin: 0; text-align: center; padding: 0 16px; text-wrap: balance; }
.action-bar .in { flex-wrap: wrap; }
.action-bar .bar-note { width: 100%; margin: 0 0 6px; text-align: center; color: var(--soft); font-size: 14px; font-weight: 650; }
/* his own notes on a work order */
.note-add { display: grid; gap: 8px; }
.note-add textarea { min-height: 62px; }
.note-add .row-actions { margin-top: 0; align-items: center; }
.notes-log { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.notes-log li { background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.notes-log .note-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 4px; }
.notes-log .note-top .sub { margin-right: auto; font-size: 13px; }
.notes-log .note-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-log textarea { width: 100%; margin-top: 6px; }
.tag.notes-mark { background: #fdf3df; color: #7a5300; }
/* the pay page: what was done, and any updates he has chosen to show */
.card .done { margin: 2px auto 6px; color: var(--ink); max-width: 38ch; white-space: pre-line; }
.updates { text-align: left; max-width: 420px; margin: 0 auto 20px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius); }
.updates h2 { font-size: 15px; letter-spacing: .4px; text-transform: uppercase; color: var(--soft); margin: 0 0 8px; }
.updates div { margin: 0 0 8px; }
.updates div:last-child { margin-bottom: 0; }
.updates .when { display: block; color: var(--soft); font-size: 13px; }
/* the two kinds of words on a work order */
.label-tag { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; letter-spacing: .2px; }
.label-tag.shown { background: var(--accent-wash); color: var(--accent); }
.label-tag.private { background: #fdf3df; color: #7a5300; }
.notes-log li.shown { background: var(--accent-wash); }
.notes-log .note-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.notes-log .note-foot .check { min-height: 36px; font-size: 15px !important; }
.notes-log .note-foot .sub { font-size: 13px; }
.note-add .check { min-height: 40px; }
.photo-grid .photo-actions { margin-top: 2px; gap: 10px; font-size: 14px; }
.photo-grid .photo-actions .linklike { font-size: 14px; }
.photo-grid .photo-actions .linklike[disabled] { opacity: 0.4; cursor: default; text-decoration: none; }
.photo-grid figure .sub { margin: 0; font-size: 12px; color: var(--soft); }
/* the sign-off, previewed as the customer will see it */
.sig-block { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--soft); }
.sig-logo { border-radius: 6px; flex: none; }
.sig-rate { margin-top: 8px; color: #7b8794; }
.mail-preview .sig-block { white-space: normal; }