@daydreamui/good-css 0.0.0-stage → 0.3.0

package/knowledge/examples/sidebar-that-wraps-on-its-own.md

@@ -0,0 +1,156 @@
+---
+topic: "good-css-example-sidebar-that-wraps-on-its-own"
+title: "Wrapping sidebar playground"
+tier: "example"
+tags:
+  - "good-css"
+  - "sidebar"
+  - "wraps"
+  - "own"
+summary: "Resize from 960 to 320px. The sidebar and article wrap into separate rows. Adjust flex-basis and min-inline-size to move the wrap point."
+intent: "Wrapping sidebar"
+---
+
+
+# Wrapping sidebar
+
+Resize from 960 to 320px. The sidebar and article wrap into separate rows. Adjust flex-basis and min-inline-size to move the wrap point.
+
+Read [the recipe](../recipes/sidebar-that-wraps-on-its-own.md) for its prerequisites and credits.
+The page uses the pinned recipe verbatim, with a separate teaching fixture.
+
+## daydream.json
+
+```json
+{
+  "version": 9,
+  "pages": [
+    {
+      "path": "sidebar-that-wraps-on-its-own.html"
+    }
+  ],
+  "canvases": [
+    {
+      "id": "main",
+      "name": "Playground",
+      "items": [
+        {
+          "id": "sidebar-that-wraps-on-its-own",
+          "kind": "daydream.viewport",
+          "position": {
+            "x": 0,
+            "y": 0
+          },
+          "frame": {
+            "width": 960,
+            "height": 720
+          },
+          "payload": {
+            "page": "sidebar-that-wraps-on-its-own.html"
+          },
+          "meta": {
+            "title": "Wrapping sidebar",
+            "sourceUrl": "https://good-css.com/specimen/sidebar-that-wraps-on-its-own"
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+## sidebar-that-wraps-on-its-own.html
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Wrapping sidebar</title>
+<link rel="stylesheet" href="sidebar-that-wraps-on-its-own.css">
+</head>
+<body>
+<h1>Wrapping sidebar</h1><div class="with-sidebar"><aside class="sidebar">Sidebar with an ideal width</aside><main class="main"><h2>Article</h2><p>The main content keeps at least half the available row and sends the sidebar onto its own row when space runs out.</p></main></div>
+</body>
+</html>
+```
+
+## sidebar-that-wraps-on-its-own.css
+
+```css
+/* Teaching fixture only; recipe declarations live in the other sheet. */
+* {
+  box-sizing: border-box;
+}
+html {
+  background: #f5f4ef;
+  color: #26352d;
+  font:
+    16px/1.5 system-ui,
+    sans-serif;
+}
+body {
+  margin: 0;
+  padding: 1.5rem;
+}
+h1,
+h2,
+p {
+  margin: 0;
+}
+h1 {
+  font-size: 1.5rem;
+  margin-block-end: 1.5rem;
+}
+h2 {
+  font-size: 1.2rem;
+}
+article,
+aside,
+.main,
+.panel {
+  padding: 1rem;
+  background: #e0e8df;
+}
+section > h2 {
+  padding: 1rem;
+  background: #d2decd;
+}
+footer {
+  padding: 0.5rem;
+  background: #c9d8c5;
+}
+.slot {
+  margin-block: 1rem;
+}
+.card {
+  overflow-wrap: anywhere;
+}
+.card > * {
+  margin: 0;
+}
+.cards h2 {
+  background: #c9d8c5;
+}
+.cards p {
+  background: #eaf0e7;
+}
+
+.with-sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.sidebar {
+  flex-basis: 20rem;
+  flex-grow: 1;
+}
+
+.main {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: 50%;
+}
+```

package/knowledge/examples/subgrid-rows-shared-across-cards.md

