/* CrypTap subpages: the shell every screen of the till is built from. Owned by the shell; page owners never edit it.
   Reuses css/core.css and css/chrome.css read-only. Scoped under .pg-* classes and #pg* ids; keyframes are prefixed pg-.
   Stacking (root context): skip link 61 · bar + nav 60 · menu sheet 59 · grain 55 · regions 0-2.
   Contents: tokens · region tokens · regions · grid and type · header pattern · form controls · buttons and links ·
             footage player · menu sheet · footer receipt · page transitions · phones · forced colours · print · reduced motion. */

/* ================================================================ tokens for fixed or sticky UI
   They follow html[data-tone] with the nav's 300ms linear transition (registered, so they interpolate). */
@property --pg-bg{syntax:'<color>';inherits:true;initial-value:#f7f8fa}
@property --pg-fg{syntax:'<color>';inherits:true;initial-value:#0e1726}
@property --pg-fg2{syntax:'<color>';inherits:true;initial-value:#5c6779}
@property --pg-rule{syntax:'<color>';inherits:true;initial-value:rgba(14,23,38,.16)}
html{--pg-bg:#f7f8fa;--pg-fg:#0e1726;--pg-fg2:#5c6779;--pg-rule:rgba(14,23,38,.16);
  /* chrome's --dock transition is kept in the list: transition is one property */
  transition:--dock .45s cubic-bezier(.16,1,.3,1),--pg-bg .3s linear,--pg-fg .3s linear,--pg-fg2 .3s linear,--pg-rule .3s linear}
html[data-tone=night]{--pg-bg:#0b1220;--pg-fg:#f2f2f2;--pg-fg2:rgba(242,242,242,.62);--pg-rule:rgba(242,242,242,.16)}
html[data-tone=set]{--pg-bg:rgb(216,236,252);--pg-fg:#0e1726;--pg-fg2:#5c6779;--pg-rule:rgba(14,23,38,.16)}
html[data-tone=blue]{--pg-bg:#0d2f78;--pg-fg:#fff;--pg-fg2:rgba(255,255,255,.72);--pg-rule:rgba(255,255,255,.2)}

/* ================================================================ region tokens: colours that depend on the region a part sits in
   Set on every [data-tone] element inside <body> and inherited, so the nearest region wins (nested regions included).
   Never write `[data-tone=night] .x`: html carries data-tone too and it follows the scroll, so that rule would repaint .x in
   every region on screen while a night region holds the nav. Parts read these with a light-tone fallback.
   On light tones focus is blue (gold on paper is 2.1:1); on night and blue it is gold, like every other focus ring. */
body [data-tone]{--pg-ink:var(--ink);--pg-ink2:var(--ink-2);--pg-dim:var(--ink-2);--pg-ink3:var(--ink-3);--pg-line:rgba(14,23,38,.4);
  --pg-key:rgba(14,23,38,.35);--pg-key-on:var(--ink);--pg-lit:var(--ink);--pg-lit-fg:var(--paper);--pg-focus:#1f6bc4;--pg-bad:var(--red);
  --pg-hover:var(--blue);--pg-edge:none}
body [data-tone=night]{--pg-ink:#f2f2f2;--pg-ink2:rgba(242,242,242,.72);--pg-dim:rgba(242,242,242,.62);--pg-ink3:rgba(242,242,242,.5);
  --pg-line:rgba(242,242,242,.4);--pg-key:rgba(242,242,242,.3);--pg-key-on:#f2f2f2;--pg-lit:#f2f2f2;--pg-lit-fg:#0b1220;--pg-focus:#d9ad12;
  --pg-bad:#ff6b5e;--pg-hover:#fff}
body [data-tone=blue]{--pg-ink:#fff;--pg-ink2:rgba(255,255,255,.72);--pg-dim:rgba(255,255,255,.72);--pg-ink3:rgba(255,255,255,.6);
  --pg-line:rgba(255,255,255,.45);--pg-key:rgba(255,255,255,.35);--pg-key-on:#fff;--pg-lit:#fff;--pg-lit-fg:#0d2f78;--pg-focus:#d9ad12;
  --pg-bad:#ff8a7e;--pg-hover:#fff;--pg-edge:inset 0 0 0 1px rgba(255,255,255,.55)}

/* ================================================================ chrome on subpages */
/* chrome fades the bar in at 'ready' to sit behind the homepage preloader; subpages have none, so it never blinks */
/* the current page's nav link: a 1px line 3px under the label. The first shadow paints the gap in the nav's own colour
   (transitioned with it), the second is the line; the 16px mask itself is untouched. */
#ctNav .ct-r>.pg-menu{display:none}
/* CT.roll fixes the outgoing line's width from offsetWidth (whole pixels), so a line can lose a fraction of a pixel and
   show an ellipsis for its 350ms exit ("READY FOR TA…", "SENDIN…", "ME…"). On subpages no rolled line truncates on its way
   out: the display, the shell's labels and any page roll. (Kernel bug, reported to core: measure with getBoundingClientRect.) */
body[data-page] .core-roll-o{overflow:visible;text-overflow:clip}
.pg-skip{position:fixed;left:var(--g);top:6px;z-index:61;display:flex;align-items:center;height:44px;padding:0 14px;
  background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--ink);font-family:var(--cond);font-weight:600;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pg-skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);box-shadow:none}
main.pg:focus{outline:none}

/* ================================================================ regions
   Every top-level region is section.pg-s[data-tone][data-status]. No negative margins and no overlap on a [data-tone]
   element: the kernel's handoff detection would read it as a pin handoff. */
.pg-s{position:relative;display:block;padding:clamp(72px,10vw,144px) var(--g)}
.pg-s[data-tone=night]{background:#0b1220;color:#f2f2f2}
.pg-s[data-tone=set]{background:var(--set-sky);color:var(--ink)}
.pg-s[data-tone=paper]{background:var(--paper);color:var(--ink)}
.pg-s[data-tone=blue]{background:#0d2f78;color:#fff}
/* chrome's nav margin-bottom (-76px) puts <main> at document y 0, under the bar */
main.pg>.pg-s:first-child{padding-top:calc(var(--bar-h) + var(--nav-h) + clamp(56px,8vw,112px))}

/* ================================================================ grid and type */
.pg-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px)}
.pg-h1{font-family:var(--sans);font-weight:400;font-size:clamp(42px,6.2vw,92px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
/* risen by PG.rise on 'ready'; the safety reveal shows it after 3s if no script runs */
html.js:not(.reduce) .pg-h1:not(.core-split){visibility:hidden;animation:core-reveal 0s 3s forwards}
.pg-h2,.pg h2[data-split]{font-family:var(--sans);font-weight:400;font-size:clamp(32px,4vw,58px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.pg-lead{font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--pg-ink2,var(--ink-2));max-width:46ch}

/* reading text: legal, the manifesto's notes, any long copy */
.pg-prose{font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.65;max-width:66ch;overflow-wrap:anywhere}
.pg-prose :is(p,ul,ol)+:is(p,ul,ol){margin-top:1em}
.pg-prose h3{margin:2.2em 0 .7em;font-family:var(--cond);font-weight:600;font-size:13px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
.pg-prose>h3:first-child{margin-top:0}
.pg-prose ul{list-style:none;margin:0;padding:0}
.pg-prose ul>li{position:relative;padding-left:22px}
.pg-prose ul>li::before{content:"";position:absolute;left:0;top:.78em;width:10px;height:1px;background:currentColor;opacity:.55}
.pg-prose ol{margin:0;padding-left:22px}
.pg-prose li+li{margin-top:6px}
.pg-prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:color .24s linear,text-decoration-color .24s linear}
@media (hover:hover){ .pg-prose a:hover{color:var(--pg-hover,var(--blue));text-decoration-color:currentColor} }

/* the gold label tab, the mono crumb, key/value rows, the hairline */
.pg-tab{display:inline-block;padding:4px 7px 3px;background:#d9ad12;color:#1a1200;font-family:var(--cond);font-weight:600;font-size:11px;
  line-height:16px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;vertical-align:top}
.pg-crumb{font-family:var(--mono);font-size:11px;line-height:23px;letter-spacing:.06em;color:var(--pg-ink3,var(--ink-3));text-transform:uppercase;white-space:nowrap}
.pg-meta{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.9;letter-spacing:.04em;text-transform:uppercase}
.pg-meta>div{display:flex;white-space:nowrap}
.pg-meta dt{display:flex;flex:1;min-width:0;color:var(--pg-dim,var(--ink-2))}
.pg-meta dt::after{content:"";flex:1;min-width:12px;margin:0 8px .6em;border-bottom:1px dotted currentColor;opacity:.55}
.pg-meta dd{margin:0}
.pg-rule{display:block;height:1px;margin:0;border:0;background:currentColor;opacity:.16}

/* ================================================================ page header (header.pg-s.pg-head, the first region of most pages) */
.pg-head{padding-bottom:0}
.pg-head .pg-kick{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 12px}
.pg-head .pg-h1{grid-column:1/10;margin-top:clamp(20px,2.4vw,32px)}
.pg-head .pg-lead{grid-column:1/7;grid-row:3;margin-top:clamp(24px,3vw,40px)}
.pg-head .pg-meta{grid-column:9/13;grid-row:3;align-self:end;margin-top:clamp(24px,3vw,40px)}
.pg-head>.pg-rule{margin-top:clamp(48px,6vw,88px);transform-origin:left center;transition:transform .9s var(--out)}
/* the rule draws from the left on 'ready' (chrome adds body.ready); the safety shows it after 3s if no script runs */
html.js:not(.reduce) body:not(.ready) .pg-head>.pg-rule{transform:scaleX(0);animation:pg-unfold 0s 3s forwards}
@keyframes pg-unfold{to{transform:none}}

/* ================================================================ form controls */
.pg-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.pg-field>label,.pg-field>.lab{color:var(--pg-dim,var(--ink-2));font-size:11.5px}
.pg-input,.pg-textarea{display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--pg-ink,var(--ink));
  font-family:var(--sans);font-weight:400;font-size:18px;-webkit-appearance:none;appearance:none;
  box-shadow:inset 0 -1px 0 var(--pg-line,rgba(14,23,38,.4));
  /* the long background/colour transitions hold off the browser's autofill tint, so a filled field stays one underline */
  transition:box-shadow .18s linear,background-color 600000s 0s,color 600000s 0s}
.pg-input:-webkit-autofill,.pg-textarea:-webkit-autofill{-webkit-text-fill-color:var(--pg-ink,var(--ink))}
.pg-input{height:48px;line-height:48px}
.pg-textarea{min-height:168px;padding:12px 0;line-height:1.5;resize:vertical}
.pg-input::placeholder,.pg-textarea::placeholder{color:var(--pg-ink3,var(--ink-3));opacity:1}
.pg-input:focus,.pg-textarea:focus{outline:none;box-shadow:inset 0 -2px 0 var(--pg-focus,#1f6bc4);caret-color:var(--pg-focus,#1f6bc4)}
.pg-input[aria-invalid=true],.pg-textarea[aria-invalid=true]{box-shadow:inset 0 -2px 0 var(--pg-bad,var(--red))}
.pg-err{margin-top:-2px;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.04em;color:var(--pg-bad,var(--red));text-transform:uppercase}

/* radio keys: real radios, visually hidden inside their label; a checked key is lit */
.pg-keys{min-width:0;margin:0;padding:0;border:0}
.pg-keys>legend{padding:0;margin-bottom:8px;color:var(--pg-dim,var(--ink-2));font-size:11.5px}
.pg-keys-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}
.pg-key{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:72px;padding:10px 12px;
  border:1px solid var(--pg-key,rgba(14,23,38,.35));cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:transform 80ms linear,border-color .18s linear}
.pg-key>input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pg-key-i{font-family:var(--mono);font-size:10px;line-height:1;letter-spacing:.04em;opacity:.72}
.pg-key-l{font-family:var(--cond);font-weight:600;font-size:12px;line-height:1.25;letter-spacing:.08em;text-transform:uppercase}
@media (hover:hover){ .pg-key:hover{border-color:var(--pg-key-on,var(--ink))} }
.pg-key:has(>input:checked){background:var(--pg-lit,var(--ink));color:var(--pg-lit-fg,var(--paper));border-color:var(--pg-lit,var(--ink));box-shadow:inset 0 3px 0 #d9ad12}
.pg-key:has(>input:checked) .pg-key-i{opacity:.62}
.pg-key:has(>input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.pg-key:active{transform:translateY(1px)}

/* busy: a form or button while the till is working */
[aria-busy=true],button[disabled]{opacity:.5;cursor:progress}

/* ================================================================ buttons and links */
/* .btn is core's (CT.btn decorates it). The outline variant keeps the label roll and the NFC arcs. */
.btn.pg-out{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
/* blue on blue needs an edge (as chrome's order bar does on the blue scene) */
.btn:not(.pg-out){box-shadow:var(--pg-edge,none)}
html[data-tone=blue] #pgSheet .btn{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.pg-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-family:var(--cond);font-weight:600;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.pg-arr{flex:none;width:12px;height:10px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .38s var(--out)}
@media (hover:hover){ .pg-link:hover .pg-arr{transform:translateX(3px)} }
.pg-link:focus-visible .pg-arr{transform:translateX(3px)}

/* ================================================================ footage player (PG.reel): base parts, pages style the rest */
.pg-reel-v{display:block;width:100%;max-width:540px;height:auto;aspect-ratio:540/960;background:#0b1220;object-fit:cover}
.pg-reel-seq .pg-reel-f{opacity:.4;transition:opacity .18s linear}
.pg-reel-seq .pg-reel-f.pg-on{opacity:1}
/* a progress rail: span.pg-bar > i. PG.reel scales the <i> (pass the <i>s as opts.bars) */
.pg-bar{position:relative;display:block;height:1px}
.pg-bar::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.2}
.pg-bar>i{position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left center}
.pg-cap{display:flex;align-items:center;gap:12px;min-height:44px;width:100%;text-align:left;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;opacity:.62;transition:opacity .24s linear;-webkit-tap-highlight-color:transparent}
.pg-cap::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor}
.pg-cap[aria-current=step]{opacity:1}
.pg-cap[aria-current=step]::before{background:#d9ad12;box-shadow:none}
@media (hover:hover){ .pg-cap:hover{opacity:1} }
.pg-tg{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--cond);font-weight:600;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.pg-tg::before{content:"";flex:none;width:8px;height:10px;box-shadow:inset 2px 0 0 currentColor,inset -2px 0 0 currentColor}
.pg-tg[data-s=play]::before{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;box-shadow:none}
.pg-tg-l{display:inline-block;min-width:5ch}

/* ================================================================ menu sheet (below 980px) */
#pgSheet{position:fixed;left:0;right:0;bottom:0;top:var(--pg-top,76px);z-index:59;display:flex;flex-direction:column;
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:24px var(--g) calc(32px + env(safe-area-inset-bottom));background:var(--pg-bg);color:var(--pg-fg)}
#pgSheet[hidden]{display:none}
html.pg-lock{overflow:hidden;scrollbar-gutter:stable}
/* a drag that starts on the bar or the nav must not scroll the page behind the sheet (iOS ignores overflow there) */
html.pg-lock #ctNav{touch-action:none}
.pg-sh-list{list-style:none;margin:0;padding:0}
.pg-sh-list>li+li{border-top:1px solid var(--pg-rule)}
.pg-sh-list a{display:flex;align-items:center;height:54px;-webkit-tap-highlight-color:transparent}
.pg-sh-m{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;flex:1;min-width:0}
.pg-sh-in{display:flex;align-items:baseline;gap:14px;padding-bottom:.14em;margin-bottom:-.14em}
.pg-sh-i{flex:none;width:22px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--pg-fg2)}
.pg-sh-n{font-family:var(--sans);font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-.025em;white-space:nowrap}
.pg-sh-list a[aria-current=page] .pg-sh-n{color:var(--blue)}
.pg-sh-list a[aria-current=page] .pg-sh-n::after{content:"You are here";margin-left:14px;font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;vertical-align:.35em;color:var(--pg-fg2)}
.pg-sh-legal a[aria-current=page]{color:var(--pg-fg);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){ .pg-sh-list a:hover .pg-sh-n{color:var(--blue)} html:is([data-tone=night],[data-tone=blue]) .pg-sh-list a:hover .pg-sh-n{color:#fff} }
.pg-sh-list a:focus-visible{outline-offset:-2px}
.pg-sh-ft{margin-top:auto;padding-top:28px}
.pg-sh-ord.btn{display:flex;width:100%;height:52px}
.pg-sh-legal{display:flex;flex-wrap:wrap;align-items:center;margin-top:10px;font-family:var(--sans);font-size:14px;line-height:1.3;color:var(--pg-fg2)}
.pg-sh-ig{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pg-sh-legal a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
/* the separator travels with the link before it, so a wrapped row never starts with one (silent to assistive tech) */
.pg-sh-legal a:not(:last-child)::after{content:"·";content:"·" / "";padding:0 .7em;color:var(--pg-fg2)}
@media (hover:hover){ .pg-sh-legal a:hover{color:var(--pg-fg)} }

/* ================================================================ footer receipt: a copy of the homepage's footer.cls-foot
   Same rows as css/close.css + index.html (plus HOME), each link's address revealed on paper (.pg-u data-u, print only),
   and PRINT THIS RECEIPT (page.js), which prints the receipt alone on a till roll even where a page has its own print sheet. */
.pg-foot{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--paper);color:var(--ink);
  padding:clamp(40px,8vh,80px) var(--g) calc(clamp(64px,12vh,120px) + env(safe-area-inset-bottom))}
.pg-foot .pg-slot{flex:none;display:block;width:min(388px,calc(100% + var(--g)));height:1px;background:var(--ink)}
.pg-foot .pg-paper{width:min(340px,100%);filter:drop-shadow(0 1px 0 rgba(14,23,38,.06)) drop-shadow(0 14px 18px rgba(14,23,38,.10))}
.pg-foot .rcpt{font-size:12px;padding:18px 14px 8px}
.pg-foot .rcpt-rl{min-height:1.9em}
.pg-foot .rcpt-c{letter-spacing:.12em;white-space:normal;text-wrap:balance}
/* phones (iPhone SE is the tight one): every info row behaves like core's .rcpt-wrap, so a long label wraps and the value drops to its
   own right-aligned line instead of printing over it (desktop keeps the single-line rows of the 340px paper) */
@media (max-width:979.98px){
.pg-foot div.rcpt-lead{white-space:normal;flex-wrap:wrap;column-gap:0;align-items:flex-end}
.pg-foot div.rcpt-lead>span:first-child{display:block;flex:1 1 0;min-width:min(100%,12ch);white-space:normal;overflow:hidden}
@supports (overflow:clip){ .pg-foot div.rcpt-lead>span:first-child{overflow:clip} }
.pg-foot div.rcpt-lead>span:first-child::after{content:"";display:inline-block;flex:none;vertical-align:baseline;width:calc(100vw + 24px);min-width:0;height:0;margin:0 -100vw 0 8px;border-bottom:1px dotted currentColor;opacity:.55}
.pg-foot div.rcpt-lead>span:last-child:not(:first-child){white-space:nowrap;margin-left:auto;padding-left:8px;text-align:right}
}
.pg-foot a.rcpt-rl,.pg-foot button.rcpt-rl{width:100%;color:inherit;font:inherit;line-height:inherit;text-align:left}
.pg-foot a.rcpt-rl>span:last-child{transition:transform .38s var(--out)}
@media (hover:hover){
  .pg-foot a.rcpt-rl:hover{color:var(--blue)}
  .pg-foot a.rcpt-rl:hover>span:last-child{transform:translateX(3px)}
  .pg-foot button.pg-print:hover{color:var(--blue)}
}
.pg-foot button.pg-print{justify-content:center;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:rgba(26,26,26,.4);-webkit-tap-highlight-color:transparent}
.pg-foot .rcpt :focus-visible{outline-offset:1px}
.pg-foot .rcpt b{font-weight:400}
/* phones: every link row and the print button is a 44px touch target (the dotted leader still runs between), as on the homepage */
@media (max-width:979.98px){
  .pg-foot a.rcpt-rl,.pg-foot button.pg-print{min-height:44px;align-items:center}
  .pg-foot a.rcpt-rl>span:first-child::after{margin-bottom:0;align-self:center}
}
/* any .rcpt before PG.printIn (JS adds .pg-pre; reduced motion never does) */
.pg-pre>*{clip-path:inset(0 0 100% 0)}

/* ================================================================ page transitions: the paper feed (subpages only opt in) */
@view-transition{navigation:auto}
#ctNav{view-transition-name:ct-nav}
::view-transition-old(ct-nav){display:none}
::view-transition-new(ct-nav){animation:none}
::view-transition-group(ct-nav){animation-duration:.6s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:pg-feed .6s cubic-bezier(.16,1,.3,1) both}
@keyframes pg-feed{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* ================================================================ phones and small tablets */
@media (max-width:979.98px){
  /* the phone nav reads mark · LED · status · MENU; without script there is no sheet, so Order now stays */
  html.js #ctNav .ct-r>.pg-menu{display:flex}
  html.js #ctNav .ct-r>.ct-ord{display:none}
  .pg-s{padding:64px var(--g)}
  main.pg>.pg-s:first-child{padding-top:calc(76px + 40px)}
  .pg-head{padding-bottom:0}
  .pg-head>.pg-rule{margin-top:48px}
  /* every 12-column grid collapses to one column; side columns fall into the flow */
  .pg-grid{grid-template-columns:minmax(0,1fr)}
  .pg-grid>*{grid-column:1/-1!important;grid-row:auto!important}
  .pg-head .pg-meta{align-self:start}
  .pg-prose{font-size:16px;line-height:1.6}
}
@media (min-width:980px){ #pgSheet{display:none!important} }

/* ================================================================ forced colours (Windows contrast themes drop box-shadows and backgrounds)
   A field keeps its one line, focus and a lit key stay visible, the rails and rules stay drawn. */
@media (forced-colors:active){
  .pg-input,.pg-textarea{border-bottom:1px solid CanvasText}
  .pg-input:focus,.pg-textarea:focus{border-bottom:2px solid Highlight}
  .pg-key:has(>input:checked){forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .pg-rule,.pg-bar>i,.pg-bar::before{forced-color-adjust:none;background:CanvasText}
  .pg-cap[aria-current=step]::before{forced-color-adjust:none;background:Highlight}
  .btn,.pg-tab{border:1px solid}
}

/* ================================================================ print: nothing stays hidden behind a reveal (pages add their own print sheets) */
@media print{
  #pgSheet,.pg-skip,.ct-grain{display:none!important}
  .pg-pre>*,.pg-roll{clip-path:none!important}
  .pg-h1,.pg h2[data-split]{visibility:visible!important}
  .pg .ln>span{transform:none!important}
  /* the receipt on paper (as css/close.css): black on white, dashed rules, each link's address in place of its arrow */
  .pg-foot .pg-paper{filter:none!important;box-shadow:none!important}
  .pg-foot .rcpt{background:#fff!important;color:#000!important;box-shadow:none!important}
  .pg-foot .rcpt *{color:#000!important;box-shadow:none!important;text-shadow:none!important;clip-path:none!important;transform:none!important;opacity:1!important}
  .pg-foot .rcpt-dash{background:none!important;border-top:1px dashed #000;height:0!important;min-height:0!important;margin:.8em 0}
  .pg-foot .rcpt-lead>span:first-child::after{border-bottom-color:#000!important;opacity:1!important}
  .pg-foot .rcpt-tear,.pg-foot .pg-print,.pg-foot .pg-slot{display:none!important}
  .pg-foot .pg-u b{display:none}
  .pg-foot .pg-u::after{content:attr(data-u)}
  /* a long address drops to its own line, right-aligned, instead of running off the roll */
  .pg-foot a.rcpt-rl{flex-wrap:wrap;min-height:0!important}
  .pg-foot a.rcpt-rl>span:first-child{flex:1 0 auto;min-width:auto}
  .pg-foot a.rcpt-rl>span:last-child{margin-left:auto}
  /* PRINT THIS RECEIPT (html.pg-print-rcpt, set by page.js around window.print): only the receipt, on a till roll.
     It outranks a page's own print sheet (the legal pages print only the document and hide the footer). */
  html.pg-print-rcpt,html.pg-print-rcpt body{background:#fff!important;color:#000!important}
  html.pg-print-rcpt body>:not(footer.pg-foot),html.pg-print-rcpt footer.pg-foot .sf{display:none!important}
  html.pg-print-rcpt footer.pg-foot{display:block!important;page:pg-rcpt;padding:0!important;background:#fff!important;min-height:0!important}
  html.pg-print-rcpt footer.pg-foot .pg-paper{width:100%!important}
  html.pg-print-rcpt footer.pg-foot .rcpt{padding:0!important;font-size:8pt!important;line-height:1.75!important}
}
/* the till roll, the same paper as css/close.css. Its margin is important: a page's own @page margin (legal) loads later
   and would otherwise squeeze the roll */
@page pg-rcpt{size:80mm 297mm;margin:4mm!important}

/* ================================================================ reduced motion */
html.reduce .pg-arr,html.reduce .pg-foot a.rcpt-rl>span:last-child,html.reduce .pg-head>.pg-rule{transition:none}
html.reduce .pg-link:is(:hover,:focus-visible) .pg-arr,html.reduce .pg-foot a.rcpt-rl:hover>span:last-child{transform:none}
html.reduce .pg-key{transition:none}
html.reduce .pg-key:active{transform:none}
html.reduce .pg-reel-seq .pg-reel-f{transition:none}
html.reduce .pg-cap{transition:none}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}