/* ------------------------------------------------------------------------
   Le-Space brand layer.
   Palette and fonts from docs/le-space-brand/Le-Space-Brand-Style-Guide.pdf
   in Le-Space/landing. Appended rather than merged so the base can be
   replaced wholesale when Bootswatch is updated: everything below this line
   is ours.
   ------------------------------------------------------------------------ */
:root {
  --ls-deep-space: #0B0E15;   /* background      */
  --ls-nebula:     #141926;   /* cards, panels   */
  --ls-horizon:    #232B3D;   /* borders         */
  --ls-starlight:  #EDF1F8;   /* headings        */
  --ls-stardust:   #A8B3C7;   /* body text       */
  --ls-coral:      #FF6B5B;   /* primary accent  */
  --ls-cyan:       #58C7F3;   /* links, peers    */
}

body {
  background-color: var(--ls-deep-space);
  color: var(--ls-stardust);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, strong, .navbar-brand { color: var(--ls-starlight); }

/* Identifiers -- hashes, addresses, names -- are read character by character,
   which is what the wordmark font is for. */
code, pre, .decimal, td a[href^="/tx/"], td a[href^="/block/"], td a[href^="/address/"], td a[href^="/name/"] {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

a { color: var(--ls-cyan); }
a:hover, a:focus { color: #8ADBF7; }

.nav.navbar, .navbar.footer { background-color: var(--ls-nebula) !important; border-bottom: 1px solid var(--ls-horizon); }
.navbar.footer { border-bottom: 0; border-top: 1px solid var(--ls-horizon); }
.navbar .nav-link { color: var(--ls-stardust); }
.navbar .nav-link:hover, .navbar li.active > .nav-link { color: var(--ls-starlight); }

.card, .card-body { background-color: var(--ls-nebula); border-color: var(--ls-horizon); }
.card-header { background-color: #1A2133; border-bottom-color: var(--ls-horizon); color: var(--ls-starlight); }

.table { color: var(--ls-stardust); }
.table td, .table th { border-color: var(--ls-horizon); }
.table thead th { color: var(--ls-starlight); border-bottom-color: var(--ls-horizon); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .025); }

/* Semantic rows keep their meaning but stop shouting: a tint plus a left edge,
   rather than a full-strength fill under monospace text. */
.table-success, .table .table-success > td { background-color: rgba(62, 220, 151, .10) !important; box-shadow: inset 3px 0 0 #3EDC97; }
.table-danger,  .table .table-danger  > td { background-color: rgba(255, 107, 91, .10) !important; box-shadow: inset 3px 0 0 var(--ls-coral); }
.table-warning, .table .table-warning > td { background-color: rgba(255, 194, 75, .10) !important; box-shadow: inset 3px 0 0 #FFC24B; }
.table-info,    .table .table-info    > td { background-color: rgba(88, 199, 243, .10) !important; }

.btn-primary { background-color: var(--ls-coral); border-color: var(--ls-coral); color: #0B0E15; }
.btn-primary:hover, .btn-primary:focus { background-color: #E8503F; border-color: #E8503F; color: #0B0E15; }
.btn-link { color: var(--ls-cyan); }

.badge-info { background-color: rgba(88, 199, 243, .18); color: var(--ls-cyan); }
.badge-success { background-color: rgba(62, 220, 151, .18); color: #3EDC97; }
.badge-danger { background-color: rgba(255, 107, 91, .18); color: var(--ls-coral); }
.badge-warning { background-color: rgba(255, 194, 75, .18); color: #FFC24B; }

.form-control, .form-control:focus {
  background-color: var(--ls-deep-space);
  border-color: var(--ls-horizon);
  color: var(--ls-starlight);
}
.form-control:focus { border-color: var(--ls-cyan); box-shadow: 0 0 0 .2rem rgba(88, 199, 243, .20); }
.form-control::placeholder { color: #6C7A93; }

pre { background-color: var(--ls-deep-space); border: 1px solid var(--ls-horizon); color: var(--ls-stardust); }
hr { border-top-color: var(--ls-horizon); }
.text-muted { color: #7F8CA3 !important; }

/* German is a compound language: "Schwierigkeit" and "Umlaufmenge" do not fit
   the narrow stat cards and broke mid-word. Hyphenate properly instead -- this
   needs the lang attribute on <html>, which layout.pug now sets. */


/* German compounds are long and the stat cards are narrow. Bootstrap puts
   `word-wrap: break-word` on .card, which breaks "Schwierigkeit" mid-word with
   no hyphen; the cure is to forbid that and hyphenate properly instead, which
   works because layout.pug sets the language on <html>. */
.card-header, .card-header strong {
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Company mark and product name sit side by side, parted by a hairline. The
   name carries the chain, which the mark alone cannot say. */
.navbar-product {
  color: var(--ls-starlight);
  font-weight: 600;
  letter-spacing: .01em;
  padding-left: .85rem;
  margin-left: .1rem;
  margin-right: .9rem;
  border-left: 1px solid var(--ls-horizon);
  align-self: center;
  white-space: nowrap;
}
.navbar-product:hover, .navbar-product:focus { color: var(--ls-cyan); text-decoration: none; }
.navbar-header { display: flex; align-items: center; }
@media (max-width: 575px) {
  /* On a phone the mark plus the name is too much; the name is the one that
     says what this is, so the mark steps aside. */
  .navbar-brand img { width: 110px !important; height: 32px !important; }
  .navbar-product { font-size: .95rem; padding-left: .6rem; }
}

/* The chain name in the header is set like the name on the link-preview card:
   JetBrains Mono, the brand's label face. An explorer is a tool for reading
   identifiers, so the name of the chain is set the way the chain's own hashes
   and names are set -- and the header then looks like the card it shares.
   The word EXPLORER from the card is deliberately NOT repeated here: the menu
   beside it already has an "Explorer" item. */
.navbar-product {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

/* ---- Footer -------------------------------------------------------------
   Three bands on one line: where the code lives, who built it, what the chain
   is doing right now. The middle one carries the brand guide's credit variant
   -- the first node drawn as a heart -- where mark and name link together as a
   single signature, and the mark never falls below 22px, because below that
   the heart stops reading as a heart. */
.navbar.footer {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: 0.82rem;
}
.navbar.footer > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }

.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  width: 100%;
  line-height: 1.2;
}
.footer-credit-lead { color: var(--ls-stardust); }
.footer-credit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ls-starlight);
  font-weight: 500;
  text-decoration: none;
}
.footer-credit-link:hover, .footer-credit-link:focus {
  color: var(--ls-coral);
  text-decoration: none;
}
/* 22px is the floor the brand guide sets for this mark, not a round number. */
.footer-credit-mark { width: 22px; height: 22px; display: block; flex: none; }

/* The fork's origin, kept but not advertised: a rule rather than a word
   separates it, and it only gains contrast when someone reaches for it. */
.footer-upstream {
  color: #6E7A8F;
  font-size: 0.72rem;
  text-decoration: none;
  padding-left: 0.55rem;
  border-left: 1px solid var(--ls-horizon);
}
.footer-upstream:hover, .footer-upstream:focus { color: var(--ls-stardust); text-decoration: none; }

/* One box per mark, whether it arrives as an icon font or as inline SVG, so
   the two sit on the same baseline and answer the pointer the same way. */
.footer .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--ls-stardust);
}
.footer .social-link:hover, .footer .social-link:focus { color: var(--ls-cyan); }
.footer .social-link .fa { font-size: 1.05rem; line-height: 1; }
.social-svg { width: 0.95rem; height: 0.95rem; display: block; fill: currentColor; }

/* Height and peer count are readings, so they take the label face and a quiet
   outline instead of a filled pill shouting a status nobody set. */
.footer-right .badge {
  background-color: transparent;
  border: 1px solid var(--ls-horizon);
  color: var(--ls-stardust);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 400;
  font-size: 0.72rem;
  padding: 0.2rem 0.5rem;
  margin-left: 0.35rem;
}
.footer-right .badge:empty { display: none; }

@media (max-width: 767.98px) {
  .footer-credit { justify-content: flex-start; }
}

/* ---- News banner --------------------------------------------------------
   One item at a time on the front page. Coral is the brand's primary accent
   and the only thing on the page that glows, so it carries the badge and the
   call to action and nothing else competes; the card itself stays on the
   panel colour the rest of the page uses. */
.news-row { margin-bottom: 1rem; }

.news-card {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 1rem 2.75rem 1rem 1.25rem;
  background: linear-gradient(180deg, #17202F 0%, var(--ls-nebula) 100%);
  border: 1px solid var(--ls-horizon);
  /* A coral edge rather than a coral fill: the page keeps its calm, the eye
     still goes here first. */
  border-left: 3px solid var(--ls-coral);
  border-radius: 6px;
}

.news-badge {
  flex: none;
  align-self: flex-start;
  background: var(--ls-coral);
  color: #1A0E0C;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  margin-top: 0.15rem;
}

.news-main { flex: 1 1 22rem; min-width: 0; }
.news-title {
  color: var(--ls-starlight);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.news-text { color: var(--ls-stardust); font-size: 0.88rem; line-height: 1.5; }

.news-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.news-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ls-coral);
  color: #1A0E0C;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.45rem 0.95rem;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
}
.news-cta:hover, .news-cta:focus {
  background: #FF8474;
  color: #1A0E0C;
  text-decoration: none;
}
.news-arrow { transition: transform .15s ease; }
.news-cta:hover .news-arrow { transform: translateX(2px); }

.news-source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ls-stardust);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}
.news-source:hover, .news-source:focus { color: var(--ls-cyan); text-decoration: none; }

.news-close {
  position: absolute;
  top: 0.4rem;
  right: 0.55rem;
  background: none;
  border: 0;
  color: #6E7A8F;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
}
.news-close:hover, .news-close:focus { color: var(--ls-starlight); }

@media (prefers-reduced-motion: reduce) {
  .news-arrow { transition: none; }
  .news-cta:hover .news-arrow { transform: none; }
}

/* The version chip carries a link, so it has to shed the underline and the
   link colour the rest of the page gives anchors, and keep the outline the
   readings beside it wear. */
.footer-version, .footer-version:hover, .footer-version:focus { text-decoration: none; }
.footer-version:hover, .footer-version:focus {
  color: var(--ls-starlight);
  border-color: var(--ls-cyan);
}

/* ---- First-visit hint under the search field ----------------------------
   A note that points back up at the field, not a dialog: it takes no focus,
   blocks nothing, and one labelled checkbox ends it for good. */
.search-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.85rem auto 0;
  padding: 0.55rem 0.9rem;
  background: var(--ls-nebula);
  border: 1px solid var(--ls-horizon);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--ls-stardust);
  text-align: left;
  /* Entry: the script adds .is-shown a frame later, so this has a state to
     move from. */
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s ease;
}
.search-hint.is-shown { opacity: 1; transform: none; }

/* The pointer: a triangle on the top edge, nudging upward at the field. */
.search-hint-pointer {
  position: absolute;
  top: -7px;
  left: 2.25rem;
  width: 12px;
  height: 7px;
  background: var(--ls-coral);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  animation: search-hint-nudge 1.9s ease-in-out infinite;
}
@keyframes search-hint-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-3px); }
}