@@ -0,0 +1,154 @@
+---
+topic: "good-css-example-subgrid-rows-shared-across-cards"
+title: "Aligned card rows playground"
+tier: "example"
+tags:
+  - "good-css"
+  - "subgrid"
+  - "rows"
+  - "shared"
+  - "across"
+  - "cards"
+summary: "At 960px, card headings, descriptions and footers share rows despite different text lengths. At 320px cards form a single column. Edit a heading to see its neighbors respond."
+intent: "Aligned card rows"
+---
+
+
+# Aligned card rows
+
+At 960px, card headings, descriptions and footers share rows despite different text lengths. At 320px cards form a single column. Edit a heading to see its neighbors respond.
+
+Read [the recipe](../recipes/subgrid-rows-shared-across-cards.md) for its prerequisites and credits.
+The page uses the pinned recipe verbatim, with a separate teaching fixture.
+
+## daydream.json
+
+```json
+{
+  "version": 9,
+  "pages": [
+    {
+      "path": "subgrid-rows-shared-across-cards.html"
+    }
+  ],
+  "canvases": [
+    {
+      "id": "main",
+      "name": "Playground",
+      "items": [
+        {
+          "id": "subgrid-rows-shared-across-cards",
+          "kind": "daydream.viewport",
+          "position": {
+            "x": 0,
+            "y": 0
+          },
+          "frame": {
+            "width": 960,
+            "height": 720
+          },
+          "payload": {
+            "page": "subgrid-rows-shared-across-cards.html"
+          },
+          "meta": {
+            "title": "Aligned card rows",
+            "sourceUrl": "https://good-css.com/specimen/subgrid-rows-shared-across-cards"
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+## subgrid-rows-shared-across-cards.html
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Aligned card rows</title>
+<link rel="stylesheet" href="subgrid-rows-shared-across-cards.css">
+</head>
+<body>
+<h1>Aligned card rows</h1><main class="cards"><article class="card"><h2>Short heading</h2><p>A brief summary.</p><footer>Details</footer></article><article class="card"><h2>A heading long enough to wrap onto several lines</h2><p>More content, with a longer description to make the row heights visibly shared across neighboring cards.</p><footer>Details</footer></article><article class="card"><h2>Third card</h2><p>Another summary.</p><footer>Details</footer></article></main>
+</body>
+</html>
+```
+
+## subgrid-rows-shared-across-cards.css
+
+```css
+/* Teaching fixture only; recipe declarations live in the other sheet. */
+* {
+  box-sizing: border-box;
+}
+html {
+  background: #f5f4ef;
+  color: #26352d;
+  font:
+    16px/1.5 system-ui,
+    sans-serif;
+}
+body {
+  margin: 0;
+  padding: 1.5rem;
+}
+h1,
+h2,
+p {
+  margin: 0;
+}
+h1 {
+  font-size: 1.5rem;
+  margin-block-end: 1.5rem;
+}
+h2 {
+  font-size: 1.2rem;
+}
+article,
+aside,
+.main,
+.panel {
+  padding: 1rem;
+  background: #e0e8df;
+}
+section > h2 {
+  padding: 1rem;
+  background: #d2decd;
+}
+footer {
+  padding: 0.5rem;
+  background: #c9d8c5;
+}
+.slot {
+  margin-block: 1rem;
+}
+.card {
+  overflow-wrap: anywhere;
+}
+.card > * {
+  margin: 0;
+}
+.cards h2 {
+  background: #c9d8c5;
+}
+.cards p {
+  background: #eaf0e7;
+}
+
+.cards {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+
+.card {
+  display: grid;
+  grid-row: span 3;
+  grid-template-rows: subgrid;
+  row-gap: 0.5rem;
+}
+```

package/knowledge/procedures.md

