/* Account area: layouts (site chrome), settings, notification preferences,
   sign in / sign up / passwords, shared partials, modals, flash messages,
   and glossary links emitted by ApplicationHelper. */

/* ---------------------------------------------------------------------
   Site chrome (layouts/application, layouts/_footer, layouts/print)
   --------------------------------------------------------------------- */

/* Centered, breakpoint-capped page column */
.site-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 5);
}
@media (min-width: 40rem) {
  .site-container { max-width: 40rem; }
}
@media (min-width: 48rem) {
  .site-container { max-width: 48rem; }
}
@media (min-width: 64rem) {
  .site-container { max-width: 64rem; }
}
@media (min-width: 80rem) {
  .site-container { max-width: 80rem; }
}
@media (min-width: 96rem) {
  .site-container { max-width: 96rem; }
}

.site-main {
  display: flex;
  margin-top: calc(var(--spacing) * 20);
  padding-bottom: calc(var(--spacing) * 10);
}
.site-main__content {
  width: 100%;
}

/* Flash messages (layout, sign up, passwords) */
.flash-message {
  display: inline-block;
  margin-bottom: calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
  background-color: var(--color-red-50);
  color: var(--color-red-500);
  font-weight: var(--font-weight-medium);
}
.flash-message--notice {
  background-color: var(--color-green-50);
  color: var(--color-green-500);
}
.flash-message--block {
  display: block;
}

/* Footer */
.site-footer {
  margin-top: calc(var(--spacing) * 16);
  border-top: 1px solid var(--color-green-200);
  background-color: var(--color-green-50);
}
.site-footer__disclosure {
  padding-top: calc(var(--spacing) * 4);
  text-align: center;
}
.site-footer__fineprint {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-400);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 6);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-600);
}
@media (min-width: 40rem) {
  .site-footer__inner { flex-direction: row; }
}
.site-footer__links {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.site-footer__link {
  font-weight: var(--font-weight-medium);
  color: var(--color-green-700);
}
.site-footer__coffee {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  color: var(--color-yellow-800);
}
@media (hover: hover) {
  .site-footer__link:hover {
    color: var(--color-green-800);
    text-decoration-line: underline;
  }
  .site-footer__coffee:hover {
    color: var(--color-yellow-900);
    text-decoration-line: underline;
  }
}

/* Print layout */
.print-body {
  background-color: var(--color-white);
}
.print-page {
  max-width: var(--container-3xl);
  margin-inline: auto;
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 6);
}
.print-controls {
  position: fixed;
  right: calc(var(--spacing) * 6);
  bottom: calc(var(--spacing) * 6);
  display: flex;
  gap: calc(var(--spacing) * 3);
}

/* ---------------------------------------------------------------------
   Navbar structure (colors, links and dropdown items live in navbar.css)
   --------------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
}
.navbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--spacing) * 14);
}
.nav-brand {
  flex-shrink: 0;
}
.nav-logo {
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
}
/* Wordmark hidden on the smallest screens */
.nav-brand-text {
  display: none;
}
@media (min-width: 40rem) {
  .nav-brand-text { display: inline; }
}

