/* ============================================================
   DevPortal — Shell glue styles
   Import order in host: branding.css → app-layout.css → app.css
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--color-text-link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.875em;
}

:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

::selection {
    background: var(--color-accent-subtle);
}

/* FluentUI dialogs ship an elevation-128 box-shadow on their panel
   (fluent-dialog .control / ::part(control)), which spreads ~50px around
   the modal. Replace it with a moderate elevation + a faint edge so the
   panel separates cleanly — and so a stacked confirmation dialog visibly
   stands out from the dialog beneath it. Height fits the content. */
fluent-dialog::part(control) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 48px rgba(0, 0, 0, 0.6);
    height: auto;
}