/* Carbon Dated. A night-shift dating lab: blue-black bench, manila specimen tags, red rubber stamp.
   One column, phone first. The stamp red is the only loud thing and it is saved for ages. */
@font-face {
  font-family: "Big Shoulders";
  src: url("fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --ink: #101219;        /* lab bench */
  --ink-2: #191c26;      /* raised surfaces */
  --rule: #2a2f3c;       /* grid + hairlines */
  --dim: #8a90a0;        /* secondary text, blue-biased grey */
  --bone: #ebe1c8;       /* manila tag paper */
  --graphite: #23211c;   /* type on tags */
  --stamp: #d8432b;      /* rubber stamp red: ages, and "pushed older" */
  --cool: #4f8fb3;       /* "pushed younger" on the heatmap */
  --cool-ink: #2b6a8f;   /* "pushed younger" as text on manila */
  --display: "Big Shoulders", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 4px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  color: var(--bone);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
/* fade the grid so it reads as paper texture, not a spreadsheet */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 0%, var(--ink) 75%);
  opacity: .82;
}

.wrap {
  position: relative; z-index: 1;
  max-width: 560px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 20px 40px;
  display: flex; flex-direction: column; gap: 22px;
}

/* ---------- masthead ---------- */
.mast { display: flex; flex-direction: column; gap: 6px; }
.eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  display: flex; justify-content: space-between; gap: 12px;
}
.wordmark {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(64px, 21vw, 112px); line-height: .82; letter-spacing: -.01em;
  margin: 4px 0 0; text-transform: uppercase; text-wrap: balance;
}
.wordmark .pm {
  color: var(--stamp); font-size: .34em; vertical-align: top; letter-spacing: 0;
  display: inline-block; transform: translateY(.25em) rotate(-6deg); margin-left: .08em;
}
.tagline { margin: 6px 0 0; color: var(--dim); max-width: 46ch; min-height: 3.1em; transition: opacity .4s; }
.tagline.fade { opacity: 0; }

/* ---------- controls ---------- */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  appearance: none; border: 1.5px solid var(--bone); border-radius: var(--radius);
  font: 600 14px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  padding: 16px 12px; min-height: 54px; cursor: pointer; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--bone); background: transparent; text-decoration: none;
  transition: transform .08s, background-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--bone); color: var(--graphite); }
.btn:hover { background: var(--ink-2); }
.btn.primary:hover { background: #f5ecd6; }
.btn:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }
.btn[disabled] { opacity: .45; cursor: progress; }
.btn.wide { grid-column: 1 / -1; }
.btn svg { width: 18px; height: 18px; flex: none; }
/* the real file input covers the whole button so the tap lands on it directly (in-app browsers ignore indirect clicks) */
.picker { position: relative; overflow: hidden; }
.file-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer; font-size: 100px; z-index: 2;
}
.picker:focus-within { outline: 2px solid var(--stamp); outline-offset: 3px; }

