@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Roboto:wght@700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* Minimal site customization for cards and widgets */

:root {
  --landing-bg-1: #e9e9e9;
  --landing-bg-2: #e2e2e2;
  --landing-bg-3: #d9d9d9;
  --landing-accent: #2f4b7c;
  --landing-accent-soft: rgba(47, 75, 124, 0.18);
  --landing-card: #ffffff;
  --landing-card-border: #d0d0d0;
  --landing-text: #111111;
  --landing-text-muted: #333333;
}

body {
  font-family: "Instrument Sans", "Segoe UI", sans-serif;
  overflow-x: hidden;
  margin: 0;
  background: #e6e6e6;
  color: #111111;
}

h1,
h2,
h3,
.site-title {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

.side-bar {
  display: none;
}

.main-header {
  display: none;
}

.main {
  margin: 0;
  width: 100%;
  max-width: none;
}

.main-content-wrap {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.main-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Phone gutter. The theme's wrapper padding is zeroed above so content runs
   edge to edge, but at phone width that leaves no room for text to breathe and
   nothing to absorb the theme's anchor-heading icons, which sit at right: -1rem.
   The full-bleed hero and title band self-compensate: their calc(50% - 50vw)
   margins resolve against this content box, so they stay edge to edge. */
@media (max-width: 700px) {
  .main-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.guide-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.guide-nav {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  background: #ffffff;
  border: 1px solid #c7d6ee;
  border-radius: 12px;
  padding: 1rem;
  max-height: calc(100vh - 3rem);
  overflow: auto;
}

.guide-nav h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  color: #1f3f6e;
}

.guide-nav ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.guide-nav ul ul {
  margin-top: 0.35rem;
  padding-left: 0.75rem;
  border-left: 2px solid #e3ebf7;
}

.guide-nav li {
  margin: 0.35rem 0;
}

.guide-nav a {
  color: #111111;
  text-decoration: none;
  font-size: 0.95rem;
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

.guide-nav a:hover {
  text-decoration: underline;
}

.guide-nav a.is-active {
  background: #e9f2ff;
  border-color: #2f5ea8;
  color: #1f3f6e;
  font-weight: 600;
  text-decoration: none;
}

.guide-content {
  min-width: 0;
  background: #fafafa;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  padding: 1.75rem 2rem;
}

.landing-page {
  position: relative;
  padding: 1.25rem 0 1.6rem;
  border-radius: 0;
  color: var(--landing-text);
  overflow: hidden;
  background: #e6e6e6;
}

.landing-hero {
  position: relative;
  padding: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.hero-media {
  position: relative;
  z-index: 1;
  margin: 0.9rem auto 0;
  max-width: 1100px;
  border-radius: 20px;
  overflow: hidden;
  background: #e1e1e1;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}

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

.hero-carousel {
  position: relative;
  width: 100%;
  height: 320px;
  height: clamp(240px, 42vh, 420px);
  min-height: 240px;
  overflow: hidden;
}

.image-frame {
  position: relative;
}

.hero-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  will-change: transform;
}

.hero-carousel .carousel-image {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.carousel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #555555;
  font-size: 0.95rem;
  background: #dcdcdc;
}

.overlay {
  position: absolute;
  color: #ffffff;
  z-index: 2;
  pointer-events: none;
}

.overlay-condition {
  font-weight: 600;
  margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
  font-size: clamp(0.72rem, 1.5vw, 0.88rem);
}

.overlay-metrics {
  display: grid;
  gap: 0.34rem;
}

.overlay-metric {
  display: grid;
  gap: 0.14rem;
}

.overlay-metric.is-subindex {
  padding-left: 0.72rem;
}

.overlay-metric-header {
  display: flex;
  align-items: baseline;
  gap: 0.36rem;
  font-size: clamp(0.67rem, 1.35vw, 0.82rem);
  line-height: 1.2;
}

.overlay-metric-label {
  color: rgba(255, 255, 255, 0.94);
}

.overlay-metric-bar-row {
  display: block;
}

.overlay-metric-value {
  min-width: 0;
  text-align: left;
  color: #ffffff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.66rem, 1.3vw, 0.8rem);
}

.overlay-bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}

.overlay-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: #c8d9f2;
}

.overlay-metric.is-na .overlay-metric-value {
  color: rgba(255, 255, 255, 0.72);
}

.overlay.top-left {
  top: 12px;
  left: 12px;
  width: fit-content;
  max-width: min(76%, 250px);
  padding: 0.58rem 0.7rem 0.62rem;
  border-radius: 12px;
  background: rgba(9, 16, 28, 0.74);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.overlay.bottom-right {
  bottom: 12px;
  right: 12px;
  text-align: right;
  max-width: min(68%, 320px);
  padding: 0.38rem 0.56rem;
  border-radius: 8px;
  font-size: clamp(0.68rem, 1.45vw, 0.82rem);
  line-height: 1.3;
  background: rgba(8, 14, 24, 0.62);
}

@media (max-width: 640px) {
  .overlay.top-left {
    top: 8px;
    left: 8px;
    max-width: min(84%, 235px);
    padding: 0.48rem 0.56rem 0.54rem;
  }

  .overlay.bottom-right {
    right: 8px;
    bottom: 8px;
  }

  .overlay-bar {
    height: 4px;
  }
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  z-index: 3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.carousel-nav.prev {
  left: 12px;
}

.carousel-nav.next {
  right: 12px;
}

.carousel-nav:hover {
  color: #f2f6ff;
}

.carousel-nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  border-radius: 6px;
}

.landing-hero::before {
  content: none;
}

.landing-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 2.5rem;
}

.landing-page::before,
.landing-page::after {
  content: none;
}

.landing-page > * {
  position: relative;
  z-index: 1;
}

.landing-hero {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.overview-image {
  width: min(100%, 980px);
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.quick-overview-page {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0.4rem max(1rem, calc((100vw - 1200px) / 2 + 1rem)) 1.2rem;
  background: #ffffff;
}

.quick-overview-intro {
  margin: 0.1rem auto 0.7rem;
  max-width: 900px;
  text-align: center;
  color: #1f2d41;
}

.factsheet-download-row {
  justify-content: center;
  margin: 0.2rem auto 0.9rem;
}

.quick-overview-factsheet {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 1.3rem;
}

.quick-overview-page .factsheet-sheet {
  background: #ffffff;
  border: 1px solid #c9d6e0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(25, 48, 76, 0.12);
}

.quick-overview-page .factsheet-header {
  background: #2b5a7c;
  color: #ffffff;
  padding: 1.2rem 1.35rem 1rem;
}

.quick-overview-page .factsheet-page-label {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 700;
}

.quick-overview-page .factsheet-title {
  margin: 0;
  color: #ffffff;
  line-height: 1.2;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
}

.quick-overview-page .factsheet-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  opacity: 0.95;
}

.quick-overview-page .factsheet-body {
  padding: 1.1rem 1.35rem 1.25rem;
}

.quick-overview-page .factsheet-section-label {
  margin: 0 0 0.55rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #2b5a7c;
  border-bottom: 2px solid #2b5a7c;
  padding-bottom: 0.2rem;
}

.quick-overview-page .factsheet-need-text {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #273546;
}

.quick-overview-page .factsheet-badge-new {
  display: inline-block;
  background: #d4a843;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
  letter-spacing: 0.04em;
}

.quick-overview-page .factsheet-tier-diagram {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.7rem;
  margin-bottom: 0.65rem;
}

.quick-overview-page .factsheet-tier-card {
  border-radius: 8px;
  padding: 0.72rem 0.8rem;
  font-size: 0.84rem;
  line-height: 1.45;
}

.quick-overview-page .factsheet-tier-card.screening {
  background: #f0f4f7;
  border: 1.5px solid #b8cdd9;
}

.quick-overview-page .factsheet-tier-card.rapid {
  background: #e6e6e6;
  border: 1.5px solid #aaaaaa;
}

.quick-overview-page .factsheet-tier-card.detailed {
  background: #d0d0d0;
  border: 1.5px solid #888888;
}

.quick-overview-page .factsheet-tier-title {
  margin: 0 0 0.4rem;
  font-size: 0.96rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.quick-overview-page .factsheet-tier-card p {
  margin: 0 0 0.32rem;
}

.quick-overview-page .factsheet-tier-card p:last-child {
  margin-bottom: 0;
}

.quick-overview-page .factsheet-effort-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.35rem 0 0.1rem;
  font-size: 0.78rem;
  color: #505a63;
}

.quick-overview-page .factsheet-effort-arrow .arrow-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, #b8cdd9, #555555);
  margin: 0 0.55rem;
  position: relative;
}

.quick-overview-page .factsheet-effort-arrow .arrow-line::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -4px;
  border-left: 8px solid #555555;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.quick-overview-page .factsheet-effort-caption {
  margin: 0 0 0.55rem;
  text-align: center;
  font-size: 0.78rem;
  color: #505a63;
}

.quick-overview-page .factsheet-callout-row {
  display: grid;
  gap: 0.4rem;
}

.quick-overview-page .factsheet-callout-box {
  margin: 0;
  border: 2px solid #2b5a7c;
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Outcome cards inside factsheet callout */
.quick-overview-page .factsheet-outcomes-box {
  display: block;
}

.quick-overview-page .factsheet-outcomes-heading {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
}

.quick-overview-page .factsheet-outcomes-intro {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.quick-overview-page .outcome-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0 0 0.4rem;
}

.quick-overview-page .outcome-card {
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 6px;
  padding: 0.5rem 0.65rem 0.55rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

.quick-overview-page .outcome-card.physical { border-top: 3px solid #4a7fb5; }
.quick-overview-page .outcome-card.chemical { border-top: 3px solid #b5873a; }
.quick-overview-page .outcome-card.biological { border-top: 3px solid #3a8a5c; }

.quick-overview-page .outcome-card .outcome-card-title {
  margin: 0 0 0.2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

.quick-overview-page .outcome-card.physical .outcome-card-title { color: #3b6d9c; }
.quick-overview-page .outcome-card.chemical .outcome-card-title { color: #9a7332; }
.quick-overview-page .outcome-card.biological .outcome-card-title { color: #327a50; }

.quick-overview-page .outcome-card .outcome-card-def {
  margin: 0 0 0.2rem;
}

.quick-overview-page .outcome-card .outcome-card-examples {
  margin: 0;
  font-size: 0.78rem;
  color: #555;
  border-top: 1px solid #eee;
  padding-top: 0.2rem;
  margin-top: 0.2rem;
}

.quick-overview-page .ecosystem-condition-card {
  margin: 0;
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 6px;
  padding: 0.5rem 0.65rem 0.55rem;
  font-size: 0.82rem;
  line-height: 1.45;
  border-top: 3px solid;
  border-image: linear-gradient(to right, #4a7fb5, #b5873a, #3a8a5c) 1;
  border-image-slice: 1;
}

.quick-overview-page .ecosystem-condition-card .outcome-card-title {
  margin: 0 0 0.2rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

.quick-overview-page .ecosystem-condition-card .outcome-card-def {
  margin: 0;
}

@media (max-width: 920px) {
  .quick-overview-page .outcome-cards {
    grid-template-columns: 1fr;
  }
}

.quick-overview-page .factsheet-purpose-box {
  background: #f5f8fa;
  border-left: 4px solid #2b5a7c;
  padding: 0.72rem 0.85rem;
  margin-bottom: 0.8rem;
}

.quick-overview-page .factsheet-purpose-box .factsheet-purpose-title {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #2b5a7c;
}

.quick-overview-page .factsheet-purpose-box p {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #273546;
}

.quick-overview-page .factsheet-objectives-list {
  margin: 0;
  padding-left: 1.1rem;
}

.quick-overview-page .factsheet-objectives-list li {
  margin-bottom: 0.2rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #273546;
}

.quick-overview-page .factsheet-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.quick-overview-page .factsheet-col .factsheet-col-title {
  margin: 0 0 0.22rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #2b5a7c;
}

.quick-overview-page .factsheet-col p,
.quick-overview-page .factsheet-col li {
  font-size: 0.88rem;
  line-height: 1.48;
  color: #273546;
}

.quick-overview-page .factsheet-col ul {
  margin: 0 0 0.72rem;
  padding-left: 1rem;
}

.quick-overview-page .factsheet-col li {
  margin-bottom: 0.2rem;
}

.quick-overview-page .factsheet-resources-section {
  margin-top: 0.15rem;
}

.quick-overview-page .factsheet-resources-label {
  margin-top: 0;
}

.quick-overview-page .factsheet-resource-list {
  margin: 0.2rem 0 0.8rem;
  padding-left: 1rem;
}

.quick-overview-page .factsheet-resource-list li {
  margin-bottom: 0.32rem;
  font-size: 0.88rem;
  line-height: 1.48;
  color: #273546;
}

.quick-overview-page .factsheet-resources {
  margin: 0.15rem 0 0;
}

.quick-overview-page .factsheet-bottom-summary {
  margin: 0.2rem 0 0;
  background: #2b5a7c;
  color: #ffffff;
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
}

.quick-overview-page .factsheet-pentagon-graphic {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 920px) {
  .quick-overview-page .factsheet-tier-diagram {
    grid-template-columns: 1fr;
  }

  .quick-overview-page .factsheet-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .quick-overview-page {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .quick-overview-page .factsheet-header,
  .quick-overview-page .factsheet-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.landing-hero > * {
  position: relative;
  z-index: 2;
}

.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: #111111;
  margin: 0;
}

.hero-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin: 0;
  max-width: 26ch;
  line-height: 1.1;
  color: #111111;
}

.hero-subtitle {
  margin: 0;
  max-width: 70ch;
  color: #111111;
  font-size: 1.05rem;
}

.tier-selector-page-hero {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0.82rem max(1rem, calc((100vw - 1200px) / 2 + 1rem));
  border-radius: 0;
  background: #ffffff;
  border: 0;
  border-bottom: 0;
  box-shadow: none;
  transition: padding-top 0.2s ease, padding-bottom 0.2s ease;
}

.tier-selector-page-hero.is-condensed {
  padding-top: 1px;
  padding-bottom: 1px;
}

.tier-selector-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.95rem;
}

.tier-selector-page-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: #111111;
}

.tier-selector-page-brand-logo {
  display: block;
  width: auto;
  height: clamp(34px, 4.3vw, 50px);
}

.tier-selector-page-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.95rem;
  justify-content: flex-end;
}

.tier-selector-page-link {
  color: #111111;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.1;
  padding: 0.12rem 0;
  border-bottom: 1px solid transparent;
}

.tier-selector-page-link:hover {
  color: #000000;
  border-bottom-color: #111111;
}

.tier-selector-page-link:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
  border-radius: 2px;
}

.tier-selector-page-link.is-active {
  color: #176297;
  border-bottom-color: #176297;
}

.main-content h1.tier-selector-page-title,
.main-content h1.tier-selector-page-title:first-of-type {
  margin: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.86rem max(1rem, calc((100vw - 1200px) / 2 + 1rem)) 0.92rem;
  font-size: clamp(1.95rem, 3.4vw, 2.8rem);
  font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.08;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

.tier-selector-page-title-band {
  margin: 0 0 0.8rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  display: flow-root;
  background:
    radial-gradient(138% 80% at 10% 50%, rgba(255, 255, 255, 0.115) 0%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(138% 80% at 90% 52%, rgba(255, 255, 255, 0.095) 0%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(128% 68% at 50% 20%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(142% 78% at 50% 96%, rgba(0, 0, 0, 0.085) 0%, rgba(0, 0, 0, 0) 76%),
    linear-gradient(180deg, #17639a 0%, #155d90 100%);
  border-top: 0;
  border-bottom: 1px solid #135379;
}

.tier-selector-page-hero + .tier-selector-page-title-band {
  margin-top: 0;
}

.tier-selector-page-title .anchor-heading {
  display: none !important;
}

@media (max-width: 980px) {
  .tier-selector-page-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.58rem;
  }

  .tier-selector-page-menu {
    justify-content: flex-start;
    gap: 0.25rem 0.78rem;
  }
}

@media (max-width: 640px) {
  .tier-selector-page-hero {
    padding: 0.72rem 0.82rem;
  }

  .tier-selector-page-brand-logo {
    height: 34px;
  }

  .tier-selector-page-link {
    font-size: 0.79rem;
  }
}

.landing-page .btn {
  background: #ffffff;
  border-color: #c2c2c2;
  color: #111111;
}

.landing-page .btn:hover {
  background: #f2f2f2;
}

.landing-page .btn-primary {
  border-color: #2f4b7c;
  background: #2f4b7c;
  color: #ffffff;
}

.landing-page .btn-primary:hover {
  background: #243a61;
  border-color: #243a61;
  color: #ffffff;
}

.hero-actions {
  margin-top: 0.5rem;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}

.link-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid #5a5a5a;
  color: #111111;
  text-decoration: none;
  font-size: 1rem;
  background: #f4f4f4;
}

.link-chip:hover {
  border-color: #a8a8a8;
  background: #eaeaea;
}

.card-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 1.2rem;
  padding-top: 0.75rem;
  margin-top: auto;
}

.landing-page .card {
  background: var(--landing-card);
  border-color: var(--landing-card-border);
  color: #111111;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.landing-page .card:hover {
  transform: translateY(-6px);
  border-color: #9a9a9a;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.16);
}

.card-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #b5b5b5;
  color: #333333;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.landing-help {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 12px;
  background: #f5f5f5;
  border: 1px solid #d2d2d2;
  color: #111111;
}

.landing-help h2 {
  color: #111111;
}

.landing-page .widget {
  background: #ffffff;
  border-color: #d6d6d6;
  color: #111111;
}

.landing-page .tier-question {
  background: #fafafa;
  border-color: #d6d6d6;
}

.landing-page .tier-question-title,
.landing-page .tier-answer {
  color: #111111;
}

.landing-page .tier-answer span {
  color: #111111;
}

.landing-page .reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.8s ease forwards;
}

.landing-page .hero-kicker {
  animation-delay: 0.05s;
}

.landing-page .hero-title {
  animation-delay: 0.12s;
}

.landing-page .hero-subtitle {
  animation-delay: 0.18s;
}

.landing-page .hero-actions {
  animation-delay: 0.24s;
}

.landing-page .hero-links {
  animation-delay: 0.3s;
}

.card-strip .card:nth-child(1) {
  animation-delay: 0.36s;
}

.card-strip .card:nth-child(2) {
  animation-delay: 0.42s;
}

.card-strip .card:nth-child(3) {
  animation-delay: 0.48s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.card {
  display: block;
  padding: 1rem;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #f8f8f8;
  color: inherit;
  text-decoration: none;
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.card:hover {
  background: #ffffff;
  border-color: #9a9a9a;
}

.widget {
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fafafa;
  padding: 1rem;
  margin: 1rem 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.scoring-sandbox .button-row {
  margin-top: 0.35rem;
  margin-bottom: 0.4rem;
}

.btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid #5a5a5a;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  background: #f0f0f0;
  cursor: pointer;
}

.btn:hover {
  background: #e6e6e6;
}

.screening-assessment .btn:hover,
.rapid-assessment .btn:hover,
.detailed-assessment .btn:hover {
  background: #e8eef9;
  border-color: #3c6ec3;
  box-shadow: 0 0 0 2px rgba(60, 110, 195, 0.2);
  color: #1f4f9c;
}

.screening-assessment .btn:focus,
.screening-assessment .btn:focus-visible,
.rapid-assessment .btn:focus,
.rapid-assessment .btn:focus-visible,
.detailed-assessment .btn:focus,
.detailed-assessment .btn:focus-visible {
  outline: none;
  border-color: #2f5fa6;
  box-shadow: 0 0 0 3px rgba(60, 110, 195, 0.35);
  color: #1f4f9c;
}

.screening-assessment .btn:disabled,
.screening-assessment .btn:disabled:hover,
.screening-assessment .btn:disabled:focus,
.screening-assessment .btn:disabled:focus-visible,
.rapid-assessment .btn:disabled,
.rapid-assessment .btn:disabled:hover,
.rapid-assessment .btn:disabled:focus,
.rapid-assessment .btn:disabled:focus-visible,
.detailed-assessment .btn:disabled,
.detailed-assessment .btn:disabled:hover,
.detailed-assessment .btn:disabled:focus,
.detailed-assessment .btn:disabled:focus-visible {
  background: #f0f0f0;
  border-color: #cfcfcf;
  box-shadow: none;
  color: #9a9a9a;
  cursor: default;
}

.btn-small {
  padding: 0.25rem 0.6rem;
  font-size: 0.9rem;
}

.btn-primary {
  border-color: #2f4b7c;
  background: #dde6f2;
}

.tier-selector {
  --tier-surface: #ffffff;
  --tier-border: #d8dee8;
  --tier-muted: #4a5b75;
  --tier-accent: #2f4b7c;
  padding: 1rem;
  border: 1px solid #d4dbe6;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fb 100%);
}

.tier-selector-fallback p:first-child {
  margin-top: 0;
}

.tier-selector-ui {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(250px, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.tier-selector-form {
  display: grid;
  gap: 0.85rem;
}

.tier-form-header {
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--tier-border);
  border-radius: 12px;
  background: var(--tier-surface);
}

.tier-form-header-copy {
  display: grid;
  gap: 0.18rem;
  align-content: start;
}

.tier-form-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: #33517a;
}

.tier-form-hint {
  margin: 0;
  color: var(--tier-muted);
  font-size: 0.92rem;
}

.tier-progress-panel {
  display: grid;
  gap: 0.38rem;
  min-width: min(280px, 100%);
}

.tier-progress-count {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #254165;
}

.tier-progress-bar {
  position: relative;
  width: 100%;
  height: 0.56rem;
  border-radius: 999px;
  background: #e7edf7;
  overflow: hidden;
}

.tier-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6b8fc4 0%, #2f4b7c 100%);
  transition: width 0.22s ease;
}

.tier-question-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.tier-question {
  margin: 0;
  min-inline-size: 0;
  border: 1px solid var(--tier-border);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
  background: var(--tier-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tier-question.is-answered {
  border-color: #adc2e2;
}

.tier-question-meta {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4d617f;
}

.tier-question-title {
  float: none;
  width: 100%;
  margin: 0 0 0.65rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1d2a3d;
}

.tier-answer-list {
  display: grid;
  gap: 0.4rem;
}

.tier-answer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.55rem;
  margin: 0;
  cursor: pointer;
}

.tier-answer input[type="radio"] {
  margin: 0.45rem 0 0;
}

.tier-answer-label {
  display: block;
  margin: 0;
  padding: 0.42rem 0.52rem;
  border: 1px solid #d7dfe9;
  border-radius: 8px;
  background: #f8fafd;
  color: #1d2738;
  line-height: 1.32;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.tier-answer:hover .tier-answer-label {
  border-color: #c2d0e4;
  background: #f2f6fc;
}

.tier-answer input[type="radio"]:checked + .tier-answer-label {
  border-color: #97b4df;
  background: #eaf1ff;
}

.tier-answer input[type="radio"]:focus-visible + .tier-answer-label {
  border-color: #3a69b2;
  box-shadow: 0 0 0 3px rgba(58, 105, 178, 0.24);
}

.tier-answer-hint {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease, margin-top 0.2s ease,
    padding 0.2s ease;
  border-radius: 9px;
  border: 1px solid transparent;
  color: #29466f;
  background: #f0f5ff;
  font-size: 0.9rem;
}

.tier-answer-hint.is-visible {
  margin-top: 0.58rem;
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
  padding: 0.52rem 0.62rem;
  border-color: #c8d8f2;
}

.tier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tier-selector .btn-primary {
  border-color: var(--tier-accent);
  background: var(--tier-accent);
  color: #ffffff;
}

.tier-selector .btn-primary:hover {
  border-color: #243a61;
  background: #243a61;
  color: #ffffff;
}

.tier-reset-btn {
  background: #ffffff;
}

.tier-preview {
  position: sticky;
  top: 1rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--tier-border);
  border-radius: 12px;
  background: var(--tier-surface);
  color: #23324a;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tier-preview.is-refreshing {
  opacity: 0.78;
  transform: translateY(2px);
}

.tier-preview-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4d617f;
}

.tier-preview-tier {
  margin: 0 0 0.36rem;
  font-size: 1.12rem;
}

.tier-preview-why {
  margin: 0 0 0.52rem;
  color: #344861;
  line-height: 1.36;
}

.tier-preview-meta {
  margin: 0;
  font-size: 0.85rem;
  color: #3f5776;
}

.tier-preview-reasons-label {
  margin: 0.65rem 0 0.25rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4b5e7c;
}

.tier-preview-reasons {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.tier-preview-reasons li {
  margin: 0.18rem 0;
}

.tier-score-chart-title {
  margin: 0.72rem 0 0.42rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4b5e7c;
}

.tier-score-chart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: end;
}

.tier-score-col {
  display: grid;
  justify-items: center;
  gap: 0.24rem;
}

.tier-score-value {
  margin: 0;
  min-width: 2ch;
  text-align: center;
  font-size: 0.98rem;
  font-weight: 600;
  color: #2a3f60;
  font-variant-numeric: tabular-nums;
}

.tier-score-track {
  position: relative;
  width: 100%;
  max-width: 58px;
  height: 92px;
  border-radius: 8px;
  border: 1px solid #cfdae9;
  background: #f5f8fc;
  overflow: hidden;
}

.tier-score-fill {
  position: absolute;
  inset: auto 0 0;
  height: 0%;
  background: linear-gradient(180deg, #8faede 0%, #41659e 100%);
  transition: height 0.2s ease;
}

.tier-score-col.is-leading .tier-score-track {
  border-color: #8eaedf;
  box-shadow: 0 0 0 2px rgba(79, 120, 186, 0.14);
}

.tier-score-col.is-leading .tier-score-value {
  color: #193a66;
}

.tier-score-label {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4d617f;
}

.tier-score-max {
  margin: 0;
  font-size: 0.7rem;
  color: #6a7f9e;
  font-variant-numeric: tabular-nums;
}

.tier-preview-note {
  margin: 0.6rem 0 0;
  font-size: 0.81rem;
  color: #566a86;
}

.tier-final-summary {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--tier-surface);
  transition: opacity 0.24s ease, transform 0.24s ease, max-height 0.24s ease, padding 0.24s ease,
    border-color 0.24s ease;
  pointer-events: none;
}

.tier-final-summary.is-visible {
  max-height: 1200px;
  opacity: 1;
  transform: translateY(0);
  border-color: #9ab5dd;
  box-shadow: 0 10px 26px rgba(37, 66, 105, 0.12);
  padding: 1rem;
  pointer-events: auto;
}

.tier-final-title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.tier-final-label {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #4b5e7c;
}

.tier-final-reasons {
  margin: 0.35rem 0 0.7rem;
  padding-left: 1.1rem;
}

.tier-final-reasons li {
  margin: 0.2rem 0;
}

.tier-final-next {
  margin: 0 0 0.7rem;
  color: #344861;
}

.tier-final-actions {
  margin-bottom: 0.65rem;
}

.tier-final-jump-label {
  margin: 0 0 0.4rem;
  font-size: 0.84rem;
  color: #485b78;
}

.tier-final-jump-links .is-recommended-link {
  border-color: #9ab5dd;
  background: #edf3ff;
}

@media (max-width: 1024px) {
  .tier-selector-ui {
    grid-template-columns: 1fr;
  }

  .tier-preview {
    position: static;
  }
}

@media (max-width: 760px) {
  .tier-selector {
    padding: 0.8rem;
  }

  .tier-form-header {
    flex-direction: column;
  }

  .tier-progress-panel {
    min-width: 0;
    width: 100%;
  }

  .tier-question-grid {
    grid-template-columns: 1fr;
  }
}

.score-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.score-input input[type="range"] {
  width: 140px;
}

.rapid-table .function-score-inline {
  margin-top: 0.1rem;
}

.score-value {
  min-width: 2.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.screening-assessment-layout {
  display: block;
}

.screening-assessment.widget {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: none;
}

.screening-library-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screening-library-modal[hidden] {
  display: none;
}

.screening-library-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.screening-library-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #cfcfcf;
  width: 90vw;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.screening-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #d0d0d0;
}

.screening-library-header h3 {
  margin: 0;
  font-size: 1rem;
}

.screening-library-table-wrap {
  padding: 0.75rem 1rem 1rem;
  overflow: auto;
}

.screening-library-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.screening-library-controls input[type='search'] {
  flex: 1 1 240px;
  min-width: 200px;
}

.screening-library-controls select {
  min-width: 200px;
}

.screening-library-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.25;
  table-layout: fixed;
}

.screening-library-table th,
.screening-library-table td {
  border: 1px solid #b5b5b5;
  padding: 0.35rem 0.5rem;
  vertical-align: top;
}

.screening-library-table th {
  background: #f3f3f3;
}

.screening-library-table col.col-discipline { width: 5%; }
.screening-library-table col.col-function { width: 4%; }
.screening-library-table col.col-metric { width: 4%; }
.screening-library-table col.col-context { width: 6%; }
.screening-library-table col.col-how { width: 15%; }
.screening-library-table col.col-optimal { width: 6%; }
.screening-library-table col.col-suboptimal { width: 6%; }
.screening-library-table col.col-marginal { width: 6%; }
.screening-library-table col.col-poor { width: 6%; }
.screening-library-table col.col-references { width: 12%; }
.screening-library-table col.col-include { width: 3%; }

.screening-library-table .col-include {
  text-align: center;
}

.screening-library-table th.col-include,
.screening-library-table td.col-include {
  min-width: 60px;
  white-space: nowrap;
}

.screening-library-table th.col-discipline,
.screening-library-table td.col-discipline {
  min-width: 72px;
  white-space: nowrap;
}

.screening-library-table th.col-function,
.screening-library-table td.col-function {
  white-space: normal;
}

.screening-library-table td {
  overflow-wrap: break-word;
  word-break: normal;
}

.screening-library-table .metric-summary {
  color: #555555;
  font-size: 0.85rem;
}

.screening-library-table .library-toggle {
  margin-left: 0.3rem;
  padding: 0.05rem 0.25rem;
  font-size: 0.75rem;
}

.screening-library-table tr.category-hydrology td {
  background: #d9e2f3;
}

.screening-library-table tr.category-hydraulics td {
  background: #b9cbe6;
}

.screening-library-table tr.category-geomorphology td {
  background: #f7e1d1;
}

.screening-library-table tr.category-physicochemistry td {
  background: #f3e9c4;
}

.screening-library-table tr.category-biology td {
  background: #dbead2;
}

.screening-library-table tr.inactive-row td {
  background: #f0f0f0 !important;
}

.screening-library-table td.library-group-active.category-hydrology {
  background: #d9e2f3 !important;
}

.screening-library-table td.library-group-active.category-hydraulics {
  background: #b9cbe6 !important;
}

.screening-library-table td.library-group-active.category-geomorphology {
  background: #f7e1d1 !important;
}

.screening-library-table td.library-group-active.category-physicochemistry {
  background: #f3e9c4 !important;
}

.screening-library-table td.library-group-active.category-biology {
  background: #dbead2 !important;
}

.screening-table td.screening-group-active.category-hydrology {
  background: #d9e2f3 !important;
}

.screening-table td.screening-group-active.category-hydraulics {
  background: #b9cbe6 !important;
}

.screening-table td.screening-group-active.category-geomorphology {
  background: #f7e1d1 !important;
}

.screening-table td.screening-group-active.category-physicochemistry {
  background: #f3e9c4 !important;
}

.screening-table td.screening-group-active.category-biology {
  background: #dbead2 !important;
}

.detailed-table td.detailed-group-active.category-hydrology {
  background: #d9e2f3 !important;
}

.detailed-table td.detailed-group-active.category-hydraulics {
  background: #b9cbe6 !important;
}

.detailed-table td.detailed-group-active.category-geomorphology {
  background: #f7e1d1 !important;
}

.detailed-table td.detailed-group-active.category-physicochemistry {
  background: #f3e9c4 !important;
}

.detailed-table td.detailed-group-active.category-biology {
  background: #dbead2 !important;
}

body.modal-open {
  overflow: hidden;
}

.rapid-assessment.widget {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  transform: none;
}

.detailed-assessment.widget {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  transform: none;
}

.detailed-tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  border-bottom: 1px solid #d0d0d0;
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.detailed-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.detailed-tab-add {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.detailed-settings-panel {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.detailed-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  padding: 0.6rem;
  overflow-x: auto;
}

.detailed-controls input[type="search"] {
  flex: 0 1 160px;
  min-width: 140px;
  max-width: 200px;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
}

.detailed-controls select {
  flex: 0 1 220px;
  max-width: 240px;
  min-width: 140px;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detailed-controls .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.detailed-table-wrap {
  overflow-x: auto;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  background: #ffffff;
}

/* Wide tables scroll inside their own box instead of being clipped by the
   viewport (the page itself cannot scroll sideways: body sets overflow-x
   hidden). Same idea as .detailed-table-wrap and .screening-table-wrap; this
   one is generic because the tables that need it are authored in two places. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.detailed-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.92rem;
  line-height: 1.25;
}

.detailed-table th,
.detailed-table td {
  border: 1px solid #b5b5b5;
  padding: 0.3rem 0.45rem;
  vertical-align: top;
  word-break: break-word;
  white-space: normal;
}

.detailed-table th {
  background: #f3f3f3;
  font-size: 0.85rem;
}

.detailed-table .col-discipline {
  width: 13ch;
  max-width: 13ch;
  white-space: nowrap;
}

.detailed-table .col-function {
  width: 20ch;
  max-width: 20ch;
  word-break: normal;
  overflow-wrap: normal;
}

.detailed-table .col-metric {
  width: 24ch;
  max-width: 24ch;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.detailed-table .col-field {
  width: 6ch;
  max-width: 6ch;
}

.detailed-table .col-scoring-criteria {
  width: 16ch;
  max-width: 16ch;
}

.detailed-table .col-index,
.detailed-table .col-function-estimate,
.detailed-table .col-physical,
.detailed-table .col-chemical,
.detailed-table .col-biological {
  width: 9ch;
  max-width: 9ch;
  text-align: center;
}

.detailed-table .col-function-score {
  width: 160px;
  max-width: 160px;
  text-align: center;
}

.detailed-table .function-score-cell {
  font-weight: normal;
  text-align: center;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.detailed-table .function-score-inline {
  margin-top: 0;
  width: 100%;
  justify-content: center;
  gap: 0.05rem;
  padding: 0 0.15rem;
  box-sizing: border-box;
  align-items: center;
  line-height: 1;
}

.detailed-table .function-score-inline .score-value {
  min-width: 1.4rem;
}

.detailed-table .function-score-inline .score-value.is-outside-suggested {
  color: #a23232;
  font-weight: 600;
  cursor: help;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(162, 50, 50, 0.55);
  text-underline-offset: 2px;
}

.detailed-table .metric-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.detailed-table .function-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  white-space: normal;
}

.detailed-table .metric-title {
  display: inline;
  white-space: normal;
}

.detailed-table .function-add-metric-btn {
  padding: 0.14rem 0.5rem;
  border: 1px solid #b6c4d8;
  border-radius: 999px;
  background: #f5f8fc;
  color: #27496b;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.detailed-table .function-add-metric-btn:hover,
.detailed-table .function-add-metric-btn:focus-visible {
  background: #e8eff8;
}

.detailed-table .metric-assignment-badge {
  display: inline-flex;
  margin-top: 0.28rem;
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
  background: #edf4ea;
  border: 1px solid #bed4b9;
  color: #345e31;
  font-size: 0.72rem;
  line-height: 1.2;
}

.detailed-table .function-title .metric-curve-link,
.detailed-table .metric-title .metric-curve-link,
.detailed-table .discipline-cell .metric-curve-link {
  color: #1d1d1d;
  text-decoration: none;
  padding: 0.1rem 0.2rem;
  border-radius: 6px;
}

.detailed-table .function-title .metric-curve-link:hover,
.detailed-table .function-title .metric-curve-link:focus-visible,
.detailed-table .metric-title .metric-curve-link:hover,
.detailed-table .metric-title .metric-curve-link:focus-visible,
.detailed-table .discipline-cell .metric-curve-link:hover,
.detailed-table .discipline-cell .metric-curve-link:focus-visible {
  background: #eef2fb;
  text-decoration: underline solid #1d1d1d;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.detailed-table .function-title .criteria-toggle,
.detailed-table .metric-title .criteria-toggle {
  margin-left: 0.3em;
  vertical-align: baseline;
  display: inline-block;
}

.detailed-table .col-scoring-criteria select {
  width: 100%;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  padding: 0.2rem 0.35rem;
  font: inherit;
}

.detailed-table .function-statement {
  margin-top: 0.25rem;
  color: #444444;
}

.detailed-table:not(.show-advanced-scoring) th.col-scoring-criteria,
.detailed-table:not(.show-advanced-scoring) td.col-scoring-criteria,
.detailed-table:not(.show-advanced-scoring) th.col-index,
.detailed-table:not(.show-advanced-scoring) td.col-index,
.detailed-table:not(.show-advanced-scoring) th.col-function-estimate,
.detailed-table:not(.show-advanced-scoring) td.col-function-estimate {
  display: none;
}

.detailed-table:not(.show-function-mappings) thead th.col-physical,
.detailed-table:not(.show-function-mappings) tbody td.col-physical,
.detailed-table:not(.show-function-mappings) thead th.col-chemical,
.detailed-table:not(.show-function-mappings) tbody td.col-chemical,
.detailed-table:not(.show-function-mappings) thead th.col-biological,
.detailed-table:not(.show-function-mappings) tbody td.col-biological {
  display: none;
}

.detailed-table .field-cell input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  padding: 0.2rem 0.35rem;
  font: inherit;
}

.detailed-table .criteria-row td {
  background: #f9f9f9 !important;
}

.detailed-charts-panel {
  margin-top: 0.8rem;
}

.detailed-charts-panel.show-suggested-function-cues .screening-chart-section:first-child .screening-bar-track {
  outline: 1px dashed rgba(109, 133, 177, 0.8);
  outline-offset: 1px;
}

.criteria-details-cell {
  padding: 0.5rem 0.6rem;
}

.reference-curve-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.reference-curve-row span {
  font-weight: 600;
}

.detailed-curve-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detailed-curve-modal[hidden] {
  display: none;
}

.detailed-curve-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.detailed-curve-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #cfcfcf;
  width: min(1100px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.curve-header,
.curve-footer {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #d0d0d0;
}

.curve-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.curve-subtitle {
  margin: 0.25rem 0 0;
  color: #555555;
  font-size: 0.9rem;
}

.curve-footer {
  border-top: 1px solid #d0d0d0;
  border-bottom: none;
}

.curve-body {
  padding: 0.75rem 1rem 1rem;
  overflow: auto;
}

.curve-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.curve-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #444444;
}

.curve-field input,
.curve-field select {
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
}

.curve-layer-bar,
.curve-layer-name-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.curve-layer-title {
  font-weight: 600;
}

.curve-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.9fr);
  align-items: start;
}

.curve-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9rem;
}

.curve-table th,
.curve-table td {
  border: 1px solid #cfcfcf;
  padding: 0.25rem 0.35rem;
}

.curve-table th {
  background: #f3f3f3;
  text-align: left;
}

.curve-table input {
  width: 100%;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  border: 1px solid #cfcfcf;
  font: inherit;
  background: #ffffff;
}

.curve-index-range,
.curve-index-range-inputs {
  display: grid;
  gap: 0.2rem;
}

.curve-index-range input,
.curve-index-range-inputs input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.curve-table .btn {
  padding: 0.2rem 0.4rem;
  font-size: 0.8rem;
}

.curve-table td:nth-child(3),
.curve-table td:nth-child(4) {
  text-align: center;
}

.detailed-table .empty-row td {
  text-align: center;
  font-style: italic;
  color: #666666;
  background: #f9f9f9;
}

@media (max-width: 960px) {
  .curve-grid {
    grid-template-columns: 1fr;
  }
}

.curve-chart {
  width: 100%;
  height: auto;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  background: #fafafa;
}

.screening-assessment-sidebar {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  padding: 0.85rem;
}

.screening-section + .screening-section {
  margin-top: 1rem;
}

.screening-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.screening-section-header h3 {
  margin: 0;
  font-size: 1rem;
}

.screening-add-assessment {
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.assessment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.assessment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
}

.assessment-item.is-active {
  border-color: #9db8f0;
  background: #e9f0ff;
  box-shadow: inset 0 0 0 1px #c5d7ff;
}

.assessment-name {
  font-weight: 500;
}

.assessment-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.assessment-duplicate,
.assessment-delete {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 600;
  color: #333333;
}

.assessment-duplicate {
  font-size: 0;
  line-height: 0;
}

.assessment-duplicate .duplicate-icon {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
}

.assessment-duplicate .duplicate-icon::before,
.assessment-duplicate .duplicate-icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #555555;
  border-radius: 2px;
  box-sizing: border-box;
  background: transparent;
}

.assessment-duplicate .duplicate-icon::before {
  top: 2px;
  left: 2px;
}

.assessment-duplicate .duplicate-icon::after {
  top: 0;
  left: 0;
}

.assessment-duplicate:hover {
  background: #f2f2f2;
}

.assessment-delete:hover {
  background: #f2f2f2;
}

.assessment-empty {
  padding: 0.4rem 0.6rem;
  color: #666666;
  font-size: 0.9rem;
}

.assessment-note {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666666;
}

.screening-assessment-main {
  min-width: 0;
}

.screening-tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  border-bottom: 1px solid #d0d0d0;
  padding-bottom: 0.35rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.screening-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.assessment-tab {
  border: 1px solid #cfcfcf;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f2f2f2;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.assessment-tab.is-active {
  background: #ffffff;
  font-weight: 600;
}

.assessment-tab-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.92rem;
  height: 0.92rem;
  color: #7a8391;
}

.assessment-tab-lock-icon svg {
  width: 100%;
  height: 100%;
}

.screening-tab-add {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.assessment-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.predefined-edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.predefined-edit-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: #fff1c2;
  color: #6a5200;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.predefined-edit-actions .detailed-predefined-save {
  border-color: #2f4b7c;
  color: #2f4b7c;
}

.predefined-edit-actions .detailed-predefined-save:hover,
.predefined-edit-actions .detailed-predefined-save:focus-visible {
  background: #eef3fb;
}

.predefined-edit-hint {
  margin: 0.55rem 0 0;
  color: #5a5f68;
  font-size: 0.84rem;
}

.screening-settings-panel {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.settings-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.settings-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.92rem;
  height: 0.92rem;
  color: #7a8391;
}

.settings-lock-icon svg {
  width: 100%;
  height: 100%;
}

.settings-header h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.screening-charts-panel .settings-header h3 {
  text-align: center;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
}

.settings-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #555555;
}

.settings-field input,
.settings-field textarea {
  padding: 0.45rem 0.6rem;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  font: inherit;
  background: #ffffff;
}

.settings-field.is-read-only input,
.settings-field.is-read-only textarea {
  background: #f3f4f6;
  border-color: #d4d7dd;
  color: #6b7280;
  cursor: not-allowed;
}

.settings-field.is-read-only input:focus,
.settings-field.is-read-only textarea:focus {
  box-shadow: none;
  outline: none;
}

.settings-notes-input {
  resize: vertical;
}

.settings-notes {
  grid-column: 1 / -1;
}

.screening-controls-host {
  margin-bottom: 0.75rem;
}

.screening-scoring-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  background: #f8f9fb;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.5rem;
}

.scoring-sandbox .screening-scoring-controls {
  margin-bottom: 0.45rem;
}

.scoring-sandbox .screening-scoring-controls .scoring-randomize-btn {
  margin-left: auto;
}

@media (max-width: 760px) {
  .scoring-sandbox .screening-scoring-controls .scoring-randomize-btn {
    margin-left: 0;
  }
}

.screening-default-criteria {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
}

.screening-default-criteria span {
  font-weight: 600;
  color: #333333;
}

.screening-default-criteria select {
  min-width: 180px;
  padding: 0.3rem 0.45rem;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #ffffff;
}

.screening-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #3b3b3b;
}

.screening-advanced-toggle input {
  margin: 0;
}

.screening-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  padding: 0.6rem;
  overflow-x: auto;
}

.screening-controls input[type="search"] {
  flex: 0 1 160px;
  min-width: 140px;
  max-width: 200px;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
}

.screening-controls select {
  flex: 0 1 220px;
  max-width: 240px;
  min-width: 140px;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screening-controls .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.screening-controls .metric-add-select {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 200px;
}

.screening-controls .library-open-btn {
  height: 34px;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  width: auto;
}

.library-open-btn svg {
  width: 18px;
  height: 18px;
}

.screening-table .metric-score-select {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
}

.screening-table .criteria-override {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.screening-table .criteria-select {
  min-width: 10.5ch;
  max-width: 10.5ch;
  width: 10.5ch;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  padding: 0.02rem 0.3rem;
  font-size: inherit;
  background: #ffffff;
}

.screening-table .criteria-select:disabled {
  background: #f1f1f1;
  color: #6b6b6b;
}

.screening-table .criteria-pill {
  border: 1px solid #c7c7c7;
  background: #f1f4f9;
  color: #2d3748;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
}

.screening-table .criteria-pill:hover {
  background: #e6eefc;
  border-color: #3c6ec3;
  color: #1f4f9c;
}

.screening-table .criteria-pill:focus,
.screening-table .criteria-pill:focus-visible {
  outline: none;
  border-color: #2f5fa6;
  box-shadow: 0 0 0 2px rgba(60, 110, 195, 0.3);
}

.screening-table .btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.1;
}

.screening-table .btn.btn-flat {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #000000;
  padding: 0.1rem 0.2rem;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.screening-table .btn.btn-flat:hover {
  text-decoration: none;
  color: #000000;
  background: transparent;
  box-shadow: none;
}

.screening-table .btn.btn-flat:focus,
.screening-table .btn.btn-flat:focus-visible {
  outline: none;
  box-shadow: none;
}

.screening-table .btn.btn-flat:disabled,
.screening-table .btn.btn-flat:disabled:hover {
  text-decoration: none;
  color: #9a9a9a;
  cursor: default;
}

.screening-table .btn.btn-flat.criteria-edit {
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
  background: transparent;
}

.screening-table .criteria-edit svg {
  width: 14px;
  height: 14px;
  display: block;
}

.screening-table .action-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

.screening-table .action-remove {
  min-width: 1.6rem;
  text-align: center;
}

.screening-table .function-score-cell {
  font-weight: normal;
  text-align: center;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.screening-table .function-score-inline {
  margin-top: 0;
  width: 100%;
  justify-content: center;
  gap: 0.05rem;
  padding: 0 0.15rem;
  box-sizing: border-box;
  align-items: center;
  line-height: 1;
}

.screening-table .function-score-inline .score-value {
  min-width: 1.4rem;
}

.screening-table .function-score-inline .score-value.is-outside-suggested {
  color: #a23232;
  font-weight: 600;
  cursor: help;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(162, 50, 50, 0.55);
  text-underline-offset: 2px;
}

.screening-table .function-score-slider {
  --slider-thumb-size: 14px;
  --slider-track-height: 6px;
  --slider-pad-x: 0.4rem;
  --slider-pad-y: 0.35rem;
  position: relative;
  flex: 1 1 140px;
  min-width: 120px;
  display: flex;
  align-items: center;
  height: var(--slider-thumb-size);
  padding: var(--slider-pad-y) var(--slider-pad-x);
  background: transparent;
  border-radius: 999px;
}

.screening-table .function-score-cue-labels {
  position: absolute;
  left: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  right: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  top: calc(50% - var(--slider-track-height) - 2px);
  height: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
}

.screening-table .function-score-cue-label {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 0.52rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #4a4a4a;
}

.screening-table.show-function-score-cue-labels .function-score-cue-labels {
  opacity: 1;
  visibility: visible;
}

.screening-table .function-score-cue-bar {
  position: absolute;
  left: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  right: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  top: calc(50% - var(--slider-track-height) - 1px);
  height: 2px;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    #e07070 0%,
    #e07070 33.33%,
    #f0cd52 33.33%,
    #f0cd52 66.66%,
    #7faee9 66.66%,
    #7faee9 100%
  );
  opacity: 0.9;
  z-index: 4;
  transition: opacity 120ms ease, filter 120ms ease;
}

.screening-table .function-score-cue-bar:focus-visible {
  outline: 1px solid rgba(17, 17, 17, 0.5);
  outline-offset: 2px;
}

.screening-table .function-score-cue-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 6px;
  background: rgba(51, 51, 51, 0.7);
  transform: translate(-0.5px, -50%);
  pointer-events: none;
}

.screening-table .function-score-slider:hover .function-score-cue-bar,
.screening-table .function-score-slider.is-dragging .function-score-cue-bar,
.screening-table .function-score-slider:focus-within .function-score-cue-bar {
  opacity: 1;
  filter: saturate(1.2) brightness(1.05);
}

.screening-table.show-advanced-scoring .function-score-slider {
  flex: 1 1 120px;
  min-width: 100px;
}

.screening-table.show-advanced-scoring.show-function-mappings .function-score-slider {
  flex: 1 1 100px;
  min-width: 90px;
}

.screening-table .function-score-suggested-layer {
  position: absolute;
  left: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  right: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.screening-table .function-score-suggested-bracket {
  position: absolute;
  top: calc(50% + (var(--slider-track-height) / 2) + 3px);
  left: 0;
  width: 0;
  height: 6px;
  border-bottom: 1px solid rgba(36, 36, 36, 0.38);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 140ms ease, filter 140ms ease;
}

.screening-table .function-score-suggested-bracket::before,
.screening-table .function-score-suggested-bracket::after {
  content: '';
  position: absolute;
  bottom: -1px;
  width: 1px;
  height: 4px;
  background: rgba(36, 36, 36, 0.5);
}

.screening-table .function-score-suggested-bracket::before {
  left: 0;
}

.screening-table .function-score-suggested-bracket::after {
  right: 0;
}

.screening-table .function-score-slider:focus-within .function-score-suggested-bracket:not([hidden]),
.screening-table .function-score-slider.is-dragging .function-score-suggested-bracket:not([hidden]) {
  opacity: 1;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.18));
}

.screening-table.show-suggested-function-cues .function-score-suggested-bracket:not([hidden]) {
  opacity: 1;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.18));
}

.screening-table .function-score-tooltip-wrap {
  position: absolute;
  left: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  right: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}

.screening-table .function-score-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  background: #111111;
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1.1;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.screening-table .function-score-tooltip-value {
  font-weight: 600;
  font-size: 0.72rem;
}

.screening-table .function-score-tooltip-status {
  font-size: 0.58rem;
  opacity: 0.8;
}

.screening-table .function-score-tooltip-status.status-within {
  color: #a7f3d0;
}

.screening-table .function-score-tooltip-status.status-below {
  color: #fecaca;
}

.screening-table .function-score-tooltip-status.status-above {
  color: #fde68a;
}

.screening-table .function-score-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-width: 4px 4px 0 4px;
  border-style: solid;
  border-color: #111111 transparent transparent transparent;
}

.screening-table .function-score-tooltip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.screening-table .function-score-slider input[type="range"] {
  --screening-score-color: #f7e088;
  --screening-score-color-active: #f0cd52;
  --screening-score-pct: 66.67%;
  --screening-score-empty: #cfd6df;
  --screening-thumb-size: 14px;
  width: 100%;
  position: relative;
  z-index: 1;
  height: var(--slider-thumb-size);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.screening-table .function-score-slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
  border-radius: 999px;
  border: 1.5px solid #232323;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  background: linear-gradient(
    to right,
    var(--screening-score-color) 0%,
    var(--screening-score-color) var(--screening-score-pct),
    var(--screening-score-empty) var(--screening-score-pct),
    var(--screening-score-empty) 100%
  );
}

.screening-table .function-score-slider input[type="range"]::-moz-range-track {
  height: var(--slider-track-height);
  border-radius: 999px;
  border: 1.5px solid #232323;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  background: linear-gradient(
    to right,
    var(--screening-score-color) 0%,
    var(--screening-score-color) var(--screening-score-pct),
    var(--screening-score-empty) var(--screening-score-pct),
    var(--screening-score-empty) 100%
  );
}

.screening-table .function-score-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--screening-thumb-size);
  height: var(--screening-thumb-size);
  border-radius: 50%;
  background: var(--screening-score-color);
  border: 1px solid rgba(0, 0, 0, 0.72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  margin-top: calc((var(--slider-track-height) - var(--screening-thumb-size)) / 2);
  position: relative;
  z-index: 4;
}

.screening-table .function-score-slider input[type="range"]::-moz-range-thumb {
  width: var(--screening-thumb-size);
  height: var(--screening-thumb-size);
  border-radius: 50%;
  background: var(--screening-score-color);
  border: 1px solid rgba(0, 0, 0, 0.72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  position: relative;
  z-index: 4;
}

.screening-table .function-score-slider:hover input[type="range"]::-webkit-slider-runnable-track,
.screening-table .function-score-slider.is-dragging input[type="range"]::-webkit-slider-runnable-track,
.screening-table .function-score-slider input[type="range"]:focus-visible::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--screening-score-color-active) 0%,
    var(--screening-score-color-active) var(--screening-score-pct),
    var(--screening-score-empty) var(--screening-score-pct),
    var(--screening-score-empty) 100%
  );
  border-color: #111111;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.screening-table .function-score-slider:hover input[type="range"]::-moz-range-track,
.screening-table .function-score-slider.is-dragging input[type="range"]::-moz-range-track,
.screening-table .function-score-slider input[type="range"]:focus-visible::-moz-range-track {
  background: linear-gradient(
    to right,
    var(--screening-score-color-active) 0%,
    var(--screening-score-color-active) var(--screening-score-pct),
    var(--screening-score-empty) var(--screening-score-pct),
    var(--screening-score-empty) 100%
  );
  border-color: #111111;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.screening-table .function-score-slider input[type="range"]:hover::-webkit-slider-thumb,
.screening-table .function-score-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  background: var(--screening-score-color-active);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.screening-table .function-score-slider input[type="range"]:hover::-moz-range-thumb,
.screening-table .function-score-slider input[type="range"]:focus-visible::-moz-range-thumb {
  background: var(--screening-score-color-active);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.screening-table .function-score-slider.is-dragging input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.14), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.screening-table .function-score-slider.is-dragging input[type="range"]::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.14), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.screening-table .function-score-slider.is-dragging input[type="range"] {
  --screening-thumb-size: 15px;
}

.screening-table .function-score-markers {
  position: absolute;
  left: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  right: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  height: calc(var(--slider-track-height) + 8px);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}

.screening-table .function-score-marker {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: #3f3f3f;
  transform: translateX(-0.5px);
  z-index: 2;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

.screening-table .function-score-inline.is-hidden {
  display: none;
}

.detailed-table .function-score-slider {
  --slider-thumb-size: 14px;
  --slider-track-height: 6px;
  --slider-pad-x: 0.4rem;
  --slider-pad-y: 0.35rem;
  position: relative;
  flex: 1 1 140px;
  min-width: 120px;
  display: flex;
  align-items: center;
  height: var(--slider-thumb-size);
  padding: var(--slider-pad-y) var(--slider-pad-x);
  background: transparent;
  border-radius: 999px;
}

.detailed-table .function-score-cue-labels {
  position: absolute;
  left: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  right: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  top: calc(50% - var(--slider-track-height) - 2px);
  height: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
}

.detailed-table .function-score-cue-label {
  position: absolute;
  transform: translate(-50%, -100%);
  font-size: 0.52rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #4a4a4a;
}

.detailed-table.show-function-score-cue-labels .function-score-cue-labels {
  opacity: 1;
  visibility: visible;
}

.detailed-table .function-score-cue-bar {
  position: absolute;
  left: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  right: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  top: calc(50% - var(--slider-track-height) - 1px);
  height: 2px;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
  background: linear-gradient(
    to right,
    #e07070 0%,
    #e07070 33.33%,
    #f0cd52 33.33%,
    #f0cd52 66.66%,
    #7faee9 66.66%,
    #7faee9 100%
  );
  opacity: 0.9;
  z-index: 4;
}

.detailed-table .function-score-cue-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 6px;
  background: rgba(51, 51, 51, 0.7);
  transform: translate(-0.5px, -50%);
  pointer-events: none;
}

.detailed-table.show-advanced-scoring .function-score-slider {
  flex: 1 1 120px;
  min-width: 100px;
}

.detailed-table.show-advanced-scoring.show-function-mappings .function-score-slider {
  flex: 1 1 100px;
  min-width: 90px;
}

.detailed-table .function-score-suggested-layer {
  position: absolute;
  left: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  right: calc(var(--slider-thumb-size) / 2 + var(--slider-pad-x));
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.detailed-table .function-score-suggested-bracket {
  position: absolute;
  top: calc(50% + (var(--slider-track-height) / 2) + 3px);
  left: 0;
  width: 0;
  height: 6px;
  border-bottom: 1px solid rgba(36, 36, 36, 0.38);
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 140ms ease, filter 140ms ease;
}

.detailed-table .function-score-suggested-bracket::before,
.detailed-table .function-score-suggested-bracket::after {
  content: '';
  position: absolute;
  bottom: -1px;
  width: 1px;
  height: 4px;
  background: rgba(36, 36, 36, 0.5);
}

.detailed-table .function-score-suggested-bracket::before {
  left: 0;
}

.detailed-table .function-score-suggested-bracket::after {
  right: 0;
}

.detailed-table.show-suggested-function-cues .function-score-suggested-bracket:not([hidden]) {
  opacity: 1;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.18));
}

.detailed-table .function-score-slider input[type="range"] {
  --screening-score-color: #f7e088;
  --screening-score-color-active: #f0cd52;
  --screening-score-pct: 66.67%;
  --screening-score-empty: #cfd6df;
  --screening-thumb-size: 14px;
  width: 100%;
  position: relative;
  z-index: 1;
  height: var(--slider-thumb-size);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.detailed-table .function-score-slider input[type="range"]:disabled {
  opacity: 1;
  pointer-events: none;
}

.detailed-table .function-score-slider input[type="range"]::-webkit-slider-runnable-track {
  height: var(--slider-track-height);
  border-radius: 999px;
  border: 1.5px solid #232323;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  background: linear-gradient(
    to right,
    var(--screening-score-color) 0%,
    var(--screening-score-color) var(--screening-score-pct),
    var(--screening-score-empty) var(--screening-score-pct),
    var(--screening-score-empty) 100%
  );
}

.detailed-table .function-score-slider input[type="range"]::-moz-range-track {
  height: var(--slider-track-height);
  border-radius: 999px;
  border: 1.5px solid #232323;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  background: linear-gradient(
    to right,
    var(--screening-score-color) 0%,
    var(--screening-score-color) var(--screening-score-pct),
    var(--screening-score-empty) var(--screening-score-pct),
    var(--screening-score-empty) 100%
  );
}

.detailed-table .function-score-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--screening-thumb-size);
  height: var(--screening-thumb-size);
  border-radius: 50%;
  background: var(--screening-score-color);
  border: 1px solid rgba(0, 0, 0, 0.72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  margin-top: calc((var(--slider-track-height) - var(--screening-thumb-size)) / 2);
  position: relative;
  z-index: 4;
}

.detailed-table .function-score-slider input[type="range"]::-moz-range-thumb {
  width: var(--screening-thumb-size);
  height: var(--screening-thumb-size);
  border-radius: 50%;
  background: var(--screening-score-color);
  border: 1px solid rgba(0, 0, 0, 0.72);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  position: relative;
  z-index: 4;
}

.screening-charts-panel {
  margin-top: 0.85rem;
}

.screening-charts-header {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
}

.screening-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.6rem minmax(0, 1fr);
  gap: 0.9rem;
}

.screening-chart-spacer {
  width: 1px;
  background: #d0d0d0;
  justify-self: center;
  align-self: stretch;
}

.screening-chart-section {
  background: #ffffff;
}

.screening-chart-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #333333;
}

.screening-chart-body {
  display: grid;
  gap: 0.35rem;
}

.screening-bar-divider {
  height: 0.4rem;
  border-top: 1px solid #d3d3d3;
  margin: 0.1rem 0 0.2rem;
}

.screening-bar-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(120px, 2.25fr) 3.5ch;
  align-items: center;
  gap: 0.5rem;
}

.screening-bar-label {
  white-space: nowrap;
}

.screening-bar-label {
  font-size: 0.85rem;
  color: #333333;
}

/* The 220px + 120px track minimums above force the row to ~387px, wider than a
   phone viewport, and the label's nowrap keeps it from giving any width back.
   Let both tracks collapse and the label wrap so the chart fits the screen.
   Must sit after the nowrap rule: a media query adds no specificity, so at
   equal specificity the later declaration wins. */
@media (max-width: 700px) {
  .screening-bar-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 2.25fr) 3.5ch;
  }

  .screening-bar-label {
    white-space: normal;
  }
}

.screening-bar-track {
  position: relative;
  height: 0.85rem;
  background: transparent;
  border: 1px solid #c7c7c7;
  border-radius: 0;
  overflow: hidden;
  width: 100%;
}

.screening-bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.2s ease;
}

.screening-bar-value {
  font-size: 0.85rem;
  text-align: right;
  color: #333333;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .screening-charts {
    grid-template-columns: minmax(0, 1fr);
  }
  .screening-chart-spacer {
    display: none;
  }
}

.screening-chart-empty {
  font-size: 0.75rem;
  color: #666666;
}

.screening-chart-legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.6rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  width: 100%;
  margin-bottom: 0.1rem;
  font-size: 0.8rem;
  color: #333333;
}

.screening-chart-legend .legend-group {
  display: grid;
  grid-template-columns: auto 1.3rem auto;
  align-items: stretch;
  gap: 0.5rem;
  justify-self: center;
}

.screening-chart-legend .legend-spacer {
  width: 1px;
  height: 100%;
}

.screening-chart-legend .legend-bar {
  width: 1.3rem;
  height: 3.6rem;
  border: 1px solid #c7c7c7;
  background: linear-gradient(to bottom, #c8d9f2 0%, #c8d9f2 33.33%, #f5e7a6 33.33%, #f5e7a6 66.66%, #f5b5b5 66.66%, #f5b5b5 100%);
}

.screening-chart-legend .legend-labels {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  height: 3.6rem;
  line-height: 1.1;
}

.screening-chart-legend .legend-labels-left {
  text-align: right;
}

.screening-chart-legend .legend-labels-right {
  text-align: left;
}

.detailed-legend-abbrev {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}

.criteria-row td {
  background: #f9f9f9;
  max-width: none;
  white-space: normal;
}

.rapid-table .criteria-row td {
  background: #f9f9f9;
  border-left-color: transparent;
  border-right-color: transparent;
}

.rapid-table tr.criteria-row td {
  background: #f9f9f9 !important;
}

.rapid-table tr.category-hydrology td {
  background: #d9e2f3;
}

.rapid-table tr.category-hydraulics td {
  background: #b9cbe6;
}

.rapid-table tr.category-geomorphology td {
  background: #f7e1d1;
}

.rapid-table tr.category-physicochemistry td {
  background: #f3e9c4;
}

.rapid-table tr.category-biology td {
  background: #dbead2;
}

.criteria-details {
  display: grid;
  gap: 0.5rem;
}

.criteria-summary-header {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.criteria-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.criteria-grid > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.criteria-grid > div > div {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.criteria-block strong {
  display: block;
  margin-bottom: 0.2rem;
}

.criteria-block div {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.screening-table-wrap {
  overflow-x: auto;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  background: #ffffff;
}

.screening-table {
  width: 100%;
  table-layout: fixed;
  min-width: 0;
}

.screening-table.show-advanced-scoring {
  min-width: 1120px;
}

.screening-table.show-advanced-scoring.show-function-mappings {
  min-width: 0;
}

.rapid-table {
  width: 100%;
  min-width: 100%;
  font-size: 0.88rem;
  line-height: 1.1;
}

.rapid-table th,
.rapid-table td {
  padding: 0.16rem 0.3rem;
  vertical-align: top;
  word-break: break-word;
  white-space: normal;
  line-height: 1.1;
}

.rapid-table tbody td {
  padding-top: 0.24rem;
  padding-bottom: 0.24rem;
}

.rapid-table th {
  font-size: 0.85rem;
}

.rapid-table td.col-indicator-score {
  padding: 0;
}

.rapid-table td.col-indicator-score select {
  width: 100%;
  height: 100%;
  min-height: 0.9rem;
  box-sizing: border-box;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1;
}

.screening-table th,
.screening-table td {
  word-break: break-word;
  white-space: normal;
  min-width: 0;
  max-width: 30ch;
}

.screening-table th {
  font-size: 0.85rem;
}

.screening-table .criteria-row td {
  max-width: none;
  width: auto;
  white-space: normal;
}

.screening-table tr.criteria-row td {
  background: #f9f9f9 !important;
}

.screening-table tr.metric-expanded td {
  padding-bottom: 0.1rem !important;
}

.screening-table tr.criteria-row td {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
}

.screening-table .criteria-details table th,
.screening-table .criteria-details table td {
  background: #f9f9f9;
}

.screening-table th.col-metric-score,
.screening-table th.col-scoring-criteria,
.screening-table th.col-index-score,
.screening-table th.col-function-estimate,
.screening-table th.col-function-score,
.screening-table th.col-indicator-score,
.screening-table th.col-physical,
.screening-table th.col-chemical,
.screening-table th.col-biological {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.1;
}

.screening-table td.col-metric-score,
.screening-table td.col-index-score,
.screening-table td.col-function-estimate,
.screening-table td.col-function-score,
.screening-table td.col-indicator-score,
.screening-table td.col-physical,
.screening-table td.col-chemical,
.screening-table td.col-biological {
  white-space: nowrap;
  text-align: center;
}

.screening-table td.col-scoring-criteria {
  white-space: normal;
}

.screening-table td.col-index-score,
.screening-table td.col-function-estimate {
  font-variant-numeric: tabular-nums;
}

.screening-table:not(.show-advanced-scoring) th.col-scoring-criteria,
.screening-table:not(.show-advanced-scoring) td.col-scoring-criteria,
.screening-table:not(.show-advanced-scoring) th.col-index-score,
.screening-table:not(.show-advanced-scoring) td.col-index-score,
.screening-table:not(.show-advanced-scoring) th.col-function-estimate,
.screening-table:not(.show-advanced-scoring) td.col-function-estimate {
  display: none;
}

.screening-table:not(.show-condensed-view) th.col-function-score,
.screening-table:not(.show-condensed-view) td.col-function-score {
  display: none;
}

.rapid-table:not(.show-function-mappings) th.col-physical,
.rapid-table:not(.show-function-mappings) td.col-physical,
.rapid-table:not(.show-function-mappings) th.col-chemical,
.rapid-table:not(.show-function-mappings) td.col-chemical,
.rapid-table:not(.show-function-mappings) th.col-biological,
.rapid-table:not(.show-function-mappings) td.col-biological {
  display: none;
}

.screening-table:not(.screening-summary-table):not(.show-function-mappings) th.col-physical,
.screening-table:not(.screening-summary-table):not(.show-function-mappings) td.col-physical,
.screening-table:not(.screening-summary-table):not(.show-function-mappings) th.col-chemical,
.screening-table:not(.screening-summary-table):not(.show-function-mappings) td.col-chemical,
.screening-table:not(.screening-summary-table):not(.show-function-mappings) th.col-biological,
.screening-table:not(.screening-summary-table):not(.show-function-mappings) td.col-biological {
  display: none;
}

.screening-table th.col-physical,
.screening-table th.col-chemical,
.screening-table th.col-biological {
  font-size: 0.8rem;
  white-space: nowrap;
}

.screening-table .col-discipline {
  width: 14ch;
  max-width: 14ch;
  white-space: nowrap;
  word-break: normal;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-discipline {
  width: 10.5ch;
  max-width: 10.5ch;
}

.screening-table .col-function {
  width: 22ch;
  max-width: 22ch;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: manual;
  overflow: hidden;
}

.screening-table .col-metric {
  width: 28ch;
  max-width: 28ch;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-function {
  width: 11ch;
  max-width: 11ch;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-metric {
  width: 13ch;
  max-width: 13ch;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-index-score {
  width: 6ch;
  max-width: 6ch;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-function-estimate {
  width: 8ch;
  max-width: 8ch;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-physical,
.screening-table.show-advanced-scoring.show-function-mappings .col-chemical,
.screening-table.show-advanced-scoring.show-function-mappings .col-biological {
  width: 6ch;
  max-width: 6ch;
}

.screening-table .col-metric-score {
  width: 11ch;
  max-width: 11ch;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-metric-score {
  width: 8ch;
  max-width: 8ch;
}

.screening-table .col-scoring-criteria {
  width: 124px;
  max-width: 124px;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-scoring-criteria {
  width: 84px;
  max-width: 84px;
}

.screening-table .col-index-score {
  width: 9ch;
  max-width: 9ch;
}

.screening-table .col-function-estimate {
  width: 11ch;
  max-width: 11ch;
}

.screening-table .col-indicator-score {
  width: 10ch;
  max-width: 10ch;
}

.screening-table .col-function-score {
  width: 160px;
  max-width: 160px;
}

.screening-table.show-advanced-scoring .col-function-score {
  width: 140px;
  max-width: 140px;
}

.screening-table.show-advanced-scoring.show-function-mappings .col-function-score {
  width: 90px;
  max-width: 90px;
}

.rapid-table .indicator-cell {
  white-space: normal;
  line-height: 1.1;
}

.rapid-table .function-title {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.rapid-table .function-statement {
  margin-top: 0.08rem;
  color: #444444;
}

.screening-table .function-title {
  display: inline;
  white-space: normal;
}

.screening-table .metric-title {
  display: inline;
  white-space: normal;
}

.screening-table .function-title .metric-curve-link {
  display: inline;
  text-align: left;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screening-table .metric-title .metric-curve-link {
  display: inline;
  text-align: left;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screening-table .function-title .criteria-toggle {
  margin-left: 0.3em;
  vertical-align: baseline;
  display: inline-block;
}

.screening-table .metric-title .criteria-toggle {
  margin-left: 0.3em;
  vertical-align: baseline;
  display: inline-block;
}

.screening-table .function-statement {
  margin-top: 0.25rem;
  color: #444444;
}

.screening-table .metric-statement {
  margin-top: 0.2rem;
  color: #4a4a4a;
  font-size: 0.85rem;
  line-height: 1.2;
}

.scoring-table .function-title {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.scoring-table .function-statement {
  margin-top: 0.15rem;
  color: #444444;
}

.scoring-table .function-score-inline {
  margin-top: 0;
}

.scoring-table {
  width: 100%;
  table-layout: fixed;
  font-size: 0.9rem;
  line-height: 1.2;
}

.scoring-table th,
.scoring-table td {
  padding: 0.35rem 0.5rem;
  word-break: break-word;
  white-space: normal;
}

.scoring-table th {
  font-size: 0.85rem;
}

.scoring-table th:nth-child(1),
.scoring-table td:nth-child(1) {
  width: 15%;
}

.scoring-table th:nth-child(2),
.scoring-table td:nth-child(2) {
  width: 30%;
}

.scoring-table th:nth-child(3),
.scoring-table td:nth-child(3) {
  width: 22%;
}

.scoring-table th:nth-child(4),
.scoring-table td:nth-child(4),
.scoring-table th:nth-child(5),
.scoring-table td:nth-child(5),
.scoring-table th:nth-child(6),
.scoring-table td:nth-child(6) {
  width: 11%;
}

.criteria-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.3em;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #333333;
  cursor: pointer;
  vertical-align: middle;
}

.criteria-toggle:hover {
  background: #e8eef9;
  border-color: #3c6ec3;
  color: #1f4f9c;
}

.screening-table .btn.btn-flat.criteria-edit:hover,
.screening-table .btn.btn-flat.criteria-edit:focus,
.screening-table .btn.btn-flat.criteria-edit:focus-visible {
  background: #e8eef9;
  border-color: #3c6ec3;
  color: #1f4f9c;
}

.criteria-toggle:focus,
.criteria-toggle:focus-visible {
  outline: none;
  border-color: #2f5fa6;
  box-shadow: 0 0 0 2px rgba(60, 110, 195, 0.3);
  color: #1f4f9c;
}

.criteria-toggle:disabled,
.criteria-toggle:disabled:hover,
.criteria-toggle:disabled:focus,
.criteria-toggle:disabled:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #9a9a9a;
  cursor: default;
}

.criteria-remove {
  font-weight: 600;
}

.rapid-table .indicator-cell .criteria-toggle {
  margin-left: 0.35rem;
  padding: 0.05rem 0.25rem;
  font-size: 0.75rem;
}

.screening-table .metric-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.screening-table .metric-actions:empty {
  display: none;
}

.screening-table .col-physical,
.screening-table .col-chemical,
.screening-table .col-biological {
  width: 9ch;
  max-width: 9ch;
}

.screening-summary-table:not(.show-function-mappings) .col-physical,
.screening-summary-table:not(.show-function-mappings) .col-chemical,
.screening-summary-table:not(.show-function-mappings) .col-biological {
  width: 9.75ch;
  max-width: 9.75ch;
  min-width: 9.75ch;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.screening-summary-table:not(.show-function-mappings) .summary-mapping-header {
  white-space: normal;
  line-height: 1.1;
}

.screening-table tfoot td,
.detailed-table tfoot td {
  background: #f5f5f5;
  padding: 0.2rem 0.32rem;
}

.screening-summary-table td {
  background: #f5f5f5;
  padding: 0.2rem 0.32rem;
}

.screening-summary-table .summary-gap-row td {
  background: transparent;
  border: none;
  padding: 0;
  height: 0.45rem;
}

.detailed-table .summary-gap-row td {
  background: transparent;
  border: none;
  padding: 0;
  height: 0.45rem;
}

.screening-summary-table tr:first-child td {
  border-top: 0;
}

.scoring-table tfoot td {
  background: #f5f5f5;
}

.screening-table .summary-labels,
.scoring-table .summary-labels,
.detailed-table .summary-labels {
  font-weight: 600;
  text-align: right;
}

.screening-table .summary-mapping-header,
.detailed-table .summary-mapping-header {
  font-weight: 600;
  text-align: center;
  font-size: 0.8rem;
}

.screening-table .summary-values,
.scoring-table .summary-values,
.detailed-table .summary-values {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.screening-table .summary-merged,
.scoring-table .summary-merged,
.detailed-table .summary-merged {
  text-align: center;
}

@media (max-width: 960px) {
  .screening-assessment.widget {
    width: 100%;
    max-width: 100%;
  }

  .rapid-assessment.widget {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}
.scoring-table .weight-cell,
.screening-table .weight-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.scoring-table .mapping-display-value {
  display: inline-block;
  min-width: 1.1ch;
}

.scoring-table .mapping-display-value[hidden] {
  display: none !important;
}

.scoring-table .mapping-edit-select {
  width: 2.6rem;
  max-width: 100%;
  height: 1.45rem;
  padding: 0 0.1rem;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1;
  background: #ffffff;
  text-align-last: center;
  vertical-align: middle;
  margin: 0 auto;
  box-sizing: border-box;
}

.scoring-table.mapping-edit-mode .mapping-edit-select {
  width: 2.2rem;
  height: 1.2rem;
  padding: 0;
  font-size: 0.72rem;
}

.scoring-table.mapping-edit-mode td.col-physical,
.scoring-table.mapping-edit-mode td.col-chemical,
.scoring-table.mapping-edit-mode td.col-biological {
  padding-top: 0.12rem;
  padding-bottom: 0.12rem;
}

.scoring-table .discipline-cell {
  font-weight: 600;
  vertical-align: middle;
}

.functions-landscape.widget {
  padding: 0.9rem;
  border: 1px solid #d5dbe6;
  border-radius: 12px;
  background: #fbfcff;
}

.functions-landscape {
  display: grid;
  gap: 0.65rem;
}

.functions-landscape-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 300px);
  gap: 0.65rem;
  align-items: start;
}

.functions-landscape-visual {
  display: grid;
  gap: 0.45rem;
}

.functions-landscape-canvas {
  position: relative;
  border: 1px solid #d1d8e4;
  border-radius: 12px;
  overflow: hidden;
  background: #e8edf5;
  isolation: isolate;
}

.functions-landscape-canvas img {
  display: block;
  width: 100%;
  height: auto;
}

.functions-landscape-stage {
  position: relative;
  width: 100%;
  transform-origin: top left;
  will-change: transform;
}

.functions-landscape-hotspot-layer {
  position: absolute;
  inset: 0;
}

.functions-landscape-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #1e3353;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
  z-index: 2;
}

.functions-landscape-hotspot::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #1e3353;
}

.functions-landscape-hotspot:hover,
.functions-landscape-hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 0 4px rgba(56, 95, 154, 0.18);
}

.functions-landscape-hotspot:focus-visible {
  outline: 2px solid #244a80;
  outline-offset: 2px;
}

.functions-landscape-hotspot.is-selected {
  background: #244a80;
  border-color: #102949;
  transform: translate(-50%, -50%) scale(1.28);
  box-shadow: 0 0 0 7px rgba(56, 95, 154, 0.34), 0 0 18px rgba(36, 74, 128, 0.58);
}

.functions-landscape-hotspot.is-selected::after {
  background: #ffffff;
}

.functions-landscape-callout {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
  transition: none;
  z-index: 1;
  opacity: 0;
}

.functions-landscape-callout:hover,
.functions-landscape-callout:focus-visible {
  transform: translate(-50%, -50%);
  box-shadow: none;
}

.functions-landscape-callout:focus-visible {
  outline: none;
}

.functions-landscape-callout.is-selected {
  transform: translate(-50%, -50%);
  box-shadow: none;
}

.functions-landscape-canvas.is-zoom-enabled {
  cursor: grab;
}

.functions-landscape-controls {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.functions-landscape-action-bar,
.functions-landscape-action-btn {
  display: none !important;
}

.functions-landscape-zoom {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  pointer-events: auto;
}

.functions-landscape-zoom-rail {
  display: none;
}

.functions-landscape-zoom-step {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  border: 1px solid rgba(30, 45, 70, 0.25);
  background: #ffffff;
  color: #3a3a3a;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  padding: 0;
  place-items: center;
  cursor: pointer;
}

.functions-landscape-zoom-range {
  appearance: none;
  width: var(--range-length, 180px);
  height: 4px;
  margin: 0;
  transform: rotate(-90deg);
  border-radius: 999px;
  background: rgba(31, 53, 89, 0.22);
  outline: none;
}

.functions-landscape-zoom-range::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #667997;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.14);
  cursor: pointer;
}

.functions-landscape-zoom-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #667997;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.14);
  cursor: pointer;
}

.functions-landscape-details {
  display: grid;
  gap: 0.45rem;
  width: 100%;
}

.functions-landscape-details-card {
  border: 1px solid #d5dce8;
  border-radius: 12px;
  background: #ffffff;
  padding: 0.78rem 0.85rem;
  display: grid;
  gap: 0.55rem;
}

.functions-landscape-details-name {
  margin: 0;
  font-size: 1.03rem;
  font-weight: 600;
  color: #16263d;
}

.functions-landscape-details-meta {
  margin: 0;
  font-size: 0.86rem;
  color: #3c5272;
}

.functions-landscape-details-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.functions-landscape-details-section {
  border: 1px solid #d8e0ee;
  border-radius: 10px;
  background: #f7f9fd;
  padding: 0.5rem 0.55rem;
  display: grid;
  gap: 0.28rem;
}

.functions-landscape-details-section-title {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4a6082;
}

.functions-landscape-details-section-value {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #243753;
}

.functions-landscape-jump {
  justify-self: start;
  margin-top: 0.2rem;
}

.functions-landscape-edit-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #5d4d2f;
  background: #fff8e8;
  border: 1px solid #e4d7ba;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
}

.functions-landscape-editor {
  border: 1px solid #d5dce8;
  border-radius: 10px;
  background: #ffffff;
  padding: 0.55rem;
  display: grid;
  gap: 0.45rem;
}

.functions-landscape-editor-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.functions-landscape-editor-label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: #3a4f6f;
}

.functions-landscape-editor-select {
  min-width: min(330px, 100%);
  border: 1px solid #c8d4e8;
  border-radius: 8px;
  background: #f8fbff;
  color: #1f3658;
  padding: 0.28rem 0.42rem;
  font-size: 0.82rem;
}

.functions-landscape-editor-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.functions-landscape-editor-output {
  width: 100%;
  border: 1px solid #c8d4e8;
  border-radius: 8px;
  background: #f7fafe;
  color: #1a3051;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 0.76rem;
  line-height: 1.35;
  padding: 0.45rem 0.5rem;
  resize: vertical;
}

.functions-landscape-editor-status {
  margin: 0;
  font-size: 0.75rem;
  color: #4b5e7c;
}

.functions-landscape.is-edit-mode .functions-landscape-hotspot {
  cursor: grab;
}

.functions-landscape.is-edit-mode .functions-landscape-hotspot:active {
  cursor: grabbing;
}

.functions-landscape.is-edit-mode .functions-landscape-callout {
  cursor: grab;
  opacity: 0.35;
  border: 1px dashed rgba(24, 38, 57, 0.72);
  background: rgba(255, 255, 255, 0.18);
}

.functions-landscape.is-edit-mode .functions-landscape-callout:active {
  cursor: grabbing;
}

@media (max-width: 980px) {
  .functions-landscape-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .functions-landscape-editor-row {
    align-items: start;
  }

  .functions-landscape-editor-select {
    min-width: 100%;
  }

  .functions-landscape-zoom {
    gap: 5px;
  }
}

@media (max-width: 700px) {
  .functions-landscape-details-sections {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .functions-landscape-hotspot,
  .functions-landscape-hotspot:hover,
  .functions-landscape-hotspot:focus-visible,
  .functions-landscape-callout,
  .functions-landscape-callout:hover,
  .functions-landscape-callout:focus-visible {
    transition: none;
  }
}

.functions-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.functions-controls input[type="search"] {
  flex: 1 1 220px;
  padding: 0.35rem 0.5rem;
}

.functions-controls select {
  padding: 0.35rem 0.5rem;
}

.functions-table,
.scoring-table,
.screening-table {
  width: 100%;
  border-collapse: collapse;
}

.tier-comparison-widget {
  display: grid;
  gap: 1rem;
  margin-top: 0.9rem;
  font-size: 1.06rem;
  line-height: 1.52;
}

.tier-comparison-lead {
  margin: 0;
  color: #334257;
  max-width: 72ch;
}

.tier-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.tier-comparison-widget .anchor-heading {
  display: none !important;
}

.tier-comparison-card {
  border: 1px solid #d5deea;
  border-radius: 12px;
  background: #f8fafd;
  padding: 0.86rem 0.9rem 0.92rem;
  min-width: 0;
  display: grid;
  gap: 0.65rem;
  align-content: start;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
}

.tier-comparison-card[data-tier="screening"] {
  border-top: 3px solid #5f84ac;
}

.tier-comparison-card[data-tier="rapid"] {
  border-top: 3px solid #4e8c74;
}

.tier-comparison-card[data-tier="detailed"] {
  border-top: 3px solid #8b6a51;
}

.tier-comparison-card-title {
  margin: 0;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #d3ddec;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}

.tier-comparison-block {
  margin: 0;
  padding-top: 0.56rem;
  border-top: 1px solid #dfe6f2;
}

.tier-comparison-block:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.tier-comparison-block-title {
  margin: 0 0 0.22rem;
  font-size: 0.82rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #3f5778;
}

.tier-comparison-block ul {
  margin: 0;
  padding-left: 1.08rem;
}

.tier-comparison-block li {
  margin: 0.28rem 0;
}

.tier-comparison-tier-link {
  color: #1f3f68;
  text-decoration: none;
}

.tier-comparison-tier-link:hover {
  color: #0f335f;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

.tier-comparison-tier-link:focus-visible {
  outline: 2px solid #3a69b2;
  outline-offset: 2px;
  border-radius: 2px;
}

.tier-comparison-widget[data-tier-focus] .tier-comparison-card {
  opacity: 0.72;
  filter: grayscale(0.1);
}

.tier-selector.widget ~ .tier-comparison-widget[data-tier-focus="screening"] .tier-comparison-card:not([data-tier="screening"]),
.tier-selector.widget ~ .tier-comparison-widget[data-tier-focus="rapid"] .tier-comparison-card:not([data-tier="rapid"]),
.tier-selector.widget ~ .tier-comparison-widget[data-tier-focus="detailed"] .tier-comparison-card:not([data-tier="detailed"]) {
  opacity: 0.5;
  filter: grayscale(0.2);
}

.tier-comparison-widget[data-tier-focus="screening"] .tier-comparison-card[data-tier="screening"],
.tier-comparison-widget[data-tier-focus="rapid"] .tier-comparison-card[data-tier="rapid"],
.tier-comparison-widget[data-tier-focus="detailed"] .tier-comparison-card[data-tier="detailed"] {
  opacity: 1;
  filter: none;
  border-color: #4f78ba;
  box-shadow: 0 0 0 2px rgba(79, 120, 186, 0.2);
  background: #ecf3ff;
}

.tier-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 0.75rem;
  border: 1px solid #d6d6d6;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
}

.tier-comparison-table th,
.tier-comparison-table td {
  border: 1px solid #e0e0e0;
  padding: 0.45rem 0.6rem;
  vertical-align: top;
}

.tier-comparison-table th {
  background: #f6f6f6;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.95rem;
}

.tier-comparison-table thead th:nth-child(n + 2) {
  text-align: center;
}

.tier-comparison-table tbody th {
  font-size: 0.95rem;
}

.tier-comparison-table ul {
  margin: 0.2rem 0 0.2rem 1rem;
  padding: 0;
}

.tier-comparison-table tbody tr:nth-child(even) td,
.tier-comparison-table tbody tr:nth-child(even) th {
  background: #fafafa;
}


.tier-comparison-table.tier-focus-screening thead th:nth-child(3),
.tier-comparison-table.tier-focus-screening thead th:nth-child(4),
.tier-comparison-table.tier-focus-screening tbody td:nth-child(3),
.tier-comparison-table.tier-focus-screening tbody td:nth-child(4) {
  opacity: 0.55;
}

.tier-comparison-table.tier-focus-screening thead th:nth-child(2),
.tier-comparison-table.tier-focus-screening tbody td:nth-child(2) {
  border-left: 2px solid #8d8d8d;
  border-right: 2px solid #8d8d8d;
}

.tier-comparison-table.tier-focus-screening thead th:nth-child(2) {
  border-top: 2px solid #8d8d8d;
}

.tier-comparison-table.tier-focus-screening tbody tr:last-child td:nth-child(2) {
  border-bottom: 2px solid #8d8d8d;
}

.tier-comparison-table.tier-focus-rapid thead th:nth-child(2),
.tier-comparison-table.tier-focus-rapid thead th:nth-child(4),
.tier-comparison-table.tier-focus-rapid tbody td:nth-child(2),
.tier-comparison-table.tier-focus-rapid tbody td:nth-child(4) {
  opacity: 0.55;
}

.tier-comparison-table.tier-focus-rapid thead th:nth-child(3),
.tier-comparison-table.tier-focus-rapid tbody td:nth-child(3) {
  border-left: 2px solid #8d8d8d;
  border-right: 2px solid #8d8d8d;
}

.tier-comparison-table.tier-focus-rapid thead th:nth-child(3) {
  border-top: 2px solid #8d8d8d;
}

.tier-comparison-table.tier-focus-rapid tbody tr:last-child td:nth-child(3) {
  border-bottom: 2px solid #8d8d8d;
}

.tier-comparison-table.tier-focus-detailed thead th:nth-child(2),
.tier-comparison-table.tier-focus-detailed thead th:nth-child(3),
.tier-comparison-table.tier-focus-detailed tbody td:nth-child(2),
.tier-comparison-table.tier-focus-detailed tbody td:nth-child(3) {
  opacity: 0.55;
}

.tier-comparison-table.tier-focus-detailed thead th:nth-child(4),
.tier-comparison-table.tier-focus-detailed tbody td:nth-child(4) {
  border-left: 2px solid #8d8d8d;
  border-right: 2px solid #8d8d8d;
}

.tier-comparison-table.tier-focus-detailed thead th:nth-child(4) {
  border-top: 2px solid #8d8d8d;
}

.tier-comparison-table.tier-focus-detailed tbody tr:last-child td:nth-child(4) {
  border-bottom: 2px solid #8d8d8d;
}

@media (max-width: 1080px) {
  .tier-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tier-comparison-widget {
    font-size: 1.02rem;
  }

  .tier-comparison-card {
    padding: 0.78rem 0.82rem 0.86rem;
  }

  .tier-comparison-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
}

.functions-table th,
.functions-table td,
.scoring-table th,
.scoring-table td,
.screening-table th,
.screening-table td {
  border: 1px solid #b5b5b5;
  padding: 0.35rem 0.5rem;
  vertical-align: top;
}

.scoring-table th,
.scoring-table td {
  padding: 0.35rem 0.5rem;
  word-break: break-word;
  white-space: normal;
}

.functions-table {
  font-size: 0.95rem;
  line-height: 1.25;
  table-layout: fixed;
}

.screening-table {
  font-size: 0.92rem;
  line-height: 1.25;
}

.functions-table th {
  background: #f3f3f3;
}

.screening-table th {
  background: #f3f3f3;
}

.functions-table th:nth-child(1),
.functions-table td:nth-child(1) {
  width: 140px;
}

.functions-table th:nth-child(2),
.functions-table td:nth-child(2) {
  width: 260px;
}

.functions-table th:nth-child(3),
.functions-table td:nth-child(3) {
  width: auto;
}

.functions-table td {
  word-break: break-word;
}

.functions-table tr.function-row {
  scroll-margin-top: 100px;
}

.functions-table tr.is-highlighted td {
  background: #ecf4ff !important;
  box-shadow: inset 0 0 0 2px #2f5b9a;
}

.category-cell {
  font-weight: 600;
  vertical-align: middle;
}

.description-text {
  flex: 1 1 auto;
  margin-right: 0.3rem;
}

.functions-table .description-details {
  margin-top: 0.35rem;
  display: grid;
  gap: 0.3rem;
}

.functions-table .description-details[hidden] {
  display: none;
}

.functions-table .description-detail {
  color: #111111;
}

.functions-table .description-label {
  font-weight: 400;
  color: #333333;
  margin-right: 0.35rem;
}

.functions-table .description-impact {
  display: inline;
}

.functions-table .description-impact .description-text {
  display: inline;
}

.functions-table .description-impact .criteria-toggle {
  margin-left: 0.25rem;
  vertical-align: baseline;
}

.functions-table .criteria-toggle {
  margin-left: 0.35rem;
}

.functions-table tr.category-hydrology td {
  background: #d9e2f3;
}

.scoring-table tr.category-hydrology td {
  background: #d9e2f3;
}

.screening-table tr.category-hydrology td {
  background: #d9e2f3;
}

.detailed-table tr.category-hydrology td {
  background: #d9e2f3;
}

.functions-table tr.category-hydraulics td {
  background: #b9cbe6;
}

.scoring-table tr.category-hydraulics td {
  background: #b9cbe6;
}

.screening-table tr.category-hydraulics td {
  background: #b9cbe6;
}

.detailed-table tr.category-hydraulics td {
  background: #b9cbe6;
}

.functions-table tr.category-geomorphology td {
  background: #f7e1d1;
}

.scoring-table tr.category-geomorphology td {
  background: #f7e1d1;
}

.screening-table tr.category-geomorphology td {
  background: #f7e1d1;
}

.detailed-table tr.category-geomorphology td {
  background: #f7e1d1;
}

.functions-table tr.category-physicochemistry td {
  background: #f3e9c4;
}

.scoring-table tr.category-physicochemistry td {
  background: #f3e9c4;
}

.screening-table tr.category-physicochemistry td {
  background: #f3e9c4;
}

.detailed-table tr.category-physicochemistry td {
  background: #f3e9c4;
}

.functions-table tr.category-biology td {
  background: #dbead2;
}

.scoring-table tr.category-biology td {
  background: #dbead2;
}

.screening-table tr.category-biology td {
  background: #dbead2;
}

.detailed-table tr.category-biology td {
  background: #dbead2;
}

.screening-table tr.inactive-row td {
  background: #f0f0f0;
}

.screening-table td.col-function-score.function-score-cell,
.detailed-table td.col-function-score.function-score-cell {
  background: #ffffff;
}

.screening-table tr.category-hydrology td.col-function-score.function-score-cell,
.detailed-table tr.category-hydrology td.col-function-score.function-score-cell {
  background: #ecf1f9;
}

.screening-table tr.category-hydraulics td.col-function-score.function-score-cell,
.detailed-table tr.category-hydraulics td.col-function-score.function-score-cell {
  background: #dce5f2;
}

.screening-table tr.category-geomorphology td.col-function-score.function-score-cell,
.detailed-table tr.category-geomorphology td.col-function-score.function-score-cell {
  background: #fbf0e8;
}

.screening-table tr.category-physicochemistry td.col-function-score.function-score-cell,
.detailed-table tr.category-physicochemistry td.col-function-score.function-score-cell {
  background: #f9f4e1;
}

.screening-table tr.category-biology td.col-function-score.function-score-cell,
.detailed-table tr.category-biology td.col-function-score.function-score-cell {
  background: #edf4e9;
}

.screening-table tr.inactive-row td.col-function-score.function-score-cell,
.detailed-table tr.inactive-row td.col-function-score.function-score-cell {
  background: #f8f8f8;
}

.detailed-table tr.inactive-row td {
  background: #f0f0f0;
}

.details-caret {
  padding: 0 0.25rem;
  font-size: 0.9rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  vertical-align: baseline;
}

.details-caret:hover,
.details-caret:focus-visible {
  background: rgba(255, 255, 255, 0.7);
  border-color: #888888;
}

.details-row td {
  background: transparent;
}

.details-panel {
  padding: 0.35rem 0.5rem;
}

.details-panel p {
  margin: 0 0 0.35rem;
}

.details-panel ul {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
}

.summary-labels,
.summary-values {
  background: #f3f3f3;
  vertical-align: top;
}

.summary-labels {
  text-align: right;
  font-weight: 600;
}

.summary-values {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.summary-stack {
  display: grid;
  gap: 0.35rem;
}

.summary-merged {
  text-align: center;
}

.metrics-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.35rem 0.5rem;
  margin-top: 0.2rem;
}

.metrics-heading {
  font-weight: 600;
  margin-bottom: 0.05rem;
}

.outcome-summary {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-weight: 600;
}

.scoring-sandbox .mapping-edit-toggle-label {
  font-weight: 500;
}

.scoring-sandbox .mapping-weight-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  margin-left: auto;
}

.scoring-sandbox .mapping-weight-field[hidden] {
  display: none !important;
}

.scoring-sandbox .mapping-weight-input {
  width: 5.5rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  font: inherit;
}

@media (max-width: 700px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .card-strip {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 640px) {
  .card-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-nav {
    position: static;
    max-height: none;
  }
}

.curve-summary-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cfcfcf;
  font-size: 0.85rem;
  margin-bottom: 0.1rem;
  overflow: visible;
}

.curve-summary-table th,
.curve-summary-table td {
  border: 1px solid #cfcfcf;
  padding: 0.35rem 0.4rem;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
}

.curve-summary-table tr:nth-child(2) td,
.curve-summary-table tr:nth-child(3) td {
  vertical-align: middle;
}

.curve-summary-table th {
  background: #f3f3f3;
  text-align: left;
  width: 90px;
}

.curve-point-desc {
  margin-top: 0.25rem;
  color: #555555;
  font-size: 0.8rem;
  line-height: 1.2;
}

.curve-summary-table .curve-point-value {
  word-break: normal;
  overflow-wrap: normal;
}

/* Metric library workbench layout */
.assessment-workbench {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 3.2fr) minmax(280px, 1.2fr);
  gap: 1rem;
  align-items: start;
  width: 100%;
}

/* Screening + Rapid + Detailed tiers: dock sidebars to page rails */
.assessment-workbench[data-assessment-tier="screening"],
.assessment-workbench[data-assessment-tier="rapid"],
.assessment-workbench[data-assessment-tier="detailed"] {
  --library-sidebar-width: 340px;
  --inspector-sidebar-width: 360px;
  grid-template-columns: minmax(0, 1fr) !important;
}

.assessment-workbench[data-assessment-tier="screening"].is-left-collapsed,
.assessment-workbench[data-assessment-tier="rapid"].is-left-collapsed,
.assessment-workbench[data-assessment-tier="detailed"].is-left-collapsed {
  grid-template-columns: minmax(0, 1fr) !important;
}

.assessment-workbench[data-assessment-tier="screening"].is-right-collapsed,
.assessment-workbench[data-assessment-tier="rapid"].is-right-collapsed,
.assessment-workbench[data-assessment-tier="detailed"].is-right-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.assessment-workbench[data-assessment-tier="screening"].is-left-collapsed.is-right-collapsed,
.assessment-workbench[data-assessment-tier="rapid"].is-left-collapsed.is-right-collapsed,
.assessment-workbench[data-assessment-tier="detailed"].is-left-collapsed.is-right-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.assessment-workbench.is-left-collapsed {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.2fr);
}

.assessment-workbench.is-right-collapsed {
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr);
}

.assessment-workbench.is-left-collapsed.is-right-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.assessment-workspace {
  min-width: 0;
}

.assessment-workbench .screening-assessment.widget,
.assessment-workbench .rapid-assessment.widget,
.assessment-workbench .detailed-assessment.widget {
  width: 100%;
  max-width: 100%;
}

.metric-library-sidebar,
.metric-inspector-sidebar {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: hidden;
}

.assessment-workbench[data-assessment-tier="screening"] .metric-library-sidebar,
.assessment-workbench[data-assessment-tier="rapid"] .metric-library-sidebar,
.assessment-workbench[data-assessment-tier="detailed"] .metric-library-sidebar {
  position: fixed;
  left: 0;
  top: 1rem;
  width: var(--library-sidebar-width);
  height: calc(100vh - 2rem);
  max-height: calc(100vh - 2rem);
  z-index: 50;
}

.assessment-workbench[data-assessment-tier="screening"] .metric-inspector-sidebar,
.assessment-workbench[data-assessment-tier="rapid"] .metric-inspector-sidebar,
.assessment-workbench[data-assessment-tier="detailed"] .metric-inspector-sidebar {
  position: fixed;
  right: 0;
  top: 1rem;
  width: var(--inspector-sidebar-width);
  height: calc(100vh - 2rem);
  max-height: calc(100vh - 2rem);
  z-index: 50;
}

.assessment-workbench[data-assessment-tier="screening"] .metric-library-resizer,
.assessment-workbench[data-assessment-tier="rapid"] .metric-library-resizer {
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}

.assessment-workbench[data-assessment-tier="screening"] .metric-library-resizer::after,
.assessment-workbench[data-assessment-tier="rapid"] .metric-library-resizer::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 5px;
  width: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
}

.assessment-workbench[data-assessment-tier="screening"] .metric-inspector-resizer,
.assessment-workbench[data-assessment-tier="rapid"] .metric-inspector-resizer {
  position: absolute;
  top: 0;
  left: -6px;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}

.assessment-workbench[data-assessment-tier="screening"] .metric-inspector-resizer::after,
.assessment-workbench[data-assessment-tier="rapid"] .metric-inspector-resizer::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 5px;
  width: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.15);
}

.metric-library-sidebar.is-collapsed,
.metric-inspector-sidebar.is-collapsed {
  display: none;
}

.metric-library-header {
  display: grid;
  gap: 0.5rem;
}

.metric-library-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.metric-library-title-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.metric-library-title-row h3 {
  margin: 0;
  font-size: 1rem;
}

.metric-library-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: #8b8f94;
  cursor: pointer;
}

.metric-library-download svg {
  width: 16px;
  height: 16px;
}

.metric-library-download:hover {
  color: #6f747a;
}

.metric-library-download:focus-visible {
  outline: 2px solid rgba(122, 167, 255, 0.75);
  outline-offset: 2px;
  border-radius: 4px;
}

.metric-library-download.is-loading,
.metric-library-download:disabled {
  opacity: 0.6;
  cursor: progress;
}

.metric-library-search {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  font: inherit;
}

.metric-tier-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.metric-tier-chip {
  border: 1px solid #cfcfcf;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  background: #f7f7f7;
  font-size: 0.8rem;
  cursor: pointer;
}

.metric-tier-chip.is-active {
  background: #e9f0ff;
  border-color: #8fb0e6;
  color: #1f4f9c;
  font-weight: 600;
}

.metric-library-column-header,
.metric-library-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(1rem, auto);
  gap: 0.5rem;
  align-items: start;
}

.metric-library-column-header {
  display: none;
}

.metric-library-list {
  overflow: auto;
  padding-right: 0.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  overflow-x: hidden;
}

.metric-library-row {
  padding: 0.35rem 0.35rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.85rem;
}

.metric-library-row.is-clickable {
  cursor: pointer;
}

.metric-library-row.is-clickable:focus-visible {
  outline: 2px solid #8fb0e6;
  outline-offset: 2px;
}

.metric-library-row:hover {
  border-color: #d5d9e0;
  background: #f7f8fa;
}

.metric-library-row.is-selected {
  border-color: #c8ccd4;
  background: #f0f1f3;
}

.metric-library-close,
.metric-inspector-close {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0.15rem 0.35rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  color: #333333;
}

.metric-inspector-header-main {
  display: grid;
  gap: 0.25rem;
}

.metric-inspector-footer {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e3e7ee;
  display: flex;
  justify-content: flex-end;
}

.metric-delete-btn {
  border: 1px solid #e0a7a7;
  background: #fdf2f2;
  color: #8a1d1d;
  padding: 0.3rem 0.6rem;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
}

.metric-delete-btn:hover {
  background: #fbe9e9;
}

.metric-inspector-title-input {
  font: inherit;
  font-weight: 600;
  border: 1px solid #cfd5e0;
  border-radius: 8px;
  padding: 0.25rem 0.4rem;
  background: #ffffff;
  color: #1d1d1d;
  width: 100%;
}

.metric-detail-locked {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.metric-detail-editor {
  display: grid;
  gap: 0.6rem;
}

.metric-detail-field {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: #1f2937;
}

.metric-detail-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #4b5563;
}

.metric-detail-field input,
.metric-detail-field textarea {
  font: inherit;
  border: 1px solid #cfd5e0;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: #ffffff;
  resize: vertical;
}

.metric-inspector-toggle {
  align-self: flex-start;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  min-width: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.metric-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.metric-cell .metric-name-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.metric-name-text {
  color: #1d1d1d;
  font-weight: 400;
  line-height: 1.2;
}

.metric-lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  color: #b5bcc8;
  margin-left: 0.15rem;
}

.metric-lock-icon svg {
  width: 100%;
  height: 100%;
}

.metric-lock-icon-tier {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.1rem;
}

.metric-origin-icon-user {
  color: #8a97ac;
}

.metric-add-btn {
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 2.2rem;
  white-space: nowrap;
}

.metric-add-btn.is-added {
  background: #e6f4ea;
  border-color: #9dc7a6;
  color: #2c6b3f;
}

.metric-add-btn.is-remove {
  background: #fbe9e9;
  border-color: #d99b9b;
  color: #8a1d1d;
  font-weight: 700;
}

.metric-add-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.metric-add-btn.is-remove.is-disabled {
  background: #f2f2f2;
  border-color: #cfcfcf;
  color: #8f8f8f;
}

.metric-cell .metric-add-btn {
  margin-left: auto;
}

.metric-library-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: #eef1f7;
  border: 1px solid #d3d9e6;
  font-size: 0.8rem;
  font-weight: 600;
  color: #24324a;
  overflow: visible;
}

.metric-library-group-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  cursor: pointer;
}

.metric-library-group-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.metric-group-toggle {
  border: none;
  background: transparent;
  color: #44536e;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.1;
  font-size: 1rem;
  font-weight: 700;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.metric-group-toggle:hover {
  color: #1d2940;
}

.metric-group-add-trigger {
  border: 1px solid #b9c0cf;
  background: #ffffff;
  color: #2b3446;
  min-height: 1.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.15rem 0.52rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.metric-group-add-trigger:hover {
  background: #f3f5f9;
}

.metric-group-add-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 9.5rem;
  padding: 0.35rem;
  border: 1px solid #c7cedd;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(15, 22, 35, 0.12);
}

.metric-group-add-option {
  border: 1px solid #d6dce8;
  border-radius: 6px;
  background: #f8faff;
  color: #1f2940;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
  padding: 0.25rem 0.45rem;
  cursor: pointer;
}

.metric-group-add-option:hover {
  background: #edf3ff;
  border-color: #b8c5df;
}

.metric-library-group.is-collapsed .metric-library-group-function {
  opacity: 0.9;
}


.metric-library-group.category-hydrology {
  background: #d9e2f3;
}

.metric-library-group.category-hydraulics {
  background: #b9cbe6;
}

.metric-library-group.category-geomorphology {
  background: #f7e1d1;
}

.metric-library-group.category-physicochemistry {
  background: #f3e9c4;
}

.metric-library-group.category-biology {
  background: #dbead2;
}

.metric-library-group-discipline {
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid #c3c9d6;
  background: #ffffff;
  font-size: 0.7rem;
  text-transform: capitalize;
}

.metric-library-group-function {
  font-size: 0.82rem;
}

.metric-library-filters {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.metric-library-target-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #c7d7eb;
  border-radius: 10px;
  background: #f5f9ff;
}

.metric-library-target-label {
  color: #27496b;
  font-size: 0.8rem;
  line-height: 1.3;
}

.metric-library-target-clear {
  border: 1px solid #b6c4d8;
  border-radius: 999px;
  background: #ffffff;
  color: #27496b;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.14rem 0.5rem;
  white-space: nowrap;
}

.metric-library-target-clear:hover,
.metric-library-target-clear:focus-visible {
  background: #edf4fb;
}

.metric-library-filter {
  flex: 1 1 140px;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
  border: 1px solid #cfcfcf;
  font: inherit;
  background: #ffffff;
}

.metric-min-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 1.35rem;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid #d0d0d0;
  background: #f5f5f5;
  font-size: 0.75rem;
  text-transform: capitalize;
}

.metric-tier-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.2rem;
  align-items: center;
  justify-content: flex-end;
  min-height: 1.35rem;
}

.metric-scoring-main {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.metric-curves-text {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: #1f4f9c;
  text-decoration: underline;
}

.metric-curves-toggle {
  border: 1px solid #cfcfcf;
  border-radius: 999px;
  padding: 0.05rem 0.3rem;
  background: #ffffff;
  font-size: 0.75rem;
  cursor: pointer;
}

.metric-curves-list {
  margin-top: 0.25rem;
  padding-left: 0.15rem;
  display: grid;
  gap: 0.15rem;
}

.metric-curve-group {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #666666;
  margin-top: 0.2rem;
}

.metric-curve-link {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: #1f4f9c;
  cursor: pointer;
  text-decoration: none;
}

.screening-table .metric-curve-link {
  color: #1d1d1d;
  text-decoration: none;
  padding: 0.1rem 0.2rem;
  border-radius: 6px;
}

.screening-table .metric-curve-link:hover,
.screening-table .metric-curve-link:focus-visible {
  background: #eef2fb;
  text-decoration: underline solid #1d1d1d;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.rapid-table .metric-curve-link {
  color: #1d1d1d;
  text-decoration: none;
  padding: 0.1rem 0.2rem;
  border-radius: 6px;
}

.rapid-table .metric-curve-link:hover,
.rapid-table .metric-curve-link:focus-visible {
  background: #eef2fb;
  text-decoration: underline solid #1d1d1d;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.metric-details-btn {
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  padding: 0.2rem 0.4rem;
  background: #ffffff;
  font-size: 0.75rem;
  cursor: pointer;
}

.metric-inspector-empty {
  color: #666666;
  font-size: 0.9rem;
  padding: 0.5rem 0.2rem;
}

.metric-inspector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0.5rem;
}

.metric-inspector-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
}

.metric-inspector-title {
  margin: 0;
  font-size: 1rem;
}

.metric-inspector-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: #666666;
}

.metric-profile-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.metric-profile-chip {
  border: 1px solid #cfcfcf;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  background: #f7f7f7;
  cursor: pointer;
  text-transform: capitalize;
}

.metric-profile-chip.is-active {
  background: #e9f0ff;
  border-color: #8fb0e6;
  color: #1f4f9c;
  font-weight: 600;
}

.metric-profile-summary {
  font-size: 0.85rem;
  color: #555555;
}

.metric-add-warning {
  font-size: 0.8rem;
  color: #8a3f2c;
  background: #f8e9e4;
  border: 1px solid #e2c2b8;
  border-radius: 8px;
  padding: 0.35rem 0.45rem;
}

.metric-inspector-tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0.4rem;
}

.metric-inspector-tab {
  border: none;
  background: none;
  padding: 0.25rem 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.metric-inspector-tab.is-active {
  border-bottom: 2px solid #1f4f9c;
  color: #1f4f9c;
  font-weight: 600;
}

.metric-tab-panel {
  display: none;
  font-size: 0.88rem;
  color: #333333;
}

.metric-tab-panel.is-active {
  display: block;
}

.metric-inspector-content {
  display: grid;
  gap: 0.6rem;
  overflow: auto;
}

.metric-detail-section {
  display: grid;
  gap: 0.2rem;
}

.metric-detail-section + .metric-detail-section {
  margin-top: 0.85rem;
}

.metric-detail-section h4 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #444444;
}

.metric-detail-section p,
.metric-detail-section ul {
  margin: 0;
}

.metric-detail-section ul {
  padding-left: 1.1rem;
}

.metric-detail-section li {
  margin: 0;
}

.metric-rubric-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed;
}

