/*
    Portal styles beyond MudBlazor: font faces, the focus ring, reduced-motion rules and small layout details.
    Colours, sizes and motion come only from the theme (Components/Theme/PoseidonTheme.cs): MudBlazor's --mud-* variables
    and the --poseidon-* variables. Never hard-code a colour here.
*/

/* ---- Font faces (self-hosted, SIL Open Font License; see fonts/*-OFL.txt) ---------------------------------------- */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tabular figures, so numbers line up in tables and do not jump as they change. */
body {
    font-feature-settings: "tnum";
}

/* Identifiers (keys, trace IDs, endpoint IDs). */
.poseidon-mono {
    font-family: var(--poseidon-font-mono);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/* ---- Focus ring: on every interactive element, never removed ---------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--poseidon-focus-ring) !important;
    outline-offset: 2px !important;
}

/*
    Text fields and selects show focus with their own 2-pixel primary border (MudBlazor's outlined border or underline,
    or the sign-in field's border below), so the ring is not drawn a second time around the inner element.
*/
.mud-input-root:focus-visible,
.poseidon-field__input:focus-visible {
    outline: none !important;
}

/* An outlined button already has a border in the ring colour: the ring sits directly on it instead of 2 pixels out. */
.mud-button-outlined:focus-visible {
    outline-offset: 0 !important;
}

/*
    The page heading and the main region receive focus only by script (after navigation, skip link) so a screen reader
    announces the new page; they are not interactive and never in the tab order, so they get no ring. A browser treats
    focus set by script on page load as keyboard focus, so ":focus-visible" alone does not hide it.
*/
h1[tabindex="-1"]:focus,
#main-content:focus {
    outline: none !important;
}

/* Focused elements are never hidden behind the fixed app bar or the reconnect bar. */
/* The scrollbar's space is always kept, so a page that gets shorter while it loads does not move sideways. */
html {
    scroll-padding-top: calc(var(--poseidon-app-bar-height) + 16px);
    scrollbar-gutter: stable;
}

html.poseidon-reconnecting {
    scroll-padding-top: calc(var(--poseidon-app-bar-height) + 136px);
}

/* ---- Accessibility helpers -------------------------------------------------------------------------------------- */

.poseidon-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.poseidon-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: calc(var(--mud-zindex-appbar) + 10);
    padding: 8px 16px;
    border-radius: var(--poseidon-radius);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    transform: translateY(-200%);
}

.poseidon-skip-link:focus {
    transform: none;
}

/* ---- App shell -------------------------------------------------------------------------------------------------- */

/* A translucent white bar: the page shows through, blurred, as it scrolls underneath. */
.poseidon-app-bar {
    border-bottom: 1px solid var(--mud-palette-divider);
    backdrop-filter: saturate(180%) blur(8px);
}

.poseidon-app-bar .mud-toolbar {
    gap: 12px;
}

.poseidon-nav-toggle {
    color: var(--mud-palette-text-secondary) !important;
}

.poseidon-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    border-radius: var(--poseidon-radius);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
}

.poseidon-brand__name {
    overflow: hidden;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* In the dark theme a faint light outline keeps the logo's navy edges visible. */
.poseidon-logo {
    display: block;
    flex: none;
    object-fit: contain;
    filter: var(--poseidon-logo-filter);
}

/* Theme menu: the chosen option is marked with a check (and "(selected)" for screen readers). */
.poseidon-theme-menu__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.poseidon-theme-menu__item.is-selected {
    font-weight: 600;
}

.poseidon-environment-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--poseidon-radius-chip);
    background-color: var(--poseidon-badge-local-background);
    color: var(--poseidon-badge-local-text);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-weight: 600;
}

.poseidon-environment-badge--production {
    background-color: var(--poseidon-badge-production-background);
    color: var(--poseidon-badge-production-text);
}

/* Decorative; the badge text carries the meaning. */
.poseidon-environment-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.poseidon-utc-clock {
    padding: 4px 10px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: var(--poseidon-radius-chip);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-weight: 500;
    white-space: nowrap;
}

/* The account menu button is a pill, like the clock. */
.poseidon-account-menu .mud-button-root {
    border-radius: var(--poseidon-radius-chip);
}

.poseidon-account-menu .mud-button-text {
    padding-right: 10px;
    padding-left: 10px;
    border: 1px solid var(--mud-palette-divider);
}

.poseidon-drawer {
    border-right: 1px solid var(--mud-palette-divider);
}

/* The overlay drawer (below 960 pixels) floats above the page. */
.poseidon-drawer.mud-drawer-temporary {
    border-right: 0;
    box-shadow: var(--poseidon-shadow-raised);
}

.poseidon-drawer__content {
    height: 100%;
}

/*
    Navigation selectors start with ".mud-navmenu.poseidon-nav": MudBlazor styles the links with
    ".mud-navmenu.mud-navmenu-default .mud-nav-link...", which would otherwise outrank these rules.
*/
.mud-navmenu.poseidon-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 8px;
}

.mud-navmenu.poseidon-nav .mud-nav-link {
    position: relative;
    min-height: 40px;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--poseidon-radius);
    white-space: nowrap;
    transition: background-color var(--poseidon-motion-fast) var(--poseidon-ease-out);
}

@media (hover: hover) {
    .mud-navmenu.poseidon-nav .mud-nav-link:hover:not(.active) {
        background-color: var(--poseidon-nav-hover-background);
    }
}

/* Current destination: tinted background, bold label and a 3-pixel indicator (not colour alone). */
.mud-navmenu.poseidon-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: var(--poseidon-nav-selected-background);
    color: var(--poseidon-nav-selected-text);
    font-weight: 600 !important;
}

.mud-navmenu.poseidon-nav .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--poseidon-nav-selected-indicator);
    animation: poseidon-fade-in var(--poseidon-motion-fast) var(--poseidon-ease-out);
}

.mud-navmenu.poseidon-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--poseidon-nav-selected-text);
}

/*
    Page content enters with a short fade and a 4-pixel rise. It fills the width beside the drawer with one gutter on each
    side, so the gap to the drawer stays the same whether the drawer is expanded or a rail.
*/
.poseidon-content {
    padding: var(--poseidon-gutter);
    animation: poseidon-content-enter var(--poseidon-motion-standard) var(--poseidon-ease-out);
}

@keyframes poseidon-content-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

@keyframes poseidon-fade-in {
    from {
        opacity: 0;
    }
}

/* Prerendered page before the breakpoint is known: below 960 pixels no drawer shows, so the content is not squeezed. */
@media (max-width: 959.98px) {
    .poseidon-layout--pending .poseidon-drawer {
        display: none !important;
    }

    .poseidon-layout--pending .mud-main-content {
        margin-left: 0 !important;
    }
}

/* Page header: the title and its action. */
.poseidon-page-header .mud-typography-h1 {
    letter-spacing: -0.01em;
}

/* The title with an optional back button before it, the button centred on the title line. */
.poseidon-page-header__heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.poseidon-page-header__back {
    flex: none;
    margin-top: 4px;
}

/* Phones: smaller gutters and title; the product name and the clock give way to the page. */
@media (max-width: 599.98px) {
    :root {
        --poseidon-gutter: var(--poseidon-gutter-compact);
    }

    .poseidon-app-bar .mud-toolbar {
        gap: 8px;
        padding-right: 8px;
        padding-left: 12px;
    }

    /* Hidden visually only: it stays the link's accessible name. */
    .poseidon-brand__name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .poseidon-utc-clock {
        display: none;
    }

    .poseidon-page-header .mud-typography-h1 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .poseidon-page-header__action,
    .poseidon-page-header__action .mud-button-root {
        width: 100%;
    }
}

/* ---- Page states (EmptyState, ErrorState, LoadingState) ---------------------------------------------------------- */

.poseidon-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: var(--poseidon-gutter);
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-card);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--poseidon-shadow-card);
}

/* The icon sits in a soft tinted circle. */
.poseidon-state__icon {
    box-sizing: content-box;
    padding: 10px;
    border-radius: 50%;
    background-color: var(--poseidon-nav-hover-background);
    color: var(--mud-palette-text-secondary);
}

/* Inside a grid, the grid is the card. */
.poseidon-grid .poseidon-state {
    border: 0;
    box-shadow: none;
}

.poseidon-loading {
    position: relative;
}

/* Alert colour pairs from the style guide (MudBlazor derives its own from the palette). */
.mud-alert-text-success { color: var(--poseidon-alert-success-text); background-color: var(--poseidon-alert-success-background); }
.mud-alert-text-warning { color: var(--poseidon-alert-warning-text); background-color: var(--poseidon-alert-warning-background); }
.mud-alert-text-error { color: var(--poseidon-alert-error-text); background-color: var(--poseidon-alert-error-background); }
.mud-alert-text-info { color: var(--poseidon-alert-info-text); background-color: var(--poseidon-alert-info-background); }

/* ---- Reconnect status card (ReconnectBar, driven by js/reconnect.js) --------------------------------------------- */

/*
    A floating card centred under the app bar; the page behind stays readable and usable. Each state has its own accent
    from the alert pairs (reconnecting: info; can't reach: warning; back online: success) and its own running loader:
    a spinning ring and dots, a radar pulse with a countdown bar, or a check that pops in.
*/
.poseidon-reconnect {
    --poseidon-reconnect-accent: var(--poseidon-alert-info-text);
    --poseidon-reconnect-tint: var(--poseidon-alert-info-background);
    display: none;
    position: fixed;
    top: calc(var(--poseidon-app-bar-height) + 12px);
    right: 0;
    left: 0;
    z-index: calc(var(--mud-zindex-appbar) - 1);
    justify-content: center;
    padding: 0 var(--poseidon-gutter-compact);
    pointer-events: none;
}

/*
    MudBlazor styles "#components-reconnect-modal" for Blazor's default dialog (page-coloured background at z-index
    9999, and uppercase buttons with 40-pixel margins); this card is transparent around the card and keeps the theme's
    button style.
*/
#components-reconnect-modal.poseidon-reconnect {
    z-index: calc(var(--mud-zindex-appbar) - 1) !important;
    background-color: transparent !important;
}

