/* Payzilla app.css: the ONE app layer for every service page in the d10 design (demo, Marketplace list, pay page and chat,
   start app, buyer view, status page, service error pages, operator console).
   - Loads AFTER site.css: <link rel="stylesheet" href="{assets}site.css"> then <link rel="stylesheet" href="{assets}app.css">.
   - Merged from the three design layers (d10-dashboards/dashboards.css, d10-marketplace/marketplace.css, d10-surfaces/surfaces.css).
     Their COMPONENTS.md files name the classes. It only ADDS classes on top of site.css, except: rules scoped inside the app shell
     (.app), [disabled] controls (the public site has none), and .primary a[aria-current="true"].
   - Tokens only: every colour is a site.css custom property. No @import, no url().
   - Sample cues live ONLY under .is-sample (class on <body> of a design sample screen): the sample bar, the dashed ring and muted
     fill on disabled controls, inert hints, "Real" badges on sample figures, the unlinked order switch, the map pages, the payment walk.
     A product page never sets .is-sample, so it inherits none of them: its disabled buttons are only dimmed (no ring, no fill).
   - The public site does not load this file, and the site build does not publish it (scripts/build-site-dist.mjs skips it).
   - Never copy: services read this file at build time from site/assets. Any unavoidable copy needs a parity test
     (bytes equal to site/assets/app.css). Change it here, never in a service.
   - Sections: 1 app shell, 2 shared app components, 3 Marketplace, 4 surfaces (demo, sandbox, status, errors),
     5 sample cues (.is-sample only, never on a product page). Order matters: later sections may build on earlier ones. */

/* =========================================================================================================
   1. APP SHELL: header with role and tabs, app band, short footer
   ========================================================================================================= */
.app .bar{gap:20px}
.role{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-left:16px;border-left:1px solid var(--rule);white-space:nowrap}
.tabs ul{display:flex;gap:2px}
.tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;color:var(--ink-2);text-decoration:none;font-size:15px;white-space:nowrap}
.tabs a:hover{color:var(--ink);text-decoration:underline}
.tabs a[aria-current]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.acct{font-size:14px;color:var(--ink-2);white-space:nowrap}
.mode{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule-2);padding:2px 7px;border-radius:3px;color:var(--ink)}

/* Short app footer; Sign out moves into it on phones */
.afoot{border-top:1px solid var(--rule);padding:20px 0 28px;font-size:14px;color:var(--ink-2);background:var(--bg)}
.afoot p+p{margin-top:4px}
.foot-out{display:none}

