.search-result-groups {
  display: grid;
  gap: 16px;
}

.live-search-status.is-pending {
  position: relative;
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--material-strong) 92%, var(--accent) 8%);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.live-search-status.is-pending::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  content: "";
  animation: live-search-progress 0.9s linear infinite;
  transform: translateX(-100%);
}

.live-search-progress {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}

@keyframes live-search-progress {
  to { transform: translateX(100%); }
}

.search-results-panel {
  display: grid;
  gap: 10px;
  padding: 2px 0 4px;
}

.search-results-header {
  display: grid;
  min-height: 30px;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.search-results-header h2 {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 72%, #e8f2ff);
  font-size: 0.9rem;
  font-weight: 900;
}

.search-results-count {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.search-results-header .search-group-actions {
  justify-self: end;
}

.search-result-topic-groups {
  display: grid;
  gap: 10px;
}

.search-result-topic-group {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, rgba(255, 255, 255, 0.1));
  border-radius: 18px;
  background: rgba(6, 9, 13, 0.76);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

.search-result-topic-header {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)),
    color-mix(in srgb, var(--material-strong) 90%, var(--accent) 10%);
}

.search-result-topic-heading {
  width: 100%;
  margin: 0;
}

.search-result-topic-link {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  padding: 7px 9px 7px 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.65rem;
  font-weight: 860;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.search-result-topic-link:hover,
.search-result-topic-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
}

.search-result-topic-link:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 78%, white 8%);
}

.search-result-topic-label {
  min-width: 0;
}

.search-result-topic-name {
  color: color-mix(in srgb, var(--accent) 74%, #edf5ff);
}

.search-result-topic-count {
  display: inline-grid;
  width: 26px;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, rgba(255, 255, 255, 0.2));
  border-radius: 50%;
  background: var(--accent);
  color: #050608;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.search-result-row-list {
  display: grid;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 38%),
    color-mix(in srgb, var(--material-strong) 74%, #050608 26%);
}

.search-result-row + .search-result-row {
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.07));
}

.search-result-summary {
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 10px 11px 10px 12px;
  background: rgba(4, 6, 9, 0.18);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.search-result-summary:hover,
.search-result-summary:focus-visible,
.search-result-row.is-expanded .search-result-summary {
  background: color-mix(in srgb, var(--accent) 7%, rgba(5, 7, 10, 0.5));
}

.search-result-summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, white 8%);
  outline-offset: -3px;
}

.search-result-summary-title {
  display: block;
  min-width: 0;
  overflow: visible;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.search-result-title-segment {
  display: inline;
}

.search-result-title-segment.is-qualifier {
  color: color-mix(in srgb, var(--ink) 86%, var(--accent));
  font-weight: 850;
}

.search-result-summary-title mark {
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 88%, #ffffff);
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.13em;
}

.search-result-chevron {
  width: 9px;
  height: 9px;
  justify-self: center;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms ease;
}

.search-result-summary[aria-expanded="true"] .search-result-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.search-result-detail-slot:empty {
  display: none;
}

.search-result-expanded {
  display: grid;
  gap: 9px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.08));
  padding: 10px 11px 12px;
  background: color-mix(in srgb, var(--accent) 4%, rgba(0, 0, 0, 0.08));
  animation: search-result-expand 180ms ease-out;
}

.search-result-family-more {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.08));
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 7%, rgba(5, 8, 12, 0.82));
  color: color-mix(in srgb, var(--accent) 78%, #edf5ff);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 880;
  cursor: pointer;
}

.search-result-family-more:hover,
.search-result-family-more:focus-visible {
  background: color-mix(in srgb, var(--accent) 13%, rgba(5, 8, 12, 0.78));
  outline: none;
}

.search-result-family-more:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 72%, white 8%);
}