@@ -0,0 +1,37 @@
+---
+topic: good-css-procedures
+title: Choosing a Good CSS technique
+tier: procedure
+tags: [css, authoring, good-css]
+summary: Select a technique, retain its prerequisites, and check its behavior in the intended environment.
+---
+
+# Choosing a technique
+
+Use `knowledge_search` with the behavior you need: cards that wrap, aligned
+card footers, a sidebar, a focus ring, a disclosure, or fluid type. Read the
+matching `daydream.good-css/recipes/` entries with `knowledge_read`, including
+their Rules and Support sections. `knowledge_bundle` retrieves worked
+examples; recipes are references and need the search/read step.
+
+Prefer a technique that adapts to its content and available space. Keep the
+project's existing visual language and naming. Upstream recommendations are
+starting points: the user's design, target browsers, and the component's
+actual constraints decide which declarations belong. For upstream scope and
+intentionally excluded techniques, read `daydream.good-css/upstream-guidance.md`. Existing pages need
+local edits; a recipe's reset is not permission to restyle the whole project.
+
+For layout work, the examples pair a complete HTML/CSS page with a resize
+experiment. To explore all playgrounds, copy the plugin's `playgrounds/`
+folder into a separate project directory and open that copy in Daydream;
+editing inside the installed plugin changes its trust hash. Use the recipe's prerequisites to decide which elements
+establish layout and containment; preserve the conditions that make it work.
+
+When using container units, popovers, dialogs, motion, or viewport-dependent
+behavior, read `daydream.good-css/compatibility.md`. Verify the intended states,
+content lengths, and browser targets as well as the static layout. A diagnostic
+about this browser's support may describe an intentional fallback. Explain it
+in context; retain declarations needed by other browsers or interaction states.
+
+Upstream source and credits accompany each recipe. `upstream/lock.json` pins
+what ships; all guidance is served from the local installation.

package/knowledge/recipes/accordion-that-animates-its-height.md

