.mw-wiki-table {
    border-collapse: collapse;
    margin: 1rem 0;
    width: 100%;
}

.mw-wiki-table th,
.mw-wiki-table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

.mw-wiki-table th {
    background: var(--mud-palette-background-grey);
    font-weight: 600;
}

.mw-wiki-article {
    min-width: 0;
    max-width: 56rem;
}

/* Table-of-contents (a native <details>) — lives in the view page's LEFT sidebar (mw-wiki-view-side),
   sticky on desktop; on mobile the sidebar stacks above the article and the TOC can be folded. */
.mw-wiki-toc {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    font-size: 0.875rem;
}

.mw-wiki-toc summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.5rem;
    list-style: none;
}

.mw-wiki-toc a {
    display: block;
    padding: 2px 0;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-wiki-toc a:hover {
    color: var(--mud-palette-primary);
}

.mw-wiki-toc-level-2 {
    padding-left: 0.85rem;
}

.mw-wiki-toc-level-3 {
    padding-left: 1.7rem;
}

.mw-wiki-toc-level-4,
.mw-wiki-toc-level-5,
.mw-wiki-toc-level-6 {
    padding-left: 2.5rem;
}

@media (max-width: 960px) {
    .mw-wiki-toc {
        position: static;
        max-height: none;
    }

    .mw-wiki-toc summary {
        margin-bottom: 0;
        list-style: disclosure-closed;
    }

    .mw-wiki-toc[open] summary {
        margin-bottom: 0.5rem;
        list-style: disclosure-open;
    }
}

.mw-wiki-import-drop-zone {
    min-height: 220px;
}

.mw-wiki-import-section-main {
    min-width: 0;
}

.mw-wiki-import-preview {
    color: var(--mud-palette-text-secondary);
    white-space: pre-line;
}

.mw-wiki-search-snippet {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.45;
    margin-top: 0.35rem;
    max-width: 52rem;
}

.mw-wiki-search-mark {
    background: color-mix(in srgb, var(--mud-palette-warning) 34%, transparent);
    border-radius: 3px;
    color: var(--mud-palette-text-primary);
    padding: 0 0.12rem;
}

/* NOTE: MwWikiCategoryTree — recursive category nav (nestable wiki categories + pages as leaves). Shared
   by the wiki index and the Artist Office panel; the office tints it via mw-ab-wiki-* overrides. */
.mw-wiki-tree-cat {
    margin: 1px 0;
}

.mw-wiki-tree-cat-summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 5px 6px;
    color: var(--mud-palette-text-secondary);
    list-style: none;
    user-select: none;
}

.mw-wiki-tree-cat-summary::-webkit-details-marker {
    display: none;
}

.mw-wiki-tree-cat-summary::before {
    content: "\25B8";
    display: inline-block;
    width: 1em;
    transition: transform 0.15s ease;
}

.mw-wiki-tree-cat[open] > .mw-wiki-tree-cat-summary::before {
    transform: rotate(90deg);
}

.mw-wiki-tree-cat-body {
    padding-left: 12px;
}

.mw-wiki-tree-page {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
    line-height: 1.3;
}

.mw-wiki-tree-page:hover {
    background: var(--mud-palette-action-default-hover);
}

.mw-wiki-tree-page--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* Office-panel search entry + result rows */
.mw-wiki-search-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: 6px;
    padding: 7px 8px;
    margin-bottom: 4px;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.24s ease, transform 0.12s ease;
}

.mw-wiki-search-entry:hover,
.mw-wiki-search-entry--active {
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-primary);
}

.mw-wiki-search-entry:active {
    transform: scale(0.98);
}

/* Icon swap — the magnifier turns over into a close mark while search owns the pane. Both glyphs
   are stacked in one grid cell so the label never shifts as they trade places. */
.mw-wiki-search-entry-icons {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    /* 1em keeps the glyph exactly the size it was before it moved into this wrapper */
    width: 1em;
    height: 1em;
}

.mw-wiki-search-entry-icon {
    grid-area: 1 / 1;
    transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0.28, 1);
}

.mw-wiki-search-entry-icon--exit {
    opacity: 0;
    transform: rotate(-90deg) scale(0.55);
}

.mw-wiki-search-entry--active .mw-wiki-search-entry-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.55);
}

