/* SOFT 17 — Faucet: "the cashier" (local and testnet builds only).
   A title block with the cashier's window card, two ivory chip vouchers with perforated stubs,
   and the back of the voucher beside a thermal gas chit. Everything sits in the pages layer;
   shared objects come from style.css. */
@layer pages{

  /* ───────── title block and the cashier's window ───────── */
  .cashier-intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--gap-out);padding-block-end:clamp(var(--space-xl),5vw,var(--space-2xl))}
  .cashier-title{flex:1 1 420px;display:flex;flex-direction:column;gap:var(--space-s);min-inline-size:0;max-inline-size:760px}
  .cashier-title .h1{max-inline-size:none}
  .cashier-window{flex:0 1 420px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-s);min-inline-size:0;padding:var(--pad-compact) var(--pad)}
  .cashier-window__stamp{margin-block:var(--space-3xs)}
  .cashier-window__text{color:var(--fg);max-inline-size:36ch}
  .cashier-window__action{margin-block-start:var(--space-3xs)}

  /* ───────── the chip vouchers ───────── */
  .cashier-vouchers{padding-block-end:var(--section)}
  .vouchers{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap-out);max-inline-size:640px}
  @media (min-width:1024px){.vouchers{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap-out);max-inline-size:none}}
  .voucher__ticket{--stub:112px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);block-size:100%;border-radius:var(--r-ticket)}
  .voucher .drop{block-size:100%}
  .voucher__body{min-inline-size:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-s);padding:var(--pad)}
  .voucher__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-xs);align-self:stretch;padding-block-end:var(--space-xs);border-block-end:1px solid var(--rule)}
  .voucher__no{color:var(--red)}
  .voucher__name{font:400 var(--fs-title)/1.15 var(--font-serif);letter-spacing:-.01em}
  .voucher__amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-xs);margin-block-start:calc(-1 * var(--space-3xs))}
  .voucher__figure{font-size:clamp(56px, 31px + 3.2vw, 88px);line-height:.85;letter-spacing:-.04em;white-space:nowrap}
  .voucher__unit{font:600 20px/1 var(--font-sans);color:var(--fg-2)}
  .voucher__for{font:italic 400 var(--fs-body)/1.45 var(--font-serif);color:var(--fg-2)}
  .voucher__lines{align-self:stretch;gap:var(--space-2xs);padding-block:var(--space-3xs);font-size:var(--fs-body);line-height:var(--lh-body)}
  /* proportional figures: tabular commas and points print as wide as digits in Schibsted */
  .voucher__value,#gas-balance{font-variant-numeric:proportional-nums;white-space:nowrap}
  .voucher__value{font-weight:600}
  .voucher__actions{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-block-start:auto;padding-block-start:var(--space-2xs)}
  .voucher__mint{min-inline-size:216px}
  .voucher__ticket .btn--ghost:hover{background-color:rgb(20 10 15 / .06)}
  /* disabled ink buttons on paper print as a dashed outline (same as the raffle ticket) */
  .voucher__ticket .btn:disabled{opacity:1;box-shadow:none;border:1.5px dashed rgb(20 10 15 / .4);background-color:transparent;color:var(--sepia)}
  .voucher__ticket .btn:disabled .i{opacity:.7}
  .voucher[data-state="pending"] .voucher__mint:disabled{border-style:solid;border-color:var(--bar);color:var(--bar);cursor:progress}
  .voucher__status{min-block-size:var(--lh-14);font-size:var(--fs-14);font-weight:500;line-height:var(--lh-14);color:var(--sepia);overflow-wrap:anywhere}
  .voucher__status:empty{display:none}
  .voucher__status.is-error{color:var(--suit)}
  .voucher__status a{color:var(--bar);font-weight:600;text-decoration:underline;text-decoration-color:var(--cover);text-decoration-thickness:2px;text-underline-offset:4px}
  .voucher__status a:hover{color:var(--cover)}
  /* the stub: a chip and the admit line, past a perforation */
  .voucher__stub{display:flex;flex-direction:column;align-items:center;gap:var(--space-m);padding:var(--pad) var(--space-s);border-inline-start:2px dashed var(--perf-paper)}
  .voucher__chip{--chip:68px;font-size:calc(var(--chip) * .26)}
  .voucher__admit{writing-mode:vertical-rl;font:800 16px/1 var(--font-ticket);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
  /* CLOSED (faucet off) or MINTED (voucher used for today), stamped over the body's top right */
  .voucher__stamp{position:absolute;z-index:1;inset-block-start:calc(var(--pad) + 44px);inset-inline-end:calc(var(--stub) + var(--pad-compact));pointer-events:none}
  .voucher__stamp.stamp--paid{color:var(--cover)}

  /* perforated vouchers: 10px half-circle notches where the stub joins the body */
  @supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
    .voucher__ticket{
      -webkit-mask:radial-gradient(circle 10px at calc(100% - var(--stub) + 1px) 0,#0000 95%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - var(--stub) + 1px) 100%,#0000 95%,#000) bottom/100% 51% no-repeat;
      mask:radial-gradient(circle 10px at calc(100% - var(--stub) + 1px) 0,#0000 95%,#000) top/100% 51% no-repeat,radial-gradient(circle 10px at calc(100% - var(--stub) + 1px) 100%,#0000 95%,#000) bottom/100% 51% no-repeat}
  }

  /* phones: the stub becomes a 72px strip under the body, notched left and right; buttons take the full width */
  @media (max-width:639.98px){
    .voucher__ticket{grid-template-columns:minmax(0,1fr)}
    .voucher__body{padding:var(--space-m) var(--space-m) var(--space-m)}
    .voucher__actions{flex-direction:column;align-self:stretch}
    .voucher__actions .btn{inline-size:100%;min-inline-size:0}
    .voucher__stub{flex-direction:row;justify-content:space-between;gap:var(--space-xs);min-block-size:72px;padding:var(--space-xs) var(--space-m);border-inline-start:0;border-block-start:2px dashed var(--perf-paper)}
    .voucher__chip{--chip:56px}
    .voucher__admit{writing-mode:horizontal-tb}
    .voucher__stamp{inset-block-start:calc(var(--space-m) + 40px);inset-inline-end:var(--space-m)}
    @supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
      .voucher__ticket{
        -webkit-mask:radial-gradient(circle 10px at 0 calc(100% - 71px),#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% calc(100% - 71px),#0000 95%,#000) right/51% 100% no-repeat;
        mask:radial-gradient(circle 10px at 0 calc(100% - 71px),#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% calc(100% - 71px),#0000 95%,#000) right/51% 100% no-repeat}
    }
  }

  /* ───────── the back of the voucher and the gas chit ───────── */
  .cashier-back{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--gap-out);padding-block-end:var(--section)}
  .cashier-print{flex:1 1 420px;display:flex;flex-direction:column;gap:var(--space-s);min-inline-size:0;max-inline-size:62ch;color:var(--fg-2)}
  .cashier-print .title{color:var(--fg)}
  .cashier-print strong{color:var(--fg)}
  .cashier-print__links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-l);margin-block-start:var(--space-2xs)}
  .cashier-print__quiet{text-decoration-color:var(--hair-strong)}
  .gas-chit{flex:0 1 380px;min-inline-size:0}
  .gas-chit__paper{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs);padding:calc(var(--pad-compact) + 8px) var(--pad-compact) var(--pad-compact)}
  .gas-chit__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-xs);align-self:stretch;padding-block-end:var(--space-xs);border-block-end:1px solid var(--rule)}
  .gas-chit__net{color:var(--red)}
  .gas-chit__lead{font:400 22px/1.2 var(--font-serif);letter-spacing:-.01em}
  .gas-chit__lines{align-self:stretch}
  .gas-chit__text{font-size:var(--fs-15);line-height:var(--lh-15);color:var(--fg-2)}
  .gas-chit__action{align-self:stretch;margin-block-start:var(--space-3xs);white-space:normal;text-align:center}
  .gas-chit__action:disabled{opacity:1;border:1.5px dashed rgb(20 10 15 / .4);background-color:transparent;color:var(--sepia)}
  .gas-chit__action[aria-busy="true"]:disabled{border-style:solid;border-color:var(--bar);color:var(--bar);cursor:progress}
  .gas-chit__status{font-size:var(--fs-14);font-weight:500;line-height:var(--lh-14);color:var(--sepia)}
  .gas-chit__status:empty{display:none}
  .gas-chit__status.is-error{color:var(--suit)}
  @media (max-width:767.98px){.gas-chit{flex-basis:100%;max-inline-size:420px}}
}