/* SubTrack's own world (src/theme/tokens.ts): dark ground, Geist, violet for what is still to come and what you press,
   white for what is paid, amber only for "renews within three days". The receipt is the one lit object on the page. */
:root {
  color-scheme: dark;
  --bg: #1C1D1F; /* the slate desk's average; the app's own ground is #0C0D12 */
  --surface: #15171F;
  --line-c: #23252F;
  --text: #F4F5F8;
  --text-2: #A9AEBD;
  --text-3: #8E93A5;
  --violet: #8E7CFF;
  --violet-soft: #CFC8FF;
  --amber: #FFB547;
  --paper: #EDEBE6;
  --ink: #1E1D22;
  --ink-due: #5E4BDD;
  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 96px);
  /* The screen and the paper grow with the window, so a wide screen is filled rather than left empty at the sides. */
  --paper-w: clamp(400px, 25vw, 540px);
  --screen-w: clamp(300px, 18vw, 400px);
  --col-gap: clamp(32px, 4vw, 96px);
  --line: max(clamp(20px, 2.9vh, 26px), calc(var(--paper-w) * 0.06));
}

* { box-sizing: border-box; }
/* The desk the printers stand on in the hero picture runs down the whole page, and the paper and the phone lie on it. */
html { background: var(--bg); scrollbar-color: #2A2C36 var(--bg); }
body { margin: 0; background: var(--bg) url("assets/desk.jpg") 0 0 / 768px repeat; color: var(--text); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* A lamp at the upper left of the window lights the desk, as in the hero picture; the paper and the phone pass under it. */
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(110% 85% at 0% 0%, rgba(255, 250, 240, .07), transparent 65%); }
::selection { background: var(--violet); color: var(--bg); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
h1, h2 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }

#paper { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
.brand { position: absolute; z-index: 4; top: calc(20px + env(safe-area-inset-top, 0px)); left: var(--gutter); display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--text); min-height: 48px; }

/* Each row is a chapter beside its stretch of the receipt; the stretches touch, so the paper runs unbroken down the page. */
.sheet { position: relative; z-index: 2; padding-bottom: 30vh; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--screen-w) var(--paper-w);
  grid-template-areas: "copy screen band";
  column-gap: var(--col-gap);
  padding-inline: var(--gutter);
}
.copy { grid-area: copy; padding-block: clamp(96px, 16vh, 180px) 48px; align-self: start; }
.screen { grid-area: screen; margin: 0; padding-block: clamp(96px, 16vh, 180px) 64px; align-self: start; }
.band { grid-area: band; position: relative; }
/* Where the Home recording is on the printed running total, in the paper's left margin; it follows the video, and a finger on the paper moves the video. */
.mark { position: absolute; left: 10px; top: 0; width: 5px; height: var(--line); border-radius: 3px; background: var(--violet); opacity: 0; transition: transform .14s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.mark.on { opacity: 1; }
#b-run { cursor: ns-resize; }

/* The hero is one generated photograph: ten receipts curling into one. The headline sits in its empty dark corner;
   the picture pushes in slowly and leans a little toward the pointer. */
.hero { position: relative; min-height: 100svh; display: grid; align-content: start; overflow: hidden;
  /* The same desk and lamp as the page, here so the picture can blend with them: its black is the dark of the slate, so
     with lighten the slate shows through it and only the paper and the printers stay. */
  background: radial-gradient(110% 85% at 0% 0%, rgba(255, 250, 240, .07), transparent 65%) fixed, var(--bg) url("assets/desk.jpg") 0 0 / 768px repeat; }
.plate { mix-blend-mode: lighten; }
/* The whole picture shows, fitted to the bottom right; its empty upper left is the headline's. */
.plate { position: absolute; right: 0; bottom: 0; margin: 0; width: min(100%, 165svh); aspect-ratio: 1672 / 941; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 70% 80%; animation: push 26s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent), linear-gradient(90deg, transparent, #000 6%); mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent), linear-gradient(90deg, transparent, #000 6%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* The film plays once, printing the ten receipts out of the empty slots, and stops on the same picture as the still. */
.plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 70% 80%; animation: push 26s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent), linear-gradient(90deg, transparent, #000 6%); mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent), linear-gradient(90deg, transparent, #000 6%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.plate video.gone { display: none; }
/* The still lies under the film for when the film is gone; while the film runs it is hidden, or its finished receipt
   shows through the film's faded edge before the film has printed it. */
@media (prefers-reduced-motion: no-preference) { .plate.filming img { visibility: hidden; } }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.04); } }
.hero .copy { grid-area: auto; position: relative; padding: clamp(88px, 12vh, 150px) var(--gutter) 0; max-width: min(720px, 46vw); }
h1 { font-size: clamp(40px, 4.6vw, 76px); line-height: 0.98; letter-spacing: -0.045em; margin-bottom: 22px; max-width: 11.5ch; }
.lede { color: var(--text-2); font-size: clamp(17px, 1.4vw, 20px); max-width: 34ch; }
.today .copy { grid-column: 1 / 3; }
h2 { font-size: clamp(30px, 3.4vw, 64px); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 18px; }
.chapter .copy p, .today .copy p { color: var(--text-2); font-size: clamp(16px, 1.3vw, 23px); max-width: 34ch; }

