/* ============================================================================
   FONT OVERRIDES — loaded LAST so a chosen font beats the theme pairing.
   tf=1 is 'Theme'. tf=2..10 are explicit faces. Mixed categories (mono + sans)
   so a switch is unmistakably visible; mono-vs-mono is not.
   ============================================================================ */

html[data-tf="2"] body, html[data-tf="2"] h1, html[data-tf="2"] h2,
html[data-tf="2"] .side, html[data-tf="2"] .side *,
html[data-tf="2"] .top, html[data-tf="2"] .top *,
html[data-tf="2"] table.b, html[data-tf="2"] table.b *,
html[data-tf="2"] .pill, html[data-tf="2"] input,
html[data-tf="2"] .chat-pop, html[data-tf="2"] .chat-pop *,
html[data-tf="2"] .login, html[data-tf="2"] .login * {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

html[data-tf="3"] body, html[data-tf="3"] h1, html[data-tf="3"] h2,
html[data-tf="3"] .side, html[data-tf="3"] .side *,
html[data-tf="3"] .top, html[data-tf="3"] .top *,
html[data-tf="3"] table.b, html[data-tf="3"] table.b *,
html[data-tf="3"] .pill, html[data-tf="3"] input,
html[data-tf="3"] .chat-pop, html[data-tf="3"] .chat-pop *,
html[data-tf="3"] .login, html[data-tf="3"] .login * {
  font-family: "Fira Code", ui-monospace, monospace;
}

html[data-tf="4"] body, html[data-tf="4"] h1, html[data-tf="4"] h2,
html[data-tf="4"] .side, html[data-tf="4"] .side *,
html[data-tf="4"] .top, html[data-tf="4"] .top *,
html[data-tf="4"] table.b, html[data-tf="4"] table.b *,
html[data-tf="4"] .pill, html[data-tf="4"] input,
html[data-tf="4"] .chat-pop, html[data-tf="4"] .chat-pop *,
html[data-tf="4"] .login, html[data-tf="4"] .login * {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

html[data-tf="5"] body, html[data-tf="5"] h1, html[data-tf="5"] h2,
html[data-tf="5"] .side, html[data-tf="5"] .side *,
html[data-tf="5"] .top, html[data-tf="5"] .top *,
html[data-tf="5"] table.b, html[data-tf="5"] table.b *,
html[data-tf="5"] .pill, html[data-tf="5"] input,
html[data-tf="5"] .chat-pop, html[data-tf="5"] .chat-pop *,
html[data-tf="5"] .login, html[data-tf="5"] .login * {
  font-family: "Source Code Pro", ui-monospace, monospace;
}

html[data-tf="6"] body, html[data-tf="6"] h1, html[data-tf="6"] h2,
html[data-tf="6"] .side, html[data-tf="6"] .side *,
html[data-tf="6"] .top, html[data-tf="6"] .top *,
html[data-tf="6"] table.b, html[data-tf="6"] table.b *,
html[data-tf="6"] .pill, html[data-tf="6"] input,
html[data-tf="6"] .chat-pop, html[data-tf="6"] .chat-pop *,
html[data-tf="6"] .login, html[data-tf="6"] .login * {
  font-family: "Space Mono", ui-monospace, monospace;
}

html[data-tf="7"] body, html[data-tf="7"] h1, html[data-tf="7"] h2,
html[data-tf="7"] .side, html[data-tf="7"] .side *,
html[data-tf="7"] .top, html[data-tf="7"] .top *,
html[data-tf="7"] table.b, html[data-tf="7"] table.b *,
html[data-tf="7"] .pill, html[data-tf="7"] input,
html[data-tf="7"] .chat-pop, html[data-tf="7"] .chat-pop *,
html[data-tf="7"] .login, html[data-tf="7"] .login * {
  font-family: "Victor Mono", ui-monospace, monospace;
}

html[data-tf="8"] body, html[data-tf="8"] h1, html[data-tf="8"] h2,
html[data-tf="8"] .side, html[data-tf="8"] .side *,
html[data-tf="8"] .top, html[data-tf="8"] .top *,
html[data-tf="8"] table.b, html[data-tf="8"] table.b *,
html[data-tf="8"] .pill, html[data-tf="8"] input,
html[data-tf="8"] .chat-pop, html[data-tf="8"] .chat-pop *,
html[data-tf="8"] .login, html[data-tf="8"] .login * {
  font-family: "Cascadia Code", ui-monospace, monospace;
}

html[data-tf="9"] body, html[data-tf="9"] h1, html[data-tf="9"] h2,
html[data-tf="9"] .side, html[data-tf="9"] .side *,
html[data-tf="9"] .top, html[data-tf="9"] .top *,
html[data-tf="9"] table.b, html[data-tf="9"] table.b *,
html[data-tf="9"] .pill, html[data-tf="9"] input,
html[data-tf="9"] .chat-pop, html[data-tf="9"] .chat-pop *,
html[data-tf="9"] .login, html[data-tf="9"] .login * {
  font-family: "Geist Mono", ui-monospace, monospace;
}

html[data-tf="10"] body, html[data-tf="10"] h1, html[data-tf="10"] h2,
html[data-tf="10"] .side, html[data-tf="10"] .side *,
html[data-tf="10"] .top, html[data-tf="10"] .top *,
html[data-tf="10"] table.b, html[data-tf="10"] table.b *,
html[data-tf="10"] .pill, html[data-tf="10"] input,
html[data-tf="10"] .chat-pop, html[data-tf="10"] .chat-pop *,
html[data-tf="10"] .login, html[data-tf="10"] .login * {
  font-family: "Inter", system-ui, sans-serif;
}


/* ============================================================================
   FONT AWESOME GUARD — append to the END of typography.css
   Bug: every data-tf rule targets descendants (.side *, .top *, table.b *,
   .chat-pop *, .login *) with specificity (0,2,1). Font Awesome's own
   .fa-solid rule is only (0,1,0), so the moment a font override is active
   (data-tf != 1), every icon inside those subtrees gets its font-family
   stomped to the mono font — which has no FA glyphs. Icons render as tofu.
   This guard re-asserts the FA families at equal specificity (0,2,1) but
   LATER in source order, so it wins without !important.
   ============================================================================ */
html[data-tf] .fa, html[data-tf] .fas, html[data-tf] .far,
html[data-tf] .fal, html[data-tf] .fat, html[data-tf] .fad,
html[data-tf] .fa-solid, html[data-tf] .fa-regular {
  font-family: "Font Awesome 6 Free", sans-serif;
}
html[data-tf] .fab, html[data-tf] .fa-brands {
  font-family: "Font Awesome 6 Brands", sans-serif;
}

html[data-tf="11"] body, html[data-tf="11"] h1, html[data-tf="11"] h2,
html[data-tf="11"] .side, html[data-tf="11"] .side *,
html[data-tf="11"] .top, html[data-tf="11"] .top *,
html[data-tf="11"] table.b, html[data-tf="11"] table.b *,
html[data-tf="11"] .pill, html[data-tf="11"] input,
html[data-tf="11"] .chat-pop, html[data-tf="11"] .chat-pop *,
html[data-tf="11"] .login, html[data-tf="11"] .login * {
  font-family: "Maple Mono", ui-monospace, monospace;
}

html[data-tf="12"] body, html[data-tf="12"] h1, html[data-tf="12"] h2,
html[data-tf="12"] .side, html[data-tf="12"] .side *,
html[data-tf="12"] .top, html[data-tf="12"] .top *,
html[data-tf="12"] table.b, html[data-tf="12"] table.b *,
html[data-tf="12"] .pill, html[data-tf="12"] input,
html[data-tf="12"] .chat-pop, html[data-tf="12"] .chat-pop *,
html[data-tf="12"] .login, html[data-tf="12"] .login * {
  font-family: "0xProto", ui-monospace, monospace;
}
html[data-tf="13"] body, html[data-tf="13"] h1, html[data-tf="13"] h2,
html[data-tf="13"] .side, html[data-tf="13"] .side *,
html[data-tf="13"] .top, html[data-tf="13"] .top *,
html[data-tf="13"] table.b, html[data-tf="13"] table.b *,
html[data-tf="13"] .pill, html[data-tf="13"] input,
html[data-tf="13"] .chat-pop, html[data-tf="13"] .chat-pop *,
html[data-tf="13"] .login, html[data-tf="13"] .login * {
  font-family: "SamsungOne-400", system-ui, -apple-system, sans-serif;
}

html[data-tf="14"] body, html[data-tf="14"] h1, html[data-tf="14"] h2,
html[data-tf="14"] .side, html[data-tf="14"] .side *,
html[data-tf="14"] .top, html[data-tf="14"] .top *,
html[data-tf="14"] table.b, html[data-tf="14"] table.b *,
html[data-tf="14"] .pill, html[data-tf="14"] input,
html[data-tf="14"] .chat-pop, html[data-tf="14"] .chat-pop *,
html[data-tf="14"] .login, html[data-tf="14"] .login * {
  font-family: "SamsungSharpSans", system-ui, -apple-system, sans-serif;
}

/* ============================================================================
   MENU FONT — a SEPARATE dial from the body text style (data-tf).
   The navigation chrome (sidebar + top bar + buttons) reads --font-menu; when
   that variable is unset it falls straight back to the text stack, so the
   default behaviour is unchanged and an unset state can never regress the UI.
   Loaded last, and higher specificity than the [data-tf] blocks above, because
   the menu dial must win over the body dial on chrome elements only.
   ============================================================================ */
html[data-mf] .side, html[data-mf] .side *,
html[data-mf] .top, html[data-mf] .top *,
html[data-mf] .nav-chip, html[data-mf] .theme-btn, html[data-mf] .bigbtn,
html[data-mf] .refresh button, html[data-mf] .logout-btn,
html[data-mf] .side-logo, html[data-mf] .side-logo * {
  font-family: var(--font-menu);
}
/* icon glyphs must keep their icon font — a text stack on a <i class="fa-...">
   renders an empty box, which is the exact bug this guard exists for. */
html[data-mf] .side .fa-icon, html[data-mf] .side i[class*="fa-"],
html[data-mf] .top .fa-icon, html[data-mf] .top i[class*="fa-"] {
  font-family: "Font Awesome 6 Free" !important;
}