/* The filled action. Two colours, white and navy, and that is the whole palette: Andrew's
 * call on 2026-08-23, replacing the blue gradient every pill used to carry.
 *
 * The contrast is the one thing that got BETTER. White on the old #0582CA end measured
 * 4.16:1 and failed AA at the 14px bold these labels are set in; white on navy is 15.08:1.
 * The blue was the accessibility problem, not the thing protecting against one. */
:root {
  /* A bottom-right radial, not a flat fill: nq lint warns on a flat colored button, and every
   * Nimiq pill carries the gradient. Nimiq's own navy is #260133 to #1F2348 and its lighter
   * stop is the purple Andrew removed, so this uses the two navies already on the site,
   * lighter at bottom right the way every other Nimiq gradient is anchored. */
  --action-bg: radial-gradient(100% 100% at bottom right, #1F2348, #151833);
  --action-fg: #fff;
  --focus: #1F2348;
}

/* Site chrome: the burger and the slide-out menu.
 *
 * Shared by every page rather than inlined per page, which is the one thing that has repeatedly
 * gone wrong on this site. Everything else here is still inlined and self-contained; this file
 * and chrome.js are same-origin, so the pages still make zero third-party requests.
 *
 * The interaction is lifted from andjroo.com (public/pages.css): a right-anchored panel that
 * slides in, a backdrop, and a mirrored burger whose lines shorten toward the bottom. Retoned
 * from that site's near-black to this one's light tokens. */

/* The OS tap highlight drew its own blob behind these on touch. The controls have
 * their own pressed states; the blob is noise. */
.burger, .menu-close, .flag-pop, .ff-send, .menu-ask {
  -webkit-tap-highlight-color: transparent;
}

.burger {
  position: absolute; top: 26px; right: 24px; z-index: 30;
  display: block; background: none; border: 0; padding: 8px;
  cursor: pointer; color: var(--ink);
  border-radius: 500px;
}
.burger svg { display: block; }
.burger:focus-visible { outline: 2px solid var(--focus, #1F2348); outline-offset: 2px; }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(31, 35, 72, 0.6);          /* navy scrim, never black (rule 11) */
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.25, 0, 0, 1);
}

.menu-panel:focus { outline: 0; }
.menu-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45;
  width: min(86vw, 360px);
  background: var(--surface);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
  border-left: 1px solid var(--hair);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0, 0, 1);
  display: flex; flex-direction: column;
  padding: 24px 24px 20px;
  overflow-y: auto;
  /* Keep a drag inside the panel inside the panel. Without this, a swipe that runs past the
   * panel's own scroll extent CHAINS to the page underneath and drags it, which reads as the
   * menu juddering against something behind it. `body.menu-open { overflow: hidden }` does
   * not stop this on iOS, where the chain happens at the compositor. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body.menu-open { overflow: hidden; }
body.menu-open .menu-panel { transform: none; }
body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }

.menu-close {
  align-self: flex-end; background: none; border: 0; padding: 8px; margin: -8px -8px 20px 0;
  cursor: pointer; color: var(--ink); border-radius: 500px; line-height: 0;
}
.menu-close:focus-visible { outline: 2px solid var(--focus, #1F2348); outline-offset: 2px; }

/* Search. Inset box-shadow, never a border (rule 1), and a full pill. */
.menu-search {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--page); border: 0; border-radius: 500px;
  box-shadow: inset 0 0 0 2px var(--hair);
  padding: 12px 20px;
  transition: box-shadow 0.2s cubic-bezier(0.25, 0, 0, 1);
}
.menu-search::placeholder { color: var(--eyebrow); }
.menu-search:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ink); }

.menu-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--eyebrow); margin: 22px 0 2px;
}
/* The panel starts calmer than it used to: the search pill gets real room under it before
 * the first section begins, rather than the list crowding straight up against it. Andrew's
 * call. Held to 40px because the panel has to stay off the scrollbar on a phone, and it was
 * measured at every current size afterwards rather than guessed. */
.menu-label:first-of-type { margin-top: 36px; }

.menu-list { display: flex; flex-direction: column; }
.menu-list a {
  display: block; padding: 12px; margin: 0 -12px; border-radius: 6px;
  border-bottom: 1px solid var(--hair);
  font-size: 16px; font-weight: 600; line-height: 1.35;
}
.menu-list a:last-child { border-bottom: 0; }
.menu-list a:hover { color: var(--ink); background: var(--page); }
/* Categories. One <details> each, in the same row language as everything else in the panel,
 * because a category is a heading you can press and not a control of its own kind.
 *
 * Andrew's call on 2026-08-23: Research is what the blog has been, Releases is what ships
 * through it (nimmesh first, then the pool and Hashmark), Comparisons is NIM held against
 * something else. An empty category does not render, so the list never shows a folder that
 * opens onto nothing. */