@media (max-width:1080px){
  .app .bar{flex-wrap:wrap;height:auto;min-height:64px;gap:0 16px;padding-top:10px}
  .app .tabs{order:3;flex:1 0 100%;border-top:1px solid var(--rule);margin-top:10px}
  .acct{display:none}
}
@media (max-width:720px){
  .role{padding-left:10px;font-size:13px}
  .tabs ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tabs.n4 ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tabs.n2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs a{padding:0 4px;font-size:14.5px;min-height:48px}
  .tabs a[aria-current]{background:var(--bg-2)}
  .tabs.n5 ul{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tabs.n5 a{font-size:13px;padding:0 1px;min-height:48px;white-space:normal;text-align:center;line-height:1.15;overflow-wrap:normal;hyphens:auto}
  .bar-end .out{display:none}
  .foot-out{display:block!important;margin-bottom:12px}
  /* App band: on phones it wraps (state words can be long) and keeps every shape */
  .app-band .wrap{flex-wrap:wrap;gap:0 14px;padding-top:6px;padding-bottom:6px}
  .app-band .st{white-space:normal;min-height:30px}
  .app-band .st-no svg{display:block}
}
@media (max-width:480px){
  .role{display:none}
}
@media print{.tabs,.afoot{display:none}}

/* =========================================================================================================
   2. SHARED APP COMPONENTS: buttons, page head, blocks, registers, fields, empty state, notices, steps
   ========================================================================================================= */
/* Buttons. A disabled control on a product page is only dimmed and keeps its own look (a danger button keeps its danger outline).
   The dashed ring and the muted fill are sample cues (section 5). On sample screens outline buttons stay undimmed. */
button.btn,button.ctl{cursor:pointer}
.btn[disabled],.ctl[disabled]{cursor:not-allowed}
.btn[disabled]:not(.is-sample .btn-2){opacity:.72}
:root[data-theme="dark"] .btn[disabled]:not(.is-sample .btn-2){opacity:.55}
@media (prefers-color-scheme:dark){:root:not([data-theme]):not(:has(#tt:checked)) .btn[disabled]:not(.is-sample .btn-2){opacity:.55}}
.btn-s{min-height:44px;padding:0 14px;font-size:15px;font-weight:500}
.btn-danger{color:var(--fail);border-color:var(--fail)}

/* Page head (compact; one h1) */
.ph{padding:28px 0 22px}
.ph-grid{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.ph h1{font-size:32px;line-height:1.15;letter-spacing:-0.02em;margin-top:8px}
.ph .line{margin-top:8px;color:var(--ink-2);max-width:44em}
.ph .back{display:inline-flex;align-items:center;min-height:44px;font-size:15px}

/* Blocks: a short head (h2 plus an aside) over a panel, register or cells; main-plus-side columns; one-column screens */
.blk{padding:0 0 32px}
.blk-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;margin-bottom:12px}
.blk-h h2{font-size:20px}
.blk-h .aside{font-size:14px;color:var(--ink-2)}
.blk-h .aside a{display:inline-flex;align-items:center;min-height:44px}
.blk>.small{margin-top:10px}
.dgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:0 40px;align-items:start}
.dgrid.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stack>section{max-width:776px}

/* Register as a list of records (payments, services); on phones each record stacks into label and value lines */
.reg.rows tbody th{width:auto;font-weight:500;white-space:nowrap}
.reg.rows td.s{width:auto}
.reg .amt{font:500 15px var(--mono);white-space:nowrap}
.reg .mono{font-size:14px}
.reg .acts{display:flex;flex-wrap:wrap;gap:8px}
.reg tfoot td{border-bottom:0;padding-top:13px}
.ext-text{font:14px var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
small.blockline{display:block;font-weight:400;font-size:13px;color:var(--muted);overflow-wrap:anywhere}

/* Form fields, real checkboxes and radios (one per row) */
.field{display:grid;gap:6px;margin-bottom:18px}
.field>label,.field>.lbl{font-weight:600;font-size:15px}
.field .hint{font-size:14px;color:var(--ink-2)}
.input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--muted);border-radius:var(--r);background:var(--bg);color:var(--ink);font:16px var(--sans)}
.input.mono{font:15px var(--mono)}
.input[readonly]{background:var(--bg-2)}
textarea.input{min-height:76px;resize:vertical}
.ticks{border-top:1px solid var(--rule);margin:4px 0 16px}
.ticks .tick{border-bottom:1px solid var(--rule);padding:10px 0}
fieldset.ticks{border:0;border-top:1px solid var(--rule);padding:0;margin:4px 0 16px;min-width:0}
.chk{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.chk input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.chk label small{display:block;color:var(--ink-2);font-size:14px}
.chk label b{font-weight:600}

/* Empty state: one sentence, an outline shape, the next action */
.empty{border-top:2px solid var(--rule-2);border-bottom:1px solid var(--rule);padding:22px 0 24px;display:grid;gap:10px;justify-items:start}
.empty h2,.empty h3{font-size:18px}
.empty p{color:var(--ink-2);max-width:40em}

/* Notice variants (same bar shape as the real-money notice) */
.notice.is-fail{border-left-color:var(--fail)}
.notice.is-info{border-left-color:var(--accent);background:var(--bg-2)}
.notice+.notice{margin-top:10px}
.notice .btn-row{margin-top:10px}

/* Steps (sign-in and claim): an ordered list; the current step has aria-current="step" */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--rule-2);margin-bottom:24px}
.steps li{padding:12px 16px 14px 0;border-bottom:1px solid var(--rule)}
.steps li+li{padding-left:16px;border-left:1px solid var(--rule)}
.steps .n{display:block;font:13px var(--mono);color:var(--muted)}
.steps b{display:block;font-weight:600;margin:2px 0 4px}
.steps li[aria-current="step"]{background:var(--soft);box-shadow:inset 0 3px 0 var(--accent);padding-left:16px}

/* Status chain inside one payment: reached steps carry their shape, others stay outline */
.chain.slim{padding:13px 0;border-top:0}
.chain .st.at{border-color:var(--rule-2)}

/* Panel and disclosure headings; a solid tag on real figures inside a sample screen */
.panel-h h2{font-size:15px;font-weight:600;letter-spacing:0}
.panel-h h3{font-size:15px;font-weight:600}
.disc>summary .sum-h{display:inline;font-size:16px;font-weight:600;letter-spacing:0;line-height:1.3}

@media (max-width:920px){
  .dgrid,.dgrid.even{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .ph{padding:20px 0 16px}
  .ph h1{font-size:26px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li+li{padding-left:0;border-left:0}
  .steps li[aria-current="step"]{padding-left:12px}
  .reg.rows tbody tr{row-gap:2px}
  .reg.rows td.c{grid-column:1/3;display:flex;gap:10px;font-size:15px}
  .reg.rows td.c::before{content:attr(data-l);flex:none;width:7.5em;font:500 13px/1.9 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .reg.rows tfoot,.reg.rows tfoot tr,.reg.rows tfoot td{display:block}
  .reg .acts{margin-top:6px}
  .btn{min-height:44px}
}

/* =========================================================================================================
   3. MARKETPLACE: list, listing and pay page, chat
   ========================================================================================================= */
/* Header: Marketplace stays marked on its sub-screens (aria-current="true", the same look as "page") */
.primary a[aria-current="true"],.m-panel a[aria-current="true"]{color:var(--ink);font-weight:600}
.primary a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--ink)}
.m-panel a[aria-current="true"]{box-shadow:inset 3px 0 0 var(--ink)}

/* Marketplace bar: the product name and its two parts (Listings, Chat), visible at every width */
.mbar{border-bottom:1px solid var(--rule)}
.mbar .wrap{display:flex;align-items:center;gap:6px 20px}
.mname{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mbar .tabs ul{display:flex}

/* Page head extras */
.ph .trust{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:15px;color:var(--ink-2)}
.lmeta{font-size:14px;color:var(--ink-2)}
.lmeta .mono{font-size:13.5px}

/* Order switch ("Show"): page links, no script (the unlinked sample order .vin is in section 5) */
.views{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;border:1px solid var(--rule);border-radius:var(--r);width:fit-content;max-width:100%}
.views .vlabel{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 12px}
.views a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:var(--ink-2);text-decoration:none;font-size:15px;border-left:1px solid var(--rule)}
.views a:hover{color:var(--ink);text-decoration:underline}
.views a[aria-current="page"]{color:var(--ink);font-weight:600;background:var(--bg-2);box-shadow:inset 0 -2px 0 var(--ink)}
.tip{margin-top:8px;font-size:14px;color:var(--ink-2)}

/* Search (design only): one field and one button */
.sform{display:flex;gap:10px;max-width:40em}
.sform .input{flex:1 1 auto;min-width:0}

/* Listing rows: a register whose rows open (details/summary, no script) */
.lhead,.lsum{display:grid;grid-template-columns:minmax(0,1fr) 12rem 11rem 9.5rem;gap:0 20px}
.lsum>*{min-width:0}
.lhead{border-top:2px solid var(--rule-2);border-bottom:1px solid var(--rule);padding:10px 0;font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.lhead span:last-child,.lprice{text-align:right}
.lrow{border-bottom:1px solid var(--rule)}
.lrow>details>summary{list-style:none;cursor:pointer}
.lrow>details>summary::-webkit-details-marker{display:none}
.lsum{padding:13px 0;min-height:56px;align-items:start}
.lsum:hover .lname{text-decoration:underline}
.lmain{display:block;min-width:0}
.lname{display:block;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.lname::before{content:"";display:inline-block;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);margin:0 10px 2px 1px}
.lrow details[open] .lname::before{transform:rotate(45deg)}
.ldesc{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2);font-size:15px;margin-top:2px;padding-left:19px}
.lhost{font:14px var(--mono);color:var(--ink-2);overflow-wrap:anywhere;padding-top:2px}
.lsell{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:15px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.lprice{font:500 15px var(--mono);color:var(--ink);white-space:nowrap;padding-top:1px}
.ldet{padding:4px 0 18px 19px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 32px;align-items:end}
.ldet .facts{border-top:1px solid var(--rule)}
.ldet .facts>div{grid-template-columns:8em minmax(0,1fr);padding:9px 0}
.ldet .facts>div:last-child{border-bottom:0}
.ldet .acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.lpay{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:0 0 13px 19px}
.lpay .payto{font-size:14px;color:var(--muted)}
.ldet .hint{grid-column:1/-1;font-size:14px;color:var(--ink-2)}
.lgroup{margin-top:36px}
.lgroup:first-child{margin-top:0}
.lgroup>h2{font-size:20px}
.lgroup>p{margin-top:6px;font-size:15px;color:var(--ink-2);max-width:46em}
.lgroup>.lhead{margin-top:14px}
.reg .path{font:14px var(--mono);color:var(--ink-2);overflow-wrap:anywhere}

/* Listing and pay page: price, host chip, seller text, human check, wallets, status line, answer */
.price-big{font:500 32px/1.15 var(--mono);letter-spacing:-0.01em;margin-top:8px}
.chip{font:14px var(--mono);border:1px solid var(--rule-2);border-radius:3px;padding:1px 7px;overflow-wrap:anywhere}
.said{border-left:2px solid var(--rule);padding:4px 0 4px 14px;color:var(--ink);max-width:40em}
.said+.small,.said+p{margin-top:8px}
.human{display:flex;align-items:center;gap:12px;min-height:66px;max-width:300px;padding:12px 14px;border:1px dashed var(--muted);border-radius:var(--r);background:var(--bg-2);font-size:14px;color:var(--ink-2);margin:4px 0 16px}
.human .box{width:20px;height:20px;flex:none;border:1.5px solid var(--ink-2);border-radius:3px}
.wallets{display:grid;gap:8px;max-width:26em;margin:6px 0 16px}
.wallets .btn{justify-content:flex-start}
.wallets .btn[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--ink)}
.wallets .btn[aria-pressed="true"]::after{content:"Chosen";margin-left:auto;font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.statusline{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--ink);margin:14px 0}
.statusline .eyebrow{flex:none}
.pay-actions{margin-top:16px}
.pay-actions .notice{margin-bottom:16px;max-width:40em}
.answer{margin-top:8px}
/* One line right above Pay: the state word, who checked the listing, refunds; the address-bar line in bold */
.paynote{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:14.5px;color:var(--ink-2);margin:0 0 12px}
.hostline{font-size:14.5px;font-weight:600;color:var(--ink);margin:10px 0 8px}
.hostline .mono{font-size:14px;font-weight:500}
/* The Pay step after the check (dashed top rule); technical rows folded */
.later{margin-top:20px;padding-top:12px;border-top:1px dashed var(--muted)}
.later .statusline{margin-top:0}
.tech{margin-top:4px}
.tech>summary{font-size:15px}
.tech .facts{border-top:0}
.tech .facts>div:last-child{border-bottom:0}

/* Chat: a ruled log (who, then what); the Check and pay card beside it on wide screens */
.chatgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4.4fr);grid-template-areas:"log card" "comp card";gap:0 40px;align-items:start}
.chatgrid>div:first-child{grid-area:log}
.chatgrid>.card{grid-area:card;grid-row:1/3}
.chatgrid>.composer{grid-area:comp}
.msgs{border-top:2px solid var(--rule-2)}
.msgs>li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 16px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.msgs>li>.who{font:500 13px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.msgs>li.you{background:var(--bg-2);box-shadow:-12px 0 0 var(--bg-2),12px 0 0 var(--bg-2)}
.msgs>li.you>.who{color:var(--ink)}
.msgs .txt>p+p,.msgs .txt>p+ol,.msgs .txt>ol+p{margin-top:8px}
.msgs .txt .st{vertical-align:-1px}
.clist{border-top:1px solid var(--rule);margin-top:10px}
.clist>li{display:grid;grid-template-columns:2em minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.clist .n{font:13px/1.9 var(--mono);color:var(--muted)}
.clist b{font-weight:600}
.clist .meta{grid-column:2/4;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;color:var(--ink-2);font-size:14px}
.clist .act{grid-column:2/4;margin-top:6px}
.clist .view{font-size:14px;color:var(--muted)}
.composer{margin-top:20px}
.composer .row{display:flex;gap:10px}
.composer .row .input{flex:1 1 auto;min-width:0}
.composer .qr{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.card .panel-b .facts>div{grid-template-columns:7em minmax(0,1fr)}
.card .note{margin-top:12px}
.card .btn-row{margin-top:14px}
.card .notice{margin-top:14px}

/* Footer links */
.mfoot .links{margin:4px 0}
.mfoot .links a{min-height:44px;min-width:44px}

@media (max-width:1080px){
  .lhead,.lsum{grid-template-columns:minmax(0,1fr) 10rem 9.5rem}
  .lhead span:nth-child(2){display:none}
  .lsum .lmain{grid-column:1;grid-row:1}
  .lsum .lhost{grid-column:1;grid-row:2;padding:4px 0 0 19px}
  .lsum .lsell{grid-column:2;grid-row:1/3}
  .lsum .lprice{grid-column:3;grid-row:1/3}
}
@media (max-width:920px){
  .chatgrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"log" "card" "comp"}
  .chatgrid>.card{grid-row:auto}
  .card{margin-top:24px}
  .ldet{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .mbar .wrap{gap:0 12px}
  .mbar .tabs{flex:1 1 auto}
  .mbar .tabs ul{display:grid;grid-template-columns:1fr 1fr}
  .lhead{display:none}
  .lrows{border-top:2px solid var(--rule-2)}
  .lsum{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0}
  .lsum .lmain{grid-column:1;grid-row:1}
  .lsum .lprice{grid-column:2;grid-row:1}
  .lsum .lhost{grid-column:1/3;grid-row:2}
  .lsum .lsell{grid-column:1/3;grid-row:3;padding-left:19px}
  .ldet,.lpay{padding-left:0}
  .ldet .facts>div{grid-template-columns:6.5em minmax(0,1fr);gap:10px}
  .views{width:100%}
  .views .vlabel{flex:1 0 100%;padding:8px 12px 0}
  .views a{flex:1 1 auto;justify-content:center;border-left:0;border-top:1px solid var(--rule)}
  .views a+a{border-left:1px solid var(--rule)}
  .price-big{font-size:28px}
  .msgs>li{grid-template-columns:minmax(0,1fr);gap:2px}
  .msgs>li>.who{line-height:1.6}
  .clist>li{grid-template-columns:1.6em minmax(0,1fr) auto}
  .sform{flex-wrap:wrap}
  .sform .btn{flex:1 0 100%}
  /* Three-column cells become one column without the stray left rule (site.css keeps it at 720 px and below) */
  .mk .cells.c3>:nth-child(even){padding-left:0;border-left:0}
}
@media (max-width:359px){
  .views a{padding:0 8px;font-size:14px}
}

/* =========================================================================================================
   4. SURFACES: demo and sandbox, status page, service error pages, buyer alerts
   ========================================================================================================= */
/* Test network band and marks (sandbox): solid accent rules. Test is real software on a test network, not a sample (dashed) */
.testband{background:var(--soft);border-top:3px solid var(--accent);border-bottom:1px solid var(--accent);font-size:15px;color:var(--ink)}
.testband .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:48px;padding-top:6px;padding-bottom:6px}
.testband b{font-weight:600}
.tag-test{color:var(--accent);border-color:var(--accent);background:var(--bg)}
.panel.is-test{border-color:var(--accent)}
.panel.is-test>.panel-h{background:var(--soft);box-shadow:inset 3px 0 0 var(--accent)}
.panel.is-test .btn-row .btn{flex:1 1 12em}
.amt-test{font:500 15px var(--mono)}
.amt-test::after{content:" test";font:500 13px var(--mono);color:var(--accent)}

/* Real-money band and mark: as strong as the test band, in the notice colours; the warn word, never colour alone */
.realband{background:var(--notice);border-top:3px solid var(--warn);border-bottom:1px solid var(--warn);font-size:15px;color:var(--ink)}
.realband .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:48px;padding-top:6px;padding-bottom:6px}
.realband b{font-weight:600}
.tag-real{color:var(--warn);border-color:var(--warn);background:var(--bg)}
.addr{font:13.5px var(--mono);color:var(--ink-2)}
.code-tail{font:13px var(--mono);color:var(--ink-2)}

/* Mock band (simulated card provider): dashed, muted, with the Mock only word */
.mockband{background:var(--bg-2);border-top:3px dashed var(--muted);border-bottom:1px dashed var(--muted);font-size:15px;color:var(--ink)}
.mockband .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;min-height:48px;padding-top:6px;padding-bottom:6px}
.mockband b{font-weight:600}
.mockband .st{font-size:14px}

