/* Pattern atlas: the searchable index of all 74 Patterns, rendered on the
   site's own stylesheet stack. The hooks the tests rely on (#pattern-search,
   #pattern-axis, #pattern-reset, #pattern-specifiers, .pattern-card,
   .compare-select, #pattern-comparison, #compare-heading) are structural;
   everything visual lives here. */
.pattern-atlas { max-width: 1180px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 72px; font-family: 'Poppins', sans-serif; }
.pattern-atlas .pattern-hero { max-width: 60rem; margin-bottom: 1.5rem; }
.pattern-atlas .pattern-hero .lede { margin: .5rem 0 0; font-family: Charter, Georgia, serif; }

/* Toolbar: search, axis, reset on one row; specifier chips beneath. */
.atlas-toolbar { margin: 0 0 1.1rem; padding: 18px 20px 16px; border: 1px solid #e5ebf0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(23, 36, 51, .05), 0 10px 24px -18px rgba(23, 36, 51, .25); }
.atlas-toolbar__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem) auto; gap: 12px; align-items: end; }
.atlas-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.atlas-field label, .pattern-specifiers legend { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5c6875; }
.atlas-toolbar input[type="search"], .atlas-toolbar select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; margin: 0; border: 1px solid #c9d3dc; border-radius: 10px; color: #2c3e50; font: 1rem/1.4 'Poppins', sans-serif; transition: border-color .15s ease, box-shadow .15s ease; }
.atlas-toolbar input[type="search"] { padding: 10px 14px 10px 42px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a89' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 14px center / 18px 18px; }
.atlas-toolbar input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
.atlas-toolbar select { padding: 10px 40px 10px 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a89' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px 16px; cursor: pointer; }
.atlas-toolbar input[type="search"]:focus, .atlas-toolbar select:focus { outline: none; border-color: #466483; box-shadow: 0 0 0 3px rgba(70, 100, 131, .2); }
.atlas-reset { min-height: 48px; margin: 0; padding: 10px 18px; border: 1px solid #c9d3dc; border-radius: 10px; background: #f4f7fa; color: #2c3e50; font: 600 .92rem/1.4 'Poppins', sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.atlas-reset:hover { background: #e9eef3; border-color: #7b8997; }
.atlas-reset:focus-visible { outline: 3px solid #466483; outline-offset: 2px; }
.pattern-specifiers { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.pattern-specifiers legend { display: block; margin: 0 0 8px; padding: 0; }
.pattern-specifiers legend .metadata { font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; color: #5c6875; }
.pattern-specifiers__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pattern-specifier { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding: 4px 14px 4px 10px; border: 1px solid #d3dbe3; border-radius: 999px; background: #f8fafc; color: #2c3e50; font-size: .86rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.pattern-specifier:hover { border-color: #7b8997; background: #eef3f7; }
.pattern-specifier input { -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: 0 0 auto; width: 16px; height: 16px; margin: 0; border: 1.5px solid #8793a0; border-radius: 50%; background: #fff; cursor: pointer; }
.pattern-specifier input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2c3e50; transform: scale(0); transition: transform .12s ease; }
.pattern-specifier input:checked::before { transform: scale(1); }
.pattern-specifier:has(input:checked) { border-color: #2c3e50; background: #2c3e50; color: #fff; }
.pattern-specifier:has(input:checked) input { border-color: #fff; }
.pattern-specifier input:focus-visible { outline: 3px solid #466483; outline-offset: 3px; }
#pattern-search-status { margin: 14px 0 0; font-size: .86rem; color: #5c6875; }

/* Comparison tray: a single line until something is selected. */
.compare-panel { margin: 0 0 1.4rem; padding: 14px 20px; border: 1px solid #e5ebf0; border-radius: 14px; background: #fff; }
.compare-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.compare-panel h2 { margin: 0; font-family: 'Poppins', sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: #2c3e50; }
.compare-panel__hint { margin: 0; font-size: .86rem; color: #5c6875; }
#compare-status { margin: 0 0 0 auto; padding: 3px 11px; border-radius: 999px; background: #f4f7fa; font-size: .78rem; font-weight: 600; color: #466483; }
.comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 14px; margin-top: 14px; }
.compare-panel:has(#pattern-comparison:empty) .comparison-grid { display: none; }
.comparison-grid article { padding: 16px 18px; border: 1px solid #e5ebf0; border-radius: 12px; background: #f8fafc; font-family: Charter, Georgia, serif; overflow-wrap: anywhere; }
.comparison-grid h3 { margin: 0 0 8px; font-family: 'Poppins', sans-serif; font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.comparison-grid h3 a { color: #2c3e50; text-decoration: none; border-bottom: 2px solid rgba(70, 100, 131, .35); }
.comparison-grid h3 a:hover { border-bottom-color: currentcolor; }
.comparison-grid h4 { margin: 14px 0 4px; font-family: 'Poppins', sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5c6875; }
.comparison-grid p { margin: 0 0 6px; font-size: .95rem; line-height: 1.55; }
.comparison-grid button { min-height: 40px; margin: 12px 0 0; padding: 8px 14px; border: 1px solid #c9d3dc; border-radius: 10px; background: #fff; color: #2c3e50; font: 600 .85rem/1.3 'Poppins', sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.comparison-grid button:hover { border-color: #7b8997; background: #eef3f7; }
.comparison-grid button:focus-visible { outline: 3px solid #466483; outline-offset: 2px; }

/* Cards */
.pattern-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.pattern-card { --axis-color: #466483; display: flex; flex-direction: column; margin: 0; padding: 0; border: 1px solid #e5ebf0; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(23, 36, 51, .06), 0 10px 24px -14px rgba(23, 36, 51, .25); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pattern-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(23, 36, 51, .08), 0 16px 30px -14px rgba(23, 36, 51, .32); }
.pattern-card:has(.compare-select input:checked) { border-color: #2c3e50; box-shadow: 0 0 0 2px #2c3e50, 0 10px 24px -14px rgba(23, 36, 51, .25); }
.pattern-card[data-axis="Epistemic Dysfunctions"] { --axis-color: #0d9488; }
.pattern-card[data-axis="Cognitive Dysfunctions"] { --axis-color: #3b82f6; }
.pattern-card[data-axis="Alignment Dysfunctions"] { --axis-color: #f4c542; }
.pattern-card[data-axis="Self-Modeling Dysfunctions"] { --axis-color: #4ade80; }
.pattern-card[data-axis="Agentic Dysfunctions"] { --axis-color: #38bdf8; }
.pattern-card[data-axis="Memetic Dysfunctions"] { --axis-color: #f9a8d4; }
.pattern-card[data-axis="Normative Dysfunctions"] { --axis-color: #f97316; }
.pattern-card[data-axis="Relational Dysfunctions"] { --axis-color: #ec4899; }
.pattern-card[data-axis="Hybrid Pathologies"] { --axis-color: #a855f7; }
.pattern-card > a { display: flex; flex: 1 1 auto; flex-direction: column; color: inherit; text-decoration: none; }
.pattern-card > a:focus-visible { outline: 3px solid #466483; outline-offset: -3px; }
.pattern-card-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #dfe6ec; }
.pattern-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; }
.pattern-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 2px; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pattern-id { color: #466483; }
.pattern-card__axis { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #5c6875; }
.pattern-card__axis::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--axis-color); box-shadow: 0 0 0 1px rgba(23, 36, 51, .12); }
.pattern-card strong { font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: #2c3e50; }
.pattern-card__subtitle { font-family: Charter, Georgia, serif; font-style: italic; font-size: .95rem; line-height: 1.4; color: #5c6875; }
.compare-select { display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding: 10px 16px; border-top: 1px solid #edf1f5; font-size: .84rem; font-weight: 600; color: #466483; cursor: pointer; user-select: none; transition: background .15s ease; }
.compare-select:hover { background: #f8fafc; }
.compare-select input { -webkit-appearance: none; appearance: none; display: grid; place-content: center; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border: 1.5px solid #8793a0; border-radius: 5px; background: #fff; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.compare-select input::before { content: ""; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform .12s ease; }
.compare-select input:checked { border-color: #2c3e50; background: #2c3e50; }
.compare-select input:checked::before { transform: scale(1); }
.compare-select input:disabled { opacity: .45; cursor: not-allowed; }
.compare-select:has(input:disabled) { color: #8793a0; cursor: not-allowed; }
.compare-select input:focus-visible { outline: 3px solid #466483; outline-offset: 2px; }
.no-results { margin: 1.5rem 0; padding: 2.5rem 1rem; border: 1px dashed #c9d3dc; border-radius: 14px; text-align: center; color: #5c6875; }
[hidden] { display: none !important; }

/* Dark theme (html.dark, the site toggle) */
html.dark .atlas-toolbar, html.dark .compare-panel, html.dark .pattern-card { background: #182330; border-color: #3b4b5d; box-shadow: none; }
html.dark .pattern-card:hover { box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .6); }
html.dark .pattern-card:has(.compare-select input:checked) { border-color: #a9cbed; box-shadow: 0 0 0 2px #a9cbed; }
html.dark .atlas-field label, html.dark .pattern-specifiers legend, html.dark #pattern-search-status, html.dark .compare-panel__hint, html.dark .comparison-grid h4, html.dark .pattern-card__axis, html.dark .pattern-card__subtitle, html.dark .no-results { color: #aeb9c4; }
html.dark .pattern-specifiers legend .metadata { color: #aeb9c4; }
html.dark .atlas-toolbar input[type="search"], html.dark .atlas-toolbar select { background-color: #101823; border-color: #3b4b5d; color: #edf1f5; }
html.dark .atlas-toolbar input[type="search"]:focus, html.dark .atlas-toolbar select:focus { border-color: #a9cbed; box-shadow: 0 0 0 3px rgba(169, 203, 237, .25); }
html.dark .atlas-toolbar select option { background: #101823; color: #edf1f5; }
html.dark .atlas-reset, html.dark .pattern-specifier, html.dark .comparison-grid button { background: #101823; border-color: #3b4b5d; color: #edf1f5; }
html.dark .atlas-reset:hover, html.dark .pattern-specifier:hover, html.dark .comparison-grid button:hover, html.dark .compare-select:hover { background: #22303f; }
html.dark .pattern-specifier input, html.dark .compare-select input { background: #182330; border-color: #8793a0; }
html.dark .pattern-specifier input::before { background: #a9cbed; }
html.dark .pattern-specifier:has(input:checked) { background: #a9cbed; border-color: #a9cbed; color: #0f1923; }
html.dark .pattern-specifier:has(input:checked) input { background: #0f1923; border-color: #0f1923; }
html.dark .compare-panel h2, html.dark .pattern-card strong, html.dark .comparison-grid h3 a { color: #edf1f5; }
html.dark .comparison-grid h3 a { border-bottom-color: rgba(169, 203, 237, .45); }
html.dark .pattern-id, html.dark .compare-select, html.dark #compare-status { color: #a9cbed; }
html.dark #compare-status { background: #101823; }
html.dark .comparison-grid article { background: #101823; border-color: #3b4b5d; color: #edf1f5; }
html.dark .compare-select { border-color: #3b4b5d; }
html.dark .compare-select:has(input:disabled) { color: #7b8997; }
html.dark .compare-select input:checked { background: #a9cbed; border-color: #a9cbed; }
html.dark .compare-select input::before { background: #0f1923; }
html.dark .pattern-card-image { background: #22303f; }
html.dark .no-results { border-color: #3b4b5d; }
html.dark .atlas-reset:focus-visible, html.dark .comparison-grid button:focus-visible, html.dark .pattern-specifier input:focus-visible, html.dark .compare-select input:focus-visible, html.dark .pattern-card > a:focus-visible { outline-color: #a9cbed; }

@media (max-width: 1000px) { .pattern-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pattern-atlas { padding-top: 20px; } .atlas-toolbar__row { grid-template-columns: minmax(0, 1fr) auto; } .atlas-field--search { grid-column: 1 / -1; } }
@media (max-width: 600px) { .pattern-card-grid { grid-template-columns: 1fr; gap: 14px; } .atlas-toolbar { padding: 14px 14px 12px; } .atlas-toolbar__row { grid-template-columns: 1fr; } .compare-panel { padding: 12px 14px; } #compare-status { margin-left: 0; } .pattern-specifier { white-space: normal; } }
@media print { .site-nav, .dark-mode-toggle, .atlas-toolbar, .compare-panel, .compare-select { display: none !important; } .pattern-card-grid { display: block; } .pattern-card { break-inside: avoid; margin-bottom: 1rem; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .pattern-atlas * { transition: none !important; } }