/**
 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * Loading plates and processing states for the ancestry Atlas reports.
 */

.atlas-wait {
    --atlas-wait-bg: #0d1116;
    --atlas-wait-surface: #141a21;
    --atlas-wait-text: #efe6d6;
    --atlas-wait-muted: #bdc6cf;
    --atlas-wait-accent: var(--rra-accent-strong, #e8c172);
    --atlas-wait-rule: var(--rra-accent-line, #544732);
    --atlas-wait-serif: "Cormorant Garamond", Georgia, serif;
    box-sizing: border-box;
    min-height: 100vh;
    padding: calc(var(--nav-height, 72px) + 24px) clamp(16px, 4vw, 56px) 48px;
    background: var(--atlas-wait-bg);
    color: var(--atlas-wait-text);
    font-family: Inter, system-ui, sans-serif;
}

.atlas-wait[data-report-key="ancient-composition"] {
    --atlas-wait-bg: #06141c;
    --atlas-wait-surface: #122129;
    --atlas-wait-muted: #d0c6b6;
    --atlas-wait-accent: #f4c482;
    --atlas-wait-rule: #655038;
}

.atlas-wait.atlas-wait--overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    min-height: 0;
    overflow: auto;
    padding: 24px clamp(16px, 4vw, 56px);
    background: var(--atlas-wait-bg);
    transition: none;
}

.atlas-wait__frame {
    box-sizing: border-box;
    width: min(100%, 960px);
    margin-inline: auto;
    border: 1px solid var(--atlas-wait-rule);
    border-radius: 14px;
    background: var(--atlas-wait-surface);
    overflow: hidden;
}

.atlas-wait--overlay .atlas-wait__frame {
    width: min(100%, 740px);
    margin-block: auto;
}

.atlas-wait__plate {
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: end;
    min-height: 224px;
    padding: clamp(20px, 4vw, 40px);
    border-bottom: 1px solid var(--atlas-wait-rule);
    background: #172129;
}

.atlas-wait--overlay .atlas-wait__plate { min-height: 176px; }

.atlas-wait__plate::after,
.atlas-wait__artwork {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.atlas-wait__artwork { background-size: cover; background-position: center 42%; }
.atlas-wait__plate::after { content: ""; background: rgba(7, 12, 17, .72); }

.atlas-wait__heading h1,
.atlas-wait__heading h2 {
    margin: 0;
    color: var(--atlas-wait-text);
    font: 600 clamp(2.25rem, 5vw, 4.1rem)/1.02 var(--atlas-wait-serif);
    overflow-wrap: anywhere;
}

.atlas-wait__heading p {
    margin: 10px 0 0;
    color: var(--atlas-wait-accent);
    overflow-wrap: anywhere;
}

.atlas-wait__sample,
.atlas-wait__check { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.atlas-wait__status,
.atlas-wait .aac-calc { padding: clamp(20px, 4vw, 40px); }

.atlas-wait__status-row { display: flex; align-items: center; gap: clamp(14px, 3vw, 24px); }
.atlas-wait__indicator { flex: 0 0 42px; --loading-primary: var(--atlas-wait-accent); }
.atlas-wait__indicator .dna-ladder { box-sizing: border-box; --dna-ladder-height: 52px; margin: 0; }
.atlas-wait__status-copy { min-width: 0; }

.atlas-wait__status h2,
.atlas-wait .aac-calc-title {
    margin: 0;
    color: var(--atlas-wait-text);
    font: 600 clamp(1.65rem, 3.3vw, 2.45rem)/1.1 var(--atlas-wait-serif);
    overflow-wrap: anywhere;
}

.atlas-wait__status p,
.atlas-wait .aac-calc p {
    margin: 8px 0 0;
    color: var(--atlas-wait-muted);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.atlas-wait [data-atlas-status] { color: var(--atlas-wait-accent); }
.atlas-wait [data-atlas-status]:empty { display: none; }
.atlas-wait__progress-row { display: flex; align-items: center; gap: 12px; margin-block-start: 20px; }
.atlas-wait progress { flex: 1 1 auto; width: 100%; min-width: 0; height: 10px; accent-color: var(--atlas-wait-accent); }
.atlas-wait__progress-row span, .atlas-wait__stats dd { font-variant-numeric: tabular-nums; }

.atlas-wait__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
    gap: 14px;
    margin: 22px 0 0;
}

.atlas-wait__stats div { border-top: 1px solid var(--atlas-wait-rule); padding-block-start: 10px; }
.atlas-wait__stats dt { color: var(--atlas-wait-muted); font-size: .85rem; font-weight: 500; }
.atlas-wait__stats dd { margin: 4px 0 0; color: var(--atlas-wait-text); overflow-wrap: anywhere; }

.atlas-wait .atlas-wait__check { margin-block-start: 18px; }
.atlas-wait__actions,
.atlas-wait .aac-calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-block-start: 18px; }

.atlas-wait a.atlas-wait__link,
.atlas-wait .aac-calc-text-action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--atlas-wait-accent);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.atlas-wait--overlay .atlas-wait__link { margin-block-start: 10px; }
.atlas-wait :focus-visible { outline: 2px solid var(--atlas-wait-accent); outline-offset: 4px; }
.atlas-wait [hidden] { display: none !important; }

.atlas-wait .aac-calc-head { display: flex; align-items: center; gap: 10px; margin-block-end: 12px; color: var(--atlas-wait-accent); }
.atlas-wait .aac-calc-note:empty, .atlas-wait .aac-calc-message:empty { display: none; }
.atlas-wait .aac-calc-bar { height: 4px; margin-block: 18px 10px; overflow: hidden; background: var(--atlas-wait-rule); }
.atlas-wait .aac-calc-bar-fill { display: block; width: 100%; height: 100%; background: var(--atlas-wait-accent); opacity: .58; }
.atlas-wait .aac-calc-primary {
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--atlas-wait-accent);
    border-radius: 6px;
    background: var(--atlas-wait-accent);
    color: #16120a;
    font-weight: 650;
}

.atlas-wait .aac-calc-primary:disabled { opacity: .65; }
.atlas-wait .aac-calc-actions form { margin: 0; }

@media (max-width: 480px) {
    .atlas-wait__plate { min-height: 174px; }
    .atlas-wait__heading h1, .atlas-wait__heading h2 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
    .atlas-wait--overlay .atlas-wait__plate { min-height: 132px; }
    .atlas-wait__status-row { align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-wait .dna-ladder * { animation: none !important; }
    .atlas-wait progress:indeterminate { appearance: none; background: var(--atlas-wait-rule); }
}