.search-result-expanded-toolbar {
  display: flex;
  min-height: 26px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.search-result-expanded.show-all-recs .rating-row.additional-rec {
  display: grid;
}

.search-result-expanded-actions,
.search-result-clinical-actions,
.search-result-pathway-actions {
  display: grid;
  gap: 7px;
}

.search-result-clinical-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.search-result-clinical-actions > :only-child {
  grid-column: 1 / -1;
}

.search-result-pathway-actions {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.search-open-pathway {
  color: color-mix(in srgb, var(--accent) 75%, #edf5ff);
}

body.compact-mode .search-results-panel,
body.compact-mode .search-result-topic-groups {
  gap: 7px;
}

body.compact-mode .search-result-summary {
  min-height: 48px;
  padding: 8px 9px 8px 10px;
}

body.compact-mode .search-result-summary-title {
  font-size: 0.76rem;
  line-height: 1.24;
}

body.ultra-compact-mode .search-results-panel,
body.ultra-compact-mode .search-result-topic-groups {
  gap: 5px;
}

body.ultra-compact-mode .search-result-topic-group {
  border-radius: 15px;
}

body.ultra-compact-mode .search-result-summary {
  min-height: 44px;
  padding: 7px 8px 7px 9px;
}

body.ultra-compact-mode .search-result-summary-title {
  font-size: 0.72rem;
  line-height: 1.2;
}

.search-results-show-more {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 14px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--material-strong) 90%, var(--accent) 10%);
  color: color-mix(in srgb, var(--accent) 78%, #eef6ff);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 880;
  cursor: pointer;
}

.search-results-show-more:hover,
.search-results-show-more:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background: color-mix(in srgb, var(--material-strong) 84%, var(--accent) 16%);
  outline: none;
}

@keyframes search-result-expand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-suggestions-shell:not(.criteria-organ-filters-shell) {
  gap: 6px;
}

.search-suggestions-shell:not(.criteria-organ-filters-shell) .search-suggestions {
  align-items: stretch;
  -webkit-mask-image: none;
  mask-image: none;
  scroll-snap-type: x proximity;
}

.search-suggestions-shell:not(.criteria-organ-filters-shell).can-scroll-right .search-suggestions {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 22px), transparent 100%);
}

.search-suggestions-shell:not(.criteria-organ-filters-shell) .suggestion-chip {
  display: flex;
  max-width: min(74vw, 360px);
  min-height: 44px;
  align-items: center;
  border-radius: 17px;
  padding-block: 7px;
  line-height: 1.15;
  scroll-snap-align: start;
  text-align: left;
  white-space: normal;
}

.search-suggestions-shell:not(.criteria-organ-filters-shell) .suggestion-chip-label {
  min-width: 0;
}

.search-suggestions-shell:not(.criteria-organ-filters-shell) .suggestion-chip.is-long {
  width: auto;
  max-width: min(70vw, 272px);
  height: 48px;
  min-height: 48px;
  border-radius: 17px;
  padding: 5px 13px;
  font-size: 0.72rem;
  line-height: 1.08;
  text-align: left;
}

.search-suggestions-shell:not(.criteria-organ-filters-shell) .suggestion-chip.is-long .suggestion-chip-label {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  text-wrap: balance;
}

.search-suggestions-shell:not(.criteria-organ-filters-shell) .search-suggestions-more {
  position: static;
  width: 40px;
  min-width: 40px;
  min-height: 44px;
  flex: 0 0 40px;
}

@media (max-width: 520px) {
  .app-shell.home-title.search-active #screenTitle {
    overflow-wrap: anywhere;
    text-wrap: balance;
    white-space: normal;
  }
}

.variant-card.search-result-highlight {
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, white 8%);
  outline-offset: 3px;
  animation: search-result-highlight 1.8s ease-out;
}

@keyframes search-result-highlight {
  0%, 45% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
  100% { box-shadow: var(--shadow); }
}

.search-result-group {
  display: grid;
  gap: 9px;
}

.topic-match-group {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.08));
  border-radius: 24px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.search-group-header {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.search-group-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
}

.topic-match-header {
  padding: 1px 4px 0;
}

.search-group-title {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 72%, #e8f2ff);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
}