/* Desktop link row; hidden below md */
.nav-desktop {
  display: none;
  align-items: center;
  gap: calc(var(--spacing) * 6);
}
.nav-desktop--guest {
  gap: calc(var(--spacing) * 5);
}
@media (min-width: 48rem) {
  .nav-desktop { display: flex; }
}
.nav-dropdown {
  position: relative;
}
.nav-chevron {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}
.nav-feedback-wrap {
  display: inline-flex;
}
.nav-link-block.nav-feedback {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.nav-feedback-icon {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
.nav-feedback-icon--sm {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
}

/* Mobile menu */
.nav-toggle-icon {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}
@media (min-width: 48rem) {
  .nav-toggle { display: none; }
  .nav-mobile-panel { display: none; }
}
.nav-mobile-list {
  padding-block: calc(var(--spacing) * 3);
}
:where(.nav-mobile-list > :not(:last-child)) {
  margin-block-end: calc(var(--spacing) * 1);
}
.nav-divider {
  padding-top: calc(var(--spacing) * 2);
}
.nav-divider--guest {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 1);
}

/* ---------------------------------------------------------------------
   Modal dialogs (feedback, subscription, danger zone)
   --------------------------------------------------------------------- */
.modal-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 100%;
  max-width: var(--container-md);
  height: fit-content;
  padding: 0;
  border: 1px solid var(--color-green-800);
  border-radius: var(--radius-lg);
}
.modal-dialog--danger {
  border-color: var(--color-red-300);
}
.modal-dialog::backdrop {
  background-color: #00000080;
}
@supports (color: color-mix(in lab, red, red)) {
  .modal-dialog::backdrop {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }
}
.modal-body {
  padding: calc(var(--spacing) * 6);
}
.modal-title {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
  font-weight: var(--font-weight-semibold);
  color: var(--color-green-800);
}
.modal-title--danger {
  color: var(--color-red-600);
}
.modal-text {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-600);
}
.modal-text--tight { margin-bottom: calc(var(--spacing) * 2); }
.modal-text--spaced { margin-bottom: calc(var(--spacing) * 6); }
.modal-list {
  margin-bottom: calc(var(--spacing) * 4);
  list-style-type: disc;
  list-style-position: inside;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-600);
}
:where(.modal-list > :not(:last-child)) {
  margin-block-end: calc(var(--spacing) * 1);
}
.modal-warning {
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-red-600);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 4);
}
.modal-actions--flush {
  margin-top: 0;
}
.modal-textarea {
  width: 100%;
  padding: calc(var(--spacing) * 3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  resize: vertical;
}
.modal-textarea:focus {
  outline-style: none;
  border-color: var(--color-green-500);
  box-shadow: 0 0 0 2px var(--color-green-500);
}

/* ---------------------------------------------------------------------
   Shared building blocks for account / auth pages
   --------------------------------------------------------------------- */
.account-narrow {
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 48rem) {
  .account-narrow { width: 66.6667%; }
}

.account-title {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl--line-height);
  font-weight: var(--font-weight-bold);
}
.account-title--mb { margin-bottom: calc(var(--spacing) * 6); }
.account-title--mb-lg { margin-bottom: calc(var(--spacing) * 8); }

.account-card {
  margin-bottom: calc(var(--spacing) * 6);
  padding: calc(var(--spacing) * 6);
  border: 1px solid var(--color-green-800);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}
.account-card--danger {
  border-color: var(--color-red-300);
}
.account-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(var(--spacing) * 4);
}
.account-card__title {
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
  font-weight: var(--font-weight-semibold);
}
.account-card__title--sm {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}
.account-card__title--danger {
  color: var(--color-red-600);
}
.account-card__header .account-card__title {
  margin-bottom: 0;
}

/* Label/value lists (also used for the locations list) */
.account-dl {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
:where(.account-dl > :not(:last-child)) {
  margin-block-end: calc(var(--spacing) * 2);
}
.account-dl--mb { margin-bottom: calc(var(--spacing) * 4); }
.account-dl__row {
  display: flex;
  justify-content: space-between;
}
.account-muted { color: var(--color-gray-500); }
.account-faint { color: var(--color-gray-400); }
.account-note {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-500);
}
.account-note--mb { margin-bottom: calc(var(--spacing) * 4); }
.account-hint {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-400);
}

/* Plan badge */
.account-plan {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 3);
}
.account-plan__text {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-700);
}
.account-pill {
  display: inline-block;
  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
  border-radius: 9999px;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-medium);
}
.account-pill--pro { background-color: var(--color-green-100); color: var(--color-green-700); }
.account-pill--warning { background-color: var(--color-yellow-100); color: var(--color-yellow-700); }
.account-pill--free { background-color: var(--color-gray-100); color: var(--color-gray-600); }

.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.account-actions--tight {
  gap: calc(var(--spacing) * 2);
}
.account-form-actions {
  display: flex;
  gap: calc(var(--spacing) * 4);
}
.account-signout {
  margin-top: calc(var(--spacing) * 8);
}

/* Text links */
.account-link {
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-green-600);
  text-decoration-line: underline;
}
.account-link--danger { color: var(--color-red-600); }
.account-link--neutral { color: var(--color-gray-700); }
.account-link--inline {
  font-size: inherit;
  line-height: inherit;
}
.account-link--plain {
  text-decoration-line: none;
}
@media (hover: hover) {
  .account-link:hover { text-decoration-line: none; }
  .account-link--plain:hover { text-decoration-line: underline; }
}

