/*
 * Brand tokens are the machine-readable authority in BrandKit/tokens/brand-tokens.json.
 * The --strive-* names below are the portal's existing token contract and carry those values.
 */
:root {
    color-scheme: dark;
    --strive-midnight: #020b1c;
    --strive-navy: #06162c;
    --strive-navy-soft: #0b2340;
    --strive-surface: #091a31;
    --strive-surface-raised: #0d2340;
    --strive-blue: #1565df;
    --strive-blue-bright: #2d83ff;
    --strive-blue-dark: #0b4fb8;
    --strive-cyan: #35c6ff;
    --strive-cyan-soft: #9addff;
    --strive-teal: #0c9ea1;
    --strive-page: #031027;
    --strive-panel: #091a31;
    --strive-muted: #a8b9ce;
    --strive-text: #f4f8ff;
    --strive-border: #294c72;
    --strive-border-strong: #4a759f;
    --strive-danger: #ff7068;
    --strive-danger-soft: #391923;
    --strive-warning: #ffc85c;
    --strive-warning-soft: #382a10;
    --strive-success: #59d99b;
    --strive-success-soft: #113126;

    --strive-radius-control: 8px;
    --strive-radius-panel: 14px;
    --strive-focus-ring: 0 0 0 3px rgb(53 198 255 / 45%);

    --strive-motion-instant: 100ms;
    --strive-motion-fast: 140ms;
    --strive-motion-standard: 180ms;
    --strive-motion-emphasis: 240ms;
    --strive-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --strive-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --strive-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", Aptos, system-ui, sans-serif;
    font-synthesis: none;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--strive-page);
    color: var(--strive-text);
}

body {
    font-size: 1rem;
    line-height: 1.5;
}

button,
input {
    font: inherit;
}

a {
    color: var(--strive-cyan-soft);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--strive-cyan);
    outline-offset: 3px;
}

h1[tabindex="-1"]:focus {
    outline: none;
}

button:disabled,
input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.portal-shell {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 85% 10%, rgb(31 111 244 / 12%), transparent 28rem),
        var(--strive-page);
}

.portal-shell-login {
    background: var(--strive-midnight);
}

.engineering-pilot-banner {
    padding: 0.45rem clamp(1rem, 4vw, 3rem);
    background: #3c2c0b;
    border-bottom: 1px solid #a87818;
    color: #ffe6a5;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.035em;
    text-align: center;
    text-transform: uppercase;
}

.portal-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    gap: 1rem;
    padding: 0.85rem clamp(1rem, 4vw, 3rem);
    border-bottom: 1px solid rgb(80 138 199 / 35%);
    background: rgb(3 14 34 / 94%);
    color: #fff;
    box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
    backdrop-filter: blur(16px);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

.header-brand-copy {
    display: grid;
    min-width: 0;
}

.brand-lockup strong {
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.header-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    margin-right: 1rem;
}

.header-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 0.4rem;
    color: rgb(210 228 246);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
}

.header-nav-link:hover,
.header-nav-link:focus-visible {
    color: #fff;
    background: rgb(80 138 199 / 28%);
    outline: none;
}

.header-nav-link-active {
    color: #fff;
    background: rgb(80 138 199 / 42%);
}

.brand-lockup small {
    color: var(--strive-muted);
    font-size: 0.76rem;
}

/*
 * The reverse shield ships with a transparent canvas, so no background plate or
 * crop is applied. Sizing only.
 */
.header-mark,
.login-mark,
.diagnostic-mark {
    display: block;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
}

.login-mark {
    width: 2.5rem;
    height: 2.5rem;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.15rem;
}

.login-brand-copy,
.header-brand-copy {
    display: grid;
    min-width: 0;
}

.login-brand-copy strong {
    color: var(--strive-text);
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.login-brand-copy small,
.brand-lockup small {
    color: var(--strive-muted);
    font-size: 0.78rem;
}

.header-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-width: 0;
}

.header-account form {
    margin: 0;
}

