/* Blockstream skin for TRMG.
   Presentation layer only: colours, type, chrome. No content, method or table
   data is altered by this file. Palette and type from the Blockstream visual
   system (Space Gray #111316, Blockstream Blue #00C3FF, Rigid Square + Inter). */

:root {
  color-scheme: dark;

  --bg: #111316;           /* Space Gray — page background */
  --bg-deep: #040506;      /* Near-black — code surfaces */
  --surface: #1D2127;      /* Card Gray */
  --surface-2: #242A32;    /* Supporting dark — table headers */
  --line: #2B313B;
  --line-soft: #242A32;

  --text: #FFFFFF;
  --body: #C9CFD6;

  --accent: #00C3FF;       /* Blockstream Blue */
  --accent-deep: #1187C1;
  --caution: #F0D003;      /* Blockstream yellow — liability notice only */
  --ink: #0C0C0F;          /* text on accent fills */

  --font-head: "rigid-square", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: min(1140px, calc(100% - 3rem));
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 140ms var(--ease);
}

a:hover { color: var(--text); }

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Content column ──────────────────────────────────────────────────────── */

main {
  width: var(--wrap);
  margin: 0 auto 6rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--text);
  font-weight: 700;
  line-height: 1.15;
}

h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  margin: 0;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  margin: 3.5rem 0 1rem;
  letter-spacing: -0.01em;
}

h3 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; }
h4 { font-size: 1.05rem; margin: 1.75rem 0 0.6rem; }

/* Inner pages open on their own heading rather than a hero. */
main > h1:first-child,
main > h2:first-child {
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  margin: clamp(2.5rem, 6vw, 4rem) 0 1.25rem;
  letter-spacing: -0.02em;
}

p, li { max-width: 76ch; }
p { margin: 0 0 1.15rem; }
ul, ol { padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }

strong { color: var(--text); font-weight: 600; }

hr {
  height: 1px;
  border: 0;
  background: var(--line);
  margin: 3rem 0;
}

/* Inter with tabular figures carries code refs — no monospace family anywhere. */
code {
  font-family: var(--font-body);
  font-size: 0.94em;
  letter-spacing: 0.01em;
  color: var(--accent);
  background: var(--bg-deep);
  border: 1px solid var(--line);
  padding: 0.08rem 0.34rem;
}

pre {
  overflow-x: auto;
  padding: 1.1rem 1.25rem;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  color: var(--body);
  line-height: 1.6;
}

pre code {
  color: var(--body);
  background: none;
  border: 0;
  padding: 0;
}

blockquote {
  margin: 1.5rem 0;
  padding: 1.1rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--body);
}

blockquote p:last-child { margin-bottom: 0; }

/* ── Safety notices ──────────────────────────────────────────────────────── */
/* The four notices under "How It Works" run as open rows with a Phosphor icon,
   not cards. Scoped to .notices so the tarot page's blockquotes are untouched. */

.notices { margin: 2rem 0 2.5rem; }

.notices > blockquote {
  position: relative;
  margin: 0 0 1.75rem;
  padding: 0 0 0 4rem;
  min-height: 40px;
  background: none;
  border: 0;
}

.notices > blockquote:last-child { margin-bottom: 0; }

.notices > blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 40px;
  height: 40px;
  background-color: var(--accent);
  mask: url("../brand/icons/dice-six.svg") center / contain no-repeat;
  -webkit-mask: url("../brand/icons/dice-six.svg") center / contain no-repeat;
}

.notices > blockquote:nth-of-type(2)::before {
  mask-image: url("../brand/icons/vault.svg");
  -webkit-mask-image: url("../brand/icons/vault.svg");
}

.notices > blockquote:nth-of-type(3)::before {
  mask-image: url("../brand/icons/eye-slash.svg");
  -webkit-mask-image: url("../brand/icons/eye-slash.svg");
}

/* The liability notice closes the section as a bordered caution card: no icon,
   Blockstream yellow, so it reads as a different class of warning. */
.notices > blockquote:nth-of-type(4) {
  margin-top: 2.25rem;
  padding: 1.15rem 1.4rem;
  background: rgba(240, 208, 3, 0.06);
  border: 1px solid var(--caution);
}

.notices > blockquote:nth-of-type(4)::before { content: none; }

.notices > blockquote:nth-of-type(4) strong { color: var(--caution); }

.notices > blockquote strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.15rem;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0 2.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.92rem;
}

th, td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  word-break: normal;
  overflow-wrap: normal;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
}