.metric-rubric-table th,
.metric-rubric-table td {
  border: 1px solid #d0d0d0;
  padding: 0.3rem 0.4rem;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.metric-rubric-table th {
  background: #f3f3f3;
  text-align: left;
}

.metric-inspector-content .metric-rubric-table th:nth-child(1),
.metric-inspector-content .metric-rubric-table td:nth-child(1) {
  width: 7.5ch;
}

.metric-inspector-content .metric-rubric-table.has-suggested-index th:nth-child(2),
.metric-inspector-content .metric-rubric-table.has-suggested-index td:nth-child(2) {
  width: 9ch;
}

.metric-curve-builder {
  display: grid;
  gap: 0.6rem;
}

.metric-curve-builder.is-locked {
  opacity: 0.75;
}

.metric-curve-empty {
  font-size: 0.85rem;
  color: #6b7280;
  background: #f7f8fa;
  border: 1px dashed #cfd5e0;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
}

.metric-curve-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.metric-curve-range-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.metric-curve-chart-wrap {
  position: relative;
}

.metric-curve-chart-expand {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.metric-curve-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.metric-curve-modal.is-open {
  display: flex;
}

.metric-curve-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.metric-curve-modal-card {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  z-index: 1;
  display: grid;
  gap: 0.5rem;
}

.metric-curve-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 600;
}

.metric-curve-modal-close {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.85rem;
}

.metric-curve-modal-canvas {
  display: block;
}

.metric-curve-name-input {
  flex: 1 1 180px;
  min-width: 140px;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid #cfcfcf;
  font: inherit;
}

.metric-curve-table {
  width: 100%;
  table-layout: fixed;
  --curve-col-value: 120px;
  --curve-col-index: 70px;
}

.metric-curve-table th,
.metric-curve-table td {
  padding: 0.3rem 0.35rem;
}

.metric-curve-col-value {
  width: var(--curve-col-value);
}

.metric-curve-col-index {
  width: var(--curve-col-index);
}

.metric-curve-col-desc {
  width: auto;
}

.metric-curve-value-cell {
  width: 12ch;
  vertical-align: top;
}

.metric-curve-index-cell {
  width: var(--curve-col-index);
  min-width: 4ch;
  vertical-align: top;
}

.metric-curve-desc-cell {
  width: auto;
  vertical-align: top;
}

.metric-curve-value-input {
  width: 100%;
  min-width: 0;
}

.metric-curve-index-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
}