/* Callouts: success / warning / upgrade prompts */
.info-callout {
  padding: calc(var(--spacing) * 4);
  border: 1px solid var(--color-green-300);
  border-radius: var(--radius-lg);
  background-color: var(--color-green-50);
}
.info-callout--warning {
  border-color: var(--color-yellow-300);
  background-color: var(--color-yellow-50);
}
.info-callout--upgrade {
  border-color: var(--color-orange-400);
  background-color: var(--color-orange-50);
}
.info-callout--spaced { margin-bottom: calc(var(--spacing) * 6); }
.info-callout--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info-callout__title {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-green-800);
}
.info-callout--warning .info-callout__title { color: var(--color-yellow-800); }
.info-callout__title--mb { margin-bottom: calc(var(--spacing) * 3); }
.info-callout__text {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-600);
}
.info-callout__text--mb { margin-bottom: calc(var(--spacing) * 3); }
.info-callout__text--mt { margin-top: calc(var(--spacing) * 1); }
.info-callout__body {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-700);
}
.info-callout__action {
  flex-shrink: 0;
  margin-left: calc(var(--spacing) * 4);
}
.info-callout__link {
  flex-shrink: 0;
  margin-left: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-orange-400);
  text-decoration-line: underline;
}
@media (hover: hover) {
  .info-callout__link:hover { text-decoration-line: none; }
}
.info-callout__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Danger zone (settings) */
:where(.danger-zone > :not(:last-child)) {
  margin-block-end: calc(var(--spacing) * 4);
}
.danger-zone__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.danger-zone__row--divided {
  padding-top: calc(var(--spacing) * 4);
  border-top: 1px solid var(--color-red-100);
}
.danger-zone__title {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}
.danger-zone__desc {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-500);
}
.danger-zone__button {
  white-space: nowrap;
}

/* Form fields */
.form-contents {
  display: contents;
}
.form-inline {
  display: inline;
}
.account-field {
  margin-block: calc(var(--spacing) * 5);
}
.account-field--tight {
  margin-block: calc(var(--spacing) * 3);
}
.account-label {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
.account-input {
  display: block;
  width: 100%;
  margin-top: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border: 1px solid var(--color-gray-400);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
.account-input:focus {
  outline-color: var(--color-green-600);
}
.account-input--solid:focus {
  outline-style: solid;
}
.account-check {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  cursor: pointer;
}
.account-checkbox {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
  border-radius: .25rem;
  color: var(--color-green-600);
}
.account-check__label {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
}
.account-check__hint {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-500);
}
.account-check__badge {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-green-700);
}
:where(.account-check-list > :not(:last-child)) {
  margin-block-end: calc(var(--spacing) * 4);
}

/* Full-width buttons (combine with .btn) */
.btn-full {
  width: 100%;
}
.btn-full-mobile {
  width: 100%;
}
@media (min-width: 40rem) {
  .btn-full-mobile { width: auto; }
}

/* Auth pages */
.auth-divider {
  display: flex;
  align-items: center;
  margin-block: calc(var(--spacing) * 8);
}
.auth-divider__line {
  flex-grow: 1;
  border-color: var(--color-gray-300);
}
.auth-divider__text {
  padding-inline: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-500);
}
:where(.auth-providers > :not(:last-child)) {
  margin-block-end: calc(var(--spacing) * 3);
}
.auth-switch {
  margin-top: calc(var(--spacing) * 6);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-500);
}
.auth-forgot {
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-500);
}
@media (min-width: 40rem) {
  .auth-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }
  .auth-forgot { margin-top: 0; }
}
.auth-submit {
  display: inline-block;
  width: 100%;
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3.5);
  border-radius: var(--radius-lg);
  background-color: var(--color-green-600);
  color: var(--color-white);
  text-align: center;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}
@media (min-width: 40rem) {
  .auth-submit { width: auto; }
}
@media (hover: hover) {
  .auth-submit:hover { background-color: var(--color-green-500); }
}