.search-group-count {
  flex: 0 0 auto;
  margin-right: auto;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.search-legend-toggle {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 0.66rem;
}

.search-top-toggle {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  font-size: 0.66rem;
}

@media (prefers-reduced-motion: reduce) {
  .live-search-status.is-pending::after,
  .variant-card.search-result-highlight,
  .search-result-expanded {
    animation: none;
  }

  .search-result-chevron {
    transition: none;
  }
}

.search-top-toggle span:first-child,
.search-legend-toggle span:first-child {
  width: 17px;
  height: 17px;
  font-size: 0.78rem;
}

.search-group-list {
  display: grid;
  gap: 12px;
}

.variant-legend {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: -3px 0 0;
  padding: 5px 0 6px;
  background: transparent;
  animation: legend-reveal var(--ios-spring) both;
}

@keyframes legend-reveal {
  from {
    max-height: 0;
    opacity: 0;
    transform: translateY(0);
  }

  to {
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
  }
}

.variant-legend .recommendation-key {
  margin: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(5, 9, 10, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px) saturate(135%);
}

.variant-card.glass-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.105), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.032)),
    rgba(11, 14, 20, 0.84);
}

body.external-source-hold-pending .app-shell {
  animation: external-source-app-conceal 120ms linear 380ms both;
}

body.external-source-opening .app-shell {
  animation: none;
  opacity: 0;
  pointer-events: none;
}

@keyframes external-source-app-conceal {
  from { opacity: 1; }
  to { opacity: 0; }
}

.external-source-loading {
  position: fixed;
  top: -100vh;
  top: -100lvh;
  right: 0;
  bottom: -100vh;
  bottom: -100lvh;
  left: 0;
  width: 100vw;
  width: 100dvw;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  color: var(--ink);
  opacity: 1;
  text-align: center;
  touch-action: none;
  isolation: isolate;
}

.external-source-loading::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(3, 6, 11, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  content: "";
}

.external-source-loading > * {
  position: relative;
  z-index: 1;
}

.external-source-loading.is-visible {
  opacity: 1;
}

.external-source-loading strong {
  font-size: 1.12rem;
  font-weight: 850;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

.external-source-loading > span:not(.external-source-loading-skeleton) {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
}

.external-source-loading-skeleton {
  width: 70px;
  height: 84px;
  background-image: url("../assets/party-skeleton-atlas.png?v=5");
  background-position:
    var(--source-skeleton-frame-x, 50%)
    var(--source-skeleton-frame-y, 0%);
  background-repeat: no-repeat;
  background-size: 1700% 800%;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.78));
  image-rendering: pixelated;
}

.variant-card.saved-pulse {
  animation: card-saved-pulse 260ms ease both;
}

body.saved-feedback .nav-button.active {
  animation: saved-tab-feedback 260ms ease both;
}

@keyframes card-saved-pulse {
  50% {
    border-color: color-mix(in srgb, var(--accent) 66%, var(--line));
    transform: scale(0.992);
  }
}

@keyframes saved-tab-feedback {
  50% {
    filter: brightness(1.16);
    transform: scale(0.98);
  }
}

.card-action-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  opacity: 0;
  transition:
    opacity 180ms ease,
    background 180ms ease,
    backdrop-filter 180ms ease;
}

.card-action-overlay.sheet-open {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px) saturate(120%);
  opacity: 1;
}

.card-action-overlay.sheet-dismissing {
  opacity: 0;
}

