/* Rules shared by light and dark (both hosts link this before app.css or app-dark.css). Colours come from
   app-tokens.css and MudBlazor's CSS variables, never from literals here. The app shell's own
   rules are in Shared/Layouts/MainLayout.razor.css. */

html,
body,
app {
    height: 100%;
}

app {
    display: block;
}

body {
    margin: 0;
    overflow: hidden; /* the shell's content area is the only scroller */
    background-color: var(--ra-bg);
    font-family: var(--app-font, 'Montserrat', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* MudBlazor paints its primary colour as text and under white text alike; at about 3:1 the accent reads as neither.
   Text in the accent's colour (MudText, text and outlined buttons, icon buttons) takes the ink, and everything carrying
   white text takes the deep accent, as the app's own components do (DESIGN.md, the Ribbon Rule). The html prefix
   outranks MudBlazor's rules, which load after this sheet, and its hover and press rules are matched one for one. */
html .mud-primary-text,
html .mud-button-text.mud-button-text-primary:not(:disabled),
html .mud-button-outlined.mud-button-outlined-primary:not(:disabled),
html .mud-chip-outlined.mud-chip-color-primary {
    color: var(--ra-primary-ink) !important;
}

html .mud-button-filled.mud-button-filled-primary:not(:disabled),
html .mud-fab-primary,
html .mud-chip-filled.mud-chip-color-primary {
    background-color: var(--ra-primary-deep);
    color: var(--mud-palette-white);
}

html .mud-button-filled.mud-button-filled-primary:hover,
html .mud-button-filled.mud-button-filled-primary:focus-visible,
html .mud-button-filled.mud-button-filled-primary:active,
html .mud-fab-primary:hover,
html .mud-fab-primary:focus-visible,
html .mud-fab-primary:active,
html .mud-chip-filled.mud-chip-color-primary.mud-clickable:hover:not(.mud-disabled),
html .mud-chip-filled.mud-chip-color-primary.mud-clickable:active:not(.mud-disabled) {
    background-color: color-mix(in srgb, var(--ra-primary-deep) 86%, var(--mud-palette-black));
}

/* Read by screen readers, not shown: a page's heading where the page draws none, or a status said aloud. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* A menu's popover is drawn outside the component that opened it, so its class has to be global. */
.app-menu-width {
    justify-items: start;
    min-width: 200px;
    width: fit-content;
    overflow-x: hidden;
    margin: 4px 4px 4px 0;
}

/* Keeps the scroll-to-top button clear of the bottom tabs on phones and tablets. */
.app-scroll-top {
    margin-bottom: 16px;
}

@media (max-width: 959.98px) {
    .app-scroll-top {
        margin-bottom: calc(var(--app-footer-height) + env(safe-area-inset-bottom) + 16px);
    }
}

#blazor-error-ui {
    background: var(--mud-palette-warning) !important;
    bottom: 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 20%);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

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

/* The top bar's current page: its link keeps the bar's white text (the secondary colour as text is under 4.5:1 on the deep
   accent), set bold, with an underline in the secondary colour, which as a mark needs only 3:1. MudBlazor's link buttons set
   text-decoration: none, so the rule names the button to outrank it. */
html .app-topnav .mud-button-root.app-menu-decoration {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--mud-palette-secondary);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* The reading settings dialog leaves the passage visible behind it, so a change can be seen as it is made. */
.reader-settings-backdrop {
    background: transparent !important;
}

/* The reader's selected verse (painted with the CSS Custom Highlight API; must be global, not scoped). It is marked with a
   dotted underline in the primary colour, not a background, which is kept for highlighting verses as a feature. */
::highlight(verse-selected) {
    background-color: transparent;
    text-decoration: underline dotted var(--mud-palette-primary);
    text-decoration-thickness: 2px;
}

/* On a wide screen the reading settings open as a popup under the reader toolbar, near its gear. */
@media (min-width: 960px) {
    .mud-dialog.reader-settings-dialog {
        margin: 68px 24px 0 0;
    }
}

/* The reader's search popup: the results scroll inside it, under the search box (which stays in view on the dialog's
   colour). On a phone it is full screen (DialogOptions) and fills the height. */
.mud-dialog.search-dialog .search-dialog-content {
    --search-top-bg: var(--mud-palette-surface);
    height: min(72vh, 760px);
    height: min(72dvh, 760px);
    padding-top: 0;
    overflow-y: auto;
}

.mud-dialog.search-dialog.mud-dialog-fullscreen .search-dialog-content {
    flex: 1;
    height: auto;
}

/* Settings pages: a section is a stack of cards; on a wide screen the controls sit in one column with a live preview
   beside them that stays in view as the page scrolls. */
.set-card {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.set-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 24px;
}

@media (min-width: 960px) {
    .set-layout.set-two {
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
    }

    .set-aside {
        position: sticky;
        top: 8px;
    }
}

/* On a touch screen MudBlazor's small icon buttons (30 px: the sheet's close, the study panel's dock and close, the
   Library's and Storage's delete) grow to 40 px, nearer a fingertip; a mouse keeps the compact size. */
@media (pointer: coarse) {
    html .mud-icon-button.mud-icon-button-size-small {
        padding: 10px;
    }
}