/* CrypTap v6 core: tokens, base, shared primitives and the styles of kernel-generated markup.
   Owned by core. Modules never edit this file.
   Global class names belong to core only: .lab .mono .chip .btn .rcpt* .ft-set .ln .vh
   Kernel-generated markup uses the core- prefix (core-roll, core-dg, core-rings, core-split) and .btn-* inside .btn. */

/* --dock stays registered at 0px for legacy readers. Chrome deleted the order bar, so nothing sets or transitions it any more. */
@property --dock { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ft-lift { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root{
  /* palette: the old cryptap.xyz colours (cool porcelain ground, navy ink, the device's blue, one gold) */
  --paper:#f7f8fa; --paper-2:#f1f3f6; --white:#ffffff;
  --ink:#0e1726; --ink-2:#5c6779; --ink-3:#7b8597;
  --line:rgba(14,23,38,.14); --line-soft:#e1e5ec; --line-strong:#cbd2dc;
  --blue:#1f6bc4; --blue-soft:#69cde7; --gold:#d9ad12; --night:#0b1220;
  --green:#17865c; --success:#1e9e6a; --red:#b3261e; --rcpt:#ffffff;
  --set-sky:rgb(216,236,252);            /* frame 1's top row */
  --line-blue:#4a74c4; --grid:rgba(74,116,196,.12);
  /* type */
  --sans:"Archivo",system-ui,sans-serif; --cond:"Archivo Narrow",sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --mark:"Questrial",sans-serif;
  /* layout */
  --g:clamp(18px,3.2vw,44px);
  --nav-h:44px; --bar-h:0px;          /* the gold announcement bar is gone (2026-10-10); kept at 0 for the offsets that add it */
  --pin-h:100vh;
  --lvh:100vh;                           /* the large viewport (toolbars collapsed) */
  --toolbar-gap:max(0px, calc(var(--lvh) - var(--pin-h)));  /* what a phone's browser toolbars take from a pin */
  --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px);
  --dock:0px;                            /* always 0: the order bar is gone (see @property above) */
  /* motion: 120ms key entry, 240ms flash, 350ms exit, 600ms entry, 900ms h2 line rise. --snap is for detents only. */
  --out:cubic-bezier(.16,1,.3,1); --in:cubic-bezier(.7,0,.84,0); --inout:cubic-bezier(.65,0,.35,1); --snap:cubic-bezier(.3,1.5,.45,1);
  --ease:cubic-bezier(.2,.8,.2,1);       /* v5's curve, still used by legacy files until they are emptied */
}
@supports (height:100svh){ :root{ --pin-h:100svh; } }
@supports (height:100lvh){ :root{ --lvh:100lvh; } }

/* Pins:     height var(--pin-h); box-shadow 0 14vh 0 0 <the pin's bottom-edge colour>.
   Scenes:   height calc(var(--pin-h) + N vh).
   Handoff:  upper section position relative, z-index 3, its pin stuck for a D vh tail.
             lower section position relative, z-index 2, margin-top calc(-1 * var(--pin-h) - D vh); 0 under html.reduce.
             #sky is the exception: it stacks above flow's route and cuts its own aperture. */

/* base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,canvas,svg{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
::selection{background:rgba(105,205,231,.35);color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* type primitives */
.lab{font-family:var(--cond);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.chip{display:inline-flex;align-items:center;gap:7px;height:23px;padding:0 9px;border:1px solid currentColor;font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* skip link: the first focusable element; visible only while focused, over the bar and the nav */
.core-skip{position:fixed;left:var(--g);top:6px;z-index:102;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}
.core-skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);box-shadow:none}
main#main:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* .btn: square, blue, 44px. CT.btn builds two stacked label copies and a 3-arc NFC glyph.
   Hover rolls the label (380ms --out) and turns the arcs gold at 0/80/160ms. Press drops it 1px. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:44px;padding:0 20px;background:var(--blue);color:#fff;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform 80ms linear}
.btn-l{position:relative;display:block;height:16px;line-height:16px;overflow:hidden}
.btn-t{display:block;transition:transform .38s var(--out)}
.btn-t+.btn-t{position:absolute;left:0;top:100%}
.btn .btn-nfc{width:12px;height:12px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.btn-nfc path{transition:stroke .24s linear}
@media (hover:hover){
  :is(a,button).btn:hover .btn-t{transform:translateY(-100%)}
  :is(a,button).btn:hover .btn-nfc path{stroke:#d9ad12}
  :is(a,button).btn:hover .btn-a2{transition-delay:80ms}
  :is(a,button).btn:hover .btn-a3{transition-delay:160ms}
}
:is(a,button).btn:focus-visible .btn-t{transform:translateY(-100%)}
:is(a,button).btn:focus-visible .btn-nfc path{stroke:#d9ad12}
:is(a,button).btn:active{transform:translateY(1px)}
html.reduce .btn-t{transition:none}
html.reduce :is(a,button).btn:is(:hover,:focus-visible) .btn-t{transform:none}

/* .rcpt: thermal receipt (sky, the footer, and 404.html, which inlines a copy) */
.rcpt{background:var(--rcpt);color:#1a1a1a;font-family:var(--mono);font-size:12.5px;line-height:1.9;padding:16px 16px 6px}
.rcpt-rl{display:flex;justify-content:space-between;gap:12px;white-space:nowrap}
.rcpt-c{justify-content:center;text-align:center;letter-spacing:.14em}
.rcpt-b{font-weight:500}
.rcpt-dash{height:1.9em;background:linear-gradient(90deg,#999 0 6px,transparent 6px 10px) left center/10px 1px;background-repeat:round no-repeat}
/* .rcpt-wrap: a row allowed to wrap. The label wraps (its leader rides its last line, at least 24px); the value never wraps and,
   when it cannot fit beside the label, drops to its own right-aligned line. Use with .rcpt-lead for a dotted leader. */
.rcpt-rl.rcpt-wrap{white-space:normal;flex-wrap:wrap;column-gap:0;align-items:flex-end}
.rcpt-wrap>span:first-child{flex:1 1 auto;min-width:0;white-space:normal}
.rcpt-wrap>span:last-child:not(:first-child){white-space:nowrap;margin-left:auto;padding-left:8px;text-align:right}
/* the leader occupies 8px + 24px of the label's last line (so it always gets at least 24px) and runs on to the label's
   clipped right edge: its extra 100vw is cancelled by a -100vw margin, so it never pushes a word to the next line */
.rcpt-wrap.rcpt-lead>span:first-child{display:block;flex:1 1 0;min-width:min(100%,12ch);overflow:hidden}
@supports (overflow:clip){ .rcpt-wrap.rcpt-lead>span:first-child{overflow:clip} }
.rcpt-wrap.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}
.rcpt-lead{gap:0}
.rcpt-lead>span:first-child{display:flex;flex:1;min-width:0}
.rcpt-lead>span:first-child::after{content:"";flex:1;min-width:12px;margin:0 8px .6em;border-bottom:1px dotted currentColor;opacity:.55}
.rcpt-tear{height:14px;background:linear-gradient(45deg,transparent 33.333%,var(--rcpt) 33.333%,var(--rcpt) 66.667%,transparent 66.667%),linear-gradient(-45deg,transparent 33.333%,var(--rcpt) 33.333%,var(--rcpt) 66.667%,transparent 66.667%);background-size:14px 28px;background-position:0 -14px}

/* .ft-set: the pale-blue tap set behind CT.footage. The plate starts 18px inside the canvas's right edge (under its 18px fade),
   its last column is stretched to any width, and --set-sky fills above the frame. --ft-* are written by CT.footage.draw. */
.ft-set{background:
  url(../tap/plate-r.webp) calc(var(--ft-x,0px) + var(--ft-w,0px) - 18px) calc(var(--ft-y,0px) - var(--ft-lift,0px)) / auto var(--ft-h,100%) no-repeat,
  url(../tap/plate-edge.webp) 0 calc(var(--ft-y,0px) - var(--ft-lift,0px)) / 1px var(--ft-h,100%) repeat-x,
  linear-gradient(rgb(195,234,253),rgb(195,234,253)) 0 calc(var(--ft-y,0px) + var(--ft-h,0px) - var(--ft-lift,0px)) / 100% var(--ft-lift,0px) no-repeat,
  var(--set-sky)}
/* --ft-lift (px, default 0): a pin may lift the footage (its canvas by transform, the plate here) to clear chrome's docked order
   bar; the plate's own last row (195,234,253) fills under it, and CT.footage.draw's foot fills under the canvas. */

/* CT.split / CT.lines: masked lines. The mask reaches .14em below the line box so descenders are never clipped. */
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ln>span{display:block;padding-bottom:.14em;margin-bottom:-.14em}
/* copy whose every line is parked below its mask ('pre') or rolled out keeps no visible box under other text */
.core-gone{visibility:hidden}
html.js:not(.reduce) h2[data-split]:not(.core-split){visibility:hidden;animation:core-reveal 0s 3s forwards}
@keyframes core-reveal{to{visibility:visible}}

/* CT.roll: one-line mask roll */
.core-roll{position:relative;display:inline-block;max-width:100%;vertical-align:top;clip-path:inset(0 -100vw)}
.core-roll-i{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.core-roll-o{position:absolute;top:0;text-overflow:clip;overflow:visible}

/* CT.digits: odometer columns */
.core-digits{font-variant-numeric:tabular-nums}
.core-dg-box{display:inline-block;white-space:nowrap}
.core-dg{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.core-dg-sz{display:block;visibility:hidden}
.core-dg-c{position:absolute;left:0;top:0;width:100%;text-align:center}
.core-dg-c>span{display:block}
.core-dg-f{display:inline-block;vertical-align:top}

/* CT.rings: 1px ellipses lying on the plane they belong to */
.core-rings{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.core-rings svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}
.core-rings ellipse{transform-box:fill-box;transform-origin:center}