.cat { border-bottom: 1px solid var(--hair-2); }
.cat:last-of-type { border-bottom: 0; }
.cat > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px;
  font-size: 16px; font-weight: 700; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
/* Safari draws its own disclosure triangle and ignores list-style on the summary itself. */
.cat > summary::-webkit-details-marker { display: none; }
.cat > summary:hover { color: var(--eyebrow); }
.cat > summary:focus-visible { outline: 2px solid var(--focus, #1F2348); outline-offset: 2px; border-radius: 4px; }
.cat-end { display: inline-flex; align-items: center; gap: 10px; }
.cat-count { font-size: 13px; font-weight: 700; color: var(--eyebrow); font-variant-numeric: tabular-nums; }
.cat-chev { color: var(--eyebrow); transition: transform 0.2s var(--ease, cubic-bezier(0.25, 0, 0, 1)); }
.cat[open] .cat-chev { transform: rotate(90deg); }
/* The posts inside sit a step quieter than the category that holds them, and drop their own
 * separators: the category's rule already divides the groups, and a second set of lines
 * inside would read as more categories. */
.cat-posts a { padding: 8px 2px; border-bottom: 0; }
.cat-posts a:last-child { padding-bottom: 10px; }
.cat-posts .m-date { margin-bottom: 1px; }
.cat-posts a { font-size: 15px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .cat-chev { transition: none; }
}

.menu-list .m-date {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 3px;
}
.menu-empty { padding: 12px 0; color: var(--ink-2); font-size: 15px; }

/* The three things you can DO here, in one section under one label, in the same quiet row
 * language the article list already uses.
 *
 * They were three full-width pills, stacked, each ~76px tall: 230px of panel before the
 * support button even started, and the panel scrolled on a phone. Worse, it gave three
 * navigation links the same weight as the one action in the menu, so the contest, the queue
 * and Support were hard to tell apart at a glance. Rows here, one filled pill there. */
.menu-more { margin-bottom: 4px; }
.menu-ask {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--hair-2);
  font-size: 16px; font-weight: 700; color: var(--ink);
  transition: color 0.2s cubic-bezier(0.25, 0, 0, 1);
}
.menu-more .menu-ask:last-child { border-bottom: 0; }
.menu-ask:hover { color: var(--eyebrow); }
.menu-ask .m-arrow { color: var(--eyebrow); }

/* The wallet is the fourth element in one column, not a button floating in the footer. The
 * search pill, the article rows and the Submit pill all run the panel's full width and share
 * its left edge; a centred pill was the only thing breaking that, which read as an accident.
 *
 * app-shell's own pill is an inline-flex that hugs its label, so the width has to be pushed
 * onto its inner elements rather than the slot. Both states are covered: .nq-connect before
 * you connect, .nq-wallet__btn after. */
.menu-wallet { margin-top: auto; padding-top: 24px; }
.menu-wallet:empty { display: none; }
.menu-wallet .nq-wallet { display: block; }
.menu-wallet .nq-connect,
.menu-wallet .nq-wallet__btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-backdrop, .menu-search, .menu-ask { transition: none; }
}

/* "Read next", the link from one post to the other.
 *
 * It used to be a bare <a> inside a paragraph, which gave it no affordance at all: on the
 * blocked post it sat as the fourth item in the Method list and read as another method note.
 * It is a card now, in the same visual language as the article cards on the index, because it
 * points at the same kind of object and should look like it. */
