/* ==========================================================================
   Bitcoin After Life — manual theme
   Palette taken from the bitcoin-after.life landing page ("Slate" system).
   Change a value here and it propagates through the whole manual.
   ========================================================================== */

:root {
  --bal-accent:       #2d6cdf;
  --bal-accent-soft:  #e6eefc;
  --bal-accent-line:  #cfe0fb;
  --bal-accent-dark:  #2559b8;
  --bal-ink:          #1a2027;
  --bal-muted:        #5b6672;
  --bal-bg:           #eef1f4;
  --bal-panel:        #ffffff;
  --bal-line:         #dfe4ea;
  --bal-line-strong:  #cbd2da;
  --bal-ok:           #1f9d57;
  --bal-ok-soft:      #e3f4ea;
  --bal-warn:         #b5701b;
  --bal-warn-soft:    #fbf0df;
  --bal-btc:          #f7931a;
  --bal-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* -------- Light scheme ---------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:          var(--bal-accent);
  --md-primary-fg-color--light:   #4f85e6;
  --md-primary-fg-color--dark:    var(--bal-accent-dark);
  --md-primary-bg-color:          #ffffff;
  --md-primary-bg-color--light:   rgba(255, 255, 255, .7);

  --md-accent-fg-color:           var(--bal-accent-dark);
  --md-accent-fg-color--transparent: var(--bal-accent-soft);
  --md-accent-bg-color:           #ffffff;

  --md-default-bg-color:          var(--bal-bg);
  --md-default-fg-color:          var(--bal-ink);
  --md-default-fg-color--light:   var(--bal-muted);
  --md-default-fg-color--lighter: var(--bal-line-strong);
  --md-default-fg-color--lightest: var(--bal-line);

  --md-typeset-color:             var(--bal-ink);
  --md-typeset-a-color:           var(--bal-accent);

  --md-code-bg-color:             #e4e9ef;
  --md-code-fg-color:             var(--bal-ink);

  --md-footer-bg-color:           var(--bal-ink);
  --md-footer-bg-color--dark:     #12171c;
}

/* Content sits on white panels, like the cards on the website. */
[data-md-color-scheme="default"] .md-main__inner .md-content__inner {
  background: var(--bal-panel);
  border: 1px solid var(--bal-line);
  border-radius: 10px;
  padding: 8px 28px 40px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .05);
}

/* -------- Dark scheme ----------------------------------------------------- */
/* The website has no dark mode; this is a faithful dark counterpart built
   around the same accent blue. */
[data-md-color-scheme="slate"] {
  --md-hue: 215;

  --md-primary-fg-color:          #5b8ce8;
  --md-primary-fg-color--light:   #7ea6ee;
  --md-primary-fg-color--dark:    var(--bal-accent);
  --md-primary-bg-color:          #0f1419;

  --md-accent-fg-color:           #7ea6ee;
  --md-accent-fg-color--transparent: rgba(45, 108, 223, .12);

  --md-default-bg-color:          #12171c;
  --md-typeset-a-color:           #7ea6ee;

  --md-code-bg-color:             #1a2027;
  --md-footer-bg-color:           #0f1419;
}

[data-md-color-scheme="slate"] .md-main__inner .md-content__inner {
  background: #171d24;
  border: 1px solid #262e37;
  border-radius: 10px;
  padding: 8px 28px 40px;
}

/* -------- Typography ------------------------------------------------------ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -.015em;
}
.md-typeset h1 { color: var(--md-default-fg-color); }
.md-typeset h2 { border-bottom: 1px solid var(--md-default-fg-color--lightest); padding-bottom: .3em; }

.md-typeset code,
.md-typeset pre > code { font-family: var(--bal-mono); }

/* Code blocks use the site's dark "ink" background in both schemes. */
[data-md-color-scheme="default"] .md-typeset pre > code {
  background: var(--bal-ink);
  color: #e8edf3;
}

/* -------- Tables ---------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
  font-size: .78rem;
}
.md-typeset table:not([class]) th {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* -------- Admonitions mapped to the site's semantic colours --------------- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  font-size: .76rem;
  /* Material sets `overflow: visible` on <details>, so any child background
     (title bar, icon, chevron) that doesn't share the container's 10px
     radius shows through as a notch at the corners. Clipping here fixes the
     whole class of mismatch at once, regardless of which child causes it. */
  overflow: hidden;
}