/* Demo steps: one block per step, its state word at the right */
.stp{border-top:2px solid var(--rule-2);padding:16px 0 26px}
.stp-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-bottom:10px}
.stp-h h2{font-size:20px}
.stp p{color:var(--ink-2);max-width:44em}
.stp p+p,.stp p+.btn-row,.stp .btn-row+p,.stp .hc+p{margin-top:12px}
.stp.is-done{padding-bottom:18px}
.stp.is-todo h2{color:var(--ink-2)}
.wl{display:grid;gap:8px;margin-top:12px;max-width:34em}
.wl .btn{justify-content:flex-start}
.conn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:12px}
.conn .mono{font-size:14px;overflow-wrap:anywhere}
.hc{display:flex;align-items:center;gap:12px;min-height:65px;max-width:300px;padding:10px 14px;border:1px dashed var(--muted);background:var(--bg-2);font-size:14px;color:var(--ink-2);margin-top:12px}
.agree{display:flex;align-items:flex-start;gap:12px;padding:12px 0;font-size:15px;color:var(--ink)}
.agree input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}

/* Result block and state galleries: state word first, then one notice, then facts */
.res-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:12px}
.res-h h2{font-size:20px}
.state-list{display:grid;gap:24px}
.state-list>section{border-top:2px solid var(--rule-2);padding-top:14px}
.state-list h2{font-size:18px;margin:6px 0 10px}
.state-list .notice{max-width:46em}
.state-list .small{margin-top:8px}
.trig{font:500 13px var(--mono);color:var(--muted);letter-spacing:.02em}