.mw-wiki-search-entry--active .mw-wiki-search-entry-icon--exit {
    opacity: 1;
    transform: none;
}

.mw-wiki-search-result {
    padding: 8px 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.mw-wiki-search-result-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.mw-wiki-search-result-title {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--mud-palette-primary);
    font-size: 0.95rem;
    text-align: left;
}

/* NOTE: Holds one badge per matching search pass — a page found by both shows two. */
.mw-wiki-search-sources {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mw-wiki-search-source {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
}

.mw-wiki-search-source--semantic {
    background: color-mix(in srgb, var(--mud-palette-tertiary) 20%, transparent);
    color: var(--mud-palette-tertiary);
}

.mw-wiki-search-source--keyword {
    background: color-mix(in srgb, var(--mud-palette-info) 20%, transparent);
    color: var(--mud-palette-info);
}

/* NOTE: Which section of the page the passage came from. Deliberately understated — orientation,
   not emphasis; the title above and the excerpt below both outrank it. */
.mw-wiki-search-section {
    font-size: 0.72rem;
    color: var(--mud-palette-text-disabled);
    line-height: 1.3;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* NOTE: The on-demand "why does this match" affordance and its answer. */
.mw-wiki-search-why {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 3px;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--mud-palette-tertiary);
    opacity: 0.75;
    text-align: left;
}

.mw-wiki-search-why:hover {
    opacity: 1;
    text-decoration: underline;
}

.mw-wiki-search-reason {
    margin-top: 3px;
    padding-left: 6px;
    border-left: 2px solid color-mix(in srgb, var(--mud-palette-tertiary) 45%, transparent);
    font-size: 0.76rem;
    font-style: italic;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.mw-wiki-search-reason--loading {
    opacity: 0.6;
    font-style: normal;
}

.mw-wiki-search-excerpt {
    font-size: 0.83rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

/* Pinned search field (shared MwWikiTwoPhaseSearch) — without this, MudBlazor's .mud-input-control
   (flex: 1 1 auto) stretches to fill a flex-column pane and shoves results to the bottom. */
.mw-wiki-search-field.mud-input-control {
    flex: 0 0 auto;
}

/* Empty states of the shared two-phase search ("type a term…", "no hits") */
.mw-wiki-search-empty {
    padding: 24px;
    font-size: 12.5px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* ── Wiki view page (mw-wiki-view-*) — the full article page restyled to the Artist Office wiki
   popup's command-palette aesthetic (artist-buro.css, mw-ab-wiki-*): near-black canvas with soft
   brand glows, one elevated hairline-bordered panel, violet accent, Geist chrome + JetBrains Mono
   metadata. The palette is a COPY of the artist-office values, not a reference — the --mw-ab-*
   custom properties are deliberately scoped to .mw-ab-dashboard and must not leak; this block owns
   its own --mw-wiki-* set.

   The token block is shared with the floating link hover preview (.mw-wiki-preview), which renders
   OUTSIDE the page container (fixed position) and therefore cannot inherit them. ── */
.mw-wiki-view,
.mw-wiki-preview {
    /* canvas */
    --mw-wiki-bg-page: #07070a;
    --mw-wiki-glow-1: hsl(263 75% 12%);
    --mw-wiki-glow-2: hsl(220 60% 9%);

    /* surfaces */
    --mw-wiki-surface-elev: hsl(240 11% 11.5%);
    --mw-wiki-surface-hover: hsla(0 0% 100% / 0.03);

    /* borders */
    --mw-wiki-border: hsla(0 0% 100% / 0.06);
    --mw-wiki-border-strong: hsla(0 0% 100% / 0.10);

    /* text */
    --mw-wiki-text: hsl(0 0% 96%);
    --mw-wiki-text-dim: hsl(240 5% 60%);
    --mw-wiki-text-faint: hsl(240 5% 40%);

    /* accent — MitWare violet */
    --mw-wiki-accent: hsl(263 90% 67%);
    --mw-wiki-accent-soft: hsl(263 70% 79%);
    --mw-wiki-accent-tint: hsla(263 90% 67% / 0.10);
    --mw-wiki-accent-line: hsla(263 90% 67% / 0.30);

    /* status */
    --mw-wiki-amber: hsl(38 92% 62%);
    --mw-wiki-amber-dim: hsla(38 92% 62% / 0.13);
    --mw-wiki-blue: hsl(210 80% 65%);
    --mw-wiki-blue-dim: hsla(210 80% 65% / 0.13);
    --mw-wiki-red: hsl(351 75% 64%);
    --mw-wiki-red-dim: hsla(351 75% 64% / 0.13);

    --mw-wiki-font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --mw-wiki-font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --mw-wiki-radius: 12px;
    --mw-wiki-radius-sm: 8px;
}

.mw-wiki-view {
    position: relative;
    /* fill the viewport below the dense 48px MudAppBar (same constant the office uses) */
    min-height: calc(100dvh - 48px);
    padding: 20px;
    box-sizing: border-box;
    background: var(--mw-wiki-bg-page);
    color: var(--mw-wiki-text);
    font-family: var(--mw-wiki-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Atmosphere — the office's soft brand glows + faint masked grid, behind the panel */
.mw-wiki-view::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 45% at 18% 0%, var(--mw-wiki-glow-1), transparent 60%),
        radial-gradient(ellipse 50% 40% at 92% 100%, var(--mw-wiki-glow-2), transparent 60%);
    opacity: 0.8;
    pointer-events: none;
}

.mw-wiki-view::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(hsla(0 0% 100% / 0.015) 1px, transparent 1px),
        linear-gradient(90deg, hsla(0 0% 100% / 0.015) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%);
    pointer-events: none;
}

/* Material Symbols Rounded icon helper (own copy — mw-ab-mi belongs to the office) */
.mw-wiki-mi {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    font-variation-settings: 'opsz' 20;
}

/* The one elevated panel — the popup blown up to page size. overflow: clip (NOT hidden) keeps the
   rounded corners clean without creating a scroll container, so the sticky TOC keeps working. */
.mw-wiki-view-panel {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    background: var(--mw-wiki-surface-elev);
    border: 1px solid var(--mw-wiki-border-strong);
    border-radius: var(--mw-wiki-radius);
    box-shadow: 0 28px 70px -20px hsla(0 0% 0% / 0.9);
    overflow: clip;
}

.mw-wiki-view-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mw-wiki-border);
}

.mw-wiki-view-title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mw-wiki-text);
}

