/* chrome: the nav, the standby-dot preloader, grain, the homepage menu sheet and the plain
   site footer (.sf) every page shares. Owner: chrome. Scoped under #ct* ids and .ct-* classes; keyframes are prefixed chrome-.
   The subpages load this file too: every homepage-only rule sits under html.ct-home (set in index.html's head before first paint).
   Stacking (root context): sections 2-3 · grain 55 · menu sheet 59 · nav 60 · preloader 100 · dot 101. */

/* ---------------------------------------------------------------- preloader: one standby LED on night */
#ctPre{position:fixed;inset:0;z-index:100;background:#0b1220;
  animation:chrome-safety .4s linear 4s forwards}             /* if chrome.js never runs, the page still opens */
#ctPre.ct-out{opacity:0;pointer-events:none;transition:opacity .4s linear}
#ctDot{position:fixed;z-index:101;left:50%;top:52%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#d9ad12;pointer-events:none;
  animation:chrome-standby 1.6s ease-in-out infinite,chrome-safety .4s linear 6s forwards}
#ctDot.ct-off{transform:scale(0);transition:transform .12s cubic-bezier(.7,0,.84,0)}
#ctDot:not(.ct-set){visibility:hidden}
html.seen #ctPre,html:not(.js) #ctPre,html:not(.js) #ctDot{display:none}
@keyframes chrome-standby{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes chrome-safety{to{opacity:0;visibility:hidden}}

/* ---------------------------------------------------------------- nav: a solid bar whose left side is the terminal's display */
#ctNav{--ct-bg:#0b1220;--ct-fg:#f2f2f2;--ct-ok:#3ccf7a;--ct-no:#ff6b5e;--ct-dim:rgba(242,242,242,.55);
  position:sticky;top:0;z-index:60;height:var(--nav-h);margin-bottom:calc(-1 * (var(--bar-h) + var(--nav-h)));
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;padding:0 var(--g);
  background:var(--ct-bg);color:var(--ct-fg);transition:background-color .3s linear,color .3s linear}
html[data-tone=set] #ctNav{--ct-bg:rgb(216,236,252);--ct-fg:#0e1726;--ct-ok:#17865c;--ct-no:#b3261e;--ct-dim:rgba(14,23,38,.55)}
html[data-tone=paper] #ctNav{--ct-bg:#f7f8fa;--ct-fg:#0e1726;--ct-ok:#17865c;--ct-no:#b3261e;--ct-dim:rgba(14,23,38,.55)}
html[data-tone=blue] #ctNav{--ct-bg:#0d2f78;--ct-fg:#fff;--ct-dim:rgba(255,255,255,.55)}
#ctNav :focus-visible{outline-offset:-5px}
#ctNav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.12;pointer-events:none}

/* left: brand, LED, status */
.ct-l{display:flex;align-items:center;min-width:0;height:var(--nav-h)}
#ctBrand{flex:none;display:flex;align-items:center;height:var(--nav-h);padding:0 8px;margin:0 -8px;font-family:var(--mark);font-size:19px;line-height:1;
  -webkit-tap-highlight-color:transparent}
.ct-word{display:block;transform:translateY(-1px)}
.ct-mark{display:none;width:20px;height:20px}
.ct-disp{display:flex;align-items:center;min-width:0;margin-left:16px}
/* The LED is always opaque: its idle state is a dim colour (--ct-dim), never a lowered opacity, and a state change is a hard
   switch, like a real LED: no transition, so no frame ever shows an olive or brown in-between colour. */
#ctLed{flex:none;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--ct-dim)}
#ctLed[data-t=gold]{background:#d9ad12;animation:chrome-blink .8s steps(2,jump-none) infinite}
#ctLed[data-t=green]{background:var(--ct-ok)}
#ctLed[data-t=red]{background:var(--ct-no)}
@keyframes chrome-blink{to{opacity:.22}}
#ctStatus{display:block;min-width:0;max-width:calc(34 * (1ch + .08em) + 2px);white-space:nowrap;
  font-family:var(--mono);font-weight:500;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}

