/* nordbastion.com — mobile "app" layer. Additive: loaded AFTER tw.css + site.css, and every rule that changes layout lives inside `@media (max-width:1023.98px)` so the desktop build (>= lg) renders byte-identical to before. Nothing here is a Tailwind utility — the compiled tw.css cannot be rebuilt on this host, so all app chrome uses its own `nbm-` namespace. */ /* Every piece of app chrome is inert until the mobile block below switches it on. Without this the sheets and the install bar would render as ordinary blocks at the end of the desktop page. */ .nbm-tab, .nbm-sheet, .nbm-install, .nbm-top, .nbm-toc-open, .nbm-prog { display: none; } /* ══ 0. Foundations ══════════════════════════════════════════════════ */ :root { --nbm-tab-h: 58px; --nbm-safe-b: env(safe-area-inset-bottom, 0px); --nbm-safe-t: env(safe-area-inset-top, 0px); --nbm-head-h: 64px; --nbm-ease: cubic-bezier(.22, .61, .36, 1); } @media (max-width: 1023.98px) { html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { padding-bottom: calc(var(--nbm-tab-h) + var(--nbm-safe-b)); overscroll-behavior-y: none; } /* Touch feel: no blue flash, no accidental text selection on controls. */ a, button, summary, [role="button"], .nbm-tap { -webkit-tap-highlight-color: transparent; } button, summary, [role="button"] { -webkit-user-select: none; user-select: none; } /* Grid children default to min-width:auto, so one long 
 or a long
     unbroken token stretches the whole track past the viewport and the
     section's overflow-hidden silently CUTS the text. Let them shrink. */
  .grid > * { min-width: 0; }
  pre, code { max-width: 100%; }
  pre { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* iOS zooms the page when a control smaller than 16px takes focus. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }

  /* Safe-area gutters for landscape notches. */
  body > header, body > main, body > footer { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }

  /* ══ 1. Typography floors ═════════════════════════════════════════
     The desktop type scale drops to 10–10.5px for mono eyebrows and
     breadcrumbs. That is unreadable at arm's length on a phone; lift the
     floor without touching the display/heading scale. */
  .text-\[8px\], .text-\[8\.5px\], .text-\[9px\], .text-\[9\.5px\],
  .text-\[10px\], .text-\[10\.5px\],
  .text-\[11px\], .text-\[11\.5px\] { font-size: 12px !important; }
  .font-mono.text-\[9px\], .font-mono.text-\[9\.5px\],
  .font-mono.text-\[10px\], .font-mono.text-\[10\.5px\] { letter-spacing: .13em !important; }
  .text-\[12px\], .text-\[12\.5px\] { font-size: 13px; }
  .text-\[13px\] { font-size: 13.5px; }
  .text-\[14px\], .text-\[14\.5px\] { font-size: 15px; }

  /* ══ 2. Tap targets ═══════════════════════════════════════════════
     Footer / breadcrumb / chip links are 17px tall text runs. Give every
     standalone list link a 44px row without changing the visual rhythm
     of prose links inside paragraphs. */
  footer ul > li > a,
  footer .u-link,
  nav[aria-label] ol > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  footer ul.space-y-3 > li:not(:first-child),
  footer ul.space-y-2\.5 > li:not(:first-child) { margin-top: 0 !important; }
  footer ul > li > a { width: 100%; }
  /* Same treatment for in-page link columns (the home "Explore" block). */
  main ul.space-y-2\.5 > li > a,
  main ul.space-y-3 > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
  }
  main ul.space-y-2\.5 > li:not(:first-child),
  main ul.space-y-3 > li:not(:first-child) { margin-top: 0 !important; }
  /* Standalone mono links that close a card ("GITHUB", "OPEN THE API PAGE")
     are the card's action, not a word inside a sentence: give them a row. */
  main :not(p):not(li):not(dd):not(dt) > a.font-mono,
  main div.flex.font-mono > a,
  main :not(p) > button.font-mono {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Standalone chips / secondary CTAs. */
  a.inline-flex:not(.nbm-tab__i), button.inline-flex:not(.nbm-tab__i),
  .nb-langchip, footer a.block { min-height: 44px; }
  /* Carousel dots are a 2px rule: keep the look, grow the hit area. */
  .carousel-dot { position: relative; }
  .carousel-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 30px);
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .carousel-arrow { min-width: 44px; min-height: 44px; }
  /* 128px of air above the footer is a desktop rhythm; on a phone it reads as
     a dead screen between the last section and the site map. */
  footer.mt-32 { margin-top: 3.5rem; }

  /* Crypto icon strip: 24px icons -> 44px hit area. */
  footer .flex.flex-wrap > img[src*="/crypto/"] { width: 28px; height: 28px; padding: 0; }

  /* Breadcrumb chips: a two-letter crumb still needs a thumb-sized target. */
  nav[aria-label] ol > li > a { padding: 0 6px; margin: 0 -6px; min-width: 32px; justify-content: center; }
  /* Disclosure rows (FAQ, "show more") behave like list rows. */
  main details > summary { min-height: 48px; align-items: center; }
  main details > summary::-webkit-details-marker { display: none; }
  #nbm-install .nbm-install__x { min-width: 44px; min-height: 44px; }
}

