/* CLIXHOUSE design system — reset
   ─────────────────────────────────────────────────────────────────
   Modern hybrid of Josh Comeau's custom reset and Andy Bell's
   opinionated normalization. Goals:
     – consistent box model
     – sensible margins (none by default; designer owns spacing)
     – fluid media that never overflow
     – form controls inherit typography
     – text wrapping that doesn't break long words
     – animatable height transitions where motion is allowed

   Imported via:  @import url("/static/design/reset.css") layer(reset);
   Or already-layered via this file's own @layer block (below) when
   sites import without layer(name).
*/

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margins except where the platform-correct default
     is non-zero (e.g. <dialog>'s margin: auto centering). */
  :where(*:not(dialog)) {
    margin: 0;
  }

  /* Allow height/width transitions to/from keyword values like auto.
     Gated by motion preference so it never animates against user intent. */
  @media (prefers-reduced-motion: no-preference) {
    :root {
      interpolate-size: allow-keywords;
    }
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Reserve the scrollbar gutter so toggling overflow (opening a modal
       that locks scroll, content that grows past one viewport) doesn't
       shift the layout horizontally. Baseline widely available. */
    scrollbar-gutter: stable;
  }

  body {
    min-block-size: 100svb;
    line-height: 1.5;
    /* Opinionated macOS subpixel-AA override, now opt-OUT via a token:
       set `--font-smooth: auto` to restore the platform default. */
    -webkit-font-smoothing: var(--font-smooth, antialiased);
    text-rendering: optimizeLegibility;
  }

  /* Short large text + form controls should not inherit the body's
     1.5 line-height. Per Andy Bell's published reset
     (piccalil.li/blog/a-more-modern-css-reset/). */
  :where(h1, h2, h3, h4, button, input, label) {
    line-height: 1.1;
  }

  /* Anchor-target offset — a deep link doesn't land flush against
     the viewport top (or under a sticky header). Andy Bell canonical. */
  :where(:target) {
    scroll-margin-block: 5ex;
  }

  /* Textareas without an explicit rows attribute get a usable
     min-height instead of the tiny UA default. Andy Bell canonical. */
  :where(textarea:not([rows])) {
    min-block-size: 10em;
  }

  /* Media defaults — block flow, never overflow container. */
  :where(img, picture, video, canvas, svg) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  /* Form controls inherit page typography. Prevents iOS auto-zoom
     when input font-size is below 16px. */
  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
  }

  /* Long words (URLs, identifiers) break instead of overflowing.
     Headings get balanced wrap; paragraphs get pretty wrap (avoids
     orphans on the final line). */
  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }
  :where(p) {
    text-wrap: pretty;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }

  /* Lists used as nav/menus don't carry default bullets or padding.
     Real prose lists opt back in via base.css. */
  :where(ul[role="list"], ol[role="list"]) {
    list-style: none;
    padding: 0;
  }

  /* Anchors and buttons inherit color and font; per-site styling owns
     the rest. */
  :where(a) {
    color: inherit;
    text-decoration-skip-ink: auto;
  }
  :where(button) {
    background: transparent;
    border: 0;
    cursor: pointer;
  }
}