.read-next {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 56px 0 0;
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 10px;
  transition: box-shadow 0.2s cubic-bezier(0.25, 0, 0, 1);
}
.read-next:hover { box-shadow: 0 8px 56px rgba(0, 0, 0, 0.111); }
.read-next .rn-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 6px;
}
.read-next .rn-title { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.read-next .rn-arrow { color: var(--eyebrow); font-size: 22px; line-height: 1; flex: none; }

@media (max-width: 560px) {
  .read-next { margin-top: 40px; padding: 20px 22px; }
  .read-next .rn-title { font-size: 17px; }
}

/* Flag-as-incorrect popover: appears under a text selection on post pages. Same
 * pill-and-surface language as the menu; sits under the menu layers (z 40/45). */
.flag-pop {
  position: absolute; z-index: 35;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: 500px;
  padding: 8px 14px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(31, 35, 72, 0.18);
}
.flag-pop:focus-visible { outline: 2px solid var(--focus, #1F2348); outline-offset: 2px; }

/* capped like every other body paragraph: uncapped it ran the full 1032px wrap, 138ch */
.flag-hint { font-size: 15px; color: var(--ink-2); margin: 56px 0 0; max-width: 66ch; }

/* The header band is the page's own top row, pinned. No second header, no reveal,
 * no border: the band shares the page background and the content slides under it. */
.site-top {
  position: sticky; top: 0; z-index: 30;
  background: var(--page);
}
.site-top .hero-top { padding-bottom: 12px; }

.menu-flag-note { font-size: 13px; color: var(--ink-2); margin: 14px 2px 0; }

/* The flag note card: quote, optional note, live byte budget, send. */
.flag-form {
  position: absolute; z-index: 35;
  width: min(86vw, 340px);
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: 10px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(31, 35, 72, 0.18);
}
.flag-form .ff-quote {
  font-size: 13px; color: var(--ink-2); margin: 0 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flag-form .ff-note {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--page); border: 0; border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--hair); padding: 10px 12px;
}
.flag-form .ff-note:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--focus, #1F2348); }
.flag-form .ff-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.flag-form .ff-bytes { font-size: 12px; color: var(--eyebrow); }
.flag-form .ff-send {
  font: inherit; font-size: 14px; font-weight: 700; color: #fff;
  background: var(--action-bg); color: var(--action-fg);
  border: 0; border-radius: 500px; padding: 9px 16px; cursor: pointer;
}
.flag-form .ff-send:disabled { background-image: none; background: rgba(31, 35, 72, 0.12); color: var(--ink-2); cursor: default; }

/* The prediction contest toast. NAVY, not the white surface .flag-form uses: this card
 * floats over a #F8F8F8 page, and white on near-white barely reads. It takes the dark
 * treatment the posts already ship on their first table column and their tooltip, so
 * this is the site's existing dark card rather than a third one: the canonical Nimiq
 * navy radial, white text, white-60% secondary, white-12% hairlines.
 * Below the menu's z-index, because the menu is navigation and this is an invitation.
 * Injected by chrome.js only while the contest is open. */
/* Shape and breakpoints are @nimiq/vue-components BottomOverlay, the bar the wallet slides
 * up from the bottom, converted from its 8px-root rem values into px because this page has
 * a 16px root: bottom 2rem, max-width 110rem, radius 1.25rem, shadow 0 0 2.5rem.
 *
 * An earlier note here argued the card had to sit flush BECAUSE a gap made it read as
 * hovering over the prose, and at one scroll position it looked like an underline under a
 * heading. That was true of the shape it was then, a full-bleed band lifted off the edge.
 * It is not true of this one: centred, capped at 880px and carrying the component's own
 * shadow, it reads as a card over the page rather than as a rule under a heading.
 *
 * The one place this deliberately LEAVES the component: BottomOverlay drops to full bleed
 * under 450px, squaring its bottom corners against the edge. Andrew looked at that on a
 * phone and wanted the gap there too, which is the width he actually reads the site at, so
 * the card keeps its inset all the way down. The bottom gap adds the safe-area inset on
 * top, because on an iPhone the home indicator sits inside the viewport and a 12px gap
 * measured to the viewport floor is not a 12px gap to the eye. */
.toast {
  position: fixed; z-index: 34;
  left: 50%; transform: translateX(-50%) translateY(calc(100% + 16px));
  width: calc(100% - 48px); max-width: 880px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  /* Flat navy. This was a #260133-to-#1F2348 radial, Nimiq's own canonical dark treatment,
   * and the #260133 end reads purple against a monochrome site. Andrew's call: the site is
   * navy and grey, and the one colour it spends is the blue on an action. */
  background: var(--navy, #1F2348);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.11);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 0, 0, 1), transform 0.3s cubic-bezier(0.25, 0, 0, 1);
}
/* translateX has to survive the slide, so "no transform" is the centred one, not none. */
.toast.in { opacity: 1; transform: translateX(-50%); }

@media (max-width: 912px) {
  .toast { bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
}
/* Where the component would go full bleed. It keeps the inset instead, and only tightens
 * the padding so the narrower card does not spend its width on margins. */
@media (max-width: 450px) {
  .toast { padding: 18px 20px; }
}
/* The content keeps the page's own measure, so on a wide screen the band spans the
 * viewport while the words stay in the same column as the article. */
.toast-in { max-width: 720px; margin: 0 auto; position: relative; text-align: center; }
/* Symmetric room for the close button, so the title stays centred and still clears it
 * on a narrow phone, where the two collided. */
.toast-title { margin: 0; padding: 0 36px; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.3; }
.toast-body { margin: 8px auto 0; max-width: 52ch; font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; }
.toast-row { display: flex; justify-content: center; margin-top: 16px; }
/* Blue reads on navy only as a filled pill carrying white text, never as text or an
 * outline. That is the one sanctioned blue-on-dark, and it keeps the CTA the same
 * shape and colour as every other action on the site. */
/* INVERTED. Every other action on the site is a navy pill on a light page; this one sits on
 * the navy card, where a navy pill is invisible against it. Two colours means the action is
 * whichever of them the surface is not: white pill, navy label, 15.08:1 either way round. */
.toast-go {
  font: inherit; font-size: 15px; font-weight: 700; text-align: center;
  background: #fff; color: #1F2348;
  border-radius: 500px; padding: 12px 32px;
}
/* Dismiss is the same glyph and the same corner as the menu's close, so the site has
 * one way to shut a panel rather than a button that argues with it. */
.toast-no {
  position: absolute; top: -4px; right: -8px;
  background: none; border: 0; padding: 8px; cursor: pointer; line-height: 0;
  color: rgba(255, 255, 255, 0.6); border-radius: 500px;
}
.toast-no:hover { color: #fff; }
/* On the navy card the ring has to be white: navy on navy is invisible, and the light blue
 * that used to do this job is gone with the rest of the colour. */
.toast-go:focus-visible, .toast-no:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.toast, .toast-go, .toast-no { -webkit-tap-highlight-color: transparent; }

/* The card still appears, it just stops sliding. It still has to stay centred, so this
 * clears the vertical offset without clearing the centring. */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.in { transition: none; transform: translateX(-50%); }
}


/* The wallet pill's dropdown, re-anchored where WE mount it.
 *
 * app-shell positions the menu `absolute; top:calc(100% + 10px)` against `.nq-wallet`, which
 * is correct until its own mobile rule fires: under 560px it sets `.nq-wallet{position:static}`
 * and clamps the menu to the viewport edges instead. That assumes the pill lives in a TOP BAR,
 * where anchoring to the page and dropping full width is exactly right.
 *
 * Both places this site mounts a pill are mid-page: inside /predict/'s form, and inside the
 * slide-out menu panel. With the pill static the menu resolves against a far ancestor, so
 * `top:100%` means 100% of THAT element. Measured on a 390px phone: the menu opened 188px
 * below the pill instead of 10px.
 *
 * The shell injects its stylesheet into <head> at runtime, so it always lands after this file.
 * These selectors carry an extra class on purpose; source order cannot win here. */
@media (max-width: 560px) {
  .wallet-slot .nq-wallet,
  .menu-wallet .nq-wallet {
    position: relative;
  }
  .wallet-slot .nq-wallet__menu,
  .menu-wallet .nq-wallet__menu {
    left: auto;
    right: 0;
    min-width: min(280px, 100%);
    max-width: 92vw;
  }
}

/* The like bar. A reader's verdict on a post, sent to the same wallet as a flag and priced
 * the same: 1 luna to say a post was useful, any amount above 1 NIM to say it was worth
 * more. Injected by chrome.js on post pages only.
 *
 * It borrows the toast's geometry, which is @nimiq/vue-components BottomOverlay converted
 * from that library's 8px root into this page's 16px one, so the two bottom-edge elements
 * are the same card in two tones rather than two different cards. The toast is NAVY because
 * it is a transient invitation that has to win attention; this one is permanent, so it takes
 * the quieter .flag-form treatment: white surface, hairline, the same shadow.
 *
 * When both are on screen the toast keeps the outside position and publishes --toast-h, so
 * the bar stacks above it instead of underneath it. */
.likebar {
  position: fixed; z-index: 33;
  left: 50%; transform: translateX(-50%) translateY(calc(100% + 24px));
  width: calc(100% - 48px); max-width: 880px;
  bottom: calc(16px + var(--toast-h, 0px) + env(safe-area-inset-bottom));
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.11);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease, cubic-bezier(0.25, 0, 0, 1)),
              transform 0.3s var(--ease, cubic-bezier(0.25, 0, 0, 1)),
              bottom 0.3s var(--ease, cubic-bezier(0.25, 0, 0, 1));
}
/* translateX has to survive the slide, so "arrived" is the centred transform, not none. */
.likebar.in { opacity: 1; transform: translateX(-50%); pointer-events: auto; }

/* The bar is fixed, so without this it covers the last lines of the footer at the bottom
 * of the page. The height is measured and published by chrome.js rather than guessed,
 * because the bar grows when the tip field opens and on a narrow phone it wraps. */
body.has-likebar footer { padding-bottom: calc(64px + var(--likebar-h, 0px)); }

.lb-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lb-said { min-width: 0; }
.lb-q { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.lb-count { margin: 2px 0 0; font-size: 13px; color: var(--eyebrow); line-height: 1.3; }
/* Empty until the chain answers, and empty again if it does not. A count that cannot be
 * read is not a count of zero, and this bar only prints what it can stand behind. */
.lb-count:empty { display: none; }

.lb-acts, .lb-form { display: flex; align-items: center; gap: 8px; flex: none; }
/* The hidden ATTRIBUTE loses to a display rule, so without this the tip field renders beside
 * the buttons it is meant to replace, in a card sized for one row. Both halves of this bar
 * are toggled by [hidden], so the reset belongs here rather than on either one. */
/* Scoped to BOTH surfaces. It was scoped to .likebar alone and the menu copy, which lives
 * outside it, reproduced the exact bug this rule exists to fix: the tip field rendered beside
 * the buttons it replaces. A reset that names one of two identical surfaces is half a fix. */
/* THE hidden ATTRIBUTE LOSES TO A DISPLAY RULE. Every element in this file that is toggled
 * with [hidden] also carries a display, so without this reset it renders anyway.
 *
 * This has now bitten three times: the tip field rendering beside the buttons it replaces,
 * then the same thing again on the menu copy because the first fix named only one of the two
 * surfaces, and then the contest link. That last one is the one that mattered: the menu's
 * "Guess the 2026 report" row ships `hidden` and is only revealed by initPredict, which
 * refuses to reveal it once the deadline has passed. The guard worked perfectly and the row
 * showed anyway, so the menu went on inviting people to a contest that had closed.
 *
 * So the reset is scoped to the SURFACES, not to the components inside them. A new [hidden]
 * control anywhere in the panel or the bar is covered without anyone remembering to add it. */
.menu-panel [hidden],
.likebar [hidden] { display: none; }

.lb-like, .lb-tip, .lb-send {
  font: inherit; font-size: 14px; font-weight: 700;
  border: 0; border-radius: 500px; cursor: pointer; white-space: nowrap;
  padding: 9px 18px;
}
/* Like is the primary action, so it is the site's filled blue pill, the same shape and
 * gradient as every other action here. */
.lb-like, .lb-send {
  color: #fff;
  background: var(--action-bg); color: var(--action-fg);
  display: inline-flex; align-items: center; gap: 7px;
}
/* The secondary half of the pair, and it is a GREY FILL, not an outline.
 *
 * This was an outlined pill, which is what @nimiq/style uses for an INPUT (rule 1: never a
 * border on an input, it is an inset box-shadow). A button next to a button is a different
 * thing: nimiq-style's own .nq-button-s is `background-color: rgba(31,35,72,.07)` with
 * `border: none`, deepening to .12 on hover. That is how Nimiq puts two buttons side by side,
 * one filled primary and one tinted secondary, and it is why the outlined version read as a
 * text field sitting next to a button. */
.lb-tip {
  color: var(--ink); background: rgba(31, 35, 72, 0.07);
}
.lb-tip:hover { background: rgba(31, 35, 72, 0.12); }

/* Already liked. GOLD, not red: red on this site means an error or something permanent and
 * fatal, and the palette's gold is also its NIM colour, which is what a like is made of.
 * Gold carries navy text at 6.9:1; white on gold would be 2.0:1 and unreadable. */
.lb-like.is-liked, .lb-like:disabled {
  background-image: none; background: rgba(233, 178, 19, 0.16);
  color: var(--ink); cursor: default;
}
.lb-like.is-liked .lb-heart { color: var(--gold); }
.lb-heart { display: block; flex: none; }

.lb-x {
  background: none; border: 0; padding: 6px; cursor: pointer; line-height: 0;
  color: var(--ink-2); border-radius: 500px; flex: none;
}
.lb-x:hover { color: var(--ink); }
.lb-x svg { width: 18px; height: 18px; }

/* The amount. One free field rather than preset chips: the ask was "as many NIM you want",
 * and a set of chips would put a ceiling on that. The unit sits inside the field so the
 * number and its denomination read as one control. */
.lb-amt-wrap { position: relative; display: block; }
.lb-amt {
  width: 122px; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--page); border: 0; border-radius: 500px;
  box-shadow: inset 0 0 0 2px var(--hair);
  padding: 8px 48px 8px 16px;
}
/* An input's focus is the inset ring deepening, nothing more. The button outline rule
 * below must NOT also hit this field, or the two rings stack into the concentric-circles
 * look Andjroo flagged. Navy, not light-blue: the chrome gate keeps machinery two-colour. */
.lb-amt:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--focus, #1F2348); }
/* Rejected: below 1 NIM, above the typo ceiling, or not a number. Red is right here, it is
 * an error rather than a warning. */
.lb-amt.bad { box-shadow: inset 0 0 0 2px var(--bad); }
.lb-usd {
  font-size: 13px; font-weight: 700; color: var(--eyebrow);
  white-space: nowrap; align-self: center;
}
.lb-usd:empty { display: none; }

.lb-unit {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; color: var(--eyebrow); pointer-events: none;
}

.likebar button:focus-visible { outline: 2px solid var(--focus, #1F2348); outline-offset: 2px; }
.likebar button { -webkit-tap-highlight-color: transparent; }

/* Where the toast already narrows, so the two bottom cards keep the same inset. */
@media (max-width: 912px) {
  .likebar { bottom: calc(12px + var(--toast-h, 0px) + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
}

/* Phone. The question and the buttons stop competing for one row: the words take the first
 * line and the actions the second, full width, so the targets are as wide as the card. */
@media (max-width: 560px) {
  .lb-in { flex-direction: column; align-items: stretch; gap: 10px; }
  .lb-acts, .lb-form { justify-content: stretch; }
  .lb-like, .lb-tip { flex: 1 1 0; justify-content: center; }
  .lb-amt-wrap { flex: 1 1 auto; }
  .lb-amt { width: 100%; }
  .lb-send { flex: none; }
}

/* The bar still appears, it just stops sliding. It still has to stay centred, so this
 * clears the vertical offset without clearing the centring. */
@media (prefers-reduced-motion: reduce) {
  .likebar { transition: none; transform: translateX(-50%); }
}


/* The menu's "This post" block. The same controls the bottom bar carries, plus the flag,
 * so all three on-chain verdicts a reader can give -- useful, worth paying for, wrong --
 * sit in one place instead of two of them being discoverable only by accident.
 *
 * It stacks rather than sitting on one row: the panel is at most 360px and these are three
 * buttons, so a row would crush them the way seven chips once crushed .entry-who. */
.menu-post { margin-top: 20px; }
.menu-post .lb-menu { display: block; }
.menu-post .lb-said { margin-bottom: 10px; }
.menu-post .lb-q { font-size: 14px; }
.menu-post .lb-acts, .menu-post .lb-form { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-post .lb-like, .menu-post .lb-tip, .menu-post .lb-flag {
  flex: 1 1 auto; justify-content: center;
}
/* Flagging is the rarest of the three and the only destructive-sounding one, so it takes the
 * full width under the other two rather than competing with them for the row. */
.menu-post .lb-flag { flex-basis: 100%; }
.menu-post .lb-amt-wrap { flex: 1 1 auto; }
.menu-post .lb-amt { width: 100%; }

.lb-flag {
  font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap;
  color: var(--ink); background: rgba(31, 35, 72, 0.07);
  border: 0; border-radius: 500px; padding: 9px 18px; cursor: pointer;
}
.lb-flag:hover { background: rgba(31, 35, 72, 0.12); }


/* Support the blog. Sits in the menu on EVERY page, so it is deliberately not about whichever
 * article you are on: that is the like bar's job and it lives on the article. */
/* The only filled thing in the panel, which is what makes it read as the action. */
.menu-support { margin-top: 16px; }
.menu-give {
  width: 100%; font: inherit; font-size: 15px; font-weight: 700;
  color: var(--action-fg); background: var(--action-bg);
  border: 0; border-radius: 500px; padding: 12px 20px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sup-form { display: flex; align-items: center; gap: 8px; }
.sup-form .lb-amt-wrap { flex: 1 1 auto; }
.sup-form .lb-amt { width: 100%; }