refactor: improve layout and EU-centric formatting

- Split section titles and code examples onto separate lines
- Add monospace code display below each section title
- Fix cons/pros markers (gray ✗ on left, blue ✓ on right)
- Update currency to EUR (€) and number formatting to de-DE locale
- Add section-code CSS styling

Author: nextlevelshit

.parcel-cache/data.mdb

@@ -11,7 +11,8 @@
 			},
 			"sections": {
 				"disclosure": {
-					"title": "Collapsible Content — <details> <summary>",
+					"title": "Collapsible Content",
+					"code": "<details> <summary>",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: ARIA state management, keyboard events, focus handling, screen reader compatibility",
@@ -40,7 +41,8 @@
 					]
 				},
 				"modals": {
-					"title": "Modal Dialogs — <dialog>",
+					"title": "Modal Dialogs",
+					"code": "<dialog>",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: Focus trapping, inert background, ESC key handling, backdrop clicks, ARIA modal role",
@@ -71,7 +73,8 @@
 					]
 				},
 				"validation": {
-					"title": "Form Validation — <input type=\"email\"> pattern required",
+					"title": "Form Validation",
+					"code": "<input type=\"email\" pattern=\"...\" required>",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: Custom error messages, timing coordination, accessibility announcements",
@@ -105,7 +108,8 @@
 					]
 				},
 				"progress": {
-					"title": "Progress Bars — <progress>",
+					"title": "Progress Bars",
+					"code": "<progress value=\"70\" max=\"100\">",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: ARIA live regions, role=progressbar, value announcements",
@@ -134,7 +138,8 @@
 					]
 				},
 				"temporal": {
-					"title": "Date/Time Inputs — <input type=\"date\"> type=\"time\" type=\"datetime-local\"",
+					"title": "Date/Time Inputs",
+					"code": "<input type=\"date\"> <input type=\"time\">",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: Calendar widget, i18n, timezone handling, keyboard navigation, touch events",
@@ -161,7 +166,8 @@
 					]
 				},
 				"fieldset": {
-					"title": "Form Grouping — <fieldset> <legend>",
+					"title": "Form Grouping",
+					"code": "<fieldset> <legend>",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: ARIA group role, explicit labeling, manual disabled propagation",
@@ -182,7 +188,8 @@
 					]
 				},
 				"output": {
-					"title": "Calculated Results — <output>",
+					"title": "Calculated Results",
+					"code": "<output for=\"a b\">",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: ARIA live regions, manual form association",
@@ -204,7 +211,8 @@
 					]
 				},
 				"meter": {
-					"title": "Measurements — <meter>",
+					"title": "Measurements",
+					"code": "<meter value=\"0.7\" low=\"0.3\" high=\"0.8\" optimum=\"1\">",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: Manual color coding, ARIA roles, no distinction from progress",
@@ -228,7 +236,8 @@
 					]
 				},
 				"figure": {
-					"title": "Figures & Captions — <figure> <figcaption>",
+					"title": "Figures & Captions",
+					"code": "<figure> <figcaption>",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: ARIA labeling, manual content-caption association",
@@ -249,7 +258,8 @@
 					]
 				},
 				"popover": {
-					"title": "Popovers — popover popovertarget",
+					"title": "Popovers",
+					"code": "<div popover> <button popovertarget=\"...\">",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: Positioning logic, z-index, click-outside, ESC handling",
@@ -274,7 +284,8 @@
 					]
 				},
 				"color": {
-					"title": "Color Picker — <input type=\"color\">",
+					"title": "Color Picker",
+					"code": "<input type=\"color\">",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: Color space math, gradient UI, hue/saturation controls, format conversion",
@@ -299,7 +310,8 @@
 					]
 				},
 				"range": {
-					"title": "Range Slider — <input type=\"range\">",
+					"title": "Range Slider",
+					"code": "<input type=\"range\" min=\"0\" max=\"100\">",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: Drag/touch handling, value interpolation, ARIA slider role",
@@ -324,7 +336,8 @@
 					]
 				},
 				"autocomplete": {
-					"title": "Autocomplete — <datalist>",
+					"title": "Autocomplete",
+					"code": "<input list=\"...\"> <datalist id=\"...\">",
 					"js_title": "JavaScript",
 					"js_badge": "JS",
 					"js_warning": "Requires: Dropdown positioning, keyboard nav, ARIA combobox, touch handling",

.parcel-cache/lock.mdb

@@ -16,7 +16,7 @@ html(lang=lang, dir=dir)
 			p.subtitle= t.hero.subtitle
 
 		//- Progressive Disclosure Section
-		+section(t.sections.disclosure.title)
+		+section(t.sections.disclosure.title, t.sections.disclosure.code)
 			.comparison-grid
 				+badColumn(t.sections.disclosure.js_title, t.sections.disclosure.js_badge, t.sections.disclosure.js_warning)
 					+jsCollapsible("content1", "Custom Collapsible Architecture", t.sections.disclosure.js_content1)
@@ -39,7 +39,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.disclosure.native_pros_title, t.sections.disclosure.native_pros)
 
 		//- Modal Section