/* Status: banner, services, 30-day strip (shape by fill: solid, dashed, dotted) */
.sban{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center;padding:28px 0 20px}
.sban>svg{width:30px;height:30px;grid-row:1/3}
.sban.ok>svg{color:var(--live)}
.sban.part>svg{color:var(--warn)}
.sban.bad>svg{color:var(--fail)}
.sban h1{font-size:32px;line-height:1.15;letter-spacing:-0.02em}
.sban p{color:var(--ink-2);max-width:46em}
.days{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;margin:14px 0 8px}
.days li{height:34px;border-radius:2px}
.d-all{background:var(--live)}
.d-some{border:2px dashed var(--warn)}
.d-none{border:2px dotted var(--muted)}
.days-ax{display:flex;justify-content:space-between;font:13px var(--mono);color:var(--muted)}
.key{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-size:14px;color:var(--ink-2)}
.key span{display:inline-flex;align-items:center;gap:8px}
.key i{display:inline-block;width:14px;height:18px;border-radius:2px}
.dlist{margin-top:14px;border-top:1px solid var(--rule)}
.dlist li{display:grid;grid-template-columns:9em minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2)}
.dlist .mono{font-size:14px;color:var(--ink)}
.ago{display:block;font:13px var(--mono);color:var(--muted);margin-top:2px}

