/* zeneon-market — the buyer checkout and tracking (checkpoint 2, frames 1.1–6.17). Loads after zm-tokens.css and theme-paper.css.
   The component rules below are the sheet's own (docs/design/drops/2026-10-23-checkpoint-2/sheet/checkpoint-2.html),
   copied as they are; the "page" block at the end turns the sheet's 360 px frame into the real phone page. */
*{box-sizing:border-box}
html{background:var(--zm-surface-2)}
body{margin:0;font-family:var(--zm-font);color:var(--zm-text);background:var(--zm-surface);max-width:480px;margin-inline:auto;min-height:100vh;min-height:100dvh}
h1,h2,h3,p{margin:0}
.muted{color:var(--zm-text-muted)}
.cap{font:500 11px/16px var(--zm-font-mono);letter-spacing:.06em;color:var(--zm-text-muted);direction:ltr;text-align:left;unicode-bidi:isolate}
/* ===== the phone frame: 360 wide, Paper theme, Kurdish RTL ===== */
.frame{width:360px;margin:0 auto;background:var(--zm-surface);border:1px solid var(--zm-ink-300);border-radius:0;display:flex;flex-direction:column;overflow:hidden;font-size:var(--zm-text-body);line-height:var(--zm-lh-body);position:relative}
.fhead{padding:10px 16px 8px;border-bottom:1px solid var(--zm-line);display:flex;flex-direction:column;gap:8px;background:var(--zm-surface)}
.fhead-row{display:flex;align-items:center;gap:10px;min-height:40px}
.fhead .back{width:40px;height:40px;display:grid;place-items:center;margin-inline-start:-10px;flex:none}
.fhead .back svg{width:24px;height:24px}
[dir=rtl] .fhead .back svg{transform:scaleX(-1)}
.shopname.track-t{white-space:normal;font:600 15px/20px var(--zm-font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.col{display:flex;flex-direction:column;gap:10px}
.shopname{font:700 18px/24px var(--zm-font);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps3{display:flex;align-items:center;gap:6px}
.steps3 i{height:4px;flex:1;border-radius:2px;background:var(--zm-ink-200)}
.steps3 i.on{background:var(--zm-ink-950)}
.steps3 .cap{flex:none;margin-inline-start:6px;letter-spacing:0;font-family:var(--zm-font)}
[dir=rtl] .steps3 .cap{direction:rtl;text-align:right}
.fbody{flex:1;padding:16px 16px 24px;display:flex;flex-direction:column;gap:14px;position:relative}
.fbottom{position:sticky;bottom:0;background:var(--zm-surface);border-top:1px solid var(--zm-line);padding:12px 16px calc(12px + var(--zm-safe-bottom));display:flex;flex-direction:column;gap:10px}
.ftitle{font:700 var(--zm-text-h1)/var(--zm-lh-h1) var(--zm-font);letter-spacing:var(--zm-tracking-heading)}
.t{font-size:var(--zm-text-body);line-height:var(--zm-lh-body)}
.ts{font-size:var(--zm-text-small);line-height:var(--zm-lh-small)}
.t-h3{font:600 var(--zm-text-h3)/var(--zm-lh-h3) var(--zm-font)}
.centre{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:40px}
.centre-t{text-align:center}
.bigicon{width:64px;height:64px;border-radius:50%;background:var(--zm-ink-100);color:var(--zm-ink-700);display:grid;place-items:center}
.bigicon svg{width:30px;height:30px}
a{color:var(--zm-zeneon-amber-deep);text-decoration:underline;text-underline-offset:3px}
.row{display:flex;align-items:center;gap:10px}.row.sb{justify-content:space-between}
.lbl{font:600 var(--zm-text-small)/var(--zm-lh-small) var(--zm-font);color:var(--zm-text-2)}

/* buttons */
.zm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding-inline:20px;border-radius:var(--zm-radius-md);font:600 16px/1 var(--zm-font);border:1px solid transparent;cursor:pointer;white-space:nowrap;min-width:0}
.zm-btn--primary{background:var(--zm-btn-primary-bg);color:var(--zm-btn-primary-fg)}
.zm-btn--secondary{background:var(--zm-btn-secondary-bg);color:var(--zm-btn-secondary-fg);border-color:var(--zm-btn-secondary-line)}
.zm-btn--full{width:100%}
.zm-btn.is-disabled{background:var(--zm-btn-disabled-bg);color:var(--zm-btn-disabled-fg);border-color:transparent}
.zm-btn.danger{color:var(--zm-danger);border-color:var(--zm-danger)}
.zm-btn.danger-fill{background:var(--zm-danger);color:var(--zm-white)}
.zm-btnpair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zm-guarantee{display:flex;align-items:center;gap:10px;font-size:var(--zm-text-small);line-height:var(--zm-lh-small);color:var(--zm-text-2)}
.zm-guarantee img{width:24px;height:24px;flex:none}

/* cart */
.lines{display:flex;flex-direction:column;gap:12px}
.line{display:flex;gap:12px;align-items:flex-start}
.line img{width:72px;height:72px;border-radius:var(--zm-radius-md);object-fit:cover;flex:none;border:1px solid var(--zm-line)}
.line-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.line-n{font:500 var(--zm-text-body)/22px var(--zm-font)}
.line-v{font-size:var(--zm-text-small);color:var(--zm-text-muted);line-height:20px}
.line-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--zm-line-strong);border-radius:var(--zm-radius-md);height:40px;overflow:hidden}
.qty button{width:40px;height:40px;border:0;background:transparent;display:grid;place-items:center;color:var(--zm-text)}
.qty button svg{width:18px;height:18px}
.qty b{min-width:28px;text-align:center;font:600 16px var(--zm-font);font-variant-numeric:tabular-nums}
.money{font:600 var(--zm-text-price)/var(--zm-lh-price) var(--zm-font);font-variant-numeric:tabular-nums;white-space:nowrap}
.has-err img{opacity:.5}
.line-err{display:flex;gap:8px;align-items:flex-start;font-size:var(--zm-text-small);line-height:var(--zm-lh-small);color:var(--zm-danger);background:var(--zm-danger-soft);padding:8px 10px;border-radius:var(--zm-radius-md);margin-top:-4px}
.line-err svg{width:16px;height:16px;flex:none;margin-top:3px}
.line-err a{margin-inline-start:auto;color:var(--zm-danger);font-weight:600;white-space:nowrap}
.totals{border-top:1px solid var(--zm-line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.trow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.trow.sub{color:var(--zm-text-muted)}
.trow.grand{border-top:1px solid var(--zm-line);padding-top:8px;margin-top:4px;font-weight:600}
.trow.grand .money{font-size:var(--zm-text-total);line-height:var(--zm-lh-total)}
.policy{padding-top:4px}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.ctl{display:flex;align-items:center;gap:8px;height:48px;border:1px solid var(--zm-line-strong);border-radius:var(--zm-radius-md);padding:0 14px;background:var(--zm-surface);font-size:16px}
.ctl input{border:0;outline:0;background:transparent;font:inherit;color:var(--zm-text);width:100%;min-width:0}
.ctl.ltr{direction:ltr}
.ctl .prefix{color:var(--zm-text-muted);font-family:var(--zm-font-mono);padding-inline-end:8px;border-inline-end:1px solid var(--zm-line);margin-inline-end:2px;height:28px;display:flex;align-items:center}
.ctl.sel{justify-content:space-between}
.ctl.sel svg{width:20px;height:20px;color:var(--zm-text-muted)}
.ctl.area{height:auto;min-height:72px;align-items:flex-start;padding:12px 14px;line-height:24px}
.ctl.area.tall{min-height:120px;color:var(--zm-text-muted)}
.ctl.search{height:44px}.ctl.search svg{width:18px;height:18px;color:var(--zm-text-muted);transform:rotate(90deg)}
.help{font-size:var(--zm-text-small);line-height:var(--zm-lh-small);color:var(--zm-text-muted)}
.help.err{color:var(--zm-danger)}
.field.is-err .ctl{border-color:var(--zm-danger);border-width:2px}
.wa{display:flex;align-items:center;gap:8px}.wa svg{width:18px;height:18px;flex:none;color:var(--zm-ok)}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--zm-radius-md);font-size:var(--zm-text-small);line-height:var(--zm-lh-small);background:var(--zm-surface-2);color:var(--zm-text-2)}
.notice svg{width:18px;height:18px;flex:none;margin-top:3px}
.notice.warn{background:var(--zm-attention-soft);color:var(--zm-attention)}
.notice.danger{background:var(--zm-danger-soft);color:var(--zm-danger)}
.codebox{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:8px 0 4px}
.codebox i{height:56px;border:1px solid var(--zm-line-strong);border-radius:var(--zm-radius-md);display:grid;place-items:center;font:500 24px var(--zm-font-mono);font-style:normal;background:var(--zm-surface)}
.codebox i.f{border-color:var(--zm-ink-950)}
.codebox i.nx{border-color:var(--zm-ink-950);border-width:2px}
.codebox.err i{border-color:var(--zm-danger);color:var(--zm-danger)}
.codebox.lock i{background:var(--zm-ink-100);border-color:var(--zm-line);color:var(--zm-text-muted)}
.savedrow{display:flex;flex-direction:column;gap:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--zm-line-strong);font:500 14px var(--zm-font);background:var(--zm-surface)}
.chip svg{width:14px;height:14px}
.chip.on{border:2px solid var(--zm-accent);background:var(--zm-accent-soft);font-weight:600}
.chip.ghost{border-style:dashed;color:var(--zm-text-muted)}