.card-action-sheet {
  display: grid;
  gap: 10px;
  width: min(100%, 420px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  padding: 0 10px 10px;
  background:
    radial-gradient(circle at 24% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(14, 17, 22, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(32px) saturate(145%);
  transform: translateY(105%) scale(0.98);
  transition: transform var(--ios-spring);
}

.card-action-sheet .sheet-grabber {
  position: relative;
  top: auto;
  z-index: auto;
  height: 22px;
  background: transparent;
  backdrop-filter: none;
}

.card-action-sheet .sheet-grabber::before {
  margin-top: 4px;
}

.card-action-overlay.sheet-open .card-action-sheet {
  transform: translateY(0) scale(1);
}

.card-action-sheet button,
.card-action-sheet a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 18px;
  padding: 0 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.035);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.sheet-action-icon {
  position: relative;
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 50%;
  color: var(--accent);
}

.sheet-icon-copy::before,
.sheet-icon-copy::after,
.sheet-icon-link::before {
  content: "";
}

.sheet-icon-save svg {
  width: 17px;
  height: 17px;
  overflow: visible;
}

.sheet-icon-save .bookmark-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sheet-icon-save .bookmark-fill {
  fill: transparent;
}

.sheet-icon-copy::before,
.sheet-icon-copy::after {
  position: absolute;
  display: block;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.sheet-icon-copy::before {
  width: 6px;
  height: 7px;
  opacity: 0.58;
  transform: translate(-1.25px, 1.25px);
}

.sheet-icon-copy::after {
  width: 7px;
  height: 8px;
  transform: translate(1.25px, -1.25px);
}

.sheet-icon-link::before {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("../assets/source-link-glyph.png") center / contain no-repeat;
  mask: url("../assets/source-link-glyph.png") center / contain no-repeat;
}

.card-action-sheet button:first-child {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.card-action-sheet button.is-confirmed {
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background: color-mix(in srgb, var(--accent) 30%, rgba(255, 255, 255, 0.08));
  color: var(--accent);
}

@keyframes card-actions-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.variant-card-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  margin: -3px 0 -1px;
}

.variant-toolbar-pills {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.variant-number-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  min-height: 26px;
  gap: 5px;
  padding: 0 4px 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, rgba(255, 255, 255, 0.24));
  border-radius: 999px;
  background: var(--accent);
  color: #050608;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.36),
    0 10px 22px color-mix(in srgb, var(--accent) 16%, transparent);
}

.variant-number-pill > span {
  transform: translateY(1px);
}

.variant-number-pill strong {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #050608;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 950;
}

.count-pill.variant-pill-party {
  color: #050608;
  border-color: rgba(255, 255, 255, 0.72);
  background: var(--accent);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.64),
    0 0 18px rgba(255, 255, 255, 0.24),
    0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent);
  animation:
    variant-number-party-pulse 820ms ease-in-out infinite,
    variant-pill-party-flash 360ms steps(2, end) infinite;
  animation-delay: var(--party-pill-delay, 0ms);
}

.variant-number-pill.variant-pill-party {
  color: #050608;
  border-color: rgba(255, 255, 255, 0.72);
  background: var(--accent);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.64),
    0 0 18px rgba(255, 255, 255, 0.24),
    0 12px 28px color-mix(in srgb, var(--accent) 22%, transparent);
  animation:
    variant-number-party-pulse 820ms ease-in-out infinite,
    variant-pill-party-flash 360ms steps(2, end) infinite;
  animation-delay: var(--party-pill-delay, 0ms);
}

.variant-number-pill.variant-pill-party strong {
  background: rgba(5, 6, 8, 0.86);
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  animation: variant-pill-party-strobe 360ms steps(2, end) infinite;
  animation-delay: var(--party-pill-delay, 0ms);
}

@keyframes variant-number-party-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.075);
  }

  68% {
    transform: scale(0.99);
  }
}

@keyframes variant-pill-party-flash {
  0% {
    filter: brightness(1) saturate(150%);
  }

  50% {
    filter: brightness(1.34) saturate(230%);
  }

  100% {
    filter: brightness(1.08) saturate(175%);
  }
}

@keyframes variant-pill-party-strobe {
  0% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.78);
  }

  100% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.42);
  }
}

.variant-context-pill {
  display: none;
  min-height: 24px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  padding: 0 9px;
  background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.055));
  color: color-mix(in srgb, var(--accent) 64%, var(--ink));
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.variant-source-button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(10, 13, 18, 0.64);
  color: #dbe7f5;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px) saturate(135%);
  transition: transform var(--ios-spring), border-color 180ms ease, color 180ms ease;
}