.mw-wiki-view-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
    cursor: default;
}

.mw-wiki-view-tag .mw-wiki-mi {
    font-size: 13px;
}

.mw-wiki-view-tag--amber {
    background: var(--mw-wiki-amber-dim);
    color: var(--mw-wiki-amber);
}

.mw-wiki-view-tag--blue {
    background: var(--mw-wiki-blue-dim);
    color: var(--mw-wiki-blue);
}

.mw-wiki-view-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Labeled ghost button (Edit, empty-state back link) */
.mw-wiki-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--mw-wiki-border);
    border-radius: var(--mw-wiki-radius-sm);
    background: transparent;
    color: var(--mw-wiki-text-dim);
    font-family: var(--mw-wiki-font-body);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mw-wiki-view-btn:hover {
    border-color: var(--mw-wiki-accent-line);
    color: var(--mw-wiki-text);
}

.mw-wiki-view-btn .mw-wiki-mi {
    font-size: 15px;
}

.mw-wiki-view-btn--primary {
    background: var(--mw-wiki-accent-tint);
    border-color: var(--mw-wiki-accent-line);
    color: var(--mw-wiki-accent-soft);
}

.mw-wiki-view-btn--primary:hover {
    color: var(--mw-wiki-text);
}

.mw-wiki-view-btn--disabled {
    opacity: 0.45;
    cursor: default;
}

.mw-wiki-view-btn--disabled:hover {
    border-color: var(--mw-wiki-border);
    color: var(--mw-wiki-text-dim);
}

/* 28px icon-square action (the popup's mw-ab-wiki-open) */
.mw-wiki-view-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--mw-wiki-border);
    border-radius: var(--mw-wiki-radius-sm);
    background: transparent;
    color: var(--mw-wiki-text-dim);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mw-wiki-view-act:hover {
    border-color: var(--mw-wiki-accent-line);
    color: var(--mw-wiki-text);
}

.mw-wiki-view-act:disabled {
    opacity: 0.45;
    cursor: default;
}

.mw-wiki-view-act:disabled:hover {
    border-color: var(--mw-wiki-border);
    color: var(--mw-wiki-text-dim);
}

