/* PassportPhotos widget skin. Loaded after embed.css and flow.css from embed.html.
   Tokens come from O-output/passportphotos/brand/tokens.json (2026-09-14). A sister brand swaps the values in :root and nothing else.
   Rules baked in: plum is the pay button only and never sits on teal; every text pairing below clears WCAG AA; nothing under 15px; tap targets 44px. */
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600;700;800&family=Source+Sans+3:wght@400;600&display=swap");

:root {
  --accent: #0B5C6E;          /* Booth Teal: mark, links, continue buttons, selected states */
  --accent-dark: #073F4C;     /* Teal Dark: hover and pressed */
  --accent-soft: #E2EEF1;     /* selected-card tint (teal at 12% on white) */
  --cta: #8E1F6B;             /* Stamp Plum: the pay button and nothing else */
  --cta-hover: #741858;
  --cta-press: #741858;
  --cta-edge: rgba(116, 24, 88, 0.35);
  --ground: #F3F8F8;          /* Canvas */
  --ink: #13262C;
  --muted: #4C5E64;           /* Slate */
  --rule: #D5DEE0;
  --rule-soft: #E9EFF0;
  --radio: #C9D3D6;
  --disabled: #C9D3D6;
  --good: #1B7F3B;            /* Pass Green */
  --warn: #C98409;            /* Warn Amber, ink text, dark border on Canvas */
  --warn-edge: #7A4E00;
  --warn-soft: #FBF1DC;
  --bad: #C4271B;             /* Fail Red */
  --bad-soft: #FBE9E7;
  --white: #FFFFFF;
  --font-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-head: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  /* aliases used by flow.css */
  --pb: var(--accent); --pb-dark: var(--accent-dark);
  --pass: var(--good); --pass-soft: #E4F2E8;
  --amber: var(--warn); --amber-soft: var(--warn-soft);
  --fail: var(--bad); --fail-soft: var(--bad-soft);
  --ink2: var(--ink); --canvas: var(--ground); --slate: var(--muted);
  --r-btn: 12px;
  --r-card: 14px;
}

/* ---------- Type and shared components on the brand tokens ---------- */
body { font-size: 18px; }
:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.choice:has(input:focus-visible), .store:has(input:focus-visible) { outline-color: var(--cta); }
.btn, .btn2 { border-radius: var(--r-btn); font-family: var(--font-head); font-weight: 600; }
.btn { font-size: 18px; }
.btn.tall { font-size: 18px; }
.btn2 { font-size: 17px; }
/* Plum carries white text (8.2 to 1). The AI Photographer skin used ink on orange; this one does not. */
.btn#pay, .btn.cta { color: var(--white); border: 0; }
.btn#pay:hover, .btn.cta:hover, .btn#pay:active, .btn.cta:active { background: var(--cta-hover); color: var(--white); }
.btn#pay:disabled, .btn.cta:disabled { background: var(--disabled); color: var(--muted); }
.card, .panel, .note, .spec-card, .check-row, .deliv-row, .offer, .fix-card, .warn-card, .lastfix, .check-list, .doc-picker .doc, .qr-card, .upload-card { border-radius: var(--r-card); }
.top .h { font-family: var(--font-head); font-size: 17px; }
h1.h { font-size: 30px; }
.flow-title { font-size: 28px; }
.small, .tiny, .status, .checks-line, .wm-line, .spec-src, .spec-rows dt, .doc-picker .doc .sub, .newline, .trust, .choice .desc, .picker .pick .muted, .compare .seg, .gchip, .cpill, .tag, .check-list .item, .check-list .fix, .store .meta, .store .ready, .finding, .prints .choice, .prints .choice .sub, .field label, .subpanel .head, .qr-card .waiting, .desk-steps .panel p, .upload-alt, .spec-rows { font-size: 15px; }
.spec-rows { font-size: 16px; }
.subpanel .head { font-size: 16px; }
.upload-alt { font-size: 16px; }
.desk-steps .panel p { font-size: 16px; }
.tick, .note, .check-row, .panel > div, .doc-picker .doc .lbl { font-size: 16px; }
.processing .counter { display: none; }
.upload-card > svg, .note svg, .subpanel .head svg { color: var(--accent); }
.lastfix svg, .fix-card .item svg { color: var(--bad); }
.warn-card .item svg { color: var(--warn-edge); }
.tick svg { color: var(--good); }
.pill-ok { color: var(--good); }
.top .iconbtn { color: var(--accent); }
.thumb .sweep { background: linear-gradient(180deg, rgba(11, 92, 110, 0.32), rgba(11, 92, 110, 0)); }
.result-frame .wm span, .preview-box .wm span { color: rgba(19, 38, 44, 0.22); }
.doc-picker .doc[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent-soft); }

