/* The chrome every page shares: sidebar, header (logo, search, GitHub / Contacts / Sponsor), the
   shortcuts sheet, scroll-to-top, footer and scrollbar. The one copy: every page links it BEFORE its
   own stylesheet, which supplies the tokens and may override a rule here. */

/* ===== FONT STAND-INS =====
   Local faces scaled to the web fonts' width and line metrics (measured), named after every font
   stack, so the text keeps its wrap while Space Grotesk and JetBrains Mono load and the swap shifts
   nothing (CLS). */
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); size-adjust: 108.12%; ascent-override: 90.64%; descent-override: 26.82%; line-gap-override: 0%; }
@font-face { font-family: 'JetBrains Mono Fallback'; src: local('Courier New'), local('Liberation Mono'), local('Menlo'); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

/* ===== SIDEBAR (site switcher) ===== */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 38px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 4px;
  gap: 3px;
  background: rgba(17, 15, 31, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--border-subtle);
  transition: transform 0.18s ease;
}
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }

.side-btn,
.side-toggle {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  transition: color 0.12s, background 0.12s;
}
.side-btn:hover,
.side-toggle:hover {
  color: var(--text-bright);
  background: rgba(255, 255, 255, 0.05);
}
.side-btn.active {
  color: var(--accent);
  background: var(--accent-glow);
}
.side-btn svg { width: 20px; height: 20px; }
.side-btn.active::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
.side-btn:focus-visible,
.side-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* The hide button is drawn like the .side-expand tab that replaces it, and ends 8px above the
   viewport bottom like the tab does, so hiding leaves the tab right under the cursor. */
.side-toggle {
  margin-top: auto;
  margin-bottom: 4px;
  width: 30px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(28, 22, 56, 0.97);
  color: var(--text-nav);
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.side-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: rgba(38, 30, 76, 0.98);
}

.side-btn[data-tooltip]::after,
.side-toggle[data-tooltip]::after,
.side-expand[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 9px;
  background: rgba(17, 15, 31, 0.97);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 500;
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 200;
}
.side-btn:hover::after,
.side-btn:focus-visible::after,
.side-toggle:hover::after,
.side-toggle:focus-visible::after,
.side-expand:hover::after,
.side-expand:focus-visible::after { opacity: 1; }

/* Expand handle: a tab on the left edge, shown only while the sidebar is hidden. It sits where the
   hide button was, so it turns up right where the visitor just clicked, and it is drawn bright
   enough to be found again later. */
.side-expand {
  position: fixed;
  left: 0;
  bottom: 8px;
  width: 26px;
  height: 46px;
  z-index: 110;
  display: none;
  place-items: center;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 9px 9px 0;
  background: rgba(28, 22, 56, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.35);
  color: var(--text-nav);
  cursor: pointer;
  transition: width 0.12s, color 0.12s, background 0.12s, border-color 0.12s;
}
.side-expand:hover,
.side-expand:focus-visible {
  width: 32px;
  color: var(--accent);
  border-color: var(--accent-border);
  background: rgba(38, 30, 76, 0.98);
}
.side-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.sidebar-collapsed .side-expand { display: grid; }

/* Thin rule between Home and the sections, so the list reads as "site root, then sections". */
.side-sep {
  flex-shrink: 0;
  width: 20px;
  height: 1px;
  margin: 3px 0;
  background: rgba(221, 202, 250, 0.3);
}

/* Phones: tooltips never show on touch and the rail costs a tenth of the width, so it starts
   hidden here. A visitor who taps the tab gets body.sidebar-shown from sidebar.js, remembered
   like the desktop choice. Same breakpoint as PHONE_QUERY in sidebar.js. */
@media (max-width: 680px) {
  body:not(.sidebar-shown) { padding-left: 0; }
  body:not(.sidebar-shown) .sidebar { transform: translateX(-100%); }
  body:not(.sidebar-shown) .side-expand { display: grid; }
  /* The page gutter is 14px here, so a 26px tab sat on the cards and the footer text. The tab
     narrows to fit inside the gutter, and an invisible strip keeps the tap target finger-wide. */
  .side-expand,
  .side-expand:hover,
  .side-expand:focus-visible { width: 12px; }
  .side-expand { border-radius: 0 7px 7px 0; }
  .side-expand svg { width: 11px; height: 11px; }
  .side-expand::before {
    content: '';
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 0;
    width: 30px;
  }
}

/* Text for screen readers and crawlers only: the page's h1, which the visible logo already says. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(17, 15, 31, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 12px;
  height: 68px;
  display: flex;
  align-items: center;
  position: relative;
}

/* --- Logo --- */
.logo {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--text);
  margin-top: 5px;
}

.logo-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.logo-icon svg { width: 100%; height: 100%; display: block; }

.logo-text {
  font-size: 25px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.4px;
  line-height: 1.2;
}

.logo-sub {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
}

/* --- Header action buttons --- */
.header-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}

.action-wrap {
  position: relative;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-nav);
  font-family: 'Space Grotesk', 'Space Grotesk Fallback', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.action-btn:hover,
.action-wrap.open .action-btn {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-glow);
}

.action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.action-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: rgba(17, 15, 31, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  z-index: 200;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.action-wrap.open .action-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-nav);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.dropdown-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-bright);
}

.dropdown-link svg { flex-shrink: 0; }

.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 6px;
}

.dropdown-copy-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.1s;
}

.dropdown-copy-row:hover { background: rgba(255, 255, 255, 0.04); }

/* The Donate link wears a wallet row's shape, with an open-in-new-tab mark where a wallet has its copy button. */
.dropdown-donate { text-decoration: none; }
.dropdown-donate:hover .dropdown-addr { color: var(--text-bright); }

