.x-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.y-stack {
    display: flex;
    flex-direction: column;
}

.fill-space {
    flex-grow: 1;
}

.justify-center {
    justify-content: center;
}

.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.push-right {
    margin-inline-start: auto;
}

.pad-4 {
    padding: var(--space-4);
}

.pad-6 {
    padding: var(--space-6);
}

.pad-y-6 {
    padding-block: var(--space-6);
}

.pad-x-4 {
    padding-inline: var(--space-4);
}

.mt-2 {
    margin-top: var(--space-2);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.ml-2 {
    margin-left: var(--space-2);
}

.ml-4 {
    margin-left: var(--space-4);
}

.mr-2 {
    margin-right: var(--space-2);
}

.mr-4 {
    margin-right: var(--space-4);
}

.hide-mobile {
    display: none;
}

.show-mobile {
    display: inline-flex;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: initial;
    }

    .show-mobile {
        display: none;
    }

    .x-stack.hide-mobile,
    .y-stack.hide-mobile {
        display: flex;
    }
}

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
    box-sizing: border-box;
}

/* Reader layout: when an aside is present and the viewport is wide enough,
   place the body and the "see also" panel on a 16-part proportional grid as
   per the artist's spec: 2 padding | 8 body | 2 spacer | 3 aside | 1 padding.
   Below the breakpoint — or when there's no aside — it collapses to a single
   centered column with the comfortable reading-width cap. */
.reader-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--reader-max));
    gap: var(--space-6);
    justify-content: center;
}

.reader-main,
.reader-aside {
    min-width: 0;
}

@media (min-width: 1280px) {
    .reader-grid:has(.reader-aside) {
        grid-template-columns: 2fr minmax(0, 8fr) 2fr minmax(0, 3fr) 1fr;
        gap: 0;
        justify-content: stretch;
    }

    .reader-grid:has(.reader-aside) .reader-main {
        grid-column: 2;
    }

    .reader-grid:has(.reader-aside) .reader-aside {
        grid-column: 4;
        position: sticky;
        /* Sit just below the fixed MudAppBar so the panel stays visible as the
           user scrolls instead of tucking behind it. */
        top: calc(var(--appbar-height) + var(--space-4));
        align-self: start;
    }
}

:root {
    --reader-max: 72ch;
}

/* NavSearch's start-adornment magnifier sits flush against the input. MudBlazor
   ships `.mud-input-slot.mud-input-root-adorned-start { padding-inline-start: 0 }`
   with high specificity, so we match both the class chain and the logical-property
   name to push the input text away from the icon. */
.NavSearch .mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-start {
    padding-inline-start: 8px;
}

/* Custom Image NodeView in wysiwyg.js wraps every <img> with a .resizable-image
   span and a .resize-handle child that's shown only while the image is the
   ProseMirror selection. Corner-drag on the handle rewrites the wrapper's width
   in-place; on mouseup we commit `width: XXXpx` to the node attrs. */
.tiptap-editor .resizable-image {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.tiptap-editor .resizable-image.is-selected {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.tiptap-editor .resizable-image .resize-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 12px;
    height: 12px;
    background-color: var(--mud-palette-primary);
    border: 2px solid var(--color-surface);
    border-radius: 2px;
    cursor: nwse-resize;
    z-index: 1;
}

/* TipTap task list markup — <li><label><input/></label><div><p>text</p></div></li>.
   Default block layout stacks the checkbox above the text; flexing the row keeps
   them on one line. Same rules apply in the editor and the viewer, so we hit both
   with the `.markdown-body` scope (the editor gets that class in wysiwyg.js). */
.markdown-body ul[data-type="taskList"] {
    list-style: none;
    padding-inline-start: 0;
}

.markdown-body ul[data-type="taskList"] li {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.markdown-body ul[data-type="taskList"] li > label {
    display: inline-flex;
    align-items: center;
    user-select: none;
    margin-top: 2px;
}

.markdown-body ul[data-type="taskList"] li > div {
    flex: 1;
    min-width: 0;
}

.markdown-body ul[data-type="taskList"] li > div > p {
    margin: 0;
}