#components-reconnect-modal .poseidon-reconnect__retry {
    margin: 0 !important;
    color: var(--mud-palette-primary-text);
    letter-spacing: normal;
    text-transform: none;
}

@media (hover: hover) and (pointer: fine) {
    #components-reconnect-modal .poseidon-reconnect__retry:hover {
        background-color: var(--mud-palette-primary-darken);
    }
}

.poseidon-reconnect.is-unreachable {
    --poseidon-reconnect-accent: var(--poseidon-alert-warning-text);
    --poseidon-reconnect-tint: var(--poseidon-alert-warning-background);
}

.poseidon-reconnect.is-restored {
    --poseidon-reconnect-accent: var(--poseidon-alert-success-text);
    --poseidon-reconnect-tint: var(--poseidon-alert-success-background);
}

.poseidon-reconnect.is-visible {
    display: flex;
}

.poseidon-reconnect__card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 600px;
    padding: 14px 16px 16px;
    overflow: hidden;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-card);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--poseidon-shadow-raised);
    color: var(--mud-palette-text-primary);
    pointer-events: auto;
    animation: poseidon-reconnect-enter var(--poseidon-motion-emphasised) var(--poseidon-ease-out);
}

.poseidon-reconnect.is-leaving .poseidon-reconnect__card {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    transition: opacity var(--poseidon-motion-standard-exit) var(--poseidon-ease-in),
        transform var(--poseidon-motion-standard-exit) var(--poseidon-ease-in);
}

/* The icon in a tinted circle, with the state's loader drawn around it. */
.poseidon-reconnect__icon {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--poseidon-reconnect-tint);
    color: var(--poseidon-reconnect-accent);
}

.poseidon-reconnect__icon::before,
.poseidon-reconnect__icon::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.poseidon-reconnect__glyph {
    display: none !important;
}

.poseidon-reconnect.is-reconnecting .poseidon-reconnect__glyph--reconnecting,
.poseidon-reconnect.is-unreachable .poseidon-reconnect__glyph--unreachable,
.poseidon-reconnect.is-restored .poseidon-reconnect__glyph--restored {
    display: inline-block !important;
}

/* Reconnecting: a ring spinning around the icon, which turns slowly the other way. */
.poseidon-reconnect.is-reconnecting .poseidon-reconnect__icon::before {
    inset: -4px;
    border: 2.5px solid transparent;
    border-top-color: var(--poseidon-reconnect-accent);
    border-right-color: var(--poseidon-reconnect-accent);
    animation: poseidon-spin 0.9s linear infinite;
}

.poseidon-reconnect.is-reconnecting .poseidon-reconnect__glyph--reconnecting {
    animation: poseidon-spin 2.4s linear infinite reverse;
}

/* Can't reach the Hub: radar pulses spreading from the icon. */
.poseidon-reconnect.is-unreachable .poseidon-reconnect__icon::before,
.poseidon-reconnect.is-unreachable .poseidon-reconnect__icon::after {
    inset: 0;
    border: 2px solid var(--poseidon-reconnect-accent);
    opacity: 0;
    animation: poseidon-radar 2s var(--poseidon-ease-out) infinite;
}

.poseidon-reconnect.is-unreachable .poseidon-reconnect__icon::after {
    animation-delay: 1s;
}

/* Checking now: the ring spins again while the request is out. */
.poseidon-reconnect.is-checking .poseidon-reconnect__icon::before {
    inset: -4px;
    border: 2.5px solid transparent;
    border-top-color: var(--poseidon-reconnect-accent);
    opacity: 1;
    animation: poseidon-spin 0.8s linear infinite;
}

.poseidon-reconnect.is-checking .poseidon-reconnect__icon::after {
    display: none;
}

/* Back online: the check pops in. */
.poseidon-reconnect.is-restored .poseidon-reconnect__glyph--restored {
    animation: poseidon-pop var(--poseidon-motion-emphasised) var(--poseidon-ease-out);
}

.poseidon-reconnect__text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.poseidon-reconnect__title {
    font-size: 0.9375rem;
    line-height: 1.375rem;
    font-weight: 600;
}

/* Animated dots after "Reconnecting to the Hub". */
.poseidon-reconnect.is-reconnecting .poseidon-reconnect__title::after {
    content: "";
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: poseidon-dots 1.2s steps(4, end) infinite;
}

.poseidon-reconnect__detail {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.poseidon-reconnect__actions {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.poseidon-reconnect.is-unreachable .poseidon-reconnect__actions {
    display: flex;
}

.poseidon-reconnect__countdown {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

.poseidon-reconnect__retry {
    white-space: nowrap;
}

/* "Reload page": a quiet text link, shown only after repeated failed checks. */
#components-reconnect-modal .poseidon-reconnect__reload {
    display: none;
    min-width: 0;
    margin: 0 !important;
    padding: 2px 4px;
    border: 0;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    letter-spacing: normal;
    text-decoration: underline;
    text-transform: none;
    text-underline-offset: 2px;
    white-space: nowrap;
    cursor: pointer;
    animation: poseidon-fade-in var(--poseidon-motion-standard) var(--poseidon-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    #components-reconnect-modal .poseidon-reconnect__reload:hover {
        background: none;
        color: var(--mud-palette-text-primary);
    }
}

/* With the id, like the rule that hides it. */
#components-reconnect-modal.is-unreachable.is-stuck .poseidon-reconnect__reload {
    display: inline-block;
}

/* The line along the bottom: a sliding segment while reconnecting or checking, a draining bar until the next check. */
.poseidon-reconnect__progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    background-color: var(--poseidon-reconnect-tint);
}

.poseidon-reconnect__progress-bar {
    position: absolute;
    inset: 0;
    background-color: var(--poseidon-reconnect-accent);
    transform-origin: left center;
}

.poseidon-reconnect.is-reconnecting .poseidon-reconnect__progress-bar,
.poseidon-reconnect.is-checking .poseidon-reconnect__progress-bar {
    width: 40%;
    animation: poseidon-progress-slide 1.4s ease-in-out infinite;
}

.poseidon-reconnect.is-unreachable.is-counting:not(.is-checking) .poseidon-reconnect__progress-bar {
    animation: poseidon-progress-drain var(--poseidon-reconnect-countdown, 5s) linear forwards;
}

.poseidon-reconnect.is-restored .poseidon-reconnect__progress-bar {
    animation: poseidon-fade-in var(--poseidon-motion-standard) var(--poseidon-ease-out);
}

/* Phones: the actions move under the text. */
@media (max-width: 599.98px) {
    .poseidon-reconnect__card {
        grid-template-columns: auto 1fr;
    }

    /* The countdown on its own line, then the button and the reload link side by side. */
    .poseidon-reconnect__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px 16px;
    }

    .poseidon-reconnect__countdown {
        flex-basis: 100%;
    }
}

@keyframes poseidon-reconnect-enter {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.98);
    }
}

@keyframes poseidon-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes poseidon-radar {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

@keyframes poseidon-pop {
    0% {
        transform: scale(0.4);
    }

    70% {
        transform: scale(1.15);
    }
}

@keyframes poseidon-dots {
    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }
}

@keyframes poseidon-progress-slide {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

@keyframes poseidon-progress-drain {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ---- Account pages (sign-in, error) ------------------------------------------------------------------------------- */

.poseidon-account-page {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: var(--poseidon-gutter);
}

.poseidon-account-card {
    width: 100%;
    max-width: 440px;
    padding: 40px;
    border-color: var(--poseidon-card-border) !important;
    border-radius: var(--poseidon-radius-card) !important;
    box-shadow: var(--poseidon-shadow-raised);
    animation: poseidon-content-enter var(--poseidon-motion-emphasised) var(--poseidon-ease-out);
}

/*
    Animated backdrop (decorative, behind the card): drifting brand-colour glows, rolling waves and a faint dot grid.
    Only transforms animate, slowly; everything is static under reduced motion (see the end of this file).
*/
.poseidon-account-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--mud-palette-background);
    background-image: var(--poseidon-account-backdrop);
}

.poseidon-account-backdrop__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--poseidon-backdrop-dots) 1px, transparent 1.5px);
    background-size: 24px 24px;
    /* A mask uses only alpha: the grid fades out towards the edges. */
    mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}

.poseidon-account-backdrop__glow {
    position: absolute;
    width: 46vmax;
    height: 46vmax;
    border-radius: 50%;
    will-change: transform;
}

.poseidon-account-backdrop__glow--ocean {
    top: -14vmax;
    left: -10vmax;
    background: radial-gradient(circle, var(--poseidon-backdrop-glow-1) 0%, transparent 65%);
    animation: poseidon-glow-drift-1 26s ease-in-out infinite alternate;
}

.poseidon-account-backdrop__glow--teal {
    right: -14vmax;
    bottom: -16vmax;
    background: radial-gradient(circle, var(--poseidon-backdrop-glow-2) 0%, transparent 65%);
    animation: poseidon-glow-drift-2 32s ease-in-out infinite alternate;
}

.poseidon-account-backdrop__glow--gold {
    top: 18%;
    right: 8%;
    width: 30vmax;
    height: 30vmax;
    background: radial-gradient(circle, var(--poseidon-backdrop-glow-3) 0%, transparent 65%);
    animation: poseidon-glow-drift-3 22s ease-in-out infinite alternate;
}

.poseidon-account-backdrop__waves {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 34vh;
    min-height: 160px;
}

/* Each path is two tiles wide; moving it by one tile (1440 units) loops seamlessly. */
.poseidon-account-backdrop__wave {
    will-change: transform;
    animation: poseidon-wave-roll 24s linear infinite;
}

.poseidon-account-backdrop__wave--back {
    fill: var(--poseidon-backdrop-wave-3);
    animation-duration: 38s;
}