.metric-curve-index-range {
  display: grid;
  gap: 0.2rem;
}

.metric-curve-index-range input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.metric-curve-table th {
  position: relative;
}

.metric-curve-col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}

.metric-curve-desc {
  width: 100%;
  resize: vertical;
  min-height: 2.2rem;
  padding: 0.25rem 0.35rem;
  border-radius: 6px;
  border: 1px solid #cfcfcf;
  font: inherit;
}

.metric-curve-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.metric-curve-table th,
.metric-curve-table td {
  border: 1px solid #d0d0d0;
  padding: 0.25rem 0.35rem;
}

.metric-curve-table th {
  background: #f3f3f3;
  text-align: left;
}

.metric-curve-chart-wrap {
  margin-top: 0.4rem;
}

.metric-curve-table input,
.metric-curve-table textarea,
.metric-curve-controls input,
.metric-curve-controls select {
  font: inherit;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  border: 1px solid #cfcfcf;
}

.metric-profile-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
}

.metric-profile-modal[hidden] {
  display: none;
}

.metric-profile-dialog {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #cfcfcf;
  padding: 1rem;
  width: min(420px, 92vw);
  display: grid;
  gap: 0.6rem;
}

.metric-profile-options {
  display: grid;
  gap: 0.4rem;
}

.metric-profile-option {
  display: grid;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
}

