/* ==========================================================================
   BTC Map Android documentation — Material 3 (Material You) styling.

   The color roles below are an M3 "tonal spot" scheme generated from the
   Bitcoin orange brand seed #f7931a (also the app's boosted-marker default),
   which is the same variant Android's dynamic color derives from a wallpaper.
   Shape, type, elevation, motion and state-layer values follow the M3 spec.
   Roboto is self-hosted (see static/fonts/OFL.txt). Nothing here needs JS.
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* --- M3 color roles: light scheme, tonal spot from #f7931a ------------- */
  --md-sys-color-primary: #86521a;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #ffdcbf;
  --md-sys-color-on-primary-container: #6a3b02;
  --md-sys-color-secondary: #735943;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ffdcbf;
  --md-sys-color-on-secondary-container: #59422d;
  --md-sys-color-tertiary: #596239;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #dde8b3;
  --md-sys-color-on-tertiary-container: #424a23;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-background: #fff8f5;
  --md-sys-color-on-background: #221a14;
  --md-sys-color-surface: #fff8f5;
  --md-sys-color-on-surface: #221a14;
  --md-sys-color-surface-variant: #f2dfd1;
  --md-sys-color-on-surface-variant: #51443a;
  --md-sys-color-surface-dim: #e6d7cd;
  --md-sys-color-surface-bright: #fff8f5;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #fff1e8;
  --md-sys-color-surface-container: #fbebe0;
  --md-sys-color-surface-container-high: #f5e5db;
  --md-sys-color-surface-container-highest: #efe0d5;
  --md-sys-color-outline: #837469;
  --md-sys-color-outline-variant: #d5c3b6;
  --md-sys-color-inverse-surface: #372f28;
  --md-sys-color-inverse-on-surface: #fdeee3;
  --md-sys-color-inverse-primary: #feb876;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #86521a;

  /* --- M3 shape ---------------------------------------------------------- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* --- M3 elevation ------------------------------------------------------ */
  --md-sys-elevation-level1:
    0 1px 2px 0 rgba(0, 0, 0, 0.3),
    0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-level2:
    0 1px 2px 0 rgba(0, 0, 0, 0.3),
    0 2px 6px 2px rgba(0, 0, 0, 0.15);

  /* --- M3 state layers --------------------------------------------------- */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-pressed-opacity: 0.12;

  /* --- M3 motion --------------------------------------------------------- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-duration-short: 150ms;

  /* --- Layout ------------------------------------------------------------ */
  --drawer-width: 20rem;
  --content-width: 47.5rem;
  /* Tall phone screenshots are capped so they do not dominate the page. */
  --image-max-height: min(70vh, 40rem);

  /* Background/text of the selected navigation item: the page background with
     the same color as the other navigation labels, so the item reads as an
     inset "aura" against the drawer. The border is the opposite of the
     surface — near-black on light, near-white on dark — at 15% opacity. */
  --nav-active-bg: var(--md-sys-color-surface);
  --nav-active-fg: var(--md-sys-color-on-surface-variant);
  --nav-active-border: color-mix(in srgb, var(--md-sys-color-on-surface) 15%, transparent);

  /* Links stay neutral: the body text color, distinguished by the underline. */
  --link-color: var(--md-sys-color-on-surface);

  /* Section headers use an uppercase overline label, mirroring the
     dashboard's section titles, so they read clearly as headers. */
  --nav-heading-color: var(--md-sys-color-on-surface-variant);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark palette aligned with dashboard.btcmap.org (see its css/styles.css):
       neutral zinc surfaces, Bitcoin-orange accent and the teal brand color. */
    --md-sys-color-primary: #f7931a;
    --md-sys-color-on-primary: #1a1a1d;
    --md-sys-color-primary-container: #4a2e08;
    --md-sys-color-on-primary-container: #ffddb3;
    --md-sys-color-secondary: #79d5be;
    --md-sys-color-on-secondary: #00382c;
    --md-sys-color-secondary-container: #005142;
    --md-sys-color-on-secondary-container: #9cf2da;
    --md-sys-color-tertiary: #7fd3e0;
    --md-sys-color-on-tertiary: #00363f;
    --md-sys-color-tertiary-container: #004e5a;
    --md-sys-color-on-tertiary-container: #a6edfb;
    --md-sys-color-error: #ff8a8c;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-background: #222222;
    --md-sys-color-on-background: #fafafa;
    --md-sys-color-surface: #222222;
    --md-sys-color-on-surface: #fafafa;
    --md-sys-color-surface-variant: #343437;
    --md-sys-color-on-surface-variant: #a1a1aa;
    --md-sys-color-surface-dim: #1a1a1d;
    --md-sys-color-surface-bright: #343437;
    --md-sys-color-surface-container-lowest: #1a1a1d;
    --md-sys-color-surface-container-low: #2a2a2d;
    --md-sys-color-surface-container: #2e2e31;
    --md-sys-color-surface-container-high: #343437;
    --md-sys-color-surface-container-highest: #3c3c40;
    --md-sys-color-outline: rgba(255, 255, 255, 0.13);
    --md-sys-color-outline-variant: rgba(255, 255, 255, 0.07);
    --md-sys-color-inverse-surface: #fafafa;
    --md-sys-color-inverse-on-surface: #222222;
    --md-sys-color-inverse-primary: #86521a;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-surface-tint: #f7931a;

    /* Selected navigation item: a neutral #222222 aura; the label stays white
       rather than matching the grey navigation labels. */
    --nav-active-bg: #222222;
    --nav-active-fg: var(--md-sys-color-on-surface);
  }
}