-		+section(t.sections.modals.title)
+		+section(t.sections.modals.title, t.sections.modals.code)
 			.comparison-grid
 				+badColumn(t.sections.modals.js_title, t.sections.modals.js_badge, t.sections.modals.js_warning)
 					button(onclick="openJSModal()")= t.sections.modals.js_button
@@ -67,7 +67,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.modals.native_pros_title, t.sections.modals.native_pros)
 
 		//- Form Validation Section
-		+section(t.sections.validation.title)
+		+section(t.sections.validation.title, t.sections.validation.code)
 			.comparison-grid
 				+badColumn(t.sections.validation.js_title, t.sections.validation.js_badge, t.sections.validation.js_warning)
 					form(onsubmit="return validateJSForm(event)")
@@ -106,7 +106,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.validation.native_pros_title, t.sections.validation.native_pros)
 
 		//- Progress Section
-		+section(t.sections.progress.title)
+		+section(t.sections.progress.title, t.sections.progress.code)
 			.comparison-grid
 				+badColumn(t.sections.progress.js_title, t.sections.progress.js_badge, t.sections.progress.js_warning)
 					.js-progress-container
@@ -133,7 +133,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.progress.native_pros_title, t.sections.progress.native_pros)
 
 		//- Temporal Input Section
-		+section(t.sections.temporal.title)
+		+section(t.sections.temporal.title, t.sections.temporal.code)
 			.comparison-grid
 				+badColumn(t.sections.temporal.js_title, t.sections.temporal.js_badge, t.sections.temporal.js_warning)
 					+formGroup(t.sections.temporal.js_label)
@@ -156,7 +156,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.temporal.native_pros_title, t.sections.temporal.native_pros)
 
 		//- Fieldset Section
-		+section(t.sections.fieldset.title)
+		+section(t.sections.fieldset.title, t.sections.fieldset.code)
 			.comparison-grid
 				+badColumn(t.sections.fieldset.js_title, t.sections.fieldset.js_badge, t.sections.fieldset.js_warning)
 					.js-form-section
@@ -187,35 +187,35 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.fieldset.native_pros_title, t.sections.fieldset.native_pros)
 
 		//- Output Section
-		+section(t.sections.output.title)
+		+section(t.sections.output.title, t.sections.output.code)
 			.comparison-grid
 				+badColumn(t.sections.output.js_title, t.sections.output.js_badge, t.sections.output.js_warning)
 					.js-calculator
 						label Quantity:
 						input#js-qty(type="number", value="1", min="1", oninput="updateJsTotal()")
 						span ×
-						label Price: $
-						input#js-price(type="number", value="29.99", step="0.01", oninput="updateJsTotal()")
+						label Price: €
+						input#js-price(type="number", value="29,99", step="0.01", oninput="updateJsTotal()")
 						.js-result
-							span Total: $
-							span#js-total 29.99
+							span Total: €
+							span#js-total 29,99
 
 					+consList(t.sections.output.js_cons_title, t.sections.output.js_cons)
 
 				+goodColumn(t.sections.output.native_title, t.sections.output.native_badge, t.sections.output.native_note)
-					form.native-calculator(oninput="nativeTotal.value = (nativeQty.valueAsNumber * nativePrice.valueAsNumber).toFixed(2)")
+					form.native-calculator(oninput="nativeTotal.value = (nativeQty.valueAsNumber * nativePrice.valueAsNumber).toLocaleString('de-DE', {minimumFractionDigits: 2})")
 						+formGroup("Quantity")
 							input#nativeQty(type="number", value="1", min="1")
