/* Flora & Birds as data (/nature/*/data/ and the blocks on each species page). Built by tools/nature_data.py. Bars are
   1000-unit SVG strips stretched to their row; names and numbers are HTML text. Colours are theme variables, so light
   and dark follow; a colour tag's swatch takes its fill from the nature palette in the markup. */
.nd-block { margin: 1.6rem 0 1.4rem; }
.nd-block h2 { margin: 0 0 .5rem; }
.reading .nd-caption { font-size: .86rem; line-height: 1.6; color: var(--text2, #716669); margin: .3rem 0 .6rem; }
.nd-says { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0 .6rem; }
.reading .nd-says { font-size: .95rem; line-height: 1.65; }
.nd-says::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; margin-top: .1rem; background: url("/characters/xiaojiao/xiaojiao-avatar-64.png") center / cover no-repeat; }
.nd-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.nd-links a::after, .nd-next a::after { content: " →"; }
.nd-strip { display: block; width: 100%; height: 12px; min-width: 0; }
.nd-bar { fill: var(--ink, #34504b); opacity: .75; }
.nd-bar-self { fill: var(--accent, #905760); opacity: 1; }
.reading .nd-bars { list-style: none; padding: 0; margin: .3rem 0 .6rem; }
.reading .nd-row { display: grid; grid-template-columns: 7.2rem 1fr 3.2rem; align-items: center; gap: .5rem; margin: 0; padding: .16rem 0; font-size: .84rem; line-height: 1.45; }
.reading .nd-sizes .nd-row { grid-template-columns: 24px 6.6rem 1fr 3.8rem; }
.nd-row svg:not(.nd-strip):not(.nd-swatch) { width: 24px; height: 24px; border-radius: 6px; }
.nd-label { min-width: 0; overflow-wrap: anywhere; }
.nd-label a { text-decoration: none; }
.nd-label a:hover, .nd-label a:focus-visible { text-decoration: underline; }
.nd-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text2, #716669); white-space: nowrap; }
.nd-self { font-weight: 600; }
.nd-swatch { width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -.08rem; }
.reading .nd-seasons { list-style: none; padding: 0; margin: .4rem 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .35rem; max-width: 22rem; }
.reading .nd-seasons li { margin: 0; padding: .45rem 0; text-align: center; font-size: .86rem; line-height: 1.3; border-radius: .6rem; border: 1px solid var(--divider, #e8dfdb); }
.nd-seasons .nd-on { background: var(--accent, #905760); border-color: var(--accent, #905760); color: var(--on-accent, #fff9f7); font-weight: 600; }
.nd-seasons .nd-off { color: var(--text2, #716669); opacity: .7; }
.reading .nd-chips { list-style: none; padding: 0; margin: .4rem 0 .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.reading .nd-chips li { margin: 0; font-size: .82rem; line-height: 1.3; }
.nd-chips a { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem .2rem .25rem; border: 1px solid var(--divider, #e8dfdb); border-radius: 999px; text-decoration: none; color: inherit; }
.nd-chips a:hover, .nd-chips a:focus-visible { border-color: var(--accent, #905760); }
.nd-plain a { padding: .25rem .7rem; }
.nd-chips svg { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.nd-fold { border: 0; border-bottom: 1px solid var(--divider, #e8dfdb); border-radius: 0; padding: .1rem 0; margin: 0; background: none; }
.nd-fold summary { display: grid; grid-template-columns: 7.2rem 1fr 3.2rem; align-items: center; gap: .5rem; min-height: 2.2rem; font-family: inherit; font-weight: 400; font-size: .86rem; color: inherit; cursor: pointer; }
.nd-fold summary small { color: var(--text2, #716669); font-weight: 400; }
.nd-fold[open] summary { font-weight: 600; }
.nd-fam summary { grid-template-columns: 9.6rem 1fr 2.2rem; }
.nd-fold > summary:not(:has(.nd-strip)) { display: flex; gap: .5rem; }
.nd-next { margin: 1.2rem 0; }
@media (max-width: 560px) {
  .reading .nd-row { grid-template-columns: 6.2rem 1fr 2.8rem; gap: .35rem; }
  .reading .nd-sizes .nd-row { grid-template-columns: 24px 5.4rem 1fr 3.6rem; }
  .nd-fam summary { grid-template-columns: 8.2rem 1fr 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .nd-strip { transform-origin: left center; animation: nd-grow .5s ease-out both; }
  @keyframes nd-grow { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
}