/* Copyright (c) 2026 DNA Genics, S.L. All rights reserved. */

.aca-ed {
    --aca-ed-surface: #121e23;
    --aca-ed-surface-raised: #1b272b;
    --aca-ed-edge: #625747;
    --aca-ed-rule: #39403e;
    --aca-ed-ivory: #f3e8d8;
    --aca-ed-text: #e3d8cb;
    --aca-ed-muted: #c4b6a5;
    --aca-ed-amber: #efbb78;
    --aca-ed-font: var(--sra-font-display, "Cormorant Garamond", Georgia, serif);
    color: var(--aca-ed-text);
}

.aca-ed-panel {
    background: var(--aca-ed-surface);
    border: 1px solid var(--aca-ed-edge);
    border-radius: .85rem;
    min-width: 0;
}

.aca-ed :is(h2, h3) { color: var(--aca-ed-ivory); font-family: var(--aca-ed-font); }
.aca-ed :is(a, button, summary):focus-visible { outline: 2px solid var(--aca-ed-amber); outline-offset: 3px; }
.aca-ed-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem 1rem; border-block-end: 1px solid var(--aca-ed-rule); padding: .85rem clamp(.8rem, 2vw, 1.55rem); }
.aca-ed-panel-head h2, .aca-ed-alternatives h3, .aca-ed-legend h2 { display: flex; align-items: center; gap: .7rem; margin: 0; }
.aca-ed-panel-head h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); }
.aca-ed-panel-head .dna-icon, .aca-ed-alternatives h3 .dna-icon, .aca-ed-legend h2 .dna-icon { color: var(--aca-ed-amber); font-size: 1.1rem; }
.aca-ed-fit { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .65rem; }
.aca-ed-fit > strong { color: var(--aca-ed-amber); font-size: clamp(1.35rem, 2.8vw, 1.95rem); font-variant-numeric: tabular-nums; }
.aca-ed-fit > span:not(.aca-ed-fit-badge), .aca-ed-pair-score > span:not(.aca-ed-fit-badge, .aca-ed-pair-plus) { color: var(--aca-ed-amber); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; }
.aca-ed-fit-badge, .aca-ed-match-type { display: inline-block; border-radius: 2rem; padding: .2rem .62rem; background: #343c3e; color: #fff5e6; font-size: .76rem; line-height: 1.3; font-weight: 700; text-align: center; }
.aca-ed-fit-badge--close, .aca-ed-match-type--exact { background: #176c42; color: #f2fff4; }
.aca-ed-fit-badge--moderate, .aca-ed-match-type--base { background: #e5ae66; color: #1b1710; }
.aca-ed-fit-badge--distant { background: #8d413b; color: #fff4ec; }
.aca-ed-match-type--subclade { background: #305f83; color: #f2f8ff; }
.aca-ed-match-type--parent, .aca-ed-match-type--close { background: #8b6a43; color: #fff5e6; }
.aca-ed-empty { margin: 0; padding: 1rem; color: var(--aca-ed-muted); }
.aca-ed-callout { display: flex; align-items: baseline; gap: .7rem; padding: .8rem 1rem; margin-block-start: .75rem; border: 1px solid var(--aca-ed-edge); border-radius: .65rem; background: var(--aca-ed-surface); color: var(--aca-ed-text); }
.aca-ed-callout .dna-icon { color: var(--aca-ed-amber); flex-shrink: 0; }
.aca-ed-callout p { margin: 0; }

.aca-ed-weights { list-style: none; padding: .2rem clamp(.7rem, 2vw, 1.5rem); margin: 0; }
.aca-ed-weights li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(.5rem, 2vw, 1.2rem); padding-block: .6rem; }
.aca-ed-weights li + li { border-block-start: 1px solid var(--aca-ed-rule); }
.aca-ed-weight-reference { min-width: 0; }
.aca-ed-weight-reference > strong { display: block; color: var(--aca-ed-ivory); font-size: clamp(.97rem, 1.8vw, 1.16rem); }
.aca-ed-ref-context { display: block; color: var(--aca-ed-muted); font-size: .8rem; overflow-wrap: anywhere; }
.aca-ed-weight-percent { color: var(--aca-ed-amber); font-size: clamp(.99rem, 2.3vw, 1.35rem); font-variant-numeric: tabular-nums; }
.aca-ed-weights meter { display: block; appearance: none; width: 100%; height: .5rem; margin-block-start: .42rem; border: 0; border-radius: .5rem; background: #414644; }
.aca-ed-weights meter::-webkit-meter-bar { height: .5rem; border: 0; border-radius: .5rem; background: #414644; }
.aca-ed-weights meter::-webkit-meter-optimum-value { border-radius: .5rem; background: #e9b36f; }
.aca-ed-weights meter::-moz-meter-bar { border-radius: .5rem; background: #e9b36f; }
.aca-ed-portrait { position: relative; display: grid; place-items: center; flex-shrink: 0; inline-size: var(--aca-ed-portrait-size, 5rem); block-size: var(--aca-ed-portrait-size, 5rem); border-radius: 50%; background: #263538; color: var(--aca-ed-muted); }
.aca-ed-portrait img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid #a98554; border-radius: 50%; }
.aca-ed-portrait:has(img[hidden])::before { content: ""; width: 32%; height: 32%; border-radius: 50%; background: #415353; }
.aca-ed-portrait:has(img[hidden]) .dnai-marker { display: none; }
.aca-ed-portrait--weight { --aca-ed-portrait-size: 5rem; }
.aca-ed-portrait--pair { --aca-ed-portrait-size: clamp(5.4rem, 13vw, 10rem); }
.aca-ed-portrait--pair .dnai-marker { top: 6% !important; }
.aca-ed-portrait--mini { --aca-ed-portrait-size: 2.75rem; }
.aca-ed-portrait--lineage { --aca-ed-portrait-size: 4.5rem; }

.aca-ed-tabs { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: .25rem; padding: .25rem; margin-block: .4rem 1rem; background: #101a20; border: 1px solid #957552; border-radius: 2rem; }
.aca-ed-tabs--pair { max-width: 42rem; margin-inline: auto; }
.aca-ed .aca-ed-tabs a { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.7rem; padding: .45rem .65rem; border-radius: 2rem; color: var(--aca-ed-ivory); font-family: var(--aca-ed-font); font-size: clamp(1.05rem, 2.3vw, 1.4rem); font-weight: 700; line-height: 1.05; text-align: center; text-decoration: none; }
.aca-ed-tabs a .dna-icon { color: var(--aca-ed-amber); font-size: 1rem; }
.aca-ed .aca-ed-tabs a:hover { background: #293435; }
.aca-ed .aca-ed-tabs a[aria-selected="true"] { background: #d6a063; color: #1e1a13; }
.aca-ed-tabs a[aria-selected="true"] .dna-icon { color: #1e1a13; }
.aca-ed [data-aca-chapter-panel][hidden] { display: none !important; }
.aca-ed [data-aca-chapter-panel] { scroll-margin-top: calc(var(--nav-height, 72px) + 1rem); }

.aca-ed-pair-layout { display: grid; grid-template-columns: minmax(7.5rem, .7fr) minmax(0, 2.55fr) minmax(7.5rem, .7fr); align-items: center; gap: clamp(.55rem, 1.7vw, 1.1rem); padding: 1rem clamp(.65rem, 2vw, 1.25rem); }
.aca-ed-pair-note { min-width: 0; padding: .35rem .7rem; }
.aca-ed-pair-note:first-child { border-inline-end: 1px solid var(--aca-ed-rule); }
.aca-ed-pair-note:last-child { border-inline-start: 1px solid var(--aca-ed-rule); }
.aca-ed-pair-note > .dna-icon { color: var(--aca-ed-amber); font-size: 1.35rem; }
.aca-ed-pair-note h3 { margin: .3rem 0 .4rem; font-size: clamp(1.12rem, 2.5vw, 1.5rem); }
.aca-ed-pair-note p { margin: 0; color: var(--aca-ed-text); font-size: .85rem; }
.aca-ed-pair-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(.3rem, 1.5vw, .9rem); text-align: center; }
.aca-ed-pair-reference--first { grid-column: 1; grid-row: 1; }
.aca-ed-pair-reference--second { grid-column: 3; grid-row: 1; }
.aca-ed-pair-reference h3 { font-size: clamp(1.03rem, 2.35vw, 1.5rem); margin: .5rem 0 .18rem; }
.aca-ed-pair-image { position: relative; inline-size: max-content; margin-inline: auto; }
.aca-ed-pair-weight { position: absolute; inset-inline-end: -.1rem; inset-block-end: -.1rem; z-index: 1; padding: .42rem .53rem; border: 2px solid #121e23; border-radius: 2rem; background: #dfac6e; color: #1b1710; line-height: 1; }
.aca-ed-pair-score { display: grid; grid-column: 2; grid-row: 1; justify-items: center; align-self: center; gap: .26rem; }
.aca-ed-pair-plus { color: var(--aca-ed-muted); font-size: 1.45rem; }
.aca-ed-pair-score strong { color: var(--aca-ed-ivory); font-family: var(--aca-ed-font); font-size: clamp(1.5rem, 3.3vw, 2.35rem); line-height: 1; }
.aca-ed-alternatives { margin-block-start: .8rem; overflow: auto; max-height: 26rem; }
.aca-ed-alternatives h3 { padding: .6rem 1rem; border-block-end: 1px solid var(--aca-ed-edge); font-size: 1.35rem; }
/* Override the site-wide light table text color in these dark report panels. */
.aca-root :is(.aca-ed-alternatives-table, .aca-pca-values-table) { width: 100%; border-collapse: collapse; text-align: start; color: #f1e7da !important; }
.aca-ed-alternatives-table :is(th, td) { border-block-end: 1px solid var(--aca-ed-rule); padding: .45rem .55rem; text-align: start; }
.aca-root :is(.aca-ed-alternatives-table, .aca-pca-values-table) thead th { background: #25343b; color: #fff3df; }
.aca-root :is(.aca-ed-alternatives-table, .aca-pca-values-table) tbody :is(th, td) { background: #122129; color: #f1e7da; }
.aca-root :is(.aca-ed-alternatives-table, .aca-pca-values-table) tbody tr:nth-child(even) > :is(th, td) { background: #1b2c34; }
.aca-ed-alternatives-table th { font-size: .73rem; letter-spacing: .06em; text-transform: uppercase; }
.aca-ed-alternative-reference { display: flex; align-items: center; gap: .55rem; min-width: 9rem; }
.aca-ed :is(.aca-ed-weight-reference, .aca-ed-pair-reference, .aca-ed-alternative-reference) .dna-accession-badge { margin-block: .2rem; }

.aca-ed-lineage-intro { text-align: center; margin-block-end: 1.15rem; }
.aca-ed-lineage-intro p { max-width: 44rem; margin: .6rem auto .8rem; }
.aca-ed-lineage-profile { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin: 0; }
.aca-ed-lineage-profile:empty { display: none; }
.aca-ed-lineage-profile > div { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; border: 1px solid #957552; border-radius: .55rem; background: var(--aca-ed-surface); padding: .5rem .72rem; }
.aca-ed-lineage-profile dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.aca-ed-lineage-profile dt .dna-icon { margin-inline-end: .4rem; }
.aca-ed-lineage-profile dd { margin: 0; color: var(--aca-ed-ivory); font-weight: 700; }
.aca-ed-lineage-maternal .dna-icon { color: #e292a5; }
.aca-ed-lineage-paternal .dna-icon { color: #82b6eb; }
.aca-ed-lineage-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: .72rem; padding: .75rem; }
.aca-ed-lineage-columns > section { min-width: 0; border: 1px solid var(--aca-ed-edge); border-radius: .65rem; padding: .7rem; }
.aca-ed-lineage-columns h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; font-size: clamp(1.35rem, 2.7vw, 1.8rem); }
.aca-ed-lineage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.aca-ed-lineage-card { display: flex; min-width: 0; align-items: center; gap: .6rem; border: 1px solid var(--aca-ed-rule); border-radius: .55rem; background: var(--aca-ed-surface-raised); padding: .6rem; }
.aca-ed-lineage-card > div { min-width: 0; }
.aca-ed .aca-ed-lineage-name { display: block; font-family: var(--aca-ed-font); color: var(--aca-ed-ivory); font-size: 1.12rem; font-weight: 700; line-height: 1.05; }
.aca-ed a.aca-ed-lineage-name:hover { color: var(--aca-ed-amber); }
.aca-ed-lineage-card .aca-ed-match-type { margin-block: .22rem; }
.aca-ed-legend { padding: .75rem; }
.aca-ed-legend h2 { font-size: 1.3rem; margin-block-end: .65rem; }
.aca-ed-legend dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: .55rem; margin: 0; }
.aca-ed-legend dd { font-size: .8rem; margin: .35rem 0 0; }

.aca-ed-resources { display: grid; gap: .8rem; margin-block-start: .8rem; }
.aca-ed-resources--paired { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.aca-ed-resource-panel { padding: clamp(.75rem, 2vw, 1.3rem); }
.aca-ed-resource-panel > header { margin-block-end: .72rem; }
.aca-ed-resource-panel > header h2 { margin: 0 0 .35rem; font-size: clamp(1.6rem, 3.3vw, 2.25rem); }
.aca-ed-resource-panel > header p { color: var(--aca-ed-text); font-size: .93rem; }
.aca-ed .aca-ed-ai { margin: 0; border: 1px solid var(--aca-ed-edge); border-radius: .65rem; background: var(--aca-ed-surface-raised); padding: .75rem; color: var(--aca-ed-text); }
.aca-ed-ai-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .45rem; margin-block-end: .65rem; }
.aca-ed-ai-heading h3 { margin: 0; font-size: 1.2rem; }
.aca-ed-ai-heading small { color: var(--aca-ed-muted); }
.aca-ed-ai-heading .badge-success { background: #22553e; color: #d5fae0; }
.aca-ed-ai-prompts { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-end: .75rem; }
.aca-ed-ai-prompts button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .37rem .6rem; border: 1px solid var(--aca-ed-edge); border-radius: 2rem; background: var(--aca-ed-surface); color: var(--aca-ed-ivory); font-size: .8rem; cursor: pointer; }
.aca-ed-ai-prompts button:hover { border-color: var(--aca-ed-amber); }
.aca-ed .aca-ed-ai-action { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.55rem; padding: .5rem .75rem; border: 1px solid #e5b777; border-radius: .45rem; background: #e2ac69; color: #191511; font-weight: 750; text-decoration: none; cursor: pointer; }
.aca-ed .aca-ed-ai-action:hover { background: #efbf80; color: #191511; }
.aca-ed .aca-ed-ai-sample { background: var(--aca-ed-surface); color: var(--aca-ed-text); padding: .7rem; }
.aca-ed .aca-ed-ai .ai-results:empty { display: none; }
.aca-ed-science { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.aca-ed-science > div { background: var(--aca-ed-surface-raised); border: 1px solid var(--aca-ed-rule); border-radius: .55rem; padding: .62rem; }
.aca-ed-science > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.aca-ed-science dt { display: flex; align-items: center; gap: .5rem; margin-block-end: .25rem; color: var(--aca-ed-ivory); }
.aca-ed-science dt .dna-icon { color: var(--aca-ed-amber); }
.aca-ed-science dd { margin: 0; color: var(--aca-ed-text); font-size: .84rem; }
.aca-ed-faq { margin-block-start: .8rem; }
.aca-ed-faq details + details { border-block-start: 1px solid var(--aca-ed-rule); }
.aca-ed-faq summary { padding-block: .65rem; color: var(--aca-ed-ivory); font-weight: 700; cursor: pointer; }
.aca-ed-faq details p { margin-block: 0 .7rem; }

.aca-pca [data-aca-pca-tone] { --aca-pca-color: #a6aeb3; }
.aca-pca [data-aca-pca-tone="profile"] { --aca-pca-color: #ffcd86; }
.aca-pca [data-aca-pca-tone="0"] { --aca-pca-color: #70cfbe; }
.aca-pca [data-aca-pca-tone="1"] { --aca-pca-color: #8aa9ee; }
.aca-pca [data-aca-pca-tone="2"] { --aca-pca-color: #e18daf; }
.aca-pca [data-aca-pca-tone="3"] { --aca-pca-color: #b9abed; }
.aca-pca [data-aca-pca-tone="4"] { --aca-pca-color: #a4d378; }
.aca-pca [data-aca-pca-tone="5"] { --aca-pca-color: #eea68b; }
.aca-pca-plot svg { overflow: visible; }
.aca-pca-plot .aca-pca-axis-value { font-size: 12px; }
.aca-pca-point[role="button"] { cursor: pointer; }
.aca-pca-point:focus-visible { outline: none; }
.aca-pca-dot { fill: var(--aca-pca-color); stroke: #0c171e; stroke-width: 1.35px; }
.aca-pca-hit { fill: transparent; stroke: none; }
.aca-pca-point:is(:focus-visible, [data-aca-pca-active], [aria-pressed="true"]) .aca-pca-hit { stroke: var(--aca-pca-color); stroke-width: 1.6px; }
.aca-pca-tooltip { margin-block: .28rem .48rem; padding: .55rem .68rem; border: 1px solid #b69a71; border-radius: .48rem; background: #0c1922; color: #f1e7da; }
.aca-pca-tooltip > strong { display: block; margin-block-end: .28rem; color: #ffcd86; overflow-wrap: anywhere; }
.aca-pca-tooltip dl { display: flex; flex-wrap: wrap; gap: .15rem .75rem; margin: 0; font-size: .78rem; }
.aca-pca-tooltip dl > div { display: flex; align-items: baseline; gap: .3rem; min-width: 0; }
.aca-pca-tooltip dt { color: #c9bdab; white-space: nowrap; }
.aca-pca-tooltip dd { margin: 0; overflow-wrap: anywhere; }
.aca-pca-legend { display: flex; flex-wrap: wrap; gap: .3rem .85rem; list-style: none; margin: .38rem 0 0; padding: 0; color: #f1e7da; font-size: .82rem; }
.aca-pca-legend li { display: inline-flex; align-items: center; gap: .38rem; }
.aca-pca-swatch { display: inline-block; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--aca-pca-color); }
.aca-pca-legend [data-aca-pca-tone="profile"] .aca-pca-swatch { border-radius: .05rem; transform: rotate(45deg); }
.aca-root .aca-pca-instructions { margin-block: .42rem 0; color: #c9bdab; font-size: .78rem; }
.aca-pca-values .aca-table-wrap { margin-block-start: .5rem; max-height: 23rem; }
.aca-pca-values-table thead { position: sticky; inset-block-start: 0; }
.aca-pca-values-table tbody td:nth-last-child(-n + 2) { font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1130px) {
    .aca-ed-pair-layout { grid-template-columns: 1fr 1fr; }
    .aca-ed-pair-stage { grid-column: 1 / -1; grid-row: 1; width: min(100%, 36rem); margin-inline: auto; }
    .aca-ed-pair-note:first-child, .aca-ed-pair-note:last-child { border-inline: 0; border-block-start: 1px solid var(--aca-ed-rule); }
    .aca-ed-lineage-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .aca-ed-resources--paired, .aca-ed-lineage-columns { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .aca-ed .aca-ed-tabs a { gap: .25rem; padding-inline: .27rem; overflow-wrap: anywhere; }
    .aca-ed-tabs a .dna-icon { display: none; }
    .aca-ed-portrait--weight { --aca-ed-portrait-size: 4.5rem; }
    .aca-ed-pair-reference--second { grid-column: 2; }
    .aca-ed-pair-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .aca-ed-pair-score { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: .36rem; margin-block-start: .4rem; }
    .aca-ed-pair-score .aca-ed-pair-plus { display: none; }
    .aca-ed-science { grid-template-columns: 1fr; }
}