/* Biological classification public tool */

body.biological-classification-page {
  padding-bottom: 0;
}

body.biological-classification-page #floating-menu {
  display: none !important;
}

.biological-classification-tool {
  --bio-atlas-sage: #789079;
  --bio-atlas-moss: #5d744f;
  --bio-atlas-bay: #6f8a82;
  --bio-atlas-lichen: #a5a86d;
  --bio-atlas-clay: #b68773;
  --bio-atlas-rosewood: #9b666f;
  --bio-atlas-plum: #806987;
  --bio-atlas-mulberry: #9a5874;
  --bio-atlas-walnut: #8a765e;
  --bio-atlas-ochre: #b69a58;
  --bio-atlas-maize: #c2ad6a;
  --bio-atlas-persimmon: #b87853;
  --bio-atlas-sea-blue: #66899b;
  --bio-atlas-slate-teal: #587d80;
  --bio-atlas-river: #7797a1;
  --bio-atlas-lavender-grey: #92879b;
  --bio-atlas-bark: #6f675d;
  --bio-atlas-graphite: #707070;
  --bio-motion: cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(0.85rem, 2vw, var(--s-4)) var(--s-4) var(--s-3);
}

.biological-breadcrumb {
  min-height: 1.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
  color: var(--gray-5);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.2;
}

.biological-breadcrumb__button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.biological-breadcrumb__button:hover,
.biological-breadcrumb__button:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  outline: none;
}

.biological-breadcrumb__button[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  cursor: default;
  text-decoration: none;
}

.biological-breadcrumb__sep {
  color: var(--line-strong);
}