/* --- Reset and base ----------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  /* M3 body-large */
  font-family: "Roboto", "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.03125rem;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link-color);
}

::selection {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: var(--md-sys-shape-corner-extra-small);
}

/* Skip link, visible only on keyboard focus. */
.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  transform: translateY(-200%);
  padding: 0.75rem 1.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  /* M3 label-large */
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Shell -------------------------------------------------------------- */

.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.page {
  display: flex;
  align-items: flex-start;
}

/* M3 navigation drawer. */
.sidebar {
  position: sticky;
  top: 0;
  flex: 0 0 var(--drawer-width);
  width: var(--drawer-width);
  height: 100vh;
  overflow-y: auto;
  padding: 1rem 0.75rem 2rem;
  background: var(--md-sys-color-surface-container-low);
}

.content {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Brand -------------------------------------------------------------- */

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0.75rem 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
}

.brand-logo {
  width: auto;
  height: 2.5rem;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

/* M3 title-large */
.brand-name {
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* M3 label-medium */
.brand-sub {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.03125rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* --- Navigation --------------------------------------------------------- */

/* Section label: an uppercase overline in the dashboard's section-title
   style (11/16, 500, 0.08em). It sits at the drawer edge while the items are
   indented, so the grouping reads as nested. */
.nav-heading {
  margin: 1.25rem 1rem 0.75rem 1rem;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nav-heading-color);
}

.nav-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* M3 navigation-drawer item: 56dp tall, fully rounded active indicator. */
.nav-list a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  margin: 0;
  padding: 0 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  /* M3 label-large */
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.00625rem;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  transition:
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.nav-list a:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.nav-list a:active {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.nav-list a[aria-current="page"] {
  background: var(--nav-active-bg);
  color: var(--nav-active-fg);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--nav-active-border);
}

.nav-list a[aria-current="page"]:hover {
  background: color-mix(in srgb, var(--nav-active-bg) 92%, var(--nav-active-fg) 8%);
}

.nav-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.nav-button:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}

.nav-button:active {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

.nav-button svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.nav-button .icon-close {
  display: none;
}

/* The checkbox is visually hidden, so reflect its keyboard focus on the button. */
#nav-toggle:focus-visible ~ .page .nav-button {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.nav-toggle:checked ~ .page .nav-button .icon-menu {
  display: none;
}

.nav-toggle:checked ~ .page .nav-button .icon-close {
  display: block;
}

/* --- Prose -------------------------------------------------------------- */

.prose {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
  overflow-wrap: break-word;
}

.prose > :first-child {
  margin-top: 0;
}

/* M3 headline-large */
.prose h1 {
  margin: 0 0 1.5rem;
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* M3 title-large */
.prose h2 {
  margin: 3rem 0 1rem;
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* M3 title-medium */
.prose h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.009375rem;
}

.prose :is(h1, h2, h3, h4) {
  scroll-margin-top: 5.5rem;
}

.prose p,
.prose ul,
.prose ol,
.prose table,
.prose blockquote,
.prose pre {
  margin: 0 0 1rem;
}

.prose p {
  /* M3 body-large */
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.03125rem;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose li {
  margin: 0.25rem 0;
}

.prose li::marker {
  color: var(--md-sys-color-primary);
}

.prose strong {
  font-weight: 700;
}

.prose a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose hr {
  height: 1px;
  margin: 2.5rem 0;
  border: 0;
  background: var(--md-sys-color-outline-variant);
}

/* --- Code --------------------------------------------------------------- */

.prose code {
  padding: 0.125rem 0.375rem;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface);
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
}

.prose pre {
  padding: 1rem;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-high);
  overflow-x: auto;
}

.prose pre code {
  padding: 0;
  background: none;
}

/* --- Blockquote as an M3 tonal surface ---------------------------------- */

.prose blockquote {
  padding: 1rem 1.25rem;
  border: 0;
  border-left: 0.25rem solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}

/* --- Tables as M3 data tables ------------------------------------------- */

.prose table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  overflow: hidden;
  /* M3 body-medium */
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.015625rem;
}

.prose th,
.prose td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  /* M3 label-large */
  font-weight: 500;
  letter-spacing: 0.00625rem;
  white-space: nowrap;
}

.prose tr:last-child td {
  border-bottom: 0;
}

/* --- Images ------------------------------------------------------------- */

.prose img {
  display: block;
  max-width: 100%;
  max-height: var(--image-max-height);
  width: auto;
  height: auto;
  margin: 1.5rem auto;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-level1);
}

/* Two images in one paragraph (e.g. two screenshots) go side by side when
   there is room; the mobile block below stacks them again. */
.prose p:has(> img + img) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1.5rem;
}

.prose p:has(> img + img) img {
  margin: 0;
  max-width: 48%;
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 52rem) {
  .page {
    flex-direction: column;
    align-items: stretch;
  }

  /* The drawer collapses into an M3 top app bar with an expanding menu. */
  .sidebar {
    position: sticky;
    z-index: 3;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    padding: 0.5rem 1rem;
    background: var(--md-sys-color-surface);
  }

  .sidebar-top {
    min-height: 3.5rem;
    padding: 0;
  }

  .nav-button {
    display: inline-flex;
  }

  .sidebar nav {
    display: none;
    max-height: calc(100vh - 5rem);
    padding: 0.5rem 0 0.5rem;
    overflow-y: auto;
  }

  .nav-toggle:checked ~ .page .sidebar nav {
    display: block;
  }

  .prose {
    padding: 1.5rem 1rem 4rem;
  }

  .prose p:has(> img + img) {
    display: block;
  }

  .prose p:has(> img + img) img {
    max-width: 100%;
    margin: 1.5rem auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}