atlas.css

.atlas { --ink:#173c30; --muted:#647467; position:relative; overflow:hidden; color:var(--ink); background:transparent; border:0; border-radius:0; padding:24px 20px 14px; font-family:Arial,Helvetica,sans-serif; }
.atlas * { box-sizing:border-box; }
.atlas-header { display:flex; justify-content:space-between; align-items:center; gap:28px; }
.atlas-kicker { font-size:10px; font-weight:700; letter-spacing:1.5px; line-height:1.6; text-transform:uppercase; color:#527261; }
.atlas-kicker span { padding:0 8px; color:#9aaa95; }
.atlas h1 { font:400 clamp(29px,3.8vw,47px)/1.08 Georgia,'Times New Roman',serif; letter-spacing:-1.5px; margin:12px 0; color:var(--ink); }
.atlas h1 span { color:#68a788; }
.atlas-header p { margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
.atlas-summary-block { min-width:270px; padding-left:26px; border-left:1px solid #dbe3d3; }
.atlas-summary { display:flex; align-items:center; gap:12px; margin-top:8px; }
.atlas-summary strong { font-size:33px; font-weight:500; letter-spacing:-1.4px; font-variant-numeric:tabular-nums; }
.atlas-summary span { font-size:11px; line-height:1.6; color:var(--muted); }
.atlas-badge { padding:7px 9px; font-size:13px; background:#dfeedd; color:#285b40; border-radius:8px; white-space:nowrap; }
.atlas button { font:inherit; cursor:pointer; }
.atlas-nav { display:flex; align-items:center; gap:12px; margin:25px 0 10px; }
.atlas-shortcuts { display:flex; flex-wrap:wrap; gap:7px; }
.atlas-shortcuts button { border:1px solid #cfdcc9; background:#ffffff80; border-radius:30px; padding:8px 15px; color:#315641; font-size:12px; transition:background .15s; }
.atlas-shortcuts button:hover { background:#dfeedd; }
.tree-scroll { margin:0 -5px; }
.life-tree { display:block; width:100%; height:auto; overflow:visible; }
.flow { stroke:none; transition:opacity .15s; }
.flow-annotated { fill:#40916f; opacity:.42; }
.flow-missing { fill:#cfd5c9; opacity:.6; }
/* The flux feeding the current selection stays emphasised, so the trunk you
   have walked reads at a glance against the lineages you passed over. */
.flow.is-path { opacity:.74; }
.flow-annotated.is-path { fill:#39875f; }
.flow-missing.is-path { fill:#c2c9ba; }
/* Lighting a group also lights the flux arriving at it, so you can see where
   a group's assemblies came from. Applied from atlas.js, since the ribbons are
   painted under every node and cannot be reached with a CSS sibling rule.
   Listed after the trunk rules so a hover still wins on the selected path. */
.flow.is-lit { opacity:.9; }
.flow-annotated.is-lit { fill:#2f7d5c; }
.flow-missing.is-lit { fill:#b4bdac; }
.bar-annotated { fill:#287557; }
.bar-missing { fill:#bcc4b5; }
.bar-outline { fill:none; stroke:#f7f8f0; stroke-width:1; }
.tree-node { cursor:pointer; }
.tree-node.is-direct { cursor:default; }
.tree-hit { fill:transparent; }
.tree-node:focus { outline:none; }
.tree-node:focus .bar-outline { stroke:#173c30; stroke-width:2; }
.tree-node.is-selected .bar-outline { stroke:#173c30; stroke-width:1.5; }
.tree-node.is-sibling { opacity:.62; transition:opacity .15s; }
.tree-node.is-sibling:hover,.tree-node.is-sibling:focus { opacity:1; }
.tree-icon { opacity:.62; transition:opacity .15s; }
.tree-node.is-selected .tree-icon { opacity:.85; }
.tree-label,.tree-english,.tree-count { paint-order:stroke; stroke:#f7f8f0; stroke-width:4px; stroke-linejoin:round; text-anchor:middle; }
.tree-label { font:600 13px Arial,Helvetica,sans-serif; fill:#254735; transition:fill .15s; }
.tree-node.is-selected .tree-label { font-weight:700; fill:#173c30; }
.tree-english { font:italic 11.5px Georgia,'Times New Roman',serif; fill:#5d7a66; }
.tree-count { font:11px Arial,Helvetica,sans-serif; fill:#697966; }
.tree-node.is-lit:not(.is-direct) .tree-label,.tree-node:focus .tree-label { fill:#0f2e22; }
.tree-node.is-lit:not(.is-direct) .bar-outline { stroke:#287557; stroke-width:2; }
.tree-node.is-lit { opacity:1; }
.tree-node.is-lit .tree-icon { opacity:.9; }
.atlas-footer { display:flex; align-items:center; flex-wrap:wrap; gap:15px; justify-content:space-between; border-top:1px solid #dde4d5; padding-top:14px; color:#6c7a66; font-size:11px; line-height:1.6; }
.atlas-legend { display:flex; gap:7px; align-items:center; }
.atlas-swatch { width:10px; height:10px; border-radius:2px; }
.atlas-annotated { background:#287557; }
.atlas-missing { background:#bcc4b5; }
.atlas-date { opacity:.8; }
.atlas-footnote { font-size:10px; line-height:1.6; color:#77816e; margin-top:12px; max-width:860px; }
.atlas-tooltip { position:absolute; z-index:5; pointer-events:none; max-width:290px; padding:12px 15px; border-radius:12px; color:#f5f8ef; background:#1d4334; font-size:12px; line-height:1.7; box-shadow:0 5px 20px #18372122; }
.atlas-tooltip[hidden] { display:none; }
.atlas button:focus-visible { outline:2px solid #327555; outline-offset:3px; }
.atlas-leaf-note { color:#647467; font-size:13px; text-align:center; margin:0 0 20px; }
@media(max-width:800px) {
 .atlas { padding:18px 10px 14px; }
 /* Levels fill the page width, so on a phone the only way to keep the labels
    legible is to let the chart itself scroll sideways again. */
 .tree-scroll { overflow-x:auto; overscroll-behavior-x:contain; }
 .life-tree { min-width:720px; }
 .atlas-header { align-items:flex-start; flex-direction:column; gap:18px; }
 .atlas-summary-block { border-left:0; padding:0; min-width:0; }
 .atlas-summary { flex-wrap:wrap; }
 .atlas h1 { font-size:35px; }
 .atlas-nav { flex-wrap:wrap; margin-top:18px; }
 .atlas-footer { gap:9px; }
}
@media(prefers-reduced-motion:reduce) { .atlas * { transition:none!important; } }