.metric-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

@media (max-width: 1100px) {
  .assessment-workbench {
    grid-template-columns: 1fr;
  }

  .metric-library-sidebar,
  .metric-inspector-sidebar {
    position: relative;
    max-height: none;
  }

  .assessment-workbench[data-assessment-tier="screening"] .metric-library-sidebar,
  .assessment-workbench[data-assessment-tier="rapid"] .metric-library-sidebar,
  .assessment-workbench[data-assessment-tier="detailed"] .metric-library-sidebar {
    width: auto;
    height: auto;
    top: auto;
  }

  .assessment-workbench[data-assessment-tier="screening"] .metric-inspector-sidebar,
  .assessment-workbench[data-assessment-tier="rapid"] .metric-inspector-sidebar,
  .assessment-workbench[data-assessment-tier="detailed"] .metric-inspector-sidebar {
    width: auto;
    height: auto;
    top: auto;
    right: auto;
  }
}

/* ── Apply STAF (tools page): each tier and its two routes ────────── */
.apply-tiers {
  display: grid;
  gap: 1.1rem;
  margin: 1.1rem 0;
}

.apply-tier {
  padding: 1.1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #d5dbe4;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  scroll-margin-top: 100px; /* clears the sticky menu */
}

.apply-tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.main-content .apply-tier h2 {
  margin: 0; /* the theme sizes it (h2: 1.5rem, !important) */
  color: #1f3f6e;
}