td { color: var(--body); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
tbody tr:hover td { background: rgba(0, 195, 255, 0.06); }
td a { font-weight: 600; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  max-width: 880px;
}

/* Blockstream laser lines: a page-top decorative band anchored to the initial
   containing block, so it spans the viewport rather than the content column. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 780px;
  background: url("../brand/laser-lines.svg") top right / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
}

/* The sub is 155 characters: at 62ch it broke to three lines and stranded
   "offline". A wider measure fits it on two, balance evens them, and the
     in the markup is the guarantee at any width. */
.hero p {
  color: var(--body);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  margin: 1.4rem 0 2.25rem;
  max-width: 82ch;
  text-wrap: balance;
}

.hero h1 { text-wrap: balance; }

.button {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  background: var(--accent);
  padding: 0.8rem 1.4rem;
  transition: background 140ms var(--ease);
}

.button:hover { background: #7EE0FF; color: var(--ink); }

/* ── Method cards ────────────────────────────────────────────────────────── */

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.method-card {
  display: block;
  min-height: 150px;
  padding: 1.25rem;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.method-card:hover { border-color: var(--accent); background: var(--surface-2); color: var(--body); }

.method-card strong {
  display: block;
  font-family: var(--font-head);
  color: var(--text);
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.method-card span { color: var(--body); font-size: 0.92rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; }
}

@media (max-width: 860px) {
  :root { --wrap: calc(100% - 2rem); }

  th { position: static; }

  /* Wide lookup tables scroll inside their own box rather than the page. */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  body::before { height: 520px; opacity: 0.35; }
}

/* ── Glossary term ───────────────────────────────────────────────────────── */

.term {
  position: relative;
  color: var(--accent);
  font-weight: 600;
}

.term:hover,
.term:focus-visible { color: var(--text); }

.term-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  z-index: 30;
  width: max(260px, 22rem);
  max-width: min(22rem, 84vw);
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  color: var(--body);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.55;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 140ms;
}

.term-pop strong { color: var(--accent); font-weight: 600; }

/* Hover reveal is gated to real pointers: on touch a tap follows the link to the
   glossary instead of leaving a popover stuck open. Keyboard focus always reveals. */
@media (hover: hover) and (pointer: fine) {
  .term:hover .term-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.term:focus-visible .term-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Content guards ──────────────────────────────────────────────────────── */
/* The help-centre stylesheet ships Tailwind's preflight, which strips list
   markers, flattens headings and forces a base font-size onto every link and
   blockquote paragraph. These re-assert the page's own content typography and
   must stay last in this file. */

main ul { list-style: disc; }
main ol { list-style: decimal; }
main li::marker { color: var(--accent); }
main a { font-size: inherit; line-height: inherit; }
main h1, main h2, main h3, main h4 { line-height: 1.15; }
main blockquote {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  margin: 1.5rem 0;
  padding: 1.1rem 1.35rem;
}
main blockquote p {
  font-family: var(--font-body);
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}
main .notices > blockquote {
  border: 0;
  background: none;
  margin: 0 0 1.75rem;
  padding: 0 0 0 4rem;
}
main .notices > blockquote:nth-of-type(4) {
  margin-top: 2.25rem;
  padding: 1.15rem 1.4rem;
  background: rgba(240, 208, 3, 0.06);
  border: 1px solid var(--caution);
}
main code { display: inline; }
main table { border-collapse: collapse; }
main img { max-width: 100%; height: auto; }

/* ── Footer, dark ────────────────────────────────────────────────────────── */
/* help.blockstream.com has no dark theme: its footer is #fafafa with #181818 ink,
   which reads as a lit slab under this page. Same markup, same layout — only the
   footer's own tokens are re-pointed, so every utility inside inherits the dark
   values. Ground is the header's #0C0D0F so the two ends of the page agree. */

footer {
  --gray-05: #0C0D0F;
  --gray-90: #FFFFFF;
  --gray-95: #FFFFFF;
  --text: #C9CFD6;
  --foreground: #C9CFD6;
  color: var(--body);
}

footer a { color: var(--body); }
footer a:hover { color: var(--text-hi, #FFFFFF); }
footer .text-primary { color: var(--accent); }

/* The social glyphs ship as #0C0C0F ink and upstream has no white variant. */
footer img[alt="X"],
footer img[alt="Linkedin"],
footer img[alt="Telegram"],
footer img[alt="Youtube"] { filter: brightness(0) invert(1); }