.search-hint-example {
  background: rgba(255, 107, 91, .12);
  border: 1px solid var(--ls-coral);
  color: var(--ls-coral);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  padding: 0.12rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.search-hint-example:hover, .search-hint-example:focus {
  background: var(--ls-coral);
  color: #1A0E0C;
}

.search-hint-mute {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0 0.25rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--ls-horizon);
  color: #6E7A8F;
  font-size: 0.78rem;
  font-weight: 400;
  cursor: pointer;
}
.search-hint-mute:hover { color: var(--ls-stardust); }
.search-hint-mute-box { margin: 0; cursor: pointer; }

/* The field itself glows three times and then stops -- an animation that never
   ends is a distraction, not a hint. The class goes on the field from the
   script: the hint sits after the field in the document, so no selector here
   can reach back to it. */
#index-search .form-control.is-hinted {
  animation: search-hint-glow 1.6s ease-in-out 3;
}
@keyframes search-hint-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 91, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 107, 91, .18); }
}

@media (prefers-reduced-motion: reduce) {
  .search-hint { transition: none; }
  .search-hint-pointer { animation: none; }
  #index-search .form-control.is-hinted { animation: none; }
}

/* ------------------------------------------------------------------------
   Imprint and privacy notice.

   These are the only pages here meant to be read as prose rather than
   scanned as a table, so they get what prose needs and the rest of the
   explorer does not: a measure short enough to find the next line, room
   between paragraphs, and headings that separate sections without shouting.
   ------------------------------------------------------------------------ */