.account-name {
    max-width: min(32vw, 20rem);
    overflow: hidden;
    color: #e8eef6;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-main {
    width: 100%;
    padding: clamp(1rem, 3vw, 2.5rem);
}

.portal-main-login {
    display: grid;
    min-height: 0;
    padding: 0;
}

.portal-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem clamp(1rem, 4vw, 3rem);
    border-top: 1px solid rgb(75 118 159 / 35%);
    background: var(--strive-midnight);
    color: var(--strive-muted);
    font-size: 0.84rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--strive-radius-control);
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--strive-motion-fast) var(--strive-ease-out),
        background-color var(--strive-motion-standard) var(--strive-ease-out),
        border-color var(--strive-motion-standard) var(--strive-ease-out),
        color var(--strive-motion-standard) var(--strive-ease-out),
        box-shadow var(--strive-motion-standard) var(--strive-ease-out);
}

/*
 * Pointer-only press feedback. Excluding :focus-visible keeps keyboard
 * activation instant, which is the repeated operator path.
 */
@media (hover: hover) and (pointer: fine) {
    .button:hover:not(:disabled) {
        transform: translateY(-1px);
    }

    .button:active:not(:disabled):not(:focus-visible) {
        transform: translateY(0) scale(0.98);
    }
}

.button-primary {
    border-color: var(--strive-blue);
    background: var(--strive-blue);
    color: #fff;
    box-shadow: 0 6px 16px rgb(13 91 215 / 22%);
}

/* Hover darkens rather than brightens so the white label keeps 7.4:1. */
.button-primary:hover:not(:disabled) {
    border-color: var(--strive-blue-bright);
    background: var(--strive-blue-dark);
    box-shadow: 0 8px 20px rgb(34 119 255 / 28%);
}

.button-secondary {
    border-color: var(--strive-border);
    background: var(--strive-surface-raised);
    color: var(--strive-text);
}

.button-secondary:hover:not(:disabled) {
    border-color: var(--strive-blue-bright);
    background: #123157;
}

.portal-header .button-secondary {
    border-color: #5077a0;
    background: rgb(8 29 55 / 70%);
    color: #fff;
}

.button-danger {
    border-color: var(--strive-danger);
    background: var(--strive-danger-soft);
    color: var(--strive-danger);
}

.button-compact {
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
}

.button-full {
    width: 100%;
}

/*
 * Alerts enter with a short ease-out. The live region or role="alert" remains the
 * accessibility mechanism; motion is supplemental and never delays announcement.
 */
.alert {
    margin: 1rem 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid transparent;
    border-radius: var(--strive-radius-control);
    font-size: 0.92rem;
    animation: strive-alert-in var(--strive-motion-standard) var(--strive-ease-out) both;
}

@keyframes strive-alert-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-error {
    border-color: #9d4143;
    background: var(--strive-danger-soft);
    color: #ffd2cf;
}

.alert-warning {
    border-color: #9d762b;
    background: var(--strive-warning-soft);
    color: #ffe1a4;
}

.alert-success {
    border-color: #347d5e;
    background: var(--strive-success-soft);
    color: #bcf7da;
}

/* Branded customer sign-in experience. */
.login-page {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(23rem, 31rem);
    align-items: center;
    width: 100%;
    max-width: 96rem;
    min-height: 100%;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 6vw, 6rem) 1.5rem;
    overflow: hidden;
    gap: clamp(2.5rem, 7vw, 7rem);
    background:
        radial-gradient(circle at 28% 48%, rgb(18 101 236 / 18%), transparent 22rem),
        radial-gradient(circle at 75% 20%, rgb(32 177 255 / 8%), transparent 25rem),
        linear-gradient(135deg, #020a19 0%, #03132d 54%, #020a19 100%);
}

.login-page:not(:has(.login-intro)) {
    grid-template-columns: minmax(23rem, 31rem);
    justify-content: center;
}

.login-intro {
    position: relative;
    z-index: 1;
    max-width: 42rem;
}

