Fix nested dropdowns blocking parent clicks (picocss/pico#614).

Fix double border in grouped outline buttons (#3).

Author: Amaury

CLAUDE.md

@@ -60,6 +60,7 @@ These µCSS rules exist to fix PicoCSS default behaviors:
 - `[data-tooltip] { display: inline-block }` — Fix tooltip mispositioned on inline elements in Chromium (picocss/pico#678) — remove when fixed upstream
 - `[data-tooltip]::before/::after` use `--mu-inverted-background`/`--mu-inverted-color` instead of themed contrast — PicoCSS contrast is theme-dependent in µCSS, not always readable as tooltip background
 - `[data-tooltip]::before { white-space: pre-line; width: max-content; max-width: 20rem }` — Fix tooltip overflow on long text, support explicit line breaks, comfortable width (picocss/pico#665, picocss/pico#715) — remove when fixed upstream
+- `details.dropdown details.dropdown[open] > summary::before { display: none }` — Fix nested dropdowns blocking parent clicks (picocss/pico#614) — remove when fixed upstream
 - `small { font-size: var(--mu-font-size) }` — Fix `<small>` font-size not applied (picocss/pico#561) — remove when fixed upstream
 - `code, kbd, samp { padding: 0.125rem 0.375rem }` — Fix inline code vertical padding too thick (picocss/pico#651) — remove when fixed upstream
 - PicoCSS sets `:where(table) { width: 100% }` — all tables are fullwidth by default, no `.table-fullwidth` class needed

DECISIONS.md

@@ -11,6 +11,7 @@ Fixes integrated into µCSS. The "Temporary" column indicates workarounds that s
 | #540, #700 | Helper text (`<small>`) not styled after input groups | mu.utilities.css | Yes |
 | #634, #664 | Safari 18.2+ truncates dropdown text in nav | mu.component.nav.css | Yes |
 | #561 | `<small>` font-size not applied (variable set but unused) | mu.utilities.css | Yes |
+| #614 | Nested dropdowns: parent menu clicks blocked by inner overlay | mu.utilities.css | Yes |
 | #651 | Inline code/kbd/samp vertical padding too thick | mu.utilities.css, mu.component.var.css | Yes |
 | #663 | Striped table: hidden rows break odd/even alternation | mu.component.table.css | Yes |
 | #665, #715 | Tooltip overflow on long text, multiline support | mu.utilities.css | Yes |

css/mu.component.button.css

@@ -195,6 +195,20 @@
 	color: var(--mu-primary-hover);
 }
 
+/*
+ * Grouped outline buttons: fix double border at junction.
+ * PicoCSS uses margin-left: calc(border-width * -1) to overlap adjacent borders,
+ * but user-agent button margins can prevent exact overlap.
+ * Fix: reset margins on all group children, and remove the inner left border
+ * on non-first outline buttons (both PicoCSS .outline and µCSS .btn-outline).
+ */
+[role=group] > :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
+	margin: 0;
+}
+[role=group] > :not(:first-child):is(.outline, .btn-outline) {
+	border-left-width: 0;
+}
+
 /* Disabled */
 .btn[aria-disabled="true"] {
 	opacity: 0.5;

css/mu.utilities.css

@@ -48,6 +48,17 @@ li ol {
 	max-width: 20rem;
 }
 
+/*
+ * PicoCSS bugfix: nested dropdowns block parent clicks (picocss/pico#614) — remove when fixed upstream
+ * PicoCSS adds a 100vw × 100vh fixed overlay on every open dropdown's summary::before
+ * to catch outside clicks. With nested dropdowns, the inner overlay (later in source order)
+ * paints over the parent's menu items and prevents interaction.
+ * Fix: disable the overlay on nested dropdowns — the parent's overlay still handles outside clicks.
+ */
+details.dropdown details.dropdown[open] > summary::before {
+	display: none;
+}
+
 /* PicoCSS bugfix: <small> font-size not applied (picocss/pico#561) — remove when fixed upstream */
 /* PicoCSS sets --pico-font-size: 0.875em on small but never applies it; browser uses "smaller" instead */
 small {