.apply-tier-name {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2b3445;
}

.apply-tier-desc {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #5a6478;
}

/* The two routes are one line each under a hairline, never boxes: the route on the left, its
   button on the right (owner, 2026-10-08: the gray insets and the version lines took too much
   room; a calculator's version is its Download button's tooltip). */
.apply-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.75rem;
  margin-top: 0.9rem;
}

.apply-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title action";
  align-items: center;
  align-content: start;
  column-gap: 0.9rem;
  min-width: 0;
  padding-top: 0.7rem;
  border-top: 1px solid #e3e7ee;
}

/* DEEP's calculator: Download on the route's line like every other, the ecoregion list and its
   map button under them at the card's full width, so a chosen ecoregion's name has room */
.apply-route-picker {
  grid-template-areas:
    "title action"
    "picker picker"
    "drafts drafts";
}

/* Drafts are listed only when asked (owner, 2026-10-14): a small box under the list adds them */
.apply-picker-drafts {
  grid-area: drafts;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
  font-size: 0.84rem;
  color: #3d4657;
  cursor: pointer;
}

.apply-picker-drafts[hidden] {
  display: none; /* an author display rule beats the hidden attribute */
}

.apply-route noscript {
  grid-column: 1 / -1;
}

.main-content .apply-route h3 {
  grid-area: title;
  margin: 0;
  font-size: 0.95rem !important; /* the theme sets every h3 to 1.125rem, !important */
  font-weight: 600;
  line-height: 1.3;
  color: #1f3f6e;
}

