@starci/grammar 0.4.12 → 0.5.0

package/dist/offset-pop/components-navigation.css

@@ -0,0 +1,394 @@
+/*
+ * Offset Pop treatment for the Common navigation, layout-chrome and data-display group.
+ * Family signature only: ink outline, hard offset shadow on raised objects, pink for the
+ * current/selected decision, chunky bottom navigation. Geometry and state wiring stay Common.
+ * The integrator imports this file from ./styles.css after the family tokens.
+ */
+@layer starci-grammar-offset-pop {
+    /* Link: ink text with a pink underline; current is a pink-underlined ink label. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Link"] {
+        color: var(--foreground);
+        font-weight: 700;
+        text-decoration-color: var(--offset-pop-pink);
+        text-decoration-thickness: var(--offset-pop-outline-width);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Link"][data-grammar-link-visited="distinct"]:visited {
+        color: var(--muted);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Link"][data-grammar-current="true"] {
+        color: var(--foreground);
+        text-decoration-line: underline;
+        text-decoration-color: var(--offset-pop-pink);
+        text-decoration-thickness: 0.2em;
+    }
+
+    /* Breadcrumbs: ink ancestors, pink-marked current page. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Breadcrumbs"] [data-grammar-breadcrumb] {
+        font-weight: 700;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Breadcrumbs"] [data-grammar-breadcrumb][data-grammar-current="true"] {
+        padding-inline: 0.5rem;
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: 999px;
+        background: var(--accent-soft);
+        color: var(--foreground);
+    }
+
+    /* Pagination: outlined pills; the current page is pink and raised. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Pagination"] [data-grammar-current],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Pagination"] [data-grammar-pagination-step] > * {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-control-radius);
+        background: var(--surface);
+        color: var(--foreground);
+        font-weight: 800;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Pagination"] [data-grammar-current="true"] {
+        background: var(--offset-pop-pink);
+        color: var(--accent-foreground);
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-x) 0 var(--offset-pop-shadow-ink);
+    }
+
+    /* Stepper: ink-ringed markers, pink current, mint complete, critical error. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Stepper"] [data-grammar-step-marker] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--surface);
+        color: var(--foreground);
+        font-weight: 900;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Stepper"] [data-grammar-step-state="complete"] [data-grammar-step-marker] {
+        background: var(--offset-pop-mint);
+        color: var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Stepper"] [data-grammar-step-state="current"] [data-grammar-step-marker] {
+        background: var(--offset-pop-pink);
+        color: var(--accent-foreground);
+        box-shadow: 0.125rem 0.1875rem 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Stepper"] [data-grammar-step-state="error"] [data-grammar-step-marker] {
+        background: var(--offset-pop-critical);
+        color: var(--danger-foreground);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Stepper"] [data-grammar-step-label] {
+        font-weight: 800;
+    }
+
+    /* TopBar: ink rule under a canvas bar. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="TopBar"] {
+        border-block-end: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--background);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="TopBar"] [data-grammar-top-bar-trigger] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-control-radius);
+        box-shadow: 0.125rem 0.1875rem 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="TopBar"] [data-grammar-top-bar-trigger][aria-expanded="true"] {
+        background: var(--offset-pop-pink);
+        color: var(--accent-foreground);
+    }
+
+    /*
+     * The dock is taller than Common's bar (4rem items, a 1.5x ink rule and a raised shadow above
+     * it), so it redefines the block size the fixed-bar offset is computed from.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] {
+        --starci-core-bottom-nav-block-size: calc(4.5rem + var(--offset-pop-outline-width) * 1.5 + var(--offset-pop-shadow-y) * 0.5);
+    }
+
+    /* BottomNav: a chunky raised dock with a pink current pill. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="BottomNav"] {
+        border-block-start: calc(var(--offset-pop-outline-width) * 1.5) solid var(--offset-pop-ink);
+        background: var(--surface);
+        box-shadow: 0 calc(var(--offset-pop-shadow-y) * -0.5) 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="BottomNav"] [data-grammar-bottom-nav-item] {
+        min-block-size: 4rem;
+        color: var(--foreground);
+        font-weight: 800;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="BottomNav"] [data-grammar-bottom-nav-item] > [aria-hidden="true"] {
+        min-inline-size: 3.25rem;
+        min-block-size: 2rem;
+        border: var(--offset-pop-outline-width) solid transparent;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="BottomNav"] [data-grammar-current="true"] > [aria-hidden="true"] {
+        border-color: var(--offset-pop-ink);
+        background: var(--offset-pop-pink);
+        color: var(--accent-foreground);
+        box-shadow: 0.125rem 0.1875rem 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="BottomNav"] [data-grammar-bottom-nav-badge] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--offset-pop-yellow);
+        color: var(--offset-pop-ink);
+    }
+
+    /* Footer: ink top rule and bold group labels. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Footer"] {
+        border-block-start: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Footer"] [data-grammar-footer-group] > p {
+        font-weight: 900;
+        letter-spacing: -.01em;
+    }
+
+    /* Avatar / AvatarGroup: ink-ringed faces; the current identity gets a pink ring. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Avatar"] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Avatar"][data-grammar-current="true"] {
+        box-shadow: 0 0 0 var(--offset-pop-outline-width) var(--offset-pop-pink), 0.125rem 0.1875rem 0 var(--offset-pop-outline-width) var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="AvatarGroup"] [data-grammar-avatar-count] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--offset-pop-yellow);
+        color: var(--offset-pop-ink);
+        font-weight: 900;
+    }
+
+    /* TagGroup: outlined chips; selected chips turn pink and lift. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="TagGroup"] [data-grammar-tag] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: 999px;
+        background: var(--surface);
+        color: var(--foreground);
+        font-weight: 800;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="TagGroup"] [data-grammar-tag]:has(> [data-grammar-selected="true"]) {
+        background: var(--offset-pop-pink);
+        color: var(--accent-foreground);
+        box-shadow: 0.125rem 0.1875rem 0 var(--offset-pop-shadow-ink);
+    }
+
+    /* DataTable: an outlined raised sheet with an ink header rule and pink selected rows. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DataTable"] {
+        overflow: clip;
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-surface-radius);
+        background: var(--surface);
+        box-shadow: var(--shadow-surface);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DataTable"] [data-grammar-table-scroll] thead th {
+        border-block-end: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--surface-secondary);
+        color: var(--foreground);
+        font-weight: 900;
+    }
+
+    /*
+     * A selectable or actionable table row is itself the pointer target (the vendor stamps
+     * `data-hovered` only on such rows), so it takes the family's yellow row wash; keyboard focus
+     * keeps Common's inset pink ring. A selected row is the pink soft fill with the pink leading edge
+     * and the text-safe accent, readable in light and dark alike.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DataTable"] [data-grammar-table-row] {
+        transition: background-color var(--offset-pop-transition);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DataTable"] [data-grammar-table-row][data-hovered="true"]:not([data-grammar-selected="true"]) {
+        background: color-mix(in srgb, var(--offset-pop-yellow) 32%, transparent);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DataTable"] [data-grammar-table-row][data-grammar-selected="true"] {
+        background: var(--accent-soft);
+        color: var(--offset-pop-accent-text);
+        box-shadow: inset 0.25rem 0 0 var(--offset-pop-pink);
+    }
+
+    /* DescriptionList: ink separators, bold terms. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DescriptionList"][data-grammar-description-divided="true"] [data-grammar-description-pair] + [data-grammar-description-pair] {
+        border-block-start: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DescriptionList"] dt {
+        color: var(--foreground);
+        font-weight: 800;
+    }
+
+    /*
+     * ListBox: every option (role="option") is an interactive row - it is the pointer and focus
+     * target itself, so its states come from the vendor's attributes on the row, never from an
+     * inner link or button (an option may not hold one). At rest the row keeps a transparent 2px
+     * edge so selecting it never shifts the layout.
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ListBox"] [data-grammar-list-item] {
+        border: var(--offset-pop-outline-width) solid transparent;
+        border-radius: var(--offset-pop-control-radius);
+        font-weight: 700;
+        transition:
+            background-color var(--offset-pop-transition),
+            border-color var(--offset-pop-transition),
+            box-shadow var(--offset-pop-transition);
+    }
+
+    /* Hover: the family's yellow row wash, on an enabled row that is not already selected. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ListBox"] [data-grammar-list-item][data-hovered="true"]:not([data-disabled="true"], [data-selected="true"]) {
+        background: color-mix(in srgb, var(--offset-pop-yellow) 32%, transparent);
+    }
+
+    /* Keyboard focus: the family's 2px pink ring, drawn on the row edge so the list's own clip never cuts it. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ListBox"] [data-grammar-list-item][data-focus-visible="true"] {
+        outline: 2px solid var(--focus);
+        outline-offset: 0;
+    }
+
+    /*
+     * Selected: the pink soft fill with the pink leading edge, the ink outline and its small hard
+     * shadow, and the label in the text-safe accent (it clears AA on the soft fill in both themes).
+     */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ListBox"] [data-grammar-list-item][data-selected="true"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ListBox"] [data-grammar-list-item]:has(> [data-grammar-selected="true"]) {
+        border-color: var(--offset-pop-ink);
+        background: var(--accent-soft);
+        color: var(--offset-pop-accent-text);
+        box-shadow: inset 0.25rem 0 0 var(--offset-pop-pink), 0.125rem 0.1875rem 0 var(--offset-pop-shadow-ink);
+    }
+
+    /* Disclosure / Accordion: ink-outlined sections; the open trigger is pink-marked. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Disclosure"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Accordion"] [data-grammar-disclosure-state] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-control-radius);
+        background: var(--surface);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Accordion"] [data-grammar-disclosure-state] + [data-grammar-disclosure-state] {
+        margin-block-start: var(--grammar-inline-gap, 0.5rem);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Disclosure"][data-grammar-disclosure-state="open"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Accordion"] [data-grammar-disclosure-state="open"] {
+        box-shadow: 0.125rem 0.1875rem 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Disclosure"] [data-grammar-disclosure-trigger],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Accordion"] [data-grammar-accordion-trigger] {
+        padding-inline: 1rem;
+        font-weight: 900;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Disclosure"][data-grammar-disclosure-state="open"] [data-grammar-disclosure-trigger],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Accordion"] [data-grammar-disclosure-state="open"] [data-grammar-accordion-trigger] {
+        box-shadow: inset 0.25rem 0 0 var(--offset-pop-pink);
+    }
+
+    /* Image: ink frame at the family surface radius. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Image"] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-surface-radius);
+        background: var(--offset-pop-blush);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Image"][data-grammar-image-state="error"] [data-grammar-image-fallback] {
+        color: var(--offset-pop-ink);
+        font-weight: 800;
+    }
+
+    /* Rating: ink-stroked glyphs filled pink. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Rating"] [data-grammar-rating-fill] {
+        color: var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Rating"] [data-grammar-rating-fill] svg {
+        stroke: var(--offset-pop-ink);
+        stroke-width: 2;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Rating"] [data-grammar-rating-fill="full"] svg,
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Rating"] [data-grammar-rating-fill="half"] svg {
+        fill: var(--offset-pop-pink);
+    }
+
+    /* Timeline: ink rail with ink-ringed markers; the current entry is pink. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Timeline"] [data-grammar-timeline-state]:not(:last-child)::before {
+        width: var(--offset-pop-outline-width);
+        background: var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Timeline"] [data-grammar-timeline-marker] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Timeline"] [data-grammar-current="true"] [data-grammar-timeline-marker] {
+        background: var(--offset-pop-pink);
+        color: var(--accent-foreground);
+        box-shadow: 0.125rem 0.1875rem 0 var(--offset-pop-shadow-ink);
+    }
+
+    /* Calendar: outlined sheet; the selected day is a raised pink tile. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Calendar"] {
+        padding: 0.75rem;
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        border-radius: var(--offset-pop-surface-radius);
+        background: var(--surface);
+        box-shadow: var(--shadow-surface);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Calendar"] [data-grammar-calendar-day][data-selected="true"] {
+        border: var(--offset-pop-outline-width) solid var(--offset-pop-ink);
+        background: var(--offset-pop-pink);
+        color: var(--accent-foreground);
+        font-weight: 900;
+        box-shadow: 0.125rem 0.1875rem 0 var(--offset-pop-shadow-ink);
+    }
+
+    /* Narrow viewports keep content and reduce only the family shadow geometry. */
+    @media (max-width: 30rem) {
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="DataTable"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Calendar"] {
+            box-shadow: 0.125rem 0.25rem 0 var(--offset-pop-shadow-ink);
+        }
+    }
+
+    /* Reduced motion removes family transforms and transitions. */
+    @media (prefers-reduced-motion: reduce) {
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Disclosure"] *,
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Accordion"] *,
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="BottomNav"] * {
+            transition-duration: 0s !important;
+        }
+
+        /* An interactive row does not move: the vendor's press scale is dropped with the transitions. */
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ListBox"] [data-grammar-list-item] {
+            transform: none;
+            transition: none;
+        }
+    }
+
+    /* Forced colours: the current/selected decision stays visible without the pink fill. */
+    @media (forced-colors: active) {
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="BottomNav"] [data-grammar-current="true"] > [aria-hidden="true"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Pagination"] [data-grammar-current="true"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="TagGroup"] [data-grammar-tag]:has(> [data-grammar-selected="true"]) {
+            border-color: Highlight;
+            box-shadow: none;
+        }
+
+        /* A selected option keeps a Highlight edge; the pink soft fill has collapsed to Canvas. */
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ListBox"] [data-grammar-list-item][data-selected="true"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ListBox"] [data-grammar-list-item]:has(> [data-grammar-selected="true"]) {
+            border-color: Highlight;
+            box-shadow: none;
+        }
+    }
+}

