/* /Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Layout styles that are not expressible as utilities. Tokens only (Postnomic.Design tokens.css):
   no colour literal here, so light and dark follow the theme. */

/* Top bar: users who ask for less transparency get the solid surface instead of the blurred glass. */
@media (prefers-reduced-transparency: reduce) {
    .site-bar[b-du8qposs5c] {
        background-color: var(--background);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Maintenance mode: the page stays visible but blurred behind a card. */
.maintenance-blur[b-du8qposs5c] {
    filter: blur(6px) saturate(0.5);
    pointer-events: none;
    user-select: none;
}

.maintenance-overlay[b-du8qposs5c] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in oklab, var(--background) 60%, transparent);
}

.maintenance-card[b-du8qposs5c] {
    width: 100%;
    max-width: 32.5rem;
    padding: 3rem 2.5rem;
    text-align: center;
    animation: maintenance-fade-in-b-du8qposs5c 0.6s ease-out;
}

.maintenance-icon[b-du8qposs5c] {
    display: inline-flex;
    margin-bottom: 1rem;
    font-size: 3rem;
    color: var(--primary-text);
}

@keyframes maintenance-fade-in-b-du8qposs5c {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .maintenance-card[b-du8qposs5c] {
        animation: none;
    }
}

/* Phone tap targets (step 3 review S1): below lg every single-line field on the site is 44 px high, whatever the
   pointer. The design system already does this under a coarse pointer; this covers a narrow window with a mouse
   or a touch screen that reports a fine pointer. ::deep reaches the pages' fields inside the layout's <main>.
   From lg up the 36 px demo4 size stays. */
@media (max-width: 1023.98px) {
    main[b-du8qposs5c]  :is(.pn-input, .pn-select) {
        block-size: 2.75rem;
    }
}
/* /Pages/Support/Article.cshtml.rz.scp.css */
/* Help article body: Markdig HTML from the API inside .pn-prose (the design system's prose styles). These rules
   reach the raw HTML through ::deep. Tokens only: no colour literal here, so light and dark follow the theme. */

/* Tables and diagrams scroll inside their own region (HelpArticleHtml wraps them), never the page. */
[data-pn-article-body][b-50w3xs7a23]  .help-scroll,
[data-pn-article-body][b-50w3xs7a23]  .help-diagram {
    display: block;
    max-width: 100%;
    margin: 0 0 1.25em;
    overflow-x: auto;
    border-radius: var(--radius);
}

/* The regions are focusable so a keyboard can scroll them: show where focus is. */
[data-pn-article-body][b-50w3xs7a23]  .help-scroll:focus-visible,
[data-pn-article-body][b-50w3xs7a23]  .help-diagram:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* A table fills the column and wraps its cells; only content that cannot wrap (code, long tokens) makes it wider,
   and then the region scrolls. */
[data-pn-article-body][b-50w3xs7a23]  .help-scroll > table {
    width: 100%;
    margin: 0;
}

/* Diagrams: the seed SVGs draw dark strokes and text in fixed light-theme colours (data/help is shared and not
   edited for this). The panel is a surface token in both themes. In the dark theme the SVG itself is inverted
   (invert + hue-rotate(180deg) flips lightness and keeps the hues), so its light fills become dark and its dark
   text light, and the diagram no longer glares on the dark page. */
[data-pn-article-body][b-50w3xs7a23]  .help-diagram {
    padding: 1rem;
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--card-foreground);
}

.dark [data-pn-article-body][b-50w3xs7a23]  .help-diagram > svg {
    filter: invert(1) hue-rotate(180deg);
}

/* The diagrams are 720-760 units wide. Scaled to a phone's column their 13 px labels would shrink to about 6 px, so
   below 36rem a diagram keeps that width (labels about 10 px) and scrolls. min-width wins over the inline max-width. */
[data-pn-article-body][b-50w3xs7a23]  .help-diagram > svg {
    display: block;
    width: 100%;
    min-width: 36rem;
    height: auto;
}