.login-intro h1 {
    max-width: 13ch;
    margin: 0;
    color: var(--strive-text);
    font-size: clamp(2.65rem, 5.4vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.login-intro h1 span {
    color: var(--strive-blue-bright);
}

.login-intro-copy {
    max-width: 38rem;
    margin: 1.4rem 0 2rem;
    color: #c5d4e6;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.login-benefits {
    display: grid;
    gap: 1rem;
    max-width: 37rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-benefits li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--strive-radius-panel);
    background: linear-gradient(90deg, rgb(10 39 78 / 72%), transparent);
}

.login-benefits li > span:last-child {
    display: grid;
    gap: 0.15rem;
}

.login-benefits strong {
    color: #eef6ff;
    font-size: 0.94rem;
}

.login-benefits small {
    max-width: 46ch;
    color: var(--strive-muted);
    font-size: 0.79rem;
    line-height: 1.45;
}

.benefit-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgb(73 154 255 / 42%);
    border-radius: var(--strive-radius-control);
    background: rgb(17 76 157 / 28%);
    color: var(--strive-cyan);
}

.benefit-icon svg,
.login-submit-button svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.login-panel {
    position: relative;
    z-index: 1;
    width: 100%;
}

.login-card {
    width: 100%;
    padding: clamp(1.4rem, 3.5vw, 2.4rem);
    border: 1px solid var(--strive-border);
    border-color: var(--strive-border);
    border-radius: var(--strive-radius-panel) !important;
    background: var(--strive-surface) !important;
    box-shadow: 0 18px 44px rgb(0 0 0 / 38%);
}

.login-card-heading {
    display: block;
    margin-bottom: 1.3rem;
}

.login-card-heading h2 {
    margin: 0;
    color: var(--strive-text);
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    letter-spacing: -0.025em;
}

.login-card-heading p:last-child {
    margin: 0.55rem 0 0;
    color: var(--strive-muted);
    font-size: 0.88rem;
}

.login-form {
    display: grid;
    gap: 1.05rem;
}

.field-group {
    display: grid;
    gap: 0.4rem;
}

.field-group label {
    color: #e9f3ff;
    font-size: 0.9rem;
    font-weight: 600;
}

.field-group small {
    color: var(--strive-muted);
    font-size: 0.78rem;
}

.field-group input {
    width: 100%;
    min-height: 3.15rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--strive-border);
    border-radius: var(--strive-radius-control);
    border-color: var(--strive-border);
    background: rgb(2 13 31 / 78%);
    color: var(--strive-text);
    caret-color: var(--strive-cyan);
    transition:
        border-color var(--strive-motion-fast) var(--strive-ease-out),
        background-color var(--strive-motion-fast) var(--strive-ease-out);
}

.field-group input:hover {
    border-color: var(--strive-border-strong);
}

.field-group input::placeholder {
    color: #7f93aa;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.3rem;
    border: 0;
    background: transparent;
    color: var(--strive-cyan-soft);
    font-size: 0.82rem;
    font-weight: 600;
    transform: translateY(-50%);
    cursor: pointer;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 4.5rem;
}

.login-submit-button {
    position: relative;
    justify-content: center;
    min-height: 3.25rem;
    gap: 0.75rem;
    margin-top: 0.2rem;
}

.login-submit-button svg {
    width: 1.2rem;
    height: 1.2rem;
    transition: transform var(--strive-motion-fast) var(--strive-ease-out);
}

/* Gated so touch devices do not enter a sticky hover state after tapping. */
@media (hover: hover) and (pointer: fine) {
    .login-submit-button:hover:not(:disabled) svg {
        transform: translateX(0.2rem);
    }
}

.login-submit-button::after {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgb(255 255 255 / 38%);
    border-top-color: #fff;
    border-radius: 50%;
    content: "";
    animation: login-button-spin 700ms linear infinite;
}

.login-submit-button:disabled svg {
    display: none;
}

.login-submit-button:disabled::after {
    display: block;
}

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