.paste {
  border: 1.5px dashed var(--rule); border-radius: var(--radius); padding: 14px; margin: -10px 0 0;
  font-size: 13px; color: var(--dim); text-align: center; min-height: 48px; outline: none; caret-color: transparent;
  -webkit-user-select: text; user-select: text; overflow: hidden; max-height: 80px;
}
.paste:empty::before { content: "Buttons not opening anything? Copy a photo, then tap here and choose Paste."; }
.paste:focus { border-color: var(--bone); color: var(--bone); }
.paste:focus:empty::before { content: "Now press and hold here, then tap Paste."; }
.status { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 8px; margin: -8px 0 0; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.status.busy .dot { background: var(--bone); animation: blink 1s steps(2) infinite; }
.status.ready .dot { background: #7fb069; }
.status.error .dot { background: var(--stamp); }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- specimen tags (used for examples, results) ---------- */
.section-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  display: flex; align-items: center; gap: 10px; margin: 0;
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.tags { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tag {
  position: relative; background: var(--bone); color: var(--graphite);
  border-radius: var(--radius);
  padding: 14px 16px 14px 34px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start;
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.tag:nth-child(odd) { transform: rotate(-.5deg); }
.tag:nth-child(even) { transform: rotate(.45deg); }
/* punched hole + reinforcement ring */
.tag::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #d9cdaf;
}
.tag-thumb {
  grid-row: span 3; width: 64px; height: 64px; border-radius: 2px; object-fit: cover;
  background: #d6caa9; filter: grayscale(.25) contrast(1.05);
  border: 1px solid rgba(35,33,28,.25);
}
.tag-meta { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5f5a4d; min-width: 0; }
.tag-meta b { color: var(--graphite); font-weight: 600; }
.tag-age { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tag-age .n {
  font-family: var(--display); font-weight: 800; font-size: 54px; line-height: .9; color: var(--stamp);
  font-variant-numeric: tabular-nums; transform: rotate(-3deg); display: inline-block;
}
.tag-age .pm { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5f5a4d; }
.tag-line { margin: 2px 0 0; font-size: 14px; line-height: 1.45; min-width: 0; text-wrap: pretty; }
.tags.example .tag { opacity: .92; }
.example-chip {
  position: absolute; right: 12px; bottom: 10px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid #8d8571; color: #6e6757; padding: 1px 5px; border-radius: 2px;
}

/* ---------- why this number ---------- */
.why-sum {
  grid-column: 1 / -1; margin: 6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #5f5a4d;
}
.why-btn {
  grid-column: 1 / -1; justify-self: stretch; margin-top: 6px; min-height: 40px;
  background: transparent; border: 1.5px solid var(--graphite); border-radius: 2px; padding: 8px 10px; cursor: pointer;
  font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite);
}
.why-btn[aria-expanded="true"] { background: var(--graphite); color: var(--bone); }
.why-btn:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }
.why {
  grid-column: 1 / -1; border-top: 1px dashed #b8ad90; margin-top: 8px; padding-top: 12px;
  display: grid; grid-template-columns: 112px 1fr; gap: 10px 14px; align-items: start;
}
.why-running { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #5f5a4d; }
.why-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.why-fig canvas { width: 112px; height: 112px; border-radius: 2px; display: block; }
.why-fig figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #5f5a4d; }
.why-fig .sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; border-radius: 1px; }
.why-fig .sw.older { background: var(--stamp); }
.why-fig .sw.younger { background: var(--cool); }
.why-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.why-grade {
  margin: 0; justify-self: start; align-self: flex-start; font: 800 18px/1 var(--display); text-transform: uppercase;
  color: var(--stamp); border: 2px solid var(--stamp); padding: 3px 6px 2px; transform: rotate(-2deg);
}
.why-body ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.45; }
.feat-wrap { grid-column: 1 / -1; overflow-x: auto; min-width: 0; }
.feat { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.35; }
.feat caption { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5f5a4d; padding-bottom: 6px; }
.feat th, .feat td { text-align: left; vertical-align: top; padding: 6px 8px 6px 0; border-top: 1px solid #d4c8a8; }
.feat thead th { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5f5a4d; border-top: 0; }
.feat tbody th { font-weight: 600; width: 34%; }
.feat td.hit { font-weight: 600; }
.feat th .zone { display: block; font-weight: 400; font-size: 11px; color: #6e6757; }
.why-loading { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #5f5a4d; }
.feat td.fx { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.feat td.fx.older { color: var(--stamp); }
.feat td.fx.younger { color: var(--cool-ink); }
.feat td.fx.none { color: #7d7663; font-weight: 400; white-space: normal; }
.why-note { grid-column: 1 / -1; margin: 0; font-size: 11.5px; line-height: 1.5; color: #5f5a4d; }
@media (max-width: 380px) { .why { grid-template-columns: 1fr; } }

/* ---------- the lab bench: photo + boxes ---------- */
.bench { display: flex; flex-direction: column; gap: 14px; }
.stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--rule); max-width: 100%;
}
.stage canvas { display: block; width: 100%; height: auto; }
.stage.scanning canvas { filter: grayscale(.6) brightness(.75); transition: filter .3s; }
.scanline {
  position: absolute; left: 0; right: 0; height: 2px; top: 0; background: var(--bone);
  box-shadow: 0 0 18px 4px rgba(235,225,200,.45); display: none;
}
.stage.scanning .scanline { display: block; animation: scan 1.4s ease-in-out infinite alternate; }
@keyframes scan { from { top: 2%; } to { top: 97%; } }

.face { position: absolute; pointer-events: none; opacity: 0; transition: opacity .25s; }
.face.on { opacity: 1; }
.face i { position: absolute; width: 22%; height: 22%; border-color: var(--bone); border-style: solid; border-width: 0; }
.face i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.face i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.face i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.face i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.face.rolling i { border-color: var(--stamp); }
.chip {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  background: var(--bone); color: var(--graphite); border-radius: 2px;
  font-family: var(--display); font-weight: 800; line-height: 1; white-space: nowrap;
  padding: .12em .3em .08em; font-size: var(--chip, 22px);
  display: flex; align-items: baseline; gap: .25em; font-variant-numeric: tabular-nums;
}
.face.below .chip { bottom: auto; top: calc(100% + 4px); }
.chip .l { font-family: var(--mono); font-weight: 600; font-size: .5em; color: #6e6757; }
.chip .n { color: var(--stamp); }
.face.stamped .chip { animation: stamp .38s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stamp {
  0% { transform: translateX(-50%) scale(2.1) rotate(-10deg); opacity: 0; }
  100% { transform: translateX(-50%) scale(1) rotate(-3deg); opacity: 1; }
}

/* big readout: the reveal moment */
.readout {
  background: var(--bone); color: var(--graphite); border-radius: var(--radius);
  padding: 14px 18px 12px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px;
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.readout .who { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5f5a4d; grid-column: 1 / -1; }
.readout .big {
  font-family: var(--display); font-weight: 800; color: var(--stamp);
  font-size: clamp(110px, 38vw, 180px); line-height: .8; font-variant-numeric: tabular-nums;
  display: inline-block; transform-origin: 30% 70%;
}
.readout.landed .big { animation: bigstamp .45s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes bigstamp {
  0% { transform: scale(1.5) rotate(-12deg); opacity: .2; }
  100% { transform: scale(1) rotate(-4deg); opacity: 1; }
}
.readout .unit { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #5f5a4d; text-align: right; padding-bottom: 10px; }
.readout .unit b { display: block; font-family: var(--display); font-size: 28px; letter-spacing: 0; color: var(--graphite); line-height: 1; }
.readout .skip {
  grid-column: 1 / -1; justify-self: start; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #5f5a4d; text-decoration: underline;
}

.verdict { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; }
.verdict p { margin: 0; max-width: 52ch; }
.verdict .signoff {
  font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--stamp);
  text-transform: uppercase; transform: rotate(-2deg); transform-origin: left; margin-top: 4px;
}

.foot { font-size: 12px; color: var(--dim); border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.foot p { margin: 0; }

/* ---------- share sheet ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 20; background: rgba(8,9,13,.92);
  display: flex; flex-direction: column; align-items: center; gap: 14px; overflow-y: auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.sheet img { width: 100%; max-width: 480px; height: auto; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.6); -webkit-touch-callout: default; }
.sheet .hint { font-size: 13px; color: var(--dim); text-align: center; margin: 0; max-width: 40ch; }
.sheet .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 480px; }
.sheet .row .btn:only-child { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}