@@ -0,0 +1,59 @@
+---
+topic: "good-css-accordion-that-animates-its-height"
+title: "Accordion that animates its height"
+tier: "reference"
+tags:
+  - "good-css"
+  - "show"
+  - "hide"
+  - "accordion"
+  - "animates"
+  - "height"
+summary: "Use it for FAQs and any other disclosure. `<details>` already gives you the toggle, keyboard support and find-in-page. These rules animate the open and the close with no JavaScript."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Accordion that animates its height
+
+Use it for FAQs and any other disclosure. `<details>` already gives you the toggle, keyboard support and find-in-page. These rules animate the open and the close with no JavaScript.
+
+```css
+:root { interpolate-size: allow-keywords; }
+
+details::details-content {
+  height: 0;
+  overflow: clip;
+}
+
+details[open]::details-content { height: auto; }
+
+@media (prefers-reduced-motion: no-preference) {
+  details::details-content {
+    transition:
+      height 0.3s var(--ease-out, ease-out),
+      content-visibility 0.3s allow-discrete;
+  }
+}
+```
+
+Why it works:
+
+- `::details-content` is the box the browser wraps around everything in `<details>` except the `<summary>`.
+- `interpolate-size: allow-keywords` lets a transition run between a length and `auto`. It inherits, so one declaration on `:root` covers the page.
+- A closed `<details>` hides its content with `content-visibility`. Transitioning that property with `allow-discrete` keeps the content rendered until the height reaches zero. Leave it out and the close snaps.
+
+Rules:
+
+- Put padding on an element inside, never on `::details-content`. Padding there stays visible when the accordion is closed.
+- Give sibling `<details>` the same `name` attribute to keep one open at a time.
+- Hide the marker with `summary { list-style: none; }` plus `summary::-webkit-details-marker { display: none; }` for Safari.
+- Write no fallback. Safari and Firefox do not support `interpolate-size` yet, so they open and close without the animation.
+
+Support: `::details-content` in Chrome 131, Safari 18.4, Firefox 143. `interpolate-size` in Chrome 129 only.
+
+- Borrowed from: Bramus Van Damme, [Animate to height: auto](https://developer.chrome.com/docs/css-ui/animate-to-height-auto)
+- Docs: [MDN: ::details-content](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::details-content) · [MDN: interpolate-size](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/interpolate-size) · [MDN: transition-behavior](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior)
+
+Source: [Good CSS](https://good-css.com/specimen/accordion-that-animates-its-height), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#accordion-that-animates-its-height).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/anchor-targets-that-clear-a-sticky-header.md

@@ -0,0 +1,45 @@
+---
+topic: "good-css-anchor-targets-that-clear-a-sticky-header"
+title: "Anchor targets that clear a sticky header"
+tier: "reference"
+tags:
+  - "good-css"
+  - "scroll"
+  - "viewport"
+  - "anchor"
+  - "targets"
+  - "clear"
+  - "sticky"
+  - "header"
+summary: "Use it on any page with in-page links and a fixed or sticky header."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Anchor targets that clear a sticky header
+
+Use it on any page with in-page links and a fixed or sticky header.
+
+```css
+html { scroll-padding-block-start: 5rem; }
+
+@media (prefers-reduced-motion: no-preference) {
+  html { scroll-behavior: smooth; }
+}
+```
+
+Why it works:
+
+- The browser offsets every scroll to an anchor by the padding, so the target lands below the header. No script calculates offsets.
+
+Rules:
+
+- Keep the offset outside the motion query, so people who ask for reduced motion still get it.
+- Tie the value to the header's height. Share one custom property between the two.
+
+Support: Chrome 69, Firefox 68, Safari 14.1.
+
+- Borrowed from: Kevin Powell, [Stop fixed navigations covering content on scroll](https://www.youtube.com/watch?v=iGUSTyG-CYw), 2022-06-02, and [Use these CSS features instead of JavaScript](https://www.youtube.com/watch?v=qu1jE41O_8o), 2026-09-23
+
+Source: [Good CSS](https://good-css.com/specimen/anchor-targets-that-clear-a-sticky-header), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#anchor-targets-that-clear-a-sticky-header).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/carousel-on-native-scroll.md

@@ -0,0 +1,87 @@
+---
+topic: "good-css-carousel-on-native-scroll"
+title: "Carousel on native scroll"
+tier: "reference"
+tags:
+  - "good-css"
+  - "scroll"
+  - "viewport"
+  - "carousel"
+  - "native"
+summary: "Use it for any horizontal row of cards. The carousel is a real scroll container, so swipe, trackpad, keyboard and momentum all work before any script loads."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Carousel on native scroll
+
+Use it for any horizontal row of cards. The carousel is a real scroll container, so swipe, trackpad, keyboard and momentum all work before any script loads.
+
+```css
+.carousel {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline: 1.5rem;
+  padding-inline: 1.5rem;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.carousel > * {
+  flex: none;
+  scroll-snap-align: start;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .carousel { scroll-behavior: smooth; }
+}
+```
+
+Arrow buttons are the one part that needs a script.
+
+```html
+<button data-carousel-dir="-1" aria-label="Previous">←</button>
+<button data-carousel-dir="1" aria-label="Next">→</button>
+```
+
+```js
+const carousel = document.querySelector(".carousel");
+const [prev, next] = document.querySelectorAll("[data-carousel-dir]");
+
+const step = (dir) => {
+  const card = carousel.firstElementChild.getBoundingClientRect().width;
+  carousel.scrollBy({ left: dir * card });
+};
+
+const sync = () => {
+  const max = carousel.scrollWidth - carousel.clientWidth;
+  prev.disabled = carousel.scrollLeft <= 1;
+  next.disabled = carousel.scrollLeft >= max - 1;
+};
+
+prev.addEventListener("click", () => step(-1));
+next.addEventListener("click", () => step(1));
+carousel.addEventListener("scroll", sync, { passive: true });
+sync();
+```
+
+Why it works:
+
+- Scroll snap makes the browser do the scrolling and the landing. Every input method gets the same result.
+- `scrollBy` moves one card width and snapping picks the final position. The script never calculates an offset.
+- `scroll-behavior: smooth` in CSS animates the script's scroll. The media query turns the animation off for people who ask for reduced motion.
+- `overscroll-behavior-x: contain` stops a swipe at the end of the row from triggering the browser's back gesture.
+
+Rules:
+
+- Never move slides with `transform`, and never handle wheel or touch events yourself.
+- Match `scroll-padding-inline` to `padding-inline` so a snapped card lines up with the page content.
+- Chrome 135 can draw the arrows and dots in CSS with `::scroll-button()` and `::scroll-marker`. Firefox and Safari have neither, so use the script.
+
+- Borrowed from: Steve Sewell, [Build buttery smooth carousels with pure CSS like Nike](https://www.builder.io/blog/css-carousel). This version swaps his `scrollIntoView()` for `scrollBy()`, which can only scroll the carousel and never the page.
+- Docs: Adam Argyle, [Carousels with CSS](https://developer.chrome.com/blog/carousels-with-css) · [MDN: scroll snap](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll_snap) · [MDN: scrollBy()](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollBy)
+
+Source: [Good CSS](https://good-css.com/specimen/carousel-on-native-scroll), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#carousel-on-native-scroll).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/concentric-nested-radius.md

@@ -0,0 +1,45 @@
+---
+topic: "good-css-concentric-nested-radius"
+title: "Concentric nested radius"
+tier: "reference"
+tags:
+  - "good-css"
+  - "spacing"
+  - "shape"
+  - "concentric"
+  - "nested"
+  - "radius"
+summary: "Use it wherever a rounded element sits inside a padded rounded parent, such as an image in a card or a button in an input."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Concentric nested radius
+
+Use it wherever a rounded element sits inside a padded rounded parent, such as an image in a card or a button in an input.
+
+```css
+.card {
+  --radius: 0.75rem;
+  --pad: 0.5rem;
+  padding: var(--pad);
+  border-radius: calc(var(--radius) + var(--pad));
+}
+
+.card > * { border-radius: var(--radius); }
+```
+
+Why it works:
+
+- Two curves look parallel only when they share a center. That means outer radius = inner radius + gap. Equal radii make the corner band look pinched.
+
+Rules:
+
+- Derive the outer radius from the inner one. The other way round reaches zero once the padding exceeds the radius.
+
+Support: every browser.
+
+- Borrowed from: Chris Coyier, [The Classic Border Radius Advice, Plus an Unusual Trick](https://blog.master.dev/the-classic-border-radius-advice-plus-an-unusual-trick/), 2024-05-13, which quotes Jhey Tompkins's version
+
+Source: [Good CSS](https://good-css.com/specimen/concentric-nested-radius), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#concentric-nested-radius).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/container-queries-with-container-units.md

@@ -0,0 +1,52 @@
+---
+topic: "good-css-container-queries-with-container-units"
+title: "Container queries with container units"
+tier: "reference"
+tags:
+  - "good-css"
+  - "layout"
+  - "container"
+  - "queries"
+  - "units"
+summary: "Use it for any component that appears in slots of different widths. The component responds to the space it is given, where a media query only knows the viewport."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Container queries with container units
+
+Use it for any component that appears in slots of different widths. The component responds to the space it is given, where a media query only knows the viewport.
+
+```css
+.slot { container-type: inline-size; }
+
+.card h2 { font-size: clamp(1.25rem, 1rem + 2cqi, 2rem); }
+
+@container (width > 30rem) {
+  .card {
+    display: grid;
+    grid-template-columns: 12rem 1fr;
+  }
+}
+```
+
+Why it works:
+
+- The query measures the nearest container, so the same card is right in a sidebar and in a wide column.
+- `1cqi` is 1% of that container's inline size. The `clamp()` math from [Fluid sizes with `clamp()`](https://good-css.com/#fluid-sizes-with-clamp) carries over, per component.
+
+Rules:
+
+- The container must be an ancestor. An element cannot query itself.
+- A container cannot take its width from its content. Never put `container-type` on a shrink-to-fit element, or it collapses to zero.
+- With no container ancestor the query never matches. Kevin Powell makes `header`, `main` and `footer` containers in his reset, so most components need none of their own.
+- A container cannot also be a subgrid. [Subgrid rows shared across cards](https://good-css.com/#subgrid-rows-shared-across-cards) and this entry need separate elements.
+- Container units are different from queries. With no container above the element, `cqi` measures the viewport, so one token written with `cqi` serves the page and every slot.
+- Never register a fluid token that uses `cqi` with `@property`. A registered length computes once on `:root`, where there is no container, and every slot then gets the viewport's value.
+
+Support: Chrome 105, Firefox 110, Safari 16.
+
+- Borrowed from: Kevin Powell, [Improve your reset with these modern CSS additions](https://www.youtube.com/watch?v=eWmDW4zEXt4), 2024-09-04 · Una Kravets, [Container queries land in stable browsers](https://web.dev/blog/cq-stable), 2023-02-14 · Josh W. Comeau, [A Friendly Introduction to Container Queries](https://www.joshwcomeau.com/css/container-queries-introduction/), 2024-11-04 · Stephanie Eckles, [Container Query Units and Fluid Typography](https://moderncss.dev/container-query-units-and-fluid-typography/)
+
+Source: [Good CSS](https://good-css.com/specimen/container-queries-with-container-units), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#container-queries-with-container-units).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.

package/knowledge/recipes/content-clear-of-the-notch.md

@@ -0,0 +1,45 @@
+---
+topic: "good-css-content-clear-of-the-notch"
+title: "Content clear of the notch"
+tier: "reference"
+tags:
+  - "good-css"
+  - "scroll"
+  - "viewport"
+  - "content"
+  - "clear"
+  - "notch"
+summary: "Use it on fixed headers, bottom bars, toasts and sheets in anything that should feel like an app on a phone. Add `viewport-fit=cover` to the viewport meta tag, then pad those elements by the safe-area insets."
+---
+
+<!-- Generated by pnpm good-css:sync. Local notes belong in compatibility.md. -->
+# Content clear of the notch
+
+Use it on fixed headers, bottom bars, toasts and sheets in anything that should feel like an app on a phone. Add `viewport-fit=cover` to the viewport meta tag, then pad those elements by the safe-area insets.
+
+```css
+.app-header { padding-block-start: env(safe-area-inset-top, 0px); }
+
+.bottom-bar { padding-block-end: env(safe-area-inset-bottom, 0px); }
+
+.sheet { padding-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); }
+```
+
+Why it works:
+
+- By default the browser keeps the page inside the safe area and leaves the notch and home-indicator zones as bare background. `viewport-fit=cover` lets the page paint edge to edge.
+- `env(safe-area-inset-*)` gives the size of each zone, so the content moves clear while the background still fills the screen.
+
+Rules:
+
+- Without `viewport-fit=cover` every inset is `0px` and the padding does nothing.
+- Give `env()` a fallback of `0px` wherever it sits inside `calc()`.
+- Normal page content needs none of this. The header's padding covers it.
+
+Support: Chrome 69, Firefox 65, Safari 11.1.
+
+- Borrowed from: Emil Kowalski, [mobile-native skill](https://github.com/emilkowalski/skills/blob/main/skills/mobile-native/SKILL.md)
+
+Source: [Good CSS](https://good-css.com/specimen/content-clear-of-the-notch), [pinned source](https://github.com/vojtaholik/good-css/blob/6d16d2fd27f4892e2aea4b5c5c2b016f45be7eef/PRACTICES.md#content-clear-of-the-notch).
+
+Copyright (c) 2026 Vojta Holik. License: upstream/LICENSE in this plugin.