.apply-route-action {
  grid-area: action;
}

.apply-route-action .btn {
  min-width: 8.75rem; /* one width for every button, so they line up */
  padding: 0.42rem 0.9rem;
  text-align: center;
  white-space: nowrap;
}

/* dark text in every state: the theme turns a primary button's hover and visited text white,
   unreadable on this light fill */
.apply-route-action .btn-primary,
.apply-route-action .btn-primary:visited {
  color: #111111;
}

.apply-route-action .btn-primary:hover,
.apply-route-action .btn-primary:focus-visible {
  border-color: #1f3f6e;
  background: #ccd9ec;
  color: #111111;
}

.apply-picker {
  grid-area: picker;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.apply-picker[hidden] {
  display: none; /* an author display rule beats the hidden attribute */
}

.apply-picker select {
  flex: 1 1 10rem;
  min-width: 0; /* body clips with overflow-x: hidden, so never wider than the card */
  max-width: 100%;
  padding: 0.38rem 0.5rem;
  border: 1px solid #b9c2cf;
  border-radius: 4px;
  background: #ffffff;
  font: inherit;
  font-size: 0.9rem;
}

.apply-route .btn:not([href]) {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* opens the ecoregion map: a quiet outline button the height of the select */
.apply-picker .apply-picker-map {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.7rem;
  border-color: #b9c2cf;
  background: #ffffff;
  color: #2f4b7c;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.apply-picker .apply-picker-map:hover,
.apply-picker .apply-picker-map:focus-visible {
  border-color: #2f4b7c;
  background: #eef3fb;
  color: #1f3f6e;
}

.apply-picker-list ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.86rem;
}

/* The ecoregion map (owner, 2026-10-08): DEEP's Level III outlines in a dialog, drawn by
   apply-staf.js from assets/data/ecoregions-l3-map.json; a click selects that ecoregion. */
.eco-map {
  width: min(940px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 1px solid #d5dbe4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.2);
  color: #2b3445;
}

.eco-map::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.eco-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.85rem 0 1.2rem;
}

.eco-map-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f3f6e;
}

.eco-map-close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #5a6478;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.eco-map-close:hover,
.eco-map-close:focus-visible {
  background: #eef1f6;
  color: #1f3f6e;
}

.eco-map-caption {
  min-height: 1.4em;
  margin: 0.2rem 1.2rem 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2b3445;
}

.eco-map-canvas {
  padding: 0 1rem;
  font-size: 0.9rem;
  color: #5a6478;
}

.eco-map-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Each region in its calculator's status color, DEEP's palette (apps/deep/www/coverage.js STATUS,
   app.py REGION_STATUS_STYLE; DEEP's test_site_ecoregion_map.py keeps them equal): the fill at a
   light opacity on white, the borders neutral. Hover deepens the fill; the rules after it (the
   selected region in navy, a region with no calculator) keep their fill under the pointer. */
.eco-map-regions path {
  fill: #edf1f6;
  fill-opacity: 1;
  stroke: #c3cddb;
  stroke-width: 0.6;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill-opacity 0.12s ease;
}

.eco-map-regions path.is-draft {
  fill: #6b6459;
  fill-opacity: 0.25;
}

.eco-map-regions path.is-preliminary {
  fill: #d97706;
  fill-opacity: 0.25;
}

.eco-map-regions path.is-final {
  fill: #3f51b5;
  fill-opacity: 0.25;
}

.eco-map-regions path:hover {
  fill-opacity: 0.45;
}

.eco-map-hover {
  fill: none;
  stroke: #2f4b7c;
  stroke-width: 1.4;
  stroke-linejoin: round;
  pointer-events: none;
}

.eco-map-regions path.is-selected {
  fill: #2f4b7c;
  fill-opacity: 1;
}

.eco-map-regions path.is-unavailable {
  fill: #f5f6f8;
  fill-opacity: 1;
  cursor: default;
}

/* a Draft while the Drafts are not listed: neutral, and it takes no click (after the hover rule) */
.eco-map-regions path.is-hidden {
  fill: #f5f6f8;
  fill-opacity: 1;
  cursor: default;
}

/* the statuses on the map, keyed like DEEP's legend: the status line around its fill */
.eco-map-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0.5rem 1.2rem 0;
  font-size: 0.82rem;
  color: #3d4657;
}

.eco-map-key[hidden] {
  display: none;
}

.eco-map-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.eco-map-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid #c3cddb;
  border-radius: 2px;
  background: #f5f6f8;
}