.mw-wiki-view-act .mw-wiki-mi {
    font-size: 16px;
}

.mw-wiki-view-act--warn {
    background: var(--mw-wiki-amber-dim);
    border-color: hsla(38 92% 62% / 0.35);
    color: var(--mw-wiki-amber);
}

.mw-wiki-view-act--danger:hover {
    background: var(--mw-wiki-red-dim);
    border-color: hsla(351 75% 64% / 0.4);
    color: var(--mw-wiki-red);
}

.mw-wiki-view-meta {
    padding: 8px 20px;
    border-bottom: 1px solid var(--mw-wiki-border);
    font-family: var(--mw-wiki-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--mw-wiki-text-faint);
}

/* Two-column body — the popup's layout: left sidebar (mw-ab-wiki-list: outline on the view page,
   search entry + category tree on the index) with a hairline to the right, content pane beside it. */
.mw-wiki-view-columns {
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.mw-wiki-view-side {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border-right: 1px solid var(--mw-wiki-border);
}

.mw-wiki-view-main {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 28px;
}

/* Fill variant (index page) — the panel fills the viewport and the two columns scroll internally,
   exactly like the fixed-size popup. The view page instead scrolls with the document (long articles)
   and keeps its TOC sticky. */
.mw-wiki-view-panel--fill {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 88px);
}

.mw-wiki-view-panel--fill .mw-wiki-view-columns {
    flex: 1;
    min-height: 0;
}

.mw-wiki-view-panel--fill .mw-wiki-view-side {
    overflow-y: auto;
}

.mw-wiki-view-panel--fill .mw-wiki-view-main {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* TOC inside the dark sidebar — the sidebar frame replaces the old left hairline */
.mw-wiki-view .mw-wiki-toc {
    top: 60px;
}

.mw-wiki-view .mw-wiki-toc summary {
    color: var(--mw-wiki-text-faint);
}

.mw-wiki-view .mw-wiki-toc a {
    color: var(--mw-wiki-text-dim);
}

.mw-wiki-view .mw-wiki-toc a:hover {
    color: var(--mw-wiki-accent-soft);
}

/* Phone bar (index page) — drawer handle + search entry. Desktop keeps the search entry in the
   sidebar and has no drawer, so this row only exists at <=960px (see the mobile block at the end). */
.mw-wiki-view-mobar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mw-wiki-border);
}

.mw-wiki-view-mobar-menu {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--mw-wiki-border);
    border-radius: var(--mw-wiki-radius-sm);
    background: transparent;
    color: var(--mw-wiki-text-dim);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.mw-wiki-view-mobar-menu:hover {
    border-color: var(--mw-wiki-accent-line);
    color: var(--mw-wiki-text);
}

.mw-wiki-view-mobar-menu .mw-wiki-mi {
    font-size: 20px;
}

/* The bar's search entry reads as a field rather than a list row: bordered, full width, no row margin. */
.mw-wiki-view-mobar .mw-wiki-search-entry {
    margin-bottom: 0;
    padding: 8px 10px;
    border: 1px solid var(--mw-wiki-border);
    border-radius: var(--mw-wiki-radius-sm);
}

/* Content pane (index page) — wraps whichever mode is showing (tag bar + page list, or the two-phase
   search) so the swap between them can be animated. It is keyed on the mode in the markup, so each
   switch mounts a fresh element and replays the entry animation. */
.mw-wiki-view-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    animation: mw-wiki-pane-in 0.22s cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

@keyframes mw-wiki-pane-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Respect a reduced-motion preference: keep the swap, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .mw-wiki-view-pane {
        animation: none;
    }

    .mw-wiki-view-panel--fill .mw-wiki-view-side {
        transition: none;
    }

    /* the glyphs still swap, they just stop turning; the press scale goes entirely */
    .mw-wiki-search-entry-icon {
        transition: opacity 0.18s ease;
        transform: none;
    }

    .mw-wiki-search-entry--active .mw-wiki-search-entry-icon {
        transform: none;
    }

    .mw-wiki-search-entry:active {
        transform: none;
    }
}

