@codenhub/styles 0.1.0 → 0.2.0

package/dist/tw/components/tooltip.css

@@ -3,16 +3,20 @@
 @reference "../box.css";
 @reference "./surface.css";
 
-/* The host is a positioning wrapper and nothing else. Its bubble is a
-   pseudo-element placed outside the host's own box, so painting the host would
-   draw a box around the trigger rather than around the message -- which is
-   exactly what a blanket surface membership did to this component once already.
-
-   The bubble is the component. It is a surface, so an aesthetic that blurs
-   surfaces blurs it too, and it rests on a ground of its own, edged, and flat.
-   Depth is opt-in through `.raised` and `.floating` like every other component;
-   its boundary against arbitrary content is the floored edge below, not a
-   shadow. See model.md#elevation. */
+/* The host is a positioning wrapper and nothing else -- it paints no fill, no
+   edge, no material of its own. The bubble is a real element beside the
+   trigger rather than a pseudo-element attached to it, so intent,
+   presentation, aesthetic, and elevation classes go on `.tooltip-bubble`, the
+   thing actually shown, not on the wrapper -- the same rule every other
+   component in this package follows (theming.md: "Intent does not cascade").
+
+   Composing the bubble as a real element fixes a real gap, not just a styling
+   one: `content: attr(data-tooltip)` text is not reliably exposed to
+   assistive tech and cannot be the target of an `aria-describedby`, since that
+   needs a real element with a real `id`. A real bubble can carry
+   `role="tooltip"` and be referenced by the trigger's own `aria-describedby`;
+   wiring that association is the consumer's, this package only styles the
+   bubble. See docs/usage/tooltips.md. */
 @utility tooltip {
   --tooltip-gap: 0.5rem;
   --tooltip-top: calc(var(--tooltip-gap) * -1);
@@ -22,34 +26,7 @@
   --tooltip-origin: bottom;
   --tooltip-transform: translate(-50%, -100%);
 
-  @apply relative;
-
-  /* The trigger badge, for a page with no element to hang the message on. Quiet
-     -- ghost, edged, on `--intent-subtle`, a key cap's resting shape -- because
-     it marks that there is a message, it is not one. The line earns its keep:
-     `--intent-subtle` is a near-page tint that reads the same across families,
-     so a plate alone left three of eight intents indistinguishable;
-     `--intent-border` is the slot that differs. Painting the host is right only
-     here -- everywhere else the bubble is outside the host's box, so painting it
-     boxes the trigger. `.tooltip-icon` is the opt-in that says the host *is* the
-     badge. */
-  &.tooltip-icon {
-    @apply box inline-flex size-5 cursor-default items-center justify-center text-sm font-bold;
-
-    --_d-fill: 0%;
-    --_d-fg-on-fill: 0%;
-    --_d-border: 100%;
-    --_d-elevation: 0;
-    --_d-ground: var(--intent-subtle);
-
-    border-radius: var(--ui-radius, calc(infinity * 1px));
-    /* The one thing `box` hands it that it must refuse. An aesthetic's `clip-path`
-       clips a host's pseudo-elements along with the host, and this host's
-       pseudo-element is the bubble, positioned outside its box -- so a stepped
-       badge under `.pixel` would clip the message away entirely. The bubble
-       carries the stepped shape itself; the badge stays round. */
-    clip-path: none;
-  }
+  @apply relative inline-block;
 
   &[data-tooltip-position="bottom"] {
     --tooltip-top: auto;
@@ -72,61 +49,95 @@
     --tooltip-origin: left;
     --tooltip-transform: translate(100%, -50%);
   }
+}
 