.biological-classification-detail {
  align-self: center;
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.biological-classification-detail__eyebrow {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--gray-5);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.biological-classification-detail h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.7vw, 2.85rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.biological-classification-detail__path {
  display: block;
  margin-top: var(--s-2);
  color: var(--gray-5);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.35;
}

.biological-classification-detail p {
  margin: var(--s-2) 0 0;
  color: var(--ink-2);
}

.biological-classification-detail.is-updating .biological-classification-detail__eyebrow,
.biological-classification-detail.is-updating h2,
.biological-classification-detail.is-updating .biological-classification-detail__path,
.biological-classification-detail.is-updating p {
  animation: biological-detail-enter 180ms var(--bio-motion) both;
}

.biological-rank-counter {
  position: fixed;
  inset-block-end: var(--s-2);
  inset-inline-start: var(--s-4);
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  max-width: calc(100vw - var(--s-8));
  padding-top: var(--s-1);
  border-top: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.biological-rank-counter strong {
  color: var(--ink);
  font-size: 1.15rem;
  letter-spacing: 0;
}

@keyframes biological-detail-enter {
  from {
    opacity: 0;
    transform: translateY(0.18rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .biological-classification-detail.is-updating .biological-classification-detail__eyebrow,
  .biological-classification-detail.is-updating h2,
  .biological-classification-detail.is-updating .biological-classification-detail__path,
  .biological-classification-detail.is-updating p {
    animation: none;
  }

}

@media (max-width: 860px) {
  .biological-classification-detail {
    max-width: 32rem;
  }

  .biological-rank-counter {
    gap: var(--s-3);
    font-size: 0.74rem;
  }
}

/* Progressive dual-view classification explorer */

.biological-classification-tool[data-biological-classification] {
  max-width: 90rem;
  padding: clamp(1rem, 2vw, 1.75rem) clamp(0.75rem, 2.2vw, 2rem) 5rem;
}

.biological-classification-tool__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.biological-classification-tool__subtitle {
  margin: 0 0 var(--s-2);
  color: var(--ink-2);
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.2;
}

.biological-classification-tool[data-biological-classification] .biological-breadcrumb {
  min-height: 1.7rem;
  margin: 0 0 var(--s-3);
  padding-inline: 0.15rem;
  color: var(--ink-2);
}

.biological-classification-tool[data-biological-classification] .biological-breadcrumb[hidden] {
  display: none;
}

.biological-breadcrumb__current {
  color: var(--ink);
  font-weight: 700;
}

.biological-breadcrumb__button:disabled {
  color: var(--ink);
  font-weight: 700;
  cursor: default;
  opacity: 1;
  text-decoration: none;
}

.biological-classification-tool__comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.5rem);
}

.biological-explorer {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background:
    linear-gradient(150deg, rgba(120, 144, 121, 0.06), transparent 42%),
    var(--paper-bright);
  box-shadow: 0 0.6rem 1.6rem rgba(53, 49, 41, 0.05);
}

.biological-explorer--ring {
  background:
    linear-gradient(210deg, rgba(102, 137, 155, 0.07), transparent 45%),
    var(--paper-bright);
}

.biological-explorer__header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding: clamp(1rem, 2.3vw, 1.6rem) clamp(1rem, 2.5vw, 1.75rem) 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
}

.biological-explorer__option {
  grid-column: 1 / -1;
  color: var(--gray-5);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.biological-explorer__header h2,
.biological-classification-list-shell__heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
  font-weight: 540;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.biological-explorer__header p {
  max-width: 15rem;
  margin: 0;
  color: var(--gray-5);
  font-family: var(--font-sans);
  font-size: 0.73rem;
  line-height: 1.35;
  text-align: right;
}

.biological-explorer__canvas {
  min-height: clamp(18rem, 33vw, 27rem);
  display: grid;
  place-items: center;
  padding: clamp(0.55rem, 1.5vw, 1rem);
}

.biological-atlas__svg,
.biological-ring__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.biological-ring__svg {
  width: min(100%, 31rem);
}

.biological-mark {
  --bio-tone: var(--bio-atlas-sage);
  cursor: pointer;
  outline: none;
}

.biological-mark--tone-0 { --bio-tone: var(--bio-atlas-sage); }
.biological-mark--tone-1 { --bio-tone: var(--bio-atlas-moss); }
.biological-mark--tone-2 { --bio-tone: var(--bio-atlas-bay); }
.biological-mark--tone-3 { --bio-tone: var(--bio-atlas-lichen); }
.biological-mark--tone-4 { --bio-tone: var(--bio-atlas-clay); }
.biological-mark--tone-5 { --bio-tone: var(--bio-atlas-rosewood); }
.biological-mark--tone-6 { --bio-tone: var(--bio-atlas-plum); }
.biological-mark--tone-7 { --bio-tone: var(--bio-atlas-mulberry); }
.biological-mark--tone-8 { --bio-tone: var(--bio-atlas-walnut); }
.biological-mark--tone-9 { --bio-tone: var(--bio-atlas-ochre); }
.biological-mark--tone-10 { --bio-tone: var(--bio-atlas-maize); }
.biological-mark--tone-11 { --bio-tone: var(--bio-atlas-persimmon); }
.biological-mark--tone-12 { --bio-tone: var(--bio-atlas-sea-blue); }
.biological-mark--tone-13 { --bio-tone: var(--bio-atlas-slate-teal); }
.biological-mark--tone-14 { --bio-tone: var(--bio-atlas-river); }
.biological-mark--tone-15 { --bio-tone: var(--bio-atlas-lavender-grey); }
.biological-mark--tone-16 { --bio-tone: var(--bio-atlas-bark); }
.biological-mark--tone-17 { --bio-tone: var(--bio-atlas-graphite); }

.biological-atlas__rect,
.biological-ring__arc {
  fill: var(--bio-tone);
  stroke: rgba(255, 255, 250, 0.92);
  stroke-width: 1.4;
  transition: opacity 150ms var(--bio-motion), stroke 150ms var(--bio-motion), filter 150ms var(--bio-motion);
}

.biological-mark:hover .biological-atlas__rect,
.biological-mark:focus-visible .biological-atlas__rect,
.biological-mark.is-selected .biological-atlas__rect,
.biological-mark:hover .biological-ring__arc,
.biological-mark:focus-visible .biological-ring__arc,
.biological-mark.is-selected .biological-ring__arc {
  stroke: var(--ink);
  stroke-width: 2.2;
  filter: saturate(1.08) brightness(1.03);
}

.biological-atlas__label,
.biological-ring__label {
  fill: var(--paper-bright);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 760;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(34, 32, 27, 0.34);
  stroke-width: 2.6px;
}

.biological-atlas__count {
  font-size: 10px;
  font-weight: 620;
  opacity: 0.88;
}

.biological-ring__label {
  font-size: 10px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.biological-ring__center {
  outline: none;
}

.biological-ring__center--interactive {
  cursor: pointer;
}

.biological-ring__center-circle {
  fill: var(--paper-bright);
  stroke: var(--line-strong);
  stroke-width: 1.2;
}

.biological-ring__center--interactive:hover .biological-ring__center-circle,
.biological-ring__center--interactive:focus-visible .biological-ring__center-circle {
  stroke: var(--ink);
  stroke-width: 2;
}

.biological-ring__center-name,
.biological-ring__center-count {
  fill: var(--ink);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 760;
  text-anchor: middle;
  pointer-events: none;
}

.biological-ring__center-count {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 560;
}

.biological-explorer__empty {
  margin: auto;
  color: var(--gray-5);
  font-style: italic;
}

.biological-classification-tool__lower {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(1.25rem, 3vw, 2.4rem);
}

.biological-classification-tool[data-biological-classification] .biological-classification-detail {
  position: sticky;
  top: 5rem;
  align-self: start;
  min-width: 0;
  padding: 1rem 0 1.2rem;
}

.biological-classification-tool[data-biological-classification] .biological-classification-detail h2 {
  overflow-wrap: anywhere;
  font-size: clamp(1.65rem, 3.2vw, 2.65rem);
}

.biological-classification-list-shell {
  min-width: 0;
}

.biological-classification-list-shell__heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line-strong);
}

.biological-classification-list-shell__heading h2 {
  margin-top: 0.25rem;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}

.biological-classification-list-shell__heading p {
  margin: 0;
  color: var(--gray-5);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: right;
}

.biological-classification-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.biological-classification-list__item {
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.biological-classification-list__item.reference-popover-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.35rem;
}

.biological-classification-list__item--smaller {
  background: rgba(112, 112, 112, 0.035);
}

.biological-classification-list__button {
  width: 100%;
  min-height: 2.65rem;
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
}

.biological-classification-list__button:hover,
.biological-classification-list__button:focus-visible,
.biological-classification-list__button.is-selected {
  background: color-mix(in srgb, var(--bio-atlas-sage) 12%, transparent);
  color: var(--ink);
  outline: none;
}

.biological-classification-list__button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.biological-classification-list__preview {
  min-width: 2.35rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--gray-5);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 700;
}