.eco-map-swatch.is-draft {
  border-color: #475569;
  background: rgba(107, 100, 89, 0.25);
}

.eco-map-swatch.is-preliminary {
  border-color: #b45309;
  background: rgba(217, 119, 6, 0.25);
}

.eco-map-swatch.is-final {
  border-color: #303f9f;
  background: rgba(63, 81, 181, 0.25);
}

/* the key's Draft item switches the Drafts on and off; off, its swatch goes hollow */
.eco-map-key-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.eco-map-key-toggle:hover,
.eco-map-key-toggle:focus-visible {
  text-decoration: underline;
}

.eco-map-swatch.is-off {
  background: transparent;
  opacity: 0.6;
}

.eco-map-states {
  fill: none;
  stroke: #707c90;
  stroke-width: 0.9;
  stroke-linejoin: round;
  pointer-events: none;
}

.eco-map-foot {
  margin: 0.5rem 1.2rem 0.95rem;
  font-size: 0.82rem;
  color: #5a6478;
}

/* a tier's walkthrough link, under its calculator's line inside that route (no row of its own) */
.apply-tier-guide {
  grid-column: 1 / -1;
  margin: 0.55rem 0 0;
  font-size: 0.86rem;
  font-weight: 600;
}

.apply-tier-guide a {
  color: #2f4b7c;
  text-decoration: none;
}