.legal-body {
  /* ~70 characters. Wider than this and the eye loses the line start. */
  max-width: 44rem;
  color: var(--ls-stardust);
  line-height: 1.65;
}

.legal-body h2 {
  /* Below the card header in weight, above the text -- a section marker, not
     a second title. Numbered by the template, so the number aligns with it. */
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 2rem 0 .6rem;
}
.legal-body h2:first-child { margin-top: 0; }

.legal-body p { margin-bottom: 1rem; }
.legal-body a { color: var(--ls-cyan); }
.legal-body a:hover, .legal-body a:focus { color: var(--ls-coral); }
.legal-body strong { color: var(--ls-starlight); }

/* Cookie names, storage keys and URL shapes are identifiers: read character
   by character, so they take the same face the hashes do. */
.legal-body code {
  font-size: .92em;
  color: var(--ls-starlight);
  background-color: rgba(255, 255, 255, .05);
  padding: .08em .35em;
  border-radius: 3px;
}

.legal-updated {
  margin-top: 2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--ls-horizon);
  font-size: .85rem;
  color: var(--ls-stardust);
  opacity: .75;
}

/* The two links in the footer, sharing a row with the social icons. Set as
   text rather than icons: an imprint has to be recognisable as one, which a
   glyph is not. */
.footer-legal {
  padding-left: .55rem !important;
  padding-right: .55rem !important;
  white-space: nowrap;
}