package/dist/offset-pop/components-overlays.css

@@ -0,0 +1,253 @@
+/*
+ * Offset Pop treatment for the Common overlay and feedback components.
+ *
+ * Every selector is scoped to the Offset Pop root. That works for portalled surfaces because Common
+ * overlays portal INTO the nearest `.grammar-common-root` (never into <body>), so a dialog, drawer,
+ * popover or menu stays a descendant of `[data-grammar-family="offset-pop"]` and inherits its tokens.
+ * Signature: ink outline, hard offset shadow, blush backdrop tint, pink decision accent.
+ */
+@layer starci-grammar-offset-pop {
+    /* ---------------------------------------------------------------- tone vocabulary */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-tone] {
+        --offset-pop-tone-color: var(--offset-pop-surface-muted);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-tone="informative"] {
+        --offset-pop-tone-color: var(--info);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-tone="affirmative"] {
+        --offset-pop-tone-color: var(--success);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-tone="cautionary"] {
+        --offset-pop-tone-color: var(--warning);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-tone="negative"] {
+        --offset-pop-tone-color: var(--danger);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-tone="pending"] {
+        --offset-pop-tone-color: var(--accent);
+    }
+
+    /* ---------------------------------------------------------------- backdrop: blush tint */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-backdrop] {
+        background: color-mix(in srgb, var(--offset-pop-blush) 72%, transparent);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"][data-grammar-theme="dark"] [data-grammar-overlay-backdrop] {
+        background: color-mix(in srgb, var(--offset-pop-shadow-ink) 72%, var(--offset-pop-pink) 8%);
+    }
+
+    /* ---------------------------------------------------------------- surfaces: ink + hard offset */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface] {
+        border: var(--offset-pop-outline-width) solid var(--border);
+        color: var(--surface-foreground);
+        background: var(--surface);
+        box-shadow: var(--offset-pop-shadow-x) var(--offset-pop-shadow-y) 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="dialog"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="drawer"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="toast"] {
+        border-radius: var(--offset-pop-surface-radius);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="popover"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="menu"] {
+        border-radius: var(--offset-pop-control-radius);
+    }
+
+    /* Side and bottom sheets throw their hard shadow away from the edge they slide from. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="drawer"][data-placement="right"] {
+        box-shadow: calc(var(--offset-pop-shadow-x) * -1) 0 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="drawer"][data-placement="left"] {
+        box-shadow: var(--offset-pop-shadow-x) 0 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="drawer"][data-placement="bottom"] {
+        box-shadow: 0 calc(var(--offset-pop-shadow-y) * -1) 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface="drawer"][data-placement="top"] {
+        box-shadow: 0 var(--offset-pop-shadow-y) 0 var(--offset-pop-shadow-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-drawer-handle] > * {
+        background: var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Dialog"] :is(h1, h2, h3),
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="AlertDialog"] :is(h1, h2, h3),
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Drawer"] :is(h1, h2, h3),
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Popover"] :is(h1, h2, h3) {
+        color: var(--foreground);
+        font-weight: 900;
+        letter-spacing: -.03em;
+    }
+
+    /* ---------------------------------------------------------------- pink decision accent */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-action="confirm"] > [data-component="Button"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-toast-action] [data-component="Button"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-alert-actions] > [data-component="Button"] {
+        color: var(--accent-foreground);
+        background: var(--accent);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-action="confirm"][data-grammar-tone="negative"] > [data-component="Button"] {
+        color: var(--danger-foreground);
+        background: var(--danger);
+    }
+
+    /* ---------------------------------------------------------------- menu */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-menu-item] {
+        font-weight: 700;
+    }
+
+    /* The soft pink fill is theme-aware (blush-pink in light, plum in dark), so one rule reads in every theme. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-menu-item]:is([data-focused], [data-hovered], [data-open]) {
+        background: var(--accent-soft);
+        color: var(--foreground);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-menu-item][data-selected] {
+        color: var(--offset-pop-accent-text);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-menu-item][data-grammar-tone="negative"] {
+        color: color-mix(in srgb, var(--offset-pop-critical) 65%, var(--offset-pop-ink));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-menu-section] + [data-grammar-menu-section],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-menu-section] + [data-grammar-menu-item],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-menu-item] + [data-grammar-menu-section] {
+        border-block-start: var(--offset-pop-outline-width) solid var(--separator);
+    }
+
+    /* ---------------------------------------------------------------- toast */
+    /* Stacked toasts leave room for each hard shadow. */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Toaster"] > ol {
+        gap: calc(var(--offset-pop-shadow-y) + 0.5rem);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Toast"] {
+        border-inline-start-width: calc(var(--offset-pop-outline-width) * 4);
+        border-inline-start-color: var(--offset-pop-tone-color);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Toast"] [data-grammar-toast-indicator] {
+        border: var(--offset-pop-outline-width) solid var(--border);
+        background: var(--offset-pop-tone-color);
+    }
+
+    /* ---------------------------------------------------------------- alert banner */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Alert"] {
+        border: var(--offset-pop-outline-width) solid var(--border);
+        border-radius: var(--offset-pop-control-radius);
+        color: var(--foreground);
+        background: color-mix(in srgb, var(--offset-pop-tone-color) 38%, var(--surface));
+        box-shadow: 0.25rem 0.25rem 0 var(--offset-pop-shadow-ink);
+        font-weight: 600;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Alert"] [data-slot="alert-root"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Alert"] :is(p, span) {
+        color: inherit;
+    }
+
+    /* ---------------------------------------------------------------- close button + kbd */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="CloseButton"] {
+        border: var(--offset-pop-outline-width) solid var(--border);
+        color: var(--foreground);
+        background: var(--surface);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="CloseButton"]:is([data-hovered], [data-focus-visible]) {
+        background: var(--offset-pop-yellow);
+        color: var(--offset-pop-ink);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="CloseButton"][data-pressed] {
+        transform: translate(1px, 1px);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Kbd"] {
+        border: var(--offset-pop-outline-width) solid var(--border);
+        border-radius: 0.5rem;
+        color: var(--foreground);
+        background: var(--surface);
+        box-shadow: 0 2px 0 var(--offset-pop-shadow-ink);
+        font-weight: 800;
+    }
+
+    /* ---------------------------------------------------------------- loading and measurement */
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Spinner"][data-tone="accent"],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ProgressCircle"] {
+        color: var(--accent);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="ProgressCircle"] [data-slot="progress-circle-track-circle"] {
+        stroke: color-mix(in srgb, var(--offset-pop-ink) 18%, transparent);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Skeleton"][data-shape],
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Skeleton"] > [data-grammar-skeleton-line] {
+        background: color-mix(in srgb, var(--offset-pop-blush) 78%, var(--surface));
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Skeleton"][data-shape="text"] {
+        background: transparent;
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Meter"] [data-slot="meter-track"] {
+        height: 0.75rem;
+        border: var(--offset-pop-outline-width) solid var(--border);
+        background: var(--surface);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Meter"] [data-slot="meter-fill"] {
+        background: var(--offset-pop-tone-color);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Meter"][data-grammar-tone="neutral"] [data-slot="meter-fill"] {
+        background: var(--accent);
+    }
+
+    .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Meter"] [data-slot="label"] {
+        color: var(--foreground);
+        font-weight: 800;
+    }
+
+    /* ---------------------------------------------------------------- motion, theme, contrast */
+    @media (prefers-reduced-motion: reduce) {
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="CloseButton"][data-pressed] {
+            transform: none;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .grammar-common-root[data-grammar-family="offset-pop"][data-grammar-theme="system"] [data-grammar-overlay-backdrop] {
+            background: color-mix(in srgb, var(--offset-pop-shadow-ink) 72%, var(--offset-pop-pink) 8%);
+        }
+    }
+
+    @media (forced-colors: active) {
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-surface],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Alert"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="CloseButton"],
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-component="Kbd"] {
+            border-color: CanvasText;
+            color: CanvasText;
+            background: Canvas;
+            box-shadow: none;
+        }
+
+        .grammar-common-root[data-grammar-family="offset-pop"] [data-grammar-overlay-backdrop] {
+            background: transparent;
+        }
+    }
+}