:root {
  --md-admonition-icon--note: var(--md-admonition-icon--abstract);
}
.md-typeset .admonition.info,
.md-typeset .admonition.note,
.md-typeset details.info,
.md-typeset details.note      { border-color: var(--bal-accent); }
.md-typeset .info > .admonition-title,
.md-typeset .note > .admonition-title,
.md-typeset .info > summary,
.md-typeset .note > summary   { background: var(--bal-accent-soft); }

.md-typeset .admonition.tip,
.md-typeset details.tip       { border-color: var(--bal-ok); }
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary    { background: var(--bal-ok-soft); }

.md-typeset .admonition.warning,
.md-typeset details.warning   { border-color: var(--bal-warn); }
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary { background: var(--bal-warn-soft); }

[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .info > summary,
[data-md-color-scheme="slate"] .md-typeset .note > summary   { background: rgba(45, 108, 223, .16); }
[data-md-color-scheme="slate"] .md-typeset .tip > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .tip > summary     { background: rgba(31, 157, 87, .16); }
[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .warning > summary { background: rgba(181, 112, 27, .18); }

/* Admonition bodies get dense fast — give the text room to breathe. */
.md-typeset .admonition > p,
.md-typeset .admonition > ul,
.md-typeset .admonition > ol { line-height: 1.65; }
.md-typeset .admonition > p + p,
.md-typeset .admonition > p + ul,
.md-typeset .admonition > ul + p { margin-top: .7em; }
.md-typeset .admonition > ul { padding-left: 1.1em; }
.md-typeset .admonition > ul > li + li { margin-top: .35em; }

/* Title: slightly larger than the body, so the box has a clear entry point. */
.md-typeset .admonition-title { font-size: .8rem; letter-spacing: .005em; }


/* FAQ accordions read better with a little separation. */
.md-typeset details { margin-bottom: .5rem; }

/* -------- Screenshots ----------------------------------------------------- */
img.screenshot {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20, 30, 50, .08);
  max-width: 100%;
}
img.screenshot + em,
p > img.screenshot + em {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  font-style: normal;
  color: var(--md-default-fg-color--light);
}

/* -------- Misc ------------------------------------------------------------ */
.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card { border-radius: 10px; }

.md-typeset a.btc,
.md-typeset .btc { color: var(--bal-btc); font-weight: 700; }

:focus-visible { outline: 2px solid var(--bal-accent); outline-offset: 2px; }


/* -------- Brand ----------------------------------------------------------- */
/* Header sits on the accent blue, so it uses the white mark directly
   (docs/assets/logo.svg is a copy of logo-mark-white.svg). */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

/* Homepage lockup: the mark plus the name set in Inter — the same construction
   the website uses in its top bar, and immune to the Optima dependency of the
   SVG wordmark. */
.bal-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  margin: 1.4rem 0 2.2rem;
  text-align: center;
}
.bal-hero img { width: 116px; height: auto; }
.bal-hero .name {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--md-default-fg-color);
}
.bal-hero .tagline {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}
/* Swap black / white mark with the colour scheme. */
.bal-hero .logo-dark  { display: none; }
[data-md-color-scheme="slate"] .bal-hero .logo-light { display: none; }
[data-md-color-scheme="slate"] .bal-hero .logo-dark  { display: inline; }

/* -------- Diagrams -------------------------------------------------------- */
/* Wide technical diagrams: full content width, light frame, no drop shadow
   (they already have their own internal panels). */