-  &::after {
-    @apply surface pointer-events-none absolute z-(--z-popover) w-max max-w-72 px-2.5 py-2 text-sm font-normal whitespace-normal opacity-0 transition-[opacity,transform] duration-(--motion-duration-normal) ease-(--motion-ease);
-
-    /* Filled, over a ground of its own. An intent floods the fill
-       (`.tooltip.primary` is the primary colour); with no intent `intent.css`
-       resolves the bubble onto `--color-tooltip` and lifts the neutral cap, a
-       plate stated per theme because the derived version was a mid-grey slab in
-       light and lifted in dark. The ground stays the surface tone, not the
-       plate -- pointed at both, the fill axis went inert and `axes.spec.ts`
-       caught it. An opaque ground is also what keeps a cascaded `.ghost` from
-       leaving the bubble boundaryless, retiring the old pinned-fill bound.
-       `--ui-surface-ground` is read first so a glass tooltip stays glass. */
-    --_d-fill: 100%;
-    --_d-fg-on-fill: 100%;
-    --_d-border: 100%;
-    /* Flat, and stated rather than left to `box`'s fallback of 1: the bubble is
-       a surface, so an aesthetic's part-based depth would otherwise reach it
-       unasked -- `.neobrutalism`'s slab in particular. `.raised`/`.floating`
-       opt back in. */
-    --_d-elevation: 0;
-    --_d-ground: var(--ui-surface-ground, var(--intent-subtle));
-
-    /* The bubble's line is a boundary against content nobody chose, so `box`'s
-       edge blend is wrong here: at a full fill the line *is* the plate. Restate
-       the colour only; how much line comes from `--_edge-amount`, floored below. */
-    --_line: var(--intent-border);
-
-    /* Floored, for the same reason the ground is opaque: a cascade must not take
-       the boundary from a bubble nobody classed (worst in light, where the plate
-       is near-white). The element's own `.edgeless` lowers it -- same
-       element-vs-cascade idiom `text-control` uses -- and `axes.spec.ts` still
-       sees the edge move because it probes with the class on the element. */
-    --_edge-floor: 100%;
-
-    /* A bubble is a small transient popover, not a modal, so it takes the
-       control radius rather than the surface one `surface` hands it. */
-    border-radius: var(--ui-radius, var(--radius-control));
-    content: attr(data-tooltip);
-    left: var(--tooltip-left);
-    right: var(--tooltip-right);
-    top: var(--tooltip-top);
-    bottom: var(--tooltip-bottom);
-    transform: var(--tooltip-transform) scale(0);
-    transform-origin: var(--tooltip-origin);
-  }
-
-  &.edgeless::after {
+/* The bubble. It is a surface, so an aesthetic that blurs surfaces blurs it
+   too, and it rests on a ground of its own, edged, and flat -- depth is
+   opt-in through its own `.raised`/`.floating`, like any other component, now
+   that it is one. No proxy inheritance is needed to carry elevation across a
+   host-to-pseudo-element gap: there is no gap, `.tooltip-bubble.raised` reads
+   `--ui-elevation` the ordinary way every other component does. See
+   model.md#elevation. */
+@utility tooltip-bubble {
+  @apply surface pointer-events-none absolute z-(--z-popover) w-max max-w-72 px-2.5 py-2 text-sm font-normal whitespace-normal opacity-0 transition-[opacity,transform] duration-(--motion-duration-normal) ease-(--motion-ease);
+
+  /* Filled, over a ground of its own. An intent floods the fill
+     (`.tooltip-bubble.primary` is the primary colour); with no intent
+     `intent.css` resolves the bubble onto `--color-tooltip` and lifts the
+     neutral cap, a plate stated per theme because the derived version was a
+     mid-grey slab in light and lifted in dark. The ground stays the surface
+     tone, not the plate -- pointed at both, the fill axis went inert and
+     `axes.spec.ts` caught it. An opaque ground is also what keeps a cascaded
+     `.ghost` from leaving the bubble boundaryless. `--ui-surface-ground` is
+     read first so a glass tooltip stays glass. */
+  --_d-fill: 100%;
+  --_d-fg-on-fill: 100%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+  --_d-ground: var(--ui-surface-ground, var(--intent-subtle));
+
+  /* The bubble's line is a boundary against content nobody chose, so `box`'s
+     edge blend is wrong here: at a full fill the line *is* the plate. Restate
+     the colour only; how much line comes from `--_edge-amount`, floored below. */
+  --_line: var(--intent-border);
+
+  /* Floored, for the same reason the ground is opaque: a cascade must not take
+     the boundary from a bubble nobody classed (worst in light, where the plate
+     is near-white). The element's own `.edgeless` lowers it -- same
+     element-vs-cascade idiom `text-control` uses. */
+  --_edge-floor: 100%;
+
+  /* A bubble is a small transient popover, not a modal, so it takes the
+     control radius rather than the surface one `surface` hands it. */
+  border-radius: var(--ui-radius, var(--radius-control));
+  left: var(--tooltip-left);
+  right: var(--tooltip-right);
+  top: var(--tooltip-top);
+  bottom: var(--tooltip-bottom);
+  transform: var(--tooltip-transform) scale(0);
+  transform-origin: var(--tooltip-origin);
+
+  &.edgeless {
     --_edge-floor: 0%;
   }
+}
 
-  &:hover::after,
-  &:focus-visible::after,
-  &[data-state="open"]::after {
-    opacity: 1;
-    transform: var(--tooltip-transform) scale(1);
-  }
+/* Shown on hover or focus anywhere in the host, or pinned open with
+   `data-state="open"`. `:focus-within` rather than the trigger's own
+   `:focus-visible`, the same substitution `.input-group` makes for the
+   identical reason: the bubble is a sibling, not a pseudo-element, of the
+   trigger, so nothing but the shared ancestor can see both at once. The cost
+   is the one `.input-group` already accepts -- the bubble also shows on a
+   mouse click, which the old `:focus-visible`-only version did not. */
+.tooltip:hover .tooltip-bubble,
+.tooltip:focus-within .tooltip-bubble,
+.tooltip[data-state="open"] .tooltip-bubble {
+  opacity: 1;
+  transform: var(--tooltip-transform) scale(1);
+}
+
+/* The trigger badge, for a message with no other element to hang it on. Quiet
+   -- ghost, edged, on `--intent-subtle`, a key cap's resting shape -- because
+   it marks that there is a message, it is not one. The line earns its keep:
+   `--intent-subtle` is a near-page tint that reads the same across families,
+   so a plate alone left three of eight intents indistinguishable;
+   `--intent-border` is the slot that differs.
+
+   `clip-path: none` used to exist to protect the bubble, a pseudo-element of
+   this same host, from being clipped away along with it under an aesthetic
+   like `.pixel`. The bubble is independent now, so that reason is gone, but
+   the declaration stays: the docs call this a circular fixed identity, not a
+   shape a container's aesthetic reaches, the same way `.radio` keeps its own
+   circle instead of taking `.pixel`'s stepped silhouette. */
+@utility tooltip-icon {
+  @apply box inline-flex size-5 cursor-default items-center justify-center text-sm font-bold;
+
+  --_d-fill: 0%;
+  --_d-fg-on-fill: 0%;
+  --_d-border: 100%;
+  --_d-elevation: 0;
+  --_d-ground: var(--intent-subtle);
+
+  border-radius: var(--ui-radius, calc(infinity * 1px));
+  clip-path: none;
 }

package/dist/tw/elevation.css

@@ -1,18 +1,54 @@
 /* Elevation is a modifier, not an axis: depth is a per-element decision (raised
    tiles beside a flat panel in one aesthetic), so one unitless number multiplies
-   the aesthetic's shadow geometry where the component composes it. Unitless so
-   it inherits -- a container flattens a region, an element opts back in -- and
-   so `.flat` removes a part-based slab or blur without a conditional (complete
-   surface shadows like glass remain). The two classes that ask for depth carry
-   the geometry themselves; on a component it would inherit into everything
-   nested and a plain page would have a shadow under every card. See
-   model.md#elevation.
+   the aesthetic's shadow geometry where the component composes it. `.flat`
+   removes a part-based slab or blur without a conditional (complete surface
+   shadows like glass remain). See model.md#elevation.
+
+   `--ui-elevation`, and the plain-page fallback geometry (`--elevation-y`,
+   `--elevation-blur`) below, are registered non-inheriting: a class sets them
+   on the element it is written on and nothing else picks them up. They used to
+   be ordinary inherited custom properties, on the reasoning that a container
+   could flatten or lift a whole region in one class and any element inside
+   could opt back out -- but the same mechanism let a `.floating` dialog's
+   ambient ×2 reach its own unclassed "Cancel"/"Remove" buttons, doubling their
+   shadow with nothing in the markup asking for that. Depth is not the same
+   kind of thing as color or material: a button inside a raised card is not
+   itself more raised, it is just resting normally inside an already-raised
+   surface. `--ui-shadow-*` -- what an aesthetic supplies -- is unaffected and
+   still cascades normally; that is a different mechanism (the material tokens
+   in `src/aesthetics/*.css`), and an aesthetic still has to reach every nested
+   component uniformly the way it always did. Registering these three is what
+   scopes the change to the elevation modifier alone.
 
    `.flat`/`.raised`/`.floating` and `.elevation-none`/`-sm`/`-md` are
    interchangeable aliases, the second borrowing the raw `--elevation-*` scale's
    naming. Bare `sm`/`md`/`lg` would collide with the size modifier;
    `.elevation-lg` is reserved, not shipped. */
 
+/* `syntax: "*"` with no `initial-value` is deliberate: a numeric syntax would
+   require one (CSS Properties and Values API), and any initial-value at all
+   would mean the property is never actually unset on an element that does not
+   write it -- which is exactly the state `var(--ui-elevation, var(--_d-elevation,
+   1))` in `box.css` needs to fall through to a component's own default. With
+   no initial-value and `inherits: false`, an element that does not set the
+   property directly computes it as guaranteed-invalid, the same as if it had
+   never been registered at all -- `var()` takes its fallback precisely where
+   inheritance used to hand it an ambient value instead. */
+@property --ui-elevation {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --elevation-y {
+  syntax: "*";
+  inherits: false;
+}
+
+@property --elevation-blur {
+  syntax: "*";
+  inherits: false;
+}
+
 /* No part-based depth. Complete surface shadow values, such as glass, are not
    reached by the elevation multiplier. */
 .elevation-none,
@@ -20,20 +56,27 @@
   --ui-elevation: 0;
 }
 
-/* The aesthetic's depth as authored, said explicitly. The geometry is the
-   fallback for a page with no aesthetic in scope; an aesthetic that declares its
-   own overrides it, and the elevation multiplies whichever one lands. */
+/* The plain-step geometry both rungs multiply, declared once so the two cannot
+   drift. It is the fallback for a page with no aesthetic in scope; an aesthetic
+   that declares its own shadow parts overrides it, and the elevation multiplier
+   scales whichever one lands. `.floating` takes its extra depth from the
+   multiplier below, not a second copy of these parts. */
 .elevation-sm,
-.raised {
-  --ui-elevation: 1;
+.raised,
+.elevation-md,
+.floating {
   --elevation-y: 1px;
   --elevation-blur: 3px;
 }
 
+/* The aesthetic's depth as authored, said explicitly. */
+.elevation-sm,
+.raised {
+  --ui-elevation: 1;
+}
+
 /* Twice it, for menus and popovers. */
 .elevation-md,
 .floating {
   --ui-elevation: 2;
-  --elevation-y: 1px;
-  --elevation-blur: 3px;
 }

package/dist/tw/index.css

@@ -1,9 +1,27 @@
 @import "tailwindcss";
-@source not "../dist";
-@source not "../tests";
-@source not "../dev";
-@source not "../debug";
-@source not "../playground";
+
+/* The build has no markup to scan, so Tailwind's automatic content detection
+   sees only this package's own files. The `src/` scan is load-bearing -- it is
+   how the composition utilities (`box`, `surface`, `text-control`,
+   `input-group`, `loader-mask`) get emitted as standalone rules, since nothing
+   `@source inline`s them -- so `source(none)` is not an option. A handful of
+   Tailwind utility names also collide with a CSS property or a word this
+   file's own comments use (`backdrop-filter`, `filter`, `transition`,
+   `transform`, `container`), which reads like a risk of the same scan --
+   verified against Tailwind 4.3.2, none of them emit.
+   `tests/integration/exports.test.ts` guards it, so a scanner change that
+   starts emitting one is caught rather than shipping silently.
+
+   The `@source not` lines below keep everything that is not `src/` out of that
+   scan: the sibling app and fixture directories, the `docs/` tree, the build
+   scripts, and the root prose and data files (`README.md`, `llms*.txt`,
+   `registry*.json`, `package.json`). Without them a class name or `--color-*`
+   reference that appears only in a documentation example ships as real CSS --
+   the violet ramp in `docs/usage/theming.md`'s custom-intent example was
+   compiling into `dist/index.css` and `dist/native.css`, and any utility in a
+   docs code fence did the same. `tests/integration/exports.test.ts` guards it.
+   `scripts/build-tw.mjs` strips these lines from the `dist/tw/` copy, where they
+   resolve to nothing and the `/tw` consumer scans their own tree anyway. */
 
 @import "./theme.css";
 @import "./typography.css";

package/dist/tw/intent.css

@@ -8,6 +8,26 @@
    tooltips, key caps, code and table heads sit on) and `--intent-border` to
    `--ui-ink` (how an aesthetic restates the neutral line without naming one). */
 
+/* The same neutral values, at the root. This is the floor: an element that
+   carries no intent class and matches none of the resets below -- a component
+   `@apply`-ed onto a selector the package does not name, a bare `<code>` with
+   no native stylesheet loaded -- still composes against a real colour instead
+   of an undefined one that collapses its `color-mix()` to nothing. It is not
+   the barrier. `.neutral` and both resets below still write these slots on the
+   element itself, which is a matching rule and so beats this inherited value --
+   that is what stops a `.success` container's intent reaching a component
+   nested under it. An intent class on the element beats both. Values track
+   `.neutral` slot for slot; `registry.test.ts` fails the build on drift. */
+:root {
+  --intent-color: var(--color-text);
+  --intent-contrast: var(--color-text-contrast);
+  --intent-hover: var(--color-text-hover);
+  --intent-strong: var(--color-text-strong);
+  --intent-subtle: var(--color-surface);
+  --intent-border: var(--ui-ink, var(--color-border));
+  --intent-fill-max: 20%;
+}
+
 /* Neutral stops its fill short: its colour is the page's ink, so a full fill is
    a slab and `.neutral.solid` was pixel-for-pixel `.primary.solid`. 20% is
    chosen against `.soft`'s 12% -- a step past the tint, not a repeat.
@@ -113,7 +133,8 @@
   .data-table,
   .pre,
   .quote,
-  .tooltip,
+  .tooltip-bubble,
+  .tooltip-icon,
   .badge,
   .kbd,
   .code,
@@ -148,8 +169,8 @@
 }
 
 /* The bubble a tooltip draws is the one plate in the package that is chosen
-   rather than composed, so the tooltip resolves the no-intent case onto its own
-   pair instead of onto the shared neutral. Composed, it was 20% of the page's
+   rather than composed, so it resolves the no-intent case onto its own pair
+   instead of onto the shared neutral. Composed, it was 20% of the page's
    ink over `--color-surface`, which lifts off a dark page and sinks into a light
    one -- see `--color-tooltip` in `theme.css` for the measurements.
 
@@ -158,17 +179,20 @@
    rather than an ink, so a full fill of it is the plate and there is nothing to
    stop short of.
 
-   `--intent-subtle` stays the surface token. It is what the trigger badge rests
-   on, and a badge is a quiet marker on the page rather than the message, so it
-   keeps the tone every other unclassed component sits on.
+   `--intent-subtle` stays the surface token, the same tone every other
+   unclassed component sits on. `.tooltip-icon`, the trigger badge, is a
+   separate element now and does not read this block at all -- it never fills
+   past `0%`, so the generic neutral reset above it is enough, and it keeps its
+   own resting ground and line independent of whatever intent the bubble shows.
 
    Two selectors, because `none` and `neutral` have to agree here. `:where()`
-   loses to any intent class, so `.tooltip.primary` still floods with primary;
-   `.tooltip.neutral` carries 0-2-0 and beats `.neutral`, so writing the intent
-   out gives the same bubble as writing nothing. Without the second selector the
-   two would differ on a component where they mean the same thing. */
-:where(.tooltip),
-.tooltip.neutral {
+   loses to any intent class, so `.tooltip-bubble.primary` still floods with
+   primary; `.tooltip-bubble.neutral` carries 0-2-0 and beats `.neutral`, so
+   writing the intent out gives the same bubble as writing nothing. Without the
+   second selector the two would differ on a component where they mean the
+   same thing. */
+:where(.tooltip-bubble),
+.tooltip-bubble.neutral {
   --intent-color: var(--color-tooltip);
   --intent-contrast: var(--color-tooltip-contrast);
   --intent-hover: var(--color-tooltip);

package/dist/tw/native.css

@@ -1,10 +1,8 @@
 @import "./theme.css";
 @reference "tailwindcss";
-@source not "../dist";
-@source not "../tests";
-@source not "../dev";
-@source not "../debug";
-@source not "../playground";
+/* Everything that is not `src/` -- see the note in `index.css`. Without the
+   docs and root-file excludes a utility used only in a documentation example
+   compiles into `dist/native.css`. */
 @import "./typography.css";
 @import "./utilities/index.css";
 @import "./components/index.css";
@@ -52,21 +50,7 @@
 }
 
 @layer base {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  figure,
-  blockquote,
-  dl,
-  dd,
-  ul,
-  ol {
-    margin: 0;
-  }
+  /* The `h1`-`ol` margin reset lives in `reset.css`, imported above. */
 
   /* Headings */
   h1 {

package/dist/tw/reset.css

@@ -3,16 +3,13 @@
 @import "./typography.css";
 
 @layer base {
-  /* Every sizing utility this package ships — `min-height`/`min-width:
-     var(--control-height)` on `.btn`, `.ipt`, `.select`, `.textarea` chief
-     among them — means that as the control's total footprint, padding and
-     border included. Without this, `apps/docs` reads correctly only because
-     its own Tailwind pipeline supplies Preflight's border-box reset
-     separately; this package only pulls in Tailwind's utility engine via
-     `@reference`, never its Preflight, so a consumer with no Tailwind
-     pipeline of its own — `apps/demo` imports this compiled stylesheet
-     directly — got the content-box default instead, inflating every sized
-     control by its own padding and border. */
+  /* The package's own components no longer lean on this: `@utility box` sets
+     `box-sizing: border-box` on itself, so a sized control is right in every
+     entrypoint including the reset-less `/components` and granular `/tw/*`
+     ones. What is left for the universal rule is the consumer's own markup --
+     a plain `<div>` laid out beside our components under the full reset -- so
+     it stays part of the opinionated baseline the reset already is, rather
+     than a correctness prop the components need. */
   *,
   *::before,
   *::after {
@@ -36,7 +33,7 @@
 
   html,
   body {
-    @apply bg-background text-text font-default min-h-dvh;
+    @apply bg-background text-text font-default;
   }
 
   h1,
@@ -55,10 +52,6 @@
     margin: 0;
   }
 
-  body {
-    @apply flex flex-col;
-  }
-
   button,
   input,
   optgroup,
@@ -74,10 +67,6 @@
     @apply enabled:cursor-pointer;
   }
 
-  img {
-    @apply select-none;
-  }
-
   ::selection {
     background: var(--color-primary);
     color: var(--color-primary-contrast);
@@ -124,19 +113,38 @@
   }
 }
 
-@layer components {
-  [aria-current="page"] {
-    @apply text-primary font-bold;
+/* Unlayered on purpose, matching the `forced-colors` blocks in `native.css` and
+   `form.css`. An accessibility override has to win over any layered rule
+   whatever the specificity, and a `@layer components` wrapper here would let the
+   component utilities that draw a border overrule it. */
+@media (forced-colors: active) {
+  .btn,
+  .ipt,
+  .textarea,
+  .select,
+  .alert,
+  .badge {
+    border-color: CanvasText;
   }
+}
 
-  @media (forced-colors: active) {
-    .btn,
-    .ipt,
-    .textarea,
-    .select,
-    .alert,
-    .badge {
-      border-color: CanvasText;
-    }
-  }
+/* The user agent already promises both of these for a native `<dialog>` --
+   `dialog:not([open]) { display: none }` and a centered `margin: auto` on the
+   open box -- but both are user-agent origin, which loses to any author rule
+   at all. `.card`'s own `display: block` (`surface`'s `@apply box block`)
+   beats the first outright, so a `<dialog class="card">` renders open with no
+   `open` attribute and no `.showModal()` call -- the registry has no
+   dialog/modal component of its own, and `.card` is the closest primitive a
+   consumer reaches for. A margin reset on every element -- Tailwind's own
+   Preflight on the entries that carry it -- beats the second, so an opened
+   dialog pins to the top-left instead of centering. Restated here, unlayered like
+   the block above, for the same reason: a behavior override has to win over
+   any layered rule whatever the specificity, and `.card` is layered in the
+   utilities layer regardless of how it composes `box`. */
+dialog:not([open]) {
+  display: none;
+}
+
+dialog[open] {
+  margin: auto;
 }