/*
 * The homepage Search tab: the field, its suggestions dropdown, and "Recent
 * searches". Ported from the designer's prototype (styles.css) with class names
 * kept byte-identical, then adjusted to the Figma frames where the two disagree
 * (each adjustment is called out below). See the note at the top of home_hero.css
 * for why this is plain CSS rather than Tailwind utilities.
 *
 * Shared pieces live in search_shared.css: the motion tokens, .t-dropdown and the
 * avatar. Do not rely on load order between these files -- they are concatenated
 * -- so where a rule here specialises a shared one it is more specific.
 *
 * Everything below renders inside .home-hero, so it inherits Inter and the colour
 * tokens from home_hero.css.
 */

/* ----------------------------------------------------------------- field ---
 * Wider and shorter than the compose box: one line, 32px radius. The submit
 * button is a .compose-send (home_hero.css) so it shares the Create button's look.
 */
.home-search-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.home-search {
  /* The dropdown is absolutely positioned against this. */
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #fff;
  border: 0;
  border-radius: 32px;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 4%),
    0 2px 4px -1px rgb(3 7 18 / 5%),
    0 4px 8px -1px rgb(3 7 18 / 5%);
  transition: box-shadow 220ms var(--modal-ease);
}

.home-search:focus-within {
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 8%),
    0 1px 2px -1px rgb(3 7 18 / 5%),
    0 4px 16px -4px rgb(3 7 18 / 8%);
}

.home-search-field {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  padding: 4px 10px;
}

.home-search-field input {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.16px;
  background: transparent;
  border: 0;
  outline: 0;
}

.home-search-field input::placeholder { color: var(--text-quaternary); }

/* Chrome and Safari draw their own clear (x) and magnifier inside a type=search
 * input. The design has neither inside the home field. */
.home-search-field input::-webkit-search-decoration,
.home-search-field input::-webkit-search-cancel-button,
.home-search-field input::-webkit-search-results-button,
.home-search-field input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.home-search .compose-send { flex: 0 0 36px; }

/* The open dropdown has to sit above the feed that follows the hero. The feed's
 * carousels and cards create their own stacking contexts, so without this they
 * paint over the dropdown's lower half. */
.home-hero:has(.home-search-results:not([hidden])) {
  position: relative;
  z-index: 5;
}

/* -------------------------------------------------------------- dropdown ---
 * Figma: 8px under the field and 648px wide -- 4px wider than the field on each
 * side (the prototype is 12px under and flush).
 *
 * The max height is set from JS (--home-search-results-cap, see
 * home_search_controller#syncFrame) because 100dvh does not shrink for the on-screen
 * keyboard: on a phone the lower half of the list would sit under it.
 */
.home-search-results {
  --home-search-results-max: 640px;
  position: absolute;
  top: calc(100% + 8px);
  left: -4px;
  right: -4px;
  z-index: 2;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 4%);
  border-radius: 24px;
  box-shadow:
    0 2px 4px -1.5px rgb(3 7 18 / 5%),
    0 8px 16px -4px rgb(3 7 18 / 5%),
    0 24px 24px -4px rgb(3 7 18 / 5%);
}

/* `overflow: hidden` here is deliberate and safe: it clips the list to the card's
 * rounded corners, and the card is the dropdown itself, not an ancestor of it. */
.home-search-results { overflow: hidden; }

/* The edge fades are a mask whose two stops animate (registered so they can be
 * transitioned). The controller toggles .is-overflowing / .is-scrolled /
 * .is-at-end from the list's scroll position -- classes rather than a scroll
 * timeline, because browsers without animation-timeline would otherwise get a
 * hard cut where the design has a fade. */
@property --home-search-fade-t {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --home-search-fade-b {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.home-search-results-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: var(--home-search-results-cap, var(--home-search-results-max));
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  transition:
    --home-search-fade-t 150ms ease-out,
    --home-search-fade-b 150ms ease-out;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--home-search-fade-t),
    #000 calc(100% - var(--home-search-fade-b)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--home-search-fade-t),
    #000 calc(100% - var(--home-search-fade-b)),
    transparent 100%
  );
}