/* Service error page: code line, h1, one sentence, actions, then facts */
.err{padding:40px 0 48px;max-width:46em}
.err h1{font-size:36px;line-height:1.12;letter-spacing:-0.02em;margin:10px 0 12px}
.err p{color:var(--ink-2)}
.err .btn-row{margin-top:22px}
.err .facts{margin-top:28px}

/* Alert settings switch rows (real checkbox, title, line, optional number); alerts list; third-party frame placeholder */
.sw{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.sw>input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--ink)}
.sw label b{display:block;font-weight:600}
.sw label span{display:block;color:var(--ink-2);font-size:15px}
.sw .num{display:grid;gap:4px;margin-top:8px;max-width:14em;font-size:14px}
.alist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.alist li b{font-weight:600}
.alist .when{font:13px var(--mono);color:var(--muted);white-space:nowrap}
.frame{border:1px dashed var(--muted);padding:16px;background:var(--bg)}

@media (max-width:920px){
  .rules-aside{margin-top:28px}
}
@media (max-width:720px){
  .sban{padding:22px 0 16px}
  .sban h1{font-size:25px}
  .sban>svg{width:24px;height:24px}
  /* The 30-day strip becomes two rows of 15 taller bars, so each day is readable */
  .days{grid-template-columns:repeat(15,minmax(0,1fr));gap:4px}
  .days li{height:30px}
  .dlist li{grid-template-columns:minmax(0,1fr);gap:2px}
  .err{padding:28px 0 36px}
  .err h1{font-size:28px}
  .stp-h h2{font-size:18px}
  .alist li{grid-template-columns:minmax(0,1fr)}
  /* Real-money band shorter on phones (the full sentence stays in the notice before Pay) */
  .realband .rb-more{display:none}
}