/* bottom sheet and dialog */
.sheet-scrim{position:absolute;inset:0;background:rgba(10,16,27,.45);z-index:2}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--zm-surface);border-radius:16px 16px 0 0;padding:8px 16px calc(16px + var(--zm-safe-bottom));display:flex;flex-direction:column;gap:12px;max-height:85%}
.grab{width:40px;height:4px;border-radius:2px;background:var(--zm-ink-300);margin:0 auto 4px}
.sheet-h{display:flex;flex-direction:column;gap:8px}
.clist{display:flex;flex-direction:column;overflow:hidden}
.crow{display:flex;align-items:center;justify-content:space-between;min-height:48px;border-bottom:1px solid var(--zm-ink-150);font-size:16px}
.crow svg{width:18px;height:18px}
.crow.on{font-weight:600}
.crow.more{border:0;min-height:40px;color:var(--zm-text-muted)}
.dialog{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:3;background:var(--zm-surface);border-radius:var(--zm-radius-lg);padding:20px 16px 16px;display:flex;flex-direction:column;gap:16px}
.rlist{display:flex;flex-direction:column}
.rrow{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--zm-ink-150);font-size:16px}
.rrow .rad,.paycard .rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--zm-line-strong);display:grid;place-items:center;flex:none}
.rrow.on .rad{border-color:var(--zm-accent);color:var(--zm-accent)}
.rrow .rad svg{width:22px;height:22px}