.apply-tier-guide a::after {
  content: " \2192";
}

.apply-tier-guide a:hover,
.apply-tier-guide a:focus-visible {
  color: #1f3f6e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The three tiers side by side (owner, 2026-10-08), each card's two routes stacked, once the page
   reaches its full 1200px width (narrower, the names wrap and DEEP's picker breaks onto two
   lines, so the cards stack as before). The cards share one set of rows (head, full name,
   description, web application, calculator), so every row, divider and button lines up across
   the three whatever the length of their text. A walkthrough link sits inside its calculator's
   row, so no card carries an empty row for another's link. */
@media (min-width: 1200px) {
  .apply-tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .apply-routes {
    grid-template-columns: 1fr;
  }

  @supports (grid-template-rows: subgrid) {
    .apply-tiers {
      grid-template-rows: repeat(5, auto);
      row-gap: 0;
    }

    .apply-tier {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .apply-tier .apply-routes {
      display: contents;
    }

    .apply-tier .apply-route {
      margin-top: 0.7rem;
    }

    .apply-tier .apply-route:first-child {
      margin-top: 0.9rem;
    }
  }
}

@media (max-width: 980px) {
  .apply-tier {
    scroll-margin-top: 140px; /* the menu stacks under the logo */
  }
}

@media (max-width: 700px) {
  .apply-routes {
    grid-template-columns: 1fr;
  }

  .apply-tier {
    padding: 1rem 0.95rem;
  }

  .apply-route-action .btn {
    min-width: 0;
  }
}

.tier-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--landing-accent-soft);
  background: #eef3fb;
  color: #2f4b7c;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Downloads and resources list (tools page). The theme supplies the bullet,
   indent, and top margin, matching ordinary markdown lists like References. */
.tools-resources {
  margin-bottom: 1rem;
}

.tools-resources > li {
  margin: 0.55rem 0;
  font-size: 0.92rem;
  color: #444;
  line-height: 1.5;
}

.tools-resource-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: #2f4b7c;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: left;
  cursor: pointer;
}

.tools-resource-link:hover {
  color: #1f3f6e;
}

.tools-resource-note {
  color: #555;
}

.walkthrough-video {
  display: block;
  width: 100%;
  max-width: 860px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1px solid #d0d0d0;
  background: #000;
  margin: 1rem 0 2rem;
}

/* ── Widget Collapse ────────────────────────────────────────────── */

.widget-collapse {
  margin: 0.6rem 0 1rem;
}

.widget-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: #f0f2f5;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  user-select: none;
}

.widget-collapse-title {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #1f3f6e;
}

.widget-collapse-info {
  flex-shrink: 0;
  color: #888;
  cursor: help;
  display: inline-flex;
  align-items: center;
}

.widget-collapse-info svg {
  display: block;
}

.widget-collapse:not(.is-collapsed) .widget-collapse-info {
  display: none;
}

.widget-collapse-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 4px;
  color: #8b8f94;
  cursor: pointer;
  flex-shrink: 0;
}

.widget-collapse-download svg {
  width: 16px;
  height: 16px;
}

.widget-collapse-download:hover {
  color: #6f747a;
}

.widget-collapse-download:focus-visible {
  outline: 2px solid rgba(122, 167, 255, 0.75);
  outline-offset: 2px;
  border-radius: 4px;
}

.widget-collapse-download.is-loading,
.widget-collapse-download:disabled {
  opacity: 0.6;
  cursor: progress;
}

.widget-collapse.is-collapsed .widget-collapse-download {
  display: none;
}

.widget-collapse.is-collapsed .widget-collapse-body {
  display: none;
}

.widget-collapse:not(.is-collapsed) .widget-collapse-header {
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}

.widget-collapse:not(.is-collapsed) .widget-collapse-body > .widget {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ── Tier "How it works" collapsible ─────────────────────────── */

.tier-how-it-works {
  margin: 0.75rem 0 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  background: #f8f9fb;
  font-size: 0.9rem;
  color: #333;
}

.tier-how-it-works summary {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1f3f6e;
  cursor: pointer;
  user-select: none;
}

.tier-how-it-works ol,
.tier-how-it-works ul {
  margin: 0.4rem 0 0.3rem 1.2rem;
  padding: 0;
  line-height: 1.5;
}

.tier-how-it-works p {
  margin: 0.3rem 0 0;
  line-height: 1.5;
}

/* ── Outcome category cards ──────────────────────────────── */

.tier-how-it-works .outcome-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0.5rem 0 0.4rem;
}

.tier-how-it-works .outcome-card {
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 8px;
  padding: 0.65rem 0.75rem 0.7rem;
  font-size: 0.84rem;
  line-height: 1.48;
}

.tier-how-it-works .outcome-card.physical  { border-top: 3px solid #4a7fb5; }
.tier-how-it-works .outcome-card.chemical  { border-top: 3px solid #b5873a; }
.tier-how-it-works .outcome-card.biological { border-top: 3px solid #3a8a5c; }

.tier-how-it-works .outcome-card-title {
  margin: 0 0 0.35rem;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tier-how-it-works .outcome-card.physical .outcome-card-title  { color: #3a6a9a; }
.tier-how-it-works .outcome-card.chemical .outcome-card-title  { color: #96712e; }
.tier-how-it-works .outcome-card.biological .outcome-card-title { color: #2e7049; }

.tier-how-it-works .outcome-card-def {
  margin: 0 0 0.3rem;
}

.tier-how-it-works .outcome-card-examples {
  margin: 0;
  padding-top: 0.3rem;
  border-top: 1px solid #e8ecf2;
  font-size: 0.8rem;
  color: #555;
}

/* ── Ecosystem Condition synthesis card ──────────────────── */

.tier-how-it-works .ecosystem-condition-card {
  margin: 0.1rem 0 0;
  background: #ffffff;
  border: 1px solid #d5deea;
  border-radius: 8px;
  padding: 0.65rem 0.75rem 0.7rem;
  font-size: 0.84rem;
  line-height: 1.48;
  border-top: 3px solid;
  border-image: linear-gradient(to right, #4a7fb5, #b5873a, #3a8a5c) 1;
  border-image-slice: 1;
}

.tier-how-it-works .ecosystem-condition-card .outcome-card-title {
  color: #1f3f6e;
}

@media (max-width: 920px) {
  .tier-how-it-works .outcome-cards {
    grid-template-columns: 1fr;
  }
}

.scoring-tier-table {
  margin: 0.5rem 0 0.2rem;
  font-size: 0.85rem;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.scoring-tier-table th,
.scoring-tier-table td {
  padding: 0.45rem 0.6rem;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  background: transparent;
}

.scoring-tier-table thead th {
  background: transparent;
  border-bottom: 2px solid #c0c0c0;
}

.scoring-tier-table tbody tr:last-child th,
.scoring-tier-table tbody tr:last-child td {
  border-bottom: none;
}

.scoring-tier-table tbody tr:nth-child(even) td,
.scoring-tier-table tbody tr:nth-child(even) th {
  background: transparent;
}

/* Disabled add-tab buttons */
.screening-tab-add:disabled,
.detailed-tab-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── EASI screening metric reference (/walkthroughs/easi/) ────── */
.metric-ref-intro {
  max-width: 62rem;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
}

.metric-ref {
  margin: 0.5rem 0;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #f8f9fb;
  overflow: hidden;
}

.metric-ref > summary {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: #1f3f6e;
  cursor: pointer;
  user-select: none;
  padding: 0.6rem 0.9rem;
  list-style: none;
}
.metric-ref > summary::-webkit-details-marker { display: none; }
.metric-ref > summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.5rem;
  border-left: 5px solid #6b7a90;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
.metric-ref[open] > summary::before { transform: rotate(90deg); }
.metric-ref[open] > summary { border-bottom: 1px solid #e2e6ee; }

.metric-ref-body {
  padding: 0.15rem 0.95rem 0.85rem;
  font-size: 0.9rem;
  color: #333;
}

.metric-ref-fn {
  margin: 0.6rem 0 0.5rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5a6472;
}
.metric-ref-fn span {
  display: inline-block;
  margin-right: 0.4rem;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8791a0;
}

.metric-ref-def {
  margin: 0 0 0.75rem;
  line-height: 1.55;
  color: #23303f;
}

.metric-ref-sec { margin: 0.7rem 0 0; }
.metric-ref-label {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7688;
  margin-bottom: 0.35rem;
}
.metric-ref-sub {
  font-weight: 600;
  font-size: 0.8rem;
  color: #46536a;
  margin: 0.55rem 0 0.25rem;
}

/* Good / Fair / Poor strip (STAF band palette) */
.gfp-charts { display: grid; gap: 0.55rem; }
.gfp { margin: 0; }
.gfp figcaption {
  font-size: 0.8rem;
  font-weight: 600;
  color: #46536a;
  margin-bottom: 0.25rem;
}
.gfp-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.gfp-seg {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  line-height: 1.2;
}
.gfp-seg b { font-size: 0.78rem; color: #1f2733; }
.gfp-seg span {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: #2f3a48;
}
.gfp-seg.good { background: #c8d9f2; }
.gfp-seg.fair { background: #f5e7a6; }
.gfp-seg.poor { background: #f5b5b5; }

.metric-ref-note {
  margin: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: #5a6472;
}

/* Breakpoints table */
.metric-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.metric-ref-table th,
.metric-ref-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #e2e6ee;
  vertical-align: top;
}
.metric-ref-table th {
  font-weight: 600;
  color: #46536a;
  border-bottom: 2px solid #d0d7e2;
}
.metric-ref-table td:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #23303f;
}

.metric-ref-list { margin: 0.1rem 0 0 1.1rem; padding: 0; line-height: 1.5; }
.metric-ref-list li { margin-bottom: 0.25rem; }
.metric-ref-list b { color: #23303f; }

.metric-ref-flag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.02rem 0.32rem;
  border-radius: 8px;
  background: #e7ebf2;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7688;
}

.metric-ref-meta { margin: 0 0 0.3rem; font-size: 0.83rem; color: #5a6472; }

.metric-ref-sources {
  margin: 0.25rem 0 0 1.1rem;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.metric-ref-sources a { color: #2f4b7c; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .gfp-strip { grid-template-columns: 1fr; }
}