/* Sign up: form beside a product preview */
.signup-layout {
  max-width: var(--container-5xl);
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .signup-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: calc(var(--spacing) * 12);
  }
}
.signup-showcase {
  margin-top: calc(var(--spacing) * 12);
}
@media (min-width: 48rem) {
  .signup-showcase { margin-top: 0; }
}
.signup-showcase__title {
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
  font-weight: var(--font-weight-bold);
}
.signup-benefits {
  margin-bottom: calc(var(--spacing) * 5);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-600);
}
:where(.signup-benefits > :not(:last-child)) {
  margin-block-end: calc(var(--spacing) * 2.5);
}
.signup-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2);
}
.signup-benefits__check {
  line-height: calc(var(--spacing) * 5);
  font-weight: var(--font-weight-bold);
  color: var(--color-green-600);
}
.signup-shot {
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
.signup-caption {
  margin-top: calc(var(--spacing) * 1.5);
  margin-bottom: calc(var(--spacing) * 4);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-400);
}
.signup-thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--spacing) * 2);
}
.signup-thumb {
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------
   Pagination (shared/_pagination)
   --------------------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  margin-top: calc(var(--spacing) * 8);
}
.pagination__link,
.pagination__current {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.pagination__link {
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-600);
}
.pagination__current {
  background-color: var(--color-green-600);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
}
.pagination__gap {
  padding: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-400);
}
@media (hover: hover) {
  .pagination__link:hover { background-color: var(--color-gray-50); }
}

/* ---------------------------------------------------------------------
   Pest entry (shared/_pest_entry)
   --------------------------------------------------------------------- */
.pest-entry__names {
  font-weight: var(--font-weight-medium);
}
.pest-entry__link {
  cursor: pointer;
  text-align: left;
  color: var(--color-green-700);
}
.pest-entry__link--single {
  font-weight: var(--font-weight-medium);
}
@media (hover: hover) {
  .pest-entry__link:hover {
    color: var(--color-green-900);
    text-decoration-line: underline;
  }
}
.pest-entry__scientific {
  font-weight: var(--font-weight-normal);
  color: var(--color-gray-500);
}
.pest-entry__control {
  margin-top: calc(var(--spacing) * .5);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-500);
}

/* ---------------------------------------------------------------------
   Plant filters (shared/_plant_filters)
   --------------------------------------------------------------------- */
.filter-toggle {
  margin-bottom: calc(var(--spacing) * 3);
}
@media (min-width: 48rem) {
  .filter-toggle { display: none; }
}
.filter-toggle__btn {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  width: 100%;
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  border: 1px solid var(--color-green-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-green-50);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-green-700);
}
.filter-toggle__icon {
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

/* Collapsed below md; the guide-filter controller adds `.is-open` to show it.
   From md up it is always shown. */
.filter-panel { display: none; }
.filter-panel.is-open { display: block; }
@media (min-width: 48rem) {
  .filter-panel { display: block; }
}

.filter-letters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 1.5);
  margin-bottom: calc(var(--spacing) * 4);
}
.filter-groups {
  margin-bottom: calc(var(--spacing) * 4);
}
:where(.filter-groups > :not(:last-child)) {
  margin-block-end: calc(var(--spacing) * 2);
}
@media (min-width: 40rem) {
  :where(.filter-groups > :not(:last-child)) {
    margin-block-end: calc(var(--spacing) * 3);
  }
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
}
@media (min-width: 40rem) {
  .filter-row { gap: calc(var(--spacing) * 2); }
}
.filter-row__label {
  width: calc(var(--spacing) * 14);
  flex-shrink: 0;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
}
@media (min-width: 40rem) {
  .filter-row__label { width: calc(var(--spacing) * 16); }
}

/* Pill-shaped filter links */
.filter-chip {
  padding: calc(var(--spacing) * .5) calc(var(--spacing) * 2.5);
  border-radius: 9999px;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}
@media (min-width: 40rem) {
  .filter-chip {
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }
}
.filter-chip__icon {
  margin-right: calc(var(--spacing) * 1);
}
.filter-chip--inactive {
  background-color: var(--color-green-100);
  color: var(--color-green-700);
}
.filter-chip--active {
  background-color: var(--color-green-600);
  color: var(--color-white);
}
.filter-chip--disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-400);
  cursor: default;
}
.filter-chip--clear {
  background-color: var(--color-red-100);
  color: var(--color-red-600);
}
/* A-Z jump links are slightly tighter and don't animate */
.filter-chip--letter {
  padding: calc(var(--spacing) * .5) calc(var(--spacing) * 2);
  transition: none;
}
@media (min-width: 40rem) {
  .filter-chip--letter {
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2.5);
  }
}
@media (hover: hover) {
  .filter-chip--inactive:hover { background-color: var(--color-green-200); }
  .filter-chip--clear:hover { background-color: var(--color-red-200); }
}

