/**
 * Copyright (c) 2025-2026 Kenneth Raymond
 * All rights reserved.
 *
 * Part of the Experts in CMT platform.
 * Do not copy, modify, or redistribute without permission.
 */

/*!
 * ------------------------------------------------------------
 * PLATFORM SEARCH — RESULTS UI
 * ------------------------------------------------------------
 * Styles for:
 *   • Intent-aware platform search results
 *   • Bucketed outputs (Types/Classifications, Subtypes, Genes, Content)
 *   • Responsive grid + editorial content layout
 *   • Typography hierarchy and negative space control
 *
 * Scope:
 *   .platform-search-results
 *
 * Notes:
 *   - Designed for the custom platform search stack (v1.8+)
 *   - Prioritizes clarity, hierarchy, and cognitive ease
 *   - Content bucket intentionally diverges from grid for readability
 */

/* Wrapper */
.ps-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Input + button container */
.ps-input-group__inner {
  display: flex;
  gap: 0.75rem;
  width: 100%;
}

/* Label */
.ps-label {
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--primary);
  margin-bottom: 4px;
}

/* Search input field */
.ps-input {
  flex: 1;
  box-sizing: border-box;

  /* Match the button exactly */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  border: 1px solid #d6d9de;
  border-radius: 12px;
  background: #fff;

  font-size: 16px;
  line-height: normal;

  /* Horizontal padding only; vertical space comes from flex centering */
  padding: 0 14px;

  /* Let the parent define height */
  height: 60px;
  min-height: 44px;

  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;

  /* Normalize native search input rendering */
  -webkit-appearance: none;
  appearance: none;
}

.ps-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Submit Button */
.ps-btn {
  background: transparent;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  border-radius: 16px;
  padding: 0.75em 2.5em;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  min-height: 44px;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.25s ease;
}

.ps-btn:hover,
.ps-btn:focus {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Search result title */
.ps-results-heading-wrap {
  margin-bottom: 2.5rem;
}

.ps-results-heading {
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--primary);
  margin: 0;
}

@media (max-width: 600px) {
  .ps-input,
  .ps-btn {
    height: auto;
    min-height: 44px;
  }
}

/* ============================================================
   Live search: results root loading state
   ============================================================
*/

#ps-results-root {
    transition: opacity 0.15s ease;
}

#ps-results-root.is-loading {
    opacity: 0.4;
}

/* ============================================================
   Platform Search Results – No Results Message
   ============================================================
*/

.ps-no-results {
    margin-top: 2.5rem;
    padding-left: 4rem;
    text-align: left;

}

/* The desktop indent is a third of a phone screen — drop it there */
@media (max-width: 768px) {
    .ps-no-results {
        padding-left: 0;
    }
}

.ps-no-results-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 0.35rem;
}

.ps-no-results-subtitle {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 38rem;
    text-align: left;
    line-height: 1.4;
    margin-top: 0;
}

.ps-no-results-suggestions {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0;
}

.ps-no-results-suggestions li {
    margin: 0.35rem 0;
}

.ps-no-results-suggestions a {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: underline;
}

.ps-no-results-browse {
    font-size: 1.05rem;
    color: var(--muted);
    max-width: 38rem;
    line-height: 1.4;
    margin-top: 1rem;
}

/* Dead-end fallback: breathing room around Explore The Platform.
   Padding, not margin — the section's own 2.5rem margin plus
   sibling margin-collapse made a margin bump invisible. */
#ps-results-root .eic-entry-points {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* main.css forces h2 margins sitewide with !important (var(--h2-mb)
   ≈ 4.5px), which silently beats any specificity — this must be
   !important too; the ID scope then wins the importance tie. */
#ps-results-root .eic-entry-points__heading {
    margin-bottom: 50px !important;
}


/* ============================================================
   Platform Search Results – Identifier Buckets (pills)
   ============================================================
   Types, subtypes, and genes render as flowing pills in the same
   classification family palette the Gene Browser and variant
   mechanism tables use (hexes mirror .gbx-f-* — keep in sync).
   Pills flow and wrap naturally, so no column breakpoints needed.
*/

.platform-search-results .ps-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.platform-search-results .ps-group:not(.ps-group--content) .ps-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.5rem;
}

.platform-search-results .ps-item__title {
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1.4;
}

.platform-search-results .ps-pill {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  margin: 0;
  transition: box-shadow 0.12s ease;
}

.platform-search-results a.ps-pill:hover,
.platform-search-results a.ps-pill:focus-visible {
  box-shadow: inset 0 0 0 1.5px currentColor;
  text-decoration: none;
}

/* Handoff-less overflow: pills past the preview hide until the
   "Show all N" reveal (JS adds is-collapsed; no-JS shows all) */
.platform-search-results .ps-list.is-collapsed .ps-item--more {
  display: none;
}

