/* CertaRounds — Search screen styles (src/screens/search.js). Owned by its M3 screen agent.
   Semantic tokens only (docs/COMPONENTS.md §2); every rule is scoped under .srch*;
   components are laid out here, never restyled. */

.srch { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.srch-head { margin-bottom: 0; }

/* ============ Field + type chips ============ */
.srch-top { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
/* 17px keeps iOS from zooming the page on focus; a taller target for the screen's one field */
.srch-field .search__input { min-height: 52px; font-size: var(--fs-17); }

.srch-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 767px) {
  /* one scrollable line on phones: the results stay near the top of the screen */
  .srch-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .srch-chips::-webkit-scrollbar { display: none; }
  .srch-chips > .chip { flex: 0 0 auto; }
}

/* ============ Progress of the question-text search ============ */
.srch-prog { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-13); line-height: 1.45; color: var(--text-2); }
.srch-prog__text { display: flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.srch-prog__text .spinner { width: 14px; height: 14px; flex: 0 0 14px; }
.srch-prog--compact { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); }
.srch-prog--done { flex-direction: row; align-items: center; gap: 6px; color: var(--text-2); font-weight: var(--fw-medium); }
.srch-prog--done > .icon { color: var(--text-3); flex: 0 0 auto; }
.srch-prog__sub { color: var(--text-3); font-weight: var(--fw-regular); white-space: nowrap; }
.srch-prog--idle { align-items: flex-start; }
.srch-prog--idle > p:first-child { color: var(--text-2); }
.srch-prog__hint { font-size: var(--fs-12); color: var(--text-3); }
.srch-prog--error { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2); color: var(--text-2); }
.srch-prog--error > .icon { color: var(--warning); flex: 0 0 auto; }
.srch-prog--error > p { flex: 1 1 200px; }
.srch-prog--compact.srch-prog--done,
.srch-prog--compact.srch-prog--idle,
.srch-prog--compact.srch-prog--error { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); }

/* ============ Groups ============ */
.srch-body { min-width: 0; }
.srch-groups { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.srch-group { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.srch-group__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 28px; }
.srch-group__title {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong);
}
.srch-group__count {
  display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: var(--r-pill); background: var(--surface-sunken);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.srch-group__more { flex: 0 0 auto; }
.srch-card { overflow: hidden; }
.srch-li + .srch-li { border-top: 1px solid var(--divider); }

/* ============ Result rows ============ */
.srch-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: start; column-gap: var(--sp-3);
  width: 100%; min-height: 56px; padding: 14px var(--sp-4);
  text-align: left; color: var(--text); background: transparent;
  transition: background var(--dur-1) var(--ease-out);
}
.srch-row:hover { background: var(--surface-hover); }
.srch-row:active { background: var(--surface-pressed); }
.srch-row:focus-visible { outline: none; background: var(--surface-hover); box-shadow: inset 0 0 0 2px var(--focus); }
.srch-row__lead { display: grid; place-items: center; width: 32px; min-height: 22px; padding-top: 1px; }
.srch-row__tile { width: 32px; height: 32px; border-radius: 10px; }
.srch-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.srch-row__title {
  font-size: var(--fs-15); font-weight: var(--fw-semibold); line-height: 1.35; color: var(--text-strong);
  overflow-wrap: break-word;
}
.srch-row__text {
  font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.srch-row__text--lead { font-size: var(--fs-15); line-height: 1.5; color: var(--text); }
.srch-row__meta {
  display: block; overflow: hidden; margin-top: 2px;
  font-size: var(--fs-12); line-height: 1.45; color: var(--text-3);
}
/* separators that never dangle: each token carries its "·" in a 14px lead-in; the row is pulled
   14px left inside the clipped box, so the lead-in of a token that starts a line is cut off */
.srch-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 3px; margin-left: -14px; }
.srch-mi { position: relative; padding-left: 14px; white-space: nowrap; }
.srch-mi--long { white-space: normal; }
.srch-mi--dot::before { content: "·"; content: "·" / ""; position: absolute; left: 4px; color: var(--text-3); }
.srch-row__chev { align-self: center; color: var(--text-3); }
.srch-row--specialty, .srch-row--section, .srch-row--topic { align-items: center; }
.srch-row--specialty .srch-row__lead, .srch-row--section .srch-row__lead, .srch-row--topic .srch-row__lead { padding-top: 0; }
@media (min-width: 1024px) {
  .srch-row { padding: 14px var(--sp-5); }
  .srch-row__text { font-size: var(--fs-15); -webkit-line-clamp: 2; line-clamp: 2; }
  .srch-row__meta { font-size: var(--fs-13); }
}

.srch-mark {
  /* no horizontal padding: an in-word match ("methaemoglobin") must not split the word; the tint
     reaches past the letters with a box-shadow instead */
  background: var(--accent-soft); color: var(--accent-soft-fg);
  border-radius: 3px; padding: 0; box-shadow: 0 0 0 1.5px var(--accent-soft);
  font-weight: var(--fw-semibold);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.srch-dot { color: var(--text-3); }
.srch-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--surface-sunken); color: var(--text-2); font-weight: var(--fw-medium);
}
.srch-tag--accent { background: var(--accent-soft); color: var(--accent-soft-fg); }
.srch-q { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-medium); }
.srch-q--ok { color: var(--success); }
.srch-q--bad { color: var(--danger); }
.srch-q--new { color: var(--text-3); font-weight: var(--fw-regular); }

