/*
  Content-page layout - loaded by Views/Shared/_Layout.cshtml and _SpeciesLayout.cshtml (not the home page).
  Article width, section rhythm, and reusable content components.
*/
.content {
  max-width: var(--soa-content-width);
  margin-inline: auto;
}

.content > section + section {
  margin-top: var(--soa-section-gap);
}

.content--wide {
  max-width: calc(var(--soa-content-width) + 12rem);
}

/* Scientific names (Services/ScientificNameFormatter.cs): the name is an <em>; the words that must
   stay upright ("sp.", "spp.", "and" ... - ScientificNames:UprightTerms) are wrapped in this span. */
.sci-name__upright {
  font-style: normal;
}

/* Habitat classification cards + detail modal (Views/Shorezone/Classifications.cshtml) */
.habitat-card {
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.habitat-card:hover,
.habitat-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.habitat-card .card-img-top,
.habitat-card__placeholder {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soa-sand);
}

.habitat-card .card-title {
  font-family: var(--soa-font-heading);
  color: var(--soa-ocean);
}

.habitat-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.habitat-modal__img {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Detail window (React, js/habitat-dialog.js): a native <dialog> sized like Bootstrap's modal-lg; the inner
   .modal-content keeps Bootstrap's look and scrolls its body when the text is long. Bootstrap 5.3 styles
   .modal-content/-header/-body/-footer only through --bs-modal-* variables that it declares on .modal, which
   this dialog is not, so the same variables (values from bootstrap.css v5.3.3) are declared here. */
.habitat-dialog {
  --bs-modal-padding: 1rem;
  --bs-modal-color: ;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  width: min(800px, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.habitat-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.habitat-dialog .modal-content { max-height: calc(100vh - 2rem); }
.habitat-dialog .modal-body { overflow-y: auto; }
body:has(.habitat-dialog[open]) { overflow: hidden; }

/* Related links directory (Views/Related/Links.cshtml) */
.link-group + .link-group {
  margin-top: var(--soa-section-gap);
}

.link-group__title {
  font-family: var(--soa-font-heading);
  color: var(--soa-ocean);
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.25rem;
}

.link-list {
  margin-bottom: 0;
}

.link-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.link-item:last-child {
  border-bottom: 0;
}

.link-item__summary {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--bs-secondary-color);
}

.link-item__host {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .link-item__host {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* About page (Views/About/Index.cshtml) - feature band + profile cards from vwPageContent */
.about-feature {
  padding-bottom: var(--soa-section-gap);
  margin-bottom: var(--soa-section-gap);
  border-bottom: 1px solid var(--bs-border-color);
}

.about-feature__title {
  font-family: var(--soa-font-heading);
  color: var(--soa-ocean);
}

.about-body {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.about-body > p:last-child {
  margin-bottom: 0;
}

.about-profile {
  border: 0;
  background: var(--soa-sand);
}

.about-profile__name {
  font-family: var(--soa-font-heading);
  color: var(--soa-ocean);
  margin: 0 0 1rem;
}

.about-profile__body {
  font-size: 1rem;
}

/* The first paragraph of each bio is a contact/address block in the source content. */
.about-profile__body > p:first-child {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
  padding-left: 0.75rem;
  border-left: 3px solid var(--soa-kelp);
}

/* Coastal regions map (Views/Coastal/Regions.cshtml) - map + detail panel + pill list.
   From the "Editorial Field Guide" export's regions.css; fonts mapped to the site tokens
   (the export named 'Public Sans'/'Newsreader' directly). */
.rg-wrap{background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.rg-map{position:relative;background:linear-gradient(180deg,#dfe8e6,#cfdcd9)}
.rg-map svg{display:block;width:100%;height:auto}
.rg-land{fill:#efe9db;stroke:#b9b09a;stroke-width:.6}
.rg-land-other{fill:#e7e2d3;stroke:#c9c2ae;stroke-width:.4;opacity:.65}
.rg-dot{cursor:pointer}
.rg-dot circle.halo{fill:var(--green-500);opacity:.22;transition:all .25s}
.rg-dot circle.core{fill:var(--green-700);stroke:#fff;stroke-width:2}
.rg-dot text{font-family:var(--soa-font-body);font-size:12.5px;font-weight:600;fill:#21261f;paint-order:stroke;stroke:#fff;stroke-width:3.5;stroke-linejoin:round}
.rg-dot:hover circle.halo,.rg-dot.on circle.halo{opacity:.45;transform:scale(1.5);transform-origin:center;transform-box:fill-box}
.rg-dot.on circle.core{fill:var(--red-700)}
.rg-panel{padding:clamp(20px,3vw,34px);border-top:1px solid var(--line)}
@media (min-width:992px){.rg-panel{border-top:0;border-left:1px solid var(--line);height:100%}}
.rg-p-kick{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--green-700);font-weight:600}
.rg-p-name{font-family:var(--soa-font-heading);font-size:clamp(25px,3vw,32px);line-height:1.05;margin:8px 0 12px}
.rg-p-desc{font-size:15.5px;line-height:1.65;color:#33362c}
.rg-p-facts{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13.5px;color:var(--ink-soft)}
.rg-p-facts b{color:var(--ink);font-weight:600}
.rg-p-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;background:var(--green-700);color:#fff;font-weight:600;font-size:14px;padding:12px 22px;border-radius:3px;text-decoration:none}
.rg-p-link:hover{background:var(--green-900);color:#fff}
.rg-list{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.rg-list button{font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.rg-list button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Panel media row: locator map + first photo thumbnails, both open the lightbox */
.rg-p-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.rg-p-thumb{display:block;padding:0;border:1px solid var(--line);border-radius:2px;background:#fff;cursor:pointer;overflow:hidden}
.rg-p-thumb img{display:block;width:100%;height:130px;object-fit:cover}
.rg-p-thumb--map img{object-fit:contain}
.rg-p-more{display:block;margin-left:auto;margin-top:10px;padding:0;border:0;background:none;color:var(--bs-link-color);font-weight:700;font-size:15px}
.rg-p-more:hover{text-decoration:underline}

/* Phylum page (Views/Species/Phylum.cshtml) - intro, Photos/Taxonomic-tree tabs, filter box.
   The .px-tab pills and .px-tree/.px-rank/.px-group/.px-species tree styles are shared with
   the taxonomic tree page (Views/Taxonomic/Tree.cshtml). */
.pb-hero--taxon .pb-title { font-style: normal; }
/* "See also" links under the species count in the hero (section HeroNote). */
.px-seealso{margin-top:12px;font-size:13.5px;letter-spacing:.03em;color:rgba(255,255,255,.72);text-shadow:1px 1px 3px rgba(0,0,0,.5)}
.px-seealso-lead{margin-right:.35em}
.px-seealso a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .15s}
.px-seealso a:hover,.px-seealso a:focus{color:#fff;border-bottom-color:#fff}
.px-seealso-lbl{margin-left:.4em;color:rgba(255,255,255,.6)}
.px-seealso-sep{margin:0 .55em}
.px-intro { font-size: 16px; line-height: 1.7; }
.px-bar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:8px 0 24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.px-tabs{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.px-tab{font-size:14px;font-weight:600;padding:8px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.px-tab.active{background:var(--green-700);border-color:var(--green-700);color:#fff}
.px-search{display:flex;align-items:center;gap:12px;flex:1 1 280px;max-width:440px}
.px-input{width:100%;font-size:14px;padding:8px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.px-input:focus{outline:2px solid var(--green-500);outline-offset:1px}
.px-count{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.px-empty{margin-top:16px;color:var(--ink-soft);font-size:15px}
/* Morphology tab: the species cards under one heading per morphology group. Each group is a
   <details>; its <summary> is the heading row with a chevron (right = collapsed, down = expanded). */
.px-morph-group + .px-morph-group{margin-top:40px}
.px-morph-group:not([open]) + .px-morph-group{margin-top:16px}
.px-morph-sum{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
.px-morph-sum::-webkit-details-marker{display:none}
.px-morph-sum::before{content:"";flex:none;width:9px;height:9px;margin-left:3px;border-right:2px solid var(--green-700);border-bottom:2px solid var(--green-700);transform:rotate(-45deg);transition:transform .15s ease}
.px-morph-group[open] > .px-morph-sum::before{transform:rotate(45deg)}
.px-morph-group:not([open]) > .px-morph-sum{margin-bottom:0}
.px-morph-h{font-family:var(--soa-font-heading);font-size:24px;color:var(--green-700);margin:0;text-transform:capitalize}
/* Taxonomic tree: bold rank labels, each rank indented one step; species rows carry the link,
   the authority and a right-aligned common name (see the tree mockup). */
.px-tree{font-size:15px;line-height:1.55;max-width:860px}
.px-rank{margin:14px 0 2px}
.px-rank-label{font-weight:700}
.px-group{padding-left:26px}
.px-species{list-style:none;margin:2px 0 0;padding:0 0 0 26px}
.px-species li{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding:2px 0}
.px-auth{color:var(--ink-soft);font-size:13.5px}
.px-common{margin-left:auto;font-size:14px;color:var(--ink)}

/* Species detail page (Views/Species/Detail.cshtml) - hero, facts and sidebar are styled by pages.css */
.species-photos {
  margin-top: 2rem;
}

/* Notes rows under the description: each row is its own two-column grid of equal halves; an item takes
   one half or (pb-span-all) the full width, and long values wrap within their own column.
   Phones stack everything in one column. */
.pb-rows { margin: 0 0 36px; }
.pb-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 48px;
  align-items: start;
  margin-bottom: 26px;
}
.pb-row .pb-note-body { max-width: none; }
.pb-span-all { grid-column: 1 / -1; }
@media (max-width: 767.98px) {
  .pb-row { grid-template-columns: 1fr; }
  .pb-row > .pb-note { grid-column: auto; }
}
.pb-updated { margin: 0; font-size: 13px; color: var(--ink-soft); }
/* References row: one reference per line - the citation (DOI rows), then the external link. */
.pb-refs { list-style: none; margin: 0; padding: 0; }
.pb-refs li + li { margin-top: 8px; }
.pb-ref-hang { padding-left: 2em; text-indent: -2em; }
.pb-ref-cite { margin-right: 0.5em; }
.pb-ref-link { white-space: nowrap; }

/* Photo cards: same treatment as the habitat cards - thumbnail on top, metadata beneath, opens the lightbox. */
.photo-card {
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.photo-card:hover,
.photo-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.photo-card .card-img-top {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soa-sand);
}

.photo-card .card-title {
  font-family: var(--soa-font-heading);
  color: var(--green-700);
  margin-bottom: 0.5rem;
}

/* "Photo unavailable" panel swapped in for a broken card thumbnail (js/img-fallback.js);
   same 4:3 footprint as the image it replaces, on species cards and detail photo cards. */
.photo-missing {
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    var(--soa-sand);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-soft);
}

.photo-missing svg {
  width: 28px;
  height: 28px;
  opacity: 0.65;
}

.photo-missing__label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Common name after the binomial, as on the species cards (.species-card__common) but hyphen-separated. */
.photo-card__common {
  font-style: normal;
  font-weight: normal;
  color: var(--ink-soft);
}

.photo-card__common::before {
  content: " - ";
  white-space: pre;
}

.photo-card__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
  font-size: 0.875rem;
}

.photo-card__meta dt {
  font-weight: normal;
  color: var(--ink-soft);
}

.photo-card__meta dd {
  margin: 0;
}

/* Species index cards (Views/Species/Index.cshtml): one linked card per species - thumbnail, binomial, family + authority. */
.species-card {
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.species-card:hover,
.species-card:focus-visible {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.species-card .card-img-top {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--soa-sand);
}

/* Species card with no photo (_SpeciesCard.cshtml): the stand-in photo with its label centred over it. */
.photo-unavailable {
  position: relative;
  overflow: hidden;
}

/* The starfish sits in the lower right of the stand-in photo, so crops keep the right-hand edge. */
.photo-unavailable img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.photo-unavailable__label,
.pb-hero-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 2rem);
  padding: 0.45rem 0.8rem;
  border-radius: 3px;
  background: rgba(18, 24, 18, 0.6);
  color: #fff;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
}

/* The same label over the species page hero (_SpeciesLayout, ViewData HeroLabel); sits above the scrims.
   The hero is wide and short, so the photo is cropped from the bottom-right corner (the starfish) and the
   label sits on the left, in line with the title and clear of the starfish. */
.pb-hero--placeholder {
  --pb-scrim-bottom: 0.6;   /* lighter shade under the title, so the starfish keeps its colour */
}

.pb-hero--placeholder .photo {
  object-position: right bottom;
}

.pb-hero-label {
  z-index: 1;
  top: 40%;
  left: clamp(16px, 4vw, 56px);
  transform: translateY(-50%);
  max-width: 40%;
  font-size: 13px;
  padding: 0.6rem 1.1rem;
  text-align: left;
}

/* Phones: the breadcrumb wraps to up to four lines, so the hero is taller and the label goes full width
   just under the breadcrumb, above the starfish. */
@media (max-width: 575.98px) {
  .pb-hero--placeholder .photo { height: 380px; }
  .pb-hero-label { top: 128px; transform: none; max-width: calc(100% - 32px); }
}

/* Views/Species/Phylum.cshtml only (Photos and Morphology tabs): the label is a wide, soft grey band in
   the upper part of the photo, clear of the starfish. */
:is(#px-photos, #px-morph) .photo-unavailable__label {
  top: 10%;
  transform: translateX(-50%);
  width: 78%;
  max-width: none;
  padding: 0.55rem 0.75rem;
  background: rgba(70, 72, 70, 0.45);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  line-height: 1.6;
}

.species-card .card-title {
  font-family: var(--soa-font-heading);
  color: var(--green-700);
  margin-bottom: 0.5rem;
}

/* Common name appended after the binomial: upright, muted, separated by a middle dot. */
.species-card__common {
  font-style: normal;
  font-weight: normal;
  color: var(--ink-soft);
}

.species-card__common::before {
  content: " · ";
  white-space: pre;
}

.species-card__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
  font-size: 0.875rem;
}

.species-card__meta dt {
  font-weight: normal;
  color: var(--ink-soft);
}

.species-card__meta dd {
  margin: 0;
}

.species-pages {
  margin-top: 2.5rem;
}

/* Photo gallery (thumbnail grid + modal) - Views/Coastal/Region.cshtml, reusable */
.gallery__title {
  font-family: var(--soa-font-heading);
  color: var(--soa-ocean);
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.gallery__item {
  padding: 0;
  border: 0;
  background: var(--soa-sand);
  border-radius: 0.375rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__item:hover,
.gallery__item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.gallery-modal .modal-body {
  text-align: center;
}

.gallery-modal__img {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

/* Custom 404 page (Views/Shared/NotFound.cshtml) - full-bleed band + section pills.
   From the "Editorial Field Guide" export's 404.css; fonts mapped to the site tokens and
   text-decoration reset on link-shaped controls (the export relied on its own global reset). */
.nf-band{background:var(--green-700);color:#fff}
.nf-band-in{padding:clamp(48px,8vw,110px) 0;text-align:center}
.nf-code{font-family:var(--soa-font-heading);font-style:italic;font-size:clamp(90px,16vw,180px);line-height:.9;color:var(--green-300)}
.nf-sci{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--green-300);margin-top:18px}
.nf-title{font-family:var(--soa-font-heading);font-size:clamp(26px,4vw,42px);line-height:1.05;margin:10px auto 0;max-width:640px;color:#fff}
.nf-title em{font-style:italic}
.nf-sub{margin:16px auto 0;font-size:clamp(15px,2vw,17px);color:rgba(255,255,255,.85);max-width:480px}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.nf-btn{display:inline-flex;align-items:center;gap:8px;background:#eef0e6;color:var(--green-900);font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:3px;text-decoration:none}
.nf-btn:hover{background:#fff;color:var(--green-900)}
.nf-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.nf-btn.ghost:hover{border-color:#fff;color:#fff;background:transparent}
.nf-search{max-width:560px;margin:36px auto 0;background:#fff;border-radius:4px;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.nf-search svg{color:var(--ink-soft);flex:0 0 auto}
.nf-search input{border:0;outline:0;flex:1;min-width:0;font-family:var(--soa-font-heading);font-size:18px;color:var(--ink);background:transparent}
.nf-search input::placeholder{color:#9b9c8e}
.nf-search button{background:var(--green-700);color:#fff;border:0;font-weight:600;font-size:14px;padding:11px 22px;border-radius:3px}
.nf-search button:hover{background:var(--green-900)}
.nf-links{padding:clamp(36px,5vw,56px) 0;text-align:center}
.nf-links .h{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--green-700);font-weight:600;margin-bottom:18px}
.nf-links .row-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.nf-links .row-links a{font-size:14px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);text-decoration:none}
.nf-links .row-links a:hover{border-color:var(--green-700);color:var(--green-700)}

/* Search results page (Views/Search/Index.cshtml) - reuses the 404 search-box styles (.nf-search)
   with an on-paper modifier, plus scope chips (radio pills, checked = active) and results as
   the shared species cards. */
.sr-form{max-width:560px;margin:0 0 34px}
.sr-search{margin:0;border:1px solid var(--line);box-shadow:0 12px 30px -18px rgba(40,44,30,.35)}
.sr-scopes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sr-scope{font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);white-space:nowrap;cursor:pointer;margin-bottom:0}
.sr-scope:has(:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.sr-scope:has(:focus-visible){outline:2px solid var(--green-500);outline-offset:1px}
/* Phylum drop-down chip shared by the home (.ed-scopes) and search-page (.sr-scopes) forms; options come
   from SearchController.Phyla. The wrapper draws the pill and a currentColor chevron; the native select is
   transparent so the pill colours it. Choosing a phylum turns the pill dark like a checked scope chip;
   the blank "Phylum" option means any phylum. */
.scope-select{position:relative;display:inline-flex;align-items:center;font-size:13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);white-space:nowrap;cursor:pointer}
.scope-select select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:inherit;font:inherit;line-height:inherit;padding:7px 30px 7px 14px;cursor:pointer}
.scope-select select option{color:var(--ink);background:#fff}
.scope-select::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.scope-select:has(option:checked:not([value=""])){background:var(--ink);color:#fff;border-color:var(--ink)}
.scope-select:has(:focus-visible){outline:2px solid var(--green-500);outline-offset:1px}
.sr-none{color:var(--ink-soft);font-size:15.5px}
.sr-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sr-pills a{font-size:14px;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);text-decoration:none}
.sr-pills a:hover{border-color:var(--green-700);color:var(--green-700)}

/* Taxonomic tree page (Views/Taxonomic/Tree.cshtml) - standalone tab bar over the shared tree styles */
.tt-tabs{margin:4px 0 24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
/* The long extra tab can push the row past a phone's width, so the bar wraps. */
.tt-tabs{flex-wrap:wrap}
/* "All Known Seaweeds in Alaska": not one of the catalog groups, so it sits apart - a gap before it and a tinted pill. */
.tt-tab-extra{margin-inline-start:20px}
.tt-tab-extra .px-tab:not(.active){background:var(--green-100);border-color:var(--green-300);color:var(--green-700)}
/* Species count badge inside each tab pill; inverts with the active pill. */
.tt-count{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--green-100);color:var(--green-700)}
.px-tab.active .tt-count{background:#fff;color:var(--green-700)}
.tt-tab-extra .px-tab:not(.active) .tt-count{background:#fff}