/*
    Structure only (D47 in site-plan.md). Public and sign-in pages use Fluent UI 5.0.0 components
    at their default styling; this file holds the few rules no component provides, and nothing that
    is there for looks. A site theme built from Fluent's design tokens comes later; until then, do
    not add colours, sizes or spacing for taste here or in a page's .razor.css.
*/

/*
    Natural page scroll. Fluent's base stylesheet (default-fuib.css) gives <body> height: 100dvh and
    overflow: hidden, because it expects a FluentLayout to fill the window and scroll its own content
    area. The public layout is a FluentLayout with Height="auto" that grows with its page, so the page
    itself scrolls (wheel, End key, a phone's swipe); without this nothing below the first screen could
    be reached. The dashboard keeps Fluent's rule: its FluentLayout fills the window and scrolls its
    content area itself.
*/
body:has(.public-page) {
    height: auto;
    overflow: visible;
}

/* The public layout's content area (the FluentLayoutItem under the header bar): a page gutter and a
   readable line length; Fluent gives the content area neither. */
.public-page {
    max-width: 48rem;
    padding: 0.75rem 1rem 2rem;
}

/*
    The public header's signed-in side: a long username gives way (Fluent's truncate, an ellipsis)
    before Sign out does. Fluent's header area is overflow: hidden and does not wrap, and a flex item
    will not shrink below its content without min-width: 0, so without this a long name pushes Sign
    out off the bar. The bar itself too: next to the hamburger it has to shrink to what is left.
*/
.public-bar,
.public-account,
.public-account .public-user {
    min-width: 0;
}

.public-account .public-user {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    Markdown content flow (article bodies and vault notes, both a MarkupString marked class="markdown"):
    nothing in it may widen the page on a phone. Long words wrap, images and diagrams shrink to fit,
    code blocks and tables scroll sideways inside themselves.
*/
.markdown {
    overflow-wrap: break-word;
}

.markdown img,
.markdown svg {
    max-width: 100%;
    height: auto;
}

.markdown pre {
    overflow-x: auto;
}

.markdown table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* FocusOnNavigate moves focus to the h1 after an enhanced navigation; that is not a keyboard focus to show. */
h1:focus {
    outline: none;
}

/* Blazor's error bar: hidden until blazor.web.js shows it. The Fluent bundle has no rule for it, so it would always show. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.6rem 1.25rem;
    background: lightyellow;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}