.login-submit-status {
    min-height: 1.25rem;
    color: #c6d6e8;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.login-submit-status.alert {
    margin: 0;
    text-align: left;
}

.login-help {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgb(75 114 155 / 42%);
    color: var(--strive-muted);
    font-size: 0.82rem;
}

.login-panel-note {
    margin: 1rem auto 0;
    color: #8fa5bd;
    font-size: 0.78rem;
    text-align: center;
}

.login-footer {
    z-index: 1;
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(63 105 151 / 28%);
    color: #8297af;
    font-size: 0.78rem;
}

.files-page {
    width: min(78rem, 100%);
    margin: 0 auto;
}

.page-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.page-heading-row h1 {
    margin: 0;
    color: var(--strive-text);
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.03em;
}

.page-description {
    margin: 0.35rem 0 0;
    color: var(--strive-muted);
}

.path-card,
.upload-card,
.file-list-card {
    border: 1px solid var(--strive-border);
    border-radius: var(--strive-radius-panel) !important;
    background: var(--strive-surface) !important;
    box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
}

.path-card,
.upload-card {
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
}

.path-bar,
.upload-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.path-summary {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.path-label {
    color: var(--strive-muted);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
}

.path-summary code {
    overflow: hidden;
    color: var(--strive-text);
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-copy {
    min-width: 0;
}

.upload-copy h2,
.empty-state h2 {
    margin: 0;
    color: var(--strive-text);
    font-size: 1.05rem;
}

.upload-copy p,
.empty-state p {
    margin: 0.25rem 0 0;
    color: var(--strive-muted);
    font-size: 0.86rem;
}

/*
 * Upload drop zone. Border, background and colour respond over 140-180ms;
 * the control never changes size, so the row cannot reflow mid-interaction.
 */
.file-picker {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    overflow: hidden;
    border: 1px solid var(--strive-blue);
    border-radius: var(--strive-radius-control);
    background: var(--strive-blue);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color var(--strive-motion-standard) var(--strive-ease-out),
        border-color var(--strive-motion-standard) var(--strive-ease-out),
        color var(--strive-motion-standard) var(--strive-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .file-picker:not(.file-picker-disabled):hover {
        border-color: var(--strive-blue-bright);
        background: var(--strive-blue-dark);
    }
}

.file-picker input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.file-picker:focus-within {
    outline: 3px solid var(--strive-cyan);
    outline-offset: 3px;
}

.file-picker-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.transfer-status {
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--strive-border);
    border-radius: var(--strive-radius-panel);
    background: var(--strive-surface);
}

.transfer-status-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.transfer-status-heading > div {
    display: grid;
    min-width: 0;
}

.transfer-status-heading strong {
    overflow: hidden;
    color: var(--strive-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.transfer-status-heading span,
.progress-label {
    color: var(--strive-muted);
    font-size: 0.8rem;
}

.transfer-status progress {
    width: 100%;
    height: 0.8rem;
    overflow: hidden;
    border: 0;
    border-radius: 99px;
    accent-color: var(--strive-blue-bright);
}

.upload-queue-card {
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--strive-border);
    border-radius: var(--strive-radius-panel);
    background: var(--strive-surface);
}

.upload-batch-status {
    margin-bottom: 1rem;
}

.upload-queue-table-wrap {
    overflow: auto;
}

.upload-queue-grid {
    max-height: 24rem;
}

/*
 * MudDataGrid tables for dense tabular data. Uses StriveBrandTheme tokens;
 * horizontal scroll on narrow viewports replaces the old card-stack file-table layout.
 */
.strive-datagrid-wrap {
    width: 100%;
    overflow-x: auto;
}

.strive-datagrid.mud-table-root {
    background: transparent;
}

.strive-datagrid .mud-table-head .mud-table-cell {
    background: #07162b;
    color: var(--strive-muted);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--strive-border);
}

.strive-datagrid .mud-table-body .mud-table-row {
    border-bottom: 1px solid var(--strive-border);
}

.strive-datagrid .mud-table-body .mud-table-row:hover {
    background: rgb(24 70 119 / 22%);
}

.strive-datagrid .mud-table-body .mud-table-cell {
    font-size: 0.9rem;
    vertical-align: middle;
}

.strive-datagrid .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

.strive-datagrid.upload-queue-grid .mud-table-body .mud-table-row.upload-queue-row-active {
    background: rgb(53 198 255 / 10%);
}

.strive-datagrid .file-action-cell {
    text-align: right;
}

.strive-datagrid progress {
    width: 100%;
    min-width: 6rem;
    height: 0.55rem;
    overflow: hidden;
    border: 0;
    border-radius: 99px;
    accent-color: var(--strive-cyan);
}

.upload-queue-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-queue-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.upload-queue-row-active {
    background: rgb(45 131 255 / 8%);
}

.upload-status-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.upload-status-queued {
    background: rgb(168 185 206 / 16%);
    color: var(--strive-muted);
}

.upload-status-uploading {
    background: rgb(45 131 255 / 18%);
    color: var(--strive-cyan-soft);
}

.upload-status-completed {
    background: var(--strive-success-soft);
    color: var(--strive-success);
}

.upload-status-failed,
.upload-status-cancelled {
    background: var(--strive-danger-soft);
    color: var(--strive-danger);
}

.upload-status-skipped {
    background: var(--strive-warning-soft);
    color: var(--strive-warning);
}

.file-list-card {
    min-height: 18rem;
    overflow: hidden;
}

.file-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.file-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.file-table th,
.file-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--strive-border);
    vertical-align: middle;
}