.poseidon-account-backdrop__wave--middle {
    fill: var(--poseidon-backdrop-wave-2);
    animation-duration: 30s;
    animation-delay: -12s;
}

.poseidon-account-backdrop__wave--front {
    fill: var(--poseidon-backdrop-wave-1);
    animation-duration: 22s;
    animation-delay: -5s;
}

@keyframes poseidon-wave-roll {
    to {
        transform: translateX(-1440px);
    }
}

@keyframes poseidon-glow-drift-1 {
    to {
        transform: translate3d(12vmax, 8vmax, 0) scale(1.15);
    }
}

@keyframes poseidon-glow-drift-2 {
    to {
        transform: translate3d(-10vmax, -9vmax, 0) scale(1.1);
    }
}

@keyframes poseidon-glow-drift-3 {
    to {
        transform: translate3d(-14vmax, 10vmax, 0) scale(0.9);
    }
}

/* Logo, product name, title and description, centred above the form. */
.poseidon-account-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.poseidon-account-card__header .poseidon-logo {
    margin-bottom: 12px;
}

.poseidon-account-card__product {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

@media (max-width: 599.98px) {
    .poseidon-account-card {
        padding: 24px;
    }
}

.poseidon-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.poseidon-field__label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    font-weight: 500;
}

.poseidon-field__control {
    position: relative;
    display: flex;
}

.poseidon-field__input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--poseidon-radius);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
}

/* Focus: a 2-pixel border in the ring colour, matching MudBlazor's outlined fields. */
.poseidon-field__input:focus-visible {
    border-color: var(--poseidon-focus-ring);
    box-shadow: inset 0 0 0 1px var(--poseidon-focus-ring);
}

.poseidon-field__input[readonly] {
    border-color: var(--mud-palette-divider);
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
}

.poseidon-field__input[aria-invalid="true"] {
    border-color: var(--mud-palette-error);
}

.poseidon-field__control .poseidon-field__input {
    padding-right: 48px;
}

.poseidon-field__toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--poseidon-radius);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transform: translateY(-50%);
}

.poseidon-sign-in-progress {
    display: none !important;
}

.poseidon-sign-in-submitting .poseidon-sign-in-progress {
    display: inline-flex !important;
}

/* ---- Data grids, cards and detail pages ------------------------------------------------------------------------- */

.poseidon-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.poseidon-filter-bar__search {
    flex: 1 1 320px;
    max-width: 480px;
}

.poseidon-filter-bar__status {
    flex: 0 1 220px;
}

@media (max-width: 599.98px) {
    .poseidon-filter-bar__search,
    .poseidon-filter-bar__status {
        flex: 1 1 100%;
        max-width: none;
    }
}

/* Grids sit in a card: rounded, soft shadow, tinted header. Narrow screens scroll the grid sideways, never the page. */
.poseidon-grid.mud-paper-outlined {
    overflow: hidden;
    border-color: var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-card);
    box-shadow: var(--poseidon-shadow-card);
}

.poseidon-grid .mud-table-container {
    overflow-x: auto;
}

.poseidon-grid .mud-table-head .mud-table-cell {
    background-color: var(--poseidon-table-header-background);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Every grid's header row has the same height, whether or not its columns have sort buttons. */
.poseidon-grid thead tr {
    height: var(--poseidon-grid-header-height, 44px);
}

/* 44-pixel rows: dense enough to scan, large enough to click. */
.poseidon-grid .mud-table-body .mud-table-row {
    height: var(--poseidon-grid-row-height);
    cursor: pointer;
}

.poseidon-grid .mud-table-cell {
    padding-top: 0;
    padding-bottom: 0;
}

/* A row that was just created or saved: a brief tint that fades out (opacity only). */
.poseidon-grid .mud-table-row.poseidon-row-saved > td {
    position: relative;
}

.poseidon-grid .mud-table-row.poseidon-row-saved > td::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--poseidon-row-saved-background);
    opacity: 0;
    animation: poseidon-row-saved var(--poseidon-motion-saved-highlight) var(--poseidon-ease-in);
}

.poseidon-grid .mud-table-row.poseidon-row-saved > td > * {
    position: relative;
    z-index: 1;
}

@keyframes poseidon-row-saved {
    from {
        opacity: 1;
    }
}

/* Pager: the labelled rows-per-page select (GridPager) beside MudDataGridPager's navigation. */
.poseidon-grid-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 0 8px;
}

/* MudBlazor's input control sizes itself to the full width, so the width is fixed here. */
.poseidon-grid-pager .poseidon-grid-pager__size {
    flex: 0 0 120px;
    width: 120px;
    max-width: 120px;
}

.poseidon-grid-pager .mud-table-pagination {
    flex: 0 1 auto;
}

/* Breadcrumbs (PageHeader): ancestors are links; the current page is plain text in the secondary colour. */
.poseidon-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.poseidon-breadcrumbs [aria-current="page"],
.poseidon-breadcrumbs__separator {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.poseidon-status-chip {
    margin: 0;
}

.poseidon-card {
    padding: var(--poseidon-card-padding);
    border-color: var(--poseidon-card-border) !important;
    border-radius: var(--poseidon-radius-card);
    box-shadow: var(--poseidon-shadow-card);
}

.poseidon-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    margin: 0;
}

.poseidon-facts dt {
    color: var(--mud-palette-text-secondary);
}

.poseidon-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Phones: each label above its value. */
@media (max-width: 599.98px) {
    .poseidon-facts {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .poseidon-facts dd + dt {
        margin-top: 10px;
    }
}

/* Application detail: the settings card across the page, then the key and its revocation side by side at the same
   height (stacked on narrow screens). The page fits a laptop window without scrolling. */
.poseidon-application-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--poseidon-gutter);
}

.poseidon-application-detail__key {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: var(--poseidon-gutter);
    align-items: stretch;
}

/* The application's status, created time and identifier sit on one line under its name. */
.poseidon-application-meta .poseidon-status-chip {
    margin: 0;
}

/* Three settings sections in a row, divided by lines (stacked below 960 pixels, as two-column settings are). Two
   classes, so this wins over the two-column rule that comes later in this file. */
@media (min-width: 960px) {
    .poseidon-settings-columns.poseidon-settings-columns--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* A section icon in the error colours, for a danger section's heading. */
.poseidon-settings-section__icon--danger {
    background-color: var(--poseidon-outcome-hub-error-background);
    color: var(--poseidon-outcome-hub-error-text);
}

/* Danger actions sit in their own section at the bottom, marked with the error colour. */
.poseidon-danger-zone {
    padding: var(--poseidon-card-padding);
    border: 1px solid var(--mud-palette-error);
    border-radius: var(--poseidon-radius-card);
    background-color: var(--mud-palette-surface);
}

/* Dialogs match the cards. */
.mud-dialog {
    border-radius: var(--poseidon-radius-card);
}

/* ---- Key reveal ------------------------------------------------------------------------------------------------- */

.poseidon-key-reveal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.poseidon-key-reveal__value {
    flex: 1 1 auto;
    padding: 8px 12px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius);
    background-color: var(--mud-palette-background);
    overflow-wrap: anywhere;
    user-select: all;
}

/* ---- Settings (SettingField, endpoint settings) ------------------------------------------------------------------ */

.poseidon-setting {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 480px;
}

.poseidon-setting__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 1.25rem;
}

.poseidon-setting__label {
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

/* "Unsaved": text plus a dot, so the state is not shown by colour alone. */
.poseidon-setting__unsaved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
}

.poseidon-setting__unsaved::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mud-palette-warning);
}

.poseidon-setting__duration {
    display: flex;
    gap: 8px;
}

.poseidon-setting__amount {
    flex: 1 1 auto;
    min-width: 0;
}

.poseidon-setting__unit {
    flex: 0 0 auto;
    width: auto;
    min-width: 120px;
}

/* Integer, text and read-only fields: one 44-pixel control, with the unit (for example "per minute") after it. */
.poseidon-setting__single {
    display: flex;
    align-items: center;
    gap: 8px;
}

