1/*
2 * impeccable.style — shared styles for sub-pages and the site-wide header
3 *
4 * Imported by all generated pages under /skills, /anti-patterns, /tutorials,
5 * and by the hand-authored pages (index, cheatsheet, gallery, privacy) via
6 * a direct <link> tag so they all share the same header + prose typography.
7 */
8
9@import "./tokens.css";
10
11/* ============================================
12 SKIP LINK (a11y)
13 ============================================ */
14
15.skip-link {
16 position: absolute;
17 top: -100%;
18 left: 50%;
19 transform: translateX(-50%);
20 z-index: 10000;
21 padding: var(--spacing-sm) var(--spacing-lg);
22 background: var(--color-ink);
23 color: var(--color-paper);
24 font-weight: 600;
25 text-decoration: none;
26 border-radius: 0 0 8px 8px;
27 transition: top 0.2s ease;
28}
29
30.skip-link:focus {
31 top: 0;
32 outline: 2px solid var(--color-accent);
33 outline-offset: 2px;
34}
35
36/* ============================================
37 BASE
38 ============================================ */
39
40html {
41 scroll-behavior: smooth;
42}
43
44body {
45 font-family: var(--font-body);
46 color: var(--color-ink);
47 background: var(--color-paper);
48 line-height: 1.6;
49 -webkit-font-smoothing: antialiased;
50 -moz-osx-font-smoothing: grayscale;
51 text-rendering: optimizeLegibility;
52}
53
54a {
55 color: inherit;
56 text-decoration: none;
57}
58
59/* ============================================
60 SHARED SITE HEADER
61 ============================================ */
62
63.site-header {
64 position: sticky;
65 top: 0;
66 z-index: 100;
67 display: flex;
68 align-items: center;
69 justify-content: space-between;
70 gap: var(--spacing-md);
71 padding: 14px clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
72 background: color-mix(in oklch, var(--color-paper) 94%, transparent);
73 -webkit-backdrop-filter: saturate(1.4) blur(16px);
74 backdrop-filter: saturate(1.4) blur(16px);
75 border-bottom: 1px solid var(--color-mist);
76}
77
78/* Kill any inherited text-decoration from page-level `a` rules. */
79.site-header a,
80.site-header a:hover {
81 text-decoration: none;
82 text-decoration-thickness: 0;
83}
84
85.site-header-brand {
86 display: inline-flex;
87 align-items: center;
88 gap: 10px;
89 font-family: var(--font-display);
90 font-size: 1.25rem;
91 font-weight: 600;
92 letter-spacing: -0.01em;
93 color: var(--color-ink);
94 flex-shrink: 0;
95 transition: color var(--duration-fast) var(--ease-out);
96}
97
98.site-header-brand:hover {
99 color: var(--color-accent);
100}
101
102.site-header-brand-logo {
103 width: 26px;
104 height: 26px;
105 border-radius: 6px;
106 flex-shrink: 0;
107}
108
109.site-header-brand-name {
110 display: inline-block;
111}
112
113.site-header-right {
114 display: flex;
115 align-items: center;
116 gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
117 min-width: 0;
118}
119
120.site-header-nav {
121 display: flex;
122 align-items: center;
123 gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
124 font-family: var(--font-body);
125 font-size: 0.9375rem;
126 font-weight: 500;
127 min-width: 0;
128}
129
130.site-header-nav a {
131 position: relative;
132 display: inline-block;
133 white-space: nowrap;
134 color: var(--color-charcoal);
135 padding: 4px 0;
136 transition: color var(--duration-fast) var(--ease-out);
137}
138
139.site-header-nav a:hover {
140 color: var(--color-accent);
141}
142
143.site-header-nav a[aria-current="page"] {
144 color: var(--color-ink);
145 font-weight: 600;
146}
147
148.site-header-nav a[aria-current="page"]::after {
149 content: "";
150 position: absolute;
151 left: 0;
152 right: 0;
153 bottom: -4px;
154 height: 2px;
155 background: var(--color-accent);
156 border-radius: 2px;
157}
158
159/* GitHub star pill — subtle, inviting nudge without shouting */
160.site-header-github {
161 display: inline-flex;
162 align-items: center;
163 gap: 6px;
164 padding: 4px 10px 4px 8px;
165 border-radius: 99px;
166 background: var(--color-cream);
167 border: 1px solid var(--color-mist);
168 font-family: var(--font-mono);
169 font-size: 0.8125rem;
170 font-weight: 500;
171 color: var(--color-charcoal);
172 flex-shrink: 0;
173 transition:
174 background var(--duration-fast) var(--ease-out),
175 border-color var(--duration-fast) var(--ease-out),
176 color var(--duration-fast) var(--ease-out);
177}
178
179.site-header-github svg {
180 width: 14px;
181 height: 14px;
182 flex-shrink: 0;
183}
184
185.site-header-github:hover {
186 background: var(--color-paper);
187 border-color: var(--color-ink);
188 color: var(--color-ink);
189}
190
191.site-header-github-star {
192 color: #f59e0b;
193 width: 12px;
194 height: 12px;
195 flex-shrink: 0;
196}
197
198@media (max-width: 820px) {
199 .site-header {
200 padding: 12px var(--spacing-md);
201 gap: var(--spacing-sm);
202 }
203
204 .site-header-brand {
205 font-size: 1.0625rem;
206 }
207
208 .site-header-brand-logo {
209 width: 22px;
210 height: 22px;
211 }
212
213 .site-header-right {
214 gap: var(--spacing-sm);
215 }
216
217 .site-header-nav {
218 font-size: 0.8125rem;
219 gap: var(--spacing-sm);
220 overflow-x: auto;
221 scrollbar-width: none;
222 -webkit-overflow-scrolling: touch;
223 /* fade the right edge so users see there's more to scroll */
224 mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
225 -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%);
226 }
227
228 .site-header-nav::-webkit-scrollbar {
229 display: none;
230 }
231
232 .site-header-nav a[data-nav="home"] {
233 /* Brand already acts as home link on mobile */
234 display: none;
235 }
236
237 .site-header-github {
238 padding: 4px 8px;
239 }
240
241 .site-header-github-label {
242 display: none;
243 }
244}
245
246@media (max-width: 480px) {
247 .site-header-brand-name {
248 /* Logo alone on narrow screens */
249 display: none;
250 }
251}
252
253/* ============================================
254 SUB-PAGE LAYOUT SHELL
255 ============================================ */
256
257main#main {
258 display: block;
259}
260
261.sub-page-content {
262 max-width: 820px;
263 margin: 0 auto;
264 padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2.5rem) 6rem;
265}
266
267.skill-detail {
268 /* No max-width on the article itself. The editorial body sections
269 (header, editorial wrapper, skill source, references) each cap
270 themselves at 720px for readable line length, while the hero is
271 allowed to break out on wide viewports. */
272 width: 100%;
273}
274
275.sub-page-header {
276 margin-bottom: clamp(2.5rem, 6vw, 4rem);
277}
278
279.sub-page-eyebrow {
280 font-family: var(--font-mono);
281 font-size: 0.75rem;
282 font-weight: 600;
283 text-transform: uppercase;
284 letter-spacing: 0.14em;
285 color: var(--color-accent);
286 margin-bottom: var(--spacing-sm);
287}
288
289.sub-page-title {
290 font-family: var(--font-display);
291 font-size: clamp(2.5rem, 6vw, 4.5rem);
292 font-weight: 400;
293 line-height: 1.05;
294 letter-spacing: -0.02em;
295 color: var(--color-ink);
296 margin-bottom: var(--spacing-md);
297}
298
299.sub-page-lede {
300 font-size: clamp(1rem, 1.4vw, 1.125rem);
301 line-height: 1.55;
302 color: var(--color-charcoal);
303 max-width: 62ch;
304}
305
306/* ============================================
307 DOCS-BROWSER LAYOUT (used by /skills)
308 ============================================ */
309
310:root {
311 --site-header-height: 62px;
312 --skills-sidebar-width: 200px;
313}
314
315.skills-layout-page main#main {
316 /* Reset: the docs layout provides its own max-width container. */
317 max-width: none;
318 margin: 0;
319 padding: 0;
320}
321
322.skills-layout {
323 display: grid;
324 grid-template-columns: var(--skills-sidebar-width) minmax(0, 1fr);
325 gap: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
326 /*
327 * Match horizontal padding to .site-header so the sidebar content lines
328 * up with the brand logo in the nav bar above. Intentionally no max-width
329 * so the docs-browser feels wall-to-wall on wide screens.
330 */
331 padding: 0 clamp(var(--spacing-md), 4vw, var(--spacing-2xl));
332 align-items: start;
333}
334
335/* ============================================
336 SIDEBAR
337 ============================================ */
338
339.skills-sidebar {
340 position: sticky;
341 top: var(--site-header-height);
342 align-self: start;
343 max-height: calc(100vh - var(--site-header-height));
344 overflow-y: auto;
345 padding: var(--spacing-lg) 0 var(--spacing-2xl);
346 border-right: 1px solid var(--color-mist);
347 scrollbar-width: thin;
348 scrollbar-color: var(--color-mist) transparent;
349}
350
351/* Desktop only: reserve full viewport height so the border-right
352 divider reaches the bottom of the viewport even on short pages.
353 On mobile this rule would leave a viewport-sized empty block
354 above the main content when the menu is collapsed. */
355@media (min-width: 921px) {
356 .skills-sidebar {
357 min-height: calc(100vh - var(--site-header-height));
358 }
359}
360
361.skills-sidebar::-webkit-scrollbar {
362 width: 6px;
363}
364
365.skills-sidebar::-webkit-scrollbar-thumb {
366 background: var(--color-mist);
367 border-radius: 3px;
368}
369
370.skills-sidebar-inner {
371 padding-right: var(--spacing-md);
372}
373
374/* Mobile menu toggle. Hidden on desktop. */
375.skills-sidebar-toggle {
376 display: none;
377}
378
379.skills-sidebar-toggle-chevron {
380 transition: transform var(--duration-base) var(--ease-out);
381 flex-shrink: 0;
382 color: var(--color-ash);
383}
384
385/* Label at the top of the sidebar — hidden visually, kept for a11y tree. */
386.skills-sidebar-label {
387 position: absolute;
388 width: 1px;
389 height: 1px;
390 padding: 0;
391 margin: -1px;
392 overflow: hidden;
393 clip: rect(0, 0, 0, 0);
394 border: 0;
395}
396
397.skills-sidebar-group {
398 margin-bottom: 1.5rem;
399}
400
401.skills-sidebar-group:last-child {
402 margin-bottom: 0;
403}
404
405.skills-sidebar-divider {
406 border: none;
407 height: 1px;
408 background: var(--color-mist);
409 margin: 0 0 1.5rem 0;
410 width: 100%;
411}
412
413.skills-sidebar-group-title {
414 font-family: var(--font-mono);
415 font-size: 0.625rem;
416 font-weight: 600;
417 text-transform: uppercase;
418 letter-spacing: 0.14em;
419 color: var(--color-ash);
420 margin-bottom: 6px;
421 /* Match the link text's 14px left inset (2 border + 12 padding) so
422 category titles and link labels start at the same x position. */
423 padding: 0 0 0 14px;
424}
425
426.skills-sidebar-list {
427 list-style: none;
428 padding: 0;
429 margin: 0;
430}
431
432.skills-sidebar-list li {
433 margin: 0;
434}
435
436.skills-sidebar-list a {
437 display: block;
438 /* Border sits inside the normal flow (no negative margin) because
439 the sidebar's `overflow-y: auto` coerces overflow-x to auto too
440 per CSS spec, which would clip any border hanging left of the
441 column. Text is inset 14px (2 border + 12 padding) from the column
442 edge; group titles above use the same 14px inset. Accepts a small
443 misalignment with the header logo in exchange for a visible
444 active-state accent. */
445 padding: 4px 0 4px 12px;
446 border-left: 2px solid transparent;
447 font-family: var(--font-mono);
448 font-size: 0.875rem;
449 font-weight: 500;
450 line-height: 1.5;
451 color: var(--color-charcoal);
452 text-decoration: none;
453 transition: color var(--duration-fast) var(--ease-out),
454 border-color var(--duration-fast) var(--ease-out),
455 background var(--duration-fast) var(--ease-out);
456}
457
458.skills-sidebar-list a:hover {
459 color: var(--color-accent);
460 background: color-mix(in oklch, var(--color-accent-dim) 30%, transparent);
461}
462
463.skills-sidebar-list a[aria-current="page"] {
464 color: var(--color-ink);
465 font-weight: 600;
466 border-left-color: var(--color-accent);
467}
468
469.skills-sidebar-list a[aria-current="page"]:hover {
470 color: var(--color-ink);
471 background: transparent;
472}
473
474.skills-sidebar-sub a {
475 padding-left: 24px;
476 font-size: 0.8125rem;
477 color: var(--color-ash);
478}
479
480/* ============================================
481 OVERVIEW MAIN CONTENT
482 ============================================ */
483
484.skills-main {
485 min-width: 0;
486 padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem);
487}
488
489.skills-overview-content {
490 max-width: 720px;
491}
492
493.skills-overview-header {
494 margin-bottom: clamp(2.5rem, 5vw, 4rem);
495}
496
497.skills-overview-header .sub-page-lede a {
498 color: var(--color-ink);
499 text-decoration: underline;
500 text-decoration-thickness: 1px;
501 text-decoration-color: var(--color-accent);
502 text-underline-offset: 4px;
503 font-family: var(--font-mono);
504 font-weight: 500;
505}
506
507.skills-overview-howto {
508 padding: var(--spacing-lg) var(--spacing-lg);
509 background: var(--color-cream);
510 border: 1px solid var(--color-mist);
511 border-radius: 10px;
512 margin-bottom: clamp(2.5rem, 5vw, 4rem);
513}
514
515.skills-overview-howto-title {
516 font-family: var(--font-display);
517 font-size: 1.25rem;
518 font-style: italic;
519 font-weight: 500;
520 color: var(--color-ink);
521 margin-bottom: var(--spacing-sm);
522}
523
524.skills-overview-howto p {
525 font-size: 0.9375rem;
526 line-height: 1.7;
527 color: var(--color-charcoal);
528 max-width: 60ch;
529}
530
531.skills-overview-howto a {
532 color: var(--color-ink);
533 font-family: var(--font-mono);
534 font-size: 0.875em;
535 font-weight: 500;
536 text-decoration: none;
537 border-bottom: 1px solid var(--color-accent);
538 transition: color var(--duration-fast) var(--ease-out);
539}
540
541.skills-overview-howto a:hover {
542 color: var(--color-accent);
543}
544
545.skills-overview-categories {
546 display: flex;
547 flex-direction: column;
548 gap: clamp(2rem, 4vw, 3rem);
549}
550
551.skills-overview-category {
552 padding-bottom: clamp(2rem, 4vw, 2.5rem);
553 border-bottom: 1px solid var(--color-mist);
554}
555
556.skills-overview-category:last-child {
557 border-bottom: none;
558}
559
560.skills-overview-category-meta {
561 display: flex;
562 align-items: baseline;
563 justify-content: space-between;
564 gap: var(--spacing-md);
565 margin-bottom: 6px;
566}
567
568.skills-overview-category-title {
569 font-family: var(--font-display);
570 font-size: clamp(1.5rem, 3vw, 2rem);
571 font-weight: 500;
572 font-style: italic;
573 color: var(--color-ink);
574 letter-spacing: -0.01em;
575}
576
577.skills-overview-category-count {
578 font-family: var(--font-mono);
579 font-size: 0.6875rem;
580 font-weight: 600;
581 text-transform: uppercase;
582 letter-spacing: 0.12em;
583 color: var(--color-ash);
584}
585
586.skills-overview-category-desc {
587 font-size: 0.9375rem;
588 line-height: 1.7;
589 color: var(--color-charcoal);
590 max-width: 58ch;
591 margin-bottom: var(--spacing-md);
592}
593
594.skills-overview-chips {
595 display: flex;
596 flex-wrap: wrap;
597 gap: 8px;
598}
599
600.skills-overview-chip {
601 display: inline-flex;
602 align-items: center;
603 padding: 6px 12px;
604 font-family: var(--font-mono);
605 font-size: 0.8125rem;
606 font-weight: 500;
607 color: var(--color-ink);
608 background: var(--color-paper);
609 border: 1px solid var(--color-mist);
610 border-radius: 99px;
611 text-decoration: none;
612 transition: border-color var(--duration-fast) var(--ease-out),
613 color var(--duration-fast) var(--ease-out),
614 background var(--duration-fast) var(--ease-out);
615}
616
617.skills-overview-chip:hover {
618 color: var(--color-accent);
619 border-color: var(--color-accent);
620 background: var(--color-cream);
621}
622
623/* ============================================
624 ANTI-PATTERNS INDEX
625 ============================================ */
626
627.anti-patterns-sidebar-list a {
628 display: flex !important;
629 align-items: baseline;
630 justify-content: space-between;
631 gap: var(--spacing-sm);
632}
633
634.anti-patterns-sidebar-count {
635 font-size: 0.6875rem;
636 font-weight: 500;
637 color: var(--color-ash);
638 font-variant-numeric: tabular-nums;
639}
640
641/* The anti-patterns page lets the grid of rule cards use the full
642 column width. Header, lede, and legend stay capped for line length. */
643.anti-patterns-content {
644 width: 100%;
645}
646
647.anti-patterns-header {
648 max-width: 720px;
649 margin-bottom: clamp(2rem, 4vw, 3rem);
650}
651
652.anti-patterns-header .sub-page-lede code {
653 font-family: var(--font-mono);
654 font-size: 0.875em;
655 color: var(--color-ink);
656 background: var(--color-cream);
657 padding: 2px 6px;
658 border-radius: 4px;
659 border: 1px solid var(--color-mist);
660}
661
662.anti-patterns-header .sub-page-lede a {
663 color: var(--color-ink);
664 text-decoration: underline;
665 text-decoration-color: var(--color-accent);
666 text-decoration-thickness: 1px;
667 text-underline-offset: 4px;
668 font-family: var(--font-mono);
669 font-weight: 500;
670 font-size: 0.9375em;
671}
672
673.anti-patterns-legend {
674 background: var(--color-cream);
675 border: 1px solid var(--color-mist);
676 border-radius: 10px;
677 margin-bottom: clamp(2rem, 4vw, 3rem);
678 max-width: 720px;
679}
680
681.anti-patterns-legend-summary {
682 list-style: none;
683 cursor: pointer;
684 display: flex;
685 align-items: center;
686 justify-content: space-between;
687 gap: var(--spacing-sm);
688 padding: 14px var(--spacing-lg);
689 transition: background var(--duration-fast) var(--ease-out);
690}
691
692.anti-patterns-legend-summary::-webkit-details-marker {
693 display: none;
694}
695
696.anti-patterns-legend-summary:hover {
697 background: color-mix(in oklch, var(--color-mist) 40%, transparent);
698}
699
700.anti-patterns-legend-title {
701 font-family: var(--font-body);
702 font-size: 0.875rem;
703 font-weight: 600;
704 color: var(--color-ink);
705}
706
707.anti-patterns-legend-chevron {
708 color: var(--color-ash);
709 transition: transform var(--duration-base) var(--ease-out);
710 flex-shrink: 0;
711}
712
713.anti-patterns-legend[open] .anti-patterns-legend-chevron {
714 transform: rotate(180deg);
715}
716
717.anti-patterns-legend-body {
718 padding: 0 var(--spacing-lg) var(--spacing-lg);
719 border-top: 1px solid var(--color-mist);
720 margin-top: 4px;
721 padding-top: var(--spacing-md);
722}
723
724.anti-patterns-legend-body p {
725 font-size: 0.9375rem;
726 line-height: 1.7;
727 color: var(--color-charcoal);
728}
729
730.anti-patterns-legend-body a {
731 color: var(--color-ink);
732 text-decoration: none;
733 border-bottom: 1px solid var(--color-accent);
734 font-family: var(--font-mono);
735 font-size: 0.875em;
736 font-weight: 500;
737}
738
739.anti-patterns-legend-body a:hover {
740 color: var(--color-accent);
741}
742
743.anti-patterns-sections {
744 display: flex;
745 flex-direction: column;
746 gap: clamp(3rem, 6vw, 4.5rem);
747}
748
749.anti-patterns-section-header {
750 display: flex;
751 align-items: baseline;
752 justify-content: space-between;
753 gap: var(--spacing-md);
754 padding-bottom: var(--spacing-sm);
755 border-bottom: 1px solid var(--color-mist);
756 margin-bottom: var(--spacing-lg);
757}
758
759.anti-patterns-section-title {
760 font-family: var(--font-display);
761 font-size: clamp(1.75rem, 3vw, 2.25rem);
762 font-weight: 500;
763 font-style: italic;
764 color: var(--color-ink);
765 letter-spacing: -0.01em;
766}
767
768.anti-patterns-section-count {
769 font-family: var(--font-mono);
770 font-size: 0.6875rem;
771 font-weight: 600;
772 text-transform: uppercase;
773 letter-spacing: 0.12em;
774 color: var(--color-ash);
775}
776
777.rule-card-grid {
778 display: grid;
779 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
780 gap: var(--spacing-md);
781}
782
783.rule-card {
784 background: var(--color-paper);
785 border: 1px solid var(--color-mist);
786 border-radius: 10px;
787 display: flex;
788 flex-direction: column;
789 overflow: hidden;
790 transition: border-color var(--duration-fast) var(--ease-out);
791}
792
793.rule-card:hover {
794 border-color: var(--color-ash);
795}
796
797/* Visual example preview at the top of each card. */
798.rule-card-visual {
799 position: relative;
800 height: 160px;
801 background: var(--color-cream);
802 border-bottom: 1px solid var(--color-mist);
803 overflow: hidden;
804}
805
806.rule-card-visual-inner {
807 position: absolute;
808 inset: 0;
809 display: flex;
810 align-items: center;
811 justify-content: center;
812 padding: var(--spacing-md);
813 /* Prevent the inline snippet's styles from bleeding outside the box. */
814 overflow: hidden;
815}
816
817.rule-card-body {
818 padding: var(--spacing-md);
819 display: flex;
820 flex-direction: column;
821 gap: 8px;
822 flex: 1;
823}
824
825.rule-card-head {
826 display: flex;
827 align-items: center;
828 gap: 6px;
829 margin-bottom: 2px;
830 flex-wrap: wrap;
831}
832
833.rule-card-category {
834 font-family: var(--font-mono);
835 font-size: 0.625rem;
836 font-weight: 600;
837 text-transform: uppercase;
838 letter-spacing: 0.1em;
839 padding: 3px 8px;
840 border-radius: 99px;
841}
842
843.rule-card-category[data-category="slop"] {
844 color: var(--color-accent);
845 background: var(--color-accent-dim);
846}
847
848.rule-card-category[data-category="quality"] {
849 color: var(--color-charcoal);
850 background: var(--color-mist);
851}
852
853/* Detection layer badge: CLI, Browser, or LLM only. */
854.rule-card-layer {
855 font-family: var(--font-mono);
856 font-size: 0.625rem;
857 font-weight: 600;
858 text-transform: uppercase;
859 letter-spacing: 0.1em;
860 padding: 3px 8px;
861 border-radius: 99px;
862 border: 1px solid var(--color-mist);
863}
864
865.rule-card-layer[data-layer="cli"] {
866 color: var(--color-charcoal);
867 border-color: var(--color-mist);
868 background: var(--color-paper);
869}
870
871.rule-card-layer[data-layer="browser"] {
872 color: oklch(40% 0.12 230);
873 border-color: oklch(90% 0.05 230);
874 background: oklch(97% 0.02 230);
875}
876
877.rule-card-layer[data-layer="llm"] {
878 color: oklch(45% 0.15 45);
879 border-color: oklch(92% 0.08 45);
880 background: oklch(98% 0.03 45);
881}
882
883/* Layer legend dl inside the How-to-read block. */
884.anti-patterns-legend-layers {
885 display: flex;
886 flex-direction: column;
887 gap: var(--spacing-sm);
888 margin-top: var(--spacing-md);
889}
890
891.anti-patterns-legend-layers > div {
892 display: grid;
893 grid-template-columns: 90px 1fr;
894 gap: var(--spacing-md);
895 align-items: baseline;
896}
897
898.anti-patterns-legend-layers dt {
899 margin: 0;
900}
901
902.anti-patterns-legend-layers dd {
903 margin: 0;
904 font-size: 0.875rem;
905 line-height: 1.55;
906 color: var(--color-charcoal);
907}
908
909.anti-patterns-legend-layers dd code {
910 font-family: var(--font-mono);
911 font-size: 0.8125rem;
912 background: var(--color-cream);
913 border: 1px solid var(--color-mist);
914 padding: 1px 6px;
915 border-radius: 4px;
916}
917
918.rule-card-name {
919 font-family: var(--font-body);
920 font-size: 1rem;
921 font-weight: 600;
922 color: var(--color-ink);
923 line-height: 1.35;
924}
925
926.rule-card-desc {
927 font-size: 0.875rem;
928 line-height: 1.6;
929 color: var(--color-charcoal);
930 flex: 1;
931}
932
933.rule-card-skill-link {
934 font-family: var(--font-mono);
935 font-size: 0.75rem;
936 font-weight: 500;
937 color: var(--color-charcoal);
938 text-decoration: none;
939 align-self: flex-start;
940 padding-top: 4px;
941 transition: color var(--duration-fast) var(--ease-out);
942}
943
944.rule-card-skill-link:hover {
945 color: var(--color-accent);
946}
947
948.rule-card-skill-link::after {
949 content: " →";
950}
951
952/* ============================================
953 TUTORIALS INDEX
954 ============================================ */
955
956.tutorials-content {
957 max-width: 720px;
958}
959
960.tutorial-cards {
961 display: flex;
962 flex-direction: column;
963 gap: var(--spacing-sm);
964}
965
966.tutorial-card {
967 display: grid;
968 grid-template-columns: auto 1fr auto;
969 gap: var(--spacing-md);
970 align-items: center;
971 padding: var(--spacing-md) var(--spacing-lg);
972 background: var(--color-paper);
973 border: 1px solid var(--color-mist);
974 border-radius: 10px;
975 color: var(--color-ink);
976 text-decoration: none;
977 transition: border-color var(--duration-fast) var(--ease-out),
978 transform var(--duration-fast) var(--ease-out);
979}
980
981.tutorial-card:hover {
982 border-color: var(--color-ink);
983}
984
985.tutorial-card-number {
986 font-family: var(--font-mono);
987 font-size: 1.5rem;
988 font-weight: 500;
989 color: var(--color-ash);
990 line-height: 1;
991 font-variant-numeric: tabular-nums;
992}
993
994.tutorial-card:hover .tutorial-card-number {
995 color: var(--color-accent);
996}
997
998.tutorial-card-body {
999 min-width: 0;
1000}
1001
1002.tutorial-card-title {
1003 font-family: var(--font-display);
1004 font-size: 1.375rem;
1005 font-style: italic;
1006 font-weight: 500;
1007 color: var(--color-ink);
1008 line-height: 1.2;
1009 margin-bottom: 4px;
1010}
1011
1012.tutorial-card-tagline {
1013 font-size: 0.9375rem;
1014 color: var(--color-charcoal);
1015 line-height: 1.5;
1016}
1017
1018.tutorial-card-arrow {
1019 font-family: var(--font-body);
1020 font-size: 1.25rem;
1021 color: var(--color-ash);
1022 transition: color var(--duration-fast) var(--ease-out),
1023 transform var(--duration-fast) var(--ease-out);
1024}
1025
1026.tutorial-card:hover .tutorial-card-arrow {
1027 color: var(--color-accent);
1028 transform: translateX(4px);
1029}
1030
1031/* ============================================
1032 TUTORIAL EMBEDS (live overlays, screenshots)
1033 ============================================ */
1034
1035.tutorial-embed {
1036 margin: var(--spacing-lg) 0 var(--spacing-xl);
1037 border-radius: 10px;
1038 overflow: hidden;
1039 border: 1px solid var(--color-mist);
1040 box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.12);
1041 max-width: none;
1042}
1043
1044.tutorial-embed-header {
1045 display: flex;
1046 align-items: center;
1047 gap: 6px;
1048 padding: 10px 14px;
1049 background: var(--color-cream);
1050 border-bottom: 1px solid var(--color-mist);
1051}
1052
1053.tutorial-embed-dot {
1054 width: 10px;
1055 height: 10px;
1056 border-radius: 50%;
1057 flex-shrink: 0;
1058}
1059
1060.tutorial-embed-dot.red { background: #ff5f56; }
1061.tutorial-embed-dot.yellow { background: #ffbd2e; }
1062.tutorial-embed-dot.green { background: #27c93f; }
1063
1064.tutorial-embed-title {
1065 margin-left: auto;
1066 font-family: var(--font-mono);
1067 font-size: 0.75rem;
1068 color: var(--color-ash);
1069}
1070
1071.tutorial-embed-iframe {
1072 display: block;
1073 width: 100%;
1074 height: 520px;
1075 border: none;
1076 background: white;
1077}
1078
1079.tutorial-embed-caption {
1080 font-size: 0.8125rem;
1081 color: var(--color-ash);
1082 margin-top: var(--spacing-sm);
1083 font-style: italic;
1084 max-width: 60ch;
1085}
1086
1087/* ============================================
1088 TUTORIAL DETAIL
1089 ============================================ */
1090
1091.tutorial-detail {
1092 max-width: 680px;
1093}
1094
1095.tutorial-detail-header {
1096 margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
1097}
1098
1099.tutorial-detail-title {
1100 font-family: var(--font-display);
1101 font-size: clamp(2.5rem, 6vw, 4.5rem);
1102 font-weight: 400;
1103 line-height: 1.05;
1104 letter-spacing: -0.02em;
1105 color: var(--color-ink);
1106 margin-bottom: var(--spacing-md);
1107}
1108
1109.tutorial-detail-tagline {
1110 font-family: var(--font-body);
1111 font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
1112 line-height: 1.55;
1113 color: var(--color-charcoal);
1114 max-width: 60ch;
1115}
1116
1117.tutorial-detail-body {
1118 max-width: 65ch;
1119}
1120
1121/* ============================================
1122 VISUAL MODE PAGE
1123 ============================================ */
1124
1125.visual-mode-page-body main#main {
1126 /* Reset the docs-layout override; this page uses its own max-width. */
1127 max-width: none;
1128 margin: 0;
1129 padding: 0;
1130}
1131
1132.visual-mode-page {
1133 max-width: 1100px;
1134 margin: 0 auto;
1135 padding: clamp(2rem, 4vw, 3.5rem) clamp(var(--spacing-md), 4vw, var(--spacing-2xl)) clamp(4rem, 8vw, 6rem);
1136}
1137
1138.visual-mode-page-header {
1139 max-width: 720px;
1140 margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
1141}
1142
1143.visual-mode-demo-wrap {
1144 margin-bottom: clamp(3rem, 6vw, 4.5rem);
1145}
1146
1147.visual-mode-demo-caption {
1148 font-size: 0.8125rem;
1149 color: var(--color-ash);
1150 font-style: italic;
1151 margin-top: var(--spacing-sm);
1152 text-align: center;
1153}
1154
1155/* Mac-window chrome around the iframe. Scoped to .visual-mode-page so
1156 the sub-page's preview styles don't leak onto the homepage, which
1157 carries its own .visual-mode-preview rules in main.css. The auto
1158 margins below would disable grid-item stretch on the homepage and
1159 collapse the preview to the iframe's 300px intrinsic width. */
1160.visual-mode-page .visual-mode-preview {
1161 border-radius: 10px;
1162 overflow: hidden;
1163 border: 1px solid var(--color-mist);
1164 box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.12);
1165 max-width: 1040px;
1166 margin: 0 auto;
1167}
1168
1169.visual-mode-page .visual-mode-preview-header {
1170 display: flex;
1171 align-items: center;
1172 gap: 6px;
1173 padding: 10px 14px;
1174 background: var(--color-cream);
1175 border-bottom: 1px solid var(--color-mist);
1176}
1177
1178.visual-mode-page .visual-mode-preview-dot {
1179 width: 10px;
1180 height: 10px;
1181 border-radius: 50%;
1182 flex-shrink: 0;
1183}
1184
1185.visual-mode-page .visual-mode-preview-dot.red { background: #ff5f56; }
1186.visual-mode-page .visual-mode-preview-dot.yellow { background: #ffbd2e; }
1187.visual-mode-page .visual-mode-preview-dot.green { background: #27c93f; }
1188
1189.visual-mode-page .visual-mode-preview-title {
1190 margin-left: auto;
1191 font-family: var(--font-mono);
1192 font-size: 0.75rem;
1193 color: var(--color-ash);
1194}
1195
1196.visual-mode-frame {
1197 display: block;
1198 width: 100%;
1199 height: 580px;
1200 border: none;
1201 background: white;
1202}
1203
1204/* Three invocation methods. */
1205.visual-mode-methods {
1206 margin-bottom: clamp(3rem, 6vw, 4.5rem);
1207}
1208
1209.visual-mode-methods-title {
1210 font-family: var(--font-display);
1211 font-size: clamp(1.75rem, 3vw, 2.25rem);
1212 font-weight: 500;
1213 font-style: italic;
1214 color: var(--color-ink);
1215 letter-spacing: -0.01em;
1216 margin-bottom: var(--spacing-lg);
1217}
1218
1219.visual-mode-methods-grid {
1220 display: grid;
1221 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
1222 gap: var(--spacing-md);
1223}
1224
1225.visual-mode-method {
1226 padding: var(--spacing-lg);
1227 background: var(--color-paper);
1228 border: 1px solid var(--color-mist);
1229 border-radius: 10px;
1230 display: flex;
1231 flex-direction: column;
1232 gap: 8px;
1233 transition: border-color var(--duration-fast) var(--ease-out);
1234}
1235
1236.visual-mode-method:hover {
1237 border-color: var(--color-ash);
1238}
1239
1240.visual-mode-method[data-coming-soon] {
1241 background: var(--color-cream);
1242}
1243
1244.visual-mode-method-label {
1245 font-family: var(--font-mono);
1246 font-size: 0.625rem;
1247 font-weight: 600;
1248 text-transform: uppercase;
1249 letter-spacing: 0.14em;
1250 color: var(--color-accent);
1251}
1252
1253.visual-mode-method-name {
1254 font-family: var(--font-display);
1255 font-size: 1.375rem;
1256 font-style: italic;
1257 font-weight: 500;
1258 color: var(--color-ink);
1259 line-height: 1.25;
1260}
1261
1262.visual-mode-method-name a {
1263 color: inherit;
1264 text-decoration: none;
1265 border-bottom: 1px solid var(--color-accent);
1266}
1267
1268.visual-mode-method-name a:hover {
1269 color: var(--color-accent);
1270}
1271
1272.visual-mode-method-name code {
1273 font-family: var(--font-mono);
1274 font-size: 0.875em;
1275 font-style: normal;
1276 background: var(--color-cream);
1277 border: 1px solid var(--color-mist);
1278 padding: 2px 8px;
1279 border-radius: 4px;
1280 color: var(--color-ink);
1281}
1282
1283.visual-mode-method-desc {
1284 font-size: 0.9375rem;
1285 line-height: 1.6;
1286 color: var(--color-charcoal);
1287 flex: 1;
1288}
1289
1290.visual-mode-method-desc a {
1291 color: var(--color-ink);
1292 text-decoration: none;
1293 border-bottom: 1px solid var(--color-accent);
1294 font-family: var(--font-mono);
1295 font-size: 0.875em;
1296 font-weight: 500;
1297}
1298
1299.visual-mode-method-desc a:hover {
1300 color: var(--color-accent);
1301}
1302
1303/* Gallery (specimens) section */
1304.visual-mode-gallery-header {
1305 margin-bottom: var(--spacing-lg);
1306}
1307
1308.visual-mode-gallery-title {
1309 font-family: var(--font-display);
1310 font-size: clamp(1.75rem, 3vw, 2.25rem);
1311 font-weight: 500;
1312 font-style: italic;
1313 color: var(--color-ink);
1314 letter-spacing: -0.01em;
1315 margin-bottom: var(--spacing-sm);
1316}
1317
1318.visual-mode-gallery-lede {
1319 font-size: 0.9375rem;
1320 line-height: 1.6;
1321 color: var(--color-charcoal);
1322 max-width: 60ch;
1323}
1324
1325/* ============================================
1326 ANTI-PATTERNS: IN THE WILD (merged gallery)
1327 ============================================ */
1328
1329.gallery-section {
1330 margin-top: clamp(3rem, 6vw, 4.5rem);
1331}
1332
1333.gallery-section-lede {
1334 font-size: 0.9375rem;
1335 line-height: 1.6;
1336 color: var(--color-charcoal);
1337 max-width: 60ch;
1338 margin-bottom: var(--spacing-lg);
1339}
1340
1341.gallery-grid {
1342 display: grid;
1343 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
1344 gap: var(--spacing-md);
1345}
1346
1347.gallery-card {
1348 display: flex;
1349 flex-direction: column;
1350 background: var(--color-paper);
1351 border: 1px solid var(--color-mist);
1352 border-radius: 10px;
1353 overflow: hidden;
1354 text-decoration: none;
1355 color: inherit;
1356 transition: border-color var(--duration-fast) var(--ease-out),
1357 transform var(--duration-fast) var(--ease-out);
1358}
1359
1360.gallery-card:hover {
1361 border-color: var(--color-ink);
1362 transform: translateY(-2px);
1363}
1364
1365.gallery-card-thumb {
1366 aspect-ratio: 1;
1367 overflow: hidden;
1368 background: var(--color-cream);
1369 border-bottom: 1px solid var(--color-mist);
1370}
1371
1372.gallery-card-thumb img {
1373 width: 100%;
1374 height: 100%;
1375 object-fit: cover;
1376 object-position: top left;
1377 display: block;
1378}
1379
1380.gallery-card-body {
1381 padding: var(--spacing-md);
1382 display: flex;
1383 flex-direction: column;
1384 gap: 6px;
1385 flex: 1;
1386}
1387
1388.gallery-card-title {
1389 font-family: var(--font-display);
1390 font-size: 1.125rem;
1391 font-style: italic;
1392 font-weight: 500;
1393 color: var(--color-ink);
1394 line-height: 1.25;
1395}
1396
1397.gallery-card:hover .gallery-card-title {
1398 color: var(--color-accent);
1399}
1400
1401.gallery-card-desc {
1402 font-size: 0.8125rem;
1403 line-height: 1.55;
1404 color: var(--color-charcoal);
1405}
1406
1407/* ============================================
1408 MOBILE: collapsible sidebar behind a toggle
1409 ============================================ */
1410
1411@media (max-width: 920px) {
1412 .skills-layout {
1413 grid-template-columns: 1fr;
1414 gap: 0;
1415 }
1416
1417 .skills-sidebar {
1418 position: static;
1419 max-height: none;
1420 overflow: visible;
1421 border-right: none;
1422 padding: var(--spacing-md) 0;
1423 margin-bottom: var(--spacing-lg);
1424 }
1425
1426 /* Show the toggle button and collapse the menu by default. */
1427 .skills-sidebar-toggle {
1428 display: flex;
1429 align-items: center;
1430 justify-content: space-between;
1431 gap: var(--spacing-sm);
1432 width: 100%;
1433 padding: 12px 16px;
1434 background: var(--color-cream);
1435 border: 1px solid var(--color-mist);
1436 border-radius: 8px;
1437 cursor: pointer;
1438 font-family: var(--font-mono);
1439 font-size: 0.8125rem;
1440 font-weight: 600;
1441 color: var(--color-ink);
1442 text-align: left;
1443 transition: border-color var(--duration-fast) var(--ease-out);
1444 }
1445
1446 .skills-sidebar-toggle:hover {
1447 border-color: var(--color-ink);
1448 }
1449
1450 .skills-sidebar-toggle[aria-expanded="true"] .skills-sidebar-toggle-chevron {
1451 transform: rotate(180deg);
1452 }
1453
1454 .skills-sidebar-inner {
1455 display: none;
1456 padding-right: 0;
1457 padding-top: var(--spacing-md);
1458 border-top: 1px solid var(--color-mist);
1459 margin-top: var(--spacing-md);
1460 }
1461
1462 .skills-sidebar-toggle[aria-expanded="true"] + .skills-sidebar-inner {
1463 display: block;
1464 }
1465
1466 .skills-sidebar-group {
1467 margin-bottom: var(--spacing-md);
1468 }
1469}
1470
1471/* ============================================
1472 SKILL DETAIL — BEFORE/AFTER DEMO
1473 ============================================ */
1474
1475/* Ported from main.css for use on sub-pages. The split-compare effect
1476 is initialized by js/effects/split-compare.js loaded on demand. */
1477
1478.split-comparison {
1479 position: relative;
1480 width: 100%;
1481 /* 500px visible + 64px buffer (32px per side) = 564px total.
1482 box-sizing: border-box is inherited, so children sit in 500px. */
1483 max-width: 564px;
1484 /* 32px padding is an invisible hover buffer so the divider does not
1485 immediately snap back when the pointer grazes the visible box
1486 edge. Negative top/bottom margins collapse the padding out of
1487 layout flow so the demo keeps its rhythm in the page. */
1488 padding: 32px;
1489 margin: -32px 0 calc(clamp(2rem, 4vw, 3rem) - 32px);
1490}
1491
1492.split-container {
1493 position: relative;
1494 width: 100%;
1495 height: 360px;
1496 border-radius: 12px;
1497 overflow: hidden;
1498 /* Match the page background so the 32px padding area is invisible.
1499 The border + border-radius define the visible box; individual
1500 demo content provides its own colors on top. */
1501 background: var(--color-paper);
1502 border: 1px solid var(--color-mist);
1503 cursor: ew-resize;
1504 user-select: none;
1505}
1506
1507.split-before,
1508.split-after {
1509 position: absolute;
1510 inset: 0;
1511 display: flex;
1512 align-items: center;
1513 justify-content: center;
1514}
1515
1516.split-before {
1517 z-index: 1;
1518}
1519
1520.split-content {
1521 width: 100%;
1522 height: 100%;
1523 display: flex;
1524 align-items: center;
1525 justify-content: center;
1526 /* No padding: demos that fill the container (overdrive) need full
1527 bleed, and demos with smaller content (polish, bolder) already
1528 center themselves via flex. */
1529}
1530
1531.split-after {
1532 clip-path: polygon(58% 0%, 100% 0%, 100% 100%, 42% 100%);
1533 z-index: 2;
1534 background: var(--color-paper);
1535}
1536
1537.split-divider {
1538 position: absolute;
1539 top: 0;
1540 bottom: 0;
1541 left: 50%;
1542 width: 3px;
1543 background: var(--color-accent);
1544 transform: translateX(-50%) skewX(-10deg);
1545 pointer-events: none;
1546 z-index: 3;
1547 box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
1548}
1549
1550/* Before | caption | After all on one row. The caption lives in the
1551 middle column; if a skill has no caption we emit an empty <span> so
1552 the grid still has three cells and Before/After sit at the edges. */
1553.split-labels {
1554 display: grid;
1555 grid-template-columns: auto minmax(0, 1fr) auto;
1556 align-items: baseline;
1557 gap: var(--spacing-md);
1558 margin-top: 10px;
1559 font-family: var(--font-mono);
1560 font-size: 0.6875rem;
1561 font-weight: 600;
1562 text-transform: uppercase;
1563 letter-spacing: 0.12em;
1564 color: var(--color-ash);
1565}
1566
1567.split-label-item[data-point="before"] {
1568 color: var(--color-ash);
1569 justify-self: start;
1570}
1571
1572.split-label-item[data-point="after"] {
1573 color: var(--color-accent);
1574 justify-self: end;
1575}
1576
1577.skill-demo-caption {
1578 margin: 0;
1579 font-family: var(--font-body);
1580 font-size: 0.8125rem;
1581 font-weight: 400;
1582 text-transform: none;
1583 letter-spacing: 0;
1584 color: var(--color-ash);
1585 font-style: italic;
1586 text-align: center;
1587 justify-self: center;
1588 /* Allow wrapping inside the middle column if the text is long. */
1589 max-width: 100%;
1590}
1591
1592.skill-demo-eyebrow {
1593 font-family: var(--font-mono);
1594 font-size: 0.6875rem;
1595 font-weight: 600;
1596 text-transform: uppercase;
1597 letter-spacing: 0.14em;
1598 color: var(--color-ash);
1599 margin-bottom: var(--spacing-sm);
1600 /* Eyebrow now lives inside .split-comparison (which has 32px
1601 padding), so it aligns with the visible card edge automatically. */
1602}
1603
1604/* ============================================
1605 SKILL DETAIL
1606 ============================================ */
1607
1608/* Editorial hero: on wide viewports, text header on the left and the
1609 before/after demo floats to the right as a hero module and is allowed
1610 to break out of the 720px body cap. On narrow viewports everything
1611 stacks within the 720px column. */
1612.skill-detail-hero {
1613 max-width: 720px;
1614 margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
1615}
1616
1617/* Stacked spacing between header and demo on narrow viewports; cancelled
1618 when the hero switches to two columns at >=1280px. */
1619.skill-detail-hero--has-demo .skill-demo {
1620 margin-top: clamp(2rem, 4vw, 2.5rem);
1621}
1622
1623@media (min-width: 1280px) {
1624 .skill-detail-hero--has-demo {
1625 /* Wider editorial hero at large viewports. Fixed 564px demo column
1626 (500px visible + 64px hover buffer) keeps the split-container at
1627 its designed 500x360 landscape aspect ratio. Text column takes
1628 whatever's left, clamped by the hero's own max-width. */
1629 max-width: 1200px;
1630 display: grid;
1631 grid-template-columns: minmax(0, 1fr) 564px;
1632 gap: clamp(var(--spacing-xl), 4vw, var(--spacing-2xl));
1633 align-items: center;
1634 }
1635
1636 .skill-detail-hero--has-demo .skill-detail-header {
1637 margin-bottom: 0;
1638 }
1639
1640 .skill-detail-hero--has-demo .skill-demo {
1641 align-self: center;
1642 margin-top: 0;
1643 }
1644}
1645
1646/* Body sections stay at a readable line length regardless of the hero
1647 width above them. */
1648.skill-detail-editorial,
1649.skill-source-card,
1650.skill-references {
1651 max-width: 720px;
1652}
1653
1654.skill-detail-eyebrow {
1655 font-family: var(--font-mono);
1656 font-size: 0.75rem;
1657 font-weight: 500;
1658 text-transform: uppercase;
1659 letter-spacing: 0.12em;
1660 color: var(--color-ash);
1661 margin-bottom: var(--spacing-sm);
1662}
1663
1664.skill-detail-eyebrow a {
1665 color: inherit;
1666 text-decoration: none;
1667}
1668
1669.skill-detail-eyebrow a:hover {
1670 color: var(--color-accent);
1671}
1672
1673.skill-detail-title {
1674 font-family: var(--font-display);
1675 font-size: clamp(3rem, 5.5vw, 5rem);
1676 font-weight: 600;
1677 line-height: 0.95;
1678 letter-spacing: -0.02em;
1679 color: var(--color-ink);
1680 margin-bottom: var(--spacing-md);
1681 white-space: nowrap;
1682}
1683
1684.skill-detail-title-slash {
1685 color: var(--color-accent);
1686 font-weight: 300;
1687}
1688
1689.skill-detail-tagline {
1690 font-family: var(--font-body);
1691 font-size: clamp(1rem, 1.4vw, 1.125rem);
1692 font-weight: 400;
1693 color: var(--color-charcoal);
1694 line-height: 1.55;
1695 max-width: 60ch;
1696 margin-bottom: var(--spacing-md);
1697}
1698
1699.skill-meta-strip {
1700 display: flex;
1701 flex-wrap: wrap;
1702 gap: 8px;
1703 margin-top: var(--spacing-sm);
1704}
1705
1706.skill-meta-chip {
1707 display: inline-flex;
1708 align-items: center;
1709 font-family: var(--font-mono);
1710 font-size: 0.6875rem;
1711 font-weight: 600;
1712 text-transform: uppercase;
1713 letter-spacing: 0.08em;
1714 padding: 4px 10px;
1715 border-radius: 99px;
1716 background: var(--color-cream);
1717 border: 1px solid var(--color-mist);
1718 color: var(--color-charcoal);
1719}
1720
1721.skill-meta-category[data-category="create"] {
1722 background: var(--cat-create-bg);
1723 border-color: var(--cat-create-border);
1724 color: var(--cat-create-text);
1725}
1726
1727.skill-meta-category[data-category="evaluate"] {
1728 background: var(--cat-evaluate-bg);
1729 border-color: var(--cat-evaluate-border);
1730 color: var(--cat-evaluate-text);
1731}
1732
1733.skill-meta-category[data-category="refine"] {
1734 background: var(--cat-refine-bg);
1735 border-color: var(--cat-refine-border);
1736 color: var(--cat-refine-text);
1737}
1738
1739.skill-meta-category[data-category="simplify"] {
1740 background: var(--cat-simplify-bg);
1741 border-color: var(--cat-simplify-border);
1742 color: var(--cat-simplify-text);
1743}
1744
1745.skill-meta-category[data-category="harden"] {
1746 background: var(--cat-harden-bg);
1747 border-color: var(--cat-harden-border);
1748 color: var(--cat-harden-text);
1749}
1750
1751.skill-meta-category[data-category="system"] {
1752 background: var(--cat-system-bg);
1753 border-color: var(--cat-system-border);
1754 color: var(--cat-system-text);
1755}
1756
1757.skill-meta-args {
1758 font-family: var(--font-mono);
1759 text-transform: none;
1760 letter-spacing: 0;
1761 font-weight: 500;
1762}
1763
1764.skill-detail-editorial {
1765 margin-bottom: clamp(2rem, 4vw, 3rem);
1766}
1767
1768/* "The skill itself" card: visually contains the auto-rendered SKILL.md
1769 body so it reads as a distinct reference block, not a continuation of
1770 the editorial section above. */
1771.skill-source-card {
1772 background: var(--color-paper);
1773 border: 1px solid var(--color-mist);
1774 border-radius: 12px;
1775 padding: clamp(var(--spacing-md), 3vw, var(--spacing-xl));
1776 margin-top: clamp(2rem, 4vw, 3rem);
1777 box-shadow: 0 1px 0 oklch(90% 0 0);
1778}
1779
1780.skill-source-card-header {
1781 display: flex;
1782 align-items: baseline;
1783 flex-wrap: wrap;
1784 gap: var(--spacing-sm);
1785 padding-bottom: var(--spacing-md);
1786 margin-bottom: var(--spacing-md);
1787 border-bottom: 1px solid var(--color-mist);
1788}
1789
1790.skill-source-card-label {
1791 font-family: var(--font-mono);
1792 font-size: 0.75rem;
1793 font-weight: 600;
1794 text-transform: uppercase;
1795 letter-spacing: 0.1em;
1796 color: var(--color-accent);
1797 padding: 3px 8px;
1798 background: var(--color-accent-dim);
1799 border-radius: 4px;
1800 flex-shrink: 0;
1801}
1802
1803.skill-source-card-subtitle {
1804 font-size: 0.8125rem;
1805 color: var(--color-ash);
1806 font-style: italic;
1807}
1808
1809.skill-source-card-body {
1810 max-width: none;
1811}
1812
1813.skill-source-card-body > :first-child {
1814 margin-top: 0;
1815}
1816
1817.skill-source-card-body > :last-child {
1818 margin-bottom: 0;
1819}
1820
1821.skill-references {
1822 margin-top: clamp(3rem, 6vw, 4.5rem);
1823 padding-top: clamp(2rem, 4vw, 3rem);
1824 border-top: 1px solid var(--color-mist);
1825}
1826
1827.skill-references-heading {
1828 font-family: var(--font-display);
1829 font-size: 1.5rem;
1830 font-style: italic;
1831 font-weight: 500;
1832 color: var(--color-ink);
1833 margin-bottom: var(--spacing-md);
1834}
1835
1836.skill-reference {
1837 border-top: 1px solid var(--color-mist);
1838}
1839
1840.skill-reference:last-child {
1841 border-bottom: 1px solid var(--color-mist);
1842}
1843
1844.skill-reference > summary {
1845 list-style: none;
1846 cursor: pointer;
1847 padding: 16px 0;
1848 display: flex;
1849 align-items: center;
1850 gap: var(--spacing-md);
1851 transition: color var(--duration-fast) var(--ease-out);
1852}
1853
1854.skill-reference > summary::-webkit-details-marker {
1855 display: none;
1856}
1857
1858.skill-reference > summary::before {
1859 content: "+";
1860 flex-shrink: 0;
1861 width: 18px;
1862 font-family: var(--font-display);
1863 font-size: 1.5rem;
1864 color: var(--color-accent);
1865 line-height: 1;
1866 transition: transform var(--duration-base) var(--ease-out);
1867}
1868
1869.skill-reference[open] > summary::before {
1870 transform: rotate(45deg);
1871}
1872
1873.skill-reference > summary:hover {
1874 color: var(--color-accent);
1875}
1876
1877.skill-reference-label {
1878 font-family: var(--font-mono);
1879 font-size: 0.6875rem;
1880 font-weight: 600;
1881 text-transform: uppercase;
1882 letter-spacing: 0.12em;
1883 color: var(--color-ash);
1884 flex-shrink: 0;
1885}
1886
1887.skill-reference-title {
1888 font-family: var(--font-display);
1889 font-size: 1.125rem;
1890 font-style: italic;
1891 color: var(--color-ink);
1892}
1893
1894.skill-reference-body {
1895 padding: var(--spacing-sm) 0 var(--spacing-md) 34px;
1896 max-width: 62ch;
1897}
1898
1899/* ============================================
1900 PROSE — rendered markdown bodies
1901 ============================================ */
1902
1903.prose {
1904 font-size: 1rem;
1905 line-height: 1.7;
1906 color: var(--color-charcoal);
1907 max-width: 65ch;
1908}
1909
1910.prose h1,
1911.prose h2,
1912.prose h3,
1913.prose h4 {
1914 color: var(--color-ink);
1915 font-weight: 600;
1916 scroll-margin-top: 5rem;
1917 line-height: 1.25;
1918 margin-top: 2em;
1919 margin-bottom: 0.6em;
1920}
1921
1922.prose h1 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; font-style: italic; }
1923.prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-style: italic; margin-top: 2.2em; }
1924.prose h3 { font-size: 1.125rem; margin-top: 1.8em; }
1925.prose h4 { font-size: 1rem; }
1926
1927.prose h2:first-child,
1928.prose h3:first-child {
1929 margin-top: 0;
1930}
1931
1932.prose p {
1933 margin-top: 0;
1934 margin-bottom: 1.1em;
1935}
1936
1937.prose ul,
1938.prose ol {
1939 margin: 0 0 1.2em 0;
1940 padding-left: 1.25rem;
1941}
1942
1943.prose li {
1944 margin-bottom: 0.4em;
1945}
1946
1947.prose a {
1948 color: var(--color-accent);
1949 text-decoration: underline;
1950 text-decoration-thickness: 1px;
1951 text-underline-offset: 3px;
1952 text-decoration-color: var(--color-accent-dim);
1953 transition: text-decoration-color var(--duration-fast) var(--ease-out);
1954}
1955
1956.prose a:hover {
1957 text-decoration-color: var(--color-accent);
1958}
1959
1960.prose strong {
1961 color: var(--color-ink);
1962 font-weight: 600;
1963}
1964
1965.prose em {
1966 font-style: italic;
1967}
1968
1969.prose code {
1970 font-family: var(--font-mono);
1971 font-size: 0.875em;
1972 background: var(--color-cream);
1973 border: 1px solid var(--color-mist);
1974 padding: 2px 6px;
1975 border-radius: 4px;
1976 color: var(--color-ink);
1977}
1978
1979.prose .code-block-wrap {
1980 position: relative;
1981 margin: 1.25em 0;
1982}
1983
1984.prose .code-block-wrap .code-block {
1985 margin: 0;
1986}
1987
1988.prose .code-block {
1989 padding: var(--spacing-md);
1990 background: oklch(12% 0.005 350);
1991 color: oklch(92% 0.005 350);
1992 border-radius: 10px;
1993 overflow-x: auto;
1994 font-family: var(--font-mono);
1995 font-size: 0.8125rem;
1996 line-height: 1.55;
1997 border: 1px solid oklch(20% 0.005 350);
1998}
1999
2000.code-block-copy {
2001 position: absolute;
2002 top: 10px;
2003 right: 10px;
2004 padding: 4px 10px;
2005 background: oklch(20% 0.005 350);
2006 border: 1px solid oklch(30% 0.005 350);
2007 color: oklch(78% 0.005 350);
2008 border-radius: 4px;
2009 font-family: var(--font-mono);
2010 font-size: 0.6875rem;
2011 font-weight: 600;
2012 text-transform: uppercase;
2013 letter-spacing: 0.08em;
2014 cursor: pointer;
2015 opacity: 0;
2016 transition:
2017 opacity var(--duration-fast) var(--ease-out),
2018 background var(--duration-fast) var(--ease-out),
2019 color var(--duration-fast) var(--ease-out),
2020 border-color var(--duration-fast) var(--ease-out);
2021}
2022
2023.code-block-wrap:hover .code-block-copy,
2024.code-block-copy:focus-visible {
2025 opacity: 1;
2026}
2027
2028.code-block-copy::before {
2029 content: "Copy";
2030}
2031
2032.code-block-copy:hover {
2033 background: oklch(30% 0.005 350);
2034 color: oklch(92% 0.005 350);
2035 border-color: oklch(40% 0.005 350);
2036}
2037
2038.code-block-copy.is-copied {
2039 opacity: 1;
2040 background: var(--color-accent);
2041 color: var(--color-paper);
2042 border-color: var(--color-accent);
2043}
2044
2045.code-block-copy.is-copied::before {
2046 content: "Copied";
2047}
2048
2049.prose .code-block code {
2050 background: transparent;
2051 border: none;
2052 padding: 0;
2053 color: inherit;
2054 font-size: inherit;
2055}
2056
2057.prose blockquote {
2058 margin: 1.5em 0;
2059 padding: 0 0 0 var(--spacing-md);
2060 border-left: 3px solid var(--color-mist);
2061 color: var(--color-ash);
2062 font-style: italic;
2063}
2064
2065.prose hr {
2066 border: none;
2067 height: 1px;
2068 background: var(--color-mist);
2069 margin: 2.5em 0;
2070}