.biological-classification-list__preview:hover,
.biological-classification-list__preview:focus-visible,
.biological-classification-list__preview[aria-expanded="true"] {
  background: color-mix(in srgb, var(--bio-atlas-sage) 16%, transparent);
  color: var(--ink);
  outline: none;
}

.biological-classification-page .reference-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.45rem);
  left: 0;
  width: min(22rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.35rem;
  background: var(--paper-bright);
  box-shadow: 0 1rem 2.4rem rgba(35, 34, 31, 0.18);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.45;
}

.biological-classification-page .reference-popover[hidden] {
  display: none;
}

.biological-classification-page .ingredient-popover-wrap--align-right .reference-popover {
  right: 0;
  left: auto;
}

.biological-classification-page .ingredient-popover-header,
.biological-classification-page .ingredient-popover-title-group,
.biological-classification-page .ingredient-popover-actions {
  display: flex;
}

.biological-classification-page .ingredient-popover-header {
  align-items: center;
  gap: 0.75rem;
}

.biological-classification-page .ingredient-popover-title-group {
  min-width: 0;
  flex-direction: column;
}

.biological-classification-page .ingredient-popover-title {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.1;
}

.biological-classification-page .ingredient-popover-source,
.biological-classification-page .reference-popover-metadata {
  color: var(--gray-5);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.biological-classification-page .ingredient-popover-thumb {
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 auto;
  border-radius: 0.25rem;
  object-fit: cover;
}

.biological-classification-page .ingredient-popover-body {
  display: block;
  max-height: 9rem;
  overflow: auto;
}

.biological-classification-page .ingredient-popover-actions {
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.biological-classification-page .ingredient-popover-actions a {
  color: var(--green-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.biological-classification-page .ingredient-popover--loading {
  color: var(--gray-5);
  font-style: italic;
}

.biological-classification-list__number,
.biological-classification-list__count {
  color: var(--gray-5);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.biological-classification-list__name {
  min-width: 0;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.biological-classification-status {
  min-height: 1.25rem;
  margin: 0.75rem 0 0;
  color: var(--gray-5);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-align: center;
}

.biological-classification-tool.is-loading .biological-explorer__canvas,
.biological-classification-tool.is-loading .biological-classification-list {
  opacity: 0.58;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .biological-atlas__rect,
  .biological-ring__arc {
    transition: none;
  }
}

@media (max-width: 980px) {
  .biological-explorer__header {
    grid-template-columns: 1fr;
  }

  .biological-explorer__header p {
    max-width: 24rem;
    text-align: left;
  }

  .biological-classification-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .biological-classification-tool[data-biological-classification] {
    padding-inline: 0.65rem;
  }

  .biological-classification-tool__comparison,
  .biological-classification-tool__lower {
    grid-template-columns: 1fr;
  }

  .biological-explorer__canvas {
    min-height: 17rem;
  }

  .biological-classification-tool[data-biological-classification] .biological-classification-detail {
    position: static;
    max-width: none;
  }

  .biological-rank-counter {
    inset-inline: 0.65rem;
    justify-content: space-between;
    max-width: none;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem 0;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    font-size: 0.65rem;
  }

  .biological-rank-counter strong {
    font-size: 0.92rem;
  }
}

@media (max-width: 480px) {
  .biological-classification-list-shell__heading {
    align-items: start;
    flex-direction: column;
  }

  .biological-classification-list-shell__heading p {
    text-align: left;
  }

  .biological-classification-list {
    grid-template-columns: 1fr;
  }

  .biological-explorer__canvas {
    padding: 0.45rem;
  }
}