.poseidon-setting__suffix {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

/* A grid value with its marker beside it (endpoint settings list). */
.poseidon-grid-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* A second, smaller line under a grid value (the past-range freshness under the freshness). */
.poseidon-grid-subvalue {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

/* "Documented default" / "Hub default": shown beside the label while the value is the default. */
.poseidon-setting__default.poseidon-pill {
    padding: 0 8px;
    font-size: 0.6875rem;
    line-height: 1rem;
}

/* ---- Usage reports ---------------------------------------------------------------------------------------------- */

/* Period bar: the controls, then the resolved UTC range in small text. Beside a page title it lines up on the right;
   when the header wraps (narrow screens) it lines up on the left under the title. */
.poseidon-period-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.poseidon-period {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
}

.poseidon-period__preset {
    flex: 0 0 170px;
    width: 170px;
}

.poseidon-period__time {
    flex: 0 0 205px;
    width: 205px;
}

/* As tall as the dense outlined fields beside it, and level with them. */
.poseidon-period__apply.mud-button-root {
    height: 40px;
    margin-top: 6px;
}

/* The error under a custom range field, aligned with the field's text as MudBlazor's helper text is. */
.poseidon-period__error {
    display: block;
    margin-top: 4px;
    padding: 0 14px;
}

.poseidon-period__range {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    text-align: right;
}

@media (max-width: 959.98px) {
    .poseidon-period-bar {
        align-items: flex-start;
    }

    .poseidon-period {
        justify-content: flex-start;
    }

    .poseidon-period__range {
        text-align: left;
    }
}

@media (max-width: 599.98px) {
    .poseidon-period-bar,
    .poseidon-period,
    .poseidon-period__preset,
    .poseidon-period__time {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Totals: one slim strip. Provider calls comes first with the accent; the other figures follow, divided by hairlines
   (the 1-pixel gaps show the border colour behind them, so the lines stay right however the strip wraps), and the
   estimated credits come last. One row on wide screens, rows of four on medium ones (credits on a row of their own),
   rows of two on phones. */
.poseidon-kpis {
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-card);
    box-shadow: var(--poseidon-shadow-card);
}

.poseidon-kpis__list {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(6, minmax(0, 1fr)) minmax(0, 1.8fr);
    gap: 1px;
    margin: 0;
    background-color: var(--poseidon-card-border);
}

.poseidon-kpi {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 12px 18px;
    background-color: var(--mud-palette-surface);
}

.poseidon-kpi dt {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.poseidon-kpi dd {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.poseidon-kpi--primary {
    background-color: var(--poseidon-nav-selected-background);
    box-shadow: inset 3px 0 0 var(--poseidon-nav-selected-indicator);
}

.poseidon-kpi--primary dt {
    color: var(--poseidon-nav-selected-text);
}

/* Highlighted by its background, bar and colours, in the same sizes as the other figures so every card lines up. */
.poseidon-kpi--primary dd {
    color: var(--poseidon-nav-selected-text);
}

@media (max-width: 1199.98px) {
    .poseidon-kpis__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .poseidon-kpi--primary {
        grid-column: span 2;
    }

    .poseidon-kpi--credits {
        grid-column: 1 / -1;
    }
}

@media (max-width: 599.98px) {
    .poseidon-kpis__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .poseidon-kpi {
        padding: 10px 14px;
    }
}

/* The credits figure: the value with its chips, which wrap under it when the strip is narrow. */
.poseidon-kpi--credits dd .poseidon-credits {
    justify-content: flex-start;
}

.poseidon-usage-footnote {
    margin: 0;
    padding: 8px 18px;
    border-top: 1px solid var(--poseidon-card-border);
    background-color: var(--mud-palette-surface);
}

/* Reuse figures: the split into store and combined reuse is in a tooltip; the dotted line says there is more. */
.poseidon-reuse {
    border-bottom: 1px dotted var(--mud-palette-text-secondary);
    cursor: help;
}

.poseidon-reuse:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--poseidon-focus-ring);
    outline-offset: 2px;
}

/* Usage content arrives with the portal's short fade and rise, instead of appearing all at once. */
.poseidon-usage-content {
    animation: poseidon-content-enter var(--poseidon-motion-standard) var(--poseidon-ease-out);
}

/* Loading skeleton in the final layout: totals strip, section title, rows. */
.poseidon-usage-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poseidon-usage-skeleton .poseidon-usage-skeleton__kpis {
    margin-bottom: 16px;
    border-radius: var(--poseidon-radius-card);
}

/* A titled block of the page: the title and its count on the left, a note on the right. */
.poseidon-usage-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.poseidon-usage-section__heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.poseidon-usage-section__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.poseidon-count {
    padding: 2px 10px;
    border-radius: 999px;
    background-color: var(--poseidon-nav-selected-background);
    color: var(--poseidon-nav-selected-text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}

.poseidon-usage-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.poseidon-usage-note .mud-icon-root {
    flex: none;
}

/* The note and the application filter, on the right of the section title. */
.poseidon-usage-section__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 20px;
}

.poseidon-usage-filter {
    flex: 0 0 260px;
    width: 260px;
}

@media (max-width: 599.98px) {
    .poseidon-usage-section__tools,
    .poseidon-usage-filter {
        flex: 1 1 100%;
        width: 100%;
    }

    .poseidon-usage-section__tools {
        justify-content: flex-start;
    }
}

/* From tablet width up, the usage page fills the window exactly and the grid takes whatever height is left below the
   totals, scrolling inside its card (header fixed), as on the Applications page: a long list never scrolls the whole
   page, and the pager stays at the bottom of the window. The heights come from the layout itself, so they stay right
   however the totals strip wraps. Only a very short window, where the rows would get under 240 pixels, scrolls the
   page. */
@media (min-width: 960px) {
    .poseidon-content:has(> .poseidon-usage-content) {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - var(--mud-appbar-height));
    }

    .poseidon-content > .poseidon-usage-content,
    .poseidon-usage-content > .poseidon-usage-section,
    .poseidon-usage-section > .poseidon-usage-grid {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .poseidon-usage-content > .poseidon-kpis,
    .poseidon-usage-section > .poseidon-usage-section__header,
    .poseidon-usage-grid > .mud-table-pagination {
        flex: none;
    }

    /* Relative, so absolutely positioned text inside the rows (the screen-reader text of reuse) scrolls with them
       instead of stretching the page. */
    .poseidon-usage-grid > .mud-table-container {
        position: relative;
        flex: 1 1 0;
        min-height: 240px;
        overflow-y: auto;
    }
}

/* Usage grids: the first column holds the name or day on one line and takes the spare width; figures stay compact.
   Narrow screens scroll the grid sideways, as on the other grids. */
.poseidon-usage-grid .mud-table-body .mud-table-cell:first-child,
.poseidon-usage-grid .mud-table-head .mud-table-cell:first-child {
    width: 100%;
    white-space: nowrap;
}

/* The wide first column would push its sort arrow to the far right, so the label is only as wide as its text. */
.poseidon-usage-grid th:first-child .column-header {
    justify-content: flex-start;
}

.poseidon-usage-grid th:first-child .column-header .sortable-column-header {
    width: auto;
}

.poseidon-usage-grid__name {
    font-weight: 500;
}

/* The application's name with its "Over threshold" chip beside it. */
.poseidon-usage-grid__application {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* A usage row (an application, or a day of its daily breakdown) over the daily high-usage threshold: a left accent bar
   in the warning colour. The chip carries the meaning. */
.poseidon-usage-grid .mud-table-row.poseidon-usage-row--over-threshold > td:first-child {
    box-shadow: inset 4px 0 0 var(--mud-palette-warning);
}

/* The application usage detail's highlight: the chip and what it means. */
.poseidon-usage-highlight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* Provider calls, the reliable usage measure, stands out in each row as it does in the totals. */
.poseidon-grid .mud-table-cell.poseidon-number--primary {
    font-weight: 600;
}

/* A row's share of the period's provider calls: a small bar before the number. The number is as wide as the largest
   one in the column (set by the grid), so the bars of every row start and end at the same place and sit close to
   their numbers. */
.poseidon-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.poseidon-share__value {
    text-align: right;
}

.poseidon-share__track {
    flex: none;
    width: 56px;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--poseidon-card-border);
}

.poseidon-share__bar {
    display: block;
    height: 100%;
    border-radius: 3px;
    background-color: var(--poseidon-nav-selected-indicator);
}

/* Numbers right-aligned in tabular figures (every digit the same width), so the digits line up. */
.poseidon-grid .mud-table-cell.poseidon-number {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* The sort button goes before the label, so the label lines up with the numbers below it. */
.poseidon-grid th.poseidon-number .column-header {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* MudBlazor gives the label the full cell width, which would push the arrow to the far left. */
.poseidon-grid th.poseidon-number .column-header .sortable-column-header {
    width: auto;
}

/* A zero is shown, but quietly, so the rows and days with traffic stand out. */
.poseidon-zero {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

/* Grids whose rows do not open anything. */
.poseidon-grid--static .mud-table-body .mud-table-row {
    cursor: default;
}

.poseidon-field__input:disabled {
    border-color: var(--mud-palette-divider);
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    cursor: not-allowed;
}

.poseidon-setting__value,
.poseidon-setting__helper {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.poseidon-setting__error {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin: 0;
    color: var(--mud-palette-error);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/* The reset link and any second link, left-aligned in both layouts: the flex column (duration) and the grid (switch).
   The text buttons' own padding is pulled back so the first link lines up with the field. */
.poseidon-setting__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-self: flex-start;
    justify-self: start;
    margin-left: -8px;
}

/* A text-button link on its own, outside a setting's actions. */
.poseidon-setting__reset {
    align-self: flex-start;
    justify-self: start;
    margin-left: -8px !important;
}

.poseidon-setting__actions .poseidon-setting__reset {
    margin-left: 0 !important;
}

/* Two lines per endpoint in the grid: the identifier (monospace) above its friendly name. */
.poseidon-endpoint-name {
    display: flex;
    flex-direction: column;
}

.poseidon-endpoint-name__link {
    align-self: flex-start;
}

.poseidon-endpoint-name__summary {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/*
    Native select (duration unit): the browser's arrow sits against the right edge and differs per browser, so it is
    replaced by one chevron, 12 pixels from the edge, drawn in the secondary text colour (a mask, so it follows the theme).
*/
.poseidon-select {
    position: relative;
    display: inline-flex;
}

.poseidon-select__control {
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.poseidon-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 20px;
    height: 20px;
    background-color: var(--mud-palette-text-secondary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    transform: translateY(-50%);
}

.poseidon-select:has(.poseidon-select__control:disabled)::after {
    background-color: var(--mud-palette-text-disabled);
}

.poseidon-select:has(.poseidon-select__control:disabled) .poseidon-select__control {
    cursor: not-allowed;
}

.poseidon-select .poseidon-select__control {
    width: 100%;
}

/* Disabled with a reason: read-only and still focusable (SettingField), shown like a disabled field. */
.poseidon-field__input[aria-disabled="true"] {
    border-color: var(--mud-palette-divider);
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    cursor: not-allowed;
}

/* Switch settings: one full-width row, the label on the left and the switch on the right. */
.poseidon-setting--switch {
    max-width: none;
}

/* A reason not shown now keeps its space (SettingField ReservedReason). */
.poseidon-setting__reserved {
    visibility: hidden;
}

/* MudSwitch puts Class on its outer control; the label with the track inside it is laid out row-reverse (label first). */
.poseidon-setting__switch .mud-switch {
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 4px 0 12px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--poseidon-radius);
    background-color: var(--mud-palette-surface);
}

/* The state in words, sized like the value in a text field. */
.poseidon-setting__switch .mud-switch > .mud-typography {
    color: var(--mud-palette-text-primary);
    font-size: 0.9375rem;
}

.poseidon-setting.is-disabled .poseidon-setting__switch .mud-switch {
    border-color: var(--mud-palette-divider);
    background-color: var(--mud-palette-background);
}



/*
    MudSwitch's checkbox is transparent, so the focus ring drawn on it would be invisible: it is drawn around the visible
    track instead, as a pill.
*/
.mud-switch-input:focus-visible {
    outline: none !important;
}

.mud-switch-span:has(.mud-switch-input:focus-visible) {
    border-radius: var(--poseidon-radius-chip);
    outline: 2px solid var(--poseidon-focus-ring);
    outline-offset: 2px;
}

/* ---- Endpoint detail ------------------------------------------------------------------------------------------- */

/* One line under the title: the route applications call and when the settings last changed. */
.poseidon-endpoint-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.poseidon-endpoint-meta__route {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-chip);
    background-color: var(--mud-palette-surface);
    overflow-wrap: anywhere;
}

.poseidon-endpoint-meta__updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.poseidon-method-badge {
    padding: 2px 10px;
    border-radius: var(--poseidon-radius-chip);
    background-color: var(--poseidon-nav-selected-background);
    color: var(--poseidon-nav-selected-text);
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Status pills: the text always states the value, so the colour is never the only signal. */
.poseidon-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 1px 10px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-chip);
    background-color: var(--poseidon-table-header-background);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 600;
    white-space: nowrap;
}

.poseidon-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--mud-palette-text-disabled);
}

.poseidon-pill--pending {
    border-color: transparent;
    background-color: var(--poseidon-alert-warning-background);
    color: var(--poseidon-alert-warning-text);
}

.poseidon-pill--pending::before {
    background-color: var(--mud-palette-warning);
}

/* A credit estimate: the value, its "Estimated" chip and, when uncertain, an "Uncertain" chip. */
.poseidon-credits {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.poseidon-credits--none {
    color: var(--mud-palette-text-secondary);
}

.poseidon-credits__none {
    font-size: 0.75rem;
}

.poseidon-credits__value--partial {
    border-bottom: 1px dotted currentColor;
}

.poseidon-pill--estimate::before,
.poseidon-pill--unit::before {
    display: none;
}

.poseidon-pill--uncertain {
    border-color: transparent;
    background-color: var(--poseidon-alert-warning-background);
    color: var(--poseidon-alert-warning-text);
}

.poseidon-pill--uncertain::before {
    background-color: var(--mud-palette-warning);
}

/* Over the high-usage threshold: the warning pair with an icon in place of the dot; the text states the meaning. */
.poseidon-pill--over-threshold {
    gap: 4px;
    padding-left: 6px;
    border-color: transparent;
    background-color: var(--poseidon-alert-warning-background);
    color: var(--poseidon-alert-warning-text);
}

.poseidon-pill--over-threshold::before {
    display: none;
}

.poseidon-pill--over-threshold .mud-icon-root {
    font-size: 1rem;
}

.poseidon-pill--over-threshold[tabindex="0"]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.poseidon-credits [tabindex="0"]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.poseidon-settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.poseidon-settings-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* The two groups of settings side by side, divided by a line; stacked below 960 pixels. */
.poseidon-settings-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.poseidon-settings-columns > .poseidon-settings-section + .poseidon-settings-section {
    padding-left: 32px;
    border-left: 1px solid var(--poseidon-card-border);
}

@media (max-width: 959.98px) {
    .poseidon-settings-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .poseidon-settings-columns > .poseidon-settings-section + .poseidon-settings-section {
        padding-top: 20px;
        padding-left: 0;
        border-top: 1px solid var(--poseidon-card-border);
        border-left: 0;
    }
}

.poseidon-settings-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.poseidon-settings-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.poseidon-settings-section__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--poseidon-radius);
    background-color: var(--poseidon-nav-selected-background);
    color: var(--poseidon-nav-selected-text);
}

.poseidon-settings-section__title.mud-typography {
    font-size: 1rem;
    line-height: 1.5rem;
}

/* The fields fill their column. */
.poseidon-settings-section .poseidon-setting {
    max-width: none;
}

/* The 404 period depends on the switch above it: indented under it with a guide line, accented while it applies. */
.poseidon-settings-section__dependent {
    margin-left: 8px;
    padding-left: 16px;
    border-left: 2px solid var(--poseidon-card-border);
    transition: border-color var(--poseidon-motion-fast) var(--poseidon-ease-out);
}

.poseidon-settings-section__dependent.is-active {
    border-left-color: var(--mud-palette-primary);
}

/* The confirmed-limit fields: opened under their button, and take no space while closed. */
.poseidon-confirmed-edit {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.poseidon-confirmed-edit.is-closed {
    display: none;
}

.poseidon-settings-section__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* The endpoint detail tabs (Caching, Rate limit): a plain bar with a line under it, on the page background. */
.poseidon-settings-tabs .mud-tabs-tabbar {
    background-color: transparent;
    border-bottom: 1px solid var(--poseidon-card-border);
}

.poseidon-settings-tabs .mud-tab {
    min-height: 48px;
    padding-inline: 18px;
    text-transform: none;
    font-weight: 600;
}

/* "How requests are answered": a strip along the bottom of the card, three outcomes in a row. */
.poseidon-behaviour {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--poseidon-radius);
    background-color: var(--mud-palette-background);
}

.poseidon-behaviour__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.poseidon-behaviour__title.mud-typography {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.poseidon-behaviour__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.poseidon-behaviour__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.poseidon-behaviour__list .mud-icon-root {
    margin-top: 2px;
    color: var(--mud-palette-primary);
}

.poseidon-behaviour__label,
.poseidon-behaviour__value {
    display: block;
}

.poseidon-behaviour__label {
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.poseidon-behaviour__value {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/* Save bar: stays in view at the bottom of the screen while there are unsaved changes. */
.poseidon-action-bar {
    position: sticky;
    bottom: 16px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 12px 10px 20px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-card);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--poseidon-shadow-card);
    transition: box-shadow var(--poseidon-motion-fast) var(--poseidon-ease-out), border-color var(--poseidon-motion-fast) var(--poseidon-ease-out);
}

.poseidon-action-bar.is-dirty {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--poseidon-shadow-raised);
}

.poseidon-action-bar__status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.poseidon-action-bar__status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--mud-palette-success);
}

.poseidon-action-bar.is-dirty .poseidon-action-bar__status {
    color: var(--mud-palette-text-primary);
}

.poseidon-action-bar.is-dirty .poseidon-action-bar__status::before {
    background-color: var(--mud-palette-warning);
}

.poseidon-action-bar__note {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
}

.poseidon-action-bar__note::before {
    content: "·";
    margin-right: 8px;
}

.poseidon-action-bar__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A save problem: a row of its own across the top of the save bar. */
.poseidon-action-bar__message.mud-alert {
    flex: 1 0 100%;
    margin: 0 0 0 -8px;
    padding: 6px 12px;
    border-radius: var(--poseidon-radius);
}

/* A successful save, in place of the status: a check instead of the dot. */
.poseidon-action-bar__status.is-saved {
    color: var(--mud-palette-text-primary);
}

.poseidon-action-bar__status.is-saved::before {
    content: none;
}

.poseidon-action-bar__status.is-saved .mud-icon-root {
    color: var(--mud-palette-success);
}

.poseidon-action-bar__status.is-saved:focus-visible {
    outline: 2px solid var(--poseidon-focus-ring);
    outline-offset: 2px;
}

/* ---- Endpoint detail layout ------------------------------------------------------------------------------------- */

/*
    The route line above the tabs; from 1440 pixels it sits on the right of the tab row instead, and each card shows
    what its settings mean in a summary panel on its right. Together these keep the page within a laptop window.
*/
.poseidon-endpoint-detail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/*
    All three tabs take the height of the tallest: the panels share one grid cell and the hidden ones keep their space
    (hidden from view, the keyboard and screen readers). Switching tabs then moves nothing, and the save bar stays in
    the same place under the cards.
*/
.poseidon-endpoint-detail .poseidon-settings-tabs .mud-tabs-panels {
    display: grid;
}

.poseidon-endpoint-detail .poseidon-settings-tabs .mud-tabs-panels > .mud-tab-panel {
    display: block;
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
}

.poseidon-endpoint-detail .poseidon-settings-tabs .mud-tabs-panels > .mud-tab-panel.mud-tab-panel-active {
    display: block;
    visibility: visible;
}

.poseidon-endpoint-detail .poseidon-settings-tabs .mud-tabs-panels > .mud-tab-panel > .poseidon-settings-card {
    height: 100%;
}

/* Each tab: its icon, its name and, while it has unsaved changes, a dot. */
.poseidon-tab-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.poseidon-tab-label .mud-icon-root {
    font-size: 1.125rem;
}

.poseidon-tab-label__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--mud-palette-warning);
}

