/* ============================================================================
   mo-base.css - the ONE stylesheet every momatio page shares.
   Served from https://momatio.com/mo-base.css

   WHY IT EXISTS
     Dave, 2026-09-12: "build the shared stylesheet ... so we have a style guide
     for the bit that is shared."

     Measured the day it was written: 26 pages, 11 of them clean, 815 elements
     rendering below the 17px floor. Every page defined its own type from scratch
     in its own inline <style>, so the standing rule had to be re-typed by hand
     on every page and drifted wherever somebody forgot. The pages that were
     clean were clean for ONE reason: a single file governed several of them --
     /fleet/style.css covered four pages, one generator covered forty-eight.
     This is that idea applied to the whole site.

   WHAT IT COVERS, AND WHAT IT DELIBERATELY DOES NOT
     TYPE and ACCESSIBILITY only. Not colour. momatio genuinely has two
     palettes -- the prompt library and /p/ pages are light, the fleet tool and
     the games are dark -- and collapsing those into one is a redesign, not a
     refactor. Colour stays with the page; size, spacing rhythm, tap targets and
     focus behaviour live here.

   HOW TO LOAD IT
     <link rel="stylesheet" href="/mo-base.css?v=1">
     BEFORE the page's own <style> block, so a page can still override anything
     deliberately. That ordering makes adopting this file safe: it can set what a
     page never set (a root size, a focus ring) without fighting what it did.
   ========================================================================== */

/* --- THE ROOT SIZE. The single most consequential line in the file. ---------
   /tile shipped with NO root font-size, inherited the browser's 16px, and every
   1rem on it landed at 16px -- under the floor, and unfixable by patching
   individual rules. The homepage had the identical bug before it. Setting it
   here means a page cannot have that bug again by omission.
   18px because Dave asked for larger; 19px on phones because the standing rule
   is that a phone gets BIGGER text, not smaller. */
html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (max-width: 520px) {
  html { font-size: 19px; }
}

/* --- THE FLOOR, EXPRESSED AS A SCALE ---------------------------------------
   Nothing in this file drops below 1rem. The smallest step is 1rem, which is
   what "17px minimum" became once the base moved up. Hierarchy is carried by
   weight and colour, never by shrinking below the floor. */
:root {
  --mo-fs-body:  1rem;      /* 18px / 19px on phones */
  --mo-fs-lead:  1.12rem;
  --mo-fs-h3:    1.15rem;
  --mo-fs-h2:    1.3rem;
  --mo-fs-h1:    1.75rem;
  --mo-lh-body:  1.55;
  --mo-lh-tight: 1.25;
  --mo-tap:      46px;      /* minimum interactive target */
}

body { font-size: var(--mo-fs-body); line-height: var(--mo-lh-body); }

/* --- ELEMENTS THE BROWSER SHRINKS ON YOUR BEHALF ---------------------------
   This is where most of the 815 came from. Form controls do NOT inherit the
   page font by default -- a <select> or <button> falls back to the platform UI
   size, which on Chrome/Windows is 13.3px. Table cells, <small>, captions and
   labels then get hand-styled down to 12-14px to "match". Forcing inheritance
   removes the reason anybody reached for 12px in the first place. */
button, input, select, textarea, optgroup, option {
  font: inherit;
  font-size: var(--mo-fs-body);
  line-height: var(--mo-lh-body);
}
small, sub, sup, figcaption, caption, legend, label,
th, td, li, dt, dd, summary, cite, code, kbd, samp {
  font-size: inherit;
}
/* sub/sup still need to sit off the baseline without shrinking the glyph */
sub, sup { line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.45em; }
sub { bottom: -0.2em; }

/* --- TAP TARGETS -----------------------------------------------------------
   A 46px minimum on anything a finger has to hit. Padding, not height, so a
   wrapped label still grows rather than clipping. */
a.btn, button, [role="button"], input[type="submit"], input[type="button"],
select, summary {
  min-height: var(--mo-tap);
}

/* --- FOCUS ----------------------------------------------------------------
   A visible focus ring is not decoration: it is the only way a keyboard user
   knows where they are. :focus-visible so a mouse click does not draw one. */
:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- MOTION ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- LONG STRINGS --------------------------------------------------------
   A single unbreakable token (a source URL in a citation) pushed
   /fleet/methodology to 531px inside a 390px viewport. Wrapping anywhere is
   less bad than a page that scrolls sideways. */
body { overflow-wrap: anywhere; }