/* payment */
.paycard{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--zm-line-strong);border-radius:var(--zm-radius-lg)}
.paycard.on{border:2px solid var(--zm-accent)}
.paycard.on>svg{width:22px;height:22px;flex:none;color:var(--zm-accent);margin-top:2px}
.paycard.off{color:var(--zm-text-muted);background:var(--zm-surface-2);border-style:dashed}
.paycard b{font:600 16px/24px var(--zm-font);display:block}
.paycard .soon{display:inline-block;font:600 11px/18px var(--zm-font);padding:0 8px;border-radius:4px;background:var(--zm-ink-100);color:var(--zm-ink-700);margin-inline-start:6px;vertical-align:middle}
.who{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--zm-line);border-radius:var(--zm-radius-lg)}
.who>svg{width:24px;height:24px;flex:none;color:var(--zm-ink-700)}
.who>div{flex:1;display:flex;flex-direction:column}
.who b{font:600 16px/22px var(--zm-font)}

/* confirmation */
.confirm{background:var(--zm-surface);border:1px solid var(--zm-line);border-radius:var(--zm-radius-lg);overflow:hidden}
.confirm .top{height:6px;background:var(--zm-zeneon-amber)}
.confirm .in{padding:16px;display:flex;flex-direction:column;gap:12px}
.code{font:500 var(--zm-text-code)/var(--zm-lh-code) var(--zm-font-mono);direction:ltr;text-align:start;letter-spacing:.02em;unicode-bidi:isolate}
.steps{display:flex;flex-direction:column;gap:10px;padding:0;margin:0;list-style:none}
.steps li{display:flex;gap:10px;align-items:flex-start;font-size:var(--zm-text-small);line-height:var(--zm-lh-small)}
.steps li b{width:22px;height:22px;border-radius:50%;background:var(--zm-ink-100);color:var(--zm-ink-800);font:600 12px/22px var(--zm-font-mono);text-align:center;flex:none}
.url{font:500 12px/16px var(--zm-font-mono);color:var(--zm-text-muted);direction:ltr;text-align:start;unicode-bidi:isolate}