/* The settings with their summary: the summary is a panel of its own, its outcomes divided by lines. */
.poseidon-settings-card--summary .poseidon-behaviour {
    padding: 20px;
    border: 1px solid var(--poseidon-card-border);
}

.poseidon-settings-card--summary .poseidon-behaviour__list .mud-icon-root {
    box-sizing: content-box;
    flex: none;
    margin-top: 0;
    padding: 6px;
    border-radius: var(--poseidon-radius);
    background-color: var(--poseidon-nav-selected-background);
    color: var(--poseidon-nav-selected-text);
}

/* Two related fields (a switch and the value that depends on it, a limit and its wait): stacked, side by side from
   1440 pixels. */
.poseidon-settings-pair {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

@media (min-width: 1440px) {
    .poseidon-endpoint-detail {
        gap: 0;
    }

    .poseidon-settings-pair {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }

    /* The section with a pair of fields gets the larger share of the card. */
    .poseidon-settings-columns.poseidon-settings-columns--wide-first {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .poseidon-settings-columns.poseidon-settings-columns--wide-second {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .poseidon-endpoint-detail > .poseidon-endpoint-meta {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        height: 48px;
        flex-wrap: nowrap;
    }

    .poseidon-settings-card--summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
        gap: 24px;
        align-items: stretch;
    }

    /* A little narrower gaps between the settings columns, so their help text wraps less. */
    .poseidon-settings-card--summary .poseidon-settings-columns {
        gap: 24px;
    }

    .poseidon-settings-card--summary .poseidon-settings-columns > .poseidon-settings-section + .poseidon-settings-section {
        padding-left: 24px;
    }

    .poseidon-settings-card--summary .poseidon-behaviour {
        justify-content: flex-start;
    }

    .poseidon-settings-card--summary .poseidon-behaviour__list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .poseidon-settings-card--summary .poseidon-behaviour__list li {
        padding: 12px 0;
        border-top: 1px solid var(--poseidon-card-border);
    }

    .poseidon-settings-card--summary .poseidon-behaviour__list li:last-child {
        padding-bottom: 0;
    }
}

/* ---- Reduced motion: no transforms; remaining transitions opacity-only and 100 ms or less --------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    /*
        Reconnect card: fades in and out only; loaders stand still (a static ring, a full-width line, three dots) and
        the countdown is text only.
    */
    .poseidon-reconnect__card {
        animation: poseidon-reconnect-fade 100ms linear !important;
    }

    .poseidon-reconnect.is-leaving .poseidon-reconnect__card {
        transform: none;
        transition: opacity 100ms linear !important;
    }

    .poseidon-reconnect__icon::before,
    .poseidon-reconnect__icon::after,
    .poseidon-reconnect__glyph,
    .poseidon-reconnect__progress-bar {
        animation: none !important;
    }

    .poseidon-reconnect.is-unreachable .poseidon-reconnect__icon::before {
        opacity: 0.5;
    }

    .poseidon-reconnect__progress-bar {
        width: 100% !important;
        opacity: 0.6;
    }

    .poseidon-reconnect.is-reconnecting .poseidon-reconnect__title::after {
        content: "...";
        animation: none !important;
    }

    .poseidon-content,
    .poseidon-account-card {
        animation: poseidon-fade-in 100ms linear;
    }

    /* The sign-in backdrop stands still. */
    .poseidon-account-backdrop *,
    .poseidon-account-backdrop *::before {
        animation: none !important;
    }

    /* Skeleton shimmer static; MudBlazor ripple off. */
    .mud-skeleton,
    .mud-skeleton::after {
        animation: none !important;
    }

    .mud-ripple-effect {
        display: none !important;
    }

    /* Saved row: a tint without the fade, removed after the highlight duration. */
    .poseidon-grid .mud-table-row.poseidon-row-saved > td::before {
        opacity: 1;
        animation: none !important;
    }
}

@keyframes poseidon-reconnect-fade {
    from {
        opacity: 0;
    }
}

/* Price table: the version selector and its note above the entries; the editor's inputs, review and actions. */
.poseidon-price-table__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.poseidon-price-table__version {
    flex: 0 1 420px;
    min-width: 0;
}

.poseidon-price-table__unit {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.poseidon-price-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.poseidon-price-editor__table td {
    vertical-align: top;
}

.poseidon-price-editor__input {
    width: 140px;
    max-width: 100%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.poseidon-price-editor__review {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.poseidon-price-editor__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.poseidon-price-editor__hint {
    text-align: right;
}

/* The tables scroll inside their card on narrow screens instead of widening the page. */
.poseidon-price-editor__table,
.poseidon-price-table .mud-table-container {
    overflow-x: auto;
}

/* ---- Overview ---------------------------------------------------------------------------------------------------- */

/*
    The KPI row, then the chart column beside the side column (balance, then attention). Below 1280 px the side column
    moves under the chart. Every card holds its size while loading, so nothing shifts.
*/
.poseidon-overview {
    display: flex;
    flex-direction: column;
    gap: var(--poseidon-gutter);
}

/* The KPI row is one strip in the Usage page's sizes: cells divided by 1-pixel lines (the border colour behind the gaps). */
.poseidon-overview__kpis {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-card);
    background-color: var(--poseidon-card-border);
    box-shadow: var(--poseidon-shadow-card);
}

.poseidon-overview__main {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--poseidon-gutter);
}

.poseidon-overview__primary,
.poseidon-overview__side {
    display: flex;
    flex-direction: column;
    gap: var(--poseidon-gutter);
    min-width: 0;
}

@media (max-width: 1279.98px) {
    .poseidon-overview__main {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
    Wide screens: the chart and the side column share the height the window has left under the page header and the KPI
    strip, so the page does not scroll. The page is a column at least as tall as the window under the app bar, and the
    main row takes what remains (at least 340 px, at most 640 px), whatever height the header and the KPI strip have
    (their notes wrap at some widths). Only a window too short for 340 px scrolls. The chart fills its card, and the
    attention list scrolls inside its panel if it does not fit.
*/
@media (min-width: 1280px) {
    .poseidon-content:has(> .poseidon-overview) {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        min-height: calc(100dvh - var(--mud-appbar-height, 64px));
    }

    .poseidon-overview {
        flex: 1 0 auto;
    }

    .poseidon-overview__main {
        flex: 1 0 340px;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        /* Not the content's height (the chart's own height would push it to the maximum): the space left. */
        min-height: 0;
        max-height: 640px;
    }

    .poseidon-overview__primary,
    .poseidon-overview__side {
        min-height: 0;
    }

    .poseidon-overview__primary .poseidon-trend__chart {
        overflow: hidden;
    }

    .poseidon-overview__primary > .poseidon-overview-card,
    .poseidon-overview__side > .poseidon-attention {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .poseidon-overview__primary .poseidon-trend__body {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }

    .poseidon-attention__section:not([hidden]) {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    .poseidon-attention__scroll {
        flex: 0 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* Below 1280 px the four period totals share one row and the balance takes the row under them. */
@media (max-width: 1279.98px) {
    .poseidon-overview__kpis {
        grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
    }

    .poseidon-overview__kpis > .poseidon-balance {
        grid-column: 1 / -1;
    }
}

@media (max-width: 959.98px) {
    .poseidon-overview__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .poseidon-overview__kpis {
        grid-template-columns: minmax(0, 1fr);
    }
}

.poseidon-overview-card {
    min-width: 0;
    padding: var(--poseidon-card-padding);
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-card);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--poseidon-shadow-card);
}

.poseidon-overview-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 10px;
}

.poseidon-overview-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.poseidon-overview-card__subtitle {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.poseidon-overview-number {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/*
    Savings measurement: a slim strip under the trend chart, so the chart keeps most of the column. One row (icon and
    status, start and end, three figures pushed to the right) above the one-line note, and a thin progress line along
    the bottom edge. Before the start it is a single line. On narrow panels the row wraps: dates, then figures.
*/
.poseidon-overview__primary > .poseidon-measurement {
    flex: 0 0 auto;
}

.poseidon-measurement {
    position: relative;
    overflow: hidden;
    padding: 12px 18px 14px;
}

.poseidon-measurement--compact {
    padding-bottom: 12px;
}

.poseidon-measurement__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 28px;
}

.poseidon-measurement__lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.poseidon-measurement__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: var(--poseidon-alert-info-background);
    color: var(--poseidon-alert-info-text);
}

.poseidon-measurement__icon--complete {
    background-color: var(--poseidon-alert-success-background);
    color: var(--poseidon-alert-success-text);
}

.poseidon-measurement__heading {
    min-width: 0;
}

.poseidon-measurement__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.poseidon-measurement__status {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-variant-numeric: tabular-nums;
}

/* Start and end, stacked in two short lines. */
.poseidon-measurement__dates {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 8px;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.poseidon-measurement__dates dt {
    color: var(--mud-palette-text-secondary);
}

.poseidon-measurement__dates dd {
    margin: 0;
    white-space: nowrap;
}

/* The figures, label above value, at the right end of the row. */
.poseidon-measurement__figures {
    display: flex;
    gap: 0 28px;
    margin: 0 0 0 auto;
}

.poseidon-measurement__figure dt {
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.poseidon-measurement__figure dd {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
    font-variant-numeric: tabular-nums;
}

.poseidon-measurement__figure dd.poseidon-zero {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.poseidon-measurement__note {
    margin: 8px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.poseidon-measurement__progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--mud-palette-lines-default);
}

.poseidon-measurement__progress-bar {
    display: block;
    height: 100%;
    border-radius: 0 3px 3px 0;
    background-color: var(--mud-palette-primary);
    transition: width 400ms ease-out;
}

.poseidon-measurement:has(.poseidon-measurement__icon--complete) .poseidon-measurement__progress-bar {
    background-color: var(--mud-palette-success);
}

.poseidon-measurement__error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.8125rem;
}

.poseidon-measurement__trace {
    color: var(--mud-palette-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
    .poseidon-measurement__progress-bar {
        transition: none;
    }
}

@media (max-width: 599.98px) {
    .poseidon-measurement__figures {
        margin-left: 0;
    }
}

/*
    KPI card: one cell of a KPI strip, in the sizes of the Usage page's strip. The label is above a tabular figure, with
    optional comparison text below; the figure's line keeps its height in every state.
*/
.poseidon-kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 12px 18px;
    background-color: var(--mud-palette-surface);
}

.poseidon-kpi-card__label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.poseidon-kpi-card__value {
    display: flex;
    align-items: center;
    min-height: 1.875rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* A new value fades in: the element is recreated when the value changes. */
.poseidon-kpi-card__figure {
    animation: poseidon-fade-in var(--poseidon-motion-standard) var(--poseidon-ease-out);
}

.poseidon-kpi-card__skeleton {
    height: 1.5rem !important;
}

.poseidon-kpi-card__error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-error);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.poseidon-kpi-card__comparison {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.poseidon-kpi-card__comparison--hidden {
    visibility: hidden;
}

.poseidon-kpi-card--primary {
    background-color: var(--poseidon-nav-selected-background);
    box-shadow: inset 3px 0 0 var(--poseidon-nav-selected-indicator);
}

.poseidon-kpi-card--primary .poseidon-kpi-card__label {
    color: var(--poseidon-nav-selected-text);
}

.poseidon-kpi-card--primary .poseidon-kpi-card__value {
    color: var(--poseidon-nav-selected-text);
}

.poseidon-kpi-card--estimated .poseidon-credits {
    justify-content: flex-start;
}

/*
    Company balance: the last card of the Overview's KPI strip. A heading row with the Check now button, DataDocked's own
    figure (not an estimate) and the check time, each cut to the card's width, so the card never grows or overflows.
    The outcome of a check is a snackbar, never a change in the card.
*/
/* Positioned, so the hidden screen-reader text inside is clipped by the card and never widens the page. */
.poseidon-balance {
    position: relative;
}

.poseidon-balance__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    min-height: 1rem;
}

.poseidon-balance__head .poseidon-kpi-card__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poseidon-balance__check.mud-button-root {
    flex: 0 0 auto;
    gap: 4px;
    min-width: 0;
    margin: -4px -8px -4px 0;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.poseidon-balance__check .mud-button-label {
    gap: 4px;
}

.poseidon-balance__check .mud-icon-root,
.poseidon-balance__spinner.mud-progress-circular {
    width: 1rem !important;
    height: 1rem !important;
}

.poseidon-balance__check--running.mud-button-root {
    cursor: progress;
    opacity: 0.7;
}

/* Laid out as the estimated credits card: the figure, then its chip ("credits" here, "Estimated" there). */
.poseidon-balance__figure.poseidon-credits {
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
    line-height: 1.875rem;
}

.poseidon-balance__none {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.poseidon-balance__raw {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 400;
}

.poseidon-balance__tip.mud-tooltip-root {
    display: block;
    min-width: 0;
    max-width: 100%;
}

.poseidon-balance__status {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 1rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.poseidon-balance__status > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    Trend chart: provider calls as a solid line, reuse as a dashed line, in the theme's chart colours. MudBlazor writes
    the seed colours of the chart options as attributes; these rules match on them to give each series its colour and
    line style in both themes.
*/
/* A period without requests: a quiet note over the chart's flat line. */
.poseidon-trend__chart {
    position: relative;
}

.poseidon-trend__empty {
    position: absolute;
    top: 42%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-chip);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.poseidon-trend__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.poseidon-trend__usage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* One fixed height for the chart, the table and the skeleton, so switching views or loading never moves the page. */
.poseidon-trend__body {
    height: 284px;
}

.poseidon-trend__chart {
    height: 100%;
}

.poseidon-trend__chart .mud-charts-gridlines-yaxis path,
.poseidon-trend__chart .mud-charts-gridlines-xaxis path {
    stroke: var(--poseidon-card-border);
}

.poseidon-trend__chart text {
    fill: var(--mud-palette-text-secondary);
}

.poseidon-trend__chart [stroke="#0369A1"] {
    stroke: var(--poseidon-chart-provider);
}

.poseidon-trend__chart [stroke="#0F766E"] {
    stroke: var(--poseidon-chart-reuse);
}

.poseidon-trend__chart path[stroke="#0F766E"] {
    stroke-dasharray: 8 5;
}

.poseidon-trend__chart circle.mud-chart-point {
    fill: var(--mud-palette-surface);
}

/* Legend markers drawn as short lines in the style of their series. */
.poseidon-trend__chart .mud-chart-legend-marker {
    width: 24px !important;
    height: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

.poseidon-trend__chart .mud-chart-legend-marker[style*="#0369A1"] {
    border-top: 3px solid var(--poseidon-chart-provider);
}

.poseidon-trend__chart .mud-chart-legend-marker[style*="#0F766E"] {
    border-top: 3px dashed var(--poseidon-chart-reuse);
}

.poseidon-trend__chart .mud-chart-legend {
    justify-content: center;
    gap: 16px;
}

.poseidon-trend__table {
    height: 100%;
    overflow-y: auto;
    border-radius: var(--poseidon-radius);
}

.poseidon-trend__table-note {
    margin: 0 0 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

/* Table view without any request: an empty state in the chart's space, as an empty attention list. */
.poseidon-trend__table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-height: 220px;
    padding: 20px 24px;
    border: 1px dashed var(--poseidon-card-border);
    border-radius: var(--poseidon-radius);
    background-color: var(--poseidon-table-header-background);
    text-align: center;
}

.poseidon-trend__table-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 50%;
    background-color: var(--poseidon-nav-selected-background);
    color: var(--poseidon-nav-selected-text);
}

.poseidon-trend__table-empty-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.375rem;
}

.poseidon-trend__table-empty-text {
    max-width: 340px;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.poseidon-trend__table:focus-visible {
    outline: 2px solid var(--poseidon-focus-ring);
    outline-offset: 2px;
}

.poseidon-trend__table .mud-table-container {
    overflow: visible;
}

.poseidon-trend__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

/*
    Attention panel: a tile per kind with its count. The tiles also choose which kind's recent requests are listed, so
    the panel holds one short list however many kinds have requests. A tile with requests takes the colour pair of its
    outcome chip; a tile without any stays neutral; the chosen tile has a heavier border and a tinted background. The
    count and the name are always written out, so colour only repeats them.
*/
.poseidon-attention__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* With the high-usage tile there are four tiles: two by two. */
.poseidon-attention__summary--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.poseidon-attention__tile {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "icon count label";
    align-items: center;
    gap: 0 8px;
    min-width: 0;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius);
    background-color: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
}

button.poseidon-attention__tile {
    cursor: pointer;
    transition: border-color var(--poseidon-motion-fast) var(--poseidon-ease-out),
        background-color var(--poseidon-motion-fast) var(--poseidon-ease-out);
}

button.poseidon-attention__tile:hover {
    background-color: var(--poseidon-nav-hover-background);
}

button.poseidon-attention__tile:focus-visible {
    outline: 2px solid var(--poseidon-focus-ring);
    outline-offset: 2px;
}

.poseidon-attention__tile--selected,
button.poseidon-attention__tile--selected:hover {
    background-color: var(--poseidon-nav-selected-background);
    box-shadow: inset 0 0 0 1px var(--poseidon-nav-selected-indicator);
    border-color: var(--poseidon-nav-selected-indicator);
}

.poseidon-attention__tile-body {
    display: contents;
}

.poseidon-attention__tile-icon {
    display: inline-flex;
    grid-area: icon;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.poseidon-attention__tile-count {
    grid-area: count;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.75rem;
    font-variant-numeric: tabular-nums;
}

.poseidon-attention__tile-label {
    grid-area: label;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.9375rem;
}

.poseidon-attention__tile--hub-error .poseidon-attention__tile-icon {
    background-color: var(--poseidon-outcome-hub-error-background);
    color: var(--poseidon-outcome-hub-error-text);
}

.poseidon-attention__tile--rejected .poseidon-attention__tile-icon {
    background-color: var(--poseidon-outcome-rejected-background);
    color: var(--poseidon-outcome-rejected-text);
}

.poseidon-attention__tile--stale .poseidon-attention__tile-icon {
    background-color: var(--poseidon-outcome-stale-background);
    color: var(--poseidon-outcome-stale-text);
}

.poseidon-attention__tile--over-threshold .poseidon-attention__tile-icon {
    background-color: var(--poseidon-alert-warning-background);
    color: var(--poseidon-alert-warning-text);
}

.poseidon-attention__tile--none .poseidon-attention__tile-icon {
    background-color: var(--poseidon-table-header-background);
    color: var(--mud-palette-text-secondary);
}

.poseidon-attention__tile--none .poseidon-attention__tile-count {
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .poseidon-attention__summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

.poseidon-attention__section {
    margin-top: 10px;
}

.poseidon-attention__section[hidden] {
    display: none;
}

.poseidon-attention__scroll {
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius);
}

.poseidon-attention__scroll:focus-visible {
    outline: 2px solid var(--poseidon-focus-ring);
    outline-offset: 2px;
}

.poseidon-attention__more,
.poseidon-attention__note {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.125rem;
}

/*
    An empty list (one kind without requests, or nothing at all): a check in a soft success circle, a title and what it
    means, centred in the panel's remaining height.
*/
.poseidon-attention__empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 176px;
    margin-top: 12px;
    padding: 20px 24px;
    border: 1px dashed var(--poseidon-card-border);
    border-radius: var(--poseidon-radius);
    background-color: var(--poseidon-table-header-background);
    text-align: center;
}

.poseidon-attention__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 50%;
    background-color: var(--poseidon-alert-success-background);
    color: var(--poseidon-alert-success-text);
}

.poseidon-attention__empty-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.375rem;
}

.poseidon-attention__empty-text {
    max-width: 340px;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

/* The recent requests: what happened and where on the left, the outcome and time on the right; two lines each. */
.poseidon-attention__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.poseidon-attention__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 5px 12px;
}

.poseidon-attention__item + .poseidon-attention__item {
    border-top: 1px solid var(--poseidon-card-border);
}

.poseidon-attention__item-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.poseidon-attention__what {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    overflow-wrap: anywhere;
}

/* The application, then the endpoint. Long identifiers may wrap rather than widen the panel. */
.poseidon-attention__request {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.poseidon-attention__request .poseidon-mono {
    overflow-wrap: anywhere;
}

.poseidon-attention__item-side {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.poseidon-attention__time {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.125rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 599.98px) {
    .poseidon-attention__item {
        flex-direction: column;
        align-items: flex-start;
    }

    .poseidon-attention__item-side {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
}

.poseidon-attention__more {
    margin: 0;
    padding: 6px 12px;
    border-top: 1px solid var(--poseidon-card-border);
}

.poseidon-attention__links {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.poseidon-attention__link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
}

.poseidon-attention__link-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.poseidon-attention__skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.poseidon-attention__skeleton-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}

/* Outcome chips: each outcome in its own colour pair from the theme, with an icon and its name. */
.poseidon-outcome {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 10px 1px 6px;
    border-radius: var(--poseidon-radius-chip);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.125rem;
    white-space: nowrap;
}

.poseidon-outcome .mud-icon-root {
    font-size: 1rem;
}

.poseidon-outcome--provider {
    color: var(--poseidon-outcome-provider-text);
    background-color: var(--poseidon-outcome-provider-background);
}

.poseidon-outcome--store {
    color: var(--poseidon-outcome-store-text);
    background-color: var(--poseidon-outcome-store-background);
}

.poseidon-outcome--combined {
    color: var(--poseidon-outcome-combined-text);
    background-color: var(--poseidon-outcome-combined-background);
}

.poseidon-outcome--bypass {
    color: var(--poseidon-outcome-bypass-text);
    background-color: var(--poseidon-outcome-bypass-background);
}

.poseidon-outcome--stale {
    color: var(--poseidon-outcome-stale-text);
    background-color: var(--poseidon-outcome-stale-background);
}

.poseidon-outcome--rejected {
    color: var(--poseidon-outcome-rejected-text);
    background-color: var(--poseidon-outcome-rejected-background);
}

.poseidon-outcome--hub-error {
    color: var(--poseidon-outcome-hub-error-text);
    background-color: var(--poseidon-outcome-hub-error-background);
}

.poseidon-outcome--incomplete {
    color: var(--poseidon-outcome-incomplete-text);
    background-color: var(--poseidon-outcome-incomplete-background);
}

.poseidon-outcome--in-progress {
    color: var(--poseidon-outcome-in-progress-text);
    background-color: var(--poseidon-outcome-in-progress-background);
}

@media (prefers-reduced-motion: reduce) {
    .poseidon-kpi-card__figure {
        animation: none;
    }
}

/* ---- Audit log ---------------------------------------------------------------------------------------------------- */

/*
    The header, then the results card beside the detail card. From 1280 px the page fits the window under the app bar:
    the cards take the remaining height, and the grid and the detail scroll inside them, so the page itself does not.
*/
.poseidon-audit-page {
    display: flex;
    flex-direction: column;
}

.poseidon-audit-page > .poseidon-page-header {
    margin-bottom: 16px !important;
}

.poseidon-audit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--poseidon-gutter);
    align-items: start;
}

.poseidon-audit-layout--with-detail {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 500px);
}

@media (min-width: 1280px) {
    .poseidon-audit-page {
        height: calc(100vh - var(--poseidon-app-bar-height) - 2 * var(--poseidon-gutter));
        min-height: 520px;
    }

    .poseidon-audit-layout {
        flex: 1 1 auto;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        min-height: 0;
    }
}

@media (max-width: 1279.98px) {
    .poseidon-audit-layout--with-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Both cards: surface, soft border and shadow, rounded corners. */
.poseidon-audit-results,
.poseidon-audit-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius-card);
    background-color: var(--mud-palette-surface);
    box-shadow: var(--poseidon-shadow-card);
}

/* Toolbar: the title and count on the left, the filters on the right; they wrap on narrower screens. */
.poseidon-audit-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--poseidon-card-border);
}

.poseidon-audit-toolbar__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.poseidon-audit-toolbar__heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.poseidon-audit-toolbar__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.poseidon-audit-toolbar__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.poseidon-audit-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Each select sits in a sized wrapper: MudBlazor puts Class on an inner element, so the outer one would stretch. */
.poseidon-audit-filters__field {
    flex: 0 1 180px;
    width: 180px;
    min-width: 150px;
}

.poseidon-audit-filters__field--wide {
    flex-basis: 220px;
    width: 220px;
}

.poseidon-audit-filters .mud-input-control {
    margin-top: 0;
}

@media (max-width: 599.98px) {
    .poseidon-audit-filters,
    .poseidon-audit-filters__field {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Active filters: removable chips with "Clear filters" after them. */
.poseidon-audit-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--poseidon-card-border);
    background-color: var(--poseidon-table-header-background);
}

.poseidon-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.poseidon-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px 0 12px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: 999px;
    background-color: var(--poseidon-nav-selected-background);
    color: var(--poseidon-nav-selected-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.75rem;
}

.poseidon-filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.poseidon-filter-chip__remove:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* The grid fills the rest of the card: its rows scroll under a fixed header, the pager stays at the bottom. */
.poseidon-audit-results__grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.poseidon-audit-grid {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    background-color: transparent !important;
}

.poseidon-audit-grid .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

@media (max-width: 1279.98px) {
    .poseidon-audit-grid .mud-table-container {
        max-height: 70vh;
    }
}

.poseidon-audit-grid .mud-table-head .mud-table-cell {
    background-color: var(--poseidon-table-header-background);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.poseidon-audit-grid .mud-table-head .mud-table-cell:first-child,
.poseidon-audit-grid tbody td:first-child {
    padding-left: 20px;
}

.poseidon-audit-grid .mud-table-pagination {
    flex: none;
    border-top: 1px solid var(--poseidon-card-border);
}

/* One line per row: codes and identifiers never break at their hyphens; a narrow grid scrolls sideways instead. */
.poseidon-audit-grid tbody td {
    height: 48px;
    white-space: nowrap;
}

/*
    With a detail open the list is narrower: the duration column gives way (the detail's summary shows it) and cells are
    a little tighter, so every other column still fits without a sideways scroll on wide screens.
*/
.poseidon-audit-layout--with-detail .poseidon-audit-grid th:nth-child(6),
.poseidon-audit-layout--with-detail .poseidon-audit-grid td:nth-child(6) {
    display: none;
}

.poseidon-audit-layout--with-detail .poseidon-audit-grid .mud-table-cell {
    padding-inline: 10px;
}

.poseidon-audit-grid tbody tr {
    cursor: pointer;
    transition: background-color var(--poseidon-motion-fast) var(--poseidon-ease-out);
}

.poseidon-audit-grid tbody tr:focus-within,
.poseidon-audit-grid tbody tr.poseidon-audit-row--selected {
    background-color: var(--poseidon-nav-selected-background);
}

.poseidon-audit-grid tbody tr.poseidon-audit-row--selected td:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* The time is the row's keyboard target: the date small and muted, the time of day prominent. */
.poseidon-audit-row__open {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.poseidon-audit-row__open time {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.poseidon-audit-row__date {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.poseidon-audit-row__time {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.poseidon-audit-row__open:hover .poseidon-audit-row__time {
    text-decoration: underline;
}

.poseidon-audit-grid__application {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.poseidon-audit-grid__name {
    font-weight: 500;
}

.poseidon-audit-grid__code {
    font-size: 0.75rem;
}

/* An HTTP status as a small tinted figure: success, client error or server error, never colour alone (the number). */
.poseidon-status {
    display: inline-block;
    min-width: 40px;
    padding: 0 8px;
    border-radius: var(--poseidon-radius-chip);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.375rem;
    text-align: center;
}

.poseidon-status--ok {
    color: var(--poseidon-outcome-store-text);
    background-color: var(--poseidon-outcome-store-background);
}

.poseidon-status--client {
    color: var(--poseidon-alert-warning-text);
    background-color: var(--poseidon-alert-warning-background);
}

.poseidon-status--server {
    color: var(--poseidon-outcome-hub-error-text);
    background-color: var(--poseidon-outcome-hub-error-background);
}

/* ---- Audit detail ---- */

.poseidon-audit-detail__header {
    flex: none;
    padding: 14px 20px 16px;
    border-bottom: 1px solid var(--poseidon-card-border);
    background: linear-gradient(180deg, var(--poseidon-nav-selected-background), transparent);
}

.poseidon-audit-detail__titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.poseidon-audit-detail__title {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5rem;
    text-transform: uppercase;
}

.poseidon-audit-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.poseidon-audit-summary__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.poseidon-audit-summary__code {
    font-size: 0.9375rem;
    line-height: 1.625rem;
}

.poseidon-audit-summary__error {
    font-size: 0.75rem;
    font-weight: 600;
}

.poseidon-audit-summary__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
}

.poseidon-audit-summary__facts dt,
.poseidon-audit-fact dt {
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1rem;
    text-transform: uppercase;
}

.poseidon-audit-summary__facts dd {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poseidon-audit-summary__note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border-radius: var(--poseidon-radius);
    color: var(--poseidon-outcome-stale-text);
    background-color: var(--poseidon-outcome-stale-background);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.poseidon-audit-detail__state {
    padding: 16px 20px;
}

/* Tabs: the bar stays put, the active panel scrolls if it does not fit. */
.poseidon-audit-tabs {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.poseidon-audit-tabs .mud-tabs-tabbar {
    flex: none;
    background-color: transparent;
    border-bottom: 1px solid var(--poseidon-card-border);
}

.poseidon-audit-tabs .mud-tab {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
}

.poseidon-audit-tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 20px;
}

.poseidon-audit-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.poseidon-audit-fact {
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius);
    background-color: var(--mud-palette-background);
}

.poseidon-audit-fact--wide {
    grid-column: 1 / -1;
}

.poseidon-audit-fact dd {
    min-width: 0;
    margin: 2px 0 0;
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.poseidon-audit-fact__wrap {
    overflow-wrap: anywhere;
}

.poseidon-audit-fact__json {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.poseidon-audit-subtitle {
    margin: 16px 0 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.poseidon-audit-tabs section:first-child > .poseidon-audit-subtitle:first-child {
    margin-top: 0;
}

.poseidon-audit-shared {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.poseidon-audit-shared__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 12px;
    border: 1px solid var(--poseidon-card-border);
    border-radius: var(--poseidon-radius);
    background-color: var(--mud-palette-background);
}

.poseidon-audit-shared__app {
    font-weight: 500;
}

.poseidon-audit-shared__more {
    margin: 8px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

/* A monospace value with its copy button beside it; long hashes wrap rather than widen the panel. */
.poseidon-copy-value {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    align-items: start;
    column-gap: 4px;
    max-width: 100%;
}

.poseidon-copy-value__text {
    overflow-wrap: anywhere;
}

.poseidon-copy-value__button {
    margin-top: -4px;
}

.poseidon-copy-value__status {
    grid-column: 1 / -1;
    font-size: 0.75rem;
}