/* --- Scoped preflight (replaces tailwindcss/preflight.css) --- */ /* Every plain reset below lives in @layer base (matching where Tailwind's own preflight normally ships) so it still loses to Blok's own utilities, which main.css imports into @layer utilities. Left unlayered, a reset ALWAYS beats a layered rule regardless of specificity — so any Blok tool's own utility class touching a property this file also resets (margin, padding, color, display, font-size, …) would be silently overridden, no host page required. This bit us for margin/padding (mt-[26px] etc. collapsing block spacing to 0) and would bite the same way for any other property here. The two rules that use !important are the deliberate exception: they exist specifically to beat HOST-page styles (even the host's own !important), so they stay unlayered on purpose — moving them into a layer would let a layered host rule with matching !important win instead. */ @layer base { /* 1. Prevent padding and border from affecting element width. 2. Remove default margins and padding. 3. Reset all borders. */ :where([data-blok-interface], [data-blok-popover]) *, :where([data-blok-interface], [data-blok-popover]) ::after, :where([data-blok-interface], [data-blok-popover]) ::before, :where([data-blok-interface], [data-blok-popover]) ::backdrop, :where([data-blok-interface], [data-blok-popover]) ::file-selector-button { box-sizing: border-box; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 2 */ border: 0 solid; /* 3 */ } /* NOTE: The `html` rule from Tailwind preflight (line-height, font-family, tap-highlight, etc.) is intentionally omitted. It cannot be scoped to a sub-element, and it was the primary source of host-page mutations. Blok sets its own font-family and line-height via utility classes on the wrapper and its descendants. */ /* Correct the inheritance of border color in Firefox. */ :where([data-blok-interface], [data-blok-popover]) hr { height: 0; color: inherit; border-top-width: var(--blok-border-width-hairline); } /* Add the correct text decoration in Chrome, Edge, and Safari. */ :where([data-blok-interface], [data-blok-popover]) abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } } /* Reset font-family and letter-spacing for headings so host-page heading rules (e.g. `h1 { font-family: 'Times New Roman'; letter-spacing: 0.5em; }`) cannot override Blok's styling — even when the host uses `!important`. Specificity raised from (0,0,1) to (0,1,1) to beat host element-selector rules. font-size and font-weight are intentionally omitted from this rule so that the Header tool's own Tailwind utility classes (text-3xl, font-bold, etc.) remain effective in the normal cascade. The all:initial !important on the root boundary already neutralizes the UA stylesheet's default heading sizes inside the editor. */ [data-blok-interface] :is(h1, h2, h3, h4, h5, h6), [data-blok-popover] :is(h1, h2, h3, h4, h5, h6) { font-family: inherit !important; letter-spacing: inherit !important; } @layer base { /* Reset links to optimize for opt-in styling instead of opt-out. */ :where([data-blok-interface], [data-blok-popover]) a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ :where([data-blok-interface], [data-blok-popover]) :is(b, strong) { font-weight: bolder; } /* Neutralise the browser UA styling on elements. Browsers paint with `color: MarkText` and `background-color: Mark` (a yellow/system highlight). Blok never wants that default: a mark's colour comes only from an explicit inline `color` / `background-color` set by the Marker tool. Reset both here so a mark carrying only a text colour (e.g. colour transferred/ pasted into an article, where `migrateMarkColors` maps the colour but does not add an inline transparent background) never renders a spurious yellow highlight. Real inline highlights still win — inline styles override this zero-specificity `:where()` rule. */ :where([data-blok-interface], [data-blok-popover]) mark { color: inherit; background-color: transparent; } /* Correct the odd em font sizing in all browsers for code elements. */ :where([data-blok-interface], [data-blok-popover]) :is(code, kbd, samp, pre) { /* Fallback list applies outside blok interface roots; --blok-font-mono resolves inside them */ font-family: var(--blok-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); font-feature-settings: --theme(--default-mono-font-feature-settings, normal); font-variation-settings: --theme(--default-mono-font-variation-settings, normal); font-size: 1em; } /* Inline code tool styling — coral/red text on a subtle surface. Excludes inside 
 (block code tool), which paints its own surface. */
  :where([data-blok-interface], [data-blok-popover]) code:not(pre code) {
    background-color: var(--blok-inline-code-bg);
    color: var(--blok-inline-code-text);
    padding: var(--blok-space-0-5) var(--blok-space-1);
    border-radius: 0.25em;
    font-size: 0.875em;
  }

  /* Add the correct font size in all browsers. */
  :where([data-blok-interface], [data-blok-popover]) small {
    font-size: 80%;
  }

  /* Prevent sub and sup elements from affecting line height. */
  :where([data-blok-interface], [data-blok-popover]) :is(sub, sup) {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  :where([data-blok-interface], [data-blok-popover]) sub { bottom: -0.25em; }
  :where([data-blok-interface], [data-blok-popover]) sup { top: -0.5em; }

  /* Remove text indentation from table contents and fix border color inheritance. */
  :where([data-blok-interface], [data-blok-popover]) table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  /* Use the modern Firefox focus style for all focusable elements. */
  :where([data-blok-interface], [data-blok-popover]) :-moz-focusring {
    outline: auto;
  }

  /* Add the correct vertical alignment in Chrome and Firefox. */
  :where([data-blok-interface], [data-blok-popover]) progress {
    vertical-align: baseline;
  }

  /* Add the correct display in Chrome and Safari. */
  :where([data-blok-interface], [data-blok-popover]) summary {
    display: list-item;
  }

  /* Make lists unstyled by default. */
  :where([data-blok-interface], [data-blok-popover]) :is(ol, ul, menu) {
    list-style: none;
  }

  /* Make replaced elements display: block by default. */
  :where([data-blok-interface], [data-blok-popover]) :is(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    vertical-align: middle;
  }

  /* Constrain images and videos to the parent width. */
  :where([data-blok-interface], [data-blok-popover]) :is(img, video) {
    max-width: 100%;
    height: auto;
  }

  /*
   * Constrain other replaced elements to the parent width too, so a fixed
   * width="…" attribute (e.g. an