.variant-source-button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  color: color-mix(in srgb, var(--accent) 35%, #ffffff);
}

.variant-source-button:active {
  transform: scale(0.96);
}

.source-link-glyph {
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("../assets/source-link-glyph.png") center / contain no-repeat;
  mask: url("../assets/source-link-glyph.png") center / contain no-repeat;
}

.variant-head {
  display: block;
}

.search-result-location-link,
.search-result-title-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.search-result-location-link {
  display: inline-block;
  color: var(--muted);
}

.search-result-location-link:focus-visible,
.search-result-title-link:focus-visible {
  border-radius: 4px;
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, white 8%);
  outline-offset: 3px;
}

@media (hover: hover) {
  .search-result-location-link:hover,
  .search-result-title-link:hover {
    color: color-mix(in srgb, var(--accent) 78%, white 12%);
  }
}

.search-match-reason {
  margin-top: 4px;
  color: color-mix(in srgb, var(--accent) 58%, var(--muted));
  font-size: 0.78rem;
  font-weight: 800;
}

.rating-strip {
  position: relative;
  display: grid;
  gap: 7px;
}

.rating-row.additional-rec {
  display: none;
}

.variant-card.show-all-recs .rating-row.additional-rec {
  display: grid;
}

.rating-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.23);
}

.rating-row.usually-appropriate {
  border-color: color-mix(in srgb, var(--rec-green) 62%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rec-green) 18%, transparent), transparent 76%),
    rgba(16, 31, 24, 0.5);
}

.rating-row.may-appropriate {
  border-color: color-mix(in srgb, var(--rec-yellow) 62%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rec-yellow) 18%, transparent), transparent 76%),
    rgba(39, 36, 20, 0.5);
}

.rating-row.not-appropriate {
  border-color: color-mix(in srgb, var(--rec-red) 62%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rec-red) 15%, transparent), transparent 76%),
    rgba(36, 17, 20, 0.5);
}

.rating-row.no-top-recommendation-note {
  width: 100%;
  border-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 76%),
    color-mix(in srgb, var(--material-strong) 88%, var(--accent) 12%);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.no-top-recommendation-note .modality {
  color: var(--ink);
}

.no-top-recommendation-note .recommendation-meta {
  display: block;
  color: color-mix(in srgb, var(--accent) 78%, #ffffff);
}

.no-top-recommendation-note:hover {
  border-color: color-mix(in srgb, var(--accent) 88%, #ffffff 12%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent 76%),
    color-mix(in srgb, var(--material-strong) 84%, var(--accent) 16%);
}

.no-top-recommendation-note:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 84%, white 8%);
  outline-offset: 2px;
}

.modality {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(0.8rem, 3.6vw, 0.9rem);
  font-weight: 820;
}

.recommendation-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  color: #b7c2cf;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.25;
}

.radiation-mark {
  white-space: nowrap;
}

.more-recs-button {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 22px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.05));
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
  font-size: 0.9rem;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.recommendation-key {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-top: -2px;
  padding-top: 1px;
}

.key-chip,
.radiation-key {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.075);
  color: #d9e3ee;
  font-size: 0.6rem;
  font-weight: 820;
  line-height: 1;
}

.key-chip.usually-appropriate {
  border-color: color-mix(in srgb, var(--rec-green) 42%, transparent);
}

.key-chip.may-appropriate {
  border-color: color-mix(in srgb, var(--rec-yellow) 42%, transparent);
}

.key-chip.not-appropriate {
  border-color: color-mix(in srgb, var(--rec-red) 42%, transparent);
}

.key-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.key-chip.usually-appropriate .key-dot {
  background: var(--rec-green);
}

.key-chip.may-appropriate .key-dot {
  background: var(--rec-yellow);
}

.key-chip.not-appropriate .key-dot {
  background: var(--rec-red);
}

.radiation-key {
  border-color: rgba(255, 255, 255, 0.16);
}

.info-button {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #c8d2e0;
  font-size: 0.75rem;
  font-weight: 760;
}

.actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.actions.has-more {
  grid-template-columns: minmax(92px, 0.85fr) minmax(0, 1.45fr) 44px;
}

.action-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.save-button {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  color: #dce7f3;
  line-height: 0;
}

.toolbar-save-button {
  display: grid;
  width: 26px;
  height: 26px;
  min-height: 26px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  padding: 0;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(10, 13, 18, 0.64);
  color: #dce7f3;
  line-height: 0;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 8px 16px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px) saturate(135%);
  cursor: pointer;
  transition: transform var(--ios-spring), border-color 180ms ease, color 180ms ease;
}

.toolbar-save-button svg {
  display: block;
  width: 14px;
  height: 14px;
}

.toolbar-save-button:active {
  transform: scale(0.96);
}

.toolbar-save-button.saved {
  border-color: rgba(50, 219, 112, 0.65);
  background: rgba(50, 219, 112, 0.16);
  color: #a9ffc9;
}

.toolbar-save-button.saved .bookmark-fill {
  fill: currentColor;
}

.save-button svg {
  display: block;
  width: 21px;
  height: 21px;
}

.bookmark-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
}

.bookmark-fill {
  fill: transparent;
}

.action-button.primary {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: var(--accent);
  color: #050608;
}

.save-button.saved {
  border-color: rgba(50, 219, 112, 0.65);
  background: rgba(50, 219, 112, 0.16);
  color: #a9ffc9;
}

.save-button.saved .bookmark-fill {
  fill: currentColor;
}

.source-action-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  padding: 0;
}

.source-action-button .source-link-glyph {
  width: 21px;
  height: 21px;
}

.empty-state,
.info-panel {
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(19, 24, 33, 0.68);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(150%);
}

.empty-state {
  padding: 24px 18px;
  color: var(--muted);
  text-align: center;
}

.search-empty-state {
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 24px 18px 26px;
}

.search-empty-state > strong {
  color: var(--ink);
  font-size: 1rem;
}

.search-empty-state p {
  max-width: 430px;
  margin: 0;
  line-height: 1.32;
}

.search-qualification-state {
  padding-bottom: 20px;
}

.search-qualification-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 360px);
  margin-top: 4px;
}

.search-qualification-choices button {
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  border-radius: 16px;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--accent) 13%, rgba(255, 255, 255, 0.04));
  color: color-mix(in srgb, var(--accent) 58%, #ffffff);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.search-qualification-choices button:active {
  transform: scale(0.985);
}

.info-panel {
  padding: 18px;
}

.settings-list {
  display: grid;
  gap: 0;
}

.settings-list-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 76px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 11px 3px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

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

.settings-list-item:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.source-freshness {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  margin-top: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  padding: 13px 14px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.source-freshness-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.freshness-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 820;
  text-transform: uppercase;
}

.source-freshness-summary strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 860;
}

.freshness-status {
  justify-self: end;
  align-self: end;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: color-mix(in srgb, var(--accent) 75%, #ffffff);
  font-size: 0.68rem;
  font-weight: 900;
}

button.freshness-status {
  font-family: inherit;
  cursor: pointer;
}

.freshness-status.update-ready {
  border-color: color-mix(in srgb, var(--rec-green) 62%, transparent);
  background: color-mix(in srgb, var(--rec-green) 16%, transparent);
  color: #a9ffc9;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--rec-green) 10%, transparent);
}

.freshness-status.stale {
  border-color: color-mix(in srgb, var(--rec-yellow) 54%, transparent);
  background: color-mix(in srgb, var(--rec-yellow) 12%, transparent);
  color: #ffe890;
}

.change-log-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.36;
}

.settings-glyph {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(3, 5, 8, 0.82);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
  color: #f3f7fb;
  font-size: 1.38rem;
  font-weight: 850;
  line-height: 1;
}

.settings-glyph::before {
  display: block;
  width: 23px;
  height: 23px;
  background: currentColor;
  content: "";
  -webkit-mask: var(--settings-glyph-mask) center / contain no-repeat;
  mask: var(--settings-glyph-mask) center / contain no-repeat;
}