/* Tag filter bar (index page) */
.mw-wiki-view-tagbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.mw-wiki-view-tagpill {
    padding: 3px 10px;
    border: 1px solid var(--mw-wiki-border);
    border-radius: 999px;
    background: transparent;
    color: var(--mw-wiki-text-dim);
    font-family: var(--mw-wiki-font-body);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.mw-wiki-view-tagpill:hover {
    border-color: var(--mw-wiki-accent-line);
    color: var(--mw-wiki-text);
}

.mw-wiki-view-tagpill--active {
    background: var(--mw-wiki-accent-tint);
    border-color: var(--mw-wiki-accent-line);
    color: var(--mw-wiki-accent-soft);
}

/* Page list (index page) */
.mw-wiki-view-list {
    display: flex;
    flex-direction: column;
}

.mw-wiki-view-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--mw-wiki-radius-sm);
    color: var(--mw-wiki-text);
    text-decoration: none;
    transition: background 0.15s ease;
}

.mw-wiki-view-row:hover {
    background: var(--mw-wiki-surface-hover);
}

.mw-wiki-view-row + .mw-wiki-view-row {
    border-top: 1px solid var(--mw-wiki-border);
}

.mw-wiki-view-row > .mw-wiki-mi {
    font-size: 17px;
    color: var(--mw-wiki-accent-soft);
    flex-shrink: 0;
}

.mw-wiki-view-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mw-wiki-view-row-title {
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-wiki-view-row-meta {
    font-family: var(--mw-wiki-font-mono);
    font-size: 10px;
    color: var(--mw-wiki-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-wiki-view-row-chev {
    color: var(--mw-wiki-text-faint);
}

/* Retint the shared tree, search entry, and two-phase search to the dark panel. These base classes
   colour via --mud-palette-* (theme-following); on this always-dark surface they must be pinned. */
.mw-wiki-view .mw-wiki-search-entry {
    color: var(--mw-wiki-text-dim);
}

.mw-wiki-view .mw-wiki-search-entry:hover,
.mw-wiki-view .mw-wiki-search-entry--active {
    background: var(--mw-wiki-accent-tint);
    color: var(--mw-wiki-accent-soft);
}

/* An accent ring blooms around the entry the moment search takes the pane — the state change is
   otherwise only a faint tint, which is easy to miss on a phone. */
.mw-wiki-view .mw-wiki-search-entry--active {
    box-shadow: 0 0 0 3px var(--mw-wiki-accent-tint);
}

.mw-wiki-view .mw-wiki-tree-cat-summary {
    color: var(--mw-wiki-text-faint);
}

.mw-wiki-view .mw-wiki-tree-page {
    color: var(--mw-wiki-text-dim);
}

.mw-wiki-view .mw-wiki-tree-page:hover {
    background: var(--mw-wiki-surface-hover);
    color: var(--mw-wiki-text);
}

.mw-wiki-view .mw-wiki-tree-page--active {
    background: var(--mw-wiki-accent-tint);
    color: var(--mw-wiki-accent-soft);
}

.mw-wiki-view .mw-wiki-search-empty {
    color: var(--mw-wiki-text-faint);
}

.mw-wiki-view .mw-wiki-search-result {
    border-bottom-color: var(--mw-wiki-border);
}

.mw-wiki-view .mw-wiki-search-result-title {
    color: var(--mw-wiki-accent-soft);
}

.mw-wiki-view .mw-wiki-search-source--semantic {
    background: var(--mw-wiki-accent-tint);
    color: var(--mw-wiki-accent-soft);
}

.mw-wiki-view .mw-wiki-search-source--keyword {
    background: var(--mw-wiki-blue-dim);
    color: var(--mw-wiki-blue);
}

.mw-wiki-view .mw-wiki-search-section {
    color: var(--mw-wiki-text-faint);
}

.mw-wiki-view .mw-wiki-search-excerpt,
.mw-wiki-view .mw-wiki-search-snippet {
    color: var(--mw-wiki-text-dim);
}

.mw-wiki-view .mw-wiki-search-mark {
    background: hsla(38 92% 62% / 0.30);
    color: var(--mw-wiki-text);
}

.mw-wiki-view .mw-wiki-search-why {
    color: var(--mw-wiki-accent-soft);
}

.mw-wiki-view .mw-wiki-search-reason {
    border-left-color: var(--mw-wiki-accent-line);
    color: var(--mw-wiki-text-dim);
}

/* MudTextField (the search field) on the dark panel — pin input, placeholder, adornment, and the
   outlined border; the theme-following defaults are unreadable here in light mode. */
.mw-wiki-view .mud-input {
    color: var(--mw-wiki-text);
    caret-color: var(--mw-wiki-accent);
}

.mw-wiki-view .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mw-wiki-border-strong);
}

.mw-wiki-view .mud-input input::placeholder {
    color: var(--mw-wiki-text-faint);
    opacity: 1;
}

.mw-wiki-view .mud-input-adornment .mud-icon-root,
.mw-wiki-view .mud-input .mud-icon-root {
    color: var(--mw-wiki-text-dim);
}

/* Retint the reused wiki renderer to the dark panel — same override set the office applies to
   mw-ab-wiki-article: headings/rules to the panel's text/hairline colours, links to the violet.
   :is() keeps single-class specificity, so the hover preview inherits the identical treatment. */
:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-article {
    color: var(--mw-wiki-text);
}

:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-article :is(h1, h2, h3, h4, h5, h6) {
    color: var(--mw-wiki-text);
}

:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-article a,
:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-article .mw-wiki-link {
    color: var(--mw-wiki-accent-soft);
}

:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-article .mw-wiki-link--missing {
    color: var(--mw-wiki-red);
}

:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-article hr {
    border-color: var(--mw-wiki-border);
}

:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-table th,
:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-table td {
    border-color: var(--mw-wiki-border-strong);
}

:is(.mw-wiki-view, .mw-wiki-preview) .mw-wiki-table th {
    background: var(--mw-wiki-surface-hover);
}

/* TOC sidebar, retinted */
.mw-wiki-view .mw-wiki-toc {
    border-left-color: var(--mw-wiki-border);
}

.mw-wiki-view .mw-wiki-toc summary {
    color: var(--mw-wiki-text-faint);
}

.mw-wiki-view .mw-wiki-toc a {
    color: var(--mw-wiki-text-dim);
}

.mw-wiki-view .mw-wiki-toc a:hover {
    color: var(--mw-wiki-accent-soft);
}

.mw-wiki-view-backlinks {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--mw-wiki-border);
}

