Equalize grid-template specificity across the rail tiers

The 560px tier selects .art-cols:not(.no-side-nav) at (0,2,0), so the
860px tier's bare .art-cols template at (0,1,0) could never win and a
set page on a wide pane kept the 2-column template — wrapping the TOC
to the next grid row, bottom-left. The wide template now carries the
same :not() guard, the 860 block's duplicate of the 800px no-side-nav
rules is gone, and a test pins every template rule to equal specificity
so a future tier can't silently lose the cascade again.

Author: Sg312

apps/sim/lib/workspace-files/artifact-stylesheet.test.ts

@@ -120,6 +120,26 @@ describe('docs shell', () => {
 })
 
 describe('docs fidelity', () => {
+  it('keeps every grid template at equal specificity so wider tiers win', () => {
+    // The 560px tier selects .art-cols:not(.no-side-nav) (0,2,0); a wider
+    // tier written as bare .art-cols (0,1,0) loses despite its media query,
+    // leaving the 2-column template active and wrapping the TOC to the next
+    // grid row. Every template rule must carry the same specificity.
+    const templates = SIM_ARTIFACT_STYLESHEET.split('\n').filter((line) =>
+      line.includes('grid-template-columns:')
+    )
+    expect(templates.length).toBeGreaterThanOrEqual(4)
+    for (const line of templates) {
+      const selector = (line.trim().split('{')[0] ?? '').trim()
+      if (!selector.startsWith('.art-cols')) continue
+      if (selector === '.art-cols') {
+        expect(line).toContain('grid-template-columns: 1fr')
+      } else {
+        expect(selector).toMatch(/^\.art-cols(:not\(\.no-side-nav\)|\.no-side-nav)$/)
+      }
+    }
+  })
+
   // The docs table treatment: header rule on --border, row rules on
   // --surface-active, no outer chrome.
   it('styles tables as the docs divider tables', () => {

apps/sim/lib/workspace-files/artifact-stylesheet.ts

@@ -516,13 +516,9 @@ figcaption { font-size: 0.875em; line-height: 1.4285714; color: var(--text-prima
      in the container, with equal flexible gutters either side. The rails
      live inside the gutters (sidebar hugging the left edge, TOC the right),
      so their unequal content widths can never skew the middle column. */
-  .art-cols { grid-template-columns: minmax(min-content, 1fr) minmax(0, 760px) minmax(min-content, 1fr); }
+  .art-cols:not(.no-side-nav) { grid-template-columns: minmax(min-content, 1fr) minmax(0, 760px) minmax(min-content, 1fr); }
   .art-cols > .rail[data-rail="nav"] { justify-self: start; }
   .art-cols > .rail[data-rail="toc"] { justify-self: end; }
-  /* No sidebar: no reserved left gutter — content leads, TOC trails. The
-     hidden rail leaves the grid, so the two remaining children auto-place. */
-  .art-cols.no-side-nav { grid-template-columns: minmax(0, 760px) fit-content(268px); justify-content: center; }
-  .art-cols.no-side-nav > .rail[data-rail="toc"] { justify-self: start; }
   .art-cols > .rail { display: block; position: sticky; top: 68px; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; }
 }
 /* Rails scroll invisibly, like the docs — no scrollbar chrome beside the