h1:focus {
    outline: none;
}

/* non-theme-begin: boot/boot-failure chrome - everything down to non-theme-end renders before
   (or instead of) the booted app, i.e. before the app injects its :root --so-* theme variables,
   so these rules must stay self-contained raw literals. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Full-viewport overlay (position:fixed, not sized off #app) so it disappears cleanly the moment
   Blazor replaces #app's contents with the real app - no #app-level background/sizing rule needs
   to be reset afterward. */
.boot-splash {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #00412D;
}

.boot-splash__glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(173, 189, 166, 0.35) 0%, rgba(173, 189, 166, 0) 70%);
    animation: boot-splash-glow 2.4s ease-in-out infinite;
}

.boot-splash__mark {
    position: relative;
    font-family: 'MinervaModern', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 36px;
    letter-spacing: 0.09em;
    color: #FFFFFF;
}

.boot-splash__sub {
    position: relative;
    font-family: 'Swarovski Futura', system-ui, -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #D6DED2;
}

/* position:relative here has no visual effect on its own (no offsets set) - it only gives
   .boot-splash__custom_content below a containing block to anchor against, so that element
   can be taken out of flow instead of contributing its own (variable) height to this centered
   group's size. Without this, switching between the loading/error states below changes this
   element's height, which shifts where the whole group (including glow/mark/sub above it) gets
   vertically centered by .boot-splash - i.e. the "jump". */
.boot-splash__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.boot-splash__custom_content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 22px;
    width: max-content;
    max-width: 280px;
    text-align: center;
    display: flex;
  flex-direction: column;
  align-items: center;
}

.boot-splash__loader {
  border: 2px solid #FFFFFF;
  border-top: 2px solid rgba(0, 0, 0, 0);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.boot-splash__status {
    position: relative;
    font-family: 'Swarovski Futura', system-ui, -apple-system, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.55);
}

@keyframes boot-splash-glow {
    0%, 100% { transform: scale(0.92); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 1; }
}
/* non-theme-end */

/* MudMenu's own root never receives MainLayout.razor.css's scope attribute (see CLAUDE.md's
   Theming section), so these rules live here as plain global CSS instead. */
.settings-iconbtn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.settings-iconbtn:hover,
.settings-iconbtn--open {
    background: color-mix(in srgb, var(--so-white) 16%, transparent);
}

.settings-popover {
    width: 292px;
    border-radius: var(--so-radius-panel) !important;
    box-shadow: var(--so-shadow-sheet) !important;
    border: 1px solid var(--mud-palette-lines-default);
    padding: 6px 20px 20px;
    overflow: visible !important;
    margin-top: 8px;
}

/* MudMenu's inner list is overflow:auto and sits exactly as wide as the panel's fields with no
   padding of its own, so it clips the 1px focus ring a field paints just outside its own edge.
   Safe to let it overflow: this panel is three fixed rows and never needs to scroll. Both classes
   are required - MudBlazor's own ".mud-popover .mud-list" rule outranks a single-class selector. */
.settings-popover .settings-menu-list {
    overflow-y: visible;
}

.settings-popover::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 11.5px;
    width: 13px;
    height: 13px;
    background: var(--mud-palette-white, var(--so-white));
    border-left: 1px solid var(--mud-palette-lines-default);
    border-top: 1px solid var(--mud-palette-lines-default);
    transform: rotate(45deg);
    border-radius: 3px 0 0 0;
}

/* Brand icons are static <img> SVGs with a hardcoded stroke color, so a disabled MudButton's
   grey text color can't reach them - dim them to the prototype's disabled-button opacity instead. */
.mud-button-root.mud-disabled img {
    opacity: 0.45;
}

/* Overview page's summary cards - verified against the design zip's actual prototype markup
   (aside.rail / .rs-* classes in "SOA Ballistic Calculator MVP.html"), not approximated from the
   flat screenshot. Plain HTML elements + global CSS here (not MudCard/.razor.css) since the whole
   card - including hover/active pseudo-states - needs to be a single literal <button>, which
   MudCard can't be styled as without fighting the CSS-isolation scope-attribute gap. */
.rail-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 372px;
    padding: 22px 20px 40px;
    background: var(--so-white);
    border-right: 1px solid var(--so-grey-subtle-border);
    min-height: calc(100vh - var(--mud-appbar-height));
    box-sizing: border-box;
}

.rs-intro {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--so-grey-70);
    margin: 2px 2px 4px;
}

.rs-card {
    position: relative;
    width: 100%;
    text-align: left;
    display: block;
    font-family: inherit;
    color: inherit;
    border: 1px solid var(--so-white);
    background: var(--so-surface-input);
    border-radius: var(--so-radius-panel);
    padding: 16px 16px 18px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.rs-card:hover {
    box-shadow: var(--so-shadow-card);
    transform: translateY(-1px);
}

.rs-card:active {
    box-shadow: none;
    transform: translateY(2px);
    background: var(--so-cool-tint);
}

.rs-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--so-signal-base);
}

.rs-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-right: 26px;
}