.mw-wiki-view-backlinks-title {
    margin-bottom: 8px;
    font-family: var(--mw-wiki-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--mw-wiki-text-dim);
}

.mw-wiki-view-backlink {
    display: block;
    padding: 2px 0;
    font-size: 13px;
    color: var(--mw-wiki-accent-soft);
    text-decoration: none;
}

.mw-wiki-view-backlink:hover {
    text-decoration: underline;
}

.mw-wiki-view-empty {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 64px 24px;
    color: var(--mw-wiki-text-faint);
    font-size: 13px;
    text-align: center;
}

/* ── Wiki link hover preview (mw-wiki-preview-*) — the floating card shown when hovering an internal
   wiki link, in the same command-palette skin as the view page: elevated hairline panel, head bar with
   the page title and the two icon-square actions, mono metadata strip, scrolling article body. The card
   is exactly the size and position of the window it detaches into ("open as window"), so geometry comes
   in as custom properties from the component (single source of truth: its WindowWidth/WindowHeight). ── */
.mw-wiki-preview {
    position: fixed;
    z-index: 1300;
    width: var(--mw-wiki-preview-width);
    height: var(--mw-wiki-preview-height);
    left: clamp(8px, var(--mw-wiki-preview-x), calc(100vw - var(--mw-wiki-preview-width) - 8px));
    top: clamp(8px, var(--mw-wiki-preview-y), calc(100vh - var(--mw-wiki-preview-height) - 8px));
    color: var(--mw-wiki-text);
    font-family: var(--mw-wiki-font-body);
    -webkit-font-smoothing: antialiased;
    /* every geometry property transitions, so the card slides between links and, crucially, grows
       smoothly to fullscreen on "open full page" */
    transition: left 0.28s ease, top 0.28s ease, width 0.28s ease, height 0.28s ease;
}

/* Mid-"open full page": fill the viewport so it reads as the card growing into the page underneath */
.mw-wiki-preview--expanding {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}

.mw-wiki-preview--expanding .mw-wiki-preview-panel {
    border-color: transparent;
    border-radius: 0;
}

.mw-wiki-preview-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--mw-wiki-surface-elev);
    border: 1px solid var(--mw-wiki-border-strong);
    border-radius: var(--mw-wiki-radius);
    box-shadow: 0 28px 70px -20px hsla(0 0% 0% / 0.9);
    overflow: clip;
}