/* tracking */
.stepper{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.stepper li{display:flex;gap:14px;position:relative;padding-bottom:20px}
.stepper li i{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--zm-ink-300);background:var(--zm-surface);z-index:1;font-style:normal}
.stepper li i svg{width:14px;height:14px}
.stepper li::before{content:"";position:absolute;top:28px;bottom:0;inset-inline-start:13px;width:2px;background:var(--zm-ink-200)}
.stepper li:last-child::before{display:none}
.stepper li.done i{background:var(--zm-ink-950);border-color:var(--zm-ink-950);color:var(--zm-white)}
.stepper li.done::before{background:var(--zm-ink-950)}
.stepper li.cur i{border-color:var(--zm-ink-950);border-width:3px}
.stepper li.cur i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--zm-ink-950)}
.stepper li.closed i{border-color:var(--zm-ink-300);border-style:dashed}
.stepper li.todo{color:var(--zm-text-muted)}
.stepper li>div{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;padding-top:2px}
.stepper li.todo>div{padding-top:3px;font-size:var(--zm-text-small)}
.st-l{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.zm-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding-inline:8px 10px;border-radius:999px;font:600 13px/1 var(--zm-font);border:1px solid transparent;white-space:nowrap}
.zm-chip svg{width:14px;height:14px;flex:none}
.zm-chip--open{background:var(--zm-chip-open-bg);color:var(--zm-chip-open-fg)}
.zm-chip--done{background:var(--zm-chip-done-bg);color:var(--zm-chip-done-fg)}
.zm-chip--closed{background:var(--zm-chip-closed-bg);color:var(--zm-chip-closed-fg);border-color:var(--zm-chip-closed-line)}
.zm-flag{display:inline-flex;align-items:center;gap:6px;height:24px;padding-inline:8px;border-radius:4px;font:600 12px/1 var(--zm-font);background:var(--zm-flag-bg);color:var(--zm-flag-fg);border:1px solid var(--zm-flag-line)}
.zm-flag svg{width:12px;height:12px}
.attempt{display:flex;gap:8px;align-items:flex-start;font-size:var(--zm-text-small);line-height:var(--zm-lh-small);color:var(--zm-attention);background:var(--zm-attention-soft);padding:8px 10px;border-radius:var(--zm-radius-md)}
.attempt svg{width:16px;height:16px;flex:none;margin-top:3px}
.waiting{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--zm-radius-md);background:var(--zm-ink-100);color:var(--zm-ink-800);font:600 var(--zm-text-small)/var(--zm-lh-small) var(--zm-font)}
.waiting svg{width:18px;height:18px;flex:none}
.block{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--zm-line);border-radius:var(--zm-radius-lg);font-size:var(--zm-text-small);line-height:var(--zm-lh-small);color:var(--zm-text-2)}
.block svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--zm-ink-700)}
.block.flag{background:var(--zm-attention-soft);border-color:var(--zm-flag-line);color:var(--zm-attention)}
.block.flag svg{color:var(--zm-attention)}