/* =========================================================================================================
   5. SAMPLE CUES: only under .is-sample (on <body> of a design sample screen). A product page never sets .is-sample.
   ========================================================================================================= */
/* Inert controls: the real look plus a dashed ring (dashed = sample) and a muted fill, never the live ink button */
.is-sample .btn[disabled],.is-sample .ctl[disabled]{outline:1px dashed var(--muted);outline-offset:3px}
.is-sample .btn[disabled]{background:var(--bg-3);color:var(--ink-2);border-color:var(--rule)}
.is-sample .btn[disabled]:hover{background:var(--bg-3);border-color:var(--rule)}
.is-sample .inert-note{font-size:13.5px;color:var(--muted)}
.is-sample .inert-hint{margin:-8px 0 18px;font-size:13.5px;color:var(--muted)}
/* A solid tag on real figures inside a sample screen ("Real, as of ...") */
.is-sample .badge-real{display:inline-block;font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border:1px solid var(--rule-2);padding:1px 6px;border-radius:3px;margin-right:8px}
/* Sample bar: first thing on every sample screen (dashed and striped, like .panel.sample) */
.is-sample .sbar{background:repeating-linear-gradient(-45deg,var(--bg-2) 0 10px,var(--bg-3) 10px 20px);border-bottom:1px dashed var(--muted);color:var(--ink);font-size:14px}
.is-sample .sbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-height:40px;padding-top:6px;padding-bottom:6px}
.is-sample .sbar .badge-sample{background:var(--bg)}
.is-sample .sbar b{font-weight:600}
.is-sample .sbar a{display:inline-flex;align-items:center;min-height:44px;margin-left:auto}
.is-sample .sb-map{color:var(--ink)}
/* Order switch: an order drawn but not linked in the sample */
.is-sample .views .vin{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:var(--ink-2);font-size:15px;border-left:1px solid var(--rule);outline:1px dashed var(--muted);outline-offset:-5px}
/* Map pages: role columns, legend, tags in the map table */
.is-sample .roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--rule-2)}
.is-sample .roles>section{padding:18px 24px 20px 0;border-bottom:1px solid var(--rule)}
.is-sample .roles>section+section{padding-left:24px;border-left:1px solid var(--rule)}
.is-sample .roles h2{font-size:22px}
.is-sample .roles h3{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
.is-sample .roles p,.is-sample .roles li{color:var(--ink-2);font-size:15px}
.is-sample .roles ul.dash li{padding-left:14px;position:relative}
.is-sample .roles ul.dash li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:1.5px;background:var(--muted)}
.is-sample .roles .screens a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--rule)}
.is-sample .mapt td.c .tag{margin-left:4px}
.is-sample .legend-s{display:flex;flex-wrap:wrap;gap:6px 22px;margin:8px 0 16px;font-size:14px;color:var(--ink-2)}
/* The screens of one payment, in order */
.is-sample .walk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:8px 0 40px;padding:10px 14px;border:1px dashed var(--muted)}
.is-sample .walk ol{display:flex;flex-wrap:wrap;gap:0 4px}
.is-sample .walk a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;color:var(--ink-2);text-decoration:none;font-size:15px}
.is-sample .walk a:hover{text-decoration:underline;color:var(--ink)}
.is-sample .walk a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.is-sample .walk .n{font:13px var(--mono);color:var(--muted)}
.is-sample .endlink{margin-bottom:40px}
@media (max-width:920px){
  .is-sample .roles{grid-template-columns:minmax(0,1fr)}
  .is-sample .roles>section+section{padding-left:0;border-left:0}
}
@media (max-width:720px){
  .is-sample .views .vin{flex:1 1 auto;justify-content:center;border-top:1px solid var(--rule)}
  .is-sample .walk ol{display:grid;grid-template-columns:1fr 1fr;width:100%}
}
@media (max-width:480px){
  .is-sample .sbar a.sb-map{margin-left:0}
}
@media print{.is-sample .sbar{display:none}}

/* Back to payzilla.ai: ui-shell header() renders <a class="btn btn-2 btn-s back-home"><span><span class="bh-long">Back to </span>payzilla.ai</span></a>
   on every service page. It is never hidden; below 480px only the words "Back to " drop (aria-label keeps the full name). */
.back-home{display:inline-flex;white-space:nowrap}
@media (max-width:479px){.back-home .bh-long{display:none}}