.platform-search-results .ps-show-all {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--primary);
  text-decoration: underline;
}

.platform-search-results .ps-show-all:hover,
.platform-search-results .ps-show-all:focus-visible {
  text-decoration-thickness: 2px;
}

/* Family palette — mirrors .gbx-f-* in gene-browser-table.php */
.ps-f-blue   { background: #e3f0ff; color: #0b4a8f; }
.ps-f-green  { background: #e6f6ef; color: #0f6b45; }
.ps-f-purple { background: #efe4ff; color: #5b21b6; }
.ps-f-indigo { background: #e5e8fb; color: #3538a3; }
.ps-f-amber  { background: #fdf0d8; color: #8a5a00; }
.ps-f-orange { background: #ffe9e0; color: #9a3412; }
.ps-f-rose   { background: #ffe4ef; color: #9b2f5a; }
.ps-f-slate  { background: #e9edf3; color: #43536b; }
.ps-f-grey   { background: #eceff2; color: #5b6675; }

/* ============================================================
   Content Bucket: Vertical for Editorial Flow
   ============================================================
*/

.ps-group--content .ps-list {
  display: block;
}

/* Individual content result block */
.ps-group--content .ps-item {
  margin-bottom: 1.75rem;
}

/*
 * Results anatomy: the title is the anchor the reader decides on;
 * the source rides the same line as a muted "| The Dorsal Root"
 * suffix (outside the link). The theme's global block-gap pushes
 * large margins between sibling elements — zero it inside an item
 * so title and excerpt read as one unit (the between-item margin
 * provides the separation), then re-declare the small gaps below.
 */
.ps-group--content .ps-item > * {
  margin-block: 0;
}

/* Source suffix on the title line */
.ps-group--content .ps-item__source {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--primary);
  white-space: nowrap; /* never break between the pipe and the name */
}

/*
 * Type scale (whole results page, one size per role):
 *   1.4rem  bucket headings
 *   1.15rem content titles (links)
 *   1.05rem source suffix
 *   0.95rem excerpt prose + identifier pills
 */

/* Content title (clickable) — same size as the grid links */
.ps-group--content .ps-item__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Content excerpt */
.ps-group--content .ps-item__excerpt {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 65ch;
}

/* ============================================================
   Excerpt highlight (matched terms)
   ============================================================
   Unstyled <mark> falls back to the browser's fluorescent
   yellow — this soft wash keeps the marker affordance while
   speaking the site palette. box-decoration-break keeps the
   wash intact when a term wraps across lines.
*/

mark.ps-highlight {
  background: #f9edc8;
  color: inherit;
  padding: 0 0.18em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================
   Typo correction banner ("Showing results for CMT1A")
   ============================================================
*/

.ps-corrected {
  margin-top: 0.75rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--muted);
}

.ps-corrected strong {
  color: var(--primary);
}

/* ============================================================
   Preview + Browser handoff line ("Showing 5 of 93 ...")
   ============================================================
*/

.platform-search-results .ps-view-all {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--muted);
}

/* The handoff link is the primary action on umbrella searches —
   give it real presence (arrow is decorative, CSS-only) */
.platform-search-results .ps-view-all a {
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
}

.platform-search-results .ps-view-all a::after {
  content: " →";
  text-decoration: none;
  display: inline-block;
  padding-left: 0.15em;
}

/* ============================================================
   Bucket breathing room
   ============================================================
   Calibrated for the 5-item previews: buckets are one grid row
   tall now, so the old 6rem gaps read as empty page and pushed
   the Content bucket below the fold.
*/

.platform-search-results .ps-group {
  margin-top: 3.5rem;
}

.platform-search-results .ps-group:first-of-type {
  margin-top: 2rem;
}

/* Group titles: lighter than page-level h2 so four repeating
   headings frame the buckets without dominating them */
.platform-search-results .ps-group__title {
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
}

/* (Column breakpoints removed: pill flow wraps at every width.) */

/* ============================================================
   Mobile: restore the search type scale
   ============================================================
   main.css floors EVERYTHING to 18px !important below 600px and
   expects components to opt back out with their own scoped
   !important (see its wp-block-heading bump). Without this, the
   results heading, group titles, and pills all render at body
   size and the hierarchy disappears on phones.
*/

@media (max-width: 600px) {
  .ps-results-heading {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }

  .platform-search-results .ps-group__title {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
  }

  .platform-search-results .ps-pill {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  /* Source suffix stays subordinate to its 18px title */
  .ps-group--content .ps-item__source {
    font-size: 1rem !important;
  }
}

/* ============================================================
   Touch: pills reach the 44px comfortable tap height
   ============================================================
*/

@media (pointer: coarse) {
  .platform-search-results .ps-pill {
    padding-top: 0.45em;
    padding-bottom: 0.45em;
  }
}