.dropdown-coin {
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  width: 46px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dropdown-net {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0.6;
  letter-spacing: 0.3px;
}

.dropdown-addr {
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.dropdown-copy-btn,
.dropdown-go {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  line-height: 0;
}

.dropdown-copy-btn:hover,
.dropdown-donate:hover .dropdown-go {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-glow);
}

.dropdown-copy-btn.copied {
  color: var(--success-color);
  border-color: rgba(92, 184, 92, 0.3);
  background: rgba(92, 184, 92, 0.06);
}

/* --- Search --- */
.search-container {
  position: absolute;
  left: 50%;
  top: calc(50% + 5px);
  transform: translateX(-50%) translateY(-50%);
  width: 464px;
  max-width: calc(100% - 480px);
}

/* A page-centred search only fits a wide header. Narrower, the centred box runs into the title
   on the left and the GitHub button on the right, so it joins the row between them instead.
   Measured on the header, not the viewport, because the sidebar takes 38px of it when shown. */
.header-inner { container-type: inline-size; }
@media (min-width: 901px) {
  @container (max-width: 1180px) {
    .logo { margin-right: 16px; }
    .search-container + .header-actions { margin-left: 16px; }
    .search-container {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      flex: 1 1 auto;
      width: auto;
      max-width: 464px;
      min-width: 0;
      margin: 10px auto 0;
    }
  }
  /* Tighter still, the action buttons drop their labels, the same way they do below 900px. */
  @container (max-width: 1010px) {
    .search-container ~ .header-actions { gap: 4px; }
    .search-container ~ .header-actions .action-btn-label { display: none; }
    .search-container ~ .header-actions .action-btn { padding: 0 9px; gap: 0; }
  }
}

.search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: 37px;
  background: var(--border-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 42px 0 40px;
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  font-size: 14.5px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: none;
}

.search-input:focus-visible {
  outline: none;
}

.search-input::placeholder { color: var(--text-muted); }

.search-clear {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s;
  line-height: 0;
}
.search-clear:hover { color: var(--text); }

/* ===== SCROLL TO TOP ===== */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  right: 8px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.2s;
  z-index: 100;
}

.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: all;
}

.scroll-top-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: rgba(224, 205, 255, 0.07);
}

.scroll-top-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


/* ===== FOOTER ===== */
.footer {
  border-top: 1px solid var(--border-subtle);
  padding: 22px 24px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}

.footer a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.footer a:hover { text-decoration: underline; }
.footer p + p { margin-top: 4px; }
.disclaimer { font-size: 13px; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #110f1f; }
::-webkit-scrollbar-thumb { background: #3a3260; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
* { scrollbar-width: thin; scrollbar-color: #3a3260 #110f1f; }

/* ===== KEYBOARD SHORTCUTS ===== */
/* The sheet opened by `?` or the sidebar keyboard button (js/lib/keys.js), and the `/` hint in the
   search field. Duplicated in cli/css/styles.css and diagrams/css/styles.css, like the sidebar. */
.side-keys { margin-top: auto; }
.side-keys + .side-toggle { margin-top: 6px; }

.keys-dialog {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}
.keys-dialog::backdrop {
  background: rgba(8, 6, 16, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.keys-inner {
  padding: 16px 20px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.keys-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.keys-head h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-bright);
}
.keys-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.keys-close:hover {
  color: var(--accent);
  background: var(--accent-glow);
  border-color: var(--accent-border);
}
.keys-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.keys-group { margin-top: 12px; }
.keys-group h3 {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.keys-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
}
.keys-row dd {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.keys-plus,
.keys-or {
  font-size: 12px;
  color: var(--text-dim);
}
.keys-or { margin: 0 3px; }
.keys-dialog kbd,
.search-kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: var(--text-bright);
}

.search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}
.search-input:focus ~ .search-kbd,
.search-input:not(:placeholder-shown) ~ .search-kbd { display: none; }
@media (hover: none) {
  .search-kbd,
  .side-keys { display: none; }
  .side-keys + .side-toggle { margin-top: auto; }
}

/* The narrowest phones: an empty field shows no clear button and no `/` hint, so the room kept for
   them on the right goes to the placeholder, which otherwise ends cut off. */
@media (max-width: 400px) {
  .search-input:placeholder-shown { padding-right: 12px; }
  .search-kbd { display: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .logo-sub { font-size: 12px; }
  .header-inner {
    height: auto;
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .logo { margin-top: 0; flex: 0 0 100%; }
  .logo-icon { width: 44px; height: 44px; }
  .logo-text { font-size: 23px; }
  .search-container {
    position: relative;
    transform: none;
    left: auto;
    top: auto;
    flex: 1;
    width: auto;
    max-width: none;
    min-width: 0;
  }
  .search-input { height: 37px; font-size: 13.5px; }
  .header-actions { gap: 4px; margin-left: 0; }
  .action-btn-label { display: none; }
  .action-btn { padding: 0 9px; gap: 0; }
  .action-dropdown { max-width: calc(100vw - 28px); right: 0; left: auto; }
}

@media (hover: none) {
  .scroll-top-btn { min-width: 44px; min-height: 44px; }
}

@media (max-width: 400px) {
  .logo-text { font-size: 18px; }
  .logo-icon { width: 26px; height: 26px; }
  .action-btn { height: 30px; }
}

/* ===== PRINT ===== */
/* The sidebar is fixed, so a printout would repeat it down the margin of every page. */
@media print {
  .sidebar, .side-expand { display: none !important; }
  body { padding-left: 0 !important; }
}