/* Snitch: shared look for every page.

   Near-black and graphite, with yellow kept as a signal: it marks what is
   live or flagged, and little else. The one piece of white paper is the
   receipt. Headlines are set in Bricolage Grotesque, text in Geist, and
   anything typed in (addresses, amounts, receipts) in Geist Mono.

   To change the palette, change the values in :root below. */

@font-face { font-family: "Bricolage"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/assets/fonts/bricolage.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/geist.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/geist-mono.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --carbon: #040405;      /* the ground: near-black */
  --carbon-2: #0B0B0D;    /* graphite: a panel lying on the ground */
  --carbon-3: #141417;    /* a panel that is raised or hovered */
  --rule: #26262B;        /* ruled lines */
  --paper: #F2F1EC;       /* light text, and the receipt's paper */
  --canary: #F5C518;      /* the yellow: a signal, used sparingly */
  --canary-deep: #B8930F; /* the yellow, in shadow */
  --fog: #9A9AA2;         /* quiet text */
  --dim: #6E6E76;         /* quieter text */
  --alert: #FF7A6B;       /* error messages only */

  /* A sheet is a dark grey form or card. */
  --sheet: var(--carbon-2);
  --sheet-text: var(--paper);
  --sheet-muted: var(--fog);
  --sheet-faint: #6E6E76;
  --sheet-rule: #2E2E34;
  --sheet-accent: var(--fog);

  /* The receipt is real paper. */
  --receipt-ink: #131314;
  --receipt-muted: #5A5A62;
  --receipt-rule: #A3A3AB;

  /* Names the older components still use. */
  --bg: var(--carbon); --surface: var(--carbon-2); --raised: var(--carbon-3); --line: var(--rule);
  --text: var(--paper); --muted: var(--fog); --brand: var(--canary); --warn: var(--alert); --warn-text: #DEDEE3;
  --land: #26262A; --route: #7D6A14; --note: var(--paper);
  --stamp: var(--alert); --stamp-bright: var(--alert);

  --print: "Geist", "Helvetica Neue", Arial, sans-serif;
  --typed: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Bricolage", "Helvetica Neue", Arial, sans-serif;
  --body: var(--print); --mono: var(--typed);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--carbon); color: var(--paper); font-family: var(--print); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--canary); outline-offset: 3px; border-radius: 2px; }

/* Headlines: heavy, tight, modern. */
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; font-variation-settings: "opsz" 96; }
h1, h2 { font-weight: 800; line-height: 0.92; letter-spacing: -0.04em; }
h2 { font-size: clamp(40px, 5.4vw, 76px); }
h2 .quiet, h1 .quiet { color: var(--dim); }
h3 { font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.wide { font-weight: 400; letter-spacing: 0.01em; }
.typed, .mono { font-family: var(--typed); font-size: 0.9em; }
.muted { color: var(--fog); }
.lede { font-size: clamp(18px, 1.5vw, 21px); color: var(--fog); max-width: 48ch; }

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 36px); }
.sec { padding-block: clamp(72px, 9vw, 132px); }
.sec + .sec { border-top: 1px solid var(--rule); }
.head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }

/* Buttons: yellow for the main action, an outline for the rest. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--paper); background: var(--paper); color: var(--carbon); font: 600 15.5px var(--print); text-decoration: none; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; }
.btn:hover { background: #FFFFFF; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--paper); border-color: #34343A; }
.btn.ghost:hover { border-color: var(--fog); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn:disabled { opacity: 0.6; cursor: wait; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block: 16px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 24px/1 var(--display); letter-spacing: -0.03em; font-variation-settings: "opsz" 96; }
.logo i { font-style: normal; color: var(--canary); }
.logo img { width: 34px; height: auto; display: block; }
.logo img.wm { width: auto; height: 30px; }
.nav { display: flex; gap: 4px 26px; flex-wrap: wrap; font-size: 15.5px; font-weight: 500; }
.nav a { text-decoration: none; color: var(--fog); padding: 10px 0; }
.nav a:hover { color: var(--paper); }
.top-right { display: flex; align-items: center; gap: 12px; }
.menu-btn { display: none; width: 44px; height: 40px; border-radius: 3px; border: 1px solid var(--rule); background: transparent; color: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); padding-top: 6px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; font-size: 17px; }
}

/* A sheet: a dark grey form or card. `stack` gives it a hard yellow edge. */
.sheet { position: relative; background: var(--sheet); color: var(--sheet-text); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(20px, 3vw, 34px); }
.sheet.stack { box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.sheet h3 { color: var(--sheet-text); }
.sheet .muted { color: var(--sheet-muted); }

/* A form box: a ruled cell with its printed label in the corner. */
.cell { border: 1px solid var(--sheet-rule); border-radius: 12px; padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--carbon); }
.cell > label, .cell > .label { font: 500 12.5px/1.3 var(--print); color: var(--sheet-accent); }