/* right: links roll their label on hover (380ms --out, the .btn grammar) */
.ct-r{display:flex;align-items:center;gap:22px;height:var(--nav-h)}
.ct-r .lab{font-size:11.5px;line-height:16px}
.ct-a{display:flex;align-items:center;gap:8px;height:var(--nav-h);padding:0 8px;margin:0 -8px;-webkit-tap-highlight-color:transparent}
.ct-t{display:block;height:16px;overflow:hidden}
.ct-t>span{position:relative;display:block;transition:transform .38s var(--out)}
.ct-t>span::after{content:attr(data-t);position:absolute;left:0;top:100%}
.ct-a:focus-visible .ct-t>span{transform:translateY(-100%)}
.ct-nfc{flex:none;width:12px;height:12px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.ct-nfc path{transition:stroke .24s linear}
.ct-ord:focus-visible .ct-nfc path{stroke:#d9ad12}
@media (hover:hover){
  .ct-a:hover .ct-t>span{transform:translateY(-100%)}
  .ct-ord:hover .ct-nfc path{stroke:#d9ad12}
  .ct-ord:hover .ct-a2{transition-delay:80ms}
  .ct-ord:hover .ct-a3{transition-delay:160ms}
}

/* ---------------------------------------------------------------- grain: one 160px tile, moved (never repainted) at 8fps */
.ct-grain{position:fixed;inset:-160px;z-index:55;display:none;pointer-events:none;opacity:.06;
  background-repeat:repeat;background-size:160px 160px;will-change:transform;
  animation:chrome-grain .5s steps(1,end) infinite}
html[data-tone=night] .ct-grain.ct-on,html[data-tone=set] .ct-grain.ct-on{display:block}
html.ct-hidden .ct-grain{animation-play-state:paused}
@keyframes chrome-grain{
  0%,100%{transform:translate3d(0,0,0)}
  25%{transform:translate3d(-83px,47px,0)}
  50%{transform:translate3d(61px,-109px,0)}
  75%{transform:translate3d(-37px,-71px,0)}
}

/* ---------------------------------------------------------------- phones and small tablets */
@media (max-width:979.98px){
  .ct-word{display:none}
  .ct-mark{display:block}
  #ctNav{column-gap:12px}
  #ctStatus{font-size:10.5px;max-width:calc(28 * (1ch + .08em) + 2px)}
  .ct-r>:not(.ct-ord){display:none}
  .ct-ord .ct-nfc{display:none}
}
@media (max-width:369.98px){
  #ctStatus{font-size:10px;letter-spacing:.06em;max-width:calc(28 * (1ch + .06em) + 2px)}   /* 28 characters still fit at 360 */
}

/* ---------------------------------------------------------------- reduced motion */
html.reduce #ctDot{animation:chrome-safety .2s linear 6s forwards;opacity:1}
html.reduce #ctDot.ct-off{transform:none;opacity:0;transition:opacity .2s linear}
html.reduce #ctPre.ct-out{transition-duration:.2s}
html.reduce #ctLed{animation:none}
html.reduce .ct-grain{display:none!important}
html.reduce .ct-t>span{transition:none}
html.reduce .ct-a:is(:hover,:focus-visible) .ct-t>span{transform:none}

/* ================================================================ homepage only (html.ct-home) */
#ctMenu{display:none}
html.ct-home{-webkit-tap-highlight-color:transparent}


/* the aperture's pour: a disc of the next tone inside the nav, clipped from sky's 'iris' event, under the nav's own content */
/* It is a replica of the nav in the next tone (a clone of the nav's two halves, made when the pour starts and dropped when it
   ends), laid over the nav and clipped to the circle, so inside the circle the bar, its text and its LED are already the
   next tone. aria-hidden and inert; pointer-events none. */
.ct-iris{position:absolute;inset:0;z-index:2;display:none;pointer-events:none;
  grid-template-columns:inherit;column-gap:inherit;align-items:center;padding:inherit;background:var(--ct-bg);color:var(--ct-fg)}
.ct-iris.ct-on{display:grid}
.ct-iris[data-t=night]{--ct-bg:#0b1220;--ct-fg:#f2f2f2;--ct-ok:#3ccf7a;--ct-no:#ff6b5e;--ct-dim:rgba(242,242,242,.55)}
.ct-iris[data-t=set]{--ct-bg:rgb(216,236,252);--ct-fg:#0e1726;--ct-ok:#17865c;--ct-no:#b3261e;--ct-dim:rgba(14,23,38,.55)}
.ct-iris[data-t=paper]{--ct-bg:#f7f8fa;--ct-fg:#0e1726;--ct-ok:#17865c;--ct-no:#b3261e;--ct-dim:rgba(14,23,38,.55)}
.ct-iris[data-t=blue]{--ct-bg:#0d2f78;--ct-fg:#fff;--ct-ok:#3ccf7a;--ct-no:#ff6b5e;--ct-dim:rgba(255,255,255,.55)}

/* pressed: ink fill, paper text, on pointerdown for at least 120ms (chrome.js .ct-press) */
html.ct-home #ctMenu.ct-press{background:var(--ct-fg);color:var(--ct-bg)}
html.ct-home #ctBrand.ct-press{opacity:.55}

@media (max-width:979.98px){
  /* mark · LED · status · MENU, as on the subpages, with the notch's insets in the padding */
  html.ct-home #ctNav{padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
  html.ct-home #ctBrand{position:relative;width:44px;padding:0 12px;margin:0 -12px}
  html.ct-home #ctBrand::after,html.ct-home #ctMenu::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0}
  html.js.ct-home #ctNav .ct-r>#ctMenu{position:relative;display:flex;min-width:44px;justify-content:center}
  html.js.ct-home #ctNav .ct-r>.ct-ord{display:none}
  /* the display: Plex Mono 11px, never ellipsised; 28 characters fit beside MENU at 320px */
  html.ct-home #ctStatus{max-width:none;overflow:visible;font-size:11px;letter-spacing:.06em}
  html.ct-home #ctStatus.ct-long{letter-spacing:.02em}
  html.ct-home #ctStatus .core-roll-i{text-overflow:clip}
}
@media (max-width:374.98px){
  /* 320: 20 mark + 12 + 14 LED + 194 status (28 ch) + 8 gap + 33 MENU = 281 of 284 */
  html.ct-home #ctNav{column-gap:8px}
  html.ct-home .ct-disp{margin-left:12px}
  html.ct-home #ctStatus{font-size:10.5px}
}
@media (max-width:599.98px){
  html.ct-home .ct-grain{display:none!important;animation:none}
}

/* ---------------------------------------------------------------- the menu sheet: a clone of the subpages' #pgSheet */
#ctSheet{--sh-bg:#f7f8fa;--sh-fg:#0e1726;--sh-fg2:#5c6779;--sh-rule:rgba(14,23,38,.16);
  position:fixed;left:0;right:0;bottom:0;top:var(--ct-top,76px);z-index:59;display:flex;flex-direction:column;
  overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:24px max(var(--g),env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(var(--g),env(safe-area-inset-left,0px));
  background:var(--sh-bg);color:var(--sh-fg)}
#ctSheet[hidden]{display:none}
html[data-tone=night] #ctSheet{--sh-bg:#0b1220;--sh-fg:#f2f2f2;--sh-fg2:rgba(242,242,242,.62);--sh-rule:rgba(242,242,242,.16)}
html[data-tone=set] #ctSheet{--sh-bg:rgb(216,236,252)}
html[data-tone=blue] #ctSheet{--sh-bg:#0d2f78;--sh-fg:#fff;--sh-fg2:rgba(255,255,255,.72);--sh-rule:rgba(255,255,255,.2)}
html.ct-lock{overflow:hidden}
html.ct-lock #ctNav{touch-action:none}
.ct-sh-list{list-style:none;margin:0;padding:0}
.ct-sh-list>li+li{border-top:1px solid var(--sh-rule)}
.ct-sh-list a{display:flex;align-items:center;height:54px;margin:0 calc(-1 * var(--g));padding:0 var(--g);-webkit-tap-highlight-color:transparent}
.ct-sh-m{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;flex:1;min-width:0}
.ct-sh-in{display:flex;align-items:baseline;gap:14px;padding-bottom:.14em;margin-bottom:-.14em}
.ct-sh-n{font-family:var(--sans);font-weight:400;font-size:26px;line-height:1.1;letter-spacing:-.025em;white-space:nowrap}
.ct-sh-list a[aria-current=page] .ct-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(--sh-fg2)}
@media (hover:hover){ .ct-sh-list a:hover .ct-sh-n{color:var(--blue)} html:is([data-tone=night],[data-tone=blue]) .ct-sh-list a:hover .ct-sh-n{color:#fff} }
.ct-sh-list a:focus-visible{outline-offset:-2px}
.ct-sh-list a.ct-press{background:var(--sh-fg);color:var(--sh-bg)}
.ct-sh-ft{margin-top:auto;padding-top:28px}
.ct-sh-ord.btn{display:flex;width:100%;height:52px}
.ct-sh-legal{display:flex;flex-wrap:wrap;align-items:center;margin:10px 0 0;font-family:var(--sans);font-size:14px;line-height:1.3;color:var(--sh-fg2)}
.ct-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}
.ct-sh-legal a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.ct-sh-legal a:not(:last-child)::after{content:"·";content:"·" / "";padding:0 .7em;color:var(--sh-fg2)}
@media (hover:hover){ .ct-sh-legal a:hover{color:var(--sh-fg)} }
@media (min-width:980px){ #ctSheet{display:none!important} }

html.reduce #ctMenu .ct-t>span{transition:none}

/* ================================================================ every page: where you are, and the order button */
/* the current page's nav link: a 2px line under the label (the label itself stays put) */
#ctNav .ct-a[aria-current=page] .ct-t{box-shadow:0 3px 0 0 var(--ct-bg),0 5px 0 0 currentColor;overflow:hidden;transition:box-shadow .3s linear}
#ctNav .ct-a[aria-current=page]{opacity:1}
/* Order: a solid blue button so it never reads as one more link */
#ctNav .ct-ord{height:32px;margin:0;padding:0 14px;background:var(--blue);color:#fff;border-radius:2px}
html[data-tone=blue] #ctNav .ct-ord{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
@media (min-width:980px){
  .ct-r{gap:20px}
  #ctNav .ct-r>.ct-a:not(.ct-ord){opacity:.86}
  #ctNav .ct-r>.ct-a:not(.ct-ord):is(:hover,:focus-visible,[aria-current=page]){opacity:1}
}
/* nine links need the room: the status display steps aside until the window is wide */
@media (min-width:980px) and (max-width:1279.98px){
  .ct-disp{display:none}
  .ct-r{gap:16px}
}

/* ================================================================ the plain site footer (.sf), on every page under the receipt */
.sf{width:100%;max-width:1180px;margin:clamp(56px,8vw,96px) auto 0;padding-top:clamp(36px,5vw,56px);border-top:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;text-align:left}
.sf-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,3fr);gap:40px}
.sf-logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--mark);font-size:20px;color:var(--ink)}
.sf-logo img{width:30px;height:30px;border-radius:7px}
.sf-brand p{max-width:34ch;margin-top:10px;color:var(--ink-2)}
.sf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.sf-h{margin:0 0 10px;font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sf ul{list-style:none;margin:0;padding:0}
.sf li a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink-2)}
.sf li a[aria-current=page]{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--blue)}
@media (hover:hover){ .sf a:hover{color:var(--blue)} }
.sf-copy{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2)}
.sf-copy a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0}
@media (max-width:899.98px){
  .sf-top{grid-template-columns:minmax(0,1fr);gap:28px}
  .sf-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}
  .sf li a{min-height:38px;padding:3px 0;font-size:14px;line-height:1.3}
}
@media (max-width:359.98px){ .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* the subject names its tags: a bare :focus-visible under html[data-tone] made every tone change restyle the whole page */
html:is([data-tone=night],[data-tone=blue]) #ctNav a:focus-visible,html:is([data-tone=night],[data-tone=blue]) #ctNav button:focus-visible{outline-color:var(--gold)}

/* founder: no status readout next to the logo; it cluttered the nav */
.ct-disp{display:none!important}

/* founder: the original CrypTap logo (white-background app icon) beside the wordmark, as on the old site */
.ct-logo{flex:none;display:block;width:28px;height:28px;border-radius:7px;margin-right:10px}
#ctBrand .ct-mark{display:none!important}
#ctBrand .ct-word{display:block!important}
html.ct-home #ctBrand{width:auto!important}