/* The real screens: recordings from the phone, cut to the screen, nothing drawn around them. */
.screen video { display: block; width: 100%; aspect-ratio: 720 / 1486; border-radius: 30px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-c), 0 2px 4px rgba(0, 0, 0, .5), 9px 22px 44px -10px rgba(0, 0, 0, .75); }
.push { display: flex; }
/* Android's notification as the phone shows it (icon, title with the time beside it, body, expand chevron), in the dark theme. */
.note { width: 100%; display: grid; grid-template-columns: 40px 1fr 20px; gap: 14px; align-items: center; background: #1B1D25; color: var(--text); border-radius: 26px; padding: 16px 18px; box-shadow: inset 0 0 0 1px #262833; }
.note img { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px #2A2C36; }
.note .nt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.note b { font-weight: 600; font-size: 16px; line-height: 1.3; }
.note time { color: var(--text-3); font-size: 13px; }
.note span { display: block; color: var(--text-2); font-size: 15px; line-height: 1.4; margin-top: 2px; }
.note .chev { width: 20px; height: 20px; color: var(--text-3); }

/* The receipt. Without WebGL these rows are the paper; with it they stay as the readable text the 3D paper prints. */
.band { font: 500 calc(var(--paper-w) * 0.034)/var(--line) var(--mono); color: var(--ink); background: var(--paper); padding: 0 28px; letter-spacing: 0.01em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.today .band { padding-top: clamp(96px, 16vh, 180px); }
.band.last { padding-bottom: 40px; }
.chapter .band { padding-top: clamp(96px, 16vh, 180px); }
.close .copy { grid-column: 1 / 3; align-self: end; padding-block: 0 72px; }
.close .copy p { color: var(--text-2); font-size: clamp(17px, 1.5vw, 21px); max-width: 40ch; }
.close .copy b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.head { display: grid; justify-items: center; padding: 0 0 clamp(4px, 1.2vh, 12px); }
.head .mark { width: 34px; height: 34px; margin-bottom: 8px; }
.head span:nth-of-type(1) { font-weight: 600; font-size: 1.33em; letter-spacing: 0.24em; }
.head span:nth-of-type(2) { letter-spacing: 0.18em; }
.r { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: var(--line); white-space: nowrap; }
.r .l { display: flex; align-items: center; gap: 1.1ch; min-width: 0; flex: 1; }
.r .l span:last-child { overflow: hidden; text-overflow: ellipsis; }
.r .v { flex: none; }
.due { color: var(--ink-due); }
.soon .v { color: #B7700A; }
.logo { width: 18px; height: 18px; flex: none; filter: grayscale(1) contrast(1.3); }
.r.h { font-weight: 600; letter-spacing: 0.12em; }
.r.meta, .r.sub { font-size: 0.93em; }
.r.fine { font-size: 0.82em; height: 1.64em; letter-spacing: 0.04em; }
.r.total { height: calc(var(--line) * 1.8); font-size: 1.56em; font-weight: 600; }
.rule { height: var(--line); position: relative; display: flex; justify-content: center; align-items: center; }
.rule::before { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1.4px dashed currentColor; }
.rule.solid::before { border-top-style: solid; }
.rule.double::before { border-top: 4px double currentColor; }
.rule .rl { position: relative; background: var(--paper); padding: 0 10px; font-weight: 600; letter-spacing: 0.1em; }
.gap { display: block; }

/* With WebGL the paper is drawn in 3D; the rows stay for reading, selecting and finding. */
.gl .band, .gl .band * { background: none; color: transparent; }
.gl .band img { opacity: 0; }
.gl .rule .rl { background: transparent; }
.gl .rule::before { border-color: transparent; }
.gl .band .mark { background: var(--violet); }

.wait .band { visibility: hidden; }

.noscript { position: relative; z-index: 2; text-align: center; color: var(--text-2); padding: 24px; }

@media (max-width: 1180px) {
  .row { grid-template-columns: minmax(0, 1fr) var(--paper-w); grid-template-areas: "copy band" "screen band"; }
  .today .copy, .close .copy { grid-column: 1; }
  .screen { padding-block: 0 96px; width: var(--screen-w); }
  .copy { padding-bottom: 40px; }
}

/* Phones: one column. Each stretch of receipt is its own torn strip, printed as it comes into view. */
@media (max-width: 900px) {
  :root { --paper-w: min(100%, 380px); --line: 24px; }
  .row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "screen" "band"; }
  .hero { min-height: 0; }
  .hero .copy { max-width: none; padding: 96px var(--gutter) 0; }
  .plate { position: relative; right: auto; bottom: auto; order: 2; width: 100%; aspect-ratio: 4 / 5; margin-top: 8px; }
  .plate video { object-position: 82% 100%; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent); }
  .plate img { object-position: 82% 100%; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent); }
  .copy, .close .copy { padding-block: 88px 28px; }
  .screen { padding: 0 0 36px; width: min(240px, 70%); justify-self: center; }
  .push { width: 100%; max-width: 380px; }
  .band, .chapter .band { width: 100%; max-width: 380px; justify-self: center; padding: 24px 22px 28px; font-size: 12.5px; }
  .band.last { padding-bottom: 32px; }
  .sheet { padding-bottom: 72px; }
  h1 { font-size: clamp(40px, 11vw, 60px); }
  .r.total { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0s !important; } .plate img, .plate video { animation: none; } .plate video { display: none; } }