.settings-glyph-gear {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M19.43 12.98c.04-.32.07-.65.07-.98s-.02-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1a7.3 7.3 0 0 0-1.69-.98L14.5 2.42A.5.5 0 0 0 14 2h-4a.5.5 0 0 0-.5.42L9.12 5.07c-.61.24-1.18.56-1.69.98l-2.49-1a.5.5 0 0 0-.61.22l-2 3.46a.5.5 0 0 0 .12.64l2.11 1.65a7.9 7.9 0 0 0 0 1.96l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.51.4 1.08.74 1.69.98l.38 2.65a.5.5 0 0 0 .5.42h4a.5.5 0 0 0 .5-.42l.38-2.65c.61-.24 1.18-.56 1.69-.98l2.49 1a.5.5 0 0 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.12-1.65ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E");
}

.settings-glyph-copyright {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2.2a7.8 7.8 0 1 1 0 15.6 7.8 7.8 0 0 1 0-15.6Zm.2 3.7c-2.55 0-4.35 1.72-4.35 4.1s1.8 4.1 4.35 4.1c1.43 0 2.66-.54 3.43-1.5l-1.55-1.36c-.43.5-1.05.8-1.78.8-1.22 0-2.05-.82-2.05-2.04s.83-2.04 2.05-2.04c.73 0 1.35.3 1.78.8l1.55-1.36c-.77-.96-2-1.5-3.43-1.5Z'/%3E%3C/svg%3E");
}

.settings-glyph-compact {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='4.8' width='14' height='2.4' rx='1.2' fill='black'/%3E%3Crect x='7' y='8.2' width='10' height='2.4' rx='1.2' fill='black'/%3E%3Crect x='5' y='11.6' width='14' height='2.4' rx='1.2' fill='black'/%3E%3Crect x='7' y='15' width='10' height='2.4' rx='1.2' fill='black'/%3E%3Crect x='5' y='18.4' width='14' height='2.4' rx='1.2' fill='black'/%3E%3C/svg%3E");
}

.settings-glyph-ultra {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 5h14v2H5V5Zm3 4h8v2H8V9Zm-3 4h14v2H5v-2Zm3 4h8v2H8v-2Z'/%3E%3C/svg%3E");
}

.settings-glyph-compact::before,
.settings-glyph-ultra::before {
  width: 25px;
  height: 25px;
}

.settings-glyph-moon {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M21 14.7A8.8 8.8 0 0 1 9.3 3a.55.55 0 0 0-.64-.77A10.5 10.5 0 1 0 21.77 15.34a.55.55 0 0 0-.77-.64Z'/%3E%3C/svg%3E");
}

.settings-glyph-mono {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2v14a7 7 0 0 1 0-14Zm2.25.38A7 7 0 0 1 14.25 18V5.38Z'/%3E%3C/svg%3E");
}

.settings-glyph-history {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10a9 9 0 1 1 1.6 7.1M3 4v6h6M12 7v5l3.5 2'/%3E%3C/g%3E%3C/svg%3E");
}

.settings-glyph-clear-history {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 3h8l1 2h4v2H3V5h4l1-2Zm-2 6h12l-1 12H7L6 9Zm3 2 .5 8h1L10 11H9Zm5 0-1 8h1.5l.5-8H14Z'/%3E%3C/svg%3E");
}

.settings-glyph-install {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.3 9.3-1.4-1.42 9.29-9.29H14V3ZM5 5h6v2H7v10h10v-4h2v6H5V5Z'/%3E%3C/svg%3E");
}

.settings-app-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  object-fit: contain;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

.settings-glyph-contact {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v9.5a2 2 0 0 1-2 2H8.6L4 21v-3.5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 2v9.5h2V17l1.95-1.5H20V6H4Zm3 3h10v2H7V9Zm0 3h7v2H7v-2Z'/%3E%3C/svg%3E");
}