/* The footer is fixed to the bottom, and below the md breakpoint it wraps from
   one row to three -- which is exactly where these pages end, so the last line
   ("Stand: ...") would sit behind it. The column's 4% margin is a percentage of
   the width and shrinks on a phone just when more room is needed. */
@media (max-width: 767.98px) {
  .legal-body { padding-bottom: 5rem; }
}

/* ------------------------------------------------------------------------
   Mining page.

   The figures come first and are meant to be read at a glance; the charts
   below them are the shape of the same numbers over time. Chart.js needs a
   sized container once maintainAspectRatio is off, which is what the canvas
   wrappers are for -- without a height the canvas grows on every reflow.
   ------------------------------------------------------------------------ */
.mining-tiles { margin-bottom: 1rem; }
.mining-tiles > [class*="col-"] { padding-left: .4rem; padding-right: .4rem; margin-bottom: .8rem; }
.mining-tiles .card-body { padding: .7rem .8rem; }
/* One row of tiles should read as one object: a label that wraps onto a second
   line must not make its tile taller than its neighbours. The column is already
   full height in the flex row, so the card only has to fill it. */
.mining-tiles .card { height: 100%; }

.mining-tile-label {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ls-stardust);
  opacity: .8;
  margin-bottom: .25rem;
}
.mining-tile-value {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  color: var(--ls-starlight);
  line-height: 1.25;
  /* Figures in a row of tiles should line up, not dance as digits change. */
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.mining-card { margin-bottom: 1rem; }
.mining-canvas { position: relative; height: 300px; }
.row .mining-card .mining-canvas { height: 260px; }

/* The notes under each chart carry what the picture cannot say: that the hash
   rate is derived, that the axes are logarithmic, that the miners chart counts
   addresses. Small, but not hidden. */
.mining-note {
  margin: .8rem 0 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ls-stardust);
  opacity: .85;
}
.mining-note:last-child { margin-bottom: 0; }
.mining-note code {
  font-size: .92em;
  background-color: rgba(255, 255, 255, .05);
  padding: .05em .3em;
  border-radius: 3px;
}
.mining-empty { text-align: center; padding: 2rem 0; opacity: .7; }

