/* ui.css — shared across all pages. Loaded AFTER each page's inline <style> so it can reinforce.
   Concerns: (0) typography, (1) deter casual copying, (2) responsive chrome (header/nav/content/filters).
   Page-specific layout classes (.hero, .grid, .cards, .modecards) keep their own per-page breakpoints. */

/* ---- (0) typography: self-hosted Inter (SIL OFL, no external requests). Loading after each page's
   inline <style> lets this one rule restyle the whole project's body font. Falls back to the native
   UI font if the woff2 fails to load. ---- */
@font-face{
  font-family:'Inter var';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('vendor/fonts/Inter-var.woff2') format('woff2');
}
body{
  font-family:'Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv05' 1;   /* disambiguated lowercase l (l vs 1 vs I) — a readability win */
  letter-spacing:-0.006em;
}

/* clickable logo */
.header .brand{ text-decoration:none; color:inherit; display:inline-block; cursor:pointer; }

/* ---- (1) anti-copy: rendered content isn't text-selectable; inputs/textareas stay fully usable ---- */
body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, select, [contenteditable="true"]{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-touch-callout:default;
}
img{ -webkit-user-drag:none; user-drag:none; }

/* ---- (2) responsive chrome ---- */
.nav{ flex-wrap:wrap; }                 /* some pages lacked wrap → nav overflowed on narrow screens */

/* Keep the top nav in a consistent position on every page. Explorers/Practice carry a right-side
   status/count (#hcount) as a 3rd header child; with justify-content:space-between that pushed the
   nav toward the centre, while count-less pages (Home, The Proof) kept it flush-right — so the nav
   appeared to jump when navigating between them. Pin the nav flush-right everywhere; any count sits
   in the left cluster (order keeps it right after the brand). */
.header{ justify-content:flex-start; }
.header > .nav{ order:1; margin-left:auto; }

/* tablet */
@media (max-width:820px){
  .wrap{ padding-left:18px; padding-right:18px; }
}

/* small tablet / large phone */
@media (max-width:680px){
  .header{ padding:13px 16px; }
  .nav{ gap:4px; }
  .nav a{ font-size:11.5px; padding:5px 9px; }
  .filters{ padding:10px 14px; }
}

/* phone */
@media (max-width:480px){
  .header{ padding:11px 13px; gap:10px; }
  .header h1{ font-size:18px; }
  .header .tag{ display:none; }          /* hide the subtitle/corner count to save the row */
  .nav{ flex:1 1 100%; min-width:0; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ white-space:nowrap; }
  .wrap{ padding:14px 13px; }
  .filters{ padding:10px 13px; gap:8px; }
  .filters input, .filters select{ font-size:12.5px; padding:8px 10px; }
}