/* Tags for how something is known. The line style carries the meaning. */
.ev { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--print); color: inherit; white-space: nowrap; }
.ev i { width: 20px; height: 0; border-top: 2px solid currentColor; display: block; }
.ev.inf i { border-top-style: dashed; }
.ev.att i { border-top-style: dotted; }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--rule); font: 500 12.5px var(--print); color: var(--fog); white-space: nowrap; }
.chip.live, .chip.now { color: var(--paper); border-color: #34343A; }
.chip.live::before, .chip.now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--canary); }
.chip.sample { border-style: dashed; border-color: var(--fog); color: var(--paper); }

/* A rubber stamp. */
.stamp { display: inline-block; padding: 6px 14px 5px; border-radius: 6px; color: var(--paper); background: linear-gradient(180deg, #232327, #0F0F12); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -10px rgba(0,0,0,.8); font: 700 13px/1.1 var(--typed); letter-spacing: 0.16em; text-transform: uppercase; transform: rotate(-4deg); }
.stamp::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--canary); margin-right: 9px; vertical-align: 1px; }

/* The receipt: a strip of thermal paper, torn at the bottom. */
.receipt { --tooth: 9px; background: var(--paper); color: var(--receipt-ink); font: 400 13.5px/1.55 var(--typed); padding: 22px 20px 30px; width: 100%; max-width: 330px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) 100%; }
.receipt .rc-head { text-align: center; font-weight: 600; letter-spacing: 0.22em; font-size: 17px; }
.receipt .rc-sub { text-align: center; color: var(--receipt-muted); }
.receipt hr { border: 0; border-top: 1.5px dashed var(--receipt-rule); margin: 9px 0; }
.receipt .row { display: flex; justify-content: space-between; gap: 12px; }
.receipt .row span:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt .row.in { padding-left: 12px; color: var(--receipt-muted); }
.receipt .row.total { font-weight: 600; font-size: 15.5px; }
.receipt .hl { background: linear-gradient(transparent 14%, #F3D45C 14% 86%, transparent 86%); margin-inline: -4px; padding-inline: 4px; }
.receipt .tick { display: flex; gap: 9px; align-items: baseline; }
.receipt .box { flex: none; width: 12px; height: 12px; border: 1.5px solid var(--receipt-ink); position: relative; top: 1px; }
.receipt .box.x::before, .receipt .box.x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 4px; border-top: 1.9px solid var(--receipt-ink); transform: rotate(45deg); }
.receipt .box.x::after { transform: rotate(-45deg); }
.receipt .bars { height: 34px; margin-top: 12px; background: repeating-linear-gradient(90deg, var(--receipt-ink) 0 2px, transparent 2px 4px, var(--receipt-ink) 4px 5px, transparent 5px 9px, var(--receipt-ink) 9px 12px, transparent 12px 14px); }
.receipt .rc-foot { text-align: center; color: var(--receipt-muted); margin-top: 8px; }

footer { border-top: 1px solid var(--rule); padding-block: 36px 56px; color: var(--fog); font-size: 14.5px; }
footer .wrap { display: flex; flex-direction: column; gap: 14px; }
footer .lock { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; color: var(--paper); font: 800 20px var(--display); letter-spacing: -0.02em; }
footer .lock span + span, footer .lock img + span { font: 500 14px var(--print); color: var(--fog); letter-spacing: 0; }
footer .lock .lock-logo { width: auto; height: 34px; align-self: center; }
footer p { max-width: 82ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* Official links: X, Telegram and the $SNITCH contract address (filled by /assets/links.js). */
.soc { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; color: var(--paper); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color .2s ease, color .2s ease; }
.soc svg { width: 15px; height: 15px; flex-shrink: 0; }
a.soc[href] { border-color: rgba(245,197,24,.45); }
a.soc[href]:hover { border-color: var(--canary); color: var(--canary); }
.soc.is-soon { color: var(--fog); opacity: .65; cursor: default; }
.soc.is-soon::after { content: "soon"; font: 500 10.5px var(--typed); letter-spacing: .12em; text-transform: uppercase; color: var(--canary); }
.soc.icon { width: 36px; padding: 0; justify-content: center; }
.soc.icon.is-soon::after { content: none; }
.soc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ca-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ca-box { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 6px 0 14px; border: 1px dashed rgba(245,197,24,.45); border-radius: 999px; max-width: 100%; }
.ca-box .k { font: 500 11px var(--typed); letter-spacing: .14em; text-transform: uppercase; color: var(--canary); white-space: nowrap; }
.ca-box code { font: 500 13px var(--typed); color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ca-box code.live { color: var(--paper); }
.ca-box button { border: 0; border-radius: 999px; padding: 5px 12px; background: #222227; color: var(--paper); font: 600 12px var(--print); cursor: pointer; }
.ca-box button:disabled { opacity: .4; cursor: default; }
.ca-note { margin: 6px 0 0; font-size: 13px; color: var(--fog); }