/* Resource pages: a calmer, more readable version of the existing blue system. */
.home-shortcut {
  position: fixed;
  right: calc(24px + env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  box-shadow: 0 2px 8px rgb(15 23 42 / 10%);
  font: 600 14px/1.4 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.home-shortcut:hover { border-color: #a9c5f8; background: #eff6ff; }
.home-shortcut:active { background: #dbeafe; }
.home-shortcut:focus-visible { outline: 3px solid #2563eb59; outline-offset: 2px; }
html.has-home-shortcut #root { padding-bottom: 88px; }

.home-only-directory .category-directory-row {
  min-height: 88px;
}

.resources-section {
  padding-top: 40px;
}

.resource-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.resource-card {
  min-height: 0;
  border-color: #dbe5f0;
  box-shadow: 0 1px 3px #0f172a0a;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.resource-card:hover {
  transform: none;
  border-color: #a9c5f8;
  box-shadow: 0 5px 16px #2563eb12;
}

.resource-card-top { display: none; }
.resource-card-body { padding: 20px 22px 24px; }
.resource-card h3 { margin: 12px 0 10px; font-size: 20px; line-height: 1.45; }
.resource-card p { min-height: 0; font-size: 15px; line-height: 1.65; }
.resource-tagline { font-size: 14px; }
.resource-format { font-size: 12px; letter-spacing: 0; }
.resource-card-meta,
.resource-card-tags { display: none; }
.resource-card-link-block { margin-top: 22px; padding: 14px 15px; }
.resource-card-link-head > span { font-size: 14px; }
.resource-card-link-url,
.resource-card-link-empty small { font-size: 14px; line-height: 1.5; }
.resource-card-link-url { overflow-wrap: anywhere; }
.resource-card-footer { min-height: 62px; padding: 13px 22px; font-size: 13px; justify-content: flex-end; }
.resource-card-page-preview-action { min-height: 44px; font-size: 14px; }

.subject-sort-bar { padding: 8px 10px; }
.subject-sort-label { font-size: 13px; }
.subject-sort-option { min-height: 44px; font-size: 14px; }
.filter-bar { gap: 10px; }
.filter-search,
.filter-control,
.filter-scope,
.filter-submit,
.filter-clear { min-height: 48px; }
.filter-search input { font-size: 15px; }
.filter-control select,
.filter-scope strong,
.filter-submit,
.filter-clear { font-size: 13px; }
.page-back-button { min-height: 44px; font-size: 13px; }
.copy-link-button.compact { min-height: 44px; font-size: 12px; }

.resources-section :is(a, button, input, select):focus-visible,
.subject-sort-option:focus-within {
  outline: 3px solid #2563eb59;
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .resource-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 760px) {
  .home-only-directory .category-directory-row { min-height: 76px; }
  .resource-card-body { padding: 18px; }
  .resource-card h3 { font-size: 18px; }
  .resource-card-footer { padding: 12px 18px; }
  .filter-search input { font-size: 16px; }
}

@media (max-width: 420px) {
  .home-shortcut {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .resource-card-footer { flex-wrap: wrap; gap: 10px; }
  .resource-card-page-preview-image { display: none; }
  .resource-card-link-head { flex-wrap: wrap; }
}

/* Phones cannot rely on hover to communicate that a control can be tapped. */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  .subject-sort-option {
    -webkit-tap-highlight-color: rgb(37 99 235 / 16%);
    touch-action: manipulation;
  }

  .mobile-category-rail a {
    min-height: 44px;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
  }

  .category-directory-row {
    transition: background-color 120ms ease, color 120ms ease;
  }

  .category-directory-row:active,
  .category-directory-row.is-touch-pressed,
  .home-only-shell .category-directory-row.is-touch-pressed,
  .mobile-category-rail a:active,
  .mobile-category-rail a.is-touch-pressed {
    background: #dbeafe;
    color: #1d4ed8;
  }

  .category-directory-row:is(:active, .is-touch-pressed)::before {
    transform: scaleY(1);
  }

  .category-directory-row:is(:active, .is-touch-pressed) .category-directory-name strong,
  .category-directory-row:is(:active, .is-touch-pressed) .category-directory-count {
    color: #1d4ed8;
  }

  .category-directory-row:is(:active, .is-touch-pressed) .category-directory-count svg {
    transform: translateX(3px);
  }

  .subject-sort-option:is(:active, .is-touch-pressed),
  .filter-clear:is(:active, .is-touch-pressed),
  .page-back-button:is(:active, .is-touch-pressed),
  .home-shortcut:is(:active, .is-touch-pressed) {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #1d4ed8;
  }

  .filter-submit:is(:active, .is-touch-pressed),
  .hero-search-button:is(:active, .is-touch-pressed) {
    background: #1d4ed8;
  }

  .copy-link-button:is(:active, .is-touch-pressed) {
    border-color: #60a5fa;
    background: #bfdbfe;
  }

  .resource-card:has(a:is(:active, .is-touch-pressed), button:is(:active, .is-touch-pressed)) {
    border-color: #93c5fd;
    box-shadow: 0 2px 10px rgb(37 99 235 / 13%);
  }

  .resource-card h3 a:is(:active, .is-touch-pressed),
  .resource-card-page-preview:is(:active, .is-touch-pressed),
  .resource-card-footer a:is(:active, .is-touch-pressed) {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .resource-card-page-preview:is(:active, .is-touch-pressed) .resource-card-page-preview-image {
    border-color: #60a5fa;
    background: #dbeafe;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-card,
  .category-directory-row,
  .mobile-category-rail a { transition: none; }
}