/* New Future, single stylesheet. Replaces style.css, style2.css and every inline style="" in the PHP.
   No framework, no build step. Drop Bootstrap from home.php before using this file. */

/* ---------------------------------------------------------------- tokens */
:root {
  /* surface */
  --nf-bg:            #000000;   /* page */
  --nf-panel:         #0d0d0d;   /* card / content panel */
  --nf-panel-alt:     #0a0a0a;   /* side columns, footer strip */
  --nf-row:           #101010;   /* zebra row */
  --nf-input:         #111111;
  --nf-line:          #2e2e2e;   /* panel border */
  --nf-line-soft:     #1c1c1c;   /* row divider */
  --nf-line-strong:   #3a3a3a;   /* input border, bar frame */

  /* ink */
  --nf-text:          #cfcac2;
  --nf-text-strong:   #ffffff;
  --nf-muted:         #8b857b;
  --nf-faint:         #5a554d;
  --nf-disabled:      #4f4b45;

  /* accent */
  --nf-amber:         #f0a500;   /* section bars, money, primary action */
  --nf-amber-hi:      #ffd166;   /* hover */
  --nf-amber-ink:     #000000;   /* text on amber */
  --nf-amber-bg:      #0f0d08;   /* amber-tinted panel */
  --nf-amber-line:    #4a3a10;

  --nf-highlight-1:   #d24b3f;   /* red/bad accent for secondary sections */
  --nf-highlight-1-bg: #1a0d0b;
  --nf-highlight-1-line: #7a2a22;

  --nf-highlight-2:   #5ec84f;   /* green/good accent for tertiary sections */
  --nf-highlight-2-bg: #0e1a0c;
  --nf-highlight-2-line: #3d6b36;

  --nf-good:          #5ec84f;   /* reward, health, unlocked */
  --nf-good-bg:       #0e1a0c;
  --nf-good-line:     #3d6b36;

  --nf-bad:           #d24b3f;   /* errors, planned fail outcome */
  --nf-bad-bg:        #1a0d0b;
  --nf-bad-line:      #7a2a22;

  /* type */
  --nf-font:          Verdana, Geneva, Tahoma, sans-serif;
  --nf-mono:          ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --nf-display:       Anton, Impact, "Arial Narrow", sans-serif;
  --nf-fs-micro:      8px;    /* stat captions */
  --nf-fs-label:      9px;    /* uppercase labels, badges */
  --nf-fs-small:      10px;
  --nf-fs-base:       11px;   /* nav, secondary copy */
  --nf-fs-body:       12px;   /* table cells */
  --nf-fs-lead:       13px;
  --nf-fs-num:        17px;   /* money, XP */
  --nf-fs-num-lg:     26px;   /* countdown */
  --nf-track-label:   .14em;  /* letter-spacing on uppercase labels */

  /* space, 4px base */
  --nf-1: 4px;  --nf-2: 6px;  --nf-3: 8px;  --nf-4: 10px;
  --nf-5: 12px; --nf-6: 14px; --nf-7: 18px; --nf-8: 24px;

  /* layout */
  --nf-col-left:  206px;
  --nf-col-right: 182px;
  --nf-shell-max: 1280px;
}

/* ---------------------------------------------------------------- reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--nf-bg); color: var(--nf-text);
  font: 400 var(--nf-fs-body)/1.5 var(--nf-font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--nf-amber); text-decoration: none; }
a:hover { color: var(--nf-amber-hi); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
table { border-collapse: collapse; width: 100%; }
img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------- shell */
.nf-shell { max-width: var(--nf-shell-max); margin: 0 auto; display: flex; align-items: stretch;
            border-left: 1px solid var(--nf-line); border-right: 1px solid var(--nf-line); }
.nf-shell__left  { flex: 0 0 var(--nf-col-left);  background: var(--nf-panel-alt); border-right: 1px solid var(--nf-line); }
.nf-shell__main  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #0b0b0b; }
.nf-shell__right { flex: 0 0 var(--nf-col-right); background: var(--nf-panel-alt); border-left: 1px solid var(--nf-line); }
.nf-shell__page  { flex: 1 1 auto; padding: var(--nf-6); }

