/*
 * The dashboard's only global stylesheet. MudBlazor does the styling; this file holds just what it has
 * no equivalent for. No colour is ever written here: anything visual reads a theme variable
 * (var(--mud-palette-...)), so both palettes stay correct by construction.
 */

/* Touch targets: every tappable control is at least 44 px tall (WCAG 2.5.5). MudBlazor's defaults for
   these run 32-40 px, which is right for a mouse and too small for a thumb. Icon buttons are 48 px
   already. */
.mud-nav-link,
.mud-button-root.mud-button,
.mud-list-item-clickable,
.mud-menu-item,
.mud-toggle-item,
.mud-chip.mud-clickable {
    min-height: 44px;
}

/* For a custom tappable area (the brand link, the account menu's avatar). */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* A visible focus ring for keyboard users on every control, in the safety-orange highlight (3:1 or
   better against every layer in both palettes). The mouse and touch never trigger :focus-visible. */
:focus-visible {
    outline: 2px solid var(--speccapture-highlight);
    outline-offset: 2px;
}

/* Layered surfaces: menus and dialogs float one step above the cards they open from. MudBlazor's palette
   has a single surface colour, so the raised one comes from the theme's own variable. */
.mud-popover.mud-paper,
.mud-dialog {
    background-color: var(--speccapture-surface-raised);
}

/* After each navigation the page title is focused so screen readers announce it; it is not a control,
   so it takes focus without drawing a ring. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* A whole row that is one link (the document list). MudBlazor's list is a selection list (role=option),
   which would hide that each row navigates; a MudLink per row keeps link semantics and gets the same
   hover tint MudBlazor uses for its own clickable rows. */
.row-link {
    transition: background-color 150ms ease-out;
}

.row-link:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Long unbroken text (a file name, a part number with no spaces) wraps instead of pushing the page
   sideways on a phone. */
.break-anywhere {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Subtle entrance for page content: a short rise and fade, skipped for anyone who asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation: speccapture-rise 0.24s ease-out both;
    }
}

@keyframes speccapture-rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* The component gallery's preview frames: a frame is a real page, so a phone-width frame trips the same
   breakpoints a phone would. */
.preview-frame {
    display: block;
    width: 100%;
    border: 0;
}

/* The upload drop zone. Its edge, hover and focus tint are MudBlazor's own drag-area classes
   (mud-file-upload-dragarea); this only gives it room to be an easy target for a thumb, the tint while a
   file is held over it, and the "choose a file" words their link look. */
.upload-zone {
    min-height: 13rem;
    width: 100%;
    color: inherit;
    font: inherit;
}

.upload-zone-dragging {
    background-color: var(--mud-palette-action-default-hover);
}

.upload-zone-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The review screen's keyboard shortcuts popover (it renders in the popover layer, outside any component's
   scoped styles). Keys are drawn as small keycaps in the theme's own lines and text colours. */
.shortcuts-popover {
    max-width: min(360px, calc(100vw - 32px));
}

.shortcuts-table {
    border-collapse: collapse;
}

.shortcuts-table td {
    padding: 4px 12px 4px 0;
    vertical-align: middle;
}

.shortcuts-keys {
    white-space: nowrap;
}

.shortcuts-table kbd {
    display: inline-block;
    min-width: 1.6em;
    margin-right: 4px;
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--mud-typography-default-family);
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background);
}

/* The "delayed" banner spans the content area edge to edge, above the page. */
.processing-delay {
    border-radius: 0;
}

/* The account menu's activator: a real button (so Tab reaches it) whose face is the avatar. Its own
   browser styling is cleared; the focus ring is the global :focus-visible one. */
.account-menu-button {
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* The gallery's phone frame: a real 360-pixel page inside a device-like border drawn in the theme's lines. */
.phone-frame {
    display: inline-block;
    max-width: 100%;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 28px;
    background-color: var(--mud-palette-background);
}

/* The review screen's rail (a mini drawer, folded): icons only - no section heading cut in half, and no
   sideways scroll from the menu's padding. Opened (hover or the menu button), it is the ordinary drawer. */
.mud-drawer-mini.mud-drawer--closed {
    overflow-x: hidden;
}

.mud-drawer-mini.mud-drawer--closed .nav-section-heading {
    display: none;
}

.phone-frame iframe {
    display: block;
    width: 360px;
    max-width: calc(100vw - 72px);
    border: 0;
    border-radius: 18px;
    background-color: var(--mud-palette-background);
}