/* ---------- Processing overlay: mark, brand line, the photo, four named stages ---------- */
.processing { padding: 26px 24px 40px; gap: 18px; }
.brand-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); }
.brand-line .mark { display: inline-flex; width: 30px; height: 30px; color: var(--accent); }
.brand-line .mark svg, .brand-line .mark img { width: 30px; height: 30px; display: block; }
.brand-line .bsep { width: 1px; height: 20px; background: var(--rule); }
.brand-line .bcount { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--muted); }
.processing .thumb { width: 200px; height: 200px; border-radius: 12px; }
.processing .h { font-size: 24px; }
.stages { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 360px; display: flex; flex-direction: column; }
.stage { display: flex; gap: 14px; align-items: center; padding: 11px 0; font-size: 18px; color: var(--muted); }
.stage .ring { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--radio); flex: 0 0 28px; display: flex; align-items: center; justify-content: center; color: var(--white); }
.stage.active { color: var(--ink); font-weight: 600; }
.stage.active .ring { border: 3px solid var(--accent); border-top-color: transparent; animation: spin 0.9s linear infinite; }
.stage.done .ring { background: var(--good); border-color: var(--good); }
.stage.done .ring svg { width: 16px; height: 16px; }

/* ---------- Initial check passed ---------- */
.result-head { gap: 6px; }
.result-head .h { font-size: 26px; display: flex; gap: 10px; align-items: center; color: var(--ink); }
.result-head .h.fail { color: var(--bad); }
.result-head .h .ok-badge { width: 30px; height: 30px; border-radius: 50%; background: var(--good); color: var(--white); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.result-head .h .ok-badge svg { width: 18px; height: 18px; }
.result-head .sub { font-size: 17px; line-height: 1.4; color: var(--muted); }
.result-frame { border-radius: 8px; }
.dims .w line { stroke: var(--accent); }
.dims .w rect { fill: var(--accent); }
.dims .hd line { stroke: var(--accent); }
.dims .hd rect { fill: var(--accent); }
.dims .hd line[stroke-dasharray] { stroke: var(--good); }
.dims text { font-family: var(--font-head); font-weight: 700; }
.dims text { fill: var(--white); }
.measure { font-size: 15px; color: var(--muted); text-align: center; }
.compare { border-radius: 10px; }
.six { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.six li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--rule-soft); font-size: 17px; min-height: 48px; }
.six li:first-child { border-top: 0; }
.six li .fixnote { display: block; font-size: 15px; color: var(--muted); }
.spill { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.spill svg { width: 14px; height: 14px; flex: 0 0 14px; }
.spill.ok { background: var(--good); color: var(--white); }
.spill.no { background: var(--bad); color: var(--white); }
.spill.warn { background: var(--warn); color: var(--ink); border: 1.5px solid var(--warn-edge); }
.spill.na { background: var(--rule-soft); color: var(--muted); }
.showall { align-self: flex-start; background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--accent); font-weight: 600; font-size: 16px; text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.showall svg { width: 16px; height: 16px; transition: transform 0.2s; }
.showall[aria-expanded="true"] svg { transform: rotate(180deg); }
.result-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Checkout steps ---------- */
.ck-top { display: flex; align-items: center; gap: 10px; padding: 14px 20px 6px; }
.ck-top .h { flex: 1; font-size: 17px; }
.stepc { font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.order-head { position: sticky; top: 0; z-index: 4; display: flex; gap: 12px; align-items: center; background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 20px; }
html.framed .order-head { position: static; }
.order-head .thumb-s { width: 52px; height: 52px; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); flex: 0 0 52px; background: var(--white); }
.order-head .thumb-s img { width: 100%; height: 100%; object-fit: cover; }
.order-head .doc { font-family: var(--font-head); font-weight: 700; font-size: 17px; line-height: 1.2; }
.order-head .size { font-size: 15px; color: var(--muted); }
.ck-h2 { font-size: 21px; }
.opt { display: flex; gap: 12px; align-items: flex-start; background: var(--white); border: 1.5px solid var(--rule); border-radius: var(--r-card); padding: 14px; cursor: pointer; position: relative; }
.opt .dot { margin-top: 2px; }
.opt .box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--radio); flex: 0 0 22px; margin-top: 2px; display: flex; align-items: center; justify-content: center; color: var(--white); background: var(--white); }
.opt .box svg { width: 14px; height: 14px; opacity: 0; }
.opt input:checked ~ .box { background: var(--accent); border-color: var(--accent); }
.opt input:checked ~ .box svg { opacity: 1; }
.opt .body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.opt .head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.opt .title { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.2; }
.opt .price { font-family: var(--font-head); font-weight: 700; font-size: 18px; white-space: nowrap; }
.opt .price.plus { color: var(--accent); }
.opt ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.opt li { display: flex; gap: 8px; font-size: 16px; line-height: 1.4; color: var(--ink); }
.opt li::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; background-repeat: no-repeat; background-size: 16px 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6.5 12.5 13.5 4' fill='none' stroke='%230B5C6E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.opt .foot { font-size: 15px; color: var(--muted); line-height: 1.4; }
.opt .desc { font-size: 16px; color: var(--ink); line-height: 1.4; }
.opt.choice:has(input:checked), .opt.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.opt.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.reveal { margin: -10px 0 0; border: 1.5px solid var(--accent); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); background: var(--white); padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 0 2px var(--accent-soft); }
.reveal .lbl { font-weight: 600; font-size: 16px; }
.prints .choice { border-radius: 10px; }
.prints .choice b { font-size: 16px; }
.summary { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.summary .h { font-size: 16px; }
.summary .row { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; }
.summary .row span { color: var(--ink); }
.summary .row.total { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 2px; font-size: 17px; align-items: baseline; }
.summary .row.total b { font-family: var(--font-head); font-size: 22px; }
.shield-line { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.4; color: var(--ink); }
.shield-line svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--accent); margin-top: 1px; }
.safe { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.safe .h { font-size: 17px; }
.safe .item { display: flex; gap: 12px; align-items: flex-start; }
.safe .item svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--accent); margin-top: 2px; }
.safe .item b { display: block; font-size: 16px; }
.safe .item span { display: block; font-size: 15px; color: var(--muted); line-height: 1.4; }
.paybar { padding: 12px 20px 22px; gap: 10px; }
html.framed .paybar { position: static; }
.paybar .total-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.paybar .total-line b { font-family: var(--font-head); font-size: 22px; }
.express { display: flex; flex-direction: column; gap: 8px; }
.express .or { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.express .or::before, .express .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.wallets { display: flex; gap: 8px; }
.wallet { flex: 1; min-height: 44px; border: 1.5px solid var(--ink); border-radius: var(--r-btn); background: var(--white); color: var(--ink); font-family: var(--font-head); font-weight: 700; font-size: 15px; cursor: pointer; padding: 0 6px; white-space: nowrap; }
.wallet:hover { background: var(--ground); }
.wallet:disabled { opacity: 0.5; cursor: default; }
.legal { font-size: 15px; color: var(--muted); text-align: center; line-height: 1.4; }
.legal a { color: var(--accent); }
.ship-note { font-size: 15px; color: var(--muted); line-height: 1.4; }
.saves { display: inline-block; font-size: 15px; font-weight: 600; color: var(--good); background: var(--pass-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.subpanel { border-radius: 0 0 var(--r-card) var(--r-card); margin-top: -10px; box-shadow: 0 2px 0 2px var(--accent-soft); }
.subpanel .head { padding: 10px 14px; }
.btn.small { font-size: 15px; }
.subpanel .head .btn.small { height: 44px; min-height: 44px; }
.opt .ready { font-size: 15px; color: var(--good); font-weight: 600; }
.desk-head nav a { padding: 10px 0; }
.subpanel .head .input { height: 44px; }
.linkbtn { padding: 10px 0; margin: -10px 0; min-height: 44px; display: inline-block; }

/* ---------- Add-ons ---------- */
.addon-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.skip { background: none; border: 0; color: var(--accent); text-decoration: underline; font-size: 16px; font-weight: 600; min-height: 44px; padding: 0 8px; cursor: pointer; }
.more { align-self: flex-start; background: none; border: 0; padding: 0 4px; min-height: 44px; color: var(--accent); font-weight: 600; font-size: 16px; text-decoration: underline; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.more svg { width: 16px; height: 16px; transition: transform 0.2s; }
.more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ba .frame { aspect-ratio: 1; max-width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); background: var(--white); }
.ba img { width: 100%; height: 100%; object-fit: cover; }
.ba figcaption { font-size: 15px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ba-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.4; }

/* ---------- Done ---------- */
.done-tick { background: var(--good); }

/* ---------- Desktop ---------- */
.desk-head .brand { display: flex; align-items: center; gap: 8px; }
.desk-head .brand .mark { display: inline-flex; width: 26px; height: 26px; color: var(--accent); }
.desk-head .brand .mark svg, .desk-head .brand .mark img { width: 26px; height: 26px; }
.desk-grid h1.h { font-size: 44px; }
.qr-card { border-color: var(--accent); }

@media (max-width: 400px) {
  .opt { padding: 12px; }
  .opt .title, .opt .price { font-size: 17px; }
  .wallet { font-size: 15px; padding: 0 4px; }
}

/* ---------- PassportPhotos AI pictures (public/assets/pp-*, drawn by scripts/pp-build-svg-assets.py) ---------- */
.proc-wrap { position: relative; width: 320px; max-width: 100%; aspect-ratio: 3 / 2; }
.proc-wrap .proc-ill { display: block; width: 100%; height: 100%; border-radius: 12px; }
.processing .proc-wrap .thumb { position: absolute; left: 29.2%; top: 15%; width: 41.6%; height: 70%; border-radius: 6px; }
.stage .sicon { width: 24px; height: 24px; flex: 0 0 24px; }
.six li { gap: 10px; }
.six li .cicon { width: 28px; height: 28px; flex: 0 0 28px; }
.six li .clabel { flex: 1; min-width: 0; }
.opt .pthumb { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; }
.prints .choice .nthumb { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 2px; }
.shield-line img { flex: 0 0 32px; width: 32px; height: 32px; margin-top: -2px; }
.safe .item img { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--ground); }
.gchip img { width: 18px; height: 18px; }
.spec-card.has-diagram { display: grid; grid-template-columns: 1fr; gap: 10px 16px; }
.spec-card.has-diagram .h { grid-column: 1 / -1; }
.spec-card .spec-diagram { display: block; width: 100%; max-width: 240px; height: auto; border: 1px solid var(--rule); border-radius: 10px; justify-self: center; }
@media (min-width: 560px) { .spec-card.has-diagram { grid-template-columns: 240px 1fr; align-items: start; } .spec-card.has-diagram .spec-src { grid-column: 1 / -1; } }
.doc-picker .doc .dthumb { width: 32px; height: 40px; border-radius: 6px; display: block; margin-bottom: 6px; }
.get-row { display: flex; gap: 14px; align-items: flex-start; }
.get-row .get-sheet { width: 112px; height: auto; flex: 0 0 112px; border-radius: 8px; border: 1px solid var(--rule); }
.done-ill { display: block; width: 100%; max-width: 320px; height: auto; border-radius: 12px; margin-bottom: 6px; }
.leaflet-marker-icon { border: 0; background: none; }