.settings-glyph-guide {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 3h10.5A2.5 2.5 0 0 1 19 5.5V21H7.5A2.5 2.5 0 0 1 5 18.5v-14A1.5 1.5 0 0 1 6.5 3H6Zm1 2.2v11.4c.16-.04.33-.06.5-.06H17V5.5a.3.3 0 0 0-.3-.3H7Zm.5 13.2a.6.6 0 0 0 0 1.2H17v-1.2H7.5ZM9 7h6v1.7H9V7Zm0 3.2h6v1.7H9v-1.7Zm0 3.2h4v1.7H9v-1.7Z'/%3E%3C/svg%3E");
}

.settings-glyph-reading-patterns {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5h8.5L20 8v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1Z'/%3E%3Cpath d='M14.5 2.5V8H20'/%3E%3Cpath d='M8.5 11h4M8.5 14.5h8M8.5 18h8'/%3E%3C/g%3E%3C/svg%3E");
}

.settings-glyph-reading-patterns::before {
  width: 20px;
  height: 20px;
}

.settings-glyph-criteria {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm0 2v14h12V5H6Zm2 2h8v2H8V7Zm0 4h3v2H8v-2Zm5 0h3v2h-3v-2Zm-5 4h3v2H8v-2Zm5 0h3v2h-3v-2Z'/%3E%3C/svg%3E");
}

.settings-glyph-search {
  --settings-glyph-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10.5 3a7.5 7.5 0 1 0 4.72 13.33L20.9 22 22 20.9l-5.67-5.68A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z'/%3E%3C/svg%3E");
}

.settings-title,
.settings-meta {
  display: block;
  min-width: 0;
}

.settings-title {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 860;
  line-height: 1.1;
}

.settings-meta {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 680;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-detail-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.settings-detail-panel h2,
.settings-detail-panel h3 {
  margin: 0;
  font-size: 1.06rem;
}

.settings-detail-panel .source-link {
  min-height: 32px;
}

.settings-detail-panel .legal-copy {
  display: grid;
  gap: 14px;
}

.settings-detail-panel .legal-copy section {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.settings-detail-panel .legal-copy section:first-child {
  padding-top: 0;
  border-top: 0;
}

.settings-detail-panel .legal-copy h3 {
  color: var(--ink);
  font-size: clamp(0.92rem, 3.8vw, 1.04rem);
  line-height: 1.2;
}

.settings-detail-panel .legal-copy p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.82rem, 3.35vw, 0.94rem);
  line-height: 1.52;
}

.settings-detail-panel .legal-source-links {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

/* iOS Safari needs the prefixed rule on the label as well as the button. */
[data-action="recent-search-history"],
[data-action="recent-search-history"] * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
[data-action="recent-search-history"] .settings-glyph { position: relative; transition: background-color 320ms ease, border-color 320ms ease, color 320ms ease; }
[data-action="recent-search-history"] .settings-glyph::before,
[data-action="recent-search-history"] .settings-glyph::after { grid-area: 1 / 1; transition: opacity 280ms ease, transform 360ms ease; }
[data-action="recent-search-history"] .settings-glyph::after {
  content: ""; width: 23px; height: 23px; background: currentColor; opacity: 0; transform: scale(.75);
  --trash-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask: var(--trash-mask) center / contain no-repeat; mask: var(--trash-mask) center / contain no-repeat;
}
body [data-action="recent-search-history"].history-cleared .settings-glyph { background: #e34f59; border-color: #e34f59; color: #fff; }
.history-cleared .settings-glyph-history::before { opacity: 0; transform: scale(.75); }
[data-action="recent-search-history"].history-cleared .settings-glyph::after { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  [data-action="recent-search-history"] .settings-glyph,
  [data-action="recent-search-history"] .settings-glyph::before,
  [data-action="recent-search-history"] .settings-glyph::after { transition: none; }
}

.search-intent-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.search-intent-controls[hidden] { display: none; }
.search-intent-label { color: var(--muted); font-size: .72rem; font-weight: 600; }
.search-intent-controls .criteria-filter { min-height: 34px; padding: 4px 10px; font-size: .72rem; }