.file-table th {
    background: #07162b;
    color: var(--strive-muted);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.file-table td {
    font-size: 0.9rem;
}

.file-table tbody tr:last-child td {
    border-bottom: 0;
}

.file-table tbody tr:hover {
    background: rgb(24 70 119 / 22%);
}

.file-action-cell {
    text-align: right;
}

.load-more-row {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.file-name-button,
.file-name-static {
    display: inline-flex;
    align-items: center;
    max-width: min(32rem, 42vw);
    gap: 0.65rem;
}

.file-name-button {
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--strive-cyan-soft);
    font-weight: 600;
    cursor: pointer;
}

.file-name-button span:last-child,
.file-name-static span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entry-mark {
    display: inline-block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
}

/*
 * Corner radius, not colour, separates the two kinds of row; the Type column
 * states it in words as well. Amber is reserved for "needs attention", so a
 * folder must not borrow it, and the cyan matches the folder's own link colour.
 */
.folder-mark {
    border-radius: 0.2rem;
    color: var(--strive-cyan);
}

.file-mark {
    border-radius: 0.15rem;
    color: var(--strive-muted);
}

.loading-region {
    display: grid;
    gap: 0.8rem;
    padding: 1.25rem;
}

/*
 * Constant-speed loading indicator. It is removed from the DOM the moment data
 * resolves, and pauses while the browser tab is hidden.
 */
.skeleton-row {
    height: 3rem;
    border-radius: var(--strive-radius-control);
    background: linear-gradient(90deg, #0b203a 25%, #15375d 50%, #0b203a 75%);
    background-size: 200% 100%;
    animation: skeleton-shift 1.4s linear infinite;
}

[data-strive-page-hidden] .skeleton-row,
[data-strive-page-hidden] .login-submit-button::after {
    animation-play-state: paused;
}

@keyframes skeleton-shift {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/*
 * Grid rather than flex so the panel keeps a stable minimum height as its
 * message changes. align-content keeps the lines together as one optical
 * block; without it each child claims an equal share of the 18rem minimum.
 */
.empty-state,
.status-panel {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 18rem;
    padding: 2rem;
    text-align: center;
}

.status-panel {
    width: min(42rem, 100%);
    margin: 4rem auto;
    border: 1px solid var(--strive-border);
    border-radius: var(--strive-radius-panel);
    background: var(--strive-surface);
}

.status-panel h1 {
    margin: 0;
    color: var(--strive-text);
}

.status-panel p:not(.eyebrow) {
    color: var(--strive-muted);
}

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

#blazor-error-ui {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 1000;
    display: none;
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid #9d4143;
    border-radius: var(--strive-radius-control);
    background: var(--strive-danger-soft);
    color: #ffd2cf;
    box-shadow: 0 12px 30px rgb(0 0 0 / 36%);
}

#blazor-error-ui .reload {
    margin-left: 0.75rem;
    font-weight: 600;
}

/*
 * Safety net for Blazor reconnect UI (primary theme lives in ReconnectModal.razor.css).
 * Portal uses color-scheme: dark; stock/fallback white panels inherit light text and
 * become unreadable white-on-white without an explicit dark panel + light text.
 */
#components-reconnect-modal {
    color-scheme: dark;
    background-color: var(--strive-surface-raised) !important;
    color: var(--strive-text) !important;
    border: 1px solid var(--strive-border-strong);
}