.mining-noscript { margin-bottom: 1rem; }

.mining-table { font-size: .86rem; }
.mining-table td, .mining-table th { vertical-align: middle; }
.mining-table .text-right { text-align: right; font-variant-numeric: tabular-nums; }
.mining-time { white-space: nowrap; color: var(--ls-stardust); }
/* An address is read character by character, and there is no room for the
   whole of one on a phone -- so it takes the identifier face and is allowed
   to scroll its own cell rather than widening the table. */
.mining-table .mining-address {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
  max-width: 22rem;
  overflow-x: auto;
  white-space: nowrap;
}

/* The wealth doughnut on /richlist. Chart.js sizes itself to its container
   once maintainAspectRatio is off, so the container is what carries the size
   -- the old chart set 300x305 on the div itself. */
.richlist-chart { position: relative; width: 100%; max-width: 320px; height: 320px; margin: 0 auto; }

/* /reward. Sized containers for the same reason the mining charts have them:
   Chart.js fills its parent once maintainAspectRatio is off. */
.reward-donut { position: relative; width: 150px; height: 150px; margin: 0 auto 1rem; }
.reward-chart { position: relative; width: 100%; height: 300px; margin-top: 1.5rem; }

/* The legend beside the chart. These used to be inline background-colour
   literals in the template, next to a chart that carried its own copies of the
   same values -- so the two could drift. Both read the palette now. */
.reward-legend { margin-top: 1.5rem; }
.reward-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 3px; }
.reward-swatch-vote { background-color: var(--ls-cyan); }
.reward-swatch-current { background-color: var(--ls-horizon); }
.reward-swatch-next { background-color: var(--ls-coral); }

/* Candle colours. Green for a rise and red for a fall is what a reader of a
   price chart expects, so these are semantic and deliberately not the brand
   accents -- though the fall borrows the coral, which already reads as the
   warning colour here. */
:root { --ls-up: #4CAF7D; --ls-down: #FF6B5B; }
.market-chart { position: relative; width: 100%; height: 300px; }

/* Wealth distribution bands on /richlist. Defined once, here, and read by both
   the legend swatches and the doughnut -- the old page had one set of literals
   in the table and another inside the chart call, which is how two things that
   describe the same five categories drift apart.

   An ordered ramp for ordered categories: the largest holders through to the
   tail. */
:root {
  --ls-dist-1: #FF6B5B;
  --ls-dist-2: #D58281;
  --ls-dist-3: #AC99A7;
  --ls-dist-4: #82B0CD;
  --ls-dist-5: #58C7F3;
}
.richlist-swatch {
  display: inline-block;
  width: 20px; height: 20px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: middle;
  float: left;
}
.richlist-swatch-1 { background-color: var(--ls-dist-1); }
.richlist-swatch-2 { background-color: var(--ls-dist-2); }
.richlist-swatch-3 { background-color: var(--ls-dist-3); }
.richlist-swatch-4 { background-color: var(--ls-dist-4); }
.richlist-swatch-5 { background-color: var(--ls-dist-5); }