.rs-head h3 {
    margin: 0;
    flex: 1;
    font-weight: 500;
    font-size: 15px;
    color: var(--so-green-base);
}

.rs-open {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    pointer-events: none;
    transition: transform 0.15s ease;
}

.rs-card:hover .rs-open {
    transform: translate(2px, -2px);
}

.rs-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rs-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.rs-row .rs-k {
    font-size: 12.5px;
    color: var(--so-grey-70);
    flex: none;
    width: 104px;
    line-height: 1.3;
}

.rs-row .rs-v {
    font-size: 13.5px;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.rs-row .rs-v small {
    font-weight: 400;
    color: var(--so-grey-70);
    font-size: 11.5px;
}

.rs-scope {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rs-scope-thumb {
    width: 92px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
}

.rs-scope-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.rs-scope-name {
    font-weight: 500;
    font-size: 16px;
    color: var(--mud-palette-text-primary);
    line-height: 1.15;
}

.rs-scope-fam {
    font-size: 12px;
    color: var(--so-grey-70);
}

.rs-sub {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--so-grey-70);
    margin: 14px 0 8px;
}

.rs-atmos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.rs-stat {
    background: var(--so-white);
    border-radius: var(--so-radius-input);
    padding: 8px 4px;
    text-align: center;
}

.rs-stat b {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rs-stat span {
    display: block;
    font-size: 9.5px;
    color: var(--so-grey-70);
    margin-top: 3px;
}

.rs-empty {
    font-size: 13.5px;
    color: var(--so-grey-70);
}

.overview-layout {
    display: flex;
    align-items: flex-start;
}

.overview-main {
    flex: 1;
    min-width: 0;
    padding: 24px 28px 36px; /* design .canvas padding */
}

.overview-tabs {
    display: inline-flex;
    gap: 3px;
    background: var(--so-surface-input);
    border-radius: var(--so-radius-pill);
    padding: 4px;
    margin-bottom: 18px; /* design .resulthead margin-bottom */
}

.overview-tabs__button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: var(--so-radius-pill);
    padding: 8px 22px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    color: var(--so-grey-70);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.overview-tabs__button:not(.overview-tabs__button--selected):hover {
    color: var(--so-green-90);
}

.overview-tabs__button--selected {
    background: var(--so-signal-base);
    color: var(--so-white);
}

.ec-panel {
    background: var(--so-white);
    border-radius: var(--so-radius-panel);
    box-shadow: var(--so-shadow-card);
    overflow: hidden;
    margin-bottom: 18px; /* design .fieldcond margin-bottom - the gap above the result tabs */
}

.ec-summary {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.ec-summary:hover {
    background: var(--so-cool-tint);
}

.ec-lead {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--so-mint-tint);
    color: var(--so-green-base);
}

.ec-sum {
    display: flex;
    align-items: stretch;
    gap: 8px 0;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.ec-grp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 14px;
    border-left: 1px solid var(--so-grey-subtle-border);
    min-width: 0;
}

.ec-grp:first-child {
    padding-left: 2px;
    border-left: 0;
}

.ec-fieldname .ec-fl {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    white-space: pre-line;
    color: var(--mud-palette-text-primary);
}

.ec-gk {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--so-grey-70);
}

.ec-gv {
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.ec-sep {
    color: var(--so-cool-70);
    margin: 0 5px;
}

.ec-badge {
    flex: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--so-grey-70);
    background: var(--so-cool-tint);
    border-radius: var(--so-radius-pill);
    padding: 3px 12px;
}

.ec-badge--on {
    color: var(--so-signal-base);
    background: var(--so-signal-tint);
}

.ec-chev {
    flex: none;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ec-chev--open {
    transform: rotate(180deg);
}

.ec-editor {
    padding: 8px 18px 18px 64px;
    border-top: 1px solid var(--so-grey-subtle-border);
}

@media (max-width: 760px) {
    .ec-editor {
        padding-left: 18px;
    }
}

.ec-egroup {
    margin-top: 16px;
}

.ec-egroup:first-child {
    margin-top: 12px;
}

.ec-ehead {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--so-grey-70);
    margin-bottom: 10px;
}

.ec-ehint {
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    color: var(--so-cool-70);
}

.ec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 18px;
    /* Top-aligned so a validation error growing below one field never shifts its input box out of
       line with its neighbors. */
    align-items: start;
}

/* The wind-speed field's label row carries the unit toggle and is taller than its neighbors'
   plain labels - reserving the toggle's height on every label in this grid keeps the input boxes
   themselves on one line despite the top alignment above. */
.ec-grid .input-label {
    min-height: 30px;
}

.ec-actions {
    display: flex;
    gap: 18px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ec-actions .btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--so-green-base);
    cursor: pointer;
}

.ec-actions .btn-link:hover {
    text-decoration: underline;
}

/* MudDialog's ContentStyle parameter is obsolete (build error), and a .razor.css rule can't reach
   the dialog's content element (see CLAUDE.md's Theming section), so the video-dialog's flush,
   gutter-free content padding has to live here as plain global CSS. */
.mud-dialog .mud-dialog-content.turret-video-dialog__content {
    padding: 0;
}