.srch-pager { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.srch-pager__meta { font-size: var(--fs-13); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* specialty filter (phones and tablets; the rail has the list on desktop) */
.srch-facet-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.srch-facet-row__label { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-3); }

/* ============ Before typing ============ */
.srch-idle { display: flex; flex-direction: column; gap: var(--sp-6); }
.srch-hint { font-size: var(--fs-13); color: var(--text-3); }
.srch-idle__sec { display: flex; flex-direction: column; gap: var(--sp-3); }
.srch-idle__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.srch-idle__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.srch-idle__chips .chip { max-width: 100%; }
.srch-idle__chips .chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-scope-cap { display: flex; align-items: flex-start; gap: var(--sp-2); max-width: 68ch; font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.srch-scope-cap > .icon { flex: 0 0 auto; margin-top: 2px; color: var(--text-3); }
.srch-next { margin-top: var(--sp-2); }
.srch-idle__keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text-3); }

/* ============ Right rail (≥ 1200) ============ */
.srch-rail { display: flex; flex-direction: column; gap: var(--sp-4); }
.srch-rail-card .card__title { font-size: var(--fs-15); }
.srch-facets { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-2) calc(-1 * var(--sp-2)) 0; }
.srch-facet {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  min-height: 40px; padding: 6px var(--sp-2); border-radius: var(--r-sm);
  text-align: left; font-size: var(--fs-13); color: var(--text);
  transition: background var(--dur-1) var(--ease-out);
}
.srch-facet:hover { background: var(--surface-hover); }
.srch-facet:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.srch-facet[aria-pressed="true"] { background: var(--selected-bg); box-shadow: inset 0 0 0 1.5px var(--selected-border); color: var(--text-strong); font-weight: var(--fw-semibold); }
.srch-facet__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srch-facet__n { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: var(--fw-semibold); }
.srch-facet--all { grid-template-columns: 20px minmax(0, 1fr); color: var(--link); font-weight: var(--fw-semibold); }
.srch-keys { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-13); color: var(--text-2); }
.srch-keys li { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
.srch-keys__k { display: inline-flex; gap: 4px; }

/* ============ F2 (R2) ============ */
/* D16: phone result rows have one meta line — topic (ellipsized) + last-result icon */
.srch-one { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.srch-one__main { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.srch-one__icon { flex: 0 0 auto; display: inline-flex; margin-left: 8px; }
/* status line: "Searched all 5,286 questions" never breaks; the spelling note drops on very narrow phones */
.srch-prog__main { white-space: nowrap; }
@media (max-width: 379px) { .srch-prog__sub { display: none; } }
/* recent topics on phones: full-width rows (names wrap, never ellipsized — D6) */
.srch-pick {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; column-gap: var(--sp-3);
  width: 100%; min-height: 48px; padding: 10px var(--sp-4); text-align: left;
  font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--text-strong);
  transition: background var(--dur-1) var(--ease-out);
}
.srch-pick:hover { background: var(--surface-hover); }
.srch-pick:active { background: var(--surface-pressed); }
.srch-pick:focus-visible { outline: none; background: var(--surface-hover); box-shadow: inset 0 0 0 2px var(--focus); }
.srch-pick__mark { display: grid; place-items: center; }
.srch-pick__name { overflow-wrap: break-word; line-height: 1.35; }
.srch-pick__go { color: var(--text-3); }
/* day one: the specialties as a grid of gem buttons */
.srch-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.srch-spec {
  display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: 8px var(--sp-3);
  border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); text-align: left;
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.srch-spec:hover { background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--border-hover); }
.srch-spec:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.srch-spec__mark { display: grid; flex: 0 0 auto; }
.srch-spec__name { min-width: 0; overflow-wrap: break-word; line-height: 1.25; }
@media (max-width: 380px) { .srch-specs { grid-template-columns: 1fr 1fr; } }
/* F3 */
/* phones: a full-width "Show all N questions" at the end of a preview list */
.srch-all {
  display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 48px;
  font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--link);
  transition: background var(--dur-1) var(--ease-out);
}
.srch-all:hover { background: var(--surface-hover); }
.srch-all:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
/* the chip scrollers keep the page gutter after their last chip (flex overflow ignores end padding) */
.srch-chips::after { content: ""; flex: 0 0 1px; }
@media (max-width: 767px) { .srch-chips { padding-right: 0; } .srch-chips::after { flex-basis: calc(var(--gutter) - 2px); } }

/* ============ F4 (R4) ============ */
/* D7: the phone chip scroller clipped the chips' 44px ::after hit areas to 34px (overflow-x:auto clips
   both axes). 7px of padding above and below holds a 30px chip's 44px hit area; the same negative
   margin keeps the row's place in the rhythm. */
@media (max-width: 767px) {
  .srch-chips { padding-top: 7px; padding-bottom: 7px; margin-top: -5px; margin-bottom: -5px; }
  /* while more chips are off-screen, the edge fades (a chip cut at the edge read as a word) */
  .srch-chips.is-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .srch-chips.is-more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px); mask-image: linear-gradient(to right, transparent, #000 32px); }
  .srch-chips.is-more-start.is-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
}
/* the type chips and the question-text status share a row from 768 (fewer stacked bands above the first result) */
.srch-chips-wrap { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.srch-chips-wrap:empty { display: none; }
@media (min-width: 768px) {
  .srch-chips-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-4); row-gap: var(--sp-2); }
  .srch-chips-wrap > .srch-prog:not(.srch-prog--done) { flex-basis: 100%; }
  /* the specialty filter: label and chips on one row */
  .srch-facet-row { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .srch-facet-row__label { flex: 0 0 auto; }
}
/* sentence case, like every other label on the page (not an all-caps eyebrow) */
.srch-facet-row__label { font-size: var(--fs-13); font-weight: var(--fw-semibold); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.srch-group__title:focus, .srch-body .empty__title:focus { outline: none; }