/* USDA zone chips: each zone sets its map-legend colors; active zones fill in. */
.filter-chip--zone {
  border: 2px solid var(--zone-edge);
  background-color: var(--zone-tint);
  color: var(--zone-text);
  font-weight: var(--font-weight-medium);
}
.filter-chip--zone-active {
  border-color: var(--zone);
  background-color: var(--zone);
  color: #fff;
}
.filter-chip--zone-1  { --zone: #6B3FA0; --zone-tint: #6B3FA020; --zone-text: #6B3FA0; --zone-edge: #6B3FA050; }
.filter-chip--zone-2  { --zone: #9B59B6; --zone-tint: #9B59B620; --zone-text: #9B59B6; --zone-edge: #9B59B650; }
.filter-chip--zone-3  { --zone: #1E6FD9; --zone-tint: #1E6FD920; --zone-text: #1E6FD9; --zone-edge: #1E6FD950; }
.filter-chip--zone-4  { --zone: #00A5CF; --zone-tint: #00A5CF20; --zone-text: #00A5CF; --zone-edge: #00A5CF50; }
.filter-chip--zone-5  { --zone: #00C9A7; --zone-tint: #00C9A720; --zone-text: #00C9A7; --zone-edge: #00C9A750; }
.filter-chip--zone-6  { --zone: #5DD55B; --zone-tint: #5DD55B20; --zone-text: #2D7A2B; --zone-edge: #5DD55B50; }
.filter-chip--zone-7  { --zone: #B8D83E; --zone-tint: #B8D83E20; --zone-text: #5C6B1F; --zone-edge: #8BA32A; }
.filter-chip--zone-8  { --zone: #F5D547; --zone-tint: #F5D54720; --zone-text: #8B7A15; --zone-edge: #C4A817; }
.filter-chip--zone-9  { --zone: #F5A623; --zone-tint: #F5A62320; --zone-text: #F5A623; --zone-edge: #C4841C; }
.filter-chip--zone-10 { --zone: #F06543; --zone-tint: #F0654320; --zone-text: #F06543; --zone-edge: #F0654350; }
.filter-chip--zone-11 { --zone: #E0115F; --zone-tint: #E0115F20; --zone-text: #E0115F; --zone-edge: #E0115F50; }
.filter-chip--zone-12 { --zone: #C70039; --zone-tint: #C7003920; --zone-text: #C70039; --zone-edge: #C7003950; }
.filter-chip--zone-13 { --zone: #900C3F; --zone-tint: #900C3F20; --zone-text: #900C3F; --zone-edge: #900C3F50; }

.filter-status {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 6);
}
.filter-status__text {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-gray-500);
}
.filter-status__clear {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-green-600);
  text-decoration-line: underline;
}
@media (hover: hover) {
  .filter-status__clear:hover { color: var(--color-green-800); }
}

/* ---------------------------------------------------------------------
   Printable task list (shared/_print_task_list)
   --------------------------------------------------------------------- */
.print-month {
  margin-bottom: calc(var(--spacing) * 6);
}
.print-month__title {
  margin-bottom: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 1);
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
}
.print-tasks {
  width: 100%;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.print-tasks__row {
  border-bottom: 1px solid var(--color-gray-50);
}
.print-tasks__check {
  width: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 1.5);
  padding-right: calc(var(--spacing) * 2);
  vertical-align: top;
}
.print-tasks__date {
  width: calc(var(--spacing) * 24);
  padding-block: calc(var(--spacing) * 1.5);
  padding-right: calc(var(--spacing) * 3);
  vertical-align: top;
  white-space: nowrap;
  color: var(--color-gray-400);
}
.print-tasks__desc {
  padding-block: calc(var(--spacing) * 1.5);
}
.print-tasks__desc--skipped {
  text-decoration-line: line-through;
  color: var(--color-gray-400);
}
.print-tasks__done { color: var(--color-green-600); }
.print-tasks__skipped { color: var(--color-gray-400); }
.print-tasks__box {
  display: inline-block;
  width: calc(var(--spacing) * 3.5);
  height: calc(var(--spacing) * 3.5);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.print-tasks__note {
  display: block;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-gray-400);
}

/* ---------------------------------------------------------------------
   Glossary auto-links (ApplicationHelper#link_glossary_terms)
   --------------------------------------------------------------------- */
.glossary-link {
  color: var(--color-green-600);
  text-decoration-line: underline;
  text-decoration-style: dotted;
}
@media (hover: hover) {
  .glossary-link:hover {
    color: var(--color-green-800);
    text-decoration-style: solid;
  }
}