/* ══ 3. Bottom tab bar ══════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  .nbm-tab {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    height: calc(var(--nbm-tab-h) + var(--nbm-safe-b));
    padding-bottom: var(--nbm-safe-b);
    background: rgba(9, 12, 17, .92);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--nord-frost);
    transition: transform .28s var(--nbm-ease);
  }
  .nbm-tab[data-hidden="1"] { transform: translateY(calc(100% + 2px)); }

  .nbm-tab__i {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 6px 2px 4px;
    background: none;
    border: 0;
    color: var(--nord-fog);
    font: 500 11px/1 'Inter', system-ui, sans-serif;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color .18s;
  }
  .nbm-tab__i svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .nbm-tab__i span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: .92;
  }
  .nbm-tab__i:active { color: var(--nord-glow); }
  .nbm-tab__i[aria-current="page"], .nbm-tab__i.is-on { color: var(--nord-cyan); }
  .nbm-tab__i[aria-current="page"]::before, .nbm-tab__i.is-on::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 22px;
    height: 2px;
    background: var(--nord-cyan);
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(94, 226, 255, .75);
  }

  /* Centre action — the one thing a visitor is here to do. */
  .nbm-tab__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 0 2px;
    color: var(--nord-void);
    text-decoration: none;
  }
  .nbm-tab__cta i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 34px;
    margin-top: -14px;
    background: var(--nord-amber);
    box-shadow: 0 6px 18px rgba(255, 178, 87, .30);
    transition: transform .16s var(--nbm-ease), background-color .18s;
  }
  .nbm-tab__cta i svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; }
  .nbm-tab__cta:active i { transform: scale(.94); background: var(--nord-glow); }
  .nbm-tab__cta span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nord-amber);
    font: 600 11px/1 'Inter', system-ui, sans-serif;
    letter-spacing: .01em;
  }

  /* ══ 4. Header: compact + hide on scroll-down ═════════════════════ */
  #site-header { transition: transform .3s var(--nbm-ease), background-color .3s; }
  #site-header[data-nbm-hide="1"] { transform: translateY(-100%); }
  #site-header .h-16 { height: 60px; }

  /* ══ 5. Bottom sheets ════════════════════════════════════════════ */
  .nbm-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    visibility: hidden;
  }
  .nbm-sheet.is-open { visibility: visible; }
  .nbm-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 11, .72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .28s var(--nbm-ease);
  }
  .nbm-sheet.is-open .nbm-sheet__scrim { opacity: 1; }
  .nbm-sheet__panel {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    padding-bottom: var(--nbm-safe-b);
    background: var(--nord-steel);
    border-top: 1px solid var(--nord-edge);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .55);
    transform: translateY(101%);
    transition: transform .34s var(--nbm-ease);
    overscroll-behavior: contain;
  }
  .nbm-sheet.is-open .nbm-sheet__panel { transform: translateY(0); }
  .nbm-sheet__panel:focus { outline: none; }
  .nbm-sheet__panel :focus-visible { outline: 2px solid var(--nord-cyan); outline-offset: 2px; }
  .nbm-sheet[data-drag="1"] .nbm-sheet__panel { transition: none; }

  .nbm-sheet__grip {
    flex: none;
    padding: 9px 0 3px;
    text-align: center;
    touch-action: none;
    cursor: grab;
  }
  .nbm-sheet__grip::before {
    content: "";
    display: inline-block;
    width: 38px;
    height: 4px;
    background: var(--nord-edge);
    border-radius: 4px;
  }
  .nbm-sheet__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 20px 12px;
    border-bottom: 1px solid var(--nord-frost);
  }
  .nbm-sheet__title {
    font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nord-cyan);
  }
  .nbm-sheet__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -12px -10px 0;
    background: none;
    border: 0;
    color: var(--nord-fog);
  }
  .nbm-sheet__x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
  .nbm-sheet__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 0 18px;
  }

  /* Menu sheet contents */
  .nbm-grp { padding: 14px 20px 4px; }
  .nbm-grp__t {
    margin: 0 0 6px;
    font: 500 11px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--nord-fog);
    opacity: .62;
  }
  .nbm-grp__l { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0; padding: 0; list-style: none; }
  .nbm-grp--wide .nbm-grp__l { grid-template-columns: 1fr; }
  .nbm-grp__l a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(31, 42, 56, .7);
    color: var(--nord-ice);
    font-size: 15px;
    line-height: 1.25;
    text-decoration: none;
  }
  .nbm-grp__l a:active { color: var(--nord-cyan); }
  .nbm-grp__l a[aria-current="page"] { color: var(--nord-cyan); }

  .nbm-grp__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    background: var(--nord-amber);
    border: 0;
    color: var(--nord-void);
    font: 600 11.5px/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .nbm-grp__cta:active { background: var(--nord-glow); }
  .nbm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 6px;
  }

  /* ══ 5b. Auth + language dialogs become sheets ═══════════════════
     Both share .auth-modal. A centred card fights the soft keyboard on a
     phone; anchored to the bottom edge it behaves like every other sheet. */
  .auth-modal { align-items: flex-end; padding: 0; }
  .auth-modal__panel {
    width: 100%;
    max-width: none !important;
    max-height: 92vh;
    max-height: 92dvh;
    padding-bottom: var(--nbm-safe-b);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translateY(100%) scale(1);
    transition: transform .32s var(--nbm-ease);
    overscroll-behavior: contain;
  }
  .auth-modal.is-open .auth-modal__panel { transform: translateY(0) scale(1); }
  .auth-modal__panel::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 3;
    display: block;
    width: 38px;
    height: 4px;
    margin: 9px auto 0;
    background: var(--nord-edge);
    border-radius: 4px;
  }
  .auth-modal [data-auth-close], .auth-modal [data-lang-close] {
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
  }
  #nb-lang-grid { max-height: 52vh; overscroll-behavior: contain; }

  /* ══ 6. Tables → cards ═══════════════════════════════════════════ */
  /* A table carrying its own min-w-[720px] would still push past the viewport
     and get clipped by the section; the card layout has no use for it. */
  .nbm-tbl {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    border-collapse: collapse;
  }
  .nbm-tbl > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .nbm-tbl > tbody { display: block; }
  .nbm-tbl > tbody > tr {
    display: block;
    margin: 0 0 10px;
    padding: 14px 16px;
    background: rgba(15, 20, 27, .55);
    border: 1px solid var(--nord-frost);
  }
  .nbm-tbl > tbody > tr > th,
  .nbm-tbl > tbody > tr > td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border: 0;
    text-align: left !important;
    white-space: normal !important;
  }
  /* Row header becomes the card title. */
  .nbm-tbl > tbody > tr > th:first-child {
    margin: 0 0 10px;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--nord-frost) !important;
    color: var(--nord-ice) !important;
    font: 600 15px/1.3 'Space Grotesk', 'Inter', sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  /* A card title that is itself a link needs the whole row as its target. */
  .nbm-tbl > tbody > tr > th:first-child a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nbm-tbl > tbody > tr > td + td,
  .nbm-tbl > tbody > tr > th + td { margin-top: 10px; }
  .nbm-tbl > tbody > tr > td[data-nbm-l]::before {
    content: attr(data-nbm-l);
    display: block;
    margin-bottom: 3px;
    font: 500 11px/1.2 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--nord-fog);
    opacity: .6;
  }
  .nbm-tbl > tbody > tr > td { font-size: 13.5px; line-height: 1.55; }
  .nbm-tbl > tbody > tr > td.nbm-empty { display: none; }
  /* The wrapper no longer needs to scroll sideways. */
  .nbm-unscroll { overflow: visible !important; margin-left: 0 !important; margin-right: 0 !important; }
  .nbm-unscroll > .nbm-pad { padding-left: 0 !important; padding-right: 0 !important; min-width: 0 !important; }

  /* ══ 7. Code blocks ══════════════════════════════════════════════ */
  .nbm-code { position: relative; }
  .nbm-code > pre { padding-right: 56px !important; }
  /* A permanent fade under the copy button so a long line reads as "scrolls
     under the control" instead of "text was cut off". */
  .nbm-code::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 84px;
    height: 58px;
    background: linear-gradient(to right, rgba(15, 20, 27, 0), rgba(15, 20, 27, .96) 62%);
    pointer-events: none;
    z-index: 1;
  }
  .nbm-code::after {
    content: "";
    position: absolute;
    top: 58px;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, rgba(6, 8, 11, 0), rgba(6, 8, 11, .92));
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
  }
  .nbm-code[data-more="1"]::after { opacity: 1; }
  .nbm-copy {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--nord-steel);
    border: 1px solid var(--nord-edge);
    box-shadow: -8px 0 12px rgba(15, 20, 27, .85);
    color: var(--nord-fog);
  }
  .nbm-copy svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .nbm-copy:active { color: var(--nord-cyan); border-color: var(--nord-cyan); }
  .nbm-copy.is-done { color: var(--nord-cyan); border-color: var(--nord-cyan); }

  /* ══ 8. Reading progress + back to top ═══════════════════════════ */
  .nbm-prog.is-nav {
    transform: scaleX(1) !important;
    transform-origin: 0 50%;
    animation: nbm-nav 1.1s var(--nbm-ease) infinite;
  }
  @keyframes nbm-nav {
    0%   { clip-path: inset(0 100% 0 0); }
    55%  { clip-path: inset(0 12% 0 0); }
    100% { clip-path: inset(0 0 0 0); opacity: .35; }
  }
  .nbm-prog {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 55;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--nord-cyan), var(--nord-glow));
    pointer-events: none;
  }
  .nbm-top {
    position: fixed;
    right: 14px;
    bottom: calc(var(--nbm-tab-h) + var(--nbm-safe-b) + 14px);
    z-index: 58;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(15, 20, 27, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--nord-frost);
    color: var(--nord-fog);
    opacity: 0;
    transform: translateY(10px) scale(.9);
    pointer-events: none;
    transition: opacity .22s, transform .22s var(--nbm-ease);
  }
  .nbm-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .nbm-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

  /* ══ 9. Table of contents pill (long pages) ══════════════════════ */
  .nbm-toc-open {
    position: fixed;
    left: 14px;
    bottom: calc(var(--nbm-tab-h) + var(--nbm-safe-b) + 14px);
    z-index: 58;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 90px);
    height: 44px;
    padding: 0 15px;
    background: rgba(15, 20, 27, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--nord-frost);
    color: var(--nord-ice);
    font: 500 12.5px/1 'Inter', system-ui, sans-serif;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .22s, transform .22s var(--nbm-ease);
  }
  .nbm-toc-open.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .nbm-toc-open svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
  .nbm-toc-open b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .nbm-toc__l { margin: 0; padding: 0 20px; list-style: none; counter-reset: nbmtoc; }
  .nbm-toc__l a {
    display: flex;
    gap: 12px;
    align-items: baseline;
    min-height: 48px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(31, 42, 56, .7);
    color: var(--nord-ice);
    font-size: 15px;
    line-height: 1.35;
    text-decoration: none;
  }
  .nbm-toc__l a::before {
    counter-increment: nbmtoc;
    content: counter(nbmtoc, decimal-leading-zero);
    flex: none;
    font: 500 11px/1.5 'JetBrains Mono', ui-monospace, monospace;
    color: var(--nord-cyan);
    opacity: .8;
  }
  .nbm-toc__l a.is-on { color: var(--nord-cyan); }

  /* ══ 10. Footer as an accordion ══════════════════════════════════ */
  footer .nbm-acc > h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin: 0 !important;
    padding: 2px 0;
    border-bottom: 1px solid var(--nord-frost);
    cursor: pointer;
  }
  footer .nbm-acc > h4::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 1.5px solid var(--nord-fog);
    border-bottom: 1.5px solid var(--nord-fog);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .22s var(--nbm-ease);
  }
  footer .nbm-acc[data-open="1"] > h4::after { transform: rotate(225deg) translateY(-2px); }
  /* The animated box wraps the list: putting the grid on the