/* Shared.Ui global styles — loaded via _content/Companion.Shared.Ui/css/shared-ui.css */

/* Focus rings: 2px brand-indigo + 2px offset on every focusable surface (UI-SPEC §Color Accent #5) */
:focus-visible {
    outline: 2px solid #4F46E5; /* brand-indigo */
    outline-offset: 2px;
    border-radius: 2px;
}

/* Tabular numerals on rows that contain counts, times, dates, serials (UI-SPEC §Typography) */
.amd-tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Desktop guard: < 1024px shows the static fallback page (UI-SPEC §Layout Grid) */
@media (max-width: 1023px) {
    .amd-desktop-only {
        display: none;
    }
}

/* Presenter-mode density class (UI-SPEC §Spacing Presenter delta) */
body.presenter-density {
    --amd-spacing-lg: 32px;   /* lg 24 → 32 */
    --amd-spacing-xl: 48px;   /* xl 32 → 48 */
    --amd-body-font-size: 1.125rem; /* body 16 → 18 */
    --amd-label-font-size: 1rem;    /* label 14 → 16 */
}

body.presenter-density .mud-typography-body1 {
    font-size: var(--amd-body-font-size);
}

body.presenter-density .mud-typography-body2 {
    font-size: var(--amd-label-font-size);
}

/* Reduced-motion: disable MudSkeleton shimmer when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .amd-loading-indicator,
    .mud-skeleton {
        animation: none !important;
        background: #F1F5F9 !important; /* static muted block */
    }
}

/* UNKNOWN lane treatment: amber-surface background tint at 100% opacity (UI-SPEC §Color) */
.amd-unknown-lane {
    background-color: #FEF3C7; /* amber-surface */
    border-left: 3px solid #B45309; /* amber */
    padding: 16px;
}

.amd-unknown-lane-header {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #B45309; /* amber */
    font-weight: 400; /* per UI-SPEC: presence comes from case + spacing, NOT weight */
}

/* SectionCard collapse affordance (V1.x todo 2026-05-10-make-sections-collapsible).
   Header is clickable (cursor: pointer); chevron rotates icon via the @if expression in
   the .razor so no CSS rotation needed. Hover gets a subtle background tint to advertise
   the affordance. */
.amd-section-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 4px 4px;
    margin: -4px -4px 0 -4px; /* negative margin so hover halo reaches the card edge */
    border-radius: 4px;
    transition: background-color 120ms ease;
}

.amd-section-card-header:hover {
    background-color: rgba(79, 70, 229, 0.04); /* brand-indigo @ 4% */
}

.amd-section-card-header:focus-visible {
    /* Inherit the :focus-visible outline rule above; explicit here to override the
       header div's default focus suppression in MudPaper-nested elements. */
    outline: 2px solid #4F46E5;
    outline-offset: 2px;
}

.amd-section-card-spacer {
    flex: 1 1 auto;
}

.amd-section-card-chevron {
    margin-left: 4px;
    flex: 0 0 auto;
}

.amd-section-card-retry-wrap {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.amd-section-card-body {
    margin-top: 16px;
}

/* Presenter-mode density: a touch more room between header and body when collapsed
   sections are toggled open during screen-share. */
body.presenter-density .amd-section-card-body {
    margin-top: 20px;
}

/* Brand accent — thin RG-blue rule under the AppBar. Echoes the horizontal-logo
   color story without taking over the AppBar chrome (which stays light per the
   Phase 1 UI-SPEC light-only V1 decision). RG palette: #0C78B9 blue / #98BA66 green. */
.amd-appbar {
    border-bottom: 2px solid #0C78B9;
}

/* Footer — small "Powered by Revolution Group" attribution rendered below the
   main content column. Inherits the body text color but subdued (Color.Tertiary
   equivalent) so it doesn't compete with section content. */
.amd-footer {
    text-align: center;
    padding: 16px 0 24px;
    opacity: 0.6;
    font-size: 0.75rem;
}