/* Tighter than the page head — this is a card, not a page */
.mw-wiki-preview-head {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    padding: 9px 12px;
}

.mw-wiki-preview-head .mw-wiki-view-title {
    font-size: 14.5px;
}

.mw-wiki-preview-meta {
    flex: 0 0 auto;
    padding: 6px 12px;
}

.mw-wiki-preview-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px 20px;
    scrollbar-color: var(--mw-wiki-border-strong) transparent;
}

.mw-wiki-preview-body .mw-wiki-article {
    max-width: none;
}

.mw-wiki-preview-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 24px;
    color: var(--mw-wiki-text-faint);
    font-size: 13px;
    text-align: center;
}

.mw-wiki-preview-state .mw-wiki-mi {
    font-size: 26px;
    color: var(--mw-wiki-text-dim);
}

.mw-wiki-preview-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--mw-wiki-border-strong);
    border-top-color: var(--mw-wiki-accent);
    border-radius: 50%;
    animation: mw-wiki-preview-spin 0.7s linear infinite;
}

@keyframes mw-wiki-preview-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 960px) {
    .mw-wiki-view {
        padding: 10px;
    }

    /* columns stack: the sidebar (outline / tree) becomes a full-width strip above the content */
    .mw-wiki-view-columns {
        flex-direction: column;
    }

    .mw-wiki-view-side {
        width: auto;
        border-right: none;
        border-bottom: 1px solid var(--mw-wiki-border);
    }

    .mw-wiki-view-main {
        padding: 14px 16px 20px;
    }

    /* The index panel stops pinning to the viewport and scrolls with the document. It also drops its
       z-index: the drawer below is viewport-fixed, and a positioned panel with z-index 1 opens a
       stacking context that traps every descendant under the 48px MudAppBar (z-index 1100), no
       matter how high the drawer's own z-index is. overflow goes visible so nothing clips it. */
    .mw-wiki-view-panel--fill {
        height: auto;
        z-index: auto;
        overflow: visible;
    }

    /* z-index: 1 was also what kept the panel above the decorative grid overlay (::after paints after
       the panel in DOM order). Without it the grid would sit on top, so it goes off on the index page;
       the glow layer (::before) paints below the panel either way and stays. */
    .mw-wiki-view:has(.mw-wiki-view-panel--fill)::after {
        display: none;
    }

    /* ── Index page: the category tree becomes an off-canvas drawer ──────────────────────────────
       Stacked, the sidebar was a 40dvh strip with its own scroller sitting on top of the content —
       a nested scroller that pushed the tag bar and page list a full screen down. It is now a fixed
       drawer opened from the phone bar, so the list starts directly under the header. Same shape as
       the mobile Artist Office wiki screen (artist-buro.css, mw-ab-m-wiki-*). */
    .mw-wiki-view-mobar {
        display: flex;
    }

    .mw-wiki-view-panel--fill .mw-wiki-view-side {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1301;
        width: min(80%, 300px);
        padding: 14px 12px;
        overflow-y: auto;
        background: var(--mw-wiki-surface-elev);
        border-right: 1px solid var(--mw-wiki-border-strong);
        border-bottom: none;
        box-shadow: 24px 0 60px -30px hsla(0 0% 0% / 0.85);
        transform: translateX(-101%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.28, 1);
    }

    .mw-wiki-view-columns--drawer .mw-wiki-view-side {
        transform: none;
    }

    /* the sidebar's own search entry is redundant here — the phone bar carries it */
    .mw-wiki-view-panel--fill .mw-wiki-view-side .mw-wiki-search-entry {
        display: none;
    }

    .mw-wiki-view-drawer-scrim {
        position: fixed;
        inset: 0;
        z-index: 1300;
        background: hsla(240 20% 3% / 0.5);
    }

    /* one swipeable row of tags instead of two stacked rows of chrome above the list */
    .mw-wiki-view-tagbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .mw-wiki-view-tagpill {
        flex-shrink: 0;
    }
}

/* Narrow phones: the head bar's actions shed their labels so the title and both buttons stay on one row. */
@media (max-width: 560px) {
    .mw-wiki-view-btn-label {
        display: none;
    }

    .mw-wiki-view-head .mw-wiki-view-btn {
        padding: 7px 9px;
    }
}