-						+formGroup("Price ($)")
+						+formGroup("Price (€)")
 							input#nativePrice(type="number", value="29.99", step="0.01")
 						.output-display
-							label(for="nativeTotal") Total: $
-							output#nativeTotal(for="nativeQty nativePrice") 29.99
+							label(for="nativeTotal") Total: €
+							output#nativeTotal(for="nativeQty nativePrice") 29,99
 
 					+prosList(t.sections.output.native_pros_title, t.sections.output.native_pros)
 
 		//- Meter Section
-		+section(t.sections.meter.title)
+		+section(t.sections.meter.title, t.sections.meter.code)
 			.comparison-grid
 				+badColumn(t.sections.meter.js_title, t.sections.meter.js_badge, t.sections.meter.js_warning)
 					.js-gauge-container
@@ -238,7 +238,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.meter.native_pros_title, t.sections.meter.native_pros)
 
 		//- Figure Section
-		+section(t.sections.figure.title)
+		+section(t.sections.figure.title, t.sections.figure.code)
 			.comparison-grid
 				+badColumn(t.sections.figure.js_title, t.sections.figure.js_badge, t.sections.figure.js_warning)
 					.js-image-container
@@ -260,7 +260,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.figure.native_pros_title, t.sections.figure.native_pros)
 
 		//- Popover Section
-		+section(t.sections.popover.title)
+		+section(t.sections.popover.title, t.sections.popover.code)
 			.comparison-grid
 				+badColumn(t.sections.popover.js_title, t.sections.popover.js_badge, t.sections.popover.js_warning)
 					button(onclick="toggleJsPopover()")= t.sections.popover.js_button
@@ -278,7 +278,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.popover.native_pros_title, t.sections.popover.native_pros)
 
 		//- Color Picker Section
-		+section(t.sections.color.title)
+		+section(t.sections.color.title, t.sections.color.code)
 			.comparison-grid
 				+badColumn(t.sections.color.js_title, t.sections.color.js_badge, t.sections.color.js_warning)
 					+formGroup(t.sections.color.js_label)
@@ -301,7 +301,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.color.native_pros_title, t.sections.color.native_pros)
 
 		//- Range Slider Section
-		+section(t.sections.range.title)
+		+section(t.sections.range.title, t.sections.range.code)
 			.comparison-grid
 				+badColumn(t.sections.range.js_title, t.sections.range.js_badge, t.sections.range.js_warning)
 					+formGroup(t.sections.range.js_label)
@@ -331,7 +331,7 @@ html(lang=lang, dir=dir)
 					+prosList(t.sections.range.native_pros_title, t.sections.range.native_pros)
 
 		//- Autocomplete Section
-		+section(t.sections.autocomplete.title)
+		+section(t.sections.autocomplete.title, t.sections.autocomplete.code)
 			.comparison-grid
 				+badColumn(t.sections.autocomplete.js_title, t.sections.autocomplete.js_badge, t.sections.autocomplete.js_warning)
 					+formGroup(t.sections.autocomplete.js_label)
@@ -509,5 +509,5 @@ html(lang=lang, dir=dir)
 			function updateJsTotal() {
 				const qty = document.getElementById('js-qty').value || 0;
 				const price = document.getElementById('js-price').value || 0;
-				document.getElementById('js-total').textContent = (qty * price).toFixed(2);
+				document.getElementById('js-total').textContent = (qty * price).toLocaleString('de-DE', {minimumFractionDigits: 2});
 			}

.pugrc

@@ -1,6 +1,8 @@
-mixin section(title)
+mixin section(title, code)
 	.section
 		h2.section-title= title
+		if code
+			code.section-code= code
 		block
 
 mixin badColumn(title, badge, warning)

index.pug

@@ -72,13 +72,24 @@ body {
 
 .section-title {
     font-size: 1.25rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.25rem;
     padding: 0;
     text-align: left;
     color: var(--color-text);
     font-weight: 600;
 }
 
+.section-code {
+    display: block;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+    background: var(--color-code-bg);
+    padding: 0.5rem 0.75rem;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+}
+
 .column {
     background: var(--color-card);
     padding: 1.5rem;
@@ -273,15 +284,15 @@ body {
     position: relative;
 }
 
-.pros li::before {
+.good .pros li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--color-primary);
     font-weight: bold;
 }
 
-.cons li::before {
+.bad .cons li::before {
     content: '✗';
     position: absolute;
     left: 0;