From 605e57751c7754be4f94dd301701537a3029e815 Mon Sep 17 00:00:00 2001
From: meels <meelstorm@gmail.com>
Date: Tue, 28 Jul 2026 16:50:30 +0200
Subject: [PATCH] fix: move responsive overrides after the rules they override

At-rules do not raise specificity, so a rule inside @container or @media
competes with the base rule on source order alone. The collapse blocks
sat above .wd-pane-right's base rule, so the base rule won and the
stacked layout silently never applied. All overrides now live at the end
of the file.
---
 .obsidian/plugins/webinar-dash/styles.css | 63 +++++++++++++----------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/.obsidian/plugins/webinar-dash/styles.css b/.obsidian/plugins/webinar-dash/styles.css
index 4cb52f6..f0fcfec 100644
--- a/.obsidian/plugins/webinar-dash/styles.css
+++ b/.obsidian/plugins/webinar-dash/styles.css
@@ -120,33 +120,6 @@
   border-color: var(--wd-border-strong);
 }
 
-/* Collapse to one column on the width that actually matters — the pane's,
-   not the window's. A media query measures the window, so a wide window
-   with the dashboard in a narrow split pane would keep two cramped
-   columns. The container query below responds to the pane itself; the
-   media query stays as a floor for a genuinely narrow window. */
-@container (max-width: 820px) {
-  .wd-grid { grid-template-columns: minmax(0, 1fr); }
-  /* Stacked, the divider belongs above the pane, not beside it. */
-  .wd-pane-right {
-    border-left: 0;
-    padding-left: 0;
-    border-top: 1px solid var(--wd-border);
-    padding-top: 20px;
-  }
-}
-
-@media (max-width: 820px) {
-  .wd-grid { grid-template-columns: minmax(0, 1fr); }
-  /* Stacked, the divider belongs above the pane, not beside it. */
-  .wd-pane-right {
-    border-left: 0;
-    padding-left: 0;
-    border-top: 1px solid var(--wd-border);
-    padding-top: 20px;
-  }
-}
-
 .wd-pane { display: flex; flex-direction: column; gap: 20px; }
 
 /* The coverage pane sits behind a hairline with a 24px inset, so its table does
@@ -269,3 +242,39 @@
   border: 1px solid var(--wd-border); border-radius: 4px; padding: 8px;
   color: var(--wd-fg-2);
 }
+
+/* ------------------------------------------------------------------
+   Responsive overrides — deliberately last in the file.
+
+   At-rules do not raise specificity: a rule inside @container or @media
+   competes with the base rule on source order alone. These blocks were
+   previously above the .wd-pane-right base rule, so the base rule won
+   and the collapsed layout silently never applied. Keep every override
+   here, after everything it overrides.
+
+   Collapse on the width that actually matters — the pane's, not the
+   window's. A media query measures the window, so a wide window with the
+   dashboard in a narrow split pane would keep two cramped columns. The
+   container query responds to the pane itself; the media query stays as
+   a floor for a genuinely narrow window.
+   ------------------------------------------------------------------ */
+@container (max-width: 820px) {
+  .wd-grid { grid-template-columns: minmax(0, 1fr); }
+  /* Stacked, the divider belongs above the pane, not beside it. */
+  .wd-pane-right {
+    border-left: 0;
+    padding-left: 0;
+    border-top: 1px solid var(--wd-border);
+    padding-top: 20px;
+  }
+}
+
+@media (max-width: 820px) {
+  .wd-grid { grid-template-columns: minmax(0, 1fr); }
+  .wd-pane-right {
+    border-left: 0;
+    padding-left: 0;
+    border-top: 1px solid var(--wd-border);
+    padding-top: 20px;
+  }
+}