/**
 * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * Period-aware Ancient Composition report (/ancestry/ancientcomposition?period=XXXX).
 * Adds only the small deltas needed on top of the v1 report design
 * (AncestryAncientComposition.css / DeepAncestryReport.css / AncientCompositionK15.css),
 * which stay untouched. Hides report sections while the selected timeframe is not
 * ready yet, and styles the "Change timeframe" hero action and the
 * calculation status card.
 */

.dar-hero-change-timeframe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1.25rem;
    padding: 8px 20px;
    border: 1px solid var(--dar-sand, #A89F91);
    border-radius: 24px;
    font-family: var(--dar-font-accent, 'Josefin Sans', sans-serif);
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    color: var(--dar-bone, #E8E4DC);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.dar-hero-change-timeframe:hover,
.dar-hero-change-timeframe:focus {
    border-color: var(--dar-amber, #C4956A);
    color: var(--dar-amber, #C4956A);
    text-decoration: none;
}

.dar-hero-change-timeframe .dna-icon {
    width: 14px;
    height: 14px;
}

/* Not-ready state: keep the hero and the reused ack15-status panel visible,
   hide the report body sections so the timeframe report never shows an
   empty/broken-looking section instead of the calculation status. */
.dar-report[data-period-ready="false"] .dar-page-nav,
.dar-report[data-period-ready="false"] .dar-bottom-nav,
.dar-report[data-period-ready="false"] .dar-scroll-progress,
.dar-report[data-period-ready="false"] .dar-back-to-top {
    display: none !important;
}

.dar-report[data-period-ready="false"] > section:not(#hero):not(#status-panel) {
    display: none !important;
}

/* The v1 hero is a full 100vh cinematic entrance meant to lead into a long,
   multi-chapter report. With no report body behind it, that height just
   leaves a large empty void above the status panel. Collapse it to a
   content-driven height (still clearing the fixed navbar) while the
   timeframe is not ready. Once the report is ready this override no longer
   applies and the hero regains its full v1 presentation. */
.dar-report[data-period-ready="false"] #hero.dar-hero {
    min-height: 0;
    padding: 160px 24px 110px;
}

@media (max-width: 767px) {
    .dar-report[data-period-ready="false"] #hero.dar-hero {
        padding: 128px 16px 88px;
    }
}

/* Keep the whole #content region on the report's dark canvas, including the
   space after the report's </main> where the shared _ProductRelatedItems
   partial renders. The v1 report never surfaces this because its report
   body is thousands of pixels tall; the not-ready state here is short
   enough that any light default background behind/around the shared
   related-items block would otherwise show as a jarring pale gap. Scoped to
   pages that load this stylesheet (the period view only), so v1 is
   unaffected. */
body:has(.dar-report) #content,
body:has(.dar-report) #content-fluid {
    background: #0D0D0F !important;
}

/* Calculation status card.
   Single column by design: the panel renders server-authored status messages of
   arbitrary length, so nothing here may sit in a max-content-sized track. The
   previous implementation reused the K15 chooser's
   `grid-template-columns: 72px minmax(0,1fr) minmax(390px,auto)` row, whose
   auto-max third column grew to fit a long message and collapsed the copy
   column to roughly one word wide. Colors come from the v1 report's --dar-*
   tokens so the card reads as part of this report rather than a transplant. */
.aac-calc {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 720px;
    margin: -4rem auto 4rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border: 1px solid rgba(168, 159, 145, 0.22);
    border-radius: 20px;
    background: #151719;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    color: var(--dar-bone, #E8E4DC);
    text-align: left;
}

.aac-calc *,
.aac-calc *::before,
.aac-calc *::after {
    box-sizing: border-box;
}

/* Server messages and stage copy can be long and unbroken; never let them
   push the card wider than its container. */
.aac-calc p,
.aac-calc h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.aac-calc-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.aac-calc-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(196, 149, 106, 0.45);
    border-radius: 50%;
    color: var(--dar-amber, #C4956A);
}

.aac-calc-icon .dna-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.aac-calc--failed .aac-calc-icon {
    border-color: #704b40;
    color: #e09278;
}

.aac-calc--unavailable .aac-calc-icon {
    border-color: rgba(168, 159, 145, 0.3);
    color: var(--dar-sand, #A89F91);
}

.aac-calc-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid rgba(196, 149, 106, 0.4);
    border-radius: 20px;
    background: rgba(196, 149, 106, 0.1);
    color: var(--dar-amber, #C4956A);
    font-family: var(--dar-font-accent, 'Josefin Sans', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.aac-calc--failed .aac-calc-chip {
    border-color: rgba(224, 146, 120, 0.45);
    background: rgba(224, 146, 120, 0.1);
    color: #e09278;
}

.aac-calc--unavailable .aac-calc-chip {
    border-color: rgba(168, 159, 145, 0.32);
    background: rgba(168, 159, 145, 0.08);
    color: var(--dar-sand, #A89F91);
}

.aac-calc-title {
    margin: 0 0 0.5rem;
    color: var(--dar-ivory, #F5F3EF);
    font-family: var(--dar-font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 500;
    line-height: 1.15;
}

/* Reserves height so swapping the polled message does not shift the actions
   below it on every poll. */
.aac-calc-message-slot {
    width: 100%;
    min-height: 3rem;
}

.aac-calc-message {
    margin: 0;
    color: var(--dar-sand, #A89F91);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Indeterminate by design: the status API reports no percentage or ETA, so the
   bar communicates "work is happening" without implying measured progress. */
.aac-calc-bar {
    position: relative;
    width: 100%;
    height: 4px;
    margin: 1.5rem 0 0.75rem;
    border-radius: 2px;
    background: rgba(168, 159, 145, 0.16);
    overflow: hidden;
}

.aac-calc-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 38%;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(196, 149, 106, 0), var(--dar-amber, #C4956A), rgba(196, 149, 106, 0));
    animation: aac-calc-slide 1.9s ease-in-out infinite;
}

@keyframes aac-calc-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(363%); }
}

@media (prefers-reduced-motion: reduce) {
    .aac-calc-bar-fill {
        width: 100%;
        animation: none;
        background: repeating-linear-gradient(
            90deg,
            rgba(196, 149, 106, 0.55) 0 10px,
            rgba(196, 149, 106, 0.18) 10px 20px
        );
    }
}

.aac-calc-live {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.75rem;
    width: 100%;
    margin: 0;
    color: var(--dar-sand, #A89F91);
    font-size: 0.8125rem;
}

.aac-calc-elapsed {
    color: var(--dar-bone, #E8E4DC);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.aac-calc-stage {
    min-width: 0;
}

.aac-calc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    width: 100%;
    margin-top: 1.75rem;
}

.aac-calc-form {
    margin: 0;
}

.aac-calc-primary {
    min-width: 180px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--dar-amber, #C4956A);
    border-radius: 4px;
    background: var(--dar-amber, #C4956A);
    color: #18130c;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.aac-calc-primary:hover:not(:disabled),
.aac-calc-primary:focus-visible:not(:disabled) {
    background: #d9ac83;
    border-color: #d9ac83;
}

.aac-calc-primary:disabled {
    opacity: 0.55;
    cursor: progress;
}

.aac-calc-text-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--dar-sand, #A89F91);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.22rem;
}

.aac-calc-text-action:hover,
.aac-calc-text-action:focus {
    color: var(--dar-amber, #C4956A);
}

.aac-calc-note {
    width: 100%;
    margin: 1rem 0 0;
    color: var(--dar-sand, #A89F91);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.aac-calc-note:empty {
    display: none;
}

.aac-calc-detail {
    width: 100%;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(168, 159, 145, 0.14);
    color: rgba(168, 159, 145, 0.75);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* AncientCompositionPeriod.js toggles the progress block, the start form, the
   "Browse other timeframes" link, and the detail line with the plain HTML
   "hidden" attribute so a polled state transition (Idle <-> Processing <->
   Failed/Unavailable) never needs a full page reload. The bare [hidden]
   attribute is not enough on its own here: several of these rules set an
   explicit `display` value (flex/inline-flex), which otherwise wins over the
   browser's default (non-author, lower-priority) `[hidden] { display: none }`
   rule at equal selector specificity. */
.aac-calc-bar[hidden],
.aac-calc-live[hidden],
.aac-calc-form[hidden],
.aac-calc-text-action[hidden],
.aac-calc-detail[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .aac-calc {
        margin: -2.5rem 1rem 3rem;
    }
}

@media (max-width: 479px) {
    .aac-calc-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .aac-calc-form,
    .aac-calc-primary {
        width: 100%;
    }

    .aac-calc-text-action {
        justify-content: center;
    }
}

/* Soft fade so the dark hero/status canvas never ends on a hard edge right
   above the shared related-items block rendered after </main>. */
.aac-period-fade {
    height: 72px;
    background: linear-gradient(180deg, #0d0d0f 0%, rgba(13, 13, 15, 0) 100%);
}

/* In-report era navigator: lets the user jump between timeframes
   (/ancestry/ancientcomposition?period=XXX) without returning to the
   chooser grid. Rendered right after the hero, in every report state
   (ready or not), so it is always available. Styled as a quiet
   continuation of the v1 cinematic hero (DeepAncestryReport.css --dar-*
   tokens: Josefin Sans accent labels, Cormorant serif not needed here,
   thin copper/amber accents) rather than the flat K15-chooser chip style,
   since it renders directly beneath the hero's own design. */
.aac-era-nav {
    position: relative;
    z-index: 2;
    background: var(--dar-obsidian, #0D0D0F);
    border-top: 1px solid rgba(168, 159, 145, 0.16);
    padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
    text-align: center;
}

.aac-era-nav-label {
    display: block;
    font-family: var(--dar-font-accent, 'Josefin Sans', sans-serif);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dar-amber, #C4956A);
}

.aac-era-nav-divider {
    width: 40px;
    height: 1px;
    background: var(--dar-copper, #8B6D4F);
    margin: 0.75rem auto 1.25rem;
}

.aac-era-nav-row {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.aac-era-nav-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--dar-sand, #A89F91);
    font-size: 1.375rem;
    line-height: 1;
    text-decoration: none;
}

.aac-era-nav-arrow:hover,
.aac-era-nav-arrow:focus {
    color: var(--dar-amber, #C4956A);
    text-decoration: none;
}

.aac-era-nav-arrow.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* Fades the scrollable pill row into the bar's own background at both
   ends (instead of hard-clipping the last pill mid-word) so the row reads
   as intentionally scrollable rather than broken. */
.aac-era-nav-scroller {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.aac-era-nav-scroller::before,
.aac-era-nav-scroller::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    z-index: 1;
    pointer-events: none;
}

.aac-era-nav-scroller::before {
    left: 0;
    background: linear-gradient(90deg, var(--dar-obsidian, #0D0D0F), transparent);
}

.aac-era-nav-scroller::after {
    right: 0;
    background: linear-gradient(270deg, var(--dar-obsidian, #0D0D0F), transparent);
}

.aac-era-nav-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 6px;
}

.aac-era-nav-track::-webkit-scrollbar {
    display: none;
}

.aac-era-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
    font-family: var(--dar-font-accent, 'Josefin Sans', sans-serif);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dar-sand, #A89F91);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.aac-era-pill:hover,
.aac-era-pill:focus {
    color: var(--dar-bone, #E8E4DC);
    text-decoration: none;
}

.aac-era-pill.is-active {
    color: var(--dar-ivory, #F5F3EF);
    border-color: var(--dar-amber, #C4956A);
    font-weight: 500;
}

.aac-era-pill.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .aac-era-nav {
        padding: 1.5rem 0.75rem 1.25rem;
    }

    .aac-era-nav-row {
        gap: 0;
    }

    .aac-era-nav-arrow {
        width: 24px;
        height: 24px;
        font-size: 1.2rem;
    }

    .aac-era-nav-scroller::before,
    .aac-era-nav-scroller::after {
        width: 18px;
    }

    .aac-era-pill {
        padding: 6px 10px;
        font-size: 0.6875rem;
    }
}