/* ===== page: the sheet's frame as the real page (360–480 centred column) ===== */
.frame{width:100%;min-height:100vh;min-height:100dvh;border:0;overflow:visible}
.fhead .back{color:var(--zm-text);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.fhead .back.off{visibility:hidden}
.step{flex:1;display:flex;flex-direction:column;margin:0}
.step>.fbody{flex:1}
.num{font-family:var(--zm-font);font-variant-numeric:tabular-nums}   /* amounts outside tables are Plex Sans, tabular, as the sheet draws them; mono is for codes and phones */
.nowrap{white-space:nowrap;unicode-bidi:isolate;direction:ltr}
.zm-btn{text-decoration:none}
.zm-btn:focus-visible,.ctl:focus-within,.chip:focus-visible,.linkbtn:focus-visible,.crow:focus-within{outline:none;box-shadow:var(--zm-focus-ring)}
.zm-btn[disabled]{cursor:default}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--zm-zeneon-amber-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.line-err .linkbtn{color:var(--zm-danger);font-weight:600;white-space:nowrap}
.line-err form{margin-inline-start:auto}
.line-ph{width:72px;height:72px;border-radius:var(--zm-radius-md);flex:none;border:1px solid var(--zm-line);background:var(--zm-surface-3)}
.qty form{display:contents}
.qty button[disabled]{color:var(--zm-ink-300)}
.ctl textarea{border:0;outline:0;background:transparent;font:inherit;color:var(--zm-text);width:100%;min-height:48px;resize:vertical;padding:0}
.ctl.is-ro{background:var(--zm-surface-2);color:var(--zm-text-2)}
.ctl.is-ro input,.ctl.is-ro textarea{color:var(--zm-text-2)}
a.ctl.sel{color:var(--zm-text);text-decoration:none}
.chip{color:var(--zm-text);text-decoration:none}
.hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa{justify-content:center}
.fbody>.wa{justify-content:flex-start}
/* the six code boxes: one numeric input behind them (as the qcc-ds PIN); without script the input shows itself */
.codewrap{position:relative}
.js .codewrap input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;caret-color:transparent}
.no-js .codebox{display:none}
.no-js .codewrap input{width:100%;height:56px;border:1px solid var(--zm-line-strong);border-radius:var(--zm-radius-md);font:500 24px var(--zm-font-mono);text-align:center;letter-spacing:.3em}
.codebox i{font-style:normal}
[hidden]{display:none!important}
/* the city sheet: open by script, or by #city-sheet without it */
.sheet-wrap{display:none}
.sheet-wrap:target,.sheet-wrap.open{display:block}
.sheet-wrap .sheet-scrim{position:fixed;z-index:20}
.sheet-wrap .sheet{position:fixed;z-index:21;max-width:480px;margin-inline:auto;max-height:85vh}
.sheet-wrap .clist{overflow-y:auto}
.crow{cursor:pointer;color:var(--zm-text)}
.crow input{position:absolute;opacity:0;pointer-events:none}
.crow svg{visibility:hidden}
.crow:has(input:checked){font-weight:600}
.crow input:checked~svg{visibility:visible}
/* the tracking dialog (6.14) and return sheet (6.15): open by #cancel-dialog / #return-sheet, like the city sheet */
#cancel-dialog .sheet-scrim,#return-sheet .sheet-scrim,#report-sheet .sheet-scrim{top:59px}  /* the header stays clear, as drawn (6.14, 6.15) */
#return-sheet .sheet:not(:has(input[name=reason]:checked)) .zm-btn--primary{background:var(--zm-btn-disabled-bg);color:var(--zm-btn-disabled-fg);border-color:transparent;pointer-events:none}  /* Confirm waits for a reason; the server still refuses none */
.sheet-wrap .dialog{position:fixed;z-index:21;max-width:448px;margin-inline:auto}
.rrow{cursor:pointer;color:var(--zm-text)}
.rrow .rad svg{visibility:hidden}
.rrow:has(input:checked) .rad{border-color:var(--zm-accent);color:var(--zm-accent)}
.rrow:has(input:checked) .rad svg{visibility:visible}
.rrow:has(input:focus-visible){outline:none;box-shadow:var(--zm-focus-ring)}  /* keyboard focus only; a click marks the choice by the radio alone */
/* WP15: the review sheet's stars (ink, never amber, D73); the DOM runs five to one, row-reverse shows one first */
.starpick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;border:0;margin:12px 0;padding:0}
.starpick legend{width:100%;margin-bottom:8px}
.starpick label{display:grid;place-items:center;width:44px;height:44px;color:var(--zm-ink-300);cursor:pointer}
.starpick svg{width:30px;height:30px}
.starpick label:has(:checked),.starpick label:has(:checked)~label{color:var(--zm-ink-950)}
.starpick label:has(:checked) svg,.starpick label:has(:checked)~label svg{fill:currentColor}
.starpick label:has(:focus-visible){outline:2px solid var(--zm-accent);border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}