Answer stability round 1: 1 🔴, 6 🟡 (0 misread); hide the theme switch after its base rule, hide inert nav toggles, test the rendered result

public/css/auth.css

@@ -1,8 +1,3 @@
-/* =============================================================
-   Auth flow — login / register / forgot password
-   Built on the shared tokens in styles.css. Pure HTML/CSS.
-   ============================================================= */
-
 .auth-stage {
   min-height: 100dvh;
   display: grid; place-items: center;
@@ -126,7 +121,6 @@
 .auth-aside a { color: var(--accent); }
 .auth-aside a:hover { text-decoration: underline; }
 
-/* field-level error, shown under a field the server marked .has-error */
 .field-error {
   display: none; align-items: center; gap: 6px; margin: 0;
   font-size: var(--fz-xs); color: var(--neg);

public/css/styles.css

@@ -191,9 +191,9 @@ summary { list-style: none; cursor: pointer; }
      • CLICKABLE = label is <a href>      → navigates on click.
        STATIC    = label is <span>        → not a navigation target.
    So "header" and "clickable" are independent: any combination works.
-   Children sit in a sibling <ul class="nav-children">. Where :has() works, it
-   folds them unless THIS row's own <details open> (scoped with > so a node
-   only ever controls its own subtree — infinite depth, no JS); elsewhere
+   Children sit in a sibling <ul class="nav-children">. Where :has() works, a
+   branch is folded unless THIS row's own <details open> (scoped with > so a node
+   only ever controls its own subtree — infinite depth, no JS). Without :has()
    every branch stays open, since nothing could reopen one.
    ============================================================ */
 .nav-row { display: flex; align-items: center; gap: 2px; }
@@ -262,8 +262,7 @@ span.nav-self { cursor: default; }                 /* static / non-clickable */
   padding: 8px; display: flex; flex-direction: column; gap: 6px;
 }
 
-/* theme segmented control — every theme rule is a :has(), so without it the switch is inert */
-@supports not selector(:has(a)) { .theme-switch { display: none; } }
+/* theme segmented control */
 .theme-switch {
   display: grid; grid-template-columns: repeat(3, 1fr);
   gap: 2px; padding: 2px;
@@ -285,6 +284,13 @@ span.nav-self { cursor: default; }                 /* static / non-clickable */
   outline: 2px solid var(--focus); outline-offset: 1px;
 }
 
+/* Without :has() every branch is open and every theme rule is inert: neither control does anything.
+   After the base rules, since @supports adds no specificity. */
+@supports not selector(:has(a)) {
+  .nav-disc { visibility: hidden; }  /* keeps its width, so the labels stay aligned */
+  .theme-switch { display: none; }
+}
+
 .footer-actions { display: flex; align-items: center; gap: 4px; }
 .profile {
   display: flex; align-items: center; gap: 9px; flex: 1 1 auto;