#components-reconnect-modal::backdrop {
    background: rgb(2 11 28 / 72%);
}

#components-reconnect-modal p,
#components-reconnect-modal span {
    color: var(--strive-muted) !important;
}

#components-reconnect-modal #components-seconds-to-next-attempt,
#components-reconnect-modal button {
    color: var(--strive-text) !important;
}

#components-reconnect-modal button {
    background-color: var(--strive-blue) !important;
    border: 1px solid var(--strive-border-strong) !important;
}

#components-reconnect-modal a {
    color: var(--strive-cyan-soft) !important;
}

/*
 * MudBlazor overlay surfaces. The brand palette comes from StriveBrandTheme; these
 * rules carry the shape and motion contract so any dialog, popover, menu or toast
 * matches the rest of the portal instead of MudBlazor's defaults.
 */
.mud-dialog,
.mud-popover,
.mud-snackbar {
    border: 1px solid var(--strive-border);
    border-radius: var(--strive-radius-panel);
}

.mud-dialog {
    /* Modals are not anchored to a trigger, so they scale from the centre. */
    transform-origin: center;
    transition:
        opacity var(--strive-motion-emphasis) var(--strive-ease-out),
        transform var(--strive-motion-emphasis) var(--strive-ease-out);
}

.mud-popover {
    transition:
        opacity var(--strive-motion-standard) var(--strive-ease-out),
        transform var(--strive-motion-standard) var(--strive-ease-out);
}

.mud-snackbar {
    transition:
        opacity var(--strive-motion-emphasis) var(--strive-ease-out),
        transform var(--strive-motion-emphasis) var(--strive-ease-out);
}

.mud-overlay {
    transition: opacity var(--strive-motion-standard) var(--strive-ease-out);
}