img.diagram {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  background: var(--bal-panel);
  padding: 4px;
}
[data-md-color-scheme="slate"] img.diagram { background: #f6f8fa; }
img.diagram + em {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  font-style: normal;
  color: var(--md-default-fg-color--light);
}

/* -------- Status colour swatches (WILL tab table) ------------------------- */
/* Usage in Markdown:  <span class="sw" style="--c:#8AFA6C"></span> Bright green */
.md-typeset .sw {
  display: inline-block;
  width: .78em;
  height: .78em;
  margin-right: .45em;
  vertical-align: -.06em;
  border-radius: 3px;
  background: var(--c);
  border: 1px solid rgba(0, 0, 0, .28);
}

/* -------- WILL-tab status table ------------------------------------------- */
/* Fixed layout with explicit column widths, so every row is one line high
   and the rhythm stays even. */
/* Material renders tables as `display: inline-block`, which makes the browser
   ignore `table-layout: fixed` and auto-distribute the spare width — that is
   what was inflating the "#" column. Force a real table box first. */
.md-typeset .status-table table:not([class]) {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.md-typeset .status-table th:nth-child(1),
.md-typeset .status-table td:nth-child(1) {
  width: 1.5em;
  text-align: left;
  padding-left: .5em;
  padding-right: .1em;
  color: var(--md-default-fg-color--light);
}
/* Stage sits right next to the number, not a column-width away. */
.md-typeset .status-table th:nth-child(2),
.md-typeset .status-table td:nth-child(2) {
  width: 7.5em;
  padding-left: .35em;
}
/* Longest cell is "Azure-green #73F3C8" ≈ 12em of content. 14.5em with tight
   padding clears it without stealing space the Meaning column needs. */
.md-typeset .status-table th:nth-child(4),
.md-typeset .status-table td:nth-child(4) {
  width: 14.5em;
  padding-left: .6em;
  padding-right: .5em;
}
.md-typeset .status-table td:nth-child(2),
.md-typeset .status-table td:nth-child(4) { white-space: nowrap; }
.md-typeset .status-table td { vertical-align: middle; }
.md-typeset .status-table code {
  font-size: .8em;
  padding: .1em .3em;
}
.md-typeset .status-table .sw { margin-right: .35em; }

/* Below ~55em the fixed widths stop fitting; let it scroll instead of wrap. */
@media screen and (max-width: 55em) {
  .md-typeset .status-table { overflow-x: auto; }
  .md-typeset .status-table table:not([class]) { min-width: 34em; }
}

/* -------- "question" admonition (end-of-page FAQ prompt, and the FAQ page
   itself) ---------------------------------------------------------------- */
/* Material ships a lime green (#64dd17) for this type — border, background
   tint, the "?" icon, AND the expand/collapse chevron all use it. Realign
   every one of those with the brand accent blue. */
.md-typeset .admonition.question,
.md-typeset details.question       { border-color: var(--bal-accent); }
.md-typeset .question > .admonition-title,
.md-typeset .question > summary    { background: var(--bal-accent-soft); }
.md-typeset .question > .admonition-title::before,
.md-typeset .question > summary::before { background-color: var(--bal-accent); }
.md-typeset .question > .admonition-title::after,
.md-typeset .question > summary::after  { color: var(--bal-accent); }
[data-md-color-scheme="slate"] .md-typeset .question > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .question > summary { background: rgba(45, 108, 223, .16); }

/* -------- Wider navigation sidebar ---------------------------------------- */
/* Material defaults: .md-sidebar = 12.1rem, .md-grid = 61rem.
   The nav labels in this manual are long ("Wallet recovery use case (or wallet
   backup)") and wrapped onto three lines. Widening the sidebar by 4rem (+33%)
   and the grid by the same 4rem keeps the centre column at its original
   36.8rem — the extra space comes from the unused margin on the right.
   Only applies where the primary sidebar is actually shown. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary   { width: 16.1rem; }
  /* Same treatment for the table of contents: its longest heading
     ("The building block: absolute time-locks") needs ~232px against the
     158px Material allows, so it wrapped onto two lines. */
  .md-sidebar--secondary { width: 16.7rem; }
  /* 61rem default + 4rem (primary) + 4.6rem (secondary) — the centre column
     keeps its original 36.8rem. */
  .md-grid               { max-width: 69.6rem; }
}

/* -------- Sidebar left indent ---------------------------------------------- */
/* Material's nav text sits almost flush against the browser edge (~.4rem).
   Give the whole left sidebar some breathing room, so section titles and
   links read as a column with a margin, not text stuck to the window edge. */
.md-sidebar--primary .md-sidebar__inner {
  padding-left: 1rem;
}

/* -------- Sidebar hierarchy: section titles vs. their pages ---------------- */
/* On desktop Material gives every .md-nav__link inside the primary sidebar
   the same left padding (.6rem .8rem), regardless of nesting — its per-level
   indent rules only exist for the mobile/merged nav. That makes section
   titles ("User guide") and the pages under them ("Heirs and shares") sit at
   the same x position, with no visual hierarchy. Nudge just the pages right. */
.md-nav--primary .md-nav__item--nested > .md-nav .md-nav__link {
  padding-left: 1.175rem; /* Material's default .8rem + 6px */
}


/* -------- Let the widened sidebar actually be used ------------------------ */
/* Material pins the nav's text column to 11.5rem via
   `padding-right: calc(100% - 11.5rem)` (inside an @supports block for
   webkit scrollbars), leaving the rest as dead padding. Because we widened
   .md-sidebar--primary to 16.1rem, all 4 extra rem went into that padding —
   the labels kept wrapping next to visibly empty space. Re-derive it from
   the new width, keeping Material's ~.6rem scrollbar gutter. */
@media screen and (min-width: 76.25em) {
  [dir="ltr"] .md-sidebar--primary .md-sidebar__inner {
    padding-right: calc(100% - 15.5rem);
  }
  /* The clamp applies to both sidebars, so the table of contents needs the
     same treatment against its own 16.7rem width. */
  [dir="ltr"] .md-sidebar--secondary .md-sidebar__inner {
    padding-right: calc(100% - 16.1rem);
  }
}

/* -------- Compact table (wide comparison tables) -------------------------- */
/* Default table body is .78rem; 66% ≈ .515rem so a 4-column comparison fits
   without horizontal scroll. Header cells scale down proportionally too. */
.md-typeset .compact-table table:not([class]) { font-size: .515rem; }
.md-typeset .compact-table table:not([class]) th { font-size: .46rem; }
.md-typeset .compact-table code { font-size: .9em; }

/* -------- Numbered step list (examples page) ------------------------------ */
.md-typeset .steps { counter-reset: step; margin: 1.3em 0; }
.md-typeset .steps .step {
  position: relative;
  padding: .15rem 0 .15rem 3rem;
  margin: 0 0 1.2rem;
  min-height: 2rem;
}
/* number badge */
.md-typeset .steps .step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.05rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bal-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
}
/* connector line between badges */
.md-typeset .steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .97rem;
  top: 2.2rem;
  bottom: -1.2rem;
  width: 2px;
  background: var(--bal-line);
}
.md-typeset .steps .step > :first-child { margin-top: 0; }
.md-typeset .steps .step > :last-child { margin-bottom: 0; }
/* the Material icon at the start of each step title, tinted accent */
.md-typeset .steps .step .twemoji {
  color: var(--bal-accent);
  margin-right: .15rem;
}
.md-typeset .steps .step .twemoji svg {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -.2rem;
}
/* admonitions nested inside a step sit tighter */
.md-typeset .steps .step .admonition { margin: .6rem 0 0; }

/* -------- Nav section icons (added by nav-section-icons.js) ---------------- */
.md-nav--primary .nav-sec-ico {
  display: inline-flex;
  vertical-align: -.15em;
  margin-right: .4em;
}
.md-nav--primary .nav-sec-ico svg {
  width: .95rem;
  height: .95rem;
  fill: var(--bal-accent);
}

/* -------- Homepage "Where to start" card icons ---------------------------- */
.md-typeset .grid.cards .card-ico {
  color: var(--bal-accent);
  margin-right: .35em;
}
.md-typeset .grid.cards .card-ico svg {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -.2rem;
}

/* -------- Page-title (H1) icons ------------------------------------------- */
/* A themed Material icon sits at the start of each page's H1 (added in the
   Markdown as :material-...:). Make it larger than body icons and tint accent. */
.md-typeset h1 .twemoji {
  color: var(--bal-accent);
  margin-right: .5rem;
}
.md-typeset h1 .twemoji svg {
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: -.28rem;
}