/* Sandra UI port — flat CSS additive, !important wins cascade vs pulse skin.
Anchored on TYPE_PLUS_RIGHT-index_subtopic-{field} classes (Decko encodes
"this slot is a +<field> child of an IndexPublished card" directly on the
field slot's own className, regardless of which view its parent is being
rendered as). This makes the rules view-independent: they fire in titled,
open, content, core, and raw views — anywhere the field slot itself
appears in the DOM.
Subcards rendered standalone outside an IndexPublished parent context
(e.g., editing a stray +description on a non-IndexPublished card) won't
carry the TYPE_PLUS_RIGHT-index_published prefix and so stay unstyled. */
/* ---- Hide the duplicate inline approval the editorial_review mod prepends
(we re-render approval through the +approval subcard) ---- */
.card-slot.TYPE-index_subtopic .d0-card-body > .text-muted.small.mb-2,
.card-slot.content-view.TYPE-index_subtopic > .text-muted.small.mb-2 { display: none !important; }
/* ---- Page title on IndexSubtopic + IndexSection main views (Sandra Source Serif 4) ---- */
article .card-slot.TYPE-index_subtopic > .d0-card-header > .d0-card-header-title,
article .card-slot.TYPE-index_section > .d0-card-header > .d0-card-header-title { font-family: 'Source Serif 4', Georgia, serif !important; font-weight: 700 !important; font-size: 1.875rem !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin: 0 !important; }
/* ---- Responsible (Sandra: text-xs text-muted-foreground, normal weight) ---- */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-responsible { display: block !important; font-size: 0.75rem !important; color: hsl(220, 10%, 46%) !important; font-style: normal !important; font-weight: 400 !important; margin: 0.25rem 0 0.75rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-responsible strong { font-weight: 400 !important; font-style: normal !important; color: inherit !important; }
/* ---- Approval ---- */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-approval { display: block !important; font-size: 0.85em !important; color: var(--bs-secondary, #a991d4) !important; margin: 0.25rem 0 1rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-approval .card-slot.RIGHT-approved_by, .card-slot.TYPE_PLUS_RIGHT-index_subtopic-approval .card-slot.RIGHT-approved_at { display: inline !important; }
/* ---- Description ---- */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-description { display: block !important; margin: 1rem 0 1.25rem 0 !important; font-size: 1rem !important; line-height: 1.6 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-description p:last-child { margin-bottom: 0 !important; }
/* ---- GitHub pills ---- */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github { display: block !important; margin: 0.5rem 0 1.5rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github li { padding: 0 !important; margin: 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github li::marker { content: none !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github a { display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; padding: 0.35rem 0.75rem !important; background: var(--bs-light, #f8f9fa) !important; border: 1px solid var(--bs-border-color, #dee2e6) !important; border-radius: 0.375rem !important; color: var(--bs-body-color, #212529) !important; text-decoration: none !important; font-size: 0.875rem !important; font-weight: 500 !important; line-height: 1 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github a:hover, .card-slot.TYPE_PLUS_RIGHT-index_subtopic-github a:focus { background: var(--bs-secondary-bg, #e9ecef) !important; text-decoration: none !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github a::before { content: "" !important; display: inline-block !important; width: 16px !important; height: 16px !important; flex: 0 0 16px !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23212529%22%3E%3Cpath%20d%3D%22M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59.4.07.55-.17.55-.38%200-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01%201.08.58%201.23.82.72%201.21%201.87.87%202.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95%200-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12%200%200%20.67-.21%202.2.82.64-.18%201.32-.27%202-.27.68%200%201.36.09%202%20.27%201.53-1.04%202.2-.82%202.2-.82.44%201.1.16%201.92.08%202.12.51.56.82%201.27.82%202.15%200%203.07-1.87%203.75-3.65%203.95.29.25.54.73.54%201.48%200%201.07-.01%201.93-.01%202.2%200%20.21.15.46.55.38A8.01%208.01%200%200016%208c0-4.42-3.58-8-8-8z%22%2F%3E%3C%2Fsvg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
/* ---- Examples (boxed) — outer +examples slot directly anchored.
Inner per-example wrappers are themselves direct children of the
IndexPublished card (Nest list inclusions render them as siblings of
+examples wrapped inside the +examples DOM); they carry their own
TYPE_PLUS_RIGHT-index_subtopic-{example_name} class but the name is
per-example so we use a structural selector (children of +examples
slot that are NOT the section-label slot). ---- */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-example { display: block !important; border: 1px solid var(--bs-border-color, #dee2e6) !important; border-radius: 0.5rem !important; margin: 1.5rem 0 !important; overflow: hidden !important; background: #fff !important; }
/* Section header — +examples+label, child of +examples (its TYPE_PLUS_RIGHT is nest_list-label) */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-example > .card-slot.RIGHT-label { display: block !important; padding: 0.6rem 1rem !important; background: #fafafa !important; border-bottom: 1px solid var(--bs-border-color, #dee2e6) !important; font-weight: 600 !important; font-family: var(--bs-font-monospace, ui-monospace, "SFMono-Regular", monospace) !important; font-size: 0.875rem !important; color: #444 !important; margin: 0 !important; }
/* Per-example wrapper — direct child of +examples that is NOT the section label */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-example > .card-slot:not(.RIGHT-label) { display: block !important; padding: 0.75rem 1rem 1rem !important; }
/* Per-example label (nested deeper, child of the per-example RichText wrapper) */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-example > .card-slot:not(.RIGHT-label) > .card-slot.RIGHT-label { display: block !important; padding: 0 !important; background: none !important; border: none !important; font-family: inherit !important; font-size: 0.95rem !important; font-weight: 400 !important; color: var(--bs-body-color, #212529) !important; margin: 0 0 0.25rem 0 !important; line-height: 1.3 !important; }
/* Per-example description */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-example .card-slot.RIGHT-description { display: block !important; margin: 0 0 0.75rem 0 !important; font-size: 0.875rem !important; color: var(--bs-secondary, #a991d4) !important; line-height: 1.45 !important; font-style: normal !important; }
/* Per-example code */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-example .card-slot.RIGHT-code { display: block !important; background: #f5f5f7 !important; border: 1px solid #e6e6ec !important; border-radius: 0.375rem !important; padding: 0.875rem 1rem !important; margin: 0 !important; font-family: var(--bs-font-monospace, ui-monospace, "SFMono-Regular", "Menlo", monospace) !important; font-size: 0.85rem !important; line-height: 1.55 !important; color: #1f1f23 !important; white-space: pre !important; overflow-x: auto !important; }
/* ---- Deep dive callout ---- */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-deep_dive { display: block !important; margin: 1.5rem 0 0 !important; padding: 0.75rem 1rem !important; background: var(--bs-light, #f8f9fa) !important; border-left: 3px solid var(--bs-primary, #593196) !important; border-radius: 0 0.375rem 0.375rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-deep_dive p { margin: 0 !important; font-size: 0.95em !important; }
/* ---- Hide +tags and +discussion when an IndexPublished card is rendered as
anything other than its main titled view (e.g., open/closed/content
views nested inside a parent's +content). Khellar's intent: keep
these meta-sections out of the cluttered hierarchical browse.
Note: this rule needs the OUTER wrapper class to know the parent's
view, so it doesn't fire in core/raw views (where there is no outer
wrapper). Those views are admin/debug only and not user-facing. ---- */
.card-slot.TYPE-index_subtopic:not(.titled-view) .card-slot.TYPE_PLUS_RIGHT-index_subtopic-tag,
.card-slot.TYPE-index_subtopic:not(.titled-view) .card-slot.TYPE_PLUS_RIGHT-index_subtopic-discussion { display: none !important; }
/* ---- Docs pills (mirror GitHub pills, external-link icon + "Docs" label) ---- */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc { display: block !important; margin: 0.5rem 0 1.5rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc li { padding: 0 !important; margin: 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc li::marker { content: none !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc a { display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; padding: 0.35rem 0.75rem !important; background: var(--bs-light, #f8f9fa) !important; border: 1px solid var(--bs-border-color, #dee2e6) !important; border-radius: 0.375rem !important; color: var(--bs-body-color, #212529) !important; text-decoration: none !important; font-size: 0.875rem !important; font-weight: 500 !important; line-height: 1 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc a:hover, .card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc a:focus { background: var(--bs-secondary-bg, #e9ecef) !important; text-decoration: none !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc a::before { content: "" !important; display: inline-block !important; width: 16px !important; height: 16px !important; flex: 0 0 16px !important; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23212529%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%2F%3E%3Cpolyline%20points%3D%2215%203%2021%203%2021%209%22%2F%3E%3Cline%20x1%3D%2210%22%20y1%3D%2214%22%20x2%3D%2221%22%20y2%3D%223%22%2F%3E%3C%2Fsvg%3E") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
/* ---- Roadmap boxed section — uppercase ROADMAP header injected via ::before,
triangle bullets, light-gray background ---- */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-roadmap { display: block !important; background: #f5f5f7 !important; border: 1px solid #e6e6ec !important; border-radius: 0.5rem !important; padding: 0.875rem 1.125rem !important; margin: 1.5rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-roadmap > .card-slot.RIGHT-label { display: block !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-size: 0.7rem !important; font-weight: 600 !important; color: #888 !important; margin: 0 0 0.5rem 0 !important; font-family: var(--bs-font-monospace, ui-monospace, "SFMono-Regular", monospace) !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-roadmap ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-roadmap li { padding: 0.15rem 0 0.15rem 1.25em !important; position: relative !important; font-size: 0.875rem !important; line-height: 1.45 !important; color: var(--bs-body-color, #212529) !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-roadmap li::before { content: "\25B8" !important; position: absolute !important; left: 0 !important; color: #999 !important; font-size: 0.85em !important; line-height: inherit !important; }
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-roadmap li::marker { content: none !important; }
/* ---- IndexSection — section landing pages (mirror IndexPublished palette) ---- */
.card-slot.TYPE-index_section .d0-card-body > .text-muted.small.mb-2,
.card-slot.content-view.TYPE-index_section > .text-muted.small.mb-2 { display: none !important; }
article .card-slot.TYPE-index_section > .d0-card-header > .d0-card-header-title { font-weight: 700 !important; font-size: 1.875rem !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; margin: 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_section-description { display: block !important; margin: 1rem 0 1.25rem 0 !important; font-size: 1rem !important; line-height: 1.6 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_section-description p:last-child { margin-bottom: 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_section-approval { display: block !important; font-size: 0.85em !important; color: var(--bs-secondary, #a991d4) !important; margin: 0.25rem 0 1rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_section-subtopic { display: block !important; margin: 0.5rem 0 1rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_section-subtopic h3 { font-size: 1.15rem !important; font-weight: 600 !important; margin: 1.5rem 0 0.5rem 0 !important; color: var(--bs-body-color, #212529) !important; }
.card-slot.TYPE_PLUS_RIGHT-index_section-deep_dive { display: block !important; margin: 1.5rem 0 0 !important; padding: 0.75rem 1rem !important; background: var(--bs-light, #f8f9fa) !important; border-left: 3px solid var(--bs-primary, #593196) !important; border-radius: 0 0.375rem 0.375rem 0 !important; }
.card-slot.TYPE_PLUS_RIGHT-index_section-deep_dive p { margin: 0 !important; font-size: 0.95em !important; }
/* Hide +tags / +discussion on IndexSection nested views (same trick as IndexPublished) */
.card-slot.TYPE-index_section:not(.titled-view) .card-slot.TYPE_PLUS_RIGHT-index_section-tag,
.card-slot.TYPE-index_section:not(.titled-view) .card-slot.TYPE_PLUS_RIGHT-index_section-discussion { display: none !important; }
/* Nested IndexSubtopic on Section landings — Sandra inline article style */
.card-slot.TYPE-index_section .card-slot.TYPE-index_subtopic.titled-view { margin: 1.5rem 0 2rem 0 !important; }
.card-slot.TYPE-index_section .card-slot.TYPE-index_subtopic .d0-card-header-title { font-size: 1.25rem !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important; font-family: 'Source Serif 4', Georgia, serif !important; }
.card-slot.TYPE-index_section .card-slot.TYPE-index_subtopic .card-menu { display: none !important; }
/* ==== Left sidebar (Sandra-aligned) — anchored on aside#sidebar-left ==== */
aside#sidebar-left {
background: hsl(40, 15%, 95%) !important;
color: hsl(220, 10%, 40%) !important;
font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
padding: 1rem 0.75rem !important;
border-right: 1px solid hsl(220, 12%, 87%) !important;
}
/* Logo: hide Decko card-menu icons + keep image flush */
aside#sidebar-left .hyperon-sidebar-logo { padding: 0.25rem 0.5rem 1.25rem 0.5rem !important; }
aside#sidebar-left .hyperon-sidebar-logo .card-menu { display: none !important; }
aside#sidebar-left .hyperon-sidebar-logo .card-body { padding: 0 !important; background: none !important; border: none !important; }
aside#sidebar-left .hyperon-sidebar-logo img { max-width: 200px !important; width: 100% !important; height: auto !important; display: block !important; }
/* Reset list defaults */
aside#sidebar-left ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
/* Top-level list — Sandra space-y-0.5 */
aside#sidebar-left .hyperon-nav-list > li { margin: 0.125rem 0 !important; }
/* Sections as <details>/<summary> with chevron */
aside#sidebar-left details.hyperon-nav-section { padding: 0 !important; margin: 0 !important; border: none !important; background: none !important; }
aside#sidebar-left details.hyperon-nav-section > summary {
list-style: none !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.5rem 0.5rem !important;
font-size: 0.875rem !important;
border-radius: 0.375rem !important;
cursor: pointer !important;
color: hsl(220, 10%, 40%) !important;
transition: background-color 0.15s, color 0.15s !important;
}
aside#sidebar-left details.hyperon-nav-section > summary::-webkit-details-marker { display: none !important; }
aside#sidebar-left details.hyperon-nav-section > summary::before {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
flex: 0 0 14px !important;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
transition: transform 0.2s !important;
opacity: 0.7 !important;
}
aside#sidebar-left details.hyperon-nav-section[open] > summary::before { transform: rotate(90deg) !important; }
aside#sidebar-left details.hyperon-nav-section > summary:hover { background: hsl(40, 12%, 89%) !important; color: hsl(220, 20%, 14%) !important; }
/* Section title link inside summary */
aside#sidebar-left details.hyperon-nav-section > summary a { color: inherit !important; text-decoration: none !important; font-weight: 500 !important; line-height: 1.3 !important; }
aside#sidebar-left details.hyperon-nav-section > summary a:hover { color: hsl(220, 60%, 38%) !important; }
/* Subtopic list — Sandra ml-4 border-l border-border */
aside#sidebar-left details.hyperon-nav-section > .hyperon-nav-subtopics {
margin: 0.125rem 0 0.5rem 1rem !important;
padding-left: 0 !important;
border-left: 1px solid hsl(220, 12%, 84%) !important;
}
aside#sidebar-left .hyperon-nav-subtopics li { padding: 0 !important; margin: 0 !important; }
aside#sidebar-left .hyperon-nav-subtopics a {
display: block !important;
padding: 0.375rem 0.75rem !important;
font-size: 0.875rem !important;
color: hsl(220, 10%, 46%) !important;
text-decoration: none !important;
transition: color 0.15s !important;
line-height: 1.3 !important;
}
aside#sidebar-left .hyperon-nav-subtopics a:hover { color: hsl(220, 20%, 14%) !important; }
/* Flat top-level items (Glossary, Project Registry) — Sandra-aligned, indented past chevron */
aside#sidebar-left .hyperon-nav-flat-item a {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.5rem 0.5rem 0.5rem 1.625rem !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
border-radius: 0.375rem !important;
color: hsl(220, 10%, 40%) !important;
text-decoration: none !important;
transition: background-color 0.15s, color 0.15s !important;
line-height: 1.3 !important;
}
aside#sidebar-left .hyperon-nav-flat-item a:hover { background: hsl(40, 12%, 89%) !important; color: hsl(220, 60%, 38%) !important; }
/* Footer-section flat lists (Extensions, Editorial) */
aside#sidebar-left .hyperon-nav-flat li { padding: 0 !important; }
/* Footer-style section labels (Extensions, Editorial) */
aside#sidebar-left .hyperon-nav-section-label {
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
color: hsl(220, 10%, 46%) !important;
margin: 1.5rem 0.5rem 0.25rem 0.5rem !important;
font-family: 'JetBrains Mono', ui-monospace, "SFMono-Regular", monospace !important;
}
aside#sidebar-left .hyperon-nav-flat a,
aside#sidebar-left .hyperon-nav-flat .hyperon-create-card-link {
display: block !important;
padding: 0.375rem 0.5rem !important;
font-size: 0.825rem !important;
color: hsl(220, 10%, 46%) !important;
text-decoration: none !important;
border-radius: 0.375rem !important;
transition: background-color 0.15s, color 0.15s !important;
line-height: 1.3 !important;
}
aside#sidebar-left .hyperon-nav-flat a:hover,
aside#sidebar-left .hyperon-nav-flat .hyperon-create-card-link:hover {
background: hsl(40, 12%, 89%) !important;
color: hsl(220, 60%, 38%) !important;
}
/* Wanted-card placeholders (Glossary, Project Registry not yet created) */
aside#sidebar-left a.wanted-card { font-style: italic !important; opacity: 0.6 !important; }
aside#sidebar-left a.wanted-card:hover { opacity: 0.9 !important; }
/* Ensure Decko's card-title span doesn't add visual noise */
aside#sidebar-left .card-title { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
/* ==== Inline page TOC (built client-side by Layout JS) ==== */
.wiki-inline-toc {
display: block !important;
margin: 0.75rem 0 1.25rem 0 !important;
padding: 0.75rem 1rem !important;
background: hsl(40, 15%, 95%) !important;
border: 1px solid hsl(220, 12%, 84%) !important;
border-radius: 0.375rem !important;
font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
}
.wiki-inline-toc-heading {
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
font-size: 0.7rem !important;
font-weight: 600 !important;
color: hsl(220, 10%, 46%) !important;
margin: 0 0 0.4rem 0 !important;
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.wiki-inline-toc-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.wiki-inline-toc-list li { padding: 0.1rem 0 !important; font-size: 0.85rem !important; line-height: 1.4 !important; }
.wiki-inline-toc-list li.wiki-inline-toc-h3 { padding-left: 1rem !important; }
.wiki-inline-toc-list li.wiki-inline-toc-h4 { padding-left: 2rem !important; font-size: 0.8rem !important; }
.wiki-inline-toc-list a {
color: hsl(220, 10%, 40%) !important;
text-decoration: none !important;
transition: color 0.15s !important;
}
.wiki-inline-toc-list a:hover { color: hsl(220, 60%, 38%) !important; }
/* ── Hyperon Index home — Sandra-style section teasers ───────────────────── */
.hyperon-index-teasers {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem !important;
}
.hyperon-index-teaser {
padding: 1rem 1.25rem !important;
border: 1px solid hsl(220, 12%, 84%) !important;
border-radius: 0.5rem !important;
background: hsl(0, 0%, 100%) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.hyperon-index-teaser:hover {
border-color: hsl(220, 60%, 38%) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.hyperon-index-teaser-title {
margin: 0 0 0.5rem 0 !important;
font-family: 'Source Serif 4', Georgia, serif !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
.hyperon-index-teaser-title a {
color: hsl(220, 30%, 15%) !important;
text-decoration: none !important;
}
.hyperon-index-teaser-title a:hover {
color: hsl(220, 60%, 38%) !important;
}
.hyperon-index-teaser-desc {
font-size: 0.875rem !important;
line-height: 1.6 !important;
color: hsl(220, 10%, 35%) !important;
margin-bottom: 0.5rem !important;
}
.hyperon-index-teaser-desc p {
margin: 0 !important;
}
.hyperon-index-teaser-cta {
display: inline-block !important;
font-size: 0.8rem !important;
color: hsl(220, 60%, 38%) !important;
text-decoration: none !important;
font-weight: 500 !important;
}
.hyperon-index-teaser-cta:hover {
text-decoration: underline !important;
}
/* Strip Decko card-menu and slot padding inside teaser body inclusions */
.hyperon-index-teaser-desc .card-menu { display: none !important; }
.hyperon-index-teaser-desc .card-slot { padding: 0 !important; margin: 0 !important; }
.hyperon-index-teaser-desc .d0-card-content { padding: 0 !important; }
/* ── Sandra-parity overrides (cascade-end batch) ─────────────────────────── */
/* Article column constrained to Sandra's max-w-2xl (672px) */
body.wiki-layout article > #main {
max-width: 42rem !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 1.5rem 1.5rem 3rem !important;
}
/* Sandra typography — Source Serif 4 headings, IBM Plex Sans body */
body.wiki-layout {
font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif !important;
color: hsl(220, 20%, 14%) !important;
}
body.wiki-layout article h1.d0-card-header-title,
body.wiki-layout article h2.d0-card-header-title,
body.wiki-layout article h3.d0-card-header-title,
body.wiki-layout article h1, body.wiki-layout article h2, body.wiki-layout article h3 {
font-family: 'Source Serif 4', Georgia, serif !important;
color: hsl(220, 20%, 14%) !important;
}
body.wiki-layout article h1, body.wiki-layout article h1.d0-card-header-title {
font-size: 1.875rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
}
body.wiki-layout article h2, body.wiki-layout article h2.d0-card-header-title {
font-size: 1.25rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
body.wiki-layout article h3 {
font-size: 1.05rem !important;
font-weight: 600 !important;
}
body.wiki-layout article p,
body.wiki-layout article li {
font-size: 0.875rem !important;
line-height: 1.65 !important;
color: hsl(220, 15%, 30%) !important;
}
body.wiki-layout article code,
body.wiki-layout article pre {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
/* Pill recolor to Sandra's bg-secondary + text-text-link */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github a,
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc a {
background: hsl(40, 12%, 91%) !important;
border: 1px solid transparent !important;
color: hsl(220, 60%, 38%) !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
padding: 0.375rem 0.75rem !important;
border-radius: 0.375rem !important;
}
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github a:hover,
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github a:focus,
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc a:hover,
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-doc a:focus {
background: hsl(40, 12%, 84%) !important;
color: hsl(220, 60%, 32%) !important;
}
/* Override the SVG icon fill from #212529 (dark) to Sandra's text-link blue */
.card-slot.TYPE_PLUS_RIGHT-index_subtopic-github a::before {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23264A99%22%3E%3Cpath%20d%3D%22M8%200C3.58%200%200%203.58%200%208c0%203.54%202.29%206.53%205.47%207.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01%201.08.58%201.23.82c.72%201.21%201.87.87%202.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0%200%20.67-.21%202.2.82c.64-.18%201.32-.27%202-.27c.68%200%201.36.09%202%20.27c1.53-1.04%202.2-.82%202.2-.82c.44%201.1.16%201.92.08%202.12c.51.56.82%201.27.82%202.15c0%203.07-1.87%203.75-3.65%203.95c.29.25.54.73.54%201.48c0%201.07-.01%201.93-.01%202.2c0%20.21.15.46.55.38A8.012%208.012%200%200%200%2016%208c0-4.42-3.58-8-8-8z%22%2F%3E%3C%2Fsvg%3E") !important;
}
/* REMOVED 2026-05-08: this rule unconditionally hid the Draft banner +
"Approve & Publish" button on Draft cards' main article slot, blocking
reviewers (Anna flagged 2026-05-08). Drafts are read-restricted to
signed-in users (mod/editorial_review/data/real.yml: read: Anyone Signed In)
so there is no anonymous "public" viewer the rule was meant to hide
the alert from — the comment's intent never matched the actual permission
model. See project_wiki_ui_bugs_inventory.md "Approve button missing"
for full diagnosis. Do NOT re-add without re-checking the auth context.
(Original rule: display: none !important on
body.wiki-layout article .d0-card-content > .alert.alert-warning) */
/* IndexSubtopic page breadcrumb (Sandra: text-xs muted-foreground, mb-4) */
.wiki-page-breadcrumb {
font-size: 0.75rem !important;
color: hsl(220, 10%, 46%) !important;
margin: 0 0 1rem 0 !important;
font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
}
.wiki-page-breadcrumb a {
color: hsl(220, 10%, 46%) !important;
text-decoration: none !important;
}
.wiki-page-breadcrumb a:hover {
color: hsl(220, 60%, 38%) !important;
text-decoration: underline !important;
}
/* Sandra-style examples expandable toggle */
.wiki-example-hidden { display: none !important; }
.wiki-example-toggle {
display: block !important;
width: 100% !important;
margin-top: 0.75rem !important;
padding: 0.5rem 0.75rem !important;
background: hsl(40, 12%, 91%) !important;
border: 1px solid hsl(220, 12%, 84%) !important;
border-radius: 0.375rem !important;
color: hsl(220, 60%, 38%) !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
cursor: pointer !important;
text-align: center !important;
font-family: 'IBM Plex Sans', system-ui, sans-serif !important;
}
.wiki-example-toggle:hover {
background: hsl(40, 12%, 87%) !important;
color: hsl(220, 60%, 32%) !important;
}
/* ── Sandra-compact header bar ───────────────────────────────────────────── */
body.wiki-layout > header {
position: sticky !important;
top: 0 !important;
z-index: 40 !important;
background: hsla(40, 20%, 97%, 0.92) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
border-bottom: 1px solid hsl(220, 12%, 84%) !important;
}
body.wiki-layout > header .wiki-header-nav {
background: transparent !important;
padding: 0 !important;
min-height: 3rem !important;
}
body.wiki-layout > header .wiki-header-nav .container {
min-height: 3rem !important;
padding: 0 1rem !important;
max-width: none !important;
}
body.wiki-layout > header .wiki-header-nav .d0-nav-container {
min-height: 3rem !important;
}
/* Override navbar dark-theme variables so child elements pick up Sandra colors */
body.wiki-layout > header .wiki-header-nav[data-bs-theme="dark"] {
--bs-navbar-color: hsl(220, 10%, 46%) !important;
--bs-navbar-hover-color: hsl(220, 20%, 14%) !important;
--bs-navbar-active-color: hsl(220, 20%, 14%) !important;
--bs-navbar-brand-color: hsl(220, 20%, 14%) !important;
--bs-navbar-brand-hover-color: hsl(220, 60%, 38%) !important;
}
/* Logo */
body.wiki-layout > header .nav-logo img {
height: 1.5rem !important;
width: auto !important;
}
/* Brand text */
body.wiki-layout > header .navbar-brand {
font-family: 'Source Serif 4', Georgia, serif !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
color: hsl(220, 20%, 14%) !important;
padding: 0 !important;
margin-right: 0.75rem !important;
}
/* Nav links */
body.wiki-layout > header .nav-link {
font-size: 0.8rem !important;
color: hsl(220, 10%, 46%) !important;
padding: 0.25rem 0.5rem !important;
}
body.wiki-layout > header .nav-link:hover,
body.wiki-layout > header .nav-link:focus {
color: hsl(220, 20%, 14%) !important;
}
body.wiki-layout > header .dropdown-toggle::after {
font-size: 0.6rem !important;
}
body.wiki-layout > header .dropdown-menu {
font-size: 0.8rem !important;
border-color: hsl(220, 12%, 84%) !important;
}
/* Search box */
body.wiki-layout > header .d0-search-box .search-box {
background: hsl(40, 12%, 91%) !important;
border: none !important;
border-radius: 0.5rem !important;
font-size: 0.75rem !important;
padding: 0.375rem 0.75rem !important;
height: auto !important;
color: hsl(220, 20%, 14%) !important;
min-width: 14rem !important;
}
body.wiki-layout > header .d0-search-box .search-box::placeholder {
color: hsl(220, 10%, 46%) !important;
}
body.wiki-layout > header .d0-search-box .search-box:focus {
outline: none !important;
box-shadow: 0 0 0 2px hsla(220, 60%, 38%, 0.2) !important;
}
/* Register link: subtle text */
body.wiki-layout > header .signup-link {
font-size: 0.75rem !important;
color: hsl(220, 10%, 46%) !important;
padding: 0.375rem 0.5rem !important;
}
body.wiki-layout > header .signup-link:hover {
color: hsl(220, 20%, 14%) !important;
}
/* Login link: primary pill */
body.wiki-layout > header .signin-link {
font-size: 0.75rem !important;
background: hsl(220, 60%, 38%) !important;
color: white !important;
padding: 0.375rem 0.875rem !important;
border-radius: 0.375rem !important;
margin-left: 0.25rem !important;
}
body.wiki-layout > header .signin-link:hover,
body.wiki-layout > header .signin-link:focus {
background: hsl(220, 60%, 32%) !important;
color: white !important;
}
/* Theme toggle: minimal */
body.wiki-layout > header #theme-toggle {
border: none !important;
background: transparent !important;
padding: 0.25rem 0.5rem !important;
font-size: 0.875rem !important;
margin-left: 0.5rem !important;
color: hsl(220, 10%, 46%) !important;
}
body.wiki-layout > header #theme-toggle:hover {
color: hsl(220, 20%, 14%) !important;
background: hsl(40, 12%, 91%) !important;
border-radius: 0.375rem !important;
}
/* Mobile toggler */
body.wiki-layout > header .navbar-toggler {
font-size: 0.875rem !important;
padding: 0.25rem 0.5rem !important;
border-color: hsl(220, 12%, 84%) !important;
}
/* ── Pencil / card-menu hover persistence ───────────────────────────────────
* Decko default hides .card-menu._show-on-hover icons via display:none, which
* removes their layout box; if the icon is positioned outside the card-slot's
* :hover bounding rect (it's position:absolute), moving the mouse toward the
* icon leaves the parent's :hover before reaching the icon, and the icon
* vanishes mid-move. Switch to opacity-based hiding (preserves the hit-area)
* and add a few extra triggers so once the cursor is anywhere near the icon
* it stays visible long enough to be clicked. */
.card-menu._show-on-hover > a {
display: inline-block !important;
opacity: 0;
transition: opacity 120ms ease-out;
}
.card-slot:hover > .card-menu._show-on-hover > a,
.card-slot > .d0-card-frame > .d0-card-header:hover > .card-menu._show-on-hover > a,
.card-slot > .d0-card-header:hover > .card-menu._show-on-hover > a,
.card-slot.labeled-view:hover > .card-menu._show-on-hover > a,
.card > .card-body:hover > .card-menu._show-on-hover > a,
.card > .card-header:hover > .card-menu._show-on-hover > a,
.card-menu-hoverspace:hover .card-menu._show-on-hover > a,
.card-menu._show-on-hover:hover > a,
.card-menu._show-on-hover > a:hover,
.card-menu._show-on-hover > a:focus,
.card-menu._show-on-hover > a:focus-visible {
opacity: 1 !important;
}
/* ── Right column: widen sidebar + Sandra MeTTa Playground / Wiki Assistant */
:root {
--sidebar-right-w: 22rem;
}
body.wiki-layout {
grid-template-columns: var(--sidebar-w) 1fr var(--sidebar-right-w) !important;
}
@media (max-width: 1280px) {
body.wiki-layout { grid-template-columns: var(--sidebar-w) 1fr 18rem !important; }
}
@media (max-width: 1024px) {
body.wiki-layout { grid-template-columns: var(--sidebar-w) 1fr !important; grid-template-areas: "header header" "left main" "footer footer" !important; }
body.wiki-layout > #sidebar-right { display: none !important; }
}
body.wiki-layout > #sidebar-right {
padding: 0 !important;
background: hsl(40, 20%, 97%) !important;
border-left: 1px solid hsl(220, 12%, 84%) !important;
overflow: hidden !important;
}
.hyperon-right-column {
display: flex;
flex-direction: column;
height: 100%;
}
.hyperon-rc-playground {
flex: 1 1 50%;
display: flex;
flex-direction: column;
background: hsl(40, 15%, 95%);
border-bottom: 1px solid hsl(220, 12%, 84%);
min-height: 0;
}
.hyperon-rc-chat {
flex: 1 1 50%;
display: flex;
flex-direction: column;
background: hsl(0, 0%, 100%);
min-height: 0;
}
.hyperon-rc-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid hsl(220, 12%, 84%);
background: hsla(40, 20%, 97%, 0.4);
flex-shrink: 0;
}
.hyperon-rc-label {
font-size: 0.7rem;
font-family: 'JetBrains Mono', ui-monospace, monospace;
color: hsl(220, 10%, 46%);
font-weight: 500;
}
.hyperon-rc-actions {
display: flex;
gap: 0.25rem;
}
.hyperon-rc-btn-icon {
border: none;
background: transparent;
color: hsl(220, 10%, 46%);
cursor: pointer;
padding: 0.25rem 0.375rem;
border-radius: 0.25rem;
font-size: 0.85rem;
line-height: 1;
}
.hyperon-rc-btn-icon:hover {
background: hsl(40, 12%, 87%);
color: hsl(220, 20%, 14%);
}
.hyperon-rc-btn-primary {
background: hsl(220, 60%, 38%);
color: white;
border: none;
padding: 0.25rem 0.625rem;
border-radius: 0.25rem;
font-size: 0.7rem;
font-weight: 500;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
}
.hyperon-rc-btn-primary:hover { background: hsl(220, 60%, 32%); }
.hyperon-rc-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.hyperon-rc-editor {
flex: 1;
border: none;
padding: 0.75rem;
background: transparent;
color: hsl(220, 20%, 14%);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.75rem;
line-height: 1.6;
outline: none;
resize: none;
width: 100%;
box-sizing: border-box;
min-height: 0;
}
.hyperon-rc-output {
border-top: 1px solid hsl(220, 12%, 84%);
padding: 0.625rem 0.75rem;
max-height: 9rem;
overflow-y: auto;
flex-shrink: 0;
background: hsla(0, 0%, 100%, 0.5);
}
.hyperon-rc-output[hidden] { display: none; }
.hyperon-rc-output-label {
font-size: 0.625rem;
color: hsl(220, 10%, 46%);
margin: 0 0 0.25rem 0;
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hyperon-rc-output pre {
font-size: 0.75rem;
font-family: 'JetBrains Mono', monospace;
color: hsl(220, 60%, 38%);
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
.hyperon-rc-messages {
flex: 1;
overflow-y: auto;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
min-height: 0;
}
.hyperon-rc-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: hsl(220, 10%, 46%);
font-size: 0.75rem;
text-align: center;
}
.hyperon-rc-empty-icon {
font-size: 1.5rem;
opacity: 0.4;
margin-bottom: 0.5rem;
}
.hyperon-rc-empty p { margin: 0; }
.hyperon-rc-msg {
font-size: 0.75rem;
padding: 0.5rem 0.625rem;
border-radius: 0.5rem;
max-width: 90%;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.hyperon-rc-msg-user {
background: hsl(40, 12%, 91%);
color: hsl(220, 20%, 14%);
margin-left: auto;
}
.hyperon-rc-msg-assistant {
background: hsl(40, 20%, 97%);
color: hsl(220, 15%, 30%);
border: 1px solid hsl(220, 12%, 88%);
}
.hyperon-rc-msg-assistant p { margin: 0 0 0.5rem 0; }
.hyperon-rc-msg-assistant p:last-child { margin-bottom: 0; }
.hyperon-rc-msg-assistant code {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.7rem;
background: hsl(40, 15%, 95%);
padding: 0.0625rem 0.25rem;
border-radius: 0.25rem;
}
.hyperon-rc-msg-assistant a {
color: hsl(220, 60%, 38%);
text-decoration: underline;
}
.hyperon-rc-tool-pill {
display: inline-block;
font-size: 0.6875rem;
color: hsl(220, 10%, 46%);
background: hsl(40, 12%, 91%);
padding: 0.0625rem 0.375rem;
border-radius: 0.625rem;
margin: 0.125rem 0;
font-style: italic;
animation: hyperon-rc-pulse 1.4s ease-in-out infinite;
}
@keyframes hyperon-rc-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.hyperon-rc-input-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
background: hsl(40, 12%, 91%);
padding: 0.5rem 0.75rem;
margin: 0.5rem;
border-radius: 0.5rem;
flex-shrink: 0;
}
.hyperon-rc-input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 0.75rem;
color: hsl(220, 20%, 14%);
font-family: 'IBM Plex Sans', sans-serif;
min-width: 0;
}
.hyperon-rc-input::placeholder { color: hsl(220, 10%, 46%); }
.hyperon-rc-send {
border: none;
background: transparent;
color: hsl(220, 60%, 38%);
cursor: pointer;
padding: 0;
font-size: 0.875rem;
flex-shrink: 0;
}
.hyperon-rc-send:hover { color: hsl(220, 60%, 32%); }
/* Playground error/stderr state — stderr text rendered red instead of primary blue */
.hyperon-rc-output pre.hyperon-rc-output-error {
color: hsl(0, 65%, 45%) !important;
}