.nf-banner { display: flex; height: 118px; background: #000; border-bottom: 1px solid var(--nf-line); }
.nf-banner__word { flex: 1 1 auto; min-width: 0; padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; }
.nf-wordmark { font: 400 44px/.86 var(--nf-display); color: var(--nf-amber); text-transform: uppercase; }
.nf-wordmark span { color: var(--nf-text); }
.nf-banner__img { flex: 0 0 340px; border-left: 1px solid var(--nf-line); }

/* ---------------------------------------------------------------- section bar (the amber header) */
.nf-bar { background: var(--nf-amber); color: var(--nf-amber-ink); padding: 5px var(--nf-3);
          font: 700 var(--nf-fs-small)/1 var(--nf-font); letter-spacing: .1em; text-transform: uppercase;
          display: flex; justify-content: space-between; gap: var(--nf-3); }
.nf-bar--muted { background: var(--nf-line-strong); color: var(--nf-text); }
.nf-bar--highlight-1 { background: var(--nf-highlight-1); color: #1a1a1a; }
.nf-bar--highlight-2 { background: var(--nf-highlight-2); color: #1a1a1a; }
.nf-bar__note { opacity: .65; font-weight: 400; }

/* ---------------------------------------------------------------- panel */
.nf-panel { border: 1px solid var(--nf-line); background: var(--nf-panel); }
.nf-panel__body { padding: var(--nf-6); }
.nf-stack { display: flex; flex-direction: column; gap: var(--nf-5); }

/* ---------------------------------------------------------------- nav */
.nf-nav { display: flex; flex-direction: column; padding: 7px 0 9px; border-bottom: 1px solid var(--nf-line); }
.nf-nav a, .nf-nav span { display: flex; gap: var(--nf-2); padding: var(--nf-1) var(--nf-4); font-size: var(--nf-fs-base); }
.nf-nav a:hover { background: #151208; text-decoration: none; }
.nf-nav a::before, .nf-nav span::before { content: "-"; color: var(--nf-faint); }
.nf-nav span { color: var(--nf-disabled); }          /* not-yet-built action */

/* ---------------------------------------------------------------- stat block */
.nf-stats { padding: 9px 9px var(--nf-5); border-bottom: 1px solid var(--nf-line); }
.nf-stat__label { font: 700 var(--nf-fs-micro)/1 var(--nf-font); letter-spacing: .16em; text-transform: uppercase; color: var(--nf-muted); }
.nf-stat__value { font: 400 var(--nf-fs-num)/1.1 var(--nf-mono); color: var(--nf-text); margin-top: var(--nf-1); word-break: break-all; }
.nf-stat__value--money { color: var(--nf-amber); }
/* The cash box.
   Two changes from the single-figure version it replaces, both about weight.
   The frame WAS 1px var(--nf-line-strong) all round - #3a3a3a, the loudest grey
   in the palette - wrapped around the amber figure, so the box was drawn more
   strongly than the money inside it. Now the outline drops to line-soft and the
   accent moves to a 3px amber rule on the left, which is the edge you read
   towards anyway.
   The padding moved off this element and onto the rows, because there are two
   of them now and the divider between has to reach the full width. */
.nf-money-box { border: 1px solid var(--nf-line-soft); border-left: 3px solid var(--nf-amber);
                background: var(--nf-amber-bg); }
.nf-money-box__row { display: flex; align-items: baseline; justify-content: space-between;
                     gap: var(--nf-3); padding: var(--nf-2) var(--nf-3); }
.nf-money-box__row + .nf-money-box__row { border-top: 1px solid var(--nf-line-soft); }
/* 15px rather than the 17px of --nf-fs-num: two figures share the height one
   used to have, and at this width 17px wraps once the balance passes 9 digits. */
.nf-money-box__value { font: 400 15px/1.2 var(--nf-mono); color: var(--nf-amber); word-break: break-all; }
/* Muted, not amber. Banked money is yours but not spendable from here, and the
   colour says so without a caption. */
.nf-money-box__value--bank { color: var(--nf-muted); }
/* The clock sits at the FOOT of the stat block now, not the head. It used to
   take the first line under the header - above the player's own name, with a
   rule under it - which is a lot of prominence for a value nobody came to the
   page to read. Same type, same colour, rule flipped to the top. */
.nf-clock { font: 400 var(--nf-fs-small)/1 var(--nf-mono); color: var(--nf-faint);
            border-top: 1px dotted #333; padding-top: 7px; margin-top: var(--nf-5); }
.nf-username { font: 700 14px/1.25 var(--nf-font); color: var(--nf-text-strong); word-break: break-all; } /* names may be 50 chars */

/* The identity block: initial, name, rank, city.
   The square is .nf-profile__initial from the profile page at 38px instead of
   42 - the same border, background, display font and centring, just sized for a
   206px column. Kept as its own class rather than a modifier because the two
   live in different stylesheets and one of them should not have to know about
   the other.
   min-width:0 on the text side is what stops a 50-character username pushing
   the square off the edge: without it a flex item refuses to shrink below its
   content, and word-break never gets a chance to act. */
.nf-ident { display: flex; gap: var(--nf-4); align-items: flex-start; }
.nf-ident__initial { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--nf-amber);
                     background: #1c1505; color: var(--nf-amber);
                     font: 400 20px/36px var(--nf-display); text-align: center; }
.nf-ident__who { min-width: 0; }
.nf-ident__rank { font-size: var(--nf-fs-small); color: var(--nf-amber); margin-top: 3px; }
.nf-ident__city { color: inherit; border-bottom: 1px dotted var(--nf-faint); }
.nf-ident__city:hover { color: var(--nf-amber); border-bottom-color: var(--nf-amber); text-decoration: none; }
.nf-statline { display: flex; justify-content: space-between; font-size: var(--nf-fs-small); color: var(--nf-muted); }
.nf-statline b { color: var(--nf-text); font-weight: 400; }

/* summary strip above the crime list */
.nf-summary { display: flex; flex-wrap: wrap; border-top: 1px solid var(--nf-line); }
.nf-summary > div { flex: 1 1 140px; padding: 9px var(--nf-5); border-right: 1px solid #242424; }
.nf-summary > div:last-child { border-right: 0; }

/* ---------------------------------------------------------------- progress bar */
.nf-bar-track { height: 11px; background: #171717; border: 1px solid var(--nf-line-strong); position: relative; overflow: hidden; }
.nf-bar-track--sm { height: 6px; }
.nf-bar-track--lg { height: 12px; }
.nf-bar-fill { height: 100%; background: var(--nf-amber); }
.nf-bar-fill--health { background: var(--nf-good); }
.nf-bar-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                font: 700 var(--nf-fs-micro)/1 var(--nf-mono); color: #e8e2d8; text-shadow: 0 0 3px #000; }

/* ---------------------------------------------------------------- data table */
.nf-table th { text-align: left; padding: 7px var(--nf-4); border-bottom: 1px solid var(--nf-line); background: #1a1a1a;
               font: 700 var(--nf-fs-label)/1 var(--nf-font); letter-spacing: var(--nf-track-label);
               text-transform: uppercase; color: var(--nf-muted); }
.nf-table td { padding: 9px var(--nf-4); border-bottom: 1px solid var(--nf-line-soft); font-size: var(--nf-fs-body); }
.nf-table tbody tr:nth-child(even) { background: var(--nf-row); }
.nf-table tbody tr:last-child td { border-bottom: 0; }
.nf-table .nf-num { font-family: var(--nf-mono); text-align: right; white-space: nowrap; }
.nf-table .nf-num--cash { color: var(--nf-amber); }
.nf-table .nf-num--xp { color: var(--nf-muted); }
.nf-table__scroll { overflow-x: auto; }              /* desktop fallback only, phones use cards */
.nf-table--min { min-width: 560px; }

/* a row the player cannot use yet */
.nf-row--locked td { color: var(--nf-faint); }
.nf-row--locked .nf-num { color: var(--nf-faint); }
.nf-locked { display: inline-block; border: 1px dashed var(--nf-line-strong); background: var(--nf-panel);
             color: var(--nf-faint); font: 700 var(--nf-fs-label)/1 var(--nf-font); letter-spacing: .08em;
             text-transform: uppercase; padding: var(--nf-3) var(--nf-4); white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.nf-btn { border: 1px solid var(--nf-amber); background: var(--nf-amber); color: var(--nf-amber-ink);
          font: 700 var(--nf-fs-small)/1 var(--nf-font); letter-spacing: .12em; text-transform: uppercase;
          padding: var(--nf-3) var(--nf-6); cursor: pointer; }
.nf-btn:hover { background: var(--nf-amber-hi); border-color: var(--nf-amber-hi); }
.nf-btn--block { display: block; width: 100%; padding: 11px var(--nf-4); font-size: var(--nf-fs-body); letter-spacing: var(--nf-track-label); text-align: center; }
.nf-btn--ghost { background: #151515; border-color: var(--nf-line-strong); color: var(--nf-muted); }
.nf-btn--danger { background: var(--nf-bad-bg); border-color: var(--nf-bad-line); color: var(--nf-bad); }
.nf-btn[disabled], .nf-btn--wait { background: #151515; border-color: var(--nf-line-strong); color: var(--nf-faint); cursor: not-allowed; }
form.nf-inline { margin: 0; display: inline; }
/* progressive enhancement: JS may add this on submit, the form still posts without it */
.nf-btn.is-submitting { opacity: .6; pointer-events: none; }

/* ---------------------------------------------------------------- badges */
.nf-badge { display: inline-block; font: 700 var(--nf-fs-label)/1 var(--nf-font); letter-spacing: .1em; padding: 5px var(--nf-3); }
.nf-badge--current  { background: var(--nf-amber); color: var(--nf-amber-ink); }
.nf-badge--unlocked { border: 1px solid var(--nf-good-line); color: var(--nf-good); }
.nf-badge--locked   { border: 1px solid var(--nf-line-strong); color: var(--nf-faint); }
.nf-badge--soon     { border: 1px solid var(--nf-line-strong); color: var(--nf-faint); font-family: var(--nf-mono); font-weight: 400; font-size: var(--nf-fs-micro); }

/* rank chip, the numbered square */
.nf-rank { width: 22px; height: 22px; flex: 0 0 22px; text-align: center; border: 1px solid var(--nf-line-strong);
           color: var(--nf-faint); font: 400 var(--nf-fs-base)/20px var(--nf-mono); }
.nf-rank--done    { border-color: var(--nf-good-line); color: var(--nf-good); }
.nf-rank--current { border-color: var(--nf-amber); background: var(--nf-amber); color: var(--nf-amber-ink); font-weight: 700; }

/* row emphasis in the events ladder */
.nf-tr--done    td:first-child { border-left: 3px solid var(--nf-good-line); }
.nf-tr--current td { background: #141002; }
.nf-tr--current td:first-child { border-left: 3px solid var(--nf-amber); }
.nf-tr--locked  td:first-child { border-left: 3px solid #242424; }

/* ---------------------------------------------------------------- feedback messages */
.nf-msg { border: 1px solid var(--nf-line); border-left: 4px solid var(--nf-muted); background: #131313;
          padding: 11px var(--nf-6); display: flex; gap: var(--nf-4); align-items: flex-start; }
.nf-msg__title { font: 700 var(--nf-fs-label)/1 var(--nf-font); letter-spacing: .16em; text-transform: uppercase; color: var(--nf-muted); }
.nf-msg__body { font-size: var(--nf-fs-body); color: var(--nf-text); margin-top: var(--nf-2); line-height: 1.5; }
.nf-msg--reward  { border-color: var(--nf-good-line); border-left-color: var(--nf-good); background: var(--nf-good-bg); }
.nf-msg--reward .nf-msg__title { color: var(--nf-good); }
.nf-msg--warn    { border-color: var(--nf-line-strong); border-left-color: var(--nf-muted); }
.nf-msg--bad     { border: 1px dashed var(--nf-bad-line); border-left: 4px solid var(--nf-bad); background: #150a09; }
.nf-msg--bad .nf-msg__title { color: var(--nf-bad); }
.nf-msg--error   { border: 1px solid var(--nf-bad-line); border-left: 3px solid var(--nf-bad); background: var(--nf-bad-bg); color: #e0b3ac; }
.nf-gain { border: 1px solid var(--nf-good-line); background: #0a1408; color: var(--nf-good);
           font: 400 20px/1.1 var(--nf-mono); padding: 7px 13px; text-align: right; }

/* promotion, the big moment */
.nf-promo { border: 2px solid var(--nf-amber); background: #120e04; animation: nf-pulse 2.4s ease-out infinite; }
.nf-promo__title { font: 400 34px/.95 var(--nf-display); color: var(--nf-amber); text-transform: uppercase; }
.nf-promo__rank { width: 64px; height: 64px; flex: 0 0 64px; border: 1px solid var(--nf-amber); background: #1c1505;
                  color: var(--nf-amber); font: 400 30px/62px var(--nf-display); text-align: center; }
@keyframes nf-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,165,0,.55); } 50% { box-shadow: 0 0 0 7px rgba(240,165,0,0); } }
@media (prefers-reduced-motion: reduce) { .nf-promo { animation: none; } .nf-dot { animation: none; } }

/* ---------------------------------------------------------------- countdown */
.nf-cooldown { border: 1px solid var(--nf-amber-line); background: var(--nf-amber-bg); padding: 11px var(--nf-6); }
.nf-cooldown__head { display: flex; flex-wrap: wrap; gap: var(--nf-5); align-items: center; justify-content: space-between; }
.nf-cooldown__time { font: 400 var(--nf-fs-num-lg)/1 var(--nf-mono); color: var(--nf-amber); }
.nf-dot { width: 8px; height: 8px; background: var(--nf-amber); display: block; animation: nf-blink 1s steps(1) infinite; }
@keyframes nf-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: .15; } }

/* ---------------------------------------------------------------- news ticker (no <marquee>) */
.nf-ticker { display: flex; align-items: stretch; border-bottom: 1px solid var(--nf-line); background: #0f0f0f; }
.nf-ticker__tag { background: var(--nf-amber); color: var(--nf-amber-ink); display: flex; align-items: center; padding: 0 9px;
                  font: 700 var(--nf-fs-label)/1 var(--nf-font); letter-spacing: .12em; text-transform: uppercase; }
.nf-ticker__item { flex: 1 1 auto; min-width: 0; padding: 7px 11px; font-size: var(--nf-fs-base);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-ticker__dots { display: flex; align-items: center; gap: var(--nf-1); padding: 0 9px; }
.nf-ticker__dots i { width: 5px; height: 5px; background: var(--nf-line-strong); display: block; }
.nf-ticker__dots i.is-on { background: var(--nf-amber); }
/* without JS every item is printed, stacked and readable */
.nf-ticker--nojs .nf-ticker__item { white-space: normal; }

/* ---------------------------------------------------------------- online strip */
.nf-online { border-top: 1px solid var(--nf-line); background: var(--nf-panel-alt); display: flex; align-items: stretch; }
.nf-online__tag { background: var(--nf-amber); color: var(--nf-amber-ink); display: flex; align-items: center; padding: 0 9px;
                  white-space: nowrap; font: 700 var(--nf-fs-label)/1 var(--nf-font); letter-spacing: .12em; text-transform: uppercase; }
.nf-online__list { flex: 1 1 auto; min-width: 0; padding: 7px 11px; font-size: var(--nf-fs-base);
                   color: var(--nf-faint); line-height: 1.9; word-break: break-all; }
.nf-online__list .sep { color: #3d3a35; }

/* ---------------------------------------------------------------- forms, login and register */
.nf-auth { max-width: 380px; margin: 44px auto; }
.nf-auth__head { background: #000; border-bottom: 1px solid var(--nf-line); padding: 22px 20px 16px; text-align: center; }
.nf-auth__sub { font: 400 var(--nf-fs-label)/1 var(--nf-mono); color: var(--nf-muted); letter-spacing: .22em; text-transform: uppercase; margin-top: 9px; }
.nf-field { display: flex; flex-direction: column; gap: 5px; }
.nf-field > span { font: 700 var(--nf-fs-label)/1 var(--nf-font); letter-spacing: var(--nf-track-label); text-transform: uppercase; color: var(--nf-muted); }
.nf-field input { width: 100%; background: var(--nf-input); border: 1px solid var(--nf-line-strong); color: var(--nf-text);
                  font: 400 var(--nf-fs-lead)/1 var(--nf-font); padding: 9px var(--nf-4); }
.nf-field input:focus { outline: none; border-color: var(--nf-amber); background: #151208; }
.nf-field--invalid input { border-color: var(--nf-bad-line); }
.nf-field__error { font-size: var(--nf-fs-small); color: var(--nf-bad); }

/* ---------------------------------------------------------------- phone / tablet
   Wide tables become one card per row: the same <table> is hidden and the .nf-cards
   list is shown. Print both from PHP, CSS decides which one is visible. */
.nf-cards { display: none; }
.nf-card { border: 1px solid var(--nf-line); background: var(--nf-panel); padding: var(--nf-4) var(--nf-5); }
.nf-card--locked { border-color: #242424; background: var(--nf-panel-alt); color: var(--nf-faint); }
.nf-card--current { border-color: var(--nf-amber); background: #141002; }
.nf-card__top { display: flex; justify-content: space-between; gap: var(--nf-4); align-items: flex-start; }
.nf-card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--nf-4);
                 font: 400 var(--nf-fs-small)/1 var(--nf-mono); color: var(--nf-faint); }
.nf-card .nf-btn { padding: 11px 16px; }             /* 44px tall touch target */

@media (max-width: 1023px) {
  :root { --nf-col-left: 176px; --nf-col-right: 0; }
  .nf-shell__right { display: none; }                 /* actions move into the left nav */
  .nf-banner { height: 92px; }
  .nf-wordmark { font-size: 34px; }
  .nf-banner__img { flex-basis: 240px; }
}

@media (max-width: 767px) {
  .nf-shell { flex-direction: column; border-left: 0; border-right: 0; }
  .nf-shell__left { flex: none; width: 100%; border-right: 0; border-bottom: 1px solid var(--nf-line);
                    display: flex; flex-direction: column; }
  /* stat block first, navigation after it: money, health and rank stay above the fold */
  .nf-shell__left .nf-stats { order: 1; }
  .nf-shell__left .nf-bar, .nf-shell__left .nf-nav { order: 2; }
  .nf-banner { height: auto; }
  .nf-banner__img { display: none; }                  /* wordmark only on phone */
  .nf-wordmark { font-size: 26px; }
  .nf-shell__page { padding: var(--nf-4); }
  .nf-table__scroll .nf-table { display: none; }
  .nf-cards { display: flex; flex-direction: column; gap: var(--nf-3); }
  .nf-summary > div { flex: 1 1 33%; }
  .nf-online { flex-direction: column; }
  .nf-online__tag { padding: var(--nf-2) var(--nf-4); }
  .nf-btn { padding: 11px var(--nf-6); }
}

/* the phone nav as a 5 up strip, drop it in the left column under the stat block */
.nf-tabbar { display: none; }
@media (max-width: 767px) {
  .nf-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--nf-line); order: 2; }
  .nf-tabbar a { text-align: center; padding: 11px 2px; border-left: 1px solid var(--nf-line);
                 font: 700 var(--nf-fs-label)/1 var(--nf-font); letter-spacing: .06em; text-transform: uppercase; }
  .nf-tabbar a:first-child { border-left: 0; }
  .nf-tabbar a.is-active { background: var(--nf-amber); color: var(--nf-amber-ink); }
  .nf-tabbar a:hover { text-decoration: none; background: #151208; }
  .nf-shell__left .nf-nav { display: none; }          /* tab bar replaces the link lists */
}

/* ---------------------------------------------------------------- utilities */
.nf-num-lg { font: 400 var(--nf-fs-num)/1.1 var(--nf-mono); word-break: break-all; }  /* billions must not break the box */
.nf-mono { font-family: var(--nf-mono); }
.nf-muted { color: var(--nf-muted); }
.nf-faint { color: var(--nf-faint); }
.nf-hr { height: 1px; background: var(--nf-line); border: 0; margin: var(--nf-7) 0; }
.nf-note { font: 400 var(--nf-fs-label)/1.6 var(--nf-mono); color: var(--nf-disabled); }