.mud-button-root {
    border-radius: var(--strive-radius-control);
    transition:
        transform var(--strive-motion-fast) var(--strive-ease-out),
        background-color var(--strive-motion-standard) var(--strive-ease-out),
        border-color var(--strive-motion-standard) var(--strive-ease-out),
        color var(--strive-motion-standard) var(--strive-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-root:active:not(:disabled):not(:focus-visible) {
        transform: scale(0.98);
    }
}

.mud-dialog:focus-visible,
.mud-popover:focus-visible {
    outline: 3px solid var(--strive-cyan);
    outline-offset: 3px;
}

@media (max-width: 800px) {
    .login-page {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        max-width: none;
        padding: clamp(1.5rem, 6vw, 3rem);
        gap: 2rem;
    }

    .login-intro,
    .login-panel {
        width: min(34rem, 100%);
        margin-right: auto;
        margin-left: auto;
    }

    .login-intro h1 {
        max-width: 18ch;
        font-size: clamp(2rem, 10vw, 3.1rem);
    }

    .login-intro-copy {
        margin-bottom: 0;
    }

    .login-benefits,
    .login-connection-art {
        display: none;
    }

    .login-footer {
        width: min(34rem, 100%);
        margin: 0 auto;
    }
}

/*
 * The signed-in surfaces collapse later than the sign-in page. The marketing
 * column needs the full 800px to stay readable, but an operator on a tablet is
 * better served by the denser inline heading row and the real file table.
 */
@media (max-width: 640px) {
    .page-heading-row,
    .upload-card {
        align-items: stretch;
        flex-direction: column;
    }

    .file-picker {
        width: 100%;
    }

    .file-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .file-table,
    .file-table tbody,
    .file-table tr,
    .file-table td {
        display: block;
        width: 100%;
    }

    .file-table tr {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid var(--strive-border);
    }

    .file-table td {
        display: grid;
        grid-template-columns: minmax(7rem, 35%) minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.3rem 0;
        border: 0;
        text-align: left;
    }

    .file-table td::before {
        content: attr(data-label);
        color: var(--strive-muted);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    /* Folders carry no row action, and a bare "ACTION" label reads like a gap. */
    .file-table td:empty {
        display: none;
    }

    .file-name-button,
    .file-name-static {
        max-width: 100%;
    }

    .file-action-cell .button {
        justify-self: start;
    }
}

@media (max-width: 540px) {
    .portal-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-nav {
        width: 100%;
        margin: 0.25rem 0;
    }

    .header-account {
        width: 100%;
        justify-content: space-between;
    }

    .account-name {
        max-width: 52vw;
    }

    .portal-main {
        padding: 1rem;
    }

    .portal-main-login {
        padding: 0;
    }

    .portal-footer {
        flex-direction: column;
    }

    .path-bar,
    .transfer-status-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .login-card-heading {
        align-items: flex-start;
    }

    .login-page {
        padding: 1.25rem 1rem;
        gap: 1.4rem;
    }

    .login-intro-copy {
        font-size: 0.96rem;
    }

    .login-card {
        padding: 1.2rem;
    }

    .login-brand {
        margin-bottom: 1rem;
    }

    .login-footer {
        align-items: flex-start;
        flex-direction: column;
        padding-top: 1rem;
    }
}

@media (max-width: 420px) {
    /* The shield stays at 32px on mobile, per the brand minimum size table. */
    .header-brand-copy small {
        display: none;
    }
}

/*
 * Reduced motion removes positional movement, not state feedback. Opacity and
 * colour transitions are retained at 120ms so alerts, hover, focus and transfer
 * status remain readable as changes rather than snapping without explanation.
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /*
     * Transitions are narrowed to non-positional properties rather than zeroed,
     * so colour and opacity feedback survives. Transforms are neutralised only on
     * the elements that use them for motion; transforms used for layout, such as
     * the password toggle's vertical centring, are left intact.
     */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition-property: opacity, color, background-color, border-color, box-shadow, outline-color !important;
        transition-duration: 120ms !important;
        transition-timing-function: var(--strive-ease-out) !important;
    }

    .button:hover:not(:disabled),
    .button:active:not(:disabled),
    .login-submit-button:hover:not(:disabled) svg {
        transform: none !important;
    }

    .skeleton-row {
        background: #10294a;
    }

    /* Loading must still read as active, so the spinner fades instead of rotating. */
    .login-submit-button::after {
        animation: strive-spinner-fade 900ms ease-in-out infinite alternate !important;
    }

    /* Alerts keep an opacity entry so the state change is still noticed. */
    .alert {
        animation: strive-alert-in-reduced 120ms var(--strive-ease-out) both !important;
    }
}

@keyframes strive-alert-in-reduced {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes strive-spinner-fade {
    from { opacity: 0.45; }
    to { opacity: 1; }
}

@media (prefers-contrast: more) {
    :root {
        --strive-border: #7da6cf;
        --strive-muted: #d2deec;
    }

    .button,
    input,
    .path-card,
    .upload-card,
    .file-list-card,
    .login-card {
        border-width: 2px;
    }
}

@media (forced-colors: active) {
    .benefit-icon,
    .header-mark,
    .login-mark,
    .diagnostic-mark {
        border: 1px solid CanvasText;
    }
}