.home-search-results-list::-webkit-scrollbar { display: none; }

.home-search-results-list.is-overflowing { --home-search-fade-b: 64px; }
.home-search-results-list.is-overflowing.is-scrolled { --home-search-fade-t: 40px; }
.home-search-results-list.is-overflowing.is-at-end { --home-search-fade-b: 0px; }

/* ---------------------------------------------------------------- content --- */
.home-search-section {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.home-search-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.home-search-section h2 {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
}

.home-search-more {
  padding: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  text-decoration: none;
  cursor: pointer;
}

.home-search-more:hover { color: var(--text-secondary); }

.home-search-more:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(0 147 255 / 30%);
  border-radius: 6px;
}

/* A hit is a link: a Swizzel, a learning path or a person. */
.home-search-hit {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.home-search-hit.is-person { gap: 16px; }

.home-search-hit:hover,
.home-search-hit:focus-visible { background: #fafaf9; }

.home-search-hit:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(0 147 255 / 30%);
}

.home-search-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 8px;
  object-fit: cover;
}

/* A learning path with no cover image: its tinted icon tile, as on the path card. */
.home-search-thumb--tile {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-search-thumb--tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-search-hit-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}

.home-search-hit.is-person .home-search-hit-copy { gap: 4px; }

.home-search-hit-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-search-meta {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.14px;
}

.home-search-meta.is-counts { gap: 10px; }

.home-search-meta > span:not(.home-search-dot, .home-search-meta-orbs, .home-search-byline) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-search-byline {
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
  gap: 8px;
  align-items: center;
  color: var(--text-primary);
}

/* Figma sets the author's name in Medium; the prototype has it Regular. */
.home-search-byline span {
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-search-dot {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 50%;
  background: var(--text-quaternary);
}

.home-search-meta-orbs {
  display: flex;
  gap: 4px;
  align-items: center;
}

.home-search-meta-orbs .chip-mesh-orb {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
}

.home-search-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 12px;
}

.home-search-section:last-child .home-search-pills { padding-bottom: 12px; }

.home-search-pill {
  display: inline-flex;
  height: 40px;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgb(0 0 0 / 4%);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(3 7 18 / 5%);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 150ms ease-out,
    border-color 150ms ease-out;
}

.home-search-pill:hover {
  background: #fafaf9;
  border-color: rgb(0 0 0 / 8%);
}

.home-search-pill:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(0 147 255 / 30%);
}

.home-search-pill .chip-mesh-orb {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
}

.home-search-pill > span:not(.chip-mesh-orb) {
  padding: 0 4px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
}

/* "Search is unavailable": shown in place of the list when the request fails. */
.home-search-empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.home-search-empty-copy {
  display: flex;
  min-height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 12px;
}

.home-search-empty p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
}

/* ------------------------------------------------------- recent searches ---
 * Figma: 64px under the field and 20px between the header and the list (the
 * prototype has 16px).
 */
.home-recent-searches {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-top: 64px;
}

.home-recent-searches-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
}

.home-recent-searches-head h2,
.home-recent-searches-clear {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
}

.home-recent-searches-head h2 { color: var(--text-tertiary); }

.home-recent-searches-clear {
  padding: 0;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.home-recent-searches-clear:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgb(0 147 255 / 30%);
  border-radius: 6px;
}

.home-recent-searches-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-recent-search {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 8px;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.14px;
  text-align: left;
  text-decoration: none;
}

.home-recent-search:hover { background: #fafaf9; }

.home-recent-search:focus-visible {
  outline: 0;
  background: #fafaf9;
  box-shadow: 0 0 0 3px rgb(0 147 255 / 30%);
}

/* Both icons are currentColor strokes (search_icon); each gets its design colour. */
.home-recent-search svg {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}

.home-recent-search .home-recent-search-open { color: var(--text-quaternary); }

.home-recent-search span {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .home-search,
  .home-search-hit,
  .home-search-pill,
  .home-search-results-list { transition: none !important; }
}