/* Kōbo global element styles.
   
   Scope is deliberately narrow: element-level rules only, no utility-shaped
   class names. Twind (loaded from a CDN in the page head) owns everything
   class-based, and its Preflight is switched OFF — so the resets a Tailwind
   app normally inherits for free have to live here instead.
   
   Two rules about what may go in this file:
   
   1. NEVER define a class whose name could also be a Twind utility
      (`.flex`, `.grid`, `.sticky`, `.mt-2`, `.muted`…). The predecessor of
      this file did, and a stylesheet rule and a utility of the same name
      fighting over `gap`/`align-items` is not a fight anyone can debug from
      the markup. Utilities are Twind's namespace; keep out of it.
   2. Colours here must match the Twind palette in base.html. The old file
      was built around an indigo accent (#6d8bff) that no longer existed
      anywhere else in the product, and painted two purple radial gradients
      under every page of an otherwise green app — invisible in code review,
      obvious on screen. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: #0a0c10;
  color: #eef1f7;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
code, .mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: .92em; }
::selection { background: rgba(22, 163, 74, 0.24); }

/* Headings: sized here so a bare <h2> is never a browser-default serif lump.
   Only ~three quarters of the headings in the templates set `m-0` and their
   own size; the rest rely on exactly these values. Any Twind class on the
   element outranks this block, so overriding stays a matter of adding one. */
h1 { font-size: 27px; font-weight: 680; color: #fff; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 18px; font-weight: 620; color: #fff; margin: 0; letter-spacing: -.01em; }
h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 0; letter-spacing: -.01em; }

/* Form controls don't inherit typography from `body` on their own. */
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; text-align: inherit; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: #16a34a; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: #8b93a8; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); font-weight: 600;
}
tbody td { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); color: #e6e9ef; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: rgba(255,255,255,.02); }

/* A <dialog> carries a browser border and, unstyled, sits mid-page in a box
   nobody asked for. Every dialog in the app draws its own frame with Twind. */
dialog { border: none; }
dialog::backdrop { background: rgba(6, 8, 12, 0.66); backdrop-filter: blur(3px); }

/* Keyboard focus, visible on every surface. Mouse clicks don't get the ring. */
:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; border-radius: 4px; }

* { scrollbar-width: thin; scrollbar-color: #222735 transparent; }
::-webkit-scrollbar { height: 9px; width: 9px; }
::-webkit-scrollbar-thumb { background: #222735; border-radius: 9px; }